/* ==================== CASE STUDY STYLES ====================
   Grid system and component styles for case study pages
   Based on Figma design: 1440px canvas
   ============================================================ */

/* TD Graphik Font for Mobile Mockup */
@font-face {
    font-family: 'TD Graphik';
    src: url('../assets/fonts/TD Graphik-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'TD Graphik';
    src: url('../assets/fonts/TD Graphik-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'TD Graphik';
    src: url('../assets/fonts/TD Graphik-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

/* ==================== GRID SYSTEM ==================== */
/*
   DESKTOP (> 1024px):
   - Canvas: 1440px
   - Content area: 1200px (from x=120 to x=1320)
   - Left/Right margin: 120px (8.33%)
   
   Two-column layouts (DESKTOP ONLY):
   - Layout A (Title/Overview): 464px / 24px gap / 708px
   - Layout B (Content/Sticky): 610px / 24px gap / 562px
   - Layout C (Feature sections): 562px / 24px gap / 562px
   
   Five-column layout (Architecture Table):
   - Total width: 1180px
   - Column width: 236px each
   
   TABLET (<= 1024px) - FOLLOWS MOBILE PATTERNS:
   - Stacked/vertical layouts (NO side-by-side columns)
   - Image above text for feature sections
   - Full-width components
   - Margins: 32px
   
   SMALL TABLET (<= 768px):
   - Margins: 24px
   - Reduced typography sizes
   
   MOBILE (<= 480px):
   - Margins: 20px
   - Content width: 280-282px
   - Mobile-optimized sizes
*/

/* ==================== HIDE NATIVE SCROLLBAR ==================== */
/* Use custom scroll navigation instead of browser scrollbar */

/* Class-based approach for broad browser support */
html.hide-scrollbar,
html.hide-scrollbar body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* Scroll snap for "speed bump" effect on key sections */
/* Uses 'proximity' for gentle snapping - slows fast scrollers without being jarring */
html {
    scroll-snap-type: y proximity;
}

html.hide-scrollbar::-webkit-scrollbar,
html.hide-scrollbar body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

:root {
    /* ==========================================================================
       CASE STUDY FLEXIBLE GRID SYSTEM
       Scales from mobile (320px) to large desktop (2560px+)
       ========================================================================== */

    /* Fluid Margins - match navigation (--nav-left: 21px, --nav-right: 20px) */
    --cs-margin-left: 20px;
    --cs-margin-right: 20px;
    --cs-gutter: clamp(16px, 2vw, 32px);

    /* Content Width - fluid, fills available space */
    --cs-content-width: calc(100vw - var(--cs-margin-left) - var(--cs-margin-right));

    /* Two-Column Layout A (Title + Overview) - percentage based */
    --cs-col-a1: minmax(280px, 38%);
    --cs-col-a2: minmax(320px, 1fr);

    /* Two-Column Layout B (Sticky sections) - percentage based */
    --cs-col-b1: minmax(300px, 52%);
    --cs-col-b2: minmax(280px, 1fr);

    /* Architecture Table Layout - fluid columns */
    --cs-arch-col-width: minmax(180px, 1fr);

    /* ==========================================================================
       FLUID SECTION SPACING - scales with viewport
       Desktop: larger spacing, Mobile: tighter spacing
       ========================================================================== */
    --cs-section-gap-sm: clamp(24px, 4vw, 48px);
    --cs-section-gap-md: clamp(48px, 10vw, 180px);
    --cs-section-gap-lg: clamp(60px, 12vw, 200px);
    --cs-section-gap-xl: clamp(80px, 14vw, 240px);
    --cs-section-gap-2xl: clamp(100px, 16vw, 340px);
    --cs-section-gap-3xl: clamp(60px, 10vw, 215px);
    --cs-section-gap-4xl: clamp(100px, 18vw, 380px);
    --cs-section-gap-5xl: clamp(120px, 22vw, 530px);

    /* ==========================================================================
       FLUID TYPOGRAPHY - Case Study specific
       ========================================================================== */

    /* Hero/Display Typography */
    --cs-font-hero: clamp(36px, 5vw, 64px);
    --cs-font-title: clamp(36px, 4vw, 48px);
    --cs-font-subtitle: clamp(20px, 2.5vw, 32px);

    /* Section Headers */
    --cs-font-section-title: clamp(24px, 3vw, 40px);
    --cs-font-section-subtitle: clamp(18px, 2vw, 28px);

    /* Body Text */
    --cs-font-body-lg: clamp(16px, 1.4vw, 22px);
    --cs-font-body-md: clamp(14px, 1.2vw, 18px);
    --cs-font-body-sm: clamp(12px, 1vw, 16px);

    /* Labels/Captions */
    --cs-font-label: clamp(11px, 0.9vw, 14px);
    --cs-font-caption: clamp(10px, 0.8vw, 12px);

    /* Above-the-fold layout - PRESERVED (header area stays fixed) */
    --cs-hero-top: 48px;
    --cs-hero-height: clamp(340px, 42vw, 520px);
    --cs-hero-overview-gap: clamp(32px, 4vw, 48px);

    /* ==========================================================================
       IMAGE/VIDEO REVEAL ANIMATION
       Premium clip-path + scale reveal for mockups and media
       ========================================================================== */
    --reveal-clip-dur: 1200ms;
    --reveal-scale-dur: 1100ms;
    --reveal-ease: cubic-bezier(0.3, 1, 0.25, 1);
    --reveal-scale-delay: 80ms;
    --reveal-blur: 3px;
}

/* ==========================================================================
   GLOBAL SCROLL-TRIGGERED SEQUENCE ANIMATIONS
   Elements with .cs-sequence-item start hidden and fade in when scrolled into view
   ========================================================================== */

/* All sequence items start hidden */
.cs-sequence-item {
    opacity: 0 !important;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* When visible class is added by IntersectionObserver, show the element */
.cs-sequence-item.cs-sequence-item--visible {
    opacity: 1 !important;
    transform: translateY(0);
}

/* ==========================================================================
   SCROLL-LINKED REVEAL EFFECT
   Lines in intro/growth sections fade based on their position in viewport
   Lines near bottom of viewport are more transparent, creating a gradient effect
   ========================================================================== */

/* Scroll reveal lines - opacity controlled by JS */
.cs-scroll-reveal-line {
    display: block;
    opacity: 0.3;
    /* Start semi-transparent, JS updates based on scroll position */
    transition: opacity 0.15s ease-out;
    /* Smooth transition as scroll updates */
}

/* .cs-scroll-reveal-container - marker class for JS targeting (no styles needed) */

/* ==================== PAGE LAYOUT ==================== */
/* Fluid page container - fills viewport width */
.case-study-page {
    width: 100%;
    max-width: none;
    /* Remove cap for full-width layout */
    margin: 0;
    position: relative;
    overflow-x: hidden;
}

/* Content area with fluid margins */
.case-study-content {
    padding-left: var(--cs-margin-left);
    padding-right: var(--cs-margin-right);
    width: 100%;
    max-width: none;
    /* Fluid width */
}

/* ==================== 8-COLUMN GRID TEXT CONTAINER ==================== */
/* For text content below hero - center columns on tablet/desktop */
.cs-text-content {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--cs-gutter);
    width: 100%;
}

/* Text content spans columns 2-7 */
.cs-text-content>* {
    grid-column: 2 / 7;
}

/* Case study body text - 17px/20px leading */
.cs-text-content p,
.cs-text-content .cs-body-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--primary-text);
}

/* Tablet - same 8-column grid */
@media (max-width: 1024px) {
    .cs-text-content {
        grid-template-columns: repeat(8, 1fr);
    }

    .cs-text-content>* {
        grid-column: 2 / 7;
    }
}

/* Mobile - single column, full width */
@media (max-width: 768px) {
    .cs-text-content {
        display: block;
    }

    .cs-text-content>* {
        grid-column: auto;
    }
}

/* ==================== SECTION CONTAINERS ==================== */
/* Base section - 8-column grid with content in center columns */
.cs-section {
    position: relative;
    width: 100%;
    padding-left: var(--cs-margin-left);
    padding-right: var(--cs-margin-right);
    padding-top: 200px;
    padding-bottom: 200px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--cs-gutter);
}

/* All section content spans columns 2-7 */
.cs-section>* {
    grid-column: 2 / 8;
}

/* Responsive: Below 1440px, all section content spans full width */
@media (max-width: 1440px) {
    .cs-section>* {
        grid-column: 1 / -1;
    }
}

/* Hero section - no top or bottom padding */
.cs-section.cs-hero-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* Overview section - reduced bottom padding to connect with intro */
.cs-section.cs-overview-section {
    padding-bottom: 200px;
}

/* Intro section - reduced top and bottom padding */
.cs-section.cs-intro-section {
    padding-top: 200px;
    padding-bottom: 80px;
}

/* Mockup section - reduced top padding, standard bottom */
.cs-section.cs-mockup-section {
    padding-top: 200px;
    padding-bottom: 200px;
}

/* Tablet - reduce mockup section spacing (exclude confirmation which has custom spacing) */
@media (max-width: 1024px) {
    .cs-section.cs-mockup-section:not([data-section="confirmation-mockup"]) {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

/* Mobile - unified 260px section spacing for ALL case study pages */
@media (max-width: 768px) {

    /* Reset all padding, use margin-bottom for consistent 260px gaps */
    .cs-section {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 160px;
    }

    /* Hero section - no bottom margin (title group padding controls gap) */
    .cs-section.cs-hero-section,
    .cs-section[data-section="hero"] {
        margin-bottom: 0;
    }

    /* Overview section - no extra padding, margin handles spacing */
    .cs-section.cs-overview-section {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Enhancement framework section - reduced spacing as requested */
    .cs-section.cs-enhancement-framework {
        margin-bottom: 60px;
    }

    /* Confirmation mockup section - completely reset padding for mobile */
    .cs-section.cs-mockup-section[data-section="confirmation-mockup"] {
        margin-top: 120px;
        margin-bottom: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Last section - no bottom margin to avoid extra space before footer */
    .cs-section:last-of-type {
        margin-bottom: 0;
    }

    /* QA Framework: Reduce intro section bottom margin before diagram (matches other section gaps) */
    .cs-section.cs-intro-section+.cs-diagram-section {
        margin-top: -80px;
    }
}

/* Mobile - single column full width */
@media (max-width: 768px) {
    .cs-section {
        display: block;
    }

    .cs-section>* {
        grid-column: auto;
    }

    /* All gap modifier classes use 160px on mobile (controlled by base .cs-section margin-bottom) */
    .cs-section--gap-md,
    .cs-section--gap-lg,
    .cs-section--gap-xl,
    .cs-section--gap-2xl,
    .cs-section--gap-3xl,
    .cs-section--gap-4xl,
    .cs-section--gap-5xl,
    .cs-section--gap-major {
        padding-top: 0;
    }
}

/* Tablet - moderate reduction */
@media (min-width: 769px) and (max-width: 1024px) {

    .cs-section--gap-md,
    .cs-section--gap-lg {
        padding-top: 80px;
    }

    .cs-section--gap-xl,
    .cs-section--gap-2xl {
        padding-top: 100px;
    }

    .cs-section--gap-3xl,
    .cs-section--gap-4xl,
    .cs-section--gap-5xl,
    .cs-section--gap-major {
        padding-top: 120px;
    }

    /* Title - reduced size for tablet (40px) */
    .cs-title-main,
    .cs-title-sub {
        font-size: 44px;
        line-height: 48px;
    }
}

/* Section spacing classes (per Figma measurements) */
.cs-section--gap-md {
    padding-top: var(--cs-section-gap-md);
    /* 106px - Data Analytics to Project Scope */
}

.cs-section--gap-lg {
    padding-top: var(--cs-section-gap-lg);
    /* 180px - Introduction to Data Analytics */
}

/* Introduction section - increased spacing from Overview on desktop */
@media (min-width: 1025px) {
    .cs-intro-section.cs-section--gap-lg {
        padding-top: 240px;
    }
}

.cs-section--gap-xl {
    padding-top: var(--cs-section-gap-xl);
    /* 220px - Design Strategy sub-sections */
}

.cs-section--gap-2xl {
    padding-top: var(--cs-section-gap-2xl);
    /* 318px - Project Scope to Features */
}

.cs-section--gap-3xl {
    padding-top: var(--cs-section-gap-3xl);
    /* Features Multi-App to Shopping (halved) */
}

.cs-section--gap-4xl {
    padding-top: var(--cs-section-gap-4xl);
    /* Growth to Enhancement Framework (halved) */
}

.cs-section--gap-5xl {
    padding-top: var(--cs-section-gap-5xl);
    /* 516px - Features Shopping to Growth */
}

/* 240px fixed gap for major section spacing */
.cs-section--gap-major {
    padding-top: 240px;
}

/* Feature text - spacing below video mockup */
.cs-feature-text {
    padding-top: 40px;
}

/* Section header labels - Input 16px, #7b7b7b per Figma */
.cs-section-header {
    font-family: 'Input', 'Neue Haas Unica W1G', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.416px;
    color: #7b7b7b;
    margin-bottom: var(--cs-section-gap-sm);
    /* 48px gap to content - fluid */
}

/* Growth Quote Section - Scroll snap "speed bump" for fast scrollers */
/* This creates gentle friction that naturally slows scrolling at this key section */
.cs-section[data-section="design-strategy"] {
    scroll-snap-align: start;
    scroll-margin-top: 10vh;
    /* Position quote nicely in viewport when snapped */
}

/* Section content span modifiers - override default 2/8 span */
/* Full width: spans all 8 columns (for architecture table) */
.cs-section--fullwidth>* {
    grid-column: 1 / -1;
}

/* Center span: columns 2-7 (for tighter content like Design Strategy) */
.cs-section--center>* {
    grid-column: 2 / 7;
}

/* Wide span: columns 2-8 (for wider content like Project Architecture) */
.cs-section--wide>* {
    grid-column: 2 / 8;
}

/* Features span: columns 3-8 (shifted one column right) */
.cs-section--features>* {
    grid-column: 3 / 8;
}

/* Tablet: reset column spans for centered sections - full width alignment */
@media (max-width: 1024px) {
    .cs-section--center>* {
        grid-column: 1 / -1;
    }
}

/* Mobile: reset column spans */
@media (max-width: 768px) {

    .cs-section--fullwidth>*,
    .cs-section--center>*,
    .cs-section--wide>*,
    .cs-section--features>* {
        grid-column: auto;
    }
}

/* Section with sticky column behavior */
.cs-section--sticky {
    display: grid;
    grid-template-columns: minmax(300px, 52%) minmax(280px, 1fr);
    gap: var(--cs-gutter);
}

/* ==================== TWO-COLUMN LAYOUTS (FLUID) ==================== */

/* Layout A: Title + Overview - fluid proportions */
.cs-grid-title-overview {
    display: grid;
    grid-template-columns: minmax(280px, 38%) minmax(320px, 1fr);
    gap: var(--cs-gutter);
    align-items: start;
}

/* Responsive: Below 1440px, give overview more width */
@media (max-width: 1440px) {
    .cs-grid-title-overview {
        /* Smaller title column (30%), larger overview column */
        grid-template-columns: minmax(200px, 30%) 1fr;
    }
}

/* Mobile: Stack columns to prevent content cut-off */
@media (max-width: 768px) {
    .cs-grid-title-overview {
        grid-template-columns: 1fr;
    }

    /* Show title on mobile above overview with spacing */
    .cs-grid-title-overview>div:first-child {
        display: block;
        padding-top: 20px;
        margin-bottom: 20px;
    }
}

/* Layout B: Sticky content - fluid proportions */
.cs-grid-sticky {
    display: grid;
    grid-template-columns: minmax(300px, 52%) minmax(280px, 1fr);
    gap: var(--cs-gutter);
    align-items: start;
}

/* Layout C: Feature sections - stacked layout (video on top, text below) */
.cs-feature-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.cs-grid-feature {
    display: flex;
    flex-direction: column;
    /* No gap here - spacing controlled by section label margin-bottom (40px) */
    width: 100%;
}

.cs-feature-text {
    /* Text below video - constrained width for better readability */
    max-width: 600px;
}

/* Feature text paragraph - match mockup description styling */
.cs-feature-text p,
.cs-feature-text .cs-intro-text {
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 24px;
    color: #ffffff;
}

.cs-feature-mockup {
    /* Mockup spans wider on desktop - 4 additional columns */
    width: 100%;
    max-width: 1140px;
}

/* Two-column image grid (for AI Strategic Foresight) */
.cs-grid-two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Responsive columns */
    gap: var(--cs-gutter);
    align-items: start;
    width: 100%;
}

/* Five-Column Layout */
.cs-grid-architecture {
    display: grid;
    grid-template-columns: repeat(5, var(--cs-col-5));
    gap: var(--cs-col-5-gap);
    align-items: start;
}

/* Four-Column Layout (Stats) - Responsive */
.cs-grid-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Responsive columns */
    gap: 22px;
    align-items: stretch;
    width: 100%;
}

/* Stat card - container with divider line that animates first */
.cs-stat-card {
    position: relative;
    overflow: hidden;
    padding-left: 17px;
    /* Space for divider + gap */
}

/* Animated divider line on parent - grows top to bottom FIRST */
.cs-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: calc(100% + 20px);
    background-color: rgba(255, 255, 255, 0.2);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step 1: Divider grows first (no delay) */
.cs-stat-card.cs-sequence-item--visible::before {
    transform: scaleY(1);
}

/* Stat card inner - content slides in from left AFTER divider */
.cs-stat-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Content hidden by default - positioned to the left */
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s,
        opacity 0.4s ease 0.4s;
}

/* Step 2: Content slides in from left after divider (0.4s delay) */
.cs-sequence-item--visible .cs-stat-card-inner {
    transform: translateX(0);
    opacity: 1;
}

/* Staggered animation delays for sequential card reveal */
/* Card 1: no extra delay */
.cs-stat-card[data-sequence="1"]::before {
    transition-delay: 0s;
}

.cs-stat-card[data-sequence="1"] .cs-stat-card-inner {
    transition-delay: 0.4s;
}

/* Card 2: +0.3s stagger */
.cs-stat-card[data-sequence="2"]::before {
    transition-delay: 0.3s;
}

.cs-stat-card[data-sequence="2"] .cs-stat-card-inner {
    transition-delay: 0.7s;
}

/* Card 3: +0.6s stagger */
.cs-stat-card[data-sequence="3"]::before {
    transition-delay: 0.6s;
}

.cs-stat-card[data-sequence="3"] .cs-stat-card-inner {
    transition-delay: 1s;
}

/* Card 4: +0.9s stagger */
.cs-stat-card[data-sequence="4"]::before {
    transition-delay: 0.9s;
}

.cs-stat-card[data-sequence="4"] .cs-stat-card-inner {
    transition-delay: 1.3s;
}

/* Stat value - large number (matches TD Easy Apply impact) */
.cs-stat-value {
    font-family: 'Input', 'Neue Haas Unica', monospace;
    font-weight: 400;
    font-size: 48px;
    line-height: 56px;
    color: #ffffff;
}

/* Stat label - smaller descriptive text */
.cs-stat-label {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.12px;
    color: #ffffff;
    margin-top: 8px;
}

/* Stat description - supporting body text */
.cs-stat-description {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.08px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
    padding-top: 8px;
    padding-right: 16px;
}

/* Light mode: stat text uses black base */
html:not([data-theme="dark"]) .cs-stat-value {
    color: #1a1a1a;
}

html:not([data-theme="dark"]) .cs-stat-label {
    color: #1a1a1a;
}

html:not([data-theme="dark"]) .cs-stat-description {
    color: rgba(26, 26, 26, 0.7);
}

/* Light mode: stat card divider */
html:not([data-theme="dark"]) .cs-stat-card::before {
    background-color: rgba(26, 26, 26, 0.2);
}

/* ==================== STICKY COLUMN BEHAVIOR ==================== */
/*
   Column 1 (left): sticky/fixed while scrolling
   Column 2 (right): scrollable content
   When column 2 ends, both transition to next section
*/

.cs-sticky-container {
    position: relative;
}

.cs-sticky-left {
    position: sticky;
    top: 100px;
    /* Offset from top when stuck */
    align-self: start;
    height: fit-content;
}

/* .cs-sticky-right scrolls normally - no special styles needed */

/* ==================== HERO SECTION ==================== */
/* Hero section container - positioned for above-the-fold */
.cs-hero-section {
    padding-top: var(--cs-hero-top);
}

.cs-hero {
    grid-column: 1 / -1;
    /* Span all columns */
    width: 100%;
    /* Full width responsive */
    max-width: none;
    /* Remove max-width constraint to allow full-width */
    height: var(--cs-hero-height);
    border-radius: 12px;
    background-color: var(--card-bg);
    overflow: hidden;
    /* REVEAL ANIMATION - animation now handled by IntersectionObserver + cs-reveal-visible */
}

.cs-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile: Shift TD Easy Apply hero image left to keep focal point in frame */
@media (max-width: 768px) {
    .cs-hero img {
        object-position: calc(50% - 30px) center;
    }
}

/* WebGL canvas for animated hero */
.cs-hero-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==================== OVERVIEW SECTION ==================== */
/* Overview section - tight spacing from hero for above-the-fold */
.cs-overview-section {
    padding-top: var(--cs-hero-overview-gap);
}

/* ==================== TITLE SECTION ==================== */
.cs-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* JS-triggered reveal for reliable page initialization */
    opacity: 0;
    transition: opacity 0.8s ease;
    /* Prevent sub-pixel rendering shift when about panel toggles */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Revealed state - triggered by JS after page load/transition */
.cs-title-group.cs-above-fold-visible {
    opacity: 1;
}

/* Overview rows - layout only (animation via cs-sequence-item class) */
.cs-overview-row {
    display: flex;
    gap: 76px;
    /* Horizontal gap between items per Figma */
    align-items: flex-start;
}

/* Legacy: cs-above-fold-visible still supported for backwards compat */
.cs-overview-row.cs-above-fold-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== PAGE LOAD ANIMATIONS ==================== */
@keyframes csFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes csFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in from below - signals scrollability */
@keyframes csSlideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== INTRODUCTION SECTION ==================== */
/* Introduction content - 508px width per Figma, 40px gap between paragraphs */
.cs-intro-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 40px gap between paragraphs per Figma */
    width: 100%;
    max-width: 508px;
    /* 508px width per Figma */
}

/* .cs-intro-content>* - no grid-column needed, content is inside grid cell */

/* Remove old margin-based spacing, using gap now */
.cs-intro-content p,
.cs-intro-content .cs-intro-paragraph {
    margin-bottom: 0;
}

.cs-intro-content p:last-child {
    margin-bottom: 0;
}

/* Mobile - single column full width */
@media (max-width: 768px) {
    .cs-intro-content {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Section label gets 40px spacing - consistent with all sections */
    .cs-intro-content>.cs-overview-label {
        margin-bottom: 40px;
    }

    /* Paragraphs get 24px spacing between them */
    .cs-intro-content>.cs-intro-paragraph+.cs-intro-paragraph {
        margin-top: 24px;
    }
}

/* Line-by-line animation keyframes for intro content */
@keyframes introLineReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation delays are set dynamically via JavaScript for proper stagger timing */

/* Introduction text - Neue Haas Unica Light 28px/36px */
.cs-intro-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.048px;
    color: var(--primary-text);
}

/* Introduction paragraph container - maintain paragraph structure */
.cs-intro-paragraph {
    display: block;
}

/* Introduction lines - animate independently but flow naturally */
.cs-intro-line {
    display: inline;
    /* Flow naturally within paragraph */
}

/* Line-by-line animation for intro content - opacity only for inline elements */
.cs-intro-content .cs-intro-line.cs-sequence-item {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.cs-intro-content .cs-intro-line.cs-sequence-item--visible {
    opacity: 1;
}

.cs-title-main {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: -0.48px;
    color: var(--primary-text);
    /* Prevent sub-pixel rendering shift when about panel toggles */
    transform: translateZ(0);
}

/* Easy Apply title variant - 1px increased leading */
.cs-title-main--easy-apply {
    line-height: 53px;
}

.cs-title-sub {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.48px;
    color: var(--primary-text);
}

/* QA Framework title - uses same styling as main title (no separate override) */

/* ==================== OVERVIEW SECTION ==================== */
.cs-overview {
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Vertical gap between rows per Figma (722 - 634 - 56 = 32) */
}

/* .cs-overview-row canonical definition at line ~621 */

/* Mobile - stack overview items with more spacing */
@media (max-width: 768px) {
    .cs-overview {
        gap: 40px;
    }

    .cs-overview-row {
        flex-direction: column;
        gap: 40px;
    }

    .cs-overview-item {
        width: 100% !important;
    }
}

.cs-overview-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    /* Don't shrink - use fixed widths per Figma */
}

/* Per Figma grid: Client 85px, Role 161px, Duration 131px */
.cs-overview-item:nth-child(1) {
    width: 85px;
}

.cs-overview-item:nth-child(2) {
    width: 161px;
}

.cs-overview-item:nth-child(3) {
    width: 131px;
}

/* Tighter spacing for Areas of impact with pills */
.cs-overview-item:has(.cs-pills-container) {
    gap: 10px;
    /* 6px + 4px = 10px */
}

/* Areas of impact container - responsive width */
.cs-overview-item--pills {
    width: 507px;
    max-width: 100%;
    flex: 1;
}

.cs-overview-label {
    font-family: 'Input', 'Neue Haas Unica W1G', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.416px;
    color: #7b7b7b;
    white-space: nowrap;
}

/* Section labels as direct children of sections get consistent 40px spacing to content */
.cs-section>.cs-overview-label {
    margin-bottom: 40px;
}

.cs-overview-value {
    font-family: 'Neue Haas Unica', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    /* Light */
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.048px;
    white-space: nowrap;
    color: var(--primary-text);
}

/* ==================== PILLS (SCROLLABLE) ==================== */
.cs-pills-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 507px;
}

.cs-pills-track {
    display: flex;
    gap: 8px;
    padding: 0;
    width: max-content;
    /* Allow track to be as wide as needed */
    /* Auto-scroll animation - starts with second row reveal */
    animation: pillsScroll 25s linear infinite;
    animation-delay: 1.1s;
    /* Match second row animation delay */
}

@keyframes pillsScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Gradient fade on left side */
.cs-pills-fade-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, var(--background) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Gradient fade on right side */
.cs-pills-fade-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--background) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.cs-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 6px 12px 6px 12px;
    border-radius: 8px;
    border: 0.5px solid #313131;
    background-color: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
    flex-shrink: 0;
}

.cs-pill-text {
    font-family: 'Input', 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.312px;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
}

/* ==================== SECTION HEADERS ==================== */
.cs-header {
    display: flex;
    flex-direction: column;
}

.cs-header-subhead {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 100;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.624px;
    color: var(--primary-text);
}

.cs-header-title {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -0.936px;
    color: var(--primary-text);
}


/* ==================== ARCHITECTURE CARDS ==================== */
.cs-scope-card {
    display: flex;
    flex-direction: column;
    gap: var(--cs-col-5-gap);
    /* 8px - matches horizontal gap between cards */
}

/* Remove gap for collapsible cards since content handles its own margin */
.cs-scope-card--collapsible {
    gap: 0;
}

.cs-scope-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 8px;
    background-color: #191919;
}

.cs-scope-card--collapsible .cs-scope-title {
    cursor: pointer;
}

.cs-scope-title-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 16px;
    color: #ffffff;
}

