/*
 * KerbAlert website. One stylesheet for every page.
 *
 * Colour tokens are copied from the app (src/index.css) with the same names
 * and values, so the site and the app read as one product. Light is the
 * default; dark follows the visitor's system setting. Colour only carries
 * meaning here: the severity colours appear in the report categories, and
 * gold only ever marks Guardian, exactly as in the app.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --color-ink: #ffffff;
  --color-surface: #ffffff;
  --color-surface2: #f5f5f5;
  --color-stroke: #e6e6e6;
  --color-paper: #0a0a0a;
  --color-muted: #737373;
  /* Site only: the tint behind alternating sections and the pavement. Muted
     text on it would be #737373 at 4.35:1, so tinted areas swap in
     muted-on2 (5.24:1). In dark mode the app's surface2 (#242424) is too
     heavy for a full-width band, hence a separate token. */
  --color-band: #f5f5f5;
  --color-muted-on2: #666666;
  --color-muted-soft: #8c8c8c;
  --color-signal: #0a0a0a;
  --color-signal-dim: #f5f5f5;
  --color-alert: #f5a524;
  --color-alert-dim: #fef3e0;
  --color-patrol: #0a7a6d;
  --color-patrol-dim: #e3f7f4;
  --color-siren: #c53137;
  --color-siren-dim: #fdeaea;
  --color-on-accent: #ffffff;
  --color-gold: #8a5f0f;
  --color-gold-dim: #fbf1dc;
  --color-severity-ink: #0a0a0a;

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --container: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 64px;
  --radius: 16px;
  --radius-lg: 28px;
  --section-y: clamp(88px, 12vw, 168px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #0a0a0a;
    --color-surface: #161616;
    --color-surface2: #242424;
    --color-band: #121212;
    --color-stroke: #2b2b2b;
    --color-paper: #fafafa;
    --color-muted: #a1a1a1;
    --color-muted-on2: #a1a1a1;
    --color-muted-soft: #6f6f6f;
    --color-signal: #fafafa;
    --color-signal-dim: #242424;
    --color-alert: #ffb224;
    --color-alert-dim: #2e2008;
    --color-patrol: #0ac5b3;
    --color-patrol-dim: #0b2b28;
    --color-siren: #ff6369;
    --color-siren-dim: #341316;
    --color-on-accent: #0a0a0a;
    --color-gold: #e3bd62;
    --color-gold-dim: #2a2110;
  }
}

/* ---------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--color-signal);
  color: var(--color-on-accent);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-signal);
  color: var(--color-on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

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

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

/* ---------------------------------------------------------------- type */

.display {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(2.125rem, 1.3rem + 3.3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--color-muted);
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--color-muted);
}

.muted {
  color: var(--color-muted);
}

/* ---------------------------------------------------------------- brand marks */

/* The logo artwork as a mask, the same technique the app's Wordmark uses,
   so it tints with `color` and flips with the theme instead of shipping two
   files. aspect-ratio matches wordmark-mask.png (1200 x 197). */
.wordmark {
  display: inline-block;
  height: 22px;
  aspect-ratio: 1200 / 197;
  background-color: currentColor;
  -webkit-mask: url("../img/wordmark-mask.png") left center / contain no-repeat;
  mask: url("../img/wordmark-mask.png") left center / contain no-repeat;
}

.car {
  aspect-ratio: 2 / 1;
  background-color: currentColor;
  -webkit-mask: url("../img/car-mask.png") center / contain no-repeat;
  mask: url("../img/car-mask.png") center / contain no-repeat;
}

.app-icon {
  width: 64px;
  height: 64px;
  border-radius: 23%;
  box-shadow: 0 0 0 1px var(--color-stroke);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(0.97);
}
.btn--primary {
  background: var(--color-signal);
  color: var(--color-on-accent);
}
.btn--ghost {
  background: transparent;
  color: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
}
.btn--small {
  min-height: 36px;
  padding: 0 16px;
  font-size: 0.875rem;
}
.btn--large {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1.0625rem;
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-muted-soft);
  transition: text-decoration-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: color-mix(in srgb, var(--color-signal) 84%, var(--color-ink));
  }
  .btn--ghost:hover {
    background: var(--color-signal-dim);
  }
  .text-link:hover {
    text-decoration-color: currentColor;
  }
}

/* ---------------------------------------------------------------- store badges */

