/* neuro-viral static-page design system: the landing, for pages that are not the React app.
   Used by the blog (frontend/public/blog), /analyses (ops/build_analyses_page.py), the box-served
   /s/<uid> breakdowns (server.py _SHARE_HTML) and box-rendered blog posts (product/blog_engine.py).
   Nav + footer markup comes from product/site_chrome.py; keep both in step with the landing:
     tokens / type / grain ........ frontend/src/index.css
     .nv-gbtn ..................... components/GlassButton.tsx (glassColor #fff primary, rgba(14,16,24,.5) dark)
     .nv-mbtn ..................... components/Metal.tsx MetalButton (metal ring added by /assets/metal-embed.js)
     .nv-card ..................... PricingSection .nv-pc-card
     .nv-nav ...................... LandingApp nav      .nv-foot ... landing/SiteFooter.tsx
   Bump SITE_CSS_VERSION in product/site_chrome.py when this file changes. */

:root {
  --bg: #07080c;
  --surface: #12121c;
  --surface-2: #191926;
  --text: #f2f1f7;
  --text-muted: #a9a7bd;
  --text-dim: #807e96;
  --prose: #c9c7d9;
  --line: rgba(255,255,255,0.06);
  --line-strong: rgba(255,255,255,0.10);
  --violet: #8f6dff;            /* accent only: borders, glows, markers. Never text. */
  --font-display: 'Clash Display', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --grain-opacity: 0.045;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* landing film grain (index.css body::after) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* soft top-of-page atmosphere, monochrome like the landing's mesh */
.nv-atmos { position: relative; isolation: isolate; }
.nv-atmos::before {
  content: ""; position: absolute; inset: -64px 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 60% at 50% 0%, rgba(255,255,255,0.07), transparent 70%),
    radial-gradient(40% 50% at 50% 12%, rgba(143,109,255,0.07), transparent 70%);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0; }
p { margin: 0; }
a { color: inherit; }
img, svg, video, iframe { max-width: 100%; }
::selection { background: rgba(255,255,255,0.18); color: var(--text); }
:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; border-radius: 4px; }
.nv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* metal-fx paints its glow canvases ~30px past the button; never let that widen a phone's page */
main { overflow-x: clip; }

.nv-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.nv-wrap--narrow { max-width: 760px; }