.cs-scope-chevron {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Expanded state (default) */
.cs-scope-card--collapsible .cs-scope-content {
    max-height: 600px;
    /* Enough for Features with 9 items */
    overflow: hidden;
    opacity: 1;
    margin-top: var(--cs-col-5-gap);
    /* 8px - matches horizontal gap between cards */
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.cs-scope-card--collapsible.cs-scope-card--expanded .cs-scope-chevron {
    transform: rotate(180deg);
}

/* Collapsed state (when expanded class is removed) */
.cs-scope-card--collapsible:not(.cs-scope-card--expanded) .cs-scope-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.cs-scope-card--collapsible:not(.cs-scope-card--expanded) .cs-scope-chevron {
    transform: rotate(0deg);
}

.cs-scope-content {
    padding: 16px;
    border-radius: 8px;
    background-color: #191919;
}

.cs-scope-description {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
}

.cs-scope-items {
    display: flex;
    flex-direction: column;
    gap: var(--cs-col-5-gap);
    /* 8px - uniform gap throughout */
}

.cs-scope-item {
    padding: 8px;
    border-radius: 8px;
    background-color: #222;
}

/* Staggered inner pill reveal animation */
.cs-scope-card--staggered .cs-scope-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cs-scope-card--staggered .cs-scope-item.cs-scope-item--visible {
    opacity: 1;
    transform: translateY(0);
}

.cs-scope-item-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
}

/* ==================== SCOPE HEADER ROW ==================== */
.cs-scope-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* View Toggle Container */
.cs-scope-view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

/* Toggle Buttons */
.cs-view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cs-view-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.cs-view-toggle-btn--active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.cs-view-toggle-btn--active:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Hide toggle on mobile/tablet (accordion is always shown there) */
@media (max-width: 1023px) {
    .cs-scope-view-toggle {
        display: none;
    }
}

/* ==================== PROJECT SCOPE TABLE (New Design) ==================== */
.cs-scope-table {
    display: flex;
    align-items: stretch;
    /* Ensure all children stretch to same height */
    width: 100%;
    /* Full width to fit all 5 columns */
    max-width: none;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* View toggle states - Table hidden when accordion view is active */
.cs-scope-table--hidden {
    display: none;
}

/* Accordion shown on desktop when list view is active */
.cs-scope-accordion--desktop-visible {
    display: flex !important;
}

.cs-scope-column {
    flex: 1;
    min-width: 0;
    /* Allow flex items to shrink below content size */
    max-width: var(--cs-arch-col-width, 236px);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    height: 100%;
    /* Ensure column takes full height */
}

.cs-scope-column-header {
    padding: 0 16px;
    margin-bottom: 16px;
    min-height: 32px;
    /* Accommodate wrapped text (2 rows) */
    display: flex;
    align-items: center;
    /* Center items vertically (aligns button with first line of text) */
    justify-content: space-between;
    position: relative;
    gap: 12px;
    /* Space between title and button */
}

.cs-scope-column-title {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    /* Better line-height for wrapping */
    color: #ffffff;
    flex: 1;
    /* Allow title to take available space */
}

/* Fullscreen toggle button - HIDDEN as fullscreen is now in navigation */
.cs-table-fullscreen-btn {
    display: none;
    /* Fullscreen functionality moved to navigation bar */
}

/* Fullscreen state for the table */
.cs-scope-table--fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    z-index: 9999;
    padding: 60px 80px;
    overflow-x: auto;
    /* Allow horizontal scroll if content wider than viewport */
    overflow-y: visible;
    /* Allow vertical overflow without scroll */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Firefox */
    /* Full window background */
    background-color: #191919;
    /* Flex layout for proper stretching and distribution */
    display: flex !important;
    align-items: stretch;
    /* Stretch to full height */
    justify-content: center;
    /* Center content, but flex columns will grow to fill */
    flex-wrap: nowrap;
    /* Don't wrap columns */
    gap: 0;
    /* No gap, dividers handle spacing */
}

/* Custom scrollbar for fullscreen mode */
.cs-scope-table--fullscreen::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.cs-scope-table--fullscreen::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.cs-scope-table--fullscreen::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.cs-scope-table--fullscreen::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Scale up columns in fullscreen */
.cs-scope-table--fullscreen .cs-scope-column {
    background-color: transparent;
    /* Responsive columns - grow proportionally to fill available space */
    flex: 1 1 0;
    /* Equal flex-basis, grow to fill space */
    min-width: 220px;
    /* Minimum width on small screens */
    max-width: none;
    /* No max - allow unlimited growth */
    height: 100% !important;
    /* Ensure full height in fullscreen */
    position: relative;
}

/* Larger text in fullscreen */
.cs-scope-table--fullscreen .cs-scope-column-title {
    font-size: 22px;
}

.cs-scope-table--fullscreen .cs-scope-pill {
    padding: 12px;
}

.cs-scope-table--fullscreen .cs-scope-pill-text,
.cs-scope-table--fullscreen .cs-scope-pill-title {
    font-size: 14px;
}

.cs-scope-table--fullscreen .cs-scope-pill-label,
.cs-scope-table--fullscreen .cs-scope-pill-description {
    font-size: 13px;
}

/* Dividers in fullscreen - extend to full height */
.cs-scope-table--fullscreen .cs-scope-divider {
    background-color: rgba(255, 255, 255, 0.1);
    align-self: stretch;
    height: auto;
    /* Auto height to stretch with content */
    min-height: 100%;
    /* At least full height */
    width: 1px;
    flex-shrink: 0;
    /* Don't shrink */
}

/* Horizontal separator in fullscreen - extend to full width */
.cs-scope-table--fullscreen .cs-scope-column-separator {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Light mode fullscreen - keep dark theme for table */
[data-theme="light"] .cs-scope-table--fullscreen {
    background-color: #191919;
}

[data-theme="light"] .cs-scope-table--fullscreen .cs-scope-divider {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .cs-scope-table--fullscreen .cs-scope-column-separator {
    background-color: rgba(255, 255, 255, 0.1);
}

.cs-scope-table--fullscreen .cs-fullscreen-icon--expand {
    display: none;
}

.cs-scope-table--fullscreen .cs-fullscreen-icon--collapse {
    display: block;
}

/* Larger button in fullscreen mode */
.cs-scope-table--fullscreen .cs-scope-column-header {
    min-height: 50px;
    /* More space in fullscreen */
}

.cs-scope-table--fullscreen .cs-table-fullscreen-btn {
    width: 32px;
    height: 32px;
}

.cs-scope-table--fullscreen .cs-table-fullscreen-btn svg {
    width: 16px;
    height: 16px;
}

/* .cs-table-fullscreen-btn is display: none at line ~1274 - no styling needed */

/* Fullscreen mode responsive adjustments - reduce on smaller screens */
@media (max-width: 1400px) {
    .cs-scope-table--fullscreen {
        padding: 40px 30px;
        /* Reduce padding */
    }

    .cs-scope-table--fullscreen .cs-scope-column {
        flex: 1 1 0;
        /* Still grow equally */
        min-width: 180px;
    }

    .cs-scope-table--fullscreen .cs-scope-column-title {
        font-size: 20px;
    }
}

@media (max-width: 1200px) {
    .cs-scope-table--fullscreen {
        padding: 30px 20px;
    }

    .cs-scope-table--fullscreen .cs-scope-column {
        flex: 1 1 0;
        /* Still grow equally */
        min-width: 160px;
    }

    .cs-scope-table--fullscreen .cs-scope-column-title {
        font-size: 18px;
    }

    .cs-scope-table--fullscreen .cs-scope-pill {
        padding: 10px;
    }
}

/* Larger viewports - increase column spacing, columns grow to fill space */
@media (min-width: 1800px) {
    .cs-scope-table--fullscreen {
        padding: 60px 100px;
        /* More padding on large screens */
    }

    .cs-scope-table--fullscreen .cs-scope-column {
        flex: 1 1 0;
        /* Grow equally to fill all available space */
        min-width: 280px;
        /* Larger minimum on big screens */
    }
}

@media (min-width: 2200px) {
    .cs-scope-table--fullscreen {
        padding: 80px 120px;
        /* Even more padding on ultra-wide */
    }

    .cs-scope-table--fullscreen .cs-scope-column {
        flex: 1 1 0;
        /* Grow equally to fill all available space */
        min-width: 320px;
        /* Even larger minimum on ultra-wide */
    }
}

/* Hide fullscreen button on tablet/mobile */
@media (max-width: 1023px) {
    .cs-table-fullscreen-btn {
        display: none;
    }
}

.cs-scope-column-separator {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
}

.cs-scope-column-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
}

.cs-scope-divider {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    align-self: stretch;
    /* Stretch to full height of flex container */
    flex-shrink: 0;
    /* Don't shrink */
}

/* Scope Pills */
.cs-scope-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background-color: #222;
    border-radius: 8px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover state for pills */
.cs-scope-pill:hover {
    background-color: #2a2a2a;
    transform: translateY(-2px);
    box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.3);
}

/* Active/pressed state */
.cs-scope-pill:active {
    transform: translateY(0);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

/* Selected state for pills - green theme */
.cs-scope-pill.cs-pill-selected {
    background-color: rgba(126, 187, 28, 0.15);
    border: 1px solid #7ebb1c;
    box-shadow: none;
}

.cs-scope-pill.cs-pill-selected:hover {
    background-color: rgba(126, 187, 28, 0.25);
}

/* Selected pill text - white */
.cs-scope-pill.cs-pill-selected .cs-scope-pill-text,
.cs-scope-pill.cs-pill-selected .cs-scope-pill-title,
.cs-scope-pill.cs-pill-selected .cs-scope-pill-label,
.cs-scope-pill.cs-pill-selected .cs-scope-pill-description {
    color: #ffffff;
}

/* Selected pill icon - keep white */
.cs-scope-pill.cs-pill-selected .cs-scope-pill-icon {
    filter: none;
}

.cs-scope-pill--text {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* 12px gap between title and content per Figma */
}

.cs-scope-pill-expandable {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* 4px gap between label and its description */
    width: 100%;
}

.cs-scope-pill-expandable .cs-scope-pill-label {
    text-align: left;
}

/* Container for multiple description blocks */
.cs-scope-pill-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 8px gap between description blocks */
    width: 100%;
}

.cs-scope-pill--expandable {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* 12px gap between title and content per Figma */
    cursor: pointer;
}

.cs-scope-pill-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.cs-scope-pill-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #ffffff;
    flex: 1;
}

.cs-scope-pill-title {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
}

.cs-scope-pill-label {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    color: #a9a9a9;
}

.cs-scope-pill-toggle {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.cs-scope-pill-description {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
}

/* Expandable pill states */
.cs-scope-pill--expandable .cs-channel-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.cs-scope-pill--expandable.cs-channel-expanded .cs-channel-content {
    max-height: 200px;
    opacity: 1;
    margin-top: 8px;
}

/* Table pill staggered animation */
.cs-scope-table--animate .cs-table-pill {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.cs-scope-table--animate .cs-table-pill.cs-table-pill--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== SCOPE ACCORDION (Mobile/Tablet) ==================== */
.cs-scope-accordion {
    display: none;
    /* Hidden on desktop by default */
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.cs-accordion-item {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Staggered reveal animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.cs-accordion-item:first-child {
    border-radius: 0;
}

.cs-accordion-item:last-child {
    border-radius: 0;
    border-bottom: none;
}

/* Revealed state for accordion items */
.cs-accordion-item.cs-accordion-item--visible {
    opacity: 1;
    transform: translateY(0);
}

.cs-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    cursor: pointer;
}

.cs-accordion-title {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 16px;
    color: #ffffff;
}

.cs-accordion-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 8px;
    transition: transform 0.3s ease;
    /* Default state (collapsed) - chevron points down */
    transform: rotate(0deg);
}

/* Expanded state - chevron points up */
.cs-accordion-item--expanded .cs-accordion-chevron {
    transform: rotate(-180deg);
}

.cs-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
}

.cs-accordion-item--expanded .cs-accordion-content {
    max-height: 1000px;
    opacity: 1;
    padding: 0px 16px 16px 16px;
    /* Added top padding */
}

.cs-accordion-description {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
}

.cs-accordion-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Responsive: Desktop shows table, Mobile/Tablet shows accordion */
@media (min-width: 1024px) {
    .cs-scope-table {
        display: flex;
    }

    .cs-scope-accordion {
        display: none;
    }

    /* View toggle overrides - table hidden when toggled to accordion */
    .cs-scope-table.cs-scope-table--hidden {
        display: none !important;
    }

    /* View toggle overrides - accordion visible when toggled */
    .cs-scope-accordion.cs-scope-accordion--desktop-visible {
        display: flex !important;
    }

    /* Desktop accordion - larger font sizes for better readability */
    .cs-scope-accordion--desktop-visible .cs-accordion-header-text {
        font-size: 17px;
        line-height: 24px;
    }

    .cs-scope-accordion--desktop-visible .cs-accordion-description {
        font-size: 17px;
        line-height: 24px;
    }

    .cs-scope-accordion--desktop-visible .cs-scope-pill-title {
        font-size: 15px;
        line-height: 20px;
    }

    .cs-scope-accordion--desktop-visible .cs-scope-pill-text {
        font-size: 14px;
        line-height: 18px;
    }
}

/* Smaller desktop viewports - make table scrollable horizontally */
/* Medium desktop viewports - allow columns to grow beyond default max */
@media (min-width: 1200px) and (max-width: 1440px) {
    .cs-scope-column {
        max-width: none;
        /* Remove max-width to fill available space */
        flex: 1 1 0;
        /* Grow equally */
    }
}

/* Smaller desktop viewports - reduce column spacing but let them grow */
@media (min-width: 1024px) and (max-width: 1199px) {
    .cs-scope-column {
        min-width: 160px;
        /* Minimum width */
        max-width: none;
        /* Allow growing to fill space */
        flex: 1 1 0;
        /* Grow equally to fill available space */
    }

    .cs-scope-column-header {
        padding: 0 16px;
        /* Reduced padding */
    }

    .cs-scope-column-content {
        padding: 0 16px;
        /* Reduced padding */
    }

    .cs-scope-column-title {
        font-size: 16px;
        /* Slightly smaller */
        line-height: 19px;
    }

    .cs-scope-pill {
        padding: 8px;
        /* Slightly reduced */
        gap: 8px;
    }
}

@media (max-width: 1023px) {
    .cs-scope-table {
        display: none;
    }

    .cs-scope-accordion {
        display: flex;
        width: 100%;
    }

    .cs-scope-column:last-child {
        border-bottom: none;
    }

    /* Mobile font size - 13px/15px to align with channels section */
    .cs-scope-pill-text,
    .cs-scope-pill-title,
    .cs-scope-pill-description,
    .cs-accordion-description {
        font-size: 13px;
        line-height: 15px;
    }

    .cs-scope-pill-label {
        font-size: 11px;
        line-height: 16px;
    }

    .cs-accordion-title {
        font-size: 18px;
    }

    /* Ensure pills don't overflow on mobile */
    .cs-scope-pill {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 12px 14px !important;
        /* More padding for better selection visibility */
        gap: 12px !important;
        /* More space between icon and text */
    }

    .cs-scope-pill-text,
    .cs-scope-pill-description {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .cs-accordion-pills {
        width: 100%;
        gap: 12px !important;
        /* More spacing between pills */
    }

    /* More padding when accordion is expanded on mobile */
    .cs-accordion-item--expanded .cs-accordion-content {
        padding: 0px 16px 16px 16px !important;
        /* Equal padding all around */
    }

    /* Ensure first pill has clearance from accordion header */
    .cs-accordion-pills .cs-scope-pill:first-child {
        margin-top: 4px;
    }

    .cs-accordion-item {
        width: 100%;
    }
}

/* Channel-specific scope item styling (legacy - keeping for compatibility) */
.cs-scope-item--channel {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-channel-collapsible {
    cursor: pointer;
}

.cs-channel-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-channel-title {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
}

.cs-channel-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.cs-channel-link {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    color: #a9a9a9;
    text-align: right;
}

.cs-channel-chevron {
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Collapsed state (default) - chevron points down */
.cs-channel-collapsible .cs-channel-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

/* Expanded state - chevron rotates up */
.cs-channel-collapsible.cs-channel-expanded .cs-channel-chevron {
    transform: rotate(180deg);
}

.cs-channel-collapsible.cs-channel-expanded .cs-channel-content {
    max-height: 200px;
    opacity: 1;
    margin-top: 8px;
}

.cs-channel-description {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
}

/* ==================== DESIGN STRATEGY 2-COLUMN LAYOUT ==================== */
.cs-grid-two-col-dynamic {
    display: grid;
    grid-template-columns: 562px 418px;
    gap: 146px;
    /* 830 - 684 = 146px per Figma */
    align-items: start;
}

/* Original Design section: video (320px) + Pain Points */
.cs-grid-two-col-dynamic--video-left {
    grid-template-columns: 320px 418px;
    gap: 192px;
    /* 830 - (290+320) + offset */
    padding-left: 168px;
    /* Shift video right: 290 - 122 = 168px */
}

/* Enhanced Design section: Enhancements + video (320px) */
.cs-grid-two-col-dynamic--video-right {
    grid-template-columns: 418px 320px;
    gap: 192px;
    padding-left: 98px;
    /* 220 - 122 = 98px */
}

/* .cs-ds-left and .cs-ds-right - design strategy columns (no specific styles) */

/* ==================== ENHANCEMENT FRAMEWORK - SCROLL-CONTROLLED LAYOUT ==================== */
/* 
 * FIXED 2-COLUMN CONTAINER with masked content cycling:
 * - Uses JavaScript-controlled fixed positioning (sticky breaks with overflow-x: hidden)
 * - The viewport becomes position:fixed when section is in view
 * - Content fades in/out WITHIN the fixed frame boundaries
 * - Scroll distance is the height of the section wrapper
 */

.cs-enhancement-framework {
    position: relative;
    /* Override parent grid layout - use flexbox for true center alignment */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    /* Reset parent grid padding - use symmetric padding */
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 100px;
}

/* Static intro section - appears above scroll-controlled area */
.cs-ef-intro {
    display: flex;
    flex-direction: column;
    max-width: 508px;
    /* Match intro content width from other sections */
}

.cs-ef-intro .cs-feature-header {
    margin-bottom: 0;
}

/* Section label inside intro gets 40px spacing to body text */
.cs-ef-intro .cs-ef-title {
    margin-bottom: 40px;
}

/* EF intro uses global .cs-sequence-item animation - see root styles */

/* Mobile: Add bottom padding to intro text for spacing from steps section */
@media (max-width: 1024px) {
    .cs-ef-intro .cs-ef-body {
        padding-bottom: 60px;
    }
}

/* This tall section provides the scroll distance */
.cs-ef-scroll-container {
    /* Height = scroll distance + viewport content area */
    /* This creates the "scroll runway" while viewport stays fixed */
    /* Extra tall for very slow, controlled page/step transitions */
    height: 8000px;
    position: relative;
    width: 100%;
    max-width: var(--cs-content-width);
}

/* The viewport that becomes fixed during scroll */
.cs-ef-sticky-viewport {
    position: absolute;
    /* Start as absolute, JS changes to fixed when in view */
    top: 0;
    left: 0;
    width: 100%;
    max-width: var(--cs-content-width);
    min-height: 720px;
    /* Accommodate scaled phone mockups */
    overflow: visible;
    /* Allow full mockup display */
    display: flex;
    align-items: flex-start;
    padding-top: 40px;
    background-color: var(--background);
    z-index: 10;
    transition: none;
    /* No transition during scroll for smoothness */
}

/* When JS sets this to fixed - position relative to viewport */
/* Left and width are set dynamically by JavaScript to match container position */
.cs-ef-sticky-viewport--fixed {
    position: fixed;
    top: 120px;
    /* Below navigation */
    /* left and width are set via JS inline styles */
}

/* When scrolled past - return to absolute at bottom */
.cs-ef-sticky-viewport--bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
}

.cs-ef-grid {
    display: grid;
    /* Simple fixed-width columns for editorial feel */
    grid-template-columns: 400px 400px;
    gap: 32px;
    /* Tighter gap for editorial feel */
    margin: 0 auto;
}

/* Responsive: Below 1440px, scale columns proportionally */
@media (max-width: 1440px) {
    .cs-ef-grid {
        /* Fluid columns that still center */
        grid-template-columns: minmax(280px, 360px) minmax(280px, 360px);
        gap: clamp(20px, 3vw, 32px);
        /* Tighter gap for tablet */
        margin: 0 auto;
    }

    /* Center the viewport container */
    .cs-ef-scroll-container,
    .cs-ef-sticky-viewport {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }

    /* Ensure the Enhancement Framework section spans full width for centering */
    .cs-enhancement-framework {
        width: 100%;
        max-width: none;
    }

    /* Override parent grid-column to span full width */
    .cs-enhancement-framework>* {
        grid-column: 1 / -1;
    }
}

/* Tablet: Center mockups in middle columns instead of full width */
@media (min-width: 769px) and (max-width: 1024px) {
    .cs-ef-grid {
        /* Use single column layout, centered */
        grid-template-columns: 1fr;
        max-width: 50%;
        /* Takes middle 2 of 4 columns equivalent */
        margin: 0 auto;
        gap: 24px;
    }

    .cs-ef-left,
    .cs-ef-right {
        min-height: auto;
    }

    /* Stack pages vertically */
    .cs-ef-page {
        position: relative;
    }

    /* Mockup video containers - fit within centered column */
    .cs-ef-page .cs-mockup,
    .cs-ef-page .cs-video-container {
        width: 100%;
        max-width: 360px;
        /* Constrain mockup size */
        margin: 0 auto;
    }
}

/* Mobile: Reduce side padding from 60px to 20px */
@media (max-width: 768px) {

    .cs-ef-scroll-container,
    .cs-ef-sticky-viewport {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==================== HEIGHT-RESPONSIVE SCALING ==================== */
/* Scale Enhancement Framework for shorter viewport heights */
/* Uses CSS transform scale for uniform proportional shrinking */
/* Labels use counter-scale to maintain consistent size */

/* Short height laptops (below 900px height) */
@media (max-height: 900px) {

    /* Scale down the entire grid proportionally */
    .cs-ef-grid {
        transform: scale(0.9);
        transform-origin: top center;
    }

    .cs-ef-left,
    .cs-ef-right {
        min-height: auto;
    }

    /* Counter-scale labels to maintain size (1/0.9 = 1.111) */
    .cs-ef-page>.cs-overview-label,
    .cs-ef-page>.cs-steps-component>.cs-overview-label {
        transform: scale(1.111);
        transform-origin: left top;
    }
}

/* Medium-short height (below 800px) */
@media (max-height: 800px) {
    .cs-ef-grid {
        transform: scale(0.8);
        transform-origin: top center;
    }

    /* Counter-scale labels (1/0.8 = 1.25) */
    .cs-ef-page>.cs-overview-label,
    .cs-ef-page>.cs-steps-component>.cs-overview-label {
        transform: scale(1.25);
        transform-origin: left top;
    }

    /* Reduce step spacing */
    .cs-ef-steps {
        gap: 8px;
    }

    .cs-step.cs-ef-step {
        padding: 5px 10px 5px 5px;
        gap: 10px;
    }
}

/* Very short height (below 700px - small laptops) */
@media (max-height: 700px) {
    .cs-ef-grid {
        transform: scale(0.7);
        transform-origin: top center;
    }

    /* Counter-scale labels (1/0.7 = 1.43) */
    .cs-ef-page>.cs-overview-label,
    .cs-ef-page>.cs-steps-component>.cs-overview-label {
        transform: scale(1.43);
        transform-origin: left top;
    }

    /* Compact step styling */
    .cs-ef-steps {
        gap: 6px;
    }

    .cs-step.cs-ef-step {
        padding: 4px 8px 4px 4px;
        gap: 8px;
    }

    .cs-step-number {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .cs-step-subhead {
        font-size: 12px;
        line-height: 15px;
        padding-bottom: 2px;
    }

    .cs-step-body {
        font-size: 11px;
        line-height: 14px;
    }
}

/* Extremely short height (below 600px) */
@media (max-height: 600px) {
    .cs-ef-grid {
        transform: scale(0.6);
        transform-origin: top center;
    }

    /* Counter-scale labels (1/0.6 = 1.667) */
    .cs-ef-page>.cs-overview-label,
    .cs-ef-page>.cs-steps-component>.cs-overview-label {
        transform: scale(1.667);
        transform-origin: left top;
    }
}

/* Left column pages - left-align content */
.cs-ef-left [data-ef-page="3"],
.cs-ef-left [data-ef-page="6"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left-align content within column */
}

/* Left column Page 3 (Original Design) - full width of column */
.cs-ef-left [data-ef-page="3"] .cs-overview-label,
.cs-ef-left [data-ef-page="3"] .cs-mockup {
    width: 100%;
    /* No max-width - fill column like steps */
}

/* Page 6 (Enhancements steps in left column) - full width */
.cs-ef-left [data-ef-page="6"] .cs-steps-component {
    width: 100%;
    /* No max-width - fill column */
}

/* Left and Right Columns */
.cs-ef-left {
    position: relative;
    min-height: 680px;
    /* Accommodate scaled phone mockups */
    overflow: visible;
    /* Allow mockups to display fully */
}

.cs-ef-right {
    position: relative;
    min-height: 680px;
    /* Match left column for video mockups */
    overflow: visible;
    /* Allow video mockups to display fully */
}

/* Right column pages - left-align content */
.cs-ef-right [data-ef-page="2"],
.cs-ef-right [data-ef-page="4"],
.cs-ef-right [data-ef-page="5"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left-align content within column */
}

/* Right column Page 5 (Enhanced Design) - full width of column */
.cs-ef-right [data-ef-page="5"] .cs-overview-label,
.cs-ef-right [data-ef-page="5"] .cs-mockup {
    width: 100%;
    /* No max-width - fill column like steps */
}

/* Page 2 (Process steps) and Page 4 (Pain points) in right column - fill column */
.cs-ef-right [data-ef-page="2"] .cs-steps-component,
.cs-ef-right [data-ef-page="4"] .cs-steps-component {
    width: 100%;
    /* No max-width - fill column */
}

/* Pages - stacked on top of each other, fade in/out within the masked container */
.cs-ef-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    /* Start below, slide up into view */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Active page - visible and in position */
.cs-ef-page--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Page 1 special handling - instant container, staggered children */
.cs-ef-page[data-ef-page="1"] {
    transition: none;
    /* No page-level animation */
}

.cs-ef-page--active[data-ef-page="1"] {
    opacity: 1;
    transform: translateY(0);
}

/* Enhancement Framework title styling - matches section label color */
.cs-ef-title {
    color: #7b7b7b;
    display: block;
}

/* Enhancement Framework body - match features font size (17px/24px) */
.cs-ef-body {
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 24px;
    color: #ffffff;
}

/* Staggered animation for Page 1 children (header then body) */
.cs-ef-page[data-ef-page="1"]>.cs-feature-header,
.cs-ef-page[data-ef-page="1"]>.cs-intro-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.cs-ef-page--active[data-ef-page="1"]>.cs-feature-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    /* Header animates first */
}

.cs-ef-page--active[data-ef-page="1"]>.cs-intro-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
    /* Body animates after header */
    max-width: 380px;
}

/* Exiting page - fades out and slides up */
.cs-ef-page--exiting {
    opacity: 0;
    transform: translateY(-30px);
}

/* Enhancement Framework mockups - 400×600 proportion, scale to fit viewport */
.cs-ef-page .cs-mockup,
.cs-ef-page .cs-mockup--full {
    width: 400px;
    height: 600px;
    /* Reference dimensions */
    max-height: calc(100vh - 220px);
    /* Scale down to fit viewport height */
    max-width: calc((100vh - 220px) * 0.667);
    /* Maintain 400/600 ratio when scaling */
    background: var(--card-bg);
    border: var(--background);
    border-radius: 8px;
    overflow: hidden;
}

.cs-ef-page .cs-mockup video,
.cs-ef-page .cs-mockup--full video,
.cs-ef-page .cs-mockup img,
.cs-ef-page .cs-mockup--full img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center !important;
}

/* Remove border in dark mode for Enhancement Framework mockups */
[data-theme="dark"] .cs-ef-page .cs-mockup,
[data-theme="dark"] .cs-ef-page .cs-mockup--full {
    border: none;
}

/* Enhancement Framework mockups should NOT use reveal animation */
/* They have their own page transition system - override reveal defaults */
.cs-ef-page .cs-mockup.cs-reveal,
.cs-ef-page .cs-mockup--full.cs-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.cs-ef-page .cs-mockup.cs-reveal video,
.cs-ef-page .cs-mockup.cs-reveal img,
.cs-ef-page .cs-mockup--full.cs-reveal video,
.cs-ef-page .cs-mockup--full.cs-reveal img {
    transform: none !important;
    clip-path: none !important;
}

/* Steps in Enhancement Framework */
.cs-ef-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Enhancement Framework steps - override base .cs-step styles */
/* Use consistent 2px border to prevent text shifting on highlight */
/* Supports dynamic fisheye scaling via --step-scale custom property */
.cs-step.cs-ef-step {
    --step-scale: 0.72;
    /* Default scale for inactive steps */
    opacity: 0.4;
    transform: scale(var(--step-scale)) translateY(10px);
    transform-origin: left center;
    /* Scale from left edge to maintain alignment */
    /* Start slightly below, slide up when active */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease-out, background 0.3s ease, border 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(169, 169, 169, 0.3);
    /* 2px border - same as active to prevent shift */
}

/* Step becomes highlighted - ALL steps get green highlight in Enhancement Framework */
/* Matches selected pill styling from index page */
/* Scale is controlled dynamically via --step-scale JS property */
.cs-step.cs-ef-step.cs-ef-step--active {
    opacity: 1;
    transform: scale(var(--step-scale)) translateY(0);
    /* Slide up into final position, scale controlled by JS */
    background: rgba(126, 187, 28, 0.25) !important;
    border: 1px solid #7ebb1c !important;
    /* Same 2px width, different color */
}

/* Enhancement Framework step numbers - ALL filled with green bg and white text */
/* consistent 1px border to prevent text shifting on highlight */
.cs-step.cs-ef-step .cs-step-number {
    background: #ffffff !important;
    border: 1.5px solid var(--icon-border) !important;
}

.cs-step.cs-ef-step .cs-step-number span {
    color: #1a1a1a !important;
}

.cs-step.cs-ef-step.cs-ef-step--active .cs-step-number {
    background: rgba(126, 187, 28, 0.45) !important;
    border: 1.5px solid rgba(126, 187, 28, 0.55) !important;
}

.cs-step.cs-ef-step.cs-ef-step--active .cs-step-number span {
    color: #1a1a1a !important;
}

/* Active step TEXT - dark in light mode, white in dark mode */
.cs-step.cs-ef-step.cs-ef-step--active .cs-step-text,
.cs-step.cs-ef-step.cs-ef-step--active .cs-step-subhead {
    color: #2c2c2c !important;
}

.cs-step.cs-ef-step.cs-ef-step--active .cs-step-body {
    color: #515151 !important;
}

[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active .cs-step-text,
[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active .cs-step-subhead {
    color: #ffffff !important;
}

[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active .cs-step-body {
    color: #c1c1c1 !important;
}

/* Red step highlight state (for Pain Points section) */
/* Matches selected pill styling pattern - semi-transparent background */
.cs-step.cs-ef-step.cs-ef-step--active.cs-step--red {
    background: rgba(231, 76, 60, 0.25) !important;
    border: 1px solid #e74c3c !important;
}

/* Red step numbers - ALL filled red (overrides green default) */
.cs-step.cs-ef-step.cs-step--red .cs-step-number {
    background: #ffffff !important;
    border: 1.5px solid var(--icon-border) !important;
}

.cs-step.cs-ef-step.cs-step--red.cs-ef-step--active .cs-step-number {
    background: rgba(231, 76, 60, 0.45) !important;
    border: 1.5px solid rgba(231, 76, 60, 0.55) !important;
}

.cs-step.cs-ef-step.cs-step--red .cs-step-number span {
    color: #1a1a1a !important;
}

/* Red step text - dark in light mode, white in dark mode */
.cs-step.cs-ef-step.cs-ef-step--active.cs-step--red .cs-step-text,
.cs-step.cs-ef-step.cs-ef-step--active.cs-step--red .cs-step-subhead {
    color: #2c2c2c !important;
}

.cs-step.cs-ef-step.cs-ef-step--active.cs-step--red .cs-step-body {
    color: #515151 !important;
}

[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active.cs-step--red .cs-step-text,
[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active.cs-step--red .cs-step-subhead {
    color: #ffffff !important;
}

[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active.cs-step--red .cs-step-body {
    color: #c1c1c1 !important;
}

/* ===== DARK MODE: Enhancement Framework step number badges ===== */
/* Default: white border, transparent white fill, white text */
[data-theme="dark"] .cs-step.cs-ef-step .cs-step-number {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .cs-step.cs-ef-step .cs-step-number span {
    color: #ffffff !important;
}

/* Active green: green border, green transparent fill, white text */
[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active .cs-step-number {
    background: rgba(126, 187, 28, 0.45) !important;
    border: 1.5px solid rgba(126, 187, 28, 0.6) !important;
}

[data-theme="dark"] .cs-step.cs-ef-step.cs-ef-step--active .cs-step-number span {
    color: #ffffff !important;
}

/* Red default: white border, transparent white fill, white text */
[data-theme="dark"] .cs-step.cs-ef-step.cs-step--red .cs-step-number {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .cs-step.cs-ef-step.cs-step--red .cs-step-number span {
    color: #ffffff !important;
}

/* Active red: red border, red transparent fill, white text */
[data-theme="dark"] .cs-step.cs-ef-step.cs-step--red.cs-ef-step--active .cs-step-number {
    background: rgba(231, 76, 60, 0.45) !important;
    border: 1.5px solid rgba(231, 76, 60, 0.6) !important;
}

[data-theme="dark"] .cs-step.cs-ef-step.cs-step--red.cs-ef-step--active .cs-step-number span {
    color: #ffffff !important;
}

/* ==================== PROCESS STEPS ==================== */
.cs-steps-component {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-steps-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(169, 169, 169, 0.3);
    width: fit-content;
}

/* Filled label variants - use default styling for consistency */
.cs-steps-label--filled.cs-steps-label--green,
.cs-steps-label--filled.cs-steps-label--red {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(169, 169, 169, 0.3);
}

.cs-steps-label--filled.cs-steps-label--green .cs-steps-label-text,
.cs-steps-label--filled.cs-steps-label--red .cs-steps-label-text {
    color: #5c5c5c;
    font-weight: 400;
}

/* Spacing rule: Labels followed by mockups always have 24px gap */
.cs-steps-label+.cs-mockup {
    margin-top: 24px;
}

/* Spacing inside steps-component handled by parent */
.cs-steps-component .cs-steps-label {
    margin-bottom: 24px;
}

/* Section labels inside steps-component (for Enhancement Framework pages) - 40px consistent */
.cs-steps-component>.cs-overview-label {
    margin-bottom: 40px;
    display: block;
}


/* Section labels in Enhancement Framework pages - 40px consistent */
.cs-ef-page>.cs-overview-label {
    margin-bottom: 40px;
    display: block;
}

/* Sequence animation for labels */
.cs-steps-label.cs-sequence-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cs-steps-label.cs-sequence-item.cs-sequence-item--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Sequence animation for mockups - DISABLED: Using reveal animation instead */
/* .cs-mockup.cs-sequence-item rules moved to reveal animation system */

.cs-steps-label-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    color: #5c5c5c;
}

.cs-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-steps-title {
    display: inline-flex;
}

.cs-steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cs-step {
    display: flex;
    align-items: flex-start;
    /* Align step number to top */
    gap: 16px;
    padding: 8px 16px 8px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(169, 169, 169, 0.3);
    align-self: stretch;
    /* Match Figma */
}

/* Process steps 4 & 5 — single-line text, middle-align badge */
[data-ef-steps="process"] [data-ef-step="4"],
[data-ef-steps="process"] [data-ef-step="5"] {
    align-items: center;
}

/* Sequence animation for steps */
.cs-step.cs-sequence-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cs-step.cs-sequence-item.cs-sequence-item--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Green active state */
.cs-step--green.cs-step--active {
    background-color: rgba(126, 187, 28, 0.25);
    border: 1px solid #7ebb1c;
    box-shadow: none;

}

.cs-step-number--green {
    background-color: rgba(126, 187, 28, 0.25);
    border: 1px solid #7ebb1c;
    box-shadow: none;

}

.cs-step-number--green span {
    color: #ffffff !important;
}

/* Red active state (pain points) */
.cs-step--red.cs-step--active {
    background-color: rgba(187, 28, 28, 0.25);
    border: 1px solid #bb1c1c;
    box-shadow: none;
}

.cs-step-number--red {
    background-color: rgba(187, 28, 28, 0.25);
    border: 1px solid #bb1c1c;
    box-shadow: none;
}

.cs-step-number--red span {
    color: #ffffff !important;
}

.cs-step--active {
    background-color: rgba(126, 187, 28, 0.25);
    border: 1px solid #7ebb1c;
    box-shadow: none;
}

.cs-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--icon-border);
    background-color: transparent;
    flex-shrink: 0;
}

/* Dark mode: step number badges get semi-transparent fill, white text */
[data-theme="dark"] .cs-step-number {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .cs-step-number span {
    color: #ffffff !important;
}

.cs-step--active .cs-step-number {
    background-color: rgba(126, 187, 28, 0.25);
    border: 1px solid #7ebb1c;
    color: #ffffff;
}

.cs-step-number span {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.39px;
    color: var(--primary-text);
}

.cs-step--active .cs-step-number span {
    color: #ffffff;
}

.cs-step-number-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.39px;
    color: var(--primary-text);
}

.cs-step--active .cs-step-number-text {
    color: #ffffff;
}

/* Step content wrapper - for multi-line steps with subhead + body */
.cs-step-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    /* Small spacing between subhead and body */
    flex: 1 0 0;
    /* Grow to fill space */
    min-width: 0;
    /* Allow text wrapping */
    align-self: stretch;
    line-height: 20px;
    white-space: normal;
    /* Allow wrapping */
}

/* Step subhead - bold title */
.cs-step-subhead {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--primary-text);
    width: 100%;
    padding-bottom: 4px;
}

/* Step body - description text */
.cs-step-body {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 350;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: #777777;
    width: 100%;
    margin: 0;
}

[data-theme="dark"] .cs-step-body {
    color: #c1c1c1;
}

/* Step text - legacy single-line text (kept for backward compatibility) */
.cs-step-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--primary-text);
}

/* Mobile: Smaller step text for all step elements */
@media (max-width: 768px) {

    .cs-step-text,
    .cs-step-subhead,
    .cs-step-body {
        font-size: 12px;
        line-height: 16px;
    }
}

/* ==================== CONTENT TEXT ==================== */

.cs-body-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.39px;
    color: var(--primary-text);
}

/* Constrained intro text (max-width per Figma) */
.cs-intro-text--constrained {
    max-width: 877px;
}

/* Growth section text - same size as project title per Figma */
.cs-intro-text--growth {
    font-size: 48px;
    line-height: 62px;
    letter-spacing: -0.48px;
    max-width: 1000px;
}

/* Growth quote word-by-word reveal */
.cs-growth-reveal {
    display: block;
    /* Preserve natural whitespace between words */
    word-spacing: normal;
}

.cs-growth-word {
    display: inline;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    /* Faster fade-in for quick scrollers */
}

.cs-growth-word.cs-growth-word--visible {
    opacity: 1;
}

/* Mobile/Tablet: Words are revealed immediately by JS, scroll gradient handles opacity */
/* No CSS override needed - JS sets .cs-growth-word--visible on all words at once */
/* .cs-section-header canonical definition at line ~412 */

/* Header with large gap (for AI Strategic Foresight) */
.cs-header--large-gap {
    margin-bottom: 104px;
}

/* Section with footer padding */
.cs-section--footer {
    padding-bottom: 200px;
}

/* ==================== MOCKUP FRAMES ==================== */
.cs-mockup {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--card-bg);
    width: 100%;
    /* Full width by default */
    height: auto;
    /* Let content determine height */
    display: block;
    /* Remove inline spacing */
}

.cs-mockup--mobile {
    max-width: 320px;
    height: 700px;
}

.cs-mockup--tablet {
    max-width: 562px;
    width: 100%;
}

.cs-mockup--large {
    height: 464px;
}

/* Full-width mockup variant for maximum screen real estate */
.cs-mockup--full {
    max-width: 100%;
    width: 100%;
    height: auto;
    /* Let height be determined by content */
    overflow: visible;
    /* Allow progress bar to show */
    display: block;
    /* Remove inline spacing */
}

/* Video styling within mockups */
.cs-mockup video,
.cs-mockup--full video {
    width: 100%;
    height: auto;
    /* Preserve video's natural aspect ratio */
    display: block;
    border-radius: 8px;
}

/* Features section videos - 1px grey border */
.cs-feature-mockup .cs-mockup video,
.cs-feature-mockup .cs-mockup--full video {
    border: var(--background);
}

/* Dark mode border for Features videos */
[data-theme="dark"] .cs-feature-mockup .cs-mockup video,
[data-theme="dark"] .cs-feature-mockup .cs-mockup--full video {
    border-color: var(--background);
}

/* Video container with play button overlay */
.cs-video-container {
    position: relative;
    width: 100%;
    height: auto;
    /* Let video determine height */
    display: block;
    /* Remove inline spacing */
    cursor: pointer;
}

/* ===== VIDEO LOADING STATE INDICATORS ===== */
/* Subtle pulse animation while video is loading/buffering */
.cs-video-container.video-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 5;
    animation: videoLoadingPulse 1.5s ease-in-out infinite;
}

@keyframes videoLoadingPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

/* Loading spinner */
.cs-video-container.video-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    z-index: 6;
    animation: videoLoadingSpin 0.8s linear infinite;
}

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

/* Hide loading indicator when video is ready */
.cs-video-container.video-ready::before,
.cs-video-container.video-ready::after {
    display: none;
}

/* Error state - video failed to load after retries */
.cs-video-container.video-error::before {
    content: 'Video unavailable';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 5;
    animation: none;
}

.cs-video-container.video-error::after {
    display: none;
}

/* ===== END VIDEO LOADING STATE INDICATORS ===== */

/* Video container inside Enhancement Framework mockups */
.cs-ef-page .cs-video-container {
    width: 100%;
    height: auto;
    /* Match video height */
    display: block;
    /* Remove inline spacing */
}

.cs-ef-page .cs-video-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 8px;
}

