/* ═══════════════════════════════════════════════════════════════════════
   KAAGAZ — design system
   Soft light skeuomorphism: warm paper, rounded surfaces with real depth,
   and a cast of friendly bubble characters.

   Rules this file obeys without exception:
     • Spacing is an 8px scale: 8 16 24 32 48 64. No other value appears
       in any margin, padding or gap.
     • Five corner radii. Nothing else.
     • Depth is warm, never neutral black — inset shadows are a warm brown
       at low alpha, which is what makes paper read as paper rather than as
       plastic. Every raised surface gets one highlight along its top edge.
     • Body text measures 65-75 characters, line-height on the scale.
     • Text contrast meets WCAG AA at minimum; most of it clears AAA.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Paper & ink -------------------------------------------------- */
  --paper:        #FCF7ED;   /* page ground — warm cream, lifted */
  --paper-deep:   #F3EADA;   /* recessed panels, section bands */
  --card:         #FFFCF5;   /* raised sheet */
  --card-hi:      #FFFFFF;   /* highlight face */
  --rule:         #E7DAC2;   /* hairlines, card edges */
  --rule-soft:    #F1E9D8;   /* the softest divider */

  --ink:          #23262B;   /* body — 14.2:1 on paper */
  --ink-2:        #555C66;   /* secondary — 6.3:1  */
  /* Tertiary. Chosen by measurement, not by eye: #6E747D measured 4.41:1 on
     --paper and failed AA, so this is darkened to clear 4.5:1 on both the page
     ground and a raised card (measured 5.1:1 / 5.4:1). */
  --ink-3:        #636A73;   /* tertiary / meta — 5.1:1  */

  /* Accents — same measured hues, softened companion tints so the rounded
     surfaces read as one warm family rather than blue-on-cream. --------- */
  --indigo:       #1E3A5F;   /* primary — 9.6:1 on paper */
  --indigo-deep:  #162C49;
  --indigo-tint:  #EBF0F6;
  --vermillion:   #A6382A;   /* accent / attention — 6.3:1 */
  --vermillion-tint: #F9EDE9;
  --forest:       #2E5D43;   /* complete / success — 7.2:1 */
  --forest-tint:  #E9F1EB;
  --gold:         #8A6A1F;   /* caution / money — 4.9:1 */
  --gold-tint:    #F7F0DD;

  /* Spacing scale — the only spacing values permitted ---------------- */
  --s1:  8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;

  /* Radii — five values, bubbly but still a closed set --------------- */
  --r-sm:  10px;    /* chips, badges, small marks */
  --r-md:  16px;    /* inputs, buttons, inline panels */
  --r-lg:  24px;    /* cards, notices */
  --r-xl:  32px;    /* feature panels, board */
  --r-pill: 999px;  /* pills, avatars */

  /* Depth — warm, never neutral black -------------------------------
     Three layers per raised surface: a tight contact shadow where the
     surface meets the page, a wide ambient shadow for the object, and an
     inner top highlight that reads as light catching a rounded edge. Warm
     brown rather than black is what stops this looking like grey plastic. */
  --sheen:      rgba(255, 255, 255, 0.94);
  --sheen-soft: rgba(255, 255, 255, 0.60);
  --well:       rgba(122, 96, 58, 0.10);   /* pressed / recessed */
  --well-deep:  rgba(122, 96, 58, 0.17);
  --shade:      rgba(122, 96, 58, 0.16);   /* drop shadow tint */
  --shade-soft: rgba(122, 96, 58, 0.09);

  --lift-1: 0 1px 2px var(--shade-soft),
            0 2px 6px var(--shade-soft),
            inset 0 1px 0 var(--sheen);
  --lift-2: 0 2px 4px var(--shade-soft),
            0 8px 20px var(--shade),
            inset 0 1px 0 var(--sheen);
  --lift-3: 0 4px 10px var(--shade-soft),
            0 18px 40px var(--shade),
            inset 0 1px 0 var(--sheen);
  --press:  inset 0 2px 6px var(--well-deep),
            inset 0 -1px 0 var(--sheen-soft);

  /* Surface faces — the actual skeuomorphic gradient ------------------ */
  --face-card:   linear-gradient(180deg, #FFFDF8 0%, #FCF6E9 100%);
  --face-raise:  linear-gradient(180deg, #FFFFFF 0%, #FDF8EE 100%);
  --face-sunk:   linear-gradient(180deg, #F1E8D7 0%, #F8F2E4 100%);
  --face-indigo: linear-gradient(180deg, #2A4C7C 0%, #1B3455 100%);
  --face-forest: linear-gradient(180deg, #3A7154 0%, #2A543D 100%);


  /* Type ----------------------------------------------------------- */
  --serif: 'Fraunces', 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Work Sans', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Measure — 65-75 characters for body prose ---------------------- */
  --measure: 68ch;
  --measure-wide: 96ch;

  /* Layout --------------------------------------------------------- */
  --shell: 1120px;
  --shell-narrow: 760px;
  --gutter: var(--s3);

  --focus: 2px solid var(--vermillion);
  --focus-offset: 2px;
}

/* ─────────────────────────────────────────────
   2. RESET
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background-color: var(--paper);
  /* Paper grain: a fine irregular speckle, not a pattern. Two offset dot
     grids at different scales keep it from reading as a grid. */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(35, 38, 43, 0.030) 0.5px, transparent 0),
    radial-gradient(circle at 2px 3px, rgba(35, 38, 43, 0.018) 0.5px, transparent 0);
  background-size: 24px 24px, 17px 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--indigo);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s2);
  top: -100px;
  z-index: 200;
  background: var(--card);
  color: var(--indigo);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--indigo);
  border-radius: var(--r-md);
  font-weight: 500;
  transition: top 0.15s;
}
.skip-link:focus { top: var(--s1); }

