/* Fonts, self-hosted (OFL, the latin subsets Google Fonts serves): one origin, preloaded, no third-party CSS. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Hannah: landing.
   Structure: dense and product-led (nav with a CTA, product-in-use hero, a "runs on" strip,
   a sticky index beside data-backed sections, a providers section, a plain install command,
   a measured requirements block). Everything shown is a real capture or a measured number.

   Palette: neon, kept minimal:
     void   #0a0912  near-black pulled a step toward violet; the page ground
     panel  #121020  one step up, for the providers band, code and the footer
     fog    white at 6% / 12% / 22% for surfaces and hairlines
     text   #eceef3 / #b1b5c2 / #7d8290
     neon   #b48cff  electric lilac, the ONE accent. It glows only where it points at something
                     (the CTA, the live bar, the free VRAM, the command box); running text never
                     glows, it has to stay readable (7.6:1 on the void).
   Light: two soft radial halos of the accent (behind the hero, behind the closing band) and a
   glow on the hero frame, ambient light on a dark room, not glass. No gradient fills, no
   second hue. The dark captures sit on the void with a hairline, so the app and the page read
   as one surface.
   Type: Fraunces for headings, Inter for everything else. */

:root {
  --void: #0a0912;
  --panel: #121020;
  --fog-1: rgba(255, 255, 255, 0.06);
  --fog-2: rgba(255, 255, 255, 0.12);
  --fog-3: rgba(255, 255, 255, 0.22);
  --text: #eceef3;
  --text-2: #b1b5c2;
  --text-3: #7d8290;
  --neon: #b48cff;
  --neon-bright: #cbb0ff;
  --neon-rgb: 180, 140, 255;
  --neon-dim: rgba(var(--neon-rgb), 0.16);
  /* layered: a tight core, a soft spill, a wide wash, reads as a light source, not a blur */
  --neon-glow: 0 0 6px rgba(var(--neon-rgb), 0.55), 0 0 22px rgba(var(--neon-rgb), 0.32), 0 0 56px rgba(var(--neon-rgb), 0.14);
  --neon-glow-hover: 0 0 8px rgba(var(--neon-rgb), 0.7), 0 0 30px rgba(var(--neon-rgb), 0.45), 0 0 80px rgba(var(--neon-rgb), 0.2);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
  --r: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--neon); color: var(--void); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--fog-1); padding: 1px 5px; border-radius: 4px; color: var(--text); }
pre code { background: none; padding: 0; font-size: 13.5px; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; text-wrap: balance; }
h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; margin-bottom: 14px; }
h3 { font-size: 20px; line-height: 1.25; margin-bottom: 12px; }
p { max-width: 64ch; }
.sub { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-3); margin-bottom: 10px; }
.src { font-size: 13.5px; color: var(--text-3); margin-top: 14px; }

/* ── buttons & links ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: 14.5px; text-decoration: none;
  border: 1px solid var(--neon); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-dark { background: var(--neon); color: var(--void); box-shadow: var(--neon-glow); }
.btn-dark:hover { background: var(--neon-bright); box-shadow: var(--neon-glow-hover); }
.btn-lg { padding: 13px 22px; font-size: 16px; }
.link-arrow { font-weight: 500; text-decoration: none; color: var(--text-2); }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--neon); }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(10, 9, 18, 0.88); backdrop-filter: blur(6px); border-bottom: 1px solid var(--fog-2); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 60px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 24px; width: auto; }
.nav-links { display: flex; gap: 22px; margin-right: auto; }
.nav-links a { font-size: 14.5px; color: var(--text-2); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

/* ── light ───────────────────────────────────────────────────────────────── */
/* A soft lamp behind the hero and another behind the closing band. Pure radial washes of the
   accent at low alpha on the void, they light the room, they don't sit on top of anything. */
