/* Kenalyx public website — calm, precise, infrastructure look.
   Tokens: bare :root = light; dark via prefers-color-scheme (unless
   data-theme="light") and data-theme="dark". .dark-band forces dark tokens. */
:root{
  color-scheme: light;
  --ground:#F7F5F0; --surface:#FFFFFF; --surface-2:#F0EEE7;
  --ink:#161A1C; --ink-soft:#3A4145; --muted:#5F656A;
  --line:#E2DFD6; --line-soft:#ECEAE2;
  --accent:#1A6B4C; --accent-text:#14603F; --accent-soft:#E8F0EA;
  --warn:#8A5A1E; --warn-soft:#F5EDDF;
  --btn-bg:#161A1C; --btn-bg-hover:#000; --btn-fg:#F7F5F0;
  --code-key:#14603F; --code-punc:#9BA0A0;
  --elev:0 1px 2px rgba(20,24,26,.04), 0 14px 34px rgba(20,24,26,.06);
  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --sec:clamp(4.25rem,8vw,6.5rem);
  --r-sm:6px; --r-md:9px; --r-lg:12px;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  color-scheme: dark;
  --ground:#0B0E0F; --surface:#14181A; --surface-2:#181D1F;
  --ink:#ECEBE6; --ink-soft:#BAC0BD; --muted:#8E9591;
  --line:#252B2D; --line-soft:#1B2123;
  --accent:#4FA985; --accent-text:#72C6A2; --accent-soft:#132420;
  --warn:#D9A96B; --warn-soft:#241D14;
  --btn-bg:#ECEBE6; --btn-bg-hover:#fff; --btn-fg:#0B0E0F;
  --code-key:#72C6A2; --code-punc:#6C7371;
  --elev:0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0B0E0F; --surface:#14181A; --surface-2:#181D1F;
  --ink:#ECEBE6; --ink-soft:#BAC0BD; --muted:#8E9591;
  --line:#252B2D; --line-soft:#1B2123;
  --accent:#4FA985; --accent-text:#72C6A2; --accent-soft:#132420;
  --warn:#D9A96B; --warn-soft:#241D14;
  --btn-bg:#ECEBE6; --btn-bg-hover:#fff; --btn-fg:#0B0E0F;
  --code-key:#72C6A2; --code-punc:#6C7371;
  --elev:0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
}
.dark-band{
  --ground:#0E1214; --surface:#151B1E; --surface-2:#1A2124;
  --ink:#ECEBE6; --ink-soft:#BAC0BD; --muted:#8E9591;
  --line:#283033; --line-soft:#1D2427;
  --accent:#4FA985; --accent-text:#7ACFAA; --accent-soft:#132420;
  --btn-bg:#ECEBE6; --btn-bg-hover:#fff; --btn-fg:#0B0E0F;
  background:var(--ground); color:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--ground); color:var(--ink); font-family:Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:Sora, ui-sans-serif, system-ui, sans-serif; margin:0; letter-spacing:-.02em; text-wrap:balance}
p{margin:0}
code,pre{font-family:"DM Mono", ui-monospace, Menlo, Consolas, monospace}
:not(pre) > code{font-size:.86em; background:var(--surface-2); border:1px solid var(--line-soft); padding:.05rem .35rem; border-radius:4px}
::selection{background:color-mix(in srgb, var(--accent) 22%, transparent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
.wrap{max-width:1120px; margin:0 auto; padding-inline:clamp(1rem,4vw,2rem)}
.narrow{max-width:760px}
.center{text-align:center}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--btn-bg); color:var(--btn-fg); padding:.6rem 1rem}
.skip:focus{left:0}
.fine{font-size:.84rem; color:var(--muted); margin-top:var(--sp-4)}
.fine a,.disclaimer a{color:var(--accent-text); text-decoration:underline}

.eyebrow{font-family:"DM Mono", monospace; font-size:.75rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:var(--sp-3)}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent)}
.vlabel{font-family:"DM Mono", monospace; font-size:.68rem; color:var(--accent-text); letter-spacing:.14em}
.vstatus{font-family:"DM Mono", monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:.16rem .5rem; border-radius:999px; border:1px solid var(--line); white-space:nowrap; vertical-align:middle}
.vstatus.live{color:var(--accent-text); background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 26%, transparent)}
.vstatus.dev{color:var(--warn); background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); font-family:Manrope, sans-serif; font-weight:600; font-size:.94rem; line-height:1; min-height:44px; border-radius:var(--r-md); padding:0 1.25rem; cursor:pointer; border:1px solid transparent; transition:transform .15s, background .15s, border-color .15s; white-space:nowrap}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg)}
.btn-primary:hover{background:var(--btn-bg-hover); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-block{width:100%}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-6)}
.center .cta-row{justify-content:center}
.lnk-cta{display:inline-block; font-weight:600; font-size:.92rem; color:var(--accent-text); margin-top:var(--sp-3)}
.cta-row .lnk-cta{margin-top:0}
.more{color:var(--accent-text); font-weight:600; white-space:nowrap}