/* Click-to-play videos need pointer-events even when parent page isn't active */
.cs-ef-page .cs-video-container[data-click-to-play],
.cs-ef-page .cs-mockup:has(.cs-video-container[data-click-to-play]) {
    pointer-events: auto;
}

/* Play button overlay */
.cs-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(90, 90, 90, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
    pointer-events: none;
}

.cs-video-container:hover .cs-video-play-btn {
    background-color: rgba(70, 70, 70, 0.95);
    transform: translate(-50%, -50%) scale(1.05);
}

/* Play icon (triangle) */
.cs-video-play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px;
    /* Optical centering */
}

/* Hide play button when video is playing */
.cs-video-container.cs-video-playing .cs-video-play-btn {
    opacity: 0;
    pointer-events: none;
}

/* Video progress bar */
.cs-video-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    /* Larger height for better visibility */
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 0 0 8px 8px;
    /* Match video frame rounded corners */
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show progress bar when video is playing */
.cs-video-container.cs-video-playing .cs-video-progress {
    opacity: 1;
}

/* Progress bar fill - smooth transform-based animation */
.cs-video-progress-bar {
    height: 100%;
    width: 100%;
    background-color: rgba(90, 90, 90, 0.8);
    border-radius: 0 0 0 8px;
    /* Only round bottom-left, right edge stays straight while animating */
    transform-origin: left center;
    transform: scaleX(0);
    /* Start at 0, scale to 1 */
    will-change: transform;
    /* Optimize for smooth animation */
    transition: border-radius 0.15s ease;
}

/* When progress is complete (100%), round the right corner to match container */
.cs-video-progress-bar.cs-progress-complete {
    border-radius: 0 0 8px 8px;
    /* Round both bottom corners when complete */
}

/* Dark mode progress bar - darker for better visibility */
[data-theme="dark"] .cs-video-progress {
    background-color: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .cs-video-progress-bar {
    background-color: rgba(80, 80, 80, 0.9);
}

/* ==================== IMAGE/VIDEO REVEAL ANIMATION ==================== */
/*
   Premium scroll reveal animation with clip-path + scale effect
   - Container fades in with subtle blur
   - Image/video clips from top to bottom while zooming out
   - Triggers via IntersectionObserver adding .cs-reveal-visible class
*/

/* Reveal container - mockup, video, and hero wrappers */
/* Using .cs-reveal class for explicit opt-in (not conflicting with other systems) */
/* IMPORTANT: These rules MUST override .cs-sequence-item rules that appear later */
.cs-reveal {
    border-radius: 8px;
    overflow: hidden;
    background: transparent !important;
    /* Override any conflicting opacity/transform from sequence-item */
    opacity: 0 !important;
    transform: translateY(14px) !important;
    filter: blur(3px) !important;
    /* Disable any keyframe animations */
    animation: none !important;

    transition:
        opacity 420ms var(--reveal-ease),
        transform 420ms var(--reveal-ease),
        filter 420ms var(--reveal-ease) !important;
}

.cs-reveal.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: blur(0) !important;
}

/* IMAGE/VIDEO ONLY - no transition until revealed */
.cs-reveal img,
.cs-reveal video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transform: scale(1.35) !important;
    clip-path: inset(0 0 100% 0) !important;

    will-change: clip-path, transform;
}

/* Only add transitions when revealed */
.cs-reveal.in-view img,
.cs-reveal.in-view video {
    clip-path: inset(0 0 0 0) !important;
    transform: scale(1) !important;

    transition-property: clip-path, transform;
    transition-duration: var(--reveal-clip-dur), var(--reveal-scale-dur);
    transition-timing-function: var(--reveal-ease), var(--reveal-ease);
    transition-delay: 0ms, var(--reveal-scale-delay);
}