.hero, .cta-band { position: relative; isolation: isolate; }
.hero::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 72% 45%, rgba(var(--neon-rgb), 0.20), transparent 70%),
    radial-gradient(ellipse 40% 50% at 18% 30%, rgba(var(--neon-rgb), 0.09), transparent 70%);
}
.cta-band::before {
  background: radial-gradient(ellipse 50% 80% at 50% 60%, rgba(var(--neon-rgb), 0.16), transparent 70%);
}
/* the hero band bleeds past the wrap, so the halo is not clipped by the 1120px column */
.hero::before { inset: -40px -20vw -40px -20vw; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px; align-items: center;
  padding-top: 72px; padding-bottom: 56px;
}
.hero h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.05; margin-bottom: 18px; }
.lede { font-size: clamp(16px, 1.25vw, 18px); color: var(--text-2); max-width: 46ch; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.hero-fine { margin-top: 18px; font-size: 13px; color: var(--text-3); }
.hero-shot { margin: 0; }
.hero-shot img { border-radius: 12px; border: 1px solid var(--fog-3); }
/* the frame is lit from behind: a tinted hairline and a wide, faint spill onto the void */
.hero-shot img, .hero-shot video {
  border-color: rgba(var(--neon-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.08), 0 0 48px rgba(var(--neon-rgb), 0.22), 0 24px 80px rgba(0, 0, 0, 0.55);
}

/* ── strip ───────────────────────────────────────────────────────────────── */
.strip { border-top: 1px solid var(--fog-2); border-bottom: 1px solid var(--fog-2); padding: 22px 0; }
.strip-label { text-align: center; font-size: 12.5px; color: var(--text-3); margin: 0 auto 12px; }
.strip-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.strip-list li { font-family: var(--serif); font-size: 17px; color: var(--text-2); }

/* ── capabilities: sticky index + sections ───────────────────────────────── */
.caps { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding-top: 72px; padding-bottom: 24px; }
.caps-index { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; }
.caps-index a { padding: 9px 0; border-top: 1px solid var(--fog-2); font-size: 14px; color: var(--text-3); text-decoration: none; }
.caps-index a:last-child { border-bottom: 1px solid var(--fog-2); }
.caps-index a:hover, .caps-index a.is-active { color: var(--text); }
.caps-index a.is-active { border-top-color: var(--neon); }
.cap { padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--fog-2); scroll-margin-top: 84px; }
.cap:last-child { border-bottom: 0; margin-bottom: 0; }
.cap > p { color: var(--text-2); }

/* data bars (latency) */
.datagrid { margin-top: 26px; display: grid; gap: 10px; max-width: 640px; }
.datarow { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: 14px; font-size: 14px; }
.dl { color: var(--text-2); }
.bar { height: 10px; background: var(--fog-1); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); background: var(--text-2); border-radius: 2px; }
.datarow:first-child .bar i { background: var(--neon); box-shadow: var(--neon-glow); }
.dv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* facts (definition lists) */
.facts { margin-top: 22px; display: grid; gap: 10px; }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 14px; font-size: 14.5px; }
.facts dt { color: var(--text-3); }
.facts dd { color: var(--text-2); }
.facts dt code { background: none; padding: 0; color: var(--text); }
.facts-row { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: none; }
.facts-row div { grid-template-columns: 1fr; gap: 4px; }

/* captures */
.shots-2 { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: end; }
.shots-2 figure, .wide-shot, .widget-shot, .settings-shot { margin: 0; }
.shots-2 img, .wide-shot img, .widget-shot img, .settings-shot img { border-radius: var(--r); border: 1px solid var(--fog-3); }
figcaption { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.wide-shot { margin-top: 26px; max-width: 760px; }
.desktop-row { margin-top: 26px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }
.widget-shot img { width: 240px; border-radius: 12px; }

/* tiles (desktops, providers) */
.grid-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-tiles li {
  padding: 11px 14px; border: 1px solid var(--fog-2); border-radius: var(--r);
  font-size: 14px; font-weight: 500; background: var(--fog-1);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.grid-tiles li { transition: border-color 0.15s, box-shadow 0.15s; }
.grid-tiles li:hover { border-color: rgba(var(--neon-rgb), 0.45); box-shadow: 0 0 18px rgba(var(--neon-rgb), 0.12); }
.grid-tiles li span { font-size: 11.5px; font-weight: 600; color: var(--neon); }

/* two columns + transcript */
.two-col { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.transcript { border-left: 2px solid var(--fog-3); padding-left: 18px; font-size: 14.5px; color: var(--text-2); }
.transcript p { margin: 0 0 10px; max-width: none; display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.transcript p:last-child { margin: 0; }
.who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.who.her { color: var(--neon); }

/* checks */
.checks { list-style: none; display: grid; gap: 14px; max-width: 70ch; }
.checks li { padding-left: 22px; position: relative; color: var(--text-2); font-size: 15px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.7); }
.checks strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

/* ── setup (providers) ───────────────────────────────────────────────────── */
.setup { background: var(--panel); border-top: 1px solid var(--fog-2); border-bottom: 1px solid var(--fog-2); padding: 72px 0; }
.setup-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) 400px; gap: 56px; align-items: start; }
.setup-copy p { color: var(--text-2); margin-bottom: 22px; }
.setup .grid-tiles li { background: var(--void); }
.settings-shot { position: relative; max-height: 560px; overflow: hidden; border-radius: var(--r); }
.settings-shot img { width: 100%; }
.settings-shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(18, 16, 32, 0), var(--panel)); }

