/* Landing page.
 *
 * Voice: steady, plain-spoken, forensic. The visitor has usually just lost their sponsor and
 * has been circling sites that promise a Certificate of Sponsorship for five figures.
 * Anything glossy reads as another one of those, so this is built to look like evidence:
 * a deep field, signage-grade type, and real numbers doing the talking.
 *
 * Committed colour: spruce drench, bone type, amber signal. Every competitor in this space is
 * navy and Union flag; green reads as permitted rather than institutional.
 */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --spruce: oklch(0.26 0.045 168);
  --spruce-deep: oklch(0.19 0.038 168);
  --spruce-lift: oklch(0.33 0.05 168);
  --bone: oklch(0.95 0.012 92);
  --bone-dim: oklch(0.82 0.016 92);
  --bone-faint: oklch(0.68 0.018 92);
  --amber: oklch(0.79 0.155 72);
  --amber-deep: oklch(0.62 0.15 62);
  --paper: oklch(0.97 0.008 92);
  --ink: oklch(0.21 0.03 168);
  --ink-dim: oklch(0.42 0.025 168);
  --rule: oklch(0.45 0.035 168 / 0.4);

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.7rem, 1.5rem + 1vw, 2.3rem);
  --step-3: clamp(2.2rem, 1.8rem + 2vw, 3.3rem);
  --step-4: clamp(2.6rem, 1.7rem + 3.1vw, 4.4rem);

  --gutter: clamp(1.2rem, 4vw, 4rem);
  --section: clamp(4rem, 9vw, 8.5rem);
}

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

body {
  margin: 0;
  background: var(--spruce);
  color: var(--bone);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.02; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: 34ch; }
.measure-wide { max-width: 56ch; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 0 0;
  /* Above the menu overlay, so the button that opened it is still the button that closes
     it. Without this the menu covers its own close control. */
  position: relative; z-index: 70;
}
.mark {
  /* Above the menu overlay with the close button: an overlay with no brand on it reads as
     a different page rather than a layer over this one. */
  position: relative; z-index: 80;
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em;
  font-size: var(--step-0); text-decoration: none;
}
.mark svg { color: var(--amber); }
/* The nav layout now lives with the menu, further down, so that the phone case is the
   default and the wide case is the exception. What stays here is only what both share. */
.masthead a.text-link {
  text-decoration: none; color: var(--bone-dim); font-size: var(--step--1);
  font-weight: 600; padding: 0.5rem 0.7rem; white-space: nowrap;
}
.masthead a.text-link:hover { color: var(--bone); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section); }

.hero h1 {
  font-size: var(--step-4);
  font-weight: 900;
  font-stretch: 116%;
  letter-spacing: -0.035em;
  max-width: 19ch;
  line-height: 1.03;
}
/* The second sentence carries the argument, so it takes the accent colour. No underline:
   an inline rule repeats on every wrapped line and reads as a mistake. */
.hero h1 em { font-style: normal; color: var(--amber); }
.hero-lead {
  margin-top: 1.6rem; font-size: var(--step-1); color: var(--bone-dim);
  max-width: 46ch; line-height: 1.4; text-wrap: pretty;
}

.hero-grid > * { min-width: 0; }
.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 950px) {
  .hero-grid > * { min-width: 0; }
.hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; }
}

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.2rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.5rem; border-radius: 3px;
  font: inherit; font-weight: 750; font-size: var(--step-0); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  /* A <button> takes a light background from the browser unless told otherwise. Without
     this the class only worked on links, and every real button in the menu rendered pale
     text on a pale box: present, but invisible. */
  background: transparent; color: inherit;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms, color 160ms;
}
.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { transform: translateY(-2px); background: oklch(0.85 0.16 76); }
.btn-ghost { border-color: var(--rule); color: var(--bone); }
.btn-ghost:hover { border-color: var(--bone-dim); transform: translateY(-2px); }

