/* ==========================================================================
   100% Redress Party — content-layout mockups
   Token values lifted from website/DESIGN.md + website/src/app/(frontend)/globals.css
   so that what is approved here is what gets built.
   ========================================================================== */

:root {
  /* surfaces */
  --rp-bg:          #FBF5F5;
  --rp-surface:     #FFFFFF;
  --rp-surface-2:   #F4DEE2;  /* soft pink — reassurance */
  --rp-surface-3:   #F4ECEC;  /* alternate band */
  --rp-line:        #EFDFE1;

  /* ink */
  --rp-text:        #2A2226;
  --rp-muted:       #6A5E62;
  --rp-faint:       #756A6E;

  /* accent */
  --rp-accent:      #C1443A;
  --rp-accent-2:    #A5372F;

  /* dark — "do not miss this" */
  --rp-dark:        #2A2226;
  --rp-on-dark:     #F3E7EA;
  --rp-on-dark-muted: #B9AEB2;

  --rp-success:     #2E9E5B;

  /* shape */
  --rp-r-sm: 12px;
  --rp-r-md: 16px;
  --rp-r-lg: 22px;
  --rp-r-pill: 999px;

  --rp-shadow:       0 6px 26px rgba(180,120,130,.10);
  --rp-shadow-hover: 0 18px 44px rgba(180,120,130,.20);
  --rp-shadow-btn:   0 10px 26px rgba(193,68,58,.28);

  --rp-gutter: clamp(20px, 5vw, 80px);
  --rp-section-y: clamp(56px, 7vw, 100px);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rp-bg);
  color: var(--rp-text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--rp-surface-2); color: var(--rp-text); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

:focus-visible {
  outline: 2.5px solid var(--rp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.rp-wrap { width: min(1120px, 100% - var(--rp-gutter) * 2); margin-inline: auto; }
.rp-wrap-wide { width: min(1320px, 100% - var(--rp-gutter) * 2); margin-inline: auto; }

section { padding-block: var(--rp-section-y); }
section.tight { padding-block: clamp(32px, 4vw, 52px); }
.band-3 { background: var(--rp-surface-3); }
.band-2 { background: var(--rp-surface-2); }
.band-white { background: var(--rp-surface); }

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

/* ------------------------------------------------------------ primitives -- */

.eyebrow {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rp-accent);
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rp-surface); color: var(--rp-accent);
  font-weight: 600; font-size: 13px;
  padding: 8px 16px; border-radius: var(--rp-r-pill);
  box-shadow: var(--rp-shadow);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rp-success); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--rp-surface-2); color: var(--rp-accent-2);
  font: 600 12.5px/1 var(--font-sans);
  padding: 7px 13px; border-radius: var(--rp-r-pill);
  white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 16px/1 var(--font-sans);
  padding: 15px 28px; border-radius: var(--rp-r-pill);
  text-decoration: none; border: 1.5px solid transparent;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn-primary { background: var(--rp-accent); color: #fff; box-shadow: var(--rp-shadow-btn); }
.btn-primary:hover { background: var(--rp-accent-2); transform: translateY(-2px); }
.btn-ghost { background: var(--rp-surface); color: var(--rp-text); box-shadow: var(--rp-shadow); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--rp-shadow-hover); }
.btn-dark { background: var(--rp-dark); color: #fff; }
.btn-dark:hover { background: var(--rp-accent); transform: translateY(-2px); }
.btn-sm { font-size: 14.5px; padding: 11px 20px; }

.tlink {
  color: var(--rp-accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.tlink:hover { color: var(--rp-accent-2); }

/* section head */
.sec-head { max-width: 720px; margin-bottom: 38px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 38px); margin-top: 14px; }
.sec-head p { margin-top: 14px; color: var(--rp-muted); font-size: 18px; }

/* icon tile — DESIGN.md §4: 52px square, 16px radius, surface-2, primary icon */
.icon-tile {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--rp-r-md);
  background: var(--rp-surface-2); color: var(--rp-accent);
  display: grid; place-items: center;
}
.icon-tile.sm { width: 34px; height: 34px; border-radius: 11px; }
.icon-tile.num { font: 700 21px/1 var(--font-display); }

.card {
  background: var(--rp-surface);
  border: 1.5px solid var(--rp-line);
  border-radius: var(--rp-r-lg);
  box-shadow: var(--rp-shadow);
}
.card-link { text-decoration: none; display: block; transition: transform .2s ease, box-shadow .2s ease; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--rp-shadow-hover); }

/* striped image placeholder, mirrors globals.css .rp-ph */
.ph {
  position: relative; border-radius: var(--rp-r-lg); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, #F0DCE0 0 12px, #E7CFD4 12px 24px);
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-label);
  font: 600 11.5px/1 var(--font-sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: #8A6B72;
}

/* ------------------------------------------------------------ chrome ----- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  /* the live build layers the page background at 88% under a 12px blur */
  background: color-mix(in srgb, var(--rp-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header .inner {
  display: flex; align-items: center; gap: 30px;
  padding-block: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-logo { height: 64px; width: auto; flex: none; }
.brand-t { display: flex; flex-direction: column; line-height: 1; }
.brand .name { font: 700 19px/1 var(--font-display); letter-spacing: -.02em; color: var(--rp-text); }
.brand .sub {
  display: block; margin-top: 4px;
  font: 600 9px/1 var(--font-sans); letter-spacing: .24em;
  text-transform: uppercase; color: var(--rp-faint);
}
.site-nav { display: flex; gap: 26px; font-size: 15px; font-weight: 500; color: var(--rp-muted); }
.site-nav a { text-decoration: none; padding-block: 4px; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--rp-accent); }
.header-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.header-actions .btn-sm { font-size: 14.5px; padding: 12px 22px; }

.site-footer { background: var(--rp-dark); color: var(--rp-on-dark); padding-block: 64px 40px; }
.site-footer a { color: var(--rp-on-dark); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-on-dark-muted); }
.site-footer ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.site-footer .legal {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 13.5px; color: var(--rp-on-dark-muted);
}

/* breadcrumbs — template-level, not a block */
.crumbs { font-size: 14px; color: var(--rp-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--rp-muted); }
.crumbs span[aria-current] { color: var(--rp-text); font-weight: 600; }

/* mockup annotation */
.anno {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--rp-accent); background: var(--rp-surface-2);
  padding: 6px 12px; border-radius: var(--rp-r-pill);
  margin-bottom: 18px;
}
.anno code { font: inherit; }

/* ===================================================== BLOCK: supportHero */

