/* Brand tokens: clean, Apple-inspired. See docs/brand.md; contrast is checked by test/brand.test.js. */
:root {
  --ink: #1d1d1f;        /* text, headings, dark sections */
  --paper: #ffffff;      /* page background */
  --panel: #f5f5f7;      /* alternate sections, tiles, panels */
  --line: #d2d2d7;       /* hairlines and borders */
  --muted: #6e6e73;      /* secondary text */
  --link: #0066cc;       /* links */
  --action: #0071e3;     /* primary buttons */
  --action-hover: #0077ed;
  --brass: #b8862b;      /* brand accent: logo, highlights (not body text) */
  --brass-dark: #7a5412; /* brass-coloured text */
  --brass-tint: #fbf0d9; /* the learner's input cells */
  --ok: #1d7348;
  --ok-bg: #e4f3ea;
  --bad: #b42318;
  --bad-bg: #fde8e6;
  --white: #ffffff;
  --navy: #14233a;       /* Ledger navy: the mark's tile and every dark section */
  --navy-deep: #0f1b2e;  /* the bottom of navy gradients */
  --navy-line: #2a3b57;  /* hairlines and quiet fills on navy */
  --on-navy: #c9cfd8;    /* secondary text on navy */
  --brass-light: #e2b55e; /* eyebrows and accents on navy */
  --cream: #f7f1e3;      /* the mark's entries; never body text */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Older names used across the stylesheets. */
  --text: var(--ink);
  --bg: var(--paper);
  --accent: var(--action);
  --accent-dark: var(--action-hover);
  --warn: var(--brass-dark);
}

* { box-sizing: border-box; }
html { background: var(--panel); }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 17px/1.47 var(--font-body);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg);
}

/* Figures line up in columns, as in a ledger. */
table, input, .price, .proof strong, .t-account { font-variant-numeric: tabular-nums; }