/* Hide video progress bar during reveal animation */
.cs-reveal .cs-video-progress,
.cs-reveal .cs-video-play-btn {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Show video controls only after reveal animation completes */
.cs-reveal.in-view .cs-video-progress,
.cs-reveal.in-view .cs-video-play-btn {
    opacity: 1;
    pointer-events: auto;
    /* Delay showing controls until after reveal animation finishes (1.2s) */
    transition-delay: var(--reveal-clip-dur, 1200ms);
}

/* Progress bar still hidden by default, only shows when playing */
.cs-reveal.in-view .cs-video-progress {
    opacity: 0;
}

/* Show progress bar when video is actually playing */
.cs-reveal.in-view.cs-video-playing .cs-video-progress,
.cs-reveal.in-view .cs-video-container.cs-video-playing .cs-video-progress {
    opacity: 1 !important;
}

/* ==================== SCROLL NAVIGATION ==================== */
/*
   Design: Pill-shaped section indicator with pointer (speech bubble)
   - Rounded pill shape with arrow on right
   - Only ONE visible at a time (current section)
   - Moves vertically based on scroll progress
   Dimensions from Figma: 75px min-width, 22.5px height
*/

.cs-scroll-nav {
    position: fixed;
    right: 10px;
    top: 0;
    height: 100vh;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cs-scroll-nav--visible {
    opacity: 1;
}

/* Scroll Track - vertical bar showing page extent */
.cs-scroll-track {
    position: absolute;
    right: 0;
    top: 180px;
    width: 3px;
    height: calc(100vh - 260px);
    background-color: #d4d4d4;
    border-radius: 1.5px;
    opacity: 0.4;
}

[data-theme="dark"] .cs-scroll-track {
    background-color: #555;
}

/* Scroll Thumb - shows current scroll position */
.cs-scroll-thumb {
    position: absolute;
    right: 0;
    width: 3px;
    height: 40px;
    background-color: #a0a0a0;
    border-radius: 1.5px;
    /* No transition - moves instantly with scroll for perfect sync */
}

[data-theme="dark"] .cs-scroll-thumb {
    background-color: #707070;
}

/* Section Label - aligned with scroll thumb, moves together */
.cs-scroll-label {
    position: absolute;
    right: 7px;
    /* 4px gap from scroll bar (3px bar + 4px = 7px) */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Right-align the pill */
    height: 23px;
    /* Fixed height to prevent layout shift */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* Prevent any sub-pixel rendering issues */
    transform: translateZ(0);
    will-change: top, opacity;
}

.cs-scroll-label--active {
    opacity: 1;
    pointer-events: auto;
}

/* The pill container - uses inline SVG for exact Figma shape
   Dimensions from Figma: 75px width, 22.547px height */
.cs-scroll-label-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    /* Right-align text within pill */
    width: auto;
    /* Fit content */
    height: 23px;
    padding: 0 16px 0 8px;
    /* Extra right padding for arrow area */
    white-space: nowrap;
    cursor: pointer;
}

/* SVG shape positioned behind text */
.cs-scroll-label-pill .pill-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.cs-scroll-label-pill .pill-shape path {
    fill: var(--background);
    stroke: #D9D9D9;
}

[data-theme="dark"] .cs-scroll-label-pill .pill-shape path {
    fill: var(--background);
    stroke: #505050;
}

/* Label text - fixed positioning to prevent shifting */
.cs-scroll-label-text {
    z-index: 1;
    font-family: 'Neue Haas Unica', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 23px;
    /* Match container height for perfect vertical centering */
    color: #5c5c5c;
}

/* Hover state */
.cs-scroll-label-pill:hover .pill-shape path {
    stroke: #999;
}

.cs-scroll-label-pill:hover .cs-scroll-label-text {
    color: var(--primary-text);
}

/* ==================== SECTION DIVIDERS ==================== */
.cs-divider {
    width: 100%;
    height: 1px;
    background-color: var(--icon-border);
    margin: var(--cs-section-gap) 0;
}

/* ==================== SEQUENCED ANIMATIONS ==================== */
/* Base .cs-sequence-item and .cs-sequence-item--visible are defined at line ~166 */

/* Stagger delays for sequenced items (fallback, JS sets inline delay) */
.cs-sequence-item[data-sequence="1"] {
    transition-delay: 0.1s;
}

.cs-sequence-item[data-sequence="2"] {
    transition-delay: 0.2s;
}

.cs-sequence-item[data-sequence="3"] {
    transition-delay: 0.3s;
}

.cs-sequence-item[data-sequence="4"] {
    transition-delay: 0.4s;
}

.cs-sequence-item[data-sequence="5"] {
    transition-delay: 0.5s;
}

.cs-sequence-item[data-sequence="6"] {
    transition-delay: 0.6s;
}

.cs-sequence-item[data-sequence="7"] {
    transition-delay: 0.7s;
}

.cs-sequence-item[data-sequence="8"] {
    transition-delay: 0.8s;
}

.cs-sequence-item[data-sequence="9"] {
    transition-delay: 0.9s;
}

/* ==================== RESPONSIVE ==================== */
/* 
   Above-the-fold strategy:
   - Hero + Overview should fit in ~770px viewport height ideally
   - Hero: 96px top + 464px height = 560px
   - Overview: 48px gap + ~210px content = ~818px total
   - Scale hero height on smaller viewports to keep overview visible
*/

/* Fluid grid system handles scaling automatically via clamp() */
/* These breakpoints only handle layout changes, not sizing */
@media (max-width: 1440px) {
    /* Margins now handled by clamp() in :root */
}

/* Shorter viewports - reduce hero height to keep overview above fold */
@media (max-height: 900px) {
    :root {
        --cs-hero-height: 400px;
        --cs-hero-top: 80px;
        --cs-hero-overview-gap: 40px;
    }
}

@media (max-height: 800px) {
    :root {
        --cs-hero-height: 350px;
        --cs-hero-top: 72px;
        --cs-hero-overview-gap: 32px;
    }
}

@media (max-height: 700px) {
    :root {
        --cs-hero-height: 280px;
        --cs-hero-top: 64px;
        --cs-hero-overview-gap: 24px;
    }
}

@media (max-width: 1200px) {
    .cs-grid-architecture {
        grid-template-columns: repeat(3, 1fr);
    }

    .cs-grid-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-grid-feature {
        display: flex;
        flex-direction: column;
        /* No gap - spacing controlled by section label margin-bottom (40px) */
        min-height: auto;
    }

    /* Mobile: Image/mockup appears ABOVE text */
    .cs-feature-mockup {
        order: -1;
        width: 100%;
    }

    .cs-feature-text {
        order: 1;
    }

    /* Force mockups to be visible and full-width */
    .cs-mockup,
    .cs-mockup--full,
    .cs-mockup--tablet,
    .cs-feature-mockup .cs-mockup {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: unset;
        aspect-ratio: unset;
        background-color: var(--card-bg);
        display: block;
    }

    .cs-grid-two-col {
        grid-template-columns: 1fr 1fr;
        gap: var(--cs-gutter);
        width: 100%;
    }

    /* Section gaps now handled by clamp() in :root */
}

@media (max-width: 1024px) {
    :root {
        /* Hero positioning adjustments for tablet - preserved */
        --cs-hero-top: 80px;
        /* Margins and gaps now handled by clamp() */
    }

    /* Section labels - consistent 40px spacing to content on tablet/mobile */
    .cs-section>.cs-overview-label {
        display: block;
        margin-bottom: 40px;
    }

    /* ==================== FASTER ANIMATIONS FOR TABLET/MOBILE ==================== */
    /* Reduce animation duration for better responsiveness on touch devices */

    /* Initial page load animations - faster on mobile */
    /* .cs-hero animation removed - using reveal animation instead */

    /* Above-fold elements use JS-triggered transitions for reliable initialization */
    .cs-title-group {
        transition: opacity 0.5s ease;
    }

    .cs-overview-row {
        transition: opacity 0.4s ease;
    }

    /* Scroll-triggered animations - faster transitions */
    .cs-sequence-item {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .cs-table-pill {
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    }

    .cs-growth-word {
        transition: opacity 0.2s ease;
    }

    .cs-scope-pill,
    .cs-accordion-item {
        transition: all 0.2s ease;
    }

    /* More padding for pills on tablet */
    .cs-scope-pill {
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .cs-accordion-pills {
        gap: 12px !important;
    }

    /* More padding when accordion is expanded on tablet */
    .cs-accordion-item--expanded .cs-accordion-content {
        padding: 0px 16px 16px 16px !important;
        /* Equal padding all around */
    }

    /* Ensure first pill has clearance from accordion header */
    .cs-accordion-pills .cs-scope-pill:first-child {
        margin-top: 4px;
    }

    /* Accordion transitions - snappier on mobile */
    .cs-accordion-content {
        transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
    }

    .cs-accordion-chevron {
        transition: transform 0.2s ease;
    }

    .cs-grid-title-overview,
    .cs-grid-sticky {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* More spacing between stacked overview items on mobile */
    .cs-overview {
        gap: 40px;
    }

    .cs-overview-row {
        flex-direction: column;
        gap: 40px;
    }

    .cs-overview-item {
        width: 100%;
    }

    .cs-grid-two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cs-grid-two-col-dynamic,
    .cs-grid-two-col-dynamic--video-left,
    .cs-grid-two-col-dynamic--video-right {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-left: 0;
    }

    /* All mockups use full available width on tablet */
    .cs-mockup,
    .cs-mockup--mobile,
    .cs-mockup--tablet {
        width: 100%;
        max-width: 100%;
        /* Remove max-width restrictions */
    }

    /* Reorder feature sections on tablet */
    .cs-feature-mockup {
        order: -1;
        width: 100%;
    }

    .cs-feature-text {
        order: 1;
        width: 100%;
    }

    /* Feature mockups - full width, height determined by video */
    .cs-feature-mockup .cs-mockup {
        width: 100%;
        max-width: 100%;
        min-height: unset;
        height: auto;
        /* Let video determine height */
        aspect-ratio: unset;
        /* Remove fixed aspect ratio for video content */
    }

    /* Scope accordion - full width */
    .cs-scope-accordion {
        width: 100%;
        max-width: 100%;
    }

    /* Stat label - tablet uses base margin-top from main styles */

    .cs-sticky-left {
        position: relative;
        top: 0;
    }

    .cs-header--large-gap {
        margin-bottom: 64px;
    }

    .cs-intro-content {
        max-width: 100%;
        margin-left: 0;
        width: 100%;
    }

    /* Hero - full width on tablet */
    .cs-hero {
        width: 100%;
        max-width: 100%;
    }

    /* Growth text - match intro text size and alignment on tablet */
    .cs-intro-text--growth {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.048px;
        max-width: 100%;
        text-align: left;
        margin-left: 0;
    }

    /* Feature section sequence items - use transitions triggered by JS class */
    .cs-feature-header.cs-sequence-item,
    .cs-feature-text .cs-sequence-item,
    .cs-feature-mockup .cs-sequence-item {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .cs-feature-header.cs-sequence-item--visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.1s;
    }

    .cs-feature-text .cs-sequence-item--visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.25s;
    }

    .cs-feature-mockup .cs-sequence-item--visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.4s;
    }

    /* ==================== TABLET FOLLOWS MOBILE PATTERNS ==================== */

    /* Overview section - vertical layout (mobile pattern) */
    .cs-overview-row {
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

    /* Overview items - full width on tablet, reset fixed widths */
    .cs-overview-item {
        flex-shrink: 1;
        max-width: 100%;
        width: 100% !important;
        /* Override desktop fixed widths */
    }

    .cs-overview-item--pills {
        width: 100%;
        max-width: 100%;
    }

    /* Pills container with gradient overlays */
    .cs-pills-container {
        width: 100%;
        max-width: calc(100vw - 64px);
        /* viewport - left/right margins */
        position: relative;
        overflow: hidden;
    }

    /* Ensure gradient fades are visible on tablet */
    .cs-pills-fade-left {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, var(--background) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    .cs-pills-fade-right {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to left, var(--background) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    /* ==================== ENHANCEMENT FRAMEWORK - TABLET ==================== */
    .cs-ef-scroll-container {
        /* Extra tall for slower transitions on tablet */
        height: 6500px;
        width: 100%;
    }

    .cs-ef-sticky-viewport {
        left: 0;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        height: auto;
        overflow: visible;
    }

    .cs-ef-sticky-viewport--fixed {
        top: 60px;
        /* left and width are set via JS inline styles */
    }

    .cs-ef-sticky-viewport--bottom {
        left: 0;
    }

    /* Tablet: Single column layout with pages in sequence order */
    .cs-ef-scroll-container {
        height: auto !important;
    }

    .cs-ef-sticky-viewport {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        /* Center in parent on mobile */
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto;
        min-height: auto;
        height: auto;
        overflow: visible;
    }

    .cs-ef-sticky-viewport--fixed,
    .cs-ef-sticky-viewport--bottom {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    .cs-ef-grid {
        display: flex;
        flex-direction: column;
        gap: 48px;
        width: 100%;
        /* Add horizontal padding inside the full-width grid */
        padding-left: 24px;
        padding-right: 24px;
    }

    .cs-ef-left,
    .cs-ef-right {
        display: contents;
    }

    .cs-ef-grid {
        gap: 160px;
        /* More spacing between pages */
        /* Disable height-based scale transforms on mobile - they cause width issues */
        transform: none !important;
    }

    /* Reset label counter-scale transforms on mobile (they were offsetting grid scale) */
    .cs-ef-page>.cs-overview-label,
    .cs-ef-page>.cs-steps-component>.cs-overview-label {
        transform: none !important;
    }

    .cs-ef-page {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100%;
        gap: 24px;
        opacity: 0;
        transform: translateY(30px);
        display: flex !important;
        flex-direction: column;
        align-items: center;
        pointer-events: auto !important;
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    /* Animated in state - triggered by JS on scroll */
    .cs-ef-page.cs-ef-page--mobile-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Page 1 starts hidden like other pages - transitions when visible class added */
    .cs-ef-page[data-ef-page="1"] {
        opacity: 0;
        transform: translateY(30px);
    }

    /* When Page 1 becomes visible, show container immediately */
    .cs-ef-page[data-ef-page="1"].cs-ef-page--mobile-visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Page 1 children - start hidden */
    .cs-ef-page[data-ef-page="1"]>.cs-feature-header,
    .cs-ef-page[data-ef-page="1"]>.cs-intro-text {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    /* Page 1 children animate when page is visible - staggered */
    .cs-ef-page[data-ef-page="1"].cs-ef-page--mobile-visible>.cs-feature-header {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    .cs-ef-page[data-ef-page="1"].cs-ef-page--mobile-visible>.cs-intro-text {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.35s;
    }

    /* Reorder pages: 1, 2, 3, 4, 5, 6 */
    .cs-ef-page[data-ef-page="1"] {
        order: 1;
    }

    .cs-ef-page[data-ef-page="2"] {
        order: 2;
    }

    .cs-ef-page[data-ef-page="3"] {
        order: 3;
    }

    .cs-ef-page[data-ef-page="4"] {
        order: 4;
    }

    .cs-ef-page[data-ef-page="5"] {
        order: 5;
    }

    .cs-ef-page[data-ef-page="6"] {
        order: 6;
    }

    /* Tablet mockups - 400×600 ratio (2:3), constrained to match mobile sizing */
    .cs-ef-page .cs-mockup,
    .cs-ef-page .cs-mockup--full {
        width: 100%;
        max-width: 280px;
        /* Match mobile mockup size */
        height: auto;
        aspect-ratio: 400 / 600;
        /* Maintain 2:3 ratio */
        overflow: hidden;
        margin: 0 auto;
        /* Center horizontally */
    }

    /* Filled pills (Process, Enhancements, Pain Points) - hug content */
    .cs-ef-page .cs-steps-label--filled {
        width: fit-content;
        padding: 0 12px;
    }

    /* Remove extra margins - use page gap instead */
    .cs-ef-page .cs-steps-component .cs-steps-label {
        margin-bottom: 0;
    }

    .cs-ef-page .cs-steps-label+.cs-mockup {
        margin-top: 0;
    }

    /* Original Design & Enhanced Design labels - left aligned on tablet */
    .cs-ef-page[data-ef-page="3"] .cs-steps-label,
    .cs-ef-page[data-ef-page="5"] .cs-steps-label {
        width: fit-content;
        max-width: 320px;
    }

    /* Override desktop right-alignment for Page 3 and Page 6 - left-align on tablet */
    .cs-ef-page[data-ef-page="3"],
    .cs-ef-page[data-ef-page="6"] {
        align-items: flex-start !important;
    }

    .cs-ef-page .cs-steps-component {
        width: 100%;
        max-width: 100% !important;
        gap: 24px;
        /* Match page gap for consistent pill-to-content spacing */
    }

    .cs-ef-page .cs-feature-header {
        width: 100%;
        text-align: left;
    }

    /* Steps start hidden on tablet - reveal one by one on scroll */
    /* Use consistent 2px border to prevent text shifting */
    .cs-step.cs-ef-step {
        opacity: 0.3;
        transform: translateY(8px);
        border: 1px solid #808080 !important;
        background-color: transparent !important;
        transition: opacity 0.4s ease-out, transform 0.4s ease-out, background-color 0.4s ease-out, border-color 0.4s ease-out;
    }

    /* Active step - fully visible and highlighted */
    /* Matches selected pill styling - semi-transparent backgrounds */
    .cs-step.cs-ef-step.cs-ef-step--active {
        opacity: 1;
        transform: translateY(0);
        border: 1px solid #7ebb1c !important;
        background: rgba(126, 187, 28, 0.15) !important;
    }

    .cs-step.cs-ef-step.cs-ef-step--active.cs-step--red {
        border: 1px solid #e74c3c !important;
        background: rgba(231, 76, 60, 0.15) !important;
    }
}

@media (max-width: 768px) {
    :root {
        /* Hero positioning adjustments for small tablet - preserved */
        --cs-hero-top: 72px;
        /* Margins and gaps now handled by clamp() */
    }

    /* Hide custom scrollbar on mobile - not enough space */
    .cs-scroll-nav {
        display: none !important;
    }

    .cs-grid-architecture {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Title - 32px on mobile (4px larger than overview values) */
    .cs-title-main {
        font-size: 32px;
        line-height: 40px;
    }

    .cs-title-sub {
        font-size: 32px;
        line-height: 40px;
    }
}

/* Tablet title size - must come AFTER the 768px mobile rules to win cascade */
@media (min-width: 769px) and (max-width: 1024px) {

    .cs-title-main,
    .cs-title-sub {
        font-size: 40px;
        line-height: 44px;
    }
}

/* Mobile intro text - must come after tablet */
@media (max-width: 768px) {
    .cs-intro-text--growth {
        font-size: 28px;
        font-weight: 300;
        line-height: 36px;
        letter-spacing: -0.048px;
    }

    /* Remove forced line break on mobile for natural text flow */
    .cs-intro-text--growth br {
        display: none;
    }
}

/* Mobile styles continued - 768px */
@media (max-width: 768px) {
    .cs-intro-content {
        /* No gap - spacing controlled by section label margin-bottom (40px) */
        max-width: 100%;
    }

    /* Constrain pills container to viewport */
    .cs-overview-item--pills {
        width: 100%;
        max-width: 100%;
    }

    .cs-overview-item {
        flex-shrink: 1;
        max-width: 100%;
        width: 100%;
    }

    .cs-pills-container {
        width: 100%;
        max-width: calc(100vw - 48px);
        position: relative;
        overflow: hidden;
    }

    /* Ensure gradient fades are visible */
    .cs-pills-fade-left {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, var(--background) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    .cs-pills-fade-right {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to left, var(--background) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    /* All mockups - full width on small tablet */
    .cs-mockup,
    .cs-mockup--tablet,
    .cs-mockup--mobile {
        width: 100%;
        max-width: 100%;
        /* Full width - no restrictions */
        min-height: 240px;
    }

    /* Force feature mockups to be visible regardless of animation state */
    .cs-feature-mockup {
        width: 100%;
    }

    .cs-feature-mockup .cs-mockup {
        width: 100%;
        max-width: 100%;
        height: auto;
        /* Let video determine height */
        min-height: unset;
        aspect-ratio: unset;
        /* Remove fixed aspect ratio for video content */
        background-color: var(--card-bg);
        display: block;
    }

    /* Scope accordion - full width */
    .cs-scope-accordion {
        width: 100%;
        max-width: 100%;
    }

    /* Stats grid - stacked single column on mobile */
    .cs-grid-stats {
        grid-template-columns: 1fr;
        gap: 32px;
        width: 100%;
    }

    .cs-stat-card {
        width: 100%;
    }

    .cs-section--footer {
        /* No padding-bottom - nav buttons padding-top handles spacing now */
        padding-bottom: 0;
    }
}

@media (max-width: 480px) {
    :root {
        /* Hero positioning adjustments for mobile - preserved */
        --cs-hero-top: 80px;
        /* Hero height uses clamp() for fluid sizing */
        /* Margins and gaps now handled by clamp() */
    }

    /* ==================== MOBILE-OPTIMIZED ANIMATIONS ==================== */
    /* Fast, snappy animations for small screens - immediate feedback */

    /* Initial page load - fast sequential reveal */
    /* .cs-hero animation removed - using reveal animation instead */

    .cs-title-group {
        animation: csFadeIn 0.3s ease-out forwards;
        animation-delay: 0.15s;
    }

    .cs-overview {
        animation: csFadeIn 0.3s ease-out forwards;
        animation-delay: 0.25s;
    }

    /* Each overview row reveals in sequence */
    .cs-overview-row {
        opacity: 0;
        animation: csFadeIn 0.25s ease-out forwards;
    }

    .cs-overview-row:nth-child(1) {
        animation-delay: 0.3s;
    }

    .cs-overview-row:nth-child(2) {
        animation-delay: 0.35s;
    }

    /* ==================== SCROLL-TRIGGERED ANIMATIONS ==================== */
    /* Very fast, immediate reveals on mobile scroll */

    /* Base sequence item - instant feel */
    .cs-sequence-item {
        opacity: 0;
        transform: translateY(12px);
        /* Smaller movement on mobile */
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    }

    .cs-sequence-item.cs-sequence-item--visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Table pills - rapid stagger */
    .cs-table-pill {
        transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    }

    /* Growth quote words - fast reveal */
    .cs-growth-word {
        transition: opacity 0.12s ease-out;
    }

    /* Section headers - quick fade */
    .cs-section-header.cs-sequence-item {
        transform: translateY(8px);
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    }

    /* Stat cards - use new animated divider pattern (no override needed) */

    /* Feature sections - quick reveal */
    .cs-intro-text.cs-sequence-item {
        transform: translateY(8px);
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    }

    /* Mockups - immediate display */
    .cs-mockup.cs-sequence-item {
        transform: translateY(10px);
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    }

    /* Accordion/scope pills - snappy */
    .cs-scope-pill,
    .cs-accordion-item {
        transition: all 0.15s ease-out;
    }

    /* More padding for pills on mobile */
    .cs-scope-pill {
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .cs-accordion-pills {
        gap: 12px !important;
    }

    /* More padding when accordion is expanded on mobile */
    .cs-accordion-item--expanded .cs-accordion-content {
        padding: 0px 16px 16px 16px !important;
        /* Equal padding all around */
    }

    /* Ensure first pill has clearance from accordion header */
    .cs-accordion-pills .cs-scope-pill:first-child {
        margin-top: 4px;
    }

    .cs-accordion-content {
        transition: max-height 0.15s ease-out, opacity 0.15s ease-out, padding 0.15s ease-out;
    }

    .cs-accordion-chevron {
        transition: transform 0.15s ease-out;
    }

    .cs-grid-architecture,
    .cs-grid-stats {
        grid-template-columns: 1fr;
    }

    /* Mobile stats grid - 22px gap per Figma */
    .cs-grid-stats {
        gap: 22px;
    }

    /* Mobile overview - vertical layout per Figma */
    /* Container: flex-col, gap 30px, width 280px, left 20px */
    .cs-overview-row {
        flex-direction: column;
        gap: 40px;
        width: 280px;
        max-width: calc(100vw - 40px);
    }

    /* Overview items - gap 4px between label and value per Figma */
    .cs-overview-item {
        flex-shrink: 1;
        max-width: 100%;
        gap: 4px;
        width: auto !important;
        /* Override desktop fixed widths */
    }

    /* Areas of impact has 6px gap per Figma */
    .cs-overview-item--pills {
        width: 100%;
        max-width: 100%;
        gap: 6px;
    }

    /* Overview labels - 14px thin, line-height 22px, tracking -0.364px per Figma */
    .cs-overview-label {
        font-family: 'Input', 'Neue Haas Unica W1G', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: -0.364px;
    }

    /* Section labels - consistent 30px spacing to content */
    .cs-section>.cs-overview-label {
        display: block;
        margin-bottom: 40px;
    }

    /* Overview values - match intro text size for visual prominence */
    .cs-overview-value {
        font-family: 'Neue Haas Unica', sans-serif;
        font-size: 24px;
        font-weight: 300;
        line-height: 32px;
        letter-spacing: -0.624px;
    }

    /* Pills container - width 280px, py-8px, overflow clip per Figma */
    .cs-pills-container {
        width: 280px;
        max-width: calc(100vw - 40px);
        overflow: hidden;
        position: relative;
        padding: 8px 0;
    }

    /* Pills track - gap 8px between pills per Figma */
    .cs-pills-track {
        gap: 8px;
    }

    /* Pills - match desktop styling */
    .cs-pill {
        height: auto;
        padding: 6px 12px;
        border-radius: 8px;
        border: 0.5px solid #313131;
        background-color: rgba(255, 255, 255, 0.03);
    }

    .cs-pill-text {
        font-family: 'Input', 'Neue Haas Unica', sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: -0.312px;
        color: rgba(255, 255, 255, 0.92);
        text-transform: uppercase;
    }

    /* Ensure gradient fades are visible on mobile */
    .cs-pills-fade-left {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        /* Slightly smaller on mobile */
        height: 100%;
        background: linear-gradient(to right, var(--background) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    .cs-pills-fade-right {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        /* Slightly smaller on mobile */
        height: 100%;
        background: linear-gradient(to left, var(--background) 0%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    /* Title - match overview value typography (24px Neue Haas Unica) */
    .cs-title-main {
        font-family: 'Neue Haas Unica', sans-serif;
        font-size: 28px;
        font-weight: 300;
        line-height: 32px;
        letter-spacing: -0.624px;
        width: 280px;
    }

    /* Subtitle - match overview value typography */
    .cs-title-sub {
        font-family: 'Neue Haas Unica', sans-serif;
        font-size: 24px;
        font-weight: 300;
        line-height: 32px;
        letter-spacing: -0.624px;
        width: 280px;
    }

    /* Title group - 40px spacing below, no large gap above overview */
    .cs-title-group {
        width: 280px;
        max-width: calc(100vw - 40px);
        margin-bottom: 40px;
        display: block;
    }

    /* Section headers - 24px light, leading 24px, tracking -0.624px per Figma */
    .cs-section-header,
    .cs-intro-text.cs-section-header {
        font-size: 24px;
        font-weight: 300;
        line-height: 24px;
        letter-spacing: -0.624px;
    }

    /* Mobile subhead styling - 16px thin, tracking -0.416px per Figma */
    .cs-header-subhead {
        font-size: 16px;
        font-weight: 100;
        line-height: 20px;
        letter-spacing: -0.416px;
    }

    /* Mobile header container - 8px gap per Figma */
    .cs-header {
        gap: 8px;
    }

    .cs-intro-text--growth {
        font-size: 28px;
        font-weight: 300;
        line-height: 36px;
        letter-spacing: -0.048px;
        width: 100%;
        max-width: calc(100vw - 40px);
    }

    .cs-intro-content {
        gap: 0;
        width: 100%;
        max-width: calc(100vw - 20px - 8px);
        /* 20px left margin, 8px minimal right padding */
        padding-right: 0;
    }

    /* Section label gets 40px spacing - consistent with all sections */
    .cs-intro-content>.cs-overview-label {
        margin-bottom: 40px;
    }

    /* Paragraphs get 48px spacing between them */
    .cs-intro-content>.cs-intro-paragraph+.cs-intro-paragraph {
        margin-top: 48px;
    }

    /* Hero - full width responsive, consistent with video players/mockups */
    .cs-hero {
        width: 100%;
        max-width: calc(100vw - 40px);
        height: auto;
        min-height: 180px;
        aspect-ratio: 16 / 9;
        /* Maintain aspect ratio like other assets */
        border-radius: 12px;
    }

    /* TD Mobile Mockup - left-aligned with page margin */
    .td-mobile-mockup {
        margin-left: 0;
        margin-right: auto;
    }

    /* Stats cards - mobile layout with animated dividers */
    .cs-stat-card {
        width: 100%;
        padding-left: 17px;
        /* Space for divider */
    }

    .cs-stat-value {
        font-size: 36px;
        line-height: 44px;
    }

    .cs-stat-label {
        font-size: 16px;
        line-height: 22px;
        margin-top: 4px;
    }

    /* Architecture accordion - FULL WIDTH on mobile */
    .cs-scope-accordion {
        width: 100%;
        max-width: 100%;
    }

    .cs-accordion-item {
        width: 100%;
    }

    /* Feature sections - mobile layout per Figma */
    .cs-grid-feature {
        display: flex;
        flex-direction: column;
        /* No gap - spacing controlled by section label margin-bottom (40px) */
        width: 100%;
    }

    /* Mobile: Image/mockup appears ABOVE text */
    .cs-feature-mockup {
        order: -1;
        width: 100%;
    }

    .cs-feature-text {
        order: 1;
        width: 100%;
    }

    /* Feature text - 14px light, leading 20px, tracking -0.364px per Figma */
    .cs-feature-text .cs-intro-text {
        font-size: 15px;
        font-weight: 300;
        line-height: 20px;
        letter-spacing: 0;
    }

    /* Feature mockup - FULL WIDTH on mobile */
    /* Force visibility regardless of animation state */
    .cs-mockup,
    .cs-mockup--tablet,
    .cs-mockup--mobile,
    .cs-feature-mockup .cs-mockup {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        /* Let video determine height */
        min-height: unset;
        aspect-ratio: unset;
        /* Remove fixed aspect ratio for video content */
        background-color: var(--card-bg);
        display: block;
    }

    /* Stats grid - full width */
    .cs-grid-stats {
        width: 100%;
    }

    /* Two-column dynamic sections - stack vertically */
    .cs-grid-two-col-dynamic,
    .cs-grid-two-col-dynamic--video-left,
    .cs-grid-two-col-dynamic--video-right {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* Feature header - 8px gap per Figma */
    .cs-feature-header {
        gap: 8px;
    }

    /* Feature section sequence items - use transitions triggered by JS class */
    .cs-feature-header.cs-sequence-item,
    .cs-feature-text .cs-sequence-item,
    .cs-feature-mockup .cs-sequence-item {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .cs-feature-header.cs-sequence-item--visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.1s;
    }

    .cs-feature-text .cs-sequence-item--visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.25s;
    }

    .cs-feature-mockup .cs-sequence-item--visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.4s;
    }

    /* Feature header title - 24px per Figma */
    .cs-feature-header .cs-header-title {
        font-size: 24px;
        line-height: 24px;
        letter-spacing: -0.624px;
    }

    .cs-section--footer {
        /* No padding-bottom - nav buttons padding-top handles spacing now */
        padding-bottom: 0;
    }

    /* ==================== ENHANCEMENT FRAMEWORK - MOBILE ==================== */
    .cs-ef-scroll-container {
        /* Extra tall for slower transitions on mobile */
        height: 5500px;
        width: 100%;
    }

    .cs-ef-sticky-viewport {
        left: 0;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        height: auto;
        overflow: visible;
        padding-top: 16px;
    }

    .cs-ef-sticky-viewport--fixed {
        top: 50px;
        /* left and width are set via JS inline styles */
    }

    .cs-ef-sticky-viewport--bottom {
        left: 0;
    }

    /* Mobile: Single column layout with pages in sequence order */
    .cs-ef-scroll-container {
        height: auto !important;
        /* Disable fixed scroll height on mobile */
    }

    .cs-ef-sticky-viewport {
        position: relative !important;
        /* Disable fixed positioning on mobile */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
    }

    .cs-ef-sticky-viewport--fixed,
    .cs-ef-sticky-viewport--bottom {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    .cs-ef-grid {
        display: flex;
        flex-direction: column;
        gap: 160px;
        /* More spacing between pages */
        width: 100%;
    }

    .cs-ef-left,
    .cs-ef-right {
        display: contents;
        /* Remove column wrappers, let pages flow directly */
    }

    .cs-ef-page {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100%;
        gap: 24px;
        opacity: 0;
        transform: translateY(30px);
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        pointer-events: auto !important;
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    /* Animated in state - triggered by JS on scroll */
    .cs-ef-page.cs-ef-page--mobile-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Page 1 starts hidden like other pages - transitions when visible class added */
    .cs-ef-page[data-ef-page="1"] {
        opacity: 0;
        transform: translateY(30px);
    }

    /* When Page 1 becomes visible, show container immediately */
    .cs-ef-page[data-ef-page="1"].cs-ef-page--mobile-visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Page 1 children - start hidden */
    .cs-ef-page[data-ef-page="1"]>.cs-feature-header,
    .cs-ef-page[data-ef-page="1"]>.cs-intro-text {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    /* Page 1 children animate when page is visible - staggered */
    .cs-ef-page[data-ef-page="1"].cs-ef-page--mobile-visible>.cs-feature-header {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    .cs-ef-page[data-ef-page="1"].cs-ef-page--mobile-visible>.cs-intro-text {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.35s;
    }

    /* Reorder pages: 1, 2, 3, 4, 5, 6 */
    .cs-ef-page[data-ef-page="1"] {
        order: 1;
    }

    .cs-ef-page[data-ef-page="2"] {
        order: 2;
    }

    .cs-ef-page[data-ef-page="3"] {
        order: 3;
    }

    .cs-ef-page[data-ef-page="4"] {
        order: 4;
    }

    .cs-ef-page[data-ef-page="5"] {
        order: 5;
    }

    .cs-ef-page[data-ef-page="6"] {
        order: 6;
    }

    /* Mobile mockups - 400×600 ratio (2:3), scaled to fill width */
    .cs-ef-page .cs-mockup,
    .cs-ef-page .cs-mockup--full {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 400 / 600;
        /* Maintain 2:3 ratio */
        overflow: hidden !important;
    }

    /* Filled pills (Process, Enhancements, Pain Points) - hug content */
    .cs-ef-page .cs-steps-label--filled {
        width: fit-content;
        padding: 0 12px;
    }

    /* Remove extra margins - use page gap instead */
    .cs-ef-page .cs-steps-component .cs-steps-label {
        margin-bottom: 0;
    }

    .cs-ef-page .cs-steps-label+.cs-mockup {
        margin-top: 0;
    }

    /* Original Design & Enhanced Design labels - left aligned on mobile */
    .cs-ef-page[data-ef-page="3"] .cs-steps-label,
    .cs-ef-page[data-ef-page="5"] .cs-steps-label {
        width: fit-content;
        max-width: 200px;
    }

    /* Override desktop right-alignment for Page 3 and Page 6 - left-align on mobile */
    .cs-ef-page[data-ef-page="3"],
    .cs-ef-page[data-ef-page="6"] {
        align-items: flex-start !important;
    }

    .cs-ef-page .cs-steps-component {
        width: 100%;
        max-width: 100% !important;
        gap: 24px;
        /* Match page gap for consistent pill-to-content spacing */
    }

    .cs-ef-page .cs-feature-header {
        width: 100%;
        text-align: left;
    }

    .cs-ef-page .cs-intro-text {
        width: 100%;
    }

    /* Steps styling for mobile */
    .cs-ef-steps {
        gap: 12px;
        width: 100%;
    }

    .cs-ef-step {
        padding: 6px 12px 6px 6px;
    }

    /* Steps start hidden on mobile - reveal one by one on scroll */
    .cs-step.cs-ef-step {
        opacity: 0.3;
        transform: translateY(8px);
        border: 2px solid #808080 !important;
        background-color: transparent !important;
        transition: opacity 0.4s ease-out, transform 0.4s ease-out, background-color 0.4s ease-out, border-color 0.4s ease-out;
    }

    /* Active step - fully visible and highlighted */
    /* Matches selected pill styling - semi-transparent backgrounds */
    .cs-step.cs-ef-step.cs-ef-step--active {
        opacity: 1;
        transform: translateY(0);
        border: 2px solid #7ebb1c !important;
        background: rgba(126, 187, 28, 0.15) !important;
    }

    .cs-step.cs-ef-step.cs-ef-step--active.cs-step--red {
        border: 2px solid #e74c3c !important;
        background: rgba(231, 76, 60, 0.15) !important;
    }
}

/* ==================== FIGMA PROJECT SCOPE COMPONENT (Node 853:2524) ==================== */
/* New accordion-style component matching exact Figma specs */

.cs-figma-scope {
    width: 100%;
    max-width: 696px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: visible;
    /* Allow content to expand properly */
}

/* Section container - each accordion item */
.cs-figma-section {
    border-bottom: 1px solid rgba(169, 169, 169, 0.2);
}

.cs-figma-section:last-child {
    border-bottom: none;
}

/* Section header - clickable row with title and chevron */
.cs-figma-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cs-figma-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* First section header needs rounded top corners to match parent */
.cs-figma-section:first-child .cs-figma-header {
    border-radius: 8px 8px 0 0;
}

/* Last section header needs rounded bottom corners when not expanded */
.cs-figma-section:last-child:not(.cs-figma-section--expanded) .cs-figma-header {
    border-radius: 0 0 8px 8px;
}

/* Section title - Input font 32px per Figma */
.cs-figma-title {
    font-family: 'Input', 'Neue Haas Unica W1G', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #ffffff;
    letter-spacing: -0.5px;
}

/* Chevron icon container */
/* +/- Toggle Button per Figma node 853:3452 */
.cs-figma-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.cs-figma-toggle:hover {
    opacity: 0.8;
}

.cs-figma-toggle-icon {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Match section label color for toggle icon */
.cs-figma-toggle-icon circle,
.cs-figma-toggle-icon path {
    stroke: #7b7b7b;
}

/* Rotate icon 180 degrees when expanded */
.cs-figma-section--expanded .cs-figma-toggle-icon {
    transform: rotate(180deg);
}

/* Plus line - hidden when expanded (showing minus only) */
.cs-figma-toggle-plus {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.cs-figma-section--expanded .cs-figma-toggle-plus {
    opacity: 0;
}

/* Section content - expandable area per Figma node 865:1208 */
.cs-figma-content {
    padding: 24px 60px 24px 24px;
    /* 60px right margin per user request, 24px left/bottom */
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 40px per Figma MCP data */
    overflow: hidden;
    /* GSAP controls animation - no CSS transitions */
    background: rgba(0, 0, 0, 0.3);
    /* Darker background for content area */
}

/* Collapsed state - hide content (initial state, GSAP overrides) */
.cs-figma-section:not(.cs-figma-section--expanded) .cs-figma-content {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Description text - Neue Haas Unica Light 17px */
.cs-figma-description {
    font-family: 'Neue Haas Unica W1G', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 24px;
    color: #ffffff;
    margin: 0;
}

/* Cards for Self-Serve/In-Store with nested content */
.cs-figma-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(169, 169, 169, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-figma-card-title {
    font-family: 'Input', 'Neue Haas Unica W1G', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
}

.cs-figma-card-desc {
    font-family: 'Neue Haas Unica W1G', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Pills container - 2 columns for desktop per Figma node 865:1219 */
.cs-figma-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /* 20px per Figma MCP data (pill at x=319, width=299, gap=319-299=20) */
}

/* Features inside columns - 1 column layout */
.cs-figma-pills--wrap {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Features grid - responsive 3-col layout */
.cs-figma-pills--features {
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns on desktop */
    gap: 20px;
}

/* Tablet - 2 columns with pills grouped by category */
@media (max-width: 1024px) {
    .cs-figma-pills--features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }

    /* Headers - Row 1 */
    .cs-figma-pills--features .cs-figma-col-header:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .cs-figma-pills--features .cs-figma-col-header:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    /* Hide empty column header */
    .cs-figma-pills--features .cs-figma-col-header:nth-child(3) {
        display: none;
    }

    /* Hide spacers */
    .cs-figma-pills--features .cs-figma-pill-spacer {
        display: none;
    }

    /* Product & Experience pills - Column 1, stacked rows 2-5 */
    /* Div indices: 1=Multi-Party, 4=Multi-Product, 7=Shopping, 10=Product Add-Ons */
    .cs-figma-pills--features .cs-figma-pill:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(4) {
        grid-column: 1;
        grid-row: 3;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(7) {
        grid-column: 1;
        grid-row: 4;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(10) {
        grid-column: 1;
        grid-row: 5;
    }

    /* Risk, Identity & Compliance pills - Column 2, stacked rows 2-6 */
    /* Div indices: 2=High Risk, 3=Apple Wallet, 5=Customer Data, 8=IVS, 11=DVS */
    .cs-figma-pills--features .cs-figma-pill:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(3) {
        grid-column: 2;
        grid-row: 6;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(5) {
        grid-column: 2;
        grid-row: 3;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(8) {
        grid-column: 2;
        grid-row: 4;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(11) {
        grid-column: 2;
        grid-row: 5;
    }

    /* Full-width pills */
    .cs-figma-pills--features .cs-figma-pill {
        width: 100%;
    }
}

/* Mobile - single column layout (stack Risk, Identity & Compliance below Product & Experience) */
@media (max-width: 768px) {
    .cs-figma-pills--features {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Reset all grid positioning for mobile */
    .cs-figma-pills--features .cs-figma-col-header,
    .cs-figma-pills--features .cs-figma-pill {
        grid-column: unset;
        grid-row: unset;
    }

    /* Hide empty third header */
    .cs-figma-pills--features .cs-figma-col-header:nth-child(3) {
        display: none;
    }

    /* Use CSS order to group pills by category */
    /* Product & Experience: Header 1 (order 1), pills at indices 1,4,7,10 (orders 2-5) */
    .cs-figma-pills--features .cs-figma-col-header:first-child {
        order: 1;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(1) {
        order: 2;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(4) {
        order: 3;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(7) {
        order: 4;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(10) {
        order: 5;
    }

    /* Risk, Identity & Compliance: Header 2 (order 10), pills at indices 2,3,5,8,11 (orders 11-15) */
    .cs-figma-pills--features .cs-figma-col-header:nth-child(2) {
        order: 10;
        margin-top: 12px;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(2) {
        order: 11;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(3) {
        order: 15;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(5) {
        order: 12;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(8) {
        order: 13;
    }

    .cs-figma-pills--features .cs-figma-pill:nth-of-type(11) {
        order: 14;
    }

    /* Hide spacers */
    .cs-figma-pills--features .cs-figma-pill-spacer {
        display: none;
    }

    /* Full-width pills */
    .cs-figma-pills--features .cs-figma-pill {
        width: 100%;
    }
}

/* Channel toggle items (Self-Serve/Assisted) per Figma node 865:1175, 865:1180 */
.cs-figma-channel-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 20px per Figma MCP data (description y=60, pill height=40, gap=60-40=20) */
}

.cs-figma-toggle-label {
    font-family: 'Input', 'Neue Haas Unica', monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    padding: 8px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(169, 169, 169, 0.3);
    border-radius: 8px;
    display: inline-block;
    width: 145px;
    /* Fixed 145px width per user request */
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Selectable toggle labels */
.cs-figma-toggle-label.cs-figma-pill--selectable {
    cursor: pointer;
}

.cs-figma-toggle-label.cs-figma-pill--selectable:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(169, 169, 169, 0.5);
}

/* Selected state for toggle labels - green theme */
.cs-figma-toggle-label.cs-pill-selected {
    background-color: rgba(126, 187, 28, 0.15);
    border: 1px solid #7ebb1c;
}

/* 3-Column Feature Layout per Figma node 870:3255, 870:3276 */
.cs-figma-feature-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cs-figma-feature-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Feature Layout Container */
.cs-figma-feature-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Feature Headers Row - 3 columns to match pills grid */
.cs-figma-feature-headers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Same 3-column layout as pills grid */
    gap: 20px;
}

/* Column Headers per Figma 859:2933, 859:3182 */
.cs-figma-col-header {
    font-family: 'Input', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* First header in column 1 */
.cs-figma-col-header:first-child {
    grid-column: 1;
}

/* Second header starts at column 2 */
.cs-figma-col-header:nth-child(2) {
    grid-column: 2;
}

/* Pill spacer for grid alignment */
.cs-figma-pill-spacer {
    display: block;
}

/* No-header column offset */
.cs-figma-feature-col--no-header {
    padding-top: 44px;
}

/* Individual pill with icon - EXACT FIGMA SPECS per node 870:3259 */
.cs-figma-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Figma: gap-[10px] */
    padding: 8px;
    /* Figma: p-[8px] */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(169, 169, 169, 0.3);
    border-radius: 8px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cs-figma-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(169, 169, 169, 0.5);
}

/* Interactive/selectable figma pills */
.cs-figma-pill--selectable {
    cursor: pointer;
}

/* Selected state for figma pills - green theme matching scope pills */
.cs-figma-pill.cs-pill-selected {
    background-color: rgba(126, 187, 28, 0.15);
    border: 1px solid #7ebb1c;
    box-shadow: none;
}

.cs-figma-pill.cs-pill-selected:hover {
    background-color: rgba(126, 187, 28, 0.25);
}

/* Selected figma pill text stays white */
.cs-figma-pill.cs-pill-selected .cs-figma-pill-text {
    color: #ffffff;
}

/* Pill icon - 32x32 per Figma desktop */
.cs-figma-pill-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Flag icons - preserve aspect ratio */
.cs-figma-pill--flag .cs-figma-pill-icon {
    width: 24px;
    height: 16px;
    object-fit: contain;
}

/* Pill text - Input font 14px (matches toggle labels) */
.cs-figma-pill-text {
    font-family: 'Input', 'Neue Haas Unica', monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: #ffffff;
}

/* FEATURES PILLS - Smaller per Figma node 853:3449 */
/* Features use compact pills: 8px padding, 15px/20px text, text wraps */
.cs-figma-pills--wrap .cs-figma-pill {
    padding: 8px;
    gap: 8px;
    align-items: center;
}

.cs-figma-pills--wrap .cs-figma-pill-text {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    white-space: normal;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .cs-figma-scope {
        max-width: 100%;
    }

    .cs-figma-title {
        font-size: 24px;
        line-height: 32px;
    }

    .cs-figma-header {
        padding: 20px 16px;
    }

    .cs-figma-content {
        padding: 0 16px 20px;
    }

    /* Single column on mobile */
    .cs-figma-pills,
    .cs-figma-pills--wrap {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cs-figma-pill {
        padding: 12px 16px;
    }

    .cs-figma-pill-icon {
        width: 24px;
        height: 24px;
    }

    .cs-figma-pill-text {
        font-size: 13px;
        line-height: 15px;
    }

    /* Feature columns stack on mobile */
    .cs-figma-feature-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cs-figma-col-header {
        font-size: 11px;
    }

    /* Toggle labels smaller on mobile */
    .cs-figma-toggle-label {
        font-size: 13px;
        padding: 6px 12px;
    }
}

/* Tablet - keep 2-column feature layout */
@media (min-width: 769px) and (max-width: 1024px) {
    .cs-figma-feature-cols {
        gap: 16px;
    }
}


/* ==================== TD MOBILE MOCKUP STYLES ==================== */
/* Scoped styles for embedded TD Digital Login prototype */

.td-mobile-mockup {
    --emerald: #008a00;
    --obsidian: #1c1c1c;
    --snow: #ffffff;
    --stone: #cccccc;
    --ios-stroke: rgba(0, 0, 0, 0.4);
    --app-primary: #f3f3f3;
}

.td-mobile-mockup .device-frame {
    width: 280px;
    height: 606px;
    background-color: var(--snow);
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3), 0 0 0 8px #222;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: "TD Graphik", -apple-system, BlinkMacSystemFont, sans-serif;
    flex-shrink: 0;
}

.td-mobile-mockup .top-nav {
    background-color: var(--snow);
    width: 100%;
    flex-shrink: 0;
    z-index: 10;
}

.td-mobile-mockup .green-bar {
    height: 6px;
    background-color: var(--emerald);
    width: 100%;
}

.td-mobile-mockup .nav-content {
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--snow);
}

.td-mobile-mockup .nav-logo {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.td-mobile-mockup .nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.td-mobile-mockup .nav-divider {
    height: 1px;
    background-color: #E0E0E0;
    width: 100%;
}

.td-mobile-mockup .scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--snow);
    position: relative;
}

.td-mobile-mockup .scroll-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.td-mobile-mockup .animated-area {
    height: auto;
    min-height: 90px;
    background-color: var(--snow);
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.td-mobile-mockup .animated-area svg {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    overflow: visible;
}

.td-mobile-mockup .animated-area svg * {
    transform-box: fill-box;
    transform-origin: center;
}

.td-mobile-mockup .login-section {
    display: flex;
    width: calc(100% - 24px);
    padding: 20px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background-color: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #CCCCCC;
    box-shadow: 0 4px 10px 0 rgba(28, 28, 28, 0.12);
    margin: 0 auto 40px auto;
    box-sizing: border-box;
}

.td-mobile-mockup .login-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.td-mobile-mockup .btn-primary-filled {
    width: 100%;
    height: 32px;
    background-color: #008A00;
    border: 1px solid #008A00;
    border-radius: 0;
    color: #FFFFFF;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.td-mobile-mockup .btn-secondary-outline {
    width: 100%;
    height: 32px;
    background-color: #FFFFFF;
    border: 2px solid #008A00;
    border-radius: 0;
    color: #038203;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.td-mobile-mockup .btn-primary-filled:hover {
    background-color: #006B00;
    border-color: #006B00;
}

.td-mobile-mockup .btn-secondary-outline:hover {
    background-color: #E8F5E9;
    border-color: #006B00;
}

.td-mobile-mockup .login-helper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.td-mobile-mockup .helper-text {
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 18px;
    color: #1C1C1C;
    text-align: center;
    margin: 0;
}

.td-mobile-mockup .link-primary {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 18px;
    color: #038203;
    text-decoration: none;
}

.td-mobile-mockup .app-footer {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0;
    background-color: var(--snow);
}

.td-mobile-mockup .footer-green-border {
    width: 100%;
    height: 3px;
    background-color: #008A00;
}

.td-mobile-mockup .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
}

.td-mobile-mockup .footer-link {
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 18px;
    color: #616161;
    text-decoration: none;
}

.td-mobile-mockup .footer-divider {
    width: calc(100% - 24px);
    height: 1px;
    background-color: #CCCCCC;
}

.td-mobile-mockup .footer-fdic {
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 18px;
    color: #008A00;
    text-align: center;
    margin: 0;
}

.td-mobile-mockup .footer-copyright {
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 9px;
    line-height: 14px;
    color: #1C1C1C;
    text-align: center;
    margin: 0;
    padding: 0 12px 16px;
}

/* Mockup section - centered layout (independent of cs-grid-title-overview) */
.cs-mockup-centered {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Mockup with text layout - mockup centered, description positioned to the right */
.cs-mockup-with-text {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.cs-mockup-description {
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 24px;
    color: #7b7b7b;
    margin: 0;
    padding-top: 8px;
    width: 400px;
    /* Position absolutely so it doesn't affect mockup centering */
    position: absolute;
    left: 100%;
    margin-left: var(--cs-gutter);
}

/* Below 1440px but above 1200px - allow description to fill 2 columns */
@media (min-width: 1200px) and (max-width: 1439px) {
    .cs-mockup-description {
        max-width: 400px;
        padding-right: 0;
    }
}

/* Between 1025px and 1199px - stack layout to prevent squishing */
@media (min-width: 1025px) and (max-width: 1199px) {
    .cs-mockup-with-text {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .cs-mockup-description {
        max-width: none;
        padding-top: 0;
        padding-bottom: 16px;
        padding-right: 100px;
        /* Shorten first line */
    }
}

/* Tablet - stack layout with description above mockup */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Mockup section - centered layout for tablet */
    .cs-mockup-section .cs-mockup-with-text {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .cs-mockup-description {
        position: static;
        width: auto;
        max-width: 280px;
        padding-top: 0;
        padding-bottom: 16px;
        text-align: left;
    }
}

/* Mobile - stack mockup and text, text on top */
@media (max-width: 768px) {
    .cs-mockup-with-text {
        flex-direction: column-reverse;
        gap: 24px;
        align-items: center;
    }

    .cs-mockup-description {
        position: static;
        width: auto;
        max-width: 240px;
        padding-top: 0;
        padding-bottom: 16px;
        text-align: left;
        margin-left: 0;
    }

    .td-mobile-mockup .device-frame {
        width: 240px;
        height: 520px;
        border-radius: 28px;
    }
}

/* TD Mockup Animation Keyframes */
@keyframes td-slideUpHands {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes td-slideUpTouch {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes td-burstCenter {
    0% {
        opacity: 0;
        transform: translate(0, 25px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(0, 2px) scale(1);
    }
}

@keyframes td-floatSmall {

    0%,
    100% {
        transform: translateY(2px) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(2deg);
    }
}

@keyframes td-floatMedium {

    0%,
    100% {
        transform: translateY(2px) rotate(0deg);
    }

    50% {
        transform: translateY(-4px) rotate(-3deg);
    }
}

/* Additional float variations with different rotations */
@keyframes td-floatSmallAlt {

    0%,
    100% {
        transform: translateY(2px) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(-1deg);
    }
}

@keyframes td-floatMediumAlt {

    0%,
    100% {
        transform: translateY(2px) rotate(0deg);
    }

    50% {
        transform: translateY(-4px) rotate(3deg);
    }
}

/* TD Mockup Animation Initial States */
#td-left-hand-mobile {
    opacity: 0;
    transform: translateY(40px);
}

#td-right-hand {
    opacity: 0;
    transform: translateY(40px);
}

#td-icons-stars,
#td-icons-stars-2,
#td-icons-inner,
#td-icons-outer {
    opacity: 0;
    transform: scale(0.8);
}

/* TD Mockup Animation Active States */
#td-left-hand-mobile.animate-in {
    animation: td-slideUpHands 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
}

#td-right-hand.animate-in {
    animation: td-slideUpTouch 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

#td-icons-stars.animate-in {
    animation: td-burstCenter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards;
}

#td-icons-stars-2.animate-in {
    animation: td-burstCenter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.65s forwards;
}

#td-icons-inner.animate-in {
    animation: td-burstCenter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.75s forwards;
}

#td-icons-outer.animate-in {
    animation: td-burstCenter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.9s forwards;
}

/* TD Mockup Floating States */
#td-icons-stars.floating {
    opacity: 1;
    transform: scale(1) translate(0, 2px);
    animation: td-floatSmall 3.5s ease-in-out infinite;
}

#td-icons-stars-2.floating {
    opacity: 1;
    transform: scale(1) translate(0, 2px);
    animation: td-floatMediumAlt 4.2s ease-in-out infinite;
}

#td-icons-inner.floating {
    opacity: 1;
    transform: scale(1) translate(0, 2px);
    animation: td-floatSmallAlt 4s ease-in-out infinite;
}

#td-icons-outer.floating {
    opacity: 1;
    transform: scale(1) translate(0, 2px);
    animation: td-floatMedium 3.2s ease-in-out infinite;
}

/* ==================== TD CONFIRMATION MOCKUP SECTION ==================== */

/* Device Frame Container - matches mockup 1 styling */
.td-confirm-device-frame {
    width: 280px;
    height: 606px;
    background-color: #ffffff;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3), 0 0 0 8px #222;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'TD Graphik', -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Top Navigation */
.td-confirm-top-nav {
    background-color: #ffffff;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    z-index: 10;
}

.td-confirm-green-bar {
    height: 8px;
    background-color: #008a00;
    width: 100%;
}

.td-confirm-nav-content {
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    background-color: #ffffff;
    position: relative;
}

.td-confirm-nav-logo {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.td-confirm-nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.td-confirm-nav-divider {
    height: 1px;
    background-color: #E0E0E0;
    width: 100%;
}

/* Scroll Container - no scrolling allowed, only chevron interaction */
.td-confirm-scroll-container {
    flex-grow: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #ffffff;
    position: relative;
    padding-bottom: 140px;
}

.td-confirm-scroll-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Animated Header Area */
.td-confirm-animated-area {
    height: auto;
    min-height: 116px;
    background-color: #ffffff;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 8px 0 8px;
}

.td-confirm-animated-area svg {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    overflow: visible;
}

.td-confirm-animated-area svg * {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
}

/* Confetti Initial Hidden State */
.td-confirm-animated-area #Confirm_Small_Stars,
.td-confirm-animated-area #Confirm_Squares,
.td-confirm-animated-area #Confirm_Circles,
.td-confirm-animated-area #Confirm_Lines,
.td-confirm-animated-area #confirm-big-star-1,
.td-confirm-animated-area #confirm-big-star-2,
.td-confirm-animated-area #confirm-big-star-3,
.td-confirm-animated-area #confirm-big-star-4,
.td-confirm-animated-area #confirm-big-star-5,
.td-confirm-animated-area #confirm-big-star-6,
.td-confirm-animated-area #confirm-big-star-7 {
    opacity: 0;
    transform: translateY(25px) scale(0.85);
    transform-origin: center bottom;
}

/* Meter Hand Rotation */
.td-confirm-animated-area #confirm-meter-hand {
    transform-box: view-box;
    transform-origin: 186.76px 91.52px;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.td-confirm-animated-area #confirm-meter-circle {
    transition: opacity 0.3s ease-out;
}

.td-confirm-animated-area #confirm-meter-range-0,
.td-confirm-animated-area #confirm-meter-range-25,
.td-confirm-animated-area #confirm-meter-range-50,
.td-confirm-animated-area #confirm-meter-range-100 {
    transition: fill 0.4s ease-out, fill-opacity 0.4s ease-out;
}

/* Meter State Classes */
.confirm-meter-state-0 #confirm-meter-hand {
    transform: rotate(0deg);
}

.confirm-meter-state-0 #confirm-meter-range-0 {
    fill: #00B624;
    fill-opacity: 0.4;
}

.confirm-meter-state-0 #confirm-meter-range-25,
.confirm-meter-state-0 #confirm-meter-range-50,
.confirm-meter-state-0 #confirm-meter-range-100 {
    fill: #fff;
}

.confirm-meter-state-25 #confirm-meter-hand {
    transform: rotate(45deg);
}

.confirm-meter-state-25 #confirm-meter-range-0 {
    fill: #7DD88B;
    fill-opacity: 1;
}

.confirm-meter-state-25 #confirm-meter-range-25 {
    fill: #4FC963;
    fill-opacity: 1;
}

.confirm-meter-state-25 #confirm-meter-range-50,
.confirm-meter-state-25 #confirm-meter-range-100 {
    fill: #fff;
}

.confirm-meter-state-50 #confirm-meter-hand {
    transform: rotate(90deg);
}

.confirm-meter-state-50 #confirm-meter-range-0 {
    fill: #7DD88B;
    fill-opacity: 1;
}

.confirm-meter-state-50 #confirm-meter-range-25 {
    fill: #4FC963;
    fill-opacity: 1;
}

.confirm-meter-state-50 #confirm-meter-range-50 {
    fill: #2BB845;
    fill-opacity: 1;
}

.confirm-meter-state-50 #confirm-meter-range-100 {
    fill: #fff;
}

.confirm-meter-state-75 #confirm-meter-hand {
    transform: rotate(148deg);
}

.confirm-meter-state-75 #confirm-meter-range-0 {
    fill: #7DD88B;
    fill-opacity: 1;
}

.confirm-meter-state-75 #confirm-meter-range-25 {
    fill: #4FC963;
    fill-opacity: 1;
}

.confirm-meter-state-75 #confirm-meter-range-50 {
    fill: #2BB845;
    fill-opacity: 1;
}

.confirm-meter-state-75 #confirm-meter-range-100 {
    fill: #00B624;
    fill-opacity: 1;
}

.confirm-meter-state-100 #confirm-meter-hand {
    transform: rotate(148deg);
}

.confirm-meter-state-100 #confirm-meter-range-0 {
    fill: #7DD88B;
    fill-opacity: 1;
}

.confirm-meter-state-100 #confirm-meter-range-25 {
    fill: #4FC963;
    fill-opacity: 1;
}

.confirm-meter-state-100 #confirm-meter-range-50 {
    fill: #2BB845;
    fill-opacity: 1;
}

.confirm-meter-state-100 #confirm-meter-range-100 {
    fill: #00B624;
    fill-opacity: 1;
}

/* Burst Animations */
@keyframes confirmBurstLeft {
    0% {
        opacity: 0;
        transform: translate(30px, 30px) scale(0.7);
    }

    100% {
        opacity: 1;
        transform: translate(0, 2px) scale(1);
    }
}

@keyframes confirmBurstCenterLeft {
    0% {
        opacity: 0;
        transform: translate(15px, 28px) scale(0.75);
    }

    100% {
        opacity: 1;
        transform: translate(0, 2px) scale(1);
    }
}

@keyframes confirmBurstCenter {
    0% {
        opacity: 0;
        transform: translate(0, 25px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(0, 2px) scale(1);
    }
}

@keyframes confirmBurstCenterRight {
    0% {
        opacity: 0;
        transform: translate(-15px, 28px) scale(0.75);
    }

    100% {
        opacity: 1;
        transform: translate(0, 2px) scale(1);
    }
}

@keyframes confirmBurstRight {
    0% {
        opacity: 0;
        transform: translate(-30px, 30px) scale(0.7);
    }

    100% {
        opacity: 1;
        transform: translate(0, 2px) scale(1);
    }
}

/* Float Animations */
@keyframes confirmFloatLeft {

    0%,
    100% {
        transform: translate(0, 1px);
    }

    50% {
        transform: translate(-2px, -2px);
    }
}

@keyframes confirmFloatCenterLeft {

    0%,
    100% {
        transform: translate(0, 1px);
    }

    50% {
        transform: translate(-1px, -2px);
    }
}

@keyframes confirmFloatCenter {

    0%,
    100% {
        transform: translate(0, 1px);
    }

    50% {
        transform: translate(0, -2px);
    }
}

@keyframes confirmFloatCenterRight {

    0%,
    100% {
        transform: translate(0, 1px);
    }

    50% {
        transform: translate(1px, -2px);
    }
}

@keyframes confirmFloatRight {

    0%,
    100% {
        transform: translate(0, 1px);
    }

    50% {
        transform: translate(2px, -2px);
    }
}

/* Animate-in Classes */
.td-confirm-animated-area #Confirm_Small_Stars.animate-in {
    animation: confirmBurstCenter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        confirmFloatCenter 3s ease-in-out 0.3s infinite;
}

.td-confirm-animated-area #Confirm_Squares.animate-in {
    animation: confirmBurstCenterRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.03s forwards,
        confirmFloatCenterRight 3.5s ease-in-out 0.33s infinite;
}

.td-confirm-animated-area #Confirm_Circles.animate-in {
    animation: confirmBurstCenterLeft 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.06s forwards,
        confirmFloatCenterLeft 4s ease-in-out 0.36s infinite;
}

.td-confirm-animated-area #Confirm_Lines.animate-in {
    animation: confirmBurstCenter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.09s forwards,
        confirmFloatCenter 3.2s ease-in-out 0.39s infinite;
}

.td-confirm-animated-area #confirm-big-star-1.animate-in {
    animation: confirmBurstRight 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.18s forwards,
        confirmFloatRight 5.2s ease-in-out 0.53s infinite;
}

.td-confirm-animated-area #confirm-big-star-2.animate-in {
    animation: confirmBurstLeft 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.04s forwards,
        confirmFloatLeft 3.4s ease-in-out 0.32s infinite;
}

