/* ============================================================
   ZOR - joinzor.com
   Design language mirrors the app's light, neutral-first theme.
   Colour is reserved for data and semantic feedback.
   ============================================================ */

:root {
    /* Core surfaces (matches app lightColors) */
    --bg: #F3F4F6;
    --surface: #FFFFFF;
    --surface-alt: #F9FAFB;
    --surface-raised: #F9FAFB;
    --border: #E5E7EB;
    --border-strong: #D1D5DB;

    /* Type */
    --text: #111827;
    --text-2: #4B5563;
    --muted: #6B7280;

    /* Brand accents (official ZOR accentPalette) */
    --cobalt: #3B7BC8;
    --cobalt-bright: #2F67A7;
    --mauve: #9B72AC;
    --mauve-bright: #7E5590;
    --sienna: #D4724A;
    --sienna-bright: #B04A2D;
    --petrol: #3A9180;
    --petrol-bright: #257566;

    --danger: #EF4444;
    --danger-bg: #FEF2F2;
    --success: #10B981;
    --success-bg: #ECFDF5;

    /* Typography */
    --font-display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
    --font-body: "Instrument Sans", "Helvetica Neue", sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --container: 1180px;
    --nav-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: rgba(17, 24, 39, 0.16); }

/* Grain overlay for depth */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.035'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}

/* ---------- Utility type ---------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 12px;
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--border-strong);
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--border-strong);
}

.section-title {
    font-size: clamp(32px, 4.6vw, 52px);
    margin-top: 18px;
    max-width: 15ch;
}
.section-title.wide { max-width: 22ch; }
.section-lede {
    color: var(--text-2);
    font-size: 18px;
    max-width: 56ch;
    margin-top: 18px;
}
.center { text-align: center; }
.center .section-title, .center .section-lede { margin-left: auto; margin-right: auto; }

/* ---------- Nav ---------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    background: rgba(243, 244, 246, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom-color: var(--border);
}
.nav-inner {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
.nav-logo svg { height: 26px; width: auto; }
.nav-logo svg path[fill],
.footer-brand svg path[fill],
.logo svg path[fill],
.zor-avatar svg path[fill] { fill: var(--text); }
.nav-logo svg [stroke],
.footer-brand svg [stroke],
.logo svg [stroke] { stroke: var(--text); }
.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-2);
}
.nav-links a { transition: color 0.2s ease; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    gap: 8px;
    background: var(--text);
    color: var(--surface);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.16); }

/* Mobile nav toggle */
.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 10px;
    color: var(--text);
    cursor: pointer;
}
@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-links.open {
        display: flex;
        position: absolute;
        top: var(--nav-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: rgba(243, 244, 246, 0.97);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border);
        padding: 12px 28px 24px;
    }
    .nav-links.open a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); font-size: 17px; }
    .nav-links.open a:last-of-type { border-bottom: 0; }
    .nav-burger { display: inline-flex; }
}

/* ---------- Buttons ---------- */
.btn-appstore {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--text);
    color: var(--surface);
    border-radius: 14px;
    padding: 12px 24px 12px 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-appstore:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18); }
.btn-appstore svg { width: 26px; height: 26px; }
.btn-appstore .lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.btn-appstore .small { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.75; }
.btn-appstore .big { font-size: 18px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; }
/* Pre-launch "Coming soon" state: non-interactive, visibly inactive (no dead link). */
.btn-appstore--soon { cursor: default; opacity: 0.5; }
.btn-appstore--soon:hover { transform: none; box-shadow: none; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.btn-ghost:hover { border-color: var(--muted); background: var(--surface-alt); transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: calc(var(--nav-h) + 72px) 0 96px;
    overflow: hidden;
}
.hero-glow {
    position: absolute;
    top: -30%;
    right: -12%;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(17, 24, 39, 0.045) 0%, transparent 68%);
    pointer-events: none;
}
.hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17,24,39,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,24,39,0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 78%);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 999px;
    padding: 8px 16px;
}
.hero-pill .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text);
    animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(17, 24, 39, 0.2); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(17, 24, 39, 0); }
}
.hero h1 {
    font-size: clamp(44px, 6.4vw, 84px);
    font-weight: 800;
    margin-top: 28px;
    letter-spacing: -0.03em;
}
.hero h1 .accent-word {
    display: inline-block;
    color: var(--text);
}
.hero-sub {
    margin-top: 26px;
    font-size: 19px;
    color: var(--text-2);
    max-width: 50ch;
}
.hero-ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}
.hero-note {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
    font-family: var(--font-mono);
}

