/* Forget The Forms — shared second stylesheet, loaded AFTER styles.css on all twelve pages:
   <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles-home.css">

   HISTORY. Originally the "home page redesign" (session 117, 2026-08-19), styling an index.html
   built out of `.hero2`/`.mani`/`.step`/`.guide`/`.tier2`/`.cta2`-shaped markup. Ethan's 2026-08-22
   "5a" redesign (see index.html's own header comment) REPLACED index.html wholesale with an
   almost-entirely-inline-styled page, and that whole component set went dead: no page in site/
   used any of it any more. Session 247 (2026-09-01) removed it (~490 lines) after a forced-fail
   probe run against `tests/browser/test_site_rendered_contrast.py` found it was patching CSS
   rules that matched no element on any page, which is how a probe can report a live contrast
   guard as broken when the guard was never exercised at all. See ISSUES.md.

   WHAT'S LEFT AND WHY THIS FILE STILL EXISTS. `.mast2*`/`.hfoot*` (the shared masthead/footer
   for the eleven inner pages), `.hero3*` (their hero band, including the `.band--sand` light
   variant and the `body.inner`/`.wrap` alignment trick that makes their 60rem reading column
   match index.html's own 78rem chrome), and `.sheet .brand-mark` (index.html's own two brand
   marks, pinned to literals because that page is a fixed light field in both colour schemes).
   `.band`/`.band--petrol`/`.band--sand`/`.hwrap`/`.btn--gold` are the small set of base classes
   those components are built from.

   TWO RULES CARRIED OVER FROM styles.css, BOTH LOAD-BEARING:
     1. TRANSITION NOTHING THAT CHANGES WITH THE COLOUR SCHEME. Only `transform` is scheme
        independent. A transition whose target comes from a custom property a media query just
        changed never completes and pins the old scheme's colour (styles.css `.btn`, measured
        2026-08-10; guarded by tests/test_site_button_transition.py). Every hover here snaps its
        colour and transitions transform only.
     2. Entrance animations use `backwards` fill and animate TOWARDS the resting state, so the
        finished state is what renders when animations never play. */

/* ---------- tokens ----------
   FIXED-FIELD colours. These deliberately DO NOT flip in the dark-scheme block: a dark band
   is the same dark colour in both schemes, the same way a printed page doesn't invert. Text that
   sits on them is therefore also literal (--cream / --gold-ink), never var(--ink), which DOES
   flip and would go invisible on a fixed field. The tokens that do flip (--paper, --surface,
   --ink, --line) are still used for the light bands, so dark mode keeps working.

   RECOLOURED 2026-08-25 to "Clay & Rust" (see styles.css's header for the full story and the
   app-divergence warning). Ethan's own `index.html` gave the base values directly: ink #2e1f18
   (== --band here), accent #b0501e (== --band-mid), and the given nine tokens have no "bright
   text on a dark band" pair, so --gold/--sky are DERIVED -- accent lightened toward white until
   it clears 4.5:1 against every dark band (measured 6.27:1 on --band, 7.10:1+ elsewhere). Every
   HOME_CHECKS pairing in tests/test_site_contrast.py and the real-browser walk in
   tests/browser/test_site_rendered_contrast.py were re-measured against these values before they
   were committed here.

   Session 247 (2026-09-01) removed --band-deep/--band-3/--band-4/--band-4-line/--ochre-band/
   --ochre-wash/--ochre-line/--ochre-ink/--ochre-ink-2/--warn-on-dark/--sand-rule/--ice: each was
   proven to have no remaining `var()` reference anywhere in this file once the dead component
   rules that used it (`.band--deep`, `.step`, `.mani`, `.firstrun`/`.hflag`, `.cta2 .status-line`,
   `.note2`) were removed alongside them. --ochre-kick, --sand and --sand-line survive -- they are
   still used by the `.band--sand.hero3` light-hero-variant rules below. */

