/* ==========================================
   COORDINATED HEADER + NAV SCROLL SYSTEM
========================================== */

/* Fixed headers at top of viewport */
.top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-header {
  position: fixed;
  top: var(--top-banner-height, 0);
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.top-banner.chrome-hidden,
.main-header.chrome-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Body padding NOT needed - fixed headers don't take up flow space */

/* Sticky nav header inside body-container */
.nav-header {
  position: sticky;
  top: var(--nav-sticky-top, 0);
  z-index: 950;
  width: 100%;
  background: var(--background-gradient-start);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  padding-top: 1.4rem;  /* Visual spacing at top of nav */
  transition: top 0.3s ease;
}

/* Mobile: smaller padding to close gap */
@media (max-width: 768px) {
  .nav-header {
    padding-top: 1.2rem;
  }
}

/* NEW SPACER BOX - Between nav-header and section 1.25 */
.nav-to-section-spacer {
  width: 100%;
  height: 96px; /* Reduced by another 20%: 120px * 0.8 = 96px */
  background: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%);
  position: relative;
  z-index: 90; /* Below nav (950) but above section content */
  margin-bottom: 0; /* No gap below */
}

/* ===== GLOBAL FIXES ===== */

/* Universal body width fix for Safari */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* Changed from hidden - clip doesn't break position: sticky */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* Changed from hidden - clip doesn't break position: sticky */
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    /* padding-top controlled by --total-header-height variable (set at top of file) */
    box-sizing: border-box;
}

/* Ensure proper container centering */
.app-cards-container {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* ===== BODY CONTAINER STYLES ===== */
/* Scrollable content that overlays the hero section */

/* ===== BODY CONTAINER ===== */
.body-container {
    position: relative;
    z-index: 100;
    background: var(--background-gradient-start);
    margin-top: calc(100vh - 1.5rem); /* Show just the curved corners (1.5rem) peeking at bottom */
    min-height: 200vh;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    /* Ensure body content stays above hero */
    isolation: isolate;
}


/* ===== NAVIGATION HEADER ===== */

/* Navigation buttons container */
.nav-buttons {
    height: 2.4rem;
    background: #000000;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Changed to space between for toggle */
    padding: 0 2rem; /* Added horizontal padding */
    transition: all 0.3s ease;
}

.nav-buttons-content {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: center; /* Center align the nav buttons */
    flex: 1; /* Take full width for centering */
}

.nav-btn {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    text-align: center;
}

.nav-btn:hover,
.nav-btn.active {
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: rgba(0, 229, 255, 0.1);
}

.nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem;
    height: 0.5rem;
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    border-radius: 50%;
}

/* ===== BORDER TOGGLE SWITCH ===== */
.border-toggle-container {
    display: flex;
    align-items: center;
}

.border-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.border-toggle-input {
    display: none;
}

.border-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.3s;
}

.border-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.border-toggle-input:checked + .border-toggle-slider {
    background-color: var(--primary-accent);
}

.border-toggle-input:checked + .border-toggle-slider::before {
    transform: translateX(20px);
}

.border-toggle-text {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ===== DEBUG BORDERS (HIDDEN BY DEFAULT) ===== */

/* REMOVED: Force-visible overrides that prevented proper state sync on refresh */
/* Let JS control visibility states properly */

/* HERO VIDEO CONTAINER - FULL VIEWPORT */
#hero,
.hero-landing {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    transition: opacity 0.1s ease; /* Smooth transition when JS updates */
}

/* Allow clicks on hero content (buttons, links) */
#hero .hero-content,
#hero .hero-content * {
    pointer-events: auto;
}

.hero-video-background {
    height: 100vh !important;
    min-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

#background-video {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    object-fit: cover !important;
}

/* HERO CONTENT POSITIONING - CLEAN CASCADE APPROACH */
/* This loads LAST (after index.css), so no !important needed */
#hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Top-aligned */
    text-align: center;
    height: auto; /* Let content determine height */
    min-height: auto;
    /* Desktop: generous spacing */
    padding-top: clamp(1rem, 8vh, 6rem);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
}

/* MOBILE: More breathing room above Unlock line - PRODUCTION FIX */
/* Using margin-top on first child instead of padding because parent has justify-content: flex-start */
@media screen and (max-width: 768px) {
    #hero .hero-content {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    /* Push first child down to create space above title */
    #hero .hero-content > *:first-child {
        margin-top: 5rem; /* 80px spacing above first element */
    }
}

/* Smaller phones - slightly less */
@media screen and (max-width: 480px) {
    #hero .hero-content > *:first-child {
        margin-top: 4rem; /* 64px */
    }
}

/* Very small phones - proportional reduction */
@media screen and (max-width: 374px) {
    #hero .hero-content > *:first-child {
        margin-top: 3rem; /* 48px */
    }
}

/* Mobile text spacing adjustments */
@media screen and (max-width: 768px) {
    #hero .main-title {
        margin-bottom: 0.5rem;
    }

    #hero .powered-by {
        margin-bottom: 0.25rem;
    }

    #hero .product-title {
        margin-bottom: 0.5rem;
    }

    #hero .skin-line {
        margin-bottom: 0.25rem;
    }

    #hero .features {
        margin-bottom: 1rem;
    }

    #hero .cta-buttons {
        margin-top: 0.5rem;
    }

    /* Reduce Cori logo size on mobile */
    .main-header-logo img {
        height: 2rem;
        width: auto;
    }

    /* Reduce top banner font size on mobile and center text vertically */
    .top-banner {
        font-size: 0.85rem;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3.5rem;
    }
}

/* Proper spacing for hero text elements */
#hero .main-title {
    margin-bottom: 1rem !important;
}

#hero .powered-by {
    margin-bottom: 0.5rem !important;
}

#hero .product-title {
    margin-bottom: 1rem !important;
}

#hero .skin-line {
    margin: 1.2rem 0 0.3rem 0 !important; /* Keep top margin, reduce bottom by 40% */
}

#hero .features {
    margin-bottom: 2rem !important;
}

#hero .cta-buttons {
    margin-top: 1rem !important;
}

#hero .primary-btn {
    text-decoration: none !important; /* Remove underline from hero button */
}

/* SMOOTH SCROLL ANIMATIONS */
/* .top-banner and .main-header transitions now defined at top of file */

#hero {
    transition: opacity 0.3s ease-out;
}

/* WHYCORI PAGE DEBUG BORDERS */
/* Section 1 debug border removed */

/* Section 1.1 product-intro debug border removed */

/* WHYCORI: Past/Future Section Debug Borders - ALWAYS ON */
.past-future-section {
    border: 2px solid red !important;
}

.past-future-grid {
    border: 2px solid blue !important;
}

.past-column,
.future-column {
    border: 2px solid green !important;
}

.past-column .column-title,
.future-column .column-title {
    border: 2px solid purple !important;
}

.past-column .image-container,
.future-column .image-container {
    border: 2px solid orange !important;
}

.past-column .image-container img,
.future-column .image-container img {
    border: 2px solid cyan !important;
}

/* Also keep the .debug-borders versions for compatibility */
.debug-borders .past-future-section {
    border: 2px solid red !important;
}

.debug-borders .past-future-grid {
    border: 2px solid blue !important;
}

.debug-borders .past-column,
.debug-borders .future-column {
    border: 2px solid green !important;
}

.debug-borders .past-column .column-title,
.debug-borders .future-column .column-title {
    border: 2px solid purple !important;
}

.debug-borders .past-column .image-container,
.debug-borders .future-column .image-container {
    border: 2px solid orange !important;
}

.debug-borders .past-column .image-container img,
.debug-borders .future-column .image-container img {
    border: 2px solid cyan !important;
}

/* Debug borders for Section 1.5 Setup Steps (Desktop) - REMOVED */


/* DEBUG TOGGLE BUTTON */
.debug-toggle-btn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1002;
}

.debug-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.toggle-icon {
    font-size: 1rem;
}

/* DEBUG BORDERS AND LABELS FOR BODY SECTIONS */





/* Section 1.1 - Why Guessing */
.debug-mode .validation-subsection {
    outline: 2px solid #FF69B4;
    position: relative;
}

.debug-mode .validation-subsection::after {
    content: "SECTION 1.1 - WHY GUESSING";
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FF69B4;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 1000;
}

/* Section 1 - Debug styles removed for production */



/* Section 1.2 - Debug styles removed for production */

/* Section 1.3 - Debug styles removed for production */








/* Additional Elements Within Sections */
.debug-mode .container {
    outline: 2px solid #FF1493;
    position: relative;
}

.debug-mode .container::after {
    content: "CONTAINER";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #FF1493;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .intro-content {
    outline: 2px solid #FFFF00;
    position: relative;
}

.debug-mode .intro-content::after {
    content: "INTRO CONTENT";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #FFFF00;
    color: black;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .metric-tabs {
    outline: 2px solid #FF6347;
    position: relative;
}

.debug-mode .metric-tabs::after {
    content: "METRIC TABS";
    position: absolute;
    top: 5px;
    left: 5px;
    background: #FF6347;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .tab-content {
    outline: 2px solid #40E0D0;
    position: relative;
}

.debug-mode .tab-content::after {
    content: "TAB CONTENT";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #40E0D0;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .matters-grid {
    outline: 2px solid #20B2AA;
    position: relative;
}

.debug-mode .matters-grid::after {
    content: "MATTERS GRID";
    position: absolute;
    top: 5px;
    left: 5px;
    background: #20B2AA;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .matter-item {
    outline: 1px solid #DC143C;
    position: relative;
}

.debug-mode .matter-item::after {
    content: "MATTER ITEM";
    position: absolute;
    top: 2px;
    right: 2px;
    background: #DC143C;
    color: white;
    padding: 1px 4px;
    font-size: 8px;
    font-weight: bold;
    border-radius: 2px;
    z-index: 1001;
}

.debug-mode .comparison-container {
    outline: 2px solid #32CD32;
    position: relative;
}

.debug-mode .comparison-container::after {
    content: "COMPARISON CONTAINER";
    position: absolute;
    top: 5px;
    left: 5px;
    background: #32CD32;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .comparison-table {
    outline: 2px solid #DA70D6;
    position: relative;
}

.debug-mode .comparison-table::after {
    content: "COMPARISON TABLE";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #DA70D6;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .science-wrap {
    outline: 2px solid #87CEEB;
    position: relative;
}

.debug-mode .science-wrap::after {
    content: "SCIENCE WRAP";
    position: absolute;
    top: 5px;
    left: 5px;
    background: #87CEEB;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .science-sticky {
    outline: 2px solid #FFA500;
    position: relative;
}

.debug-mode .science-sticky::after {
    content: "SCIENCE STICKY";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #FFA500;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .science-steps {
    outline: 2px solid #98FB98;
    position: relative;
}

.debug-mode .science-steps::after {
    content: "SCIENCE STEPS";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #98FB98;
    color: black;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

.debug-mode .s-step {
    outline: 1px solid #DDA0DD;
    position: relative;
}

.debug-mode .s-step::after {
    content: "S-STEP";
    position: absolute;
    top: 2px;
    right: 2px;
    background: #DDA0DD;
    color: white;
    padding: 1px 4px;
    font-size: 8px;
    font-weight: bold;
    border-radius: 2px;
    z-index: 1001;
}


/* Body Section 3 - Why Now Section */
.debug-mode #body-section3 {
    outline: 3px solid #FF69B4;
    position: relative;
}

.debug-mode #body-section3::after {
    content: "BODY SECTION 3 - WHY NOW";
    position: absolute;
    top: 30px;
    right: 10px;
    background: #FF69B4;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 1000;
}

/* Transition Section 4 */
.debug-mode .transition-section-4 {
    outline: 2px solid #FFD700;
    position: relative;
}

.debug-mode .transition-section-4::after {
    content: "TRANSITION SECTION 4";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FFD700;
    color: black;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

/* Packages Subsection */
.debug-mode .packages-subsection {
    outline: 2px solid #00CED1;
    position: relative;
}

.debug-mode .packages-subsection::after {
    content: "PACKAGES SUBSECTION";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #00CED1;
    color: white;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

/* Testimonials */
.debug-mode .testimonials {
    outline: 2px solid #DA70D6;
    position: relative;
}

.debug-mode .testimonials::after {
    content: "TESTIMONIALS";
    position: absolute;
    top: 5px;
    left: 5px;
    background: #DA70D6;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 1001;
}

/* Site Footer */
.debug-mode .site-footer {
    outline: 3px solid #228B22;
    position: relative;
}

.debug-mode .site-footer::after {
    content: "SITE FOOTER";
    position: absolute;
    top: 20px;
    right: 10px;
    background: #228B22;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 1000;
}

/* ===== OTHER SECTION DEBUG BORDERS ===== */

/* Section 1 green debug border removed */

/* Section 1.1 product-intro debug border removed */

/* Section 1.1 intro-content debug border removed */

/* Section 1.1 intro-video debug border removed */

/* Section 1.2 hardware-showcase debug border removed */

.debug-borders .caption-panel {
}

.debug-borders .filmstrip-panel {
}

.debug-borders .filmstrip-item {
}

.debug-borders .body-section {
}


/* Removed debug border for section-content */

.debug-borders .transition-section {
}

.debug-borders .description-section {
}

.debug-borders .tech-transition-section {
}

.debug-borders .preorder-transition-section {
}


.debug-borders .spacer-section {
}

.debug-borders .device-card {
}

.debug-borders .description-text {
}

.debug-borders .tech-text-section {
}

/* .debug-borders .timeline-section removed */

.debug-borders .app-intro-section {
}

.debug-borders .validation-section {
}

.debug-borders .preorder-text-section {
}

.debug-borders .package-cards-section {
}

/* ===== HOW.HTML SPECIFIC DEBUG BORDERS ===== */

.debug-borders .app-features {
}

.debug-borders .feature-bullet {
}

.debug-borders .validation-graphs-grid {
}

.debug-borders .graph-box {
}

.debug-borders .validation-bottom-section {
}

.debug-borders .validation-stats {
}

.debug-borders .validation-scatter {
}



.debug-borders .section-2-1 {
}

.debug-borders .section-2-2 {
}

.debug-borders .ac-head {
}

.debug-borders .ac-rail {
}

.debug-borders .ac-card {
}

.debug-borders .ac-left {
}

.debug-borders .ac-right {
}

.debug-borders .ac-controls {
}

.debug-borders .section-2-3 {
}

.debug-borders .section-2-4 {
}

.debug-borders .section-3-1 {
}

.debug-borders .section-3-2 {
}

.debug-borders .section-3-3 {
}

.debug-borders .section-3-4 {
}




/* ===== DEBUG LABELS ===== */
.debug-label {
    display: none; /* Hidden by default */
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.9);
    color: #00E5FF; /* Bright cyan for better visibility */
    font-size: 0.65rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    padding: 2px 5px;
    border-radius: 2px;
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Alternative positions to reduce overlap */
.debug-label.pos-top-right {
    top: 4px;
    right: 4px;
    left: auto;
}

.debug-label.pos-bottom-left {
    bottom: 4px;
    top: auto;
    left: 4px;
}

.debug-label.pos-bottom-right {
    bottom: 4px;
    right: 4px;
    top: auto;
    left: auto;
}

.debug-label.pos-center-left {
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
}

.debug-label.pos-center-right {
    top: 50%;
    transform: translateY(-50%);
    right: 4px;
    left: auto;
}

/* Make containers position relative for absolute positioning of labels */
.debug-borders .hero,
.debug-borders .hero-video-background,
.debug-borders .hero-video-overlay,
.debug-borders .hero-content,
.debug-borders .main-title,
.debug-borders .powered-by,
.debug-borders .product-title,
.debug-borders .skin-line,
.debug-borders .features,
.debug-borders .cta-buttons,
.debug-borders #background-video,
.debug-borders .body-section,
.debug-borders .section-content,
.debug-borders .spacer-section,
.debug-borders .hardware-showcase-section,
.debug-borders .caption-panel,
.debug-borders .filmstrip-panel,
.debug-borders .tech-transition-section,
.debug-borders .preorder-transition-section,
.debug-borders .tech-text-section,
.debug-borders .app-intro-section,
.debug-borders .validation-section,
.debug-borders .preorder-text-section,
.debug-borders .package-cards-section,
.debug-borders .app-features,
.debug-borders .feature-bullet,
.debug-borders .validation-graphs-grid,
.debug-borders .graph-box,
.debug-borders .validation-bottom-section,
.debug-borders .validation-stats,
.debug-borders .validation-scatter,
.debug-borders .how-steps,
.debug-borders .step,
.debug-borders .step-num,
.debug-borders .step-content,
.debug-borders .step-content h3,
.debug-borders .step-content p,
.debug-borders .section-2-1,
.debug-borders .section-2-2,
.debug-borders .section-2-3,
.debug-borders .section-2-4,
.debug-borders .section-3-1,
.debug-borders .section-3-2,
.debug-borders .section-3-3,
.debug-borders .section-3-4,
.debug-borders .ac-head,
.debug-borders .ac-rail,
.debug-borders .ac-card,
.debug-borders .ac-left,
.debug-borders .ac-right,
.debug-borders .ac-controls,
.debug-borders .dashboard-cards-section,
.debug-borders .dashboard-cards-container,
.debug-borders .dashboard-cards-wrapper,
.debug-borders .dashboard-card,
.debug-borders .dashboard-left,
.debug-borders .dashboard-right,
.debug-borders .dashboard-right .athlete-image,
.debug-borders .dashboard-right .feature-text,
.debug-borders .setup-step,
.debug-borders .setup-step .step-image,
.debug-borders .setup-step .step-bottom,
.debug-borders .setup-step .step-number,
.debug-borders .setup-step .step-text,
.debug-borders .setup-step .step-text h3,
.debug-borders .setup-step .step-text p {
    position: relative !important;
}

/* ===== BODY SECTIONS ===== */
.body-section {
    padding: 0;
    min-height: 100vh;
    background-color: var(--background-gradient-start);
    position: relative;
    z-index: 50; /* Above hero content (0) but below nav (1001) */
}

/* Remove borders from sections 2 and 3, keep padding fixes */
#section2.body-section,
#how-section2.body-section {
    padding-bottom: 0;
    background: #1F252B;
}

#section3.body-section,
#how-section3.body-section {
    padding-bottom: 0;
    min-height: auto;
}

.site-footer {
    /* Removed yellow top border */
}

/* Section 1 should only take space it needs */
#section1.body-section {
    min-height: auto;
    padding-bottom: 0 !important;
}