/* ── install ─────────────────────────────────────────────────────────────── */
.install { padding: 80px 0; }
.install-inner { max-width: 820px; margin: 0 auto; }
.install h2 { font-size: clamp(32px, 3.6vw, 44px); }
.install .lede { margin-bottom: 26px; max-width: 62ch; }
.cmd {
  display: flex; align-items: stretch;
  background: #000; color: var(--text);
  border: 1px solid rgba(var(--neon-rgb), 0.4); border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.06), 0 0 32px rgba(var(--neon-rgb), 0.16);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.cmd:hover, .cmd:focus-within { border-color: rgba(var(--neon-rgb), 0.7); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.1), 0 0 44px rgba(var(--neon-rgb), 0.28); }
.cmd-prompt { padding: 16px 0 16px 18px; font-family: var(--mono); color: var(--neon); }
.cmd code { flex: 1; padding: 16px 14px; background: none; color: inherit; font-size: 14px; white-space: nowrap; overflow-x: auto; border-radius: 0; }
.copy {
  padding: 0 18px; border: 0; border-left: 1px solid var(--fog-2);
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.copy:hover { background: var(--fog-1); color: var(--text); }
.copy.done { color: var(--neon); }
.install .facts { margin-top: 28px; }
.source { margin-top: 28px; }
.source summary { cursor: pointer; font-weight: 500; color: var(--text-2); }
.source summary:hover { color: var(--text); }
.source pre { margin-top: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--fog-2); border-radius: var(--r); overflow-x: auto; line-height: 1.6; }