.hero { text-align: center; }
.hero .lede { max-width: 820px; margin-inline: auto; }
.hero h1 {
  font-size: clamp(36px, 6vw, 58px); line-height: 1.04; letter-spacing: -.03em;
  margin: 22px 0 20px;
}
.hero h1 .accent { color: var(--rp-accent); }
.hero .sub { font-size: 19px; line-height: 1.55; color: var(--rp-muted); max-width: 560px; margin: 0 auto 30px; }
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* the bento: tall · (image + plum stat) · tall */
.bento-hero {
  margin-top: 44px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
.bento-hero > .ph { aspect-ratio: 3 / 4; }
.bento-hero .stack { display: flex; flex-direction: column; gap: 16px; }
.bento-hero .stack .ph { flex: 1.3; }

.stat-tile {
  background: var(--rp-dark); color: var(--rp-on-dark);
  border-radius: var(--rp-r-lg); padding: 22px;
  display: flex; flex-direction: column; justify-content: center; flex: 1;
}
.stat-tile .val { font: 700 30px/1 var(--font-display); color: #fff; }
.stat-tile .cap { font-size: 13.5px; line-height: 1.4; color: var(--rp-on-dark-muted); margin-top: 6px; }
.stat-tile.pink { background: var(--rp-surface-2); color: var(--rp-text); }
.stat-tile.pink .val { color: var(--rp-accent); }
.stat-tile.pink .cap { color: var(--rp-muted); }

/* ==================================================== BLOCK: crisisBanner */

.crisis {
  background: var(--rp-dark); color: var(--rp-on-dark);
  border-radius: var(--rp-r-lg);
  padding: clamp(26px, 3.5vw, 38px);
}
.crisis.full { border-radius: 0; }
.crisis h2 { color: #fff; font-size: clamp(23px, 2.6vw, 30px); }
.crisis p { color: var(--rp-on-dark-muted); margin-top: 10px; max-width: 60ch; }
.crisis-lines { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
/* the one deliberate solid-rose-on-plum: this must be the heaviest thing here */
.crisis-line {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--rp-accent); color: #fff;
  padding: 14px 24px; border-radius: var(--rp-r-pill);
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}
.crisis-line:hover { background: var(--rp-accent-2); transform: translateY(-2px); }
.crisis-line .who { font: 600 12px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.crisis-line .num { font: 700 23px/1.1 var(--font-display); }

/* ======================================================= BLOCK: helpDoors */

.doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.door {
  padding: 30px; border-radius: var(--rp-r-lg);
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  box-shadow: var(--rp-shadow);
  text-decoration: none; display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
.door:hover { transform: translateY(-4px); box-shadow: var(--rp-shadow-hover); }
.door.tint { background: var(--rp-surface-2); border-color: transparent; }
.door.tint .icon-tile { background: var(--rp-surface); }
.door h3 { font-size: 23px; margin: 18px 0 10px; }
.door p { color: var(--rp-muted); font-size: 16px; }
.door .go { margin-top: 16px; display: inline-flex; gap: 8px; align-items: center; color: var(--rp-accent); font-weight: 600; }

/* ==================================================== BLOCK: journeyPhases */

.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.phase {
  padding: 22px; border-radius: var(--rp-r-lg);
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  text-decoration: none; display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
.phase:hover { transform: translateY(-4px); box-shadow: var(--rp-shadow-hover); }
.phase .n { font: 700 30px/1 var(--font-display); color: var(--rp-faint); }
.phase h3 { font-size: 17px; margin-top: 12px; }
.phase .state { display: block; margin-top: 10px; font-size: 13px; color: var(--rp-muted); }
/* done */
.phase.done { background: var(--rp-surface-2); border-color: transparent; }
.phase.done .n, .phase.done .state { color: var(--rp-accent-2); }
/* current — the plum anchor of the row */
.phase.current { background: var(--rp-dark); border-color: transparent; color: var(--rp-on-dark); }
.phase.current .n { color: #fff; }
.phase.current h3 { color: #fff; }
.phase.current .state { color: var(--rp-on-dark-muted); display: flex; align-items: center; gap: 7px; }
.phase.current .state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rp-accent); }

/* ===================================================== BLOCK: schemeSteps */

.steps { display: grid; gap: 18px; }
.step { padding: 26px; }
.step-head { display: flex; gap: 18px; align-items: flex-start; }
.step-head h3 { font-size: 22px; }
.step-head .meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.step > p { color: var(--rp-muted); margin-top: 16px; max-width: 68ch; }
/* inner two-cell bento: admin on surface-3, reassurance on soft pink */
.step-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.panel { padding: 20px; border-radius: var(--rp-r-md); }
.panel h4 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-faint); }
.panel ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15.5px; }
.panel li { padding-left: 24px; position: relative; }
.panel-docs { background: var(--rp-surface-3); }
.panel-docs li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid var(--rp-faint);
}
.panel-tips { background: var(--rp-surface-2); }
.panel-tips h4 { color: var(--rp-accent-2); }
.panel-tips li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--rp-accent); font-weight: 700;
}
.step-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 15.5px; }

/* =================================================== BLOCK: pageAnchorNav */

.with-rail { display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }
.anchor-nav { position: sticky; top: 96px; }
.anchor-nav h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--rp-faint); }
.anchor-nav ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: a; }
.anchor-nav a {
  display: block; padding: 9px 15px; border-radius: var(--rp-r-pill);
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  color: var(--rp-text);
  text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.anchor-nav a:hover { border-color: var(--rp-accent); color: var(--rp-accent-2); }
.anchor-nav a[aria-current] { background: var(--rp-dark); border-color: transparent; color: #fff; }

/* ======================================================== BLOCK: pagerNav */

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager a { padding: 24px; text-decoration: none; }
.pager .dir { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rp-accent); }
.pager h3 { font-size: 19px; margin-top: 10px; }
.pager .next { text-align: right; }

/* ========================================================= BLOCK: timeline */

.timeline-year { display: grid; grid-template-columns: 150px 1fr; gap: 32px; }
.timeline-year + .timeline-year { margin-top: 48px; }
.timeline-year .year {
  font: 700 clamp(30px, 3.6vw, 38px)/1 var(--font-display);
  color: var(--rp-accent); position: sticky; top: 96px;
}
.timeline-events { display: grid; gap: 16px; position: relative; padding-left: 30px; }
.timeline-events::before {
  content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 1.5px; background: var(--rp-line);
}
.tl-event { padding: 24px; position: relative; }
.tl-event::before {
  content: ''; position: absolute; left: -30px; top: 30px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--rp-accent); box-shadow: 0 0 0 4px var(--rp-surface-2);
}
.tl-event h3 { font-size: 20px; margin-top: 12px; }
.tl-event ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--rp-muted); font-size: 16px; }
.tl-event li { padding-left: 26px; position: relative; }
.tl-event li::before { content: '✓'; position: absolute; left: 0; color: var(--rp-accent); font-weight: 700; }
.tl-note {
  margin-top: 16px; padding: 16px 18px;
  background: var(--rp-surface-2); border-radius: var(--rp-r-md);
  font-size: 15.5px;
}
.tl-note strong { color: var(--rp-accent-2); }
.tl-sources { margin-top: 16px; font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 16px; }

/* =================================================== BLOCK: comparisonList */
/* two poles of the palette: pink = covered, plum = not covered.
   The distinction is also carried by heading and glyph, never colour alone. */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.compare-col { padding: 30px; border-radius: var(--rp-r-lg); }