/* Section 1 - Main section container - Force black background always */
#section1.body-section {
    background-color: #000000 !important; /* Changed to pure black */
    margin-top: 0;       /* No margin needed */
    box-shadow: none;    /* No shadow interference */
    display: flow-root;  /* Proper fix: Establish new block formatting context */
}



/* Section 1.1 - Meet Cori */
/* Old product-intro rule removed - consolidated with main rule below */

.body-section.white-bg {
    background: #ffffff;
    color: #333333;
}

.section-content {
    max-width: none; /* Remove width constraint */
    margin: 0; /* Remove auto centering from parent */
    width: 100%; /* Full width */
    color: var(--text-primary);
    position: relative; /* Ensure proper stacking context for parent background */
    margin-bottom: 0; /* Remove any bottom margin to connect with Section 1.2 */
    padding-bottom: 0; /* Remove any bottom padding */
}



.body-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.6rem, 6.5vw, 3.9rem); /* Updated to 130% of original size */
    font-weight: 600;
    color: var(--primary-accent);
    margin-bottom: 2rem;
    text-align: center;
}

/* Section 1.1 title now uses the same size as all h2 elements */
.body-section .section-1-1-title,
.section-content .section-1-1-title {
    /* Inherits from .body-section h2 */
}

.body-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.placeholder-content {
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(25, 25, 25, 0.3);
    border-radius: 1rem;
}


/* ===== DEVICE RENDER SECTION ===== */
.device-render-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-gradient-start);
    position: relative;
}

.device-render-container {
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
}

.device-render-placeholder {
    text-align: center;
    padding: 3rem;
    border-radius: 1rem;
    background: rgba(0, 20, 30, 0.3);
}

.device-render-placeholder h3 {
    color: var(--primary-accent);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.device-render-placeholder p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ===== APP FEATURES BULLETS ===== */
.app-features {
    max-width: 600px;
    margin: 0 auto;
}

.feature-bullet {
    margin: 1.5rem 0;
    padding: 1rem 0;
    text-align: center;
}

.feature-bullet h4 {
    color: var(--primary-accent);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    position: relative;
}

.feature-bullet h4::before {
    content: "•";
    color: var(--primary-accent);
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

/* ===== VALIDATION SECTION STYLES ===== */
.validation-card {
    display: grid;
    grid-template-rows: 1fr 1fr; /* Two equal height rows */
    gap: 2rem;
    margin: 3rem auto;
    max-width: 1200px;
    border-radius: 1rem;
    background: rgba(15, 15, 15, 0.8);
    padding: 2rem;
    position: relative;
}

/* New validation card layout - increased by 20% */
.validation-card-new {
    display: grid;
    grid-template-columns: 1fr; /* Single column to stack study design on top */
    grid-template-rows: auto auto; /* Study design section, then graphs section */
    gap: 2.4rem; /* Increased gap by 20% (2rem * 1.2) */
    margin: 3rem auto;
    max-width: 1680px; /* Increased by 20% (1400 * 1.2) */
    border-radius: 1rem;
    background: rgba(30, 30, 30, 0.9); /* Slightly lighter gray - more visible against black */
    padding: 2.4rem; /* Increased padding by 20% (2rem * 1.2) */
    position: relative;
    min-height: 720px; /* Increased by 20% (600 * 1.2) */
}

/* Study design section - full width at top */
.study-design-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* Two images in a row */
.study-images-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.study-image-item {
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(10, 10, 10, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.study-image-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Human validation - set both containers to same height */
.section-3-3 .study-images-row {
    grid-auto-rows: 1fr; /* Make both items same height */
}

.section-3-3 .study-image-item {
    height: 100%; /* Fill the grid cell */
}

.section-3-3 .study-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Study design bullets */
.study-design-bullets {
    width: 100%;
}

/* Toggle button - hidden by default, shown on mobile */
.study-design-toggle {
    display: none;
}

.study-design-bullets .study-design-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.study-design-bullets li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
}

.study-design-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-accent);
    font-size: 1.2rem;
}

.study-design-bullets strong {
    color: var(--primary-accent);
    font-weight: 600;
}

/* Graphs section - now wraps both left and right panels */
.validation-graphs-section {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.4rem;
}

/* Left side - 2x3 grid of graphs */
.validation-graphs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.75rem;  /* Slightly reduced gap */
    height: 100%;
}

.validation-graph-item {
    border-radius: 0.5rem;
    padding: 0.25rem 0.15rem;  /* Minimal horizontal padding, even less vertical */
    background: rgba(10, 10, 10, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.validation-graph-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Back to contain for proper aspect ratio */
    border-radius: 0.25rem;
}

/* Right side panel */
.validation-right-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

/* Scatter plot on top */
.validation-scatter-new {
    flex: 1.44; /* Increased by 20% from 1.2 */
    border-radius: 0.5rem;
    padding: 0.5rem;  /* Restored some padding */
    background: rgba(10, 10, 10, 0.5);
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center;
    justify-content: center;
}

.validation-scatter-new img {
    width: 100%;
    height: auto;
    flex: 1; /* Take up most of the space */
    object-fit: contain;  /* Back to contain */
    border-radius: 0.25rem;
}

.validation-scatter-new::after {
    content: "Blood Lactate vs Cori Lactate";
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    margin-top: 0.5rem;
    opacity: 0.8;
}

/* Stats on bottom */
.validation-stats-new {
    flex: 1.2; /* Increased to match the graph height */
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: rgba(10, 10, 10, 0.5);
}

.validation-stats-new h3 {
    background: linear-gradient(90deg, #00E5FF 0%, #00FF7F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1rem; /* Reduced from 1.3rem */
    margin-bottom: 1rem;
    text-align: center;
}

.validation-stats-new .stats-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 grid */
    grid-template-rows: 1fr 1fr;
    gap: 0; /* No gap - magenta boxes touch each other */
    row-gap: 0; /* Explicitly remove vertical spacing */
    column-gap: 0; /* Explicitly remove horizontal spacing */
}

.validation-stats-new .stat-item {
    display: flex;
    flex-direction: column; /* Vertical layout: value on top, label below */
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* Padding for spacing within each box */
    margin: 0; /* Remove any margin */
    gap: 0; /* Remove any gap between flex children */
}

.validation-stats-new .stat-label {
    color: #ccc;
    font-weight: 500;
    font-size: 0.7rem; /* Reduced for desktop */
    text-align: center;
    margin: 0; /* No gap between value and label */
    padding: 0;
    line-height: 1; /* Tight line height */
    display: block; /* Block display to eliminate inline spacing */
}

.validation-stats-new .stat-value {
    background: linear-gradient(90deg, #00E5FF 0%, #00FF7F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 1.5rem; /* Increased to 1.5rem */
    margin: 0; /* No gap */
    padding: 0;
    line-height: 1; /* Tight line height */
    display: block; /* Block display to eliminate inline spacing */
}

.validation-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.validation-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.validation-graph {
    border-radius: 0.5rem;
    padding: 1rem;
    background: rgba(10, 10, 10, 0.5);
    position: relative;
}

.validation-graph img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.25rem;
}

.validation-stats {
    border: none; /* Remove border that was causing overflow */
    border-radius: 0.5rem;
    padding: 2rem;
    background: transparent; /* Remove background to clean up appearance */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content for desktop */
}

.validation-stats h3 {
    color: #0ef1c7;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.stat-label {
    color: #ccc;
    font-weight: 500;
}

.stat-value {
    color: #0ef1c7;
    font-weight: 600;
    font-size: 1.1rem;
}

.validation-scatter {
    border-radius: 0.5rem;
    padding: 1rem;
    background: rgba(10, 10, 10, 0.5);
    position: relative;
}

.validation-scatter img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.25rem;
}

.validation-bottom-section {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    margin-top: 4rem;
    align-items: start;
}

.validation-stats h3 {
    color: var(--primary-accent);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    gap: 1rem; /* Reduce desktop gap significantly */
    max-width: 600px; /* Constrain width to avoid extreme stretching */
}

.stat-label {
    color: var(--text-secondary);
    font-size: 1rem;
    text-align: right; /* Right align the right column */
}

.stat-number {
    color: var(--primary-accent);
    font-size: 2.5rem; /* 150% increase from base ~1.6rem */
    font-weight: 700; /* Make it bold */
    line-height: 1.2;
    text-align: left; /* Left align the left column */
}

.stat-value {
    color: var(--primary-accent);
    font-weight: 600;
    font-size: 1.1rem;
}

.validation-scatter {
    height: 300px;
}

.scatter-plot {
    height: 100%;
    width: 100%;
    border-radius: 0.5rem;
    background: rgba(0, 20, 30, 0.2);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .validation-bottom-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* New validation card responsive */
    .validation-card-new {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
        max-width: 100vw;
        margin: 1.5rem auto;
    }

    /* Mobile: Revert to original 2-column layout (graphs left, stats right) */
    .validation-graphs-section {
        display: grid;
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: 1rem;
    }

    /* Mobile: Study design section adjustments */
    .study-design-section {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /* Mobile: Show only first image, hide second */
    .study-images-row {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 0;
    }

    .study-image-item:nth-child(2) {
        display: none; /* Hide second image on mobile */
    }

    .study-image-item {
        max-width: 100%;
    }

    /* Mobile: Collapsible study design bullets */
    .study-design-bullets {
        margin-top: 1rem;
    }

    /* Show toggle button on mobile */
    .study-design-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: rgba(0, 229, 255, 0.1);
        border: 1px solid rgba(0, 229, 255, 0.3);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        color: var(--primary-accent);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .study-design-toggle:hover {
        background: rgba(0, 229, 255, 0.15);
        border-color: rgba(0, 229, 255, 0.5);
    }

    .study-design-toggle span {
        flex: 1;
    }

    .study-design-toggle .toggle-icon {
        transition: transform 0.3s ease;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

    .study-design-toggle[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

    /* Hide list by default on mobile */
    .study-design-bullets .study-design-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        margin-top: 0;
    }

    .study-design-bullets .study-design-list.expanded {
        max-height: 500px;
        margin-top: 1rem;
    }

    .study-design-bullets li {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .section-3-2 .validation-graphs-grid,
    .section-3-3 .validation-graphs-grid {
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        display: block; /* Ensure it's not flexbox on mobile */
    }

    .section-3-2 .graphs-grid-container,
    .section-3-3 .graphs-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 columns for 2x3 layout */
        grid-template-rows: repeat(3, auto); /* 3 rows for 2x3 layout - auto instead of 1fr */
        gap: 0; /* No gap between yellow boxes */
        width: 100%; /* Full width of orange box parent */
    }

    .section-3-2 .validation-graph-item,
    .section-3-3 .validation-graph-item {
        min-height: 100px; /* Reduced height */
        max-height: 120px; /* Reduced height */
        height: 120px; /* Fixed height to ensure all items are visible */
        padding: 0.2025rem 0.135rem; /* Increased padding by 50% */
        width: 100%; /* Full width instead of auto */
        background: rgba(10, 10, 10, 0.5); /* Restore background */
        border-radius: 0.5rem; /* Restore border radius */
        overflow: hidden; /* Clip content that exceeds the box */
    }
    
    /* Mobile styles for right panel */
    .validation-right-panel {
        gap: 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    .validation-scatter-new {
        min-height: 200px;
        max-height: 250px;
        padding: 0.5rem; /* Increased padding to prevent overflow */
    }

    .validation-scatter-new img {
        max-height: 100%; /* Prevent image from overflowing */
        object-fit: contain;
    }
    
    .validation-stats-new {
        padding: 1rem;
    }

    .section-3-2 .validation-stats-new .stats-content,
    .section-3-3 .validation-stats-new .stats-content {
        width: 100%; /* Make cyan box same width as purple box */
        gap: 0; /* Remove all gaps */
        row-gap: 0;
        column-gap: 0;
    }

    .section-3-2 .validation-stats-new h3,
    .section-3-3 .validation-stats-new h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .section-3-2 .validation-stats-new .stat-item,
    .section-3-3 .validation-stats-new .stat-item {
        padding: 0.5rem; /* Padding within each magenta box */
        margin: 0; /* No margin */
        gap: 0; /* Remove any gap between flex children */
    }

    .section-3-2 .validation-stats-new .stat-label,
    .section-3-3 .validation-stats-new .stat-label {
        font-size: 0.85rem; /* Normal mobile size */
        margin: 0; /* No gap between value and label */
        padding: 0;
        line-height: 1; /* Tight line height */
        display: block; /* Block display to eliminate inline spacing */
    }

    .section-3-2 .validation-stats-new .stat-value,
    .section-3-3 .validation-stats-new .stat-value {
        font-size: 1.5rem; /* Increased to 1.5rem */
        margin: 0; /* No gap */
        padding: 0;
        line-height: 1; /* Tight line height */
        display: block; /* Block display to eliminate inline spacing */
    }
    
    /* Mobile improvements for validation-stats */
    .stat-item {
        gap: 2rem; /* Increase mobile spacing */
        justify-content: space-between;
    }
    
    .stat-label {
        text-align: right; /* Right align the right column on mobile */
        flex: 1;
    }
    
    .stat-number {
        font-size: 2rem; /* Slightly smaller on mobile but still 150% increase */
        text-align: left;
        flex-shrink: 0;
    }
}

/* ===== FOOTER ===== */
.site-footer {
    background: var(--background-gradient-end);
    padding: 3rem 2rem 2rem 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-secondary);
}

.footer-logo img {
    height: 2.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 8px rgba(0, 229, 255, 0.3));
}

.footer-content p {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ===== SCROLL ANIMATIONS ===== */
.hero.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.main-header.slide-up,
.top-banner.slide-up {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-header.slide-down,
.top-banner.slide-down {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ===== PRODUCT SECTION STYLES ===== */

/* Section 1.1: Meet Cori - Consolidated Production Rule */
.product-intro {
    /* Layout */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem; /* Add controlled gap to bring containers closer */
    
    /* Positioning and Size */
    width: 80%; /* 80% of parent width */
    margin: 0 auto !important; /* Force center alignment - override any conflicts */
    padding: 4rem 3rem 2rem 3rem; /* Increased top padding from 2rem to 4rem */
    
    /* Visual */
    background: #000000;
    
    /* Reset any inherited values that could interfere */
    position: relative;
    text-align: left; /* Reset text alignment */
    box-sizing: border-box;
}

/* Desktop: Text container (left side) */
.intro-content {
    flex: 1;
    text-align: left; /* Left align text */
    padding: 2rem 0; /* Add vertical padding for better spacing */
    max-width: none; /* Remove width constraint */
    margin: 0; /* Remove auto margin */
    
    /* Make this a flex container to control button positioning */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Start content at top */
    height: 100%; /* Match the height of its flex parent */
    min-height: 520px; /* Increased by 30% from 400px to match larger image */
}


.meet-cori {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3.75rem, 9vw, 6rem); /* Increased by 25% */
    font-weight: 700;
    color: #FFFFFF; /* White text */
    text-align: left; /* Left align */
    margin: 3rem 0 1rem 0; /* Added top margin to push text down */
    line-height: 1.2;
}

/* Make 'Cori' word gradient colored */
.meet-cori .gradient-text {
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro-description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #FFFFFF;
    text-align: center;
    max-width: 800px; /* Increased width */
    margin: 0 auto;
}

/* Section 1.1 and 1.2 text styling */
.section-title .white-text,
.meet-cori .white-text {
    color: #FFFFFF !important;
    background: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.section-title .gradient-text,
.meet-cori .gradient-text {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Desktop-only styles for Section 1.1 - Clean Production Rules */
@media (min-width: 769px) {
    /* Desktop: Add padding to text content only */
    .product-intro .intro-content {
        padding-top: 10rem;
        padding-bottom: 0;
    }
    
    /* Desktop: Image container should have NO padding to match image size exactly */
    .product-intro .intro-video {
        padding: 0; /* NO padding - container must match image dimensions exactly */
        margin-top: 5rem; /* Add 5rem space above image */
        margin-bottom: 5rem; /* Increased to 5rem as requested */
        align-self: center; /* Center vertically within flex container */
    }
    
    /* Desktop: Position button below text container on left side */
    .product-intro .preorder-btn {
        position: absolute; /* Position relative to product-intro container */
        left: 0; /* Align with left edge of text container */
        top: 100%; /* Position below text container */
        margin-top: 2rem; /* Space from text */
        width: auto; /* Natural button width */
        z-index: 1; /* Ensure it's above other content */
    }
    
    /* Desktop: Add space below text container for button */
    .product-intro .intro-content {
        margin-bottom: 5rem; /* Space for absolutely positioned button */
    }
    
    /* Desktop: Make product-intro relative for button positioning */
    .product-intro {
        position: relative; /* Create positioning context for button */
    }
    
    .validation-section .section-title {
        font-size: 3rem; /* Increased font size for desktop */
    }
}

/* ===== FLOATING BUTTON COMPONENT ===== */
/* Independent floating CTA button using existing design system */
.floating-button {
    /* EXACT MATCH to primary-btn styling */
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent)) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2) !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease !important;
    padding: 0.77rem 1.8rem !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
    font-size: 0.99rem !important;
    width: auto !important;
    min-width: min(162px, 80vw) !important;
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: 'Montserrat', sans-serif !important;
    text-align: center !important;
    border: none !important;
    max-width: 100% !important;
    min-height: 2.75rem !important;
    
    /* BOTTOM CENTER POSITIONING */
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) !important;
    z-index: 99999;
    
    /* Ensure visibility */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Floating button hover and interaction states */
.floating-button:hover {
    background: linear-gradient(135deg, #00D1E8, #00E07A) !important;
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3) !important;
    transform: translateX(-50%) translateY(-2px) !important;
}

.floating-button:active {
    transform: translateX(-50%) translateY(0) !important;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2) !important;
}

/* Responsive adjustments for mobile and desktop */
@media (max-width: 768px) {
    .floating-button {
        /* Mobile positioning - stay bottom center */
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) !important;
        padding: 0.77rem 1.8rem !important;
        font-size: 0.99rem !important;
        min-width: min(162px, 80vw) !important;
    }
    
    .floating-button:hover {
        /* Mobile hover effect */
        transform: translateX(-50%) translateY(-1px) !important;
        background: linear-gradient(135deg, #00D1E8, #00E07A) !important;
        box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3) !important;
    }
}

@media (min-width: 769px) {
    .floating-button {
        /* Desktop - already defined above, just ensuring bottom center */
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) !important;
    }
}

    
    /* Desktop alignment for table columns */
    .validation-stats .stat-number {
        text-align: left !important; /* Left align on desktop */
        color: #FFFFFF !important; /* White color for left column */
        justify-self: start !important;
    }
    
    .validation-stats .stat-label {
        text-align: right !important; /* Right align on desktop */
        justify-self: end !important;
    }
    
    /* Ensure proper flexbox alignment */
    .validation-stats .stat-item {
        justify-content: space-between !important;
        align-items: center !important;
    }
}

