/* SimIQ — dark navy design system (matches the desktop app)
   Order: tokens → base → shared components → marketing sections → viewer → responsive */

:root {
    /* surfaces */
    --bg: #0d0f14;
    --bg-alt: #12151e;
    --panel: #1a1d27;
    --panel-2: #14161d;
    --card: #1e2230;
    --screen-bg: #05060a;   /* device / screenshot bezels */
    --video-bg: #0a0b10;    /* letterboxing behind clips */
    --border: #2e3248;
    --border-hi: #3d4666;
    --pill-bg: #1a2536;

    /* text */
    --headline: #e2e8f0;
    --text-strong: #c8ccd8;
    --body: #a9b1c2;
    --subtle: #7c8598;
    --overline: #64748b;

    /* accent + semantic */
    --accent: #5aa7f0;
    --accent-btn: #2f7fd4;
    --accent-hover: #3c8ee2;
    --brand: #2e8bff;       /* the "IQ" in the SimIQ wordmark (same as the desktop app) */
    --link-hover: #82bdf5;
    --teal: #4fd1c5;
    --violet: #a78bfa;
    --good: #34d399;
    --watch: #fbbf24;
    --fix: #f87171;
    --guide: #fde047;

    /* gradient tints (top-left glow on highlighted cards) */
    --tint-sky: #23415a;
    --tint-teal: #1c414b;
    --tint-green: #234538;
    --tint-violet: #38375c;

    /* type scale */
    --display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --text: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
    --h1: clamp(34px, 4.6vw, 62px);        /* home hero only */
    --h1-page: clamp(32px, 3.4vw, 46px);   /* every other page title */
    --h2: clamp(26px, 2.6vw, 34px);
    --h2-lg: clamp(30px, 3vw, 40px);       /* the two or three showcase headings */
    --h3: 21px;
    --h4: 17px;

    /* radius: controls / inner cards / outer panels */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    /* spacing */
    --space-section: clamp(56px, 8vw, 96px);
    --space-section-sm: clamp(40px, 5vw, 64px);
    --gutter: 5%;

    /* widths */
    --w-wide: 1120px;      /* card grids, app tour */
    --w-media: 1060px;     /* full-bleed screenshots, callouts */
    --w-content: 980px;    /* hero mock, viewer */
    --w-narrow: 760px;     /* lists, FAQ, legal */
    --measure: 680px;      /* paragraph measure */
    --measure-sm: 460px;

    /* elevation */
    --shadow-lg: 0 28px 80px rgba(0,0,0,0.55);
    --shadow-md: 0 20px 55px rgba(0,0,0,0.5);
    --shadow-sm: 0 14px 40px rgba(0,0,0,0.5);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

/* the hidden attribute must always win, even over display rules below */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--body);
    font-family: var(--text);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.6;
}
body.nav-open { overflow: hidden; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; }

/* Instrument Sans ships 400/500/600 only — never let the browser synthesise a 700 */
b, strong { font-weight: 600; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--headline); margin: 0; line-height: 1.15; }
h1 { font-size: var(--h1-page); line-height: 1.1; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
.h2-lg { font-size: var(--h2-lg); }

/* keyboard focus: one ring everywhere */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- shared components ---------- */

/* icons come from the sprite in _Layout and inherit colour */
.icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-sm { width: 15px; height: 15px; }
.icon-xl { width: 44px; height: 44px; }
.icon-good { color: var(--good); }

/* small uppercase label */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--overline); }
.eyebrow-lg { font-size: 13px; letter-spacing: 0.18em; }
.eyebrow-sm { font-size: 11px; letter-spacing: 0.08em; }

/* buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: var(--r-sm); padding: 12px 27px;
    font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.25; text-align: center;
    background: transparent; cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--accent-btn); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost { border-color: var(--border-hi); color: var(--text-strong); font-weight: 500; }
.btn-ghost:hover { border-color: var(--subtle); color: var(--headline); }
.btn-danger { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.35); color: var(--fix); }
.btn-danger:hover { background: rgba(248,113,113,0.16); color: var(--fix); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: default; }

/* form fields */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.field input, .field select, .field textarea {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px;
    font-size: 15px; color: var(--headline); font-family: inherit; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--overline); }
.field textarea { height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,167,240,0.22);
}
.form-error {
    background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.35); border-radius: var(--r-sm);
    padding: 12px 14px; font-size: 14px; color: #f8b4b4;
}
.form-done { align-items: center; text-align: center; gap: 14px; }
.form-done .icon { color: var(--good); }
.form-done b { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--headline); }
.form-done span { font-size: 15px; line-height: 1.6; color: var(--body); }

/* check list */
.checks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.checks-start { align-items: flex-start; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-strong); }
.check .icon { color: var(--good); }

/* chips */
.chip-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: var(--w-content); margin-top: 10px; }
.chip {
    background: var(--pill-bg); border: 1px solid var(--border); color: var(--text-strong);
    font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px;
}
.chip-direct { border-color: var(--border-hi); color: var(--headline); font-weight: 600; }
.chip-note { font-size: 13px; color: var(--overline); max-width: var(--measure); text-align: center; }

/* status dots */
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-fix { background: var(--fix); } .dot-watch { background: var(--watch); } .dot-good { background: var(--good); }

/* findings (hero card, features mocks, viewer) */
.finding-expanded { background: var(--panel); border: 1px solid var(--border-hi); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.finding-row { display: flex; align-items: center; gap: 10px; }
.finding-row b { font-size: 14px; font-weight: 600; color: var(--headline); }
.finding-row em { font-size: 12px; font-style: normal; color: var(--subtle); margin-left: auto; }
.finding-detail { font-size: 13px; line-height: 1.55; color: var(--body); }
.finding-detail.soft { color: var(--subtle); }
.finding-detail.muted { color: var(--overline); }
.workon { display: flex; gap: 8px; align-items: flex-start; }
.workon b { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent); white-space: nowrap; padding-top: 1px; }
.workon.range b { color: var(--good); }
.workon span { font-size: 13px; line-height: 1.55; color: var(--text-strong); }

