/* The front page: the order every polished learning app ships, in the
   exercise book's clothes.

   A cobalt cover owns the top (the family-code bar, the nav and the hero) and
   the closing band. Between them sits one white page ruled in a faint 5 mm
   grid. Highlighter yellow is the one button colour, on the app's chunky key.
   Print is Atkinson Hyperlegible Next; the pen, in the handwriting NSW
   children learn, only writes notes on the product, working and the price.

   The fonts, the colour tokens, the keys, the nav, the page, tape, the
   stepper and the back cover live in book.css, which loads first; this file
   adds the front page. Both typefaces are served from this site. Nothing
   loads from anyone else. */

html {
  -webkit-text-size-adjust: 100%;
  background: var(--cover);
  scrollbar-color: rgba(255, 255, 255, 0.5) var(--cover-deep);
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The plain zero, because the price is on this page: book.css says why. */
body.lp {
  margin: 0;
  background: var(--cover);
  color: var(--ink);
  font-family: "Learnest Plain Zero", var(--f-print);
  font-size: 1.0625rem;
  line-height: 1.55;
  caret-color: var(--pen);
  -webkit-font-smoothing: antialiased;
}

/* The price's own word in the nav, once the section links have gone (1080px). */
.nav-signin.nav-price { display: none; }

/* ------------------------------------------------------------------ family-code bar

   A slim strip above the nav, so a child finds the box before anything else.
   A visit from a Meta ad has it at the foot of the page instead, above the back
   cover: its parent has no code yet, and read the box as a login (ad_match.py). */

.codebar {
  color: var(--on-cover);
  background: var(--cover-deep);
  padding: 9px var(--side);
}
.codeform {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.codeform label { font-weight: 700; font-size: 1rem; }
.code-row { display: flex; gap: 8px; align-items: stretch; }

/* Six boxes to write in, like the answer cells on an exam paper. */
.code {
  --cell: 1.8ch;
  box-sizing: content-box;
  width: calc(6 * var(--cell));
  height: 44px;
  padding: 0 0 0 0.4ch;
  font: 700 1.3rem var(--f-code);
  letter-spacing: 0.8ch;
  text-transform: uppercase;
  color: var(--ink);
  background-color: #ffffff;
  background-image: repeating-linear-gradient(to right,
    transparent 0 calc(var(--cell) - 1.5px),
    rgba(29, 69, 163, 0.28) calc(var(--cell) - 1.5px) var(--cell));
  background-size: calc(5 * var(--cell)) 56%;
  background-position: 0 50%;
  background-repeat: no-repeat;
  border: 2px solid #ffffff;
  border-radius: 10px;
  caret-color: var(--red);
}
.code[aria-invalid="true"] { border-color: var(--hl); }
/* Go is the child's key, so it is white on the cover: yellow stays the one
   thing a parent presses. */
.key-go {
  min-height: 44px;
  min-width: 60px;
  padding: 0 1rem;
  font-size: 1.1rem;
  color: var(--hl-ink);
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 4px 0 var(--cover-deeper);
}
.key-go:hover { background: var(--cover-text); border-color: var(--cover-text); }
.key-go:active { box-shadow: 0 1px 0 var(--cover-deeper); }
.code-help { margin: 0; font-size: 0.92rem; color: var(--cover-soft); }
.code-error {
  margin: 0;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--red);
  background: #ffffff;
  border-radius: 8px;
}

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

/* On a laptop the first screen carries the start key and the trial's days: at
   1366 x 768 they end above 740px. So the top padding stays short (a phone
   and a tablet keep 40px), the two columns share the width, which sets the
   headline on three lines and both keys on one row, and the keys and the
   trial come before the ticks. */
.hero {
  color: var(--on-cover);
  padding: clamp(40px, 3vw, 44px) var(--side) clamp(72px, 9vw, 128px);
  overflow: hidden;
}
.hero-in {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* The measure is in em, not ch: a ch is a font's own zero, so in the fallback font
   the headline was narrower, wrapped to a fourth line and pushed the start key
   42px down until the print font arrived. These are the same widths as 15ch and 13ch. */
h1 {
  margin: 0;
  max-width: 9.96em;
  font-size: clamp(2.6rem, 1.3rem + 3.7vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* A highlighter swipe, as over the key word of any question. */
mark {
  color: var(--hl-ink);
  background-color: transparent;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-size: 100% 80%;
  background-position: 0 70%;
  padding: 0 0.08em;
  border-radius: 0.12em 0.4em 0.2em 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-sub {
  max-width: 31em;
  margin: 1.1em 0 1.2em;
  font-size: clamp(1.13rem, 1rem + 0.4vw, 1.32rem);
  line-height: 1.5;
  color: var(--cover-text);
}
.hero-years { white-space: nowrap; }
.facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 8px; }
.facts li { display: flex; gap: 12px; align-items: baseline; font-size: 1.05rem; font-weight: 600; }
.fact-tick {
  flex: none;
  position: relative;
  top: 4px;
  width: 26px;
  height: 21px;
  fill: none;
  stroke: var(--hl);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 32px; }
/* A little less side padding than the keys elsewhere, so "Start 14-day free
   trial" and the sample key share one row in the copy column from 1280px. */
.hero-actions .key-start { padding: 0 1.5rem; }
.hero-actions .key-outline { padding: 0 1.3rem; }
/* The price under the key, for a phone only: wider screens show it as a tick. */
.hero-price { display: none; }
/* The third way in, a plain link after the keys and the trial line: the demo
   on the real child screens. A link, not a key, so the first screen keeps
   its one yellow key and the trial line stays where release 12 put it. */
.hero-try { margin: 16px 0 0; font-size: 1.05rem; font-weight: 700; }
.hero-try a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-cover); text-decoration-color: var(--hl); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
/* The trial as its days: what a card costs today, the reminder, the first charge. */
.hero-days {
  list-style: none;
  max-width: 34em;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--cover-soft);
}
.hero-days li { display: flex; flex-direction: column; padding-top: 7px; border-top: 3px solid var(--hl); }
.hd-day { font-weight: 700; color: var(--cover-text); }
.hero-days b { font-size: 1.12rem; font-weight: 800; line-height: 1.25; color: var(--on-cover); }
.trial-line { max-width: 34em; margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.hero .trial-line, .closing .trial-line { color: var(--cover-soft); }
.hero .hero-trial { margin-top: 10px; }

/* ---------------------------------------------- the product, on a tablet and a phone */

.shot {
  position: relative;
  margin: 0;
  padding: 0 10% 20% 0;
}
/* The devices and, under them, the link to the whole sample email. The link
   sits outside the figure, which reads as one picture. On a phone the column
   comes third, after the key and the price, as the figure did on its own. */
.shot-col { order: 3; }
.shot-more { margin: 8px 0 0; font-size: 1.05rem; font-weight: 700; }
.shot-more a { display: inline-flex; align-items: center; min-height: 48px; color: var(--on-cover); text-decoration-color: var(--hl); }
.tablet {
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  padding: 14px;
  background: var(--bezel);
  border-radius: 26px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08), 0 44px 80px -36px rgba(0, 6, 28, 0.85);
}
.phone {
  container-type: inline-size;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36%;
  aspect-ratio: 9 / 19;
  padding: 8px;
  background: var(--bezel);
  border-radius: 30px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1), 0 30px 60px -24px rgba(0, 6, 28, 0.9);
}
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 13px;
}
.phone .screen { border-radius: 23px; }

