/*
  VelorSTUDIO visual system, editorial studio direction. Loaded after site.css: it replaces the tokens and the surface language
  (ink and warm paper, hairlines, sharp corners, large type, no glow) and adds the home, navigation and reading components.
  Motion is opacity and transform only and is switched off by prefers-reduced-motion.
*/
:root{
  color-scheme:dark;
  --bg:#0c0d10;--surface:#121318;--surface-2:#181a21;--surface-3:#20232c;
  --line:#25272f;--line-strong:#383c48;
  --text:#ece7de;--text-2:#b4afa5;--text-3:#8c887f;
  --accent:#6c97ff;--accent-strong:#8dadff;--accent-ink:#0a1020;--accent-soft:rgba(108,151,255,.1);--accent-line:rgba(108,151,255,.42);
  --amber:#e2ab5e;
  --ok:#5bd69d;--warn:#e8b25a;--bad:#f27a7a;--ok-soft:rgba(91,214,157,.1);--warn-soft:rgba(232,178,90,.1);--bad-soft:rgba(242,122,122,.1);
  --r-sm:2px;--r-md:3px;--r-lg:4px;
  --shadow:0 1px 0 rgba(255,255,255,.02) inset;
  --header-h:60px;
  --display:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f2ec;--surface:#fbf9f5;--surface-2:#efebe3;--surface-3:#e6e1d7;
  --line:#ddd7ca;--line-strong:#c4bcab;
  --text:#17150f;--text-2:#48443b;--text-3:#656054;
  --accent:#2447b8;--accent-strong:#1a368f;--accent-ink:#ffffff;--accent-soft:rgba(36,71,184,.08);--accent-line:rgba(36,71,184,.4);
  --amber:#8f5d12;
  --ok:#0f7a4d;--warn:#8a5a00;--bad:#b32d2d;
  --shadow:none;
}

/* Surface language: flat paper and ink, hairlines instead of shadows and glows */
body{background:var(--bg);color:var(--text);font-size:1rem;line-height:1.65}
h1,h2,h3,h4{font-weight:640;letter-spacing:-.03em}
h1{font-size:clamp(2.3rem,5.6vw,4.4rem);letter-spacing:-.045em;line-height:1.05}
h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.12}
.hero::before,.hero::after,.vcut::after{display:none}
.hero-feature,.card-major,.plugin-card,.rows,.table-wrap,.demo-list,.card,.spec,.pg-card,.tab-panel,.lab-status,.playground-proof{box-shadow:none}
.card-major,.preview,.tab-panel,.pg-card,.faq-aside,.support-console,.lab-status,.pillar,.hero-feature,.playground .tabs,.playground-proof{background:var(--surface)}
.site-header{box-shadow:none}
a.card:hover{transform:none;background:var(--surface-2);border-color:var(--line-strong)}
.lab-pulse{box-shadow:none;animation:none}
.support-console::before,.flow-step::after{animation:none;display:none}
.filter-chip,.px-product,.trust-chips li,.demo-chip,.chip-remove,.status-dot,.px-product[aria-selected]{border-radius:3px}
.badge{border-radius:2px;height:22px;padding:0 8px;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--amber);font-size:.74rem;letter-spacing:.12em}
.eyebrow::before{width:24px;height:1px;margin:0;border:0;background:currentColor;transform:none}
.btn{border-radius:var(--r-md);font-weight:600;letter-spacing:-.005em}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.section{padding:clamp(64px,9vw,128px) 0}
.section-alt{background:var(--surface);border-block:1px solid var(--line)}
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(20px,3vw,32px);border-bottom:1px solid var(--line)}
.page-head h1{max-width:20ch}
.page-head .lead{max-width:60ch}
.page-head+.section{padding-top:clamp(28px,4vw,48px)}
.section-head h2{max-width:none}
.lead{color:var(--text-2);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6}

