/* ==========================================================================
   Strategic Decision Conversation - Arun Obulisamy
   Minimal Editorial Hero & Grid System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    /* Color Palette - Dark & Blue */
    --bg-cream: #020617;
    --bg-surface: #0F172A;
    --bg-subtle: #1E293B;
    --bg-accent-box: #0F172A;

    /* Text Colors */
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-inverse: #020617;

    /* Solid Accents */
    --accent-dark: #38BDF8;
    --accent-indigo: #3B82F6;
    --accent-amber: #F59E0B;
    --accent-red: #EF4444;
    --accent-emerald: #10B981;

    /* Borders */
    --border-color: #334155;
    --border-subtle: #475569;
    --border-strong: #64748B;

    /* Typography */
    --font-heading: 'Space Grotesk', -apple-system, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);

    /* Theme Specific Components */
    --color-scheme: var(--color-scheme);
    --selection-bg: rgba(56, 189, 248, 0.3);
    
    --nav-bg: rgba(15, 23, 42, 0.92);
    --nav-bg-scrolled: rgba(15, 23, 42, 0.98);
    --nav-shadow-scrolled: 0 10px 25px rgba(0, 0, 0, 0.5);
    
    --logo-badge-text: #0F172A;
    --video-badge-bg: rgba(15, 23, 42, 0.92);
    --video-badge-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    
    --risk-high-bg: rgba(239, 68, 68, 0.1);
    --risk-high-text: #EF4444;
    --risk-high-border: rgba(239, 68, 68, 0.4);
    
    --debt-bad-bg: rgba(239, 68, 68, 0.1);
    --debt-bad-border: rgba(239, 68, 68, 0.4);
    
    --debt-good-bg: rgba(16, 185, 129, 0.1);
    --debt-good-border: rgba(16, 185, 129, 0.4);
    
    --icon-green-bg: rgba(16, 185, 129, 0.1);
    --icon-green-text: #10B981;
    
    --icon-blue-bg: rgba(59, 130, 246, 0.1);
    --icon-blue-text: #3B82F6;
    
    --icon-red-bg: rgba(239, 68, 68, 0.1);
    --icon-red-text: #EF4444;
    
    --step-badge-text: #0F172A;
    --step-badge-shadow: 0 0 0 6px var(--bg-cream);
    
    --cta-bg: var(--accent-indigo);
    --cta-btn-bg: #FFFFFF;
    --cta-btn-text: #0F172A;
    --cta-btn-hover-bg: #F4EFE6;
    --cta-eyebrow-bg: rgba(0, 0, 0, 0.3);
    --cta-eyebrow-border: rgba(255, 255, 255, 0.2);
    
    --hero-wave-1: #1E3A8A;
    --hero-wave-2: #1E40AF;

    --btn-primary-bg: #3B82F6;
    --btn-primary-hover: #2563EB;
    --btn-primary-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
    --btn-primary-shadow-hover: 0 8px 24px rgba(59, 130, 246, 0.35);

    --designed-for-text: #3B82F6;
    --designed-for-bg: rgba(59, 130, 246, 0.05);
    --designed-for-border: rgba(59, 130, 246, 0.2);
}

[data-theme="light"] {
    --bg-cream: #FBF9F5;
    --bg-surface: #FFFFFF;
    --bg-subtle: #F4EFE6;
    --bg-accent-box: #EFE8DC;

    --text-primary: #1C1917;
    --text-secondary: #57534E;
    --text-muted: #78716C;
    --text-inverse: #FFFFFF;

    --accent-dark: #0F172A;
    --accent-indigo: #B45309; /* Swapped to a premium rust/bronze for light theme */
    --accent-amber: #D97706;
    --accent-red: #DC2626;
    --accent-emerald: #059669;

    --border-color: #E7E5E4;
    --border-subtle: #F0EDE6;
    --border-strong: #D6D3D1;

    --shadow-sm: 0 2px 6px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 12px 28px rgba(28, 25, 23, 0.06);
    --shadow-lg: 0 24px 60px rgba(28, 25, 23, 0.1);

    --color-scheme: light;
    --selection-bg: #EFE8DC;
    
    --nav-bg: rgba(255, 255, 255, 0.92);
    --nav-bg-scrolled: rgba(255, 255, 255, 0.98);
    --nav-shadow-scrolled: 0 10px 25px rgba(28, 25, 23, 0.08);
    
    --logo-badge-text: #FFFFFF;
    --video-badge-bg: rgba(255, 255, 255, 0.92);
    --video-badge-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    
    --risk-high-bg: #FEF2F2;
    --risk-high-text: #991B1B;
    --risk-high-border: #FCA5A5;
    
    --debt-bad-bg: #FEF2F2;
    --debt-bad-border: #FCA5A5;
    
    --debt-good-bg: #ECFDF5;
    --debt-good-border: #6EE7B7;
    
    --icon-green-bg: #ECFDF5;
    --icon-green-text: #047857;
    
    --icon-blue-bg: #EFF6FF;
    --icon-blue-text: #1D4ED8;
    
    --icon-red-bg: #FEF2F2;
    --icon-red-text: #B91C1C;
    
    --step-badge-text: #FFFFFF;
    
    --cta-bg: #2C2520;
    --cta-btn-bg: #FBF9F5;
    --cta-btn-text: #2C2520;
    --cta-btn-hover-bg: #EFE8DC;
    --cta-eyebrow-bg: rgba(255, 255, 255, 0.12);
    --cta-eyebrow-border: rgba(255, 255, 255, 0.25);
    
    --hero-wave-1: #E4D5BE;
    --hero-wave-2: #D5C2A5;

    --btn-primary-bg: #1C1917;
    --btn-primary-hover: #292524;
    --btn-primary-shadow: 0 4px 16px rgba(28, 25, 23, 0.2);
    --btn-primary-shadow-hover: 0 8px 24px rgba(28, 25, 23, 0.3);

    --designed-for-text: var(--accent-indigo);
    --designed-for-bg: rgba(180, 83, 9, 0.05);
    --designed-for-border: rgba(180, 83, 9, 0.2);
}

