/* calsdp.com — Sentinel Four brand system.
   Built from the approved dial-3 mockup, revision 3, 11 September 2026.

   Three rules that hold the design together. Breaking any one of them is how this
   drifts back into looking like a template:

   1. SQUARED CORNERS. No border-radius anywhere.
   2. SIGNAL GOLD IS AN ACCENT, NEVER BODY TEXT. #C9A24A on white is about 2.2:1 and
      fails contrast. Where gold must carry words, use --gold-ink (#8A6B22).
   3. STRUCTURE COMES FROM RULES, NOT BOXES. Sections are separated by a 3px navy top
      border or a color block, not by a card with a border on all four sides.

   MOTION: every animation is wrapped so that `prefers-reduced-motion: reduce` turns it
   off completely. This is a disability services site — vestibular disorders are common
   in this audience and motion is not decoration to the people it affects. Nothing here
   moves on its own, nothing loops, and the page is fully readable with animation off. */

:root {
  --navy: #1b3a5f;
  --midnight: #10223a;
  --gold: #c9a24a;        /* accent only: rules, borders, underlines */
  --gold-ink: #8a6b22;    /* the gold that may carry text */
  --cloud: #eaeef3;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --paper: #ffffff;

  --rule: #d9dee5;
  --accent: var(--navy);          /* kept: existing templates reference it */
  --accent-soft: var(--cloud);
  --dim: #8fa4b8;
  --bright: #b9c9d9;

  --ff-display: "Montserrat", system-ui, sans-serif;
  --ff-body: "Source Sans 3", system-ui, sans-serif;
  --wrap: 72rem;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { font-family: var(--ff-display); line-height: 1.1; color: var(--navy); }
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.6rem; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; margin: 2.4rem 0 0.7rem; text-wrap: balance; }
h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6rem 0 0.4rem; }
h4 { font-size: 1rem; font-weight: 700; margin: 1.2rem 0 0.3rem; color: var(--midnight); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--muted); font-size: 0.95rem; }
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; color: var(--ink); max-width: 62ch; }

/* the brand mark, wherever it appears */
.mark { display: block; height: 26px; width: auto; color: currentColor; }
.mark-sm { height: 18px; }
.mark-lg { height: 46px; }

/* ---- utility strip ------------------------------------------------------------------ */
.utility { background: var(--midnight); color: var(--bright); font-size: 0.85rem; }
.utility-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.65rem; flex-wrap: wrap; }
.utility a { color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; }
.utility a:hover { border-bottom-color: var(--gold); }

/* ---- masthead ----------------------------------------------------------------------- */
.masthead { border-bottom: 1px solid var(--cloud); background: var(--paper); position: sticky; top: 0; z-index: 10; }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; flex-wrap: wrap; }
.brand { font-family: var(--ff-display); font-size: 1.45rem; text-decoration: none; color: var(--navy); letter-spacing: -0.02em; border-bottom: 3px solid var(--gold); padding-bottom: 2px; }
.brand-mark { font-weight: 800; }
.brand-name { font-weight: 600; }
.nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.nav > a, .nav-item > a { text-decoration: none; color: var(--navy); font-weight: 600; font-size: 0.98rem; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color 0.18s var(--ease); }
.nav > a:hover, .nav-item > a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ---- nav drop-downs ------------------------------------------------------------------
   Opens on hover, on keyboard focus anywhere inside (:focus-within), and on tap via the
   .open class the script adds. The parent is always a real link, so none of this is load
   bearing: if the CSS or the script fails the nav is exactly what it was before. */
/* A flex box, not inline-block, so its link is laid out exactly like the plain Glossary and
   About links beside it. As an inline-block the link's underline padding sat outside the
   box, and the two plain links rode 3.5px higher than the four with menus. */
