/*
 * Kerb website — one stylesheet for every page.
 *
 * Every value here is copied from the Claude Design boards (project "Kerb", files
 * "Kerb Landing v2 Desktop/Mobile", "Kerb Safe Use Desktop/Mobile", "Kerb Contact/Privacy/Terms
 * Mobile"). Nothing is eyeballed. The boards are inline-styled, so the inline style IS the spec.
 *
 * Layout: the base rules are the MOBILE board (402 pt wide). The `min-width: 768px` blocks are the
 * DESKTOP board. 768 is our breakpoint, not the design's — the design draws two sizes and says
 * nothing about where one becomes the other. The how-it-works grid's 820 px breakpoint IS the
 * design's (it was a JS resize listener there).
 *
 * ⚠ No universal `box-sizing` reset, on purpose: the boards set `box-sizing: border-box` on some
 * elements and not others, and the sticky header is content-box in the design (1180 + padding).
 * A global reset would quietly change those widths.
 */

/* ── Satoshi ───────────────────────────────────────────────────────────── */
/* The design's own .woff2 files, byte-for-byte (verified: header length + brotli stream). Only the
   three weights the pages use are shipped; the design system also declares 300, 400 italic and 900. */
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Page ──────────────────────────────────────────────────────────────── */
/* Motion curves, used by the Motion section at the end of this file. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
html, body { margin: 0; padding: 0; background: #FBFAF8; -webkit-font-smoothing: antialiased; }
/* Components set their own `display`, which would otherwise beat the browser's `hidden` rule. */
[hidden] { display: none !important; }
a { color: #252E4C; text-decoration: none; }

.page {
  min-height: 100vh;
  background: #FBFAF8;
  font-family: Satoshi, -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: column;
}

/* Anchor targets clear the sticky header — the design's smooth-scroll offset is 96 px. */
[id] { scroll-margin-top: 96px; }

/* Keyboard focus only; mouse and touch look exactly as drawn. */
a:focus-visible, button:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The frosted panel — the whole visual identity. */
.glass {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0px 6px 20px rgba(17,24,39,0.06), 0px 1px 3px rgba(17,24,39,0.05);
}

.wordmark { display: block; width: auto; height: 20px; object-fit: contain; flex: none; }

@media (min-width: 768px) {
  .wordmark { height: 22px; }
}

/* ── Header ────────────────────────────────────────────────────────────── */
/*
 * Mobile: the board draws a 56 px solid block for the phone's status bar, then the pill. In a real
 * browser the status bar is the browser's own, so that block becomes a 12 px band (the pill's side
 * inset) plus the safe-area inset. The 60 px blur scrim behind the pill is copied as drawn.
 */
.site-top {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
}
.site-top::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(env(safe-area-inset-top, 0px) + 12px);
  background: #FBFAF8;
}
.site-top__scrim {
  position: absolute;
  left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  height: 60px;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  background-image: linear-gradient(to bottom, rgba(251,250,248,0.90) 0%, rgba(251,250,248,0.74) 52%, rgba(251,250,248,0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0) 100%);
}
.site-header {
  position: relative;
  z-index: 1;
  margin: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  background: rgba(251,250,248,0.62);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border-radius: 999px;
  box-shadow: 0px 9px 22px rgba(17,24,39,0.13), 0px 3px 8px rgba(17,24,39,0.09), 0px 1px 3px rgba(17,24,39,0.08);
}
.site-header__brand { flex: none; display: block; }
.site-nav { display: none; }
.btn-download {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
}
.btn-download:hover { background: #1D4FD7; color: #FFFFFF; }

@media (min-width: 768px) {
  .site-top { padding: 18px 24px 0; }
  .site-top::before, .site-top__scrim { display: none; }
  .site-header {
    max-width: 1180px;
    margin: 0 auto;
    justify-content: flex-start;
    gap: 24px;
    padding: 12px 12px 12px 24px;
  }
  .site-nav {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }
  .site-nav a { font-size: 15px; line-height: 20px; font-weight: 500; color: #252E4C; }
  .btn-download { height: 44px; padding: 0 22px; }
}

/* ── Shared type ───────────────────────────────────────────────────────── */
.section-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #252E4C;
  text-align: center;
}
.overline {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: #6E7076;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #2563EB;
}
.text-link:hover { color: #1D4FD7; }
.text-link svg { width: 16px; height: 16px; flex: none; }

@media (min-width: 768px) {
  .section-title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }
}

.mask-icon {
  flex: none;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
}
.mask-icon--check { mask-image: url(icons/checkmark.circle.svg); -webkit-mask-image: url(icons/checkmark.circle.svg); }
.mask-icon--plus { mask-image: url(icons/plus.svg); -webkit-mask-image: url(icons/plus.svg); }
.mask-icon--minus { mask-image: url(icons/minus.svg); -webkit-mask-image: url(icons/minus.svg); }

.only-desktop { display: none !important; }
@media (min-width: 768px) {
  .only-desktop { display: revert !important; }
  .only-mobile { display: none !important; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 34px;
}
.hero__head {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.hero__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.hero__eyebrow {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #252E4C;
}
.hero__title {
  margin: 0;
  font-size: 53px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #252E4C;
}
.hero__lede {
  margin: 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 25px;
  color: #6E7076;
  text-wrap: pretty;
}
.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 2px;
}
.badge-link { display: inline-block; }
.badge-link:hover { opacity: 0.85; }
.badge-link img { height: 48px; width: auto; display: block; }
.hero__availability {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  color: #6E7076;
}
.hero__availability span:first-child { font-weight: 500; }

/* The CSS-drawn iPhone. */
.hero__device {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 22px;
  margin-bottom: -40px;
  overflow-x: clip;
}
.device { position: relative; width: 252px; max-width: 100%; }
.device__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3px 3px 0;
  border-radius: 44px 44px 0 0;
  background-image: linear-gradient(115deg, #B9BCC1 0%, #F3F4F6 12%, #9DA1A8 27%, #E8E9EB 42%, #8E9299 58%, #F1F2F4 74%, #A5A9AF 88%, #DCDEE1 100%);
  box-shadow: 0px -8px 40px rgba(17,24,39,0.16), 0px 0px 0px 1px rgba(17,24,39,0.08);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,0.84) 81%, rgba(0,0,0,0.55) 88%, rgba(0,0,0,0.25) 94%, rgba(0,0,0,0.08) 97%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,0.84) 81%, rgba(0,0,0,0.55) 88%, rgba(0,0,0,0.25) 94%, rgba(0,0,0,0.08) 97%, rgba(0,0,0,0) 100%);
}
.device__pip {
  position: absolute;
  width: 2px;
  background-image: linear-gradient(180deg, #9EA2A8, #C9CBCF);
}
.device__pip--left { left: -2px; border-radius: 2px 0 0 2px; }
.device__pip--right { right: -2px; border-radius: 0 2px 2px 0; }
.device__pip--1 { top: 70px; height: 20px; }
.device__pip--2 { top: 102px; height: 36px; }
.device__pip--3 { top: 146px; height: 36px; }
.device__pip--4 { top: 122px; height: 56px; }
.device__body {
  position: relative;
  padding: 7px 7px 0;
  border-radius: 41px 41px 0 0;
  background: #08090B;
}
.device__screen {
  position: relative;
  aspect-ratio: 1206 / 1900;
  border-radius: 34px 34px 0 0;
  background: #F4F3EF;
  overflow: hidden;
  display: flex;
}
.device__screen img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (min-width: 768px) {
  .hero {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 56px 24px 0;
    box-sizing: border-box;
    gap: 40px;
  }
  .hero__head { gap: 22px; }
  .hero__text { gap: 22px; }
  .hero__eyebrow { line-height: 16px; }
  .hero__title {
    font-size: clamp(44px, 5vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .hero__title br { display: none; }
  .hero__lede { max-width: 46ch; font-size: 19px; line-height: 30px; }
  .hero__cta { flex-wrap: wrap; gap: 18px; padding-top: 4px; }
  .hero__cta .badge-link img { height: 52px; }
  .hero__availability { font-size: 13px; line-height: 18px; }

  .hero__device { padding-top: 0; margin-bottom: 0; }
  .device { width: 380px; }
  .device__frame {
    padding: 4px 4px 0;
    border-radius: 56px 56px 0 0;
    mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,0.84) 82%, rgba(0,0,0,0.55) 89%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,0.84) 82%, rgba(0,0,0,0.55) 89%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
  }
  .device__pip--1 { top: 92px; height: 26px; }
  .device__pip--2 { top: 134px; height: 46px; }
  .device__pip--3 { top: 192px; height: 46px; }
  .device__pip--4 { top: 160px; height: 72px; }
  .device__body { padding: 9px 9px 0; border-radius: 52px 52px 0 0; }
  .device__screen { border-radius: 44px 44px 0 0; }
}

/* ── How it works ──────────────────────────────────────────────────────── */
.how {
  padding: 52px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.steps { display: flex; flex-direction: column; gap: 14px; }
.step {
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step__head { display: flex; align-items: center; gap: 9px; padding: 6px 6px 0; }
.step__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #252E4C;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  color: #FFFFFF;
}
.step__title {
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.2px;
  font-weight: 700;
  color: #252E4C;
}
/* Mobile: the caption and link are direct children of the card. */
.step__foot { display: contents; }
.step__body {
  margin: 0;
  padding: 0 6px 10px;
  font-size: 14px;
  line-height: 21px;
  color: #6E7076;
  text-wrap: pretty;
}
.step__link { margin: -6px 6px 10px; }
.step__spacer { display: none; }

@media (min-width: 768px) {
  .how {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 72px 24px 40px;
    box-sizing: border-box;
    gap: 36px;
  }
  .steps {
    display: grid;
    grid-template-columns: minmax(0, 400px);
    grid-auto-rows: 1fr;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
  }
  .step {
    justify-self: center;
    width: min(100%, 400px);
    max-width: 100%;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 12px 8px;
  }
  .step__head { padding: 8px 8px 0; }
  .step__title { font-size: 20px; line-height: 26px; }
  .step__foot {
    margin-top: auto;
    padding: 0 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .step__body { padding: 0; min-height: 46px; font-size: 15px; line-height: 23px; }
  .step__link { margin: 0; }
  .step__spacer { display: block; height: 12px; }
}

@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 372px)); }
  .step { justify-self: stretch; width: auto; }
  .step:nth-child(1) { grid-column: 1; grid-row: 1; }
  .step:nth-child(2) { grid-column: 2; grid-row: 1; }
  .step:nth-child(3) { grid-column: 1; grid-row: 2; }
  .step:nth-child(4) { grid-column: 2; grid-row: 2; }
  .step:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; justify-self: center; width: 372px; }
}