/* Designed For Badge */
.designed-for-badge {
    margin-bottom: 48px;
    text-align: center;
    padding: 32px 24px;
    border-radius: 20px;
    background: var(--designed-for-bg);
    border: 1px solid var(--designed-for-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.designed-for-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--designed-for-text);
    margin-bottom: 16px;
}

/* Base Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    background-color: var(--bg-cream);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.75;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--selection-bg);
    color: var(--text-primary);
}

/* Container & Layout Utilities */
.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.container-narrow {
    max-width: 840px;
    margin: 0 auto;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.22;
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 700;
    margin-bottom: 20px;
}

h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 18px;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 600;
    margin-bottom: 14px;
}

p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 20px;
}

p strong,
span strong {
    color: var(--text-primary);
}

.serif-quote {
    font-family: var(--font-serif);
    font-style: italic;
}

.text-center {
    text-align: center;
}

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

.accent-text {
    color: var(--accent-indigo);
}

/* Eyebrow Tag */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 100px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-indigo);
}

/* Header Navbar */
.header-nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.header-actions .btn {
    padding-left: 48px;
    padding-right: 48px;
}

@media (max-width: 768px) {
    .header-nav {
        width: calc(100% - 32px) !important;
        top: 12px !important;
        bottom: auto !important;
    }
    .header-actions .btn {
        flex: 1;
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        justify-content: center;
    }
}

.header-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.03em;
}

.logo-badge {
    background: var(--accent-dark);
    color: var(--logo-badge-text);
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--text-primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.975rem;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: #FFFFFF;
    box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--btn-primary-shadow-hover);
}

.btn-secondary {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 9px 20px;
    font-size: 0.875rem;
}

.btn-large {
    padding: 16px 38px;
    font-size: 1.05rem;
    font-weight: 700;
}

.btn-icon-arrow {
    transition: transform 0.2s ease;
}

.btn:hover .btn-icon-arrow {
    transform: translateX(4px);
}

/* Hero Section Modern Wave Styling (Matching Reference Image) */
.hero-section {
    padding-top: 105px;
    padding-bottom: 90px;
    text-align: center;
    position: relative;
    overflow: visible;
}

/* Background Wave Graphic Overlay */
.hero-wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 380px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
}

.hero-content-wrap {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
}

.hero-description {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 760px;
    margin: 0 auto 32px;
    line-height: 1.7;
    text-align: center;
}

/* Video Frame Container - Large Rounded Pill Window like Reference */
.video-frame-container {
    position: relative;
    max-width: 920px;
    margin: 36px auto 0;
    border-radius: 32px;
    overflow: visible;
    background: #0F172A;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
}

.video-frame-inner {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.video-top-badge {
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 10;
    background: var(--video-badge-bg);
    backdrop-filter: blur(12px);
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--video-badge-shadow);
}

.video-top-badge svg {
    color: var(--accent-indigo);
}

.video-responsive-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #0F172A;
}

.video-responsive-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Floating Scroll Down Arrow Button */
.video-scroll-down-btn {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-indigo);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
    text-decoration: none;
}

.video-scroll-down-btn:hover {
    transform: translateX(-50%) translateY(4px);
    background: #4338CA;
}

/* Trust Strip */
.trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 56px;
    padding: 14px 28px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-sm);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.trust-item svg {
    color: var(--accent-indigo);
    width: 16px;
    height: 16px;
}

