/* Home V2 */
.hero{padding:44px 0 56px}
.hero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.4rem);margin-bottom:.4em;max-width:15ch;text-wrap:balance}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero__fine{font-size:13px;color:var(--mute);margin-top:18px}
/* live board */
.board{border:1px solid var(--line2);border-top:3px solid var(--amber);background:var(--panel);min-width:0}
.board__hd{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line2);font:500 12px/1 var(--mono)}
.board__tag{padding:4px 7px;border:1px solid var(--line2);color:var(--mute);letter-spacing:.08em}
.board__tag.is-live{color:var(--up);border-color:var(--up)}
.board__tag.is-sample{color:var(--accent);border-color:var(--accent)}
.board__src{color:var(--mute);flex:1}
.board .tbl{font-size:18px}
.board .tbl td,.board .tbl th{padding:15px 14px}
.board .tbl td.num{font-size:19px}
.board .tbl th{font-size:11px}
.board__ft{padding:10px 14px;font-size:12px;line-height:1.5;color:var(--mute);border-top:1px solid var(--line)}
@keyframes fl{0%{background:#ffe7a8}100%{background:transparent}}
.flick{animation:fl .9s ease-out}
/* how it works */
.steps{border-top:1px solid var(--line2);margin-top:28px}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:36px;padding:30px 0;border-bottom:1px solid var(--line)}
.step__t{position:relative;padding-left:48px}
.step__n{position:absolute;left:0;top:-4px;font:700 34px/1 var(--head);color:var(--accent)}
.step__t p{color:var(--mute);margin:0}
.step__t code,.note code,.faq code{font-size:.9em;color:var(--text)}
.step__c{align-self:start}
/* playground */
.play{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;margin-top:24px;align-items:start}
.play__ctl{display:grid;gap:12px}
.play__stat{font-size:13px;color:var(--mute);margin:0}
.play__out{display:grid;gap:16px;min-width:0}
.play__code,.play__json{min-height:90px}
.play__json{max-height:340px}
/* uses table */
.uses{margin-top:24px}
.uses td:first-child{width:24%}.uses td:nth-child(3){width:16%;white-space:nowrap}.uses td:last-child{white-space:nowrap}
.uses b{font-weight:600}
.note{font-size:14px;color:var(--mute);margin-top:16px}
/* data figure */
.data{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.data__fig{margin:0;border:1px solid var(--line2);background:#fff}
.data__fig img{width:100%;height:auto}
.data__fig figcaption{background:var(--panel);color:var(--mute);font-size:12px;padding:9px 12px;line-height:1.5}
.data__t p{max-width:56ch}
/* prices */
.prices{margin-top:24px}
.prices td:first-child{white-space:nowrap;font-weight:500}
.how2{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}
.how2 p{color:var(--mute);max-width:58ch}
.how2 h3{font-size:1.4rem}
/* crypto */
.crypto{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.crypto__t p{color:var(--mute);max-width:58ch}
/* compliance */
.comply{border-left:3px solid var(--accent);padding-left:22px}
.comply__p{font:500 clamp(1.15rem,2vw,1.5rem)/1.4 var(--head);max-width:56ch}
/* faq */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
.faq__l details{border-top:1px solid var(--line2)}.faq__l details:last-child{border-bottom:1px solid var(--line2)}
.faq__l summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq__l summary::-webkit-details-marker{display:none}
.faq__l summary::after{content:"+";font:500 18px/1 var(--mono);color:var(--accent)}
.faq__l details[open] summary::after{content:"-"}
.faq__l summary:hover{color:var(--accent)}
.faq__l p{color:var(--mute);margin:0 0 18px;max-width:64ch}
@media(max-width:960px){
.hero__in,.step,.play,.data,.how2,.crypto,.faq{grid-template-columns:minmax(0,1fr);gap:28px}
.hero h1{max-width:none}
}
@media(max-width:640px){
.uses thead{display:none}.uses,.uses tbody,.uses tr,.uses td{display:block;width:auto!important;white-space:normal!important}.uses tr{border-bottom:1px solid var(--line);padding:12px 0}.uses td{border:0;padding:3px 8px}
.hero{padding-top:28px}
.board .tbl td,.board .tbl th{padding:10px 8px;font-size:14px}
.board .tbl td.num{font-size:15px}
.board .tbl th{font-size:10px}
.prices td:first-child{white-space:normal}
.prices td.num{white-space:normal}
.tbl td,.tbl th{padding:10px 8px}
.gf-tick__in{gap:18px}
}
.board .cp{color:var(--text);border-color:#8f8872}.board .cp:hover{color:var(--accent);border-color:var(--accent)}