/* ==========================================================================
   BUT FOR · the homepage's own composition
   public/_home.css

   The system (public/_system.css) draws every piece: the top bar, the
   buttons, the marks, the cards, the answer rows, the confidence pills, the
   figures, the form field, the footer. This file only composes them into
   the six-move homepage Mae approved on October 31 2026: the opening on the
   scene she chose, the live question, the record, the state picker, the one
   card of full access, and the closing email.

   Everything here is on the system's tokens. No color is named that the
   system does not name; where a tint is needed, color-mix() mixes a token
   with transparent, and the four rgba() values are the system's own, copied
   from its answer-row and pill states so the live question matches them.
   No type size is under the floors: 18px for reading, 16px for interface,
   12px for the smallest label.

   The design was measured, not guessed: its two alternating fields sample
   #080d10 and #0d1417, which are the system's field and surface; its warm
   accent (the pull lines, the big numbers, the Live label, the checks, the
   $399) samples #f2e4c6, which is the system's deeper cream. The scene's
   dark half was measured too: the wide picture's left half and the tall
   picture's lower half read #000 to #0c0300, within a step of the system's
   deeper field, which is why the opening stands on that field.
   ========================================================================== */

:root {
  }

/* The hidden attribute must win over any display this file sets. The live
   question hides and shows its parts with that attribute. */
[hidden] { display: none !important; }

body.home { position: relative; }
.wrap { max-width: var(--content); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.sec { padding: var(--space-9) 0; }
/* A band: every other section sits on the lifted surface, as the board drew
   it, so where one section ends and the next begins is a change of ground.
   (November 9 2026: the dark page is back while the light design is drawn;
   the cream bands of November 8 are in the record at 8d8964a and 6ba1991.) */
.alt { background: var(--surface); }
/* the band's own edge is the break: no hairline doubles it */
.marks .proof-note { border-bottom: 0; }
.ruled { border-top: var(--hair) solid var(--rule); }
main, footer, .scta { position: relative; z-index: 1; }
/* The header keeps the system's layer (3), above main, or the phone menu
   opens behind the hero: it did, on the live site, November 3. */
.site-head { position: relative; z-index: 3; }

/* The skip link: off screen until it has focus. */

/* ---- links inside reading text ------------------------------------------- */
.prose a, .demo-note a, .lede a {
  color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: var(--hair);
}
.prose a:hover, .demo-note a:hover, .lede a:hover { color: var(--accent); }

/* ===========================================================================
   The top bar · the system's, on the field, as it is
   Eight links and the member button fit at 1440 with the design's spacing,
   fit at 1200 with tighter spacing, and give way to the menu button under
   that. The member button sizes to its label; when the script swaps the
   label for a signed-in member the button grows to the left, into the
   bar's free space, and nothing else moves. */

#member-link > span { white-space: nowrap; }

/* The menu, a sheet under the bar: each link with its line under it. */

/* ===========================================================================
   The opening · the words on the scene
   The scene sits inside the opening, under the words: the wide picture at
   960px and up, the tall one under that, each at its own proportion and
   never cropped, so the notebook is whole at every width. The opening
   stands on the system's deeper field, which is what the picture's dark
   half measures, so where the picture ends nothing shows; the picture's own
   foot fades into that field, and the opening's foot fades into the page's.
   On a phone the notebook fills the top of the picture and the words begin
   under it, on the dark lower half: 96vw down is past the notebook's foot
   (at 86vw) and into the black. On a desktop the words sit on the dark left
   half, in a column that stops short of the notebook's cover, which begins
   48% of the way across the picture. */
/* The hero stands on the same gray as the top bar. The photo's own blacks are
   lifted to that gray by a lighten layer (every channel darker than the bar's
   is raised to it; the sunset and the pages are untouched), so the bar and
   the scene meet without a seam (Mae, Nov 8: "black against the gray"). */
.hero { position: relative; overflow: hidden; background: var(--field); padding: 96vw 0 var(--space-8); }
.hero-scene { position: absolute; top: 0; left: 0; right: 0; z-index: 0; display: block; pointer-events: none; isolation: isolate; }
.hero-scene::before { content: ""; position: absolute; inset: 0; background: var(--field); mix-blend-mode: lighten; }
.hero-scene img { display: block; width: 100%; height: auto; aspect-ratio: 941 / 1672; object-fit: cover; object-position: 50% 0; }
.hero-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field) 0%, transparent), var(--field));
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--space-8); pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field) 0%, transparent), var(--field));
}
/* The column is a grid item at a desktop; its auto margins would shrink it
   to the words and center them over the notebook, so it takes its full width. */