/* Section Padding */
section {
    padding: 96px 0;
    position: relative;
}

.section-header {
    margin-bottom: 48px;
}

/* Solid Cards & Grids */
.solid-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    height: 100%;
}

.solid-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* Slider UI Elements */
.slider-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.slider-btn:hover {
    background: var(--accent-indigo);
    color: #fff;
    border-color: var(--accent-indigo);
}

.slider-prev {
    left: -24px;
}

.slider-next {
    right: -24px;
}

@media (max-width: 768px) {
    .slider-prev {
        left: -12px;
        width: 40px;
        height: 40px;
        top: calc(50% - 29px);
    }
    .slider-next {
        right: -12px;
        width: 40px;
        height: 40px;
        top: calc(50% - 29px);
    }
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    background: var(--accent-indigo);
    transform: scale(1.3);
}

/* Pain Points Grid */
.pain-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.pain-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
    cursor: pointer;
    user-select: none;
}

.pain-card.checked {
    border-color: var(--accent-indigo);
    background: var(--bg-subtle);
}

.checkbox-custom {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 6px;
    border: 2px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: all 0.2s ease;
    background: var(--bg-surface);
}

.pain-card:hover .checkbox-custom {
    border-color: var(--accent-indigo);
}

.pain-card.checked .checkbox-custom {
    background: var(--accent-indigo);
    border-color: var(--accent-indigo);
}

.checkbox-custom svg {
    width: 14px;
    height: 14px;
    color: #FFFFFF;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s ease;
}

.pain-card.checked .checkbox-custom svg {
    opacity: 1;
    transform: scale(1);
}

.pain-card-text {
    font-size: 1.025rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pain-card.checked .pain-card-text {
    color: var(--text-primary);
    font-weight: 600;
}

/* Risk Score Bar */
.risk-calculator-bar {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 28px;
    box-shadow: var(--shadow-sm);
}

.risk-score-display {
    display: flex;
    align-items: center;
    gap: 14px;
}

.risk-badge {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.risk-badge.high-risk {
    background: var(--risk-high-bg);
    color: var(--risk-high-text);
    border-color: var(--risk-high-border);
}

/* Editorial Boxes */
.editorial-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 48px;
    box-shadow: var(--shadow-sm);
}

.quote-editorial {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    line-height: 1.4;
    color: var(--text-primary);
    border-left: 4px solid var(--accent-indigo);
    padding-left: 24px;
    margin: 32px 0;
}

/* Decision Debt Box */
.decision-debt-banner {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px;
    margin-top: 36px;
}

.debt-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}

.debt-col {
    border-radius: 14px;
    padding: 22px;
    border: 1px solid var(--border-color);
}

.debt-col.bad {
    background: var(--debt-bad-bg);
    border-color: var(--debt-bad-border);
}

.debt-col.good {
    background: var(--debt-good-bg);
    border-color: var(--debt-good-border);
}

.debt-col-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.025rem;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Audience Split Grid */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.credibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.audience-grid.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-grid::-webkit-scrollbar {
    display: none;
}

.audience-card {
    display: flex;
    flex-direction: column;
}

.card-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.icon-green {
    background: var(--icon-green-bg);
    color: var(--icon-green-text);
}

.icon-blue {
    background: var(--icon-blue-bg);
    color: var(--icon-blue-text);
}

.icon-red {
    background: var(--icon-red-bg);
    color: var(--icon-red-text);
}

.custom-list {
    list-style: none;
    margin-top: 16px;
}

.custom-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-size: 1rem;
}

.custom-list li svg {
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
}

.list-check li svg {
    color: var(--accent-emerald);
}

.list-cross li svg {
    color: var(--accent-red);
}

/* Timeline Flow */
.timeline-flow {
    position: relative;
    max-width: 880px;
    margin: 40px auto 0;
    padding-left: 48px;
}

.timeline-flow::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 19px;
    bottom: 12px;
    width: 2px;
    background: var(--border-strong);
}

.step-item {
    position: relative;
    margin-bottom: 36px;
}

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

.step-number-badge {
    position: absolute;
    left: -48px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-dark);
    color: var(--step-badge-text);
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: var(--step-badge-shadow);
}

.step-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.step-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.day-badge-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.9rem;
}

.day-tag {
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

/* Accordion FAQ */
.faq-accordion {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-sm);
}

.faq-card.active {
    border-color: var(--accent-dark);
}

.faq-question-btn {
    width: 100%;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    min-width: 20px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.faq-card.active .faq-chevron {
    transform: rotate(180deg);
    color: var(--accent-dark);
}

.faq-answer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 28px;
}

