/* /coaches/ and /families/ — the two audience pages (site refresh, lane A, 2026-10-19; copy diet,
   lane C3, 2026-10-20).
   Additive: every token, control and surface comes from styles.css, soft.css, pages.css and
   pages-art.css (.grid-12, .field-window, .disclosure, .faq-item, .site-close,
   .seg, .icon-disc, the display triples). This file lays the two routes out on the page
   column and draws only what they add: the hero scene, the sample week, the capture wells
   (phone, browser, pair, mixed, zoomed strip), the callouts, the fee ledger, the short panels,
   the plan cards (coaches), the steps, the privacy promises and the questions.
   A chapter is a heading, one line, at most three short callouts and a large real screen
   (STYLE-GUIDE 2026-10-20: the screen is the proof, the words only name it), so the wells and
   devices are sized to lead and the copy is centred against them.
   Type stays on the round-4 scale (13/15/17/20 at 1.4 or 1.6; the display triples), radii on
   16/28/40/pill. Subtrees that draw app UI (devices, browser frames) carry data-lint-exempt.
   Every colour is a token or a light-dark() pair; no colour is passed to script. No motion
   beyond the shared control state machine, so reduced motion needs nothing extra. */

.audience-page {
  /* The drop under a device or browser frame: a shadow, the same in both schemes. */
  --aud-drop: 0 30px 60px -20px rgb(6 8 7 / 55%), 0 2px 6px rgb(6 8 7 / 16%);
  --aud-rim: light-dark(rgb(255 255 255 / 60%), var(--rim-dark));
  /* Copy over photographs is white in both schemes (DESIGN.md on-footage). */
  --aud-on-footage: light-dark(#fff, #fff);
  /* Well heights and device widths, by viewport (phones below). The well takes what a
     screen leaves after the header and the section's own gap. */
  --well-h: min(640px, calc(100svh - 180px));
  --device-w: clamp(250px, 21vw, 300px);
}
/* One rhythm (soft.css spacing scale): sections are spaced by margin, so a chapter's frame
   holds only its content. The hero's companions (the sample week, the section index) are
   blocks of the hero. */
.aud-section,
.aud-chapter,
.aud-pair {
  margin-top: var(--space-section);
}

/* ─── Hero ─────────────────────────────────────────────────────────────────────── */
.aud-hero {
  align-items: start;
  padding-top: var(--space-top);
}
.aud-hero__copy {
  grid-column: 1 / 8;
  min-width: 0;
}
.aud-hero__copy .pages-title {
  margin: 0 0 var(--space-head);
}
.aud-hero__lede {
  max-width: 40ch;
  margin: 0 0 var(--space-lede);
}
.aud-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.aud-hero__actions .button {
  height: var(--btn-lg);
  padding-inline: 28px;
}
/* The scene: a recessed photo window level with the h1's cap, one capture rising inside it
   from its lower edge (placed from the window's top; the window cuts its foot). */
.aud-hero__scene {
  grid-column: 8 / 13;
  aspect-ratio: 5 / 6;
  width: 100%;
  margin-top: calc(var(--d-h1) * 0.18);
}
.aud-hero__scene img.field-window__media {
  object-position: 42% 40%;
}
.families-page .aud-hero__scene img.field-window__media {
  object-position: 30% 50%;
}
.aud-hero__shade {
  background:
    linear-gradient(0deg, rgb(9 12 11 / 46%), rgb(9 12 11 / 0) 58%),
    linear-gradient(180deg, rgb(9 12 11 / 24%), rgb(9 12 11 / 0) 30%);
}
.aud-hero__device {
  --device-w: clamp(250px, 21vw, 300px);
  position: absolute;
  top: 72px;
  right: 8%;
  z-index: 2;
}
.aud-hero__browser {
  position: absolute;
  right: 20px;
  bottom: 56px;
  left: 20px;
  z-index: 2;
}
.aud-hero__caption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 3;
  margin: 0;
  color: var(--aud-on-footage);
  text-align: right;
  text-wrap: balance;
}