/* Step 1 — centre picker */
.mock-picker {
  height: 176px;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 16px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.mock-picker__search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #F4F3EF;
  border-radius: 12px;
  padding: 10px 14px;
}
.mock-picker__search svg { flex: none; }
.mock-picker__query { display: flex; align-items: center; gap: 1px; }
.mock-picker__query span:first-child { font-size: 15px; line-height: 20px; color: #252E4C; font-weight: 500; }
.mock-picker__caret { width: 1.5px; height: 17px; background: #252E4C; border-radius: 1px; }
.mock-picker__rows { display: flex; flex-direction: column; gap: 10px; }
.mock-picker__row { padding: 6px 14px; }
.mock-picker__row span { font-size: 16px; line-height: 21px; font-weight: 700; color: #252E4C; }
.mock-picker__row--selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #E8EBF3;
  border-radius: 14px;
  padding: 12px 14px;
  transform: scale(1.035);
  box-shadow: 0px 12px 26px rgba(17,24,39,0.16), 0px 2px 6px rgba(17,24,39,0.08);
}
.mock-picker__row--selected svg { flex: none; }

@media (min-width: 768px) {
  .mock-picker { height: auto; background: transparent; overflow: visible; }
  .mock-picker__row--selected {
    transform: none;
    box-shadow: 0px 12px 26px rgba(17,24,39,0.14), 0px 2px 6px rgba(17,24,39,0.08);
  }
}

/* Mock wrappers (steps 2–5) */
.mock-wrap { padding: 12px 4px; display: flex; justify-content: center; }
.mock-wrap--sheet { padding: 12px 0 0; }
@media (min-width: 768px) {
  .mock-wrap, .mock-wrap--sheet { padding: 0; }
}

/* Route card — steps 2 and 5 */
.route-card {
  width: 100%;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 10px 10px 0;
  box-sizing: border-box;
  box-shadow: 0px 12px 28px rgba(17,24,39,0.11), 0px 2px 6px rgba(17,24,39,0.07);
}
.route-card--scaled { max-width: 362px; transform: scale(0.98); }
.route-card__media { position: relative; display: flex; }
.route-card__media img {
  width: 100%;
  /* the tag carries width/height so the browser reserves space; this keeps the design's ratio */
  height: auto;
  aspect-ratio: 342 / 196;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}
.route-card__bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0px 2px 6px rgba(17,24,39,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-card__info { padding: 12px 4px 14px; display: flex; flex-direction: column; gap: 10px; }
.route-card__title-row { display: flex; align-items: center; gap: 8px; }
.route-card__name {
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.22px;
  font-weight: 700;
  color: #252E4C;
}
.route-card__status { display: flex; align-items: center; gap: 5px; color: #212B48; }
.route-card__status--done { color: #67686E; }
.route-card__dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.route-card__status span:last-child { font-size: 12px; line-height: 16px; font-weight: 500; }
.route-card__chevron { width: 18.22px; height: 18.22px; margin-left: auto; }
.route-card__meta { display: flex; align-items: center; gap: 14px; color: #67686E; }
.route-card__meta > span { display: flex; align-items: center; gap: 5px; }
.route-card__meta svg { width: 12.39px; height: 12.39px; }
.route-card__meta > span > span { font-size: 12px; line-height: 16px; }

.history-item { width: 100%; max-width: 362px; transform: scale(0.98); }
.history-item__date {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: #67686E;
}
.history-item .route-card { margin-top: 12px; }

@media (min-width: 768px) {
  .route-card { border-radius: 20px; }
  .route-card--scaled { max-width: none; transform: none; }
  .route-card__media img { border-radius: 14px; }
  .route-card__name { font-size: 21px; }
  .route-card__chevron { width: 18px; height: 18px; }
  .route-card__meta { flex-wrap: wrap; }
  .route-card__meta svg { width: 13px; height: 13px; }
  .history-item { max-width: none; transform: none; }
}

/* Step 3 — navigation screenshot */
.mock-nav {
  width: 62%;
  max-width: 200px;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0px 12px 28px rgba(17,24,39,0.11), 0px 2px 6px rgba(17,24,39,0.07);
}
@media (min-width: 768px) {
  .mock-nav { width: 100%; max-width: 148px; border-radius: 16px; }
}

/* Step 4 — notes sheet */
.mock-sheet {
  width: 100%;
  max-width: 390px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 10px 20px 20px;
  box-sizing: border-box;
  box-shadow: 0px -2px 28px rgba(17,24,39,0.10);
}
.mock-sheet__handle { width: 40px; height: 5px; border-radius: 999px; background: #E4E2D9; margin: 0 auto 14px; }
.mock-sheet__title { font-size: 22px; line-height: 28px; font-weight: 700; color: #252E4C; }
.mock-sheet__meta { margin-top: 6px; font-size: 13px; line-height: 18px; color: #67686E; }
.mock-sheet__field {
  position: relative;
  margin-top: 16px;
  height: 118px;
  background: #F4F3EF;
  border-radius: 16px;
  padding: 16px 44px 16px 16px;
  box-sizing: border-box;
}
.mock-sheet__field p { margin: 0; font-size: 16px; line-height: 24px; color: #252E4C; }
.mock-sheet__pencil { position: absolute; top: 14px; right: 14px; width: 19.36px; height: 19.36px; }
.mock-sheet__save {
  margin-top: 20px;
  height: 54px;
  border-radius: 14px;
  background: #2563EB;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .mock-sheet {
    max-width: none;
    border-radius: 20px;
    box-shadow: 0px 12px 28px rgba(17,24,39,0.10), 0px 2px 6px rgba(17,24,39,0.07);
  }
  .mock-sheet__title { font-size: 21px; }
  .mock-sheet__pencil { width: 19px; height: 19px; }
  .mock-sheet__save.only-desktop { display: flex !important; }
}

/* ── Test centre search ────────────────────────────────────────────────── */
.centres { padding: 0 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.search-card {
  border-radius: 22px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F0F1F1;
  border-radius: 14px;
  padding: 14px 16px;
}
.search-field svg { flex: none; }
.search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  /* 16px, not the board's 15px: iOS Safari zooms the page when a field under 16px is tapped.
     Ruled by the author 2026-09-11. Line-height kept at 22px so the field is still 50px tall. */
  font-size: 16px;
  line-height: 22px;
  color: #111827;
}
.search-status { margin: 0; padding: 2px 4px; font-size: 14px; line-height: 21px; color: #6E7076; }
.search-results { display: flex; flex-direction: column; gap: 2px; }
/* NOT DRAWN: the board's no-match state had nowhere to go, because its sample data held "coming
   soon" centres with a Request button. The live list only holds centres with routes, so the no-match
   state carries the request instead. Same link style as the rest of the page. */
.search-none { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.search-none__request { padding: 0 4px; }
.centre-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #FFFFFF;
}
.centre-row--live { background: #E8EBF3; }
.centre-row__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.centre-row__name { font-size: 15px; line-height: 21px; font-weight: 500; color: #111827; }
.centre-row__meta { font-size: 12px; line-height: 17px; color: #6E7076; }
.centre-row__check { width: 24px; height: 24px; background: #2563EB; }
.centre-row__request {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #E8EBF3;
  color: #252E4C;
  font-size: 13px;
  line-height: 17px;
  font-weight: 700;
}
.centre-row__request:hover { background: #DCE1EE; color: #252E4C; }
.centres__note { margin: 0; font-size: 12px; line-height: 17px; color: #6E7076; text-wrap: pretty; }
.centres__rule { height: 1px; background: #E4E2D9; margin: 12px 0 0; }

@media (min-width: 768px) {
  .centres {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px 40px;
    box-sizing: border-box;
    align-items: center;
    gap: 24px;
  }
  .search-card { width: 100%; max-width: 620px; }
  .search-field input { font-size: 16px; line-height: 24px; }
  .search-status { font-size: 15px; line-height: 22px; }
  .centre-row__name { font-size: 16px; line-height: 22px; }
  .centre-row__meta { font-size: 13px; line-height: 18px; }
  .centre-row__request { height: 34px; padding: 0 16px; }
  .centres__note { max-width: 620px; font-size: 13px; line-height: 19px; text-align: center; }
  .centres__rule { display: none; }
}

/* ── FAQs ──────────────────────────────────────────────────────────────── */
.faq { padding: 0 20px 40px; display: flex; flex-direction: column; gap: 24px; }
.faq__groups { display: flex; flex-direction: column; gap: 24px; }
.faq__group { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.faq-item__q { font-size: 16px; line-height: 22px; font-weight: 700; color: #111827; }
/* Plus (grey) and minus (blue) are stacked and cross-fade with a quarter turn, rather than swapping. */
.faq-item__icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq-item__icon .mask-icon {
  position: absolute;
  inset: 0;
  transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out);
}
.faq-item__icon .mask-icon--plus { background: #6E7076; }
.faq-item__icon .mask-icon--minus { background: #2563EB; opacity: 0; transform: rotate(-90deg); }
.faq-item.is-open .mask-icon--plus { opacity: 0; transform: rotate(90deg); }
.faq-item.is-open .mask-icon--minus { opacity: 1; transform: none; }

/* The answer opens by animating a grid row from 0fr to 1fr. While closed, the -10px margin cancels
   the card's 10px gap, so a closed card is exactly the height the board draws. */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -10px;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 340ms var(--ease-in-out),
    margin-top 340ms var(--ease-in-out),
    opacity 180ms ease,
    visibility 0s linear 340ms;
}
.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 380ms var(--ease-out),
    margin-top 380ms var(--ease-out),
    opacity 300ms ease 80ms,
    visibility 0s;
}
/* 4px of padding cancelled by 4px of negative margin: same layout, room for the focus ring. */
.faq-item__panel-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px 4px;
  margin: 0 -4px -4px;
}
.faq-item__panel-inner .text-link { align-self: flex-start; }
.faq-item__a { margin: 0; font-size: 15px; line-height: 23px; color: #6E7076; text-wrap: pretty; }

@media (min-width: 768px) {
  .faq {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px 40px;
    box-sizing: border-box;
    gap: 36px;
  }
  .faq__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 32px;
    align-items: start;
  }
  .faq__group { min-width: 0; gap: 10px; }
  .faq-item { padding: 18px 20px; }
  .faq-item__q { font-size: 17px; line-height: 24px; }
  .faq-item__a { line-height: 24px; }
}

/* ── Download ──────────────────────────────────────────────────────────── */
.download { padding: 0 20px 40px; }
.download__panel {
  border-radius: 22px;
  padding: 30px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
/* Mobile flattens the two desktop columns into one stack, with the plates between the copy and
   the badge — `display: contents` + `order` reproduces that without duplicating any markup. */
.download__copy, .download__cta { display: contents; }
.download__panel .wordmark { order: 1; height: 22px; max-width: 100%; }
.download__title { order: 2; margin: 0; font-size: 32px; line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; color: #252E4C; }
.download__lede { order: 3; margin: 0; font-size: 16px; line-height: 25px; color: #6E7076; }
.plates {
  order: 4;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 176px;
  border-radius: 18px;
  overflow: hidden;
}
.download__cta .badge-link { order: 5; }
.download__note { order: 6; font-size: 12px; line-height: 17px; color: #6E7076; }

.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 100px;
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 48px;
  line-height: 48px;
  font-weight: 700;
}
.plate--l { box-shadow: 0 0 0 3px #E05C4F, 0 8px 20px rgba(17,24,39,0.12); color: #E05C4F; transform: rotate(-4deg); }
.plate--p { box-shadow: 0 0 0 3px #2E8B45, 0 8px 20px rgba(17,24,39,0.12); color: #2E8B45; transform: rotate(4deg); }
.plate-arrow { display: flex; align-items: center; gap: 5px; padding-bottom: 4px; }
.plate-arrow__dash { width: 10px; height: 4px; border-radius: 2px; }
.plate-arrow__dash:nth-child(1) { background: #C9CCD3; }
.plate-arrow__dash:nth-child(2) { background: #B7BBC4; }
.plate-arrow__dash:nth-child(3) { background: #A2A7B2; }
.plate-arrow__dash:nth-child(4) { background: #8A8FA0; }
.plate-arrow__head {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #8A8FA0;
}

@media (min-width: 768px) {
  .download {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px 72px;
    box-sizing: border-box;
  }
  .download__panel {
    border-radius: 28px;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    gap: 40px;
    text-align: left;
  }
  .download__copy { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
  .download__panel .wordmark,
  .download__title,
  .download__lede,
  .plates,
  .download__cta .badge-link,
  .download__note { order: 0; }
  .download__panel .wordmark { height: 26px; align-self: flex-start; }
  .download__title { font-size: clamp(30px, 3vw, 42px); line-height: 1.06; }
  .download__lede { max-width: 40ch; font-size: 17px; line-height: 27px; }
  .download__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 4px; }
  .download__cta .badge-link img { height: 52px; }
  .download__note { font-size: 13px; line-height: 18px; }
  .plates {
    align-self: auto;
    min-width: 0;
    gap: 22px;
    height: auto;
    border-radius: 0;
    overflow: visible;
  }
  .plate { width: 104px; height: 128px; border-radius: 18px; font-size: 62px; line-height: 62px; }
  .plate-arrow__dash { width: 12px; }
  .plate-arrow__head { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 9px; }
}

/* ── Footer — landing (navy) ───────────────────────────────────────────── */
.footer {
  margin: 0;
  margin-top: auto;
  background: #242E4C;
  border-radius: 28px 28px 0 0;
  padding: 40px 20px 56px;
}
.footer__inner { display: flex; flex-direction: column; gap: 30px; }
.footer__top { display: contents; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__brand .wordmark { height: 22px; align-self: flex-start; }
.footer__blurb { margin: 0; font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.62); text-wrap: pretty; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.footer__col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__col .overline { color: rgba(255,255,255,0.62); }
.footer__col a { font-size: 15px; line-height: 21px; color: #FFFFFF; }
.footer__bottom {
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__bottom span { font-size: 12px; line-height: 17px; color: rgba(255,255,255,0.62); text-wrap: pretty; }

@media (min-width: 768px) {
  .footer { padding: 56px 24px 44px; }
  .footer__inner { max-width: 1180px; margin: 0 auto; gap: 40px; }
  .footer__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
  .footer__cols { display: contents; }
  .footer__brand { min-width: 0; }
  .footer__brand .wordmark { height: 24px; }
  .footer__blurb { max-width: 30ch; line-height: 22px; }
  .footer__bottom { padding-top: 24px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
  .footer__bottom span { line-height: 18px; }
}

/* ── Footer — sub-pages (light band) ───────────────────────────────────── */
.subfooter { margin-top: auto; padding: 28px 20px 40px; border-top: 1px solid #E4E2D9; }
.subfooter__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.subfooter__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.subfooter__nav a { font-size: 15px; line-height: 20px; font-weight: 500; color: #3F4147; }
.subfooter__nav a:hover { color: #2563EB; }
.subfooter__copy { font-size: 13px; line-height: 18px; color: #9AA1AD; }

@media (min-width: 768px) {
  .subfooter { padding: 28px 24px 40px; }
  .subfooter__inner { max-width: 900px; margin: 0 auto; gap: 10px; }
  .subfooter__nav { gap: 26px; }
}

/* ── Safe use ──────────────────────────────────────────────────────────── */
.prose { padding: 30px 20px 44px; }
.prose__panel {
  border-radius: 22px;
  padding: 24px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.prose__title { margin: 0; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; font-weight: 700; color: #252E4C; }
.prose__panel p { margin: 0; font-size: 15px; line-height: 24px; color: #6E7076; text-wrap: pretty; }
.prose__panel strong { color: #252E4C; }
/* ⚠ Needed because the global rule is `a { color: #252E4C; text-decoration: none }` — inside body
   copy that is an invisible link. Blue is the site's own action colour (btn-primary, #2563EB). */
.prose__panel a { color: #2563EB; text-decoration: underline; text-underline-offset: 2px; }
.prose__panel a:hover { color: #1D4FD7; }

/* The end-of-policy action. A hairline because at the bottom of a 3,000-word policy an unmarked
   paragraph is not findable — #E4E2D9 is the site's existing hairline (the subfooter's top border). */
.prose__request { border-top: 1px solid #E4E2D9; padding-top: 20px; }

/* The privacy policy (2026-10-08) is the first prose page with structure: section headings, lists
   and one table. Same colours as the paragraphs above; #E4E2D9 is the site's existing hairline. */
.prose__panel h2 { margin: 12px 0 0; font-size: 19px; line-height: 26px; font-weight: 700; color: #252E4C; scroll-margin-top: 96px; }
.prose__panel h3 { margin: 4px 0 0; font-size: 16px; line-height: 24px; font-weight: 700; color: #252E4C; }
.prose__panel ul, .prose__panel ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 24px; color: #6E7076; }
.prose__meta { font-size: 13px !important; line-height: 20px !important; }
.prose__table { overflow-x: auto; }
.prose__table table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 21px; color: #6E7076; }
.prose__table th { text-align: left; color: #252E4C; font-weight: 700; }
.prose__table th, .prose__table td { padding: 10px 12px 10px 0; border-bottom: 1px solid #E4E2D9; vertical-align: top; }

@media (min-width: 768px) {
  .prose {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 64px 24px 72px;
    box-sizing: border-box;
  }
  .prose__panel { border-radius: 28px; padding: 48px 48px 52px; gap: 24px; }
  .prose__title { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
  .prose__panel p { max-width: 68ch; font-size: 17px; line-height: 28px; }
  .prose__panel h2 { font-size: 22px; line-height: 30px; }
  .prose__panel ul, .prose__panel ol { max-width: 68ch; font-size: 17px; line-height: 28px; }
  .prose__table table { font-size: 15px; line-height: 23px; }
}

/* ── Sub-page title (Contact, Privacy, Terms) ──────────────────────────── */
.page-title {
  padding: 30px 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-title h1 { margin: 0; font-size: 40px; line-height: 1.06; letter-spacing: -0.02em; font-weight: 700; color: #252E4C; }

/* The intro under the title (Privacy request only). ⚠ NOT DESIGNED — there is no board with a
   paragraph here, so rather than invent type it borrows the Safe Use panel's body exactly: 15/24
   and 17/28 at 768px, #6E7076, navy <strong>. Nothing new is decided. */
.page-title p {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 24px;
  color: #6E7076;
  text-wrap: pretty;
}
.page-title p + p { margin-top: 10px; }
.page-title p strong { color: #252E4C; font-weight: 700; }

/* ⚠ NOT DESIGNED: Contact, Privacy and Terms exist only as mobile boards. On wide screens they take
   the desktop header and footer from the Safe Use desktop board, its 64 px top spacing, and the
   centre-search card's 620 px width for the form. Every other value is the mobile board's. */
@media (min-width: 768px) {
  .page-title { padding-top: 64px; }
  .page-title p { font-size: 17px; line-height: 28px; margin-top: 18px; }
}

/* ── Contact form ──────────────────────────────────────────────────────── */
.contact { padding: 0 20px 44px; }
@media (min-width: 768px) {
  .contact { max-width: 660px; width: 100%; margin: 0 auto; box-sizing: border-box; }
}
.contact-form {
  border-radius: 22px;
  padding: 20px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field input, .field textarea {
  box-sizing: border-box;
  border: none;
  outline: none;
  border-radius: 14px;
  background: #F0F1F1;
  font-family: inherit;
  /* 16px, not the board's 15px — see the search field above. Heights are unchanged. */
  font-size: 16px;
  color: #111827;
}
.field input { min-height: 48px; padding: 13px 16px; line-height: 22px; }
.field textarea { padding: 14px 16px; line-height: 23px; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: #9AA1AD; }
.contact-form__actions { display: flex; flex-direction: column; gap: 12px; }
.btn-primary {
  min-height: 54px;
  border: none;
  border-radius: 14px;
  background: #2563EB;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover { background: #1D4FD7; }
.btn-primary:disabled { cursor: progress; opacity: 0.72; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #E8EBF3;
}
.form-status .mask-icon { width: 20px; height: 20px; background: #2563EB; }
.form-status__text { font-size: 14px; line-height: 20px; font-weight: 500; color: #252E4C; }
.contact-form__small { margin: 0; font-size: 12px; line-height: 17px; color: #6E7076; text-wrap: pretty; }

/* ══ Motion ═══════════════════════════════════════════════════════════════
 *
 * Added 2026-09-11 at the author's request ("smooth animations and transitions throughout… even if
 * subtle"). This overrides the design handoff's "no scroll animation". Every rule here moves things
 * and never changes where they end up: once an animation finishes, the page is exactly the board.
 *
 * Three rules keep that true:
 *   - Things only move with transform and opacity, which never change layout.
 *   - Entrances use `backwards` fill, not `both`: they hold the start pose during their delay, then
 *     let go entirely, so no leftover transform stays on a finished element.
 *   - Anything that starts hidden is hidden only under `html.motion`. The inline <head> script sets
 *     that flag before first paint, only without reduced motion, and drops it after 3 s if
 *     site.js never ran.
 *   - Reduced motion switches all of it off (bottom of this section).
 */

/* Interaction: colour and press feedback on everything clickable. */
.btn-download, .btn-primary, .centre-row__request {
  transition:
    background-color 220ms var(--ease-out),
    color 220ms var(--ease-out),
    opacity 220ms var(--ease-out),
    transform 180ms var(--ease-out);
}
.btn-download:active, .btn-primary:active:not(:disabled), .centre-row__request:active { transform: scale(0.97); }
.badge-link { transition: opacity 220ms var(--ease-out), transform 180ms var(--ease-out); }
.badge-link:active { transform: scale(0.97); }
.text-link, .site-nav a, .subfooter__nav a, .footer__col a { transition: color 200ms var(--ease-out); }
.text-link svg { transition: transform 260ms var(--ease-out); }
.text-link:hover svg { transform: translateX(3px); }
.faq-item__toggle { -webkit-tap-highlight-color: transparent; }
.faq-item { transition: box-shadow 280ms var(--ease-out); }
@media (hover: hover) {
  /* NOT DRAWN: a slightly deeper shadow on the one kind of card you can click. */
  .faq-item:hover { box-shadow: 0px 10px 28px rgba(17,24,39,0.08), 0px 1px 3px rgba(17,24,39,0.05); }
}

@keyframes kerb-rise {
  from { opacity: 0; transform: translateY(var(--rise, 18px)); }
  to { opacity: 1; transform: none; }
}
@keyframes kerb-fade { from { opacity: 0; } to { opacity: 1; } }

/* Page entrance: the hero rises in, line by line, and the phone follows. */
html.motion .hero__eyebrow,
html.motion .hero__title,
html.motion .hero__lede,
html.motion .hero__cta { animation: kerb-rise 800ms var(--ease-out) backwards; }
html.motion .hero__eyebrow { animation-delay: 60ms; }
html.motion .hero__title { animation-delay: 140ms; }
html.motion .hero__lede { animation-delay: 240ms; }
html.motion .hero__cta { animation-delay: 340ms; }
/* The phone waits for its screenshot, so it rises in complete instead of painting in strips on a
   slow connection. The image's onload marks it ready; site.js stops waiting after 2.5 s. */
html.motion .hero__device:not(.is-ready) { opacity: 0; }
html.motion .hero__device.is-ready { --rise: 56px; animation: kerb-rise 1100ms var(--ease-out) 300ms backwards; }

/* Sub-pages: the title and panel settle in. */
html.motion .prose__panel,
html.motion .page-title h1 { animation: kerb-rise 800ms var(--ease-out) 60ms backwards; }
html.motion .contact-form { animation: kerb-rise 800ms var(--ease-out) 160ms backwards; }

/* Scroll reveals: site.js adds .is-visible as each one arrives, staggered through --reveal-delay. */
html.motion :is(.how .section-title, .step, .centres .section-title, .search-card, .centres__note,
                .faq .section-title, .faq__group, .download__panel, .footer__inner) {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 900ms var(--ease-out) var(--reveal-delay, 0ms);
}
html.motion :is(.how .section-title, .step, .centres .section-title, .search-card, .centres__note,
                .faq .section-title, .faq__group, .download__panel, .footer__inner).is-visible {
  opacity: 1;
  transform: none;
}

/* Centre search: the card eases to its new height, and new rows slide in one after another. */
html.motion .search-card.is-resizing {
  transition:
    height 320ms var(--ease-out),
    opacity 800ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 900ms var(--ease-out) var(--reveal-delay, 0ms);
}
@keyframes kerb-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
html.motion .centre-row.is-entering { animation: kerb-row-in 360ms var(--ease-out) backwards; }
html.motion .search-card .search-status,
html.motion .search-none__request { animation: kerb-fade 260ms ease backwards; }

/* Contact: the result strip rises into place each time it appears. */
html.motion .form-status.is-entering { --rise: 6px; animation: kerb-rise 420ms var(--ease-out) backwards; }

/* The picker mock's caret blinks, as a real one would. */
@keyframes kerb-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
html.motion .mock-picker__caret { animation: kerb-caret 1.1s infinite; }

/* Download: once the panel is in, the L plate turns in, the arrow draws, and the P plate lands. */
@keyframes kerb-plate-l {
  from { opacity: 0; transform: translateY(14px) rotate(-16deg) scale(0.92); }
  to { opacity: 1; transform: rotate(-4deg); }
}
@keyframes kerb-plate-p {
  from { opacity: 0; transform: translateY(14px) rotate(16deg) scale(0.92); }
  to { opacity: 1; transform: rotate(4deg); }
}
html.motion .download__panel:not(.is-visible) .plate,
html.motion .download__panel:not(.is-visible) .plate-arrow > * { opacity: 0; }
html.motion .download__panel.is-visible .plate--l { animation: kerb-plate-l 900ms var(--ease-out) 250ms backwards; }
html.motion .download__panel.is-visible .plate-arrow > * { animation: kerb-fade 320ms ease backwards; }
html.motion .download__panel.is-visible .plate-arrow > :nth-child(1) { animation-delay: 620ms; }
html.motion .download__panel.is-visible .plate-arrow > :nth-child(2) { animation-delay: 700ms; }
html.motion .download__panel.is-visible .plate-arrow > :nth-child(3) { animation-delay: 780ms; }
html.motion .download__panel.is-visible .plate-arrow > :nth-child(4) { animation-delay: 860ms; }
html.motion .download__panel.is-visible .plate-arrow > :nth-child(5) { animation-delay: 940ms; }
html.motion .download__panel.is-visible .plate--p { animation: kerb-plate-p 900ms var(--ease-out) 980ms backwards; }

/* Between pages: a short cross-fade where the browser supports it (Chrome 126+, Safari 18.2+).
   The header is named so it stays put instead of fading with the page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-top { view-transition-name: kerb-header; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
}

/* Printing: a section that was never scrolled to must not print as blank space. */
@media print {
  html.motion :is(.how .section-title, .step, .centres .section-title, .search-card, .centres__note,
                  .faq .section-title, .faq__group, .download__panel, .footer__inner) { opacity: 1 !important; transform: none !important; }
  /* opacity only: the plates keep their ±4° tilt */
  html.motion .download__panel .plate,
  html.motion .download__panel .plate-arrow > * { opacity: 1 !important; }
  html.motion .hero__device { opacity: 1 !important; }
}

/* Reduced motion: nothing moves. (html.motion is never set, so nothing starts hidden either.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}