/* ============================================
   RESET AND BASE STYLES
   ============================================ */
:root {
    /* Base font size - using vh */
    font-size: 1vh;
    
    /* Fluid padding that scales with viewport width */
    --nav-footer-padding: clamp(1.25vh, 7.5vw, 7.5vh);
    --content-max-width: min(52.734375vw, 90vw);
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Cormorant Garamond', serif;
    
    /* Spacing scale in vh */
    --spacing-xs: 0.5vh;
    --spacing-sm: 0.75vh;
    --spacing-md: 1vh;
    --spacing-lg: 1.5vh;
    --spacing-xl: 2vh;
    --spacing-2xl: 3vh;
    --spacing-3xl: 4vh;
    --spacing-4xl: 6vh;
}

@media (max-width: 1024px) {
    :root {
        --nav-footer-padding: clamp(1.25vh, 5.86vw, 3.75vh);
    }
}

@media (max-width: 768px) {
    :root {
        --nav-footer-padding: clamp(1.25vh, 5.21vw, 2.5vh);
    }
}

@media (max-width: 480px) {
    :root {
        --nav-footer-padding: clamp(0.25vh, 1vw, 0.25vh) !important; /* Much wider navbar - minimal side padding (was 0.5vh/2vw/0.5vh) */
        --content-max-width: 100% !important; /* Remove content max-width constraint for navbar on mobile */
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Videos excluded from max-width rule - we handle them individually */
video {
    max-width: none; /* Allow videos to exceed container width for carousel */
}

/* Specific override for carousel strip videos to prevent stacking */
.carousel-strip-video {
    max-width: none !important;
}

table {
    width: 100%;
    table-layout: fixed;
}

html {
    min-height: 100%; /* Allow page to grow beyond viewport for scrolling */
    /* Base font size using vh - scales with viewport height */
    /* Base case: 16px at 1600px height (1vh = 16px), scales proportionally */
    /* Using calc to convert vh to equivalent rem: 1vh at 1600px = 16px = 1vh */
    font-size: clamp(0.875vh, 1vh, 1.125vh);
    background: linear-gradient(135deg, #E2D5C0 0%, #E2D5C0 70%, #F8F8F8 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Scale everything with vh units for web - 1600px height as base case */
@media (min-width: 769px) {
    html {
        /* Base case: 16px at 1600px height (1vh = 16px) - 30% larger (20% + 10%) */
        /* At 800px height: 0.66vh = 10.56px, at 1600px: 1.32vh = 21.12px, at 3200px: 2.64vh = 42.24px */
        font-size: clamp(0.66vh, 1.32vh, 2.64vh);
        /* This makes all vh units scale with viewport height */
    }
    
    /* Scale navbar elements proportionally - 50% larger (20% + 30%) */
    .navbar {
        font-size: 171.6%;
        padding: clamp(1.2vh, 2vh, 2vh) 0; /* Thinner navbar, no horizontal padding */
    }
    
    .navbar-inner {
        padding: 1vh 6vh; /* Thinner and much wider */
        max-width: min(65vw, 90vw) !important; /* Wider navbar */
    }
    
    .navbar-inner.layout-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: min(65vw, 90vw) !important;
    }
    
    .nav-brand img {
        /* Scale logo with vh - 50% larger (20% + 30%) */
        height: clamp(4.5vh, 5.5vh, 5.5vh);
    }
    
    .nav-brand h2 {
        font-size: clamp(2.145vh, 2.925vh, 2.925vh);
    }
    
    /* Scale hero elements with vh - 50% larger (20% + 30%) */
    .hero-title {
        font-size: clamp(3.78378vh, 8.27701875vh, 8.27701875vh); /* 10% larger (3.4398vh * 1.1 = 3.78378vh, 7.5245625vh * 1.1 = 8.27701875vh) */
    }
    
    .hero-subtitle {
        font-size: clamp(2.477475vh, 3.20945625vh, 3.20945625vh); /* 10% larger (2.25225vh * 1.1 = 2.477475vh, 2.9176875vh * 1.1 = 3.20945625vh) */
    }
    
    /* Scale carousel boxes with vh - 50% larger (20% + 30%) */
    .how-it-works--scrollable .how-it-works-box {
        flex: 0 0 clamp(27.40843248vh, 45.67992vh, 36.543936vh);
        min-height: clamp(28.942797312vh, 29.3945652vh, 29.3945652vh);
    }
    
    /* Scale boxes in how it works section with vh - 50% larger (20% + 30%) */
    .how-it-works-box {
        padding: clamp(1.9305vh, 3.0888vh, 3.0888vh) clamp(1.5444vh, 1.9305vw, 1.9305vh);
        border-radius: clamp(1.5444vh, 1.9305vh, 1.9305vh);
    }
    
    .step-number {
        width: clamp(5.0948352vh, 5.30712vh, 5.30712vh); /* 5% larger */
        height: clamp(5.0948352vh, 5.30712vh, 5.30712vh); /* 5% larger */
        font-size: clamp(2.5474176vh, 2.88707328vh, 2.88707328vh); /* 5% larger */
    }
    
    .step-title {
        font-size: clamp(2.43243vh, 2.837835vh, 2.837835vh); /* 5% larger */
    }
    
    /* Scale footer with vh - 10% larger (additional 10%) */
    .site-footer {
        font-size: 274.074536736%; /* 10% larger (249.15866976% * 1.1 = 274.074536736%) */
    }
    
    .footer-copyright {
        font-size: clamp(1.59011424vh, 1.8347472vh, 1.8347472vh); /* 10% larger (1.4455584vh * 1.1 = 1.59011424vh, 1.667952vh * 1.1 = 1.8347472vh) */
    }
    
    .social-icon {
        font-size: clamp(3.330066168vh, 3.8480764608vh, 3.8480764608vh); /* 10% larger */
        width: clamp(7.40014704vh, 8.140161744vh, 8.140161744vh); /* 10% larger */
        height: clamp(7.40014704vh, 8.140161744vh, 8.140161744vh); /* 10% larger */
    }
    
    .footer-link {
        font-size: clamp(2.096708328vh, 2.220044112vh, 2.220044112vh); /* 10% larger */
    }
    
    /* Scale hero form elements with vh - 10% larger */
    .email-signup-form input {
        font-size: clamp(2.313336564vh, 2.43509112vh, 2.43509112vh); /* 10% larger (2.10303324vh * 1.1) */
        padding: clamp(2.32440516vh, 2.4904341vh, 2.4904341vh) clamp(2.65646304vh, 3.3205788vw, 3.3205788vh); /* 10% larger */
        border-radius: clamp(3.17625vh, 4.44675vh, 4.44675vh); /* 10% larger */
        height: clamp(8.035800696vh, 8.766328032vh, 8.766328032vh) !important; /* 10% larger height (7.30527336vh * 1.1 = 8.035800696vh, 7.96938912vh * 1.1 = 8.766328032vh) */
        min-height: clamp(8.035800696vh, 8.766328032vh, 8.766328032vh) !important; /* 10% larger height */
    }
    
    .signup-btn {
        font-size: clamp(2.922109344vh, 3.2143202784vh, 3.2143202784vh); /* 10% larger */
        padding: clamp(2.32440516vh, 2.4904341vh, 2.4904341vh) clamp(3.98469456vh, 6.6411576vw, 6.6411576vh); /* 10% larger */
        border-radius: clamp(3.17625vh, 4.44675vh, 4.44675vh); /* 10% larger */
        height: clamp(8.035800696vh, 8.766328032vh, 8.766328032vh) !important; /* 10% larger height (7.30527336vh * 1.1 = 8.035800696vh, 7.96938912vh * 1.1 = 8.766328032vh) */
        min-height: clamp(8.035800696vh, 8.766328032vh, 8.766328032vh) !important; /* 10% larger height */
        width: clamp(25.502045184vh, 31.87755648vw, 31.87755648vh); /* 10% larger */
    }
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: transparent;
    z-index: -1;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: #2A2D34;
    min-height: 100%;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.layout-shell,
.container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--nav-footer-padding);
    box-sizing: border-box;
}

/* For very large screens, use wider max-width to reduce white space */
@media (min-width: 1920px) {
    :root {
        --content-max-width: min(62.5vw, 85vw);
    }
}

@media (min-width: 2560px) {
    :root {
        --content-max-width: min(78.125vw, 80vw);
    }
}

.page-content {
    padding-top: 0;
    padding-bottom: clamp(3vh, 4vh, 4vh);
    display: flex;
    flex-direction: column;
    gap: clamp(2vh, 4vh, 4vh);
}

@media (min-width: 769px) {
    body {
        /* Remove the 90% reduction - let everything scale naturally with html font-size */
        font-size: 100%;
    }
    
    .navbar {
        /* Keep navbar slightly larger but scale with base - 50% larger (20% + 30%) */
        font-size: 171.6%;
    }
    
    .hero-title {
        /* Scale naturally with base font-size - 10% larger (172% * 1.1 = 189.2%) */
        font-size: 189.2%;
    }
    
    .hero-subtitle {
        /* Scale naturally with base font-size - 10% larger (163.8% * 1.1 = 180.18%) */
        font-size: 180.18%;
    }
    
    .how-it-works-title {
        font-size: 107.6385024%; /* 60% larger (50% + 10%) */
    }
    
    .how-it-works-subtitle {
        font-size: 76.82688%; /* 42.5% larger (50% - 5%) */
    }
    
    .how-it-works-box {
        font-size: 107.88313536%; /* 5% larger (102.7458432% * 1.05 = 107.88313536%) */
        transform: scale(1.092323232); /* 5% larger (1.04030784 * 1.05 = 1.092323232) */
        transform-origin: center;
    }
    
    .how-it-works-grid {
        gap: clamp(18vh, 24vh, 24vh);
        grid-template-columns: repeat(3, 1fr);
        max-width: min(77vw, 95vw); /* 10% wider boxes (70vw * 1.1 = 77vw) */
    }
    
    .how-it-works-grid .how-it-works-box {
        width: 100%;
        max-width: 100%;
    }
    
    .how-it-works--scrollable .how-it-works-box {
        font-size: 138.6684%;
    }
    
    .tongue-scan-image {
        width: min(28.37835vw, 41.2776vw) !important; /* 5% larger (27.027vw * 1.05 = 28.37835vw, 39.312vw * 1.05 = 41.2776vw) */
        min-width: min(28.37835vw, 41.2776vw) !important;
        max-width: min(28.37835vw, 41.2776vw) !important;
        transform: scale(1.365) !important; /* 5% larger scale (1.3 * 1.05 = 1.365) */
        transform-origin: center; /* Scale from center */
    }
    
    /* Ensure all images have the same dimensions on web - 5% larger */
    .how-it-works-grid .how-it-works-box:nth-child(1) .tongue-scan-image,
    .how-it-works-grid .how-it-works-box:nth-child(2) .tongue-scan-image,
    .how-it-works-grid .how-it-works-box:nth-child(3) .tongue-scan-image {
        width: min(19.864845vw, 28.89432vw) !important; /* 5% larger (18.9189vw * 1.05 = 19.864845vw, 27.5184vw * 1.05 = 28.89432vw) */
        min-width: min(19.864845vw, 28.89432vw) !important;
        max-width: min(19.864845vw, 28.89432vw) !important;
        transform: scale(1.365) !important; /* 5% larger scale (1.3 * 1.05 = 1.365) */
        transform-origin: center; /* Scale from center */
    }
    
    /* Step numbers - 5% larger */
    .step-number {
        width: clamp(5.60431952vh, 5.837832vh, 5.837832vh); /* 5% larger */
        height: clamp(5.60431952vh, 5.837832vh, 5.837832vh); /* 5% larger */
        font-size: clamp(2.80215976vh, 3.175780608vh, 3.175780608vh); /* 5% larger */
    }
    
    /* Step titles 5% larger on web */
    .step-title {
        font-size: clamp(2.1405384vh, 2.4972948vh, 2.4972948vh); /* 5% larger */
    }
    
    /* Images 5% larger on web */
    .tongue-scan-image {
        width: min(24.972948vw, 36.324288vw) !important; /* 5% larger (23.78376vw * 1.05 = 24.972948vw, 34.59456vw * 1.05 = 36.324288vw) */
        min-width: min(24.972948vw, 36.324288vw) !important;
        max-width: min(24.972948vw, 36.324288vw) !important;
        transform: scale(1.365) !important; /* 5% larger scale (1.3 * 1.05 = 1.365) */
        transform-origin: center; /* Scale from center */
    }
    
    /* Ensure all images have the same dimensions on web - 5% larger */
    .how-it-works-grid .how-it-works-box:nth-child(1) .tongue-scan-image,
    .how-it-works-grid .how-it-works-box:nth-child(2) .tongue-scan-image,
    .how-it-works-grid .how-it-works-box:nth-child(3) .tongue-scan-image {
        width: min(17.4810636vw, 25.4270016vw) !important; /* 5% larger (16.648632vw * 1.05 = 17.4810636vw, 24.216192vw * 1.05 = 25.4270016vw) */
        min-width: min(17.4810636vw, 25.4270016vw) !important;
        max-width: min(17.4810636vw, 25.4270016vw) !important;
        transform: scale(1.365) !important; /* 5% larger scale (1.3 * 1.05 = 1.365) */
        transform-origin: center; /* Scale from center */
    }
    
    .site-footer {
        font-size: 304.52726304% !important; /* 10% larger (276.8429664% * 1.1 = 304.52726304%) */
    }
    
    .footer-copyright {
        font-size: clamp(1.59011424vh, 1.8347472vh, 1.8347472vh) !important; /* 10% larger */
    }
}

@media (max-width: 768px) {
    .page-content {
        padding-top: clamp(5vh, 7vh, 7.5vh);
        gap: clamp(2vh, 3vh, 3vh);
    }
}

@media (max-width: 480px) {
    .page-content {
        padding-top: 0 !important; /* Remove top padding so hero video touches top of screen */
        gap: clamp(1.5vh, 2vh, 2vh);
        padding-bottom: clamp(2vh, 3vh, 3vh);
    }
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(0.8vh, 1.2vh, 1.2vh) 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 1000;
    transition: all 1s ease;
    width: 100%;
    box-sizing: border-box;
}

.navbar.solid {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1 !important;
}

.navbar.solid .navbar-inner {
    background: #F8F8F8 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 0.125vh 0.5vh rgba(0, 0, 0, 0.1);
    border: none;
    margin: 0;
    opacity: 1 !important;
    /* Padding is inherited from .navbar-inner, no override needed */
}

.navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2vh;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(0.625vh);
    -webkit-backdrop-filter: blur(0.625vh);
    border-radius: clamp(0.75vh, 1.25vh, 1.25vh);
    padding: 0.9vh 6vh;
    width: 100%;
    max-width: min(65vw, 90vw);
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: none;
    border: none;
    transition: background 1s ease, backdrop-filter 1s ease, -webkit-backdrop-filter 1s ease, box-shadow 1s ease;
}

/* Override layout-shell padding for navbar - make it wider */
.navbar-inner.layout-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: min(65vw, 90vw) !important;
}