/* The counter panel: the page's proof, not decoration. */
.ledger {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: linear-gradient(180deg, oklch(0.3 0.05 168 / 0.55), oklch(0.22 0.04 168 / 0.55));
}
.ledger-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--bone-faint); font-weight: 600;
}
.ledger-head .live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 0 oklch(0.79 0.155 72 / 0.7); animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px oklch(0.79 0.155 72 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.79 0.155 72 / 0); }
}
.ledger dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ledger dl > div {
  padding: 1.1rem 1.1rem 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.ledger dl > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.ledger dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.ledger dt { font-size: var(--step--1); color: var(--bone-faint); font-weight: 600; }
.ledger dd {
  margin: 0.15rem 0 0; font-size: var(--step-2); font-weight: 850;
  font-stretch: 108%; letter-spacing: -0.03em; line-height: 1;
}
.ledger dd small { display: block; font-size: var(--step--1); font-weight: 500; color: var(--bone-faint); letter-spacing: 0; margin-top: 0.35rem; }
.ledger-foot { padding: 0.8rem 1.1rem; font-size: var(--step--1); color: var(--bone-faint); border-top: 1px solid var(--rule); }

/* ---------- the statistic ---------- */

.stat-band {
  background: var(--amber);
  color: var(--ink);
  padding: var(--section) 0;
}
.stat-band .figure {
  font-size: clamp(5rem, 17vw, 15rem);
  font-weight: 900; font-stretch: 125%; letter-spacing: -0.05em; line-height: 0.82;
}
.stat-band .figure span { font-size: 0.42em; letter-spacing: -0.03em; }
.stat-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
@media (min-width: 850px) { .stat-grid { grid-template-columns: auto minmax(0, 1fr); } }
.stat-band p { font-size: var(--step-1); line-height: 1.35; max-width: 40ch; font-weight: 500; }
.stat-band cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: var(--step--1); color: oklch(0.35 0.06 62);
}
.stat-band cite a { color: inherit; }

/* ---------- sections ---------- */

section { padding: var(--section) 0; }
.section-title {
  font-size: var(--step-3); font-weight: 850; font-stretch: 110%; letter-spacing: -0.03em;
  max-width: 20ch;
}
.section-lead { margin-top: 1.1rem; color: var(--bone-dim); max-width: 56ch; text-wrap: pretty; }

/* Title and standfirst sit side by side from tablet up. Reading width still caps the prose,
   but the band is doing two jobs instead of leaving half of it empty. */
.section-head { display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: end; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .section-head .section-lead { margin-top: 0; }
}

.steps { display: grid; gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--spruce); padding: clamp(1.5rem, 3vw, 2.2rem); }
.step .index {
  font-size: var(--step--1); font-weight: 800; color: var(--amber);
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
.step h3 { margin-top: 0.7rem; font-size: var(--step-1); font-weight: 800; font-stretch: 106%; letter-spacing: -0.02em; }
.step p { margin-top: 0.7rem; color: var(--bone-dim); font-size: var(--step-0); }

/* The evidence panel: a real advert, really caught. */
.evidence-panel {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.evidence-row { display: grid; gap: 0; }
@media (min-width: 800px) { .evidence-row { grid-template-columns: 1fr 1fr; } }
.evidence-cell { padding: clamp(1.4rem, 3vw, 2.2rem); }
.evidence-cell + .evidence-cell { border-top: 1px solid var(--rule); }
@media (min-width: 800px) {
  .evidence-cell + .evidence-cell { border-top: 0; border-left: 1px solid var(--rule); }
}
.evidence-label { font-size: var(--step--1); font-weight: 700; color: var(--bone-faint); }
blockquote {
  margin: 0.9rem 0 0; padding-left: 1rem; border-left: 2px solid var(--amber);
  font-size: var(--step-1); line-height: 1.35; text-wrap: pretty;
}
.verdict { margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--amber); }

.checks { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.checks li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--bone-dim); }
.checks svg { color: var(--amber); flex: none; margin-top: 0.2rem; }
.checks b { color: var(--bone); font-weight: 700; }

/* ---------- product shot ---------- */

.shot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  background: var(--spruce-deep);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  padding: 0.9rem 1.2rem; font-size: var(--step--1); color: var(--bone-faint);
  border-top: 1px solid var(--rule);
}

/* ---------- plain section on paper ---------- */

.paper { background: var(--paper); color: var(--ink); }
.paper .section-lead { color: var(--ink-dim); }
.paper .honest { display: grid; gap: 1px; background: oklch(0.85 0.02 168); border: 1px solid oklch(0.85 0.02 168); border-radius: 4px; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) { .paper .honest { grid-template-columns: 1fr 1fr; } }
.honest div { background: var(--paper); padding: clamp(1.3rem, 3vw, 2rem); }
.honest h3 { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.02em; }
.honest p { margin-top: 0.6rem; color: var(--ink-dim); }
.honest .yes h3 { color: oklch(0.42 0.11 160); }
.honest .no h3 { color: oklch(0.45 0.15 28); }

