/* myworkbrain.org — companion site
   Tokens mirror the extension's design/tokens.json. Keep them in sync: the
   whole point of this site is that it reads as the same software as the app. */

:root {
  --canvas: #ffffff;
  --ground: #f6f7f9;
  --sunken: #edeff3;
  --ink: #15181d;
  --ink-2: #525a67;
  --ink-3: #646c7b;
  --ink-inv: #ffffff;
  --divider: #e2e5ea;
  --border: #d4d8e0;
  --border-i: #8a92a0;
  --primary: #2a4fcb;
  --primary-hover: #1f3fa8;
  --primary-tint: #eaeefb;
  --violet: #6a3fd1;
  --violet-hover: #5a35b4;
  --violet-tint: #f2edfd;
  --amber: #8a5300;
  --amber-tint: #fff4e2;
  --amber-line: #e8a33d;
  --green: #0b6e4f;
  --green-tint: #e7f5ef;
  --danger: #b4231e;
  --danger-tint: #fdecea;
  --home-context: #09759e;
  --home-context-deep: #0b6379;
  --home-context-tint: #e2f3f9;
  --home-skills: #2c5ce5;
  --home-skills-deep: #2549c0;
  --home-skills-tint: #e9eefd;
  --civics: #177a4c;
  --civics-deep: #0f5c38;
  --civics-tint: #e7f5ec;
  --splash-field: #070a12;
  --globe-label: #e8edf9;
  --globe-detail-key: #a6b6dc;

  /* WS5 (2026-09-30): type and ground land together, so Inter arrives with
     the dark world. The deck sets every headline in Inter 800 at -.035em,
     and when Slop Shots moved into the deck's language the PALETTE never
     changed — the type carried nearly the whole difference in feel. The
     system stack stays as the fallback, so a blocked font request degrades
     to exactly what the site looked like yesterday. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --e-1: 0 1px 2px rgba(21, 24, 29, 0.06);
  --e-2: 0 4px 12px rgba(21, 24, 29, 0.08), 0 1px 3px rgba(21, 24, 29, 0.06);
  --e-3: 0 16px 40px rgba(21, 24, 29, 0.14), 0 2px 8px rgba(21, 24, 29, 0.08);

  --fast: 120ms;
  --base: 200ms;
  --slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --target-min: 44px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  color: var(--primary-hover);
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── The scroll field and its veil ─────────────────────────────────────── */

#field,
#veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#field {
  z-index: 0;
  width: 100%;
  height: 100%;
}
#veil {
  z-index: 1;
  background: radial-gradient(
    120% 90% at 50% 0%,
    color-mix(in srgb, var(--ground) 80%, transparent) 0%,
    color-mix(in srgb, var(--ground) 36%, transparent) 45%,
    color-mix(in srgb, var(--ground) 66%, transparent) 100%
  );
}

main,
.site-foot {
  position: relative;
  z-index: 10;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border-bottom: 1px solid var(--divider);
}

.hdr-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}
.brand-name {
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.02em;
}
.brand-by {
  font-size: 13px;
  font-weight: 450;
  color: var(--ink-3);
}

.nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-2);
  cursor: pointer;
}
.nav-btn:hover {
  color: var(--ink);
}
.nav-btn[aria-current='page'] {
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: 650;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-lg);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}
.btn--lg {
  height: 52px;
  padding: 0 26px;
  font-size: 16px;
}
.btn--sm {
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: 13.5px;
}
.btn--xs {
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
}
.btn--full {
  width: 100%;
}

.btn--primary {
  background: var(--primary);
  color: var(--ink-inv);
  box-shadow: var(--e-2);
}
.btn--primary:hover {
  background: var(--primary-hover);
  color: var(--ink-inv);
}

.btn--ghost {
  background: var(--canvas);
  border: 1px solid var(--border-i);
  color: var(--ink);
  font-weight: 600;
}
.btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn--violet {
  background: var(--violet);
  color: var(--ink-inv);
  box-shadow: var(--e-2);
}
.btn--violet:hover {
  background: var(--violet-hover);
  color: var(--ink-inv);
}

.btn--aqua {
  background: var(--home-context);
  color: var(--ink-inv);
  box-shadow: var(--e-2);
}
.btn--aqua:hover {
  background: var(--home-context-deep);
  color: var(--ink-inv);
}

.btn--dark {
  background: var(--ink);
  color: var(--ink-inv);
}
.btn--dark:hover {
  background: var(--primary);
  color: var(--ink-inv);
}

