/* Hallmark · shape: Stage · genre: editorial · theme: custom (inherited: the LUL Drivers app's design system, app/lib/Shared) · job: try · idea: "the line you drive, live: the Victoria line's trains gliding under the headline, drawn as the app draws its map" · vibe: "quiet, factual, a driver's tool on petrol and paper"
 * paper: #F6FAFD (the app's surface) · accent: #106586 (Petrol 40, the app's primary) · display: IBM Plex Sans 600 · body: IBM Plex Sans 400 · hero: split head over a full-width line band · nav: edge-aligned, the wordmark, Support and one action · footer: a mast, the wordmark and links over the licence lines · imagery: the app's own screens, light and dark · signature: the Victoria line with its trains moving, in the app's live-map language
 * axes: light paper/sans/cool accent · surface: absolute (the app's white cards, the Victoria line's black text) · posture: restrained · contrast: pass · fold: pass · hero-review: not run · finish-review: subagent · 8 findings · 5 resolved 3 partial · gap: closed, the alerts' promise per phone now shows in Pro · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: P, a tool page argues little; it leads with the line itself and says plainly what the alerts can and can't promise on each phone */
/* Hallmark · waive 7b · --color-card and --color-accent-ink #FFFFFF, --color-victoria-ink #000000 · the white is the app's own (AppTheme's light cardColor and onPrimary) and the black is the Victoria line's text colour from network.json; website_test.dart holds both equal to the app */
/* Hallmark · dismissed 58 · the privacy policy and terms copy the app's words in full, and support is a document; on the home page about 450 words show with the questions closed, the rest being their answers and the licence lines every footer must carry */
/* Hallmark · dismissed 25 · the narrower measures are one-sentence captions and ledes beside screens; the documents' prose keeps a 60ch measure */
/* Hallmark · waive 77 · "Before you install": six question rows in the 5-of-12 column, under 576px wide · the finish review lined the questions up with the ledes' column; the rows are the section, and each answer opens in place */
/* Hallmark · waive 79 · privacy.html, terms.html, support.html and 404.html open on their h1 under the header · these documents have no hero to fill a screen: the policy, the terms and support start at their heading, and the space the check measures is the article's own text */

/* ── Fonts: the app's own IBM Plex Sans, as WOFF (tools/brand/build_brand_assets.py) ── */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff") format("woff");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff") format("woff");
}

/* ── Tokens. The colours are the app's: AppTheme's light and dark schemes, and the Victoria line's from
   network.json. website_test.dart holds them equal, so change them in the app first. ── */

:root {
  color-scheme: light;
  --color-paper: #F6FAFD; /* surface */
  --color-paper-2: #EBEEF2; /* surfaceContainer */
  --color-card: #FFFFFF; /* cardColor */
  --color-ink: #242629; /* onSurface */
  --color-muted: #585F67; /* onSurfaceVariant */
  --color-outline: #707880; /* outline */
  --color-rule: #D5DEE7; /* outlineVariant */
  --color-accent: #106586; /* primary */
  --color-accent-ink: #FFFFFF; /* onPrimary */
  --color-accent-soft: #BCE9FF; /* primaryContainer */
  --color-accent-soft-ink: #001F2C; /* onPrimaryContainer */
  --color-focus: #106586; /* primary */
  --color-victoria: #039BE5; /* network.json: victoria's color */
  --color-victoria-ink: #000000; /* network.json: victoria's textColor */
  --color-mask: #000000; /* only a mask's alpha: the line's fade */

  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-body);

  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-display: clamp(2.5rem, 4.2vw + 1rem, 4.75rem);
  --text-section: clamp(1.875rem, 2vw + 1rem, 3rem);
  --text-title: clamp(1.125rem, 0.5vw + 0.95rem, 1.375rem);
  --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.3125rem);
  --tracking-display: -0.02em;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --container: 1200px;
  --measure: 60ch;
  --gutter: 48px;
  --gap-columns: 32px;
  --section-gap: 128px;
  --radius-card: 16px;
  --radius-screen: 24px;
  --radius-pill: 999px;
  --z-raised: 10;
  --z-toast: 500;

  /* The hero's line: the gap between stations, and how long a train takes to cross the band. */
  --stop: 176px;
  --run: 56s;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-paper: #111416;
    --color-paper-2: #1D2022;
    --color-card: #191B1E;
    --color-ink: #D7DADE;
    --color-muted: #A4ADB5;
    --color-outline: #89919A;
    --color-rule: #2B3138;
    --color-accent: #85D0F4;
    --color-accent-ink: #003548;
    --color-accent-soft: #004C67;
    --color-accent-soft-ink: #BCE9FF;
    --color-focus: #85D0F4;
  }
}