/* Hero stats strip */
.hero-stats {
    display: flex;
    gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--border);
}
.hero-stat { padding: 20px 32px 0 0; margin-right: 32px; }
.hero-stat + .hero-stat { border-left: 1px solid var(--border); padding-left: 32px; }
.hero-stat .num {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.hero-stat .lbl { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- Phone mockup ---------- */
.phone-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}
.phone-wrap .orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 560px; height: 560px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(17, 24, 39, 0.12);
    border-radius: 50%;
    animation: slow-spin 60s linear infinite;
}
@keyframes slow-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.phone {
    /* Flat, slim-bezel device frame - no 3D tilt or hover motion so it
       reads identically on touch devices and desktop. */
    position: relative;
    width: 320px;
    border-radius: 46px;
    background: #111827;
    border: 1px solid var(--border-strong);
    box-shadow:
        0 0 0 1px rgba(17, 24, 39, 0.12),
        0 30px 70px rgba(17, 24, 39, 0.22),
        0 0 120px rgba(17, 24, 39, 0.05);
    padding: 10px;
}
.phone-screen {
    position: relative;   /* anchors the floating coach FAB + pinned tab bar */
    background: var(--app-bg);
    border-radius: 36px;
    overflow: hidden;
    padding: 10px 0 0;
    /* Standard iPhone screen proportions - the frame never stretches with
       content; anything past the bottom clips under the translucent tab bar,
       reading as a mid-scroll screen (like the real app). */
    aspect-ratio: 9 / 19.5;
    /* Faithful replica of the app's Today screen (light mode).
       Tokens mirror constants/theme.js at ~0.75 scale:
       background #F3F4F6 · surface #FFFFFF · surfaceAlt #F9FAFB ·
       border #E5E7EB · primary #111827 · secondary #4B5563 · muted #6B7280 ·
       Inter body + Playfair Display greeting. */
    --app-bg: #F3F4F6;
    --app-surface: #FFFFFF;
    --app-surface-alt: #F9FAFB;
    --app-border: #E5E7EB;
    --app-ink: #111827;
    --app-secondary: #4B5563;
    --app-muted: #6B7280;
    --app-success: #10B981;
    --app-success-bg: #ECFDF5;
    font-family: "Inter", "Instrument Sans", sans-serif;
}
.phone-notch {
    width: 96px; height: 26px;
    background: #111827;
    border-radius: 999px;
    margin: 0 auto;
}
.app-body {
    padding: 12px 14px 0;
    /* Micro-scale the replica content so the full Today stack (score,
       hydration, research) fits the fixed standard-ratio screen with the
       app's proportions intact. */
    zoom: 0.93;
}

/* Top bar: compact ZOR wordmark left, settings gear right (AppTopBar) */
.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
}
.app-topbar .wordmark { height: 18px; width: auto; }
.app-topbar .wordmark path[fill] { fill: var(--app-ink); }
.app-topbar .wordmark [stroke] { stroke: var(--app-ink); }
.app-topbar .gear { color: var(--app-ink); display: flex; }

/* Greeting block: uppercase eyebrow, Playfair serif greeting, quiet sub */
.app-greet { margin-top: 4px; }
.app-eyebrow {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}
.app-greeting {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: var(--app-ink);
    letter-spacing: 0;
    margin-top: 3px;
}
.app-greet-sub {
    font-size: 10px;
    font-weight: 500;
    color: var(--app-secondary);
    margin-top: 3px;
}

/* TodayCard: the ZOR hero. De-chromed - the container carries no padding,
   each section brings its own, like components/TodayCard.js */
.app-card {
    margin-top: 12px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 15px;
    padding: 0;
}
.app-score-block { padding: 12px; }
.app-score-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.app-score-head svg { color: var(--app-muted); flex-shrink: 0; }
.app-eyebrow2 {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-secondary);
}

/* Editorial score row: ring LEFT, tier badge + summary right */
.app-score-body {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* Score ring: hairline track, constant cobalt→petrol signature arc,
   quarter notches at 12/3/6/9, ink number + muted "/ 100" */
.app-ring-wrap {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}
.app-ring-wrap svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.app-ring-wrap .track { fill: none; stroke: var(--app-border); stroke-width: 9; }
.app-ring-wrap .arc {
    fill: none;
    stroke: url("#app-score-gradient");
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 323.6;
    stroke-dashoffset: 323.6;
    animation: app-arc-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes app-arc-in { to { stroke-dashoffset: 45.3; } } /* 86% of C=323.6 */
.app-ring-wrap .notches line {
    stroke: var(--app-surface);
    stroke-width: 2.5;
    stroke-linecap: butt;
}
.app-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--app-ink);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.app-ring-center small {
    font-size: 8px;
    font-weight: 500;
    color: var(--app-muted);
    margin-top: 2px;
    letter-spacing: 0.03em;
}
.app-score-right { flex: 1; min-width: 0; }
/* Tier badge: band colour lives HERE only (86 = "Strong day" teal), never on the arc */
.app-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    background: rgba(37, 117, 102, 0.11);
    color: #257566;
    font-size: 9px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 8px;
}
.app-summary {
    font-size: 10px;
    font-weight: 500;
    color: var(--app-secondary);
    line-height: 1.5;
    margin-top: 7px;
}

/* Signature pillar bar: four segments in the pillar identity hues
   (recovery mauve · training sienna · nutrition petrol · hydration cobalt),
   glyph lights up in its hue once the pillar is complete (>80%) */
.app-pillars {
    display: flex;
    gap: 5px;
    margin-top: 12px;
}
.app-pillar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.app-pillar .track {
    align-self: stretch;
    height: 3px;
    border-radius: 999px;
    background: var(--app-border);
    overflow: hidden;
}
.app-pillar .fill {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 999px;
    background: var(--fill);
    animation: app-pillar-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d) backwards;
}
@keyframes app-pillar-in { from { width: 0; } }
.app-pillar svg { width: 9px; height: 9px; color: var(--app-muted); }
.app-pillar svg.lit { color: var(--fill); }

/* Hairline divider between score block and readiness section */
.app-divider { height: 1px; background: var(--app-border); margin: 0 12px; }

