/* ============================================================================
   Sure Home Hub — editorial design system (senior-first, anti-AI-slop)
   Spec: lp-tracking-build-spec.md §2.5. Zero webfont dependency (system stacks).
   Design tokens: warm paper-white bg, near-black ink, ONE trust accent (teal),
   ONE warm CTA color (amber). No gradients, no shadows-as-decoration, no emoji
   bullets, no icon grids. WCAG AA min (AAA target for body text).
   ========================================================================== */

:root {
  /* palette — evidence-tuned from bath-LP style-mining (recon-capture-log):
     warm off-white paper, soft-charcoal ink (NOT pure black), calm editorial
     blue for trust/links, teal-green ("safe/health") for the quiz module, warm
     amber for the single action color. */
  --paper: #f8f5ef;          /* warm off-white page bg */
  --card:  #fffefb;          /* raised article surface */
  --ink:   #2a2723;          /* soft-charcoal body ink (≈13:1 on paper) */
  --ink-soft: #565049;       /* secondary text (≈7:1) */
  --rule:  #e4ded1;          /* hairline dividers */
  --trust: #106197;          /* calm editorial blue — trust accent / links */
  --trust-ink: #0d5183;      /* darker blue for text-on-paper links (AA+) */
  --quiz:  #16825f;          /* teal-green — quiz progress + selection (safe/health) */
  --cta:   #c1571f;          /* warm amber — ADVANCE (start the quiz, keep going) */
  --cta-hover: #a8481626;
  --cta-press: #9c4415;
  /* CALL green. Deviation from §2.5's "ONE warm CTA color", taken deliberately
     (21-07): funnel §4 specifies a green tap-to-call, and splitting the two
     actions by colour is semantically honest — amber = advance, green = call.
     The quiz progress bar is the same green family, so finishing the quiz
     visually "pays out" in the reveal button. Still only two action colours. */
  --call:  #0f7048;
  --call-press: #0b5738;
  --band:  #efe8d9;          /* soft section band */

  /* type */
  --serif: Georgia, 'Times New Roman', 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* rhythm */
  --measure: 62ch;
  --pad: clamp(18px, 5vw, 32px);
}

/* ---- reset-ish (the harness already ships a minimal reset for artifacts; this
   file is also loaded by real static pages, so keep a small local reset) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 40em) { body { font-size: 19px; } }

img { max-width: 100%; height: auto; display: block; }

/* ---- layout shell ---- */
.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.article { background: var(--card); }
main { display: block; }

/* ---- editorial typography ---- */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; color: var(--ink); }
h1 {
  font-size: clamp(28px, 6.5vw, 40px);
  letter-spacing: -0.01em;
  margin: 0.4em 0 0.5em;
}
h2 { font-size: clamp(22px, 4.5vw, 28px); margin: 1.6em 0 0.4em; }
h3 { font-size: clamp(19px, 3.6vw, 22px); margin: 1.4em 0 0.3em; }
p { margin: 0 0 1.05em; max-width: var(--measure); }
.lead { font-size: 1.12em; color: var(--ink); }
strong { font-weight: 700; }

a { color: var(--trust-ink); text-underline-offset: 2px; }
a:hover { color: var(--cta-press); }

/* ---- site masthead (makes the article read as a real site's post) ---- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--card); }
.masthead .wrap { display: flex; align-items: center; gap: 4px 14px;
  flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px; }
.brand { display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand:hover { color: var(--trust-ink); }
.brand-mark { color: var(--trust); flex: 0 0 auto; }
.brand-name { line-height: 1; }
.masthead-tag { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); }
/* the FTC label sits at the far end of the masthead row */
.masthead .adlabel { margin-left: auto; border: 0; padding: 0; }
@media (max-width: 30em) {
  .masthead .adlabel { margin-left: 0; width: 100%; }
  .masthead-tag { display: none; }
}

/* ---- labels / disclosure furniture ----
   Platform minimum, not a wall of text (21-07). ONE legible "Advertorial"
   label here; the Medicare non-affiliation line moved to the reveal/CTA and
   the footer, where it actually matters, instead of shouting above the fold. */
.adlabel {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding: 7px 0;
}
.gov-hedge { font-weight: 600; color: var(--trust-ink); }
.kicker { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--trust-ink); font-weight: 700;
  margin: 1.4em 0 0; display: flex; align-items: center; gap: 10px; }
.kicker::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }

