/* ═══════════════════════════════════════════════════════════════════════
   Marketing design system — tokens, type scale, section shell, buttons, hero,
   marking demo, the story rail, exam-system tiles, stats, subject marquee, FAQ
   and CTA band.

   Copied verbatim from the inline <style> block in templates/homepage.html so
   the landing pages speak exactly the same visual language as the homepage.
   The homepage still carries its own copy; when it is switched over to this
   file, delete that copy rather than editing both.

   Token names are a contract — static/topnav.css and static/marketing-nav.css
   both resolve --card, --border, --text-2, --accent-text and friends from here.

   Pairs with static/marketing-nav.css (page chrome) and, on pages that need
   them, static/motion.css + static/cursor.css.
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ─────────── TOKENS — venture-grade white-first palette.
           Names are a contract: nav/auth-modal/sticky CSS carried from the
           previous page read these exact variables. ─────────── */
:root {
            --bg: #ffffff;
            --bg-soft: #f7f8fd;            /* alternating tinted band */
            --card: #ffffff;
            --indigo: #5b50e8;
            --indigo-dark: #4338ca;
            --indigo-light: #818cf8;
            --indigo-muted: rgba(91, 80, 232, .07);
            --violet-shade: #4338ca;       /* legacy 3D-press underside → now the hover tone */
            --cyan: #18c0dd;
            --gold: #f59e0b;
            --grad-hero: linear-gradient(135deg, #6d5cff 0%, #5b50e8 60%, #4338ca 100%);
            --grad-brand: linear-gradient(135deg, #6d5cff 0%, #8b5cf6 100%);
            --grad-cta: linear-gradient(135deg, #6156ee 0%, #5348d6 100%);
            --text: #0e1220;
            --text-2: #454e63;
            --text-3: #5f6a80;
            --accent-text: var(--indigo);
            --border: rgba(14, 18, 32, .09);
            --border-2: rgba(14, 18, 32, .14);
            --green: #16a34a;
            --amber: #d97706;
            --red: #dc2626;
            --shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 8px 24px rgba(14, 18, 32, .06);
            --shadow-hover: 0 2px 6px rgba(14, 18, 32, .05), 0 18px 44px rgba(14, 18, 32, .10);
            --r: 16px;
            --font-display: var(--font-ui);
            --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            /* aliases the shared auth-modal CSS (ported from the app) resolves */
            --violet: var(--indigo);
            --text-primary: var(--text);
            --text-secondary: var(--text-2);
            --text-muted: var(--text-3);
        }

/* ─────────── DARK MODE TOKENS ─────────── */
[data-dark] {
            /* brand violet is ~3:1 as text on dark — links use the purple ramp */
            --violet-text: #9d94ff;
            /* Surface ladder — page → major surface → elevated card → interactive.
               Neutral charcoal by design: the brand purple is an accent
               (CTAs, active/selected, progress, branding), never a surface tint. */
            --surface-0: #111113;   /* page ground */
            --surface-1: #18181B;   /* nav, rail, recessed tracks */
            --surface-2: #1D1D21;   /* elevated cards and panels */
            --surface-3: #232327;   /* inputs, chips, secondary controls */
            --line: rgba(255, 255, 255, 0.08);   /* subtle divider */
            --line-strong: #34343A;              /* structural divider */
            /* --text-muted is 4.29:1 on --surface-3; use this tone for muted
               text that sits ON an interactive/secondary surface. */
            --text-muted-raised: #9B9BA4;

            --bg: var(--surface-0);
            --bg-soft: var(--surface-1);
            --card: var(--surface-2);
            --text: #F5F5F7;
            --text-2: #B4B4BD;
            --text-3: #85858F;
            /* the dark accent is the purple ramp, not the light theme's indigo */
            --indigo-light: #9d94ff;
            --accent-text: var(--indigo-light);
            --border: var(--line);
            --border-2: rgba(255, 255, 255, 0.14);
            --indigo-muted: rgba(157, 148, 255, 0.1);
            --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
            --shadow-hover: 0 4px 8px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .5);
        }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
            font-family: var(--font-ui);
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

[data-dark] body { background: var(--bg); }

a { color: var(--accent-text); }

/* Use the shared type family for clear, consistent heading hierarchy. */
h1, h2, h3, .num { font-family: var(--font-display); letter-spacing: -.01em; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; }

/* ─────────── SECTION SHELL ─────────── */
.section { padding: 104px 0; position: relative; }

.section--band { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { max-width: 640px; margin-bottom: 52px; }

.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-title {
            font-size: clamp(1.9rem, 3.4vw, 2.7rem);
            line-height: 1.12;
            font-weight: 700;
            letter-spacing: -.02em;
            margin: 14px 0 14px;
        }

.section-title em { font-style: italic; color: var(--accent-text); }

.section-sub { font-size: 1.05rem; color: var(--text-2); font-weight: 500; line-height: 1.65; }

.eyebrow {
            display: inline-flex; align-items: center; gap: 9px;
            font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
            color: var(--accent-text);
        }

.eyebrow::before { content: ''; width: 20px; height: 2px; border-radius: 2px; background: var(--indigo); }

.section-head.center .eyebrow::after { content: ''; width: 20px; height: 2px; border-radius: 2px; background: var(--indigo); }

/* ─────────── BUTTONS — calm, solid, precise ─────────── */
.btn-primary {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            background: var(--grad-cta); color: #fff;
            font-family: var(--font-ui); font-weight: 600; font-size: 1rem;
            padding: 14px 26px; border-radius: 12px; border: none; cursor: pointer;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(67, 56, 202, .35), 0 10px 26px rgba(91, 80, 232, .28);
            transition: transform .16s ease, box-shadow .2s ease;
        }

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(67, 56, 202, .35), 0 16px 34px rgba(91, 80, 232, .34); }

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            background: var(--card); color: var(--text);
            font-family: var(--font-ui); font-weight: 600; font-size: 1rem;
            padding: 14px 24px; border-radius: 12px; border: 1.5px solid var(--border-2);
            cursor: pointer; text-decoration: none;
            transition: border-color .16s ease, background .16s ease, transform .16s ease;
        }

.btn-ghost:hover { border-color: var(--indigo); color: var(--accent-text); transform: translateY(-1px); }

/* skip link — visually hidden until focused */
.skip-link {
            position: fixed; top: -64px; left: 16px; z-index: 3000;
            background: var(--indigo); color: #fff; font-weight: 700;
            padding: 10px 16px; border-radius: 10px; text-decoration: none;
            transition: top .2s ease;
        }

.skip-link:focus { top: 12px; }

/* Mobile: stop tap-to-zoom. 16px form fields kill iOS focus-zoom; touch-action
           kills double-tap zoom. Pinch-zoom still works, so accessibility is preserved. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

a, button, input, select, textarea, label, [role="button"], [onclick] { touch-action: manipulation; }

body {
            font-family: var(--font-ui);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            background-color: var(--bg);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden
        }

/* ── FOOTER ── */
footer {
            border-top: 1px solid rgba(91, 80, 232, .13);
            background: #fff;
            padding: 32px clamp(20px, 5vw, 80px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px
        }

.footer-copy {
            font-size: .8rem;
            color: var(--text-3)
        }

.footer-links {
            display: flex;
            gap: 20px;
            list-style: none
        }

.footer-links a {
            font-size: .8rem;
            color: var(--text-3);
            text-decoration: none;
            transition: color .2s
        }

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

.reveal {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .45s cubic-bezier(.25, .6, .35, 1), transform .45s cubic-bezier(.25, .6, .35, 1)
        }

.reveal.visible {
            opacity: 1;
            transform: translateY(0)
        }

.reveal-group>* {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity .4s cubic-bezier(.25, .6, .35, 1), transform .4s cubic-bezier(.25, .6, .35, 1)
        }

/* Visibility is restored for EVERY child, whatever the count. This used to
           be six nth-child rules and nothing else, so a group with more than six
           children left the extras stuck at opacity:0 forever — the features grid
           has eight, and cards 7 and 8 ("Points, streaks & achievements" and
           "Shareable score cards") never rendered for anyone. Stagger is a
           separate, purely decorative concern below; it must never be what makes
           content appear. */
.reveal-group.visible>* {
            opacity: 1;
            transform: none;
        }

/* Decorative stagger only. Children past the ramp simply land together,
           which is also what you want — a long tail of delays reads as lag. */
.reveal-group.visible>*:nth-child(1) { transition-delay: 0s }

.reveal-group.visible>*:nth-child(2) { transition-delay: .05s }

.reveal-group.visible>*:nth-child(3) { transition-delay: .10s }

.reveal-group.visible>*:nth-child(4) { transition-delay: .15s }

.reveal-group.visible>*:nth-child(5) { transition-delay: .20s }

.reveal-group.visible>*:nth-child(6) { transition-delay: .25s }

.reveal-group.visible>*:nth-child(7) { transition-delay: .30s }

.reveal-group.visible>*:nth-child(8) { transition-delay: .35s }

/* ─────────── HERO ─────────── */
.hero {
            position: relative;
            padding: 128px 0 104px;
            overflow: hidden;
            outline: none;
        }

.hero::before {
            /* single restrained tint — no blobs, no aurora */
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(900px 480px at 78% -10%, rgba(91, 80, 232, .07), transparent 62%),
                linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 46%);
            pointer-events: none;
        }

[data-dark] .hero::before {
            background:
                radial-gradient(900px 480px at 78% -10%, rgba(109, 92, 255, .12), transparent 62%),
                linear-gradient(180deg, #18181B 0%, var(--bg) 52%);
        }

.hero-grid {
            display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center;
            position: relative;
        }

.hero-eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--card); border: 1px solid var(--border-2);
            padding: 7px 14px; border-radius: 999px;
            font-size: .8rem; font-weight: 700; color: var(--text-2);
            box-shadow: var(--shadow);
        }

