/* ============================
   ✅ Font Declarations (Optimized)
   ============================ */

/* Design System Tokens */
:root {
  --dm-cream: #F9EFDC;
  --dm-graphite-700: #3B3229; /* Used in HIW neural network borders */
  --dm-graphite-600: #5C5242; /* Used in HIW neural network borders */
}

/* Inria Serif */
/* Critical fonts (above-the-fold) - use block to prevent FOUT */
@font-face {
    font-family: 'Inria Serif';
    src: url('/assets/fonts/Inria_Serif/InriaSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block; /* Block for critical above-the-fold content */
}

@font-face {
    font-family: 'Inria Serif';
    src: url('/assets/fonts/Inria_Serif/InriaSerif-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: block; /* Block for critical above-the-fold content (buttons, headings) */
}

/* Non-critical fonts (below-the-fold or less common) - use optional to prevent unnecessary swaps */
@font-face {
    font-family: 'Inria Serif';
    src: url('/assets/fonts/Inria_Serif/InriaSerif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: optional; /* Optional for non-critical italic variant */
}

@font-face {
    font-family: 'Inria Serif';
    src: url('/assets/fonts/Inria_Serif/InriaSerif-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: optional; /* Optional for non-critical italic variant */
}

@font-face {
    font-family: 'Inria Serif';
    src: url('/assets/fonts/Inria_Serif/InriaSerif-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: optional; /* Optional for non-critical light weight */
}

@font-face {
    font-family: 'Inria Serif';
    src: url('/assets/fonts/Inria_Serif/InriaSerif-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: optional; /* Optional for non-critical light italic */
}

/* Gambarino */
/* Critical font (hero subtitle, description) - use block to prevent FOUT */
@font-face {
    font-family: 'Gambarino';
    src: url('/assets/fonts/Gambarino-Regular/TTF/Gambarino-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block; /* Block for critical above-the-fold content (hero subtitle, description) */
}

/* Spectral */
/* Used in HIW section and Why section - use swap to ensure font loads and prevents FOUT */
@font-face {
    font-family: 'Spectral';
    src: url('/assets/fonts/Spectral/Spectral-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Swap to ensure font loads for HIW section */
}

@font-face {
    font-family: 'Spectral';
    src: url('/assets/fonts/Spectral/Spectral-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap; /* Swap to ensure font loads for HIW section */
}

@font-face {
    font-family: 'Spectral';
    src: url('/assets/fonts/Spectral/Spectral-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: optional; /* Optional for non-critical semibold weight */
}

@font-face {
    font-family: 'Spectral';
    src: url('/assets/fonts/Spectral/Spectral-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: optional; /* Optional for non-critical italic variant */
}

@font-face {
    font-family: 'Spectral';
    src: url('/assets/fonts/Spectral/Spectral-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: optional; /* Optional for non-critical medium weight */
}

@font-face {
    font-family: 'Spectral';
    src: url('/assets/fonts/Spectral/Spectral-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: optional; /* Optional for non-critical italic variant */
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: #F9EFDC;
    color: #000000;
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    touch-action: pan-y;
    position: relative;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    /* Note: Custom scrollbar styling not needed for mobile - mobile browsers handle scrollbars natively */
}

/* Phase 6: Page-wide fade-in - Initial hidden state */
body:not(.fade-in-complete) main {
    opacity: 0;
    visibility: hidden;
}

/* Respect prefers-reduced-motion - show content immediately if motion is reduced */
@media (prefers-reduced-motion: reduce) {
    body:not(.fade-in-complete) main {
        opacity: 1;
        visibility: visible;
    }
}

/* Fade-in complete state */
body.fade-in-complete main {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    /* Prevent any scrolling when menu is open */
    overscroll-behavior: none;
    touch-action: none;
}

/* ============================
   Long-press hardening (mobile)
   ============================ */
:root { --tap-clear: transparent; }

/* Non-interactive copy */
.no-select,
.hero-title,
.hero-subtitle,
.hero-description,
.intro-lead,
.intro-description,
.intro-mission,
.why-heading,
.why-block h3,
.why-block p,
.final-v2__title,
.final-v2__tagline {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: var(--tap-clear);
}

/* Decorative images should not show save/callout */
.intro-image {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Interactive hit areas: keep taps clean and intentional */
.cta-button,
.menu-panel .our-story-btn,
.final-v2__icons .social-icon,
.final-v2__icons .email-icon {
  -webkit-tap-highlight-color: var(--tap-clear);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Waitlist overlay copy should not be selectable */
.wlx__title,
.wlx__note,
.wlx__status,
.wlx__success {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: var(--tap-clear);
}

/* Main Content Container */
main {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Header Styles - Pill-Shaped Glassmorphic Floating Header */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px; /* Ultra-sleek padding for minimal pill */
    
    /* Pill-shaped floating positioning - FIXED to show glass effect on scroll */
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px); /* Inset from edges */
    max-width: 340px; /* Ultra-sleek, narrower pill */
    margin: 0 auto;
    
    /* Glassmorphic effect - Optimized for visibility, performance, and contrast */
    background: rgba(255, 255, 255, 0.28); /* Increased from 0.20 to 0.28 for better visibility on cream background */
    backdrop-filter: blur(13px) saturate(1.15); /* Reduced from 16px to 13px for better mobile performance, saturation reduced from 1.3 to 1.15 */
    -webkit-backdrop-filter: blur(13px) saturate(1.15);
    
    /* Pill shape and glass definition */
    border-radius: 100px; /* Full pill shape */
    border: 0.75px solid rgba(255, 255, 255, 0.45); /* Strengthened from 0.5px/35% to 0.75px/45% for better glass edge definition */
    
    /* Depth and elevation - Lighter shadows */
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    
    /* Smooth transitions - specific properties only for better performance */
    transition: backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Performance optimizations */
    z-index: 1000;
    /* will-change removed - will be added dynamically via JavaScript when needed */
    contain: layout style paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
    .site-header {
        background: rgba(249, 239, 220, 0.96); /* Cream fallback with high opacity */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #000000; /* Default black for mobile landing pages */
    -webkit-tap-highlight-color: var(--tap-clear);
    -webkit-touch-callout: none;
}

.logo-svg {
    width: auto;
    height: 18px; /* Reduced from 22px for better proportion */
    display: block;
}

.logo-svg path {
    fill: currentColor; /* Ensure paths use currentColor for CSS control */
}

.logo:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
    border-radius: 4px;
}

.menu-toggle {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px; /* Sleeker padding while maintaining touch target */
    margin-right: 0;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: var(--tap-clear);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    /* Override desktop button styles */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    transition: none;
    transform: none;
}

.menu-toggle:hover,
.menu-toggle:active {
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.menu-toggle:focus-visible {
    outline: none;
    outline-offset: 0;
    border-radius: 0;
}

.menu-icon {
    width: 24px; /* Sleeker icon for refined appearance */
    height: 24px;
}

/* Menu Backdrop */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    z-index: 998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Slide-in Menu Panel */
.menu-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    background-color: rgba(249, 239, 220, 0.98);
    padding: 80px 24px; /* Aligned to 8px grid: 10×8 top/bottom, 3×8 horizontal */
    transition: transform 0.25s ease-out;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* will-change removed - will be added dynamically via JavaScript when menu opens */
    backface-visibility: hidden;
}

.menu-panel.active {
    transform: translateX(-100%);
}

.placeholder-text {
    font-family: 'Gambarino', serif; /* Changed from Sentient to Gambarino to match subtitle/body text pattern */
    font-weight: 500;
    font-size: 28px; /* Increased from 24px for better readability and hierarchy */
    letter-spacing: 0.015em; /* Changed from -1px to 0.015em to match hero-subtitle pattern */
    color: #000000;
    text-align: center;
    line-height: 1.5; /* Increased from 1.4 for better readability */
    max-width: 320px; /* Increased from 280px for better text flow */
    margin: 0 auto 48px; /* Aligned to 8px grid: 6×8 = 48px */
}

.menu-panel .our-story-btn {
    font-family: 'Inria Serif', serif; /* Correct - matches button pattern */
    font-weight: 700;
    font-size: 16px; /* Changed from 15.5px to standard 16px */
    letter-spacing: 0.01em; /* Changed from 0.3px to 0.01em for consistency */
    color: #ffffff;
    background-color: #000000;
    border: none;
    border-radius: 8px; /* Changed from 10px to 8px to align with 8px grid system */
    padding: 12px 24px; /* Aligned to 8px grid: 1.5×8 vertical, 3×8 horizontal */
    margin-top: 0; /* Removed margin-top since spacing is handled by placeholder-text margin-bottom */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    text-align: center;
    width: auto;
    min-width: 200px; /* Changed from 172px to 200px (25×8) for better alignment */
    display: inline-block;
    cursor: pointer;
}

.menu-panel .our-story-btn:hover {
    animation: bounce 0.6s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.menu-panel .our-story-btn:active {
    transform: scale(0.97);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

/* Hero Section Styles */
.hero-section {
    padding: 0 24px; /* Standardized to 3×8 grid */
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}

.hero-title {
    font-family: 'Gambarino', serif;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 0.01em;
    margin-top: 192px; /* +24px additional shift for optimal viewport balance */
    margin-bottom: 24px;
    line-height: 1.1;
}

.hero-subtitle {
    font-family: 'Gambarino', serif;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.015em;
    margin-bottom: 24px;
    line-height: 1.25;
}

.hero-description {
    font-family: 'Gambarino', serif;
    font-weight: 400;
    font-size: 19px;
    max-width: 340px;
    margin: 0 auto 24px; /* Consistent 24px spacing (3×8) */
    line-height: 1.5;
    text-align: center;
}

/* CTA Buttons */
.cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 0;
    margin-bottom: 32px; /* Optimized to prevent carousel crop (4×8) */
}

/* Bounce Animation - Applied to all buttons */
@keyframes bounce {
    0%, 100% { transform: scale(1) translateY(0) translateZ(0); }
    50% { transform: scale(1.05) translateY(-4px) translateZ(0); }
}

/* Combined Base Styles */
.cta-button {
    /* Common button styles */
    font-family: 'Inria Serif', serif;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease;
    transform: scale(1) translateZ(0);
    /* will-change removed - will be added dynamically via JavaScript on hover/interaction */
    position: relative;
    overflow: hidden;
    width: 252px;
    height: 44px;
    font-size: 16px;
}

/* Primary CTA - Solid Black (Conversion Focus) */
.cta-button.primary {
    color: #ffffff;
    background-color: #000000;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cta-button.primary:hover {
    animation: bounce 0.6s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Secondary CTA - Outline Style (Educational) */
.cta-button.secondary {
    color: #000000;
    background-color: transparent;
    border: 2px solid #000000;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease,
                background-color 0.25s ease,
                color 0.25s ease;
}

.cta-button.secondary:hover {
    animation: bounce 0.6s ease;
    background-color: #000000;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Editorial Divider - Luxury magazine style */
.divider {
    position: relative;
    height: 1px; /* Thin editorial line */
    background: none;
    border: none;
    padding: 0;
    width: 75%; /* Standardized width */
    max-width: 320px; /* Consistent maximum width */
    margin: 0 auto 8px; /* Snug gap before next section */
    overflow: visible;
}

.divider::before,
.divider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.divider::before {
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0)
    );
}

.divider::after {
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.14) 0%,
        rgba(0, 0, 0, 0.08) 40%,
        rgba(0, 0, 0, 0.04) 60%,
        transparent 75%
    );
}

/* Title divider (animated) - standardized */
.title-divider {
    width: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.75); /* Standardized opacity */
    margin: 48px auto; /* Standardized spacing */
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left;
    position: relative;
    left: 0;
}

.title-divider.visible {
    width: 75%; /* Standardized width */
}

/* Intro divider - standardized */
.intro-divider {
    width: 75%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.75);
    margin: 24px auto 8px; /* Tighter spacing before next section */
    border: none;
    position: relative;
    z-index: 1;
}

.intro-divider--short {
    width: 64%;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(27,23,19,0.45), transparent);
    border-radius: 999px;
    margin: 14px auto 0  ;
}

.intro-divider::before {
    content: "How it continues";
    display: inline-block;
    font-family: 'Spectral', serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(27, 23, 19, 0.6);
    background: #F9EFDC;
    padding: 0 12px;
    position: relative;
    display: inline-block;
    margin: 0 auto 12px;
}

/* Animation keyframes */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.015); }
    100% { transform: scale(1); }
}



/* Class to Trigger Idle Pulse */
.cta-button.pulsing {
    animation: pulse 2s infinite;
    will-change: transform;
    transform: translateZ(0);
}



/* Introduction Section - Unified Design */
.intro-section {
    padding: 24px min(5.5vw, 24px) 36px;
    margin: 0;
    background-color: #F9EFDC;
    position: relative;
}

/* Adaptive vertical rhythm - Better grouping */
.intro-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.intro-block:first-of-type {
    align-items: center;
    text-align: center;
    margin-bottom: 22px;
}

.intro-block:first-of-type .intro-lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.intro-block:nth-of-type(2) {
    align-items: center;
    margin-top: -6px;
    margin-bottom: 18px;
}

/* Primary statement - what we do */
.intro-lead {
    font-family: 'Gambarino', serif;
    font-weight: 540;
    font-size: clamp(20px, 4.8vw, 25px);
    line-height: clamp(1.24, 1.26, 1.28);
    letter-spacing: -0.007em;
    color: #1B1713;
    text-align: center;
    margin: 14px auto 6px;
    padding: 0 10px;
    max-width: min(380px, 84vw);
    white-space: normal;
    text-wrap: balance;
    hyphens: manual;
    text-shadow:
      0 0.25px 0 rgba(0, 0, 0, 0.18),
      0 0.6px 3px rgba(27, 23, 19, 0.1);
    position: relative;
    /* Prevent synthetic bolding during font load - ensures consistent appearance */
    font-synthesis: none;
}

.intro-lead::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(27,23,19,0), rgba(27,23,19,0.55), rgba(27,23,19,0));
    opacity: 0.85;
    border-radius: 999px;
}

.intro-description {
    font-family: 'Gambarino', serif;
    font-weight: 400;
    font-size: clamp(16px, 3.8vw, 19px);
    line-height: 1.7;
    color: #000000;
    text-align: center;
    margin: 8px 0 0 0;
    padding: 0;
    max-width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
    word-spacing: 0.01em;
    white-space: normal;
    text-wrap: balance;
    hyphens: auto;
}


@media (max-width: 399px) {
    .intro-section {
        padding: 18px 16px 26px;
    }
}

@media (min-width: 480px) {
    .intro-lead {
        font-size: clamp(23px, 4.4vw, 25px);
        max-width: min(340px, 80vw);
    }

    .intro-description {
        font-size: 19px;
        line-height: 1.7;
        max-width: min(360px, 78vw);
    }
}

@media (max-width: 440px) {
  .intro-lead,
  .intro-description {
    display: block;
    white-space: normal !important;
    text-wrap: balance !important;
    max-width: 88vw !important;
    margin-left: auto;
    margin-right: auto;
  }

  .intro-description {
    font-size: 16px;
    line-height: 1.68;
  }

  .intro-description br,
  .intro-lead br {
    content: "";
    display: block;
    margin-bottom: 0.32em;
  }
}

/* Mission statement - subtle, secondary */
/* Framed Card Treatment for Image + Caption */
.intro-frame {
    background: #f6e6d3; /* Brand beige - subtle mat effect */
    border: 1px solid #000000;
    border-radius: 16px;
  padding: 18px 20px 22px 20px;
    margin: 0 auto;
  max-width: 320px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
  gap: 12px;
}

.intro-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 8px; /* Slightly softer corners inside frame */
    object-fit: contain;
    object-position: center;
    /* Performance: Prevent layout shift - width/height attributes in HTML handle aspect-ratio */
    /* aspect-ratio removed - using natural image dimensions to prevent extra spacing */
}

.intro-mission {
    font-family: 'Inria Serif', serif;
    font-weight: 500;
    font-size: 15px;
    font-style: italic;
    letter-spacing: 0.015em;
    line-height: 1.7;
    text-align: center;
    margin: 0;
    max-width: 100%;
    color: rgba(27, 23, 19, 0.72);
}

/* Mid-page Quote Block */
.quote-break {
    padding: 80px 24px 64px 24px; /* Reduced bottom padding from 80px to 64px to bring Why section closer */
    background-color: #F9EFDC; /* Solid cream background - matches page and why section */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0; /* No bottom margin to prevent gaps */
    position: relative; /* For z-index stacking */
    z-index: 1;
}

.transition-quote {
    font-family: 'Spectral', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 30px;
    line-height: 1.45;
    letter-spacing: 0.005em;
    color: #000; /* Black text on cream background - excellent contrast */
    text-align: center;
    margin: 0;
    max-width: 560px;
    quotes: none;
    position: relative;
    padding: 24px 32px; /* 3×8 vertical, 4×8 horizontal */
    z-index: 2; /* Above quote section background and gradient overlays to ensure readability */
}

/* Decorative Opening Quote */
.transition-quote::before {
    content: '"';
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 120px;
    line-height: 0.8;
    color: rgba(0, 0, 0, 0.08);
    position: absolute;
    top: -8px;
    left: -20px;
    z-index: 0;
    pointer-events: none;
}

/* Decorative Closing Quote */
.transition-quote::after {
    content: '"';
    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 120px;
    line-height: 0.8;
    color: rgba(0, 0, 0, 0.08);
    position: absolute;
    bottom: -48px;
    right: 20px;
    z-index: 0;
    pointer-events: none;
}

/* Why Section Styles */
.why-section {
    padding: 32px min(6vw, 28px) 24px; /* Reduced top padding to 32px (4×8px) and bottom to 24px (3×8px) for better flow and connection to CTA */
    margin-top: 0; /* No negative margin needed without gradient */
    margin-bottom: 0; /* No negative margin needed without gradient */
    margin-left: 0; /* Ensure no left gap */
    margin-right: 0; /* Ensure no right gap */
    background-color: #F9EFDC; /* Solid cream background - matches page background */
    position: relative;
    overflow: visible;
    clear: both; /* Clear any floated elements from previous sections */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Gradient removed - using solid cream background for better readability */



.why-heading {
    font-family: 'Gambarino', serif;
    font-weight: 500;
    font-size: clamp(32px, 6.4vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #1B1713; /* Black text for contrast on cream background */
    margin-bottom: 12px;
    text-align: left;
    position: relative;
}

.why-sub {
    font-family: 'Spectral', serif; /* Softer serif font for subtitle feel */
    font-weight: 400; /* Lighter weight to differentiate from heading */
    font-style: italic; /* Italic styling for subheading feel */
    font-size: clamp(16px, 3.8vw, 18px); /* Smaller than heading - clearer hierarchy */
    color: rgba(27, 23, 19, 0.7); /* More transparent for subtle subheading feel */
    margin-top: -4px; /* Tighter spacing from heading (negative margin) */
    margin-bottom: 32px; /* More space before content (4×8px grid) */
    line-height: 1.5; /* Slightly looser for readability */
    letter-spacing: 0.01em; /* Slightly more spacing for softer feel */
    text-align: left;
    max-width: min(360px, 92vw); /* Responsive max-width */
    position: relative;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.why-divider {
    width: 75%; /* Standardized */
    height: 1px;
    background: rgba(27, 23, 19, 0.2); /* Dark color for visibility on cream background */
    margin: 0 auto 32px; /* 4×8 bottom spacing */
    border: none;
}

/* Responsive Design for Larger Mobiles - 4px Grid System */

/* Medium Mobile (375px - 414px) */
@media (min-width: 375px) {
    .site-header {
        padding: 6px 16px; /* Ultra-sleek padding */
    }
    
    .hero-section {
        padding: 0 24px; /* Standardized */
    }
    
    .dmt-carousel {
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px);
    }
    
    .hero-title {
        font-family: 'Gambarino', serif;
        font-weight: 400;
        font-size: 52px;
        letter-spacing: 0.01em;
        margin-top: 192px; /* +24px additional shift for optimal viewport balance */
        margin-bottom: 24px;
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-family: 'Gambarino', serif;
        font-weight: 500;
        font-size: 30px;
        letter-spacing: 0.015em;
        margin-bottom: 24px;
        line-height: 1.25;
    }
    
    .hero-description {
        font-family: 'Gambarino', serif;
        font-size: 20px;
        max-width: 360px;
        margin-bottom: 24px;
        line-height: 1.5;
    }
    
    .cta-button {
        width: 268px;
        height: 48px;
        font-size: 17px;
    }
    
    .divider {
        width: 75%; /* Standardized */
        max-width: 320px;
    }
    
    /* Introduction Section */
    .intro-section {
        padding: 20px 24px 36px;
    }
    
    .intro-block:first-of-type {
        margin-bottom: 36px;
    }
    
    .intro-lead {
        font-size: 27px;
        max-width: 82%;
        margin-bottom: 16px; /* Consistent tighter spacing */
    }
    
    .intro-description {
        font-size: 18px;
        line-height: 1.7;
        max-width: 82%;
        margin-bottom: 20px; /* Maintain visual closure */
    }
    
    .intro-frame {
        max-width: 320px;
    }
    
    .intro-mission {
        font-size: 15px;
        margin-top: 16px; /* Consistent tighter spacing */
    }
    
    .why-section {
        padding: 52px 28px 56px; /* Reduced padding for better flow: 52px top (6.5×8px), 56px bottom (7×8px) for better connection to CTA */
    }
    
    
    .why-heading {
        font-size: 46px;
    }
    
    .why-sub {
        font-size: clamp(18.5px, 4.3vw, 19px); /* Responsive sizing */
        max-width: min(380px, 92vw); /* Responsive max-width */
    }
    
    
    .lp-footer-cta {
        margin: 24px 0 56px;
        padding-top: 24px; /* Reduced padding for better connection */
    }
    
    .lp-footer-cta__bridge {
        font-size: clamp(17px, 4vw, 18.5px);
        max-width: min(380px, 92vw);
    }
    
    .mobile-footer {
        padding: 0 24px 24px 24px; /* Standardized */
    }
}

/* Large Mobile (415px - 480px) */
@media (min-width: 415px) {
    .site-header {
        padding: 6px 18px; /* Ultra-sleek padding */
    }
    
    .hero-section {
        padding: 0 24px; /* Standardized */
    }
    
    .dmt-carousel {
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px);
    }
    
    .hero-title {
        font-family: 'Gambarino', serif;
        font-weight: 400;
        font-size: 56px;
        letter-spacing: 0.005em;
        margin-top: 192px; /* +24px additional shift for optimal viewport balance */
        margin-bottom: 32px;
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-family: 'Gambarino', serif;
        font-weight: 500;
        font-size: 32px;
        letter-spacing: 0.01em;
        margin-bottom: 32px;
        line-height: 1.25;
    }
    
    .hero-description {
        font-family: 'Gambarino', serif;
        font-size: 21px;
        max-width: 400px;
        margin-bottom: 24px;
        line-height: 1.5;
    }
    
    .cta-button {
        width: 284px;
        height: 52px;
        font-size: 18px;
    }
    
    .divider {
        width: 75%; /* Standardized */
        max-width: 320px;
    }
    
    /* Introduction Section */
    .intro-section {
        padding: 20px 24px 36px;
    }
    
    .intro-block:first-of-type {
        margin-bottom: 38px;
    }
    
    .intro-lead {
        font-size: 28px;
        line-height: 1.22;
        max-width: 78%;
        margin-bottom: 14px;
    }
    
    .intro-description {
        font-size: 18.5px;
        line-height: 1.7;
        max-width: 78%;
        margin-bottom: 20px;
    }
    
    .intro-frame {
        max-width: 340px;
    }
    
    .intro-mission {
        font-size: 16px;
        margin-top: 16px; /* Consistent tighter spacing */
    }
    
    .why-section {
        padding: 56px 32px 64px; /* Reduced padding for better flow: 56px top (7×8px), 64px bottom (8×8px) for better connection to CTA */
    }
    
    
    .why-heading {
        font-size: 48px;
    }
    
    .why-sub {
        font-size: clamp(19px, 4.4vw, 20px); /* Responsive sizing */
        max-width: min(400px, 92vw); /* Responsive max-width */
    }
    
    
    .lp-footer-cta {
        margin: 24px 0 56px;
        padding-top: 24px; /* Reduced padding for better connection */
    }
    
    .lp-footer-cta__bridge {
        font-size: clamp(18px, 4.2vw, 19px);
        max-width: min(400px, 92vw);
    }
    
    .mobile-footer {
        padding: 0 24px 24px 24px; /* Standardized */
    }
}

/* Extra Large Mobile (481px - 767px) */
@media (min-width: 481px) {
    .site-header {
        padding: 7px 20px; /* Ultra-sleek padding */
    }
    
    .hero-section {
        padding: 0 24px;
    }
    
    .dmt-carousel {
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px);
    }
    
    .hero-title {
        font-family: 'Gambarino', serif;
        font-weight: 400;
        font-size: 60px;
        letter-spacing: 0.005em;
        margin-top: 192px; /* +24px additional shift for optimal viewport balance */
        margin-bottom: 32px;
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-family: 'Gambarino', serif;
        font-weight: 500;
        font-size: 34px;
        letter-spacing: 0.01em;
        margin-bottom: 32px;
        line-height: 1.25;
    }
    
    .hero-description {
        font-family: 'Gambarino', serif;
        font-size: 22px;
        max-width: 440px;
        margin-bottom: 24px;
        line-height: 1.5;
    }
    
    .cta-button {
        width: 300px;
        height: 56px;
        font-size: 19px;
    }
    
    .divider {
        width: 75%; /* Standardized */
        max-width: 320px;
    }
    
    /* Introduction Section */
    .intro-section {
    padding: 24px 28px 36px;
    }
    
    .intro-block:first-of-type {
    margin-bottom: 36px;
    }
    
    .intro-lead {
        font-size: 29px;
        line-height: 1.22;
        max-width: 70%;
    margin-bottom: 12px;
    }
    
    .intro-description {
        font-size: 19px;
        line-height: 1.7;
        max-width: 72%;
    margin-bottom: 18px;
    }
    
    .intro-frame {
        max-width: 360px;
    }
    
    .intro-mission {
        font-size: 17px;
        margin-top: 16px; /* Consistent tighter spacing */
    }
    
    .why-section {
        padding: 60px 40px 72px; /* Reduced padding for better flow: 60px top (7.5×8px), 72px bottom (9×8px) for better connection to CTA */
    }
    
    
    .why-heading {
        font-size: 52px;
    }
    
    .why-sub {
        font-size: clamp(19.5px, 4.5vw, 20px); /* Responsive sizing */
        max-width: min(440px, 92vw); /* Responsive max-width */
    }
    
    
    .lp-footer-cta {
        margin: 24px 0 56px;
        padding-top: 24px; /* Reduced padding for better connection */
    }
    
    .lp-footer-cta__bridge {
        font-size: clamp(18.5px, 4.3vw, 19.5px);
        max-width: min(440px, 92vw);
    }
    
    .mobile-footer {
        padding: 0 24px 24px 24px; /* Standardized */
    }
}

/* Desktop - Redirect to main site (desktop gets redirected, no styling needed) */
/* Note: This media query is intentionally empty - desktop users are redirected server-side */
@media (min-width: 768px) {
    /* User is redirected to desktop site - no styles needed */
}



/* Why Content - left-aligned for informative readability */
.why-content {
    display: flex;
    flex-direction: column;
    gap: 32px; /* 4×8px grid - spacing between blocks */
    margin-top: 16px; /* 2×8px grid - improved spacing from subtitle */
    position: relative; /* Ensure content is above gradient overlay */
    z-index: 1; /* Above gradient overlay */
}

.why-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.why-block h3 {
    font-family: 'Gambarino', serif;
    font-weight: 500; /* Medium weight for emphasis */
    font-size: 22px; /* Increased for better readability */
    line-height: 1.2;
    letter-spacing: 0.005em;
    margin: 0 0 16px 0; /* Standardized to 2×8 */
    color: #FFFFFF; /* White for headings on black background */
    text-align: center; /* Centered for consistency */
}

/* Accordion Item Container */
.why-accordion-item {
    margin-bottom: 16px; /* Spacing between accordion items (2×8px grid) */
}

.why-accordion-item:last-child {
    margin-bottom: 0;
}

/* Accordion Header Button - Interactive */
.why-accordion-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    position: relative;
}

.why-accordion-header:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Accordion Title - Styled like previous strong tags */
.why-accordion-title {
    font-family: 'Gambarino', serif;
    font-weight: 600; /* Increased from 560 for bolder appearance */
    font-size: clamp(19px, 4.5vw, 22px); /* Increased from clamp(17px, 4.1vw, 19.5px) for better hierarchy */
    letter-spacing: -0.015em;
    color: #1B1713; /* Black text for contrast on cream background */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
    flex: 1;
    margin-right: 12px;
    padding-right: 8px;
}

/* Accordion Icon (Multiplication Sign - Plus/Cross) */
.why-accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: rgba(27, 23, 19, 0.6); /* Dark icon for cream background */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    flex-shrink: 0;
    transform-origin: center; /* Ensure rotation happens from center */
    transform: translateZ(0) rotate(-45deg); /* Rotated to look like plus (+) when collapsed */
    backface-visibility: hidden; /* Smooth animation */
    -webkit-backface-visibility: hidden; /* Safari support */
    margin-top: 0.1em; /* Align with first line of text (adjusts for cap height) */
}

.why-accordion-header[aria-expanded="true"] .why-accordion-icon {
    transform: translateZ(0) rotate(0deg); /* Shows cross (×) when expanded */
    color: rgba(27, 23, 19, 0.8); /* Darker when expanded */
}

/* Accordion Content - Collapsible */
.why-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
    will-change: max-height, opacity;
}

.why-accordion-content[aria-hidden="false"] {
    max-height: 500px; /* Sufficient height for content */
    opacity: 1;
    margin-top: 16px; /* Spacing between header and content (2×8px grid) */
}

/* Content Paragraph Styling */
.why-accordion-content p {
    font-family: 'Inria Serif', serif;
    font-weight: 400;
    font-size: clamp(16px, 3.8vw, 18px);
    line-height: 1.75;
    letter-spacing: 0.003em; /* Reduced from 0.01em to minimize spacing issues */
    margin: 0;
    padding-right: 24px; /* Added right padding for better spacing, matching engine section */
    color: rgba(27, 23, 19, 0.9); /* Dark text for cream background */
    text-align: justify;
    text-align-last: left; /* Prevent last line from stretching with excessive spacing */
    text-justify: inter-word; /* Prefer word spacing over character spacing for natural look */
    white-space: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    word-spacing: normal; /* Reset to normal to prevent excessive spacing between words */
    word-break: normal; /* Normal word breaking for better justification */
    hyphens: auto; /* Enable hyphenation for better line breaking */
    -webkit-hyphens: auto; /* Safari support */
    -ms-hyphens: auto; /* IE/Edge support */
    hyphenate-limit-chars: 6 3 2; /* Minimum word length, chars before/after hyphen */
    overflow-wrap: break-word; /* Break long words if needed for better justification */
    max-width: min(560px, 92vw);
    margin-left: 0;
    margin-right: auto;
}

/* Subtle visual separator between accordion items */
.why-accordion-item:not(:last-child)::after {
    content: '';
    display: block;
    width: 40%;
    height: 1px;
    margin: 16px 0 0 0; /* Spacing above divider (2×8px grid) */
    padding: 0;
    background: rgba(27, 23, 19, 0.15); /* Dark divider for cream background */
    border: none;
    opacity: 0.8;
}

/* =====================================================
   📘 HOW IT WORKS (Mobile)
   ===================================================== */

/* Phase 3: Improved section padding and overflow control */
.hiw-mobile {
  background-color: #F9EFDC;
  padding: 0 0 40px; /* Reduced from 56px to 40px */
  position: relative;
  margin-top: 0;
  overflow: hidden;
}

.hiw-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 24px 0; /* Reduced top padding from 24px to 16px (2×8px grid), horizontal padding unchanged */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0; /* No gap - spacing handled by margins to match Why section */
  text-align: left;
}