.compare-col h3 { font-size: 22px; display: flex; align-items: center; gap: 12px; }
.compare-col ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.compare-col li { padding-left: 34px; position: relative; font-size: 16.5px; }
.compare-col li span { display: block; font-size: 14.5px; margin-top: 3px; }
.compare-yes { background: var(--rp-surface-2); }
.compare-yes li::before {
  content: '✓'; position: absolute; left: 0; top: -2px;
  font: 700 19px/1.3 var(--font-display); color: var(--rp-accent);
}
.compare-yes li span { color: var(--rp-muted); }
.compare-no { background: var(--rp-dark); color: var(--rp-on-dark); }
.compare-no h3 { color: #fff; }
.compare-no li::before {
  content: '✕'; position: absolute; left: 0; top: -2px;
  font: 700 18px/1.4 var(--font-display); color: var(--rp-on-dark-muted);
}
.compare-no li span { color: var(--rp-on-dark-muted); }

/* ====================================================== BLOCK: calloutBox */
/* 16px radius — tile scale, deliberately under card scale, so it reads as an aside */

.callout {
  padding: 24px 26px; border-radius: var(--rp-r-md);
  border: 1.5px solid var(--rp-line); background: var(--rp-surface-3);
}
.callout h3 { font-size: 18px; margin-bottom: 10px; }
.callout p + p { margin-top: 10px; }
.callout p { color: var(--rp-muted); font-size: 16px; max-width: 74ch; }
.callout-support { background: var(--rp-surface-2); border-color: transparent; }
.callout-support p { color: var(--rp-text); }
.callout-urgent {
  background: var(--rp-dark); color: var(--rp-on-dark);
  border-color: transparent;
  padding-left: 40px; position: relative;
}
/* An inset, fully-rounded bar — never a single-side border on a rounded box,
   which renders as a crescent around the corner radius. */
.callout-urgent::before {
  content: ''; position: absolute; left: 16px; top: 20px; bottom: 20px;
  width: 5px; border-radius: 999px; background: var(--rp-accent);
}
.callout-urgent h3 { color: #fff; }
.callout-urgent p { color: var(--rp-on-dark-muted); }
.callout-success { border-color: var(--rp-success); background: var(--rp-surface); }
.callout-success h3::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rp-success); margin-right: 9px; vertical-align: middle;
}

/* ================================================= BLOCK: supportDirectory */

.dir-group + .dir-group { margin-top: 44px; }
.dir-group > h3 { font-size: 24px; margin-bottom: 20px; }
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dir-item { padding: 24px; }
.dir-item h4 { font-size: 18px; font-family: var(--font-display); }
.dir-item > p { color: var(--rp-muted); font-size: 15.5px; margin-top: 8px; }
.dir-contacts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.dir-contacts li { display: flex; align-items: center; gap: 11px; }

/* ======================================================= BLOCK: peopleGrid */
/* asymmetric bento: one feature card beside a 2x2 */

.people { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.people-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.person { overflow: hidden; display: flex; flex-direction: column; }
.person .ph { border-radius: 0; aspect-ratio: 4 / 3; }
.person-body { padding: 22px; }
.person h3 { font-size: 21px; margin-top: 12px; }
.person .role { color: var(--rp-muted); font-size: 15px; margin-top: 6px; }
.person .socials { display: flex; gap: 8px; margin-top: 16px; }
.person .socials a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--rp-surface-2); color: var(--rp-accent);
  display: grid; place-items: center;
}
.person .contact { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 15px; }
.person.feature .ph { aspect-ratio: 5 / 4; }
.person.feature h3 { font-size: 28px; }
.person.feature .bio { color: var(--rp-muted); font-size: 16px; margin-top: 14px; }

/* ======================================================== BLOCK: pullQuote */

.quote {
  position: relative; overflow: hidden;
  padding: 36px 38px 34px;
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  border-radius: var(--rp-r-lg);
}
/* Decorative mark — a watermark in the corner rather than a glyph sitting
   under the opening line, which fought the text for the same space. */
.quote-mark {
  position: absolute; right: -12px; bottom: -18px;
  width: 156px; height: 156px;
  color: var(--rp-accent); opacity: .09;
  pointer-events: none; z-index: 0;
}
.quote blockquote { margin: 0; position: relative; z-index: 1; }
.quote p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; letter-spacing: -.02em;
}
.quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 15px; color: var(--rp-muted); }
/* support tone — the warm one, used sparingly now */
.quote.support { background: var(--rp-surface-2); border-color: transparent; }
.quote.support .quote-mark { opacity: .16; }

/* campaign tone */
.quote.dark { background: var(--rp-dark); color: var(--rp-on-dark); border-color: transparent; }
.quote.dark .quote-mark { color: var(--rp-accent); opacity: .30; }
.quote.dark cite { color: var(--rp-on-dark-muted); }

/* ======================================================= BLOCK: references */

.refs { counter-reset: r; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.refs li { counter-increment: r; padding-left: 52px; position: relative; }
.refs li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font: 700 13px/1 var(--font-sans); letter-spacing: .04em;
  background: var(--rp-surface-2); color: var(--rp-accent);
  padding: 8px 10px; border-radius: 9px;
}
.refs .src { display: block; color: var(--rp-faint); font-size: 14.5px; margin-top: 4px; }

/* ======================================================= BLOCK: keyFigures */

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.figures .stat-tile { padding: 26px; }
.figures .stat-tile .val { font-size: clamp(28px, 3.2vw, 38px); }

/* ========================================================= BLOCK: cardGrid */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards .card { padding: 26px; }
.cards h3 { font-size: 19px; margin-top: 16px; }
.cards p { color: var(--rp-muted); font-size: 15.5px; margin-top: 10px; }

/* ========================================================= BLOCK: iconTabs */