/* ---- byline (a face and a name — the cheapest trust cue there is) ---- */
.byline {
  display: flex; align-items: center; gap: 11px;
  /* Tightened 22-07 (critique-01 defect 15): fold furniture was crowding the
     story out at 390w. Every px here buys a line of the towel-bar open. */
  margin: 0.7em 0 1.05em; font-size: 14px; color: var(--ink-soft);
}
.byline-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--band);
}
.byline-name { display: block; font-weight: 700; color: var(--ink); font-size: 15px; }
.byline-meta { display: block; font-size: 13.5px; line-height: 1.4; }
.updated { font-size: 13px; color: var(--ink-soft); margin: 0.2em 0 0; }

/* ---- message-match answer block (shown only for the matching creative) ---- */
.lede-answer {
  background: var(--band);
  border-left: 4px solid var(--trust);
  margin: 1.4em calc(-1 * var(--pad)) 1.6em;
  padding: 1.1em var(--pad) 1.2em;
}
.lede-answer p:last-child { margin-bottom: 0; }
.lede-verdict {
  font-family: var(--serif); font-size: clamp(21px, 4.6vw, 26px);
  font-weight: 700; color: var(--ink); margin: 0 0 0.4em; line-height: 1.2;
}
@media (min-width: 44em) {
  .lede-answer { margin-left: 0; margin-right: 0; border-radius: 0 4px 4px 0; }
}

/* ▸-marker qualifier list (document feel, not filled-dot template bullets) */
.qualifiers { list-style: none; margin: 1.1em 0; padding: 0; max-width: var(--measure); }
.qualifiers li { position: relative; padding-left: 1.5em; margin: 0.55em 0; }
.qualifiers li::before { content: "\25B8"; position: absolute; left: 0.1em;
  color: var(--trust); font-size: 0.95em; top: 0.05em; }
/* ---- DECK / standfirst -------------------------------------------------
   Pays out the H1's cost promise inside the fold (critique-01 defect 5). It
   is the article's answer, compressed: the honest cited range, then the hand-
   off into the five drivers. Serif so it reads as editorial standfirst rather
   than as a second headline competing with the H1. */
