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

        /* ── Tessera Classic Register ── */
        :root {
            --classic-display: "Playfair Display", Georgia, serif;
            --classic-body: "Inter", "Helvetica Neue", sans-serif;
            --classic-mono: "JetBrains Mono", "Fira Code", monospace;
            --ink-navy: #111D30;
            --navy-depth: #1A2744;
            --teal-clarity: #1E7B8A;
            --teal-light: #2A9DB0;
            --amber-insight: #C9953D;
            --amber-warm: #DBA94E;
            --warm-ivory: #F5F0E8;

            /* ── Landscape palette ── */
            --sand-light: #D4B896;
            --sand-mid: #B89B72;
            --copper-cta: #A67B4B;
            --copper-hover: #C49260;
            --ridge-dark: #2A1F16;
            --ridge-mid: #3D2E1F;
            --ridge-fore: #1A1510;
            --haze-warm: rgba(212, 184, 150, 0.25);
            --text-body: #4a5568;
            --text-secondary: #5a6370;
            --text-muted-dark: #8a96a8;
            --text-muted-dark-accessible: #9ba8b8;
            --text-light: #f5f0e8;
            --bg-deep: #0d1520;
            --bg-deepest: #0a1018;
            --bg-footer: #0a1018;
            --bg-footer-bottom: #060a10;
            --surface-warm: #fafaf7;
            --surface-white: #fff;
            --border-subtle: rgba(0, 0, 0, 0.08);
            --border-subtle-dark: rgba(42, 157, 176, 0.12);
            --amber-mid: #8B6B3D;
            --mountain-far: #4A3A28;
            --text-light-soft: color-mix(in srgb, var(--text-light) 75%, transparent);
            --muted-border: rgba(138, 150, 168, 0.3);
            --nav-right-gutter: 52px;

            --space-1: 8px;
            --space-2: 16px;
            --space-3: 24px;
            --space-4: 32px;
            --space-5: 40px;
            --space-6: 48px;
            --space-8: 64px;
            --space-10: 80px;
        }

        /* ── Utilities ── */
        .sr-only {
            position: absolute; width: 1px; height: 1px;
            padding: 0; margin: -1px; overflow: hidden;
            clip: rect(0,0,0,0); white-space: nowrap; border: 0;
        }

        .fade-in-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .fade-in-up.visible { opacity: 1; transform: translateY(0); }

        @media (prefers-reduced-motion: reduce) {
            .fade-in-up { opacity: 1; transform: none; transition: none; }
        }

        /* ── Layout ── */
        .landing-section {
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .landing-content {
            width: min(1120px, 100% - 40px);
            margin: 0 auto;
        }

        .section-eyebrow {
            display: inline-block;
            font-family: var(--classic-body);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--teal-light);
            margin-bottom: 8px;
        }

        .section-heading {
            font-family: var(--classic-display);
            font-weight: 700;
            line-height: 1.2;
            color: var(--ink-navy);
            margin-bottom: 8px;
        }

        .section-heading--lg {
            font-size: clamp(1.5rem, 3vw, 2rem);
        }

        .section-heading--md {
            font-size: clamp(1.3rem, 2.5vw, 1.75rem);
        }

        /* Headings inside dark-background sections */
        .section-heading--light {
            color: var(--text-light);
        }

        .section-heading--mb16 {
            margin-bottom: 16px;
        }

        .section-heading--mb12 {
            margin-bottom: 12px;
        }

        /* Section copy variant for dark-bg sections */
        .section-copy--light {
            color: var(--text-muted-dark-accessible);
        }

        .section-copy--centered {
            margin: 0 auto 28px;
        }

        .section-copy--centered-sm {
            margin: 0 auto 20px;
        }

        /* What is AI Meeting Intelligence section */
        .landing-what-is {
            padding: 56px 0;
            background: var(--surface-white);
        }

        .landing-what-is .landing-content {
            max-width: 760px;
        }

        .what-is-body {
            font-family: var(--classic-body);
            font-size: 0.95rem;
            color: var(--text-body);
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .what-is-body:last-child {
            margin-bottom: 0;
        }

        .section-copy {
            font-family: var(--classic-body);
            max-width: 640px;
            color: var(--text-body);
            margin-bottom: 28px;
            line-height: 1.7;
        }

        /* ── 1. Navigation ── */
        .landing-nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(13, 21, 32, 0.96);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(42, 157, 176, 0.12);
            padding: 0 20px;
        }

        .dark-mode-nav-host {
            position: absolute !important;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 12px;
            left: auto;
            bottom: auto;
            margin: 0;
        }

        .landing-nav > div:not(.landing-content) {
            position: absolute !important;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
        }

        .landing-nav .dark-mode-toggle {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            margin: 0;
        }

        .landing-nav .landing-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 56px;
            padding-right: var(--nav-right-gutter);
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .nav-wordmark {
            font-family: var(--classic-display);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-light);
            letter-spacing: 0.04em;
        }

        .nav-links {
            display: flex;
            gap: 28px;
            list-style: none;
        }

        .nav-links a {
            font-family: var(--classic-body);
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-muted-dark-accessible);
            text-decoration: none;
            transition: color 0.2s;
        }