/* Header and navigation: five entries, two panels */
.site-header{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px) saturate(1.2);border-bottom:1px solid var(--line)}
.site-header.is-scrolled{border-bottom-color:var(--line-strong)}
.header-row{gap:16px}
.brand{font-size:1rem;letter-spacing:-.025em}
.primary{display:none;align-items:center;gap:2px;margin-left:24px}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--text-2);font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;list-style:none;white-space:nowrap}
.nav-sum::-webkit-details-marker{display:none}
.nav-link:hover,.nav-sum:hover{color:var(--text);background:none;text-decoration:none}
.primary a.nav-link[aria-current="page"],.nav-sum.is-active{color:var(--text);background:none;border-bottom-color:var(--accent)}
.nav-sum svg{transition:transform .2s var(--ease)}
details.mega[open]>.nav-sum svg{transform:rotate(180deg)}
details.mega[open]>.nav-sum{color:var(--text)}
details.mega{position:relative}
.mega-panel{position:absolute;left:-8px;top:calc(100% + 8px);z-index:60;width:min(420px,92vw);padding:8px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:0 24px 48px -28px rgba(0,0,0,.7)}
.mega-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.primary .mega-panel a{display:grid;gap:3px;padding:11px 14px;border-radius:var(--r-md);color:var(--text)}
.primary .mega-panel a strong{font-size:.95rem;font-weight:620}
.primary .mega-panel a span{color:var(--text-3);font-size:.82rem;line-height:1.4}
.primary .mega-panel a:hover,.primary .mega-panel a[aria-current="page"]{background:var(--surface-2);text-decoration:none}
.primary .mega-panel a[aria-current="page"] strong{color:var(--accent)}
.header-tools{gap:4px}
@media (min-width:1200px){
  .primary{display:flex}
  .mnav{display:none}
  .hide-md{display:inline-flex}
}
@media (max-width:1199px){
  .primary,.hide-md{display:none}
  .mnav{display:block}
}
/* Drawer for narrow screens: full width under the header, grouped like the desktop panels */
.mnav-panel{position:fixed;left:0;right:0;top:var(--header-h);bottom:auto;min-width:0;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow:auto;display:grid;gap:0;padding:8px 20px 28px;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:var(--bg);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.mnav-h{margin:18px 0 2px;font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.mnav-panel .mnav-link{display:block;padding:13px 2px;border-bottom:1px solid var(--line);border-radius:0;color:var(--text);font-size:1.05rem;font-weight:550}
.mnav-panel .mnav-link[aria-current="page"]{color:var(--accent)}
.mnav-panel .mnav-link:hover{background:none;text-decoration:none;color:var(--accent)}
.mnav-ext{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mnav-panel .mnav-ext a{display:inline-flex;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);font-size:.92rem;color:var(--text)}

/* Footer */
.site-footer{background:var(--bg);border-top:1px solid var(--line-strong);padding-top:clamp(48px,6vw,80px)}
.footer-brand p{font-size:1rem}
.footer-cols h2{font-family:var(--mono);font-weight:500;letter-spacing:.12em;color:var(--amber)}

/* Home: hero */
.h-hero{position:relative;padding:clamp(48px,8vw,120px) 0 clamp(40px,6vw,88px);border-bottom:1px solid var(--line)}
.h-hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:32px clamp(32px,6vw,96px);align-items:end}
.h-title{max-width:17ch;margin:0;font-size:clamp(2.2rem,7vw,6rem);line-height:1.02;letter-spacing:-.05em;font-weight:650;overflow-wrap:break-word;hyphens:auto}
.h-hero .lead{max-width:50ch;margin-top:clamp(18px,2.4vw,28px)}
.h-hero .hero-cta{margin-top:clamp(24px,3vw,36px)}
.h-points{list-style:none;margin:0;padding:0;display:grid;gap:0;color:var(--text-2);font-size:.92rem}
.h-points li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line-strong)}
.h-points li:last-child{border-bottom:1px solid var(--line-strong)}
.h-points .tp-ic{flex:none;margin-top:3px;color:var(--ok)}
.h-arms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(40px,6vw,80px);border:1px solid var(--line-strong);background:var(--surface)}
.h-arm{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,3vw,36px);color:var(--text);overflow:hidden}
.h-arm+.h-arm{border-left:1px solid var(--line-strong)}
.h-arm:hover{text-decoration:none;background:var(--surface-2)}
.h-arm-n{font:500 .76rem var(--mono);letter-spacing:.1em;color:var(--amber)}
.h-arm h2{margin:0;font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.04em}
.h-arm p{margin:0;max-width:44ch;color:var(--text-2)}
.h-arm-icons{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(12px,2vw,24px) 0;padding:0;list-style:none}
.h-arm-icons .p-icon{width:48px;height:48px;border-radius:var(--r-md)}
.h-arm-cover{display:block;width:100%;height:auto;margin:clamp(12px,2vw,24px) 0;border:1px solid var(--line-strong)}
.h-arm .link-arrow{margin-top:auto;color:var(--accent)}

/* Home: section heads */
.h-head{display:grid;gap:0;margin-bottom:clamp(28px,4vw,56px)}
.h-head h2{max-width:18ch;margin:0;font-size:clamp(2rem,4.8vw,3.8rem);line-height:1.04;letter-spacing:-.045em;font-weight:650}
.h-head p:not(.eyebrow){max-width:58ch;margin:18px 0 0;color:var(--text-2);font-size:1.05rem}
.h-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}

/* Home: studio index (numbered rows, one preview) */
.h-index .filter-bar{margin-bottom:28px}
.h-index .explorer-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px)}
.route-list{padding:0;gap:0;border-top:1px solid var(--line-strong)}
.route-list::before{display:none}
.stop{display:grid;grid-template-columns:34px 28px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:62px;padding:10px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;white-space:normal}
.stop:hover{background:var(--surface-2)}
.stop[aria-current="true"]{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent);border-color:var(--line)}
.stop-code{font:500 .76rem var(--mono);color:var(--text-3)}
.stop-name{font-size:1.08rem;font-weight:620;letter-spacing:-.015em}
.stop-state{display:inline-flex;align-items:center;gap:8px;font:500 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.explorer .stop .stop-dot{position:static;display:inline-block;width:7px;height:7px;margin:0;border:0;border-radius:50%;background:var(--text-3);transform:none}
.explorer .stop .stop-dot.stop-ok{background:var(--ok)}
.explorer .stop .stop-dot.stop-warn{background:var(--warn)}
.preview-stage{position:sticky;top:calc(var(--header-h) + 24px)}
.preview{padding:clamp(20px,2.6vw,32px);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:none}
.preview-text{font-size:1.1rem;color:var(--text)}
@media (max-width:900px){
  .h-index .explorer-grid{grid-template-columns:minmax(0,1fr)}
  .route-list{display:grid;overflow:visible;padding:0;scroll-snap-type:none}
  .route-list li{flex:none}
  .stop{border:0;border-bottom:1px solid var(--line);white-space:normal}
  .stop-state{display:inline-flex}
  .preview-stage{display:none}
}
@media (max-width:480px){.stop{grid-template-columns:28px 28px minmax(0,1fr);gap:10px}.stop-state{grid-column:3;font-size:.66rem}}

/* Home: spotlights */
.h-spot-list{border-top:1px solid var(--line-strong)}
.h-spot{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,6vw,96px);padding:clamp(36px,6vw,80px) 0;border-bottom:1px solid var(--line)}
.h-spot:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.h-spot:nth-child(even) .h-spot-main{order:2}
.h-spot-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.h-spot-code{margin:0;font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.h-spot-title{display:flex;align-items:center;gap:16px}
.h-spot-title .p-icon{width:56px;height:56px;border-radius:var(--r-md)}
.h-spot-title h3{margin:0;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.045em}
.h-spot-title h3 a{color:var(--text)}.h-spot-title h3 a:hover{color:var(--accent);text-decoration:none}
.h-spot-lead{margin:0;max-width:38ch;font-size:1.2rem;color:var(--text);line-height:1.45}
.h-spot-sum{margin:0;max-width:50ch;color:var(--text-2)}
.h-spot-flow{min-width:0;align-self:center}
.h-flow{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.h-flow li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:550;letter-spacing:-.01em}
.h-flow-n{font:500 .78rem var(--mono);color:var(--text-3)}
.h-spot-shot{margin:24px 0 0;border:1px solid var(--line-strong);background:var(--surface)}
.h-spot-shot img{display:block;width:100%;height:auto}
.h-spot-shot figcaption{padding:10px 14px;border-top:1px solid var(--line)}
@media (max-width:900px){
  .h-spot,.h-spot:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .h-spot:nth-child(even) .h-spot-main{order:0}
}

/* Home: playground band */
.h-play{background:var(--surface);border-block:1px solid var(--line)}

/* Home: assets */
.h-asset-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.h-asset{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;color:var(--text);border:1px solid var(--line-strong);background:var(--surface)}
.h-asset:hover{text-decoration:none;border-color:var(--accent-line)}
.h-asset-cover{display:block;width:100%;height:auto;border-bottom:1px solid var(--line-strong)}
.h-asset-body{display:grid;align-content:start;gap:10px;padding:clamp(18px,2.4vw,28px)}
.h-asset-name{font-size:1.3rem;letter-spacing:-.025em;line-height:1.2}
.h-asset-text{color:var(--text-2)}
.h-asset-sizes{display:flex;align-items:flex-end;gap:22px;margin:6px 0;padding:14px 16px;list-style:none;border:1px dashed var(--line-strong);background:var(--bg)}
.h-asset-sizes li{display:grid;justify-items:center;gap:6px}
.h-asset-sizes span{font:500 .68rem var(--mono);color:var(--text-3)}
.h-asset-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}