/* The child's question page (kid.css), drawn small: an iPad held sideways,
   with the type a little larger than true scale so it reads. --u is one rem
   of the real page, so every size below is the real page's in rem; widths
   are the real page's shares of the screen. The book by day, in both themes. */
.qs {
  --u: 1.95cqi;
  display: flex;
  flex-direction: column;
  font-family: "Learnest Plain Zero", var(--f-print);
  font-size: 10px;
  font-size: var(--u);
  line-height: 1.5;
  color: var(--shot-ink);
  background: var(--shot-paper);
}
:where(.qs) p { margin: 0; }

/* The cover's edge: the name label, a cell for each of today's questions
   (white once answered, highlighter on the one in front of the child), the
   count and the way to stop. */
.qs-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2.2%;
  min-height: 3.75em;
  padding: 0 4%;
  color: #ffffff;
  background: var(--shot-cover);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.qs-label {
  flex: none;
  padding: 0.09em 0.58em 0.18em;
  font: 700 1.4em/1.15 var(--f-pen);
  color: var(--shot-pen);
  background: var(--shot-label);
  border-radius: 0.45em;
  outline: 0.07em solid rgba(29, 69, 163, 0.5);
  outline-offset: -0.22em;
  box-shadow: 0 0.09em 0 rgba(5, 20, 60, 0.18), 0 0.45em 0.9em -0.54em rgba(0, 8, 30, 0.7);
}
.qs-cells { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.19em; }
.qs-cells .c { flex: 1 1 0; height: 0.625em; border-radius: 0.19em; background: rgba(255, 255, 255, 0.24); }
.qs-cells .g { margin-left: 0.19em; }
.qs-cells .f { background: #ffffff; }
.qs-cells .now { height: 1em; background: var(--shot-hl); box-shadow: 0 0 0 0.125em var(--shot-cover-deeper); }
.qs-count, .qs-stop { flex: none; font-weight: 700; white-space: nowrap; }
.qs-stop { text-decoration: underline; text-decoration-thickness: 0.09em; text-underline-offset: 0.22em; }

/* The sheet: grid paper with the margin rule, what is asked on the left and
   where the answer goes on the right. */
.qs-sheet {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  column-gap: 5%;
  align-content: start;
  align-items: start;
  padding: 1.9em 6% 0;
  background-color: var(--shot-paper);
  background-image:
    linear-gradient(var(--shot-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--shot-grid) 1px, transparent 1px);
  background-size: 1.375em 1.375em;
  background-position: -1px -1px;
}
.qs-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.6%;
  width: 0.125em;
  background: var(--shot-margin);
  box-shadow: 0.31em 0 0 -0.03em rgba(224, 74, 60, 0.55);
  opacity: 0.7;
}
.qs-stem { margin-bottom: 0.45em; font-size: 2em; font-weight: 700; line-height: 1.3; letter-spacing: -0.008em; }
/* A fraction stacks, as on the real page: the slash is the only bare text in
   the span, so a zero size folds it away and each half takes its own size. */
.qs-stem .frac {
  display: inline-block;
  margin: 0 calc(var(--u) * 0.3);
  font-size: 0;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}
