/* listthismeal.com — the one-page site that installs the app (build 13, T8).

   The design is Mike's "#6 · Your mix" (wave61.md messages 18–23): cream and
   dark sections taking turns, in the app's own palette and its Gelasio serif,
   restated here because a static page cannot read the Dart theme. One palette
   for everybody — the design already carries its own dark sections — so the
   page does not follow the device's dark setting. Phone first: most visitors
   arrive from a link or a code on a phone, so the single column is the design
   and the wide layout is the variation.

   Motion is calm and lives only inside `prefers-reduced-motion: no-preference`
   (Mike, 2026-10-07: "add animation to the website"): the spoon draws itself,
   the phones fan out, the rows rise into place as they are reached, the
   plans table's ticks draw themselves and SOON pulses. Somebody who asked
   their device for less motion gets the still page. What waits for a scroll
   waits only once site.js has set `js-motion`, so with the script off every
   word is on the page.

   No framework, no web fonts from anybody else, no cookies, and no inline
   style anywhere: the Content-Security-Policy refuses it. */

@font-face {
  font-family: "Gelasio";
  src: url("/assets/fonts/Gelasio-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --cream: #F3ECDD;
  --card: #FFFDF8;
  --ink: #2B1E17;
  --body: #4A4038;
  --meta: #6B5D4A;
  --line: #D9CDB4;
  --crimson: #C41E3A;
  --crimson-deep: #9E1830;
  --dark: #1B1613;
  --dark-ink: #F4EADB;
  --dark-body: #DCD1C3;
  --dark-meta: #B3A491;
  --dark-line: #3E352E;
  --pink: #E8566E;
  /* The live board's free Pro (T15): the app's own herb green. */
  --herb: #4A7C59;
  --herb-soft: #E4EEE5;
  --herb-line: #B9D2BE;
  --serif: "Gelasio", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--crimson); }

a:hover { color: var(--crimson-deep); }

img { max-width: 100%; }

[hidden] { display: none !important; }

/* Only the sides: a section's own top and bottom space is set where the
   section is, on the same element, so a width rule here must not reset it. */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* A screen reader reads it; nobody sees it. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- The two grounds ---------------------------------------------------- */

.band.cream {
  background: var(--cream);
  color: var(--body);
  --h: var(--ink);
  --accent: var(--crimson);
  --on-accent: #FFFFFF;
  --muted: var(--meta);
  --frame: var(--ink);
  --pulse: rgba(196, 30, 58, 0.45);
}

.band.dark {
  background: var(--dark);
  color: var(--dark-body);
  --h: var(--dark-ink);
  --accent: var(--pink);
  --on-accent: var(--dark);
  --muted: var(--dark-meta);
  --frame: #0F0C0A;
  --pulse: rgba(232, 86, 110, 0.5);
}

/* --- Header ------------------------------------------------------------- */

.bar { background: var(--cream); }

.bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 18px;
  padding-bottom: 6px;
}

.lockup {
  display: block;
  width: clamp(168px, 34vw, 228px);
  line-height: 0;
  text-decoration: none;
}

.lockup-art { display: block; width: 100%; height: auto; overflow: visible; }