/* Phase 3: Improved typography hierarchy and spacing */
.hiw-title {
  font-family: 'Gambarino', serif;
  font-weight: 500; /* Mirrored from .why-heading */
  font-size: clamp(32px, 6.4vw, 44px); /* Mirrored from .why-heading */
  letter-spacing: -0.03em; /* Mirrored from .why-heading */
  line-height: 1.1; /* Mirrored from .why-heading */
  color: #1B1713; /* Dark text for cream background */
  margin-bottom: 12px; /* Matches .why-heading - spacing handled by margin */
  text-shadow:
    0 0.25px 0 rgba(0, 0, 0, 0.15),
    0 0.5px 2px rgba(27, 23, 19, 0.08);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.hiw-sub {
  font-family: 'Spectral', serif; /* Softer serif font for subtitle feel - matches .why-sub */
  font-weight: 400; /* Lighter weight to differentiate from heading - matches .why-sub */
  font-style: italic; /* Italic styling for subheading feel - matches .why-sub */
  font-size: clamp(16px, 3.8vw, 18px); /* Smaller than heading - clearer hierarchy - matches .why-sub */
  letter-spacing: 0.01em; /* Slightly more spacing for softer feel - matches .why-sub */
  color: rgba(27, 23, 19, 0.7); /* More transparent for subtle subheading feel - matches .why-sub */
  line-height: 1.5; /* Slightly looser for readability - matches .why-sub */
  max-width: min(360px, 92vw); /* Responsive max-width - matches .why-sub */
  margin-top: -4px; /* Tighter spacing from heading (negative margin) - matches .why-sub */
  margin-bottom: 32px; /* More space before content (4×8px grid) - matches .why-sub */
  text-wrap: balance;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  white-space: normal;
}

.hiw-divider {
  width: 75%; /* Standardized */
  height: 1px;
  background: rgba(0,0,0,0.75); /* Standardized opacity */
  margin: 0 auto 32px; /* 4×8 bottom spacing */
  border: none;
  box-shadow: none;
}

/* Phase 3: Improved steps section layout and spacing */
.hiw-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px; /* 2×8px grid */
  display: flex;
  flex-direction: column;
  gap: 12px; /* 1.5×8px grid - improved spacing */
  align-items: stretch;
  width: 100%;
  max-width: min(360px, 92vw);
}

