/* ============================================================
   FACT ROYALE — PLAYER-FACING COMPONENTS

   Every class the public site needs, built from the approved mockups in
   _mockups/. Requires tokens.css first and takes every colour, size,
   radius and curve from it: there are no literal values in this file
   except where a gradient or a one-off geometry genuinely needs one,
   and those are commented.

   Does NOT load alongside studio.css. The two define .btn and .chip to
   different designs on purpose, which is why they were separated.

   Replaces style.css, which is loaded by exactly three pages
   (_app/index.html, _app/mastery.html, _app/groups.html) and is deleted
   once all three move over.
   ============================================================ */

/* ── base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── layout ─────────────────────────────────────────────────── */
.wrap   { max-width: var(--page-width); margin: 0 auto; padding: 0 clamp(18px, 4vw, 36px); }
.narrow { max-width: 720px;             margin: 0 auto; padding: 0 clamp(18px, 4vw, 30px); }

/* ── the gold treatment ─────────────────────────────────────────
   Reserved for exactly three things: the headline, the score, the
   streak. Used anywhere else it stops meaning anything.

   padding-bottom and line-height are load-bearing, not styling.
   background-clip:text clips to the LINE BOX rather than the glyphs,
   so a tight line-height shears the tails off any y, g or p. */
.gold {
  background: linear-gradient(94deg, var(--gold-bright), var(--gold) 48%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: .09em;
  line-height: 1.04;
}

/* ── type ───────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); margin: 0; font-weight: 700; }
h1 { letter-spacing: -.035em; line-height: .96; }
h2 { font-size: clamp(22px, 3.2vw, 31px); letter-spacing: -.022em; line-height: 1.16; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.kick {
  font-family: var(--font-display);
  font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-subtle); margin-bottom: clamp(18px, 2.6vw, 26px);
}

/* ── chrome ─────────────────────────────────────────────────── */
.nav { border-bottom: 1px solid var(--line); }
.nav--over { position: absolute; top: 0; left: 0; right: 0; z-index: 4; border-bottom: 0; }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 1.6vw, 17px); letter-spacing: -.01em;
  display: flex; align-items: center; gap: var(--s-2);
}
.navlinks {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px);
  font-size: 13.5px; color: rgba(242,242,250,.68);
}
.navlinks .is-cta { color: var(--gold); font-weight: 600; }
@media (max-width: 620px) { .navlinks > :not(.is-cta) { display: none; } }

/* ── site footer ─────────────────────────────────────────────
   Markup comes from _app/footer.js, which is the single owner. Nothing
   here is page-specific: the same footer renders on index, groups and
   mastery, so any rule that needs a page name is in the wrong file.

   .sitefoot__in is the OLD one-line footer, kept only because
   #legacy-landing still contains markup that uses it. It goes with that
   block in Phase 4.                                                   */
.sitefoot { border-top: 1px solid var(--line); margin-top: var(--s-9);
  background: linear-gradient(180deg, transparent, var(--surface)); }
.sitefoot__in {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-5) 0; font-size: 12.5px; color: var(--fg-subtle);
  flex-wrap: wrap; gap: var(--s-3);
}

.sitefoot__charter { padding: var(--s-7) var(--s-5) var(--s-6); }

.sitefoot__mark { display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; justify-content: center; text-align: center; }
.foot-crest { width: 26px; height: auto; flex: none; }
.sitefoot__mark b { font-family: var(--font-display); font-size: var(--t-md);
  color: var(--fg); letter-spacing: .01em; }
.sitefoot__mark i { font-style: normal; color: var(--fg-subtle);
  font-size: var(--t-sm); }

/* Three columns that become one on a phone. auto-fit rather than a fixed
   count so adding a fourth column never needs a new breakpoint. */
.sitefoot__cols { display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sitefoot__col { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-2); }
.sitefoot__head { font-family: var(--font-display); font-size: 11px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--s-1); font-weight: 700; }
.sitefoot__col a { color: var(--fg-muted); text-decoration: none;
  font-size: var(--t-sm); line-height: 1.9; }
