/* ============ Tokens ============ */
:root{
  --bg:#0a0d0f; --bg-2:#0e1316; --bg-3:#131a1d;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#f1f4f5; --body:#c7d0d3; --muted:#8e9a9e;
  --slate:#454f50; --red:#e93725; --red-btn:#cf2e1c; --red-text:#ff6e5a; --ok:#41d392;
  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px; --s9:128px;
  --gutter:16px; --maxw:1240px; --nav-h:68px; --radius:18px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (min-width:768px){:root{--gutter:32px}}
@media (min-width:1200px){:root{--nav-h:76px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 17px/1.65 var(--f-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
@media (min-width:1200px){body{font-size:18px}}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--text);margin:0;line-height:1.05;letter-spacing:-.025em;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
strong{color:var(--text);font-weight:600}
:focus-visible{outline:2px solid var(--red-text);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:200;background:var(--red-btn);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--s8)}
@media (min-width:960px){.section{padding-block:var(--s9)}}

.eyebrow{font:500 12px/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.eyebrow .n{color:var(--red-text)}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
.eyebrow.no-rule::before{display:none}
.h2{font-size:clamp(2rem,1.2rem + 3.2vw,4rem);margin-top:var(--s4);max-width:18ch}
.lead{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--body);max-width:62ch;margin-top:var(--s4)}
.red{color:var(--red)}
.glow-red{color:var(--red);text-shadow:0 0 28px rgba(233,55,37,.45)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--f-body);text-decoration:none;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .3s,background .2s,border-color .2s;cursor:pointer;white-space:nowrap}
.btn-red{background:var(--red-btn);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 8px 30px -8px rgba(233,55,37,.7)}
.btn-red:hover{background:#dc311f;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 10px 40px -6px rgba(233,55,37,.85);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.07)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* Glass + cursor glow */
.glass{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(233,55,37,.13),transparent 65%);}
.glass::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;padding:1px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,120,100,.55),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
@media (hover:hover) and (pointer:fine){.glass:hover::before,.glass:hover::after{opacity:1}}

/* Grain overlay */
body::after{content:"";position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.motion body::after{animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* Reveal */
.motion .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.motion .rv.in{opacity:1;transform:none}
.motion .rv.d1{transition-delay:.08s}.motion .rv.d2{transition-delay:.16s}.motion .rv.d3{transition-delay:.24s}


/* ============ Nav ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,13,15,.78);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav-in{height:100%;display:flex;align-items:center;gap:var(--s4)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:38px;width:auto}
@media (min-width:1200px){.brand img{height:42px}}
.nav-links{display:none;gap:4px;margin-left:auto}
.nav-links a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;font:500 14px/1 var(--f-body);color:var(--body);transition:color .2s,background .2s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-cta{display:none}
.nav-toggle{margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer;color:#fff}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:transform .3s,opacity .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(10,13,15,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:var(--s3) var(--gutter) var(--s5);max-height:calc(100vh - var(--nav-h));overflow:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu a:not(.btn){display:block;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;font:500 18px/1.2 var(--f-display);color:var(--text)}
.mobile-menu .btn{margin-top:var(--s4);width:100%}
@media (min-width:1180px){
  .nav-links{display:flex}.nav-cta{display:inline-flex}.nav-toggle{display:none}.mobile-menu{display:none!important}
}

/* ============ Hero ============ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:radial-gradient(1200px 700px at 74% 44%,rgba(233,55,37,.07),transparent 60%),var(--bg)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,var(--bg) 0%,rgba(10,13,15,.85) 30%,rgba(10,13,15,.1) 62%,rgba(10,13,15,.25) 100%)}
@media (min-width:900px){.hero-scrim{background:linear-gradient(90deg,rgba(10,13,15,.94) 0%,rgba(10,13,15,.72) 38%,rgba(10,13,15,0) 64%),linear-gradient(0deg,var(--bg) 0%,rgba(10,13,15,0) 26%)}}
.hero-in{padding-top:calc(var(--nav-h) + 38vh);padding-bottom:var(--s7)}
@media (min-width:900px){.hero{align-items:center}.hero-in{padding-top:calc(var(--nav-h) + var(--s7));padding-bottom:var(--s8)}}
.hero-copy{max-width:640px}
.hero-title{font-size:clamp(3rem,1.6rem + 6.4vw,7.25rem);line-height:.95;letter-spacing:-.045em;font-weight:600;margin-top:var(--s4)}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hero-title .w>span{display:inline-block}
.motion .hero-title .w>span{transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.motion .hero-title .w:nth-child(2)>span{animation-delay:.14s}
.motion .hero-title .w:nth-child(3)>span{animation-delay:.28s}
@keyframes rise{to{transform:none}}
.motion .hero .fade-in{opacity:0;animation:fadeUp 1s var(--ease) forwards}
.motion .hero .fade-in.f1{animation-delay:.05s}.motion .hero .fade-in.f2{animation-delay:.55s}.motion .hero .fade-in.f3{animation-delay:.7s}.motion .hero .fade-in.f4{animation-delay:.9s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-sub{margin-top:var(--s4);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);max-width:54ch;color:#c9d2d4}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.hero-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:var(--s5);font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-legend li{display:flex;align-items:center;gap:8px}
.lg-dot{width:9px;height:9px;border-radius:50%}
.lg-out{background:var(--red);box-shadow:0 0 10px var(--red)}
.lg-probe{border:1.5px solid #8f9cab}
.lg-node{width:9px;height:9px;border:1.5px solid rgba(255,255,255,.55);transform:rotate(45deg)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(233,55,37,.6)}
.motion .pulse-dot{animation:pd 2s infinite}
@keyframes pd{70%{box-shadow:0 0 0 10px rgba(233,55,37,0)}100%{box-shadow:0 0 0 0 rgba(233,55,37,0)}}
.scroll-cue{position:absolute;right:var(--gutter);bottom:var(--s5);font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:none;align-items:center;gap:12px;writing-mode:vertical-rl}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--red),transparent)}
@media (min-width:900px){.scroll-cue{display:flex}}

/* ============ Problem ============ */
.problem{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.problem-grid{display:grid;gap:var(--s6)}
@media (min-width:960px){.problem-grid{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:end}}
.findings{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media (min-width:760px){.findings{grid-template-columns:repeat(3,1fr)}}
.finding{padding:var(--s4)}
.finding .tag{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);display:flex;justify-content:space-between}
.finding .tag span:last-child{color:var(--muted)}
.finding h3{font-size:1.35rem;margin-top:var(--s4);line-height:1.15;letter-spacing:-.015em}
.finding p{margin-top:var(--s2);font-size:.95rem}
.finding svg{margin-top:var(--s4);width:100%;height:auto}
.ceiling{margin-top:var(--s7);display:grid;gap:var(--s5);align-items:center;padding:var(--s5) var(--s4)}
@media (min-width:900px){.ceiling{grid-template-columns:1.1fr 1fr;padding:var(--s6)}}
.ceiling blockquote{margin:0;font:500 clamp(1.4rem,1.1rem + 1.2vw,2.1rem)/1.2 var(--f-display);color:var(--text);letter-spacing:-.02em}
.ceiling blockquote em{font-style:normal;color:var(--red-text)}
.ceiling-svg .cv-line{stroke-dasharray:600;stroke-dashoffset:0}
.motion .ceiling.in .ceiling-svg .cv-line{animation:draw 2.4s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}

/* ============ Secure By Design (pinned) ============ */
.sbd{position:relative;background:radial-gradient(900px 500px at 70% 30%,rgba(233,55,37,.06),transparent 70%),var(--bg-2)}
.sbd-head{padding-top:var(--s8);padding-bottom:var(--s6)}
@media (min-width:960px){.sbd-head{padding-top:var(--s9)}}
.sbd-stage{position:relative;padding-bottom:var(--s8)}
.sbd-index{display:none}
.principle{display:grid;gap:var(--s5);align-items:center;padding-block:var(--s6);border-top:1px solid var(--line)}
.principle:first-child{border-top:0;padding-top:0}
@media (min-width:900px){.principle{grid-template-columns:1fr 1.08fr;gap:var(--s7)}}
.p-num{font:500 12px/1 var(--f-mono);letter-spacing:.2em;color:var(--red-text)}
.principle h3{font-size:clamp(1.9rem,1.3rem + 2.2vw,3.3rem);margin-top:var(--s3);letter-spacing:-.035em}
.principle .p-body{margin-top:var(--s4);font-size:1.05rem;max-width:48ch}
.p-points{margin-top:var(--s4);display:grid;gap:10px}
.p-points li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--body)}
.p-points li::before{content:"";flex:none;width:14px;height:1px;background:var(--red);margin-top:.8em}
.p-visual{position:relative;border-radius:22px;padding:var(--s4);aspect-ratio:48/38;display:grid;place-items:center;overflow:hidden}
.p-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px;-webkit-mask:radial-gradient(circle at 50% 50%,#000 30%,transparent 80%);mask:radial-gradient(circle at 50% 50%,#000 30%,transparent 80%);pointer-events:none}
.p-visual svg{width:100%;height:100%;position:relative}
/* pinned layout (added by JS on desktop w/ motion) */
.sbd.is-pinned .sbd-track{height:calc(100vh + var(--steps,6) * 30vh)} /* 30vh of scrolling per step */
.sbd.is-pinned .sbd-stage{position:sticky;top:0;height:100vh;padding:calc(var(--nav-h) + 16px) 0 24px;display:flex;align-items:center}
.sbd.is-pinned .sbd-grid{display:grid;grid-template-columns:210px 1fr;gap:var(--s6);width:100%}
.sbd.is-pinned .sbd-index{display:flex;flex-direction:column;justify-content:center;gap:4px;position:relative}
.sbd.is-pinned .sbd-items{position:relative;height:min(600px,calc(100vh - var(--nav-h) - 72px))}
.sbd.is-pinned .principle{position:absolute;inset:0;border:0;padding:0;opacity:0;visibility:hidden;transform:translateY(30px);transition:opacity .45s,transform .6s var(--ease),visibility 0s linear .6s}
.sbd.is-pinned .principle.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .55s .12s,transform .7s var(--ease) .12s,visibility 0s}
.sbd.is-pinned .p-visual{max-height:calc(100vh - var(--nav-h) - 80px);width:100%;justify-self:center}
.sbd-index button{all:unset;cursor:pointer;display:flex;gap:14px;align-items:center;padding:10px 0;font:500 12px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.sbd-index button .bar{width:22px;height:1px;background:var(--slate);transition:width .4s var(--ease),background .3s}
.sbd-index button.on{color:var(--text)}
.sbd-index button.on .bar{width:44px;background:var(--red);box-shadow:0 0 12px var(--red)}
.sbd-index button:focus-visible{outline:2px solid var(--red-text);outline-offset:4px}
.sbd-progress{position:absolute;left:-18px;top:10%;bottom:10%;width:1px;background:var(--line)}
.sbd-progress i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--red);box-shadow:0 0 10px var(--red)}
/* Phones / narrow screens (JS adds .is-stuck below 960px wide when the screen is at least 520px tall):
   each principle's visual sticks under the fixed nav while its text scrolls up beneath it, and the
   next principle's visual pushes it away. .p-pin is display:contents everywhere else, so the
   desktop grid and the short-screen stacked layout are unchanged. */
.p-pin{display:contents}
.sbd.is-stuck .principle{grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start;padding-block:0 var(--s6);border-top:0}
.sbd.is-stuck .p-pin{display:block;order:-1;position:sticky;top:var(--sbd-top,var(--nav-h));z-index:5;margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter) 10px;background:var(--bg-2);box-shadow:0 16px 14px 0 var(--bg-2)}
.sbd.is-stuck .p-visual{width:min(100%,calc(max(190px,40vh) * 48 / 38));margin-inline:auto}
@supports (height:1svh){.sbd.is-stuck .p-visual{width:min(100%,calc(max(190px,40svh) * 48 / 38))}}
.sbd.is-stuck .p-text{min-height:var(--sbd-dwell,50vh);transition:opacity .35s}
.sbd.is-stuck.has-active .principle:not(.is-active) .p-text{opacity:.45}