.hero h1 {
            font-size: clamp(2.35rem, 4.6vw, 3.55rem);
            line-height: 1.06;
            font-weight: 700;
            letter-spacing: -.024em;
            margin: 22px 0 18px;
        }

.hero h1 em { font-style: normal; color: var(--accent-text); }

.hero-sub {
            font-size: 1.13rem; color: var(--text-2); font-weight: 500;
            line-height: 1.62; max-width: 480px;
        }

.hero-actions { display: flex; gap: 12px; margin: 30px 0 14px; flex-wrap: wrap; }

.hero-actions .btn-primary { font-size: 1.05rem; padding: 16px 30px; }

.hero-actions .btn-ghost { font-size: 1.05rem; padding: 16px 26px; }

/* ─────────── MARKING DEMO (hero visual) ─────────── */
.mark-slot { padding-top: 160px; }

/* full-body Avi hangs 148px above the card */
.mark-demo {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 18px;
            box-shadow: 0 1px 2px rgba(14,18,32,.04), 0 24px 64px rgba(31, 27, 100, .12);
            padding: 22px 22px 20px;
            max-width: 500px;
            margin-left: auto;
            position: relative;
        }

[data-dark] .mark-demo { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.5); }

.md-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.md-chip {
            font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
            color: var(--accent-text); background: var(--indigo-muted);
            border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px;
        }