.faq-card.active .faq-answer-body {
    max-height: 300px;
    padding-bottom: 24px;
}

.faq-answer-body p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 0;
}

/* Final CTA Card */
.cta-wrapper {
    background: var(--cta-bg);
    color: #FFFFFF;
    border-radius: 28px;
    padding: 72px 40px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.cta-wrapper h2 {
    color: #FFFFFF;
}

.cta-wrapper p {
    color: #D6D3D1;
}

.cta-wrapper .eyebrow {
    background: var(--cta-eyebrow-bg);
    color: #FFFFFF;
    border-color: var(--cta-eyebrow-border);
}

.cta-wrapper .btn-primary {
    background: var(--cta-btn-bg);
    color: var(--cta-btn-text);
}

.cta-wrapper .btn-primary:hover {
    background: var(--cta-btn-hover-bg);
    color: var(--cta-btn-text);
}

/* Footer */
.footer-main {
    border-top: 1px solid var(--border-color);
    padding: 48px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: var(--bg-cream);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--text-primary);
}

/* Scroll Reveal Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .audience-grid.grid-2 {
        grid-template-columns: 1fr;
    }

    .credibility-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 24px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        align-items: stretch;
        scroll-behavior: smooth;
    }

    .credibility-grid::-webkit-scrollbar {
        display: none;
    }

    .credibility-grid > .solid-card {
        flex: 0 0 85%;
        max-width: 300px;
        scroll-snap-align: center;
        height: auto;
    }
    .hero-section {
        padding-top: 85px;
        padding-bottom: 70px;
    }
    section {
        padding: 70px 0;
    }
    .hero-wave-bg {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .header-nav {
        top: 10px;
        width: calc(100% - 20px);
    }

    .nav-menu {
        display: none;
    }

    .pain-points-grid {
        grid-template-columns: 1fr;
    }

    .debt-comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .audience-grid {
        grid-template-columns: 1fr;
    }

    .editorial-box {
        padding: 32px 20px;
    }

    .cta-wrapper {
        padding: 48px 20px;
    }

    .timeline-flow {
        padding-left: 36px;
    }

    .timeline-flow::before {
        left: 15px;
    }

    .step-number-badge {
        left: -36px;
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .step-card {
        padding: 20px;
    }

    /* Extra Mobile Improvements */
    .hero-section {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    
    section {
        padding: 50px 0;
    }
    
    .hero-wave-bg {
        height: 250px;
    }
    
    .solid-card {
        padding: 24px 20px;
    }
    
    .video-frame-container, .video-frame-inner {
        border-radius: 16px;
    }
    
    .video-top-badge {
        top: 12px;
        left: 12px;
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .trust-strip {
        gap: 16px;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 20px;
    }
    
    .trust-item {
        width: 100%;
        justify-content: flex-start;
    }
    
    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
        width: 100%;
    }
    
    .day-grid {
        grid-template-columns: 1fr;
    }

    .decision-debt-banner {
        padding: 20px 16px;
    }

    .debt-col {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.7rem;
    }
    
    .faq-question-btn {
        padding: 16px 20px;
        font-size: 0.95rem;
    }
    
    .faq-answer-body {
        padding: 0 20px;
    }
    
    .header-nav-inner {
        padding: 10px 16px;
    }
}

@media (max-width: 768px) {
  .btn {
    max-width: 100%;
    box-sizing: border-box;
  }
  .btn-large {
    white-space: normal !important;
    text-align: center;
    padding: 14px 20px !important;
    font-size: 0.925rem !important;
    line-height: 1.35;
  }
}


/* Theme Switch Animation */
body, section, .solid-card, .header-nav-inner, .cta-wrapper, .step-card, .faq-card, .editorial-box, .debt-col, .btn, p, h1, h2, h3, h4, span, a {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

.theme-toggle-btn {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-btn.theme-animating {
    transform: rotate(360deg) scale(1.25);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   LAUNCH REFINEMENTS
   Section rhythm, component styles for the rebuilt page, and spacing
   normalisation. Everything below uses existing theme tokens so light and
   dark both follow automatically.
   ========================================================================== */

/* --- Accessibility: skip link ------------------------------------------ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--accent-indigo);
    color: #fff;
    border-radius: 0 0 10px 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Brand mark in nav -------------------------------------------------- */
.brand-mark {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
    margin-right: auto;
    white-space: nowrap;   /* never wrap the name onto two lines */
    flex: none;
}
.brand-mark:hover { color: var(--accent-indigo); }

.header-nav-inner { display: flex; align-items: center; gap: 16px; }

/* --- Theme toggle: more discoverable ------------------------------------
   Previously an unlabelled icon. Now a labelled pill so its purpose reads
   at a glance; the label collapses on small screens where the icon alone
   has to carry it.                                                        */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--accent-indigo);
    outline-offset: 2px;
}
.theme-toggle-btn svg { width: 16px; height: 16px; flex: none; }
.theme-toggle-label { line-height: 1; white-space: nowrap; }

@media (max-width: 600px) {
    .theme-toggle-label { display: none; }
    .theme-toggle-btn { padding: 8px; }
    .brand-mark { font-size: 0.85rem; }
}

/* --- Section rhythm -----------------------------------------------------
   One shared vertical scale instead of per-section inline padding, so the
   page reads as a continuous document rather than stacked chapters. A
   hairline seam makes the join legible without a hard edge.               */
.band {
    padding: clamp(56px, 7vw, 88px) 0;
    position: relative;
}
.band-surface { background: var(--bg-surface); }

.band + .band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(840px, calc(100% - 48px));
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--border-color) 22%,
        var(--border-color) 78%,
        transparent
    );
}
/* No seam where the background already changes - the colour shift suffices */
.band + .band-surface::before,
.band-surface + .band::before { display: none; }

