/* ==========================================================================
   CheckPeps — marketing site styles
   Single stylesheet, no preprocessor, no framework, no @import (no extra RTT).
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg-subtle: #f5f8f9;
  --bg-raised: #ffffff;
  --border: #dde5e8;
  --border-strong: #bfcbd1;

  --text: #0e1b21;
  --text-muted: #4a5c66;

  --accent: #0f6b6b;
  --accent-hover: #0b5252;
  --accent-fg: #ffffff;
  --accent-subtle: #e7f1f1;

  --flag: #7a4400;
  --flag-subtle: #fdf4e8;
  --flag-border: #f0dcc0;

  --stop: #8c2f2f;
  --stop-subtle: #fbeeee;
  --stop-border: #f0d4d4;

  --shadow: 0 1px 2px rgb(14 27 33 / 6%), 0 8px 24px -12px rgb(14 27 33 / 18%);

  /* Deep full-bleed blocks. Always paired with --on-deep text. */
  --deep: #0d3b40;
  --deep-raised: #14494f;
  --deep-border: #235a60;
  --on-deep: #ffffff;
  --on-deep-muted: #b9d4d6;
  --accent-on-deep: #7fd8ce;

  --radius: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --measure: 68ch;
  --page: 1200px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.25rem + 0.7vw, 1.9rem);
  /* Section headings run nearly as large as the h1 — that near-parity is a big
     part of the editorial feel, and 40px was reading as a subhead. */
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1418;
    --bg-subtle: #101d22;
    --bg-raised: #13232a;
    --border: #223740;
    --border-strong: #35505c;

    --text: #e8eef1;
    --text-muted: #9fb0b8;

    --accent: #5ec8bf;
    --accent-hover: #85dad3;
    --accent-fg: #04211e;
    --accent-subtle: #12312f;

    --flag: #e8b478;
    --flag-subtle: #241b0f;
    --flag-border: #3d2e18;

    --stop: #e79b9b;
    --stop-subtle: #251314;
    --stop-border: #3f2122;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 70%);

    /* Lifted, not deepened: #0d3b40 sits too close to the dark page background
       to read as a distinct block. */
    --deep: #10474e;
    --deep-raised: #17565d;
    --deep-border: #2a6b72;
    --on-deep: #f2f8f8;
    --on-deep-muted: #a9c7ca;
    --accent-on-deep: #7fd8ce;
  }
}

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display type is light and tightly led — that pairing is what reads as modern.
   Card and UI headings stay heavier, because 430 at 18px reads as weak rather
   than editorial. */
