:root{
  --navy:#0E2A47; --blue:#1A6FB5; --green:#2BA36B; --sun:#FFC23D;
  --bg:#F6F8FB; --surface:#FFFFFF; --ink:#0E2A47; --muted:#4A5D73; --line:#DCE3EC;
  --accent:#1A6FB5; --accent-ink:#FFFFFF; --good:#1E7A4F; --good-bg:#E3F4EA; --ok:#8A5A00; --ok-bg:#FFF2D1;
  --shadow:0 1px 2px rgba(14,42,71,.06),0 8px 24px rgba(14,42,71,.08);
  --radius:16px; --max:1080px; --map-bg:linear-gradient(180deg,#d9ecfa,#eef6fc); color-scheme:light;
  --font-head:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme="dark"]{
    --bg:#0B1726; --surface:#12233A; --ink:#EAF1F8; --muted:#A9B9CB; --line:#24395A;
    --accent:#5FA8E8; --accent-ink:#0B1726; --good:#7FD8A8; --good-bg:#16352A; --ok:#FFD27A; --ok-bg:#3A2E12;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --map-bg:linear-gradient(180deg,#132f4d,#0f2640);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1726; --surface:#12233A; --ink:#EAF1F8; --muted:#A9B9CB; --line:#24395A;
    --accent:#5FA8E8; --accent-ink:#0B1726; --good:#7FD8A8; --good-bg:#16352A; --ok:#FFD27A; --ok-bg:#3A2E12;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --map-bg:linear-gradient(180deg,#132f4d,#0f2640);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font-body)}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700}
h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:12px}

/* header */
.site-header{padding:18px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{color:var(--ink);display:inline-flex}
.logo{height:40px;width:auto}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;background:var(--surface)}
.nav-cta:hover{border-color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}

/* hero */
.hero{padding:40px 0 64px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);margin-bottom:20px}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px rgba(255,194,61,.3)}
.lead{font-size:1.2rem;color:var(--muted);max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;text-decoration:none;border:1.5px solid transparent}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent)}
.fineprint{font-size:.9rem;color:var(--muted);margin-top:14px}

/* preview card */
.preview{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:relative}
.preview-head{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{font-size:.82rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.mini-map{border-radius:12px;background:var(--map-bg);height:150px;position:relative;overflow:hidden;margin-bottom:14px}
.mini-map svg{width:100%;height:100%}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line)}
.rows b{font-weight:700}
.rows small{display:block;color:var(--muted);font-size:.82rem}
.score{font-family:var(--font-head);font-weight:700;font-size:.95rem;min-width:84px;text-align:center;white-space:nowrap;flex-shrink:0;padding:4px 10px;border-radius:999px}
.score.good{background:var(--good-bg);color:var(--good)}
.score.ok{background:var(--ok-bg);color:var(--ok)}
.caption{font-size:.8rem;color:var(--muted);margin:12px 0 0}

/* sections */
section{padding:56px 0}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.section-intro{max-width:40em;color:var(--muted);font-size:1.08rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;counter-reset:s}
.step{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.alt .step{background:var(--bg)}
.step::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sun);color:var(--navy);font-family:var(--font-head);font-weight:700;margin-bottom:12px}
.step p{color:var(--muted);margin:0}
.weights{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.social a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem;background:var(--surface)}
.social a:hover{border-color:var(--accent)}

/* footer */
.site-footer{padding:32px 0 48px;color:var(--muted);font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-footer a{color:var(--muted)}

/* legal pages */
.legal{padding:24px 0 64px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.legal h2{font-size:1.3rem;margin-top:1.8em}
.legal ul{padding-left:1.2em;margin:0 0 1em}
.legal li{margin:.3em 0}
.updated{color:var(--muted)}

@media (max-width:860px){
  .hero .wrap,.two{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero{padding-top:16px}
}
@media (max-width:520px){
  .nav-cta{display:none}
}
@media (max-width:420px){
  .logo{height:32px}
  .btn{width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.nav-cta,.social a,.theme-toggle{transition:border-color .15s,filter .15s}
}