/* ============================================================================
   Compliance Co-Pilot — thecopilot.app
   Shared stylesheet for index / privacy / terms
   ========================================================================= */

@layer reset, base, layout, components, sections, utilities;

/* ── Cross-document view transitions (progressive enhancement) ───────────── */
@view-transition { navigation: auto; }

/* ═══════════════════════════════════════════════════ RESET ═══════════════ */
@layer reset {
  /* Sized boxes were adding padding on top of their declared size: the nav CTA
     computed 44px of content + 25.6px of padding = 70px tall. Declared in the
     FIRST layer, so any component, later layer or host style still overrides it. */
  *, *::before, *::after { box-sizing: border-box; }

  :where(html) { -webkit-text-size-adjust: 100%; }
  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
  :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4, button, input, label) { line-height: 1.2; }
  :where(img, picture, svg, video) { display: block; max-inline-size: 100%; }
  :where(input, button, textarea, select) { font: inherit; color: inherit; }
  :where(button) { background: none; border: 0; cursor: pointer; }
  :where(a) { color: inherit; }
  :where(p, li) { text-wrap: pretty; }
  :where(h1, h2, h3) { text-wrap: balance; }
  :where(summary) { cursor: pointer; }
  :where(summary)::-webkit-details-marker { display: none; }
  /* The UA rule for [hidden] loses to any author `display` declaration, which
     silently breaks JS-toggled panels. Pin it here, in the first layer, so an
     important declaration cannot be out-ordered. */
  [hidden] { display: none !important; }
}

/* ═══════════════════════════════════════════════ TOKENS / BASE ═══════════ */
@layer base {
  :root {
    color-scheme: dark;

    /* Tier 1 — literal, sampled from the Compliance Co-Pilot logo & app */
    --navy-990: #030B16;
    --navy-950: #05111F;
    --navy-900: #08182A;
    --navy-850: #0B2138;
    --navy-800: #0F2A47;
    --navy-700: #16385C;
    --gold-200: #F7E2B4;
    --gold-300: #F1CE8A;
    --gold-400: #E9B75D;   /* brand gold */
    --gold-500: #CE9733;
    --jade-300: #5FD8B0;
    --jade-400: #2FBE92;
    --jade-500: #13906C;
    --cream:    #F7F2E9;
    --slate-100:#C5D5E6;
    --slate-300:#8EA3BA;
    --slate-500: #5D738D;

    /* Tier 2 — semantic */
    --bg:            var(--navy-990);
    --bg-raised:     var(--navy-900);
    --surface:       color-mix(in oklab, var(--navy-850) 88%, white 12%);
    --accent:        var(--gold-400);
    --accent-strong: var(--gold-300);
    --accent-2:      var(--jade-400);
    --heading:       var(--cream);
    --text:          var(--slate-100);
    --text-muted:    var(--slate-300);
    --hairline:      color-mix(in oklab, var(--cream) 10%, transparent);
    --hairline-warm: color-mix(in oklab, var(--gold-400) 22%, transparent);
    --ring:          color-mix(in oklab, var(--gold-400) 70%, transparent);

    /* Tier 3 — UI */
    --radius-sm: .5rem;
    --radius:    .875rem;
    --radius-lg: 1.375rem;
    --shell:     min(75rem, 100% - 2.5rem);
    --shell-narrow: min(46rem, 100% - 2.5rem);
    --section-y: clamp(4.5rem, 9vw, 8.5rem);

    --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --ease-out: cubic-bezier(.22, 1, .36, 1);

    --in-oklab: ;
  }
  @supports (background: linear-gradient(in oklab, white, black)) {
    :root { --in-oklab: in oklab; }
  }

  html { scroll-behavior: smooth; scroll-padding-block-start: 6rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.65;
    font-weight: 350;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    scrollbar-color: var(--navy-700) var(--navy-990);
  }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 120;
    font-weight: 400;
    color: var(--heading);
    letter-spacing: -.015em;
    line-height: 1.08;
  }
  em { font-style: italic; color: var(--accent-strong); }

  a { text-decoration-thickness: 1px; text-underline-offset: .22em; }

  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
    border-radius: 3px;
  }
  ::selection { background: color-mix(in oklab, var(--gold-400) 40%, transparent); color: var(--cream); }

  @media (forced-colors: active) {
    :root { --hairline: CanvasText; --hairline-warm: CanvasText; }
  }
}

/* ═════════════════════════════════════════════════ LAYOUT ════════════════ */
@layer layout {
  .shell { inline-size: var(--shell); margin-inline: auto; }
  .shell-narrow { inline-size: var(--shell-narrow); margin-inline: auto; }
  .section { padding-block: var(--section-y); position: relative; background: var(--bg); }

  .skip-link {
    position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
    z-index: 999; background: var(--gold-400); color: var(--navy-990);
    padding: .7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600;
  }
  .skip-link:focus { inset-block-start: 1rem; }
}

