/* NoGuru design system.
 * Tokens are FIXED by assets/brand/BRAND.md — do not hardcode a hex
 * anywhere below this block; every color a component uses must resolve
 * through a custom property.
 *
 * DARK ONLY (operator decision 2026-07-31). The light theme was removed,
 * not merely disabled: the academy chart PNGs are rendered by
 * academy-content/charts.py with a baked #0B0D12 facecolor and there is no
 * light variant, so a light page showed near-black rectangles on a #F3F5F7
 * ground. Supporting light properly means shipping and syncing a second set
 * of every chart forever. Dark is also what BRAND.md leads with.
 *
 * If light is ever revived, the chart pipeline must ship paired artifacts
 * FIRST — re-adding a media query alone silently reintroduces the mismatch.
 */
:root {
  --ground: #0B0D12;
  --surface: #12151C;
  --sunken: #080A0E;
  --line: #1E232D;
  --ink: #E8EBF0;
  --ink-dim: #8A93A3;
  --ink-faint: #565E6C;
  --signal: #5CCFE0;      /* live state ONLY — never decorative */
  --upcoming: #E0A458;    /* announced, NOT live — the coming-soon badge only */
  --measure: 640px;       /* single reading width for ALL prose */
  --positive: #4FB283;    /* data only, never a headline */
  --negative: #C4685F;    /* data only, never a headline */

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo,
    Consolas, monospace;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
}

* { box-sizing: border-box; }
/* dark only — also makes form controls, scrollbars and the address bar
 * render dark instead of the UA's light defaults. */
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { border-color: var(--ink-dim); }
h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 .4em; }
p { margin: 0 0 1em; color: var(--ink); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---- mono / uppercase primitives ------------------------------------- */
.mono { font-family: var(--mono); }
.eyebrow, .label, .tbl th, .badge, .nav a, uppercase {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.eyebrow {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.num, .tbl td.num, .stat .value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- nav --------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.nav .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--ink);
  border-bottom: none;
}
.nav .wordmark svg { width: 15px; height: 15px; color: var(--ink); }
.nav .links { display: flex; flex-wrap: wrap; gap: 18px; margin-right: auto; }
.nav .links a {
  font-size: 12px;
  color: var(--ink-dim);
  border-bottom: none;
}
.nav .links a:hover, .nav .links a.active { color: var(--ink); }
.nav .cta { white-space: nowrap; }

/* ---- hero ---------------------------------------------------------------*/
.hero { padding: 40px 0 8px; }
/* Hero balance experiment (2026-08-01): the empty right margin beside the
 * reading-width text column carries a LIVE slice of the dashboard — real
 * component, not prose (SITE_COPY_DIRECTION: teasers are components).
 * Signal cyan on the dot only: it marks genuinely live state. */
/* align-items:center, not start (2026-09-21, operator): the two columns
   will never be the same height — the rail carries the trend matrix, the
   dashboard button and the coming-soon badge — and matching their content
   lengths by hand would break at the next edit. Centring makes the gap
   symmetric above and below the shorter column at ANY height, so it reads
   as deliberate instead of as a hole. The rail's top margin goes with it:
   it existed to push the card down to roughly the headline, which is what
   centring now does properly. */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 48px; align-items: center; }
.hero-live {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.hero-live .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hero-live .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
}
.hero-live .teaser-foot { margin: 10px 0 12px; }
.hero-live .cta.ghost { display: block; text-align: center; }
@media (max-width: 900px) {
  .hero-split { display: block; }
  .hero-live { margin-top: 24px; }
}

/* ---- hero hook ----------------------------------------------------------
 * The motto sits above as a mono eyebrow (always present, brand-constant);
 * the hook is the actual H1 and is the only oversized type on the site. */
/* The motto is the site's one slogan and was reading as quiet UI chrome at
   --ink-dim, the same weight as a section label. Full --ink, heavier and a
   size up — still the mono/uppercase eyebrow form, just no longer whispering
   (operator 2026-09-21: 'make it brighter'). */