/* ─────────────────────────────────────────────
   3. SHELL
   ───────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }
.shell--wide { max-width: 1360px; }

.site-main { flex: 1 0 auto; padding-block: var(--s5) var(--s6); }

@media (max-width: 600px) {
  .site-main { padding-block: var(--s3) var(--s5); }
  :root { --gutter: var(--s2); }
}

/* ─────────────────────────────────────────────
   4. PAPER COLLAGE LAYER

   Decorative only, and only ever placed next to content it relates to.
   Nothing here is load-bearing and nothing repeats as filler.
   ───────────────────────────────────────────── */

/* Torn deckle edge: a jagged silhouette in the page colour biting up into
   the indigo band above it. Two of these — one under the header, one above
   the footer. */
.torn {
  /* As tall as the silhouette it reveals. An 8px band clipped a 24px path and
     flattened the tear to a straight line. */
  height: var(--s3);
  background: var(--indigo);
  position: relative;
  overflow: hidden;
}
.torn::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--s3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cpath d='M0 24L0 15L0 12.8L7 14.9Q11 8.6 15 16.1L15 4.9L20 16.9Q25 4.4 30 13.5L30 9.1L40 14L40 11.7L46 14.9L46 12.1L54 13.2Q58.5 9.4 63 15.8Q67 5.7 71 14Q73.5 10.3 76 14.1L76 9.5L82 14.2Q86 11 90 13.6L90 9.5L100 13.4L100 9.9L105 17Q107.5 7.3 110 14.8Q114 9.5 118 13.3Q123 7.5 128 16.7Q131.5 10.7 135 14.9L135 4.1L141 13.4Q143.5 6.3 146 15.3Q150 9.6 154 15L160 15L160 24Z' fill='%23FBF7EE'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 24px;
}
/* The mirror image, for the boundary above the footer: the paper ends in a
   jagged BOTTOM edge and the footer's indigo shows through the gaps.

   It only works if the silhouette actually overlaps the indigo. A transparent
   parent sitting in its own gap reveals nothing, so the element is pulled up
   over the top of the footer and lifted above it in the paint order. */
.torn--up {
  height: var(--s3);
  margin-bottom: calc(-1 * var(--s3));
  background: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.torn--up::after { top: 0; bottom: auto; transform: scaleY(-1); }

/* ─────────────────────────────────────────────
   5. NAVBAR — a floating liquid-glass pane
   ───────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--indigo-deep);
  color: #FFFFFF;
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 72px;
  padding-block: var(--s2);
}
.topbar .wordmark { margin-right: auto; }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 34px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  opacity: 0.94;
  white-space: nowrap;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.topbar__link:hover,
.topbar__link:focus-visible {
  opacity: 1;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.18);
}

.topbar__end { flex: none; }
.topbar__cta { white-space: nowrap; }
.topbar__cta svg { flex: none; }

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #FFFFFF;
}
.wordmark svg.logo { flex: none; }
.wordmark__text {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.015em;
}
.wordmark:hover { text-decoration: none; }
.wordmark:hover .wordmark__text { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .topbar__cta span { display: none; }
  .topbar__cta { min-width: 40px; padding-inline: var(--s1); }
}
@media (max-width: 700px) {
  .topbar__inner { flex-wrap: wrap; row-gap: var(--s1); min-height: 0; }
  .topbar__nav { flex: 1 1 100%; order: 3; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__link { font-size: 13px; padding: 0 var(--s1); }
  .wordmark__text { font-size: 21px; line-height: 24px; }
}

/* ─────────────────────────────────────────────
   6. FOOTER
   ───────────────────────────────────────────── */
.colophon {
  background: var(--indigo-deep);
  color: #E9EFF7;
  padding-block: var(--s5) var(--s3);
}
.colophon__inner { display: grid; gap: var(--s4); }

.colophon__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: var(--s5);
  align-items: start;
}

.colophon__brand { display: grid; gap: var(--s2); justify-items: start; }
.wordmark--footer { color: #FFFFFF; }
.colophon__pitch {
  font: 400 15px/25px var(--sans);
  color: #C3CEDD;
  max-width: 42ch;
}
.colophon__deco {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s1);
  padding: var(--s2) var(--s3) var(--s2) var(--s2);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}