.sitefoot__col a:hover { color: var(--gold); }
.sitefoot__col a.is-here { color: var(--fg); }
.sitefoot__note { color: var(--fg-subtle); font-size: 12.5px; margin: 0 0 var(--s-2);
  line-height: var(--lh-body); }

.sitefoot__seal { display: flex; align-items: center; justify-content: center;
  gap: var(--s-2); color: var(--fg-faint); font-size: 12px; }

/* ── document pages (privacy, terms) ─────────────────────────
   One measure, generous leading, nothing clever. These are pages people
   read when they are already slightly annoyed, so legibility beats
   personality. The heraldic trim is limited to a single .hrule under the
   title; a wax seal on a privacy notice reads as a joke. */
.doc { max-width: 68ch; padding-top: var(--s-8); padding-bottom: var(--s-9); }
.doc__title { font-family: var(--font-display); font-size: var(--t-2xl);
  color: var(--fg); margin: 0; line-height: var(--lh-tight); }
.doc__meta { color: var(--fg-faint); font-size: 12.5px; margin: var(--s-2) 0 0; }
.doc__lede { color: var(--fg-muted); font-size: var(--t-md);
  line-height: var(--lh-body); margin: 0 0 var(--s-6); }
.doc h2 { font-family: var(--font-display); font-size: var(--t-lg);
  color: var(--gold); margin: var(--s-7) 0 var(--s-3); line-height: var(--lh-snug); }
.doc h3 { font-family: var(--font-display); font-size: var(--t-base);
  color: var(--fg); margin: var(--s-5) 0 var(--s-2); }
.doc p, .doc li { color: var(--fg-muted); line-height: 1.75;
  font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.doc ul { margin: 0 0 var(--s-4); padding-left: 1.2em; }
.doc b { color: var(--fg); font-weight: 600; }
.doc a { color: var(--gold); }

/* ── contact dialog ──────────────────────────────────────────
   Markup from _app/contact.js. Named fc-* rather than modal-* because
   style.css owns .modal-card and .modal-close with the pre-rebuild
   treatment; borrowing those classes would import that look wholesale. */
.fc-modal { position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: var(--s-4);
  background: rgba(4, 4, 10, .72); backdrop-filter: blur(3px); }
.fc-card { position: relative; width: min(460px, 100%);
  max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-gold); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5); box-shadow: var(--shadow-3); }
.fc-x { position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--fg-subtle); font-size: 22px; line-height: 1; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-sm); }
.fc-x:hover { color: var(--fg); background: var(--surface-3); }
.fc-lede { color: var(--fg-muted); font-size: var(--t-sm);
  line-height: var(--lh-body); margin: 0 0 var(--s-5); }
.fc-label { display: block; font-size: 11px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--fg-subtle); margin: var(--s-4) 0 var(--s-2);
  font-family: var(--font-display); }
.fc-field { width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; font-family: var(--font-body); font-size: var(--t-sm); }
.fc-field:focus { outline: none; border-color: var(--gold-line);
  box-shadow: 0 0 0 3px var(--gold-wash); }
textarea.fc-field { resize: vertical; min-height: 110px; line-height: var(--lh-body); }
.fc-error { color: var(--bad-ink); font-size: 12.5px; min-height: 16px;
  margin: var(--s-3) 0 0; }
#fc-send { width: 100%; margin-top: var(--s-3); }
.fc-fine { color: var(--fg-faint); font-size: 11.5px; margin: var(--s-4) 0 0;
  text-align: center; line-height: var(--lh-body); }
.fc-fine a { color: var(--fg-subtle); }
.fc-done { display: flex; align-items: center; gap: var(--s-3);
  color: var(--fg-muted); font-size: var(--t-sm); line-height: var(--lh-body);
  margin: 0; padding: var(--s-4) 0; }
.fc-done b { color: var(--fg); }

/* ── buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 14.5px; padding: 14px 26px; border-radius: 11px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-press));
  color: var(--on-gold);
  box-shadow: 0 8px 28px var(--gold-glow);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 34px var(--gold-glow); }
.btn--ghost {
  background: rgba(255,255,255,.05); color: rgba(242,242,250,.86);
  font-weight: 500; border: 1px solid var(--line-strong); box-shadow: none;
}
.btn--ghost:hover { box-shadow: none; border-color: var(--gold-line); }
.btn--sm { font-size: 12.5px; padding: 10px 18px; border-radius: var(--r-sm); }

/* ── the shield ─────────────────────────────────────────────────
   One component, four jobs: category chip in the quiz, results
   breakdown, standard on the homepage, mastery crest on the Royal
   Record. The SVG path lives in the markup; this styles its wrapper. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: var(--t-xs);
  letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  padding: 6px 13px 6px 9px; border-radius: var(--r-pill); border: 1px solid;
}
.standard {
  border: 1px solid; border-radius: 13px; text-align: center;
  padding: clamp(14px, 2.2vw, 22px) var(--s-3);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.standard svg { margin: 0 auto var(--s-3); }
.standard b { font-family: var(--font-display); font-weight: 600; display: block; line-height: 1.3; }
.standard i { font-style: normal; display: block; font-size: var(--t-xs);
  color: var(--fg-subtle); margin-top: 5px; }

/* ── quiz ───────────────────────────────────────────────────── */
.segs { display: flex; gap: var(--s-1); }
.seg  { height: 4px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.09); }
.seg--hit  { background: var(--ok); }
.seg--miss { background: var(--bad); }
.seg--now  { background: var(--gold); }

.question {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.9vw, 29px); line-height: 1.3; letter-spacing: -.015em;
}

.opt {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; border-radius: var(--r); margin-bottom: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 15.5px; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.opt:hover { border-color: var(--gold-line); background: var(--surface-3); }
.opt__key  { font-family: var(--font-display); font-size: var(--t-xs);
  color: var(--fg-subtle); width: 14px; flex: none; }
.opt__mark { margin-left: auto; font-weight: 700; font-size: 15px; }
.opt--right { background: var(--ok-wash);  border-color: var(--ok-line);  color: var(--ok-ink); }
.opt--wrong { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad-ink); }
.opt--dim   { opacity: .36; }
.opt--right:hover, .opt--wrong:hover, .opt--dim:hover { background: inherit; }

/* ── cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(14px, 2vw, 20px);
}
.card__title {
  font-family: var(--font-display); font-size: var(--t-xs);
  letter-spacing: .17em; text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: var(--s-3);
  display: flex; justify-content: space-between; align-items: center;
}
.card__title b { color: var(--gold); font-weight: 600; }

/* ── heraldic trim ──────────────────────────────────────────────
   Structural, not decorative: a rule, a heading stroke, a seal, a
   corner tick. The moment one of these reads as ornament it comes out. */
.hrule { display: flex; align-items: center; gap: var(--s-3); margin: clamp(22px,3vw,32px) 0; }
.hrule::before, .hrule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.hrule i {
  width: 7px; height: 7px; flex: none; transform: rotate(45deg);
  border: 1px solid var(--gold-line); background: var(--gold-wash);
}

.hhead {
  font-family: var(--font-display); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle);
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: clamp(16px, 2.4vw, 24px);
}
.hhead::before { content: ""; width: 18px; height: 2px; background: var(--gold);
  flex: none; border-radius: 1px; }

.seal {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  /* Wax, lit from the upper left. Literal values: this is a material, not a token. */
  background: radial-gradient(circle at 34% 30%, #7b1f2b, #4e1119);
  color: #f0cdd2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.seal--gold { background: radial-gradient(circle at 34% 30%, var(--gold), #8a6c18); color: #1a1405; }
.seal--ok   { background: radial-gradient(circle at 34% 30%, #2f7f5f, #13503a); color: var(--ok-ink); }

.charter { position: relative; }
.charter::before, .charter::after {
  content: ""; position: absolute; width: 11px; height: 11px;
  border-color: var(--gold-line); border-style: solid; pointer-events: none;
}
.charter::before { top: 7px; left: 7px;     border-width: 1px 0 0 1px; }
.charter::after  { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }

/* ── the scene ──────────────────────────────────────────────────
   The castle backdrop. Used on the public hero and the member hero and
   nowhere else: atmosphere for arrival and reward, not wallpaper. */
.scene { position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--scene-sky), var(--scene-mid) 55%, var(--scene-low)); }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,12,.10), rgba(5,5,12,.45) 52%, rgba(7,7,15,.96)); }
.scene__in { position: relative; z-index: 3; width: 100%; }