h1,
h2,
h3,
h4 {
  margin: 0;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1,
h2 {
  font-weight: 430;
  line-height: 1.03;
}

h3,
h4 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  /* `balance` evens the line lengths, which shatters a short card heading into
     three stacked fragments. `pretty` only fixes orphans. */
  text-wrap: pretty;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p,
ul,
ol,
dl {
  margin: 0;
}

p { text-wrap: pretty; }

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

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

a:hover { color: var(--accent-hover); }

ul, ol { padding-left: 1.25em; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* --- Focus & motion ------------------------------------------------------ */

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

/* Never remove the ring; only tune where the default hugs the box awkwardly. */
.btn:focus-visible,
.chip:focus-visible {
  outline-offset: 4px;
}

/* Windows High Contrast and friends override every author background and
   colour. Anything whose meaning was carried by a fill — the primary button,
   the boundary chips, the numbered badges, the tinted does/does-not panels —
   loses its shape unless it also has a real edge. `transparent` stays
   transparent when forced, so those borders must be made explicit here. */
@media (forced-colors: active) {
  .btn,
  .chip,
  .flow__num,
  .step__num {
    border: 1px solid currentColor;
  }

  .card,
  .callout,
  .panel,
  .hero__panel {
    border: 1px solid CanvasText;
  }

  /* Decorative connector between flow steps; a forced background would drop it. */
  .flow__step:not(:last-child)::before {
    background: CanvasText;
  }

  /* The ring must not depend on a brand token that no longer renders. */
  :focus-visible {
    outline-color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Utilities ----------------------------------------------------------- */

/* `fixed`, not `absolute`: an absolutely-positioned skip link scrolls away with
   the document, so focusing it after any scroll reveals nothing. */
.skip-link {
  position: fixed;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 120ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--accent-fg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

.prose > * + * { margin-top: 1.1em; }

.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose li + li { margin-top: 0.4em; }

/* `.wrap.prose` collapsed the container itself to the measure and then centred
   it, so body copy floated mid-page while the page-head above stayed left
   aligned at the gutter. Keep the wrap's box and cap the children instead, so
   both share a left edge. */
.wrap.prose {
  max-width: var(--page);
}

.wrap.prose > * {
  max-width: var(--measure);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.lede {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 56ch;
}

.muted { color: var(--text-muted); }

/* Generous by design. Compact sections are what made this read as a document
   rather than a site; each block should own the screen it sits on. */
.section {
  padding-block: clamp(4.5rem, 11vw, 9rem);
}

.section--subtle {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border);
}

/* Deep, inset, rounded block — the one section allowed to be loud. Inset by the
   gutter rather than full-bleed, so the corner radius is actually visible. */
.section--feature {
  margin-inline: var(--gutter);
  /* Without vertical separation an inset block reads as a full-bleed stripe and
     the corner radius stops doing any work. */
  margin-block: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--deep);
  color: var(--on-deep);
}

.section--feature h2,
.section--feature h3,
.section--feature .callout__title {
  color: var(--on-deep);
}

.section--feature .eyebrow {
  color: var(--accent-on-deep);
}

.section--feature .lede,
.section--feature .card p,
.section--feature .callout p {
  color: var(--on-deep-muted);
}

.section--feature .card,
.section--feature .callout {
  background: var(--deep-raised);
  border-color: var(--deep-border);
}

.section--feature .callout {
  border-left-color: var(--accent-on-deep);
}

.section--feature a {
  color: var(--accent-on-deep);
}

/* Four abreast makes each card too narrow for its heading. Two-up gives the
   headings a single line and suits the block's weight. */
@media (min-width: 900px) {
  .section--feature .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.section--feature :focus-visible {
  outline-color: var(--accent-on-deep);
}

.section__head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head > * + * { margin-top: 0.85rem; }

/* At width, a single narrow column of heading text leaves the right half of
   every section empty. Set the heading against its lede instead, which uses the
   measure and reads as deliberate rather than unfinished. */
@media (min-width: 900px) {
  .section__head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 1rem;
    align-items: end;
  }

  .section__head > * + * { margin-top: 0; }

  .section__head .eyebrow { grid-column: 1 / -1; }

  .section__head .lede { max-width: 46ch; }

  /* Nothing to put in the second column, so don't open one. */
  .section__head:not(:has(.lede)) {
    display: block;
    max-width: 60ch;
  }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease,
    color 140ms ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--text-muted);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --- Header -------------------------------------------------------------- */

/* Dark chrome throughout, so the header reads as part of the masthead on the
   home page and as deliberate site furniture everywhere else. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--deep) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--deep-border);
  color: var(--on-deep);
}

.site-header .brand,
.site-header .brand:hover { color: var(--on-deep); }

.site-header .nav__link { color: var(--on-deep-muted); }

.site-header .nav__link:hover {
  color: var(--on-deep);
  background: color-mix(in srgb, var(--on-deep) 10%, transparent);
}

.site-header .nav__link[aria-current="page"] {
  color: var(--deep);
  background: var(--accent-on-deep);
}

.site-header .nav__toggle {
  color: var(--on-deep);
  border-color: color-mix(in srgb, var(--on-deep) 40%, transparent);
}

.site-header :focus-visible { outline-color: var(--accent-on-deep); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 680;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.brand:hover { color: var(--text); }

.brand svg { flex: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.9375rem;
}

.nav__link:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.nav__link[aria-current="page"] {
  color: var(--text);
  background: var(--accent-subtle);
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

/* Above the breakpoint the nav is always shown. This overrides the UA
   stylesheet's `[hidden] { display: none }`, so the desktop nav can never be
   left hidden by a stale `hidden` attribute set while the viewport was narrow —
   it does not depend on the resize listener firing, or on JS running at all. */
@media (min-width: 861px) {
  .nav[hidden] { display: block; }
}

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }

  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--deep);
    border-bottom: 1px solid var(--deep-border);
    box-shadow: var(--shadow);
    padding: 0.5rem var(--gutter) 1rem;
  }

  .nav[hidden] { display: none; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .nav__link {
    padding: 0.75rem 0.75rem;
    font-size: 1rem;
  }
}

/* --- Hero ---------------------------------------------------------------- */

/* The masthead is one continuous deep field, header included, so the opening
   screen reads as an immersive block rather than a document header over paper.
   White-on-deep is the single biggest reason an editorial site feels editorial. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  background: var(--deep);
  color: var(--on-deep);
}

.hero .lede,
.hero .boundaries__label,
.hero .flow__desc,
.hero .panel__title {
  color: var(--on-deep-muted);
}

.hero .eyebrow { color: var(--accent-on-deep); }

.hero .boundaries { border-top-color: var(--deep-border); }

/* Panel lifts off the field rather than sitting on paper. */
.hero .hero__panel {
  background: var(--deep-raised);
  border-color: var(--deep-border);
  box-shadow: none;
}

.hero .flow__name { color: var(--on-deep); }

.hero .flow__num {
  background: transparent;
  border-color: var(--accent-on-deep);
  color: var(--accent-on-deep);
}

.hero .flow__step--terminal .flow__num {
  background: var(--accent-on-deep);
  color: var(--deep);
}

.hero .flow__step:not(:last-child)::before { background: var(--deep-border); }

/* Boundary chips need a light red to clear contrast on the deep field. */
/* A light tint behind the chip raised its base and cost ~1.5:1 of contrast.
   Backing it with the deep instead darkens the base and buys it back. */
.hero .chip {
  background: color-mix(in srgb, var(--deep) 62%, transparent);
  border-color: color-mix(in srgb, #ffb3b3 42%, transparent);
  color: #ffb3b3;
}

/* Inverted buttons: a teal fill would sit too close to the field behind it. */
.hero .btn--primary {
  background: var(--on-deep);
  color: var(--deep);
}

.hero .btn--primary:hover {
  background: var(--accent-on-deep);
  color: var(--deep);
}

.hero .btn--secondary {
  color: var(--on-deep);
  border-color: color-mix(in srgb, var(--on-deep) 45%, transparent);
}

.hero .btn--secondary:hover {
  background: color-mix(in srgb, var(--on-deep) 12%, transparent);
  color: var(--on-deep);
  border-color: var(--on-deep);
}

.hero :focus-visible { outline-color: var(--accent-on-deep); }

/* Stands in for the photography an editorial site would open with: a soft field
   of brand colour so the first screen is not flat white. If real art arrives,
   this is the layer it replaces. */
/* z-index 0 with the content lifted to 1, rather than a negative index behind
   the hero. A negative-index child interacts badly with the parent's own
   background and rendered nothing at all. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}

/* Guarantees copy contrast no matter what the art behind it does. Strongest at
   the left where the headline sits, thinning out to let the image show. Do not
   remove this when swapping in different art — it is the only thing keeping the
   hero text legible. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    /* Hold near-opaque across the copy column, then release quickly so the art
       reads at close to full strength on the right. A gentle slope across the
       whole width cannot do both: it either washes out the art or lets the
       glow bleed under the text. */
    color-mix(in srgb, var(--deep) 98%, transparent) 0%,
    color-mix(in srgb, var(--deep) 96%, transparent) 55%,
    color-mix(in srgb, var(--deep) 45%, transparent) 73%,
    transparent 90%
  );
}

