/* Layout: a committed dark, hairline-grid system like the industrial neoclouds. Cream type on black, one amber accent, square corners, mono for the technical voice (nav, buttons, specs), big grotesk for headlines. No shadows, no rounded cards, no eyebrow labels. */
:root{
  --black:#0b0b0a; --panel:#121210; --rule:#2a2a26; --rule-2:#3a3a35;
  --cream:#f1ede1; --dim:#bdb9ab; --faint:#5f5c53;
  --amber:#ffb224; --amber-ink:#0b0b0a; --ok:#9fd68a; --wait:#7b7869; --chan:#ffb224;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--black);color:var(--cream);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--black)}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono)}

/* announcement */
.bar{background:var(--cream);color:var(--black);font:500 13px/1.4 var(--mono)}
.bar .wrap{padding-block:9px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.bar a{font-weight:500;text-underline-offset:3px}

/* nav as a row of cells */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--black);border-bottom:1px solid var(--rule)}
header.nav .wrap{display:flex;align-items:stretch;padding-block:0}
.cell{display:flex;align-items:center;padding:0 22px;border-left:1px solid var(--rule);font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);text-decoration:none;min-height:60px}
.cell:hover{color:var(--cream)}
.brand{border-left:0;padding-left:0;margin-right:auto;gap:10px;color:var(--cream);font:700 18px/1 var(--sans);text-transform:none;letter-spacing:-.01em}
.brand i{display:grid;grid-template-columns:repeat(3,5px);gap:2px}
.brand i b{width:5px;height:5px;background:var(--cream)}
.brand i b:nth-child(5){background:var(--amber)}
.cell.cta{background:var(--amber);color:var(--amber-ink);border-left:0}
.cell.cta:hover{background:#ffc04f;color:var(--amber-ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 13.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:16px 20px;text-decoration:none;border:1px solid transparent;cursor:pointer;border-radius:0;transition:background .15s,color .15s,border-color .15s}
.btn-amber{background:var(--amber);color:var(--amber-ink)}
.btn-amber:hover{background:#ffc04f}
.btn-line{border-color:var(--rule-2);color:var(--cream);background:transparent}
.btn-line:hover{border-color:var(--cream)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(4px)}

/* hero */
.hero{position:relative;border-bottom:1px solid var(--rule);overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--black) 0%,rgba(11,11,10,.92) 45%,rgba(11,11,10,.55) 75%,rgba(11,11,10,.35) 100%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);min-height:620px}
.hero-copy{padding:88px 48px 64px 0;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
h1{font:600 clamp(44px,7.4vw,112px)/.92 var(--sans);letter-spacing:-.045em;margin:0;text-wrap:balance}
.hero-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.hero-sub p{margin:0;font-size:18px;line-height:1.5;color:var(--dim);max-width:46ch}
.hero-sub p strong{color:var(--cream);font-weight:500}
.ctas{display:flex;gap:10px;flex-wrap:wrap}

/* quote panel */
.quote{border-left:1px solid var(--rule);background:color-mix(in srgb,var(--black) 82%,transparent);backdrop-filter:blur(6px);padding:40px 0 40px 36px;display:flex;flex-direction:column}
.quote h2{font:600 26px/1.1 var(--sans);letter-spacing:-.025em;margin:0 0 6px}
.quote .qsub{margin:0 0 26px;color:var(--dim);font-size:15px}
.qlabel{display:block;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:8px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule-2);margin-bottom:18px}
.seg label{position:relative;display:block}
.seg label+label{border-left:1px solid var(--rule-2)}
.seg label:nth-child(4){border-left:0}
.seg label:nth-child(n+4){border-top:1px solid var(--rule-2)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;font:500 12.5px/1 var(--mono);padding:13px 4px;color:var(--cream);cursor:pointer}
.seg input:checked+span{background:var(--cream);color:var(--black)}
.seg input:focus-visible+span{outline:2px solid var(--amber);outline-offset:-2px}
.f{margin-bottom:18px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.quote select,.quote input[type=email]{width:100%;font:400 15px/1.2 var(--sans);color:var(--cream);background:var(--black);border:1px solid var(--rule-2);border-radius:0;padding:13px 12px}
.quote input::placeholder{color:var(--faint)}
.quote select:focus,.quote input:focus{outline:none;border-color:var(--amber)}
.quote .btn{width:100%;justify-content:center;padding:18px;margin-top:4px}
.quote .fine{font:400 12px/1.5 var(--mono);color:var(--faint);margin:12px 0 0}
.done{display:grid;gap:10px;padding-top:12px}
.done strong{font:600 22px/1.2 var(--sans)}
.done span{color:var(--dim)}

/* three-column value strip */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.col{padding:40px 36px 44px;border-left:1px solid var(--rule)}
.col:first-child{border-left:0;padding-left:0}
.col h3{font:600 24px/1.15 var(--sans);letter-spacing:-.02em;margin:0 0 10px;max-width:16ch}
.col p{margin:0;color:var(--dim);max-width:38ch}

/* section heads */
section{border-bottom:1px solid var(--rule)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;padding:96px 0 40px}
.head h2{font:600 clamp(34px,4.6vw,64px)/.98 var(--sans);letter-spacing:-.04em;margin:0;text-wrap:balance}
.head p{margin:0;color:var(--dim);max-width:48ch;justify-self:end}

/* platform grid */
.plats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.plat{padding:30px 28px 34px;border-left:1px solid var(--rule);text-decoration:none;display:flex;flex-direction:column;gap:22px;min-height:300px;transition:background .2s}
.plat:first-child{border-left:0}
.plat:hover{background:var(--panel)}
.plat h3{font:600 34px/1 var(--sans);letter-spacing:-.035em;margin:0}
.plat dl{margin:0;display:grid;font:400 13px/1.4 var(--mono)}
.plat dl div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--rule)}
.plat dt{color:var(--dim)} .plat dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.plat .go{margin-top:auto;font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--amber)}
.plat.lead{background:var(--cream);color:var(--black)}
.plat.lead dt{color:#5f5c53} .plat.lead dl div{border-color:#cfcabb} .plat.lead .go{color:var(--black)}
.plat.lead:hover{background:#f3efe3}

/* directory table */
.filters{display:flex;border:1px solid var(--rule-2);width:max-content;max-width:100%}
.filters button{font:500 12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;background:transparent;color:var(--dim);border:0;cursor:pointer}
.filters button+button{border-left:1px solid var(--rule-2)}
.filters button[aria-pressed="true"]{background:var(--cream);color:var(--black)}
.tbl{overflow-x:auto;border-top:1px solid var(--rule);margin-top:28px}
table{border-collapse:collapse;width:100%;min-width:900px}
th{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--faint);text-align:left;padding:16px 20px 16px 0;border-bottom:1px solid var(--rule)}
td{padding:24px 20px 24px 0;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
td.n{font:600 22px/1.15 var(--sans);letter-spacing:-.02em;white-space:nowrap}
td.n span{display:block;font:400 13.5px/1.4 var(--sans);letter-spacing:0;color:var(--dim);margin-top:6px;white-space:normal}
.tag{display:inline-block;font:500 12px/1 var(--mono);padding:6px 8px;border:1px solid var(--rule-2);margin:0 6px 6px 0;white-space:nowrap}
.st{font:500 12.5px/1 var(--mono);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.st::before{content:"";width:7px;height:7px;background:currentColor}
.st-ok{color:var(--ok)} .st-chan{color:var(--chan)} .st-wait{color:var(--wait)}
td p{margin:8px 0 0;color:var(--dim);font-size:14.5px;max-width:52ch}
td.src{font:400 13px/1.6 var(--mono);color:var(--dim);white-space:nowrap}
td.src a{color:var(--cream);text-underline-offset:3px}
tr[hidden]{display:none}
.dnote{color:var(--faint);font-size:14px;max-width:80ch;padding:24px 0 56px;margin:0}

/* accordion rows */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc details:last-child{border-bottom:0}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:20px;align-items:center;padding:26px 0;font:600 clamp(22px,2.6vw,34px)/1.15 var(--sans);letter-spacing:-.025em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:400 28px/1 var(--mono);color:var(--amber);justify-self:end}
.acc details[open] summary::after{content:"−"}
.acc summary:hover{color:#fff}
.acc .body{padding:0 0 30px;color:var(--dim);max-width:70ch;font-size:16.5px}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding:96px 0}
.split h2{font:600 clamp(34px,4.6vw,64px)/.98 var(--sans);letter-spacing:-.04em;margin:0 0 18px;text-wrap:balance}
.split .side p{color:var(--dim);margin:0;max-width:40ch}
.split .acc{border-top:1px solid var(--rule)}

/* amber band */
.band{background:var(--amber);color:var(--amber-ink)}
.band .wrap{padding-block:88px;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:40px;align-items:end}
.band h2{font:600 clamp(36px,5.4vw,80px)/.95 var(--sans);letter-spacing:-.045em;margin:0;text-wrap:balance}
.band p{margin:18px 0 0;font-size:18px;max-width:52ch}
.band .btn{background:var(--black);color:var(--cream)}
.band .btn:hover{background:#262622}

footer .wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);padding-block:0}
footer .fc{padding:36px 28px 44px;border-left:1px solid var(--rule);color:var(--dim);font-size:14px}
footer .fc:first-child{border-left:0;padding-left:0}
footer h4{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--cream);margin:0 0 14px}
footer p{margin:0 0 8px}