.qs-stem .frac sup, .qs-stem .frac sub {
  display: block;
  padding: 0 0.15em;
  font-size: calc(var(--u) * 1.6);
  line-height: 1.15;
  vertical-align: baseline;
}
.qs-stem .frac sup { border-bottom: max(1px, 0.05em) solid currentColor; }
.qs-skill { margin-bottom: 1em; font-size: 0.95em; font-weight: 700; color: var(--shot-ink-soft); }
.qs-hint {
  padding: 0.6em 0;
  font-size: 1.05em;
  color: var(--shot-pen);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
}
/* Help folded away: printed panels with a drawn plus. */
.qs-fold {
  position: relative;
  margin-top: 0.75em;
  padding: 0.67em 2.8em 0.67em 0.92em;
  font-size: 1.2em;
  font-weight: 800;
  line-height: 1.25;
  color: var(--shot-pen);
  background: var(--shot-slip);
  border: 1px solid var(--shot-line);
}
.qs-fold span { display: block; margin-top: 0.15em; font-size: 0.79em; font-weight: 400; color: var(--shot-ink-soft); }
.qs-fold::before, .qs-fold::after {
  content: "";
  position: absolute;
  right: 1.04em;
  top: 50%;
  width: 1.04em;
  height: 0.16em;
  margin-top: -0.08em;
  border-radius: 0.1em;
  background: var(--shot-pen);
}
.qs-fold::before { transform: rotate(90deg); }
.qs-flag {
  grid-column: 1 / -1;
  margin-top: 2.2em;
  padding-top: 0.6em;
  color: var(--shot-ink-soft);
  border-top: 1px dashed var(--shot-line);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The choices are paper keys, each with its radio; the chosen one fills with
   pen blue. Send sits under them: highlighter for sure, paper for not sure. */
.qs-answer { display: grid; gap: 0.75em; }
.qs-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.62em;
  min-height: 3.46em;
  padding: 0 0.85em;
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.3;
  background: var(--shot-key);
  border: 0.1em solid var(--shot-key-line);
  border-radius: 0.67em;
  box-shadow: 0 0.19em 0 var(--shot-key-edge);
}
.qs-opt::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  border: max(1px, 0.05em) solid #767676;
  border-radius: 50%;
  background: #ffffff;
}
.qs-opt.is-picked {
  color: #ffffff;
  background: var(--shot-pen);
  border-color: var(--shot-cover-deeper);
  box-shadow: 0 0.19em 0 var(--shot-cover-deeper);
}
.qs-opt.is-picked::before {
  border: 0.1em solid var(--shot-hl);
  background: radial-gradient(circle closest-side, var(--shot-hl) 0 52%, var(--shot-cover-deeper) 56% 70%, var(--shot-hl) 74%);
}
.qs-send { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; margin-top: 0.15em; }
.qs-send > span {
  display: grid;
  place-items: center;
  min-height: 3.8em;
  padding: 0.3em 0.4em;
  font-size: 1.05em;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  border: 0.12em solid;
  border-radius: 0.83em;
}
.qs-send .qs-sure { color: var(--shot-ink); background: var(--shot-hl); border-color: var(--shot-hl-edge); box-shadow: 0 0.3em 0 var(--shot-hl-edge); }
.qs-send .qs-unsure { color: var(--shot-pen); background: var(--shot-key); border-color: var(--shot-pen); box-shadow: 0 0.24em 0 var(--shot-key-edge); }

/* The teacher's pen, on the screen: a cross beside the chosen key, and a note
   that points at it. */