.td-confirm-animated-area #confirm-big-star-3.animate-in {
    animation: confirmBurstLeft 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.12s forwards,
        confirmFloatLeft 4.6s ease-in-out 0.44s infinite;
}

.td-confirm-animated-area #confirm-big-star-4.animate-in {
    animation: confirmBurstCenterRight 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.22s forwards,
        confirmFloatCenterRight 3.8s ease-in-out 0.48s infinite;
}

.td-confirm-animated-area #confirm-big-star-5.animate-in {
    animation: confirmBurstCenterLeft 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.02s forwards,
        confirmFloatLeft 5.5s ease-in-out 0.32s infinite;
}

.td-confirm-animated-area #confirm-big-star-6.animate-in {
    animation: confirmBurstCenterRight 0.34s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.08s forwards,
        confirmFloatCenterRight 3.2s ease-in-out 0.42s infinite;
}

.td-confirm-animated-area #confirm-big-star-7.animate-in {
    animation: confirmBurstRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s forwards,
        confirmFloatRight 4.2s ease-in-out 0.45s infinite;
}

/* Approval Header */
.td-confirm-approval-header {
    text-align: center;
    padding: 0 24px 24px 24px;
}

.td-confirm-approval-line,
.td-confirm-approval-name {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.52px;
    color: #1A5336;
    margin: 0;
}

/* Product Section */
.td-confirm-product-section {
    display: flex;
    padding: 0 8px 8px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

/* Product Card */
.td-confirm-product-card {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    box-shadow: 0px 5px 12px 0px rgba(28, 28, 28, 0.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.td-confirm-product-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.td-confirm-product-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.td-confirm-product-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.td-confirm-product-name {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.3px;
    color: #1c1c1c;
    margin: 0;
}

.td-confirm-product-credit {
    font-family: 'TD Graphik', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #1c1c1c;
    margin: 0;
}

.td-confirm-credit-label {
    font-weight: 300;
}

.td-confirm-credit-amount {
    font-weight: 600;
}

/* Status Row */
.td-confirm-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.td-confirm-product-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.td-confirm-status-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.td-confirm-status-text {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 15px;
    line-height: 15px;
    color: #1c1c1c;
    position: relative;
    top: 2px;
}

/* Action Container */
.td-confirm-action-container {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 32px;
}

.td-confirm-divider-vertical {
    width: 1px;
    height: 32px;
    background-color: #cccccc;
}

/* Chevron Button */
.td-confirm-product-chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1px;
    width: 32px;
    height: 32px;
    border: 1px solid #008a00;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.td-confirm-product-chevron:hover {
    background-color: #F0FFF0;
    border-color: #006600;
}

.td-confirm-product-chevron svg {
    transition: transform 0.3s ease;
}

.td-confirm-product-chevron.active svg {
    transform: rotate(180deg);
}

/* Card Footer */
.td-confirm-card-footer {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.td-confirm-divider-light {
    height: 1px;
    background-color: #cccccc;
    width: 100%;
}

.td-confirm-delivery-info {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 18px;
    color: #636363;
    margin: 0;
    padding-top: 20px;
}

/* Expandable Details */
.td-confirm-expandable-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    overflow: hidden;
    height: 0;
    opacity: 0;
    background-color: #f2f7e9;
    box-sizing: border-box;
    padding: 0 16px;
}

.td-confirm-expandable-details.visible {
    height: auto;
    opacity: 1;
    padding: 16px;
}

.td-confirm-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.td-confirm-detail-label {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 18px;
    color: #1c1c1c;
    margin: 0;
}

.td-confirm-detail-value {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 24px;
    color: #1c1c1c;
    margin: 0;
}

/* Prevent Safari auto-linked phone numbers from appearing as links */
.td-confirm-detail-value a,
.td-confirm-detail-value a[href^="tel"] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

/* Timeline Section */
.td-confirm-timeline-section {
    display: flex;
    padding: 24px;
    flex-direction: column;
    gap: 16px;
}

.td-confirm-timeline-header {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #1c1c1c;
    margin: 0;
    text-align: center;
}

.td-confirm-timeline-card {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 7.6px;
    padding: 16px;
    overflow: hidden;
}

.td-confirm-timeline-layout {
    display: flex;
    gap: 3px;
    align-items: flex-start;
}

.td-confirm-timeline-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 36px;
    flex-shrink: 0;
}

.td-confirm-timeline-spacer {
    height: 4px;
    width: 4px;
}

.td-confirm-timeline-svg {
    width: 16px;
    height: 234px;
}

.td-confirm-content-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.td-confirm-timeline-step {
    display: flex;
    flex-direction: column;
}

.td-confirm-timeline-step:nth-child(1) {
    height: 96px;
}

.td-confirm-timeline-step:nth-child(2) {
    height: 122px;
}

.td-confirm-timeline-step:nth-child(3) {
    flex: 1;
}

.td-confirm-step-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.td-confirm-step-row-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.td-confirm-step-label {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #1c1c1c;
    margin: 0;
}

.td-confirm-step-value {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #1c1c1c;
    text-align: right;
    margin: 0;
}

.td-confirm-step-body {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 21px;
    color: #1c1c1c;
    margin: 0;
}

/* Save CTA */
.td-confirm-save-cta {
    display: flex;
    padding: 12px 24px 24px 24px;
}

.td-confirm-save-cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: #ffffff;
    border: 1px solid #008a00;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.td-confirm-save-cta-content:hover {
    background-color: #F0FFF0;
    border-color: #006600;
}

.td-confirm-save-cta-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.td-confirm-save-cta-text {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #038203;
    margin: 0;
    padding-top: 1px;
}

/* Account Options Section */
.td-confirm-account-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;
    margin-top: 26px;
}

.td-confirm-section-title {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.44px;
    color: #1A5336;
    text-align: center;
    margin: 0;
}

.td-confirm-option-card {
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.td-confirm-option-card:last-child {
    margin-bottom: 10px;
}

.td-confirm-option-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.td-confirm-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.td-confirm-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #008a00;
    background-color: #ffffff;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.td-confirm-checkbox.checked {
    background-color: #008a00;
}

.td-confirm-checkbox.checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.td-confirm-option-title {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #1c1c1c;
}

.td-confirm-option-description {
    font-family: 'TD Graphik', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    color: #1c1c1c;
    margin: 0;
}

/* Sticky Footer */
.td-confirm-sticky-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(243, 243, 243, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.4);
    padding-top: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 20;
}

.td-confirm-cta-button {
    background-color: #008a00;
    color: white;
    border: none;
    max-width: 268px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'TD Graphik', sans-serif;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.td-confirm-cta-button:hover {
    background-color: #007200;
}

.td-confirm-cta-button:active {
    background-color: #006000;
    transform: scale(0.98);
}

.td-confirm-cta-icon {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    filter: brightness(0) invert(1);
    padding-bottom: 2px;
}

.td-confirm-home-indicator-area {
    width: 100%;
    height: 34px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 8px;
}

.td-confirm-home-indicator {
    width: 134px;
    height: 5px;
    background-color: #1c1c1c;
    border-radius: 100px;
}

/* ==================== CASE STUDY NAVIGATION BUTTONS ==================== */

.cs-nav-buttons {
    display: flex;
    justify-content: center;
    padding: 80px 20px 40px;
    width: 100%;
    box-sizing: border-box;
}

.cs-nav-buttons-container {
    display: flex;
    gap: 12px;
    /* Match nav shell width: nav-w-collapsed minus shell margins (14px each side) */
    max-width: calc(var(--nav-w-collapsed, 520px) - 28px);
    width: 100%;
}

.cs-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
}

.cs-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.cs-nav-btn:active {
    transform: translateY(0);
}

.cs-nav-btn--prev {
    justify-content: flex-start;
}

.cs-nav-btn--next {
    justify-content: flex-end;
}

/* Arrow icon styling - inside a circle */
.cs-nav-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.cs-nav-btn:hover .cs-nav-btn-arrow {
    border-color: #7EBB1C;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(126, 187, 28, 0.15);
}

.cs-nav-btn-arrow svg {
    width: 24px;
    height: 24px;
}

/* Text container for two-line layout */
.cs-nav-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-nav-btn--prev .cs-nav-btn-text {
    text-align: left;
}

.cs-nav-btn--next .cs-nav-btn-text {
    text-align: right;
}