.hiw-steps li {
  font-family: 'Gambarino', serif;
  font-weight: 470;
  font-size: clamp(15.5px, 3.8vw, 16.5px);
  color: #1B1713;
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.52;
  width: 100%;
  padding: 0 0 4px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.hiw-steps li::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: rgba(27,23,19,0.12);
}

.hiw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-family: 'Gambarino', serif;
  font-weight: 550;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: none;
}

.hiw-steps li::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(27,23,19,0.1);
}

/* Phase 3: Improved engine section layout and spacing */
.hiw-engine {
  align-self: stretch;
  text-align: left;
  margin-top: 0; /* Improved spacing */
  margin-bottom: -20px; /* Maintain intentional spacing for carousel */
  max-width: 100%;
  padding: 0 24px 0 0; /* Added right padding for better spacing */
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 1.5×8px grid - improved spacing */
}

.hiw-engine-title {
  font-family: 'Gambarino', serif;
  font-weight: 540;
  font-size: clamp(18px, 4.4vw, 20px);
  color: #1B1713;
  line-height: 1.24;
  letter-spacing: -0.005em;
  text-shadow:
    0 0.2px 0 rgba(0, 0, 0, 0.12),
    0 0.4px 1.5px rgba(27, 23, 19, 0.06);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.hiw-engine-desc {
  font-family: 'Inria Serif', serif;
  font-weight: 400;
  font-size: clamp(15.5px, 3.8vw, 17px); /* Responsive sizing */
  line-height: 1.64;
  color: #3B3229;
  margin-bottom: 0;
  text-align: justify;
  text-align-last: left; /* Prevent last line from stretching */
  text-justify: inter-word; /* Prefer word spacing over character spacing for natural look */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.003em;
  word-spacing: normal; /* Reset to normal to prevent excessive spacing */
  hyphens: auto; /* Enable hyphenation for better line breaking */
  overflow-wrap: break-word; /* Break long words if needed */
  max-width: 100%; /* Ensure proper width calculation */
}

.hiw-dotx {
  font-family: 'Inria Serif', serif;
  font-style: italic;
  font-weight: 500;
}

.hiw-engine-note {
  font-family: 'Inria Serif', serif;
  font-size: 14px; /* Consistent caption size */
  color: #5C5242; /* Softer for disclaimer text */
  font-style: italic;
  line-height: 1.6;
  margin-top: -4px; /* Negative margin to shift up, reducing spacing from navigation */
  margin-bottom: 4px;
  text-align: center;
  max-width: 86%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

/* Phase 3: Improved carousel layout and slide styling */
.hiw-flow {
  margin-top: 32px; /* Increased from 24px to 32px (4×8px grid) - prevents top clipping from paragraph */
  margin-bottom: 8px; /* Reduced from 20px to 8px (1×8px grid) - shifts nav buttons up by 12px */
  position: relative;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.hiw-embla {
  overflow: hidden; /* REQUIRED by Embla for proper functionality */
  width: 100%;
  max-width: 336px;
  margin: 0 auto;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

/* =====================================================
   🔧 FIX: Remove unintended padding from Embla inside HIW
   ===================================================== */

.embla.hiw-embla {
  padding: 0 8px !important; /* Horizontal padding only - keep sides spaced, no vertical padding */
}

.hiw-embla .embla__viewport {
  overflow: hidden; /* REQUIRED by Embla */
  width: 100%;
  position: relative;
  padding: 8px 8px !important; /* Added 8px vertical padding (top/bottom) to create buffer zone and prevent content clipping */
}

.hiw-embla .embla__container {
  display: flex;
  gap: 16px; /* Spacing between cards (2×8px grid) */
  align-items: stretch;
  box-sizing: border-box;
  padding: 0 8px !important; /* Horizontal padding only - keep sides spaced, no vertical padding */
  
  /* Performance - will-change will be added dynamically via JavaScript during scroll/drag */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  
  /* Embla drag smoothness */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* ————————————————————————————————
   Clean Minimal Slide Container
   ———————————————————————————————— */

.hiw-embla .embla__slide {
  flex: 0 0 100%;
  min-height: 300px; /* Further reduced from 320px to make card even smaller */
  display: flex; /* Required for height: 100% on child container */
  flex-direction: column; /* Stack container vertically */
  align-items: stretch; /* Allow container to fill width */
  margin: 0; /* Ensure no margin that could cause clipping */
  /* Performance optimizations for smooth Embla dragging */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* Slide Content Container - Warm Card Design */
.embla__slide__container {
  width: 100%;
  height: 100%; /* Fills parent .embla__slide (now a flex container) */
  min-height: 0; /* Allow flex shrinking if needed */
  flex: 1 1 auto; /* Grow and shrink as needed */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px 10px 0; /* Bottom padding moved to text block for consistent spacing */
  box-sizing: border-box;
  
  /* Framed card treatment - matches intro-frame */
  background: #f6e6d3; /* Brand beige - subtle mat effect */
  border: 1px solid #000000; /* Black border around card */
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  
  /* Performance - No transitions to avoid Embla drag conflicts */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  pointer-events: auto;
}

/* Active slide - subtle emphasis */
.hiw-embla .embla__slide.is-active .embla__slide__container {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* SVG Diagram Container - Fixed overflow, no background */
.svg-diagram-container {
  width: 100%;
  min-height: 200px; /* Consistent height for all diagram containers */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align to top to remove bottom spacing */
  flex: 0 0 auto; /* Don't grow - use consistent height */
  overflow: visible;
  /* No background, no padding - let SVG breathe naturally */
  padding-bottom: 0 !important; /* Explicitly remove bottom padding */
  margin-bottom: 0 !important; /* Explicitly remove bottom margin */
}

/* Ensure bottom padding reduction applies to ALL document types */
[data-type="rental"] .svg-diagram-container,
[data-type="nda"] .svg-diagram-container,
[data-type="employment"] .svg-diagram-container,
[data-type="sale"] .svg-diagram-container,
[data-type="library"] .svg-diagram-container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  justify-content: flex-start !important; /* Align to top for all document types */
}

/* Fix: Ensure all neural networks have consistent flex behavior */
/* All should fit within their containers without growing unnecessarily */
[data-type="rental"] .neural-network-css,
[data-type="nda"] .neural-network-css,
[data-type="employment"] .neural-network-css,
[data-type="sale"] .neural-network-css {
  flex: 0 0 auto !important; /* Don't grow - use intrinsic content height only */
  height: auto !important; /* Use content height */
}

/* Fix: Ensure all SVG diagram containers have consistent height */
/* All containers should be the same height regardless of content */
[data-type="rental"] .svg-diagram-container,
[data-type="nda"] .svg-diagram-container,
[data-type="employment"] .svg-diagram-container,
[data-type="sale"] .svg-diagram-container {
  min-height: 200px !important; /* Consistent height for all */
  flex: 0 0 auto !important; /* Don't grow - use consistent height */
  height: auto !important; /* Use content height */
  align-items: flex-start !important; /* Align content to top */
}

/* Library card needs center alignment for its visual content */
[data-type="library"] .svg-diagram-container {
  min-height: 200px !important; /* Consistent height for all */
  flex: 0 0 auto !important; /* Don't grow - use consistent height */
  height: auto !important; /* Use content height */
  align-items: center !important; /* Center library visual content */
  justify-content: center !important; /* Center vertically as well */
}

/* Text readability inside slides (titles/subtitles) */
.hiw-slide-text .hiw-document-name {
  font-family: 'Gambarino', serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.012em;
  color: #1B1713;
  text-wrap: balance; /* Better line breaks for readability */
  word-break: normal;
  hyphens: auto;
  margin: 0; /* Reset - spacing handled by margin-bottom */
  margin-bottom: 12px; /* Consistent spacing (1.5×8px grid) */
}

.hiw-slide-text .hiw-slide-title {
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: none;
  color: #5C5242;
  text-wrap: balance; /* Better line breaks for readability */
  word-break: normal;
  hyphens: auto;
  margin: 0; /* Reset - spacing handled by margin-bottom */
  margin-bottom: 8px; /* Consistent spacing (1×8px grid) */
}

.hiw-slide-text .hiw-slide-sub {
  font-family: 'Inria Serif', serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3B3229;
  text-align: justify; /* Justified text for neat appearance */
  text-align-last: left; /* Prevent last line from stretching */
  text-justify: inter-word; /* Prefer word spacing over character spacing for natural look */
  word-break: normal;
  hyphens: auto;
  margin: 0 auto; /* Center the text block horizontally */
  white-space: normal; /* Ensure proper text wrapping */
  overflow-wrap: break-word; /* Break long words if needed */
  word-spacing: normal; /* Reset to normal to prevent excessive spacing */
}

/* SVG branch visualization */
.hiw-svg-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1 1 auto; /* Grow to fill available space in container */
  min-height: 0; /* Allow flex shrinking */
  justify-content: flex-start; /* Start from top instead of center */
}

/* Phase 3: Responsive adjustments for different mobile screen sizes */

/* Small mobile devices (320px - 374px) */
@media (max-width: 374px) {
  .hiw-mobile { padding: 0 0 40px; } /* Reduced from 56px to 40px */
  
  .hiw-container {
    padding: 14px 20px 0; /* Reduced top padding from 20px to 14px */
    gap: 0; /* No gap - spacing handled by margins to match Why section */
  }
  
  .hiw-title { 
    font-size: clamp(32px, 6.4vw, 44px); /* Mirrored from .why-heading responsive */
    margin-bottom: 12px; /* Mirrored from .why-heading */
  }
  
  .hiw-sub { 
    font-size: clamp(16px, 3.8vw, 18px); /* Matches .why-sub base - responsive sizing */
    max-width: min(360px, 92vw); /* Matches .why-sub */
    margin-bottom: 32px; /* Matches .why-sub - 4×8px grid */
  }
  
  .hiw-steps { 
    max-width: min(260px, 90vw);
    gap: 10px; /* Tighter spacing for small screens */
    margin-bottom: 14px;
  }
  
  .hiw-steps li { 
    font-size: clamp(15px, 3.6vw, 16px);
  }
  
  .hiw-engine { 
    max-width: 100%;
    gap: 10px; /* Tighter spacing */
  }
  
  .hiw-engine-title { 
    font-size: clamp(17px, 4.2vw, 20px);
  }
  
  .hiw-engine-desc { 
    font-size: clamp(15px, 3.6vw, 16px);
  }
  
  .hiw-embla { padding: 0; } /* No padding to prevent gutters */
  
  .hiw-embla .embla__container { 
    gap: 16px; /* Spacing between cards (2×8px grid) */
  }
  
  .hiw-embla .embla__slide {
    flex: 0 0 100%;
    min-height: 310px; /* Further reduced from 330px to make card even smaller */
  }
  
  /* Navigation adjustments for small screens */
  .hiw-carousel-nav {
    gap: 10px; /* Slightly tighter spacing */
    margin-top: 0; /* Proper spacing handled by .hiw-flow margin-bottom */
    margin-bottom: 8px; /* Spacing to disclaimer (1×8px grid) */
  }
  
  .hiw-nav-arrow {
    width: 32px;
    height: 32px;
  }
  
  .hiw-nav-arrow svg {
    width: 12px;
    height: 12px;
  }
  
  .hiw-nav-dots-container {
    gap: 6px; /* Tighter dot spacing */
  }
  
  .embla__slide__container {
    padding: 8px 10px 0; /* Bottom padding moved to text block for consistent spacing */
  }
  
  /* Text block adjustments for small screens */
  .hiw-slide-text {
    padding: 0 0 10px 0; /* Bottom padding ensures consistent gap to card container */
    margin: 0; /* Consistent spacing for all cards */
  }
  
  /* Library card - shift text block down on small screens */
  [data-type="library"] .hiw-slide-text {
    margin-top: 8px !important; /* Shift text block down slightly - aligns bottom with other cards */
    padding: 0 !important; /* Remove padding - spacing handled by margin-top */
  }
  
  .hiw-document-name {
    font-size: 18px;
    max-width: 280px;
    margin: 0; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 12px; /* Consistent spacing (1.5×8px grid) */
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
  }
  
  .hiw-slide-title {
    font-size: 15px;
    max-width: 260px;
    margin: 0; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 8px; /* Consistent spacing (1×8px grid) */
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
  }
  
  .hiw-slide-sub {
    font-size: 14px;
    max-width: 240px;
    margin: 0; /* Consistent spacing */
    text-justify: inter-word; /* Prefer word spacing over character spacing for natural look */
    word-break: normal;
    hyphens: auto;
  }
  
  /* Employment Contract card - adjust for 3-line fit on small screens */
  [data-type="employment"] .hiw-slide-sub {
    max-width: 250px !important; /* Increased for better fit */
    line-height: 1.45 !important; /* Tighter line-height */
  }
  
  /* CSS Neural Network responsive adjustments */
  .neural-network-css {
    min-height: 150px; /* Aggressively reduced from 160px to make card even smaller */
    padding: 18px 0 0px 0; /* Top padding: 18px (increased to shift diagram down), bottom padding: 0px (tightest connection) */
  }
  
  .nn-layer {
    gap: 46px; /* Slightly increased for easier taps */
    margin: 8px 0; /* Default spacing - specific rules will override */
  }
  
  .nn-node {
    width: 12px;
    height: 12px;
    border-width: 1.4px;
  }
  
  .nn-label {
    font-size: 12px;
    top: -20px;
  }
  
}

/* Standard mobile devices (375px - 414px) */
@media (min-width: 375px) and (max-width: 414px) {
  .hiw-container {
    padding: 16px 22px 0; /* Reduced top padding from 22px to 16px */
    gap: 0; /* No gap - spacing handled by margins to match Why section */
  }
  
  .hiw-title { 
    font-size: 46px; /* Mirrored from .why-heading responsive (375px breakpoint) */
    margin-bottom: 12px; /* Mirrored from .why-heading */
  }
  
  .hiw-sub { 
    font-size: clamp(18.5px, 4.3vw, 19px); /* Matches .why-sub responsive */
    max-width: min(380px, 92vw); /* Matches .why-sub */
    margin-bottom: 32px; /* Matches .why-sub - 4×8px grid */
  }
  
  .hiw-steps { 
    max-width: min(300px, 91vw);
    gap: 11px;
    margin-bottom: 15px;
  }
  
  .hiw-steps li { 
    font-size: clamp(16px, 3.9vw, 17px);
  }
  
  .hiw-engine { 
    max-width: 100%;
    gap: 11px;
  }
  
  .hiw-engine-title { 
    font-size: clamp(19px, 4.3vw, 22px);
  }
  
  .hiw-engine-desc { 
    font-size: clamp(16px, 3.9vw, 17px);
  }
  
  .hiw-embla .embla__slide {
    flex: 0 0 100%;
    min-height: 290px; /* Further reduced from 310px to make card even smaller */
  }
  
  .embla__slide__container {
    padding: 8px 10px 0; /* Bottom padding moved to text block for consistent spacing */
  }
  
  /* Navigation adjustments for standard mobile - default sizes work well */
  
  /* Text block adjustments for standard mobile */
  .hiw-slide-text {
    padding: 0 0 10px 0; /* Bottom padding ensures consistent gap to card container */
    margin: 0; /* Consistent spacing for all cards */
  }
  
  /* Library card - shift text block down on standard mobile */
  [data-type="library"] .hiw-slide-text {
    margin-top: 8px !important; /* Shift text block down slightly - aligns bottom with other cards */
    padding: 0 !important; /* Remove padding - spacing handled by margin-top */
  }
  
  .hiw-document-name {
    font-size: 19px;
    max-width: 290px;
    margin: 0; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 12px; /* Consistent spacing (1.5×8px grid) */
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
  }
  
  .hiw-slide-title {
    font-size: 16px;
    max-width: 280px;
    margin: 0; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 8px; /* Consistent spacing (1×8px grid) */
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
  }
  
  .hiw-slide-sub {
    font-size: 15px;
    max-width: 260px;
    margin: 0; /* Consistent spacing */
    text-justify: inter-word; /* Prefer word spacing over character spacing for natural look */
    word-break: normal;
    hyphens: auto;
  }
  
  /* Employment Contract card - adjust for 3-line fit on standard mobile */
  [data-type="employment"] .hiw-slide-sub {
    max-width: 270px !important; /* Increased for better fit */
    line-height: 1.45 !important; /* Tighter line-height */
  }
  
  /* CSS Neural Network responsive adjustments */
  .neural-network-css {
    min-height: 150px; /* Aggressively reduced from 160px to make card even smaller */
    padding: 18px 0 0px 0; /* Top padding: 18px (increased to shift diagram down), bottom padding: 0px (tightest connection) */
  }
  
  .nn-layer {
    gap: 56px; /* Slightly increased for easier taps */
    margin: 8px 0; /* Default spacing - specific rules will override */
  }
  
  .nn-node {
    width: 13px;
    height: 13px;
    border-width: 1.5px;
  }
  
  .nn-label {
    font-size: 13px;
    top: -22px;
  }
}

/* Large mobile devices (415px+) */
@media (min-width: 415px) {
  .hiw-mobile { padding: 0 0 40px; } /* Reduced from 56px to 40px */
  
  .hiw-container {
    padding: 16px 24px 0; /* Reduced top padding from 24px to 16px */
    gap: 0; /* No gap - spacing handled by margins to match Why section */
  }
  
  .hiw-title { 
    font-size: 48px; /* Mirrored from .why-heading responsive (415px breakpoint) */
    margin-bottom: 12px; /* Mirrored from .why-heading */
  }
  
  .hiw-sub { 
    font-size: clamp(19px, 4.4vw, 20px); /* Matches .why-sub responsive (415px breakpoint) */
    max-width: min(400px, 92vw); /* Matches .why-sub */
    margin-bottom: 32px; /* Matches .why-sub - 4×8px grid */
  }
  
  .hiw-steps { 
    max-width: min(320px, 90vw);
    gap: 12px; /* 1.5×8px grid */
    margin-bottom: 16px; /* 2×8px grid */
  }
  
  .hiw-steps li { 
    font-size: clamp(16.5px, 4vw, 17px);
  }
  
  .hiw-engine { 
    max-width: 100%;
    gap: 12px; /* 1.5×8px grid */
  }
  
  .hiw-engine-title { 
    font-size: clamp(20px, 4.5vw, 24px);
  }
  
  .hiw-engine-desc { 
    font-size: clamp(17px, 4.1vw, 18px);
  }
  
  .hiw-embla { padding: 0; max-width: 336px; }
  
  .hiw-embla .embla__container { 
    gap: 16px; /* Spacing between cards (2×8px grid) */
  }
  
  .hiw-embla .embla__slide {
    flex: 0 0 100%;
    min-height: 320px; /* Further reduced from 340px to make card even smaller */
  }
  
  .embla__slide__container {
    padding: 8px 12px 0; /* Bottom padding moved to text block for consistent spacing */
    border-radius: 16px; /* Larger radius for bigger screens */
  }
}

/* Extra Large Mobile (481px - 767px) - Mirrored from .why-section */
@media (min-width: 481px) {
  .hiw-title { 
    font-size: 52px; /* Mirrored from .why-heading responsive (481px breakpoint) */
    margin-bottom: 12px; /* Mirrored from .why-heading */
  }
  
  .hiw-sub { 
    font-size: clamp(19.5px, 4.5vw, 20px); /* Matches .why-sub responsive (481px breakpoint) */
    max-width: min(440px, 92vw); /* Matches .why-sub */
    margin-bottom: 32px; /* Matches .why-sub - 4×8px grid */
  }
  
  /* Navigation adjustments for large mobile */
  .hiw-carousel-nav {
    gap: 14px; /* Slightly more breathing room */
  }
  
  .hiw-nav-arrow {
    width: 40px;
    height: 40px;
  }
  
  .hiw-nav-arrow svg {
    width: 15px;
    height: 15px;
  }
  
  .hiw-nav-dots-container {
    gap: 10px; /* More spacing between dots */
  }
  
  /* Text block adjustments for large mobile */
  .hiw-slide-text {
    padding: 0 0 10px 0; /* Bottom padding ensures consistent gap to card container */
    margin: 0; /* Consistent spacing for all cards */
  }
  
  /* Library card - shift text block down on large mobile (already set in 481px breakpoint, but ensure consistency) */
  [data-type="library"] .hiw-slide-text {
    margin-top: 8px !important; /* Shift text block down slightly - aligns bottom with other cards */
    padding: 0 !important; /* Remove padding - spacing handled by margin-top */
  }
  
  .hiw-document-name {
    font-size: 21px;
    max-width: 300px;
    margin: 0; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 12px; /* Consistent spacing (1.5×8px grid) */
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
  }
  
  .hiw-slide-title {
    font-size: 17px;
    max-width: 300px;
    margin: 0; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 8px; /* Consistent spacing (1×8px grid) */
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
  }
  
  .hiw-slide-sub {
    font-size: 16px;
    max-width: 280px;
    margin: 0; /* Consistent spacing */
    text-justify: inter-word; /* Prefer word spacing over character spacing for natural look */
    word-break: normal;
    hyphens: auto;
  }
  
  /* Employment Contract card - adjust for 3-line fit on large mobile */
  [data-type="employment"] .hiw-slide-sub {
    max-width: 290px !important; /* Increased for better fit */
    line-height: 1.45 !important; /* Tighter line-height */
  }
  
  /* Ensure library card has same text spacing as other cards */
  [data-type="library"] .hiw-slide-text {
    margin-top: 8px !important; /* Reduced from 16px - shift text block down slightly to align bottom with other cards */
    margin-bottom: 0 !important; /* No bottom margin */
    padding: 0 !important; /* Remove all padding - spacing handled by margin-top from diagram */
  }
  
  /* Ensure library card SVG diagram has no bottom margin - spacing handled by text block margin-top */
  [data-type="library"] .svg-diagram-container {
    margin-bottom: 0 !important; /* No bottom margin - spacing created by text block margin-top */
  }
  
  /* Fix Employment Contract card text alignment and readability */
  [data-type="employment"] .hiw-slide-text {
    padding: 0 0 10px 0; /* Same bottom padding as other cards */
  }
  
  [data-type="employment"] .hiw-slide-sub {
    max-width: 280px !important; /* Increased from 260px to fit text in 3 lines */
    text-align: justify !important; /* Justified text for consistency */
    text-align-last: left !important; /* Prevent last line from stretching */
    text-justify: inter-word !important; /* Prefer word spacing over character spacing */
    white-space: normal !important; /* Ensure proper text wrapping */
    overflow-wrap: break-word !important; /* Break long words if needed */
    word-break: normal !important; /* Normal word breaking */
    line-height: 1.45 !important; /* Slightly tighter line-height to fit 3 lines */
  }
  
  /* Reduce side padding for Employment Contract card - applies to all breakpoints */
  [data-type="employment"] .embla__slide__container {
    padding-left: 8px !important; /* Reduced from 10px/12px */
    padding-right: 8px !important; /* Reduced from 10px/12px */
  }
  
  [data-type="library"] .hiw-document-name {
    margin: 0 !important; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 12px !important; /* Same spacing as other cards (1.5×8px grid) */
  }
  
  [data-type="library"] .hiw-slide-title {
    margin: 0 !important; /* Reset - spacing handled by margin-bottom */
    margin-bottom: 8px !important; /* Same spacing as other cards (1×8px grid) */
  }
  
  [data-type="library"] .hiw-slide-sub {
    margin: 0 !important; /* Same spacing as other cards */
    margin-bottom: 0 !important; /* Consistent bottom spacing - same as other cards */
  }
  
  /* CSS Neural Network responsive adjustments */
  .neural-network-css {
    min-height: 160px; /* Aggressively reduced from 170px to make card even smaller */
    padding: 18px 0 0px 0; /* Top padding: 18px (increased from 14px to shift diagram down), bottom padding: 0px (tightest connection) */
  }
  
  .nn-layer {
    gap: 66px; /* Slightly increased for easier taps */
    margin: 8px 0; /* Default spacing - specific rules will override */
  }
  
  .nn-node {
    width: 15px;
    height: 15px;
    border-width: 1.7px;
  }
  
  .nn-label {
    font-size: 14px;
    top: -24px;
  }
  
}

/* Edge clipping prevention */
.hiw-embla .embla__slide { touch-action: pan-y; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =====================================================
   🎯 HOW IT WORKS - Carousel Navigation (Dots + Arrows)
   ===================================================== */

/* Navigation Container */
.hiw-carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 0; /* Proper spacing handled by .hiw-flow margin-bottom */
  margin-bottom: 8px; /* Spacing to disclaimer (1×8px grid) */
  padding: 0;
  box-sizing: border-box;
}

/* Dots Container */
.hiw-nav-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* 1×8px grid between dots */
}

/* Navigation Dot - Base Styles */
.hiw-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-radius 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* will-change removed - will be added dynamically via JavaScript on interaction */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
  
  /* Extended touch target - invisible hit area */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Extended touch target - 44px minimum */
.hiw-nav-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: transparent;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Dot Hover State */
.hiw-nav-dot:hover {
  background-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.2) translateZ(0);
}

/* Dot Active State - Pill Shape */
.hiw-nav-dot.is-active {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px; /* Pill shape */
  width: 20px; /* Expanded width for active state */
  transform: scale(1.1) translateZ(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Dot Focus State - Accessibility */
.hiw-nav-dot:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.6);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Navigation Arrow - Base Styles */
.hiw-nav-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* will-change removed - will be added dynamically via JavaScript on interaction */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
  
  /* Touch optimizations */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Extended touch target - 44px minimum */
.hiw-nav-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: transparent;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Arrow SVG Icon */
.hiw-nav-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
  pointer-events: none;
}

/* Arrow Hover State */
.hiw-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.8);
  transform: scale(1.05) translateZ(0);
}

/* Arrow Active/Tap State */
.hiw-nav-arrow:active {
  transform: scale(0.92) translateZ(0);
  background: rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}

/* Arrow Disabled State */
.hiw-nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Arrow Focus State - Accessibility */
.hiw-nav-arrow:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.6);
  outline-offset: 2px;
}

