/* The road surface, shared by every page on every front door.

   Lifted VERBATIM out of the landing page's inline <style> block when the
   second front door arrived and a fifth copy of it would have been due. No
   selector was renamed and no value was changed in the move, so the coast
   pages render as they did — which is what makes that commit reviewable on
   its own diff.

   Surface per docs/design-language.md: dusk sky over an asphalt reading
   ground; dark mode is the same road at night, not a theme. Signage colors
   are functional (yellow = reveal, blue = ingestion, green = destination),
   never decoration.

   NOTE FOR ANYONE ADDING A PAGE: site/_headers carries the CSP, and it must
   keep 'self' in style-src or this file is blocked and the page renders bare.
   It said only 'unsafe-inline' until this file existed. */

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/overpass-latin.woff2') format('woff2');
}

/* Both modes drive the same road: dusk sky over dark asphalt. Dark mode is
   only a later hour — sky nearly gone, retroreflective glow on. */
:root {
  color-scheme: dark;
  --sky-top: #223252;
  --sky-mid: #5b5379;
  --sky-glow: #d9895e;
  --ground: #26282c;
  --ink: #ece9e2;
  --ink-soft: #b3afa6;
  --card: #2e3136;
  --edge: #45484f;
  --sign-yellow: #f2c400;
  --sign-yellow-ink: #1c1a14;
  --sign-green: #0f7a4b;
  --sign-green-ink: #ffffff;
  --sign-blue: #3e7fbd;
  /* The sub-pages' link color. It was defined separately in each of them and
     is folded in here unchanged. */
  --link: #7fb2e0;
  /* A transparent shadow rather than `none`. This is read inside a
     comma-separated box-shadow list on the sign, and `none` is only legal as a
     box-shadow's ENTIRE value — one in a list invalidates the whole
     declaration, which is why the sign lost its dark border and not merely its
     glow in light mode. */
  --glow: 0 0 0 transparent;
  --band: rgba(242, 196, 0, 0.18);
  --band-wide: rgba(242, 196, 0, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #05070f;
    --sky-mid: #0d1226;
    --sky-glow: #3a2c3f;
    --ground: #131418;
    --ink: #e9e6df;
    --ink-soft: #a29e95;
    --card: #1b1d22;
    --edge: #2d3037;
    --sign-yellow: #ffd23f;
    --sign-green: #2e9e6b;
    --sign-blue: #5b9bd8;
    --link: #5b9bd8;
    --glow: 0 0 18px rgba(255, 210, 63, 0.35);
    --band: rgba(255, 210, 63, 0.16);
    --band-wide: rgba(255, 210, 63, 0.06);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  background: var(--ground);
  color: var(--ink);
  line-height: 1.55;
}
.sky {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-glow) 100%);
  color: #f6f3ec;
  padding: 1.25rem 1.25rem 3rem;
}
.sky .inner, .road .inner {
  max-width: 38rem;
  margin: 0 auto;
}
.masthead {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-bottom: 3rem;
}
h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.lede {
  font-size: 1.08rem;
  margin: 0;
  max-width: 34rem;
  opacity: 0.94;
}
.road { padding: 0 1.25rem 3rem; }

/* --- the steps ---------------------------------------------------------- */
.step {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}
/* Only the first card is pulled up into the sky. This was `:first-of-type`,
   which matched twice on every door: the guess card is the first FORM among
   its siblings and the card after it is the first SECTION, so the second card
   took the negative margin too and sat on the first with no gap between them.
   Scoped to the road's own children so the noscript card is not pulled up
   either. */
.road .inner > .step:first-child { margin-top: -1.5rem; }
.step[data-done=true] { opacity: 0.72; }
.step h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.35rem; }
.step .hint { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; }
.field { margin-bottom: 0.9rem; }
.field:last-of-type { margin-bottom: 1.1rem; }
label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field .aside { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
input[type=text], input[type=email], input[type=number] {
  width: 100%;
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--edge);
  border-radius: 8px;
  background: var(--ground);
  color: var(--ink);
}
.pair { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pair .field { flex: 1 1 8rem; }
input:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--sign-blue);
  outline-offset: 1px;
}
button {
  font: inherit;
  font-weight: 700;
  padding: 0.65rem 1.2rem;
  border: 0;
  border-radius: 8px;
  background: var(--sign-green);
  color: var(--sign-green-ink);
  cursor: pointer;
}
/* The way past the first card (#63, reaching the reveal without typing a
   guess). A button, because it is genuinely pressable, but deliberately not
   the green sign: the guess is still what the page asks for first, and two
   identical buttons would read as two equal invitations rather than an ask and
   a way round it. */