.tabs-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tab {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--rp-r-pill);
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  font-weight: 600; font-size: 15px; cursor: pointer; color: inherit;
  font-family: inherit;
}
.tab[aria-selected='true'] { background: var(--rp-dark); color: #fff; border-color: transparent; }
.tab[aria-selected='true'] .icon-tile { background: rgba(255,255,255,.14); color: #fff; }
.tab-panel { margin-top: 22px; padding: 32px; }
.tab-panel .val { font: 700 clamp(34px, 4vw, 46px)/1 var(--font-display); color: var(--rp-accent); }
.tab-panel h3 { font-size: 24px; margin-top: 14px; }
.tab-panel p { color: var(--rp-muted); margin-top: 12px; max-width: 66ch; }

/* ======================================================== BLOCK: aboutSplit */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split h2 { font-size: clamp(28px, 3.4vw, 38px); margin-top: 14px; }
.split p { color: var(--rp-muted); margin-top: 16px; font-size: 17.5px; }
.split .pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.split .ph { aspect-ratio: 4 / 5; }

/* ========================================================= BLOCK: ctaBanner */

.cta-panel {
  background: var(--rp-dark); color: var(--rp-on-dark);
  border-radius: var(--rp-r-lg); padding: clamp(30px, 4vw, 48px);
  display: flex; gap: 32px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.cta-panel h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); max-width: 20ch; }
.cta-panel p { color: var(--rp-on-dark-muted); margin-top: 12px; max-width: 46ch; }
.cta-panel .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ======================================================= BLOCK: newsIndex --- */

.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.news .card { overflow: hidden; }
.news .ph { border-radius: 0; aspect-ratio: 16 / 10; }
.news .body { padding: 22px; }
.news h3 { font-size: 18.5px; margin-top: 12px; }
.news p { color: var(--rp-muted); font-size: 15px; margin-top: 10px; }
.news .date { font-size: 13px; color: var(--rp-faint); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* ========================================================== BLOCK: trustBar */

.trustbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  border-radius: var(--rp-r-lg); overflow: hidden;
}
.trustbar > div { padding: 24px; display: flex; align-items: center; gap: 14px; }
.trustbar > div + div { border-left: 1.5px solid var(--rp-line); }
.trustbar strong { font-family: var(--font-display); font-size: 17px; display: block; }

/* ======================================================== BLOCK: accordion */

.acc { display: grid; gap: 12px; }
.acc details { background: var(--rp-surface); border: 1.5px solid var(--rp-line); border-radius: var(--rp-r-lg); }
.acc summary {
  padding: 22px 26px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; margin-left: auto; color: var(--rp-accent); font-size: 24px; line-height: 1; }
.acc details[open] summary::after { content: '\2013'; }
.acc details[open] summary { padding-bottom: 8px; }
.acc .acc-body { padding: 0 26px 24px 68px; color: var(--rp-muted); }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1000px) {
  .with-rail { grid-template-columns: 1fr; gap: 28px; }
  .anchor-nav { position: static; }
  .anchor-nav ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .figures, .phases { grid-template-columns: repeat(2, 1fr); }
  .cards, .news, .dir-grid { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: 1fr; }
  .timeline-year { grid-template-columns: 1fr; gap: 14px; }
  .timeline-year .year { position: static; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-nav { display: none; }
  .bento-hero { grid-template-columns: 1fr; }
  .bento-hero > .ph { aspect-ratio: 16 / 10; }
  .doors, .compare, .step-panels, .split, .pager,
  .cards, .news, .dir-grid, .people-sub, .figures, .phases,
  .trustbar { grid-template-columns: 1fr; }
  .trustbar > div + div { border-left: 0; border-top: 1.5px solid var(--rp-line); }
  .split { gap: 28px; }
  .pager .next { text-align: left; }
  .footer-cols { grid-template-columns: 1fr; }
  .acc .acc-body { padding-left: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card-link:hover, .door:hover, .phase:hover, .btn:hover { transform: none; }
}

/* two-up utility (used where a block sample needs a pair side by side) */
.pair-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .pair-2 { grid-template-columns: 1fr; } }

/* --------------------------------------------- overflow containment ------ */
/* Grid children default to min-width:auto and refuse to shrink below their
   content. Every grid that can hold long words or a scroll container needs
   this or the page scrolls sideways on a phone. */
.with-rail > *,
.steps > *,
.cards > *,
.news > *,
.dir-grid > *,
.people > *,
.people-sub > *,
.figures > *,
.phases > *,
.compare > *,
.step-panels > *,
.pair-2 > *,
.timeline-year > *,
.timeline-events > *,
.footer-cols > * { min-width: 0; }

.anchor-nav { max-width: 100%; }
code { word-break: break-word; }
.tl-sources, .step-links { max-width: 100%; }

@media (max-width: 860px) {
  /* Donate also lives in the nav and the footer — drop it from the header
     before the two controls start fighting for room. */
  .header-actions .btn-ghost { display: none; }
}
@media (max-width: 720px) {
  .site-header .inner { gap: 14px; }
  .chip { white-space: normal; }
  .header-actions .btn { padding: 10px 16px; font-size: 14px; }
}

/* ------------------------------------------------- contrast corrections -- */
/* --rp-accent (#C1443A) is 5.05:1 on white but only 3.95:1 on soft pink and
   4.35:1 on the neutral band. Rose on white, deep rose (--rp-accent-2, 5.14:1)
   on any tinted surface. Applies to text only — glyphs and icons are exempt
   at 3:1, and large display text keeps the brighter rose. */
.band-2 .tlink,
.band-3 .tlink,
.preview.on-band .tlink,
.callout .tlink,
.panel .tlink,
.tl-step.is-done .tlink,
.door.tint .go,
.panel-tips .tlink,
.callout-support .tlink,
.quote .tlink,
.compare-yes .tlink,
.refs li::before { color: var(--rp-accent-2); }

.band-2 .eyebrow,
.band-3 .eyebrow { color: var(--rp-accent-2); }

/* --rp-faint is 4.47:1 on the neutral band — a hair under. Step up to muted. */
.band-3 .refs .src,
.preview.on-band .refs .src,
.panel-docs h4 { color: var(--rp-muted); }

/* The footer's link colour (--rp-on-dark) was overriding the primary button's
   white, dropping it to 4.19:1 on rose. Buttons keep their own colour. */
.site-footer .btn-primary { color: #fff; }

/* mockup annotation label sits on soft pink */
.anno { color: var(--rp-accent-2); }

/* One <h1> per page — the page title. Same treatment as a section heading,
   sized by the inline clamp on each page. */
.sec-head h1 { font-size: clamp(28px, 3.4vw, 38px); margin-top: 14px; }

/* the anchor nav's own heading — small label treatment at h2 level */
.anchor-nav h2 { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rp-faint); }
/* a directory item is h3 when it sits directly under the section heading */
.dir-item h3 { font-size: 18px; font-family: var(--font-display); }

/* =========================================================== block spec === */

.spec + .spec { margin-top: 56px; }
.spec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.spec-head h2 { font-size: clamp(24px, 2.8vw, 32px); }
.spec-head .slug {
  font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--rp-surface-2); color: var(--rp-accent-2);
  padding: 7px 12px; border-radius: var(--rp-r-pill);
}
.spec-tag {
  font: 600 11px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rp-muted); border: 1.5px solid var(--rp-line);
  padding: 6px 11px; border-radius: var(--rp-r-pill);
}
.spec > p.purpose { color: var(--rp-muted); margin-top: 14px; max-width: 76ch; }

.spec-label {
  display: block; margin: 30px 0 14px;
  font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rp-faint);
}