/* Case Study label - grey */
.cs-nav-btn-label {
    font-family: 'Input', 'Neue Haas Unica', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Project name - white */
.cs-nav-btn-title {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cs-nav-buttons {
        /* 60px spacing above nav buttons */
        padding: 160px 20px 30px;
        margin-top: 0;
    }

    .cs-nav-buttons-container {
        gap: 12px;
    }
}

/* Mobile - match mockup 1 border styling only */
@media (max-width: 768px) {
    .td-confirm-device-frame {
        width: 240px;
        /* Keep original height to preserve content */
        border-radius: 28px;
    }

    .td-confirm-sticky-footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .td-confirm-cta-button {
        width: 100%;
        max-width: none;
        font-size: 12px;
        padding: 10px 12px;
    }

    .td-confirm-approval-line,
    .td-confirm-approval-name {

        font-size: 20px;
        line-height: 27px;

    }

    .td-confirm-animated-area {
        height: 100px;
        min-height: 100px;
    }

    .td-confirm-data-label {
        font-size: 10px;
    }

    .td-confirm-data-value {
        font-size: 12px;
    }

    .td-confirm-cta-icon {
        width: 24px;
        height: 24px;
    }
}

/* ==================== MICRO-ANIMATION SECTION ==================== */
.cs-micro-animation-section {
    padding-bottom: 0;
}

/* Wrapper for video + description */
.cs-micro-animation-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Video container - left aligned with growth text */
.cs-growth-video {
    width: 300px;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.cs-growth-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Description text - to the right of video */
.cs-micro-animation-desc {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: var(--secondary-text);
    padding-top: 8px;
    max-width: 200px;
}

/* Mobile - stack vertically with description on top */
@media (max-width: 768px) {
    .cs-micro-animation-wrapper {
        flex-direction: column-reverse;
        align-items: left;
        gap: 16px;
    }

    .cs-growth-video {
        width: 280px;
        height: 280px;
    }

    .cs-micro-animation-desc {
        max-width: none;
        text-align: left;
        padding-top: 0;
    }

    .cs-micro-animation-section {
        margin-bottom: 100px;
    }
}

/* Two-card grid layout for micro-animation section */
.cs-micro-animation-grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
}

/* Second card - offset to align with description text (video width 300px + gap 24px) */
.cs-micro-animation-wrapper--image {
    margin-left: 324px;
    /* 300px video + 24px gap */
}

/* Image container - matches video dimensions */
.cs-growth-image {
    width: 300px;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.cs-growth-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile - stack cards vertically, remove offset */
@media (max-width: 768px) {
    .cs-micro-animation-grid {
        flex-direction: column;
        gap: 48px;
    }

    .cs-micro-animation-wrapper--image {
        margin-left: 0;
    }

    .cs-growth-image {
        width: 280px;
        height: 280px;
    }
}

/* ==================== DESIGN PROCESS DIAGRAM SECTION ==================== */
/* Interactive Venn diagram with 4 toggle states showing Design, QA, Dev relationships */

.cs-diagram-section {
    /* Inherits from cs-section - no flex override to allow cs-grid-title-overview to work */
    padding-top: var(--cs-section-gap-md);
    padding-bottom: var(--cs-section-gap-md);
}

/* Two-column layout: Text left (aligned with intro), Diagram on far right */
/* Grid layout matching cs-grid-title-overview column structure */
.cs-diagram-layout {
    display: grid;
    grid-template-columns: minmax(280px, 38%) minmax(320px, 1fr);
    grid-template-rows: auto auto;
    gap: var(--cs-gutter);
    width: 100%;
}

/* Body text column - aligns with intro content (second column, first row) */
.cs-diagram-text {
    grid-column: 2;
    grid-row: 1;
}

/* Card positioned on far right (second column, second row) */
.cs-diagram-layout .cs-diagram-card {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

/* Card wrapper - inside grid column 2, below text, left aligned with content */
.cs-diagram-card-wrapper {
    grid-column: 2;
    margin-top: 40px;
    width: fit-content;
}

.cs-diagram-text .cs-feature-text {
    padding-right: 100px;
}

.cs-diagram-text .cs-feature-text:last-child {
    margin-bottom: 0;
}

/* Card Container - subtle background to stand out from page */
.cs-diagram-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px 20px 40px;
    margin-top: 20px;
    /* Push card downward for visual rhythm with text */
}

/* Visual Design Card - independent styling for video showcase */
.cs-visual-design-card {
    display: flex;
    flex-direction: column;
    align-items: left;
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
}


/* Toggle Navigation Bar */
.cs-diagram-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    /* Rounded background with light transparency for better selectability */
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 8px 16px;
    white-space: nowrap;
}

.cs-diagram-toggle-btn {
    position: relative;
    background: none;
    border: none;
    padding: 8px 4px 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cs-diagram-toggle-text {
    font-family: 'Input', 'Consolas', monospace;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #565656;
    transition: color 0.3s ease;
}

.cs-diagram-toggle-btn--active .cs-diagram-toggle-text {
    color: #ffffff;
}

.cs-diagram-toggle-btn:hover .cs-diagram-toggle-text {
    color: #888888;
}

.cs-diagram-toggle-btn--active:hover .cs-diagram-toggle-text {
    color: #ffffff;
}

/* Progress bar - only visible on active button */
.cs-diagram-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cs-diagram-toggle-btn--active .cs-diagram-progress {
    opacity: 1;
}

.cs-diagram-progress-fill {
    width: 0%;
    height: 100%;
    background-color: #7ebb1c;
    transition: width 0.1s linear;
}

/* Animation classes for auto-transition (state-specific timing for smooth handoffs) */
/* Divergence: 3.6s = 2 cycles, ends at 0% (contracted) */
.cs-diagram-progress-fill.animating-divergence {
    animation: progress-fill 3.6s linear forwards;
}

/* Inertia: 4.5s = 3 cycles, ends at 0% (starting position) */
.cs-diagram-progress-fill.animating-inertia {
    animation: progress-fill 4.5s linear forwards;
}

/* Convergence: 3.45s = 1.5 cycles, ends at 50% (contracted) */
.cs-diagram-progress-fill.animating-convergence {
    animation: progress-fill 3.45s linear forwards;
}

/* Synchronicity: standard 4s */
.cs-diagram-progress-fill.animating-synchronicity {
    animation: progress-fill 4s linear forwards;
}

@keyframes progress-fill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.cs-diagram-chevron {
    width: 12px;
    height: 21px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 8px;
    /* Align with text (matches button top padding) */
}

.cs-diagram-chevron path {
    stroke: #7ebb1c;
}

/* Venn Diagram Container - matches Figma 380x353 */
.cs-diagram-venn {
    position: relative;
    width: 380px;
    height: 353px;
    margin-top: 20px;
}

/* Base Circle Styling */
.cs-diagram-circle {
    position: absolute;
    width: 182px;
    height: 182px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Smooth transitions between states */
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        border-style 0.3s ease;
}

.cs-diagram-circle span {
    font-family: 'Input', 'Consolas', monospace;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

/* ===== STATE: DIVERGENCE - Smooth snappy oscillation ===== */
/* Contracted: circles touching at edges (Figma-accurate) */
/* Expanded: circles spread apart with gaps */

@keyframes diverge-design {

    0%,
    100% {
        /* Contracted - Figma position: centered at x=99px in 380px container */
        top: -15px;
        left: 95px;
    }

    50% {
        /* Expanded - Figma 996:2094 */
        top: -35px;
        left: 95px;
    }
}

@keyframes diverge-qa {

    0%,
    100% {
        /* Contracted - Figma position: x=0, y=171 */
        top: 156px;
        left: -4px;
    }

    50% {
        /* Expanded - Figma 996:2094 */
        top: 176px;
        left: -20px;
    }
}

@keyframes diverge-dev {

    0%,
    100% {
        /* Contracted - Figma position: x=198, y=171 */
        top: 156px;
        left: 194px;
    }

    50% {
        /* Expanded - Figma 996:2094 */
        top: 176px;
        left: 210px;
    }
}

.cs-diagram-venn[data-active-state="divergence"] .cs-diagram-circle--design {
    top: -15px;
    left: 95px;
    animation: diverge-design 1.8s cubic-bezier(0.0, 0.7, 0.3, 1) infinite;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

.cs-diagram-venn[data-active-state="divergence"] .cs-diagram-circle--qa {
    top: 156px;
    left: -4px;
    animation: diverge-qa 1.8s cubic-bezier(0.0, 0.7, 0.3, 1) infinite;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

.cs-diagram-venn[data-active-state="divergence"] .cs-diagram-circle--dev {
    top: 156px;
    left: 194px;
    animation: diverge-dev 1.8s cubic-bezier(0.0, 0.7, 0.3, 1) infinite;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}


/* ===== STATE: INERTIA - Circles orbit in place (busy but not interacting) ===== */
/* Each circle orbits on its own path in a direction away from others */
/* This ensures circles never touch during their orbits */

/* Design (top) - orbits upward/outward from group */
@keyframes orbit-design {
    0% {
        transform: translate(10px, 0);
    }

    12.5% {
        transform: translate(7px, -7px);
    }

    25% {
        transform: translate(0, -10px);
    }

    37.5% {
        transform: translate(-7px, -7px);
    }

    50% {
        transform: translate(-10px, 0);
    }

    62.5% {
        transform: translate(-7px, 7px);
    }

    75% {
        transform: translate(0, 10px);
    }

    87.5% {
        transform: translate(7px, 7px);
    }

    100% {
        transform: translate(10px, 0);
    }
}

/* QA (bottom-left) - orbits left/downward away from others */
@keyframes orbit-qa {
    0% {
        transform: translate(-10px, 0);
    }

    12.5% {
        transform: translate(-7px, 7px);
    }

    25% {
        transform: translate(0, 10px);
    }

    37.5% {
        transform: translate(7px, 7px);
    }

    50% {
        transform: translate(10px, 0);
    }

    62.5% {
        transform: translate(7px, -7px);
    }

    75% {
        transform: translate(0, -10px);
    }

    87.5% {
        transform: translate(-7px, -7px);
    }

    100% {
        transform: translate(-10px, 0);
    }
}

/* Dev (bottom-right) - orbits right/downward away from others */
@keyframes orbit-dev {
    0% {
        transform: translate(10px, 0);
    }

    12.5% {
        transform: translate(7px, 7px);
    }

    25% {
        transform: translate(0, 10px);
    }

    37.5% {
        transform: translate(-7px, 7px);
    }

    50% {
        transform: translate(-10px, 0);
    }

    62.5% {
        transform: translate(-7px, -7px);
    }

    75% {
        transform: translate(0, -10px);
    }

    87.5% {
        transform: translate(7px, -7px);
    }

    100% {
        transform: translate(10px, 0);
    }
}

.cs-diagram-venn[data-active-state="inertia"] .cs-diagram-circle--design {
    /* No delay - starts at 0° */
    top: -10px;
    left: 99px;
    animation: orbit-design 1.5s linear infinite;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

.cs-diagram-venn[data-active-state="inertia"] .cs-diagram-circle--qa {
    /* 1/3 cycle offset - starts at 120° */
    top: 175px;
    left: -14px;
    animation: orbit-qa 1.5s linear infinite;
    animation-delay: -0.5s;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

.cs-diagram-venn[data-active-state="inertia"] .cs-diagram-circle--dev {
    /* 2/3 cycle offset - starts at 240° */
    top: 175px;
    left: 210px;
    animation: orbit-dev 1.5s linear infinite;
    animation-delay: -1s;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

/* ===== STATE: CONVERGENCE - Oscillates between expanded and contracted ===== */
/* Contracts toward center, HOLDS for 0.5s, returns to expanded */
/* Contracted = Figma 996:2080 (circles touching) */
/* Movement: Design DOWN only, QA UP-RIGHT, Dev UP-LEFT */
/* Timing: 2.3s total - 0.9s in, 0.5s hold, 0.9s out */

@keyframes converge-design {
    0% {
        /* Expanded position */
        top: -40px;
        left: 95px;
    }

    39%,
    61% {
        /* Contracted - holds for 0.5s */
        top: 0;
        left: 95px;
    }

    100% {
        /* Back to expanded */
        top: -40px;
        left: 95px;
    }
}

@keyframes converge-qa {
    0% {
        /* Expanded position */
        top: 161px;
        left: -20px;
    }

    39%,
    61% {
        /* Contracted - holds for 0.5s */
        top: 131px;
        left: 15px;
    }

    100% {
        /* Back to expanded */
        top: 161px;
        left: -20px;
    }
}

@keyframes converge-dev {
    0% {
        /* Expanded position */
        top: 161px;
        left: 208px;
    }

    39%,
    61% {
        /* Contracted - holds for 0.5s */
        top: 131px;
        left: 173px;
    }

    100% {
        /* Back to expanded */
        top: 161px;
        left: 208px;
    }
}

.cs-diagram-venn[data-active-state="convergence"] .cs-diagram-circle--design {
    /* Starts at expanded position */
    top: -40px;
    left: 95px;
    animation: converge-design 2.3s cubic-bezier(0.0, 0.7, 0.3, 1) infinite;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

.cs-diagram-venn[data-active-state="convergence"] .cs-diagram-circle--qa {
    /* Starts at expanded position */
    top: 161px;
    left: -20px;
    animation: converge-qa 2.3s cubic-bezier(0.0, 0.7, 0.3, 1) infinite;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

.cs-diagram-venn[data-active-state="convergence"] .cs-diagram-circle--dev {
    /* Starts at expanded position */
    top: 161px;
    left: 208px;
    animation: converge-dev 2.3s cubic-bezier(0.0, 0.7, 0.3, 1) infinite;
    /* Subtle motion trail */
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.15),
        0 0 16px rgba(255, 255, 255, 0.08),
        0 0 24px rgba(255, 255, 255, 0.04);
}

/* ===== VESICA PISCIS - Center highlight for Convergence ===== */
/* Hidden by default */
.cs-diagram-vesica {
    position: absolute;
    /* Center position based on Figma x=90.86, y=132 in 340x313 container */
    top: 132px;
    left: 50%;
    transform: translateX(-52%);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    /* Glow effect */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.2));
}

/* Fade animation synced with convergence 2.3s cycle */
/* Visible during contracted hold (39%-61%), fades out quickly */
@keyframes vesica-fade {

    0%,
    32% {
        opacity: 0;
    }

    39%,
    61% {
        opacity: 1;
    }

    68%,
    100% {
        opacity: 0;
    }
}

/* Only animate in convergence state */
.cs-diagram-venn[data-active-state="convergence"] .cs-diagram-vesica {
    animation: vesica-fade 2.3s cubic-bezier(0.0, 0.7, 0.3, 1) infinite;
}

/* ===== STATE: SYNCHRONICITY - Static at contracted position with Vesica piscis ===== */
/* Matches Convergence contracted positions (Figma 996:2080) */
/* Dashed rotating circles */

@keyframes sync-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-circle--design {
    top: 0;
    left: 95px;
    border-style: dashed;
    animation: sync-rotate 8s linear infinite;
}

.cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-circle--qa {
    top: 131px;
    left: 15px;
    border-style: dashed;
    animation: sync-rotate 8s linear infinite reverse;
}

.cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-circle--dev {
    top: 131px;
    left: 173px;
    border-style: dashed;
    animation: sync-rotate 8s linear infinite;
}

/* Show Vesica piscis with glow in Synchronicity state */
.cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-vesica {
    opacity: 1;
}

/* Counter-rotate text to keep it stationary */
.cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-circle--design span,
.cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-circle--dev span {
    animation: sync-rotate 8s linear infinite reverse;
}

.cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-circle--qa span {
    animation: sync-rotate 8s linear infinite;
}

/* Tablet responsive */
@media (max-width: 1024px) {
    .cs-diagram-toggle {
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: center;
        margin-bottom: 40px;
        padding: 6px 12px 10px;
    }

    .cs-diagram-toggle-btn {
        padding: 6px 4px 8px;
    }

    .cs-diagram-toggle-text {
        font-size: 15px;
    }

    /* Scale the entire diagram proportionally */
    .cs-diagram-venn {
        width: 380px;
        height: 320px;
        transform: scale(0.88);
        transform-origin: top center;
    }

    .cs-diagram-card {
        padding: 24px 24px 40px;
        margin-top: 0;
    }

    /* Stack layout vertically on tablet */
    .cs-diagram-layout {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    /* Text matches card width so left edges align when both centered */
    .cs-diagram-text {
        width: 587px;
        max-width: 587px;
        padding-right: 0;
        text-align: left;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cs-diagram-section {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: var(--cs-section-gap-sm);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Reset grid for diagram section on mobile */
    .cs-diagram-section .cs-grid-title-overview {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    /* Hide empty first column on mobile */
    .cs-diagram-section .cs-grid-title-overview>div:first-child:empty {
        display: none;
    }

    .cs-diagram-card {
        padding: 16px 16px 0;
        border-radius: 12px;
        width: fit-content;
        max-width: calc(100vw - 48px);
        margin: 0 auto;
    }

    .cs-diagram-text {
        width: 100%;
        max-width: 100%;
        text-align: left;
        padding-right: 0;
    }

    .cs-diagram-card-wrapper {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        grid-column: auto;
    }

    .cs-diagram-toggle {
        gap: 4px;
        margin-bottom: 32px;
        flex-wrap: nowrap;
        padding: 6px 8px 10px;
        overflow-x: auto;
    }

    .cs-diagram-toggle-btn {
        padding: 4px 4px 6px;
    }

    .cs-diagram-toggle-text {
        font-size: 12px;
    }

    .cs-diagram-chevron {
        width: 8px;
        height: 14px;
        margin-top: 9px;
    }

    /* Scale the entire diagram proportionally */
    .cs-diagram-venn {
        width: 380px;
        height: 290px;
        transform: scale(0.72);
        transform-origin: top center;
        margin: 20px auto 0;
    }
}

/* Extra small mobile - scale diagram to fit narrow screens */
@media (max-width: 500px) {
    .cs-diagram-card {
        padding: 12px 12px 36px;
        overflow: hidden;
        width: fit-content;
        max-width: calc(100vw - 48px);
    }

    .cs-diagram-venn {
        width: 380px;
        max-width: 280px;
        height: 240px;
        transform: scale(0.65);
        /* Transform-origin calculated to visually center the asymmetrically-positioned circles */
        transform-origin: 56px 0;
        margin: 35px auto 0;
    }



    .cs-diagram-toggle {
        gap: 2px;
        margin-bottom: 24px;
        padding: 8px 8px;
        overflow-x: auto;
    }

    .cs-diagram-toggle-btn {
        padding: 4px 6px;
    }

    .cs-diagram-toggle-text {
        font-size: 9px;
    }

    .cs-diagram-chevron {
        width: 6px;
        height: 12px;
        margin-top: 10px;
    }

    /* Shift vesica piscis to center on mobile */
    .cs-diagram-venn[data-active-state="convergence"] .cs-diagram-vesica,
    .cs-diagram-venn[data-active-state="synchronicity"] .cs-diagram-vesica {
        transform: translateX(-35px);
    }

    /* Add spacing after diagram section */
    .cs-diagram-section {
        margin-bottom: 160px;
    }
}

/* ==================== DEFECT GLOSSARY COMPONENT ==================== */
/* Grid modifier for glossary section - two columns on desktop */
.cs-grid-feature--glossary {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    max-width: 100%;
}

/* Glossary card takes fixed width on left */
.cs-grid-feature--glossary .cs-glossary-card {
    flex-shrink: 0;
    width: 500px;
}

/* Text column on right with constrained width */
.cs-grid-feature--glossary .cs-feature-text--glossary {
    flex: 1;
    max-width: 400px;
    padding-top: 20px;
}

/* ==================== VISUAL DESIGN GRID (matches glossary layout) ==================== */
/* Grid modifier for visual design section - two columns on desktop */
.cs-grid-feature--visual-design {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    max-width: 100%;
}

/* Video card takes fixed width on left (same as glossary) */
.cs-grid-feature--visual-design .cs-visual-design-card {
    flex-shrink: 0;
    width: 500px;
}

/* Video styling */
.cs-grid-feature--visual-design .cs-visual-design-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Text column on right with constrained width (same as glossary) */
.cs-feature-text--visual-design {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    flex: 1;
    max-width: 400px;
    padding-top: 20px;
}

/* Visual Design Text - paragraph styling */
.cs-visual-design-text {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    text-align: left;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .cs-grid-feature--visual-design {
        flex-direction: column;
    }

    .cs-grid-feature--visual-design .cs-visual-design-card {
        width: 100%;
    }

    .cs-feature-text--visual-design {
        max-width: 100%;
    }

    .cs-visual-design-text {
        font-size: 15px;
        font-weight: 300;
        line-height: 20px;
        letter-spacing: 0;
    }
}

/* Glossary card container */
.cs-glossary-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

/* Glossary header */
.cs-glossary-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-glossary-title {
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

/* Severity filter tabs */
.cs-glossary-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    width: 100%;
}

.cs-glossary-tab {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Input', 'Neue Haas Unica', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cs-glossary-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.cs-glossary-tab.active {
    background: rgba(255, 255, 255, 0.9);
    color: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.9);
}

/* Defect items list */
.cs-glossary-list {
    padding: 16px;
    max-height: 500px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Custom scrollbar */
.cs-glossary-list::-webkit-scrollbar {
    width: 6px;
}

.cs-glossary-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.cs-glossary-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Individual defect item */
.cs-glossary-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cs-glossary-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.cs-glossary-item.hidden {
    display: none;
}

/* Item icon */
.cs-glossary-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
}

/* Force white icons in glossary - dark background */
.cs-glossary-item-icon img,
.cs-glossary-list .cs-glossary-item-icon img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1) !important;
}

/* Force white SVG icons since glossary has dark background */
.cs-glossary-item-icon svg,
.cs-glossary-list .cs-glossary-item-icon svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
    fill: #ffffff;
}

/* Item content */
.cs-glossary-item-content {
    flex: 1;
    min-width: 0;
}

.cs-glossary-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.cs-glossary-item-title {
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}

.cs-glossary-item-desc {
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Severity badges */
.cs-glossary-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Input', 'Neue Haas Unica', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cs-glossary-badge--high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid #f87171;
}

.cs-glossary-badge--medium {
    background: rgba(234, 179, 8, 0.2);
    color: #fbbf24;
    border: 1px solid #fbbf24;
}

.cs-glossary-badge--low {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid #4ade80;
}

/* Feature subtitle */
.cs-feature-subtitle {
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 12px;
}

/* Text column modifier for glossary */
.cs-feature-text--glossary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

/* Tablet responsive */
@media (max-width: 1024px) {

    /* Center the glossary section and make label align with component */
    [data-section="glossary"] {
        justify-items: center;
    }

    [data-section="glossary"] .cs-feature-header {
        width: 500px;
        max-width: 500px;
        justify-self: center;
    }

    .cs-grid-feature--glossary {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .cs-grid-feature--glossary .cs-glossary-card {
        width: 500px;
        max-width: 500px;
    }

    .cs-grid-feature--glossary .cs-feature-text--glossary {
        width: 500px;
        max-width: 500px;
        padding-top: 0;
    }

    .cs-glossary-list {
        max-height: 400px;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {

    /* Reset glossary widths for mobile - let them fill container with padding */
    [data-section="glossary"] .cs-feature-header {
        width: 100%;
        max-width: 100%;
    }

    .cs-grid-feature--glossary .cs-glossary-card,
    .cs-grid-feature--glossary .cs-feature-text--glossary {
        width: 100%;
        max-width: 100%;
    }

    .cs-glossary-tabs {
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 16px;
    }

    .cs-glossary-tab {
        padding: 6px 12px;
        font-size: 11px;
    }

    .cs-glossary-list {
        padding: 12px;
        max-height: 350px;
        gap: 8px;
    }

    .cs-glossary-item {
        padding: 12px;
        gap: 12px;
    }

    .cs-glossary-item-icon {
        width: 32px;
        height: 32px;
    }

    .cs-glossary-item-icon svg {
        width: 18px;
        height: 18px;
    }

    .cs-glossary-item-title {
        font-size: 14px;
    }

    .cs-glossary-item-desc {
        font-size: 12px;
    }

    .cs-glossary-badge {
        font-size: 9px;
        padding: 3px 8px;
    }
}

/* ==================== UNIFIED TEXT STYLING FOR QA FRAMEWORK ==================== */
/* Consistent font-size and line-height for diagram, visual design, and glossary sections */
/* Base styles (desktop) */
.cs-diagram-text .cs-feature-text,
.cs-visual-design-text,
.cs-feature-text--glossary .cs-intro-text {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0;
    color: #ffffff;
}

/* Tablet (1024px) - same as desktop */
@media (max-width: 1024px) {

    .cs-diagram-text .cs-feature-text,
    .cs-visual-design-text,
    .cs-feature-text--glossary .cs-intro-text {
        font-size: 17px;
        font-weight: 300;
        line-height: 24px;
        letter-spacing: 0;
    }
}

/* Mobile (768px) - slightly smaller for readability */
@media (max-width: 768px) {

    .cs-diagram-text .cs-feature-text,
    .cs-visual-design-text,
    .cs-feature-text--glossary .cs-intro-text {
        font-size: 15px;
        font-weight: 300;
        line-height: 20px;
        letter-spacing: 0;
    }
}

/* ==================== SIMONE VIDEO CARD SECTION ==================== */
/* Smaller centered video card between quote and glossary */
.cs-simone-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 0;
}

/* Desktop/Tablet: Add top gap for visual design section */
@media (min-width: 769px) {
    .cs-visual-design-section {
        padding-top: 160px;
    }
}

/* Mobile: Remove top gap for visual design section */
@media (max-width: 768px) {
    .cs-visual-design-section {
        padding-top: 0;
    }
}

/* Desktop: Reduce space between growth quote and simone video */
.cs-simone-section {
    margin-top: -60px;
}

.cs-simone-card {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--background);
}

.cs-simone-video {
    width: 100%;
    height: auto;
    display: block;
}

/* Tablet: slightly smaller */
@media (max-width: 1024px) {
    .cs-simone-card {
        max-width: 350px;
    }
}

/* Mobile: even smaller for proportional scaling */
@media (max-width: 768px) {
    .cs-simone-card {
        max-width: 280px;
    }

    /* Reduce space between growth quote and simone video on mobile */
    .cs-simone-section {
        margin-top: -100px;
    }
}

/* ==================== DESIGN STRATEGY VIDEO ==================== */
/* Match the diagram card sizing - fills grid column */
.cs-design-strategy-video {
    width: 100%;
    background: #222222;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
}

.cs-design-strategy-video video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Video Fullscreen Button - white background, dark icon */
.video-fullscreen-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    color: #222222;
    transition: background 0.2s ease, border-color 0.2s ease;
    z-index: 10;
}

.video-fullscreen-btn:hover {
    background: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.8);
}

.video-fullscreen-btn .fullscreen-icon {
    width: 16px;
    height: 16px;
}

/* Ensure video container is positioned for absolute button */
.cs-design-strategy-video {
    position: relative;
}

/* ==================== LINTER VIDEO PASSWORD OVERLAY ==================== */
/* Password protection overlay for the Design System Linter video */
.cs-linter-password-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(34, 34, 34, 0.95);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hide overlay when authenticated */
.cs-design-strategy-video--unlocked .cs-linter-password-overlay {
    opacity: 0;
    pointer-events: none;
}

.cs-linter-password-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cs-linter-password-field {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

.cs-linter-password-field.shake {
    animation: cs-field-shake 0.5s ease;
}

@keyframes cs-field-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.cs-linter-password-input {
    width: 180px;
    height: 36px;
    padding: 0 12px;
    border: none;
    background: transparent;
    font-family: 'Input', monospace;
    font-size: 13px;
    color: #222222;
    outline: none;
}

.cs-linter-password-input::placeholder {
    color: #999999;
}

.cs-linter-password-submit {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #222222;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    position: relative;
}

.cs-linter-password-submit:hover {
    background: #333333;
    transform: scale(1.05);
}

.cs-linter-password-submit .icon-arrow,
.cs-linter-password-submit .icon-check {
    position: absolute;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cs-linter-password-submit .icon-arrow {
    opacity: 1;
    transform: translateX(0);
}

.cs-linter-password-submit .icon-check {
    opacity: 0;
    transform: scale(0.5);
}

.cs-linter-password-submit.success {
    background: #00B624;
}

.cs-linter-password-submit.success .icon-arrow {
    opacity: 0;
    transform: translateX(4px);
}

.cs-linter-password-submit.success .icon-check {
    opacity: 1;
    transform: scale(1);
}

.cs-linter-password-error {
    font-family: 'Input', monospace;
    font-size: 12px;
    color: #ffffff;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cs-linter-password-error.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: Adjust input width */
@media (max-width: 768px) {
    .cs-linter-password-input {
        width: 140px;
    }
}

/* QA Framework: Extra spacing before Future-Proofing section */
/* Desktop and Tablet - more distance from Triage Component section */
.cs-design-strategy-section {
    margin-top: 80px;
}

/* Reduce gap between consecutive design strategy sections */
.cs-design-strategy-section+.cs-design-strategy-section {
    margin-top: -160px;
}

/* Content wrapper for design strategy section  */
.cs-design-strategy-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Feature header within design strategy - match typical section spacing */
.cs-design-strategy-content .cs-feature-header {
    margin-bottom: 80px;
}

/* When body text follows the label, remove the extra label margin */
.cs-design-strategy-content .cs-feature-header+.cs-diagram-text {
    margin-top: -56px;
    /* 80px - 24px = 56px reduction to get normal 24px gap */
}

/* Body text within design strategy - bottom padding before video */
.cs-design-strategy-content .cs-diagram-text {
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .cs-design-strategy-section {
        margin-top: 60px;
    }
}

@media (max-width: 768px) {
    .cs-design-strategy-section {
        margin-top: 40px;
    }

    /* Reset negative margin on mobile - use normal section spacing */
    .cs-design-strategy-section+.cs-design-strategy-section {
        margin-top: 40px;
    }

    /* Mobile: Reduce label-to-content gap */
    .cs-design-strategy-content .cs-feature-header {
        margin-bottom: 40px;
    }

    /* Mobile: Adjust negative margin when body text follows label */
    .cs-design-strategy-content .cs-feature-header+.cs-diagram-text {
        margin-top: -16px;
        /* 40px - 24px = 16px reduction to get normal 24px gap */
    }

    /* Hide empty grid column on mobile */
    .cs-design-strategy-section .cs-grid-title-overview>div:first-child:empty {
        display: none;
    }
}

/* ==================== PROJECT NAVIGATION ==================== */
/* Navigation buttons between case studies - aligned with cs-nav-btn styling */
.cs-project-nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.cs-project-nav-btn {
    flex: 1;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 24px 32px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
}

.cs-project-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

.cs-project-nav-btn:active {
    transform: translateY(0);
}

.cs-project-nav-btn--prev {
    align-items: flex-start;
    text-align: left;
}

.cs-project-nav-btn--next {
    text-align: right;
    align-items: flex-end;
}

.cs-project-nav-direction {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.cs-project-nav-title {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
}

/* Mobile: Match cs-nav-btn responsive behavior */
@media (max-width: 768px) {
    .cs-project-nav {
        gap: 12px;
    }

    .cs-project-nav-btn {
        height: 70px;
        padding: 16px;
    }

    .cs-project-nav-direction {
        font-size: 10px;
    }

    .cs-project-nav-title {
        font-size: 14px;
    }
}

/* ==========================================================================
   QA FRAMEWORK PAGE STYLES
   ========================================================================== 
   Extracted from qa-framework.html inline styles
   These styles are specific to the QA Framework case study page
   ========================================================================== */
/* ==================== TRIAGE TOOL COMPONENT ==================== */
/* Design System: Figma Node 504:7194 - Card - Defect Trial Tool */

/* CSS Custom Properties - Design Tokens from Figma */
.triage-card {
    --triage-bg-card: #191919;
    --triage-bg-field: #222222;
    --triage-border: #6e6e6e;
    --triage-border-width: 0.75px;
    --triage-text-label: #b2b2b2;
    --triage-text-placeholder: #6e6e6e;
    --triage-text-white: #ffffff;
    --triage-text-offwhite: #f8f9fa;
    --triage-badge-bg: rgba(110, 110, 110, 0.15);
    --triage-accent: #7ebb1c;
    --triage-hover-bg: #2a2a2a;
    --triage-hover-border: #8e8e8e;
}

/* ==================== PLAYGROUND + TRIAGE LAYOUT ==================== */
/* Full-width layout: Playground fills remaining space, Triage Tool fixed width */
.cs-grid-feature--triage {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

/* Content row above components */
.cs-triage-content-row {
    width: 100%;
}

/* Components row - full width */
.cs-triage-components-row {
    display: flex;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

/* Triage Tool Wrapper - Fixed width on right */
.cs-triage-tool-wrapper {
    flex-shrink: 0;
}

/* ==================== DEFECT PLAYGROUND COMPONENT ==================== */
/* Fills remaining width, matches triage tool height */
.playground-card {
    flex: 1;
    min-width: 0;
    background: var(--triage-bg-card, #191919);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 16px;
    box-sizing: border-box;
    font-family: 'Neue Haas Unica', sans-serif;
}

/* Playground Header Section */
/* Figma: horizontal padding only */
.playground-header-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 24px;
}

.playground-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 32px;
}

/* Header CTAs Container - right-aligned */
.playground-header-ctas {
    display: flex;
    gap: 8px;
    align-items: center;
}

.playground-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 16px;
    color: #ffffff;
    /* Force white - playground has dark background */
    margin: 0;
}

/* Header CTAs Container - merged with positioning above */

/* CTA Buttons in Header */
.playground-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    background: #222222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Force pointer cursor on all CTA descendants */
.playground-cta,
.playground-cta * {
    cursor: pointer;
}

/* All elements in upload CTA inherit pointer cursor */
.playground-cta--upload,
.playground-cta--upload * {
    cursor: pointer;
}

.playground-cta:hover {
    border-color: #8e8e8e;
    background: #2a2a2a;
}

.playground-cta.active {
    border-color: #a2e633;
    background: rgba(162, 230, 51, 0.1);
}

.playground-cta-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    /* Force white - playground has dark background */
    color: #ffffff;
}

.playground-cta-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Force white - playground has dark background */
    color: #ffffff;
}

.playground-cta-icon svg {
    width: 100%;
    height: 100%;
}

/* Ensure cursor pointer on all SVG elements within CTAs */
.playground-cta svg,
.playground-cta svg *,
.playground-cta path,
.playground-cta rect,
.playground-cta g {
    cursor: pointer;
    pointer-events: none;
    /* Let parent handle pointer events */
}

/* Figma: Design icon has white border box around upload icon */
.playground-cta-icon--boxed {
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 2px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playground-cta-icon--boxed svg {
    width: auto;
    height: auto;
}

/* Upload CTA specific styling */
.playground-cta--upload {
    position: relative;
    cursor: pointer;
}

/* File input - completely hidden, label handles click */
.playground-cta--upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tooltip styles */
.playground-cta-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2c;
    border: 1px solid #6e6e6e;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 14px;
    color: #b2b2b2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 100;
}

.playground-cta-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #6e6e6e;
}

.playground-cta-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2c2c2c;
    margin-top: -1px;
}

.playground-cta--upload:hover .playground-cta-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Toggle - Split/Focused View */
.playground-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: #222222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    position: relative;
}

.playground-toggle-slider {
    position: absolute;
    top: 2px;
    height: calc(100% - 4px);
    background: rgba(162, 230, 51, 0.1);
    border: 0.75px solid #a2e633;
    border-radius: 4px;
    transition: left 0.25s ease, width 0.25s ease;
    pointer-events: none;
    z-index: 0;
}

.playground-toggle-option {
    display: flex;
    width: 98px;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border: 0.75px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--primary-text);
    /* Design system primary text color */
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
    transition: color 0.15s ease;
    position: relative;
    z-index: 1;
}

.playground-toggle-option:hover {
    color: var(--primary-text);
    /* Design system primary text color */
}

/* Separator Line */
.playground-separator {
    width: 100%;
    height: 1px;
    background: #6e6e6e;
}

/* Canvas Container */
.playground-canvas-wrapper {
    flex: 1;
    padding: 0 24px 24px 24px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.playground-canvas {
    width: 100%;
    height: 100%;
    background: #222222;
    border-radius: 8px;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
}

/* Canvas image styling - top-right aligned, absolutely positioned so it doesn't resize container */
.playground-canvas-image {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: top right;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.playground-canvas-image.visible {
    opacity: 1;
}

/* ==================== COMPARISON SLIDER VIEW ==================== */
/* Overlay comparison with draggable divider */

.playground-canvas-split {
    position: relative;
    width: 100%;
    height: 100%;
    background: #222222;
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
}

/* Both layers fill the container */
.playground-compare-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Design is the base layer (bottom) - clipped from the right */
.playground-compare-layer--design {
    z-index: 1;
    clip-path: inset(0 50% 0 0);
    /* Initially show left 50% */
}

/* Development overlays - clipped from the left */
.playground-compare-layer--development {
    z-index: 2;
    clip-path: inset(0 0 0 50%);
    /* Initially show right 50% */
}

/* Images fill their layers */
.playground-compare-image {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}

.playground-compare-image.visible {
    opacity: 1;
    display: block;
}

/* Draggable slider line */
.playground-compare-slider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #7ebb1c;
    cursor: ew-resize;
    z-index: 10;
    transform: translateX(-50%);
    transition: background 0.15s ease;
}

.playground-compare-slider:hover,
.playground-compare-slider.dragging {
    background: #a2e633;
}

/* Slider handle - rectangular with green styling and solid background */
.playground-compare-slider-arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: #2a3a1f;
    /* Solid dark green to hide divider line */
    border: 0.75px solid #7ebb1c;
    border-radius: 4px;
    cursor: ew-resize;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.playground-compare-slider:hover .playground-compare-slider-arrows,
.playground-compare-slider.dragging .playground-compare-slider-arrows {
    background: #354a26;
    /* Slightly brighter on hover */
    border-color: #a2e633;
}

.playground-compare-slider-arrows svg {
    width: 8px;
    height: 8px;
    color: #7ebb1c;
    transition: color 0.15s ease;
}

.playground-compare-slider:hover .playground-compare-slider-arrows svg,
.playground-compare-slider.dragging .playground-compare-slider-arrows svg {
    color: #a2e633;
}

/* Labels container - uses flexbox to spread controls */
.playground-compare-labels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 15;
    pointer-events: none;
    box-sizing: border-box;
}

/* Control panel for each side - fixed width to prevent layout shift on hover */
.playground-compare-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
    flex-shrink: 0;
    min-width: 80px;
    /* Fixed width to prevent shift when labels appear */
}

.playground-compare-controls--design {
    align-items: flex-start;
}

.playground-compare-controls--development {
    align-items: flex-end;
}

/* Development widget right-alignment */
.playground-compare-controls--development .playground-control-widget {
    align-items: flex-end;
}

.playground-compare-controls--development .playground-control-group {
    align-items: flex-end;
}

.playground-compare-controls--development .playground-control-btn {
    flex-direction: row-reverse;
}

.playground-compare-controls--development .playground-control-slider-row {
    justify-content: flex-end;
}

/* Canvas Control Widget - container for individual icon buttons */
.playground-control-widget {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: fit-content;
}

/* Individual control button row */
.playground-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 24px;
    padding: 0 4px;
    background: #222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    cursor: pointer;
    width: fit-content;
    position: relative;
    box-sizing: border-box;
    transition: border-color 0.25s ease-out, background 0.25s ease-out, gap 0.25s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Force white text - dark background */
    color: #ffffff;
}

.playground-control-btn:hover {
    border-color: #949494;
    background: #2a2a2a;
}

.playground-control-widget:hover .playground-control-btn {
    gap: 4px;
}

/* Icon inside control button */
.playground-control-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.playground-control-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* Scale icon slightly smaller */
.playground-control-btn[data-control="scale"] .playground-control-btn-icon svg {
    width: 12px;
    height: 12px;
}

/* Label inside control button - hidden by default, shown on hover */
.playground-control-btn-label {
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 10px;
    line-height: 10px;
    /* Force white - dark background */
    color: #ffffff;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.25s ease-out, opacity 0.2s ease-out;
}

/* Show labels when widget is hovered */
.playground-control-widget:hover .playground-control-btn-label {
    max-width: 80px;
    opacity: 1;
}

/* Show label when button is selected */
.playground-control-btn.selected {
    gap: 4px;
}

.playground-control-btn.selected .playground-control-btn-label {
    max-width: 80px;
    opacity: 1;
}

/* X button for upload - hidden by default */
.playground-control-close {
    display: none;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    padding: 0;
    background: #222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    cursor: pointer;
    color: #6e6e6e;
    pointer-events: auto;
    box-sizing: border-box;
    position: relative;
    z-index: 20;
    transition: border-color 0.25s ease-out, color 0.25s ease-out, background 0.25s ease-out;
}

.playground-control-close:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #222;
}

.playground-control-close svg {
    width: 16px;
    height: 16px;
}

.playground-control-close.visible {
    display: flex;
}

/* Slider row for scale/opacity */
.playground-control-slider-row {
    display: none;
    align-items: center;
    gap: 4px;
}

.playground-control-slider-row.visible {
    display: flex;
}

/* Slider box inside row - same height as icon buttons */
.playground-control-slider-box {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 4px;
    background: #222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    box-sizing: border-box;
}

.playground-slider-input {
    width: 24px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.playground-slider-input::-webkit-slider-track {
    height: 1px;
    background: #6e6e6e;
    border-radius: 1px;
}

.playground-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
    margin-top: -2px;
}

.playground-slider-input::-moz-range-track {
    height: 1px;
    background: #6e6e6e;
    border-radius: 1px;
}

.playground-slider-input::-moz-range-thumb {
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
}

.playground-slider-value {
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 8px;
    line-height: 10px;
    color: var(--primary-text);
    /* Design system primary text color */
    white-space: nowrap;
    background: transparent;
    border: none;
    outline: none;
    width: 28px;
    text-align: right;
    padding: 0;
    margin: 0;
}

/* Control container for each row with slider */
.playground-control-group {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    width: fit-content;
}

/* Row within controls */
.playground-compare-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.playground-compare-controls--development .playground-compare-controls-row {
    flex-direction: row-reverse;
}

/* Hidden file input - full coverage for better clickability */
.playground-control-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    font-size: 0;
    cursor: pointer !important;
}