/* ═════════════════════════════════════════════ COMPONENTS ════════════════ */
@layer components {

  /* ── Eyebrow pill ─────────────────────────────────────────────────────── */
  .pill {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem 1rem .4rem .7rem;
    border: 1px solid var(--hairline-warm);
    border-radius: 999px;
    background: color-mix(in oklab, var(--gold-400) 7%, transparent);
    font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-300);
    line-height: 1.4;
  }
  .pill .dot {
    inline-size: .4rem; block-size: .4rem; border-radius: 50%;
    background: var(--gold-400); flex: none;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--gold-400) 60%, transparent);
    animation: ping 2.4s ease-out infinite;
  }
  @keyframes ping {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--gold-400) 55%, transparent); }
    70%  { box-shadow: 0 0 0 .55rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* ── Section label ────────────────────────────────────────────────────── */
  .label {
    display: flex; align-items: center; gap: .75rem;
    font-size: .6875rem; font-weight: 600; letter-spacing: .22em;
    text-transform: uppercase; color: var(--accent);
    margin-block-end: 1.1rem;
  }
  .label::before {
    content: ""; inline-size: 1.75rem; block-size: 1px;
    background: currentColor; flex: none;
  }
  .label.jade { color: var(--accent-2); }

  /* ── Buttons ──────────────────────────────────────────────────────────── */
  .btn {
    --btn-bg: var(--gold-400);
    --btn-fg: var(--navy-990);
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-block-size: 2.75rem;
    padding: .8rem 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: .8125rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    position: relative; overflow: hidden;
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background .2s;
  }
  .btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%,
                color-mix(in oklab, white 45%, transparent) 50%, transparent 62%);
    translate: -110% 0;
    transition: translate .65s var(--ease-out);
  }
  .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 .75rem 2rem color-mix(in oklab, var(--gold-500) 38%, transparent);
  }
  .btn:hover:not(:disabled)::after { translate: 110% 0; }
  .btn:disabled { opacity: .6; cursor: progress; }

  .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    border: 1px solid var(--hairline);
    font-weight: 500; letter-spacing: .04em; text-transform: none;
    font-size: .9375rem;
  }
  .btn-ghost:hover {
    box-shadow: none; border-color: color-mix(in oklab, var(--cream) 30%, transparent);
    color: var(--heading);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn, .btn::after { transition: none; }
    .btn:hover { transform: none; }
  }

  /* ── Phone frame ──────────────────────────────────────────────────────── */
  .phone {
    --phone-w: 17rem;
    inline-size: var(--phone-w);
    max-inline-size: 100%;
    aspect-ratio: 480 / 1040;
    position: relative;
    border-radius: calc(var(--phone-w) * .13);
    padding: .3rem;
    background:
      linear-gradient(150deg, #6f7a8a 0%, #23303f 22%, #16212e 55%, #55606f 78%, #1b2733 100%);
    box-shadow:
      0 2.5rem 5rem -1rem rgb(0 0 0 / .75),
      0 .5rem 1.5rem -.5rem rgb(0 0 0 / .6),
      inset 0 0 0 1px rgb(255 255 255 / .16);
    isolation: isolate;
  }
  .phone::before,
  .phone::after {           /* side buttons */
    content: ""; position: absolute; inline-size: 2px; border-radius: 2px;
    background: linear-gradient(#5d6876, #2b3543);
  }
  .phone::before { inset-inline-start: -2px; inset-block-start: 21%; block-size: 9%; }
  .phone::after  { inset-inline-end: -2px;  inset-block-start: 24%; block-size: 13%; }

  .phone-screen {
    position: relative;
    block-size: 100%;
    border-radius: calc(var(--phone-w) * .115);
    overflow: hidden;
    background: var(--navy-800);
    display: grid;
  }
  .phone-screen > img,
  .phone-screen > video {
    grid-area: 1 / 1;
    inline-size: 100%; block-size: 100%;
    object-fit: cover; object-position: top center;
  }
  .phone-island {
    position: absolute; inset-block-start: 1.6%; inset-inline: 0;
    margin-inline: auto;
    inline-size: 30%; block-size: 2.4%; min-block-size: .55rem;
    background: #05080d; border-radius: 999px; z-index: 2;
    pointer-events: none;
  }
  .phone.glow-gold  { --halo: var(--gold-400); }
  .phone.glow-jade  { --halo: var(--jade-400); }
  .phone:where(.glow-gold, .glow-jade) {
    box-shadow:
      0 2.5rem 5rem -1rem rgb(0 0 0 / .75),
      0 0 4rem -.5rem color-mix(in oklab, var(--halo) 32%, transparent),
      inset 0 0 0 1px rgb(255 255 255 / .16);
  }

  .phone-stage { position: relative; display: grid; justify-items: center; }
  .phone-stage::after {         /* floor glow */
    content: ""; position: absolute; z-index: -1;
    inset-block-end: -1.5rem; inset-inline: 15%;
    block-size: 4rem; border-radius: 50%;
    background: radial-gradient(ellipse at center,
      color-mix(in oklab, var(--jade-400) 40%, transparent), transparent 70%);
    filter: blur(14px);
  }
  .phone-stage.gold-floor::after {
    background: radial-gradient(ellipse at center,
      color-mix(in oklab, var(--gold-400) 34%, transparent), transparent 70%);
  }

  /* Floating stat chip pinned to the hero phone */
  .float-chip {
    position: absolute; z-index: 3;
    display: grid; gap: .15rem;
    padding: .7rem .95rem;
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--navy-850) 82%, transparent);
    border: 1px solid var(--hairline-warm);
    backdrop-filter: blur(14px);
    box-shadow: 0 1rem 2.5rem -.75rem rgb(0 0 0 / .7);
    animation: bob 6s ease-in-out infinite;
  }
  .float-chip .k {
    font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-300); font-weight: 600;
  }
  .float-chip .v {
    font-family: var(--font-display); font-size: 1.4rem; color: var(--heading);
    line-height: 1;
  }
  .float-chip .v small { font-size: .65rem; color: var(--text-muted); font-weight: 400; }
  .float-chip .s { font-size: .625rem; color: var(--text-muted); }
  .float-chip.a { inset-block-start: 11%; inset-inline-start: -5rem; }
  .float-chip.b { inset-block-end: 15%; inset-inline-end: -4.25rem; animation-delay: -3s; }
  @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.5rem; } }
  @media (prefers-reduced-motion: reduce) {
    .float-chip, .pill .dot { animation: none; }
  }

  /* ── Cards ────────────────────────────────────────────────────────────── */
  .card {
    padding: 1.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    background: linear-gradient(160deg var(--in-oklab),
      color-mix(in oklab, var(--navy-850) 70%, transparent),
      color-mix(in oklab, var(--navy-950) 80%, transparent));
    transition: border-color .25s, transform .25s var(--ease-out);
  }
  .card:hover { border-color: var(--hairline-warm); transform: translateY(-3px); }
  @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
  .card h3 { font-size: 1.25rem; margin-block-end: .5rem; }
  .card p { font-size: .9375rem; color: var(--text-muted); margin: 0; }

  .icon-badge {
    inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center;
    border-radius: .7rem; margin-block-end: 1rem;
    background: color-mix(in oklab, var(--gold-400) 12%, transparent);
    border: 1px solid var(--hairline-warm);
    color: var(--gold-300);
  }
  .icon-badge.jade {
    background: color-mix(in oklab, var(--jade-400) 12%, transparent);
    border-color: color-mix(in oklab, var(--jade-400) 30%, transparent);
    color: var(--jade-300);
  }
  .icon-badge svg { inline-size: 1.2rem; block-size: 1.2rem; }

  /* ── Checklist ────────────────────────────────────────────────────────── */
  .checks { display: grid; gap: .7rem; padding: 0; margin: 0 0 2rem; list-style: none; }
  .checks li {
    position: relative; padding-inline-start: 1.85rem;
    font-size: .9375rem; color: var(--text);
  }
  .checks li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .22rem;
    inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--jade-400) 45%, transparent);
    background:
      color-mix(in oklab, var(--jade-400) 14%, transparent)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4 7.2 8 3' fill='none' stroke='%235FD8B0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / .62rem no-repeat;
  }
  .checks.gold li::before {
    border-color: var(--hairline-warm);
    background-color: color-mix(in oklab, var(--gold-400) 12%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4 7.2 8 3' fill='none' stroke='%23F1CE8A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* ── Early-access form ────────────────────────────────────────────────── */
  .signup { max-inline-size: 32rem; }
  .signup-row {
    display: flex; gap: .5rem; flex-wrap: wrap;
    padding: .35rem;
    border: 1px solid var(--hairline);
    border-radius: calc(var(--radius-sm) + .35rem);
    background: color-mix(in oklab, var(--navy-850) 60%, transparent);
    backdrop-filter: blur(8px);
    transition: border-color .2s;
  }
  .signup-row:focus-within { border-color: var(--hairline-warm); }
  .signup-row input {
    flex: 1 1 12rem; min-inline-size: 0;
    background: transparent; border: 0; outline: none;
    padding: .7rem .9rem; font-size: .9375rem; color: var(--heading);
  }
  .signup-row input::placeholder { color: color-mix(in oklab, var(--slate-300) 75%, transparent); }
  .signup-row input:user-invalid { color: #FFB4A8; }
  .signup .btn { flex: 0 0 auto; }
  .signup-note { font-size: .75rem; color: var(--text-muted); margin-block-start: .75rem; }
  .signup-msg {
    margin-block-start: .8rem; font-size: .875rem; display: none;
    padding: .7rem .9rem; border-radius: var(--radius-sm);
    border: 1px solid color-mix(in oklab, var(--jade-400) 35%, transparent);
    background: color-mix(in oklab, var(--jade-400) 10%, transparent);
    color: var(--jade-300);
  }
  .signup-msg.error {
    border-color: #C9563F; background: rgb(201 86 63 / .12); color: #FFB4A8;
  }
  .signup[data-state="done"] .signup-msg,
  .signup[data-state="error"] .signup-msg { display: block; }
  .signup[data-state="done"] .signup-row { display: none; }

  /* ── Trust bar ────────────────────────────────────────────────────────── */
  .trust { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.25rem; }
  .trust li { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--text-muted); white-space: nowrap; }
  .trust svg { inline-size: .95rem; block-size: .95rem; color: var(--jade-400); flex: none; }
}

/* ══════════════════════════════════════════════════ NAV ══════════════════ */
@layer components {
  .site-nav {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
    border-block-end: 1px solid transparent;
    transition: background .3s, border-color .3s, backdrop-filter .3s;
  }
  .site-nav.stuck {
    background: color-mix(in oklab, var(--navy-990) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    border-block-end-color: var(--hairline-warm);
  }
  .nav-inner {
    inline-size: var(--shell); margin-inline: auto;
    min-block-size: 4.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
  .brand img { inline-size: 2.75rem; block-size: auto; }
  .brand-name {
    font-family: var(--font-display); font-variation-settings: "opsz" 40;
    font-size: .8125rem; font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; color: var(--cream); line-height: 1.25;
  }
  .brand-name span { display: block; color: var(--gold-400); letter-spacing: .28em; font-size: .6875rem; }

  .nav-links { display: flex; align-items: center; gap: 1.9rem; }
  .nav-links a {
    font-size: .875rem; font-weight: 450; color: var(--text-muted);
    text-decoration: none; transition: color .2s; position: relative;
  }
  .nav-links a::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: -.35rem;
    block-size: 1px; background: var(--gold-400); scale: 0 1;
    transition: scale .25s var(--ease-out); transform-origin: left;
  }
  .nav-links a:hover { color: var(--cream); }
  .nav-links a:hover::after { scale: 1 1; }

  .nav-actions { display: flex; align-items: center; gap: 1rem; }
  .nav-actions .btn {
    min-block-size: 2.375rem;
    padding: .5rem 1.35rem;
    font-size: .75rem; letter-spacing: .1em;
  }

  .nav-toggle {
    display: none; inline-size: 2.75rem; block-size: 2.75rem;
    place-items: center; border-radius: var(--radius-sm);
    border: 1px solid var(--hairline); color: var(--cream);
  }
  .nav-toggle svg { inline-size: 1.15rem; block-size: 1.15rem; }
  .nav-toggle .x { display: none; }
  .nav-toggle[aria-expanded="true"] .x { display: block; }
  .nav-toggle[aria-expanded="true"] .bars { display: none; }

  @media (width < 60rem) {
    .nav-links, .nav-actions .btn { display: none; }
    .nav-toggle { display: grid; }
    .nav-menu {
      position: fixed; inset-block-start: 4.25rem; inset-inline: 0;
      background: color-mix(in oklab, var(--navy-950) 97%, transparent);
      backdrop-filter: blur(20px);
      border-block-end: 1px solid var(--hairline-warm);
      padding: 1.25rem clamp(1.25rem, 5vw, 2rem) 1.75rem;
      display: grid; gap: .35rem;
      box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / .6);
    }
    .nav-menu[hidden] { display: none; }
    .nav-menu a {
      padding: .8rem .25rem; font-size: 1rem; color: var(--text);
      text-decoration: none; border-block-end: 1px solid var(--hairline);
    }
    .nav-menu .btn { margin-block-start: 1rem; border-block-end: 0; }
  }
  @media (width >= 60rem) { .nav-menu { display: none !important; } }
}

/* ═══════════════════════════════════════════════ SECTIONS ════════════════ */
@layer sections {

  /* ── Hero ─────────────────────────────────────────────────────────────── */
  .hero {
    position: relative; isolation: isolate; overflow: clip;
    padding-block: clamp(7rem, 13vw, 10.5rem) clamp(3.5rem, 7vw, 6rem);
    background:
      radial-gradient(60rem 40rem at 72% -10%, color-mix(in oklab, var(--jade-500) 22%, transparent), transparent 60%),
      radial-gradient(45rem 35rem at 5% 95%, color-mix(in oklab, var(--gold-500) 14%, transparent), transparent 62%),
      linear-gradient(168deg var(--in-oklab), #0B2038 0%, #071628 48%, var(--navy-990) 100%);
  }
  .hero::before {                 /* precision grid */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
      linear-gradient(color-mix(in oklab, var(--jade-300) 7%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklab, var(--jade-300) 7%, transparent) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(ellipse 75% 70% at 50% 38%, #000 15%, transparent 72%);
  }
  .hero::after {                  /* slow aurora sweep */
    content: ""; position: absolute; z-index: -1;
    inset-block-start: -30%; inset-inline-start: -20%;
    inline-size: 70%; aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in oklab, var(--gold-400) 10%, transparent), transparent 65%);
    filter: blur(40px);
    animation: drift 26s ease-in-out infinite alternate;
  }
  @keyframes drift {
    from { translate: 0 0; }
    to   { translate: 42% 26%; }
  }
  @media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }

  .hero-grid {
    display: grid; gap: clamp(3rem, 6vw, 5rem);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (width >= 62rem) {
    .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  }
  .hero h1 {
    font-size: clamp(2.5rem, 1.3rem + 5.1vw, 4.5rem);
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
    margin-block: 1.5rem .85rem;
  }
  .hero-hook {
    font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
    font-weight: 500; letter-spacing: .04em;
    color: var(--jade-300);
    margin-block-end: 1.5rem;
  }
  .hero-lede {
    font-size: clamp(1rem, .97rem + .25vw, 1.125rem);
    max-inline-size: 34rem; color: var(--text);
    margin-block-end: 2rem;
  }
  .hero-lede strong { color: var(--heading); font-weight: 600; }
  .hero-media { display: grid; justify-items: center; }
  .hero .phone { --phone-w: clamp(15rem, 30vw, 19.5rem); }
  @media (width < 30rem) { .float-chip.a, .float-chip.b { display: none; } }
  @media (width >= 30rem) and (width < 62rem) {
    .float-chip.a { inset-inline-start: -1.5rem; }
    .float-chip.b { inset-inline-end: -1rem; }
  }

  /* ── Marquee of entity types ──────────────────────────────────────────── */
  .strip {
    border-block: 1px solid var(--hairline);
    background: color-mix(in oklab, var(--navy-950) 70%, transparent);
    padding-block: 1.35rem;
    overflow: hidden;
  }
  .strip-inner {
    display: flex; align-items: center; justify-content: center;
    gap: .85rem clamp(1rem, 2.6vw, 2.25rem); flex-wrap: wrap;
    font-size: clamp(.625rem, .55rem + .18vw, .75rem); letter-spacing: .17em; text-transform: uppercase;
    color: color-mix(in oklab, var(--slate-300) 85%, transparent); font-weight: 600;
    text-align: center;
  }
  .strip-inner span { display: inline-flex; align-items: center; gap: .55rem; }
  .strip-inner span::before {
    content: ""; inline-size: .3rem; block-size: .3rem; rotate: 45deg;
    background: var(--gold-500);
  }

  /* ── Stats ────────────────────────────────────────────────────────────── */
  .stats {
    display: grid; gap: 2.5rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    text-align: center;
  }
  .stat-n {
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
    font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.75rem);
    color: var(--gold-300); line-height: 1;
    margin-block-end: .6rem;
    text-shadow: 0 0 2.5rem color-mix(in oklab, var(--gold-400) 35%, transparent);
  }
  .stat-n sup { font-size: .5em; vertical-align: super; }
  .stat p { font-size: .875rem; color: var(--text-muted); max-inline-size: 12rem; margin-inline: auto; }

  /* ── Steps ────────────────────────────────────────────────────────────── */
  .steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .step { position: relative; container-type: inline-size; }
  .step-n {
    font-family: var(--font-display); font-size: 2.75rem; line-height: 1;
    color: color-mix(in oklab, var(--gold-400) 58%, transparent);
    margin-block-end: .75rem;
  }

  /* ── Feature rows ─────────────────────────────────────────────────────── */
  .feature { position: relative; overflow: clip; background: var(--bg); }
  .feature:nth-of-type(even) {
    background: linear-gradient(150deg var(--in-oklab), #0A1E33 0%, #061426 100%);
    border-block: 1px solid var(--hairline);
  }
  .feature-grid {
    display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
    grid-template-columns: 1fr;
  }
  @media (width >= 60rem) {
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .feature-grid.flip > .feature-copy { order: 2; }
  }
  .feature h2 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.9rem); margin-block-end: 1.25rem; }
  .feature-copy > p { color: var(--text); margin-block-end: 1.75rem; max-inline-size: 34rem; }
  .feature-copy > p strong { color: var(--heading); font-weight: 600; }
  .rule {
    inline-size: 3.5rem; block-size: 3px; border-radius: 2px; margin-block-end: 1.5rem;
    background: linear-gradient(90deg var(--in-oklab), var(--gold-500), var(--gold-300));
  }
  .rule.jade { background: linear-gradient(90deg var(--in-oklab), var(--jade-500), var(--jade-300)); }

  .feature-shots { display: flex; justify-content: center; gap: clamp(.75rem, 2vw, 1.5rem); }
  .feature-shots .phone { --phone-w: clamp(12rem, 22vw, 15.5rem); }
  .feature-shots .phone:nth-child(2) { margin-block-start: 2.5rem; }
  @media (width < 26rem) { .feature-shots .phone:nth-child(2) { display: none; } }

  /* ── App tour carousel ────────────────────────────────────────────────── */
  .tour {
    /* One screen per slide at every width. The stage is narrower than the shell
       so a single phone doesn't float in a sea of empty space on desktop; the
       arrows still get their own columns and never sit on a screenshot. */
    --tour-gap: clamp(1.25rem, 2.5vw, 2.5rem);
    inline-size: min(var(--shell), 50rem); margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "prev  rail  next"
      "meter meter meter"
      "hint  hint  hint";
    align-items: center;
    column-gap: clamp(.85rem, 1.8vw, 1.75rem);
    row-gap: 1.35rem;
  }

  .tour-rail {
    grid-area: rail; min-inline-size: 0;
    display: flex; gap: var(--tour-gap);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block: .5rem 1rem;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .tour-rail::-webkit-scrollbar { display: none; }

  .tour-rail > figure {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0; display: grid; gap: 1.4rem; justify-items: center;
  }
  .tour-rail .phone { --phone-w: min(100%, 20rem); }
  .tour-rail figcaption {
    text-align: center;
    max-inline-size: 30rem;
    /* Reserve the two-line height so the meter below doesn't jump between slides. */
    min-block-size: 5rem;
  }
  .tour-rail figcaption b {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    font-weight: 500; color: var(--heading);
    margin-block-end: .35rem; letter-spacing: -.01em;
  }
  .tour-rail figcaption span {
    font-size: clamp(.9375rem, .9rem + .22vw, 1.0625rem);
    line-height: 1.55; color: var(--text);
  }

  /* ── Arrows ───────────────────────────────────────────────────────────── */
  .tour-nav {
    inline-size: 3.25rem; block-size: 3.25rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--hairline-warm);
    background: color-mix(in oklab, var(--navy-850) 90%, transparent);
    color: var(--gold-300);
    box-shadow: 0 1rem 2.25rem -.75rem rgb(0 0 0 / .75);
    transition: background .2s, color .2s, border-color .2s, scale .2s var(--ease-out), opacity .2s;
  }
  .tour-nav svg { inline-size: 1.4rem; block-size: 1.4rem; }
  .tour-nav.prev { grid-area: prev; }
  /* The forward arrow is the primary affordance — it carries the gold fill. */
  .tour-nav.next {
    grid-area: next;
    inline-size: 3.85rem; block-size: 3.85rem;
    background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-990);
    box-shadow: 0 1rem 2.5rem -.6rem color-mix(in oklab, var(--gold-500) 55%, transparent);
  }
  .tour-nav.next svg { inline-size: 1.6rem; block-size: 1.6rem; }
  .tour-nav:hover:not(:disabled) { scale: 1.07; }
  .tour-nav.prev:hover:not(:disabled) {
    background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-990);
  }
  .tour-nav.next:hover:not(:disabled) { background: var(--gold-300); border-color: var(--gold-300); }
  .tour-nav:disabled { opacity: .28; cursor: default; }
  .tour-nav[hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) { .tour-nav { transition: none; } .tour-nav:hover { scale: 1; } }

  /* ── Progress meter ───────────────────────────────────────────────────── */
  .tour-controls {
    grid-area: meter;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(.9rem, 2.5vw, 1.4rem);
  }
  .tour-track {
    inline-size: min(20rem, 45vw); block-size: 3px;
    background: var(--hairline); border-radius: 2px; overflow: hidden;
  }
  .tour-track i {
    display: block; block-size: 100%; inline-size: 30%; border-radius: 2px;
    background: linear-gradient(90deg var(--in-oklab), var(--gold-500), var(--gold-300));
    transition: inline-size .3s var(--ease-out), translate .3s var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) { .tour-track i { transition: none; } }
  .tour-count {
    font-size: .8125rem; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .tour-count b { color: var(--gold-300); font-weight: 600; }

  .tour-hint {
    grid-area: hint;
    /* Block, not flex: a wrapping line inside a centred flex container still
       renders left-aligned, which showed up as ragged text on phones. */
    display: block; text-align: center;
    font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted);
  }

  /* On phones a single card fills the width and the arrows drop below, so they
     never cover the screenshot. Swiping still works. */
  @media (width < 48rem) {
    .tour {
      --tour-gap: 1.25rem;
      grid-template-areas:
        "rail  rail  rail"
        "prev  meter next"
        "hint  hint  hint";
      column-gap: .85rem;
    }
    .tour-rail     { grid-area: rail; }
    .tour-nav      { inline-size: 3rem; block-size: 3rem; }
    .tour-nav.next { inline-size: 3.4rem; block-size: 3.4rem; }
    .tour-track    { inline-size: min(12rem, 36vw); }
  }

  /* ── Security ─────────────────────────────────────────────────────────── */
  .secure-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

  /* ── FAQ ──────────────────────────────────────────────────────────────── */
  .faq { display: grid; gap: .75rem; }
  .faq details {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: color-mix(in oklab, var(--navy-900) 65%, transparent);
    transition: border-color .25s;
  }
  .faq details[open] { border-color: var(--hairline-warm); }
  .faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.35rem; list-style: none;
    font-weight: 550; font-size: 1rem; color: var(--heading);
  }
  .faq summary::after {
    content: ""; flex: none; inline-size: .7rem; block-size: .7rem;
    border-inline-end: 2px solid var(--gold-400);
    border-block-end: 2px solid var(--gold-400);
    rotate: 45deg; translate: 0 -.15rem;
    transition: rotate .25s var(--ease-out);
  }
  .faq details[open] summary::after { rotate: -135deg; translate: 0 .1rem; }
  .faq .answer { padding: 0 1.35rem 1.35rem; color: var(--text-muted); font-size: .9375rem; }
  .faq .answer p + p { margin-block-start: .75rem; }

  /* ── Final CTA ────────────────────────────────────────────────────────── */
  .cta {
    position: relative; isolation: isolate; overflow: clip; text-align: center;
    background:
      radial-gradient(40rem 28rem at 50% 45%, color-mix(in oklab, var(--jade-500) 20%, transparent), transparent 65%),
      radial-gradient(30rem 20rem at 85% 10%, color-mix(in oklab, var(--gold-500) 14%, transparent), transparent 60%),
      var(--navy-990);
  }
  .cta h2 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); margin-block: 1.5rem 1.1rem; }
  .cta p { max-inline-size: 38rem; margin-inline: auto; color: var(--text); }
  .cta .signup { margin-inline: auto; margin-block-start: 2.25rem; }
  .cta .signup-row { justify-content: center; }

  /* ── Footer ───────────────────────────────────────────────────────────── */
  .site-footer {
    background: #020810;
    border-block-start: 1px solid var(--hairline);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
    font-size: .875rem;
  }
  .footer-grid {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
    padding-block-end: 2.5rem;
    border-block-end: 1px solid var(--hairline);
  }
  @media (width >= 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .footer-grid h4 {
    font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold-400); font-weight: 600; margin-block-end: 1rem;
    font-family: var(--font-body);
  }
  .footer-grid ul { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }
  .footer-grid li { color: var(--text-muted); }
  .footer-grid a { color: var(--text-muted); text-decoration: none; transition: color .2s; }
  .footer-grid a:hover { color: var(--cream); text-decoration: underline; }
  .footer-blurb { color: var(--text-muted); max-inline-size: 26rem; margin-block-start: 1rem; font-size: .875rem; }
  .footer-bottom {
    padding-block-start: 2rem;
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    color: color-mix(in oklab, var(--slate-300) 85%, transparent); font-size: .75rem;
  }
  .disclaimer {
    margin-block-start: 1.5rem; padding: 1.1rem 1.25rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--navy-900) 55%, transparent);
    font-size: .75rem; line-height: 1.6;
    color: color-mix(in oklab, var(--slate-300) 82%, transparent);
  }

  /* ── Legal pages ──────────────────────────────────────────────────────── */
  .legal-hero {
    padding-block: clamp(7.5rem, 12vw, 10rem) clamp(2.5rem, 5vw, 4rem);
    background:
      radial-gradient(45rem 28rem at 30% -20%, color-mix(in oklab, var(--jade-500) 18%, transparent), transparent 62%),
      linear-gradient(170deg var(--in-oklab), #0A1E33 0%, var(--navy-990) 100%);
    border-block-end: 1px solid var(--hairline);
  }
  .legal-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.4rem); margin-block: 1.25rem .9rem; }
  .legal-meta { color: var(--text-muted); font-size: .875rem; }
  .legal-layout {
    display: grid; gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    padding-block: clamp(3rem, 6vw, 4.5rem);
  }
  @media (width >= 64rem) { .legal-layout { grid-template-columns: 16rem minmax(0, 1fr); } }

  .toc { font-size: .875rem; }
  @media (width >= 64rem) {
    .toc { position: sticky; inset-block-start: 6rem; align-self: start; max-block-size: calc(100dvh - 8rem); overflow-y: auto; }
  }
  .toc h2 {
    font-family: var(--font-body); font-size: .6875rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--gold-400); margin-block-end: 1rem;
  }
  .toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; counter-reset: toc; }
  .toc a {
    display: block; padding: .45rem .75rem; border-radius: var(--radius-sm);
    color: var(--text-muted); text-decoration: none; line-height: 1.4;
    border-inline-start: 2px solid transparent; transition: color .2s, background .2s, border-color .2s;
  }
  .toc a:hover { color: var(--cream); background: color-mix(in oklab, var(--navy-850) 60%, transparent); }
  .toc a[aria-current="true"] {
    color: var(--gold-300); border-inline-start-color: var(--gold-400);
    background: color-mix(in oklab, var(--gold-400) 8%, transparent);
  }

  .prose { max-inline-size: 44rem; }
  .prose > section { scroll-margin-block-start: 6rem; padding-block-end: 2.5rem; }
  .prose h2 {
    font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
    margin-block-end: 1rem; padding-block-end: .75rem;
    border-block-end: 1px solid var(--hairline);
  }
  .prose h3 {
    font-family: var(--font-body); font-size: 1rem; font-weight: 600;
    color: var(--gold-300); margin-block: 1.75rem .6rem; letter-spacing: 0;
  }
  .prose p { margin-block-end: 1rem; color: var(--text); }
  .prose ul { display: grid; gap: .55rem; margin-block: 0 1.25rem; padding-inline-start: 0; list-style: none; }
  .prose ul li {
    position: relative; padding-inline-start: 1.1rem;
    color: var(--text-muted); font-size: .9375rem;
  }
  .prose ul li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .6rem;
    inline-size: .3rem; block-size: .3rem; rotate: 45deg; background: var(--gold-500);
  }
  .prose a { color: var(--gold-300); }
  .prose strong { color: var(--heading); font-weight: 600; }
  .callout {
    padding: 1.25rem 1.4rem; border-radius: var(--radius);
    border: 1px solid var(--hairline-warm);
    border-inline-start: 3px solid var(--gold-400);
    background: color-mix(in oklab, var(--gold-400) 6%, transparent);
    margin-block: 1.5rem;
  }
  .callout p:last-child { margin-block-end: 0; }
  .callout strong { color: var(--gold-200); }
  .disclaimer strong, .link-gold { color: var(--gold-300); }
  .prose .next-doc { margin-block-start: 2rem; }
}