/* ---------- close ---------- */

.close { background: var(--spruce-deep); text-align: center; }
.close h2 { font-size: var(--step-3); font-weight: 900; font-stretch: 115%; letter-spacing: -0.035em; max-width: 22ch; margin-inline: auto; }
.close p { margin: 1.2rem auto 0; color: var(--bone-dim); max-width: 46ch; }
.close .actions { justify-content: center; }

footer.site {
  background: var(--spruce-deep); border-top: 1px solid var(--rule);
  padding: 2.5rem 0 3rem; color: var(--bone-faint); font-size: var(--step--1);
}
footer.site .row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; }
footer.site a { color: var(--bone-dim); }
footer.site .spacer { flex: 1; }

/* ---------- entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .rise-2 { animation-delay: 90ms; }
  .rise-3 { animation-delay: 180ms; }
  .rise-4 { animation-delay: 270ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

:where(a, button):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- long-form pages (/privacy, /support) ---------- */
/* Same shell as the landing page, but a reading column rather than a composition: these are
   read start to finish by someone who needs the answer, not scanned. */

.doc { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section); max-width: 72ch; }
.doc h1 {
  font-size: var(--step-3); font-weight: 900; font-stretch: 112%;
  letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance;
}
.doc .standfirst {
  margin-top: 1.1rem; font-size: var(--step-1); line-height: 1.4;
  color: var(--bone-dim); text-wrap: pretty;
}
.doc h2 {
  margin-top: clamp(2.4rem, 5vw, 3.4rem); font-size: var(--step-1);
  font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule);
}
.doc h3 { font-size: var(--step-0); font-weight: 800; }
.doc p { margin-top: 1rem; color: var(--bone-dim); line-height: 1.62; text-wrap: pretty; }
.doc ul { margin-top: 1rem; padding-left: 1.1rem; display: grid; gap: 0.6rem; }
.doc li { color: var(--bone-dim); line-height: 1.55; }
.doc a:not(.btn) { color: var(--amber); text-underline-offset: 3px; }
.doc .doc-back { margin-top: clamp(2.4rem, 5vw, 3.4rem); }

/* An organisation is a contact record, so it reads as an entry in a list, not as a card. */
.org-list { margin-top: 1.6rem; display: grid; gap: 0; }
.org { padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.org:last-child { border-bottom: 1px solid var(--rule); }
.org h3 a { color: var(--bone); text-decoration: none; }
.doc .btn-primary { color: var(--ink); }
.org h3 a:hover { color: var(--amber); }
.org p { margin-top: 0.4rem; }
.org-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--step--1); color: var(--bone-faint); }
.org-meta a { color: var(--amber); }
.org-how { font-size: var(--step--1); color: var(--bone-faint); }

/* ---------- questions ---------- */
/* A question and its answer, ruled off. Not cards: there is nothing to compare between them,
   and six equal boxes would invite scanning where the point is reading one of them. */

.qa { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.qa-item { padding: clamp(1.2rem, 3vw, 1.7rem) 0; border-top: 1px solid var(--rule); }
.qa-item:last-child { border-bottom: 1px solid var(--rule); }
.qa-item h3 { font-size: var(--step-1); font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em; }
.qa-item p { margin-top: 0.5rem; color: var(--bone-dim); line-height: 1.6; max-width: 74ch; text-wrap: pretty; }

@media (min-width: 1000px) {
  /* Question left, answer right: the eye picks its question from a single column of them. */
  .qa-item { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem; }
  .qa-item p { margin-top: 0; }
}

/* ---------- directory pages ---------- */

.callout {
  margin-top: 1.4rem; padding: 1rem 1.1rem;
  background: oklch(0.79 0.155 72 / 0.09);
  border: 1px solid oklch(0.79 0.155 72 / 0.35);
  border-radius: 4px;
}
.doc .callout { color: var(--bone-dim); }
.doc .callout strong { color: var(--bone); }

.town-list {
  margin-top: 1.2rem; padding: 0; list-style: none;
  display: grid; gap: 0.1rem 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.town-list li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; }
.town-list a { color: var(--bone); text-decoration: none; border-bottom: 1px solid transparent; }
.town-list a:hover { border-bottom-color: var(--amber); }
.town-list span { color: var(--bone-faint); font-size: var(--step--1); font-variant-numeric: tabular-nums; }

/* Public records, so they are presented as a record: label and value, ruled. */
.facts { margin-top: 1.2rem; display: grid; gap: 0; }
.facts > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem;
  padding: 0.8rem 0; border-top: 1px solid var(--rule);
}
.facts > div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--bone-faint); font-size: var(--step--1); }
.facts dd { margin: 0; color: var(--bone); }
.facts a { color: var(--amber); }
@media (min-width: 620px) {
  .facts > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}