.colophon__deco .deco { flex: none; color: #F0A99E; }
.colophon__wave {
  font: 400 14px/22px var(--sans);
  color: #C3CEDD;
  max-width: 30ch;
}

.colophon__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.colophon__col { display: grid; gap: var(--s1); align-content: start; }
.colophon__heading {
  font: 600 12px/16px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8FA6C4;
  margin: 0 0 var(--s1);
}
.colophon__col a {
  /* Footer links are navigation, not prose, so WCAG 2.5.8's inline exception
     does not apply — each gets a real 32px pointer target. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #E9EFF7;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.colophon__col a:hover,
.colophon__col a:focus-visible { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

.colophon__legal {
  padding: var(--s3);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
.colophon__note {
  font: 400 14px/24px var(--sans);
  color: #C3CEDD;
  max-width: 100ch;
}
.colophon__note strong { color: #FFFFFF; font-weight: 600; }

.colophon__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  padding-top: var(--s2);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font: 500 13px/20px var(--mono);
  color: #8FA6C4;
}
.colophon__base strong { color: #E9EFF7; font-weight: 600; }
.colophon__grow { flex: 1 1 auto; }
.colophon__sep { opacity: 0.55; }

@media (max-width: 900px) {
  .colophon__top { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 600px) {
  .colophon__cols { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .colophon__grow { display: none; }
}

   7. TYPOGRAPHY PRIMITIVES
   ───────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermillion);
}

.display {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.02em;
  color: var(--indigo);
}
.h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.015em; }
.h2 { font-size: 24px; line-height: 32px; }
.h3 { font-size: 20px; line-height: 32px; }

.lede {
  font-size: 18px;
  line-height: 32px;
  color: var(--ink-2);
  max-width: var(--measure);
}
.body { font-size: 16px; line-height: 24px; max-width: var(--measure); }
.meta {
  font-size: 14px;
  line-height: 24px;
  color: var(--ink-2);
}
.meta-sm {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .display { font-size: 40px; line-height: 48px; }
}
@media (max-width: 600px) {
  .display { font-size: 32px; line-height: 40px; }
  .h1 { font-size: 24px; line-height: 32px; }
  .h2 { font-size: 20px; line-height: 32px; }
  .lede { font-size: 16px; line-height: 24px; }
}

/* ─────────────────────────────────────────────
   8. Visibility
   ───────────────────────────────────────────── */
/* The `hidden` attribute must win over component display rules. Without this,
   any element carrying a class that sets `display:flex` (e.g. .notice) stays
   visible when hidden — which is exactly what the per-document answer panel
   was doing. */
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────
   9. BUTTONS
   Every button is custom: no UA default survives.
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 40px;
  padding: var(--s1) var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:disabled { cursor: not-allowed; opacity: 0.4; }

.btn--primary { background: var(--indigo); color: #FFFFFF; border-color: var(--indigo); }
.btn--primary:hover:not(:disabled) { background: var(--indigo-deep); border-color: var(--indigo-deep); }

.btn--accent { background: var(--vermillion); color: #FFFFFF; border-color: var(--vermillion); }
.btn--accent:hover:not(:disabled) { background: #8C2F23; border-color: #8C2F23; }

.btn--quiet { background: var(--card); color: var(--indigo); border-color: var(--rule); }
.btn--quiet:hover:not(:disabled) { border-color: var(--indigo); background: var(--indigo-tint); }

.btn--ghost { background: transparent; color: var(--indigo); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--indigo-tint); }

.btn--lg { min-height: 48px; padding: var(--s2) var(--s4); font-size: 16px; line-height: 24px; }
.btn--sm { min-height: 32px; padding: 0 var(--s2); font-size: 12px; line-height: 16px; }
.btn--block { width: 100%; }

/* Underlined text button, used for in-card actions */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 24px;
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--vermillion); }

.link-btn--quiet { color: var(--ink-2); text-decoration: none; }
.link-btn--quiet:hover { color: var(--indigo); text-decoration: underline; }

/* ─────────────────────────────────────────────
   9. FORM CONTROLS

   Native inputs are reset and rebuilt. `appearance: none` everywhere, an
   explicit chevron on the select, and a hand-drawn checkbox.
   ───────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s1); }

.field__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field__hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}

.input, .select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 48px;
  padding: var(--s1) var(--s2);
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--ink-3); }
.input:hover, .select:hover { border-color: var(--ink-3); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-tint);
}
.input:focus-visible, .select:focus-visible { outline: none; }

/* Custom chevron for the select — the only place a select appears. */
.select {
  padding-right: var(--s5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231E3A5F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s2) center;
  cursor: pointer;
}

/* Wraps a select so the chevron never overlaps text at 375px */
.select-wrap { position: relative; display: block; }

/* Hand-drawn checkbox */
.check {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.check::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform 0.12s ease-out;
  background: #FFFFFF;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0, 38% 68%);
}
.check:checked { background: var(--forest); border-color: var(--forest); }
.check:checked::before { transform: scale(1); }
.check:hover { border-color: var(--indigo); }
.check:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

/* Suggestion chips under free-text inputs */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--s2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.chip:hover { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-tint); }
.chip[aria-pressed="true"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #FFFFFF;
}

/* Segmented radio group (residency) */
.segmented {
  display: grid;
  /* Five stacked full-width options pushed the submit button most of the way
     down the page. Two columns keeps the teaching blurbs readable while
     halving the height; below 700px it collapses to one. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s1);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.segmented__option { position: relative; display: block; min-width: 0; }
.segmented__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segmented__face {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  height: 100%;
  padding: var(--s2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.segmented__input:hover + .segmented__face { border-color: var(--ink-3); }
.segmented__input:checked + .segmented__face {
  border-color: var(--indigo);
  background: var(--indigo-tint);
  box-shadow: inset 0 0 0 1px var(--indigo);
}
.segmented__input:focus-visible + .segmented__face { outline: var(--focus); outline-offset: var(--focus-offset); }
.segmented__title { font-size: 14px; font-weight: 600; line-height: 24px; color: var(--indigo); }
.segmented__blurb { font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* ─────────────────────────────────────────────
   10. SHEET — the raised paper card primitive
   ───────────────────────────────────────────── */
.sheet {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.sheet--pad { padding: var(--s3); }
@media (max-width: 600px) { .sheet--pad { padding: var(--s2); } }

/* ─────────────────────────────────────────────
   11. NOTICE — inline messages
   ───────────────────────────────────────────── */
.notice {
  display: flex;
  gap: var(--s1);
  padding: var(--s2);
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 24px;
}
.notice__icon { flex: none; margin-top: 2px; }
.notice--info    { background: var(--indigo-tint);     border-color: var(--indigo);     color: var(--indigo-deep); }
.notice--warn    { background: var(--gold-tint);       border-color: var(--gold);       color: #5F4A14; }
.notice--error   { background: var(--vermillion-tint); border-color: var(--vermillion); color: #7A2A1F; }
.notice--success { background: var(--forest-tint);     border-color: var(--forest);     color: #1F4230; }
.notice strong { font-weight: 600; }

/* ─────────────────────────────────────────────
   12. SOURCE LIST
   ───────────────────────────────────────────── */
.sources { display: flex; flex-direction: column; gap: var(--s1); }
.sources__item {
  display: flex;
  gap: var(--s1);
  align-items: baseline;
  font-size: 14px;
  line-height: 24px;
}
.sources__index {
  flex: none;
  min-width: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sources__link {
  color: var(--indigo);
  word-break: break-word;
  /* These links sit inside a sentence, so WCAG 2.5.8's inline exception
     applies and they may be smaller than 24px. Vertical padding still
     enlarges the pointer target without disturbing the line box. */
  padding-block: var(--s1);
}
.sources__host { font-size: 12px; color: var(--ink-3); }

/* ─────────────────────────────────────────────
   13. LEGEND — regulatory source key
   ───────────────────────────────────────────── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}
.legend__swatch {
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.legend__swatch--rbi            { color: var(--indigo);     background: var(--indigo-tint); }
.legend__swatch--state_stamp_act { color: var(--gold);       background: var(--gold-tint); }
.legend__swatch--registrar      { color: var(--vermillion); background: var(--vermillion-tint); }
.legend__swatch--bank_internal  { color: var(--ink-3);      background: var(--paper-deep); }

/* ═══════════════════════════════════════════════════════════════════
   14. ASK PAGE
   ═══════════════════════════════════════════════════════════════════ */
.ask-hero {
  display: grid;
  gap: var(--s2);
  max-width: var(--measure-wide);
  margin-bottom: var(--s4);
}
.ask-hero__lede { max-width: var(--measure); }

.ask-card {
  position: relative;
  padding: var(--s3);
  margin-bottom: var(--s3);
}
@media (max-width: 600px) { .ask-card { padding: var(--s2); } }

.ask-card__pin { position: absolute; top: -16px; left: var(--s3); }
@media (max-width: 600px) { .ask-card__pin { left: var(--s2); } }

.ask-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
.ask-grid__full { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .ask-grid { grid-template-columns: 1fr; gap: var(--s2); }
}

.ask-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  margin-top: var(--s3);
}
@media (min-width: 701px) {
  .ask-actions { flex-direction: row; align-items: center; gap: var(--s2); }
  .ask-actions .btn { min-width: 240px; }
}

.ask-footnote {
  display: flex;
  align-items: flex-start;
  gap: var(--s1);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
  max-width: var(--measure);
}
.ask-footnote__icon { flex: none; margin-top: 1px; }

/* How-it-works — a ruled ledger strip */
.ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--s4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ledger__step {
  display: flex;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  border-left: 1px solid var(--rule-soft);
}
.ledger__step:first-child { border-left: 0; }
.ledger__num {
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--indigo);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.ledger__label { font-size: 12px; line-height: 16px; color: var(--ink-2); }

@media (max-width: 700px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger__step { border-left: 0; border-top: 1px solid var(--rule-soft); }
  .ledger__step:first-child { border-top: 0; }
}

/* Section heading with a torn rule beneath it */
.rule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--rule);
}

/* ═══════════════════════════════════════════════════════════════════
   15. FLIP BOARD — the signature component

   Fixed-width digit cells. The board must not shift a single pixel when a
   value goes 9 -> 10 -> 11, or when a word changes length, because it is
   the centrepiece of the demo video.
   ═══════════════════════════════════════════════════════════════════ */
.board {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3);
  margin-bottom: var(--s3);
  background: var(--indigo);
  color: #FFFFFF;
  border-radius: var(--r-lg);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
/* A single hairline grid, kept very faint. An earlier version ruled the whole
   panel every 8px, which read as a moiré/screw texture behind the digit cards
   rather than as a departure board. */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.028) 0 1px,
    transparent 1px 16px
  );
  pointer-events: none;
}

.board__left  { position: relative; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.board__right { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }

.board__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D6DEEA;
}

.board__counter {
  display: flex;
  align-items: flex-end;
  gap: var(--s1);
}

.board__of {
  padding-bottom: var(--s1);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 24px;
  color: #A9B8CE;
}

/* A digit cell. Fixed width, tabular figures, and the split line. */
.flip {
  display: inline-flex;
  gap: 2px;
  perspective: 320px;
}
.flip__cell {
  position: relative;
  display: grid;
  place-items: center;
  /* Width fixed in ch units off the mono face so 1 and 8 occupy
     identical space. This is the entire anti-jitter mechanism. */
  width: 1ch;
  height: 56px;
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 600;
  line-height: 56px;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--r-sm);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
/* The physical split line across the middle of every card */
.flip__cell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.45);
}

