/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE TWO ROADS — the consumer skin. Ported VERBATIM from the owner-approved prototype
   `docs/plans/academy/same-payment-artifact.html`; only the logo moved from an inline data URI
   to `/img/logo.png`, and the file moved out of a <style> block into a real stylesheet.

   ⚖️ Gil, on the first skin: "coloring is not what we did with teh landing page. and the design
   and style don't maatch at all." 🛑 HE IS RIGHT. This page and the intake funnel
   (docs/plans/landing-page/ice-intake.html) are ONE consumer journey — a customer can arrive
   here from that funnel — so it wears THAT page's skin, not a look of its own:
   · THE TOKENS ARE THE FUNNEL'S TOKENS, copied, not approximated. Its CHANGE 6 blue (#35529b,
     ~7.4:1, "do not let anyone test the blue away"), its ground, its dark theme, its ring.
   · FRAUNCES asks the questions and sets the figures; PUBLIC SANS says everything else. 19px
     body, 16px floor — HHS Health Literacy Online, carried over with the fonts.
   · The tap cards are its tap cards: tick + border + tint, never hue alone (~45% of adults in
     their mid-70s show a colour deficit). The slider is its slider. The Back button, the
     progress rail, the footer button — all its.
   · Components the funnel doesn't have (the two roads, the verdict) are built as it WOULD
     build them: white card, its line and shadow tokens, Fraunces heading, and its Rule-13
     heavy-rail notice for the verdict — a notice, never an alarm.
   THE SHELL RULES ARE UNCHANGED: one question per screen, fixed viewport, nothing scrolls at
   375x812, real 1:1 progress, Back everywhere, tap-don't-type at 48px, auto-advance 300ms.

   🛑 THIS FILE IS THE CONSUMER LANE AND IS DELIBERATELY NOT `cclg.css`. The academy stylesheet
   is 9,000 lines of an authenticated shell a customer never loads, and a class colliding across
   the two would be silent by construction. Keep them apart.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --ground:#f4f6fa; --card:#ffffff; --card-2:#f7f9fc;
  --ink:#111726; --ink-2:#333c52; --mut:#525c73;
  --line:#d9e0ec; --line-2:#eaeef6;
  --brand:#35529b; --brand-2:#2a4179; --brand-soft:#e9eefa; --brand-line:#b9c6e6;
  --gold:#8a5a12; --gold-soft:#fbf2e0;
  --ok:#0f6b3d; --ok-bg:#e2f6ea;
  --warn:#7a4e00; --warn-bg:#fdeed3;
  --bad:#8f1f1f; --bad-bg:#fdecec;
  --ring:rgba(53,82,155,.35);
  --shadow:0 1px 2px rgba(17,23,38,.05), 0 10px 28px -14px rgba(17,23,38,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0e1320; --card:#171e2e; --card-2:#1c2436;
    --ink:#f0f3f9; --ink-2:#ccd4e4; --mut:#a3aec4;
    --line:#2c3750; --line-2:#232c42;
    --brand:#93aae8; --brand-2:#7f97dc; --brand-soft:#1f2942; --brand-line:#3b4a6e;
    --gold:#e0ab52; --gold-soft:#2c2415;
    --ok:#6ddba4; --ok-bg:#123322;
    --warn:#e8bd6d; --warn-bg:#332612;
    --bad:#f79b9b; --bad-bg:#331717;
    --ring:rgba(147,170,232,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0e1320; --card:#171e2e; --card-2:#1c2436;
  --ink:#f0f3f9; --ink-2:#ccd4e4; --mut:#a3aec4;
  --line:#2c3750; --line-2:#232c42;
  --brand:#93aae8; --brand-2:#7f97dc; --brand-soft:#1f2942; --brand-line:#3b4a6e;
  --gold:#e0ab52; --gold-soft:#2c2415;
  --ok:#6ddba4; --ok-bg:#123322;
  --warn:#e8bd6d; --warn-bg:#332612;
  --bad:#f79b9b; --bad-bg:#331717;
  --ring:rgba(147,170,232,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:19px; line-height:1.45; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button,input,select{touch-action:manipulation;font-family:inherit}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:8px}
.errnote{margin-top:14px;padding:14px 16px;background:var(--bad-bg);border:1.5px solid var(--bad);
  border-radius:11px;color:var(--ink);font-size:16px;line-height:1.5}
.errnote b{color:var(--bad)}
.errnote[hidden]{display:none}
/* 🛑 THE ONE PORT-TIME FIX. In the prototype this row was `flex` with a `nowrap` chip, and at
   375px the chip — "same as now ($1,745)" — pushed 20px past the viewport, so the whole stage
   scrolled sideways. `file://` on a desktop never showed it and no probe measured horizontal
   overflow. The chip now drops to its own line rather than taking the page with it; `min-width:0`
   is what actually lets the input shrink, since a flex item's default minimum is its content. */
.wrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.wrow input{flex:1 1 150px;min-width:0;min-height:48px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);font:600 17px/1.2 inherit;
  font-variant-numeric:tabular-nums}
.chip{border:1.5px solid var(--brand-line);background:var(--brand-soft);color:var(--brand);
  border-radius:99px;padding:10px 14px;font:600 14px/1 inherit;cursor:pointer;white-space:nowrap}
.chip:hover{background:var(--brand);color:#fff}
.schedwrap{position:fixed;inset:0;background:rgba(17,23,38,.5);z-index:50;display:flex;
  align-items:flex-end;justify-content:center}
.schedwrap[hidden]{display:none}
.sched{background:var(--card);border-radius:16px 16px 0 0;max-height:86vh;overflow-y:auto;
  width:100%;max-width:720px;padding:18px 16px calc(env(safe-area-inset-bottom) + 18px)}
.schedhd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sched h4{font-family:"Fraunces",Georgia,serif;font-size:17px;margin:18px 0 8px}
.schedt{width:100%;border-collapse:collapse;font-size:14px}
.schedt th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);
  text-align:right;padding:4px 0;border-bottom:1.5px solid var(--line)}