/* Ensure upload label shows pointer cursor */
label.playground-control-btn {
    cursor: pointer !important;
}

/* Make icon and label not block pointer events - let file input handle them */
label.playground-control-btn .playground-control-btn-icon,
label.playground-control-btn .playground-control-btn-label {
    pointer-events: none;
}

/* Center Annotate button - absolutely positioned in center */
.playground-compare-annotate {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: auto;
    z-index: 20;
}

.playground-annotate-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 4px 8px;
    background: #222222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--primary-text);
    /* Design system primary text color */
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.playground-annotate-btn:hover {
    background: #2a2a2a;
    border-color: #8a8a8a;
}

.playground-annotate-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1px dashed #6e6e6e;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 300;
    color: #6e6e6e;
    line-height: 1;
    transition: all 0.2s ease;
}

.playground-annotate-btn:hover .playground-annotate-plus {
    border-color: #7ebb1c;
    color: #7ebb1c;
    border-style: dashed;
}

.playground-annotate-btn.active .playground-annotate-plus {
    background: rgba(126, 187, 28, 0.2);
    border-color: #7ebb1c;
    border-style: solid;
    color: #7ebb1c;
}

/* Annotations layer - above images and slider */
.playground-annotations-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
}

/* Individual annotation marker - white border default, green when selected */
.playground-annotation-marker {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #2a2a2a;
    border: 0.75px solid #ffffff;
    border-radius: 4px;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--primary-text);
    /* Design system primary text color */
    cursor: grab;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    z-index: 101;
    user-select: none;
    line-height: 1.1;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.playground-annotation-marker:active {
    cursor: grabbing;
}

/* Selected state - green styling */
.playground-annotation-marker.selected {
    background: rgba(42, 58, 31, 0.85);
    border-color: #7ebb1c;
    color: #7ebb1c;
}

/* Severity-based playground annotation marker colors */
.playground-annotation-marker.severity-low {
    background: rgba(34, 197, 94, 0.2);
    border-color: #4ade80;
    color: #4ade80;
}

.playground-annotation-marker.severity-medium {
    background: rgba(234, 179, 8, 0.2);
    border-color: #fbbf24;
    color: #fbbf24;
}

.playground-annotation-marker.severity-high {
    background: rgba(239, 68, 68, 0.2);
    border-color: #f87171;
    color: #f87171;
}

.playground-annotation-marker.severity-critical {
    background: rgba(168, 85, 247, 0.2);
    border-color: #a855f7;
    color: #a855f7;
}

.playground-annotation-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    border: 0.75px solid #6e6e6e;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    pointer-events: none;
}

.playground-annotation-close svg {
    width: 6px;
    height: 6px;
    color: #6e6e6e;
    transition: color 0.15s ease;
}

.playground-annotation-marker:hover .playground-annotation-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Close button keeps default color on hover */

.playground-annotation-marker.new {
    animation: annotationPop 0.4s ease-out;
}

@keyframes annotationPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.playground-annotation-marker:hover {
    transform: translate(-50%, -50%) scale(1.15);
    background: #3a3a3a;
    border-color: #ffffff;
    color: var(--primary-text);
    /* Design system primary text color */
}

.playground-annotation-marker.selected:hover {
    background: rgba(53, 74, 38, 0.9);
    border-style: solid;
    border-color: #7ebb1c;
    color: #7ebb1c;
}

/* ===== FOCUSED VIEW STYLES ===== */
/* When focused view is active, show minimal controls in top-right corner */
.playground--focused .playground-compare-controls--design {
    display: none !important;
}

.playground--focused .playground-compare-slider {
    display: none !important;
}

.playground--focused .playground-compare-layer--design {
    display: none !important;
}

.playground--focused .playground-compare-layer--development {
    clip-path: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

.playground--focused .playground-compare-labels {
    justify-content: space-between;
}

.playground--focused .playground-compare-controls--development {
    position: absolute;
    top: 8px;
    right: 8px;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.playground--focused .playground-compare-controls--development .playground-compare-label-text {
    display: none;
}

.playground--focused .playground-control-widget {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.playground--focused .playground-control-group {
    flex-direction: row;
    align-items: center;
}

/* Hide focused upload by default (in split view) */
.playground-compare-upload--focused {
    display: none !important;
}

/* In focused view, hide split uploads and show centered focused upload */
.playground--focused .playground-compare-upload--split {
    display: none !important;
}

.playground--focused .playground-compare-upload--focused {
    display: flex !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: auto;
}

/* ===== END FOCUSED VIEW STYLES ===== */

.playground-compare-label-text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 4px 8px;
    background: #1a1a1a;
    border: 0.75px solid #4a4a4a;
    border-radius: 4px;
    font-size: 12px;
    color: #6e6e6e;
    line-height: 16px;
    box-sizing: border-box;
}

/* Remove button styling */
.playground-compare-remove {
    display: none;
    padding: 4px;
    background: #222222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 10px;
    line-height: 10px;
    color: #b2b2b2;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.playground-compare-remove:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.playground-compare-remove.visible {
    display: block;
}

/* Control icons - Position/Scale and Luminosity - always visible */
.playground-control-icon {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-text);
    /* Design system primary text color */
    opacity: 0.6;
    transition: opacity 0.25s ease-out, transform 0.2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.playground-control-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.playground-control-icon:hover {
    opacity: 1;
}

.playground-control-icon.active {
    opacity: 1;
}

/* Control slider container - hidden by default, visible when icon selected */
.playground-control-slider {
    display: none;
    align-items: center;
    gap: 8px;
}

.playground-control-slider.visible {
    display: flex;
}

/* Custom range input styling */
.playground-range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 18px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.playground-range-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: #6e6e6e;
    border-radius: 1px;
}

.playground-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    margin-top: -4px;
    cursor: pointer;
}

.playground-range-input::-moz-range-track {
    width: 100%;
    height: 2px;
    background: #6e6e6e;
    border-radius: 1px;
}

.playground-range-input::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.playground-range-value {
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 10px;
    color: #b2b2b2;
    min-width: 32px;
    text-align: right;
}

/* Canvas Upload CTA (inside canvas) */
.playground-canvas-upload-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    background: #222222;
    border: 0.75px solid #6e6e6e;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.playground-canvas-upload-cta:hover {
    border-color: #8e8e8e;
    background: #2a2a2a;
}

.playground-canvas-upload-cta input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.playground-canvas-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.playground-canvas-upload-icon svg {
    width: 14px;
    height: 14px;
}

.playground-canvas-upload-text {
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 10px;
    line-height: 10px;
    color: var(--primary-text);
    /* Design system primary text color */
}

/* X Close button - hidden by default, shown when file is uploaded */
.playground-canvas-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6e6e6e;
    transition: color 0.15s ease;
}

.playground-canvas-close.visible {
    display: flex;
}

.playground-canvas-close:hover {
    color: #ef4444;
}

.playground-canvas-close svg {
    width: 10px;
    height: 10px;
}

/* Old slider input styles removed - using new ones from control widget CSS */

.playground-slider-input-old {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 5px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.playground-slider-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    background: #a9a9a9;
    border-radius: 0.5px;
}

.playground-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    margin-top: -2px;
    cursor: pointer;
}

.playground-slider-input::-moz-range-track {
    width: 100%;
    height: 1px;
    background: #a9a9a9;
    border-radius: 0.5px;
}

.playground-slider-input::-moz-range-thumb {
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* Empty state - upload prompts positioned on left and right */
.playground-compare-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
}

.playground-compare-upload {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 16px;
    width: 140px;
    height: 120px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    color: #6e6e6e;
    font-size: 10px;
    text-align: center;
    pointer-events: auto;
    box-sizing: border-box;
}

/* Design upload on left - closer to center */
.playground-compare-upload[data-compare-upload="design"] {
    left: 25%;
    transform: translate(-50%, -50%);
}

/* Development upload on right - closer to center */
.playground-compare-upload[data-compare-upload="development"] {
    right: 25%;
    transform: translate(50%, -50%);
}

.playground-compare-upload:hover {
    background: rgba(110, 110, 110, 0.1);
    border-color: rgba(110, 110, 110, 0.3);
}

.playground-compare-upload-icon {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

.playground-compare-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* Hide individual upload when that image is uploaded */
.playground-compare-upload.hidden {
    display: none;
}

/* Empty state - centered in canvas */
.playground-canvas-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6e6e6e;
    font-size: 12px;
    text-align: center;
}

.playground-canvas-empty-icon {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

/* ==================== CARD CONTAINER ==================== */
/* Figma: 367px × 594px, bg #191919, radius 8px, padding 16/16/24/16 */
.triage-card {
    width: 367px;
    height: 100%;
    background: var(--triage-bg-card);
    border-radius: 8px;
    padding: 16px 16px 24px 16px;
    font-family: 'Neue Haas Unica', sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Ensure click events work on all child elements */
    pointer-events: auto;
}

/* ==================== HEADER SECTION ==================== */
/* Figma: flex, no separator line, margin-bottom 24px */
.triage-header-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
}

.triage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Figma: 20px, line-height 16px, #fff */
.triage-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 16px;
    color: var(--triage-text-white);
    margin: 0;
    letter-spacing: 0;
}

/* ==================== CONTENT LAYOUT (Two Column) ==================== */
/* New layout with annotation sidebar on left, form on right */
.triage-content-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    flex: 1;
}

/* ==================== ANNOTATION SIDEBAR ==================== */
.triage-annotation-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
}

/* Index label for annotation sidebar */
.triage-annotation-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: #222;
    border: 0.75px solid #6e6e6e;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 10px;
    line-height: 10px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.triage-annotation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    background: #222;
    border: 0.75px solid #6e6e6e;
    border-radius: 0 0 4px 4px;
    padding: 8px;
    height: 100%;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.triage-annotation-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Annotation badge in sidebar - white border default, green when selected */
.triage-annotation-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #2a2a2a;
    border: 1px solid #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.triage-annotation-badge--active {
    background: rgba(126, 187, 28, 0.2);
    border-color: #7ebb1c;
}

.triage-annotation-badge:hover {
    background: #3a3a3a;
    border-color: #ffffff;
}

.triage-annotation-badge--active:hover {
    background: rgba(126, 187, 28, 0.3);
    border-color: #7ebb1c;
}

.triage-annotation-number {
    font-size: 12px;
    line-height: 15px;
    color: var(--primary-text);
    /* Design system primary text color */
    font-weight: 500;
}

.triage-annotation-badge--active .triage-annotation-number {
    color: #7ebb1c;
}

/* Add annotation button */
.triage-annotation-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px dashed #6e6e6e;
    background: transparent;
    color: #6e6e6e;
    cursor: pointer;
    transition: all 0.15s ease;
}

.triage-annotation-add:hover {
    border-color: #7ebb1c;
    color: #7ebb1c;
}

/* ==================== FORM CONTAINER ==================== */
/* Figma: flex-col, gap 16px */
.triage-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    flex: 1;
    min-width: 0;
    /* Ensure click events propagate to children */
    pointer-events: auto;
}

/* Animation for form fields when annotation is selected */
@keyframes fadeInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Flash animation for already-selected annotation */
@keyframes annotationFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(126, 187, 28, 0.8);
    }

    50% {
        box-shadow: 0 0 8px 4px rgba(126, 187, 28, 0.6);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(126, 187, 28, 0);
    }
}

.annotation-flash {
    animation: annotationFlash 0.4s ease-out;
}

.triage-form.animate-in {
    animation: fadeInFromLeft 0.3s ease-out;
}

.triage-form.animate-in .triage-field {
    animation: fadeInFromLeft 0.3s ease-out;
    animation-fill-mode: both;
}

.triage-form.animate-in .triage-field:nth-child(1) {
    animation-delay: 0ms;
}

.triage-form.animate-in .triage-field:nth-child(2) {
    animation-delay: 30ms;
}

.triage-form.animate-in .triage-field:nth-child(3) {
    animation-delay: 60ms;
}

.triage-form.animate-in .triage-field:nth-child(4) {
    animation-delay: 90ms;
}

.triage-form.animate-in .triage-field:nth-child(5) {
    animation-delay: 120ms;
}

.triage-form.animate-in .triage-field:nth-child(6) {
    animation-delay: 150ms;
}

.triage-form.animate-in .triage-field:nth-child(7) {
    animation-delay: 180ms;
}

/* Links section wrapper */
.triage-links-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    gap: 0;
}

.triage-links-header--right {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 0;
}

/* ==================== ROW LAYOUTS ==================== */
.triage-row {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-start;
}

/* ==================== FIELD COMPONENT BASE ==================== */
.triage-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.triage-field--full {
    width: 100%;
}

/* Annotation field: shrink-0, width auto (content-based) */
.triage-field--annotation {
    flex-shrink: 0;
}

/* Severity field: flex 1, fills remaining space */
.triage-field--severity {
    flex: 1 1 0;
    min-width: 0;
}

.triage-field--author {
    flex: 1 1 0;
    min-width: 0;
}

/* ==================== LABELS ==================== */
/* Figma: bg #222, border 0.75px #6e6e6e (NO bottom), radius 4px 4px 0 0, padding 4px */
.triage-label {
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 4px;
    font-size: 10px;
    font-weight: 400;
    line-height: 10px;
    color: #fff;
    box-sizing: border-box;
}

/* ==================== INPUT WRAPPER (Generic Field) ==================== */
/* Figma: bg #222, border 0.75px, radius 0 4px 4px 4px (top-left connects to label) */
.triage-input-wrapper {
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 0 4px 4px 4px;
    padding: 8px 8px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Annotation field: width 58px, padding 4px 8px, NO top border radius (connects to label) */
.triage-field--annotation .triage-input-wrapper {
    width: 58px;
    padding: 4px 8px;
    border-radius: 0 0 4px 4px;
}

/* Links field: bg #191919 (card bg, not field bg) */
.triage-input-wrapper--links {
    background: var(--triage-bg-card);
}

/* ==================== ANNOTATION BADGE ==================== */
/* Matches playground annotation marker style: 20×20, square, radius 4px */
/* Default: white border, white text, dark grey background */
/* Selected: green border, green text, green-tinted background */
.triage-annotation-badge {
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    background: #2a2a2a;
    border: 1px solid #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.triage-annotation-badge--active {
    background: rgba(126, 187, 28, 0.2);
    border-color: #7ebb1c;
}

.triage-annotation-badge--active .triage-annotation-number {
    color: #7ebb1c;
}

/* Severity-based annotation badge colors */
.triage-annotation-badge.severity-low {
    background: rgba(34, 197, 94, 0.25);
    border-color: #4ade80;
}

.triage-annotation-badge.severity-low .triage-annotation-number {
    color: #4ade80;
}

.triage-annotation-badge.severity-medium {
    background: rgba(234, 179, 8, 0.25);
    border-color: #fbbf24;
}

.triage-annotation-badge.severity-medium .triage-annotation-number {
    color: #fbbf24;
}

.triage-annotation-badge.severity-high {
    background: rgba(239, 68, 68, 0.25);
    border-color: #f87171;
}

.triage-annotation-badge.severity-high .triage-annotation-number {
    color: #f87171;
}

.triage-annotation-badge.severity-critical {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
}

.triage-annotation-badge.severity-critical .triage-annotation-number {
    color: #a855f7;
}

/* Annotation number - white default, green when selected */
.triage-annotation-number {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--primary-text);
    /* Design system primary text color */
}

/* ==================== DROPDOWN COMPONENT ==================== */
/* Figma: bg #222, border 0.75px, radius 0 4px 4px 4px, padding 8px, gap 10px */
.triage-dropdown {
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 0 4px 4px 4px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    /* Ensure clickability - override any inherited pointer-events */
    pointer-events: auto;
    z-index: 10;
    /* Fixed height to prevent layout shift when severity dot appears on selection */
    min-height: 36px;
}

.triage-dropdown:hover {
    border-color: var(--triage-hover-border);
    background: var(--triage-hover-bg);
}

/* Active state: green border, bottom corners become 0 to connect to options */
.triage-dropdown.active {
    border-color: var(--triage-accent);
    border-radius: 0 4px 0 0;
    /* Ensure active dropdown and its options appear above other form fields */
    z-index: 200;
}

/* Figma: 12px, line-height 16px, #b2b2b2 (label color) */
.triage-dropdown-text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--triage-text-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.triage-dropdown-text.has-value {
    color: var(--triage-text-offwhite);
}

/* ==================== DROPDOWN SELECTED VALUE DISPLAY ==================== */
/* Container for icon/dot + text when value is selected */
.triage-dropdown-selected {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.triage-dropdown-selected.visible {
    display: flex;
}

/* Severity dot container - matches icon width for alignment */
.triage-severity-dot-container {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Severity dot: 12×12 circle */
.triage-severity-dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--triage-border);
    border: 1px solid;
    box-sizing: border-box;
}

.triage-severity-dot--low {
    background: rgba(34, 197, 94, 0.2);
    border-color: #4ade80;
}

.triage-severity-dot--medium {
    background: rgba(234, 179, 8, 0.2);
    border-color: #fbbf24;
}

.triage-severity-dot--high {
    background: rgba(239, 68, 68, 0.2);
    border-color: #f87171;
}

.triage-severity-dot--critical {
    background: rgba(168, 85, 247, 0.2);
    border-color: #a855f7;
}

/* Defect type icon placeholder */
.triage-type-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Force white since triage component always has dark background */
    color: #ffffff;
}

.triage-type-icon svg {
    width: 100%;
    height: 100%;
}

/* Selected value text */
.triage-selected-text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--triage-text-offwhite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Figma: Chevron 8×6, px 4px, color #6e6e6e */
.triage-dropdown-chevron {
    width: 8px;
    height: 6px;
    flex-shrink: 0;
    color: var(--triage-text-placeholder);
    transition: transform 0.2s ease;
}