/* nav */
header.nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:var(--sp-6); height:66px}
.brand{display:flex; align-items:center; gap:var(--sp-3); font-weight:600; font-size:1.03rem; white-space:nowrap}
.brand b{font-family:Sora, sans-serif; font-weight:700; letter-spacing:-.025em}
/* Brand mark: ink tile, K with a green verification leg. Colours are fixed brand
   values (not --accent), so a customer's hosted-page accent never recolours it. */
.mark{width:28px; height:28px; border-radius:6px; background:var(--ink); display:block; flex:none; overflow:hidden}
.mark svg{width:100%; height:100%; display:block}
.mark .kg{fill:var(--ground)}
.mark .ka{fill:#2FB67C}
:root[data-theme="dark"] .mark .ka{fill:#17875A}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){ .mark .ka{fill:#17875A} }}
.dark-band .mark .ka{fill:#17875A}
.nav-links{display:flex; align-items:center; gap:var(--sp-6); margin-left:var(--sp-4)}
.lnk{font-size:.9rem; color:var(--muted); font-weight:500; display:inline-flex; align-items:center; gap:.2rem; transition:color .15s; white-space:nowrap}
.lnk:hover,.lnk[aria-current="page"]{color:var(--ink)}
.lnk svg{width:14px; height:14px}
.dd{position:relative}
.dd-menu{position:absolute; top:calc(100% + 16px); left:-1rem; min-width:280px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--elev); padding:.45rem; display:grid; gap:1px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:.15s}
.dd-menu::before{content:""; position:absolute; top:-18px; left:0; right:0; height:18px}
.dd-2{grid-template-columns:1fr 1fr; min-width:560px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1; visibility:visible; transform:none}
.dd-menu a{display:flex; flex-direction:column; padding:.55rem .7rem; border-radius:var(--r-sm)}
.dd-menu a:hover{background:var(--surface-2)}
.dd-menu b{font-size:.88rem; font-weight:600}
.dd-menu span{font-size:.76rem; color:var(--muted); line-height:1.4}
.dd-menu .dd-all{grid-column:1 / -1; font-size:.84rem; color:var(--accent-text); font-weight:600; border-top:1px solid var(--line-soft); border-radius:0}
.nav-right{display:flex; align-items:center; gap:var(--sp-4); margin-left:auto}
.nav-cta{min-height:38px; padding:0 1rem; font-size:.88rem}
.icon-btn{width:38px; height:38px; border-radius:var(--r-md); border:1px solid var(--line); background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer}
.icon-btn:hover{color:var(--ink); border-color:var(--ink)}
.icon-btn svg{width:16px; height:16px}
.mnav{display:none; position:relative}
.mnav summary{list-style:none; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-md); display:grid; place-content:center; gap:4px; cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block; width:16px; height:2px; background:var(--ink); border-radius:2px}
.mnav-panel{position:absolute; right:0; top:calc(100% + 10px); width:min(88vw,300px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--elev); padding:.6rem; display:flex; flex-direction:column; gap:2px}
.mnav-panel a:not(.btn){padding:.6rem .7rem; border-radius:var(--r-sm); font-weight:500}
.mnav-panel a:not(.btn):hover{background:var(--surface-2)}
.mnav-panel .btn{margin-top:.35rem}

/* sections */
section{padding-block:var(--sec); scroll-margin-top:82px}
.band{border-top:1px solid var(--line-soft)}
.band.dark-band{border-top-color:transparent}
.sec-security{background:var(--surface-2)}
.sec-head{max-width:40rem}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(1.65rem,3.3vw,2.3rem); font-weight:700; line-height:1.1; margin-top:var(--sp-4)}
.sec-head p{margin-top:var(--sp-4); color:var(--muted); font-size:1.05rem}
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:start}
.split-code{grid-template-columns:.9fr 1.1fr; align-items:center}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5)}
.split > *,.hero-in > *,.svc-hero-in > *,.svc-two > *,.suite > *,.docs-grid > *,.contact-grid > *,.grid2 > *{min-width:0}

/* hero */
.hero{padding-bottom:var(--sp-6)}
.hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-8); align-items:center; padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.hero h1{font-size:clamp(2.35rem,5vw,3.55rem); font-weight:800; line-height:1.03; letter-spacing:-.032em; margin-top:var(--sp-5)}
.lede{margin-top:var(--sp-5); font-size:1.15rem; line-height:1.55; color:var(--ink-soft); max-width:34rem}
.center .lede{margin-inline:auto}
.assured{display:flex; flex-wrap:wrap; gap:.55rem 1.3rem; margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--line-soft); font-family:"DM Mono", monospace; font-size:.76rem; color:var(--muted)}
.assured span{display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap}
.assured span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent)}

