/* midbench.com — site layer (site.v15.css)
   v15 (2026-09-21, late evening, owner-directed, the eighth pass of
   41_LEGITIMACY_PAGE, ADR 0125 L-15 and L-6 as amended): the page now speaks
   TO the accountant (the operator), at a high level, while its reader in this
   phase is still the accountant's client. The client finds a professional
   tool built for the person they already trust, and that person's request
   explains itself; the page never has to vouch for itself. The copy change
   rides this file because the five sections between the logo row and the
   FAQ were rebuilt with it, in the language of the parts the owner likes
   (the hero's field, the hairline FAQ, the fat footer): a facts strip
   (three facts, hairlines above, below and between), a split (a sticky head
   on the left, hairline rows on the right), a ledger (cannot set large on
   the left, can quiet on the right, one vertical hairline), the three steps
   under numerals at display size, and a hairline four-column grid on ink
   with the hero's field behind it, still. Cards, icon tiles, shadows and
   the tint bands' rule lines retire from the home page. Nothing in the
   middle moves: the hero's light stays the page's one motion.
   v14 (2026-09-21 evening, the fifth and sixth passes, ADR 0125 L-14): the
   drawn authorization card left the hero; the hero copy sits ON a tinted
   field that IS the section, edge to edge, and carries no pill. The field
   is what moves: a soft light crosses it over about seventy seconds and the
   faint grid breathes over twelve, on pseudo-elements, transform and
   opacity only, negative delays (the first painted frame is the resting
   frame), still under reduced motion. CSS alone: zero first-party JS.
   v13 (2026-09-21, the second pass): the home page rebuilt for ONE reader,
   a client of a Midbench operator who met the name in an engagement letter
   and again on a provider's authorization screen, and who opens
   midbench.com to decide whether the tool is legitimate. The positioning
   line is "Automation platform for accountants"; the shape is the
   full-width marketing page against plaid.com/what-is-plaid: a centred
   hero, a row of the real wordmarks of the services Midbench reads from
   (scrolling, CSS only), a facts slot where the reference keeps its
   statistics, a dark band for protection, and a fat footer. Rules that
   survive from v12: ADR 0125 L-7 (a slot carried by a claim we cannot make
   gets an honest substitute of the same weight), zero first-party JS, zero
   third-party requests, every mark inline, one green. Every other page
   keeps `.prose` in the narrow column inside the same shell (all seven
   pages share this file, the header and the footer). Layers on
   kit/tokens.v1.css; link the kit first. v14, v13 (neither deployed) and
   v12 stay beside this file and in the bucket, unreferenced. */

/* ---- the page's own scale, on top of the kit ---- */
:root {
  --fs-display: clamp(2.3rem, 5.2vw, 3.65rem);
  --fs-h2: clamp(1.75rem, 3.3vw, 2.5rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-eyebrow: 0.8rem;
  --band-y: clamp(3.75rem, 8vw, 6.5rem);
  /* the dark band (protection): ink on the light theme, a deeper ink on the dark one */
  --ink-bg: #1C1B19;
  --ink-fg: #FAF9F7;
  --ink-muted: rgb(250 249 247 / 74%);
  --ink-border: rgb(255 255 255 / 14%);
  --ink-accent: #5BBF97;
  /* the logo row's theme-able brand fills (inherited into each <use>) */
  --l-pp-navy: #253B80; --l-pp-navy2: #222D65; --l-pp-blue: #179BD7; --l-wise: #163300;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink-bg: #0D0C0B;
    --ink-fg: #ECE9E3;
    --ink-muted: #A5A096;
    --ink-border: #2A2824;
    --ink-accent: #5BBF97;
    --l-pp-navy: currentColor; --l-pp-navy2: currentColor; --l-pp-blue: currentColor; --l-wise: #9FE870;
  }
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-1)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
main { flex: 1; }
h1, h2, h3, p, ol, ul, figure, figcaption { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.18em; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* the content cap; full-bleed bands put this inside themselves */
.shell { max-width: var(--page); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }

/* ---- header ----
   Wordmark left, two real links and one action right. There is no product
   menu because there are no product pages, and an empty menu is the kind
   of thing this page exists to avoid. */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.15rem;
}
.brand { color: var(--accent); display: inline-flex; }
a.brand { transition: filter 120ms ease; }
a.brand:hover { filter: brightness(1.12); }
.brand .wordmark { height: 1.4rem; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.6vw, 1.8rem); }
.site-nav a {
  color: var(--muted); text-decoration: none;
  font-size: var(--fs-0); font-weight: 500; transition: color 120ms ease;
}
.site-nav a:hover { color: var(--accent); }
.site-nav .btn-ghost {
  color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r);
  padding: 0.42rem 0.95rem; white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.site-nav .btn-ghost:hover { background: var(--accent); color: var(--on-accent); }