/* Official artwork, shown unmodified. The Google Play PNG carries its own
   clear space baked in, so it's drawn larger and pulled in with negative
   margins until its visible badge matches the Apple badge's height. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}
.badge {
  display: block;
  line-height: 0;
}
.badge img {
  height: 48px;
  width: auto;
}
.badge--google img {
  height: 71.4px;
  margin: -11.7px -11.4px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--color-ink) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 200ms ease;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-stroke);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-paper);
}
.site-nav {
  display: none;
}
.site-nav ul {
  display: flex;
  gap: 4px;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.site-nav a[aria-current="page"] {
  color: var(--color-paper);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: var(--color-paper);
  }
}
@media (min-width: 900px) {
  .site-nav {
    display: block;
  }
}

/* ---------------------------------------------------------------- sections */

.section {
  padding-block: var(--section-y);
}
.section--tint {
  background: var(--color-band);
  --color-muted: var(--color-muted-on2);
}
.section__head {
  max-width: 780px;
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head .lede {
  margin-top: 20px;
}
.section__head .eyebrow {
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-top: clamp(40px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
.hero__copy {
  max-width: 1120px;
  margin-inline: auto;
  text-align: center;
}
.hero__title .line {
  display: block;
}
.hero__lede {
  max-width: 600px;
  margin: 24px auto 0;
}
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
}

/* The stage: a phone standing on the pavement, a car parked at the kerb in
   front of it. The phone rises from behind the kerb, so the street clips its
   bottom edge. The car gets a thin cut-out outline in the page colour so it
   reads as a separate shape where it overlaps the (equally dark) phone. */
.hero {
  --phone-w: clamp(260px, 29vw, 330px);
  --car-w: clamp(210px, 27vw, 370px);
  --car-overlap: 150px;
  --kerb-h: 38px;
  --road-h: 26px;
}
.hero__stage {
  position: relative;
  /* Phone height: bezel (2 x 3.2%) plus a 390:844 screen in the rest. */
  height: calc(var(--phone-w) * 2.09 - 40px);
  margin-top: clamp(48px, 7vw, 80px);
}
.hero__phone {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: var(--phone-w);
  translate: -50% 0;
  z-index: 1;
}
.hero__car {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--road-h) * 0.35 - var(--car-w) * 0.085);
  width: var(--car-w);
  translate: calc(-100% - var(--phone-w) / 2 + var(--car-overlap)) 0;
  color: var(--color-paper);
  filter:
    drop-shadow(3px 0 0 var(--color-ink))
    drop-shadow(-3px 0 0 var(--color-ink))
    drop-shadow(0 -3px 0 var(--color-ink));
}
@media (min-width: 700px) {
  .hero {
    --car-overlap: 84px;
  }
}

/* Pavement + kerb + road, drawn in CSS. The pavement sits behind the car
   and in front of the phone's lower half. */
.street {
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--kerb-h) + var(--road-h));
  z-index: 2;
}
.street__pavement {
  position: absolute;
  inset: 0 0 var(--road-h);
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, var(--color-stroke) 118px 120px),
    var(--color-band);
  box-shadow: inset 0 1px 0 var(--color-stroke);
}
.street__kerb {
  position: absolute;
  inset: auto 0 var(--road-h);
  height: 10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, var(--color-stroke) 58px 60px),
    color-mix(in srgb, var(--color-band) 55%, var(--color-stroke));
}
.street__road {
  position: absolute;
  inset: auto 0 0;
  height: var(--road-h);
  background: var(--color-ink);
  box-shadow: inset 0 1px 0 var(--color-stroke);
}


/* ---------------------------------------------------------------- phone frame */

/* A generic modern phone drawn in CSS: no device artwork to license. The
   screen itself is exactly 390 x 844 points (an iPhone's shape), with the
   bezel added around it, so screenshots taken at that size fill it with
   nothing cropped off the sides. */
.phone {
  position: relative;
  padding: 3.2%;
  border-radius: 15.5% / 7.2%;
  background: #1b1b1c;
  box-shadow:
    inset 0 0 0 1.5px #3a3a3c,
    inset 0 0 0 5px #0c0c0d,
    0 1px 1px rgb(0 0 0 / 0.08),
    0 24px 48px -28px rgb(0 0 0 / 0.4),
    0 48px 96px -56px rgb(0 0 0 / 0.3);
}
/* On a dark page a near-black phone disappears, so the frame gets a lit
   metal edge instead of a drop shadow (which can't show on black). */
@media (prefers-color-scheme: dark) {
  .phone {
    background: #232325;
    box-shadow:
      inset 0 0 0 1.5px #4a4a4e,
      inset 0 0 0 5px #0c0c0d,
      0 0 0 1px rgb(255 255 255 / 0.06),
      0 30px 80px -30px rgb(0 0 0 / 0.9);
  }
}