.spoon-handle {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.spoon-bowl { fill: var(--crimson); }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.pill:hover { background: var(--ink); color: var(--cream); }

/* --- The language menus ------------------------------------------------- */

/* One in the header before "Get the app", one in the footer, a flag beside
   every language (Mike, 2026-10-08, wave61.md messages 26–27). A <select>
   cannot show a picture, so each is a button over a list the keyboard walks.
   On a phone the header's button is the flag alone, and the list always
   names every language. */

.bar-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.lang-menu { position: relative; }

.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.lang-button:hover { border-color: var(--ink); }

.flag {
  display: block;
  flex: none;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(43, 30, 23, 0.16);
  object-fit: cover;
}

.caret {
  width: 10px;
  height: 6px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lang-button[aria-expanded="true"] .caret { transform: rotate(180deg); }

.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 20;
  min-width: 220px;
  max-height: min(62vh, 440px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(27, 22, 19, 0.18);
  text-align: start;
}

/* The footer's opens upward, centred under its label. */
.lang-menu.up .lang-list {
  top: auto;
  bottom: calc(100% + 6px);
  inset-inline-end: auto;
  left: 50%;
  transform: translateX(-50%);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  outline: none;
}

.lang-option:hover, .lang-option:focus { background: var(--cream); }

.lang-option:focus-visible { box-shadow: inset 0 0 0 2px var(--crimson); }

.lang-option[aria-selected="true"] { font-weight: 600; }

/* A tick beside the language in use. */
.lang-option[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 10px;
  height: 5px;
  margin-inline-start: auto;
  border: solid var(--crimson);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translateY(-2px);
}

.lang-button:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
}

/* A phone shows the chosen flag alone in the header; a tap opens the names.
   And the logo, the flag and "Get the app" share one row (Mike, 2026-10-08,
   from a Galaxy S26: "make the button get the app a little bit smaller"):
   the button is a size smaller and the gaps tighter, and the logo gives a
   few points on the narrowest phones. A language whose "Get the app" is long
   still drops the pair to a row of its own, aligned to the end. */
@media (max-width: 639px) {
  .bar-inner { column-gap: 10px; }
  .bar .lockup { width: min(168px, 40vw); }
  .bar-end { gap: 8px; }
  .bar .lang-name { display: none; }
  .bar .lang-button { padding: 0 10px; gap: 6px; }
  .bar .pill { padding: 0 14px; font-size: 14px; }
}

@media (max-width: 369px) {
  .bar .pill { padding: 0 12px; font-size: 13px; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  display: grid;
  gap: 40px;
  padding-top: 24px;
  padding-bottom: 64px;
}

.kicker {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  font-weight: 600;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 9vw, 68px);
  line-height: 1.06;
  color: var(--ink);
}

.lead {
  margin: 22px 0 0;
  font-size: clamp(19px, 4.6vw, 21px);
  line-height: 1.5;
  color: var(--ink);
}

.intro { margin: 12px 0 0; font-size: 17px; max-width: 560px; }

.small { margin: 14px 0 0; font-size: 14px; color: var(--meta); }

/* --- Getting the app ---------------------------------------------------- */

.stores {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.stores.centred { justify-content: center; margin-top: 36px; gap: 20px 28px; }

.play-badge { display: inline-block; line-height: 0; border-radius: 10px; }

.play-badge img { display: block; height: 60px; width: auto; }

.play-badge:focus-visible, .pill:focus-visible, .button:focus-visible,
.lockup:focus-visible, .table-box:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
}

/* Our own box for a store the app is not in yet — never the store's badge,
   which its owner allows only for an app that can be downloaded there. */
.store-soon {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  padding: 8px 12px 8px 14px;
  border: 1.5px dashed #8A7B66;
  border-radius: 10px;
  color: var(--ink);
}

.band.dark .store-soon { color: var(--dark-ink); }

.store-icon {
  flex: none;
  width: 20px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-text { display: flex; flex-direction: column; line-height: 1.1; }

.store-cap { font-size: 12px; font-weight: 500; color: var(--meta); }

.band.dark .store-cap { color: var(--dark-meta); }

.store-name { font-size: 22px; font-weight: 500; white-space: nowrap; }

.soon {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--crimson);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.band.dark .soon { background: var(--pink); color: var(--dark); }

/* The code is for somebody at a computer; on a phone it would ask them to
   scan their own screen. */
.scan {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.scan p { margin: 0; font-size: 14px; line-height: 1.45; max-width: 180px; }

.scan strong { display: block; color: var(--ink); font-size: 15px; }

.code {
  flex: none;
  width: 92px;
  height: 92px;
  background: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
}

.code svg { display: block; width: 100%; height: 100%; }

.qr-tile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--dark-meta);
}

.qr-tile .code { width: 136px; height: 136px; padding: 8px; border-radius: 12px; }

/* --- The three phones --------------------------------------------------- */

.trio {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.phone {
  flex: 0 0 auto;
  display: block;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--ink);
  position: relative;
}

.phone.side {
  width: 36%;
  z-index: 1;
  border: 7px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 14px 32px rgba(43, 30, 23, 0.16);
}

.phone.first { margin-inline-end: -8%; --fan: 40%; }

.phone.last { margin-inline-start: -8%; --fan: -40%; }

[dir="rtl"] .phone.first { --fan: -40%; }

[dir="rtl"] .phone.last { --fan: 40%; }

.phone.main {
  width: 44%;
  z-index: 2;
  border: 8px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 22px 48px rgba(43, 30, 23, 0.24);
}

/* --- The five rows ------------------------------------------------------ */

.row {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
  --sx: 0px;
  --sy: 40px;
}

.row-text { min-width: 0; }

.num {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
}

.num::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
}