@media (max-width: 30rem) { .site-nav .nav-hide { display: none; } }

/* ---- buttons ---- */
.btn {
  display: inline-block;
  background: var(--accent); color: var(--on-accent);
  font: 600 0.95rem/1.6 var(--font); text-decoration: none;
  padding: 0.55rem 1.05rem; border: 0; border-radius: var(--r);
  cursor: pointer; transition: filter 120ms ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { filter: brightness(0.95); }

/* ---- the editorial eyebrow: a small label over a heading ----
   The device that gives a long page its structure without adding a claim.
   Each one is ratified copy, a category label and never an address to the
   reader, pinned in order by tests/test_site_copy.py. */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.85rem;
}
.band-ink .eyebrow { color: var(--ink-accent); }

/* ---- hero ----
   Centred, the way the reference opens, and since the fifth and sixth passes
   (2026-09-21, owner's calls; ADR 0125 L-14) type alone on a field that lives
   and that IS the section: the positioning line, the one sentence, one lead.
   Nothing is drawn on the field and nothing else sits on it (the drawn
   authorization card went with the fifth pass, the read-only pill with the
   sixth). The field runs edge to edge under the header. What moves is the
   field itself: a soft light crosses it over about seventy seconds (::after,
   transform only) and the faint grid breathes over twelve (::before, opacity
   only). Both start at their midpoints through negative delays, so the first
   painted frame is the resting frame, and both stop under reduced motion by
   the global rule above, which leaves the field still. */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--bg)), color-mix(in srgb, var(--accent) 3%, var(--bg)));
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  mask-image: radial-gradient(60% 80% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 40%, #000 30%, transparent 100%);
  animation: breathe 12s ease-in-out -6s infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background: radial-gradient(28% 55% at 50% 42%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  animation: daylight 70s ease-in-out -35s infinite alternate;
}
@keyframes daylight { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes breathe { from { opacity: 0.4; } to { opacity: 0.7; } }
.hero .shell { position: relative; z-index: 1; }
.hero-copy { max-width: 48rem; margin-inline: auto; }
.hero h1 {
  font-size: var(--fs-display); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.03em; text-wrap: balance;
}
.hero .lead {
  font-size: var(--fs-lead); line-height: 1.55; margin: 1.35rem auto 0;
  max-width: 40rem; color: var(--muted); text-wrap: pretty;
}

/* ---- the logo row: what Midbench READS FROM, never who uses it ----
   Real wordmarks, inlined as <symbol>s, on one line that scrolls (CSS
   only). The track holds the list twice; each copy carries the gap as
   padding, so a translate of exactly one copy loops without a seam. Hover
   or focus pauses it; reduced motion gets a static, wrapping row and the
   second copy is dropped. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }   /* not display:none: Chrome drops a gradient defined inside a hidden sprite */
.logos { padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(2.75rem, 5vw, 3.75rem); }   /* air under the full-bleed hero band */
.logos-cap { text-align: center; font-size: var(--fs-0); color: var(--muted); letter-spacing: 0.01em; }
.marquee {
  --mq-gap: clamp(2.75rem, 5.5vw, 4.75rem);
  margin-top: 1.75rem; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 58s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee ul {
  list-style: none; margin: 0; padding: 0 var(--mq-gap) 0 0; flex: none;
  display: flex; align-items: center; gap: var(--mq-gap);
}
.marquee li { display: flex; align-items: center; color: var(--text); flex: none; }
.marquee li svg { height: var(--lh, 26px); width: auto; display: block; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee-track { width: 100%; }
  .marquee ul { flex-wrap: wrap; justify-content: center; width: 100%; padding: 0; row-gap: 1.5rem; }
  .marquee ul[aria-hidden="true"] { display: none; }
}

/* ---- full-bleed bands ----
   A band changes tone, never with rule lines: the tint band has no border
   since v15, and the hairlines live inside the sections, between columns
   and rows, where the FAQ and the footer already keep theirs. */
.band { padding-block: var(--band-y); }
.band-tint { background: var(--surface); }
.band-title {
  font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.12; text-wrap: balance; max-width: 24ch;
}
.band-lead {
  margin-top: 1.1rem; max-width: 46ch; font-size: var(--fs-lead);
  line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.band-ink .band-lead { color: var(--ink-muted); }
.band-note { margin-top: 1.5rem; font-size: var(--fs-0); color: var(--muted); max-width: 54ch; text-wrap: pretty; }

/* ---- the one glyph of the middle: a green ring with a check or a cross ---- */
.mk {
  width: 1.3rem; height: 1.3rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--accent);
}
.mk svg { width: 0.72rem; height: 0.72rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-yes { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mk-no { border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent); }

/* ---- the facts strip (where the reference puts its statistics) ----
   Three facts on one line: a hairline above and below the strip, a vertical
   hairline between the columns, the ring with the check as the one glyph.
   No tint and no tile; the facts are the type. Stacked, the hairlines turn
   horizontal between the facts. */
.strip { padding-block: clamp(2.1rem, 3.6vw, 2.9rem); border-block: 1px solid var(--border); }
.facts { display: grid; gap: 0; }
.fact + .fact { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact { padding-right: clamp(1.5rem, 3vw, 2.5rem); }
  .fact + .fact {
    margin-top: 0; padding-top: 0; border-top: 0;
    border-left: 1px solid var(--border); padding-left: clamp(1.5rem, 3vw, 2.5rem);
  }
  .fact:last-child { padding-right: 0; }
}
.fact-k {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: var(--fs-2); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; text-wrap: balance;
}
.fact-k .mk { margin-top: 0.08em; }
.fact-v { margin-top: 0.5rem; color: var(--muted); line-height: 1.5; max-width: 32ch; text-wrap: pretty; }

/* ---- the split: a sticky head on the left, hairline rows on the right ----
   The use case (why accountants use it). The head keeps the eyebrow, the
   title, the lead and the note in view while the rows go by; each row is a
   heading and one short paragraph between hairlines, the FAQ's own device
   at a larger size. Stacked, the head simply comes first. */
.split { display: grid; gap: 2.25rem; }
@media (min-width: 54rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 6rem); align-items: start; }
  .split-head { position: sticky; top: 2.5rem; }
}
.split .band-note { margin-top: 1.75rem; }
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.row { padding-block: clamp(1.4rem, 2.4vw, 1.9rem); border-top: 1px solid var(--border); }
.row h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 600; letter-spacing: -0.016em; line-height: 1.25; text-wrap: balance; }
.row p { margin-top: 0.55rem; color: var(--muted); line-height: 1.55; max-width: 46ch; text-wrap: pretty; }

/* ---- cannot / can: one ledger ----
   Cannot first and larger, set as five lines at heading size with the ring
   and the cross, because what the connection cannot do is the question both
   readers bring; can is the quiet column on the right, past one vertical
   hairline. Stacked, cannot comes first and can follows. */
.powers { margin-top: clamp(2.25rem, 4vw, 3rem); display: grid; gap: 2.5rem; }
@media (min-width: 54rem) {
  .powers { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; }
  .power-cannot { padding-right: clamp(2rem, 5vw, 4rem); }
  .power-can { padding-left: clamp(2rem, 5vw, 4rem); border-left: 1px solid var(--border); }
}
.power h3 {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text); padding-bottom: 0.9rem;
}
.power-can h3 { color: var(--muted); }
.power ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.power li { display: flex; align-items: flex-start; gap: 0.9rem; border-top: 1px solid var(--border); }
.power-cannot li {
  padding-block: 1.05rem; color: var(--text);
  font-size: clamp(1.15rem, 1.75vw, 1.4rem); font-weight: 600; letter-spacing: -0.014em; line-height: 1.3; text-wrap: balance;
}
.power-cannot .mk { width: 1.75rem; height: 1.75rem; margin-top: 0.02em; }
.power-cannot .mk svg { width: 0.85rem; height: 0.85rem; }
.power-can li { padding-block: 0.9rem; color: var(--muted); line-height: 1.5; }
.power-can .mk { margin-top: 0.15em; }

/* ---- the steps: the numerals at display size are the graphic ----
   The head is centred; the three steps stand in hairline-topped columns
   under a 1, a 2 and a 3 set large, light and faint green, the only
   ornament the section has. Stacked, the columns become hairline-topped
   blocks. */
.centre { text-align: center; }
.centre .band-title, .centre .band-lead { margin-inline: auto; }
.steps { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; gap: 2.25rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } }
.step { border-top: 1px solid var(--border); padding-top: 1.4rem; }
.step-num {
  display: block; margin-bottom: 0.9rem;
  font-size: clamp(3.25rem, 6vw, 4.5rem); font-weight: 400; line-height: 1; letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--accent) 42%, var(--bg)); font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.step p { margin-top: 0.55rem; color: var(--muted); line-height: 1.55; max-width: 34ch; text-wrap: pretty; }

/* ---- the protection band: a hairline grid on ink, the hero's field behind it, still ----
   The same faint grid and the same soft light as the hero, in the ink
   band's own colours, off to the upper right and NOT animated: the middle
   keeps still, and the field returns once so the page reads as one thing.
   Four guards in hairline columns (two by two on a tablet, stacked on a
   phone), then the link to the security page. */
.band-ink {
  position: relative; overflow: hidden;
  background: var(--ink-bg); color: var(--ink-fg);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
.band-ink a { color: var(--ink-fg); }
.band-ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  mask-image: radial-gradient(55% 85% at 82% 30%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(55% 85% at 82% 30%, #000 20%, transparent 100%);
}
.band-ink::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(26% 46% at 80% 32%, color-mix(in srgb, var(--ink-accent) 14%, transparent), transparent 70%);
}
.band-ink > .shell { position: relative; z-index: 1; }
.guards {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  display: grid; gap: 0; border-bottom: 1px solid var(--ink-border);
}
.guard { border-top: 1px solid var(--ink-border); padding: 1.6rem 0 1.8rem; }
@media (min-width: 40rem) {
  .guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guard { padding-inline: clamp(1.25rem, 2.6vw, 2rem); }
  .guard:nth-child(odd) { padding-left: 0; }
  .guard:nth-child(even) { border-left: 1px solid var(--ink-border); padding-right: 0; }
}
@media (min-width: 62rem) {
  .guards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guard, .guard:nth-child(odd), .guard:nth-child(even) {
    padding-inline: clamp(1.25rem, 2.6vw, 2rem); border-left: 1px solid var(--ink-border);
  }
  .guard:first-child { padding-left: 0; border-left: 0; }
  .guard:last-child { padding-right: 0; }
}
.guard h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.014em; line-height: 1.25; text-wrap: balance; }
.guard p { margin-top: 0.55rem; color: var(--ink-muted); line-height: 1.55; text-wrap: pretty; }
.more { margin-top: 2.25rem; font-weight: 600; font-size: var(--fs-1); }
.more a { display: inline-flex; align-items: center; gap: 0.45rem; }
.more a svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.band-ink .more a { color: var(--ink-accent); }