@media (max-width: 60rem) {
  :root {
    --gutter: 24px;
    --section-gap: 96px;
    --stop: 152px;
    --run: 44s;
  }
}

@media (max-width: 40rem) {
  :root {
    --gutter: 16px;
    --gap-columns: 16px;
    --section-gap: 72px;
    --stop: 128px;
    --run: 32s;
  }
}

/* ── Base ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-padding-top: var(--space-xl);
  scrollbar-color: var(--color-outline) var(--color-paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-ink);
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 2px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

p {
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: calc(-1 * var(--space-3xl));
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
}

.skip:focus-visible {
  top: var(--space-md);
}

main {
  flex: 1 0 auto;
}

/* ── Controls, in all their states ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 600 var(--text-md) / 1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-ink);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn[aria-busy="true"] {
  cursor: progress;
}

.btn--quiet {
  border-color: var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  font-weight: 400;
}

.btn--quiet:hover {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.stores a {
  display: block;
  border-radius: 10px;
  transition: transform var(--dur-micro) var(--ease-out);
}

.stores a:active {
  transform: translateY(1px);
}

.stores img {
  height: 48px;
  width: auto;
}

/* ── The header ── */

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 80px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--text-lg);
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-sm);
  color: var(--color-ink);
  text-decoration: none;
}

.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ── The hero: the head beside its sentence and stores, over the line ── */

.hero {
  padding-top: var(--space-xl);
}

.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-lg) var(--gap-columns);
  align-items: end;
}

.hero h1 {
  max-width: 12ch;
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}

.hero__lead {
  font-size: var(--text-lead);
  max-width: 34ch;
}

.hero__aside .stores {
  margin-top: var(--space-lg);
}

/* The line: the Victoria line from Brixton, as the app's live map draws it (lib/ViewControls/trains_page/line_map.dart):
   grey tracks, a ring per station on each, a filled dot at the end, and the trains as pills in the line's colour with
   a nose the way they run. Northbound above, running right; southbound below, running left, into Brixton. */

.line {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.line__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-lg);
}

.line__name {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--space-xs);
  background: var(--color-victoria);
  color: var(--color-victoria-ink);
  font-weight: 600;
}

.line__note {
  flex: 1 1 18rem;
  color: var(--color-muted);
}

.line__map {
  position: relative;
  height: 196px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, var(--color-mask) 78%, transparent);
  mask-image: linear-gradient(to right, var(--color-mask) 78%, transparent);
}

.line__track {
  position: absolute;
  left: calc(var(--stop) / 2);
  right: 0;
  height: 2px;
  background: var(--color-outline);
}

.line__track--north {
  top: 30px;
}

.line__track--south {
  top: 94px;
}

.line__stations {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 0;
  list-style: none;
}

.line__stations li {
  position: relative;
  flex: 0 0 var(--stop);
  padding: 128px var(--space-xs) 0;
  color: var(--color-ink);
  font-size: var(--text-md);
  line-height: 1.3;
  text-align: center;
}

/* A station's ring on each track. */
.line__stations li::before,
.line__stations li::after {
  content: "";
  position: absolute;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-outline);
  border-radius: 50%;
  background: var(--color-paper);
}

.line__stations li::before {
  top: 25px;
}

.line__stations li::after {
  top: 89px;
}

/* Brixton, the end of the line: a filled dot, as the app's route ends. */
.line__stations .line__end {
  font-weight: 600;
}

.line__stations .line__end::before,
.line__stations .line__end::after {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

/* A train runs the band's width: its wrapper is as wide as the map, so translateX(100%) is the far edge. */
.line__run {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  animation: var(--run) linear infinite;
  animation-delay: calc(var(--run) * var(--at) * -1);
}

.line__run--north {
  top: 31px;
  animation-name: run-north;
}

.line__run--south {
  top: 95px;
  animation-name: run-south;
}

/* A train, here and in Pro's alert: a pill in the line's colour with its set number. */
.line__train,
.trip__train {
  position: absolute;
  display: block;
  min-width: 52px;
  height: 28px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-victoria);
  color: var(--color-victoria-ink);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.line__train {
  top: -14px;
  left: -26px;
}

/* The nose, the way the train runs. */
.line__train::after,
.trip__train::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 6px;
  height: 10px;
  background: var(--color-victoria);
}