.hero > .wrap { position: relative; z-index: 2; width: 100%; }
.hero-in { max-width: 36rem; }
.hero-in > * + * { margin-top: var(--space-6); }
.hero-kicker { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; letter-spacing: .06em; color: var(--accent-deep); margin: 0; }
.hero-kicker + .display { margin-top: var(--space-5); }
/* The headline is the one line in the hero that carries weight (Mae, November 8
   2026: "heavy"); the label above and the lines below stay regular, so the
   hero reads label, headline, line, paragraph. The 600 cut is loaded. */
.hero .display { font-weight: 600; }
/* The two standfirst lines sit on the standfirst and reading steps at every
   width (22px and 18px at a desktop). Until Nov 8 a desktop took them a step
   up each, to 28px and 22px, and Mae read the hero as "huge". */
.hero .stand { font-size: var(--t-stand); line-height: 1.3; max-width: 20em; }
.hero .stand-2 { font-size: var(--t-read); line-height: 1.5; color: var(--ink); max-width: 30em; }
/* the hero's three facts: one to a line, a thin rule above each */
.hero-facts { list-style: none; margin: var(--space-5) 0 0; padding: 0; max-width: 30em; font-family: var(--serif); font-size: var(--t-read); line-height: 1.45; color: var(--ink); }
.hero-facts li { padding: var(--space-3) 0; border-top: var(--hair) solid var(--rule-strong); }
@media (min-width: 720px) {
  .hero .stand-2 { max-width: 25em; }
}
.hero .actions { gap: var(--space-4); }
.hero .actions .btn { flex: 1 1 100%; justify-content: space-between; }
.hero .buy-status { margin-top: var(--space-4); }
.buy-status { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.5; color: var(--red-text); margin: 0; max-width: 34em; }
.buy-status:empty { display: none; }
.buy-status a { color: inherit; }
.hero-price { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-read); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.hero-limit { margin: var(--space-3) 0 var(--space-5); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: var(--lh-ui); color: var(--ink-2); }
.hero .actions + .hero-price, .hero .buy-status + .hero-price { margin-top: var(--space-5); }
@media (min-width: 960px) {
  .hero {
    display: grid; align-content: center;
    min-height: calc(50vw + var(--space-8));
    padding: var(--space-8) 0 var(--space-9);
  }
  .hero::after { height: var(--space-9); }
  .hero-scene img { aspect-ratio: 1774 / 887; }
  /* The column ends a rem short of the notebook's cover, whatever the width:
     48% of the way across, less the page column's own offset and gutter. */
  .hero-in { max-width: min(36rem, calc(48vw - max(0px, 50vw - 600px) - var(--pad) - 1rem)); }
  .hero .actions .btn { flex: 0 0 auto; justify-content: center; }
}

/* ===========================================================================
   The marks · the six links the stamper reads, as the design draws them:
   a heading, a three-by-two grid of small check boxes, then the one line
   between two rules. The block between the chrome markers is not touched;
   these rules draw its own markup. */
.marks { padding: var(--space-8) 0 0; }

