/* Rowsmith's product site. One design with the app (root CLAUDE.md, "Product
   sites"): the tokens below are css/app.css's, value for value (a test holds
   them), plus two larger type steps and two larger spacing steps. The page is
   a document on the app's grid of heading, words and evidence (docs/site/DESIGN.md);
   its evidence is the app's own tape and rows, live (site.js). Everything
   reads without script. See CLAUDE.md, "Product site". */

/* The tape prints in its own face: Doto, a dot-matrix design (SIL OFL 1.1,
   fonts/OFL.txt), instanced at weight 900 with half-round dots and subset to
   the tape's characters (DEPENDENCIES.md). 1.1 KB. Only the tape uses it;
   anything else falls back to the system stack with tabular figures. */
@font-face {
  font-family: "Rowsmith Tape";
  src: url("fonts/doto-tape.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+002B-002D, U+0030-0039, U+0054, U+2013-2014, U+2212;
}

:root {
  color-scheme: light;
  /* Grounds. The page is near-white, not cream; paper is for the rows,
     fields, sheets and the page view; tape is the ivory roll paper of the
     tape and nothing else, so the strip reads as the machine's own. */
  --ground: #f5f5f2;
  --paper: #ffffff;
  --sheet: #ffffff;
  --tape: #fff9e6;
  --tape-edge: #d3d0c6;
  --rule: #e4e1d8;
  --rule-strong: #c9c6bc;
  --hover: #f3f1ea;
  --backdrop: rgba(32, 32, 30, 0.36);
  /* Inks. Red is the second colour of the ribbon: negatives only. A dusty
     crimson, as ribbon ink prints, not a signal red, so it's no sibling's
     (ΔE ≥ 6 from every red in Coffer, Warden and Footfall; CLAUDE.md,
     Design direction). */
  --ink: #20201e;
  --ink-2: #5c5b56;
  --ink-hover: #3a3a37;
  --on-ink: #fffdf8;
  --red: #8d364a;
  /* Edges of fields and buttons: 3:1 against every ground they sit on. */
  --control: #8a8881;
  /* The dashed fill-in line under a cell at rest (3:1 or more where it shows):
     on paper and hovered rows, and on flagged rows. Dark mode has its own,
     so its lines weigh no more than light mode's. */
  --dash: #8a8881;
  --dash-flag: #8a8881;
  --focus: #20201e;
  /* The highlighter: rows that need a look, their lines on the page, blanks to fill in. */
  --highlight: rgba(255, 226, 77, 0.34);
  --highlight-2: rgba(255, 226, 77, 0.48);
  --mark-fill: rgba(255, 214, 10, 0.42);
  --mark-edge: rgba(128, 94, 0, 0.95);
  /* The highlighter at full strength, for the one thing the page marks: what's coming. */
  --marker: #ffe24d;
  --on-marker: #20201e;
  /* Coming soon: an ink band by day; at night a sheet of paper, so it doesn't glare. */
  --soon-bg: #20201e;
  --soon-ink: #fffdf8;
  --soon-edge: #20201e;
  /* The tape's serrated tear, a 10 × 6 tile in the tape's own colours. */
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 6 5 1 10 6Z' fill='%23fff9e6'/%3E%3Cpath d='M0 6 5 1 10 6' fill='none' stroke='%23d3d0c6'/%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0 5 5 10 0Z' fill='%23fff9e6'/%3E%3Cpath d='M0 0 5 5 10 0' fill='none' stroke='%23d3d0c6'/%3E%3C/svg%3E");

  /* The error mark (a disc with "!" cut out), as a mask, so it takes the text colour. */
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.75a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 1 0 0-18.5Zm-1.2 4.75h2.4l-.4 7h-1.6ZM12 15.6a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 1 0 0-2.6Z'/%3E%3C/svg%3E");

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* The adding machine's print head: the tape's figures and symbols only. */
  --font-tape: "Rowsmith Tape", var(--font);
  /* The type scale. Every size in this file is one of these (a test checks). */
  --text-caption: 12px;
  --text-footnote: 13px;
  --text-body: 15px;
  --text-headline: 17px;
  --text-title3: 20px;
  --text-title2: 24px;
  --text-title1: 30px;
  --text-display: 56px;
  /* The site's two larger steps: section headlines and the hero. */
  --text-section: 40px;
  --text-hero: 80px;
  /* One spacing scale on a 4 px grid. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  /* The site's two larger steps of the 8 px rhythm: 96 and 160. */
  --s24: 96px;
  --s40: 160px;
  /* One small radius for everything that has one. The tape has none. */
  --radius: 3px;
  /* One grid: a 1,200 px column with 24 px gutters (16 on phones). */
  --page: 1200px;
  --gutter: 24px;
  --bar-h: 56px;
  --rail: 300px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dark: the desk at night, not an inversion. A charcoal page, the tape a
   step lighter, light ink, the crimson lifted to a rose that still reads as
   the ribbon's second colour, and the highlighter as a thin amber wash. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #161614;
    --paper: #1e1e1b;
    --sheet: #262521;
    --tape: #2a2822;
    --tape-edge: #4a4842;
    --rule: #34332e;
    --rule-strong: #4f4d46;
    --hover: #2c2b27;
    --backdrop: rgba(0, 0, 0, 0.62);
    --ink: #edeae2;
    --ink-2: #b8b5ac;
    --ink-hover: #d4d1c8;
    --on-ink: #1a1a18;
    --red: #ffb2be;
    --control: #9a978f;
    --dash: #7a7870;
    --dash-flag: #8b8881;
    --focus: #edeae2;
    --highlight: rgba(255, 196, 40, 0.13);
    --highlight-2: rgba(255, 196, 40, 0.17);
    --mark-fill: rgba(255, 214, 10, 0.26);
    --mark-edge: rgba(255, 214, 10, 0.8);
    --soon-bg: #1e1e1b;
    --soon-ink: #edeae2;
    --soon-edge: #4a4842;
    --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 6 5 1 10 6Z' fill='%232a2822'/%3E%3Cpath d='M0 6 5 1 10 6' fill='none' stroke='%234a4842'/%3E%3C/svg%3E");
    --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0 5 5 10 0Z' fill='%232a2822'/%3E%3Cpath d='M0 0 5 5 10 0' fill='none' stroke='%234a4842'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #161614;
  --paper: #1e1e1b;
  --sheet: #262521;
  --tape: #2a2822;
  --tape-edge: #4a4842;
  --rule: #34332e;
  --rule-strong: #4f4d46;
  --hover: #2c2b27;
  --backdrop: rgba(0, 0, 0, 0.62);
  --ink: #edeae2;
  --ink-2: #b8b5ac;
  --ink-hover: #d4d1c8;
  --on-ink: #1a1a18;
  --red: #ffb2be;
  --control: #9a978f;
  --dash: #7a7870;
  --dash-flag: #8b8881;
  --focus: #edeae2;
  --highlight: rgba(255, 196, 40, 0.13);
  --highlight-2: rgba(255, 196, 40, 0.17);
  --mark-fill: rgba(255, 214, 10, 0.26);
  --mark-edge: rgba(255, 214, 10, 0.8);
  --soon-bg: #1e1e1b;
  --soon-ink: #edeae2;
  --soon-edge: #4a4842;
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 6 5 1 10 6Z' fill='%232a2822'/%3E%3Cpath d='M0 6 5 1 10 6' fill='none' stroke='%234a4842'/%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0 5 5 10 0Z' fill='%232a2822'/%3E%3Cpath d='M0 0 5 5 10 0' fill='none' stroke='%234a4842'/%3E%3C/svg%3E");
}




/* ------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--text-headline)/1.55 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--highlight-2); color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
[id] { scroll-margin-top: calc(var(--bar-h) + var(--s6)); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: var(--s4); top: -64px; z-index: 50; padding: var(--s2) var(--s4); border-radius: var(--radius); background: var(--ink); color: var(--on-ink); font: 600 var(--text-footnote)/2 var(--font); text-decoration: none; }
.skip-link:focus { top: var(--s2); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; flex-shrink: 0; }
code { font: 500 0.94em/1 var(--font-mono); }
.wrap { max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------ the bar */

.bar { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--rule); }
.bar-inner { display: flex; align-items: center; gap: var(--s6); min-height: var(--bar-h); }
.brand { padding-bottom: 2px; border-bottom: 3px double var(--ink); color: var(--ink); font: 700 var(--text-headline)/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; }
.bar-nav { display: flex; gap: var(--s6); margin-left: auto; }
.bar-nav a { color: var(--ink-2); font-size: var(--text-body); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .bar-nav a:hover { color: var(--ink); text-decoration: underline; } }