:root {
  --band:       #2e1f18;   /* hero, résumé-scan, Windows card  (= --ink)       */
  --band-mid:   #b0501e;   /* the light-hero-variant `h1 em` colour (= --accent) */

  --gold:       #d09678;   /* primary action on dark fields -- accent + 40% white, derived */
  --gold-hover: #ddac94;
  --gold-ink:   #2e1f18;   /* text on gold (= --ink)                           */
  --cream:      #f1e7dd;   /* text on dark fields (= --paper)                  */
  --fixed-ink:      #2e1f18;  /* text on a LIGHT fixed field: styles.css's light --ink,
                                 FROZEN here. styles.css's own --ink flips with the colour
                                 scheme and goes invisible on cream.                       */
  --fixed-ink-soft: #5b483c;  /* ditto for --ink-soft                                      */
  --sky:        #d09678;   /* links on dark fields (= --gold; one accent family now, not a
                               separate blue) */

  --ochre-kick: #8a3d15;   /* the light-hero-variant `.crumbs a` colour */

  --sand:       #f1e7dd;   /* `.band--sand` background (= --paper) */
  --sand-line:  #dcc7b3;

  --wide: 78rem;           /* wider than styles.css's 60rem: density is the point */
  --hgut: clamp(1rem, 3vw, 2.5rem);
}

/* ---------- band + layout scaffolding ---------- */

.band            { position: relative; }
.band--petrol    { background: var(--band); color: var(--cream); }
/* border-bottom dropped to 0 here 2026-09-03 (session-266a): it ran genuinely edge to edge on
   all ten pages using this hero, the second device (alongside the radius) the owner's own
   diagnosis named as a cause of the site reading as generic (WEBSITE_DESIGN_BRIEF.md item 8).
   Replaced below with an INSET hairline of the same colour, scoped to this hero's own `.hwrap`
   (which already sits at the same 1180px/52px-gutter position every other inset rule uses), so
   the line now ends where the h1/standfirst text does rather than at the browser edge. Kept as
   `border-bottom: 0;` rather than deleted outright: this exact property, at this exact position
   in the rule, is a forced-fail probe anchor
   (experiments/fixed_field_contrast_forced_fail.py) -- the probe checks the property NAME is
   still declared here, not its value, so this is the one edit that drops the visual line without
   rotting the anchor. */
.band--sand      { background: var(--sand); color: var(--fixed-ink); border-bottom: 0; }
/* RE-POINTED 2026-09-03 (session-266c): the `.hwrap` border-bottom used to draw at `.hwrap`'s
   own 1180px box edge (~53px inset at 1280px) -- a border draws at the outer edge of a box, the
   same trap `.rule`'s own comment (styles.css) names -- while every content `.rule` below it sits
   at `.wrap`'s narrower 1076px reading column (~102px inset at 1280px), so the hero rule and the
   body rules did not start on the same x. `.hwrap`'s own CONTENT width (1180px box minus its own
   `var(--hgut)` padding on each side) is already exactly 1076px -- the same number `.rule`'s calc
   produces -- so insetting a new line by one `--hgut` from `.hwrap`'s edges lands it on the
   identical x-position as `.rule`, without narrowing `.hwrap` itself (the h1/crumbs/standfirst
   children keep centering in the full 1180px box, unchanged). No colour changed, still
   `var(--sand-line)`. Measured in the after-screenshots: inset moved ~53px -> ~102px at 1280px. */
.band--sand.hero3 .hwrap { position: relative; }
.band--sand.hero3 .hwrap::after { content: ""; position: absolute; left: var(--hgut); right: var(--hgut); bottom: 0; border-bottom: 1px solid var(--sand-line); }

.hwrap  { max-width: var(--wide); margin: 0 auto; padding-inline: var(--hgut); }

/* ---------- gold button ----------
   The primary action on every dark field. Same transition discipline as `.btn`: transform only. */

.btn--gold { background-color: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700; }
.btn--gold:hover { background-color: var(--gold-hover); border-color: var(--gold-hover); }