.marks .proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-6);
  margin: 0; padding: 0 0 var(--space-7); list-style: none; border-top: 0; border-bottom: var(--hair) solid var(--rule);
}
.marks .proof li { display: block; }
.marks .proof a {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-read); font-weight: 500; line-height: 1.4; color: var(--ink-2); text-decoration: none;
}
.marks .proof a:hover { color: var(--ink); }
.marks .proof a i {
  position: relative; flex: none; width: 24px; height: 24px; margin-top: .1em;
  border: var(--hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--surface);
}
.marks .proof a i::after {
  content: ""; position: absolute; left: 6px; top: 6px; width: 9px; height: 5px;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg);
}

/* ===========================================================================
   Section grids */
.two-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-6) var(--space-7); align-items: start; }
.title { max-width: 18em; }
.two-up .title { max-width: 16em; }

/* ===========================================================================
   Your record · the bench's own record and its trend, from the generator
   The two figures are the pieces page's, drawn by _system.css; here they
   stand at the page's full width, one over the other, so the record is as
   large as the pieces page draws it and larger. The line under them is the
   approved caption at reading size, and the sample note under that. */
.record .title { max-width: 24em; }
.record-figs { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.record-line { margin: var(--space-6) 0 0; color: var(--ink); max-width: 36em; }
.record-note { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-3); margin: var(--space-3) 0 0; }

/* ===========================================================================
   When does it reach your state: the heading at the left, the picker at the
   right. The field is the system's, the line under it is reading text in
   the second ink until a pick lifts it to the full ink, the source line is
   a label, and the pull line spans the section under both. */
.where .jx { display: grid; gap: var(--space-4); max-width: 34rem; }
.where .select-wrap { max-width: 26rem; }
.jx-result { font-family: var(--serif); font-size: var(--t-read); line-height: var(--lh-read); color: var(--ink-2); margin: 0; }
.jx-result.hit { color: var(--ink); }
.jx-src { margin: 0; }

/* A pull line: one sentence at the heading step. */
.pull { font-family: var(--serif); font-size: var(--t-2); line-height: 1.3; color: var(--ink); max-width: 30em; margin: 0; }
.where .pull { grid-column: 1 / -1; margin-top: var(--space-4); }

/* ===========================================================================
   The live question
   The card the design draws, with the parts the script creates for the
   second and third questions and the closing record styled the same way as
   the first. */
.runhead { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-read); color: var(--ink-3); margin: var(--space-4) 0 0; }
.demo { max-width: 1080px; margin: var(--space-6) auto 0; background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3); overflow: hidden; }
.demo-head {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  padding: var(--space-4) var(--space-7); background: var(--field); border-bottom: var(--hair) solid var(--rule);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 500;
}
.demo-head .tag { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-deep); }
.live-dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--accent-deep); }
.demo-meta { color: var(--ink-3); }
.demo-body { padding: var(--space-7); display: grid; gap: var(--space-5); }
#cal-mount { display: grid; gap: var(--space-5); }
#cal-mount:empty { display: none; }
.stem { font-family: var(--serif); font-size: var(--t-stand); line-height: 1.55; color: var(--ink); margin: 0; }
.call { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; color: var(--ink-2); margin: 0; }

/* The answer rows: the system's answer-row look on the buttons the script
   makes (button.opt with span.l for the letter). */
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.opt {
  display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: var(--space-4);
  width: 100%; min-height: 56px; padding: var(--space-3) var(--space-4);
  background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3);
  font-family: var(--serif); font-size: var(--t-read); line-height: 1.45; color: var(--ink-2); text-align: left;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.opt .l {
  width: 36px; height: 36px; border-radius: var(--r-round); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair) solid var(--outline-selected); background: transparent;
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 700; color: var(--ink-2); line-height: 1;
}
.opt:hover { background: var(--surface-3); border-color: var(--rule-strong); color: var(--ink); }
.opt[aria-pressed="true"] { border-color: var(--outline-selected); background: var(--surface-2); color: var(--ink); }
.opt[aria-pressed="true"] .l { border-color: var(--accent); color: var(--ink); }
.opt.key { background: var(--green-tint); border-color: rgba(104, 172, 132, .35); color: var(--ink); cursor: default; }
.opt.key .l { background: var(--green); border-color: var(--green); color: var(--ink-on-fill); }
.opt.key[aria-pressed="false"] .l { background: transparent; border-color: var(--green-bright); color: var(--green-bright); }
.opt.miss { background: var(--red-tint); border-color: rgba(172, 88, 76, .40); color: var(--ink); cursor: default; }
.opt.miss .l { background: var(--wash-miss); border-color: var(--red); color: var(--ink); }
.opts:has(.key) .opt:not(.key):not(.miss) { background: transparent; border-color: var(--rule-faint); color: var(--ink-4); cursor: default; }
.opts:has(.key) .opt:not(.key):not(.miss) .l { border-color: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-4); }