/* Home: evidence */
.h-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 clamp(36px,5vw,64px);border-top:1px solid var(--line-strong)}
.h-facts>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;padding:22px 20px 22px 0;border-bottom:1px solid var(--line)}
.h-facts dt{font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.h-facts dd{margin:0;font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:620;line-height:1;letter-spacing:-.05em}
.h-evidence .pillars{margin-bottom:clamp(36px,5vw,64px);gap:clamp(16px,2vw,32px)}
.pillar{padding:18px 0 0;border:0;border-top:1px solid var(--line-strong);border-radius:0;background:none}
.pillar h3{font-size:1.1rem}
.choose-grid{gap:0;border-top:1px solid var(--line-strong)}
.choose-card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:22px 20px 22px 0}
.choose-card:hover,a.choose-card:hover{background:none;border-color:var(--line)}
.choose-card strong{font-size:1.2rem;letter-spacing:-.02em}
.choose-card:hover strong{color:var(--accent)}
.h-community{background:var(--surface);border-top:1px solid var(--line-strong)}
.h-community h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em}

/* Page rail: where you are on the home page (studio.js sets aria-current) */
.h-rail{position:fixed;left:18px;top:50%;z-index:30;display:none;transform:translateY(-50%)}
@media (min-width:1500px){.h-rail{display:block}}
.h-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.h-rail a{display:flex;align-items:center;gap:10px;color:var(--text-3);font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.h-rail a::before{content:"";width:12px;height:1px;background:currentColor;transition:width .2s var(--ease)}
.h-rail a span{opacity:0;transition:opacity .2s var(--ease);white-space:nowrap}
.h-rail a:hover,.h-rail a:focus-visible,.h-rail a[aria-current="location"]{color:var(--text);text-decoration:none}
.h-rail a:hover span,.h-rail a:focus-visible span,.h-rail a[aria-current="location"] span{opacity:1}
.h-rail a[aria-current="location"]{color:var(--accent)}
.h-rail a[aria-current="location"]::before{width:28px}

/* Assets, plugin pages, catalog, status, compare, finder: same language, larger type, flat surfaces */
.as-hero{border-bottom:1px solid var(--line)}
.as-hero::before{display:none}
.as-wall li,.as-pack,.as-mini,.as-lab-card,.as-edition{box-shadow:none}
.product-hero{padding:clamp(24px,3vw,40px) 0 clamp(24px,3vw,40px)}
.product-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.05em}
.product-head .p-icon{border-radius:var(--r-md)}
.product-cover,.media-open,.media-video video{border-radius:var(--r-lg)}
.spec{border-radius:var(--r-lg)}
.table-wrap{border-radius:var(--r-lg)}
thead th{font-family:var(--mono);font-weight:500;letter-spacing:.08em}
.status-table .row-name span{white-space:normal}
.status-table .row-name{gap:10px}
.cta-band{border-top:1px solid var(--line-strong)}

/* Documentation: reading first */
.doc-layout{grid-template-columns:240px minmax(0,1fr) 220px;gap:clamp(24px,4vw,56px);padding-block:clamp(28px,4vw,56px) 96px}
.doc-main{max-width:76ch;font-size:1.03rem;line-height:1.75}
.prose h1{font-size:clamp(2.2rem,4.4vw,3.4rem);letter-spacing:-.045em;line-height:1.08;margin-bottom:18px}
.prose h2{margin:56px 0 14px;padding-top:28px;border-top:1px solid var(--line);font-size:clamp(1.4rem,2.4vw,1.9rem)}
.prose h3{margin:32px 0 10px}
.prose p,.prose li{color:var(--text-2)}
.prose code{border-radius:var(--r-sm)}
.code-block{border-radius:var(--r-md)}
.doc-side a,.doc-toc a{border-radius:0}
.doc-side a[aria-current="page"]{background:none;color:var(--text);border-left-color:var(--accent);font-weight:600}
.side-title{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);font-weight:500}
.glance,.shot,.pager a{border-radius:var(--r-md)}
@media (max-width:1100px){.doc-layout{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:900px){
  .doc-layout{grid-template-columns:minmax(0,1fr)}
  .doc-main{font-size:1rem}
  .doc-side{border-bottom:1px solid var(--line);padding-bottom:8px}
}

/* Responsive */
@media (max-width:1000px){
  .h-hero-top{grid-template-columns:minmax(0,1fr)}
  .h-points{max-width:none}
  .h-arms{grid-template-columns:minmax(0,1fr)}
  .h-arm+.h-arm{border-left:0;border-top:1px solid var(--line-strong)}
  .h-asset-grid{grid-template-columns:minmax(0,1fr)}
  .h-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hero-cta .btn{flex:1 1 100%}
  .h-facts dd{font-size:2.4rem}
  .h-asset-sizes{gap:16px}
  .section{padding:clamp(48px,12vw,72px) 0}
}

/* Motion: reveal, a soft lift on covers and a light parallax (transform only; all of it off for reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .h-arm-cover,.h-asset-cover{transition:transform .5s var(--ease)}
  .h-arm:hover .h-arm-cover,.h-asset:hover .h-asset-cover{transform:perspective(900px) rotateX(1.2deg) scale(1.02)}
  .h-arm-cover{translate:0 var(--py,0px)}
  .h-hero-copy,.h-points{animation:rise .7s var(--ease) both}
  .h-points{animation-delay:.1s}
  .stop{transition:background .18s var(--ease),box-shadow .18s var(--ease)}
}
@media (max-width:700px){.reveal{transform:none}}

/* Product pages: documentation links and the real flow */
.doc-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.doc-links a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:var(--text);font-weight:600;letter-spacing:-.01em}
.doc-links a:hover{text-decoration:none;color:var(--accent)}
.doc-links-n{font:500 .76rem var(--mono);color:var(--text-3)}
.doc-links svg{color:var(--text-3)}
@media (max-width:700px){.doc-links{grid-template-columns:minmax(0,1fr)}}

