:root {
    --ink: #0b1d33;
    --ink-2: #122a47;
    --emerald: #047857;
    --emerald-deep: #065f46;
    --emerald-bright: #35d18a;
    --data-blue: #2e90fa;
    --amber: #f2a516;
    --risk: #e5484d;

    --bg: #dce2e0; /* founder 2026-07-17: grey ground so the white tiles pop */
    --bg-panel: #ffffff;
    --bg-inset: #eef4f2;
    --text: #12263d;
    --text-dim: #4e6379;
    --text-faint: #55616d;
    --line: rgba(18, 38, 61, 0.13);
    --line-strong: rgba(18, 38, 61, 0.26);
    --nav-bg: rgba(220, 226, 224, 0.88);
    --hero-bg: #0b1d33;
    --hero-text: #f2f7f5;
    --hero-dim: #9db2c4;
    --good: #065f46;

    --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

    --r-btn: 8px;
    --r-card: 12px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #081524;
      --bg-panel: #0e2035;
      --bg-inset: #122a47;
      --text: #e8f0ec;
      --text-dim: #a7bccb;
      --text-faint: #829fb8;
      --line: rgba(232, 240, 236, 0.13);
      --line-strong: rgba(232, 240, 236, 0.28);
      --nav-bg: rgba(8, 21, 36, 0.88);
      --good: #35d18a;
    }
  }
  :root[data-theme="light"] {
    --bg: #dce2e0; --bg-panel: #ffffff; --bg-inset: #eef4f2;
    --text: #12263d; --text-dim: #4e6379; --text-faint: #55616d;
    --line: rgba(18, 38, 61, 0.13); --line-strong: rgba(18, 38, 61, 0.26);
    --nav-bg: rgba(220, 226, 224, 0.88); --good: #065f46;
  }
  :root[data-theme="dark"] {
    --bg: #081524; --bg-panel: #0e2035; --bg-inset: #122a47;
    --text: #e8f0ec; --text-dim: #a7bccb; --text-faint: #829fb8;
    --line: rgba(232, 240, 236, 0.13); --line-strong: rgba(232, 240, 236, 0.28);
    --nav-bg: rgba(8, 21, 36, 0.88); --good: #35d18a;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

  /* ---------------- nav ---------------- */
  nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
  .brand svg circle, .brand svg line { stroke: var(--emerald); }
  .brand .name { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
  .brand .name span { color: var(--emerald-deep); }
  :root[data-theme="dark"] .brand .name span { color: var(--emerald-bright); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .name span { color: var(--emerald-bright); } }
  .nav-links { display: flex; gap: 24px; margin-left: 12px; }
  .nav-links a { color: var(--text-dim); text-decoration: none; font-size: 14.5px; font-weight: 600; }
  .nav-links a:hover { color: var(--text); }
  .nav-cta { margin-left: auto; display: flex; gap: 12px; align-items: center; }
  .nav-cta .login { color: var(--text-dim); text-decoration: none; font-size: 14.5px; font-weight: 600; }
  @media (max-width: 820px) { .nav-links { display: none; } }

  /* ---------------- buttons ---------------- */
  .btn {
    font-family: var(--font-body); font-weight: 700; font-size: 15px;
    border-radius: var(--r-btn); padding: 12px 22px; cursor: pointer;
    border: 1px solid transparent; text-decoration: none; display: inline-block;
    transition: transform 160ms ease-out, box-shadow 160ms ease-out, background 160ms ease-out;
  }
  .btn:focus-visible { outline: 2px solid var(--data-blue); outline-offset: 2px; }
  .btn-sm { padding: 9px 16px; font-size: 14px; }
  .btn-primary { background: var(--emerald); color: #fff; }
  .btn-primary:hover { background: var(--emerald-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(18, 183, 106, 0.35); }
  .btn-ghost-dark { background: transparent; color: var(--hero-text); border-color: rgba(242, 247, 245, 0.35); }
  .btn-ghost-dark:hover { border-color: var(--emerald-bright); color: var(--emerald-bright); }

  /* ---------------- hero ---------------- */
  .hero {
    background:
      repeating-radial-gradient(circle at 72% 44%, transparent 0 79px, rgba(157, 178, 196, 0.05) 79px 80px),
      radial-gradient(1100px 480px at 80% -10%, rgba(46, 144, 250, 0.15), transparent 60%),
      radial-gradient(900px 420px at 8% 115%, rgba(18, 183, 106, 0.13), transparent 60%),
      var(--hero-bg);
    color: var(--hero-text);
    padding: 84px 0 96px;
    position: relative;
    overflow: hidden;
  }
  /* Main Street photo, darkened: sits behind the existing glow gradients
     (which paint via .hero's own background, i.e. behind these pseudo-
     elements) and behind the content, so the lens-glow signature survives
     untouched on top. ::before = photo, ::after = navy scrim for text
     contrast — same --ink tone as the rest of the dark chrome, not black. */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/images/marketing/main-street-wallace.jpg") center 40% / cover no-repeat;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(175deg, rgba(8, 20, 35, 0.68) 0%, rgba(8, 20, 35, 0.88) 60%, rgba(8, 20, 35, 0.95) 100%);
  }
  .hero-grid { position: relative; z-index: 2; }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: center; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
  .kicker {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--emerald-bright);
  }
  .hero h1 {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05;
    letter-spacing: -0.02em; margin: 14px 0 18px; text-wrap: balance;
  }
  .hero h1 em { font-style: normal; color: var(--emerald-bright); }
  .hero .sub { color: var(--hero-dim); font-size: 18px; max-width: 46ch; margin: 0 0 30px; }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .hero .fine { margin-top: 14px; font-size: 13px; color: var(--hero-dim); }

  .focus-stage { position: relative; }
  .layer-blur { display: block; filter: blur(7px); opacity: 0.75; }
  .layer-sharp { display: block; position: absolute; inset: 0; clip-path: circle(0px at -100px -100px); }
  .focus-stage.resolved .layer-blur { filter: blur(0); opacity: 0; transition: filter 500ms ease-out, opacity 500ms ease-out; }
  .focus-stage.resolved .layer-sharp { clip-path: none; }
  .lens-ring { position: absolute; pointer-events: none; opacity: 0; z-index: 3; transform-origin: center center; }
  .lens-ring circle, .lens-ring line { stroke: var(--emerald-bright); }
  .brand-reticle { transition: opacity 400ms ease-out; }

  /* Real Scope logo, theme-adaptive: dark-ink wordmark on light grounds, the
     light-ink version on dark grounds. Used in the footer and on /about. */
  .brand-logo { display: block; height: 30px; width: auto; }
  .brand-logo.on-dark { display: none; }
  :root[data-theme="dark"] .brand-logo.on-light { display: none; }
  :root[data-theme="dark"] .brand-logo.on-dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo.on-light { display: none; }
    :root:not([data-theme="light"]) .brand-logo.on-dark { display: block; }
  }

  /* The nav logo is the hero animation's fly-to target — fade it in smoothly
     when the lens lands and app.js reveals it. */
  #brandReticle { transition: opacity 350ms ease; }

  /* --------- "From the blog" teaser cards --------- */
  .blog-teaser {
    display: grid; gap: 18px; margin-top: 34px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .blog-teaser-card {
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--line); border-radius: var(--r-card);
    background: var(--bg-panel); padding: 22px;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease;
  }
  .blog-teaser-card:hover { border-color: var(--emerald-deep); transform: translateY(-2px); }
  .blog-teaser-card .kicker {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--emerald-bright);
  }
  .blog-teaser-card h3 {
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
    font-size: 19px; line-height: 1.3; margin: 0; color: var(--text);
  }
  .blog-teaser-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
  .blog-teaser-all { margin: 26px 0 0; }
  .blog-teaser-all a {
    color: var(--emerald-bright); text-decoration: none; font-weight: 600;
  }
  .blog-teaser-all a:hover { text-decoration: underline; }

  /* --------- the live-analysis deal card --------- */
  .deal-card {
    background: rgba(14, 32, 53, 0.94);
    border: 1px solid rgba(157, 178, 196, 0.28);
    border-radius: var(--r-card);
    padding: 22px 22px 20px;
    box-shadow: 0 30px 70px rgba(4, 12, 22, 0.5);
  }
  .deal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .deal-co { font-weight: 700; font-size: 16px; color: #f2f7f5; }
  .deal-loc { font-size: 12.5px; color: #9db2c4; }
  .status-line {
    margin: 12px 0 6px; min-height: 20px;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--emerald-bright);
  }
  .status-line .cursor { display: inline-block; width: 7px; height: 13px; background: var(--emerald-bright); margin-left: 3px; vertical-align: -2px; animation: blink 900ms steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  .a-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 0; border-bottom: 1px dashed rgba(157, 178, 196, 0.22);
    font-size: 14px;
    opacity: 0; transform: translateY(6px);
    transition: opacity 380ms ease-out, transform 380ms ease-out;
  }
  .a-row.show { opacity: 1; transform: none; }
  .a-row .k { color: #9db2c4; }
  .a-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: #e8f0ec; }
  .a-row .v.good { color: var(--emerald-bright); }

  .risk-chip {
    margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
    background: rgba(242, 165, 22, 0.14); color: #f6bd4d;
    border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700;
    opacity: 0; transform: translateY(6px);
    transition: opacity 380ms ease-out, transform 380ms ease-out;
  }
  .risk-chip.show { opacity: 1; transform: none; }

  .score-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(157, 178, 196, 0.25); }
  .score-left { display: flex; align-items: center; gap: 14px; }
  .dial circle.track { stroke: rgba(157, 178, 196, 0.25); }
  .dial circle.fill { stroke: var(--emerald-bright); stroke-linecap: round; transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .score-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; color: var(--emerald-bright); line-height: 1; }
  .score-lbl { font-size: 12px; color: #9db2c4; }
  .verdict {
    font-size: 12px; font-weight: 700; color: var(--emerald-bright);
    background: rgba(18, 183, 106, 0.16); border-radius: 999px; padding: 5px 12px;
    opacity: 0; transform: translateY(6px);
    transition: opacity 380ms ease-out, transform 380ms ease-out;
  }
  .verdict.show { opacity: 1; transform: none; }
  .replay-mini {
    margin-top: 14px; background: none; border: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 11.5px; color: #829fb8; padding: 0;
  }
  .replay-mini:hover { color: #9db2c4; }

  /* --------- hero brand lockup: big wordmark over the slogan --------- */
  .hero-lockup {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 11px; margin-bottom: 8px;
  }
  .hero-wordmark { display: block; height: 54px; width: auto; }
  .hero-lockup .kicker { text-align: center; }
  @media (max-width: 640px) { .hero-wordmark { height: 44px; } }

  /* --------- the interactive deal card additions --------- */
  .engine-tag {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--emerald-bright);
    border: 1px solid rgba(53, 209, 138, 0.34); border-radius: 999px;
    padding: 4px 9px; white-space: nowrap; align-self: flex-start;
  }
  .a-row .v.warn { color: #f6bd4d; }
  .per-yr { font-size: 11px; color: #829fb8; font-weight: 400; }
  .deal-controls {
    margin-top: 14px; padding-top: 13px;
    border-top: 1px solid rgba(157, 178, 196, 0.25);
    display: grid; gap: 12px;
  }
  .deal-controls .ctrl label {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
    text-transform: uppercase; color: #829fb8; margin-bottom: 5px;
  }
  .deal-controls .ctrl output { color: var(--emerald-bright); font-weight: 600; }
  .deal-controls input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
    border-radius: 999px; background: rgba(157, 178, 196, 0.25);
    cursor: pointer; margin: 2px 0; display: block;
  }
  .deal-controls input[type="range"]:focus-visible { outline: 2px solid var(--data-blue); outline-offset: 4px; }
  .deal-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--emerald-bright); border: 2px solid var(--ink);
    box-shadow: 0 0 0 1px rgba(53, 209, 138, 0.5);
  }
  .deal-controls input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--emerald-bright); border: 2px solid var(--ink);
  }
  .drive-hint {
    margin: 0; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.04em; color: #829fb8;
  }
  .drive-hint b { color: var(--emerald-bright); font-weight: 600; }
  .sr-live {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* --------- founder pass 2026-07-17: hero contents ~15% smaller ---------
     The wordmark stays big (54px) — everything around it steps back so the
     brand leads. Later-in-file at equal specificity: these win. */
  .hero { padding: 72px 0 82px; }
  .hero-grid { gap: 44px; }
  .hero h1 { font-size: clamp(31px, 4.6vw, 51px); }
  .hero .sub { font-size: 15.5px; max-width: 46ch; }
  .kicker { font-size: 10px; }
  .hero .btn { font-size: 13px; padding: 10px 19px; }
  .hero .fine { font-size: 11px; }
  .deal-card { padding: 19px 19px 17px; }
  .deal-co { font-size: 14px; }
  .deal-loc { font-size: 11px; }
  .status-line { font-size: 11px; }
  .a-row { font-size: 12px; padding: 8px 0; }
  .risk-chip { font-size: 11px; padding: 5px 10px; }
  .dial { width: 54px; height: 54px; }
  .score-n { font-size: 26px; }
  .score-lbl { font-size: 10.5px; }
  .verdict { font-size: 10.5px; }
  .engine-tag { font-size: 8.5px; }
  .deal-controls .ctrl label { font-size: 9px; }
  .drive-hint { font-size: 9px; }
  .per-yr { font-size: 10px; }
  .replay-mini { font-size: 10px; }

  /* ---------------- shared section styles ---------------- */
  section { padding: 88px 0; }
  section + section { border-top: 1px solid var(--line); }
  .eyebrow {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--emerald-deep);
  }
  :root[data-theme="dark"] .eyebrow { color: var(--emerald-bright); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color: var(--emerald-bright); } }
  h2 {
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
    font-size: clamp(28px, 3.8vw, 40px); line-height: 1.12; margin: 8px 0 12px; text-wrap: balance;
  }
  .lede { color: var(--text-dim); max-width: 60ch; margin: 0; font-size: 17px; }

  /* Reveals resolve *into focus* — a slight blur clears as each block
     enters. The whole page pulls sharp the way the hero lens does:
     "clarity creates confidence," made literal. */
  .reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 550ms ease-out, transform 550ms ease-out, filter 550ms ease-out; }
  .reveal.in { opacity: 1; transform: none; filter: blur(0); }

  /* ---------------- stats strip over Main Street ---------------- */
  .stats {
    padding: 58px 0 0; border-top: none !important;
    position: relative; overflow: hidden;
  }
  .street {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 230px; display: block;
    color: var(--text); pointer-events: none;
  }
  .stats-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px;
    border: 1px solid var(--line); border-radius: var(--r-card);
    background: var(--bg-panel);
    padding: 26px 30px;
    margin-bottom: 120px;
  }
  .stat .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 26px; color: var(--text); }
  .stat .d { font-size: 13.5px; color: var(--text-dim); margin-top: 2px; }

  /* ---------------- manifesto ---------------- */
  .manifesto { max-width: 720px; }
  .manifesto p { font-size: 18px; color: var(--text-dim); margin: 18px 0 0; }
  .manifesto strong { color: var(--text); }

  /* ---------------- workflow ---------------- */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 40px; }
  .step {
    background: var(--bg-panel);
    border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 20px 18px;
    position: relative; overflow: hidden;
  }
  .step > :not(.card-art) { position: relative; z-index: 1; }

  /* Ghosted mini-UI etched into each card: a faint snapshot of the exact
     thing the card is about, drawn in the current text color so it works
     on both themes. */
  .card-art {
    position: absolute; right: -6px; bottom: -8px;
    width: 46%; max-width: 150px; height: auto;
    color: var(--text); opacity: 0.11; pointer-events: none;
  }
  :root[data-theme="dark"] .card-art { opacity: 0.16; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-art { opacity: 0.16; } }
  .card-art text { font-family: var(--font-mono); }
  .step .num {
    font-family: var(--font-mono); font-size: 12px; color: var(--emerald-deep);
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%;
  }
  :root[data-theme="dark"] .step .num { color: var(--emerald-bright); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step .num { color: var(--emerald-bright); } }
  .step h3 { font-family: var(--font-display); font-size: 16.5px; margin: 12px 0 6px; letter-spacing: -0.01em; }
  .step p { margin: 0; font-size: 14px; color: var(--text-dim); }

  /* ---------------- features ---------------- */
  .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 40px; }
  .feature {
    background: var(--bg-panel);
    border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 22px 22px 20px;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
    position: relative; overflow: hidden;
  }
  .feature > :not(.card-art) { position: relative; z-index: 1; }
  .feature:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(11, 29, 51, 0.12); }
  .feature .tickmark { width: 26px; height: 26px; }
  .feature .tickmark circle { stroke: var(--emerald-deep); }
  .feature .tickmark circle.center { fill: var(--emerald-deep); stroke: none; }
  :root[data-theme="dark"] .feature .tickmark circle { stroke: var(--emerald-bright); }
  :root[data-theme="dark"] .feature .tickmark circle.center { fill: var(--emerald-bright); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .feature .tickmark circle { stroke: var(--emerald-bright); }
    :root:not([data-theme="light"]) .feature .tickmark circle.center { fill: var(--emerald-bright); }
  }
  .feature h3 { font-family: var(--font-display); font-size: 17px; margin: 12px 0 6px; letter-spacing: -0.01em; }
  .feature p { margin: 0; font-size: 14px; color: var(--text-dim); }

  /* ---------------- dashboard preview ---------------- */
  .preview-frame {
    margin-top: 42px; border: 1px solid var(--line-strong); border-radius: 14px;
    overflow: hidden; box-shadow: 0 28px 64px rgba(11, 29, 51, 0.2);
  }
  .preview-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-inset); padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
  .url { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
  .preview-body { background: #0e2035; padding: 26px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
  @media (max-width: 800px) { .preview-body { grid-template-columns: 1fr; } }
  .pv-panel { background: rgba(11, 29, 51, 0.75); border: 1px solid rgba(157, 178, 196, 0.2); border-radius: 10px; padding: 18px; }
  .pv-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #829fb8; margin-bottom: 14px; }
  .pv-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(157, 178, 196, 0.18); font-size: 13.5px; }
  .pv-row:last-child { border-bottom: none; }
  .pv-row .k { color: #9db2c4; }
  .pv-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: #e8f0ec; font-weight: 600; }
  .pv-row .v.good { color: var(--emerald-bright); }
  .pv-row .v.warn { color: #f6bd4d; }
  .bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 8px; }
  .bar { flex: 1; background: var(--data-blue); opacity: 0.85; border-radius: 3px 3px 0 0; }
  .bar.this-year { background: var(--emerald-bright); }
  .bars-lbl { display: flex; gap: 10px; margin-top: 8px; }
  .bars-lbl span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 10.5px; color: #829fb8; }

  /* ---------------- industries ---------------- */
  .tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
  .tile {
    border: 1px solid var(--line); background: var(--bg-panel);
    border-radius: 999px; padding: 9px 18px; font-size: 14.5px; font-weight: 600; color: var(--text-dim);
  }
  /* Tiles are labels, not links — no hover affordance until the industry
   teaser pages exist (see IMPROVEMENT_BACKLOG). */

  /* ---------------- pricing ---------------- */
  .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 42px; align-items: stretch; }
  .plan {
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 28px 26px; display: flex; flex-direction: column;
  }
  .plan.hot { border-color: var(--emerald); box-shadow: 0 14px 40px rgba(18, 183, 106, 0.16); position: relative; }
  .plan.hot .flag {
    position: absolute; top: -12px; left: 24px;
    background: var(--emerald); color: #fff; font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px;
  }
  .plan h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 4px; }
  .plan .for { font-size: 13.5px; color: var(--text-faint); margin-bottom: 16px; }
  .plan .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 700; }
  .plan .per { font-size: 13px; color: var(--text-faint); }
  .plan ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 9px; flex: 1; }
  .plan li { font-size: 14px; color: var(--text-dim); display: flex; gap: 9px; }
  .plan li::before { content: "•"; color: var(--emerald-deep); font-weight: 800; }
  :root[data-theme="dark"] .plan li::before { color: var(--emerald-bright); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan li::before { color: var(--emerald-bright); } }
  .pricing-note { margin-top: 18px; font-size: 12.5px; color: var(--text-faint); }

  /* ---------------- final CTA ---------------- */
  /* ---------------- trust strip (Stage 9 B3) ---------------- */
  .trust { padding: 64px 0 8px; }
  .trust .eyebrow { display: block; margin-bottom: 18px; }
  .trust-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  .trust-item {
    background: var(--bg-panel); border: 1px solid var(--line);
    border-radius: var(--r-card); padding: 18px 20px;
  }
  .trust-k {
    font-weight: 700; color: var(--text); font-size: 15.5px;
    margin-bottom: 6px;
  }
  .trust-d { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0; }
  .trust-d a { color: var(--emerald-deep); text-decoration: none; font-weight: 600; }
  .trust-d a:hover { text-decoration: underline; }
  :root[data-theme="dark"] .trust-d a { color: var(--emerald-bright); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .trust-d a { color: var(--emerald-bright); } }

  .final {
    background: var(--hero-bg);
    color: var(--hero-text);
    text-align: center; padding: 96px 0; border-top: none !important;
    position: relative; overflow: hidden;
  }
  /* Workshop photo, darkened — same pattern as .hero. The signature emerald
     glow moves into ::after (on top of the scrim) so it survives visually. */
  .final::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/images/marketing/repair-shop.jpg") center / cover no-repeat;
  }
  .final::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      radial-gradient(900px 400px at 50% -20%, rgba(18, 183, 106, 0.22), transparent 60%),
      linear-gradient(rgba(8, 20, 35, 0.82), rgba(8, 20, 35, 0.92));
  }
  .final .wrap { position: relative; z-index: 2; }
  .final h2 { font-size: clamp(30px, 4.4vw, 48px); }
  .final p { color: var(--hero-dim); font-size: 17px; margin: 0 0 30px; }

  footer { padding: 44px 0 56px; border-top: 1px solid var(--line); }
  .foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
  .foot .cols { display: flex; gap: 48px; flex-wrap: wrap; }
  .foot h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; }
  .foot a { display: block; color: var(--text-dim); text-decoration: none; font-size: 14px; padding: 3px 0; }
  .foot a:hover { color: var(--text); }
  .foot .tag { color: var(--text-faint); font-size: 13px; margin-top: 10px; }

  @media (prefers-reduced-motion: reduce) {
    .layer-blur { filter: none; opacity: 0; }
    .layer-sharp { clip-path: none; }
    .lens-ring { display: none; }
    .reveal { opacity: 1; transform: none; filter: none; }
    .reticle-cur { display: none !important; }
    .a-row, .risk-chip, .verdict { opacity: 1 !important; transform: none !important; transition: none; }
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
  }