/* Selected n / 2 on the left, the three facts on the right, on a rule. */
.bmeter {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  padding-top: var(--space-5); border-top: var(--hair) solid var(--rule);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink); margin: 0;
}
.bmeter b { font-weight: 600; }
.bmeter-facts { color: var(--ink-3); }

/* The confidence row and the Submit row share a line: the pills at the
   left, the button at the right. The grid packs densely so the button, a
   later sibling, rises into the pills' row; everything else spans. The
   same rule serves the first question's wrapper and the script's
   .cal-item, whose children come in the same order. */
.q-controls, .cal-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: var(--space-4) var(--space-6); align-items: end; }
.q-controls > *, .cal-item > * { grid-column: 1 / -1; min-width: 0; }
.q-controls > .conf, .cal-item > .conf { grid-column: 1; }
.q-controls > .demo-actions, .cal-item > .demo-actions { grid-column: 2; justify-self: end; }
.cal-item > .cal-nextrow { grid-column: 1 / -1; justify-self: start; }
.cal-item { padding-top: var(--space-6); border-top: var(--hair) solid var(--rule); }
.conf { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.conf-lab { flex: 1 0 100%; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink); }
.pills { display: contents; }
.conf .pill { min-width: 6.5rem; }
.hint, .conf-note { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.45; color: var(--ink-3); margin: 0; max-width: 40em; }
.hint:empty, .conf-note:empty { display: none; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3) var(--space-4); }
.verdict { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.4; color: var(--ink-2); }
.verdict:empty { display: none; }
.verdict .pts { font-family: var(--serif); font-size: var(--t-3); font-weight: 500; color: var(--accent-deep); }

/* After grading: the legend, then the score strip with the reader's own
   cell lit. The script reveals the strip; the legend, which sits before it
   in the words and in the markup, shows itself when the strip is shown. */