.row h2 {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.12;
  color: var(--h);
}

.tag {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.row-lead { margin: 20px 0 0; font-size: 18px; }

.bullets {
  margin: 20px 0 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 10px;
  font-size: 17px;
}

.aside { margin: 18px 0 0; font-size: 15px; color: var(--muted); }

.note {
  margin: 22px 0 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 15px;
  background: #FFF3D6;
  color: #5A4300;
  border: 1px solid #EBCB7E;
}

.band.dark .note { background: #3A2E1A; color: #F2D9A0; border-color: #5C4A2A; }

/* --- The testers' strip and guide (the closed test's second round) ------- */

.band.strip .wrap { padding-top: 10px; padding-bottom: 10px; }

.strip-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--dark-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}

.strip-link:hover { color: var(--pink); }

.strip-arrow { flex: none; color: var(--pink); }

.panel h2 {
  margin: 26px 0 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}

.panel .note { margin-top: 0; margin-bottom: 22px; }

.panel .note p { margin: 0 0 12px; }

.panel .note .small { margin-top: 10px; margin-bottom: 0; }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 48px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps .button { width: 100%; max-width: 360px; }

.steps .small { margin: 8px 0 0; }

.panel .bullets { margin-top: 10px; font-size: 16px; }

/* Step 4 has no button: the app is where it happens. */
.steps .step-title {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--ink);
}

/* The fourteen days (build 17): each a row that opens to its steps. */
.days { margin: 12px 0 0; }

.day { border-top: 1px solid var(--line); }

.day:last-child { border-bottom: 1px solid var(--line); }

.day summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  color: var(--ink);
}

.day-label {
  color: var(--crimson);
  margin-inline-end: 6px;
}

.day-steps {
  margin: 0 0 12px;
  padding-inline-start: 22px;
  display: grid;
  gap: 8px;
  font-size: 16px;
}

.day .small { margin: 0 0 14px; }

.panel .rules { font-size: 14px; color: var(--meta); }

.note-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.shot img {
  display: block;
  width: min(280px, 72vw);
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 30px;
  border: 9px solid var(--frame);
  box-shadow: 0 18px 40px rgba(43, 30, 23, 0.18);
}

.band.dark .shot img { outline: 1px solid #4A3F37; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

.shot figcaption {
  max-width: 280px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

/* --- Plans -------------------------------------------------------------- */

.plans { padding-top: 80px; padding-bottom: 80px; }

.plans h2 {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.15;
  color: var(--ink);
}

.plans-lead { margin: 12px auto 0; max-width: 560px; text-align: center; font-size: 18px; }

.table-box {
  margin: 40px auto 0;
  max-width: 1000px;
  overflow-x: auto;
  border: 1px solid #E6DCC8;
  border-radius: 12px;
  background: var(--card);
}

/* Fixed columns: the three plans keep one width each and the first column
   takes the rest, so on a phone all four fit and nothing has to be swiped to. */
.table-box table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }

.table-box thead th { padding: 16px 10px; text-align: center; vertical-align: bottom; width: 132px; }

.table-box thead th.what {
  width: auto;
  text-align: start;
  padding: 18px 20px;
  color: var(--meta);
  font-weight: 500;
}

.table-box thead th.pro { background: var(--crimson); }

.plan { display: block; font-family: var(--serif); font-size: 21px; color: var(--ink); }

.plan-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--meta); }