/* Secondary pages: one editorial system instead of a collection of legacy cards */
.finder-head .callout,.compare-head .callout,.status-head .callout,.usecases-head .callout,
.px-page-head .callout{max-width:76ch;margin-top:24px}

/* Finder: questions form a numbered brief; results read like a studio recommendation */
.finder-grid{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(32px,6vw,88px);align-items:start}
.finder-form{border-top:1px solid var(--line-strong)}
.finder-form .q{margin:0;padding:clamp(22px,3vw,34px) 0;border:0;border-bottom:1px solid var(--line)}
.finder-form .q legend{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;width:100%;padding:0;color:var(--text);font-size:1.08rem;font-weight:620;letter-spacing:-.015em}
.finder-form .q-num{font:500 .74rem var(--mono);letter-spacing:.08em;color:var(--amber)}
.finder-form .q>p{margin:8px 0 16px 54px}
.q-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-left:54px}
.q-opt{position:relative;display:block;min-width:0;cursor:pointer}
.q-opt input{position:absolute;opacity:0;pointer-events:none}
.q-opt span{display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--text-2);font-size:.88rem;text-align:center}
.q-opt input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.q-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.finder-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:24px}
.finder-out{position:sticky;top:calc(var(--header-h) + 24px);padding:clamp(22px,3vw,32px);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--surface)}
.finder-out h2{margin-top:0}
.result-list{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.result-list .result-card{padding:24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.result-list .result-card:hover{background:none}
.result-list .result-card .card-text{color:var(--text-2)}

/* Compare: a compact selector above a ruled, horizontally scrollable ledger */
.compare-pick{margin-bottom:32px;padding:0;border:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);border-radius:0;background:none;box-shadow:none}
.compare-pick>h2{margin:0;padding:22px 0 4px}
.compare-pick>.muted{margin:0 0 18px}
.pick-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.pick-list li{min-width:0;border-bottom:1px solid var(--line)}
.pick-list li:not(:nth-child(3n)){border-right:1px solid var(--line)}
.pick{position:relative;display:grid;grid-template-columns:auto 28px minmax(0,1fr);gap:10px;align-items:center;min-height:56px;padding:10px 12px;color:var(--text-2);cursor:pointer}
.pick:hover{background:var(--surface);color:var(--text)}
.pick input{accent-color:var(--accent)}
.pick:has(input:checked){background:var(--accent-soft);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.compare-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 0}
.compare-bar .result-count{margin:0 auto 0 0}
.cmp-wrap{overflow:auto;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.cmp-table{min-width:820px;border:0;border-collapse:collapse}
.cmp-table th,.cmp-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table tr:last-child>*{border-bottom:0}
.cmp-table tr>*:last-child{border-right:0}
.cmp-table thead th{position:sticky;top:0;z-index:2;background:var(--surface)}
.cmp-table thead th:first-child,.cmp-table tbody th{position:sticky;left:0;z-index:3;background:var(--bg)}
.cmp-table tbody th{width:180px;color:var(--text-3);font:500 .72rem var(--mono);letter-spacing:.07em;text-transform:uppercase}

/* Status: a release ledger with stable product names and visible counts */
.status-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:clamp(28px,4vw,48px) 0 0;padding:0;list-style:none;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.status-counts li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end;padding:18px 20px 18px 0}
.status-counts li+li{padding-left:20px;border-left:1px solid var(--line)}
.status-counts strong{font-size:clamp(2rem,4vw,3.4rem);font-weight:620;line-height:1;letter-spacing:-.05em}
.status-counts span{padding-bottom:3px;color:var(--text-3);font:500 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.status-ledger .table-wrap-flat{border-block:1px solid var(--line-strong)}
.status-table{min-width:980px}
.status-table .row-name{display:inline-flex;align-items:center;min-width:max-content;gap:10px;font-weight:620}
.status-table .row-name span{white-space:nowrap;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.status-table td,.status-table th{vertical-align:top}
.status-table tbody tr:hover{background:var(--surface)}

/* Trust: evidence is the visual hierarchy, not decorative cards */
.trust-head-grid{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(36px,7vw,96px);align-items:end}
.trust-key{padding:0;border:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);border-radius:0;background:none}
.trust-key>h2{padding:18px 0;margin:0;border-bottom:1px solid var(--line);font:500 .76rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--amber)}
.trust-key ul{margin:0;padding:0;list-style:none}
.trust-key li{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.trust-key li:last-child{border-bottom:0}
.trust-key li span{color:var(--text-2);font-size:.9rem}
.trust-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.trust-list>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:24px 24px 24px 0;border-bottom:1px solid var(--line)}
.trust-list>li:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.trust-list svg{color:var(--ok)}
.trust-list h3{margin:0 0 6px;font-size:1.05rem}
.trust-list p{margin:0;color:var(--text-2)}
.trust-list-tight{grid-template-columns:minmax(0,1fr)}
.trust-list-tight>li:nth-child(even){padding-left:0;border-left:0}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 20px;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:.85rem}
.table-wrap-flat{overflow:auto}
.table-wrap-flat table{width:100%;border-collapse:collapse}
.table-wrap-flat th,.table-wrap-flat td{border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap-flat .row-name span{white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
.evidence-table{min-width:980px}

/* Support: direct channels first, reporting checklist second */
.support-head-grid{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:clamp(36px,7vw,96px);align-items:end}
.support-console{position:relative;display:grid;gap:9px;padding:22px 0;border:0;border-block:1px solid var(--line-strong);border-radius:0;background:none}
.support-console span,.support-console small{color:var(--text-3);font:500 .72rem var(--mono);letter-spacing:.07em;text-transform:uppercase}
.support-console strong{font-size:1.4rem;letter-spacing:-.025em}
.support-console i{width:36px;height:2px;background:var(--accent)}
.support-channels .grid{gap:0;border-top:1px solid var(--line-strong)}
.support-channels .card{display:flex;flex-direction:column;min-height:230px;padding:28px 28px 28px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.support-channels .card+.card{padding-left:28px;border-left:1px solid var(--line)}
.support-channels .card:hover{background:none}
.support-channels .card p{color:var(--text-2)}
.support-channels .link-arrow{margin-top:auto;color:var(--accent)}

/* FAQ: flat numbered disclosures with a concise trust rail */
.faq-layout{grid-template-columns:minmax(250px,.34fr) minmax(0,.66fr);gap:clamp(36px,7vw,96px);align-items:start}
.faq-aside{position:sticky;top:calc(var(--header-h) + 24px);padding:24px 0;border:0;border-block:1px solid var(--line-strong);border-radius:0;background:none}
.faq-aside .trust-orbit{display:inline-flex;margin-bottom:18px;color:var(--ok)}
.faq-aside p{color:var(--text-2)}
.faq-list{border-top:1px solid var(--line-strong)}
.faq-premium{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.faq-premium summary{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:72px;padding:16px 0;color:var(--text);font-size:1.05rem;font-weight:620;cursor:pointer}
.faq-premium summary>span{font:500 .72rem var(--mono);letter-spacing:.08em;color:var(--amber)}
.faq-premium summary svg{color:var(--text-3)}
.faq-premium[open] summary svg{transform:rotate(180deg)}
.faq-premium>div{padding:0 0 22px 54px}
.faq-premium>div p{max-width:65ch;margin:0;color:var(--text-2)}

/* Use cases: one operational scenario per ruled row */
.usecase-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line-strong)}
.usecase{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:20px clamp(30px,6vw,88px);padding:clamp(32px,5vw,64px) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.usecase:hover{background:none}
.usecase>.card-head,.usecase>.callout,.usecase>.card-actions{grid-column:1}
.usecase>.uc-facts,.usecase>.flow-box{grid-column:2}
.usecase>.card-head{align-self:start}
.usecase>.uc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--line-strong)}
.uc-facts>div{padding:16px 18px 16px 0;border-bottom:1px solid var(--line)}
.uc-facts>div:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
.uc-facts dt{margin-bottom:6px;color:var(--text-3);font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.uc-facts dd{margin:0;color:var(--text-2)}
.flow-box{padding:0;border:0;border-radius:0;background:none}
.flow-tag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.flow{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.flow-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.flow-n{font:500 .7rem var(--mono);color:var(--amber)}

/* Playground: the simulator is framed like a product tool, labs like an index */
.px-section{padding-top:clamp(28px,4vw,48px);background:var(--surface);border-bottom:1px solid var(--line)}
.px-full{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--bg);box-shadow:none}
.px-full::before{box-shadow:none}
.playground .tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0;border:1px solid var(--line-strong);border-radius:0;background:none;box-shadow:none}
.playground .tab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-height:54px;padding:10px 12px;border:0;border-right:1px solid var(--line);border-radius:0;background:none;color:var(--text-2);text-align:left}
.playground .tab:last-child{border-right:0}
.playground .tab>span{font:500 .68rem var(--mono);color:var(--text-3)}
.playground .tab[aria-selected="true"]{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.playground .tab-panel{margin-top:0;padding:clamp(20px,3vw,34px);border:1px solid var(--line-strong);border-top:0;border-radius:0;background:var(--surface);box-shadow:none}

/* Assets: real pack imagery, restrained chrome and clear edition ledgers */
.as-hero{padding:clamp(48px,7vw,96px) 0}
.as-hero-grid{gap:clamp(36px,7vw,96px)}
.as-stats{border-block:1px solid var(--line-strong)}
.as-wall{gap:8px}
.as-wall li{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.as-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line-strong)}
.as-pack{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);padding:clamp(30px,5vw,60px) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.as-pack:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)}
.as-pack:nth-child(even) .as-cover{order:2}
.as-cover{align-self:start;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
.as-pack-body{align-self:center;padding:0}
.as-strip{padding:12px;border:1px solid var(--line);border-radius:0;background:var(--surface)}
.as-lab-grid,.as-editions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-strong)}
.as-lab-card,.as-edition{padding:24px 20px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none}
.as-lab-card:last-child,.as-edition:last-child{border-right:0}
.as-edition.is-rec{background:var(--accent-soft);box-shadow:inset 0 2px 0 var(--accent)}
.as-name-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line-strong)}
.as-group{padding:24px 24px 24px 0;border-bottom:1px solid var(--line)}
.as-group:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.as-home-grid{gap:0;border-top:1px solid var(--line-strong)}
.as-mini{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}