/* Reduced Motion Support for Navigation */
@media (prefers-reduced-motion: reduce) {
  .hiw-nav-dot,
  .hiw-nav-arrow {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
  
  .hiw-nav-dot.is-active {
    transform: none !important;
  }
  
  .hiw-nav-arrow:active {
    transform: none !important;
  }
}

/* =====================================================
   🧠 CSS-Only Neural Networks (Instant Loading)
   ===================================================== */

/* Neural network container - base styles */
.neural-network-css {
  width: 100%;
  height: auto;
  min-height: 160px; /* Aggressively reduced from 170px to make card even smaller */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 18px 0 0px 0; /* Top padding: 18px (increased from 14px to shift diagram down), bottom padding: 0px (tightest connection) */
  margin: 0;
  flex: 1 1 auto; /* Grow and shrink within diagram container */
}

/* Layer container - holds nodes horizontally */
.nn-layer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px; /* Slightly increased spacing for easier tapping */
  position: relative;
  z-index: 2;
  margin: 16px 0; /* Reduced default spacing - specific rules will override */
}

/* ————————————————————————————————
   NODE VISUAL HIERARCHY & TEXTURE
   ———————————————————————————————— */

.nn-node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.6px solid var(--dm-graphite-700);
  background: #FFFFFF;
  box-shadow: none;
  transition: none;
  flex-shrink: 0;
  position: relative; /* For pseudo-element positioning */
  pointer-events: auto;
  touch-action: manipulation;
  transform-origin: center center;
}