.flip__cell[data-empty="true"] { color: transparent; }

.flip__cell.is-flipping { animation: flipLeaf 0.34s ease-in-out; }
@keyframes flipLeaf {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(-88deg); }
  100% { transform: rotateX(0deg); }
}

@media (max-width: 600px) {
  .flip__cell { height: 40px; font-size: 28px; line-height: 40px; }
  /* NOTE: the columns must STRETCH at this width, not start-aligned.
     With align-items:flex-start the board's children size to their content,
     and the nowrap ticker text inside pushes them past the viewport edge.
     min-width:0 on the child is what actually lets the ellipsis engage. */
  .board { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .board__left { flex: 1 1 auto; min-width: 0; }
  .board__right { align-items: flex-start; width: 100%; }
  .found__pill { max-width: 100%; }
}

.board__track {
  width: 160px;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.board__fill {
  height: 100%;
  width: 0;
  background: var(--forest);
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}
@media (max-width: 600px) { .board__track { width: 100%; } }

.board__pct {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.board__caption {
  font-size: 12px;
  line-height: 16px;
  color: #D6DEEA;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Researching state ──────────────────────────────────────────────
   Same board, different face. During a live query the board shows the
   real pipeline stage and the real sources found so far, so the wait is
   informative rather than decorative. */
.board--working .flip__cell { background: rgba(0, 0, 0, 0.18); }
.board--working .board__label { color: #F0C9A0; }
/* Failed: the board stops pretending to be a live research log. */
.board--failed .flip__cell { background: rgba(0, 0, 0, 0.18); }
.board--failed .board__label { color: #E8A79B; }
.board--failed .ticker__pulse { background: #E8A79B; animation: none; }

/* The ticker root. It holds BOTH the scrolling stage line and the row of
   source pills revealed by the search step. Only the line clips; the pills
   wrap onto as many lines as they need. */
.ticker {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}
.ticker__line {
  display: flex;
  align-items: center;
  gap: var(--s1);
  height: 24px;
  overflow: hidden;
  min-width: 0;
}
.ticker__text {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 24px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ticker__text.is-entering { animation: tickerIn 0.32s ease-out; }
@keyframes tickerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ticker__pulse {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F0C9A0;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Source pills revealed as the search step finds them */
.found {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s1);
}
.found__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  max-width: 240px;
  padding: 0 var(--s1);
  height: 24px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 24px;
  color: #E4E9F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: tickerIn 0.3s ease-out;
}
.found__host { opacity: 0.75; }

/* ─────────────────────────────────────────────
   16. STICKY TALLY
   ───────────────────────────────────────────── */
.tally {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  background: var(--indigo);
  color: #FFFFFF;
  border-top: 3px solid var(--vermillion);
  transform: translateY(100%);
  transition: transform 0.28s ease;
}
.tally.is-visible { transform: translateY(0); }
.tally__label {
  font-size: 12px;
  line-height: 16px;
  color: #D6DEEA;
  white-space: nowrap;
}
.tally__track {
  flex: 1;
  height: 8px;
  min-width: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.tally__fill {
  height: 100%;
  width: 0;
  background: var(--forest);
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}
.tally__pct {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 600px) { .tally { padding-inline: var(--s2); gap: var(--s1); } }

/* ═══════════════════════════════════════════════════════════════════
   17. RESULT PAGE
   ═══════════════════════════════════════════════════════════════════ */
.result-head {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s3);
}
.result-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
}
.result-head__title { font-size: 32px; line-height: 40px; letter-spacing: -0.015em; }
@media (max-width: 600px) { .result-head__title { font-size: 24px; line-height: 32px; } }

.result-head__summary {
  max-width: var(--measure);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-2);
}

/* Provenance pill — the "as of" + source honesty */
.provenance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}
.provenance__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0 var(--s1);
  height: 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--indigo);
}
.provenance__badge--live { border-color: var(--forest); color: var(--forest); background: var(--forest-tint); }
.provenance__badge--seed { border-color: var(--gold);   color: var(--gold);   background: var(--gold-tint); }
.provenance__badge--stale { border-color: var(--vermillion); color: var(--vermillion); background: var(--vermillion-tint); }

/* Provenance block with the wax seal pressed onto it. The seal is rotated
   slightly, as a real stamp would be. The rotation is applied to the glyph,
   not the container: rotating the container makes its own scrollWidth exceed
   its clientWidth and the layout audit (correctly) reports the overflow. */
.sealed {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.sealed__provenance { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.sealed__seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  opacity: 0.9;
}
.sealed__seal .deco-wax { transform: rotate(-9deg); }
@media (max-width: 600px) {
  .sealed { flex-direction: column; align-items: stretch; gap: var(--s1); }
  /* The seal drops below the provenance pill at this width. Pushed to the
     end it reads as a stamp pressed into the corner of the certificate;
     left-aligned it reads as a bullet that lost its text. */
  .sealed__seal { align-self: flex-end; }
  /* 64px, not 56px: a 56px glyph rotated 9deg has a ~64px bounding box, and a
     container sized to the un-rotated figure clips it. */
  .sealed__seal { width: 64px; height: 64px; }
  .sealed__seal .deco-wax { width: 56px; height: 56px; }
}

/* Money + fee band */
.bands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s3);
}
@media (max-width: 600px) { .bands { grid-template-columns: 1fr; } }
.band {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.band__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band__value {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 32px;
  color: var(--indigo);
}
.band__note { font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* Stats + the verification stamp that annotates them */
.stats-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.stats-row .bands { flex: 1 1 auto; margin-bottom: 0; }
.stats-row__stamp { flex: none; opacity: 0.75; }
@media (max-width: 700px) {
  .stats-row { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .stats-row__stamp { align-self: flex-end; }
}
@media (max-width: 600px) { .stats-row .bands { margin-bottom: 0; } }

/* ─────────────────────────────────────────────
   18. CHECKLIST ITEMS
   ───────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: var(--s1); }

.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s2);
  transition: border-color 0.2s, opacity 0.2s, background-color 0.2s;
}
.step:hover { border-color: var(--ink-3); border-left-color: var(--rule); }

.step[data-source="rbi"]              { border-left-color: var(--indigo); }
.step[data-source="state_stamp_act"]  { border-left-color: var(--gold); }
.step[data-source="registrar"]        { border-left-color: var(--vermillion); }
.step[data-source="bank_internal"]    { border-left-color: var(--ink-3); }

.step[data-status="done"] { background: var(--forest-tint); border-color: #BFD8C8; }
.step[data-status="in_progress"] { background: var(--gold-tint); border-color: #E3D3A8; }

.step__head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: start;
  gap: var(--s1);
}
@media (max-width: 600px) {
  .step__head { grid-template-columns: 32px 1fr; }
  .step__head-aside { grid-column: 1 / -1; justify-content: flex-start; }
}

.step__num {
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--indigo);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.step[data-status="done"] .step__num { background: var(--forest); }
.step[data-status="in_progress"] .step__num { background: var(--gold); }

.step__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  color: var(--indigo);
}
.step[data-status="done"] .step__title { text-decoration: line-through; text-decoration-color: var(--forest); }

.step__gov {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}
/* A tinted disc carrying a small custom glyph. An earlier version used a
   plain bordered square, which read as an unchecked checkbox sitting next to
   a sentence — confusing on a page that is mostly about ticking things off. */
.step__gov-mark {
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.step__gov-mark[data-src="rbi"]             { color: var(--indigo);     background: var(--indigo-tint); }
.step__gov-mark[data-src="state_stamp_act"] { color: var(--gold);       background: var(--gold-tint); }
.step__gov-mark[data-src="registrar"]       { color: var(--vermillion); background: var(--vermillion-tint); }
.step__gov-mark[data-src="bank_internal"]   { color: var(--ink-3);      background: var(--paper-deep); }

.step__body { padding-block-start: var(--s1); padding-inline-start: 40px; }
@media (max-width: 600px) { .step__body { padding-inline-start: 0; } }

.step__why {
  max-width: var(--measure);
  font-size: 14px;
  line-height: 24px;
  color: var(--ink-2);
}

.step__depends {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s1);
  font-size: 12px;
  line-height: 16px;
  color: var(--gold);
}

.step__facts {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s1) var(--s2);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
  line-height: 24px;
}
.step__facts dt { color: var(--ink-3); font-size: 12px; line-height: 24px; }
.step__facts dd { margin: 0; color: var(--ink); }
@media (max-width: 600px) {
  .step__facts { grid-template-columns: 1fr; gap: 0; }
  .step__facts dt { line-height: 16px; padding-top: var(--s1); }
}

.step__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}
@media (max-width: 600px) { .step__actions { gap: var(--s1); } }

/* ─────────────────────────────────────────────
   19. STATUS BADGE — fixed width, so nothing shifts
   ───────────────────────────────────────────── */
.status {
  display: inline-grid;
  place-content: center;
  /* 112px is 14x8 and exactly fits the longest label ("In progress") at
     12px/0.08em with room to spare. Under this the badge resized between
     states and shoved the step title sideways — measured, not guessed. */
  min-width: 112px;
  height: 24px;
  padding-inline: var(--s1);
  border-radius: var(--r-sm);
  border: 1px solid;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.status[data-state="pending"]     { background: var(--paper-deep); color: var(--ink-2);     border-color: var(--rule); }
.status[data-state="in_progress"] { background: var(--gold-tint);   color: #5F4A14;          border-color: #E3D3A8; }
.status[data-state="done"]        { background: var(--forest-tint); color: #1F4230;          border-color: #BFD8C8; }
.status.is-flipping { animation: flipLeaf 0.3s ease-in-out; }

/* ─────────────────────────────────────────────
   20. SOURCES SECTION
   ───────────────────────────────────────────── */
.sources-block { margin-top: var(--s4); }

/* ─────────────────────────────────────────────
   21. EMPTY / ERROR STATES
   ───────────────────────────────────────────── */
.void {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  padding-block: var(--s5);
  text-align: center;
}
.void__art { margin-bottom: var(--s1); }
.void__text { max-width: 48ch; color: var(--ink-2); }
.void__actions { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: center; }

/* Shown when live search is down: cached cases that overlap the request, so a
   failure is a detour rather than a dead end. */
.fail__suggest-head {
  margin: var(--s3) 0 var(--s1);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
}
.fail__suggest-list {
  list-style: none;
  margin: 0 auto var(--s3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  max-width: 420px;
}
.fail__suggest-list a {
  display: block;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.fail__suggest-list a:hover,
.fail__suggest-list a:focus-visible {
  border-color: var(--indigo);
  background: var(--indigo-tint);
}

/* ═══════════════════════════════════════════════════════════════════
   22. LANDING PAGE — full-width narrative over the same paper system
   ═══════════════════════════════════════════════════════════════════ */
.site-main--flush { padding-block: 0 var(--s6); }
.landing { width: 100%; }
.landing section { scroll-margin-top: calc(var(--s5) + var(--s4)); }
.landing__section { padding-block: var(--s5); }
.landing__section--paper-deep { background: var(--paper-deep); border-block: 1px solid var(--rule-soft); }
.landing__section--ink {
  background: var(--indigo-deep);
  color: #FFFFFF;
}
.landing__section--ink h2,
.landing__section--ink .eyebrow { color: #FFFFFF; }
.landing__section--ink > .shell > .lede,
.landing__section--ink > .shell > .body { color: rgba(255, 255, 255, 0.86); }

.hero { padding-block: var(--s6) var(--s5); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--s5);
}
.hero__copy { display: grid; gap: var(--s2); align-content: start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}
.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0 var(--s2);
  min-height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--card);
}

.preview { padding: var(--s3); }
.preview__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.preview__title { font-family: var(--serif); font-size: 20px; line-height: 32px; color: var(--indigo); }
.preview__rows { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.preview__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  background: #FFFFFF;
  font-size: 14px;
  line-height: 24px;
}
.preview__num {
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--indigo);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
}
.preview__cite {
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 0 var(--s1);
  font-size: 12px;
  line-height: 24px;
  color: var(--ink-2);
  white-space: nowrap;
}
.preview__sources { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.preview__foot { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; justify-content: space-between; }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  margin: 0;
  padding: 0;
}
.trust-grid li {
  display: grid;
  gap: var(--s1);
  align-content: start;
  padding: var(--s2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--lift-1);
}
.trust-grid h3 { font-size: 16px; line-height: 24px; font-family: var(--sans); }
.trust-grid p { font-size: 14px; line-height: 24px; color: var(--ink-2); }
.trust-grid svg { color: var(--vermillion); }

.ask-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: start;
  gap: var(--s3);
}
.ask-side { display: grid; gap: var(--s2); align-content: start; }
.ask-side .sheet--pad { margin: 0; }
.ask-list { display: grid; gap: var(--s1); margin: var(--s2) 0 0; padding: 0; }
.ask-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s1); font-size: 14px; line-height: 24px; color: var(--ink-2); }
.ask-list svg { margin-top: 4px; color: var(--forest); }

.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s1); }
.example-grid .chip { display: grid; align-content: start; justify-items: start; min-height: 48px; padding: var(--s1) var(--s2); text-align: left; }
.example-card { display: grid; gap: 0; }
.example-card__title { display: block; font-weight: 600; color: var(--ink); font-size: 14px; line-height: 24px; }
.example-card__note { display: block; font-weight: 400; color: var(--ink-2); font-size: 12px; line-height: 16px; }

.arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin: 0 0 var(--s3);
  padding: 0;
}
.arch-grid li {
  position: relative;
  display: grid;
  gap: var(--s1);
  align-content: start;
  height: 100%;
  padding: var(--s2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--lift-1);
  overflow: hidden;
}
.arch-grid li::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--vermillion);
  opacity: 0.85;
}
.arch-grid h3 { font-size: 16px; line-height: 24px; font-family: var(--sans); }
.arch-grid p { font-size: 14px; line-height: 24px; color: var(--ink-2); }
.arch-num {
  display: inline-grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--indigo);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
}
.provider-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  margin: var(--s2) 0;
  padding: var(--s2);
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 24px;
}
.provider-chain strong { font-family: var(--sans); font-size: 12px; }
.landing__section--ink .provider-chain { color: var(--ink); }
.landing__section--ink .provider-chain strong { color: var(--indigo); }

.faq { display: grid; gap: var(--s1); margin: 0; padding: 0; }
.faq details {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: var(--s2);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--indigo);
}
.faq p { margin-top: var(--s1); color: var(--ink-2); }

.cta-panel {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: var(--lift-2);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.cta-panel .btn--quiet { background: rgba(255, 255, 255, 0.96); }

@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s3); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .ask-layout { grid-template-columns: 1fr; }
  .arch-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .hero { padding-block: var(--s5) var(--s3); }
  .preview__row { grid-template-columns: auto 1fr; }
  .preview__cite { justify-self: start; }
  .trust-grid { grid-template-columns: 1fr; }
  .arch-grid { grid-template-columns: 1fr; }
  .cta-panel { padding: var(--s3); }
}