/* Changelog: releases read as a chronological document */
.log-group{padding:28px 0;border-top:1px solid var(--line-strong)}
.log-group h3{margin-top:0}
.log{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:18px 0;border-top:1px solid var(--line)}
.log h4{margin:0;font:500 .74rem var(--mono);letter-spacing:.07em;color:var(--amber)}
.log ul{margin:0;color:var(--text-2)}

@media (max-width:900px){
  .finder-grid,.trust-head-grid,.support-head-grid,.faq-layout{grid-template-columns:minmax(0,1fr)}
  .finder-out,.faq-aside{position:static}
  .usecase{grid-template-columns:minmax(0,1fr)}
  .usecase>.card-head,.usecase>.callout,.usecase>.card-actions,.usecase>.uc-facts,.usecase>.flow-box{grid-column:1}
  .as-pack,.as-pack:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .as-pack:nth-child(even) .as-cover{order:0}
  .playground .tabs{grid-template-columns:minmax(0,1fr)}
  .playground .tab,.playground .tab:last-child{border-right:0;border-bottom:1px solid var(--line)}
  .playground .tab:last-child{border-bottom:0}
  .playground .tab[aria-selected="true"]{box-shadow:inset 2px 0 0 var(--accent)}
  .playground .tab-panel{border-top:1px solid var(--line-strong)}
}
@media (max-width:700px){
  .q-options,.pick-list,.status-counts,.trust-list,.as-lab-grid,.as-editions,.as-name-groups{grid-template-columns:minmax(0,1fr)}
  .q-options{margin-left:0}
  .finder-form .q>p{margin-left:0}
  .pick-list li,.pick-list li:not(:nth-child(3n)){border-right:0}
  .status-counts li+li{padding-left:0;border-left:0}
  .trust-list>li:nth-child(even),.as-group:nth-child(even){padding-left:0;border-left:0}
  .support-channels .grid{grid-template-columns:minmax(0,1fr)}
  .support-channels .card+.card{padding-left:0;border-left:0}
  .uc-facts{grid-template-columns:minmax(0,1fr)!important}
  .uc-facts>div:nth-child(even){padding-left:0;border-left:0}
  .as-lab-card,.as-edition,.as-lab-card:last-child,.as-edition:last-child{border-right:0}
  .log{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* Visual QA refinements — 2026-10-13 */

/* Home opening scene: architectural routes, restrained colour movement and real-content reveals. */
.h-hero{--hero-x:72%;--hero-y:24%;isolation:isolate;overflow:hidden;background:
  radial-gradient(640px circle at var(--hero-x) var(--hero-y),rgba(108,151,255,.11),transparent 62%),
  linear-gradient(180deg,color-mix(in srgb,var(--surface) 28%,transparent),transparent 58%)}
.h-hero>.container{position:relative;z-index:2}
.h-motion{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.72}
.h-motion-map{position:absolute;inset:-6% -3%;width:106%;height:112%}
.h-motion-path{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:7 13;vector-effect:non-scaling-stroke;opacity:.23}
.h-motion-path-b{stroke:var(--amber);stroke-dasharray:2 18;opacity:.16}
.h-motion-node{fill:var(--bg);stroke:var(--accent);stroke-width:2;opacity:.68}
.h-motion-node-b{stroke:var(--amber)}
.h-motion-orb{position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(2px);opacity:.12;background:radial-gradient(circle,rgba(108,151,255,.65),transparent 68%)}
.h-motion-orb-a{right:7%;top:6%}
.h-motion-orb-b{left:20%;bottom:-100px;width:340px;height:340px;background:radial-gradient(circle,rgba(226,171,94,.34),transparent 70%)}
.h-title{position:relative;text-wrap:balance}
.h-title::after{content:"";display:block;width:clamp(72px,10vw,150px);height:3px;margin-top:22px;background:linear-gradient(90deg,var(--accent),var(--amber));transform-origin:left}
.h-arm{transition:background .25s var(--ease),color .25s var(--ease)}
.h-arm::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,var(--accent),var(--amber));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.h-arm:hover::after{transform:scaleX(1)}
.h-arm-icons li{transition:transform .25s var(--ease),opacity .25s var(--ease)}
.h-arm-plugins:hover .h-arm-icons li{transform:translateY(-3px)}
.h-arm-plugins:hover .h-arm-icons li:nth-child(2n){transform:translateY(2px)}
.h-spot{position:relative}
.h-spot::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:linear-gradient(90deg,var(--accent),transparent);transition:width .8s var(--ease)}
.h-spot.is-shown::before{width:44%}
.h-flow li{transition:background .2s var(--ease),padding-left .2s var(--ease)}
.h-flow li:hover{padding-left:10px;background:var(--surface)}
.h-facts dd{background:linear-gradient(100deg,var(--text),var(--accent-strong));background-clip:text;-webkit-background-clip:text;color:transparent}
@media (prefers-reduced-motion:no-preference){
  .h-motion-path-a{animation:hRoute 26s linear infinite}
  .h-motion-path-b{animation:hRouteBack 34s linear infinite}
  .h-motion-orb-a{animation:hOrbA 12s ease-in-out infinite alternate}
  .h-motion-orb-b{animation:hOrbB 15s ease-in-out infinite alternate}
  .h-title::after{animation:hTitleLine .9s .35s var(--ease) both}
  .h-arm-icons li{animation:hIconFloat 5s ease-in-out infinite}
  .h-arm-icons li:nth-child(2n){animation-delay:-1.4s}.h-arm-icons li:nth-child(3n){animation-delay:-2.8s}
  .motion-ready .is-home .h-head,.motion-ready .is-home .h-arm,.motion-ready .is-home .h-spot,
  .motion-ready .is-home .h-asset,.motion-ready .is-home .h-facts>div,.motion-ready .is-home .pillar,
  .motion-ready .is-home .choose-card,.motion-ready .is-home .tl-item{opacity:0;transform:translateY(20px);transition:opacity .62s var(--ease),transform .62s var(--ease);transition-delay:calc(var(--reveal-order,0) * 55ms)}
  .motion-ready .is-home .is-shown{opacity:1;transform:none}
  @keyframes hRoute{to{stroke-dashoffset:-400}}
  @keyframes hRouteBack{to{stroke-dashoffset:400}}
  @keyframes hOrbA{to{transform:translate(-90px,70px) scale(1.16)}}
  @keyframes hOrbB{to{transform:translate(120px,-55px) scale(.86)}}
  @keyframes hTitleLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
  @keyframes hIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
}
@media (max-width:700px){.h-motion{opacity:.42}.h-motion-orb{display:none}.h-title::after{margin-top:16px}}