.band-final {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

/* --- Vertical rhythm ----------------------------------------------------
   The old page mixed inline margin-top:40px on headings with the base 20px
   paragraph margin, producing uneven and sometimes doubled gaps. One scale. */
.band h2 { margin-bottom: 16px; }
.band h3 { margin-top: 44px; margin-bottom: 12px; }
.band h4 { margin-top: 28px; margin-bottom: 10px; }
.band h2 + p,
.band h3 + p,
.band h4 + p { margin-top: 0; }

.band .animate-on-scroll > h2:first-child,
.band .animate-on-scroll > h3:first-child { margin-top: 0; }

.band p { margin-bottom: 18px; }
.band p:last-child { margin-bottom: 0; }

/* Tight line-stacks read as one unit, so less leading than separate paras */
.band p.stack { margin-bottom: 22px; }

.section-subhead {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 600;
    color: var(--accent-indigo);
    margin-bottom: 24px;
    line-height: 1.4;
}

.lead-strong {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-primary);
}

.eyebrow + h2 { margin-top: 0; }

.rule-soft {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 44px auto;
    width: 72%;
    opacity: 0.7;
}

/* --- Hero --------------------------------------------------------------- */
.hero-section { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); }
.hero-content-wrap { max-width: 840px; margin: 0 auto; text-align: center; }

.hero-subhead {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 600;
    color: var(--accent-indigo);
    line-height: 1.3;
    margin-bottom: 32px;
}

.designed-for-label {
    font-size: 0.72rem;
    line-height: 1.5;
    margin-bottom: 12px;
}
.designed-for-list {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}
.designed-for-badge { margin-bottom: 36px; padding: 24px 22px; }

.hero-lede {
    text-align: left;
    max-width: 640px;
    margin: 36px auto 0;
}
.hero-lede p { margin-bottom: 18px; }
.hero-lede .lede-emphasis {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-primary);
    border-left: 3px solid var(--accent-indigo);
    padding-left: 18px;
    margin-top: 26px;
}

.hero-cta { margin-top: 40px; }
.hero-cta-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 14px 0 0;
    font-weight: 500;
}

/* --- VSL placeholder (variant 4) ---------------------------------------- */
.vsl-placeholder {
    max-width: 800px;
    margin: 32px auto 8px;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    border: 2px dashed var(--border-strong);
    background: var(--bg-subtle);
    display: grid;
    place-items: center;
}
.vsl-inner { text-align: center; color: var(--text-muted); padding: 20px; }
.vsl-inner svg { width: 54px; height: 54px; margin-bottom: 12px; opacity: 0.7; }
.vsl-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin: 0 0 4px;
}
.vsl-note { font-size: 0.85rem; margin: 0; }

/* --- Figures ------------------------------------------------------------ */
.page-figure { margin: 32px auto; text-align: center; }
.page-figure img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.page-figure figcaption {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* --- Pull quotes -------------------------------------------------------- */
.pull-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.38;
    color: var(--text-primary);
    text-align: center;
    margin: 34px auto;
    padding: 24px 28px;
    max-width: 660px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.pull-quote-left {
    text-align: left;
    border: none;
    border-left: 4px solid var(--accent-indigo);
    padding: 4px 0 4px 22px;
    font-size: clamp(1.12rem, 1.9vw, 1.35rem);
    max-width: none;
    margin: 28px 0;
}

/* --- Contrast / pattern / question lists -------------------------------- */
.contrast-card { margin: 28px 0; padding: 28px 30px; }
.contrast-card p { margin-bottom: 16px; color: var(--text-primary); font-weight: 600; }
.contrast-card p.last { margin-bottom: 0; }
.contrast-card span { color: var(--text-secondary); font-weight: 400; }

.pattern-list { margin: 24px 0; padding-left: 20px; border-left: 2px solid var(--border-color); }
.pattern-list p { margin-bottom: 14px; color: var(--text-primary); font-weight: 600; }
.pattern-list p:last-child { margin-bottom: 0; }
.pattern-list span { color: var(--text-secondary); font-weight: 400; }

.lens-list { margin: 24px 0; }
.lens-list p { margin-bottom: 14px; font-weight: 600; color: var(--text-primary); }
.lens-list span { font-weight: 400; color: var(--text-secondary); }

.question-list {
    margin: 24px 0;
    padding: 22px 26px;
    background: var(--bg-subtle);
    border-radius: 14px;
}
.question-list p {
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary);
}
.question-list p:last-child { margin-bottom: 0; }