.md-q { font-weight: 700; font-size: .98rem; line-height: 1.45; margin-bottom: 12px; }

.md-q .md-marks { color: var(--text-3); font-weight: 700; white-space: nowrap; }

.md-ans {
            background: var(--bg-soft); border: 1px solid var(--border);
            border-radius: 12px; padding: 11px 13px; margin-bottom: 14px;
        }

.md-ans-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }

.md-ans-text { font-size: .9rem; font-weight: 500; color: var(--text-2); line-height: 1.55; min-height: 3.1em; }

.md-marking {
            display: none; align-items: center; gap: 9px;
            font-size: .85rem; font-weight: 700; color: var(--accent-text);
            padding: 4px 0 10px;
        }

.md-spin {
            width: 14px; height: 14px; border-radius: 50%;
            border: 2.5px solid var(--indigo-muted); border-top-color: var(--indigo);
            animation: mdspin .7s linear infinite;
        }

.md-result { border-top: 1px solid var(--border); padding-top: 14px; }

.md-score { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }

.md-score-n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--text); }

.md-score-n span { font-size: 1.1rem; color: var(--text-3); font-weight: 700; }

.md-score-l { font-size: .82rem; font-weight: 700; color: var(--text-3); }

.md-crit { list-style: none; display: grid; gap: 7px; margin-bottom: 13px; }

.md-crit li {
            display: flex; align-items: flex-start; gap: 9px;
            font-size: .87rem; font-weight: 700; color: var(--text-2); line-height: 1.4;
        }

.md-crit li i {
            flex: none; width: 20px; height: 20px; border-radius: 6px;
            display: grid; place-items: center; margin-top: 1px;
        }

.md-crit li.ok i   { background: rgba(22, 163, 74, .12); }

.md-crit li.part i { background: rgba(217, 119, 6, .13); }

.md-crit li.miss i { background: rgba(220, 38, 38, .11); }

.md-crit li b.md-crit-mark {
            flex: none; margin-left: auto; padding-left: 10px;
            font-size: .78rem; font-weight: 800; color: var(--text-3);
            font-variant-numeric: tabular-nums; letter-spacing: .01em;
        }

.md-sr {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
        }

.md-improve {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: .9rem; font-weight: 700; color: var(--accent-text); text-decoration: none;
        }

.md-improve:hover { text-decoration: underline; }