.skip {
  margin-left: 0.9rem;
  padding: 0.65rem 0;
  background: none;
  color: var(--ink-soft);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.problem { margin: 0.75rem 0 0; color: var(--sign-yellow); font-size: 0.92rem; }
/* The assurance belongs beside the fields it is about, not in a footer the
   visitor reads after typing. Blue is the ingestion sign. */
.note {
  margin: 0 0 1.1rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--sign-blue);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* --- the reveal --------------------------------------------------------- */
.reveal {
  display: flex;
  align-items: center;
  /* Closer than it looks, and the arithmetic is why this number reads bigger
     than it is. The diamond's corner overhangs its own layout box by 1.24rem
     once rotated, so what the eye reads as the gap is this value plus the
     sign's 1rem margin, less that overhang: 0.61rem of actual air between the
     corner and the first word. Growing the sign tightens that on its own,
     which is why this value did not have to come down again with it. */
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  flex-wrap: wrap;
}
/* The sign's border scales with it. At 8.25rem the dark ring was 3px thick and
   set 4px in; keeping those absolute on a smaller diamond would have made the
   border proportionally heavier as the sign got quieter, which is the opposite
   of what shrinking it is for. */
.diamond {
  flex: none;
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  background: var(--sign-yellow);
  border-radius: 11px;
  rotate: 45deg;
  margin: 1rem;
  /* Scaled with the sign by the same 6/6.5, per the note above. */
  box-shadow: inset 0 0 0 2.75px var(--sign-yellow), inset 0 0 0 4.6px var(--sign-yellow-ink), var(--glow);
}
/* A TIGHTER SIGN: smaller than it was, with proportionally bigger type on it.
   It used to read as a large empty yellow field with small words in the
   middle, and a real one is mostly legend. The square went 6.5rem to 5.5rem
   and back to 6rem by eye; the legend moves WITH it, so the ratio that fixed
   the emptiness survives every later change of mind about the size.

   Rotated 45deg, the 6rem square stands 8.49rem tall on the page, which clears
   two rows of headline (1.8rem at the 1.55 body line-height is 5.58rem) with
   room to spare, so the sign keeps covering the tallest thing beside it. That
   clearance is the constraint any future resize is trading against. */
/* CENTRED BY EYE, NOT BY BOX. place-items:center puts the span's BOX on the
   diamond's centre exactly, and the legend still sat high, because a line box
   reserves room the legend does not use. All caps have no descenders, so the
   empty strip under the last baseline (half-leading + descent, about 0.375em
   here) is far deeper than the strip over the first cap (half-leading +
   ascent - cap-height, about 0.175em). Centring the box therefore hangs the
   letters about a tenth of an em above where the eye wants them.

   Padding on top pushes the letters back down by half of it, which is a
   font-specific correction and legitimately so: this page ships one pinned
   face. Rotation does not complicate it. Layout happens before the rotate and
   the span turns about its own centre, so its local vertical is the screen's. */
.diamond span {
  rotate: -45deg;
  color: var(--sign-yellow-ink);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.25;
  /* In em, so the centring correction rides any change to the size above. */
  padding-top: 0.22em;
}
.reveal-card { flex: 1 1 16rem; }
/* BOTH SIGNS' HEADLINES, ONE SIZE. The funded answer revealed under the
   25-times one used to fall through to `.step h2`, a size smaller than the sign
   beside it on the same card, and read as a footnote to the first answer
   rather than a second answer to a second question (founder, 2026-09-16). */
#reveal-headline, #funded-headline {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
/* THE SIGN STARTS THE SENTENCE AND THE HEADLINE FINISHES IT, and until this
   the two only read that way if you already knew. An ellipsis is the mark for
   a sentence resumed after an interruption, which is exactly the relationship,
   so the cue costs no copy: every headline on both doors is already written as
   a continuation.

   INHERITS THE HEADLINE'S INK. It was tried in the sign's yellow, to read as
   the sentence leaving the diamond, and that is wrong twice over. The ellipsis
   is part of the sentence, so it wears the sentence's colour. And yellow is
   not free to borrow here: the header of this file has it as a functional
   signage colour, and the dotplot immediately below this headline paints the
   q50 marker in it. Three yellow dots between a yellow sign and a yellow rung
   invite a reading that is not there.

   The headline is likewise not made to match the sign in case or
   letterspacing: the sign shouts and the sentence does not, and uppercasing
   the answer would turn a remark into a verdict.

   Generated content, so it survives the page writing the headline with
   textContent, and it needs no branch for the skipper's line or any other. */
#reveal-headline::before, #funded-headline::before {
  content: '\2026';
  margin-right: 0.3rem;
}
#reveal-body, #reveal-age, #reveal-guess { margin: 0 0 0.9rem; }
#reveal-guess { color: var(--ink-soft); }