.btn--link {
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.btn--link:hover {
  color: var(--primary-hover);
}

/* The free thing gets the loudest button in the system: the primary blue
   carrying its own coloured glow rather than the neutral elevation, the
   product mark in a white chip, and a lift that settles on press. */
.btn--chrome {
  gap: 11px;
  background: var(--primary);
  color: var(--ink-inv);
  font-weight: 660;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 40px rgba(42, 79, 203, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
    background var(--fast) var(--ease);
}
.btn--chrome:hover {
  background: var(--primary-hover);
  color: var(--ink-inv);
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(42, 79, 203, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--chrome:active {
  transform: translateY(0);
}
.btn--chrome.btn--lg {
  height: 56px;
  padding: 0 28px;
  font-size: 16.5px;
}
.btn--chrome.btn--hero {
  height: 60px;
  padding: 0 30px;
  border-radius: 16px;
  font-size: 17.5px;
}

.mark-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--canvas);
}
.btn--hero .mark-chip {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
.nav-chrome {
  gap: 7px;
  height: 38px;
  padding: 0 8px 0 16px;
  margin-left: 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--ink-inv);
  font-size: 13.5px;
  font-weight: 650;
  box-shadow: 0 6px 16px rgba(42, 79, 203, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background var(--fast) var(--ease), box-shadow var(--base) var(--ease);
}
.nav-chrome:hover {
  background: var(--primary-hover);
  box-shadow: 0 8px 22px rgba(42, 79, 203, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.nav-chrome .mark-chip {
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
}

/* ── Type ──────────────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow--ctx {
  color: var(--home-context);
}
.eyebrow--skills {
  color: var(--home-skills);
}
.eyebrow--violet {
  color: var(--violet);
}
.eyebrow--danger {
  color: var(--danger);
}
.eyebrow--quiet {
  color: var(--ink-3);
}

.h-hero {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(44px, 7.2vw, 92px);
  line-height: 0.98;
  font-weight: 680;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h-hero .tail {
  /* READS THE TOKENS so it follows the world. It hardcoded the three light
     accents, which on the dark ground rendered a near-black headline on a
     near-black page — the single worst thing the flip produced. */
  background: linear-gradient(96deg, var(--primary) 0%, var(--home-context) 42%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h-page {
  margin: 14px 0 0;
  max-width: 24ch;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.03;
  font-weight: 680;
  letter-spacing: -0.03em;
}
.h-sect {
  margin: 14px 0 0;
  max-width: 26ch;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.06;
  font-weight: 680;
  letter-spacing: -0.028em;
}

/* Description text spans the content width. No arbitrary measure caps —
   if a paragraph should return early, give it its own class. */
.lead {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.lead--big {
  font-size: 19px;
  line-height: 1.55;
}

.h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -0.02em;
}
.h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 660;
}

.body {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.fine {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Hashtag tags ──────────────────────────────────────────────────────── */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 11px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--canvas) 80%, transparent);
  border: 1px solid var(--divider);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag i {
  color: var(--primary);
  font-style: normal;
}

/* ── Layout helpers ────────────────────────────────────────────────────── */

.page {
  padding-top: 76px;
  padding-bottom: 110px;
}
.page--hero {
  padding-top: 52px;
  /* 5l: the doors follow on a natural scroll, not after a chasm. */
  padding-bottom: 44px;
}
.band {
  padding-top: 96px;
  padding-bottom: 120px;
}

.grid {
  display: grid;
  gap: 16px;
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.grid--paper {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
  gap: 44px;
  align-items: start;
}
.grid--svc {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
  gap: 24px;
  align-items: start;
}
.grid--split {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
}
.top {
  align-items: start;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-38 {
  margin-top: 38px;
}
.push {
  margin-left: auto;
}
.grow {
  flex: 1;
  min-width: 0;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--e-1);
}
.card--pad {
  padding: 26px;
}
.card--flat {
  box-shadow: none;
}
.card--hi {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 3px var(--primary-tint),
    var(--e-2);
}
.card--violet-hi {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--violet), 0 0 0 4px var(--violet-tint),
    var(--e-3);
}
.card--aqua {
  background: rgba(9, 117, 158, 0.06);
  border-color: rgba(9, 117, 158, 0.55);
  box-shadow: none;
}
.card--sticky {
  position: sticky;
  top: 88px;
  box-shadow: var(--e-2);
}
.card--danger {
  background: var(--danger-tint);
  border-color: rgba(180, 35, 30, 0.35);
  box-shadow: none;
  padding: 20px 22px;
}

/* Door cards — the three on Home. Faint accent tint, accent edge, lift on
   hover; the accent dresses the card and never carries a state. */
.door {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  min-height: 212px;
  border-radius: var(--r-lg);
  border: 1px solid var(--divider);
  background: var(--canvas);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--e-1);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.door-name {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 660;
  letter-spacing: -0.02em;
}
.door-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.door-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 650;
}
.door--ctx {
  border-color: rgba(9, 117, 158, 0.6);
  background: rgba(9, 117, 158, 0.06);
}
.door--ctx:hover {
  background: rgba(9, 117, 158, 0.12);
  border-color: var(--home-context);
}
.door--ctx .door-go {
  color: var(--home-context-deep);
}
.door--skills {
  border-color: rgba(44, 92, 229, 0.7);
  background: rgba(44, 92, 229, 0.06);
}
.door--skills:hover {
  background: rgba(44, 92, 229, 0.12);
  border-color: var(--home-skills);
}
.door--skills .door-go {
  color: var(--home-skills-deep);
}
.door--violet {
  border-color: rgba(106, 63, 209, 0.6);
  background: rgba(106, 63, 209, 0.06);
}
.door--violet:hover {
  background: rgba(106, 63, 209, 0.12);
  border-color: var(--violet);
}
.door--violet .door-go {
  color: var(--violet-hover);
}

.chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.chip--ctx {
  background: var(--home-context-tint);
}
.chip--skills {
  background: var(--home-skills-tint);
}
.chip--violet {
  background: var(--violet-tint);
  color: var(--violet);
}
.chip--step {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
.chip--step-skills {
  background: var(--home-skills-tint);
  color: var(--home-skills);
}

/* ── Pills, ticks, meters ──────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}
.pill--green {
  color: var(--green);
  background: var(--green-tint);
}
.pill--amber {
  color: var(--amber);
  background: var(--amber-tint);
  border: 1px solid var(--amber-line);
}
.pill--grey {
  color: var(--ink-3);
  background: var(--sunken);
}
.pill--violet {
  color: #5b32b0;
  background: var(--violet-tint);
  border: 1px solid rgba(106, 63, 209, 0.4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
}
.pill--badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* A BARE .pill--badge had a colour and no background — the variants below
     supplied one and anything using the base class alone rendered --ink-inv
     on the card beneath it. Invisible in the dark world, and nearly so in the
     light one. It gets its own fill now, built from --ink/--canvas so it
     inverts with the world: a dark pill with light text, or the reverse. */
  background: var(--ink);
  color: var(--canvas);
  padding: 4px 9px;
}
.pill--badge-violet {
  background: var(--violet);
}
.pill--badge-aqua {
  background: var(--home-context);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.live {
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.tick {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.tick svg {
  flex: none;
  margin-top: 2px;
}
.tick strong {
  font-weight: 650;
}

.meter {
  height: 6px;
  border-radius: 3px;
  background: var(--sunken);
  margin-top: 12px;
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--green);
}

.figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.figure b {
  font-size: 46px;
  font-weight: 680;
  letter-spacing: -0.03em;
}
.figure span {
  font-size: 15px;
  color: var(--ink-3);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.price b {
  font-size: 40px;
  font-weight: 680;
  letter-spacing: -0.03em;
}
.price span {
  font-size: 15px;
  color: var(--ink-3);
}

/* ── Definition rows (file anatomy, amendment table) ───────────────────── */

.deflist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 16px;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  overflow: hidden;
}
.defrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--canvas);
}
.defrow:nth-child(odd) {
  background: var(--ground);
}
.defrow dt {
  margin: 0;
  min-width: 96px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--home-context);
}
.defrow dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.defrow--wide {
  display: grid;
  grid-template-columns: minmax(130px, 0.5fr) 1fr;
  gap: 16px;
  padding: 14px 16px;
}
.defrow--wide dt {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.defrow--wide dd {
  font-size: 14px;
  line-height: 1.5;
}

/* ── Search + filters ──────────────────────────────────────────────────── */

.search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--target-min);
  padding: 0 14px;
  background: var(--canvas);
  border: 1px solid var(--border-i);
  border-radius: 12px;
}
.search input {
  flex: 1;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--target-min);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
}
.filter[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inv);
  font-weight: 600;
}
.filter--violet {
  background: var(--violet-tint);
  border-color: rgba(106, 63, 209, 0.5);
  color: #5b32b0;
  font-weight: 600;
}

