:root{
  --indigo:#4f46e5; --blue:#3882f6; --cyan:#0ebed6;
  --ink:#0f172a; --muted:#5b6576; --line:#e6e8ee; --bg:#ffffff; --soft:#f7f8fb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo); text-decoration:none}
.wrap{max-width:1040px; margin:0 auto; padding:0 22px}
.narrow{max-width:760px}
.grad{background:linear-gradient(150deg,var(--indigo) 0%,var(--blue) 55%,var(--cyan) 100%)}
code{background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:13.5px; color:var(--ink)}
/* On gradient / dark sections, code must stay legible against white text. */
.grad code, .band code, header.page code{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); color:#fff;
}

/* Nav */
nav{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(12px);
    background:rgba(255,255,255,.82); border-bottom:1px solid var(--line)}
nav .wrap{display:flex; align-items:center; gap:16px; height:60px}
nav img{width:30px; height:30px; border-radius:7px}
nav b{font-size:17px}
nav .links{margin-left:auto; display:flex; gap:22px; align-items:center}
nav .links a{color:var(--ink); font-size:14px; font-weight:500}
nav .links a:hover{color:var(--indigo)}
.btn{display:inline-block; padding:10px 18px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer}
.btn-primary{background:var(--indigo); color:#fff}
.btn-primary:hover{background:#4338ca}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--indigo); color:var(--indigo)}

/* Hero */
header.hero{padding:84px 0 70px; text-align:center}
header.hero img.app{width:128px; height:128px; border-radius:28px; box-shadow:0 22px 50px rgba(79,70,229,.28)}
h1{font-size:clamp(30px,5vw,50px); line-height:1.08; letter-spacing:-.02em; margin:26px auto 14px; max-width:780px}
.lede{font-size:19px; color:var(--muted); max-width:660px; margin:0 auto 30px}
.cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.cta .btn{padding:14px 26px; font-size:15px}
.note{margin-top:16px; font-size:13px; color:var(--muted)}

/* Page header (sub-pages) */
header.page{color:#fff; padding:54px 0}
header.page h1{margin:0; font-size:clamp(28px,4vw,40px); text-align:left}
header.page p{margin:10px 0 0; opacity:.93; max-width:680px}

section{padding:62px 0}
section.tight{padding:46px 0}
h2{font-size:30px; letter-spacing:-.02em; text-align:center; margin:0 0 8px}
h2.left{text-align:left}
.sub{text-align:center; color:var(--muted); max-width:640px; margin:0 auto 40px}
.sub.left{text-align:left; margin-left:0}

/* Generic cards / grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.card{background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:24px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
.badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700;margin-bottom:14px}

/* Tier cards */
.tier .top{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.tier .pill{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px}
.tier h3{margin:0; font-size:19px}
.tier ul{margin:10px 0 14px; padding-left:18px; color:var(--ink); font-size:14px}
.tier ul li{margin:3px 0}
.tier .back{font-size:13px; color:var(--muted)}
.tier .back b{color:var(--ink)}

/* Feature grid */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feat div{padding:18px; border:1px solid var(--line); border-radius:14px}
.feat h4{margin:0 0 5px; font-size:15px}
.feat p{margin:0; color:var(--muted); font-size:13.5px}

/* Steps (numbered, detailed) */
.flow{display:flex; flex-direction:column; gap:14px}
.flow .row{display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start;
  border:1px solid var(--line); border-radius:16px; padding:22px}
.flow .num{width:42px;height:42px;border-radius:12px;color:#fff;font-weight:700;display:grid;place-items:center;font-size:18px}
.flow h3{margin:0 0 4px; font-size:19px}
.flow p{margin:0 0 8px; color:var(--muted); font-size:14.5px}
.flow .chips{display:flex; gap:8px; flex-wrap:wrap}
.flow .chip{font-size:12px; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--ink)}

/* Editions */
.editions{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.ed{border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column}
.ed .top{padding:22px 24px; color:#fff}
.ed .top h3{margin:0; font-size:20px}
.ed .top span{font-size:13px; opacity:.92}
.ed ul{list-style:none; margin:0; padding:20px 24px; flex:1}
/* Hanging indent — NOT flex, so inline <code>/<b> wrap naturally on one line. */
.ed li{position:relative; padding:7px 0 7px 26px; font-size:14.5px; line-height:1.55}
.ed li .tick, .ed li .dot{position:absolute; left:0; top:7px; line-height:1.55}
.ed .foot{padding:0 24px 24px}
.tick{color:#16a34a; font-weight:700} .dot{color:var(--muted)}
.pick{text-align:center; color:var(--muted); font-size:13.5px; margin-top:26px}

/* FAQ */
.faq{max-width:760px; margin:0 auto}
.faq details{border:1px solid var(--line); border-radius:12px; padding:4px 18px; margin-bottom:10px; background:#fff}
.faq summary{cursor:pointer; font-weight:600; padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--indigo); font-size:20px; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px; color:var(--muted); font-size:14.5px}

/* Privacy/CTA band */
.band{color:#fff; text-align:center}
.band h2{color:#fff}
.band p{max-width:660px; margin:0 auto; opacity:.95}
.band .btn{margin-top:22px; background:rgba(255,255,255,.16); color:#fff}
.band .btn:hover{background:rgba(255,255,255,.26)}

/* Prose (sub-pages) */
.prose h2{text-align:left; font-size:21px; margin:34px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#27303f}
.prose ul{padding-left:20px}
.prose .kv{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin:14px 0}
.prose .kv b{color:var(--indigo)}

footer{padding:40px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
footer .wrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
footer a{color:var(--muted)} footer a:hover{color:var(--indigo)}
.ph{outline:2px dashed rgba(255,255,255,.5); outline-offset:2px}

@media(max-width:760px){
  .grid-3,.grid-2,.feat,.editions{grid-template-columns:1fr}
  nav .links a:not(.btn){display:none}
  .flow .row{grid-template-columns:1fr}
}

/* ───────────────────────── Polish pass ───────────────────────── */

::selection{background:rgba(79,70,229,.18)}
a{transition:color .15s ease}
a:not(.btn):hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}

/* Keyboard focus — visible for everyone who tabs. */
a:focus-visible, .btn:focus-visible, summary:focus-visible{
  outline:2px solid var(--indigo); outline-offset:3px; border-radius:8px;
}
summary:focus{outline:none}

/* Anchored sections shouldn't hide under the sticky nav. */
section[id], header[id]{scroll-margin-top:74px}

/* Nav gets a hair of depth. */
nav{box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 20px -16px rgba(15,23,42,.25)}

/* Buttons: motion + depth. */
.btn{transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{box-shadow:0 8px 20px -8px rgba(79,70,229,.55)}
.btn-primary:hover{box-shadow:0 12px 26px -8px rgba(79,70,229,.6)}

/* Cards lift on hover. */
.card,.feat div,.ed,.tier,.faq details{
  transition:transform .16s ease, box-shadow .2s ease, border-color .16s ease;
}
.feat div:hover{transform:translateY(-2px); border-color:#d7dbe6; box-shadow:0 14px 30px -20px rgba(15,23,42,.35)}
.flow .row:hover{border-color:#d7dbe6; box-shadow:0 14px 34px -22px rgba(15,23,42,.3)}
.tier:hover{transform:translateY(-3px); box-shadow:0 20px 44px -26px rgba(79,70,229,.4)}
.ed:hover{box-shadow:0 22px 50px -30px rgba(15,23,42,.4)}

/* Feature emoji as a tidy tinted badge (works on the existing markup). */
.feat h4{display:flex; align-items:center; gap:9px; font-size:15px}
.feat h4::first-letter{ /* no-op guard */ }

/* Eyebrow label above section headings. */
.eyebrow{
  text-align:center; text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; font-weight:700; color:var(--indigo); margin:0 0 10px;
}
.eyebrow.left{text-align:left}
.grad .eyebrow, .band .eyebrow{color:rgba(255,255,255,.85)}

/* Hero trust chips. */
.trust{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.trust span{
  font-size:12.5px; color:var(--muted); background:var(--soft);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-weight:500;
}

/* FAQ open state gets a subtle highlight. */
.faq details[open]{border-color:#d3d8e6; box-shadow:0 10px 30px -22px rgba(15,23,42,.4)}

/* Respect reduced-motion. */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
  .feat div:hover,.tier:hover{transform:none}
}