.line__run--north .line__train::after {
  right: -5px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.line__run--south .line__train::after,
.trip__train::after {
  left: -5px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* Where each train is along its run, as a share of it: the still picture, and where each starts. */
.line__run:nth-of-type(1) {
  --at: 0.06;
}

.line__run:nth-of-type(2) {
  --at: 0.31;
}

.line__run:nth-of-type(3) {
  --at: 0.52;
}

.line__run:nth-of-type(4) {
  --at: 0.79;
}

.line__run--south:nth-of-type(5) {
  --at: 0.17;
}

.line__run--south:nth-of-type(6) {
  --at: 0.43;
}

.line__run--south:nth-of-type(7) {
  --at: 0.66;
}

.line__run--south:nth-of-type(8) {
  --at: 0.9;
}

/* Northbound trains leave Brixton and run off to the right; southbound ones come in from the right and end there. */
@keyframes run-north {
  0% {
    transform: translateX(calc(var(--stop) / 2));
    opacity: 0;
  }

  3% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(100% + var(--stop)));
    opacity: 1;
  }
}

@keyframes run-south {
  0% {
    transform: translateX(calc(100% + var(--stop)));
    opacity: 1;
  }

  97% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(var(--stop) / 2));
    opacity: 0;
  }
}

/* A loop that can pause: still until the script runs, off-screen, on hover or focus, under reduced motion, and when
   paused. The button shows only when the script runs and motion is allowed. */
.line:not(.is-running) .line__run {
  animation-play-state: paused;
}

.line__toggle {
  margin-left: auto;
}

html:not(.js) .line__toggle {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .line__run {
    animation-play-state: paused !important;
  }

  .line__toggle {
    display: none;
  }

  .btn,
  .stores a {
    transition: none;
  }
}

/* ── Sections ── */

.section {
  padding-block: var(--section-gap) 0;
}

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-md) var(--gap-columns);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.section__head h2 {
  font-size: var(--text-section);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}

.section__head p {
  color: var(--color-muted);
  font-size: var(--text-lead);
  max-width: 40ch;
}

/* The app's screens, three across, each with what it shows. */
.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--gap-columns);
  padding: 0;
  list-style: none;
}

.screens--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.screen img,
.pro-alerts__screen img {
  width: 100%;
  border-radius: var(--radius-screen);
  outline: 1px solid var(--color-rule);
  outline-offset: -1px;
  background: var(--color-card);
}

.screen h3 {
  margin-top: var(--space-lg);
  font-size: var(--text-title);
  line-height: 1.25;
}

.screen p {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  max-width: 36ch;
}

/* Pro: Train Alerts set large, with what they do on each phone, beside the screen that sets one. Its columns are the
   section heads' (7 to 5), so the screen lines up with the ledes, the list of the rest and the questions. */
.pro-alerts,
.pro-tools {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl) var(--gap-columns);
  align-items: start;
}

.pro-alerts h3 {
  font-size: var(--text-xl);
  line-height: 1.25;
}

.pro-alerts__lead {
  margin-top: var(--space-sm);
  font-size: var(--text-lead);
  max-width: 40ch;
}

.pro-alerts__screen {
  max-width: 346px;
}

.pro-alerts__screen figcaption {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* The alert in the hero's drawing, stations in the hero's order: train 201 heading south (left) for Euston, flagged
   where the alert goes off, 5 minutes out, just past Highbury & Islington. The flag sits left of its tick, so it
   never runs off a phone's edge. */
.trip {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.trip figcaption {
  display: flex;
  margin-bottom: var(--space-md);
}

.trip__map {
  position: relative;
  height: 124px;
}

.trip__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-outline) 8%, var(--color-outline) 92%, transparent);
}

.trip__stations {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 0;
  list-style: none;
}

.trip__stations li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 76px var(--space-2xs) 0;
  font-size: var(--text-md);
  line-height: 1.3;
  text-align: center;
}

.trip__stations li::before {
  content: "";
  position: absolute;
  top: 51px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-outline);
  border-radius: 50%;
  background: var(--color-paper);
}

/* The stop the alert is for: named in bold, its ring in the accent. */
.trip__stations .trip__stop {
  font-weight: 600;
}

.trip__stations .trip__stop::before {
  border: 3px solid var(--color-accent);
}

.trip__train {
  top: 43px;
  left: calc(78% - 26px);
}

.trip__alert {
  position: absolute;
  top: 0;
  right: 22%;
  padding-right: var(--space-xs);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}

.trip__alert::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 2px;
  height: 43px;
  background: var(--color-accent);
}

/* What alerts can promise, phone by phone, side by side. */
.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--gap-columns);
  margin-top: var(--space-xl);
}

.platforms h4 {
  font-size: var(--text-lg);
  line-height: 1.3;
}

.platforms p {
  margin-top: var(--space-xs);
}

.platforms p + p {
  color: var(--color-muted);
}