/* price */
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.price b { font-family: var(--display); font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; color: var(--headline); }
.price-struck { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--fix); opacity: 0.75; }
.price span { font-size: 17px; color: var(--subtle); }
.price-badge {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.4); color: var(--good);
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px;
}
.price-badge .icon { width: 15px; height: 15px; }

/* video panel (hero mock, features replay, viewer player) */
.video-panel {
    position: relative; background: var(--video-bg); border-radius: var(--r-sm); height: 380px;
    overflow: hidden; display: flex; justify-content: center;
}
.video-frame { position: relative; height: 100%; }
.video-frame img, .video-frame video { height: 100%; width: auto; display: block; }
.video-frame svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-label {
    position: absolute; top: 10px; left: 10px; background: rgba(26,29,39,0.85);
    border: 1px solid var(--border); color: var(--text-strong); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; padding: 4px 10px; border-radius: 6px;
}

/* stat tile */
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile .eyebrow { white-space: nowrap; }
.tile span { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--headline); }
.tile small { font-size: 12px; font-weight: 500; color: var(--subtle); }

/* ---------- nav ---------- */
.nav {
    position: sticky; top: 0; z-index: 80;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px var(--gutter); border-bottom: 1px solid var(--panel);
    background: rgba(13,15,20,0.82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nav-brand { display: flex; align-items: center; gap: 14px; }
.nav-brand img { width: 48px; height: 48px; }   /* emblem sized to the 30px lock-up (GOLF + SimIQ ≈ 44px tall) */
.nav-brand span { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--headline); }
/* Wordmark lock-up (nav + footer): quiet "GOLF" prefix stacked above "Sim" + brand-blue "IQ".
   Formal name is "Golf SimIQ"; the everyday display name is "SimIQ". */
.wordmark { display: inline-block; line-height: 1; white-space: nowrap; }   /* GOLF above, Sim+IQ on ONE line (a flex column split the bare 'Sim' text node onto its own row) */
.wordmark small { display: block; font-family: var(--text); font-size: 0.36em; font-weight: 600; letter-spacing: 0.28em; color: var(--subtle); margin-bottom: 0.08em; }
.wordmark em { font-style: normal; color: var(--brand); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--body); }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links .btn-primary { padding: 10px 21px; font-size: 15px; color: #fff; }

/* signed-in identity */
.nav-user { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--headline); }
.nav-user .icon { color: var(--accent); width: 17px; height: 17px; }
.nav-logout button { background: none; border: none; color: var(--subtle); cursor: pointer; padding: 4px; display: flex; align-items: center; }
.nav-logout button:hover { color: var(--headline); }
.drawer-user { font-size: 15px; color: var(--body); padding: 12px 4px 2px 4px; }
.drawer-user b { color: var(--headline); }
.drawer-logout button { background: none; border: none; color: var(--subtle); font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 8px 4px; }
.drawer-logout button:hover { color: var(--headline); }

/* mobile nav drawer */
#nav-burger { display: none; background: none; border: none; color: var(--headline); padding: 6px; cursor: pointer; }
#nav-burger .icon { width: 26px; height: 26px; }
#nav-scrim { position: fixed; inset: 0; z-index: 99; background: rgba(5,6,10,0.6); }
#nav-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 82vw); z-index: 100;
    background: var(--panel-2); border-left: 1px solid var(--border-hi);
    box-shadow: -20px 0 60px rgba(0,0,0,0.55);
    display: flex; flex-direction: column; gap: 6px; padding: 64px 26px 26px 26px;
}
#nav-drawer a { font-size: 18px; font-weight: 600; color: var(--headline); padding: 12px 4px; }
#nav-drawer a.btn-primary { color: #fff; margin-top: 14px; padding: 14px 0; }
#nav-drawer-close {
    position: absolute; top: 12px; right: 16px; background: none; border: none;
    color: var(--subtle); font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 8px;
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--panel); padding: 48px var(--gutter) 28px var(--gutter); }
.footer-grid {
    display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 32px 48px; width: min(var(--w-wide), 100%); margin: 0 auto;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--headline); }
.footer-logo img { width: 28px; height: 28px; }
.footer-logo span { font-family: var(--display); font-weight: 700; font-size: 18px; }
.footer-brand p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--subtle); max-width: 320px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .eyebrow { margin-bottom: 4px; }
.footer-col a { font-size: 14px; color: var(--body); }
.footer-col a:hover { color: var(--headline); }
.footer-bottom {
    width: min(var(--w-wide), 100%); margin: 36px auto 0 auto; padding-top: 20px;
    border-top: 1px solid var(--panel); font-size: 13px; color: var(--subtle);
}