/* console */
.console{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--elev); overflow:hidden; font-feature-settings:"tnum"}
.con-top{display:flex; align-items:center; gap:var(--sp-2); padding:.75rem 1rem; border-bottom:1px solid var(--line-soft)}
.con-top svg{width:14px; height:14px; color:var(--muted); flex:none}
.con-title{font-family:"DM Mono", monospace; font-size:.74rem; color:var(--muted)}
.env{margin-left:auto; font-family:"DM Mono", monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); padding:.18rem .55rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem}
.pulse{width:6px; height:6px; border-radius:50%; background:var(--accent)}
@media (prefers-reduced-motion: no-preference){ .pulse{animation:pulse 2.6s ease-out infinite} }
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tabs{display:flex; flex-wrap:wrap; gap:0 2px; padding:.45rem .7rem 0; border-bottom:1px solid var(--line-soft)}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:"DM Mono", monospace; font-size:.74rem; padding:.5rem .65rem; border:0; background:transparent; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab:hover{color:var(--ink)}
.con-body{padding:1.1rem 1.25rem 1.35rem; font-family:"DM Mono", monospace; font-size:.8rem; line-height:1.75}
.hero-console .con-body{min-height:250px}
.con-body pre{margin:0; white-space:pre-wrap; word-break:break-word; color:var(--ink-soft)}
.req{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.req .m{color:var(--accent-text); font-weight:500}
.sep{height:1px; background:var(--line-soft); margin:.8rem 0}
.status{display:inline-flex; align-items:center; gap:var(--sp-2); margin-bottom:.5rem}
.chip{font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.14rem .55rem; border-radius:var(--r-sm)}
.ms{color:var(--muted)}
.k{color:var(--code-key)} .pn{color:var(--code-punc)} .st{color:var(--ink-soft)}
.stack-code .console pre,.doc .console pre{white-space:pre; overflow-x:auto; font-size:.78rem; word-break:normal}

/* marquee */
.marquee{display:flex; align-items:center; gap:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--line-soft)}
.mq-label{font-family:"DM Mono", monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.mq-viewport{overflow:hidden; flex:1; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex; width:max-content; animation:mq 42s linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-set{display:flex; gap:var(--sp-3); padding-right:var(--sp-3)}
.mq-item{--hue:150; display:inline-flex; align-items:center; gap:.55rem; height:42px; width:184px; padding:0 .85rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:600 .88rem/1 Manrope, sans-serif; white-space:nowrap; cursor:pointer; filter:grayscale(1); opacity:.55; transition:filter .25s, opacity .25s, border-color .25s}
.mq-item:hover,.mq-item:focus-visible,.mq-item.is-on{filter:grayscale(0) brightness(1.1); opacity:1; border-color:hsl(var(--hue) 50% 45% / .5)}
.mq-glyph{width:22px; height:22px; border-radius:5px; display:grid; place-items:center; font:800 .74rem/1 Sora, sans-serif; color:#fff; background:hsl(var(--hue) 60% 40%); flex:none}
.mq-logo img{height:22px; width:auto}
.mq-set .mq-item:nth-child(6n+1){--hue:152} .mq-set .mq-item:nth-child(6n+2){--hue:212} .mq-set .mq-item:nth-child(6n+3){--hue:262}
.mq-set .mq-item:nth-child(6n+4){--hue:28} .mq-set .mq-item:nth-child(6n+5){--hue:340} .mq-set .mq-item:nth-child(6n+6){--hue:190}

/* product cards */
.suite-sub{font-family:"DM Mono", monospace; font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:var(--sp-7)}
.suite-sub + .suite{margin-top:var(--sp-4)}
.suite{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-7)}
.suite-2{grid-template-columns:repeat(2,1fr)}
.vcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; display:flex; flex-direction:column; gap:var(--sp-3); transition:border-color .18s, background .18s}
a.vcard:hover{border-color:var(--accent); background:var(--surface-2)}
.vhead{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3)}
.vcard h3{font-size:1.16rem; font-weight:700}
.vcard p{color:var(--muted); font-size:.91rem; line-height:1.55}
.vtags{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.vtag{font-family:"DM Mono", monospace; font-size:.68rem; color:var(--muted); border:1px solid var(--line); border-radius:var(--r-sm); padding:.16rem .5rem}
.vpath{margin-top:auto; font-family:"DM Mono", monospace; font-size:.77rem; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:.5rem .7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
a.vcard:hover .vpath{background:var(--surface)}
.vpath b{color:var(--accent-text); font-weight:500; margin-right:.3rem}
.vpath .scope{color:var(--muted); font-size:.7rem; margin-left:.6rem}
.vfoot{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); font-size:.84rem; color:var(--muted); padding-top:var(--sp-3); border-top:1px solid var(--line-soft)}
.vfoot b{font-family:Sora, sans-serif; color:var(--ink)}
.atrest{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6)}
.rest{display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:.55rem .85rem; font-size:.85rem; font-weight:500}
.rest svg{width:15px; height:15px; color:var(--accent-text); flex:none}