.deck {
  font-family: var(--serif);
  font-size: clamp(17px, 3.9vw, 20px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0.55em 0 0.2em;
  max-width: var(--measure);
}
.deck strong { color: var(--trust-ink); }

/* ---- source strip (defect 1a) ------------------------------------------
   Renders the authority we ACTUALLY have as a visual element instead of
   burying it in a footnote list. Deliberately labelled "cited as sources"
   with a non-endorsement line: these organisations publish the data, they do
   not endorse us, and the strip must never be able to read as if they do. */
.sourcestrip {
  margin: 1.6em 0;
  padding: 0.85em 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.sourcestrip .ss-label {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 0.45em;
}
.sourcestrip .ss-names {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(16px, 3.6vw, 19px); color: var(--trust-ink);
  margin: 0 0 0.4em; max-width: none;
}
.sourcestrip .ss-names span { white-space: nowrap; }
.sourcestrip .ss-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
  margin: 0; max-width: var(--measure); }

/* ---- call scaffold (defect 3) ------------------------------------------
   "Here's exactly what happens when you call" — three numbered steps, the
   corpus's standard device for converting a phone number into a procedure a
   nervous 70-year-old can picture themselves completing. */
.callsteps { list-style: none; counter-reset: cs; margin: 1.1em 0 0; padding: 0;
  max-width: var(--measure); }
.callsteps li {
  counter-increment: cs; position: relative;
  padding: 0 0 0 2.5em; margin: 0 0 0.7em;
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.callsteps li::before {
  content: counter(cs);
  position: absolute; left: 0; top: -0.06em;
  width: 1.75em; height: 1.75em; border-radius: 50%;
  background: var(--call); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 0.95em;
  display: flex; align-items: center; justify-content: center;
}
.callsteps strong { display: block; font-size: 1.02em; }

/* ---- honest reason-to-act-now, inside the CTA block (defect 9 / L2) ----- */
.reason-now {
  margin: 1em 0 0; padding: 0.75em 0.9em;
  background: rgba(16,97,151,0.06);
  border-left: 3px solid var(--trust);
  font-size: 15px; line-height: 1.5; color: var(--ink);
  max-width: var(--measure);
}

/* ---- masthead tap-to-call (Cell B / Cell C — defect 11) -----------------
   A ready caller must be able to call at the moment of readiness, not at 72%
   scroll depth. The number is printed in the DOM at load so Ringba's DNI
   swap reaches it like every other instance. */
.masthead-tel {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto;
  min-height: 40px; padding: 5px 12px;
  background: var(--call); color: #fff; text-decoration: none;
  border-radius: 7px;
  font-family: var(--sans); font-weight: 700; font-size: 15.5px;
  white-space: nowrap;
}
.masthead-tel:hover, .masthead-tel:focus-visible { background: var(--call-press); color: #fff; }
.masthead .adlabel + .masthead-tel { margin-left: 14px; }
@media (max-width: 33.99em) {
  .masthead .wrap { row-gap: 8px; }
  .masthead-tel { margin-left: auto; order: 3; }
}

.subhead-lead { color: var(--trust-ink); font-weight: 700; font-size: 1.06em;
  margin: 1.2em 0 0.4em; }

/* ---- images: full-bleed on mobile, hairline-ruled caption ---- */
.hero, .figure {
  margin: 0 calc(-1 * var(--pad)) 1.4em;
}
.figure { margin-top: 1.8em; }
.hero img, .figure img { width: 100%; }
.hero figcaption, .figure figcaption {
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
  padding: 9px var(--pad) 0;
  border-top: 1px solid var(--rule);
  margin: 0 var(--pad);
  padding-left: 0; padding-right: 0;
}
@media (min-width: 44em) {
  .hero, .figure { margin-left: 0; margin-right: 0; }
  .hero figcaption, .figure figcaption { margin: 0; }
}

/* ---- SIGNATURE ELEMENT: the cost ledger --------------------------------
   The heart of the article and the thing that makes it read as a real printed
   consumer guide rather than a lander: large serif numerals in the trust
   blue, hairline rules, generous leading. No icons, no cards, no shadows. */
.ledger { margin: 1.6em 0 1.9em; border-top: 2px solid var(--ink); }
.ledger-item {
  padding: 1.05em 0 1em;
  border-bottom: 1px solid var(--rule);
}
/* Mobile: the numeral drops into the text like a printed section number, so
   the heading keeps the full measure instead of being squeezed by a column. */
.ledger-item .n {
  float: left;
  font-family: var(--serif); font-size: 34px; line-height: 0.92;
  color: var(--trust); font-weight: 700;
  margin: 0 12px 0 0;
  font-variant-numeric: lining-nums;
}
.ledger-item > div::after { content: ""; display: block; clear: both; }
/* Wider viewports have room for the proper two-column ledger. */
@media (min-width: 34em) {
  .ledger-item { display: grid; grid-template-columns: 2.2em 1fr; gap: 0 16px; }
  .ledger-item .n { float: none; margin: 0; padding-top: 0.06em; line-height: 1; }
}
.ledger-item h3 { font-size: clamp(18px, 3.4vw, 20px); margin: 0 0 0.3em; }
.ledger-item p { margin: 0; color: var(--ink-soft); font-size: 0.96em; }
.ledger-item p:not(:last-child) { margin-bottom: 0.5em; }

/* ---- pull / proof quote (restrained, editorial) ---- */
.proof {
  border-left: 3px solid var(--trust);
  margin: 1.5em 0; padding: 0.2em 0 0.2em 18px;
  font-family: var(--serif); font-size: 1.15em; color: var(--ink);
}
.proof cite { display: block; font-family: var(--sans); font-size: 0.72em;
  font-style: normal; color: var(--ink-soft); margin-top: 0.5em; }

/* ---- soft info band (e.g. "what an assessment covers") ---- */
.band { background: var(--band); margin: 1.6em calc(-1 * var(--pad));
  padding: 1.2em var(--pad); }
.band ul { margin: 0.4em 0 0; padding-left: 1.1em; }
.band li { margin: 0.35em 0; max-width: var(--measure); }

/* ---- CTA block + buttons (buttons look like buttons; tap ≥48px) ---- */
.cta-block { margin: 1.8em 0; }
.btn {
  display: block; width: 100%;
  min-height: 60px;
  padding: 16px 22px;
  font-family: var(--sans); font-size: 20px; font-weight: 700;
  text-align: center; text-decoration: none;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--cta); color: #fff;
  line-height: 1.25;
}
.btn:hover, .btn:focus-visible { background: var(--cta-press); color: #fff; outline: 3px solid var(--trust); outline-offset: 2px; }
.btn.secondary { background: transparent; color: var(--trust-ink);
  border: 2px solid var(--trust); min-height: 52px; font-size: 17px; }
.btn small { display: block; font-weight: 400; font-size: 14px; opacity: 0.92; margin-top: 3px; }
.callnum { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ---- THE CALL BUTTON — the most important element on the page ------------
   Thumb-zone sized, number rendered as the button's headline (not buried in a
   sub-line), 44px+ digits so a 70-year-old reading at arm's length can act on
   it without glasses. The number ALSO appears as plain text below (Ringba DNI
   swaps every printed instance of the fallback string). */
.btn-call {
  display: block; width: 100%;
  background: var(--call); color: #fff; text-decoration: none;
  border: 0; border-radius: 10px; cursor: pointer;
  padding: 18px 16px 16px;
  text-align: center;
  box-shadow: 0 2px 0 var(--call-press);
}
.btn-call:hover, .btn-call:focus-visible { background: var(--call-press); color: #fff; outline: 3px solid var(--ink); outline-offset: 3px; }
.btn-call .call-kicker {
  display: block; font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; opacity: 0.93;
}
.btn-call .call-number {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: clamp(30px, 8.4vw, 40px); line-height: 1.12; margin-top: 4px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.btn-call .call-sub {
  display: block; font-size: 14px; font-weight: 400; opacity: 0.93; margin-top: 6px;
}
.call-plain { font-size: 15px; color: var(--ink-soft); margin: 0.7em 0 0; text-align: center; }
.call-plain a { font-weight: 700; }

/* Recording + no-commitment micro-line, directly under the call button.
   WHY IT IS HERE AND NOT ONLY IN `.consent` (legal-exposure.md R1/R3, 27-07):
   the same sentence already lived in the consent block — 708px BELOW the
   button (launch-gate P1-4). A disclosure a caller passes on their way out is
   close to no disclosure. Adjacency is the whole point, so this must stay
   inside the `.cta-block`, above the fold of the call moment, and visible
   without zoom at 390px.
   It is NOT as strong as an IVR disclosure (which the caller actually hears
   and which lands on the recording as proof) — it is the proportionate
   version for a one-party-consent state. If we ever run MA/CT/IL, this line
   does not carry us; that needs the Ringba whisper.
   Deliberately muted, not hidden: small and quiet is fine, invisible is not.
   Do not drop below 12px or lighten past --ink-soft. */
.call-legal {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
  margin: 0.85em auto 0; text-align: center; max-width: 34em; opacity: 0.85;
}

/* ---- early call strip (Cell B / Cell C — defect 11) ---------------------
   A compact call surface mid-article. Deliberately lighter than the full
   reveal panel so it reads as an aside a reader can step over, not as the end
   of the article. */
.callstrip {
  margin: 1.6em calc(-1 * var(--pad));
  padding: 1.1em var(--pad) 1.2em;
  background: #f2f7f4;
  border-top: 3px solid var(--call);
}
.callstrip-lead {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(18px, 4.2vw, 21px); line-height: 1.25;
  margin: 0 0 0.6em; color: var(--ink);
}
.callstrip-note { font-size: 14px; color: var(--ink-soft); margin: 0.7em 0 0; }
.btn-call.compact { padding: 12px 14px; }
.btn-call.compact .call-number { font-size: clamp(27px, 7.4vw, 34px); }
@media (min-width: 34em) {
  .callstrip { margin-left: 0; margin-right: 0; border-radius: 0 0 6px 6px; }
}

/* ---- trust strip (facts we can actually stand behind) ---- */
.trust-strip {
  list-style: none; margin: 1.1em 0 0; padding: 0.9em 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.45em;
  font-size: 15px; color: var(--ink-soft);
}
.trust-strip li { position: relative; padding-left: 1.45em; }
.trust-strip li::before { content: "\2713"; position: absolute; left: 0;
  color: var(--call); font-weight: 700; }

/* ---- sticky bottom bar (appears after scroll; Cell A swaps it to CALL) ---- */
.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--cta); color: #fff;
  padding: 9px var(--pad) calc(9px + env(safe-area-inset-bottom, 0px));
  display: none;
  box-shadow: 0 -2px 10px rgba(42,39,35,0.18);
}
.sticky-call.show { display: block; }
.sticky-call a { display: flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 50px; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 18px; }
.sticky-call .sticky-as-call { display: none; }
.sticky-call.is-call { background: var(--call); }
.sticky-call.is-call .sticky-as-prompt { display: none; }
.sticky-call.is-call .sticky-as-call { display: flex; }
.sticky-call.is-call .callnum { font-size: 21px; }
/* REDUNDANCY SUPPRESSION (27-07, Andrei's pre-launch review, finding 2).
   The bar exists so the reader is never more than one tap from the next step.
   When the thing it points at is ALREADY on screen it stops being insurance
   and becomes noise — a bar saying "See if your home qualifies" while the
   reader is looking at the quiz, or "Call now" directly under the reveal's own
   tap-to-call button. track.js adds `.is-redundant` in exactly those two cases.
   ⚠ `display:none`, NOT `visibility:hidden` — tried that first and it FAILED
   Tier 1's "the sticky call bar COVERS the revealed number at 640px" guard: a
   visibility-hidden element still returns a full getBoundingClientRect(), so
   the check saw an invisible bar as covering the call button. The bar is
   position:fixed, so display:none costs no reflow either. */
.sticky-call.show.is-redundant { display: none; }
body.has-sticky { padding-bottom: 84px; }

/* ---- icon sprite (defined once, never rendered directly) ---- */
.sprite { display: none; }

/* ---- quiz option icons ----
   Functional, not decorative: at this age the picture is often read before
   the label. Sized so the row still clears the 48px tap minimum comfortably. */
.quiz-opt.has-icon {
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; padding: 12px 16px;
}
.opt-icon {
  width: 52px; height: 52px; flex: 0 0 auto; color: var(--ink);
}
.quiz-opt.has-icon > span { flex: 1 1 auto; }
.quiz-opt:hover .opt-icon, .quiz-opt:focus-visible .opt-icon { color: var(--quiz); }

/* ---- FAQ ---- */
.faq { margin: 2em 0; }
.faq > h2 { margin-bottom: 0.6em; }
.faq h3 {
  margin: 1.5em 0 0.3em;
  padding-left: 1.55em;
  position: relative;
}
/* a serif "Q." marker instead of an undifferentiated wall of headings */
.faq h3::before {
  content: "Q.";
  position: absolute; left: 0; top: 0.02em;
  font-family: var(--serif); font-weight: 700;
  color: var(--trust); opacity: 0.85;
}
.faq p { color: var(--ink-soft); padding-left: 1.55em; }

/* ---- install timeline (inside the FAQ answer) ---- */
.timeline {
  list-style: none; margin: 1.1em 0 0.9em; padding: 0 0 0 1.55em;
  max-width: var(--measure);
}
.timeline li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 0.75em 0;
  border-top: 1px solid var(--rule);
}
.timeline li:first-child { border-top: 0; padding-top: 0.2em; }
.tl-icon { width: 44px; height: 44px; flex: 0 0 auto; color: var(--ink); }
.tl-when {
  display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--trust-ink);
  margin-bottom: 1px;
}
.tl-what { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.timeline-note { font-size: 15px; font-style: italic; }

/* ---- citations + sources (real ones; the trust cue we can actually earn) ---- */
.cite {
  font-size: 0.68em; vertical-align: super; line-height: 0;
  font-weight: 700; text-decoration: none; color: var(--trust-ink);
  padding: 0 1px 0 2px;
}
.cite::before { content: "["; }
.cite::after { content: "]"; }
.sources { margin: 2em 0 0; padding-top: 1.1em; border-top: 1px solid var(--rule); }
.sources h3 { font-size: 15px; font-family: var(--sans); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.5em; }
.sources ol { margin: 0; padding-left: 1.4em; font-size: 14px; line-height: 1.5;
  color: var(--ink-soft); }
.sources li { margin: 0 0 0.5em; }

/* ---- footer / policy furniture ---- */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 2em; padding: 1.6em 0 3em;
  font-size: 14px; color: var(--ink-soft);
}
.site-footer p { max-width: none; margin: 0 0 0.7em; }
.site-footer a { color: var(--trust-ink); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 0.8em; }

/* ---- quiz (Cell A) ---- */
.quiz { margin: 1.5em 0; }
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-progress { font-size: 14px; color: var(--ink-soft); letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 0.5em; }
.quiz-bar { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; margin-bottom: 1.2em; }
.quiz-bar > span { display: block; height: 100%; background: var(--quiz); transition: width 0.25s ease; }
.quiz h2 { margin-top: 0.2em; }
.quiz-opt {
  display: block; width: 100%; text-align: left;
  min-height: 60px; padding: 16px 18px; margin: 0 0 12px;
  font-family: var(--sans); font-size: 18px; font-weight: 600;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--rule); border-radius: 8px; cursor: pointer;
}
.quiz-opt:hover, .quiz-opt:focus-visible { border-color: var(--quiz); outline: none; }
.quiz-opt::before { content: ""; }
.quiz-zip { display: flex; flex-direction: column; gap: 12px; }
.quiz-zip input {
  font-size: 22px; padding: 14px 16px; letter-spacing: 0.1em;
  border: 2px solid var(--rule); border-radius: 8px; font-family: var(--sans);
  min-height: 56px; text-align: center;
}
.quiz-back { background: none; border: 0; color: var(--trust-ink);
  font-size: 15px; cursor: pointer; padding: 8px 4px; margin-top: 4px; }