/* Readiness: sits directly on the card surface (no inset panel) -
   qualitative word + insight + borderless micro-stat columns */
.app-readiness { padding: 10px 12px 12px; }
.app-ready-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--app-success);
}
.app-ready-row .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--app-success); }
.app-insight {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--app-secondary);
    line-height: 1.5;
    margin-top: 6px;
}
.app-metric-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
}
.app-metric { display: flex; flex-direction: column; min-width: 0; }
.app-metric .v {
    font-size: 11px;
    font-weight: 600;
    color: var(--app-ink);
    font-variant-numeric: tabular-nums;
}
.app-metric .v small { font-size: 8px; font-weight: 500; color: var(--app-muted); }
.app-metric .k { font-size: 7.5px; font-weight: 500; color: var(--app-muted); margin-top: 2px; }

/* HydrationCard: single row - icon chip, amount + progress track, chevron,
   white quick-add pill. Sits directly below the score card. */
.app-hydration {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
}
.app-hydro-chip {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-hydro-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.app-hydro-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}
.app-hydro-amt {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--app-ink);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.app-hydro-amt small { font-size: 9px; font-weight: 500; color: var(--app-muted); }
.app-hydro-track {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--app-border);
    overflow: hidden;
    margin-top: 5px;
}
.app-hydro-track .fill {
    display: block;
    height: 100%;
    width: 60%;
    border-radius: 999px;
    background: #3B7BC8;
}
.app-hydro-chevron { flex-shrink: 0; color: var(--app-muted); }
.app-hydro-add {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--app-ink);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 8.5px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.10);
}

/* ResearchInsightCard: tinted top edge, dismissible header, one-line science
   nudge, outline "View evidence" pill. Sits directly below the hydration card. */
.app-research {
    margin-top: 8px;
    border-top: 2px solid rgba(47, 103, 167, 0.35);
    padding: 8px 11px 9px;
}
.app-research-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.app-research-chip {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background: rgba(47, 103, 167, 0.11);
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-research-label {
    flex: 1;
    min-width: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2F67A7;
}
.app-research-x { flex-shrink: 0; color: var(--app-muted); }
.app-research-body {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--app-ink);
    line-height: 1.45;
    margin-top: 5px;
}
.app-research-pill {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    color: var(--app-ink);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 8px;
    font-weight: 600;
}

/* Bottom tab bar: translucent, hairline top border, 5 tabs */
.app-tabbar {
    display: flex;
    position: absolute;   /* pinned to the screen bottom, content runs beneath */
    left: 0; right: 0; bottom: 0;
    padding: 8px 6px 18px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}
.app-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--app-muted);
    font-size: 7.5px;
    font-weight: 500;
}
.app-tab.active { color: var(--app-ink); font-weight: 600; }
.app-tab svg { width: 16px; height: 16px; }

/* CoachLauncher FAB: the "stealth disc" voice-coach launcher, docked
   bottom-right above the tab bar. Mirrors components/CoachLauncher.js
   (light mode) at the replica's ~0.75 scale: 56pt disc → 42px, inverse-ink
   fill @20%, the FILLED ZOR mark glyph (ZorLogo's exact wordmark Z, 32/56
   of the disc) + 1px hairline rim in inverse ink, and the floating 'lg'
   shadow tier. */