/* ---------------- waitlist form ---------------- */
.waitlist-form {
  display: flex; gap: 10px; flex-wrap: wrap; max-width: 440px;
}
.waitlist-form input {
  flex: 1; min-width: 200px;
  border-radius: var(--r-btn);
  border: 1px solid rgba(242, 247, 245, 0.35);
  background: rgba(8, 21, 36, 0.55);
  color: var(--hero-text);
  padding: 12px 14px; font-size: 15px; font-family: var(--font-body);
}
.waitlist-form input::placeholder { color: var(--hero-dim); }
.waitlist-form input:focus { outline: none; border-color: var(--emerald-bright); }
.waitlist-form-center { margin: 0 auto; justify-content: center; }
.form-note { min-height: 20px; margin: 8px 0 0; font-size: 13.5px; color: var(--emerald-bright); }
.form-note.error { color: #f6bd4d; }
.final .form-note { text-align: center; }

/* ---------------- mobile menu ---------------- */
.menu-btn {
  display: none;
  background: none; border: none; cursor: pointer; padding: 8px;
  flex-direction: column; gap: 4.5px;
}
.menu-btn span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 160ms ease-out, opacity 160ms ease-out;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  padding: 10px 32px 16px;
}
.mobile-menu a {
  display: block; padding: 11px 0;
  color: var(--text-dim); text-decoration: none;
  font-size: 15.5px; font-weight: 600;
  border-bottom: 1px dashed var(--line);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.strong { color: var(--emerald-deep); }
:root[data-theme="dark"] .mobile-menu a.strong { color: var(--emerald-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mobile-menu a.strong { color: var(--emerald-bright); } }

@media (max-width: 820px) {
  .menu-btn { display: flex; }
  .mobile-menu:not([hidden]) { display: block; }
}

/* On small screens the mobile menu carries the CTA — drop the cramped nav
   button and keep "Log in" on one line. */
.nav-cta .login { white-space: nowrap; }
@media (max-width: 820px) {
  .nav-cta .btn { display: none; }
}

/* ============================================================
   Motion layer (2026-07-16) — carries the hero's optics language
   down the page: cursor-spotlight cards, magnetic-shimmer CTAs,
   and a trailing reticle cursor. All additive and reduced-motion-
   safe (the global reduced-motion block above disables every
   transition/animation here), no new dependencies. app.js drives
   the pointer bits and is gated on pointer + motion capability.
   ============================================================ */

/* -- trailing reticle cursor: the brand crosshair follows the
   pointer. Created + toggled by app.js (body.cur-on) so it never
   appears for touch or reduced-motion. Native cursor is untouched. */
.reticle-cur {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; pointer-events: none; z-index: 60;
  opacity: 0; transition: opacity 300ms ease; will-change: transform;
}
.reticle-cur svg { display: block; overflow: visible; }
.reticle-cur circle, .reticle-cur line { stroke: var(--emerald); }
.reticle-cur .dot { fill: var(--emerald); stroke: none; }
body.cur-on .reticle-cur { opacity: 0.5; }
/* brighter over the dark hero / final bands */
body.cur-invert .reticle-cur circle,
body.cur-invert .reticle-cur line { stroke: var(--emerald-bright); }
body.cur-invert .reticle-cur .dot { fill: var(--emerald-bright); }

/* -- cursor spotlight on the card grids: a soft emerald glow tracks
   the pointer and the border warms. Features + steps only (both
   already clip overflow); plans get lift+glow without the radial so
   the "Most popular" flag isn't clipped. */
.feature, .step { --mx: 50%; --my: 50%; }
.feature::after, .step::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity 350ms ease;
  background: radial-gradient(300px circle at var(--mx) var(--my),
    rgba(18, 183, 106, 0.16), transparent 60%);
}
.feature:hover::after, .step:hover::after { opacity: 1; }
.feature {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}
.step {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11, 29, 51, 0.12);
}
.feature:hover, .step:hover {
  border-color: color-mix(in srgb, var(--emerald) 55%, var(--line));
}

/* -- pricing cards: lift + emerald border-glow on hover -- */
.plan {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}
.plan:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--emerald) 45%, var(--line));
  box-shadow: 0 14px 34px rgba(18, 183, 106, 0.14);
}
.plan.hot:hover { box-shadow: 0 18px 44px rgba(18, 183, 106, 0.22); }

/* -- primary CTA shimmer: one light sweep on hover -- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
    rgba(255, 255, 255, 0.35) 50%, transparent 62%);
  transform: translateX(-130%);
}
.btn-primary:hover::after { animation: btnSheen 850ms ease; }
@keyframes btnSheen { to { transform: translateX(130%); } }

/* -- count-up numerals keep the tabular, mono treatment -- */
.stat .n .cu { font-variant-numeric: tabular-nums; }

/* -- mobile hero fit (founder 2026-07-17): the long nowrap engine tag was
   forcing the deal card wider than the phone viewport, clipping its right
   border. Let the tag wrap, let the card shrink, and pull the page gutters
   in so the card sits fully on screen. -- */
.deal-card { max-width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .deal-head { flex-wrap: wrap; }
  .engine-tag { white-space: normal; line-height: 1.5; text-align: left; }
}