.bout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.bout > div { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--field); border: var(--hair) solid var(--rule); border-radius: var(--r-2); }
.bout > div b { font-family: var(--serif); font-size: var(--t-2); font-weight: 400; line-height: 1; color: var(--ink-2); }
.bout > div span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.3; color: var(--ink-3); }
.bout > div[data-hit="true"] { background: var(--wash-selected); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.bout > div[data-hit="true"] b { color: var(--accent-deep); }
.bout > div[data-hit="true"] span { color: var(--ink); }
.optlegend { display: none; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
.demo-body:has(#bout:not([hidden])) .optlegend { display: flex; }
.optlegend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.optlegend span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: var(--hair) solid var(--rule-strong); background: transparent; }
.optlegend .lg-cr::before { border-color: var(--accent); background: var(--surface-2); }
.optlegend .lg-hit::before { background: var(--green); border-color: var(--green); }
.optlegend .lg-key::before { border-color: var(--green-bright); }
.optlegend .lg-miss::before { background: var(--wash-miss); border-color: var(--red); }
.bout-note { font-family: var(--serif); font-size: var(--t-read); line-height: 1.5; color: var(--ink-2); margin: 0; }

/* The explanation, shown once graded: a wash of the system's result green. */
.explain { display: none; }
.explain.show {
  display: grid; gap: var(--space-4); padding: var(--space-5);
  background: linear-gradient(180deg, rgba(56, 116, 84, .18), rgba(56, 116, 84, .04));
  border: var(--hair) solid rgba(56, 116, 84, .45); border-radius: var(--r-3);
}
.explain p { font-family: var(--serif); font-size: var(--t-read); line-height: 1.6; color: var(--ink); margin: 0; }
.explain strong { font-weight: 600; }
.explain .disc { color: var(--accent-deep); }
#next-1, .cal-nextrow { justify-content: flex-start; }

/* The closing record the script mounts after the third question. */
.cal-verdict { display: grid; gap: var(--space-5); padding-top: var(--space-6); border-top: var(--hair) solid var(--rule); }
.cal-verdict h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-2); line-height: var(--lh-head); color: var(--ink); margin: 0; }
.cal-lines { display: grid; gap: var(--space-2); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink-2); }
.cal-lines p { margin: 0; }
.cal-lines .big { font-family: var(--serif); font-size: var(--t-3); color: var(--ink); }
.bledger { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--surface-2); border: var(--hair) solid var(--rule); border-radius: var(--r-3); }
.gc-label { display: block; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.bl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.bl-stats > div { display: grid; gap: var(--space-1); align-content: start; }
.bl-stats b { font-family: var(--serif); font-size: var(--t-metric); font-weight: 400; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bl-stats span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.3; color: var(--ink-3); }
.bl-stats .warn b { color: var(--red-text); }
.bl-tie { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.5; color: var(--ink-3); margin: 0; }
.bl-tie a { color: var(--ink-2); }
.cal-take { font-family: var(--serif); font-size: var(--t-read); line-height: 1.6; color: var(--ink); margin: 0; }
.cal-take strong { font-weight: 600; }
.dladder { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--rule); }
.dladder li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--hair) solid var(--rule); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink-2); }
.dladder .bd { font-weight: 600; color: var(--ink); }
.dladder .nm { font-family: var(--serif); font-size: var(--t-read); color: var(--ink); }
.dladder .rg { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dladder-note { font-family: var(--serif); font-size: var(--t-read); line-height: 1.6; color: var(--ink-2); margin: 0; }
.dladder-note strong { color: var(--ink); font-weight: 600; }
.cal-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.lg-aftertext { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
.lg-form { display: grid; gap: var(--space-3); max-width: 32rem; margin: 0; }
.lg-form input[type="email"] {
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  background: var(--surface-2); border: var(--hair) solid var(--rule-strong); border-radius: var(--r-2);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink);
}
.lg-form input[type="email"]::placeholder { color: var(--ink-4); }
.lg-form .btn { justify-self: start; }
.lg-note { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.5; color: var(--ink-3); margin: 0; }

/* The three dots under the card, and the closing note. */
.demo-steps { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.demo-steps i { width: 8px; height: 8px; border-radius: var(--r-round); border: var(--hair) solid var(--ink-4); }
.demo-steps i.on { background: var(--accent-deep); border-color: var(--accent-deep); }
.demo-note { max-width: 62rem; margin: var(--space-6) auto 0; padding: 0 var(--space-6); font-family: var(--serif); font-size: var(--t-stand); line-height: 1.5; color: var(--ink); }

/* ===========================================================================
   The email form: the system's field with a mail mark inside it. */
.form-row { margin-top: var(--space-6); }
.field-mail { position: relative; }
.field-mail .ic { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.field-mail .input { padding-left: calc(var(--space-4) * 2 + 18px); }
.form-note { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-3); margin: var(--space-4) 0 0; max-width: 36em; }
.form-note:empty { display: none; }

/* ===========================================================================
   Full access · one card
   The price at the left on the raised surface, what it buys at the right:
   the lede, the six items on rules, the exam dates one payment covers (the
   generator's figure, on the field inside the card), and the line on what
   is free. The words come in the approved order, which is the order the
   card stacks in on a phone; at a desktop the grid seats the price first. */
.lede { font-family: var(--serif); font-size: var(--t-stand); line-height: 1.5; color: var(--ink); max-width: 46em; margin: var(--space-6) 0 0; }
.price-figure { font-family: var(--serif); font-size: var(--t-display); line-height: 1; letter-spacing: -.015em; color: var(--accent-deep); margin: 0; }

/* ===========================================================================
   The closing email */
.capture { padding: var(--space-8) 0; }
.capture-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5) var(--space-6); align-items: center; }
.capture-in .form-row { margin-top: 0; }
.capture-in .form-note { grid-column: 2; margin-top: 0; }