/* ═══════════════════════════════════════════════ UTILITIES ═══════════════ */
@layer utilities {
  .sr-only {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .center { text-align: center; }
  .center .label, .label.centered { justify-content: center; }
  .lede-lg {
    font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
    color: var(--text-muted); max-inline-size: 42rem;
    margin-block-start: 1.1rem;
  }
  .center .lede-lg { margin-inline: auto; }
  .mt-xl { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
  .h-section { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
  .h-section.sm { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem); }
  .mb-lg { margin-block-end: clamp(2rem, 4vw, 3.25rem); }
  /* .defer is a no-op hook kept for future render-tuning; content-visibility is
     deliberately NOT used here so full-page screenshots and print stay correct. */
  .defer { contain: layout style; }

  /* Scroll reveal — MOVEMENT ONLY, never opacity.
     Text parked at opacity:0 is unreadable in every frame before the observer
     fires, and invisible for good if it never fires (a preview pane that never
     scrolls, a screenshot, a thumbnail, JS blocked). Translating instead keeps
     every word legible at full contrast at all times, and still reads as a
     reveal on scroll. */
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal { translate: 0 1.1rem; transition: translate .65s var(--ease-out); }
    .js .reveal.in { translate: 0 0; }
    .js .reveal[data-d="1"] { transition-delay: .07s; }
    .js .reveal[data-d="2"] { transition-delay: .14s; }
    .js .reveal[data-d="3"] { transition-delay: .21s; }
  }
}

/* ════════════════════════════════════════════ HOST-PROOF PAINT ═══════════
   Deliberately UNLAYERED, and last in the file.

   Unlayered author styles beat everything inside @layer, so when this page is
   embedded somewhere that injects its own reset — a preview pane, a CMS shell,
   an email/AMP wrapper — these declarations still win. Without them the host's
   reset takes the body ground and the inherited text colour, and any section
   that doesn't paint its own background renders dark text on a light ground.
   Keep these four rules out of the layer stack.
   ===================================================================== */
:root { color-scheme: dark; }
html { background: #030B16; }
body {
  background: #030B16;
  color: #C5D5E6;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 350;
  margin: 0;
}

/* ═══════════════════════════════════════════════════ PRINT ═══════════════ */
@media print {
  .site-nav, .nav-menu, .skip-link, .toc, .site-footer .footer-grid,
  .tour-rail, .tour-nav, .tour-controls, .tour-hint, .phone-stage, .signup, .hero-media { display: none !important; }
  body { background: #fff; color: #111; font-size: 11pt; }
  h1, h2, h3 { color: #0B1F3A; }
  .legal-hero { background: none; border: 0; padding-block: 0 1.5rem; }
  .legal-layout { display: block; padding-block: 0; }
  .prose { max-inline-size: none; }
  .prose > section { page-break-inside: avoid; padding-block-end: 1.25rem; }
  .prose p, .prose ul li { color: #222; }
  .prose h3 { color: #7A5B12; }
  .callout { border: 1px solid #999; background: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .prose a[href^="#"]::after { content: ""; }
}