/* IdScanner — one stylesheet for every page on the site.

   Structure follows the Slumbi site (same author, same hosting shape): one
   hand-written HTML file per page, CSS lifted out so nine copies cannot drift.
   The palette does NOT follow it. Every colour below is taken from the app's
   own design system (IdScanner/UI/DesignSystem/Tokens+Color.swift) so the site
   and the product are visibly the same object — in particular the verdict
   colours, which are the app's whole identity and must not be re-invented in
   marketing. See Docs/Redesign.md §4.1–4.2 for why each one is what it is. */

:root{
  /* Chrome — Palette.base / .raised / .sunken, "Day" variants. */
  --ink:#0A0F1F; --ink-2:#3d4761; --muted:#69738c;
  --brand:#1D6BFF; --night:#080B14; --night-2:#121826;
  /* Verdict colours, "Day" variants. Used as accents, never decoratively. */
  --pass:#067647; --pass-bright:#32D583;
  --underage:#D92D20; --expired:#B54708; --check:#444CE7;
  --surface:#F4F6FA; --surface-2:#E9EDF5; --card:#ffffff;
  --line:rgba(10,15,31,.12);
  --shadow:0 1px 2px rgba(10,15,31,.06),0 12px 32px rgba(10,15,31,.08);
  --radius:18px; --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    /* "Night" variants — the theme the app ships in at a door. */
    --ink:#F7F9FC; --ink-2:#b5bdcf; --muted:#8a93a8;
    --brand:#4C8DFF;
    --pass:#0C6B3F; --pass-bright:#32D583;
    --underage:#F97066; --expired:#FDB022; --check:#8098F9;
    --surface:#080B14; --surface-2:#0d1220; --card:#121826;
    --line:rgba(247,249,252,.12);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration-thickness:.08em;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--pass-bright);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#080B14;padding:12px 18px;z-index:99;border-radius:0 0 10px 0}
.skip:focus{left:0}