/* --- the dotplot --------------------------------------------------------
   200 dots, one per five runs. Crowding is the encoding, so nothing here draws
   a curve or fills a region: filling one side of a marker is what would turn a
   picture of the method into a success rate.

   These rules were the how-much door's, written inline in its own page. Both
   doors draw the chart now (#68, the coast reveal becomes the avatar's home),
   so they live on the shared surface with the renderer in site/dots.js. The
   coast door's shaded bar and its two flat markers went out in the same change
   and their rules went with them. */
#band-figure { margin: 0 0 1.5rem; }
.dots-plot { position: relative; border-bottom: 1px solid var(--edge); }
/* Each mark is a zero-width column: the line fills its height and the label
   hangs off the side, so two marks landing close together stagger instead of
   overprinting. */
.dots-mark { position: absolute; bottom: 0; width: 0; }
.dots-mark-line {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tone);
}
/* Yellow to green as the marker gets more cautious, so the ramp says which
   direction is the careful one before a word is read. Green is ADR-0002's
   destination sign, which is why it sits at that end. */
.mark-q50 { --tone: var(--sign-yellow); }
.mark-q75 { --tone: #e0cd4b; }
.mark-q90 { --tone: #a9c85c; }
.mark-q95 { --tone: #5cbd85; }
/* Always to the RIGHT of its own line, and every line further right is shorter,
   so a label only ever crosses empty space. TOP-ALIGNED to the end of its own
   line rather than centred on it: the label hangs down from where the line
   stops, so the ladder's rungs read as a staircase of tops. */
.dots-mark-label {
  position: absolute;
  top: 0;
  left: 6px;
  transform: translateY(-0.14em);
  font-size: 0.88rem;
  white-space: nowrap;
  line-height: 1.25;
  color: var(--tone);
}
/* All wrap together or not at all; the width comes from the script, which
   measures the narrowest room any of them has. */
.dots-wrapped .dots-mark-label { white-space: normal; }
.dots-mark-name { font-size: 0.74rem; font-weight: 400; opacity: 0.88; }
.dots-mark-value { font-weight: 800; }

/* An ALONG-MARK spans the plot so that it can be a line at a position or an
   arrow at an end without two different containers. The guess and the balance
   on the coast door, the guess on the how-much door, and the 25-times marker on
   the chart of what retirement demanded.

   The link blue rather than the sign blue: this is small text on a card, and
   the sign blue sits near 3:1 against it. The link colour is the blue the
   palette already keeps readable as text. */
.dots-along { position: absolute; bottom: 0; left: 0; right: 0; }
.along-guess { --tone: var(--link); }
.along-you { --tone: var(--sign-green); }
/* The outside rule of thumb, not a frequency the engine found, so it is the
   one along-mark that does not borrow a quantile's tone. */
.along-rule { --tone: var(--ink-soft); }
.dots-along-line { margin-left: -1px; }
/* The words set along their own line, reading upward the way an axis label
   does. Vertical writing rather than a rotate() on a horizontal box: the
   element is genuinely tall and narrow, so it can be positioned from the line's
   top like anything else instead of through transform-origin arithmetic. */
.dots-along-text {
  position: absolute;
  top: 0;
  margin-left: 3px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 0.74rem;
  color: var(--tone);
}
/* Flipped to the other side of its line. Positioned from `right` so the label's
   edge lands exactly on the line and the margin pushes it clear. */
.dots-along-text-left { margin-left: 0; margin-right: 3px; }
/* WEDGED between two lines with no strip wide enough either side, so the words
   lie down and reach into the widest clear span the plot has, with a hairline
   back to the mark. Horizontal here, which is the whole point of the fallback:
   upright text needs a gap no wider than itself and there wasn't one. */
.dots-along-away {
  writing-mode: horizontal-tb;
  transform: translate(-50%, -0.9em);
  margin-left: 0;
  background: var(--card);
  padding: 0 0.25rem;
}
.dots-along-leader {
  position: absolute;
  top: 0;
  height: 1px;
  background: var(--tone);
  opacity: 0.7;
}
/* Off one end, where there is no line to run along, so it reads across from the
   arrow instead. Close to it: the glyph is about 13px wide at this size, so
   17px leaves a word-space rather than a gap that reads as two marks. */
.dots-along-edge {
  position: absolute;
  top: 0;
  right: 17px;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.74rem;
  color: var(--tone);
}
.dots-along-edge-left { left: 17px; right: auto; }
.dots-along-arrow {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--tone);
}
.dots-along-arrow-left { left: 0; right: auto; }

.dot, .legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.82;
}
.dot { position: absolute; margin-left: -4.5px; }
/* The legend's swatch is a real dot from the same rule as the marks it defines,
   not a ● glyph at whatever size the font feels like. */
.legend-dot { display: inline-block; margin: 0 0.3em 0 0.1em; }
/* Which end is the kind one, and what one dot is worth. The legend sits between
   the two ends at their size and weight, and drops to a centred row of its own
   below the width where all three fit. */
.dots-ends {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.dots-legend { order: 1; flex-basis: 100%; text-align: center; }
@media (min-width: 560px) {
  .dots-legend { order: 0; flex-basis: auto; }
}

/* --- the fork (#68) ------------------------------------------------------
   Two columns under the four numbers, side by side where there is room and
   stacked where there is not. Nothing in the copy says "left" or "right" for
   that reason: below 620px these are one above the other. */
.lesson {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--edge);
}
/* An explicit `display` beats the browser's own rule for [hidden], so a grid
   that starts hidden is not hidden at all: the two buttons showed as slivers
   under the form before anything had been submitted. Every other block on this
   page is hidden by a default display the attribute can still win against. */
.lesson[hidden] { display: none; }
/* The columns are deliberately NOT boxed and lit as a matched pair of offers.
   One is the answer the visitor came for and one is the correction; framing
   them alike would make the choice look like a preference between products.

   Stacked, which is what a phone gets: one column, in source order. */
.lesson-col { display: flex; flex-direction: column; gap: 0.7rem; }

@media (min-width: 620px) {
  /* Side by side, and the two buttons line up because the ROWS ARE THE
     PARENT'S. The column wrapper stops generating a box of its own, so all six
     pieces become items of this one grid: the paragraphs share row 1 whatever
     they weigh, the buttons share row 2, and the inset and the footnote share
     row 3. Each column keeping its own rows is what put one button 70px below
     the other, which read as a gap where something was missing. */
  .lesson { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; }
  .lesson-col { display: contents; }
  .lesson-col:first-of-type > * { grid-column: 1; }
  .lesson-col:last-of-type > * { grid-column: 2; }
  .lesson-col > :nth-child(1) { grid-row: 1; }
  /* STRETCHED, not start-aligned. The two buttons carry different sentences and
     wrap to different depths, and two green blocks of visibly different size
     read as one offer being weightier than the other. */
  .lesson-col > :nth-child(2) { grid-row: 2; align-self: stretch; }
  /* The disclosure is the only thing on row 3, so it runs the full width
     instead of hanging off one column. */
  #rule-more { grid-row: 3; grid-column: 1 / -1; }
}
.lesson-text { margin: 0; font-size: 0.95rem; }
/* Wraps rather than truncating: both labels carry the visitor's own figures and
   a button that hides half its own sentence is worse than a tall button. */
.lesson-go {
  align-self: stretch;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
}
.lesson-note { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }

/* ONE HIERARCHY ACROSS EVERY CHART ON THE PAGE, which is what went wrong the
   first time: the second chart's caption was a shade greyer than the body it
   sat beside, and the third chart arrived under a smaller heading than the
   first. A reader reads that as three charts of three importances.

   So: no chart has a heading. Each carries a label up its left edge saying what
   its axis is, and one caption class in one colour says what the picture
   cannot. */
/* THE SAME WEIGHT AS THE BODY ABOVE IT, not a shade quieter. Both sentences do
   the same job — saying what a picture cannot say for itself — and setting the
   second one greyer made the second chart read as the lesser of the two. A
   caption here is a caption by position, not by being dimmed. */
.figure-note { margin: 0.2rem 0 1.1rem; }
#rule-extra { margin-top: 0.4rem; }
#see-funded { white-space: normal; line-height: 1.3; }
#funded-reveal { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--edge); }
#funded-body { margin: 0 0 0.9rem; }

/* The chart and its axis label. A grid rather than a flex row so the label can
   span the plot AND the row of end labels under it, which is what makes it read
   as belonging to the whole picture rather than to the dots alone. */
.dots-frame {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  /* Tight, because every pixel here comes off the plot: the column count the
     renderer bins into follows the width it has, and a wide label pushed a
     desktop chart over the threshold where a dot stands for ten runs instead of
     five. */
  column-gap: 0.35rem;
}
.dots-frame > .dots-plot { grid-column: 2; }
.dots-frame > .dots-ends { grid-column: 2; }
/* Upright, reading bottom to top, the way an axis label does. Vertical writing
   rather than a rotate() on a horizontal box: the element is genuinely tall and
   narrow, so it lays out like anything else. */
.dots-axis {
  grid-column: 1;
  grid-row: 1 / -1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: 0;
}

/* --- assumption cards --------------------------------------------------- */
.cards-head { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.15rem; }
.cards-hint { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.92rem; }
.card {
  border: 1px solid var(--edge);
  border-radius: 10px;
  margin-bottom: 0.6rem;
  background: var(--card);
  overflow: hidden;
}
.card-face {
  width: 100%;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  background: none;
  color: var(--ink-soft);
  font-weight: 400;
  padding: 0.85rem 1rem;
}
.card-cue {
  flex: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sign-blue);
}
/* The cue on a card that can be moved, as a small version of the page's
   buttons: same green, scaled to the card. Both doors emit it — the coast
   door's cards joined at their own copy pass, 2026-09-10. */