/* ---------- pricing ---------- */

.price-grid {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.price-card {
  padding: clamp(1.5rem, 4vw, 2.2rem);
  background: oklch(0.79 0.155 72 / 0.08);
  border: 1px solid oklch(0.79 0.155 72 / 0.4);
  border-radius: 6px;
}
.price { display: flex; align-items: baseline; gap: 0.5rem; }
.price .num { font-size: var(--step-4); font-weight: 900; font-stretch: 116%; letter-spacing: -0.03em; }
.price small { color: var(--bone-dim); font-size: var(--step-0); }

.price-list { margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.price-list li {
  position: relative; padding-left: 1.6rem; color: var(--bone-dim); line-height: 1.5;
}
.price-list li::before {
  content: ''; position: absolute; left: 0; top: 0.45em;
  width: 0.7rem; height: 0.35rem; border-left: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber); transform: rotate(-45deg);
}

.price-note h3 { font-size: var(--step-0); font-weight: 800; margin-top: 1.4rem; }
.price-note h3:first-child { margin-top: 0; }
.price-note p { margin-top: 0.4rem; color: var(--bone-dim); line-height: 1.6; max-width: 52ch; }
.price-note a { color: var(--amber); }

.doc .count { font-size: var(--step-1); color: var(--bone); line-height: 1.4; }
.doc .count .num { font-size: var(--step-3); font-weight: 900; font-stretch: 112%; letter-spacing: -0.02em; }

/* ---------- employer watch ---------- */

.watch {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  border: 1px solid var(--rule); border-radius: 6px;
}
.watch h2 { margin-top: 0; border: 0; padding-bottom: 0; }
.watch-row { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.watch input {
  flex: 1 1 15rem; min-width: 0;
  padding: 0.8rem 0.9rem; font: inherit; font-size: var(--step-0);
  color: var(--bone); background: oklch(0.19 0.038 168);
  border: 1px solid var(--rule); border-radius: 4px;
}
.watch input::placeholder { color: var(--bone-faint); }
.watch input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* An unset legal detail must look wrong on the page, not blend in. */
.doc mark.unset {
  background: oklch(0.62 0.15 62 / 0.25); color: var(--bone);
  padding: 0.1em 0.35em; border-radius: 3px; font-weight: 700;
}

/* =========================================================================
   Mobile first
   =========================================================================
   Everything below is written for a phone held in one hand and read on mobile
   data, then relaxed upward. Three ideas run through it: one call to action on
   screen at a time, use the width instead of stacking everything into an
   eleven-screen scroll, and never let chrome sit over what someone is reading.
   ========================================================================= */

/* ---------- the menu ---------- */

.burger {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto; padding: 0;
  /* The menu is a sibling inside this header, so the button that opens it has to be
     painted above it or it cannot also close it. */
  position: relative; z-index: 80;
  /* No outline, by request and on merit: a bordered button here competes with the
     one call to action the hero is trying to own. */
  background: none; border: 0; cursor: pointer; color: var(--bone);
}
.burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 220ms var(--ease, ease), opacity 140ms linear;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.burger:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 1.5rem; padding: 5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--spruce-deep);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms;
}
.menu[data-open='true'] { transform: translateY(0); visibility: visible; }
body.menu-open { overflow: hidden; }

.menu-links { display: flex; flex-direction: column; gap: 0.2rem; }
.menu-links a {
  padding: 0.7rem 0; font-size: var(--step-2); font-weight: 800; font-stretch: 106%;
  letter-spacing: -0.02em; text-decoration: none; color: var(--bone);
  border-bottom: 1px solid var(--rule);
}
.menu-links a:active { color: var(--amber); }

/* Neither account state shows until we know which one is true: flashing "Create an
   account" at someone already signed in reads as having been logged out. */
.menu-account { display: grid; gap: 0.6rem; }
.menu-account[data-state='unknown'] > div { visibility: hidden; }
.menu-account .btn-block { width: 100%; justify-content: center; }
.menu-who { color: var(--bone-dim); font-size: var(--step--1); margin-bottom: 0.2rem; }
.menu-who strong { color: var(--bone); }