/* ===========================================================================
   The footer · the system's, with the design's serif column heads */
footer .wrap > .footer { padding-top: var(--space-8); }

/* ===========================================================================
   The phone's bar at the foot: the script shows it with .on and the cross
   hides it for the session. Phone only, as the words say. */
.scta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--surface-2); border-top: var(--hair) solid var(--rule);
  padding: var(--space-3) var(--pad); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
}
.scta-in { display: flex; align-items: center; gap: var(--space-3); }
.scta-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; margin: 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.3; color: var(--ink-2); }
.scta-copy strong { font-family: var(--serif); font-size: var(--t-3); font-weight: 500; color: var(--accent-deep); }
.scta .btn { min-height: var(--tap); padding: 0 var(--space-4); }
.scta-x { width: 32px; height: var(--tap); flex: none; background: none; border: 0; border-radius: var(--r-2); color: var(--ink-2); font-size: var(--t-3); line-height: 1; cursor: pointer; }
.scta-x:hover { color: var(--ink); }
/* The bar slides below the fold while the price card's own button is on screen
   (the page's script adds .yield; November 8 2026). */
.scta { transition: transform .2s ease; }
.scta.yield { transform: translateY(110%); }
@media (max-width: 719px) {
  .scta.on { display: block; }
  body.home:has(.scta.on) { padding-bottom: 5.5rem; }
}

/* ===========================================================================
   Narrower pages */