.card-cue-adjust {
  background: var(--sign-green);
  color: var(--sign-green-ink);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}
.card-panel { padding: 0 1rem 1rem; border-top: 1px solid var(--edge); }
/* The way back to the chart from an open card. Same green as every other
   button, a size down, because it is a convenience rather than a step. */
.card-back { margin-top: 1.1rem; padding: 0.5rem 0.9rem; font-size: 0.92rem; }
.card-panel p { margin: 0.9rem 0 0; font-size: 0.95rem; }
.refine { margin-top: 1.1rem; }
.refine-label { font-size: 0.9rem; }
.refine input[type=range] { width: 100%; accent-color: var(--sign-blue); }
.refine-readout { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* --- the ask ------------------------------------------------------------ */
/* A question about something the page has not built, with the offer of one
   email when it has been. Blue is the ingestion sign: it wears the same bar as
   the note beside the fields.

   The how-much door puts it inside the card that describes the thing, and
   under each of its two reveals. The coast door has one, under its answer
   (#60, coast going dark at the reveal), so these classes are both doors' now
   and a change here is a change to both. */
.ask {
  margin: 1.1rem 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--sign-blue);
}
.ask p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.ask .row { margin-top: 0.5rem; }
/* A size down from the page's step buttons, like the way back to the chart:
   answering a question is not a step. */