@media (min-width: 1000px) {
  .burger { display: none; }
  /* The preview controls are a stacked block; in a horizontal header they crowd the nav.
     Their proper home is the admin dashboard, so at this width they simply are not here. */
  .menu-preview { display: none; }
  .menu {
    position: static; inset: auto; transform: none; visibility: visible;
    flex-direction: row; align-items: center; gap: 0.4rem;
    padding: 0; background: none; margin-left: auto;
  }
  .menu-links { flex-direction: row; gap: 0.2rem; }
  .menu-links a {
    padding: 0.5rem 0.7rem; font-size: var(--step--1); font-weight: 600;
    letter-spacing: 0; color: var(--bone-dim); border: 0;
  }
  .menu-links a:hover { color: var(--bone); }
  .menu-account { display: flex; align-items: center; margin-left: 0.4rem; }
  .menu-account .btn-block { width: auto; padding: 0.6rem 1rem; }
  .menu-account [data-when='signed-out'] { display: flex; gap: 0.4rem; }
  .menu-account [data-when='signed-in'] { display: flex; gap: 0.4rem; align-items: center; }
  .menu-who { display: none; }
}

/* ---------- hero ---------- */

.hero h1 { text-wrap: balance; }
.hero-price { margin-top: 0.9rem; color: var(--bone-faint); font-size: var(--step--1); }
.hero-price a { color: var(--bone-dim); text-underline-offset: 3px; }

@media (max-width: 999px) {
  /* One thumb, one action. The hero is the easiest screen to get right and the most
     expensive to get wrong. */
  .hero { padding-block: 1.5rem 2.5rem; }
  .hero h1 { font-size: clamp(2.5rem, 11.5vw, 3.6rem); line-height: 0.98; letter-spacing: -0.03em; }
  .hero-lead { margin-top: 1rem; font-size: var(--step-0); line-height: 1.5; }
  .actions { margin-top: 1.4rem; }
  .actions .btn { width: 100%; justify-content: center; min-height: 52px; }
  .ledger { margin-top: 2rem; }
}

/* ---------- sideways where sideways earns its place ---------- */
/*
   Rows of equal cards are exactly what horizontal scrolling is for: it uses the width a
   phone actually has, keeps the next card visible so it is obviously scrollable, and takes
   several screens out of the scroll. Applied only to genuine sets of peers, never to prose.
*/
@media (max-width: 759px) {
  /* min-width: 0 is load-bearing. A grid or flex item defaults to min-width: auto, so a
     scroll container full of max-content cards pushes its parent wider instead of
     scrolling, and the whole page ends up wider than the phone. */
  .swipe {
    min-width: 0; max-width: 100%;
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: 0.8rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    /* Break out of the page gutter so cards run to both edges, which is the cue that
       there is more to the right. */
    margin-inline: calc(var(--gutter) * -1);
    padding-bottom: 0.4rem;
    scrollbar-width: none;
  }
  /* Same reason as the app: the edge cards carry the gutter so they line up with the
     heading, rather than relying on padding a scroll container. */
  .swipe > :first-child { margin-left: var(--gutter); }
  .swipe > :last-child { margin-right: var(--gutter); }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { scroll-snap-align: start; }

  .steps.swipe { background: none; border: 0; border-radius: 0; overflow-x: auto; }
  .steps.swipe .step { border: 1px solid var(--rule); border-radius: 4px; }

  .honest.swipe { grid-auto-columns: 82%; background: none; border: 0; }
  .honest.swipe > div { border: 1px solid var(--rule); border-radius: 4px; }

  .ledger dl.swipe { grid-auto-columns: 62%; margin-inline: 0; padding-inline: 0; }
  .ledger dl.swipe > div { border: 0; border-right: 1px solid var(--rule); }
  .ledger dl.swipe > div:last-child { border-right: 0; }

  .qa.swipe { grid-auto-columns: 86%; }
  .qa.swipe .qa-item { border: 1px solid var(--rule); border-radius: 4px; padding: 1.1rem; }
  .qa.swipe .qa-item:last-child { border-bottom: 1px solid var(--rule); }

  /* A row that scrolls should say so once, quietly, rather than relying on the reader
     noticing a cut-off card. */
  .swipe-hint {
    margin-top: 0.7rem; font-size: var(--step--1); color: var(--bone-faint);
    display: flex; align-items: center; gap: 0.4rem;
  }
  .swipe-hint::after { content: '→'; }
}
@media (min-width: 1000px) { .swipe-hint { display: none; } }