.schedt th:first-child,.schedt td:first-child{text-align:left}
.schedt td{text-align:right;padding:5px 0;border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums}

/* ── shell: fixed viewport, so a question never scrolls ── */
.app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--ground)}
.hd{flex:none;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 8px}
.backbtn{appearance:none;background:var(--card);border:1.5px solid var(--line);cursor:pointer;
  min-height:48px;padding:0 15px 0 10px;border-radius:11px;flex:none;
  display:flex;align-items:center;gap:5px;color:var(--ink-2);font:inherit;font-size:17px;font-weight:600}
.backbtn[hidden]{display:none}
.backbtn:hover{border-color:var(--brand);color:var(--brand)}
.backbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mark{display:flex;align-items:center;flex:1;min-width:0}
.on-hero .mark{visibility:hidden}
.logo{height:34px;width:auto;max-width:100%}
.logo-big{height:104px;width:auto;max-width:82%;display:block;margin:2px auto 20px}
@media (max-height:760px){.logo-big{height:84px;margin-bottom:16px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo,
  :root:not([data-theme="light"]) .logo-big{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .logo,:root[data-theme="dark"] .logo-big{filter:brightness(0) invert(1)}
/* CHANGE 12 (funnel) — a tappable phone pinned to every screen. A confused visitor
   calls instead of abandoning. Same number as the funnel; they are one product. */
.callbtn{display:flex;align-items:center;gap:6px;flex:none;min-height:48px;padding:0 14px;
  border-radius:11px;background:var(--brand-soft);border:1.5px solid var(--brand-line);
  color:var(--brand);font-weight:700;font-size:16px;text-decoration:none}
.callbtn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.callbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.callbtn .lbl{display:none}
@media (min-width:430px){.callbtn .lbl{display:inline}}

/* CHANGE 1 (funnel) — 1:1 progress with a real count. */
.progress{flex:none;display:flex;align-items:center;gap:10px;padding:2px 16px 8px}
.progress .count{font-size:16px;font-weight:700;color:var(--mut);flex:none;font-variant-numeric:tabular-nums}
.rail{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.rail>i{display:block;height:100%;width:0;background:var(--brand);transition:width .4s cubic-bezier(.4,0,.2,1)}
.progress[hidden]{display:none}

.stage{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 10px}
.inner{max-width:560px;margin:0 auto;width:100%}
.screen{display:none}
.screen.on{display:block;animation:rise .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.eyebrow{display:inline-block;font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);padding:5px 12px;border-radius:999px;margin-bottom:10px}
.kicker{margin:0 0 10px;font-size:16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);text-align:center}
h1.q{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-optical-sizing:auto;font-weight:600;
  font-size:clamp(25px,6vw,31px);line-height:1.15;letter-spacing:-.015em;margin:0 0 8px;text-wrap:balance}
h1.q.hero-h{font-size:clamp(29px,7.6vw,40px);line-height:1.08;margin-bottom:12px;text-align:center}
p.sub{margin:0 0 18px;color:var(--mut);font-size:17px;max-width:62ch;line-height:1.45}

/* ── tap cards — funnel CHANGE 6: 48px floor; selection marked THREE ways ── */
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opts.two .opt:last-child:nth-child(odd){grid-column:1/-1}
.opt{
  appearance:none;-webkit-appearance:none;text-align:left;font:inherit;font-size:19px;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:14px 16px;min-height:60px;cursor:pointer;
  display:flex;align-items:center;gap:13px;
  transition:border-color .15s,background .15s,transform .09s;
}
.opt:active{transform:scale(.985)}
@media (hover:hover){.opt:hover{border-color:var(--brand);background:var(--card-2)}}
.opt .tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;transition:.15s;position:relative}
.opt[aria-pressed="true"]{border-color:var(--brand);border-width:3px;background:var(--brand-soft);padding:13px 15px}
.opt[aria-pressed="true"] .tick{border-color:var(--brand);background:var(--brand);border-width:2px}
.opt[aria-pressed="true"] .tick::after{
  content:"";width:11px;height:6px;background:transparent;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.opt .lbl{font-weight:600;font-size:18.5px;line-height:1.25;display:block}
.opt .hint{display:block;font-weight:400;font-size:16px;color:var(--mut);margin-top:3px;line-height:1.35}
.opts.two .opt{padding:13px 13px;min-height:56px}
.opts.two .opt .lbl{font-size:17px}

/* ── sliders — funnel CHANGE 9 thumb and track; big Fraunces readout; typed twin below ── */
.amt{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(32px,9vw,42px);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink);
  text-align:center;margin:14px 0 4px;line-height:1}
.amtsub{text-align:center;color:var(--mut);font-size:16px;margin-bottom:18px;min-height:23px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:46px;background:transparent;cursor:pointer;margin:0;display:block}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-track{height:10px;border-radius:99px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;
  background:var(--card);border:4px solid var(--brand);box-shadow:0 2px 8px rgba(17,23,38,.28);margin-top:-12px}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--card);
  border:4px solid var(--brand);box-shadow:0 2px 8px rgba(17,23,38,.28)}
