/* ============================================================================
 * grant-verdict.css — Eligibility Verdict + Instant Draft card (/grants/*)
 * Spec: docs/superpowers/specs/2026-05-29-eligibility-verdict-instant-draft-design.md
 *
 * Prefix: .gv-  ·  Mobile-first  ·  Reuses grant-page.css design tokens (--gp-*)
 * with local fallbacks so the card is self-contained if loaded standalone.
 * NOTE: never use --gp-mono for $ amounts (Atlas IBM-Plex-Mono ban). This card
 * uses no monospaced numerals.
 * ==========================================================================*/

:root {
  --gv-forest:       var(--gp-forest, #2d6a4f);
  --gv-forest-deep:  var(--gp-forest-deep, #1B4332);
  --gv-sienna:       var(--gp-sienna, #C4532B);
  --gv-sienna-hover: var(--gp-sienna-hover, #A3401F);
  --gv-cream:        var(--gp-cream, #FAF7F2);
  --gv-paper:        var(--gp-paper, #ffffff);
  --gv-ink:          var(--gp-ink, #1C1917);
  --gv-ink-2:        var(--gp-ink-2, #57534E);
  --gv-ink-3:        var(--gp-ink-3, #6B6560);
  --gv-line:         var(--gp-ink-5, #E7E5E4);
  --gv-green:        var(--gp-green, #15803d);
  --gv-green-bg:     var(--gp-green-bg, #dcfce7);
  --gv-amber:        var(--gp-amber, #b45309);
  --gv-amber-bg:     var(--gp-amber-bg, #fef3c7);
  --gv-red:          var(--gp-red, #dc2626);
  --gv-red-bg:       var(--gp-red-bg, #fee2e2);
  --gv-display:      var(--gp-display, 'Fraunces', Georgia, serif);
  --gv-body:         var(--gp-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --gv-r:            var(--gp-r-lg, 12px);
  --gv-r-sm:         var(--gp-r, 8px);
  --gv-sh:           var(--gp-sh-md, 0 4px 12px rgba(28, 25, 23, 0.06));
}

/* ── Card shell ──────────────────────────────────────────────────────── */
.gv-card {
  box-sizing: border-box;
  margin: 20px 0 28px;
  background: var(--gv-paper);
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r);
  box-shadow: var(--gv-sh);
  /* Sienna accent rail keeps the card visually distinct from the forest
     premium chapters below — clearly a FREE hook, not a paywall. */
  border-left: 4px solid var(--gv-sienna);
  overflow: hidden;
}
.gv-card *,
.gv-card *::before,
.gv-card *::after { box-sizing: border-box; }

.gv-inner {
  padding: 22px 20px;
}

/* ── Intro ───────────────────────────────────────────────────────────── */
.gv-eyebrow {
  font-family: var(--gv-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gv-sienna);
  margin: 0 0 8px;
}
.gv-headline {
  font-family: var(--gv-display);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--gv-ink);
  margin: 0 0 8px;
}
.gv-sub {
  font-family: var(--gv-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gv-ink-2);
  margin: 0 0 16px;
}
/* Intro v2 (2026-08-28) — the inline first question that replaced the reveal
   button. Reuses the form's .gv-label / .gv-input styling. */
.gv-q1 { max-width: 460px; margin: 6px 0 12px; text-align: left; }
.gv-q1 .gv-label { font-weight: 700; }
/* The select IS the primary action here (Codex round: it read as a quiet form
   field) — give it CTA-grade presence without pretending to be a button. */
.gv-q1 .gv-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border: 1.5px solid #D8A28A;
  /* background-COLOR only: the base select rule paints its chevron via
     background-image (appearance:none), and the shorthand wiped it. */
  background-color: #fff;
  cursor: pointer;
}
.gv-q1 .gv-input:hover { border-color: #C4532B; }
.gv-q1 .gv-input:focus { border-color: #C4532B; outline: 2px solid rgba(196,83,43,.25); outline-offset: 1px; }

.gv-microtrust {
  font-family: var(--gv-body);
  font-size: 12.5px;
  color: var(--gv-ink-3);
  margin: 12px 0 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.gv-btn {
  font-family: var(--gv-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border: none;
  border-radius: var(--gv-r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 48px;           /* >=44px touch target */
  padding: 13px 22px;
  transition: background-color 0.15s ease, transform 0.08s ease;
}
.gv-btn:active { transform: translateY(1px); }
.gv-btn--primary {
  background: var(--gv-sienna);
  color: #fff;
  width: 100%;
}
.gv-btn--primary:hover { background: var(--gv-sienna-hover); }
.gv-btn--secondary {
  background: var(--gv-forest);
  color: #fff;
  width: 100%;
}
.gv-btn--secondary:hover { background: var(--gv-forest-deep); }
/* ★ G3 — THE SECOND ACT'S TREATMENT. Applied by rmUpgrade to the draft door's submit once the
   reveal has mounted a filled roadmap CTA below it, so the card carries exactly one filled
   press at a time. Same size, same weight, same position: only the fill steps back, which is
   what makes it read as a choice with an order rather than as two equal buttons.
   ⚠ The border is INSIDE the box (border-box on .gv-btn's padding), so swapping the fill for
   an outline moves nothing on the page. */
.gv-btn--outline {
  background: var(--gv-paper);
  color: var(--gv-forest-deep);
  border: 1.5px solid var(--gv-forest);
  width: 100%;
}
.gv-btn--outline:hover { background: var(--gv-forest-08); border-color: var(--gv-forest-deep); }
.gv-btn--text {
  background: transparent;
  color: var(--gv-ink-3);
  font-weight: 500;
  min-height: 44px;          /* a11y touch target */
  padding: 10px 4px;
  width: auto;
}
.gv-btn--text:hover { color: var(--gv-ink); text-decoration: underline; }

/* ── Mini-form ───────────────────────────────────────────────────────── */
.gv-form { display: flex; flex-direction: column; gap: 14px; }
.gv-field { display: flex; flex-direction: column; gap: 6px; }
.gv-label {
  font-family: var(--gv-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gv-ink);
}
.gv-input {
  font-family: var(--gv-body);
  font-size: 16px;            /* >=16px avoids iOS zoom-on-focus */
  color: var(--gv-ink);
  background: var(--gv-paper);
  border: 1.5px solid var(--gv-line);
  border-radius: var(--gv-r-sm);
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
}
select.gv-input {
  /* Custom chevron so the select doesn't look like a plain box. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
/* ★★ D5 (fix round 2) — ONE FOCUS INDICATOR, NOT TWO. Traced live before editing:
   a focused `select.gv-input` painted BOTH rings at once, in two different brand colours —
   a 2px forest outline at 2px offset (`.gv-card .gv-input:focus-visible`, added in a later
   round) on top of a sienna border plus a 3px sienna glow (this rule, from an earlier one).
   `:focus-visible` matches a select on POINTER focus too in Chromium, so it was not an
   edge case: every founder who touched the form saw a green ring around an orange ring.
   The forest ring is the card's own focus language (buttons, links and rows all use it), so
   it is the one that stays; this rule keeps only a border tint, in the SAME colour, so the
   two states can never disagree. Deleting the border change instead would leave a
   mouse-focused control with no in-box feedback at all. */
.gv-input:focus {
  outline: none;
  border-color: var(--gv-forest);
  box-shadow: none;
}
.gv-input--error { border-color: var(--gv-red); }
.gv-input--error:focus { border-color: var(--gv-red); }
.gv-err {
  font-family: var(--gv-body);
  font-size: 13px;
  color: var(--gv-red);
  margin: 6px 0 0;
}
.gv-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Verdict result ──────────────────────────────────────────────────── */
.gv-card--result .gv-inner { padding-bottom: 18px; }
.gv-verdict {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 16px;
  border-radius: var(--gv-r-sm);
  margin: 0 0 4px;
  outline: none;
}
.gv-verdict__icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.gv-verdict__status {
  font-family: var(--gv-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--gv-ink);
}
.gv-verdict__reason {
  font-family: var(--gv-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--gv-ink-2);
  margin: 0;
}
.gv-verdict__note {
  font-family: var(--gv-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gv-ink-3);
  margin: 8px 0 0;
}
.gv-verdict--yes   { background: var(--gv-green-bg); }
.gv-verdict--yes  .gv-verdict__icon { background: var(--gv-green); }
.gv-verdict--maybe { background: var(--gv-amber-bg); }
.gv-verdict--maybe .gv-verdict__icon { background: var(--gv-amber); }
.gv-verdict--no    { background: var(--gv-red-bg); }
.gv-verdict--no   .gv-verdict__icon { background: var(--gv-red); }

.gv-read {
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gv-ink-2);
  margin: 12px 0 0;
  padding: 0 2px;
}
.gv-recheck { margin-top: 8px; }

/* ── Instant Draft fake-door ─────────────────────────────────────────── */
.gv-draft {
  margin-top: 18px;
  padding: 18px 16px;
  background: var(--gv-cream);
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r-sm);
}
.gv-draft__title {
  font-family: var(--gv-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--gv-ink);
  margin: 0 0 6px;
}
.gv-draft__lead {
  font-family: var(--gv-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--gv-ink-2);
  margin: 0 0 14px;
}
.gv-draft__form { display: flex; flex-direction: column; gap: 10px; }
/* v2 (2026-06-10): email + optional-website stacked form. Stays a column at
   every width (the desktop row override below is scoped away from it). */
.gv-draft__form--v2 { gap: 12px; }
.gv-label__opt { font-weight: 400; color: var(--gv-ink-3); }
.gv-draft__fine {
  font-family: var(--gv-body);
  font-size: 12.5px;
  color: var(--gv-ink-3);
  margin: 12px 0 0;
}
/* The "No website?" escape (2026-07-30). A <button>, not a link — it changes state on this
   page rather than navigating, and a link that does not navigate is the dead-control shape.
   ⚠ 44px tap target via padding + a negative inline margin, so it clears the touch minimum
   without pushing the fine-print line off its own baseline. */
.gv-draft__nosite {
  font: inherit;
  color: var(--gv-accent, #1B4332);
  background: none;
  border: 0;
  padding: 12px 6px;
  margin: -12px -6px -12px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gv-draft__nosite:hover { color: var(--gv-ink-1); }
.gv-draft__nosite:focus-visible { outline: 2px solid var(--gv-accent, #1B4332); outline-offset: 2px; border-radius: 4px; }
.gv-draft--alt { text-align: left; }
.gv-draft--alt .gv-draft__lead { margin-bottom: 12px; }

/* ── Confirmation ────────────────────────────────────────────────────── */
.gv-confirm { text-align: center; padding-top: 26px; padding-bottom: 26px; }
.gv-confirm__check {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gv-green);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.gv-confirm__title {
  font-family: var(--gv-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--gv-ink);
  margin: 0 0 8px;
  outline: none;
}
.gv-confirm__body {
  font-family: var(--gv-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--gv-ink-2);
  margin: 0 auto;
  max-width: 420px;
}
/* 2026-07-28 (Khalid, live test): the card's top half is centred and this half
   was text-align:left, so the confirmation read as two different cards stuck
   together. The block centres now; only the bullet LIST stays left-aligned
   (centred bullets are unreadable) and is centred as an inline block instead. */
.gv-confirm__nudge {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--gv-line);
  text-align: center;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.gv-confirm__nudge-lead {
  font-family: var(--gv-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gv-ink);
  margin: 0 0 8px;
}
.gv-confirm__nudge-list {
  font-family: var(--gv-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gv-ink-2);
  text-align: left;
  display: inline-block;
  margin: 0 0 16px;
  padding-left: 20px;
}

/* ── Desktop / tablet refinements ────────────────────────────────────── */
@media (min-width: 600px) {
  .gv-inner { padding: 28px 28px; }
  .gv-headline { font-size: 27px; }
  /* ⚠⚠ EVERY BUTTON VARIANT MUST BE IN THIS LIST. `.gv-btn--outline` was added in fix round 2
     and missing here, and the miss was invisible in the rule that defines it: the variant
     inherits `width: 100%` from its own declaration, and the draft row's
     `.gv-draft__form .gv-btn { flex: 0 0 auto }` then reads that width as its basis and
     refuses to shrink — so "Write my opening" ate the row and the website input rendered as a
     30px sliver, on the QUALIFY page, at every desktop width. Caught by a screenshot; no
     assertion in the feature could see it. (The repo's standing rule: adding a member to a
     category means finding every list that enumerates the category by name.) */
  .gv-btn--primary, .gv-btn--secondary, .gv-btn--outline { width: auto; min-width: 240px; }
  /* ⚠ The draft row is deliberately NOT `align-items: stretch` (2026-07-30). Stretch
     makes the button match the tallest sibling, so the moment anything taller than a
     bare input sat next to it — a labelled `.gv-field`, an error line — the button
     rendered as an oversized slab. `center` ties its height to its own padding, which
     is the only thing that should decide it. `min-width` is dropped in the row too:
     240px is right for a full-width stacked button and far too wide inline, where it
     crowded the input it is meant to sit beside. */
  .gv-draft__form { flex-direction: row; align-items: center; gap: 10px; }
  .gv-draft__form .gv-input { flex: 1 1 auto; min-width: 0; }
  .gv-draft__form .gv-btn { flex: 0 0 auto; white-space: nowrap; min-width: 0; }
  /* v2 keeps the stacked column on desktop (two labeled fields don't fit a row) */
  .gv-draft__form--v2 { flex-direction: column; align-items: stretch; }
  .gv-draft__form--v2 .gv-btn { align-self: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════
 * FIT PANEL (Variant A v2, 2026-06-11) — GCAB `fitpanel` treatment styles.
 * Adapted from the founder-approved mockup variant-a-fit-panel-v2.html
 * (its `va2-` classes renamed to `gv-fp-`). Mono is used for ONE document
 * label only, never $ amounts (Atlas IBM-Plex-Mono ban).
 * ══════════════════════════════════════════════════════════════════════ */

:root {
  --gv-ink-4:      var(--gp-ink-4, #D6D3D1);
  --gv-cream-dark: #ede8de;
  --gv-forest-08:  rgba(45, 106, 79, 0.08);
  /* The same forest, one step up, for a hairline that has to read as an edge against the
     0.08 fill it encloses (fix round 3: the reveal's pivot band). Not a new colour. */
  --gv-forest-18:  rgba(45, 106, 79, 0.18);
  --gv-mono:       var(--gp-mono, 'IBM Plex Mono', SFMono-Regular, Menlo, monospace);
}

/* ── Shared panel refinements ── */
.gv-fp { position: relative; }
.gv-fp .gv-headline { letter-spacing: -0.012em; }
.gv-fp .gv-sub { font-size: 15.5px; max-width: 58ch; }
.gv-fp .gv-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .08s ease; }
.gv-card .gv-btn:focus-visible,
.gv-card a:focus-visible,
.gv-card .gv-input:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 2px; border-radius: 6px; }
.gv-fp-compass { position: absolute; top: -6px; right: -4px; width: 118px; height: 118px; opacity: .05; pointer-events: none; }
@media (max-width: 599px) { .gv-fp-compass { width: 82px; height: 82px; top: -4px; right: -2px; } }
.gv-fp-notice {
  font-family: var(--gv-body);
  font-size: 13.5px; line-height: 1.5;
  color: var(--gv-amber);
  background: var(--gv-amber-bg);
  border: 1px solid #f0d9a8;
  border-radius: var(--gv-r-sm);
  padding: 10px 12px;
  margin: 0 0 14px;
}

/* ── State 1: invitation ── */
.gv-fp-url-row { display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; }
.gv-fp-input-wrap { position: relative; flex: 1 1 auto; }
.gv-fp-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gv-ink-3); pointer-events: none; }
.gv-fp-input-wrap .gv-input { padding-left: 42px; }
@media (min-width: 600px) {
  .gv-fp-url-row { flex-direction: row; }
  .gv-fp-url-row .gv-btn { flex: 0 0 auto; white-space: nowrap; width: auto; min-width: 0; }
}
.gv-fp-alt { font: 14px/1.5 var(--gv-body); color: var(--gv-ink-3); margin: 2px 0 0; }
/* 44px touch targets (negative margin keeps the visual rhythm of the mockup) */
.gv-fp-alt a { color: var(--gv-forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -8px 0; }
.gv-fp-alt a:hover { color: var(--gv-forest-deep); }
.gv-fp-get { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gv-line); }
.gv-fp-get__label { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px var(--gv-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gv-ink-3); margin: 0 0 12px; }
.gv-fp-get__label svg { color: var(--gv-sienna); }
.gv-fp-get__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gv-fp-get__list li { display: flex; gap: 11px; align-items: flex-start; font: 14px/1.5 var(--gv-body); color: var(--gv-ink-2); }
.gv-fp-get__list b { color: var(--gv-ink); font-weight: 600; }
.gv-fp-get__icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--gv-cream); border: 1px solid var(--gv-line); display: inline-flex; align-items: center; justify-content: center; color: var(--gv-forest); }
@media (min-width: 700px) {
  .gv-fp-get__list { flex-direction: row; gap: 22px; }
  .gv-fp-get__list li { flex: 1 1 0; }
}
.gv-fp .gv-microtrust { margin-top: 14px; }
.gv-fp-invite2 .gv-fp-url-row { margin-top: 2px; }

/* ── Scanning state ── */
.gv-fp-scan-head { overflow-wrap: anywhere; }
.gv-fp-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.gv-fp-step { display: flex; gap: 12px; align-items: center; padding: 8px 0; font: 14.5px/1.5 var(--gv-body); color: var(--gv-ink-2); }
.gv-fp-step__icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.gv-fp-step--done .gv-fp-step__icon { background: var(--gv-green-bg); color: var(--gv-green); }
.gv-fp-step--active { color: var(--gv-ink); font-weight: 600; }
.gv-fp-step--active .gv-fp-step__icon { border: 2.5px solid rgba(196, 83, 43, .22); border-top-color: var(--gv-sienna); animation: gvfpspin .9s linear infinite; }
.gv-fp-step--next { color: var(--gv-ink-3); }
.gv-fp-step--next .gv-fp-step__icon { border: 2px solid var(--gv-line); }
@keyframes gvfpspin { to { transform: rotate(360deg); } }
.gv-fp-progress { height: 4px; border-radius: 2px; background: var(--gv-cream-dark); margin: 14px 0 0; overflow: hidden; position: relative; }
.gv-fp-progress__bar { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 2px; background: var(--gv-sienna); animation: gvfpslide 1.5s ease-in-out infinite alternate; }
@keyframes gvfpslide { from { transform: translateX(-12%); } to { transform: translateX(176%); } }

/* ── State 2: gates (the honest evidence rows) ── */
.gv-fp-result-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.gv-fp-rescan { font: 600 13px var(--gv-body); color: var(--gv-ink-3); text-decoration: underline; text-underline-offset: 3px; padding: 13.5px 0; margin: -9.5px 0; }
.gv-fp-rescan:hover { color: var(--gv-ink); }
.gv-fp .gv-verdict--yes { border: 1px solid rgba(21, 128, 61, .16); }
.gv-fp .gv-verdict__status { font-size: 21px; }
.gv-fp-gates-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 18px 0 8px; }
.gv-fp-gates-title { font: 700 11.5px var(--gv-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gv-ink-3); }
.gv-fp-gates-count { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--gv-body); color: var(--gv-ink-2); }
.gv-fp-meter { display: inline-flex; gap: 3px; }
.gv-fp-meter i { width: 16px; height: 5px; border-radius: 3px; background: var(--gv-line); }
.gv-fp-meter i.is-pass { background: var(--gv-green); }
.gv-fp-meter i.is-check { background: var(--gv-amber); }
.gv-fp-meter i.is-fail { background: var(--gv-red); }
.gv-fp-gates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gv-fp-gate { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--gv-line); border-radius: 10px; background: var(--gv-paper); }
.gv-fp-gate__icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.gv-fp-gate--pass .gv-fp-gate__icon { background: var(--gv-green-bg); color: var(--gv-green); }
.gv-fp-gate--check { border-color: #f0d9a8; background: #FFFCF5; }
.gv-fp-gate--check .gv-fp-gate__icon { background: var(--gv-amber-bg); color: var(--gv-amber); }
.gv-fp-gate--fail { border-color: rgba(220, 38, 38, .35); background: #FFF7F7; }
.gv-fp-gate--fail .gv-fp-gate__icon { background: var(--gv-red-bg); color: var(--gv-red); }
.gv-fp-gate__body { flex: 1 1 auto; min-width: 0; }
.gv-fp-gate__name { display: block; font: 600 14.5px/1.4 var(--gv-body); color: var(--gv-ink); overflow-wrap: anywhere; }
.gv-fp-gate__why { display: block; font: 13.5px/1.5 var(--gv-body); color: var(--gv-ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.gv-fp-gate__src { flex: 0 0 auto; font: 700 10.5px var(--gv-body); letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; margin-top: 3px; }
.gv-fp-gate__src--site { background: var(--gv-green-bg); color: var(--gv-green); }
.gv-fp-gate__src--you { background: var(--gv-amber-bg); color: var(--gv-amber); }
@media (max-width: 599px) {
  .gv-fp-gate { flex-wrap: wrap; }
  .gv-fp-gate__body { flex: 1 1 calc(100% - 38px); }
  .gv-fp-gate__src { margin: 0 0 0 38px; }
}

/* ── State 2: the draft as a real document ── */
.gv-fp-paper { margin-top: 20px; background: var(--gv-cream); border: 1px solid var(--gv-line); border-radius: 12px; padding: 12px; }
@media (min-width: 600px) { .gv-fp-paper { padding: 16px 18px 18px; } }
.gv-fp-paper__head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 2px 2px 12px; }
.gv-fp-paper__title { font: 700 12px var(--gv-body); letter-spacing: .07em; text-transform: uppercase; color: var(--gv-sienna-hover); } /* sienna-hover: 4.5:1+ on cream (axe) */
.gv-fp-paper__meta { font: 12.5px var(--gv-body); color: var(--gv-ink-3); overflow-wrap: anywhere; }
.gv-fp-sheet { background: var(--gv-paper); border: 1px solid var(--gv-line); border-radius: 8px; box-shadow: 0 1px 3px rgba(28, 25, 23, .05), 0 10px 24px -14px rgba(28, 25, 23, .14); overflow: hidden; }
.gv-fp-sheet__chrome { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 16px; background: var(--gv-cream); border-bottom: 1px solid var(--gv-line); }
.gv-fp-sheet__doc { font: 500 10.5px var(--gv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gv-ink-3); }
.gv-fp-sheet__hold { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--gv-body); color: var(--gv-ink-3); white-space: nowrap; }
.gv-fp-sheet__body { padding: 18px 18px 0; }
@media (min-width: 600px) { .gv-fp-sheet__body { padding: 20px 26px 0; } }
.gv-fp-sheet__h { font: 600 19px var(--gv-display); color: var(--gv-ink); margin: 0 0 3px; }
.gv-fp-sheet__sub { font: 12.5px var(--gv-body); color: var(--gv-ink-3); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gv-cream-dark); overflow-wrap: anywhere; }
.gv-fp-sheet__textwrap { position: relative; max-height: 340px; overflow: hidden; }
@media (min-width: 600px) { .gv-fp-sheet__textwrap { max-height: 230px; } }
.gv-fp-sheet__text { font: 15.5px/1.75 var(--gv-display); color: var(--gv-ink); margin: 0; padding-bottom: 6px; }
.gv-fp-blur { filter: blur(4.5px); user-select: none; -webkit-user-select: none; }
.gv-fp-sheet__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--gv-paper) 82%); }
.gv-fp-sheet__next { display: flex; align-items: center; gap: 8px; padding: 10px 18px 14px; border-top: 1px dashed var(--gv-ink-4); font: 12.5px/1.5 var(--gv-body); color: var(--gv-ink-3); }
@media (min-width: 600px) { .gv-fp-sheet__next { padding: 10px 26px 15px; } }
.gv-fp-sheet__next svg { flex: 0 0 auto; }

/* ── State 2: the fork (calm two-option choice) ── */
.gv-fp-fork { margin-top: 20px; }
.gv-fp-fork__lead { font: 700 11.5px var(--gv-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gv-ink-3); margin: 0 0 10px; }
.gv-fp-fork__grid { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px) { .gv-fp-fork__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; } }
.gv-fp-opt { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--gv-line); border-radius: 10px; background: var(--gv-paper); }
.gv-fp-opt--free { border-color: rgba(196, 83, 43, .38); box-shadow: 0 1px 3px rgba(28, 25, 23, .04); }
.gv-fp-opt__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.gv-fp-opt__name { font: 600 17px var(--gv-display); color: var(--gv-ink); }
.gv-fp-opt__tag { font: 700 11px var(--gv-body); letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.gv-fp-opt--free .gv-fp-opt__tag { background: var(--gv-green-bg); color: var(--gv-green); }
.gv-fp-opt--premium .gv-fp-opt__tag { background: var(--gv-cream); color: var(--gv-ink-2); border: 1px solid var(--gv-line); }
.gv-fp-opt__desc { font: 13.5px/1.55 var(--gv-body); color: var(--gv-ink-2); margin: 0 0 14px; flex: 1 1 auto; }
.gv-fp-opt .gv-btn { width: 100%; min-width: 0; }
.gv-fp-btn-outline { background: transparent; color: var(--gv-forest); border: 1.5px solid var(--gv-forest); }
.gv-fp-btn-outline:hover { background: var(--gv-forest-08); }
.gv-fp-opt__fine { font: 12px var(--gv-body); color: var(--gv-ink-3); margin: 8px 0 0; text-align: center; }
.gv-fp-opt .gv-err { margin-top: 8px; }

/* ── Keep flow: inline email capture inside the free option ── */
.gv-fp-keep-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gv-fp-keep-form .gv-btn--text { align-self: flex-start; }

/* ── Keep flow: success state (replaces the fork) ── */
.gv-fp-success { padding: 18px 16px; border: 1px solid var(--gv-line); border-radius: 10px; background: var(--gv-cream); text-align: center; }
.gv-fp-success__check { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: var(--gv-green); color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gv-fp-success__title { font: 600 21px var(--gv-display); color: var(--gv-ink); margin: 0 0 6px; outline: none; }
.gv-fp-success__body { font: 14.5px/1.55 var(--gv-body); color: var(--gv-ink-2); margin: 0 auto 4px; max-width: 46ch; overflow-wrap: anywhere; }
.gv-fp-success__next { margin: 14px auto 0; max-width: 46ch; text-align: left; }
.gv-fp-success__next-lead { font: 700 11.5px var(--gv-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gv-ink-3); margin: 0 0 6px; }
.gv-fp-success__list { font: 14px/1.6 var(--gv-body); color: var(--gv-ink-2); margin: 0 0 14px; padding-left: 20px; }
.gv-fp-success .gv-btn { margin-top: 2px; }
.gv-fp-success__alt { font: 13px var(--gv-body); color: var(--gv-ink-3); margin: 12px 0 0; }
.gv-fp-success__alt a { color: var(--gv-forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gv-btn { transition: none !important; }
  .gv-btn:active { transform: none; }
  .gv-fp-step--active .gv-fp-step__icon { animation: none; border: 2.5px solid var(--gv-sienna); }
  .gv-fp-progress__bar { animation: none; width: 55%; }
}

/* ── Q2 (2026-07-02): instant verdict provenance + quiz cross-link ─────
   The provenance line tells a map/embed/Game-Plan visitor WHY the verdict
   rendered without a form; the quiz link row replaces the suppressed
   standalone #gp-assessment prompt (fit-box consolidation). */
.gv-provenance {
  font-family: var(--gv-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gv-ink-3);
  margin: 0 0 12px;
}
.gv-provenance__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gv-sienna);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 6px;
  vertical-align: 1px;
}
.gv-quizlink-row {
  font-family: var(--gv-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gv-ink-3);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--gv-line);
}
.gv-quizlink {
  color: var(--gv-sienna);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gv-quizlink:hover,
.gv-quizlink:focus-visible { color: var(--gv-ink); }
@media (max-width: 600px) {
  /* 44px tap target for the quiz cross-link on touch viewports — the
     negative margin cancels the visual layout shift from the padding. */
  .gv-quizlink { display: inline-block; padding: 13px 0; margin: -7px 0; }
}

/* ── 01 Map-Arrival Panel (2026-07-12) ─────────────────────────────────
 * Spec: docs/superpowers/specs/2026-07-12-postmap-incremental-track-design.md §01
 * Upgrades the qualify status block for gc_eligibility_profile carriers:
 * receipts + (tier-1) median + calm step line + dual offer. Collapse chip. */
.gv-arr { position: relative; background: linear-gradient(180deg, #e8f1ec 0%, var(--gv-paper) 140%); border: 1px solid #bfd8cc; border-radius: var(--gv-r); padding: 16px 40px 14px 16px; margin-bottom: 14px; }
.gv-arr__x { position: absolute; top: 6px; right: 6px; width: 42px; height: 42px; /* >=40px touch target (live-QA 2026-07-13) */ border: 1px solid var(--gv-line); background: var(--gv-paper); border-radius: 8px; color: var(--gv-ink-3); font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gv-arr__x:hover { color: var(--gv-ink); border-color: var(--gv-ink-3); }
.gv-arr__head { display: flex; align-items: flex-start; gap: 9px; padding-right: 16px; /* the ✕ is 42px at a 6px inset: the panel's 40px right padding left a phone-width headline running under it */ }
.gv-arr__ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--gv-forest); color: #fff; display: grid; place-items: center; font-size: 12px; margin-top: 2px; }
.gv-arr__h { font-family: var(--gv-display); font-weight: 600; font-size: 19px; line-height: 1.2; margin: 0; color: var(--gv-ink); }
.gv-arr__median { font-family: var(--gv-body); font-size: 14px; color: var(--gv-ink-2); margin: 8px 0 0; }
.gv-arr__median b { font-family: var(--gv-display); font-size: 17px; color: var(--gv-forest); }
.gv-arr__median[hidden] { display: none; }
.gv-arr__mmeta { font-size: 11.5px; color: var(--gv-ink-3); }
.gv-arr__rcpts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.gv-arr__rcpt { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; background: var(--gv-paper); border: 1px solid #bfd8cc; color: var(--gv-forest-deep); border-radius: 999px; padding: 4px 11px; }
.gv-arr__rcpt::before { content: "✓"; font-size: 9px; }
.gv-arr__step { font-size: 13px; color: var(--gv-ink-2); margin: 11px 0 0; }
.gv-arr__ctas { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 11px; }
.gv-arr__ctas .gv-btn { width: auto; flex: 1 1 180px; min-height: 44px; }
.gv-arr__mbg { font-size: 11.5px; color: var(--gv-ink-3); margin: 8px 0 0; }
.gv-arr__mbg::before { content: "✓ "; color: var(--gv-forest); font-weight: 700; }
.gv-inner--chip { padding: 0; }
.gv-arr-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--gv-paper); border: 1px solid #bfd8cc; color: var(--gv-forest-deep); border-radius: 999px; padding: 8px 15px; font-family: var(--gv-body); font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 40px; }
.gv-arr-chip:hover { border-color: var(--gv-forest); }
/* The headcount no (2026-10-24): the panel says the one thing that decides this program, on neutral
   paper with a quiet red mark, and the visitor's answer with its way back. Nothing else renders. */
.gv-arr--no { background: var(--gv-cream); border-color: var(--gv-line); padding-bottom: 16px; }
.gv-arr__ic--no { background: var(--gv-sienna-hover); font-size: 11px; }
.gv-arr__said { font-family: var(--gv-body); font-size: 14px; line-height: 1.5; color: var(--gv-ink-2); margin: 6px 0 0 31px; }
.gv-arr__change, .gv-arr-emp__change {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 4px; margin: -12px 0;
  font-family: var(--gv-body); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--gv-forest);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.gv-arr__change:hover, .gv-arr-emp__change:hover { color: var(--gv-forest-deep); }
.gv-arr__change:focus-visible, .gv-arr-emp__change:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 2px; border-radius: 4px; }
.gv-arr-emp__change { font-size: 12px; padding: 12px 2px; }
.gv-arr__glue { white-space: nowrap; }
/* The card's own headcount question, inside the arrival ledger's "Still open": question, then why, then the
   field, all on the text column (the Yes/No rows answer in the same place). v2 draws its own (.gv-card--v2). */
.gv-rcp__item--emp { display: block; }
.gv-rcp .gv2-emp--ask { display: grid; grid-template-columns: 17px minmax(0, 1fr); column-gap: 8px; align-items: start; margin: 0; }
.gv-rcp .gv2-emp--ask .gv-rcp__mark { grid-column: 1; grid-row: 1; }
.gv-rcp .gv2-emp__t { grid-column: 2; grid-row: 1; }
.gv-rcp .gv2-emp__h { grid-column: 2; grid-row: 2; display: block; font-size: 12.5px; line-height: 1.45; color: var(--gv-ink-3); margin-top: 1px; }
.gv-rcp .gv2-emp__f { grid-column: 2; grid-row: 3; display: flex; gap: 6px; margin-top: 6px; }
.gv-rcp .gv2-emp__in { box-sizing: border-box; width: 104px; min-height: 44px; padding: 0 12px; border: 1px solid var(--gv-line); border-radius: var(--gv-r-sm); background: #fff; font-family: var(--gv-body); font-size: 16px; color: var(--gv-ink); }
.gv-rcp .gv2-emp__in::placeholder { color: var(--gv-ink-3); }
.gv-rcp .gv2-emp__in:focus { outline: 0; border-color: var(--gv-forest); box-shadow: 0 0 0 3px rgba(45, 106, 79, .16); }

/* ── Unchecked-gates disclosure (foundation sprint F1, 2026-07-24) ──────────
   Renders under a qualify verdict when the record carries requirements the
   5-question form never asked (activity gates, employee bands, compliance
   standing) — the honesty that keeps "you likely qualify" a true claim. */
/* ── Disclosures (2026-07-28) ─────────────────────────────────────────────
   Program-level facts — "this is a loan", "applications aren't open" — that
   used to REPLACE the verdict and now sit beside it. Spec:
   docs/superpowers/specs/2026-07-28-eligibility-passport-design.md §4.4.
   Deliberately quieter than .gv-unchecked: a disclosure is context, not a
   caveat on the user's own eligibility. */
.gv-caveats {
  margin: 12px 0 0;
  padding: 11px 14px;
  background: var(--gv-cream);
  border-left: 3px solid var(--gv-line);
  border-radius: 0 8px 8px 0;
}
.gv-caveats__lead {
  font-family: var(--gv-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gv-ink-3);
  margin: 0;
}
.gv-caveats__list {
  margin: 7px 0 0;
  padding: 0 0 0 18px;
}
.gv-caveats__list li {
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gv-ink-2);
}
.gv-caveats__list li + li { margin-top: 4px; }

.gv-unchecked {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--gv-amber-bg, #fdf6ec);
  border-radius: 10px;
}
.gv-unchecked__lead {
  font-family: var(--gv-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--gv-ink-2);
  margin: 0;
}
.gv-unchecked__list {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
}
.gv-unchecked__list li {
  font-family: var(--gv-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gv-ink-2);
  margin: 2px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE RECEIPT BLOCK (Phase 2b, 2026-07-28)

   Three states of one answer: what you clear, what is still open, what you do
   not meet. It replaces a card that told a founder a verdict and then listed
   only what we had NOT checked — the payoff for answering was never shown.

   Design intent: the block is a LEDGER, not three coloured boxes. One list,
   one column of marks, three groups separated by their lead line. Colour lives
   on the mark alone; the text stays ink so the three groups read as one
   document rather than a traffic light. Token-only.
   ══════════════════════════════════════════════════════════════════════════ */
.gv-rcp {
  margin: 14px 0 0;
  border-top: 1px solid var(--gv-line);
  padding-top: 12px;
}
.gv-rcp__group + .gv-rcp__group { margin-top: 14px; }
.gv-rcp__lead {
  font-family: var(--gv-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gv-ink-3);
  margin: 0 0 6px;
}
.gv-rcp__list { list-style: none; margin: 0; padding: 0; }
.gv-rcp__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gv-ink);
}
.gv-rcp__mark {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: 2px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.gv-rcp__group--met  .gv-rcp__mark { background: var(--gv-green-bg); color: var(--gv-green); }
.gv-rcp__group--open .gv-rcp__mark { background: var(--gv-amber-bg); color: var(--gv-amber); }
.gv-rcp__group--no   .gv-rcp__mark { background: var(--gv-red-bg);   color: var(--gv-red); }
/* `flex: 1 1 0` — NOT `auto`. With `auto` the text's basis is its own content
   width, so a ~180-character sector condition claimed the entire row, wrapped
   itself onto the next line, and left the status mark stranded alone above it
   (visible at 390px before this). Sizing from zero keeps mark and first line
   together. `overflow-wrap: anywhere` handles the long unbreakable spans the
   phrasebook contains ("information and communications technology"). */
.gv-rcp__text { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; }

/* The tone line on a not-met. It is the taxonomy made visible: a founder should
   be able to tell at a glance whether this is a door they can open, a door that
   opens later, or a door that was never theirs. Deliberately quiet — the
   statement is the content, this is the framing. */
.gv-rcp__kind {
  display: block;
  font-size: 12px;
  color: var(--gv-ink-3);
  margin-top: 1px;
}
/* Identity, location, occupation: never dressed as an opportunity. No accent,
   no arrow, nothing that reads as "click here to fix yourself". */
.gv-rcp__item--structural .gv-rcp__kind,
.gv-rcp__item--terminal   .gv-rcp__kind { font-style: italic; }

/* ── An open condition you can settle in place ─────────────────────────── */
.gv-rcp__item--ask { flex-wrap: wrap; }
/* Under the question at every width (2026-10-24, was beside it on desktop): every open question on the card,
   Yes/No or the headcount number, answers in the same place. 25px = the mark (17px) + the gap (8px). */
.gv-rcp__btns { display: flex; gap: 6px; margin-left: 25px; padding-left: 0; margin-top: 4px; width: calc(100% - 25px); }
.gv-rcp__btn {
  font-family: var(--gv-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--gv-forest);
  background: var(--gv-paper);
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r-sm);
  /* 44px min touch target via padding + min-height, not a fixed height, so the
     label can grow with the user's font size without clipping. */
  min-height: 44px;
  min-width: 56px;
  padding: 0 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.gv-rcp__btn:hover  { background: var(--gv-cream); border-color: var(--gv-forest); }
.gv-rcp__btn:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 2px; }

@media (max-width: 420px) {
  /* The buttons drop under the question rather than squeezing it to two words. */
  .gv-rcp__btns { margin-left: 25px; padding-left: 0; margin-top: 4px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-rcp__btn { transition: none; }
}
/* ── An answer you can take back (fix round 3) ─────────────────────────────
   A yes/no here writes to the SHARED dimension store, so a mis-tap used to be permanent on
   every surface, forever. An answered condition therefore renders the answer it holds and a way
   to change it, in the place it already renders: cleared ones under "What you clear", failed
   ones under "Closed to you".
   ⚠ QUIET BY CONSTRUCTION. This is a correction path, not an invitation — the tag is muted, the
   control is text rather than a third button competing with the Yes/No pair above it, and the
   predicate stays lowercase because it completes the tag ("You said Yes · runs R&D projects…").
   ⚠ `flex-wrap` matches `--ask`: on a phone the control drops under the sentence rather than
   squeezing it to two words. */
.gv-rcp__item--answered { flex-wrap: wrap; }
.gv-rcp__said {
  font-weight: 700;
  color: var(--gv-ink-2);
}
.gv-rcp__change {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  /* 44px via padding + min-height, cancelled by the negative margin so the control does not
     change the line box it sits in. The measured box is what matters, not the intent — the
     `.gv-rm__more` incident (a comment claiming 44px over a 42.8px box) is the standing
     reminder to check it rather than assert it. */
  min-height: 44px;
  padding: 12px 4px;
  margin-top: -12px;
  margin-bottom: -12px;
  font-family: var(--gv-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gv-forest);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gv-rcp__change:hover { color: var(--gv-forest-deep); }
.gv-rcp__change:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 2px; border-radius: 4px; }
/* A re-asked row is an OPEN question again, wherever it happens to be sitting: the group's own
   mark colour would paint the "?" green inside "What you clear", which is the one thing it is
   no longer saying. */
.gv-rcp__item--reask .gv-rcp__mark { background: var(--gv-amber-bg); color: var(--gv-amber); }
/* ⚠ NO PHONE OVERRIDE HERE, and that was decided by looking at a 375px render. The obvious one
   (copying `.gv-rcp__btns`' `margin-left: 25px`) did two wrong things at once: it cancelled the
   negative top margin, so the label sat 12px BELOW the sentence it belongs to, and it added 25px
   of gutter to a row whose text was already wrapping to three lines. The text is `flex: 1 1 0`,
   so `margin-left: auto` costs it nothing — the control simply sits at the end of the first line
   at every width, which is where it reads as belonging to that line. */

/* ── The same way out, from the verdict that the answer created ────────────
   On a `dim-condition-not-met` NO the ledger's one-item rule suppresses the whole block, so the
   row above is not on screen and the banner is the only place the answer is named. The control
   lives inside the red block, beneath the sentence it undoes. */
.gv-vchange { margin: 8px 0 0; }
.gv-vchange__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 4px;
  margin: -12px 0;
  font-family: var(--gv-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gv-ink);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gv-vchange__btn:hover { color: var(--gv-ink-2); }
.gv-vchange__btn:focus-visible { outline: 2px solid var(--gv-ink); outline-offset: 2px; border-radius: 4px; }
/* Asking, in the banner: the same row shape the ledger uses, so the two hosts render one
   control and not two designs of it. */
.gv-vchange--asking {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gv-ink);
}
.gv-vchange--asking .gv-rcp__mark { background: var(--gv-paper); color: var(--gv-ink-2); }

/* The reason to answer, in a human voice. Sits under the uppercase group label
   rather than inside it — as part of the lead it wrapped to two shouted lines
   on a phone and read like a system message instead of a promise. */
.gv-rcp__promise {
  font-family: var(--gv-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gv-ink-3);
  margin: -2px 0 6px;
}

/* ── The Match Reveal (2026-08-28) ─────────────────────────────────────
 * Spec: docs/superpowers/specs/2026-08-28-verdict-match-reveal-roadmap-bridge-design.md §4
 * The verdict's last block: the other programs THIS founder's answers clear.
 *
 * ⚠⚠ `display: flow-root` IS LOAD-BEARING, NOT A TIDY-UP. The container renders
 * synchronously in an INITIAL state (the shipped NO block, or the quiz-link row) and is
 * swapped for the reveal ~1s later. flow-root stops the children's top margins collapsing
 * THROUGH the container, so every state keeps its own familiar spacing while the container's
 * own top edge stays put and nothing ABOVE it is disturbed by the swap. Never put margin,
 * padding or a border on `.gv-rm` itself: put it on the state's own first child.
 *
 * ⚠ It does NOT stop the card growing downward on upgrade, and it is not meant to: the
 * container goes ~138px -> ~443px and content below moves ~305px (Ruling 7 accepts this;
 * reserving the ready height would leave a permanent hole on every card whose feed fails).
 * reveal-e2e asserts the growth happens exactly ONCE, with no incremental reflows.
 */
.gv-rm { display: flow-root; margin: 0; }

/* ── The section header (fix round 2) ─────────────────────────────────────
   The block opens on the card's own editorial pattern: a hairline rule, then the serif
   claim, then the qualifying line beneath it in body type. The eyebrow below is the
   COLLAPSED strip's header and is hidden in every other state — see `.gv-rm--strip`. */
.gv-rm__eyebrow {
  display: none;
  font-family: var(--gv-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-ink-3);
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--gv-line);
}
.gv-rm__head {
  font-family: var(--gv-display);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gv-ink);
  margin: 20px 0 6px;
  padding-top: 16px;
  border-top: 1px dashed var(--gv-line);
}
.gv-rm__head strong { color: var(--gv-forest-deep); font-weight: 700; }
.gv-rm__sub {
  font-family: var(--gv-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--gv-ink-2);
  margin: 0 0 16px;
}
/* ★ G6 — THE HEDGED COUNT IS A CONTROL, SO IT NEEDS A CONTROL'S BOX. inline-block plus the
   padding/negative-margin pair gives it a real 44px tap target without changing the line box
   it sits in (the same mechanic `.gv-rm__more` uses, and the reason that rule carries a
   comment about measuring the box rather than asserting the intent).
   ⚠ Deliberately NOT the sienna CTA treatment: this is a number made reachable, not a second
   offer competing with the footer exit. Every state is colour-locked against the sitewide
   `a:hover { color: var(--sienna) }`. */
.gv-rm__sublink {
  display: inline-block;
  max-width: 100%;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(45, 106, 79, 0.4);
  text-underline-offset: 3px;
  padding: 12px 0;
  margin: -12px 0;
}
.gv-rm__sublink,
.gv-rm__sublink:focus,
.gv-rm__sublink:visited,
.gv-rm__sublink:active { color: var(--gv-ink); }
.gv-rm__sublink:hover { color: var(--gv-forest-deep); text-decoration-color: var(--gv-forest); }
.gv-rm__sublink:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 2px; border-radius: 4px; }

/* ── THE PIVOT (fix round 3) ───────────────────────────────────────────────
   NO PATH ONLY. A red "Likely not a fit" banner sits a few inches above this block, and the
   sentence that answers it was a thin serif line under a dotted rule — the same treatment as
   every other section opener on the page, and quieter than the thing it is answering.

   The lockup answers the banner in the banner's own language: the green tick against the red
   cross, an eyebrow lead-in naming the turn, and a tinted band that groups the claim with its
   own qualifier. ⚠ A TINT, NOT A SECOND STATUS FILL: `--gv-verdict--no` uses the saturated
   `--gv-red-bg`, and matching that here would put two full-strength status blocks on one card
   and read as a second verdict. `--gv-forest-08` is the same forest the cleared rows use.
   ⚠ The tick is TOP-ALIGNED to the block, deliberately not centred on any one line: it anchors
   the whole lockup (lead + claim + qualifier), and the claim wraps to two or three lines on a
   phone, so "centred" would have no stable referent. Nothing here is hand-fitted to a line box.
   ⚠ It carries the block's top rule and outer margin, so `.gv-rm__head`'s dashed border and
   20px margin are neutralised INSIDE the band — two separators would be a double rule. */
.gv-rm__pivot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 16px;
  padding: 14px 16px;
  background: var(--gv-forest-08);
  border: 1px solid var(--gv-forest-18);
  border-radius: var(--gv-r-sm);
}
.gv-rm__pivotic {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gv-forest);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1;
}
/* `flex: 1 1 0`, not `auto` — the same sizing-from-zero the receipt rows need, so a long
   headline cannot claim the row and strand the tick above it (see `.gv-rcp__text`). */
.gv-rm__pivotbody { min-width: 0; flex: 1 1 0; }
.gv-rm__pivotlead {
  font-family: var(--gv-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-forest-deep);
  margin: 0 0 5px;
}
.gv-rm__pivot .gv-rm__head {
  margin: 0 0 6px;
  padding-top: 0;
  border-top: 0;
}
.gv-rm__pivot .gv-rm__sub { margin: 0; }

/* minmax(0,1fr) on the single column, not 1fr: a `1fr` track floors at min-content, so one
   long programme title would push the whole card past the viewport on a phone. */
.gv-rm__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}
/* ★★ ONE COLUMN, AT EVERY WIDTH. The two-column row is what produced the P0, and it cannot be
   tuned out of it: the card caps the row at ~819px, and a REAL amountDisplay (they run to 185
   characters inside the cap, 349 outside it) plus the level and status chips leave the title
   28-32% at 880-1440px even with the amount capped and wrapping. Measured across the band:

       viewport   two-column title share   stacked title share
          481              0%                     94%
          600             17%                     95%
          880             28%                     ~90%
         1280             32%                     ~90%

   Short amounts fit two columns fine; mid and long ones never do, and "sometimes the programme
   name is legible" is not a layout. Stacking is what the phone always did and what the reader
   needs everywhere: the name first at full width, then the money and the chips under it.
   `gvrm-widths.js` asserts the title's rendered width per cell, with a control that re-creates
   the two-column row to prove the assertion can still fail. */
.gv-rm__row {
  position: relative;        /* the chevron's containing block — see ::after below */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  row-gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 44px;          /* touch floor, via min-height so the row grows with the text */
  /* ★ THE RIGHT LANE IS RESERVED FOR THE CHEVRON (amendment C6). 30px of padding, not a grid
     track: a track would re-open the two-column row that deleted every programme name, and an
     affordance is never worth that. Inside padding the arrow costs the title nothing. */
  padding: 10px 30px 10px 14px;
  background: var(--gv-cream);
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r-sm);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
/* ⚠ The sitewide `a:hover { color: var(--sienna) }` repaints ANY unqualified anchor on
   hover. Every state is restated so a row cannot change colour under the cursor. */
.gv-rm__row,
.gv-rm__row:hover,
.gv-rm__row:focus,
.gv-rm__row:visited,
.gv-rm__row:active { color: var(--gv-ink); }
/* ★ F3c — THE DECORATIVE HOVER IS GUARDED, THE COLOUR LOCK ABOVE IS NOT. A touch browser
   emulates `:hover` on the tapped element and leaves it stuck there until the next tap
   elsewhere, so on a phone the last row touched would keep a forest border and a lift as if it
   were still under a cursor. Inside `(hover: hover)` that cannot happen. The colour lock stays
   OUTSIDE deliberately: sticky hover is exactly when the sitewide `a:hover { color: sienna }`
   would repaint the row, so the lock has to hold on devices that have no real hover at all. */
@media (hover: hover) {
  .gv-rm__row:hover { border-color: var(--gv-forest); background: var(--gv-paper); }
}
.gv-rm__row:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 2px; }

/* G4 — the row says it goes somewhere.
   ⚠ TOP-ALIGNED WITH THE TITLE, NOT CENTRED ON THE ROW. A row is three stacked lines here, so
   `top: 50%` parked the arrow in empty space beside the fit line, pointing at nothing — it
   read as decoration. Sat against the programme name it reads as "this name is a link", which
   is what it is. The offset is the row's own top padding plus half a title line box.
   ⚠ NO `translateY` in the base rule, so the hover nudge owns `transform` outright and the
   two transforms cannot fight. */
.gv-rm__row::after {
  content: "\2192";
  position: absolute;
  right: 11px;
  top: 11px;
  font-family: var(--gv-body);
  font-size: 14px;
  line-height: 1.2;
  color: var(--gv-ink-3);
  opacity: 0.5;
  transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
}
/* ⚠ F3c SPLIT THE PAIR: the keyboard half must stay outside the hover guard, or a phone with a
   bluetooth keyboard loses the only affordance it has left. Same declarations, twice, on
   purpose — sharing the selector list is what would put `:focus-visible` behind `hover: hover`. */
.gv-rm__row:focus-visible::after {
  opacity: 1;
  color: var(--gv-forest);
  transform: translateX(2px);
}
@media (hover: hover) {
  .gv-rm__row:hover::after {
    opacity: 1;
    color: var(--gv-forest);
    transform: translateX(2px);
  }
}
/* ★ THE TIER IS VISIBLE, QUIETLY. A row the founder's answers CLEAR carries a forest edge; a
   row with something still open carries none, and says what is open in amber on its fit line.
   `inset box-shadow` rather than `border-left`: a border would move the text 3px and leave the
   two tiers misaligned down the strip. The lift on hover is a shadow for the same reason —
   a translate would change the rect every overflow assertion in the sweep reads. */
.gv-rm__row--clear { box-shadow: inset 3px 0 0 var(--gv-forest); }
@media (hover: hover) {
  .gv-rm__row--close:hover { box-shadow: 0 2px 8px rgba(28, 25, 23, 0.07); }
  .gv-rm__row--clear:hover { box-shadow: inset 3px 0 0 var(--gv-forest), 0 2px 8px rgba(28, 25, 23, 0.07); }
}

.gv-rm__main { display: block; min-width: 0; }
/* ⚠ NO ELLIPSIS ON A PROGRAMME NAME EITHER. With the row stacked the title owns the full width,
   so it can simply wrap — and a severed name ("OCI Critical Industrial Technologies — Sector
   Adoption Progr…") is the same class of half-truth as a severed money figure. Removing the
   truncation also removes the mechanism that made the collapse SILENT: an ellipsized title
   rendered empty and said nothing. */
.gv-rm__title {
  display: block;
  font-family: var(--gv-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--gv-ink);
}
.gv-rm__fit {
  display: block;
  font-family: var(--gv-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gv-ink-3);
  margin-top: 3px;
}
/* The cleared half stays quiet and gains a mark; the OPEN half is the one that distinguishes
   the two tiers, so it gets the card's existing "confirm first" amber rather than the same
   grey as everything around it. */
.gv-rm__fitck {
  display: inline-block;
  margin-right: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gv-forest);
}
.gv-rm__tocheck {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--gv-amber-bg);
  color: var(--gv-amber);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
/* ⚠ THE CHIP SITS BESIDE THE MONEY, NOT AT THE FAR EDGE, and that was decided by looking at a
   render. `justify-content: space-between` threw the level chip ~600px away from the amount on
   a 1280px card: two related facts at opposite ends of an empty line, reading as a stray
   label rather than as this figure's own annotation. Flowed left they are one line of
   metadata; a long prose amount still wraps the chip onto its own line underneath. */
.gv-rm__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
/* ★★ MONEY WRAPS. IT IS NEVER TRUNCATED AND NEVER ELLIPSIZED. (Ruling 16.)
   A wrapped amount is still the whole claim; a severed one is a DIFFERENT claim, and an ellipsis
   on "…cannot exceed 50% of eligible capital costs" is exactly the severing this card must never
   do. So: no `nowrap`, no `overflow:hidden`, no `text-overflow`.

   ⚠ THE max-width IS THE BRAKE, AND IT IS WHAT MAKES WRAPPING SAFE. Unbraked, this column's
   max-content contribution feeds the row's `auto` track and the sibling `minmax(0,1fr)` title
   track floors at 0 — one long string did not squeeze the programme name, it DELETED it
   (measured: a real 349-character amountDisplay produced a 2,182px box and five nameless rows,
   clipped silently by .gv-card's overflow:hidden, so the page never even scrolled). Capped, extra
   length is spent on extra LINES instead of extra width, and the title keeps a floor.
   `ch` rather than a percentage because a percentage behaves as `auto` during intrinsic sizing and
   would not constrain the max-content contribution the track actually reads. `overflow-wrap:
   anywhere` so a single unbroken token longer than the cap still cannot escape it.

   ⚠ THE BRAKE ALONE DOES NOT GUARANTEE A READABLE TITLE, and this comment must not imply that it
   does. The row only stacks at <=480px; between 481px and ~768px a full-width amount plus the
   level chip still narrows the title materially. That is why `gvrm-widths.js` asserts the title's
   RENDERED WIDTH in every cell — the symptom itself, not this rule's side effect. */
.gv-rm__amount {
  flex: 0 1 auto;
  font-family: var(--gv-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--gv-forest-deep);
  max-width: 34ch;
  overflow-wrap: anywhere;
}
.gv-rm__chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* Refined to the label language /explore uses for its own metadata tags: smaller, wider
   tracking, a squared corner and no fill, so a chip reads as an annotation rather than as a
   pill competing with the money beside it. */
.gv-rm__chip {
  font-family: var(--gv-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gv-ink-3);
  background: transparent;
  border: 1px solid var(--gv-line);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.gv-rm__chip--wait { color: var(--gv-amber); background: var(--gv-amber-bg); border-color: transparent; }

/* The catalogue is the escape hatch under the five named programmes, not the headline act. */
.gv-rm__more {
  display: inline-block;
  font-family: var(--gv-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* ⚠ 12, not 11. The comment claimed a 44px tap target and the measured box was 42.8px: a
     13px font on this stack lays out a 20.8px line box, so 11+20.8+11 lands 1.2px short of the
     floor at every one of the nine widths. Asserting the intent instead of the number is what
     let it ship. The negative margin still cancels the visual shift exactly. */
  padding: 12px 0;
  margin: -12px 0;
}
.gv-rm__more,
.gv-rm__more:hover,
.gv-rm__more:focus,
.gv-rm__more:visited,
.gv-rm__more:active { color: var(--gv-sienna); }
.gv-rm__more:hover { color: var(--gv-sienna-hover); }
.gv-rm__more:focus-visible { outline: 2px solid var(--gv-sienna); outline-offset: 3px; border-radius: 4px; }

/* ── D1: the collapsed strip ──────────────────────────────────────────────
 * While the roadmap panel is building, the five programmes step back to a quiet strip so one
 * thing on the card is clearly happening. The class is added by JS on an EXPLICIT act only
 * (amendment C4) — a background probe never reflows content a reader may be mid-way through.
 *
 * ⚠⚠ THE NO-TRUNCATION LAW SURVIVES THE COLLAPSE (amendment C5). Smaller type, tighter
 * padding, muted colour, one column — and the title still WRAPS. No ellipsis, no `nowrap`, no
 * `overflow:hidden`: a severed programme name is the same half-truth collapsed as expanded,
 * and an ellipsized title is what made the original collapse SILENT.
 * ⚠ The rows stay links at their 44px floor; only their presentation changes.
 * ⚠ The head and the sub-line go with them: the head states a count ("Your answers clear 5
 * more") that the panel's receipt line states again ("5 you clear outright"), and G1 allows
 * one statement of a fact, not two. The eyebrow takes over as the strip's label AND as the
 * hairline rule that separates this block from the card above it.
 */
.gv-rm--strip .gv-rm__eyebrow { display: block; }
.gv-rm--strip .gv-rm__head,
.gv-rm--strip .gv-rm__sub { display: none; }
/* ⚠ AND THE BAND GOES WITH THEM. Hiding only its contents would leave a tinted box with a tick
   in it and nothing else — the loudest object on a card whose one job at that moment is the
   roadmap panel. (fix round 3) */
.gv-rm--strip .gv-rm__pivot { display: none; }
.gv-rm--strip .gv-rm__rows { gap: 0; margin: 0 0 14px; }
.gv-rm--strip .gv-rm__row {
  padding: 9px 26px 9px 2px;
  row-gap: 1px;
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid var(--gv-line);
  border-radius: 0;
  box-shadow: none;
}
.gv-rm--strip .gv-rm__row:last-child { border-bottom-color: transparent; }
@media (hover: hover) {
  .gv-rm--strip .gv-rm__row:hover {
    background: var(--gv-cream);
    border-color: transparent;
    border-bottom-color: var(--gv-line);
    box-shadow: none;
  }
}
.gv-rm--strip .gv-rm__title { font-size: 13px; color: var(--gv-ink-2); }
.gv-rm--strip .gv-rm__amount { font-size: 12px; font-weight: 600; color: var(--gv-ink-3); }
.gv-rm--strip .gv-rm__fit,
.gv-rm--strip .gv-rm__chips { display: none; }
.gv-rm--strip .gv-rm__row::after { right: 4px; top: 9px; opacity: 0.45; font-size: 13px; }

/* ── D4: the exit steps down while the panel is working ───────────────────
 * The escape hatch is still there and still reachable; it just stops competing, in the one
 * moment when the card has a single thing worth watching. Derived from the bridge's OWN state
 * attribute rather than a second class this file would have to keep in sync — the panel
 * states are exactly wait / ready / claimed.
 * ⚠ Every colour state is restated (the sitewide sienna-on-hover rule), and the 44px box is
 * rebuilt from an explicit line-height: the smaller type shrinks the line box, and the old
 * padding alone would have landed this control at ~40px. */
.gv-rm-bridge[data-gvb-state="wait"] ~ .gv-rm__more,
.gv-rm-bridge[data-gvb-state="ready"] ~ .gv-rm__more,
.gv-rm-bridge[data-gvb-state="claimed"] ~ .gv-rm__more {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  padding: 13px 0;
  margin: -13px 0;
}
.gv-rm-bridge[data-gvb-state="wait"] ~ .gv-rm__more,
.gv-rm-bridge[data-gvb-state="wait"] ~ .gv-rm__more:hover,
.gv-rm-bridge[data-gvb-state="wait"] ~ .gv-rm__more:focus,
.gv-rm-bridge[data-gvb-state="wait"] ~ .gv-rm__more:visited,
.gv-rm-bridge[data-gvb-state="wait"] ~ .gv-rm__more:active,
.gv-rm-bridge[data-gvb-state="ready"] ~ .gv-rm__more,
.gv-rm-bridge[data-gvb-state="ready"] ~ .gv-rm__more:hover,
.gv-rm-bridge[data-gvb-state="ready"] ~ .gv-rm__more:focus,
.gv-rm-bridge[data-gvb-state="ready"] ~ .gv-rm__more:visited,
.gv-rm-bridge[data-gvb-state="ready"] ~ .gv-rm__more:active,
.gv-rm-bridge[data-gvb-state="claimed"] ~ .gv-rm__more,
.gv-rm-bridge[data-gvb-state="claimed"] ~ .gv-rm__more:hover,
.gv-rm-bridge[data-gvb-state="claimed"] ~ .gv-rm__more:focus,
.gv-rm-bridge[data-gvb-state="claimed"] ~ .gv-rm__more:visited,
.gv-rm-bridge[data-gvb-state="claimed"] ~ .gv-rm__more:active { color: var(--gv-ink-3); }
.gv-rm-bridge[data-gvb-state="wait"] ~ .gv-rm__more:hover,
.gv-rm-bridge[data-gvb-state="ready"] ~ .gv-rm__more:hover,
.gv-rm-bridge[data-gvb-state="claimed"] ~ .gv-rm__more:hover {
  color: var(--gv-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .gv-rm__head { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-rm__row { transition: none; }
  .gv-rm__row::after { transition: none; }
}

/* ── The Roadmap Bridge (2026-08-28) ───────────────────────────────────
 * Spec: docs/superpowers/specs/2026-08-28-verdict-match-reveal-roadmap-bridge-design.md §3
 * Sits INSIDE .gv-rm, between the five named programmes and the explore escape link: the
 * act, then the way out. Three states swap in place (cta / chips / wait) plus the dead
 * fallback, which is the plain quiz row this slot held before the bridge existed.
 *
 * ⚠ No margin/padding/border on `.gv-rm` itself (see the reveal note above) — the spacing
 * lives here, on the bridge's own box.
 */
.gv-rm-bridge { margin: 8px 0 16px; }
/* ★★ V3 — THE DEAD STATE'S ZERO MARGIN MADE TWO 44px TAP TARGETS OVERLAP BY 15px, AT EVERY
   WIDTH. The fallback quiz link and `.gv-rm__more` each buy their touch floor the same way — a
   large symmetric padding cancelled by a negative margin — so each box hangs ~13px past its own
   text, while only 10px of line separated them. `.gv-rm__more` is later in the tree, so it
   PAINTED OVER the bottom third of the quiz link: a press aimed at the last visible line of
   "Take the 2-minute quiz" went to Explore instead. Neither element could see this on its own;
   only the two rects together can. 24px of line separation clears both boxes with 9px to spare
   (measured 375 and 1280), and it is the same 8px rhythm the rest of the panel is on.
   ⚠ A future change to either control's padding re-opens this. reveal-e2e asserts the two rects
   do not intersect in the dead state, with a control that removes this margin and proves the
   detector fires. */
.gv-rm-bridge[data-gvb-state="dead"] { margin: 0 0 24px; }

/* ★★ D1 — THE PANEL. From the tap onward the bridge stops being a paragraph in a stack of
   paragraphs and becomes one framed object that owns the moment: the founder is being asked
   to hold for a measured 69-74 seconds, and a bold line with a dot was not enough shape to
   hold anyone. The frame is put on the MOUNT, not on the wait div, so the wait, the divider
   and the signup gate read as one panel while the gate stays OUTSIDE the aria-live region
   (nesting a whole form inside it makes a screen reader re-read the form on every change).
   ⚠ Scoped to the three states that actually render a panel. `agfail` and `dead` are
   deliberately unframed: a frame is emphasis, and neither of those moments wants any. */
.gv-rm-bridge[data-gvb-state="wait"],
.gv-rm-bridge[data-gvb-state="ready"],
.gv-rm-bridge[data-gvb-state="claimed"] {
  background: linear-gradient(180deg, var(--gv-paper), var(--gv-cream));
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r);
  box-shadow: var(--gv-sh);
  padding: 20px 18px;
  margin: 8px 0 16px;
}
@media (max-width: 480px) {
  .gv-rm-bridge[data-gvb-state="wait"],
  .gv-rm-bridge[data-gvb-state="ready"],
  .gv-rm-bridge[data-gvb-state="claimed"] { padding: 18px 14px; }
}
/* ⚠ THE FALLBACK'S QUIZ LINK NEEDS ITS TOUCH FLOOR AT EVERY WIDTH, NOT JUST UNDER 600px.
   `.gv-quizlink` only gets its 44px box inside a `max-width: 600px` query, so above that it
   measures 16px — and on a kill-switched NO page this copy is the ONLY control left on the
   card (Ruling 10 removed the card's own row on upgrade). 768/880/920 are touch widths.
   Scoped to the bridge on purpose: widening the base rule would add 12px to a shipped row on
   every desktop grant page, which is a change to somebody else's surface made from this
   feature's sweep. The sitewide gap is reported, not silently repainted here. */
.gv-rm-bridge .gv-quizlink { display: inline-block; padding: 13px 0; margin: -7px 0; }

.gv-rm-bridge__lead {
  font-family: var(--gv-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gv-ink-2);
  margin: 0 0 8px;
}
/* Full-width forest button, the same object the initial NO state used for #gv-find-better —
   so the reveal's one press looks like the card's other primary presses. */
.gv-rm-bridge__cta { width: 100%; }

.gv-rm-bridge__q {
  font-family: var(--gv-display);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--gv-ink);
  margin: 0 0 10px;
}
.gv-rm-bridge__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gv-rm-bridge__chip {
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--gv-ink);
  background: var(--gv-paper);
  border: 1px solid var(--gv-line);
  border-radius: 999px;
  /* min-height, not height: a label that wraps on a narrow phone grows the pill instead of
     spilling out of it. 10px+10px+~18px line box clears the 44px touch floor on its own. */
  min-height: 44px;
  padding: 10px 15px;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* ★ F3c — same guard as the rows. A purpose chip is TAPPED and then immediately replaced by
   the wait panel, so a stuck hover is short-lived here; it is guarded anyway because the two
   are one interaction language and a rule that applies on one and not the other is the drift
   the guard exists to prevent. `.gv-rm__chip` (the level / "Not open right now" pills) is a
   <span> with no hover rule at all, so there is nothing to guard there. */
@media (hover: hover) {
  .gv-rm-bridge__chip:hover { background: var(--gv-cream); border-color: var(--gv-forest); }
}
.gv-rm-bridge__chip:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 2px; }

.gv-rm-bridge__wait { display: block; }
/* The wait takes focus when it replaces the chip the founder was on, so it needs a ring. */
.gv-rm-bridge__wait:focus-visible { outline: 2px solid var(--gv-forest); outline-offset: 3px; border-radius: 6px; }
/* Resume only (Amendment 4): why a wait is on screen that the founder never started HERE. It
   REPLACES the receipt rather than joining it — the receipt is this page's own provenance, and
   a roadmap seeded elsewhere must not appear to have been built from it. */
.gv-rm-bridge__note {
  font-family: var(--gv-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gv-ink-3);
  margin: 6px 0 0;
}
.gv-rm-bridge__receipt {
  font-family: var(--gv-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gv-ink-3);
  margin: 0 0 8px;
}
/* The panel's own header row: the working cue, then the serif heading it belongs to.
   ⚠ flex-START, not center: at 375px the heading wraps to two lines and a centred spinner
   floated between them, beside neither. Aligned to the first line it belongs to the words.
   ★★ F2 — AND "ALIGNED TO THE FIRST LINE" IS A RELATIONSHIP, NOT A PIXEL. The shipped
   `margin-top: 1px` was hand-fitted to the 19px desktop heading; at ≤480 the heading drops to
   17.5px and its line box (21.88px) is SHORTER than the 22px ring, so the same 1px left the
   ring 1.06px BELOW the line it was supposed to sit on — measured, and what read as a cramped,
   accidental lockup on a phone. The three numbers that decide the centring are declared here
   as custom properties and the offset is DERIVED from them below, so changing a heading size
   re-centres its mark instead of silently un-centring it. */
.gv-rm-bridge__waithead {
  --gv-wh-fs: 19px;        /* the heading's font-size */
  --gv-wh-lh: 1.25;        /* its line-height, unitless */
  --gv-wh-ring: 22px;      /* the mark that sits beside it */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
}
.gv-rm-bridge__building {
  font-family: var(--gv-display);
  font-size: var(--gv-wh-fs);
  font-weight: 600;
  line-height: var(--gv-wh-lh);
  letter-spacing: -0.01em;
  color: var(--gv-ink);
  margin: 0;
}
/* What to expect, in the two facts a founder actually needs: how long, and whether they have
   to watch. Both measured (69s and 74s on real runs) — never "under a minute". */
.gv-rm-bridge__expect {
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gv-ink-2);
  max-width: 44ch;
  margin: 0;
}
/* The ring spinner from the map embed's wait — the shipped, screenshot-polished version of
   this exact moment. Class name kept from the dot it replaces so nothing else has to move. */
/* ⚠ THE TRACK IS A FOREST TINT, NOT THE HAIRLINE GREY, and that was a screenshot finding: at
   `--gv-line` on a near-white panel three quarters of the ring vanished and the cue read as a
   pale washer with a smudge on it. Tinted, the whole ring is legible and the solid arc is what
   moves — which is the only part that has to say "working". */
/* ⚠ THIS CLASS HAS A SECOND DEFINITION IMMEDIATELY BELOW, on purpose — `css-debt-audit.js`
   reports it and the report is correct: `margin-top` is set there, not here. It is shared with
   the two tick lockups because it is one RELATIONSHIP (centre the mark on the heading's first
   line), and three hand-fitted copies of that relationship are exactly what F2 was fixing. */
.gv-rm-bridge__pulse {
  flex-shrink: 0;
  width: var(--gv-wh-ring);
  height: var(--gv-wh-ring);
  border-radius: 50%;
  background: none;
  border: 3px solid rgba(45, 106, 79, 0.2);
  border-top-color: var(--gv-forest);
  animation: gv-rm-spin 0.9s linear infinite;
}
/* ★★ F2 — THE DERIVED CENTRING, STATED ONCE FOR ALL THREE LOCKUPS (the working spinner, the
   READY tick, the post-signup tick): centre a `--gv-wh-ring`-tall mark on the FIRST LINE BOX of
   a `--gv-wh-fs` / `--gv-wh-lh` heading. Must stay BELOW the three rules it corrects — they are
   all single-class, so order is what decides. */
.gv-rm-bridge__pulse,
.gv-rm-bridge__ready > .gv-rm-bridge__tick,
.gv-rm-bridge__confirmhead > .gv-rm-bridge__tick {
  margin-top: calc((var(--gv-wh-fs) * var(--gv-wh-lh) - var(--gv-wh-ring)) / 2);
}
@keyframes gv-rm-spin { to { transform: rotate(360deg); } }
/* ⚠ A cue that cannot animate must not read as a broken ring or a dead dot: it becomes a
   SOLID, COMPLETE mark in the accent colour (amendment C9), which is still a "working"
   signal. The live region carries the real news either way. */
@media (prefers-reduced-motion: reduce) {
  .gv-rm-bridge__pulse { animation: none; border-color: var(--gv-forest); opacity: 1; }
  .gv-rm-bridge__chip { transition: none; }
}
/* ── Task 4: the gate, the ready landing and the honest exit ───────────────
 * ⚠ THE .gcs-* BLOCK IS NOT OPTIONAL. gc-signup.js ships no stylesheet of its own — every
 * surface that mounts it carries its own copy (gameplan.css, eligibility-embed.css,
 * eligibility-map.css, seo-conversion.css, shortlist.css). Without this one the inline signup
 * renders as raw browser inputs inside the card, and ONLY in production: headless QA never
 * reaches the inline path because gc-signup's available() reads window.firebaseAuth.
 */
/* The ask sits below a divider inside the panel frame, so the wait and the gate read as one
   object with two parts rather than as two stacked blocks. */
.gv-rm-bridge__gate {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--gv-line);
}
.gv-rm-bridge__gatelead {
  font-family: var(--gv-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--gv-ink-2);
  margin: 0 0 12px;
}
.gv-rm-bridge__gatecta { width: 100%; }

/* ★★ F1 — ONCE THE ACCOUNT EXISTS, THE CONFIRMATION LEADS.
   C3 put the two-step answer at the BOTTOM of the panel in 13.5px body type, underneath a 19px
   serif "Building your funding roadmap" that had already been on screen for half a minute: the
   one act the whole surface asks for produced the quietest line in the box, and both external
   critics read the finished moment as still-waiting. So the hierarchy inverts. The news takes
   the panel's heading treatment — the same serif + tick lockup the READY state uses, so the
   panel still reads as one object changing state — and the generation drops to a status line
   beneath it, keeping its spinner because it really is still running.
   ⚠ THE ORDER OF TRUTH IS UNCHANGED (amendment C3): step 1 is the account, step 2 is the
   roadmap, and step 2 still waits for `bridgeClaim()` to answer. Inverting the LAYOUT does not
   promote a promise; `bridgeSignupNoteHtml` is still the only thing that decides what is said. */
.gv-rm-bridge__confirm { margin: 0 0 16px; }
.gv-rm-bridge__confirmhead {
  --gv-wh-fs: 19px;
  --gv-wh-lh: 1.25;
  --gv-wh-ring: 18px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--gv-display);
  font-size: var(--gv-wh-fs);
  font-weight: 600;
  line-height: var(--gv-wh-lh);
  letter-spacing: -0.01em;
  color: var(--gv-ink);
  margin: 0;
}
/* Step 2, the ownership promise. Body type under the news it qualifies — and it exists on
   screen only after the claim answered TRUE, which is the whole point of the two steps. */
/* ⚠ 60ch, not the expectation line's 44ch: this sentence is 69 characters and 44ch broke it
   one word short of the end, leaving "account." alone on a second line directly under a
   heading. 60ch holds it on one line from ~700px up and still wraps naturally on a phone,
   where a two-line measure is what the column gives it anyway. */
.gv-rm-bridge__own {
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gv-ink-2);
  max-width: 60ch;
  margin: 8px 0 0;
}
/* The generation, demoted: same row, same spinner, one size down and out of the serif. The
   divider that separated the gate from the wait now separates the answered ask from the work
   still running, so the panel keeps its two parts instead of growing a third. */
.gv-rm-bridge__wait--confirmed .gv-rm-bridge__waithead {
  --gv-wh-fs: 13.5px;
  --gv-wh-lh: 1.5;
  --gv-wh-ring: 16px;
  margin: 0 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gv-line);
}
.gv-rm-bridge__wait--confirmed .gv-rm-bridge__building {
  font-family: var(--gv-body);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gv-ink-2);
}
.gv-rm-bridge__wait--confirmed .gv-rm-bridge__pulse { border-width: 2px; }