.skip-link {
            position: absolute;
            top: -100%;
            left: var(--space-2);
            padding: var(--space-1) var(--space-2);
            background: var(--teal-clarity);
            color: var(--surface-white);
            font-family: var(--classic-body);
            font-size: 0.875rem;
            font-weight: 600;
            border-radius: 6px;
            z-index: 200;
            text-decoration: none;
            transition: top 0.2s;
}
.skip-link:focus {
            top: var(--space-1);
}


        .nav-login {
            display: inline-block;
            font-family: var(--classic-body);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 8px 16px;
            border-radius: 6px;
            background: transparent;
            color: var(--text-light);
            text-decoration: none;
            border: 1px solid rgba(245, 240, 232, 0.25);
            transition: background 0.2s, border-color 0.2s, color 0.2s;
            margin-right: 8px;
        }
        .nav-login:hover { background: rgba(245, 240, 232, 0.08); border-color: var(--teal-clarity); color: var(--warm-ivory); }

        .nav-cta {
            display: inline-block;
            font-family: var(--classic-body);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 8px 16px;
            border-radius: 6px;
            background: var(--teal-clarity);
            color: var(--surface-white);
            text-decoration: none;
            transition: background 0.2s;
        }
        .nav-cta:hover { background: var(--teal-light); }

        .dark-mode-toggle {
            margin: 0;
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            background: none;
            border: 1px solid var(--muted-border);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-muted-dark);
            transition: color 0.2s, border-color 0.2s;
            flex-shrink: 0;
}

.dark-mode-toggle:hover {
            color: var(--text-light);
            border-color: rgba(245, 240, 232, 0.3);
}