/* ---------- the sticky call to action ---------- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: oklch(0.19 0.038 168 / 0.96);
  border-top: 1px solid var(--rule);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-cta[data-visible='true'] { transform: translateY(0); }
.sticky-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
}
.sticky-inner p { display: flex; flex-direction: column; line-height: 1.2; }
.sticky-inner strong { font-weight: 800; font-size: var(--step-0); }
.sticky-inner span { color: var(--bone-faint); font-size: var(--step--1); }
.sticky-inner .btn { margin-left: auto; white-space: nowrap; min-height: 46px; }

body:has(.menu[data-open='true']) .sticky-cta { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .menu, .sticky-cta, .burger span { transition: none; }
}

/* ---------- mobile type and rhythm ---------- */
/*
   The display sizes were drawn for a desktop hero and inherited by every section heading,
   which on a phone spent most of a screen on four words. Headings step down, section gaps
   tighten, and the page loses several screens of scrolling without losing any content.
*/
@media (max-width: 999px) {
  :root { --section: clamp(2.8rem, 8vw, 4.5rem); }

  .section-title { font-size: clamp(1.9rem, 7.5vw, 2.6rem); line-height: 1.02; letter-spacing: -0.025em; }
  .section-lead { margin-top: 0.9rem; font-size: var(--step-0); }
  .close h2 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }

  .stat-band .figure { font-size: clamp(3.5rem, 20vw, 6rem); }
  .stat-band p { font-size: var(--step-0); }

  .doc h1, .paywall-count { font-size: clamp(2rem, 8vw, 2.8rem); }
  .doc h2 { margin-top: 2rem; }

  .price-card { padding: 1.3rem; }
  .price .num { font-size: clamp(2.6rem, 12vw, 3.4rem); }

  /* The last section sits above the sticky bar, so it needs room to clear it. */
  .close { padding-bottom: 6rem; }
  footer.site { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* The phone screenshot is a portrait of a phone, so it should not stretch to fill a
   card built for a landscape one. */
@media (max-width: 999px) {
  .shot img { max-width: 320px; margin-inline: auto; display: block; border-radius: 10px; }
}

/* ---------- footer ---------- */
/*
   Grouped, not a wrapped line of links. On a phone a run of underlined text with no
   structure is the hardest thing on the page to use, and the footer is where someone goes
   when they already know what they are looking for.
*/
footer.site { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem); }

.footer-grid {
  display: grid; gap: clamp(1.6rem, 5vw, 3rem);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.footer-group { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-group h2 {
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.02em;
  color: var(--bone); margin-bottom: 0.15rem;
}
.footer-group a {
  color: var(--bone-dim); text-decoration: none; font-size: var(--step-0);
  line-height: 1.3; padding: 0.15rem 0;
}
.footer-group a:hover { color: var(--amber); }

.footer-base {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.7rem;
}
.footer-mark { font-size: var(--step-0); color: var(--bone); }
.footer-base p { color: var(--bone-faint); font-size: var(--step--1); line-height: 1.5; max-width: 60ch; }
.footer-base a { color: var(--bone-dim); }
.footer-credit a:hover { color: var(--amber); }

@media (min-width: 900px) {
  .footer-base { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
  .footer-credit { text-align: right; }
}

/* The old single-row footer rule no longer applies to anything, but the app still uses
   .credit for its own one-line footer, which stays as it is. */

.qa-block { padding-block: 0.4rem; }

/* ---------- guides ---------- */

.post-list { display: grid; gap: 0; margin-top: 1.4rem; }
.post-card { padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.post-card:last-child { border-bottom: 1px solid var(--rule); }
.post-card h2 { margin: 0; border: 0; padding: 0; font-size: var(--step-1); }
.post-card h2 a { color: var(--bone); text-decoration: none; }
.post-card h2 a:hover { color: var(--amber); }
.post-meta { color: var(--bone-faint); font-size: var(--step--1); }

.post-body h2 { margin-top: clamp(2rem, 5vw, 2.8rem); }
.post-body ol, .post-body ul { margin-top: 1rem; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.post-body li { color: var(--bone-dim); line-height: 1.55; }
.post-body blockquote {
  margin: 1.2rem 0; padding: 1rem 1.2rem;
  border-left: 2px solid var(--amber); background: oklch(0.79 0.155 72 / 0.06);
}
.post-body blockquote p { margin: 0; color: var(--bone); }