.app-fab {
    position: absolute;
    right: 12px;
    bottom: 66px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(9, 9, 11, 0.20);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 8px 18px rgba(17, 24, 39, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    z-index: 10;   /* floats above the frosted call layer, like in the app */
    /* Gentle bob so the disc reads as floating; the hint pill is a child, so
       it rides along. Slower + smaller than the hero chips - it lives INSIDE
       the screen and must stay quieter than real content. */
    animation: fab-bob 4.5s ease-in-out 0.8s infinite;
    /* Centre-stage travel: position + size spring together (app: same spring
       config for pan and grow, bounciness 0 - clean settle, no theatrics). */
    transition:
        right 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}
.app-fab:active { transform: scale(0.92); }
/* Glyph sized as a fraction of the disc (app: 32pt mark in the 56pt disc) so
   it rides the 2.5x growth and stays vector-crisp at both extremes (the app
   lays it out large + scales down). Crossfades out as the Relay resolves. */
.app-fab .fab-z {
    height: 57%;
    width: auto;
    transition: opacity 0.3s ease;
}
/* Obsidian Relay state ring: hidden at rest, revealed at centre stage. The
   sweep is on the svg, so the connecting arc turns about the disc's centre
   while the fixed lighting sheen stays on the CSS background underneath. The
   full listening ring is rotationally symmetric, so it reads as still. */
.app-fab .fab-relay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform-origin: 50% 50%;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* --- Live-call takeover: click the FAB and it flips OUT of stealth, exactly
   like CoachLauncher's centre stage - travels to mid-screen at 2.5x (42px →
   104px, parked at 36% height) and the Z crossfades into the monochrome
   Obsidian Relay: a dark graphite disc (coachRelayCore #111318 →
   liftedGraphite #343840 radial sheen), near-white hairline rim, subtle
   neutral halo, and ONE hairline state ring inside it - a short arc sweeping
   through the connecting beat, settling to a still, dim full ring once live.
   No accent wash, no ripples - the ring alone carries the state. */
.phone-screen.on-call .app-fab {
    animation: none;   /* no bob at centre stage */
    right: calc(50% - 52px);
    /* Centre at 36% height - raised so the status line + captions fit below
       the disc's reserved clearance (status-under-avatar call layout). */
    bottom: calc(64% - 52px);
    width: 104px; height: 104px;
    /* Fixed lighting sheen (ObsidianRelay's RelayCore radial gradient). */
    background: radial-gradient(64% 64% at 48% 43%, #111318 0%, #111318 58%, #343840 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        0 14px 34px rgba(17, 24, 39, 0.18);
}
.phone-screen.on-call .app-fab-hint { display: none; }
.phone-screen.on-call .app-fab .fab-z { opacity: 0; }
/* One sweep across the 1.5s connecting beat, then the ring rests - the app
   stops the rotation the moment the call goes live rather than spinning on. */
.phone-screen.on-call .app-fab .fab-relay {
    opacity: 1;
    animation: relay-spin 1.5s linear 1;
}
/* Arc in for the handshake, out as the coach picks up (mirrors the timing of
   .app-call-connecting exactly, so the ring and the copy change together). */
.relay-connect { opacity: 0; }
.phone-screen.on-call .relay-connect {
    animation: relay-connect-sweep 1.5s ease forwards;
}
/* Full ring settles in as "Listening — just talk" appears (same 1.5s delay). */
.relay-idle { opacity: 0; }
.phone-screen.on-call .relay-idle {
    animation: relay-idle-in 0.45s ease-out 1.5s forwards;
}
/* Compact neutral halo (coachRelayHalo, ~1.10 scale): quiet separation from
   the frosted layer - carries no state meaning, nothing coloured orbits. */
.phone-screen.on-call .app-fab::before {
    content: "";
    position: absolute;
    inset: -5%;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.10);
    z-index: -1;
    pointer-events: none;
}
@keyframes relay-spin {
    to { transform: rotate(360deg); }
}
@keyframes relay-connect-sweep {
    0% { opacity: 0; }
    15%, 80% { opacity: 0.8; }
    100% { opacity: 0; }
}
@keyframes relay-idle-in {
    from { opacity: 0; }
    to { opacity: 0.32; }
}

/* Frosted call layer (RealtimeCoachOverlay): blurs the Today screen under the
   disc and carries the scripted exchange. Hidden until .on-call. */
.app-call {
    position: absolute;
    inset: 0;
    z-index: 5;
    /* Frosted call surface, matching the app: heavy blur + a background-tinted
       veil so captions read on a uniform layer whatever sits underneath. */
    background: rgba(243, 244, 246, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.phone-screen.on-call .app-call {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}
/* Call sequence, mirroring the app: "Connecting to your coach" + three pulsing
   dots first, then it hands off to "Listening - just talk" and the captions.
   Status sits BELOW the disc (centre ~36% height), outside the Relay's
   reserved clearance zone (COACH_FAB_CLEAR_RADIUS), with the captions under it. */
.app-call-connecting,
.app-call-state {
    position: absolute;
    top: calc(36% + 88px);
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--app-secondary);
}
.app-call-connecting { opacity: 0; }
.phone-screen.on-call .app-call-connecting {
    animation: call-connecting 1.5s ease forwards;
}
.app-call-connecting i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cobalt);
    animation: call-dot 0.9s ease-in-out infinite;
}
.app-call-connecting i:nth-child(2) { animation-delay: 0.18s; }
.app-call-connecting i:nth-child(3) { animation-delay: 0.36s; }
@keyframes call-dot {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}
/* Visible while connecting, gone once the coach picks up. */
@keyframes call-connecting {
    0% { opacity: 0; }
    15%, 80% { opacity: 1; }
    100% { opacity: 0; }
}
.app-call-state { opacity: 0; }
.phone-screen.on-call .app-call-state {
    animation: call-line 0.45s ease-out forwards;
    animation-delay: 1.5s;
}
/* Labelled captions below the status line: ZOR top-left, you bottom-right,
   equal ink weight - who's talking is carried by the label + alignment. */
.app-call-lines {
    position: absolute;
    /* Under the status line, still clear of the rings. */
    top: calc(36% + 114px);
    left: 26px; right: 26px;
}
.app-call-lines .line {
    opacity: 0;
    transform: translateY(6px);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--app-ink);
}
.phone-screen.on-call .app-call-lines .line {
    animation: call-line 0.45s ease-out forwards;
}
.phone-screen.on-call .app-call-lines .cap-you { animation-delay: 2.1s; }
.phone-screen.on-call .app-call-lines .cap-coach { animation-delay: 3.1s; }
/* Chat order: the user's question first (top), the coach's answer below. */
.app-call-lines .cap-you { text-align: right; }
.app-call-lines .cap-coach {
    margin-top: 10px;
    text-align: left;
}
.app-call .cap-label {
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
/* App: the coach overline is "ZOR" in primary ink with one small cobalt
   status dot beside it (colors.accent); the user label stays muted. */
.app-call .cap-coach .cap-label { color: var(--app-ink); }
.app-call .cap-you .cap-label { color: var(--app-muted); }
.cap-label .cap-dot {
    display: inline-block;
    width: 3.5px; height: 3.5px;
    border-radius: 50%;
    background: var(--cobalt);
    margin-left: 3px;
    vertical-align: 1.5px;
}
@keyframes call-line {
    to { opacity: 1; transform: translateY(0); }
}
.app-call-end {
    position: absolute;
    bottom: 68px;
    left: 0; right: 0;
    text-align: center;
    font-size: 8.5px;
    font-weight: 500;
    color: var(--app-muted);
}
/* Call controls row (RealtimeCoachOverlay): Speaker route toggle shown in its
   active filled-ink state next to the danger-variant End button. Decorative -
   the whole frosted layer is the click target that ends the preview. */
.app-call-controls {
    position: absolute;
    bottom: 28px;
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.app-call-controls .ctl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 8.5px;
    font-weight: 600;
}
.app-call-controls .ctl svg { width: 10px; height: 10px; }
/* Mute at rest: routeAction's resting treatment - surface fill, hairline
   border, ink label. Shown unmuted; muted would tint danger in the app. */
.app-call-controls .ctl-mute {
    min-width: 56px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--app-ink);
}
/* Speaker active: buttonPrimaryBg fill, white icon + label. */
.app-call-controls .ctl-speaker {
    min-width: 68px;
    background: var(--app-ink);
    color: #FFFFFF;
}
/* End: PrimaryButton variant="danger" - transparent bg, neutral border,
   danger ink for icon + label. */