/* PRODUCTION FIX: Highest specificity rule for future-tagline font size */
#product-section .product-intro .intro-content h4.future-tagline {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important; /* Same as Needle-Free Lactate text - forced override */
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 600 !important; /* Match the tagline weight */
    text-transform: capitalize !important;
    text-align: left !important;
    margin: 0 0 2rem 0 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}

/* Fallback with slightly lower specificity */
.product-intro .intro-content h4.future-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: rgba(255, 255, 255, 0.98);
    font-weight: 600;
    text-transform: capitalize;
    text-align: left;
    margin: 0 0 2rem 0;
    line-height: 1.2;
    text-shadow: none;
}

/* Removed - margin now handled in button styling section with higher specificity */

.intro-video {
    flex: none; /* Don't participate in flex sizing at all */
    max-width: 560px; /* Reduced by 20% from 700px */
    text-align: right;
    margin: 0; /* Remove margin */
    padding: 0; /* No padding - container should match image size */
    background: #1A1A1A; /* Dark gray - closer to black but with slight grayness */
    border-radius: 15px; /* Add rounded corners to match design */
    display: block; /* Block level for proper height calculation */
    width: fit-content; /* Container width fits image width */
    height: auto; /* Let height be determined by content */
    line-height: 0; /* Remove line-height spacing */
    font-size: 0; /* Remove font-size spacing */
    align-self: flex-start; /* Don't stretch in flex container */
}

.intro-video video {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Increased from 10px for more prominent rounded corners */
}

.intro-video .intro-image {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Increased from 10px for more prominent rounded corners */
    object-fit: contain;
    background: transparent; /* Ensure image background doesn't interfere */
    mix-blend-mode: normal; /* Ensure proper blending with background */
    display: block; /* Remove any inline spacing */
    vertical-align: top; /* Remove baseline spacing */
}

/* Section 1.2: Transition */
.transition-section {
    text-align: center;
    margin: 0;
    padding: 3rem 0 1.7rem 0;
    background: #1F252A;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.transition-main {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: rgba(255, 255, 255, 0.98);
    font-weight: bold;
    text-transform: capitalize;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.transition-dominate {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
    background-size: 100% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-attachment: local;
    display: inline-block;
    font-weight: bold;
    text-transform: capitalize;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.transition-cta {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #FFFFFF;
    font-weight: 400;
    margin: 0.2rem 0 0 0;
}

/* Section 1.4: Description and Card */
.description-section {
    display: none; /* Hidden for now */
    margin: 0;
    margin-bottom: 0 !important;
    background: #ffffff;
    padding: 3rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 10px;
}

.description-text {
    max-width: 800px;
    margin: 0 auto 3rem auto;
    text-align: left; /* Left align as requested */
}

.description-text p {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 1.5rem;
}

.device-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: rgba(25, 25, 25, 0.1);
    border-radius: 15px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    max-width: 700px;
    margin: 0 auto;
}

.device-image {
    flex: 1;
    max-width: 400px;
}

.device-image img {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Increased from 10px for more prominent rounded corners */
}

.device-features {
    flex: 1;
}

.device-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.device-features li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.825rem;
    font-weight: 300;
    color: #000000;
    margin-bottom: 0.4rem;
    padding-left: 1.5rem;
    position: relative;
}

.device-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #000000;
    font-weight: bold;
}

.device-features .btn {
    display: block;
    margin: 2rem auto 0 auto; /* Center align button */
    width: fit-content;
}

/* ===== TECHNOLOGY SECTION STYLES ===== */

/* Section 2.1: Technology Transition */
.tech-transition-section {
    text-align: center;
    margin: 0;
    padding: 3rem 0; /* Equal top and bottom padding by default */
    background: #000000;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Section 2.1 and 3.1 positioning */
#section2-1.tech-transition-section {
    padding-top: 3rem; /* Add padding above text in section 2.1 */
    padding-bottom: 3rem; /* Keep bottom padding */
    background: #FFFFFF !important;
}

#section2-1.tech-transition-section h3,
#section2-1.tech-transition-section h4,
#section2-1.tech-transition-section p {
    color: #000000 !important;
}

#section3-1.tech-transition-section {
    padding-top: 3rem; /* Add padding above text in section 3.1 */
    padding-bottom: 3rem; /* Keep bottom padding */
}

/* Special styling for Section 3.4 */
#section3-4.tech-transition-section {
    position: relative;
    background: linear-gradient(135deg, #1F252A 0%, #2A3035 100%);
}

#section3-4 .tech-transition-main {
    position: relative;
    z-index: 2;
}

/* Ensure no gaps between Section 3 subsections */
#section3-2.science-split {
    margin-top: 0;
}

#section3-3.technology-main-section {
    margin-top: 0;
    padding-top: 0;
}

/* Mobile font size reduction for transition sections */
@media (max-width: 768px) {
.tech-transition-main {
        font-size: clamp(2rem, 4.8vw, 3.6rem); /* 20% smaller: 2.5rem -> 2rem, 6vw -> 4.8vw, 4.5rem -> 3.6rem */
    }
    
    .tech-transition-impact {
        font-size: clamp(2rem, 4.8vw, 3.6rem); /* 20% smaller */
    }
    
    .tech-transition-cta {
        font-size: clamp(1rem, 2.4vw, 1.4rem); /* 20% smaller: 1.2rem -> 1rem, 3vw -> 2.4vw, 1.8rem -> 1.4rem */
    }
    
    /* Remove gaps between sections on mobile */
    .tech-transition-section {
        margin-top: 0; /* Remove top margin to eliminate gap with previous section */
    }
    
    /* Default padding for transition sections on mobile */
    #section3-4.tech-transition-section {
        padding: 3rem 0; /* Equal top and bottom padding */
    }
    
    /* Section 2.1 - starts where section 2 starts but add padding above text */
    #section2-1.tech-transition-section {
        padding-top: 3rem !important; /* Add padding above the text */
        padding-bottom: 1rem !important; /* Reduced from 3rem to 1rem */
        margin-top: 0;
        border-bottom: 1px solid #FFFFFF !important; /* White bottom border for mobile */
    }
    
    /* Section 3.1 - starts where section 3 starts but add padding above text */
    #section3-1.tech-transition-section {
        padding-top: 3rem !important; /* Add padding above the text */
        padding-bottom: 3rem;
        margin-top: 0;
    }
    
    /* Ensure comparison section connects with tech transition */
    .comparison-section {
        margin-bottom: 0; /* Remove bottom margin */
        padding-bottom: 2rem; /* Keep some bottom padding but reduced */
    }
    
    /* Remove gap between section2 and section3 */
    #section3.body-section {
        padding-top: 0; /* Remove top padding from section 3 */
        margin-top: 0; /* Remove top margin from section 3 */
    }
    
    /* Remove top padding from section 2 so section 2.1 starts at the top */
    #section2.body-section {
        padding-top: 0; /* Remove top padding from section 2 */
    }
}

/* Transform Your Training Cards */
.transform-training-section {
    padding: 4rem 0;
    background: #000000;
    color: #FFFFFF;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.transform-training-section .section-title {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    margin-bottom: 3rem;
    color: #FFFFFF;
}

.training-cards-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0;
    /* Hide scrollbar while keeping functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
}

.training-cards-container::-webkit-scrollbar {
    display: none; /* WebKit browsers (Chrome, Safari) */
}

.training-cards {
    display: flex;
    gap: 2rem;
    padding: 0 1rem;
}

.training-card {
    flex: 0 0 300px; /* Fixed width, no shrinking */
    height: 400px;
    background: rgba(25, 25, 25, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.training-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 8px 30px rgba(0, 229, 255, 0.2);
}

.card-image {
    height: 80%; /* Top 80% for image */
    background: #1a1a1a; /* Match card background */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image img {
    width: 100%; /* Image width fills the card width */
    height: 100%; /* Image height fills the card height */
    max-width: 100%; /* Ensure it doesn't exceed container */
    max-height: 100%; /* Ensure it doesn't exceed container */
    object-fit: contain; /* Fit within boundaries without bleeding */
    object-position: center; /* Center the image */
    background-color: #1a1a1a; /* Match card background */
}

.card-content {
    height: 20%; /* Bottom 20% for text */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #FFFFFF;
}

.card-content p {
    font-size: 0.85rem;
    color: #CCCCCC;
    line-height: 1.3;
    margin: 0;
}

.tech-transition-main {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: rgba(255, 255, 255, 0.98);
    font-weight: bold;
    text-transform: capitalize;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.tech-transition-impact {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: rgba(255, 255, 255, 0.98);
    font-weight: bold;
    text-transform: capitalize;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.tech-transition-cta {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #FFFFFF;
    font-weight: 400;
    margin: 0.2rem 0 0 0;
    margin-bottom: -1rem; /* Reduce space after this line */
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ===== TECHNOLOGY SECTIONS 2.2-2.6 ===== */

/* Section 2.2: Text Only */
.tech-text-section {
    margin: 0;
    padding: 1.5rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #6D6D6D; /* Match section 2.3a background */
}

/* Mobile styling for section 2.4 */
@media screen and (max-width: 768px) {
    /* Make section 2.4 full width on mobile - remove all padding */
    .tech-text-section-2 {
        padding: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
    }

    .tech-text-section-2 .text-content {
        max-width: 100%;
        width: 100%;
        padding: 0; /* Remove padding between yellow and green box */
        text-align: left; /* Force left alignment on mobile */
        margin: 0;
    }

    .tech-text-section-2 .text-content h2,
    .tech-text-section-2 .text-content p {
        padding: 1.5rem; /* Add padding to text elements instead */
        text-align: left; /* Force left alignment for text */
    }
}

.white-bg {
    background: #ffffff;
}

.black-bg {
    background: #000000;
}

.tech-black-bg {
    background: #6D6D6D; /* Changed from #000000 to match section 2.3a hardware showcase */
}

.text-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
}

.tech-text-section .text-content p {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

.white-bg .text-content p {
    color: #000000;
}

.black-bg .text-content p,
.tech-black-bg .text-content p {
    color: rgba(255, 255, 255, 0.9);
}

/* ========== SECTION 2.2: ONE SENSOR GRADIENT FILL ========== */

.one-sensor-section {
    background: #000000;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 4rem 0 2rem 0; /* Reduced bottom padding from 4rem to 2rem */
    min-height: 100vh;
}

/* Intro Paragraph - Before One Sensor Title */
.sensor-intro-text {
    max-width: 1200px;
    margin: 0 auto 3rem auto;
    padding: 0 2rem;
    text-align: justify;
    margin-top: 0; /* Remove space above paragraph */
}

.sensor-intro-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-align: justify;
}

/* Title: One Sensor. No Needles. - BLACK COLOR */
.one-sensor-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #000000; /* Black color */
    text-align: center;
    margin: 0 0 4rem 0;
    background: none; /* Remove any gradient */
    -webkit-text-fill-color: #000000; /* Black for webkit */
}

/* Desktop: Hide line break to keep on one line */
.one-sensor-title br {
    display: none;
}

/* Desktop: Normal line height */
.one-sensor-title {
    line-height: 1.2;
}

/* Desktop: Split Layout - EQUAL HEIGHTS WITH DEBUG */
.sensor-split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 70vh;
    align-items: stretch;
}

.mobile-only {
    display: none;
}

/* Left: Text Container - EQUAL HEIGHT WITH DEBUG */
.sensor-split-container .sensor-split-left {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4rem;
    height: 100%;
}

.sensor-split-container .sensor-split-left .continuous-text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    text-align: left;
    line-height: 1.2;
    position: relative;
    margin: 0;
    width: 100%;
}

/* Base white text */
.sensor-split-container .continuous-text .text-base {
    color: #FFFFFF;
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    text-align: left;
    line-height: 1.2;
}

/* Gradient text overlay */
.sensor-split-container .continuous-text .text-gradient {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: inset(0 100% 0 0);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    text-align: left;
    line-height: 1.2;
}

/* Right: Image Container - EQUAL HEIGHT WITH DEBUG */
.sensor-split-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    height: 100%;
}

.sensor-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
}

/* ========== NEW SINGLE-PARENT PIN APPROACH (DESKTOP ONLY) ========== */

#sensor-showcase {
    position: relative;
    background: #000000;
}

#sensor-showcase .sensor-showcase-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Give more space to left (text), less to right (image) */
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 0;
    gap: 0;
}

#sensor-showcase .sensor-showcase-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 4rem;
    padding-left: 10rem; /* Increased left padding for continuous monitoring line */
    padding-right: 0; /* No right padding - text closer to center */
}

#sensor-showcase .sensor-showcase-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 4rem;
    padding-left: 2rem; /* Reduced left padding to bring image closer to text */
}

#sensor-showcase .sensor-showcase-right .sensor-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    filter: brightness(1.3);
}

#sensor-showcase .progress-wrap {
    --fill: 0;
    position: relative;
}

#sensor-showcase .headline {
    margin: 0;
    line-height: 1.3;
    font-weight: 800;
    font-size: clamp(2.88rem, 5.76vw, 4.8rem);
    letter-spacing: -0.02em;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
}

#sensor-showcase .text {
    display: inline-block;
    text-align: left;
}

#sensor-showcase .text.base {
    color: #ffffff;
    text-align: left;
}

#sensor-showcase .text.gradient {
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

#sensor-showcase .reveal {
    position: absolute;
    inset: 0;
    width: calc(var(--fill) * 1%);
    overflow: hidden;
    pointer-events: none;
}

/* Preserve desktop-only visibility for new structure */
#sensor-showcase.desktop-only {
    display: block;
}

/* Mobile: Simple Stack */
@media screen and (max-width: 768px) {
    .desktop-only {
        display: none !important; /* Force hide with !important */
    }

    .mobile-only {
        display: block;
    }

    /* HIDE the entire sensor showcase section on mobile */
    #sensor-showcase,
    #sensor-showcase.desktop-only,
    .sensor-showcase-grid,
    .sensor-showcase-left,
    .sensor-showcase-right {
        display: none !important; /* Hide desktop sensor showcase completely */
    }

    .one-sensor-section {
        padding: 0.5rem 1rem 3rem 1rem; /* Reduced top padding to 0.5rem */
        min-height: auto;
    }

    /* Reduce margin below sensor intro text on mobile */
    .sensor-intro-text {
        margin: 0 auto 1rem auto; /* Reduced from 3rem to 1rem */
        margin-top: 0 !important; /* Remove space above on mobile */
        padding: 0 1rem !important;
        padding-top: 0 !important; /* Remove top padding */
    }

    /* Add space below white container on mobile */
    .white-bg-container {
        padding: 0 0 2rem 0 !important; /* Add 2rem padding at bottom */
    }

    .one-sensor-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        margin-bottom: 5rem; /* Increased space below No Needles line */
        line-height: 1.5 !important; /* Space between lines */
    }

    /* Mobile: Show line break to split into two lines */
    .one-sensor-title br {
        display: block !important;
    }

    /* SHOW the mobile continuous line and sensor image stack */
    .sensor-stack-container {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 2rem; /* Space between text and image */
        margin-top: 2rem;
        margin-bottom: 0; /* Remove bottom padding after sensor image */
    }

    .continuous-text-mobile {
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(2rem, 6vw, 2.5rem);
        font-weight: 800; /* Extra bold - increased from 700 to 800 */
        background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        margin-top: 4rem; /* Increased padding above continuous line */
        padding-top: 2rem; /* Additional padding above */
        line-height: 1.3;
        text-align: center;
    }

    .sensor-image-mobile {
        width: 100%;
        max-width: 400px;
        height: auto;
        object-fit: contain;
        display: block;
        margin-bottom: 0; /* Remove bottom margin */
        filter: brightness(1.3);
    }
}

/* Sections 2.3, 2.5: Image + Text */
.tech-image-text-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 3rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Sections 2.4, 2.6: Text + Image */
.tech-text-image-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 3rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.image-container {
    flex: 1;
    max-width: 400px;
}

.image-container.left {
    margin-left: 2rem;
}

.image-container.right {
    margin-right: 2rem;
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.text-container {
    flex: 1;
    padding: 0 2rem;
}

.text-container.left-aligned {
    text-align: left;
}

.text-container.right-aligned {
    text-align: right;
}

.text-container h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 600;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.text-container p {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

.white-bg .text-container h3,
.white-bg .text-container p {
    color: #000000;
}

.black-bg .text-container h3,
.black-bg .text-container p {
    color: rgba(255, 255, 255, 0.9);
}

/* ===== TIMELINE SECTION 2.3 ===== */
.timeline-section {
    margin: 0; /* Removed bottom margin to eliminate gap */
    padding: 0 0 2rem 0; /* Added bottom padding as well */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: auto;
    position: relative;
}

/* Desktop layout with side-by-side image and text - centered */
.timeline-desktop-container {
    display: flex;
    min-height: 600px;
    background: var(--tech-black-bg);
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

/* Inner container for controlled width */
@media (min-width: 769px) {
    .timeline-desktop-container {
        max-width: 1100px;
        margin: 0 auto;
    }
}

.timeline-text-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.timeline-image-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.timeline-image-panel .athlete-image-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Set minimum height to ensure proper image display */
.timeline-image-panel {
    min-height: 400px;
}

/* Timeline section athlete images - ensure they overlap */
.timeline-image-panel .athlete-image {
    position: absolute !important;
    max-width: 120%;
    max-height: 600px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 1s ease-in-out;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block !important;
}

.timeline-image-panel .athlete-image.active {
    opacity: 1;
}


/* Mobile image container styling */
.timeline-mobile-image-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    display: none; /* Hidden by default (desktop) */
}

/* Desktop: hide mobile image container */
@media (min-width: 769px) {
    .timeline-mobile-image-container {
        display: none !important;
    }
}

.timeline-mobile-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    top: 0;
    left: 0;
}

.timeline-mobile-image.active {
    opacity: 1;
}

.timeline-mobile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
    pointer-events: none;
}

/* Mobile: Use image container instead of background */
@media (max-width: 768px) {
    .timeline-section {
        position: relative;
        overflow: hidden;
        min-height: 400px;
        margin-bottom: 0;
    }

    .timeline-mobile-image-container {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    

    .timeline-desktop-container {
        position: relative;
        flex-direction: column;
        z-index: 2;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }

    .timeline-image-panel {
        display: none !important;
    }

    .timeline-text-panel {
        z-index: 3;
        position: relative;
        background: transparent;
        width: 100%;
        padding: 2rem 1rem;
    }
    
    /* Ensure section 2.4 starts cleanly after section 2.3 */
    .timeline-section + .tech-text-section {
        position: relative;
        margin-top: 0;
        padding-top: 3rem;
        background: var(--tech-black-bg);
    }
}

.timeline-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: auto;
    padding: 0;
    z-index: 2;
    width: 100%;
    max-width: 450px;
}