.table-box thead th.pro .plan { color: #FFFFFF; }

.table-box thead th.pro .plan-sub { color: #FBE9EC; }

.table-box tr.group th {
  text-align: start;
  padding: 22px 20px 8px;
  background: #F8F2E6;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  font-weight: 700;
}

.table-box tbody tr:not(.group) { border-top: 1px solid #EFE7D7; }

.table-box tbody th[scope="row"] {
  text-align: start;
  padding: 13px 20px;
  font-weight: 400;
  color: var(--ink);
}

.table-box td { text-align: center; padding: 10px 8px; font-size: 14px; color: var(--ink); }

.table-box td.pro { background: #FDF3F4; }

.table-box td strong { font-weight: 600; }

.table-box td.no { color: #8A7B66; }

.tick {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: none;
  stroke: var(--crimson);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.footnotes {
  margin: 20px auto 0;
  max-width: 1000px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--meta);
}

.footnotes p { margin: 0; }

/* --- Closing ------------------------------------------------------------ */

.closing {
  padding-top: 88px;
  padding-bottom: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.12;
  color: var(--dark-ink);
}

.closing > p { margin: 12px 0 0; font-size: 18px; }

/* --- Single-message pages (open, unsubscribe, not found) ----------------- */

.panel {
  max-width: 560px;
  margin: 24px auto 56px;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}

.panel h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 6.5vw, 34px);
  line-height: 1.2;
  color: var(--ink);
}

.panel p { margin: 0 0 16px; }

.panel .stores { margin-top: 4px; }

.panel .small { margin-top: 12px; }

.panel .scan { margin-top: 18px; }

.panel .scan p { max-width: 260px; }

.panel hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

.cta { display: grid; gap: 12px; justify-items: start; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--crimson);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.button:hover { background: var(--crimson-deep); color: #FFFFFF; }

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--crimson);
  border-radius: 50%;
  display: inline-block;
  vertical-align: -5px;
  margin-inline-end: 10px;
}

/* --- Footer ------------------------------------------------------------- */

.foot { background: var(--cream); color: var(--meta); font-size: 14px; }

.foot-inner {
  padding-top: 56px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.foot .lockup { width: 190px; }

.foot nav {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}

.foot nav a { color: var(--ink); }

.foot p { margin: 8px 0 0; max-width: 680px; }

.foot nav + p { margin-top: 24px; }

.foot .fine { font-size: 13px; }

.lang { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; }


/* --- Phones: the plans table in four columns --------------------------- */

@media (max-width: 639px) {
  .table-box table { font-size: 13px; }
  .table-box thead th { width: 66px; padding: 12px 4px; }
  .table-box thead th.what { padding: 12px 10px; }
  .plan { font-size: 16px; }
  .plan-sub { font-size: 10.5px; line-height: 1.3; }
  .table-box tr.group th { padding: 18px 10px 6px; font-size: 11px; letter-spacing: 0.12em; }
  .table-box tbody th[scope="row"] { padding: 11px 10px; }
  .table-box td { padding: 8px 4px; font-size: 12px; line-height: 1.35; }
  .tick { width: 18px; height: 18px; }
}

/* --- Wide screens ------------------------------------------------------- */

@media (min-width: 720px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 860px) {
  .scan { display: flex; }
  .qr-tile { display: flex; }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    padding-top: 32px;
    padding-bottom: 80px;
  }

  .row {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 56px;
    padding-top: 96px;
    padding-bottom: 96px;
    --sx: 56px;
    --sy: 0px;
  }

  .row.flip .row-text { order: 2; }

  .row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); --sx: -56px; }

  [dir="rtl"] .row { --sx: -56px; }

  [dir="rtl"] .row.flip { --sx: 56px; }
}

/* --- Motion ------------------------------------------------------------- */

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes lift {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}