.app-call-controls .ctl-end {
    min-width: 52px;
    background: transparent;
    border: 1px solid var(--app-border);
    color: #EF4444;
}

/* Discovery pill (CoachLauncher's hintPill): blooms on the FAB's inward side,
   holds, fades, and re-blooms on a loop - the site's stand-in for the app's
   one-shot hint. Wrapper centres it beside the disc; the inner pill carries
   the animated transform so the two never fight. */
.app-fab-hint {
    position: absolute;
    top: 0; bottom: 0;
    right: calc(100% + 8px);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.app-fab-hint .pill {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(23, 26, 33, 0.10);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 9px;
    font-weight: 600;
    color: #171A21;
    box-shadow: 0 5px 15px rgba(17, 24, 39, 0.10);
    opacity: 0;
    animation: hint-bloom 9s ease-in-out 1.2s infinite;
}
/* Tiny pulsing "live" dot - shared by the hint pill and the call state line. */
.live-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--app-success);
    animation: live-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes fab-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
/* Bloom in (slide out of the disc + fade), hold ~4.5s, fade, rest, repeat. */
@keyframes hint-bloom {
    0%, 4% { opacity: 0; transform: translateX(8px) scale(0.96); }
    9%, 58% { opacity: 1; transform: translateX(0) scale(1); }
    64%, 100% { opacity: 0; transform: translateX(8px) scale(0.96); }
}
@keyframes live-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .app-fab { animation: none; transition: none; }
    /* Resting state: pill simply visible, no motion (mirrors useReduceMotion). */
    .app-fab-hint .pill { animation: none; opacity: 1; transform: none; }
    .app-fab-hint .live-dot { animation: none; }
    /* Call preview still works - it just cuts instead of springing, and the
       Relay rests. The ring keeps its MEANING with nothing moving: the arc is
       dropped and the still listening ring is shown outright, which is exactly
       what the app renders under reduce-motion. */
    .phone-screen.on-call .app-fab .fab-relay { animation: none; }
    .phone-screen.on-call .relay-connect { animation: none; opacity: 0; }
    .phone-screen.on-call .relay-idle { animation: none; opacity: 0.32; }
    .app-call { transition: none; }
    /* Skip the connecting beat + dot pulse; land straight on the live state. */
    .phone-screen.on-call .app-call-connecting { animation: none; opacity: 0; }
    .app-call-connecting i { animation: none; opacity: 0.6; }
    .phone-screen.on-call .app-call-state,
    .phone-screen.on-call .app-call-lines .line { animation-duration: 0.01s; animation-delay: 0s; }
}

/* Floating chips around the phone */
.float-chip {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.14);
    animation: float-y 5.5s ease-in-out infinite;
}
.float-chip .ico {
    width: 24px; height: 24px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--surface-alt);
    color: var(--text-2);
}
.float-chip.c1 .ico,
.float-chip.c2 .ico { background: var(--success-bg); color: var(--success); }
/* c1 floats above the device so it never covers the in-app ZOR wordmark. */
.float-chip.c1 { top: -16px; left: -6%; animation-delay: 0s; }
.float-chip.c2 { bottom: 22%; right: -8%; animation-delay: 1.6s; }
/* c3 hangs off the device's bottom edge so the tab bar icons stay visible. */
.float-chip.c3 { bottom: -24px; left: -2%; animation-delay: 3s; }
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 72px; }
    .phone-wrap { order: 2; }
    /* Once the layout stacks, c1 sits over the phone's top bar and covers
       the ZOR wordmark - hide it; the two bottom chips carry the effect. */
    .float-chip.c1 { display: none; }
    .float-chip.c2 { right: 0; }
    /* Keep c3 below the tab bar so the tab icons stay visible. */
    .float-chip.c3 { bottom: -12px; left: 0; }
}
@media (max-width: 480px) {
    .hero-stats { flex-direction: column; border-top: 0; }
    .hero-stat { border-top: 1px solid var(--border); margin-right: 0; padding-right: 0; }
    .hero-stat + .hero-stat { border-left: 0; padding-left: 0; }
    /* Scale the whole device instead of narrowing it - the replica lays out
       identically at every breakpoint (same wrapping, same proportions). */
    .phone { zoom: 0.875; }
    .float-chip { display: none; }
}