/* Extended touch target - invisible hit area */
.nn-node::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px; /* Enlarged touch target for easier tapping */
  height: 56px;
  transform: translate(-50%, -50%);
  background: transparent;
  border-radius: 50%;
  z-index: 10; /* Above the visual node */
  cursor: pointer;
  pointer-events: none; /* Do not intercept taps; let the node receive them */
}


/* Touch area optimized for mobile */
.nn-node:hover::before { background: transparent; }

/* Reduce halo on very small screens to prevent overlap between adjacent nodes */
@media (max-width: 374px) {
  .nn-node::before {
    width: 44px; /* Slightly smaller on very small screens, but larger than before */
    height: 44px;
  }
}

/* Entry Node — strong black with subtle depth (no glow) */
.nn-entry .nn-node {
  width: 20px;
  height: 20px;
  background: #000000; /* Solid black - no gradient */
  border: 2px solid #000;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.15); /* Single subtle shadow matching hidden nodes style */
}

/* Entry node label */
.nn-entry .nn-label {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-family: 'Inria Serif', serif;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
  z-index: 3;
}

/* Hidden Nodes — gentle cream gradient */
.nn-hidden .nn-node {
  background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #F3EADA 90%);
  border-color: var(--dm-graphite-600);
  box-shadow:
    0 1.5px 3px rgba(0, 0, 0, 0.12),
    inset 0 0.5px 0.8px rgba(255, 255, 255, 0.3);
}

/* Output Node — warm mango accent */
.nn-output .nn-node {
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border: 2px solid var(--dm-graphite-700);
  box-shadow: none;
}

/* Mobile-only site - no desktop hover needed */

/* Input label - only on input node */
.nn-label {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-family: 'Inria Serif', serif;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
  pointer-events: none;
}

/* Connection containers - positioned behind nodes */
.nn-connections-0,
.nn-connections-1,
.nn-connections-2,
.nn-connections-3,
.nn-connections-4,
.nn-connections-5,
.nn-connections-6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  contain: layout; /* Changed from 'layout paint' - prevents line clipping */
  backface-visibility: hidden;
}

/* ————————————————————————————————
   Optimized Connector Lines (Static, No Jank)
   ———————————————————————————————— */