@keyframes fan {
  from { opacity: 0; transform: translateX(var(--fan)) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--pulse); }
  70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .spinner { animation: spin 0.9s linear infinite; }

  /* The spoon draws itself under the words as the page opens. */
  .bar .spoon-handle { animation: draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both; }

  .spoon-bowl { transform-box: fill-box; transform-origin: center; }

  .bar .spoon-bowl { animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both; }

  /* The words of the top section, one after another. */
  .hero-text > * { animation: rise 0.7s var(--ease) both; }
  .hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .hero-text > :nth-child(3) { animation-delay: 0.16s; }
  .hero-text > :nth-child(4) { animation-delay: 0.24s; }
  .hero-text > :nth-child(5) { animation-delay: 0.32s; }
  .hero-text > :nth-child(6) { animation-delay: 0.4s; }

  /* The three phones: the middle one rises, the two beside it fan out from
     behind it, and the middle one then floats, slowly. */
  .phone.main {
    animation: lift 0.9s var(--ease) 0.15s both, float 7s ease-in-out 1.3s infinite;
  }

  .phone.side { animation: fan 0.9s var(--ease) 0.45s both; }

  /* SOON says itself twice: a soft ring every few seconds. */
  .soon { animation: pulse 2.6s ease-out 1.6s infinite; }

  .play-badge, .pill, .button { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; }

  .play-badge:hover, .button:hover { transform: translateY(-2px); }

  .panel { animation: rise 0.6s var(--ease) both; }

  /* What waits for a scroll. Only once site.js has set js-motion and can
     reveal it again. */
  .js-motion .row .row-text > *,
  .js-motion .closing > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s var(--ease);
  }

  .js-motion .row .row-text > :nth-child(2), .js-motion .closing > :nth-child(2) { transition-delay: 0.08s; }
  .js-motion .row .row-text > :nth-child(3), .js-motion .closing > :nth-child(3) { transition-delay: 0.16s; }
  .js-motion .row .row-text > :nth-child(4) { transition-delay: 0.24s; }
  .js-motion .row .row-text > :nth-child(5) { transition-delay: 0.32s; }
  .js-motion .row .row-text > :nth-child(6) { transition-delay: 0.4s; }

  .js-motion .row .shot {
    opacity: 0;
    transform: translate(var(--sx), var(--sy));
    transition: opacity 0.9s ease 0.12s, transform 0.9s var(--ease) 0.12s;
  }

  .js-motion .row .num::after { width: 0; transition: width 0.9s var(--ease) 0.3s; }

  .js-motion .row.is-in .row-text > *,
  .js-motion .closing.is-in > *,
  .js-motion .row.is-in .shot { opacity: 1; transform: none; }

  .js-motion .row.is-in .num::after { width: 48px; }

  .js-motion .plans h2.reveal,
  .js-motion .plans .plans-lead.reveal,
  .js-motion .plans .table-box.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s var(--ease);
  }

  .js-motion .plans .plans-lead.reveal { transition-delay: 0.08s; }

  .js-motion .plans .table-box.reveal { transition-delay: 0.16s; }

  .js-motion .plans .reveal.is-in { opacity: 1; transform: none; }

  /* Each group of the table draws its ticks as it is reached, row by row. */
  .js-motion .plans tbody.reveal .tick path {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.45s ease;
  }

  .js-motion .plans tbody.reveal.is-in .tick path { stroke-dashoffset: 0; }
  .js-motion .plans tbody.is-in tr:nth-child(2) .tick path { transition-delay: 0.1s; }
  .js-motion .plans tbody.is-in tr:nth-child(3) .tick path { transition-delay: 0.18s; }
  .js-motion .plans tbody.is-in tr:nth-child(4) .tick path { transition-delay: 0.26s; }
  .js-motion .plans tbody.is-in tr:nth-child(5) .tick path { transition-delay: 0.34s; }
  .js-motion .plans tbody.is-in tr:nth-child(6) .tick path { transition-delay: 0.42s; }
  .js-motion .plans tbody.is-in tr:nth-child(7) .tick path { transition-delay: 0.5s; }
  .js-motion .plans tbody.is-in tr:nth-child(8) .tick path { transition-delay: 0.58s; }
  .js-motion .plans tbody.is-in tr:nth-child(9) .tick path { transition-delay: 0.66s; }

  /* The footer's spoon draws itself again when the page's end is reached. */
  .js-motion .foot-inner .spoon-handle { stroke-dashoffset: 1; }
  .js-motion .foot-inner .spoon-bowl { transform: scale(0); }
  .js-motion .foot-inner.is-in .spoon-handle { animation: draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }
  .js-motion .foot-inner.is-in .spoon-bowl { animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s both; }
}