/* demo state machine — default markup state is the FINAL frame (no-JS + reduced motion) */
.mark-demo[data-step="0"] .md-ans,
        .mark-demo[data-step="0"] .md-marking,
        .mark-demo[data-step="0"] .md-result,
        .mark-demo[data-step="1"] .md-marking,
        .mark-demo[data-step="1"] .md-result,
        .mark-demo[data-step="2"] .md-result { display: none; }

.mark-demo[data-step="2"] .md-marking { display: flex; }

.mark-demo[data-step="3"] .md-improve { visibility: hidden; }

.mark-demo[data-step="3"] .md-crit li,
        .mark-demo[data-step="4"] .md-crit li { animation: mdrow .4s ease both; animation-delay: calc(var(--i) * 130ms); }

@media (prefers-reduced-motion: reduce) {
    .mark-demo .md-crit li { animation: none !important; }
}

/* ─────────── COMPARE (ChatGPT vs) ─────────── */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.compare-col {
            background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
            padding: 26px; box-shadow: var(--shadow);
        }

.compare-col.atar { border-color: rgba(91, 80, 232, .3); }

.compare-label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

.compare-col.atar .compare-label { color: var(--accent-text); }

.flow { list-style: none; display: grid; gap: 0; }

.flow li { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 18px; }

.flow li:last-child { padding-bottom: 0; }

.flow li::before {
            content: ''; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px;
            background: var(--border);
        }

.flow li:last-child::before { display: none; }

.flow i {
            flex: none; width: 28px; height: 28px; border-radius: 9px;
            display: grid; place-items: center;
            background: var(--bg-soft); border: 1px solid var(--border);
            font-style: normal; position: relative; z-index: 1;
        }

.compare-col.atar .flow i { background: var(--indigo-muted); border-color: rgba(91, 80, 232, .22); }

.flow b { display: block; font-size: .95rem; font-weight: 700; color: var(--text); }

.flow span { font-size: .86rem; font-weight: 600; color: var(--text-3); line-height: 1.45; }

.compare-note { margin-top: 26px; font-size: .98rem; font-weight: 700; color: var(--text-2); text-align: center; }

/* ─────────── SCROLL STORY (#how) ─────────── */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.story-steps { display: grid; gap: 0; }

.story-step {
            padding: 30px 0 30px 26px; border-left: 2px solid var(--border);
            position: relative; transition: border-color .25s ease;
        }

.story-step::before {
            content: ''; position: absolute; left: -7px; top: 40px;
            width: 12px; height: 12px; border-radius: 50%;
            background: var(--bg); border: 2px solid var(--border-2);
            transition: background .25s ease, border-color .25s ease;
        }

.story-step.active { border-left-color: var(--indigo); }

.story-step.active::before { background: var(--indigo); border-color: var(--indigo); }

.story-num { font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--text-3); }

.story-step.active .story-num { color: var(--accent-text); }

.story-step h3 { font-size: 1.35rem; font-weight: 700; margin: 5px 0 7px; }

.story-step p { font-size: .97rem; font-weight: 500; color: var(--text-2); max-width: 380px; }

.story-visual { position: sticky; top: 96px; height: 460px; }

.story-panel {
            position: absolute; inset: 0;
            background: var(--card); border: 1px solid var(--border); border-radius: 20px;
            box-shadow: var(--shadow); padding: 28px;
            opacity: 0; transform: translateY(8px);
            transition: opacity .35s ease, transform .35s ease;
            pointer-events: none;
            display: flex; flex-direction: column; justify-content: center; gap: 12px;
            overflow: hidden;
        }

.story-panel.on { opacity: 1; transform: none; pointer-events: auto; }

.story-step-visual { display: none; }

@media (prefers-reduced-motion: reduce) {
    .story-panel { transition: none; }
}

/* vignette bits used inside panels + step visuals */
.vg-chip {
            display: inline-flex; align-items: center; gap: 7px;
            background: var(--bg-soft); border: 1px solid var(--border);
            font-size: .84rem; font-weight: 700; color: var(--text-2);
            padding: 8px 13px; border-radius: 999px;
        }

.vg-chip.on { background: var(--indigo-muted); border-color: rgba(91,80,232,.3); color: var(--accent-text); }

.vg-row { display: flex; gap: 8px; flex-wrap: wrap; }

.vg-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }

.vg-q { font-size: .92rem; font-weight: 700; }

.vg-line { height: 8px; border-radius: 5px; background: var(--indigo-muted); }

.vg-bar { height: 9px; border-radius: 6px; background: var(--indigo-muted); overflow: hidden; }