.motto { color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.hook {
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  /* Wide enough for "Done with 20× promises" (22ch) to sit on ONE line —
   * the <br> in the markup is the intended (and only) break. 15ch forced
   * a second wrap and made the hook a 3-liner. */
  max-width: 23ch;
}
.hook-sub {
  max-width: var(--measure);
  font-size: 17px;
  color: var(--ink-dim);
  margin: 0 0 26px;
}

/* ---- side-rail live cards -------------------------------------------------
 * 2026-08-01 (hero-teaser follow-up, operator: "same to the other spaces,
 * don't overcrowd"): the empty right margin beside reading-width prose
 * carries at most ONE live component per page — proof of life, never
 * decoration. Same card language as .hero-live. Collapses under 900px. */
.rail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 48px; align-items: start; }
.side-rail {
  margin-top: 8px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.side-rail .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.side-rail .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.side-rail .teaser-foot { margin-top: 10px; }
.rail-rows > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px;
}
.rail-rows > div:last-child { border-bottom: none; }
.rail-rows b { color: var(--ink); }
@media (max-width: 900px) {
  .rail-grid { display: block; }
  .side-rail { margin: 18px 0; }
}

/* ---- channel cards ------------------------------------------------------
 * All five sit on one level: identical treatment, the free one marked by a
 * badge only. No visual hierarchy between strategies. */
/* justify-content:center for the same reason as .hero-split (2026-09-21):
   a card in a grid row stretches to the tallest sibling, so its text sat
   at the top with a hole beneath it. Centring the content block keeps the
   spacing even above and below whatever the neighbour's height is. */
.chan-card { display: flex; flex-direction: column; justify-content: center; }
.chan-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.chan-head h3 { margin: 0; font-size: 15px; }
.chan-tag {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .06em;
  margin: 0 0 10px;
}
.chan-hook {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.chan-desc { font-size: 14px; color: var(--ink-dim); margin: 0 0 14px; flex: 1; }
.chan-link { margin: 0; font-size: 13px; }

/* ---- patience block -----------------------------------------------------
 * The anti-high-leverage argument, given its own surface so it reads as a
 * position rather than a footnote. */
.patience-card { border-left: 2px solid var(--ink-faint); }
.patience-card h2 { font-size: 22px; margin-bottom: 10px; }
.patience-card p { max-width: var(--measure); }
.patience-card .dek { margin-bottom: 14px; }

/* ---- homepage teasers ---------------------------------------------------*/
/* Trend matrix: arrows are centred in their column, so the timeframe
 * headers must be too — .num right-aligns by default, which left the
 * header sitting off to one side of its own column (operator, 2026-08-01).
 * Applies to every trend table: the two teasers and the dashboard's. */
.teaser-trend td, .teaser-trend th { padding: 5px 10px; }
.tbl.teaser-trend td.num, .tbl.teaser-trend th.num { text-align: center; }
#trend .tbl td.num, #trend .tbl th.num { text-align: center; }
.teaser-foot { font-size: 13px; color: var(--ink-dim); margin: 14px 0 12px; }
.teaser-record .tbl { margin-bottom: 4px; }

.thesis {
  max-width: var(--measure);
  font-size: 16px;
  color: var(--ink-dim);
  margin: 0 0 28px;
}
.thesis strong { color: var(--ink); font-weight: 600; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.stat {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat .label {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.stat .value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
}
.stat .sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-dim);
}
@media (max-width: 720px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---- section hairlines --------------------------------------------------*/
.section { padding: 36px 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: none; }
.section h2 { font-size: 18px; margin: 0 0 6px; }
.section .dek { color: var(--ink-dim); margin: 0 0 20px; max-width: var(--measure); }

/* ONE PROSE MEASURE (2026-08-01, operator design review). Reading-width
 * used to be set per class — 620px on .hook-sub, 640px on .thesis/.dek,
 * and nothing at all on page subtitles or card paragraphs, so stacked
 * blocks wrapped at different widths and read as different designs (the
 * patience card was the visible case; the hero's 620-vs-640 was the
 * subtle one). Every prose block now shares --measure. Cards narrower
 * than the measure (grid tiles, side rails) are unaffected; tables,
 * widgets and the footer's legal block keep their own widths. */
p.sub { max-width: var(--measure); }
.card p { max-width: var(--measure); }

/* ---- dashboard sub-group labels ------------------------------------------
 * Mono uppercase, hairline-underlined — groups widgets within a page
 * section (e.g. "Derivatives" under "Market context") without introducing
 * a new heading weight or color. Reuses .eyebrow's type treatment. */
.subgroup {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--ink-faint);
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.subgroup:first-child { margin-top: 0; }

/* ---- card / grid --------------------------------------------------------*/
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
/* Exactly four across (the paid channels) — auto-fit would reflow them to
 * 5-up on wide screens and orphan one on narrow ones. */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid4 { grid-template-columns: 1fr; } }
/* Free channel: own row above the paid grid, but SAME card width as the
 * paid four (operator 2026-08-01) — a full-bleed card read as a different
 * component. Same 4-column track, card occupies one column. */
#cards-free {
  display: grid;
  /* 2026-09-21: was repeat(4,1fr) for a free card plus four paid ones, which
     left the single remaining product card in a quarter-width column with
     column 2 empty. One product now, and its card carries the actual pitch,
     so it takes the larger share and the live-bag strip the smaller. */
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { #cards-free { grid-template-columns: 1fr; } }
@media (max-width: 520px) { #cards-free { grid-template-columns: 1fr; } }
/* Latest-trades eyecatcher beside the free card: real rows, compact. */
/* Right-aligned in the free row (operator): last two columns, so the
 * gap sits between the free card and the examples. */
.chan-trades { display: flex; flex-direction: column; }
.chan-trades .eyebrow { display: flex; align-items: center; gap: 8px; }
.chan-trades .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.trade-mini { width: 100%; margin: 2px 0 0; }
.trade-mini-foot { font-size: 12px; color: var(--ink-faint); margin: 10px 0 auto; }
.trade-mini td { padding: 5px 0; vertical-align: middle; }
.trade-mini td:last-child { text-align: right; white-space: nowrap; font-size: 12px; }
.trade-mini tr:last-child td { border-bottom: none; }
.trade-mini-chan { display: block; font-size: 11px; color: var(--ink-faint); }
.trade-mini-arrow { color: var(--ink-faint); }
.chan-trades .chan-link { margin: 12px 0 0; }

/* ---- table ----------------------------------------------------------- */
.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left;
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 600;
  /* see .tbl th.num below */
  border-bottom: 1px solid var(--line);
  padding: 6px 10px;
  white-space: nowrap;
}
/* A numeric header must sit over its own column (2026-08-01, operator
 * spotted it on the trend matrix; it was site-wide). `.num` right-aligns,
 * but `.tbl th` above is more specific, so EVERY th.num on the site was
 * silently left-aligned above right-aligned figures — session levels,
 * funding, CME gaps, pricing tables, the track record. This rule is the
 * root fix; the trend matrices override it to centre, and carry enough
 * specificity to keep winning. */
.tbl th.num { text-align: right; }

/* Dashboard pair (2026-08-01, operator): the flush card must fit its
 * half-width cell without a horizontal scrollbar, and the OI list —
 * ~10 coins x 2 lines — scrolls vertically instead of setting the row
 * height for the whole pair. */
/* Flush state, rich view: one block per coin, wrapping across the full
 * card. Monochrome except the state badge and the reclaim ticks — the
 * ticks are DATA (a level taken back or not), so green is legitimate. */
.flush-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px 22px;
}
.flush-item { border-left: 2px solid var(--line); padding-left: 14px; }
.flush-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
/* label | value | note — one grid so every figure in the card shares a
 * left edge and the reclaim ladder reads as three comparable rows. */
.fl-row {
  display: grid;
  /* label | note | figure — note and figure both flush right, so every
   * number in the card stacks into one right-hand column (operator). */
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0 10px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
}
.fl-k { color: var(--ink-faint); }
.fl-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  min-width: 5.5rem;
}
.fl-x {
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
  text-align: right;
}
.flush-hit { color: var(--positive); }
.flush-miss { color: var(--ink-faint); }

