@import url("https://api.fontshare.com/v2/css?f[]=zodiak@400,700,401&f[]=satoshi@400,500,700&display=swap");
/* Steep: a slope. Olive-black ground, bone text, brass for the yield at the top of the slope. */
:root{--ground:#0e100c;--ground2:#151812;--rule:#252a1f;--rule2:#343a2c;--bone:#ece8dc;--dim:#9a9a86;--brass:#d4b064;--ok:#a9cf8a;--bad:#e88a7a;--r:10px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground)}
body{background:var(--ground);color:var(--bone);font:16px/1.6 Satoshi,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{flex:1}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--dim)}
.wrap{max-width:1260px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:Zodiak,serif;font-weight:400;letter-spacing:-.015em;line-height:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;border:1px solid transparent;font:700 15px Satoshi,sans-serif;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;white-space:nowrap}
.btn-acc{background:var(--brass);color:#16130a}.btn-acc:hover{background:#e0bf78}
.btn-ghost{background:transparent;border-color:var(--rule2);color:var(--bone)}.btn-ghost:hover{border-color:var(--dim)}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}

.top .wrap{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font:700 26px Zodiak,serif;text-decoration:none}
.brand img{width:28px;height:28px;border-radius:50%}
.top nav{display:flex;gap:24px;margin-left:auto}.top nav a{color:var(--dim);text-decoration:none;font-size:15px}.top nav a:hover{color:var(--bone)}
@media(max-width:760px){.top nav{display:none}.top .btn{margin-left:auto}}

/* hero: the ranking falls like a slope from the top left; the copy waits at the bottom of it, on the right */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:56px;padding:44px 0 40px}
.hero .copy{align-self:end;padding-bottom:10px}
.hero .copy h1{font-size:clamp(40px,4.6vw,64px)}
.hero .copy p{color:var(--dim);margin-top:16px}
.hero .copy .cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.hero .copy .live{color:var(--dim);font-size:14px;margin-bottom:16px;display:flex;gap:8px;align-items:center}
.slope{list-style:none}
.slope li{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);transition:padding-left 1.1s cubic-bezier(.2,.8,.2,1)}
.slope li .v{font:400 28px Zodiak,serif;font-variant-numeric:tabular-nums;min-width:3.2em}
.slope li b{font-weight:700}.slope li small{color:var(--dim);margin-left:6px}
.slope li:first-child{display:block;border-bottom-color:var(--rule2);padding-bottom:16px}
.slope li:first-child .v{display:block;font-size:clamp(84px,11vw,156px);line-height:.92;color:var(--brass)}
.slope li:first-child b{font:400 30px Zodiak,serif}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:30px}.hero .copy{order:-1}.slope li{padding-left:0!important}}
.ca{display:inline-flex;gap:10px;align-items:center;margin-top:18px;padding:10px 16px;border:1px solid var(--rule2);border-radius:999px;font-size:13px;cursor:pointer;background:var(--ground2)}.ca span{color:var(--brass)}

section{padding:110px 0 0}
.gapsec{display:grid;grid-template-columns:5fr 6fr;gap:70px;align-items:center}
.gapsec h2{font-size:clamp(40px,5vw,66px)}
.gapsec p{color:var(--dim);margin-top:16px;max-width:30em}
.gap{border-top:1px solid var(--rule2)}
.gap div{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule2)}
.gap span{color:var(--dim)}.gap b{font:400 30px Zodiak,serif;font-variant-numeric:tabular-nums}.gap .hl b{color:var(--brass);font-size:44px}
@media(max-width:860px){.gapsec{grid-template-columns:1fr;gap:30px}}

.how{display:grid;grid-template-columns:repeat(12,1fr);column-gap:22px}
.how h2{grid-column:1/6;font-size:clamp(40px,5vw,66px)}
.how .st{grid-column:6/13;padding:26px 0;border-top:1px solid var(--rule2)}
.how .st:nth-of-type(2){grid-column:5/12}.how .st:nth-of-type(3){grid-column:4/11}
.how .st h3{font-size:30px}.how .st p{color:var(--dim);margin-top:8px;max-width:36em}
@media(max-width:860px){.how h2,.how .st{grid-column:1/-1!important}}

.qa{display:grid;grid-template-columns:4fr 8fr;gap:60px}
.qa h2{font-size:clamp(40px,5vw,66px)}
.qa dl{columns:2;column-gap:44px}
.qa dt{font:700 17px Satoshi,sans-serif;break-after:avoid}.qa dd{color:var(--dim);margin:4px 0 22px;break-inside:avoid}
@media(max-width:860px){.qa{grid-template-columns:1fr;gap:20px}.qa dl{columns:1}}

.final{margin:120px 0 100px;display:grid;grid-template-columns:8fr 4fr;gap:30px;align-items:end}
.final h2{font-size:clamp(56px,8.5vw,132px)}
.final p{color:var(--dim);margin-bottom:16px}
@media(max-width:800px){.final{grid-template-columns:1fr}}