/* ---------- login page ---------- */
.login-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 var(--gutter) var(--space-section) var(--gutter); }
.login-card {
    width: min(400px, 100%); background: var(--panel-2); border: 1px solid var(--border-hi);
    border-radius: var(--r-lg); padding: 30px 32px; display: flex; flex-direction: column;
    align-items: center; gap: 12px; text-align: center; box-shadow: var(--shadow-md);
}
.login-card > b { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--headline); }
.login-card > span { font-size: 14px; line-height: 1.6; color: var(--body); }
.login-card .icon-xl { color: var(--good); }
.login-logo { width: 64px; height: 64px; }
.login-qr { background: #fff; border-radius: var(--r-md); padding: 12px; display: flex; }
.login-qr img { width: 220px; height: 220px; display: block; image-rendering: pixelated; }

/* ---------- hero ---------- */
.hero {
    display: flex; flex-direction: column; align-items: center;
    padding: 84px var(--gutter) 72px var(--gutter);
    background: radial-gradient(ellipse 900px 480px at 50% -10%, #1a2c44 0%, var(--bg) 65%);
}
/* Background film: fills the first screen behind the hero, dimmed for legibility and
   blended into the page colour at the fold; site.js fades it out on scroll. */
.hero { position: relative; isolation: isolate; }
.hero-bg {
    position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh;
    z-index: -1; overflow: hidden; pointer-events: none; will-change: opacity;
}
.hero-bg-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.6; }
.hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 50% 32%, rgba(13,15,20,0.62) 0%, rgba(13,15,20,0.2) 100%),
        linear-gradient(to bottom, rgba(13,15,20,0.45) 0%, rgba(13,15,20,0.15) 45%, rgba(13,15,20,0.75) 80%, var(--bg) 100%);
}
.hero h1 {
    font-size: var(--h1); line-height: 1.08; text-align: center; max-width: var(--w-content);
    margin: 0; text-wrap: balance;
}
.hero-category { font-family: var(--display); font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; color: var(--accent); margin: 14px 0 4px 0; }
.hero .sub {
    font-size: clamp(16px, 1.5vw, 19px); color: var(--body); text-align: center;
    max-width: var(--measure); margin-top: 26px; text-wrap: pretty;
}
.hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 38px; flex-wrap: wrap; justify-content: center; }

/* ---------- product mock ---------- */
.mock-wrap { position: relative; margin-top: 64px; width: min(var(--w-content), 100%); }
.mock-window {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.mock-titlebar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #1f2230; }
.mock-titlebar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.mock-titlebar span { font-size: 12px; color: #6b7280; margin-left: 10px; }
.mock-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.mock-scrub { display: flex; align-items: center; gap: 10px; padding: 2px 18px 12px 18px; opacity: 0.55; pointer-events: none; user-select: none; }
.mock-scrub svg { width: 13px; height: 13px; }
.scrub-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: #0d0f1a; }
.scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: rgba(90,167,240,0.55); }
.scrub-thumb {
    position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
    background: #aab2c4; transform: translate(-50%, -50%);
}
.scrub-rate { font-size: 11px; font-weight: 600; color: var(--overline); }
.mock-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0 14px 14px 14px; }

.analysis-card {
    position: absolute; right: -46px; bottom: -40px; width: 330px; background: var(--card);
    border: 1px solid var(--border-hi); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
}

/* ---------- sections ---------- */
.section { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: var(--space-section) var(--gutter); }
.section-tight { padding-top: 16px; }
.section h2 { text-align: center; }
.section .sub { font-size: 17px; color: var(--body); max-width: var(--measure); text-align: center; }
.section-alt { background: var(--bg-alt); }

/* positioning statement band */
.statement { padding: 72px 24px 40px 24px; text-align: center; }
.statement::before { content: ''; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--accent); margin: 0 auto 30px auto; }
.statement p { font-family: var(--display); font-size: clamp(24px, 3.2vw, 38px); font-weight: 500; line-height: 1.3; color: var(--body); max-width: 820px; margin: 0 auto; text-wrap: balance; }
.statement em { font-style: normal; color: var(--subtle); }
.statement b { color: var(--headline); font-weight: 700; }

/* how-it-works flow — stage colours: capture sky, measure teal, understand amber, improve green */
.flow { display: flex; align-items: stretch; justify-content: center; gap: 6px; width: min(var(--w-wide), 100%); margin: 8px auto 0 auto; }
.flow-step {
    flex: 1 1 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
    border-top: 3px solid currentColor;
    padding: 20px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.flow-step svg { width: 26px; height: 26px; color: inherit; }
.flow-step b { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--headline); }
.flow-step p { font-size: 13.5px; line-height: 1.55; color: var(--body); margin: 0; }
.flow-arrow { align-self: center; color: var(--overline); font-size: 20px; flex-shrink: 0; padding: 0 2px; }
.stage-violet { color: var(--violet); }
.stage-sky { color: var(--accent); }
.stage-teal { color: var(--teal); }
.stage-amber { color: var(--watch); }
.stage-green { color: var(--good); }

/* keep-your-kit chips */
.keep-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 6px 0; }
.keep-line span { background: var(--pill-bg); border: 1px solid var(--border); border-radius: 999px; color: var(--text-strong); font-size: 14px; font-weight: 600; padding: 8px 18px; }
.keep-line .keep-add { background: rgba(90,167,240,0.12); border-color: rgba(90,167,240,0.45); color: var(--accent); }

.lm-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lm-group .chip-cloud { margin-top: 0; }


/* phone-cameras section */
.phone-cam { display: flex; align-items: flex-start; gap: 26px; max-width: var(--w-content); margin: 0 auto; text-align: left; }
.phone-cam h2, .phone-cam .sub { text-align: left; }
.phone-cam h2 { margin-bottom: 10px; }
.phone-cam svg { flex-shrink: 0; margin-top: 6px; width: 46px; height: 46px; color: var(--accent); }

/* "what happened / why" strip — three icon+text columns, no boxes (the card grids either side supply the boxes) */
.why-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; width: min(var(--w-wide), 100%); margin-top: 10px; }
.why-item { display: flex; align-items: flex-start; gap: 16px; }
.why-item svg { width: 30px; height: 30px; flex-shrink: 0; margin-top: 2px; }
.why-item h3 { font-size: 19px; margin-bottom: 8px; }
.why-item p { font-size: 15px; line-height: 1.65; color: var(--body); margin: 0; }