/* ---------- Replace-four strip ---------- */
.replace-strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 30px 0;
}
.replace-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 30px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.replace-inner .x { color: var(--border-strong); }
.replace-inner .item { display: flex; align-items: center; gap: 10px; }
.replace-inner .item .sw { width: 9px; height: 9px; border-radius: 3px; background: var(--border-strong); }
.replace-inner strong { color: var(--text); font-weight: 500; }

/* ---------- Sections ---------- */
.section { padding: 120px 0; position: relative; }
.section.tight { padding: 96px 0; }

/* ---------- Pillars (ZOR Score) ---------- */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 56px;
}
.pillar-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.pillar-card:hover { transform: translateY(-6px); }
.pillar-card::before {
    content: "";
    position: absolute;
    top: 0; left: 26px; right: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--border-strong);
}
.pillar-card .glow {
    position: absolute;
    top: -60px; right: -60px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(17, 24, 39, 0.045), transparent 70%);
    pointer-events: none;
}
.pillar-card .pts {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
}
.pillar-card h3 { font-size: 22px; margin-top: 10px; }
.pillar-card p { font-size: 14.5px; color: var(--text-2); margin-top: 10px; }
@media (max-width: 980px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars-grid { grid-template-columns: 1fr; } }

/* Big score header layout */
.score-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
}
.score-big {
    font-family: var(--font-display);
    font-size: clamp(90px, 12vw, 170px);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--text);
    user-select: none;
}
.score-big small {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--muted);
    margin-top: 14px;
}
@media (max-width: 860px) {
    .score-header { grid-template-columns: 1fr; }
    .score-big { order: -1; }
}

/* ---------- Feature bento ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 64px;
}
.bento-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.bento-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-2 { grid-column: span 2; }
.bento-card .tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.bento-card h3 { font-size: 26px; margin-top: 14px; letter-spacing: -0.02em; }
.bento-card > p { font-size: 15.5px; color: var(--text-2); margin-top: 12px; max-width: 52ch; }
.bento-card .feat-list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bento-card .feat-list li {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 6px 14px;
    background: var(--surface-alt);
}
.bento-card .art {
    margin-top: auto;
    padding-top: 28px;
}
@media (max-width: 980px) {
    .bento { grid-template-columns: 1fr; }
    .bento-card.span-4, .bento-card.span-3, .bento-card.span-2 { grid-column: span 1; }
}

/* Bento artwork: chat bubbles - replica of CoachScreen (light mode).
   User: ink bubble, white text, squared top-right corner.
   Coach: avatar + white surface bubble, squared top-left corner,
   optional action chip (coachActionChip). */
.chat-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: "Inter", "Instrument Sans", sans-serif;
}
.chat-row { display: flex; }
.chat-row.user { justify-content: flex-end; }
.chat-row.coach { justify-content: flex-start; gap: 8px; }
.zor-avatar {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.zor-avatar svg { width: 11px; height: 11px; }
.chat-bubble {
    max-width: 78%;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    padding: 10px 14px;
    border-radius: 12px;
}
.chat-bubble.user {
    background: var(--text);
    color: var(--surface);
    border-top-right-radius: 5px;
}
.chat-bubble.coach {
    max-width: 100%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-top-left-radius: 5px;
}
.coach-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}

/* Bento artwork: macro rings */
.rings-demo { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.mini-ring {
    position: relative;
    width: 74px; height: 74px;
    border-radius: 50%;
}
.mini-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.mini-ring .v {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 15px;
}
.mini-ring .v small { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; color: var(--muted); margin-top: 1px; }

/* Bento artwork: barcode */
.scan-demo {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface-raised);
    border-radius: 16px;
    padding: 14px 18px;
}
.barcode {
    display: flex;
    align-items: stretch;
    gap: 2.5px;
    height: 40px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.barcode i { display: block; width: 3px; background: var(--text); opacity: 0.85; }
.barcode i:nth-child(2n) { width: 1.5px; opacity: 0.5; }
.barcode i:nth-child(3n) { width: 4.5px; }
.barcode::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--text);
    box-shadow: none;
    animation: scanline 2.4s ease-in-out infinite;
}
@keyframes scanline {
    0%, 100% { top: 8%; }
    50% { top: 88%; }
}
.scan-demo .info .n { font-size: 13.5px; font-weight: 600; }
.scan-demo .info .m { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 3px; letter-spacing: 0.06em; }