/* Mobile: restore original padding and left align */
@media (max-width: 768px) {
    .timeline-container {
        padding: 3rem 1rem;
        justify-content: flex-start;
        align-items: flex-start;
        max-width: none;
    }
}

/* .timeline-line removed - no longer used */

.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2rem 0;
    width: 100%;
    opacity: 0.4;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1.0);
    text-align: left;
}

.timeline-item.medium {
    opacity: 1;
    transform: scale(1.15);
}

/* Remove focused state - only using normal and medium now */

/* Timeline dots removed - clean line design */

/* .timeline-connector - REMOVED (not needed) */

.timeline-content {
    margin-left: 0;
    flex: 1;
    max-width: 100%;
    background: transparent;
    padding: 1rem 0;
    border-radius: 8px;
    position: relative;
    z-index: 15;
    text-align: left;
}

.timeline-content p {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    transition: all 0.5s ease;
}

.timeline-item.active .timeline-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}

.timeline-item.focused .timeline-content p {
    color: #ffffff;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 400;
}

.timeline-item.focused .timeline-content {
    padding: 1.5rem 2.5rem;
}

/* ===== NEW SCIENCE SPLIT SECTION ===== */
.science-split{
  --mx: 1200px;
  --gap: clamp(18px, 2.4vw, 28px);
  --side: clamp(320px, 32vw, 520px);     /* left column width */
  --sticky-top-viewport: 50vh;           /* center in viewport */
  --radius: 16px;
  --text: #eaeaea; --muted: #bdbdbd;
  --card: #0b0b0b; --stroke: #1c1c1c;
  --accent1:#00e5ff; --accent2:#10ff88;
  color:var(--text); background:#1F252B !important;
  padding: clamp(40px, 8vw, 96px) min(5vw, 48px);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.science-wrap{
  max-width:var(--mx); margin:0 auto;
  display:grid; gap:clamp(24px,3vw,48px);
  grid-template-columns: 1fr 1fr; /* Equal width columns instead of var(--side) 1fr */
}

/* LEFT: left aligned and vertically centered on desktop */
.science-sticky{
  position: relative; /* Allow positioning */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically */
  align-items: flex-start; /* Align items to left */
  text-align: left; /* Left align text on desktop */
  min-height: 600px; /* Increased height for container */
}
.science-sticky h2{
  margin:0 0 10px;
  /* ~2x larger than before */
  font-weight:800;
  font-size: clamp(48px, 6.5vw, 90px); /* Increased font size */
  line-height:1.05;
  text-align: left; /* Explicitly left align */
}
.science-lead{
  margin:0; color:var(--muted);
  font-size: clamp(18px, 1.5vw, 22px); /* Increased font size */
  line-height:1.55;
}

/* RIGHT: step cards */
.science-steps{ display:grid; gap: clamp(24px, 4vw, 48px); }

.s-step{
  background:var(--card);
  border-radius:var(--radius);
  padding: clamp(16px, 2.2vw, 24px);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.s-step.is-active{
  background: linear-gradient(135deg, var(--accent1), var(--accent2)); /* Solid gradient background like font */
 /* Slightly more visible border */
}
.s-step__head h3{
  margin:0; font-size: clamp(18px, 1.8vw, 26px);
  line-height:1.25; font-weight:800;
}
.s-step__head h3 span{
  color: #FFFFFF; /* Default white color */
  background: none; /* No background by default */
}

/* Active state with black text (no gradient on text when bg is gradient) */
.s-step.is-active .s-step__head h3 span{
  color: #000000; /* Black text when card has gradient background */
  background: none; /* Ensure no gradient background on text */
}

/* Make all text readable in active card */
.s-step.is-active .s-step__head h3{
  color: #000000; /* Black heading text */
}

.s-step.is-active .s-step__sub{
  color: #333333; /* Dark subtitle text */
}

.s-step.is-active .s-step__body{
  color: #000000; /* Black body text */
}
.s-step__sub{ margin:6px 0 0; color:var(--muted); font-weight:600; }
.s-step__body{ margin:12px 0 0; line-height:1.6; }

/* CTA band */
.science-cta{
  text-align:center; background:#080808;
  border-radius:var(--radius); padding: clamp(18px, 3vw, 28px);
}
.science-cta h4{ margin:0 0 6px; font-size: clamp(22px, 2.2vw, 30px); }
.science-cta p{ margin:0 0 14px; color:var(--muted); }
.actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-block; padding:12px 18px; border-radius:12px;
 font-weight:700; color:#fff; text-decoration:none; }
.btn--primary{ border:0; color:#001010; background:linear-gradient(90deg,var(--accent1),var(--accent2)); }
.btn--ghost{ background:transparent; }

/* Mobile: stack layout */
@media (max-width: 920px){
  .science-wrap{ grid-template-columns: 1fr; }
  .science-sticky{ 
    text-align: center; /* Center align on mobile */
    min-height: 250px; /* Reduced height for mobile */
  }
}

/* ===== COMPARISON SECTION 2.5 ===== */
.comparison-section {
    margin: 0;
    padding: 3rem 3rem 3rem 3rem; /* Add top padding above heading */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
}


.comparison-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    border-radius: 15px;
}


.comparison-container h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: #000000;
    margin: 0 0 2rem 0;
}

.comparison-container h3 .gradient-text {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.comparison-table {
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: 15px;
}


.comparison-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.comparison-table th {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1.5rem 1rem;
    text-align: center;
    background: #f8f9fa;
    color: #333;
    border: none;
}

.comparison-table th.winner-column {
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    color: #000;
    font-weight: 600;
    position: relative;
}


/* Table corner styling */
.comparison-table th:first-child {
    border-top-left-radius: 15px;
}

.comparison-table th:last-child {
    border-top-right-radius: 15px;
}

.comparison-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}

.comparison-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table td {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    padding: 1.2rem 1rem;
    text-align: center;
    color: #555;
    border: none;
}

.comparison-table td.metric-name {
    font-weight: 500;
    text-align: left;
    background: #f8f9fa;
    color: #333;
}

.comparison-table td.winner-cell {
    background: rgba(0, 229, 255, 0.1);
    color: #000;
    font-weight: 300;
    position: relative;
}

.comparison-table tbody tr:hover {
    background: rgba(0, 229, 255, 0.05);
}

/* Mobile table optimization */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.7rem; /* Even smaller font for mobile */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .comparison-table th {
        padding: 0.8rem 0.5rem; /* Reduced padding */
        font-size: 0.75rem; /* Smaller header font */
    }
    
    .comparison-table td {
        padding: 0.6rem 0.5rem; /* Much smaller row heights */
        font-size: 0.65rem; /* Even smaller text */
        line-height: 1.3; /* Tighter line height */
    }
    
    .comparison-table td.metric-name {
        font-size: 0.7rem; /* Smaller metric names */
        padding: 0.6rem 0.5rem;
        background: #ffffff; /* White background on mobile */
        color: #000000; /* Black text on mobile */
    }
    
    /* Make table and container full width on mobile */
    .comparison-section {
        padding: 3rem 0; /* Remove horizontal padding */
        margin-top: 0; /* Remove top margin to eliminate gap with section 2.2 */
    }
    
    .comparison-container {
        padding: 0; /* Remove all container padding */
        max-width: 100%; /* Full width */
    }
    
    .comparison-table {
        max-width: 100%; /* Full width table */
        width: 100%;
    }
}

.comparison-table tbody tr:hover td.winner-cell {
    background: rgba(0, 229, 255, 0.15);
}

/* ===== SECTION 2.7: APP INTRODUCTION ===== */
.app-intro-section {
    margin: 0;
    padding: 4rem 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: auto;
    position: relative;
}

.app-intro-container {
    position: relative;
    top: 0;
    height: auto;
    max-width: 100%; /* Full width on desktop */
    width: 100%; /* Ensure full width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--background-gradient-start);
}

.app-video-container {
    flex: 1;
    max-width: 600px;
    padding: 1rem;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-video-container video {
    width: 100%;
    height: auto;
    border-radius: 15px;
    background: #1a1a1a; /* Fallback background */
    min-height: 300px; /* Ensure video container has height */
    object-fit: cover;
}

.app-video-container .app-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: contain;
    max-height: 650px;
}

.app-features-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.app-feature {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s ease;
    padding: 1.5rem;
    background: rgba(0, 229, 255, 0.05);
}

.app-feature.active {
    opacity: 1;
    transform: translateX(0);
    border-left-color: var(--primary-accent);
    background: rgba(0, 229, 255, 0.05);
}

.app-feature h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.5rem 0;
}

.app-feature p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
}

/* ===== MOBILE APP FEATURES (Section 2.5 Mobile) ===== */
/* Hide mobile features on desktop, show desktop features */
.app-features-mobile {
    display: none;
}

.desktop-features {
    display: flex;
}

/* App screenshots container with multiple overlapping images */
.app-video-container {
    position: relative;
}

.app-video-container .app-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.app-video-container .app-image.active {
    opacity: 1;
}

.app-video-container .app-image:first-child {
    position: relative; /* First image keeps container height */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Hide desktop features, show mobile features */
    .desktop-features {
        display: none;
    }
    
    .app-features-mobile {
        display: block;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    /* Mobile app intro section adjustments */
    .app-intro-section {
        padding: 2rem 0 1.5rem 0 !important;
    }
    
    .app-intro-container {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }
    
    .app-video-container {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
        padding: 0.75rem;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    .app-video-container .app-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        max-height: none !important;
        border-radius: 12px !important;
    }
    
    /* Mobile cards wrapper */
    .mobile-cards-wrapper {
        overflow: visible;
        padding: 0 1rem;
    }
    
    .mobile-cards-track {
        display: flex;
        transition: transform 0.3s ease;
        width: 320%; /* 4 cards × 80% (to show peek effect) */
        gap: 1rem;
    }
    
    .mobile-feature-card {
        width: calc(25% - 0.75rem); /* Each card is smaller to allow peek effect */
        padding: 1.25rem 1rem;
        box-sizing: border-box;
        text-align: center;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #1F252A;
        border-radius: 12px;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }
    
    .mobile-feature-card.active {
        background: #1F252A;
    }
    
    .mobile-feature-card h4 {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.1rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        margin: 0 0 0.75rem 0;
        line-height: 1.2;
    }
    
    .mobile-feature-card p {
        font-family: 'Poppins', sans-serif;
        font-size: 0.85rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.7);
        margin: 0;
        line-height: 1.4;
    }
    
    /* Dot indicators */
    .mobile-card-dots {
        display: flex;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        padding: 0 1rem;
        margin-bottom: 0.5rem;
    }
    
    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .dot.active {
        background: var(--primary-accent);
        transform: scale(1.1);
    }
    
    .dot:hover {
        background: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
    }
    
    .dot.active:hover {
        background: var(--primary-accent);
        transform: scale(1.1);
    }
}

/* ===== SECTION 2.8: VALIDATION ===== */
.validation-section {
    margin: 0;
    padding: 4rem 0; /* Remove horizontal padding for full width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

#section1-3 .validation-section {
    padding-top: 2rem; /* Reduce top padding since title is removed */
}

.validation-container {
    max-width: 1200px;
    margin: 0 auto;
}

.validation-container h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: #000000;
    margin: 0 0 3rem 0;
    text-align: center;
}

.validation-content {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
}

.validation-text {
    flex: 1.2; /* Match the graph container flex value */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content evenly */
    align-items: center; /* Center button horizontally */
}

.validation-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.6;
    color: #000000;
    margin: 0 0 2rem 0;
}

.validation-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 grid */
    gap: 2rem;
    margin-top: 1rem; /* Reduced from 2rem to bring closer to paragraph */
    margin-bottom: 2rem; /* Add space below for button */
    width: 100%; /* Full width of parent for centering */
}

.metric {
    text-align: center;
}

.metric-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: #666666;
}

/* Hide sections 3.2 and 3.3 */
.preorder-text-section,
.package-cards-section {
    display: none !important;
}

/* Learn More button styling - Match Preorder button with fixed width */
.learn-more-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent)) !important;
    color: #000 !important;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2) !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease !important;
    padding: 0.77rem 1.8rem !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
    font-size: 0.99rem !important;
    width: min(162px, 80vw) !important; /* Fixed width matching min-width */
    min-width: min(162px, 80vw) !important;
    max-width: min(162px, 80vw) !important; /* Same as min-width */
    text-align: center;
}

.learn-more-btn:hover,
.learn-more-btn:focus {
    background: linear-gradient(135deg, #00D1E8, #00E07A) !important;
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

.scatter-plot-container {
    flex: 1.2; /* Increased by 20% for larger graph */
    max-width: 540px; /* Increased by 20% from 450px */
    display: flex;
    flex-direction: column;
}

.scatter-plot-container h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #000000;
    margin: 1rem 0 0 0; /* Moved to bottom with top margin */
    text-align: center;
    order: 2; /* Place after the graph */
}

.scatter-plot {
    background: #1F252A;
    border-radius: 10px;
    padding: 1rem;
    order: 1; /* Place before the h4 text */
    flex: 1; /* Take up available space */
}

.plot-svg {
    width: 100%;
    height: auto;
}

/* ===== SECTION 3: PREORDER ===== */

/* Section 3.1: Preorder Transition */
.preorder-transition-section {
    text-align: center;
    margin: 0;
    padding: 4rem 0 3rem 0;
    background: #1F252A;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.preorder-transition-main {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: rgba(255, 255, 255, 0.98);
    font-weight: bold;
    text-transform: capitalize;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.preorder-transition-impact {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: rgba(255, 255, 255, 0.98);
    font-weight: bold;
    text-transform: capitalize;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.preorder-transition-cta {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #FFFFFF;
    font-weight: 400;
    margin: 0.2rem 0 0 0;
}

/* Removed .gradient-word - using standard .gradient-text instead */

/* Section 3.2: Preorder Text */
.preorder-text-section {
    margin: 0;
    padding: 3rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Section 3.2.5: Preorder Timeline */
.preorder-timeline-section {
    margin: 0;
    padding: 4rem 3rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.preorder-timeline-section .timeline-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.preorder-timeline-section h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

.timeline-intro {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 3rem 0;
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    text-align: left;
    transition: all 0.3s ease;
}

.timeline-step:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(10px);
}

.timeline-step.final-step {
    border-left-color: var(--secondary-accent);
    background: rgba(0, 255, 127, 0.05);
}

.timeline-step.final-step:hover {
    background: rgba(0, 255, 127, 0.1);
}

.step-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-accent);
    background: rgba(0, 229, 255, 0.2);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-step.final-step .step-number {
    color: var(--secondary-accent);
    background: rgba(0, 255, 127, 0.2);
}

.step-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.step-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.5rem 0;
    line-height: 1.6;
}

.step-timing {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-accent);
    background: rgba(0, 229, 255, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    display: inline-block;
}

.timeline-step.final-step .step-timing {
    color: var(--secondary-accent);
    background: rgba(0, 255, 127, 0.1);
}

.timeline-guarantee {
    background: rgba(0, 229, 255, 0.1);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
}

.timeline-guarantee h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-accent);
    margin: 0 0 1rem 0;
}

.timeline-guarantee p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.6;
}

/* Section 3.3: Package Cards */
.package-cards-section {
    margin: 0;
    padding: 4rem 3rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #000000;
}

.package-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    align-items: stretch;
}

.package-card {
    flex: 1;
    background: #ffffff;
    border-radius: 15px;
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 229, 255, 0.2);
}

.featured-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    color: #000;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.package-header h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #000;
    margin: 0 0 1rem 0;
    text-align: center;
}

.package-pricing {
    text-align: center;
    margin-bottom: 2rem;
}

.preorder-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: var(--primary-accent);
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preorder-note {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: #666;
    font-weight: 300;
    margin-top: 0.5rem;
    font-style: italic;
}

.discount-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin-bottom: 0.5rem;
}