/* gradient card tints (feature card, features half-cards) */
.pillar-sky { background: linear-gradient(135deg, var(--tint-sky) 0%, var(--card) 60%); }
.pillar-teal { background: linear-gradient(135deg, var(--tint-teal) 0%, var(--card) 60%); }
.pillar-green { background: linear-gradient(135deg, var(--tint-green) 0%, var(--card) 60%); }
.pillar-violet { background: linear-gradient(135deg, var(--tint-violet) 0%, var(--card) 60%); }

/* 3d range */
.range-shot {
    width: min(var(--w-media), 100%); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow-lg); margin-top: 18px; display: flex;
}
.range-shot img, .range-shot video { width: 100%; height: auto; display: block; }

/* feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(var(--w-wide), 100%); margin-top: 14px; }
.feature-card { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px 26px; }
.feature-card .fc-icon { width: 26px; height: 26px; margin-bottom: 2px; }
.feature-card h3 { font-family: inherit; font-size: var(--h4); font-weight: 600; }
.feature-card p { font-size: 14px; line-height: 1.6; color: var(--body); margin: 0; }
.feature-card small { font-size: 12px; color: var(--overline); }

/* anywhere */
.anywhere {
    display: grid; grid-template-columns: minmax(0, var(--measure-sm)) auto;
    grid-template-areas: "copy mock" "checks mock";
    gap: 18px 70px; justify-content: center; align-items: center;
    padding: var(--space-section) var(--gutter); background: var(--bg-alt);
}
.anywhere-copy { grid-area: copy; display: flex; flex-direction: column; gap: 18px; max-width: var(--measure-sm); }
.anywhere-checks { grid-area: checks; max-width: var(--measure-sm); }
.anywhere .phone-mock { grid-area: mock; }
.anywhere-copy > p { font-size: 16px; line-height: 1.65; color: var(--body); margin: 0; }

.phone-mock {
    width: 250px; flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 30px; /* device bezel */ padding: 24px 12px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; gap: 10px;
}
.phone-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.phone-head b { font-size: 13px; font-weight: 600; color: var(--headline); }
.phone-head span { font-size: 11px; color: var(--subtle); }
.grade-card {
    background: linear-gradient(135deg, var(--tint-sky) 0%, var(--card) 70%); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.grade-card .grade { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--accent); }
.grade-card span { font-size: 12px; color: var(--body); }
.phone-row { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 14px; display: flex; align-items: center; gap: 10px; }
.phone-row .dot { width: 8px; height: 8px; }
.phone-row b { font-size: 12px; font-weight: 600; color: var(--headline); }
.phone-row span { font-size: 11px; color: var(--subtle); margin-left: auto; }

/* cta band */
.cta { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: var(--space-section) var(--gutter); }
.cta h2 { font-size: var(--h2-lg); text-align: center; }
.cta .sub { font-size: 17px; color: var(--body); text-align: center; max-width: 620px; }
.cta .price-badge { align-self: center; margin-top: -6px; }
.cta-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.cta-row .note { font-size: 15px; color: var(--subtle); }

/* ---------- inner pages ---------- */
.page-head { display: flex; flex-direction: column; align-items: center; padding: clamp(48px, 6vw, 72px) var(--gutter) 48px var(--gutter); }
.page-head-tight { padding-bottom: 24px; }
.page-head h1 { text-align: center; max-width: 820px; margin: 18px 0 0 0; text-wrap: balance; }
.page-head .sub { font-size: 17px; color: var(--body); text-align: center; max-width: 560px; margin-top: 18px; }
.page-head .hero-ctas { margin-top: 28px; }

/* features split sections */
.split { display: flex; align-items: center; justify-content: center; gap: 64px; padding: var(--space-section-sm) var(--gutter); flex-wrap: wrap; }
.split-copy { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.split-copy h2 { line-height: 1.18; }
.split-copy p { font-size: 16px; line-height: 1.65; color: var(--body); margin: 0; }
.split-copy .aside { font-size: 15px; color: var(--subtle); }

.replay-mock {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%);
    background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px;
    box-shadow: var(--shadow-md);
}
.replay-mock .video-panel { height: 330px; }

.panel-mock {
    width: min(500px, 100%); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-md);
}
.panel-mock-chat { gap: 14px; }
.panel-mock .row-plain { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; }
.panel-mock .row-plain.stack { display: flex; flex-direction: column; gap: 8px; }
.panel-mock small { font-size: 12px; color: var(--overline); }

.chat-user { align-self: flex-end; background: var(--tint-sky); border-radius: var(--r-md) var(--r-md) 4px var(--r-md); padding: 12px 16px; max-width: 340px; font-size: 14px; line-height: 1.55; color: var(--headline); }
.chat-ai { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) var(--r-md) 4px; padding: 12px 16px; max-width: 400px; font-size: 14px; line-height: 1.6; color: var(--text-strong); }
.chat-input { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 14px; font-size: 14px; color: var(--overline); }
.chat-input span { flex-grow: 1; }
.chat-input svg { color: var(--accent); }

.report-head { display: flex; align-items: center; justify-content: space-between; }
.report-grade { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--accent); }
.verdict-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.verdict-bar i { display: block; }

.half-cards { display: flex; justify-content: center; gap: 22px; padding: var(--space-section-sm) var(--gutter); flex-wrap: wrap; }
.half-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 30px; width: min(505px, 100%); }
.half-card p { font-size: 15px; line-height: 1.65; color: var(--body); margin: 0; }
.half-card .thumb { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; display: flex; }
.half-card .thumb img { width: 100%; height: auto; display: block; }

