/* ═══════════════════════════════════════════════════════════════
   cite0 Hub — index, long-form, and the landing's hub section
   ───────────────────────────────────────────────────────────────
   Loaded AFTER tokens.css → primitives.css → v3.css.

   THEME NOTE. The hub runs in the LIGHT theme while the landing runs
   in noir, and that is deliberate: the landing is a poster you scan,
   the hub is prose you read. Hub pages simply omit data-theme="noir",
   so tokens.css resolves to its light values and every token below
   means the light thing.

   Every value here is a token. A hex or a raw type size in this file
   means the design system is missing something — add it to
   design/v3/tokens.css and record the rule in md/design/v3/system.md.
   ═══════════════════════════════════════════════════════════════ */

.h-page { min-height: 100vh; background: var(--surface-page); font-family: var(--font-sans); color: var(--text); }

/* The browser's own [hidden] rule is `display: none` at UA-stylesheet
   specificity, which ANY class selector beats — and every card here sets
   display: flex or grid. So `el.hidden = true` set the attribute and changed
   nothing on screen, which is exactly how the series filter looked broken.
   One rule, once, rather than a bespoke .is-hidden class per component. */
[hidden] { display: none !important; }
.h-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }

/* ── The hub's own nav ───────────────────────────────────────────
   Deliberately NOT the landing nav. The landing's items are in-page
   anchors; the hub is a separate system with its own sections, so it
   gets its own row: the hub mark, the hub's tabs, a marked way back to
   the product, and the one CTA. A tab exists only where there is a page
   behind it — the four series are filters on the index, not pages, so
   they are not tabs. */

.h-nav { background: var(--surface); border-bottom: 1px solid var(--border); }
.h-nav .h-wrap { height: 64px; display: flex; align-items: center; gap: var(--space-5); }
.h-nav .mark {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-display); font-size: 21px;
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.h-nav .mark .sub {
  font-family: var(--font-mono); font-size: var(--text-micro);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-subtle);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 2px 7px; position: relative; top: -2px;
}
.h-tabs { display: flex; gap: var(--space-5); align-items: center; font-size: var(--text-sm); }
.h-tabs a { color: var(--text-muted); text-decoration: none; padding: 21px 0; border-bottom: 2px solid transparent; }
.h-tabs a:hover { color: var(--text); }
.h-tabs a[aria-current="page"] { color: var(--text); font-weight: var(--weight-medium); border-bottom-color: var(--text); }
.h-nav .grow { flex: 1; }

/* The mirror of the landing's Hub chip: same arrow, pointing back out. */
.h-out {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.h-out:hover { color: var(--text); }
.h-out svg { opacity: .55; }
.h-out:hover svg { opacity: 1; }

.h-cta {
  background: var(--emphasis); color: var(--on-emphasis);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 9px 16px; border-radius: var(--radius); text-decoration: none; white-space: nowrap;
}
.h-cta:hover { background: var(--emphasis-hover); color: var(--on-emphasis); }

@media (max-width: 720px) {
  .h-nav .h-wrap { height: auto; padding-top: 10px; padding-bottom: 10px; gap: var(--space-3); flex-wrap: wrap; }
  .h-tabs { gap: var(--space-4); }
  .h-tabs a { padding: 4px 0; }
  .h-out { display: none; }
}

/* ── Hub header ──────────────────────────────────────────────── */

.h-head { padding-top: var(--space-8); }
.h-eyebrow {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-subtle);
}
.h-head h1 {
  font-family: var(--font-display); font-size: var(--text-metric);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight); margin: var(--space-3) 0; max-width: 22ch;
}
.h-head .lede {
  font-size: var(--text-body-lg); line-height: var(--leading-normal);
  color: var(--text-muted); margin: 0; max-width: 58ch; text-wrap: pretty;
}

.h-filters { display: flex; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; }
.h-filter {
  font-size: var(--text-sm); padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.h-filter[aria-current="true"] { background: var(--emphasis); border-color: var(--emphasis); color: var(--on-emphasis); }
.h-note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); max-width: 70ch; }
.h-note p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); margin: 0; }

/* The category strip. Every number on it is an estimate and the row says so
   once, at the end — an estimate that does not look like one is a lie with a
   number in it. */
.h-cats {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-5);
}
.h-cats .lbl {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-subtle);
}
.h-cat {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--text-sm);
  padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.h-cat .meta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-faint); }
.h-cats .unit { font-size: var(--text-caption); color: var(--text-faint); }

/* ── Cards ───────────────────────────────────────────────────── */

.h-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }

.h-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  border-radius: var(--radius-xl); padding: var(--space-5);
  text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