.phone__screen {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 12.4% / 5.8%;
  background: var(--color-ink);
  isolation: isolate;
}
.phone__island {
  position: absolute;
  z-index: 5;
  top: 1.35%;
  left: 50%;
  width: 31%;
  height: 3.6%;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
.phone__status {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.6%;
  padding: 0 8% 0 11%;
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-paper);
  background: var(--color-ink);
}
.phone__status svg {
  height: 0.95em;
  width: auto;
}
.phone__status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.phone__shot {
  position: absolute;
  inset: 5.6% 0 0;
}
.phone__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ---------------------------------------------------------------- lock screen */

/* Sits on .phone__screen itself, which already has the screen's shape and
   is the positioning box for everything inside; making this absolute
   would take it out of the phone's layout and collapse the phone. */
.lock {
  color: #fff;
  background: #111;
}
.lock__wallpaper {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(8 8 8 / 0.35) 0%, rgb(8 8 8 / 0.1) 38%, rgb(8 8 8 / 0.7) 100%),
    url("../img/lockscreen-map.jpg") center / cover no-repeat;
}
.lock .phone__status {
  color: #fff;
  background: transparent;
}
.lock__clock {
  position: relative;
  padding-top: 17%;
  text-align: center;
}
.lock__date {
  font-size: clamp(13px, 1.25vw, 15.5px);
  font-weight: 600;
  opacity: 0.92;
}
.lock__time {
  font-size: clamp(60px, 7vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 2px;
}
.lock__alerts {
  --note-h: clamp(62px, 6.6vw, 74px);
  --note-gap: 8px;
  position: absolute;
  inset: 31% 4.5% auto;
  height: calc(var(--note-h) * 3 + var(--note-gap) * 2);
}
.note {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--note-h);
  padding: 0 12px 0 10px;
  border-radius: 20px;
  color: #0a0a0a;
  background: rgb(250 250 250 / 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5);
  transform: translateY(calc(var(--i, 0) * (var(--note-h) + var(--note-gap)))) scale(var(--s, 1));
  opacity: var(--o, 1);
  transform-origin: 50% 0;
  transition:
    transform 560ms var(--ease-drawer),
    opacity 420ms var(--ease-out);
}
.note.is-entering {
  --o: 0;
  transform: translateY(-18px) scale(0.96);
  transition: none;
}
.note.is-leaving {
  --o: 0;
  --s: 0.94;
}
.note__icon {
  flex: none;
  width: clamp(30px, 3.1vw, 36px);
  height: clamp(30px, 3.1vw, 36px);
  border-radius: 23%;
}
.note__body {
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}
.note__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: clamp(11.5px, 1.1vw, 13.5px);
}
.note__app {
  font-weight: 700;
}
.note__time {
  color: rgb(0 0 0 / 0.62);
  white-space: nowrap;
}
.note__text {
  margin-top: 1px;
  font-size: clamp(11.5px, 1.1vw, 13.5px);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ---------------------------------------------------------------- how it works */

.steps {
  display: grid;
  gap: clamp(64px, 8vw, 48px);
  margin-top: clamp(56px, 8vw, 96px);
  padding: 0;
  list-style: none;
}
.step {
  display: grid;
  justify-items: center;
  text-align: center;
}
.step .phone {
  width: min(280px, 72vw);
}
.step__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 36px;
  border-radius: 50%;
  background: var(--color-signal);
  color: var(--color-on-accent);
  font-size: 0.9375rem;
  font-weight: 700;
}
.step .h3 {
  margin-top: 14px;
}
.step p {
  max-width: 330px;
  margin-top: 8px;
  color: var(--color-muted);
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* ---------------------------------------------------------------- categories */

.cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 0;
  list-style: none;
}
.cat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
}
.cat__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.cat__icon svg {
  width: 22px;
  height: 22px;
}
.cat__name {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pill {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}
.sev-urgent .cat__icon,
.pill--urgent {
  background: var(--color-siren-dim);
  color: var(--color-siren);
}
.sev-high .cat__icon {
  background: var(--color-alert-dim);
  color: var(--color-paper);
}
.pill--high {
  background: var(--color-alert);
  color: var(--color-severity-ink);
}
.sev-medium .cat__icon,
.pill--medium {
  background: var(--color-patrol-dim);
  color: var(--color-patrol);
}
.sev-low .cat__icon {
  background: var(--color-signal-dim);
  color: var(--color-paper);
}
.pill--low {
  background: var(--color-muted-soft);
  color: var(--color-paper);
}
@media (min-width: 900px) {
  .cats {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .cat {
    padding: 24px;
  }
}

/* ---------------------------------------------------------------- feature rows */

.feature {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}
.feature__media {
  display: flex;
  justify-content: center;
}
.feature__media .phone {
  width: min(320px, 78vw);
}
.feature__copy .h2 {
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.125rem);
}
.feature__copy .lede {
  margin-top: 20px;
}
.checks {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}
.checks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
}
.checks svg {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--color-patrol);
}
@media (min-width: 900px) {
  .feature {
    grid-template-columns: 1fr 1fr;
  }
  .feature--flip .feature__media {
    order: 2;
  }
}