/* fields table */
.fields-wrap { overflow-x: auto; border-radius: var(--rp-r-lg); border: 1.5px solid var(--rp-line); background: var(--rp-surface); }
table.fields { width: 100%; border-collapse: collapse; min-width: 620px; }
table.fields th {
  text-align: left; font: 600 11.5px/1 var(--font-sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-faint);
  padding: 16px 18px; border-bottom: 1.5px solid var(--rp-line);
  white-space: nowrap;
}
table.fields td { padding: 14px 18px; vertical-align: top; font-size: 15px; border-bottom: 1px solid var(--rp-line); }
table.fields tr:last-child td { border-bottom: 0; }
table.fields td:first-child { white-space: nowrap; }
table.fields code {
  font: 600 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rp-text);
}
table.fields .ty {
  font: 500 12.5px/1 var(--font-sans);
  background: var(--rp-surface-3); color: var(--rp-muted);
  padding: 5px 9px; border-radius: 7px; white-space: nowrap; display: inline-block;
}
table.fields .req { color: var(--rp-accent-2); font-weight: 600; font-size: 13px; }
table.fields .opt { color: var(--rp-faint); font-size: 13px; }
table.fields .note { color: var(--rp-muted); font-size: 14.5px; }
/* nested array sub-fields */
table.fields tr.sub td:first-child { padding-left: 40px; position: relative; }
table.fields tr.sub td:first-child::before {
  content: '└'; position: absolute; left: 20px; color: var(--rp-line);
}
table.fields tr.sub td { background: #F9F4F4; }

/* rendered-output frame */
.preview {
  border: 1.5px dashed var(--rp-line); border-radius: var(--rp-r-lg);
  padding: clamp(18px, 3vw, 30px); background: var(--rp-bg);
}
.preview.on-band { background: var(--rp-surface-3); }

.spec-note {
  margin-top: 16px; font-size: 14.5px; color: var(--rp-muted);
  padding-left: 20px; position: relative; max-width: 76ch;
}
.spec-note::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 999px; background: var(--rp-surface-2);
}
.spec-note strong { color: var(--rp-text); }

@media (max-width: 720px) {
  .spec-head { gap: 10px; }
  table.fields th, table.fields td { padding: 12px 14px; }
}

/* Six nav items no longer fit at tablet width alongside both header actions. */
@media (max-width: 940px) {
  .site-nav { gap: 15px; font-size: 14px; }
  .site-header .inner { gap: 18px; }
}

/* --------------------------------------------------- header nav menu ----- */
/* One markup shape for both breakpoints: a <details> whose summary is hidden
   on desktop (the links sit inline) and becomes a menu button below 1000px,
   where seven links plus two buttons stop fitting. Keyboard-operable for free. */

.site-header .inner { position: relative; }
.nav-drop { min-width: 0; }
.nav-drop > summary { display: none; }

@media (min-width: 1001px) {
  .nav-drop > .site-nav { display: flex; }
}

@media (max-width: 1000px) {
  .nav-drop > summary {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 14.5px/1 var(--font-sans); color: var(--rp-text);
    background: var(--rp-surface); border: 1.5px solid var(--rp-line);
    padding: 10px 16px; border-radius: var(--rp-r-pill);
    cursor: pointer; list-style: none;
  }
  .nav-drop > summary::-webkit-details-marker { display: none; }
  .nav-drop > summary:hover { border-color: var(--rp-accent); color: var(--rp-accent); }
  .nav-drop[open] > summary { background: var(--rp-dark); color: #fff; border-color: transparent; }

  .nav-drop > .site-nav { display: none; }
  .nav-drop[open] > .site-nav {
    display: grid; gap: 2px;
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 50;
    min-width: 232px; padding: 10px;
    background: var(--rp-surface);
    border: 1.5px solid var(--rp-line); border-radius: var(--rp-r-lg);
    box-shadow: var(--rp-shadow-hover);
  }
  .nav-drop[open] > .site-nav a {
    padding: 11px 14px; border-radius: var(--rp-r-md); font-size: 15.5px;
  }
  .nav-drop[open] > .site-nav a:hover { background: var(--rp-surface-2); }
  .nav-drop[open] > .site-nav a[aria-current] { background: var(--rp-surface-2); color: var(--rp-accent-2); }
}

/* supersedes the earlier tightening / hiding rules now that the menu exists */
@media (max-width: 940px) { .site-nav { gap: 24px; font-size: 15px; } }
@media (max-width: 720px) { .site-nav { display: none; } .nav-drop[open] > .site-nav { display: grid; } }

/* ================================================ BLOCK: ctaBanner (accent) */
/* Deep-red variant of the existing CTA. White on #C1443A is 5.05:1, so the
   headline and body can both be white; buttons invert to rose-on-white. */

.cta-panel.accent { background: var(--rp-accent); }
.cta-panel.accent h2 { color: #fff; }
.cta-panel.accent p { color: #FFF4F2; }
.cta-panel.accent .btn-primary {
  background: #fff; color: var(--rp-accent-2);
  box-shadow: 0 10px 26px rgba(90, 20, 15, .22);
}
.cta-panel.accent .btn-primary:hover { background: #FFF2F0; color: var(--rp-accent-2); }
.cta-panel.accent .btn-ghost {
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, .55); box-shadow: none;
}
.cta-panel.accent .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* ===================================================== BLOCK: mediaBanner === */
/* Full-bleed background image with a scrim and copy over it. Two treatments:
   `static` holds still, `parallax` drifts the media against the scroll. */

.media-banner {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--rp-r-lg);
  min-height: clamp(320px, 46vw, 460px);
  display: grid; align-items: end;
}
.media-banner.full { border-radius: 0; }
.media-banner.tall { min-height: clamp(400px, 60vw, 620px); }

/* The media layer is deliberately taller than its frame so a parallax shift
   never exposes an edge. */
.mb-media {
  position: absolute; inset: -14% 0; z-index: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(0,0,0,.05) 14px 28px),
    linear-gradient(150deg, #E7C9CF 0%, #C79AA4 42%, #7E5A64 100%);
  background-size: cover; background-position: center;
  will-change: transform;
}
.mb-media[data-photo] { background-image: none; }
.mb-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(42, 34, 38, .12) 0%,
    rgba(42, 34, 38, .32) 40%,
    rgba(42, 34, 38, .62) 100%);
}
.mb-body {
  position: relative; z-index: 2;
  padding: clamp(24px, 4vw, 52px);
  max-width: 760px; color: var(--rp-on-dark);
}
/* The copy carries its own backdrop rather than depending on where it happens
   to land in the section scrim — that varies with banner height, content
   length and viewport, and the topmost line kept falling in the weak zone.
   Ramps to .80 over the block's own top padding, so the fade is invisible but
   every line of text is guaranteed legible over even a pure-white photograph. */