/* Ready: the same serif treatment as the building heading it replaces, so the panel reads as
   one object changing state rather than as two different panels.
   ⚠ flex-START and the derived offset, for the same reason the waithead uses them (F2): at
   320px "Your funding roadmap is ready." wraps, and `align-items: center` floated the tick
   between the two lines, beside neither. */
.gv-rm-bridge__ready {
  --gv-wh-fs: 19px;
  --gv-wh-lh: 1.25;
  --gv-wh-ring: 18px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--gv-display);
  font-size: var(--gv-wh-fs);
  font-weight: 600;
  line-height: var(--gv-wh-lh);
  letter-spacing: -0.01em;
  color: var(--gv-ink);
  margin: 0 0 16px;
}
/* A real check inside a filled disc, not a dot: this mark means "done", and a dot is what the
   working cue used to be. Pure CSS so it costs no icon font and no request.
   ⚠ 18px IS ALSO WHAT `--gv-wh-ring` SAYS in both lockups that hold a tick, and the two must
   agree or the derived centring above centres the wrong height. Left hardcoded rather than
   parametrised because the `::after` check is hand-drawn for an 18px disc: resizing through a
   var would scale the circle and leave the check where it was. */
.gv-rm-bridge__tick {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gv-forest);
}
.gv-rm-bridge__tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.gv-rm-bridge__open { width: 100%; }