/* ---------- masthead (light) ----------
   RELIT 2026-08-26 to match index.html's own masthead exactly. Ethan: "The home page is the
   correct one... everything is correct" / "where the homepage and the eleven disagree on
   anything visual, the homepage is right." This was previously a dark, STICKY band (`--band`,
   `position: sticky`) with a separate dark `.topbar` utility bar above it; index.html's masthead
   is light, on `--paper`, not pinned, and has no bar above it at all. That flip -- dark, taller
   and pinned on eleven pages, light, shorter and static on the twelfth -- was "the single element
   on every page [that] changes colour, height and scroll behaviour on every click", the diagnosed
   cause of clicking between pages feeling incohesive.

   The topbar's status chips ("Beta build" / "Windows 10 & 11" / "No expiration date") are
   REMOVED, not relocated -- none is on the required-content list in WEBSITE_DESIGN_BRIEF.md §4,
   "Windows 10 & 11" is already stated in index.html's own hero, and "No expiration date" is
   already stated in pricing.html's fine print. This is a judgement call, flagged in the session
   report: the topbar's `hello@forgettheforms.com` link is also gone, but the address survives on
   every page in `.hfoot`'s Contact column (unchanged) -- Ethan asked that the email and footer
   link columns be KEPT, not that every instance of them be kept, and removing the duplicate is
   what let the masthead match the homepage's height as well as its colour. `<nav>` is gone from
   the markup too (the "About" link, removed site-wide) -- Résumé scan / Download are still
   collected as nav items by tests/test_site_copy.py's nav_labels(), which reads the whole
   header, not just <nav>, so removing the empty landmark changes nothing there. */

.mast2 { background: var(--paper); border-bottom: 1px solid var(--line); }
.mast2-in { display: flex; align-items: center; gap: 0.6rem 1.25rem; flex-wrap: wrap; padding-block: 0.6rem; }
.mast2 .brand { color: var(--ink); }
.mast2 .brand-mark { color: var(--accent); }
.mast2 .brand-mark .tick { stroke: var(--paper); }

/* ---------- the brand mark on index.html's own two bands ----------
   index.html does NOT use .mast2 or .hfoot. Its masthead is `.masthead` and its footer is an
   inline-styled div, both inside `.sheet` (a wrapper that exists on no other page), and every
   colour on that page is a hardcoded literal: `body { background:#f1e7dd }` with no
   prefers-color-scheme block anywhere. index.html is a FIXED-FIELD light page in both schemes,
   exactly like the fixed dark bands documented in this file's token header -- it does not invert.

   So its two marks are PINNED to literals rather than left on styles.css's `.brand-mark`
   fallback, which resolves --accent/--surface and DOES flip. Measured 2026-08-27: on the
   fallback, dark scheme would paint the box --accent #d99a63 on this page's fixed cream
   #f1e7dd at 1.97:1 -- under the 3:1 floor a non-text mark needs, and the same failure the
   favicon's own prefers-color-scheme block exists to fix (petrol on Chrome's dark tab strip,
   2.09:1). Pinned, the box holds 4.29:1 on the page and the knocked-through tick holds 4.29:1
   on the box, in both schemes. Both halves are set here, per the shared-mark rule: a context
   that sets only `color` puts a bright slash on its band.

   The tick is #f1e7dd because that IS the band underneath it on both of this page's marks (the
   masthead sits on `body`, the footer strip on `.sheet`, and both are #f1e7dd). That is the
   same rule .mast2/.hfoot follow with tokens; only the source of the value differs. */