.x-mark, .note-arrow, .ring, .mark, .fact-tick { overflow: visible; }
.x-mark {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 1.2em;
  height: 1.2em;
  margin: -0.6em 0.2em 0 0;
  fill: none;
  stroke: var(--shot-red);
  stroke-width: 3.4;
  stroke-linecap: round;
}
.qs-note {
  position: relative;
  margin: 0.95em 1.6em 0 0;
  font-size: 1.45em;
  line-height: 1.12;
  text-align: right;
  color: var(--shot-pen);
}
.note-arrow { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.qs-note .note-arrow {
  position: absolute;
  left: 100%;
  top: 0.1em;
  width: 1.5em;
  height: 0.95em;
  margin-left: 0.12em;
  stroke: var(--shot-pen);
  transform: rotate(180deg);
}
.qs .stamp { top: auto; bottom: 7%; right: 44%; }

/* Tonight's email, in the phone. */
.mail {
  padding: 14% 8% 8%;
  font-size: 12px;
  font-size: 5.8cqi;
  line-height: 1.34;
  color: var(--app-ink);
  background: #ffffff;
}
.mail p { margin: 0 0 0.65em; }
.mail-from { display: flex; justify-content: space-between; padding-bottom: 0.5em; border-bottom: 1px solid #e2dacb; font-weight: 700; }
.mail-from span + span { font-weight: 400; color: var(--app-ink-soft); }
.mail-date { font-size: 0.9em; color: var(--app-ink-soft); }
.mail-card { position: relative; margin: 0 0 0.8em; padding: 0.65em 0.75em 0.5em; background: #f3f6fb; border-radius: 0.6em; }
.mail-card p { margin: 0 0 0.45em; }
.mail-kid { font-size: 1.15em; font-weight: 800; }
.mail-kid span { margin-left: 0.25em; font-size: 0.72em; font-weight: 700; color: #1e7a4c; }
.mail-link { font-weight: 700; color: var(--app-accent); text-decoration: underline; }
.gap-skill { position: relative; display: inline-block; margin: 0.4em 0.3em 0.25em 0.4em; padding: 0.15em 0.35em; font-weight: 700; }
.ring { position: absolute; fill: none; pointer-events: none; }
.ring path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gap-skill .ring { left: -0.4em; top: -0.35em; width: calc(100% + 0.8em); height: calc(100% + 0.7em); }
.gap-skill .ring path { stroke: var(--shot-red); }
.mail .stamp { top: 0.55em; right: 0.6em; font-size: 0.72em; }

.shot-note {
  position: absolute;
  right: 41%;
  bottom: 6%;
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  text-align: right;
  color: var(--on-cover);
}
.shot-note .note-arrow {
  position: absolute;
  right: -3.4rem;
  top: -1.5rem;
  width: 3rem;
  height: 1.9rem;
  stroke: var(--hl);
  transform: scaleX(-1);
}

/* A rubber stamp, so nobody mistakes the example for somebody's child. */
.stamp {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  padding: 3px 7px 2px;
  font: 800 0.7rem/1.2 var(--f-print);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 6px;
  transform: rotate(7deg);
  /* Full strength: at 0.88 the small bold red fell to 4.4:1 on white. */
  opacity: 1;
}
.shot .stamp { color: var(--shot-red); border-color: var(--shot-red); }

.sec { padding: var(--sec) 0 0; }
.sec:last-child { padding-bottom: var(--sec); }

h2 {
  margin: 0;
  font-size: clamp(1.95rem, 1.35rem + 1.8vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.018em;
}
/* Section headings get ruled off in red, the way every teacher asks. */
.asks h2, .how h2, .calm h2, .pricing h2, .faq h2 {
  display: inline;
  text-decoration: underline;
  text-decoration-color: var(--margin);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.24em;
}
h3 {
  margin: 0 0 0.4em;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* What parents ask first: four answers, open on the page, before How it works. */
.ask-list {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
}
.ask { padding: 14px 0 22px; border-top: 2px solid var(--rule); }
.ask dt { font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.ask dd { margin: 6px 0 0; font-size: 1.04rem; }
.ask dd a { font-weight: 700; overflow-wrap: anywhere; }

.sec-lede { max-width: 38em; margin: 26px 0 0; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); }

/* ---------------------------------------------------------- how it works */

.steps {
  list-style: none;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 72px);
}
.step p:not(.step-no):not(.pen) { max-width: 30em; margin: 0; }
.step-no { margin: 26px 0 2px; font-size: 2.4rem; font-weight: 700; line-height: 1; }

.fig { height: 124px; display: flex; flex-direction: column; justify-content: flex-end; }

.cells { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-bottom: 30px; }
.cells .mark {
  position: absolute;
  top: 44px;
  left: calc((var(--at) + 0.5) / 8 * 100%);
  width: 24px;
  height: 20px;
  transform: translateX(-50%);
}
.cell { height: 38px; margin-left: -2px; border: 2px solid var(--pen); background: var(--paper); }
.cell:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.cell:last-child { border-radius: 0 6px 6px 0; }
.cell.k { background: var(--done-bg); }
.cell.s { background: var(--hl); }
.hops { position: absolute; left: 0; bottom: 100%; width: 100%; height: 60px; overflow: visible; }
.hops path { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.probe {
  position: absolute;
  top: 0;
  left: calc((var(--at) + 0.5) / 8 * 100%);
  height: 38px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  font-size: 1.35rem;
  font-weight: 700;
}

.fbar { display: block; width: 100%; max-width: 280px; height: auto; overflow: visible; }
.fbar rect { fill: none; stroke: var(--pen); stroke-width: 1.8; }
.fbar rect.on { fill: var(--hl); }
.fbar path { fill: none; stroke: var(--pen); stroke-width: 1.8; }
.fig-work { margin: 14px 0 0; font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.2; }

.tell-line { margin: 0; font-size: 1rem; font-weight: 700; }
.tell-ring { position: relative; display: inline-block; margin-left: 10px; padding: 2px 4px; }
.tell-ring .ring { left: -12px; top: -9px; width: calc(100% + 26px); height: calc(100% + 18px); }
.tell-ring .ring path { stroke: var(--red); }

/* ---------------------------------------------------------- feature rows */

.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.row + .row { margin-top: clamp(96px, 11vw, 150px); }
.row-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row-flip .row-text { order: 2; }
.row h2 { font-size: clamp(1.7rem, 1.25rem + 1.3vw, 2.35rem); }
.row-text p { max-width: 33em; margin: 18px 0 0; font-size: 1.1rem; }

.mark { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.2; }
.mark.ok { stroke: var(--done); }
.mark.no { stroke: var(--red); }

/* Today changes tomorrow: two day sheets joined by the pen. */
.days {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(70px, 9vw, 120px) minmax(0, 1.25fr);
  align-items: center;
}
.sheet {
  position: relative;
  padding: 22px 22px 16px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(var(--rot, 0deg));
}
.sheet-tue { --rot: -1.3deg; }
.sheet-wed { --rot: 0.9deg; }
.sheet-day { margin: 0 0 0.5em; font-size: 1.15rem; font-weight: 800; padding-right: 72px; }
.sheet-when { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.line { display: flex; align-items: baseline; gap: 9px; margin: 0.35em 0; }
.line .pen { font-size: clamp(1.1rem, 0.98rem + 0.35vw, 1.3rem); line-height: 1.22; }
.line .n { flex: none; font-weight: 700; }
.line .mark { flex: none; position: relative; top: 3px; width: 20px; height: 17px; }
.sheet-wed mark { color: #1f3f9f; }
.swing { display: block; width: 100%; height: 100px; overflow: visible; }
.swing path { fill: none; stroke: var(--pen); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* A fix that held: five days and the teacher's marks. */
.proof { position: relative; margin: 0; padding-top: 38px; }
.proof .stamp { top: 0; right: 0; }
.proof-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pday {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 10px 4px;
  margin-left: -2px;
  border: 2px solid var(--pen);
  background: var(--paper);
  text-align: center;
}
.pday:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.pday:last-child { border-radius: 0 8px 8px 0; }
.pday-lesson { background-color: var(--paper); background-image: linear-gradient(var(--tint), var(--tint)); }
.pd { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.pday .mark { width: 36px; height: 31px; }
.plesson { font-size: 1.12rem; line-height: 1.1; color: var(--ink-soft); }
.pnote { font-size: 0.98rem; line-height: 1.1; color: var(--red); }
.verdict { position: relative; display: table; margin: 26px 0 0 auto; padding: 6px 22px 4px; }
.verdict .pen { font-size: clamp(2.1rem, 1.7rem + 1.2vw, 2.8rem); font-weight: 700; color: var(--done); }
.verdict .ring { left: -8px; top: -6px; width: calc(100% + 16px); height: calc(100% + 12px); }
.verdict .ring path { stroke: var(--done); }

/* A day's points, added up in pen on a slip. */
.sum {
  position: relative;
  justify-self: start;
  margin: 0 0 0 clamp(0px, 4vw, 56px);
  padding: 34px 44px 28px 52px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-1deg);
}
.sum .stamp { top: 12px; right: 12px; }
.sum-table { border-collapse: collapse; }
.sum-table td { padding: 2px 0; vertical-align: baseline; }
.sum-table .n {
  position: relative;
  min-width: 3.2ch;
  padding-right: 18px;
  font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.5rem);
  text-align: right;
  line-height: 1.25;
}
.sum-table .w { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); }
.plus { position: absolute; left: -0.9em; }
.sum-table .last .n { border-bottom: 2.5px solid var(--pen); }
.sum-table .total .n { border-bottom: 7px double var(--pen); font-weight: 700; }
.sum-table .total .w { font-weight: 700; }

/* ---------------------------------------------------------- calm */

.struck { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 34px; }
.struck s {
  display: inline-block;
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem);
  line-height: 1.3;
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 60%;
}

/* ---------------------------------------------------------- pricing */

.price-in {
  margin-top: clamp(44px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.price-slip {
  position: relative;
  padding: clamp(30px, 3.2vw, 44px);
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.6deg);
}
.kids { min-width: 2ch; font-size: 2rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.price-work { min-height: 1.25em; margin: 22px 0 6px; font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.25; }
.price-box { position: relative; display: inline-block; padding: 16px 30px 8px 24px; transform: rotate(-1deg); }
.box-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.box-line path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.price-total { margin: 0; white-space: nowrap; }
.price-total .pen { font-size: clamp(3rem, 2.1rem + 2.8vw, 4.4rem); font-weight: 700; line-height: 1; }
.price-per { font-size: 1.2rem; font-weight: 700; color: var(--ink-soft); }
.dbl { display: block; width: 88%; height: 14px; margin: 4px 0 6px; overflow: visible; }
.dbl path { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.price-rule { max-width: 30em; margin: 20px 0 24px; color: var(--ink-soft); }
.price-rule-year { margin-top: -14px; }

/* Monthly or yearly on the price slip: two keys side by side, shown by
   landing.js, the chosen one tinted. */
[data-interval][hidden], .plan-pick[hidden] { display: none !important; }
.plan-pick { display: inline-flex; flex-wrap: wrap; margin: 18px 0 0; }
.plan-pick .pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-left: -2px;
  padding: 6px 16px;
  font: inherit;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--paper);
  border: 2px solid var(--pen);
  cursor: pointer;
}
.plan-pick .pick:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.plan-pick .pick:last-child { border-radius: 0 8px 8px 0; }
.plan-pick .pick[aria-pressed="true"] {
  color: var(--ink);
  background-image: linear-gradient(var(--tint), var(--tint));
}
.plan-pick .pick:focus-visible { position: relative; outline: 3px solid var(--pen); outline-offset: 2px; }
.pick-save { font-size: 0.85rem; color: var(--done); }

.gets h3 { margin-top: 8px; }
.gets-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.gets-list li { display: flex; gap: 14px; align-items: baseline; font-size: 1.08rem; }
.gets-list .mark { flex: none; position: relative; top: 4px; width: 24px; height: 20px; }
.coming { margin: 24px 0 0; padding-top: 16px; border-top: 2px solid var(--rule); font-weight: 700; }

/* ---------------------------------------------------------- FAQ */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq h2 { line-height: 1.3; }
.faq-list details { border-top: 2px solid var(--rule); }
.faq-list details:last-child { border-bottom: 2px solid var(--rule); }
.faq-list summary {
  position: relative;
  padding: 20px 52px 20px 0;
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 800;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
/* A plus drawn in pen that loses its upright when the answer opens. */
.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 18px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--pen);
  border-radius: 2px;
  transition: transform 180ms var(--ease);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list summary:hover { color: var(--pen); }
.faq-list details p { max-width: 40em; margin: -4px 0 24px; font-size: 1.06rem; }

/* ------------------------------------------------------------------ closing band */

.closing {
  color: var(--on-cover);
  padding: clamp(92px, 11vw, 148px) var(--side);
}
.closing-in {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: center;
}
.closing h2 {
  max-width: 13ch;
  margin-bottom: 32px;
  font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.closing-price {
  position: relative;
  justify-self: start;
  margin: 0;
  padding: 26px 40px 20px 32px;
  transform: rotate(-1.4deg);
}
.closing-price .box-line path { stroke: var(--on-cover); }
.closing-price .pen {
  display: block;
  font-size: clamp(2.8rem, 1.8rem + 3.4vw, 4.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--on-cover);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ narrower */

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-signin.nav-price { display: inline-flex; }
}

@media (max-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  h1 { max-width: 8.63em; }
  .shot { max-width: 640px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .step { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .row, .row-flip { grid-template-columns: minmax(0, 1fr); }
  .row-flip .row-text { order: 0; }
  .price-in { grid-template-columns: minmax(0, 1fr); }
  .price-slip { max-width: 560px; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .closing-in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .code-help { display: none; }
  .ask-list { grid-template-columns: minmax(0, 1fr); }
  .days { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .swing { width: 110px; height: 86px; margin: 4px auto; transform: rotate(90deg); }
  .sheet-wed { margin-left: 4%; }
}

@media (max-width: 620px) {
  .cb-long { display: none; }
  .cb-short { display: inline; }
  .codeform label { font-size: 0.95rem; }

  /* On a phone the hero says one thing at a time: the headline, one yellow
     key running full width with the trial (or the price) and the demo link
     under it, then tonight's email, large enough to read, with its skill
     ringed. The ticks follow the email. "See a sample parent email" stays on
     wider screens: here the link under the email leads to the same page. */
  .hero-in { gap: 0; }
  .hero-copy { display: contents; }
  .hero-sub { margin: 0.9em 0 0; }
  .hero-actions { order: 1; margin-top: 22px; }
  .hero-price, .hero-days, .hero-trial, .hero-copy > .hero-try { order: 2; }
  .shot { order: 3; margin-top: 16px; }
  .facts { order: 4; margin-top: 30px; }
  .hero-copy > .hero-try { margin-top: 6px; }
  .hero-days { margin-top: 18px; gap: 10px; font-size: 0.88rem; }
  .hero-days b { font-size: 1rem; }
  .hero-actions .key-start { flex: 1 1 100%; min-height: 60px; padding: 0 1.1rem; font-size: 1.15rem; }
  .hero-actions .key-outline, .facts .fact-price { display: none; }
  .hero-price { display: block; margin: 14px 0 0; font-size: 1.02rem; font-weight: 700; color: var(--cover-text); }
  .hero-trial { margin-top: 10px; line-height: 1.45; }

  /* Tonight's email on its own at three quarters of the width (no wider than
     a large phone's), the pen note pointing at it from the left. The question
     screen stays on a tablet and a laptop: at a phone's width its type would
     be too small to read. */
  .tablet { display: none; }
  .shot { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(76%, 19rem); }
  .phone { position: relative; grid-column: 2; grid-row: 1; right: auto; bottom: auto; width: auto; aspect-ratio: 9 / 13; padding: 7px; border-radius: 26px; }
  .phone .screen { border-radius: 20px; }
  .mail { font-size: 4.9cqi; padding: 7.5% 7% 7%; }
  /* The stamp and "done" a step larger, so SAMPLE reads at about 11px. */
  .mail .stamp { font-size: 0.86em; }
  .mail-kid span { font-size: 0.8em; }
  .shot-note { position: relative; grid-column: 1; grid-row: 1; align-self: start; right: auto; bottom: auto; margin: 2.6rem 1.9rem 0 0; font-size: 1.15rem; line-height: 1.15; }
  .shot-note .note-arrow { right: -2.2rem; top: 0.1rem; width: 2rem; height: 1.4rem; }

  /* The nav's start key waits until the hero's has gone up under the nav,
     and leaves when it comes back, so the first screen has one yellow key.
     landing.js adds js-nav-key and sets has-key on the nav; without it the
     key simply stays. The key keeps its space (visibility, not display), so
     nothing in the nav moves. The slide is added below, for motion only. */
  .js-nav-key .key-nav {
    visibility: hidden;
    opacity: 0;
    transition: opacity 120ms ease-in, visibility 0s linear 120ms;
  }
  .js-nav-key .has-key .key-nav,
  .js-nav-key .key-nav:focus-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 180ms var(--ease), visibility 0s;
  }

  .price-slip .key-start, .closing .key-start { min-height: 60px; font-size: 1.15rem; }
  .price-slip .key-start { width: 100%; }
  .closing .key-start { width: 100%; }
}

/* The nav key's arrival with motion welcome: it drops 6px into place as it
   fades in, on translate, so the key's own press (transform) still works. */
@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .js-nav-key .key-nav {
    translate: 0 -6px;
    transition: opacity 120ms ease-in, translate 120ms ease-in, visibility 0s linear 120ms,
      transform 80ms ease, box-shadow 80ms ease, background-color 120ms ease;
  }
  .js-nav-key .has-key .key-nav,
  .js-nav-key .key-nav:focus-visible {
    translate: none;
    transition: opacity 180ms var(--ease), translate 180ms var(--ease), visibility 0s,
      transform 80ms ease, box-shadow 80ms ease, background-color 120ms ease;
  }
}

@media (max-width: 420px) {
  .code { width: calc(6 * var(--cell)); }
  .proof-row .pday { min-height: 104px; padding: 8px 2px; }
  .plesson { font-size: 0.95rem; }
  .pnote { font-size: 0.82rem; }
  .pday .mark { width: 28px; height: 24px; }
  .sum { padding: 30px 26px 24px 40px; }
  .closing-price { padding: 22px 28px 16px 24px; }
}

/* ------------------------------------------------------------------ the pen writes

   The script adds js-write only when motion is welcome, so without it (or with
   reduced motion) every mark is already on the page. With it, each written
   thing waits until its block scrolls into view, then the pen writes it left
   to right and the teacher's marks follow. */

.js-write [data-write] .pen:not(.step-no) {
  clip-path: inset(-3em 100% -0.8em -0.6em);
  transition: clip-path 0.95s var(--ease) var(--d, 0.1s);
}
.js-write [data-write].is-written .pen:not(.step-no) {
  clip-path: inset(-3em -4em -0.8em -0.6em);
}
/* The plus in the points sum hangs 0.9em left of its column, past that reach,
   so these cells open wider on the left and start shut at that edge: the pen
   writes the plus first, then the number. */
.js-write [data-write] .sum-table .n.pen:not(.step-no) {
  clip-path: inset(-3em calc(100% + 1.4em) -0.8em -1.4em);
}
.js-write [data-write].is-written .sum-table .n.pen:not(.step-no) {
  clip-path: inset(-3em -4em -0.8em -1.4em);
}

/* Inline strokes animate on the path; a stroke drawn through <use> lives in a
   shadow tree no selector reaches, so it animates on its svg and inherits. */
.js-write [data-write] path,
.js-write [data-write] svg.mark,
.js-write [data-write] svg.x-mark,
.js-write [data-write] svg.note-arrow,
.js-write [data-write] svg.fact-tick {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.7s var(--ease) var(--d, 0.5s);
}
.js-write [data-write].is-written path,
.js-write [data-write].is-written svg.mark,
.js-write [data-write].is-written svg.x-mark,
.js-write [data-write].is-written svg.note-arrow,
.js-write [data-write].is-written svg.fact-tick { stroke-dashoffset: 0; }

.js-write [data-write] mark,
.js-write [data-write] s {
  transition: background-size 0.55s var(--ease) var(--d, 0.6s);
}
.js-write [data-write]:not(.is-written) mark { background-size: 0% 80%; }
.js-write [data-write]:not(.is-written) s { background-size: 0% 3px; }

/* The order the hand moves in. The hero: highlight, the ticks down the list
   under the keys (all four, when the question count shows), then the teacher
   marks the tablet and rings tonight's email. */
.hero mark { --d: 0.25s; }
.facts li:nth-child(1) .fact-tick { --d: 0.45s; }
.facts li:nth-child(2) .fact-tick { --d: 0.55s; }
.facts li:nth-child(3) .fact-tick { --d: 0.65s; }
.facts li:nth-child(4) .fact-tick { --d: 0.75s; }
.x-mark { --d: 0.9s; }
.qs-note .note-arrow { --d: 2.05s; }
.qs-note { --d: 1.35s; }
.gap-skill .ring path { --d: 2s; }
.shot-note { --d: 2.5s; }
.shot-note .note-arrow { --d: 2.9s; }

.hops path { --d: 0.3s; }
.fbar path { --d: 0.2s; }
.fig-teach .fig-work { --d: 0.6s; }
.tell-ring .ring path { --d: 0.4s; }
.fig-tell .fig-work { --d: 0.9s; }

.sheet-tue .pen { --d: 0.15s; }
.sheet-tue .mark { --d: 0.55s; }
.swing path { --d: 0.9s; }
.sheet-wed .pen { --d: 1.3s; }
.sheet-wed mark { --d: 1.8s; }
.proof .mark { --d: 0.4s; }
.plesson, .pnote { --d: 0.3s; }
.verdict .pen { --d: 1.1s; }
.verdict .ring path { --d: 1.5s; }
.sum-table tr:nth-child(1) .pen { --d: 0.1s; }
.sum-table tr:nth-child(2) .pen { --d: 0.45s; }
.sum-table tr:nth-child(3) .pen { --d: 0.8s; }
.sum-table tr:nth-child(4) .pen { --d: 1.35s; }
.struck li:nth-child(1) s { --d: 0.2s; }
.struck li:nth-child(2) s { --d: 0.45s; }
.struck li:nth-child(3) s { --d: 0.7s; }
.struck li:nth-child(4) s { --d: 0.95s; }
.price-work { --d: 0.1s; }
.price-box .box-line path { --d: 0.5s; }
.price-total .pen { --d: 0.3s; }
.price-box .dbl path { --d: 1.1s; }
.closing-price .box-line path { --d: 0.2s; }
.closing-price .pen { --d: 0.5s; }

/* On a phone the pen writes only the hero; landing.js prints every other
   block, the price included, so a slow phone scrolls smoothly. The hero
   finishes within 1.5s: its tablet is hidden, so the ring and the note
   follow the highlight straight away. */
@media (max-width: 620px) {
  .gap-skill .ring path { --d: 0.45s; }
  .shot-note { --d: 0.55s; }
  .shot-note .note-arrow { --d: 0.8s; }
}

/* A new number of children: the pen writes the sum again. */
@keyframes rewrite {
  from { clip-path: inset(-3em 100% -0.8em -0.6em); }
  to { clip-path: inset(-3em -4em -0.8em -0.6em); }
}
.js-write .price-slip .rewrite { animation: rewrite 0.55s var(--ease); }

/* ------------------------------------------------------------------ dark

   The same book at night: the cover deepens, the page goes to ink, and the
   pen and the red lighten so they still read. The product shots stay as the
   screens really look. */

@media (prefers-color-scheme: dark) {
  .sheet-wed mark { color: #1f3f9f; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary::after { transition: none; }
}

/* ------------------------------------------------------------------ try a question

   Three of the year pages' sample slips (_sample_qs.html), side by side on a
   wide screen, then a chip for each year page's samples. The front page never
   loads practice.css, so the slip and its try states (static/try.js) repeat
   practice.css's rules here under .try: keep the two in step. */

.try h2 {
  display: inline;
  text-decoration: underline;
  text-decoration-color: var(--margin);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.24em;
}
.try-hint { max-width: 38em; margin: 14px 0 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.try-qs {
  list-style: none;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(28px, 3vw, 40px);
}
.try .q {
  position: relative;
  padding: 30px 22px 10px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
.try .q:nth-child(even) { transform: rotate(0.4deg); }
.try .q-label { display: flex; align-items: baseline; gap: 12px; margin: 0 5.5rem 12px 0; font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.try .q-no { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.try .q-stem { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.try .q-opts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.try .q-opts li { display: flex; align-items: baseline; gap: 12px; }
.try .q-letter {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pen);
  border: 2px solid var(--pen);
  border-radius: 50%;
}
.try .q:has(.q-work[open]) .is-answer .q-letter { color: var(--done); background: var(--done-bg); border-color: var(--done); }
.try .q-work { margin: 18px 0 0; border-top: 2px solid var(--rule); }
.try .q-work summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-right: 44px;
  font-weight: 800;
  color: var(--pen);
  list-style: none;
  cursor: pointer;
}
.try .q-work summary::-webkit-details-marker { display: none; }
.try .q-work summary::before,
.try .q-work summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 18px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--pen);
  border-radius: 2px;
  transition: transform 180ms var(--ease);
}
.try .q-work summary::after { transform: rotate(90deg); }
.try .q-work[open] summary::after { transform: rotate(0deg); }
.try .q-work summary:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.try .q-ans { display: flex; gap: 12px; align-items: baseline; margin: 2px 0 8px; font-weight: 700; }
.try .q-ans .mark { position: relative; top: 4px; width: 24px; height: 20px; }
.try .q-ans .pen { font-size: 1.3rem; }
.try .q-why { margin: 0 0 18px; }
.try .frac { font-size: 0.82em; white-space: nowrap; }
.try .frac sup, .try .frac sub { font-size: 0.8em; }

/* The options as keys, once try.js has run (practice.css has the same). */
.try .can-try .q-opts { gap: 6px; }
.try .can-try .q-opts li { display: block; }
.try .q-pick {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: calc(100% + 20px);
  min-height: 48px;
  margin: 0 -10px;
  padding: 7px 10px;
  font: inherit;
  line-height: 1.45;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease;
}
@media (hover: hover) {
  .try .q-pick:hover { background: var(--tint); border-color: var(--pen); }
}
.try .q-pick:focus-visible { outline-offset: 2px; border-radius: 10px; }
.try .q-pick .q-letter { align-self: center; }
.try .q-pick .q-text { flex: 1 1 auto; min-width: 0; }
.try .is-right .q-pick, .try .is-right .q-pick:hover { background: var(--done-bg); border-color: var(--done); }
.try .is-right .q-letter { color: var(--done); background: var(--done-bg); border-color: var(--done); }
.try .is-wrong .q-pick, .try .is-wrong .q-pick:hover { background: transparent; border-color: var(--red); }
.try .is-wrong .q-letter { color: var(--red); border-color: var(--red); }
.try .try-mark { flex: none; align-self: center; width: 30px; height: 26px; }
.try .q-note { margin: 4px 0 6px 42px; font-size: 1.2rem; line-height: 1.3; }
.try .q-again { min-height: 48px; margin: 14px 0 0; padding: 0 1.25rem; font-size: 1rem; }
.try .q-again[hidden] { display: none; }

/* A chip for each year page, opening at its samples. */
.try-years { margin-top: clamp(44px, 5vw, 64px); }
.try-years h3 { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); }
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  font-weight: 700;
  color: var(--pen);
  text-decoration: none;
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--key-edge);
}
@media (hover: hover) {
  .chip:hover { border-color: var(--pen); text-decoration: underline; text-decoration-thickness: 2px; }
}

@media (max-width: 1100px) {
  .try-qs { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
}
@media (max-width: 620px) {
  .try .q { padding: 28px 18px 8px; }
}

@keyframes try-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes try-write {
  from { clip-path: inset(-0.4em 100% -0.4em -0.2em); }
  to { clip-path: inset(-0.4em -0.6em -0.4em -0.2em); }
}
@media (prefers-reduced-motion: no-preference) {
  .try .try-mark { stroke-dasharray: 1; animation: try-draw 420ms var(--ease) both; }
  .try .q-note { animation: try-write 600ms var(--ease) 260ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .try .q-work summary::after { transition: none; }
}

/* ------------------------------------------------------------------ home-screen app

   Opened from the home screen, the status bar sits over the top of the page
   (book.css). Here the family-code bar is the top edge, so it reaches up
   under the clock and the strip behind the clock takes its deeper blue; the
   nav below it keeps its place and sticks just under the strip. */
@media (display-mode: standalone) {
  body.lp::after { background: var(--cover-deep); }
  .codebar { padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
  body.lp .nav { margin-top: 0; }
}