.field {
  height: var(--target-min);
  padding: 0 14px;
  border: 1px solid var(--border-i);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--canvas);
}

/* ── Proving Grounds ───────────────────────────────────────────────────── */

.modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--canvas) 80%, transparent);
  border: 1px solid var(--border);
  width: fit-content;
}
.mode {
  display: block;
  min-width: 150px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.mode[aria-pressed='true'] {
  background: var(--ink);
  color: var(--ink-inv);
}
.mode b {
  display: block;
  font-size: 14px;
  font-weight: 650;
}
.mode span {
  display: block;
  font-size: 11.5px;
  opacity: 0.78;
}

.pick {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pick[aria-pressed='true'] {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--home-skills), 0 0 0 3px var(--home-skills-tint);
}
.pick-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pick-name {
  font-size: 14.5px;
  font-weight: 650;
}
.pick-tag {
  display: block;
  margin-top: 5px;
  padding-left: 26px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.radio {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #7c8494;
}
.pick[aria-pressed='true'] .radio {
  border: 5px solid var(--home-skills);
}

.quote {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--ground);
  border: 1px solid var(--divider);
  border-left: 3px solid var(--home-skills);
}
.quote p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.quote footer {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.quote--law {
  margin: 32px 0 0;
  padding: 26px 28px;
  border-radius: var(--r-lg);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-left: 4px solid var(--danger);
}
.quote--law p {
  font-size: 19px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.quote--law footer {
  margin-top: 12px;
  font-size: 13px;
}

.edit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
}
.edit--missing {
  background: var(--primary-tint);
}
.edit--unsure {
  background: var(--amber-tint);
}
.edit--used {
  background: var(--green-tint);
}
.edit-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-inv);
  border-radius: var(--r-pill);
  padding: 4px 9px;
}
.edit--missing .edit-tag {
  background: var(--primary);
}
.edit--unsure .edit-tag {
  background: var(--amber);
}
.edit--used .edit-tag {
  background: var(--green);
}
.edit-text {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.crit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.crit--ok {
  background: var(--green-tint);
}
.crit--no {
  background: var(--amber-tint);
}
.crit-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-inv);
}
.crit--ok .crit-badge {
  background: var(--green);
}
.crit--no .crit-badge {
  background: var(--amber);
}

.answer {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.answer--hi {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 3px var(--primary-tint);
}
.answer--skills {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--home-skills), 0 0 0 3px var(--home-skills-tint);
}
.answer-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.answer p {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.answer--hi p,
.answer--skills p {
  color: var(--ink);
}

.dropzone {
  margin-top: 14px;
  padding: 22px;
  text-align: center;
  border: 1.5px dashed var(--border-i);
  border-radius: 12px;
  background: var(--ground);
}

.queue {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink-2);
}
.queue--ctx {
  background: rgba(9, 117, 158, 0.08);
  border: 1px solid rgba(9, 117, 158, 0.4);
}
.queue--skill {
  background: rgba(44, 92, 229, 0.07);
  border: 1px solid rgba(44, 92, 229, 0.4);
}
.queue--none {
  background: var(--ground);
  border: 1px solid var(--divider);
  color: var(--ink-3);
}

.reveal {
  animation: rise var(--slow) var(--ease);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ── White paper cover ─────────────────────────────────────────────────── */

.cover {
  position: relative;
  height: 224px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--splash-field);
  box-shadow: inset 0 0 0 1px rgba(163, 182, 220, 0.22);
}
.cover canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cover-plate {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.cover-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--globe-detail-key);
}
.cover-title {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 660;
  letter-spacing: -0.02em;
  color: var(--ink-inv);
}
.cover-ver {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--globe-label);
  background: rgba(232, 237, 249, 0.14);
  border-radius: var(--r-sm);
  padding: 3px 7px;
}