.ask button { padding: 0.5rem 0.9rem; font-size: 0.92rem; }
.ask .problem { margin: 0.5rem 0 0; }
.ask-receipt { color: var(--ink-soft); }

/* --- the question that closes the page ---------------------------------- */
/* The coast door's comprehension block and its three option buttons were here
   until that question was retired; the how-much door's closing question keeps
   the divider it shared. */
#survey { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--edge); }

/* --- the track strip ---------------------------------------------------- */
/* The avatar's tracks on the how-much door (settled 2026-09-11): a strip of
   cards that scrolls sideways, one per version of hypothetical you, then the
   lever menu or the ask for more. Here rather than in the page's own style
   block because the coast door's strip follows once its 25x reveal has a way
   to sit beside a spend-to-95 card. */
.strip {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding: 0.2rem 0 0.6rem;
  scroll-snap-type: x proximity;
}
.track {
  /* Positioned, so a bar's tooltip is placed against the card. */
  position: relative;
  /* Sized against the strip, not the viewport: the strip sits inside the
     road's and the step's padding, so a viewport width overran it on a phone
     and the next card was out of sight. The strip less 3rem leaves, past the
     gap, a sliver of the next card at every phone width, and on the coast
     door, which opens on one lane, the same room stands empty to the right
     of it so a second lane has somewhere to be teased (founder, 2026-09-17). */
  flex: 0 0 min(400px, 100% - 3rem);
  scroll-snap-align: start;
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 0.7rem 0.8rem 0.5rem;
}
.track-head { margin: 0 0 0.8rem; font-weight: 800; font-size: 1rem; }
/* The glyphs differ in ink, so each gets its own size to read as one weight.
   No circle among them: the chart's marks are circles. */
.glyph { vertical-align: -0.02em; }
.glyph-tri, .glyph-sq { font-size: 0.95em; }
.glyph-dia { font-size: 1.05em; }
/* Line height with room for the pill: at the body's leading the pill's
   padding overran the line box and the row under it sat on the pill. */
.track-row { margin: 0 0 0.35rem; font-size: 0.82rem; line-height: 1.75; }
.track-adj { color: var(--ink-soft); }
/* The row's heading as a sign-yellow pill: regular weight, the row's own
   size, and on the row's baseline so the pill's text sits on the row's line.
   The padding is heavier on top than below: Overpass sets its capitals high
   in the line box and leaves deep room under the baseline, so with even
   padding the capitals and digits stood a tenth of an em above the pill's
   middle and the text read as high (founder, 2026-09-11). The extra on top
   brings the cap-height band to the pill's centre; the descenders hang in
   the room below as they do on the line. */