/* The map and the board, smaller, beside the rest of Pro by name. */
.pro-tools {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}

.more h3 {
  font-size: var(--text-title);
  line-height: 1.25;
}

.more ul {
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}

.more li {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}

/* Free, no ads, optional Pro: three statements on the paper, under a rule. */
.terms-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--gap-columns);
  padding: var(--space-xl) 0 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
}

.terms-band h3 {
  font-size: var(--text-section);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}

.terms-band p {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  max-width: 30ch;
}

.terms-band .terms-band__note {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-md);
}

/* Questions: the list in the ledes' column, beside its heading. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-lg) var(--gap-columns);
}

.faq h2 {
  font-size: var(--text-section);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}

.faq__list {
  border-top: 1px solid var(--color-rule);
}

.faq__list details {
  border-bottom: 1px solid var(--color-rule);
}

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 64px;
  padding-block: var(--space-sm);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns to a minus when the answer is open. */
.faq__list summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) center / 14px 2px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) center / 2px 14px no-repeat;
}

.faq__list details[open] summary::after {
  background: linear-gradient(var(--color-accent), var(--color-accent)) center / 14px 2px no-repeat;
}

.faq__list summary:hover {
  color: var(--color-accent);
}

.faq__list details > :not(summary) {
  padding-bottom: var(--space-lg);
}

.faq__list details p + p {
  margin-top: var(--space-sm);
}

/* The last screen: the stores beside a last look at the app. */
.closing {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-xl) var(--gap-columns);
  align-items: center;
}

.closing h2 {
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  max-width: 12ch;
}

.closing p {
  margin-top: var(--space-md);
  font-size: var(--text-lead);
  color: var(--color-muted);
  max-width: 36ch;
}

.closing .stores {
  margin-top: var(--space-xl);
}

.closing img.closing__screen {
  width: 100%;
  max-width: 340px;
  justify-self: end;
  border-radius: var(--radius-screen);
  outline: 1px solid var(--color-rule);
  outline-offset: -1px;
}

/* ── Documents: privacy, terms, support ── */

.doc {
  padding-block: var(--space-2xl) 0;
}

.doc__body {
  max-width: var(--measure);
}

.doc h1 {
  font-size: var(--text-section);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}

.doc__updated {
  margin-top: var(--space-sm);
  color: var(--color-muted);
}

.doc__summary {
  margin-top: var(--space-lg);
  font-size: var(--text-lead);
}

.doc h2 {
  margin-top: var(--space-xl);
  font-size: var(--text-xl);
  line-height: 1.25;
}

.doc h2 + p,
.doc h2 + ul {
  margin-top: var(--space-sm);
}

.doc p + p,
.doc p + ul,
.doc ul + p {
  margin-top: var(--space-sm);
}

.doc ul {
  padding-left: var(--space-lg);
}

.doc li + li {
  margin-top: var(--space-xs);
}

.doc__email {
  font-size: var(--text-xl);
  font-weight: 600;
}

.doc .faq__list {
  margin-top: var(--space-md);
}

.doc .faq__list summary {
  font-size: var(--text-lg);
}

/* ── The footer: the wordmark and links over the credits every page carries ── */

.site-footer {
  margin-top: var(--section-gap);
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.footer__mast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  padding: 0;
  list-style: none;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-xs);
  color: var(--color-ink);
}

.footer__credits {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--gap-columns);
  padding-top: var(--space-lg);
  color: var(--color-muted);
}

.footer__credits p + p {
  margin-top: var(--space-2xs);
}

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

/* ── Narrower windows ── */

@media (max-width: 60rem) {
  .hero__head,
  .section__head,
  .faq,
  .pro-alerts,
  .pro-tools,
  .closing {
    grid-template-columns: minmax(0, 1fr);
  }

  .terms-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-alerts__screen {
    max-width: 280px;
  }

  .closing img.closing__screen {
    justify-self: start;
    max-width: 280px;
  }

  .footer__credits {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  /* Each screen beside what it shows, so six screens don't make a phone scroll for ever. */
  .screens {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: var(--space-md);
  }

  .screen > picture,
  .screen > img {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .screen > h3,
  .screen > p {
    grid-column: 2;
  }

  .screen > h3 {
    grid-row: 2;
    margin-top: 0;
  }

  .screen > p {
    grid-row: 3;
  }

  .platforms {
    grid-template-columns: minmax(0, 1fr);
  }

  .line__stations li,
  .trip__stations li {
    font-size: var(--text-sm);
  }

  .site-nav .btn {
    display: none;
  }

  /* The note under the line's name, so Pause shares the name's row. */
  .line__note {
    order: 1;
    flex-basis: 100%;
  }
}