.nav-item { position: relative; display: flex; }
.nav-item > a::after {
  content: ""; display: inline-block; width: 0; height: 0; margin-left: 0.4rem;
  vertical-align: 0.15em;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid var(--muted);
}
.nav-menu {
  position: absolute; top: 100%; left: -0.9rem; z-index: 40;
  min-width: 17rem; max-width: 22rem;
  /* A hidden menu is still laid out, so one hanging off the right of the masthead gave every
     page on the site a horizontal scrollbar even though nothing was visible. The last two
     items sit at the right edge, so their menus open leftwards from that edge instead. */
  background: var(--paper); border: 1px solid var(--cloud);
  border-top: 3px solid var(--gold);
  box-shadow: 0 14px 34px rgba(16, 34, 58, 0.14);
  padding: 0.4rem 0;
  display: flex; flex-direction: column;
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.nav .nav-item:nth-last-of-type(-n + 2) > .nav-menu { left: auto; right: -0.9rem; }
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-item.open > .nav-menu { visibility: visible; opacity: 1; transform: none; }

.nav-menu a {
  display: block; padding: 0.5rem 1rem; font-size: 0.92rem; font-weight: 400;
  color: var(--ink); text-decoration: none; border: 0; line-height: 1.4;
  border-left: 3px solid transparent;
}
.nav-menu a:hover, .nav-menu a:focus { background: var(--cloud); border-left-color: var(--gold); }
.nav-menu-head { font-family: var(--ff-display); font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.nav-menu-sub { padding-left: 1.7rem !important; color: var(--muted); }
.nav-menu-all { border-top: 1px solid var(--cloud); margin-top: 0.3rem; font-weight: 600; color: var(--navy); }
.nav-menu-date { display: block; font-family: var(--ff-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }

/* ---- the Menu button ------------------------------------------------------------------
   Below 60rem the six links no longer sit comfortably beside the brand, so they fold behind
   a Menu button and open as a full-width panel under the masthead. Every rule here is
   scoped to .nav-collapsible, which only the script adds: with no script the nav wraps
   instead, and nothing is hidden. The breakpoint is repeated in base.njk's nav script. */
.nav-toggle { display: none; }
@media (max-width: 60rem) {
  .nav-collapsible .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font: 600 0.95rem var(--ff-body); color: var(--navy);
    background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
    padding: 0.45rem 0.8rem; cursor: pointer;
  }
  .nav-collapsible .nav-toggle:hover { border-color: var(--navy); }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 1.05rem; height: 2px; background: var(--navy); border-radius: 1px;
    transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  .nav-collapsible .nav { display: none; }
  .nav-collapsible.nav-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    flex-basis: 100%; border-top: 1px solid var(--cloud); margin-top: 0.2rem;
    /* the masthead is sticky, so a long open panel must scroll inside itself */
    max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-collapsible .nav > a, .nav-collapsible .nav-item > a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.8rem 0.2rem; font-size: 1.02rem;
    border-bottom: 1px solid var(--cloud);
  }
  .nav-collapsible .nav a[aria-current="page"] { border-bottom-color: var(--cloud); box-shadow: inset 3px 0 0 var(--gold); padding-left: 0.8rem; }
  .nav-collapsible .nav > a:last-child { border-bottom: 0; }
  .nav-collapsible .nav-item { flex-direction: column; }
  .nav-collapsible .nav-item > a::after { margin-right: 0.3rem; transition: transform 0.18s var(--ease); }
  .nav-collapsible .nav-item.open > a::after { transform: rotate(180deg); }
}

/* On a narrow screen there is no room to float a panel beside the nav, and no hover to
   open it with: the menu becomes an inline block that the tap toggles. Applies inside the
   Menu panel, and to the wrapped nav when there is no script. */
@media (max-width: 60rem) {
  .nav-item { width: 100%; }
  .nav-collapsible .nav-item { width: auto; }
  .nav-menu {
    position: static; min-width: 0; max-width: none; box-shadow: none;
    border: 0; border-left: 3px solid var(--gold); margin: 0.4rem 0 0.6rem 0.2rem;
    transform: none; visibility: visible; opacity: 1;
  }
  .nav-item:not(.open) > .nav-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; }
}

/* ---- eyebrow: gold dash + letterspaced label ---------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  font-family: var(--ff-display); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 700;
  color: var(--gold-ink); margin: 0 0 0.7rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); flex: none; }

/* a logo-and-hairline section break, as in the mockup */
.rule-break { display: flex; align-items: center; gap: 1rem; margin: 3rem 0 1.8rem; color: var(--navy); }
.rule-break::after { content: ""; height: 1px; background: var(--cloud); flex-grow: 1; }

/* ---- buttons ------------------------------------------------------------------------ */
.button {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--navy); color: #fff; text-decoration: none;
  font-family: var(--ff-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.9rem 1.45rem; border: 2px solid var(--navy);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.button:hover { background: var(--midnight); border-color: var(--midnight); transform: translateY(-2px); }
.button-secondary { background: transparent; color: var(--navy); }
.button-secondary:hover { background: var(--cloud); border-color: var(--navy); color: var(--navy); }
.button-gold { background: var(--gold); border-color: var(--gold); color: var(--midnight); }
.button-gold:hover { background: #b8913c; border-color: #b8913c; color: var(--midnight); }

/* ---- home: hero --------------------------------------------------------------------- */
.hero { padding: 3.6rem 0 2rem; max-width: 62rem; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: 1.04; }
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-common { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: baseline; margin-top: 1.6rem; font-size: 0.97rem; color: var(--muted); }
.hero-common a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); }
.hero-common a:hover { border-bottom-width: 2px; }

