:root{
  --bg:#ffffff;
  --ink:#0b0b0b;
  --gray:#6b6b6b;
  --faint:#9a9a9a;
  --line:#e6e6e6;
  --track:#ededed;
  --blue:#1433ff;
  --blue-dk:#0f28d6;
  --black:#0b0b0b;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font:400 16px/1.5 "Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:800;letter-spacing:-.035em}
.wrap{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}

/* ── buttons ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--black);color:#fff;
  border:0;border-radius:6px;padding:0 20px;height:48px;
  font:600 15px "Mona Sans",sans-serif;cursor:pointer;white-space:nowrap;
  transition:background .15s;
}
.btn:hover{background:#262626}
.btn:active{transform:translateY(1px)}
.btn.small{height:38px;padding:0 14px;font-size:14px}
.btn.invert{background:#fff;color:var(--ink)}
.btn.invert:hover{background:#e9e9e9}

/* ── nav ─────────────────────────────── */
.navbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
nav{
  display:flex;align-items:center;gap:28px;
  max-width:1200px;margin:0 auto;padding:0 32px;height:64px;
}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:21px;letter-spacing:-.04em}
.wordmark .mark{width:26px;height:22px;flex:none;color:var(--ink)}
.wordmark.small{font-size:15px;gap:7px}
.wordmark.small .mark{width:19px;height:16px}
.links{margin-left:auto;display:flex;gap:26px;font-weight:500;font-size:14px;color:var(--gray)}
.links a:hover{color:var(--ink)}

/* ── hero ────────────────────────────── */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  max-width:1200px;margin:0 auto;padding:72px 32px 96px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--blue);margin-bottom:22px;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
h1{font-size:clamp(44px,5.8vw,78px);line-height:.98;letter-spacing:-.045em}
.sub{margin-top:22px;font-size:clamp(17px,1.7vw,20px);line-height:1.45;color:var(--gray);max-width:34ch}