/* Explorer: stronger route and a useful compact state at narrow widths. */
.route-list{counter-reset:studio-route}
.stop{overflow:hidden}
.stop::after{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:center;transition:transform .2s var(--ease)}
.stop[aria-current="true"]::after{transform:scaleY(1)}
.stop .p-icon{transition:transform .25s var(--ease),filter .25s var(--ease)}
.stop:hover .p-icon,.stop[aria-current="true"] .p-icon{transform:scale(1.08)}
@media (max-width:480px){
  .stop{grid-template-columns:28px 28px minmax(0,1fr) auto;min-height:58px}
  .stop-state{display:inline-flex!important;grid-column:auto;font-size:0}
  .stop-state .stop-dot{position:static!important;display:block!important;width:8px;height:8px;margin:0;border-width:0;background:var(--text-3)}
  .stop-state .stop-ok{background:var(--ok)}.stop-state .stop-warn{background:var(--warn)}
}

/* Finder: remove the oversized legacy fieldset surfaces and keep the result rail inside the viewport. */
.finder-grid{grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(28px,5vw,72px)}
.finder-form{display:block;min-width:0}
.finder-form fieldset.q{display:grid;gap:10px;margin:0;padding:24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;min-width:0}
.finder-form fieldset.q:first-of-type{border-top:1px solid var(--line-strong)}
.finder-form fieldset.q legend{float:left;display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;width:100%;margin:0;padding:0;line-height:1.4}
.finder-form fieldset.q legend+*{clear:both}
.finder-form fieldset.q>p{margin:0 0 4px 54px}
.finder-form .q-options{margin-left:54px}
.finder-out{width:100%;max-width:100%;min-width:0;overflow:hidden}
.finder-idle{display:grid;gap:8px}
.finder-idle>*{margin:0}
@media (max-width:900px){.finder-grid{grid-template-columns:minmax(0,1fr)}.finder-out{position:static}}
@media (max-width:560px){
  .finder-form fieldset.q legend{grid-template-columns:32px minmax(0,1fr)}
  .finder-form fieldset.q>p,.finder-form .q-options{margin-left:0}
}