footer{background:#000;padding:36px 0}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .cols{display:flex;gap:60px;flex-wrap:wrap}
footer .col b{display:block;font-size:14px;color:var(--dim);margin-bottom:10px;font-weight:500}
footer .col a{display:block;color:#bab8a6;text-decoration:none;font-size:15px;margin:5px 0}footer .col a:hover{color:var(--bone)}
footer .note{color:var(--dim);font-size:13px;margin-top:12px;max-width:320px}

/* app */
.appg{display:grid;grid-template-columns:1fr 410px;gap:24px;margin:34px 0 90px;align-items:start}
@media(max-width:980px){.appg{grid-template-columns:1fr}}
.box{border:1px solid var(--rule2);border-radius:var(--r);background:var(--ground2);padding:22px}
.box h2{font-size:32px;margin-bottom:6px}.box .muted{font-size:14px}
.rank{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.rank th{text-align:left;font:500 13px Satoshi,sans-serif;color:var(--dim);padding:0 8px 10px}
.rank td{padding:11px 8px;border-top:1px solid var(--rule);vertical-align:middle}
.rank tr{cursor:pointer}.rank tbody tr:hover{background:#1a1d16}.rank tr.on{background:rgba(212,176,100,.08)}.rank tr.on td:first-child{box-shadow:inset 3px 0 var(--brass)}
.rank td b{font:400 18px Zodiak,serif;display:block}.rank td small{color:var(--dim);font-size:12px}
.rank .num{text-align:right;font-variant-numeric:tabular-nums}.rank .hl{color:var(--brass)}.rank .pos{color:var(--dim);width:30px}
.spark{width:96px;height:26px}.spark path{fill:none;stroke:var(--brass);stroke-width:1.5}
@media(max-width:640px){.rank th:nth-child(5),.rank td:nth-child(5),.rank th:nth-child(6),.rank td:nth-child(6){display:none}}
.lbl{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);margin:18px 0 8px}
.lbl button{background:none;border:0;color:var(--brass);cursor:pointer;font:inherit}
.amt{display:flex;align-items:center;gap:10px;border:1px solid var(--rule2);border-radius:var(--r);background:var(--ground);padding:0 16px}
.amt input{flex:1;min-width:0;height:66px;border:0;background:none;color:var(--bone);font:400 36px Zodiak,serif;outline:none}
.amt span{font:500 15px Satoshi,sans-serif;color:var(--dim)}
.tgt{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--ground)}
.tgt b{font:400 24px Zodiak,serif}.tgt span{color:var(--brass);font-size:14px}
.out{margin-top:12px;font-size:14px;color:var(--dim);min-height:44px}.out b{color:var(--bone)}.out .ok{color:var(--ok)}.out .bad{color:var(--bad)}
.big{width:100%;height:56px;margin-top:14px}
.hint{font-size:13px;color:var(--dim);margin-top:10px}.hint a{color:var(--brass)}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--rule)}
.hrow b{font:400 19px Zodiak,serif;display:block}.hrow small{color:var(--dim);font-size:13px}
.hrow .best{font-size:13px;color:var(--ok)}
.empty{color:var(--dim);padding:18px 0;font-size:14px}
.modal{position:fixed;inset:0;background:rgba(5,6,4,.75);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}.modal.open{display:flex}
.modal .box{width:100%;max-width:380px}
.wopt{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--rule2);border-radius:var(--r);background:var(--ground);color:var(--bone);font:700 15px Satoshi,sans-serif;cursor:pointer;margin-top:8px}.wopt img{width:28px;height:28px;border-radius:8px}
.toast{position:fixed;right:28px;bottom:26px;transform:translateY(20px);opacity:0;background:var(--bone);color:var(--ground);padding:12px 18px;border-radius:var(--r);font-weight:700;font-size:15px;transition:.25s;z-index:60;max-width:90vw}
.toast.show{opacity:1;transform:none}.toast.bad{background:var(--bad)}

.docs{display:grid;grid-template-columns:3fr 8fr;gap:60px;margin:50px auto 100px}
.docs h1{font-size:96px;position:sticky;top:30px;align-self:start}
.docs h2{font-size:36px;margin:40px 0 10px}.docs>div>h2:first-child{margin-top:0}
.docs p,.docs li{color:#bdbba9;margin:9px 0;max-width:40em}.docs ul{padding-left:20px}
.docs code{font-size:14px;color:var(--brass)}
.docs table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}.docs td{border-bottom:1px solid var(--rule2);padding:10px 4px;color:#bdbba9}.docs td:first-child{color:var(--bone)}
@media(max-width:860px){.docs{grid-template-columns:1fr;gap:10px}.docs h1{position:static;font-size:64px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}