/* KernelCode — detail page layout. */
#field{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.4s linear}
#field.on{opacity:var(--field-o,1)}
main.pg,footer.ft{position:relative;z-index:2}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}

/* page hero */
.ph{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--header-h) + 40px);padding-bottom:clamp(40px,8vh,96px)}
.ph.short{min-height:70svh}
.ph-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,22vw);gap:clamp(24px,4vw,72px);align-items:end}
.eyebrow{display:flex;gap:14px;align-items:baseline;margin-bottom:clamp(14px,2.4vh,28px);font-size:var(--fs-small);font-weight:500;color:rgba(255,255,255,.62)}
.ph h1{font-size:var(--fs-hero);font-weight:400;letter-spacing:var(--ls-disp);line-height:1.011}
.ph-side p{font-size:var(--fs-note);font-weight:500;line-height:1.35;color:rgba(255,255,255,.92);margin-bottom:clamp(14px,2vh,22px)}
.ph-actions{display:flex;flex-wrap:wrap;gap:10px}

/* sections */
.sec{padding-top:clamp(72px,13vh,150px);padding-bottom:clamp(72px,13vh,150px);border-top:1px solid var(--hair);background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,80px);align-items:start;margin-bottom:clamp(36px,6vh,72px)}
.sec-head .st-n{display:block;margin-bottom:14px}
.sec h2{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.038em;line-height:1.04}
.sec-head p,.prose{font-size:var(--fs-body);font-weight:500;line-height:1.45;color:rgba(255,255,255,.78);max-width:40rem}
.prose+.prose{margin-top:1em}
.sec-foot{margin-top:clamp(28px,4vh,44px);display:flex;flex-wrap:wrap;gap:10px}