/* --- The testers' live board (T15, English only) ----------------------------- */

/* Beside the column on a wide screen, the pair centred together. Only while a
   board is there (site.js sets with-board), or the column would sit off centre
   beside an empty one. Every rule names the board too, so the panel's own
   heading and paragraph rules never reach inside it. */
@media (min-width: 1100px) {
  .test-layout.with-board {
    display: grid;
    grid-template-columns: minmax(0, 560px) 340px;
    gap: 32px;
    justify-content: center;
    align-items: start;
  }

  .test-layout.with-board .panel { margin-left: 0; margin-right: 0; }

  .test-layout.with-board .board-side { position: sticky; top: 16px; margin-top: 24px; }
}

.board {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--body);
  font-size: 15px;
  line-height: 1.5;
}

.board-inline .board { margin: 22px 0 6px; background: var(--cream); }

.board .board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.board .board-title,
.board .board-rule h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}

.board .board-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--meta); }

.board-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--crimson); }

.board .board-total { display: flex; align-items: baseline; gap: 10px; margin: 0; }

.board .board-total b { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

.board .board-total span { font-weight: 600; color: var(--ink); }

.board .board-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  border-block: 1px solid var(--line);
}

.board .board-stats div { min-width: 0; padding: 10px 8px; }

.board .board-stats div + div { border-inline-start: 1px solid var(--line); }

.board .board-stats dt { font-size: 12px; color: var(--meta); }

.board .board-stats dd {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.board .board-stats p { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--meta); }

.board .board-won { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--herb-line); border-radius: 10px; background: var(--herb-soft); }

.board .board-won h3 { margin: 0; font-family: var(--serif); font-size: 18px; color: var(--ink); }

.board .board-won ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.board .board-won li { display: flex; align-items: baseline; min-width: 0; font-size: 14px; }

.board .board-won b { color: var(--ink); white-space: nowrap; }

.board .board-at { margin-inline-start: 6px; color: var(--meta); white-space: nowrap; }

.board .board-count { font-weight: 700; color: var(--herb); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A dotted leader, the way the app draws its lists. */
.board .board-leader { flex: 1; min-width: 12px; margin: 0 6px; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }

.board .board-rule { display: flex; align-items: center; gap: 10px; }

.board .board-rule::after { content: ""; order: 1; flex: 1; border-top: 1px solid var(--line); }

.board .board-rule span { order: 2; font-size: 12px; color: var(--meta); }

.board .board-note { margin: 0; font-size: 13px; color: var(--meta); }

.board .board-ranks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.board .board-ranks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; row-gap: 3px; }

.board .board-place {
  grid-row: 1 / span 3;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}

.board .board-ranks li:nth-child(-n+3) .board-place { color: var(--crimson); }

.board .board-line { display: flex; align-items: baseline; min-width: 0; }

.board .board-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }

.board .board-private { font-weight: 400; font-style: italic; color: var(--meta); }

.board .board-points { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.board .board-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12.5px; color: var(--meta); }

.board .board-pro { font-weight: 700; color: var(--herb); }

.board .board-track { position: relative; height: 5px; border-radius: 3px; background: var(--line); }

.board .board-track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--crimson); }

.board .board-track b { position: absolute; top: -3px; width: 2px; height: 11px; background: var(--ink); opacity: 0.55; }

.board .board-fine { display: grid; gap: 6px; font-size: 12.5px; color: var(--meta); }

.board .board-fine p { margin: 0; }

/* The one line near the top of the page, on a narrow screen only. */
.board-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}

.board-strip .board-go { font-weight: 700; color: var(--crimson); white-space: nowrap; }

.board-strip:focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; }

@media (max-width: 420px) {
  .board { padding: 16px 14px; }

  .board .board-total b { font-size: 38px; }
}

@media (prefers-reduced-motion: no-preference) {
  .board-dot { animation: board-pulse 2.2s ease-out infinite; }
}

@keyframes board-pulse {
  0% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.45); }
  70% { box-shadow: 0 0 0 9px rgba(196, 30, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
}