.triage-dropdown.active .triage-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--triage-accent);
}

/* Dropdown Options Panel */
.triage-dropdown-options {
    position: absolute;
    top: calc(100% + var(--triage-border-width));
    left: calc(-1 * var(--triage-border-width));
    right: calc(-1 * var(--triage-border-width));
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-accent);
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 100;
    display: none;
    /* Show max 6 items with scroll */
    max-height: calc(6 * 34px);
    overflow-y: auto;
    /* Prevent scroll from bubbling to page */
    overscroll-behavior: contain;
}

/* Dropdown scrollbar styling */
.triage-dropdown-options::-webkit-scrollbar {
    width: 6px;
}

.triage-dropdown-options::-webkit-scrollbar-track {
    background: transparent;
}

.triage-dropdown-options::-webkit-scrollbar-thumb {
    background: #6e6e6e;
    border-radius: 3px;
}

.triage-dropdown.active .triage-dropdown-options {
    display: block;
}

.triage-dropdown-option {
    padding: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--triage-text-label);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.triage-dropdown-option:hover {
    background: var(--triage-hover-bg);
    color: var(--triage-text-white);
}

.triage-dropdown-option.selected {
    background: rgba(162, 230, 51, 0.1);
    color: var(--triage-accent);
}

/* Type icons in dropdown options */
.triage-dropdown-option .triage-type-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Force white since dropdown always has dark background */
    color: #ffffff;
}

.triage-dropdown-option .triage-type-icon svg {
    width: 100%;
    height: 100%;
}

.triage-dropdown-option:hover .triage-type-icon,
.triage-dropdown-option.selected .triage-type-icon {
    /* Force white since dropdown always has dark background */
    color: #ffffff;
}

/* ==================== TEXTAREA ==================== */
/* Figma: bg #222, border 0.75px, radius 0 4px 4px 4px, padding 8px */
.triage-textarea {
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 0 4px 4px 4px;
    padding: 8px;
    width: 100%;
    min-height: 72px;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--triage-text-white);
    resize: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.triage-textarea::placeholder {
    color: var(--triage-text-label);
}

.triage-textarea:hover {
    border-color: var(--triage-hover-border);
}

.triage-textarea:focus {
    outline: none;
    border-color: var(--triage-accent);
}

/* Minimal scrollbar for textarea */
.triage-textarea::-webkit-scrollbar {
    width: 4px;
}

.triage-textarea::-webkit-scrollbar-track {
    background: transparent;
}

.triage-textarea::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 2px;
}

.triage-textarea::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

.triage-textarea {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
}

/* ==================== TEXT INPUT ==================== */
.triage-input {
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 0 4px 4px 4px;
    padding: 8px;
    width: 100%;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--triage-text-white);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.triage-input::placeholder {
    color: var(--triage-text-label);
}

.triage-input:hover {
    border-color: var(--triage-hover-border);
}

.triage-input:focus {
    outline: none;
    border-color: var(--triage-accent);
}

/* ==================== BUTTONS ==================== */
/* Figma: bg #222, border 0.75px, radius 4px, padding 8px */
.triage-btn {
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 4px;
    padding: 8px;
    font-family: 'Neue Haas Unica', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--triage-text-white);
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.triage-btn:hover {
    background: var(--triage-hover-bg);
    border-color: var(--triage-hover-border);
}

.triage-btn:active {
    background: #333;
    border-color: var(--triage-accent);
}

/* Remove button: same as base */
.triage-btn--remove {
    padding: 8px;
}

/* Small buttons: padding 4px, font 10px */
.triage-btn--small {
    padding: 4px;
    font-size: 10px;
    line-height: 10px;
}

/* Add Link button: full width, height 36px, placeholder color */
.triage-btn--add-link {
    width: 100%;
    height: 36px;
    color: var(--triage-text-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
}

.triage-btn--add-link:hover {
    color: var(--triage-text-white);
}

/* Custom Tooltip - Work in Progress */
.wip-tooltip {
    position: relative;
}

.wip-tooltip::after {
    content: 'Work in progress';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    padding: 6px 10px;
    background: #2a2a2a;
    color: #e0e0e0;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid #3a3a3a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

.wip-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Primary button (Create Ticket / Sync) */
.triage-btn--primary {
    flex-shrink: 0;
    min-width: 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Subtle white transparent background to distinguish as CTA */
    background: rgba(255, 255, 255, 0.08);
}

.triage-btn--primary span {
    position: relative;
    z-index: 1;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.triage-btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(126, 187, 28, 0.15), rgba(126, 187, 28, 0.35));
    transition: none;
    pointer-events: none;
    z-index: 0;
}

.triage-btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
    transition: none;
    pointer-events: none;
    z-index: 0;
}

.triage-btn--primary.loading::before {
    animation: ticketProgressBar 0.5s ease-out forwards;
}

.triage-btn--primary.loading::after {
    animation: ticketProgressShine 0.5s ease-out forwards;
}

.triage-btn--primary.loading span {
    animation: ticketTextPulse 0.5s ease-out forwards;
}

.triage-btn--primary.complete span {
    animation: ticketTextReveal 0.3s ease-out forwards;
}

.triage-btn--primary.fade-out {
    animation: ticketFadeOut 0.4s ease-out forwards;
}

.triage-btn--primary.fade-out span {
    animation: ticketTextFadeOut 0.4s ease-out forwards;
}

@keyframes ticketProgressBar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes ticketProgressShine {
    0% {
        width: 0%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

@keyframes ticketTextPulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ticketTextReveal {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ticketFadeOut {
    0% {
        background-color: rgba(126, 187, 28, 0.15);
        border-color: #7ebb1c;
    }

    100% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: #4a4a4a;
    }
}

@keyframes ticketTextFadeOut {
    0% {
        opacity: 1;
        color: #7ebb1c;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        color: #e0e0e0;
        transform: translateY(-4px);
    }
}

/* ==================== LINKS HEADER ==================== */
.triage-links-header {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Gap between Links header (CTAs) and Links component */
.triage-links-header+.triage-field {
    margin-top: -8px;
}

/* ==================== LINK ITEM ==================== */
/* Figma: bg #222, border 0.75px, radius 4px, padding 8px, height 36px */
.triage-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 4px;
    padding: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.triage-link-item:hover {
    border-color: var(--triage-hover-border);
}

.triage-link-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.triage-link-logo svg {
    height: 16px;
    width: auto;
}

.triage-link-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.triage-link-remove:hover {
    background: rgba(255, 255, 255, 0.1);
}

.triage-link-remove:hover svg path {
    stroke: var(--triage-text-white);
}

/* ==================== STATUS GRID ==================== */
/* Figma: bg #191919, border 0.75px, radius 0 4px 4px 4px, padding 8px, gap 10px */
.triage-status-grid {
    display: flex;
    gap: 10px;
    background: var(--triage-bg-card);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 0 4px 4px 4px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* Figma: bg #222, border 0.75px, radius 4px, padding 8px, flex 1 */
.triage-status-option {
    flex: 1 1 0;
    min-width: 0;
    background: var(--triage-bg-field);
    border: var(--triage-border-width) solid var(--triage-border);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Status hover - green highlight */
.triage-status-option:hover {
    background: rgba(126, 187, 28, 0.1);
    border-color: rgba(126, 187, 28, 0.5);
}

/* Status active - green highlight */
.triage-status-option.active {
    background: rgba(126, 187, 28, 0.2);
    border-color: #7ebb1c;
}

/* Figma: icon 24×24, color #b2b2b2 */
.triage-status-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--triage-text-label);
    flex-shrink: 0;
}

.triage-status-icon svg {
    width: 100%;
    height: 100%;
}

/* Status icon colors - green on hover and active */
.triage-status-option:hover .triage-status-icon,
.triage-status-option.active .triage-status-icon {
    color: #7ebb1c;
}

/* Figma: 8px, line-height 10px, #b2b2b2 */
.triage-status-label {
    font-size: 9px;
    font-weight: 400;
    line-height: 10px;
    color: var(--triage-text-label);
    text-align: center;
    white-space: nowrap;
}

.triage-status-option.active .triage-status-label {
    color: var(--triage-text-white);
}

/* ==================== FOOTER ==================== */
.triage-footer {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    width: 100%;
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 1280px) {
    .cs-grid-feature--triage {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .playground-card {
        width: 100%;
        max-width: 782px;
        height: auto;
        min-height: 400px;
    }

    .cs-triage-tool-wrapper {
        position: relative;
        top: 0;
    }
}

@media (max-width: 900px) {
    .cs-grid-feature--triage {
        flex-direction: column;
        gap: 24px;
    }

    /* Stack components vertically at tablet */
    .cs-triage-components-row {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }

    .playground-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 350px;
    }

    .cs-triage-tool-wrapper {
        position: relative;
        top: 0;
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }

    .triage-card {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .triage-card {
        width: 100%;
    }

    .triage-status-grid {
        flex-wrap: wrap;
    }

    .triage-status-option {
        flex: 1 1 calc(50% - 5px);
        min-width: calc(50% - 5px);
    }

    .triage-row {
        flex-direction: column;
    }

    .triage-field--severity,
    .triage-field--annotation {
        width: 100%;
    }

    .triage-field--annotation .triage-input-wrapper {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==================== MOBILE PLAYGROUND LAYOUT ==================== */
/* Mobile: Stacked layout, scaled-down playground, focused view only */
@media (max-width: 767px) {

    /* Stack playground above triage tool */
    .cs-triage-components-row {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }

    /* Scaled-down playground for mobile */
    .playground-card {
        width: 100%;
        max-width: 100%;
        min-height: 280px;
        height: auto;
    }

    /* Mobile toggle: Hide toggle options, show "Focused view" label only */
    .playground-toggle {
        background: transparent;
        border: none;
        padding: 0;
    }

    .playground-toggle-slider {
        display: none !important;
    }

    /* Hide Split view option on mobile */
    .playground-toggle-option[data-view="split"] {
        display: none !important;
    }

    /* Style Focused view option as a disabled label (like Design/Development) */
    /* Height matches Delete CTA: padding 6px 10px + font-size 11px + line-height 16px */
    .playground-toggle-option[data-view="focused"] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 6px 10px;
        background: #1a1a1a;
        border: 0.75px solid #4a4a4a;
        border-radius: 4px;
        font-size: 11px;
        line-height: 16px;
        color: #6e6e6e;
        line-height: 16px;
        cursor: default;
        pointer-events: none;
    }

    /* Smaller header section padding */
    .playground-header-section {
        padding: 0 16px;
    }

    /* Smaller title */
    .playground-title {
        font-size: 16px;
    }

    /* Reduce canvas padding */
    .playground-canvas-wrapper {
        padding: 0 16px 16px 16px;
    }

    /* Taller canvas for more image space on mobile */
    .playground-canvas,
    .playground-canvas-split {
        min-height: 300px;
    }

    /* Scale down control widgets - MORE gap between icons */
    .playground-compare-controls {
        gap: 8px;
    }

    .playground-compare-label-text {
        font-size: 9px;
    }

    /* Increase gap between control buttons (Upload, Scale, Opacity) */
    .playground-control-widget {
        gap: 8px !important;
    }

    .playground-control-group {
        gap: 6px;
    }

    .playground-control-btn {
        height: 22px;
        padding: 4px 8px;
    }

    /* Match close button and slider box height to control btn */
    .playground-control-close {
        height: 22px;
        width: 22px;
    }

    .playground-control-slider-box {
        height: 22px;
    }

    .playground-control-icon {
        width: 10px;
        height: 10px;
    }

    .playground-control-text {
        font-size: 9px;
    }

    /* Move canvas controls to bottom-right on mobile */
    /* Expand labels container to full height so bottom positioning works */
    .playground--focused .playground-compare-labels {
        bottom: 0 !important;
        align-items: stretch !important;
    }

    /* Only move the control widget, keep Annotate button at top center */
    .playground--focused .playground-compare-controls--development {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        bottom: 8px !important;
        right: 8px !important;
        align-items: flex-end !important;
    }

    .playground--focused .playground-control-widget {
        align-items: flex-end !important;
    }

    /* Smaller annotate button */
    .playground-annotate-btn {
        padding: 6px 10px;
        gap: 6px;
    }

    .playground-annotate-text {
        font-size: 10px;
    }

    .playground-annotate-plus {
        width: 12px;
        height: 12px;
    }

    /* Smaller annotation markers */
    .playground-annotation-marker {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    /* Align triage tool wrapper to the left */
    .cs-triage-tool-wrapper {
        width: 100%;
        display: flex;
        justify-content: flex-start !important;
        align-items: flex-start;
    }

    /* Triage card - full width on mobile */
    .triage-card {
        width: 100%;
        max-width: 100%;
        /* Reduce padding on mobile */
        padding: 12px;
    }

    /* FIX: Remove any extra margins/padding from header section */
    .triage-header-section {
        padding: 0;
        margin-bottom: 16px;
    }

    /* FIX: Make header fill container width */
    .triage-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .triage-title {
        font-size: 16px;
    }

    /* Reduce body padding - already handled by card padding */
    .triage-body-section {
        padding: 0;
    }

    /* Change layout to single column on mobile */
    .triage-content-layout {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Annotation sidebar becomes horizontal field, first in form */
    .triage-annotation-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: -1 !important;
        /* Move to first position */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* Match .triage-field alignment */
        flex-shrink: 1 !important;
        flex-grow: 1 !important;
    }

    /* Index label styled exactly like other field labels - left-aligned, hugging content */
    .triage-annotation-label {
        padding: 6px 10px !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 10px !important;
        border-radius: 4px 4px 0 0 !important;
        border-bottom: none !important;
        background: var(--triage-bg-field) !important;
        border: var(--triage-border-width) solid var(--triage-border) !important;
        border-bottom: none !important;
        color: #fff !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        /* Hug content instead of full width */
        align-items: center !important;
        justify-content: flex-start !important;
        /* Left-align */
        width: auto !important;
        /* Hug content */
    }

    /* Annotation list becomes horizontal, matches dropdown styling, horizontally scrollable */
    .triage-annotation-list {
        flex-direction: row !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        border-radius: 0 4px 4px 4px !important;
        height: auto !important;
        min-height: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        background: var(--triage-bg-field) !important;
        border: var(--triage-border-width) solid var(--triage-border) !important;
        width: 100% !important;
        /* Full width like other fields */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        /* Smooth scrolling on iOS */
        scroll-behavior: smooth !important;
        position: relative !important;
    }

    /* Hide scrollbar for cleaner look */
    .triage-annotation-list::-webkit-scrollbar {
        display: none !important;
    }

    .triage-annotation-list {
        -ms-overflow-style: none !important;
        /* IE and Edge */
        scrollbar-width: none !important;
        /* Firefox */
    }

    /* Add spacing between Index field and next field (matches .triage-form gap: 16px) */
    .triage-annotation-sidebar {
        margin-bottom: 16px !important;
    }

    /* Annotation sidebar - scale down index badges, prevent shrinking */
    .triage-annotation-badge {
        width: 22px;
        height: 22px;
        font-size: 10px;
        flex-shrink: 0 !important;
        /* Prevent badges from shrinking when scrolling */
    }

    /* Add button stays in normal flow (last in list) */
    .triage-annotation-add {
        flex-shrink: 0 !important;
    }

    /* Form fields fill width */
    .triage-form {
        width: 100%;
    }

    /* FIX: Remove gap from fields - labels should connect to inputs */
    .triage-field {
        gap: 0;
        width: 100%;
    }

    /* FIX: Match label font size and padding to Index label */
    .triage-label {
        font-size: 10px;
        padding: 6px 10px;
    }

    /* Hide links section on mobile */
    .triage-links-section {
        display: none !important;
    }

    /* Triage footer - stack vertically so Author isn't cut off */
    .triage-footer-section {
        padding: 12px 16px;
    }

    .triage-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    /* Author field takes full width */
    .triage-footer .triage-field {
        width: 100%;
    }

    /* Sync button on its own row, full width, taller for mobile salience */
    .triage-footer .triage-btn--primary {
        width: 100%;
        padding: 12px 16px;
        font-size: 12px;
    }

    .triage-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Hide line break on very small screens */
@media (max-width: 400px) {
    .hide-mobile {
        display: none;
    }
}

/* ==================== PASSWORD MODAL FOR PROTECTED NAVIGATION ==================== */
.cs-password-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.cs-password-modal.active {
    opacity: 1;
    visibility: visible;
}

.cs-password-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.cs-password-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    transform: scale(0.9);
    transition: transform 300ms ease;
}

.cs-password-modal.active .cs-password-modal-content {
    transform: scale(1);
}

.cs-password-modal-close {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cs-password-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.cs-password-modal-field {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    transition: border-color 0.2s ease;
}

.cs-password-modal-field.shake {
    animation: modalShake 0.5s ease;
}

@keyframes modalShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-8px);
    }

    40%,
    80% {
        transform: translateX(8px);
    }
}

.cs-password-modal-input {
    width: 180px;
    height: 36px;
    padding: 0 12px;
    font-family: 'Input', monospace;
    font-size: 13px;
    font-weight: 400;
    color: #222222;
    background: transparent;
    border: none;
    outline: none;
}

.cs-password-modal-input::placeholder {
    color: #999999;
}

.cs-password-modal-submit {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #222222;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    position: relative;
}

.cs-password-modal-submit:hover {
    background: #333333;
    transform: scale(1.05);
}

.cs-password-modal-submit .icon-arrow,
.cs-password-modal-submit .icon-check {
    position: absolute;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cs-password-modal-submit .icon-arrow {
    opacity: 1;
    transform: translateX(0);
}

.cs-password-modal-submit .icon-check {
    opacity: 0;
    transform: scale(0.5);
}

/* Success state - green background with white checkmark */
.cs-password-modal-submit.success {
    background: #00B624;
}

.cs-password-modal-submit.success .icon-arrow {
    opacity: 0;
    transform: translateX(4px);
}

.cs-password-modal-submit.success .icon-check {
    opacity: 1;
    transform: scale(1);
}

.cs-password-modal-error {
    font-family: 'Neue Haas Unica W1G', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 280px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.cs-password-modal-error.visible {
    opacity: 1;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .cs-password-modal-close {
        top: -50px;
        right: 0;
    }

    .cs-password-modal-input {
        width: 180px;
    }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ====================
   Disabled expensive effects on low-performance devices
   Triggered by .perf-low class added by performance-detect.js
   ================================================================= */

/* Disable backdrop-filter on TD confirmation sticky footer for low-performance devices */
.perf-low .td-confirm-sticky-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Use solid background fallback instead */
    background: rgba(243, 243, 243, 0.98) !important;
}

/* ==================== LIGHT MODE OVERRIDES ====================
   Elements that need base color (black) in light mode while
   keeping white text in dark mode
   ============================================================== */

/* Pills text - base black in light mode */
html:not([data-theme="dark"]) .cs-pill-text {
    color: #1a1a1a;
}

/* Pills border - visible in light mode */
html:not([data-theme="dark"]) .cs-pill {
    border-color: rgba(26, 26, 26, 0.2);
    background-color: rgba(26, 26, 26, 0.03);
}

/* Feature text paragraphs - base black in light mode */
html:not([data-theme="dark"]) .cs-feature-text p,
html:not([data-theme="dark"]) .cs-feature-text .cs-intro-text {
    color: #1a1a1a;
}

/* Framework/diagram text - base black in light mode */
html:not([data-theme="dark"]) .cs-diagram-text .cs-feature-text {
    color: #1a1a1a;
}

/* Visual design text - base black in light mode */
html:not([data-theme="dark"]) .cs-visual-design-text {
    color: #1a1a1a;
}

/* Micro-animation video and cover art image - remove shadows in light mode */
html:not([data-theme="dark"]) .cs-growth-video,
html:not([data-theme="dark"]) .cs-growth-image {
    box-shadow: none;
}

/* Data impact section - stat values and labels base black in light mode */
html:not([data-theme="dark"]) .cs-stat-value,
html:not([data-theme="dark"]) .cs-stat-label {
    color: #1a1a1a;
}

/* Data impact section divider lines - darker in light mode */
html:not([data-theme="dark"]) .cs-stat-card::before {
    background-color: rgba(26, 26, 26, 0.2);
}

/* ===== PROJECT SCOPE & ARCHITECTURE - LIGHT MODE ===== */
/* Component background - very light grey with border */
html:not([data-theme="dark"]) .cs-figma-scope {
    background: #f5f5f5;
    border: 1px solid rgba(26, 26, 26, 0.15);
}

/* Section header hover - subtle grey */
html:not([data-theme="dark"]) .cs-figma-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Title text - base black */
html:not([data-theme="dark"]) .cs-figma-title {
    color: #1a1a1a;
}

/* Toggle icon - darker for visibility */
html:not([data-theme="dark"]) .cs-figma-toggle-icon circle,
html:not([data-theme="dark"]) .cs-figma-toggle-icon path {
    stroke: #1a1a1a;
}

/* Expanded content area - same grey as header */
html:not([data-theme="dark"]) .cs-figma-content {
    background: #f5f5f5;
}

/* Divider below header before content */
html:not([data-theme="dark"]) .cs-figma-header {
    border-bottom: 1px solid rgba(26, 26, 26, 0.15);
}

/* Description text - base black */
html:not([data-theme="dark"]) .cs-figma-description {
    color: #1a1a1a;
}

/* Section dividers - visible in light mode */
html:not([data-theme="dark"]) .cs-figma-section {
    border-bottom-color: rgba(26, 26, 26, 0.15);
}

/* Cards within content - light with subtle border */
html:not([data-theme="dark"]) .cs-figma-card {
    background: #ffffff;
    border-color: rgba(26, 26, 26, 0.1);
}

/* Card title - base black */
html:not([data-theme="dark"]) .cs-figma-card-title {
    color: #1a1a1a;
}

/* Card description - slightly muted black */
html:not([data-theme="dark"]) .cs-figma-card-desc {
    color: rgba(26, 26, 26, 0.7);
}

/* ===== FEATURES PILLS & TOGGLE LABELS - LIGHT MODE ===== */

/* All figma pill text - base black in light mode */
html:not([data-theme="dark"]) .cs-figma-pill-text {
    color: #1a1a1a;
}

/* Column headers - dark grey */
html:not([data-theme="dark"]) .cs-figma-col-header {
    color: #555555;
}

/* All figma pills - lighter grey background, no shadow (matching impact pill style) */
html:not([data-theme="dark"]) .cs-figma-pill {
    background: #f0f0f0;
    box-shadow: none;
}

/* Pill icons - dark grey filter */
html:not([data-theme="dark"]) .cs-figma-pill-icon {
    filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Toggle labels (Self-Serve, Assisted) - same default grey as pills */
html:not([data-theme="dark"]) .cs-figma-toggle-label {
    background: #f0f0f0;
    color: #555555;
    border-color: rgba(26, 26, 26, 0.15);
}

/* Selected pills in light mode - GREEN for visual selection feedback */
html:not([data-theme="dark"]) .cs-figma-pill.cs-pill-selected {
    background: rgba(126, 187, 28, 0.15);
    border-color: #7ebb1c;
}

html:not([data-theme="dark"]) .cs-figma-pill.cs-pill-selected .cs-figma-pill-text {
    color: #1a1a1a;
}

/* Selected pill icons - dark green */
html:not([data-theme="dark"]) .cs-figma-pill.cs-pill-selected .cs-figma-pill-icon {
    filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(800%) hue-rotate(70deg) brightness(95%) contrast(95%);
}

/* Selected toggle labels - green for visual feedback */
html:not([data-theme="dark"]) .cs-figma-toggle-label.cs-pill-selected {
    background: rgba(126, 187, 28, 0.15);
    border-color: #7ebb1c;
    color: #1a1a1a;
}

/* ===== IMPACT/OVERVIEW PILLS - LIGHT MODE ===== */
/* Align cs-pill styling with figma pills */
html:not([data-theme="dark"]) .cs-pill {
    background: #f0f0f0;
    border-color: rgba(26, 26, 26, 0.15);
}

html:not([data-theme="dark"]) .cs-pill-text {
    color: #555555;
}

/* ===== CASE STUDY BODY TEXT - LIGHT MODE ===== */
/* Global text color override for all case study content */
html:not([data-theme="dark"]) .case-study-page,
html:not([data-theme="dark"]) .cs-ef-body {
    color: #1a1a1a;
}

/* Step numbers - green border in light mode */
html:not([data-theme="dark"]) .case-study-page .step-number,
html:not([data-theme="dark"]) .case-study-page [class*="step-number"] {
    color: #1a1a1a;
    border: 1px solid #7ebb1c;
}

/* Active step number span - black text on filled badges */
html:not([data-theme="dark"]) .cs-step.cs-ef-step .cs-step-number span,
html:not([data-theme="dark"]) .cs-step.cs-ef-step.cs-ef-step--active .cs-step-number span,
html:not([data-theme="dark"]) .cs-step--active .cs-step-number span,
html:not([data-theme="dark"]) .cs-step.cs-ef-step.cs-ef-step--active.cs-step--red .cs-step-number span,
/* Base red/green step numbers (not just active state) */
html:not([data-theme="dark"]) .cs-step-number--red span,
html:not([data-theme="dark"]) .cs-step-number--green span {
    color: #1a1a1a !important;
}

/* ===== CASE STUDY NAV BUTTONS - LIGHT MODE ===== */
/* Button background and border */
html:not([data-theme="dark"]) .cs-nav-btn {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(26, 26, 26, 0.12);
}

html:not([data-theme="dark"]) .cs-nav-btn:hover {
    background-color: rgba(126, 187, 28, 0.15);
    border-color: #7EBB1C;
}

/* Arrow circle - grey border and icon */
html:not([data-theme="dark"]) .cs-nav-btn-arrow {
    border-color: rgba(26, 26, 26, 0.3);
    color: rgba(26, 26, 26, 0.6);
}

html:not([data-theme="dark"]) .cs-nav-btn:hover .cs-nav-btn-arrow {
    border-color: #7EBB1C;
    color: rgba(26, 26, 26, 0.9);
    background-color: rgba(126, 187, 28, 0.15);
}

/* Arrow SVG stroke */
html:not([data-theme="dark"]) .cs-nav-btn-arrow svg {
    stroke: currentColor;
}

/* Label text - grey */
html:not([data-theme="dark"]) .cs-nav-btn-label {
    color: rgba(26, 26, 26, 0.5);
}

/* Title text - base black */
html:not([data-theme="dark"]) .cs-nav-btn-title {
    color: rgba(26, 26, 26, 0.88);
}

/* ===== DEFECT GLOSSARY - KEEP DARK IN LIGHT MODE ===== */
/* Glossary card - maintain dark background */
html:not([data-theme="dark"]) .cs-glossary-card {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Header border */
html:not([data-theme="dark"]) .cs-glossary-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Tabs - keep dark styling */
html:not([data-theme="dark"]) .cs-glossary-tab {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

html:not([data-theme="dark"]) .cs-glossary-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

html:not([data-theme="dark"]) .cs-glossary-tab.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* List items - keep white text on dark background */
html:not([data-theme="dark"]) .cs-glossary-item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html:not([data-theme="dark"]) .cs-glossary-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Title and description text - white */
html:not([data-theme="dark"]) .cs-glossary-item-title {
    color: #ffffff;
}

html:not([data-theme="dark"]) .cs-glossary-item-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ===== DEFECT TRIAGE PLAYGROUND - KEEP DARK IN LIGHT MODE ===== */
/* Playground CTA text - keep white */
html:not([data-theme="dark"]) .playground-cta-text {
    color: #ffffff;
}

/* Playground toggle option text - keep white */
html:not([data-theme="dark"]) .playground-toggle-option {
    color: rgba(255, 255, 255, 0.7);
}

html:not([data-theme="dark"]) .playground-toggle-option.active {
    color: #ffffff;
}

/* Playground annotate button text - keep white */
html:not([data-theme="dark"]) .playground-annotate-btn {
    color: #ffffff;
}

html:not([data-theme="dark"]) .playground-annotate-plus {
    color: #ffffff;
}

/* ===== DIAGRAM - KEEP DARK IN LIGHT MODE ===== */
/* Diagram card background */
html:not([data-theme="dark"]) .cs-diagram-card {
    background-color: #1a1a1a;
}

/* Diagram toggle buttons - maintain dark styling */
html:not([data-theme="dark"]) .cs-diagram-toggle-btn {
    color: rgba(255, 255, 255, 0.6);
}

html:not([data-theme="dark"]) .cs-diagram-toggle-btn.cs-diagram-toggle-btn--active {
    color: #ffffff;
}

html:not([data-theme="dark"]) .cs-diagram-toggle-text {
    color: inherit;
}

/* ===== PROJECT NAV BUTTONS - LIGHT MODE ===== */
/* Navigation buttons at bottom of case study pages */
html:not([data-theme="dark"]) .cs-project-nav-btn {
    background-color: rgba(26, 26, 26, 0.04);
    border-color: rgba(26, 26, 26, 0.24);
}

html:not([data-theme="dark"]) .cs-project-nav-btn:hover {
    background-color: rgba(26, 26, 26, 0.08);
    border-color: rgba(26, 26, 26, 0.32);
}

html:not([data-theme="dark"]) .cs-project-nav-direction {
    color: rgba(26, 26, 26, 0.5);
}

html:not([data-theme="dark"]) .cs-project-nav-title {
    color: #1a1a1a;
}