/* Below the two-column breakpoint the copy spans the whole box, so it crosses
   the gradient's release point and lands on unveiled art — measured at 1.3:1.
   There is no room for the art to read at this width anyway, so the overlay
   goes flat and strong and the art survives only as texture. */
@media (max-width: 899px) {
  .hero__media::after {
    background: color-mix(in srgb, var(--deep) 93%, transparent);
  }
}

/* The glow pseudo-element is gone: the art supplies the atmosphere now, and
   keeping it meant another layer sitting over the image. */

.hero__grid {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

/* Single column now. The right side of the hero is the art, which is the whole
   point of having art. */
.hero__copy {
  max-width: 40rem;
}

@media (min-width: 900px) {
  .hero {
    min-height: min(84vh, 780px);
    display: grid;
    align-items: center;
  }
}

/* The flow panel keeps its light-card styling once outside the hero. */
.flow-section {
  display: grid;
  justify-items: center;
}

.flow-section .hero__panel {
  width: 100%;
  max-width: 46rem;
}

.hero__copy > * + * { margin-top: 1.15rem; }

/* Break at the sentence, never inside it — the headline's whole job is the
   contrast between the two clauses, which a mid-sentence wrap destroys. */
.hero h1 { max-width: 22ch; }

.hero h1 span { display: block; }

/* On the deep masthead this must be the light mint, not the dark brand teal —
   #0f6b6b on #0d3b40 is very nearly invisible. */
.hero h1 span + span { color: var(--accent-on-deep); }

.hero .btn-row { margin-top: 1.75rem; }

/* Boundary strip: the "what it does NOT do" answer, above the fold. */
.boundaries {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.boundaries__label {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  background: var(--stop-subtle);
  border: 1px solid var(--stop-border);
  border-radius: 999px;
  color: var(--stop);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip svg { flex: none; }

/* --- Flow diagram (inline SVG, no image request) ------------------------- */

.hero__panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.panel__title {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.flow__step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0.85rem;
  padding-bottom: 1.1rem;
  position: relative;
}

.flow__step:last-child { padding-bottom: 0; }

/* Connector line between steps. */
.flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}

.flow__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.flow__step--terminal .flow__num {
  background: var(--accent);
  color: var(--accent-fg);
}

.flow__body > * + * { margin-top: 0.15rem; }

.flow__name {
  font-weight: 640;
  font-size: 0.9875rem;
  letter-spacing: -0.01em;
}

.flow__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Cards --------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}

.card > * + * { margin-top: 0.6rem; }

.card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--accent-subtle);
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.card h3 {
  font-size: var(--step-1);
  letter-spacing: -0.015em;
}