/* ------------------------------------------------------------ buttons, as the app's */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 36px; padding: 0 var(--s4); border: 1px solid var(--control); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: 600 var(--text-body)/1 var(--font);
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color 0.12s;
}
.btn-primary { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.btn-large { min-height: 48px; padding: 0 var(--s6); font-size: var(--text-headline); }
.btn-small { min-height: 32px; padding: 0 var(--s3); font-size: var(--text-footnote); }
.link-btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) {
  .btn:hover { background: var(--hover); }
  .btn-primary:hover { border-color: var(--ink-hover); background: var(--ink-hover); }
  .link-btn:hover { text-decoration-thickness: 2px; }
}
.bar-cta { margin-left: var(--s2); }

/* ------------------------------------------------------------ one grid: heading, words, evidence */

/* Every section opens on a hairline across the grid (not the gutters), and
   keeps the 8 px rhythm: 64 between sections on phones, 96 on tablets, 160 on desktops. */
.sec { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); align-items: start; padding-block: var(--s8); }
.sec:not(.hero)::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--rule); }
.headline { font: 500 var(--text-title1)/1.08 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.sec-words { display: grid; gap: var(--s4); max-width: 34em; }
.sec-words > p { color: var(--ink-2); }
.sec-words > .sub { color: var(--ink); }
.sec-cta { margin-top: var(--s4); }
.file-link { white-space: nowrap; }
.sec-proof { min-width: 0; }
.sec-head > .sub { margin-top: var(--s4); }

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

.hero { padding-top: var(--s8); padding-bottom: var(--s8); }
.display { font: 500 var(--text-section)/1.02 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.display span { display: block; }
.lede { max-width: 30em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s2); }
.cta-link { font-weight: 600; }
.price-line { color: var(--ink-2); font-size: var(--text-body); line-height: 1.45; }
.hero-tape { max-width: 440px; margin-top: var(--s4); }
/* Two lines held for the label, so the tape doesn't move when the fix rewrites it. */
.hero-tape figcaption { min-height: calc(2 * 1.45em + var(--s2)); padding-bottom: var(--s2); color: var(--ink-2); font-size: var(--text-body); line-height: 1.45; }
.hero-tape figcaption strong { color: var(--ink); font-weight: 600; }
.tape-foot { margin-top: var(--s2); color: var(--ink-2); font-size: var(--text-footnote); line-height: 1.4; }

/* ------------------------------------------------------------ the tape, as the app prints it */

.tape { display: flex; flex-direction: column; color: var(--ink); }
.tape-tear { display: block; height: 6px; background: var(--tear-top) 0 0 / 10px 6px repeat-x; }
.tape-tear.is-bottom { background-image: var(--tear-bottom); }
.tape-lines { margin: 0; padding: var(--s2) var(--s4) var(--s4); list-style: none; background: var(--tape); border-inline: 1px solid var(--tape-edge); }
.tape-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; column-gap: var(--s2); min-height: 32px; }
.tape-label { min-width: 0; color: var(--ink-2); font-size: var(--text-body); line-height: 1.3; }
.tape-fig { font-family: var(--font-tape); font-size: var(--text-headline); line-height: 24px; text-align: right; white-space: nowrap; }
.tape-sym { justify-self: start; font-family: var(--font-tape); font-size: var(--text-headline); line-height: 24px; }
.tape-tick, .tape-alert { width: 20px; height: 20px; stroke-width: 2.4; vertical-align: -3px; }
.tape-alert { stroke-width: 2; color: var(--ink); }
.tape-line.is-red .tape-fig, .tape-line.is-red .tape-sym { color: var(--red); }
.tape-line.is-total { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--ink); }
.tape-line.is-result .tape-label { color: var(--ink); font-weight: 600; }
/* Row 2, marked with the highlighter across the tape; its pencil note in ink. */
.tape-line.is-marked { margin-inline: calc(-1 * var(--s2)); padding: var(--s2); background: var(--highlight); }
.tape-note { color: var(--ink); font-size: var(--text-body); font-weight: 500; }
/* "Fix it" and Undo share one slot of one height, so swapping them moves nothing. */
.tape-acts { display: flex; margin-top: var(--s2); }
.tape-acts .btn { min-height: 36px; }
/* The accountant's double rule under the final total: drawn once it balances. */
.tape.is-balanced .tape-difference { padding-bottom: var(--s2); border-bottom: 3px double var(--ink); }
/* Fixed, the row needs no look: the highlighter comes off, the note stays. */
.tape.is-balanced .tape-line.is-marked { background: none; }