/* points & facts */
.points{list-style:none; padding:0; margin:var(--sp-5) 0 0; display:flex; flex-direction:column; gap:var(--sp-3)}
.points li{display:flex; gap:var(--sp-3); align-items:flex-start; color:var(--ink-soft)}
.points svg{width:17px; height:17px; color:var(--accent-text); flex:none; margin-top:.22rem}
.points b{color:var(--ink)}
.points .dash{color:var(--muted)}
.inline-price{font-size:.9rem; color:var(--muted)}
.inline-price b{font-family:Sora, sans-serif; color:var(--ink)}
.facts{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.facts li{display:grid; grid-template-columns:11rem 1fr; gap:var(--sp-4); padding:.9rem 1.1rem; border-top:1px solid var(--line-soft)}
.facts li:first-child{border-top:0}
.facts b{font-family:Sora, sans-serif; font-size:.95rem}
.facts span{color:var(--muted); font-size:.92rem}
.launch-line{margin-top:var(--sp-4); font-size:.9rem; color:var(--ink-soft); display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.launch-tag{display:inline-block; font-family:"DM Mono", monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius:999px; padding:.12rem .55rem}
.flow{list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.flow li{display:flex; align-items:center; gap:var(--sp-4); padding:.9rem 1.1rem; border-top:1px solid var(--line-soft); font-weight:600}
.flow li:first-child{border-top:0}
.flow li:last-child{background:var(--accent-soft); color:var(--accent-text)}
.fl-n{font-family:"DM Mono", monospace; font-size:.72rem; color:var(--accent-text); font-weight:500}
.flow-h{display:grid; grid-template-columns:repeat(4,1fr); margin-top:var(--sp-7)}
.flow-h li{border-top:0; border-left:1px solid var(--line-soft); flex-direction:column; align-items:flex-start; gap:.4rem; padding:1.1rem}
.flow-h li:first-child{border-left:0}
.flow-h li:last-child{background:transparent; color:inherit}

/* security pipeline */
.pipe{margin-top:var(--sp-7)}
.pipe-track{position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:var(--sp-3)}
.pipe-track::before{content:""; position:absolute; top:23px; left:calc(100%/14); right:calc(100%/14); height:2px; background:linear-gradient(90deg,var(--line),var(--accent))}
.pnode{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-3)}
.pbadge{position:relative; width:48px; height:48px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; font-family:"DM Mono", monospace; font-size:.9rem; color:var(--muted); flex:none}
.pnode:last-child .pbadge{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text)}
.pmeta{display:flex; flex-direction:column; gap:.2rem}
.pttl{font-family:Sora, sans-serif; font-size:.9rem; font-weight:700}
.pdesc{font-family:"DM Mono", monospace; font-size:.67rem; color:var(--muted); line-height:1.5}

/* testimonials, faq, final */
.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-6)}
.testi{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; display:flex; flex-direction:column; gap:var(--sp-4)}
.testi blockquote{margin:0}
.testi figcaption{display:flex; flex-direction:column; font-size:.84rem; color:var(--muted)}
.testi b{color:var(--ink)}
.svc-faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--sp-7); align-items:start}
.faq{display:flex; flex-direction:column; gap:var(--sp-2)}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:0 1.1rem}
.faq summary{cursor:pointer; list-style:none; padding:.95rem 0; font-weight:600; display:flex; justify-content:space-between; gap:var(--sp-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:"DM Mono", monospace; color:var(--accent-text); flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted); padding-bottom:1rem; font-size:.93rem}
.related{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem; margin-top:var(--sp-5)}
.related .fhead{margin:0; width:100%}
.related a{color:var(--accent-text); font-weight:600}
.final{padding-block:clamp(4rem,8vw,6rem)}
.final-grid{display:grid; grid-template-columns:1.3fr auto; gap:var(--sp-6); align-items:center}
.final h2{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:800; line-height:1.08}
.final p{margin-top:var(--sp-3); color:var(--muted); font-size:1.08rem}
.final-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap}

