/* ═══════════════════════════════════════════════════════════════════════════
   site.css: THE ADDITIONS FILE (boardCss.additionsFile). Every vendored sheet in public/css/ is the approved board byte-for-byte
   (scripts/check-board-css.mjs FAILS on one byte of drift); a rule the production site needs that the approved design does not
   carry lives HERE, with its reason, and is what the owner reviews at the gate. Tokens only (no new colours, faces or scales).
   T1, PHASE 2 wave B0, 2026-10-24.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- 0. RUNBOOK PHASE 2 required tokens (aliases of the approved tokens; body overflow-x: clip is already base.css) ---------- */
:root { --header-height: var(--nav-h, 64px); --brand-accent: var(--dusty-blue); --color-primary-rgb: 25, 25, 25; }

/* ---------- 1. GBP H2s on the homepage (ARCHITECTURE §1, D3 APPROVED by the owner 2026-10-24) ----------
   Three approved sections carry their exact GBP category H2 IN THE APPROVED EYEBROW PILL SHELL, and their large voice line keeps
   the H2 look as a non-heading display <p>. The pill classes (A .v1-eyebrow, B .v1b-kicker) already set the pill's family, size,
   tracking, weight and line-height over the element h2 rule; these rules only undo the element-scoped h2 rules that would still
   reach a pill (B's max-width: 15em / 9em, the orbit's motion font-size) and give the display <p> the h2 metrics. */
[data-variant] h2.rv-gbp-h2 { max-width: none; text-wrap: nowrap; }
[data-variant="B"].v1b-phases .v1b-orbit-head h2.v1b-kicker.rv-gbp-h2,
html [data-variant="B"].v1b-phases .v1b-orbit-head h2.v1b-kicker.rv-gbp-h2 { max-width: none; font-size: var(--utility-size); line-height: 1.2; color: var(--fg-on-ink); }
.rv-h2-display { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--h2-size); line-height: 1.0; letter-spacing: -0.02em; text-wrap: balance; }
.rv-h2-display em { font-style: italic; }
[data-variant="B"] .v1b-orbit-head .rv-h2-display { color: var(--fg-on-ink); max-width: 9em; }
@media (min-width: 1024px) {
  [data-variant="B"].v1b-phases:is(.rv-motion *) .v1b-orbit-head .rv-h2-display { font-size: clamp(44px, 4vw, 60px); }
}
/* the answer capsule under the display line (A bands; the orbit's capsule uses the approved .v1b-orbit-intro) */
[data-variant="A"] .rv-gbp-capsule { margin-top: 24px; max-width: 44ch; color: var(--fg-muted); }
[data-variant="A"] .rv-gbp-capsule a,
[data-variant="B"] .v1b-orbit-intro a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- 2. The SHORT veterans block in the condition router's veterans row (ARCHITECTURE §5, owner ruling 4) ----------
   It continues the row (same column as the row's description, the same muted body type) and sits OUTSIDE the row link (a link in a
   link is invalid HTML). Desktop: under the description column (5fr | 6fr | 56px row grid); 390: full width. */
/* the same column grid as the approved row (approved.css X1: 104px thumb | 5fr | 6fr | 56px; 3 columns when the peek replaces the
   thumbnails; 76px | 1fr | 48px at 390 with the description spanning the first two), so the block sits under the description */
[data-variant="A"] .rv-who-vet { display: grid; grid-template-columns: 104px minmax(0, 5fr) minmax(0, 6fr) 56px; column-gap: 32px; padding: 0 0 40px; margin-top: -16px; }
[data-variant="A"] .rv-who-vet > * { grid-column: 3; max-width: 52ch; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  [data-variant="A"]:is(.rv-motion *) .rv-who-vet { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 56px; }
  [data-variant="A"]:is(.rv-motion *) .rv-who-vet > * { grid-column: 2; }
}
[data-variant="A"] .rv-who-vet-p { color: var(--fg-muted); }
[data-variant="A"] .rv-who-vet-p + .rv-who-vet-p { margin-top: 12px; }
[data-variant="A"] .rv-who-vet a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
[data-variant="A"] .rv-who-vet-note { font-size: 14px; }
@media (max-width: 767.98px) {
  [data-variant="A"] .rv-who-vet { grid-template-columns: 76px minmax(0, 1fr) 48px; column-gap: 16px; padding-bottom: 30px; margin-top: -14px; }
  [data-variant="A"] .rv-who-vet > * { grid-column: 1 / 3; font-size: 16px; }
  [data-variant="A"] .rv-who-vet .rv-who-vet-note { font-size: 14px; }
}