.vg-bar i { display: block; height: 100%; border-radius: 6px; background: var(--indigo); }

.vg-note { font-size: .86rem; font-weight: 700; color: var(--text-2); line-height: 1.5; }

.vg-tick { color: var(--green); }

/* ─────────── AUSTRALIAN POSITIONING + STATS ─────────── */
.sys-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 44px; }

.sys-tile {
            background: var(--card); border: 1px solid var(--border); border-radius: 14px;
            padding: 22px 10px 18px; text-align: center; box-shadow: var(--shadow);
        }

.sys-tile b { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; }

.sys-tile span { font-size: .76rem; font-weight: 700; color: var(--text-3); }

.stats-row {
            display: grid; grid-template-columns: repeat(4, 1fr);
            background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
            box-shadow: var(--shadow); overflow: hidden;
        }

.stat-item { padding: 26px 22px; border-right: 1px solid var(--border); }

.stat-item:last-child { border-right: none; }

.stat-val { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--accent-text); }

.stat-val span { font-size: 1.3rem; }

.stat-label { font-size: .84rem; font-weight: 700; color: var(--text-3); margin-top: 5px; }

/* ─────────── SUBJECT MARQUEE (quiet monochrome) ─────────── */
.marquee-band { padding: 34px 0 10px; overflow: hidden; outline: none; }

.marquee { display: flex; overflow: hidden; margin-bottom: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.marquee-track { display: flex; gap: 10px; flex: none; padding-right: 10px; animation: mqscroll 90s linear infinite; }

.marquee.rev .marquee-track { animation-direction: reverse; }

.marquee-band:hover .marquee-track { animation-play-state: paused; }

.mq-pill {
            display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
            background: var(--card); border: 1px solid var(--border);
            font-size: .85rem; font-weight: 700; color: var(--text-2); text-decoration: none;
            padding: 8px 14px; border-radius: 999px;
        }

.mq-pill:hover { border-color: var(--indigo); color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
    .marquee { overflow-x: auto; }
    .marquee-track { animation: none; }
}

/* ─────────── FAQ + FINAL CTA ─────────── */
.faq-list { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }

.faq-list details {
            background: var(--card); border: 1px solid var(--border); border-radius: 13px;
            padding: 0 20px; box-shadow: var(--shadow);
        }

.faq-list summary {
            cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
            padding: 16px 0; font-size: .98rem; font-weight: 700; color: var(--text);
            min-height: 44px;
        }

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

.faq-list summary::after {
            content: ''; margin-left: auto; flex: none; width: 9px; height: 9px;
            border-right: 2.5px solid var(--text-3); border-bottom: 2.5px solid var(--text-3);
            transform: rotate(45deg); transition: transform .2s ease;
        }

.faq-list details[open] summary::after { transform: rotate(-135deg); }

.faq-list details p { padding: 0 0 18px; font-size: .93rem; font-weight: 500; color: var(--text-2); line-height: 1.65; }

.cta-band {
            position: relative; overflow: hidden; border-radius: 26px;
            background: var(--grad-hero); padding: 74px 40px; text-align: center; color: #fff;
            margin-top: 72px;
        }

.cta-band::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(560px 300px at 14% 8%, rgba(24, 192, 221, .28), transparent 60%);
            pointer-events: none;
        }

.cta-band h2 {
            position: relative; font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 700;
            line-height: 1.12; letter-spacing: -.02em; margin-bottom: 12px;
        }

.cta-band h2 em { font-style: italic; color: #c9f6ff; }

.cta-band > p { position: relative; font-size: 1.06rem; font-weight: 700; color: rgba(255, 255, 255, .88); margin-bottom: 28px; }

.cta-actions { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }

.cta-band .btn-primary { background: #fff; color: var(--indigo-dark); box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 14px 30px rgba(0, 0, 0, .22); }

.cta-band .btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); }

