/* ==========================================================================
   QSE — Quantum Secure Encryption Corp.
   Brand: navy #1B355E (PMS 534), purple #7F3D97 (PMS 527),
          logo gradient #1C355E → #4E3381 → #8331A7 (2025 Brand Standard Guide)
   ========================================================================== */

/* ---------- Fonts: Geist and Geist Mono (SIL Open Font License 1.1), self-hosted ---------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/__l5e/assets-v1/f38f9f80-79ad-4bfc-9f6f-3b3ece253cf8/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/__l5e/assets-v1/eae035dd-4a76-4f53-af68-b219a7c506a7/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/__l5e/assets-v1/8388b1c5-2b05-4368-b9c8-513a6ee36370/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/__l5e/assets-v1/4b823f7b-1600-42ff-ad21-5df4fcfd2197/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Surfaces: brand kit Midnight, lifted slightly for layered panels */
  --bg: #000a2a;
  --bg-2: #021135;
  --bg-3: #05183f;
  --surface: rgba(150, 175, 235, 0.035);
  --surface-2: rgba(150, 175, 235, 0.06);
  --line: rgba(150, 175, 235, 0.12);
  --line-2: rgba(150, 175, 235, 0.22);

  --text: #eef1f8;
  --text-2: #b3bdd3;
  --text-3: #8290ad;

  /* QSE brand kit palette. Quantum Blue is the accent; Logo Purple appears only in the
     logo artwork and the hero glow, never beside blue. */
  --logo-navy: #1b355e;
  --midnight: #000a2a;
  --quantum-blue: #024dd6;
  --soft-blue: #3783f0;
  --cyan: #02a9f7;
  --amber: #ffb900;
  --logo-purple: #7e3e98;

  /* Dark-background mapping. Quantum Blue is only 2.8:1 on Midnight, so it is used for fills
     (buttons, bands, badges) with white text; accent text, rules and marks use Soft Blue (5.3:1). */
  --accent: var(--soft-blue);
  --accent-hi: #9cc0f8;   /* lighter Soft Blue for text on blue-tinted fills and hover states */

  /* Secondary accent, by owner's choice beyond the kit's logo-only rule: lifted Logo Purple for
     graphics built from the Q mark, selected tabs, small labels and bullet dots. Blue keeps
     actions (buttons, links) and heading emphasis. */
  --purple: #c28de8;      /* 7.7:1 on Midnight */
  --purple-hi: #dcc0f5;   /* for text on purple-tinted fills */
  --grad-mark: linear-gradient(135deg, #4f78cc 0%, #7c58c8 51%, #b65ce0 100%);   /* the Q mark's lifted gradient */
  --tab-selected: linear-gradient(135deg, rgba(79, 120, 204, .35), rgba(182, 92, 224, .35));
  --grad-text: linear-gradient(100deg, #93b2f2 0%, #b293f0 45%, #e3a2f6 100%);   /* highlighted words in headings */

  --ok: #4ade80;
  --warn: var(--amber);
  --bad: #f87171;

  --grad-accent: linear-gradient(135deg, var(--quantum-blue) 0%, var(--soft-blue) 100%);
  --grad-navy: linear-gradient(135deg, var(--logo-navy) 0%, var(--quantum-blue) 100%);

  --radius: 20px;
  --radius-sm: 12px;
  /* 1240px up to ~1440px wide, then 86% of the window (1650px on 1080p, 2200px on 4K at 150%), capped at 2400px */
  --container: clamp(1240px, 86vw, 2400px);
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  /* Padding above and below every section. Neighbours add theirs together, so sections sit
     twice this apart: 88px on phones, about 125px on a laptop, 136px from 1240px wide */
  --section-y: clamp(44px, 5.5vw, 68px);
  --h2: clamp(2rem, 4.2vw, 3.4rem);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: var(--h2); line-height: 1.05; letter-spacing: -0.035em; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
code { font-family: var(--font-mono); }
::selection { background: rgba(55, 131, 240, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: #fff; color: #000a2a; padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Icons */
.i-arrow, .i-chevron, .i-check, .i-ext { width: 16px; height: 16px; flex: none; }
.i-arrow { transition: transform .25s var(--ease); }
a:hover > .i-arrow, .btn:hover .i-arrow { transform: translateX(3px); }

/* Highlighted words in headings: blue-to-purple gradient text, kept by the owner's choice over the brand kit's solid blue emphasis.
   Solid accent colour is the fallback where background-clip: text is unsupported. */
.grad-text { color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px;
  border-radius: 999px;
  font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background-color .2s, border-color .2s;
}
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-primary {
  color: #fff;
  background-color: var(--quantum-blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 30px -8px rgba(2, 77, 214, .8);
}
.btn-primary:hover { transform: translateY(-1px); background-color: #1a5fe3; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 40px -8px rgba(2, 77, 214, .95); }
.btn-ghost { color: var(--text); border: 1px solid var(--line-2); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: rgba(55, 131, 240, .6); background: rgba(55, 131, 240, .08); }
.btn-light { background: #fff; color: var(--logo-navy); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(255,255,255,.4); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15px; color: var(--accent);
}
.link-arrow:hover { color: #fff; }

.tag {
  display: inline-flex; align-items: center;
  font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 6px;
  background: rgba(55, 131, 240, .14); color: var(--accent-hi);
}

.kicker {
  font: 500 12px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple);
}
.kicker--bad { color: #fca5a5; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 20px;
}
.q-eyebrow { width: 18px; height: 18px; fill: url(#qg-lumen); }

/* Status dots */
.status, .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.s-ok { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.s-warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.s-bad { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.s-live, .live-dot { background: var(--ok); box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: live 2s infinite; }
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ---------- Ticker ---------- */
.ticker {
  position: relative; z-index: 60;
  display: flex; align-items: center;
  height: 36px;
  background: #00071f;
  border-bottom: 1px solid var(--line);
  font: 12px/1 var(--font-mono);
  color: var(--text-3);
}
.ticker-symbol {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 100%; padding: 0 16px 0 max(var(--gutter), calc((100vw - var(--container)) / 2));
  color: var(--text); font-weight: 600; letter-spacing: .06em;
  border-right: 1px solid var(--line);
}
.ticker-viewport {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.ticker-track { display: flex; width: max-content; animation: marquee 80s linear infinite; }
.ticker-track li { padding: 0 28px; white-space: nowrap; position: relative; }
.ticker-track li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%; background: var(--purple);
}
.ticker-track a:hover { color: var(--text); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would
   become the containing block for the fixed mobile nav panel */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 10, 42, .78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .3s;
}
.site-header.is-scrolled::before, .nav-open .site-header::before { opacity: 1; }
.header-inner { display: flex; align-items: center; gap: 32px; height: 100%; }
.brand { flex: none; display: block; padding: 4px 0; }
.brand img { height: 42px; width: auto; }

.site-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list > li > a, .nav-list > li > button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 14.5px; color: var(--text-2);
  transition: color .2s, background-color .2s;
}
.nav-list > li > a:hover, .nav-list > li > button:hover, .nav-list > li > button[aria-expanded="true"] {
  color: var(--text); background: rgba(255,255,255,.05);
}
.i-chevron { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.has-menu { position: relative; }
.has-menu > button[aria-expanded="true"] .i-chevron { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: 340px; padding: 8px;
  background: rgba(3, 17, 52, .96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.has-menu > button[aria-expanded="true"] + .menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 1081px) {
  .has-menu:hover .menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
.menu--cols { width: 640px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; }
.menu-label { padding: 10px 12px 4px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.menu a { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 10px; transition: background-color .2s; }
.menu a:hover { background: rgba(255,255,255,.05); }
.menu-ico { width: 34px; height: 34px; padding: 7px; flex: none; border-radius: 9px; color: var(--purple-hi); background: rgba(124, 88, 200, .18); border: 1px solid rgba(194, 141, 232, .22); }
.menu strong { display: block; font-weight: 600; font-size: 14.5px; }
.menu small { display: block; font-size: 13px; color: var(--text-3); line-height: 1.4; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.nav-cta-mobile { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); position: relative; }
.nav-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease); }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Just above the mobile-menu breakpoint the full menu is 38px too wide for the window: tighten its spacing */
@media (min-width: 1081px) and (max-width: 1240px) {
  .header-inner { gap: 20px; }
  .nav-list { gap: 0; }
  .nav-list > li > a, .nav-list > li > button { padding: 0 10px; }
}
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .site-nav {
    position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 0; z-index: 49;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 24px;
    padding: 24px var(--gutter) 40px;
    background: var(--bg);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-list > li > a, .nav-list > li > button { width: 100%; height: 56px; padding: 0 4px; font-size: 18px; color: var(--text); justify-content: space-between; border-radius: 0; }
  .nav-list > li > a:hover, .nav-list > li > button:hover, .nav-list > li > button[aria-expanded="true"] { background: none; }
  .menu {
    position: static; width: auto; transform: none; display: none;
    opacity: 1; visibility: visible; box-shadow: none; border: 0; background: none; padding: 0 0 12px;
  }
  .has-menu > button[aria-expanded="true"] + .menu { display: block; transform: none; }
  .nav-cta-mobile { display: inline-flex; align-self: flex-start; height: 48px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + clamp(40px, 7vw, 96px)) 0 clamp(64px, 8vw, 112px);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(150, 175, 235, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 175, 235, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.hero-glow--a { width: 900px; height: 700px; left: -300px; top: -260px; background: radial-gradient(closest-side, rgba(28, 53, 94, .9), transparent); }
.hero-glow--b { width: 900px; height: 800px; right: -260px; top: 0; background: radial-gradient(closest-side, rgba(126, 62, 152, .45), transparent); }
/* Brand kit header band: Logo Navy with soft Logo Purple and Quantum Blue glows (the only place purple appears outside the logo) */
.hero-bg::after {
  content: ""; position: absolute; width: 760px; height: 640px; right: -380px; top: -320px;
  border-radius: 50%; filter: blur(80px);
  background: radial-gradient(closest-side, rgba(2, 77, 214, .55), transparent);
}

.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px; margin-bottom: 28px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; color: var(--text-2);
  transition: border-color .2s;
}
.pill:hover { border-color: rgba(55, 131, 240, .5); }
.pill-sep { width: 1px; height: 12px; background: var(--line-2); }
.pill-muted { color: var(--text-3); }

.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  line-height: 1.0; letter-spacing: -0.045em; font-weight: 600;
  margin-bottom: 26px;
}
.hero h1 .grad-text { display: inline; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--text-2); max-width: 600px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 14px; color: var(--text-3); }
.hero-note .i-check { color: var(--ok); }

/* Hero visual: the QSE mark, drawn in, orbited by qubits */
.hero-visual { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; justify-self: end; }
.qcore { width: 100%; height: 100%; overflow: visible; }
.orbit { fill: none; stroke: rgba(150, 175, 235, .18); stroke-width: .16; }
.orbit-2 { stroke-dasharray: .5 1.2; stroke: rgba(55, 131, 240, .3); }
.orbit-3 { stroke: rgba(150, 175, 235, .1); }
.qubit { fill: #a9c0ff; filter: drop-shadow(0 0 1.2px #a9c0ff); }
.qubit--violet { fill: #7fd6fb; filter: drop-shadow(0 0 1.2px #7fd6fb); }
.spin { animation: spin 26s linear infinite; }
.spin-b { animation-duration: 40s; animation-direction: reverse; }
.spin-c { animation-duration: 64s; }
@keyframes spin { to { transform: rotate(360deg); } }

.q-ring {
  fill: url(#qg-lumen); fill-opacity: 0;
  stroke: #d7c2ff; stroke-width: .22; stroke-opacity: .9;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: q-draw 1.8s var(--ease) .15s forwards, q-fill 1.1s ease 1.3s forwards;
}
.q-key {
  fill: url(#qg-lumen); opacity: 0;
  transform-box: fill-box; transform-origin: 41% 41%;
  animation: q-key .9s var(--ease) 1.7s forwards, q-pulse 4s ease-in-out 2.8s infinite;
}
@keyframes q-draw { to { stroke-dashoffset: 0; } }
@keyframes q-fill { to { fill-opacity: 1; stroke-opacity: .25; } }
@keyframes q-key { from { opacity: 0; transform: rotate(-60deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes q-pulse { 50% { filter: drop-shadow(0 0 2px rgba(214, 160, 255, .9)); } }

.score-card {
  position: absolute; left: -8%; bottom: -3%;
  width: 244px; padding: 16px 18px;
  background: rgba(3, 17, 52, .78);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  animation: rise .9s var(--ease) 1.2s both;
}
.score-head { display: flex; justify-content: space-between; align-items: center; font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.score-main { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; }
.score-gauge { width: 52px; height: 52px; transform: rotate(-90deg); }
.g-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.g-fill { fill: none; stroke: #3783f0; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 68 100; }
.score-main strong { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; }
.score-main span { color: var(--text-3); font-size: 14px; margin-left: 2px; }
.score-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.score-list b { font-weight: 500; font-size: 12px; padding: 1px 8px; border-radius: 999px; box-shadow: none; }
.score-list b.s-ok { background: rgba(74, 222, 128, .12); color: #86efac; }
.score-list b.s-warn { background: rgba(255, 185, 0, .12); color: #ffb900; }
.score-list b.s-bad { background: rgba(248, 113, 113, .14); color: #fca5a5; }

.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(3, 17, 52, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  font: 500 12px/1 var(--font-mono); color: var(--text-2); white-space: nowrap;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.7);
}
.chip-a { top: 5%; right: 4%; animation: rise .8s var(--ease) 1.5s both, float 7s ease-in-out 2.3s infinite; }
.chip-b { top: 70%; right: -4%; animation: rise .8s var(--ease) 1.7s both, float 8s ease-in-out 2.5s infinite reverse; }
.chip-c { top: 15%; left: -4%; animation: rise .8s var(--ease) 1.9s both, float 9s ease-in-out 2.7s infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes float { 50% { transform: translateY(-8px); } }

/* ---------- Proof ---------- */
.proof { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 24, 63, .6), rgba(0, 10, 42, 0)); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 40px 28px 36px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat dt { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.stat-num { margin: 14px 0 8px; font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.stat-num small { font-size: .45em; letter-spacing: -0.01em; color: var(--text-2); font-weight: 500; }
.stat-note { font-size: 14px; color: var(--text-3); line-height: 1.45; }

.standards { display: flex; align-items: center; gap: 32px; border-top: 1px solid var(--line); padding: 18px 0 18px max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.standards-label { flex: none; max-width: 240px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.marquee {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track li { padding: 0 32px; font: 500 15px/1 var(--font-mono); color: var(--text-2); white-space: nowrap; display: flex; align-items: center; gap: 32px; }
.marquee-track li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grad-mark); margin-right: -32px; }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--section-y) 0; }
/* Section titles: a line holds at least 17.5em (760px when that's wider, at smaller font sizes), so a title can't
   gain lines as the font grows with the window, and titles up to about 31em stay at two lines from 641px up
   (the narrowest window there still gives 18.4em) */
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: max(760px, var(--h2) * 17.5); }
.section-head h2 { max-width: max(17.5em, 760px); }
/* Split heads: the title on the left, and the intro at the right when it gets at least 320px, otherwise below */
.section-head.split { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; }
.section-head.split > :last-child { flex: 1 1 320px; }
.section-head.split > div:last-child { max-width: 520px; }
/* Headings in half-width columns (outcomes beside specs, two-column splits) scale with their column instead:
   13.5em per line, so titles up to about 25em stay at two lines */
.outcomes-wrap .section-head, .split .section-head { container-type: inline-size; }
.outcomes-wrap .section-head h2, .split .section-head h2 { font-size: min(var(--h2), 100cqi / 13.5); }
.section-lede { color: var(--text-2); font-size: 1.075rem; line-height: 1.65; max-width: 520px; }
.section-more { margin-top: 36px; }

/* Homepage mascots: a line-art armadillo right beside a section's title, spanning the heading's two lines of text.
   From 641px the heading is always two lines (the gradient phrase starts the second) and never wraps. Each image
   is cropped to its drawing, so the drawing runs from the top of line 1's tallest letters (0.147em below the
   heading box) to the bottom of line 2's descenders (1.951em further down), measured for Geist 600 at this line
   height. The font shrinks below --h2 only if the widest title plus its armadillo (16.3em) would not fit: narrow
   windows or a large default font. The intro sits at the right when there is room for it and drops below when not.
   Images are lossless WebP with @2x versions, sized by their width/height attributes' aspect ratio. */
.section-head.section-head--mascot { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; container-type: inline-size; }
.section-title { --title-size: min(var(--h2), (100cqi - 32px) / 16.5); display: grid; grid-template-columns: auto auto; column-gap: 24px; }
.section-title > :not(.mascot) { grid-column: 1; }
.section-head .section-title h2 { font-size: var(--title-size); max-width: none; white-space: nowrap; }
.section-title h2 .grad-text { display: block; width: fit-content; }
.mascot { grid-column: 2; grid-row: 2; align-self: start; width: auto; height: calc(var(--title-size) * 1.951); margin-top: calc(var(--title-size) * .147); opacity: .92; filter: drop-shadow(0 0 18px rgba(124, 88, 200, .35)); }
.section-head--mascot > .section-lede { flex: 1 1 320px; }
/* Phones let the heading wrap; the armadillo still spans its first two lines */
@media (max-width: 640px) {
  .section-title { --title-size: var(--h2); flex: 1 1 100%; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .section-head .section-title h2 { white-space: normal; }
}

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(150, 175, 235, .045), rgba(150, 175, 235, .015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Gradient border + pointer spotlight, echoing the mark's gradient */
.card-glow { overflow: hidden; transition: border-color .3s, transform .3s var(--ease); }
.card-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(79, 120, 204, .9), rgba(124, 88, 200, .5) 40%, rgba(182, 92, 224, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.card-glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(140, 100, 230, .13), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.card-glow:hover { transform: translateY(-3px); }
.card-glow:hover::before, .card-glow:hover::after { opacity: 1; }

.p-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px;
  color: var(--purple-hi);
  background: linear-gradient(135deg, rgba(79, 120, 204, .22), rgba(182, 92, 224, .22));
  border: 1px solid rgba(194, 141, 232, .25);
}
.p-icon svg { width: 24px; height: 24px; }

/* ---------- Why now ---------- */
.mosca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); }
.mosca h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 12px 0 12px; }
.mosca-intro > p:not(.kicker) { color: var(--text-2); font-size: 15px; }
.mosca-intro b { color: var(--text); font-weight: 600; }
.mosca-controls { margin-top: 28px; display: grid; gap: 22px; }
.range label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; color: var(--text-2); margin-bottom: 10px; }
.range em { font-style: normal; color: var(--text-3); }
.range output { font: 600 15px/1 var(--font-mono); color: var(--text); white-space: nowrap; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0;
  border-radius: 999px; background: linear-gradient(90deg, #3783f0 var(--p, 50%), rgba(255,255,255,.1) var(--p, 50%));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 4px solid #3783f0; box-shadow: 0 0 0 4px rgba(55, 131, 240, .25);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 4px solid #3783f0; box-shadow: 0 0 0 4px rgba(55, 131, 240, .25);
}

.mosca-viz { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: rgba(0, 7, 31, .55); border: 1px solid var(--line); }
.viz-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-y { background: linear-gradient(90deg, var(--quantum-blue), var(--soft-blue)); }
.lg-x { background: linear-gradient(90deg, #545e6f, #6b7588); }
.lg-exp { background: repeating-linear-gradient(135deg, rgba(248, 113, 113, .9) 0 3px, rgba(248, 113, 113, .3) 3px 6px); }
.viz-stage { position: relative; padding-top: 30px; }
.viz-track { position: relative; height: 64px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); overflow: hidden; }
.seg { position: absolute; top: 10px; bottom: 10px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; overflow: hidden; transition: left .45s var(--ease), width .45s var(--ease); }
.seg span { font: 500 12px/1 var(--font-mono); color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-y { left: 0; background: linear-gradient(90deg, var(--quantum-blue), var(--soft-blue)); }
/* Brand kit Graphite: the neutral chart series */
.seg-x { background: linear-gradient(90deg, #545e6f, #6b7588); }
.exposure {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, rgba(248, 113, 113, .55) 0 6px, rgba(248, 113, 113, .18) 6px 12px);
  box-shadow: inset 2px 0 0 #f87171;
  transition: left .45s var(--ease), width .45s var(--ease);
}
.qday { position: absolute; top: 22px; bottom: -8px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); transition: left .45s var(--ease); }
.qday span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.viz-axis { display: flex; justify-content: space-between; font: 12px/1 var(--font-mono); color: var(--text-3); }
.mosca-result { padding-top: 6px; border-top: 1px solid var(--line); }
.result-num { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; margin-top: 12px; }
.mosca-result.is-bad .result-num strong { color: #fca5a5; }
.mosca-result.is-ok .result-num strong { color: #86efac; }
.result-copy { color: var(--text-2); font-size: 15px; margin-top: 4px; }
.mosca-viz .btn { align-self: flex-start; margin-top: 4px; }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.compare-card { padding: clamp(24px, 3vw, 36px); }
.compare-card h3 { font-size: 1.5rem; margin: 12px 0 22px; }
.compare-card--qse { background: linear-gradient(160deg, rgba(2, 77, 214, .14), rgba(55, 131, 240, .12)); border-color: rgba(55, 131, 240, .3); }
.tag-list li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.tag-list code { display: inline-block; text-align: center; padding: 4px 0; border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; background: rgba(55, 131, 240, .14); color: var(--accent-hi); }
.tag-list code.t-bad { background: rgba(248, 113, 113, .12); color: #fca5a5; }

/* ---------- Platform ---------- */
.platform { background: radial-gradient(ellipse 60% 50% at 30% 60%, rgba(78, 51, 129, .18), transparent 70%); }
.stage-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--line); margin-bottom: clamp(32px, 4vw, 56px); }
.stage-tabs button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 11px; font-weight: 500; color: var(--text-2); transition: background-color .25s, color .25s; }
.stage-tabs button span { font: 500 12px/1 var(--font-mono); color: var(--text-3); }
.stage-tabs button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.stage-tabs button[aria-selected="true"] { color: #fff; background: var(--tab-selected); box-shadow: inset 0 0 0 1px rgba(194, 141, 232, .35); }
.stage-tabs button[aria-selected="true"] span { color: var(--purple-hi); }

.platform-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ring-wrap { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto; }
.stage-ring { width: 100%; height: 100%; overflow: visible; }
.ring-ticks { fill: none; stroke: rgba(150, 175, 235, .22); stroke-width: 6; stroke-dasharray: 1 8.74; }
.ring-seg { fill: url(#ring-grad); fill-opacity: .16; stroke: rgba(194, 141, 232, .25); stroke-width: 1; cursor: pointer; transition: fill-opacity .45s var(--ease), filter .45s; }
.ring-seg:hover { fill-opacity: .32; }
.ring-seg.is-active { fill-opacity: 1; stroke: rgba(230, 210, 255, .5); filter: drop-shadow(0 0 18px rgba(160, 100, 230, .55)); }
.ring-label { font: 600 13px var(--font-mono); fill: rgba(220, 230, 255, .55); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill .3s; }
.ring-label.is-active { fill: #fff; }
.ring-key { fill: url(#qg-lumen); opacity: .1; }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ring-num { font: 500 13px/1 var(--font-mono); letter-spacing: .14em; color: var(--purple); }
.ring-name { margin-top: 10px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }

.stage-panel { padding: clamp(24px, 3.5vw, 44px); }
.stage-panel h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 14px 0 14px; }
.stage-panel > p:not(.kicker) { color: var(--text-2); font-size: 1.075rem; }
.stage-panel.is-entering { animation: panel-in .5s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.caps { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.caps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); }
.caps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-mark); }

/* ---------- Products ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.product { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); min-height: 340px; }
.product-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.product h3 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); letter-spacing: -0.04em; margin-bottom: 12px; }
.product > p { color: var(--text-2); font-size: 15.5px; }
.product .audience { margin-top: 18px; font: 13px/1.5 var(--font-mono); color: var(--text-3); }
.product .link-arrow { margin-top: auto; padding-top: 24px; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.new-strip {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding: 18px 24px; border-radius: 16px;
  border: 1px dashed rgba(55, 131, 240, .35); background: rgba(55, 131, 240, .06);
  color: var(--text-2); font-size: 15px; transition: background-color .25s, border-color .25s;
}
.new-strip strong { color: var(--text); }
.new-strip:hover { background: rgba(55, 131, 240, .12); border-color: rgba(55, 131, 240, .6); }
.tag-new { background: var(--grad-accent); color: #fff; }
.new-strip-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-hi); font-weight: 500; }

/* ---------- Industries ---------- */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.industry-grid li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.industry-grid a { position: relative; display: flex; align-items: center; gap: 18px; padding: 30px 28px; height: 100%; transition: background-color .3s; }
.industry-grid a::before { content: ""; position: absolute; inset: 0; background: var(--grad-navy); opacity: 0; transition: opacity .35s; z-index: -1; }
.industry-grid a { isolation: isolate; }
.industry-grid a:hover::before { opacity: .55; }
.ind-num { font: 500 12px/1 var(--font-mono); color: var(--text-3); }
.ind-name { flex: 1; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; }
.industry-grid .i-arrow { color: var(--text-3); }
.industry-grid a:hover .i-arrow { color: #fff; transform: translateX(3px); }

/* ---------- Technology ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 20px; }
.tile { padding: clamp(24px, 2.6vw, 32px); }
.tile h3 { margin: 20px 0 10px; }
.tile p { color: var(--text-2); font-size: 15px; }
.tile-entropy { grid-row: span 2; display: flex; flex-direction: column; gap: 28px; background: linear-gradient(170deg, rgba(2, 77, 214, .12), rgba(55, 131, 240, .08) 60%, rgba(150, 175, 235, .015)); }
.tile-entropy h3 { font-size: 1.6rem; }
.tile-entropy b { color: var(--text); font-weight: 600; }
.entropy { margin-top: auto; border-radius: 14px; background: rgba(0, 7, 31, .7); border: 1px solid var(--line); overflow: hidden; }
.entropy-head { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 12px/1 var(--font-mono); color: var(--text-3); }
.entropy-head span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.entropy-head span:last-child { color: #86efac; }
.entropy-grid { margin: 0; padding: 16px; font: 13px/1.75 var(--font-mono); color: rgba(180, 195, 235, .55); white-space: pre; overflow: hidden; min-height: 168px; }
.entropy-grid .hot { color: var(--accent-hi); text-shadow: 0 0 8px rgba(55, 131, 240, .8); }

/* ---------- Trust ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cert { padding: 28px 24px; }
.cert h3 { font-size: 1.1rem; margin: 6px 0 10px; }
.cert > p:last-child { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.cert-status { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #86efac; margin-top: 22px; }
/* Badge built from the mark's ring + notch */
.cert-badge {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background:
    radial-gradient(closest-side, #05183f 76%, transparent 77% 100%),
    conic-gradient(from 225deg, #4f78cc, #7c58c8, #b65ce0, #4f78cc);
}
.cert-badge::after {
  content: ""; position: absolute; right: 7px; bottom: 7px; width: 16px; height: 16px;
  background: #05183f; transform: rotate(45deg); border-radius: 2px;
}
.cert-badge span { font: 500 9.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--text-3); }
.cert-badge b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }

/* ---------- Leadership ---------- */
.people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.person-photo {
  position: relative; isolation: isolate; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  background: var(--grad-navy);
  margin-bottom: 18px;
}
/* Duotone into the brand gradient so mismatched headshots read as one set.
   The gradient sits in an overlay (rather than blending the photo itself) so it can fade on hover. */
.person-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.08) brightness(1.06);
  transition: filter .5s var(--ease);
}
.person-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, var(--logo-navy), var(--soft-blue)); mix-blend-mode: multiply;
  transition: opacity .5s var(--ease);
}
.person:hover .person-photo img { filter: grayscale(.1) contrast(1.03) brightness(1.04); }
.person:hover .person-photo::before { opacity: .22; }
.person-photo.no-photo img, .person-photo.no-photo::before { display: none; }
.person-photo.no-photo::after {
  content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; color: rgba(255,255,255,.85);
}
.person-role { font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--purple); }
.person h3 { font-size: 1.2rem; margin: 6px 0 8px; }
.person > p:last-child { color: var(--text-3); font-size: 14px; line-height: 1.55; }

/* ---------- Research + news ---------- */
.research-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.research .section-head { margin-bottom: 36px; }
.paper-list { display: grid; gap: 14px; }
.paper { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 24px 26px; }
.paper .kicker { grid-column: 1; }
.paper h3 { grid-column: 1; font-size: 1.25rem; }
.paper p { grid-column: 1; color: var(--text-2); font-size: 14.5px; }
.paper .i-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--accent-hi); width: 20px; height: 20px; }
.news-list li { border-top: 1px solid var(--line); }
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-list a { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; padding: 22px 4px; transition: padding .3s var(--ease); }
.news-list a:hover { padding-left: 12px; }
.news-list .kicker { grid-column: 1; font-size: 11px; color: var(--text-3); }
.news-title { grid-column: 1; font-size: 1.075rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.news-list .i-ext { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--text-3); }
.news-list a:hover .news-title { color: var(--accent-hi); }

/* ---------- Investors ---------- */
.investors { padding-bottom: clamp(32px, 4vw, 56px); }
.investor-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding: clamp(26px, 3.6vw, 48px);
  border-radius: 24px;
  background: var(--grad-navy);
  border: 1px solid rgba(55, 131, 240, .3);
}
.investor-panel .eyebrow { color: rgba(255,255,255,.75); }
.investor-panel .q-eyebrow { fill: #fff; }
/* Closing cards use a smaller heading than full sections */
.investor-panel h2, .cta-panel h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.08; }
.investor-panel h2 { margin-bottom: 14px; }
.investor-copy > p { color: rgba(238, 241, 248, .85); font-size: 1rem; max-width: 560px; }
.investor-mark { position: absolute; z-index: -1; width: 440px; height: 440px; right: -100px; top: -90px; fill: rgba(255,255,255,.07); }
.investor-panel .btn-ghost { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.investor-panel .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.investor-points { display: grid; gap: 8px; }
.investor-points li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 13px 16px; border-radius: 12px; background: rgba(0, 10, 42, .35); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.investor-points b { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.03em; }
.investor-points span { font-size: 14px; color: rgba(238, 241, 248, .8); line-height: 1.45; }
.investor-points a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.investor-points a:hover { text-decoration-color: #fff; }

/* ---------- CTA ---------- */
.cta { padding-top: 0; }
.cta-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding: clamp(26px, 3.6vw, 48px);
  border-radius: 24px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(2, 77, 214, .35), transparent 70%),
    radial-gradient(ellipse 50% 70% at 0% 0%, rgba(28, 53, 94, .6), transparent 70%),
    var(--bg-2);
}
.cta-copy > p { color: var(--text-2); margin-top: 14px; font-size: 1rem; }
.check-list { display: grid; gap: 10px; margin-top: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: .975rem; }
.check-list .i-check { margin-top: 4px; color: var(--ok); }
.cta-panel .hero-actions { margin-top: 26px; }
.cta-visual { position: relative; justify-self: center; width: min(100%, 250px); aspect-ratio: 1; }
.cta-visual::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; border: 1px dashed rgba(55, 131, 240, .3); animation: spin 60s linear infinite; }
.cta-visual::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 77, 214, .5), transparent); filter: blur(30px); z-index: -1; }
.cta-visual svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 60px rgba(2, 77, 214, .5)); }

/* Homepage CTA: the Q mark as a countdown clock. The lens and handle tick round once a minute like a
   second hand, while the arc of time left drains towards the amber Q-day marker at twelve. */
.cta-visual--clock { width: min(100%, 290px); }
.cta-visual--clock::before { content: none; }
.q-clock { overflow: visible; }
.clock-ticks, .clock-hours, .clock-left { fill: none; }
.clock-ticks { stroke: rgba(156, 192, 248, .28); stroke-width: 1; stroke-dasharray: .07 .93; stroke-dashoffset: .035; }
.clock-hours { stroke: rgba(156, 192, 248, .7); stroke-width: 2.2; stroke-dasharray: .025 .975; stroke-dashoffset: .0125; }
.clock-left { stroke: var(--purple); stroke-width: .6; stroke-linecap: round; stroke-dasharray: 60 60; opacity: .85; }
.clock-zero { fill: var(--amber); }
.clock-hand { transform-box: fill-box; transform-origin: center; }
.js .q-clock .clock-hand { animation: clock-tick 60s steps(60, end) infinite paused; }
.js .q-clock .clock-left { animation: clock-drain 60s steps(60, end) infinite paused; }
.js .q-clock .clock-zero { animation: clock-strike 60s linear infinite paused; }
.js .is-in .q-clock :is(.clock-hand, .clock-left, .clock-zero) { animation-play-state: running; }
/* The handle points to half past four in the logo, so -135° puts it at twelve */
@keyframes clock-tick { from { transform: rotate(-135deg); } to { transform: rotate(225deg); } }
@keyframes clock-drain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 60; } }
@keyframes clock-strike { 0% { opacity: 1; filter: drop-shadow(0 0 1.6px var(--amber)); } 6%, 100% { opacity: .5; filter: none; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 72px 0 32px; background: #00071f; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; padding-bottom: 56px; }
.footer-brand img { height: 48px; width: auto; }
.footer-brand p { margin-top: 20px; color: var(--text-3); font-size: 15px; max-width: 320px; }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--text-2); transition: color .2s, border-color .2s, background-color .2s; }
.socials a:hover { color: #fff; border-color: rgba(55, 131, 240, .6); background: rgba(55, 131, 240, .15); }
.socials svg { width: 18px; height: 18px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-cols h4 { margin: 0 0 16px; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.footer-cols li + li { margin-top: 10px; }
.footer-cols a { color: var(--text-3); font-size: 14.5px; transition: color .2s; }
.footer-cols a:hover { color: var(--text); }
.footer-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-3); }
.footer-bottom a { margin-left: 20px; }
.footer-bottom a:hover { color: var(--text); }
.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-badges span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font: 11px/1 var(--font-mono); letter-spacing: .06em; }
.footer-mark { position: absolute; width: 520px; height: 520px; right: -120px; bottom: -220px; fill: url(#qg-brand); opacity: .35; pointer-events: none; }

/* Back to top: a progress ring in the mark's gradient */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 52px; height: 52px; border-radius: 50%;
  color: #fff; background: rgba(3, 17, 52, .8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.8);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 100%; height: 100%; }
.tt-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2.5; }
.tt-fill { fill: none; stroke: #9a6fe0; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 24px 24px; }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .hero-inner,
  .mosca, .compare, .platform-grid, .product-grid, .research-grid,
  .investor-panel, .cta-panel, .footer-top { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { justify-self: center; max-width: 520px; margin-top: 8px; }
  .section-head.split > * { flex-basis: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ring-wrap { max-width: 420px; }
  .product { min-height: 0; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-entropy { grid-row: auto; grid-column: 1 / -1; }
  .cta-visual { width: min(55%, 200px); order: -1; justify-self: start; }
  .standards { flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 0; }
  .standards-label { padding-left: var(--gutter); max-width: none; }
  .marquee { width: 100%; }
}

@media (max-width: 720px) {
  .stage-tabs { grid-template-columns: repeat(5, auto); overflow-x: auto; scrollbar-width: none; }
  .stage-tabs::-webkit-scrollbar { display: none; }
  .stage-tabs button { padding: 12px 14px; white-space: nowrap; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom a { margin: 0 20px 0 0; }
}

@media (max-width: 640px) {
  .ticker-symbol { padding-left: var(--gutter); }
  .brand img { height: 36px; }
  .pill-sep, .pill-muted { display: none; }
  .hero-visual { max-width: 420px; }
  .chip { display: none; }
  .score-card { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -8%; }
  .hero-visual { aspect-ratio: auto; }
  .qcore { aspect-ratio: 1; height: auto; }
  .btn { white-space: normal; text-align: center; height: auto; min-height: 52px; padding-block: 12px; }
  .hero-actions .btn, .mosca-viz .btn { flex: 1 1 100%; align-self: stretch; }
  .entropy-grid { font-size: 11px; padding: 14px; }
  .stat { padding: 28px 16px 24px; }
  .stat:nth-child(odd) { padding-left: 0; }
  .industry-grid, .bento, .cert-grid { grid-template-columns: minmax(0, 1fr); }
  .industry-grid a { padding: 22px 20px; }
  .investor-points li { grid-template-columns: 90px 1fr; }
  .new-strip-cta { margin-left: 0; }
}

@media (max-width: 420px) {
  .people { grid-template-columns: 1fr; }
}
/* Below 360px a long figure ("100,000+") is wider than its half of the stats row */
@media (max-width: 359px) {
  .stat-num { font-size: 1.8rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .ticker-track, .marquee-track, .spin { animation: none !important; }
  .q-clock :is(.clock-hand, .clock-left, .clock-zero) { animation: none !important; }
  .q-ring { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: .25; }
  .q-key { opacity: 1; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Product pages
   ========================================================================== */
.nav-list > li > button[aria-current="true"] { color: var(--text); }
.menu a[aria-current="page"] { background: rgba(55, 131, 240, .14); }
.footer-cols a[aria-current="page"] { color: var(--text); }

/* ---------- Product hero ---------- */
.p-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.crumbs a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); transition: color .2s; }
.crumbs a:hover { color: var(--text); }
.crumbs svg { width: 14px; height: 14px; }
.crumbs [aria-current] { color: var(--text); }
.p-kicker { font: 500 12px/1.6 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); margin-bottom: 16px; }
.p-hero h1 { font-size: clamp(3.2rem, 8vw, 6.4rem); line-height: .92; letter-spacing: -0.055em; margin-bottom: 22px; }
.p-tagline { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.25; letter-spacing: -0.025em; font-weight: 500; margin-bottom: 20px; max-width: 640px; }

/* Product mark: the QSE ring (from the logo) holding the product's glyph */
.p-mark { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; justify-self: end; display: grid; place-items: center; }
.p-mark .qcore { position: absolute; inset: 0; }
/* Reveal sequence, all on the logo's own geometry:
   1. the full QSE mark draws in (ring outline → fill, then the magnifier glyph)
   2. the magnifier zooms toward the viewer: the lens fills the Q, the handle slides out through the tail notch
   3. the product glyph resolves inside the lens, with a ripple
   The magnifier sits behind the ring, so the ring masks the handle except where the notch is cut. */
.p-badge { position: relative; width: 56%; aspect-ratio: 1; }
.p-badge::before {
  content: ""; position: absolute; inset: -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126, 62, 152, .55), transparent); filter: blur(30px);
  animation: p-fade-in 1.2s ease .7s both;
}
.p-badge::after {
  content: ""; position: absolute; inset: 24%; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(220, 192, 255, .85); opacity: 0;
  animation: p-pulse 1.1s var(--ease) 2.1s;
}
.p-badge-key, .p-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-badge-ring {
  fill: url(#qg-lumen); fill-opacity: 0;
  stroke: #d7c2ff; stroke-width: .22; stroke-opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: q-draw 1.3s var(--ease) .1s forwards, q-fill .9s ease .9s forwards;
}
.p-badge-key {
  fill: url(#qg-lumen); opacity: 0;
  transform-origin: 50.05% 49.85%; /* centre of the magnifier's lens in the logo */
  animation: p-key-in .6s var(--ease) 1s forwards, p-magnify 1.1s cubic-bezier(.65, 0, .25, 1) 1.7s forwards;
}
.p-badge-icon {
  position: absolute; left: 35%; top: 35%; width: 30%; height: 30%;
  color: var(--accent-hi); opacity: 0;
  filter: blur(6px) drop-shadow(0 0 12px rgba(214, 160, 255, .6));
  animation: p-icon-in .9s var(--ease) 2.1s forwards, p-glow 4s ease-in-out 3.2s infinite;
}
@keyframes p-fade-in { from { opacity: 0; } }
@keyframes p-key-in { from { opacity: 0; transform: scale(.7) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes p-magnify { from { opacity: 1; transform: scale(1); } to { opacity: .32; transform: scale(1.86); } }
@keyframes p-icon-in {
  from { opacity: 0; transform: scale(.35); filter: blur(6px) drop-shadow(0 0 12px rgba(214, 160, 255, .6)); }
  to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 12px rgba(214, 160, 255, .6)); }
}
@keyframes p-glow { 50% { filter: blur(0) drop-shadow(0 0 22px rgba(214, 160, 255, .95)); } }
@keyframes p-pulse { from { opacity: .9; transform: scale(.55); } to { opacity: 0; transform: scale(1.45); } }
/* Hold the sequence until the mark is on screen (main.js adds .in-view) */
@media (prefers-reduced-motion: no-preference) {
  .js .p-mark:not(.in-view) :is(.p-badge, .p-badge-key, .p-badge-ring, .p-badge-icon),
  .js .p-mark:not(.in-view) .p-badge::before,
  .js .p-mark:not(.in-view) .p-badge::after { animation-play-state: paused; }
}

/* ---------- Browser frame showcase ---------- */
.showcase { position: relative; padding-bottom: var(--section-y); }
.frame-wrap { position: relative; isolation: isolate; }
.frame-wrap::before {
  content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1;
  background: radial-gradient(closest-side, rgba(55, 131, 240, .4), transparent); filter: blur(60px);
}
.frame { border-radius: 18px; border: 1px solid var(--line-2); background: #041339; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .85); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.frame-dots { display: flex; gap: 7px; flex: none; }
.frame-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.frame-url { flex: 1; max-width: 440px; margin-inline: auto; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; font: 12px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.frame-url svg { width: 12px; height: 12px; color: var(--ok); }
.frame-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.frame-tag { flex: none; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.frame-body img { width: 100%; height: auto; }
.frame-caption { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--text-3); }

/* ---------- Shared product blocks ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cap-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cap { padding: clamp(24px, 3vw, 32px); }
.cap h3 { margin: 22px 0 10px; font-size: 1.22rem; }
.cap p { color: var(--text-2); font-size: 15px; }
.cap-num { position: absolute; top: 28px; right: 28px; font: 500 12px/1 var(--font-mono); color: var(--text-3); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.prose > p { color: var(--text-2); font-size: 1.075rem; line-height: 1.7; }
.prose > p + p { margin-top: 16px; }
.prose h2 { margin-bottom: 24px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip-row li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.flow li { position: relative; padding: 28px 26px; border-left: 1px solid var(--line); }
.flow li:first-child { border-left: 0; }
.flow li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; right: -7px; top: 32px; width: 12px; height: 12px;
  background: var(--bg); border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); transform: rotate(45deg);
}
.flow-num { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--purple); }
.flow h3 { font-size: 1.1rem; margin: 16px 0 8px; }
.flow p { font-size: 14.5px; color: var(--text-2); }

.outcomes-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.outcomes-wrap .section-head { margin-bottom: 32px; }
.outcomes { display: grid; gap: 12px; }
.outcomes li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 1.04rem; line-height: 1.5; }
.outcome-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(74, 222, 128, .12); color: #86efac; }
.outcome-ico svg { width: 15px; height: 15px; }

.specs > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.specs > div:last-child { border-bottom: 1px solid var(--line); }
.specs dt { font: 500 11.5px/1.7 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.specs dd { color: var(--text); line-height: 1.6; }

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.related { display: flex; flex-direction: column; padding: 28px; }
.related h3 { font-size: 1.6rem; letter-spacing: -0.035em; margin: 22px 0 10px; }
.related p { color: var(--text-2); font-size: 14.5px; }
.related .link-arrow { margin-top: auto; padding-top: 22px; }
.related-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.related-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

.tick-list li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.tick-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--grad-mark); }

/* ---------- Illustrative UI mocks ---------- */
.mock { padding: clamp(16px, 2.6vw, 28px); font-size: 13px; }
.mock-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.mock-title { font-weight: 600; font-size: 15px; }
.mock-sub { color: var(--text-3); font-size: 12.5px; }
.mock-label { margin: 18px 0 10px; }
.mock-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.kpi span { display: block; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kpi b { display: block; margin-top: 8px; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.kpi .s-bad-t { color: #fca5a5; }
.mock-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.mock-table { width: 100%; border-collapse: collapse; }
.mock-table th { text-align: left; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); white-space: nowrap; }
.mock-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-table td:first-child { color: var(--text); font-weight: 500; }
.mock-table code { font-size: 12px; color: var(--text); }
.risk { display: inline-block; font: 500 11px/1 var(--font-mono); padding: 4px 8px; border-radius: 999px; }
.risk-high { background: rgba(248, 113, 113, .14); color: #fca5a5; }
.risk-med { background: rgba(255, 185, 0, .13); color: #ffb900; }
.risk-low { background: rgba(74, 222, 128, .12); color: #86efac; }
.risk-pqc { background: rgba(55, 131, 240, .16); color: var(--accent-hi); }

.console { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 400px; }
.console-side { padding: 18px 14px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.console-label { padding: 0 10px 10px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.console-side li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text-2); }
.console-side li.is-on { background: rgba(55, 131, 240, .18); color: var(--text); }
.console-main { padding: 22px 24px; }
.policy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.policy:last-child { border-bottom: 0; }
.policy b { font-weight: 500; color: var(--text); font-size: 14px; }
.policy > span:not(.switch) { grid-column: 1; font-size: 12.5px; color: var(--text-3); }
.switch { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.switch.on { background: linear-gradient(90deg, #024dd6, #3783f0); }
.switch.on::after { left: 19px; }

.shard-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding: clamp(24px, 4vw, 48px); align-items: stretch; }
.sf-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.sf-step b { font-size: 14px; font-weight: 600; margin-top: 8px; }
.sf-step span:last-child { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }
.sf-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -24px; width: 20px; height: 2px;
  background: linear-gradient(90deg, rgba(55, 131, 240, .2), #3783f0, rgba(55, 131, 240, .2)); background-size: 200% 100%;
  animation: pulse-line 1.6s linear infinite;
}
@keyframes pulse-line { to { background-position: -200% 0; } }
.sf-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--purple-hi); background: linear-gradient(135deg, rgba(79, 120, 204, .22), rgba(182, 92, 224, .22)); border: 1px solid rgba(194, 141, 232, .25); }
.sf-ico svg { width: 20px; height: 20px; }
.shards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; margin-top: 4px; }
.shards i { height: 16px; border-radius: 4px; background: linear-gradient(135deg, #024dd6, #3783f0); opacity: .35; animation: shard 2.4s ease-in-out infinite; }
.shards i:nth-child(2) { animation-delay: .2s; } .shards i:nth-child(3) { animation-delay: .4s; }
.shards i:nth-child(4) { animation-delay: .6s; } .shards i:nth-child(5) { animation-delay: .8s; } .shards i:nth-child(6) { animation-delay: 1s; }
@keyframes shard { 40% { opacity: 1; } }

/* ---------- QAuth: subnav, modules, platforms, pricing, cases, FAQ ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 30; border-block: 1px solid var(--line); background: rgba(0, 10, 42, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.subnav ul { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; color: var(--text-3); white-space: nowrap; transition: color .2s, background-color .2s; }
.subnav a:hover { color: var(--text); }
.subnav a.is-active { color: #fff; background: rgba(55, 131, 240, .24); }
.with-subnav section[id] { scroll-margin-top: calc(var(--header-h) + 64px); }

.modules, .faq { border-top: 1px solid var(--line); }
.module, .faq details { border-bottom: 1px solid var(--line); }
.module summary, .faq summary { list-style: none; cursor: pointer; }
.module summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.module summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 4px; }
.module summary h3 { font-size: 1.2rem; }
.module summary p { color: var(--text-3); font-size: 14.5px; margin-top: 2px; }
.module summary .p-icon { width: 44px; height: 44px; border-radius: 12px; }
.module summary .p-icon svg { width: 20px; height: 20px; }
.acc-icon { width: 18px; height: 18px; color: var(--text-3); transition: transform .3s var(--ease), color .2s; }
details[open] > summary .acc-icon { transform: rotate(45deg); color: var(--accent-hi); }
.module summary:hover h3, .faq summary:hover { color: var(--accent-hi); }
.module-body { padding: 0 4px 34px 72px; }
.module-body > p { color: var(--text-2); max-width: 860px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.feature { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.feature h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.feature p { font-size: 14px; color: var(--text-2); line-height: 1.55; }
details[open] .module-body, details[open] .faq-a { animation: panel-in .45s var(--ease); }

.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 4px; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.faq-a { padding: 0 4px 24px; color: var(--text-2); max-width: 820px; }

.vtabs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.vtabs [role="tablist"] { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--header-h) + 84px); }
.vtabs [role="tab"] { text-align: left; padding: 12px 16px; border-radius: 11px; color: var(--text-2); font-weight: 500; font-size: 15px; transition: background-color .25s, color .25s; }
.vtabs [role="tab"]:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.vtabs [role="tab"][aria-selected="true"] { color: #fff; background: var(--tab-selected); box-shadow: inset 0 0 0 1px rgba(194, 141, 232, .35); }
.vtab-panel { padding: clamp(24px, 3.4vw, 44px); }
.vtab-panel h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 12px 0 14px; }
.vtab-panel > p:not(.kicker) { color: var(--text-2); margin-bottom: 22px; }
.vtab-panel.is-entering { animation: panel-in .45s var(--ease); }

.col-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.col-list { padding: clamp(22px, 2.6vw, 30px); }
.col-list h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.col-list > p:not(.kicker) { color: var(--text-2); font-size: 14.5px; margin-bottom: 14px; }

.numbered { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.numbered li { padding: 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.numbered .flow-num { display: block; margin-bottom: 14px; }
.numbered p { color: var(--text); font-size: 15px; line-height: 1.5; }

.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; }
.plan { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); }
.plan--featured { background: linear-gradient(160deg, rgba(2, 77, 214, .14), rgba(55, 131, 240, .12)); border-color: rgba(55, 131, 240, .35); }
.plan h3 { font-size: 1.5rem; margin: 10px 0 6px; }
.plan-price { font-size: 1.05rem; color: var(--text-2); margin-bottom: 20px; }
.plan-price b { color: var(--text); font-weight: 600; }
.plan .tick-list { margin-bottom: 28px; }
.plan .btn { margin-top: auto; align-self: flex-start; }

.recog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.quote { padding: clamp(28px, 4vw, 44px); }
.quote blockquote { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; letter-spacing: -0.015em; }
.quote figcaption { margin-top: 20px; font: 500 12px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.quote-mark { width: 36px; height: 36px; fill: var(--accent); margin-bottom: 20px; }

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case { padding: 24px; }
.case h3 { font-size: 1.08rem; margin: 12px 0 8px; }
.case p { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.js .cases.is-collapsed .case:nth-child(n+7) { display: none; }
.cases-toggle { margin-top: 24px; }

.tier-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tier-tags li { padding: 7px 12px; border-radius: 8px; background: rgba(55, 131, 240, .12); color: var(--accent-hi); font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; }

/* ---------- Newsroom ---------- */
.nav-list > li > a[aria-current] { color: var(--text); }
.page-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.045em; }
.news-lead { justify-self: end; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 40px); background: linear-gradient(160deg, rgba(2, 77, 214, .16), rgba(55, 131, 240, .14)); border-color: rgba(55, 131, 240, .35); }
.news-lead h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; }
.news-lead p { color: var(--text-2); }
.news-lead .link-arrow { margin-top: 8px; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.news-meta .kicker { font-size: 11.5px; }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.news-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.news-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; }
.news-card h3 { font-size: 1.15rem; line-height: 1.35; }
.news-card p { color: var(--text-2); font-size: 14.5px; }
.news-card .link-arrow { margin-top: auto; padding-top: 10px; font-size: 14px; }

.news-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.filter-group { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.filter-group button { padding: 8px 14px; border-radius: 10px; font-size: 14px; color: var(--text-2); transition: background-color .25s, color .25s; }
.filter-group button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.filter-group button[aria-pressed="true"] { color: #fff; background: var(--tab-selected); box-shadow: inset 0 0 0 1px rgba(194, 141, 232, .35); }
.filter-count { margin-left: auto; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

.archive { border-top: 1px solid var(--line); }
.archive a { display: grid; grid-template-columns: 112px 168px minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background-color .25s, padding .3s var(--ease); }
.archive a:hover { background: rgba(255, 255, 255, .025); padding-left: 12px; }
.archive time { font: 500 13px/1.4 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.archive .kicker { font-size: 11px; }
.archive li[data-cat="threat"] .kicker { color: #fca5a5; }
.archive li[data-cat="product"] .kicker { color: var(--accent-hi); }
.archive li[data-cat="insights"] .kicker { color: var(--cyan); }
.archive-title { font-weight: 500; font-size: 1.02rem; line-height: 1.45; letter-spacing: -0.01em; }
.archive a:hover .archive-title { color: var(--accent-hi); }
.archive-src { display: inline-flex; align-items: center; gap: 6px; font: 12px/1.4 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.archive-src svg { width: 13px; height: 13px; }
.archive-empty { padding: 40px 4px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.archive-more { margin-top: 28px; }

.headline { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.headline time { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.headline h3 { font-size: 1.05rem; line-height: 1.4; font-weight: 500; }
.headline .link-arrow { margin-top: auto; padding-top: 6px; font-size: 14px; }

.media-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.media-panel { padding: clamp(28px, 4vw, 44px); }
.media-panel h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 6px 0 12px; }
.media-panel > p:not(.eyebrow) { color: var(--text-2); }
.downloads { margin-top: 22px; border-top: 1px solid var(--line); }
.downloads a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); transition: color .2s, padding .3s var(--ease); }
.downloads a:hover { color: var(--accent-hi); padding-left: 10px; }
.downloads span:last-child { font: 12px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.media-panel .hero-actions { margin-top: 26px; }
.media-note { margin-top: 18px; font-size: 13.5px; color: var(--text-3); }
.media-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Blog ---------- */
.kicker--threat { color: #fca5a5; }
.kicker--insights { color: var(--cyan); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blog-grid > li { display: flex; }
.blog-grid .news-card { width: 100%; }

.post-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.post-head > * { max-width: 860px; }
.post-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.04em; margin: 18px 0; }
.post-body { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.post-layout { display: grid; grid-template-columns: minmax(0, 720px) 250px; justify-content: space-between; gap: 64px; align-items: start; }

/* Long-form article typography */
.prose { font-size: 1.075rem; line-height: 1.75; color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose > p:first-child { font-size: 1.2rem; line-height: 1.65; color: var(--text); }
.prose :is(h2, h3, h4) { color: var(--text); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin-top: 2em; }
.prose h3 { font-size: 1.3rem; line-height: 1.3; margin-top: 1.8em; }
.prose h4 { font-size: 1.08rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; margin-top: 1.5em; }
.prose > :is(h2, h3, h4) + * { margin-top: .6em; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #fff; }
.prose :is(ul, ol) { padding-left: 1.5em; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.1em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-mark); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--accent); font: 500 .85em var(--font-mono); }
.prose li + li { margin-top: .55em; }

.prose code { font-size: .88em; padding: 2px 6px; border-radius: 6px; background: rgba(55, 131, 240, .12); color: var(--accent-hi); }
.prose.legal h3 { font-size: 1.08rem; margin-top: 1.4em; }
.prose.legal > p:first-child { font-size: 1.12rem; }

.toc { position: sticky; top: calc(var(--header-h) + 32px); padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.toc ol { display: grid; gap: 2px; margin: 14px 0 20px; }
.toc a { display: block; padding: 7px 0 7px 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--text-3); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text); }
.toc a.is-active { color: #fff; border-color: #3783f0; }

/* ---------- Contact ---------- */
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.direct-list { margin-top: 6px; }
.direct-list > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.direct-list dt { font: 500 11.5px/1.9 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.direct-list a { color: var(--text); }
.direct-list a:hover { color: var(--accent-hi); }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact-form { padding: clamp(24px, 3.4vw, 44px); }
.form-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 10px 0 26px; }
.form-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 500; color: var(--text-2); }
.field label span { color: var(--accent); }
.field :is(input, select, textarea) {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: rgba(0, 7, 31, .55); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; padding-right: 42px; cursor: pointer; }
.field select option { background: #05183f; color: var(--text); }
.select-wrap { position: relative; display: block; }
.select-wrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); pointer-events: none; }
.field :is(input, select, textarea):focus { outline: none; border-color: rgba(55, 131, 240, .7); box-shadow: 0 0 0 4px rgba(55, 131, 240, .2); }
.field [aria-invalid="true"] { border-color: rgba(248, 113, 113, .85); }
.check { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #3783f0; }
.form-note { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); }
.form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.form-status { font-size: 14px; color: var(--text-2); }
.form-status.is-error { color: #fca5a5; }
.hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.contact-aside { display: grid; gap: 20px; }
.steps { margin-top: 8px; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps h3 { font-size: 1rem; margin-bottom: 4px; }
.steps p { font-size: 14px; color: var(--text-2); }
.contact-aside .col-list > p:not(.kicker) { margin: 10px 0 14px; }
.office { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.office address { font-style: normal; color: var(--text-2); line-height: 1.7; }
.office-phone { font-size: 14px; color: var(--text-3); }
.office-phone a { color: var(--text); }
.office .link-arrow { margin-top: auto; font-size: 14px; }

/* ---------- Industries ---------- */
.team-section { padding-top: clamp(32px, 4vw, 56px); }
.people--team { row-gap: 44px; }
.doc-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 20px; align-items: center; padding: clamp(24px, 3vw, 36px); }
.doc-card h3 { font-size: 1.25rem; }
.doc-meta { margin-top: 4px; font: 12px/1.5 var(--font-mono); color: var(--text-3); }
.doc-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.reports { border-top: 1px solid var(--line); }
.reports-year { padding: 18px 4px 8px; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--purple); }
.report-row { display: grid; grid-template-columns: 70px repeat(2, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.report-q { font: 600 1.1rem/1 var(--font-sans); letter-spacing: -0.02em; }
.report-row a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 14.5px; transition: border-color .2s, background-color .2s; }
.report-row a:hover { border-color: rgba(55, 131, 240, .5); background: rgba(55, 131, 240, .08); }
.report-row svg { width: 18px; height: 18px; flex: none; color: var(--accent-hi); }
.report-row a span { margin-left: auto; font: 11.5px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.form-intro { margin: -14px 0 24px; color: var(--text-2); }
.cap > .p-icon { display: inline-grid; }
.roles li { border-top: 1px solid var(--line); }
.roles li:last-child { border-bottom: 1px solid var(--line); }
.roles a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 32px; align-items: center; padding: 26px 4px; transition: padding .3s var(--ease); }
.roles a:hover { padding-left: 12px; }
.role-name { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: -0.015em; }
.role-meta { font: 12px/1.4 var(--font-mono); letter-spacing: .08em; color: var(--text-3); }
.role-apply { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--accent-hi); }
.roles a:hover .role-name { color: var(--accent-hi); }
.roles a:hover .i-arrow { transform: translateX(3px); }
.p-hero .h1-industry { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1; letter-spacing: -0.045em; }
.challenges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.challenges li { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.challenges p { font-size: 1.12rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--text); }
.challenge-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fca5a5; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .25); }
.challenge-ico svg { width: 20px; height: 20px; }
.cap > .flow-num { display: block; }
.related-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Product page responsive ---------- */
@media (max-width: 1180px) {
  .cap-grid--4, .numbered, .related-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shard-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shard-flow .sf-step:nth-child(3)::after { display: none; }
}
@media (max-width: 980px) {
  .p-mark { justify-self: center; max-width: 340px; }
  .split, .outcomes-wrap, .recog, .vtabs, .pricing { grid-template-columns: minmax(0, 1fr); }
  .cap-grid--3, .related-grid, .cases, .col-lists, .challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(3) { border-left: 0; }
  .flow li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .flow li:nth-child(2)::after { display: none; }
  .vtabs [role="tablist"] { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .vtabs [role="tab"] { white-space: nowrap; }
  .console { grid-template-columns: minmax(0, 1fr); }
  .console-side { display: none; }
  .mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-body { padding-left: 4px; }
  .news-lead { justify-self: stretch; max-width: none; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .news-grid, .news-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-panels { grid-template-columns: minmax(0, 1fr); }
  .archive a { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .archive .kicker { grid-column: 2; grid-row: 1; }
  .archive-title { grid-column: 2; grid-row: 2; }
  .archive-src { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 640px) {
  .p-hero .hero-inner { gap: 8px; }
  .p-mark { max-width: 240px; }
  .cap-grid, .cap-grid--3, .cap-grid--4, .related-grid, .related-grid--4, .cases, .col-lists, .numbered, .feature-grid, .flow, .challenges { grid-template-columns: minmax(0, 1fr); }
  .flow li { border-left: 0; border-top: 1px solid var(--line); }
  .flow li:first-child { border-top: 0; }
  .flow li::after { display: none; }
  .specs > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .shard-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sf-step:not(:last-child)::after { top: auto; bottom: -16px; right: auto; left: 38px; width: 2px; height: 12px; background: linear-gradient(180deg, rgba(55, 131, 240, .2), #3783f0); animation: none; }
  .shard-flow .sf-step:nth-child(3)::after { display: block; }
  .module summary { grid-template-columns: minmax(0, 1fr) auto; }
  .module summary .p-icon { display: none; }
  .related-head { flex-direction: column; align-items: flex-start; }
  .news-grid, .news-grid--4, .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .report-row { grid-template-columns: minmax(0, 1fr); }
  .roles a { grid-template-columns: minmax(0, 1fr) auto; }
  .role-meta { grid-column: 1; grid-row: 2; }
  .role-apply { grid-column: 2; grid-row: 1 / span 2; }
  .filter-count { margin-left: 0; width: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 1.02rem; }
  .prose > p:first-child { font-size: 1.1rem; }
  .archive a { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .archive time { grid-column: 1; grid-row: 1; }
  .archive .kicker { grid-column: 1; grid-row: 2; }
  .archive-title { grid-column: 1 / -1; grid-row: 3; }
  .archive-src { grid-column: 2; grid-row: 1; align-self: start; }
}

/* ==========================================================================
   QPrime playground (/products/qprime#playground). Sample data rendered by qprime-playground.js.
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pg-intro { margin-bottom: clamp(28px, 4vw, 44px); }
.pg { position: relative; background: linear-gradient(180deg, #05163f, #021136); }
.js .pg-fallback { display: none; }
.no-js .pg-rerun, .no-js .pg-tabs, .no-js .pg-panel, .no-js .pg-status { display: none; }
.pg-fallback img { width: 100%; height: auto; }
.pg-fallback p { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.pg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 18px; font-size: 13.5px; color: var(--text-3); }

/* Shared atoms */
.t-ok { color: #86efac; }
.t-warn { color: #ffb900; }
.t-bad { color: #fca5a5; }
.pg-tone-gv { --fn: #f0cf6a; --fn-bg: rgba(240, 207, 106, .1); }
.pg-tone-id { --fn: #6cbcf2; --fn-bg: rgba(108, 188, 242, .1); }
.pg-tone-pr { --fn: #b49bfa; --fn-bg: rgba(180, 155, 250, .12); }
.pg-tone-de { --fn: #f6b26b; --fn-bg: rgba(246, 178, 107, .1); }
.pg-tone-rs { --fn: #f48c8c; --fn-bg: rgba(244, 140, 140, .1); }
.pg-tone-rc { --fn: #74e0a4; --fn-bg: rgba(116, 224, 164, .1); }
.pg-tone-critical { --c: #f87171; }
.pg-tone-high { --c: #fb923c; }
.pg-tone-medium { --c: #ffb900; }
.pg-tone-low { --c: #4ade80; }
.sev { display: inline-block; padding: 4px 8px; border-radius: 999px; font: 500 11px/1 var(--font-mono); white-space: nowrap; }
.sev-critical { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.sev-high { background: rgba(251, 146, 60, .15); color: #fdba74; }
.sev-medium { background: rgba(255, 185, 0, .13); color: #ffb900; }
.sev-low { background: rgba(74, 222, 128, .12); color: #86efac; }
.sev-unknown { background: rgba(130, 144, 173, .16); color: var(--text-2); }
.pg-card { min-width: 0; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.pg-label { margin-bottom: 10px; font: 500 10.5px/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pg-muted { font-size: 12.5px; color: var(--text-3); }
.pg-mono { font: 12px/1.45 var(--font-mono); }
.pg-num { font: 600 13px/1 var(--font-mono); }
.pg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(74, 222, 128, .14); }
.pg-dot--warn { background: var(--warn); box-shadow: 0 0 0 4px rgba(255, 185, 0, .14); }
.pg-ai-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(55, 131, 240, .13); font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--accent-hi); white-space: nowrap; }
.pg-ai-tag svg { width: 12px; height: 12px; }
.pg-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pg-bar i { display: block; width: var(--v); height: 100%; border-radius: inherit; background: var(--grad-accent); transform-origin: left; animation: pg-grow 1s var(--ease) both; }
.pg-bar--ok i { background: linear-gradient(90deg, #3fbf78, #86efac); }
.pg-bar--warn i { background: linear-gradient(90deg, #cc9400, #ffb900); }
.pg-bar--bad i { background: linear-gradient(90deg, #d9534f, #fca5a5); }
.pg-bar--pqc i { background: var(--grad-accent); }
.pg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pg-kpis .kpi { background: rgba(255, 255, 255, .025); }
.pg-kpis .kpi b { font-size: 22px; }
@keyframes pg-grow { from { transform: scaleX(0); } }
@keyframes pg-rise { from { transform: scaleY(0); } }
@keyframes pg-ring { from { stroke-dasharray: 0 100; } }
@keyframes pg-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pg-blink { 50% { opacity: .35; } }
@keyframes pg-scan { from { top: 120px; } to { top: calc(100% - 12px); } }

/* App header and tabs */
.pg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px clamp(16px, 2.4vw, 28px); border-bottom: 1px solid var(--line); }
.pg-org { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.pg-org-mark { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--grad-navy); font: 600 13px/1 var(--font-mono); color: #fff; }
.pg-org strong { display: block; font-size: 14.5px; font-weight: 600; }
.pg-org small { display: block; font-size: 12px; color: var(--text-3); }
.pg-status { display: flex; align-items: center; gap: 9px; font: 12px/1.4 var(--font-mono); color: var(--text-2); }
.pg.is-running .pg-status .pg-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(55, 131, 240, .18); animation: pg-blink 1s ease-in-out infinite; }
.pg-rerun svg { width: 15px; height: 15px; }
.pg-rerun:disabled { opacity: .5; cursor: progress; }
/* View switcher: three card-like buttons in a tray (same language as the homepage stage tabs) */
.pg-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: clamp(14px, 2.4vw, 28px) clamp(14px, 2.4vw, 28px) 0; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.pg-tabs [role="tab"] { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); text-align: left; color: var(--text-2); transition: background-color .25s, border-color .25s, color .25s, transform .2s var(--ease); }
.pg-tabs [role="tab"]:hover { color: var(--text); border-color: rgba(194, 141, 232, .45); background: rgba(124, 88, 200, .1); transform: translateY(-1px); }
.pg-tabs [role="tab"][aria-selected="true"] { color: #fff; border-color: transparent; background: var(--tab-selected); box-shadow: inset 0 0 0 1px rgba(194, 141, 232, .45); transform: none; }
.pg-tab-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); transition: color .25s, border-color .25s, background-color .25s; }
.pg-tab-ico svg { width: 18px; height: 18px; }
.pg-tabs [role="tab"]:hover .pg-tab-ico, .pg-tabs [role="tab"][aria-selected="true"] .pg-tab-ico { color: var(--purple-hi); border-color: rgba(194, 141, 232, .35); background: rgba(124, 88, 200, .18); }
.pg-tab-text { display: grid; gap: 3px; min-width: 0; }
.pg-tab-text b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.pg-tab-text small { overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--text-3); text-overflow: ellipsis; white-space: nowrap; }
.pg-tabs [role="tab"][aria-selected="true"] small { color: rgba(238, 241, 248, .75); }
/* Views not yet opened carry a pulsing dot, so it's clear there is more to explore */
.pg-tabs [role="tab"]:not([data-seen])::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 0 rgba(194, 141, 232, .6); animation: pg-nudge 2s ease-out infinite; }
@keyframes pg-nudge { 70% { box-shadow: 0 0 0 7px rgba(194, 141, 232, 0); } 100% { box-shadow: 0 0 0 0 rgba(194, 141, 232, 0); } }
.pg-ai-pill { padding: 3px 6px; border-radius: 999px; background: rgba(55, 131, 240, .16); font: 600 10px/1 var(--font-mono); letter-spacing: .08em; color: var(--accent-hi); }
.pg-panel { display: grid; gap: 16px; padding: clamp(14px, 2.4vw, 28px); transition: opacity .3s, filter .3s; }
/* Single-column grids must not grow to fit wide tables or long file names: those scroll or truncate inside */
.pg-panel, .pg-answer, .pg-response, .pg-detail, .pg-ws-main { grid-template-columns: minmax(0, 1fr); }
.pg-panel:focus-visible { outline-offset: -3px; }
.pg.is-running .pg-panel { opacity: .3; filter: saturate(.3); pointer-events: none; }
.pg.is-running::after {
  content: ""; position: absolute; left: 0; right: 0; top: 120px; height: 2px; pointer-events: none;
  background: var(--grad-accent); box-shadow: 0 0 24px 4px rgba(55, 131, 240, .55);
  animation: pg-scan 1.3s ease-in-out infinite alternate;
}

/* 1. CSF 2.0 assessment */
.pg-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 28px; align-items: center; }
.pg-score { display: flex; align-items: center; gap: 14px; }
.pg-ring { flex: none; width: 64px; height: 64px; transform: rotate(-90deg); }
.pg-ring-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 5; }
.pg-ring-fill { fill: none; stroke: #3783f0; stroke-width: 5; stroke-linecap: round; animation: pg-ring 1.2s var(--ease) both; }
.pg-score strong { display: block; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.pg-score strong span { margin-left: 2px; font-size: 14px; font-weight: 400; color: var(--text-3); }
.pg-score small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pg-stats div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.pg-stats dt { font: 500 10.5px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pg-stats dd { margin-top: 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.pg-fns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pg-fn-tab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-align: left; transition: border-color .2s, background-color .2s; }
.pg-fn-tab:hover { border-color: var(--line-2); }
.pg-fn-tab[aria-selected="true"] { border-color: var(--fn); background: var(--fn-bg); }
.pg-fn-code { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--fn-bg); font: 600 12px/1 var(--font-mono); color: var(--fn); }
.pg-fn-name { overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pg-fn-score { font: 12px/1 var(--font-mono); color: var(--text-2); }
.pg-fn-tab .pg-bar { grid-column: 2 / 4; height: 4px; }
.pg-fn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; animation: pg-in .35s var(--ease) both; }
.pg-cats li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 40px; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pg-cats code { font: 11.5px/1 var(--font-mono); color: var(--fn); }
.pg-cat-name { font-size: 13px; line-height: 1.35; color: var(--text-2); }
.pg-cats .pg-bar { grid-column: 2; }
.pg-pct { grid-column: 3; grid-row: 1 / span 2; text-align: right; font: 600 12.5px/1 var(--font-mono); }
.pg-answer { display: grid; gap: 14px; }
.pg-answer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pg-id { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line-2); font: 500 12px/1 var(--font-mono); color: var(--fn); }
.pg-answer h4 { font-size: 1.02rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.pg-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pg-scale li { padding: 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; line-height: 1.3; color: var(--text-3); }
.pg-scale li.is-picked { border-color: rgba(55, 131, 240, .6); background: rgba(55, 131, 240, .16); color: var(--text); }
.pg-scale em { display: block; margin-top: 6px; font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hi); }
.pg-files { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font: 11.5px/1.2 var(--font-mono); color: var(--text-2); }
.pg-file svg { flex: none; width: 14px; height: 14px; color: var(--text-3); }
.pg-file small { flex: none; padding: 3px 6px; border-radius: 5px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-file--policy small { background: rgba(124, 156, 230, .16); color: #a9c0ff; }
.pg-file--evidence small { background: rgba(255, 185, 0, .13); color: #ffb900; }
.pg-response { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(55, 131, 240, .26); background: rgba(55, 131, 240, .07); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.pg-response b { font-weight: 600; color: var(--text); }
.pg-response .pg-label { margin: 4px 0 0; }
.pg-response ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.pg-response li::marker { color: var(--accent); }
.pg-review { display: flex; align-items: center; gap: 9px; font: 12px/1.4 var(--font-mono); color: #ffb900; }

/* 2. Application inventory */
.pg-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pg-chart-title { font-size: 13.5px; font-weight: 600; }
.pg-chart-sub { margin: 2px 0 16px; font-size: 12px; color: var(--text-3); }
.pg-charts .pg-card { display: flex; flex-direction: column; }
.pg-donut-wrap { flex: 1; display: flex; align-items: center; gap: 18px; }
.pg-donut-box { position: relative; flex: none; width: 112px; }
.pg-donut { width: 100%; height: auto; transform: rotate(-90deg); }
.pg-donut .pg-ring-track { stroke-width: 6; }
.pg-donut-seg { fill: none; stroke: var(--c); stroke-width: 6; animation: pg-ring 1.1s var(--ease) both; }
.pg-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pg-donut-center b { font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.pg-donut-center small { margin-top: 3px; font: 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.pg-legend { flex: 1; display: grid; gap: 9px; min-width: 0; }
.pg-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.pg-legend i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pg-legend b { margin-left: auto; font: 400 11.5px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.pg-hist { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; min-height: 132px; }
.pg-hist li { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; text-align: center; }
.pg-hist b { font: 500 12px/1 var(--font-mono); color: var(--text-2); }
.pg-col { align-self: end; height: var(--v); border-radius: 6px 6px 3px 3px; transform-origin: bottom; animation: pg-rise 1s var(--ease) both; }
.pg-col--bad { background: linear-gradient(180deg, #f87171, rgba(248, 113, 113, .35)); }
.pg-col--warn { background: linear-gradient(180deg, #ffb900, rgba(255, 185, 0, .3)); }
.pg-col--ok { background: linear-gradient(180deg, #4ade80, rgba(74, 222, 128, .3)); }
.pg-hist small { font: 10.5px/1 var(--font-mono); color: var(--text-3); }
.pg-algos { display: grid; gap: 8px; }
.pg-algos li { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 5px 10px; align-items: center; }
.pg-algo-name { display: flex; align-items: center; gap: 8px; font: 11.5px/1.2 var(--font-mono); color: var(--text-2); }
.pg-algos .pg-bar { grid-column: 1; height: 4px; }
.pg-algos b { grid-column: 2; grid-row: 1 / span 2; text-align: right; font: 500 12px/1 var(--font-mono); color: var(--text); }
.pg-tag { padding: 2px 6px; border-radius: 999px; font: 500 9.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pg-tag--bad { background: rgba(248, 113, 113, .14); color: #fca5a5; }
.pg-tag--ok { background: rgba(74, 222, 128, .12); color: #86efac; }
.pg-tag--pqc { background: rgba(55, 131, 240, .16); color: var(--accent-hi); }
.pg-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.pg-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-filters button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); transition: border-color .2s, background-color .2s, color .2s; }
.pg-filters button:hover { border-color: var(--line-2); color: var(--text); }
.pg-filters button[aria-pressed="true"] { border-color: rgba(55, 131, 240, .6); background: rgba(55, 131, 240, .16); color: var(--text); }
.pg-filters i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pg-search { position: relative; display: flex; align-items: center; }
.pg-search svg { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.pg-search input { width: 230px; height: 36px; padding: 0 12px 0 32px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font: inherit; font-size: 13px; color: var(--text); }
.pg-search input::placeholder { color: var(--text-3); }
.pg-search input:focus { outline: none; border-color: rgba(55, 131, 240, .6); box-shadow: 0 0 0 3px rgba(55, 131, 240, .25); }
.pg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pg-table th { padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-align: left; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.pg-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; white-space: nowrap; }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table--apps tbody tr:is([data-app], [data-row]) { cursor: pointer; transition: background-color .2s; }
.pg-table--apps tbody tr:is([data-app], [data-row]):hover { background: rgba(255, 255, 255, .03); }
.pg-table--apps tbody tr.is-selected { background: rgba(55, 131, 240, .13); box-shadow: inset 2px 0 0 #3783f0; }
.pg-app { display: grid; gap: 3px; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.pg-app small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.pg-missing, .pg-complete { display: inline-block; padding: 4px 8px; border-radius: 999px; font: 11.5px/1 var(--font-mono); white-space: nowrap; }
.pg-missing { border: 1px solid rgba(255, 185, 0, .4); color: #ffb900; }
.pg-complete { border: 1px solid rgba(74, 222, 128, .35); color: #86efac; }
.pg-empty { padding: 28px 14px; text-align: center; color: var(--text-3); }
.pg-count { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.pg-detail { display: grid; gap: 14px; margin-top: 14px; padding: 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(55, 131, 240, .05); animation: pg-in .4s var(--ease) both; }
.pg-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pg-detail-head .pg-label { margin-bottom: 6px; }
.pg-detail-head h4 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.pg-detail-meta { display: flex; align-items: center; gap: 8px; }
.pg-score-pill { padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 11px/1 var(--font-mono); }
.pg-ai-note { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.pg-ai-note .pg-ai-tag { margin-right: 8px; vertical-align: 1px; }
.pg-table--cbom .pg-rec { min-width: 280px; white-space: normal; line-height: 1.5; }

/* 3. Migration plan */
.pg-mosca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px 32px; align-items: center; }
.pg-mosca .range label { font-size: 13.5px; }
.pg-mosca-note { margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.pg-gantt { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.pg-gantt-inner { min-width: 780px; }
.pg-g-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) 96px; align-items: stretch; }
.pg-g-head { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.pg-g-head > span:first-child, .pg-g-head > span:last-child { align-self: end; padding: 0 14px 9px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pg-g-years { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pg-g-year { grid-column: span 4; padding: 10px 0 4px 8px; border-left: 1px solid var(--line); font: 500 11px/1 var(--font-mono); color: var(--text-2); }
.pg-g-years small { grid-row: 2; padding: 2px 0 9px 8px; border-left: 1px solid rgba(150, 175, 235, .06); font: 10px/1 var(--font-mono); color: var(--text-3); }
.pg-g-years small:nth-of-type(4n + 1) { border-left-color: var(--line); }
.pg-ws { display: grid; grid-template-columns: 260px minmax(0, 1fr) 96px; align-items: center; width: 100%; border-bottom: 1px solid var(--line); text-align: left; transition: background-color .2s; }
.pg-ws:last-child { border-bottom: 0; }
.pg-ws:hover { background: rgba(255, 255, 255, .03); }
.pg-ws[aria-pressed="true"] { background: rgba(55, 131, 240, .13); box-shadow: inset 2px 0 0 #3783f0; }
.pg-ws-label { display: grid; gap: 3px; min-width: 0; padding: 11px 14px; }
.pg-ws-label b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.pg-ws-label small { padding-left: 15px; font-size: 11.5px; color: var(--text-3); }
.pg-sev-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pg-ws-track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; align-self: stretch; background-image: repeating-linear-gradient(90deg, rgba(150, 175, 235, .07) 0 1px, transparent 1px calc(100% / 12)); }
.pg-ws-bar { grid-row: 1; height: 14px; margin: 0 3px; border-radius: 999px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, transparent)); transform-origin: left; animation: pg-grow .9s var(--ease) both; }
.pg-ws-exp { padding: 0 14px; }
.pg-ws-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 28px; padding: 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(55, 131, 240, .05); animation: pg-in .4s var(--ease) both; }
.pg-ws-detail.is-static { animation: none; }
.pg-ws-main { display: grid; gap: 14px; align-content: start; }
.pg-ws-side .pg-label { margin-top: 14px; }
.pg-ws-side .pg-label:first-child { margin-top: 0; }
.pg-fromto { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pg-fromto > div { align-self: stretch; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--text); }
.pg-fromto .pg-label { margin-bottom: 6px; }
.pg-fromto .from { border-color: rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .06); }
.pg-fromto .to { border-color: rgba(74, 222, 128, .3); background: rgba(74, 222, 128, .06); }
.pg-fromto-arrow svg { width: 18px; height: 18px; color: var(--accent); }
.pg-math { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font: 12px/1.5 var(--font-mono); color: var(--text-2); }
.pg-steps { display: grid; gap: 8px; counter-reset: pg-step; }
.pg-steps li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); counter-increment: pg-step; }
.pg-steps li::before { content: counter(pg-step, decimal-leading-zero); flex: none; font: 500 11px/1.85 var(--font-mono); color: var(--accent); }
.pg-products { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-products a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text); transition: border-color .2s, background-color .2s; }
.pg-products a:hover { border-color: rgba(55, 131, 240, .6); background: rgba(55, 131, 240, .12); }
.pg-products svg { width: 13px; height: 13px; }

/* ---------- QAuth playground (/products/qauth#playground), rendered by qauth-playground.js ---------- */
.pg-c1 { --c: var(--soft-blue); }
.pg-c2 { --c: var(--purple); }
.pg-c3 { --c: var(--amber); }
.pg-c4 { --c: #f87171; }
.pg-c5 { --c: #4ade80; }
.pg-c6 { --c: var(--cyan); }
.pg-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-note { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.kpi-note.t-ok { color: #86efac; }
.kpi-note.t-warn { color: var(--amber); }
.kpi-note.t-bad { color: #fca5a5; }
/* Section labels sit with the block they introduce, not halfway between blocks */
.pg-panel > .pg-label { margin: 6px 0 -6px; }
.pg-side-main > div:empty { display: none; }
.pg-filters + .pg-stack { margin-top: 14px; }
.pg-charts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-col--accent { background: linear-gradient(180deg, var(--soft-blue), rgba(2, 77, 214, .3)); }
.pg-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-apps li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.pg-apps .pg-dot { width: 6px; height: 6px; box-shadow: none; }

.pg-risks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pg-risk { --c: var(--ok); display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.pg-risk--warn { --c: var(--amber); }
.pg-risk--bad { --c: #f87171; }
.pg-risk-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.pg-risk-ico svg { width: 17px; height: 17px; }
.pg-risk-name { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pg-risk b { display: block; margin-top: 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.pg-risk small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }

.pg-violations { display: grid; gap: 14px; }
.pg-violations .pg-chart-sub { margin-bottom: 0; }
/* Stacked columns: a column's height is its total; segments share it in proportion to their value (--n) */
.pg-stack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 190px; margin-top: 4px; }
.pg-stack li { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; text-align: center; }
.pg-stack b { font: 500 12px/1 var(--font-mono); color: var(--text-2); }
.pg-stack-col { align-self: end; display: flex; flex-direction: column-reverse; gap: 2px; height: var(--v); min-height: 2px; transform-origin: bottom; animation: pg-rise 1s var(--ease) both; }
.pg-stack-col i { flex: var(--n) 0 0%; min-height: 0; border-radius: 3px; background: var(--c); }
.pg-stack small { font: 10.5px/1.2 var(--font-mono); color: var(--text-3); }

.pg-hbars { display: grid; gap: 11px; }
.pg-hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: center; }
.pg-hbar-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.pg-hbar-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-hbar-name small { flex: none; margin-left: auto; font-size: 11px; color: var(--text-3); }
.pg-hbars .pg-bar { grid-column: 1; height: 5px; }
.pg-hbars b { grid-column: 2; grid-row: 1 / span 2; text-align: right; font: 500 12.5px/1 var(--font-mono); color: var(--text); }

/* Side navigation + main column, as in the console's policy and user screens */
.pg-side-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.pg-side-main { display: grid; gap: 14px; min-width: 0; }
.pg-side-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.pg-side-head .pg-muted { margin-top: 2px; }
.pg-nav { display: grid; gap: 4px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.pg-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; font-size: 13.5px; color: var(--text-2); transition: background-color .2s, color .2s; }
.pg-nav button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.pg-nav button[aria-pressed="true"] { color: #fff; background: var(--tab-selected); box-shadow: inset 0 0 0 1px rgba(194, 141, 232, .35); }
.pg-nav button svg { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.pg-nav button[aria-pressed="true"] svg { color: var(--purple-hi); }
.pg-nav button span { flex: 1; min-width: 0; }
.pg-nav button small { font: 11px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.pg-nav button[aria-pressed="true"] small { color: rgba(238, 241, 248, .75); }
.pg-nav .pg-nav-sub { padding-left: 22px; }
.pg-nav-root { margin: 6px 10px 2px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.pg-cell-check { width: 1%; }
.pg-check { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--soft-blue); cursor: pointer; }
.pg-table td.pg-wrap { white-space: normal; }
.pg-name { display: grid; gap: 3px; min-width: 220px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.pg-name small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.pg-name--quiet { min-width: 0; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.pg-table tr.is-off .pg-name:not(.pg-name--quiet) { color: var(--text-2); }
.pg-switch-wrap { display: inline-flex; align-items: center; gap: 10px; }
.pg-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .1); transition: background-color .2s, border-color .2s; }
.pg-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
.pg-switch[aria-checked="true"] { border-color: transparent; background: var(--quantum-blue); }
.pg-switch[aria-checked="true"]::after { transform: translateX(16px); }
.pg-state { display: inline-block; padding: 4px 8px; border-radius: 999px; font: 500 11px/1 var(--font-mono); white-space: nowrap; }
.pg-state--on { background: rgba(74, 222, 128, .12); color: #86efac; }
.pg-state--off { background: rgba(130, 144, 173, .16); color: var(--text-2); }
.pg-state--warn { background: rgba(255, 185, 0, .13); color: var(--amber); }

.pg-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(55, 131, 240, .35); background: rgba(55, 131, 240, .1); font-size: 13px; color: var(--text); animation: pg-in .25s var(--ease) both; }
.pg-bulk > span { margin-right: auto; font-weight: 500; }
.pg-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; }
.pg-btn:hover { border-color: rgba(55, 131, 240, .6); background: rgba(55, 131, 240, .12); }
.pg-btn--danger { border-color: rgba(248, 113, 113, .45); color: #fca5a5; }
.pg-btn--danger:hover { border-color: #f87171; background: rgba(248, 113, 113, .12); }
.pg-btn--quiet { border-color: transparent; background: none; color: var(--text-2); }
.pg-btn--quiet:hover { border-color: transparent; background: rgba(255, 255, 255, .05); color: var(--text); }

.pg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pg-facts div { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.pg-facts dt { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pg-facts dd { margin-top: 5px; font-size: 13px; color: var(--text); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.pg-chips li { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(194, 141, 232, .3); background: rgba(124, 88, 200, .1); font-size: 12px; color: var(--purple-hi); }
.pg-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(74, 222, 128, .3); background: rgba(74, 222, 128, .07); font-size: 13px; color: var(--text); }
.pg-card > .pg-note { margin-top: 12px; }

.pg-queue { display: grid; gap: 8px; margin-top: 4px; }
.pg-queue li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); transition: opacity .3s; }
.pg-queue li.is-done { opacity: .6; }
.pg-queue-main { flex: 1 1 320px; display: grid; gap: 4px; min-width: 0; }
.pg-queue-subject { font-size: 14px; font-weight: 500; color: var(--text); }
.pg-queue-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.pg-file-name { font: 11.5px/1.2 var(--font-mono); color: var(--text-3); }
.pg-queue-actions { display: flex; gap: 8px; }
.pg-queue-outcome { font-size: 13px; font-weight: 500; }

/* Two panes side by side: a list, and the selected item's detail beside it */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.pg-split--narrow { grid-template-columns: minmax(0, 1fr) 320px; }
.pg-split > .pg-detail { margin-top: 0; }
.pg-queue-subject .pg-file-name { margin-left: 8px; }
.pg-split .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.pg-split .pg-facts div { padding: 0; border: 0; background: none; }
/* Long tables scroll inside the frame, with the header row kept in view */
.pg-table-wrap--scroll { max-height: 390px; overflow-y: auto; }
.pg-table-wrap--scroll thead th { position: sticky; top: 0; z-index: 1; background: #06163d; }
/* Side navigation shown as a row across the top, freeing the width below it */
.pg-side-layout--top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pg-side-layout--top .pg-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
.pg-side-layout--top .pg-nav::-webkit-scrollbar { display: none; }
.pg-side-layout--top .pg-nav button { flex: none; width: auto; }
.pg-side-layout--top .pg-nav .pg-nav-sub { padding-left: 10px; }
.pg-side-layout--top .pg-nav-root { display: none; }

/* QAuth's playground is denser than QPrime's so that each view fits on one screen */
.pg--compact .pg-top { padding-block: 10px; }
.pg--compact .pg-tabs { margin-top: clamp(12px, 1.6vw, 18px); padding: 5px; gap: 6px; }
.pg--compact .pg-tabs [role="tab"] { gap: 10px; padding: 7px 12px; }
.pg--compact .pg-tab-ico { width: 30px; height: 30px; border-radius: 8px; }
.pg--compact .pg-tab-ico svg { width: 16px; height: 16px; }
.pg--compact .pg-tab-text small { display: none; }
.pg--compact .pg-panel { gap: 12px; padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2.4vw, 28px) clamp(14px, 2vw, 22px); }
.pg--compact .pg-toolbar { margin-bottom: 0; }
.pg--compact .kpi { padding: 9px 12px; }
.pg--compact .pg-kpis .kpi b { margin-top: 4px; font-size: 18px; }
.pg--compact .pg-risk { align-items: center; padding: 9px 12px; }
.pg--compact .pg-risk b { margin-top: 1px; font-size: 17px; }
.pg--compact .pg-risk small { margin-top: 0; }
.pg--compact .pg-card { padding: 14px; }
.pg--compact .pg-chart-sub { margin-bottom: 10px; }
.pg--compact .pg-filters button { padding: 5px 10px; font-size: 12px; }
.pg--compact .pg-hist { min-height: 96px; }
.pg--compact .pg-stack { height: 118px; }
.pg--compact .pg-filters + .pg-stack, .pg--compact .pg-filters + .pg-donut-wrap, .pg--compact .pg-filters + .pg-hbars { margin-top: 12px; }
.pg--compact .pg-hbars { gap: 8px; }
.pg--compact .pg-donut-box { width: 96px; }
.pg--compact .pg-legend { gap: 6px; }
.pg--compact .pg-side-main { gap: 12px; }
.pg--compact .pg-table th, .pg--compact .pg-table td { padding: 8px 12px; }
.pg--compact .pg-detail { gap: 10px; padding: 14px; }
.pg--compact .pg-facts div { padding: 7px 10px; }
.pg--compact .pg-split .pg-facts div { padding: 0; }
.pg--compact .pg-facts dd { margin-top: 2px; }
.pg--compact .pg-chips { gap: 5px; margin-top: -2px; }
.pg--compact .pg-chips li { padding: 2px 8px; font-size: 11.5px; }
/* Each held email on one row: subject and route, the rule that matched, then the actions */
.pg--compact .pg-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; padding: 9px 12px; }
.pg--compact .pg-queue-main { gap: 2px; }
@media (max-width: 980px) {
  .pg-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pg--compact .pg-tabs [role="tab"] { padding: 8px 4px; }
  .pg--compact .pg-queue li { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* ---------- qREK entropy demo (/products/qrek#demo), driven by qrek-demo.js ---------- */
.tx { background: linear-gradient(180deg, #05163f, #021136); }
.js .tx-fallback { display: none; }
.no-js .tx-controls, .no-js .tx-panes, .no-js .tx-foot { display: none; }
.tx-fallback p { padding: 16px 20px; font-size: 13.5px; color: var(--text-2); }
.tx-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 14px clamp(14px, 2.4vw, 24px); border-bottom: 1px solid var(--line); }
.tx-env { display: grid; font: 12px/1.75 var(--font-mono); counter-reset: tx-ln; }
.tx-ln { display: block; padding: 0 8px; border-radius: 4px; color: var(--text-2); counter-increment: tx-ln; white-space: pre-wrap; }
.tx-ln::before { content: counter(tx-ln); display: inline-block; width: 2.2em; color: rgba(130, 144, 173, .55); }
.tx-ln b { font-weight: 400; color: #7fd6fb; }
.tx-ln i { font-style: normal; color: var(--purple-hi); }
.tx-comment { font-style: italic; color: var(--text-3); }
.tx-ln.is-active { background: rgba(124, 88, 200, .16); }
.tx-controls { display: grid; justify-items: end; gap: 10px; }
.tx-buttons { display: flex; gap: 8px; }
.tx-buttons .pg-btn svg { width: 14px; height: 14px; }
.tx-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.tx-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.tx-pane + .tx-pane { border-left: 1px solid var(--line); }
.tx-pane-head { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tx-pane-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tx-pane-dot--trace { background: var(--purple); }
.tx-out { height: 340px; overflow: auto; padding: 12px 16px; background: rgba(0, 7, 31, .55); font: 11.5px/1.65 var(--font-mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: rgba(150, 175, 235, .25) transparent; }
.tx-out:focus-visible { outline-offset: -3px; }
.tx-line { display: block; }
.tx-prompt { color: #4ade80; }
.tx-cmd { color: var(--text); }
.tx-msg { color: #86efac; }
.tx-msg--start { color: #7fd6fb; }
.tx-msg--done { color: var(--purple); }
.tx-sys { color: #9cc0f8; }
.tx-ret { color: var(--amber); }
.tx-note { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: rgba(124, 88, 200, .2); font-size: 10.5px; line-height: 1.6; color: var(--purple-hi); white-space: nowrap; }
.tx-cursor { display: inline-block; width: .6em; height: 1.15em; vertical-align: text-bottom; background: var(--text-2); animation: tx-blink 1.1s steps(1) infinite; }
@keyframes tx-blink { 50% { opacity: 0; } }
.tx-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 16px clamp(14px, 2.4vw, 24px); }
.tx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tx-stats div { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.tx-stats dt { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tx-stats dd { margin-top: 6px; font: 600 15px/1.2 var(--font-mono); color: var(--text); }
.tx-batch-wrap { display: grid; justify-items: center; gap: 8px; margin: 0; }
.tx-batch { display: grid; grid-template-columns: repeat(16, 6px); gap: 1px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 7, 31, .55); }
.tx-batch i { --h: 0; --a: .3; width: 6px; height: 6px; border-radius: 1px; background: hsl(calc(215deg + var(--h) * 5deg) 85% 64% / var(--a)); transition: background-color .4s; }
.tx-batch-wrap figcaption { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--text-3); text-align: center; }
.tx-batch-wrap figcaption span { font-family: var(--font-mono); color: var(--text-2); }
.tx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.tx-steps li { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.tx-steps p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ---------- Entropy Core playground (/products/entropy-core#playground), driven by entropy-playground.js ---------- */
.ec-pipeline { display: grid; gap: 14px; }
.ec-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-btn svg { flex: none; width: 14px; height: 14px; }
.pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.ec-diagram-card { padding: 12px; }
.ec-svg { display: block; width: 100%; height: auto; }
.ec-edge { fill: none; stroke: rgba(150, 175, 235, .28); stroke-width: 1.6; transition: stroke .3s; }
.ec-edge.is-fault { stroke: #f87171; stroke-dasharray: 6 6; }
.ec-edge.is-off { stroke: rgba(150, 175, 235, .08); }
.ec-route { fill: none; stroke: none; }
.ec-node { cursor: pointer; outline: none; }
.ec-node rect { fill: #06173f; stroke: var(--line-2); stroke-width: 1.4; transition: fill .3s, stroke .3s; }
.ec-node--source rect { stroke: rgba(55, 131, 240, .6); }
.ec-node--test rect { stroke: rgba(74, 222, 128, .45); }
.ec-node--use rect { stroke: rgba(194, 141, 232, .45); }
.ec-node:hover rect { fill: #0a2152; }
.ec-node[aria-pressed="true"] rect { fill: #121f57; stroke: var(--purple); stroke-width: 2; }
.ec-node:focus-visible rect { stroke: var(--purple-hi); stroke-width: 3; }
.ec-node.is-fault rect { fill: rgba(248, 113, 113, .14); stroke: #f87171; }
.ec-t { font: 600 15px var(--font-sans); fill: var(--text); }
.ec-s { font: 400 12px var(--font-sans); fill: var(--text-3); }
.ec-node.is-fault .ec-s { fill: #fca5a5; }
.ec-svg--tall .ec-t { font-size: 20px; }
.ec-svg--tall .ec-s { font-size: 15px; }
.ec-p { fill: var(--soft-blue); }
.ec-p--b { fill: var(--purple); }
.ec-p--mixed { fill: #eef1f8; filter: drop-shadow(0 0 3px rgba(156, 192, 248, .9)); }
.ec-p--bad { fill: #f87171; }
.ec-flash { fill: none; stroke: #f87171; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ec-flash .6s ease-out forwards; }
@keyframes ec-flash { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }
.ec-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ec-log { display: grid; gap: 6px; margin-top: 10px; }
.ec-log li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ec-log time { flex: none; font: 11.5px/1.7 var(--font-mono); color: var(--text-3); }
.ec-log-bad { color: #fca5a5 !important; }
.ec-log-warn { color: var(--amber) !important; }
.ec-log-ok { color: #86efac !important; }
.ec-detail { display: grid; gap: 6px; justify-items: start; }
.ec-detail-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.ec-detail-text { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

.ec-lab .pg-card { display: grid; gap: 12px; align-content: start; }
.ec-sample-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ec-bits { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); image-rendering: pixelated; }
.ec-tests li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.ec-tests .pg-mono { font-size: 11.5px; color: var(--text-3); }
.ec-sample-sum { font-size: 13px; font-weight: 600; }
.ec-footnote { margin-top: 2px; }
.ec-seed { display: grid; gap: 8px; justify-items: start; }
.ec-seed code { color: var(--text); }
.ec-recreated { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .08); font-size: 12.5px; line-height: 1.5; color: #fca5a5; }
/* Brand kit callout: outlined in the accent colour */
.ec-takeaway { padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--soft-blue); background: rgba(55, 131, 240, .06); font-size: 14px; line-height: 1.6; color: var(--text-2); }
.ec-takeaway-title { font-weight: 600; color: var(--text); }
.ec-takeaway .tick-list { margin-top: 6px; }
.ec-takeaway .tick-list li { font-size: 14px; }

/* ---------- Product page extras (QEASM) ---------- */
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-head { margin-top: clamp(44px, 5vw, 64px); }
.step-head h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.25; margin: 12px 0 14px; }
.step-head p:last-child { color: var(--text-2); line-height: 1.65; }
.section-head--tight { margin-bottom: 20px; }
.section-lede + .tick-list, .section-lede + .callout { margin-top: 24px; }
.callout { padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--soft-blue); background: rgba(55, 131, 240, .06); font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.callout strong { color: var(--text); font-weight: 600; }
.mock-table--wrap td:first-child { white-space: normal; }

@media (max-width: 1180px) {
  .pg-fns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pg-summary, .pg-fn, .pg-mosca, .pg-ws-detail { grid-template-columns: minmax(0, 1fr); }
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-charts > :last-child { grid-column: 1 / -1; }
  .pg-charts--2 > :last-child { grid-column: auto; }
  .pg-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Side navigation becomes a scrolling row above the content */
  .pg-side-layout { grid-template-columns: minmax(0, 1fr); }
  .pg-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .pg-nav::-webkit-scrollbar { display: none; }
  .pg-nav button { flex: none; width: auto; }
  .pg-nav .pg-nav-sub { padding-left: 10px; }
  .pg-nav-root { display: none; }
  .tx-head { grid-template-columns: minmax(0, 1fr); }
  .tx-controls { justify-items: start; }
  .tx-panes { grid-template-columns: minmax(0, 1fr); }
  .tx-pane + .tx-pane { border-left: 0; border-top: 1px solid var(--line); }
  .tx-out { height: 260px; }
  .tx-foot { grid-template-columns: minmax(0, 1fr); }
  .tx-steps { grid-template-columns: minmax(0, 1fr); }
  .ec-under { grid-template-columns: minmax(0, 1fr); }
  .ec-lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ec-lab > :last-child { grid-column: auto; }
  .flow.flow--3 { grid-template-columns: minmax(0, 1fr); }
  .flow.flow--3 li { border-left: 0; }
  .flow.flow--3 li + li { border-top: 1px solid var(--line); }
  .flow.flow--3 li::after { display: none; }
}
@media (max-width: 640px) {
  .pg-status { order: 3; width: 100%; }
  .pg-rerun { order: 2; }
  .pg-fns, .pg-kpis, .pg-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-charts { grid-template-columns: minmax(0, 1fr); }
  .pg-charts > :last-child { grid-column: auto; }
  .pg-risks { grid-template-columns: minmax(0, 1fr); }
  .pg-stack { gap: 4px; }
  .tx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-stats div:last-child { grid-column: 1 / -1; }
  .tx-env { font-size: 11px; }
  /* Keep the policy switches on screen: narrower names, and the switch alone shows the state */
  .pg-name { min-width: 150px; }
  .pg-switch-wrap .pg-state { display: none; }
  .pg-queue-actions { width: 100%; }
  .pg-queue-actions .pg-btn { flex: 1; justify-content: center; }
  .pg-search { flex: 1 1 100%; }
  .pg-search input { width: 100%; }
  .pg-fromto { grid-template-columns: minmax(0, 1fr); }
  .pg-fromto-arrow { justify-self: center; transform: rotate(90deg); }
  .pg-tabs { gap: 5px; padding: 5px; }
  .pg-tabs [role="tab"] { flex-direction: column; justify-content: center; gap: 7px; padding: 10px 6px; text-align: center; }
  .pg-tab-ico { width: 30px; height: 30px; border-radius: 8px; }
  .pg-tab-ico svg { width: 16px; height: 16px; }
  .pg-tab-text b { justify-content: center; font-size: 12.5px; }
  .pg-tab-text small, .pg-ai-pill { display: none; }
  /* Timeline scrolls sideways; names and Mosca badges stay pinned on the left */
  .pg-gantt-inner { min-width: 560px; }
  .pg-g-row { grid-template-columns: 168px minmax(0, 1fr); }
  .pg-g-head > span:last-child { display: none; }
  .pg-ws { grid-template-columns: 168px minmax(0, 1fr); }
  .pg-ws-label { grid-row: 1; grid-column: 1; padding-bottom: 6px; }
  .pg-ws-exp { grid-row: 2; grid-column: 1; align-self: stretch; padding: 0 14px 11px 29px; }
  .pg-ws-track { grid-row: 1 / span 2; grid-column: 2; }
  .pg-ws-label, .pg-ws-exp, .pg-g-head > span:first-child { position: sticky; left: 0; z-index: 1; background: #03133a; }
  .pg-g-head > span:first-child { align-self: stretch; display: flex; align-items: flex-end; background: #071a42; }
  .pg-ws[aria-pressed="true"] { box-shadow: none; }
  .pg-ws[aria-pressed="true"] .pg-ws-label, .pg-ws[aria-pressed="true"] .pg-ws-exp { background: #0a2252; box-shadow: inset 2px 0 0 #3783f0; }
}

/* ---------- QAuth hub: case studies, controls and how often they were used ---------- */
.case { display: flex; flex-direction: column; }
.case[id], .control[id] { scroll-margin-top: calc(var(--header-h) + 72px); }
.case .case-meta, .control .control-platforms { font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.control .control-platforms { margin: -2px 0 12px; }
.case p + p { margin-top: 12px; }
.case .case-result { color: var(--text); }
.case-label, .control-label { display: block; margin-bottom: 2px; font: 500 10.5px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.case-result .case-label { color: var(--ok); }
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
.case-tags li { padding: 5px 9px; border-radius: 6px; background: rgba(55, 131, 240, .12); color: var(--accent-hi); font: 500 11px/1.2 var(--font-mono); letter-spacing: .04em; }
.case-note { margin-top: 24px; max-width: 760px; color: var(--text-3); font-size: 13.5px; line-height: 1.6; }

.usage { display: grid; gap: 12px; }
.usage li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 72px; gap: 18px; align-items: center; font-size: 15px; }
.usage a { color: var(--text); text-decoration: none; }
.usage a:hover { color: var(--accent-hi); }
.usage-bar { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; }
.usage-bar .track { fill: rgba(156, 192, 248, .1); }
.usage-bar .fill { fill: #3783f0; }
.usage-num { font: 500 13px/1 var(--font-mono); color: var(--text-2); text-align: right; }

.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.control { display: flex; flex-direction: column; padding: 24px; }
.control h3 { font-size: 1.12rem; margin-bottom: 8px; }
.control p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.control .control-use { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.control .control-cases { margin-top: auto; padding-top: 14px; font: 500 11.5px/1.5 var(--font-mono); letter-spacing: .06em; }
.control-cases a { color: var(--accent-hi); text-decoration: none; }
.control-cases a:hover { text-decoration: underline; }
.col-lists--stack { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.feature h4 a, .tick-list a { text-decoration: underline; text-decoration-color: rgba(156, 192, 248, .4); text-underline-offset: 4px; }
.tick-list a { color: var(--accent-hi); }
.feature h4 a:hover, .tick-list a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }
.cases--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vtab-panel .link-arrow { margin-top: 20px; }
/* A plain list with icons: reads as information, not as clickable cards */
.icon-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.icon-list li { display: flex; gap: 14px; align-items: flex-start; }
.icon-list .p-icon { width: 38px; height: 38px; border-radius: 11px; }
.icon-list .p-icon svg { width: 19px; height: 19px; }
.icon-list p { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.icon-list b { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.section-head h2 + .section-lede { margin-top: 18px; }
@media (max-width: 1180px) { .controls, .cases--4, .icon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .controls, .cases--4, .icon-list { grid-template-columns: minmax(0, 1fr); }
  .icon-list { gap: 20px; }
  .usage li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .usage-num { grid-row: 1; grid-column: 2; }
  .usage-bar { grid-column: 1 / -1; }
}

/* ==========================================================================
   Large screens (1080p and 4K monitors)
   --container grows with the window; here, fixed-width pieces grow with it and grids that have
   enough items add columns, so pages scroll less. Paragraphs keep a readable line length, and
   reading pages (blog posts, privacy, terms) keep a centred column instead of stretching.
   ========================================================================== */
@media (min-width: 1800px) {
  /* Tighter vertical rhythm: headings, heroes and the footer (--section-y is already at its cap) */
  .section-head { margin-bottom: 44px; }
  .hero { padding: calc(var(--header-h) + 64px) 0 80px; }
  .p-hero { padding-bottom: 48px; }
  .post-hero { padding-bottom: 40px; }
  .investors { padding-bottom: 44px; }
  .site-footer { padding-top: 56px; }
  .footer-top { padding-bottom: 40px; }

  .lede { max-width: 680px; }
  .p-tagline { max-width: 780px; }
  .section-head { max-width: max(940px, var(--h2) * 17.5); }
  .section-lede, .section-head.split > div:last-child { max-width: 640px; }
  .hero-visual { max-width: 720px; }
  .p-mark { max-width: 560px; }
  .ring-wrap { max-width: 580px; }
  .prose > p, .cta-copy > p, .investor-copy > p { max-width: 72ch; }

  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cap-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature-grid:is(:has(> :nth-child(4):last-child), :has(> :nth-child(8):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature-grid:is(:has(> :nth-child(5):last-child), :has(> :nth-child(6):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industry-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blog-grid:has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Collapsed case studies show two full rows */
  .js .cases.is-collapsed .case:nth-child(-n+8) { display: block; }

  .container.post-head, .container.post-layout { max-width: calc(1360px + var(--gutter) * 2); }

  /* Long single-column lists reflow into two columns */
  .modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .module[open] { grid-column: 1 / -1; }
  .split--list { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .split--list .tick-list, .vtabs [role="tabpanel"] .tick-list { columns: 2; column-gap: 48px; }
  .split--list .tick-list li, .vtabs [role="tabpanel"] .tick-list li { break-inside: avoid; }
  .split--list .faq-a { max-width: none; }
  .vtabs { grid-template-columns: 400px minmax(0, 1fr); }
  .vtabs [role="tablist"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Things that scale with their width would otherwise grow taller: keep them in proportion */
  .ec-svg--wide { max-width: 1400px; margin-inline: auto; }
}
@media (min-width: 2400px) {
  .blog-grid:has(> :nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cases { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cases--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .js .cases.is-collapsed .case:nth-child(-n+10) { display: block; }
}