/* --- Three levels ------------------------------------------------------- */
.level-stack { display: grid; gap: 14px; margin: 28px 0; }
.level-card {
    padding: 22px 24px;
    border-radius: 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-strong);
}
.level-card-accent {
    border-left-color: var(--accent-indigo);
    background: color-mix(in srgb, var(--accent-indigo) 8%, var(--bg-subtle));
}
.level-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-indigo);
    margin-bottom: 6px;
}
.level-card h4 { margin: 0 0 8px; font-size: 1.12rem; }
.level-items { margin-bottom: 6px; color: var(--text-primary); font-weight: 500; }
.level-note { margin-bottom: 0; font-size: 0.95rem; color: var(--text-muted); }

/* --- Numbered step list ------------------------------------------------- */
.step-list { list-style: none; margin: 32px 0 0; padding: 0; }
.step-item {
    display: flex;
    gap: 20px;
    padding-bottom: 32px;
    position: relative;
}
.step-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 46px;
    bottom: 6px;
    width: 2px;
    background: var(--border-color);
}
.step-num {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-indigo);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
}
.step-body { flex: 1; min-width: 0; }
.step-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-indigo);
    margin-bottom: 2px;
}
.step-body h3 { margin: 0 0 10px; font-size: 1.25rem; }
.step-body p { margin-bottom: 12px; }
.step-note { font-size: 0.95rem; color: var(--text-muted); font-style: italic; }

.numbered-list { margin: 0 0 12px; padding-left: 20px; }
.numbered-list li {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 10px;
    padding-left: 4px;
}

/* --- Story cards -------------------------------------------------------- */
.story-grid { display: grid; gap: 22px; margin-top: 32px; }
.story-card {
    position: relative;
    overflow: hidden;
    padding: 34px 32px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-indigo) 7%, var(--bg-surface)) 0%,
        var(--bg-surface) 62%
    );
    border-color: color-mix(in srgb, var(--accent-indigo) 24%, var(--border-color));
}
.story-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--accent-indigo),
        color-mix(in srgb, var(--accent-dark) 70%, transparent));
}
.story-num {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--accent-indigo) 34%, transparent);
    display: block;
    margin-bottom: 8px;
}
.story-title { font-size: 1.2rem; margin: 0 0 4px; }
.story-sub {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-dark);
    margin-bottom: 18px;
}
.story-outcome {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--bg-subtle);
}
.story-outcome h4 {
    margin: 0 0 10px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-indigo);
}
.story-outcome ul { margin: 0; }
.story-principle {
    margin: 18px 0 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

/* --- Testimonials ------------------------------------------------------- */
.testimonial-grid { display: grid; gap: 22px; margin-top: 30px; }
.testimonial {
    margin: 0;
    padding: 30px 32px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent-indigo) 6%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent-indigo) 18%, var(--border-color));
    border-left: 4px solid var(--accent-indigo);
}
.testimonial blockquote { margin: 0; }
.testimonial blockquote p {
    font-size: 1.02rem;
    line-height: 1.68;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.testimonial figcaption {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.t-role {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}
.t-org { display: block; font-size: 0.88rem; color: var(--text-muted); }
.t-changed { margin-top: 18px; }
.t-changed h4 {
    margin: 0 0 8px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-indigo);
}
.t-changed ul { margin: 0; }

/* --- Right-fit list ----------------------------------------------------- */
.fit-list { display: grid; gap: 16px; margin: 26px 0; }
.fit-item {
    padding: 22px 24px;
    border-radius: 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
}
.fit-item h4 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}
.fit-item h4 svg {
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: 3px;
    color: var(--accent-emerald);
}
.fit-item p { margin: 0; font-size: 0.99rem; }

.list-cross li svg { color: var(--accent-red); }