/* cards */
.cards{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));border-top:1px solid var(--hair)}
.cards.c3{--cols:3}.cards.c5{--cols:5}
.card{position:relative;display:flex;flex-direction:column;gap:12px;min-height:clamp(190px,26vh,280px);padding:18px 18px 26px;border-left:1px solid var(--hair);isolation:isolate;overflow:hidden}
.card .st-n{align-self:flex-end}
.card h3{margin-top:auto;font-size:clamp(17px,1.5vw,26px);font-weight:700;letter-spacing:-.04em;transition:color .55s var(--ease)}
.card p{font-size:var(--fs-small);font-weight:500;line-height:1.38;color:rgba(255,255,255,.72);transition:color .55s var(--ease)}
.card .meta{font-size:var(--fs-small);font-weight:600;color:#fff;transition:color .55s var(--ease)}
a.card::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateY(101%);transition:transform .55s var(--ease)}
a.card .go{position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:transform .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
a.card .go svg{width:11px;height:11px}
@media (hover:hover) and (pointer:fine){
  a.card:hover::before{transform:none}
  a.card:hover h3,a.card:hover .meta{color:#000}
  a.card:hover p{color:rgba(0,0,0,.72)}
  a.card:hover .st-n{color:rgba(0,0,0,.4)}
  a.card:hover .st-n b{color:#000}
  a.card:hover .go{transform:rotate(45deg);border-color:rgba(0,0,0,.35);color:#000}
}
.price{font-size:clamp(28px,3.2vw,54px);font-weight:400;letter-spacing:-.045em;line-height:1;margin-top:auto}
.price small{display:block;margin-top:6px;font-size:var(--fs-small);letter-spacing:-.02em;color:rgba(255,255,255,.55)}

/* flow steps */
.flow{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0;counter-reset:f}
.flow li{list-style:none;position:relative;padding:22px 20px 8px 0;border-top:1px solid rgba(255,255,255,.5)}
.flow li+li{padding-left:20px}
.flow li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#fff}
.flow li+li::before{left:20px}
.flow li>b{display:block;font-size:clamp(16px,1.4vw,24px);font-weight:700;letter-spacing:-.04em;margin:10px 0 8px}
.flow p{font-size:var(--fs-small);font-weight:500;line-height:1.4;color:rgba(255,255,255,.72)}

/* key/value */
.kv{border-top:1px solid var(--hair);max-width:960px}
.kv>div{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(0,1.6fr);gap:20px;padding:clamp(12px,1.8vh,18px) 0;border-bottom:1px solid var(--hair);font-size:var(--fs-body);font-weight:500}
.kv dt{color:rgba(255,255,255,.5)}
.kv dd{color:#fff}

/* callouts */
.callout{display:flex;gap:16px;align-items:flex-start;margin-top:clamp(28px,4vh,44px);padding:18px 20px;border:1px solid rgba(255,255,255,.22);border-radius:16px;max-width:960px;font-size:var(--fs-body);font-weight:500;line-height:1.45;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4)}
.callout .tag{flex:none;height:24px;padding:0 10px;border-radius:999px;background:#fff;color:#000;font-size:11px;font-weight:700;letter-spacing:0;display:inline-flex;align-items:center;text-transform:uppercase}
.callout.warn .tag{background:#ff6b4a;color:#000}
.fine{margin-top:clamp(28px,4vh,44px);max-width:960px;font-size:clamp(11px,.85vw,13px);font-weight:500;line-height:1.5;color:rgba(255,255,255,.45)}

/* tools table */
.tools-head,.tool{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,1.4fr) minmax(0,1.2fr) 168px;column-gap:18px;align-items:center;border-bottom:1px solid var(--hair)}
.tools.t3 .tools-head,.tools.t3 .tool{grid-template-columns:minmax(170px,1fr) minmax(0,1.6fr) 168px}
.tools-head{padding:0 0 10px;font-size:var(--fs-small);font-weight:500;color:rgba(255,255,255,.4)}
.tools-head span:last-child{text-align:right}
.tool{padding:clamp(10px,1.7vh,18px) 0;transition:background-color .4s var(--ease)}
.tool code{font-family:var(--mono);font-size:clamp(12px,.98vw,16px);letter-spacing:-.01em;color:#fff}
.tool span{font-size:var(--fs-note);font-weight:500;line-height:1.3;color:rgba(255,255,255,.72)}
.tool span.dim{color:rgba(255,255,255,.5)}
@media (hover:hover) and (pointer:fine){.tool:hover{background:rgba(255,255,255,.06)}}
.acc{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:var(--fs-note);font-weight:500;white-space:nowrap}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(255,255,255,.32);font-size:11px;font-style:normal;font-weight:600;letter-spacing:0;color:#fff}
.badge.free{background:#fff;border-color:#fff;color:#000}

/* terminal */
.term{border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(8,8,8,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;max-width:760px}
.term-top{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid var(--hair);font-size:11px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.5)}
.term-top span:first-child{display:flex;align-items:center;gap:5px}
.term-top i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.term-top i:last-of-type{margin-right:8px}
.term-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:13px}
.term pre,.json{font-family:var(--mono);font-size:clamp(11px,.82vw,13.5px);line-height:1.55;letter-spacing:0;color:rgba(255,255,255,.88);white-space:pre;overflow-x:auto;scrollbar-width:none}
.json{margin-top:8px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06)}
.k{color:rgba(255,255,255,.5)}.hi{color:#ff8a6a}.okc{color:#7dffb0}
.tl{display:grid;grid-template-columns:7px minmax(0,1fr);column-gap:12px;font-size:clamp(12px,.9vw,15px);line-height:1.4;font-weight:500}
.tl::before{content:"";width:7px;height:7px;border-radius:50%;margin-top:.45em;background:rgba(255,255,255,.35)}
.tl b{display:block;font-weight:600;color:#fff}
.tl p{color:rgba(255,255,255,.66)}
.tl.warn::before{background:#ff6b4a}
.tl.ok::before{background:#7dffb0}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:start}
.caption{margin-top:10px;font-size:clamp(11px,.8vw,13px);font-weight:500;color:rgba(255,255,255,.45)}

/* architecture diagram */
.arch{display:grid;gap:14px;max-width:1100px}
.arch-row{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:14px}
.box{border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:16px 18px;background:rgba(0,0,0,.5);font-size:var(--fs-body);font-weight:600;letter-spacing:-.03em}
.box small{display:block;margin-top:6px;font-size:var(--fs-small);font-weight:500;letter-spacing:-.02em;color:rgba(255,255,255,.6)}
.box.core{background:#fff;color:#000;border-color:#fff;text-align:center;padding:22px}
.box.core small{color:rgba(0,0,0,.6)}
.arrow-down{height:28px;display:grid;place-items:center;color:rgba(255,255,255,.5);font-size:18px}

/* roadmap phases */
.phases{border-top:1px solid var(--hair)}
.phase{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1.2fr) minmax(0,1.3fr);gap:clamp(16px,3vw,48px);padding:clamp(24px,4vh,44px) 0;border-bottom:1px solid var(--hair);align-items:start}
.phase .num{font-size:clamp(40px,5vw,88px);font-weight:400;letter-spacing:-.05em;line-height:.9;color:rgba(255,255,255,.3)}
.phase h3{font-size:clamp(22px,2.4vw,40px);font-weight:400;letter-spacing:-.04em;line-height:1.05}
.phase ul{list-style:none;display:grid;gap:8px}
.phase li{font-size:var(--fs-body);font-weight:500;color:rgba(255,255,255,.8);padding-left:18px;position:relative}
.phase li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:#fff}

/* next-page link */
.next{display:block;padding-top:clamp(60px,12vh,140px);padding-bottom:clamp(60px,12vh,140px);border-top:1px solid var(--hair);background:rgba(0,0,0,.6)}
.next .st-n{display:block;margin-bottom:16px}
.next-t{display:flex;align-items:center;gap:clamp(14px,2vw,32px);font-size:var(--fs-h2);font-weight:400;letter-spacing:var(--ls-disp);line-height:1}
.next-t i{flex:none;width:clamp(44px,6vw,96px);height:clamp(44px,6vw,96px);border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;transition:transform .55s var(--ease)}
.next-t i svg{width:36%;height:36%}
@media (hover:hover) and (pointer:fine){.next:hover .next-t i{transform:rotate(45deg)}}

/* form */
.form{display:grid;gap:22px;max-width:640px}
.field{display:grid;gap:8px}
.field>span,.fieldset legend{font-size:var(--fs-small);font-weight:600;color:rgba(255,255,255,.62)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.55);font-size:16px;font-weight:500;outline:none;transition:border-color .3s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:#111}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#fff}
.fieldset{border:0;display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);font-size:14px;font-weight:600;transition:background-color .3s var(--ease),color .3s var(--ease)}
.chip input:checked+span{background:#fff;color:#000;border-color:#fff}
.chip input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);font-weight:500;line-height:1.4;color:rgba(255,255,255,.75)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:#fff;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button.btnpair{border:0;padding:0;background:none}
.form-status{min-height:1.4em;font-size:var(--fs-small);font-weight:600}
.form-status.err{color:#ff8a6a}
.done-card{display:none;max-width:640px}
.form.sent{display:none}
.form.sent+.done-card{display:block}
.done-card h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px}

/* footer */
.ft{border-top:1px solid var(--hair);background:#000;padding-top:clamp(56px,10vh,120px);padding-bottom:max(28px,env(safe-area-inset-bottom))}
.ft-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(48px,8vh,96px)}
.ft-top p{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.04em;line-height:1.02}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--hair);padding-top:24px}
.ft-cols h4{font-size:var(--fs-small);font-weight:500;color:rgba(255,255,255,.4);margin-bottom:12px}
.ft-cols a{display:block;width:max-content;font-size:var(--fs-body);font-weight:500;padding:4px 0;color:rgba(255,255,255,.88);transition:color .3s var(--ease)}
.ft-cols a:hover{color:#fff}
.ft-brand{font-size:var(--fs-logo);letter-spacing:-.045em;line-height:1}
.ft-brand span{color:rgba(255,255,255,.6)}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:clamp(40px,7vh,80px);font-size:clamp(11px,.8vw,13px);font-weight:500;color:rgba(255,255,255,.45)}

/* responsive */
@media (max-width:1100px){
  .cards.c5{--cols:3}
  .tools-head,.tool{grid-template-columns:minmax(150px,1fr) minmax(0,1.5fr) 150px}
  .tools-head span:nth-child(3),.tool .ret{display:none}
}
@media (max-width:900px){
  .ph-in,.sec-head,.split{grid-template-columns:minmax(0,1fr)}
  .ph-side{max-width:34rem}
  .cards,.cards.c3,.cards.c5{--cols:2}
  .card{min-height:170px}
  .cards>.card:nth-child(odd){border-left:0;padding-left:0}
  .cards>.card:nth-child(odd) .go{left:0}
  .cards>.card:nth-child(n+3){border-top:1px solid var(--hair)}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow li,.flow li+li{padding:0 0 26px 26px;border-top:0;border-left:1px solid rgba(255,255,255,.5)}
  .flow li::before,.flow li+li::before{left:-4px;top:0}
  .flow li>b{margin-top:0}
  .arch-row{grid-template-columns:minmax(0,1fr)}
  .phase{grid-template-columns:minmax(0,1fr)}
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools-head{display:none}
  .tool,.tools.t3 .tool{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .tool span{grid-column:1/-1;grid-row:2}
  .kv>div{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:520px){
  .cards,.cards.c3,.cards.c5{--cols:1}
  .cards>.card{border-left:0;padding-left:0}
  .cards>.card .go{left:0}
  .cards>.card+.card{border-top:1px solid var(--hair)}
  .ft-cols{grid-template-columns:minmax(0,1fr)}
}