.pfx {
  display: inline-block;
  background: var(--sign-yellow);
  color: var(--sign-yellow-ink);
  font-weight: 400;
  font-size: inherit;
  line-height: 1.15;
  border-radius: 999px;
  padding: 0.17rem 0.55rem 0.05rem;
  margin-right: 0.2rem;
  vertical-align: baseline;
}
/* Each clause wraps as a unit where the card is its full 400px; only the
   separators between them break. On a phone the card is narrower than the
   retire row's one clause, and a clause that cannot break widens the card
   past its strip (a flex item is never narrower than its longest unbreakable
   line), so there the clauses wrap as prose. The separator carries a trailing
   space, the one break a row always has, so a break falls after the dot and
   never before it. Its right padding is the space's width short of the left,
   so the dot stands centred. */
.sep { color: var(--ink-soft); padding: 0 0.1rem 0 0.3rem; }
/* Overflow visible, so the worst 5's label, wider than its stand at the
   phone's size, can run a few units into the card's padding rather than be
   cut at the picture's edge. */
.track-chart { display: block; width: 100%; height: auto; margin-top: 0.3rem; overflow: visible; }
.track-chart text { font-family: inherit; fill: var(--ink-soft); }
.track-y { font-size: 10px; fill: var(--ink); }
/* The picture scales with its card, and a phone's card is about two thirds
   of the desktop's, so the x labels are set larger there: 17 viewBox units
   render at about 11px on a 390px phone, near the legend's size, where the
   desktop's 9.5 rendered at 6 and needed zooming (founder, 2026-09-11). The
   breakpoint is the page's own, where the card reaches its cap. */
.track-x { font-size: 17px; }
@media (min-width: 560px) {
  .cl { white-space: nowrap; }
  .track-x { font-size: 9.5px; }
}
.track-fill { fill: var(--sign-blue); }
.track-cut { fill: none; stroke: var(--ink-soft); stroke-dasharray: 2 2; }
/* One circle per 1 in 100 runs, the reveal's own mark: the same ink, the same
   size, and no border, as there. */
.track-run { fill: var(--ink); fill-opacity: 0.92; }
.track-run-worst { fill: var(--ink-soft); }
.track-axis { stroke: var(--ink-soft); }
.track-bar { cursor: pointer; }
/* No focus ring round a pressed bar (founder, 2026-09-11): the browser drew a
   thick outline round the whole group. The open bar's own x label brightens
   instead, and the same for keyboard focus so the bar is still findable. */
.track-bar:focus { outline: none; }
.track-bar.is-open .track-x, .track-bar:focus-visible .track-x { fill: var(--ink); font-weight: 700; }
/* The tooltip a tapped bar opens, over the chart and centred on the bar; the
   script places it and flips it under the bar when the card has no room
   above. Dismissed by a tap anywhere else, or Escape. */
.track-tooltip {
  position: absolute;
  z-index: 2;
  max-width: 15rem;
  padding: 0.45rem 0.65rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 0.78rem;
  line-height: 1.35;
  transform: translate(-50%, -100%);
}
.track-tooltip.below { transform: translate(-50%, 0); }
.track-legend { margin: 0.4rem 0 0; font-size: 0.76rem; color: var(--ink-soft); }
.lg {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  margin: 0 0.3rem 0 0.6rem;
  vertical-align: -1px;
}
.track-legend .lg:first-child { margin-left: 0; }
/* The run, as the chart draws it: a circle in the reveal's ink at the
   reveal's size, which the script sets from the same variable as the marks. */
.lg-run { border-radius: 50%; background: var(--ink); opacity: 0.92; }
.lg-fill { background: var(--sign-blue); }
.lg-cut { background: transparent; border: 1px dashed var(--ink-soft); }
.track-tap { margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--ink-soft); }
/* The adjustments row closes a card, under the chart's footnote, so every
   card's chart starts at the same height. */
.track-adj { margin: 0.5rem 0 0; padding-top: 0.45rem; border-top: 1px solid var(--edge); }

/* --- the lane in the first viewport (docs/avatar.md, Part A; coast, 2026-09-17) --- */
/* The sky above a page whose picture comes first gives up its air: the
   masthead's room and the header's foot both come down, so the first card
   starts higher on a phone. */
.sky-tight { padding-bottom: 2.1rem; }
.sky-tight .masthead { margin-bottom: 0.9rem; }
.sky-tight h1 { margin-bottom: 0.7rem; }
.sky-tight .lede { font-size: 1.02rem; }
/* The rest of the definition, under the lede and in the sky's own ink: the
   shared disclosure's soft grey is a card colour and sat badly on the
   gradient's warm foot. */
.sky-tight details.more { margin: 0.8rem 0 0; }
.sky-tight .more p { color: inherit; opacity: 0.88; max-width: 34rem; }
/* THE LANE IS A CARD OF THE PAGE (founder, 2026-09-17), not inset in one:
   the strip sits where the first step used to, pulled up into the sky, and
   each lane wears the step's own surface. It bleeds to both of the
   viewport's edges on a phone: at rest the first lane stands at the page's
   own left margin and the sliver of the next is teased at the right edge
   itself; scrolled, the lanes pass under the left margin to the edge rather
   than being cut off inside it. The padding on each side is what puts the
   lanes back at the margin when the strip is scrolled to either end. */