a.h-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

/* Data cards invert. A market report IS the dark thing on a light page — it is
   the card carrying a measured number, and the inversion reads before the words do. */
.h-card.data { background: var(--surface-invert); color: var(--text-invert); border-color: transparent; }
a.h-card.data:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.h-card.data .title, .h-card.data .n { color: var(--text-invert); }
.h-card.data .sub, .h-card.data .meta, .h-card.data .nunit { color: var(--text-invert-muted); }
.h-card.data .h-foot { border-top-color: var(--border-invert); }

.h-card .title {
  font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); line-height: var(--leading-snug);
  flex: 1; text-wrap: pretty; margin: 0;
}
.h-card .sub { font-size: var(--text-body); line-height: var(--leading-normal); color: var(--text-muted); flex: 1; }
.h-card .meta { font-size: var(--text-caption); color: var(--text-faint); }
.h-card .n { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-semibold); }
.h-card .nrow { display: flex; align-items: baseline; gap: var(--space-2); }
.h-card .nunit { font-size: var(--text-caption); }

/* Series tag. Colour comes from the card's --series variable, so the tag —
   and only the tag — carries series identity. */
.h-tag {
  align-self: flex-start; font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
  border: 1px solid var(--series, var(--border-strong));
  color: var(--series, var(--text-muted)); background: var(--surface);
}
.h-card.data .h-tag { border-color: var(--border-invert); color: var(--text-invert-muted); background: transparent; }
.h-tagrow { display: flex; gap: var(--space-2); align-items: center; }
.h-tagrow .grow { flex: 1; }
.h-tagrow svg { color: var(--text-invert-muted); }

/* Striped = estimated. Same encoding as the dashboard, so a client who has
   learned one has already learned the other. */
.h-bar { height: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,.10); overflow: hidden; }
.h-bar > i { display: block; height: 100%; background: repeating-linear-gradient(135deg, rgba(255,255,255,.75) 0 4px, rgba(255,255,255,.22) 4px 8px); }

.h-foot { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.h-foot .cap { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-subtle); }
.h-chips { display: flex; gap: 4px; }
.h-chips span { width: 26px; height: 12px; border-radius: 4px; background: var(--series); opacity: .22; }
.h-chips span.empty { background: none; border: 1px dashed var(--n-300); opacity: 1; }
.h-spark { display: flex; gap: 3px; align-items: flex-end; height: 19px; }
.h-spark span { width: 5px; background: var(--series); opacity: .3; border-radius: 2px; }
.h-spark span.on { opacity: 1; }
.h-steps { display: flex; align-items: center; gap: 5px; }
.h-steps i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--series); display: block; }
.h-steps i.on { background: var(--series); }
.h-steps u { width: 12px; height: 2px; background: var(--n-300); display: block; }

/* A card with nothing behind it yet is not a link and must not look like one. */
.h-card.soon { opacity: .72; }

/* ── Featured ────────────────────────────────────────────────── */

.h-featured {
  display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6);
  background: var(--surface-invert); color: var(--text-invert);
  border-radius: var(--radius-xl); padding: var(--space-6);
  margin-top: var(--space-6); text-decoration: none; box-shadow: var(--shadow-invert);
}
.h-featured .body { display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.h-featured h2 {
  font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); line-height: var(--leading-snug);
  color: var(--text-invert); margin: 0; text-wrap: pretty;
}
.h-featured .sub { font-size: var(--text-body); line-height: var(--leading-normal); color: var(--text-invert-muted); max-width: 52ch; }
.h-featured .meta { font-size: var(--text-caption); color: var(--text-invert-muted); }
.h-featured .side {
  border-left: 1px solid var(--border-invert); padding-left: var(--space-6);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-2);
}
.h-featured .side .n {
  font-family: var(--font-display); font-size: var(--text-metric);
  font-weight: var(--weight-semibold); color: var(--text-invert); text-shadow: var(--glow-invert);
}
.h-featured .side .cap { font-size: var(--text-caption); line-height: var(--leading-normal); color: var(--text-invert-muted); }

@media (max-width: 760px) {
  .h-featured { grid-template-columns: 1fr; padding: var(--space-5); }
  .h-featured .side { border-left: 0; border-top: 1px solid var(--border-invert); padding-left: 0; padding-top: var(--space-4); }
  .h-head { padding-top: var(--space-6); }
}

/* ── Hub footer ──────────────────────────────────────────────── */

