/* Slumbi — one stylesheet for every page on the site.
   Lifted out of index.html once the guides and the legal pages appeared:
   nine copies of the same 9 KB inline block would drift apart within a week,
   and one cached file across the whole site beats one saved request on the
   landing page. Still same-origin, so `style-src 'self'` in _headers covers it
   without loosening the CSP. */

:root{
  --ink:#101733; --ink-2:#3c4a78; --muted:#6b78a6;
  --brand:#3f63e8; --brand-deep:#212f86; --night:#141d55; --amber:#ffc861;
  --surface:#ffffff; --surface-2:#f4f7fd; --card:#ffffff;
  --line:rgba(20,29,85,.12); --shadow:0 1px 2px rgba(16,23,51,.06),0 12px 32px rgba(16,23,51,.07);
  --radius:18px; --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#eaefff; --ink-2:#b9c4e8; --muted:#8d99c4;
    --surface:#0b1029; --surface-2:#0f1533; --card:#141b3d;
    --line:rgba(180,196,255,.14); --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.35);
  }
}
*{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}
@media (prefers-color-scheme:dark){a{color:#9db4ff}}
:focus-visible{outline:3px solid var(--amber);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:#141d55;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(20,29,85,.86);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:22px;height:22px;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:860px){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)}
.btn-primary{background:var(--amber);color:#241703;box-shadow:0 8px 24px rgba(255,200,97,.32)}
.btn-primary:hover{background:#ffd483}
.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 ---------- */
.hero{
  background:
    radial-gradient(72% 52% at 50% -8%, rgba(125,151,255,.55) 0%, rgba(125,151,255,0) 62%),
    linear-gradient(168deg,#3f63e8 0%,#212f86 62%,#141d55 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,.88);max-width:34ch}
.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,.66)}
.hero-art{filter:drop-shadow(0 24px 48px rgba(6,12,45,.45))}

/* ---------- facts ---------- */
.facts{background:var(--night);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(6,12,45,.4)}
@media (min-width:860px){.facts ul{grid-template-columns:repeat(4,1fr)}}
.facts li{background:#1a2569;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,.68)}

/* ---------- 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}

/* ---------- 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(63,99,232,.12);margin-bottom:16px;font-size:20px;line-height:1}
@media (prefers-color-scheme:dark){.card .ic{background:rgba(125,151,255,.16)}}

/* ---------- screenshot gallery ---------- */
/* A scroll-snap rail rather than a JS carousel: it is the interaction the
   App Store itself uses, it works with a trackpad, a finger and the keyboard,
   and it needs no script — which keeps `script-src 'self'` honest. */
.shots{background:var(--night);color:#fff}
.shots .section-head p{color:rgba(255,255,255,.78)}
.shots h2{color:#fff}
.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,260px);scroll-snap-align:center}
.rail img{width:100%;height:auto;border-radius:16px;background:#1a2569;box-shadow:0 12px 32px rgba(6,12,45,.45)}
.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:180px 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(63,99,232,.12);color:var(--brand);margin-left:8px;vertical-align:middle}
@media (prefers-color-scheme:dark){.tag{background:rgba(125,151,255,.18);color:#9db4ff}}

/* ---------- 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(--brand)}
.checks b{color:var(--ink)}

/* ---------- guides index ---------- */
.guide-list{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.guide-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.guide-list{grid-template-columns:repeat(3,1fr)}}
.guide-list a{
  display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);
  transition:transform .15s ease, border-color .15s ease;
}
.guide-list a:hover{transform:translateY(-2px);border-color:var(--brand)}
.guide-list h3{margin-bottom:.4em;color:var(--brand)}
@media (prefers-color-scheme:dark){.guide-list h3{color:#9db4ff}}
.guide-list p{margin:0;color:var(--ink-2);font-size:.96rem}

/* ---------- 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(--brand);box-shadow:0 0 0 1px var(--brand),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(--brand)}

/* ---------- 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,#3f63e8 0%,#212f86 70%,#141d55 100%);color:#fff;text-align:center}
.final h2{color:#fff}
.final p{color:rgba(255,255,255,.86);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 — guides 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)}

/* Pull-out for the one thing on the page a parent must not miss. Used
   sparingly — a page with three "important" boxes has none. */
.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)}

.article .cta-row{margin-top:2.4em}
.article .btn-primary{box-shadow:0 8px 24px rgba(255,200,97,.28)}

.related{margin-top:3.4em;padding-top:2em;border-top:1px solid var(--line)}
.related h2{margin-top:0;font-size:1.2rem}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related a{font-weight:600}

/* The legal documents are transplanted verbatim from the API worker, so their
   markup is whatever the generator produced: bare <strong> as headings, <br>
   for spacing. Style what is actually there rather than rewriting the text. */
.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)}