/* ─── Devices and browser frames ───────────────────────────────────────────────── */
/* One phone frame: a pearl bezel whose corners follow the screen's (14% of its width). */
.aud-device {
  --bezel: 8px;
  --corner: calc(var(--device-w) * 0.14);
  box-sizing: border-box;
  width: var(--device-w);
  border: var(--bezel) solid var(--surface);
  border-radius: calc(var(--corner) + var(--bezel));
  background: var(--surface);
  box-shadow:
    var(--aud-drop),
    inset 0 1px 0 var(--soft-light);
  overflow: hidden;
}
/* The screen: each capture at its own proportions (the manifest's files are full screens or
   top crops); the well or window around it decides how much shows. */
.aud-shot {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.aud-shot > img {
  display: block;
  width: 100%;
  height: auto;
}
.aud-shot--top {
  border-radius: var(--corner);
}
.aud-shot--web {
  border-radius: 0 0 10px 10px;
}
/* Real captures are whole native screens (402 x 874 pt). Where only part of one reads at the
   size it is shown, the screen starts lower: --from is the first point row shown, and the
   frame ends where the screen does, so nothing is scaled down to fit. */
.aud-shot[class*='aud-from'] {
  aspect-ratio: 402 / calc(874 - var(--from, 0));
}
.aud-shot[class*='aud-from'] > img {
  transform: translateY(calc(var(--from, 0) / 874 * -100%));
}
.aud-from-chat {
  --from: 170;
}
/* Web captures are 1440 x 900 pages: each frame shows one readable region of its page at
   --zoom, from --x / --y (fractions of the page), rather than the whole page shrunk. */
.aud-shot--web[class*='aud-crop'] {
  aspect-ratio: 16 / 10;
}
.aud-shot--web[class*='aud-crop'] > img {
  width: calc(var(--zoom) * 100%);
  max-width: none;
  transform: translate(calc(var(--x) * -100%), calc(var(--y) * -100%));
}
.aud-crop--attendance {
  --zoom: 1.47;
  --x: 0.17;
  --y: 0.07;
}
.aud-crop--import {
  --zoom: 1.67;
  --x: 0.4;
  --y: 0.2;
}
.aud-crop--family {
  --zoom: 1.24;
  --x: 0.17;
  --y: 0.07;
}
/* A plain browser frame: a pearl bar with three dots, no address, no invented chrome. */
.aud-browser {
  box-sizing: border-box;
  padding: 0 6px 6px;
  border: 1px solid var(--aud-rim);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--aud-drop);
}
.aud-browser__bar {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 24px;
  padding-left: 8px;
}
.aud-browser__bar > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