.dark-mode-toggle:focus-visible {
            outline: 2px solid var(--teal-light);
            outline-offset: 2px;
}


        /* ── Tessera Gem (all sizes) ── */
        .gem {
            display: inline-block;
            vertical-align: middle;
            flex-shrink: 0;
        }

        .gem-hero {
            width: 260px;
            height: 260px;
            margin-bottom: 0;
            filter: drop-shadow(0 0 60px rgba(201, 149, 61, 0.4))
                    drop-shadow(0 0 120px rgba(30, 123, 138, 0.2))
                    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
            animation: gem-float 4s ease-in-out infinite;
            position: relative;
            z-index: 2;
        }

        .hero-gem-column {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .hero-gem-glow {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(
                circle,
                rgba(201, 149, 61, 0.35) 0%,
                rgba(30, 123, 138, 0.15) 40%,
                transparent 70%
            );
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            transform-origin: center;
            will-change: transform;
            z-index: 1;
            animation: glow-pulse 10s ease-in-out infinite;
            pointer-events: none;
        }

        @property --gem-angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }

        .hero-gem-light {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            transform-origin: center;
            will-change: transform;
            background: conic-gradient(
                from var(--gem-angle),
                transparent 0deg,
                rgba(30, 123, 138, 0.2) 60deg,
                transparent 120deg,
                rgba(201, 149, 61, 0.15) 200deg,
                transparent 280deg,
                rgba(30, 123, 138, 0.1) 340deg,
                transparent 360deg
            );
            mix-blend-mode: screen;
            animation: gem-light-rotate 12s linear infinite;
            z-index: 3;
            pointer-events: none;
        }

        .gem-nav {
            width: 28px;
            height: 28px;
        }

        .gem-cta {
            width: 64px;
            height: 64px;
            margin-bottom: 24px;
            filter: drop-shadow(0 4px 20px rgba(30, 123, 138, 0.2));
        }

        .gem-footer {
            width: 32px;
            height: 32px;
        }

        @keyframes gem-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        @keyframes glow-pulse {
            0%, 100% {
                background: radial-gradient(
                    circle,
                    rgba(201, 149, 61, 0.35) 0%,
                    rgba(30, 123, 138, 0.15) 40%,
                    transparent 70%
                );
                transform: scale(1);
            }
            50% {
                background: radial-gradient(
                    circle,
                    rgba(30, 123, 138, 0.3) 0%,
                    rgba(201, 149, 61, 0.2) 40%,
                    transparent 70%
                );
                transform: scale(1.08);
            }
        }

        @keyframes gem-light-rotate {
            from { --gem-angle: 0deg; }
            to { --gem-angle: 360deg; }
        }

        @media (prefers-reduced-motion: reduce) {
            .gem-hero { animation: none; }
            .hero-gem-glow { animation: none; }
            .hero-gem-light { animation: none; }
        }

        /* ── 2. Hero ── */
        .landing-hero {
            background: linear-gradient(
                180deg,
                var(--sand-light) 0%,
                var(--amber-insight) 25%,
                var(--amber-mid) 45%,
                var(--ink-navy) 70%,
                var(--bg-deep) 100%
            );
            padding: 120px 0 80px;
            text-align: left;
            clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
            position: relative;
            overflow: hidden;
            min-height: 85vh;
        }

        /* Warm + teal radial glows behind gem (right side) */
        .landing-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 800px 600px at 70% 45%, rgba(201, 149, 61, 0.25), transparent 70%),
                radial-gradient(ellipse 500px 400px at 65% 50%, rgba(30, 123, 138, 0.15), transparent 65%);
            pointer-events: none;
            z-index: 1;
        }

        /* Noise/grain texture overlay */
        .landing-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
            background-size: 200px 200px;
            opacity: 0.5;
            pointer-events: none;
            z-index: 5;
            mix-blend-mode: overlay;
        }

        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: var(--space-6);
            position: relative;
            z-index: 10;
            min-height: 400px;
        }

        .hero-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .landing-hero h1 {
            font-family: var(--classic-display);
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 700;
            line-height: 1.15;
            max-width: 600px;
            margin-bottom: 20px;
            text-transform: none;
            letter-spacing: normal;
            color: var(--text-light);
            background: linear-gradient(135deg, var(--text-light) 0%, var(--text-light) 60%, var(--amber-warm) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-sub {
            font-family: var(--classic-body);
            font-size: 1.125rem;
            color: var(--text-light-soft);
            max-width: 480px;
            margin-bottom: 28px;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .btn {
            display: inline-block;
            font-family: var(--classic-body);
            font-weight: 600;
            font-size: 0.875rem;
            text-decoration: none;
            padding: 12px 28px;
            border-radius: 6px;
            transition: background 0.2s, transform 0.15s;
            cursor: pointer;
            border: none;
        }
        .btn:hover { transform: translateY(-1px); }

.btn:focus-visible {
            outline: 2px solid var(--teal-light);
            outline-offset: 2px;
}

.nav-links a:focus-visible,
.nav-login:focus-visible,
.nav-cta:focus-visible,
.nav-brand:focus-visible {
            outline: 2px solid var(--teal-light);
            outline-offset: 2px;
            border-radius: 4px;
}

.faq-list summary:focus-visible {
            outline: 2px solid var(--teal-light);
            outline-offset: 2px;
}

.footer-column a:focus-visible {
            outline: 2px solid var(--teal-light);
            outline-offset: 2px;
            border-radius: 4px;
}

        .btn.primary {
            background: var(--teal-clarity);
            color: var(--surface-white);
        }
        .btn.primary:hover { background: var(--teal-light); }

        .btn.secondary {
            background: transparent;
            color: var(--text-muted-dark);
            border: 1px solid var(--muted-border);
        }
        .btn.secondary:hover {
            color: var(--text-light);
            border-color: rgba(245, 240, 232, 0.3);
        }

        .btn.ghost {
            background: transparent;
            color: var(--teal-light);
        }
        .btn.ghost:hover { color: var(--text-light); }

.nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 4px;
            background: none;
            border: none;
            cursor: pointer;
            padding: var(--space-1);
}

.hamburger-line {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--text-light);
            border-radius: 1px;
            transition: transform 0.2s, opacity 0.2s;
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
            opacity: 0;
}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
}


        /* ── Hero CTA Overrides ── */
        .landing-hero .btn.primary {
            background: var(--copper-cta);
            color: var(--text-light);
            border: 1px solid rgba(166, 123, 75, 0.4);
            box-shadow: 0 4px 16px rgba(166, 123, 75, 0.3);
        }
        .landing-hero .btn.primary:hover {
            background: var(--copper-hover);
            box-shadow: 0 6px 24px rgba(196, 146, 96, 0.4);
        }

        .landing-hero .btn.secondary {
            background: transparent;
            color: rgba(245, 240, 232, 0.7);
            border: 1px solid rgba(245, 240, 232, 0.2);
        }
        .landing-hero .btn.secondary:hover {
            color: var(--text-light);
            border-color: rgba(245, 240, 232, 0.4);
        }

        /* ── Hero Product Mockup ── */
        .hero-mockup {
            margin-top: 48px;
            max-width: 720px;
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(42, 157, 176, 0.15);
        }

        /* ── Hero Mockup Wrapper ── */
        .hero-mockup-wrap {
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            margin-top: 48px;
        }

        /* ── Mountain Silhouette Layers ── */
        .hero-mountains {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 55%;
            z-index: 2;
            pointer-events: none;
        }

        .mountain-layer {
            position: absolute;
            bottom: 0;
            left: -5%;
            right: -5%;
            width: 110%;
        }

        .mountain-far {
            height: 45%;
            background: var(--mountain-far);
            opacity: 0.6;
            clip-path: polygon(
                0% 100%,
                0% 65%,
                5% 55%,
                12% 42%,
                18% 48%,
                25% 30%,
                32% 38%,
                38% 22%,
                42% 28%,
                48% 18%,
                52% 25%,
                58% 15%,
                63% 22%,
                68% 32%,
                72% 20%,
                78% 35%,
                82% 28%,
                88% 40%,
                92% 35%,
                96% 45%,
                100% 50%,
                100% 100%
            );
            z-index: 1;
        }

        .mountain-mid {
            height: 38%;
            background: var(--ridge-mid);
            opacity: 0.85;
            clip-path: polygon(
                0% 100%,
                0% 72%,
                4% 60%,
                10% 50%,
                15% 55%,
                22% 38%,
                28% 45%,
                35% 28%,
                40% 35%,
                45% 25%,
                50% 32%,
                55% 22%,
                60% 30%,
                65% 40%,
                70% 28%,
                75% 42%,
                80% 35%,
                85% 48%,
                90% 42%,
                95% 55%,
                100% 60%,
                100% 100%
            );
            z-index: 2;
        }

        .mountain-near {
            height: 28%;
            background: var(--ridge-fore);
            clip-path: polygon(
                0% 100%,
                0% 70%,
                6% 58%,
                12% 65%,
                20% 45%,
                26% 52%,
                33% 38%,
                38% 48%,
                44% 35%,
                50% 42%,
                56% 32%,
                62% 45%,
                68% 55%,
                74% 42%,
                80% 55%,
                86% 48%,
                92% 60%,
                96% 55%,
                100% 65%,
                100% 100%
            );
            z-index: 3;
        }

        /* ── Atmospheric Haze ── */
        .hero-haze {
            position: absolute;
            bottom: 30%;
            left: 0;
            right: 0;
            height: 20%;
            background: linear-gradient(
                180deg,
                transparent 0%,
                var(--haze-warm) 40%,
                rgba(212, 184, 150, 0.15) 70%,
                transparent 100%
            );
            z-index: 4;
            pointer-events: none;
        }

        /* ── 3. Social Proof Bar ── */
        .landing-proof {
            background: var(--warm-ivory);
            padding: var(--space-4) 0;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }

        .proof-grid {
            display: flex;
            justify-content: center;
            gap: var(--space-6);
            flex-wrap: wrap;
        }

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

        .proof-stat .number {
            font-family: var(--classic-display);
            font-size: 2rem;
            font-weight: 700;
            color: var(--ink-navy);
        }

        .proof-stat .label {
            font-family: var(--classic-body);
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        /* ── 4. Value Pillars ── */
        .landing-pillars {
            padding: var(--space-10) 0;
            background: var(--surface-white);
        }

        .pillars-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: var(--space-3);
            margin-top: 8px;
        }

        .pillar-card {
            padding: 28px;
            border-radius: 8px;
            border: 1px solid var(--border-subtle);
            background: var(--surface-warm);
            transition: box-shadow 0.3s;
        }
        .pillar-card:hover {
            box-shadow: 0 8px 28px var(--border-subtle);
        }

        .pillar-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 16px;
            display: block;
            object-fit: contain;
        }

        .pillar-card h3 {
            font-family: var(--classic-display);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--ink-navy);
            margin-bottom: 8px;
        }

        .pillar-card p {
            font-family: var(--classic-body);
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* ── 5. Pipeline ── */
        .landing-pipeline {
            padding: var(--space-10) 0;
            background: var(--ink-navy);
            color: var(--text-light);
            clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
        }

        .pipeline-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--space-3);
            margin-top: 8px;
            counter-reset: step;
        }

        .pipeline-step {
            counter-increment: step;
            padding: 24px;
            border-radius: 8px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(42, 157, 176, 0.15);
        }

        .pipeline-step::before {
            content: "0" counter(step);
            font-family: var(--classic-mono);
            font-size: 0.75rem;
            color: var(--teal-light);
            letter-spacing: 0.08em;
            display: block;
            margin-bottom: 12px;
        }

        .pipeline-step-img {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 12px;
        }

        .pipeline-step h3 {
            font-family: var(--classic-display);
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-light);
        }

        .pipeline-step p {
            font-family: var(--classic-body);
            font-size: 0.875rem;
            color: var(--text-muted-dark-accessible);
            line-height: 1.6;
        }

        /* ── 6. Mid CTA ── */
        .landing-mid-cta {
            padding: 56px 0;
            background: var(--warm-ivory);
            text-align: center;
        }

        /* ── 7. Personas ── */
        .landing-personas {
            padding: var(--space-10) 0;
            background: var(--surface-white);
        }

        .personas-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-3);
            margin-top: 8px;
        }

        .persona-card {
            padding: 28px;
            border-radius: 8px;
            border: 1px solid var(--border-subtle);
            background: var(--surface-warm);
        }

        .persona-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 12px;
            border: 2px solid rgba(0,0,0,0.06);
        }

        .persona-role {
            font-family: var(--classic-mono);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--teal-clarity);
            margin-bottom: 12px;
        }

        .persona-card h3 {
            font-family: var(--classic-display);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--ink-navy);
            margin-bottom: 8px;
        }

        .persona-card p {
            font-family: var(--classic-body);
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* ── 8. Integrations ── */
        .landing-integrations {
            padding: var(--space-8) 0;
            background: var(--navy-depth);
            color: var(--text-light);
            text-align: center;
        }

        .integration-logos {
            display: flex;
            justify-content: center;
            gap: var(--space-4);
            flex-wrap: wrap;
            margin-top: 24px;
        }

        .integration-chip {
            font-family: var(--classic-mono);
            font-size: 0.8rem;
            padding: 10px 20px;
            border-radius: 8px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(42, 157, 176, 0.2);
            color: var(--text-muted-dark-accessible);
        }

        /* ── 9. Mastery ── */
        .landing-mastery {
            padding: var(--space-10) 0;
            background: var(--surface-white);
        }

        .mastery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: var(--space-3);
            margin-top: 8px;
        }

        .mastery-card {
            padding: 24px;
            border-radius: 8px;
            border: 1px solid var(--border-subtle);
            background: var(--surface-warm);
        }

        .mastery-card h3 {
            font-family: var(--classic-display);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--ink-navy);
            margin-bottom: 8px;
        }

        .mastery-card p {
            font-family: var(--classic-body);
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* ── 10. Pricing ── */
        .landing-pricing {
            padding: var(--space-10) 0;
            background: var(--warm-ivory);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: var(--space-3);
            margin-top: 8px;
        }

        .pricing-toggle {
            display: flex;
            justify-content: center;
            gap: 4px;
            margin: 16px auto 0;
            background: var(--border-subtle);
            border-radius: 6px;
            padding: 3px;
            width: fit-content;
        }

        .pricing-toggle-btn {
            font-family: var(--classic-body);
            font-size: 0.8125rem;
            font-weight: 600;
            padding: 6px 16px;
            border: none;
            border-radius: 4px;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 150ms ease, color 150ms ease;
        }

        .pricing-toggle-btn.active {
            background: var(--surface-white);
            color: var(--ink-navy);
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .pricing-badge {
            font-size: 0.6875rem;
            font-weight: 700;
            color: var(--teal-clarity);
            margin-left: 4px;
        }

        .pricing-card {
            padding: 28px;
            border-radius: 8px;
            border: 1px solid var(--border-subtle);
            background: var(--surface-white);
            display: flex;
            flex-direction: column;
        }

        .pricing-card.featured {
            border-color: var(--teal-clarity);
            box-shadow: 0 4px 20px rgba(30, 123, 138, 0.12);
        }

        .pricing-tier {
            font-family: var(--classic-mono);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--teal-clarity);
            margin-bottom: 8px;
        }

        .pricing-card h3 {
            font-family: var(--classic-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--ink-navy);
            margin-bottom: 4px;
        }

        .pricing-price {
            font-family: var(--classic-body);
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
        }

        .pricing-features {
            list-style: none;
            padding: 0;
            margin: 0 0 20px;
            flex: 1;
        }

        .pricing-features li {
            font-family: var(--classic-body);
            font-size: 0.8125rem;
            color: var(--text-secondary);
            padding: 6px 0;
            border-bottom: 1px solid rgba(0,0,0,0.04);
        }

        .pricing-features li::before {
            content: "\2713 ";
            color: var(--teal-clarity);
            font-weight: 600;
        }

        .pricing-card .btn-link {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-family: var(--classic-body);
            font-size: 0.8125rem;
            color: var(--teal-clarity);
            text-decoration: underline;
            background: none;
            border: none;
            cursor: pointer;
        }

        /* ── 11. FAQ ── */
        .landing-faq {
            padding: var(--space-10) 0;
            background: var(--surface-white);
        }

        .faq-list {
            max-width: 720px;
            margin: 8px auto 0;
        }

        .faq-list details {
            border-bottom: 1px solid var(--border-subtle);
        }

        .faq-list summary {
            font-family: var(--classic-body);
            font-size: 1rem;
            font-weight: 600;
            color: var(--ink-navy);
            padding: 18px 0;
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-list summary::-webkit-details-marker {
            display: none;
        }

        .faq-list summary::after {
            content: "+";
            font-size: 1.25rem;
            color: var(--teal-clarity);
            transition: transform 0.2s;
        }

        .faq-list details[open] summary::after {
            content: "\2212";
        }

        .faq-list details p {
            font-family: var(--classic-body);
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.7;
            padding: 0 0 18px;
        }

        /* ── 12. Final CTA ── */
        .landing-final-cta {
            padding: var(--space-10) 0;
            background: linear-gradient(168deg, var(--navy-depth) 0%, var(--ink-navy) 100%);
            text-align: center;
            color: var(--text-light);
            clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
        }

        /* ── 13. Footer ── */
        .landing-footer {
            background: var(--bg-footer);
            padding: var(--space-6) 0 var(--space-4);
            color: var(--text-muted-dark);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: var(--space-4);
        }

        .footer-brand {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .footer-muse {
            font-family: var(--classic-display);
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-light);
            letter-spacing: 0.08em;
        }

        .footer-tagline {
            font-family: var(--classic-body);
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .footer-column h3 {
            font-family: var(--classic-body);
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .footer-column a {
            display: block;
            font-family: var(--classic-body);
            font-size: 0.8125rem;
            color: var(--text-muted-dark);
            text-decoration: none;
            padding: 4px 0;
            transition: color 0.2s;
        }
        .footer-column a:hover { color: var(--text-light); }

        .footer-bottom {
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.06);
            font-family: var(--classic-body);
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-align: center;
        }

        /* ── Vibrancy: Section Dividers ── */
        .landing-proof,
        .landing-mid-cta,
        .landing-pricing {
            position: relative;
        }

        .landing-proof::before,
        .landing-mid-cta::before,
        .landing-pricing::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--teal-clarity), var(--teal-light), var(--amber-insight), var(--amber-warm));
            z-index: 2;
        }

        /* ── Vibrancy: Card Hover States ── */
        .pillar-card,
        .persona-card,
        .mastery-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .pillar-card:hover,
        .persona-card:hover,
        .mastery-card:hover {
            transform: translateY(-3px);
            border-color: rgba(30, 123, 138, 0.18);
            box-shadow: 0 12px 40px rgba(30, 123, 138, 0.08), 0 4px 16px rgba(0,0,0,0.06);
        }

        .pillar-card {
            border-left: 3px solid var(--teal-clarity);
        }

        /* ── Vibrancy: Dark Section Textures ── */
        .landing-pipeline,
        .landing-integrations,
        .landing-final-cta {
            position: relative;
            overflow: hidden;
        }

        .landing-pipeline > .landing-content,
        .landing-integrations > .landing-content,
        .landing-final-cta > .landing-content {
            position: relative;
            z-index: 1;
        }

        .landing-pipeline::before,
        .landing-integrations::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(42, 157, 176, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
        }

        /* ── Vibrancy: Eyebrow Accent Underlines ── */
        .section-eyebrow {
            position: relative;
            padding-bottom: 14px;
        }

        .section-eyebrow::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 2px;
            background: linear-gradient(90deg, var(--teal-clarity), var(--amber-insight));
            border-radius: 1px;
        }

        /* Left-aligned eyebrows (inside cards/non-centered sections) */
        .landing-pillars .section-eyebrow::after,
        .landing-personas .section-eyebrow::after,
        .landing-mastery .section-eyebrow::after,
        .landing-faq .section-eyebrow::after {
            left: 0;
            transform: none;
        }

        /* ── Vibrancy: Social Proof Numbers ── */
        .proof-stat .number {
            color: var(--teal-clarity);
        }

        /* ── Vibrancy: Pipeline Step Color Progression ── */
        .pipeline-step:nth-child(1)::before { color: var(--teal-light); }
        .pipeline-step:nth-child(2)::before { color: var(--teal-clarity); }
        .pipeline-step:nth-child(3)::before { color: var(--amber-insight); }
        .pipeline-step:nth-child(4)::before { color: var(--amber-warm); }

        .pipeline-step:nth-child(1) { border-color: rgba(42, 157, 176, 0.25); }
        .pipeline-step:nth-child(2) { border-color: rgba(30, 123, 138, 0.2); }
        .pipeline-step:nth-child(3) { border-color: rgba(201, 149, 61, 0.2); }
        .pipeline-step:nth-child(4) { border-color: rgba(219, 169, 78, 0.25); }

        /* ── Vibrancy: Featured Pricing Card ── */
        .pricing-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .pricing-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px var(--border-subtle);
        }

        .pricing-card.featured {
            border-width: 2px;
            position: relative;
            overflow: hidden;
            transform: scale(1.02);
        }

        .pricing-card.featured::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--teal-clarity), var(--amber-insight));
        }

        .pricing-card.featured:hover {
            box-shadow: 0 16px 48px rgba(30, 123, 138, 0.15), 0 0 0 1px var(--teal-clarity);
        }

        /* ── Vibrancy: Final CTA Glow ── */
        .landing-final-cta::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse at 30% 50%, rgba(30, 123, 138, 0.12), transparent 50%),
                radial-gradient(ellipse at 70% 50%, rgba(201, 149, 61, 0.1), transparent 45%);
            pointer-events: none;
            z-index: 0;
        }

        .final-cta-btn {
            box-shadow: 0 4px 24px rgba(30, 123, 138, 0.3), 0 0 60px rgba(30, 123, 138, 0.1);
        }

        .final-cta-btn:hover {
            box-shadow: 0 8px 32px rgba(30, 123, 138, 0.4), 0 0 80px rgba(30, 123, 138, 0.15);
        }

        /* ── Vibrancy: Integration Chip Hover ── */
        .integration-chip {
            transition: border-color 0.2s, color 0.2s, background 0.2s;
        }

        .integration-chip:hover {
            border-color: rgba(42, 157, 176, 0.4);
            color: var(--teal-light);
            background: rgba(42, 157, 176, 0.08);
        }

        /* ── Vibrancy: Dark Mode Overrides ── */
        /* Landing-page palette swap for dark mode. */

        body.dark-mode {
            --warm-ivory: var(--bg-deep);     /* flip warm ivory bg */
        }

        /* ── Section backgrounds ── */
        body.dark-mode .landing-pillars,
        body.dark-mode .landing-personas,
        body.dark-mode .landing-mastery,
        body.dark-mode .landing-faq {
            background: var(--bg-deepest);
        }

        body.dark-mode .landing-proof,
        body.dark-mode .landing-mid-cta,
        body.dark-mode .landing-pricing {
            background: var(--bg-deep);
        }

        /* What-is section */
        body.dark-mode .landing-what-is {
            background: var(--bg-deepest);
        }

        /* ── Headings ── */
        body.dark-mode .section-heading {
            color: var(--text-light);
        }

        /* ── Body text ── */
        body.dark-mode .section-copy {
            color: var(--text-muted-dark-accessible);
        }

        body.dark-mode .what-is-body {
            color: var(--text-muted-dark-accessible);
        }

        body.dark-mode .landing-mid-cta .section-copy {
            color: var(--text-muted-dark-accessible);
        }

        /* ── Social proof ── */
        body.dark-mode .proof-stat .number {
            color: var(--teal-light);
        }

        body.dark-mode .proof-stat .label {
            color: var(--text-muted-dark);
        }

        body.dark-mode .landing-proof {
            border-bottom-color: rgba(255, 255, 255, 0.04);
        }

        /* ── Cards ── */
        body.dark-mode .pillar-card,
        body.dark-mode .persona-card,
        body.dark-mode .mastery-card {
            background: rgba(14, 20, 30, 0.9);
            border-color: rgba(42, 157, 176, 0.12);
        }

        body.dark-mode .pillar-card {
            border-left-color: var(--teal-clarity);
        }

        body.dark-mode .pillar-card h3,
        body.dark-mode .persona-card h3,
        body.dark-mode .mastery-card h3 {
            color: var(--text-light);
        }

        body.dark-mode .pillar-card p,
        body.dark-mode .persona-card p,
        body.dark-mode .mastery-card p {
            color: var(--text-muted-dark-accessible);
        }

        /* ── Persona extras ── */
        body.dark-mode .persona-role {
            color: var(--teal-light);
        }

        body.dark-mode .persona-avatar {
            border-color: rgba(42, 157, 176, 0.2);
        }

        /* ── Pipeline (already dark, just tweak text) ── */
        body.dark-mode .landing-pipeline {
            background: var(--bg-deep);
        }

        /* ── Integrations (already dark) ── */
        body.dark-mode .landing-integrations {
            background: var(--ink-navy);
        }

        body.dark-mode .integration-chip {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(42, 157, 176, 0.2);
            color: var(--text-muted-dark-accessible);
        }

        /* ── Pricing ── */
        body.dark-mode .pricing-card {
            background: rgba(14, 20, 30, 0.9);
            border-color: rgba(42, 157, 176, 0.1);
        }

        body.dark-mode .pricing-card.featured {
            border-color: var(--teal-clarity);
        }

        body.dark-mode .pricing-toggle {
            background: rgba(255,255,255,0.08);
        }

        body.dark-mode .pricing-toggle-btn.active {
            background: var(--ink-navy);
            color: var(--warm-ivory);
        }

        body.dark-mode .pricing-card h3 {
            color: var(--text-light);
        }

        body.dark-mode .pricing-tier {
            color: var(--teal-light);
        }

        body.dark-mode .pricing-price {
            color: var(--text-muted-dark);
        }

        body.dark-mode .pricing-features li {
            color: var(--text-muted-dark);
            border-bottom-color: rgba(255, 255, 255, 0.04);
        }

        body.dark-mode .pricing-features li::before {
            color: var(--teal-light);
        }

        /* ── FAQ ── */
        body.dark-mode .faq-list summary {
            color: var(--text-light);
        }

        body.dark-mode .faq-list details {
            border-bottom-color: rgba(255, 255, 255, 0.06);
        }

        body.dark-mode .faq-list details p {
            color: var(--text-muted-dark);
        }

        body.dark-mode .faq-list summary::after {
            color: var(--teal-light);
        }

        /* ── Buttons in light sections ── */
        body.dark-mode .btn.primary {
            background: var(--teal-clarity);
            color: var(--surface-white);
            border-color: var(--teal-clarity);
        }

        body.dark-mode .btn.primary:hover {
            background: var(--teal-light);
        }

        body.dark-mode .btn.secondary {
            color: var(--text-muted-dark-accessible);
            border-color: rgba(155, 168, 184, 0.3);
        }

        body.dark-mode .btn.secondary:hover {
            color: var(--text-light);
            border-color: rgba(245, 240, 232, 0.3);
        }

        /* Hero CTA buttons stay copper in dark mode */
        body.dark-mode .landing-hero .btn.primary {
            background: var(--copper-cta);
            color: var(--text-light);
            border-color: rgba(166, 123, 75, 0.4);
        }

        body.dark-mode .landing-hero .btn.primary:hover {
            background: var(--copper-hover);
        }

        body.dark-mode .landing-hero .btn.secondary {
            color: rgba(245, 240, 232, 0.7);
            border-color: rgba(245, 240, 232, 0.2);
        }

        /* ── Final CTA (already dark, just reinforce) ── */
        body.dark-mode .landing-final-cta {
            background: linear-gradient(168deg, var(--bg-deep) 0%, #111d30 100%);
        }

        /* ── Footer (already dark) ── */
        body.dark-mode .landing-footer {
            background: var(--bg-footer-bottom);
        }

        /* ── Nav (already dark, reinforce for consistency) ── */
        body.dark-mode .landing-nav {
            background: rgba(6, 10, 16, 0.97);
            border-bottom-color: rgba(42, 157, 176, 0.15);
        }

        /* ── Eyebrow text ── */
        body.dark-mode .section-eyebrow {
            color: var(--teal-light);
        }

        /* ── Section divider gradients (on dark bg, make subtler) ── */
        body.dark-mode .landing-proof::before,
        body.dark-mode .landing-mid-cta::before,
        body.dark-mode .landing-pricing::before {
            opacity: 0.6;
        }

        /* ── Card hover states in dark mode ── */
        body.dark-mode .pillar-card:hover,
        body.dark-mode .persona-card:hover,
        body.dark-mode .mastery-card:hover {
            border-color: rgba(42, 157, 176, 0.25);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(42, 157, 176, 0.06);
        }

        body.dark-mode .pricing-card:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .pricing-card.featured:hover {
            box-shadow: 0 16px 48px rgba(30, 123, 138, 0.2), 0 0 0 1px var(--teal-clarity);
        }

        /* ── Responsive ── */
        @media (max-width: 768px) {
            .nav-hamburger { display: flex; }

            .nav-links {
                display: none;
                position: absolute;
                top: 56px;
                left: 0;
                right: 0;
                flex-direction: column;
                background: rgba(13, 21, 32, 0.98);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                padding: var(--space-2) 0;
                border-bottom: 1px solid var(--border-subtle-dark);
                gap: 0;
            }

            .nav-links.open {
                display: flex;
            }

            .nav-links a {
                padding: 12px 20px;
                font-size: 0.875rem;
            }

            .landing-hero {
                padding: 80px 0 60px;
                text-align: center;
                min-height: auto;
            }

            .hero-content {
                grid-template-columns: 1fr;
                gap: var(--space-4);
                min-height: auto;
            }

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

            .landing-hero h1 {
                font-size: 1.75rem;
                max-width: 100%;
            }

            .hero-sub { font-size: 1rem; max-width: 100%; }

            .hero-actions { justify-content: center; }

            .hero-gem-column { order: -1; }

            .gem-hero { width: 120px; height: 120px; }

            .hero-gem-glow { width: 200px; height: 200px; }
            .hero-gem-light { width: 160px; height: 160px; }

            .hero-mountains { height: 35%; }
            .hero-haze { bottom: 20%; }

            .pricing-card.featured { transform: none; }

            .nav-login { padding: 6px 12px; font-size: 10px; margin-right: 4px; }
            .nav-cta { padding: 6px 12px; font-size: 10px; }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: var(--space-3);
            }

            .proof-grid { gap: var(--space-3); }

            .landing-pipeline,
            .landing-hero,
            .landing-final-cta { clip-path: none; }
        }

        @media (max-width: 480px) {
            .footer-grid { grid-template-columns: 1fr; }
            .gem-hero { width: 96px; height: 96px; }
            .hero-gem-glow { width: 160px; height: 160px; }
            .hero-gem-light { width: 130px; height: 130px; }
            .hero-mountains { height: 25%; }
            .hero-gem-column {
                min-height: auto;
            }
        }