/* gapping-results mock (features half-card) — sized to sit level with the 3D-range thumb */
.gap-mock {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 14px 16px 12px 16px; display: flex; flex-direction: column; gap: 7px; aspect-ratio: 16 / 9; justify-content: center;
}
.gap-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.gap-head b { font-size: 13px; font-weight: 600; color: var(--headline); }
.gap-head span { font-size: 11px; color: var(--subtle); }
.gap-row { display: grid; grid-template-columns: 8px 26px 1fr 58px 26px; align-items: center; gap: 10px; }
.gap-row i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.gap-row b { font-size: 12px; font-weight: 600; color: var(--headline); }
.gap-bar { height: 8px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.gap-bar div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--accent)); }
.gap-row span { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--headline); text-align: right; white-space: nowrap; }
.gap-row span small { font-family: var(--text); font-size: 10px; font-weight: 500; color: var(--subtle); margin-left: 3px; }
.gap-row em { font-size: 11px; font-style: normal; color: var(--overline); text-align: right; }
.gap-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.gap-legend { font-size: 11px; color: var(--overline); }
.gap-set { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--good); background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.35); border-radius: 999px; padding: 3px 9px; }

/* pricing */
.price-wrap { padding: 0 var(--gutter); }
.price-card {
    width: min(620px, 100%); background: linear-gradient(135deg, var(--tint-sky) 0%, var(--card) 50%);
    border: 1px solid var(--border-hi); border-radius: var(--r-lg); padding: 40px 44px;
    display: flex; flex-direction: column; gap: 24px; box-shadow: var(--shadow-md);
    margin: 24px auto 0 auto;
}
.price-card .price { flex-wrap: wrap; margin-top: 0; }
.price-card .price b { font-size: 52px; }
.price-card .price-badge { margin-top: -10px; }
.price-strap { font-size: 15px; color: var(--body); }
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.included .check { font-size: 15px; }

.req-cards { display: flex; justify-content: center; gap: 22px; padding: 24px var(--gutter) var(--space-section) var(--gutter); flex-wrap: wrap; }
.req-card { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 26px; width: min(300px, 100%); }
.req-card p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; }

/* FAQ (pricing) */
.faq-section { max-width: var(--w-narrow); margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; width: 100%; }
.faq-list details {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 0 20px; overflow: hidden; transition: border-color 0.2s ease;
}
.faq-list details:hover, .faq-list details[open] { border-color: var(--border-hi); }
.faq-list summary {
    cursor: pointer; list-style: none; padding: 16px 0; font-size: 16px; font-weight: 600;
    color: var(--headline); display: flex; justify-content: space-between; align-items: center; gap: 12px;
    -webkit-tap-highlight-color: transparent;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: '+'; font-size: 20px; font-weight: 400; color: var(--overline); flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0 0 18px 0; font-size: 15px; line-height: 1.65; color: var(--body); }

/* post-session review (features) */
.tv-shot {
    width: min(var(--w-media), 100%); background: var(--screen-bg); border: 1px solid var(--border-hi);
    border-radius: var(--r-lg); padding: 10px; box-shadow: var(--shadow-lg);
    margin-top: 14px; display: flex;
}
.tv-shot img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.phone-shots { display: flex; justify-content: center; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.phone-shots figure { margin: 0; width: min(300px, 100%); display: flex; flex-direction: column; gap: 12px; }
.phone-shots img {
    width: 100%; height: auto; display: block; border: 1px solid var(--border-hi);
    border-radius: 24px; /* device bezel */ box-shadow: var(--shadow-md);
}
.phone-shots figcaption { font-size: 14px; line-height: 1.6; color: var(--body); text-align: center; }

/* app tour (features) — annotated screenshot with hover hotspots */
.tour-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; padding: 5px; margin-top: 4px;
}
.tour-tab {
    background: none; border: none; color: var(--body); font-family: inherit; font-size: 14px;
    font-weight: 600; padding: 9px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.tour-tab:hover { color: var(--headline); }
.tour-tab.active { background: var(--accent-btn); color: #fff; }
.app-tour {
    position: relative; width: min(var(--w-wide), 100%); background: var(--screen-bg);
    border: 1px solid var(--border-hi); border-radius: var(--r-lg); padding: 10px;
    box-shadow: var(--shadow-lg); margin-top: 14px;
}
.app-tour > img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); transition: opacity 0.3s ease, filter 0.3s ease; }
.tour-stage { position: relative; width: min(var(--w-wide), 100%); display: flex; flex-direction: column; align-items: center; }
.tour-stage .app-tour:not(.app-tour-narrow) { width: 100%; }
/* dimmed backdrop pane while the session popup floats above it */
.app-tour.dimmed > img { opacity: 0.3; filter: saturate(0.6); }
.app-tour.dimmed .hotspot { display: none; }
/* the session report renders like the app's own popup, centred over the stage */
.app-tour-narrow {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(680px, 90%); z-index: 30; box-shadow: 0 34px 90px rgba(0,0,0,0.75);
}
.hotspot {
    position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%);
    background: none; border: none; padding: 0; cursor: pointer; z-index: 1;
}
/* the active hotspot (and its bubble) paints above every neighbouring marker */
.hotspot:hover, .hotspot:focus { z-index: 20; }
.hotspot i {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(90,167,240,0.25); border: 2px solid var(--accent);
    animation: hotspot-pulse 2.6s ease-in-out infinite;
}
.hotspot::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%);
}
@keyframes hotspot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(90,167,240,0.45); }
    50% { box-shadow: 0 0 0 9px rgba(90,167,240,0); }
}
.hotspot-bubble {
    position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    width: 230px; background: var(--card); border: 1px solid var(--border-hi); border-radius: var(--r-md);
    padding: 12px 14px; text-align: left; box-shadow: var(--shadow-sm);
    opacity: 0; visibility: hidden; transition: opacity 0.18s ease; z-index: 5; pointer-events: none;
}
.hotspot-bubble b { display: block; font-size: 14px; font-weight: 600; color: var(--headline); margin-bottom: 3px; }
.hotspot-bubble span { font-size: 13px; line-height: 1.5; color: var(--body); }
.hotspot:hover .hotspot-bubble, .hotspot:focus .hotspot-bubble { opacity: 1; visibility: visible; }
.hotspot.flip .hotspot-bubble { bottom: auto; top: calc(100% + 12px); }
.hotspot.edge-l .hotspot-bubble { left: 0; transform: none; }
.hotspot.edge-r .hotspot-bubble { left: auto; right: 0; transform: none; }