form{margin-top:34px;max-width:520px;scroll-margin-top:96px}
.who{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.who label{cursor:pointer}
.who input{position:absolute;opacity:0;pointer-events:none}
.who span{
  display:inline-block;font-size:14px;font-weight:500;color:var(--gray);
  border:1px solid var(--line);border-radius:6px;padding:8px 13px;transition:.15s;
}
.who input:checked + span{color:var(--ink);border-color:var(--ink)}
.who input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.row{display:flex;gap:8px}
input[type=email]{
  flex:1;min-width:0;height:48px;
  border:1px solid #cfcfcf;border-radius:6px;padding:0 14px;
  color:var(--ink);background:#fff;
  font:400 15px "Mona Sans",sans-serif;transition:border-color .15s;
}
input[type=email]::placeholder{color:var(--faint)}
input[type=email]:focus{outline:none;border-color:var(--ink)}
.note{margin-top:10px;min-height:18px;font-size:13px;color:var(--gray)}
.note.good{color:var(--blue)}
.note.bad{color:#c62828}
.trust{margin-top:30px;font-size:13px;font-weight:500;color:var(--faint);display:flex;flex-wrap:wrap;gap:4px 0}
.trust span{white-space:nowrap}
.trust span + span::before{content:"·";margin:0 10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── run card ────────────────────────── */
.run{
  background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;
}
.tele{
  position:relative;background:var(--black);color:#fff;
  padding:18px 18px 14px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  aspect-ratio:16/9;
}
.featured .tele{aspect-ratio:auto;min-height:280px;padding:22px 22px 18px}
.tele-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:.01em}
.tele-top .tag{color:#bdbdbd}
.live{display:inline-flex;align-items:center;gap:6px;color:#fff}
.live i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.live.on i{animation:pulse 1.3s infinite}
.live.done i{background:#3ddc84}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.big{display:flex;flex-direction:column;gap:2px}
.big b{font-size:clamp(30px,3.2vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1}
.featured .big b{font-size:clamp(44px,4.6vw,64px)}
.big span{font-size:12px;color:#bdbdbd;font-weight:500}
.big em{font-style:normal;color:#fff}
.spark{display:flex;align-items:flex-end;gap:2px;height:40px}
.featured .spark{height:64px;gap:3px}
.spark i{flex:1;background:#fff;opacity:.35;border-radius:1px;height:2px;transition:opacity .4s}
.spark i.now{background:var(--blue);opacity:1}

.body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.featured .body{padding:20px 22px 22px;gap:14px}
.title{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.featured .title{font-size:22px}
.by{font-size:13px;color:var(--gray);margin-top:-6px}
.by b{font-weight:600;color:var(--ink)}
.bar{height:4px;background:var(--track);border-radius:2px;overflow:hidden;display:flex}
.bar i{display:block;height:100%;width:0;transition:width .2s}
.bar .pledged{background:var(--blue)}
.bar .matched{background:repeating-linear-gradient(135deg,var(--blue) 0 2px,transparent 2px 5px)}
.match{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);margin-top:-2px}
.match svg{width:14px;height:14px;fill:currentColor;color:var(--ink);flex:none}
.match b{color:var(--ink);font-weight:600}
.stats{display:flex;gap:22px;font-size:13px;color:var(--gray)}
.stats b{color:var(--ink);font-weight:700}
.stats .pct b{color:var(--blue)}

.tranches{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.tranches .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--gray)}
.tranches .lbl b{color:var(--ink);font-weight:600}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ladder i{height:6px;background:var(--track);border-radius:2px}
.ladder i.on{background:var(--ink)}

/* ── runs grid ───────────────────────── */
.runs{max-width:1200px;margin:0 auto;padding:0 32px 104px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
h2{font-size:clamp(28px,3vw,38px)}
.hint{font-size:14px;color:var(--faint)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid .run{transition:border-color .15s}
.grid .run:hover{border-color:#bdbdbd}

/* ── flow diagram ────────────────────── */
.flow{border-top:1px solid var(--line);max-width:1200px;margin:0 auto;padding:72px 32px 96px;text-align:center}
.runs{border-top:1px solid var(--line);padding-top:88px}
.flow svg{display:block;width:100%;max-width:1080px;height:auto;margin:0 auto;overflow:visible}
.flow h2{margin-top:44px}
.flow .wire{fill:none;stroke:var(--line);stroke-width:2}
.flow .pulse{
  fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:.12 .88;stroke-dashoffset:1;
  animation:flow-run 2.8s linear infinite;
}
@keyframes flow-run{to{stroke-dashoffset:0}}
.flow .tile{fill:#fff;stroke:var(--line);stroke-width:1.5}
.flow .tile.center{stroke:var(--ink);stroke-width:2}
.flow .mark{fill:var(--ink)}
.flow text{font-family:"Mona Sans",-apple-system,Helvetica,Arial,sans-serif}
.flow .col{font-size:12px;font-weight:600;fill:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.flow .init{font-size:17px;font-weight:700;fill:var(--ink)}
.flow .ttl{font-size:19px;font-weight:700;fill:var(--ink);letter-spacing:-.02em}
.flow .run-g{transition:opacity .26s}
.flow .sub{font-size:13px;fill:var(--gray)}
.flow .track{fill:var(--track)}
.flow .fill{fill:var(--blue)}
.flow .matchseg{fill:var(--blue);opacity:.35}

/* ── how ─────────────────────────────── */
.how{border-top:1px solid var(--line);max-width:1200px;margin:0 auto;padding:88px 32px 104px}
.how ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.n{display:block;font-size:13px;font-weight:600;color:var(--blue)}
.how h3{font-size:22px;font-weight:700;margin:12px 0 8px;letter-spacing:-.025em}
.how p{color:var(--gray);font-size:15px;max-width:36ch}

/* ── for builders ────────────────────── */
.gets{border-top:1px solid var(--line);max-width:1200px;margin:0 auto;padding:88px 32px 104px}
.gets ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.gets h3{font-size:22px;font-weight:700;margin:22px 0 8px;letter-spacing:-.025em}
.gets p{color:var(--gray);font-size:15px;max-width:36ch}
.ill{border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px;aspect-ratio:4/3;display:flex;align-items:center}
.ill svg{width:100%;height:100%;display:block;overflow:visible}
.ill text{font-family:"Mona Sans",-apple-system,Helvetica,Arial,sans-serif;fill:var(--ink)}
.ill .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ill .tile{fill:#fff;stroke:var(--line);stroke-width:1.5}
.ill .wire{fill:none;stroke:var(--line);stroke-width:1.5}
.ill .mark{fill:var(--ink)}
.ill .dim{fill:var(--gray)}
.ill .faint{fill:var(--faint)}
.ill .blue{fill:var(--blue)}
.ill .ink{fill:var(--ink)}
.ill .track{fill:var(--track)}
.ill .rule{stroke:var(--line);stroke-width:1}
.ill .pulse{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:.18 .82;stroke-dashoffset:1;animation:flow-run 2.6s linear infinite}

/* ── faq ─────────────────────────────── */
.faq{border-top:1px solid var(--line);max-width:1200px;margin:0 auto;padding:88px 32px 104px}
.qs{margin-top:36px;max-width:760px}
.qgroup{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;padding:0 0 10px;border-bottom:1px solid var(--line)}
.qgroup + details{border-top:0}
.qgroup:not(:first-child){margin-top:48px}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:22px 0;font-size:19px;font-weight:700;letter-spacing:-.02em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";flex:none;width:12px;height:12px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat;
  transition:transform .2s;
}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--gray);font-size:16px;line-height:1.55;max-width:60ch}

/* ── cta ─────────────────────────────── */
.cta{background:var(--black);color:#fff;text-align:center;padding:96px 32px}
.cta h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.045em}
.cta .btn{margin-top:28px}

/* ── footer ──────────────────────────── */
footer{
  border-top:1px solid var(--line);
  max-width:1200px;margin:0 auto;padding:28px 32px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--faint);
}

/* ── legal pages ─────────────────────── */
.legal{max-width:720px;margin:0 auto;padding:64px 32px 104px}
.legal h1{font-size:clamp(34px,4vw,48px);letter-spacing:-.04em;margin-top:6px}
.legal .updated{margin-top:12px;font-size:14px;color:var(--faint)}
.legal h2{font-size:22px;letter-spacing:-.025em;margin-top:44px}
.legal h3{font-size:16px;font-weight:600;margin-top:22px;letter-spacing:-.01em}
.legal p,.legal li{font-size:16px;line-height:1.6;color:#333;margin-top:12px}
.legal ul{padding-left:20px;margin-top:6px}
.legal li{margin-top:8px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal mark{background:#fff3c4;color:var(--ink);padding:0 4px;border-radius:3px}
.legal-links{display:flex;gap:18px}
.legal-links a:hover{color:var(--ink)}

/* ── responsive ──────────────────────── */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:48px;padding:48px 24px 80px}
  .sub,form{max-width:none}
  .grid{grid-template-columns:1fr 1fr}
  .how ol{grid-template-columns:1fr;gap:32px}
  .gets{padding-left:24px;padding-right:24px}
  .gets ol{grid-template-columns:1fr;gap:34px}
  nav,.runs,.how,.faq,footer{padding-left:24px;padding-right:24px}
  .featured .tele{min-height:220px}
}
@media(max-width:600px){
  nav{height:56px}
  nav,.hero,.runs,.how,.faq,footer{padding-left:20px;padding-right:20px}
  .hero{padding-top:36px;padding-bottom:56px;gap:36px}
  h1{font-size:clamp(38px,11.2vw,46px)}
  .sub{font-size:17px;margin-top:16px}
  form{margin-top:26px}
  .who{display:grid;grid-template-columns:1fr 1fr}
  .who label{display:block}
  .who span{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0 6px;font-size:13px;text-align:center;line-height:1.2}
  .row{flex-direction:column;gap:10px}
  .row input[type=email]{flex:0 0 auto;height:52px;font-size:16px;padding:0 16px}
  .row .btn{width:100%;height:52px}
  .trust{margin-top:22px;gap:6px 14px}
  .trust span + span::before{content:none}
  .tele{aspect-ratio:auto;padding:16px 16px 12px;gap:18px}
  .featured .tele{min-height:0;padding:18px 18px 14px}
  .spark{height:34px}
  .featured .spark{height:44px}
  .big b{font-size:34px}
  .featured .big b{font-size:44px}
  .body{padding:14px 16px 16px;gap:11px}
  .featured .body{padding:16px 18px 18px;gap:12px}
  .featured .title{font-size:19px}
  .stats{gap:14px;flex-wrap:wrap}
  .grid{grid-template-columns:1fr;gap:14px}
  .runs{padding-top:56px;padding-bottom:64px}
  .sec-head{margin-bottom:16px}
  .how,.faq{padding-top:56px;padding-bottom:64px}
  .flow{padding:48px 12px 56px}
  .flow h2{margin-top:20px}
  .flow .col,.flow .sub{display:none}
  .flow .ttl{font-size:22px}
  .flow .init{font-size:24px}
  .how ol{margin-top:28px;gap:26px}
  .how h3{font-size:19px;margin-top:8px}
  .gets{padding:56px 20px 64px}
  .gets ol{gap:30px;margin-top:28px}
  .gets h3{font-size:19px;margin-top:16px}
  summary{font-size:17px;padding:18px 0}
  .cta{padding:64px 20px}
  footer{flex-direction:column;gap:6px;padding-top:22px;padding-bottom:22px}
  .legal{padding:40px 20px 72px}
  .links{display:none}
  nav .btn{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