a { color: var(--link); text-underline-offset: 0.15em; }
h1, h2, h3, .brand, .price { font-family: var(--font-display); }
h1, h2 { font-weight: 600; letter-spacing: -0.015em; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 0 max(1rem, calc((100% - 64rem) / 2));
  /* Nearly opaque: at 80% the text scrolling underneath showed through the logo and links. */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  gap: 1rem;
}
.site-header .brand { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.site-header .brand img { width: 28px; height: 28px; }
.brand-name span { font-weight: 450; color: #55555b; }
.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.site-header nav a:not(.pill) { color: var(--ink); text-decoration: none; font-size: 0.85rem; opacity: 0.85; }
.site-header nav a:not(.pill):hover { opacity: 1; }

main, footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.practice-page main { max-width: none; padding: 0.75rem; }

h1 { color: var(--ink); line-height: 1.1; }

.muted, footer { color: var(--muted); font-size: 0.9rem; }
.loading { color: var(--muted); }
.player-error { color: var(--bad); }

button, .button {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 980px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button:hover { border-color: var(--muted); }
button:disabled { opacity: 0.5; cursor: default; }
button.primary, .button { background: var(--action); border-color: var(--action); color: #fff; border-radius: 980px; }
button.primary:hover, .button:hover { background: var(--action-hover); }

.tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  margin-right: 0.25rem;
}
.tag-free { background: var(--ok-bg); border-color: #b9dcc6; color: var(--ok); }
.tag-warn { background: var(--brass-tint); border-color: #ecd5a6; color: var(--brass-dark); }

/* Player. The task panel stays in view beside the work on wide screens, with its actions
   pinned to the bottom of the panel; on phones the actions move to the bottom bar. */
.player {
  display: grid;
  grid-template-columns: minmax(19rem, 27rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.player-task {
  background: var(--panel);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 4.25rem;
  max-height: calc(100vh - 5.5rem);
}
.task-scroll { overflow-y: auto; padding: 1.4rem 1.5rem 0.5rem; overscroll-behavior: contain; }
.player-task h1 { font-size: 1.45rem; letter-spacing: -0.02em; margin: 0.6rem 0 0.6rem; }
.crumbs { font-size: 0.85rem; color: var(--muted); margin: 0; }
.crumbs a { color: var(--muted); }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.9rem; }
.stepper-text { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stepper ol { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.stepper a { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--muted); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.stepper li.done a { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px #b9dcc6; }
.stepper li.current a { background: var(--ink); color: var(--white); box-shadow: none; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 500; padding: 0.2rem 0.65rem; border-radius: 980px; background: var(--white); color: #424245; box-shadow: inset 0 0 0 1px var(--line); }
.chip-warn { background: var(--brass-tint); color: var(--brass-dark); box-shadow: none; }
.level { display: inline-flex; gap: 2px; align-items: flex-end; height: 0.7rem; }
.level i { width: 3px; border-radius: 1px; background: var(--line); }
.level i:nth-child(1) { height: 40%; } .level i:nth-child(2) { height: 70%; } .level i:nth-child(3) { height: 100%; }
.level[data-level="1"] i:nth-child(1), .level[data-level="2"] i:nth-child(-n + 2), .level[data-level="3"] i { background: var(--ink); }
.scenario { color: var(--muted); margin: 1.1rem 0 0.9rem; }
.label { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.task-card { background: var(--white); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.04); border-left: 3px solid var(--action); }
.task-card .label { color: var(--action); }
.task { font-weight: 500; margin: 0; line-height: 1.5; }
.icon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.action-bar { margin: 0; padding: 0.85rem 1.5rem 1.1rem; border-top: 1px solid var(--line); background: var(--panel); border-radius: 0 0 22px 22px; }
.action-bar button { display: inline-flex; align-items: center; gap: 0.35rem; }
.action-bar .primary { font-weight: 600; padding-left: 1.2rem; padding-right: 1.2rem; }
.badge { min-width: 1.25rem; padding: 0 0.35rem; border-radius: 980px; background: var(--brass-tint); color: var(--brass-dark); font-size: 0.72rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
button:disabled .badge { background: var(--panel); color: var(--muted); }
.actions.secondary { margin: 1.1rem 0 0.25rem; gap: 1rem; }
.text-button, .link-button { display: inline-flex; align-items: center; gap: 0.35rem; border: none; background: none; padding: 0.2rem 0; color: var(--link); font-size: 0.9rem; border-radius: 4px; }
.text-button:hover, .link-button:hover { text-decoration: underline; border: none; }
.link-button { display: inline; padding: 0; font-size: inherit; }
.icon-button { border: none; background: none; padding: 0.25rem; border-radius: 50%; color: var(--muted); line-height: 0; }
.icon-button:hover { background: rgba(0, 0, 0, 0.06); }

/* Feedback, hints and the solution are cards in the task panel, in that order. */
.feedback:empty { display: none; }
.feedback, .hint-box, .solution-box { border-radius: 14px; padding: 0.95rem 1.05rem; margin-top: 1rem; }
.feedback { animation: card-in 0.25s ease-out; }
/* Scrolling a card into view keeps it clear of the sticky header (and the phone bar). */
.feedback, .hint-box, .solution-box, .player-task { scroll-margin: 4.5rem 0 1rem; }
@media (max-width: 900px) { .feedback, .hint-box, .solution-box, .player-task { scroll-margin-bottom: 6.5rem; } }
.feedback.ok { background: var(--ok-bg); color: #14532d; box-shadow: inset 0 0 0 1px #b9dcc6; }
.feedback.bad { background: var(--bad-bg); color: #7a1a12; box-shadow: inset 0 0 0 1px #f3c2bd; }
.feedback-head { display: flex; gap: 0.6rem; align-items: flex-start; }
.feedback-head > .icon { width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; }
.feedback.ok .feedback-head > .icon { color: var(--ok); }
.feedback.bad .feedback-head > .icon { color: var(--bad); }
.feedback-head p { margin: 0; flex: 1; }
.feedback .attempt { flex: none; font-size: 0.75rem; font-weight: 600; opacity: 0.75; margin-top: 0.2rem; }
.feedback ul { margin: 0.6rem 0 0; padding-left: 2.6rem; }
.feedback li { margin: 0.25rem 0; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.85rem 0 0; }
.feedback-actions button, .feedback-actions .button { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.feedback-actions .button { color: var(--white); }
.hint-box { background: #fff8e8; box-shadow: inset 0 0 0 1px #f0dcae; }
.hint-box .label { color: var(--brass-dark); }
.hint-count { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; }
.hints { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.hints li { background: var(--white); border-radius: 10px; padding: 0.6rem 0.75rem; font-size: 0.95rem; line-height: 1.45; }
.hints li.new { animation: card-in 0.3s ease-out; }
.hint-n { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brass-dark); margin-bottom: 0.15rem; }
.hint-more:empty { display: none; }
.hint-more { margin: 0.65rem 0 0; font-size: 0.9rem; color: #5c4513; }
.solution-box { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.solution-head { display: flex; justify-content: space-between; align-items: center; }
.solution-head .label { margin: 0; }
.solution { margin-top: 0.6rem; overflow-x: auto; }
.solution > p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.solution > p:last-child { margin-bottom: 0; }
.solution > ul { margin: 0 0 0.6rem; padding-left: 1.2rem; font-size: 0.92rem; }
.solution > ul:empty { display: none; }
.solution-table + p, .solution-table + ul, .work-scroll + p { margin-top: 0.75rem; }
.solution-table caption { text-align: left; font-weight: 600; padding: 0 0 0.3rem; }
.solution-table + .solution-table { margin-top: 0.9rem; }
.confirm p { margin: 0; font-size: 0.95rem; color: #424245; }
/* The buttons keep their space above the text (`.confirm p` would otherwise zero it). */
.confirm .feedback-actions { margin-top: 0.9rem; }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .feedback, .hints li.new { animation: none; } }

.hints:not(:has(li)) { display: none; }
.solution-table { border-collapse: collapse; font-size: 0.9rem; }
.solution-table th { text-align: left; padding: 0.15rem 0.5rem 0.15rem 0; white-space: nowrap; vertical-align: top; }
.solution-table code { word-break: break-all; }
.exercise-nav { display: flex; justify-content: space-between; margin: 1rem 0 0.5rem; font-size: 0.9rem; }
.player-work { min-width: 0; }
/* Under the grid: the how-to line, and the grid's own messages (e.g. "That cell is given data"). */
.sheet-status { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.25rem; flex-wrap: wrap; padding: 0.6rem 0.1rem 0; }
.sheet-status p { margin: 0; }
.sheet-tip { font-size: 0.85rem; color: var(--muted); }
.sheet-key { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; vertical-align: -0.05em; border-radius: 2px; background: var(--brass-tint); box-shadow: inset 0 0 0 1px #ecd5a6; }
.sheet-message { font-size: 0.9rem; font-weight: 500; color: var(--warn); }
.sheet-message:empty { display: none; }
/* A premium exercise seen without a plan (player.js gatePanel). */
.gate { max-width: 40rem; margin: 2rem auto 3rem; }
.gate .crumbs { margin: 0 0 1rem; }
.gate-card { background: var(--panel); border-radius: 22px; padding: 2rem 2.25rem 2.25rem; }
.gate-card h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: -0.02em; margin: 0 0 0.9rem; }
.gate-card p:not(.eyebrow) { margin: 0 0 0.6rem; color: #424245; }
.gate-card .eyebrow { margin-bottom: 0.4rem; font-size: 0.85rem; }
.gate-card p.gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin: 1.5rem 0 0; }
@media (max-width: 600px) { .gate { margin-top: 0.75rem; } .gate-card { padding: 1.5rem 1.35rem 1.6rem; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bookkeeping widgets */
.journal-form, .trial-balance { border-collapse: collapse; width: 100%; max-width: 46rem; font-size: 0.95rem; }
.journal-form caption, .trial-balance caption { text-align: left; font-weight: 700; padding: 0.25rem 0 0.5rem; }
.journal-form th, .journal-form td, .trial-balance th, .trial-balance td { border-bottom: 1px solid var(--line); padding: 0.3rem 0.4rem; text-align: left; }
.journal-form thead th, .trial-balance thead th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.journal-form td:nth-child(2), .journal-form td:nth-child(3), .trial-balance td { text-align: right; width: 8rem; }
.journal-form td:last-child { width: 2.5rem; text-align: center; }
.journal-form select, .journal-form input { font: inherit; width: 100%; padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.journal-form input { text-align: right; }
.journal-form tbody tr td:nth-child(3) input { margin-left: 0; }
.journal-form tr.right td { background: var(--ok-bg); }
.journal-form tr.wrong td { background: var(--bad-bg); }
.journal-form tfoot th, .journal-form tfoot td { font-weight: 700; border-bottom: none; }
.journal-form .balance-status { font-weight: 500; font-size: 0.9rem; text-align: left; }
.journal-form .balance-status.ok { color: var(--ok); }
.journal-form .balance-status.off { color: var(--warn); }
/* Phones: each journal line becomes two rows (account, then debit and credit), so the
   account name isn't squeezed to a few letters. */
@media (max-width: 560px) {
  .journal-form, .journal-form tbody, .journal-form tfoot { display: block; }
  .journal-form thead { display: none; }
  .journal-form caption { display: block; }
  .journal-form tbody tr, .journal-form tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.25rem; gap: 0.4rem; align-items: center; padding: 0.55rem 0.25rem; border-bottom: 1px solid var(--line); }
  .journal-form tbody td, .journal-form tfoot th, .journal-form tfoot td { display: block; width: auto !important; border: none; padding: 0; }
  .journal-form tbody td:first-child { grid-column: 1 / 3; }
  .journal-form tbody td:nth-child(2) { grid-row: 2; grid-column: 1; }
  .journal-form tbody td:nth-child(3) { grid-row: 2; grid-column: 2; }
  .journal-form tbody td:last-child { grid-row: 1; grid-column: 3; }
  .journal-form tr.right { background: var(--ok-bg); }
  .journal-form tr.wrong { background: var(--bad-bg); }
  .journal-form tr.right td, .journal-form tr.wrong td { background: none; }
  .journal-form tfoot th { grid-column: 1 / -1; }
  .journal-form tfoot .total-dr::before { content: "Debits "; font-weight: 400; color: var(--muted); }
  .journal-form tfoot .total-cr::before { content: "Credits "; font-weight: 400; color: var(--muted); }
  .journal-form tfoot .total-dr, .journal-form tfoot .total-cr { text-align: left; }
  .journal-form tfoot tr:last-child { display: block; border: none; }
}
.remove-line { padding: 0.1rem 0.5rem; }
.add-line { margin-top: 0.5rem; }
.trial-balance tfoot th, .trial-balance tfoot td { font-weight: 700; border-top: 2px solid var(--text); }
.trial-balance tbody th { font-weight: 400; }
/* Form work areas (classify, table-values, statement, match): one table, rows turn green/red */
.work-table { border-collapse: collapse; width: 100%; max-width: 46rem; font-size: 0.95rem; }
.work-table caption { text-align: left; font-weight: 700; padding: 0.25rem 0 0.5rem; }
.work-table th, .work-table td { border-bottom: 1px solid var(--line); padding: 0.3rem 0.4rem; text-align: left; vertical-align: middle; }
.work-table thead th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.work-table tbody th { font-weight: 400; }
.work-table select, .work-table input:not([type="checkbox"]) { font: inherit; width: 100%; min-width: 6rem; padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.work-table input.amount { text-align: right; }
.work-table td.num { text-align: right; white-space: nowrap; }
.work-table tr.right > *, .work-table td.right { background: var(--ok-bg); }
.work-table tr.wrong > *, .work-table td.wrong { background: var(--bad-bg); }
.work-table tr.section > th { font-weight: 700; padding-top: 0.8rem; border-bottom: 1px solid var(--text); }
.work-table tr.total > th, .work-table tr.total > td { font-weight: 700; }
.work-scroll { overflow-x: auto; }
/* Timed test mode (/test) */
.test-bar { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--muted); margin: 0; }
.test-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); background: var(--panel); border-radius: 980px; padding: 0.15rem 0.7rem; }
.test-intro, .test-results { max-width: 46rem; }
.test-facts { padding-left: 1.2rem; color: var(--muted); }
.test-score { font-size: 1.25rem; }
.test-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.test-score strong { font-size: 2rem; font-family: var(--font-display); }
.test-table details summary { cursor: pointer; color: var(--link); }
.given { margin-bottom: 1.25rem; }
.given h3, .posting-title { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.t-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.t-account { border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.6rem; background: var(--white); font-size: 0.9rem; }
.t-account h4 { margin: 0; text-align: center; border-bottom: 2px solid var(--text); padding-bottom: 0.2rem; font-size: 0.95rem; }
.t-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 2rem; }
.t-body ul { list-style: none; margin: 0; padding: 0.25rem 0.3rem; }
.t-body li { white-space: nowrap; }
.t-dr { border-right: 2px solid var(--text); }
.t-cr { text-align: right; }
.t-body .ref { color: var(--muted); font-size: 0.8rem; }
.t-balance { margin: 0.2rem 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; text-align: center; }

/* Lesson outline (left sidebar on the exercise page): the course as a table of contents,
   module by module, with a mastery mark per lesson (progress.js levels). */
.player-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.outline { position: sticky; top: 4.25rem; max-height: calc(100vh - 5.5rem); overflow: auto; background: var(--panel); border-radius: 22px; padding: 1.1rem 1rem; font-size: 0.88rem; overscroll-behavior: contain; }
.outline-title { margin: 0 0 0.35rem; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.outline-progress { margin: 0 0 0.9rem; font-size: 0.78rem; }
/* The course bar: a track that reads against the panel, and a fill that starts as a short bar
   (squared where it meets the track's rounded start), never a lone dot at 1 of 121. */
.outline-progress .lesson-progress { display: block; margin-bottom: 0.4rem; background: #dcdce2; }
.outline-progress .lesson-progress span { min-width: 14px; border-radius: 0 6px 6px 0; }
.outline ol { list-style: none; margin: 0; padding: 0; }
.outline details { border-top: 1px solid var(--line); }
.outline summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; padding: 0.6rem 0.25rem; border-radius: 8px; }
.outline summary::-webkit-details-marker { display: none; }
.outline summary:hover { background: rgba(0, 0, 0, 0.04); }
.outline-module { grid-column: 1; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.outline-module-title { grid-column: 1; font-weight: 600; color: var(--ink); line-height: 1.25; }
.outline-count { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 0.75rem; font-weight: 600; color: var(--muted); padding: 0.1rem 0.45rem; border-radius: 980px; background: var(--white); }
.outline-lessons { padding: 0 0 0.5rem; }
.outline-lesson { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.5rem; padding: 0.3rem 0.25rem; border-radius: 8px; line-height: 1.3; }
.outline-lesson > a { color: #424245; text-decoration: none; line-height: 1.3; }
.outline-lesson > a:hover { color: var(--link); }
.outline-lesson.current { background: var(--white); }
.outline-lesson.current > a { color: var(--ink); font-weight: 600; }
/* The current lesson's exercises: the same mark-then-name rows as the lessons, one step in. */
.outline-exercises { grid-column: 1 / -1; display: grid; gap: 1px; margin: 0.2rem 0 0 1rem !important; }
.outline-exercises li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem; border-radius: 6px; }
.outline-exercises li .mark { margin-top: 0; }
.outline-exercises li a { display: inline-flex; align-items: baseline; gap: 0.4rem; color: #424245; text-decoration: none; }
.outline-exercises li a:hover { color: var(--link); }
.outline-exercises li.current { background: var(--brass-tint); }
.outline-exercises li.current a { color: var(--ink); font-weight: 600; }
.outline-exercises .tag { font-size: 0.68rem; font-weight: 500; line-height: 1.35; padding: 0 0.4rem; margin: 0; }
/* "Your progress" stays at the foot of the panel, however far the outline scrolls. */
.outline-foot { position: sticky; bottom: -1.1rem; z-index: 1; margin: 0.6rem 0 -1.1rem; padding: 0.7rem 0.25rem 1rem; border-top: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.outline-foot a { text-decoration: none; }
.outline-foot a:hover { text-decoration: underline; }
/* Mastery marks: an empty ring (none), half (tried), a green tick (solved), a filled star-green (fluent). */
.mark { flex: none; display: inline-block; width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--white); position: relative; }
.outline-lesson > .mark { margin-top: calc((1.3em - 0.95rem) / 2); }
.mark-tried { background: linear-gradient(90deg, var(--brass) 50%, var(--white) 50%); box-shadow: inset 0 0 0 1.5px var(--brass); }
.mark-solved { background: var(--ok-bg); box-shadow: inset 0 0 0 1.5px var(--ok); }
.mark-solved::after, .mark-fluent::after {
  content: ""; position: absolute; inset: 0; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.3 2.3 4.5-4.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.3 2.3 4.5-4.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mark-fluent { background: var(--ok); box-shadow: none; }
.mark-fluent::after { background: var(--white); }
.stepper li.fluent a { background: var(--ok); color: var(--white); box-shadow: none; }
.stepper li.current.fluent a { outline: 2px solid var(--ink); outline-offset: 1px; }
.mastery-note { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 0 0; font-size: 0.92rem; line-height: 1.4; }
.mastery-note > .icon { margin-top: 0.1rem; }
.mastery-note > .mastery-dots { margin-top: 0.4rem; }
.mastery-note .icon { color: var(--ok); }
.mastery-dots { display: inline-flex; gap: 3px; flex: none; }
.mastery-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ok); }
.mastery-dots i.on { background: var(--ok); }
.streak-note { display: flex; align-items: center; gap: 0.35rem; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--brass-dark); }
.streak-note .icon { color: var(--brass); }
.button-quiet { background: var(--white); border-color: var(--line); color: var(--ink) !important; }
.button-quiet:hover { background: var(--panel); }

/* Task panel header: the outline toggle, then the breadcrumbs. */
.task-topline { display: flex; align-items: center; gap: 0.4rem; margin: -0.35rem 0 0 -0.4rem; }
.outline-toggle { color: var(--muted); padding: 0.35rem; border-radius: 8px; }
.outline-toggle .icon { width: 1.15rem; height: 1.15rem; }
.outline-toggle[aria-expanded="true"] { color: var(--ink); }

/* The exercise page works like an app on anything wider than a tablet: below the header, the
   outline, the task and the work area fill the window's height and each scroll on their own,
   so the grid gets every pixel the screen has and the page itself doesn't scroll. */
@media (min-width: 901px) {
  .practice-page:not(.test-page) .site-header { padding: 0 1.25rem; }
  .practice-page:not(.test-page) .player-shell { height: calc(100vh - 52px - 1.5rem); height: calc(100dvh - 52px - 1.5rem); min-height: 34rem; gap: 0.75rem; align-items: stretch; }
  .practice-page:not(.test-page) .player { height: 100%; min-height: 0; gap: 0.75rem; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .practice-page:not(.test-page) .outline { position: static; max-height: none; height: 100%; border-radius: 18px; }
  .practice-page:not(.test-page) .player-task { position: static; max-height: none; height: 100%; min-height: 0; border-radius: 18px; }
  .practice-page:not(.test-page) .task-scroll { flex: 1; }
  .practice-page:not(.test-page) .action-bar { border-radius: 0 0 18px 18px; }
  .practice-page:not(.test-page) .player-work { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: auto; background: var(--white); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
  .practice-page:not(.test-page) .player-work:not(:has(.sheet, .sheet-skeleton)) { padding: 1.5rem 1.75rem; }
  .practice-page:not(.test-page) .player-work:has(.sheet, .sheet-skeleton) { overflow: hidden; }
  /* Only the grid stretches; forms keep their own height and the work area scrolls. */
  .practice-page:not(.test-page) .player-work > * { flex: none; }
  .practice-page:not(.test-page) .player-work > .grid-host, .practice-page:not(.test-page) .player-work > .sheet-skeleton { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .practice-page:not(.test-page) .grid-host > .sheet { flex: 1; min-height: 0; border: 0; border-radius: 0; background: transparent; }
  .practice-page:not(.test-page) .sheet-scroll { flex: 1; max-height: none; }
  .practice-page:not(.test-page) .sheet-status { padding: 0.5rem 1rem; border-top: 1px solid #e3e3e8; background: #fbfbfd; flex-wrap: nowrap; }
  .practice-page:not(.test-page) .sheet-tip { font-size: 0.8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .practice-page:not(.test-page) .sheet-tip:hover { white-space: normal; }
  .practice-page:not(.test-page) .sheet-message { font-size: 0.82rem; flex: none; max-width: 50%; }
  /* Wide screens: the outline can be hidden (the toggle in the task panel) for a wider grid. */
  .player-shell.outline-hidden { grid-template-columns: minmax(0, 1fr); }
  .player-shell.outline-hidden > .outline { display: none; }
}
@media (min-width: 1600px) {
  .practice-page:not(.test-page) .player { grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr); }
  .practice-page:not(.test-page) .player-shell:not(.outline-hidden) { grid-template-columns: 17.5rem minmax(0, 1fr); }
}
/* Laptops and small desktops: the outline is a drawer the toggle slides in over the page. */
@media (min-width: 901px) and (max-width: 1200px) {
  .player-shell, .player-shell.outline-hidden { grid-template-columns: minmax(0, 1fr); }
  .practice-page:not(.test-page) .player-shell > .outline, .practice-page:not(.test-page) .player-shell.outline-hidden > .outline {
    display: block; position: fixed; z-index: 40; top: calc(52px + 0.75rem); left: 0.75rem; bottom: 0.75rem; width: 18rem; height: auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 60px rgba(0, 0, 0, 0.2);
    transform: translateX(calc(-100% - 1.5rem)); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .practice-page:not(.test-page) .player-shell.outline-open > .outline { transform: none; visibility: visible; transition: transform 0.22s ease; }
}
@media (min-width: 901px) and (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  .practice-page:not(.test-page) .player-shell > .outline { transition: none !important; }
}
@media (max-width: 900px) {
  .player-shell { grid-template-columns: 1fr; }
  .outline { position: static; max-height: none; order: 2; }
  .outline-toggle { display: none; }
  .task-topline { margin: 0; }
  .player { grid-template-columns: 1fr; }
  .player-task { position: static; max-height: none; }
  .task-scroll { overflow: visible; padding: 1.25rem 1.25rem 0.75rem; }
}

/* Lessons index */
.lessons-page { max-width: 66rem; }
.page-head .lead { font-size: 1.15rem; color: var(--muted); max-width: 46rem; margin: 0; text-align: left; }
.course-jump { position: sticky; top: 52px; z-index: 10; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2.5rem; padding: 0.75rem 0; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.course-jump .chip { gap: 0.45rem; padding: 0.4rem 0.95rem; box-shadow: none; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 400; }
.course-jump .chip:hover { border-color: var(--muted); }
.course-jump .chip span { color: var(--muted); font-variant-numeric: tabular-nums; }
.course { margin: 0 0 4.5rem; scroll-margin-top: 120px; }
.course-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.25rem; }
.course-head p { margin: 0; }
.course-progress { display: flex; align-items: center; gap: 1rem; max-width: 30rem; margin-top: 0.85rem; }
.course-progress .lesson-progress { flex: 1; }
.course-progress p { white-space: nowrap; font-size: 0.85rem; }
.module { margin: 2.5rem 0 0; }
.module-head { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-bottom: 1rem; }
.module-step { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-dark); }
.module-head h3 { font-size: 1.25rem; margin: 0.15rem 0 0.25rem; }
.module-head p.muted { margin: 0; }
.lesson-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.lesson-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--white); transition: border-color 0.15s, box-shadow 0.15s; }
.lesson-card:hover { border-color: var(--muted); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.lesson-card.complete { border-color: var(--ok); }
.lesson-title { margin: 0; font-size: 1.05rem; font-family: var(--font-display); line-height: 1.3; }
.lesson-title a { color: var(--ink); text-decoration: none; }
.lesson-title a:hover { color: var(--link); }
.lesson-summary { margin: 0; flex: 1; font-size: 0.92rem; color: #424245; }
.lesson-progress { position: relative; height: 6px; border-radius: 6px; background: var(--panel); overflow: hidden; }
.lesson-progress span { display: block; width: 0; height: 100%; border-radius: 6px; background: var(--ok); transition: width 0.3s; }
.lesson-meta { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: 0.82rem; color: var(--muted); }
.lesson-actions { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 0; }
.lesson-guide { font-size: 0.88rem; }

/* Buttons */
.pill { display: inline-block; border-radius: 980px; padding: 0.55rem 1.3rem; font-weight: 400; text-decoration: none; white-space: nowrap; border: 1px solid transparent; line-height: 1.3; max-width: 100%; font-size: 1rem; }
.pill-solid { background: var(--action); color: var(--white); }
.site-header nav a.pill-solid { color: var(--white); }
.pill-solid:hover { background: var(--action-hover); }
.pill-light { background: var(--white); color: var(--ink); }
.pill-light:hover { background: #e8e8ed; }
.pill-small { font-size: 0.8rem; padding: 0.3rem 0.85rem; }
.pill-large { font-size: 1.05rem; padding: 0.8rem 1.6rem; white-space: normal; }
.more { color: var(--link); text-decoration: none; font-size: 1.05rem; }
.more::after { content: " ›"; }
.more:hover { text-decoration: underline; }

/* Landing page */
.landing { max-width: none; padding: 0; margin: 0; overflow-x: clip; }
.landing section { margin: 0; padding: 5.5rem 1rem; }
.landing h1, .landing h2, .landing h3 { color: var(--ink); font-family: var(--font-display); }
.narrow { max-width: 42rem; margin-left: auto; margin-right: auto; }
.landing section.narrow { margin-left: auto; margin-right: auto; }
.eyebrow { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--brass-dark); letter-spacing: 0; }
.fine { font-size: 0.8rem; color: var(--muted); }
.section-title, .feature-row h2, .landing .band-dark h2, .landing .final-cta h2, .hero h1, .pull-quote blockquote p { text-wrap: balance; }
.section-title { text-align: center; font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; margin: 0 auto 2.75rem; max-width: 52rem; }
.section-title span { color: var(--muted); }
.section-sub { text-align: center; max-width: 40rem; margin: 0 auto 1.5rem; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin: 1.75rem 0 0.75rem; }

/* Hero: headline, then the product, drawn as a live sheet (animated by /motion.js). */
.hero { text-align: center; padding-top: 4.5rem !important; padding-bottom: 0 !important; overflow: hidden; background: radial-gradient(60rem 28rem at 50% 115%, #eef4ff 0%, rgba(238, 244, 255, 0) 70%); }
.hero h1 { font-size: clamp(2.75rem, 8vw, 5.75rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.035em; margin: 0 auto 1.25rem; }
.lead { font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.35; color: var(--muted); max-width: 40rem; margin: 0 auto; letter-spacing: -0.01em; }
/* Hero: a real recording of the product (npm run hero-video), in a plain frame. The box keeps
   the video's proportions and shows its poster until the first frame, so nothing shifts. */
.hero-demo { margin: 3rem auto 0; max-width: 62rem; }
.hero-video-box { position: relative; aspect-ratio: 1650 / 972; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white) url(/img/hero-desktop.webp) center / cover no-repeat; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px rgba(0, 0, 0, 0.07); }
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-video.resting { opacity: 0; }
.hero-demo figcaption { margin-top: 0.9rem; color: var(--muted); font-size: 0.92rem; }
/* The pause button (motion.js adds it: moving pictures need a way to stop them). */
.hero-pause { position: absolute; right: 0.6rem; bottom: 0.6rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 980px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font: inherit; font-size: 0.8rem; cursor: pointer; }
.hero-pause:hover { background: var(--white); }
.hero-pause:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
@media (max-width: 640px) {
  /* Phones get the phone recording (the <source media> in the page). */
  .hero-demo { max-width: 19rem; margin-top: 2.25rem; }
  .hero-video-box { aspect-ratio: 780 / 1336; background-image: url(/img/hero-phone.webp); border-radius: 18px; }
}
.pill-tag { font-size: 0.85rem; padding: 0.3rem 0.8rem; border-radius: 980px; transition: opacity 0.3s, transform 0.3s; }
.pill-tag.ok { background: var(--ok-bg); color: var(--ok); }
.pill-tag.bad { background: var(--bad-bg); color: var(--bad); }
.pill-tag.hidden { opacity: 0; transform: translateY(6px); }

.proof { background: var(--panel); padding: 2.25rem 1rem !important; }
.proof ul { list-style: none; padding: 0; margin: 0 auto; max-width: 60rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; text-align: center; }
.proof li { color: var(--muted); font-size: 0.95rem; }
.proof strong.word { font-size: 1.6rem; line-height: 2.75rem; white-space: nowrap; }
.proof strong { display: block; color: var(--ink); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Tiles, each with a small animated picture. */
.tiles-section { background: var(--panel); padding-top: 3.5rem !important; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 64rem; margin: 0 auto; }
.tile { background: var(--white); border-radius: 28px; padding: 2.25rem; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); }
.tile h3 { font-size: 1.6rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.tile p { color: var(--muted); margin: 0; }
.tile .eyebrow { margin-bottom: 0.4rem; }
.tile-wide { grid-column: 1 / -1; padding: 3rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.tile-wide h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.tile-dark { background: linear-gradient(160deg, #1b2d4a, var(--navy-deep)); }
.tile-dark h3 { color: var(--white) !important; }
.tile-dark p { color: var(--on-navy); max-width: 40rem; }
.tile-dark .eyebrow { color: var(--brass-light); }
.art-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.art-cells i { aspect-ratio: 2 / 1; border-radius: 4px; background: var(--navy-line); animation: cell-check 6s infinite; }
.art-cells i:nth-child(6n + 1) { background: #34476a; animation: none; }
.art-cells i { animation-delay: calc(var(--d, 0) * 1s); }
.art-cells i:nth-child(14) { animation-name: cell-wrong; }
@keyframes cell-check { 0%, 12% { background: var(--navy-line); } 22%, 80% { background: #1d7348; } 92%, 100% { background: var(--navy-line); } }
@keyframes cell-wrong { 0%, 12% { background: var(--navy-line); } 22%, 80% { background: #b42318; } 92%, 100% { background: var(--navy-line); } }
.art-roll { height: 2.6rem; overflow: hidden; margin-bottom: 1.25rem; font: 700 2rem/2.6rem var(--font-display); letter-spacing: -0.02em; color: var(--brass-dark); font-variant-numeric: tabular-nums; }
.art-roll span { display: block; animation: roll-up 10s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
@keyframes roll-up { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-100%); } 50%, 68% { transform: translateY(-200%); } 75%, 93% { transform: translateY(-300%); } 100% { transform: translateY(-400%); } }
.art-fns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.art-fns span { font: 600 0.8rem ui-monospace, Menlo, Consolas, monospace; padding: 0.3rem 0.6rem; border-radius: 6px; background: #eef4ff; color: #0055b3; animation: float 4s ease-in-out infinite; }
.art-fns span:nth-child(2n) { animation-delay: -1.3s; }
.art-fns span:nth-child(3n) { animation-delay: -2.6s; }
@keyframes float { 50% { transform: translateY(-4px); } }
.art-taccount { display: grid; grid-template-columns: 1fr 1fr; width: 11rem; margin-bottom: 1.25rem; font: 0.85rem var(--font-body); font-variant-numeric: tabular-nums; }
.art-taccount b { grid-column: 1 / -1; text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 0.2rem; }
.art-taccount span { display: flex; flex-direction: column; padding: 0.3rem 0.5rem; gap: 0.15rem; min-height: 3.2rem; }
.art-taccount .dr-side { border-right: 2px solid var(--ink); align-items: flex-start; }
.art-taccount .cr-side { align-items: flex-end; }
.art-taccount em { font-style: normal; animation: post 6s infinite both; }
.art-taccount .dr-side em:nth-child(2) { animation-delay: 0.6s; }
.art-taccount .cr-side em { animation-delay: 1.2s; }
@keyframes post { 0%, 8% { opacity: 0; transform: translateX(-8px); } 18%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.art-timer { position: relative; width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; }
.art-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.art-timer circle { fill: none; stroke: var(--panel); stroke-width: 3.5; }
.art-timer .arc { stroke: var(--action); stroke-linecap: round; stroke-dasharray: 119.4; animation: countdown 12s linear infinite; }
@keyframes countdown { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 119.4; } }
.art-timer span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 0.85rem var(--font-display); font-variant-numeric: tabular-nums; }

/* Story: "learn it twice", then the copy, then the MO-220 quote. */
.story { background: var(--white); }
.twice { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 52rem; margin: 0 auto 3rem; }
.twice-card { flex: 1; border-radius: 24px; padding: 1.75rem; background: var(--panel); text-align: left; }
.twice-card p { margin: 1.25rem 0 0; color: var(--muted); }
.twice-card p span { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brass-dark); margin-bottom: 0.25rem; }
.twice-card strong { display: block; font: 700 1.4rem/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }

.twice-do { background: linear-gradient(160deg, #1b2d4a, var(--navy-deep)); }
.twice-do strong { color: var(--white); }
.twice-do p { color: var(--on-navy); }
.twice-do p span { color: var(--brass-light); }
.art-page { display: grid; gap: 0.55rem; padding: 1rem; background: var(--white); border-radius: 12px; }
.art-page i { height: 0.45rem; border-radius: 4px; background: #e3e3e8; }
.art-page i:nth-child(1) { width: 55%; background: #c7c7cc; height: 0.6rem; }
.art-page i:nth-child(4) { width: 80%; }
.art-page i:nth-child(6) { width: 65%; }
.art-mini-sheet { display: grid; grid-template-columns: 1.6fr 1fr; gap: 4px; padding: 1rem; background: var(--navy-deep); border-radius: 12px; }
.art-mini-sheet i { height: 1.05rem; border-radius: 3px; background: var(--navy-line); }
.art-mini-sheet i.g { background: #1d7348; animation: cell-check 5s infinite; }
.art-mini-sheet i.g:nth-of-type(4) { animation-delay: 0.4s; }
.art-mini-sheet i.g:nth-of-type(6) { animation-delay: 0.8s; }
.twice-arrow { flex: 0 0 2.5rem; height: 2px; background: var(--line); position: relative; }
.twice-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--line); border-right: 0; }
.story-copy p { color: #424245; font-size: 1.15rem; line-height: 1.6; }
.pull-quote { max-width: 48rem; margin: 3.5rem auto 0; text-align: center; }
.pull-intro { color: var(--muted); font-size: 1.05rem; max-width: 34rem; margin: 0 auto 1rem; }
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p { font: 700 clamp(2rem, 5vw, 3.5rem)/1.08 var(--font-display); letter-spacing: -0.03em; margin: 0; background: linear-gradient(90deg, var(--ink) 0%, #4a4a4f 50%, var(--brass-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pull-quote figcaption { margin-top: 0.9rem; font-size: 0.9rem; }
.pull-quote figcaption a { color: var(--link); }
.pull-close { margin: 1.5rem auto 0; font-size: 1.25rem; font-weight: 600; color: var(--ink); }

/* Feature rows: copy and a product picture side by side, alternating. */
.feature-rows { padding-top: 1rem !important; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: center; max-width: 66rem; margin: 0 auto; padding: 3.5rem 0; }
.feature-row.flip .feature-copy { order: 2; }
.feature-row h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 1rem; }
.feature-row p { color: #424245; font-size: 1.08rem; line-height: 1.6; margin: 0; }
.feature-shot { margin: 0; border-radius: 20px; background: var(--panel); padding: 1rem; }
.feature-shot img, .band-shot img, .shot-card img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); background: var(--white); }
.feature-shot.portrait { max-width: 22rem; justify-self: center; }
.steps-art { display: grid; gap: 0.85rem; padding: 1.5rem; border-radius: 20px; background: var(--panel); }
.step-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding: 1rem 1.15rem; background: var(--white); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
.step-card .dots { color: var(--ink); font-size: 0.75rem; letter-spacing: 0.08em; }
.step-card strong { font-weight: 600; font-size: 0.98rem; }
.step-card .tick { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ok-bg); position: relative; }
.step-card .tick::after { content: ""; position: absolute; left: 0.55rem; top: 0.33rem; width: 0.35rem; height: 0.7rem; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.step-card:nth-child(2) { margin-left: 1.25rem; }
.step-card:nth-child(3) { margin-left: 2.5rem; }

/* Gallery: screenshots in a row that scrolls (and snaps) sideways. */
/* Gallery: full-bleed slideshow of real screenshots. With motion the track drifts past
   (seamless because motion.js doubles it) and pauses under the pointer; otherwise it is a
   row that scrolls sideways with snapping. */
.gallery-section { background: var(--panel); padding-left: 0 !important; padding-right: 0 !important; }
.gallery-section .section-title { padding: 0 1rem; margin-bottom: 3rem; }
.gallery { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.5rem 0 1rem; }
.gallery::-webkit-scrollbar { display: none; }
.gallery-track { display: flex; gap: 1.5rem; width: max-content; padding: 0 max(1.5rem, calc((100vw - 90rem) / 2)); }
.motion .gallery { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.motion .gallery-track { padding: 0; animation: gallery-drift var(--gallery-seconds, 80s) linear infinite; will-change: transform; }
.motion .gallery:hover .gallery-track, .motion .gallery:focus-within .gallery-track { animation-play-state: paused; }
@keyframes gallery-drift { to { transform: translateX(calc(-50% - 0.75rem)); } }
.shot-card { flex: 0 0 clamp(20rem, 30vw, 34rem); margin: 0; scroll-snap-align: center; background: var(--white); border-radius: 24px; padding: 1.1rem 1.1rem 1.35rem; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.shot-card img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.shot-card figcaption { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; line-height: 1.4; }
.shot-card figcaption strong { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: 0.15rem; }
@media (prefers-reduced-motion: reduce) { .gallery-track { animation: none !important; } }

.band-dark { background: radial-gradient(60rem 30rem at 50% 115%, rgba(212, 162, 76, 0.16), transparent 70%), linear-gradient(180deg, var(--navy), var(--navy-deep)); color: var(--on-navy); text-align: center; padding-bottom: 0 !important; overflow: hidden; }
.landing .band-dark h2 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 1.25rem; }
.band-dark p { font-size: 1.1rem; }
.band-dark a:not(.pill) { color: #7cb7ff; }
.band-dark .fine { color: #9aa6b8; }
.band-shot { max-width: 56rem; margin: 3.5rem auto 0; padding: 1.25rem 1.25rem 0; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, #24385a, var(--navy-deep)); }
.band-shot img { border-radius: 12px 12px 0 0; box-shadow: 0 -10px 60px rgba(226, 181, 94, 0.18); }

.how { background: var(--panel); }
.steps { list-style: none; padding: 0; margin: 0 auto; max-width: 64rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; counter-reset: step; }
.steps li { background: var(--white); border-radius: 22px; padding: 1.75rem; counter-increment: step; }
.steps h3 { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 700; }
.steps h3::before { content: counter(step); display: block; font-size: 2.2rem; font-weight: 700; color: var(--brass); line-height: 1; margin-bottom: 0.75rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.98rem; }

/* Curriculum: a drifting ticker of every lesson, then one card per course with its modules folded. */
.ticker { display: grid; gap: 0.75rem; margin: 2.5rem 0 3rem; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker:empty { display: none; }
.ticker-row { overflow: hidden; }
.ticker-track { display: flex; gap: 0.75rem; width: max-content; animation: ticker 90s linear infinite; }
.ticker-row:nth-child(2) .ticker-track { animation-direction: reverse; animation-duration: 110s; }
.ticker span { white-space: nowrap; padding: 0.55rem 1rem; border-radius: 980px; background: var(--panel); color: #424245; font-size: 0.95rem; }
.ticker-row:nth-child(2) span { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
@keyframes ticker { to { transform: translateX(-50%); } }
.curriculum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; max-width: 66rem; margin: 0 auto 1.5rem; align-items: start; }
.course-card { background: var(--panel); border-radius: 28px; padding: 2rem; }
.course-card h3 { font-size: 1.5rem; margin: 0; letter-spacing: -0.02em; }
.course-meta { color: var(--muted); margin: 0.25rem 0 1rem; font-size: 0.95rem; }
.course-card details { border-top: 1px solid var(--line); }
.course-card summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 0; font-weight: 600; }
.course-card summary::-webkit-details-marker { display: none; }
.course-card summary .count { flex: none; min-width: 1.8rem; text-align: center; font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 980px; background: var(--white); color: var(--muted); transition: background 0.2s, color 0.2s; }
.course-card details[open] summary .count { background: var(--ink); color: var(--white); }
.course-card ul { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.course-card li { padding: 0.3rem 0; font-size: 0.95rem; }
.course-card li a { color: #424245; text-decoration: none; }
.course-card li a:hover { color: var(--link); text-decoration: underline; }
.course-start { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.course-start .more { font-size: 0.98rem; }

.audiences { background: var(--white); }
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; max-width: 66rem; margin: 0 auto 4rem; }
.audience { background: var(--panel); border-radius: 22px; padding: 1.75rem; }
.audience h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.audience p { margin: 0; color: #424245; font-size: 0.98rem; }
.audience strong { font-weight: 600; }
.instructors { text-align: center; }
.instructors h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem; }
.instructors p { color: #424245; font-size: 1.1rem; line-height: 1.55; }

.faq { padding-top: 2rem !important; }
.faq .section-title { margin-bottom: 1.5rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0.75rem 0 0; color: #424245; }

.final-cta { text-align: center; background: var(--panel); }
.landing .final-cta h2 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 0.75rem; }

/* Motion. /motion.js adds .motion to <html> (never when the visitor prefers reduced motion),
   so without JavaScript everything is simply visible. */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--delay, 0s); }
.motion .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .art-cells i, .art-roll span, .art-fns span, .art-taccount em, .art-timer .arc, .art-mini-sheet i.g, .ticker-track { animation: none !important; }
  .art-cells i:not(:nth-child(6n + 1)) { background: #1d7348; }
  .art-cells i:nth-child(14) { background: #b42318; }
  .ticker-row { overflow-x: auto; }
  .tile, .tile:hover { transition: none; transform: none; }
}

/* Footer */
footer.site-footer { max-width: none; margin: 0; padding: 1.5rem 1rem 2rem; background: var(--panel); color: var(--muted); font-size: 0.75rem; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 0.5rem 0 1rem; }
.footer-brand .brand { display: inline-flex; align-items: center; gap: 0.55rem; font: 650 0.98rem var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.footer-brand .brand img { width: 26px; height: 26px; }
.footer-brand .tagline { font-size: 0.85rem; color: var(--muted); }
.footer-inner { max-width: 64rem; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 1rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0; }
.site-footer a { color: #424245; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: 0.5rem 0; }

/* Pricing */
.pricing-page { max-width: 64rem; padding-top: 4rem; }
.pricing-page h1 { text-align: center; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.75rem; }
.pricing-page .lead { text-align: center; margin-bottom: 3rem; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan { position: relative; background: var(--panel); border-radius: 28px; padding: 2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.plan.featured { background: var(--white); box-shadow: 0 0 0 2px var(--action), 0 20px 50px rgba(0, 0, 0, 0.08); }
.plan h2 { margin: 0; font-size: 1.4rem; font-weight: 700; }
.plan .price { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; margin: 0.5rem 0 0; font-family: var(--font-display); }
.plan .price span { font-size: 1rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan .plan-sub { color: var(--muted); margin: 0 0 1rem; }
.plan .pill { margin-top: auto; text-align: center; cursor: not-allowed; font: inherit; }
.plan .pill:disabled { opacity: 0.6; }
.plan .pill:not(:disabled) { cursor: pointer; }
/* What happened with checkout (pricing.js): cancelled, waiting for the plan, subscribed, an error. */
.checkout-note { max-width: 36rem; margin: 1.5rem auto 0; padding: 0.8rem 1.1rem; border-radius: 14px; background: var(--panel); color: var(--ink); text-align: center; }
.checkout-note.ok { background: var(--ok-bg); color: #14532d; }
.checkout-note.bad { background: var(--bad-bg); color: #7f1d1d; }
.plan-badge { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--brass-dark); }
.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { padding-left: 1.6rem; position: relative; margin: 0.45rem 0; color: #424245; font-size: 0.98rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--action); font-weight: 600; }
.pricing-page .fine { text-align: center; margin: 1rem 0 3rem; }
.catalog { background: var(--panel); border-radius: 28px; padding: 2rem 2.25rem; margin: 2rem 0; }
.catalog h2 { margin-top: 0; font-size: 1.8rem; font-weight: 700; }
.catalog-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; }
.catalog h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.catalog-list { padding-left: 1.4rem; margin: 0; }
.catalog-list li { margin: 0.3rem 0; }
.pricing-page .faq { padding: 0 0 2rem; }
.pricing-page .faq h2 { font-size: 1.8rem; font-weight: 700; text-align: center; }

@media (max-width: 900px) {
  .feature-row, .tile-wide { grid-template-columns: 1fr; gap: 2rem; }
  .feature-row.flip .feature-copy { order: 0; }
  .feature-row { padding: 2.5rem 0; }
}
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile-wide { padding: 1.75rem; }
  .site-header nav { gap: 1rem; }
  .landing section { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .section-title { margin-bottom: 2rem; }
  .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  .proof strong { font-size: 1.8rem; }
  .twice { flex-direction: column; gap: 0.75rem; }
  .twice-card { width: 100%; }
  .twice-arrow { flex-basis: 1.75rem; width: 2px; height: 1.75rem; }
  .twice-arrow::after { right: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-top: 8px solid var(--line); border-bottom: 0; }
  .story-copy p { font-size: 1.05rem; }
  .pull-quote { margin-top: 2.5rem; }
  .feature-row h2 { font-size: 1.75rem; }
  .feature-row p { font-size: 1rem; }
  .feature-shot { padding: 0.6rem; border-radius: 16px; }
  /* Wide screenshots: show the left part bigger, so the task and feedback stay readable. */
  .feature-shot:not(.portrait) { overflow: hidden; }
  .feature-shot:not(.portrait) img { width: 165%; max-width: none; }
  .proof strong.word { font-size: 1.3rem; line-height: 2.3rem; }
  .step-card:nth-child(2), .step-card:nth-child(3) { margin-left: 0; }
  .steps-art { padding: 1rem; }
  .band-shot { padding: 0.6rem 0.6rem 0; margin-top: 2.5rem; }
  .course-card { padding: 1.5rem; border-radius: 22px; }
  .ticker { margin: 1.5rem -1rem 2rem; }
  .shot-card { flex-basis: 78vw; }
  .gallery-track { gap: 1rem; }
  .audience-grid { margin-bottom: 2.5rem; }
  .faq summary { font-size: 1.02rem; }
}
@media (max-width: 480px) {
  /* Phones: the mark alone stands for the brand, so Lessons, Progress and Start free fit. */
  .site-header nav { gap: 0.85rem; }
  .site-header nav a[href="/pricing"]:not(.pill) { display: none; }
  .site-header .brand-name { display: none; }
  .cta-row { gap: 1rem; }
}

/* Concept pages: one article per lesson (courses/.../<lesson>/page.html), then one call to action. */
.concept-page { max-width: 44rem; padding: 3rem 1rem 0; line-height: 1.65; }
.concept-page article h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -0.02em; margin: 0 0 1rem; }
.concept-page article h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; color: var(--ink); }
.concept-page article h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; color: var(--ink); }
.concept-page article .lead { font-size: 1.15rem; color: #424245; max-width: none; margin-left: 0; margin-right: 0; }
.concept-page article table { border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; width: 100%; }
.concept-page article th, .concept-page article td { border-bottom: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; }
.concept-page article td.num, .concept-page article th.num { text-align: right; }
.concept-page article code { background: var(--panel); padding: 0.1rem 0.3rem; border-radius: 6px; font-size: 0.9em; }
.concept-page article .note { background: var(--panel); border-radius: 14px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.concept-page .faq { padding: 1rem 0 0 !important; }
.concept-page .final-cta { margin: 3rem -1rem 0; padding: 3rem 1rem; border-radius: 22px; }
.concept-page .final-cta h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.5rem; }

/* Legal pages (/terms, /privacy, /refunds): reading text with headings you can scan. */
.legal-page { max-width: 44rem; padding: 3rem 1rem 1rem; line-height: 1.6; }
.legal-page h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.5rem; }
.legal-page h2 { font-size: 1.4rem; margin: 2.5rem 0 0.6rem; scroll-margin-top: 4.5rem; }
.legal-page h3 { font-size: 1.1rem; margin: 1.75rem 0 0.4rem; scroll-margin-top: 4.5rem; }
.legal-page .legal-updated { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.95rem; }
.legal-page .draft-note { margin: 0 0 2rem; padding: 0.9rem 1.15rem; border-radius: 14px; background: var(--brass-tint); color: #4a3510; font-size: 0.95rem; }
.legal-page .legal-summary { padding: 0.25rem 1.35rem 1rem; border-radius: 18px; background: var(--panel); }
.legal-page .legal-summary h2 { margin-top: 1rem; }
.legal-page ul, .legal-page ol { padding-left: 1.25rem; }
.legal-page li + li { margin-top: 0.4rem; }
.legal-page table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.legal-page caption { text-align: left; font-weight: 600; padding: 0 0.6rem 0.4rem; }
.legal-page th, .legal-page td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
.legal-page .placeholder { padding: 0 0.3rem; border-radius: 4px; background: var(--brass-tint); color: #4a3510; font-weight: 600; }
@media (max-width: 480px) { .legal-page .legal-summary { padding: 0.25rem 1rem 0.9rem; } }

/* Wide tables on content pages scroll inside their own box (content-tools/lib/pages.js wrapTables). */
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0; }
.table-scroll:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
.table-scroll > table { margin: 0; }
.concept-page article code { overflow-wrap: anywhere; }
.concept-page article pre { overflow-x: auto; }

/* Timed tests: centred like the rest of the site (the question view still gets room for the grid). */
.test-page main { max-width: 66rem; min-height: calc(100vh - 52px - 12rem); margin: 0 auto; padding: 2rem 1rem 3rem; }

/* Exercise player on phones and small tablets: a bar at the bottom of the screen keeps the
   main action (Check answer, or Submit in a timed test) and the way back to the task in
   reach while you work in the sheet. The task panel's own primary button hides there. */
.mobile-bar { display: none; }
@media (max-width: 900px) {
  .mobile-bar {
    position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem max(0.75rem, env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line);
  }
  .mobile-bar button { min-height: 44px; padding: 0.5rem 1rem; white-space: nowrap; }
  .mobile-bar .primary { margin-left: auto; padding: 0.5rem 1.4rem; font-weight: 600; }
  .stepper a { width: 2rem; height: 2rem; }
  .mobile-bar button { display: inline-flex; align-items: center; gap: 0.35rem; }
  /* The verdict floats just above the bar until the next action. */
  .mobile-status { position: absolute; left: 0.75rem; right: 0.75rem; bottom: calc(100% + 0.5rem); justify-content: center; font-weight: 600; border: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); animation: card-in 0.25s ease-out; }
  .mobile-status[hidden] { display: none; }
  .mobile-status.ok { background: var(--ok-bg); color: var(--ok); }
  .mobile-status.bad { background: var(--bad-bg); color: var(--bad); }
  .mobile-clock { font-size: 0.95rem; }
  .player-task .action-bar,
  .test-player .player-task .actions { display: none; }
  /* Room for the bar below the last content: the footer's grey runs down behind the bar. */
  body:has(.mobile-bar) .site-footer { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
  .player-task { border-radius: 18px; }
  .player-task h1 { font-size: 1.3rem; }
  .actions button { min-height: 40px; }
}

/* Touch screens: 16px form text, or phones zoom in on every field you tap. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
  a, button, summary, select, input, label { touch-action: manipulation; }
}

/* Progress page (/progress): a header with the streak, the numbers, then one section per
   question (what to practise today, how far each course is, MO-220 readiness). */
.progress-page { max-width: 66rem; padding-top: 3rem; padding-bottom: 3rem; }
.progress-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; margin-bottom: 2rem; }
.progress-head h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.4rem; }
.progress-head .lead { margin: 0; text-align: left; font-size: 1.1rem; max-width: 34rem; }
.streak-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; background: var(--panel); border-radius: 22px; padding: 1.1rem 1.4rem; min-width: 17rem; }
.streak-ring { position: relative; width: 4.5rem; height: 4.5rem; }
.streak-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.streak-ring circle { fill: none; stroke-width: 4; stroke: var(--white); }
.streak-ring .arc { stroke: var(--brass); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.streak-ring .streak-n { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.4rem var(--font-display); letter-spacing: -0.02em; }
.streak-text strong { display: block; font-size: 1.05rem; }
.streak-text .muted { font-size: 0.85rem; }
.week { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.week span { width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.65rem; font-weight: 600; color: var(--muted); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.week span.active { background: var(--brass-dark); color: var(--white); box-shadow: none; }
.week span.today { box-shadow: inset 0 0 0 2px var(--ink); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 0 0 3rem; }
.stat { display: flex; flex-direction: column; gap: 0.2rem; background: var(--panel); border-radius: 18px; padding: 1.1rem 1.25rem; }
.stat strong { font: 700 2rem/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.85rem; color: var(--muted); }
.progress-section { margin: 0 0 3rem; }
.section-head { margin: 0 0 1.1rem; }
.progress-page h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 0.35rem; }
.progress-page .section-note { color: var(--muted); margin: 0; max-width: 46rem; font-size: 0.98rem; }
.today-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.today-card { display: flex; flex-direction: column; background: var(--white); border-radius: 18px; padding: 1.15rem 1.25rem 1.25rem; box-shadow: inset 0 0 0 1px var(--line); }
.today-card .reason { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brass-dark); }
.today-card .reason.review { color: var(--link); }
.today-card .reason.weak { color: var(--bad); }
.today-card .reason.fluency { color: var(--ok); }
.today-card h3 { margin: 0 0 0.2rem; font-size: 1.1rem; line-height: 1.3; }
.today-meta { margin: 0; font-size: 0.85rem; color: var(--muted); }
.today-note { margin: 0.6rem 0 1rem; font-size: 0.92rem; color: #424245; }
.today-card .pill { align-self: flex-start; margin-top: auto; }
.pill-quiet { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pill-quiet:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.course-rows { display: grid; gap: 0.75rem; }
.course-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1.5rem; align-items: center; background: var(--panel); border-radius: 18px; padding: 1.1rem 1.35rem 1.2rem; }
.course-row h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.course-row .muted { margin: 0.15rem 0 0; font-size: 0.88rem; }
.course-row .lesson-progress { grid-column: 1 / -1; background: #e3e3e8; }
.course-row a.more { font-size: 0.95rem; }
/* Solved fills the bar in a light green; the fluent part sits on top in the full green. */
.course-row .lesson-progress span:first-child, .readiness .lesson-progress span:first-child { background: #9fd1b2; }
/* A start shows as a short bar, not a dot. */
.course-row .lesson-progress span:not([style*="width:0%"]), .readiness .lesson-progress span:not([style*="width:0%"]) { min-width: 6px; }
.lesson-progress .fluent { position: absolute; left: 0; top: 0; height: 100%; background: var(--ok); border-radius: inherit; }
.objectives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.objective { background: var(--white); border-radius: 18px; padding: 1.1rem 1.25rem 1.2rem; box-shadow: inset 0 0 0 1px var(--line); }
.objective h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.objective-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin: 0.2rem 0 0.75rem; font-size: 0.85rem; color: var(--muted); }
.objective ul { list-style: none; margin: 0; padding: 0.75rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.4rem; }
.objective li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; line-height: 1.35; color: #424245; }
.objective li .mark { margin-top: calc((1.35em - 0.95rem) / 2); }
.objective li a { color: inherit; text-decoration: none; }
.objective li a:hover { color: var(--link); text-decoration: underline; }
.objective-test { font-weight: 600; text-decoration: none; }
.objective-test:hover { text-decoration: underline; }
.progress-empty { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; background: var(--panel); border-radius: 22px; padding: 2.25rem 2.5rem; margin-bottom: 3rem; }
.progress-empty h2 { font-size: 1.6rem; margin: 0 0 0.5rem; }
.progress-empty-copy p:not(.eyebrow) { color: #424245; margin: 0 0 1.4rem; max-width: 30rem; }
.progress-empty-copy .eyebrow { margin-bottom: 0.35rem; font-size: 0.85rem; }
.progress-empty-steps { list-style: none; margin: 0; padding: 1.25rem 1.35rem; display: grid; gap: 0.85rem; background: var(--white); border-radius: 16px; }
.progress-empty-steps li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.93rem; line-height: 1.4; color: #424245; }
.progress-empty-steps .mark { margin-top: calc((1.4em - 0.95rem) / 2); }
.progress-empty-steps strong { color: var(--ink); }
.levels-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); }
.levels-legend li { display: flex; align-items: center; gap: 0.4rem; }
.levels-legend .mark { margin: 0; }
.progress-note { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.continue-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; background: linear-gradient(160deg, #1b2d4a, var(--navy-deep)); color: var(--white); border-radius: 18px; padding: 1rem 1.25rem; margin: 0 0 1.75rem; }
.continue-banner .label { color: var(--brass-light); margin: 0; }
.continue-banner p { margin: 0; }
.continue-banner strong { display: block; }
.continue-banner .muted { color: var(--on-navy); }
.continue-banner .pill { margin-left: auto; }
@media (max-width: 760px) {
  .progress-page { padding-top: 2rem; }
  .progress-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .streak-card { min-width: 0; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 2.5rem; }
  .stat strong { font-size: 1.7rem; }
  .progress-empty { grid-template-columns: 1fr; padding: 1.6rem 1.35rem; gap: 1.5rem; }
  .objectives { grid-template-columns: 1fr; }
  .progress-section { margin-bottom: 2.5rem; }
  .continue-banner .pill { margin-left: 0; }
}

/* Skeleton of the exercise page (pages/practice.html) and of the grid while the engine loads:
   the real layout's shapes, shimmering, so nothing jumps when the content arrives. */
.skel { display: block; height: 0.8rem; margin: 0 0 0.7rem; border-radius: 6px; background: linear-gradient(90deg, #e8e8ed 25%, #f2f2f5 50%, #e8e8ed 75%); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.skel-title { width: 80%; height: 1.05rem; margin-bottom: 0.6rem; }
.skel-bar { height: 0.35rem; margin: 0.4rem 0 1.4rem; }
.skel-row { height: 2.4rem; margin-bottom: 0.6rem; border-radius: 10px; }
.skel-heading { width: 75%; height: 1.7rem; margin: 1.6rem 0 0.9rem; border-radius: 8px; }
.skel-chips { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; }
.skel-chip { width: 10rem; height: 1.6rem; margin: 0; border-radius: 980px; }
.skel-card { display: block; margin-top: 1.4rem; padding: 1.1rem 1.1rem 0.5rem; border-radius: 14px; background: var(--white); }
.skel-card .skel { background: linear-gradient(90deg, #ededf1 25%, #f7f7f9 50%, #ededf1 75%); background-size: 200% 100%; }
.is-skeleton .action-bar { display: flex; gap: 0.5rem; }
.skel-button { width: 8.5rem; height: 2.4rem; margin: 0; border-radius: 980px; }
.is-skeleton .player-task { min-height: 30rem; }
.sheet-skeleton { flex: 1; display: flex; flex-direction: column; min-height: 26rem; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px #e3e3e8; background: #fff; }
.practice-page:not(.test-page) .player-work .sheet-skeleton { border-radius: 0; box-shadow: none; }
.sheet-skeleton-bar { display: block; height: 2.6rem; border-bottom: 1px solid #e3e3e8; background: #fbfbfd; }
.sheet-skeleton-bar + .sheet-skeleton-bar { height: 2.2rem; background: #fff; }
.sheet-skeleton-grid {
  display: block; flex: 1;
  background:
    linear-gradient(90deg, #f5f5f7 36px, transparent 36px) 0 0 / 100% 100% no-repeat,
    linear-gradient(#f5f5f7 23px, transparent 23px) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, #ececf0 1px, transparent 1px) 36px 0 / 96px 23px,
    linear-gradient(#ececf0 1px, transparent 1px) 0 0 / 96px 23px;
  animation: skel-fade 1.4s ease-in-out infinite alternate;
}
@keyframes skel-fade { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .skel, .sheet-skeleton-grid { animation: none; } }
@media (max-width: 900px) {
  .is-skeleton .outline { display: none; }
  .is-skeleton .action-bar { display: none; }
  .is-skeleton .player-task { min-height: 0; }
  .sheet-skeleton { min-height: 22rem; }
}
/* The outline drawer dims the page behind it; a click outside closes it (player.js). */
@media (min-width: 901px) and (max-width: 1200px) {
  .practice-page:not(.test-page) .player-shell.outline-open::before { content: ""; position: fixed; inset: 52px 0 0; z-index: 39; background: rgba(29, 29, 31, 0.12); }
}

/* Certificates (/verify, packages/engine/certificate.js) and the verified-test results. */
.verify-page main.verify-main { max-width: 56rem; padding: 2.5rem 1rem 4rem; }
.verify-lookup .lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.25rem; max-width: 40rem; text-align: left; }
.verify-form { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 30rem; }
.verify-form input { flex: 1 1 14rem; font: 600 1.05rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em; padding: 0.65rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; text-transform: uppercase; }
.verify-form input:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; border-color: transparent; }
.verify-form button { padding: 0.65rem 1.4rem; font-weight: 600; }
.verify-status:empty { display: none; }
.verify-status { margin: 0.9rem 0 0; color: var(--brass-dark); }
.verify-section { margin-top: 3.5rem; }
.verify-section h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.verify-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.verify-card { background: var(--panel); border-radius: 18px; padding: 1.25rem 1.35rem; }
.verify-card h3 { font-size: 1.02rem; margin: 0 0 0.4rem; }
.verify-card p { margin: 0; font-size: 0.95rem; color: #424245; }
.verify-note { margin: 1.25rem 0 0; padding: 1rem 1.2rem; border-radius: 14px; background: var(--brass-tint); color: #4a3510; font-size: 0.95rem; }
.verify-tests { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.verify-tests li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.verify-tests a { font-weight: 600; text-decoration: none; }
.cert-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.03em; white-space: nowrap; }

.certificate-view { margin-bottom: 1rem; }
.certificate { position: relative; text-align: center; padding: 3rem 2.5rem 2rem; border-radius: 22px; background: linear-gradient(180deg, #fffdf8, #fff); box-shadow: 0 0 0 1px #eadfc6, 0 24px 60px rgba(20, 35, 58, 0.08); overflow: hidden; }
.certificate::before { content: ""; position: absolute; inset: 10px; border: 1px solid #eadfc6; border-radius: 16px; pointer-events: none; }
.certificate.passed { box-shadow: 0 0 0 1px var(--brass), 0 24px 60px rgba(20, 35, 58, 0.1); }
.certificate.revoked { filter: grayscale(1); opacity: 0.85; }
.cert-head { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 0.2rem; margin-bottom: 1.6rem; }
.cert-kind { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-dark); }
.cert-issuer { margin: 0; font: 600 0.95rem var(--font-display); color: var(--navy); }
.cert-presented, .cert-statement { margin: 0; color: var(--muted); }
.cert-name { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.025em; margin: 0.35rem 0 0.5rem; color: var(--navy); overflow-wrap: anywhere; }
.cert-test { margin: 0.35rem 0 1.75rem; font: 600 clamp(1.15rem, 2.6vw, 1.5rem)/1.25 var(--font-display); color: var(--ink); }
.cert-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1rem; max-width: 40rem; margin: 0 auto; padding: 1.1rem 0; border-top: 1px solid #eadfc6; border-bottom: 1px solid #eadfc6; }
.cert-facts div { display: flex; flex-direction: column; gap: 0.1rem; }
.cert-facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cert-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cert-revoked { margin: 1rem auto 0; max-width: 34rem; color: var(--bad); font-weight: 600; }
.cert-foot { margin-top: 1.4rem; font-size: 0.8rem; color: var(--muted); }
.cert-foot p { margin: 0.2rem 0; }
.cert-detail { margin-top: 1.75rem; }
.cert-detail h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.cert-tasks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cert-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.cert-task-name .muted { display: block; font-size: 0.8rem; }
.cert-task-result { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.cert-task-mark { width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.cert-task.right .cert-task-mark { background: var(--ok); box-shadow: none; }
.cert-task.right .cert-task-result { color: var(--ok); }
.cert-task.partial .cert-task-mark { background: linear-gradient(90deg, var(--brass) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--brass); }
.cert-task.partial .cert-task-result { color: var(--brass-dark); }
.cert-task.missed .cert-task-result { color: var(--muted); }
.cert-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.25rem 0 0; }
.cert-actions .button { color: #fff; }
@media (max-width: 600px) {
  .certificate { padding: 2.25rem 1.25rem 1.5rem; }
  .cert-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .site-header, .site-footer, .verify-lookup, .verify-section, .cert-actions { display: none !important; }
  .verify-page main.verify-main { padding: 0; max-width: none; }
  .certificate { box-shadow: 0 0 0 1px #b8862b; break-inside: avoid; }
  .cert-detail { break-before: auto; }
}

/* Verified tests: the intro note, and the certificate claim on the results screen. */
.test-cert-note { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 14px; background: var(--brass-tint); color: #4a3510; max-width: 40rem; }
.test-cert-note p { margin: 0; }
.test-cert-note .cert-seal { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: var(--brass-light); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
.test-verified { margin: 1.5rem 0; padding: 1.4rem 1.5rem; border-radius: 18px; background: var(--panel); max-width: 46rem; }
.test-verified h2 { font-size: 1.3rem; margin: 0 0 0.4rem; }
.test-verified p { margin: 0.4rem 0; }
.test-verified.passed { background: linear-gradient(180deg, #fffaf0, var(--brass-tint)); box-shadow: inset 0 0 0 1px #ecd5a6; }
.claim-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.claim-form input { flex: 1 1 16rem; font: inherit; padding: 0.55rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; }
.claim-form button { font-weight: 600; }
.claim-error:empty { display: none; }
.claim-error { color: var(--bad); font-size: 0.9rem; }
.cert-link { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.9rem; }
.cert-link code { padding: 0.45rem 0.75rem; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; overflow-wrap: anywhere; }
.cert-link .button { color: #fff; }
.unverified { color: var(--muted); font-size: 0.9rem; }

/* /progress: certificates claimed in this browser, and MO-220 readiness. */
.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.cert-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: center; padding: 0.85rem 1.1rem; border-radius: 14px; background: var(--panel); }
.cert-item.passed { background: var(--brass-tint); box-shadow: inset 0 0 0 1px #ecd5a6; }
.cert-item-kind { grid-row: 1 / 3; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-dark); }
.cert-item a { font-weight: 600; text-decoration: none; }
.cert-item .muted { font-size: 0.85rem; }
.readiness { display: grid; gap: 0.85rem; margin-bottom: 1rem; padding: 1.15rem 1.35rem 1.2rem; border-radius: 18px; background: var(--panel); }
.readiness .lesson-progress { background: #e3e3e8; }
.readiness-meter p { margin: 0.55rem 0 0; }
.readiness-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--line); color: #424245; font-size: 0.95rem; }

/* ===== Accounts: sign-in link, account menu, signed-in buttons, /sign-in, /pricing status =====
   (sites/accounting/layout.js accountNav, account-ui.js, sign-in.js). <html class="signed-in"> is
   set before the first paint when this browser holds a session, and picks which of each pair
   shows, so nothing flashes or shifts. */
html:not(.signed-in) .when-signed-in, html.signed-in .when-signed-out { display: none !important; }

.site-header .account-slot { position: relative; display: inline-flex; align-items: center; }
.site-header nav a.nav-signin { opacity: 1; font-weight: 500; padding: 0.3rem 0.85rem; border: 1px solid var(--line); border-radius: 980px; line-height: 1.3; white-space: nowrap; }
.site-header nav a.nav-signin:hover { border-color: var(--muted); }
.site-header nav a.nav-signin[aria-current="page"] { border-color: var(--ink); }
.site-header .account { position: relative; display: inline-flex; }
/* The account button: a navy circle with the email's initial; a 40px target around a 30px circle. */
.site-header .account-btn {
  width: 40px; height: 40px; margin: -5px; padding: 5px; border: none; border-radius: 50%;
  background: var(--navy); background-clip: content-box; color: var(--white);
  font: 600 0.85rem/30px var(--font-body); letter-spacing: 0; text-align: center;
}
.site-header .account-btn::before { content: var(--account-initial, ""); }
.site-header .account-btn:hover { background-color: #22375a; }
.site-header .account-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--brass-light); }
.site-header .account-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 0; }
.site-header .account-menu {
  position: absolute; top: calc(100% + 0.6rem); right: -0.25rem; z-index: 60;
  display: flex; flex-direction: column; min-width: 13.5rem; max-width: calc(100vw - 2rem); padding: 0.35rem;
  background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.site-header .account-email { padding: 0.55rem 0.75rem 0.6rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.site-header nav .account-menu a[href]:not(.pill), .site-header .account-menu .account-signout {
  display: block; width: 100%; padding: 0.55rem 0.75rem; border: none; border-radius: 8px; background: none;
  color: var(--ink); font-size: 0.9rem; text-align: left; text-decoration: none; opacity: 1; line-height: 1.3;
}
.site-header nav .account-menu a[href]:not(.pill):hover, .site-header .account-menu .account-signout:hover { background: var(--panel); }
.site-header .account-menu .account-signout { font: inherit; font-size: 0.9rem; cursor: pointer; }
@media (max-width: 480px) {
  .site-header nav a.nav-signin { padding: 0.3rem 0.7rem; }
  .site-header nav .account-menu a[href]:not(.pill), .site-header .account-menu .account-signout { padding: 0.75rem; }
  /* On phones the menu lines up with the page gutter, whatever sits left of the button. */
  .site-header .account-menu { position: fixed; top: calc(52px + 0.4rem); right: 1rem; min-width: min(15rem, calc(100vw - 2rem)); }
}
@media (max-width: 380px) {
  /* The narrowest phones: Progress lives in the account menu and the footer too. */
  .site-header nav { gap: 0.7rem; }
  .site-header nav > a[href="/progress"] { display: none; }
}

/* /sign-in */
.sign-in-main { max-width: 27rem; min-height: 62vh; padding: 3.5rem 1rem 4.5rem; }
.sign-in-main h1 { font-size: clamp(1.9rem, 5vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.5rem; text-wrap: balance; }
.sign-in-main h1:focus { outline: none; }
.sign-in-lead { margin: 0 0 1.5rem; color: var(--muted); font-size: 1.05rem; overflow-wrap: anywhere; }
.sign-in-form { display: flex; flex-direction: column; }
.sign-in-form label { margin: 1rem 0 0.35rem; font-size: 0.9rem; font-weight: 600; }
.sign-in-form > label:first-child { margin-top: 0; }
.sign-in-form input {
  width: 100%; font: inherit; font-size: 1.0625rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink);
}
.sign-in-form input:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; border-color: transparent; }
.sign-in-form input[aria-invalid="true"] { border-color: var(--bad); }
.sign-in-form .field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sign-in-form .field-row label { margin-top: 1rem; }
.sign-in-form .field-link { font-size: 0.9rem; text-decoration: none; }
.sign-in-form .field-link:hover { text-decoration: underline; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 4.75rem; }
.password-field .show-password {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  min-width: 3.75rem; min-height: 2.5rem; padding: 0 0.75rem; border: none; border-radius: 9px; background: none;
  color: var(--link); font-size: 0.9rem;
}
.password-field .show-password:hover { background: var(--panel); }
.field-hint { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); }
.sign-in-submit.pill { margin-top: 1.5rem; width: 100%; padding: 0.8rem 1.4rem; font-size: 1.05rem; border: none; text-align: center; }
.sign-in-submit.pill:disabled { opacity: 0.6; }
.sign-in-switch { margin: 1.25rem 0 0; font-size: 0.95rem; color: var(--muted); }
.sign-in-terms { margin: 1rem 0 0; font-size: 0.8rem; color: var(--muted); }
.sign-in-error, .sign-in-ok, .sign-in-note { margin: 0 0 1.25rem; padding: 0.8rem 1rem; border-radius: 12px; font-size: 0.95rem; }
.sign-in-error { background: var(--bad-bg); color: var(--bad); }
.sign-in-ok { background: var(--ok-bg); color: var(--ok); }
.sign-in-note { background: var(--panel); color: var(--ink); }
.sign-in-panel p { margin: 0 0 1rem; }
.sign-in-panel .pill { min-width: 10rem; text-align: center; }
.link-button { padding: 0; border: none; border-radius: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
@media (max-width: 480px) {
  .sign-in-main { padding-top: 2.25rem; }
}

/* /pricing: a subscriber sees this instead of the buy buttons. */
.plan-status { max-width: 30rem; margin: -2rem auto 2.5rem; padding: 0.8rem 1.1rem; border-radius: 14px; background: var(--brass-tint); color: #4a3510; text-align: center; }
.plan .plan-owned { margin: auto 0 0; padding: 0.55rem 1.3rem; border-radius: 980px; background: var(--white); color: var(--ink); font-weight: 600; text-align: center; box-shadow: inset 0 0 0 1px var(--line); }

/* 404 (pages/404.html; Vercel serves dist/404.html for any missing page). */
.not-found { max-width: 40rem; min-height: 55vh; padding: 5rem 1rem 4rem; }
.not-found h1 { font-size: clamp(2.2rem, 6vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.75rem; }
.not-found .lead { margin: 0 0 1.75rem; text-align: left; font-size: 1.15rem; }
.not-found-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; }