.mb-body::before {
  content: ''; position: absolute; z-index: -1;
  left: 0; right: -40%; bottom: 0; top: -64px;
  background: linear-gradient(180deg,
    rgba(42, 34, 38, 0) 0,
    rgba(42, 34, 38, .80) 108px,
    rgba(42, 34, 38, .92) 100%);
  /* Fade out horizontally too, well clear of the text, so the backdrop reads
     as part of the scrim rather than as a panel with a hard right edge. */
  -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
}
.mb-body .eyebrow { color: #F6D9DC; }
.mb-body h2 { color: #fff; font-size: clamp(26px, 3.6vw, 42px); margin-top: 12px; }
.mb-body p { color: #EFE2E5; margin-top: 14px; max-width: 56ch; font-size: 17.5px; }
.mb-body .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mb-body .btn-ghost { background: #fff; color: var(--rp-text); }

/* photo-credit / placeholder label */
.mb-tag {
  position: absolute; z-index: 2; right: 16px; top: 14px;
  font: 600 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(24, 18, 21, .86);
  padding: 7px 12px; border-radius: var(--rp-r-pill);
}

/* No drift for anyone who has asked motion to stop. */
@media (prefers-reduced-motion: reduce) {
  .mb-media { transform: none !important; inset: 0; }
}

/* ============================================================ block index === */

.idx-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 16px;
}
.idx-item {
  display: block; text-decoration: none; min-width: 0;
  padding: 16px 18px; border-radius: var(--rp-r-md);
  background: var(--rp-bg); border: 1.5px solid var(--rp-line);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.idx-item:hover { transform: translateY(-3px); border-color: var(--rp-accent); box-shadow: var(--rp-shadow); }
.idx-name { display: block; font: 700 16px/1.2 var(--font-display); letter-spacing: -.02em; }
.idx-item code {
  display: block; margin-top: 5px;
  font: 600 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rp-accent-2);
}
.idx-desc { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--rp-muted); }
.idx-plain { margin-top: 14px; line-height: 2.1; }

/* Quotes get their own row rather than borrowing .cards, whose paragraph
   colour overrides the dark tone's on-dark text. */
.quote-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote-row > * { min-width: 0; }
@media (max-width: 940px) { .quote-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .quote-row { grid-template-columns: 1fr; } }
.idx-plain code {
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rp-muted); background: var(--rp-bg);
  padding: 6px 10px; border-radius: 8px;
}

/* the spec each index card points at */
.spec { scroll-margin-top: 96px; }

@media (max-width: 940px) { .idx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .idx-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SCHEME TIMELINE — shared by both formats
   ========================================================================== */

/* Green tokens. DESIGN.md defines --rp-success only as a status dot; using it
   for text needed a darker value. Measured, not eyeballed:
     #2E9E5B  3.41:1 on white — passes the 3:1 non-text threshold only
     #17693A  6.73:1 on white, 6.25 on blush, 5.96 on the tint — safe for text
   Green is never the only signal: every completed thing also carries a check
   glyph and the word "Complete". */
:root {
  --rp-success-ink:  #17693A;   /* the word "Complete", completed numerals */
  --rp-success-tint: #E8F4EC;   /* completed row surface */
}

.state-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rp-line); flex: none;
}
.state-word { font-weight: 600; }
.is-done .state-dot { background: var(--rp-success); }
.is-done > .state-word, .tl-state.is-done .state-word, .gd-state.is-done .state-word {
  color: var(--rp-success-ink);
}

/* --------------------------------------------------------- progress bar -- */

.progress-bar-wrap {
  position: sticky; top: 0; z-index: 20;
  background: var(--rp-surface);
  border-block: 1.5px solid var(--rp-line);
  padding-block: 14px;
}
.pg { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.pg-text { flex: 1; min-width: 0; }
.pg-count { font-size: 15.5px; font-weight: 600; }
.pg-note { font-size: 13.5px; color: var(--rp-faint); margin-top: 3px; }
.pg-note.is-warn { color: var(--rp-accent-2); font-weight: 600; }

.pg-track {
  height: 10px; border-radius: var(--rp-r-pill);
  background: var(--rp-surface-3); overflow: hidden;
}
.pg-fill {
  display: block; height: 100%; width: 0;
  background: var(--rp-success); border-radius: var(--rp-r-pill);
  transition: width .3s ease;
}
.pg-reset {
  font: 600 13.5px/1 var(--font-sans); color: var(--rp-muted);
  background: none; border: 1.5px solid var(--rp-line);
  padding: 9px 15px; border-radius: var(--rp-r-pill); cursor: pointer;
  white-space: nowrap;
}
.pg-reset:hover { border-color: var(--rp-accent); color: var(--rp-accent-2); }

.format-switch { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 4px; }
.format-switch-label { color: var(--rp-muted); font-size: 15.5px; }

/* ---------------------------------------------- format A: the tracker ---- */

.tl-phase + .tl-phase { margin-top: 40px; }
.tl-phase-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1.5px solid var(--rp-line);
}
.tl-phase-n {
  font: 600 11.5px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rp-accent-2); background: var(--rp-surface-2);
  padding: 7px 12px; border-radius: var(--rp-r-pill);
}
.tl-phase-t { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.tl-phase-c { font-size: 14.5px; color: var(--rp-muted); }
.tl-phase-count {
  margin-left: auto; font: 600 13px/1 var(--font-sans); color: var(--rp-muted);
  white-space: nowrap;
}
.tl-phase-count.is-done { color: var(--rp-success-ink); }
.tl-phase-count.is-done::before { content: '\2713\00a0'; }

.tl-list { list-style: none; margin: 0; padding: 0; position: relative; }

.tl-step { position: relative; padding-left: 62px; padding-block: 8px; }
/* the spine */
.tl-step::before {
  content: ''; position: absolute; left: 21px; top: 0; bottom: 0;
  width: 2px; background: var(--rp-line);
}
.tl-step:first-child::before { top: 26px; }
.tl-step:last-child::before { bottom: calc(100% - 26px); }
.tl-step.is-done::before { background: var(--rp-success); }

.tl-node {
  position: absolute; left: 0; top: 12px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--rp-surface); border: 2px solid var(--rp-line);
  display: grid; place-items: center;
}
.tl-num { font: 700 15px/1 var(--font-display); color: var(--rp-faint); }
.tl-step.is-done .tl-node { background: var(--rp-success-tint); border-color: var(--rp-success); }
.tl-step.is-done .tl-num { color: var(--rp-success-ink); }
/* the check replaces the numeral once complete — a second, non-colour signal */
.tl-step.is-done .tl-num::before { content: '\2713'; }
.tl-step.is-done .tl-num { font-size: 0; }
.tl-step.is-done .tl-num::before { font-size: 19px; }

.tl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px;
  align-items: center;
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  border-radius: var(--rp-r-lg); padding: 6px 18px 6px 6px;
}
.tl-step.is-done .tl-row { background: var(--rp-success-tint); border-color: var(--rp-success); }

.tl-title { margin: 0; min-width: 0; }
.tl-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 14px 12px; border-radius: var(--rp-r-md);
  font-family: inherit; color: inherit;
}
.tl-toggle:hover { background: var(--wash); }
.tl-step-n {
  font: 600 11.5px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rp-faint); white-space: nowrap; flex: none;
}
.tl-step-t {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  /* has to be able to shrink and wrap, or a long title pushes the chevron out
     of the row at narrow widths */
  flex: 1; min-width: 0;
}
.tl-chev {
  margin-left: auto; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--rp-accent); border-bottom: 2px solid var(--rp-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.tl-toggle[aria-expanded='true'] .tl-chev { transform: rotate(225deg) translate(-3px, -3px); }

.tl-state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--rp-muted); white-space: nowrap; }