/* ---------------------------------------------------------------- privacy */

.promises {
  display: grid;
  gap: 1px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 0;
  list-style: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-stroke);
  box-shadow: 0 0 0 1px var(--color-stroke);
}
.promise {
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-surface);
}
.promise svg {
  width: 26px;
  height: 26px;
  color: var(--color-paper);
}
.promise .h3 {
  margin-top: 20px;
}
.promise p {
  margin-top: 8px;
  color: var(--color-muted);
}
@media (min-width: 700px) {
  .promises {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .promises {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------- guardian */

.guardian {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  padding: clamp(32px, 6vw, 80px);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--color-gold-dim);
  overflow: hidden;
}
.guardian__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tag-guardian {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--color-gold);
  color: var(--color-gold-dim);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.tag-soon {
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-gold) 45%, transparent);
  color: var(--color-gold);
  font-size: 0.8125rem;
  font-weight: 700;
}
.guardian .h2 {
  margin-top: 20px;
}
.guardian .lede {
  margin-top: 20px;
  color: var(--color-paper);
  opacity: 0.8;
}
.guardian .checks svg {
  color: var(--color-gold);
}
.guardian__media {
  display: flex;
  justify-content: center;
}
.guardian__media .phone {
  width: min(300px, 74vw);
}
@media (min-width: 900px) {
  .guardian {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .guardian__media {
    margin-bottom: calc(clamp(32px, 6vw, 80px) * -1 - 120px);
    align-self: end;
  }
}

/* ---------------------------------------------------------------- faq */

.faq {
  max-width: 820px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-top: 1px solid var(--color-stroke);
}
.faq details {
  border-bottom: 1px solid var(--color-stroke);
  interpolate-size: allow-keywords;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 18px 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-muted);
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary svg {
  transform: rotate(45deg);
}
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 260ms var(--ease-out),
    content-visibility 260ms allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
}
.faq__answer {
  padding: 0 48px 24px 0;
  color: var(--color-muted);
}
.faq__answer a {
  color: var(--color-paper);
}
.faq__more {
  margin-top: 32px;
  text-align: center;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------- download */

.download {
  text-align: center;
}
.download .app-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 32px;
}
.download .lede {
  max-width: 560px;
  margin: 20px auto 0;
}
.download .badges {
  justify-content: center;
  margin-top: 36px;
}

/* ---------------------------------------------------------------- emergency note */