/* ---- search ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.search { display: flex; max-width: 44rem; margin: 1.8rem 0 0; border: 2px solid var(--navy); background: var(--paper); }
.search input {
  flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--ff-body); font-size: 1.05rem; color: var(--ink); padding: 0.9rem 1rem;
}
.search input::placeholder { color: var(--muted); }
.search:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.search button {
  border: 0; background: var(--navy); color: #fff; cursor: pointer;
  font-family: var(--ff-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0 1.5rem;
  transition: background 0.16s var(--ease);
}
.search button:hover { background: var(--midnight); }

.search-results { max-width: 44rem; margin: 0.6rem 0 0; border: 1px solid var(--cloud); border-top: 0; background: var(--paper); }
.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results li { border-bottom: 1px solid var(--cloud); }
.search-results li:last-child { border-bottom: 0; }
.search-results a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: var(--ink); }
.search-results a:hover, .search-results a:focus { background: var(--cloud); }
.search-hit { font-family: var(--ff-display); font-weight: 700; color: var(--navy); font-size: 1rem; }
.search-kind {
  font-family: var(--ff-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-ink); margin-left: 0.5rem;
}
.search-note { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.45; }
.search-empty { padding: 0.9rem 1rem; color: var(--muted); font-size: 0.95rem; margin: 0; }
.search-more { margin: 0; padding: 0.6rem 1rem; border-top: 1px solid var(--cloud); background: var(--cloud); font-size: 0.85rem; color: var(--muted); }

/* the /search/ results page */
.search-back { margin: 0 0 1.4rem; }
.search-back a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }
.search-back a:hover { border-bottom-width: 2px; }
.results-count { margin: 1.6rem 0 0.6rem; font-family: var(--ff-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.results-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cloud); }
.results-list li { border-bottom: 1px solid var(--cloud); }
.results-list a { display: block; padding: 1.1rem 0.4rem; text-decoration: none; color: var(--ink); border-left: 3px solid transparent; padding-left: 0.9rem; transition: border-color 0.16s var(--ease), background 0.16s var(--ease); }
.results-list a:hover, .results-list a:focus { background: var(--cloud); border-left-color: var(--gold); }
.result-title { font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; color: var(--navy); }
.result-note { display: block; margin-top: 0.35rem; font-size: 0.97rem; line-height: 1.55; color: #333; }

/* ---- paths: three numbered routes in, per the mockup -------------------------------- */
.paths { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 2.4rem 0 3rem; }
.path { display: flex; flex-direction: column; gap: 0.55rem; border-top: 3px solid var(--navy); padding-top: 1.1rem; text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease); }
.path:hover { border-top-color: var(--gold); }
.path-n { font-family: var(--ff-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.path h2 { margin: 0; font-size: 1.3rem; border: 0; padding: 0; }
.path p { margin: 0; color: #333; }

/* ---- a full-bleed cloud band -------------------------------------------------------- */
.band { background: var(--cloud); margin: 3rem 0; padding-block: 3rem; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.band-head h2 { margin: 0 0 0.5rem; border: 0; padding: 0; }
.band-head p { margin: 0; max-width: 58ch; }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tile { background: var(--paper); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; text-decoration: none; color: inherit; border-bottom: 3px solid transparent; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.tile:hover { border-bottom-color: var(--gold); transform: translateY(-3px); }
.tile-term { font-family: var(--ff-display); font-size: 1rem; font-weight: 700; color: var(--navy); }
.tile p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--muted); }

/* ---- cards: bordered, with an icon, as the mockup's tool blocks ---------------------- */
.cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 1.8rem 0 2.6rem; }
.card { display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; color: inherit; border: 1px solid var(--navy); padding: 1.6rem; background: var(--paper); transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.card:hover { background: var(--cloud); transform: translateY(-3px); }
.card .mark, .card svg { color: var(--navy); height: 26px; width: 26px; }
.card h2 { margin: 0; font-size: 1.25rem; color: var(--navy); border: 0; padding: 0; }
.card p { margin: 0; color: #333; font-size: 0.98rem; line-height: 1.55; }
.recent { margin-bottom: 3rem; }

/* ---- changelog: date column + entry, per the mockup --------------------------------- */
.changelog-block { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3rem; align-items: start; margin: 3.5rem 0; }
.changelog-intro h2 { margin: 0 0 0.7rem; border: 0; padding: 0; }
.changelog-intro p { margin: 0 0 0.9rem; font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 52rem) { .changelog-block { grid-template-columns: 1fr; gap: 1.6rem; } }

.changelog { display: flex; flex-direction: column; border-top: 2px solid var(--navy); }
.change { display: grid; grid-template-columns: 7rem 1fr; gap: 0 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--cloud); }
.change-date { font-family: var(--ff-display); font-size: 0.78rem; font-weight: 700; color: var(--gold-ink); letter-spacing: 0.06em; text-transform: uppercase; margin: 0.15rem 0 0; }
.change-title { font-size: 1.05rem; font-weight: 600; color: var(--navy); line-height: 1.4; margin: 0; }
.change p { margin: 0.35rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
.change-link { margin-top: 0.5rem !important; }
.change-link a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); font-size: 0.93rem; }
.change-link a:hover { border-bottom-width: 2px; }
.changelog-full .change { padding: 1.4rem 0; }
.changelog-full .change p { font-size: 1rem; color: #333; }
@media (max-width: 34rem) { .change { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ---- lists -------------------------------------------------------------------------- */
.term-list { list-style: none; padding: 0; margin: 0.6rem 0 2.2rem; }
.term-list li { padding: 0.65rem 0; border-bottom: 1px solid var(--cloud); display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: baseline; }
.term-list a { font-weight: 600; text-decoration: none; color: var(--navy); border-bottom: 1px solid var(--gold); }
.term-list a:hover { border-bottom-width: 2px; }
.term-list-large li { padding: 0.9rem 0; font-size: 1.1rem; }

/* ---- content pages ------------------------------------------------------------------ */
.page { max-width: 46rem; padding: 2.4rem 0 3rem; }
.page-head { margin-bottom: 1.4rem; }
.aka { color: var(--muted); margin: 0.3rem 0; font-size: 0.97rem; }
.reviewed { color: var(--muted); font-size: 0.93rem; margin: 0.3rem 0 0; }

.badge {
  display: inline-block; font-family: var(--ff-display);
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.22rem 0.6rem; background: var(--cloud); color: var(--navy); font-weight: 700;
}
.badge-review { background: #f5ecd6; color: var(--gold-ink); }
.badge-draft, .badge-planned { background: var(--cloud); color: var(--muted); }
.badge-ready { background: #e3f0e8; color: #1f6b3a; }

.prose h2 { border-top: 1px solid var(--cloud); padding-top: 1.6rem; }
.prose > p:first-of-type { font-size: 1.15rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: 0.98rem; display: block; overflow-x: auto; }
@media (min-width: 45rem) { .prose table { display: table; } }
.prose th, .prose td { border: 1px solid var(--cloud); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.prose th { background: var(--navy); color: #fff; font-family: var(--ff-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.prose blockquote { border-left: 3px solid var(--navy); background: var(--cloud); margin: 1.4rem 0; padding: 1.1rem 1.3rem; }
.prose blockquote p { margin: 0.3rem 0; }
.prose code { font-size: 0.92em; background: var(--cloud); padding: 0.08rem 0.35rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: 0.35rem 0; }

.evidence, .see-also { margin-top: 2.6rem; padding: 1.4rem 1.6rem; background: var(--cloud); border-left: 3px solid var(--gold); }
.evidence h2, .see-also h2 {
  margin: 0 0 0.6rem; font-size: 0.7rem; font-family: var(--ff-display);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy);
  border: 0; padding: 0;
}
.evidence ul, .see-also ul { margin: 0; padding-left: 1.2rem; }
.evidence li { font-size: 0.93rem; margin-bottom: 0.4rem; word-break: break-word; }
.confidence { font-size: 0.93rem; color: #333; margin: 0 0 0.7rem; font-style: italic; }
.see-also ul { list-style: none; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.see-also a { background: var(--paper); border: 1px solid var(--navy); padding: 0.3rem 0.8rem; text-decoration: none; font-weight: 600; font-size: 0.93rem; transition: background 0.16s var(--ease), color 0.16s var(--ease); }
.see-also a:hover { background: var(--navy); color: #fff; }

/* ---- publisher block ---------------------------------------------------------------- */
.publisher { background: var(--navy); color: #fff; margin-top: 4rem; }
.publisher-row { display: flex; gap: 2.6rem; align-items: flex-start; flex-wrap: wrap; padding-block: 3rem; }
.publisher .mark { color: var(--gold); flex: none; }
.publisher-body { flex-grow: 1; min-width: 20rem; max-width: 68ch; }
.publisher-head { font-family: var(--ff-display); font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.9rem; max-width: 28ch; }
.publisher-body p { color: var(--bright); margin: 0 0 0.8rem; line-height: 1.6; }
.publisher-body strong { color: #fff; }
.publisher-actions { margin-top: 1.2rem; }

/* ---- footer ------------------------------------------------------------------------- */
.footer { background: var(--midnight); color: var(--dim); font-size: 0.95rem; }
.footer a { color: #fff; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); padding-block: 2.8rem 1.4rem; }
.footer-brand { font-family: var(--ff-display); font-weight: 800; font-size: 1.3rem; margin: 0 0 0.4rem; color: #fff; letter-spacing: -0.02em; }
.footer-heading { font-family: var(--ff-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.5rem; }
.footer-legal { border-top: 1px solid #22364c; padding-block: 1.1rem; color: var(--dim); font-size: 0.86rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-legal p { margin: 0; }
.footer-legal .mark { color: var(--dim); }

/* ---- tool pages --------------------------------------------------------------------- */
.tool .lede { margin-bottom: 1.4rem; }
.tool-form { display: grid; gap: 1.1rem; margin: 0 0 1.8rem; }
.field { border: 1px solid var(--cloud); border-left: 3px solid var(--navy); padding: 1.1rem 1.2rem; margin: 0; background: var(--paper); }
.field label, .field legend { font-family: var(--ff-display); font-weight: 700; font-size: 0.95rem; display: block; margin-bottom: 0.4rem; color: var(--navy); }
.field legend { padding: 0; margin-bottom: 0.6rem; }
.field input[type="date"], .field input[type="number"], .field input[type="text"] { font: inherit; padding: 0.6rem 0.8rem; border: 2px solid var(--navy); min-width: 14rem; max-width: 100%; }
.field select { font: inherit; padding: 0.6rem 0.8rem; border: 2px solid var(--navy); min-width: 16rem; max-width: 100%; background: var(--paper); }
.field .help { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.92rem; }
.optional { font-weight: 400; color: var(--muted); }
.choice { display: block; font-family: var(--ff-body); font-weight: 400; padding: 0.3rem 0; color: var(--ink); }
.choice input { margin-right: 0.55rem; }

.results { margin: 0 0 2.2rem; }
.result-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.result-card { border: 0; border-left: 3px solid var(--navy); padding: 1.2rem 1.4rem; background: var(--cloud); }
.result-key { background: var(--navy); color: #fff; border-left-color: var(--gold); }
.result-key .result-note { color: var(--bright); }
.result-label { margin: 0 0 0.35rem; font-family: var(--ff-display); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--gold-ink); }
.result-key .result-label { color: var(--gold); }
.result-date { margin: 0; font-family: var(--ff-display); font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.result-note { margin: 0.55rem 0 0; font-size: 0.95rem; color: #333; }
.result-head { margin: 0; font-family: var(--ff-display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.result-yes { background: #e9f3ec; border-left-color: #2f7d4a; }
.result-no { background: #fbeceb; border-left-color: #a33; }

.warn { background: #fffdf7; border: 1px solid var(--gold); border-left-width: 3px; padding: 0.85rem 1.1rem; margin: 1.2rem 0; }

.timeline { border-collapse: collapse; width: 100%; margin: 0.6rem 0 1.2rem; font-size: 0.97rem; }
.timeline th, .timeline td { border: 1px solid var(--cloud); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.timeline th { background: var(--navy); color: #fff; font-family: var(--ff-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.rc-card { border: 1px solid var(--cloud); border-top: 3px solid var(--navy); padding: 1.1rem 1.3rem; margin: 1rem 0; }
.rc-card h3 { margin: 0 0 0.35rem; }
.rc-card p { margin: 0.25rem 0; }
.rc-list { list-style: none; padding: 0; margin: 1.1rem 0; }
.rc-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--cloud); }
.rc-sdp { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule); }
.rc-sdp h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.rc-sub { margin: 0.9rem 0 0.25rem; font-family: var(--ff-display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-ink); font-weight: 700; }
.rc-kind { display: inline-block; font-family: var(--ff-display); font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.08em; background: var(--cloud); padding: 0.15rem 0.5rem; margin-right: 0.35rem; color: var(--navy); font-weight: 700; }
.rc-note { background: #fffdf7; border-left: 3px solid var(--gold); padding: 0.55rem 0.9rem; margin: 0.7rem 0; }
.rc-more { margin: 0.6rem 0; }
.rc-more summary { cursor: pointer; font-weight: 600; color: var(--navy); }

/* ---- launch / coming-soon page ------------------------------------------------------ */

.launch { max-width: 56rem; margin: 0 auto; padding: 3.5rem 0 2rem; text-align: center; }
.launch-eyebrow { display: inline-block; background: var(--navy); color: #fff; font-family: var(--ff-display); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; padding: 0.5rem 1.1rem; margin: 0 0 1.4rem; }
.launch-title { font-size: clamp(2.1rem, 5vw, 3.3rem); margin: 0 auto 1rem; max-width: 20ch; }
.launch-lede { font-size: 1.2rem; color: #333; max-width: 42rem; margin: 0 auto 2.2rem; }
.countdown { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 auto 2.6rem; }
.count-tile { min-width: 5.6rem; padding: 1rem 0.7rem 0.8rem; background: var(--navy); color: #fff; border-bottom: 3px solid var(--gold); }
.count-num { display: block; font-family: var(--ff-display); font-weight: 800; font-size: 2.4rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.count-label { display: block; margin-top: 0.4rem; font-family: var(--ff-display); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.launch-live { margin: 0 0 2.6rem; }
.launch-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); text-align: left; margin: 0 0 2.2rem; }
.launch-card { border: 0; border-top: 3px solid var(--gold); padding: 1.1rem 0 0; background: transparent; }
.launch-card h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--navy); border: 0; padding: 0; }
.launch-card p { margin: 0; color: #333; font-size: 0.98rem; }
.launch-contact { font-size: 1.05rem; margin: 0 0 0.6rem; }

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .hero { padding-top: 2.4rem; }
  .count-tile { min-width: 4.4rem; }
  .count-num { font-size: 1.8rem; }
  .launch { padding-top: 2.2rem; }
  .publisher-row { gap: 1.6rem; }
}

/* ---- on this page: jump buttons, built by the page-index transform -------------------
   A row of section links below the page summary. Because the masthead is sticky, every
   heading also needs scroll-margin-top or a jump lands with the heading hidden underneath
   it — which reads as the link being broken. */

/* A tab row rather than a box of chips: the sections read as a route through the page,
   which only works when there are few enough of them to scan. Pages are grouped into
   subject parts so this stays a handful of tabs and never becomes a wall of labels. */
/* A navy panel of equal-width boxes, four across, wrapping to as many rows as the page
   needs. A grid rather than a wrapping flex row on purpose: every box is the same width
   whatever its label says, and a short final row leaves an empty cell instead of stretching
   the survivors. Boxes in the same row match heights, so a two-line heading does not create
   a ragged edge. */
.page-index { margin: 1.4rem 0 2.2rem; padding: 1rem 1.1rem 1.1rem; background: var(--navy); }
.page-index-label {
  margin: 0 0 0.7rem; font-family: var(--ff-display); font-size: 0.62rem;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.page-index ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
}
.page-index li { margin: 0; display: flex; }
.page-index a {
  flex: 1; display: flex; align-items: center; color: #fff; text-decoration: none;
  font-family: var(--ff-body); font-weight: 400; font-size: 0.86rem; line-height: 1.3;
  padding: 0.6rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.5);
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.page-index a:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* Keyboard focus has to stay visible against navy, where the usual gold outline is weak. */
.page-index a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 62rem) { .page-index ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 46rem) { .page-index ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .page-index ul { grid-template-columns: 1fr; } }

/* Subject parts get a clear break; the sections inside them stay quiet by comparison. */
.prose h3 { margin-top: 1.9rem; }

/* the sticky masthead is ~64px; leave the heading clear of it after a jump */
.prose h2, .page h2, .page h3 { scroll-margin-top: 5.5rem; }

/* ---- the rate comparison tool -------------------------------------------------------- */
.page-wide { max-width: 58rem; }
.tool-panel { margin: 1.6rem 0 2.2rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; padding: 0.9rem 1rem; background: var(--cloud); border-left: 3px solid var(--gold); }
.filters label { font-family: var(--ff-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.filters select { font: inherit; font-size: 0.95rem; padding: 0.4rem 0.6rem; border: 2px solid var(--navy); background: var(--paper); max-width: 100%; }
.filter-count { margin-left: auto; font-size: 0.9rem; color: var(--muted); }

table.rates { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
table.rates th, table.rates td { border-bottom: 1px solid var(--cloud); padding: 0.7rem 0.8rem; text-align: left; vertical-align: top; }
table.rates th { background: var(--navy); color: #fff; font-family: var(--ff-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 0; }
table.rates td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
table.rates tr.is-publisher td { background: var(--cloud); }
table.rates tr.is-publisher td:first-child { border-left: 3px solid var(--gold); }
.rates .flag { display: block; font-size: 0.78rem; font-weight: 400; color: var(--gold-ink); white-space: normal; }
.rates .muted { font-weight: 400; }

/* A wide table is allowed to scroll inside its own box rather than push the page sideways. */
.tw { overflow-x: auto; }

/* ---- the provider directory ----------------------------------------------------------
   Cards rather than one very wide table: a provider carries several phone numbers, several
   email addresses and a nine-language list, none of which sit in a fixed column without
   either truncating or wrecking the row height. Cards also collapse to one column on a
   phone without a horizontal scrollbar. */

.provider-grid { display: grid; gap: 1px; background: var(--cloud); border: 1px solid var(--cloud); margin-top: 1px; }
@media (min-width: 46rem) { .provider-grid { grid-template-columns: 1fr 1fr; } }

.provider { background: var(--paper); padding: 1.1rem 1.2rem 1.2rem; }
.provider[hidden] { display: none; }
.provider.is-publisher { border-left: 3px solid var(--gold); background: #fcfbf7; }

.provider-name { font-family: var(--ff-display); font-size: 1.05rem; margin: 0 0 0.5rem; line-height: 1.3; }
.provider-name a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tag-publisher {
  display: inline-block; font-family: var(--ff-body); font-size: 0.72rem; font-weight: 400;
  color: var(--gold-ink); letter-spacing: 0; text-transform: none; white-space: nowrap;
}

.provider-models { margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }

.provider-facts { margin: 0; font-size: 0.9rem; }
.provider-facts dt {
  font-family: var(--ff-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); margin-top: 0.7rem;
}
.provider-facts dt:first-child { margin-top: 0; }
.provider-facts dd { margin: 0.15rem 0 0; line-height: 1.5; }
.provider-facts .rate { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); }
.provider-facts .asof { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.provider-facts .flag { display: block; font-size: 0.78rem; color: var(--gold-ink); margin-top: 0.25rem; }
.provider-facts .na { color: var(--muted); }
/* Anything a provider told us about itself. Visually separated from the DDS-sourced value
   above it on purpose: the reader must be able to see at a glance which of the two they are
   reading, because only one of them was checked by anybody. */
.provider-facts .reported {
  display: block; margin-top: 0.3rem; padding-left: 0.6rem;
  border-left: 2px solid var(--gold); font-size: 0.82rem; color: #444;
}
.provider-facts .line { display: block; word-break: break-word; }
.provider-facts .rc-count { font-variant-numeric: tabular-nums; }

/* The five lines no provider publishes. Deliberately styled as a quiet, uniform block:
   every card shows the same five gaps, so the emptiness reads as a fact about the industry
   rather than as a mark against whichever provider you happen to be looking at. */
.unpublished { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--cloud); }
.unpublished-head {
  font-family: var(--ff-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.45rem;
}
.unpublished ul { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.unpublished li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.22rem 0; }
.unpublished .k { color: #333; }
.unpublished .v { color: var(--muted); font-style: italic; text-align: right; }
/* A supplied answer is set solid and dark; an unanswered line stays italic grey. The
   difference should be visible at a glance, because one of them is a claim and the other is
   an absence, and they are not the same kind of thing. */
.unpublished .v-said { color: var(--ink); font-style: normal; }
.name-flag { font-size: 0.75rem; color: var(--gold-ink); margin: -0.3rem 0 0.7rem; line-height: 1.4; }
.ask-list { margin: 0.9rem 0 1.1rem; padding-left: 1.4rem; }
.ask-list li { margin-bottom: 0.3rem; }
.unpublished-foot { font-size: 0.82rem; margin: 0.6rem 0 0; }

.no-results { background: var(--cloud); padding: 0.9rem 1.1rem; margin: 0; font-size: 0.93rem; }
.no-results[hidden] { display: none; }

.cta-line { margin: 1.3rem 0 1.5rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* ---- "send us your details" blocks -----------------------------------------------------
   These address FMS providers, not families, inside pages written for families. The left
   gold rule and the tinted panel are there to make that switch of audience obvious at a
   glance so a family can skip them. */
.fms-invite {
  margin: 1.6rem 0 1.8rem;
  padding: 1rem 1.2rem 1.1rem;
  background: var(--cloud);
  border-left: 4px solid var(--gold);
}
.fms-invite-head {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 0.45rem;
}
.fms-invite p { font-size: 0.92rem; margin: 0 0 0.6rem; }
.fms-invite p:last-child { margin-bottom: 0; }
.fms-invite-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}
.fms-invite-cta a:not(.button) { font-size: 0.86rem; }

/* ---- "tell us when we have this wrong" ------------------------------------------------
   Same treatment as .fms-invite, but this one addresses readers rather than providers, so
   it sits at the top of the page instead of inside a section. */
.suggest {
  margin: 1.4rem 0 2rem;
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--cloud);
  border-left: 4px solid var(--gold);
}
.suggest-head {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.suggest p { font-size: 0.94rem; margin: 0 0 0.65rem; }
.suggest p:last-child { margin-bottom: 0; }
.suggest-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}
.suggest-note { font-size: 0.84rem; color: var(--ink-soft, #4a5560); max-width: 30rem; }

/* Added by script beside every prominent mailto button, for the visitor whose browser
   does not hand mailto: to anything. */
.copy-mail {
  font-family: var(--ff-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--navy);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  line-height: 1.2;
}
.copy-mail:hover,
.copy-mail:focus-visible { background: var(--navy); color: #fff; }
.copy-mail.is-done { background: var(--navy); color: #fff; }

/* ---- the burden calculator ------------------------------------------------------------
   The chart bars are drawn from zero on purpose. Every provider's wage block is identical
   and only the gold burden sliver differs, which is precisely the point the page is making;
   rescaling the axis to dramatise a six per cent spread would be the easiest lie here. */

.filters input[type="number"] {
  font: inherit; font-size: 0.95rem; padding: 0.4rem 0.5rem;
  border: 2px solid var(--navy); background: var(--paper); width: 6rem; max-width: 100%;
}

/* Provider picker. Sentinel Four's box is disabled-and-checked rather than absent, so the
   reader can see it is pinned deliberately and read why, instead of wondering why one row
   will not turn off. */
.picker { border: 1px solid var(--cloud); border-left: 3px solid var(--navy); padding: 0.9rem 1.1rem 1rem; margin: 0 0 1px; }
.picker legend { font-family: var(--ff-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); padding: 0 0.4rem; }
.picker-hint { font-size: 0.88rem; line-height: 1.55; margin: 0 0 0.8rem; color: #333; }
.picker-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.8rem; }
.picker-actions .button { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
.picker-count { margin-left: auto; font-size: 0.88rem; color: var(--muted); }

.picker-grid { display: grid; gap: 0.1rem 1rem; }
@media (min-width: 40rem) { .picker-grid { grid-template-columns: 1fr 1fr; } }
.picker-item { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.88rem; padding: 0.22rem 0; cursor: pointer; }
.picker-item input { margin: 0; flex: none; }
.picker-name { overflow-wrap: anywhere; }
.picker-item.is-publisher { cursor: default; }
.picker-item.is-publisher .picker-name { font-weight: 700; }
.picker-tag { font-size: 0.72rem; color: var(--gold-ink); white-space: nowrap; }

/* Head to head against the publisher. Cheaper-than-us and dearer-than-us are styled the
   same weight on purpose: colouring our losses grey and our wins gold would be a thumb on
   the scale, which is the one thing this page cannot afford. */
.calc-compare:not(:empty) { padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--cloud); border-top: 0; }
.cmp-head { font-family: var(--ff-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.cmp-list { list-style: none; margin: 0; padding: 0; font-size: 0.89rem; }
.cmp-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--cloud); }
.cmp-list li:last-child { border-bottom: 0; }
.cmp-n { overflow-wrap: anywhere; }
.cmp-r { color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-v { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-foot { font-size: 0.88rem; line-height: 1.55; margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 2px solid var(--navy); }
@media (max-width: 34rem) {
  .cmp-list li { flex-direction: column; gap: 0.1rem; }
  .cmp-v { text-align: left; }
}

.calc-out { padding: 1.1rem 1.2rem; background: var(--cloud); border-left: 3px solid var(--gold); }
.calc-headline { margin: 0 0 0.9rem; font-size: 1.08rem; line-height: 1.45; }

.calc-facts { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.calc-facts li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.38rem 0; border-bottom: 1px solid rgba(27, 58, 95, 0.12);
}
.calc-facts .ck { color: #333; }
.calc-facts .cv { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; color: var(--navy); }
.calc-facts .calc-gap { border-bottom: 0; border-top: 2px solid var(--navy); margin-top: 0.3rem; padding-top: 0.5rem; }
.calc-facts .calc-gap .cv { color: var(--gold-ink); }

.calc-anchor { margin: 0.9rem 0 0; font-size: 0.95rem; line-height: 1.55; }
.calc-note {
  margin: 0; padding: 0.85rem 1.2rem; font-size: 0.92rem; line-height: 1.55;
  background: #fffdf7; border: 1px solid var(--gold); border-top: 0;
}

.calc-chart { margin: 1.4rem 0 0.7rem; }
.bar-row { display: grid; grid-template-columns: 11rem 1fr 7.5rem; gap: 0.7rem; align-items: center; padding: 0.2rem 0; }
.bar-name { font-size: 0.85rem; line-height: 1.25; overflow-wrap: anywhere; }
.bar-us { display: block; font-size: 0.7rem; color: var(--gold-ink); }
.bar-track { display: flex; height: 1.15rem; background: var(--cloud); }
.bar-wage { background: var(--navy); }
.bar-burden { background: var(--gold); }
.bar-val { font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bar-rate { display: block; font-size: 0.74rem; color: var(--muted); }
.bar-row.is-publisher .bar-name { font-weight: 700; }
.bar-row.is-publisher .bar-track { outline: 2px solid var(--gold-ink); outline-offset: 1px; }

.calc-cap { font-size: 0.85rem; color: #444; line-height: 1.5; margin: 0.6rem 0 1.1rem; border-left: 3px solid var(--gold); padding-left: 0.9rem; }

@media (max-width: 34rem) {
  .bar-row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.4rem 0; }
  .bar-val { text-align: left; }
  .bar-rate { display: inline; margin-left: 0.4rem; }
  .calc-facts li { flex-direction: column; gap: 0.1rem; }
  .calc-facts .cv { text-align: left; }
}

/* ---- diagrams -----------------------------------------------------------------------
   Inline SVG, drawn in the brand palette and sized by viewBox so it stays crisp at any
   width. Text inside an SVG does not reflow, so below ~30rem the drawing is allowed to
   scroll sideways in its own container rather than shrink into illegibility - the one
   place on this site where horizontal scroll is correct. */

.diagram { margin: 2rem 0; padding: 0; }
.diagram-svg { display: block; width: 100%; height: auto; }
@media (max-width: 30rem) {
  .diagram { overflow-x: auto; }
  .diagram-svg { min-width: 30rem; }
}
.diagram figcaption { margin-top: 0.9rem; font-size: 0.93rem; line-height: 1.55; color: #333; border-left: 3px solid var(--gold); padding-left: 0.9rem; }
.diagram figcaption .muted { display: block; margin-top: 0.4rem; font-size: 0.88rem; }

/* diagram primitives — every color comes from the brand tokens, never a literal */
.d-fill-navy { fill: var(--navy); }
.d-fill-gold { fill: var(--gold); }
.d-fill-cloud { fill: var(--cloud); }
.d-fill-white { fill: var(--paper); }
.d-edge-navy { stroke: var(--navy); stroke-width: 1.5; }
.d-edge-gold { stroke: var(--gold); stroke-width: 1.5; }
.d-line { stroke: var(--navy); stroke-width: 1.5; fill: none; }
.d-arrow { fill: var(--navy); }
.d-hair { stroke: var(--cloud); stroke-width: 1.5; }

.diagram text { font-family: var(--ff-body); fill: var(--ink); text-anchor: middle; }

/* A CSS declaration beats an SVG presentation attribute, so the rule above was overriding
   every text-anchor="start" in the markup: labels meant to sit at the left margin were
   being centred on x=8 and half of each ran off the left edge of the viewBox. These
   attribute selectors are (0,2,1) and hand the alignment back to the markup. */
.diagram text[text-anchor="start"] { text-anchor: start; }
.diagram text[text-anchor="end"] { text-anchor: end; }

/* Every one of these carries the .diagram prefix on purpose. `.diagram text` above is
   specificity (0,1,1); a bare `.d-on-navy` is only (0,1,0), so the generic rule won and
   painted every label near-black — including the white-on-navy ones, which then vanished
   into their own box. Prefixed they are (0,2,0) and the intended color applies. */
.diagram .d-lg { font-family: var(--ff-display); font-size: 20px; font-weight: 700; fill: var(--navy); }
.diagram .d-md { font-family: var(--ff-display); font-size: 16px; font-weight: 700; fill: var(--navy); }
.diagram .d-sm { font-size: 13px; }
.diagram .d-muted { fill: var(--muted); }
.diagram .d-gold { fill: var(--gold-ink); font-weight: 600; }
.diagram .d-on-navy { fill: #fff; }
.diagram .d-on-gold { fill: var(--midnight); font-weight: 600; }
.diagram .d-eyebrow { font-family: var(--ff-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--gold-ink); }

/* ---- motion -------------------------------------------------------------------------
   Everything below is decoration. The page is complete and readable without any of it:
   elements start visible and animate FROM a visible resting state, so a failed observer,
   a slow script or reduced-motion leaves a correct page rather than an empty one. */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.shown { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  /* stagger children slightly so a row of cards arrives as a group, not a block */
  .reveal.shown:nth-child(2) { transition-delay: 0.06s; }
  .reveal.shown:nth-child(3) { transition-delay: 0.12s; }
  .reveal.shown:nth-child(4) { transition-delay: 0.18s; }

  .hero h1, .hero .lede, .hero-actions, .hero-common { animation: rise 0.6s var(--ease) both; }
  .hero .lede { animation-delay: 0.08s; }
  .hero-actions { animation-delay: 0.16s; }
  .hero-common { animation-delay: 0.24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* With reduced motion requested, or before the script runs, everything is simply visible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.shown { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* keyboard focus must stay visible everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}