@media (max-width: 960px) {
  .two-up, .capture-in { grid-template-columns: 1fr; }
  .capture-in .form-note { grid-column: 1; }
  .two-up .title, .title, .record .title { max-width: none; }
  .marks .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .where .jx, .where .select-wrap { max-width: none; }
  .where .pull { margin-top: var(--space-2); }
  .demo-head, .demo-body { padding-left: var(--space-5); padding-right: var(--space-5); }
  /* the card stacks in the words' own order: what it buys, then the price */
}
@media (max-width: 720px) {
  .sec { padding: var(--space-6) 0; }
  /* the phone reads at the scale's own sizes, not the fluid desktop curves */
  .demo-note, .proof-note, .stand-2, .hero-price { font-size: var(--t-read); }
  .title { font-size: var(--t-2); }
  .hero-in > * + * { margin-top: var(--space-4); }
  .marks { padding-top: var(--space-6); }
  .proof-note { padding: var(--space-5) 0 var(--space-6); }
  .marks .proof { grid-template-columns: 1fr; gap: var(--space-4); }
  .record-figs { margin-top: var(--space-6); }
  .demo { margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
  .demo-head { padding: var(--space-4); flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .demo-body { padding: var(--space-5) var(--space-4); gap: var(--space-4); }
  .demo-note { padding: 0; }
  .opt { grid-template-columns: 32px 1fr; gap: var(--space-3); padding: var(--space-3); }
  .opt .l { width: 32px; height: 32px; }
  .bmeter { flex-direction: column; }
  .q-controls, .cal-item { grid-template-columns: 1fr; }
  .q-controls > .conf, .cal-item > .conf, .q-controls > .demo-actions, .cal-item > .demo-actions { grid-column: 1; justify-self: stretch; }
  .conf .pill { flex: 1 1 0; min-width: 0; }
  .demo-actions { justify-content: flex-start; }
  .demo-actions > .btn { width: 100%; }
  .bout { grid-template-columns: 1fr; }
  .bl-stats { grid-template-columns: 1fr 1fr; }
  .dladder li { grid-template-columns: 5rem minmax(0, 1fr); }
  .dladder .rg { grid-column: 2; white-space: normal; }
  .form-row { grid-template-columns: 1fr; }
  .form-row .btn { justify-content: space-between; }
  .capture { padding: var(--space-7) 0; }
  
  
  
  
}

/* The six marks on a phone or a tablet: each link is a tap target of at
   least 44px, the box still at the first line of its words. Desktop keeps
   the drawing as it was. */
@media (max-width: 960px) {
  .marks .proof a { min-height: 44px; }
}

/* ===========================================================================
   The three questions on the question screen (public/_system.css section 9
   draws it). Under the rows after grading: the page's legend, its 2 / 1 / 0
   scale and the note are drawn by this sheet's older rules; here the legend
   is let show inside the screen, the confidence note is set, and the
   paragraph under the run is stacked. */
.q-main .optlegend { display: flex; }
.q-main .conf-note { margin: 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.45; color: var(--ink-3); }
.q-main .conf-note:empty { display: none; }
.run-notes { display: grid; gap: var(--space-4); max-width: var(--measure); margin-top: var(--space-6); }

/* ===========================================================================
   FULL ACCESS, to the design of November 6 2026: three ranked parts, the
   heading beside its lede, rules and space doing the work. */
/* ===========================================================================
   FULL ACCESS, second pass (November 8 2026, docs/design/public/brief-offer-2.txt,
   ChatGPT's two images approved by Mae): the heading over three labeled
   facts, The Bench directly under them; the price as one figure, the $399
   beside the four exams one payment covers, its reassurances as a caption,
   the door under it; the four steps as squares on a line. In this section
   the serif carries every sentence and the label face only labels and
   numbers. */
#offer .title { margin: 0; max-width: none; }
.of-label { margin: 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: var(--lh-ui); color: var(--ink-3); }
.of-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0 var(--space-7); padding: 0; }
.of-fact { margin: 0; padding: 0; }
.of-fact + .of-fact { padding-left: var(--space-6); border-left: var(--hair) solid var(--rule); }
.of-fact dd { margin: var(--space-3) 0 0; font-family: var(--serif); font-size: var(--t-3); line-height: 1.4; color: var(--ink); }
.of-get { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
/* The six things, as six rows. On a phone a row shows its name and opens on a
   tap (Mae, November 8 2026: "too much text without design"); at a desktop
   width the page's script holds all six open and the rows are not buttons. */
.of-get li { border-top: var(--hair) solid var(--rule); font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.of-get summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: var(--space-3) 0; list-style: none; cursor: pointer; font-weight: 600; color: var(--ink); }
.of-get summary::-webkit-details-marker { display: none; }
.of-get summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; justify-self: end; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s ease; }
.of-get details[open] summary::after { transform: rotate(-135deg); }
.of-get details p { margin: 0; padding: 0 0 var(--space-4); }
/* At a desktop the six read as the approved design drew them: each name in
   the heavy cut, run into its own sentence, three to a row. Where a browser
   cannot run the two together the name sits on the line above, which reads
   as well. */
@media (min-width: 961px) {
  .of-get li { padding-top: var(--space-4); }
  .of-get details::details-content { display: inline; }
  .of-get summary { display: inline; min-height: 0; padding: 0; cursor: default; pointer-events: none; }
  .of-get summary::after { content: ". "; display: inline; width: auto; height: auto; margin: 0; border: 0; transform: none; transition: none; }
  .of-get details[open] summary::after { transform: none; }
  .of-get details p { display: inline; padding: 0; }
}
.of-free { margin: var(--space-7) 0 0; padding-top: var(--space-6); border-top: var(--hair) solid var(--rule); font-family: var(--serif); font-size: var(--t-3); line-height: 1.4; color: var(--ink); max-width: 30em; }
.of-price { display: block; margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--hair) solid var(--rule); }
.of-price-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: var(--space-6) var(--space-8); align-items: start; }
.of-price .price-figure { margin: var(--space-3) 0 0; }
.of-term { margin: 0; padding: 0; border: 0; }
.of-term .figure-wrap { padding: 0; background: none; border: 0; border-radius: 0; }
.of-term .figure-head { padding-bottom: var(--space-5); border-bottom: 0; }
.of-term .figure-head .kicker { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; letter-spacing: 0; text-transform: none; line-height: var(--lh-ui); color: var(--ink-3); }
.of-term .figure-head .figure-meta { margin-left: 0; }
.assure { margin: var(--space-6) 0 0; max-width: 40em; font-family: var(--serif); font-size: var(--t-3); line-height: 1.4; color: var(--ink); }
.of-buy { display: inline-flex; width: auto; min-width: 18rem; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-6); }
.buysteps { list-style: none; margin: var(--space-7) 0 0; padding: var(--space-5) 0 0; border-top: var(--hair) solid var(--rule); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 0 auto auto; grid-auto-flow: column; column-gap: var(--space-6); row-gap: var(--space-4); }
.buysteps li { display: contents; }
.buysteps li:nth-child(1) { --c: 1; --r: 3; }
.buysteps li:nth-child(2) { --c: 2; --r: 4; }
.buysteps li:nth-child(3) { --c: 3; --r: 5; }
.buysteps li:nth-child(4) { --c: 4; --r: 6; }
.step-mark { display: block; width: var(--fc, 12px); height: var(--fc, 12px); border: var(--hair) solid var(--rule-strong); border-radius: 3px; background: var(--field); box-sizing: border-box; transform: translateY(calc(-50% - var(--space-5))); }
.step-text { font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 960px) {
  .of-get { grid-template-columns: 1fr; }
  .of-facts { grid-template-columns: 1fr; gap: var(--space-4); }
  .of-fact + .of-fact { padding-left: 0; padding-top: var(--space-4); border-left: 0; border-top: var(--hair) solid var(--rule); }
  .of-price-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); }
  /* The cover figure and its caption become items of the price grid, so the
     caption can run under both columns while the figure (its head and dates,
     still one box, so its entrance still fires) stays beside the price. */
  .of-term, .of-term .figure-wrap { display: contents; }
  .of-price-left { grid-column: 1; grid-row: 1; }
  .of-term .figure { grid-column: 2; grid-row: 1; }
  .of-term .figure-cap { grid-column: 1 / -1; grid-row: 2; }
  .of-term .cv-when { font-size: var(--t-label); }
  .of-buy { display: flex; width: 100%; }
  .buysteps { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); grid-template-rows: 0 auto; grid-auto-flow: row; row-gap: 0; column-gap: var(--space-3); }
  .step-mark { grid-row: 1; grid-column: var(--c); }
  .step-label { grid-row: 2; grid-column: var(--c); margin-top: var(--space-3); padding-bottom: var(--space-5); }
  .step-text { grid-row: var(--r); grid-column: 1 / -1; padding: var(--space-4) 0; border-top: var(--hair) solid var(--rule); }
}

/* Every section heading on this page is one heading: the design's own large,
   light title, the marks heading included. It was the one heading a step
   smaller than the rest, which is what Mae circled on November 8 ("why are
   the heading sizes inconsistent??"). On a phone they are the section step in
   the heavy cut, as she approved it there. See THE HEADINGS in _system.css. */
.sec .title, .capture .title { text-wrap: balance; }
.marks .proof-h { font-size: var(--t-1); font-weight: 400; letter-spacing: -.01em; }
@media (max-width: 720px) {
  .sec .title, .capture .title, .marks .proof-h { font-size: var(--t-2); font-weight: 600; letter-spacing: 0; }
}