@media (max-width: 1024px) {
    .navbar {
        padding: clamp(0.8vh, 1.2vh, 1.2vh) 0;
    }
    
    .navbar-inner {
        padding: clamp(0.75vh, 1vh, 1vh) clamp(4vh, 5vw, 5vh);
        border-radius: clamp(0.75vh, 1vh, 1vh);
        max-width: min(65vw, 90vw) !important;
    }
    
    .navbar-inner.layout-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: min(65vw, 90vw) !important;
    }
    
    .navbar.solid .navbar-inner {
        background: #F8F8F8 !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: clamp(0.75vh, 1vh, 1vh) clamp(4vh, 5vw, 5vh);
        opacity: 1 !important;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: clamp(0.8vh, 1.2vh, 1.2vh) 0;
    }
    
    .navbar-inner {
        padding: clamp(0.75vh, 1vh, 1vh) clamp(4vh, 5vw, 5vh);
        border-radius: clamp(0.75vh, 1vh, 1vh);
        max-width: min(65vw, 90vw) !important;
    }
    
    .navbar-inner.layout-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: min(65vw, 90vw) !important;
    }
    
    .navbar.solid .navbar-inner {
        background: #F8F8F8 !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: clamp(0.75vh, 1vh, 1vh) clamp(4vh, 5vw, 5vh);
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    /* Define CSS custom properties to lock dimensions on mobile - using simpler fixed values */
    :root {
        --nav-mobile-padding-vertical: clamp(0.75vh, 1vh, 1vh); /* Match web 768px padding */
        --nav-mobile-padding-horizontal: clamp(4vw, 5vw, 5vw); /* Match web proportions */
        --nav-mobile-width: 90vw; /* Fixed width for consistency */
        --nav-mobile-border-radius: clamp(0.75vh, 1vh, 1vh); /* Match web border-radius */
        --nav-mobile-gap: 2vh;
    }
    
    /* Override ALL base rules completely for mobile */
    .navbar.solid .navbar-inner {
        /* Override base rule completely - ensure margin stays auto */
        margin: 0 auto !important;
        /* Override any padding from base rule */
        padding: clamp(3vh, 4vh, 4vh) clamp(4vw, 5vw, 5vw) !important; /* 300% larger vertical padding (0.75vh * 4 = 3vh, 1vh * 4 = 4vh) */
    }
    
    .navbar {
        padding: clamp(3.2vh, 4.8vh, 4.8vh) 0 !important; /* 300% larger height (0.8vh * 4 = 3.2vh, 1.2vh * 4 = 4.8vh) */
        display: flex !important;
        justify-content: center !important; /* Center the navbar */
        transition: none !important; /* No transitions that could affect size */
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    
    .navbar.solid {
        padding: clamp(3.2vh, 4.8vh, 4.8vh) 0 !important; /* 300% larger height (0.8vh * 4 = 3.2vh, 1.2vh * 4 = 4.8vh) */
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    
    /* Override layout-shell constraint for navbar on mobile */
    .navbar .layout-shell,
    .navbar-inner.layout-shell {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Lock navbar-inner dimensions - INITIAL STATE - ALL PROPERTIES FIXED */
    .navbar-inner,
    .navbar-inner[style],
    .navbar.solid .navbar-inner,
    .navbar.solid .navbar-inner[style] {
        /* SIZE PROPERTIES - IDENTICAL IN ALL STATES */
        width: 90vw !important;
        max-width: 90vw !important;
        min-width: 90vw !important;
        padding: clamp(3vh, 4vh, 4vh) clamp(4vw, 5vw, 5vw) !important; /* 300% larger vertical padding (0.75vh * 4 = 3vh, 1vh * 4 = 4vh) */
        margin: 0 auto !important;
        border-radius: clamp(0.75vh, 1vh, 1vh) !important;
        box-sizing: border-box !important;
        
        /* HEIGHT - AUTO BUT CONSISTENT */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        
        /* SPACING - FIXED */
        gap: 2vh !important;
        
        /* DISPLAY - FIXED */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        
        /* POSITION - FIXED */
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        
        /* CONTAINMENT - PREVENT LAYOUT SHIFTS */
        contain: layout style size paint !important;
        
        /* NO TRANSITIONS ON SIZE PROPERTIES */
        transition: background-color 1s ease, box-shadow 1s ease !important;
        
        /* NO BACKDROP FILTER - will be set specifically for initial state only */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* INITIAL STATE - VISIBLE NAVBAR - override consolidated rule for non-solid state with highest specificity */
    .navbar:not(.solid) .navbar-inner,
    .navbar:not(.solid) .navbar-inner[style] {
        background: rgba(248, 248, 248, 0.95) !important; /* Nearly solid background for mobile - very visible */
        backdrop-filter: blur(2vh) !important; /* Strong blur for better visibility */
        -webkit-backdrop-filter: blur(2vh) !important; /* Strong blur for better visibility */
        box-shadow: 0 0.25vh 1vh rgba(0, 0, 0, 0.35) !important; /* Visible shadow */
        border: 1px solid rgba(255, 255, 255, 0.8) !important; /* Visible border */
        outline: none !important;
        opacity: 1 !important; /* Ensure full opacity */
    }
    
    /* Ensure solid state doesn't have backdrop-filter to prevent layout shifts */
    .navbar.solid .navbar-inner {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
    }
    
    /* SOLID STATE - VISUAL ONLY */
    .navbar.solid .navbar-inner {
        background: #F8F8F8 !important;
        box-shadow: 0 0.125vh 0.5vh rgba(0, 0, 0, 0.1) !important; /* Same size, just visible */
        border: none !important;
        outline: none !important;
    }
    
    /* Lock nav-brand position and sizes to prevent movement and navbar size changes */
    .nav-brand,
    .nav-brand a,
    .navbar.solid .nav-brand,
    .navbar.solid .nav-brand a {
        position: relative !important; /* Lock position */
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transition: none !important; /* No transitions on brand elements */
        flex-shrink: 0 !important; /* Prevent shrinking */
        flex-grow: 0 !important; /* Prevent growing */
        align-self: flex-start !important; /* Align to start like web */
        transform: none !important; /* No transforms */
    }
    
    .nav-brand img,
    .navbar.solid .nav-brand img {
        height: clamp(2.5vh, 4.5vh, 3vh) !important;
        width: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        transform: none !important; /* No transforms */
        transition: none !important;
    }
    
    .nav-brand h2,
    .navbar.solid .nav-brand h2 {
        font-size: clamp(1vh, 1.2vh, 1.2vh) !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        transform: none !important; /* No transforms */
        transition: none !important;
    }
}

.nav-brand h2 {
    color: #000000;
    font-weight: 600;
    font-size: clamp(1.625vh, 1.95vh, 1.95vh);
    font-family: var(--font-display);
}

.nav-brand img {
    height: clamp(3vh, 4vh, 4vh);
    width: auto;
    display: block;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    padding: 0 0 clamp(1.5vh, 2.5vh, 2.5vh);
    min-height: 95vh;
    display: flex;
    align-items: center;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 0;
    padding-top: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Scale hero video with base font-size system for web */
/* Note: Hero video scales with container which uses vh units */

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    object-fit: cover;
    object-position: center;
    display: block;
    visibility: visible;
    opacity: 1;
    border-radius: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
}

.scroll-arrow {
    position: absolute;
    bottom: clamp(1vh, 2vh, 2vh);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
    color: #F8F8F8;
    font-size: clamp(2vh, 3vh, 3vh);
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: auto;
}

.scroll-arrow:hover {
    color: #D7B082;
}

.scroll-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(1.5vh);
    }
}

@media (max-width: 480px) {
    .scroll-arrow {
        bottom: clamp(3vh, 4vh, 4vh); /* Moved upward (increased from clamp(0.5vh, 1vh, 1vh)) */
        font-size: clamp(1.5vh, 2vh, 2vh);
    }
}

@media (max-width: 1024px) {
    .hero {
        padding: 0 0 clamp(1.5vh, 2.5vh, 2.5vh);
        min-height: 95vh;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 0 0 clamp(1.25vh, 2vh, 2vh);
        min-height: 90vh;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 0 !important; /* Remove all padding on mobile */
        min-height: 100vh; /* Full viewport height */
        margin: 0 !important; /* Remove all margins on mobile */
        padding-top: 0 !important; /* Ensure no top padding on mobile */
        position: relative !important;
        top: 0 !important; /* Ensure hero starts at top */
    }
    
    .hero-video {
        object-position: center center;
        top: 0 !important; /* Ensure video starts at top */
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important; /* Remove all margins */
        padding: 0 !important; /* Remove all padding */
        position: absolute !important;
    }
    
    /* Ensure page-content doesn't add spacing */
    .page-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.hero-content {
    width: 100%;
    max-width: var(--content-max-width);
    margin: clamp(8vh, 12vh, 12vh) 0 0 0;
    margin-left: calc((var(--nav-footer-padding) + var(--nav-footer-padding) + 2vh - clamp(11.25vw, 15vw, 15vw)) * 1.4 + 5vw);
    padding: 0 var(--nav-footer-padding);
    padding-left: calc(var(--nav-footer-padding) + 5vw);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .hero-content {
        margin-top: clamp(8vh, 12vh, 12vh);
        margin-left: calc((var(--nav-footer-padding) + var(--nav-footer-padding) + 1.5vh - clamp(9vw, 11.25vw, 11.25vw)) * 1.4);
    }
}

@media (max-width: 768px) {
    .hero-content {
        margin-top: clamp(6vh, 8vh, 8vh);
        margin-left: calc((var(--nav-footer-padding) + var(--nav-footer-padding) + 1.5vh - clamp(6vw, 7.5vw, 7.5vw)) * 1.4);
        padding: 0 var(--nav-footer-padding);
    }
}

@media (max-width: 480px) {
    .hero-content {
        margin-top: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        text-align: center;
        justify-content: center;
        align-items: center !important; /* Center vertically */
        width: 100%;
        max-width: 100%;
        position: absolute !important;
        top: 44% !important; /* Move down slightly from 42% */
        transform: translateY(-50%) !important; /* Center vertically */
        left: 0 !important;
        right: 0 !important;
    }
}

.hero-text {
    max-width: min(45vw, 70vw);
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

.hero-signup {
    max-width: min(35vw, 550px) !important;
    width: min(35vw, 550px) !important;
}

@media (max-width: 480px) {
    .hero-text {
        max-width: 100%;
        text-align: center;
        margin: 0 auto !important;
        margin-top: 0 !important;
        padding: 0 0.5vh !important;
        padding-top: 0 !important;
        box-sizing: border-box;
    }
    
    .hero-signup {
        padding: 0;
        margin: 1.5vh 0 0 0;
        width: 100%;
    }
}

.hero-title {
    font-size: clamp(2.5025vh, 5.005vh, 5.005vh);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 1.375vh;
    padding: 0;
    color: #2A2D34;
    font-family: var(--font-display);
    text-align: left;
}

@media (max-width: 1024px) {
    .hero-title {
        font-size: clamp(2.86vh, 4.29vh, 4.29vh);
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(2.5025vh, 3.575vh, 3.575vh);
        margin: 0 0 1.1vh 0;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(3.4606vh, 3.893175vh, 3.893175vh); /* 10% larger (3.146vh * 1.1 = 3.4606vh, 3.53925vh * 1.1 = 3.893175vh) */
        line-height: 1.3;
        margin: 0 0 0.9625vh 0;
        text-align: center;
    }
}

@keyframes glow-radiate {
    0% {
        text-shadow: 
            0 0 0.5vh rgba(234, 209, 173, 0.3),
            0 0 1vh rgba(234, 209, 173, 0.2),
            0 0 1.5vh rgba(234, 209, 173, 0.1);
    }
    50% {
        text-shadow: 
            0 0 1.5vh rgba(234, 209, 173, 0.5),
            0 0 3vh rgba(234, 209, 173, 0.3),
            0 0 4.5vh rgba(234, 209, 173, 0.2),
            0 0 6vh rgba(234, 209, 173, 0.1);
    }
    100% {
        text-shadow: 
            0 0 0.5vh rgba(234, 209, 173, 0.3),
            0 0 1vh rgba(234, 209, 173, 0.2),
            0 0 1.5vh rgba(234, 209, 173, 0.1);
    }
}

.highlight {
    background: linear-gradient(135deg, #ead1ad 0%, #f1debf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    display: block;
    text-shadow: 0 0.125vh 0.625vh rgba(234, 209, 173, 0.2);
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0;
    text-align: left;
    animation: glow-radiate 3s ease-in-out infinite;
    position: relative;
}

@media (max-width: 480px) {
    .highlight {
        text-align: center;
    }
}


.hero-subtitle {
    font-size: clamp(1.573vh, 2.03775vh, 2.03775vh);
    font-weight: 300;
    background: linear-gradient(135deg, #ead1ad 0%, #f1debf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    font-family: var(--font-body);
    max-width: min(26.640625vw, 90vw);
    text-align: left;
    animation: glow-radiate 3s ease-in-out infinite;
    position: relative;
}

@media (max-width: 768px) {
    .hero-subtitle {
        font-size: clamp(1.1vh, 1.3585vh, 1.3585vh);
        line-height: 1.4;
        margin-bottom: 1.65vh;
    }
    
    .email-success-message {
        font-size: clamp(1.1vh, 1.3585vh, 1.3585vh); /* Match hero subtitle size */
    }
}

@media (max-width: 480px) {
    .hero-subtitle {
        font-size: clamp(1.9669381875vh, 2.23515703125vh, 2.23515703125vh);
        line-height: 1.5;
        margin: 0 auto 1.375vh auto;
        max-width: 100%;
        text-align: center;
        padding: 0 clamp(2vh, 3vh, 3vh) !important; /* Add more space on sides */
        box-sizing: border-box;
    }
}

.hero-signup {
    margin-top: 1.65vh;
    width: min(45vw, 500px) !important;
    max-width: min(45vw, 500px) !important;
    margin-left: 0;
    padding-left: 0;
    position: relative; /* Make it a positioning context for the error message */
}

@media (max-width: 768px) {
    .hero-signup {
        margin-top: 1.1vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
}

/* ============================================
   EMAIL SIGNUP FORM
   ============================================ */
.email-signup-form {
    display: flex;
    gap: 1.1vh;
    max-width: min(45vw, 500px) !important;
    width: min(45vw, 500px) !important;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .email-signup-form {
        flex-direction: column;
        gap: 0.825vh;
        max-width: 100%;
        margin: 0 auto;
        justify-content: center;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .hero-signup {
        width: 84% !important; /* 5% wider (80% * 1.05 = 84%) */
        max-width: 84% !important;
        margin: 0 auto !important;
    }
    
    .email-signup-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .email-signup-form input {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    .signup-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }
}

.email-signup-form input {
    flex: 1;
    padding: clamp(1.5246vh, 1.6335vh, 1.6335vh) clamp(1.7424vh, 2.178vw, 2.178vh);
    border: 0.125vh solid #D7B082;
    border-radius: clamp(2.75vh, 3.85vh, 3.85vh);
    font-size: clamp(1.51734vh, 1.5972vh, 1.5972vh);
    transition: all 0.3s ease;
    background: white;
    color: #2A2D34;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: clamp(4.7916vh, 5.2272vh, 5.2272vh) !important;
    min-height: clamp(4.7916vh, 5.2272vh, 5.2272vh) !important;
    touch-action: manipulation; /* Prevent double-tap zoom */
    flex-shrink: 1; /* Allow shrinking if needed */
}

@media (max-width: 768px) {
    .email-signup-form input {
        height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
        min-height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
    }
}

@media (max-width: 480px) {
    .email-signup-form input {
        padding: clamp(1.188vh, 1.386vh, 1.386vh) clamp(1.386vh, 1.584vw, 1.584vh);
        font-size: clamp(1.3068vh, 1.3794vh, 1.3794vh);
        height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
        min-height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
        max-width: 100%;
        width: 100%;
        text-align: center !important; /* Center placeholder text on mobile */
    }
}

.email-signup-form input:focus {
    outline: none;
    border-color: #D7B082;
    box-shadow: 0 0 0 clamp(0.125vh, 0.1875vh, 0.1875vh) rgba(215, 176, 130, 0.2);
}

.signup-btn {
    background: linear-gradient(90deg, #d7b082 0%, #d7b082 50%, #d7b082 100%);
    background-size: 200% 100%;
    color: #F8F8F8;
    border: none;
    padding: clamp(1.5246vh, 1.6335vh, 1.6335vh) clamp(2.6136vh, 4.356vw, 4.356vh);
    border-radius: clamp(2.75vh, 3.85vh, 3.85vh);
    font-size: clamp(1.91664vh, 2.108304vh, 2.108304vh);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8712vh, 1.089vh, 1.089vh);
    font-family: var(--font-body);
    white-space: nowrap;
    height: clamp(4.7916vh, 5.2272vh, 5.2272vh) !important;
    min-height: clamp(4.7916vh, 5.2272vh, 5.2272vh) !important;
    touch-action: manipulation;
    flex-shrink: 0;
    width: clamp(16.72704vh, 20.9088vw, 20.9088vh);
    position: relative;
    overflow: hidden;
    animation: flow-gradient 5s ease-in-out infinite;
}

.signup-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 300%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        transparent 15%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.15) 35%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 65%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 85%,
        transparent 100%);
    animation: flow-sweep 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; /* Softer, smoother transition */
}

@keyframes flow-gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes flow-sweep {
    0% {
        left: -200%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

@media (max-width: 768px) {
    .signup-btn {
        height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
        min-height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
    }
}

@media (max-width: 480px) {
    .signup-btn {
        width: 100%;
        justify-content: center;
        padding: clamp(1.188vh, 1.386vh, 1.386vh) clamp(1.584vh, 2.376vw, 2.376vh);
        font-size: clamp(1.820808vh, 1.91664vh, 1.91664vh);
        height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
        min-height: clamp(4.356vh, 4.752vh, 4.752vh) !important;
    }
}

.signup-btn:hover {
    background: #2A2D34;
    box-shadow: 0 0.125vh 0.5vh rgba(0, 0, 0, 0.08);
    animation: none;
}

.signup-btn:hover::before {
    animation: none;
    opacity: 0;
}

.email-success-message {
    position: absolute; /* Position absolutely so it doesn't affect spacing */
    top: 100%; /* Position directly below the form */
    left: clamp(1vw, 2vw, 2vw); /* Move to the right a little */
    margin-top: clamp(0.5vh, 0.75vh, 0.75vh); /* Small gap from form */
    text-align: left;
    color: #D7B082;
    font-family: var(--font-display);
    font-size: clamp(1.26vh, 1.63vh, 1.63vh); /* 20% smaller (1.573vh * 0.8 = 1.26vh, 2.03775vh * 0.8 = 1.63vh) */
    opacity: 0;
    transform: translateY(clamp(-0.5vh, -0.625vh, -0.625vh));
    transition: opacity 0.4s ease, transform 0.4s ease;
    min-height: clamp(2.5vh, 3vh, 3vh);
    height: auto; /* Allow height to expand to fit content */
    line-height: 1.4; /* Tighter line height for better single line display */
    overflow: hidden; /* Hide overflow to prevent more than 2 lines */
    visibility: hidden;
    width: calc(100% - clamp(1vw, 2vw, 2vw)); /* Adjust width to account for left margin */
    max-width: min(19.53125vw, 90vw);
    display: block; /* Changed from flex to block for better text wrapping control */
    word-wrap: break-word; /* Allow long words to wrap */
    white-space: normal; /* Allow text to wrap naturally - will be one line if space allows */
    max-height: calc(clamp(1.26vh, 1.63vh, 1.63vh) * 1.4 * 2); /* Max height for 2 lines */
    pointer-events: none; /* Don't interfere with clicks */
    z-index: 10; /* Ensure it appears above other content */
}

.email-success-message.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

@media (max-width: 480px) {
    .email-success-message {
        position: absolute; /* Keep absolute positioning on mobile */
        top: 100%; /* Position directly below the form */
        left: 0; /* No left margin on mobile */
        margin-top: clamp(0.5vh, 0.75vh, 0.75vh); /* Small gap from form */
        text-align: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        font-size: clamp(1.57vh, 1.79vh, 1.79vh); /* 20% smaller (1.9669381875vh * 0.8 = 1.57vh, 2.23515703125vh * 0.8 = 1.79vh) */
        height: auto; /* Allow height to expand to fit content */
        overflow: hidden; /* Hide overflow to prevent more than 2 lines */
        word-wrap: break-word; /* Allow long words to wrap */
        white-space: normal; /* Allow text to wrap */
        max-height: calc(clamp(1.57vh, 1.79vh, 1.79vh) * 1.4 * 2); /* Max height for 2 lines */
    }
}

/* ============================================
   HOW IT WORKS SECTION (STATIC GRID)
   ============================================ */
.how-it-works {
    padding: clamp(1vh, 1.5vh, 1.5vh) 0 clamp(4vh, 6vh, 6vh) 0;
    padding-top: clamp(13vh, 15vh, 15vh);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* (Divider between section 2 and 3 removed by request) */

@media (min-width: 769px) {
    .how-it-works {
        padding-top: clamp(13vh, 15vh, 15vh);
    }
}

@media (max-width: 768px) {
    .how-it-works {
        padding: clamp(4vh, 5vh, 5vh) 0 clamp(3.5vh, 4.5vh, 4.5vh) 0;
    }
}

@media (max-width: 480px) {
    .how-it-works {
        padding: clamp(0.75vh, 1vh, 1vh) 0 clamp(4.5vh, 5.5vh, 5.5vh) 0;
    }
}

.how-it-works-title {
    font-size: clamp(3.39625vh, 5.434vh, 5.434vh);
    font-weight: 600;
    color: #2A2D34;
    text-align: center;
    margin-top: clamp(0.5vh, 0.75vh, 0.75vh);
    margin-bottom: 3vh;
    font-family: var(--font-display);
    line-height: 1.1;
}

@media (min-width: 769px) {
    .how-it-works-title {
        font-size: clamp(3.76vh, 6.02vh, 6.02vh) !important; /* Slightly bigger (~6% increase from previous) */
    }
    
    .how-it-works-subtitle {
        font-size: clamp(1.80vh, 2.33vh, 2.33vh) !important; /* Decreased by ~8% (1.96vh * 0.92 = 1.80vh, 2.53vh * 0.92 = 2.33vh) */
        margin: -1.5vh auto 6vh auto !important; /* Reduced space after subheader on web */
    }
    
    /* More space after subheader in section 3 (static section) before boxes */
    .how-it-works:not(.how-it-works--scrollable) .how-it-works-subtitle {
        margin-bottom: 7.5vh !important; /* Increased from 6vh to 7.5vh */
    }
    
    .hero-subtitle {
        font-size: clamp(2.1405384vh, 2.7729702vh, 2.7729702vh) !important; /* 10% larger (1.945944vh * 1.1 = 2.1405384vh, 2.520882vh * 1.1 = 2.7729702vh) */
        margin-bottom: 6vh !important; /* Match spacing with section 2 */
    }
}

.works-gradient {
    color: #D7B082;
}

@media (max-width: 768px) {
    .how-it-works-title {
        font-size: clamp(2.717vh, 4.433vh, 4.433vh);
        margin-bottom: 2.5vh;
        padding: 0 clamp(0.75vh, 1vh, 1vh);
    }
}

@media (max-width: 480px) {
    .how-it-works-title {
        font-size: clamp(3.2604vh, 4.0755vh, 4.0755vh);
        margin-bottom: 2.5vh;
        padding: 0 clamp(0.5vh, 0.5vh, 0.5vh);
        line-height: 1.2;
    }
}

.how-it-works-subtitle {
    font-size: clamp(1.3585vh, 1.759875vh, 1.759875vh);
    font-weight: 300;
    color: #2A2D34;
    margin: -1.5vh auto 6vh auto; /* Reduced space below subheader */
    padding: 0 clamp(1vh, 2vh, 2vh);
    line-height: 1.6;
    font-family: var(--font-body);
    max-width: min(39.0625vw, 95vw);
    text-align: center;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    .how-it-works-subtitle {
        font-size: clamp(1.235vh, 1.525225vh, 1.525225vh);
        line-height: 1.4;
        margin: -1.5vh auto 3vh auto;
        padding: 0 clamp(0.75vh, 1vh, 1vh) !important; /* Match header padding */
        max-width: 100% !important; /* Remove max-width constraint to span full width like header */
        width: 100% !important; /* Ensure full width */
    }
}

@media (max-width: 480px) {
    .how-it-works-subtitle {
        font-size: clamp(1.62vh, 1.84vh, 1.84vh) !important; /* Reduced by ~5-6% from previous */
        line-height: 1.5;
        margin: -1.25vh auto 2.5vh auto; /* more space on mobile */
        padding: 0 clamp(2vh, 3vh, 3vh) !important; /* More padding on sides */
        max-width: 100% !important; /* Remove max-width constraint to span full width like header */
        width: 100% !important; /* Ensure full width */
    }
}

.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(clamp(24vh, 24vh, 32vh), clamp(29vh, 32vh, 32vh))); /* Less wide boxes (reduced from 27.37vh/36.5vh and 33.45vh/36.5vh) */
    grid-auto-rows: clamp(36vh, 42vh, 42vh) !important; /* Force all grid rows to be much longer (increased from 28.8vh/33.12vh) */
    gap: clamp(1.2vh, 1.6vh, 1.6vh); /* Slightly less space between boxes (reduced from 1.5vh/2vh) */
    max-width: min(51.5625vw, 95vw);
    width: 100%;
    margin: clamp(0.5vh, 0.75vh, 0.75vh) auto 0; /* Reduced space above boxes */
    padding: 0;
    box-sizing: border-box;
    justify-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    .how-it-works-grid {
        gap: clamp(15vh, 20vh, 20vh) !important; /* Less space between boxes (reduced from 18vh/24vh) */
        margin-top: clamp(1.725vh, 2.3vh, 2.3vh) !important; /* A tiny bit more space before boxes on web (increased from clamp(1.5vh, 2vh, 2vh)) */
    }
    
    .hero-content {
        margin-top: clamp(8vh, 12vh, 12vh) !important;
        margin-left: calc((var(--nav-footer-padding) + var(--nav-footer-padding) + 2vh - clamp(11.25vw, 15vw, 15vw)) * 1.4 + 5vw) !important;
        padding-left: calc(var(--nav-footer-padding) + 5vw) !important;
    }
}

/* Increase max-width for larger screens to reduce white space */
@media (min-width: 1920px) {
    .how-it-works-grid {
        max-width: min(68.75vw, 90vw); /* 10% wider boxes (62.5vw * 1.1 = 68.75vw) */
    }
    
    .navbar-inner.layout-shell {
        max-width: min(65vw, 90vw) !important;
    }
}

@media (min-width: 2560px) {
    .how-it-works-grid {
        max-width: min(85.9375vw, 93.5vw); /* 10% wider boxes (78.125vw * 1.1 = 85.9375vw, 85vw * 1.1 = 93.5vw) */
    }
    
    .navbar-inner.layout-shell {
        max-width: min(65vw, 90vw) !important;
    }
}

@media (max-width: 1024px) {
    .how-it-works-grid {
        grid-template-columns: repeat(2, minmax(clamp(15vh, 15vh, 20vh), 1fr));
        padding: 0 clamp(2.5vh, 5.86vh, 3.75vh);
        gap: clamp(1vh, 1.5vh, 1.5vh);
    }
}

@media (max-width: 768px) {
    .how-it-works-grid {
        grid-template-columns: 1fr;
        padding: 0 clamp(2vh, 5.21vh, 2.5vh);
        gap: clamp(1vh, 1.5vh, 1.5vh);
    }
}

@media (max-width: 480px) {
    .how-it-works-grid {
        padding: 0 clamp(1vh, 4.17vh, 1.25vh);
        gap: clamp(1.25vh, 1.75vh, 1.75vh);
        grid-auto-rows: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* 10% less (43.56vh * 0.9 = 39.204vh, 50.82vh * 0.9 = 45.738vh) */
        margin-top: clamp(4vh, 5vh, 5vh) !important; /* A tiny bit more space before first box (increased from clamp(3.5vh, 4.5vh, 4.5vh)) */
    }
}

.how-it-works-box {
    background: #FFFFFF;
    border-radius: clamp(1.04vh, 1.3vh, 1.3vh);
    padding: clamp(1.3vh, 2.08vh, 2.08vh) clamp(1.04vh, 1.3vw, 1.3vh);
    border: none;
    box-shadow: inset 0 0.065vh 0.78vh rgba(234, 209, 173, 0.35),
                0 clamp(0.39vh, 0.52vh, 0.52vh) clamp(1.3vh, 1.56vh, 1.56vh) rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align all elements to the top */
    text-align: center;
    /* Boxes will never be smaller than their content - use min-height only */
    min-height: clamp(36vh, 42vh, 42vh) !important; /* Much longer boxes (increased from 28.8vh/33.12vh) */
    height: clamp(36vh, 42vh, 42vh) !important; /* Force height to be much longer */
    max-height: none; /* No maximum height restriction */
    width: 100%;
    box-sizing: border-box;
    gap: 0;
    /* Reduced top padding, normal side and bottom padding - 15% smaller */
    padding: clamp(0.425vh, 0.68vh, 0.68vh) clamp(0.884vh, 1.105vw, 1.105vh) clamp(1.275vh, 1.7vh, 1.7vh) clamp(0.884vh, 1.105vw, 1.105vh);
    border-radius: clamp(0.884vh, 1.105vh, 1.105vh); /* 15% smaller */
    overflow: visible; /* Ensure content is not clipped */
}

@media (max-width: 768px) {
    .how-it-works-box {
        /* Let boxes size naturally to fit their content */
        height: clamp(36vh, 42vh, 42vh) !important; /* Force height to be much longer (increased from 24vh/27.6vh) */
        min-height: clamp(36vh, 42vh, 42vh) !important; /* Much longer boxes */
        max-height: none !important;
        padding: clamp(1.17vh, 1.82vh, 1.82vh) clamp(1.04vh, 1.3vw, 1.3vh);
        box-sizing: border-box !important;
    }
    
    /* Force all boxes in grid to be taller */
    .how-it-works-grid .how-it-works-box {
        height: clamp(36vh, 42vh, 42vh) !important;
        min-height: clamp(36vh, 42vh, 42vh) !important;
    }
}

@media (max-width: 480px) {
    /* Base box styles for mobile */
    .how-it-works-box {
        padding: clamp(0.893025vh, 1.3395375vh, 1.3395375vh) clamp(0.66976875vh, 0.893025vw, 0.893025vh); /* 10% smaller padding */
        border-radius: clamp(0.875vh, 1vh, 1vh);
        max-width: 92vw !important; /* Wider boxes on mobile (increased from 85vw) */
        width: 100%;
    }
    
    /* Override base and 768px height rules - set to 10% less (43.56vh * 0.9 = 39.204vh, 50.82vh * 0.9 = 45.738vh) */
    .how-it-works-box,
    .how-it-works-grid .how-it-works-box {
        min-height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* 10% less */
        height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* 10% less */
        max-height: none !important;
    }
    
    /* Ensure all three boxes in grid are 10% less - highest specificity */
    .how-it-works-grid .how-it-works-box:nth-child(1),
    .how-it-works-grid .how-it-works-box:nth-child(2),
    .how-it-works-grid .how-it-works-box:nth-child(3) {
        min-height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* 10% less (43.56vh * 0.9 = 39.204vh, 50.82vh * 0.9 = 45.738vh) */
        height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* Force height - 10% less */
        max-height: none !important; /* No maximum restriction */
        width: 100% !important;
        max-width: 100% !important;
    }
}


.step-number {
    width: clamp(3.978vh, 4.14375vh, 4.14375vh); /* 15% smaller */
    height: clamp(3.978vh, 4.14375vh, 4.14375vh); /* 15% smaller */
    background: transparent;
    color: #5A7D5A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.82325vh, 2.0553vh, 2.0553vh); /* 15% smaller */
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: clamp(0.425vh, 0.595vh, 0.595vh); /* 15% smaller */
    margin-top: 0; /* Will be overridden by nth-child rule for consistency */
    flex-shrink: 0;
    border: clamp(0.2071875vh, 0.258984375vh, 0.258984375vh) solid #5A7D5A; /* 15% smaller */
    box-shadow: 0 clamp(0.1625vh, 0.203125vh, 0.203125vh) clamp(0.4875vh, 0.609375vh, 0.609375vh) rgba(90, 125, 90, 0.2);
    text-align: center;
    line-height: 1;
    padding: 0;
}

/* Ensure all three boxes have minimum height but can grow to fit content */
.how-it-works-grid .how-it-works-box:nth-child(1),
.how-it-works-grid .how-it-works-box:nth-child(2),
.how-it-works-grid .how-it-works-box:nth-child(3) {
    min-height: clamp(36vh, 42vh, 42vh) !important; /* Much longer boxes (increased from 28.8vh/33.12vh) */
    height: clamp(36vh, 42vh, 42vh) !important; /* Force height to be much longer */
    max-height: none !important; /* No maximum restriction */
    width: 100% !important;
    padding: clamp(0.425vh, 0.68vh, 0.68vh) clamp(0.884vh, 1.105vw, 1.105vh) clamp(1.275vh, 1.7vh, 1.7vh) clamp(0.884vh, 1.105vw, 1.105vh) !important; /* 15% smaller */
}

/* Mobile override - MUST come after base rule to override it */
@media (max-width: 480px) {
    /* Override ALL box height rules for mobile - highest specificity, comes after base rules */
    .how-it-works-box {
        min-height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* 10% less */
        height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* Force height - 10% less */
        max-height: none !important; /* No maximum restriction */
    }
    
    .how-it-works-grid .how-it-works-box {
        min-height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* 10% less */
        height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* Force height - 10% less */
        max-height: none !important; /* No maximum restriction */
    }
    
    .how-it-works-grid .how-it-works-box:nth-child(1),
    .how-it-works-grid .how-it-works-box:nth-child(2),
    .how-it-works-grid .how-it-works-box:nth-child(3) {
        min-height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* 10% less (43.56vh * 0.9 = 39.204vh, 50.82vh * 0.9 = 45.738vh) */
        height: clamp(39.204vh, 45.738vh, 45.738vh) !important; /* Force height - 10% less */
        max-height: none !important; /* No maximum restriction */
    }
}

/* Ensure all three boxes have exactly the same number alignment and spacing */
.how-it-works-grid .how-it-works-box:nth-child(1) .step-number,
.how-it-works-grid .how-it-works-box:nth-child(2) .step-number,
.how-it-works-grid .how-it-works-box:nth-child(3) .step-number {
    margin-top: clamp(1.275vh, 1.7vh, 1.7vh) !important; /* 15% smaller */
    margin-bottom: clamp(0.425vh, 0.595vh, 0.595vh) !important; /* 15% smaller */
}

.step-title {
    font-size: clamp(1.31274vh, 1.53153vh, 1.53153vh); /* 15% smaller */
    font-weight: 600; /* Match the boldness of "discover" text (how-it-works-title has font-weight: 600) */
    color: #2A2D34;
    font-family: var(--font-display);
    line-height: 1.4;
    margin-bottom: clamp(0.255vh, 0.34vh, 0.34vh); /* 15% smaller */
    margin-top: 0;
    letter-spacing: 0.015em;
    text-align: center;
    width: 100%;
    padding: 0 clamp(0.414375vh, 0.5525vh, 0.5525vh); /* 15% smaller */
    box-sizing: border-box;
    min-height: 2.975em; /* 15% smaller (3.5 * 0.85 = 2.975) */
    height: 2.975em; /* 15% smaller */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal; /* Allow text wrapping if needed */
}

@media (min-width: 769px) {
    .step-title {
        font-size: clamp(1.7328168vh, 2.0216166vh, 2.0216166vh); /* 15% smaller */
    }
}

.tongue-scan-image {
    width: min(6.59736vw, 9.59616vh) !important; /* Base size before scaling */
    min-width: min(6.59736vw, 9.59616vh) !important;
    max-width: min(6.59736vw, 9.59616vh) !important;
    height: auto; /* keep original image size */
    margin: clamp(0.255vh, 0.34vh, 0.34vh) auto 0; /* 15% smaller */
    border-radius: clamp(0.255vh, 0.34vh, 0.34vh); /* 15% smaller */
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    align-self: center;
    transform: scale(1.3) !important; /* Scale images up by 30% visually */
    transform-origin: center; /* Scale from center */
}

/* Ensure all step-titles have identical spacing for consistent image positioning */
.how-it-works-grid .how-it-works-box:nth-child(1) .step-title,
.how-it-works-grid .how-it-works-box:nth-child(2) .step-title,
.how-it-works-grid .how-it-works-box:nth-child(3) .step-title {
    margin-bottom: clamp(3vh, 3.5vh, 3.5vh) !important; /* More space after text to move images down (increased from 2.5vh/3vh) */
    height: 2.975em !important; /* 15% smaller */
    min-height: 2.975em !important; /* 15% smaller */
}

/* Align all images at the exact same position - match second box exactly */
.how-it-works-grid .how-it-works-box:nth-child(1) .tongue-scan-image,
.how-it-works-grid .how-it-works-box:nth-child(2) .tongue-scan-image,
.how-it-works-grid .how-it-works-box:nth-child(3) .tongue-scan-image {
    width: min(6.59736vw, 9.59616vh) !important; /* Base size before scaling */
    min-width: min(6.59736vw, 9.59616vh) !important;
    max-width: min(6.59736vw, 9.59616vh) !important;
    transform: scale(1.3) !important; /* Scale images up by 30% visually */
    transform-origin: center; /* Scale from center */
    margin-top: clamp(1vh, 1.5vh, 1.5vh) !important; /* More padding on top of images (increased from 0.255vh/0.34vh) */
    vertical-align: top;
}

@media (max-width: 480px) {
    .tongue-scan-image {
        width: min(18.1926vw, 26.4708vh) !important; /* 10% smaller (20.214vw * 0.9 = 18.1926vw, 29.412vh * 0.9 = 26.4708vh) */
        min-width: min(18.1926vw, 26.4708vh) !important; /* Ensure minimum size */
        max-width: min(18.1926vw, 26.4708vh) !important; /* 10% smaller */
    }
    
    /* First two boxes: 10% smaller */
    .how-it-works-grid .how-it-works-box:nth-child(1) .tongue-scan-image,
    .how-it-works-grid .how-it-works-box:nth-child(2) .tongue-scan-image {
        width: min(21.8376vw, 31.7601vh) !important; /* 10% smaller (24.264vw * 0.9 = 21.8376vw, 35.289vh * 0.9 = 31.7601vh) */
        min-width: min(21.8376vw, 31.7601vh) !important; /* Ensure minimum size */
        max-width: min(21.8376vw, 31.7601vh) !important; /* 10% smaller */
        margin-top: clamp(0.8vh, 1vh, 1vh) !important; /* Aligned at the top */
    }
    
    /* Third box: 10% smaller */
    .how-it-works-grid .how-it-works-box:nth-child(3) .tongue-scan-image {
        width: min(23.6601vw, 34.4088vh) !important; /* 10% smaller (26.289vw * 0.9 = 23.6601vw, 38.232vh * 0.9 = 34.4088vh) */
        min-width: min(23.6601vw, 34.4088vh) !important; /* Ensure minimum size */
        max-width: min(23.6601vw, 34.4088vh) !important; /* 10% smaller */
        margin-top: clamp(0.8vh, 1vh, 1vh) !important; /* Aligned at the top */
    }
    
    /* Ensure step-title has consistent height on mobile */
    .how-it-works-box .step-title {
        min-height: 4em;
        margin-bottom: clamp(0.5vh, 0.7vh, 0.7vh); /* Reduced spacing */
    }
    
    /* Ensure step-number has consistent margin on mobile */
    .how-it-works-box .step-number {
        margin-bottom: clamp(0.7vh, 0.875vh, 0.875vh); /* Reduced spacing */
        margin-top: clamp(1vh, 1.25vh, 1.25vh) !important; /* Aligned for all boxes */
    }
    
    /* Ensure all three boxes have the same number alignment on mobile */
    .how-it-works-grid .how-it-works-box:nth-child(1) .step-number,
    .how-it-works-grid .how-it-works-box:nth-child(2) .step-number,
    .how-it-works-grid .how-it-works-box:nth-child(3) .step-number {
        margin-top: clamp(1vh, 1.25vh, 1.25vh) !important;
    }
}

@media (max-width: 480px) {
    .step-title {
        font-size: clamp(1.8vh, 2.1vh, 2.1vh) !important; /* Increased size (was 1.403325vh/1.55925vh, now ~30% larger) */
        line-height: 1.4;
        padding: 0 clamp(0.375vh, 0.5vh, 0.5vh);
        color: #2A2D34;
        font-weight: 300;
    }
    
    .step-number {
        width: clamp(3.5vh, 4vh, 4vh) !important; /* Increased size (was 2.7216vh/2.9484vh, now ~30% larger) */
        height: clamp(3.5vh, 4vh, 4vh) !important;
        font-size: clamp(1.7vh, 2vh, 2vh) !important; /* Increased size (was 1.27008vh/1.40616vh, now ~30% larger) */
        margin-bottom: clamp(1vh, 1.25vh, 1.25vh);
    }
}

/* ============================================
   HOW IT WORKS - SCROLLABLE / CAROUSEL
   ============================================ */
/* Full-width band for the “healing naturally” section */
.how-it-works--scrollable {
    align-items: stretch;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(13vh, 15vh, 15vh) 0 clamp(2vh, 3vh, 3vh) 0;
    position: relative;
}

@media (min-width: 769px) {
    .how-it-works--scrollable {
        padding: clamp(13vh, 15vh, 15vh) 0 clamp(2vh, 3vh, 3vh) 0 !important;
    }
}

@media (max-width: 768px) {
    .how-it-works--scrollable {
        padding: clamp(6vh, 7vh, 7vh) 0;
    }
}

/* Slight tweak for very small screens */
@media (max-width: 480px) {
    .how-it-works--scrollable {
        padding: clamp(6.3vh, 7.65vh, 7.65vh) 0 clamp(8vh, 10vh, 10vh) 0;
    }

    .how-it-works-scroll {
        margin-top: clamp(5vh, 6.5vh, 6.5vh) !important;
    }
}

/* Container that holds the moving strip */
.how-it-works-scroll {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: clamp(3vh, 4vh, 4vh);
    height: clamp(15.33312vh, 15.5727vh, 15.5727vh);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile height */
@media (max-width: 480px) {
    .how-it-works-scroll {
        height: auto;
        aspect-ratio: 1.24 / 1;
    }
}

/* Web height */
@media (min-width: 769px) {
    .how-it-works-scroll {
        height: clamp(23.85vh, 29.60058816vh, 29.60058816vh);
    }
}

.how-it-works-scroll::-webkit-scrollbar {
    display: none;
}

/* Carousel video */
.how-it-works-scroll .carousel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 50%;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: clamp(0.625vh, 0.75vh, 0.75vh);
    position: relative;
    z-index: 1;
}

/* Desktop-only extra rounding */
@media (min-width: 769px) {
    .how-it-works-scroll .carousel-video {
        border-radius: 1.5%;
        clip-path: inset(0 round 1.5%);
        -webkit-clip-path: inset(0 round 1.5%);
    }
}

/* Carousel navigation arrows - positioned absolutely within container */
.how-it-works-scroll .carousel-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(42, 45, 52, 0.3) !important;
    border-radius: 50% !important;
    width: clamp(4vh, 5vh, 5vh) !important;
    height: clamp(4vh, 5vh, 5vh) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: all 0.3s ease;
    color: #2A2D34 !important;
    font-size: clamp(1.5vh, 2vh, 2vh) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto !important;
    opacity: 0.8 !important;
    margin: 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    outline: none !important;
}

.how-it-works-scroll .carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(42, 45, 52, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-50%) scale(1.1) !important;
    opacity: 1 !important;
}

.how-it-works-scroll .carousel-arrow:active {
    transform: translateY(-50%) scale(0.95) !important;
}

.how-it-works-scroll .carousel-arrow-left {
    left: clamp(1vh, 2vh, 2vh) !important;
    right: auto !important;
}

.how-it-works-scroll .carousel-arrow-right {
    right: clamp(1vh, 2vh, 2vh) !important;
    left: auto !important;
}

@media (min-width: 769px) {
    .how-it-works-scroll .carousel-arrow {
        width: clamp(5vh, 6vh, 6vh) !important;
        height: clamp(5vh, 6vh, 6vh) !important;
        font-size: clamp(2vh, 2.5vh, 2.5vh) !important;
    }
    
    .how-it-works-scroll .carousel-arrow-left {
        left: clamp(2vh, 3vh, 3vh) !important;
    }
    
    .how-it-works-scroll .carousel-arrow-right {
        right: clamp(2vh, 3vh, 3vh) !important;
    }
}

/* Cards inside scrolling row */
.how-it-works--scrollable .how-it-works-box {
    flex: 0 0 clamp(15.972vh, 26.62vh, 21.296vh); /* 10% larger (14.52 * 1.1 = 15.972, 24.2 * 1.1 = 26.62, 19.36 * 1.1 = 21.296) */
    position: relative;
    overflow: hidden;
    margin-right: clamp(0.5vh, 0.75vh, 0.75vh); /* Matched from mobile */
    padding: 0;
    min-height: clamp(17.0368vh, 17.303vh, 17.303vh); /* 10% larger (15.488 * 1.1 = 17.0368, 15.73 * 1.1 = 17.303) */
    box-shadow: none;
    border-radius: clamp(0.625vh, 0.75vh, 0.75vh); /* Matched from mobile */
    background: transparent;
    will-change: transform; /* Optimize for animation */
    color: transparent; /* Hide any text */
    font-size: 0; /* Hide any text */
    flex-shrink: 0; /* Prevent boxes from shrinking */
}

@media (min-width: 769px) {
    .how-it-works--scrollable .how-it-works-box {
        flex: 0 0 clamp(24.6671568vh, 41.111928vh, 32.8895424vh) !important; /* 50% larger on web (20% + 30%) */
        min-height: auto !important; /* Let height be determined by aspect ratio */
        max-height: none !important;
        aspect-ratio: 1.24 / 1 !important; /* Match mobile aspect ratio */
        height: auto !important; /* Let height be determined by aspect ratio */
        margin-right: clamp(5vh, 6vh, 6vh) !important; /* Large spacing between videos on web to prevent overlap and show rounded edges */
        border-radius: 1.5% !important; /* Percentage-based border-radius to match mobile proportions */
        box-shadow: none !important; /* Matched from mobile */
        background: transparent !important; /* Matched from mobile */
        overflow: hidden !important; /* Keep overflow hidden to clip video to border-radius */
        flex-shrink: 0 !important; /* Prevent boxes from shrinking and overlapping */
        width: auto !important; /* Ensure width is determined by flex-basis */
        isolation: isolate !important; /* Create stacking context to ensure proper clipping */
        /* Use clip-path on container as well to ensure clipping - percentage-based to match */
        clip-path: inset(0 round 1.5%) !important;
        -webkit-clip-path: inset(0 round 1.5%) !important;
    }
    
    .how-it-works--scrollable .how-it-works-box .carousel-video {
        border-radius: 1.5% !important; /* Percentage-based border-radius to match mobile proportions */
        transform: translateZ(0) !important; /* Force hardware acceleration and respect border-radius */
        -webkit-transform: translateZ(0) !important;
        /* Use clip-path as backup for videos that ignore border-radius - percentage-based to match */
        clip-path: inset(0 round 1.5%) !important;
        -webkit-clip-path: inset(0 round 1.5%) !important;
        /* Ensure video respects parent clipping */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
}

/* Hide any text content inside video boxes except labels */
.how-it-works--scrollable .how-it-works-box > *:not(.carousel-video):not(.carousel-label) {
    display: none;
}

/* Carousel video labels */
.carousel-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(2.5vh, 3.5vh, 3.5vh) !important; /* Override font-size: 0 from parent */
    font-weight: 700;
    color: #FFFFFF !important; /* White text for better visibility - override transparent */
    z-index: 1000 !important; /* Very high z-index to appear above video and overlays */
    pointer-events: none;
    font-family: var(--font-display);
    text-transform: capitalize;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 255, 255, 0.2); /* Soft glow behind text */
    display: block !important; /* Ensure it's visible */
    white-space: nowrap;
    opacity: 1 !important; /* Ensure full opacity */
    text-indent: 0 !important; /* Override negative text-indent from parent */
}

@media (max-width: 768px) {
    .carousel-label {
        font-size: clamp(2vh, 2.5vh, 2.5vh) !important; /* Larger text on mobile (~52% larger: 1.32vh * 1.52 = 2vh, 1.65vh * 1.52 = 2.5vh) */
    }
}

@media (max-width: 768px) {
    .how-it-works--scrollable .how-it-works-box {
        flex: 0 0 clamp(20vh, 30vh, 25vh) !important; /* Much larger videos on mobile (increased from 12.5vh/17.5vh) */
        min-height: clamp(20vh, 30vh, 25vh) !important; /* Much taller videos on mobile */
        margin-right: clamp(0.75vh, 1vh, 1vh);
        border-radius: clamp(0.875vh, 1vh, 1vh);
        box-shadow: none !important; /* Removed background shadow */
    }
}

@media (max-width: 480px) {
    .how-it-works--scrollable .how-it-works-box {
        flex: 0 0 46.75vw !important; /* 10% bigger videos on mobile (42.5vw * 1.1 = 46.75vw) */
        width: 46.75vw !important; /* 10% bigger width */
        min-width: 46.75vw !important; /* Ensure minimum width */
        max-width: 46.75vw !important; /* Ensure maximum width */
        aspect-ratio: 1.24 / 1 !important; /* Same aspect ratio as web (32.89vh / 26.5vh ≈ 1.24) */
        height: auto !important; /* Let height be determined by aspect ratio */
        min-height: auto !important;
        max-height: none !important;
        margin-right: clamp(0.5vh, 0.75vh, 0.75vh) !important;
        border-radius: clamp(0.625vh, 0.75vh, 0.75vh) !important;
        box-shadow: none !important; /* Removed background shadow */
    }
}


.how-it-works-track .how-it-works-box:last-child {
    margin-right: 0;
}

/* Video fills each card */
.carousel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Lower z-index so label appears above */
    border-radius: clamp(0.625vh, 0.75vh, 0.75vh); /* Explicit border-radius to match container */
    /* Performance optimizations for smoother playback */
    will-change: transform, contents; /* Optimize for transforms and content changes */
    backface-visibility: hidden; /* Prevent flickering during animations */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    isolation: isolate; /* Create new stacking context */
    contain: layout style paint; /* Optimize rendering containment */
}

/* Soft overlay on video boxes - removed background */
.how-it-works--scrollable .how-it-works-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
}

.how-it-works--scrollable .how-it-works-box::after {
    display: none;
    content: none;
}

/* Ensure no text is visible in carousel video boxes */
.how-it-works--scrollable .how-it-works-box {
    color: transparent;
    text-indent: -390.625vw;
}

.how-it-works--scrollable .how-it-works-box *:not(.carousel-label) {
    color: transparent !important;
    text-indent: -390.625vw;
}

/* Fade edges - removed blur, keeping gradient fade */
.how-it-works-scroll::before,
.how-it-works-scroll::after {
    display: none;
}

.how-it-works-scroll::before {
    left: 0;
    background: linear-gradient(90deg, rgba(242, 239, 234, 0) 0%, rgba(242, 239, 234, 0.15) 25%, rgba(242, 239, 234, 0.35) 50%, rgba(242, 239, 234, 0.6) 75%, rgba(242, 239, 234, 0.85) 100%);
}

.how-it-works-scroll::after {
    right: 0;
    background: linear-gradient(270deg, rgba(242, 239, 234, 0) 0%, rgba(242, 239, 234, 0.15) 25%, rgba(242, 239, 234, 0.35) 50%, rgba(242, 239, 234, 0.6) 75%, rgba(242, 239, 234, 0.85) 100%);
}

/* CSS marquee: content duplicated in HTML; shift by 50% of track width */
/* CSS animation removed - using JavaScript animation instead
@keyframes howItWorksMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
*/

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: #F8F8F8;
    border-top: 0.0625vh solid rgba(90, 125, 90, 0.2);
    padding: clamp(0.02vh, 0.03vh, 0.03vh) 0;
    margin-top: clamp(0.75vh, 1vh, 1vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.05vh, 0.08vh, 0.08vh);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 clamp(1.25vh, 2vh, 2vh) clamp(0.1vh, 0.15vh, 0.15vh) clamp(1.25vh, 2vh, 2vh);
    padding-right: clamp(3vh, 4vh, 4vh);
    box-sizing: border-box;
    position: relative;
}