/* The hero's tape: torn in two around the middle rows, as the app's welcome. */
.tape.is-hero .tape-fig, .tape.is-hero .tape-sym { font-size: var(--text-title3); line-height: 32px; }
.tape.is-hero .tape-entry.is-more { display: none; }
.tape.is-hero .tape-gap {
  display: block; position: relative; margin: var(--s2) calc(-1 * var(--s4) - 1px); padding: var(--s2) var(--s4);
  background: var(--ground) var(--tear-bottom) 0 0 / 10px 6px repeat-x; color: var(--ink-2); font-size: var(--text-footnote);
}
.tape.is-hero .tape-gap::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: var(--tear-top) 0 0 / 10px 6px repeat-x; }

/* ------------------------------------------------------------ the row: the app's table, its columns, its flag */

.rows .tx-table, .cmp-table { width: 100%; border: 1px solid var(--tape-edge); border-radius: var(--radius); border-spacing: 0; background: var(--paper); }
.rows .tx-table { table-layout: fixed; }
.tx-table th, .cmp-table thead th { padding: var(--s2); border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-footnote); font-weight: 400; line-height: 1.4; text-align: left; vertical-align: bottom; }
.tx-table td { padding: var(--s2); border-top: 1px solid var(--rule); font-size: var(--text-body); line-height: 1.4; vertical-align: top; }
.tx-table tbody tr:first-child td { border-top: 0; }
.tx-table .col-flag { width: 32px; padding-right: 0; }
.tx-table .col-date { width: 108px; }
.tx-table .col-amount, .tx-table .col-balance { width: 120px; text-align: right; white-space: nowrap; }
.tx-desc, .amount { display: block; }
.tx-date { display: block; }
.tx-bal { display: block; color: var(--ink-2); }
.amount.is-out, .is-red { color: var(--red); }
.tx-table tr.is-flagged td { background: var(--highlight); }
.flag { display: inline-flex; }
.flag .icon { width: 17px; height: 17px; }
.flag-note { margin-top: var(--s1); color: var(--ink); font-size: var(--text-footnote); line-height: 1.4; }
.flag-actions, .cell-was { margin-top: var(--s2); }
.cell-was { color: var(--ink-2); font-size: var(--text-footnote); }
.rows figcaption, .cmp-file { margin-top: var(--s2); color: var(--ink-2); font-size: var(--text-footnote); line-height: 1.4; }
/* Under 720 px, as the app's phone rows: description and amount over date and balance. */
@media (max-width: 719px) {
  .rows .tx-table, .rows .tx-table tbody { display: block; }
  .rows .tx-table thead { display: none; }
  .rows .tx-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc amount" "date balance"; column-gap: var(--s2); padding: var(--s2); border-top: 1px solid var(--rule); }
  .rows .tx-table tbody tr:first-child { border-top: 0; }
  .rows .tx-table tr.is-flagged { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "flag desc amount" "flag date balance"; background: var(--highlight); }
  .rows .tx-table td, .rows .tx-table tr.is-flagged td { display: block; width: auto; padding: 0; border: 0; background: none; }
  .rows .tx-table .col-flag { display: none; }
  .rows .tx-table tr.is-flagged .col-flag { display: block; grid-area: flag; padding-top: 2px; }
  .rows .tx-table .col-desc { display: contents; }
  .rows .tx-table .tx-desc { grid-area: desc; min-width: 0; }
  .rows .tx-table .col-desc > p { grid-column: 1 / -1; }
  .rows .tx-table tr.is-flagged .col-desc > p { grid-column: 2 / -1; }
  .rows .tx-table .col-amount { grid-area: amount; }
  .rows .tx-table .col-date { grid-area: date; color: var(--ink-2); font-size: var(--text-footnote); }
  .rows .tx-table .col-balance { grid-area: balance; font-size: var(--text-footnote); }
}