/* Recent-episodes table uses the site's standard table spacing — the
 * tighter override was only needed while this card was half-width.
 * 20 rows scroll in place with a sticky header rather than pushing the
 * live cards off the screen. */
.flush-hist { max-height: 340px; overflow-y: auto; }
.flush-hist .tbl th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
#oiflow .tblwrap { max-height: 460px; overflow-y: auto; }
#oiflow .tbl th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
#oiflow .tbl tr:first-child th { top: 0; }
#oiflow .tbl tr:nth-child(2) th { top: 27px; }
/* Grouped header: a hairline under each window's span so the two
 * three-column blocks read as separate windows, not six loose columns. */
.oi-group {
  text-align: center !important;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim) !important;
}
.oi-read { white-space: nowrap; }
.oi-fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.oi-up { color: var(--positive); }
.oi-dn { color: var(--negative); }
.oi-flat { color: var(--ink-faint); }
.tbl td { border-bottom: 1px solid var(--line); padding: 7px 10px; color: var(--ink); }
.tbl tr:last-child td { border-bottom: none; }

/* ---- badges ------------------------------------------------------------*/
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: transparent;
}
.badge.green { color: var(--positive); border-color: var(--positive); }
.badge.red { color: var(--negative); border-color: var(--negative); }
.badge.blue { color: var(--signal); border-color: var(--signal); }
/* No yellow in the brand palette (monochrome identity, BRAND.md) — mapped
 * to the same muted treatment as .muted rather than inventing a new hue. */