/* footer */
.site-foot{border-top:1px solid var(--line-soft); padding-block:var(--sp-7) var(--sp-5)}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--sp-6)}
.fcol{display:flex; flex-direction:column; gap:.45rem}
.fcol a{color:var(--muted); font-size:.88rem}
.fcol a:hover{color:var(--ink)}
.fhead{font-family:"DM Mono", monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:.2rem}
.foot-note{margin-top:var(--sp-3); color:var(--muted); font-size:.86rem; max-width:20rem}
.foot-legal{display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid var(--line-soft); font-size:.78rem; color:var(--muted)}

/* page heroes & product pages */
.page-hero{padding-block:clamp(3rem,6vw,5rem)}
.page-hero h1,.docs-hero h1,.svc-copy h1{font-size:clamp(2rem,4.2vw,3.1rem); font-weight:800; line-height:1.06; letter-spacing:-.03em; margin-top:var(--sp-4); max-width:46rem}
.center h1{margin-inline:auto}
.crumbs{display:flex; gap:var(--sp-2); font-family:"DM Mono", monospace; font-size:.74rem; color:var(--muted); margin-bottom:var(--sp-5)}
.crumbs a:hover{color:var(--ink)}
.svc-hero{padding-block:clamp(2.5rem,5vw,4rem)}
.svc-hero-in{display:grid; grid-template-columns:1.25fr .8fr; gap:var(--sp-8); align-items:start}
.svc-path{margin-top:var(--sp-6); white-space:normal}
.price-card{position:sticky; top:84px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--elev); padding:1.4rem; display:flex; flex-direction:column; gap:var(--sp-3)}
.pc-top{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3)}
.pc-price{display:flex; flex-direction:column; padding-bottom:var(--sp-3); border-bottom:1px solid var(--line-soft)}
.pc-from{font-size:.8rem; color:var(--muted)}
.pc-amount{font-family:Sora, sans-serif; font-weight:800; font-size:2.2rem; letter-spacing:-.02em; line-height:1.1}
.pc-unit{font-family:"DM Mono", monospace; font-size:.72rem; color:var(--muted)}
.pc-launch{display:flex; justify-content:space-between; align-items:center; background:var(--warn-soft); border-radius:var(--r-md); padding:.55rem .8rem}
.pc-launch b{font-family:Sora, sans-serif}
.pc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:.88rem}
.pc-list li{display:flex; gap:var(--sp-2)}
.pc-list svg{width:16px; height:16px; color:var(--accent-text); flex:none; margin-top:.2rem}
.points-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-6)}
.points-grid.pg-4{grid-template-columns:repeat(4,1fr)}
.point{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.35rem; display:flex; flex-direction:column; gap:var(--sp-3)}
.point h3{font-size:1.04rem}
.point p{color:var(--muted); font-size:.91rem}
.point .oi{width:34px; height:34px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent-text); display:grid; place-items:center}
.point .oi svg{width:17px; height:17px}
.svc-two{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:start}
.stack-code{display:grid; gap:var(--sp-3)}
.steps{margin:var(--sp-5) 0 0; padding-left:1.2rem; display:flex; flex-direction:column; gap:var(--sp-2); color:var(--ink-soft)}
.steps li::marker{font-family:"DM Mono", monospace; color:var(--accent-text)}
.limits{margin-top:var(--sp-5); border-left:3px solid var(--warn); background:var(--warn-soft); padding:.75rem 1rem; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.88rem; color:var(--ink-soft)}
.sticky-cta{display:none}

/* pricing */
.ptable{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.prow{display:grid; grid-template-columns:1.8fr .8fr auto; gap:var(--sp-4); align-items:center; padding:1rem 1.25rem; border-top:1px solid var(--line-soft); transition:background .15s}
.prow.has-launch{grid-template-columns:1.8fr .8fr .6fr auto}
.prow:first-child{border-top:0}
a.prow:hover{background:var(--surface-2)}
.phead{font-family:"DM Mono", monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); padding-block:.7rem}
.pn-name{display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .5rem}
.pn-name small{flex-basis:100%; color:var(--muted); font-size:.84rem}
.pp{font-family:Sora, sans-serif; font-weight:700; font-variant-numeric:tabular-nums}
.pp small{font-family:Manrope, sans-serif; font-weight:500; color:var(--muted); font-size:.78rem}
.prow .more{font-size:.86rem}
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-6)}
.tier{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem; display:flex; flex-direction:column; gap:.3rem}
.t-vol{font-family:"DM Mono", monospace; font-size:.76rem; color:var(--accent-text)}
.tier b{font-family:Sora, sans-serif; font-size:1.08rem}
.tier p{font-size:.86rem; color:var(--muted)}
.tier-hl{border-color:var(--ink)}
.calc2{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.c2{display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; font-weight:600}
.c2 input,.fld input,.fld select,.fld textarea,.docsearch input{width:100%; min-height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ground); color:var(--ink); padding:.5rem .7rem; font:inherit; font-size:.92rem}
.calc2-out{grid-column:1 / -1; border-top:1px solid var(--line-soft); padding-top:var(--sp-4); color:var(--muted); display:flex; align-items:baseline; gap:.5rem}
.calc2-out output{font-family:Sora, sans-serif; font-size:1.6rem; font-weight:800; color:var(--ink)}
.wf{list-style:none; padding:0; margin:var(--sp-5) 0 0; display:flex; flex-direction:column; gap:var(--sp-3)}
.wf li{display:flex; flex-direction:column; gap:.2rem; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:.7rem .9rem}
.wf code{background:none; border:0; padding:0; color:var(--accent-text)}
.wf span{font-size:.9rem; color:var(--ink-soft)}