/* ------------------------------------------------------------ check another tool's file: the app's result */

.cmp-file { margin: 0 0 var(--s4); }
.cmp-title { display: flex; gap: var(--s2); font: 600 var(--text-title3)/1.25 var(--font-display); letter-spacing: -0.01em; }
.cmp-title .icon { margin-top: 3px; }
.cmp-kinds { margin: var(--s2) 0 var(--s4); color: var(--ink-2); font-size: var(--text-body); }
.cmp-table td { padding: var(--s2); border-bottom: 1px solid var(--rule); font-size: var(--text-body); line-height: 1.4; vertical-align: top; }
.cmp-table tbody:last-child tr:last-child td { border-bottom: 0; }
.cmp-table .cmp-fig { text-align: right; white-space: nowrap; }
.cmp-kind th { padding: var(--s4) var(--s2) var(--s1); color: var(--ink); font-size: var(--text-body); font-weight: 600; text-align: left; }
.cmp-table .tx-date { margin-bottom: 2px; color: var(--ink-2); font-size: var(--text-footnote); }
.cmp-none { color: var(--ink-2); }

/* ------------------------------------------------------------ the price, a ruled ledger on paper */

.ledger { width: 100%; padding: 0 var(--s4) var(--s4); border: 1px solid var(--tape-edge); border-radius: var(--radius); border-spacing: 0; background: var(--paper); }
.ledger th, .ledger td { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ledger th { padding-right: var(--s4); color: var(--ink-2); font-size: var(--text-body); font-weight: 400; line-height: 1.45; text-align: left; }
.ledger th strong { color: var(--ink); font-weight: 600; }
.ledger td { color: var(--ink); text-align: right; white-space: nowrap; }
.ledger tbody tr:last-child > * { border-bottom: 0; }
/* What's due today: a single ink rule. The double rule is kept for a real total (the tape's). */
.ledger tfoot > tr > * { padding-block: var(--s2) 0; border-top: 1px solid var(--ink); border-bottom: 0; color: var(--ink); font-size: var(--text-headline); font-weight: 600; }

/* ------------------------------------------------------------ nothing leaves: three checks and the page's own log */

.checks { display: grid; gap: var(--s4); padding-left: 1.4em; color: var(--ink-2); }
.checks li::marker { color: var(--ink); font-weight: 600; }
.checks strong { color: var(--ink); font-weight: 600; }
.where { display: grid; margin-top: var(--s4); border-top: 1px solid var(--rule); }
.where > div { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.where dt { color: var(--ink); font-weight: 600; font-size: var(--text-body); }
.where dd { color: var(--ink-2); font-size: var(--text-body); line-height: 1.45; }
.log-sum { color: var(--ink); }
.log-list { margin-top: var(--s4); padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.log-list li { padding: var(--s1) 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-footnote); line-height: 1.4; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ what it does: in, checked, out */

/* Three steps, as the work goes: what you drop in, the sums on the tape (the one box, ending on
   its T over the double rule), what you take out. No cards, no arrows: the titles carry the order. */
.flow { display: grid; gap: var(--s8); padding: 0; list-style: none; }
.flow-step { display: flex; flex-direction: column; min-width: 0; }
.flow-step > *, .flow-tape .tape-lines { flex: 1; }
.flow-card { padding-top: var(--s2); }
.flow-title { margin-top: var(--s2); font: 600 var(--text-title3)/1.25 var(--font-display); letter-spacing: -0.01em; }
.flow-step ul { margin-top: var(--s3); padding: 0; list-style: none; }
.flow-step li { display: flex; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--rule); font-size: var(--text-body); line-height: 1.4; }
.flow-tape li { border-top-color: var(--tape-edge); }
.flow-tape .tape-tick { vertical-align: 0; }
.flow-tape .tape-total { grid-template-columns: minmax(0, 1fr) 24px; padding-bottom: var(--s2); border-bottom: 3px double var(--ink); }
.flow-tape .tape-total .tape-label { color: var(--ink); font-weight: 600; }
.flow-tested { max-width: 46em; color: var(--ink-2); font-size: var(--text-body); line-height: 1.45; }

/* ------------------------------------------------------------ coming soon: a band, its heading marked with the highlighter */

.soon { padding: var(--s8) var(--s6); border: 1px solid var(--soon-edge); border-radius: var(--radius); background: var(--soon-bg); color: var(--soon-ink); }
.soon-title { font: 600 var(--text-title2)/1.3 var(--font-display); letter-spacing: -0.01em; }
/* A highlighter stroke across the words, as on a page, not a badge. */
.soon-title span { padding: 0 var(--s1); background: var(--marker); color: var(--on-marker); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.soon-lede { margin-top: var(--s2); font-size: var(--text-body); }
.soon-list { display: grid; gap: var(--s6); margin-top: var(--s6); padding: 0; list-style: none; }
.soon-list li { font-size: var(--text-body); line-height: 1.45; }
.soon-list strong { display: block; margin-bottom: var(--s1); font: 600 var(--text-headline)/1.3 var(--font-display); }
.soon-more { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--soon-edge); font-size: var(--text-body); line-height: 1.45; }

/* ------------------------------------------------------------ answers, shown */

.answers { display: grid; gap: var(--s6); }
.answers h3 { font: 600 var(--text-title3)/1.25 var(--font-display); letter-spacing: -0.01em; }
.answers p { margin-top: var(--s2); color: var(--ink-2); }

/* ------------------------------------------------------------ footer */

.site-foot { border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-footnote); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s8); padding-block: var(--s6) calc(var(--s8) + env(safe-area-inset-bottom)); }
.site-foot ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s6); padding: 0; list-style: none; }
.site-foot nav a { color: var(--ink-2); }
@media (hover: hover) { .site-foot nav a:hover { color: var(--ink); } }
.foot-line { flex-basis: 100%; }

