/* 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;
  --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 ---------------------------------------------------- */

/* A row's picture waits 56px to the side until it is reached (see Motion).
   Without this the page is that much wider until the last one has come in,
   and a window under about 1300px scrolls sideways. */
.band { overflow-x: clip; }

.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; }

.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; }
}