.quiz-note { font-size: 14px; color: var(--ink-soft); }

.quiz-err { color: #a8341f; font-size: 15px; font-weight: 600; margin: 0; }

/* ---- reveal + consent ----
   Reads as the article's payoff panel: heavy green top rule (the colour the
   progress bar has been filling), tinted card, phone number as the loudest
   thing in it. Full-bleed at mobile so nothing competes with the button. */
.reveal { display: none; }
.reveal.show { display: block; }
.reveal {
  border-top: 4px solid var(--call);
  background: #f2f7f4;
  margin: 1.6em calc(-1 * var(--pad));
  padding: 1.3em var(--pad) 1.5em;
}
.reveal-flag {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--call);
  margin: 0 0 0.25em;
}
.reveal h2 { margin-top: 0.1em; }
.reveal-lead { font-size: 1.08em; color: var(--ink); font-style: italic; }
.consent { font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  margin: 1.1em 0 0; display: flex; gap: 10px; align-items: flex-start; }
.consent input { margin-top: 3px; width: 22px; height: 22px; flex: 0 0 auto; }
.offramp { display: none; background: var(--band); padding: 1.2em var(--pad);
  margin: 1.2em calc(-1 * var(--pad)); }
.offramp.show { display: block; }

/* ---- homepage ---- */
.home-hero { padding: 1.6em 0 1.5em; }
.guide-card {
  border-top: 1px solid var(--rule); padding: 1.2em 0;
  display: grid; grid-template-columns: 104px 1fr; gap: 0 16px; align-items: start;
}
.guide-thumb { display: block; }
.guide-thumb img { width: 104px; height: 78px; object-fit: cover; border-radius: 4px; }
.guide-card h3 { margin: 0.1em 0 0.35em; }
.guide-card h3 a { color: var(--ink); text-decoration: none; }
.guide-card h3 a:hover { color: var(--trust-ink); text-decoration: underline; }
.guide-card p { color: var(--ink-soft); margin-bottom: 0; }
.guide-card .updated { margin-top: 0; }
@media (min-width: 34em) {
  .guide-card { grid-template-columns: 168px 1fr; gap: 0 20px; }
  .guide-thumb img { width: 168px; height: 112px; }
}