/* Bento artwork: plate calculator */
.plate-demo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}
.plate-demo .bar-line { height: 7px; background: linear-gradient(#6B7280, #4B5563); border-radius: 3px; flex: 1; min-width: 24px; }
.plate-demo .plate {
    border-radius: 4px;
    flex-shrink: 0;
}
.plate-demo .p45 { width: 13px; height: 62px; background: var(--cobalt); }
.plate-demo .p25 { width: 11px; height: 48px; background: var(--petrol); }
.plate-demo .p10 { width: 9px; height: 36px; background: var(--sienna); }
.plate-demo .p5  { width: 8px; height: 27px; background: var(--mauve); }
.plate-demo .collar { width: 7px; height: 16px; background: #6B7280; border-radius: 2px; flex-shrink: 0; }
.plate-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.1em;
    margin-top: 10px;
    text-align: center;
}

/* Bento artwork: sparkline */
.spark-demo { position: relative; }
.spark-demo svg { width: 100%; height: auto; }
.spark-demo .spark-path {
    fill: none;
    stroke: var(--petrol-bright);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}
.in-view .spark-demo .spark-path { animation: draw-line 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.spark-demo .spark-fill { fill: url(#sparkGrad); opacity: 0; transition: opacity 0.8s ease 1.6s; }
.in-view .spark-demo .spark-fill { opacity: 1; }

/* Bento artwork: streak dots */
.streak-demo { display: flex; gap: 7px; flex-wrap: wrap; }
.streak-demo i {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: var(--surface-raised);
}
.streak-demo i.on { background: var(--cobalt); box-shadow: 0 0 14px rgba(59, 123, 200, 0.35); }
.streak-demo i.today { background: var(--cobalt-bright); outline: 2px solid rgba(114, 167, 224, 0.4); outline-offset: 2px; }

/* Bento artwork: live voice coach - LIVE badge, breathing equalizer,
   and a "say it → it's logged" caption pair. */
.voice-demo {
    background: var(--surface-raised);
    border-radius: 16px;
    padding: 16px 18px;
}
.voice-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--muted);
}
.voice-eq {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    margin-top: 12px;
}
.voice-eq i {
    display: block;
    width: 3.5px;
    height: 30%;
    border-radius: 2px;
    background: var(--cobalt);
    animation: eq-bounce 1.15s ease-in-out infinite;
}
/* Stagger + vary the bars so the "waveform" reads as speech, not a metronome */
.voice-eq i:nth-child(2n) { animation-duration: 0.9s; background: var(--petrol); }
.voice-eq i:nth-child(3n) { animation-delay: 0.15s; height: 46%; }
.voice-eq i:nth-child(4n) { animation-delay: 0.3s; height: 58%; }
.voice-eq i:nth-child(5n) { animation-delay: 0.45s; height: 38%; }
.voice-eq i:nth-child(7n) { animation-delay: 0.6s; height: 66%; }
@keyframes eq-bounce {
    0%, 100% { transform: scaleY(0.55); }
    50% { transform: scaleY(1.45); }
}
/* Labelled live captions, matching the app's call screen: YOU right-aligned,
   COACH left-aligned, equal ink - the label + alignment say who's talking. */
.voice-caption { margin-top: 12px; }
.voice-caption .cap-you,
.voice-caption .cap-coach {
    font-family: "Inter", "Instrument Sans", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
}
.voice-caption .cap-you { text-align: right; }
.voice-caption .cap-coach { margin-top: 8px; text-align: left; }
.voice-caption .cap-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.voice-caption .cap-you .cap-label { color: var(--muted); }
/* App call UI: "ZOR" overline in primary ink + one cobalt status dot. */
.voice-caption .cap-coach .cap-label { color: var(--text); }
.voice-caption .did {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--petrol-bright);
    margin-top: 6px;
}

/* Bento artwork: ZOR Score duel - two rows of day squares + running totals */
.duel-demo { display: flex; flex-direction: column; gap: 9px; }
.duel-row { display: flex; align-items: center; gap: 6px; }
.duel-row .who {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--muted);
    width: 34px;
    flex-shrink: 0;
}
.duel-row i {
    width: 18px; height: 18px;
    border-radius: 6px;
    background: var(--surface-raised);
}
.duel-row i.w { background: var(--cobalt); box-shadow: 0 0 12px rgba(59, 123, 200, 0.3); }
.duel-row i.l { background: var(--border-strong); }
.duel-row .pts {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    margin-left: 6px;
}

/* ---------- Loop section (how it gets smarter) ---------- */
.loop-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 64px;
    counter-reset: loopstep;
}
.loop-step {
    position: relative;
    padding: 36px 30px 36px 0;
    margin-right: 30px;
    border-top: 1px solid var(--border-strong);
}
.loop-step::before {
    counter-increment: loopstep;
    content: "0" counter(loopstep);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.14em;
}
.loop-step::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 44px;
    height: 1px;
    background: var(--border-strong);
}
.loop-step h3 { font-size: 20px; margin-top: 16px; }
.loop-step p { font-size: 14.5px; color: var(--text-2); margin-top: 10px; }
@media (max-width: 980px) {
    .loop-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .loop-row { grid-template-columns: 1fr; }
    .loop-step { margin-right: 0; padding-right: 0; }
}

