/* ---------------- problem ---------------- */
.problem{padding-block:clamp(90px,14vw,190px)}
.pr-list{display:flex;flex-direction:column;gap:clamp(36px,6vw,72px);margin-top:36px}
.pr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px 56px;align-items:end}
.pr h2{font:400 clamp(38px,6vw,86px)/1 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.pr h2 .sw{transition:color .3s;color:var(--ink)}
.js .pr h2 .sw{color:rgba(20,19,15,.16)}
.js .pr h2 .sw.lit{color:var(--ink)}
.pr p{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:420px;padding-bottom:.6em}
@media (max-width:860px){.pr{grid-template-columns:1fr}}
.answer{margin-top:clamp(60px,9vw,120px);font:400 clamp(44px,7vw,104px)/1 var(--serif);letter-spacing:-.03em}
.answer .u{position:relative;display:inline-block}
.answer .u svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.3em;overflow:visible}
.answer .u path{stroke:var(--amber);stroke-width:7;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease) .2s}
.answer.on .u path{stroke-dashoffset:0}

/* ---------------- how it works (sticky) ---------------- */
.how{position:relative}
.how-track{height:520vh}
.how-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.how-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center;width:100%}
.how-copy{position:relative;min-height:330px}
.how-copy .st{position:absolute;inset:0 0 auto 0;display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.how-copy .st.on{opacity:1;transform:none;pointer-events:auto}
.how-copy .st h3{font:400 clamp(38px,4.6vw,66px)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.how-copy .st p{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:470px}
.how-copy .ex{font:500 13px/1.5 var(--mono);color:var(--ink-3);border-left:2px solid var(--amber);padding-left:14px;max-width:470px}
.how-head{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.dots{display:flex;gap:6px}
.dots i{width:28px;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden;position:relative}
.dots i b{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--f,0));transform-origin:left}
.stepname{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.scene{position:relative;height:min(560px,62vh);border-radius:28px;background:var(--night);color:var(--paper);overflow:hidden;box-shadow:0 50px 120px -50px rgba(20,19,15,.55)}
.scene::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--p12) 1px,transparent 1px);background-size:22px 22px;opacity:.35}
.sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:36px;opacity:0;transform:scale(.97);transition:opacity .55s var(--ease),transform .8s var(--ease)}
.sc.on{opacity:1;transform:none}
.sc .lbl{font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
/* scene 0: intent typed */
.quote{font:400 clamp(26px,3vw,40px)/1.15 var(--serif);text-align:center;max-width:520px;min-height:3.5em}
.quote .caret{display:inline-block;width:2px;height:.9em;background:var(--amber);vertical-align:-.08em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.fp{font:500 13px/1 var(--mono);color:var(--p55);opacity:0;transition:opacity .6s}
.fp.on{opacity:1}
.fp b{color:var(--mint);font-weight:500}
.person{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--p75)}
.person .av{width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-weight:600}
/* scene 1: grant ticket */
.tk-wrap{position:relative;width:min(430px,88%);height:200px}
.ticket{position:absolute;left:0;top:10px;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 34px;border-radius:16px;background:var(--white);color:var(--ink);overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.sc.on .ticket{animation:tkin 1.2s var(--ease) both}
@keyframes tkin{from{transform:translateX(-60%) rotate(-8deg);opacity:0}to{transform:rotate(-2deg);opacity:1}}
.ticket .main{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.ticket .k{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ticket .v{font:600 17px/1.25 var(--sans)}
.ticket .row{display:flex;gap:8px;flex-wrap:wrap}
.ticket .chip{font:500 11px/1 var(--mono);background:var(--bone);border:1px solid var(--line);border-radius:999px;padding:6px 9px}
.ticket .stub{background:var(--amber);border-left:2px dashed var(--ink);display:grid;place-items:center}
.ticket .stub span{writing-mode:vertical-rl;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.clock{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--p55)}
.clock .n{font-size:34px;color:var(--paper)}
/* scene 2: checks */
.chk{position:relative;width:min(470px,92%);height:280px}
.chk .g{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:120px;height:170px;border-radius:22px;background:#14130f;border:1px solid var(--line-d2);display:grid;place-items:center;font:800 19px/1 var(--brand);letter-spacing:-.05em}
.chk .p{position:absolute;top:110px;left:0;padding:8px 12px;border-radius:999px;background:var(--paper);color:var(--ink);font:500 12px/1 var(--mono);white-space:nowrap;opacity:0}
.sc.on .chk .p1{animation:pass 3.6s var(--ease) .2s infinite}
.sc.on .chk .p2{animation:stop 3.6s var(--ease) 1.4s infinite}
.sc.on .chk .p3{animation:pass 3.6s var(--ease) 2.6s infinite}
@keyframes pass{0%{opacity:0;transform:translateX(0)}12%{opacity:1}45%{transform:translateX(150px)}55%{transform:translateX(150px);background:var(--mint)}85%{opacity:1;transform:translateX(330px);background:var(--mint)}100%{opacity:0;transform:translateX(360px)}}
@keyframes stop{0%{opacity:0;transform:translateX(0)}12%{opacity:1}45%{transform:translateX(150px)}52%{transform:translateX(150px);background:var(--amber)}60%{transform:translateX(138px) rotate(-4deg)}66%{transform:translateX(146px) rotate(3deg)}90%{opacity:1;transform:translateX(120px) translateY(70px) rotate(-8deg);background:var(--amber)}100%{opacity:0;transform:translateX(110px) translateY(90px)}}
.chk .note{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:14px;color:var(--p75)}
.chk .note b{color:var(--amber);font-weight:600}
.order{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.order span{font:500 11px/1 var(--mono);border:1px solid var(--line-d2);border-radius:999px;padding:7px 10px;color:var(--p75)}
.order span b{color:var(--amber);font-weight:600;margin-right:4px}
/* scene 3: record stack */
.stack{display:flex;flex-direction:column;gap:0;width:min(470px,92%)}
.stack .rr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--p8);border:1px solid var(--line-d);font-size:14px;opacity:0;transform:translateY(-14px)}
.stack .lk{height:16px;width:2px;background:var(--mint);margin-left:38px;opacity:0;transform:scaleY(0);transform-origin:top}
.sc.on .stack .rr{animation:rrin .6s var(--ease) both;animation-delay:calc(var(--i) * 420ms + 200ms)}
.sc.on .stack .lk{animation:lkin .4s var(--ease) both;animation-delay:calc(var(--i) * 420ms + 420ms)}
@keyframes rrin{to{opacity:1;transform:none}}
@keyframes lkin{to{opacity:.7;transform:none}}
.stack .rr .t{font:500 11px var(--mono);color:var(--p55)}
.stack .rr .s{font:600 12px var(--sans);white-space:nowrap}
.stack .rr.allow .s{color:var(--mint)}.stack .rr.refuse .s{color:var(--amber)}.stack .rr.deny .s{color:var(--red-bright)}
.stack .og{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);padding:0 0 10px 30px}
/* scene 4: verified */
.ver{display:flex;flex-direction:column;align-items:center;gap:16px}
.ver svg{width:150px;height:150px}
.ver circle{fill:none;stroke:var(--mint);stroke-width:5;stroke-dasharray:440;stroke-dashoffset:440}
.ver path{fill:none;stroke:var(--mint);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:110}
.sc.on .ver circle{transition:stroke-dashoffset 1.2s var(--ease) .2s;stroke-dashoffset:0}
.sc.on .ver path{transition:stroke-dashoffset .7s var(--ease) 1.1s;stroke-dashoffset:0}
.ver .big{font:400 56px/1 var(--serif);color:var(--mint)}
.ver p{color:var(--p75);text-align:center;max-width:360px;font-size:15px}
@media (max-width:900px){
  .how-track{height:560vh}
  .how-grid{grid-template-columns:1fr;gap:18px}
  .how-copy{min-height:250px}
  .how-copy .st h3{font-size:clamp(32px,8vw,44px)}
  .how-head{margin-bottom:14px}
  .scene{height:min(46svh,400px)}
  .sc{padding:18px;gap:14px}
  .chk{transform:scale(.8)}
  .stack .rr{padding:8px 10px;font-size:12px}
  .stack .lk{height:8px}
  .ver svg{width:96px;height:96px}.ver .big{font-size:40px}
  .tk-wrap{height:170px}
}
@media (max-width:900px) and (max-height:760px){.how-copy .st p{display:none}.how-copy{min-height:150px}}

/* ---------------- answers ---------------- */
.answers{padding-block:clamp(90px,13vw,170px);position:relative;overflow:hidden}
.ans-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.ans-head h2{font:400 clamp(40px,6vw,88px)/1 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.ans-head p{color:var(--p75);font-size:clamp(16px,1.4vw,19px);max-width:440px}
@media (max-width:860px){.ans-head{grid-template-columns:1fr}}
.cards5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(40px,6vw,72px)}
.c5{position:relative;border-radius:22px;padding:22px 20px 20px;background:var(--night-2);border:1px solid var(--line-d);display:flex;flex-direction:column;gap:12px;min-height:300px;overflow:hidden;transition:transform .5s var(--ease),border-color .4s}
.c5::before{content:"";position:absolute;left:-30%;right:-30%;top:-60%;height:120%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.18;transition:opacity .5s}
.c5:hover{transform:translateY(-8px);border-color:var(--c)}
.c5:hover::before{opacity:.32}
.c5 .dot{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 22px var(--c);position:relative}
.c5 h3{font:400 30px/1.02 var(--serif);color:var(--tc);position:relative}
.c5 p{font-size:14px;color:var(--p75);position:relative}
.c5 .eg{margin-top:auto;position:relative;font:500 11px/1.45 var(--mono);color:var(--p55);border-top:1px solid var(--line-d);padding-top:12px}
.c5.allow{--c:var(--green);--tc:var(--mint)}
.c5.deny{--c:var(--red);--tc:var(--red-bright)}
.c5.refuse{--c:var(--amber);--tc:var(--amber)}
.c5.wait{--c:var(--blue);--tc:var(--cobalt-tint)}
.c5.part{--c:var(--timestamp);--tc:var(--paper)}
.c5.part .dot{background:transparent;border:2px solid var(--p55);box-shadow:none}
@media (max-width:1100px){.cards5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.cards5{grid-template-columns:1fr}.c5{min-height:0}}
.stops{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:clamp(56px,8vw,96px)}
.stop{border-radius:24px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px}
.stop.r{background:linear-gradient(160deg,rgba(226,80,60,.20),rgba(226,80,60,.04));border:1px solid rgba(238,116,97,.35)}
.stop.a{background:linear-gradient(160deg,rgba(232,162,58,.22),rgba(232,162,58,.04));border:1px solid rgba(232,162,58,.4)}
.stop .by{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.stop.r .by,.stop.r h3{color:var(--red-bright)}
.stop.a .by,.stop.a h3{color:var(--amber)}
.stop h3{font:400 clamp(34px,4vw,54px)/1 var(--serif)}
.stop p{color:var(--p75);max-width:420px}
.stop code{font:500 12px var(--mono);color:var(--p55)}
.vs{display:grid;place-items:center;font:400 italic 34px var(--serif);color:var(--p35)}
@media (max-width:860px){.stops{grid-template-columns:1fr}.vs{font-size:24px}}
.down{margin-top:28px;color:var(--p75);max-width:700px}
.down b{color:var(--paper);font-weight:600}

/* ---------------- record + tamper ---------------- */
.record{padding-block:clamp(90px,13vw,170px)}
.rec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:center}
@media (max-width:900px){.rec-grid{grid-template-columns:1fr}}
.rec-copy{display:flex;flex-direction:column;gap:18px}
.rec-copy h2{font:400 clamp(40px,5.6vw,80px)/1 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.rec-copy p{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:500px}
.rec-copy .small{font-size:14px;color:var(--ink-3)}
.tamper{position:relative;border-radius:28px;background:var(--night);color:var(--paper);padding:clamp(20px,3vw,34px);box-shadow:0 50px 120px -50px rgba(20,19,15,.6);transition:background .6s}
.tamper.broken{background:#160e0c}
.tamper.shake{animation:shake .5s var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.t-og{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);padding:4px 0 12px}
.t-en{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 16px;border-radius:14px;background:var(--p8);border:1px solid var(--line-d);font-size:15px;transition:background .4s,border-color .4s,transform .4s var(--ease)}
.t-en .k{font:500 11px var(--mono);color:var(--p55)}
.t-en .s{font:600 13px var(--sans);white-space:nowrap;padding:5px 10px;border-radius:999px;transition:color .3s,background .3s}
.t-en .s.allow{color:var(--mint);background:rgba(63,185,120,.14)}
.t-en .s.deny{color:var(--red-bright);background:rgba(226,80,60,.14)}
.t-en .s.refuse{color:var(--amber);background:rgba(232,162,58,.16)}
.t-en.changed{border-color:var(--red-bright);background:rgba(238,116,97,.12);transform:translateX(6px)}
.t-en .tag{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red-bright);margin-left:8px;opacity:0;transition:opacity .3s}
.t-en.changed .tag{opacity:1}
.t-lk{position:relative;height:30px;margin-left:34px;width:2px;background:var(--mint);opacity:.75;transition:background .3s}
.t-lk span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:500 11px var(--mono);color:var(--mint);white-space:nowrap;transition:color .3s}
.t-lk.bad{background:transparent;border-left:2px dashed var(--red-bright);width:0;animation:crack .45s var(--ease)}
.t-lk.bad span{color:var(--red-bright)}
@keyframes crack{0%{transform:scaleX(1)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}100%{transform:none}}
.t-ver{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-d);padding-top:18px}
.t-ver .vv{font:400 34px/1 var(--serif);color:var(--mint);display:flex;align-items:center;gap:10px;transition:color .3s}
.tamper.broken .t-ver .vv{color:var(--red-bright)}
.t-ver .vm{font:400 12px/1.4 var(--mono);color:var(--p55)}
.t-btn{border:1px solid var(--line-d2);background:transparent;color:var(--paper);border-radius:999px;padding:11px 18px;font-weight:600;font-size:14px;min-height:44px;transition:background .25s,border-color .25s}
.t-btn:hover{background:var(--p8)}
.t-btn.pulse{animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(238,116,97,.5)}70%,100%{box-shadow:0 0 0 14px rgba(238,116,97,0)}}
@media (max-width:560px){.t-en{grid-template-columns:56px minmax(0,1fr)}.t-en .s{grid-column:2;justify-self:start}}

/* ---------------- product showcase ---------------- */
.show{padding-block:clamp(90px,12vw,160px) clamp(70px,10vw,140px);overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 0%,#1d1b16,var(--night) 70%)}
.show-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.show-head h2{font:400 clamp(40px,6vw,88px)/1 var(--serif);letter-spacing:-.025em;max-width:940px;text-wrap:balance}
.show-head p{color:var(--p75);font-size:clamp(16px,1.4vw,19px);max-width:620px}
.persp{perspective:1600px;margin-top:clamp(40px,6vw,80px)}
.console{transform-origin:50% 0;transform:rotateX(var(--rx,0deg)) scale(var(--sc,1));border-radius:24px;background:var(--bone);color:var(--ink);padding:clamp(14px,2vw,24px);box-shadow:0 80px 160px -60px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,300px);gap:18px;will-change:transform}
.side{background:var(--white);border-radius:22px;padding:16px 12px;display:flex;flex-direction:column;gap:4px;font-size:14px;box-shadow:0 1px 0 var(--line)}
.side .swm{font:800 22px/1 var(--brand);letter-spacing:-.05em;padding:4px 8px 14px}
.side a{padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink-2);display:flex;justify-content:space-between}
.side a.on{background:var(--bone);color:var(--ink);font-weight:600}
.side a .b{background:var(--blue);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:600}
.side .enf{margin-top:auto;background:var(--bone);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--ink-2)}
.side .enf b{display:block;color:var(--ink);font-size:13px}
.mainc{display:flex;flex-direction:column;gap:14px;min-width:0}
.mainc .meta{font-size:13px;color:var(--ink-3);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mainc .meta .pill{border-radius:999px;background:var(--line);padding:3px 10px;font-weight:600;color:var(--ink-2)}
.th{font:400 clamp(24px,2.7vw,40px)/1.1 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.th .n{font-size:.92em}
.th .u{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.th .u.r{text-decoration-color:var(--red)}.th .u.a{text-decoration-color:var(--amber)}.th .u.b{text-decoration-color:var(--blue)}
.hold{background:var(--white);border:2px solid var(--blue);border-radius:14px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,230px);gap:16px;box-shadow:0 0 0 6px rgba(47,95,214,.08)}
.hold .w{font:500 12px var(--mono);color:var(--ink-3)}
.hold .ac{font:600 15px var(--mono);margin:6px 0}
.hold .r{font-size:13px;color:var(--ink-2)}
.hold .sd{display:flex;flex-direction:column;gap:10px}
.hold .sd .top{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-variant-numeric:tabular-nums}
.bdg{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font:600 12px/1.2 var(--sans);white-space:nowrap}
.bdg::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bdg.wait{color:var(--blue);background:rgba(47,95,214,.12)}
.bdg.deny{color:var(--red-deep);background:rgba(226,80,60,.10)}
.bdg.refuse{color:var(--amber-text);background:rgba(232,162,58,.14)}
.bdg.allow{color:var(--green-text);background:rgba(63,185,120,.14)}
.hold .bar{height:3px;border-radius:2px;background:rgba(47,95,214,.15);overflow:hidden}
.hold .bar i{display:block;height:100%;background:var(--blue);width:99%;transition:width 1s linear}
.hold .bt{display:flex;gap:8px}
.hold .bt span{flex:1;text-align:center;border-radius:999px;padding:9px 0;font-weight:600;font-size:13px;border:1px solid var(--line-2)}
.hold .bt span:first-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dayp{background:var(--white);border-radius:14px;padding:16px;box-shadow:0 1px 0 var(--line)}
.dayp .cap,.rail .cap{font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dayp svg{width:100%;height:auto;display:block;margin-top:8px}
.dayp .tk{stroke:var(--green);opacity:0;transition:opacity .3s}
.dayp.on .tk{opacity:.55;transition-delay:calc(var(--d) * 1ms)}
.dayp .mk{opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s var(--ease)}
.dayp.on .mk{opacity:1;transform:none;transition-delay:calc(var(--d) * 1ms)}
.dayp .ax{font:500 10px var(--mono);fill:var(--timestamp)}
.lg{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-top:10px}
.lg span{display:inline-flex;gap:6px;align-items:baseline}
.lg i{width:7px;height:7px;border-radius:50%;align-self:center}
.lg .n{font-size:18px;color:var(--ink)}
.rail{display:flex;flex-direction:column;gap:14px;min-width:0}
.vcard{background:#14130f;color:var(--paper);border-radius:14px;padding:20px}
.vcard .cap{color:var(--amber)}
.vcard .big{font:400 36px/1 var(--serif);color:var(--mint);margin:12px 0 8px}
.vcard .m{font:400 11px/1.5 var(--mono);color:var(--p55)}
.vcard p{font-size:13px;color:var(--p75);margin-top:10px}
.mini{background:var(--white);border-radius:14px;padding:16px;box-shadow:0 1px 0 var(--line)}
.mini .n{font-size:30px;margin:6px 0}
.mini .segs{display:flex;gap:3px}
.mini .segs i{flex:1;height:5px;border-radius:2px;background:var(--ink)}
.mini .segs i.o{background:var(--line)}
.mini p{font-size:12px;color:var(--ink-2);margin-top:8px}
.ex-tag{text-align:center;margin-top:22px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p35)}
@media (max-width:1060px){.console{grid-template-columns:minmax(0,1fr) minmax(0,260px)}.side{display:none}}
@media (max-width:760px){.console{grid-template-columns:1fr}.hold{grid-template-columns:1fr}}

/* ---------------- start ---------------- */
.start{padding-block:clamp(90px,13vw,170px)}
.start-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.start-head h2{font:400 clamp(40px,6vw,88px)/1 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.start-head p{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:440px}
@media (max-width:860px){.start-head{grid-template-columns:1fr}}
.steps4{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:clamp(48px,7vw,84px);padding-top:38px}
.steps4 .rail4{position:absolute;left:8px;right:8px;top:8px;height:2px;background:var(--line-2)}
.steps4 .rail4 i{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left}
.s4{position:relative;display:flex;flex-direction:column;gap:12px}
.s4::before{content:"";position:absolute;top:-38px;left:0;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.s4.watch::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 6px rgba(232,162,58,.2)}
.s4 .k{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.s4.watch .k{color:var(--amber-text)}
.s4 h3{font:400 32px/1.05 var(--serif)}
.s4 p{color:var(--ink-2);font-size:15px}
.s4 .wk{display:flex;align-items:flex-end;gap:5px;height:56px;margin-top:6px}
.s4 .wk i{flex:1;background:var(--mint);border-radius:4px 4px 0 0;height:var(--h);transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease);transition-delay:calc(var(--d) * 90ms)}
.s4.on .wk i{transform:none}
.s4 .wk small{font:500 10px var(--mono);color:var(--ink-3)}
@media (max-width:900px){.steps4{grid-template-columns:1fr 1fr;row-gap:56px}.steps4 .rail4{display:none}}
@media (max-width:560px){.steps4{grid-template-columns:1fr}}
.tcheck{margin-top:clamp(48px,7vw,80px);border-radius:24px;background:#14130f;color:var(--paper);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px 48px;align-items:center}
.tcheck .q{font:400 clamp(28px,3vw,42px)/1.05 var(--serif)}
.tcheck .cap{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.tcheck .it{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-top:1px solid var(--line-d);align-items:start}
.tcheck .it b{display:block;font-weight:600}
.tcheck .it span{font-size:14px;color:var(--p75)}
.tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:2px}
.tick.ok{background:var(--green);color:var(--night)}
.tick.no{border:2px solid var(--p55)}
.tcheck .ab{border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600;font-size:13px;padding:8px 14px;white-space:nowrap}
@media (max-width:860px){.tcheck{grid-template-columns:1fr}}
@media (max-width:520px){.tcheck .it{grid-template-columns:26px minmax(0,1fr)}.tcheck .ab{grid-column:2;justify-self:start}}

/* ---------------- frameworks ---------------- */
.fw{padding-block:clamp(90px,13vw,170px)}
.fw h2{font:400 clamp(40px,6vw,88px)/1 var(--serif);letter-spacing:-.025em;max-width:1000px;text-wrap:balance}
.fw h2 + h2{color:var(--p35);margin-top:10px}
.fw .lede{color:var(--p75);margin-top:22px;font-size:clamp(16px,1.4vw,19px)}
.fwg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(40px,6vw,72px)}
.fc{border-radius:18px;background:var(--night-2);border:1px solid var(--line-d);padding:22px;display:flex;flex-direction:column;gap:8px;transition:border-color .3s,transform .5s var(--ease)}
.fc:hover{border-color:var(--line-d2);transform:translateY(-4px)}
.fc h3{font:600 17px/1.2 var(--sans)}
.fc .wh{font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p55)}
.fc p{font-size:14px;color:var(--p75)}
.fc.proto{border-color:rgba(232,162,58,.4);background:rgba(232,162,58,.06)}
.fc .tier{align-self:flex-start;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:999px;padding:5px 9px}
.fc a{color:var(--amber);font-weight:600;font-size:14px;text-decoration:none;margin-top:auto}
@media (max-width:1000px){.fwg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fwg{grid-template-columns:1fr}}

/* ---------------- limits ---------------- */
.limits{padding-block:clamp(90px,12vw,150px)}
.lim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px 80px;align-items:start}
.lim h2{font:400 clamp(40px,5.4vw,76px)/1 var(--serif);letter-spacing:-.025em}
.lim .lede{color:var(--ink-2);margin-top:18px;max-width:420px;font-size:clamp(16px,1.4vw,19px)}
.lim .lnk{display:inline-block;margin-top:18px;color:var(--blue);font-weight:600;text-decoration:none}
@media (max-width:860px){.lim{grid-template-columns:1fr}}
details{border-top:1px solid var(--line-2)}
details:last-child{border-bottom:1px solid var(--line-2)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:400 clamp(24px,2.4vw,32px)/1.1 var(--serif)}
summary::-webkit-details-marker{display:none}
summary .pl{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto;transition:transform .45s var(--ease),background .3s}
summary .pl::before{content:"+";font:400 20px/1 var(--sans)}
details[open] summary .pl{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
details::details-content{height:0;overflow:clip;transition:height .5s var(--ease),content-visibility .5s allow-discrete}
details[open]::details-content{height:auto}
details p{padding:0 0 22px;color:var(--ink-2);max-width:560px}