.emergency-wrap {
  padding-bottom: clamp(48px, 7vw, 80px);
}
.emergency {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 820px;
  margin-inline: auto;
  padding: 20px 24px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
  font-size: 0.9375rem;
  color: var(--color-muted);
}
.emergency svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-paper);
}
.emergency strong {
  color: var(--color-paper);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding: 72px 0 40px;
  border-top: 1px solid var(--color-stroke);
  font-size: 0.9375rem;
}
.site-footer__top {
  display: grid;
  gap: 40px;
}
.site-footer__brand p {
  margin-top: 12px;
  color: var(--color-muted);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
}
.site-footer h2 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-paper);
}
.site-footer ul {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer li a:hover {
    color: var(--color-paper);
  }
}
.site-footer__legal {
  display: grid;
  gap: 10px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-stroke);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-muted);
}
@media (min-width: 900px) {
  .site-footer__top {
    grid-template-columns: 1.2fr 2fr;
  }
  .site-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------- long-form pages */

.page-head {
  padding-block: clamp(48px, 8vw, 104px) clamp(32px, 5vw, 56px);
}
.page-head .h2 {
  max-width: 820px;
}
.page-head .lede {
  max-width: 680px;
  margin-top: 16px;
}
.page-meta {
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.doc {
  display: grid;
  gap: 48px;
  padding-bottom: var(--section-y);
}
.toc {
  align-self: start;
  font-size: 0.9375rem;
}
.toc h2 {
  font-size: 0.875rem;
  font-weight: 700;
}
.toc ol {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.toc a {
  display: block;
  padding: 5px 0;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .toc a:hover {
    color: var(--color-paper);
  }
}
@media (min-width: 1000px) {
  .doc {
    grid-template-columns: 240px minmax(0, 720px);
    gap: 80px;
  }
  .toc {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.prose {
  max-width: 720px;
}
.prose > * + * {
  margin-top: 1em;
}
.prose h2 {
  margin-top: 2.4em;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  margin-top: 1.8em;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.45em;
}
.prose a {
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.prose th,
.prose td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--color-stroke);
  text-align: left;
  vertical-align: top;
}
.prose th {
  font-weight: 700;
}
.table-scroll {
  overflow-x: auto;
}
.callout {
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--color-band);
  --color-muted: var(--color-muted-on2);
}
.callout > * + * {
  margin-top: 0.6em;
}

/* A fact only the owner can supply. Loud on purpose so none ship unfilled. */
mark.fill {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--color-alert-dim);
  color: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-alert);
}

/* ---------------------------------------------------------------- support cards */

.help-grid {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(56px, 7vw, 88px);
}
.help-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--color-stroke);
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.help-card:active {
  transform: scale(0.985);
}
.help-card svg {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
}
.help-card p {
  color: var(--color-muted);
}
@media (hover: hover) and (pointer: fine) {
  .help-card:hover {
    box-shadow: inset 0 0 0 1px var(--color-muted-soft);
  }
}
@media (min-width: 800px) {
  .help-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps-list {
  counter-reset: s;
  padding: 0 !important;
  list-style: none;
}
.steps-list li {
  position: relative;
  padding-left: 44px;
  counter-increment: s;
}
.steps-list li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-signal);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- 404 */

.lost {
  display: grid;
  justify-items: center;
  padding-block: clamp(72px, 12vw, 160px);
  text-align: center;
}
.lost .car {
  width: 200px;
  color: var(--color-paper);
  opacity: 0.12;
}
.lost .h2 {
  margin-top: 32px;
}
.lost .lede {
  max-width: 460px;
  margin-top: 16px;
}
.lost .btn {
  margin-top: 32px;
}

/* ---------------------------------------------------------------- motion */

/* One orchestrated entrance, first paint only. Everything else is a quiet
   fade-up as it scrolls into view, once. Keyframes are fine here: none of
   this is interactive, so nothing needs to be interrupted mid-flight. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
}
@keyframes phone-rise {
  from {
    opacity: 0;
    transform: translateY(90px);
  }
}
@keyframes park {
  from {
    opacity: 0;
    transform: translateX(-140px);
  }
}

.js .hero__title .line,
.js .hero__lede,
.js .hero__cta {
  animation: rise 900ms var(--ease-out) both;
}
.js .hero__title .line:nth-child(2) {
  animation-delay: 90ms;
}
.js .hero__lede {
  animation-delay: 200ms;
}
.js .hero__cta {
  animation-delay: 300ms;
}
.js .hero__phone .phone {
  animation: phone-rise 1100ms var(--ease-drawer) 380ms both;
}
.js .hero__car > .car {
  animation: park 1300ms var(--ease-out) 650ms both;
}

/* Sections are visible at rest and only play their fade-up as they come
   into view, so nothing is ever hidden waiting on a script: search engines,
   link previews and screenshots all see the whole page. */
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.js .reveal.is-in {
  animation: reveal-in 800ms var(--ease-out) backwards;
}
.js .reveal.is-in[data-delay="1"] {
  animation-delay: 70ms;
}
.js .reveal.is-in[data-delay="2"] {
  animation-delay: 140ms;
}
.js .reveal.is-in[data-delay="3"] {
  animation-delay: 210ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .hero__title .line,
  .js .hero__lede,
  .js .hero__cta,
  .js .hero__phone .phone,
  .js .hero__car > .car {
    animation: fade 400ms ease both;
  }
  .js .reveal.is-in {
    animation: fade 400ms ease backwards;
  }
  .note {
    transition: opacity 300ms ease;
  }
  .note.is-entering {
    transform: translateY(calc(var(--i, 0) * (var(--note-h) + var(--note-gap))));
  }
  .faq details::details-content {
    transition: none;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--color-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .note {
    background: rgb(246 246 246);
  }
}