/* shared SVG visual styles */
.sv-lbl{font:500 10.5px var(--f-mono);letter-spacing:.14em;fill:#93a0a4}
.sv-lbl-b{font:600 11px var(--f-mono);letter-spacing:.14em;fill:#e6eaeb}
.sv-mono{font:400 12px var(--f-mono);fill:#aab5b8}
.sv-red{fill:var(--red-text)}
.sv-ok{fill:var(--ok)}
.flow{stroke-dasharray:5 9}
.probe-line{stroke-dasharray:3 7}
.is-active .flow{animation:dash .9s linear infinite}
.is-active .probe-line{animation:probe 2.4s linear infinite}
.is-active .probe-line.p2{animation-delay:.8s}.is-active .probe-line.p3{animation-delay:1.6s}
.is-active .probe-x{animation:blink 2.4s infinite}
.is-active .probe-x.p2{animation-delay:.8s}.is-active .probe-x.p3{animation-delay:1.6s}
@keyframes dash{to{stroke-dashoffset:-14}}
@keyframes probe{0%{stroke-dashoffset:40;opacity:0}15%{opacity:.8}70%{opacity:.8}100%{stroke-dashoffset:-30;opacity:0}}
@keyframes blink{0%,60%{opacity:.25}72%{opacity:1}100%{opacity:.25}}
.spin{transform-box:fill-box;transform-origin:center}
.is-active .spin.cw{animation:spin 26s linear infinite}
.is-active .spin.ccw{animation:spin 18s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.is-active .halo{animation:halo 3s ease-in-out infinite}
@keyframes halo{50%{opacity:.45}}
.strike{transform-box:fill-box;transform-origin:left center}
.is-active .strike{animation:strike 4s var(--ease) infinite}
@keyframes strike{0%,20%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.is-active .revoked{animation:rv 4s infinite}
@keyframes rv{0%,35%{opacity:0}45%,100%{opacity:1}}
.callout{transform-box:fill-box}
.is-active .callout{animation:pop 4.8s var(--ease) infinite}
.is-active .callout:nth-of-type(2){animation-delay:.25s}.is-active .callout:nth-of-type(3){animation-delay:.5s}.is-active .callout:nth-of-type(4){animation-delay:.75s}
@keyframes pop{0%{opacity:0;transform:translateX(12px)}12%,88%{opacity:1;transform:none}100%{opacity:0}}
.is-active .plug{animation:plug 4.8s var(--ease) infinite}
@keyframes plug{0%,10%{transform:translate(60px,30px);opacity:0}30%,55%{transform:none;opacity:1}62%{transform:translate(-4px,0)}68%{transform:translate(4px,0)}74%{transform:none}100%{transform:translate(60px,30px);opacity:0}}
.plug-x{opacity:0}
.is-active .plug-x{animation:plugx 4.8s infinite}
@keyframes plugx{0%,58%{opacity:0}64%,90%{opacity:1}100%{opacity:0}}

/* terminal */
.terminal{width:100%;height:100%;display:flex;flex-direction:column;border-radius:14px;background:#070a0b;border:1px solid var(--line-2);overflow:hidden;position:relative;box-shadow:0 0 60px -20px rgba(233,55,37,.35)}
.term-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);font:500 11px var(--f-mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#2a3336}
.term-bar i:first-child{background:#5a2a24}
.term-bar b{margin-left:auto;font-weight:500;color:var(--ok)}
.term-body{padding:14px 16px;font:400 12px/1.85 var(--f-mono);color:#b8c3c6;overflow:hidden;flex:1}
@media (min-width:1200px){.term-body{font-size:12.5px}}
.term-body div{white-space:pre;overflow:hidden;text-overflow:ellipsis}
.term-body .t{color:#6f7c80}.term-body .u{color:#e6eaeb}.term-body .a{color:#7fc4ff}.term-body .g{color:var(--ok)}.term-body .r{color:var(--red-text)}
.term-body .caret{display:inline-block;width:7px;height:14px;background:var(--red);vertical-align:-2px;animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}

/* ============ Trio ============ */
.trio{padding-block:var(--s8);background:var(--bg-2);overflow:hidden}
@media (min-width:960px){.trio{padding-block:var(--s9) calc(var(--s9) + var(--s6))}}
.trio-h{font-size:clamp(2.6rem,.8rem + 7.6vw,8.6rem);line-height:.98;letter-spacing:-.05em;font-weight:600}
.trio-h .line{display:block}
.trio-h .line+.line{margin-top:.12em}
.trio-h .tw{display:inline-block}
.trio-h .dot{color:var(--red);text-shadow:0 0 30px rgba(233,55,37,.6)}
.trio-h .line:nth-child(2){padding-left:clamp(0px,6vw,120px)}
.trio-h .line:nth-child(3){padding-left:clamp(0px,12vw,240px)}
.trio-cap{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);font:500 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.trio-cap span b{color:var(--text);font-weight:500}

/* ============ Still needs you ============ */
.needs{background:var(--bg)}
.needs-grid{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media (min-width:700px){.needs-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.needs-grid{grid-template-columns:repeat(4,1fr)}}
.need{padding:var(--s4)}
.need .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.need h3{font-size:1.2rem;margin-top:var(--s4);line-height:1.2;letter-spacing:-.01em}
.need p{margin-top:var(--s2);font-size:.95rem}

/* ============ Platform / Whisker ============ */
.platform{background:radial-gradient(900px 600px at 20% 20%,rgba(69,79,80,.25),transparent 70%),var(--bg)}
.wk-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:1000px){.wk-grid{grid-template-columns:.9fr 1.1fr;gap:var(--s7)}}
.wk-feats{display:grid;gap:12px 24px;margin-top:var(--s5)}
@media (min-width:560px){.wk-feats{grid-template-columns:1fr 1fr}}
.wk-feats li{display:flex;gap:12px;font-size:.95rem;align-items:flex-start}
.wk-feats svg{flex:none;margin-top:3px}
.wk-shot{padding:10px;border-radius:22px}
.wk-shot svg{width:100%;height:auto;border-radius:14px}
.wk-shot figcaption{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 8px 4px}

/* ============ Product rail ============ */
.rail{position:relative;background:var(--bg);padding-block:var(--s8)}
.rail-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.rail-meta{display:flex;align-items:center;gap:16px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rail-bar{width:160px;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;display:none}
.rail-bar i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 10px var(--red)}
.rail-viewport{margin-top:var(--s6)}
.rail-track{display:grid;gap:var(--s3);padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto}
@media (min-width:640px){.rail-track{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  .rail-viewport{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);scrollbar-color:var(--slate) transparent}
  .rail-track{display:flex;width:max-content;max-width:none;gap:var(--s4);padding-inline:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)))}
  .pcard{width:400px;scroll-snap-align:start}
  .rail.rail-pinned{padding:0}
  .rail.rail-pinned .rail-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h);overflow:hidden}
  .rail.rail-pinned .rail-viewport{overflow:visible;scroll-snap-type:none;margin-top:var(--s5);padding-bottom:0}
  .rail.rail-pinned .rail-bar{display:block}
  .rail.rail-pinned .rail-track{will-change:transform}
}
@media (min-width:960px) and (max-height:820px){.pcard .p-desc{display:none}}
.pcard{display:flex;flex-direction:column;padding:12px}
.plate{position:relative;border-radius:12px;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,#f4f7f8 0%,#dbe2e4 45%,#aeb9bc 100%)}
.plate::after{content:"";position:absolute;left:18%;right:18%;bottom:9%;height:10%;background:radial-gradient(ellipse at center,rgba(0,0,0,.28),transparent 70%);z-index:0}
.plate img{position:relative;z-index:1;width:86%;height:86%;object-fit:contain;transition:transform .6s var(--ease)}
.pcard:hover .plate img{transform:scale(1.04)}
.plate .ptag{position:absolute;left:12px;top:12px;z-index:2;font:600 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#1c2324;background:rgba(255,255,255,.75);padding:6px 8px;border-radius:6px}
.pcard-b{padding:var(--s4) 12px 12px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:1.45rem;letter-spacing:-.02em;line-height:1.15}
.pcard .p-kicker{font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);margin-bottom:10px}
.pcard .p-desc{margin-top:10px;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.chips li{font:500 11.5px/1 var(--f-mono);color:#cdd5d7;border:1px solid var(--line-2);padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.03)}
.rail-end{display:flex;flex-direction:column;justify-content:center;padding:var(--s5)}
@media (min-width:960px){.rail-end{width:340px}}
.rail-end h3{font-size:1.7rem;line-height:1.15}
.rail-end p{margin-top:var(--s3)}
.rail-end .btn{margin-top:var(--s4);align-self:flex-start}

/* ============ Hot-swap ============ */
.hotswap{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.hs-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:960px){.hs-grid{grid-template-columns:.85fr 1.15fr;gap:var(--s7)}}
.hs-steps{margin-top:var(--s5);display:grid;gap:10px;counter-reset:s}
.hs-step{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.hs-step b{font:600 1.25rem/1 var(--f-display);color:var(--text);letter-spacing:-.01em}
.hs-step span.k{font:500 11px/1 var(--f-mono);color:var(--muted);letter-spacing:.14em;width:22px}
.hs-step small{margin-left:auto;font:500 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.hs-scene{padding:var(--s3);border-radius:22px}
.hs-scene svg{width:100%;height:auto}
/* timeline: 10s loop */
.motion .hs-run .hs-old{animation:hsOld 10s var(--ease) infinite}
.motion .hs-run .hs-new{animation:hsNew 10s var(--ease) infinite}
.motion .hs-run .hs-led-new{animation:hsLed 10s infinite}
.motion .hs-run .hs-stream{animation:hsStream 10s infinite}
.motion .hs-run .hs-stream path{animation:dash .7s linear infinite}
.motion .hs-run .hs-prog{animation:hsProg 10s infinite}
.motion .hs-run .hs-done{animation:hsDone 10s var(--ease) infinite}
.motion .hs-run .hs-fault{animation:hsFault 10s infinite}
.motion .hs-run .hs-step:nth-child(1){animation:st1 10s infinite}
.motion .hs-run .hs-step:nth-child(2){animation:st2 10s infinite}
.motion .hs-run .hs-step:nth-child(3){animation:st3 10s infinite}
.hs-prog{transform-box:fill-box;transform-origin:left center}
.hs-done{transform-box:fill-box;transform-origin:center}
@keyframes hsOld{0%,14%{transform:none;opacity:1}30%,100%{transform:translate(0,190px);opacity:0}}
@keyframes hsNew{0%,30%{transform:translate(260px,0);opacity:0}44%,100%{transform:none;opacity:1}}
@keyframes hsLed{0%,48%{fill:#2a3336}52%,100%{fill:#41d392}}
@keyframes hsStream{0%,52%{opacity:0}56%,80%{opacity:1}86%,100%{opacity:0}}
@keyframes hsProg{0%,55%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
@keyframes hsDone{0%,80%{opacity:0;transform:scale(.6)}86%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hsFault{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes st1{0%,4%,46%,100%{border-color:var(--line);background:rgba(255,255,255,.02)}8%,42%{border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.08)}}
@keyframes st2{0%,46%,56%,100%{border-color:var(--line);background:rgba(255,255,255,.02)}48%,54%{border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.08)}}
@keyframes st3{0%,56%,98%,100%{border-color:var(--line);background:rgba(255,255,255,.02)}58%,96%{border-color:rgba(65,211,146,.55);background:rgba(65,211,146,.07)}}
/* static final (no motion) */
html:not(.motion) .hs-old{opacity:0}
html:not(.motion) .hs-led-new{fill:#41d392}
html:not(.motion) .hs-stream{opacity:1}

/* ============ Where it works ============ */
.where{background:var(--bg-2)}
.where-grid{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media (min-width:860px){.where-grid{grid-template-columns:1fr 1fr}}
.where-card{padding:var(--s5);overflow:hidden}
.where-card .big{position:absolute;right:-6px;top:-10px;font:700 clamp(3rem,2rem + 4vw,5.5rem)/1 var(--f-display);letter-spacing:-.05em;color:rgba(255,255,255,.035);pointer-events:none}
.where-card h3{font-size:1.7rem}
.where-card > p{margin-top:var(--s2);color:var(--muted);font-size:.95rem}
.apps{margin-top:var(--s4);display:grid;gap:0}
.apps li{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line);color:var(--text);font-weight:500}
.apps li svg{flex:none;opacity:.9}

/* ============ Proof ============ */
.proof{background:radial-gradient(900px 500px at 80% 0%,rgba(233,55,37,.07),transparent 70%),var(--bg)}
.cases{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media (min-width:1000px){.cases{grid-template-columns:1.25fr 1fr 1fr}}
.case{padding:var(--s5) var(--s4);display:flex;flex-direction:column}
.case .loc{font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.case h3{font-size:1.5rem;margin-top:10px;line-height:1.15}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4);padding-block:var(--s4);border-block:1px solid var(--line)}
.stats.one{grid-template-columns:1fr}
.stat .num{font:600 clamp(2.2rem,1.6rem + 2vw,3.4rem)/1 var(--f-display);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.stat .num.accent{color:var(--red);text-shadow:0 0 30px rgba(233,55,37,.35)}
.stat .num.word{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);line-height:1.05}
.stat .lbl{margin-top:8px;font-size:.85rem;color:var(--muted);line-height:1.4}
.case .scope{margin-top:var(--s4);font:500 12px/1.6 var(--f-mono);color:#aeb9bc;letter-spacing:.04em}
.case blockquote{margin:var(--s4) 0 0;font-size:1rem;line-height:1.6;color:#d4dbdd;flex:1}
.case blockquote::before{content:"\201C";display:block;font:700 3rem/0.6 var(--f-display);color:var(--red);height:.45em}
.case cite{display:block;margin-top:var(--s3);font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted)}

/* ============ Built in OKC ============ */
.okc{background:var(--bg-2);overflow:hidden}
.okc-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:1000px){.okc-grid{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.pcb{padding:10px;border-radius:22px}
.pcb svg{width:100%;height:auto;border-radius:14px;background:#0b1211}
.pcb figcaption{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 8px 4px}
.motion .pcb .pulse{animation:pcbp 3.6s linear infinite}
@keyframes pcbp{from{stroke-dashoffset:0}to{stroke-dashoffset:-460}}
.chain{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.chain li{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);padding:9px 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03)}
.chain li:not(:last-child)::after{content:"\2192";color:var(--red-text);margin-left:6px}
.nos{margin-top:var(--s5);display:grid;gap:8px;font:600 clamp(1.2rem,1rem + .8vw,1.6rem)/1.2 var(--f-display);color:var(--text);letter-spacing:-.01em}
.pillars{display:grid;gap:var(--s3);margin-top:var(--s7)}
@media (min-width:640px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{padding:var(--s4)}
.pillar .pv{font:600 clamp(2.4rem,2rem + 1.5vw,3.2rem)/1 var(--f-display);letter-spacing:-.04em;color:var(--text)}
.pillar .pv small{font-size:.42em;letter-spacing:0;color:var(--red-text);margin-left:4px;font-weight:500}
.pillar h3{font-size:1.05rem;margin-top:var(--s3);font-family:var(--f-body);letter-spacing:0;font-weight:600}
.pillar p{margin-top:6px;font-size:.92rem}

/* ============ Compare ============ */
.compare{background:var(--bg)}
.cmp{margin-top:var(--s6);padding:6px;border-radius:22px;overflow:hidden}
.cmp-scroll{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;min-width:560px}
.cmp caption{text-align:left}
.cmp th,.cmp td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.97rem}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font:500 11px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:22px}
.cmp thead th.d6{color:var(--text)}
.cmp thead th.d6 span{display:inline-flex;align-items:center;gap:8px}
.cmp tbody th{font:600 1rem/1.3 var(--f-display);color:var(--text);width:22%}
.cmp td.d6{color:var(--text);background:linear-gradient(90deg,rgba(233,55,37,.08),rgba(233,55,37,.02));position:relative}
.cmp td.d6::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);opacity:.7}
.cmp td.trad{color:var(--muted)}
.cmp .ck{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px}
@media (max-width:600px){.cmp table{min-width:0}.cmp th,.cmp td{padding:14px 10px;font-size:.88rem}.cmp tbody th{width:26%}}

/* ============ CTA ============ */
.cta{position:relative;overflow:hidden;background:radial-gradient(800px 420px at 50% 100%,rgba(233,55,37,.18),transparent 70%),var(--bg-2)}
.cta-grid{display:grid;gap:var(--s4)}
@media (min-width:1000px){.cta-grid{grid-template-columns:1.3fr 1fr;gap:var(--s5);align-items:stretch}}
.cta-main{padding:var(--s6) var(--s4)}
@media (min-width:760px){.cta-main{padding:var(--s7) var(--s6)}}
.cta-main h2{font-size:clamp(2.2rem,1.4rem + 3vw,4rem);max-width:14ch}
.cta-main .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.contact-list{margin-top:var(--s5);display:grid;gap:6px;font:500 14px/1.6 var(--f-mono);color:#c5cdd0}
.contact-list a{text-decoration:none}
.contact-list a:hover{color:#fff;text-decoration:underline}
.audit{padding:var(--s5) var(--s4);display:flex;flex-direction:column}
@media (min-width:760px){.audit{padding:var(--s6) var(--s5)}}
.audit h3{font-size:1.6rem;margin-top:var(--s3);line-height:1.15}
.audit p{margin-top:var(--s3)}
.audit .btn{margin-top:auto;align-self:flex-start}
.audit .book{margin:var(--s4) 0}

/* ============ Footer ============ */
.foot{background:#070a0b;border-top:1px solid var(--line);padding-block:var(--s7) var(--s6)}
.foot-grid{display:grid;gap:var(--s5)}
@media (min-width:860px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot img{height:44px;width:auto}
.foot p{margin-top:var(--s3);font-size:.92rem;color:var(--muted);max-width:36ch}
.foot h4{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot ul{margin-top:var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.foot ul a,.foot address a{text-decoration:none;color:var(--body);font-size:.95rem}
.foot ul a:hover,.foot address a:hover{color:#fff}
.foot address{font-style:normal;margin-top:var(--s3);font-size:.95rem;line-height:1.8}
.foot-bottom{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.85rem;color:var(--muted)}


/* ============ SmartController symbol (drawn from the product) ============ */
.sc-sym *{vector-effect:non-scaling-stroke}
.sc-body{fill:#2f3537;stroke:#8a9699;stroke-width:1.2}
.sc-line{fill:none;stroke:#6f7b7e;stroke-width:1}
.sc-face{fill:#7f898c;stroke:#a9b3b5;stroke-width:1}
.sc-key{fill:#d3d8d9;stroke:#5c6669;stroke-width:.8}
.sc-red{fill:#e93725}
.sc-scr{fill:#d9dfdd;stroke:#5c6669;stroke-width:.8}
.sc-pill{fill:#f4f6f6;stroke:#5c6669;stroke-width:.8}

/* ============ Principle 00: site sketches ============ */
.sl{fill:none;stroke:rgba(230,236,238,.8);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sl.h{stroke-width:2.2}
.sl.t{stroke-width:1;stroke:rgba(230,236,238,.4)}
.sl.r{stroke:#ff6e5a}
.sl.fp{fill:#131a1d}
.sig{fill:none;stroke:#e93725;stroke-width:1.5;stroke-linecap:round}
.site{--v:clamp(0,(var(--sp,1) * var(--sn,6.4) - var(--k)) * 1.6,1);opacity:var(--v);transform:translateY(calc((1 - var(--v)) * 16px));transition:opacity .25s,transform .25s}

/* ============ Email security screen ============ */
.needs-wrap{display:grid;gap:var(--s4);margin-top:var(--s6);align-items:start}
@media (min-width:1000px){.needs-wrap{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.needs-wrap .needs-grid{margin-top:0}
@media (min-width:700px){.needs-wrap .needs-grid{grid-template-columns:repeat(2,1fr)}}
.mail{padding:0;overflow:hidden;font-family:var(--f-body)}
.mail-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font:500 11.5px var(--f-mono);letter-spacing:.04em;color:var(--muted)}
.mail-top i{width:9px;height:9px;border-radius:50%;background:#2a3336}
.mail-top i:first-child{background:#5a2a24}
.mail-top .who{margin-left:8px}
.shield{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid rgba(65,211,146,.5);color:var(--ok);background:rgba(65,211,146,.08);border-radius:999px;font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.1em}
.shield svg{width:12px;height:13px}
.mail.scanning .shield{animation:shp 1s ease-in-out infinite}
@keyframes shp{50%{box-shadow:0 0 0 5px rgba(65,211,146,.15)}}
.mail-body{display:grid;grid-template-columns:130px 1fr;min-height:340px}
.folders{border-right:1px solid var(--line);padding:10px 0}
.folders li{padding:8px 14px;font-size:14px;display:flex;justify-content:space-between;color:var(--muted)}
.folders li.on{color:var(--text);font-weight:600;background:rgba(255,255,255,.04);border-left:2px solid var(--red)}
.folders .q b{font:500 11px var(--f-mono);background:rgba(255,255,255,.1);color:var(--text);padding:1px 7px;border-radius:9px;transition:background .3s}
.folders .q.bump b{background:var(--red)}
.msgs{position:relative}
.msg{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 16px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:background .35s,max-height .5s ease,padding .5s ease,opacity .4s}
.msg b{font-weight:600;font-size:14px;color:var(--text)}
.msg span{grid-column:1;font-size:13.5px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg time{font:500 11px var(--f-mono);color:var(--muted);grid-row:1;grid-column:2}
.msg .tag{grid-column:2;grid-row:2;align-self:center;font:600 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:4px;opacity:0;transition:opacity .3s;font-style:normal}
.msg.new{max-height:0;padding-top:0;padding-bottom:0;opacity:0}
.mail.s1 .msg.new,.mail.s2 .msg.new,.mail.s3 .msg.new{max-height:80px;padding-top:11px;padding-bottom:11px;opacity:1;background:rgba(242,184,75,.08)}
.msg.new::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(65,211,146,.25),transparent);opacity:0}
.mail.s2 .msg.new::after{opacity:1;animation:sweep 1.1s linear infinite}
@keyframes sweep{to{left:110%}}
.mail.s2 .msg.new .tag{opacity:1;color:var(--ok);border:1px solid rgba(65,211,146,.5)}
.mail.s3 .msg.new{background:rgba(233,55,37,.12)}
.mail.s3 .msg.new .tag{opacity:1;color:#fff;background:var(--red-btn)}
.mail.s3 .msg.new b,.mail.s3 .msg.new span{text-decoration:line-through;text-decoration-color:var(--red)}
.toast{position:absolute;left:12px;right:12px;bottom:12px;padding:11px 14px;border-radius:10px;background:#f1f4f5;color:#0a0d0f;font-size:13.5px;font-weight:500;display:flex;gap:10px;align-items:center;transform:translateY(160%);transition:transform .45s var(--ease)}
.toast::before{content:"";width:8px;height:8px;background:#1f9d5c;border-radius:50%;flex:none}
.mail.s4 .toast{transform:none}
.mail-cap{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 8px 0}
@media (max-width:640px){.mail-body{grid-template-columns:1fr;min-height:0}.folders{display:none}.mail-top .who{display:none}}

/* ============ Whisker.io HMI replica ============ */
.wk{background:#fff;border-radius:14px;overflow:hidden;font-family:"Montserrat",var(--f-body)}
.wk-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#f1ecf4;color:#1c1b1f;font-size:17px;font-weight:500}
.wk-bar .ham{width:18px;height:12px;border-top:2px solid #1c1b1f;border-bottom:2px solid #1c1b1f;position:relative}
.wk-bar .ham::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:#1c1b1f}
.wk-bar small{margin-left:auto;font:500 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#5d5b62}
.wk-canvas{background:#333;padding:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-height:340px}
.w{background:#2b2b2b;outline:1px dashed #3c5a86;outline-offset:2px;display:flex;flex-direction:column;color:#fff;min-width:0}
.w-h{background:#fff;color:#111;font-size:11.5px;font-weight:600;padding:3px 6px;display:flex;justify-content:space-between;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.w-h em{font-style:normal;font-size:11px;letter-spacing:1px;flex:none}
.w-h em .o{color:#f5a623}.w-h em .g{color:#35b24a}
.w-b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 6px;gap:2px;text-align:center}
.w .big{font-size:22px;font-weight:700;line-height:1.1;color:#fff}
.w .unit{font-size:12px;font-weight:600;color:#ddd}
.w-level{grid-column:span 2;grid-row:span 2}
.w-level .w-b{flex-direction:row;align-items:stretch;justify-content:flex-start;gap:8px;padding:8px}
.w-level .gauge{width:14px;border:1px solid #888;position:relative;flex:none}
.w-level .gauge i{position:absolute;left:0;right:0;bottom:0;background:#2196f3;transition:height 1s}
.w-level .chart{flex:1;display:flex;flex-direction:column;min-width:0}
.w-level svg{width:100%;flex:1;min-height:110px;background:#1f1f1f;border:1px solid #666;border-radius:0}
.w-level .rd{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-top:4px}
.w-level .rd span{font-weight:400;color:#aaa;font-size:11px}
.pbtn{display:flex;gap:4px;margin-bottom:4px}
.pbtn span{font-size:11px;font-weight:600;border:1px solid #777;color:#999;padding:2px 5px;background:#3a3a3a;transition:all .3s}
.pbtn span.on{border-color:#35b24a;color:#35b24a;background:#244a2b}
.pump-row{display:flex;align-items:center;gap:8px}
.pump-row svg{width:30px;height:28px;fill:none;stroke:#999;stroke-width:2;transition:stroke .3s;border-radius:0}
.pump-row.run svg{stroke:#35b24a}
.pump-row small{display:block;font-size:11px;color:#bbb}
.arc svg{width:52px;height:40px;border-radius:0}
.arc .bg{fill:none;stroke:#444;stroke-width:5;stroke-linecap:round}
.arc .fg{fill:none;stroke:#1bd12a;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s}
.okc-ic{width:30px;height:30px;border:2.5px solid #35b24a;border-radius:50%;display:grid;place-items:center;color:#35b24a;font-weight:700}
@media (max-width:1100px){.wk-canvas{grid-template-columns:repeat(3,1fr)}.w-level{grid-column:1/-1;grid-row:auto}}
@media (max-width:560px){.wk-canvas{grid-template-columns:1fr 1fr;padding:10px;gap:8px}}

/* ============ Easy to learn / always improving ============ */
.ease{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.ease-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:1000px){.ease-grid{grid-template-columns:1fr 1.1fr;gap:var(--s7)}}
.ease-list{margin-top:var(--s5)}
.ease-list li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.ease-list .k{font:500 12px/1.9 var(--f-mono);color:var(--red-text);letter-spacing:.1em}
.ease-list b{display:block;font:600 1.2rem/1.3 var(--f-display);color:var(--text)}
.ease-list div span{display:block;margin-top:4px;font-size:1rem}
.editor{padding:12px;border-radius:22px}
.editor svg{width:100%;height:auto}
.editor-cap{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 8px 4px}
.drag{transform-box:fill-box;transform-origin:center}
.motion .ease-run .drag{animation:drag 6s var(--ease) infinite}
.motion .ease-run .drop{animation:dropf 6s infinite}
.motion .ease-grid:not(.ease-run) .drag{opacity:0}
@keyframes drag{0%{transform:translate(-149px,-160px) scale(.5);opacity:0}10%{transform:translate(-149px,-160px) scale(.5);opacity:1}45%,88%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes dropf{0%,42%{opacity:1}46%,100%{opacity:0}}
.revs{display:grid;gap:var(--s5);margin-top:var(--s8)}
@media (min-width:1000px){.revs{grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:start}}
.revs-h{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);margin:var(--s3) 0}
.revs p+p{margin-top:var(--s3)}
.releases{display:grid;gap:10px}
@media (min-width:640px){.releases{grid-template-columns:1fr 1fr}}
.releases li{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.releases b{font:600 1.1rem/1.3 var(--f-display);color:var(--text)}
.releases li > span:last-child{font-size:.97rem}
.st{align-self:flex-start;font:600 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);margin-bottom:6px}
.st.go{border-color:rgba(233,55,37,.6);color:var(--red-text)}
.st.open{border-style:dashed;color:var(--text)}

/* ============ Readability ============ */
.principle .p-body{font-size:1.12rem;color:#cfd7d9}
.p-points li{font-size:1rem}
.finding p,.need p,.pcard .p-desc,.pillar p,.where-card > p{font-size:1rem}
.wk-feats li{font-size:1.02rem}
.stat .lbl{font-size:.92rem}
.case blockquote{font-size:1.06rem}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   Products · Solutions · Configurator (sub-pages) — added for v6 catalog
   ===================================================================== */
/* Nav additions */
.nav .btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.nav-links a[aria-current="page"],.mobile-menu a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]{background:rgba(255,255,255,.06);box-shadow:inset 0 -2px 0 var(--red)}
.btn[aria-current="page"]{border-color:rgba(233,55,37,.6)}

/* Page hero */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--nav-h) + var(--s7)) 0 var(--s7);
  background:radial-gradient(1000px 560px at 80% 10%,rgba(233,55,37,.11),transparent 62%),linear-gradient(180deg,var(--bg),var(--bg-2))}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask:radial-gradient(ellipse 80% 70% at 70% 30%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 80% 70% at 70% 30%,#000 20%,transparent 75%)}
@media (min-width:960px){.page-hero{padding:calc(var(--nav-h) + var(--s8)) 0 var(--s8)}}
.page-title{font-size:clamp(2.5rem,1.3rem + 4.8vw,5.4rem);line-height:.98;letter-spacing:-.045em;margin-top:var(--s4);max-width:17ch}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4)}
.crumbs a{text-decoration:none;color:var(--body)}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--slate)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.section.tight{padding-block:var(--s7)}
@media (min-width:960px){.section.tight{padding-block:var(--s8)}}
.bg2{background:var(--bg-2)}
.muted{color:var(--muted)}
.note{font:500 12.5px/1.6 var(--f-mono);color:#aeb9bc;letter-spacing:.02em}

/* Card link (whole card clickable, one real link inside) */
.stretch{text-decoration:none;color:inherit}
.stretch::after{content:"";position:absolute;inset:0;border-radius:var(--radius);z-index:3}
.stretch:focus-visible{outline:none}
.stretch:focus-visible::after{outline:2px solid var(--red-text);outline-offset:3px}
.pcard{position:relative}
.pcard .go{margin-top:auto;padding-top:var(--s3);font:600 14px/1 var(--f-body);color:var(--red-text);display:inline-flex;gap:8px;align-items:center}
.go .arr{transition:transform .2s}
.pcard:hover .go .arr,.sol-card:hover .go .arr{transform:translateX(3px)}
.plate-dark{background:radial-gradient(ellipse 70% 60% at 50% 42%,#1b2427 0%,#0f1517 60%,#0a0d0f 100%);border:1px solid var(--line)}
.plate-dark::after{display:none}
.plate-dark svg{position:relative;z-index:1;width:94%;height:94%}

/* Products hub */
.fit{position:sticky;top:var(--nav-h);z-index:40;background:rgba(10,13,15,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block:1px solid var(--line)}
.fit-in{display:flex;gap:var(--s3);align-items:center;padding-block:10px}
.fit-lbl{flex:none;font:500 11px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin:0}
.fit-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--slate) transparent;padding:4px 2px;min-width:0}
.fchip{all:unset;box-sizing:border-box;flex:none;cursor:pointer;font:500 13px/1 var(--f-body);color:var(--body);border:1px solid var(--line-2);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s,color .2s,box-shadow .3s;white-space:nowrap}
.fchip:hover{border-color:rgba(255,255,255,.35);color:#fff}
.fchip[aria-pressed="true"]{color:#fff;border-color:rgba(233,55,37,.8);background:rgba(233,55,37,.14);box-shadow:0 0 22px -6px rgba(233,55,37,.8)}
.fchip:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}
@media (max-width:700px){.fit-in{flex-direction:column;align-items:stretch;gap:4px}}
.fit-status{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;min-height:1.6em}
.fit-status a{color:var(--red-text)}
.cat{padding-top:var(--s7)}
.cat[hidden]{display:none}
.cat-head h2{font-size:clamp(1.8rem,1.3rem + 2vw,3rem);margin-top:var(--s3)}
.pgrid{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:640px){.pgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pgrid .pcard[hidden]{display:none}
.pcard.fits{border-color:rgba(233,55,37,.55);box-shadow:0 0 0 1px rgba(233,55,37,.25),0 30px 60px -30px rgba(233,55,37,.45)}
.fit-tag{position:absolute;right:12px;top:12px;z-index:2;font:600 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red-btn);padding:6px 8px;border-radius:6px}
.p-tagline{margin-top:10px;font-size:1rem}
.cfg-band{margin-top:var(--s7);display:grid;gap:var(--s5);align-items:center;padding:var(--s5) var(--s4);overflow:hidden}
@media (min-width:900px){.cfg-band{grid-template-columns:1.1fr .9fr;padding:var(--s6)}}
.cfg-band h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);margin-top:var(--s3);max-width:14ch}
.pn-demo{font:500 clamp(.9rem,.6rem + 1.1vw,1.25rem)/1.4 var(--f-mono);letter-spacing:.04em;color:var(--text);margin-top:var(--s4);overflow-wrap:anywhere}
.pn-demo i{font-style:normal;color:rgba(255,255,255,.28)}
.pn-demo b{font-weight:500;color:var(--red-text);text-shadow:0 0 18px rgba(233,55,37,.6)}
.cfg-band .kitvis{width:100%;height:auto;max-height:360px}

/* Product page */
.prod-hero{display:grid;gap:var(--s6);align-items:center}
@media (min-width:960px){.prod-hero{grid-template-columns:1fr 1.05fr;gap:var(--s7)}}
.prod-kicker{font:500 12px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red-text)}
.prod-name{font-size:clamp(2.5rem,1.4rem + 4.2vw,5rem);line-height:.98;letter-spacing:-.045em;margin-top:var(--s3)}
.prod-tag{margin-top:var(--s4);font:500 clamp(1.15rem,1rem + .6vw,1.5rem)/1.35 var(--f-display);color:var(--text);max-width:34ch;letter-spacing:-.01em}
.prod-sum{margin-top:var(--s4);max-width:60ch}
.stage{position:relative;isolation:isolate;padding:14px;border-radius:26px}
.stage .glow{position:absolute;inset:8% 6% -4%;z-index:-1;background:radial-gradient(ellipse at 50% 55%,rgba(233,55,37,.42),transparent 65%);filter:blur(30px);pointer-events:none}
.stage .plate{border-radius:16px}
.motion .stage .plate img{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{all:unset;box-sizing:border-box;cursor:pointer;width:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:radial-gradient(ellipse at 50% 42%,#f4f7f8,#aeb9bc)}
.thumbs button img{width:100%;aspect-ratio:4/3;object-fit:contain}
.thumbs button[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 16px -4px rgba(233,55,37,.8)}
.thumbs button:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}
.two{display:grid;gap:var(--s6)}
@media (min-width:960px){.two{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.specs{margin:var(--s5) 0 0;padding:6px var(--s4)}
.specs div{display:grid;grid-template-columns:minmax(100px,34%) 1fr;gap:var(--s3);padding:14px 0;border-top:1px solid var(--line)}
.specs div:first-child{border-top:0}
.specs dt{font:500 11.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.specs dd{margin:0;color:var(--text);font-size:.98rem;min-width:0}
.sec-list{margin-top:var(--s5);display:grid;gap:10px}
.sec-list li{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--text);font-weight:500}
.sec-list li svg{flex:none;color:var(--ok)}
.dl-list{margin-top:var(--s5);display:grid;gap:10px}
.dl{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);text-decoration:none;transition:border-color .2s,background .2s}
.dl:hover{border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.06)}
.dl>svg{flex:none}
.dl span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.dl b{color:var(--text);font-weight:600;font-size:.98rem}
.dl small{font:500 11.5px/1.4 var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
.dl .arr{color:var(--red-text);transition:transform .2s}
.dl:hover .arr{transform:translateX(3px)}
.where-used{display:grid;gap:var(--s3);margin-top:var(--s5);grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.wu{position:relative;padding:12px;display:flex;flex-direction:column;gap:6px}
.wu .sk-sm{width:100%;height:auto;aspect-ratio:144/114;border-radius:10px;background:rgba(0,0,0,.25)}
.wu b{font:600 1.05rem/1.2 var(--f-display);color:var(--text);padding:4px 4px 0}
.wu small{font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 4px 4px}
.wu:hover .sl{stroke:#fff}
.nf{max-width:640px}

/* Solutions hub + solution page */
.sol-group{padding-top:var(--s7)}
.sol-group:first-child{padding-top:0}
.sol-grid{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:640px){.sol-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.sol-grid{grid-template-columns:repeat(3,1fr)}}
.sol-card{position:relative;display:flex;flex-direction:column;padding:12px}
.sol-card .sk{border-radius:12px;background:radial-gradient(ellipse at 50% 60%,rgba(233,55,37,.1),transparent 70%),#0c1113;border:1px solid var(--line);padding:6px 16px}
.sol-card .sk svg{width:100%;height:auto;max-height:220px}
.sol-card .b{padding:var(--s4) 8px 8px;display:flex;flex-direction:column;flex:1}
.sol-card .grp{font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);margin-bottom:10px}
.sol-card h3{font-size:1.45rem;line-height:1.15}
.sol-card p{margin-top:10px;font-size:1rem}
.sol-card .kitline{margin-top:var(--s3);font:500 11.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sol-card .kitline b{color:var(--text);font-weight:500}
.sol-card .go{margin-top:auto;padding-top:var(--s3);font:600 14px/1 var(--f-body);color:var(--red-text);display:inline-flex;gap:8px;align-items:center}
.sol-card:hover .sl{stroke:#fff}
.sol-hero{display:grid;gap:var(--s6);align-items:center}
@media (min-width:1000px){.sol-hero{grid-template-columns:1fr 1.05fr;gap:var(--s7)}}
.scene-wrap{padding:10px;border-radius:24px;position:relative;margin:0}
.scene-wrap::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px;-webkit-mask:radial-gradient(circle,#000 30%,transparent 80%);mask:radial-gradient(circle,#000 30%,transparent 80%)}
.scene-wrap figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px}
.scene{width:100%;height:auto}
.scene .pkt{opacity:0}
.motion .anim .pkt{opacity:1;offset-distance:0%;animation:pkt 2.6s var(--ease) infinite}
@keyframes pkt{0%{offset-distance:0%;opacity:0}10%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.motion .anim .flow{animation:dash .9s linear infinite}
.motion .anim .sig{animation:sigp 2.2s ease-in-out infinite}
.motion .anim .halo{animation:halo 3s ease-in-out infinite}
.motion .anim .probe-line{animation:probe 3.2s linear infinite}
.motion .anim .probe-x{animation:blink 3.2s infinite}
.motion .anim .lvl{animation:lvl 2.4s ease-in-out infinite}
@keyframes sigp{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes lvl{0%,100%{opacity:.45}50%{opacity:1}}
.mon{margin-top:var(--s5);display:grid;gap:0}
.mon li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line);color:var(--text);font-weight:500}
.mon li svg{flex:none;margin-top:5px}
.problem-q{font:500 clamp(1.3rem,1.05rem + 1vw,1.9rem)/1.35 var(--f-display);color:var(--text);letter-spacing:-.015em;max-width:40ch;margin-top:var(--s4)}
.kitcard{display:grid;gap:var(--s5);padding:var(--s4);margin-top:var(--s5);align-items:center}
@media (min-width:900px){.kitcard{grid-template-columns:.9fr 1.1fr;padding:var(--s5)}}
.kitcard h3{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);margin-top:var(--s2)}
.kitcard .specs{padding:0;margin-top:var(--s4)}
.eng{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:900px){.eng{grid-template-columns:1.15fr 1fr 1fr}}
.eng-main{padding:var(--s5) var(--s4);display:flex;flex-direction:column}
.eng-main h3{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);margin-top:var(--s3)}
.eng-main p{margin-top:var(--s3)}
.eng-main .hero-btns{margin-top:auto;padding-top:var(--s4)}
@media (min-width:900px){.case-one{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s6);align-items:center}}
.case-one blockquote{flex:none}

/* Configurator */
.cfg{display:grid;gap:var(--s5);align-items:start}
@media (min-width:1080px){.cfg{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--s6)}}
.cfg-steps{display:grid;gap:var(--s3);min-width:0}
.step{padding:var(--s4);transition:border-color .3s}
@media (min-width:760px){.step{padding:var(--s5)}}
.step[hidden]{display:none}
.step fieldset{border:0;margin:0;padding:0;min-width:0}
.step legend{padding:0;display:flex;align-items:baseline;gap:14px;width:100%}
.step legend .k{font:500 12px/1 var(--f-mono);letter-spacing:.16em;color:var(--red-text);flex:none}
.step legend .t{font:600 clamp(1.3rem,1.1rem + .8vw,1.75rem)/1.15 var(--f-display);color:var(--text);letter-spacing:-.02em}
.step .hint{margin-top:8px;color:var(--muted);font-size:.95rem}
.step.done{border-color:rgba(233,55,37,.35)}
.step.done legend .k::after{content:" \2713";color:var(--ok)}
.opts{display:grid;gap:10px;margin-top:var(--s4)}
.opts.c3{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.opts.c2{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.opts.c4{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.oc{display:flex;flex-direction:column;gap:6px;height:100%;padding:14px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.025);transition:border-color .2s,background .2s,box-shadow .3s}
.opt:hover .oc{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.045)}
.opt input:checked+.oc{border-color:var(--red);background:linear-gradient(180deg,rgba(233,55,37,.14),rgba(233,55,37,.04));box-shadow:0 0 0 1px rgba(233,55,37,.4) inset,0 14px 36px -16px rgba(233,55,37,.8)}
.opt input:focus-visible+.oc{outline:2px solid var(--red-text);outline-offset:3px}
.opt:hover .sl,.opt input:checked+.oc .sl{stroke:#fff}
.oc b{font:600 1.05rem/1.2 var(--f-display);color:var(--text)}
.oc small{font:500 11px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.oc .code{font:500 12px/1 var(--f-mono);color:var(--red-text);letter-spacing:.06em}
.oc .sk-sm{width:100%;height:auto;aspect-ratio:144/114;border-radius:8px;background:rgba(0,0,0,.28)}
.oc .mini{display:grid;place-items:center;height:96px;border-radius:8px;background:radial-gradient(ellipse at 50% 42%,#f4f7f8,#aeb9bc);overflow:hidden}
.oc .mini img{height:90px;width:auto;object-fit:contain}
.oc .ico{display:grid;place-items:center;height:64px;border-radius:8px;background:rgba(0,0,0,.25)}
.oc .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.oc .check{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center}
.opt input:checked+.oc .check{border-color:var(--red);background:var(--red);box-shadow:0 0 10px var(--red)}
.opt input:checked+.oc .check::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.auto{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:14px 16px;border-radius:14px;border:1px dashed rgba(233,55,37,.5);background:rgba(233,55,37,.05);color:var(--text)}
.auto .code{font:500 13px/1 var(--f-mono);color:var(--red-text)}
.swatch{width:100%;height:46px;border-radius:8px;border:1px solid rgba(0,0,0,.4)}
.sw-P{background:linear-gradient(135deg,#e2e7e8,#b9c2c5)}
.sw-S{background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 4px),linear-gradient(135deg,#eef1f2,#98a3a6)}
.sw-C{background:linear-gradient(135deg,#6c777c,#454f53)}
.custom{margin-top:var(--s5);padding-top:var(--s4);border-top:1px dashed var(--line-2)}
.custom h3{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.custom ul{display:grid;gap:8px;margin-top:12px}
@media (min-width:640px){.custom ul{grid-template-columns:repeat(3,1fr)}}
.custom a{display:flex;flex-direction:column;gap:6px;height:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);text-decoration:none;background:rgba(255,255,255,.02);transition:border-color .2s}
.custom a:hover{border-color:rgba(255,255,255,.34)}
.custom a b{color:var(--text);font-weight:600;font-size:.95rem}
.custom a small{font:500 11px/1.3 var(--f-mono);color:var(--red-text);letter-spacing:.06em;text-transform:uppercase}

.cfg-rail{display:grid;gap:var(--s3);min-width:0}
@media (min-width:1080px){.cfg-rail{position:sticky;top:calc(var(--nav-h) + 16px)}}
.pn-card{padding:var(--s4)}
.pn-card::before{opacity:1;background:radial-gradient(420px circle at 50% 0%,rgba(233,55,37,.16),transparent 70%)}
.pn-lbl{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 11px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pn-lbl .st{margin:0}
.pn{position:relative;margin-top:var(--s3);font:500 clamp(1.05rem,.55rem + 1.45vw,1.5rem)/1.55 var(--f-mono);letter-spacing:.02em;color:var(--text);overflow-wrap:anywhere}
.pn .seg{border-radius:6px;padding:1px 1px;transition:color .35s,text-shadow .35s,background .2s;cursor:default}
.pn .dim{color:rgba(255,255,255,.3)}
.pn .lit{color:#fff;text-shadow:0 0 16px rgba(233,55,37,.55);transition:color .35s,text-shadow .35s}
.motion .pn .seg.flash{animation:segflash 1.1s var(--ease)}
@keyframes segflash{0%{color:#fff;text-shadow:0 0 2px #fff,0 0 28px #e93725,0 0 50px #e93725;background:rgba(233,55,37,.3)}}
.pn .seg.hl{background:rgba(233,55,37,.25)}
.pn .seg.hl .lit{color:#fff}
.pn .dash{color:rgba(255,255,255,.45)}
.pn-card.done .pn .lit,.pn-card.done .pn .dash{color:var(--red-text);text-shadow:0 0 22px rgba(233,55,37,.7)}
.pn-card.done .pn .seg.hl .lit{color:#fff}
.decode{margin-top:var(--s3);display:grid;gap:2px}
.decode li{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:baseline;padding:6px 8px;border-radius:8px;font-size:.9rem;color:var(--body);transition:background .2s;cursor:default}
.decode li code{font:500 12px/1.3 var(--f-mono);color:var(--red-text)}
.decode li.dim{color:var(--muted)}
.decode li.dim code{color:rgba(255,255,255,.34)}
.decode li.hl{background:rgba(233,55,37,.13)}
.pn-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.pn-actions .btn{min-height:40px;padding:0 16px;font-size:14px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.vis-card{padding:10px;margin:0}
.vis-card .kitvis{width:100%;height:auto;display:block;max-height:420px}
@media (min-width:1080px){.vis-card .kitvis{max-height:max(200px,calc(100vh - var(--nav-h) - 500px));margin-inline:auto}}
.vis-card figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px}
.motion .kv-in{animation:kvIn .6s var(--ease)}
@keyframes kvIn{from{opacity:0}to{opacity:1}}
.pn-mini{display:none}
@media (max-width:1079px){
  .pn-mini{display:flex;position:sticky;top:var(--nav-h);z-index:40;padding:10px var(--gutter);gap:10px;align-items:baseline;background:rgba(10,13,15,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);font:500 13px/1.3 var(--f-mono);color:var(--text)}
  .pn-mini>span:first-child{color:var(--muted);flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
  .pn-mini output{overflow-wrap:anywhere;min-width:0}
  .pn-mini .dim{color:rgba(255,255,255,.34)}
}
.alert{margin-top:var(--s4);padding:14px 16px;border-radius:14px;border:1px solid rgba(233,55,37,.6);background:rgba(233,55,37,.1);color:var(--text)}
.alert[hidden]{display:none}
.result{margin-top:var(--s5);padding:var(--s4);scroll-margin-top:calc(var(--nav-h) + 60px)}
@media (min-width:760px){.result{padding:var(--s5)}}
.result[hidden]{display:none}
.res-head{display:grid;gap:var(--s4);align-items:center}
@media (min-width:900px){.res-head{grid-template-columns:1fr .85fr}}
.res-head h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);margin-top:var(--s3)}
.res-pn{font:500 clamp(1rem,.7rem + 1.3vw,1.6rem)/1.3 var(--f-mono);color:var(--red-text);text-shadow:0 0 24px rgba(233,55,37,.6);margin-top:var(--s3);overflow-wrap:anywhere}
.res-grid{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:900px){.res-grid{grid-template-columns:1fr 1fr}}
.res-grid h3{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.res-grid .specs{margin-top:var(--s3);padding:4px var(--s3)}
.res-grid .dl-list{margin-top:var(--s3)}
.inc{margin-top:var(--s3);display:grid;gap:0}
.inc li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);color:var(--text)}
.inc li svg{flex:none;margin-top:6px}
.ref{margin-top:var(--s5);display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid rgba(242,184,75,.45);background:rgba(242,184,75,.07);color:#f4e2bd;font-size:.95rem}
.ref b{color:#fff}
.ref svg{flex:none;margin-top:3px}

/* Homepage: clickable site sketches + solution links */
.site-link{cursor:pointer;outline:none}
.site-link .hit{fill:transparent;stroke:transparent;transition:stroke .25s,fill .25s}
.site-link:hover .hit,.site-link:focus-visible .hit{fill:rgba(233,55,37,.07);stroke:rgba(233,55,37,.55)}
.site-link:hover .sl,.site-link:focus-visible .sl{stroke:#fff}
.site-link:hover .site,.site-link:focus-visible .site{filter:drop-shadow(0 0 6px rgba(233,55,37,.55))}
.site-link:hover .sv-lbl-b,.site-link:focus-visible .sv-lbl-b{fill:var(--red-text)}
.apps li a{display:flex;align-items:center;gap:14px;flex:1;color:var(--text);text-decoration:none;min-height:24px}
.apps li a::after{content:"\2192";margin-left:auto;color:var(--red-text);opacity:.5;transition:opacity .2s,transform .2s}
.apps li a:hover{color:#fff}
.apps li a:hover::after{opacity:1;transform:translateX(3px)}
.pcard .stretch h3,.pcard h3 .stretch{color:inherit}
.rail-end .rail-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.rail-end .rail-links .btn{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .scene .pkt{display:none}
}

/* =====================================================================
   Solution page · deep sections (application, together, security, ease, swap)
   ===================================================================== */
:root{--subnav-h:54px}
/* Section nav: sticky under the main nav on desktop, a plain scrolling row on small screens */
.subnav{position:relative;z-index:40;background:rgba(10,13,15,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block:1px solid var(--line)}
.subnav-in{display:flex;gap:4px;align-items:center;min-height:var(--subnav-h);overflow-x:auto;scrollbar-width:none;padding-block:6px}
.subnav-in::-webkit-scrollbar{display:none}
.subnav .lbl{flex:none;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin-right:10px;display:none}
.subnav a{flex:none;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#aeb9bc;text-decoration:none;padding:11px 12px;border-radius:999px;border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.subnav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.subnav a[aria-current="true"]{color:#fff;border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.12)}
.subnav a:focus-visible{outline:2px solid var(--red-text);outline-offset:-2px}
@media (min-width:960px){
  .subnav{position:sticky;top:var(--nav-h)}
  .subnav .lbl{display:inline}
  html.has-subnav{scroll-padding-top:calc(var(--nav-h) + var(--subnav-h) + 8px)}
}
.h2s{font-size:clamp(1.8rem,1.3rem + 2vw,3rem)}
.sub-h{font:500 12px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red-text);margin-top:var(--s7)}
.h3s{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);max-width:24ch;margin-top:var(--s3)}

/* Application overview */
.app-grid{display:grid;gap:var(--s6);align-items:start;margin-top:var(--s5)}
@media (min-width:1000px){.app-grid{grid-template-columns:1fr 1.05fr;gap:var(--s7);align-items:center}}
.overview{font:400 clamp(1.08rem,1rem + .35vw,1.25rem)/1.6 var(--f-body);color:#d6dde0;max-width:62ch}
.app-grid .mon{margin-top:var(--s4)}
.app-grid.solo{grid-template-columns:1fr}

/* Process stages */
.proc{display:grid;gap:var(--s3);margin-top:var(--s5)}
.proc-list{position:relative}
.pstage > .dot{display:none}
@media (min-width:760px){
  .proc-list{padding-left:34px}
  .proc-list::before{content:"";position:absolute;left:8px;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,var(--red),rgba(233,55,37,.15))}
  .proc-list .pstage > .dot{display:block;position:absolute;left:-31px;top:30px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--red);box-shadow:0 0 12px rgba(233,55,37,.7)}
}
.pstage{padding:var(--s4);display:grid;gap:var(--s3);transition:border-color .35s,box-shadow .35s}
@media (min-width:760px){.pstage{padding:var(--s5)}}
.pstage-h{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.pstage .num{font:500 12px/1 var(--f-mono);letter-spacing:.16em;color:var(--red-text);flex:none}
.pstage h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);line-height:1.15}
.pstage .sum{color:var(--text);font-size:1.03rem;max-width:64ch}
.pgroups{display:grid;gap:var(--s3)}
@media (min-width:900px){.proc-list .pgroups,.ftw:not(.is-pinned) .pgroups{grid-template-columns:1fr 1fr 1.35fr;gap:var(--s4)}}
.pg h4{font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc;margin-bottom:10px}
.pg.d6 h4{color:var(--red-text)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:.9rem;line-height:1.35;color:var(--text);padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.pg.d6{padding-left:14px;border-left:2px solid rgba(233,55,37,.55)}
.pg.d6 p{font-size:.98rem;color:#d3dadd}
.pstage.is-active{border-color:rgba(233,55,37,.55);box-shadow:0 0 0 1px rgba(233,55,37,.2),0 30px 60px -30px rgba(233,55,37,.45)}

/* Follow the water: native sticky stage on desktop, stacked otherwise */
.ftw{background:var(--bg-2)}
.ftw-head{padding-top:var(--s8);padding-bottom:var(--s5)}
.ftw-plant{margin:0;padding:10px;border-radius:22px}
.ftw-plant figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px}
.plant-host{width:100%;position:relative}
.plant-host svg{width:100%;height:auto;display:block}
.ftw-index{display:none}
.ftw-stage{padding-bottom:var(--s8)}
.ftw.is-pinned .ftw-track{height:calc(100vh + var(--steps,8) * 35vh)} /* ~35vh of scrolling per stage */
.ftw.is-pinned .ftw-stage{position:sticky;top:0;height:100vh;padding:calc(var(--nav-h) + var(--subnav-h) + 16px) 0 20px;display:flex}
.ftw.is-pinned .ftw-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s5);width:100%;height:100%;align-items:center}
.ftw.is-pinned .plant-host svg{max-height:calc(100vh - var(--nav-h) - var(--subnav-h) - 96px);margin-inline:auto}
.ftw.is-pinned .ftw-side{display:flex;flex-direction:column;height:100%;min-height:0;justify-content:center}
.ftw.is-pinned .ftw-index{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ftw-index button{all:unset;box-sizing:border-box;cursor:pointer;min-width:38px;height:34px;padding:0 8px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line-2);font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;color:#aeb9bc;transition:color .2s,border-color .2s,background .2s,box-shadow .3s}
.ftw-index button:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.ftw-index button.on{color:#fff;border-color:var(--red);background:rgba(233,55,37,.16);box-shadow:0 0 16px -4px rgba(233,55,37,.8)}
.ftw-index button:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}
.ftw-prog{flex-basis:100%;height:2px;margin-top:10px;background:var(--line);border-radius:2px;overflow:hidden}
.ftw-prog i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 10px var(--red)}
.ftw.is-pinned .proc{position:relative;margin-top:var(--s3);height:min(660px,calc(100vh - var(--nav-h) - var(--subnav-h) - 110px))}
.ftw.is-pinned .pstage{position:absolute;inset:0 0 auto 0;max-height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--slate) transparent;padding:var(--s4);opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .4s,transform .55s var(--ease),visibility 0s linear .55s}
.ftw.is-pinned .pstage.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s .08s,transform .6s var(--ease) .08s,visibility 0s}
.ftw.is-pinned .pstage .sum{font-size:.98rem}
.ftw.is-pinned .chips li{font-size:.85rem;padding:5px 9px}
.ftw.is-pinned .ftw-plant figcaption{display:none}
/* Phones / narrow screens (JS adds .is-stuck below 960px wide when the screen is at least 520px tall):
   the plant sticks under the fixed nav (plus the section nav when that is sticky; JS measures both
   into --ftw-top) and the stage cards scroll up beneath it. The card at the reading line drives the plant. */
.ftw-status{display:none}
.ftw.is-stuck .ftw-plant{position:sticky;top:var(--ftw-top,var(--nav-h));z-index:5;margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter) 8px;border:0;border-radius:0;background:var(--bg-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 16px 14px 0 var(--bg-2)}
.ftw.is-stuck .ftw-plant figcaption,.ftw.is-stuck .ftw-plant::before,.ftw.is-stuck .ftw-plant::after{display:none}
.ftw.is-stuck .plant-host svg{max-height:calc(max(190px,42vh) - 40px);margin-inline:auto}
@supports (height:1svh){.ftw.is-stuck .plant-host svg{max-height:calc(max(190px,42svh) - 40px)}}
.ftw.is-stuck .ftw-status{display:flex;gap:8px;align-items:baseline;min-width:0;padding:8px 2px 0;font:500 11.5px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden}
.ftw-status b{flex:none;font-weight:500;color:var(--red-text)}
.ftw-status span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.ftw.is-stuck .pstage{transition:opacity .35s,border-color .35s,box-shadow .35s}
.ftw.is-stuck.has-active .pstage:not(.is-active){opacity:.5}

/* How it works together */
.tg-fig{margin:var(--s5) 0 0;padding:10px;border-radius:24px}
.tg-fig figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px}
.tg-svg{width:100%;height:auto}
.tg-svg.tall{display:block;max-width:420px;margin-inline:auto}
.tg-svg.wide{display:none}
@media (min-width:760px){.tg-svg.tall{display:none}.tg-svg.wide{display:block}}
.tg-box{fill:#10171a;stroke:rgba(255,255,255,.28);stroke-width:1.2}
.tg-box.k{stroke:rgba(233,55,37,.75)}
.tg-link{fill:none;stroke:#8f9cab;stroke-width:1.4;stroke-dasharray:4 5}
.tg-out{fill:none;stroke:#ff6e5a;stroke-width:2}
.tg-badge circle{fill:var(--red-btn);stroke:#0a0d0f;stroke-width:2}
.tg-badge text{font:700 11px var(--f-mono);fill:#fff}
.motion .tg-run .flow{animation:dash .9s linear infinite}
.motion .tg-run .halo{animation:halo 3s ease-in-out infinite}
.tg-cards{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media (min-width:700px){.tg-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.tg-cards{grid-template-columns:repeat(3,1fr)}}
.tg-card{padding:var(--s4);display:flex;flex-direction:column;gap:8px}
.tg-card .k{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--red-btn);color:#fff;font:700 12px/1 var(--f-mono)}
.tg-card h3{font-size:1.25rem;line-height:1.2}
.tg-card p{font-size:1rem}
.plinks{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:6px 14px}
.plinks a{font:600 14px/1.3 var(--f-body);color:var(--red-text);text-decoration:none}
.plinks a:hover{text-decoration:underline}
.comp-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4);align-items:center}
.comp-row .lbl{font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc;margin-right:6px}
.comp-row a{font:500 14px/1 var(--f-body);color:var(--text);text-decoration:none;padding:11px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.comp-row a:hover{border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.08)}

/* Secure By Design at this site */
.sec-grid{display:grid;gap:var(--s5);margin-top:var(--s5);align-items:start}
@media (min-width:1000px){.sec-grid{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}}
.sec-cards{display:grid;gap:var(--s3)}
@media (min-width:640px) and (max-width:999px){.sec-cards{grid-template-columns:1fr 1fr}}
.sec-card{padding:var(--s4)}
.sec-card .tag{display:inline-flex;gap:8px;align-items:center;font:500 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text)}
.sec-card .tag svg{color:var(--ok)}
.sec-card h3{font-size:1.25rem;line-height:1.2;margin-top:10px}
.sec-card p{margin-top:8px;font-size:1rem}
.sbd-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.sbd-strip a{font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#aeb9bc;text-decoration:none;padding:11px 12px;border-radius:999px;border:1px solid var(--line-2);transition:color .2s,border-color .2s}
.sbd-strip a:hover{color:#fff;border-color:rgba(233,55,37,.6)}
.sbd-strip a b{color:var(--red-text);font-weight:500;margin-right:6px}
.sec-vis{margin:0;padding:10px;border-radius:24px}
.sec-vis svg{width:100%;height:auto}
.sec-vis figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px}
.motion .sec-run .flow{animation:dash .9s linear infinite}
.motion .sec-run .probe-line{animation:probe 3.2s linear infinite}
.motion .sec-run .probe-x{animation:blink 3.2s infinite}
.motion .sec-run .halo{animation:halo 3s ease-in-out infinite}
.motion .sec-run .log-row{animation:logIn 6s var(--ease) infinite}
.motion .sec-run .log-row.r2{animation-delay:.6s}
.motion .sec-run .log-row.r3{animation-delay:1.2s}
@keyframes logIn{0%{opacity:.15}10%,88%{opacity:1}100%{opacity:.15}}

/* Easy to learn: Whisker.io phone motif (same widget language as the homepage HMI replica) */
.ease-hmi{margin:0;padding:var(--s4) var(--s3);display:flex;flex-direction:column;align-items:center;border-radius:22px}
.ease-hmi figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:var(--s3);text-align:center}
.phone{position:relative;width:min(310px,100%);border-radius:36px;border:1px solid rgba(255,255,255,.35);background:#0d1315;padding:30px 10px 22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 60px -20px rgba(233,55,37,.35)}
.phone::before{content:"";position:absolute;top:11px;left:50%;width:70px;height:8px;margin-left:-35px;border-radius:6px;background:#1d2629}
.phone .wk{border-radius:16px}
.phone .wk-bar{font-size:14px;padding:9px 12px;gap:10px}
.phone .wk-bar small{font-size:9.5px;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .wk-canvas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;padding:10px;gap:9px}
.phone .w-b{padding:12px 6px;gap:6px}
.phone .w-trend{grid-column:1/-1}
.phone .w-trend svg{width:100%;height:70px;background:#1f1f1f;border:1px solid #666}
.phone .okc-ic{width:26px;height:26px;font-size:13px}
.alert-pill{position:absolute;left:18px;right:18px;top:74px;z-index:2;padding:10px 12px;border-radius:12px;background:#f1f4f5;color:#0a0d0f;box-shadow:0 12px 30px -8px rgba(0,0,0,.6);display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;opacity:0;transform:translateY(-10px)}
.alert-pill i{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--red)}
.alert-pill b{font:600 13px/1.2 var(--f-body)}
.alert-pill span{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#4a5457}
.motion .ease-run .alert-pill{animation:alertp 7s var(--ease) infinite}
.motion .ease-run .alert-pill i{animation:alertd 7s infinite}
@keyframes alertp{0%,12%{opacity:0;transform:translateY(-10px)}18%,82%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes alertd{0%,50%{background:#e93725}56%,100%{background:#1f9d5c}}
html:not(.motion) .alert-pill{opacity:1;transform:none}

/* Field swap */
.swap-sec{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.swap-text{font:400 clamp(1.05rem,1rem + .3vw,1.2rem)/1.6 var(--f-body);color:#d6dde0;max-width:58ch;margin-top:var(--s4)}
.phone .w-h .t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.ease-grid > *{min-width:0}

/* Plant drawing: pipe/tank cut-outs must match the glass panel behind them */
.plant-host .d6p{--p-bg:#131a1d}

/* ============ Request forms (../shared/d6-contact.js) ============
   The modal and the homepage inline form share the live site's markup (.d6c-*).
   The modal is themed through its --d6c-* custom properties; the rules below restyle
   both so they read as native Cinematic UI. Contrast (on #0e1316): text 16.9:1, labels 11.5:1,
   muted 8.9:1, errors #ff8a7a 7.6:1, input borders #5f6b6f 3.3:1, white on #cf2e1c 5.2:1. */
:root{
  --d6c-overlay:rgba(4,6,7,.74); --d6c-bg:#0e1316; --d6c-text:#f1f4f5; --d6c-heading:#f1f4f5;
  --d6c-muted:#aeb9bc; --d6c-label:#c7d0d3; --d6c-line:rgba(255,255,255,.16);
  --d6c-accent:#ff6e5a; --d6c-accent-text:#ff8a7a; --d6c-ok:#41d392;
  --d6c-btn:#cf2e1c; --d6c-btn-radius:999px; --d6c-radius:18px; --d6c-input-radius:10px;
  --d6c-input-bg:#0a0d0f; --d6c-input-line:#5f6b6f; --d6c-font:var(--f-body);
  --d6c-label-font:500 11.5px/1.3 var(--f-mono);
}
.d6c-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.d6c-dialog{color-scheme:dark;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--d6c-bg);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 40px 100px -30px rgba(0,0,0,.9),0 0 80px -40px rgba(233,55,37,.45);padding:32px 28px 26px}
.d6c-dialog::before{content:"";position:absolute;left:28px;right:28px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(233,55,37,.8),transparent)}
.d6c-dialog h2{font:600 clamp(1.6rem,1.3rem + 1.2vw,2.1rem)/1.1 var(--f-display);letter-spacing:-.025em;padding-right:44px}
.d6c-dialog > p{color:var(--d6c-muted);font-size:1rem}
.d6c-x{color:var(--d6c-muted);border-radius:999px;top:14px;right:14px}
.d6c-x:hover{color:#fff;background:rgba(255,255,255,.06)}
.d6c-field label{font:var(--d6c-label-font);letter-spacing:.14em;text-transform:uppercase;color:var(--d6c-label)}
.d6c-req{color:var(--d6c-accent)}
.d6c-field input,.d6c-field select,.d6c-field textarea{font:400 16px/1.4 var(--f-body);padding:12px 14px;min-height:48px;border:1px solid var(--d6c-input-line);
  background:var(--d6c-input-bg);color:var(--d6c-text);border-radius:var(--d6c-input-radius);transition:border-color .2s,box-shadow .2s;width:100%;min-width:0}
.d6c-field textarea{resize:vertical;min-height:112px}
.d6c-field select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23c7d0d3' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.d6c-field select option{background:#0e1316;color:#f1f4f5}
.d6c-field ::placeholder{color:#7f8b8f;opacity:1}
.d6c-field input:hover,.d6c-field select:hover,.d6c-field textarea:hover{border-color:#7b878b}
.d6c-field input:focus,.d6c-field select:focus,.d6c-field textarea:focus{outline:2px solid var(--d6c-accent);outline-offset:1px;border-color:var(--d6c-accent);box-shadow:0 0 0 4px rgba(233,55,37,.18)}
.d6c-field.has-error input{border-color:var(--d6c-accent)}
.d6c-field[hidden]{display:none}
.d6c-err{font-size:13px;color:var(--d6c-accent-text)}
.d6c-err:empty{display:none}
.d6c-row{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:560px){.d6c-row{grid-template-columns:1fr 1fr}}
.d6c-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.d6c-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:8px}
.d6c-submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:999px;
  font:600 15px/1 var(--f-body);background:var(--d6c-btn);color:#fff;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 8px 30px -8px rgba(233,55,37,.7);transition:background .2s,box-shadow .3s,transform .2s var(--ease)}
.d6c-submit:hover{background:#dc311f;transform:translateY(-1px)}
.d6c-submit:disabled{opacity:.7;cursor:wait;transform:none}
.d6c-alt{color:var(--d6c-muted);font-size:14px;text-underline-offset:3px}
.d6c-alt:hover{color:#fff}
.d6c-msg{margin:16px 0 0;padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.5}
.d6c-msg.ok{background:rgba(65,211,146,.1);color:var(--d6c-ok);border:1px solid rgba(65,211,146,.4)}
.d6c-msg.bad{background:rgba(233,55,37,.1);color:var(--d6c-accent-text);border:1px solid rgba(233,55,37,.45)}
.d6c-msg.demo{background:rgba(255,255,255,.04);color:var(--d6c-muted);border:1px dashed var(--d6c-line)}
@media (max-width:559px){.d6c-dialog{padding:26px 18px 20px}}

/* Homepage contact: intro card + form card + audit card */
@media (min-width:1000px){
  .cta-grid-form{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"main form" "audit form"}
  .cta-grid-form .cta-main{grid-area:main}.cta-grid-form .cform{grid-area:form}.cta-grid-form .audit{grid-area:audit}
  .cta-grid-form .cta-main h2{font-size:clamp(2.2rem,1.2rem + 2.2vw,3.4rem)}
}
.cform{padding:var(--s5) var(--s4)}
@media (min-width:760px){.cform{padding:var(--s6) var(--s5)}}
.cform h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-top:var(--s3);line-height:1.15}
.cform-sub{margin:var(--s2) 0 var(--s4);color:#aeb9bc;font-size:.95rem}
.audit-btns{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.audit .audit-btns .btn{margin-top:0}
.audit-more{color:var(--body);font-size:.95rem;text-underline-offset:3px}
.audit-more:hover{color:#fff}
.needs-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-lg{min-height:54px;padding:0 26px;font-size:16px}
.btn .dl-badge,.dl .dl-badge{display:inline-block;flex:none;font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;padding:5px 7px;border-radius:6px;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18)}
.dl .dl-badge{background:rgba(255,110,90,.1);color:var(--red-text);border-color:rgba(255,110,90,.35)}
.dl .dl-note{font-style:normal;font-size:.9rem;color:var(--body);line-height:1.5}
.dl-group{margin-top:var(--s5)}
.dl-group:first-child{margin-top:var(--s4)}
.dl-h{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc}
.dl-group .dl-list{margin-top:var(--s3)}
.linkbtn{all:unset;cursor:pointer;color:var(--red-text);text-decoration:underline;text-underline-offset:3px}
.linkbtn:focus-visible{outline:2px solid var(--red-text);outline-offset:2px;border-radius:4px}
.p-kicker{font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);margin-bottom:10px}
.img-note{margin:10px 4px 0;font:500 12px/1.5 var(--f-mono);color:#aeb9bc}

/* Support dropdown (desktop nav) */
.nav-dd{position:relative}
.nav-dd-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;font:500 14px/1 var(--f-body);color:var(--body);transition:color .2s,background .2s}
.nav-dd-btn:hover,.nav-dd-btn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.05)}
.nav-dd-btn.cur{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 -2px 0 var(--red)}
.nav-dd-btn:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}
.nav-dd-btn svg{transition:transform .2s}
.nav-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;padding:8px;border-radius:14px;background:rgba(14,19,22,.97);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 60px -20px rgba(0,0,0,.8);z-index:120}
.nav-dd-menu[hidden]{display:none}
.nav-links .nav-dd-menu a{padding:12px 14px;white-space:nowrap}
@media (min-width:1180px) and (max-width:1339px){.nav-links a,.nav-dd-btn{padding:8px 9px}.nav-in{gap:var(--s3)}}

/* ============ Documentation / downloads ============ */
.doc-filter-bar{margin-top:calc(-1 * var(--s5));position:relative;z-index:2}
.doc-filter{padding:var(--s3) var(--s4);display:grid;gap:8px 20px;align-items:center}
@media (min-width:760px){.doc-filter{grid-template-columns:auto minmax(0,1fr) auto}}
.doc-filter label{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--body)}
.doc-filter-in{position:relative;display:flex;align-items:center}
.doc-filter-in svg{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.doc-filter input{width:100%;min-width:0;min-height:48px;padding:10px 14px 10px 42px;border-radius:999px;border:1px solid #5f6b6f;background:#0a0d0f;color:var(--text);font:400 16px/1.3 var(--f-body)}
.doc-filter input::placeholder{color:#7f8b8f}
.doc-filter input:focus{outline:2px solid var(--red-text);outline-offset:1px;border-color:var(--red-text)}
.doc-count{margin:0;font:500 12px/1.4 var(--f-mono);color:#aeb9bc}
.doc-empty{padding-block:var(--s6);color:var(--body)}
[data-docsec][hidden],[data-docsec] [data-doc][hidden]{display:none!important}
.doc-card{margin-top:var(--s5);padding:var(--s3)}
@media (min-width:760px){.doc-card{padding:var(--s4)}}
.doc-card .dl-list{margin-top:0}
@media (min-width:1000px){.doc-card .dl-list{grid-template-columns:1fr 1fr}}
.sec-grid{margin-top:var(--s5);display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.sec-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.audit-feature{padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3);
  background:radial-gradient(600px 300px at 0% 0%,rgba(233,55,37,.16),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
@media (min-width:760px){.audit-feature{padding:var(--s6) var(--s5)}}
.audit-feature h3{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);line-height:1.08}
.audit-feature .hero-btns{margin-top:var(--s3)}
.sec-side{display:grid;gap:var(--s4)}
.guide{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.guide h3{font-size:1.25rem;line-height:1.2}
.guide p{font-size:.95rem}
.guide .btn{margin-top:auto}
.online-list{margin-top:var(--s5);display:grid;gap:var(--s4)}
.online{padding:var(--s4);display:grid;gap:var(--s3);align-items:center}
@media (min-width:900px){.online{grid-template-columns:minmax(0,1fr) auto;padding:var(--s5)}.online .hero-btns{margin-top:0}}
.online h3{font-size:1.5rem}
.online p{margin-top:8px}

.sw{padding:var(--s4)}
@media (min-width:760px){.sw{padding:var(--s6) var(--s5)}}
.sw-head{display:grid;gap:var(--s4)}
@media (min-width:960px){.sw-head{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s6);align-items:start}}
.sw-name{font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);letter-spacing:-.035em}
.sw-ver{font:500 .42em/1 var(--f-mono);letter-spacing:.06em;color:var(--red-text);vertical-align:middle;padding:6px 9px;border:1px solid rgba(255,110,90,.35);border-radius:999px;white-space:nowrap}
.sw-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:var(--s3) 0 0}
.sw-meta dt{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc}
.sw-meta dd{margin:2px 0 0;color:var(--text);font-weight:500}
.sw-sum{margin-top:var(--s3);max-width:60ch}
.sw-files{display:grid;gap:12px;align-content:start}
.sw-dl{justify-content:flex-start;min-height:56px;white-space:normal;text-align:left}
.sw-dl .dl-badge{margin-left:auto}
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.store{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;border:1px dashed var(--line-2);color:var(--body)}
.store span{display:flex;flex-direction:column;font-weight:600;color:var(--text);line-height:1.2}
.store small{font:500 10px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#aeb9bc}
.sw-feats{margin-top:var(--s5);display:grid;gap:var(--s3)}
@media (min-width:700px){.sw-feats{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.sw-feats{grid-template-columns:1fr 1fr 1fr}}
.sw-feats li{padding:var(--s3);border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:4px}
.sw-feats b{color:var(--text);font-weight:600}
.sw-feats span{font-size:.93rem}
.sw-links{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);display:grid;gap:10px}
.sw-links p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0}
.sw-links .lbl{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc;min-width:44px}
.sw-links a{color:var(--text);text-underline-offset:3px;text-decoration-color:rgba(255,110,90,.6)}
.sw-links a:hover{color:#fff;text-decoration-color:var(--red-text)}
.changelog{margin-top:var(--s5)}
.rel{margin-top:10px;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.02)}
.rel summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 18px;border-radius:14px}
.rel summary::-webkit-details-marker{display:none}
.rel summary::before{content:"+";font:500 18px/1 var(--f-mono);color:var(--red-text);width:14px}
.rel[open] summary::before{content:"\2212"}
.rel summary:hover{background:rgba(255,255,255,.03)}
.rel summary:focus-visible{outline:2px solid var(--red-text);outline-offset:2px}
.rel-v{font:600 1.1rem/1 var(--f-display);color:var(--text)}
.rel-d{font:500 12px/1 var(--f-mono);color:#aeb9bc}
.rel-tag{font:600 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ok);border:1px solid rgba(65,211,146,.4);padding:5px 7px;border-radius:6px}
.rel-b{padding:0 18px 18px 48px}
.rel-b h4{font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin-top:var(--s3)}
.rel-b ul{margin-top:8px;display:grid;gap:8px;padding-left:18px;list-style:disc}
.rel-b li{font-size:.95rem;overflow-wrap:anywhere}
.rel-b li::marker{color:var(--muted)}
@media (max-width:600px){.rel-b{padding-left:18px}}

/* Online doc viewer: the manual is light-themed, so it sits in a light panel */
.doc-bar{padding-top:calc(var(--nav-h) + var(--s3));background:var(--bg-2);border-bottom:1px solid var(--line)}
.doc-bar-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3)}
.doc-bar .crumbs{margin-bottom:6px}
.doc-bar h1{font-size:clamp(1.2rem,1rem + 1vw,1.7rem);letter-spacing:-.02em}
.doc-bar-a{display:flex;flex-wrap:wrap;gap:10px}
.doc-frame-wrap{background:#fff}
.doc-frame{display:block;width:100%;border:0;background:#fff;height:calc(100vh - var(--nav-h) - 110px);height:calc(100dvh - var(--nav-h) - 110px);min-height:560px}
@media (max-width:640px){.doc-frame{height:calc(100vh - var(--nav-h) - 150px);height:calc(100dvh - var(--nav-h) - 150px)}}
.dl > .arr{flex:none;display:inline-block}
.dl > .dl-badge{margin-left:auto}

/* Catalog/related grids: cards size to their column (the 400px width is only for the homepage rail) */
.pgrid .pcard{width:auto;min-width:0}

/* =====================================================================
   Company · plans · support · legal pages (about, why-d6-labs, case-studies, careers,
   contact, uptime-plan, flex-plan, contract-manufacturing, whisker-mobile, site-survey,
   privacy-policy, delete-account, 404) + the grouped nav/footer
   ===================================================================== */
/* Nav: two menus (Company, Support); a small group label inside a menu */
.nav-dd-menu .dd-lbl{padding:12px 14px 4px;margin-top:6px;border-top:1px solid var(--line);font:500 10.5px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc}
.nav-dd-menu a[aria-current="page"]{color:#fff;box-shadow:inset 2px 0 0 var(--red)}
/* Mobile menu: grouped, scrollable */
.mm-grp + .mm-grp{margin-top:var(--s4)}
.mm-h{font:500 11px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);padding:6px 4px 4px}
.mobile-menu a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--red);padding-left:12px}
@media (min-width:560px) and (max-width:1179.98px){
  .mobile-menu{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5);align-content:start}
  .mobile-menu[hidden]{display:none}
  .mm-grp + .mm-grp{margin-top:0}
  .mm-grp:first-child{grid-row:span 2}
  .mobile-menu .btn{grid-column:1 / -1}
}

/* Footer: brand + three link groups + contact */
.foot-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}}
@media (min-width:1100px){.foot-grid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:var(--s5)}.foot-brand{grid-column:auto}}
.foot .foot-col ul{grid-template-columns:1fr;gap:10px}
.foot .foot-hours{font:500 12px/1.5 var(--f-mono);color:#aeb9bc;margin-top:var(--s2)}
.social{display:flex;gap:10px;margin-top:var(--s4)}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);color:var(--body);background:rgba(255,255,255,.03);transition:color .2s,border-color .2s,background .2s}
.social a:hover{color:#fff;border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.1)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-legal a{color:var(--body);text-underline-offset:3px}
.foot-legal a:hover{color:#fff}

/* Homepage additions */
.case-more{margin-top:var(--s4);align-self:flex-start;color:var(--red-text);font-weight:600;font-size:.95rem;text-underline-offset:3px}
.case-more:hover{color:#fff}
.pillar-link{display:inline-block;margin-top:6px;color:var(--red-text);text-underline-offset:3px}

/* Shared building blocks */
.hero-split{display:grid;gap:var(--s6);align-items:center}
@media (min-width:1000px){.hero-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s7)}}
.split{display:grid;gap:var(--s6);align-items:center}
@media (min-width:1000px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7)}.split.rev > :first-child{order:2}}
.split.top{align-items:start}
.h2m{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.4rem);margin-top:var(--s4);max-width:20ch}
.prose-lg{font-size:clamp(1.05rem,1rem + .3vw,1.18rem);max-width:62ch}
.prose-lg p + p,.stack > * + *{margin-top:var(--s3)}
.photo{margin:0;padding:10px;border-radius:22px;background:radial-gradient(ellipse 70% 60% at 50% 45%,#1a2225 0%,#0e1417 65%,#0a0d0f 100%)}
.photo img{width:100%;height:auto;border-radius:14px}
.photo figcaption,.fig-cap{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#aeb9bc;padding:12px 8px 4px}
.cards{display:grid;gap:var(--s3);margin-top:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
@media (min-width:760px){.card{padding:var(--s5) var(--s4)}}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(233,55,37,.06);color:var(--red-text);flex:none;margin-bottom:var(--s2)}
.card h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.015em}
.card p{font-size:.97rem}
.card .k{font:500 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--red-text)}
.checks{display:grid;gap:12px;margin-top:var(--s4)}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li > svg{flex:none;margin-top:5px}
.checks b{color:var(--text);font-weight:600}
.checks.two-col{gap:12px 28px}
@media (min-width:700px){.checks.two-col{grid-template-columns:1fr 1fr}}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.jump a{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#c7d0d3;text-decoration:none;padding:12px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:color .2s,border-color .2s,background .2s}
.jump a:hover{color:#fff;border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.1)}
.jump a .n{color:var(--red-text);margin-right:6px}
.bigquote{margin:0;padding:var(--s5) var(--s4);position:relative}
@media (min-width:760px){.bigquote{padding:var(--s6) var(--s6)}}
.bigquote blockquote{margin:0;font:500 clamp(1.25rem,1rem + 1vw,1.8rem)/1.4 var(--f-display);color:var(--text);letter-spacing:-.01em;max-width:44ch}
.bigquote blockquote::before{content:"\201C";display:block;font:700 4rem/.6 var(--f-display);color:var(--red);height:.45em;text-shadow:0 0 30px rgba(233,55,37,.5)}
.bigquote figcaption{margin-top:var(--s4);font:500 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#aeb9bc}
.cta-band{padding:var(--s6) var(--s4);display:grid;gap:var(--s4);align-items:center}
@media (min-width:900px){.cta-band{grid-template-columns:minmax(0,1fr) auto;padding:var(--s6)}}
.cta-band h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);max-width:18ch}
.cta-band .lead{margin-top:var(--s3)}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:12px}
.meta-list{display:grid;gap:6px;margin-top:var(--s3);font-size:.93rem}
.meta-list li{display:flex;gap:4px 10px;flex-wrap:wrap}
.meta-list b{font:500 10.5px/1.9 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);min-width:74px}
.tag{display:inline-block;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);border:1px solid rgba(255,110,90,.4);padding:6px 8px;border-radius:6px}

/* Why D6 Labs */
.cmp.findings table{min-width:0}
.cmp.findings tbody th{width:46%;font:500 1rem/1.4 var(--f-body);color:var(--text)}
.cmp.findings td.d6{font-size:.97rem}
@media (max-width:600px){.cmp.findings thead{display:none}.cmp.findings tr{display:block;padding:14px 12px;border-bottom:1px solid var(--line)}.cmp.findings tbody tr:last-child{border-bottom:0}
  .cmp.findings th,.cmp.findings td{display:block;width:auto!important;border:0;padding:0}.cmp.findings td.d6{margin-top:8px;padding:10px 12px;border-radius:10px}}
.why-sbd .p-body{max-width:52ch}
.tco{padding:var(--s4)}
.tco svg{width:100%;height:auto}
.usa-badge{width:min(240px,70%);height:auto;margin-inline:auto;filter:drop-shadow(0 20px 50px rgba(233,55,37,.25))}
.usa-plate{padding:var(--s6) var(--s4);display:grid;place-items:center;gap:var(--s4);text-align:center}

/* Case studies */
.cs{padding-block:var(--s7)}
@media (min-width:960px){.cs{padding-block:var(--s8)}}
.cs + .cs{border-top:1px solid var(--line)}
.cs-head{display:grid;gap:var(--s4)}
@media (min-width:1000px){.cs-head{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s6);align-items:end}}
.cs-title{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.8rem);margin-top:var(--s3);letter-spacing:-.035em}
.cs-sub{font:500 clamp(1.15rem,1rem + .6vw,1.5rem)/1.3 var(--f-display);color:var(--body);margin-top:var(--s3);max-width:34ch}
.cs .stats{margin-top:0}
.cs-body{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:1000px){.cs-body{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-body .card h3{font-size:1rem;font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--red-text)}
.cs-body .checks{margin-top:var(--s2)}
.cs-body .checks li{font-size:.97rem}
.cs-foot{display:grid;gap:var(--s4);margin-top:var(--s4)}
@media (min-width:1000px){.cs-foot{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch}}
.cs-rel{padding:var(--s4)}
.cs-rel ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.cs-rel a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--text);text-decoration:none;font-size:.93rem;background:rgba(255,255,255,.03)}
.cs-rel a:hover{border-color:rgba(233,55,37,.6);background:rgba(233,55,37,.1)}
.cs-scope{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4)}
.cs-scope li{font:500 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--text);padding:8px 10px;border-radius:8px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.mock{margin:var(--s5) 0 0;padding:var(--s4) var(--s3) var(--s2);border-radius:22px;background:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(233,55,37,.12),transparent 70%),radial-gradient(ellipse 80% 70% at 50% 50%,#1a2225,#0b1012)}
.mock img{width:100%;max-width:820px;height:auto;margin-inline:auto}

/* Careers */
.jobs{display:grid;gap:var(--s4);margin-top:var(--s5)}
.job{padding:var(--s4);display:grid;gap:var(--s4)}
@media (min-width:760px){.job{grid-template-columns:120px minmax(0,1fr);padding:var(--s5)}}
.job-vis{width:96px;height:96px;border-radius:20px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(233,55,37,.2),transparent 70%),#0e1417;border:1px solid var(--line-2)}
@media (min-width:760px){.job-vis{width:120px;height:120px}}
.job-vis svg{width:62%;height:62%}
.job h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);letter-spacing:-.02em}
.job .loc{font:500 12px/1.5 var(--f-mono);letter-spacing:.08em;color:#aeb9bc;margin-top:8px;display:flex;gap:8px;align-items:flex-start}
.job .loc svg{flex:none;margin-top:3px}
.job .desc{margin-top:var(--s3);max-width:72ch}
.job .hero-btns{margin-top:var(--s4)}

/* Contact */
.contact-grid{display:grid;gap:var(--s4)}
@media (min-width:1000px){.contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:start}}
.reach{padding:var(--s5) var(--s4)}
@media (min-width:760px){.reach{padding:var(--s6) var(--s5)}}
.reach dl{margin:var(--s4) 0 0;display:grid;gap:var(--s3)}
.reach dt{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc}
.reach dd{margin:4px 0 0;color:var(--text);font-size:1.05rem}
.reach dd a{color:var(--text);text-underline-offset:3px;text-decoration-color:rgba(255,110,90,.6)}
.reach dd a:hover{color:#fff;text-decoration-color:var(--red-text)}
.okmap{margin:var(--s4) 0 0;padding:8px;border-radius:18px}
.okmap svg{width:100%;height:auto;border-radius:12px;background:#0b1012}
.okmap figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#aeb9bc;padding:10px 6px 2px}
.motion .okmap .ping{animation:ping 2.6s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* Plans */
.tl{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:760px){.tl{grid-template-columns:repeat(3,minmax(0,1fr))}.tl.t2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tl li{padding:var(--s4);border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02);position:relative}
.tl li::before{content:"";position:absolute;left:var(--s4);right:var(--s4);top:0;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.tl b{display:block;font:600 clamp(1.5rem,1.2rem + 1vw,2rem)/1.1 var(--f-display);color:var(--text);letter-spacing:-.02em}
.tl span{display:block;margin-top:6px;font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#aeb9bc}
.covered{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.covered li{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(65,211,146,.35);background:rgba(65,211,146,.06);color:var(--text);font-size:.93rem}
.cmp.cost table{min-width:0}
.cmp.cost tbody th{width:40%}
.cmp.cost td{font:600 1.05rem/1.3 var(--f-display);font-variant-numeric:tabular-nums}
.cmp.cost tr.total th,.cmp.cost tr.total td{border-top:1px solid var(--line-2);font-size:1.2rem}
.risk{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:1000px){.risk{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.risk-stats{display:grid;gap:var(--s3)}
.risk-stat{padding:var(--s4)}
.risk-stat .num{font:600 clamp(2.4rem,1.8rem + 2.4vw,3.8rem)/1 var(--f-display);letter-spacing:-.04em;color:var(--text);margin-top:var(--s2)}
.risk-stat .num.accent{color:var(--red);text-shadow:0 0 30px rgba(233,55,37,.35)}
.risk-stat p{margin-top:8px;font-size:.93rem}
.src{display:block;margin-top:6px;font:500 11.5px/1.5 var(--f-mono);color:#aeb9bc}

/* Contract manufacturing */
.qsteps{display:grid;gap:10px;margin-top:var(--s5)}
@media (min-width:760px){.qsteps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qsteps li{padding:var(--s4);border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.qsteps .k{font:500 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--red-text)}
.qsteps b{display:block;margin-top:10px;font:600 1.2rem/1.2 var(--f-display);color:var(--text)}
.qsteps p{margin-top:6px;font-size:.95rem}
.line-flow{padding:var(--s4);margin-top:var(--s5)}
.line-flow svg{width:100%;height:auto}
.motion .line-flow .board{animation:board 8s linear infinite}
@keyframes board{from{transform:translateX(0)}to{transform:translateX(640px)}}

/* WhiskerMobile */
.phone{position:relative;margin:0 auto;width:min(100%,260px);padding:10px;border-radius:36px;background:linear-gradient(160deg,#2b3336,#0d1214 40%,#161d20);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 40px 80px -30px rgba(0,0,0,.9),0 0 90px -30px rgba(233,55,37,.45)}
.phone img{width:100%;height:auto;border-radius:27px;background:#000}
.phone.land{width:min(100%,540px);border-radius:32px;padding:10px 14px}
.phone.land img{border-radius:22px}
.shots{display:grid;gap:var(--s5);margin-top:var(--s6);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}.shots .land-wrap{grid-column:1 / -1}}
@media (min-width:1100px){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}.shots .land-wrap{grid-column:auto}}
.shots figure{margin:0}
.shots figcaption{text-align:center;margin-top:var(--s3);font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#aeb9bc}
.widgets{display:grid;gap:10px;margin-top:var(--s4)}
@media (min-width:560px){.widgets{grid-template-columns:1fr 1fr}}
.widgets li{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.widgets b{display:block;color:var(--text);font-weight:600}
.widgets span{font-size:.92rem}
.plat{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:900px){.plat{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plat .card .btn,.plat .card .store{margin-top:auto;align-self:flex-start}
.plat .card .btn{white-space:normal;text-align:left}
.ol-steps{counter-reset:o;display:grid;gap:10px;margin-top:var(--s3)}
.ol-steps li{counter-increment:o;display:flex;gap:14px;align-items:flex-start}
.ol-steps li::before{content:counter(o);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(233,55,37,.6);color:var(--red-text);font:500 12px/1 var(--f-mono);margin-top:1px}
.callout-note{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:14px;border:1px dashed var(--line-2);font-size:.95rem}
.callout-note a{color:var(--red-text)}

/* Site Survey */
.grades{display:grid;gap:10px;margin-top:var(--s5)}
.grades li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:var(--s3) var(--s4);border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.grades i{display:block;width:14px;height:14px;border-radius:4px;margin-top:5px}
.grades b{color:var(--text)}
.survey-vis{padding:10px;border-radius:22px;margin:0}
.survey-vis svg{width:100%;height:auto;border-radius:14px;background:#0b1012}
.survey-vis figcaption{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#aeb9bc;padding:10px 6px 2px}
.motion .survey-vis .sweep{animation:spin 9s linear infinite;transform-box:view-box;transform-origin:240px 190px}

/* Legal long-form (privacy policy, delete account) */
.legal-grid{display:grid;gap:var(--s5)}
@media (min-width:1000px){.legal-grid{grid-template-columns:240px minmax(0,1fr);gap:var(--s7);align-items:start}}
.toc{padding:var(--s4)}
@media (min-width:1000px){.toc{position:sticky;top:calc(var(--nav-h) + 24px)}}
.toc h2{font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb9bc}
.toc ol{margin-top:var(--s3);display:grid;gap:2px}
.toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--body);text-decoration:none;font-size:.93rem;line-height:1.35}
.toc a:hover{color:#fff;background:rgba(255,255,255,.05)}
.prose{max-width:70ch;font-size:1.02rem;line-height:1.8;color:#d3dadd}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);line-height:1.2;margin-top:2.4em;color:var(--text);scroll-margin-top:calc(var(--nav-h) + 16px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;line-height:1.3;margin-top:1.8em;color:var(--text);letter-spacing:-.01em}
.prose ul{list-style:disc;padding-left:1.4em;display:grid;gap:.35em}
.prose li::marker{color:var(--red-text)}
.prose a{color:var(--red-text);text-underline-offset:3px}
.prose a:hover{color:#fff}
.prose .updated{font:500 12.5px/1.5 var(--f-mono);color:#aeb9bc;letter-spacing:.04em}
.addr-card{padding:var(--s4);border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);line-height:1.7}
.addr-card p + p{margin-top:8px}
.da-steps{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:900px){.da-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.da-step{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.da-step .num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red-btn);color:#fff;font:600 15px/1 var(--f-display)}
.da-step h3{font-size:1.2rem}
.da-step .phone{margin-top:var(--s3);width:min(100%,230px)}
.da-form{padding:var(--s5) var(--s4);max-width:680px;margin-top:var(--s5)}
@media (min-width:760px){.da-form{padding:var(--s6) var(--s5)}}
.da-alert{margin-bottom:var(--s4);padding:12px 14px;border-radius:12px;font-size:.97rem}
.da-alert[hidden]{display:none}
.da-alert.bad{background:rgba(233,55,37,.1);color:#ff8a7a;border:1px solid rgba(233,55,37,.45)}
.da-alert.ok{background:rgba(65,211,146,.08);color:var(--text);border:1px solid rgba(65,211,146,.4)}
.da-alert.ok h3{color:var(--ok);font-size:1.2rem}
.da-alert.ok p{margin-top:6px}
.cmp.data table{min-width:0}
.cmp.data tbody th{width:55%;font:500 1rem/1.4 var(--f-body);color:var(--text)}
.cmp.data td{color:var(--text)}

/* 404 */
.nf-code{font:700 clamp(6rem,3rem + 16vw,15rem)/.85 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(255,110,90,.75);text-shadow:0 0 60px rgba(233,55,37,.35)}
.nf-links{display:grid;gap:10px;margin-top:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.nf-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.nf-links{grid-template-columns:repeat(5,minmax(0,1fr))}}
.nf-links li{display:flex}
.nf-links a{flex:1;display:flex;flex-direction:column;gap:4px;padding:var(--s3) var(--s4);text-decoration:none}
.nf-links b{color:var(--text);font:600 1.1rem/1.2 var(--f-display)}
.nf-links span{font-size:.9rem;color:var(--body)}
.card .go{margin-top:auto;padding-top:var(--s2);color:var(--red-text);font-weight:600;font-size:.95rem}
.card:hover .go{color:#fff}
.screen{margin:var(--s3) auto 0;width:min(100%,240px);padding:6px;border-radius:22px;border:1px solid var(--line-2);background:#0e1417;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.screen img{width:100%;height:auto;border-radius:16px}