.nn-line {
  position: absolute;
  height: 2px;
  background: #6A5E4B; /* solid for thin lines */
  transform-origin: 0 0;
  opacity: 0.70;
  pointer-events: none;
  z-index: 3; /* Changed from 1 - ensures lines appear above nodes (z-index: 2) */
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Visual hierarchy — use gentle gradients only for thicker lines */
.nn-line[style*="height: 1.5px"] {
  background: linear-gradient(90deg, #3B3229 0%, #7A5E4B 100%);
  opacity: 0.90;
}

.nn-line[style*="height: 1.2px"] {
  background: linear-gradient(90deg, #4A4136 0%, #8A7A68 100%);
  opacity: 0.76;
}

.nn-line[style*="height: 1px"] {
  background: #6A5E4B; /* solid to avoid gradient banding on thin strokes */
  opacity: 0.6;
}

.nn-line[style*="height: 0.8px"] {
  /* bump min thickness to reduce shimmer */
  height: 1px !important;
  background: #8E806C;
  opacity: 0.5;
}

/* Remove previous animation and shadow definitions entirely */

/* Feedback connections - different styling */
.nn-line.nn-feedback {
  background: #8E806C !important;
  opacity: 0.4 !important;
  height: 0.8px !important;
  z-index: 2; /* Above regular connections */
}

/* Feedback connections when highlighted */
.nn-line.nn-feedback.is-path {
  background: #000 !important;
  height: 2px !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Document-specific network layouts - with entry layer */
/* Rental Agreement: 1(entry) → 1 → 3 → 6 → 7 → 6 → 3 → 1 (Double Helix Pattern) */
[data-type="rental"] .nn-layer:nth-child(5) { gap: 45px; } /* 3 nodes - convergence */
[data-type="rental"] .nn-layer:nth-child(7) { gap: 30px; } /* 6 nodes - spread */
[data-type="rental"] .nn-layer:nth-child(9) { gap: 25px; } /* 7 nodes - peak spread */
[data-type="rental"] .nn-layer:nth-child(11) { gap: 30px; } /* 6 nodes - spread */
[data-type="rental"] .nn-layer:nth-child(11) .nn-node:first-child,
[data-type="rental"] .nn-layer:nth-child(11) .nn-node:last-child {
  visibility: hidden;
  pointer-events: none;
}

/* Hide connector lines to the outer nodes of rental's 4th hidden layer
   Note: In connection datasets, layer indices are zero-based (0=entry, 1=input, 2=hidden1, 3=hidden2, 4=hidden3, 5=hidden4, 6=hidden5, 7=output)
   Hidden layer 4 => layer index 5; node indices range 0..5 (6 nodes). */
[data-type="rental"] .nn-line[data-from-layer="5"][data-from-index="0"],
[data-type="rental"] .nn-line[data-from-layer="5"][data-from-index="5"],
[data-type="rental"] .nn-line[data-to-layer="5"][data-to-index="0"],
[data-type="rental"] .nn-line[data-to-layer="5"][data-to-index="5"] {
  display: none !important;
}

/* NDA: hide first/last node in 3rd hidden layer (keeps spacing), and their lines
   3rd hidden layer corresponds to nth-child(9); layer index = 4; node indices 0..6 */
[data-type="nda"] .nn-layer:nth-child(9) .nn-node:first-child,
[data-type="nda"] .nn-layer:nth-child(9) .nn-node:last-child {
  visibility: hidden;
  pointer-events: none;
}
[data-type="nda"] .nn-line[data-from-layer="4"][data-from-index="0"],
[data-type="nda"] .nn-line[data-from-layer="4"][data-from-index="6"],
[data-type="nda"] .nn-line[data-to-layer="4"][data-to-index="0"],
[data-type="nda"] .nn-line[data-to-layer="4"][data-to-index="6"] {
  display: none !important;
}

/* Employment: hide first/last node in 3rd hidden layer and their lines */
[data-type="employment"] .nn-layer:nth-child(9) .nn-node:first-child,
[data-type="employment"] .nn-layer:nth-child(9) .nn-node:last-child {
  visibility: hidden;
  pointer-events: none;
}
[data-type="employment"] .nn-line[data-from-layer="4"][data-from-index="0"],
[data-type="employment"] .nn-line[data-from-layer="4"][data-from-index="6"],
[data-type="employment"] .nn-line[data-to-layer="4"][data-to-index="0"],
[data-type="employment"] .nn-line[data-to-layer="4"][data-to-index="6"] {
  display: none !important;
}

/* Sale: hide first/last node in 3rd hidden layer and their lines */
[data-type="sale"] .nn-layer:nth-child(9) .nn-node:first-child,
[data-type="sale"] .nn-layer:nth-child(9) .nn-node:last-child {
  visibility: hidden;
  pointer-events: none;
}
[data-type="sale"] .nn-line[data-from-layer="4"][data-from-index="0"],
[data-type="sale"] .nn-line[data-from-layer="4"][data-from-index="6"],
[data-type="sale"] .nn-line[data-to-layer="4"][data-to-index="0"],
[data-type="sale"] .nn-line[data-to-layer="4"][data-to-index="6"] {
  display: none !important;
}
[data-type="rental"] .nn-layer:nth-child(13) { gap: 45px; } /* 3 nodes - convergence */

/* Double Helix Visual Enhancement for Rental Agreement */
[data-type="rental"] .nn-layer:nth-child(5) .nn-node:nth-child(1) { transform: translateX(-10px); } /* Left twist */
[data-type="rental"] .nn-layer:nth-child(5) .nn-node:nth-child(3) { transform: translateX(10px); } /* Right twist */

[data-type="rental"] .nn-layer:nth-child(7) .nn-node:nth-child(1) { transform: translateX(-15px); } /* Left spread */
[data-type="rental"] .nn-layer:nth-child(7) .nn-node:nth-child(6) { transform: translateX(15px); } /* Right spread */

[data-type="rental"] .nn-layer:nth-child(9) .nn-node:nth-child(1) { transform: translateX(-20px); } /* Peak left */
[data-type="rental"] .nn-layer:nth-child(9) .nn-node:nth-child(7) { transform: translateX(20px); } /* Peak right */

[data-type="rental"] .nn-layer:nth-child(11) .nn-node:nth-child(1) { transform: translateX(-15px); } /* Left convergence */
[data-type="rental"] .nn-layer:nth-child(11) .nn-node:nth-child(6) { transform: translateX(15px); } /* Right convergence */

[data-type="rental"] .nn-layer:nth-child(13) .nn-node:nth-child(1) { transform: translateX(-10px); } /* Left final */
[data-type="rental"] .nn-layer:nth-child(13) .nn-node:nth-child(3) { transform: translateX(10px); } /* Right final */

/* Preserve rental agreement positioning when nodes are highlighted */
[data-type="rental"] .nn-layer:nth-child(5) .nn-node:nth-child(1).is-path { 
  transform: translateX(-10px); 
}
[data-type="rental"] .nn-layer:nth-child(5) .nn-node:nth-child(3).is-path { 
  transform: translateX(10px); 
}

[data-type="rental"] .nn-layer:nth-child(7) .nn-node:nth-child(1).is-path { 
  transform: translateX(-15px); 
}
[data-type="rental"] .nn-layer:nth-child(7) .nn-node:nth-child(6).is-path { 
  transform: translateX(15px); 
}

[data-type="rental"] .nn-layer:nth-child(9) .nn-node:nth-child(1).is-path { 
  transform: translateX(-20px); 
}
[data-type="rental"] .nn-layer:nth-child(9) .nn-node:nth-child(7).is-path { 
  transform: translateX(20px); 
}

[data-type="rental"] .nn-layer:nth-child(11) .nn-node:nth-child(1).is-path { 
  transform: translateX(-15px); 
}
[data-type="rental"] .nn-layer:nth-child(11) .nn-node:nth-child(6).is-path { 
  transform: translateX(15px); 
}

[data-type="rental"] .nn-layer:nth-child(13) .nn-node:nth-child(1).is-path { 
  transform: translateX(-10px); 
}
[data-type="rental"] .nn-layer:nth-child(13) .nn-node:nth-child(3).is-path { 
  transform: translateX(10px); 
}

/* NDA: 1(entry) → 1 → 3 → 6 → 7 → 5 → 4 → 1 (Unique Last 3 Layers) */
[data-type="nda"] .nn-layer:nth-child(5) { gap: 45px; } /* 3 nodes - convergence */
[data-type="nda"] .nn-layer:nth-child(7) { gap: 30px; } /* 6 nodes - spread */
[data-type="nda"] .nn-layer:nth-child(9) { gap: 25px; } /* 7 nodes - peak spread */
[data-type="nda"] .nn-layer:nth-child(11) { gap: 35px; } /* 5 nodes - unique pattern */
[data-type="nda"] .nn-layer:nth-child(13) { gap: 40px; } /* 4 nodes - unique pattern */

/* Employment Contract: 1(entry) → 1 → 3 → 6 → 7 → 8 → 4 → 1 (Unique Last 3 Layers) */
[data-type="employment"] .nn-layer:nth-child(5) { gap: 45px; } /* 3 nodes - convergence */
[data-type="employment"] .nn-layer:nth-child(7) { gap: 30px; } /* 6 nodes - spread */
[data-type="employment"] .nn-layer:nth-child(9) { gap: 25px; } /* 7 nodes - peak spread */
[data-type="employment"] .nn-layer:nth-child(11) { gap: 20px; } /* 8 nodes - unique expansion */
[data-type="employment"] .nn-layer:nth-child(13) { gap: 40px; } /* 4 nodes - unique pattern */

/* Sale Deed: 1(entry) → 1 → 3 → 6 → 7 → 4 → 5 → 1 (Unique Last 3 Layers) */
[data-type="sale"] .nn-layer:nth-child(5) { gap: 45px; } /* 3 nodes - convergence */
[data-type="sale"] .nn-layer:nth-child(7) { gap: 30px; } /* 6 nodes - spread */
[data-type="sale"] .nn-layer:nth-child(9) { gap: 25px; } /* 7 nodes - peak spread */
[data-type="sale"] .nn-layer:nth-child(11) { gap: 40px; } /* 4 nodes - unique contraction */
[data-type="sale"] .nn-layer:nth-child(13) { gap: 35px; } /* 5 nodes - unique pattern */



/* =====================================================
   🧩 FIX: Neural Network Diagram Compression
   ===================================================== */

/* Prevent neural network diagrams from being smushed - Golden Ratio optimized */
/* Neural network - ensure proper sizing within flex chain */
.neural-network-css {
  flex: 0 0 auto; /* Don't grow - fit within container */
  height: auto; /* Use intrinsic content height */
  min-height: 160px; /* Base minimum height */
  width: 100%; /* Full width */
  display: flex; /* Flex container */
  flex-direction: column; /* Vertical layout */
  margin-bottom: 0; /* Remove bottom margin to connect with text */
}

/* Note: .hiw-svg-branch flex properties already set in base rule (line 1589) */

/* Ensure How it Works slides can expand to full height */
/* Note: Base flex properties already set in .hiw-embla .embla__slide (line 1503) */
/* This rule ensures alignment - flex properties inherited from base */
.hiw-embla .embla__slide {
  align-items: stretch; /* Ensure container stretches to full width */
}

/* =====================================================
   🔧 FIX: Remove excessive spacing between card and nav
   ===================================================== */

/* Force remove all margins and bottom padding from slides */
.embla__slide,
.hiw-embla .embla__slide {
  margin: 0 !important;
  padding-bottom: 0 !important;
}

/* Force remove bottom padding and margin from hiw-mobile */
.hiw-mobile {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Note: Gap is now set to 16px in .hiw-embla .embla__container (line 1492) for proper card spacing */

/* Ensure carousel containers allow full expansion */
.hiw-embla .embla__viewport,
.hiw-embla .embla__container {
  align-items: stretch;
  height: auto;
}

/* Prevent individual layers from collapsing - Increased spacing */
.nn-layer {
  flex-shrink: 0 !important;       /* Prevent individual layers from collapsing */
  min-height: 20px !important;     /* Increased height for layers */
  display: flex !important;        /* Flex layout for nodes */
  align-items: center !important;  /* Center nodes vertically */
  justify-content: center !important; /* Center nodes horizontally */
}

/* Ensure connection containers have proper height - Increased spacing */
[class*="nn-connections"] {
  min-height: 15px !important;     /* Increased height for connections */
  flex-shrink: 0 !important;       /* Prevent compression */
}

/* Ensure nodes maintain proper size */
.nn-node {
  flex-shrink: 0 !important;       /* Prevent node compression */
  min-width: 14px !important;      /* Minimum node width */
  min-height: 14px !important;     /* Minimum node height */
}

/* Add proper spacing between layers - Balanced spacing */
.neural-network-css > .nn-layer:not(:last-child) {
  margin-bottom: 18px !important;  /* Increased spacing for thicker lines */
}

.neural-network-css > [class*="nn-connections"]:not(:last-child) {
  margin-bottom: 12px !important;  /* Balanced spacing for connections */
}

/* Special spacing for entry-to-input connection (1-1 nodes) - Tight */
.neural-network-css > .nn-connections-0 {
  margin-bottom: 6px !important;   /* Keep tight for entry-to-input */
  height: 16px !important;          /* Increased from 6px */
  min-height: 16px !important;      /* Added - ensure minimum space */
  overflow: visible !important;     /* Prevent clipping */
}

/* Ensure proper spacing for entry and input layers - Tight */
.neural-network-css > .nn-entry {
  margin-bottom: 8px !important;   /* Increased from 6px */
  margin-top: 0 !important;        /* Override any top margin */
  padding-top: 0 !important;        /* Ensure no extra top padding */
}

.neural-network-css > .nn-input {
  margin-bottom: 8px !important;   /* Tight spacing after input layer */
  margin-top: 0 !important;        /* Override any top margin */
}

/* Special spacing for input-to-first-hidden connection (1-3 nodes) - Tight */
.neural-network-css > .nn-connections-1 {
  margin-bottom: 6px !important;   /* Tight spacing for 1-3 connection */
  height: 10px !important;         /* Reduced height for tighter connection */
}

/* Ensure output layer has proper spacing */
.neural-network-css > .nn-output {
  margin-top: 25px !important;     /* Extra space before output */
  margin-bottom: 0px !important;   /* Reduced from 2px to 0px for tighter connection with document heading */
}

/* =====================================================
   📝 HOW IT WORKS - Text Blocks (φ-Balanced Design)
   ===================================================== */

/* Text block container - positioned below neural network */
.hiw-slide-text {
  width: 100%;
  padding: 0 0 10px 0; /* Bottom padding ensures consistent gap to card container */
  margin: 0; /* Reset margins */
  margin-top: 0; /* Top spacing - will be adjusted for library card */
  margin-bottom: 0; /* Consistent bottom spacing for all cards */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0; /* Prevent text from shrinking */
}

/* Library card - shift text block down to align bottom with other cards */
[data-type="library"] .hiw-slide-text {
  margin-top: 8px !important; /* Reduced from 16px - shift text block down slightly to align bottom with other cards */
  padding: 0 !important; /* Remove all padding - spacing handled by margin-top from diagram */
}

/* Document name - largest, most prominent */
.hiw-document-name {
  font-family: 'Gambarino', serif;
  font-size: 20px;
  font-weight: 500; /* Medium for emphasis */
  line-height: 1.2;
  color: #000000; /* Completely black for maximum readability */
  margin: 0; /* Reset - spacing handled by margin-bottom */
  margin-bottom: 12px; /* Consistent spacing (1.5×8px grid) */
  letter-spacing: 0.005em;
  text-align: center;
  max-width: 300px; /* Constrain width for better readability */
  text-wrap: balance; /* Better line breaks for readability */
  word-break: normal;
  hyphens: auto;
}

/* Title line - bold path or intelligence name */
.hiw-slide-title {
  font-family: 'Gambarino', serif;
  font-size: 16px;
  font-weight: 500; /* Medium weight for Gambarino */
  line-height: 1.3;
  color: #000000; /* Completely black for maximum readability */
  margin: 0; /* Reset - spacing handled by margin-bottom */
  margin-bottom: 8px; /* Consistent spacing (1×8px grid) */
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 280px; /* Constrain width for better readability */
  text-wrap: balance; /* Better line breaks for readability */
  word-break: normal;
  hyphens: auto;
}

/* Subline - italic, showing logic flow or clause type path */
.hiw-slide-sub {
  font-family: 'Gambarino', serif;
  font-size: 15px;
  font-weight: 500;
  font-style: normal; /* Normal style for Gambarino */
  line-height: 1.5;
  color: #000000; /* Completely black for maximum readability */
  margin: 0 auto; /* Center the text block horizontally */
  text-align: justify; /* Justified text for neat appearance */
  text-align-last: left; /* Prevent last line from stretching */
  text-justify: inter-word; /* Prefer word spacing over character spacing for natural look */
  max-width: 260px; /* Slightly narrower than title */
  letter-spacing: 0.005em;
  word-break: normal;
  hyphens: auto;
  white-space: normal; /* Ensure proper text wrapping */
  overflow-wrap: break-word; /* Break long words if needed */
  word-spacing: normal; /* Reset to normal to prevent excessive spacing */
}

/* =====================================================
   📚 Library Visual - Grid Pattern (Premium Collection)
   ===================================================== */

/* Library visual container - matches neural network height and size */
.hiw-library-visual {
  width: 100%;
  height: auto;
  min-height: 160px; /* Match neural network base height for consistency */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 20px; /* Increased padding for better presence */
  position: relative;
  perspective: 800px; /* 3D perspective for depth effect */
  perspective-origin: center center;
}

/* Library grid - 3D pattern suggesting extensive collection */
.library-grid {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Increased gap for depth separation */
  align-items: center;
  justify-content: center;
  position: relative;
  transform-style: preserve-3d; /* Enable 3D transforms */
}

/* Library grid row - base styles */
.library-grid-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-style: preserve-3d;
}

/* Front layer - wider spacing for prominence */
.library-layer-front {
  gap: 18px; /* Wider spacing - 2.25×8px grid */
}

/* Middle layers - progressively tighter spacing */
.library-layer-middle-1 {
  gap: 14px; /* Medium spacing - 1.75×8px grid */
}

.library-layer-middle-2 {
  gap: 12px; /* Tighter spacing - 1.5×8px grid */
}

/* Back layer - tightest spacing */
.library-layer-back {
  gap: 10px; /* Tightest spacing - 1.25×8px grid */
}

/* Library grid item - base document representation (larger for prominence) */
.library-grid-item {
  width: 42px; /* Increased from 32px - 5.25×8px */
  height: 58px; /* Increased from 44px - document-like proportions */
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.14) 100%);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-style: preserve-3d;
}

/* =====================================================
   3D DEPTH LAYERS - Scale and Opacity Variations
   ===================================================== */

/* Front layer - largest, full opacity, closest to viewer */
.library-layer-front {
  transform: translateZ(0px);
  z-index: 4;
}

.library-layer-front .library-grid-item {
  width: 42px;
  height: 58px;
  opacity: 1;
  transform: scale(1) translateZ(0px);
  /* Enhanced gradient - richer, more defined */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.14) 0%, 
    rgba(0, 0, 0, 0.18) 50%,
    rgba(0, 0, 0, 0.16) 100%);
  border-color: rgba(0, 0, 0, 0.24);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Middle layer 1 - medium size, medium opacity */
.library-layer-middle-1 {
  transform: translateZ(-25px);
  z-index: 3;
}

.library-layer-middle-1 .library-grid-item {
  width: 37px; /* ~88% of front - smoother progression */
  height: 51px; /* ~88% of front */
  opacity: 0.82;
  transform: scale(0.88) translateZ(-25px);
  /* Enhanced gradient - medium depth */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.12) 0%, 
    rgba(0, 0, 0, 0.16) 50%,
    rgba(0, 0, 0, 0.14) 100%);
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Middle layer 2 - smaller, lower opacity */
.library-layer-middle-2 {
  transform: translateZ(-50px);
  z-index: 2;
}

.library-layer-middle-2 .library-grid-item {
  width: 32px; /* ~76% of front - smoother progression */
  height: 44px; /* ~76% of front */
  opacity: 0.64;
  transform: scale(0.76) translateZ(-50px);
  /* Enhanced gradient - softer depth */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.10) 0%, 
    rgba(0, 0, 0, 0.14) 50%,
    rgba(0, 0, 0, 0.12) 100%);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

/* Back layer - smallest, lowest opacity, furthest back */
.library-layer-back {
  transform: translateZ(-75px);
  z-index: 1;
}

.library-layer-back .library-grid-item {
  width: 28px; /* ~67% of front - smoother, less dramatic drop */
  height: 39px; /* ~67% of front */
  opacity: 0.48;
  transform: scale(0.67) translateZ(-75px);
  /* Enhanced gradient - subtle depth */
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.08) 0%, 
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.10) 100%);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

/* Subtle text lines on items (suggesting document content) - scales with item size */
.library-grid-item::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 7px;
  right: 7px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 1px;
  opacity: inherit; /* Inherit opacity from parent for depth fade */
}

.library-grid-item::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 7px;
  right: 9px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 1px;
  opacity: inherit; /* Inherit opacity from parent for depth fade */
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS FOR 3D STRUCTURE
   ===================================================== */

/* Small mobile devices (320px - 374px) */
@media (max-width: 374px) {
  .hiw-library-visual {
    min-height: 160px; /* Match neural network for consistency */
    padding: 40px 16px;
    perspective: 600px; /* Reduced perspective for smaller screens */
  }
  
  .library-grid {
    gap: 16px;
  }
  
  /* Front layer - small screens - wider spacing */
  .library-layer-front {
    gap: 16px; /* Wider spacing for prominence */
  }
  
  /* Middle layers - progressively tighter */
  .library-layer-middle-1 {
    gap: 12px;
  }
  
  .library-layer-middle-2 {
    gap: 10px;
  }
  
  .library-layer-back {
    gap: 8px;
  }
  
  /* Front layer - small screens */
  .library-layer-front .library-grid-item {
    width: 36px;
    height: 50px;
  }
  
  /* Middle layer 1 - small screens (88% of front) */
  .library-layer-middle-1 .library-grid-item {
    width: 32px; /* ~88% of 36px */
    height: 44px; /* ~88% of 50px */
  }
  
  /* Middle layer 2 - small screens (76% of front) */
  .library-layer-middle-2 .library-grid-item {
    width: 27px; /* ~76% of 36px */
    height: 38px; /* ~76% of 50px */
  }
  
  /* Back layer - small screens (67% of front) */
  .library-layer-back .library-grid-item {
    width: 24px; /* ~67% of 36px - smoother drop */
    height: 34px; /* ~67% of 50px */
  }
}

/* Standard mobile devices (375px - 414px) - default sizes work well */

/* Large mobile devices (415px+) */
@media (min-width: 415px) {
  .hiw-library-visual {
    min-height: 160px; /* Match neural network for consistency */
    padding: 60px 24px;
    perspective: 1000px; /* Enhanced perspective for larger screens */
  }
  
  .library-grid {
    gap: 24px; /* More spacing for depth */
  }
  
  /* Front layer - large screens - wider spacing */
  .library-layer-front {
    gap: 20px; /* Even wider spacing for larger screens */
  }
  
  /* Middle layers - progressively tighter */
  .library-layer-middle-1 {
    gap: 16px;
  }
  
  .library-layer-middle-2 {
    gap: 14px;
  }
  
  .library-layer-back {
    gap: 12px;
  }
  
  /* Front layer - large screens */
  .library-layer-front .library-grid-item {
    width: 48px;
    height: 66px;
  }
  
  /* Middle layer 1 - large screens (88% of front) */
  .library-layer-middle-1 .library-grid-item {
    width: 42px; /* ~88% of 48px */
    height: 58px; /* ~88% of 66px */
  }
  
  /* Middle layer 2 - large screens (76% of front) */
  .library-layer-middle-2 .library-grid-item {
    width: 36px; /* ~76% of 48px */
    height: 50px; /* ~76% of 66px */
  }
  
  /* Back layer - large screens (67% of front) */
  .library-layer-back .library-grid-item {
    width: 32px; /* ~67% of 48px - smoother drop */
    height: 44px; /* ~67% of 66px */
  }
}