/* ------------------------------------------------------------ tablets: the heading across, words and evidence side by side */

@media (min-width: 720px) {
  .sec { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); row-gap: var(--s8); padding-block: var(--s12); }
  .sec > * { grid-column: 1 / -1; }
  .sec > .sec-words { grid-column: 1 / span 6; }
  .sec > .sec-proof { grid-column: 7 / span 6; }
  .hero { grid-template-rows: auto auto auto auto 1fr; row-gap: var(--s6); }
  .hero > .lede, .hero > .cta, .hero > .price-line { grid-column: 1 / span 6; }
  .hero > .sec-proof { grid-column: 7 / span 6; grid-row: 2 / span 4; }
  .hero-tape { margin-top: 0; }
  .headline { font-size: var(--text-section); }
  .display { font-size: var(--text-display); }
  /* The app's table needs the width: it runs under the words. */
  #row > .sec-proof { grid-column: 1 / -1; }
  /* What it does: the three steps across the grid under its heading. */
  #register > .sec-proof { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
  .soon-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); row-gap: var(--s8); }
}

/* ------------------------------------------------------------ desktops: Vitsoe's three columns, 3 · 5 · 4 */

@media (min-width: 1040px) {
  .sec { row-gap: var(--s6); padding-block: var(--s16) var(--s24); }
  .sec > .sec-head { grid-column: 1 / span 3; }
  .sec > .sec-words { grid-column: 4 / span 5; }
  .sec > .sec-proof { grid-column: 9 / span 4; }
  /* Not one shape five times. The row: words above, the app's table wide under them. */
  #row > .sec-words { grid-column: 4 / span 6; }
  #row > .sec-proof { grid-column: 4 / span 9; }
  /* The price: the ledger in the middle, its notes in the margin beside it. */
  #price > .sec-proof { grid-column: 4 / span 6; grid-row: 1; }
  #price > .sec-words { grid-column: 10 / span 3; grid-row: 1; }
  /* What it does: the three steps across, the band under them across the whole grid. */
  #register > .sec-proof, #register > .flow-tested { grid-column: 4 / span 9; }
  #register > .soon { grid-column: 1 / -1; padding: var(--s12) var(--s10); }
  .flow { gap: var(--s8); }
  .soon-list { column-gap: var(--s8); }
  .sec > .answers { grid-column: 4 / span 9; grid-template-columns: subgrid; }
  .answers > :nth-child(odd) { grid-column: 1 / span 5; }
  .answers > :nth-child(even) { grid-column: 6 / span 4; }
  /* The headline across the grid; under it the words, and the tape, the loudest thing on the page. */
  .hero { grid-template-rows: auto auto auto auto 1fr; padding-top: var(--s16); }
  /* Across all 12 columns the first beat fits on one line at 80 px from 1,040 up, so "Checked to the penny." never breaks. */
  .hero > .display { grid-column: 1 / -1; font-size: var(--text-hero); }
  .hero > .lede, .hero > .cta, .hero > .price-line { grid-column: 1 / span 6; }
  .hero > .sec-proof { grid-column: 8 / span 5; grid-row: 2 / span 4; }
  .hero-tape { max-width: none; margin-top: 0; }
  .tape.is-hero .tape-line { grid-template-columns: minmax(0, 1fr) auto 32px; }
  .tape.is-hero .tape-fig, .tape.is-hero .tape-sym { font-size: var(--text-title1); line-height: 40px; }
  .tape.is-hero .tape-tick, .tape.is-hero .tape-alert { width: 24px; height: 24px; }
}