/* Compare: product selection should feel like a deliberate comparison workspace. */
.compare-pick{position:relative;padding:22px 24px 0;border:1px solid var(--line-strong);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent-soft) 34%,var(--surface)))}
.compare-pick::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:linear-gradient(var(--accent),var(--amber))}
.pick-list{counter-reset:compare-product;gap:8px;padding:18px 0;border-top:0}
.pick-list li{counter-increment:compare-product;border:0!important}
.pick{grid-template-columns:22px 36px minmax(0,1fr) auto;min-height:66px;padding:10px 14px;border:1px solid var(--line);background:var(--bg)}
.pick::after{content:counter(compare-product,decimal-leading-zero);font:500 .64rem var(--mono);letter-spacing:.06em;color:var(--text-3)}
.pick .p-icon{width:36px;height:36px;transition:transform .2s var(--ease)}
.pick:hover{border-color:var(--line-strong)}
.pick:hover .p-icon,.pick:has(input:checked) .p-icon{transform:scale(1.08)}
.pick:has(input:checked){border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:color-mix(in srgb,var(--accent-soft) 78%,var(--surface))}
.compare-bar{margin:8px -24px 0;padding:16px 24px;border-top:1px solid var(--line)}
.cmp-wrap{position:relative;border:1px solid var(--line-strong);background:var(--surface)}
.cmp-table thead th{background:var(--surface-2);color:var(--text)}
.cmp-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface) 68%,transparent)}
.cmp-table tbody tr:hover td{background:var(--accent-soft)}
@media (max-width:700px){.compare-pick{padding-inline:16px}.compare-bar{margin-inline:-16px;padding-inline:16px}}

/* Status: equal cells, clear hierarchy, no awkward first-column inset. */
.status-counts{overflow:hidden;border:1px solid var(--line-strong);border-block-color:var(--line-strong)}
.status-counts li{position:relative;grid-template-columns:auto 1fr;gap:14px;min-height:108px;padding:24px!important;align-items:end}
.status-counts li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ok)}
.status-counts li:nth-child(2)::before{background:var(--warn)}
.status-counts li:nth-child(3)::before{background:var(--text-3)}
.status-counts strong{font-family:var(--display);font-variant-numeric:tabular-nums}
@media (max-width:700px){.status-counts li{min-height:82px}}

/* Trust: numbered principles and contained evidence text. */
.trust-head-grid{grid-template-columns:minmax(0,1fr) minmax(340px,420px)}
.trust-key{min-width:0;overflow:hidden;padding-inline:0}
.trust-key li{min-width:0;padding:16px 0;border-left:2px solid var(--accent-line)}
.trust-key li strong,.trust-key li span{display:block;min-width:0;white-space:normal;overflow-wrap:break-word}
.trust-list{counter-reset:trust-principle}
.trust-list>li{counter-increment:trust-principle;position:relative;display:block;padding:26px 26px 26px 44px}
.trust-list>li:nth-child(even){padding-left:68px}
.trust-list>li::before{content:counter(trust-principle,decimal-leading-zero);position:absolute;left:0;top:27px;width:42px;color:var(--amber);font:500 .7rem var(--mono);letter-spacing:.08em}
.trust-list>li:nth-child(even)::before{left:24px}
.trust-list>li>svg{display:none}
.trust-list-tight>li{padding-left:54px}
.trust-list-tight>li:nth-child(even){padding-left:54px}
.trust-list-tight>li:nth-child(even)::before{left:0}
@media (max-width:900px){.trust-head-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .trust-list>li,.trust-list>li:nth-child(even){padding-left:48px}
  .trust-list>li::before,.trust-list>li:nth-child(even)::before{left:0}
}

/* FAQ: remove the detached decorative badge and let the questions own the composition. */
.faq-aside .trust-orbit{display:none}
.faq-aside h2{margin-top:0}
.faq-aside::before{content:"";display:block;width:48px;height:2px;margin-bottom:22px;background:linear-gradient(90deg,var(--accent),var(--amber))}