.cta-band .btn-ghost:hover { border-color: #fff; color: #fff; }

.cta-trust { position: relative; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: .84rem; font-weight: 700; color: rgba(255, 255, 255, .82); }

.cta-trust span { display: flex; align-items: center; gap: 6px; }

[data-dark] .cta-band .btn-primary { background: #fff; color: var(--indigo-dark); }

[data-dark] .md-crit li.ok i   { background: rgba(34, 197, 94, .16); }

[data-dark] .md-crit li.part i { background: rgba(245, 158, 11, .16); }

[data-dark] .md-crit li.miss i { background: rgba(239, 68, 68, .15); }

footer { border-top: 1px solid var(--border); background: var(--bg); }

/* ─────────── OPENING SEQUENCE ───────────
           The hero arrives in reading order instead of appearing all at once.
           `.intro` (initial, hidden state) is added by an inline head script and
           ONLY when JS is on and motion is allowed, so a no-JS, crawler or
           reduced-motion visitor is never served hidden content. `.intro-go`
           releases it. Opacity + transform only, so it stays on the compositor.
           Easing is a long decelerate — nothing here bounces or overshoots. */
.intro .hero-grid > div:first-child > *,
        .intro .mark-slot { opacity: 0; }

.intro .hero-grid > div:first-child > * { transform: translateY(16px); }

.intro .mark-slot { transform: translateY(26px) scale(.986); }

/* The nav only fades: a transform on a fixed element would become the
           containing block for its own dropdowns. */
.intro .forge-topnav { opacity: 0; }

.intro .hero::before { opacity: 0; }

/* The gold squiggle under "marks." is the signature beat — it draws in
           left-to-right like a marker stroke once the headline has landed.
           clip-path reveals it; scaleX would stretch the hand-drawn artwork. */
.intro .hero h1 .u::after { clip-path: inset(0 100% 0 0); }

.intro-go .hero-grid > div:first-child > *,
        .intro-go .mark-slot {
            opacity: 1; transform: none;
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
                        transform .68s cubic-bezier(.22, 1, .36, 1);
        }

/* The nav fades and NOTHING else. It centres itself with
           `left:50%` + `translateX(-50%)`, so resetting its transform drops the
           bar off to the right; it also owns a transform transition of its own
           for the hide-on-scroll. Never write `transform` on this element. */
.intro-go .forge-topnav {
            opacity: 1;
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
        }

.intro-go .hero-grid > div:first-child > *:nth-child(1) { transition-delay: .06s; }

.intro-go .hero-grid > div:first-child > *:nth-child(2) { transition-delay: .13s; }

.intro-go .hero-grid > div:first-child > *:nth-child(3) { transition-delay: .21s; }

.intro-go .hero-grid > div:first-child > *:nth-child(4) { transition-delay: .28s; }

.intro-go .mark-slot { transition-delay: .18s; }

.intro-go .hero::before { opacity: 1; transition: opacity 1.1s ease; }

.intro-go .hero h1 .u::after {
            clip-path: inset(0 0 0 0);
            transition: clip-path .72s cubic-bezier(.22, 1, .36, 1) .5s;
        }

/* Safety net: if the setting is flipped after load, drop straight to the
           finished state rather than leaving anything mid-flight. */
@media (prefers-reduced-motion: reduce) {
    .intro .hero-grid > div:first-child > *,
                .intro .mark-slot,
                .intro .hero::before { opacity: 1 !important; transform: none !important; }
    .intro .forge-topnav { opacity: 1 !important; }
    /* keeps its centring transform */
                .intro .hero h1 .u::after { clip-path: none !important; }
}

/* ─────────── REVEAL (carried .reveal contract, restrained) ─────────── */
.reveal, .reveal-group > * { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }

.reveal.visible, .reveal-group.visible > * { opacity: 1; transform: none; }

.reveal-group.visible > *:nth-child(2) { transition-delay: .07s; }

.reveal-group.visible > *:nth-child(3) { transition-delay: .14s; }

.reveal-group.visible > *:nth-child(4) { transition-delay: .21s; }

.reveal-group.visible > *:nth-child(5) { transition-delay: .28s; }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 1020px) {
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .mark-slot { padding-top: 0; }
    .mark-demo { margin: 126px auto 0; }
    .story-grid { grid-template-columns: 1fr; gap: 40px; }
    .story-visual { display: none; }
    .story-step-visual { display: block; margin-top: 16px; }
}

@media (max-width: 860px) {
    .section { padding: 72px 0; }
    .compare-grid { grid-template-columns: 1fr; }
    .sys-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 560px) {
    .hero { padding: 72px 0 76px; }
    .hero h1 { font-size: 2.15rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; }
    .sys-grid { grid-template-columns: repeat(2, 1fr) 1fr; gap: 9px; }
    .sys-tile { padding: 14px 6px 12px; }
    .sys-tile b { font-size: 1.05rem; }
    .cta-band { padding: 56px 22px; border-radius: 20px; }
    .mark-demo { padding: 18px 16px 16px; }
}

/* ─────────── REDUCED MOTION — single global kill switch ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
                    animation-duration: .01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: .01ms !important;
                    scroll-behavior: auto !important;
                }
    .reveal, .reveal-group > * { opacity: 1; transform: none; }
}

/* ─────────── PERSONALITY LAYER ─────────── */
::selection { background: rgba(91, 80, 232, .22); }

/* hand-drawn gold squiggle under the key word */
.hero h1 .u { position: relative; white-space: nowrap; }

.hero h1 .u::after {
            content: ''; position: absolute; left: 0; right: 1%; bottom: .09em; height: .19em;
            background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20220%2026'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M7.1%2017.2%20L13.2%2017.0%20L19.6%2016.8%20L26.2%2016.6%20L33.0%2016.3%20L40.0%2016.0%20L47.2%2015.6%20L54.5%2015.2%20L61.9%2014.8%20L69.5%2014.4%20L77.2%2013.9%20L85.0%2013.4%20L92.9%2012.8%20L101.0%2012.3%20L109.2%2011.8%20L117.5%2011.3%20L125.9%2010.9%20L134.4%2010.6%20L143.0%2010.4%20L151.7%2010.2%20L160.4%2010.1%20L169.2%2010.1%20L178.0%2010.1%20L186.8%2010.2%20L195.6%2010.7%20L204.3%2011.4%20L213.7%2011.4%20L212.3%2011.4%20L204.4%2010.0%20L195.7%209.3%20L187.0%208.5%20L178.3%207.4%20L169.6%206.4%20L161.0%205.6%20L152.3%205.0%20L143.7%204.6%20L135.1%204.3%20L126.5%204.1%20L117.9%204.1%20L109.4%204.3%20L101.0%204.6%20L92.7%205.0%20L84.5%205.6%20L76.4%206.2%20L68.5%207.0%20L60.7%207.8%20L53.2%208.6%20L45.9%209.5%20L38.8%2010.4%20L31.9%2011.4%20L25.3%2012.3%20L18.9%2013.4%20L12.8%2014.5%20L6.9%2015.8%20Z'%20fill%3D'%235b50e8'%2F%3E%3Cpath%20d%3D'M44.0%2021.5%20L49.7%2021.4%20L55.3%2021.2%20L61.1%2021.0%20L66.8%2020.8%20L72.7%2020.6%20L78.5%2020.4%20L84.4%2020.2%20L90.4%2019.9%20L96.3%2019.6%20L102.3%2019.3%20L108.3%2019.0%20L114.2%2018.7%20L120.3%2018.3%20L126.3%2018.0%20L132.3%2017.7%20L138.3%2017.5%20L144.4%2017.3%20L150.4%2017.1%20L156.5%2016.9%20L162.5%2016.8%20L168.5%2016.8%20L174.5%2016.7%20L180.5%2016.7%20L186.4%2016.8%20L192.2%2017.0%20L198.5%2016.7%20L197.5%2016.7%20L192.2%2016.0%20L186.4%2015.8%20L180.5%2015.5%20L174.6%2015.2%20L168.6%2014.8%20L162.7%2014.6%20L156.7%2014.4%20L150.7%2014.3%20L144.6%2014.3%20L138.5%2014.3%20L132.4%2014.4%20L126.3%2014.6%20L120.2%2014.8%20L114.1%2015.1%20L108.1%2015.4%20L102.0%2015.8%20L96.0%2016.2%20L90.0%2016.6%20L84.0%2017.0%20L78.1%2017.4%20L72.3%2017.9%20L66.5%2018.4%20L60.8%2018.9%20L55.1%2019.4%20L49.5%2019.9%20L44.0%2020.5%20Z'%20fill%3D'%238b5cf6'%20opacity%3D'.7'%2F%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
        }

[data-dark] .hero h1 .u::after {
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20220%2026'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M7.1%2017.2%20L13.2%2017.0%20L19.6%2016.8%20L26.2%2016.6%20L33.0%2016.3%20L40.0%2016.0%20L47.2%2015.6%20L54.5%2015.2%20L61.9%2014.8%20L69.5%2014.4%20L77.2%2013.9%20L85.0%2013.4%20L92.9%2012.8%20L101.0%2012.3%20L109.2%2011.8%20L117.5%2011.3%20L125.9%2010.9%20L134.4%2010.6%20L143.0%2010.4%20L151.7%2010.2%20L160.4%2010.1%20L169.2%2010.1%20L178.0%2010.1%20L186.8%2010.2%20L195.6%2010.7%20L204.3%2011.4%20L213.7%2011.4%20L212.3%2011.4%20L204.4%2010.0%20L195.7%209.3%20L187.0%208.5%20L178.3%207.4%20L169.6%206.4%20L161.0%205.6%20L152.3%205.0%20L143.7%204.6%20L135.1%204.3%20L126.5%204.1%20L117.9%204.1%20L109.4%204.3%20L101.0%204.6%20L92.7%205.0%20L84.5%205.6%20L76.4%206.2%20L68.5%207.0%20L60.7%207.8%20L53.2%208.6%20L45.9%209.5%20L38.8%2010.4%20L31.9%2011.4%20L25.3%2012.3%20L18.9%2013.4%20L12.8%2014.5%20L6.9%2015.8%20Z'%20fill%3D'%238b9cf8'%2F%3E%3Cpath%20d%3D'M44.0%2021.5%20L49.7%2021.4%20L55.3%2021.2%20L61.1%2021.0%20L66.8%2020.8%20L72.7%2020.6%20L78.5%2020.4%20L84.4%2020.2%20L90.4%2019.9%20L96.3%2019.6%20L102.3%2019.3%20L108.3%2019.0%20L114.2%2018.7%20L120.3%2018.3%20L126.3%2018.0%20L132.3%2017.7%20L138.3%2017.5%20L144.4%2017.3%20L150.4%2017.1%20L156.5%2016.9%20L162.5%2016.8%20L168.5%2016.8%20L174.5%2016.7%20L180.5%2016.7%20L186.4%2016.8%20L192.2%2017.0%20L198.5%2016.7%20L197.5%2016.7%20L192.2%2016.0%20L186.4%2015.8%20L180.5%2015.5%20L174.6%2015.2%20L168.6%2014.8%20L162.7%2014.6%20L156.7%2014.4%20L150.7%2014.3%20L144.6%2014.3%20L138.5%2014.3%20L132.4%2014.4%20L126.3%2014.6%20L120.2%2014.8%20L114.1%2015.1%20L108.1%2015.4%20L102.0%2015.8%20L96.0%2016.2%20L90.0%2016.6%20L84.0%2017.0%20L78.1%2017.4%20L72.3%2017.9%20L66.5%2018.4%20L60.8%2018.9%20L55.1%2019.4%20L49.5%2019.9%20L44.0%2020.5%20Z'%20fill%3D'%23a78bfa'%20opacity%3D'.7'%2F%3E%3C%2Fsvg%3E");
        }

/* Avi peeking over the marking card */
/* Avi hangs onto the card's top edge: 88% of the SVG (head + antenna)
           rises above the border, the bottom 12% is his fingers on the card face */
/* The "Marked by Avi" badge floats over the card; Avi dangles one-armed
           from the badge's right corner, swinging gently from the grip point. */
.md-peek { position: absolute; top: -150px; right: 56px; z-index: 2; pointer-events: none; width: max-content; }

.md-peek-bubble {
            position: relative; z-index: 2; display: inline-block;
            background: var(--card); border: 1px solid var(--border-2);
            border-radius: 12px 12px 3px 12px; box-shadow: var(--shadow);
            font-size: .73rem; font-weight: 700; color: var(--text-2);
            padding: 6px 10px; white-space: nowrap;
        }

.md-peek svg {
            position: absolute; top: 23px; right: -44px; z-index: 1; height: auto;
            filter: drop-shadow(0 5px 10px rgba(31, 27, 100, .22));
            transform-origin: 39% 7%;
            animation: peeksway 4s ease-in-out infinite;
        }

/* eyebrow rule picks up the brand duo */
.eyebrow::before, .section-head.center .eyebrow::after { background: linear-gradient(90deg, #5b50e8, #18c0dd); }

/* CTA arrows nudge on hover */
.btn-primary svg, .md-improve svg { transition: transform .18s ease; }

.btn-primary:hover svg, .md-improve:hover svg { transform: translateX(3px); }

/* state tiles: coloured top rule + a cheeky hover tilt */
.sys-tile { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .2s ease; }

.sys-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sysc, var(--indigo)); opacity: .85; }

.sys-tile:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-hover); }

/* marquee voice line */
.marquee-cap { text-align: center; font-size: .9rem; font-weight: 700; color: var(--text-3); padding: 8px 24px 10px; }

@media (max-width: 560px) {
    .md-peek svg { width: 58px; right: -36px; }
    .md-peek { top: -122px; right: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .md-peek svg { animation: none; }
    .sys-tile:hover { transform: none; }
}

/* ── keyframes referenced above ── */
@keyframes mdrow { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

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

@keyframes mqscroll { to { transform: translateX(-50%); } }

@keyframes peeksway {
            0%, 100% { transform: rotate(-1.8deg); }
            50% { transform: rotate(1.8deg); }
        }