.ends{display:flex;justify-content:space-between;color:var(--mut);font-size:16px;font-weight:600;margin-top:2px}
/* Baymard: a slider needs A TEXT FIELD FALLBACK — the escape hatch stays. */
.exact{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  color:var(--brand);font:inherit;font-size:17px;font-weight:700;padding:10px;min-height:48px}
.exact:hover{text-decoration:underline}
.exactbox{margin-top:8px}
.exactbox input{width:100%;font:inherit;font-size:19px;font-weight:700;padding:14px 15px;min-height:56px;
  border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:center}
.exactbox input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--ring)}
.exactbox[hidden]{display:none}
.when{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.when input{width:100%;font:inherit;font-size:20px;font-weight:700;padding:14px 15px;min-height:60px;
  border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);
  text-align:center;font-variant-numeric:tabular-nums}
.when input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--ring)}

/* ── footer: one action, thumb-height — funnel .btn.primary ── */
.ft{flex:none;padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);
  border-top:1px solid var(--line);background:var(--card)}
.ft[hidden]{display:none}
.ft .in{max-width:560px;margin:0 auto;display:flex;gap:10px;align-items:center}
.btn{appearance:none;font:inherit;font-weight:700;font-size:19px;border-radius:12px;padding:16px 26px;
  cursor:pointer;border:2px solid transparent;min-height:56px;transition:filter .15s,background .15s,transform .09s}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--brand);color:#fff;flex:1;box-shadow:0 4px 14px -5px var(--ring)}
@media (hover:hover){.btn.primary:hover{background:var(--brand-2)}}
.btn.primary[disabled]{opacity:.45;cursor:default}

