:root{
  --paper:#E7ECE9; --paper-2:#DCE3DF; --ink:#0D1A22; --steel:#53646E; --line:#BFC9C5;
  --panel:#0D1A22; --panel-2:#16272F; --amber:#F2A900; --block:#E5392B; --pass:#2FA36B;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
code{font:500 .85em var(--mono)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px max(20px,calc((100vw - 1180px)/2));background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 19px var(--display);letter-spacing:-.01em}
.brand b{font-weight:500;color:var(--steel);margin-left:2px}
.top nav{display:flex;align-items:center;gap:22px;font-size:15px}
.top nav a{text-decoration:none;color:var(--steel)}
.top nav a:hover{color:var(--ink)}
.top nav .btn{color:var(--paper)}

/* buttons */
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:600 16px var(--body);padding:14px 24px;border-radius:10px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,color .15s}
.btn:hover{background:var(--amber);color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}

.eyebrow{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:10px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(242,169,0,.25)}

/* headings (hero styles live in film.css) */
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.02}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* try-it section */
.tryit{padding-top:96px}
.tryit .console-wrap{max-width:820px}

/* console */
.console-wrap{position:relative}
.console{position:relative;background:var(--panel);color:#D6E2E3;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(13,26,34,.65),0 0 0 1px #000;transition:box-shadow .3s}
.console[data-state="blocked"]{box-shadow:0 30px 60px -28px rgba(229,57,43,.55),0 0 0 2px var(--block)}
.console-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel-2);font:500 12px var(--mono);color:#8FA3AA}
.lights{display:flex;gap:6px}.lights i{width:10px;height:10px;border-radius:50%;background:#3A4D55}
.console-bar .title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guard{display:flex;align-items:center;gap:7px;color:#bfe9d3}
.led{width:9px;height:9px;border-radius:50%;background:var(--pass);box-shadow:0 0 8px var(--pass)}
.console[data-state="blocked"] .guard{color:#ffb4ad}
.console[data-state="blocked"] .led{background:var(--block);box-shadow:0 0 10px var(--block);animation:blink .7s 3}
@keyframes blink{50%{opacity:.25}}
.console-body{font:400 13.5px/1.75 var(--mono);padding:20px 20px 12px;min-height:290px}
.console-body p{margin:0;white-space:pre-wrap;word-break:break-word}
.muted{color:#7D939B}.footer .muted,.muted{opacity:1}
.ok{color:#7ee0ae}.bad{color:#ff8a80}.warn{color:var(--amber)}.cmd{color:#fff}
.verdict{margin-top:12px;padding:12px 14px;border-left:4px solid var(--block);background:rgba(229,57,43,.12);border-radius:0 8px 8px 0}
.verdict.pass{border-color:var(--pass);background:rgba(47,163,107,.12)}
.verdict b{display:block;color:#fff;letter-spacing:.02em}
.stamp{position:absolute;right:20px;top:92px;pointer-events:none;opacity:0;transform:rotate(-9deg) scale(1.7);border:4px solid var(--block);color:var(--block);font:800 40px var(--display);letter-spacing:.08em;padding:2px 16px;border-radius:6px;background:rgba(13,26,34,.5)}
.stamp.on{animation:stamp .45s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{to{opacity:.95;transform:rotate(-9deg) scale(1)}}
.picker{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 16px;border-top:1px solid #213640;background:var(--panel-2)}
.picker button{font:500 12.5px var(--mono);color:#D6E2E3;background:#0D1A22;border:1px solid #33505B;border-radius:8px;padding:8px 11px;cursor:pointer;transition:border-color .15s,color .15s}
.picker button:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.picker button:disabled{opacity:.45;cursor:wait}
.toast{position:absolute;left:-26px;bottom:44px;max-width:300px;display:flex;gap:12px;background:#fff;color:var(--ink);padding:13px 15px;border-radius:14px;border:1px solid var(--line);box-shadow:0 18px 40px -14px rgba(13,26,34,.5);font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(16px);pointer-events:none;transition:.4s cubic-bezier(.2,1.2,.4,1)}
.toast.on{opacity:1;transform:none}
.toast b{display:block;font-size:13px}.toast span{color:var(--steel)}
.toast-ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--block);color:#fff;font:800 17px/30px var(--display);text-align:center}
.caption{margin-top:14px;font:400 12px var(--mono);color:var(--steel);text-align:right}

/* band */
.band{background:var(--ink);color:var(--paper)}
.band p{max-width:900px;margin:0 auto;padding:60px 20px;font:500 clamp(22px,3vw,32px)/1.3 var(--display);letter-spacing:-.015em}
.band em{font-style:normal;color:var(--amber)}

/* sections */
.sec{max-width:1180px;margin:0 auto;padding:96px 20px 0}
.sec-head{max-width:640px;margin-bottom:40px}
.sec-head h2{font-size:clamp(32px,4vw,50px);font-weight:800;margin:14px 0 14px}
.sec-head p:not(.eyebrow){color:#34444D}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--ink)}
.card h3{font-size:24px;font-weight:700}
.card p{font-size:15.5px;color:#34444D;flex:1}
.card>code{display:block;font-size:12px;color:var(--steel);border-top:1px dashed var(--line);padding-top:12px}
.tag{align-self:flex-start;font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;background:var(--ink);color:var(--amber);padding:3px 8px;border-radius:5px}

.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;border:1px solid var(--ink);border-radius:14px;overflow:hidden}
.steps li{counter-increment:s;padding:28px;background:var(--paper);border-right:1px solid var(--ink);position:relative}
.steps li:last-child{border:0;background:var(--ink);color:var(--paper)}
.steps li:last-child p{color:#B8C7CC}
.steps h3{font-size:28px;font-weight:700;margin-bottom:10px}
.steps h3::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;margin-right:12px;border-radius:50%;background:var(--amber);color:var(--ink);font:600 14px var(--mono);vertical-align:4px}
.steps p{font-size:15.5px;color:#34444D}
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.principles div{padding:16px 0;border-top:3px solid var(--ink)}
.principles b{display:block;font:700 18px var(--display)}
.principles span{font-size:14.5px;color:var(--steel)}

.code{background:var(--panel);border-radius:14px;padding:26px 28px;overflow-x:auto;box-shadow:0 24px 50px -30px rgba(13,26,34,.7)}
.code pre{font:400 14px/1.8 var(--mono);color:#D6E2E3}
.code .c{color:#6F8790}.code .k{color:var(--amber)}.code .s{color:#8fdcb4}.code .n{color:#ff9b91}

.faq-list{max-width:800px}
details{border-top:1px solid var(--ink);padding:18px 0}
details:last-child{border-bottom:1px solid var(--ink)}
summary{cursor:pointer;font:700 21px var(--display);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 24px var(--mono);color:var(--steel)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:#34444D;max-width:42em}

/* access */
.access{margin-top:110px;background:var(--amber);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background-image:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(13,26,34,.06) 22px 44px)}
.access-in{max-width:1180px;margin:0 auto;padding:80px 20px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.access h2{font-size:clamp(32px,4vw,52px);font-weight:800;margin:14px 0}
.access .eyebrow{color:var(--ink)}
.access p{max-width:30em}
form{background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:8px;box-shadow:8px 8px 0 var(--ink)}
label{font-weight:600;font-size:15px;margin-top:6px}label span{font-weight:400;color:var(--steel)}
input,select{font:400 16px var(--body);padding:13px 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);width:100%}
form .btn{margin-top:14px}
.hp{position:absolute!important;left:-9999px;height:0;width:0;opacity:0}
.form-msg{min-height:1.5em;font-size:14.5px;margin-top:4px}
.form-msg.err{color:#B3261E}.form-msg.good{color:#16724a;font-weight:600}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:36px 20px;font-size:14px}
footer b span{font-weight:500;color:var(--steel)}footer .muted{color:var(--steel)}

/* responsive */
@media (max-width:980px){
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}.steps li{border-right:0;border-bottom:1px solid var(--ink)}
  .principles{grid-template-columns:1fr 1fr}
  .access-in{grid-template-columns:1fr;gap:36px}
  .toast{left:12px}
}
@media (max-width:640px){
  .top nav a:not(.btn){display:none}
  .grid{grid-template-columns:1fr}
  .sec{padding-top:72px}
  .stamp{font-size:30px;top:80px}
  .console-body{min-height:320px;font-size:12.5px}
  .access-in{padding:56px 20px}
  form{padding:20px;box-shadow:5px 5px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .stamp.on{opacity:.95;transform:rotate(-9deg)}
}

/* overflow guard for grid children */
.access-in>*,.grid>*,.steps>*{min-width:0}
.top nav .btn{white-space:nowrap}
.console-bar .title{min-width:0}
html,body{overflow-x:clip}