/* developers & docs */
.codetabs{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--elev)}
.ct-bar{display:flex; gap:2px; padding:.45rem .6rem 0; border-bottom:1px solid var(--line-soft); overflow-x:auto}
.ct-tab{font-family:"DM Mono", monospace; font-size:.74rem; padding:.5rem .8rem; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; white-space:nowrap}
.ct-tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.ct-copy{margin-left:auto; font-family:"DM Mono", monospace; font-size:.7rem; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:var(--r-sm); padding:.22rem .6rem; margin-bottom:.4rem; cursor:pointer}
.ct-copy:hover{color:var(--ink)}
.ct-panel{padding:1rem 1.1rem; max-height:420px; overflow:auto}
.ct-panel pre{margin:0; font-size:.76rem; line-height:1.7; white-space:pre; color:var(--ink-soft)}
.res{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2)}
.res li{display:flex; align-items:center; gap:var(--sp-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:.6rem .8rem; font-weight:600; font-size:.9rem}
.res svg{width:15px; height:15px; color:var(--accent-text)}
.docs-hero{padding-block:clamp(2.5rem,5vw,3.5rem) var(--sp-6)}
.docsearch{display:block; max-width:34rem; margin-top:var(--sp-5)}
.docs-band{padding-top:var(--sp-6)}
.docs-grid{display:grid; grid-template-columns:210px 1fr; gap:var(--sp-7); align-items:start}
.docs-toc{position:sticky; top:84px; display:flex; flex-direction:column; gap:1px; font-size:.86rem}
.docs-toc a{padding:.3rem .6rem; border-radius:var(--r-sm); color:var(--muted)}
.docs-toc a:hover{background:var(--surface-2); color:var(--ink)}
.doc{padding-block:var(--sp-5); border-bottom:1px solid var(--line-soft); scroll-margin-top:84px}
.doc h2{font-size:1.45rem; margin-bottom:var(--sp-3)}
.doc h3{font-size:1.15rem; margin-bottom:var(--sp-3); display:flex; gap:var(--sp-3); align-items:center}
.doc p{color:var(--ink-soft); margin-top:var(--sp-3)}
.doc .vpath{margin-top:var(--sp-2)}
.doc .console,.doc .codetabs{margin-top:var(--sp-4)}
.doc-code{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.doc-code > *{min-width:0}
.table-scroll{overflow-x:auto}
.dtable{width:100%; border-collapse:collapse; margin-top:var(--sp-4); font-size:.88rem; background:var(--surface); border:1px solid var(--line)}
.dtable th,.dtable td{text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
.dtable th{font-family:"DM Mono", monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--surface-2)}
.docs-empty{padding:var(--sp-6) 0; color:var(--muted)}

/* security, compliance, contact, status, changelog */
.cert-status{display:inline-block; margin-top:var(--sp-5); border:1px solid var(--line); background:var(--surface); border-radius:var(--r-md); padding:.55rem .9rem; font-size:.9rem}
.notyet{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.notyet li{display:flex; flex-direction:column; gap:.15rem; padding:.85rem 1.1rem; border-top:1px solid var(--line-soft)}
.notyet li:first-child{border-top:0}
.notyet span{color:var(--muted); font-size:.9rem}
.disclaimer{margin-top:var(--sp-5); max-width:44rem; font-size:.9rem; color:var(--ink-soft); border-left:3px solid var(--line); padding-left:var(--sp-4)}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-8); align-items:start}
.cform{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--elev); padding:1.5rem; display:flex; flex-direction:column; gap:var(--sp-4)}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.fld{display:flex; flex-direction:column; gap:.35rem; font-size:.84rem; font-weight:600; border:0; padding:0; margin:0; min-width:0}
.fld legend{padding:0; margin-bottom:.35rem}
.fld textarea{min-height:96px; resize:vertical}
[aria-invalid="true"]{border-color:#C2452D!important; outline-color:#C2452D}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip-opt{position:relative}
.chip-opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.chip-opt span{display:inline-block; border:1px solid var(--line); border-radius:999px; padding:.32rem .75rem; font-weight:500; font-size:.84rem; background:var(--ground)}
.chip-opt input:checked + span{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text)}
.chip-opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.consent{display:flex; gap:var(--sp-2); font-size:.84rem; color:var(--ink-soft); align-items:flex-start}
.consent input{margin-top:.25rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-state{font-size:.9rem; min-height:1.2rem}
.form-state.is-loading{color:var(--muted)}
.form-state.is-error,.form-error{color:#C2452D}
.form-state.is-success{color:var(--accent-text); background:var(--accent-soft); border-radius:var(--r-md); padding:.8rem 1rem}
.cform.is-done .frow,.cform.is-done > .fld,.cform.is-done fieldset,.cform.is-done .consent,.cform.is-done button{display:none}
.btn[aria-busy="true"]{opacity:.7; pointer-events:none}
.status-h{display:flex; align-items:center; gap:var(--sp-3)}
.dot{width:12px; height:12px; border-radius:50%; background:var(--muted); flex:none}
.status-operational .dot{background:#1F9D6A; box-shadow:0 0 0 4px color-mix(in srgb, #1F9D6A 20%, transparent)}
.status-degraded .dot{background:#D08A1E}
.status-down .dot{background:#C2452D}
.status-list{list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.status-list li{display:grid; grid-template-columns:auto 1fr 2fr auto; gap:var(--sp-4); align-items:center; padding:1rem 1.2rem; border-top:1px solid var(--line-soft)}
.status-list li:first-child{border-top:0}
.st-desc{color:var(--muted); font-size:.88rem}
.st-state{font-weight:600; font-size:.88rem}
.clog{padding-block:var(--sp-6); border-bottom:1px solid var(--line-soft)}
.clog-meta{display:flex; gap:var(--sp-3); align-items:center; font-family:"DM Mono", monospace; font-size:.78rem; color:var(--muted)}
.clog h2{font-size:1.3rem; margin-top:var(--sp-3)}
.returns{list-style:none; padding:0; margin:var(--sp-3) 0 0; display:flex; flex-direction:column; gap:.4rem; color:var(--ink-soft)}
.returns li::before{content:"\2192  "; color:var(--accent-text)}

/* responsive */
@media (max-width:1080px){
  .hide-md{display:none}
  .nav-links{gap:var(--sp-4)}
  .points-grid.pg-4{grid-template-columns:repeat(2,1fr)}
  .dd-2{min-width:460px}
}
@media (max-width:940px){
  .nav-links,.hide-sm{display:none}
  .mnav{display:block}
  .hero-in,.split,.split-code,.svc-two,.svc-hero-in,.svc-faq,.contact-grid,.final-grid,.grid2{grid-template-columns:1fr}
  .hero-in,.split,.svc-hero-in,.contact-grid{gap:var(--sp-6)}
  .suite,.suite-2,.points-grid,.testis{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr 1fr}
  .price-card,.docs-toc{position:static}
  .docs-grid{grid-template-columns:1fr}
  .docs-toc{flex-direction:row; flex-wrap:wrap}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pipe-track{grid-template-columns:1fr; gap:var(--sp-4)}
  .pipe-track::before{top:0; bottom:0; left:23px; right:auto; width:2px; height:auto; background:linear-gradient(180deg,var(--line),var(--accent))}
  .pnode{flex-direction:row; text-align:left; gap:var(--sp-4)}
  .flow-h{grid-template-columns:1fr 1fr}
  .flow-h li{border-left:0; border-top:1px solid var(--line-soft)}
  .sticky-cta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:.6rem clamp(1rem,4vw,2rem); background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(8px); border-top:1px solid var(--line); font-size:.86rem}
  .sticky-cta .btn{min-height:40px}
  .has-sticky .site-foot{padding-bottom:5.5rem}
  .status-list li{grid-template-columns:auto 1fr auto}
  .st-desc{grid-column:2 / -1; grid-row:2}
}
@media (max-width:640px){
  .nav-cta{display:none}
  section{padding-block:3.25rem}
  .hide-xs,.vpath .scope{display:none}
  .hero-console .con-body{min-height:0}
  .suite{gap:var(--sp-3)}
  .vcard{padding:1.15rem; gap:.55rem}
  .vcard .vpath{display:none}
  .point{display:grid; grid-template-columns:auto 1fr; column-gap:var(--sp-3); row-gap:.25rem; padding:1rem; align-items:center}
  .point .oi{width:28px; height:28px}
  .point p{grid-column:1 / -1}
  .point:not(:has(.oi)) h3{grid-column:1 / -1}
  .points-grid{gap:var(--sp-3)}
  .mq-item{width:150px; height:38px; font-size:.82rem}
  .atrest{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2)}
  .rest{font-size:.78rem; padding:.5rem .6rem}
  .pn-name small{display:none}
  .prow{padding:.85rem 1rem}
  .tiers{grid-template-columns:1fr 1fr; gap:var(--sp-2)}
  .tier{padding:.9rem}
  .tier p{font-size:.8rem}
  .pipe-track{gap:var(--sp-3)}
  .pbadge{width:40px; height:40px; font-size:.8rem}
  .pipe-track::before{left:19px}
  .final-actions .btn{flex:1}
  .cta-row .btn{flex:1 1 auto}
  .suite,.suite-2,.points-grid,.points-grid.pg-4,.testis,.frow,.res,.calc2,.doc-code,.flow-h{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-4)}
  .fbrand{grid-column:1 / -1}
  .prow,.prow.has-launch{grid-template-columns:1fr auto}
  .prow .more,.phead,.prow .pl{display:none}
  .facts li{grid-template-columns:1fr; gap:.1rem}
  .marquee{flex-direction:column; align-items:flex-start; gap:var(--sp-3)}
  .mq-viewport{width:100%}
  .sticky-cta .btn .arrow{display:none}
}

/* breadcrumbs (ordered list for accessibility + schema parity) */
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0; padding:0}
.crumbs li + li::before{content:"/"; margin-right:var(--sp-2); color:var(--muted)}
.wa-btn{margin-top:var(--sp-5)}
/* 404 */
.nf{padding-block:clamp(4rem,10vw,8rem)}
.nf .code404{font-family:"DM Mono", monospace; color:var(--accent-text); letter-spacing:.14em}
.nf-links{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6)}
@media (max-width:640px){ .dtable{display:block; overflow-x:auto} .dtable td,.dtable th{min-width:7rem} }

/* hosted verification page */
.verify-page{padding-block:clamp(2rem,5vw,3.5rem)}
.vbrand{display:flex; align-items:center; gap:var(--sp-3); font-size:.88rem; color:var(--muted); margin-bottom:var(--sp-5)}
.verify-page h1{font-size:clamp(1.8rem,4vw,2.4rem); font-weight:800}
.vform{display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-6)}
.vstep{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem}
.vnum{width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); display:grid; place-items:center; font-family:"DM Mono", monospace}
.vstep h2{font-size:1.05rem}
.vstep p{color:var(--muted); font-size:.9rem; margin-top:.25rem}
.vpick{display:inline-flex; margin-top:var(--sp-3); position:relative}
.vpick input{position:absolute; inset:0; opacity:0; cursor:pointer}
.vpick span{display:inline-flex; align-items:center; min-height:44px; padding:0 1rem; border:1px dashed var(--accent); border-radius:var(--r-md); color:var(--accent-text); font-weight:600}
.vprev{margin-top:var(--sp-3); max-height:180px; border-radius:var(--r-md); border:1px solid var(--line)}
.vform.is-done .vstep,.vform.is-done .consent,.vform.is-done button{display:none}
.verify-page .fine svg{width:14px; height:14px; vertical-align:-2px}
/* Hosted page brand accents (workspace setting). Mid-tone values that keep
   white button text legible on light and dark grounds. */