/* ─── Capture wells ─────────────────────────────────────────────────────────────── */
.aud-stage {
  position: relative;
  min-width: 0;
  margin: 0;
}
.aud-stage__well {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  height: var(--well-h);
  margin: 0;
  padding-top: var(--pad-well);
  border: 1px solid var(--aud-rim);
  border-radius: var(--r-window);
  background: var(--surface);
  box-shadow: var(--e-inset-lg);
  overflow: hidden;
  /* A capture taller than the well ends in a fade, not on a cut. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
}
/* One phone alone: the largest device on the page. */
.aud-stage--single .aud-device {
  --device-w: clamp(270px, 23vw, 330px);
}
/* Two phones side by side at one readable size, the second a step lower, so neither is
   shrunk behind the other. */
.aud-stage--pair .aud-stage__well {
  container-type: inline-size;
  gap: 16px;
}
.aud-stage--pair .aud-device {
  --device-w: min(300px, calc((100cqw - 48px) / 2));
  flex: none;
}
.aud-stage--pair .aud-device--front {
  order: -1;
}
.aud-stage--pair .aud-device--back {
  margin-top: 40px;
}
/* The browser alone: it fills the well, which takes its own height. */
.aud-stage--browser .aud-stage__well {
  display: block;
  height: auto;
  padding: var(--pad-well) 32px 32px;
  -webkit-mask-image: none;
  mask-image: none;
}
/* A phone in front of a browser: the browser to the upper right, the phone lower left. */
.aud-stage--mixed .aud-browser {
  position: absolute;
  top: var(--pad-well);
  right: 24px;
  width: 68%;
}
.aud-stage--mixed .aud-device {
  --device-w: clamp(240px, 20vw, 280px);
  position: absolute;
  top: 160px;
  left: 28px;
  z-index: 2;
}
/* The zoomed strip: one screen shown larger than life in a landscape well, from just under
   its status bar, so its rows read at a glance. */
.aud-stage--strip .aud-stage__well {
  display: block;
  height: auto;
  padding: var(--pad-well) 0 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.aud-strip {
  --strip-w: min(100%, 560px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: min(440px, calc(100svh - 260px));
  min-height: 280px;
  padding: 0 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent);
}
.aud-strip > img.aud-from-tasks {
  /* Starts at the snack sign-up sheet (point row 296). The rows above it include the field
     setup rotation, which this capture lists with 0 people (a limitation in its sidecar). */
  margin-top: calc(var(--strip-w) * -296 / 402);
}
.aud-strip > img {
  display: block;
  flex: none;
  width: var(--strip-w);
  height: auto;
  border-radius: 0;
  box-shadow: var(--aud-drop);
}
/* Fees: the well and the ledger side by side. */
.aud-stage--ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: center;
}
.aud-stage--ledger .aud-stage__well {
  --device-w: clamp(230px, 19vw, 270px);
}
/* Pay: the ledger laid over the well's lower edge, like a receipt on the table. */
.aud-stage--receipt .aud-stage__well {
  --device-w: clamp(250px, 21vw, 290px);
  justify-content: flex-start;
  padding-left: 6%;
}
/* Beside the phone, never over its rows: the phone ends at 6% + its width, the ledger starts
   after it. */
.aud-stage--receipt .aud-ledger {
  position: absolute;
  right: 16px;
  bottom: 40px;
  z-index: 2;
  width: min(280px, calc(94% - var(--device-w) - 40px));
}

/* ─── Chapters ──────────────────────────────────────────────────────────────────── */
/* The copy is short, so it sits centred against the screen beside it. */
.aud-chapter {
  align-items: center;
}
.aud-chapter__copy {
  grid-column: 1 / 7;
  min-width: 0;
}
.aud-chapter > .aud-stage {
  grid-column: 7 / 13;
}
.aud-chapter--flip .aud-chapter__copy {
  grid-column: 7 / 13;
}
.aud-chapter--flip > .aud-stage {
  grid-column: 1 / 7;
  grid-row: 1;
}
.aud-chapter h2 {
  margin: 0;
}
.aud-lede {
  max-width: 40ch;
  margin: var(--space-head) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-20);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
/* A number that stands alone (the benchmark keeps figures out of sentences). */
.aud-stat {
  margin: var(--space-lede) 0 0;
  color: var(--ink);
  font: 700 var(--d-card) / var(--d-card-lh) var(--font-display);
  letter-spacing: var(--d-card-ls);
  font-variant-numeric: lining-nums tabular-nums;
  text-wrap: balance;
}
/* Callouts and ticks: short labels, each behind a check. */
.aud-facts,
.aud-ticks {
  display: grid;
  gap: 12px;
  margin: var(--space-lede) 0 0;
  padding: 0;
  list-style: none;
}
.aud-stat + .aud-facts {
  margin-top: var(--space-block);
}
.aud-facts > li,
.aud-ticks > li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui);
  text-wrap: balance;
}
.aud-facts > li::before,
.aud-ticks > li::before {
  content: '';
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--app-accent-ink);
  -webkit-mask: url('/icons/check.svg') center / 18px 18px no-repeat;
  mask: url('/icons/check.svg') center / 18px 18px no-repeat;
}