/* ── requirements: measured VRAM + table ─────────────────────────────────── */
.reqs { padding-top: 72px; padding-bottom: 88px; border-top: 1px solid var(--fog-2); }
.reqs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; margin-top: 8px; }
.stack { display: flex; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid var(--fog-3); background: var(--fog-1); }
.seg { width: var(--w); background: #e2e5ec; color: var(--void); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; white-space: nowrap; overflow: hidden; border-right: 1px solid var(--void); }
.seg:nth-child(2) { background: #b4b8c4; }
.seg:nth-child(3) { background: #8a8e9c; }
.seg:nth-child(4) { background: #666a78; }
.seg:nth-child(5) { background: #4a4e5a; }
.seg-free { background: var(--neon-dim); color: var(--neon); border-right: 0; box-shadow: inset 0 0 18px rgba(var(--neon-rgb), 0.22); }
.vram-total { margin-top: 12px; font-size: 14px; color: var(--text-2); }
.req { width: 100%; border-collapse: collapse; }
.req th, .req td { padding: 12px 0; border-top: 1px solid var(--fog-2); text-align: left; vertical-align: top; font-size: 14.5px; }
.req tr:last-child th, .req tr:last-child td { border-bottom: 1px solid var(--fog-2); }
.req th { width: 92px; color: var(--text-3); font-weight: 500; }
.req td { color: var(--text-2); }

/* VRAM legend: the narrow segments can't hold a label, so the labels live here.
   Swatch colors come from the .seg scale above via data-seg. */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: #e2e5ec; }
.legend li:nth-child(2) i { background: #b4b8c4; }
.legend li:nth-child(3) i { background: #8a8e9c; }
.legend li:nth-child(4) i { background: #666a78; }
.legend li:nth-child(5) i { background: #4a4e5a; }
.legend i.free { background: var(--neon-dim); border: 1px solid var(--neon); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer { background: var(--panel); color: var(--text); border-top: 1px solid var(--fog-2); padding: 56px 0 28px; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand { margin-bottom: 10px; }
.footer-brand img { display: block; height: 28px; width: auto; }
.footer-tag { margin-top: 6px; font-size: 14px; color: var(--text-3); }
.footer-tag a { color: var(--text-2); text-decoration: none; }
.footer-tag a:hover { color: var(--neon-bright); }
.footer-cols { display: flex; gap: 56px; }
.footer-cols div { display: flex; flex-direction: column; gap: 8px; }
.footer-h { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.footer-cols a { font-size: 14px; color: var(--text-2); text-decoration: none; }
.footer-cols a:hover { color: var(--neon); }
.footer-fine { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--fog-2); font-size: 13px; color: var(--text-3); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .caps { grid-template-columns: 1fr; gap: 24px; }
  .caps-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .caps-index a { border: 0 !important; padding: 4px 0; }
  .setup-inner { grid-template-columns: 1fr; }
  .settings-shot { max-width: 380px; }
  .reqs-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .shots-2, .two-col, .desktop-row { grid-template-columns: 1fr; }
  .widget-shot img { width: 200px; }
  .grid-tiles { grid-template-columns: repeat(2, 1fr); }
  .facts-row { grid-template-columns: 1fr; }
  .datarow { grid-template-columns: 120px 1fr 56px; }
  .footer-cols { gap: 32px; }
}

/* ── v3: the Jarvis structure. New blocks only; tokens and everything above unchanged. ── */

/* text-style button (the "Watch 30 s" secondary CTA) */
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; cursor: pointer; }
.hero-shot video { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(var(--neon-rgb), 0.35); background: var(--panel); }

/* pillars band */
.pillars-band { border-top: 1px solid var(--fog-2); border-bottom: 1px solid var(--fog-2); padding: 56px 0; }
.pillars-title { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 28px; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pillar h3 { color: var(--neon); font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.pillar p { color: var(--text-2); font-size: 15.5px; }
.pillar-num { margin-top: 12px; font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pillar-num span { color: var(--text); font-weight: 600; }

/* what you can say */
.says { padding-top: 72px; padding-bottom: 24px; }
.says .lede { margin-bottom: 26px; }
.says-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.says .transcript { border-left-color: var(--fog-2); }
.transcript .note { display: block; grid-template-columns: none; margin-top: 8px; font-size: 13px; color: var(--text-3); }
.says .src { margin-top: 26px; }

/* "how she decides" details inside Hands */
.how { margin-top: 22px; }
.how summary { cursor: pointer; font-weight: 500; color: var(--text-2); }
.how summary:hover { color: var(--text); }
.how .facts { margin-top: 12px; }
.how .facts div { grid-template-columns: 120px 1fr; }

/* fit: two tiers + measured VRAM */
.fit { background: var(--panel); border-top: 1px solid var(--fog-2); border-bottom: 1px solid var(--fog-2); padding: 72px 0; }
.fit .lede { margin-bottom: 28px; max-width: 70ch; }
.tiers { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.tier-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tier-table th, .tier-table td { padding: 11px 12px 11px 0; border-top: 1px solid var(--fog-2); text-align: left; vertical-align: top; }
.tier-table thead th { border-top: 0; padding-top: 0; color: var(--text); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.tier-table thead th:nth-child(3) { color: var(--neon); }
.tier-table tbody th { width: 110px; color: var(--text-3); font-weight: 500; }
.tier-table td { color: var(--text-2); }
.tier-table tr:last-child th, .tier-table tr:last-child td { border-bottom: 1px solid var(--fog-2); }
.fit .stack { background: var(--void); }
.fit .seg { border-right-color: var(--panel); }
.fit .src { margin-top: 18px; }

/* after install steps */
.after { margin: 22px 0 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; color: var(--text-2); }
.after li::marker { color: var(--neon); font-weight: 600; }

/* from the maker */
.letter { padding-top: 80px; padding-bottom: 24px; }
.letter-body { max-width: 66ch; display: grid; gap: 14px; }
.letter-body p { font-size: 16.5px; color: var(--text-2); }
.letter-sign { font-family: var(--serif); color: var(--text) !important; margin-top: 4px; }
.letter-links { margin-top: 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.btn-ghost { background: transparent; color: var(--neon); }
.btn-ghost:hover { background: var(--neon-dim); box-shadow: 0 0 22px rgba(var(--neon-rgb), 0.25); }

/* faq */
.faq { padding: 72px 0 24px; }
.faq-inner { max-width: 820px; margin: 0 auto; }
.faq-list { display: grid; gap: 0; margin-top: 8px; }
.faq-list div { padding: 18px 0; border-top: 1px solid var(--fog-2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px; }
.faq-list div:last-child { border-bottom: 1px solid var(--fog-2); }
.faq-list dt { font-weight: 600; color: var(--text); font-size: 15.5px; }
.faq-list dd { color: var(--text-2); font-size: 15px; }

/* closing band */
.cta-band { padding: 88px 0; border-top: 1px solid var(--fog-2); }
.cta-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.cta-inner h2 { font-size: clamp(32px, 3.6vw, 44px); margin-bottom: 22px; }
.cta-inner .lede { margin: 0 auto 22px; }
.cta-inner .hero-fine { margin-top: 16px; }

@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr; gap: 26px; }
  .says-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; gap: 36px; }
  .faq-list div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 680px) {
  .tier-table { font-size: 13.5px; }
  .tier-table tbody th { width: 84px; }
}


/* OS switcher above the install command: picked by platform on load (main.js) */
.os-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.os-tab {
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-3);
  background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.os-tab:hover { color: var(--text); }
.os-tab.is-active { color: var(--neon); border-color: rgba(var(--neon-rgb), 0.45); background: var(--neon-dim); }
.os-note { margin-top: 10px; font-size: 13.5px; color: var(--text-3); }

/* OS icons in the tabs (inline SVG, monochrome, currentColor) */
.os-tab { display: inline-flex; align-items: center; gap: 7px; }
.os-ico { width: 14px; height: 14px; fill: currentColor; flex: none; }
.os-ico-cut { fill: var(--void); }
.os-tab.is-active .os-ico-cut { fill: #1a1330; }

/* ── company pages (/about/, /brand/) ────────────────────────────────────── */
.hero-solo { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
.hero-solo .hero-copy { max-width: 760px; }
.hero-solo h1 { font-size: clamp(34px, 4vw, 50px); }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.founders { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 760px; }
.founders div { border-top: 1px solid var(--fog-2); padding-top: 14px; }
.founders dt { font-family: var(--serif); font-size: 22px; color: var(--text); margin-bottom: 6px; }
.founders dd { font-size: 15px; color: var(--text-2); }
.work { padding-top: 56px; padding-bottom: 72px; }
.work .letter-body a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--neon-rgb), 0.5); text-underline-offset: 3px; }
.work .letter-body a:hover { text-decoration-color: var(--neon); }
.work strong { color: var(--text); font-weight: 600; }
@media (max-width: 680px) { .founders { grid-template-columns: 1fr; } }

/* brand kit (/brand/) */
.kit { padding-top: 56px; }
.kit h2 { margin-bottom: 14px; }
.kit-note { color: var(--text-2); max-width: 70ch; margin-bottom: 22px; }
.kit-note a, .hero-solo .lede a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--neon-rgb), 0.5); text-underline-offset: 3px; }
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.logo-tile { margin: 0; border-radius: 12px; border: 1px solid var(--fog-2); padding: 40px 36px 16px; display: grid; gap: 22px; justify-items: center; }
.logo-tile img { width: min(100%, 420px); height: auto; aspect-ratio: 11828 / 1590; }
.logo-tile.on-void { background: var(--void); }
.logo-tile.on-white { background: #ffffff; color: #0a0912; }
.logo-tile.on-neon { background: var(--neon); color: #0a0912; }
.logo-tile figcaption { font-size: 13px; color: var(--text-3); justify-self: stretch; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 20px; }
.logo-tile.on-white figcaption { color: #4b4e5b; }
.logo-tile.on-neon figcaption { color: #2b1a55; }
.logo-tile .dl-links a { color: inherit; font-weight: 600; text-decoration: none; margin-left: 10px; }
.logo-tile .dl-links a:hover { text-decoration: underline; }
.logo-tile.marks { grid-template-columns: repeat(3, auto); justify-content: center; gap: 28px; align-items: center; }
.logo-tile.marks img { width: 72px; height: 72px; aspect-ratio: 1; }
.logo-tile.marks .on-white-chip { background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
.logo-tile.marks figcaption { grid-column: 1 / -1; }
.kit-rules { margin-top: 26px; }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.swatch { border: 1px solid var(--fog-2); border-radius: 12px; padding: 12px; display: grid; gap: 4px; font-size: 13.5px; }
.swatch .chip { display: block; height: 64px; border-radius: 8px; background: var(--c); border: 1px solid var(--fog-2); margin-bottom: 6px; }
.swatch strong { color: var(--text); }
.swatch code { background: none; padding: 0; color: var(--text-2); }
.swatch small { color: var(--text-3); }
.type-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.type-card { border: 1px solid var(--fog-2); border-radius: 12px; padding: 24px; }
.type-card p { color: var(--text-2); font-size: 14.5px; }
.type-card .type-sample { font-size: 44px; color: var(--text); margin-bottom: 10px; line-height: 1.1; }
.type-sample.serif { font-family: var(--serif); font-weight: 500; }
.type-sample.sans { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }
.naming div { grid-template-columns: 130px 1fr; }
.naming dt { color: var(--text); font-weight: 600; }
.shots-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shots-grid a { display: grid; gap: 8px; text-decoration: none; color: var(--text-3); font-size: 13px; }
.shots-grid img { width: 100%; height: 200px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--fog-2); background: var(--panel); }
.shots-grid a:hover img { border-color: rgba(var(--neon-rgb), 0.5); }
@media (max-width: 960px) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .logo-grid, .type-row, .shots-grid { grid-template-columns: 1fr; } .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .naming div { grid-template-columns: 1fr; } }