.specs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
}
.spec {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.spec dt {
  margin: 0;
  color: var(--ink-3);
}
.spec dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.abstract {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}
.abstract p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.abstract p:first-child {
  color: var(--ink);
}
.contents {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.contents li {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.label-sm {
  margin: 40px 0 0;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Booking ───────────────────────────────────────────────────────────── */

.slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.slot {
  height: var(--target-min);
  border-radius: var(--r-md);
  background: var(--canvas);
  border: 1px solid var(--border-i);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.slot:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.slot[aria-pressed='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--ink-inv);
  font-weight: 650;
}
.slot:disabled {
  background: var(--ground);
  border-color: var(--divider);
  color: var(--ink-3);
  cursor: not-allowed;
  font-weight: 400;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--ground) 90%, transparent);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
  padding-top: 44px;
  padding-bottom: 52px;
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  flex: 1;
  min-width: 320px;
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}
.foot-col a,
.foot-col button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.foot-col a:hover,
.foot-col button:hover {
  color: var(--primary);
}
.foot-promise {
  margin: 12px 0 0;
  max-width: 32ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ── Pages are swapped by the router ───────────────────────────────────── */

[data-page][hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 720px) {
  .wrap {
    padding: 0 20px;
  }
  .grid--paper,
  .grid--svc,
  .grid--split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .card--sticky {
    position: static;
  }
}

/* ── How-it-works refinements (Adam, 2026-09-09, annotated screenshot) ── */

/* Less air between the nav and the page's own opening. */
.page[data-page='how-it-works'] {
  padding-top: 26px;
}

/* The four moves as a FLOWING TIMELINE: one gradient line running through
   numbered nodes, the copy hanging open beneath - no boxes. */
.flowline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.flowline::before {
  content: '';
  position: absolute;
  /* 5g: the line runs BELOW the icons - they stand above it, each on a
     short stem, emerging rather than threaded. */
  top: 76px;
  left: calc(12.5% - 17px);
  right: calc(12.5% - 17px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2ed6f0, #3e7bfa, #b36bff);
  opacity: 0.55;
}
.flowline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.flowline-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 5h: no disc - the icon stands bare, and the GLOW comes off its own
     edges in the hue its stem carries down to the line (drop-shadow
     follows the drawing's alpha, not a box). */
  width: 62px;
  height: 62px;
}
.flowline-node svg {
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--node-a, #2ed6f0) 75%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--node-b, #b36bff) 45%, transparent));
}
/* Each node is coloured at ITS point along the line - the same journey the
   track paints, sampled where the icon emerges. */
.flowline-step:nth-child(1) { --node-a: #2ed6f0; --node-b: #35acf3; }
.flowline-step:nth-child(2) { --node-a: #38a5f4; --node-b: #3e7bfa; }
.flowline-step:nth-child(3) { --node-a: #5e77fa; --node-b: #8a70fc; }
.flowline-step:nth-child(4) { --node-a: #9a6efc; --node-b: #b36bff; }
/* The stem: each icon reaches down to the line in its own hue. */
.flowline-node::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--node-a, #2ed6f0), var(--node-b, #b36bff));
  opacity: 0.7;
}
.flowline-title {
  margin-top: 30px;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.flowline-step .body {
  margin-top: 6px;
  font-size: 14px;
}
@media (max-width: 820px) {
  .flowline {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .flowline::before {
    top: 31px;
    bottom: 31px;
    left: 30px;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #2ed6f0, #3e7bfa, #b36bff);
  }
  /* Vertical: the stems stand down with the line beside the icons. */
  .flowline-node::after {
    display: none;
  }
  .flowline-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }
  .flowline-node {
    flex: none;
  }
  .flowline-step > div,
  .flowline-title {
    margin-top: 0;
  }
}

/* The file table opens - each row is a real button hiding one example. */
.defrow--btn .defterm {
  min-width: 96px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--home-context);
}
.defrow--btn .defdesc {
  font-size: 13.5px;
  color: var(--ink-2);
}
.defrow--btn {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr 18px;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding-right: 8px;
}
.defrow--btn:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.defrow--btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.defchev {
  justify-self: end;
  color: var(--ink-3);
  font-size: 16px;
  transition: transform 140ms ease;
}
.defrow--btn[aria-expanded='true'] .defchev {
  transform: rotate(90deg);
}
.defmore {
  grid-column: 1 / -1;
  display: none;
  margin: 2px 0 8px;
  padding: 8px 10px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.defrow--btn[aria-expanded='true'] .defmore {
  display: block;
}

/* The staleness panel wears the ALERT grammar: amber-edged, icon-led,
   the three states as their own tinted status rows. */
.card--alert {
  border: 1.5px solid color-mix(in srgb, var(--amber) 55%, var(--line));
  background: color-mix(in srgb, var(--amber) 4%, var(--card));
}
.alert-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.alert-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}
.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
}
.alert-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.alert-row strong {
  font-weight: 650;
}
.alert-row[data-tone='good'] {
  background: color-mix(in srgb, var(--green) 9%, transparent);
}
.alert-row[data-tone='good'] .dot {
  background: var(--green);
}
.alert-row[data-tone='warn'] {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.alert-row[data-tone='warn'] .dot {
  background: var(--amber);
}
.alert-row[data-tone='quiet'] {
  background: color-mix(in srgb, var(--ink-3) 8%, transparent);
}
.alert-row[data-tone='quiet'] .dot {
  background: var(--ink-3);
}

/* ── 5f: the file card runs a shade darker, and every section speaks in
   its own hue - the term, the row's hover, the expanded view's edge. ── */
.card--file {
  background: color-mix(in srgb, #0b1a33 7%, var(--card));
  border-color: color-mix(in srgb, #0b1a33 18%, var(--line));
}
.card--file .deflist {
  border-color: color-mix(in srgb, #0b1a33 16%, var(--divider));
}
.card--file .defrow {
  background: color-mix(in srgb, #0b1a33 4%, var(--canvas));
}
.card--file .defrow:nth-child(odd) {
  background: color-mix(in srgb, #0b1a33 9%, var(--canvas));
}
.defrow--btn .defterm {
  color: var(--acc, var(--home-context));
}
.defrow--btn:hover {
  background: color-mix(in srgb, var(--acc, var(--primary)) 8%, transparent);
}
.defmore {
  border-left-color: color-mix(in srgb, var(--acc, var(--primary)) 55%, transparent);
  background: color-mix(in srgb, var(--acc, var(--primary)) 6%, transparent);
}

/* ── 5i: the offset rows go COLOURFUL, alternating inversions (Adam):
   light rows - colour text on light ground, expanding into BOLD colour
   with dark text; bold rows - the colour IS the ground, expanding into
   light with the bolder colour text. ── */
.card--file .defrow--btn:nth-child(odd) {
  background: color-mix(in srgb, var(--acc, var(--primary)) 5%, var(--canvas));
}
.card--file .defrow--btn:nth-child(even) {
  background: color-mix(in srgb, var(--acc, var(--primary)) 17%, var(--canvas));
}
.card--file .defrow--btn:nth-child(even) .defterm {
  color: color-mix(in srgb, var(--acc, var(--primary)) 82%, var(--ink));
}
.card--file .defrow--btn:nth-child(even) .defdesc {
  color: var(--ink);
}
.defrow--btn:nth-child(odd) .defmore {
  background: color-mix(in srgb, var(--acc, var(--primary)) 24%, var(--canvas));
  border-left-color: var(--acc, var(--primary));
  color: var(--ink);
}
.defrow--btn:nth-child(even) .defmore {
  background: color-mix(in srgb, var(--acc, var(--primary)) 5%, var(--canvas));
  border-left-color: var(--acc, var(--primary));
  color: color-mix(in srgb, var(--acc, var(--primary)) 78%, var(--ink));
  font-weight: 550;
}

/* ── 5j: the live Grounds' working surfaces. ── */
.pg-paste {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  font: 13px/1.55 var(--font-mono, ui-monospace, monospace);
  color: var(--ink);
  resize: vertical;
}
.pg-paste:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.pg-prompt {
  margin: 14px 0 0;
  padding: 14px 16px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--ground);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pg-col {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  max-height: 340px;
  overflow: auto;
}

/* ══ Civics Accelerator (pass 5m) ═══════════════════════════════════════
   The community-outreach page. Green is the program's colour — already on
   the site as How-It-Works' "Bar" accent; #177a4c holds 5.3:1 on white. */
.eyebrow--civics {
  color: var(--civics);
}
.chip--civics {
  background: var(--civics-tint);
  color: var(--civics-deep);
}
.btn--civics {
  background: var(--civics);
  color: var(--ink-inv);
}
.btn--civics:hover {
  background: var(--civics-deep);
}
.door--civics {
  border-color: rgba(23, 122, 76, 0.6);
  background: rgba(23, 122, 76, 0.06);
}
.door--civics:hover {
  background: rgba(23, 122, 76, 0.12);
  border-color: var(--civics);
}
.door--civics .door-go {
  color: var(--civics-deep);
}
.cv-band {
  margin-top: 96px;
}

/* pass 5n — the notes' page: tables, lists, the roadmap ledger */
.cv-scroll {
  overflow-x: auto;
  margin-top: 30px;
}
.cv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
}
.cv-table th,
.cv-table td {
  text-align: left;
  vertical-align: top;
  padding: 13px 24px 13px 0;
  border-bottom: 1px solid var(--divider);
}
.cv-table th[scope='row'] {
  width: 230px;
  font-weight: 650;
  color: var(--ink);
}
.cv-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 680;
  padding-top: 0;
  padding-bottom: 9px;
}
.cv-table td {
  color: var(--ink-2);
}
.cv-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.cv-list li {
  position: relative;
  padding-left: 22px;
}
.cv-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--civics);
}
.rm-list {
  margin-top: 38px;
}
.rm-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--divider);
  align-items: start;
}
.rm-status {
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.rm-status[data-s='live'] {
  background: var(--green-tint);
  color: var(--green);
}
.rm-status[data-s='build'] {
  background: var(--home-skills-tint);
  color: var(--home-skills-deep);
}
.rm-status[data-s='next'] {
  background: var(--sunken);
  color: var(--ink-2);
}
.rm-status[data-s='later'] {
  background: var(--sunken);
  color: var(--ink-3);
}
.rm-row h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 660;
  letter-spacing: -0.01em;
}
.rm-row p {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .rm-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cv-table th[scope='row'] {
    width: 150px;
  }
}

/* ══ pass 5p — the civic page builds excitement; the cost lands as relief ══ */
[data-page='civic'] .tag {
  background: rgba(23, 122, 76, 0.05);
  border-color: rgba(23, 122, 76, 0.28);
  color: var(--civics-deep);
}
[data-page='civic'] .tag i {
  color: var(--civics);
}
[data-page='civic'] .btn--civics.btn--lg {
  box-shadow: 0 10px 26px rgba(23, 122, 76, 0.32);
}
.cv-host-line {
  background: linear-gradient(transparent 62%, var(--civics-tint) 62%);
  padding-right: 4px;
}
/* 4.2 — a term sheet you can actually read */
.cv-table--sheet th,
.cv-table--sheet td {
  padding-left: 14px;
  border-bottom-color: rgba(23, 122, 76, 0.16);
}
.cv-table--sheet tr:nth-child(odd) th,
.cv-table--sheet tr:nth-child(odd) td {
  background: rgba(23, 122, 76, 0.035);
}
.cv-table--sheet tr.cv-never th,
.cv-table--sheet tr.cv-never td {
  background: var(--civics-tint);
  border-bottom: none;
}
/* 4.3 — the handshake */
.cv-provides {
  position: relative;
}
.cv-plus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--civics);
  color: var(--ink-inv);
  font-size: 22px;
  font-weight: 700;
  box-shadow: var(--e-2);
  z-index: 1;
}
.cv-we {
  background: rgba(23, 122, 76, 0.05);
  border-color: rgba(23, 122, 76, 0.35);
}
/* 4.4 — five gates: a 2×2 cluster, the board night a bonus chip */
.cv-gates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
.cv-gate {
  position: relative;
  padding: 26px 28px 26px 96px;
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
}
.cv-gate-n {
  position: absolute;
  left: 28px;
  top: 26px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  background: var(--canvas);
}
.cv-gate[data-g='1'] .cv-gate-n { color: var(--civics-deep); box-shadow: inset 0 0 0 2px var(--civics), 0 0 16px rgba(23, 122, 76, 0.35); }
.cv-gate[data-g='2'] .cv-gate-n { color: var(--home-context-deep); box-shadow: inset 0 0 0 2px var(--home-context), 0 0 16px rgba(9, 117, 158, 0.35); }
.cv-gate[data-g='3'] .cv-gate-n { color: var(--home-skills-deep); box-shadow: inset 0 0 0 2px var(--home-skills), 0 0 16px rgba(44, 92, 229, 0.35); }
.cv-gate[data-g='4'] .cv-gate-n { color: var(--violet-hover); box-shadow: inset 0 0 0 2px var(--violet), 0 0 16px rgba(106, 63, 209, 0.35); }
.cv-gate[data-g='5'] .cv-gate-n { color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber-line), 0 0 16px rgba(232, 163, 61, 0.45); }
.cv-gate-session {
  margin: 4px 0 0;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-3);
}
.cv-gate-keep {
  margin: 7px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.cv-gate--bonus {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 30px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--amber-tint), var(--canvas) 75%);
  border-color: rgba(232, 163, 61, 0.55);
}
.cv-gate--bonus .cv-gate-n {
  position: static;
  flex: none;
}
.cv-gate--bonus .cv-gate-session {
  margin-top: 0;
}
@media (max-width: 720px) {
  .cv-gates {
    grid-template-columns: 1fr;
  }
  .cv-gate--bonus {
    border-radius: var(--r-lg);
  }
}
/* 4.5 — three rooms, three colours */
.cv-ctx[data-c='school'] { background: var(--violet-tint); border-color: rgba(106, 63, 209, 0.35); }
.cv-ctx[data-c='school'] h3 { color: var(--violet); }
.cv-ctx[data-c='summer'] { background: var(--amber-tint); border-color: rgba(232, 163, 61, 0.55); }
.cv-ctx[data-c='summer'] h3 { color: var(--amber); }
.cv-ctx[data-c='adults'] { background: var(--home-context-tint); border-color: rgba(9, 117, 158, 0.35); }
.cv-ctx[data-c='adults'] h3 { color: var(--home-context-deep); }
/* 4.6 — the shelf, and the premium tier */
.cv-files {
  gap: 12px;
}
.cv-file-pill {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  box-shadow: var(--e-1);
}
.cv-cert {
  border-left: 3px solid var(--civics);
}
.cv-cert-dark {
  background: var(--splash-field);
  border-color: var(--splash-field);
}
.cv-cert-dark h3 {
  color: var(--globe-label);
}
.cv-cert-dark .body {
  color: var(--globe-detail-key);
}
/* 4.7 — point and counterpoint; 4.8 — the vault, pictured */
.cv-vs {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--divider);
}
.cv-vs-side {
  padding: 34px 38px;
}
.cv-vs-side--point {
  background: var(--ground);
}
.cv-vs-side--counter {
  background: var(--splash-field);
}
.cv-vs-side .lead {
  margin-top: 18px;
}
.cv-vs-side--counter .lead {
  color: var(--globe-label);
}
.cv-vs-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-vs-side--point .cv-vs-mark {
  background: var(--civics-tint);
  color: var(--civics-deep);
  box-shadow: inset 0 0 0 2px var(--civics);
}
.cv-vs-side--counter .cv-vs-mark {
  background: rgba(232, 237, 249, 0.08);
  color: var(--globe-label);
  box-shadow: inset 0 0 0 2px var(--globe-detail-key);
}
.cv-dark {
  margin-top: 30px;
  padding: 40px 42px;
  border-radius: var(--r-lg);
  background: var(--splash-field);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  align-items: center;
}
.cv-dark .lead {
  margin-top: 0;
  color: var(--globe-label);
}
.cv-dark .lead + .lead {
  color: var(--globe-detail-key);
}
.cv-vault-art {
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .cv-vs {
    grid-template-columns: 1fr;
  }
  .cv-dark {
    grid-template-columns: 1fr;
  }
}
/* 4.10 — the receipt beside the relief */
.cv-cost-panel {
  margin-top: 34px;
  padding: 38px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--civics-tint), var(--canvas) 72%);
  border: 1px solid rgba(23, 122, 76, 0.25);
}
.cv-cost-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}
/* CV1's total-only interim state (site/index.html §4.10, 2026-09-22) has one
   child, not two — the receipt column is gone until real figures exist. The
   original 1.15fr/1fr split assumed both columns were filled and would leave
   the second half of the panel empty. */