.tl-done { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; white-space: nowrap; }
.tl-done input { position: absolute; opacity: 0; width: 0; height: 0; }
.tl-done-box {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  border: 2px solid var(--rp-line); background: var(--rp-surface);
  display: grid; place-items: center;
}
.tl-done-box::after {
  content: '\2713'; font: 700 14px/1 var(--font-sans); color: #fff; opacity: 0;
}
.tl-done input:checked + .tl-done-box { background: var(--rp-success); border-color: var(--rp-success); }
.tl-done input:checked + .tl-done-box::after { opacity: 1; }
.tl-done input:focus-visible + .tl-done-box { outline: 2.5px solid var(--rp-accent); outline-offset: 3px; }
.tl-done-label { font: 600 13.5px/1 var(--font-sans); color: var(--rp-muted); }
.tl-done input:checked ~ .tl-done-label { color: var(--rp-success-ink); }
.tl-done.is-done .tl-done-label { color: var(--rp-success-ink); }

.tl-detail { padding: 4px 12px 22px; }
.tl-detail .step-body { color: var(--rp-muted); max-width: 68ch; }

/* ------------------------------------------- tickable document checklist -- */

.doc-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
/* the shared .panel li marker would collide with the checkbox */
.panel .doc-list li { padding-left: 0; }
.panel .doc-list li::before { content: none; }

.doc {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 7px 9px; margin-left: -9px; border-radius: 9px;
  cursor: pointer; font-size: 15.5px;
}
.doc:hover { background: rgba(255, 255, 255, .55); }
.doc input { position: absolute; opacity: 0; width: 0; height: 0; }
.doc-tick {
  width: 20px; height: 20px; border-radius: 6px; flex: none; margin-top: 1px;
  border: 2px solid var(--rp-faint); background: var(--rp-surface);
  display: grid; place-items: center;
}
.doc-tick::after { content: '\2713'; font: 700 13px/1 var(--font-sans); color: #fff; opacity: 0; }
.doc input:checked + .doc-tick { background: var(--rp-success); border-color: var(--rp-success); }
.doc input:checked + .doc-tick::after { opacity: 1; }
.doc input:focus-visible + .doc-tick { outline: 2.5px solid var(--rp-accent); outline-offset: 3px; }
.doc input:checked ~ .doc-label { color: var(--rp-success-ink); text-decoration: line-through; }

/* ----------------------------------------------- format B: the guide ----- */

.gd-rail { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gd-rail-item {
  position: relative;
  border-radius: var(--rp-r-md);
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  min-width: 0;
  transition: border-color .18s ease, transform .18s ease;
}
.gd-rail-item:hover { border-color: var(--rp-accent); transform: translateY(-2px); }
.gd-rail-btn {
  display: block; width: 100%; text-align: left; min-width: 0;
  padding: 16px 18px; border-radius: inherit;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: inherit;
}
.gd-rail-dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rp-line); margin-bottom: 10px;
}
.gd-rail-n { display: block; font: 600 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rp-faint); }
.gd-rail-t { display: block; margin-top: 5px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.gd-rail-c { display: block; margin-top: 7px; font-size: 12.5px; color: var(--rp-muted); }
.gd-rail-item.is-current { background: var(--rp-dark); border-color: transparent; }
.gd-rail-item.is-current .gd-rail-dot { background: var(--rp-accent); }
.gd-rail-item.is-current .gd-rail-n { color: var(--rp-on-dark-muted); }
.gd-rail-item.is-current .gd-rail-t { color: #fff; }
.gd-rail-item.is-current .gd-rail-c { color: var(--rp-on-dark-muted); }
.gd-rail-item.is-done { background: var(--rp-success-tint); border-color: var(--rp-success); }
.gd-rail-item.is-done .gd-rail-dot { background: var(--rp-success); }
.gd-rail-item.is-done .gd-rail-n { color: var(--rp-success-ink); }
.gd-rail-item.is-done .gd-rail-n::after { content: '\00a0\2713'; }
.gd-rail-item.is-done .gd-rail-c { color: var(--rp-success-ink); }
.gd-rail-item.is-done.is-current { background: var(--rp-dark); border-color: transparent; }
.gd-rail-item.is-done.is-current .gd-rail-n { color: var(--rp-on-dark-muted); }
.gd-rail-item.is-done.is-current .gd-rail-t { color: #fff; }
.gd-rail-item.is-done.is-current .gd-rail-c { color: var(--rp-on-dark-muted); }

.gd-card {
  background: var(--rp-surface); border: 1.5px solid var(--rp-line);
  border-radius: var(--rp-r-lg); box-shadow: var(--rp-shadow);
  padding: clamp(22px, 3.4vw, 38px);
}
.gd-card.is-done { border-color: var(--rp-success); }
.gd-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font-size: 13.5px; color: var(--rp-muted); }
.gd-phase { font-weight: 600; }
.gd-head { display: flex; gap: 18px; align-items: flex-start; margin-top: 16px; }
.gd-title { font-size: clamp(22px, 2.8vw, 30px); }
.gd-title:focus-visible { outline: 2.5px solid var(--rp-accent); outline-offset: 4px; }
.gd-status { margin-top: 10px; }
.gd-card .step-body { color: var(--rp-muted); margin-top: 18px; max-width: 68ch; font-size: 17px; }
.gd-state { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14.5px; color: var(--rp-muted); }
.gd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.gd-complete.is-done { background: var(--rp-success-ink); box-shadow: none; }
.gd-complete.is-done:hover { background: var(--rp-success-ink); }

.gd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1.5px solid var(--rp-line); }
.gd-pager button {
  text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; color: inherit; padding: 10px 12px;
  border-radius: var(--rp-r-md); min-width: 0;
}
.gd-pager button:hover { background: var(--rp-surface-3); }
.gd-pager .gd-next { text-align: right; }
.gd-dir { display: block; font: 600 11.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rp-accent); }
.gd-pager .gd-t { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; }