/* ---------- 3. The folded towns on the location card (ARCHITECTURE §5, D1): one line per town inside the approved .v1-areas block ---------- */
[data-variant="A"] .rv-towns { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
[data-variant="A"] .rv-town { break-inside: avoid; padding: 2px 0; }
[data-variant="A"] .rv-areas-counties { margin-top: 10px; }
@media (max-width: 767.98px) { [data-variant="A"] .rv-towns { columns: 1; } }

/* ---------- 3b. Authority links ([R14]: >= 1 external authority link on a money page) rendered in their slot as one sentence
   (authority_links[].lead + the linked .text), in the slot's own muted body type ---------- */
.rv-authority { color: var(--fg-muted); font-size: 15px; line-height: 1.6; }
.rv-authority a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* GATE 2 FX (2026-10-24, census contrast ADJUST): the same line inside an ink band or the red-flag card (veterans record, press TV
   band, the service compare table, the condition flag card) took the paper colours = 2.6:1 text and a 1:1 link. On ink: the
   board's own on-ink pair (--fg-on-ink-muted text, --fg-on-ink link), AA on --bg-ink / --ink. */
.rvi-g-ink .rv-authority, .rvi-card--flag .rv-authority { color: var(--fg-on-ink-muted); }
.rvi-g-ink .rv-authority a, .rvi-card--flag .rv-authority a { color: var(--fg-on-ink); }

/* ---------- 4. SENTINEL pages (structure only, noindex; never deployed: deploy.mjs refuses them) ---------- */
.rv-sentinel { padding: calc(var(--nav-h, 72px) + 96px) 0 120px; background: var(--bg); }
.rv-sentinel-k { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-utility); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.rv-sentinel-k .rv-glyph { width: 26px; height: auto; }
.rv-sentinel-h1 { margin-top: 24px; font-family: var(--font-display); font-size: var(--h2-size); line-height: 1.04; max-width: 18em; }
.rv-sentinel-m { margin-top: 24px; font-family: var(--font-utility); font-size: 13px; letter-spacing: .14em; color: var(--fg-muted); }

/* ---------- B3 (2026-10-24, P3 IR-6): copy.ts formPrivacyNote under EVERY booking host (contract §4) ----------
   The approved home and Y3 rails draw no note under the host; the note is set like the batch rails' own privacy notes
   (add-svc / add-system .rvb1-form-privacy, add-cond .rvc-form-note): small muted type under the form card. Tokens only. */
.rv-form-privacy { margin-top: 14px; max-width: 60ch; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }

/* ---------- GATE 2 FX (2026-10-24) ---------- */
/* R-15: a service / lab whose planned hero (IMAGE_MANIFEST) is not produced yet shows the neutral rings texture, never the lab tubes
   still (figure[data-media-pending] keeps the gap greppable for Phase 4). Same 5:4 frame as the hero still; tokens only. */
[data-variant="I"] .rvi-hero-texture { display: grid; place-items: center; aspect-ratio: 5 / 4; background: radial-gradient(120% 90% at 70% 20%, var(--paper) 0%, var(--stone) 62%, var(--taupe) 100%); --rings-ink: color-mix(in srgb, var(--fg) 16%, var(--stone)); --rings-gap: var(--stone); }
[data-variant="I"] .rvi-hero-texture-rings { width: 72%; }
/* row 66: the approved lab still's caption, under the trust chips */
[data-variant="I"] .rvi-hero-cap span.rvi-hero-illus { font-size: 13px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
/* R-26: the footer's veterans link, under the phase list */
.rv-footer-more { margin-top: 28px; }
/* score-only proof band (no bound review): the head alone, so the band closes up around it (was ~550 px of ink for one score) */
[data-variant="A"].v1-band.rv-proof-score { padding-block: clamp(72px, 8vw, 112px); }
[data-variant="A"].rv-proof-score .v1-proof-head { margin-bottom: 0; }

/* ---------- PHASE 5 (TASK VC, 2026-10-25) ---------- */
/* The ticker ribbon's static state (WORLD-BRIEF field 8: reduced motion / no JS = "static row"): the one real set wraps so every
   word is on screen at 390 (the row clipped "Ask about financing" off the right edge); the aria-hidden loop copies stay out of it.
   The trailing ring (the loop seam) is dropped in the static row. Motion on (html.rv-motion) is untouched: B.js runs the ticker
   exactly as approved. Tokens only. */
html:not(.rv-motion) [data-variant="B"] .v1b-ribbon-track { width: auto; }
html:not(.rv-motion) [data-variant="B"] .v1b-ribbon-set { flex-wrap: wrap; white-space: normal; row-gap: 12px; padding-inline: var(--gutter); }
html:not(.rv-motion) [data-variant="B"] .v1b-ribbon-copy { display: none; }
html:not(.rv-motion) [data-variant="B"] .v1b-ribbon-set > .v1b-ribbon-o:last-child { display: none; }

/* ---------- PHASE 5 close (TASK FX3, 2026-10-25): font-swap fallbacks (TASK FX3, PHASE 5 close, owner 2026-10-25: "show the main headline straight away") ----------
   The hero H1 / display line / lede now paint at first paint (no entrance on those three; the CTA row, chips, rating and rings keep
   theirs), so the swap from the local fallback to the self-hosted face must not reflow them. Each web face gets a METRIC-ONLY alias
   of the system face the stack already falls back to (Times New Roman / Arial), sized to the same advance width and vertical
   metrics: size-adjust = measured width ratio of the site's own copy (Chromium canvas, tools/fx3-font-width.mjs); ascent / descent
   = the face's OS/2 typo metrics (USE_TYPO_METRICS set; tools/fx3-font-metrics.mjs) / size-adjust. No new face is shown: the
   approved Playfair Display and Manrope still render once loaded; only the pre-swap frame changes. */
@font-face { font-family: 'RV Playfair Fallback'; font-style: normal; font-weight: 400;
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos');
  size-adjust: 109.81%; ascent-override: 98.53%; descent-override: 22.86%; line-gap-override: 0%; }
@font-face { font-family: 'RV Playfair Fallback'; font-style: italic; font-weight: 400;
  src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('Tinos Italic');
  size-adjust: 104.90%; ascent-override: 103.15%; descent-override: 23.93%; line-gap-override: 0%; }
@font-face { font-family: 'RV Manrope Fallback'; font-style: normal; font-weight: 100 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 101.40%; ascent-override: 105.13%; descent-override: 29.59%; line-gap-override: 0%; }
@font-face { font-family: 'RV Manrope Fallback'; font-style: normal; font-weight: 501 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 98.17%; ascent-override: 108.59%; descent-override: 30.56%; line-gap-override: 0%; }
/* The two approved Playfair Display faces (same files and unicode-range as the vendored fonts.css, which is no longer render-blocking:
   BaseLayout), with font-display: optional: preloaded, so they paint the display lines at once on a normal connection, and on a slow
   one the matched fallback stays for that page instead of re-wrapping a headline after it painted (the swap re-wrapped hero display
   lines at 412 / 430 / 1440 px, CLS up to 0.21). Manrope keeps swap (the loader adds it after the first paint). */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: optional;
  src: url('/fonts/playfair-display-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: optional;
  src: url('/fonts/playfair-display-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.w-v1 {
  --font-display: 'Playfair Display', 'RV Playfair Fallback', 'Times New Roman', serif;
  --font-body: 'Manrope', 'RV Manrope Fallback', system-ui, sans-serif;
  --font-utility: 'Manrope', 'RV Manrope Fallback', system-ui, sans-serif;
}
/* TASK FX3: the src-less Unbounce frame (rv-forms.js sets its src near the viewport) is hidden with JS off, where the <noscript> frame
   beside it carries the form; both take the approved .rv-ub-host .rv-ub-frame box. */
html:not(.js) .rv-ub-host .rv-ub-frame[data-ub-src],
html:not(.js) .rvb1-ghl-host .rvb1-ghl-frame[data-ghl-src],
html:not(.js) .rvb1-map-frame[data-lazy-src] { display: none; }
/* TASK FX3: a [data-rv-defer] holder's picture waits for rv-forms.js (JS on only; with JS off the attribute is inert). */
html.js [data-rv-defer] > picture { display: none; }
/* TASK FX3: until the body scripts have run (the loader sets html.rv-ready after rv-boot.js), the header uses its approved no-JS
   fallbacks (nav.css html:not(.js) rules): panels on :hover / :focus-within, the plain burger link and the :target sheet. */
html.js:not(.rv-ready) .rvn-item--drop:hover > .rvn-panel,
html.js:not(.rv-ready) .rvn-item--drop:focus-within > .rvn-panel { visibility: visible; opacity: 1; }
html.js:not(.rv-ready) .rvn-sheet:target { display: block; }
@media (max-width: 1023.98px) {
  html.js:not(.rv-ready) .rvn-burger--nojs { display: inline-flex; }
  html.js:not(.rv-ready) .rvn-burger--js { display: none; }
}
/* TASK P6A (WebMCP, RUNBOOK 7a): the declarative search form is visually hidden; its -1px margin is zeroed so the clipped box never
   sits inside the 16 px gutter (the add-cond.css 8 precedent). */
.rv-visually-hidden.rv-wmcp { margin: 0; }
/* TASK FX4 (owner phone screenshot 2026-10-25: the booking forms sat in a card inside a card on phones). At 600 px and below every
   booking host is CARDLESS (CORE30-POPTIN-PLAYBOOK: strip the chrome at the mobile breakpoint, never the height): no tint, ring,
   radius or shadow on the host or on the card around it, and no side padding. The Unbounce frame keeps its measured 540 px height
   (base.css; the form serves its fixed 320 x 528 layout at frame widths up to 600), the 16 px page gutter, and the host's
   LOAD-BEARING 572 px min-height + 16 px top / bottom air (base.css; check-computed-style asserts it). Selector weight 0,4,0
   beats base.css + A.css + system.css (site.css loads last). The stem-cell GHL host's own rule is in add-svc.css. */
@media (max-width: 600px) {
  [data-variant] .v1-book-card:has(> [data-booking-host][data-booking-provider]) { background: none; box-shadow: none; padding: 0; }
  .v1-book-host.rv-ub-host[data-booking-host][data-booking-provider] { background: none; box-shadow: none; border: 0; border-radius: 0; }
}

/* ---------- FX5 (GATE 3, 2026-10-26): the footer filled per ARCHITECTURE §3 (approved at GATE 1) ---------- */
/* Same chrome type as the approved row (rv-footer-k heads, rv-footer-links lists, the base row's hairline); no new colour or size. */
.rv-footer-powered { margin-top: 4px; font-size: 13px; }
.rv-footer-social { margin-top: 22px; }
.rv-footer-k a { color: inherit; text-decoration: none; }
.rv-footer-k a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-footer-dir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; margin-top: 64px; padding-top: 48px; border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
@media (max-width: 1023.98px) { .rv-footer-dir { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .rv-footer-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; margin-top: 48px; padding-top: 40px; } }
/* FX5: the phase orbit's pin distance is reserved before the scripts land. B.js / interior.js pin [data-v1b-orbit] at >= 1024 with
   end '+=230%' (2.3 x the viewport height of pin spacing), and the spacer used to appear only when rv-boot mounted the page, so
   everything below the orbit dropped ~2,070 px after first paint (hash links, scroll restores, the PTSD booking rail). The same
   distance sits here as the stage's bottom margin from first paint, exactly where the spacer's padding will be; rv-boot.js drops it
   inside ScrollTrigger's own refresh (onRefreshInit, before it measures), so the swap lands in one synchronous refresh. Same
   condition as B.css's pinned layout (desktop, motion armed), so reduced motion / no JS never reserve anything. */
@media (min-width: 1024px) {
  [data-variant="B"].v1b-phases:is(.rv-motion *) [data-v1b-orbit]:not([data-rv-pin-live]) { margin-bottom: 230vh; }
}
/* FX5: the FAQ head's citation lines (.rv-authority, auto-placed under the H2 / sub line) sat flush on the H2 at desktop (0 px; the
   descenders touched the citation). The head's own mobile rhythm (B.css: row-gap 16px under 768) applies at every width. */
@media (min-width: 768px) {
  [data-variant="B"] .v1b-faq-head .rv-authority { margin-top: 16px; }
}
/* FX6 (owner R-66, 2026-10-25): the Cherry apply button + its host-clinic label (FinOptions .rvf-apply-row). The row takes the
   button's bottom-anchoring (margin-top: auto); the label keeps the approved fine-line type (.rvf-fine, 13px muted). 2-up cards
   (>= 1024): the label sits BESIDE the button, so the row is the button's height and both cards' apply buttons stay level.
   Stacked cards (< 1024): the label sits under the button, 14px, the fine line's own rhythm. */
[data-variant="I"] .rvf-apply-row { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
[data-variant="I"] .rvf-apply-row > .rvf-apply { margin-top: 0; }
[data-variant="I"] .rvf-apply-row > .rvf-fine { margin-top: 0; }
@media (max-width: 767.98px) { [data-variant="I"] .rvf-apply-row { align-self: stretch; } }
@media (min-width: 1024px) {
  [data-variant="I"] .rvf-apply-row { flex-direction: row; align-items: center; gap: 18px; }
  [data-variant="I"] .rvf-apply-row > .rvf-apply { flex: none; }
  [data-variant="I"] .rvf-apply-row > .rvf-fine { max-width: 24ch; line-height: 1.4; }
}