.cv-cost-grid--single {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
}
/* CV10 (2026-09-22) — what the fee covers, with the METHOD beside each row.
   Three rows and a donated line, not a five-row receipt: the research in
   docs/review/civic-cost-detail.doc.mjs §1 is that a board tests for stated
   assumptions and method, and that qualifications plus ability-to-provide
   outweigh cost 50 to 25 in a real procurement rubric. Method column is the
   load-bearing part, so it is set in mono and never wraps away from its row. */
.cv-covers {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 0;
  text-align: left;
}
.cv-covers caption {
  text-align: left;
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 0 10px;
}
.cv-covers th,
.cv-covers td {
  border-top: 1px solid var(--border);
  padding: 12px 14px 12px 0;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
}
.cv-covers th {
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  padding-right: 22px;
}
.cv-covers td { color: var(--ink-2); }
.cv-covers-m {
  font: 500 12.5px/1.5 var(--font-mono);
  color: var(--ink-3);
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}
.cv-covers-free th,
.cv-covers-free td { color: var(--ink-3); }
@media (max-width: 700px) {
  .cv-covers th { white-space: normal; }
  .cv-covers, .cv-covers tr, .cv-covers th, .cv-covers td { display: block; }
  .cv-covers th { border-top: 1px solid var(--border); padding-bottom: 2px; }
  .cv-covers td { border-top: 0; padding-top: 0; }
  .cv-covers-m { text-align: left; padding-bottom: 12px; }
}