/* ═══════════════════════════════════════════════════════════════════
   24. TACTILE LAYER — soft skeuomorphism

   Applied as one block at the end of the file rather than edited into each
   component, so the tactile treatment is a single readable decision instead
   of twenty scattered ones. Only surface treatment changes here: no geometry,
   no grid columns, no padding. That matters because two browser gates assert
   on rendered geometry — the flip-board must not move a pixel when a counter
   gains a digit, and the status badge must not resize between its three
   labels. Depth is added; nothing is moved.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Character palette. Narrow and warm, so the cast reads as one family and
     never competes with the accent colours, which carry regulatory meaning. */
  --bub-skin:  #E8B48C;
  --bub-skin-2:#C98C63;
  --bub-skin-3:#8E5A3B;
  --bub-hair:  #3A2E28;
}

/* ── Raised surfaces ─────────────────────────────────────────────── */
/* Note: `.tally` is deliberately NOT in this group. It is the dark bar pinned
   to the bottom of the viewport, not a card — putting it here painted it with
   the cream card face and left white text on cream, which the contrast gate
   caught at 1.26:1. It gets its own dark treatment below. */
.sheet,
.ask-card,
.preview,
.legend,
.band,
.steps .step,
.fail__suggest-list a,
.trust-grid li,
.arch-grid li,
.ask-list,
.cta-panel {
  background: var(--face-card);
  border: 1px solid var(--rule);
  box-shadow: var(--lift-1);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.sheet--pad,
.preview { border-radius: var(--r-lg); }

/* Lift on hover only where the surface is genuinely interactive, so the page
   does not turn into a field of floating cards. */
.ask-card:hover,
.trust-grid li:hover,
.arch-grid li:hover,
.fail__suggest-list a:hover,
.fail__suggest-list a:focus-visible {
  box-shadow: var(--lift-2);
  border-color: var(--rule);
  transform: translateY(-1px);
}
.fail__suggest-list a:hover,
.fail__suggest-list a:focus-visible { border-color: var(--indigo); }

/* ── Pressed / recessed ──────────────────────────────────────────── */
.input,
.select,
.segmented__face {
  background: var(--face-sunk);
  border: 1px solid var(--rule);
  box-shadow: var(--press);
  border-radius: var(--r-md);
  transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.input:hover,
.select:hover { border-color: var(--ink-3); }
.input:focus,
.select:focus {
  background: var(--card-hi);
  border-color: var(--indigo);
  /* A pressed well that opens back out as you type into it. */
  box-shadow: inset 0 1px 3px var(--well), 0 0 0 3px var(--indigo-tint);
}
.input::placeholder { color: var(--ink-3); opacity: 1; }

/* ── Buttons: a face that catches light, and sinks when pressed ──── */
.btn {
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
  transition: transform 0.12s ease, box-shadow 0.12s ease,
              background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--lift-2); }
.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--press);
}
.btn--primary {
  background: var(--face-indigo);
  border-color: var(--indigo-deep);
  color: #FFFFFF;
}
.btn--primary:hover:not(:disabled) { background: var(--face-indigo); border-color: var(--indigo-deep); }
.btn--accent {
  background: linear-gradient(180deg, #B94534 0%, #A6382A 100%);
  border-color: #8C2F23;
  color: #FFFFFF;
}
.btn--quiet {
  background: var(--face-raise);
  border-color: var(--rule);
  color: var(--indigo);
}
.btn--quiet:hover:not(:disabled) { background: var(--face-raise); border-color: var(--indigo); }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover:not(:disabled) { background: var(--indigo-tint); transform: none; box-shadow: none; }

/* ── Chips ───────────────────────────────────────────────────────── */
.chip {
  background: var(--face-raise);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  box-shadow: var(--lift-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease, background 0.15s ease;
}
.chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--lift-2);
  border-color: var(--indigo);
  background: var(--card-hi);
  color: var(--indigo);
}
.chip:active { transform: translateY(1px); box-shadow: var(--press); }
.chip[aria-pressed="true"] {
  background: var(--face-indigo);
  border-color: var(--indigo-deep);
  color: #FFFFFF;
}