/* post-session review — one medium at a time (features) */
.medium-pane {
    display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: center;
    width: min(var(--w-wide), 100%); margin-top: 8px;
}
.medium-copy { display: flex; flex-direction: column; gap: 14px; }
.medium-copy h3 { font-size: 24px; line-height: 1.2; }
.medium-copy p { font-size: 15px; line-height: 1.65; color: var(--body); margin: 0; }
.medium-media { display: flex; justify-content: center; align-items: center; min-width: 0; }
.medium-media .tv-shot, .medium-media .browser-shot { margin-top: 0; width: 100%; }
.medium-media.phone-shots { gap: 24px; margin-top: 0; }
.medium-media.phone-shots img { width: min(250px, 45%); }

/* browser-framed screenshot (features — web viewer) */
.browser-shot { width: min(900px, 100%); margin: 34px auto 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-hi); box-shadow: var(--shadow-md); }
.browser-bar { display: flex; align-items: center; gap: 10px; background: #171b26; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browser-bar i:nth-child(1) { background: #f43f5e; } .browser-bar i:nth-child(2) { background: #facc15; } .browser-bar i:nth-child(3) { background: var(--good); }
.browser-bar span { flex: 1; text-align: center; background: #0d1017; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--subtle); padding: 4px 14px; max-width: 340px; margin: 0 auto; }
.browser-shot img { display: block; width: 100%; }

/* features stage overview */
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(var(--w-wide), 100%); margin: 0 auto 26px auto; padding: 0 24px; }
.stage-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 18px; border-top: 3px solid currentColor; }
.stage-card > .eyebrow { display: block; margin-bottom: 12px; color: inherit; }
.stage-card ul { margin: 0 0 0 18px; padding: 0; }
.stage-card li { font-size: 13.5px; line-height: 1.5; color: var(--body); margin-bottom: 7px; }

/* pc requirements */
.spec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: min(var(--w-content), 100%); margin-top: 10px; }
.spec-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px 28px; display: flex; flex-direction: column; gap: 0; }
.spec-card-hi { background: linear-gradient(135deg, var(--tint-sky) 0%, var(--card) 55%); border-color: var(--border-hi); }
.spec-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.spec-head .eyebrow { font-size: 13px; color: var(--headline); }
.spec-head span:not(.eyebrow) { font-size: 13px; font-weight: 500; color: var(--subtle); }
.spec-row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(46,50,72,0.55); }
.spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.spec-row b { font-size: 13px; font-weight: 600; color: var(--subtle); padding-top: 1px; }
.spec-row span { font-size: 14px; line-height: 1.55; color: var(--text-strong); }

/* demo */
.demo-wrap {
    display: flex; align-items: flex-start; justify-content: center; gap: 80px; padding: var(--space-section) var(--gutter);
    background: radial-gradient(ellipse 800px 420px at 50% -10%, #1a2c44 0%, var(--bg) 65%); flex-wrap: wrap;
}
.demo-copy { display: flex; flex-direction: column; gap: 18px; max-width: 440px; padding-top: 12px; }
.demo-copy h1 { line-height: 1.12; }
.demo-copy > p { font-size: 17px; line-height: 1.65; color: var(--body); margin: 0; }
.demo-copy .note { font-size: 15px; color: var(--subtle); margin-top: 10px; }

.demo-form {
    width: min(460px, 100%); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 32px 34px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-md);
}
.demo-form .btn { padding-top: 14px; padding-bottom: 14px; }

/* legal document (/terms) */
.legal-doc { max-width: var(--w-narrow); margin: 0 auto; padding: 0 24px 80px 24px; color: var(--body); font-size: 15px; line-height: 1.7; }
.legal-doc h2 { font-size: 26px; margin: 36px 0 12px 0; }
.legal-doc h3 { font-size: 20px; margin: 30px 0 10px 0; }
.legal-doc h4 { font-size: 16px; color: var(--headline); margin: 22px 0 8px 0; }
.legal-doc p { margin: 0 0 14px 0; }
.legal-doc ul { margin: 0 0 14px 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.legal-doc strong { color: var(--headline); }

/* ---------- motion ---------- */
.reveal { opacity: 0; transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.reveal-up { transform: translateY(26px); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal.in { opacity: 1; transform: none; }

@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero h1, .hero-category, .hero .sub, .hero-ctas, .mock-wrap {
    animation: hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-category { animation-delay: 0.08s; }
.hero .sub { animation-delay: 0.16s; }
.hero-ctas { animation-delay: 0.24s; }
.mock-wrap { animation-delay: 0.34s; animation-duration: 0.85s; }

/* only cards that go somewhere lift on hover */
.session-card, .shot-card { transition: border-color 0.2s ease, transform 0.2s ease; }
.session-card:hover, .shot-card:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.reveal.session-card, .reveal.shot-card { transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero h1, .hero-category, .hero .sub, .hero-ctas, .mock-wrap { animation: none; }
    .session-card:hover, .shot-card:hover { transform: none; }
    .hotspot i { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* ---------- ask widget ---------- */
#ask-widget { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#ask-launcher {
    width: 56px; height: 56px; border: none; background: transparent; cursor: pointer; padding: 0;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.55));
    transition: transform 0.2s ease, filter 0.2s ease;
}
#ask-launcher:hover { transform: scale(1.08); filter: drop-shadow(0 10px 26px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(90,167,240,0.45)); }
#ask-launcher img { width: 100%; height: 100%; display: block; }
#ask-panel {
    width: min(340px, calc(100vw - 44px)); background: var(--panel-2); border: 1px solid var(--border-hi);
    border-radius: var(--r-lg); box-shadow: 0 24px 70px rgba(0,0,0,0.6); overflow: hidden;
}
.ask-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(120deg, var(--tint-sky), var(--card)); border-bottom: 1px solid var(--border); }
.ask-head img { width: 34px; height: 34px; }
.ask-head div { display: flex; flex-direction: column; gap: 1px; }
.ask-head b { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--headline); }
.ask-head span { font-size: 12px; color: var(--body); }
#ask-close { margin-left: auto; background: none; border: none; color: var(--subtle); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; }
#ask-close:hover { color: var(--headline); }
#ask-form { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; position: relative; }
#ask-form .field label { font-size: 12px; }
#ask-form .field input, #ask-form .field select, #ask-form .field textarea { padding: 10px 12px; font-size: 14px; }
#ask-form .field textarea { height: 84px; }
#ask-form .btn { font-size: 15px; }
#ask-error { font-size: 13px; color: var(--fix); }
#ask-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 24px; text-align: center; }
#ask-done .icon { color: var(--good); width: 40px; height: 40px; }
#ask-done b { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--headline); }
#ask-done span { font-size: 14px; color: var(--body); line-height: 1.55; }