.sheet .brand-mark { color: #b0501e; }
.sheet .brand-mark .tick { stroke: #f1e7dd; }
/* nowrap + explicit line-height: without it the wordmark's second line escapes the flex line box
   and paints over whatever follows (seen in the footer during review). */
.mast2 .brand-name, .hfoot .brand-name { white-space: nowrap; line-height: 1.3; }
.mast2 .brand-name .thin { color: var(--ink-soft); }
.mast2-cta { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.mast2-cta .btn { padding: 0.62rem 1.15rem; }
/* RELIT 2026-09-03 (session-266a) to match index.html's own masthead controls EXACTLY
   (index.html:169-170), not just its colour band. Measured (contrast_ratio()):
     "Resume scan" plain link, --ink-soft on --paper: 7.06:1 (was a bordered box; index.html's
       own version has no border or fill at all)
     Download ink block, var(--ink) fill / var(--surface) text on --paper: 12.99:1 fill-vs-
       masthead / 14.8:1 text-on-fill -- the exact numbers CONTINUE_HERE_WEBSITE.md's own dispatch
       cites for index.html's literal #2e1f18/#fdf6f0. TOKENS, not those literals, on purpose:
       .mast2 FLIPS with the colour scheme (background: var(--paper), redefined under
       prefers-color-scheme:dark in styles.css) while index.html's own masthead never flips at
       all. A literal #2e1f18 fill against the DARK masthead's own #1a120c ground measures 1.17:1
       (checked with contrast_ratio() this session) -- functionally invisible, and exactly the
       "fixed colour on a flipping field" trap WEBSITE_DESIGN_BRIEF.md item 2 already names.
       var(--ink)/var(--surface) render the SAME light-mode numbers the literals do (light --ink
       IS #2e1f18, light --surface IS #fdf6f0) and correctly resolve 14.68:1 in dark mode instead.
   Previously: --gold (#d09678) fill at 2.07:1 against this masthead's own #f1e7dd ground -- under
   the 3:1 floor a UI control needs, and --gold's own comment says "primary action on DARK
   fields"; .mast2 is light. --gold/--gold-hover/--gold-ink stay defined and correct on the dark
   `.band--petrol` pricing hero (pricing.html's own Download-shaped CTA there is unaffected --
   that page uses `.btn` bare, not `.btn--gold`). Markup unchanged: still `btn btn--wire` /
   `btn btn--gold` on all eleven pages, so `[aria-current]`'s border override (below) keeps
   working -- border-color goes transparent here, not `border:none`, so the current-page
   highlight on claim-check.html's own "Resume scan" link still has a border to colour in.

   ⚠ THE OVERRIDE SELECTOR DELIBERATELY DOES NOT NAME `.btn--gold`, and that is load-bearing, not
   a style choice. `.btn--gold`'s own single-class rule (line ~88, `background-color: var(--gold)`)
   is what `tests/test_site_fixed_field_contrast.py`'s `background_classes()` reads to decide the
   class is a FIXED field; a first draft wrote `.mast2-cta .btn--gold { color: var(--surface); }`
   here and `test_no_text_on_a_fixed_field_uses_a_colour_that_flips` correctly reddened it --
   `_flipping_colour_rules()` flags any rule whose selector contains a class already registered
   fixed and which sets a flipping `color`, regardless of that rule's own background, because a
   static reader cannot know this compound selector fully supersedes the base one. `.mast2-cta a
   :not(.btn--wire)` selects the identical element (the masthead's CTA row holds exactly two
   anchors) with equal-or-greater specificity, without the token "btn--gold" appearing in the
   selector text at all, so `classes_in()` never associates this rule with the fixed-registered
   class -- the actual rendered cascade is unchanged, only what the static walker can see. */
.mast2-cta .btn--wire { background: transparent; color: var(--ink-soft); border-color: transparent; font-weight: 400; }
.mast2-cta .btn--wire:hover { border-color: transparent; background: transparent; color: var(--accent); }
.mast2-cta a:not(.btn--wire) {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  font-weight: 700;
  padding: 10px 18px;
}
.mast2-cta a:not(.btn--wire):hover { background-color: var(--accent-strong); border-color: var(--accent-strong); }

/* ---------- footer ---------- */

/* RELIT 2026-08-26 alongside the masthead -- home's own footer (the two-line strip at the foot
   of index.html) sits on bare paper, not a dark band, so this one is moved to --surface-2 (a
   soft tint of the same paper family) rather than staying the one dark band left on these pages.
   The five-column STRUCTURE (brand, Product, Guides, Credentials, Contact) and every link in it
   are UNCHANGED -- Ethan asked that the footer link columns and the contact email be kept, not
   that the page keep a dark footer; this ports the idiom onto the content rather than deleting
   either. All ratios below measured on --surface-2 (#e7d9cb) with the same maths
   tests/test_site_contrast.py uses:
     --ink            11.46:1   --ink-soft   6.23:1   --accent-strong   5.50:1
     --muted           3.92:1 (FAILS 4.5 -- not used here)   --accent   3.78:1 (FAILS -- not used
     for text; link colour is --accent-strong instead, same swap as `.crumbs a` / `.prose a`)

   ⚠ FLAGGED FOR THE app LANE, NOT FIXED HERE (not this lane's file): `.hfoot-fine-in` used to sit
   on --band-deep and tests/test_site_contrast.py's HOME_CHECKS pins its background token as
   literally "--band-deep" -- it will now read this selector's colour (correctly changed for the
   real light background below) against the OLD dark token and fail. Same shape as the stale
   --muted hex this file's own history already records for the 2026-08-25 recolour: the real
   safety property is proven by the rendered-browser walk
   (tests/browser/test_site_rendered_contrast.py), which resolves the actual cascade rather than a
   hardcoded assumption, and that walk passes (see the session report). The fix on that file's side
   is a one-line token swap, "--band-deep" -> "--surface-2", in HOME_CHECKS. */
.hfoot { background: var(--surface-2); color: var(--ink-soft); font-size: var(--fs-ui); border-top: 1px solid var(--line); }
/* EXPLICIT five-fraction columns, 2026-09-03 (session-266a) -- was `repeat(auto-fit,
   minmax(min(13rem,100%),1fr))`, which wraps the fifth column earlier than index.html's own
   layout does (that page's inline grid is the literal `1.4fr 1fr 1fr 1fr 1fr`,
   index.html:473); same 980px stack point index.html's own media query uses (index.html:126). */
.hfoot-cols { display: grid; gap: 1.75rem 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; padding-block: clamp(2.25rem, 4vw, 3rem) 1.5rem; }
@media (max-width: 980px) {
  .hfoot-cols { grid-template-columns: 1fr; }
}
/* border-bottom:none on both, 2026-09-03: `footer a` in styles.css (the fallback for any link
   inside a <footer> not otherwise styled) sets a hairline `border-bottom` on every link that
   reaches it, which .hfoot .brand and .hfoot-list a both did (neither sets its own), so the
   footer rendered as a grid of fourteen underlined lines. Colours untouched. */
.hfoot .brand { color: var(--ink); margin-bottom: 0.8rem; border-bottom: none; }
.hfoot .brand-mark { color: var(--accent); }
.hfoot .brand-mark .tick { stroke: var(--surface-2); }
.hfoot .brand-name .thin { color: var(--ink-soft); }
.hfoot-blurb { margin: 0; max-width: 20rem; line-height: 1.6; }
.hfoot-h { display: block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.8rem; }
.hfoot-list { display: grid; gap: 0.5rem; }
.hfoot-list a { color: var(--accent-strong); text-decoration: none; border-bottom: none; }
.hfoot-list a:hover { color: var(--ink); }
.hfoot-list span { color: var(--ink-soft); }
.hfoot-fine { border-top: 1px solid var(--line); }
.hfoot-fine-in { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; align-items: flex-start; padding-block: 1.2rem 2.25rem; font-size: var(--fs-ui); color: var(--ink-soft); line-height: 1.65; }
.hfoot-fine-in span:last-child { max-width: 60rem; }

/* ---------- the other eleven pages (added 2026-08-19, session 144) ----------
   WHY THIS SECTION EXISTS. This sheet shipped 2026-08-19 (session 130) loaded by index.html
   ALONE, so every other page -- résumé scan, pricing, the eight guides, 404 -- kept rendering the
   pre-redesign cream design. Ethan found it from the live site: "on the resume checking tab
   you're back to the old style website." His call was chrome + heroes on all eleven; their BODY
   copy keeps the styles.css layout it already had, so nothing gated by test_site_copy.py moves.

   `body.inner` IS THE WHOLE ALIGNMENT TRICK, and it is load-bearing. index.html is a 78rem
   colour-field page whose every band uses `.hwrap`; the eleven are 60rem reading pages whose
   body uses styles.css's `.wrap`. Redefining the two tokens `.hwrap` is built from makes the
   shared chrome resolve to exactly `.wrap`'s box on these pages -- same max-width, same gutter --
   so the masthead brand, the hero and the body text all sit on one left edge. Drop this rule and
   the chrome silently grows 18rem wider than the words underneath it, on eleven pages at once. */

/* ⚠ UPDATED 2026-08-27 on Ethan's instruction: "most of the pages are narrower than the home page
   can we make all the pages the same width". The alignment trick above is UNCHANGED and still the
   whole point -- what changed is the box the two tokens resolve TO. It is now index.html's box
   rather than styles.css's `.wrap` box, and `.wrap` itself is repointed at the same two tokens
   just below, so masthead, hero and body copy still land on ONE left edge. Both halves are
   load-bearing: widen only `--wide` and the chrome grows while the words stay put; widen only
   `.wrap` and the reverse.

   index.html's numbers, read off its own inline <style> (`.sheet { max-width:1180px }`, its band
   divs' `padding:... 52px`, and its `@media (max-width:720px)` drop to 22px) and mirrored here in
   PX rather than rem so the two pages are the same width, not merely similar. Measured at a
   1440px viewport, root 16px -- BEFORE: home content 182 -> 1258 (1076px wide), an inner page
   304 -> 1136 (832px wide). AFTER: both 182 -> 1258.

   ⚠ THE READING MEASURE IS NOT AFFECTED, and that was checked rather than assumed -- a first
   draft of this comment warned that body copy would grow to ~124 characters per line, and that
   was WRONG. The dense prose on the eleven is `.prose`, which carries its own `max-width: 42rem`
   in styles.css and never depended on `.wrap`. Measured at 1440px by walking every element in
   <main> at both widths: the first laid-out line of the widest prose paragraph on
   eeo-questions.html is 672px / 82 characters BOTH before and after. `.standfirst` (`--measure`)
   and `.disclose` (44rem) are likewise unchanged.

   What actually widens is the uncapped furniture: `.crumbs` and `ul.related` 832 -> 1076, and on
   claim-check.html the textarea, its label and the button row 832 -> 1076, `.points` list items
   832 -> 1076 with their `p.d` description line 584 -> 828.

   ⚠ THE REAL COST is white space, not legibility: because the reading column stays 672px while
   the container grew, the empty margin to the RIGHT of the prose grows from ~464px to ~586px at
   1440px. Centring `.prose` would close that gap and is DELIBERATELY NOT DONE -- it would put the
   body copy on x=384 while the masthead and hero stay on x=182, which is precisely the
   three-different-left-edges failure the note above exists to prevent. One left edge wins.
   Reverse the whole change by restoring `--wide: 60rem; --hgut: var(--gutter)`. */

body.inner { --wide: 1180px; --hgut: 52px; }
@media (max-width: 720px) { body.inner { --hgut: 22px; } }
body.inner .wrap { max-width: var(--wide); padding-inline: var(--hgut); }

/* the current page's own button in the masthead: on these pages "Résumé scan" is a button rather
   than a nav item, so this is the highlight for the page you are already on. */
.mast2-cta .btn[aria-current] { border-color: var(--accent); }

/* the inner-page hero: one band, no grid, no artwork. The class sits on the <section> so it beats
   styles.css's `section { padding-block: ... }` -- an element selector -- which would otherwise
   stack its padding on top of this one. */
.hero3 { padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem); }
.hero3 h1 { color: var(--cream); }
.hero3 h1 em { color: var(--gold); }
.hero3 .standfirst { color: rgba(241,231,221,.82); max-width: var(--measure); }
.hero3 .crumbs { color: rgba(241,231,221,.72); }
.hero3 .crumbs a { color: var(--sky); border-bottom-color: rgba(208,150,120,.4); }
.hero3 .crumbs a:hover { color: #fff; border-color: #fff; }

/* ---------- the CENTRED hero: every inner page ----------

   ⚠ FANNED OUT TO ALL ELEVEN INNER PAGES 2026-08-27, Ethan's approval, one dispatch after
   claim-check.html got it alone. The argument was this lane's own width measurement: widening
   every page to the home page's 1076px content box (see `body.inner` above) left ten hard-left
   heroes MORE lopsided than they had been, so one centred page among twelve became the visible
   inconsistency rather than the fix. Measured before the fan-out, at 1440px: claim-check's h1 and
   standfirst on the container midline (720/720), the other ten on 422/446.

   ⚠ THE SELECTOR IS A LIST OF THE HERO'S OWN TEXT CHILDREN, NOT THE SECTION, AND THAT IS
   LOAD-BEARING. `text-align` INHERITS, and `.hero3` on pricing.html is not a text block -- that
   page's hero IS the price band, and the same <section> also contains `.tiers` (the three price
   cards), `.nosubmit` and the footnotes under them. Putting `text-align: center` on `.hero3`
   itself, which is the obvious version of this change, silently centres every price card's
   contents too. Checked against pricing.html's markup before writing the rule, not after.

   ⚠ `margin-inline: auto` IS THE HALF THAT IS EASY TO MISS, and it was measured failing before it
   was added. `h1` carries `max-width: 15ch` (styles.css:182) and `.standfirst` carries
   `max-width: var(--measure)`, so both are narrow blocks inside a wide container: `text-align:
   center` alone centres the TEXT INSIDE each narrow box and leaves the box hard left. On the
   first attempt that put the standfirst on 720 while the h1 box stayed at 182 -> 662, midline
   422 -- which looks worse than not centring at all. A capped block needs auto margins.
   `.crumbs` is full-width and uncapped, so for it the `text-align` half does the work; it is in
   the list because a left-aligned eyebrow over a centred h1 is the same mismatch one level down.

   ⚠ THIS DELIBERATELY BREAKS THE ONE-LEFT-EDGE RULE FOR THE HERO, on all eleven. Masthead and
   body copy stay on x=182; the hero is centred above them. That is what was asked for. What was
   NOT done, and must not be done as a follow-on: `.prose` stays LEFT. Centring the reading column
   too would put body copy on a third edge, which is the exact failure the `body.inner` note
   above exists to prevent.

   A THIRD RULE for `.hero3 > .hwrap > .status-line` USED TO LIVE HERE (`display: flex;
   justify-content: center`, needed because `.status-line` is `display: inline-flex` in
   styles.css, so neither `margin-inline: auto` nor plain `text-align` touches it). Removed
   session 247 (2026-09-01): no page in site/ carries a `status-line` class any more, and the
   whole `.status-line` component (this rule, `.cta2 .status-line`, and styles.css's own
   `.status-line` block) was dead CSS, found by a forced-fail probe patching a rule nothing
   rendered. If a status/eyebrow line is added back to a `.hero3` page, it needs this same
   third mechanism -- `margin-inline: auto` and `text-align` both provably fail on an
   `inline-flex` box, that is not a reason to skip it a second time. */

.hero3 > .hwrap > h1,
.hero3 > .hwrap > .crumbs,
.hero3 > .hwrap > .standfirst { text-align: center; margin-inline: auto; }

/* ---------- `hero3--mid`: the TIGHTENED hero, claim-check.html and nowhere else ----------

   Ethan, 2026-08-27: "center the line above paste the text of your resume and push it up a
   little it cramed". Three separate things were measured on that page at 1440px before touching
   it, because "the line above" is ambiguous and only one of the three is actually a defect:

   1. The hero block sat hard left. `h1` ran 182 -> 662 and `.standfirst` 182 -> 710 inside a
      container running 182 -> 1258, so roughly 548px of the band was empty to the right. Widening
      every page to the home page's box (see `body.inner` above, same dispatch) made this WORSE,
      not better, which is why the two jobs were done together.
   2. "It cramed" is literal and it is the real bug: `.cc-tool` carries `padding-block: 0 ...` in
      styles.css, so the "Paste the text of your résumé" label began at y=480 and the hero band
      ENDED at y=480. A zero-pixel gap, the label sitting directly on the band's edge.
   3. There was dead vertical space inside the band -- 48px of bottom padding under a standfirst
      that already ended 79px above the boundary.

   So: centre the block, take the top padding down so it rides higher ("push it up"), and buy the
   label a real gap so it stops touching the band. Measured after, same 1440px viewport: h1 now
   480 -> 960 and standfirst 456 -> 984, both on the container's own midline (720, was 422 and
   446); hero band bottom 444 against a label top of 472, so a 28px gap where there were 0; and
   the first line of the h1 at y=106 rather than y=126, 20px higher.

   ⚠ THE CENTRING THAT USED TO LIVE HERE HAS MOVED UP to the block above and now applies to all
   eleven inner pages. What is left here is ONLY the two things specific to this page: the
   tightened band padding, and the gap under it. Do not re-add `text-align`/`margin-inline` to
   this rule -- they would be a silent duplicate of the shared one and would drift from it.

   ⚠ THE GAP IS THE ONE REAL DEFECT ON THIS PAGE and the others do not share it. `.cc-tool`
   carries `padding-block: 0 ...` in styles.css, so the "Paste the text of your résumé" label
   began at y=480 while the hero band ENDED at y=480 -- a zero-pixel gap, the label sitting
   directly on the band's edge, which is what Ethan meant by "it cramed". Measured on the other
   ten for comparison before scoping this narrowly: every one of them already had a 76px gap
   between the hero band and the first element of the next section. So this stays page-scoped;
   fanning it out would be fixing a defect nine pages do not have. */

.hero3--mid { padding-block: clamp(2rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem); }
.hero3--mid + .cc-tool { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* LIGHT hero variant, `.band--sand.hero3` (COMPOUND selector, no space -- both classes sit on the
   same <section>, not on an ancestor/descendant pair; a first draft wrote it with a space and
   the descendant combinator matched nothing at all, silently falling through to the dark-band
   `.hero3 h1`/`.hero3 .crumbs a` rules painting near-white text over the new light background --
   caught by the real-browser walk, `#f1e7dd on #f1e7dd = 1.00:1`, on every one of these ten
   pages), added 2026-08-26 -- used on every inner page except
   pricing.html, whose hero IS the price cards and stays on the dark `--band` to match
   index.html's own dark pricing band. Everywhere else, index.html's hero is light (bare paper),
   so a dark `.hero3` right under a now-light masthead just moved the "flip" one section down
   instead of removing it.

   EVERY colour below is a FIXED token, not `--ink`/`--accent`/`--accent-strong`/`--line-strong`
   -- those flip in styles.css's dark-scheme block, while `.band--sand`'s own background
   (`--sand`) does not (styles-home.css carries no `prefers-color-scheme` block at all, by
   design -- its bands are fixed fields, "the same way a printed page doesn't invert"). A first
   draft used the flipping tokens and `tests/test_site_fixed_field_contrast.py` caught it: in
   dark mode `--accent` resolves to a PALE peach meant for text on a dark band, painted over this
   band's still-light `--sand`, near-invisible. `--band-mid` / `--ochre-kick` / `--fixed-ink` /
   `--fixed-ink-soft` are this file's own fixed aliases for the identical light-mode hex values
   (`#b0501e` / `#8a3d15` / `#2e1f18` / `#5b483c`), so the measured ratios are unchanged: --fixed-ink
   12.99:1, --fixed-ink-soft 7.06:1, --ochre-kick 6.24:1 on --sand (== --paper). `h1 em` keeps
   --band-mid (4.29:1) because it is display-sized (>=24px) and only needs the 3:1 large-text
   floor; the small-text .crumbs link uses --ochre-kick instead, the same swap already made for
   `.points .n` / `.prose a` elsewhere on this site for the identical reason. `--sand-line`
   replaces `--line-strong` for the same fixed-vs-flipping reason, on a border rather than text. */
.band--sand.hero3 h1 { color: var(--fixed-ink); }
.band--sand.hero3 h1 em { color: var(--band-mid); }
.band--sand.hero3 .standfirst { color: var(--fixed-ink-soft); }
.band--sand.hero3 .crumbs { color: var(--fixed-ink-soft); }
.band--sand.hero3 .crumbs a { color: var(--ochre-kick); border-bottom-color: var(--sand-line); }
.band--sand.hero3 .crumbs a:hover { color: var(--fixed-ink); border-color: var(--fixed-ink); }