.contact-pricing {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.discount-badge {
    background: #ff6b6b;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

.package-features {
    flex: 1;
    margin-bottom: 2rem;
}

.package-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.package-features li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: #333;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.package-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #000000;
    font-weight: bold;
    font-size: 1.1rem;
}

.package-cta-btn {
    width: 100%;
    padding: 0.77rem 1.8rem;
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    color: #000;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.99rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
}

.package-cta-btn:hover,
.package-cta-btn:focus {
    background: linear-gradient(135deg, #00D1E8, #00E07A);
    transform: translateY(-2px);
}

.package-cta-btn.secondary {
    background: #333;
    color: white;
}

.package-cta-btn.secondary:hover {
    background: #555;
    transform: translateY(-2px);
}

/* Mobile Responsive for Tech Sections */
@media (max-width: 768px) {
    .tech-image-text-section,
    .tech-text-image-section {
        flex-direction: column;
        gap: 2rem;
    }
    
    .image-container.left,
    .image-container.right {
        margin: 0;
        max-width: 100%;
    }
    
    .text-container {
        padding: 0;
        text-align: left !important;
    }
    
    .text-content {
        padding: 0 1rem;
    }
    
    .app-intro-container,
    .validation-content {
        flex-direction: column;
        gap: 2rem;
    }
    
    .validation-metrics {
        justify-content: center;
    }

    .scatter-plot-container {
        margin: 0 auto; /* Center the container on mobile */
        align-items: center; /* Center align children */
    }

    .package-cards-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .package-card.featured {
        transform: none;
    }
    
    .validation-metrics {
        flex-direction: column;
        gap: 1rem;
    }
    
    .timeline-step {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        text-align: center;
    }
    
    .timeline-step:hover {
        transform: translateY(-5px);
    }
    
    .step-number {
        align-self: center;
    }
    
    .preorder-timeline-section {
        padding: 3rem 1.5rem;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .product-intro,
    .device-card {
        flex-direction: column !important;
        gap: 2rem;
    }
    
    /* Mobile layout: text → image → button order */
    .body-section .product-intro .intro-content {
        order: 1 !important;
        text-align: center !important; /* Center text on mobile */
        display: block !important; /* Override flex column on mobile */
        min-height: auto !important; /* Remove fixed height on mobile */
    }
    
    .body-section .product-intro .intro-video {
        order: 2 !important;
        max-width: 100% !important;
    }
    
    /* Reset button positioning on mobile - remove auto margin */
    .product-intro .intro-content .preorder-btn {
        margin-top: 1.5rem !important; /* Normal spacing instead of auto */
    }
    
    /* Remove desktop-specific button positioning on mobile */
    #section1 .product-intro .intro-content a.btn.primary-btn.preorder-btn {
        margin-top: 1.5rem !important; /* Override desktop auto margin */
        align-self: center !important; /* Center button on mobile */
    }
    
    .intro-video,
    .device-image {
        max-width: 100%;
    }
    
    .description-text {
        text-align: left;
        padding: 0 1rem;
}

    /* ===== MERGED RESPONSIVE DESIGN RULES ===== */
    .nav-buttons-content {
        gap: 1.5rem;
    }
    
    .nav-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .body-section {
        padding: 3rem 1rem;
    }

    #section1.body-section {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0; /* Remove top padding - no gap between yellow and orange boxes */
    }
    
    .placeholder-content {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .nav-buttons-content {
        gap: 1rem;
    }
    
    .nav-btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .body-section {
        padding: 2rem 1rem;
    }
    
    /* Remove top padding from sections 2 and 3 on small mobile */
    #section2.body-section,
    #section3.body-section {
        padding-top: 0;
    }
}

/* ===== HARDWARE SHOWCASE STYLES ===== */
.hardware-showcase-section {
    min-height: 60vh; /* Reduced from 100vh to 60vh */
    background: #6D6D6D; /* Changed to match section 1.1 */
    display: flex;
    align-items: center;
    padding: 4rem 0 6rem 0; /* Increased top padding from 1rem to 4rem for more space above filmstrip */
    border-radius: 10px;
    margin: 0; /* Removed margin to eliminate gaps with adjacent sections */
}

/* Desktop-only styling for section 2.3a */
@media screen and (min-width: 769px) {
    /* Remove gap between section 2.3a and 2.4 */
    .hardware-showcase-section + .tech-text-section,
    .hardware-showcase-section + .tech-text-section-2 {
        margin-top: 0 !important;
    }
}

.hardware-showcase-container {
    width: 100%;
    max-width: 1600px; /* Increased container width */
    margin: 0 auto;
    display: flex;
    align-items: stretch; /* Make children same height */
    height: 50vh; /* Explicit height to match filmstrip-container */
    position: relative;
    gap: 2rem; /* Gap between yellow and green boxes */
    border-radius: 8px;
    padding: 0 0 0 8rem; /* Add 8rem padding on left to create space before yellow box */
}

/* Left Caption Panel - Increased width */
.caption-panel {
    flex: 0 0 35%; /* Increased from 22% to 35% */
    position: relative; /* Changed from sticky to relative */
    height: auto; /* Let it stretch to match container */
    display: flex;
    align-items: center;
    justify-content: center; /* Center the panel content */
    padding: 0; /* No padding - match purple box */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    border-radius: 6px;
    margin: 0; /* No margin */
}

.caption-content {
    color: white;
    max-width: 100%;
    width: 100%;
    height: 100%; /* Match yellow box height */
    padding: 3rem; /* Increased padding for desktop "Designed for Motion" card */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Changed from center to space-between for better control */
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.caption-divider {
    color: var(--primary-accent);
    font-size: 1.2rem;
    margin: 1rem 0 2rem 0;
    font-weight: 300;
}

.step-content {
    margin-bottom: 0;
    flex-shrink: 0; /* Prevent content from shrinking */
}

.step-index {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-accent);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.step-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    line-height: 1.3;
    transition: all 150ms ease;
}

.step-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    transition: all 150ms ease;
}

/* Progress Indicator */
.progress-container {
    margin-top: auto; /* Push to bottom of flex container */
    padding-top: 1rem; /* Small space above the progress bar */
}

.step-counter {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.5rem 0; /* Reduced margins to move progress bar closer to bottom */
}

/* Segmented Progress Bar */
.progress-segments {
    display: flex;
    gap: 4px;
    align-items: center;
}

.progress-segment {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: background 300ms ease;
}

.progress-segment.active {
    background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
}