/* Reduced motion support for library visual */
@media (prefers-reduced-motion: reduce) {
  .library-grid-item {
    transition: none !important;
  }
}

/* =====================================================
   END HOW IT WORKS
   ===================================================== */

/* FOOTER_START */
:root{
  /* fallback tokens if missing in the project */
  --color-primary: #000;
  --color-white: #fff;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius-lg: 16px;
  --font-secondary: 'Georgia', 'Times New Roman', Times, serif;
}

/* =====================================================
   MOBILE FOOTER IMPLEMENTATION - COMPLETE
   Desktop-inspired premium design optimized for mobile
   ===================================================== 
   
   STRUCTURE:
   - Brand Header (title + tagline)
   - Essential Links (Our Story, Privacy, Terms)
   - Social Icons (LinkedIn, X, Email, Instagram - 44px)
   - Contact (email text + copyright)
   
   DESIGN PRINCIPLES:
   - Black card (#000) on beige page (#f9efdc)
   - White text with brand beige (#f6e6d3) accents
   - 8px grid system for all spacing
   - 16px floating margins
   - 44px minimum touch targets
   - Hardware-accelerated animations
   
   ACCESSIBILITY:
   - WCAG AAA contrast (white on black)
   - Focus-visible states
   - Reduced motion support
   - High contrast mode support
   - Screen reader friendly
   - Touch-optimized (44px targets)
   
   PERFORMANCE:
   - CSS containment
   - Hardware acceleration
   - Lazy animations (scroll-triggered)
   - Will-change management
   
   ===================================================== */

/* =====================================================
   PHASE 2: BASE CONTAINER STYLING
   ===================================================== */

/* Mobile footer wrapper - floating card with flex constraint */
.mobile-footer {
  padding: 0 24px 24px 24px; /* Standardized: 3×8 margins */
  margin-top: 0; /* No top margin - CTA handles spacing */
  flex-shrink: 0; /* Prevent collapsing on short pages (memory constraint) */
}

/* Footer card - Black premium design */
.final-v2__footer {
  /* Foundation */
  background: #000;
  color: #fff;
  border-radius: 16px;
  padding: 32px 24px 40px; /* Reduced from 40px 24px 48px - tighter vertical spacing: 4×8 top, 3×8 horizontal, 5×8 bottom */
  
  /* Elevation & Depth */
  box-shadow: 
    0 -8px 24px rgba(0, 0, 0, 0.15), 
    0 0 0 1px rgba(255, 255, 255, 0.05);
  
  /* Performance Optimizations */
  position: relative;
  z-index: 10;
  overflow: hidden;
  /* will-change removed - static will-change causes unnecessary compositing layer */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  contain: layout style paint;
  
  /* iOS-specific optimizations */
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Default visible state */
  transform: none;
  opacity: 1;
}

/* Top hairline - architectural edge light */
.final-v2__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); /* Increased opacity from 0.1 for better visibility */
  pointer-events: none;
  z-index: 1;
}

/* Ambient glow - subtle luminosity variation */
.final-v2__footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.03) 0%, transparent 40%), /* Increased from 0.02 */
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.03) 0%, transparent 40%), /* Increased from 0.02 */
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 60%); /* Increased from 0.01 */
  pointer-events: none;
  z-index: 1;
  opacity: 0.4; /* Increased from 0.3 for more noticeable effect */
}

/* Inner content container - vertical rhythm */
.footer__inner {
  position: relative;
  z-index: 2; /* Above pseudo-elements */
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove uniform gap - spacing handled individually for better hierarchy */
}

/* Brand header section */
.footer__header {
  text-align: center;
  margin-bottom: 12px; /* Reduced from 20px - less bottom margin, better balance */
  
  /* Performance */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =====================================================
   PHASE 3: TYPOGRAPHY & LAYOUT (White on Black)
   ===================================================== */

/* Brand Title - Softer, more natural feel */
.final-v2__title {
  font-family: 'Gambarino', serif; /* Brand font */
  font-size: 32px; /* Enhanced prominence */
  font-weight: 400; /* Gambarino only has weight 400 */
  letter-spacing: -0.01em; /* Softer than -0.02em - more natural spacing */
  line-height: 1.15; /* Increased from 1.1 - more breathing room, natural flow */
  color: #fff; /* Pure white on black */
  margin: 0 0 16px; /* Increased from 12px - more breathing room between title and tagline */
  text-align: center;
}

/* Brand Tagline - Lighter, more natural */
.final-v2__tagline {
  font-family: 'Gambarino', serif; /* Brand consistency */
  font-size: 17px; /* Reduced from 18px - less mechanical, more natural */
  font-weight: 400; /* Reduced from 500 - lighter, more natural feel */
  letter-spacing: 0.005em; /* Softer than 0.01em - more natural spacing */
  line-height: 1.5; /* Increased from 1.45 - more natural flow */
  color: rgba(255, 255, 255, 0.98); /* Increased contrast from 0.95 for better readability */
  margin: 0;
  text-align: center;
}

/* Essential Links Navigation */
.footer__essentials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Allow graceful wrap on very small widths */
  gap: 0; /* Remove gap - spacing handled by links and dots */
  align-items: center;
  justify-content: center;
  margin: 0 0 24px 0; /* Increased from 16px - clear separation, natural pause before social */
  padding: 0; /* Removed 12px padding - spacing handled by margins */
  position: relative;
  left: 0; /* Removed -8px workaround - proper centering handled by flexbox */
}

.footer__essential-link {
  font-family: 'Inria Serif', serif; /* Differentiated from brand font */
  font-size: 15px; /* Touch-friendly size */
  font-weight: 400;
  color: #fff; /* Pure white */
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Touch-optimized padding (44px min height) */
  padding: 12px 10px; /* Reduced horizontal padding from 16px - better spacing with bullets */
  border-radius: 6px;

  /* Smooth transitions */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;

  /* Performance */
  -webkit-tap-highlight-color: transparent;
}

/* Bullet Point Separator */
.footer__dot {
  color: rgba(255, 255, 255, 0.45); /* Soft opacity for subtle separation */
  font-size: 12px; /* Small, unobtrusive size */
  line-height: 1;
  margin: 0 4px; /* Natural spacing around bullet */
  user-select: none;
  -webkit-user-select: none;
  display: inline-flex;
  align-items: center;
}

/* Bottom Section - Social + Contact Layout */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 18px; /* Increased from 12px - natural grouping between social and contact */
  align-items: center;
  padding-top: 0; /* Removed padding - spacing handled by gap */
  position: relative;
}

.footer__bottom::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 68%;
  max-width: 240px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); /* Increased opacity from 0.7 for better visibility */
  border-radius: 999px;
}

/* Social Section */
.footer__social {
  display: flex;
  flex-direction: column;
  gap: 14px; /* Natural spacing between label and icons - not strict grid */
  align-items: center;
}

.footer__social-label {
  font-family: 'Inria Serif', serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.97); /* Increased contrast from 0.95 for better visibility */
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
}

/* Social Icons Row */
.final-v2__icons {
  display: flex;
  align-items: center;
  gap: 24px; /* Even spacing without crowding */
  justify-content: center;
}

/* Icon Images */
.final-v2__icons img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* X/Twitter Icon - Scale down to match visual harmony with other icons */
.social-icon[aria-label="X"] {
  transform: scale(0.91); /* Scale down container to 91% to match visual size of LinkedIn, Email, Instagram */
  transform-origin: center;
}

/* Ensure X icon hover/active states work correctly with base scale - override general hover/active */
.social-icon[aria-label="X"]:hover {
  transform: scale(0.955); /* 0.91 * 1.05 = 0.955 - maintains proportional hover effect */
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); /* Match glow effect */
}

.social-icon[aria-label="X"]:active {
  transform: scale(0.865); /* 0.91 * 0.95 = 0.865 - maintains proportional active effect */
  filter: brightness(0.95);
  transition-duration: 0.1s; /* Faster feedback on tap */
}

/* Social Icon Hit Areas - 44px touch targets */
.social-icon,
.email-icon {
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Touch optimizations */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  
  /* Performance */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Enhanced transitions for smoother interactions */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              filter 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}

/* Social Icon - Hover/Tap States with Glow Effect */
.social-icon:hover,
.email-icon:hover {
  transform: scale(1.05); /* Subtle scale on hover */
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); /* Glow effect */
}

.social-icon:active,
.email-icon:active {
  transform: scale(0.95); /* Press feedback */
  filter: brightness(0.95);
  transition-duration: 0.1s; /* Faster feedback on tap */
}

/* Contact Section */
.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Natural spacing between email and copyright */
  text-align: center;
  margin-top: 0; /* Removed 4px - spacing handled by gap */
}

.footer__contact-text {
  font-family: 'Inria Serif', serif;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Email Link */
.footer__email-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500; /* Slightly bolder for emphasis */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother timing */
  position: relative;
  
  /* Touch-optimized padding */
  padding: 8px 4px;
  display: inline-block;
  
  /* Differentiate from icon - slightly dimmed */
  opacity: 0.98; /* Slightly dimmed to differentiate from icon */
  
  /* Performance */
  -webkit-tap-highlight-color: transparent;
}

/* Copyright Text */
.footer__copyright {
  font-family: 'Inria Serif', serif;
  font-size: 13px; /* Increased from 12px for better readability */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85); /* Improved contrast from 0.65 */
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* =====================================================
   PHASE 4: VISUAL DEPTH & EFFECTS (White-based)
   ===================================================== */

/* Essential Link - Tap Feedback with Brand Color */
.footer__essential-link:active {
  color: #f6e6d3; /* Brand beige on tap */
  background: rgba(255, 255, 255, 0.05); /* Subtle background highlight */
  transform: scale(0.98); /* Slight press feedback */
}

/* Essential Link - Underline Animation */
.footer__essential-link::after {
  content: '';
  position: absolute;
  bottom: 8px; /* Account for padding */
  left: 8px; /* Account for padding */
  width: 0;
  height: 1.5px; /* Increased from 1px for better visibility */
  background: rgba(255, 255, 255, 0.9); /* Increased opacity from 0.8 */
  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* Reduced from 0.25s - faster animation to complete before navigation */
}

.footer__essential-link:active::after {
  width: calc(100% - 16px); /* Account for left/right padding */
  background: #f6e6d3; /* Brand color for active state */
}

/* Email Link - Tap States with Brand Color */
.footer__email-link:active {
  color: #f6e6d3; /* Brand beige */
  transform: translateY(1px); /* Subtle press effect */
}

/* Email Link - Underline Animation */
.footer__email-link::after {
  content: '';
  position: absolute;
  bottom: 6px; /* Positioned below text */
  left: 4px;
  width: 0;
  height: 1.5px; /* Increased from 1px for better visibility */
  background: #f6e6d3; /* Brand color */
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother timing */
}

.footer__email-link:active::after {
  width: calc(100% - 8px); /* Full width minus padding */
}

/* Social Icon - Tap Feedback (duplicate removed - handled above) */

/* Focus States for Accessibility (keyboard navigation) */
.footer__essential-link:focus-visible,
.footer__email-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 4px;
}

.social-icon:focus-visible,
.email-icon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 50%;
}

/* =====================================================
   PHASE 5: TOUCH INTERACTIONS (Mobile-Optimized)
   ===================================================== */

/* Verified Touch Target Sizes (WCAG AAA compliance) */
/* ✓ Essential links: 12px vertical padding = ~39px tap height */
/* ✓ Social icons: 44px × 44px (Apple/Material Design standard) */
/* ✓ Email link: 8px vertical padding = ~31px tap height */

/* Additional Touch Feedback Polish */

/* Prevent text selection on tap (cleaner mobile experience) */
.final-v2__title,
.final-v2__tagline,
.footer__social-label,
.footer__copyright,
.footer__dot {
  user-select: none;
  -webkit-user-select: none;
}

/* Enable text selection for email (allow copy/paste) */
.footer__email-link {
  user-select: text;
  -webkit-user-select: text;
}

/* Improve tap response time on iOS */
.footer__essential-link,
.footer__email-link,
.social-icon,
.email-icon {
  cursor: pointer;
}

/* Prevent accidental zoom on double-tap */
.final-v2__footer * {
  touch-action: manipulation;
}

/* Smooth scroll for any in-footer anchor links */
.footer__essential-link[href^="#"] {
  scroll-behavior: smooth;
}

/* Active State Duration (matches natural tap timing) */
.footer__essential-link:active,
.footer__email-link:active {
  transition-duration: 0.1s; /* Faster response on tap */
}

/* Icon Tap Response - Instant feedback */
.social-icon:active,
.email-icon:active {
  transition-duration: 0.1s; /* Snappy feedback */
}

/* =====================================================
   PHASE 7: RESPONSIVE BREAKPOINTS (Mobile Sizes)
   ===================================================== */

/* Small Mobile: 320px - 414px (iPhone SE, iPhone 12 Mini, etc.) */
@media (min-width: 320px) and (max-width: 414px) {
  .final-v2__footer {
    padding: 32px 20px 32px; /* Increased top from 28px to 32px - better balance, less top-heavy */
  }
  
  .final-v2__title {
    font-size: 28px; /* Slightly smaller for small screens */
    font-weight: 400; /* Gambarino only has weight 400 */
    letter-spacing: -0.01em; /* Match base - natural spacing */
    line-height: 1.15; /* Match base - natural flow */
    margin-bottom: 14px; /* Increased from 10px - more breathing room between title and tagline */
  }
  
  .final-v2__tagline {
    font-size: 15px; /* Natural size for small screens */
    font-weight: 400; /* Match base - lighter weight */
    letter-spacing: 0.005em; /* Match base - natural spacing */
    line-height: 1.5; /* Match base - natural flow */
  }
  
  .footer__essentials {
    gap: 0; /* Remove gap - spacing handled by links and dots */
  }
  
  .footer__essential-link {
    font-size: 14px; /* Slightly smaller */
    padding: 10px 8px; /* Adjusted for bullet spacing */
  }
  
  .footer__dot {
    font-size: 11px; /* Slightly smaller on small screens */
    margin: 0 3px; /* Tighter spacing on small screens */
  }
  
  .final-v2__icons {
    gap: 20px; /* Slightly tighter but still more spaced than before */
  }
  
  .mobile-footer {
    padding: 0 12px 20px 12px; /* Smaller margins */
  }
}