.card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* --- Steps (how it works) ------------------------------------------------ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  counter-reset: step;
}

@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.step {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  counter-increment: step;
}

.step > * + * { margin-top: 0.55rem; }

.step__num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

.step h3 { font-size: var(--step-1); }

.step p {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* --- Two-column "does / does not" --------------------------------------- */

.split {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 820px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.panel--does {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--accent-subtle);
}

.panel--does-not {
  border-color: var(--stop-border);
  background: var(--stop-subtle);
}

.panel__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step-2);
  margin-bottom: 1.1rem;
}

.panel--does .panel__heading { color: var(--accent); }
.panel--does-not .panel__heading { color: var(--stop); }

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.checklist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.checklist svg {
  margin-top: 0.28em;
  flex: none;
}

.panel--does .checklist svg { color: var(--accent); }
.panel--does-not .checklist svg { color: var(--stop); }

.panel__note {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* --- Callouts ------------------------------------------------------------ */

.callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: 1.1rem 1.25rem;
}

.callout > * + * { margin-top: 0.5rem; }

.callout__title {
  font-weight: 650;
  font-size: 0.9375rem;
}

.callout p {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.callout--pending {
  border-left-color: var(--flag);
  background: var(--flag-subtle);
  border-color: var(--flag-border);
}

.callout--pending .callout__title { color: var(--flag); }

/* Placeholder marker for copy awaiting team review. */
.pending-tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px dashed var(--flag);
  border-radius: 6px;
  background: var(--flag-subtle);
  color: var(--flag);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- CTA ----------------------------------------------------------------- */

.cta {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}

.cta .lede { margin-inline: auto; }

.cta .btn-row { justify-content: center; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
}

.footer__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.footer__blurb {
  color: var(--text-muted);
  max-width: 42ch;
  margin-top: 0.85rem;
  font-size: 0.9375rem;
}

.footer__heading {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.85rem;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

/* inline-block + padding lifts these off a 20px line box to clear the 24px
   minimum target size (WCAG 2.2 SC 2.5.8). */
.footer__list a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--text-muted);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer__pending {
  font-size: 0.75rem;
  color: var(--flag);
  font-weight: 600;
  white-space: nowrap;
}

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.footer__bottom > * + * { margin-top: 0.75rem; }

.footer__disclaimer {
  max-width: 78ch;
}

/* --- Policy pages -------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
}

.page-head > * + * { margin-top: 0.85rem; }

.breadcrumb {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* inline-block + padding clears the 24px minimum target size. */
.breadcrumb a {
  display: inline-block;
  padding-block: 0.2rem;
  text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }

/* A list that is navigation rather than prose: each row is a target in its own
   right, so it does not get the inline-text exemption from SC 2.5.8. */
.link-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0.35rem;
}

.link-list a {
  display: inline-block;
  padding-block: 0.35rem;
}

.doc {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.doc__meta {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.doc dl { display: grid; gap: 1.25rem; }

.doc dt {
  font-weight: 650;
  color: var(--text);
}

.doc dd {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header,
  .nav__toggle,
  .skip-link,
  .btn-row { display: none !important; }

  body { background: #fff; color: #000; }
}