.footer-social {
    flex: 0 0 auto;
    display: flex;
    gap: clamp(1vh, 1.5vh, 1.5vh);
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.footer-links {
    flex: 0 0 auto;
    display: flex;
    gap: clamp(1vh, 1.5vh, 1.5vh);
    align-items: center; /* Center vertically to match copyright text */
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    align-self: center; /* Vertically align with the middle copyright text */
    height: 100%; /* Match height of footer content */
}

.footer-copyright {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #2A2D34;
    font-size: clamp(1.314144vh, 1.51632vh, 1.51632vh); /* 53% larger (70% - 10%) */
    letter-spacing: 0.05em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: clamp(0.675vh, 0.9vh, 0.9vh);
        padding: 0 clamp(1vh, 1.5vh, 1.5vh);
        padding-right: clamp(3vh, 4vh, 4vh);
    }
    
    .footer-copyright {
        order: 3;
        width: 100%;
        position: static;
        transform: none;
        font-size: clamp(1.314144vh, 1.415232vh, 1.415232vh); /* 53% larger */
    }
    
    .footer-links {
        flex-direction: row;
        gap: clamp(1vh, 1.5vh, 1.5vh);
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .footer-social {
        justify-content: center;
        margin-bottom: clamp(-0.25vh, -0.25vh, -0.25vh);
        gap: clamp(1vh, 1.5vh, 1.5vh);
    }
}

@media (max-width: 480px) {
    .footer-content {
        gap: clamp(0.06vh, 0.1vh, 0.1vh);
        padding: 0 clamp(0.75vh, 1vh, 1vh);
        padding-right: clamp(2.5vh, 3.5vh, 3.5vh);
        padding-bottom: clamp(1vh, 1.5vh, 1.5vh) !important; /* Decreased bottom padding for mobile */
    }
    
    .site-footer {
        padding: clamp(0.02vh, 0.03vh, 0.03vh) 0 clamp(1vh, 1.5vh, 1.5vh) 0 !important; /* Decreased bottom padding for mobile */
    }
    
    .footer-copyright {
        font-size: clamp(1.4vh, 1.6vh, 1.6vh) !important; /* Increased text size for mobile (50% larger than before) */
        line-height: 1.4;
    }
    
    .footer-links {
        flex-direction: row;
        gap: clamp(1vh, 1.5vh, 1.5vh);
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .footer-social {
        gap: clamp(1vh, 1.5vh, 1.5vh);
    }
    
    .footer-link {
        font-size: clamp(1.08vh, 1.188vh, 1.188vh);
        white-space: nowrap;
    }
}

.social-icon {
    color: #2A2D34;
    font-size: clamp(1.8954vh, 2.19024vh, 2.19024vh);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(4.212vh, 4.6332vh, 4.6332vh); /* 53% larger (70% - 10%) */
    height: clamp(4.212vh, 4.6332vh, 4.6332vh); /* 53% larger (70% - 10%) */
    cursor: pointer;
    touch-action: manipulation; /* Prevent double-tap zoom */
}

@media (max-width: 480px) {
    .social-icon {
        width: clamp(5.0544vh, 5.8968vh, 5.8968vh);
        height: clamp(5.0544vh, 5.8968vh, 5.8968vh);
        font-size: clamp(2.5272vh, 2.9484vh, 2.9484vh);
    }
}

.social-icon i {
    color: inherit;
}

.social-icon:hover {
    color: #5A7D5A;
    transform: translateY(clamp(-0.125vh, -0.125vh, -0.125vh));
}

.footer-link {
    color: #2A2D34;
    text-decoration: none;
    font-size: clamp(1.1934vh, 1.2636vh, 1.2636vh);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-display);
    transition: all 0.3s ease;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .footer-link {
        font-size: clamp(1.2636vh, 1.3338vh, 1.3338vh);
    }
}

.footer-link:hover {
    color: #5A7D5A;
    transform: translateY(clamp(-0.125vh, -0.125vh, -0.125vh));
}

/* ============================================
   TERMS / PRIVACY / TELEHEALTH PAGE SHELLS
   ============================================ */

/* Make navbar solid white and fixed to top on terms, privacy, and telehealth pages */
/* Target pages that contain .terms-section (used by all three page types) */
body:has(.terms-section) .navbar {
    position: fixed !important; /* Stuck to the top */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
}

body:has(.terms-section) .navbar .navbar-inner {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

body:has(.terms-section) .navbar.solid .navbar-inner {
    background: rgba(255, 255, 255, 1) !important;
}

/* Add padding to body content to account for fixed navbar */
body:has(.terms-section) .terms-section {
    padding-top: clamp(12vh, 15vh, 15vh); /* Add top padding to account for fixed navbar */
}
.terms-section {
    padding: clamp(3vh, 4vh, 4vh) clamp(5vh, 10vw, 10vh) clamp(1.5vh, 2vh, 2vh);
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.terms-container {
    max-width: min(35.15625vw, 90vw);
    margin: 0 auto;
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(135deg, rgba(234, 209, 173, 0.9), rgba(122, 191, 142, 0.55)) border-box;
    padding: clamp(2.5vh, 4vh, 4vh);
    border-radius: clamp(1vh, 1.25vh, 1.25vh);
    box-shadow: inset 0 0.0625vh 1.125vh rgba(234, 209, 173, 0.35),
                0 clamp(0.625vh, 0.75vh, 0.75vh) clamp(1.75vh, 2vh, 2vh) rgba(0, 0, 0, 0.08);
    border: 0.125vh solid transparent;
}

.terms-title {
    font-size: clamp(2vh, 3vh, 3vh);
    font-weight: 600;
    color: #2A2D34;
    margin-bottom: clamp(1.5vh, 2vh, 2vh);
    font-family: var(--font-display);
        text-align: center;
    }

.terms-content {
    color: #2A2D34;
    line-height: 1.8;
}

.terms-intro {
    font-size: clamp(0.85vh, 0.9vh, 0.9vh);
    color: #666;
    margin-bottom: 0;
    padding-bottom: 0;
    font-style: italic;
}

.terms-text {
    font-size: clamp(1vh, 1.1vh, 1.1vh);
    color: #2A2D34;
    font-family: var(--font-body);
}

.terms-text p {
    margin-bottom: clamp(1vh, 1.5vh, 1.5vh);
}

.terms-text h2 {
    font-size: clamp(1.5vh, 1.8vh, 1.8vh);
    font-weight: 600;
    color: #2A2D34;
    margin-top: clamp(1.75vh, 2.5vh, 2.5vh);
    margin-bottom: clamp(0.75vh, 1vh, 1vh);
    font-family: var(--font-display);
}

.terms-text h3 {
    font-size: clamp(1.25vh, 1.4vh, 1.4vh);
    font-weight: 600;
    color: #2A2D34;
    margin-top: clamp(1.5vh, 2vh, 2vh);
    margin-bottom: clamp(0.75vh, 1vh, 1vh);
    font-family: var(--font-display);
}

@media (max-width: 1024px) {
    .terms-section {
        padding: clamp(3vh, 4vh, 4vh) clamp(3vh, 5vw, 5vh) clamp(4vh, 6vh, 6vh);
    }
    
    .terms-container {
        padding: clamp(2vh, 3vh, 3vh);
    }
    
    .terms-title {
        font-size: clamp(2vh, 2.5vh, 2.5vh);
    }
}

@media (max-width: 768px) {
    .terms-section {
        padding: clamp(2.5vh, 3vh, 3vh) clamp(1.5vh, 2vw, 2vh) clamp(3vh, 4vh, 4vh);
    }
    
    .terms-container {
        padding: clamp(1.75vh, 2.5vh, 2.5vh);
    }
    
    .terms-title {
        font-size: clamp(1.75vh, 2vh, 2vh);
    }
    
    .terms-text {
        font-size: clamp(0.95vh, 1vh, 1vh);
    }
}

@media (max-width: 480px) {
    .terms-section {
        padding: clamp(1.5vh, 2vh, 2vh) clamp(0.75vh, 1vw, 1vh) clamp(2vh, 3vh, 3vh);
    }
    
    .terms-container {
        padding: clamp(1.25vh, 2vh, 2vh);
    }
    
    .terms-title {
        font-size: clamp(1.5vh, 1.8vh, 1.8vh);
    }
    
    .terms-text {
        font-size: clamp(0.9vh, 0.95vh, 0.95vh);
    }
}

/* ============================================
   PRACTITIONER SIGNUP FORM (if used)
   ============================================ */
.practitioner-signup-form {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    margin-top: 0;
    padding-top: 2vh;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
}

.form-group label {
    font-size: 1vh;
    font-weight: 500;
    color: #2A2D34;
    font-family: var(--font-display);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    padding: clamp(0.875vh, 0.9375vh, 0.9375vh) clamp(1vh, 1.25vw, 1.25vh);
    border: 0.125vh solid #D7B082;
    border-radius: clamp(0.625vh, 0.75vh, 0.75vh);
    font-size: clamp(0.95vh, 1vh, 1vh);
    transition: all 0.3s ease;
    background: white;
    color: #2A2D34;
    font-family: var(--font-body);
    width: 100%;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    min-height: clamp(6vh, 6.25vh, 6.25vh);
}

.phone-input-wrapper {
    display: flex;
    gap: 0.5vh;
    align-items: center;
    width: 100%;
}

.phone-input-wrapper select#countryCode {
    flex: 0 0 auto;
    padding: clamp(0.875vh, 0.9375vh, 0.9375vh) clamp(0.625vh, 0.625vw, 0.625vh);
    min-width: clamp(8.5vh, 8.75vh, 8.75vh);
    cursor: pointer;
    width: auto;
}

.phone-input-wrapper input[type="tel"] {
    flex: 1;
    width: auto;
}

@media (max-width: 480px) {
    .phone-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .phone-input-wrapper select#countryCode {
        width: 100%;
        min-width: 100%;
    }
    
    .phone-input-wrapper input[type="tel"] {
        width: 100%;
    }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #D7B082;
    box-shadow: 0 0 0 clamp(0.125vh, 0.1875vh, 0.1875vh) rgba(215, 176, 130, 0.2);
}

.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   LOGIN PAGE STYLES (if used)
   ============================================ */
.login-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - clamp(9vh, 12vh, 12vh));
    padding: clamp(1.5vh, 2vh, 2vh) clamp(0.75vh, 1vw, 1vh);
    width: 100%;
    box-sizing: border-box;
}