/* The honest exit. Quiet, not alarming: nothing is broken, it is just slower than usual. */
.gv-rm-bridge__fail {
  font-family: var(--gv-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gv-ink-2);
  margin: 0 0 8px;
}
.gv-rm-bridge__faillink {
  font-family: var(--gv-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gv-forest-deep);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* a11y touch target */
}
.gv-rm-bridge__faillink:hover,
.gv-rm-bridge__faillink:focus,
.gv-rm-bridge__faillink:visited,
.gv-rm-bridge__faillink:active { color: var(--gv-forest-deep); }

/* gc-signup's own markup, re-tokenized for this card (mirrors eligibility-embed.css). */
.gv-rm-bridge__gatehost .gcs { display: block; text-align: left; }
/* The embed's gate-button treatment, re-tokenized: a white control that sits UP off the
   panel's cream ground, and lifts a little further under the cursor. */
.gv-rm-bridge__gatehost .gcs-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gv-paper); border: 1px solid var(--gv-line); border-radius: var(--gv-r-sm);
  padding: 12px 16px; font-family: var(--gv-body); font-size: 14.5px; font-weight: 600;
  color: var(--gv-ink); cursor: pointer; min-height: 48px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.gv-rm-bridge__gatehost .gcs-google:hover {
  border-color: var(--gv-ink-4);
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.09);
}
@media (prefers-reduced-motion: reduce) {
  .gv-rm-bridge__gatehost .gcs-google { transition: none; }
}
.gv-rm-bridge__gatehost .gcs-google:disabled { opacity: 0.55; cursor: default; }
.gv-rm-bridge__gatehost .gcs-or {
  display: flex; align-items: center; gap: 10px; margin: 12px 0;
  font-family: var(--gv-body); font-size: 12px; color: var(--gv-ink-3);
}
.gv-rm-bridge__gatehost .gcs-or span { flex: 0 0 auto; }
.gv-rm-bridge__gatehost .gcs-or::before,
.gv-rm-bridge__gatehost .gcs-or::after { content: ""; flex: 1; height: 1px; background: var(--gv-line); }
.gv-rm-bridge__gatehost .gcs-form { display: flex; flex-direction: column; gap: 8px; }
.gv-rm-bridge__gatehost .gcs-name,
.gv-rm-bridge__gatehost .gcs-email,
.gv-rm-bridge__gatehost .gcs-pw {
  width: 100%; box-sizing: border-box; border: 1px solid var(--gv-line);
  border-radius: var(--gv-r-sm); padding: 12px 13px; min-height: 44px;
  font-family: var(--gv-body); font-size: 14px; color: var(--gv-ink); background: var(--gv-paper);
}
.gv-rm-bridge__gatehost .gcs-name:focus,
.gv-rm-bridge__gatehost .gcs-email:focus,
.gv-rm-bridge__gatehost .gcs-pw:focus {
  outline: 2px solid var(--gv-forest); outline-offset: -1px; border-color: var(--gv-forest);
}
.gv-rm-bridge__gatehost .gcs-email-btn {
  width: 100%; background: var(--gv-forest); color: #fff; border: 0;
  border-radius: var(--gv-r-sm); padding: 12px; min-height: 48px;
  font-family: var(--gv-body); font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.gv-rm-bridge__gatehost .gcs-email-btn:hover { background: var(--gv-forest-deep); }
.gv-rm-bridge__gatehost .gcs-email-btn:disabled { opacity: 0.55; cursor: default; }
.gv-rm-bridge__gatehost .gcs-err {
  margin-top: 9px; font-family: var(--gv-body); font-size: 12.5px; color: var(--gv-sienna-hover);
}
.gv-rm-bridge__gatehost .gcs-err:empty { margin-top: 0; }
.gv-rm-bridge__gatehost .gcs-toggle {
  margin-top: 11px; font-family: var(--gv-body); font-size: 12.5px; color: var(--gv-ink-3);
}
/* ⚠ inline-flex + min-height, NOT padding: 0. This is the one control in the expanded gate a
   returning member has to hit ("Already have an account? Sign in"), and it measured 16px tall
   at all nine widths — a third of the touch floor, inside the surface whose whole job is to
   convert. inline-flex keeps it inside its sentence while giving it a real box; the sentence
   is its own paragraph, so growing that line box disturbs no neighbouring rhythm. */
.gv-rm-bridge__gatehost .gcs-signin-link {
  background: none; border: 0; padding: 0 2px; color: var(--gv-forest-deep);
  font-family: var(--gv-body); font-size: 12.5px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px;
}
/* ⚠ COLLAPSED BY DEFAULT — and scoped to the GATE, not to the host, because the collapsed
   class lands on .gv-rm-bridge__gatehost ITSELF: `.gv-rm-bridge__gatehost .gcs--collapsed`
   would need a second, nested element and would silently match nothing. */
.gv-rm-bridge__gate .gcs--collapsed .gcs-or,
.gv-rm-bridge__gate .gcs--collapsed .gcs-form,
.gv-rm-bridge__gate .gcs--collapsed .gcs-toggle { display: none; }
.gv-rm-bridge__emailrow { margin-top: 8px; }
.gv-rm-bridge__gatehost .gcs-emaillink {
  background: none; border: 0; padding: 10px 4px; min-height: 44px;
  font-family: var(--gv-body); font-size: 13px; font-weight: 600;
  color: var(--gv-forest-deep); text-decoration: underline; cursor: pointer;
}
.gv-rm-bridge__gatehost .gcs-google:focus-visible,
.gv-rm-bridge__gatehost .gcs-email-btn:focus-visible,
.gv-rm-bridge__gatehost .gcs-signin-link:focus-visible,
.gv-rm-bridge__gatehost .gcs-emaillink:focus-visible {
  outline: 2px solid var(--gv-forest); outline-offset: 2px; border-radius: 6px;
}

@media (max-width: 480px) {
  .gv-rm-bridge__q { font-size: 15px; }
  .gv-rm-bridge__chip { font-size: 13px; padding: 10px 13px; }
  /* ⚠ THROUGH THE VAR, NEVER `font-size` DIRECTLY (F2). A plain `.gv-rm-bridge__building
     { font-size: 17.5px }` here would beat the base rule's `font-size: var(--gv-wh-fs)` and
     leave the ring centred on a line box that no longer exists — which is exactly the drift the
     derived offset was written to end. Setting the var moves the heading AND its mark together.
     ⚠ The confirmed state re-declares --gv-wh-fs at (0,0,2,0), so it still wins here. */
  .gv-rm-bridge__waithead,
  .gv-rm-bridge__ready,
  .gv-rm-bridge__confirmhead { --gv-wh-fs: 17.5px; }
  .gv-rm-bridge__expect { font-size: 13px; }
}

/* ★ 2026-09-03 account-profile provenance (member memory) */
.gv-provenance--account { margin-bottom: 6px; }
.gv-acct-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.gv-acct-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e8f0ea; color: #2d6a4f; font-size: 12.5px; font-weight: 600; }

/* 2026-09-23 — the SEO quiz's "Do I qualify?" links land on #gc-verdict-card; clear the 57px fixed header so the card's
   top (and its heading) is not under it. */
#gc-verdict-card { scroll-margin-top: 72px; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
 * VERDICT CARD v2 (2026-10-10) — design of record: dev-assets/verdict-redesign-2026-10-10/ (gvx.css)
 * Everything is scoped under .gv-card.gv-card--v2 (0,3,0+) so it wins over the v1 rules above without
 * touching them; `?gv2=0` removes the class and the card is v1 again.
 * One card, read top to bottom: the verdict, what it rests on, the other programs these answers clear,
 * the draft offer. Rules only inside the list. Sentence-case labels. One filled button per state.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.gv-card.gv-card--v2 {
  --x-paper: #FFFEFB; --x-cream: #FAF7F2; --x-line: #E9E3D8; --x-line-2: #DAD2C3;
  --x-ink: #1C1917; --x-ink-2: #4A443E; --x-ink-3: #736B62;
  --x-forest: #2D6A4F; --x-forest-deep: #1B4332; --x-sage: #EEF5EF; --x-sage-2: #E1ECE4;
  --x-amber: #B45309; --x-amber-ink: #6B4205; --x-amber-bg: #FBF4E2; --x-no-bg: #F7F2EC; --x-no-ink: #8A3418;
  --x-pad: 32px;
  overflow: hidden; border: 1px solid var(--x-line); border-left: 1px solid var(--x-line); border-radius: 16px; background: var(--x-paper);
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 14px 34px -16px rgba(28,25,23,.14); color: var(--x-ink);
}
.gv-card.gv-card--v2 .gv-inner { padding: 0; }
.gv-card.gv-card--v2 svg { display: block; flex: 0 0 auto; }
.gv-card.gv-card--v2 :focus-visible { outline: 3px solid rgba(27,67,50,.35); outline-offset: 2px; border-radius: 6px; }
/* anything v1 still renders above the header (account chips, a notice, the map-arrival panel) keeps the card's gutter */
.gv-card.gv-card--v2 .gv-inner > .gv-provenance, .gv-card.gv-card--v2 .gv-inner > .gv-acct-chips,
.gv-card.gv-card--v2 .gv-inner > .gv-fp-notice, .gv-card.gv-card--v2 .gv-inner > .gv-read,
.gv-card.gv-card--v2 .gv-inner > .gv-recheck,
.gv-card.gv-card--v2 .gv-inner > .gv-quizlink-row, .gv-card.gv-card--v2 .gv-inner > .gv-verdict:not(.gv2-head) { margin-left: var(--x-pad); margin-right: var(--x-pad); }
.gv-card.gv-card--v2 .gv-inner > .gv-provenance { margin-top: 16px; }
.gv-card.gv-card--v2 .gv-inner > .gv-quizlink-row { margin-bottom: 18px; }

/* ── the verdict ── */
.gv-card.gv-card--v2 .gv-verdict.gv2-head { display: block; margin: 0; padding: 20px var(--x-pad) 26px; border: 0; border-radius: 0; background: var(--x-sage); }
.gv-card.gv-card--v2 .gv2-head.gv-verdict--maybe { background: var(--x-amber-bg); }
.gv-card.gv-card--v2 .gv2-head.gv-verdict--no { background: var(--x-no-bg); }
.gv-card.gv-card--v2 .gv2-head__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.gv-card.gv-card--v2 .gv2-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 13.5px/1.3 var(--gv-body); color: var(--x-forest-deep); }
.gv-card.gv-card--v2 .gv2-eyebrow small { font-size: inherit; font-weight: 400; color: var(--x-ink-3); }
.gv-card.gv-card--v2 .gv-verdict--maybe .gv2-eyebrow { color: var(--x-amber-ink); }
.gv-card.gv-card--v2 .gv-verdict--no .gv2-eyebrow { color: var(--x-ink-2); }
.gv-card.gv-card--v2 .gv2-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--x-forest-deep); color: #fff; font: 800 12px/1 var(--gv-body); }
.gv-card.gv-card--v2 .gv-verdict--maybe .gv2-mark { background: var(--x-amber); }
.gv-card.gv-card--v2 .gv-verdict--no .gv2-mark { background: var(--x-ink-2); }
.gv-card.gv-card--v2 .gv2-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -8px -6px -8px 0; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: 600 13.5px var(--gv-body); color: var(--x-ink-2); text-decoration: underline; text-decoration-color: rgba(74,68,62,.3); text-underline-offset: 3px; }
.gv-card.gv-card--v2 .gv2-edit:hover { color: var(--x-ink); text-decoration-color: currentColor; }
.gv-card.gv-card--v2 .gv2-head .gv-verdict__text { display: block; margin: 0; padding: 0; }
.gv-card.gv-card--v2 .gv2-head .gv-verdict__status { margin: 10px 0 0; max-width: 20ch; font-family: var(--gv-display); font-size: 33px; font-weight: 600; line-height: 1.12; letter-spacing: -.014em; color: var(--x-forest-deep); text-wrap: balance; }
.gv-card.gv-card--v2 .gv2-head.gv-verdict--maybe .gv-verdict__status { color: var(--x-amber-ink); }
.gv-card.gv-card--v2 .gv2-head.gv-verdict--no .gv-verdict__status { color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-head .gv-verdict__reason, .gv-card.gv-card--v2 .gv2-head .gv-verdict__note { margin: 10px 0 0; max-width: 62ch; font: 400 15.5px/1.5 var(--gv-body); color: var(--x-ink-2); text-wrap: pretty; }
.gv-card.gv-card--v2 .gv2-read { margin: 10px 0 0; font: 400 15px/1.45 var(--gv-body); color: var(--x-ink-2); }
.gv-card.gv-card--v2 .gv2-read strong { font-weight: 600; color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-head .gv-vchange { margin: 10px 0 0; }
.gv-card.gv-card--v2 .gv2-head .gv-vchange__btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--x-line-2); border-radius: 10px; background: var(--x-paper); cursor: pointer; font: 600 14px var(--gv-body); color: var(--x-ink); text-decoration: none; }
/* the hook: a phone's first screen says what else these answers did, and jumps to it */
.gv-card.gv-card--v2 .gv2-hook { display: none; }
.gv-card.gv-card--v2 .gv2-lockdisc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--x-sage-2); color: var(--x-forest-deep); }