/* ─── The fee ledger ───────────────────────────────────────────────────────────── */
.aud-ledger {
  box-sizing: border-box;
  padding: var(--pad-card);
  border: 1px solid var(--aud-rim);
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.aud-ledger__title {
  margin: 0;
  color: var(--ink);
  font: 700 var(--d-card) / var(--d-card-lh) var(--font-display);
  letter-spacing: var(--d-card-ls);
  text-wrap: balance;
}
.aud-ledger__lines {
  margin: 16px 0 0;
}
.aud-ledger__lines > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}
.aud-ledger__lines dt {
  color: var(--ink-secondary);
}
.aud-ledger__lines dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.aud-ledger__total dt,
.aud-ledger__total dd {
  color: var(--ink);
  font-weight: 600;
}
.aud-ledger__lines > .aud-ledger__total:last-child {
  border-bottom: 0;
}
.aud-ledger__note {
  margin: 12px 0 0;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

/* ─── The sample week (coaches) and the section index (families) ───────────────── */
.aud-week {
  margin-top: var(--space-block);
}
.aud-week__note {
  margin: 0 0 var(--space-caption);
  color: var(--ink-secondary);
}
.aud-week__note--solo {
  margin: var(--space-block) 0 0;
}
.aud-week__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aud-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  box-sizing: border-box;
  padding: 16px 18px 18px;
  border: 1px solid var(--aud-rim);
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {
  .aud-day:hover {
    transform: translateY(-2px);
    box-shadow: var(--e-raised-lg);
  }
}
.aud-day:active {
  transform: none;
  box-shadow: var(--e-inset-sm);
}
.aud-day:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.aud-day__date {
  color: var(--ink-secondary);
  font: 700 var(--fs-20) / var(--lh-ui) var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.aud-day__date b {
  color: var(--ink);
  font-weight: 700;
}
.aud-day--lead .aud-day__date b {
  color: var(--app-accent-ink);
}
.aud-day__what {
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
  text-wrap: balance;
}
.aud-index {
  display: flex;
  margin-top: var(--space-block);
}
.aud-index__seg {
  max-width: 100%;
  scroll-padding-inline: 44px;
}
.aud-index__seg > a {
  flex: none;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* ─── Short panels: game day + Trinity, watching + cost ────────────────────────── */
.aud-pair {
  row-gap: var(--grid-gap);
  align-items: stretch;
}
.aud-panel {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad-card);
  border: 1px solid var(--aud-rim);
  border-radius: var(--r-40);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.aud-panel + .aud-panel {
  grid-column: 7 / 13;
}
.aud-panel h2 {
  margin: 0;
}
.aud-panel p {
  max-width: 44ch;
  margin: var(--space-head) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.aud-links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: var(--space-lede) 0 0;
  list-style: none;
}
.aud-links > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}

/* ─── Plans (coaches): two cards of ticks on the two halves of the grid ────────── */
.aud-plans__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-lede);
}
.aud-plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad-card);
  border: 1px solid var(--aud-rim);
  border-radius: var(--r-40);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.aud-plan__name {
  margin: 0;
  color: var(--ink);
  font: 700 var(--d-card) / var(--d-card-lh) var(--font-display);
  letter-spacing: var(--d-card-ls);
}
.aud-plan__price {
  margin: 12px 0 0;
  color: var(--ink);
  font: 700 var(--d-price) / var(--d-price-lh) var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.aud-plan__for {
  margin: 8px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
  text-wrap: pretty;
}
.aud-plan .aud-ticks {
  margin-top: 24px;
}
.aud-plans__more {
  margin: var(--space-block) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
}

/* ─── Getting started (coaches) ────────────────────────────────────────────────── */
.aud-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--space-head) 0 0;
  padding: 0;
  list-style: none;
}
.aud-steps > li {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.aud-steps__num {
  display: block;
  color: var(--ink-secondary);
  font: 700 var(--d-price) / var(--d-price-lh) var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.aud-steps h3 {
  margin: 12px 0 0;
  color: var(--ink);
}
.aud-steps p {
  max-width: 40ch;
  margin: 8px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}

/* ─── Privacy promises (families) ──────────────────────────────────────────────── */
.aud-promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--space-lede) 0 0;
  padding: 0;
  list-style: none;
}
.aud-promises > li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.aud-promises .text-link {
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
  text-wrap: balance;
}
.aud-promises p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.aud-privacy__more {
  margin: var(--space-block) 0 0;
}