/* ── the streak grid ────────────────────────────────────────── */
.grid30 { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.day {
  width: clamp(14px, 2.1vw, 22px); height: clamp(14px, 2.1vw, 22px);
  border-radius: var(--s-1); background: var(--fg-faint);
}
.day--played { background: var(--ok); opacity: .82; }
.day--missed { background: rgba(248,113,113,.26); }
.day--today  { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── category identity ──────────────────────────────────────────
   Named hue-* and NOT cat-*: style.css already owns .cat-history and
   friends as the old category PILL, complete with its own background.
   Putting that class on the explanation to carry a colour also brought
   the pill's amber fill with it, which is how a rule meant to draw a
   2px left border ended up drawing a tinted box.

   One class per category, setting two custom properties. Everything
   that needs to be "the colour of Geography" reads --hue and --hue-ink
   rather than hardcoding a hex, so the shield, the chip, the
   explanation rule and the results breakdown can never disagree.

   --hue is deliberately NOT called --cat-something: tokens.css already
   owns --cat-history and friends as values, and a local that looked like
   one of those would be read as a value by the next person.

   quiz.js only has to put the right class on the element. It never
   names a colour. */
.hue-history   { --hue: var(--cat-history);   --hue-ink: #f0c070; }
.hue-sports    { --hue: var(--cat-sports);    --hue-ink: #86c2ef; }
.hue-music     { --hue: var(--cat-music);     --hue-ink: #c6a6ea; }
.hue-geography { --hue: var(--cat-geography); --hue-ink: #6fd8e4; }
.hue-science   { --hue: var(--cat-science);   --hue-ink: #7fd9a9; }
.hue-default   { --hue: var(--cat-default);   --hue-ink: var(--fg-muted); }

.chip--cat {
  color: var(--hue-ink);
  border-color: color-mix(in srgb, var(--hue) 40%, transparent);
  background: color-mix(in srgb, var(--hue) 8%, transparent);
}
/* Keyed off --hue, NOT off .chip--cat. These were scoped to the chip, so
   the same shield used as a standard on the homepage or a crest on the
   Royal Record came out with no fill and no stroke at all: invisible, and
   invisible in a way that looks like a layout bug rather than a missing
   rule. The shield is one component and must style itself wherever it is
   used. */
.shield-fill { fill: color-mix(in srgb, var(--hue, var(--gold)) 28%, transparent); }
.shield-line { stroke: var(--hue, var(--gold)); }

/* ── the reveal ─────────────────────────────────────────────── */
.verdict { display: flex; align-items: baseline; gap: 11px; margin: 26px 0 14px; flex-wrap: wrap; }
.verdict__big { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.6vw, 25px); letter-spacing: -.02em; }
.verdict__sub { font-size: 14px; color: var(--fg-muted); }
.verdict--right .verdict__big { color: var(--ok); }
.verdict--wrong .verdict__big { color: var(--bad); }

.why {
  border-left: 2px solid var(--hue, var(--gold));
  padding-left: 18px; max-width: 44em;
  font-size: 15px; line-height: 1.72; color: rgba(242,242,250,.86);
}

.hook {
  margin-top: var(--s-5); max-width: 44em;
  background: var(--gold-wash); border: 1px solid var(--gold-line);
  border-radius: 13px; padding: 16px 18px;
  font-size: 14px; line-height: 1.65; color: #f2e4bd;
}
.hook b {
  font-family: var(--font-display); display: block;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px; font-weight: 600;
}

/* ── quiz chrome ────────────────────────────────────────────── */
.quizbar { border-bottom: 1px solid var(--line); }
.quizbar__in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.quizmeta { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin: var(--s-6) 0 var(--s-5); }
.quizcount { font-family: var(--font-display); font-size: var(--t-xs);
  letter-spacing: .14em; color: var(--fg-subtle); }

/* Options stack full width. They were a grid when they were short labels;
   the option-length standard in CONTENT-STANDARDS.md means they are now
   sentences, and two sentences side by side is unreadable. */
.options-grid { display: block; }
.opt__text { flex: 1; min-width: 0; }

/* A <button> sizes to its content even as a flex container, so options
   came out at whatever width their text needed — 371px of a 660px column,
   ragged down the page. Block-level width is not inherited by buttons the
   way it is by divs, and this is the line that would have been easy to
   miss and hard to spot later. */
.opt { width: 100%; text-align: left; font-family: inherit; color: inherit; }

/* The quiz screen's own vertical rhythm. The old style.css centred this
   with rules tied to .question-card, which no longer exists.

   NO `display` HERE. It used to say `display: block`, and because
   #screen-quiz.screen is an id selector it outranked style.css's
   `.screen { display: none }` in every state — so the quiz screen was
   never hidden. Clicking "See results" added .active to #screen-results
   as designed, but the quiz stayed on the page above it and the results
   read as a continuation of the last question instead of a screen of
   their own.

   Visibility belongs to the .screen / .screen.active pair and to nothing
   else. This rule owns spacing and direction, never display.

   style.css turns this screen into a flex container when active
   (`#screen-quiz.active { display: flex }`). That was written for the old
   single-child layout; the rebuilt screen has three children, so without
   a direction they lay out in a row. Set the direction, not the display —
   this rule then applies in both states and changes visibility in
   neither. */
#screen-quiz.screen { flex-direction: column; padding: 0 0 clamp(60px,12vh,120px); }
#screen-quiz .segs   { margin-top: clamp(26px,5vh,46px); }
#screen-quiz .question { margin: 0 0 clamp(22px,3.5vh,32px); }
#screen-quiz .feedback-box { margin-top: clamp(20px,3vh,28px); }
.streak-badge { font-family: var(--font-display); font-size: 13px; color: var(--gold);
  display: inline-flex; align-items: center; gap: 6px; }

/* style.css gave .feedback-box a border and padding because the old reveal
   was a panel inside a card. The new one is not a container at all — the
   verdict, the rule and the hook each carry their own treatment — so the
   inherited chrome draws a stray box around the explanation.

   Resetting here rather than editing style.css: that file is deleted at
   the end of Phase 3 and editing it now is work that gets thrown away. */
#screen-quiz .feedback-box {
  border: 0;
  background: none;
  padding: 0;
  margin-top: clamp(20px, 3vh, 28px);
}

/* ══════════════════════════════════════════════════════════════
   THE TWO HOMES
   Shared hero, different content. Signing in must not feel like a
   different product, so the scene, nav, type scale and gold
   treatment are identical and only the copy changes.
   ══════════════════════════════════════════════════════════════ */
/* The scene is drawn 1200x560 and slices with the BOTTOM anchored, so a
   shorter viewport crops the top. Anything placed high in the artwork
   climbs into the nav as the hero gets shorter — which is what the moon
   did. Fixed in the artwork by sitting it lower, not here. */
.home-hero { min-height: clamp(430px, 66vh, 580px); display: flex; align-items: flex-end; }
.home-hero--member { min-height: clamp(380px, 56vh, 500px); }
.home-hero__in { padding-bottom: clamp(34px, 6vh, 58px); }
.home-hero__h1 { font-size: clamp(42px, 8.2vw, 84px); text-shadow: 0 2px 40px rgba(0,0,0,.55); }
.home-hero__h1 em { font-style: normal; display: block; }
.memhero__h1 { font-size: clamp(34px, 6vw, 62px); }
.home-hero__lede { font-size: clamp(14.5px, 1.7vw, 17px); color: rgba(242,242,250,.76);
  margin: 20px 0 26px; max-width: 30em; line-height: 1.6; }
.home-hero__row { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }
.home-hero__tick { font-size: 12.5px; color: rgba(242,242,250,.44); margin-top: 15px; }

.memhero { display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(18px,4vw,50px); flex-wrap: wrap; }
.memhero__streak { text-align: right; flex: none; padding-bottom: 6px; }
.memhero__n { font-family: var(--font-display); font-weight: 700; line-height: .86;
  font-size: clamp(44px,6.6vw,70px); letter-spacing: -.04em; }
.memhero__t { font-family: var(--font-display); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(242,242,250,.5); margin-top: 8px; }

/* the three numbers */
.strip { border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--line);
  background: var(--gold-wash); }
.strip__in { display: grid; grid-template-columns: repeat(3,1fr); }
.strip__c { padding: clamp(18px,3vw,26px) 0; border-right: 1px solid var(--line); }
.strip__c:last-child { border-right: 0; }
.strip__c:not(:first-child) { padding-left: clamp(14px,3vw,30px); }
.strip__n { font-family: var(--font-display); font-weight: 700; color: var(--gold);
  font-size: clamp(24px,3.4vw,34px); line-height: 1; }
.strip__l { font-size: 12.5px; color: var(--fg-subtle); margin-top: 7px; line-height: 1.4; }

.home-sec { padding: clamp(44px,7vw,78px) 0; }
.standards { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(8px,1.4vw,14px); }
@media (max-width: 700px) { .standards { grid-template-columns: repeat(2,1fr); } }

.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.6vw,30px); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 2px solid var(--gold-line); padding-top: 18px; }
.step__n { font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--gold); letter-spacing: .14em; margin-bottom: 10px; }
.step__t { font-family: var(--font-display); font-size: 17px; font-weight: 600;
  margin-bottom: 8px; line-height: 1.25; }
.step__s { font-size: 13.5px; color: var(--fg-muted); line-height: 1.62; }

.closer { border-top: 1px solid var(--line);
  background: radial-gradient(900px 300px at 50% 120%, var(--gold-glow), transparent 70%); }
.closer__in { text-align: center; padding: clamp(48px,8vw,86px) 0; }
.closer__in h2 { max-width: 16em; margin: 0 auto 16px; }
.closer__in p { font-size: 14.5px; color: var(--fg-muted); max-width: 34em;
  margin: 0 auto 26px; line-height: 1.6; }

.grid30__legend { display: flex; justify-content: space-between; font-family: var(--font-display);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-subtle); margin-top: 10px; }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px,1.6vw,16px); }
@media (max-width: 700px) { .board { grid-template-columns: 1fr; } }
.board__wide { grid-column: 1 / -1; }
.card__note { font-size: 12.5px; color: var(--fg-subtle); line-height: 1.5; margin-top: 10px; }

.soon { border: 1px dashed rgba(212,175,55,.26); border-radius: var(--r);
  padding: clamp(14px,2vw,20px); }
.soon__row { display: flex; gap: clamp(14px,3vw,34px); flex-wrap: wrap; }
.soon__row > div { flex: 1; min-width: 200px; }
.soon__t { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.soon__s { font-size: 12.5px; color: var(--fg-muted); line-height: 1.55; }

/* record bars */
.rec { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; font-size: 13.5px; }
.rec:last-child { margin-bottom: 0; }
.rec__n { width: 94px; flex: none; color: var(--fg-muted); }
.rec__bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.rec__bar i { display: block; height: 100%; border-radius: 3px; background: var(--hue, var(--gold)); }
.rec__pc { width: 32px; text-align: right; font-family: var(--font-display);
  font-size: 12px; color: var(--fg-subtle); }

.daypill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-3);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 12.5px;
  font-family: var(--font-display); color: var(--fg-muted);
  margin: 0 6px 6px 0; border: 1px solid transparent; }
.daypill:hover { color: var(--gold); border-color: var(--gold-line); }

/* The legacy block must not take up space even though it is in the DOM. */
#legacy-landing { display: none !important; }