/* ---------- cookie consent ---------- */
.consent {
    position: fixed; left: 22px; bottom: 22px; z-index: 95; width: min(400px, calc(100vw - 44px));
    background: var(--panel-2); border: 1px solid var(--border-hi); border-radius: var(--r-lg);
    box-shadow: 0 24px 70px rgba(0,0,0,0.6); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
}
.consent p { font-size: 14px; line-height: 1.55; color: var(--body); margin: 0; }
.consent-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.consent-actions a { font-size: 13px; color: var(--subtle); margin-left: auto; }
.consent-actions a:hover { color: var(--body); }

/* ---------- analysis viewer ---------- */
.viewer-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 var(--gutter) var(--space-section) var(--gutter); }
.viewer-h2 { margin: 12px 0 0 0; align-self: center; }

/* viewer-only components */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--overline); }
.back-link:hover { color: var(--headline); }
.empty-state {
    width: min(400px, 100%); background: var(--panel-2); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 30px 32px; display: flex; flex-direction: column;
    align-items: center; gap: 10px; text-align: center;
}
.empty-state b { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--headline); }
.empty-state span { font-size: 14px; line-height: 1.6; color: var(--body); }
.notice { font-size: 14px; color: var(--subtle); text-align: center; max-width: var(--measure); }

.session-list { display: flex; flex-direction: column; gap: 12px; width: min(var(--w-narrow), 100%); }
.session-card {
    display: flex; align-items: center; gap: 18px; background: var(--panel);
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 22px;
    color: var(--body);
}
.session-card:hover { color: var(--body); }
.session-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.session-main > b { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--headline); }
.session-main > span { font-size: 14px; color: var(--subtle); }
.session-clubs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.session-clubs span { background: var(--pill-bg); border: 1px solid var(--border); color: var(--text-strong); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.session-grade { display: flex; flex-direction: column; align-items: center; gap: 1px; border-radius: var(--r-md); padding: 8px 14px; flex-shrink: 0; }
.session-grade b { font-family: var(--display); font-size: 22px; font-weight: 700; }
.session-grade span { font-size: 11px; color: var(--subtle); white-space: nowrap; }
.grade-a { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); } .grade-a b { color: var(--good); }
.grade-b { background: rgba(90,167,240,0.1); border: 1px solid rgba(90,167,240,0.3); } .grade-b b { color: var(--accent); }
.grade-c { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3); } .grade-c b { color: var(--watch); }

.report-card {
    width: min(var(--w-narrow), 100%); background: var(--panel-2); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px;
}
.report-top { display: flex; justify-content: space-between; gap: 18px; }
.report-top .session-grade { align-self: flex-start; }
.report-summary { font-size: 15px; line-height: 1.6; color: var(--body); margin: 8px 0 0 0; }
.report-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tier-chip { font-size: 12px; font-style: normal; color: var(--overline); }
.pattern-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.pattern-card.sev-fix { border-color: rgba(248,113,113,0.35); }
.pattern-card.sev-watch { border-color: rgba(251,191,36,0.3); }

.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; width: min(var(--w-content), 100%); }
.shot-card {
    display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--r-md); overflow: hidden; color: var(--body);
}
.shot-card:hover { color: var(--body); }
.shot-thumb { background: var(--video-bg); height: 120px; display: flex; justify-content: center; overflow: hidden; }
.shot-thumb img { height: 100%; width: auto; object-fit: cover; }
.shot-meta { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; }
.shot-meta b { font-size: 14px; font-weight: 600; color: var(--headline); }
.shot-meta span { font-size: 13px; color: var(--body); }
.shot-meta em { font-size: 11px; font-style: normal; color: var(--overline); }