/* --- CTA panel ---------------------------------------------------------- */
.cta-panel {
    margin: 40px auto 0;
    padding: 40px 36px;
    border-radius: 20px;
    text-align: center;
    background: color-mix(in srgb, var(--accent-indigo) 9%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent-indigo) 26%, var(--border-color));
}
.band-final .cta-panel { margin-top: 0; }
.cta-panel-title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    margin-bottom: 12px;
}
.cta-panel-sub {
    max-width: 560px;
    margin: 0 auto 16px;
    color: var(--text-secondary);
}
.cta-panel-note {
    font-size: 0.92rem;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto 26px;
}
.cta-panel .btn { margin: 0 auto; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 36px 0;
    text-align: center;
}
.footer-name {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    font-size: 1rem;
}
.footer-copy { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* --- FAQ (native details/summary - no JS needed) ------------------------ */
.faq-list { margin-top: 26px; border-top: 1px solid var(--border-color); }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--text-primary);
    transition: color 0.18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-indigo); }
.faq-item summary:focus-visible {
    outline: 2px solid var(--accent-indigo);
    outline-offset: 2px;
    border-radius: 6px;
}
.faq-chevron {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--accent-indigo);
    transition: transform 0.22s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 4px 22px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- Fallback for browsers without color-mix() -------------------------- */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .story-card,
    .testimonial,
    .cta-panel,
    .level-card-accent { background: var(--bg-subtle); }
    .story-num { color: var(--accent-indigo); }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
    .story-card,
    .testimonial,
    .cta-panel { padding: 24px 20px; }
    .pull-quote { padding: 20px 16px; }
    .step-item { gap: 14px; }
    .step-num { width: 38px; height: 38px; font-size: 0.95rem; }
    .step-item:not(:last-child)::before { left: 18px; top: 42px; }
    .rule-soft { width: 100%; }
    .hero-lede { margin-top: 28px; }
}

/* ==========================================================================
   HEADER / HERO FIXES
   ========================================================================== */

/* 1. Brand name must stay on one line.
      .header-nav is width:fit-content, so the flex row was being squeezed
      and wrapping "Arun Obulisamy". Stop the wrap at the source. */
.brand-mark {
    white-space: nowrap;
    flex: 0 0 auto;
}
.header-nav-inner { flex-wrap: nowrap; }
.header-actions { width: auto; flex: 0 0 auto; flex-wrap: nowrap; }

/* 2. The floating header is position:fixed, so it sat on top of the
      "For Founders" badge. Push the hero down by the header's own height
      plus its 16px top offset. */
.hero-section {
    padding-top: clamp(104px, 12vw, 140px);
}

/* 3. Theme toggle grew on click because .theme-animating applied
      scale(1.25) to the whole pill (fine for a bare icon, wrong for a
      labelled button). Spin only the icons and drop the scale. */
.theme-toggle-btn.theme-animating {
    transform: none;
}
.theme-toggle-btn.theme-animating .sun-icon,
.theme-toggle-btn.theme-animating .moon-icon {
    transition: transform 0.5s ease;
    transform: rotate(360deg);
}

/* 4. Audience list needs to read clearly - grey was too low-contrast. */
.designed-for-list {
    color: var(--text-primary);
    font-weight: 500;
}

/* Mobile: header is anchored to the top (not the bottom), so the hero needs
   clearance for it. The nav wraps to two rows on narrow screens, hence the
   larger offset than desktop. */
@media (max-width: 768px) {
    .hero-section { padding-top: 116px; }
    .brand-mark { font-size: 0.9rem; }
}
@media (max-width: 480px) {
    .hero-section { padding-top: 112px; }
}

/* Tighten the gap between the floating header and the audience badge,
   and the internal gap between the badge's two lines. */
.hero-section { padding-top: clamp(88px, 9vw, 108px); }

.designed-for-badge {
    margin-bottom: 28px;
    padding: 18px 22px;
}
.designed-for-label { margin-bottom: 6px; }

@media (max-width: 768px) {
    .hero-section { padding-top: 96px; }
    .designed-for-badge { padding: 16px 18px; margin-bottom: 22px; }
}
@media (max-width: 480px) {
    .hero-section { padding-top: 92px; }
}

/* ==========================================================================
   FINAL SPACING PASS
   Section padding was clamp(56px,7vw,88px), so two adjacent bands stacked
   up to ~176px of dead space between the end of one section and the start
   of the next. Reduced to keep an "eye rest" without the void.
   ========================================================================== */
.band { padding: clamp(40px, 4.4vw, 58px) 0; }

/* The hero already ends with its own CTA breathing room, so the band that
   follows it does not need a full top pad. */
.hero-section + .band { padding-top: clamp(32px, 3.4vw, 44px); }

.rule-soft { margin: 34px auto; }