.h-footer { border-top: 1px solid var(--border); margin-top: var(--space-8); }
.h-footer .h-wrap {
  padding-top: var(--space-5); padding-bottom: var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
  font-size: var(--text-caption); color: var(--text-subtle); flex-wrap: wrap;
}
.h-footer a { color: var(--text-subtle); text-decoration: none; }
.h-footer a:hover { color: var(--text); }
.h-footer .grow { flex: 1; }



/* Narrow screens: the nav row is a mark, three links and a button. Let the
   links shrink rather than wrap — a wrapped "How it works" doubles the nav
   height on every hub page. */
@media (max-width: 560px) {
  .h-nav .h-wrap { gap: var(--space-3); }
  .h-nav .links { gap: var(--space-3); font-size: var(--text-caption); }
  .h-nav .links a { white-space: nowrap; }
  .h-cta { padding: 8px 13px; font-size: var(--text-caption); }
  .h-nav .mark { font-size: 18px; }
}

/* ═══ The landing's nav door ══════════════════════════════════════
   Runs in noir, because it lives on the landing nav.

   How it works, Pricing and FAQ are in-page anchors. The Hub is a
   different section of the site in a different theme, and a plain link
   sitting among three anchors gives a reader no way to know that until
   the page changes under them. A hairline rule closes the anchor group;
   the chip and the leaves-the-page arrow mark the Hub as a destination.
   Same convention as an external-link mark, used here for an internal
   boundary — which is what this actually is. */

.l-nav-rule {
  width: 1px; height: 16px; flex: none;
  background: var(--border-strong);
  margin: 0 2px;
}
.l-nav-links a.l-nav-out {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text); font-weight: 600;
}
.l-nav-links a.l-nav-out svg { opacity: .55; }
.l-nav-links a.l-nav-out:hover {
  border-color: var(--text-faint);
  background: var(--surface-hover);
  color: var(--text);
}
.l-nav-links a.l-nav-out:hover svg { opacity: 1; }

/* On a phone the nav row wraps; the rule would sit orphaned at the end
   of a line, so it goes and the chip carries the distinction alone. */
@media (max-width: 720px) {
  .l-nav-rule { display: none; }
}

/* ── About (a hub page, not a landing page) ──────────────────── */

.h-about { max-width: 1000px; padding-top: var(--space-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); }
.h-about .lead-col { display: flex; flex-direction: column; gap: var(--space-4); align-self: start; position: sticky; top: var(--space-7); }
.h-about h1 {
  font-family: var(--font-display); font-size: 34px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); line-height: 1.2; margin: 0;
}
.h-about .prose { display: flex; flex-direction: column; gap: var(--space-4); }
.h-about .prose p { font-size: var(--text-body-lg); line-height: 1.65; color: var(--n-800); margin: 0; }
.h-about .prose strong { font-weight: var(--weight-semibold); color: var(--text); }
.h-about .contact {
  border-top: 1px solid var(--border); padding-top: var(--space-5); margin-top: var(--space-4);
  font-size: var(--text-sm); color: var(--text-muted);
}

/* The score badge. It carries the date it was measured, not the word "live" —
   a number that claims to be live and is not is exactly the dishonesty this
   product exists to find. Swap to live when the endpoint lands. */
.h-score {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 12px;
}
.h-score .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); flex: none; }
.h-score .v { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--positive-ink); }
.h-score .l { font-size: var(--text-caption); color: var(--text-subtle); }

.h-team { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: var(--space-6); }
.h-team .lede { font-size: var(--text-body-lg); line-height: var(--leading-normal); color: var(--text-muted); margin: var(--space-3) 0 var(--space-6); max-width: 58ch; }
.h-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.h-person { display: flex; flex-direction: column; gap: var(--space-3); }
.h-person .photo {
  width: 100%; height: 230px; border-radius: 10px;
  background: var(--surface-sunken); border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-faint);
}
.h-person .nm { font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); color: var(--text); }
.h-person .ro { font-size: var(--text-sm); color: var(--text-muted); }
.h-person .cr { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); margin-top: var(--space-1); max-width: 34ch; }

@media (max-width: 760px) {
  .h-about { grid-template-columns: 1fr; padding-top: var(--space-6); }
  .h-about .lead-col { position: static; }
}

/* ═══ The landing's Learn section ═════════════════════════════════
   Noir, because it lives on the landing. The section frame — padding,
   top rule, wrap, eyebrow, heading, lede — is the landing's own
   .l-section idiom, deliberately NOT the mock's standalone gradient
   backdrop: on a real page that backdrop read as a block pasted in from
   somewhere else. What is kept from the mock is the part that is the
   hub's own language: the estimate bar, the series tags, and the little
   footer visuals, so the cards look like the ones on /hub. */