@media (max-width:1060px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:64px 0 40px}
  .quote{border-left:0;border-top:1px solid var(--rule);padding:32px 0 40px}
  .plats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plat:nth-child(3){border-left:0}
  .plat:nth-child(n+3){border-top:1px solid var(--rule)}
  .split{grid-template-columns:minmax(0,1fr);gap:28px;padding:72px 0}
  .head{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:72px}
  .head p{justify-self:start}
}
@media (max-width:720px){
  .navlink{display:none}
  .cell.cta{padding:0 16px}
  .hero-sub{grid-template-columns:minmax(0,1fr)}
  .cols{grid-template-columns:minmax(0,1fr)}
  .col{border-left:0;padding:28px 0;border-top:1px solid var(--rule)}
  .col:first-child{border-top:0}
  .plats{grid-template-columns:minmax(0,1fr)}
  .plat{border-left:0!important;border-top:1px solid var(--rule);min-height:0}
  .plat:first-child{border-top:0}
  .row2{grid-template-columns:minmax(0,1fr)}
  .band .wrap{grid-template-columns:minmax(0,1fr);padding-block:60px}
  footer .wrap{grid-template-columns:minmax(0,1fr)}
  footer .fc{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  footer .fc:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
[hidden]{display:none!important}

/* ---- inner pages ---- */
body{margin:0}
.navlink[aria-current="page"]{color:var(--cream);box-shadow:inset 0 -2px 0 var(--amber)}
.phero{border-bottom:1px solid var(--rule)}
.phero .wrap{padding-block:56px 52px}
.crumbs{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:0 0 28px}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--cream)}
.phero h1{font-size:clamp(40px,6.2vw,92px);max-width:16ch}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--dim);max-width:62ch;margin:26px 0 0}
.meta{font:400 13px/1.5 var(--mono);color:var(--faint);margin:22px 0 0}
.article{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;padding-block:24px 96px}
.prose{min-width:0;color:#dcd8cb;font-size:17.5px;line-height:1.72}
.prose h2{font:600 clamp(28px,3vw,42px)/1.04 var(--sans);letter-spacing:-.035em;color:var(--cream);margin:64px 0 18px;text-wrap:balance}
.prose h3{font:600 22px/1.2 var(--sans);letter-spacing:-.02em;color:var(--cream);margin:36px 0 10px}
.prose p{margin:0 0 18px;max-width:70ch}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px;max-width:68ch}
.prose li{margin:0 0 10px}
.prose li::marker{color:var(--amber)}
.prose a{color:var(--cream);text-decoration-color:var(--amber);text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--amber)}
.prose strong{color:var(--cream);font-weight:600}
.prose .tbl{margin:8px 0 28px}
.prose table{min-width:640px;font-size:15.5px}
.prose th{padding:14px 18px 14px 0}
.prose td{padding:16px 18px 16px 0;color:var(--dim)}
.prose td:first-child{color:var(--cream);font-weight:600}
.prose td.src{font-size:12.5px}
.answer{border:1px solid var(--rule-2);border-left:3px solid var(--amber);padding:22px 26px;margin:40px 0 8px;background:var(--panel)}
.answer p{margin:0;color:var(--cream);font-size:18.5px;line-height:1.6;max-width:none}
.note{font:400 13.5px/1.6 var(--mono);color:var(--faint);border-top:1px solid var(--rule);padding-top:16px;margin-top:40px}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);margin:8px 0 28px}
.pick>div{padding:24px 24px 26px;border-left:1px solid var(--rule)}
.pick>div:first-child{border-left:0}
.pick h3{margin:0 0 10px;font-size:20px}
.pick ul{margin:0;font-size:16px}
.alt{border-top:1px solid var(--rule);padding:26px 0 8px}
.alt h3{margin:0 0 8px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.alt h3 small{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--amber)}
.alt p{margin:0 0 12px}
aside.rail{position:relative}
.rail .card{position:sticky;top:84px;border:1px solid var(--rule-2);padding:28px 26px 30px;background:var(--panel)}
.rail .card h3{font:600 24px/1.1 var(--sans);letter-spacing:-.025em;margin:0 0 10px}
.rail .card p{color:var(--dim);margin:0 0 20px;font-size:15px}
.rail .card .btn{width:100%;justify-content:center}
.rail .toc{margin-top:28px;font:400 13.5px/1.5 var(--mono)}
.rail .toc b{display:block;font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--faint);margin-bottom:10px}
.rail .toc a{display:block;color:var(--dim);text-decoration:none;padding:7px 0;border-top:1px solid var(--rule)}
.rail .toc a:hover{color:var(--cream)}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.related a{padding:28px 28px 32px;border-left:1px solid var(--rule);text-decoration:none;display:flex;flex-direction:column;gap:12px;min-height:180px;transition:background .2s}
.related a:first-child{border-left:0;padding-left:0}
.related a:hover{background:var(--panel)}
.related b{font:600 24px/1.1 var(--sans);letter-spacing:-.025em}
.related span{color:var(--dim);font-size:15px}
.related i{margin-top:auto;font:500 12.5px/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--amber)}
.rel-h{font:600 clamp(28px,3vw,40px)/1 var(--sans);letter-spacing:-.035em;margin:0;padding:72px 0 28px}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);margin-bottom:72px}
.guides a{padding:26px 26px 30px;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:170px;transition:background .2s}
.guides a:nth-child(3n+1){border-left:0;padding-left:0}
.guides a:hover{background:var(--panel)}
.guides b{font:600 23px/1.12 var(--sans);letter-spacing:-.025em}
.guides span{color:var(--dim);font-size:15px}
.guides i{margin-top:auto;font:400 12.5px/1 var(--mono);font-style:normal;color:var(--faint)}
/* full quote page */
.qpage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;padding-block:56px 96px}
.qpage .quote{border:1px solid var(--rule-2);padding:36px 32px;backdrop-filter:none;background:var(--panel)}
.quote textarea,.quote input[type=text]{width:100%;font:400 15px/1.4 var(--sans);color:var(--cream);background:var(--black);border:1px solid var(--rule-2);border-radius:0;padding:13px 12px}
.quote textarea{min-height:110px;resize:vertical}
.quote textarea:focus,.quote input[type=text]:focus{outline:none;border-color:var(--amber)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.steps{counter-reset:s;list-style:none;padding:0;margin:28px 0 0;border-top:1px solid var(--rule)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);padding:20px 0;border-bottom:1px solid var(--rule);color:var(--dim)}
.steps li::before{content:"0" counter(s);font:500 13px/1.6 var(--mono);color:var(--amber)}
.steps strong{color:var(--cream);display:block;font-weight:600}
.err{color:#ff8a6b;font:400 13px/1.5 var(--mono);margin:10px 0 0}
footer .links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
footer .links a{color:var(--dim);text-decoration:none}
footer .links a:hover{color:var(--cream)}
footer .wrap.end{display:block;border-top:1px solid var(--rule);padding-block:18px;font:400 12.5px/1.5 var(--mono);color:var(--faint)}
@media (max-width:1060px){
  .article{grid-template-columns:minmax(0,1fr);gap:40px}
  .rail .card{position:static}
  .rail .toc{display:none}
  .qpage{grid-template-columns:minmax(0,1fr);gap:40px}
  .guides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guides a:nth-child(3n+1){border-left:1px solid var(--rule);padding-left:26px}
  .guides a:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:720px){
  .related,.guides,.pick{grid-template-columns:minmax(0,1fr)}
  .related a,.guides a{border-left:0!important;padding-left:0!important;border-top:1px solid var(--rule);min-height:0}
  .pick>div{border-left:0;border-top:1px solid var(--rule)}
  .pick>div:first-child{border-top:0}
  .phero .wrap{padding-block:40px}
  .qpage .quote{padding:28px 20px}
}