/* ── the comparison — ⚖️ Gil's sketch, 08-29: "the middle in between should be the row…
      5.49 | Blended rate | 7 … so it is easy to follow." ONE spine of labels down the centre,
      the two roads' values flanking it. The reader learns the label once and the eyes flick
      left-right — against two separate cards, where every row must be found twice. Built in
      the funnel's language: one white card, its line tokens, Fraunces heads, brand blue right. ── */
.cmp{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:18px 16px;
  box-shadow:var(--shadow);margin:4px 0 14px}
/* ⚖️ Gil: "top payments need to line up" — the picker had pushed the right payment a full
   row below the left one, so the single most important comparison on the page was misaligned.
   Titles share a row, PAYMENTS share a baseline row, and the picker sits under the number it
   drives. */
.cmphead{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-bottom:6px;
  grid-template-areas:"ta tb" "ba bb" "sa sb" "pa pb";align-items:end}
.cmphead .tA{grid-area:ta}.cmphead .tB{grid-area:tb;text-align:right}
.cmphead .bA{grid-area:ba}.cmphead .bB{grid-area:bb;text-align:right}
.cmphead .sA{grid-area:sa}.cmphead .sB{grid-area:sb;text-align:right}
.cmphead .pB{grid-area:pb;margin-top:8px}
.cmphead h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;margin:0 0 8px;
  line-height:1.15}
