:root{
  --ink:#131A2A;--paper:#EFECE3;--stone:#D8D4CA;--noir:#08090D;
  --slate-d:#6F7889;--slate-l:#8A93A3;
  --ok:#2FAE7A;--alert:#C75D43;--neutral:#8A93A3;
  --line:rgba(239,236,227,.12);--line-l:rgba(19,26,42,.12);
  --display:"Josefin Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--paper);font:400 15px/1.6 var(--display);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.eyebrow{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-d)}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.01em;line-height:1.15}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.top .brand img{height:28px;display:block}
.top nav{display:flex;gap:28px}
.top nav a{text-decoration:none;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-d)}
.top nav a:hover{color:var(--paper)}

/* hero */
.hero{padding:96px 0 112px;display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,68px);font-weight:200;letter-spacing:.005em}
.hero p.lede{margin-top:24px;max-width:30em;color:var(--stone);font-size:17px}
.status{margin-top:36px;display:inline-flex;gap:12px;align-items:center;border:1px solid var(--line);padding:12px 18px;font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--stone)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--neutral);display:inline-block}

/* readout */
.readout{background:var(--paper);color:var(--ink);padding:26px 28px;font-family:var(--mono);font-size:13px}
.readout .h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-l)}
.readout .addr{margin:14px 0 18px;font-size:15px}
.readout .row{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line-l)}
.readout .k{color:var(--slate-l)}
.ok{color:var(--ok)}.al{color:var(--alert)}.nu{color:var(--neutral)}
.readout .cap{margin-top:14px;font-size:10px;color:var(--slate-l)}

/* sections */
section{padding:96px 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(28px,3.6vw,40px);margin:14px 0 18px}
section .intro{max-width:36em;color:var(--stone)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.cell{background:var(--noir);padding:32px 28px}
.cell h3{font-size:22px;margin:12px 0 10px}
.cell p{color:var(--stone)}
.cell .ex{margin-top:18px;font:400 12px/1.7 var(--mono);color:var(--slate-d)}

.chains{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.chains span{font:400 13px/1 var(--mono);border:1px solid var(--line);padding:12px 16px;color:var(--stone)}

.rules{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.rules li{list-style:none;padding:18px 0;border-top:1px solid var(--line);display:flex;gap:18px}
.rules li b{font:400 12px/1.9 var(--mono);color:var(--slate-d);min-width:2.2em}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.tier{border:1px solid var(--line);padding:32px 28px;display:flex;flex-direction:column}
.tier h3{font-size:24px}
.tier .price{margin:14px 0 4px;font:400 26px/1.2 var(--mono)}
.tier .per{font:400 12px/1 var(--mono);color:var(--slate-d)}
.tier ul{margin-top:22px;list-style:none}
.tier li{padding:9px 0;border-top:1px solid var(--line);color:var(--stone);font-size:14px}
.tier.soon{opacity:.72}
.fine{margin-top:28px;font:400 12px/1.7 var(--mono);color:var(--slate-d)}

/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 56px;font:400 12px/1.8 var(--mono);color:var(--slate-d)}
footer .f{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer img{height:22px;display:block}
footer nav{display:flex;gap:22px}
footer a{text-decoration:none}footer a:hover{color:var(--paper)}

/* document pages (paper) */
body.doc{background:var(--paper);color:var(--ink)}
body.doc .top nav a,body.doc footer{color:var(--slate-l)}
body.doc .top nav a:hover,body.doc footer a:hover{color:var(--ink)}
body.doc footer{border-top-color:var(--line-l)}
.docbody{max-width:720px;padding:56px 0 96px}
.docbody h1{font-size:clamp(34px,5vw,48px);font-weight:200;margin:14px 0 10px}
.docbody .eff{font:400 12px/1 var(--mono);color:var(--slate-l)}
.docbody h2{font-size:22px;font-weight:400;margin:44px 0 10px}
.docbody p,.docbody li{margin-top:10px}
.docbody ul{padding-left:20px}
.docbody .short{margin-top:32px;padding:22px 24px;background:var(--stone)}
.docbody code{font-family:var(--mono);font-size:13px}
.faq details{border-top:1px solid var(--line-l);padding:18px 0}
.faq summary{cursor:pointer;font-size:17px;font-weight:400;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);display:inline-block;width:1.6em;color:var(--slate-l)}
.faq details[open] summary::before{content:"−"}
.faq details p{margin:10px 0 0 1.6em}
.contact{margin-top:48px;padding:28px;background:var(--ink);color:var(--paper)}
.contact a{font-family:var(--mono)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:56px 0 72px;gap:48px}
  .grid3,.tiers{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  section{padding:72px 0}
  .top nav{gap:18px}
}
@media (max-width:420px){.top nav a.opt{display:none}}