/* Textbook Accounting, direction "Off the page": the real screens lie on the ruled paper like loose sheets, stand up to face
   you as you reach them, and lean in to the line each note talks about. Everything here is the still page first; the
   motion is in the last two parts and only switches on when main.js has chosen a tier (html[data-tier]) and the
   visitor has not asked for less motion. The fonts come from fonts.css, which build.mjs writes. */


/* Tokens: the app's own (reference/app-index.css), light then dark. */
:root {
  --bg: #f4f7fb; --card: #fff; --card-alt: #edf2f8; --ink: #152331; --muted: #536579; --line: #d7e0eb;
  --charcoal: #152331; --accent-soft: #e6eef9; --well: #e3ebf5;
  --primary: #2563c9; --primary-soft: #e8f0ff; --on-primary: #fff; --rule-accent: #2563c9;
  --green: #2f7a45; --green-soft: #e4f2e8; --red: #b3261e; --red-soft: #fdf1f0;
  --focus: #1f5fa8; --books: #2563c9; --field-line: #8b9094;
  --band: #152331; --band-ink: #f4f7fb; --band-muted: #c7d6e6; --band-line: #344b63;
  --rule: color-mix(in srgb, var(--line) 70%, transparent);
  --shadow: 0 1px 2px rgb(29 35 39 / 6%), 0 18px 40px -18px rgb(29 35 39 / 28%);
  --shot-filter: none;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111c28; --card: #192a3c; --card-alt: #203247; --ink: #edf3fb; --muted: #b6c7db; --line: #344b63;
    --charcoal: #edf3fb; --accent-soft: #203247; --well: #0e1925;
    --primary-soft: #203d66; --green: #6cc489; --green-soft: #1e3326; --red: #f28b82; --red-soft: #3b2220;
    --focus: #2563c9; --books: #2563c9; --field-line: #6b7278;
    --band: #0e1925; --band-ink: #edf3fb; --band-muted: #b6c7db; --band-line: #344b63;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 18px 40px -18px rgb(0 0 0 / 70%);
    --shot-filter: brightness(0.9);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #111c28; --card: #192a3c; --card-alt: #203247; --ink: #edf3fb; --muted: #b6c7db; --line: #344b63;
  --charcoal: #edf3fb; --accent-soft: #203247; --well: #0e1925;
  --primary-soft: #203d66; --green: #6cc489; --green-soft: #1e3326; --red: #f28b82; --red-soft: #3b2220;
  --focus: #2563c9; --books: #2563c9; --field-line: #6b7278;
  --band: #0e1925; --band-ink: #edf3fb; --band-muted: #b6c7db; --band-line: #344b63;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 18px 40px -18px rgb(0 0 0 / 70%);
  --shot-filter: brightness(0.9);
  color-scheme: dark;
}

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
main { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(42px, 6.4vw, 84px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(30px, 3.8vw, 48px); letter-spacing: -0.015em; }
h3 { font-size: clamp(21px, 2vw, 26px); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
[id] { scroll-margin-top: 84px; }
/* The highlighter: white on solid blue, the same in both themes. */
.mark { background: linear-gradient(var(--primary), var(--primary)) 0 0 / 100% 100% no-repeat; color: #fff; padding: 0 0.1em; margin: 0 -0.02em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.label { font: 500 13px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
kbd { font: 500 0.8em var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--card); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 20; background: var(--card); color: var(--ink); padding: 12px 16px; border-radius: 8px; box-shadow: var(--shadow); }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
section { padding-block: clamp(56px, 8vw, 112px); }

/* Buttons: blue for the one action, ink outline for the second. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  font: 600 17px/1.2 var(--body); text-decoration: none; cursor: pointer;
  background: var(--primary); color: var(--on-primary); border: 1.5px solid var(--primary);
  border-radius: 10px; padding: 12px 22px;
  transition: background-color 0.2s, translate 0.2s var(--ease), box-shadow 0.2s;
}
.button:hover { background: color-mix(in srgb, var(--primary) 88%, #000); text-decoration: none; }
.button.quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.button.quiet:hover { background: var(--accent-soft); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button.small { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.button .arrow { font-family: var(--mono); font-weight: 500; transition: translate 0.2s var(--ease); }
.button:hover .arrow { translate: 3px 0; }

/* Header: sticky on wider screens. On a phone the links sit in a row under the wordmark, no menu button needed. */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); min-height: 44px; }
.wordmark img { width: 32px; height: 32px; }
.wordmark span span { color: var(--books); }
.top nav { margin-left: auto; }
.top nav ul { list-style: none; padding: 0; display: flex; gap: 4px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 16px; white-space: nowrap; }
.top nav a:hover { color: var(--ink); background: var(--accent-soft); }
.top nav .short { display: none; }
@media (max-width: 900px) {
  .top { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .top .wrap { flex-wrap: wrap; gap: 0 12px; padding-top: 8px; }
  .top .button { margin-left: auto; }
  .top nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--gutter)); border-top: 1px solid var(--line); }
  .top nav ul { padding: 4px var(--gutter); flex-wrap: wrap; }
  .top nav li:first-child a { padding-left: 0; }
}
@media (max-width: 600px) {
  .top nav .long { display: none; }
  .top nav .short { display: inline; }
  .top nav ul { gap: 0; padding-left: calc(var(--gutter) - 9px); }
  .top nav li:first-child a { padding-left: 9px; }
  .top nav a { padding: 0 9px; font-size: 14px; }
}
@media (min-width: 901px) and (max-width: 1100px) { .top nav a { padding: 0 8px; font-size: 15px; } .top .wrap { gap: 16px; } }