.cmphead .colB h3{color:var(--brand)}
.cmphead .colB{text-align:right}
.big{font-weight:700;font-size:clamp(26px,7vw,34px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.colB .big{color:var(--brand)}
.biglab{font-size:14px;color:var(--mut);margin:5px 0 0}
.terms{display:flex;gap:4px;background:var(--card-2);border:1px solid var(--line);
  padding:3px;border-radius:9px;margin:0 0 10px}
.terms button{flex:1;border:0;background:none;min-height:40px;border-radius:6px;cursor:pointer;
  font:600 14px/1 inherit;color:var(--mut)}
.terms button[aria-pressed="true"]{background:var(--brand);color:#fff}
/* the spine */
.spine{margin-top:14px;border-top:1.5px solid var(--line)}
/* ⚖️ Gil: "last screen not aligned right" — baseline alignment pinned the centre label
   and right value to the TOP of the tall 4-line rate stack. Rows centre vertically now. */
.srow{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line-2)}
.srow:last-child{border-bottom:0}
.srow .lv{text-align:left;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.srow .lb{text-align:center;color:var(--mut);font-size:15px;line-height:1.25}
.srow .rv{text-align:right;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;
  color:var(--brand-2)}
.srow .rv input{width:74px;border:1.5px solid var(--brand-line);border-radius:8px;background:var(--card);
  color:var(--brand-2);font:700 17px/1.2 inherit;text-align:right;padding:6px 6px;
  font-variant-numeric:tabular-nums}
.srow .rv .sub{text-align:right}
.srow.total .lv,.srow.total .rv{font-size:18px}
.srow .sub{display:block;font-weight:400;font-size:13px;color:var(--mut)}
/* A caveat that is a full SENTENCE spans the row beneath the figures instead of being squeezed
   into the left column. `1 / -1` rather than `span 3` so it still spans if a column is ever
   added. Left-aligned and capped near 60ch: it is prose, and prose centred under three numbers
   reads as a caption rather than as the point. */
.srow .rowsub{grid-column:1 / -1;margin-top:5px;font-weight:400;font-size:13.5px;line-height:1.5;
  color:var(--mut);text-align:left;max-width:60ch}
.srow .lv .rateln{display:block;font-weight:700;font-size:17px;margin-top:7px;
  font-variant-numeric:tabular-nums}
/* ── the true-cost statement — ⚖️ Gil: "should we make some type of statement that says the
      mtg rate is really x% and then blended rate with MI?" YES: the customer is anchored on
      "my mortgage is 3.25%" and this is the honest counter — MI is not interest, but it IS a
      cost, so it belongs in an EFFECTIVE rate, stepped out so each addition is visible. ── */
/* ═══ THE FOOT OF THE ANSWER ═══════════════════════════════════════════════════════════════
   ⚖️ Gil, 2026-08-31: "the bottom half is alot of info and doesnt look the best. need to clean
   that up an dmake it look professional." He was right, and the cause was structural rather
   than decorative: FOUR `.keeprow`s each drew its own full-width 1.5px rule, its own 15px bold
   label and its own 14px grey paragraph, so four different JOBS — a finding, an honest
   question, three settings, and a footnote — arrived in one undifferentiated ladder at
   identical weight. Nothing said which mattered, so all of it read as noise.
   🛑 NOT ONE WORD CHANGED. The copy is his and approved; only rank changed. Four jobs, four
   weights, in the order a reader needs them: FINDING → QUESTION → SETTINGS → FOOTNOTE. */

/* 1. THE FINDING. The strongest number on the page; it was wearing the same grey card as the
      hints. Carries the brand rail now, so the eye lands here first. */
.truerate{margin:16px 0 0;padding:14px 16px;background:var(--brand-soft);
  border:1px solid var(--brand-line);border-left:4px solid var(--brand);
  border-radius:0 12px 12px 0;font-size:15.5px;line-height:1.5}
.truerate b{font-variant-numeric:tabular-nums}

/* 2. THE HONEST QUESTION — asked of them, not a knob. Keeps its own rule and full-size reasoning;
      the paragraph under it is Gil's proof and earns body weight. */
.keeprow{margin:14px 0 0;padding-top:13px;border-top:1.5px solid var(--line)}
.keeprow label{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.keeprow select{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);font:600 16px/1.2 inherit}
.keepwhy{font-size:14px;color:var(--mut);margin:6px 0 0}
.keeprow.ask .keepwhy{margin-top:9px;padding-left:11px;border-left:2px solid var(--line);
  line-height:1.5;max-width:62ch}

/* 3. THE SETTINGS — one card, not three rows. The rules move INSIDE it, the outer ladder goes,
      and each hint sits tight under its own field at hint weight instead of body weight. */
.tryblock{margin:16px 0 0;border:1px solid var(--line);border-radius:12px;
  background:var(--card-2);padding:2px 14px 14px}
.tryblock .keeprow{border-top:1px solid var(--line-2);margin-top:0;padding-top:13px}
.tryblock .keeprow:first-child{border-top:0}
.tryblock .keepwhy{font-size:13px;line-height:1.45;margin-top:5px}
.tryblock .wrow input,.tryblock select{background:var(--card)}

/* 4. THE FOOTNOTE. Terminal and quiet — it is provenance, and it should read as the small print
      it is rather than as one more paragraph of equal size. */
.assume{font-size:13px;line-height:1.5;color:var(--mut);margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--line-2);max-width:64ch}

/* 5. THE VERDICT, AND ITS ELABORATION. `.sub` is the same conclusion said at greater length —
      it keeps the tone's colour but drops the heavy rail and the display size, so two green
      blocks read as headline-then-detail instead of two rival findings. */
.verdict{border-radius:0 13px 13px 0;padding:16px 17px 16px 18px;margin:0 0 14px;
  font-size:17.5px;line-height:1.5}
.verdict.good{background:var(--ok-bg);border-left:6px solid var(--ok)}
.verdict.warn{background:var(--warn-bg);border-left:6px solid var(--warn)}
.verdict .h{font-family:"Fraunces",Georgia,serif;font-size:21px;font-weight:600;display:block;margin-bottom:6px}
.verdict.good .h{color:var(--ok)}.verdict.warn .h{color:var(--warn)}
.verdict.sub{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:0 12px 12px 0;padding:14px 16px;margin-top:-4px}
.verdict.sub .h{font-size:18px;margin-bottom:5px}
.redo{appearance:none;background:var(--card);border:2px solid var(--line);border-radius:11px;
  min-height:48px;padding:0 18px;color:var(--ink-2);font:inherit;font-size:16px;font-weight:600;cursor:pointer;margin-top:2px}
.redo:hover{border-color:var(--brand);color:var(--brand)}

/* ── the answer fragment swaps in from the server; the placeholder keeps the shell from
      collapsing to nothing while a knob is being recomputed ── */
.answer-busy{opacity:.55;transition:opacity .15s}
@media (prefers-reduced-motion:reduce){.answer-busy{transition:none}}
.tr-noscript{margin:18px 0;padding:14px 16px;background:var(--warn-bg);border:1.5px solid var(--warn);
  border-radius:11px;color:var(--ink);font-size:16px;line-height:1.5}