/* ============================================================================
   License Plate Spotter — website styles (shared by every page)
   ============================================================================

   The whole site borrows from a real license plate: reflective plate-white
   stock, embossed numerals in deep emerald ink, a stamped border, and rivet
   holes. Amber is reserved for ONE meaning: "the number you're looking for"
   (the highlighted digits on an example plate, the hero counter's glow).

   Type: Big Shoulders Display (plate numerals, headlines) and Overpass for
   body text. Overpass is derived from Highway Gothic, the lettering on US
   road signs, which is where plate-spotters spend their time.

   One bold element per page: on the homepage, that's the big plate whose
   number counts 000 → 999 as you scroll (see the script in index.html).
   Everything else stays quiet.

   Hosting: plain static files, uploaded by FTP to
   plate.net/license-plate-spotter/. No build step. Fonts come from Google
   Fonts; everything else is local.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --page: #f4f7f3;          /* plate stock: a white with a faint green cast */
  --panel: #ffffff;
  --road: #17221e;          /* asphalt, used for the "global" band */
  --road-2: #22302b;

  /* Ink */
  --ink: #0b3b2e;           /* deep emerald: headings, plate numerals */
  --text: #26332f;
  --muted: #56675f;
  --line: #d6e0da;

  /* Brand (from the app) */
  --emerald: #10b981;
  --emerald-deep: #047857;
  --teal: #14b8a6;
  --amber: #f59e0b;         /* "your number" — use sparingly */

  /* Plate object (stays light in dark mode: real plates are reflective) */
  --plate-face: #fbfcfa;
  --plate-face-2: #e9efea;
  --plate-ink: #0b3b2e;

  --radius-plate: 18px;
  --maxw: 1120px;
  --gutter: clamp(16px, 4vw, 40px);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Overpass", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #121b18;
    --panel: #1a2622;
    --road: #0d1512;
    --road-2: #1a2622;
    --ink: #d9f5e9;
    --text: #d3ddd8;
    --muted: #9fb2aa;
    --line: #2c3b35;
    --emerald-deep: #34d399;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
}

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

a { color: var(--emerald-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(3rem, 8vw, 5.75rem); font-weight: 900; }
h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; }
h3 { font-size: 1.75rem; font-weight: 800; }

p { margin: 0 0 1em; max-width: 62ch; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--page); padding: 8px 14px; border-radius: 8px;
}
.skip:focus { top: 8px; }

/* ----------------------------------------------------------------------------
   HEADER
   The progress rail along its bottom edge fills 0 → 100% as the page scrolls
   (homepage only; other pages leave it at 0 and it's invisible).
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.35rem;
  margin-right: auto;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }

.nav { display: flex; gap: 22px; }
.nav a {
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.95rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 760px) { .nav { display: none; } }

/* Mini plate in the header: shows the same scroll counter as the hero plate. */
.mini-plate {
  font: 900 1.2rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--plate-ink);
  background: linear-gradient(var(--plate-face), var(--plate-face-2));
  border: 2px solid var(--plate-ink);
  border-radius: 6px;
  padding: 5px 10px 4px;
  letter-spacing: 0.08em;
  min-width: 4.2em; text-align: center;
}

.rail {
  position: absolute; left: 0; bottom: -1px; height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--emerald), var(--teal));
}

/* ----------------------------------------------------------------------------
   THE PLATE (the signature object)
   A US-proportion plate (2:1). Four rivet holes are drawn with radial
   gradients so no extra markup is needed. The numerals are "embossed" with a
   light top edge and a dark lower edge.
   ------------------------------------------------------------------------- */