/* Use cases: steps become a connected three-part flow instead of an empty number gutter. */
.flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line-strong)}
.flow-step{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:10px;min-height:116px;padding:18px;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--surface)}
.flow-step:last-child{border-right:0}
.flow-n{display:block;width:auto;height:auto;border-radius:0;background:none;color:var(--amber);font-size:.68rem;letter-spacing:.08em}
@media (max-width:620px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-step{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .flow-step:last-child{border-bottom:0}
}

/* Restraint pass: no ambient colour, no looping decoration, no gradient text. Reveals run once; hover feedback is a plain colour or line change. */
.h-hero{background:none}
.h-motion{opacity:.5}
.h-motion-orb{display:none}
.h-motion-path,.h-motion-path-a,.h-motion-path-b{animation:none!important}
.h-arm-icons li{animation:none!important}
.h-arm-plugins:hover .h-arm-icons li,.h-arm-plugins:hover .h-arm-icons li:nth-child(2n){transform:none}
.h-title::after{background:var(--accent);height:2px}
.h-arm::after,.h-spot::before{background:var(--accent)}
.h-facts dd{background:none;color:var(--text);-webkit-background-clip:border-box;background-clip:border-box}
.compare-pick{background:var(--surface)}
.compare-pick::before{background:var(--accent)}
.pick .p-icon,.stop .p-icon{transition:none}
.pick:hover .p-icon,.pick:has(input:checked) .p-icon,.stop:hover .p-icon,.stop[aria-current="true"] .p-icon{transform:none}
.h-arm:hover .h-arm-cover,.h-asset:hover .h-asset-cover{transform:none}

/* Compatibility checker */
.compat-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.compat-form{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:16px;padding:22px 0 0;border-top:1px solid var(--line-strong)}
.compat-form h2{margin:0 0 4px}
.compat-form .btn{justify-self:start}
.compat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.compat-row{display:grid;gap:10px;padding:20px 0;border-bottom:1px solid var(--line)}
.compat-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.compat-name{display:inline-flex;align-items:center;gap:12px;color:var(--text)}
.compat-name:hover{text-decoration:none;color:var(--accent)}
.compat-name strong{font-size:1.1rem;letter-spacing:-.02em;white-space:normal}
.compat-reason{margin:0;max-width:70ch}
.compat-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;color:var(--text-2);font-size:.88rem}
.compat-facts div{display:flex;gap:8px}
.compat-facts dt{color:var(--text-3)}
.compat-facts dd{margin:0}
.compat-badge-tested{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.compat-badge-supported{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.compat-badge-unverified{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.compat-badge-unsupported{color:var(--text-2);background:var(--surface-3);border-color:transparent}
.compat-badge-incompatible{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.compat-row[data-level="unsupported"] .compat-name,.compat-row[data-level="incompatible"] .compat-name{opacity:.72}
.compat-keys{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.compat-key{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.compat-key span{color:var(--text-2)}
.compat-tested strong{color:var(--ok)}.compat-supported strong{color:var(--accent)}.compat-unverified strong{color:var(--warn)}.compat-incompatible strong{color:var(--bad)}
@media (max-width:900px){.compat-grid{grid-template-columns:minmax(0,1fr)}.compat-form{position:static}}
@media (max-width:560px){.compat-key{grid-template-columns:minmax(0,1fr);gap:4px}}

/* Support: three steps, all of it through Discord */
.support-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-strong)}
.support-steps li{display:grid;gap:8px;align-content:start;padding:22px 24px 22px 0;border-bottom:1px solid var(--line)}
.support-steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.support-steps .step-n{font:500 .76rem var(--mono);letter-spacing:.1em;color:var(--amber)}
.support-steps h3{margin:0;font-size:1.2rem;letter-spacing:-.02em}
.support-steps p{margin:0;color:var(--text-2)}
@media (max-width:800px){.support-steps{grid-template-columns:minmax(0,1fr)}.support-steps li,.support-steps li+li{padding-left:0;border-left:0}}

/* Playground: example configurations */
.px-configs{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.px-config{border-bottom:1px solid var(--line)}
.px-config summary{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;cursor:pointer;list-style:none;font-weight:620;letter-spacing:-.01em}
.px-config summary::-webkit-details-marker{display:none}
.px-config summary svg{transition:transform .2s var(--ease)}
.px-config[open] summary svg{transform:rotate(180deg)}
.px-config .code-block{margin:0 0 20px}
.px-config-n{font:500 .76rem var(--mono);color:var(--text-3)}

/* Link and state polish used by the new pages */
.state-note{margin:0;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text-2)}

/* Index rows: the icon fills its 28 px column as a square (the general .p-icon size is 44 px) */
.stop .p-icon{width:28px;height:28px;min-width:28px;border-radius:var(--r-sm);justify-self:center}
.stop .p-icon-img{object-fit:contain}

/* Finder: one question at a time (the script adds .is-wizard; without it every question stays visible) */
.finder-form.is-wizard fieldset.q[hidden]{display:none}
.finder-wizard{display:grid;gap:12px;margin-bottom:8px;padding:0 0 20px;border-bottom:1px solid var(--line-strong)}
.finder-step-label{margin:0;font:500 .78rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.finder-progress{display:block;width:100%;height:4px;border-radius:0;background:var(--surface-3)}
.finder-progress::-webkit-progress-bar{background:var(--surface-3);border-radius:0}
.finder-progress::-webkit-progress-value{background:var(--accent);border-radius:0}
.finder-progress::-moz-progress-bar{background:var(--accent)}
.finder-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.finder-steps button{width:36px;height:36px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:transparent;color:var(--text-2);font:500 .78rem var(--mono);cursor:pointer}
.finder-steps button:hover{color:var(--text);border-color:var(--text-3)}
.finder-steps button.is-answered{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}
.finder-steps button[aria-current="step"]{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);color:var(--text)}
.finder-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:20px}
.finder-nav .btn[hidden]{display:none}
.finder-nav #finder-restart{margin-left:auto}
.finder-form.is-wizard .finder-actions[hidden]{display:none}
.finder-form.is-wizard fieldset.q:focus{outline:none}
.finder-form.is-wizard fieldset.q:focus-visible legend{outline:2px solid var(--accent);outline-offset:4px}
.finder-form.is-wizard fieldset.q{border-bottom:0;padding-bottom:8px}
@media (max-width:560px){.finder-nav .btn{flex:1 1 auto}.finder-nav #finder-restart{margin-left:0}}

/* Screenshot fixes: evidence key without the stray bar, principles with a real number column, one-column Playground stage, even asset counters */
.trust-key li,.trust-key li:last-child{border-left:0;padding:16px 0}
.trust-list>li,.trust-list>li:nth-child(even){display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 12px;position:relative;padding:24px 24px 24px 0}
.trust-list>li:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.trust-list>li::before,.trust-list>li:nth-child(even)::before{position:static;left:auto;top:auto;width:auto;padding-top:4px}
.trust-list>li>div{min-width:0}
.trust-list-tight>li,.trust-list-tight>li:nth-child(even){padding-left:0;border-left:0}
@media (max-width:900px){.trust-list>li,.trust-list>li:nth-child(even){padding:22px 0;border-left:0}}
.playground .container{display:block}
.playground .tabs{position:static;width:100%}
.as-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:560px;margin-top:28px}
.as-stats li{padding:18px 16px 18px 0}
.as-stats li+li{padding-left:22px;border-left:1px solid var(--line)}