/* ---------- Privacy strip ---------- */
.privacy-band {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.privacy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 72px;
    align-items: center;
}
.privacy-points { display: flex; flex-direction: column; gap: 0; }
.privacy-point {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}
.privacy-point:last-child { border-bottom: 0; }
.privacy-point .pico {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2);
}
.privacy-point h4 { font-size: 16.5px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.privacy-point p { font-size: 14.5px; color: var(--text-2); margin-top: 5px; }
@media (max-width: 900px) { .privacy-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- Plans ---------- */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 64px;
    align-items: stretch;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.plan-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}
.plan-card:hover { transform: translateY(-6px); }
.plan-card.featured {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.08);
}
.plan-card .plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--surface);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.plan-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.plan-tagline { font-size: 14.5px; color: var(--text-2); margin-top: 8px; min-height: 44px; }
.plan-list { list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border-strong); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan-list li { display: flex; gap: 12px; font-size: 14.5px; color: var(--text-2); align-items: flex-start; }
.plan-list li .ck { color: var(--text); flex-shrink: 0; margin-top: 3px; }
.plan-list li strong { color: var(--text); font-weight: 600; }
.plan-cta {
    margin-top: 30px;
    text-align: center;
    padding: 13px 20px;
    border-radius: 13px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid var(--border-strong);
    transition: background 0.2s ease, transform 0.2s ease;
}
.plan-cta:hover { background: var(--surface-alt); transform: translateY(-1px); }
.plan-card.featured .plan-cta {
    background: var(--text);
    color: var(--surface);
    border-color: transparent;
}
.plan-card.featured .plan-cta:hover { box-shadow: 0 10px 30px rgba(17, 24, 39, 0.16); }
.plans-note {
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 32px;
    font-family: var(--font-mono);
}
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 760px; margin: 56px auto 0; }
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 4px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}
.faq-item summary:hover { color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--text-2);
    transition: transform 0.3s ease, background 0.2s ease;
}
.faq-item[open] summary .plus { transform: rotate(45deg); background: var(--surface-raised); }
.faq-item .faq-body {
    padding: 0 4px 28px;
    color: var(--text-2);
    font-size: 15.5px;
    max-width: 64ch;
}
.faq-item .faq-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Final CTA ---------- */
.cta-final {
    position: relative;
    text-align: center;
    padding: 140px 0 150px;
    overflow: hidden;
}
.cta-final .cta-glow {
    position: absolute;
    bottom: -55%;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 700px;
    background: radial-gradient(ellipse at center, rgba(17, 24, 39, 0.05) 0%, transparent 72%);
    pointer-events: none;
}
.cta-final h2 {
    position: relative;
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: -0.03em;
    max-width: 18ch;
    margin: 24px auto 0;
}
.cta-final .section-lede { position: relative; }
.cta-final .hero-ctas { position: relative; justify-content: center; margin-top: 44px; }
.cta-final .hero-note { position: relative; }

/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    padding: 72px 0 40px;
    position: relative;
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
}
.footer-brand svg { height: 30px; width: auto; }
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 18px; max-width: 30ch; }
.footer h5 {
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer ul a { font-size: 14.5px; color: var(--text-2); transition: color 0.2s ease; }
.footer ul a:hover { color: var(--text); }
.footer-bottom {
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--muted);
}
.footer-bottom .legal-links { display: flex; gap: 24px; }
.footer-bottom a:hover { color: var(--text); }
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer ul { gap: 0; }
    .footer ul a,
    .footer-bottom .legal-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Legal / prose pages (privacy, terms, support)
   ============================================================ */
.page-hero {
    padding: calc(var(--nav-h) + 72px) 0 56px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.page-hero .hero-grid-lines { opacity: 0.8; }
.page-hero h1 {
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-top: 20px;
    position: relative;
}
.page-hero .meta {
    position: relative;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    margin-top: 18px;
    letter-spacing: 0.06em;
}

.prose-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 72px;
    /* keep the container's horizontal padding - only vertical is custom */
    padding-top: 72px;
    padding-bottom: 120px;
    align-items: start;
}
.prose-toc {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
    font-size: 14px;
}
.prose-toc h5 {
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}
.prose-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prose-toc a {
    display: block;
    padding: 8px 0 8px 16px;
    border-left: 2px solid var(--border);
    color: var(--text-2);
    transition: color 0.2s ease, border-color 0.2s ease;
    line-height: 1.4;
}
.prose-toc a:hover { color: var(--text); border-left-color: var(--muted); }
.prose-toc a.active { color: var(--text); border-left-color: var(--text); }
@media (max-width: 900px) {
    .prose-layout { grid-template-columns: 1fr; gap: 40px; }
    .prose-toc { position: static; }
    .prose-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .prose-toc a { border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 15px; font-size: 13px; }
    .prose-toc a.active { border-color: var(--text); }
}

.prose { max-width: 74ch; }
.prose h2 {
    font-size: 26px;
    letter-spacing: -0.015em;
    margin: 56px 0 0;
    scroll-margin-top: calc(var(--nav-h) + 32px);
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .idx {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.prose h3 { font-size: 18.5px; margin: 32px 0 0; font-family: var(--font-body); font-weight: 650; letter-spacing: 0; }
.prose p { margin: 16px 0 0; color: var(--text-2); font-size: 15.5px; }
.prose ul { margin: 16px 0 0; padding-left: 22px; color: var(--text-2); font-size: 15.5px; display: flex; flex-direction: column; gap: 9px; }
.prose li::marker { color: var(--text); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.prose .callout {
    margin-top: 24px;
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--text);
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 20px 24px;
}
.prose .callout.warn { border-left-color: var(--danger); }
.prose .callout p { margin: 0; }
.prose .callout p + p { margin-top: 12px; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14.5px;
}
.prose th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 16px 10px 0;
    border-bottom: 1px solid var(--border-strong);
}
.prose td {
    padding: 13px 16px 13px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    vertical-align: top;
}
.prose td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }

/* ---------- Support page cards ---------- */
.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
}
.support-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.support-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.support-card .sico {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.support-card h3 { font-size: 20px; }
.support-card p { font-size: 14.5px; color: var(--text-2); margin-top: 10px; }
.support-card .link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
}
.support-card .link:hover { text-decoration: underline; text-underline-offset: 3px; }
#contact,
#faq,
#beta { scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }