/* ===========================================================================
   ANTELIC — the landing page.
   Hand-written against the generated tokens in tokens.css. No framework, no
   build step, no dependency: this page is nine files and a folder of fonts.

   THE WORLD. The same warm limewashed room as the app: `--c-bg` is the sand
   wall, `--c-surface` is a sheet of ivory laid on it and lifting off it on a
   soft warm shadow, `--c-ink` is what you read. A channel drawn in `--c-bg`
   INSIDE a sheet is a genuine recess — that is the whole spatial grammar, and
   every figure below is built out of it.

   THE GRAMMAR THAT CARRIES THE HONESTY. A SHEET is a mechanism the software
   actually performs; the BARE WALL is where the site makes an argument. So the
   four promises, the provenance ledger and the security list all sit on bare
   wall, on purpose: a commitment drawn on a sheet would look like a feature.

   THE THEME. Bare branches, no leaves, thrown across the limewash like the
   shadow of a window. They are not decoration: a branch is already a timeline
   — one line with irregular events hanging off it — and the page's signature
   figure (`.recline`) is that same line, held straight and dated. Background
   and foreground are the same geometry at two scales.

   AND THE MARK IS THE THIRD SCALE. The branch standing in the logo lockup is
   grown by the same seeded generator, from the same rules and with the same
   wander, as the ones on the wall behind it (scripts/gen-website.mjs). The
   wallpaper is held at 7.5% ink so it is felt rather than seen; the same tree
   at full ink, trimmed to its own edges, is the mark. One drawing, two
   distances.

   GEOMETRY. Strictly rectangular. `border-radius: 0` everywhere, no
   exceptions; adjacent controls sit flush and share one hairline seam.

   MOTION LIVES IN `motion.css`, not here. Every curve and every duration on
   the site is a named token in that file; this one contains no bare `ease`,
   no `ease-in-out` and no unnamed cubic-bezier.
   =========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-regular);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* The limewash. The app's own 256px tile, mean-matched to the ground so it
   modulates the wall rather than darkening it (scripts/gen-grain.mjs). Fixed,
   so the wall stays still while the page moves over it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../media/limewash-grain.png');
  background-size: 256px 256px;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

img, svg { display: block; max-width: 100%; }
b { font-family: var(--font-bold); font-weight: var(--fw-bold); }
em { font-style: italic; }

a { color: var(--c-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-pine); }

:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 2px; }

/* ---------------------------------------------------------------- page ---
   One 1px rule down the left gutter, full page height: a lab report's margin
   rule, and the same line the figures are made of. Below 1024 it lies down
   and becomes each section's top hairline, so the device survives the
   breakpoint instead of disappearing. */
.page {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.band { position: relative; padding: 64px 0; overflow: hidden; }
.band + .band { border-top: 1px solid var(--c-border); }
.band--hero { padding-top: 40px; }

/* A rougher ground: the same limewash tile at 3x, so the trowel marks read
   coarse — stone rather than plaster. Same material, no extra bytes. */
.band--stone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../media/limewash-grain.png');
  background-size: 768px 768px;
  opacity: 0.11;
  pointer-events: none;
}

.wrap { position: relative; z-index: 1; }
.col-text > *:first-child { margin-top: 0; }
.col-text p { max-width: 63ch; }
/* stacked, the figure needs its own air; side by side it takes it from the gap */
.col-fig { margin-top: 36px; }

/* -------------------------------------------------------------- branches ---
   Ink at 7.5%, drawn at half the line weight draft one used: about a third of
   draft one's ink on the wall, which is the whole point — these are faded ink
   silhouettes and not a pattern. Below about 6% they stop being branches at
   all and become an accident in the limewash; at draft one's 10% and full
   weight they competed with the logo, and a background branch that competes
   with the logo is two logos. Each one is placed on wall that carries no
   text — the empty half of a section, the space under a closing line — so
   nothing is ever read through a branch. They are `aria-hidden` images with an
   empty alt and never carry meaning; even so, ink on branch-darkened wall
   still measures about 9.4:1. */
.branch {
  position: absolute;
  opacity: 0.075;
  pointer-events: none;
  user-select: none;
  height: auto;
  z-index: 0;
}
.branch--hero { bottom: -70px; left: -150px; width: min(58vw, 620px); }
.branch--high { top: -170px; right: -60px; width: min(62vw, 760px); }
.branch--close { bottom: -110px; right: -60px; width: min(76vw, 840px); }
.branch--join { bottom: -80px; right: -140px; width: min(62vw, 720px); transform: scaleX(-1); }

/* ------------------------------------------------------------- typography ---
   Bellefair for display, Lato for reading, Quicksand on compact labels only,
   IBM Plex Mono on genuinely tabular numerals and nowhere else. */
h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: var(--fw-title);
  color: var(--c-ink);
  letter-spacing: 0.004em;
  margin: 0 0 20px;
}
h1 { font-size: clamp(2.45rem, 6vw, 4.2rem); line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.55rem); line-height: 1.1; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.16; }

p { margin: 0 0 18px; }
.deck { font-size: 17px; line-height: 1.6; color: var(--c-ink-soft); max-width: 60ch; }
.micro { font-size: 14.5px; color: var(--c-muted); max-width: 58ch; }

.kicker {
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-synergy);
  margin: 0 0 14px;
}
.kicker--sep { margin-top: 38px; }

.chip {
  display: inline-block;
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 5px 9px 4px;
  line-height: 1.2;
  white-space: nowrap;
}
/* One chip, one tone, and no modifiers: the coloured `chip--live` /
   `chip--warn` pair went out with the state ledger they labelled. The two
   chips left on the site — `Confirm before saving` and `In development` —
   name a step and a state, not a status, and a status palette for that is a
   legend for a chart with no series in it. */

/* The recess: cut into the wall rather than laid on it. */
.recess {
  margin: 30px 0 0;
  max-width: 63ch;
  background: var(--c-inset-wash);
  border: 1px solid var(--c-border);
  padding: 20px 22px 4px;
}
.recess .chip { margin-bottom: 12px; }
.recess p { font-size: 15.5px; color: var(--c-ink-soft); }

/* ---------------------------------------------------------------- buttons ---
   Flush and rectangular: adjacent controls share one hairline seam, never a
   gap. A filled `--c-pine` action is labelled `--c-on-accent`, never ink. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* transition + press feedback: motion.css */
}
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 13px; }
.btn--fill { background: var(--c-pine); border-color: var(--c-pine); color: var(--c-on-accent); }
.btn--fill:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-accent); }
.btn--outline { border-color: var(--c-ink); color: var(--c-ink); }
.btn--outline:hover { background: var(--c-pine-tint); color: var(--c-ink); }
.btn--ghost { color: var(--c-ink); padding: 0 14px; }
.btn--ghost:hover { color: var(--c-pine); text-decoration: underline; }

.cta-row { display: flex; flex-wrap: wrap; margin: 26px 0 0; }
.cta-row .btn + .btn { margin-left: -1px; }
.under-cta { margin: 14px 0 0; font-size: 13.5px; color: var(--c-muted); }
.under-cta a { color: var(--c-ink-soft); }

/* --------------------------------------------------------------- masthead ---
   THE LOCKUP: a bare winter branch, then the wordmark, then the line under
   both. The geometry is the CEO's, and it is built here as arithmetic rather
   than as eyeballed padding so it survives every size the lockup is set at.

     · The logo occupies a 5:2 box (5in × 2in in the drawing it came from).
     · Its content is aligned LEFT and BOTTOM inside that box.
     · The margins are fractions of the box: left 0.5/5 and right 0.1/5 of the
       WIDTH, top and bottom 0.1/2 of the HEIGHT.

   One variable drives all of it. With H = --logo-h the box is 2.5H wide, so
   those four fractions are, in H:  left 0.25H · right 0.05H · top 0.05H ·
   bottom 0.05H. They are written that way below rather than as percentages
   because a percentage padding in CSS resolves against the CONTAINING BLOCK's
   width, not the element's own — which would silently untie the margins from
   the box the moment the masthead reflowed.

   That leaves a content box 2.2H wide and 0.9H tall. The mark takes the full
   height and its own 70:158 ratio (0.3987H wide), a 0.10H gap follows, and the
   wordmark gets the remaining 1.7013H. Bellefair sets "Antelic" in 2.704em
   plus 7 × 0.01em of tracking = 2.774em, so the type that exactly fills
   1.7013H is 1.7013 / 2.774 = 0.6133H — which is why the wordmark is sized off
   --logo-h and not off a round pixel number. The negative bottom margin is
   Bellefair's own 0.21em descent, so what lands on the bottom margin is the
   BASELINE and not the empty space under it.

   REDRAW THE MARK AND THIS NUMBER MOVES. 0.6133 is (2.2 − 0.9 × markW/markH −
   0.1) / 2.774; the mark's ratio is printed by `npx tsx scripts/gen-website.mjs`
   next to the file it wrote, and it is the same ratio the <img> carries as its
   width/height.

   ONE BLOCK OF MARKUP, TWO BEHAVIORS. Under 900px the <details> is a real
   disclosure widget and the list is a drawer that lifts off the wall on the
   app's own `--shadow-drawer`. At 900px and up the <details> stops generating
   a box (`display: contents`), its summary is removed, and the same list is
   simply the row. No JavaScript in either direction, and the markup is
   byte-identical on all five pages — which is what
   `scripts/check-website.mjs` enforces. */
.masthead {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 26px 0 20px;
  border-bottom: 1px solid var(--c-border);
}
.lockup { --logo-h: 50px; text-decoration: none; display: block; }
.logo {
  display: flex;
  align-items: flex-end;      /* content on the bottom margin */
  justify-content: flex-start; /* content on the left margin */
  gap: calc(var(--logo-h) * 0.1);
  height: var(--logo-h);
  aspect-ratio: 5 / 2;
  /* top · right · bottom · left, all of them in H (see the note above) */
  padding: calc(var(--logo-h) * 0.05) calc(var(--logo-h) * 0.05)
           calc(var(--logo-h) * 0.05) calc(var(--logo-h) * 0.25);
}
.logo-mark { height: 100%; width: auto; }
.wordmark {
  display: block;
  font-family: var(--font-title);
  font-weight: var(--fw-title);
  font-size: calc(var(--logo-h) * 0.6133);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  margin-bottom: calc(var(--logo-h) * 0.6133 * -0.21);
}
/* the standfirst hangs off the branch's own left edge, not off the box's:
   the visible left edge of the lockup is the mark, so that is the edge the
   line under it is set to */
.slogan {
  display: block;
  margin: 8px 0 0 calc(var(--logo-h) * 0.25);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
/* The word warms; the branch does not. Ink is ink — a mark that recolours on
   hover is a button pretending to be a logo. */
.lockup:hover .wordmark { color: var(--c-pine); }

/* --- the drawer, under 900 ------------------------------------------------
   Top-left, the way the app's own navigation is top-left. The tab is three
   1px rules and a word: no icon font, no SVG, nothing that has to load. */
.drawer { order: -1; width: 100%; position: relative; }
.drawer-tab {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.drawer-tab::-webkit-details-marker { display: none; }
.drawer-bars { display: block; width: 15px; }
.drawer-bars i { display: block; height: 1px; background: var(--c-ink); opacity: 0.75; }
.drawer-bars i + i { margin-top: 4px; }
/* open: the middle rule stands down and the outer two close on it — the same
   hairline vocabulary, rearranged. Nothing rotates through 45 degrees. */
.drawer[open] .drawer-tab { background: var(--c-pine); border-color: var(--c-pine); color: var(--c-on-accent); }
.drawer[open] .drawer-bars i { background: var(--c-on-accent); opacity: 1; }
.drawer[open] .drawer-bars i:nth-child(1) { transform: translateY(5px); }
.drawer[open] .drawer-bars i:nth-child(2) { opacity: 0; }
.drawer[open] .drawer-bars i:nth-child(3) { transform: translateY(-5px); }

.nav {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  left: 0;
  min-width: 244px;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-drawer);
  padding: 6px 0;
}
.nav-link {
  padding: 13px 18px;
  font-size: 15px;
  text-decoration: none;
  color: var(--c-ink);
}
.nav-link:hover { background: var(--c-pine-tint); color: var(--c-ink); }
.nav-gap { display: block; height: 1px; margin: 6px 0; background: var(--c-border); }
.nav .btn { justify-content: flex-start; margin: 0 14px 8px; }
.nav .btn--ghost { padding-left: 4px; margin-bottom: 4px; justify-content: flex-start; }

/* --- the same list, standing still, at 900 and up -----------------------
   A closed <details> hides its content, and there are two eras of how a
   browser does that. Both are answered, so the row is never missing:
     · current engines hide it with `content-visibility` on the
       `::details-content` pseudo-element, which is turned back on here;
     · older engines hid it via an internal slot, which `display: contents`
       on the <details> removes along with the box.
   Belt and braces on a nav that would otherwise vanish. */
@media (min-width: 900px) {
  .drawer { display: contents; }
  .drawer::details-content { content-visibility: visible; block-size: auto; }
  .drawer-tab { display: none; }
  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav-link {
    padding: 6px 0;
    margin-right: 26px;
    font-size: 14.5px;
    color: var(--c-ink-soft);
    border-bottom: 1px solid transparent;
  }
  .nav-link:hover { background: none; color: var(--c-pine); }
  /* the current page: one 1px ink rule. No colour change, no pill. The state
     lives on <html data-page>, so the masthead markup itself stays identical
     on every page and the fence can compare it byte for byte. */
  html[data-page='how']   .nav-link[href='/how-it-works/'],
  html[data-page='trust'] .nav-link[href='/trust/'],
  html[data-page='about'] .nav-link[href='/about/'],
  html[data-page='faq']   .nav-link[href='/faq/'] {
    color: var(--c-ink);
    border-bottom-color: var(--c-ink);
  }
  /* the one filled control, set apart from the list rather than sitting in it */
  .nav-gap { height: 20px; width: 1px; margin: 0 24px 0 4px; background: var(--c-border); }
  .nav .btn { margin: 0; }
  .nav .btn--ghost { padding: 0 0 0 14px; margin: 0; }
}

/* ---------------------------------------------------------------- figures ---
   A sheet of ivory laid on the wall, lifted on the app's own warm shadow. */
.figblock { margin: 0; }
.fig {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.fig-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.fig-title {
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.fig-cap, .fig-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 50ch;
}
.fig-note { max-width: 46ch; }

/* --- the plate: the page's second register -------------------------------
   A DIAGRAM is drawn on the wall in the app's own instruments. A SCREENSHOT
   is the product itself and not an argument about it, so it is mounted rather
   than drawn: the same ivory sheet, a narrower margin, and one hairline round
   the capture. Without that hairline the app's own sand ground runs straight
   into the sheet it is lying on and the picture loses its edge — the two
   grounds are, deliberately, the same two grounds.

   Only the two stone bands carry a plate. The bare-wall sections — the gap,
   the four promises, the security list — are argument, and argument is not
   illustrated. */
.fig--plate { padding: 12px; }
.fig--plate img { width: 100%; height: auto; border: 1px solid var(--c-border); }

.plate-row, .plate-wide { margin: 36px 0 0; }
/* portrait: a phone-width column stays a phone-width column, whatever room
   the grid offers it */
.plate-row .fig--plate { max-width: 400px; }
.plate-legend { margin-top: 22px; }
.plate-legend p { max-width: 60ch; }
.plate-legend > *:first-child { margin-top: 0; }
.plate-legend > *:last-child { margin-bottom: 0; }

/* --- the record line: the signature figure -------------------------------
   `--axis` is where the line sits in the figure's height. It is NOT halfway:
   a document, its caption and its stem stand well above the line, and a tick
   is one short stem and one word below it, so the line rides low. */
.recline {
  position: relative;
  /* Sized so the tallest stack — document, its two-line caption and the longest
     stem — clears the axis. A document that overflows this box escapes the
     sheet and lands on the line above it; it did, at 768px, before this. */
  height: 250px;
  --axis: 68%;
}
.rl-axis { position: absolute; left: 0; right: 0; top: var(--axis); height: 1px; background: var(--c-ink); opacity: 0.8; }
.rl-item {
  position: absolute;
  left: var(--x);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
}
.rl-up { bottom: calc(100% - var(--axis)); }
.rl-dn { top: var(--axis); }
.rl-stem { width: 1px; height: var(--stem); background: var(--c-muted); opacity: 0.45; }
.rl-node {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 9px;
  height: 9px;
  background: var(--c-ink);
}
/* the document itself: a recess in the sheet, with its lines of type */
.rl-doc {
  width: 104px;
  height: 72px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rl-doc i { display: block; height: 1px; background: var(--c-muted); opacity: 0.5; }
.rl-doc i:nth-child(1) { width: 62%; }
.rl-doc i:nth-child(3) { width: 78%; }
.rl-label { margin-top: 9px; font-size: 12.5px; line-height: 1.3; text-align: center; color: var(--c-ink); }
.rl-label span { display: block; color: var(--c-muted); font-size: 11.5px; }
.rl-tick { margin-top: 0; font-size: 12px; color: var(--c-muted); white-space: nowrap; }

/* --- the draft you check ------------------------------------------------- */
.draft { list-style: none; margin: 16px 0 0; padding: 0; }
.draft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 18px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--c-border);
}
.draft-row:last-child { border-bottom: 1px solid var(--c-border); }
.draft-name { font-size: 14.5px; color: var(--c-ink); }
/* the value cell is a recess, and it is deliberately empty */
.draft-cell { height: 22px; background: var(--c-bg); border: 1px solid var(--c-border); }
.draft-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--c-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-on-accent);
}
.draft-box svg { width: 11px; height: 11px; }
.is-checked .draft-box { background: var(--c-pine); border-color: var(--c-pine); }

/* --- the lens: two flush cells, and the band under them ------------------
   Radio inputs, not buttons: the control works with no JavaScript at all,
   arrow keys move between the two cells for free, and the bar is correct at
   rest with no animation having run. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.lens { display: flex; background: var(--c-bg); border: 1px solid var(--c-border); }
.lens-cell {
  min-height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  cursor: pointer;
  /* transition: motion.css, on the app's own lens curve */
}
.lens-cell + .lens-cell { border-left: 1px solid var(--c-border); }

.track { position: relative; height: 34px; margin: 24px 0 0; }
.track-channel {
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 28px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
/* At rest this IS the standard interval. The optimal state only overrides it. */
.track-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20%;
  width: 48%;
  background: var(--c-pine);
  /* transition: motion.css, --dur-lens / --ease-lens, app-identical */
}
/* the needle: 2px of ink with ivory clearance either side, standing 3px proud
   of the channel top and bottom — it never moves and never recolours */
.track-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(54% - 2px);
  width: 4px;
  background: var(--c-surface);
  display: flex;
  justify-content: center;
}
.track-needle i { width: 2px; height: 100%; background: var(--c-ink); }
.track-read { margin: 14px 0 0; font-size: 13px; color: var(--c-muted); min-height: 2.2em; }
.track-read span { display: block; }

#lens-std:checked ~ .fig-head .lens [for='lens-std'],
#lens-opt:checked ~ .fig-head .lens [for='lens-opt'] {
  background: var(--c-pine);
  color: var(--c-on-accent);
}
#lens-std:focus-visible ~ .fig-head .lens [for='lens-std'],
#lens-opt:focus-visible ~ .fig-head .lens [for='lens-opt'] {
  outline: 3px solid var(--c-amber);
  outline-offset: 2px;
}
/* The contracted target deliberately stops BELOW the needle: a value inside
   standard but outside optimal is the case the lens exists to show, and it is
   headroom, never a flag. */
#lens-opt:checked ~ .track .track-band { left: 29%; width: 19%; background: var(--c-synergy); }
#lens-std:checked ~ .track-read .read-opt,
#lens-opt:checked ~ .track-read .read-std { display: none; }

/* --- the two-week bar chart ----------------------------------------------
   The app's Segments instrument, drawn as the chart it actually is: fourteen
   bars, gapped rather than flush, standing on one hairline of ink. Flush cells
   read as a calendar strip — a row of days — and the copy calls this a bar
   chart, so the figure has to agree with the copy rather than the other way
   round.

   Each scheduled day keeps its channel: that is what makes a missed day an
   EMPTY bar (an outline with nothing in it) rather than an absent one. A day
   with nothing due has no channel at all, so the two can never be read as the
   same thing — which is the whole point of the instrument. Status is height
   and tone, never colour: nothing here goes red. */
.bars {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 74px;
  margin: 16px 0 0;
  border-bottom: 1px solid var(--c-ink);
}
.bars i { position: relative; flex: 1; background: var(--c-bg); border: 1px solid var(--c-border); }
/* the fill runs over its own outline, so a full day reads as one solid bar */
.bars i::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: var(--f);
  background: var(--c-pine);
}
/* nothing was due: no channel at all, so it can never read as a miss */
.bars i.is-none { background: none; border: 0; }
.bars i.is-none::after { content: none; }

/* -------------------------------------------------------- the promise ---
   The four things Antelic does not do. On the bare wall, ruled like a ledger,
   the statement in the left column and its reasoning in the right: a card
   would make a commitment look like a feature, and these are checkable
   claims rather than a feature grid. (The class name is draft one's, kept
   deliberately: the ruled-row instrument did not change, only the copy set
   in it, and renaming a class to match a headline is churn.) */
.refusals { margin: 34px 0 0; }
.refusal { padding: 26px 0; border-top: 1px solid var(--c-border); }
.refusal:last-child { border-bottom: 1px solid var(--c-border); }
.refusal h3 { margin: 0 0 10px; }
.refusal p { margin: 0; max-width: 62ch; color: var(--c-ink-soft); font-size: 15.5px; }
.lane { margin: 30px 0 0; max-width: 68ch; font-size: 15px; color: var(--c-ink-soft); }

/* Ruled rows, no chips and no cards: used for the short lists that are a set
   of facts of equal weight — what else the product does, and how the record is
   actually held. A lead-in sentence in ink, the rest of the row in ink-soft. */
.also { list-style: none; margin: 26px 0 0; padding: 0; max-width: 66ch; }
.also li { padding: 13px 0; border-top: 1px solid var(--c-border); font-size: 15px; color: var(--c-ink-soft); }
.also li:last-child { border-bottom: 1px solid var(--c-border); }
.also b { color: var(--c-ink); }

/* ----------------------------------------------------------------- footer ---*/
.foot { border-top: 1px solid var(--c-border); padding: 44px 0 56px; }
/* the sign-off carries the whole lockup, not a lone word: one logo, two sizes */
.lockup--sm { --logo-h: 38px; }
.foot .lockup { margin-bottom: 18px; }
.foot-legal { max-width: 68ch; font-size: 14px; color: var(--c-ink-soft); }
.foot-note { max-width: 68ch; font-size: 13px; color: var(--c-muted); }
.colophon { display: block; }
.foot-meta { display: block; margin-top: 10px; }

/* ================================================================= V2 =====
   Five pages instead of one. Everything below is new surface, and none of it
   is a new material: the whole vocabulary is still one hairline, one recess,
   one ivory sheet and one square node.
   ========================================================================= */

/* --- the hero standfirst ---------------------------------------------------
   Three words naming the category, above the line that makes a promise of it.

   It is set in the display serif rather than as a kicker on purpose. A
   Quicksand kicker would file "Premium medical AI" with the section labels —
   Records, Insights, Data handling — and it is not a label, it is the first
   claim on the page. So it gets Bellefair at half the H1's size, ink-soft,
   over a 24px rule: quieter than the headline, in the same voice, and the
   shared left edge makes the two read as one sentence arriving in two
   breaths. The slogan proper stays where a slogan belongs, under the
   wordmark in the masthead, and is not repeated here. */
.hero-slug {
  margin: 0 0 18px;
  font-family: var(--font-title);
  font-weight: var(--fw-title);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--c-ink-soft);
}
.hero-slug::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin-bottom: 14px;
  background: var(--c-ink);
}

/* --- the inner-page head ---------------------------------------------------
   Every page but home opens the same way: kicker, one declarative line, one
   deck. No hero figure — the home page keeps that, and a second one would
   make the site read templated. */
.pagehead { padding-top: 40px; padding-bottom: 40px; }
.pagehead h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.pagehead .deck { max-width: 64ch; }

/* --- the spine: the record line, stood up ----------------------------------
   Home's signature figure is three documents docked on one horizontal rule.
   The mechanism, walked through step by step, is that same rule turned
   ninety degrees — one line, irregular events hanging off it, a square node
   where each one lands. Background branch, record line and this are the same
   geometry at three scales, which is the point. */
.spine { list-style: none; margin: 40px 0 0; padding: 0; position: relative; }
/* ink rather than border: this is the record line, and the record line is
   drawn in ink. Held at 0.18 so it reads as a rule the eye can follow down
   the page without competing with the type standing on it. */
.spine::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--c-ink);
  opacity: 0.18;
}
.step { position: relative; padding: 0 0 46px 30px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--c-ink);
}
.step h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-bottom: 14px; }
.step-kicker {
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-synergy);
  margin: 0 0 12px;
}
/* the measure holds inside the sequence too: a step is still reading copy,
   and a paragraph allowed to run the full grid is not */
.step > p { color: var(--c-ink-soft); max-width: 68ch; }
.step .figblock { margin-top: 26px; max-width: 560px; }

/* the same instrument, tight: a short sequence with no headings, used where a
   process has to be walked but not argued */
.spine--tight .step { padding-bottom: 22px; }
.spine--tight .step::before { top: 5px; width: 7px; height: 7px; left: -3px; }
.spine--tight .step p { margin: 0; font-size: 15.5px; color: var(--c-ink-soft); max-width: 64ch; }
.spine--tight .step-kicker { margin-bottom: 6px; letter-spacing: 0.17em; color: var(--c-muted); }

/* --- the compact four-step strip, home only --------------------------------
   Deliberately NOT the spine. The same four words, ruled as a row rather than
   a column, so a reader who visits both pages meets the sequence twice and
   never meets the same block twice. */
.strip { margin: 34px 0 0; }
.strip-item { padding: 20px 0; border-top: 1px solid var(--c-border); }
.strip-item:last-of-type { border-bottom: 1px solid var(--c-border); }
.strip-item p { margin: 0; font-size: 15.5px; color: var(--c-ink-soft); }
.strip .step-kicker { margin-bottom: 8px; }

/* --- the onward control ----------------------------------------------------
   One conversion control per page lives in the masthead. This is the other
   thing a page is allowed to end with: a link to the next argument, ruled top
   and bottom, with the record line's own square node at the end of it. */
.onward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 40px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-ink);
  font-family: var(--font-title);
  font-weight: var(--fw-title);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  /* narrow enough that the node lands just past the copy rather than
     stranded at the end of an empty rule */
  max-width: 48ch;
}
.onward i { flex: none; width: 9px; height: 9px; background: var(--c-ink); }
.onward:hover { color: var(--c-pine); }
.onward:hover i { background: var(--c-pine); }
.onward span { display: block; }
.onward small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-regular);
  font-weight: var(--fw-regular);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-muted);
}

/* --- the unit ledger, home -------------------------------------------------
   The one figure that draws the compound database. Two columns of plain type
   on a sheet: a name, and the unit that name is actually measured in. No
   quantity appears — a number here would be a dose, and this page never
   prints one. */
.unitledger { list-style: none; margin: 14px 0 0; padding: 0; }
.unitledger li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-top: 1px solid var(--c-border);
  font-size: 14.5px;
}
.unitledger li:last-child { border-bottom: 1px solid var(--c-border); }
.unitledger b { font-family: var(--font-regular); font-weight: var(--fw-regular); color: var(--c-ink); }
.unitledger span {
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 4px 9px 3px;
  white-space: nowrap;
}

/* --- the read-out figure, how-it-works -------------------------------------
   Three lines and no score. The chevron-free affordance is a square: the
   same node the record line docks its documents on, meaning "there is data
   under this". */
.readout { list-style: none; margin: 16px 0 0; padding: 0; }
.readout li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--c-border);
  font-size: 14.5px;
  color: var(--c-ink);
}
.readout li:last-child { border-bottom: 1px solid var(--c-border); }
.readout i { flex: none; width: 7px; height: 7px; background: var(--c-muted); }

/* --- the provenance ledger, trust ------------------------------------------
   Two columns on the bare wall, because it is a claim and not a mechanism:
   what an answer is handed, and what it is not. The second column is the one
   almost nobody publishes, so it is set in the same weight as the first. */
/* the bottom margin lives here rather than on whatever follows, because the
   next block is a .col-text whose first child has its top margin zeroed */
.ledger { margin: 30px 0 46px; }
.ledger-head {
  display: none;
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ledger-row { padding: 20px 0; border-top: 1px solid var(--c-border); }
.ledger-row:last-child { border-bottom: 1px solid var(--c-border); }
.ledger-row p { margin: 0; font-size: 15px; color: var(--c-ink-soft); }
.ledger-row p + p { margin-top: 12px; }
.ledger-row b { display: block; margin-bottom: 6px; color: var(--c-ink); }
.ledger-not b { color: var(--c-amber-text); }

/* --- the dictionary entry, about -------------------------------------------
   The name section is set as an ENTRY, not as a pull quote: a rule top and
   bottom, the headword in the display serif with interpuncts between the
   syllables, the pronunciation one size down, the senses on a hanging indent
   so the numbers stand out in the left margin, and the etymology last and
   quiet. A paragraph with a word in italics would just be a paragraph.

   THE MONO FACE APPEARS HERE AND NOWHERE ELSE ON THE SITE — on the phonetic
   transcription, which is the one string on these five pages that is read
   character by character rather than as words.

   AND EVERY GLYPH IN IT IS ONE THE SITE ACTUALLY SHIPS. The four self-hosted
   families were checked codepoint by codepoint against this entry, which is
   the only copy on the site reaching outside latin-1:
     · U+0259 schwa — IBM Plex Mono has it, so `.entry-ipa` sets it;
     · U+02C8 primary stress — IBM Plex Mono does NOT, and Quicksand does, so
       that one mark is set in the accent face by `.entry-stress` rather than
       left to whatever the reader's machine calls `monospace`;
     · U+025B open e — no face on the site carries it, so the transcription is
       broad (/en…/ rather than /ɛn…/), which is a real convention and not a
       compromise a reader can see.
   The etymology names the Greek roots as en- + telos + echein for the same
   reason: `entelēs` needs U+0113, which Lato does not carry, and a macron in
   Times New Roman inside a line of Lato is exactly the seam a reader notices
   without being able to name it. src/theme/website.test.ts fails the suite if
   a character outside that set ever lands in the copy. */
.entry {
  margin: 30px 0 34px;
  padding: 26px 0 22px;
  border-top: 1px solid var(--c-ink);
  border-bottom: 1px solid var(--c-border);
  max-width: 62ch;
}
.entry-word {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: var(--fw-title);
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: 0.004em;
  color: var(--c-ink);
}
.entry-say { margin: 0 0 20px; font-size: 14.5px; color: var(--c-ink-soft); }
.entry-ipa { font-family: var(--font-mono); font-weight: var(--fw-mono); font-size: 0.95em; }
/* the one mark the mono face does not carry, set in a face the site ships */
.entry-stress { font-family: var(--font-accent-medium); font-weight: var(--fw-accent-medium); }
.entry-sep { color: var(--c-muted); margin: 0 5px; }
.entry-pos {
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
/* the hanging indent: the sense number sits out in the margin, the sense
   itself keeps one measure */
.entry-sense {
  margin: 0 0 14px;
  padding-left: 1.7em;
  text-indent: -1.7em;
  font-size: 15.5px;
  color: var(--c-ink-soft);
}
.entry-sense b { color: var(--c-ink); }
.entry-etym { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--c-muted); }
/* THE ONE PLACE ON THIS SITE WHERE ITALIC MEETS ROMAN, and it happens twice
   in this entry. An italic's overhang plus the following glyph's own left side
   bearing between them swallow a plain word space, so `telos "end"` arrives on
   the page as `telos"end"` and `pl. entelechies` as `pl.entelechies`. Both
   carry their own space rather than relying on the one in the markup — a
   kerning correction, which is why it is set in ems and not in pixels.

   Only the roman AFTER an italic needs it. The respelling `en-TEL-uh-kee` is
   italic too, but what follows it is a middot with symmetric margins of its
   own, and adding to one side of that would show as a lopsided separator. */
.gloss,
.entry-pl { margin-left: 0.16em; }

/* --- the FAQ ---------------------------------------------------------------
   Native <details>. It opens with scripting switched off, it prints open on
   the browser's own terms, and the mark is two 1px rules — a plus that loses
   its upright and becomes a minus. No chevron, no rotation. */
/* bounded, so the disclosure mark sits at the end of a rule the question can
   reach rather than a thousand pixels away from it */
.faq { margin: 30px 0 0; max-width: 76ch; }
.faq details { border-top: 1px solid var(--c-border); }
.faq details:last-of-type { border-bottom: 1px solid var(--c-border); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-weight: var(--fw-title);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.22;
  color: var(--c-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-pine); }
.faq-mark { position: relative; flex: none; width: 13px; height: 13px; margin-top: 7px; }
.faq-mark i { position: absolute; background: var(--c-muted); }
.faq-mark i:nth-child(1) { left: 0; right: 0; top: 6px; height: 1px; }
.faq-mark i:nth-child(2) { top: 0; bottom: 0; left: 6px; width: 1px; }
.faq details[open] .faq-mark i:nth-child(2) { transform: scaleY(0); }
.faq-a { padding: 0 0 24px; max-width: 66ch; }
.faq-a p { margin: 0 0 14px; font-size: 15.5px; color: var(--c-ink-soft); }
.faq-a p:last-child { margin-bottom: 0; }

/* --- the footer ------------------------------------------------------------
   Three columns, sparse, and the legal rows name their real state rather than
   linking to nothing. The full nav is repeated here because the masthead is
   not sticky. */
.foot-cols { display: grid; gap: 30px 40px; margin: 0 0 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-head {
  margin: 0 0 12px;
  font-family: var(--font-accent-semi-bold);
  font-weight: var(--fw-accent-semi-bold);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.foot-col a, .foot-col span { padding: 5px 0; font-size: 14px; color: var(--c-ink-soft); text-decoration: none; }
.foot-col a:hover { color: var(--c-pine); text-decoration: underline; }
.foot-col span { color: var(--c-muted); }

/* ------------------------------------------------------------ 600 and up ---*/
@media (min-width: 600px) {
  body { font-size: 16.5px; }
  .masthead .lockup { --logo-h: 58px; }
  .page { padding: 0 40px; }
  .band { padding: 88px 0; }
  .band--hero { padding-top: 56px; }
  .deck { font-size: 18px; }
  .fig { padding: 26px; }
  .fig--plate { padding: 14px; }
  .cta-row .btn { min-width: 0; }
  .refusal { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 36px; }
  .refusal h3 { margin-bottom: 0; }
  .foot-note { display: flex; justify-content: space-between; gap: 24px; max-width: none; }
  .foot-meta { margin-top: 0; white-space: nowrap; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagehead { padding-top: 56px; }
  .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .strip-item { border-bottom: 1px solid var(--c-border); }
  .ledger-head, .ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .ledger-head { padding-bottom: 10px; }
  .ledger-row p + p { margin-top: 0; }
}

/* ----------------------------------------------------------- 1024 and up ---
   The margin rule stands up, text holds one measure against it, and figures
   break right. */
@media (min-width: 1024px) {
  body { font-size: 17px; line-height: 1.68; }
  .page { padding: 0 64px; }
  .page::before {
    content: '';
    position: absolute;
    left: 96px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--c-border);
    z-index: 0;
  }
  .band + .band { border-top: 0; }
  .band { padding: 112px 0; }
  .band--hero { padding-top: 72px; }
  .masthead, .wrap, .foot .wrap { padding-left: 56px; }
  .wrap--split { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 56px; align-items: start; }
  .col-fig { margin-top: 0; }
  .band--hero .wrap--split { gap: 48px; align-items: center; }
  /* the stagger: the two stone bands drop their figure, the lens band doesn't */
  .band--stone .col-fig { padding-top: 40px; }
  .deck { font-size: 19px; }
  .refusal { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; }
  .fig { padding: 30px; }
  .fig--plate { padding: 16px; }
  .recline { height: 256px; }

  /* A plate is a second row of the same split, spanning it and repeating its
     columns exactly — so the portrait plate's left edge lands on the left edge
     of the diagram above it, and the figure column reads straight down: the
     draft you check, then where it ends up. The legend starts on the same line
     the picture starts on, because it is the label on that picture and not a
     paragraph that happens to sit near it. */
  .plate-row, .plate-wide { grid-column: 1 / -1; margin-top: 0; }
  .plate-row {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .plate-legend { margin-top: 0; }

  /* --- V2 at full width --- */
  /* the head introduces the argument below it and should sit close to it;
     the following band's own 112px does the separating */
  .pagehead { padding-top: 72px; padding-bottom: 16px; }
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; }
  .step { padding-left: 42px; padding-bottom: 64px; }
  .spine--tight .step { padding-bottom: 26px; }

  /* THE SEQUENCE HANGS OFF THE PAGE'S OWN RULE.
     Above 1024 the page already carries a 1px rule down the left gutter for
     its whole height — a lab report's margin rule. Drawing a second rule
     24px away from it read as a printing error, so the spine stops drawing
     one and docks its nodes onto that one instead: the page itself becomes
     the line, and the four steps are events hanging off it. The offset is
     the page rule at 96px less the wrap's content edge at 120px, less half a
     node. Below 1024 the page rule lies down into section hairlines, so the
     spine draws its own again. */
  .spine::before { display: none; }
  .step::before { left: -28px; top: 8px; }
  .spine--tight .step::before { left: -27px; top: 5px; }
  .ledger-head, .ledger-row { gap: 56px; }
  .foot-cols { gap: 30px 56px; }
  /* the two figures that live inside the sequence get the figure column's
     width rather than the text measure, so a screenshot is never shrunk to
     fit a paragraph */
  .step .figblock { max-width: 640px; }
}

@media (min-width: 1280px) {
  .band--hero .wrap--split { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 72px; }
}

/* ------------------------------------------------------------ below 700 ---
   The record line keeps its geometry and loses two of its ticks rather than
   compressing into a smear. */
@media (max-width: 699px) {
  .recline { height: 216px; --axis: 71%; }
  .rl-doc { width: 76px; height: 60px; padding: 10px 9px; gap: 6px; }
  .rl-label { font-size: 11px; margin-top: 7px; }
  .rl-label span { font-size: 10.5px; }
  .rl-tick { font-size: 11px; }
  .rl-opt { display: none; }
  .rl-item.rl-up:nth-of-type(2) { --x: 18% !important; }
  .rl-item.rl-up:nth-of-type(3) { --x: 50% !important; }
  .rl-item.rl-up:nth-of-type(4) { --x: 83% !important; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn + .btn { margin-left: 0; margin-top: -1px; }
  .masthead { padding-top: 22px; }
  .onward { align-items: flex-start; }
  .onward i { margin-top: 8px; }
  .draft-row { grid-template-columns: minmax(0, 1fr) 64px 18px; gap: 12px; }
  .draft-name { font-size: 13.5px; }
  .bars { height: 62px; gap: 5px; }
}

@media print {
  .branch, body::before, .band--stone::before { display: none; }
  .page { padding: 0; }
  .page::before { display: none; }
  .fig { box-shadow: none; }
  .nav, .drawer-tab { display: none; }
  .faq details { break-inside: avoid; }
}