/* ------------------------------------------------------------ phones and narrow windows */

@media (max-width: 1039px) { .bar-nav { gap: var(--s4); } }
/* 720 to 899: four links and the button fit on one line; How it checks is the next scroll away. */
@media (max-width: 899px) {
  .bar-inner { gap: var(--s4); }
  .bar-cta { margin-left: 0; }
  .bar-nav a { font-size: var(--text-footnote); }
  .bar-nav a[href="#row"] { display: none; }
}
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  /* One link stays beside the button: the price. */
  .bar-nav a:not([href="#price"]) { display: none; }
  .cta .btn-large, .sec-cta .btn-large { width: 100%; padding-block: var(--s2); line-height: 1.25; white-space: normal; text-align: center; }
}
@media (max-width: 359px) {
  .bar-inner { gap: var(--s2); }
  .bar-cta { padding-inline: var(--s3); font-size: var(--text-footnote); }
}
@media (pointer: coarse) {
  .btn, .btn-small, .link-btn { min-height: 44px; }
  .site-foot nav a, .bar-nav a, .cta-link { display: inline-flex; align-items: center; min-height: 44px; }
  .tape-acts .btn { min-height: 44px; }
  /* The wordmark's target grows upward, so its double rule stays under the name. */
  .brand { padding-top: 22px; margin-top: -22px; }
  /* A link inside a sentence keeps the line, and gets a 44 px tall target. */
  main p a:not(.btn) { padding-block: 13px; }
}

/* ------------------------------------------------------------ motion: one rule, the print */

/* Lines print top down, 40 ms apart: a 4 px drop that lands sharp, like a
   print head. The hero's tape feeds once; a fixed line and the double rule
   print again (site.js restarts this same animation). None with Reduce Motion. */
.hero-tape .tape-lines > :nth-child(2) { --i: 1; }
.hero-tape .tape-lines > :nth-child(3) { --i: 2; }
.hero-tape .tape-lines > :nth-child(4) { --i: 3; }
.hero-tape .tape-lines > :nth-child(5) { --i: 4; }
.hero-tape .tape-lines > :nth-last-child(3) { --i: 5; }
.hero-tape .tape-lines > :nth-last-child(2) { --i: 6; }
.hero-tape .tape-lines > :nth-last-child(1) { --i: 7; }
@media (prefers-reduced-motion: no-preference) {
  .hero-tape .tape-lines > * { animation: print 80ms steps(2) calc(var(--i, 0) * 40ms) backwards; }
}
@keyframes print { from { opacity: 0; transform: translateY(-4px); } }