.cv-receipt {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 28px;
  box-shadow: var(--e-1);
}
.cv-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--divider);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cv-receipt-row span:last-child {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}
.cv-receipt-row--total {
  border-bottom: none;
  border-top: 2px solid var(--civics);
  margin-top: 4px;
  padding-top: 16px;
  font-weight: 700;
  color: var(--ink);
}
.cv-receipt-row--total span:last-child {
  color: var(--civics-deep);
  font-size: 18px;
}
.cv-figure {
  margin: 0;
}
.cv-figure + .cv-figure {
  margin-top: 28px;
}
.cv-figure b {
  display: block;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--civics-deep);
  font-variant-numeric: tabular-nums;
}
.cv-figure--zero b {
  color: var(--ink);
}
.cv-figure span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .cv-cost-grid {
    grid-template-columns: 1fr;
  }
}
/* 4.11 — the evidence trio reads as one set */
.door--quiet {
  background: var(--canvas);
  border-color: var(--border);
  cursor: default;
}
.door--quiet:hover {
  background: var(--canvas);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
/* 4.12 — the open door */
.cv-finale {
  margin-top: 30px;
  padding: 36px;
  border-radius: var(--r-lg);
  /* Dark end to mid, never to the full accent — the band carries white copy
     and a bright green field under white text fails at any size. Measured:
     white clears 4.5:1 at 56% and under, so 50% is the mix with headroom. */
  background: linear-gradient(135deg, var(--civics-deep), color-mix(in srgb, var(--civics) 50%, #06240F));
  box-shadow: var(--e-2);
}

/* pass 5q — the lockup, the frame, and the promise said in amber */
.cv-hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 48px;
  align-items: center;
}
.cv-brand {
  display: flex;
  justify-content: center;
}
.cv-brand svg {
  width: min(300px, 100%);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(15, 92, 56, 0.35));
}
.cv-sheet-frame {
  margin-top: 30px;
  padding: 12px 26px;
  border: 1px solid rgba(23, 122, 76, 0.3);
  border-radius: var(--r-lg);
  background: var(--canvas);
  box-shadow: var(--e-1);
}
.cv-sheet-frame .cv-scroll {
  margin-top: 0;
}
.cv-never-line {
  margin: 22px 4px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--amber);
}
.cv-never-line strong {
  font-weight: 750;
}
@media (max-width: 900px) {
  .cv-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .cv-brand svg {
    width: min(220px, 100%);
  }
}