/* ── Notices ─────────────────────────────────────────────────────── */
.notice {
  background: var(--face-card);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.notice--info    { background: linear-gradient(180deg, #F4F7FB 0%, var(--indigo-tint) 100%); border-color: #C3D0E0; border-left-color: var(--indigo); }
.notice--warn    { background: linear-gradient(180deg, #FCF8EC 0%, var(--gold-tint) 100%);   border-color: #E3D3A8; border-left-color: var(--gold); }
.notice--error   { background: linear-gradient(180deg, #FDF4F1 0%, var(--vermillion-tint) 100%); border-color: #E7C7C0; border-left-color: var(--vermillion); }
.notice--success { background: linear-gradient(180deg, #F2F8F4 0%, var(--forest-tint) 100%);  border-color: #BFD8C8; border-left-color: var(--forest); }

/* ── The flip board ────────────────────────────────────────────────
   The counter digits keep their exact width and the caption row keeps its
   height; only the face, radius and shadow change. The jitter gate asserts
   on geometry, and nothing in this block is allowed to move anything. */
.board {
  background: var(--face-indigo);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-3);
  border: 1px solid var(--indigo-deep);
}
/* The board face is now a gradient, so every light-on-board colour is checked
   against the LIGHTEST stop (#2A4C7C), not the old flat #1E3A5F. "of" sat at
   4.31:1 there and failed AA; the caption grey needed lifting too. */
.board__of { color: #E8EEF6; }
.board__pct,
.board__label { color: #F2F6FB; }
.tally {
  background: var(--face-indigo);
  box-shadow: 0 -4px 16px rgba(22, 44, 73, 0.24);
  border-top: 2px solid var(--vermillion);
}
.tally__label { color: #EAF0F8; }
/* The digit cell is a recessed window into the board, not a light card.
   Its text colour is #FFFFFF (set in the base rule, for the dark board), so
   the face has to stay dark. An earlier pass here gave it the light card
   gradient and the digits rendered white-on-white — invisible, with the board
   still reporting itself stable because geometry had not changed. */
.flip__cell {
  background: linear-gradient(180deg, #1B2A40 0%, #0D1622 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              inset 0 -2px 6px rgba(0, 0, 0, 0.35);
}

/* ── Status badge ──────────────────────────────────────────────────
   min-width stays at 112px and height at 24px. Both are asserted by the
   jitter gate: the badge resized between its three labels and shoved the
   step title sideways. Rounded, but immovable. */
.status {
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 var(--sheen-soft);
}
.status[data-state="pending"]     { background: var(--face-sunk); }
.status[data-state="in_progress"] { background: var(--gold-tint); }
.status[data-state="done"]        { background: var(--face-forest); color: #FFFFFF; border-color: #24503A; }

/* ── Step items ──────────────────────────────────────────────────── */
.step {
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.step:hover { box-shadow: var(--lift-2); }
.step[data-status="done"]        { background: linear-gradient(180deg, #F3F9F5 0%, var(--forest-tint) 100%); border-color: #BFD8C8; }
.step[data-status="in_progress"] { background: linear-gradient(180deg, #FCF8EC 0%, var(--gold-tint) 100%); border-color: #E3D3A8; }
.step__num {
  background: var(--face-indigo);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.step[data-status="done"] .step__num        { background: var(--face-forest); }
.step[data-status="in_progress"] .step__num { background: linear-gradient(180deg, #C79A3A 0%, #8A6A1F 100%); }

/* ── Small marks: regulator glyphs, legend swatches ──────────────── */
.step__gov-mark,
.legend__swatch {
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--sheen-soft);
}

/* ── Segmented residency picker ──────────────────────────────────── */
.segmented__face { background: var(--face-card); box-shadow: var(--lift-1); }
.segmented__input:hover + .segmented__face { box-shadow: var(--lift-2); }
.segmented__input:checked + .segmented__face {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--indigo-tint) 100%);
  border-color: var(--indigo);
  box-shadow: var(--press), 0 0 0 1px var(--indigo);
}

/* ── Landing page surfaces ───────────────────────────────────────── */
.arch-grid li,
.trust-grid li { border-radius: var(--r-lg); }
.arch-grid li { border-radius: var(--r-lg); overflow: hidden; }
.arch-num {
  background: var(--face-indigo);
  box-shadow: var(--lift-1);
  border-radius: var(--r-pill);
}
.hero__meta li,
.example-grid .chip { border-radius: var(--r-md); }
.preview__row {
  background: var(--face-raise);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
}
.preview__cite { border-radius: var(--r-pill); background: var(--face-sunk); border-color: var(--rule); }
.preview__num {
  background: var(--face-indigo);
  border-radius: var(--r-sm);
  box-shadow: var(--lift-1);
}
.ledger {
  border-radius: var(--r-lg);
  background: var(--face-card);
  box-shadow: var(--lift-2);
}
.ledger__num {
  background: var(--face-indigo);
  box-shadow: var(--lift-1);
}
.band { border-radius: var(--r-lg); }

/* ── Bubble characters ─────────────────────────────────────────────
   Illustration layer, kept clearly separate from the icon set: a soft
   ground shadow and a barely-there float so the cast feels present rather
   than pasted on. Fully disabled for reduced-motion users. */
.bub { display: block; }
/* The cast sits on a raised panel rather than floating loose on the page —
   loose, they read as stickers someone pasted in. */
.bub-panel {
  padding: var(--s2) var(--s3) var(--s3);
  margin-top: var(--s1);
  background: var(--face-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.bub-panel .bub-stage { padding: 0; }
.bub--float { animation: bubFloat 5.5s ease-in-out infinite; }
@keyframes bubFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.bub-stage {
  display: grid;
  place-items: center;
  padding: var(--s3) 0 var(--s2);
}
.bub-stage--row {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  justify-content: center;
  gap: var(--s4);
  align-items: end;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.bub-caption {
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-2);
  max-width: 34ch;
  margin-inline: auto;
}

@media (max-width: 700px) {
  .bub-stage--row { gap: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  .bub--float { animation: none; }
  .btn, .chip, .sheet, .step, .trust-grid li, .arch-grid li { transition: none; }
  .btn:hover:not(:disabled), .chip:hover, .ask-card:hover,
  .trust-grid li:hover, .arch-grid li:hover, .fail__suggest-list a:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   25. PRINT
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .topbar, .colophon, .torn, .tally, .skip-link,
  .step__actions, .btn, .link-btn, .no-print { display: none !important; }

  body { background: #FFFFFF; background-image: none; color: #000000; font-size: 11pt; }
  .shell { max-width: 100%; padding: 0; }
  .site-main { padding: 0; }

  .board {
    background: #FFFFFF;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: none;
  }
  .board::before { display: none; }
  .board__label, .board__of, .board__pct { color: #000000; }
  .flip__cell {
    background: #FFFFFF;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: none;
  }
  .flip__cell::after { background: #999999; }

  .sheet, .step, .band, .provenance { border: 1px solid #999999; box-shadow: none; }
  .step { break-inside: avoid; page-break-inside: avoid; }
  .step__facts { display: grid !important; }
  a { color: #000000; text-decoration: underline; }
  .sources__host { color: #444444; }
}