/* ── what the verdict rests on: grouped by what happens next, no rules between rows ── */
.gv-card.gv-card--v2 .gv2-ledger { display: grid; row-gap: 14px; padding: 20px var(--x-pad) 22px; border-top: 1px solid var(--x-line); }
.gv-card.gv-card--v2 .gv2-ledger:empty { display: none; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp { all: unset; display: grid; row-gap: 14px; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__group, .gv-card.gv-card--v2 .gv2-ledger .gv-unchecked, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats {
  all: unset; display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__lead, .gv-card.gv-card--v2 .gv2-ledger .gv-unchecked__lead, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats__lead {
  all: unset; display: block; grid-column: 1; padding-top: 8px; font: 600 13.5px/1.35 var(--gv-body); color: var(--x-ink-3); }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__promise { all: unset; display: block; grid-column: 1; grid-row: 2; margin-top: 3px; font: 400 12.5px/1.4 var(--gv-body); color: var(--x-ink-3); }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__list, .gv-card.gv-card--v2 .gv2-ledger .gv-unchecked__list, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats__list {
  all: unset; display: block; grid-column: 2; grid-row: 1 / span 3; list-style: none; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__item, .gv-card.gv-card--v2 .gv2-ledger .gv-unchecked__list li, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats__list li {
  all: unset; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 36px; padding: 4px 0; font: 400 15.5px/1.4 var(--gv-body); color: var(--x-ink); text-wrap: pretty; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__item--ask { min-height: 52px; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__mark { all: unset; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--x-forest-deep); color: #fff; font: 700 12px/1 var(--gv-body); }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__group--open .gv-rcp__mark, .gv-card.gv-card--v2 .gv2-emp--ask .gv-rcp__mark { background: #FDE9B8; color: var(--x-amber-ink); font-weight: 800; font-size: 13px; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__group--no .gv-rcp__mark { background: #F1DDD4; color: var(--x-no-ink); }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__text { all: unset; display: block; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__said { font-weight: 600; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__kind { display: block; font-size: 13px; color: var(--x-ink-3); }
/* a stated line the visitor can only confirm for themselves: a marker, not a box to tick */
.gv-card.gv-card--v2 .gv2-ledger .gv-unchecked__list li::before, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats__list li::before { content: ""; width: 22px; height: 22px; background: radial-gradient(circle, #9C9285 0 3.5px, transparent 4px); }
.gv-card.gv-card--v2 .gv2-ledger .gv-unchecked__list li::first-letter { text-transform: uppercase; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__btns { all: unset; display: inline-flex; gap: 8px; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__btn, .gv-card.gv-card--v2 .gv2-emp .gv-rcp__btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; min-width: 68px; min-height: 44px; padding: 0 16px; border: 1px solid var(--x-line-2); border-radius: 10px;
  background: var(--x-paper); cursor: pointer; font: 600 14.5px var(--gv-body); color: var(--x-ink); transition: background .2s, border-color .2s, color .2s; }
/* Hover only where a pointer can hover (2026-10-17): on a phone, and under a resting mouse when the card re-renders,
   the filled hover read as an answer already chosen ("No" pre-selected). */
@media (hover: hover) { .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__btn:hover, .gv-card.gv-card--v2 .gv2-emp .gv-rcp__btn:hover { border-color: var(--x-forest-deep); background: var(--x-forest-deep); color: #fff; } }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__btn:focus-visible, .gv-card.gv-card--v2 .gv2-emp .gv-rcp__btn:focus-visible { outline: 3px solid rgba(27,67,50,.35); outline-offset: 2px; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__change, .gv-card.gv-card--v2 .gv2-emp__change { all: unset; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; cursor: pointer; font: 600 13.5px var(--gv-body); color: var(--x-ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* headcount: asked once, as a question */
.gv-card.gv-card--v2 .gv2-emp { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin: -6px 0 0 208px; min-height: 52px; font: 400 15.5px/1.4 var(--gv-body); color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-emp__f { display: inline-flex; gap: 8px; }
.gv-card.gv-card--v2 .gv2-empwrap { display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.gv-card.gv-card--v2 .gv2-empwrap .gv2-emp { margin: 0; }
.gv-card.gv-card--v2 .gv2-emp__lab { margin: 0; padding-top: 14px; font: 600 13.5px/1.35 var(--gv-body); color: var(--x-ink-3); }
.gv-card.gv-card--v2 .gv2-gate__host .gv2-gate__free { margin: 8px 0 0; }
.gv-card.gv-card--v2 .gv2-emp__in { width: 96px; min-height: 44px; padding: 0 12px; border: 1px solid var(--x-line-2); border-radius: 10px; background: #fff; font: 400 16px var(--gv-body); color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-emp__in:focus { outline: 0; border-color: var(--x-forest); box-shadow: 0 0 0 3px rgba(45,106,79,.16); }
.gv-card.gv-card--v2 .gv2-emp__h { grid-column: 2 / -1; margin-top: 2px; font: 400 12.5px/1.4 var(--gv-body); color: var(--x-ink-3); }
.gv-card.gv-card--v2 .gv2-also { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; margin: 0 0 -10px 208px; font: 600 14px var(--gv-body); color: var(--x-ink-2);
  text-decoration: underline; text-decoration-color: rgba(74,68,62,.3); text-underline-offset: 3px; }
.gv-card.gv-card--v2 .gv2-also:hover { color: var(--x-ink); text-decoration-color: currentColor; }

/* ── the other programs these answers clear ── */
.gv-card.gv-card--v2 .gv-rm { margin: 0; padding: 26px var(--x-pad) 28px; border: 0; border-top: 1px solid var(--x-line); border-radius: 0; background: var(--x-cream); scroll-margin-top: 80px; }
.gv-card.gv-card--v2 .gv-rm[data-gvrm-state="initial"] { padding: 4px var(--x-pad) 16px; border-top: 0; background: none; }
.gv-card.gv-card--v2 .gv2-list__h { margin: 0; padding: 0; border: 0; font-family: var(--gv-display); font-size: 27px; font-weight: 500; line-height: 1.18; letter-spacing: -.012em; color: var(--x-ink); text-wrap: balance; }
.gv-card.gv-card--v2 .gv2-list__h strong { font-weight: 600; color: var(--x-forest-deep); }
.gv-card.gv-card--v2 .gv2-list__sub { margin: 8px 0 0; max-width: none; font: 400 15px/1.5 var(--gv-body); color: var(--x-ink-2); text-wrap: pretty; }
.gv-card.gv-card--v2 .gv2-rows { display: block; margin: 18px 0 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--x-line-2); border-radius: 14px; background: var(--x-paper); box-shadow: 0 10px 24px -20px rgba(28,25,23,.3); }
.gv-card.gv-card--v2 .gv2-rows > li { margin: 0; padding: 0; list-style: none; }
.gv-card.gv-card--v2 .gv2-rows > li + li { border-top: 1px solid var(--x-line); }
.gv-card.gv-card--v2 .gv2-rows__lab { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px !important; background: var(--x-sage); font: 600 13.5px var(--gv-body); color: var(--x-forest-deep); }
.gv-card.gv-card--v2 .gv2-row { all: unset; box-sizing: border-box; display: grid; align-items: center; width: 100%; cursor: pointer; font-family: var(--gv-body); color: var(--x-ink); transition: background .2s; }
.gv-card.gv-card--v2 .gv2-row:hover { background: #F6FAF7; }
.gv-card.gv-card--v2 .gv2-row:focus-visible { outline: 3px solid rgba(27,67,50,.35); outline-offset: -3px; }
.gv-card.gv-card--v2 .gv2-row__n { grid-area: n; align-self: start; padding-top: 1px; font-family: var(--gv-display); font-size: 20px; font-weight: 500; line-height: 1.15; color: #A1978A; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.gv-card.gv-card--v2 .gv2-row--locked { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "n kind amt" "n why amt"; column-gap: 14px; row-gap: 4px; min-height: 68px; padding: 13px 18px; }
.gv-card.gv-card--v2 .gv2-row__kind { grid-area: kind; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.gv-card.gv-card--v2 .gv2-row__lk { display: inline-block; margin-left: 8px; color: #A1978A; vertical-align: -1px; }
.gv-card.gv-card--v2 .gv2-row__amt { grid-area: amt; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--x-forest-deep); text-align: right; white-space: nowrap; }
.gv-card.gv-card--v2 .gv2-row__amt.is-soft { font-size: 13.5px; color: var(--x-forest); }
.gv-card.gv-card--v2 .gv2-row__why { grid-area: why; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; line-height: 1.4; color: var(--x-ink-2); }
.gv-card.gv-card--v2 .gv2-row__why b { font-weight: 600; color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-row__fit { display: inline-flex; align-items: baseline; gap: 6px; }
.gv-card.gv-card--v2 .gv2-row__fit svg { position: relative; top: 1px; color: var(--x-forest); }
.gv-card.gv-card--v2 .gv2-row__open { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #FDEFC8; font-size: 13px; font-weight: 600; color: var(--x-amber-ink); white-space: nowrap; }
.gv-card.gv-card--v2 .gv2-row--more { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "n kind"; column-gap: 14px; min-height: 52px; padding: 10px 18px; }
.gv-card.gv-card--v2 .gv2-row--more .gv2-row__n { align-self: center; padding: 0; font-size: 15px; color: #6F665C; }
.gv-card.gv-card--v2 .gv2-row--more .gv2-row__kind { font-size: 15px; color: var(--x-ink-2); }
.gv-card.gv-card--v2 .gv2-row--open { grid-template-columns: 30px minmax(0, 1fr) auto 18px; grid-template-areas: "n title amt go" "n why amt go"; column-gap: 14px; row-gap: 4px; min-height: 68px; padding: 13px 18px; text-decoration: none; border: 0; border-radius: 0; background: transparent; }
.gv-card.gv-card--v2 .gv2-row--open .gv2-row__n { color: var(--x-forest); }
.gv-card.gv-card--v2 .gv2-row--open.is-first { background: #F4F9F5; }
.gv-card.gv-card--v2 .gv2-row__title { grid-area: title; font-size: 16.5px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.gv-card.gv-card--v2 .gv2-row__tag { display: inline-block; margin-right: 9px; padding: 2px 8px; border-radius: 999px; background: var(--x-forest-deep); font: 600 11.5px/1.5 var(--gv-body); font-style: normal; color: #fff; vertical-align: 2px; white-space: nowrap; }
.gv-card.gv-card--v2 .gv2-row__go { grid-area: go; color: #B4AA9A; transition: transform .2s, color .2s; }
.gv-card.gv-card--v2 .gv2-row--open:hover .gv2-row__go { transform: translateX(3px); color: var(--x-forest-deep); }
.gv-card.gv-card--v2 .gv2-row--link { grid-template-columns: minmax(0, 1fr) 18px; column-gap: 14px; min-height: 50px; padding: 10px 18px 10px 62px; font-size: 14.5px; color: var(--x-ink-2); text-decoration: none; }
.gv-card.gv-card--v2 .gv2-row--link svg { color: #B4AA9A; }

/* the gate: one button that says what it does, "free" where the thumb is, and what the account keeps */
.gv-card.gv-card--v2 .gv2-gate { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; column-gap: 28px; margin-top: 18px; }
.gv-card.gv-card--v2 .gv2-gate__host { margin: 0; }
.gv-card.gv-card--v2 .gv2-gate__host .gcs-google, .gv-card.gv-card--v2 .gv2-gate__host .gv-rm-bridge__gatecta {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 54px; margin: 0; padding: 0 18px; border: 0; border-radius: 12px; background: var(--x-forest-deep); cursor: pointer;
  font: 600 16.5px var(--gv-body); color: #fff; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 20px -12px rgba(27,67,50,.75); transition: background .2s, transform .2s; }
.gv-card.gv-card--v2 .gv2-gate__host .gcs-google:hover, .gv-card.gv-card--v2 .gv2-gate__host .gv-rm-bridge__gatecta:hover { background: #24573f; transform: translateY(-1px); }
.gv-card.gv-card--v2 .gv2-gate__host .gcs-google svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #fff; }
.gv-card.gv-card--v2 .gv2-gate__host.gcs--collapsed .gcs-or, .gv-card.gv-card--v2 .gv2-gate__host.gcs--collapsed .gcs-form, .gv-card.gv-card--v2 .gv2-gate__host.gcs--collapsed .gcs-toggle { display: none; }
.gv-card.gv-card--v2 .gv2-gate__host .gv-rm-bridge__emailrow { margin: 2px 0 0; text-align: center; }
.gv-card.gv-card--v2 .gv2-gate__host .gcs-emaillink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font: 600 14px var(--gv-body); color: var(--x-forest-deep);
  text-decoration: underline; text-decoration-color: rgba(27,67,50,.35); text-underline-offset: 3px; }
.gv-card.gv-card--v2 .gv2-gate__free { margin: 0; font: 400 14px/1.4 var(--gv-body); color: var(--x-ink-2); text-align: center; }
.gv-card.gv-card--v2 .gv2-gate__free b { font-weight: 700; color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-gate__keep { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 0; padding-top: 15px; max-width: none; font: 400 14.5px/1.5 var(--gv-body); color: var(--x-ink-2); text-wrap: pretty; }
.gv-card.gv-card--v2 .gv2-gate__keep svg { margin-top: 3px; color: var(--x-forest); }
.gv-card.gv-card--v2 .gv2-gate__keep b { font-weight: 600; color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-rows > li.gv2-rows__gate { padding: 18px 20px 20px; background: #F4F9F5; }
.gv-card.gv-card--v2 .gv2-rows__gate .gv2-gate { margin-top: 0; }
.gv-card.gv-card--v2 .gv2-gate__pick { grid-column: 1 / -1; margin: 0 0 14px; font: 600 15.5px/1.4 var(--gv-body); color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-row.is-picked { background: #F4F9F5; box-shadow: inset 3px 0 0 var(--x-forest); }
.gv-card.gv-card--v2 .gv2-row { -webkit-tap-highlight-color: transparent; }   /* the phone's blue tap flash covered the picked row */
.gv-card.gv-card--v2 .gv2-nudge { border-radius: 12px; animation: gv2-nudge .7s cubic-bezier(.16,1,.3,1); }
/* v1's row arrow has no anchor on a v2 row */
.gv-card.gv-card--v2 .gv2-row::before, .gv-card.gv-card--v2 .gv2-row::after { content: none; }
.gv-card.gv-card--v2 .gv2-list__h:focus { outline: none; }
.gv-card.gv-card--v2 .gv2-ledger .gv-rcp__change:focus-visible, .gv-card.gv-card--v2 .gv2-emp__change:focus-visible, .gv-card.gv-card--v2 .gv2-edit:focus-visible { outline: 3px solid rgba(27,67,50,.35); outline-offset: 2px; border-radius: 6px; }
/* while the roadmap builds, v1 collapses the list to a strip: in v2 the headline stays and the rows step aside */
.gv-card.gv-card--v2 .gv-rm--strip .gv2-list__h { display: block; }
.gv-card.gv-card--v2 .gv-rm--strip .gv2-list__sub, .gv-card.gv-card--v2 .gv-rm--strip .gv2-rows, .gv-card.gv-card--v2 .gv-rm--strip .gv2-ok { display: none; }
@keyframes gv2-nudge { 0% { box-shadow: 0 0 0 0 rgba(27,67,50,.45); } 100% { box-shadow: 0 0 0 14px rgba(27,67,50,0); } }

/* right after sign-up: the names are drawn in, then what was saved and the one next step */
.gv-card.gv-card--v2 .gv2-row.is-opening { animation: gv2-wash 1.1s ease-out backwards; }
.gv-card.gv-card--v2 .gv2-row.is-opening .gv2-row__title { animation: gv2-in .55s cubic-bezier(.16,1,.3,1) both; }
.gv-card.gv-card--v2 .gv2-row.is-opening .gv2-row__n { animation: gv2-pop .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes gv2-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes gv2-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gv2-wash { from { background: #DCEBDF; } }
.gv-card.gv-card--v2 .gv2-ok { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--x-sage); }
.gv-card.gv-card--v2 .gv2-ok .gv-rcp__mark { all: unset; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--x-forest-deep); color: #fff; font: 700 12px/1 var(--gv-body); }
.gv-card.gv-card--v2 .gv2-ok p { margin: 0; max-width: none; font: 400 14.5px/1.5 var(--gv-body); color: var(--x-ink-2); }
.gv-card.gv-card--v2 .gv2-ok b { font-weight: 700; color: var(--x-forest-deep); }
.gv-card.gv-card--v2 .gv2-ok__saved { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; color: var(--x-ink); }
.gv-card.gv-card--v2 .gv2-ok__saved svg { margin-top: 4px; color: var(--x-forest); }
/* the roadmap step (v1 machinery, v2 clothes) */
.gv-card.gv-card--v2 .gv-rm-bridge { margin: 18px 0 0; padding: 0; border: 0; background: none; }
.gv-card.gv-card--v2 .gv-rm-bridge[data-gvb-state="cta"] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "h btn" "lead btn"; align-items: center; column-gap: 28px; }
.gv-card.gv-card--v2 .gv2-next__h { grid-area: h; margin: 0; font-family: var(--gv-display); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--x-ink); }
.gv-card.gv-card--v2 .gv-rm-bridge[data-gvb-state="cta"] .gv-rm-bridge__lead { grid-area: lead; margin: 5px 0 0; font: 400 14.5px/1.5 var(--gv-body); color: var(--x-ink-2); }
.gv-card.gv-card--v2 .gv-rm-bridge__cta { grid-area: btn; width: 100%; min-height: 54px; margin: 0; border: 0; border-radius: 12px; background: var(--x-forest-deep); font: 600 16.5px var(--gv-body); color: #fff; }
.gv-card.gv-card--v2 .gv-rm-bridge__cta:hover { background: #24573f; }
.gv-card.gv-card--v2 .gv-rm-bridge__q { margin: 0 0 12px; font-family: var(--gv-display); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--x-ink); }

/* ── the draft offer: same words, one field, one outline button ── */
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "head form" "head fine"; align-items: start; column-gap: 40px;
  margin: 0; padding: 24px var(--x-pad) 26px; border: 0; border-top: 1px solid var(--x-line); border-radius: 0; background: var(--x-paper); scroll-margin-top: 80px; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__head { grid-area: head; margin: 0; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__title { margin: 0 0 6px; font-family: var(--gv-display); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--x-ink); }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__lead { margin: 0; font: 400 14.5px/1.5 var(--gv-body); color: var(--x-ink-2); text-wrap: pretty; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__form { grid-area: form; display: flex; gap: 8px; margin: 2px 0 0; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-input { flex: 1 1 auto; min-width: 0; min-height: 50px; margin: 0; border: 1px solid var(--x-line-2); border-radius: 10px; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) #gv-draft-submit { flex: 0 0 auto; width: auto; min-height: 50px; margin: 0; padding: 0 18px; border: 1.5px solid var(--x-forest-deep); border-radius: 10px; background: transparent; font: 600 15px var(--gv-body); color: var(--x-forest-deep); white-space: nowrap; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) #gv-draft-submit:hover { background: var(--x-forest-deep); color: #fff; }
/* the empty-website error is its own line under the field, not a third item squeezing it (2026-10-22 sweep) */
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__form { flex-wrap: wrap; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__form .gv-input { flex-basis: 0; }   /* wrap must move only the error, never the button */
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__form .gv-err { flex: 1 0 100%; order: 3; margin: 2px 0 0; }
.gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__fine { grid-area: fine; margin: 10px 0 0; font: 400 12.5px/1.5 var(--gv-body); color: var(--x-ink-3); }

/* ── phone ── */
@media (max-width: 700px) {
  .gv-card.gv-card--v2 { --x-pad: 18px; border-radius: 14px; }
  .gv-card.gv-card--v2 .gv-verdict.gv2-head { padding: 14px var(--x-pad) 20px; }
  .gv-card.gv-card--v2 .gv2-head .gv-verdict__status { max-width: none; margin-top: 6px; font-size: 26px; text-wrap: pretty; }
  .gv-card.gv-card--v2 .gv2-hook { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 58px; margin: 16px calc(var(--x-pad) * -1) -20px; padding: 10px var(--x-pad);
    border-top: 1px solid rgba(28,25,23,.07); background: rgba(255,255,255,.62); color: var(--x-ink); text-decoration: none; font: 400 15.5px/1.35 var(--gv-body); }
  .gv-card.gv-card--v2 .gv2-hook__t b { font-weight: 700; }
  .gv-card.gv-card--v2 .gv2-hook__go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--x-forest-deep); white-space: nowrap; }
  .gv-card.gv-card--v2 .gv2-ledger { row-gap: 4px; padding: 12px var(--x-pad) 14px; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp { row-gap: 4px; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__group, .gv-card.gv-card--v2 .gv2-ledger .gv-unchecked, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats { grid-template-columns: minmax(0, 1fr); }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__lead, .gv-card.gv-card--v2 .gv2-ledger .gv-unchecked__lead, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats__lead { padding: 8px 0 0; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__group--met .gv-rcp__lead { display: none; }      /* a tick needs no caption */
  /* …unless a caveat sits right above the ticks: without the caption "✓ Open across Canada" read as part of
     "One thing to know: Applications aren't open right now" (2026-10-22 sweep, composition lens) */
  .gv-card.gv-card--v2 .gv2-ledger .gv-caveats ~ .gv-rcp .gv-rcp__group--met:first-child .gv-rcp__lead { display: block; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__promise { display: none; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__list, .gv-card.gv-card--v2 .gv2-ledger .gv-unchecked__list, .gv-card.gv-card--v2 .gv2-ledger .gv-caveats__list { grid-column: 1; grid-row: auto; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__item--ask { grid-template-columns: 22px minmax(0, 1fr); row-gap: 8px; align-items: start; padding: 6px 0 4px; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__item--ask .gv-rcp__btns { grid-column: 2; }
  .gv-card.gv-card--v2 .gv2-ledger .gv-rcp__btn { min-width: 84px; }
  .gv-card.gv-card--v2 .gv2-emp { grid-template-columns: 22px minmax(0, 1fr); row-gap: 8px; align-items: start; margin: 4px 0 0; }
  .gv-card.gv-card--v2 .gv2-empwrap { grid-template-columns: minmax(0, 1fr); }
  .gv-card.gv-card--v2 .gv2-emp__lab { padding: 8px 0 0; }
  .gv-card.gv-card--v2 .gv2-emp__f { grid-column: 2; }
  .gv-card.gv-card--v2 .gv2-emp--met { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; }
  .gv-card.gv-card--v2 .gv2-also { margin: 6px 0 -8px; }
  .gv-card.gv-card--v2 .gv-rm { padding: 22px var(--x-pad) 22px; }
  .gv-card.gv-card--v2 .gv2-list__h { font-size: 23px; }
  .gv-card.gv-card--v2 .gv2-list__sub { font-size: 14.5px; }
  /* the list runs to the card's edges: no box inside a box on a small screen */
  .gv-card.gv-card--v2 .gv2-rows { margin: 16px calc(var(--x-pad) * -1) 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  .gv-card.gv-card--v2 .gv2-rows__lab { padding: 8px var(--x-pad) !important; }
  .gv-card.gv-card--v2 .gv2-row__n { font-size: 18px; }
  .gv-card.gv-card--v2 .gv2-row--locked { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "n kind" "n amt" "n why"; column-gap: 12px; row-gap: 3px; padding: 13px var(--x-pad); }
  .gv-card.gv-card--v2 .gv2-row__amt { font-size: 16px; text-align: left; white-space: normal; }
  .gv-card.gv-card--v2 .gv2-row__because { display: none; }
  .gv-card.gv-card--v2 .gv2-row--open.is-first .gv2-row__because { display: inline; }
  .gv-card.gv-card--v2 .gv2-row--more { grid-template-columns: auto minmax(0, 1fr); padding: 10px var(--x-pad); column-gap: 12px; }
  .gv-card.gv-card--v2 .gv2-row--more .gv2-row__n { min-width: 24px; font-size: 13px; }
  .gv-card.gv-card--v2 .gv2-row--open { grid-template-columns: 24px minmax(0, 1fr) 18px; grid-template-areas: "n title go" "n amt amt" "n why why"; column-gap: 12px; padding: 14px var(--x-pad); }
  .gv-card.gv-card--v2 .gv2-row__tag { display: table; margin: 0 0 5px; }
  .gv-card.gv-card--v2 .gv2-row--link { padding: 10px var(--x-pad) 10px calc(var(--x-pad) + 36px); }
  .gv-card.gv-card--v2 .gv2-gate { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .gv-card.gv-card--v2 .gv2-rows > li.gv2-rows__gate { padding: 14px var(--x-pad) 16px; }
  .gv-card.gv-card--v2 .gv2-gate__keep { padding-top: 10px; }
  .gv-card.gv-card--v2 .gv-rm-bridge[data-gvb-state="cta"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "lead" "btn"; row-gap: 0; }
  .gv-card.gv-card--v2 .gv-rm-bridge__cta { margin-top: 14px; }
  .gv-card.gv-card--v2 .gv-rm-bridge__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gv-card.gv-card--v2 .gv-rm-bridge__chip { min-height: 52px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.25; text-align: left; white-space: normal; }
  .gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "fine"; padding: 20px var(--x-pad) 22px; }
  .gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__form { flex-direction: column; margin-top: 14px; }
  .gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) #gv-draft-submit { width: 100%; }
  .gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__form .gv-input { flex-basis: auto; }   /* stacked: size by content */
  .gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) .gv-draft__form .gv-err { order: 1; margin: -2px 0 2px; }   /* stacked: the error sits under the field it is about, above the button */
  .gv-card.gv-card--v2 .gv-draft:not(.gv-draft--alt) #gv-draft-submit { order: 2; }
  /* the $29 box's parts list (draft-surface.js areList) reads before the field it explains (2026-10-22 sweep) */
  .gv-card.gv-card--v2 .gv-draft.are-up:not(.gv-draft--alt) { grid-template-areas: "head" "list" "form" "fine"; }
  .gv-card.gv-card--v2 .gv-draft.are-up:not(.gv-draft--alt) .are-parts { grid-area: list; margin: 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .gv-card.gv-card--v2 *, .gv-card.gv-card--v2 *::before { animation: none !important; transition: none !important; } }

/* Intro, known province (2026-10-17): the pre-selected province gets its own start button
   (a pre-selected select never fires `change`). Full width on a phone, beside nothing. */
.gv-q1 .gv-q1-go { display: block; width: 100%; margin-top: 10px; min-height: 48px; }
.gv-q1 .gv-q1-go[hidden] { display: none; }