.verify-page.accent-blue{--accent:#2563A8; --accent-text:#2B6CB5; --accent-soft:color-mix(in srgb,#2563A8 12%,transparent)}
.verify-page.accent-indigo{--accent:#4F46B8; --accent-text:#5850C4; --accent-soft:color-mix(in srgb,#4F46B8 12%,transparent)}
.verify-page.accent-red{--accent:#B42F2F; --accent-text:#B83636; --accent-soft:color-mix(in srgb,#B42F2F 12%,transparent)}
.verify-page.accent-orange{--accent:#B85A12; --accent-text:#B35B17; --accent-soft:color-mix(in srgb,#B85A12 12%,transparent)}
.verify-page.accent-slate{--accent:#44525C; --accent-text:#50606B; --accent-soft:color-mix(in srgb,#44525C 12%,transparent)}
.verify-page:not(.accent-green) .btn-primary{background:var(--accent); color:#fff}

/* platform features */
.platform{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-6)}
.platform > *{min-width:0}
.pfeat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem; display:flex; flex-direction:column; gap:var(--sp-2); transition:border-color .18s}
.pfeat:hover{border-color:var(--accent)}
.pfeat h3{font-size:.98rem}
.pfeat p{color:var(--muted); font-size:.84rem; flex:1}
.pfeat code{font-size:.7rem; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:4px; padding:.2rem .4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:1080px){ .platform{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .platform{grid-template-columns:1fr} }
@media (max-width:480px){ .hero-console .tabs{display:grid; grid-template-columns:repeat(3,1fr)} .hero-console .tab{text-align:center} }