.road .inner > .strip-page {
  margin: -1.5rem -1.25rem 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  scroll-padding-left: 1.25rem;
  scroll-padding-right: 1.25rem;
  /* THE LANES READ LEFT TO RIGHT (founder, 2026-09-17): the strip is a grid
     of columns, one per lane, with one row per card inside a lane, and each
     lane lays its cards out on the strip's rows (subgrid). So every Today
     stands at one height across the lanes, every Plan at another, and a
     card grows to the tallest of its siblings on the other lanes. Six rows:
     the name, Today, Plan, Future, the comparison, the foot; a lane alone
     leaves the fifth empty and it costs no height. Where subgrid is not
     supported the lanes simply stack their own cards, unaligned. */
  display: grid;
  grid-auto-flow: column;
  /* WIDER LANES, A NARROWER TEASE (founder, 2026-09-17 evening: cut the
     visible sliver of the second lane by about 40%). The sliver is what is
     left of the viewport once the strip's own left padding and one lane and
     the gap are taken: at 390px that was 390 - 20 - 302 - 12 = 56px with 3rem
     subtracted here, and 1.6rem leaves 336px of lane and a 34px tease. Still
     plainly a card standing off the edge, which is what it is for; the lane
     gets the 22px. The how-much door's own strip keeps 3rem: it draws several
     preset tracks and the tease is how a visitor learns to swipe. */
  grid-auto-columns: min(400px, 100% - 1.6rem);
  grid-template-rows: repeat(6, auto);
  gap: 0 0.75rem;
}
.strip-page .track {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  background: var(--card);
  border-radius: 12px;
  /* Less at the sides than the top (founder, 2026-09-17 evening): the lane's
     ground is a frame round three cards that carry their own padding, so an
     even 1rem was paid twice on the way in to a line of text. The top keeps
     its room, where the lane's name sits. */
  padding: 1rem 0.55rem 0.6rem;
}
.strip-page .track-head { font-size: 1.1rem; margin-bottom: 0.7rem; }
/* THE THREE CARDS INSIDE A LANE (founder, 2026-09-17): Today, Plan and
   Future, each a card on the lane's ground. The first two are one button
   from edge to edge, so a finger lands anywhere on them; the pill names the
   card and the pencil says it opens. The narrative under the pill wraps as
   prose. */
.mini {
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--ground);
  margin: 0 0 0.45rem;
  overflow: hidden;
}
/* A little more air on the right of every card inside a lane than on the
   left (founder, 2026-09-17): the pencil and the chart's help icon sit
   there, and the chart's last label, "Worst 5", runs past its picture into
   the padding. */
.mini-face {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--ink);
  font-weight: 400;
  padding: 0.45rem 0.9rem 0.55rem 0.65rem;
  border-radius: 0;
}
.mini-face:active { background: var(--edge); }
.mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.4;
  margin-bottom: 0.45rem;
}
/* The card's label: not the strip's sign-yellow pill any more (founder,
   2026-09-17), a small heavy capital line in the body's ink, above its
   copy with a little air between them. */
.mini-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.mini-edit { display: inline-flex; align-items: center; color: var(--link); }
.icon { width: 16px; height: 16px; flex: none; }
.mini-text { display: block; font-size: 0.86rem; line-height: 1.5; margin: 0; }
.mini-text + .mini-text { margin-top: 0.15rem; }
/* The Future card: the pill, the lead, then the chart, on the same ground as
   the two cards above it and with the same padding, since it is not a
   button. */
.mini-future, .mini-vs { padding: 0.45rem 0.9rem 0.5rem 0.65rem; }
.mini-future .track-chart { margin-top: 0.2rem; }
/* The tap line and the chart's help icon share a row under the lead,
   quieter than it and a step above the chart. */
.mini-tap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.mini-tap .icon-btn { width: 2rem; height: 2rem; margin: -0.25rem -0.2rem -0.25rem 0; }
.mini-tap .icon-btn .icon { width: 18px; height: 18px; }
/* The line under the plan: what it leaves out, each a button that opens the
   note and its question. Text buttons in the link's blue, like the menu. */
