:root{
    --bg:#EFF4FC; --surface:#FFFFFF; --surface-2:#F6FAFF;
    --ink:#15233B; --muted:#57688400; --muted:#586884; --faint:#8496B2;
    --line:#DBE6F4; --line-soft:#E9F0FA;
    --brand:#4B3FD6; --brand-deep:#372CB0; --brand-ink:#2A2185; --brand-tint:#E9E6FB;
    --now:#DD5B34; --now-bg:#FBEAE3; --now-line:#F1C9B9;
    --later:#BC8412; --later-bg:#FAF0D6; --later-line:#EAD6A0;
    --handled:#1B926B; --handled-bg:#E0F2EA; --handled-line:#BEE4D3;
    --shadow:0 1px 2px rgba(21,35,59,.05), 0 10px 30px rgba(28,70,140,.07);
    --shadow-sm:0 1px 2px rgba(21,35,59,.06), 0 4px 14px rgba(28,70,140,.06);
    --radius:16px; --radius-sm:11px;
    --display:"Fraunces",Georgia,"Times New Roman",serif;
    --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  :root:not([data-theme="light"]){ }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --bg:#0D1626; --surface:#152239; --surface-2:#1A2842;
      --ink:#EAF1FC; --muted:#9EB1CE; --faint:#7488A8;
      --line:#28395A; --line-soft:#213150;
      --brand:#8E82F2; --brand-deep:#A99FF6; --brand-ink:#CFC8F9; --brand-tint:#241E48;
      --now:#F0805E; --now-bg:#38201A; --now-line:#5A3527;
      --later:#E1AE49; --later-bg:#332811; --later-line:#54431C;
      --handled:#46C79B; --handled-bg:#0F2E24; --handled-line:#1E4A3A;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4);
      --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.3);
    }
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0D1626; --surface:#152239; --surface-2:#1A2842;
    --ink:#EAF1FC; --muted:#9EB1CE; --faint:#7488A8;
    --line:#28395A; --line-soft:#213150;
    --brand:#8E82F2; --brand-deep:#A99FF6; --brand-ink:#CFC8F9; --brand-tint:#241E48;
    --now:#F0805E; --now-bg:#38201A; --now-line:#5A3527;
    --later:#E1AE49; --later-bg:#332811; --later-line:#54431C;
    --handled:#46C79B; --handled-bg:#0F2E24; --handled-line:#1E4A3A;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.3);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--body); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased; font-synthesis:none;
  }
  h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-.01em}
  p{margin:0}
  a{color:inherit}
  .wrap{max-width:1200px; margin:0 auto; padding-inline:22px}
  .eyebrow{font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--brand); margin:0 0 14px}

  /* Header */
  header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
    background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);}
  .navrow{display:flex; align-items:center; gap:18px; height:62px}
  .brand{display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:.01em; color:var(--ink); text-decoration:none}
  .brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));display:grid;place-items:center;color:#fff;font-size:14px;box-shadow:0 2px 6px rgba(28,70,140,.3)}
  nav.links{display:flex; gap:24px; margin-left:auto}
  nav.links a{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500}
  nav.links a:hover{color:var(--ink)}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body);
    font-weight:600; font-size:15px; border-radius:999px; padding:11px 20px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
  .btn-primary{background:linear-gradient(160deg,var(--brand),var(--brand-deep)); color:#fff; box-shadow:0 3px 12px rgba(28,70,140,.28)}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(28,70,140,.34)}
  .btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--brand); color:var(--brand-ink)}
  .btn.sm{padding:9px 16px; font-size:14px}
  header .btn{margin-left:2px}
  .menu-btn{display:none; margin-left:auto; background:var(--surface); border:1px solid var(--line); border-radius:10px; width:40px;height:40px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); font-size:18px}

  section{padding-block:74px}
  .lead{font-size:19px; color:var(--muted); line-height:1.62; max-width:38ch; text-wrap:balance}
  .kicker, .prob .lead, .page-head .lead{text-wrap:balance}
  .article p{text-wrap:pretty}

  /* Hero */
  .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding-top:56px; padding-bottom:40px}
  .hero h1{font-size:clamp(38px,5.4vw,62px); letter-spacing:-.02em}
  .hero .lead{margin-top:20px; font-size:20px; max-width:34ch}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; align-items:center}
  .microtrust{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:13.5px; color:var(--muted)}
  .microtrust svg{flex:none}
  .rise{opacity:1}
  @media (prefers-reduced-motion:no-preference){
    .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
    .rise.d1{animation-delay:.06s}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.18s}
    @keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1;transform:none}}
  }

  /* Phone / product visual */
  .device{justify-self:center; width:100%; max-width:330px; background:var(--surface); border:1px solid var(--line);
    border-radius:30px; padding:16px 15px 20px; box-shadow:var(--shadow)}
  .device .top{display:flex; align-items:center; justify-content:space-between; padding:2px 6px 12px; color:var(--faint); font-size:12px; font-weight:600}
  .device .hi{font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink); padding:0 6px 2px}
  .device .sub{padding:0 6px 14px; color:var(--faint); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
  .mcard{position:relative; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:13px; padding:13px 14px 13px 16px; margin-bottom:10px; overflow:hidden}
  .mcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px}
  .mcard.now::before{background:var(--now)} .mcard.later::before{background:var(--later)}
  .mcard .t{font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.3}
  .mcard .m{font-size:12.5px; color:var(--muted); margin-top:3px}
  .chip{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-bottom:7px}
  .chip.now{background:var(--now-bg); color:var(--now); border:1px solid var(--now-line)}
  .chip.later{background:var(--later-bg); color:var(--later); border:1px solid var(--later-line)}
  .chip.handled{background:var(--handled-bg); color:var(--handled); border:1px solid var(--handled-line)}
  .laterrow{display:flex; align-items:center; justify-content:space-between; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:13px; padding:12px 14px; margin-top:2px}
  .laterrow .t{font-weight:600; font-size:14px; color:var(--ink)}
  .laterrow .c{font-size:12px; color:var(--faint); font-weight:600}

  /* Trust strip */
  .strip{background:var(--brand-tint); border-block:1px solid var(--line-soft); margin-top:32px}
  .strip .wrap{display:flex; align-items:center; justify-content:center; gap:12px; padding-block:16px; text-align:center}
  .strip p{color:var(--brand-ink); font-weight:600; font-size:15px}
  .strip svg{flex:none}

  /* Problem */
  .prob h2{font-size:clamp(28px,3.6vw,40px)}
  .prob .lead{margin-top:16px; max-width:52ch; font-size:19px}
  .kicker{color:var(--muted); font-size:16px; margin-top:10px; white-space:nowrap}
  @media (max-width:760px){ .kicker{white-space:normal} }
  .cats{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:38px}
  .cat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 15px; box-shadow:var(--shadow-sm)}
  .cat .ico{width:34px;height:34px;border-radius:9px;background:var(--brand-tint); color:var(--brand); display:grid;place-items:center; margin-bottom:11px}
  .cat .n{font-weight:600; font-size:14.5px; line-height:1.32; color:var(--ink)}

  /* How */
  .how{background:var(--surface-2); border-block:1px solid var(--line-soft)}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
  .step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm)}
  .step .num{font-family:var(--display); font-weight:600; font-size:15px; color:var(--brand); display:flex; align-items:center; gap:9px; margin-bottom:14px}
  .step .num i{width:28px;height:28px;border-radius:8px;background:var(--brand-tint);display:grid;place-items:center; font-style:normal}
  .step h3{font-size:20px; margin-bottom:8px}
  .step p{color:var(--muted); font-size:15px}
  .rules{display:flex; flex-direction:column; gap:7px; margin-top:12px}
  .rule{display:flex; gap:9px; align-items:baseline; font-size:14px; color:var(--ink)}
  .rule b{font-weight:600}
  .rule .arrow{color:var(--brand); font-weight:700}
  .buckets{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}

  /* Privacy */
  .priv-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:38px}
  .pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px; box-shadow:var(--shadow-sm)}
  .pcard h3{font-size:18px; display:flex; align-items:center; gap:10px; margin-bottom:7px}
  .pcard h3 .lk{width:30px;height:30px;border-radius:8px;background:var(--handled-bg); color:var(--handled); display:grid; place-items:center; flex:none}
  .pcard p{color:var(--muted); font-size:14.5px}
  .badge-verified{display:inline-flex; align-items:center; gap:9px; margin-top:26px; background:var(--handled-bg); border:1px solid var(--handled-line); color:var(--handled); padding:10px 16px; border-radius:999px; font-weight:600; font-size:14px}

  /* Kickstarter */
  .ks .panel{background:linear-gradient(155deg,var(--brand),var(--brand-deep)); border-radius:24px; padding:46px 44px; color:#fff; box-shadow:0 18px 44px rgba(28,70,140,.32); position:relative; overflow:hidden}
  .ks .panel::after{content:""; position:absolute; right:-80px; top:-80px; width:280px;height:280px;border-radius:50%; background:rgba(255,255,255,.09)}
  .ks .eyebrow{color:#DCEAFC}
  .ks h2{color:#fff; font-size:clamp(28px,3.4vw,38px); max-width:20ch; position:relative}
  .ks p{color:#E7F0FC; margin-top:16px; max-width:52ch; font-size:17px; position:relative}
  .ks .meter{position:relative; margin-top:26px; max-width:520px}
  .ks .bar{height:9px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden}
  .ks .bar span{display:block; height:100%; width:64%; border-radius:999px; background:#fff}
  .ks .stats{display:flex; gap:26px; margin-top:12px; font-size:14px; color:#EAF2FD; flex-wrap:wrap}
  .ks .stats b{font-family:var(--display); font-weight:600; font-size:18px; color:#fff}
  .ks .btn{margin-top:26px; position:relative; background:#fff; color:var(--brand-deep)}
  .ks .btn:hover{transform:translateY(-1px)}

  /* Waitlist */
  .wait{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
  .wait h2{font-size:clamp(26px,3.2vw,34px)}
  .wait p{color:var(--muted); margin-top:12px; font-size:17px}
  form.signup{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}
  form.signup input{flex:1; min-width:200px; font-family:var(--body); font-size:15px; padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
  form.signup input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
  .formcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm)}
  .formnote{font-size:12.5px; color:var(--faint); margin-top:12px}
  .ok{display:none; align-items:center; gap:9px; color:var(--handled); font-weight:600; font-size:15px; margin-top:6px}
  .ok.show{display:flex}

  /* Story + FAQ */
  .story{background:var(--surface-2); border-block:1px solid var(--line-soft)}
  .story .inner{max-width:720px}
  .story blockquote{font-family:var(--display); font-weight:400; font-size:clamp(22px,2.8vw,28px); line-height:1.34; color:var(--ink); margin:14px 0 0; border-left:3px solid var(--brand); padding-left:22px}
  .story .sig{margin-top:18px; color:var(--muted); font-weight:600; font-size:15px}
  details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 20px; margin-bottom:10px; box-shadow:var(--shadow-sm)}
  details summary{cursor:pointer; list-style:none; padding:16px 0; font-weight:600; font-size:16.5px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:12px}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+"; color:var(--brand); font-size:22px; font-weight:400; transition:transform .2s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{color:var(--muted); font-size:15px; padding:0 0 18px}
  .faqlink{margin-top:20px; display:inline-block; color:var(--brand-ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line)}

  /* Footer */
  footer{background:var(--surface); border-top:1px solid var(--line)}
  footer .wrap{padding-block:40px}
  .foot-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start}
  .foot-links{display:flex; gap:22px; flex-wrap:wrap}
  .foot-links a{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500}
  .foot-links a:hover{color:var(--ink)}
  .foot-about{max-width:36ch; color:var(--muted); font-size:13.5px; margin-top:12px}
  .foot-trust{display:flex; align-items:center; gap:8px; margin-top:22px; color:var(--handled); font-size:13.5px; font-weight:600}
  .foot-trust svg{flex:none}
  .foot-legal{margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--faint); font-size:13px}
  .foot-legal a{color:var(--muted); text-decoration:none}

  @media (max-width:860px){
    nav.links{display:none} header .btn.desktop{display:none} .menu-btn{display:flex}
    .hero{grid-template-columns:1fr; gap:36px; text-align:left} .device{order:-1; max-width:300px}
    .cats{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:1fr}
    .priv-grid{grid-template-columns:1fr} .wait{grid-template-columns:1fr}
    section{padding-block:56px} .ks .panel{padding:34px 26px}
  }
  @media (max-width:420px){ .cats{grid-template-columns:1fr 1fr} .hero h1{font-size:34px} }

/* ---- Subpage / article layout ---- */
.page-head{padding-top:56px; padding-bottom:8px}
.page-head h1{font-size:clamp(32px,4.4vw,50px); letter-spacing:-.02em}
.page-head .lead{margin-top:16px; font-size:19px; max-width:56ch}
.article{max-width:720px}
.article h2{font-size:clamp(22px,2.8vw,28px); margin:40px 0 12px}
.article h3{font-size:19px; margin:26px 0 6px}
.article p{color:var(--ink); margin:0 0 16px; font-size:16.5px; line-height:1.7}
.article p.muted{color:var(--muted)}
.article ul{color:var(--ink); font-size:16.5px; line-height:1.7; padding-left:22px; margin:0 0 16px}
.article li{margin-bottom:7px}
.article a.inline{color:var(--brand-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.article blockquote{font-family:var(--display); font-weight:400; font-size:clamp(21px,2.6vw,26px); line-height:1.36; color:var(--ink); margin:20px 0; border-left:3px solid var(--brand); padding-left:22px}
.updated{color:var(--faint); font-size:13.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px}
.cta-inline{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; padding-top:30px; border-top:1px solid var(--line-soft)}
.callout{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--handled); border-radius:var(--radius-sm); padding:18px 20px; margin:22px 0; box-shadow:var(--shadow-sm)}
.callout p{margin:0; color:var(--muted); font-size:15px}

.brand .mark{width:26px;height:26px;display:block;flex:none}
.foot-top .brand .mark{width:24px;height:24px}

/* ---- Resources / articles ---- */
.crumb{font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom:14px}
.crumb:hover{color:var(--brand-ink)}
.byline{color:var(--faint); font-size:13.5px; font-weight:600; margin-top:14px}
.res-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px}
.res-card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:transform .12s ease, border-color .12s ease}
.res-card:hover{transform:translateY(-2px); border-color:var(--brand)}
.res-card .tag{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:9px; display:block}
.res-card h3{font-size:19px; line-height:1.25; margin-bottom:7px}
.res-card p{color:var(--muted); font-size:14.5px; margin:0}
.read-next{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.article-cta{background:var(--brand-tint); border:1px solid var(--brand-tint); border-radius:var(--radius); padding:24px 26px; margin:34px 0 8px}
.article-cta h3{font-size:20px; margin-bottom:6px}
.article-cta p{color:var(--brand-ink); margin:0 0 16px; font-size:15.5px}
@media (max-width:860px){ .res-grid{grid-template-columns:1fr} .read-next{grid-template-columns:1fr} }