/* ═══════════════════════════════════════════════════════════════════════════
   Clarity guide treatment, 2026-10-03
   ───────────────────────────────────────────────────────────────────────────
   Hunter sent a screen recording of a competitor's Medicare page: "you see how
   much space and how clear the data is and how easy it is to read… I even like
   that brighter blue supporting color and also the bright color text box…
   I want us to have our guides be similar but i dont want it to be exactly
   like theirs."

   He then sent two crops to sample from. The second one set the format:
   "I like this blue combo. the way it has dark for the text, outline then a
   lighter version of the blue in the text box i want to use this color format
   to display information across our colored category guides as well."

   THE FORMAT: four steps of one hue — palest as the fill, a mid tone as a 4px
   bar down the left edge, the darkest for the heading, a strong mid-dark for
   the body. Nothing else changes between categories: same padding, same radii,
   same type. The blue row is sampled pixel-exact from his crop; the other three
   are built to the same four-step relationship so the set reads as one system.

   THE FOUR MARKS, and what each one tells a reader before they read a word:
     blue   — how it works          (the plain explanation)
     amber  — what it costs you     (the part that reaches your pocket)
     indigo — a choice you make     (a fork where you pick a route)
     green  — something you do      (try it, or move on)

   Amber rather than red: Hunter rejected red on sight. Amber reads as caution
   rather than error, and it leaves brand red #D21812 for genuine errors and
   the logo. Mauve is deliberately NOT one of the marks — it sits too close to
   indigo to work as a separate code, so it stays a logo and brand colour.

   Green doubles as the button colour on purpose, so green always means
   "you act here" instead of meaning two different things.

   This file LOADS AFTER each page's own <style> blocks and overrides them by
   source order. Selectors are also prefixed with `body` so they still win if
   a page ever loads it earlier. Nothing here changes markup, so removing the
   one <link> per page reverts the whole treatment.

   A note for whoever reads this later: a left-accent card is a well-worn
   device, normally worth avoiding. Hunter asked for it specifically, off a
   reference he likes. If the guides ever start feeling generic, this is the
   first thing to re-examine.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* how it works — sampled pixel-exact from Hunter's crop */
  --g-blue-fill: #EFF6FF;
  --g-blue-bar:  #50A2FF;
  --g-blue-head: #1C398E;
  --g-blue-body: #193CB8;

  /* what it costs you */
  --g-amber-fill: #FDF1DE;
  --g-amber-bar:  #E0A445;
  --g-amber-head: #6B3B05;
  --g-amber-body: #8A3F06;

  /* a choice you make, and the guide's own structure — from the swatch Hunter
     supplied on 2026-10-03, sampled pixel-exact at #4F46E5 */
  --g-indigo-fill:   #EEEDFD;
  --g-indigo-bar:    #8B85EE;
  --g-indigo-head:   #272083;
  --g-indigo-body:   #4338CA;
  --g-indigo-strong: #4F46E5;  /* his exact swatch: solid fills under white text */

  /* something you do */
  --g-green-fill: #E8F7F0;
  --g-green-bar:  #45BE91;
  --g-green-head: #064E36;
  --g-green-body: #0A7A54;

  --g-callout-radius: 0 14px 14px 0;
}

/* ── air ──────────────────────────────────────────────────────────────────
   The reading column was already 760px, so the competitor's extra calm came
   from line-height and the space between sections rather than from width. */
body .wrap { padding-bottom: 88px; }
body section.step { margin-top: 60px; }
body .card p { line-height: 1.78; }
body .card + .card { margin-top: 14px; }

/* ── headings in the serif ────────────────────────────────────────────────
   h1 was already Lora. Section headings were sans 700, which is why the page
   read as a stack of cards rather than as a piece of writing. */
body h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--navy);
}
body .card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19.5px;
}

/* ── the callout format ───────────────────────────────────────────────────
   One shape. The colour is the only thing that changes, and it is the colour
   that tells the reader what kind of thing they are looking at. */
body .card.clock,
body .card.good,
body .card.compare,
body details.going {
  border: 0;
  border-left: 4px solid;
  border-radius: var(--g-callout-radius);
  padding: 20px 24px;
}

/* what it costs you */
body .card.clock {
  background: var(--g-amber-fill);
  border-left-color: var(--g-amber-bar);
}
body .card.clock h3 { color: var(--g-amber-head); }
body .card.clock p  { color: var(--g-amber-body); }
body .tag.clock {
  background: #fff;
  color: var(--g-amber-body);
}

/* something you do */
body .card.good {
  background: var(--g-green-fill);
  border-left-color: var(--g-green-bar);
}
body .card.good h3 { color: var(--g-green-head); }
body .card.good p  { color: var(--g-green-body); }
body .tag.good {
  background: #fff;
  color: var(--g-green-body);
}

/* a choice you make */
body .card.compare {
  background: var(--g-indigo-fill);
  border-left-color: var(--g-indigo-bar);
}
body .card.compare h3 { color: var(--g-indigo-head); }
body .card.compare p  { color: var(--g-indigo-body); }

/* ── what indigo is NOT used for ──────────────────────────────────────────
   It was briefly put on the step numbers, the progress rail and the contents
   panel on 2026-10-03, and taken straight back off: "I dont like the numbers
   being purple I liked the format it was before I just wanted you add
   variation with purple in."

   The point stands. Indigo is a callout colour alongside blue, amber and
   green. It does not touch the guide's furniture — the numbered circles stay
   navy, the progress rail stays green, and the contents panel is left alone.
   If indigo ever looks too rare again, mark more of the genuinely comparative
   blocks with `compare`; do not give it a structural job. */

/* how it works — the "Going deeper" disclosures are the explanation colour */
body details.going {
  background: var(--g-blue-fill);
  border-left-color: var(--g-blue-bar);
}
body details.going > summary { color: var(--g-blue-head); font-weight: 700; }
body details.going p { color: var(--g-blue-body); }
body .tag.learn {
  background: var(--g-blue-fill);
  color: var(--g-blue-body);
}

/* ── scroll reveal: NOT HERE, and deliberately so ─────────────────────────
   The guides have had one since before this file existed. Each page's own
   script marks `.card, .player, .step-head, .quote` with `.rv`, skips anything
   already above the fold so the first screen never flashes, and adds `.in` as
   each one reaches view.

   A reveal was briefly added here on 2026-10-03 and removed the same day: it
   was a straight duplicate, and because both systems set opacity to 0 on the
   same elements, an element would have needed BOTH to agree before it showed.
   That is a blank-paragraph bug waiting to happen.

   To change how the guides animate, change the per-page script. Do not add a
   second system here. */