.mini-asks {
  margin: 0;
  padding: 0.35rem 0.9rem 0.4rem 0.65rem;
  border-top: 1px solid var(--edge);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mini-ask {
  background: none;
  color: var(--link);
  font-weight: 700;
  font-size: inherit;
  padding: 0.1rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* THE SHEET a card opens: a native dialog, rising from the foot of a phone
   and centred where there is room, with the inputs as a list at the page's
   own field size so each is a touch target on its own (founder, 2026-09-17).
   A change is applied by Done alone; the backdrop and Escape close it. */
dialog.sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  overflow: auto;
  padding: 0;
  border: 1px solid var(--edge);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--card);
  color: var(--ink);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
@media (min-width: 560px) {
  dialog.sheet {
    inset: 0;
    margin: auto;
    border-bottom: 1px solid var(--edge);
    border-radius: 14px;
  }
}
.sheet-body { padding: 1rem 1.1rem 1.3rem; }
.sheet-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.15rem; }
.sheet-title:focus { outline: none; }
.sheet-sub { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.88rem; }
.sheet-text { margin: 0 0 0.8rem; font-size: 0.95rem; }
.sheet .field { margin-bottom: 0.9rem; }
/* A money field wears its dollar sign inside the box, so the figure and the
   sign read as one. The box takes the focus ring for the field inside it. */
.money-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--edge);
  border-radius: 8px;
  background: var(--ground);
}
.money-wrap .cur { padding-left: 0.8rem; color: var(--ink-soft); }
.money-wrap input[type=text] { border: 0; background: none; padding-left: 0.1rem; }
.money-wrap input[type=text]:focus-visible { outline: none; }
.money-wrap:focus-within { outline: 3px solid var(--sign-blue); outline-offset: 1px; }
.sheet .problem { margin: 0.4rem 0 0; }
.sheet .problem:empty { display: none; }
.sheet .refine { margin-top: 0; }
.sheet .refine-readout { color: var(--ink); }
.sheet-gloss { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.sheet-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.sheet .ask { margin: 0.6rem 0 0; }
/* The decision picker on the Plan sheet: a tick with its words, and the
   amount under it once ticked. */
.pick-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.sheet-tick { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--sign-blue); flex: none; }
.pick .field { margin: 0 0 0.3rem 1.9rem; }
.pick .field[hidden] { display: none; }
/* The lane's foot: the copy and save icons at the left, the remove icon at
   the right, each a touch target on its own. Actions on a sketch, not
   steps, so nothing here is the green sign. */
.avatar-menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0.4rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px solid var(--edge);
}
.avatar-menu .spacer { flex: 1; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  color: var(--link);
  border-radius: 8px;
}
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn:active { background: var(--ground); }
.avatar .problem { margin: 0.2rem 0 0.3rem; font-size: 0.84rem; }
.avatar .problem:empty { display: none; }
/* The footer's link to the runs is a button, since it opens a sheet, dressed
   as the link beside it. */
.linkish {
  background: none;
  color: var(--sign-blue);
  font-weight: 400;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}
.linkish:empty { display: none; }
.linkish:empty + .foot-sep { display: none; }
.foot-sep { padding: 0 0.5rem; }
/* The footer's note that the page is still growing, with the email as a link
   inside the sentence. A line above the links rather than beside them: it is
   an invitation, and the links are housekeeping. Empty with scripts off, since
   the script writes the whole sentence. */
.grows {
  max-width: 30rem;
  padding-bottom: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.grows:empty { display: none; }
.grows .linkish { font-weight: 700; text-underline-offset: 3px; }
/* Seven glyphs now, one per card up to the pilot's cap; sized to read as one
   weight, like the first three. */
.glyph-0, .glyph-1, .glyph-5 { font-size: 0.95em; }
.glyph-2, .glyph-3, .glyph-4, .glyph-6 { font-size: 1.05em; }

/* --- the rest ----------------------------------------------------------- */
form.signup {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 2.5rem 0 3rem;
}
form.signup label[for=email] { font-weight: 700; font-size: 0.95rem; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.row input[type=email] { flex: 1 1 14rem; width: auto; }
.fine { font-size: 0.85rem; color: var(--ink-soft); margin: 0.75rem 0 0; }
.hp { position: absolute; left: -9999px; top: auto; }
h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 1rem; }
/* --- the native disclosure ----------------------------------------------- */
/* Both doors put their teaching behind one of these, a tap from the line it
   explains. Shared here rather than restated per page: two copies of the same
   class name is the kind of duplication that drifts where nobody is looking.
   Moved out of the how-much page's inline style block, values unchanged. */
details.more { margin-top: 0.5rem; }
.more summary {
  cursor: pointer;
  color: var(--link);
  font-size: 0.9rem;
  font-weight: 700;
}
.more p { margin: 0.8rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
noscript .step { display: block; }
footer {
  border-top: 1px solid var(--edge);
  padding: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
footer .inner { max-width: 38rem; margin: 0 auto; }
footer p { margin: 0 0 0.6rem; }
footer p:last-child { margin: 0; }
footer a { color: var(--sign-blue); }