.l-learn-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 30px;
}
.l-lcard {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 22px;
  text-decoration: none; color: inherit;
  transition: border-color .15s var(--ease-out);
}
a.l-lcard:hover { border-color: var(--border-strong); }
.l-lcard .tag {
  align-self: flex-start; font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
  border: 1px solid var(--series, var(--border-strong)); color: var(--series, var(--text));
}
.l-lcard .tagrow { display: flex; align-items: center; gap: 8px; }
.l-lcard .tagrow .grow { flex: 1; }
.l-lcard .tagrow svg { color: var(--text-faint); }
.l-lcard .big { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.l-lcard .big .n {
  font-family: var(--font-display); font-size: 36px; font-weight: var(--weight-semibold);
  line-height: 1; color: var(--text); text-shadow: var(--glow-invert);
}
.l-lcard .big .u { font-size: var(--text-caption); color: var(--text-muted); }
.l-lcard .t {
  font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); line-height: var(--leading-snug);
  color: var(--text); flex: 1; text-wrap: pretty;
}
.l-lcard .t.sm { font-size: 17px; }
.l-lcard .m { font-size: var(--text-caption); color: var(--text-subtle); }

.l-learn-tail {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 26px; padding-top: 20px;
}
.l-learn-tail .note { font-size: 13px; color: var(--text-muted); max-width: 62ch; }
.l-learn-tail .grow { flex: 1; }

/* .l-btn carries no padding of its own — every context sizes it. */
.l-hubcta { font-size: 13px; padding: 10px 22px; }

/* ═══ Article ═════════════════════════════════════════════════════
   The long-form page. One measured column — everything else on the
   hub is a grid, this is the only place cite0 asks someone to read
   several hundred words in a row. */

.h-art { max-width: 720px; margin: 0 auto; padding: var(--space-7) var(--space-5) 0; }

.h-crumb { font-size: var(--text-caption); color: var(--text-subtle); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.h-crumb a { color: var(--text-subtle); text-decoration: none; }
.h-crumb a:hover { color: var(--text); }
.h-crumb .sep { color: var(--text-faint); }
.h-crumb .here { color: var(--text); }

.h-art h1 {
  font-family: var(--font-display); font-size: 32px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
  margin: var(--space-3) 0 var(--space-5); text-wrap: pretty;
}
.h-art h2 {
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); line-height: var(--leading-snug);
  margin: var(--space-7) 0 var(--space-3); text-wrap: pretty;
}
.h-art p { font-size: var(--text-body-lg); line-height: 1.65; color: var(--n-800); margin: 0 0 var(--space-4); }

.h-byline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.h-byline .avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--surface-sunken); border: 1px dashed var(--border-strong);
}
.h-byline .who { display: flex; flex-direction: column; gap: 2px; }
.h-byline .who a { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); text-decoration: none; }
.h-byline .who a:hover { text-decoration: underline; }
.h-byline .when { font-size: var(--text-caption); color: var(--text-subtle); }
.h-byline .grow { flex: 1; }

.h-tldr {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm); margin-top: var(--space-6);
}
.h-tldr .lbl {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: var(--space-2);
}
.h-tldr p { font-size: var(--text-body-lg); line-height: 1.6; margin: 0; color: var(--text); }

/* Key stat. The hero variant inverts because it is the number the whole piece
   turns on. Both carry a source line — a figure without provenance is the
   thing we tell clients not to publish. */
.h-keystat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--space-5); margin: var(--space-5) 0;
}
.h-keystat.hero {
  background: var(--surface-invert); color: var(--text-invert); border: 0;
  border-radius: var(--radius-xl); padding: var(--space-6); margin: var(--space-6) 0;
  box-shadow: var(--shadow-invert);
}
.h-keystat .row { display: flex; align-items: baseline; gap: var(--space-2); }
.h-keystat .n { font-family: var(--font-display); font-size: var(--text-metric); font-weight: var(--weight-semibold); color: var(--text); }
.h-keystat.hero .n { color: var(--text-invert); text-shadow: var(--glow-invert); }
.h-keystat .u { font-size: var(--text-body); color: var(--text-muted); }
.h-keystat.hero .u { color: var(--text-invert-muted); }
.h-keystat .cap { font-size: var(--text-body); line-height: var(--leading-normal); color: var(--text-muted); margin-top: var(--space-2); }
.h-keystat.hero .cap { color: var(--text-invert-muted); }
.h-keystat .src {
  font-size: var(--text-caption); color: var(--text-subtle);
  margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3);
}
.h-keystat.hero .src { color: var(--text-invert-muted); border-top-color: var(--border-invert); }

