:root{
  --char:#0d0b0a; --ash:#181412; --soot:#241d1a; --line:#3a302b;
  --bone:#ece4d8; --smoke:#a79d93; --ember:#ff5a1f; --ember-d:#c93f0c; --blood:#b3122f;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1080px; --gut:clamp(16px,4vw,32px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--char);color:var(--bone);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--bone)}
a:hover{color:var(--ember)}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ember);color:#000;padding:8px 12px;z-index:9}
.skip:focus{left:8px}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(13,11,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--soot)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.01em}
.brand img{width:34px;height:34px}
.nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav a{text-decoration:none;color:var(--smoke);font-size:15px}
.nav a:hover{color:var(--bone)}
@media(max-width:720px){.nav a.hide-s{display:none}}

/* buttons */
.btn{display:inline-block;padding:13px 22px;font:700 16px/1 var(--sans);text-decoration:none;border:2px solid var(--ember);color:var(--bone);background:transparent;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn.solid{background:var(--ember);color:#160a05}
.btn.solid:hover{background:#ff7240;color:#160a05}
.btn:hover{color:var(--bone);background:rgba(255,90,31,.14)}
.btn.sm{padding:10px 16px;font-size:14px}
.btn[aria-disabled=true],.btn.solid[aria-disabled=true]{background:transparent;border-color:var(--line);color:var(--smoke);cursor:default}
.btn[aria-disabled=true]:hover{background:transparent;color:var(--smoke)}

/* hero */
.hero{padding:clamp(40px,8vw,84px) 0 28px}
.wordmark{width:min(100%,780px);height:auto;margin-left:-6px}
.wordmark .a{transform:translateY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .25s}
.wordmark .b{transform:translateY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .25s}
.is-ready .wordmark .a{transform:translateY(.9px)}
.is-ready .wordmark .b{transform:translateY(-.9px)}
h1{font-size:clamp(28px,4.4vw,46px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:26px 0 14px;max-width:24ch}
.lead{color:var(--smoke);max-width:56ch;margin:0 0 26px;font-size:18px}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta small{color:var(--smoke);font-size:14px}

/* timeline figure */
.reel{margin:44px 0 0;border-top:1px solid var(--soot);padding-top:26px}
.reel figcaption{color:var(--smoke);font-size:14px;margin-top:14px;max-width:64ch}
.bars{display:flex;align-items:flex-end;gap:4px;height:120px}
.bars i{flex:1 1 0;background:var(--soot);display:block;min-width:0}
@media(max-width:560px){.bars{gap:2px}}
.bars i.hot{background:var(--ember)}
.clips{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}
.clip{width:104px;aspect-ratio:9/16;border:1px solid var(--line);background:linear-gradient(180deg,#2a211d,#14100e);position:relative;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.clip::before{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:#1d1613;border-bottom:1px solid var(--line)}
.clip .cap{position:absolute;left:8px;right:8px;bottom:28px;font-weight:800;font-size:13px;line-height:1.1;text-align:center;text-shadow:0 2px 0 #000;color:var(--bone)}
.clip .cap b{color:var(--ember)}
.clip .mk{position:absolute;right:6px;top:6px;font-size:8px;color:var(--smoke);letter-spacing:.02em}
.clip.k{outline:2px solid var(--ember)}
.clip span.tag{position:absolute;left:6px;bottom:6px;font-size:10px;color:var(--smoke)}

/* sections */
section{padding:clamp(48px,7vw,84px) 0;border-top:1px solid var(--soot)}
h2{font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:0 0 28px;max-width:22ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.steps li{counter-increment:s;padding:22px 24px 4px 0}
.steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.steps li::before{content:counter(s);display:block;font-weight:800;font-size:44px;line-height:1;color:var(--ember);margin-bottom:10px}
.steps h3{margin:0 0 6px;font-size:19px}
.steps p{margin:0;color:var(--smoke);font-size:16px}
@media(max-width:760px){.steps{grid-template-columns:1fr}.steps li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

.feat{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0}
.feat div{padding:20px 0;border-top:1px solid var(--line)}
.feat dt{font-weight:800;font-size:18px;margin:0 0 4px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.feat dd{margin:0;color:var(--smoke);font-size:16px}
.pro{font:700 12px/1 var(--sans);color:#160a05;background:var(--ember);padding:3px 7px;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)}
@media(max-width:760px){.feat{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:13px 12px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;border-bottom:2px solid var(--ember);font-size:15px}
td:nth-child(n+2),th:nth-child(n+2){width:22%}
tbody th{font-weight:600}
.y{color:var(--ember);font-weight:800}.n{color:var(--smoke)}
.tblwrap{overflow-x:auto}
.note{color:var(--smoke);font-size:15px;margin-top:16px;max-width:64ch}

details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ember);font-weight:800;font-size:22px;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:10px 0 0;color:var(--smoke);max-width:66ch}

.community{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.community p{margin:0;color:var(--smoke);max-width:56ch}
@media(max-width:700px){.community{grid-template-columns:1fr}}

footer{border-top:1px solid var(--soot);padding:34px 0 56px;color:var(--smoke);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer p{margin:0;max-width:60ch}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wordmark .a,.wordmark .b{transition:none}
  .is-ready .wordmark .a{transform:translateY(.9px)}
  .is-ready .wordmark .b{transform:translateY(-.9px)}
}