.player { width: min(var(--w-content), 100%); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.player-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.player-videos.single { grid-template-columns: 1fr; }
.player-panel { height: 460px; }
.player-panel video { height: 100%; width: 100%; object-fit: contain; display: block; background: var(--video-bg); }
.player-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px 4px 16px; }
.icon-btn { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--headline); padding: 8px 10px; cursor: pointer; display: flex; }
.icon-btn:hover { border-color: var(--border-hi); }
.player-bar input[type=range] { flex: 1; accent-color: var(--accent); }
.player-bar select { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--headline); padding: 7px 8px; font-family: inherit; font-size: 13px; }
.player-export { display: flex; align-items: center; gap: 12px; padding: 4px 16px 4px 16px; }
.export-status { font-size: 13px; color: var(--subtle); }
.player-events { display: flex; align-items: center; gap: 10px; padding: 6px 16px 14px 16px; flex-wrap: wrap; }
.ev-btn { background: var(--pill-bg); border: 1px solid var(--border); border-radius: 999px; color: var(--text-strong); font-size: 13px; font-weight: 600; padding: 6px 14px; cursor: pointer; font-family: inherit; }
.ev-btn:hover { border-color: var(--border-hi); color: var(--headline); }
.ev-tempo { font-size: 13px; color: var(--subtle); margin-left: auto; }
.ev-tempo b { color: var(--headline); }

.stat-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: min(var(--w-content), 100%); }

/* collapsible session report */
.report-top { position: relative; cursor: pointer; padding-right: 30px; -webkit-tap-highlight-color: transparent; }
.report-chev { position: absolute; top: 2px; right: 0; width: 20px; height: 20px; color: var(--overline); transition: transform 0.25s ease; }
.report-card.collapsed .report-chev { transform: rotate(-90deg); }
.report-card.collapsed > :not(.report-top) { display: none; }
.report-subhead { margin-top: 8px; }
.report-generated { font-size: 12px; color: var(--overline); margin-top: 6px; }
.regen-form { display: flex; justify-content: flex-end; margin-top: 2px; }

/* dispersion + apex maps */
.maps-row { display: flex; gap: 14px; width: min(var(--w-content), 100%); align-items: stretch; flex-wrap: wrap; }
.map-card {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.map-card:first-child { flex: 0 1 320px; }
.map-card:last-child { flex: 1 1 420px; }
.map-svg { width: 100%; height: auto; display: block; }
.map-card:last-child .map-svg { margin-top: auto; }
.map-shot { cursor: pointer; }
.map-shot:hover path, .map-shot:hover circle { opacity: 1; }
.maps-hint { font-size: 13px; font-weight: 400; color: var(--overline); margin-left: 10px; }

/* recycle bin */
.bin-link { display: inline-flex; align-items: center; gap: 7px; color: var(--subtle); font-size: 14px; margin-top: 6px; }
.bin-link:hover { color: var(--body); }
.bin-list { display: flex; flex-direction: column; gap: 10px; width: min(var(--w-narrow), 100%); }
.bin-row {
    display: flex; align-items: center; gap: 14px; background: var(--panel-2);
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px 10px 10px;
}
.bin-thumb { width: 72px; height: 54px; border-radius: var(--r-sm); overflow: hidden; background: var(--video-bg); flex-shrink: 0; display: flex; justify-content: center; }
.bin-thumb img { height: 100%; width: auto; object-fit: cover; }
.bin-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.bin-meta b { font-size: 14px; font-weight: 600; color: var(--headline); }
.bin-meta span { font-size: 13px; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-meta em { font-size: 12px; font-style: normal; color: var(--overline); }
.bin-actions { display: flex; gap: 8px; flex-shrink: 0; }
.shot-bin-form { margin-top: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .analysis-card { position: static; width: auto; margin-top: 14px; }
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-strip { grid-template-columns: 1fr; gap: 28px; max-width: var(--measure); }
}

@media (max-width: 1000px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 900px) {
    .flow { flex-direction: column; align-items: stretch; max-width: var(--measure-sm); }
    .flow-arrow { transform: rotate(90deg); padding: 2px 0; }
}

@media (max-width: 720px) {
    .nav { padding: 14px 20px; }
    .nav-links { display: none; }
    #nav-burger { display: block; }
    .footer { padding: 40px 20px 24px 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .anywhere { grid-template-columns: 1fr; grid-template-areas: "copy" "mock" "checks"; justify-items: center; gap: 40px; padding: 56px 20px; }
    .anywhere-copy, .anywhere-checks { max-width: var(--measure-sm); }
    /* 16px inputs stop iOS auto-zooming when a field is focused */
    #ask-form .field input, #ask-form .field select, #ask-form .field textarea { font-size: 16px; }
    .hero { padding: 52px 20px 48px 20px; }
    .br-wide { display: none; }
    .hero-ctas { width: 100%; }
    .hero-ctas .btn { flex: 1 1 100%; }
    /* keep both angles side by side like desktop, just smaller */
    .mock-videos { gap: 6px; padding: 8px; }
    .video-panel { height: 232px; }
    .mock-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tile { padding: 10px 10px; }
    .tile .eyebrow { font-size: 10px; letter-spacing: 0.06em; }
    .tile span { font-size: 18px; }
    .tile small { display: none; }
    .feature-grid, .included, .spec-cards { grid-template-columns: 1fr; }
    .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .player-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
    .player-panel { height: 250px; }
    .report-top { flex-direction: column; }
    .maps-row { flex-direction: column; }
    .map-card:first-child, .map-card:last-child { flex: 1 1 auto; }
    .bin-row { flex-wrap: wrap; }
    .bin-actions { width: 100%; justify-content: flex-end; }
    .section { padding-left: 20px; padding-right: 20px; }
    .split { gap: 32px; }
    .medium-pane { grid-template-columns: 1fr; gap: 28px; }
    .replay-mock .video-panel { height: 260px; }
    .price-card { padding: 30px 24px; }
    .tour-tabs { border-radius: var(--r-lg); }
    .consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
    /* the banner takes the bottom of a phone screen; the ask launcher returns once it is answered */
    body.consent-open #ask-widget { display: none; }
    .hotspot-bubble { width: 180px; }
}

@media (max-width: 560px) { .stage-grid { grid-template-columns: 1fr; } }