h1,h2,h3{line-height:1.14;letter-spacing:-.022em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.35rem + 3.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.6rem);font-weight:800}
h3{font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,.98rem + .5vw,1.32rem);color:var(--ink-2)}
section{padding-block:clamp(56px,7vw,104px)}
.section-head{max-width:62ch;margin-bottom:clamp(28px,4vw,48px)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(8,11,20,.88);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
header .bar{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:1.12rem}
.brand svg{width:24px;height:24px;flex:none}
header nav{margin-left:auto;display:flex;gap:26px;align-items:center}
header nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.95rem;font-weight:500}
header nav a:hover{color:#fff}
@media (max-width:900px){header nav a:not(.btn){display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
/* The primary action is the PASS green: the one colour the product is about. */
.btn-primary{background:var(--pass-bright);color:#04240f;box-shadow:0 8px 24px rgba(50,213,131,.28)}
.btn-primary:hover{background:#5ce0a0}
.btn-ghost{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
header .btn{padding:9px 18px;font-size:.94rem}

/* ---------- hero ---------- */
/* Dark, not bright: the app's home is a doorway at 1 a.m., and the site should
   not promise a daylight product. The green wash is the PASS field bleeding up
   behind the headline. */
.hero{
  background:
    radial-gradient(64% 46% at 78% 6%, rgba(50,213,131,.18) 0%, rgba(50,213,131,0) 60%),
    radial-gradient(70% 50% at 20% -10%, rgba(76,141,255,.20) 0%, rgba(76,141,255,0) 62%),
    linear-gradient(168deg,#121826 0%,#0b1020 58%,#080B14 100%);
  color:#fff;padding-block:clamp(52px,7vw,92px) clamp(56px,7vw,96px);
}
.hero h1{color:#fff;text-wrap:balance}
.hero .lede{color:rgba(255,255,255,.86);max-width:36ch}
.hero-grid{display:grid;gap:clamp(34px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fineprint{margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.6)}
.hero-art{filter:drop-shadow(0 24px 48px rgba(0,0,0,.55))}

/* The four verdict words, shown as the app renders them: colour field, one
   word. This is the product demo — keep the hexes in step with Tokens+Color. */
.verdicts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px;max-width:420px}
.verdicts b{
  display:block;padding:14px 16px;border-radius:12px;color:#fff;
  font-size:.95rem;font-weight:800;letter-spacing:.06em;text-align:center;
}
.v-pass{background:#0C6B3F}
.v-under{background:#931A11}
.v-exp{background:#7A3A05}
.v-check{background:#2F35A8}

/* ---------- facts ---------- */
.facts{background:var(--night-2);color:#fff;padding-block:0}
.facts ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;grid-template-columns:repeat(2,1fr);background:rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden;transform:translateY(-50%);box-shadow:0 18px 44px rgba(0,0,0,.5)}
@media (min-width:860px){.facts ul{grid-template-columns:repeat(4,1fr)}}
.facts li{background:#1a2133;padding:20px 22px;font-size:.95rem;line-height:1.4}
.facts b{display:block;font-size:1.02rem;margin-bottom:3px}
.facts span{color:rgba(255,255,255,.66)}

/* ---------- cards ---------- */
.cards{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:660px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-2);margin:0;font-size:.98rem}
.card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(29,107,255,.12);margin-bottom:16px;font-size:20px;line-height:1}
@media (prefers-color-scheme:dark){.card .ic{background:rgba(76,141,255,.16)}}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}}
.step{position:relative;padding-top:52px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:1.05rem;
  background:var(--brand);color:#fff;
}
.step h3{margin-bottom:.35em}
.step p{color:var(--ink-2);margin:0}

/* ---------- screenshot rail ---------- */
/* Scroll-snap rather than a JS carousel: the App Store's own interaction,
   works with trackpad, finger and keyboard, and needs no script — which is
   what keeps `script-src 'self'` in _headers an honest promise. */
.shots{background:var(--night-2);color:#fff}
.shots h2{color:#fff}
.shots .section-head p{color:rgba(255,255,255,.76)}
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 26px;margin-inline:calc(50% - 50vw);padding-inline:max(calc(50vw - var(--maxw)/2), clamp(18px,4vw,32px));
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}
.rail figure{margin:0;flex:none;width:min(64vw,250px);scroll-snap-align:center}
.rail img{width:100%;height:auto;border-radius:16px;background:#1a2133;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.rail figcaption{margin-top:12px;font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.45}

/* ---------- ladder ---------- */
.alt{background:var(--surface-2)}
.ladder{display:grid;gap:16px;margin:0;padding:0}
.ladder div{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  display:grid;gap:6px;grid-template-columns:1fr;
}
@media (min-width:760px){.ladder div{grid-template-columns:190px 1fr;gap:24px;align-items:baseline}}
.ladder dt{font-weight:700;color:var(--ink)}
.ladder dd{margin:0;color:var(--ink-2)}
.tag{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(29,107,255,.12);color:var(--brand);margin-left:8px;vertical-align:middle}
@media (prefers-color-scheme:dark){.tag{background:rgba(76,141,255,.18)}}
.tag-free{background:rgba(6,118,71,.14);color:var(--pass)}
@media (prefers-color-scheme:dark){.tag-free{background:rgba(50,213,131,.16);color:var(--pass-bright)}}

/* ---------- two-column prose ---------- */
.split{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.prose p{color:var(--ink-2)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:12px;color:var(--ink-2)}
.checks svg{width:22px;height:22px;margin-top:2px;flex:none;color:var(--pass)}
@media (prefers-color-scheme:dark){.checks svg{color:var(--pass-bright)}}
.checks b{color:var(--ink)}

/* ---------- pricing ---------- */
.plans{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;background:var(--card);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--pass);box-shadow:0 0 0 1px var(--pass),var(--shadow)}
@media (prefers-color-scheme:dark){.plan.featured{border-color:var(--pass-bright);box-shadow:0 0 0 1px var(--pass-bright),var(--shadow)}}
.plan h3{font-size:1.3rem}
.plan .price{font-size:1.02rem;color:var(--muted);margin-bottom:18px}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:11px;color:var(--ink-2);font-size:.98rem}
.plan li svg{width:18px;height:18px;margin-top:4px;color:var(--pass)}
@media (prefers-color-scheme:dark){.plan li svg{color:var(--pass-bright)}}

/* ---------- faq ---------- */
.faq{display:grid;gap:12px;max-width:78ch}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 22px}
details[open]{padding-bottom:6px}
summary{cursor:pointer;padding:20px 0;font-weight:700;list-style:none;display:flex;align-items:flex-start;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:11px;height:11px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg);margin-top:6px;flex:none;transition:transform .2s ease}
details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
details p{color:var(--ink-2);margin:0 0 18px}

/* ---------- final cta ---------- */
.final{background:linear-gradient(168deg,#121826 0%,#0b1020 60%,#080B14 100%);color:#fff;text-align:center}
.final h2{color:#fff}
.final p{color:rgba(255,255,255,.84);max-width:52ch;margin-inline:auto}
.final .cta-row{justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--night);color:rgba(255,255,255,.7);font-size:.93rem;padding-block:44px}
footer .cols{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
footer a{color:rgba(255,255,255,.86)}
footer .legal{width:100%;color:rgba(255,255,255,.5);font-size:.86rem;line-height:1.6}

/* ================================================================
   Article pages — support and the legal documents
   ================================================================ */

.article{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.article .wrap{max-width:74ch}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs span{margin-inline:8px;opacity:.6}
.article h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);margin-bottom:.4em;text-wrap:balance}
.article .standfirst{font-size:clamp(1.05rem,.98rem + .45vw,1.26rem);color:var(--ink-2);margin-bottom:2em}
.article h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem);margin-top:1.9em}
.article h3{margin-top:1.6em;font-size:1.1rem}
.article p,.article li{color:var(--ink-2)}
.article ul,.article ol{padding-left:1.3em;margin:0 0 1.2em}
.article li{margin-bottom:.5em}
.article strong{color:var(--ink)}
.article table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.96rem;display:block;overflow-x:auto}
.article th,.article td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.article th{color:var(--ink);font-weight:700;white-space:nowrap}
.article td{color:var(--ink-2)}

.note{
  background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:0 12px 12px 0;padding:18px 22px;margin:0 0 1.6em;
}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ink)}

/* The legal documents come from a policy generator, so their markup is bare
   <strong> as headings and <br> for spacing. Style what is actually there
   rather than rewriting the text — same approach as the Slumbi site. */
.legal strong{display:block;margin-top:2em;margin-bottom:.5em;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}
.legal p strong,.legal li strong{display:inline;margin:0;font-size:inherit}
.legal br{display:none}
.legal p,.legal li{color:var(--ink-2)}