/* ---- questions ---- */
.qa { display: grid; gap: 0; margin-top: 2.25rem; }
@media (min-width: 54rem) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; } }
.qa > div { padding-block: 1.35rem; border-top: 1px solid var(--border); }
.qa h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.012em; }
.qa p { margin-top: 0.55rem; color: var(--muted); line-height: 1.6; }

/* ---- the fat footer ---- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.site-footer .shell { padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.6rem; font-size: var(--fs-0); color: var(--muted); }
.foot-cols { display: grid; gap: 2rem; }
@media (min-width: 40rem) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 2.5rem; } }
.foot-col h2 {
  font-size: var(--fs-eyebrow); font-weight: 600; color: var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.foot-col ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }
.foot-col li { margin-top: 0.45rem; line-height: 1.6; }
.site-footer a { color: var(--muted); text-decoration: none; transition: color 120ms ease; }
.site-footer a:hover { color: var(--accent); }
/* the early-access box opens on the click (zero JS): the link targets its
   block, and the block shows only while it, or its error twin, is the target;
   the server's invalid-email redirect lands on /#try-again, which shows the
   box with the note under it */
.access { margin-top: 0.9rem; }
.access > #try-again { display: none; }
.access:target > #try-again, .access > #try-again:target { display: block; }
.access:target > .btn-reveal, .access:has(> #try-again:target) > .btn-reveal { display: none; }
.access-form {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0.5rem; margin: 0; max-width: 18rem;
}
.access-form input[type="email"] {
  font: 400 var(--fs-0)/1.4 var(--font); color: var(--text); background: var(--bg);
  padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--r);
  min-width: 0; transition: border-color 120ms ease;
}
.access-form input[type="email"]:hover { border-color: var(--muted); }
.access-form input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.access .btn {
  font-size: 0.85rem; padding: 0.45rem 0.9rem; text-align: center;
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  transition: background 140ms ease, color 140ms ease;
}
.access .btn:hover { background: var(--accent); color: var(--on-accent); filter: none; }
.hp { position: absolute; left: -9999px; }   /* honeypot, off-screen, not display:none */
.form-error { display: none; }
:target > .form-error {
  display: block; margin-top: 0.7rem; font-weight: 600; color: var(--text);
  background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0; padding: 0.55rem 0.85rem;
}
.foot-pros ul { margin-top: 1rem; }
.foot-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem;
  margin-top: 2.75rem; padding-top: 1.35rem; border-top: 1px solid var(--border);
}
.foot-bar .wordmark { height: 0.85rem; }


/* visually hidden: a label a screen reader says and the page does not show */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- the long pages (privacy, terms, security, docs) ----
   Same shell, same header, same footer, but the body keeps the narrow
   measure, so no legal text reflows and no effective date moves. */
.prose { padding-block: clamp(2.75rem, 6vw, 4rem) clamp(3rem, 6vw, 4.5rem); max-width: var(--measure); }
.prose h1 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; }
.prose h2 { font-size: 1.15rem; font-weight: 600; margin-top: 2.4rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.prose p, .prose ul { margin-top: 0.75rem; }
.prose li { margin-top: 0.5rem; }
.prose li::marker { color: var(--accent); }
.prose .meta { font-size: var(--fs-0); color: var(--muted); margin-top: 0.85rem; }

/* ---- simple centered pages (404, thanks) ---- */
.simple { text-align: center; padding-block: clamp(4rem, 12vw, 7rem); }
.simple h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -0.022em; }
.simple p { color: var(--muted); margin-top: 0.9rem; max-width: 34rem; margin-inline: auto; font-size: var(--fs-lead); }
.simple a { display: inline-block; margin-top: 1.6rem; }