/* Right Filmstrip Panel (67%) - shifted right with more space */
.filmstrip-panel {
    flex: 1; /* Take remaining space after 30% + gap */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always; /* Ensure stopping at each snap point */
    -webkit-overflow-scrolling: touch;
    padding: 0; /* No padding */
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    border-radius: 6px;
    margin: 0; /* No margin */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.filmstrip-panel::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

.filmstrip-container {
    display: flex;
    height: 50vh; /* Reduced from 100vh to 50vh */
    width: 380%; /* Reduced width since items are now larger */
    padding: 0; /* Remove all padding */
}

/* Removed .filmstrip-item - properties moved to .image-container */

.image-container {
    /* Scroll and layout properties from filmstrip-item */
    flex: 0 0 22%; /* Each item is 22% of filmstrip-container width */
    scroll-snap-align: center;
    scroll-snap-stop: always;

    /* Display properties */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Size properties */
    width: 100%;
    max-width: 500px;
    height: 100%;
    padding: 0.25rem; /* Minimal padding inside purple box */

    /* Animation properties from filmstrip-item */
    opacity: 0.3;
    transform: scale(0.95);
    transition: all 50ms ease-out; /* Instant activation - reduced from 150ms to 50ms */
}

.image-container.active {
    opacity: 1;
    transform: scale(1);
}

/* Show slight opacity for next item peek */
.image-container.active + .image-container {
    opacity: 0.4;
}

.showcase-image {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 15px; /* Increased from 1rem to 15px for more prominent rounding */
    /* Removed border for cleaner look */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    transition: all 50ms ease-out; /* Instant activation - reduced to 50ms */
}

/* Active image styling - no border needed */
.image-container.active .showcase-image {
    /* Removed border-color since we removed borders entirely */
}

/* ===== SECTION 1.2 - PER-ROW NUMBERS THAT HIGHLIGHT ON SCROLL ===== */

/* Section shell */
.how-steps{
  --sticky-offset: 80px; /* adjust if you have a fixed header */
  background:#000;
  color:#E6E6E6;
  padding-block: 3rem; /* Add padding to prevent content bleeding */
  overflow: hidden; /* Prevent text from leaking outside */
}

/* Each row: number + content */
.step{
  display:grid;
  grid-template-columns: min(180px, 14vw) 1fr;
  gap: clamp(20px, 3.5vw, 48px);
  align-items: start;
  width:min(1200px, 92vw);
  margin-inline:auto;
  margin-block: clamp(56px, 12vh, 140px);
  scroll-margin-top: calc(var(--sticky-offset) + 12vh);
}

/* Reduce top margin on first step */
.step:first-child{
  margin-top: clamp(20px, 4vh, 40px);
}

/* Number column */
.step-num{
  display:flex; align-items:flex-start; justify-content:flex-end;
  position: relative;   /* was: sticky */
  top: auto;            /* was: calc(var(--sticky-offset) + 10vh) */
  height: auto;         /* was: 0 */
  align-self: start;
}

.step-num span{
  display:block;
  line-height:.9;
  font-size: clamp(64px, 9vw, 160px);
  letter-spacing:-0.02em;

  /* subdued default look */
  color: transparent;
  background: linear-gradient(180deg, #2A2A2A, #0E0E0E);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1px #2C2C2C;
  opacity: .28;
  transform: translateY(.06em);
  transition: opacity .25s ease, -webkit-text-stroke-color .25s ease, transform .25s ease;
}

/* Active row: brighten the number */
.step.is-active .step-num span{
  opacity: .9;
  -webkit-text-stroke-color: #4a4a4a;
  transform: translateY(0);
  background: linear-gradient(180deg, #BFBFBF, #8F8F8F);
}

/* Content column */
.step-content{
  max-width: 72ch;
  opacity: .65;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
  text-align: left; /* Left align text in section 2.4 */
}
.step.is-active .step-content{
  opacity: 1; transform: none;
}

.step-content h3{
  margin:0 0 .6em 0;
  font-size: clamp(22px, 2.2vw, 28px);
  color:#BFBFBF; line-height:1.2;
}
.step-content .eyebrow{
  display:block; margin-top:.35em; font-weight:400; font-size:.85em; color:#8E8E8E;
}
.step-content p{
  margin:0; font-size: clamp(16px, 1.25vw, 18px); line-height:1.7;
  opacity: 0.5; /* Dimmer by default */
  transition: opacity 0.3s ease;
}

/* Brighten paragraph when step is active */
.step.is-active .step-content p {
  opacity: 1; /* Full brightness when active */
  color: #FFFFFF !important; /* Pure white for active paragraphs */
}

/* Make eyebrow text white when active */
.step.is-active .step-content .eyebrow {
  color: #FFFFFF !important;
}

/* Make step titles white when active (e.g., "Sample matrix access") */
.step.is-active .step-content h3 {
  color: #FFFFFF !important;
}

/* Remove bottom margin from the last step */
.step:last-child {
  margin-bottom: 0;
}

/* Mobile: stack; reduce number size and place above content */
@media (max-width: 860px){
  /* Force body-container and section to full width with no padding */
  #body-container,
  #how-section1,
  .how-steps{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .how-steps{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .step{
    display: flex !important; /* Change from grid to flex for better control */
    flex-direction: column;
    gap: 1.5rem; /* Space between number and content */
    margin-block: 3rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start; /* Align items to left edge */
  }

  .step-num{
    position: static !important;
    justify-content: flex-start;
    margin: 0 !important; /* Remove margin, use gap instead */
    padding: 0 1rem !important; /* Add horizontal padding to red box */
    height: auto !important;
    flex-shrink: 0; /* Don't shrink */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .step-num span{
    font-size: clamp(90px, 18vw, 120px) !important; /* Increased by 50% from clamp(60px, 12vw, 80px) */
    opacity: .35;
    display: block !important;
    line-height: 0.9 !important; /* Tight line height */
    transform: none !important;
  }

  .step-content{
    position: static;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1; /* Take remaining space */
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Make h3 and p same width as step-content (blue box) - force full width */
  .step-content h3,
  .step-content p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Restore only bottom margin for h3 */
  .step-content h3 {
    margin-bottom: 0.6em !important;
  }

  /* Remove bottom margin from the last step on mobile too */
  .step:last-child { margin-bottom: 0; }
}

/* Section 1 should now allow natural height since 1.2 has content */
#how-section1.body-section {
    min-height: 100vh; /* Restore min-height since Section 1.2 now has content */
}

/* Section 2 subsections styling */
.section-2-1 {
    padding: clamp(2rem, 4vh, 3rem) 0;
}

.section-2-2 {
    padding: 0; /* Removed padding to reduce height */
}

/* Section 2.4 - Dashboard cards section */
.section-2-4 {
    padding: 0; /* Removed padding to reduce height */
}

/* Section 3 subsections - Remove dead space, make them flow continuously */
.section-3-1 {
    padding: 0 !important; /* Remove all padding since it's now at the top of section 3 */
}

.section-3-2 {
    padding: 0 !important; /* Remove all padding to eliminate dead space */
}

.section-3-3 {
    padding: 0 0 3rem 0 !important; /* Only bottom padding for final section */
}

/* Section 3 structure is now fixed - 3.2 and 3.3 are div elements inside Section 3 */

/* ===== SECTION 2.2: APP CARDS ===== */
.app-cards-section {
    background: #000;
    padding: 0; /* Removed padding to fit height of cards container */
    overflow: hidden;
    position: relative;
}

.app-cards-container {
    max-width: 100%;
    position: relative;
}

.app-cards-wrapper {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    gap: 100px; /* Increased gap between cards */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 calc(50vw - 400px); /* Center the active card */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 20px;
}

.app-cards-wrapper::-webkit-scrollbar {
    display: none;
}

.app-card {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    align-items: stretch;
    background: #0b0b0b;
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: center;
    height: 650px; /* Fixed height for consistency */
    transition: all 0.3s ease;
    filter: blur(2px) brightness(0.5);
    opacity: 0.7;
    transform: scale(0.95);
    /* Safari fixes */
    min-width: fit-content;
    width: auto;
    max-width: none;
}

/* Active card state */
.app-card.active {
    filter: blur(0) brightness(1);
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Left section - App screenshot */
.app-left {
    flex: none; /* More explicit than 0 0 auto */
    display: block; /* Changed from flex to block */
    background: #111;
    padding: 0; /* Remove padding from container */
    box-sizing: border-box;
    /* Safari fixes - force tight fitting */
    width: auto;
    min-width: auto;
    max-width: none;
    overflow: hidden;
    position: relative;
}

.app-left img {
    height: calc(650px - 40px); /* Explicit height: card height minus padding */
    width: auto;
    object-fit: contain;
    display: block;
    margin: 20px; /* Move padding to image margin */
    /* Safari fixes */
    flex-shrink: 0;
    max-width: calc(100vw - 500px); /* Prevent extreme widths */
    min-width: 0;
}

/* Right section - Fixed iPhone Pro Max width (430px) */
.app-right {
    flex: 0 0 430px; /* iPhone 15 Pro Max width */
    display: grid;
    grid-template-rows: 2fr 1fr; /* 2/3 athlete image, 1/3 text */
    background: #0e0e0e;
    overflow: hidden;
    /* Safari fixes */
    min-width: 430px;
    max-width: 430px;
    width: 430px;
}

/* Athlete image section - 2/3 height */
.athlete-image {
    position: relative;
    overflow: hidden;
}

.athlete-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient overlay on athlete image */
.athlete-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

/* Feature text section - 1/3 height */
.feature-text {
    background: #000;
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-text h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #f2f2f2;
    font-weight: 600;
}

.feature-text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #cfcfcf;
}

/* Hide swipe indicators on desktop */
.swipe-indicator {
    display: none;
}

/* Debug borders for each section */
.debug-borders .app-cards-section {
}

.debug-borders .app-cards-container {
}

.debug-borders .app-cards-wrapper {
}

.debug-borders .app-card {
}

.debug-borders .app-left {
}

.debug-borders .app-right {
}

.debug-borders .athlete-image {
}

.debug-borders .feature-text {
}


/* ===== APP CARDS NAVIGATION INDICATORS ===== */

/* Desktop Dots */
.app-cards-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    text-align: center;
    width: 100%;
}

.app-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.app-dot:hover {
    background: #555;
    transform: scale(1.1);
}

.app-dot.active {
    background: #0ef1c7; /* Brand color */
    transform: scale(1.2);
}

/* Mobile Arrows */
.app-cards-arrows {
    position: relative;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding-bottom: 2rem;
    z-index: 10;
}

.app-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.app-arrow:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.app-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: scale(0.9);
}

.app-arrow svg {
    width: 20px;
    height: 20px;
}

/* Responsive visibility */
.desktop-only {
    display: block;
}

/* Preserve grid display for sensor-split-container */
.sensor-split-container.desktop-only {
    display: grid;
}

.mobile-only {
    display: none;
}

/* ===== SECTION 2.4: DASHBOARD CARDS ===== */
/* Copy all app cards styles but with dashboard-specific selectors */
.dashboard-cards-section {
    background: #000;
    padding: 0; /* Remove all padding - red box height now matches green box */
    overflow-x: hidden; /* Prevent horizontal scroll on page */
    position: relative;
}

.dashboard-cards-section h2,
.dashboard-cards-section h3 {
    color: white;
}

.dashboard-cards-container {
    max-width: 1200px; /* Reduced from 1500px */
    width: 100%; /* Allow container to shrink on smaller screens */
    margin: 0 auto; /* Center the container */
    position: relative;
}

.dashboard-cards-wrapper {
    display: flex;
    flex-direction: row; /* Horizontal layout like app cards */
    gap: 100px; /* Space between cards - same as app cards */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 calc(50vw - 600px); /* Center the active card (600px = half of 1200px card width) */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.dashboard-cards-wrapper::-webkit-scrollbar {
    display: none;
}

.dashboard-card {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    align-items: stretch;
    background: #0b0b0b;
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: center; /* Center cards when scrolling */
    height: 650px;
    width: 1200px; /* Reduced from 1500px */
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

/* Dashboard right section - Athlete image and text (300px on left for ALL cards) */
.dashboard-right {
    flex: 0 0 300px; /* Fixed 300px width - always on left */
    display: grid;
    grid-template-rows: 2fr 1fr;
    background: #0e0e0e;
    overflow: hidden;
    order: 1; /* Always on left */
}

/* Dashboard left section - Screenshot container (900px on right for ALL cards) */
.dashboard-left {
    flex: 0 0 900px; /* Fixed 900px width - always on right */
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 0% 0%, #1a1a1a, #6b6b6b, #1a1a1a); /* Section 1.5 gradient */
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    order: 2; /* Always on right */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.dashboard-left img {
    height: calc(650px - 40px);
    width: auto;
    object-fit: contain;
    display: block;
    margin: 20px;
    flex-shrink: 0;
    max-width: calc(100% - 40px);
    min-width: 0;
}

/* Remove alternating layout - all cards now have same layout */
.dashboard-card:nth-child(2) .dashboard-left,
.dashboard-card:nth-child(4) .dashboard-left {
    order: 2; /* Keep screenshot on right */
}

.dashboard-card:nth-child(2) .dashboard-right,
.dashboard-card:nth-child(4) .dashboard-right {
    order: 1; /* Keep athlete on left */
}

/* Hide mobile-text on desktop - it's for mobile only */
.dashboard-card .mobile-text {
    display: none;
}

/* Dashboard navigation indicators - Hidden for vertical layout */
.dashboard-cards-dots {
    display: none; /* Hide dots for vertical layout on desktop */
}

.dashboard-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dashboard-dot:hover {
    background: #555;
    transform: scale(1.1);
}

.dashboard-dot.active {
    background: #0ef1c7;
    transform: scale(1.2);
}

/* Dashboard mobile arrows - Hidden for vertical layout */
.dashboard-cards-arrows {
    display: none; /* Hide arrows for vertical layout on desktop */
}

.dashboard-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.dashboard-arrow:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.dashboard-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: scale(0.9);
}

.dashboard-arrow svg {
    width: 20px;
    height: 20px;
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) and (not (contain: paint)) {
    /* More specific Safari targeting */
    .app-left {
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        vertical-align: top !important;
    }
    
    .app-left img {
        vertical-align: top !important;
        max-width: none !important;
    }
    
    .app-card {
        display: inline-flex !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* Minimal Safari body width fix - only target the hero bleeding issue */
    body {
        position: relative;
        overflow-x: hidden !important;
    }
    
    /* Only fix hero section visibility in Safari */
    .hero, .hero-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .app-cards-wrapper {
        padding: 0 20px;
        gap: 60px;
    }
}

@media (max-width: 640px) {
    .app-cards-section {
        padding: 0; /* Removed padding for mobile too */
    }
    
    .app-cards-wrapper {
        gap: 20px; /* Reduced gap for mobile */
        padding: 0; /* Full width for mobile - removed horizontal padding */
        padding-right: 50vw; /* Add padding at the end to allow last card to scroll fully */
        transform: none; /* Remove scale transform */
        transform-origin: left top;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-left: 0; /* Adjusted for full width */
        width: 100vw; /* Ensure full viewport width */
    }
    
    /* Mobile card sizing and positioning */
    .app-card {
        height: 400px; /* Smaller for mobile */
        min-width: auto;
        width: auto; /* Let content determine width */
        max-width: none;
        margin-left: 0; /* Remove left margin */
        scroll-snap-align: start; /* Align to left edge */
        scroll-snap-stop: always; /* Force stop on each card */
        display: flex;
        flex-shrink: 0; /* Prevent cards from shrinking */
    }

    /* Mobile left section - app screenshot */
    .app-left {
        flex: 0 0 auto;
        width: auto;
        min-width: 150px; /* Ensure minimum space for app screenshot */
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Align to left */
    }

    .app-left img {
        height: calc(400px - 40px); /* Adjusted for mobile card height */
        width: auto;
        margin: 20px 15px 20px 0; /* Adjusted margins for better alignment */
        max-width: 180px; /* Slightly smaller cap for mobile */
        min-width: 120px; /* Ensure minimum visibility */
    }

    /* Mobile right section - 75% visible */
    .app-right {
        flex: 0 0 calc(75vw - 200px); /* 75% viewport minus space for app screenshot */
        max-width: calc(75vw - 200px);
        min-width: 200px;
        width: calc(75vw - 200px);
        overflow: hidden;
    }
    
    .feature-text {
        padding: 15px 20px;
    }
    
    .feature-text h3 {
        font-size: 16px;
    }
    
    .feature-text p {
        font-size: 13px;
        line-height: 1.3;
    }
    
    /* Remove active/inactive effects on mobile */
    .app-card:not(.active) {
        transform: none;
        filter: none;
        opacity: 1;
    }
    
    .app-card.active {
        transform: none;
    }
    
    /* Mobile navigation visibility */
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: flex;
    }
    
    .app-cards-section {
        position: relative;
    }
    
    /* Ensure arrows stay below cards on mobile - center aligned */
    .app-cards-arrows {
        position: relative;
        margin-top: 30px;
        justify-content: center;
        padding-bottom: 2rem;
    }
    
    /* Section 2 container - full width on mobile */
    #section2.body-section,
    #how-section2.body-section {
        padding-left: 0;
        padding-right: 0;
    }

    /* Dashboard cards section - make full width */
    .section-2-4.dashboard-cards-section {
        padding: 0 0 6rem 0;
    }

    /* Dashboard cards mobile styles - horizontal scroll like app cards */
    .dashboard-cards-wrapper {
        flex-direction: row; /* Horizontal scroll */
        gap: 30px;
        padding: 0 calc(50vw - 180px); /* Center active card (180px = half of 360px card width) */
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-card {
        height: 500px;
        width: 360px; /* Fixed width for horizontal scroll */
        flex-shrink: 0; /* Don't shrink cards */
        scroll-snap-align: center; /* Center cards when scrolling */
        display: flex;
        flex-direction: column; /* Vertical layout: screenshot top, text bottom */
    }

    /* Screenshot section - 70% of card - ALWAYS on top for mobile */
    .dashboard-left {
        flex: 0 0 70%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 0% 0%, #1a1a1a, #6b6b6b, #1a1a1a); /* Section 1.5 gradient */
        order: 1 !important; /* Force screenshot to top for all cards */
    }

    .dashboard-left img {
        height: 90%;
        width: auto;
        max-width: 90%;
        margin: 0;
        object-fit: contain;
    }

    /* Hide athlete section on mobile */
    .dashboard-right {
        display: none;
    }

    /* Show mobile-text section - 30% of card - ALWAYS on bottom for mobile */
    .dashboard-card .mobile-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 0 0 30%;
        width: 100%;
        background: #FFFFFF; /* Changed to white background */
        padding: 1.5rem;
        box-sizing: border-box;
        order: 2; /* Force text to bottom for all cards */
        border-bottom-left-radius: 20px; /* Curved bottom corners on mobile */
        border-bottom-right-radius: 20px;
    }

    .dashboard-card .mobile-text h3 {
        margin: 0 0 0.5rem 0;
        font-size: 1.1rem;
        color: #000000; /* Changed to black text */
        font-weight: 600;
    }

    .dashboard-card .mobile-text p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.4;
        color: #333333; /* Changed to dark gray/black text */
    }

    /* Remove alternating order on mobile */
    .dashboard-card:nth-child(2) .dashboard-left,
    .dashboard-card:nth-child(4) .dashboard-left {
        order: 0;
    }

    /* Show dashboard arrows on mobile - same as app cards */
    .dashboard-cards-arrows {
        display: flex; /* Show arrows on mobile */
        position: relative;
        margin-top: 30px;
        justify-content: flex-end;
        padding-right: 20px;
    }
}


/* Mobile Responsive */
@media (max-width: 768px) {
    /* Section 2.3a mobile - removed debug borders */
    .hardware-showcase-container {
        flex-direction: column;
        height: auto;
        padding: 3rem 0 0 0 !important; /* Remove left padding, only keep top padding */
        align-items: center; /* Center-align children (yellow and green boxes) */
    }

    .caption-panel {
        flex: none;
        position: relative;
        height: auto;
        padding: 0 1rem; /* Internal padding for text content */
        margin: 0 1rem; /* External margin to create space from red box - equal on left and right */
        background: rgba(0, 0, 0, 0.8);
    }

    .filmstrip-panel {
        /* No border */
    }

    /* Make cyan box match yellow box in mobile - same size, no padding */
    .hardware-showcase-section .caption-content {
        width: 100%;
        height: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .step-title {
        font-size: 1.5rem;
    }
    
    .filmstrip-panel {
        flex: none;
        height: 60vh;
    }
    
    .filmstrip-container {
        height: 60vh;
    }

    .hardware-showcase-section .image-container {
        padding: 0.25rem 0.1rem; /* Very small gap on mobile for closer images */
    }
    
    .showcase-image {
        max-height: 50vh;
    }
}

/* ===== HX CAROUSEL — CONTENT-FIT LEFT COLUMN (NO CROPPING) ===== */
.hx-carousel{
  --card-gap: 96px;                         /* ~1 inch */
  --card-h: clamp(520px, 64vh, 780px);      /* per carousel can override */
  --left-max: 48%;                          /* per carousel can override */
  --shot-vpad: 8px;                         /* tiny vertical breathing room */
  color:#eaeaea; background:#000;
  padding-block: clamp(36px, 8vh, 96px);
}

/* Rail */
.hx-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  gap:var(--card-gap);
  overflow-x:auto; padding-inline:clamp(16px,4vw,48px);
  scroll-snap-type:x mandatory; scroll-padding:0 50%;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.hx-rail::-webkit-scrollbar{ display:none; }

/* Card: LEFT track is sized by its content width (the image) but capped by --left-max */
.hx-card{
  scroll-snap-align:center; scroll-snap-stop:always;
  height:var(--card-h);
  display:grid;
  /* KEY: content-fit with a max cap — no more empty margins or tiny images */
  grid-template-columns: minmax(220px, min(max-content, var(--left-max))) 1fr;
  background:#0b0b0b; border-radius:20px; overflow:hidden;
  filter:brightness(.92) saturate(.95) blur(.25px);
  opacity:.78;
  transition:filter .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.hx-card.hx-active{ filter:none; opacity:1; box-shadow:0 20px 40px rgba(0,0,0,.35); }

/* LEFT — screenshot fills the card height; never crops */
.hx-left{
  min-width:0; display:grid; place-items:center; background:#111;
}
.hx-left img{
  display:block;
  height:calc(100% - (var(--shot-vpad) * 2));
  width:auto; max-width:100%;
  object-fit:contain;            /* no cropping, keeps aspect */
  margin-block:var(--shot-vpad); /* tiny breathing room */
  background:#000;
  border-radius:8px;             /* remove if you want pure edge-to-edge */
}

/* RIGHT — athlete (top) + black copy bar (bottom) */
.hx-right{
  min-width:0; min-height:0;
  display:grid; grid-template-rows:minmax(0,1fr) auto;
  background:#0e0e0e;
}
.hx-athlete{ position:relative; overflow:hidden; min-height:0; }
.hx-athlete img{ width:100%; height:100%; object-fit:cover; display:block; }
.hx-athlete::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
}
.hx-copy{
  background:#000;
  padding:clamp(14px, 2.4vw, 22px);
}
.hx-copy h3{ margin:0 0 6px; font-size:clamp(18px,2vw,22px); color:#f2f2f2; }
.hx-copy p{ margin:0; color:#cfcfcf; line-height:1.55; }

/* Responsive */
@media (max-width:980px){
  .hx-carousel{ --left-max: 52%; --card-h: clamp(500px, 66vh, 780px); }
}
@media (max-width:640px){
  .hx-card{ grid-template-columns:1fr; height:auto; }
  .hx-left{ padding-block:6px; }
  .hx-right{ grid-template-rows:auto auto; }
  .hx-athlete{ aspect-ratio:3/4; }
}

/* (Optional) motion preference – loosen snap */
@media (prefers-reduced-motion: reduce){
  .hx-rail{ scroll-snap-type:x proximity; }
}


/* ===== COMPREHENSIVE DEBUG BORDERS - DISABLED =====
   ALL DEBUG BORDERS COMMENTED OUT - ENABLE ONLY WHEN NEEDED 
/*
/* Using outline and box-shadow to avoid affecting layout/positioning */

/* Ensure all elements use border-box sizing */
.body-container * {
    box-sizing: border-box !important;
}

/* ========== MAIN CONTAINERS ========== */

/* Body Container */
.body-container {
    position: relative;
}





/* ========== MAIN SECTIONS ========== */

/* Section 1 */
/* Section 1 main debug border removed */

/* Section 1 label removed */

/* Section 2 - REMOVED debug border and label */


/* ========== SECTION 1 SUBSECTIONS ========== */

/* Section 1.1 - Product Intro (Meet Cori) */
/* Section 1.1 product-intro debug border removed */

/* Section 1.1 label removed */

/* Section 1.2 - Hardware Showcase */
/* Section 1.2 hardware showcase debug removed */

/* Section 1.3 - Transition */
/* Section 1.3 transition debug removed */

/* Section 1.4 - Description */
/* Section 1.4 description debug removed */

/* ========== SECTION 1.5 - STEP CARDS ========== */

.setup-process-section {
    padding: 4rem 0;
    background: radial-gradient(circle at 0% 0%, #1a1a1a, #6b6b6b, #1a1a1a);
    width: 100%;
}

.setup-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.setup-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 1rem;
}

.setup-title .white-text {
    color: #FFFFFF;
}

.setup-title .gradient-text {
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.setup-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* DESKTOP: Staircase layout */
.setup-steps-desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem; /* Increased from 2rem to 4rem for more horizontal spacing */
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem; /* Reduced from 4rem to 2rem */
}

.setup-steps-mobile {
    display: none;
}

/* Step Card - Desktop */
.setup-step {
    background: #1F252A;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Removed height/min-height - let flex children determine card height naturally */
}

/* Staircase effect - each card progressively lower */
.setup-step[data-step="1"] {
    margin-top: 0;
}

.setup-step[data-step="2"] {
    margin-top: 4rem; /* Step down */
}

.setup-step[data-step="3"] {
    margin-top: 8rem; /* Step down more */
}

.setup-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3); /* Changed from cyan to white */
}

/* Top 70% - Image EDGE TO EDGE */
.step-image {
    flex: 7;
    padding: 0; /* Remove padding for edge-to-edge */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.step-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    min-height: 300px;
}

/* Apply enhancement only to step 3 image */
.setup-step[data-step="3"] .step-image img {
    filter: brightness(1.15) contrast(1.1) saturate(1.2);
}

/* Bottom 30% - Number + Text WHITE BACKGROUND */
.step-bottom {
    flex: 3;
    display: flex;
    padding: 1rem 1.5rem 1.5rem 1.5rem; /* Increased bottom padding from 0.5rem to 1.5rem */
    gap: 1rem;
    align-items: flex-start;
    background: #FFFFFF; /* White background */
}

/* Left 20% - Number */
.setup-process-section .step-number {
    flex: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    background: none;
    border-radius: 0;
    width: auto;
    height: auto;
}

/* Right 80% - Text BLACK ON WHITE */
.step-text {
    flex: 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.step-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #000000; /* Black text */
    margin: 0 0 0.5rem 0;
}

.step-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #333333; /* Dark gray text */
    margin: 0;
    line-height: 1.5;
}

/* MOBILE: Hide desktop, show mobile version */
@media screen and (max-width: 768px) {
    .setup-steps-desktop {
        display: none;
    }

    /* Make section 1.5 background full width on mobile */
    .setup-process-section {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        padding-left: 0;
        padding-right: 0;
    }

    .setup-steps-mobile {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem; /* Padding for cards only */
    }

    .setup-step-mobile {
        background: #1F252A;
        border-radius: 12px;
        overflow: hidden;
    }

    .step-content-mobile {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Top 70% - Number (left 30%) + Image (right 70%) */
    .step-top-mobile {
        flex: 7;
        display: flex;
        padding: 0; /* Remove padding for edge-to-edge image */
        gap: 0;
    }

    /* Number on left - 30% */
    .step-number-mobile {
        flex: 3;
        font-family: 'Montserrat', sans-serif;
        font-size: 3.5rem;
        font-weight: bold;
        color: #FFFFFF; /* Changed to white instead of gradient */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    /* Image on right - 70% EDGE TO EDGE */
    .step-image-mobile {
        flex: 7;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .step-image-mobile img {
        width: 100%;
        height: auto;
        object-fit: contain; /* Fit image within container without cropping */
        min-height: 200px;
    }

    /* Apply enhancement only to step 3 image on mobile */
    .setup-step-mobile[data-step="3"] .step-image-mobile img {
        filter: brightness(1.15) contrast(1.1) saturate(1.2);
    }

    /* Bottom 30% - Heading + Subtext WHITE BACKGROUND */
    .step-bottom-mobile {
        flex: 3;
        padding: 1rem 1.5rem 1.5rem 1.5rem;
        background: #FFFFFF; /* White background */
    }

    .step-text-mobile h3 {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.25rem;
        font-weight: 600;
        color: #000000; /* Black text */
        margin: 0 0 0.5rem 0;
    }

    .step-text-mobile p {
        font-family: 'Poppins', sans-serif;
        font-size: 0.9rem;
        color: #333333; /* Dark gray text */
        margin: 0;
        line-height: 1.5;
    }
}

/* ========== SECTION 2 SUBSECTIONS ========== */

/* Section 2.1 - Technology Transition */
/* Section 2.1 - Tech Transition - REMOVED debug border and label */

/* Section 2.2 - Tech Text */
.body-container .tech-text-section:first-of-type {
    outline: 2px solid rgba(220, 20, 60, 0.9) !important;
    position: relative;
}

.body-container .tech-text-section:first-of-type::before {
    content: "SECTION 2.2 - TECH TEXT";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(220, 20, 60, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 2.3 - Timeline - Debug styles removed */

/* Section 2.4 - Second Tech Text */
.body-container .tech-text-section:last-of-type {
    outline: 2px solid rgba(255, 20, 147, 0.9) !important;
    position: relative;
}

.body-container .tech-text-section:last-of-type::before {
    content: "SECTION 2.4 - TECH TEXT 2";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(255, 20, 147, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 2.5 - App Introduction */
.body-container .app-intro-section {
    outline: 2px solid rgba(138, 43, 226, 0.9) !important;
    position: relative;
}

.body-container .app-intro-section::before {
    content: "SECTION 2.5 - APP INTRO";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(138, 43, 226, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 2.6 - Validation - REMOVED debug border and label */

/* ========== SECTION 3 SUBSECTIONS ========== */

/* Section 3.1 - Preorder Transition - REMOVED debug border and label */

/* Section 3.2 - Preorder Text */
.body-container .preorder-text-section {
    outline: 2px solid rgba(100, 149, 237, 0.9) !important;
    position: relative;
}

.body-container .preorder-text-section::before {
    content: "SECTION 3.2 - PREORDER TEXT";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(100, 149, 237, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 3.3 - Package Cards */
.body-container .package-cards-section {
    outline: 2px solid rgba(50, 205, 50, 0.9) !important;
    position: relative;
}

.body-container .package-cards-section::before {
    content: "SECTION 3.3 - PACKAGE CARDS";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(50, 205, 50, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* ========== INNER ELEMENTS ========== */




/* Interactive elements using box-shadow */
.body-container .btn,
.body-container button {
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.6) !important;
}






/* ===== DEBUG BORDERS DISABLED - END COMMENT ===== */

/* ===== CONDITIONAL DEBUG BORDERS FOR SECTIONS 2 AND 3 ===== */
/* Add 'debug-mode' class to body to enable these borders */
.debug-mode #section2.body-section {
    outline: 3px solid rgba(255, 215, 0, 0.9) !important; /* Yellow */
    position: relative;
}

.debug-mode #section2.body-section::before {
    content: "SECTION 2 - TECHNOLOGY";
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 215, 0, 1);
    color: black;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    z-index: 99997;
    pointer-events: none;
}


/* Section 2 Subsections */
.debug-mode .tech-transition-section {
    outline: 2px solid rgba(255, 69, 0, 0.9) !important;
    position: relative;
}

.debug-mode .tech-transition-section::before {
    content: "SECTION 2.1 - TECH TRANSITION";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(255, 69, 0, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 3 Subsections */
.debug-mode .preorder-transition-section {
    outline: 2px solid rgba(255, 105, 180, 0.9) !important;
    position: relative;
}

.debug-mode .preorder-transition-section::before {
    content: "SECTION 3.1 - PREORDER TRANSITION";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(255, 105, 180, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 2.2 - Tech Text */
.debug-mode .tech-text-section-1 {
    outline: 2px solid rgba(220, 20, 60, 0.9) !important;
    position: relative;
}

.debug-mode .tech-text-section-1::before {
    content: "SECTION 2.2 - TECH TEXT";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(220, 20, 60, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 2.3a - Hardware Showcase (copied from 1.2) */
/* Section 2.3a - Hardware Showcase debug mode styles removed */

/* Section 2.3 - Timeline debug mode styles removed */

/* Section 2.4 - Tech Text 2 */
.debug-mode .tech-text-section-2 {
    outline: 2px solid rgba(255, 20, 147, 0.9) !important;
    position: relative;
}

.debug-mode .tech-text-section-2::before {
    content: "SECTION 2.4 - TECH TEXT 2";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(255, 20, 147, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 2.5 - App Introduction */
.debug-mode .app-intro-section {
    outline: 2px solid rgba(138, 43, 226, 0.9) !important;
    position: relative;
}

.debug-mode .app-intro-section::before {
    content: "SECTION 2.5 - APP INTRO";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(138, 43, 226, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 2.6 - Validation */
.debug-mode .validation-section {
    outline: 2px solid rgba(0, 128, 128, 0.9) !important;
    position: relative;
}

.debug-mode .validation-section::before {
    content: "SECTION 2.6 - VALIDATION";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(0, 128, 128, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 3.2 - Preorder Text */
.debug-mode .preorder-text-section {
    outline: 2px solid rgba(100, 149, 237, 0.9) !important;
    position: relative;
}

.debug-mode .preorder-text-section::before {
    content: "SECTION 3.2 - PREORDER TEXT";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(100, 149, 237, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* Section 3.3 - Package Cards */
.debug-mode .package-cards-section {
    outline: 2px solid rgba(50, 205, 50, 0.9) !important;
    position: relative;
}

.debug-mode .package-cards-section::before {
    content: "SECTION 3.3 - PACKAGE CARDS";
    position: absolute;
    top: 5px;
    left: 10px;
    background: rgba(50, 205, 50, 1);
    color: white;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    z-index: 99996;
    pointer-events: none;
}

/* ===== APPLY HERO BUTTON STYLING TO SPECIFIC BUTTONS ONLY ===== */
/* Make only primary buttons and form buttons look like hero section buttons */

.btn:not(.nav-btn):not(.package-cta-btn),
.primary-btn,
.preorder-btn,
.submit-btn,
.close-btn {
    /* Copy exact hero button styling */
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent)) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2) !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease !important;
    padding: 0.77rem 1.8rem !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
    font-size: 0.99rem !important;
    width: auto !important;
    min-width: min(162px, 80vw) !important;
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Removed conflicting absolute positioning rule */

/* Hover states for styled buttons only */
.btn:not(.nav-btn):not(.package-cta-btn):hover,
.btn:not(.nav-btn):not(.package-cta-btn):focus,
.primary-btn:hover,
.primary-btn:focus,
.preorder-btn:hover,
.preorder-btn:focus,
.submit-btn:hover,
.submit-btn:focus,
.close-btn:hover,
.close-btn:focus {
    background: linear-gradient(135deg, #00D1E8, #00E07A) !important;
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* ===== FINAL MOBILE FIX - GUARANTEED TO WORK ===== */
@media screen and (max-width: 768px) {
    /* Mobile section 1.1: full width, proper order */
    .body-container .product-intro {
        width: 100% !important; /* Make section 1.1 full width instead of 80% */
        flex-direction: column !important;
        padding: 2rem 1rem !important; /* Adjust padding for mobile */
    }
    
    /* Text container: Meet Cori + Future text only */
    .body-container .product-intro .intro-content {
        order: 1 !important;
        text-align: center !important;
        display: block !important;
        min-height: auto !important;
        width: 100% !important; /* Make text container 100% width of section */
    }
    
    /* Image container */
    .body-container .product-intro .intro-video {
        order: 2 !important;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 3rem !important; /* Add space after image */
    }
    
    /* Button: now separate from text container, comes after image */
    .body-container .product-intro .preorder-btn {
        order: 3 !important; /* Button comes last */
        margin: 2rem auto 0 auto !important; /* Center button with top margin */
        display: block !important;
        width: fit-content !important;
    }
    
    /* Mobile: Reset desktop absolute positioning */
    .product-intro .preorder-btn {
        position: relative !important; /* Remove absolute positioning */
        top: auto !important; /* Reset top positioning */
        left: auto !important; /* Reset left positioning */
        margin: 2rem auto 0 auto !important; /* Center with top margin */
        z-index: auto !important; /* Reset z-index */
    }
    
    /* Mobile: Text container reset */
    .product-intro .intro-content {
        margin-bottom: 0 !important; /* Remove desktop bottom margin */
        text-align: center !important; /* Center align on mobile */
    }
    
    /* Mobile: Set correct order for flex layout */
    .body-section .product-intro .intro-content {
        order: 1 !important; /* Text first */
    }
    
    .body-section .product-intro .intro-video {
        order: 2 !important; /* Image second */
    }
    
    .body-section .product-intro .preorder-btn {
        order: 3 !important; /* Button third (after image) */
    }
    
    /* Remove any debug borders from section 1 on mobile */
    .debug-mode .intro-content,
    .debug-mode .intro-video,
    .debug-mode .hardware-showcase-section {
        outline: none !important;
        border: none !important;
    }

    .debug-mode .intro-content::before,
    .debug-mode .intro-video::before,
    .debug-mode .hardware-showcase-section::before {
        display: none !important;
    }


    /* Section 1.3 mobile styles */
    #section1-3 > div:last-child > div {
        padding-left: 0;
        padding-right: 0;
    }

    #section1-3 > div:last-child > div > div {
        margin-bottom: 2rem;
        width: 100%;
        display: block;
        padding-left: 0;
        margin-left: 0;
    }

    #section1-3 > div:last-child > div > div > span:first-child {
        display: inline-block;
        font-size: 2.464em; /* 10% increase from 2.24em (2.24 * 1.1 = 2.464) */
        margin-right: 0.5rem; /* Small gap between cyan and pink */
    }

    #section1-3 > div:last-child > div > div > span:last-child {
        display: inline-block;
        font-size: 0.84em; /* 20% further reduction from 1.05em (1.05 * 0.8 = 0.84) */
    }
    
    /* Mobile section 1.4: Center button and remove bottom gap */
    .body-container .description-section {
        margin-bottom: 0 !important;
        padding-bottom: 2rem !important;
    }
    
    .body-container .description-section .btn.primary-btn {
        margin: 2rem auto 0 auto !important;
        display: block !important;
        width: fit-content !important;
    }
    
    /* Mobile sections 2.2, 2.4, 3.2: Left align text with high specificity */
    .body-container .tech-text-section .text-content,
    .body-container .tech-text-section-1 .text-content,
    .body-container .tech-text-section-2 .text-content,
    .body-container .preorder-text-section .text-content,
    .body-container #section2 .text-content {
        text-align: left;
        max-width: 90%;
        margin: 0 auto;
    }

    /* Override justify alignment on all text elements with maximum specificity */
    .body-container .tech-text-section .text-content p,
    .body-container .tech-text-section-1 .text-content p,
    .body-container .preorder-text-section .text-content p,
    .body-container #section2 .tech-text-section .text-content p,
    .body-container #section3 .preorder-text-section .text-content p,
    #section2 .tech-black-bg .text-content,
    #section2 .tech-black-bg .text-content p {
        text-align: left;
    }

    /* Override ALL .text-content justify alignment on mobile */
    .text-content {
        text-align: left;
    }

    /* Section 2.4 specific: left align heading and paragraph */
    .tech-text-section-2 .text-content {
        text-align: left;
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .tech-text-section-2 .text-content h2 {
        text-align: center;
        max-width: 100%;
        padding: 1.5rem;
        margin: 0;
        font-size: 1.8rem;
    }

    /* Most specific selector for section 2.4 paragraph */
    .body-container .tech-text-section-2 .text-content p,
    .body-container #section2 .tech-text-section-2 .text-content p,
    #section2 .tech-text-section-2 .text-content p,
    .tech-text-section-2 .text-content p {
        text-align: left;
        padding: 0 1.5rem 1.5rem 1.5rem;
        margin: 0 auto;
        width: 100%;
        display: block;
    }

    .text-content p {
        text-align: left;
    }
    
    /* Mobile section 2.6: Match width to 2.2/2.4 and left align - MORE SPECIFIC */
    .validation-section .validation-container {
        max-width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Make validation content and text take full width */
    .validation-section .validation-content {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .validation-section .validation-text {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Match the same padding as text-content in 2.2/2.4 */
    .validation-section .validation-text p {
        padding: 0 1rem !important;
    }
    
    .body-container #section2 .validation-section .validation-text p,
    .body-container #section2 .validation-section h4,
    #section2 .white-bg .validation-text p,
    .validation-section.white-bg .validation-text p {
        text-align: left !important;
    }
    
    /* Force left align on the validation metrics as well */
    .body-container .validation-section .validation-metrics {
        justify-content: flex-start !important;
    }
    
    /* Center align h3 title, but keep paragraphs left aligned */
    .validation-container h3 {
        text-align: center !important;
    }
    
    /* Keep paragraphs left aligned */
    div.validation-section div.validation-text p {
        text-align: left !important;
    }
    
    /* Reduce height of image containers in section 2.3a hardware showcase on mobile */
    .filmstrip-panel {
        height: 35vh !important;
        position: relative !important;
    }
    
    .filmstrip-container {
        height: 35vh !important;
    }

    .hardware-showcase-section .image-container {
        height: auto !important;
        padding: 0.5rem 0.1rem !important;
        max-height: 24vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: scale(0.8) !important;
    }
    
    .showcase-image {
        max-height: 22vh !important;
        width: auto !important;
        object-fit: contain !important;
        border-radius: 8px !important;
    }
    
    /* 1. Reduce gap between text card and filmstrip on mobile */
    .hardware-showcase-container {
        gap: 1.5rem !important;
    }
    
    /* 2. Increase text brightness in text card on mobile */
    .step-title {
        color: rgba(255, 255, 255, 1) !important;
    }
    
    .step-description {
        color: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* Fix text container height to prevent bouncing */
    .caption-panel {
        height: auto !important;
        min-height: 250px !important;
        padding: 0 !important; /* Remove padding - cyan box should match yellow box exactly */
    }
    
    .step-content {
        height: 250px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 2rem !important; /* Add padding here for text spacing */
        box-sizing: border-box !important;
    }
    
    .step-description {
        min-height: 65px !important;
        display: flex !important;
        align-items: center !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    
    /* 3. Center filmstrip with equal margins and fix arrow positioning */
    .filmstrip-panel {
        width: calc(100% - 1rem) !important; /* Adjusted for right margin only */
        margin: 0.5rem 1rem 1rem 0 !important; /* Remove left margin, keep right */
        padding-left: 0 !important;
        position: relative !important;
    }
    
    /* PRODUCTION FIX: Complete mobile filmstrip layout override */
    .filmstrip-container {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        gap: 0 !important;
    }
    
    .hardware-showcase-section .filmstrip-container .image-container {
        /* Override desktop flex layout completely */
        flex: 0 0 70% !important;
        min-width: 70% !important;
        max-width: 70% !important;
        margin-right: 0 !important;
        padding: 0 !important;
        scroll-snap-align: center !important;
        width: 70% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: scale(1) !important; /* Override the 0.8 scale */
        max-height: none !important;
    }

    /* Make the actual image take full width */
    .hardware-showcase-section .filmstrip-container .image-container .showcase-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        min-width: 100% !important;
        object-fit: cover !important;
        max-height: none !important;
        border-radius: 8px !important; /* Restore border radius */
    }
    
    /* Fix arrow positioning - inside section 2.3a container */
    .hardware-showcase-section {
        position: relative !important;
        padding-bottom: 4rem !important;
    }
    
    .hardware-showcase-section .filmstrip-nav-arrows {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
        z-index: 100;
        pointer-events: auto;
    }
    
    .hardware-showcase-section .arrow-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.8);
        color: rgba(255, 255, 255, 0.9);
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        user-select: none;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .hardware-showcase-section .arrow-btn:hover {
        background: rgba(0, 0, 0, 0.9);
        transform: scale(1.1);
    }
    
    .hardware-showcase-section .arrow-btn.hidden {
        opacity: 0;
        pointer-events: none;
    }
}

/* Hide arrow navigation on desktop */
@media (min-width: 769px) {
    .filmstrip-nav-arrows {
        display: none !important;
    }
}

/* Section 1.2 Split Layout */
.section-1-2-split {
    padding: 3rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--primary-bg);
}

.split-content-card {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    overflow: hidden;
}

/* Left half: Athlete image */
.athlete-image-section {
    flex: 0 0 auto; /* Don't grow, don't shrink, auto width based on content */
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible; /* Allow image to set container size */
    padding: 0;
    margin: 4rem 0 8rem 0; /* Add 4rem space above image and 8rem space below */
    width: fit-content; /* Container fits image width */
}

.section-1-2-split .athlete-image {
    width: auto; /* Let image use its natural width */
    height: 100%;
    max-height: 800px;
    object-fit: contain;
    object-position: center;
    border-radius: 15px; /* Added rounded corners to match other images */
    display: block;
}

/* Right half: Text content */
.text-content-section {
    flex: 1;
    padding: 3rem 2rem;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 800px;
}

.top-content {
    align-self: center;
    margin-top: 4rem;
}

.bottom-content {
    align-self: flex-end;
    margin-bottom: 2rem;
}

.text-content-section .main-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
}

.heading-line {
    text-align: right;
    line-height: 1.1;
}

.text-content-section .sub-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0 auto;
    line-height: 1.6;
    max-width: 100%;
    text-align: right;
}

/* 15" MacBook (1440px) - Reduce container width */
@media (min-width: 1280px) and (max-width: 1600px) {
    .text-content-section .sub-heading {
        max-width: 85%;
        margin-left: auto;
    }
}

.text-content-section .tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
}

/* Desktop: Right align the tagline */
@media (min-width: 769px) {
    .text-content-section .tagline {
        text-align: right;
    }
}

.text-content-section .tagline .gradient-text {
    display: inline-block; /* Keep on same line with period */
    background: linear-gradient(135deg, #00E5FF 0%, #00FF7F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-content-section .heading-line.gradient-text {
    background: linear-gradient(135deg, #00E5FF 0%, #00FF7F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

@media (max-width: 768px) {
    .section-1-2-split {
        padding: 2rem 0 0 0; /* Remove bottom padding on mobile */
        width: 100%; /* Ensure full width */
    }
    
    .split-content-card {
        flex-direction: column;
        border: none;
        background: transparent;
        max-width: 100%;
        width: 100%; /* Ensure full width */
        margin: 0; /* Remove any margins */
        display: flex;
    }
    
    /* Mobile: Split the text content and reorder everything */
    .split-content-card .top-content {
        order: 1; /* Continuous Lactate text first */
    }
    
    .split-content-card .athlete-image-section {
        order: 2; /* Image second */
    }
    
    .split-content-card .bottom-content {
        order: 3; /* Needle-Free Lactate text last */
    }
    
    .athlete-image-section {
        height: auto; /* Let height be determined by image */
        width: 100%; /* 100% of screen width */
        margin: 2rem 0 0 0; /* Remove space below image on mobile */
        overflow: visible;
        order: 2; /* Image comes THIRD on mobile */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .section-1-2-split .athlete-image {
        width: 100% !important; /* Use full width of container */
        height: auto !important; /* Maintain aspect ratio */
        max-height: none !important;
    }
    
    .text-content-section {
        padding: 1rem 1rem; /* Use padding for spacing, not margins */
        text-align: left !important; /* Force left alignment */
        height: auto;
        justify-content: center;
        gap: 1.5rem;
        width: 100%; /* 100% of screen width */
        margin: 0; /* No margins */
        display: flex;
        flex-direction: column;
        box-sizing: border-box; /* Include padding in width calculation */
    }
    
    .text-content-section * {
        text-align: left !important; /* Ensure all child elements are left aligned */
    }
    
    /* Mobile ordering for text elements */
    .text-content-section .top-content {
        order: 1; /* Continuous Lactate and The first device come first */
    }
    
    .text-content-section .bottom-content {
        order: 3; /* Needle-Free Lactate comes last */
    }
    
    .top-content {
        align-self: center;
    }
    
    .text-content-section .heading-line {
        text-align: center;
    }

    .text-content-section .heading-line.gradient-text {
        margin-left: auto;
        margin-right: auto;
    }

    .bottom-content {
        align-self: flex-start; /* Left align container on mobile */
    }

    .text-content-section .main-heading {
        margin-bottom: 2rem;
    }

    .text-content-section .sub-heading {
        margin-bottom: 0;
    }

    .text-content-section .tagline {
        text-align: left; /* Left align on mobile */
    }

    /* Ensure tagline is left-aligned on mobile */
    .bottom-content .tagline {
        text-align: left;
    }
}

/* ========================================== */
/* DEBUG BORDERS FOR HOW.HTML SECTIONS */
/* ========================================== */

/* Section 1 - Technology */

/* Cache buster: 1757834214 */
/* DEBUG: Sun Sep 14 00:26:42 PDT 2025 - Button margin should be 2.5rem */

/* ========================================== */
/* SECTION 3.2 & 3.3 - STATS 2X2 GRID LAYOUT */
/* ========================================== */

/* Removed - these overly broad rules were conflicting with validation stats */

/* Learn More button for sections 3.2 and 3.3 */
.section-3-2 .learn-more-btn,
.section-3-3 .learn-more-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #0ef1c7 0%, #00a8cc 100%);
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
}

.section-3-2 .learn-more-btn:hover,
.section-3-3 .learn-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 241, 199, 0.3);
}

/* Desktop: button below graphs grid */
@media (min-width: 769px) {
    .section-3-2 .validation-graphs-grid,
    .section-3-3 .validation-graphs-grid {
        display: flex;
        flex-direction: column;
    }

    .section-3-2 .graphs-grid-container,
    .section-3-3 .graphs-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 0;
    }

    .section-3-2 .learn-more-btn-container,
    .section-3-3 .learn-more-btn-container {
        margin-top: 1.5rem;
        text-align: center; /* Centered within orange box */
    }
}

/* Mobile: button after stats */
@media (max-width: 768px) {
    .section-3-2 .learn-more-btn-container.desktop-only,
    .section-3-3 .learn-more-btn-container.desktop-only {
        display: none;
    }

    .section-3-2 .learn-more-btn-container.mobile-only,
    .section-3-3 .learn-more-btn-container.mobile-only {
        display: block;
        margin-top: 0.5rem; /* Reduced from 1.5rem */
        text-align: center;
    }
}

@media (min-width: 769px) {
    .section-3-2 .learn-more-btn-container.mobile-only,
    .section-3-3 .learn-more-btn-container.mobile-only {
        display: none;
    }

    .section-3-2 .learn-more-btn-container.desktop-only,
    .section-3-3 .learn-more-btn-container.desktop-only {
        display: block;
    }
}

/* ========================================== */
/* SECTION 2.4 - HORIZONTAL SCROLL LAYOUT FIX */
/* ========================================== */

/* Section 2.4 specific - Keep the layout we configured */
.section-2-4 .dashboard-cards-container {
    max-width: 100% !important; /* Make green container full width like red */
}

/* ========================================== */
/* SECTION 2.5 & 2.6 - VERTICAL DASHBOARD LAYOUT */
/* ========================================== */

/* Section 2.5 (how.html) and Section 2.6 (index.html) - Vertical stacked layout */
.section-2-5 .dashboard-cards-container,
.section-2-6 .dashboard-cards-container {
    max-width: 100% !important; /* Make green container full width like red */
}

.section-2-5 .dashboard-cards-wrapper,
.section-2-6 .dashboard-cards-wrapper {
    flex-direction: column !important; /* Stack vertically */
    gap: 3rem !important; /* Space between cards */
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important; /* No horizontal padding */
}

.section-2-5 .dashboard-card,
.section-2-6 .dashboard-card {
    width: 100% !important; /* Full width */
    max-width: 1200px !important;
    margin: 0 auto !important;
    scroll-snap-align: none !important;
}

/* Desktop only: Alternate alignment for cards 1,3 (left) and 2,4 (right) */
@media screen and (min-width: 769px) {
    .section-2-5 .dashboard-card:nth-child(1),
    .section-2-5 .dashboard-card:nth-child(3),
    .section-2-6 .dashboard-card:nth-child(1),
    .section-2-6 .dashboard-card:nth-child(3) {
        margin-left: 8rem !important; /* Much closer to center - increased from 2rem */
        margin-right: auto !important;
    }

    .section-2-5 .dashboard-card:nth-child(2),
    .section-2-5 .dashboard-card:nth-child(4),
    .section-2-6 .dashboard-card:nth-child(2),
    .section-2-6 .dashboard-card:nth-child(4) {
        margin-left: auto !important;
        margin-right: 8rem !important; /* Much closer to center - increased from 2rem */
    }

    .section-2-5 .dashboard-card:nth-child(4),
    .section-2-6 .dashboard-card:nth-child(4) {
        margin-bottom: 4rem !important;
    }

    /* Change section 2.6 background to white on desktop */
    .section-2-6.dashboard-cards-section {
        background: #ffffff !important;
    }

    /* Change section 2.6 text color to black for white background */
    .section-2-6 .section-title,
    .section-2-6 > .container > h2,
    .section-2-6 > .container > h3 {
        color: #000000 !important;
    }

    /* Add padding above section 2.6 heading */
    .section-2-6 .section-title,
    .section-2-6 > .container > h2 {
        padding-top: 4rem !important;
    }

    /* Keep dashboard card text white */
    .section-2-6 .dashboard-card .feature-text h3,
    .section-2-6 .dashboard-card .feature-text p {
        color: #ffffff !important;
    }
}

/* Cards 1 and 3: athlete+text LEFT, screenshot RIGHT */
.section-2-5 .dashboard-card:nth-child(1) .dashboard-right,
.section-2-5 .dashboard-card:nth-child(3) .dashboard-right,
.section-2-6 .dashboard-card:nth-child(1) .dashboard-right,
.section-2-6 .dashboard-card:nth-child(3) .dashboard-right {
    order: 1 !important; /* Athlete on left */
}

.section-2-5 .dashboard-card:nth-child(1) .dashboard-left,
.section-2-5 .dashboard-card:nth-child(3) .dashboard-left,
.section-2-6 .dashboard-card:nth-child(1) .dashboard-left,
.section-2-6 .dashboard-card:nth-child(3) .dashboard-left {
    order: 2 !important; /* Screenshot on right */
}

/* Cards 2 and 4: screenshot LEFT, athlete+text RIGHT - DESKTOP ONLY */
@media (min-width: 769px) {
    .section-2-5 .dashboard-card:nth-child(2) .dashboard-left,
    .section-2-5 .dashboard-card:nth-child(4) .dashboard-left,
    .section-2-6 .dashboard-card:nth-child(2) .dashboard-left,
    .section-2-6 .dashboard-card:nth-child(4) .dashboard-left {
        order: 1 !important; /* Screenshot on left */
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .section-2-5 .dashboard-card:nth-child(2) .dashboard-right,
    .section-2-5 .dashboard-card:nth-child(4) .dashboard-right,
    .section-2-6 .dashboard-card:nth-child(2) .dashboard-right,
    .section-2-6 .dashboard-card:nth-child(4) .dashboard-right {
        order: 2 !important; /* Athlete on right */
    }
}

/* Hide navigation elements for vertical layout */
.section-2-5 .dashboard-cards-dots,
.section-2-5 .dashboard-cards-arrows,
.section-2-6 .dashboard-cards-dots,
.section-2-6 .dashboard-cards-arrows {
    display: none !important;
}

/* Add space below the 4th card */
/* Hide section 2.3 transition */
.section-2-3 {
    display: none;
}

/* Add padding above Complete Performance Dashboard title for both mobile and desktop */
.section-2-5 .section-title,
.section-2-6 .section-title {
    padding-top: 3rem;
}

/* Mobile layout for section 2.5 and 2.6 */
@media (max-width: 768px) {
    #how-section2 {
        min-height: auto;
    }

    .section-2-5,
    .section-2-6 {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 0;
        margin-bottom: 0;
        padding-bottom: 2rem;
    }

    #how-section2 .section-2-5.dashboard-cards-section,
    .body-section .section-2-6.dashboard-cards-section {
        padding-bottom: 2rem;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .section-2-6.dashboard-cards-section {
        background: #ffffff;
    }

    .section-2-6 .section-title,
    .section-2-6 h2,
    .section-2-6 h3 {
        color: #000000;
    }

    .section-2-6 .dashboard-cards-container h2,
    .section-2-6 .dashboard-cards-container h3 {
        color: #000000;
    }

    #how-section3 {
        margin-top: 0;
        padding-top: 0;
    }

    .section-2-5 .dashboard-cards-container,
    .section-2-6 .dashboard-cards-container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 0;
        margin: 0;
        margin-bottom: 0;
        max-width: 100%;
        width: 100%;
    }

    .section-2-5 .dashboard-cards-container h3,
    .section-2-6 .dashboard-cards-container h3 {
        margin-bottom: 2rem;
    }

    .section-2-5 .dashboard-cards-wrapper.dashboard-vertical,
    .section-2-6 .dashboard-cards-wrapper.dashboard-vertical {
        gap: 3rem;
        margin: 0;
        padding: 0;
    }

    .section-2-5 .dashboard-card,
    .section-2-6 .dashboard-card {
        flex-direction: column;
        height: auto;
        border-radius: 20px;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .section-2-5 .dashboard-card:last-child,
    .section-2-6 .dashboard-card:last-child {
        margin-bottom: 0;
    }

    .section-2-5 .dashboard-left,
    .section-2-5 .dashboard-right,
    .section-2-6 .dashboard-left,
    .section-2-6 .dashboard-right {
        flex: 1 1 auto;
        order: 0; /* Reset order on mobile */
    }

    .section-2-5 .dashboard-left,
    .section-2-6 .dashboard-left {
        order: 1; /* Screenshot on top */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .section-2-5 .dashboard-right,
    .section-2-6 .dashboard-right {
        display: none; /* Hide athlete image on mobile */
    }

    .section-2-5 .mobile-text,
    .section-2-6 .mobile-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2rem;
        background: #ffffff; /* White background for text on mobile */
        color: #333333; /* Dark text color */
        margin: 0;
        border-bottom-left-radius: 20px; /* Bottom curved corners for ALL cards on mobile */
        border-bottom-right-radius: 20px;
    }

    .section-2-5 .mobile-text h3,
    .section-2-6 .mobile-text h3 {
        color: #333333;
        margin: 0;
    }

    .section-2-5 .mobile-text p,
    .section-2-6 .mobile-text p {
        color: #666666;
        margin: 0;
    }

    .section-2-5.dashboard-cards-section .dashboard-card:last-child,
    .section-2-6.dashboard-cards-section .dashboard-card:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .section-2-5.dashboard-cards-section .dashboard-card:nth-child(4),
    .section-2-6.dashboard-cards-section .dashboard-card:nth-child(4) {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

/* ========================================== */
/* SECTION 3.2 & 3.3 - REMOVE CYAN BOX GAPS & FIX IMAGE STRETCHING */
/* DESKTOP ONLY - Don't interfere with mobile 2x3 grid */
/* ========================================== */

@media (min-width: 769px) {
    /* Fix the validation card min-height that's causing stretching */
    .section-3-2 .validation-card-new,
    .section-3-3 .validation-card-new {
        min-height: 0; /* Remove min-height constraint */
        align-items: start; /* Don't stretch children */
    }

    .section-3-2 .validation-graphs-grid,
    .section-3-3 .validation-graphs-grid {
        gap: 0;
        grid-gap: 0;
        align-items: start; /* Align items to top instead of stretching */
        grid-template-rows: auto auto auto; /* Let rows size based on content, not equal heights */
        height: auto; /* Don't force 100% height */
    }

    .section-3-2 .validation-graph-item,
    .section-3-3 .validation-graph-item {
        margin: 0;
        padding: 0;
        height: auto; /* Let container height match image */
        min-height: 0; /* Remove any min-height */
        align-items: flex-start; /* Align to top */
        background: transparent; /* Remove background */
        border-radius: 0; /* Remove any border radius that might create gaps */
    }

    .section-3-2 .validation-graph-item img,
    .section-3-3 .validation-graph-item img {
        height: auto; /* Let image determine its own height based on width */
        width: 100%;
        object-fit: contain;
        display: block; /* Remove any inline spacing */
        border-radius: 0; /* Remove any border radius */
        margin: 0;
        padding: 0;
        max-height: none; /* Remove any max-height constraint */
    }

    /* Desktop stats styling with section-specific selectors */
    .section-3-2 .validation-stats-new h3,
    .section-3-3 .validation-stats-new h3 {
        font-size: 1.1rem;
    }

    .section-3-2 .validation-stats-new .stat-item,
    .section-3-3 .validation-stats-new .stat-item {
        gap: 0; /* Remove any gap between flex children */
    }

    .section-3-2 .validation-stats-new .stat-value,
    .section-3-3 .validation-stats-new .stat-value {
        font-size: 1.5rem; /* Increased to 1.5rem */
        margin: 0; /* No gap */
        padding: 0;
        line-height: 1; /* Tight line height */
        display: block; /* Block display to eliminate inline spacing */
    }

    .section-3-2 .validation-stats-new .stat-label,
    .section-3-3 .validation-stats-new .stat-label {
        font-size: 0.7rem;
        margin: 0; /* No gap between value and label */
        padding: 0;
        line-height: 1; /* Tight line height */
        display: block; /* Block display to eliminate inline spacing */
    }
}

/* ========================================== */
/* WHY LACTATE MONITORING MATTERS STYLING */
/* ========================================== */

#section2-2 .matter-header h2 {
    color: white !important;
    font-family: 'Montserrat', sans-serif !important;
}


/* Desktop layout for section 1.1 */
@media (min-width: 769px) {
    #section1-1.product-intro {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3rem 2rem;
    }

    #section1-1 .meet-cori {
        max-width: 900px; /* Original width */
        width: 100%;
        text-align: left; /* Left aligned text */
        margin-bottom: 2rem;
        align-self: flex-start; /* Move to left side */
        margin-left: 3rem; /* Small spacing from left edge */
    }

    #section1-1 .intro-description {
        max-width: 900px; /* Keep blue box at original width */
        width: 100%;
        text-align: center;
        margin-top: 0;
    }

    /* Desktop layout for section 1.3 */
    #section1-3.validation-subsection {
        display: flex;
        align-items: stretch;
        gap: 3rem;
        min-height: 600px;
    }

    #section1-3 img {
        flex: 0 0 40%;
        max-width: 40%;
        height: 100%;
        min-height: 600px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        opacity: 0.4;
    }

    #section1-3 > div:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #section1-3 > div:last-child > div {
        text-align: left;
        width: 100%;
        padding-left: 6rem;
        padding-right: 0;
    }

    #section1-3 > div:last-child > div > div {
        display: block;
        margin-bottom: 2rem;
    }

    #section1-3 > div:last-child > div > div > span:first-child {
        font-size: 4.4em; /* 10% increase from 4em (4 * 1.1 = 4.4) */
        font-family: 'Montserrat', sans-serif;
        display: inline;
        color: white;
        font-weight: 700;
        margin-right: 0.5rem; /* Small gap between cyan and pink */
    }

    #section1-3 > div:last-child > div > div > span:last-child {
        font-size: 1.5em;
        font-family: 'Montserrat', sans-serif;
        display: inline;
    }
}

/* Mobile layout adjustments */
@media (max-width: 768px) {
    /* Section 1.1 - Full width video container */
    #section1-1.product-intro {
        width: 100vw;
        max-width: 100vw;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Section 1.1 - Constrain width of cyan and yellow boxes */
    #section1-1 .meet-cori {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #section1-1 .intro-description {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Section 1.2 - Make content fit within screen vertically */
    #section1-2 .tab-text h3 {
        font-size: 1.3rem !important; /* Reduced from default */
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }

    #section1-2 .tab-text {
        margin-top: 0.5rem !important; /* Bring text box closer to image */
    }

    #section1-2 .tab-grid {
        gap: 0.5rem !important; /* Reduce gap between image and text */
    }

    /* Section 1.3 - Image as background with stats overlay - FULL WIDTH */
    #section1-3.validation-subsection {
        position: relative;
        flex-direction: column;
        padding: 0;
        margin: 0;
        min-height: 500px;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        display: block;
        gap: 0;
    }

    #section1-3 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        flex: none;
        object-fit: cover;
        border-radius: 0;
        z-index: 0;
        opacity: 0.4;
    }

    #section1-3 > div:last-child {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        padding: 2rem;
        flex: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #section1-3 > div:last-child > div {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
}

/* Section 1 debug borders removed */

/* ========================================== */
/* HIDE OTHER DEBUG LABELS AND ELEMENTS */
/* ========================================== */

.debug-label {
    display: none !important;
}

.debug-toggle-btn {
    display: none !important;
}

/* ========================================== */
/* DASHBOARD SECTION DEBUG BORDERS */
/* ========================================== */

.debug-borders .dashboard-card {
    outline: 3px solid rgba(255, 0, 0, 0.8) !important; /* Red - Dashboard cards */
    border: 3px solid rgba(255, 0, 0, 0.8) !important;
}

.debug-borders .dashboard-left {
    outline: 3px solid rgba(0, 191, 255, 0.8) !important; /* Blue - Screenshot area */
    border: 3px solid rgba(0, 191, 255, 0.8) !important;
}

.debug-borders .dashboard-right {
    outline: 3px solid rgba(128, 0, 128, 0.8) !important; /* Purple - Athlete area (desktop) */
    border: 3px solid rgba(128, 0, 128, 0.8) !important;
}

.debug-borders .mobile-text {
    outline: 3px solid rgba(255, 255, 0, 0.8) !important; /* Yellow - Mobile text */
    border: 3px solid rgba(255, 255, 0, 0.8) !important;
}

/* End of debug borders */

/* ========================================== */
/* MOBILE ADJUSTMENTS FOR WHYCORI PAGE */
/* ========================================== */

/* Section 2.4 - Navigation Arrows for Training Cards */
.training-cards-arrows {
    display: none;
}

/* Section 2.3 - Card styling for science steps */
.s-step {
    background: rgba(25, 25, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

/* Section 2.3 - Gradient highlight for centered card */
.s-step.is-active {
    background: linear-gradient(135deg, #00E5FF 0%, #00FF7F 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.02);
}

.s-step.is-active * {
    color: #000000 !important;
}

.s-step.is-active h3 span {
    color: #000000 !important;
}

@media (max-width: 768px) {
    /* Section 2.4 - Show arrow buttons on mobile */
    .training-cards-arrows {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .training-cards-arrows .arrow-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .training-cards-arrows .arrow-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.1);
    }

    .training-cards-arrows .arrow-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Section 2.5 - Reduce width to 90% on mobile */
    #section2-5 .comparison-container {
        width: 90% !important;
        margin: 0 auto;
    }

    /* Section 2.6 - Reduce font size on mobile */
    #section2-6 .tech-transition-main {
        font-size: 1.8rem !important;
    }

    #section2-6 .tech-transition-impact {
        font-size: 1.8rem !important; /* Same size as tech-transition-main */
    }

    #section2-6 .tech-transition-cta {
        font-size: 1rem !important;
    }
}

/* ===================================================================
   LARGE SCREEN OPTIMIZATIONS (21" and above - 1920px+)
   These styles only apply to very large screens to improve layout
   =================================================================== */

@media (min-width: 1920px) {

    /* INDEX: Section 1.3 - Bring image closer to center */
    .section-1-2-split .split-content-card {
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 4rem;
    }

    /* INDEX: Section 1.5 - Increase horizontal gap between step cards */
    .setup-steps-desktop {
        gap: 6rem !important; /* Increased from 4rem */
        max-width: 1800px;
        margin: 0 auto;
    }

    /* INDEX: Section 2.2 - Add padding to bring continuous monitoring and sensor closer */
    #sensor-showcase .sensor-showcase-grid {
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 6rem;
        align-items: center; /* Vertically center both items */
    }

    #sensor-showcase .sensor-showcase-left {
        padding-right: 3rem;
        padding-left: 4rem !important; /* Reduced from 10rem */
        padding-top: 0 !important; /* Remove the 8rem top padding */
        display: flex;
        justify-content: center !important; /* Center vertically */
        align-items: flex-start !important; /* Align to start horizontally */
    }

    #sensor-showcase .sensor-showcase-right {
        padding-left: 3rem;
        display: flex;
        align-items: center; /* Middle align the image */
        justify-content: center;
    }

    /* INDEX & HOW: Section 2.6 / Dashboard Cards - Bring slightly closer to center (not too much) */
    .dashboard-cards-container {
        max-width: 1800px !important;
        margin: 0 auto !important;
        padding: 0 4rem !important;
    }

    .dashboard-cards-wrapper {
        max-width: 1700px;
        margin: 0 auto;
    }
}

/* ================================================
   HOW.HTML MOBILE SPECIFIC STYLES
================================================ */
@media (max-width: 768px) {
    /* Reduce space above "From Molecules To..." heading on mobile */
    .section-2-1 h2 {
        margin-top: 1rem !important;
        margin-bottom: 2rem !important;
    }
}