/* ─── Questions ─────────────────────────────────────────────────────────────────── */
.aud-faq {
  align-items: start;
}
.aud-faq__aside {
  grid-column: 1 / 6;
  min-width: 0;
}
.aud-faq__aside h2 {
  margin: 0;
}
.aud-faq__lede {
  max-width: 30ch;
  margin: var(--space-head) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
}
.aud-faq .faq-list {
  grid-column: 7 / -1;
  min-width: 0;
}
@media (min-width: 1024px) {
  .aud-faq__aside {
    position: sticky;
    top: 120px;
  }
}

/* ─── Widths ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) and (min-width: 761px) {
  .aud-week__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .aud-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  /* Below 1280 the phone and the receipt no longer fit side by side in six columns, and
     under it they would take more than a screen: the Pay Now capture is itself the
     breakdown, so the restated receipt steps aside (as on a phone). */
  .aud-stage--receipt .aud-ledger {
    display: none;
  }
}
@media (max-width: 1023px) {
  .aud-hero__copy,
  .aud-hero__scene,
  .aud-chapter__copy,
  .aud-chapter--flip .aud-chapter__copy,
  .aud-chapter > .aud-stage,
  .aud-chapter--flip > .aud-stage,
  .aud-panel,
  .aud-panel + .aud-panel,
  .aud-faq__aside,
  .aud-faq .faq-list {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .aud-hero__scene {
    aspect-ratio: 16 / 9;
    margin-top: var(--space-block);
  }
  .aud-chapter > .aud-stage {
    margin-top: var(--space-block);
  }
  /* Stacked, the stage has the whole column again, so the receipt sits beside the phone. */
  .aud-stage--receipt .aud-ledger {
    width: min(320px, calc(94% - var(--device-w) - 40px));
  }
  /* Stacked, the chapter's three callouts sit on one row under the line. */
  .aud-chapter .aud-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .aud-faq .faq-list {
    margin-top: var(--space-lede);
  }
}
@media (max-width: 760px) {
  .audience-page {
    --well-h: min(400px, calc(100svh - 280px));
    --device-w: 240px;
  }
  .aud-hero__actions .button {
    flex: 1 1 140px;
    height: var(--btn-md);
    padding-inline: 18px;
  }
  .aud-hero__scene {
    aspect-ratio: 4 / 3;
  }
  .aud-hero__device {
    --device-w: 200px;
    --bezel: 6px;
    top: 58px;
    right: 6%;
  }
  .aud-hero__browser {
    right: 12px;
    bottom: 40px;
    left: 18%;
  }
  .aud-hero__caption {
    right: 12px;
    bottom: 10px;
    left: 12px;
  }
  .aud-hero__caption-more {
    display: none;
  }
  /* The week and the promises become one snapping row: each card is a stop. */
  .aud-week__list,
  .aud-promises {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    /* Room for the cards' shadows inside the scroller, taken back so it adds no gap. */
    padding-bottom: 12px;
    margin-bottom: -12px;
    margin-inline: -20px;
    padding-inline: 20px;
    scrollbar-width: none;
    min-width: 0;
    max-width: none;
  }
  .aud-week__list {
    grid-auto-columns: 34%;
  }
  .aud-week__list::-webkit-scrollbar,
  .aud-promises::-webkit-scrollbar {
    display: none;
  }
  .aud-week__list > li,
  .aud-promises > li {
    scroll-snap-align: start;
  }
  .aud-promises > li {
    padding: 14px 16px;
    border-top: 0;
    border-radius: var(--r-16);
    box-shadow: var(--e-inset-sm);
  }
  .aud-day {
    padding: 12px 14px 14px;
  }
  .aud-lede {
    font-size: var(--fs-17);
  }
  .aud-stat {
    font-size: var(--fs-20);
    line-height: var(--lh-ui);
  }
  /* On a phone the three callouts are one short list under the screen. */
  .aud-chapter .aud-facts,
  .aud-ticks {
    grid-template-columns: none;
    gap: 8px;
  }
  .aud-chapter .aud-facts {
    margin-top: var(--space-block);
  }
  .aud-facts > li,
  .aud-ticks > li {
    padding-left: 26px;
    font-size: var(--fs-15);
  }
  .aud-facts > li::before,
  .aud-ticks > li::before {
    top: 0.15em;
    width: 16px;
    height: 16px;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
  }
  /* Phones: the capture comes after the heading and line, the callouts after it. */
  .aud-chapter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .aud-chapter__copy {
    display: contents;
  }
  .aud-chapter__copy > h2 {
    order: 1;
  }
  .aud-chapter__copy > :is(.aud-lede, .aud-stat) {
    order: 2;
  }
  .aud-chapter > .aud-stage,
  .aud-chapter--flip > .aud-stage {
    order: 3;
    margin-top: var(--space-lede);
  }
  /* After a stat (a block of its own), the screen is one block gap down. */
  .aud-chapter:has(.aud-stat) > .aud-stage {
    margin-top: var(--space-block);
  }
  .aud-chapter__copy > :not(h2, .aud-lede, .aud-stat) {
    order: 4;
  }
  .aud-stage--single .aud-device {
    --device-w: 250px;
  }
  /* One readable phone, not two small ones: the second screen is in the text. */
  .aud-stage--pair .aud-device--back {
    display: none;
  }
  .aud-stage--pair .aud-device--front {
    --device-w: 250px;
  }
  .aud-from-m-event {
    --from: 112;
  }
  .aud-from-m-guardian {
    --from: 420;
  }
  .aud-stage--browser .aud-stage__well {
    padding: var(--pad-well) 14px 14px;
  }
  /* Fees: the ledger carries the chapter on a phone (the capture shows the same request at a
     size too small to read). Pay: the Pay Now capture itself is the breakdown, so the
     restated receipt steps aside. */
  .aud-stage--ledger .aud-stage__well,
  .aud-stage--receipt .aud-ledger {
    display: none;
  }
  /* The roster import reads at full width; the People screen steps aside. */
  .aud-stage--mixed .aud-stage__well {
    display: block;
    height: auto;
    padding: var(--pad-well) 14px 14px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .aud-stage--mixed .aud-browser {
    position: static;
    width: auto;
  }
  .aud-stage--mixed .aud-device {
    display: none;
  }
  .aud-strip {
    --strip-w: min(100%, 400px);
    height: 300px;
    min-height: 0;
    padding: 0 16px;
  }
  .aud-stage--ledger {
    grid-template-columns: minmax(0, 1fr);
  }
  .aud-stage--receipt {
    display: grid;
    gap: 12px;
  }
  .aud-stage--receipt .aud-stage__well {
    justify-content: center;
    padding-left: 0;
  }
  .aud-ledger__title {
    font-size: var(--fs-20);
    line-height: var(--lh-ui);
  }
  .aud-ledger__lines {
    margin-top: 8px;
  }
  .aud-ledger__lines > div {
    padding: 4px 0;
  }
  .aud-panel p {
    font-size: var(--fs-15);
  }
  .aud-plans__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* A plan card on a phone: the name and price on one row, the ticks in two columns. */
  .aud-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .aud-plan__price {
    margin: 0;
    font-size: var(--d-card);
    line-height: var(--d-card-lh);
  }
  .aud-plan__for,
  .aud-plan .aud-ticks {
    grid-column: 1 / -1;
  }
  .aud-plan .aud-ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
  }
  /* Three short steps stack; each is a number, a name and one line. */
  .aud-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .aud-steps > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    padding-top: 16px;
  }
  .aud-steps__num {
    grid-row: 1 / 3;
    font-size: var(--d-card);
    line-height: var(--d-card-lh);
  }
  .aud-steps h3 {
    margin: 0;
  }
  .aud-steps p {
    margin-top: 4px;
  }
}
@media (max-width: 420px) {
  /* Two full-width actions rather than a label that wraps inside a pill. */
  .aud-hero__actions .button {
    flex-basis: 100%;
  }
}
@media (max-width: 360px) {
  .aud-week__list {
    grid-auto-columns: 44%;
  }
}