.login-container {
    width: 100%;
    max-width: min(18.75vw, 90vw);
    background: #FFFFFF;
    border-radius: clamp(1.25vh, 1.5vh, 1.5vh);
    padding: clamp(2.5vh, 3.5vh, 3.5vh) clamp(1.75vh, 2.5vw, 2.5vh);
    box-shadow: 0 clamp(1.125vh, 1.25vh, 1.25vh) clamp(3.5vh, 3.75vh, 3.75vh) rgba(0, 0, 0, 0.12),
                0 clamp(0.375vh, 0.5vh, 0.5vh) clamp(1.25vh, 1.5vh, 1.5vh) rgba(0, 0, 0, 0.08);
    border: 0.0625vh solid rgba(215, 176, 130, 0.2);
    position: relative;
}

.login-header {
    text-align: center;
    margin-bottom: clamp(1.75vh, 2.5vh, 2.5vh);
}

.login-title {
    font-size: clamp(1.75vh, 2.5vh, 2.5vh);
    font-weight: 600;
    color: #2A2D34;
    margin-bottom: clamp(0.5vh, 0.75vh, 0.75vh);
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

.login-subtitle {
    font-size: clamp(0.95vh, 1.05vh, 1.05vh);
    color: #666;
    font-family: var(--font-body);
    margin: 0;
    line-height: 1.5;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25vh;
    margin-bottom: 0;
}

.login-label {
    font-size: 0.95vh;
    font-weight: 500;
    color: #2A2D34;
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}

.login-input {
    padding: clamp(0.875vh, 1vh, 1vh) clamp(1vh, 1.25vw, 1.25vh);
    border: 0.125vh solid #E5E5E5;
    border-radius: clamp(0.625vh, 0.75vh, 0.75vh);
    font-size: clamp(0.95vh, 1vh, 1vh);
    transition: all 0.3s ease;
    background: #FAFAFA;
    color: #2A2D34;
    font-family: var(--font-body);
    width: 100%;
    box-sizing: border-box;
}

.login-input:focus {
    outline: none;
    border-color: #D7B082;
    background: #FFFFFF;
    box-shadow: 0 0 0 clamp(0.25vh, 0.25vh, 0.25vh) rgba(215, 176, 130, 0.15);
}