/* ==========================================================================
   lp-changes-02 (22-07) — repeated in-flow CTAs, reveal-gated FAQ call block,
   Cell B masthead, cost-trend line, composite-label step-down.
   ========================================================================== */

/* ---- in-flow qualify CTA (lp-changes-02 §2.8) ---------------------------
   Cell A ran exactly ONE in-flow entry point; repeated CTAs are corpus
   standard. But a second full-width amber .btn early in the article would
   compete with the gate and make the page read as a lander instead of an
   article — so this is deliberately the QUIET version of the same offer: the
   source strip's hairline-rule device, a small qualifying question, and the
   action in the amber that means "advance" everywhere else on the page.
   Loud stays reserved for the ledger (the signature) and the gate itself.
   Tap target is the full measure width × ≥48px, per senior-fit. */
.inflow-cta {
  display: block;
  max-width: var(--measure);
  /* Spacing is deliberately tight. Defect 6's ≤4,500px gate on the ad URLs has
     ~40px of margin, and every pixel this element spends above the ledger is a
     pixel taken from that budget. Re-measure the AD URLs after touching it. */
  margin: 1em 0;
  padding: 0.55em 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 48px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
}
.inflow-cta b {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  color: var(--cta-press);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inflow-cta:hover, .inflow-cta:focus-visible { color: var(--ink); }
.inflow-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---- two states, one slot: pre-reveal gate CTA ⇄ post-reveal call -------
   GENERALISED 27-07 (Andrei's pre-launch review, finding 3). This used to be a
   one-off pair for the FAQ-end slot. It is now the mechanism for EVERY
   quiz-gated CTA on the page, because the one-off left the other two live after
   the reveal — and they were not merely redundant, they were DEAD: quiz.js sets
   `#quiz` to display:none at reveal, so track.js's jump handler measured a
   zero-rect element and scrolled the reader 12px. A large orange button that
   does nothing, sitting above the source strip, after the number had already
   been earned.

   Cell A's number is quiz-gated and that gate IS the A/B, so nothing carrying
   `.pre-reveal-only` may show a number. quiz.js puts `shh-revealed` on <html>
   when the gate is passed; these rules are the whole swap — no JS was added.
   The call blocks are display:none, NOT removed: their numbers are in the DOM
   at load so Ringba's DNI script (which scans once, at load) swaps them.

   ⚠ Never give a `.post-reveal-only` block the class `.cta-block` — scripts/
   gate.mjs measures the FIRST `.cta-block` in the DOM as the ≤4,500px rail.
   Use `.callstrip`, as the FAQ-end slot does. */
.post-reveal-only { display: none; }
html.shh-revealed .post-reveal-only { display: block; }
html.shh-revealed .pre-reveal-only { display: none; }

/* Legacy aliases for the FAQ-end slot — the markup carries both the generic
   and the original classes, so these are belt-and-braces, not a second
   mechanism. Do not add new `.faq-end-*` pairs; use the generic classes. */
.faq-end-call { display: none; }
html.shh-revealed .faq-end-cta { display: none; }
html.shh-revealed .faq-end-call { display: block; }

/* ---- cited cost-trend line at the reveal (§2.15) ------------------------
   Sits under .reason-now and is deliberately quieter than it: one attributed
   fact, not a second alarm. If this ever starts looking like a warning
   banner, it has drifted out of what the source supports. */
.cost-trend {
  margin: 0.7em 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---- composite label, one step smaller (§2.6, inside the L1 floor) ------
   0.72em → 0.66em of .proof's 1.15em ≈ 13.7px at the 18px base. The max()
   is a HARD FLOOR, not decoration: this label is the page's legal cover for
   the composite quote, and a disclosure that cannot be read without zooming
   is legally no disclosure at all. Do not go below it. */
.proof cite { font-size: max(13px, 0.66em); }

/* ---- Cell B masthead: two rows on mobile, one on desktop (§2.13) --------
   Only Cell B carries a fourth masthead element (the tap-to-call). At 390px
   the base rules gave it three ragged rows with the Advertorial label
   stranded full-width. Scoped to .masthead-call so Cells A and C — which
   have no header number — keep their existing masthead untouched. */
.masthead-call .wrap { row-gap: 10px; }
/* min-height 46, not the base 40: stacking the kicker over the number made the
   button 42px tall, under the 44px tap-target floor the smoke suite enforces —
   this is a senior audience and the header number is Cell B's primary action. */
.masthead-tel { flex-direction: column; align-items: flex-start; gap: 0;
  min-height: 46px; line-height: 1.15; padding: 6px 12px; }
.mt-kicker { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; opacity: 0.92; }
.mt-num { font-size: 16px; font-weight: 700; white-space: nowrap; }
/* The tagline is what made the desktop row overflow: brand + tagline + label +
   call button measured ~780px against a 680px wrap, so the button wrapped to a
   second line and sat left-aligned under the brand — the "misaligned at 1280"
   in §2.13. Cell B drops the tagline (it is already hidden on every cell below
   30em, so it is the least load-bearing thing in the row) and the remaining
   three fit one row with room to spare. */
.masthead-call .masthead-tag { display: none; }
@media (max-width: 37.99em) {
  /* Two explicit rows. Breakpoint is 38em, not 34em, because between 544px and
     ~608px the single row does not fit either — that band used to wrap. These
     win over the base `.masthead .adlabel { width: 100% }` by source order. */
  .masthead-call .adlabel { margin-left: auto; width: auto; }
  .masthead-call .masthead-tel {
    order: 3; width: 100%; margin-left: 0; align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}