/* ── Nav (LandingApp) ─────────────────────────────────────────────────────── */
.nv-nav {
  position: sticky; top: 0; z-index: 100; height: 64px;
  display: flex; align-items: center; padding: 0 clamp(16px, 4vw, 32px);
  background: rgba(8,8,12,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nv-nav-brand { flex: 1; min-width: 0; display: flex; align-items: center; }
.nv-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #f4f4f6;
  font: 700 18px/1 var(--font-text); letter-spacing: -0.02em; white-space: nowrap; }
.nv-brand svg { flex-shrink: 0; display: block; }
.nv-pill {
  flex: none; display: flex; align-items: center; gap: 4px; margin: 0 16px; padding: 8px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nv-pill a { padding: 6px 16px; border-radius: 999px; font: 500 14px/20px var(--font-text);
  color: rgba(255,255,255,0.7); text-decoration: none; transition: background-color .15s, color .15s; }
.nv-pill a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.nv-pill a[aria-current="page"] { background: rgba(255,255,255,0.15); color: #fff; }
.nv-nav-actions { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.nv-nav-actions * { white-space: nowrap; }
@media (max-width: 959px) { .nv-pill { display: none; } }

/* ── Glass buttons (GlassButton.tsx) ──────────────────────────────────────── */
.nv-gbtn {
  --glass: rgba(255,255,255,0.06);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border: none; border-radius: 999px; cursor: pointer;
  font: 600 14px/20px var(--font-text); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  color: rgba(231,233,243,0.95); background-color: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) url("#nv-glass") saturate(130%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.2), 0 4px 14px rgba(0,0,0,0.28),
    inset 2px 2px 0.5px -2px rgba(255,255,255,0.5), inset -2px -2px 0.5px -2px rgba(255,255,255,0.16),
    inset 1px 1px 1px -0.5px rgba(255,255,255,0.35), inset -1px -1px 1px -0.5px rgba(255,255,255,0.12),
    inset 0 0 4px 2px rgba(255,255,255,0.06);
  transition: transform .3s ease, filter .3s ease;
}
.nv-gbtn:hover { transform: scale(1.02); filter: brightness(1.1); }
.nv-gbtn:active { transform: scale(0.98); }
.nv-gbtn:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; border-radius: 999px; }
/* neon top edge (hover) and bottom edge (always faint) */
.nv-gbtn::before, .nv-gbtn::after {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent); transition: opacity .5s;
}
.nv-gbtn::before { top: 0; opacity: 0; }
.nv-gbtn::after { bottom: 0; opacity: 0.3; }
.nv-gbtn:hover::before { opacity: 1; }
.nv-gbtn:hover::after { opacity: 0.7; }
.nv-gbtn--sm { padding: 10px 16px; }
.nv-gbtn--lg { padding: 10px 32px; font-size: 16px; line-height: 24px; }
.nv-gbtn--white { --glass: #ffffff; color: #0b0b0f; }
.nv-gbtn--dark { --glass: rgba(14,16,24,0.5); }

/* ── Metal button (Metal.tsx MetalButton; the ring is painted by metal-embed.js) ── */
.nv-mbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 14px 26px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #1b1c26, #0d0e15); color: #f2f1f7;
  font: 600 15px/1 var(--font-text); letter-spacing: -0.005em;
  border: 1px solid rgba(255,255,255,0.22);          /* plain-state rim; metal-fx normalises it away */
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: filter .2s ease;
}
.nv-mbtn:hover { filter: brightness(1.12); }
.nv-mbtn:focus-visible { outline: 2px solid #f4f4f6; outline-offset: 3px; }
.nv-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.nv-ctas--start { justify-content: flex-start; }

/* ── Metal text hooks ─────────────────────────────────────────────────────── */
/* Plain text paints first in the same metrics the metal copy will use (spacing reset, one line). */
[data-metal-text] { display: inline-block; letter-spacing: normal; word-spacing: normal; white-space: nowrap; max-width: 100%; }
.nv-label { font: 700 13px/1.2 var(--font-mono); color: #ece7ff; text-transform: uppercase; }
.nv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(143,109,255,0.32); background: rgba(143,109,255,0.07);
}
.nv-kw { color: #e6e6ea; }

/* ── Hero / title block ───────────────────────────────────────────────────── */
.nv-hero { text-align: center; padding: 72px 0 40px; }
.nv-hero .nv-eyebrow { margin-bottom: 22px; }
.nv-h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--text); margin: 0 auto 18px; max-width: 980px; text-wrap: balance;
}
.nv-lede { color: var(--text-muted); font-size: clamp(15px, 2.2vw, 19px); line-height: 1.55; max-width: 620px; margin: 0 auto 30px; text-wrap: pretty; }
.nv-h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; text-wrap: balance; }
.nv-muted { color: var(--text-muted); }
.nv-note { color: var(--text-dim); font-size: 13px; line-height: 1.6; }

/* ── Cards (PricingSection .nv-pc-card) ───────────────────────────────────── */
.nv-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: rgba(18,18,28,0.92); border: 1px solid rgba(255,255,255,0.09); border-radius: 24px;
  padding: 26px 26px 24px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); color: var(--text); text-decoration: none;
  transition: transform .28s var(--ease-snap), border-color .28s var(--ease-snap), box-shadow .28s var(--ease-snap);
}
.nv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); pointer-events: none; }
a.nv-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.2);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 60px rgba(196,172,255,0.07); }
.nv-card-tag { font: 700 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.nv-card h2, .nv-card h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; margin: 12px 0 10px; text-wrap: balance; }
.nv-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.nv-card-go { margin-top: auto; padding-top: 16px; display: block; font: 600 14px/1.35 var(--font-text); color: #f2f1f7; }
.nv-card-go::after { content: "\2192"; display: inline-block; margin-left: 7px; transition: transform .2s var(--ease-snap); }
a.nv-card:hover .nv-card-go::after { transform: translateX(3px); }
.nv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1000px) { .nv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .nv-grid { grid-template-columns: 1fr; } }

/* stats / figures */
.nv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 640px; margin: 0 auto; }
.nv-stat { background: rgba(18,18,28,0.92); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px;
  padding: 16px 14px; text-align: center; min-width: 0; position: relative; overflow: hidden; }