.plate {
  position: relative;
  aspect-ratio: 2 / 1;
  width: 100%;
  border-radius: var(--radius-plate);
  background:
    radial-gradient(circle at 12% 14%, #9aa8a1 0 5px, transparent 6px),
    radial-gradient(circle at 88% 14%, #9aa8a1 0 5px, transparent 6px),
    radial-gradient(circle at 12% 86%, #9aa8a1 0 5px, transparent 6px),
    radial-gradient(circle at 88% 86%, #9aa8a1 0 5px, transparent 6px),
    linear-gradient(160deg, var(--plate-face) 0%, var(--plate-face-2) 100%);
  border: 3px solid var(--plate-ink);
  box-shadow:
    inset 0 0 0 7px var(--plate-face),
    inset 0 0 0 9px var(--plate-ink),
    0 30px 60px -30px rgba(4, 47, 36, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.6);
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: 7% 8% 6%;
  color: var(--plate-ink);
  container-type: inline-size;
}
.plate-top, .plate-bottom {
  font: 800 italic clamp(0.8rem, 6cqi, 1.6rem)/1 var(--display);
  letter-spacing: 0.04em;
  color: var(--emerald-deep);
}
@media (prefers-color-scheme: dark) {
  .plate-top, .plate-bottom { color: #047857; }
}
.plate-number {
  font: 900 34cqi/0.9 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 rgba(4, 47, 36, 0.35),
    0 10px 18px rgba(4, 47, 36, 0.18);
}

/* Small inline plates used for examples ("8KJ 347", etc.). */
.chip-plate {
  display: inline-flex; align-items: center; justify-content: center;
  font: 900 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display);
  letter-spacing: 0.1em;
  color: var(--plate-ink);
  background: linear-gradient(160deg, var(--plate-face), var(--plate-face-2));
  border: 2px solid var(--plate-ink);
  box-shadow: inset 0 0 0 4px var(--plate-face), inset 0 0 0 5px var(--plate-ink);
  border-radius: 10px;
  padding: 0.35em 0.6em 0.3em;
  white-space: nowrap;
}
.chip-plate mark {
  background: none;
  color: var(--plate-ink);
  box-shadow: inset 0 -0.32em 0 rgba(245, 158, 11, 0.55);
  padding: 0 0.04em;
}

/* ----------------------------------------------------------------------------
   PHONE FRAME for the real app screenshots
   ------------------------------------------------------------------------- */
/* The screenshot is never cropped: the image keeps its own 1290×2796 shape
   and sets the phone's height; the bezel is padding AROUND it.
   Corner radii follow a real iPhone 16 Pro Max: the display's corners are
   ~12.8% of its width. Percent radii are "horizontal / vertical" (each a
   percent of that side), so a circular corner needs both values:
   12.8% of width / (12.8% × 1290/2796 ≈ 5.9%) of height. The bezel's outer
   radius is the display radius plus the bezel thickness. */
.phone {
  width: min(300px, 78vw);
  padding: 9px;
  border-radius: 15.5% / 7.3%;
  background: #1b2622;
  box-shadow: 0 40px 70px -35px rgba(4, 47, 36, 0.6);
  flex: none;
  align-self: center;   /* never stretch taller than the screenshot */
  height: fit-content;
}
.phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 1290 / 2796;
  border-radius: 12.8% / 5.9%;
}

/* ----------------------------------------------------------------------------
   STORE BADGES
   ------------------------------------------------------------------------- */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.badges a { display: block; line-height: 0; border-radius: 10px; }
.badges .apple img { height: 52px; width: auto; }
/* Google's badge PNG has built-in padding; scale it so the artwork matches. */
.badges .google img { height: 76px; width: auto; margin: -12px -10px; }

/* ----------------------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------------------- */
section { padding: clamp(64px, 10vw, 120px) 0; }

.lede { font-size: 1.25rem; color: var(--muted); }

/* HERO */
.hero { padding-top: clamp(40px, 7vw, 88px); }
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.hero h1 { max-width: 12ch; }
.hero .lede { margin-bottom: 1.6em; }
.hero-plate { position: relative; }
.hero-plate .plate { transform: rotate(-3deg); }
.hero-note {
  margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 0.95rem;
  max-width: none;
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  /* 92% leaves room for the plate's tilt so its corner isn't clipped. */
  .hero-plate { order: -1; max-width: 520px; width: 92%; margin: 8px auto 0; }
  .hero h1 { max-width: 12ch; }
}

/* HOW IT WORKS — a real sequence, so the steps are numbered 001, 002, 003
   like the numbers you hunt. */
.steps {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  counter-reset: none;
}
.steps li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px 28px;
}
.step-no {
  font: 900 1rem/1 var(--display);
  letter-spacing: 0.12em;
  color: var(--emerald-deep);
  display: block; margin-bottom: 14px;
}
.steps .chip-plate { margin: 4px 0 18px; }
.steps p { color: var(--muted); margin: 0; }
/* Step 2 shows the app's real green button, not a plate. */
.found-btn {
  display: inline-flex; align-items: center;
  margin: 4px 0 18px;
  font: 700 clamp(1.3rem, 2.6vw, 1.6rem)/1 var(--body);
  color: #fff; background: var(--emerald);
  border-radius: 12px; padding: 0.7em 1.4em;
  box-shadow: 0 10px 20px -12px rgba(4, 120, 87, 0.8);
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* The "any three in a row" rule, illustrated with the app's How to Play art. */
.rule { margin-top: 48px; }
.rule p { color: var(--muted); font-size: 1.15rem; }
.rule-plates {
  display: grid; grid-template-columns: repeat(2, minmax(0, 400px));
  gap: clamp(8px, 3vw, 32px);
  margin-top: 8px;
}
.rule-plates img { width: 100%; }
@media (max-width: 760px) {
  .rule-plates { grid-template-columns: minmax(0, 360px); justify-content: center; }
}

/* WATCH — the app preview video beside a short caption. The video already
   has its own branded background and phone frame baked in, so it just gets
   rounded corners and the same drop shadow as the .phone screenshots.
   Its 9:16 shape comes from aspect-ratio, so the space is reserved before the
   poster loads (no layout jump). */
.watch .wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 7vw, 96px);
  align-items: center;
}
.video-frame {
  width: min(300px, 78vw);
  border-radius: 22px;
  overflow: hidden;           /* clips the video's square corners */
  background: #1b2622;
  box-shadow: 0 40px 70px -35px rgba(4, 47, 36, 0.6);
  line-height: 0;             /* no gap under the inline <video> */
}
.video-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  display: block;
}
@media (max-width: 760px) {
  .watch .wrap { grid-template-columns: 1fr; justify-items: center; }
  .watch .wrap > div:last-child { width: 100%; }
}