.badge.yellow { color: var(--ink-dim); border-color: var(--ink-faint); }
.badge.muted { color: var(--ink-dim); border-color: var(--line); }

.pos { color: var(--positive); }
.neg { color: var(--negative); }

/* ---- advertising label (UWG/DDG: must sit AT the link, before the click,
 * on every affiliate href) --------------------------------------------- */
.adlabel {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 1px 6px;
  margin-right: 6px;
  border-radius: 3px;
  border: 1px solid var(--ink-faint);
  color: var(--ink-dim);
  vertical-align: middle;
}

/* ---- explainer (mandatory on every widget) ------------------------------*/
.explain {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink-dim);
}
.explain summary {
  cursor: pointer;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  list-style: none;
}
.explain summary::-webkit-details-marker { display: none; }
.explain summary::before { content: "+ "; color: var(--ink-faint); }
.explain[open] summary::before { content: "\2212 "; }
.explain p { margin: 8px 0 0; }
.explain b { color: var(--ink); }

/* ---- buttons / cta -------------------------------------------------------*/
.cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--ink);
  color: var(--ground);
  background: var(--ink);
}
.cta:hover { border-bottom: none; opacity: .85; }
.cta.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.cta.ghost:hover { border-color: var(--ink-dim); }
button.cta { cursor: pointer; }

/* ---- footer ---------------------------------------------------------- */
footer {
  margin-top: 12px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 12px;
}
footer a { color: var(--ink-faint); border-color: transparent; }
footer a:hover { color: var(--ink-dim); }
footer .risk { max-width: 720px; margin: 0 0 14px; }
footer .legal a { margin-right: 14px; }

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; gap: 12px 16px; }
  .nav .links { order: 3; width: 100%; gap: 12px 16px; }
  h1 { font-size: 22px; }
}

/* ---- visual components (site/js/visuals.js) -----------------------------
 * Layout/sizing only — every colour these SVGs use is set inline via
 * fill/stroke="var(--token)" in the JS itself, per BRAND.md. This block
 * just keeps them from breaking the grid on narrow viewports. */
.viz { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
.viz-fngdial { display: block; margin: 0 auto; }
.viz-trend, .viz-spark, .viz-meter, .viz-splitbar { flex: none; }
.viz-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-dim);
  transition: border-color .15s ease;
}
.viz-chip .mono { font-size: 10px; letter-spacing: .08em; }
.viz-chip svg { flex: none; }

@media (max-width: 480px) {
  .viz-fngdial { width: 132px; height: auto; }
}

/* ── "coming soon" badge (2026-09-21, operator: not at the top, put it where
   there is space and make it stand out). Lives in the side rail, below the
   live widgets, where the column is otherwise empty.

   Colour: --upcoming is a NEW token, deliberately not --signal (reserved for
   LIVE state) and not --positive/--negative (data only, never a headline).
   Amber reads as "on its way" rather than "happening now", and it is the only
   warm colour on the page, so the badge is the thing your eye lands on in
   that column without competing with the price. */
.soon-badge {
  margin-top: 22px; padding: 16px;
  border: 1px solid var(--upcoming);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);          /* fallback where color-mix is unsupported */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--upcoming) 12%, transparent), transparent);
}
.soon-badge .soon-pill {
  display: inline-block; margin-bottom: 10px;
  font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px;
  background: var(--upcoming); color: var(--ground);
}
.soon-badge h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.soon-badge p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-dim); }

/* ── hero proof row (2026-09-21): sits under the hero CTAs. It fills the
   column the live market strip used to occupy, and puts the product's own
   numbers at the point of decision rather than further down the page.
   Deliberately quieter than a .stat-strip — this supports the CTA, it does
   not compete with the trend matrix beside it. */
.hero-proof { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; }
.hero-proof div { display: flex; flex-direction: column; gap: 2px; }
.hero-proof b { font: 600 22px/1.1 var(--mono); color: var(--ink); }
.hero-proof span { font-size: 12px; color: var(--ink-dim); }
@media (max-width: 520px) { .hero-proof { gap: 18px; } .hero-proof b { font-size: 19px; } }

/* ── motto subline (2026-09-21, operator): "No guru. Just signals." is the
   motto, and it now carries one line saying what it actually means. Sits
   between the motto and the headline, so it must stay visually subordinate
   to BOTH — small, muted, tight, and never bold. */
.motto-sub {
  max-width: 52ch;
  margin: -6px 0 18px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-dim);
}