/* Closing portrait sits after the final CTA, above the copyright. */
.closing-portrait { margin: 40px auto 0; }
.closing-portrait img { border-radius: 16px; }

/* FAQ flowchart: sits inside an answer, so it needs tighter margins than a
   standalone section figure. */
.faq-figure { margin: 20px auto 4px; }
.faq-figure figcaption { font-size: 0.82rem; }

@media (max-width: 768px) {
    .band { padding: clamp(34px, 6vw, 44px) 0; }
    .rule-soft { margin: 28px auto; }
}

/* ==========================================================================
   HEADER LAYOUT: [theme toggle] [scarcity line] [Apply Now]
   The brand mark was removed; the scarcity line now occupies the middle slot.
   ========================================================================== */
.nav-scarcity {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    letter-spacing: 0.01em;
    padding: 0 2px;
}

/* Toggle sits first; the scarcity line separates it from the CTA. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-actions .theme-toggle-btn { order: 0; }
.header-actions .nav-scarcity { order: 1; }
.header-actions .btn { order: 2; }

/* Narrow screens: the scarcity line is the first thing to go, so the
   toggle and CTA always stay reachable. */
@media (max-width: 720px) {
    .nav-scarcity { display: none; }
}

/* At mid widths the hero padding scaled down faster than the fixed header's
   height, leaving the audience badge almost touching the nav. Hold a floor. */
@media (max-width: 1000px) {
    .hero-section { padding-top: 108px; }
}

/* ==========================================================================
   MOBILE HEADER  (single source of truth)
   Earlier attempts layered flex overrides on top of ~17 existing header
   rules and kept losing to them. This block uses CSS Grid instead, which
   ignores the inherited flex `order`/`flex-basis` values completely:

       row 1:   Limited Engagements This Month      (spans both columns)
       row 2:   [theme toggle]        [Apply Now]   (left / right)

   Everything stays at full readable size - nothing is shrunk to fit.
   ========================================================================== */
@media (max-width: 720px) {
    .header-nav {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .header-nav-inner {
        display: block !important;
        width: 100% !important;
        padding: 12px 16px !important;
    }

    .header-actions {
        display: grid !important;
        grid-template-columns: auto auto;
        grid-template-areas:
            "title title"
            "toggle cta";
        align-items: center;
        justify-content: space-between;
        row-gap: 11px;
        column-gap: 12px;
        width: 100% !important;
    }

    .header-actions .nav-scarcity {
        grid-area: title;
        display: block !important;
        justify-self: center;
        text-align: center;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--text-primary);
        white-space: nowrap;
    }

    .header-actions .theme-toggle-btn {
        grid-area: toggle;
        justify-self: start;
        padding: 8px 15px 8px 12px;
        font-size: 0.85rem;
    }
    .theme-toggle-label { display: inline !important; }

    .header-actions .btn {
        grid-area: cta;
        justify-self: end;
        flex: 0 0 auto !important;
        width: auto !important;
        font-size: 0.9rem;
        padding: 12px 20px;
    }

    /* Two-row nav is taller, so the hero needs matching clearance. */
    .hero-section { padding-top: 168px; }
}

@media (max-width: 380px) {
    .header-actions .nav-scarcity { font-size: 0.73rem; letter-spacing: 0; }
    .header-actions .btn { font-size: 0.84rem; padding: 11px 15px; }
    .header-actions .theme-toggle-btn { padding: 8px 12px 8px 10px; font-size: 0.79rem; }
    .hero-section { padding-top: 164px; }
}

/* Align the controls row to the title's own edges: the grid columns are
   sized to the title, so the toggle starts exactly where the title text
   starts and the CTA ends exactly where it ends. */
@media (max-width: 720px) {
    .header-actions {
        /* shrink-to-fit the widest row (the title), then centre the block */
        width: -moz-fit-content !important;
        width: fit-content !important;
        margin: 0 auto !important;
        justify-content: space-between;
    }
    /* Title spans both columns, so it sets the row width the controls align to. */
    .header-actions .nav-scarcity { justify-self: stretch; }
}

/* Mobile: tighten the header's internal padding and close the gap between
   the nav and the "For Founders" badge (was ~46px, more than needed). */
@media (max-width: 720px) {
    .header-nav { top: 10px !important; }
    .header-nav-inner { padding: 9px 14px !important; }
    .header-actions { row-gap: 9px; }

    /* Nav is ~101px tall + 10px offset; this leaves ~22px of breathing room. */
    .hero-section { padding-top: 134px; }

    .designed-for-badge { padding: 14px 16px; margin-bottom: 18px; }
    .designed-for-label { margin-bottom: 5px; }
}
@media (max-width: 380px) {
    .hero-section { padding-top: 130px; }
}