/* Chart. Every bar is striped because every value is an estimate; the row for
   the subject of the piece is the only one at full ink. */
.h-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-5) 0; }
.h-chart .head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.h-chart .head .t { font-size: var(--text-h3); font-weight: var(--weight-semibold); }
.h-chart .head .grow { flex: 1; }
.h-chart .head .u { font-size: var(--text-caption); color: var(--text-subtle); }
.h-chart .rows { display: grid; grid-template-columns: 90px 1fr 76px; gap: var(--space-3); align-items: center; }
.h-chart .k { font-size: var(--text-sm); color: var(--text-muted); }
.h-chart .k.on { color: var(--text); font-weight: var(--weight-medium); }
.h-chart .track { height: 14px; background: var(--n-100); border-radius: var(--radius-pill); overflow: hidden; }
.h-chart .track i { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--n-400) 0 5px, var(--n-200) 5px 9px); }
.h-chart .track i.on { background: repeating-linear-gradient(135deg, var(--n-900) 0 5px, var(--n-500) 5px 9px); }
.h-chart .v { font-family: var(--font-mono); font-size: var(--text-sm); text-align: right; color: var(--text-muted); }
.h-chart .v.on { color: var(--text); font-weight: var(--weight-medium); }
.h-chart .note { font-size: var(--text-caption); line-height: var(--leading-normal); color: var(--text-subtle); margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }

.h-chips-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; }
.h-chips-row span { border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 6px 14px; font-size: var(--text-sm); color: var(--text); background: var(--surface); }

.h-quote { margin: var(--space-7) 0; padding: 0 var(--space-6); }
.h-quote .mark { font-family: var(--font-display); font-size: 40px; line-height: .5; color: var(--n-300); }
.h-quote p {
  font-family: var(--font-display); font-size: 21px; font-style: italic;
  font-weight: var(--weight-regular); line-height: 1.45; letter-spacing: var(--tracking-snug);
  color: var(--text); margin: var(--space-4) 0 var(--space-3);
}
.h-quote .by { font-size: var(--text-sm); color: var(--text-subtle); }

.h-helps {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); padding: var(--space-6);
  margin: var(--space-7) 0; box-shadow: var(--shadow);
}
.h-helps .lbl {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: var(--space-3);
}
.h-helps p { font-size: var(--text-body-lg); line-height: 1.6; color: var(--text); margin: 0 0 var(--space-4); max-width: 56ch; }

.h-faq details { border-top: 1px solid var(--border); }
.h-faq details:last-child { border-bottom: 1px solid var(--border); }
.h-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: 15px 0; cursor: pointer; font-size: 15px; font-weight: var(--weight-medium);
  color: var(--text); list-style: none;
}
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary .sign { font-family: var(--font-mono); font-size: 16px; color: var(--text-faint); flex: none; }
.h-faq details[open] summary .sign { transform: rotate(45deg); }
.h-faq summary .sign { display: inline-block; transition: transform .15s var(--ease-out); }
.h-faq p { margin: 0; padding: 0 0 var(--space-4); font-size: var(--text-body); line-height: 1.6; color: var(--text-muted); max-width: 62ch; }

.h-method { margin-top: var(--space-7); }
.h-method .lbl, .h-srcs .lbl {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: var(--space-2);
}
.h-method p { font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 66ch; }
.h-srcs { margin-top: var(--space-6); }
.h-srcs ol { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); line-height: 1.7; color: var(--text-muted); }
.h-srcs a { color: var(--text-muted); }

.h-authorcard {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-5); margin-top: var(--space-7); text-decoration: none; color: inherit;
}
.h-authorcard:hover { border-color: var(--border-strong); }
.h-authorcard .photo { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--surface-sunken); border: 1px dashed var(--border-strong); }
.h-authorcard .nm { font-size: 15px; font-weight: var(--weight-semibold); color: var(--text); }
.h-authorcard .ro { font-size: var(--text-sm); color: var(--text-muted); }

/* "Coming soon" is a state, and it says so in words rather than only in a
   dimmer. A reader should never have to guess whether a card is broken. */
.h-soonflag {
  align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-faint); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill); padding: 2px 8px;
}
.h-card.data .h-soonflag, .h-featured .h-soonflag { color: var(--text-invert-muted); border-color: var(--border-invert); }

@media (max-width: 640px) {
  .h-art { padding: var(--space-6) var(--space-4) 0; }
  .h-art h1 { font-size: 26px; }
  .h-chart .rows { grid-template-columns: 74px 1fr 68px; }
  .h-quote { padding: 0; }
}