/* ══ pass 5x — Good, defined (the public standard) ══════════════════════ */
.gd-band {
  margin-top: 96px;
}
.gd-rung {
  position: relative;
  padding-top: 56px;
}
.gd-rung-n {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.gd-checks {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}
.gd-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.gd-check svg {
  flex: none;
  margin-top: 3px;
  color: var(--green);
}
.gd-check p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.gd-line {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.gd-line strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 15.5px;
}
.gd-elements {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gd-el {
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  border: 1px solid var(--border);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.gd-claims {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: gd;
  display: grid;
  gap: 0;
}
.gd-claims li {
  counter-increment: gd;
  position: relative;
  padding: 18px 0 18px 64px;
  border-bottom: 1px solid var(--divider);
  font-size: 16.5px;
  font-weight: 620;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.gd-claims li::before {
  content: counter(gd, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

/* ══ THE WRITING — the articles index ═════════════════════════════════════
   WS4 (2026-09-30): all three series, every piece named, unpublished ones
   marked. The series hue is one variable (--s) set per block, so adding a
   fourth is data rather than a layout change — which matters because DK7
   made sport a register and GOLFDRIVER would open a method series. */
.series { margin-top: 44px; padding-top: 26px; border-top: 2px solid var(--s); }
.series-h { max-width: 62ch; }
.series-n { display: block; font: 600 11.5px/1 var(--font-mono); letter-spacing: .15em;
  text-transform: uppercase; color: var(--s); margin-bottom: 9px; }
.series-h .h2 { margin: 0 0 8px; }
.series-h .body { font-size: 15.5px; color: var(--ink-2); margin: 0; }
.pieces { display: grid; gap: 10px; margin-top: 20px; }

.piece { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color .16s, transform .16s; }
a.piece:hover, button.piece:hover { border-color: var(--s); transform: translateY(-1px); }
button.piece { width: 100%; font: inherit; cursor: pointer; }
a.piece:focus-visible, button.piece:focus-visible { outline: 2px solid var(--s); outline-offset: 3px; }
.piece-h { display: block; font: 600 17.5px/1.3 var(--font-sans); color: var(--ink); }
.piece-b { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-top: 5px; }
.piece-m { display: grid; justify-items: end; gap: 6px; text-align: right; }
.piece-tag { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--s); border: 1px solid var(--s); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.piece-dev { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* NOT WRITTEN YET. It must not be clickable and must not LOOK clickable —
   so it is a div with no hover and no pointer, and the label says the state
   in words rather than only in colour (nothing distinguished by colour
   alone, per the accessibility floor). */
.piece--soon { background: var(--ground); border-style: dashed; cursor: default; }
.piece--soon .piece-h { color: var(--ink-2); }
.piece--soon .piece-b { color: var(--ink-3); }
.piece-tag--soon { color: var(--ink-3); border-color: var(--border); }
@media (prefers-reduced-motion: reduce) { a.piece:hover, button.piece:hover { transform: none; } }
@media (max-width: 620px) {
  .piece { grid-template-columns: 1fr; gap: 12px; }
  .piece-m { justify-items: start; text-align: left; }
}

/* ══ THE DARK WORLD — WS1 ═════════════════════════════════════════════════
   Split by job: the pages somebody READS go dark beside the decks and the
   articles; the pages somebody WORKS IN stay light beside the panel. The rule
   lives in README.md and is encoded once, in site.js's DARK list.

   THIS IS A TOKEN OVERRIDE AND NOTHING ELSE. Not one component rule is
   written twice and no page carries its own colours — the same reason
   design/tokens.json exists for the app. 2,481 lines of CSS keep working
   because every one of them already reads a variable.

   THE VALUES ARE THE DECK'S OWN, not new ones: #070B12 ground, #0E141F
   canvas, #F4F6FA / #B4BDCC / #7E889B ink, and the five accents the deck
   uses. A reader moving from a page to a piece should not change product.

   --ink-inv FLIPS, and it is the easiest thing here to get wrong. It is the
   text ON a filled accent button. White on #6F93FF is about 3.1:1 and fails;
   near-black on it is about 8:1. In the light world the accents are dark and
   --ink-inv is white; in the dark world the accents are bright and it has to
   be dark. Same token, opposite job. */
:root[data-world="dark"] {
  --canvas: #0E141F;
  --ground: #070B12;
  --sunken: #05080E;
  --ink: #F4F6FA;
  --ink-2: #B4BDCC;
  --ink-3: #7E889B;
  --ink-inv: #06121A;
  --divider: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.14);
  --border-i: rgba(255, 255, 255, 0.42);
  --primary: #6F93FF;
  --primary-hover: #8FACFF;
  --primary-tint: rgba(111, 147, 255, 0.15);
  --violet: #B98BFA;
  --violet-hover: #CBA6FF;
  --violet-tint: rgba(185, 139, 250, 0.15);
  --amber: #F2B441;
  --amber-tint: rgba(242, 180, 65, 0.14);
  --amber-line: #F2B441;
  --green: #34D399;
  --green-tint: rgba(52, 211, 153, 0.14);
  --danger: #F2685A;
  --danger-tint: rgba(242, 104, 90, 0.14);
  --home-context: #2FD4EE;
  --home-context-deep: #7BE4F5;
  --home-context-tint: rgba(47, 212, 238, 0.14);
  --home-skills: #6F93FF;
  --home-skills-deep: #8FACFF;
  --home-skills-tint: rgba(111, 147, 255, 0.14);
  --civics: #34D399;
  /* --civics-deep is the DARK END of the civics gradient, not a brighter
     green. In the light world it is a deep green behind white text; flipping
     it to a lighter green put white text on a bright field and broke the one
     band on the site that carries copy on a filled colour. It stays dark in
     both worlds, which is what "deep" meant all along. */
  --civics-deep: #0B4D2F;
  --civics-tint: rgba(52, 211, 153, 0.14);
  --globe-label: #E8EDF9;
  --globe-detail-key: #A6B6DC;
  /* Shadows do almost nothing on a dark ground — a black blur over near-black
     is invisible. Depth comes from the border and a faint inner highlight
     instead, which is how the deck's panels read. */
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --e-3: 0 20px 48px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
:root[data-world="light"] { color-scheme: light; }

/* ── WHICH COHORT, on the host request ───────────────────────────────────
   Two tracks at different prices, so the form asks before the reply has to.
   Radios rather than a select: there are two, both are worth reading, and a
   select hides the second one behind a tap. */
.cohort-kind { border: 0; padding: 0; margin: 0 0 4px; }
.cohort-kind legend { padding: 0; margin-bottom: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kind { display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px;
  min-height: var(--target-min); margin-bottom: 8px; transition: border-color .14s; }
.kind:last-of-type { margin-bottom: 0; }
.kind input { margin: 2px 0 0; accent-color: var(--civics); flex: none; width: 17px; height: 17px; }
.kind b { display: block; font-size: 15px; color: var(--ink); }
.kind i { display: block; font-style: normal; font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-top: 3px; }
.kind:has(input:checked) { border-color: var(--civics); }
.kind:focus-within { outline: 2px solid var(--civics); outline-offset: 2px; }

/* ══ THE MIRROR TEST — the deck's own layout ═════════════════════════════
   Adam, 2026-10-01: *"use the magic mirror layout from the presentation on
   the homepage with the mirror outline and all, including the Try It in 60
   seconds tag."*

   Lifted from slide 02 of the deck rather than approximated: two columns,
   copy left and the mirror right, the cyan TRY IT IN 60 SECONDS eyebrow at
   .16em, and the bezel exactly as the deck draws it — a six-stop metallic
   gradient at 50px radius around a near-white glass panel at 34px.

   THE MIRROR IS LIGHT ON A DARK PAGE, and that is the whole device. It is
   the one bright object on the site, it looks like a mirror because it is
   built like one, and the thing it shows you is a prompt about yourself.
   Scaled from the deck's 1920px stage to this measure; every proportion is
   the deck's, divided down.

   The light interior is NOT a token surface — it is a material, like the
   pool table's felt inside Slop Shots. So its colours are literals here on
   purpose, and the dark text inside is specified against them rather than
   inherited from a world that would invert it. */
.mirror {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.6vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .mirror { grid-template-columns: 1fr; gap: 34px; } }

.mirror-tag {
  font: 700 12.5px/1 var(--font-sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--home-context); margin: 0;
}
.mirror-h { margin: 14px 0 0; font: 800 clamp(34px, 4.4vw, 56px)/1 var(--font-sans);
  letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.mirror-copy { margin: 22px 0 0; display: flex; flex-direction: column; gap: 14px;
  font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.5; color: var(--ink-2); }
.mirror-copy p { margin: 0; }
.mirror-copy .you { color: var(--home-context); font-weight: 700; }
.mirror-copy .your { color: var(--violet); font-weight: 700; }
.mirror-copy .bright { color: var(--ink); }

/* ── THE BEZEL. The deck's six-stop metal, scaled. ── */
.mirror-frame {
  position: relative; min-width: 0;
  padding: 10px; border-radius: 30px;
  background: linear-gradient(135deg, #E3EDF7 0%, #7F90AB 20%, #F6F9FC 44%, #8797B0 66%, #DCE6F1 84%, #9AA9C0 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .3),
    0 0 48px rgba(47, 212, 238, .20),
    0 26px 60px rgba(0, 0, 0, .55);
}
.mirror-glass {
  position: relative; min-width: 0; overflow: hidden;
  border-radius: 21px;
  padding: clamp(22px, 2.6vw, 30px);
  background: linear-gradient(160deg, #F8FBFE, #E6EDF6);
  color: #0E131C;
  box-shadow: inset 0 0 0 2px rgba(14, 19, 28, .28), inset 0 0 22px rgba(120, 150, 190, .25);
}
.mirror-where2 {
  display: block; font: 700 11px/1 var(--font-sans); letter-spacing: .12em;
  text-transform: uppercase; color: #2B56D8;
}
.mirror-ais {
  margin: 12px calc(clamp(22px, 2.6vw, 30px) * -1) 0; padding: 10px clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(14, 19, 28, .09); border-bottom: 1px solid rgba(14, 19, 28, .09);
  font-size: 14px; color: #44506A; display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.mirror-ais b { color: #0E131C; font-weight: 600; }
.mirror-say { margin: 18px 0 0; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; font-weight: 500; }
.mirror-copybtn {
  margin-top: 20px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 12px;
  background: #2B56D8; color: #FFFFFF; cursor: pointer;
  font: 700 15px/1 var(--font-sans); letter-spacing: -.01em;
}
.mirror-copybtn:hover { background: #1F43B4; }
.mirror-copybtn:focus-visible { outline: 2px solid #2B56D8; outline-offset: 3px; }
.mirror-foot { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #4A5878; }

/* ── THE READ-IT-BACK CARDS, below the pair ── */
.mirror-reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.mirror-read {
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: color-mix(in srgb, var(--canvas) 72%, transparent);
}
.mirror-read h3 { font-size: 16px; color: var(--ink); margin: 0; }
.mirror-read h3 em { font-style: normal; color: var(--home-context); }
.mirror-read p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 7px 0 0; }
@media (max-width: 860px) { .mirror-reads { grid-template-columns: 1fr; } }

/* ══ THE CLOSER — the last thing on Home ══════════════════════════════════
   Adam, 2026-10-01: the text spans the module and the lockup makes it a
   final feature rather than one more card. It is the signature on the page,
   so it gets the mark at size and the question in full measure.

   NO max-width ON THE COPY. That is the standing preference — a lede spans
   its section — and here it was also a visible fault: 66ch inside a
   full-width card left a third of the module empty and read as something
   somebody meant to finish. */
.closer {
  position: relative;
  margin-top: 30px;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 26px;
  border: 1px solid var(--border);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--violet) 11%, transparent), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, color-mix(in srgb, var(--home-context) 9%, transparent), transparent 62%),
    var(--canvas);
  overflow: hidden;
}
.closer-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.closer-word { display: block; font: 800 22px/1 var(--font-sans); letter-spacing: -.028em; color: var(--ink); }
.closer-word i { display: block; font: 400 13px/1 var(--font-sans); font-style: normal;
  letter-spacing: 0; color: var(--ink-3); margin-top: 6px; }
.closer-h { margin: 0 0 14px; font: 800 clamp(26px, 3.4vw, 40px)/1.1 var(--font-sans);
  letter-spacing: -.032em; color: var(--ink); text-wrap: balance; }
/* Full measure, deliberately. See the note above. */
.closer-p { margin: 0; max-width: none; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.6; color: var(--ink-2); }
.closer-p b { color: var(--ink); font-weight: 600; }
.closer-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* THE GAP TO THE FOOTER IS ONE NUMBER, OWNED HERE. It was going to be the
   band's bottom padding plus a footer margin — except that padding resolves
   to 120px at desktop and 0 at phone width, so the same pair of rules gave
   300px on one and 24px on the other. Measured, not guessed. So the band
   stops paying when the closer is its last child, and the closer owns the
   whole distance. */
.band:has(> .closer:last-child) { padding-bottom: 0; }
.closer { margin-bottom: clamp(56px, 6vw, 84px); }