/* Section openings: a mono label on the section opening rule. */
.head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.head .label { display: flex; align-items: center; gap: 12px; }
.head .label::before { content: ''; width: 28px; height: 2px; background: var(--rule-accent); transform-origin: left center; }
.head > p:not(.label) { font-size: clamp(18px, 1.6vw, 20px); color: var(--muted); max-width: 640px; }

/* Hero: ruled paper behind the words, with the blue margin line. The dashboard sheet lies on that paper. */
.hero { position: relative; isolation: isolate; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero::before { content: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.hero-text { display: grid; gap: 24px; }
.hero-text .label { color: var(--ink); }
.hero-text .lede { font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); max-width: 600px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { border-left: 1px solid var(--rule-accent); padding: 2px 0 2px 16px; display: grid; gap: 6px; max-width: 560px; font-size: 16px; color: var(--muted); }
.hero-note strong { font: 500 13px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.differences { list-style: none; padding: 0; display: grid; border-top: 2px solid var(--ink); }
.differences li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.differences .n { font: 500 13px/1.9 var(--mono); color: var(--muted); grid-row: span 2; }
.differences h2 { font-size: 21px; letter-spacing: 0; }
.differences p { color: var(--muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.hero-figure { margin-top: clamp(48px, 6vw, 80px); }

/* Pictures of the app, cropped to the part that matters with --x --y --w --h (pixels of the 2560 x 1600 original),
   with numbered pins at --px --py. On the dark theme they stay paper, on a recessed mat, a little dimmer. */
.figure { margin: 0; display: grid; gap: 20px; }
.frame { border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--card-alt); font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.frame-bar::before { content: ''; flex: none; width: 34px; height: 8px; background: radial-gradient(circle 4px at 4px 4px, var(--line) 98%, transparent) 0 0 / 13px 8px repeat-x; }
.frame-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-bar .fig { color: var(--ink); }
.frame-bar a { margin-left: auto; flex: none; color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; padding-inline: 8px; margin-right: -8px; }
.pan { overflow: hidden; position: relative; padding-bottom: 48px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .frame { background: var(--well); } :root:not([data-theme='light']) .pan { margin: 10px; border-radius: 6px; } }
:root[data-theme='dark'] .frame { background: var(--well); }
:root[data-theme='dark'] .pan { margin: 10px; border-radius: 6px; }
.shot { --W: 2560; --H: 1600; position: relative; aspect-ratio: var(--w) / var(--h); overflow: hidden; background: #f4f7fb; }
.shot img { position: absolute; left: 0; top: 0; max-width: none; width: calc(var(--W) / var(--w) * 100%); height: auto; transform: translate(calc(var(--x) / var(--W) * -100%), calc(var(--y) / var(--H) * -100%)); transform-origin: calc((var(--x) + var(--w) / 2) / var(--W) * 100%) calc((var(--y) + var(--h) / 2) / var(--H) * 100%); filter: var(--shot-filter); }
.pin {
  position: absolute; left: 50%; bottom: 9px;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  background: #2563c9; color: #fff; font: 500 14px/1 var(--mono); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgb(0 0 0 / 25%);
}
/* A separate caption rail keeps fixed-size badges clear of screenshot text at every width. */
.pan > .pin-1 { left: 25%; }
.pan > .pin-3 { left: 75%; }
/* Crops live here because the Content-Security-Policy blocks inline styles. */
.shot-dashboard { --x: 0; --y: 0; --w: 2560; --h: 1600; }
.shot-invoice { --x: 489; --y: 38; --w: 2026; --h: 1530; }
.shot-vat { --x: 1024; --y: 75; --w: 1466; --h: 1500; }
.shot-payroll { --x: 489; --y: 0; --w: 2026; --h: 1350; }
.shot-assets { --x: 489; --y: 0; --w: 2026; --h: 850; }
/* Loupes: on narrower screens each note carries its own close-up (a small cropped file, shots/loupes/), so the words
   in the screen read at the app's size without scrolling sideways. */
.loupe { overflow: hidden; background: #f4f7fb; }
.loupe img { display: block; width: 100%; height: auto; }

.notes { list-style: none; padding: 0; display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: note; }
.notes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-content: start; font-size: 16px; line-height: 1.5; color: var(--muted); }
.notes li::before { counter-increment: note; content: counter(note); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font: 500 13px/1 var(--mono); }
.notes strong { color: var(--ink); font-weight: 600; }
.loupe { display: none; }
@media (max-width: 1023px) {
  .notes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .loupe { display: block; grid-column: 1 / -1; border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); }
}

/* What it does: copy, then the screen, then its notes. */
.band-paper { background: var(--card-alt); border-block: 1px solid var(--line); }
.feature { display: grid; gap: 28px; }
.feature + .feature { margin-top: clamp(56px, 7vw, 104px); }
.feature-copy { display: grid; gap: 14px; align-content: start; }
.feature-copy > p { color: var(--muted); }
.feature-copy .label { color: var(--ink); }
@media (min-width: 900px) {
  .feature-copy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 5vw, 72px); align-items: end; }
  .feature-copy .label { grid-column: 1 / -1; }
}
.theatre { display: none; }
.rest { margin-top: clamp(56px, 7vw, 104px); }
.rest > h3 { margin-bottom: 8px; }
.rest-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.rest-list li { padding: 20px 0 22px; border-top: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.rest-list h4 { margin: 0; font: 600 18px/1.35 var(--body); }
.rest-list p { color: var(--muted); font-size: 16px; }
@media (max-width: 960px) { .rest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rest-list { grid-template-columns: minmax(0, 1fr); } }

/* Coming from Pastel */
.pastel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pastel .head { margin-bottom: 32px; }
.ledger-list { margin: 0; border-top: 2px solid var(--ink); }
.ledger-list div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px 28px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.ledger-list dt { font: 700 20px/1.25 var(--display); }
.ledger-list dd { margin: 0; color: var(--muted); }
@media (max-width: 1000px) { .ledger-list div { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .pastel { grid-template-columns: minmax(0, 1fr); } }
.plainly { background: var(--card); border: 1px solid var(--line); border-left: 1px solid var(--rule-accent); border-radius: 4px 12px 12px 4px; padding: 22px 24px; display: grid; gap: 12px; }
.plainly h3 { font-size: 21px; }
.plainly ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.plainly li { color: var(--muted); font-size: 16px; }
.plainly strong { color: var(--ink); }

/* Setting up: the office network drawn plainly, then the four steps. */
.setup-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(40px, 6vw, 72px); }
.setup-top .head { margin-bottom: 0; }
@media (max-width: 900px) { .setup-top { grid-template-columns: minmax(0, 1fr); } }
.net { margin: 0; display: grid; justify-items: center; text-align: center; }
.net-clients { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.net-clients li { font: 500 13px/1 var(--mono); letter-spacing: 0.04em; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); }
.net-wire { width: 76%; height: 22px; border: 2px solid var(--muted); border-top: 0; border-radius: 0 0 10px 10px; position: relative; margin-bottom: 22px; transform-origin: top center; }
.net-wire::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--muted); }
.net-host { background: #152331; color: #f4f7fb; border: 1px solid var(--line); border-radius: 12px; padding: 16px 22px; display: grid; gap: 4px; min-width: min(100%, 320px); }
.net-host .label { color: var(--primary); }
.net-host strong { font: 700 20px/1.2 var(--display); }
.net-night { height: 40px; width: 0; border-left: 2px dashed var(--muted); position: relative; transform-origin: top center; }
.net-night span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.04em; }
.net-backup { border: 1.5px dashed var(--muted); border-radius: 12px; padding: 12px 18px; font-size: 15px; color: var(--muted); }
.net-backup strong { color: var(--ink); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { display: grid; gap: 8px; align-content: start; border-top: 2px solid var(--ink); padding-top: 16px; }
.steps li::before { counter-increment: step; content: 'Step ' counter(step); font: 500 13px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.steps h3 { font-size: 21px; }
.steps p { color: var(--muted); font-size: 16px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Prices, set like a ledger: monospaced figures, the accountant's double rule under a total. */
.price-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(32px, 5vw, 56px); }
.price-head .head { margin-bottom: 0; }
.proposed { font: 500 13px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--ink); border: 1.5px dashed var(--muted); border-radius: 8px; padding: 10px 14px; max-width: 340px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; align-content: start; box-shadow: var(--shadow); }
.plan.lead { border: 2px solid var(--ink); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.amount { font: 500 clamp(36px, 4vw, 48px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; padding-bottom: 12px; border-bottom: 3px double var(--ink); }
.amount small { font: 400 16px var(--body); color: var(--muted); letter-spacing: 0; }
.plan ul { padding-left: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; color: var(--muted); }
.plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.plan li::before { content: ''; width: 10px; height: 2px; background: var(--muted); margin-top: 0.8em; }
.addons { margin-top: clamp(40px, 5vw, 64px); }
.addons h3 { margin-bottom: 12px; }
.table-scroll { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: 16px; }
.ledger th, .ledger td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger thead th { font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.ledger tbody th { font-weight: 600; }
.ledger tbody tr:last-child > * { border-bottom: 3px double var(--ink); }
.ledger td.what { color: var(--muted); }
.ledger .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .num small { display: block; font: 400 14px var(--body); color: var(--muted); white-space: normal; }
@media (max-width: 700px) {
  .ledger, .ledger tbody, .ledger tr, .ledger td, .ledger tbody th { display: block; }
  .ledger thead { display: none; }
  .ledger tbody tr { padding-block: 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .ledger tbody tr:last-child { border-bottom: 3px double var(--ink); }
  .ledger tbody tr > * { border: 0 !important; padding: 0 !important; }
  .ledger tbody th { grid-column: 1 / -1; font-size: 18px; }
  .ledger td.what { grid-column: 1 / -1; margin-bottom: 6px; }
  .ledger .num { display: contents; }
  .ledger .num::before { content: attr(data-label) ':'; font: 400 15px var(--body); color: var(--muted); }
  .ledger .num span { text-align: right; }
  .ledger .num small { grid-column: 1 / -1; text-align: right; }
}
.price-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
@media (max-width: 760px) { .price-notes { grid-template-columns: minmax(0, 1fr); } }
.price-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 18px 20px; border-radius: 12px; background: var(--primary-soft); }
.price-note .stamp { grid-row: span 2; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--primary); color: #fff; padding: 7px 8px 6px; border-radius: 4px; }
.price-note strong { font-size: 18px; }
.price-note p { color: var(--muted); font-size: 16px; grid-column: 2; }

/* The beta: the page's one dark band, the colour of the logo's tile. */
.beta-band { background: var(--band); color: var(--band-ink); border-top: 4px solid var(--primary); }
.beta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .beta { grid-template-columns: minmax(0, 1fr); } }
.beta-copy { display: grid; gap: 22px; }
@media (min-width: 961px) { .beta-copy { position: sticky; top: 100px; } }
.beta-copy .label { color: var(--band-muted); display: flex; align-items: center; gap: 12px; }
.beta-copy .label::before { content: ''; width: 28px; height: 2px; background: var(--primary); }
.beta-copy > p:not(.label) { color: var(--band-muted); font-size: 18px; }
.beta-copy a { color: var(--band-ink); }
.deal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; border-top: 1px solid var(--band-line); }
.deal > div { padding-top: 16px; display: grid; gap: 10px; align-content: start; }
.deal h3 { font: 500 13px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.deal ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.deal li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 16px; }
.deal li::before { content: ''; width: 10px; height: 2px; background: var(--primary); margin-top: 0.8em; }
@media (max-width: 480px) { .deal { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.signup, .thanks { background: var(--card); color: var(--ink); border-radius: 16px; padding: clamp(20px, 3.5vw, 36px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 50%); }
.signup { display: grid; gap: 22px; view-transition-name: signup; }
.signup[hidden] { display: none; }
.signup fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-width: 0; }
.signup legend { font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 0 12px; width: 100%; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.signup .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .signup fieldset { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; }
.field label small, .consent small { font: 400 14px var(--body); color: var(--muted); }
input, select, textarea {
  font: 16px/1.4 var(--body); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--field-line); border-radius: 8px; padding: 11px 12px; width: 100%; min-height: 48px;
}
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 1px; }
textarea { min-height: 96px; resize: vertical; }
[aria-invalid='true'] { border-color: var(--red); border-width: 2px; background: var(--red-soft); }
.field-error { display: flex; gap: 8px; align-items: baseline; color: var(--red); font-size: 15px; font-weight: 600; }
.field-error::before, .errors .stamp { content: 'Fix'; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--red); color: var(--card); padding: 4px 6px 3px; border-radius: 4px; flex: none; transform: translateY(-1px); }
.field-error[hidden] { display: none; }
.consent { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; color: var(--muted); padding: 14px; margin: 0 -14px; border-radius: 10px; cursor: pointer; }
.consent:hover { background: var(--accent-soft); }
.consent input { width: 24px; height: 24px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--ink); }
.consent a { color: var(--ink); }
.consent-wrap { display: grid; gap: 4px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errors { border: 2px solid var(--red); background: var(--red-soft); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; }
.errors[hidden] { display: none; }
.errors p { display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.errors .stamp::before { content: none; }
.errors ul { padding-left: 46px; display: grid; gap: 4px; }
.errors a { color: var(--red); font-weight: 600; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.send .button { min-width: 200px; }
.send p { font-size: 14px; color: var(--muted); }
.result { border-radius: 10px; padding: 12px 14px; font-size: 15px; border: 1.5px solid var(--red); background: var(--red-soft); font-weight: 600; }
.result::before { content: 'Not sent: '; }
.result.ok { border-color: var(--green); background: var(--green-soft); }
.result.ok::before { content: 'Preview: '; }
.result[hidden] { display: none; }
.thanks { display: grid; gap: 16px; view-transition-name: signup; }
.thanks[hidden] { display: none; }
.thanks .done { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.thanks .done::before { content: ''; width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232f7a45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.thanks h3 { font-size: clamp(26px, 3vw, 34px); }
.thanks p { color: var(--muted); }

/* Questions */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq-grid .head p a { color: var(--ink); }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; font: 600 18px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); transition: rotate 0.3s var(--ease);
  background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat; }
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat; background-color: var(--primary-soft); border-color: var(--primary); rotate: 180deg; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq details > div { padding: 0 44px 22px 0; color: var(--muted); max-width: 66ch; }
.faq details a { color: var(--ink); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 40px calc(48px + env(safe-area-inset-bottom, 0px)); font-size: 15px; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.foot .wordmark { font-size: 19px; }
.foot .wordmark img { width: 28px; height: 28px; }
.foot .grow { flex: 1 1 auto; }
.foot a:not(.wordmark) { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------------------------------------------------------
   Motion, phones and computers alike: scroll-driven CSS only (it runs off the main thread), and only where the
   browser has it. Every animation ends at the still page above, and nothing starts hidden that is already in view.
   --------------------------------------------------------------------------------------------------------------- */
@keyframes rise { from { translate: 0 22px; } }
@keyframes stand { from { transform: perspective(1400px) rotateX(34deg) scale(0.9); } }
@keyframes pop { from { scale: 0; } 70% { scale: 1.18; } }
@keyframes draw-x { from { scale: 0 1; } }
@keyframes draw-y { from { scale: 1 0; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0 round 8px); } }
@keyframes zoom-out { from { scale: 1.3; } }
@keyframes highlight { from { background-size: 0% 100%; } }
@keyframes header-lift { to { box-shadow: 0 10px 30px -18px rgb(29 35 39 / 35%); } }

@media (prefers-reduced-motion: no-preference) {
  /* The highlighter goes over "your own" once, just after the words appear. The words are readable throughout. */
  html[data-tier] .hero .mark { animation: highlight 0.7s 0.25s var(--ease) both; }

  @supports (animation-timeline: view()) {
    html[data-tier] .top { animation: header-lift linear both; animation-timeline: scroll(); animation-range: 0 120px; }

    /* Prices, the beta and the questions stay still: the deciding half of the page does not move. */
    html[data-tier] :is(.head, .rest-list li, .ledger-list > div, .plainly, .steps li, .net-clients, .net-host, .net-backup, .feature-copy, .notes li) {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    html[data-tier] :is(#prices, #beta, #questions) :is(.head, .head .label::before) { animation: none; }
    html[data-tier] .head { view-timeline: --head block; }
    html[data-tier] .head .label::before { animation: draw-x linear both; animation-timeline: --head; animation-range: entry 40% cover 35%; }

    /* The sheets: each screen lies back on the paper and stands up as it comes into view. */
    html[data-tier] .frame { transform-origin: 50% 100%; animation: stand linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    html[data-tier] .figure { view-timeline: --sheet block; }
    html[data-tier] .pin { animation: pop linear both; animation-timeline: --sheet; }
    html[data-tier] .pin-1 { animation-range: cover 30% cover 38%; }
    html[data-tier] .pin-2 { animation-range: cover 34% cover 42%; }
    html[data-tier] .pin-3 { animation-range: cover 38% cover 46%; }

    /* The close-ups wipe open from the left and settle from a closer zoom. */
    html[data-tier] .loupe { view-timeline: --loupe block; animation: wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    html[data-tier] .loupe img { animation: zoom-out linear both; animation-timeline: --loupe; animation-range: entry 20% cover 50%; }

    /* The office network draws itself: the wire to the host, then the night-time line to the backup. */
    html[data-tier] .net { view-timeline: --net block; }
    html[data-tier] .net-wire { animation: draw-y linear both; animation-timeline: --net; animation-range: entry 50% cover 45%; }
    html[data-tier] .net-night { animation: draw-y linear both; animation-timeline: --net; animation-range: cover 40% cover 55%; }
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   Computers with WebGL: scene.js draws the screens on one fixed canvas, inside the boxes the page lays out for them
   (the hero picture's box, and the theatre beside the features). main.js adds .is-3d once the hero sheet is drawn,
   and .no-3d if it never is, which puts back the still pictures.
   --------------------------------------------------------------------------------------------------------------- */
.stage { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.6s; }
.is-3d .stage { opacity: 1; }

.is-3d .hero-figure .frame { background: transparent; border-color: transparent; box-shadow: none; animation: none; transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.is-3d .hero-figure .frame-bar { background: transparent; border-color: transparent; }
/* Once the 3D dashboard is drawn, the still one fades out under it, but stays in the page (and its description with
   screen readers). Until then the still picture shows. */
.hero-figure :is(.shot img, .pin) { transition: opacity 0.6s; }
.is-3d .hero-figure :is(.shot img, .pin) { opacity: 0; }

@media (min-width: 1024px) {
  .is-3d .reel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 4vw, 72px); }
  .is-3d .theatre { display: block; align-self: start; position: sticky; top: 96px; height: min(calc(100vh - 140px), 720px); }
  .is-3d .theatre-slot { position: absolute; inset: 44px 0 40px; }
  /* The desk the screens stand on: ruled paper with the exercise book's pink margin, the active screen named above
     it and a tick for each of the four screens below it. */
  .is-3d .theatre { border-radius: 16px; border: 1px solid var(--line); background:
      linear-gradient(to right, transparent 46px, color-mix(in srgb, var(--rule-accent) 45%, transparent) 46px 47px, transparent 47px),
      repeating-linear-gradient(to bottom, var(--card-alt) 0 31px, var(--rule) 31px 32px); box-shadow: var(--shadow); }
  .stage-label { position: absolute; top: 14px; left: 62px; right: 20px; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage-label b { color: var(--ink); font-weight: 500; }
  .ticks { position: absolute; left: 62px; bottom: 16px; margin: 0; padding: 0; list-style: none; display: flex; gap: 6px; }
  .ticks li { width: 22px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color 0.4s, width 0.4s var(--ease); }
  .ticks li.on { width: 40px; background: var(--primary); }
  .is-3d .beats { padding-block: 6vh 20vh; }
  .is-3d .feature + .feature { margin-top: 18vh; }
  .is-3d .feature-copy { grid-template-columns: minmax(0, 1fr); min-height: 24vh; }
  .is-3d .feature-copy .label { grid-column: auto; }
  /* The picture itself is drawn by the theatre; its caption stays as a small label, and the image stays in the
     page (visually hidden) for screen readers and for the Full size link. */
  .is-3d .beats .frame { background: transparent; border: 0; box-shadow: none; animation: none; border-radius: 0; }
  .is-3d .beats .frame-bar { background: transparent; border: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .is-3d .beats .frame-bar::before { display: none; }
  .is-3d .beats .pan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
  /* A screen the theatre could not load shows its still picture instead. */
  .is-3d .beats .is-missing .pan { position: static; width: auto; height: auto; clip: auto; overflow: hidden; }
  .is-3d .beats .is-missing .frame { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
  .is-3d .beats .notes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .is-3d .beats .notes li { min-height: 20vh; padding-top: 6px; transition: color 0.4s; }
  .is-3d .beats .notes li::before { transition: scale 0.4s var(--ease), box-shadow 0.4s; }
  .is-3d .beats .notes li.is-on { color: var(--ink); }
  .is-3d .beats .notes li.is-on::before { scale: 1.2; box-shadow: 0 0 0 4px var(--primary-soft); }
  .is-3d .beats :is(.feature-copy, .notes li) { animation: none; }
}

/* The privacy page, the terms and the other text pages */
.page { padding-block: clamp(40px, 7vw, 88px); }
.page article { display: grid; gap: 16px; max-width: 720px; }
.page h1 { font-size: clamp(36px, 5vw, 56px); }
.page h2 { font-size: 24px; margin-top: 24px; scroll-margin-top: 24px; }
.page h3 { font-size: 19px; margin-top: 8px; }
.page ul, .page ol { padding-left: 20px; display: grid; gap: 8px; }
.page .lede { font-size: clamp(18px, 1.6vw, 20px); color: var(--muted); }
.page .updated { font: 500 13px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.page .draft { border-left: 1px solid var(--rule-accent); padding: 4px 0 4px 16px; color: var(--muted); }
.contents { border-block: 1px solid var(--line); padding-block: 14px; }
.contents ol { columns: 2 240px; column-gap: 32px; display: block; }
.contents li { margin-bottom: 4px; break-inside: avoid; }
.contents a { display: inline-flex; min-height: 32px; align-items: center; }
.page table { width: 100%; border-collapse: collapse; font-size: 16px; }
.page th, .page td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.page thead th { font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
@media (max-width: 600px) {
  .page table, .page tbody, .page tr, .page th, .page td { display: block; }
  .page thead { display: none; }
  .page tbody tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .page tbody th, .page tbody td { border: 0; padding: 0 0 8px; }
  .page tbody th { font-size: 18px; }
  .page tbody td::before { content: attr(data-label); display: block; font: 500 12px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
}
.missing .links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.missing .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 10px; text-decoration: none; }
.missing .links a:hover { border-color: var(--ink); }
.foot a[aria-current='page'] { color: var(--ink); text-decoration: none; font-weight: 600; }

/* Textbook Accounting: Ledger Blue, shared with the desktop app.
   Step 5 polish (Muse): one navy/blue/white system, mint kept only in the logo.
   Navy #152331, primary blue #2563c9, white and cool gray do all the work below.
   No new motion, no new assets, no external loads: this only refines what is above. */
::selection { background: #2563c9; color: #fff; }
input, textarea { caret-color: var(--focus); }

/* Cooler, softer elevation everywhere (frames, plans, form) tuned to the navy ink. */
:root {
  --shadow: 0 1px 2px rgb(21 35 49 / 7%), 0 16px 36px -20px rgb(21 35 49 / 30%);
}

/* Header: a navy bar that bookends the hero. The light-on-navy lockup sits on it;
   nav stays cool gray, turning white on hover, with the beta action in primary blue. */
.top { background: #152331; border-bottom: 1px solid #2a415a; }
.top nav a { color: #c7d6e6; }
.top nav a:hover { color: #fff; background: #203247; }
.top .button.small { box-shadow: 0 6px 16px -8px rgb(37 99 201 / 80%); }
.wordmark img { width: 190px; height: auto; }
.wordmark .brand-light { display: none; }
.wordmark .brand-navy { display: block; }

/* Hero: flat navy with a fine blue rule at its foot, so it reads as one ruled
   ledger cover rather than a floating dark panel. The headline highlight keeps
   its solid blue but gains breathing room so descenders are never clipped. */
.hero {
  background: #152331; color: #edf3fb;
  --ink: #edf3fb; --muted: #c7d6e6; --line: #344b63; --accent-soft: #203247;
  border-bottom: 3px solid #2563c9;
}
.hero .mark {
  background: #2563c9; color: #fff;
  padding: 0.02em 0.14em 0.09em; margin: 0 0.01em; border-radius: 6px;
}
.hero-text { gap: 22px; }
.hero-text .lede { color: #d3e0ef; line-height: 1.65; }
.hero .button { border-color: #4a86dd; box-shadow: 0 10px 24px -12px rgb(37 99 201 / 90%); }
.hero .button:hover { background: #1f56ad; border-color: #1f56ad; }
.hero .button.quiet { background: transparent; color: #edf3fb; border-color: #7e97b5; box-shadow: none; }
.hero .button.quiet:hover { background: #203247; border-color: #c7d6e6; }
.hero-note { border-left: 2px solid #2563c9; padding-left: 18px; color: #c7d6e6; }
.hero-note strong { color: #9ec6ff; }
.hero-note a { color: #edf3fb; text-decoration-color: #4a86dd; }

/* The three differences: no numerals in this direction, so a short blue rule
   carries the rhythm instead, above a finer divider than the old 2px ink rule. */
.head > .label, .feature-copy > .label, .hero-text > .label, .plainly > .label, .legal > .label { display: none; }
.differences { border-top: 1px solid #344b63; }
.differences .n { display: none; }
.differences li { grid-template-columns: 1fr; gap: 8px; padding: 18px 0 20px; border-bottom-color: #2a415a; }
.differences li::before { content: ''; width: 28px; height: 3px; border-radius: 2px; background: #2563c9; }
.differences h2 { font-size: 20px; }
.differences p { color: #b9cbdf; line-height: 1.6; }

/* The screenshot frame that closes the hero sits on the navy, so its bar goes
   quiet and the sheet itself carries the contrast. */
.hero-figure .frame { border-color: #344b63; box-shadow: 0 24px 48px -24px rgb(0 0 0 / 55%); }
.hero-figure .frame-bar { background: #f4f7fb; }
.hero-figure .notes li { color: #b9cbdf; }
.hero-figure .notes strong { color: #edf3fb; }

/* Sections: tighter, more even rhythm; the paper band is a step cooler and
   deeper so it separates from the page ground without a new colour. */
section { padding-block: clamp(60px, 7.5vw, 104px); }
.hero { padding-top: clamp(44px, 6vw, 80px); }
.band-paper { background: #e9eff7; }
.head { gap: 14px; margin-bottom: clamp(34px, 4.5vw, 56px); }
.head > p:not(.label) { line-height: 1.65; }
h2 { line-height: 1.12; }
.feature-copy > p { line-height: 1.65; }
.frame { border-radius: 12px; }
.frame-bar { background: var(--card); padding-block: 10px; }
.frame-bar .fig { color: var(--ink); }
.plainly { border-left-width: 1px; border-radius: 12px; }
.net-host { color: #edf3fb; box-shadow: var(--shadow); }
.net-host .label { color: #c7d6e6; }
.rest-list li { padding-top: 18px; }
.ledger-list dt { line-height: 1.3; }

/* Prices: the yearly plan is the lead, so it takes the blue border; the other
   card keeps a hairline. Amounts keep their double ledger rule in navy. */
.plan { box-shadow: 0 1px 2px rgb(21 35 49 / 6%), 0 14px 32px -22px rgb(21 35 49 / 35%); }
.plan.lead { border: 1.5px solid #2563c9; }
.amount { border-bottom-color: #152331; }
.proposed { border-color: #8aa0ba; background: #fff; }
.price-note { background: #e6eef9; }

/* Beta: navy band, white form. Inputs sit on white so they read as paper on
   the desk, and the focus ring is the primary blue, softened. */
.beta-band { border-top: 3px solid #2563c9; }
.beta-copy .label::before { background: #2563c9; }
.deal h3 { color: #9ec6ff; }
.deal li::before { background: #2563c9; }
.signup, .thanks { box-shadow: 0 28px 56px -28px rgb(0 0 0 / 55%); }
.signup input, .signup select, .signup textarea { background: #fff; }
.signup input:focus-visible, .signup select:focus-visible, .signup textarea:focus-visible {
  border-color: #2563c9; outline-color: #2563c9; box-shadow: 0 0 0 4px #e6eef9;
}
.consent input { accent-color: #2563c9; }

/* Questions and footer: the footer closes the page in the same navy as the
   header, always with the light-on-navy lockup, whatever the theme. */
.faq summary:hover { color: #2563c9; }
.foot { background: #152331; border-top: 3px solid #2563c9; color: #c7d6e6; }
.foot a:not(.wordmark) { color: #c7d6e6; }
.foot a:not(.wordmark):hover { color: #fff; }
.foot a[aria-current='page'] { color: #fff; }
footer .wordmark .brand-light { display: none; }
footer .wordmark .brand-navy { display: block; }

/* Text pages share the header and footer, so only their measure is refined. */
.page article { line-height: 1.7; }
.page .draft { border-left-color: #2563c9; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .band-paper { background: var(--card-alt); }
  :root:not([data-theme='light']) .proposed { background: var(--card); }
  :root:not([data-theme='light']) .price-note { background: var(--primary-soft); }
  :root:not([data-theme='light']) .signup input,
  :root:not([data-theme='light']) .signup select,
  :root:not([data-theme='light']) .signup textarea { background: var(--bg); }
  :root:not([data-theme='light']) .amount { border-bottom-color: var(--ink); }
}
:root[data-theme='dark'] .band-paper { background: var(--card-alt); }
:root[data-theme='dark'] .proposed { background: var(--card); }
:root[data-theme='dark'] .price-note { background: var(--primary-soft); }
:root[data-theme='dark'] .signup input, :root[data-theme='dark'] .signup select, :root[data-theme='dark'] .signup textarea { background: var(--bg); }
:root[data-theme='dark'] .amount { border-bottom-color: var(--ink); }

@media (max-width: 900px) { .top { background: #152331; } .top nav { border-top-color: #2a415a; } }
@media (max-width: 600px) {
  .wordmark img { width: 164px; }
  .top .button.small { padding-inline: 12px; font-size: 14px; }
  h1 { font-size: clamp(38px, 11.5vw, 42px); }
  .hero { padding-top: 36px; }
  .actions .button { flex: 1 1 auto; }
  .differences li { padding: 16px 0 18px; }
}

/* Caption colors belong to the light screenshot chrome, not the navy hero. */
.hero-figure .frame-bar { color: #536579; }
.hero-figure .frame-bar a { color: #536579; }
.hero-note { border-left-width: 1px; }
.hero-figure .frame-bar .fig { color: #152331; }