/* Medium Mobile: 415px - 480px (iPhone 12, iPhone 14, etc.) */
@media (min-width: 415px) and (max-width: 480px) {
  .final-v2__footer {
    padding: 34px 24px 36px; /* Increased top from 30px to 34px - better balance, less top-heavy */
  }
  
  .final-v2__title {
    font-size: 30px; /* Standard size */
    font-weight: 400; /* Gambarino only has weight 400 */
    letter-spacing: -0.01em; /* Match base - natural spacing */
    line-height: 1.15; /* Match base - natural flow */
    margin-bottom: 16px; /* Match base - more breathing room between title and tagline */
  }
  
  .final-v2__tagline {
    font-size: 16px; /* Natural size for medium screens */
    font-weight: 400; /* Match base - lighter weight */
    letter-spacing: 0.005em; /* Match base - natural spacing */
    line-height: 1.5; /* Match base - natural flow */
    color: rgba(255, 255, 255, 0.98); /* Match base contrast increase */
  }
  
  /* Defaults work well here - no major changes needed */
}

/* Large Mobile: 481px - 767px (iPhone Plus, larger phones, small tablets) */
@media (min-width: 481px) and (max-width: 767px) {
  .final-v2__footer {
    padding: 36px 28px 40px; /* Increased top from 32px to 36px - match base, better balance */
  }
  
  .final-v2__title {
    font-size: 32px; /* Larger for bigger screens */
    font-weight: 400; /* Gambarino only has weight 400 */
    letter-spacing: -0.01em; /* Match base - natural spacing */
    line-height: 1.15; /* Match base - natural flow */
    margin-bottom: 16px; /* Match base - more breathing room between title and tagline */
  }
  
  .final-v2__tagline {
    font-size: 17px; /* Match base - natural size */
    font-weight: 400; /* Match base - lighter weight */
    letter-spacing: 0.005em; /* Match base - natural spacing */
    line-height: 1.5; /* Match base - natural flow */
  }
  
  .footer__essential-link {
    font-size: 16px; /* Slightly larger */
  }
  
  .footer__contact-text {
    font-size: 16px;
  }
  
  .final-v2__icons {
    gap: 32px; /* Even more breathing room for larger screens */
  }
  
  .mobile-footer {
    padding: 0 20px 28px 20px; /* Standard margins */
  }
}

/* Landscape Optimization for All Mobile Sizes */
@media (max-width: 767px) and (orientation: landscape) {
  .final-v2__footer {
    padding: 20px 24px 20px; /* Reduced vertical padding in landscape */
  }
  
  .footer__inner {
    gap: 12px; /* Tighter vertical spacing */
  }
  
  .footer__bottom {
    gap: 12px;
  }
}

/* =====================================================
   PHASE 8: PERFORMANCE & ACCESSIBILITY
   ===================================================== */

/* Reduced Motion Support - Footer Specific */
@media (prefers-reduced-motion: reduce) {
  /* Disable footer animations */
  .final-v2__footer,
  .final-v2__title,
  .final-v2__tagline,
  .footer__essentials,
  .footer__social,
  .footer__contact {
    animation: none !important;
    transition: opacity 0.15s ease !important;
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Show footer immediately (no scroll animation) */
  .final-v2__footer {
    opacity: 1 !important;
  }
  
  /* Disable all transform animations but keep opacity for link feedback */
  .footer__essential-link,
  .footer__email-link {
    transition: opacity 0.15s ease, color 0.15s ease !important;
  }
  
  .footer__essential-link:active,
  .footer__email-link:active {
    transform: none !important;
  }
  
  /* Disable icon transforms */
  .social-icon:active,
  .email-icon:active {
    transform: none !important;
    transition: opacity 0.15s ease !important;
  }
}

/* High Contrast Mode Support (Windows/Accessibility) */
@media (prefers-contrast: high) {
  .final-v2__footer {
    border: 2px solid currentColor;
  }
  
  .footer__bottom {
    border-top-width: 2px;
  }
  
  .footer__essential-link,
  .footer__email-link {
    outline: 1px solid currentColor;
  }
}

/* Dark Mode Optimization (if system uses dark mode) */
@media (prefers-color-scheme: dark) {
  .final-v2__footer {
    /* Already black - ensure optimal rendering */
    background: #000;
    box-shadow: 
      0 -8px 24px rgba(0, 0, 0, 0.25), 
      0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure sharp text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }


}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}









/* ============================
   ✅ Page Transition Effects
   ============================ */

.fade-to-story {
    opacity: 0;
    transition: opacity 0.4s ease;
    background-color: #f9efdc;
}

/* ============================
   ✅ Waitlist Overlay V2 (.wlx) - Ported from OSM
   ============================ */

.wlx[hidden]{ display:none !important; }

.wlx{
  position:fixed;
  inset:0;
  z-index: 9010;
  pointer-events:none; /* enabled when open */
  overflow: hidden; /* Prevent panel from extending beyond viewport */
}

.wlx__backdrop{
  position:fixed;
  inset:0;
  z-index: 9000;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(6px) saturate(0.9);
  -webkit-backdrop-filter: blur(6px) saturate(0.9);
  opacity:0;
  pointer-events:none;
  /* will-change removed - will be added dynamically via JavaScript when overlay opens */
}

.wlx__panel{
  position:fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Initial transform removed - GSAP will handle all transforms to avoid conflicts */
  width: 100vw;
  max-width: none;
  border-radius: 16px 16px 0 0;
  z-index: 9011;
  isolation: isolate;
  background:#F9EFDC; /* cream panel to match brand */
  /* Border removed - was causing visual jank */
  box-shadow: 0 -12px 32px rgba(0,0,0,0.18);
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px)); /* Added keyboard spacing */
  opacity:0;
  pointer-events:auto;
  /* will-change removed - will be added dynamically via JavaScript when panel animates */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Let our JS take over vertical gestures once they are intentional */
  touch-action: none; /* we dynamically decide when to preventDefault */
  /* Hardware acceleration for smooth animations */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Desktop styles - hidden on mobile */
/* Note: Hides waitlist overlay on larger screens (768px+) - desktop users are redirected server-side */
@media (min-width: 768px){
  .wlx{ display: none !important; }
}

.wlx__title{
  margin: 4px 0 10px;
  font-family: 'Gambarino', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-align: center;
  color:#111;
}

.wlx__label{
  display:block; 
  margin: 12px 0 10px;
}

.wlx__label-text{
  display:block; 
  margin-bottom:6px;
  font-family: 'Inria Serif', serif;
  font-size: 12px;
  font-weight: 700;
  color:#222;
}

.wlx__input{
  display:block; 
  width:100%;
  font-family: 'Inria Serif', serif;
  /* Keep at 16px to prevent iOS Safari zoom-on-focus */
  font-size: 16px;
  padding: 11px 13px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,0.16);
  background:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.wlx__input::placeholder{
  color: rgba(0,0,0,0.42);
}

.wlx__input:focus{
  border-color:#000;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.wlx__submit{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  margin-top: 14px;
  width: 100%; 
  height: 44px;
  border:0; 
  border-radius: 10px;
  background:#000; 
  color:#fff;
  font-family:'Inria Serif', serif; 
  font-weight:700; 
  font-size:16px;
  letter-spacing: 0;
  cursor:pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.wlx__submit:hover {
  animation: bounce 0.6s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.24);
}

.wlx__submit:active{ 
  transform: scale(0.98); 
}

.wlx__submit.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.wlx__status{
  min-height: 18px;
  margin: 8px 2px 0;
  font-family:'Inria Serif', serif;
  font-size: 12px; 
  color:#111;
  text-align:center;
}

.wlx__note{
  margin: 10px 2px 0;
  font-family: 'Inria Serif', serif;
  font-style: italic;
  font-size: 12px;
  color:#555;
  text-align:center;
}

/* Active/open states */
.wlx.is-open .wlx__backdrop{ 
  opacity:1; 
  pointer-events:auto; 
}

.wlx.is-open{ 
  pointer-events:auto; 
}

.wlx.open{ 
  pointer-events:auto; 
}

/* Success state */
.wlx__content {
  opacity: 1;
  transform: translateY(0);
  /* will-change removed - will be added dynamically via JavaScript during animations */
}

.wlx__success {
  position: absolute;
  left: 0; 
  right: 0; 
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: 'Inria Serif', serif;
  font-size: 16px;
  font-style: italic;
  color: #111;
  opacity: 0;
  transform: translateY(8px);
  /* will-change removed - will be added dynamically via JavaScript during success animation */
  pointer-events: none;
  line-height: 1.4;
}

.wlx__success[hidden] { 
  display: none !important; 
}

/* Success modal height */
.wlx__panel.is-success{
  min-height: clamp(300px, 48vh, 600px) !important;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

.wlx__success{
  top: 48% !important;
  bottom: auto !important;
  font-size: 16px !important;
}

/* Keep layout stable on small screens */
@media (max-width: 767.98px){
  .wlx__panel { 
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); /* Added keyboard spacing */
  }
}

/* Gesture and scroll containment */
.wlx{
  overscroll-behavior: contain;
  touch-action: none;
}

.wlx__panel{
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Footer CTA wrapper */
.lp-footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -1px 0 56px; /* Negative top margin to eliminate subpixel gap, 7×8 bottom */
  padding-top: 24px; /* Reduced padding for better connection: 24px (3×8px) */
  position: relative;
  z-index: 1; /* Above gradient overlay */
  width: 100%; /* Ensure full width */
  box-sizing: border-box; /* Include padding in width calculation */
  left: 0; /* Ensure no horizontal offset */
  right: 0; /* Ensure no horizontal offset */
}

/* Phase 2: Subtle divider line connecting Why section to CTA */
.lp-footer-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  max-width: 320px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

/* Phase 3: Bridge text styling */
.lp-footer-cta__bridge {
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(16px, 3.8vw, 18px);
  color: rgba(27, 23, 19, 0.7);
  text-align: center;
  margin: 0 0 16px 0;
  padding: 0 min(6vw, 28px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  max-width: min(360px, 92vw);
  position: relative;
  z-index: 1;
}

/* OSM-style CTA button - Updated to match hero CTA */
.final-v2__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 252px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: #000000;
  color: #ffffff;
  font-family: 'Inria Serif', serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1) translateZ(0);
  /* will-change removed - will be added dynamically via JavaScript on hover/touch */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.final-v2__cta:hover { 
  transform: scale(1.03) translateZ(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}





/* ============================
   EMBLA CAROUSEL - HERO SECTION
   Enhanced with best practices
   ============================ */

/* Section spacing: 8px grid aligned */
.dmt-carousel {
  padding: 0; /* Full-width, no horizontal gutter */
    margin-top: 36px; /* Slightly tighter spacing */
  margin-bottom: 12px; /* Allow division line to sit close to shadow */
  margin-left: -24px; /* Break out of hero-section padding */
  margin-right: -24px; /* Break out of hero-section padding */
  width: calc(100% + 48px); /* Compensate for negative margins */
}

/* Embla wrapper - REQUIRED overflow: hidden */
.embla {
  overflow: hidden; /* ✅ CRITICAL: Required by Embla */
  width: 100%;
  max-width: 100%;
  padding: 24px 0; /* More headroom for shadows */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Embla viewport - REQUIRED overflow: hidden with focus styles */
.embla__viewport {
  overflow: hidden; /* ✅ CRITICAL: Required by Embla */
  width: 100%;
  padding: 18px 0; /* Extra buffer to avoid clipping shadows */
  /* will-change removed - will be added dynamically via JavaScript when carousel is scrolling */
  outline: none; /* Remove default outline */
}

/* Focus indicator for keyboard navigation */
.embla__viewport:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Embla container - Using margins for gaps (Embla best practice) */
.embla__container {
  padding: 8px 0; /* Improved breathing for card drop shadow */
  display: flex;
  touch-action: pan-y;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Slide - Dynamic width with margins for gaps */
.embla__slide {
  flex: 0 0 auto;
  min-width: 0; /* ✅ Prevents flex shrinking issues */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px; /* ✅ Margin instead of gap for Embla compatibility */
}

/* Remove margin from last slide */
.embla__slide:last-child {
  margin-right: 0;
}

/* Carousel card - Now a button for proper semantics */
.carousel-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  border: none; /* Remove button border */
  font-family: 'Inria Serif', serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  transform-origin: center center;
  transform: scale(0.85) translateZ(0);
  transition:
    transform 0.4s cubic-bezier(0.2, 0, 0, 1), /* ✅ Faster transition (was 1s) */
    box-shadow 0.4s cubic-bezier(0.2, 0, 0, 1);
  /* will-change removed - will be added dynamically via JavaScript only to active/neighbor slides */
  cursor: pointer;
  
  /* Prevent text selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  
  /* Performance */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Hover state */
.carousel-card:hover {
  animation: bounce 0.6s ease;
}

/* Focus state for keyboard navigation */
.carousel-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Active slide - Center focused slide */
.embla__slide.is-active .carousel-card {
  transform: scale(1.25) translateY(-6px) translateZ(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Neighbor slides - Subtle scaling */
.embla__slide.is-neighbor .carousel-card {
  transform: scale(0.9) translateZ(0);
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
}

/* Hide carousel until ready - Prevents layout shift */
.embla[data-carousel-ready="false"] {
  opacity: 0;
  pointer-events: none;
}

/* Fade in when ready */
.embla[data-carousel-ready="true"] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

/* Reduced Motion — keep the style but shorten the transitions */
@media (prefers-reduced-motion: reduce){
  .carousel-card{
    transition: transform 0.01ms linear, box-shadow 0.01ms linear;
  }
  
  .embla[data-carousel-ready="true"]{
    transition: opacity 0.15s ease;
  }
}

/* Accessibility bump for tiny screens (≤360px) */
@media (max-width: 360px) {
  .hiw-slide-text .hiw-slide-title { line-height: 1.28; }
  .hiw-slide-text .hiw-slide-sub   { line-height: 1.38; }
}

/* ————————————————————————————————
   MOBILE-ONLY PATH HIGHLIGHTING
   ———————————————————————————————— */

/* Dim everything when a slide is in highlight mode */
.hiw-svg-branch.path-mode .nn-line { opacity: 0.28 !important; }
.hiw-svg-branch.path-mode .nn-node { filter: none; }

/* Base path emphasis (no animation at this level) */
.hiw-svg-branch .nn-line.is-path {
  opacity: 1 !important;
  background: #000 !important;
  height: 2px !important;
  box-shadow: none !important;
  transition: none;
}

.hiw-svg-branch .nn-node.is-path {
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  transition: none;
}

/* Prevent hover from overriding path highlighting */
.nn-node.is-path:hover {
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  transform: none;
}

/* Ensure taps are obvious on mobile without hover */
.hiw-svg-branch .nn-node { cursor: pointer; }

/* Output node keeps mango color when in path - shows destination reached */
.hiw-svg-branch .nn-output .nn-node.is-path {
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nn-line.is-path, .nn-node.is-path {
    filter: none !important;
    transition: none !important;
  }
}