/* FEATURE ROWS — screenshot beside a short caption, alternating sides. */
.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 7vw, 96px);
  align-items: center;
  padding: 36px 0;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature:nth-of-type(even) { grid-template-columns: 1fr auto; }
.feature:nth-of-type(even) .phone { order: 2; }
.feature h3 { font-size: clamp(2rem, 4vw, 2.75rem); }
.feature p { color: var(--muted); font-size: 1.2rem; }
.feature .phone { width: min(260px, 72vw); }
@media (max-width: 760px) {
  .feature, .feature:nth-of-type(even) { grid-template-columns: 1fr; justify-items: center; }
  .feature:nth-of-type(even) .phone { order: 0; }
  .feature > div { width: 100%; }
}

/* GLOBAL — the one dark band: the road at night. */
.global {
  background: var(--road);
  color: #cfe0d8;
}
.global h2, .global h3 { color: #f1fbf6; }
.global .lede, .global p { color: #a9bdb4; }
.global a { color: #6ee7b7; }
.global .wrap {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 7vw, 96px);
  align-items: center;
}
.global ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.global li { padding-left: 22px; position: relative; max-width: 58ch; }
.global li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--emerald);
}
.global li strong { color: #f1fbf6; }
.supporter-tag {
  display: inline-block; font-size: 0.8rem; font-weight: 700;
  color: #1b1300; background: var(--amber);
  border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: 2px;
}
.global .phone { background: #2a3a34; }
@media (max-width: 860px) {
  .global .wrap { grid-template-columns: 1fr; justify-items: center; }
  .global .wrap > div { width: 100%; }
}

/* STORY — ends on the 999 plate. */
.story .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 96px);
  align-items: center;
}
.story .plate { max-width: 460px; transform: rotate(2deg); }
.story .plate-number { color: var(--plate-ink); }
@media (max-width: 860px) {
  .story .wrap { grid-template-columns: 1fr; }
  .story .plate { margin: 0 auto; }
}

/* FAQ */
.faq-list { margin-top: 36px; border-top: 1px solid var(--line); max-width: 780px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0; position: relative;
  font: 800 1.45rem/1.2 var(--display); color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 6px; top: 16px;
  font: 700 1.6rem/1 var(--body); color: var(--emerald-deep);
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > div { padding: 0 0 22px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }

/* FINAL CTA */
.cta {
  text-align: center;
  background:
    linear-gradient(160deg, var(--emerald) 0%, var(--teal) 100%);
  color: #f0fdf8;
}
.cta h2 { color: #fff; }
.cta p { color: #e6fbf3; margin-left: auto; margin-right: auto; }
.cta .badges { justify-content: center; margin-top: 28px; }

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 48px;
  color: var(--muted);
  font-size: 0.95rem;
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-right: auto; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

/* ----------------------------------------------------------------------------
   DOCUMENT PAGES (support, privacy, data deletion)
   Long-form text: one readable column, generous line height.
   ------------------------------------------------------------------------- */
.doc { padding: clamp(40px, 7vw, 80px) 0 clamp(64px, 9vw, 110px); }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: clamp(2.75rem, 7vw, 4.25rem); }
.doc h2 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin-top: 1.6em; }
.doc h3 { font-size: 1.45rem; margin-top: 1.4em; }
.doc p, .doc li { max-width: 68ch; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 0.4em; }
.doc .updated { color: var(--muted); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.callout {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--emerald);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 1.4em 0;
}
.callout.warn { border-left-color: var(--amber); }
.callout p:last-child { margin-bottom: 0; }