.nv-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); }
.nv-stat .v { font: 700 30px/1 var(--font-text); letter-spacing: -0.03em; color: #f2f1f7; font-variant-numeric: tabular-nums lining-nums; }
.nv-stat .k { font: 700 10.5px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8b90a8; margin-top: 8px; }

/* closing CTA panel */
.nv-cta-card { text-align: center; padding: 48px 28px; margin: 56px 0 8px; align-items: center; }
.nv-card.nv-cta-card .nv-h2, .nv-post article .nv-cta-card .nv-h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; }
.nv-cta-card > .nv-ctas { align-self: stretch; }
.nv-cta-card p { color: var(--text-muted); max-width: 540px; margin: 0 auto 26px; font-size: 16px; line-height: 1.55; }
.nv-cta-card p a { color: #f2f1f7; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 3px; }

/* inline text links (never purple) */
.nv-link { color: #f2f1f7; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.nv-link:hover { text-decoration-color: #f2f1f7; }

/* ── Footer (landing/SiteFooter.tsx, verbatim) ────────────────────────────── */
.nv-foot{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(7,8,12,0),#07080c 40%);margin-top:40px}
.nv-foot-in{max-width:1100px;margin:0 auto;padding:64px 24px 28px}
.nv-foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.nv-foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#f2f1f7;font:700 16px/1 'Space Grotesk',sans-serif;text-decoration:none}
.nv-foot-blurb{font-size:14px;line-height:1.6;color:#8b90a8;margin:0 0 18px;max-width:34ch}
.nv-foot-mail{font:600 13px/1 'Space Mono',monospace;color:#d9d8e4;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:3px}
.nv-foot-mail:hover{border-color:#c4acff}
.nv-foot h2{font:600 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#6d6b82;margin:4px 0 16px}
.nv-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nv-foot li a{font-size:14px;color:#a9a7bd;text-decoration:none;transition:color .15s}
.nv-foot li a:hover{color:#f2f1f7}
.nv-foot-bar{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:12.5px;line-height:1.6;color:#6d6b82}
.nv-foot-bar p{margin:0}
.nv-foot-bar strong{font-weight:600;color:#a9a7bd}
.nv-foot-social{display:flex;gap:10px;margin-top:16px}
.nv-foot-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.1);color:#a9a7bd;transition:color .15s,border-color .15s,background .15s}
.nv-foot-social a:hover{color:#f2f1f7;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.nv-foot-social a:focus-visible{outline:2px solid #c4acff;outline-offset:2px}
@media (max-width:860px){.nv-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.nv-foot-lead{grid-column:1 / -1}}
@media (max-width:640px){
  .nv-foot-in{padding:44px 16px 48px}
  .nv-foot-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .nv-foot li a{display:inline-flex;align-items:center;min-height:44px}
  .nv-foot ul{gap:0}
  .nv-foot .nv-foot-social a{width:44px;height:44px}
  .nv-foot a.nv-foot-mail{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0}
  .nv-foot a.nv-foot-brand{min-height:44px;margin-bottom:6px}
  .nv-foot-bar{margin-top:36px;flex-direction:column}
}

/* ── Phones (390 / 360): no sideways scroll, 44px targets ─────────────────── */
@media (max-width: 768px) {
  .nv-wrap { padding: 0 16px; }
  .nv-nav { padding: 0 12px; }
  .nv-nav a { min-height: 44px; }
  .nv-nav-actions { gap: 6px; }
  .nv-hero { padding: 44px 0 28px; }
  .nv-h1 { font-size: clamp(30px, 8.6vw, 38px); margin-bottom: 14px; }
  .nv-lede { font-size: 15px; margin-bottom: 22px; }
  .nv-ctas { flex-direction: column; align-items: stretch; }
  .nv-ctas > * { width: 100%; }
  .nv-ctas .nv-gbtn, .nv-ctas .nv-mbtn { width: 100%; min-height: 48px; }
  .nv-card { padding: 22px 18px 20px; border-radius: 20px; }
  .nv-cta-card { padding: 34px 18px; margin-top: 40px; }
  .nv-stats { gap: 10px; }
  .nv-stat { padding: 12px 8px; }
  .nv-stat .v { font-size: 24px; }
}
@media (max-width: 520px) {
  .nv-brand { font-size: 16px; gap: 7px; }
  .nv-brand svg { width: 26px; height: 26px; }
  .nv-nav-actions .nv-gbtn--dark { padding: 10px 8px; background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nv-nav-actions .nv-gbtn--dark::before, .nv-nav-actions .nv-gbtn--dark::after { display: none; }
  .nv-nav-actions .nv-gbtn--white { padding: 10px 14px; }
  .nv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-stat:nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .nv-nav-actions { gap: 4px; }
  .nv-nav-actions .nv-gbtn--dark { padding: 10px 6px; }
  .nv-nav-actions .nv-gbtn--white { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { display: none; }
  .nv-gbtn, .nv-card, .nv-mbtn { transition: none; }
  .nv-gbtn:hover, .nv-gbtn:active, a.nv-card:hover { transform: none; }
}