.gd-jump { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.gd-jump-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0;
  background: var(--rp-bg); border: 1.5px solid var(--rp-line);
  border-radius: var(--rp-r-md); padding: 11px 14px;
  cursor: pointer; font-family: inherit; color: inherit; text-align: left;
}
.gd-jump-btn:hover { border-color: var(--rp-accent); }
.gd-jump-n { font: 700 13px/1 var(--font-display); color: var(--rp-faint); flex: none; }
.gd-jump-t { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-jump-s { margin-left: auto; font: 600 11.5px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rp-success-ink); flex: none; }
.gd-jump-btn.is-done { background: var(--rp-success-tint); border-color: var(--rp-success); }
.gd-jump-btn.is-done .gd-jump-n { color: var(--rp-success-ink); }
.gd-jump-btn.is-current { border-color: var(--rp-dark); border-width: 2px; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 940px) {
  .pg { grid-template-columns: 1fr auto; }
  .pg-track { grid-column: 1 / -1; order: 3; }
  .gd-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* below this the step label and title stop sharing a line comfortably */
  .tl-toggle { flex-wrap: wrap; row-gap: 4px; }
  .tl-step-n { flex: 1 0 100%; }
  .tl-chev { margin-left: auto; }
}
@media (max-width: 720px) {
  .progress-bar-wrap { position: static; }
  .tl-row { grid-template-columns: 1fr; padding: 6px; }
  .tl-state, .tl-done { padding-left: 12px; padding-bottom: 10px; }
  .tl-step { padding-left: 50px; }
  .tl-node { width: 36px; height: 36px; }
  .tl-step::before { left: 17px; }
  .gd-rail { grid-template-columns: 1fr; }
  .gd-pager { grid-template-columns: 1fr; }
  .gd-pager .gd-next { text-align: left; }
  .gd-head { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-fill, .tl-chev { transition: none; }
}


/* ------------------------------------------- progressive enhancement ----- */
/* The steps are in the HTML and readable with JavaScript off. Once JS runs it
   adds .js to <html>, and only then does anything collapse. The tick and
   navigation affordances are hidden without JS, because without the script
   they would look operable and silently do nothing. */

.js .tl-detail { display: none; }
.js .tl-detail.is-open { display: block; }

.js .gd-card { display: none; }
.js .gd-card.is-shown { display: block; }

html:not(.js) .tl-done,
html:not(.js) .pg-track,
html:not(.js) .pg-reset,
html:not(.js) .pg-note,
html:not(.js) .doc-tick,
html:not(.js) .gd-actions,
html:not(.js) .gd-state,
html:not(.js) .gd-pager,
html:not(.js) .gd-rail,
html:not(.js) .gd-jump,
html:not(.js) .tl-chev { display: none; }
html:not(.js) .doc { cursor: default; padding-left: 0; }
html:not(.js) .tl-toggle { cursor: default; }
html:not(.js) .gd-card + .gd-card { margin-top: 18px; }
html:not(.js) .noscript-note { display: block; }
.noscript-note { display: none; }

/* ================================================== demo bar + contents === */
/* The design-navigation bar. Deliberately dark blue: it sits outside the warm
   blush/rose palette so a client reads it as tooling wrapped around the design,
   not as part of it. Its own token block for the same reason — none of the
   --rp-* tokens belong here. */

.demo-bar {
  --dm-bg:      #0E1A2B;
  --dm-surface: #1A2C45;
  --dm-line:    #2A3F5C;
  --dm-text:    #E8F0FA;
  --dm-muted:   #A9BDD8;
  --dm-active:  #2E6FD4;

  background: var(--dm-bg);
  border-bottom: 1px solid var(--dm-line);
}
.demo-bar-inner {
  display: flex; align-items: center; gap: 20px;
  padding: 11px clamp(16px, 2.5vw, 30px);
}

.dm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.dm-mk {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--dm-surface); border: 1px solid var(--dm-line);
  color: var(--dm-text); display: grid; place-items: center;
  font: 700 10.5px/1 var(--font-sans);
}
.dm-brand-t {
  font: 700 13.5px/1.2 var(--font-sans); color: var(--dm-text);
  letter-spacing: -.01em; white-space: nowrap;
}
.dm-brand-t small {
  display: block; margin-top: 3px;
  font: 500 11px/1 var(--font-sans); color: var(--dm-muted); letter-spacing: 0;
}

/* the row of grouped page links; scrolls rather than wrapping, so the bar keeps
   one line and never pushes the design down the page */
.dm-nav {
  display: flex; align-items: center; gap: 20px;
  margin-left: auto; min-width: 0;
  flex-wrap: wrap; row-gap: 8px;
}
.dm-group { display: flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
.dm-label {
  font: 600 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dm-muted); white-space: nowrap;
}
.dm-seg {
  display: flex; gap: 3px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--dm-line); border-radius: 10px; padding: 3px;
}
.dm-seg a {
  font: 600 12.5px/1 var(--font-sans); color: var(--dm-muted);
  text-decoration: none; white-space: nowrap;
  padding: 8px 12px; border-radius: 7px;
  transition: background-color .15s ease, color .15s ease;
}
.dm-seg a:hover { color: var(--dm-text); background: var(--dm-surface); }
.dm-seg a[aria-current] { color: #fff; background: var(--dm-active); }
.demo-bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1100px) {
  .dm-brand-t small { display: none; }
}
@media (max-width: 860px) {
  .demo-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .dm-nav { margin-left: 0; }
}
@media (max-width: 620px) {
  .dm-brand-t { font-size: 12.5px; }
  .dm-label { display: none; }
  .dm-nav { gap: 10px; }
}

.contents-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.contents-grid > * { min-width: 0; }
.contents-item { padding: 26px; text-decoration: none; display: block; }
.contents-n {
  font: 700 13px/1 var(--font-display); letter-spacing: .04em;
  color: var(--rp-accent-2); background: var(--rp-surface-2);
  padding: 7px 10px; border-radius: 8px; display: inline-block;
}
.contents-item h3 { font-size: 21px; margin-top: 16px; }
.contents-item p { color: var(--rp-muted); font-size: 15.5px; margin-top: 10px; }
.contents-item .chip { margin-left: 10px; vertical-align: 2px; }
.contents-item.is-proto { border-color: var(--rp-accent); }

@media (max-width: 720px) {
  .contents-grid { grid-template-columns: 1fr; }
  .demo-bar-nav { margin-left: 0; gap: 14px; }
}


/* --------------------------------------------------- per-phase progress -- */
/* Four segments rather than one long bar. The shape of the control should say
   "four phases of about eight", not "twenty-five things to get through". */

.pg-phases {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.pgp { min-width: 0; }
.pgp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pgp-n {
  font: 600 10.5px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rp-faint);
}
.pgp-c { font: 600 12px/1 var(--font-sans); color: var(--rp-muted); white-space: nowrap; }
.pgp-track {
  display: block; height: 8px; margin-top: 7px;
  border-radius: var(--rp-r-pill); background: var(--rp-surface-3); overflow: hidden;
}
.pgp-fill {
  display: block; height: 100%; width: 0;
  background: var(--rp-success); border-radius: var(--rp-r-pill);
  transition: width .3s ease;
}
.pgp-t {
  display: block; margin-top: 7px; font-size: 12.5px; color: var(--rp-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pgp.is-current .pgp-n { color: var(--rp-accent-2); }
.pgp.is-current .pgp-t { color: var(--rp-text); font-weight: 600; }
.pgp.is-current .pgp-track { box-shadow: 0 0 0 2px var(--rp-surface-2); }
.pgp.is-done .pgp-n { color: var(--rp-success-ink); }
.pgp.is-done .pgp-n::after { content: '\00a0\2713'; }
.pgp.is-done .pgp-c { color: var(--rp-success-ink); }

/* the jump list, grouped into four short lists */
.gd-jump-group + .gd-jump-group { margin-top: 26px; }
.gd-jump-h {
  font-size: 15px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1.5px solid var(--rp-line);
}
.gd-jump-hc { font: 600 12.5px/1 var(--font-sans); color: var(--rp-muted); }
.gd-jump-hc.is-done { color: var(--rp-success-ink); }

@media (max-width: 860px) { .pg-phases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pg-phases { grid-template-columns: 1fr; } }

/* the phase bar is state, and state needs the script */
html:not(.js) .pg-phases { display: none; }