/* agilepq.com — the story layer: cinematic acts, light, gradients, drawn scenes.
   Static first: every rule below leaves a complete, readable page without JavaScript.
   Motion is added only under html.apq-motion (not reduced-motion) and html.apq-live (hydrated). */

:root {
  --st-night: #030a1d;
  --st-ink: #f1f4fa;
  --st-blue: #062af3;
  --st-blue-2: #3d73ff;
  --st-blue-3: #82a9fd;
  --st-cyan: #5fd4ff;
  --st-coral: #f87966;
  --st-coral-2: #ffa192;
  --st-amber: #f9b64f;
  --st-amber-2: #fece8c;
  --st-violet: #7b5cff;
  --st-hdr: 88px;
  --st-pad-x: max(var(--layout-inset), calc((100vw - 1280px) / 2));
  --st-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
  --st-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 860px) { :root { --st-hdr: 72px; } }

.site { overflow-x: clip; background: var(--st-night); }
.site .apq-frame, .site.apq-frame { background: var(--st-night); }

/* film grain over everything: texture, not noise */
.fx-grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media print { .fx-grain { display: none; } }

/* ---------- gradient text (a solid colour stays underneath) ---------- */
.gt { color: var(--st-blue-3); }
.gt--danger { color: var(--st-coral-2); }
.gt--ahead { color: var(--st-amber-2); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gt { background-image: linear-gradient(100deg, #ffffff 0%, #b9cdff 28%, #6f97ff 62%, #3d73ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: 0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .gt--danger { background-image: linear-gradient(100deg, #ffd2c9 0%, #ff8f7d 42%, #f8654f 72%, #f9b64f 100%); }
  .gt--ahead { background-image: linear-gradient(100deg, #fff1d6 0%, #fece8c 36%, #f9b64f 70%, #ff8f7d 100%); }
}
.keep { white-space: nowrap; }

/* ---------- aurora: soft moving light behind every act ---------- */
.aurora { position: absolute; display: block; width: 72vmax; height: 72vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--au, rgba(6,42,243,0.5)), rgba(0,0,0,0) 100%); opacity: var(--au-o, 1); will-change: transform; }
.aurora--a { left: -24vmax; top: -12vmax; }
.aurora--b { right: -26vmax; top: 22%; width: 64vmax; height: 64vmax; }
.aurora--c { left: 28%; bottom: -30vmax; width: 56vmax; height: 56vmax; --au-o: 0.7; }
html.apq-motion .aurora--a { animation: au-drift-a 28s var(--st-ease-io) infinite alternate; }
html.apq-motion .aurora--b { animation: au-drift-b 34s var(--st-ease-io) infinite alternate; }
html.apq-motion .aurora--c { animation: au-drift-c 40s var(--st-ease-io) infinite alternate; }
@keyframes au-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } }
@keyframes au-drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-10vmax, -5vmax, 0) scale(0.92); } }
@keyframes au-drift-c { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(-6vmax, -8vmax, 0) scale(1.1); } }

/* tones */
.act--deep .aurora--a, .phero .aurora--a { --au: rgba(6,42,243,0.42); }
.act--deep .aurora--b, .phero .aurora--b { --au: rgba(28,51,97,0.75); }
.act--deep .aurora--c, .phero .aurora--c { --au: rgba(61,115,255,0.22); }
.act--danger .aurora--a { --au: rgba(248,101,79,0.26); left: auto; right: -20vmax; top: -16vmax; }
.act--danger .aurora--b { --au: rgba(122,29,58,0.55); left: -26vmax; right: auto; top: 30%; }
.act--danger .aurora--c { --au: rgba(6,42,243,0.20); }
.act--quantum .aurora--a { --au: rgba(249,182,79,0.20); left: auto; right: -22vmax; top: -8vmax; }
.act--quantum .aurora--b { --au: rgba(91,43,214,0.40); left: -24vmax; right: auto; top: 26%; }
.act--quantum .aurora--c { --au: rgba(6,42,243,0.26); }
.act--signal .aurora--a { --au: rgba(6,42,243,0.60); }
.act--signal .aurora--b { --au: rgba(40,170,255,0.22); }
.act--signal .aurora--c { --au: rgba(130,169,253,0.20); }

/* ---------- the story and its acts ---------- */
.story { position: relative; }
.act { position: relative; padding: clamp(96px, 12vh, 168px) var(--st-pad-x); color: var(--st-ink); }
.act__bg { position: absolute; inset: -18vh 0; z-index: 0; overflow-x: clip; pointer-events: none; }
@supports not (overflow-x: clip) { .act__bg { inset: 0; overflow: hidden; } }
.act__grid { position: absolute; inset: 18vh 0; display: block; opacity: 0.5;
  background-image: linear-gradient(rgba(130,169,253,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(130,169,253,0.07) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%); }
.act__inner { position: relative; z-index: 1; max-width: var(--layout-page); margin: 0 auto; }
.act__inner--wide { max-width: 1440px; }
.act__head { max-width: 1040px; margin-bottom: clamp(48px, 7vw, 104px); }
.act__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.act__label { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font: 700 13px/1.2 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-blue-3); }
.act__head--center .act__label { justify-content: center; }
.act__n { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; color: var(--ink); }
.act__rule { display: inline-block; width: 56px; height: 1px; background: linear-gradient(90deg, var(--st-blue-2), rgba(61,115,255,0)); }
.act--danger .act__label { color: var(--st-coral-2); }
.act--danger .act__rule { background: linear-gradient(90deg, var(--st-coral), rgba(248,121,102,0)); }
.act--quantum .act__label { color: var(--st-amber-2); }
.act--quantum .act__rule { background: linear-gradient(90deg, var(--st-amber), rgba(249,182,79,0)); }
.act__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.6vw, 92px); line-height: 0.98; letter-spacing: -0.022em; color: var(--st-ink); text-wrap: balance; max-width: 19ch; }
.act__head--center .act__title { margin-left: auto; margin-right: auto; }
.act__lede { margin: 32px 0 0; max-width: 62ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.act__head--center .act__lede { margin-left: auto; margin-right: auto; }
.act__note { margin: clamp(40px, 5vw, 72px) 0 0; max-width: 66ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
.act__note--strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--st-ink); }
.split .act__note { margin-top: 0; }
.act__fine { margin: 32px 0 0; max-width: 80ch; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
.act__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.act__head--center + .act__cta, .act__cta--center { justify-content: center; }
@media (max-width: 720px) { .act { padding-top: 96px; padding-bottom: 96px; } .act__label { margin-bottom: 20px; } .act__lede { margin-top: 24px; } }

/* ---------- reveal on scroll ---------- */
html.apq-motion .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1000ms var(--st-ease), transform 1100ms var(--st-ease); transition-delay: var(--rv-d, 0ms); }
html.apq-motion .rv.is-in { opacity: 1; transform: none; }
/* if the scripts never arrive, everything shows anyway */
html.apq-motion:not(.apq-live) .rv { animation: rv-fallback 600ms var(--st-ease) 2.6s forwards; }
@keyframes rv-fallback { to { opacity: 1; transform: none; } }
@media print { html.apq-motion .rv { opacity: 1 !important; transform: none !important; } }

/* ---------- stats ---------- */
.stats { display: grid; gap: clamp(28px, 3vw, 48px); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .stats--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .stats--4, .stats--2 { grid-template-columns: minmax(0, 1fr); } }
.stat { position: relative; margin: 0; padding-top: 28px; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(130,169,253,0.55), rgba(130,169,253,0.08) 70%, rgba(130,169,253,0)); }
.stat::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; border-radius: 2px; background: var(--st-blue-2); box-shadow: 0 0 16px rgba(61,115,255,0.8); }
.stat--exposed::before { background: linear-gradient(90deg, rgba(248,121,102,0.6), rgba(248,121,102,0.08) 70%, rgba(248,121,102,0)); }
.stat--exposed::after { background: var(--st-coral); box-shadow: 0 0 16px rgba(248,121,102,0.8); }
.stat--ahead::before { background: linear-gradient(90deg, rgba(249,182,79,0.6), rgba(249,182,79,0.08) 70%, rgba(249,182,79,0)); }
.stat--ahead::after { background: var(--st-amber); box-shadow: 0 0 16px rgba(249,182,79,0.8); }
.stat__value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.18em; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 4.6vw, 72px); line-height: 0.95; letter-spacing: -0.03em; color: var(--st-ink); font-variant-numeric: lining-nums tabular-nums; }
.stat--xl .stat__value { font-size: clamp(64px, 8.4vw, 148px); }
.stat--lg .stat__value { font-size: clamp(40px, 4vw, 60px); }
.stat__num { color: var(--st-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__num { background-image: linear-gradient(180deg, #ffffff 0%, #d6e2ff 45%, #82a9fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .stat--exposed .stat__num { background-image: linear-gradient(180deg, #ffe4dd 0%, #ffa192 50%, #f8654f 100%); }
  .stat--ahead .stat__num { background-image: linear-gradient(180deg, #fff3dc 0%, #fece8c 50%, #f9b64f 100%); }
}
.stat__unit { font-size: 0.34em; font-weight: 700; letter-spacing: -0.005em; color: var(--ink-muted); }
.stat__unit--pre { font-size: 0.6em; margin-right: -0.08em; color: var(--ink-muted); }
.stat__value .apq-claim { align-self: flex-start; }
.stat--xl .stat__value { row-gap: 0.06em; }
.stat--xl .stat__unit { order: 3; flex-basis: 100%; font-size: 0.3em; letter-spacing: 0; color: var(--st-ink); }
.stat--xl .stat__unit--pre { order: 0; flex-basis: auto; }
.stat__cap { margin: 18px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }

/* ---------- glass card ---------- */
.gcard { position: relative; overflow: hidden; padding: clamp(24px, 2.4vw, 36px); border-radius: 22px; color: var(--st-ink);
  background: linear-gradient(160deg, rgba(61,115,255,0.12) 0%, rgba(15,31,63,0.62) 42%, rgba(8,18,44,0.72) 100%);
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16), inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px -30px rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.gcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms var(--st-ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(130,169,253,0.16), rgba(130,169,253,0) 60%); }
.gcard:hover::before { opacity: 1; }
.gcard--danger { background: linear-gradient(160deg, rgba(248,121,102,0.14) 0%, rgba(30,16,36,0.66) 42%, rgba(12,12,32,0.76) 100%); box-shadow: inset 0 0 0 1px rgba(248,121,102,0.2), inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 80px -30px rgba(0,0,0,0.7); }
.gcard--ahead { background: linear-gradient(160deg, rgba(249,182,79,0.12) 0%, rgba(26,22,38,0.66) 42%, rgba(10,14,34,0.76) 100%); box-shadow: inset 0 0 0 1px rgba(249,182,79,0.2), inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 80px -30px rgba(0,0,0,0.7); }
.gcard--signal { background: linear-gradient(160deg, rgba(6,42,243,0.34) 0%, rgba(14,30,80,0.7) 50%, rgba(8,18,44,0.78) 100%); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.3), inset 0 1px 0 rgba(255,255,255,0.08), 0 30px 80px -24px rgba(6,42,243,0.45); }
.gcard__kicker { margin: 0 0 14px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-blue-3); }
.gcard--danger .gcard__kicker { color: var(--st-coral-2); }
.gcard--ahead .gcard__kicker { color: var(--st-amber-2); }
.gcard__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.18; letter-spacing: -0.01em; color: var(--st-ink); text-wrap: balance; }
.gcard p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.gcard p:last-child { margin-bottom: 0; }
.gcard ul { margin: 0; padding-left: 1.1em; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
.gcard li + li { margin-top: 8px; }
.gcard strong { color: var(--st-ink); font-weight: 600; }
.cards { display: grid; gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: minmax(0, 1fr); } }
* + .cards, .cards + * { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- layout helpers ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(48px, 6vw, 96px); }
.split--top { align-items: start; }
.split--wide-a { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--wide-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 960px) { .split, .split--wide-a, .split--wide-b { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 18px; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: var(--ink-muted); }
.prose p strong { color: var(--st-ink); font-weight: 600; }
.prose h3 { margin: 40px 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--st-ink); }
.prose h3:first-child { margin-top: 0; }
.prose a, .act__note a, .gcard a:not(.apq-btn) { color: var(--st-blue-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose ul { margin: 0 0 18px; padding-left: 1.2em; color: var(--ink-muted); font-size: 17px; line-height: 1.6; }

/* ---------- pull quote ---------- */
.pull { margin: 0; }
.pull blockquote { position: relative; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.14; letter-spacing: -0.015em; color: var(--st-ink); text-wrap: balance; }
.pull__mark { display: block; height: 0.55em; margin-bottom: 0.15em; font-size: 2.4em; line-height: 1; color: var(--st-blue-2); }
.pull--ahead .pull__mark { color: var(--st-amber); }
.pull--danger .pull__mark { color: var(--st-coral); }
.pull figcaption { margin-top: 22px; font: 500 13px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- the globe hero ---------- */
.ghero { position: relative; margin-top: calc(var(--st-hdr) * -1); padding: var(--st-hdr) var(--st-pad-x) 0; min-height: max(100svh, 760px); display: flex; flex-direction: column; overflow: hidden; color: var(--st-ink);
  background: radial-gradient(1100px 820px at 74% 48%, rgba(6,42,243,0.30), rgba(6,42,243,0) 70%), radial-gradient(900px 600px at 0% 100%, rgba(28,51,97,0.65), rgba(0,0,0,0) 70%), var(--st-night); }
.ghero__bg { position: absolute; inset: 0; pointer-events: none; }
.ghero .aurora--a { --au: rgba(6,42,243,0.34); left: -30vmax; top: -30vmax; }
.ghero .aurora--b { --au: rgba(248,101,79,0.10); right: -10vmax; top: auto; bottom: -40vmax; }
.ghero .aurora--c { --au: rgba(61,115,255,0.18); left: 40%; top: -20vmax; bottom: auto; }
.ghero__stars { position: absolute; inset: 0; opacity: 0.55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 72%, #cfe0ff, transparent), radial-gradient(1.5px 1.5px at 58% 12%, #fff, transparent), radial-gradient(1px 1px at 86% 84%, #cfe0ff, transparent), radial-gradient(1px 1px at 44% 40%, #9fb8ff, transparent), radial-gradient(1px 1px at 72% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 88%, #fff, transparent), radial-gradient(1px 1px at 92% 8%, #cfe0ff, transparent);
  background-size: 640px 520px; }
.ghero__globe { position: absolute; z-index: 1; right: max(-16vw, -260px); top: 50%; width: min(1180px, 112vh, 96vw); aspect-ratio: 1; transform: translate3d(0, -46%, 0); pointer-events: none; }
.ghero__globe::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 40% 38%, rgba(61,115,255,0.20), rgba(6,42,243,0) 64%); filter: blur(10px); }
.ghero__poster, .ghero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ghero__poster { object-fit: contain; transition: opacity 900ms linear; }
.ghero__canvas { opacity: 0; transition: opacity 900ms linear; }
.ghero__globe.is-ready .ghero__canvas { opacity: 1; }
.ghero__globe.is-ready .ghero__poster { opacity: 0; }
.ghero__inner { position: relative; z-index: 2; flex: 1 0 auto; width: 100%; max-width: var(--layout-page); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 5vh, 96px) 0 clamp(40px, 6vh, 112px); }
.ghero__copy { max-width: 820px; }
.ghero__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(20px, 3.4vh, 32px); padding: 9px 16px 9px 12px; border-radius: 999px; font: 600 12px/1 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
  background: rgba(10,22,52,0.6); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ghero__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--st-coral); box-shadow: 0 0 10px var(--st-coral); }
html.apq-motion .ghero__live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--st-coral); animation: st-ping 2.2s var(--st-ease) infinite; }
@keyframes st-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.ghero__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(46px, min(6vw, 10.4vh), 104px); line-height: 0.93; letter-spacing: -0.028em; color: var(--st-ink); text-wrap: balance; }
.ghero__lede { margin: clamp(20px, 3.4vh, 32px) 0 0; max-width: 56ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.ghero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4.4vh, 44px); }
.ghero__ticker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(28px, 5vh, 80px) 0 0; max-width: 980px; border-radius: 20px; overflow: hidden;
  background: rgba(8,18,44,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16), 0 30px 80px -30px rgba(0,0,0,0.8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.ghero__tick { padding: 20px 24px 22px; }
.ghero__tick + .ghero__tick { box-shadow: inset 1px 0 0 rgba(130,169,253,0.14); }
.ghero__tick dt { margin: 0 0 10px; font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.ghero__tick dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.3vw, 34px); line-height: 1; letter-spacing: -0.02em; color: var(--st-ink); white-space: nowrap; }
.ghero__tick:last-child dd { color: var(--st-amber-2); }
.ghero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; }
.ghero__scroll-line { position: relative; display: block; width: 1px; height: 44px; overflow: hidden; background: rgba(130,169,253,0.2); }
html.apq-motion .ghero__scroll-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--st-blue-3); animation: st-drip 2s var(--st-ease-io) infinite; }
@keyframes st-drip { to { top: 100%; } }
@media (max-height: 980px) and (min-width: 721px) { .ghero__scroll { display: none; } }
@media (max-width: 1023px) {
  .ghero__globe { right: -30vw; top: auto; bottom: -34vw; width: 118vw; transform: none; opacity: 0.85; }
  .ghero__inner { justify-content: flex-start; padding-top: 48px; padding-bottom: 46vw; }
}
@media (max-width: 720px) {
  .ghero__ticker { grid-template-columns: minmax(0, 1fr); }
  .ghero__tick + .ghero__tick { box-shadow: inset 0 1px 0 rgba(130,169,253,0.14); }
  .ghero__tick { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 18px; }
  .ghero__tick dt { margin: 0; }
  .ghero__tick dd { font-size: 24px; }
  .ghero__scroll { display: none; }
  .ghero__inner { padding-bottom: 60vw; }
}

/* ---------- inner-page hero ---------- */
.phero { position: relative; margin-top: calc(var(--st-hdr) * -1); padding: calc(var(--st-hdr) + clamp(48px, 9vh, 112px)) var(--st-pad-x) clamp(72px, 10vh, 128px); overflow: hidden; color: var(--st-ink);
  background: radial-gradient(1000px 700px at 80% 40%, rgba(6,42,243,0.28), rgba(6,42,243,0) 70%), var(--st-night); }
.phero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.phero .act__grid { inset: 0; }
.phero__inner { position: relative; z-index: 1; max-width: var(--layout-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.phero__inner:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.phero__copy { max-width: 820px; }
.phero__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 5.8vw, 96px); line-height: 0.95; letter-spacing: -0.026em; color: var(--st-ink); text-wrap: balance; }
.phero__lede { margin: 30px 0 0; max-width: 58ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.phero .ghero__actions { margin-top: 40px; }
.phero__art { position: relative; }
.phero__art svg { display: block; width: 100%; height: auto; }
.phero__art .apq-btn svg, .phero__art .apq-arrow, .phero__art .apq-field svg, .phero__art .apq-notice svg { display: inline-block; width: auto; height: auto; }
.phero--short { padding-bottom: clamp(48px, 7vh, 88px); }
.phero--short + .site-sheet { margin-top: 0; }
.contact-form { padding: clamp(22px, 2.6vw, 34px); }
.phero--danger { background: radial-gradient(1000px 700px at 80% 40%, rgba(248,101,79,0.16), rgba(0,0,0,0) 70%), radial-gradient(800px 600px at 0% 100%, rgba(122,29,58,0.4), rgba(0,0,0,0) 70%), var(--st-night); }
.phero--ahead { background: radial-gradient(1000px 700px at 80% 40%, rgba(249,182,79,0.14), rgba(0,0,0,0) 70%), radial-gradient(800px 600px at 0% 100%, rgba(91,43,214,0.32), rgba(0,0,0,0) 70%), var(--st-night); }
@media (max-width: 960px) { .phero__inner { grid-template-columns: minmax(0, 1fr); } .phero__art { max-width: 640px; } }

/* ---------- drawn scenes (shared) ---------- */
.scene { position: relative; margin: 0; }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.scene text { font-family: var(--font-text); }
.scene__cap { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 72ch; }
.scene__cap .apq-claim { font-size: 11px; }
.scene__state { display: block; padding-left: 22px; position: relative; }
.scene__state + .scene__state { margin-top: 6px; }
.scene__state::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; border-radius: 2px; background: var(--st-blue-2); }
.scene__state--b::before { background: var(--st-coral); }
.scene__state--c::before { background: var(--st-amber); }
.scene--ai .scene__state--c::before { background: var(--st-blue-3); }
/* live scenes: one state at a time, cross-fading */
.scene.is-live .scene__cap { display: grid; min-height: 3em; }
.scene.is-live .scene__state { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--st-ease), transform 500ms var(--st-ease); font-size: clamp(17px, 1.4vw, 21px); color: var(--st-ink); }
.scene.is-live .scene__state.is-on { opacity: 1; transform: none; }
.pin { position: relative; margin-top: clamp(24px, 3vw, 48px); padding: clamp(18px, 3vw, 44px) clamp(18px, 3vw, 44px) clamp(22px, 3vw, 40px); border-radius: 28px; background: linear-gradient(180deg, rgba(10,22,52,0.6), rgba(5,12,32,0.4)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12), 0 40px 120px -40px rgba(0,0,0,0.8); }
@media (max-width: 640px) { .pin { margin-left: calc(var(--layout-inset) * -0.5); margin-right: calc(var(--layout-inset) * -0.5); border-radius: 20px; } }
.pin.is-pinned .scene__cap { margin-top: 12px; }
.pin__progress { position: absolute; left: clamp(18px, 3vw, 44px); right: clamp(18px, 3vw, 44px); bottom: 12px; height: 2px; border-radius: 2px; background: rgba(130,169,253,0.12); overflow: hidden; display: none; }
.pin.is-pinned .pin__progress { display: block; }
.pin__progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--st-blue-2), var(--st-amber), var(--st-coral)); }

/* --- harvest now, decrypt later --- */
.hndl-clock__label { font: 500 12px var(--font-mono); letter-spacing: 0.3em; fill: #92a5c8; }
.hndl-year { font-family: var(--font-display); font-weight: 800; font-size: 64px; letter-spacing: -0.02em; fill: #f1f4fa; transition: fill 600ms var(--st-ease); font-variant-numeric: tabular-nums; }
.hndl-clock__q { font-size: 15px; fill: #b0bed8; }
.hndl-node rect { fill: rgba(16,32,72,0.92); stroke: #3d73ff; stroke-width: 1.5; }
.hndl-node--op rect { stroke: #82a9fd; }
.hndl-node__line { stroke: #82a9fd; stroke-width: 2; fill: none; stroke-linecap: round; }
.hndl-node__led { fill: #5fd4ff; }
html.apq-motion .hndl-node__led { animation: st-blink 1.6s steps(2, jump-none) infinite; }
@keyframes st-blink { 50% { opacity: 0.25; } }
.hndl-node__t { font-size: 19px; font-weight: 700; fill: #f1f4fa; }
.hndl-node__s { font: 500 12px var(--font-mono); fill: #92a5c8; }
.hndl-link { fill: none; stroke-width: 3; }
.hndl-pkt { transform: translate(calc(250px + var(--i) * 140px), 270px); }
.hndl-pkt rect { fill: #0b1838; stroke: #3d73ff; stroke-width: 1.5; }
.hndl-pkt text { font: 600 12px var(--font-mono); fill: #9ab9ff; }
html.apq-motion .scene--hndl .hndl-pkt { animation: hndl-run 7.2s linear infinite; animation-delay: calc(var(--i) * -1.2s); }
@keyframes hndl-run {
  0% { transform: translate(230px, 270px); opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { transform: translate(970px, 270px); opacity: 0; }
}
.hndl-tap__line { stroke: #f87966; stroke-width: 2; stroke-dasharray: 3 7; fill: none; }
html.apq-motion .hndl-tap__line { animation: st-march 0.9s linear infinite; }
@keyframes st-march { to { stroke-dashoffset: -20; } }
.hndl-tap__ring { fill: rgba(248,121,102,0.12); stroke: #f87966; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
html.apq-motion .hndl-tap__ring { animation: hndl-ring 2.2s var(--st-ease) infinite; }
@keyframes hndl-ring { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.hndl-tap__dot { fill: #f87966; }
.hndl-tap__t { font: 600 13px var(--font-mono); letter-spacing: 0.04em; fill: #ffa192; }
.hndl-vault__body { stroke: rgba(248,121,102,0.55); stroke-width: 1.5; transition: stroke 600ms var(--st-ease); }
.hndl-vault__t { font-size: 15px; fill: #b0bed8; }
.hndl-row { transition: opacity 400ms var(--st-ease); }
.hndl-row__bg { fill: rgba(248,121,102,0.07); transition: fill 600ms var(--st-ease); }
.hndl-row__c, .hndl-row__p { font: 500 12px var(--font-mono); transition: opacity 500ms var(--st-ease); }
.hndl-row__c { fill: #b0bed8; }
.hndl-row__p { fill: #ffd2c9; font-weight: 700; opacity: 0; }
.scene--hndl.is-live .hndl-row { opacity: 0; }
.scene--hndl.is-live .hndl-row.is-in { opacity: 1; }
.scene--hndl.is-read .hndl-row__c { opacity: 0; }
.scene--hndl.is-read .hndl-row__p { opacity: 1; }
.scene--hndl.is-read .hndl-row__bg { fill: rgba(248,121,102,0.24); }
.scene--hndl.is-read .hndl-year { fill: #ff8f7d; }
.scene--hndl.is-read .hndl-vault__body { stroke: #f87966; }

/* --- qubit estimates --- */
.qc-tick line { stroke: rgba(130,169,253,0.12); stroke-width: 1; }
.qc-tick text { font: 500 13px var(--font-mono); fill: #92a5c8; }
.qc-axis { font: 500 11px var(--font-mono); letter-spacing: 0.2em; fill: #92a5c8; }
.qc-bar--2019 .qc-bar__r { fill: url(#qc-amber); }
.qc-bar--2025 .qc-bar__r { fill: url(#qc-coral); }
.qc-bar__r { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1400ms var(--st-ease); }
.qc-bar__v { font-family: var(--font-display); font-weight: 800; font-size: 22px; fill: #f1f4fa; }
.qc-bar__s { font: 500 12px var(--font-mono); fill: #b0bed8; }
.qc-arrow path { fill: none; stroke: #b0bed8; stroke-width: 1.5; stroke-dasharray: 4 5; }
.qc-arrow text { font-size: 15px; font-weight: 700; fill: #fece8c; }
.qc-now line { stroke: #3d73ff; stroke-width: 2; stroke-dasharray: 6 6; }
.qc-now circle { fill: #82a9fd; }
.qc-now text { font: 600 12px var(--font-mono); fill: #82a9fd; }
html.apq-live.apq-motion .scene--qubits:not(.is-in) .qc-bar__r { transform: scaleY(0.02); }
.scene--qubits .qc-bar--2025 .qc-bar__r { transition-delay: 350ms; }

/* --- AI and forged data --- */
.ai-lane__line { fill: none; stroke-width: 2; }
.ai-sensor { fill: #0b1838; stroke: #3d73ff; stroke-width: 1.5; }
.ai-sensor__t { font: 600 12px var(--font-mono); fill: #9ab9ff; }
.ai-pill rect { fill: rgba(61,115,255,0.2); stroke: #3d73ff; stroke-width: 1.2; }
.ai-pill text { font: 600 12px var(--font-mono); fill: #dfe8ff; }
html.apq-motion .scene--ai .ai-pill > * { animation: ai-flow 2.4s linear infinite; animation-delay: calc(var(--k) * -0.8s - var(--l) * 0.37s); }
@keyframes ai-flow { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(140px); opacity: 0; } }
.ai-attacker circle { fill: rgba(248,121,102,0.16); stroke: #f87966; stroke-width: 2; }
.ai-attacker > path:not(.ai-attacker__path) { stroke: #f87966; stroke-width: 2.5; stroke-linecap: round; }
.ai-attacker text { font-size: 15px; font-weight: 700; fill: #ffa192; }
.ai-attacker__path { fill: none; stroke: #f87966; stroke-width: 1.5; stroke-dasharray: 4 6; }
.ai-forged rect { fill: rgba(248,121,102,0.22); stroke: #f87966; stroke-width: 1.5; }
.ai-forged text { font: 700 12px var(--font-mono); fill: #ffd2c9; }
.ai-forged__x { stroke: #f1f4fa; stroke-width: 3; stroke-linecap: round; transition: opacity 400ms var(--st-ease); }
.ai-forged { transition: opacity 500ms var(--st-ease); }
.ai-shield line { stroke: #82a9fd; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(61,115,255,0.9)); }
.ai-shield text { font-size: 14px; font-weight: 700; fill: #82a9fd; }
.ai-shield, .ai-attacker, .ai-out__v { transition: opacity 500ms var(--st-ease); }
.ai-model__halo { opacity: 0.9; }
.ai-model__hex { fill: rgba(6,42,243,0.28); stroke: #82a9fd; stroke-width: 2; transition: stroke 500ms var(--st-ease), fill 500ms var(--st-ease); }
.ai-model__net { fill: none; stroke: rgba(130,169,253,0.6); stroke-width: 1.5; }
html.apq-motion .ai-model__net { animation: st-blink 2.4s ease-in-out infinite; }
.ai-model__t { font-size: 16px; font-weight: 700; fill: #f1f4fa; }
.ai-out rect { fill: #0b1838; stroke: #3d73ff; stroke-width: 1.5; transition: stroke 500ms var(--st-ease), fill 500ms var(--st-ease); }
.ai-out__k { font: 500 12px var(--font-mono); letter-spacing: 0.2em; fill: #92a5c8; }
.ai-out__v { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: 0.02em; }
.ai-out__v--hold { fill: #82a9fd; }
.ai-out__v--open { fill: #ff8f7d; opacity: 0; }
.scene--ai[data-phase="a"] .ai-attacker, .scene--ai[data-phase="a"] .ai-forged, .scene--ai[data-phase="a"] .ai-shield { opacity: 0; }
.scene--ai[data-phase="b"] .ai-shield, .scene--ai[data-phase="b"] .ai-forged__x, .scene--ai[data-phase="b"] .ai-out__v--hold { opacity: 0; }
.scene--ai[data-phase="b"] .ai-out__v--open { opacity: 1; }
.scene--ai[data-phase="b"] .ai-out rect { stroke: #f87966; fill: rgba(248,121,102,0.12); }
.scene--ai[data-phase="b"] .ai-model__hex { stroke: #f87966; fill: rgba(248,121,102,0.16); }
.scene--ai[data-phase="c"] .ai-forged, .scene--ai:not([data-phase]) .ai-forged { opacity: 0.55; }

/* --- memory on a Class 1 device --- */
.scene--mem svg { overflow: hidden; }
.mem-h { font: 500 12px var(--font-mono); letter-spacing: 0.24em; fill: #92a5c8; }
.mem-chip { fill: rgba(12,26,60,0.6); stroke: rgba(130,169,253,0.35); stroke-width: 1.5; }
.mem-k { font-size: 16px; font-weight: 700; fill: #f1f4fa; }
.mem-track { fill: rgba(130,169,253,0.07); stroke: rgba(130,169,253,0.32); stroke-width: 1; }
.mem-tls__min { fill: rgba(248,121,102,0.6); }
.mem-v { font-size: 14px; }
.mem-v--tls { fill: #ffa192; font-weight: 600; }
.mem-v--slim { fill: #9ab9ff; font-weight: 700; }
.mem-slim { filter: drop-shadow(0 0 10px rgba(61,115,255,0.85)); }
.mem-spill__line, .mem-spill__head { fill: none; stroke: #f87966; stroke-width: 2; }
.mem-spill__line { stroke-dasharray: 5 6; }
.mem-spill text { font-size: 17px; font-weight: 700; fill: #ffa192; }
.mem-spill text.mem-spill__s { font-size: 13px; font-weight: 500; fill: #b0bed8; }
.mem-tls, .mem-tls__min, .mem-slim { transform-box: fill-box; transform-origin: 0 50%; }
.scene--mem.is-live .mem-tls, .scene--mem.is-live .mem-tls__min { transform: scaleX(var(--tls, 0)); }
.scene--mem.is-live .mem-slim { transform: scaleX(var(--slim, 0)); }
.scene--mem.is-live .mem-v--tls, .scene--mem.is-live .mem-spill { opacity: 0; transition: opacity 500ms var(--st-ease); }
.scene--mem.is-live .mem-v--slim { opacity: 0; transition: opacity 500ms var(--st-ease); }
.scene--mem.is-tls .mem-v--tls, .scene--mem.is-spill .mem-spill { opacity: 1; }
.scene--mem.is-slim .mem-v--slim { opacity: 1; }
html.apq-motion .scene--mem.is-spill .mem-spill__line { animation: st-march 0.9s linear infinite; }

/* ---------- incidents ---------- */
.incidents { position: relative; margin: 0 calc(var(--st-pad-x) * -1); }
.incidents__track { display: flex; gap: 20px; padding: 8px var(--st-pad-x) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--st-pad-x); scrollbar-width: thin; scrollbar-color: rgba(248,121,102,0.5) transparent; }
.incidents.is-scrub .incidents__track { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
.incident { position: relative; flex: 0 0 auto; width: min(400px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; padding: 28px 28px 22px; border-radius: 22px; color: var(--st-ink);
  background: linear-gradient(165deg, rgba(248,121,102,0.13) 0%, rgba(24,14,34,0.72) 46%, rgba(10,12,30,0.82) 100%);
  box-shadow: inset 0 0 0 1px rgba(248,121,102,0.18), inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 80px -30px rgba(0,0,0,0.8); }
.incident__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.incident__year { font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -0.03em; color: var(--st-coral-2); font-variant-numeric: tabular-nums; }
.incident__tag { padding: 6px 12px; border-radius: 999px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #ffd2c9; background: rgba(248,121,102,0.14); box-shadow: inset 0 0 0 1px rgba(248,121,102,0.3); }
.incident__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.12; letter-spacing: -0.01em; }
.incident__body { margin: 0; flex: 1 0 auto; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.incident__trace { display: block; width: 100%; height: 40px; margin-top: 20px; }
.incident__trace path { fill: none; stroke: #f87966; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 0; opacity: 0.85; }
html.apq-motion .incident__trace path { animation: inc-trace 3.2s linear infinite; }
@keyframes inc-trace { 0% { stroke-dashoffset: 600; } 60%, 100% { stroke-dashoffset: 0; } }
.incident:nth-child(2n) .incident__trace path { animation-delay: -1.1s; }
.incident:nth-child(3n) .incident__trace path { animation-delay: -2.2s; }
.incidents__hint { display: none; }

/* ---------- SLiM block ---------- */
.slimgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.slimgrid__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
@media (max-width: 1100px) { .slimgrid { grid-template-columns: minmax(0, 1fr); } .slimgrid__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .slimgrid__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .slimgrid__stats { grid-template-columns: minmax(0, 1fr); } }
.bytes-panel { margin-top: clamp(40px, 5vw, 72px); padding: clamp(22px, 3vw, 40px); border-radius: 24px; background: linear-gradient(180deg, rgba(10,22,52,0.6), rgba(6,14,36,0.5)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14), 0 40px 100px -40px rgba(0,0,0,0.8); }
.bytes-panel__k { margin: 0 0 18px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.bytes-panel .apq-bytes { --apq-dim-ground: #0a1634; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 860px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.fact { position: relative; padding: 26px 26px 24px; border-radius: 20px; background: rgba(10,22,52,0.5); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12); }
.fact::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--st-blue-2), var(--st-cyan), rgba(95,212,255,0)); }
.fact__k { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--st-ink); }
.fact__v { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* --- the cipher demo --- */
.cdemo { position: relative; padding: clamp(20px, 2.6vw, 34px); border-radius: 26px; color: var(--st-ink); overflow: hidden;
  background: radial-gradient(600px 300px at 0% 0%, rgba(6,42,243,0.3), rgba(6,42,243,0) 70%), linear-gradient(180deg, rgba(12,26,62,0.9), rgba(6,14,36,0.92));
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.2), inset 0 1px 0 rgba(255,255,255,0.07), 0 40px 120px -40px rgba(6,42,243,0.55); }
.cdemo__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 20px; margin-bottom: 18px; }
.cdemo__label { grid-column: 1 / -1; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.cdemo__in { box-sizing: border-box; width: 100%; min-width: 0; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(130,169,253,0.28); background: rgba(3,10,29,0.75); color: var(--st-ink); font: 600 18px/1 var(--font-mono); letter-spacing: 0.04em; outline: none; transition: border-color 160ms linear, box-shadow 160ms linear; }
.cdemo__in:focus-visible { border-color: var(--st-blue-3); box-shadow: 0 0 0 3px rgba(61,115,255,0.35); }
.cdemo__pkt { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap; }
.cdemo__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(130,169,253,0.3); }
.cdemo__dot.is-on { background: var(--st-cyan); box-shadow: 0 0 10px var(--st-cyan); }
.cd-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 6px; padding: 14px 0; box-shadow: inset 0 1px 0 rgba(130,169,253,0.1); }
.cd-row__k { font: 600 11px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.cd-row__bytes { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; perspective: 600px; }
.cd-row--t .cd-row__bytes { grid-template-columns: repeat(16, minmax(0, 1fr)); }
.cd-b { display: block; padding: 7px 0; border-radius: 6px; text-align: center; font: 600 12px/1 var(--font-mono); color: var(--st-ink); background: rgba(130,169,253,0.08); }
.cd-row--k .cd-b { color: var(--st-amber-2); background: rgba(249,182,79,0.12); }
.cd-row--c .cd-b { color: #cfe0ff; background: rgba(61,115,255,0.26); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.25); }
.cd-row--t .cd-b { color: #bff0ff; background: rgba(95,212,255,0.16); }
.cd-row__note { grid-column: 2; font-size: 12px; line-height: 1.3; color: var(--ink-faint); }
html.apq-motion .cd-row--k .cd-b, html.apq-motion .cd-row--c .cd-b, html.apq-motion .cd-row--t .cd-b { animation: cd-in 520ms var(--st-ease) both; animation-delay: calc(var(--d) * 24ms); }
html.apq-motion .cd-row--c .cd-b { animation-delay: calc(140ms + var(--d) * 24ms); }
@keyframes cd-in { from { opacity: 0; transform: rotateX(80deg) translateY(-4px); } to { opacity: 1; transform: none; } }
.cdemo__fine { margin: 16px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-faint); }
@media (max-width: 640px) {
  .cd-row { grid-template-columns: minmax(0, 1fr); }
  .cd-row__note { grid-column: 1; }
  .cd-row__bytes { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cd-row--t .cd-row__bytes { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------- deadlines ---------- */
.dl { position: relative; margin: 0 calc(var(--st-pad-x) * -1); }
.dl__track { display: grid; grid-template-columns: max-content; overflow-x: auto; padding: 8px var(--st-pad-x) 28px; scroll-snap-type: x proximity; scroll-padding: 0 var(--st-pad-x); scrollbar-width: thin; scrollbar-color: rgba(249,182,79,0.5) transparent; }
.dl__line, .dl__years { grid-area: 1 / 1; }
.dl__line { position: relative; align-self: start; height: 2px; margin-top: 74px; border-radius: 2px; background: rgba(130,169,253,0.16); }
.dl__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--fill, 1)); border-radius: 2px; background: linear-gradient(90deg, var(--st-blue-2) 0%, var(--st-amber) 34%, var(--st-coral) 70%, #c2304a 100%); box-shadow: 0 0 14px rgba(249,182,79,0.5); }
.dl__years { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.dl__year { position: relative; flex: 0 0 auto; width: 300px; padding-right: 28px; scroll-snap-align: start; }
.dl__y { display: flex; align-items: center; gap: 12px; height: 56px; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 42px; letter-spacing: -0.03em; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.dl__now { padding: 6px 10px; border-radius: 999px; font: 700 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #1a1204; background: var(--st-amber); box-shadow: 0 0 18px rgba(249,182,79,0.6); }
.dl__year.is-now .dl__y { color: var(--st-amber-2); }
.dl__node { position: absolute; left: 0; top: 68px; width: 14px; height: 14px; border-radius: 50%; background: var(--st-night); box-shadow: inset 0 0 0 2px var(--st-blue-3), 0 0 12px rgba(61,115,255,0.6); }
.dl__year.is-now .dl__node { box-shadow: inset 0 0 0 2px var(--st-amber), 0 0 18px rgba(249,182,79,0.9); background: var(--st-amber); }
html.apq-motion .dl__year.is-now .dl__node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--st-amber); animation: st-ping 2.2s var(--st-ease) infinite; }
.dl__items { display: grid; gap: 12px; margin: 48px 0 0; padding: 0; list-style: none; }
.dl__item { display: grid; gap: 6px; padding: 16px 18px 16px 18px; border-radius: 16px; background: rgba(10,22,52,0.62); box-shadow: inset 3px 0 0 var(--dl-c, var(--st-blue-2)), inset 0 0 0 1px rgba(130,169,253,0.1); }
.dl__item--neutral { --dl-c: #7086b1; }
.dl__item--signal { --dl-c: var(--st-blue-2); }
.dl__item--ahead { --dl-c: var(--st-amber); }
.dl__item--exposed { --dl-c: var(--st-coral); }
.dl__when { font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); min-height: 11px; }
.dl__when:empty { display: none; }
.dl__what { font-size: 15px; line-height: 1.45; color: var(--st-ink); }
.dl__who { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--dl-c); }
.dl__hint { margin: 0; padding: 0 var(--st-pad-x); font: 500 11px/1 var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.dl__hint::after { content: " \2192"; }
.dl.is-scrub .dl__track { overflow: visible; scroll-snap-type: none; }
.dl.is-scrub .dl__years { will-change: transform; }
.dl.is-scrub .dl__hint { visibility: hidden; }

/* ---------- markets ---------- */
.markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 6vw, 88px); }
@media (max-width: 1100px) { .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .markets { grid-template-columns: minmax(0, 1fr); } }
.market { position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 28px; border-radius: 24px; overflow: hidden; color: var(--st-ink); text-decoration: none;
  background: linear-gradient(170deg, rgba(61,115,255,0.14) 0%, rgba(12,26,62,0.7) 45%, rgba(6,14,36,0.85) 100%);
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16), 0 30px 80px -36px rgba(0,0,0,0.8);
  transition: transform 500ms var(--st-ease), box-shadow 500ms var(--st-ease); }
.market::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 500ms var(--st-ease);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(130,169,253,0.2), rgba(130,169,253,0) 60%); }
.market:hover, .market:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.45), 0 40px 90px -30px rgba(6,42,243,0.6); text-decoration: none; }
.market:hover::before, .market:focus-visible::before { opacity: 1; }
.market:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.market .ma { width: 96px; height: 96px; margin: 0 0 auto; }
.market__n { margin-top: 28px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--ink-faint); }
.market__t { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.15; letter-spacing: -0.01em; }
.market__d { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.market__go { position: absolute; right: 24px; top: 24px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--st-blue-3); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.3); transition: transform 500ms var(--st-ease), background-color 500ms var(--st-ease), color 500ms var(--st-ease); }
.market:hover .market__go { transform: rotate(-45deg); background: var(--st-blue); color: #fff; }
.ma { overflow: visible; }
.ma g { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ma .ma-core { fill: rgba(61,115,255,0.25); }
.ma .ma-dot { fill: #82a9fd; stroke: none; }
.ma-sweep { transform-origin: 60px 60px; }
html.apq-motion .ma-sweep { animation: ma-spin 4s linear infinite; }
html.apq-motion .ma-wave { animation: st-blink 2s ease-in-out infinite; }
html.apq-motion .ma-wave--2 { animation-delay: -1s; }
html.apq-motion .ma-dot { animation: st-blink 1.8s ease-in-out infinite; }
@keyframes ma-spin { to { transform: rotate(360deg); } }

/* ---------- finale ---------- */
.finale { position: relative; padding: clamp(120px, 16vh, 220px) var(--st-pad-x); color: var(--st-ink); }
.finale .aurora--a { --au: rgba(6,42,243,0.5); left: -20vmax; top: 0; }
.finale .aurora--b { --au: rgba(95,212,255,0.16); right: -24vmax; top: 10%; }
.finale__inner { position: relative; z-index: 1; max-width: var(--layout-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
@media (max-width: 960px) { .finale__inner { grid-template-columns: minmax(0, 1fr); } .sglobe { max-width: 520px; margin: 0 auto; } }
.finale__copy .act__title { font-size: clamp(48px, 6.4vw, 108px); }
.finale__vision { margin: 40px 0 0; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.32; font-weight: 500; color: var(--st-ink); max-width: 30ch; text-wrap: balance; }
.finale__lead { margin: 22px 0 0; font-size: 16px; color: var(--ink-muted); }
.sglobe { position: relative; width: 100%; aspect-ratio: 1; }
.sglobe::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle at 40% 38%, rgba(95,212,255,0.18), rgba(6,42,243,0) 66%); }
.sglobe__poster, .sglobe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sglobe__poster { object-fit: contain; transition: opacity 1200ms var(--st-ease); }
.sglobe__canvas { opacity: 0; transition: opacity 1200ms var(--st-ease); }
.sglobe.is-ready .sglobe__canvas { opacity: 1; }
.sglobe.is-ready .sglobe__poster { opacity: 0; }

/* ---------- section index (inner pages) and chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--st-ink); background: rgba(10,22,52,0.6); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.2); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: st; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps > li { position: relative; padding: 28px 26px; border-radius: 22px; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14); counter-increment: st; }
.steps > li::before { content: counter(st, decimal-leading-zero); display: block; margin-bottom: 28px; font: 500 13px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--st-blue-3); }
.steps h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--st-ink); }
.steps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

/* data table in the story */
.stable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.stable caption { text-align: left; padding: 0 0 16px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.stable th, .stable td { padding: 14px 16px; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 rgba(130,169,253,0.12); color: var(--ink-muted); }
.stable thead th { font: 600 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.stable tbody th { color: var(--st-ink); font-weight: 600; }
.stable td.is-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--st-ink); white-space: nowrap; }
.stable tr.is-us td, .stable tr.is-us th { color: var(--st-ink); background: rgba(61,115,255,0.12); }
.stable-wrap { overflow-x: auto; padding: clamp(18px, 2.4vw, 32px); border-radius: 22px; background: rgba(10,22,52,0.5); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12); }

/* ---------- notes at the end of the story ---------- */
.story .site-notes, .site-main > .site-notes { background: transparent; }
.site-notes__fold { max-width: 1040px; }
.site-notes__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; padding: 22px 26px; border-radius: 18px; cursor: pointer; list-style: none; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16); transition: box-shadow 200ms linear; }
.site-notes__summary::-webkit-details-marker { display: none; }
.site-notes__summary::after { content: "+"; margin-left: auto; font: 500 22px/1 var(--font-mono); color: var(--st-blue-3); }
.site-notes__fold[open] .site-notes__summary::after { content: "\2212"; }
.site-notes__summary:hover { box-shadow: inset 0 0 0 1px rgba(130,169,253,0.4); }
.site-notes__count { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-faint); }
.site-notes__fold[open] .apq-claims { margin-top: 24px; }

/* header over the hero: the glass bar floats on the film */
.site .apq-header { transition: background-color 300ms linear; }

/* reduced motion: final states, no loops */
@media (prefers-reduced-motion: reduce) {
  .aurora, .hndl-pkt, .ai-pill > *, .incident__trace path, .ma *, .hndl-tap__ring, .hndl-tap__line { animation: none !important; }
}

/* ---------- horizontal pins: the giant year behind the run ---------- */
.hpin { position: relative; }
.hpin__ghost { display: none; }
.is-scrub > .hpin__ghost { display: block; position: absolute; z-index: 0; left: var(--st-pad-x); top: 50%; transform: translateY(-58%); pointer-events: none; font-family: var(--font-display); font-weight: 900; font-size: clamp(180px, 26vw, 420px); line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(130,169,253,0.16); font-variant-numeric: tabular-nums; white-space: nowrap; }
.incidents.is-scrub > .hpin__ghost { -webkit-text-stroke-color: rgba(248,121,102,0.2); }
.incidents__track, .dl__track { position: relative; z-index: 1; }
.incidents > .dl__hint { margin-top: 4px; }
.incidents.is-scrub > .dl__hint { visibility: hidden; }
@media (min-width: 900px) { .incidents.is-scrub .incident { width: 420px; min-height: 400px; } }

/* phones: the wide home scenes are cropped to the part that tells the story, at a readable size */
@media (max-width: 640px) {
  .pin:has(> .scene--hndl), .pin:has(> .scene--ai), .pin:has(> .scene--mem) { overflow: hidden; }
  .scene--hndl svg { width: 190%; max-width: none; margin-left: -45%; }
  .scene--ai svg { width: 170%; max-width: none; margin-left: -62%; }
  .scene--mem svg { width: 150%; max-width: none; margin-left: -2%; }
  .scene.is-live .scene__state { font-size: 16px; }
}

/* ---------- the plain cipher demo: message, key, what travels, the check ---------- */
.pd-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 6px; padding: 14px 0; box-shadow: inset 0 1px 0 rgba(130,169,253,0.12); }
.pd-row__k { font: 600 12px/1.25 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-blue-3); }
.pd-row__cells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.pd-row__note { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.pd-c { display: block; min-height: 30px; padding: 7px 0; border-radius: 6px; text-align: center; font: 700 14px/1.15 var(--font-mono); color: var(--st-ink); background: rgba(130,169,253,0.10); }
.pd-c--key { background: hsl(var(--hue, 210) 80% 62% / 0.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.pd-c--air { color: #cfe0ff; background: rgba(61,115,255,0.26); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.28); }
.pd-row--air .pd-row__note { color: var(--ink-muted); }
html.apq-motion .pd-c--key, html.apq-motion .pd-c--air { animation: cd-in 520ms var(--st-ease) both; animation-delay: calc(var(--d) * 24ms); }
html.apq-motion .pd-c--air { animation-delay: calc(140ms + var(--d) * 24ms); }
.pd-check { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 16px; line-height: 1.4; color: var(--st-ink); background: rgba(95,212,255,0.10); box-shadow: inset 0 0 0 1px rgba(95,212,255,0.35); }
.pd-check strong { font-weight: 700; overflow-wrap: anywhere; }
.pd-check__mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; color: #032; background: #5fd4ff; }
.pd-row--chk.is-bad .pd-check { background: rgba(248,121,102,0.12); box-shadow: inset 0 0 0 1px rgba(248,121,102,0.5); }
.pd-row--chk.is-bad .pd-check__mark { color: #2a0600; background: #f87966; }
.pd-row--air.is-hacked .pd-c--air { background: rgba(248,121,102,0.25); }
.pd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pd-btn { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; font: 600 15px/1.2 var(--font-text); color: #fff; background: #c2412e; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.pd-btn.is-on { background: #1f6f4a; }
.pd-btn--quiet { color: var(--st-ink); background: rgba(130,169,253,0.14); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.35); }
.pd-btn:hover { filter: brightness(1.08); }
.pd-btn:focus-visible { outline: 3px solid var(--st-blue-3); outline-offset: 3px; }
@media (max-width: 640px) {
  .cdemo__top { grid-template-columns: minmax(0, 1fr); }
  .pd-row { grid-template-columns: minmax(0, 1fr); }
  .pd-row__note { grid-column: 1; }
  .pd-row__cells { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .pd-btn { flex: 1 1 100%; }
}

/* ---------- AgilePQ's answer: under each problem, a link straight to the matching solution ---------- */
.answer { margin-top: clamp(24px, 3vw, 40px); }
.answer__link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 100%; padding: 14px 18px 14px 20px; border-radius: 20px; text-decoration: none; color: var(--st-ink); background: linear-gradient(120deg, rgba(61,115,255,0.20), rgba(95,212,255,0.10)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.45); transition: box-shadow 160ms ease, transform 160ms ease; }
.answer__link:hover { box-shadow: inset 0 0 0 1px rgba(130,169,253,0.9), 0 8px 28px rgba(61,115,255,0.25); transform: translateY(-1px); }
.answer__link:focus-visible { outline: 3px solid var(--st-blue-3); outline-offset: 3px; }
.answer__k { font: 600 11.5px/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8fe3ff; }
.answer__t { font-size: 17px; line-height: 1.35; font-weight: 600; }
.answer__go { display: inline-flex; color: #8fe3ff; }
@media (prefers-reduced-motion: reduce) { .answer__link { transition: none; } .answer__link:hover { transform: none; } }

/* ---- live attack map (Cloudflare Radar embed, behind S.FLAGS.radar) ---- */
.radar { margin: clamp(40px, 5vw, 72px) 0 0; }
.radar__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; background: rgba(255,255,255,0.03); }
.radar__load { display: grid; gap: 6px; width: 100%; min-height: 160px; place-content: center; text-align: center; padding: 28px; border-radius: 18px; border: 1px dashed rgba(248,121,102,0.45); background: rgba(248,121,102,0.06); color: var(--st-ink); font: inherit; cursor: pointer; }
.radar__load:hover, .radar__load:focus-visible { background: rgba(248,121,102,0.12); }
.radar__k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-coral-2); }
.radar__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 24px); }
.radar__d { font-size: 14px; color: var(--ink-muted); }

/* space between a pull quote and the note that follows it */
.pull + .act__note { margin-top: clamp(24px, 3vw, 40px); }

/* rev 7.2: consecutive notes in a split column need air between them */
.split__b > .act__note + .act__note { margin-top: clamp(14px, 1.6vw, 20px); }

/* rev 7.3: four steps in a row for the manufacturer model */
/* doubled class: the company sheet's .co-values loads later in the bundle */
.co-values.co-values--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .co-values.co-values--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .co-values.co-values--4 { grid-template-columns: minmax(0, 1fr); } }
.co-values--4 .co-value { min-height: 200px; }
.co-values--4 .co-value__t { font-size: clamp(22px, 1.8vw, 26px); }
.act .co-values { margin-top: clamp(28px, 3.4vw, 48px); }

/* ---- 20-technology.css ---- */
/* /technology/ — how SLiM works. Static first: every drawing shows its final state without scripts.
   Motion only under html.apq-motion; prefers-reduced-motion stops all of it (end of file). */

/* ---------- hero art: one packet, taken apart ---------- */
.th-art { margin: 0; }
.th-art svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.th-art__cap { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-faint); }
.th-k { font: 600 12px var(--font-mono); letter-spacing: 0.16em; fill: #b0bed8; }
.th-k--amber { fill: #fece8c; }
.th-k--blue { fill: #9ab9ff; }
.th-cell path { stroke-width: 1.2; }
.th-cell text { font: 600 13px var(--font-mono); }
.th-plane--p .th-cell path { fill: rgba(130,169,253,0.08); stroke: rgba(130,169,253,0.4); }
.th-plane--p .th-cell text { fill: #f1f4fa; font-size: 16px; font-family: var(--font-display); font-weight: 700; }
.th-plane--k .th-cell path { fill: rgba(249,182,79,0.12); stroke: rgba(249,182,79,0.5); }
.th-plane--k .th-cell path { fill: hsl(calc(var(--i) * 47 + 18) 72% 58% / 0.5); stroke: rgba(255,255,255,0.16); }
.th-plane--k .th-cell text { fill: #fece8c; }
.th-plane--c .th-cell path { fill: rgba(61,115,255,0.32); stroke: #3d73ff; }
.th-plane--c .th-cell text { fill: #dfe8ff; }
.th-plane--t .th-cell path { fill: rgba(95,212,255,0.18); stroke: #5fd4ff; }
.th-plane--t .th-cell text { fill: #bff0ff; font-size: 20px; font-weight: 800; }
.th-plane--c, .th-plane--t { filter: drop-shadow(0 0 14px rgba(61,115,255,0.55)); }
.th-guides path { fill: none; stroke: rgba(130,169,253,0.32); stroke-width: 1; stroke-dasharray: 3 5; }
.th-guides .th-guide-lead { stroke: rgba(130,169,253,0.6); }
.th-guides .th-guide-lift { stroke: rgba(130,169,253,0.5); stroke-dasharray: 2 3; }
.phero--tx .phero__title { font-size: clamp(44px, 5.2vw, 84px); }
.th-dim { fill: none; stroke: #5fd4ff; stroke-width: 1.2; }
.th-dim__t { font: 700 14px var(--font-display); fill: #bff0ff; }
.th-dim__s { font: 500 12px var(--font-mono); fill: #92a5c8; }
.th-halo { opacity: 0.9; }
.th-stream { fill: none; stroke-width: 2; stroke-dasharray: 2 6; }
.th-run rect { fill: rgba(11,24,56,0.9); stroke: rgba(61,115,255,0.6); stroke-width: 1; }
.th-run text { font: 600 12px var(--font-mono); fill: #9ab9ff; }
.th-run:nth-child(1) { transform: translate(176px, 444px); }
.th-run:nth-child(2) { transform: translate(330px, 413px); }
.th-run:nth-child(3) { transform: translate(400px, 399px); opacity: 0.6; }
.th-run:nth-child(4) { opacity: 0; transform: translate(140px, 451px); }
html.apq-motion .th-run { animation: th-run 6s linear infinite; animation-delay: calc(var(--i) * -1.5s); }
@keyframes th-run {
  0% { transform: translate(140px, 451px); opacity: 0; }
  10% { opacity: 0.9; }
  85% { opacity: 0.6; }
  100% { transform: translate(436px, 392px); opacity: 0; }
}
.th-pkt rect { fill: #0e2266; stroke: #82a9fd; stroke-width: 1.6; filter: drop-shadow(0 0 12px rgba(61,115,255,0.9)); }
.th-pkt text { font: 700 13px var(--font-mono); fill: #f1f4fa; }
.th-dev rect { fill: rgba(16,32,72,0.95); stroke: #3d73ff; stroke-width: 1.5; }
.th-dev .th-dev__chip { fill: rgba(61,115,255,0.25); stroke: #82a9fd; }
.th-dev__pins, .th-dev__ant { fill: none; stroke: #82a9fd; stroke-width: 2; stroke-linecap: round; }
.th-dev__led { fill: #5fd4ff; }
.th-dev__t { font-size: 15px; font-weight: 700; fill: #f1f4fa; }
.th-dev__s { font: 500 12px var(--font-mono); fill: #92a5c8; }
html.apq-motion .th-dev__led { animation: st-blink 1.6s steps(2, jump-none) infinite; }
html.apq-motion .th-float--1 { animation: th-bob 6s var(--st-ease-io) infinite alternate; }
html.apq-motion .th-float--2 { animation: th-bob 6s var(--st-ease-io) -2s infinite alternate; }
html.apq-motion .th-float--3 { animation: th-bob 6s var(--st-ease-io) -4s infinite alternate; }
@keyframes th-bob { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
html.apq-motion .th-plane--k .th-cell text { animation: th-shim 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.18s); }
@keyframes th-shim { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- the steps ---------- */
.tx-steps > li { display: flex; flex-direction: column; }
.tx-step__k { display: block; margin: -14px 0 14px; font: 600 11px/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.tx-steps > li::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--st-blue-2), var(--st-cyan), rgba(95,212,255,0)); opacity: 0.8; }
.tx-pin { margin-top: clamp(40px, 5vw, 72px); }

/* ---------- the architecture scene ---------- */
.scene__state--d::before { background: var(--st-cyan); }
.ar-svg--narrow { display: none !important; }
@media (max-width: 720px) { .ar-svg--wide { display: none !important; } .ar-svg--narrow { display: block !important; max-width: 420px; margin: 0 auto; } }
.ar-node rect { fill: rgba(16,32,72,0.94); stroke: #3d73ff; stroke-width: 1.5; }
.ar-node--ks rect:first-child { stroke: #82a9fd; stroke-width: 2; }
.ar-node--rx > rect { stroke: #82a9fd; }
.ar-slot rect { fill: rgba(61,115,255,0.14); stroke: rgba(130,169,253,0.4); stroke-width: 1; }
.ar-slot circle { fill: #5fd4ff; }
html.apq-motion .ar-slot circle { animation: st-blink 1.8s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * -0.6s); }
.scene--arch .ar-node__t { font-size: 19px; font-weight: 700; fill: #f1f4fa; }
.scene--arch .ar-node__t--sm { font-size: 16px; }
.scene--arch .ar-node__s { font-size: 13px; font-weight: 500; fill: #b0bed8; }
.ar-node__ant { fill: none; stroke: #82a9fd; stroke-width: 2; stroke-linecap: round; }
.ar-node__led { fill: #5fd4ff; }
html.apq-motion .ar-node__led { animation: st-blink 1.4s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * -0.45s); }
.ar-halo { opacity: 0.7; }
.ar-paths path { fill: none; stroke: rgba(130,169,253,0.35); stroke-width: 2; }
.ar-paths .ar-bus { stroke-width: 3; }
.ar-prov path { fill: none; stroke: #82a9fd; stroke-width: 1.5; stroke-dasharray: 5 6; }
.ar-sess path { fill: none; stroke: #5fd4ff; stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
html.apq-motion .ar-prov path, html.apq-motion .ar-sess path { animation: st-march 1.1s linear infinite; }
.ar-key rect { fill: #0b1838; stroke-width: 1.5; }
.ar-key circle, .ar-key path { fill: none; stroke-width: 2; stroke-linecap: round; }
.scene--arch .ar-key text { font: 700 12px var(--font-mono); }
.ar-key--a rect, .ar-key--a circle, .ar-key--a path { stroke: #82a9fd; } .scene--arch .ar-key--a text { fill: #b9cdff; }
.ar-key--b rect, .ar-key--b circle, .ar-key--b path { stroke: #5fd4ff; } .scene--arch .ar-key--b text { fill: #bff0ff; }
.ar-key--c rect, .ar-key--c circle, .ar-key--c path { stroke: #a5b8ff; } .scene--arch .ar-key--c text { fill: #dfe8ff; }
.ar-badge circle { fill: #0b1838; stroke: #3d73ff; stroke-width: 1.5; transition: fill 400ms var(--st-ease), stroke 400ms var(--st-ease); }
.scene--arch .ar-badge__n { font: 700 12px var(--font-mono); fill: #9ab9ff; }
.scene--arch .ar-badge__t { font-size: 15px; font-weight: 700; fill: #f1f4fa; }
.scene--arch .ar-svg--narrow .ar-badge__t { font-size: 14px; }
.scene--arch[data-step="1"] .ar-badge--1 circle, .scene--arch[data-step="2"] .ar-badge--2 circle, .scene--arch[data-step="3"] .ar-badge--3 circle, .scene--arch[data-step="4"] .ar-badge--4 circle { fill: #062af3; stroke: #82a9fd; filter: drop-shadow(0 0 8px rgba(61,115,255,0.9)); }
.scene--arch[data-step="1"] .ar-badge--1 .ar-badge__n, .scene--arch[data-step="2"] .ar-badge--2 .ar-badge__n, .scene--arch[data-step="3"] .ar-badge--3 .ar-badge__n, .scene--arch[data-step="4"] .ar-badge--4 .ar-badge__n { fill: #fff; }
.scene--arch .ar-note { font-size: 13px; font-weight: 500; fill: #b0bed8; }
.scene--arch .ar-note--bad { fill: #ffa192; }
.ar-pkt rect { fill: rgba(61,115,255,0.24); stroke: #3d73ff; stroke-width: 1.4; }
.scene--arch .ar-pkt__h { font: 600 12px var(--font-mono); fill: #dfe8ff; }
.scene--arch .ar-pkt__n { font: 500 12px var(--font-mono); fill: #92a5c8; }
.ar-stripe rect { fill: rgba(130,169,253,0.18); }
.ar-stripe rect.is-lit { fill: #f9b64f; }
html.apq-motion .scene--arch.is-s3 .ar-pkt { animation: ar-pulse 2.4s var(--st-ease-io) infinite; animation-delay: calc(var(--i) * 0.3s); }
@keyframes ar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
.ar-ok circle { fill: rgba(61,115,255,0.3); stroke: #82a9fd; stroke-width: 1.5; }
.ar-ok path { fill: none; stroke: #f1f4fa; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ar-forge__line { fill: none; stroke: #f87966; stroke-width: 1.5; stroke-dasharray: 4 6; }
.ar-forge circle { fill: rgba(248,121,102,0.16); stroke: #f87966; stroke-width: 2; }
.ar-forge g path { stroke: #f87966; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.ar-forge rect { fill: rgba(248,121,102,0.22); stroke: #f87966; stroke-width: 1.5; }
.scene--arch .ar-forge text { font: 700 12px var(--font-mono); fill: #ffd2c9; }
.scene--arch .ar-forge .ar-forge__t { font: 600 13px var(--font-text); fill: #ffa192; }
.ar-forge .ar-forge__x { stroke: #f1f4fa; stroke-width: 3; }
.ar-zero rect { fill: rgba(6,42,243,0.18); stroke: rgba(130,169,253,0.45); stroke-width: 1.2; }
.scene--arch .ar-zero__t { font-size: 15px; font-weight: 600; fill: #dfe8ff; }
.scene--arch .ar-zero__t--sm { font-size: 14px; }
.scene--arch .ar-zero__n { font-family: var(--font-text); font-weight: 800; font-size: 28px; fill: #82a9fd; }
/* live: build the picture step by step */
.ar-s1, .ar-s2, .ar-s3, .ar-s4 { transition: opacity 600ms var(--st-ease); }
.scene--arch.is-live:not(.is-s1) .ar-s1, .scene--arch.is-live:not(.is-s2) .ar-s2, .scene--arch.is-live:not(.is-s3) .ar-s3, .scene--arch.is-live:not(.is-s4) .ar-s4 { opacity: 0; }

/* ---------- per packet ---------- */
.tx-packet { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 1100px) { .tx-packet { grid-template-columns: minmax(0, 1fr); } }
.pk { margin: 0; padding: clamp(20px, 2.6vw, 34px); border-radius: 26px; background: linear-gradient(180deg, rgba(10,22,52,0.7), rgba(6,14,36,0.6)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16), 0 40px 100px -40px rgba(0,0,0,0.8); }
.pk__row + .pk__row { margin-top: 26px; padding-top: 22px; box-shadow: inset 0 1px 0 rgba(130,169,253,0.1); }
.pk__k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--st-ink); }
.pk__n { font: 600 12px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap; }
.pk__n--blue { color: #9ab9ff; }
.pk__n--no { color: #ffa192; text-transform: uppercase; }
.pk-cells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.pk-c { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; font: 600 12px/1 var(--font-mono); color: var(--st-ink); background: rgba(130,169,253,0.08); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.18); min-width: 0; overflow: hidden; }
.pk-c--p { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.pk-c--c { color: #dfe8ff; background: rgba(61,115,255,0.3); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.4); }
.pk-c--t { color: #bff0ff; background: rgba(95,212,255,0.2); box-shadow: inset 0 0 0 1px rgba(95,212,255,0.55); }
.pk-c--tx { background: transparent; box-shadow: inset 0 0 0 1px rgba(95,212,255,0.4); border: 1px dashed rgba(95,212,255,0.45); box-shadow: none; }
.pk-c--pad { background: repeating-linear-gradient(45deg, rgba(248,121,102,0.08) 0 5px, rgba(248,121,102,0.32) 5px 7px); box-shadow: inset 0 0 0 1px rgba(248,121,102,0.35); }
.pk__row--pad .pk-cells { opacity: 0.85; }
.pk__dims { display: grid; grid-template-columns: 6fr 10fr; gap: 4px; margin-top: 10px; }
.pk__dim { position: relative; padding-top: 10px; font: 500 12px/1.35 var(--font-mono); color: var(--ink-faint); }
.pk__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border: 1px solid currentColor; border-top: 0; opacity: 0.7; }
.pk__dim:empty::before { display: none; }
.pk__dim--c { color: #9ab9ff; }
.pk__dim--t { color: #bff0ff; }
.pk__dim--pad { color: #ffa192; }
html.apq-motion .pk.is-in .pk-c--c, html.apq-motion .pk.is-in .pk-c--t { animation: cd-in 520ms var(--st-ease) both; animation-delay: calc(400ms + var(--i) * 40ms); }
@media (max-width: 520px) { .pk-c { height: 28px; font-size: 10px; border-radius: 4px; } .pk-c--p { font-size: 13px; } .pk-cells { gap: 3px; } }

/* ---------- footprint and speed ---------- */
.tx-foot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tx-foot__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
@media (max-width: 1100px) { .tx-foot { grid-template-columns: minmax(0, 1fr); } .tx-foot__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tx-foot__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tx-foot__stats { grid-template-columns: minmax(0, 1fr); } }
.tput { margin: 0; padding: clamp(22px, 3vw, 40px); border-radius: 26px; background: radial-gradient(600px 300px at 0% 0%, rgba(6,42,243,0.26), rgba(6,42,243,0) 70%), linear-gradient(180deg, rgba(12,26,62,0.85), rgba(6,14,36,0.9)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.18), 0 40px 120px -40px rgba(6,42,243,0.5); }
.tput__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; margin-bottom: 28px; }
.tput__k { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.6vw, 24px); color: var(--st-ink); }
.tput__u { margin: 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-faint); }
.tput__rows { display: grid; gap: 18px; }
.tput__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "n t" ". x"; column-gap: 18px; row-gap: 6px; align-items: center; }
.tput__name { grid-area: n; font: 600 13px/1.2 var(--font-mono); color: var(--ink-muted); }
.tput__row.is-us .tput__name { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--st-ink); }
.tput__track { grid-area: t; position: relative; display: flex; align-items: center; gap: 12px; height: 34px; }
.tput__bar { display: block; height: 100%; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, rgba(112,134,177,0.35), rgba(112,134,177,0.75)); transform-origin: left; transition: transform 1400ms var(--st-ease); transition-delay: calc(var(--i) * 120ms); }
.tput__row.is-us .tput__bar { background: linear-gradient(90deg, #062af3, #3d73ff 45%, #82a9fd); box-shadow: 0 0 24px rgba(61,115,255,0.7); }
.tput__val { font: 600 13px/1 var(--font-mono); color: var(--st-ink); white-space: nowrap; }
.tput__x { grid-area: x; font-size: 13px; color: var(--ink-faint); }
.tput__x b { font-weight: 700; color: #9ab9ff; }
.tput__axis { display: flex; justify-content: space-between; margin: 18px 0 0 138px; padding-top: 8px; box-shadow: inset 0 1px 0 rgba(130,169,253,0.2); font: 500 12px/1 var(--font-mono); color: var(--ink-faint); }
.tput__cap { margin-top: 18px; font-size: 13px; color: var(--ink-faint); }
html.apq-live.apq-motion .tput:not(.is-in) .tput__bar { transform: scaleX(0.02); }
@media (max-width: 560px) {
  .tput__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "t" "x"; }
  .tput__axis { margin-left: 0; }
  .tput__axis span:nth-child(2n) { visibility: hidden; }
}
.tx-bench { margin-top: clamp(40px, 5vw, 72px); }
.stable--bench td .apq-claim, .stable--bench th .apq-claim { font-size: 11px; }
.stable--bench tbody td:nth-child(2) { color: #cfe0ff; }
.stable--bench tbody th { white-space: nowrap; }
@media (max-width: 760px) {
  .tx-bench { padding: 8px 4px; background: transparent; box-shadow: none; overflow: visible; }
  .stable--bench, .stable--bench tbody, .stable--bench tr, .stable--bench th, .stable--bench td { display: block; width: auto; }
  .stable--bench caption { display: block; padding: 0 0 12px; }
  .stable--bench thead { display: none; }
  .stable--bench tr { margin: 0 0 14px; padding: 16px 18px; border-radius: 18px; background: rgba(10,22,52,0.6); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14); }
  .stable--bench th, .stable--bench td { padding: 6px 0; box-shadow: none; }
  .stable--bench tbody th { font-family: var(--font-display); font-size: 18px; padding-bottom: 8px; }
  .stable--bench td::before { content: attr(data-k); display: block; margin-bottom: 2px; font: 600 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
  .stable--bench td.is-num { white-space: normal; }
}

/* ---------- the key ---------- */
.tx-keys { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 1100px) { .tx-keys { grid-template-columns: minmax(0, 1fr); } }
.kg { margin: 0; padding: clamp(16px, 2.4vw, 32px); border-radius: 26px; background: linear-gradient(180deg, rgba(14,18,44,0.75), rgba(8,12,32,0.7)); box-shadow: inset 0 0 0 1px rgba(249,182,79,0.16), 0 40px 100px -40px rgba(0,0,0,0.8); }
.kg svg { display: block; width: 100%; height: auto; font-family: var(--font-text); }
.kg__cap { margin-top: 12px; font-size: 13px; color: var(--ink-faint); }
.kg-h { font: 600 12px var(--font-mono); letter-spacing: 0.2em; fill: #b0bed8; }
.kg-c rect { fill: rgba(130,169,253,0.09); stroke: rgba(130,169,253,0.2); stroke-width: 1; }
.kg-c text { font: 500 12px var(--font-mono); fill: #9ab9ff; }
.kg-c--s rect { fill: rgba(249,182,79,0.14); stroke: rgba(249,182,79,0.45); }
.kg-c--s text { fill: #fece8c; font-weight: 700; }
.kg-scan { opacity: 0; pointer-events: none; }
html.apq-motion .kg-scan { opacity: 1; animation: kg-scan 5.5s linear infinite; }
@keyframes kg-scan { from { transform: translateY(-70px); } to { transform: translateY(432px); } }
.kg-dim path, .kg-br path { fill: none; stroke: #fece8c; stroke-width: 1.2; }
.kg-dim text { font: 700 14px var(--font-mono); fill: #fece8c; }
.kg-br__v { font-family: var(--font-display); font-weight: 800; font-size: 26px; fill: #f1f4fa; }
.kg-br__t { font-size: 15px; font-weight: 600; fill: #b0bed8; }
.kg-br__s { font: 500 12px var(--font-mono); fill: #fece8c; }
.kg-br path { stroke: #82a9fd; }
.kg-br--s path { stroke: #f9b64f; }
@media (max-width: 560px) { .kg-c text { display: none; } .kg-br__t { font-size: 17px; } .kg-br__s { display: none; } .kg-br__v { font-size: 30px; } .kg-h { font-size: 16px; } .kg-dim text { font-size: 18px; } }
.tx-keys__digits { display: grid; gap: 20px; }
.dg { padding: clamp(20px, 2.4vw, 30px); border-radius: 22px; background: rgba(10,16,40,0.66); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14); }
.dg--slim { background: linear-gradient(160deg, rgba(249,182,79,0.12), rgba(14,16,40,0.72) 55%); box-shadow: inset 0 0 0 1px rgba(249,182,79,0.22); }
.dg__k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--st-ink); }
.dg__n { font: 600 12px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap; }
.dg--slim .dg__n { color: var(--st-amber-2); }
.dg__v { margin: 0; font: 500 12px/1.55 var(--font-mono); letter-spacing: 0.06em; color: #9ab9ff; word-break: break-all; overflow-wrap: anywhere; }
.dg--slim .dg__v { color: #fece8c; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .dg--slim .dg__v { background-image: linear-gradient(180deg, #fff1d6 0%, #fece8c 45%, #f9b64f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.dg__s { margin: 12px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--st-ink); }
.tx-caveat { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- where it runs ---------- */
.tx-runs { margin-top: 0; }
.tx-list__k { margin: 0 0 14px; font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.chips + .tx-list__k { margin-top: 32px; }
.chips--links li { color: #bff0ff; background: rgba(95,212,255,0.08); box-shadow: inset 0 0 0 1px rgba(95,212,255,0.3); }
.lc { margin: 0 auto; max-width: 540px; }
.lc svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.lc__cap { margin-top: 8px; text-align: center; font-size: 13px; color: var(--ink-faint); }
.lc-wave { fill: none; stroke: rgba(95,212,255,0.14); stroke-width: 1; }
html.apq-motion .lc-wave { animation: lc-wave 4.8s var(--st-ease) infinite; animation-delay: calc(var(--i) * -1.6s); transform-origin: 230px 200px; }
@keyframes lc-wave { 0% { opacity: 0; transform: scale(0.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }
.lc-pins path { fill: none; stroke: #82a9fd; stroke-width: 3; stroke-linecap: round; }
.lc-body { fill: rgba(14,28,66,0.96); stroke: #82a9fd; stroke-width: 1.6; }
.lc-dot { fill: #82a9fd; }
.lc-mcu { font: 600 12px var(--font-mono); letter-spacing: 0.2em; fill: #b0bed8; }
.lc-core { filter: drop-shadow(0 0 18px rgba(61,115,255,0.85)); }
.lc-core__t { font-family: var(--font-display); font-weight: 800; font-size: 26px; fill: #fff; }
.lc-core__s { font: 500 12px var(--font-mono); fill: #dfe8ff; }
.lc-lead { fill: none; stroke: rgba(95,212,255,0.45); stroke-width: 1.2; stroke-dasharray: 3 4; }
.lc-link text { font-size: 16px; font-weight: 700; fill: #f1f4fa; }
html.apq-motion .lc-lead { animation: st-march 1.2s linear infinite; }
.tx-ico { width: 56px; height: 56px; margin: 0 0 18px; }
.tx-ico svg { display: block; width: 100%; height: 100%; fill: none; stroke: #82a9fd; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-ico .tx-ico__core { fill: rgba(61,115,255,0.3); }

/* ---------- the record ---------- */
.rec { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.rec::before { content: ""; position: absolute; left: 0; right: 0; top: 74px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--st-blue-2), var(--st-cyan) 60%, rgba(95,212,255,0.15)); box-shadow: 0 0 14px rgba(61,115,255,0.5); }
.rec__i { position: relative; padding-right: 8px; }
.rec__y { margin: 0; height: 56px; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.rec__node { position: absolute; left: 0; top: 68px; width: 14px; height: 14px; border-radius: 50%; background: var(--st-night); box-shadow: inset 0 0 0 2px var(--st-blue-3), 0 0 12px rgba(61,115,255,0.7); }
.rec__t { margin: 48px 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--st-ink); }
.rec__d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
@media (max-width: 960px) {
  .rec { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-left: 34px; }
  .rec::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--st-blue-2), var(--st-cyan) 60%, rgba(95,212,255,0.15)); }
  .rec__node { left: -34px; top: 14px; }
  .rec__y { height: auto; font-size: 40px; }
  .rec__t { margin-top: 12px; }
}
#record .act__note--strong { max-width: 34ch; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-run, .th-float--1, .th-float--2, .th-float--3, .th-plane--k .th-cell text, .th-dev__led,
  .ar-slot circle, .ar-node__led, .ar-prov path, .ar-sess path, .ar-pkt, .kg-scan, .lc-wave, .lc-lead, .pk-c { animation: none !important; }
  .kg-scan { opacity: 0 !important; }
  .tput__bar { transition: none !important; }
}

/* engineering detail: the request form and the list beside it */
.eng-gate { padding: clamp(20px, 2.6vw, 32px); border-radius: 24px; }
.eng-gate--open { display: grid; gap: 16px; justify-items: start; }
.eng-gate__k { margin: 0; font-size: 17px; font-weight: 600; color: var(--st-ink); }
.tx-eng__list { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.tx-keys__cap { max-width: 72ch; }
.tx-fit { margin-top: 28px; }

.tx-foot--tput { margin-top: clamp(40px, 5vw, 72px); }

/* ---- 21-technology.css ---- */
/* /technology/ — the plain-language page. Static first: every drawing shows a complete picture without scripts.
   Motion only under html.apq-motion (set when the reader has not asked for reduced motion). */

.phero--tp .phero__title { font-size: clamp(44px, 5.4vw, 88px); }
.tp-cap { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
.tp-link { color: var(--st-cyan); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tp-link:hover { color: #fff; }

/* ---------- pictograms ---------- */
.tp-lbl { font: 600 15px var(--font-text); fill: #c9d6f0; }
.tp-lbl--sm { font-size: 13px; }
.tp-lbl--bad { fill: #ffa192; }
.tp-lbl--q { fill: #fece8c; }
.tp-lock__shackle { fill: none; stroke: #82a9fd; stroke-width: 2.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 100% 100%; }
.tp-lock__body { fill: #3d73ff; }
.tp-lock__hole { fill: #030a1d; }
.tp-lock.is-open .tp-lock__shackle { transform: translateY(-4px) rotate(-24deg); }
.tp-lock--hs .tp-lock__body { fill: #f87966; }
.tp-lock--hs .tp-lock__shackle { stroke: #ffa192; }
.tp-key { color: #5fd4ff; }
.tp-key circle, .tp-key path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.tp-key .tp-key__hole { fill: currentColor; stroke: none; }
.tp-key--1 { color: #f9b64f; }
.tp-key--2 { color: #b9a6ff; }
.tp-dev__body { fill: rgba(16,32,72,0.95); stroke: #3d73ff; stroke-width: 1.6; }
.tp-dev__chip { fill: rgba(61,115,255,0.25); stroke: #82a9fd; stroke-width: 1.2; }
.tp-dev__pins, .tp-dev__ant { fill: none; stroke: #82a9fd; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-dev__led { fill: #5fd4ff; }
.tp-srv__u { fill: rgba(16,32,72,0.95); stroke: #3d73ff; stroke-width: 1.4; }
.tp-srv__led { fill: #5fd4ff; }
.tp-srv__slot { stroke: rgba(130,169,253,0.4); stroke-width: 2; stroke-linecap: round; }
.tp-eye path { fill: rgba(248,121,102,0.14); stroke: #f87966; stroke-width: 1.8; }
.tp-eye__iris { fill: none; stroke: #f87966; stroke-width: 1.8; }
.tp-eye__pupil { fill: #ffa192; }
.tp-mark circle { fill: #5fd4ff; }
.tp-mark path { fill: none; stroke: #03222e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tp-mark--bad circle { fill: #f87966; }
.tp-mark--bad path { stroke: #2a0600; }
.tp-q__orb { fill: none; stroke: #f9b64f; stroke-width: 1.6; }
.tp-q__core { fill: #fece8c; }
.tp-msg__body { fill: #0e2266; stroke: #82a9fd; stroke-width: 1.4; }
.tp-msg__plain { font: 700 15px var(--font-mono); fill: #f1f4fa; }
.tp-msg__ciph { font: 700 15px var(--font-mono); fill: #9ab9ff; letter-spacing: 0.06em; }
.tp-msg--fake .tp-msg__body { fill: rgba(248,121,102,0.2); stroke: #f87966; }
.tp-msg--fake .tp-msg__plain { fill: #ffa192; }
.tp-wire { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.tp-wire--thin { stroke: rgba(130,169,253,0.45); stroke-width: 2; }
.tp-wire--bad { stroke: rgba(248,121,102,0.4); }
.tp-tap { fill: none; stroke: rgba(248,121,102,0.6); stroke-width: 1.5; stroke-dasharray: 3 5; }
.tp-route { fill: none; stroke: rgba(130,169,253,0.35); stroke-width: 1.6; }

/* ---------- hero ---------- */
.tp-hero { margin: 0; }
.tp-hero svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.tp-hero .tp-lbl { font-size: 19px; }
.tp-hero .tp-msg__plain, .tp-hero .tp-msg__ciph { font-size: 17px; }
.tp-halo { opacity: 0.85; }
.tp-net { fill: rgba(61,115,255,0.06); stroke: rgba(130,169,253,0.18); stroke-width: 1.2; }
.tp-net__t { font: 600 13px var(--font-mono); letter-spacing: 0.2em; fill: #7f8fb0; }
.tp-bubble rect { fill: rgba(248,121,102,0.1); stroke: rgba(248,121,102,0.5); stroke-width: 1.2; }
.tp-bubble__k { font: 600 12px var(--font-mono); letter-spacing: 0.16em; fill: #ffa192; }
.tp-bubble__v { font: 700 17px var(--font-mono); fill: #ffd1c9; letter-spacing: 0.04em; }
.tp-beats text { font: 600 18px var(--font-text); fill: #c9d6f0; }
.tp-beat__n { fill: #5fd4ff; font-weight: 800; }
/* still frame: two messages under way, locked; a fake one rejected at the door */
.tp-hl-m { transform: translateX(240px); }
.tp-hl-m:nth-child(2) { transform: translateX(392px); }
.tp-hl-m:nth-child(3) { opacity: 0; }
.tp-hl-m .tp-msg__plain, .tp-hl-ok { opacity: 0; }
.tp-hl-fake { transform: translate(456px, -70px); }
html.apq-motion .tp-hl-m { animation: tp-hl-move 9s linear infinite; animation-delay: calc(var(--i) * -3s); }
html.apq-motion .tp-hl-m .tp-msg__plain { animation: tp-hl-plain 9s linear infinite; animation-delay: calc(var(--i) * -3s); }
html.apq-motion .tp-hl-m .tp-msg__ciph, html.apq-motion .tp-hl-m .tp-msg__lock { animation: tp-hl-ciph 9s linear infinite; animation-delay: calc(var(--i) * -3s); }
html.apq-motion .tp-hl-ok { animation: tp-hl-ok 9s linear infinite; animation-delay: calc(var(--i) * -3s); }
html.apq-motion .tp-hl-fake { animation: tp-hl-fake 9s linear infinite; animation-delay: -3.4s; }
html.apq-motion .tp-hl-no { animation: tp-hl-no 9s linear infinite; animation-delay: -3.4s; }
html.apq-motion .tp-hero .tp-dev__led, html.apq-motion .tp-srv__led { animation: st-blink 1.6s steps(2, jump-none) infinite; animation-delay: calc(var(--i, 0) * 0.4s); }
@keyframes tp-hl-move {
  0% { transform: translateX(118px); opacity: 0; }
  5% { opacity: 1; }
  84% { transform: translateX(440px); opacity: 1; }
  96% { transform: translateX(470px); opacity: 1; }
  100% { transform: translateX(500px); opacity: 0; }
}
@keyframes tp-hl-plain { 0%, 9% { opacity: 1; } 12%, 85% { opacity: 0; } 89%, 100% { opacity: 1; } }
@keyframes tp-hl-ciph { 0%, 9% { opacity: 0; } 12%, 85% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes tp-hl-ok { 0%, 87% { opacity: 0; } 90%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tp-hl-fake {
  0%, 36% { transform: translate(318px, -160px); opacity: 0; }
  42% { transform: translate(318px, -128px); opacity: 1; }
  52% { transform: translate(330px, -62px); }
  74% { transform: translate(450px, -62px); opacity: 1; }
  80% { transform: translate(456px, -62px); }
  90% { transform: translate(462px, 10px); opacity: 0; }
  100% { transform: translate(462px, 10px); opacity: 0; }
}
@keyframes tp-hl-no { 0%, 75% { opacity: 0; } 78%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* ---------- 1. the problem: the fit ---------- */
.tp-fit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.tp-fit__vs { align-self: center; margin: 0; font: 800 22px var(--font-display); color: var(--ink-faint); }
.tp-fit__panel { margin: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: 24px; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14); }
.tp-fit__panel--tls { box-shadow: inset 0 0 0 1px rgba(248,121,102,0.3); }
.tp-fit__panel--slim { box-shadow: inset 0 0 0 1px rgba(95,212,255,0.35), 0 30px 80px rgba(6,42,243,0.22); }
.tp-fit__k { margin: 0 0 22px; text-align: center; font: 700 13px/1.3 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-blue-3); }
.tp-fit__panel--tls .tp-fit__k { color: var(--st-coral-2); }
.tp-fit__dev { position: relative; max-width: 360px; margin: 0 auto; padding: 16px; border-radius: 16px; background: rgba(3,10,29,0.75); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.22); }
.tp-fit__chip { position: absolute; left: 22px; right: 22px; top: -6px; height: 6px; background: repeating-linear-gradient(90deg, rgba(130,169,253,0.45) 0 6px, transparent 6px 16px); }
.tp-fit__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.tp-cell { aspect-ratio: 1; border-radius: 4px; background: rgba(130,169,253,0.08); }
.tp-cell.is-tls, .tp-swatch.is-tls { background: #f87966; }
.tp-cell.is-tlsmax, .tp-swatch.is-tlsmax { background: repeating-linear-gradient(135deg, rgba(248,121,102,0.6) 0 3px, rgba(248,121,102,0.16) 3px 7px); }
.tp-cell.is-core, .tp-swatch.is-core { background: #5fd4ff; }
.tp-cell.is-slim, .tp-swatch.is-slim { background: #3d73ff; }
.tp-cell.is-half { background: linear-gradient(90deg, #3d73ff 50%, rgba(130,169,253,0.08) 50%); }
.tp-fit__read { margin-top: 22px; text-align: center; }
.tp-fit__big { margin: 0; font: 800 clamp(28px, 3vw, 42px)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--st-ink); }
.tp-fit__small { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-muted); }
.tp-fit__key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-faint); }
.tp-fit__key li { display: flex; align-items: center; gap: 8px; }
.tp-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.tp-cell { transition: opacity 360ms var(--st-ease), transform 480ms var(--st-ease); transition-delay: calc(var(--i) * 11ms + 250ms); }
html.apq-motion .tp-fit:not(.is-in) .tp-cell[class*=" is-"] { opacity: 0; transform: scale(0.3); }
@media (max-width: 860px) {
  .tp-fit { grid-template-columns: minmax(0, 1fr); }
  .tp-fit__vs { justify-self: center; }
}

/* ---------- 2. how it works: three moves ---------- */
.tp-pin { margin-top: clamp(40px, 5vw, 72px); }
.tp-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); margin: 0; padding: 0; list-style: none; }
.tp-step { position: relative; padding: clamp(18px, 2vw, 26px); border-radius: 22px; background: rgba(10,22,52,0.6); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14); transition: opacity 500ms var(--st-ease), box-shadow 500ms var(--st-ease); }
.tp-step__art { margin: -4px -4px 6px; }
.tp-step__art svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.tp-step__k { display: flex; align-items: center; gap: 10px; margin: 6px 0; font: 700 12px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-blue-3); }
.tp-step__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--st-blue-2); font: 800 13px/1 var(--font-display); letter-spacing: 0; color: #fff; }
.tp-step__t { margin: 6px 0 10px; font: 800 clamp(30px, 2.8vw, 40px)/1 var(--font-display); letter-spacing: -0.02em; color: var(--st-ink); }
.tp-step__b { margin: 0; font-size: 17px; line-height: 1.5; color: var(--st-ink); }
.tp-step__why { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(130,169,253,0.14); font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.tp-step__why strong { color: var(--st-cyan); font-weight: 700; }
.tp-ks__body { fill: rgba(16,32,72,0.95); stroke: #5fd4ff; stroke-width: 1.4; }
.tp-mini .tp-dev__body { stroke-width: 1.4; }
/* the scene steps through the moves on wide screens; stacked on a phone, or without scripts, every move shows at once */
@media (min-width: 961px) {
.tp-steps.is-live .tp-step { opacity: 0.34; }
.tp-steps.is-live[data-step="1"] .tp-step--1,
.tp-steps.is-live[data-step="2"] .tp-step--2,
.tp-steps.is-live[data-step="3"] .tp-step--3,
.tp-steps.is-live[data-step="4"] .tp-step { opacity: 1; }
.tp-steps.is-live[data-step="2"] .tp-step--1,
.tp-steps.is-live[data-step="3"] .tp-step--1, .tp-steps.is-live[data-step="3"] .tp-step--2 { opacity: 0.62; }
.tp-steps.is-live[data-step="1"] .tp-step--1,
.tp-steps.is-live[data-step="2"] .tp-step--2,
.tp-steps.is-live[data-step="3"] .tp-step--3 { box-shadow: inset 0 0 0 1px rgba(95,212,255,0.55), 0 24px 70px rgba(6,42,243,0.3); }
}
/* move 1: keys fly from the key server into each device */
.tp-sl-a { transform: translateX(126px); opacity: 0; }
.tp-sl-b { transform: translateX(176px); }
.tp-sc-ok, .tp-sc-bad { transform: translateX(118px); }
html.apq-motion .tp-steps:not(.is-live) .tp-fly,
html.apq-motion .tp-steps[data-step="1"] .tp-fly { animation: tp-fly 1.3s var(--st-ease) both; animation-delay: calc(var(--i) * 0.22s + 0.15s); }
@keyframes tp-fly { from { transform: translate(-186px, var(--dy)); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
/* move 2: the message locks as it leaves and crosses under the eavesdropper */
html.apq-motion .tp-steps[data-step="2"] .tp-sl-a { animation: tp-sl-a 3.6s linear infinite; }
html.apq-motion .tp-steps[data-step="2"] .tp-sl-b { animation: tp-sl-b 3.6s linear infinite; }
@keyframes tp-sl-a { 0%, 22% { transform: translateX(126px); opacity: 1; } 28%, 100% { transform: translateX(132px); opacity: 0; } }
@keyframes tp-sl-b { 0%, 24% { transform: translateX(128px) scale(1.06); opacity: 0; } 30% { transform: translateX(132px); opacity: 1; } 86% { transform: translateX(270px); opacity: 1; } 100% { transform: translateX(300px); opacity: 0; } }
/* move 3: the real one passes, the fake one is thrown out */
html.apq-motion .tp-steps[data-step="3"] .tp-sc-ok { animation: tp-sc-ok 3.6s var(--st-ease) infinite; }
html.apq-motion .tp-steps[data-step="3"] .tp-sc-bad { animation: tp-sc-bad 3.6s var(--st-ease) infinite; }
html.apq-motion .tp-steps[data-step="3"] .tp-sc-mark { animation: tp-sc-mark 3.6s linear infinite; }
@keyframes tp-sc-ok { 0% { transform: translateX(-60px); opacity: 0; } 10% { opacity: 1; } 40%, 92% { transform: translateX(118px); opacity: 1; } 100% { transform: translateX(118px); opacity: 0; } }
@keyframes tp-sc-bad { 0% { transform: translateX(-60px); opacity: 0; } 10% { opacity: 1; } 40%, 62% { transform: translateX(118px); opacity: 1; } 84%, 100% { transform: translate(118px, 46px); opacity: 0; } }
@keyframes tp-sc-mark { 0%, 40% { opacity: 0; } 46%, 100% { opacity: 1; } }
@media (max-width: 960px) {
  .tp-steps__list { grid-template-columns: minmax(0, 1fr); }
  .tp-step__art { max-width: 420px; }
}

/* ---------- 3. try it ---------- */
.tp-try { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.tp-try__how { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: tp-try; }
.tp-try__how li { position: relative; padding-left: 52px; font-size: 18px; line-height: 1.5; color: var(--ink-muted); counter-increment: tp-try; }
.tp-try__how li::before { content: counter(tp-try); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(61,115,255,0.18); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.5); font: 800 16px/1 var(--font-display); color: var(--st-ink); }
.tp-try__how strong { color: var(--st-ink); }
@media (max-width: 960px) { .tp-try { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 4. what it saves ---------- */
.tp-saves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); margin-top: clamp(40px, 5vw, 72px); }
.tp-save { margin: 0; padding: clamp(22px, 2.6vw, 36px); border-radius: 24px; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14); }
.tp-save--wide { grid-column: 1 / -1; }
.tp-save__k { margin: 0; font: 700 13px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-cyan); }
.tp-save__t { margin: 10px 0 0; font: 800 clamp(32px, 3.4vw, 52px)/1 var(--font-display); letter-spacing: -0.025em; color: var(--st-ink); }
.tp-save__s { margin: 12px 0 26px; max-width: 52ch; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.tp-save__cap { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
@media (max-width: 860px) { .tp-saves { grid-template-columns: minmax(0, 1fr); } }
/* the race: the bars grow at the speed each cipher ran */
.tp-race { display: grid; gap: 16px; }
.tp-race__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; }
.tp-race__name { font: 700 15px var(--font-text); color: var(--ink-muted); }
.tp-race__row.is-us .tp-race__name { color: var(--st-ink); }
.tp-race__lane { display: flex; align-items: center; gap: 12px; min-width: 0; height: 30px; }
.tp-race__bar { position: relative; flex: none; width: var(--w); height: 12px; border-radius: 0 4px 4px 0; background: rgba(176,190,216,0.42); }
.tp-race__row.is-us .tp-race__bar { background: linear-gradient(90deg, #3d73ff, #5fd4ff); }
.tp-race__dot { position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #d4dcec; box-shadow: 0 0 0 2px var(--st-night); }
.tp-race__row.is-us .tp-race__dot { background: #fff; box-shadow: 0 0 0 2px var(--st-night), 0 0 12px #5fd4ff; }
.tp-race__val { flex: none; font: 700 15px var(--font-text); color: var(--st-ink); white-space: nowrap; }
.tp-race__x { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ink-faint); }
.tp-race__bar { transition: width calc(var(--ms) * 48ms) linear 350ms; }
.tp-race__val { transition: opacity 300ms ease calc(var(--ms) * 48ms + 350ms); }
html.apq-motion .tp-save:not(.is-in) .tp-race__bar { width: 0; }
html.apq-motion .tp-save:not(.is-in) .tp-race__val { opacity: 0; }
@media (max-width: 480px) { .tp-race__row { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; } }
/* the meters */
.tp-meters { display: grid; gap: 22px; }
.tp-meter__k { margin: 0 0 8px; font: 700 14px var(--font-text); color: var(--ink-muted); }
.tp-meter__track { position: relative; height: 42px; border-radius: 8px; background: rgba(176,190,216,0.14); overflow: hidden; }
.tp-meter__ref { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; font: 600 13px var(--font-text); color: var(--ink-faint); }
.tp-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); display: flex; align-items: center; padding-left: 12px; border-radius: 8px; background: linear-gradient(90deg, #3d73ff, #5fd4ff); font: 800 15px var(--font-display); color: #04112e; white-space: nowrap; transition: width 1.3s var(--st-ease) 300ms; }
html.apq-motion .tp-save:not(.is-in) .tp-meter__fill { width: 0; }
/* the data, one square per 100 bytes */
.tp-data { display: grid; gap: 22px; }
.tp-data__row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.tp-data__k { margin: 0; font: 700 16px/1.3 var(--font-text); color: var(--ink-muted); }
.tp-data__row.is-us .tp-data__k { color: var(--st-ink); }
.tp-data__k span { display: block; margin-top: 4px; font-weight: 500; font-size: 14px; color: var(--ink-faint); }
.tp-data__sq { display: flex; flex-wrap: wrap; gap: 5px; }
.tp-sq { width: 20px; height: 20px; border-radius: 4px; transition: opacity 300ms var(--st-ease), transform 400ms var(--st-ease); transition-delay: calc(var(--i) * 28ms + 300ms); }
.tp-data__sq--us .tp-sq.is-on { background: #5fd4ff; }
.tp-data__sq--us .tp-sq.is-part { background: linear-gradient(90deg, #5fd4ff var(--part), rgba(130,169,253,0.12) var(--part)); }
.tp-data__sq--them .tp-sq.is-on { background: rgba(176,190,216,0.5); }
.tp-data__sq--them .tp-sq.is-part { background: linear-gradient(90deg, rgba(176,190,216,0.5) var(--part), transparent var(--part)), repeating-linear-gradient(135deg, rgba(176,190,216,0.4) 0 3px, rgba(176,190,216,0.1) 3px 7px); }
.tp-data__sq--them .tp-sq.is-max { background: repeating-linear-gradient(135deg, rgba(176,190,216,0.4) 0 3px, rgba(176,190,216,0.1) 3px 7px); }
html.apq-motion .tp-save:not(.is-in) .tp-sq { opacity: 0; transform: scale(0.4); }
@media (max-width: 720px) { .tp-data__row { grid-template-columns: minmax(0, 1fr); gap: 10px; } .tp-sq { width: 16px; height: 16px; } }
/* why it matters */
.tp-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.tp-why li { padding: 22px 24px; border-radius: 18px; background: rgba(61,115,255,0.08); box-shadow: inset 0 0 0 1px rgba(95,212,255,0.22); font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.tp-why strong { display: block; margin-bottom: 6px; font: 800 19px/1.2 var(--font-display); color: var(--st-ink); }
@media (max-width: 860px) { .tp-why { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 5. quantum ---------- */
.tp-qps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); margin-top: clamp(40px, 5vw, 72px); }
.tp-qp { margin: 0; padding: clamp(20px, 2.4vw, 30px); border-radius: 24px; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(249,182,79,0.25); }
.tp-qp--slim { box-shadow: inset 0 0 0 1px rgba(95,212,255,0.4), 0 30px 80px rgba(6,42,243,0.2); }
.tp-qp__k { margin: 0 0 8px; font: 700 13px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-amber-2); }
.tp-qp--slim .tp-qp__k { color: var(--st-cyan); }
.tp-qp svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.tp-qp__cap { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.tp-beam { fill: none; stroke: #f9b64f; stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; }
.tp-hs { fill: none; stroke: rgba(249,182,79,0.65); stroke-width: 2; }
.tp-qp__none rect { fill: rgba(95,212,255,0.08); stroke: rgba(95,212,255,0.5); stroke-width: 1.2; stroke-dasharray: 4 5; }
.tp-qp__none text { font: 700 14px var(--font-text); fill: #bff0ff; }
html.apq-motion .tp-beam { animation: tp-beam 1.2s linear infinite; }
@keyframes tp-beam { to { stroke-dashoffset: -20; } }
html.apq-motion .tp-q__core { animation: st-blink 1.4s steps(2, jump-none) infinite; }
html.apq-motion .tp-qps.is-in .tp-lock--hs .tp-lock__shackle { animation: tp-hs-open 4s var(--st-ease) infinite; }
@keyframes tp-hs-open { 0%, 35% { transform: none; } 50%, 100% { transform: translateY(-4px) rotate(-24deg); } }
html.apq-motion .tp-qp__flow { animation: tp-qp-flow 3.4s linear infinite; }
@keyframes tp-qp-flow { 0% { transform: translateX(-60px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }
@media (max-width: 860px) { .tp-qps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 6. how it fits ---------- */
.tp-flow { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.tp-flow__ks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-bottom: 30px; text-align: center; }
.tp-flow__ksbox { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: rgba(10,22,52,0.75); box-shadow: inset 0 0 0 1px rgba(95,212,255,0.4); font: 700 15px var(--font-text); color: var(--st-ink); }
.tp-flow__ksbox svg { width: 40px; height: 24px; overflow: visible; }
.tp-flow__ksnote { font-size: 15px; color: var(--ink-muted); }
.tp-flow__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 52px); margin: 0; padding: 0; list-style: none; }
.tp-flow__node { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 24px; border-radius: 22px; background: rgba(10,22,52,0.6); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16); }
.tp-flow__node--dev, .tp-flow__node--srv { box-shadow: inset 0 0 0 1px rgba(95,212,255,0.55), 0 24px 60px rgba(6,42,243,0.22); }
.tp-flow__node--dev::after, .tp-flow__node--srv::after { content: "SLiM"; position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(90deg, #3d73ff, #5fd4ff); font: 800 12px/1 var(--font-display); letter-spacing: 0.04em; color: #04112e; }
.tp-flow__ico svg { display: block; width: 52px; height: 52px; fill: none; stroke: #82a9fd; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tp-flow__ico .tp-ico__hi { stroke: #5fd4ff; }
.tp-flow__t { font: 800 20px/1.15 var(--font-display); color: var(--st-ink); }
.tp-flow__d { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.tp-flow__link { position: absolute; top: 48px; left: 100%; width: clamp(28px, 3.6vw, 52px); height: 2px; background: rgba(130,169,253,0.35); }
.tp-flow__link.is-locked { background: linear-gradient(90deg, #3d73ff, #5fd4ff); }
.tp-flow__pkt { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 3px; background: #5fd4ff; box-shadow: 0 0 10px #5fd4ff; }
.tp-flow__link:not(.is-locked) .tp-flow__pkt { background: #b0bed8; box-shadow: none; }
html.apq-motion .tp-flow__pkt { animation: tp-pkt 2.2s linear infinite; animation-delay: calc(var(--i) * 0.5s); }
@keyframes tp-pkt { from { left: -6px; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 6px); opacity: 0; } }
@media (max-width: 960px) {
  .tp-flow__row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tp-flow__link { top: 100%; left: 44px; width: 2px; height: 34px; }
  .tp-flow__link.is-locked { background: linear-gradient(180deg, #3d73ff, #5fd4ff); }
  .tp-flow__pkt { top: 0; left: -5px; }
  @keyframes tp-pkt { from { top: -6px; opacity: 0; } 15%, 85% { opacity: 1; } to { top: calc(100% - 6px); opacity: 0; } }
}

/* ---------- 7. the opportunity ---------- */
.tp-opp { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.tp-dots { margin: 0; }
.tp-dots__row { margin-bottom: 24px; }
.tp-dots__k { margin: 0 0 10px; font: 700 13px/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.tp-dots__d { display: flex; flex-wrap: wrap; gap: 6px; max-width: 440px; }
.tp-dot { width: 16px; height: 16px; border-radius: 50%; background: #3d73ff; transition: opacity 300ms var(--st-ease), transform 400ms var(--st-ease); transition-delay: calc(var(--i) * 22ms + 300ms); }
.tp-dots__row.is-next .tp-dot { background: #5fd4ff; }
.tp-dots__v { margin: 10px 0 0; font: 800 clamp(30px, 3.2vw, 46px)/1 var(--font-display); letter-spacing: -0.025em; color: var(--st-ink); }
html.apq-motion .tp-dots:not(.is-in) .tp-dot { opacity: 0; transform: scale(0.3); }
.tp-gap { margin: 0; }
.tp-gap__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tp-gap__grp { padding: 18px 16px 20px; border-radius: 22px; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(176,190,216,0.18); }
.tp-gap__grp--small { box-shadow: inset 0 0 0 1px rgba(248,121,102,0.35); }
.tp-gap__bt { margin: 0 0 14px; font: 700 13px/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: #b0bed8; }
.tp-gap__grp--small .tp-gap__bt { color: var(--st-coral-2); }
.tp-gap__icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tp-gap__icons li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #c9d6f0; }
.tp-gap__icons svg { width: 56px; height: 56px; padding: 6px; border-radius: 50%; background: rgba(3,10,29,0.6); box-shadow: inset 0 0 0 1px rgba(176,190,216,0.25); overflow: visible; }
.tp-gap__icons path { fill: none; stroke: #b0bed8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tp-gap__grp--small .tp-gap__icons svg { box-shadow: inset 0 0 0 1px rgba(95,212,255,0.5); }
.tp-gap__grp--small .tp-gap__icons path { stroke: #5fd4ff; }
.tp-gap__slim { margin: 16px 0 0; padding: 10px 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(61,115,255,0.35), rgba(95,212,255,0.25)); box-shadow: inset 0 0 0 1px rgba(95,212,255,0.6); text-align: center; font: 800 16px/1.2 var(--font-display); color: var(--st-ink); }
@media (max-width: 960px) { .tp-opp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .tp-gap__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 8. the record ---------- */
.tp-straight { margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.tp-straight .gcard p + p { margin-top: 14px; }
.tp-gate { margin-top: 20px; }
.tp-gate .eng-gate { padding: 0; overflow: visible; background: none; box-shadow: none; }
.tp-gate .eng-gate::before, .tp-gate .eng-gate::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tp-cell, .tp-race__bar, .tp-race__val, .tp-meter__fill, .tp-sq, .tp-dot, .tp-step { transition: none; }
}

/* ---------- 8. fair questions ---------- */
.tp-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.tp-qa__i { padding: clamp(20px, 2.4vw, 30px); border-radius: 22px; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16); }
.tp-qa__i summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; cursor: pointer; list-style: none; font: 800 clamp(20px, 1.8vw, 26px)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--st-ink); }
.tp-qa__i summary::-webkit-details-marker { display: none; }
.tp-qa__i summary::after { content: "+"; flex: none; font: 600 22px/1 var(--font-text); color: var(--st-cyan); transition: transform 300ms var(--st-ease); }
.tp-qa__i[open] summary::after { transform: rotate(45deg); }
.tp-qa__i summary:focus-visible { outline: 3px solid var(--st-blue-3); outline-offset: 6px; border-radius: 6px; }
.tp-qa__i p { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
@media (max-width: 860px) { .tp-qa { grid-template-columns: minmax(0, 1fr); } }

/* rev 7.3: comparison table, TLS / AES / SLiM */
.cmp-wrap { margin-top: clamp(32px, 4vw, 56px); border-radius: 20px; background: rgba(10,22,52,0.5); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(130,169,253,0.12); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding-top: 20px; padding-bottom: 14px; }
.cmp tbody th { width: 22%; font-weight: 600; color: var(--st-ink); }
.cmp td { color: var(--ink-muted); }
.cmp .is-us { background: rgba(61,115,255,0.12); color: var(--st-ink); }
.cmp thead .is-us { color: var(--st-cyan); box-shadow: inset 0 2px 0 var(--st-cyan); }
.cmp .apq-claim { font-size: 11px; }
@media (max-width: 640px) { .cmp { font-size: 14px; } .cmp th, .cmp td { padding: 12px 14px; } }
@media (max-width: 640px) {
  .cmp-wrap { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .cmp { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { margin-bottom: 12px; border-radius: 16px; overflow: hidden; background: rgba(10,22,52,0.5); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12); }
  .cmp tbody th { width: auto; padding: 14px 16px 6px; border: 0; font-size: 16px; }
  .cmp td { position: relative; padding: 7px 16px 7px calc(6.5em + 30px); border: 0; }
  .cmp td::before { content: attr(data-l); position: absolute; left: 16px; top: 10px; width: 6.5em; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
  .cmp td.is-us { padding-top: 10px; padding-bottom: 14px; }
  .cmp td.is-us::before { color: var(--st-cyan); }
  .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
}

/* ---- 30-why-now.css ---- */
/* Why now (/why-now/): the two clocks, the expert odds, the Mosca lab, the device-life scene. */

/* ---------- hero: two clocks ---------- */
.wn-hero .phero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .wn-hero .phero__inner { grid-template-columns: minmax(0, 1fr); } }
.wn-hero__art { margin: 0; padding: clamp(18px, 2.4vw, 32px); border-radius: 28px;
  background: radial-gradient(520px 340px at 50% 30%, rgba(61,115,255,0.16), rgba(61,115,255,0) 70%), linear-gradient(180deg, rgba(10,22,52,0.62), rgba(5,12,32,0.42));
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14), 0 40px 120px -40px rgba(0,0,0,0.85); }
.wn-hero__cap { margin: 14px 4px 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.wn-clocks { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.wn-clock__title { font: 600 14px var(--font-mono); letter-spacing: 0.16em; fill: #b0bed8; }
.wn-clock__face { stroke: rgba(130,169,253,0.22); stroke-width: 1.5; }
.wn-clock__tick { stroke: rgba(176,190,216,0.38); stroke-width: 1.4; stroke-linecap: round; }
.wn-clock__tick.is-major { stroke: #b0bed8; stroke-width: 2; }
.wn-clock__num { font: 500 13px var(--font-mono); fill: #92a5c8; }
.wn-clock__ring15 { fill: none; stroke: #f87966; stroke-width: 4; opacity: 0.85; }
.wn-clock__arc10 { fill: none; stroke: #f9b64f; stroke-width: 9; stroke-linecap: round; }
.wn-clock__arc29 { fill: none; stroke: #f87966; stroke-width: 9; stroke-linecap: round; }
.wn-clock__sector { stroke: none; }
.wn-clock__fast { stroke: #ffd2c9; stroke-width: 3; stroke-linecap: round; }
.wn-clock__hand { stroke-linecap: round; }
.wn-clock__hand--q { stroke: #fece8c; stroke-width: 2.5; stroke-dasharray: 5 7; transform-box: view-box; transform-origin: 150px 214px; transform: rotate(212deg); }
.wn-clock__hand--a { stroke: #ffd2c9; stroke-width: 2.5; transform-box: view-box; transform-origin: 470px 214px; transform: rotate(174deg); }
.wn-clock__pin { fill: #fece8c; }
.wn-clock__pin--a { fill: #ffd2c9; }
.wn-clock__k { font: 600 13px var(--font-mono); letter-spacing: 0.22em; fill: #b0bed8; }
.wn-clock__big { font-family: var(--font-display); font-weight: 800; font-size: 64px; letter-spacing: -0.03em; }
.wn-clock__big--q { fill: #fece8c; }
.wn-clock__big--a { fill: #ffa192; }
.wn-clock__unit { font-size: 14px; fill: #b0bed8; }
.wn-clock__legend text { font-size: 15px; font-weight: 600; fill: #dfe6f3; }
.wn-sw--amber { fill: #f9b64f; }
.wn-sw--coral { fill: #f87966; }
.wn-sw--fast { fill: #ffd2c9; }
html.apq-motion .wn-clock__hand--q { animation: wn-spin 26s linear infinite; }
html.apq-motion .wn-clock__hand--a { animation: wn-spin 6s linear infinite; }
html.apq-motion .wn-clock__arc10, html.apq-motion .wn-clock__arc29 { animation: wn-breathe 2.4s ease-in-out infinite; }
html.apq-motion .wn-clock__arc29 { animation-delay: -1.2s; }
@keyframes wn-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes wn-breathe { 50% { opacity: 0.62; } }
@media (max-width: 560px) {
  .wn-clock__legend text { font-size: 17px; }
  .wn-clock__title { font-size: 16px; letter-spacing: 0.1em; }
  .wn-clock__unit { font-size: 16px; }
  .wn-hero__art { padding: 14px 10px 16px; border-radius: 20px; }
}

/* ---------- shared bits ---------- */
.wn-notes > .act__note + .act__note { margin-top: 28px; }
.wn-kicker { margin: clamp(48px, 6vw, 88px) 0 20px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-amber-2); }
.wn-kicker + .cards { margin-top: 0; }
.wn-says__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.6vw, 23px) !important; line-height: 1.3 !important; letter-spacing: -0.005em; color: var(--st-ink) !important; text-wrap: pretty; }
.wn-says .gcard { display: flex; flex-direction: column; }
.wn-sub { margin: clamp(56px, 7vw, 104px) 0 22px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; color: var(--st-ink); }
.wn-panel { padding: clamp(18px, 2.6vw, 36px); border-radius: 26px; background: linear-gradient(180deg, rgba(10,22,52,0.6), rgba(5,12,32,0.4)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12), 0 40px 120px -40px rgba(0,0,0,0.8); }
.wn-panel .scene__cap { margin-top: 14px; }
.wn-machine { align-items: stretch; margin-top: 0; }
.wn-machine__stats { display: grid; align-content: center; gap: 48px; }

/* ---------- the expert odds ---------- */
.wn-odds { margin: 0; padding: clamp(22px, 3vw, 44px); border-radius: 26px;
  background: radial-gradient(700px 300px at 70% 0%, rgba(249,182,79,0.10), rgba(249,182,79,0) 70%), linear-gradient(180deg, rgba(10,22,52,0.6), rgba(5,12,32,0.42));
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12), 0 40px 120px -40px rgba(0,0,0,0.8); }
.wn-odds__k { margin: 0 0 28px; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.wn-odds__row + .wn-odds__row { margin-top: 30px; }
.wn-odds__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; }
.wn-odds__when { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); color: var(--st-ink); }
.wn-odds__range { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.wn-odds__range small { font-size: 0.5em; margin-left: 0.08em; color: var(--ink-muted); }
.wn-odds__row--amber .wn-odds__range { color: var(--st-amber-2); }
.wn-odds__row--coral .wn-odds__range { color: var(--st-coral-2); }
.wn-odds__word { font-size: 16px; color: var(--ink-muted); }
.wn-odds__track { position: relative; height: 34px; border-radius: 10px; background: rgba(130,169,253,0.07); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16); }
.wn-odds__even { position: absolute; left: 50%; top: -8px; bottom: -8px; width: 0; border-left: 1.5px dashed rgba(241,244,250,0.55); }
.wn-odds__band { position: absolute; top: 4px; bottom: 4px; border-radius: 7px; transform-origin: left center; transition: transform 1300ms var(--st-ease); }
.wn-odds__row--amber .wn-odds__band { background: linear-gradient(90deg, #f9b64f, #fece8c); box-shadow: 0 0 22px rgba(249,182,79,0.55); }
.wn-odds__row--coral .wn-odds__band { background: linear-gradient(90deg, #f87966, #ffa192); box-shadow: 0 0 22px rgba(248,121,102,0.55); transition-delay: 300ms; }
.wn-odds__lo, .wn-odds__hi { position: absolute; top: 50%; transform: translateY(-50%); font: 700 12px/1 var(--font-mono); color: #1a0e06; }
.wn-odds__lo { left: 8px; }
.wn-odds__hi { right: 8px; }
html.apq-live.apq-motion .wn-odds:not(.is-in) .wn-odds__band { transform: scaleX(0.02); }
.wn-odds__axis { position: relative; height: 40px; margin-top: 12px; }
.wn-odds__axis span, .wn-odds__axis em { position: absolute; top: 8px; transform: translateX(-50%); font: 500 12px/1 var(--font-mono); font-style: normal; color: var(--ink-faint); white-space: nowrap; }
.wn-odds__axis span:first-child { transform: none; }
.wn-odds__axis span:nth-last-child(2) { transform: translateX(-100%); }
.wn-odds__axis em { top: 26px; color: #dfe6f3; letter-spacing: 0.06em; }
.wn-odds__cap { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 560px) { .wn-odds__range { margin-left: 0; flex-basis: 100%; order: 3; } .wn-odds__word { order: 4; } }

/* ---------- the Mosca lab ---------- */
.wn-lab { padding: clamp(20px, 3vw, 44px); border-radius: 28px; color: var(--ink);
  background: radial-gradient(800px 360px at 0% 0%, rgba(6,42,243,0.28), rgba(6,42,243,0) 70%), linear-gradient(180deg, rgba(12,26,62,0.88), rgba(6,14,36,0.9));
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.2), inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 120px -40px rgba(6,42,243,0.5); }
.wn-lab__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.wn-lab__k { margin-right: 6px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.wn-lab__preset { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  font: inherit; color: var(--st-ink); background: rgba(3,10,29,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.24); transition: box-shadow 200ms linear, background-color 200ms linear; }
.wn-lab__preset:hover { box-shadow: inset 0 0 0 1px rgba(130,169,253,0.6); }
.wn-lab__preset:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wn-lab__preset[aria-pressed="true"] { background: rgba(6,42,243,0.42); box-shadow: inset 0 0 0 1px #82a9fd, 0 0 24px -6px rgba(61,115,255,0.8); }
.wn-lab__pname { font-size: 15px; font-weight: 700; }
.wn-lab__pvals { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); letter-spacing: 0.04em; }
.wn-lab__clock .apq-mosca { --apq-dim-ground: #0a1634; }
.wn-lab__clock .apq-mosca__verdict { font-size: clamp(17px, 1.4vw, 20px); }
.wn-lab__note { margin: 24px 0 0; padding-top: 18px; max-width: 92ch; font-size: 14px; line-height: 1.55; color: var(--ink-muted); box-shadow: inset 0 1px 0 rgba(130,169,253,0.12); }
@media (max-width: 640px) { .wn-lab__preset { flex: 1 1 100%; } .wn-lab__k { flex-basis: 100%; } }

.wn-vars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 860px) { .wn-vars { grid-template-columns: minmax(0, 1fr); } }
.wn-var { position: relative; padding: 26px 26px 24px; border-radius: 20px; background: rgba(10,22,52,0.5); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12); }
.wn-var__sym { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--st-blue-3); text-shadow: 0 0 28px rgba(61,115,255,0.6); }
.wn-var--y .wn-var__sym { color: var(--st-amber-2); text-shadow: 0 0 28px rgba(249,182,79,0.45); }
.wn-var--z .wn-var__sym { color: var(--st-ink); text-shadow: none; -webkit-text-stroke: 0; opacity: 0.9; }
.wn-var__t { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--st-ink); }
.wn-var p:not(.wn-var__sym) { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* ---------- a device that ships today ---------- */
.scene--life .wn-life__draw { position: relative; }
.wn-life__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.scene--life .wn-life__svg--v { display: none; max-width: 440px; margin: 0 auto; }
@media (max-width: 760px) { .scene--life .wn-life__svg--h { display: none; } .scene--life .wn-life__svg--v { display: block; } }
.wn-life__axis { stroke: rgba(130,169,253,0.4); stroke-width: 1.5; }
.wn-life__yr line { stroke: rgba(130,169,253,0.32); stroke-width: 1; }
.wn-life__yr.is-label line { stroke: rgba(176,190,216,0.6); }
.wn-life__yr text { font: 500 14px var(--font-mono); fill: #92a5c8; }
.wn-life__mline { stroke: rgba(254,206,140,0.7); stroke-width: 1.5; stroke-dasharray: 4 6; }
.wn-life__mtick { stroke: #fece8c; stroke-width: 2.5; }
.wn-life__badge { fill: #1a1430; stroke: #f9b64f; stroke-width: 2; }
.wn-life__bn { font-family: var(--font-display); font-weight: 800; font-size: 16px; fill: #fece8c; }
.wn-life__by { font: 600 15px var(--font-mono); fill: #fece8c; }
.wn-life__mark { transition: opacity 500ms var(--st-ease); }
.wn-life__mark .wn-life__badge { transition: fill 400ms var(--st-ease); }
.wn-life__lab { font-size: 17px; font-weight: 700; fill: #f1f4fa; }
.wn-life__lab--end { fill: #ffd2c9; }
.wn-life__seg { stroke: none; }
.wn-life__seg--a { filter: drop-shadow(0 0 10px rgba(61,115,255,0.7)); }
.wn-life__seg--c { filter: drop-shadow(0 0 12px rgba(248,121,102,0.6)); }
.wn-life__more { stroke: none; }
.wn-life__plus { font: 600 14px var(--font-mono); fill: #ffd2c9; }
.wn-life__s1 { font-size: 17px; font-weight: 700; }
.wn-life__s2 { font: 500 13px var(--font-mono); fill: #b0bed8; }
.wn-life__slab--a .wn-life__s1 { fill: #9ab9ff; }
.wn-life__slab--b .wn-life__s1 { fill: #fece8c; }
.wn-life__slab--c .wn-life__s1 { fill: #ffa192; }
.wn-life__slab, .wn-life__lab--end, .wn-life__plus, .wn-life__more { transition: opacity 500ms var(--st-ease); }
.wn-life__cursor { display: none; }
.wn-life__cursor line { stroke: #f1f4fa; stroke-width: 1.5; opacity: 0.8; }
.wn-life__cursor rect { fill: #f1f4fa; }
.wn-life__cy { font-family: var(--font-display); font-weight: 800; font-size: 16px; fill: #030a1d; }
/* live: the life draws in with the scroll; deadlines light as it reaches them */
.scene--life.is-live .wn-life__cursor { display: inline; }
.scene--life.is-live.is-done .wn-life__cursor { opacity: 0; transition: opacity 600ms var(--st-ease); }
.scene--life.is-live .wn-life__mark:not(.is-hit) { opacity: 0.38; }
.scene--life.is-live .wn-life__mark.is-hit .wn-life__badge { fill: #f9b64f; }
.scene--life.is-live .wn-life__mark.is-hit .wn-life__bn { fill: #1a1204; }
.scene--life.is-live .wn-life__slab:not(.is-hit), .scene--life.is-live .wn-life__lab--end:not(.is-hit),
.scene--life.is-live .wn-life__plus:not(.is-hit), .scene--life.is-live .wn-life__more:not(.is-hit) { opacity: 0; }
.wn-life__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .wn-life__legend { grid-template-columns: minmax(0, 1fr); } }
.wn-life__li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--ink-muted); transition: opacity 500ms var(--st-ease), color 500ms var(--st-ease); }
.wn-life__li strong { color: var(--st-amber-2); font-family: var(--font-display); font-weight: 700; }
.wn-life__ln { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 13px/1 var(--font-display); color: #fece8c; box-shadow: inset 0 0 0 2px #f9b64f; }
.scene--life.is-live .wn-life__li:not(.is-hit) { opacity: 0.5; }
.scene--life.is-live .wn-life__li.is-hit .wn-life__ln { background: #f9b64f; color: #1a1204; }
.scene--life .scene__state--a::before { background: var(--st-blue-2); }
.scene--life .scene__state--b::before { background: var(--st-amber); }
.scene--life .scene__state--c::before { background: var(--st-coral); }
.wn-ships { margin-top: clamp(40px, 5vw, 72px); }
.wn-ships__facts { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 14px; }
.wn-ships__facts .fact { padding: 22px 24px 20px; }
.wn-ships__facts .fact::before { left: 24px; right: 24px; }

/* reduced motion: final states, no loops */
@media (prefers-reduced-motion: reduce) {
  .wn-clock__hand, .wn-clock__arc10, .wn-clock__arc29 { animation: none !important; }
  .wn-odds__band { transition: none !important; }
}

/* ---- breach-cost counter (item 27) ---- */
.wn-breach { margin: clamp(48px, 6vw, 88px) 0 0; padding: clamp(22px, 2.6vw, 36px); border-radius: 22px; background: linear-gradient(180deg, rgba(248,121,102,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(248,121,102,0.24); }
.wn-breach__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.wn-breach__k { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); color: var(--st-ink); }
.wn-breach__val { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45em; font-family: var(--font-display); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.wn-breach__year { font-size: clamp(18px, 1.7vw, 24px); color: var(--st-coral-2); letter-spacing: 0.02em; }
.wn-breach__num { font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--st-ink); letter-spacing: -0.03em; }
.wn-breach__unit { font-size: 0.36em; font-weight: 700; color: var(--ink-muted); letter-spacing: 0; }
.wn-breach__val .apq-claim { align-self: flex-start; }
.wn-breach__chart { display: block; width: 100%; max-width: 880px; height: auto; margin: 18px auto 0; overflow: visible; }
.wn-breach__grid line { stroke: rgba(241,244,250,0.12); stroke-width: 1; }
.wn-breach__grid text, .wn-breach__x { fill: var(--ink-muted); font-size: 9px; }
@media (max-width: 860px) { .wn-breach__grid text, .wn-breach__x { font-size: 13px; } }
@media (max-width: 520px) { .wn-breach__grid text, .wn-breach__x { font-size: 19px; } .wn-breach__line { stroke-width: 4.5; } }
.wn-breach__line { fill: none; stroke: var(--st-coral); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.wn-breach__dot { fill: var(--st-night); stroke: var(--st-coral); stroke-width: 2; vector-effect: non-scaling-stroke; transition: r 0.15s var(--st-ease); }
.wn-breach__pt.is-last .wn-breach__dot { fill: var(--st-coral); }
.wn-breach__hit { fill: transparent; }
.wn-breach__pt:hover .wn-breach__dot { r: 7; }
html.apq-motion .wn-breach.is-armed .wn-breach__line { transition: stroke-dashoffset 0.26s linear; }
html.apq-motion .wn-breach.is-armed .wn-breach__pt { transition: opacity 0.2s; }
.wn-breach__pt.is-off { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wn-breach__pt.is-off { opacity: 1; } .wn-breach__line { stroke-dashoffset: 0 !important; } }

/* ---- 35-standards.css ---- */
/* /standards/ — where encryption rules are going, and where SLiM stands. Static first; motion only under html.apq-motion. */

.phero--sd .phero__title { font-size: clamp(44px, 4.9vw, 78px); }
.phero--sd .phero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
@media (max-width: 960px) { .phero--sd .phero__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- hero art: the dates on one ruler ---------- */
.sh-art { margin: 0; }
.sh-art svg { display: block; width: 100%; max-width: 480px; height: auto; margin-left: auto; overflow: visible; font-family: var(--font-text); }
.sh-art__cap { margin-top: 10px; max-width: 480px; margin-left: auto; font-size: 13px; line-height: 1.45; color: var(--ink-faint); }
.sh-art__cap .apq-claim { font-size: 11px; }
.sh-h { font: 600 12px var(--font-mono); letter-spacing: 0.2em; fill: #b0bed8; }
.sh-glow { fill: rgba(249,182,79,0.10); filter: blur(6px); }
.sh-past { stroke-width: 3; }
.sh-win { filter: drop-shadow(0 0 10px rgba(248,121,102,0.7)); }
.sh-tick line { stroke: rgba(130,169,253,0.5); stroke-width: 1.2; }
.sh-tick.is-major line { stroke: rgba(130,169,253,0.8); }
.sh-tick text { font: 500 13px var(--font-mono); fill: #92a5c8; }
.sh-dim path { fill: none; stroke: #fece8c; stroke-width: 1.2; }
.sh-dim text { font: 600 12px var(--font-mono); letter-spacing: 0.06em; fill: #fece8c; }
.sh-m__lead { fill: none; stroke: rgba(130,169,253,0.35); stroke-width: 1; stroke-dasharray: 2 3; }
.sh-m__dot { fill: #030a1d; stroke-width: 2.4; }
.sh-m--signal .sh-m__dot { stroke: #82a9fd; }
.sh-m--ahead .sh-m__dot { stroke: #f9b64f; }
.sh-m--exposed .sh-m__dot { stroke: #f87966; }
.sh-m__t { font-size: 14.5px; font-weight: 700; fill: #f1f4fa; }
.sh-m__s { font: 500 12px var(--font-mono); fill: #92a5c8; }
.sh-m--signal .sh-m__s { fill: #9ab9ff; }
.sh-m--ahead .sh-m__s { fill: #fece8c; }
.sh-m--exposed .sh-m__s { fill: #ffa192; }
.sh-today__dot { fill: #f9b64f; filter: drop-shadow(0 0 10px rgba(249,182,79,0.95)); }
.sh-today__ring { fill: none; stroke: #f9b64f; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.sh-today__t { font-size: 15px; font-weight: 800; fill: #fece8c; }
html.apq-motion .sh-today__ring { animation: sh-ping 2.4s var(--st-ease) infinite; }
@keyframes sh-ping { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
html.apq-motion .sh-win { animation: sh-breathe 2.4s ease-in-out infinite; }
@keyframes sh-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@media (max-width: 960px) { .sh-art svg, .sh-art__cap { margin-left: 0; } }

/* ---------- two kinds of cryptography (scene) ---------- */
.sd-pin { margin-top: 0; }
.ls-svg--narrow { display: none !important; }
@media (max-width: 720px) { .ls-svg--wide { display: none !important; } .ls-svg--narrow { display: block !important; max-width: 440px; margin: 0 auto; } }
.scene--lanes .ls-lab__k { font: 600 12px var(--font-mono); letter-spacing: 0.2em; }
.scene--lanes .ls-lab--pk .ls-lab__k { fill: #ffa192; }
.scene--lanes .ls-lab--sym .ls-lab__k { fill: #9ab9ff; }
.scene--lanes .ls-lab__t { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; fill: #f1f4fa; }
.scene--lanes .ls-lab__s { font-size: 14px; fill: #b0bed8; }
.ls-q ellipse, .ls-q rect { fill: rgba(248,121,102,0.10); stroke: #f87966; stroke-width: 1.6; }
.ls-q path { fill: none; stroke: #ffa192; stroke-width: 1.4; stroke-linecap: round; }
.ls-qhalo { opacity: 0.85; }
.ls-bolt { fill: none; stroke: #ff8f7d; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(248,121,102,0.9)); }
html.apq-motion .ls-bolt { animation: st-blink 1.2s steps(2, jump-none) infinite; }
.scene--lanes .ls-q__t { font-size: 17px; font-weight: 700; fill: #ffa192; }
.scene--lanes .ls-q__s { font-size: 13px; fill: #b0bed8; }
.scene--lanes .ls-svg--narrow .ls-q__t { font-size: 16px; }
.ls-old rect { fill: rgba(248,121,102,0.10); stroke: #f87966; stroke-width: 1.6; transition: fill 600ms var(--st-ease), stroke 600ms var(--st-ease); }
.ls-new rect { fill: rgba(6,42,243,0.26); stroke: #82a9fd; stroke-width: 1.8; filter: drop-shadow(0 0 16px rgba(61,115,255,0.55)); }
.scene--lanes .ls-blk__t { font-family: var(--font-display); font-weight: 700; font-size: 21px; fill: #f1f4fa; }
.scene--lanes .ls-blk__t--sm { font-size: 16px; }
.scene--lanes .ls-blk__s { font-size: 13px; fill: #b0bed8; }
.scene--lanes .ls-blk__s--b { font-weight: 700; fill: #dfe8ff; }
.ls-crack { fill: none; stroke: #ff8f7d; stroke-width: 2; stroke-linejoin: round; }
.ls-arrow { fill: none; stroke: #82a9fd; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene--lanes .ls-arrow__t { font-size: 13px; font-weight: 700; fill: #dfe8ff; }
.scene--lanes .ls-arrow__s { font-size: 13px; font-weight: 600; fill: #fece8c; }
.scene--lanes .ls-arrow__f { font-size: 12px; font-weight: 500; fill: #92a5c8; }
.ls-link path { fill: none; stroke-width: 2; stroke-dasharray: 4 6; transition: stroke 600ms var(--st-ease); }
.ls-link--old path { stroke: #f87966; }
.ls-link--new path { stroke: #82a9fd; }
html.apq-motion .ls-link path { animation: st-march 0.9s linear infinite; }
.scene--lanes .ls-link text { font: 500 12px var(--font-mono); fill: #92a5c8; }
.ls-join { fill: rgba(61,115,255,0.22); stroke: rgba(130,169,253,0.4); stroke-width: 1; }
.scene--lanes .ls-join__t { font: 500 12px var(--font-mono); fill: #92a5c8; }
.ls-seg rect:first-child { fill: rgba(6,42,243,0.18); stroke: #3d73ff; stroke-width: 1.6; transition: stroke 600ms var(--st-ease); }
.ls-seg--l rect:first-child { stroke: #f87966; }
.ls-seg--r rect:first-child { fill: rgba(6,42,243,0.3); stroke: #82a9fd; filter: drop-shadow(0 0 16px rgba(61,115,255,0.5)); }
.ls-chip rect { stroke-width: 1.2; }
.scene--lanes .ls-chip text { font: 600 12px var(--font-mono); }
.ls-chip--bad rect { fill: rgba(248,121,102,0.24); stroke: #f87966; }
.scene--lanes .ls-chip--bad text { fill: #ffd2c9; }
.ls-chip--ok rect { fill: rgba(61,115,255,0.3); stroke: #82a9fd; }
.scene--lanes .ls-chip--ok text { fill: #dfe8ff; }
.scene--lanes .ls-foot { font-size: 13px; fill: #b0bed8; }
/* live: one phase at a time */
.ls-s2, .ls-s3 { transition: opacity 600ms var(--st-ease); }
.scene--lanes.is-live:not(.is-s2) .ls-s2, .scene--lanes.is-live:not(.is-s3) .ls-s3 { opacity: 0; }
.scene--lanes.is-live:not(.is-s2) .ls-old rect { fill: rgba(61,115,255,0.14); stroke: #3d73ff; }
.scene--lanes.is-live:not(.is-s2) .ls-link--old path { stroke: #82a9fd; }
.scene--lanes.is-live:not(.is-s2) .ls-seg--l rect:first-child { stroke: #3d73ff; }
.scene--lanes .scene__state--b::before { background: var(--st-coral); }
.scene--lanes .scene__state--c::before { background: var(--st-blue-3); }
.sd-two { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- the landscape ---------- */
.sd-group { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.sd-group + .sd-group { margin-top: clamp(44px, 5vw, 72px); padding-top: clamp(32px, 4vw, 48px); box-shadow: inset 0 1px 0 rgba(130,169,253,0.12); }
.sd-group__h { position: sticky; top: calc(var(--st-hdr) + 24px); }
.sd-group__k { margin: 0 0 10px; font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-blue-3); }
.sd-group__t { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.08; letter-spacing: -0.015em; color: var(--st-ink); }
.sd-group__d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.sd-group__cards { margin-top: 0 !important; }
.sd-group + * { margin-top: 0; }
.sd-inst { display: flex; flex-direction: column; }
.sd-inst .gcard__title { font-size: clamp(19px, 1.5vw, 23px); }
.sd-inst__asks { flex: 1 0 auto; }
.sd-inst__when { margin-top: 18px; padding-top: 14px; box-shadow: inset 0 1px 0 rgba(130,169,253,0.14); }
.sd-inst__ends { display: flex; justify-content: space-between; margin-top: 2px; font: 500 12px/1 var(--font-mono); color: var(--ink-faint); }
.gcard p.sd-inst__w { margin: 10px 0 0; font: 600 13px/1.4 var(--font-mono); letter-spacing: 0.02em; color: var(--st-ink); }
.mx { display: block; width: 100%; height: auto; overflow: visible; }
.mx__base { stroke: rgba(130,169,253,0.3); stroke-width: 1.5; }
.mx__ticks line { stroke: rgba(130,169,253,0.35); stroke-width: 1; }
.mx__today { fill: #f9b64f; stroke: #f9b64f; stroke-width: 1.2; }
.mx__dot { fill: #3d73ff; stroke: #030a1d; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(61,115,255,0.9)); }
.mx--ahead .mx__dot { fill: #f9b64f; filter: drop-shadow(0 0 5px rgba(249,182,79,0.8)); }
.mx--exposed .mx__dot { fill: #f87966; filter: drop-shadow(0 0 5px rgba(248,121,102,0.8)); }
.gcard--danger .sd-inst__w { color: #ffd2c9; }
.gcard--ahead .sd-inst__w { color: #fff1d6; }
@media (max-width: 1100px) {
  .sd-group { grid-template-columns: minmax(0, 1fr); }
  .sd-group__h { position: static; max-width: 60ch; }
  .sd-group .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) { .sd-group .cards--3, .sd-group .cards--2 { grid-template-columns: minmax(0, 1fr); } }
.sd-sub { margin: clamp(56px, 7vw, 96px) 0 24px; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--st-ink); }
#landscape .hpin { margin-top: 0; }

/* ---------- compliant vs validated ---------- */
.sd-specs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
.sd-specs__vs { align-self: center; font: 600 13px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 860px) { .sd-specs { grid-template-columns: minmax(0, 1fr); } .sd-specs__vs { justify-self: center; } }
.sd-spec { position: relative; padding: clamp(24px, 2.6vw, 36px); border-radius: 24px; color: var(--st-ink); }
.sd-spec--claim { background: rgba(14,16,40,0.6); border: 1.5px dashed rgba(249,182,79,0.55); }
.sd-spec--cert { background: radial-gradient(500px 260px at 100% 0%, rgba(61,115,255,0.3), rgba(61,115,255,0) 70%), linear-gradient(170deg, rgba(14,30,80,0.85), rgba(6,14,36,0.9)); box-shadow: inset 0 0 0 1.5px rgba(130,169,253,0.55), 0 40px 100px -40px rgba(6,42,243,0.6); }
.sd-spec--cert::after { content: ""; position: absolute; right: 20px; top: 18px; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px #82a9fd, inset 0 0 0 5px rgba(3,10,29,0.9), inset 0 0 0 7px rgba(130,169,253,0.5); background: radial-gradient(circle, rgba(61,115,255,0.5), rgba(61,115,255,0.1) 70%); }
.sd-spec__k { margin: 0 0 16px; font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.sd-spec--claim .sd-spec__k { color: #fece8c; }
.sd-spec--cert .sd-spec__k { color: #9ab9ff; }
.sd-spec__word { margin: 0 0 16px; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.sd-spec--claim .sd-spec__word { color: #fff1d6; }
.sd-spec__means { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.sd-spec__rows { margin: 0; }
.sd-spec__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; box-shadow: inset 0 1px 0 rgba(130,169,253,0.12); }
.sd-spec__row dt { font-size: 14px; color: var(--ink-muted); }
.sd-spec__row dd { margin: 0; font: 600 13px/1.4 var(--font-mono); text-align: right; }
.sd-spec__row dd.is-no { color: #fece8c; }
.sd-spec__row dd.is-yes { color: #bff0ff; }
.sd-steps > li::before { color: var(--st-cyan); }
.sd-steps h3 { font-size: 20px; }

/* ---------- where SLiM stands: the ledger ---------- */
.sd-led { border-radius: 26px; padding: clamp(8px, 1.4vw, 16px) clamp(20px, 2.6vw, 36px); background: linear-gradient(180deg, rgba(10,22,52,0.66), rgba(6,14,36,0.6)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16), 0 40px 100px -40px rgba(0,0,0,0.8); }
.sd-led__head, .sd-led__row { display: grid; grid-template-columns: minmax(0, 1.05fr) 170px minmax(0, 1.4fr); gap: 12px 32px; align-items: baseline; }
.sd-led__head { padding: 16px 0 12px; font: 600 11px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.sd-led__row { padding: 22px 0; box-shadow: inset 0 1px 0 rgba(130,169,253,0.12); }
.sd-led__q { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.25; color: var(--st-ink); }
.sd-led__a { margin: 0; }
.sd-led__chip { display: inline-block; padding: 8px 14px; border-radius: 999px; font: 700 13px/1 var(--font-mono); letter-spacing: 0.04em; white-space: nowrap; }
.sd-led__chip--signal { color: #dfe8ff; background: rgba(6,42,243,0.5); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.6), 0 0 18px rgba(61,115,255,0.45); }
.sd-led__chip--ahead { color: #1a1204; background: #f9b64f; box-shadow: 0 0 16px rgba(249,182,79,0.4); }
.sd-led__chip--neutral { color: var(--st-ink); background: rgba(130,169,253,0.12); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.3); }
.sd-led__v { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
@media (max-width: 860px) {
  .sd-led__head { display: none; }
  .sd-led__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
.sd-why { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-today__ring, .sh-win, .ls-bolt, .ls-link path { animation: none !important; }
  .sh-today__ring { opacity: 0; }
}

/* each standard links to where SLiM stands */
.sd-inst__go { display: inline-flex; align-self: flex-start; margin-top: 14px; font: 600 14px/1.3 var(--font-text); color: var(--st-blue-3); text-decoration: none; }
.sd-inst__go:hover, .sd-inst__go:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---- 40-solutions.css ---- */
/* Solutions: the index and four market pages (40-solutions.js). Every class here starts with so-.
   Static first: each scene's default styles show its final, meaningful state. Motion only under html.apq-motion. */

/* ---------- wide and phone drawings of the same scene ---------- */
.so-scene svg.so-tall, .so-panel svg.so-tall { display: none; }
@media (max-width: 720px) {
  .so-scene svg.so-wide, .so-panel svg.so-wide { display: none; }
  .so-scene svg.so-tall, .so-panel svg.so-tall { display: block; }
}
.so-scene .scene__state--c::before { background: var(--st-blue-3); }
.so-src { margin-top: 18px; font-size: 14px; color: var(--ink-faint); }
.so-panel { position: relative; margin: 0; padding: clamp(18px, 3vw, 40px); border-radius: 28px; background: linear-gradient(180deg, rgba(10,22,52,0.6), rgba(5,12,32,0.4)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12), 0 40px 120px -40px rgba(0,0,0,0.8); }
.so-panel svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.so-panel .scene__cap { margin-top: 18px; }
@media (max-width: 640px) { .so-panel { margin-left: calc(var(--layout-inset) * -0.5); margin-right: calc(var(--layout-inset) * -0.5); border-radius: 20px; padding: 16px 14px 18px; } }

/* ---------- hero art ---------- */
.so-art { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.so-art text { font-family: var(--font-text); }
.so-hero .phero__art { display: grid; place-items: center; }
.so-hero .phero__art > .so-art { width: 100%; max-width: 620px; filter: drop-shadow(0 40px 80px rgba(6,42,243,0.28)); }
@media (min-width: 1400px) { .so-hero .phero__art > .so-art { width: 112%; max-width: 660px; margin: -24px -6% -24px 0; } }
@media (max-width: 960px) { .so-hero .phero__art > .so-art { width: 100%; max-width: 560px; margin: 0 auto; } }
.so-hero--grid .phero__art > .so-art { filter: drop-shadow(0 40px 80px rgba(248,101,79,0.18)); }
@media (max-width: 960px) { .so-hero .phero__art { margin: 8px auto 0; width: 100%; } }

/* index hub */
.so-hub__orbit { fill: none; stroke: rgba(130,169,253,0.16); stroke-width: 1; stroke-dasharray: 2 8; }
.so-hub__orbit--2 { stroke: rgba(130,169,253,0.24); }
.so-hub__orbit--out { stroke: rgba(130,169,253,0.12); stroke-dasharray: none; }
.so-hub__speck { fill: #82a9fd; opacity: 0.55; }
html.apq-motion .so-hub__speck { animation: st-blink 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); }
.so-hub__core-t { font: 800 18px var(--font-display); letter-spacing: 0.04em; fill: #5fd4ff; }
.so-hub__wire { fill: none; stroke: rgba(130,169,253,0.3); stroke-width: 2; }
.so-hub__flow { fill: none; stroke: #5fd4ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 22; }
html.apq-motion .so-hub__flow { animation: so-march25 1.6s linear infinite; animation-delay: calc(var(--i) * -0.4s); }
@keyframes so-march25 { to { stroke-dashoffset: -25; } }
.so-hub__ring { fill: none; stroke: rgba(130,169,253,0.5); stroke-width: 1.5; stroke-dasharray: 4 7; transform-box: fill-box; transform-origin: center; }
html.apq-motion .so-hub__ring { animation: so-spin 36s linear infinite; }
@keyframes so-spin { to { transform: rotate(360deg); } }
.so-hub__core > circle { fill: #0b1d4d; stroke: #82a9fd; stroke-width: 2; }
.so-hub__lock { fill: none; stroke: #f1f4fa; stroke-width: 4; stroke-linecap: round; }
.so-hub__lockb { fill: #3d73ff; stroke: #82a9fd; stroke-width: 1.5; }
.so-hub__key { fill: #f1f4fa; stroke: #f1f4fa; stroke-width: 3; stroke-linecap: round; }
.so-hub__edge { fill: none; stroke: rgba(130,169,253,0.4); stroke-width: 1.5; }
.so-hub__glyph { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.so-hub__glyph .so-g-core { fill: rgba(61,115,255,0.3); }
.so-hub__glyph .so-g-dot { fill: #82a9fd; stroke: none; }
.so-g-sweep { transform-box: fill-box; transform-origin: 0 100%; }
html.apq-motion .so-g-sweep { animation: so-spin 5s linear infinite; }
html.apq-motion .so-g-wave { animation: st-blink 2s ease-in-out infinite; }
html.apq-motion .so-g-wave--2 { animation-delay: -1s; }
.so-hub__t { font: 600 15px var(--font-mono); letter-spacing: 0.12em; fill: #c8d4ec; }
html.apq-motion .so-hub__badge { animation: so-float 7s var(--st-ease-io) infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
@keyframes so-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* government scope */
.so-gv__ring { fill: none; stroke: rgba(130,169,253,0.2); stroke-width: 1; }
.so-gv__cross { stroke: rgba(130,169,253,0.16); stroke-width: 1; }
.so-gv__sweep { transform-box: view-box; transform-origin: 300px 300px; }
html.apq-motion .so-gv__sweep { animation: so-spin 7s linear infinite; }
.so-gv__beam { stroke: rgba(95,212,255,0.75); stroke-width: 1.5; }
.so-gv__wire { fill: none; stroke: rgba(130,169,253,0.34); stroke-width: 1.2; stroke-dasharray: 2 6; }
html.apq-motion .so-gv__wire { animation: so-march8 1.2s linear infinite; }
@keyframes so-march8 { to { stroke-dashoffset: -8; } }
.so-gv__dot { fill: #5fd4ff; }
.so-gv__ping { fill: none; stroke: #5fd4ff; stroke-width: 1.5; opacity: 0.55; transform-box: fill-box; transform-origin: center; }
html.apq-motion .so-gv__ping { animation: so-ping 2.8s var(--st-ease) infinite; animation-delay: calc(var(--i) * -0.4s); }
@keyframes so-ping { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(2.3); opacity: 0; } }
.so-gv__lbl { font: 600 12px var(--font-mono); letter-spacing: 0.12em; fill: #9ab9ff; }
.so-gv__core > path:first-child { fill: #0b1d4d; stroke: #82a9fd; stroke-width: 2; }
.so-gv__key { fill: #f1f4fa; }
.so-gv__track { fill: none; stroke: rgba(130,169,253,0.16); stroke-width: 7; stroke-linecap: round; }
.so-gv__win { fill: none; stroke: #f9b64f; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(249,182,79,0.7)); }
.so-gv__win--2 { stroke: #f87966; filter: drop-shadow(0 0 8px rgba(248,121,102,0.7)); }
.so-gv__tick { stroke: rgba(130,169,253,0.5); stroke-width: 1.5; }
.so-gv__tick.is-major { stroke: #c8d4ec; stroke-width: 2.5; }
.so-gv__tick.is-late { stroke: rgba(254,206,140,0.8); }
.so-gv__yr { font: 600 15px var(--font-mono); fill: #b0bed8; }
.so-gv__yr.is-late { fill: #fece8c; }
.so-gv__x { font: 700 15px var(--font-mono); letter-spacing: 0.2em; fill: #fece8c; }

/* device board */
.so-ch__board { stroke: rgba(130,169,253,0.38); stroke-width: 1.5; }
.so-ch__hole { fill: #030a1d; stroke: rgba(130,169,253,0.45); stroke-width: 2; }
.so-ch__traces path { fill: none; stroke: rgba(130,169,253,0.34); stroke-width: 2; stroke-linejoin: round; }
.so-ch__pad { fill: rgba(249,182,79,0.55); }
.so-ch__live { fill: none; stroke: #5fd4ff; stroke-width: 3; stroke-dasharray: 4 10; stroke-linecap: round; }
html.apq-motion .so-ch__live { animation: so-march14 0.9s linear infinite reverse; }
html.apq-motion .so-ch__live--2 { animation-direction: normal; }
@keyframes so-march14 { to { stroke-dashoffset: -14; } }
.so-ch__mod { fill: rgba(9,20,48,0.96); stroke: rgba(130,169,253,0.5); stroke-width: 1.5; }
.so-ch__ant { fill: none; stroke: #fece8c; stroke-width: 2; stroke-linejoin: round; }
.so-ch__k { font: 600 12px var(--font-mono); letter-spacing: 0.08em; fill: #b0bed8; }
.so-ch__sense { fill: rgba(95,212,255,0.12); stroke: #5fd4ff; stroke-width: 1.5; }
.so-ch__cell2 { fill: none; stroke: rgba(249,182,79,0.75); stroke-width: 2; }
.so-ch__cell { fill: rgba(130,169,253,0.08); stroke: rgba(130,169,253,0.28); stroke-width: 1; }
.so-ch__lit { fill: #5fd4ff; filter: drop-shadow(0 0 6px rgba(95,212,255,0.9)); }
.so-ch__lead { fill: none; stroke: #5fd4ff; stroke-width: 1.5; }
.so-ch__slim { font: 800 17px var(--font-display); fill: #5fd4ff; }
.so-ch__pin { fill: #82a9fd; opacity: 0.85; }
.so-ch__mcu { fill: #0b1838; stroke: #3d73ff; stroke-width: 2; }
.so-ch__die { fill: rgba(61,115,255,0.2); stroke: rgba(130,169,253,0.5); stroke-width: 1; }
.so-ch__dot1 { fill: #82a9fd; }
.so-ch__mcut { font: 800 28px var(--font-display); letter-spacing: 0.04em; fill: #f1f4fa; }
.so-ch__mcus { font: 600 12px var(--font-mono); letter-spacing: 0.16em; fill: #9ab9ff; }
.so-ch__silk { font: 500 12px var(--font-mono); letter-spacing: 0.12em; fill: #92a5c8; }
.so-ch__wave { fill: none; stroke: rgba(254,206,140,0.7); stroke-width: 2; stroke-linecap: round; }
html.apq-motion .so-ch__wave { animation: st-blink 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.3s); }
.so-ch__pkt rect { fill: #0b1838; stroke: #3d73ff; stroke-width: 1.5; }
.so-ch__pktt { font: 600 12px var(--font-mono); fill: #9ab9ff; }
html.apq-motion .so-ch__pkt { animation: so-rise 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); }
@keyframes so-rise { 0% { transform: translateY(12px); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }

/* operators: the mast */
.so-tw__hex { fill: rgba(61,115,255,0.035); stroke: rgba(130,169,253,0.38); stroke-width: 1; }
.so-tw__wave path { fill: none; stroke: rgba(95,212,255,0.7); stroke-width: 2.2; stroke-linecap: round; }
html.apq-motion .so-tw__wave { animation: so-wave 2.4s ease-out infinite; animation-delay: calc(var(--i) * 0.3s); }
@keyframes so-wave { 0% { opacity: 0.15; } 30% { opacity: 1; } 100% { opacity: 0.15; } }
.so-tw__wire { fill: none; stroke: rgba(130,169,253,0.32); stroke-width: 1.5; stroke-dasharray: 2 6; }
.so-tw__flow { fill: none; stroke: #5fd4ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 26; }
html.apq-motion .so-tw__flow { animation: so-march28 1.8s linear infinite; animation-delay: calc(var(--i, 0) * -0.3s); }
@keyframes so-march28 { to { stroke-dashoffset: -28; } }
.so-tw__dev { fill: #0b1838; stroke: #82a9fd; stroke-width: 1.8; }
.so-tw__devl { fill: none; stroke: #82a9fd; stroke-width: 2; stroke-linecap: round; }
.so-tw__led { fill: #5fd4ff; }
html.apq-motion .so-tw__led { animation: st-blink 1.6s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * -0.27s); }
.so-tw__lbl { font: 600 12px var(--font-mono); letter-spacing: 0.12em; fill: #9ab9ff; }
.so-tw__panel { fill: rgba(61,115,255,0.3); stroke: #82a9fd; stroke-width: 1.5; }
.so-tw__mast path, .so-tw__mast rect { fill: none; stroke: #82a9fd; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.so-tw__mast rect { fill: #0b1838; }
.so-tw__mast .so-tw__brace { stroke-width: 1.5; opacity: 0.75; }
.so-tw__beacon { fill: #f87966; }
html.apq-motion .so-tw__beacon { animation: st-blink 1.4s ease-in-out infinite; }

/* utilities: the grid */
.so-gr__wire { fill: none; stroke: rgba(130,169,253,0.55); stroke-width: 1.5; }
.so-gr__flow { fill: none; stroke: #5fd4ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 30; }
html.apq-motion .so-gr__flow { animation: so-march32 2.2s linear infinite; animation-delay: calc(var(--i, 0) * -0.45s); }
@keyframes so-march32 { to { stroke-dashoffset: -32; } }
.so-gr__pylon path { fill: none; stroke: #82a9fd; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.so-gr__pylon .so-gr__brace { stroke-width: 1.4; opacity: 0.75; }
.so-gr__ins { fill: #0b1838; stroke: #82a9fd; stroke-width: 2; }
.so-gr__tower path { fill: none; stroke: #82a9fd; stroke-width: 2.2; stroke-linecap: round; }
.so-gr__tank { fill: #0b1838; stroke: #82a9fd; stroke-width: 2.2; }
.so-gr__level { stroke: #5fd4ff; stroke-width: 2; }
.so-gr__led { fill: #5fd4ff; }
html.apq-motion .so-gr__led { animation: st-blink 1.6s steps(2, jump-none) infinite; animation-delay: calc(var(--i, 0) * -0.4s); }
.so-gr__k { font: 600 12px var(--font-mono); letter-spacing: 0.14em; fill: #b0bed8; }
.so-gr__house > path:first-child { fill: #0b1838; stroke: #82a9fd; stroke-width: 2.2; stroke-linejoin: round; }
.so-gr__house > circle { fill: none; stroke: #82a9fd; stroke-width: 2; }
.so-gr__imp { fill: none; stroke: #5fd4ff; stroke-width: 2.4; stroke-linecap: round; transform-box: view-box; transform-origin: 366px 506px; }
html.apq-motion .so-gr__imp { animation: so-spin 3s linear infinite; }
.so-gr__pipe { fill: none; stroke: rgba(130,169,253,0.4); stroke-width: 8; stroke-linecap: round; }
.so-gr__flow--pipe { stroke-width: 3; }
.so-gr__meter > path { stroke: #82a9fd; stroke-width: 2; }
.so-gr__meter > circle:not(.so-gr__led) { fill: #0b1838; stroke: #82a9fd; stroke-width: 2; }
.so-gr__lcd { fill: rgba(95,212,255,0.3); stroke: #5fd4ff; stroke-width: 1; }
.so-gr__beacon { fill: #f87966; }
html.apq-motion .so-gr__beacon { animation: st-blink 1.4s ease-in-out infinite; }

/* ---------- government: x + y > z ---------- */
.so-ms-f__eq { font: 800 54px var(--font-display); letter-spacing: -0.01em; fill: #f1f4fa; }
.so-ms-f__eq--s { font-size: 38px; }
.so-ms-f__k { font-size: 15px; fill: #b0bed8; }
.so-ms-f__k--s { font-size: 13px; }
.so-ms-f .is-x { fill: #82a9fd; font-weight: 800; }
.so-ms-f .is-y { fill: #fece8c; font-weight: 800; }
.so-ms-f .is-z { fill: #ffa192; font-weight: 800; }
.so-ms-win__edge { stroke: rgba(249,182,79,0.75); stroke-width: 1.5; stroke-dasharray: 4 5; }
.so-ms-win__edge--2 { stroke: rgba(248,121,102,0.85); }
.so-ms-win__h { font: 600 12px var(--font-mono); letter-spacing: 0.08em; fill: #fece8c; }
.so-ms-win__v { font: 800 30px var(--font-display); fill: #fece8c; }
.so-ms-win__v--2 { fill: #ffa192; }
.so-ms-win__v--s { font-size: 24px; }
.so-ms-win__s { font-size: 14px; fill: #c8d4ec; }
.so-ms-o line { stroke: #5fd4ff; stroke-width: 1.5; stroke-dasharray: 3 5; }
.so-ms-o circle { fill: #5fd4ff; }
.so-ms-o__t { font: 600 13px var(--font-mono); letter-spacing: 0.04em; fill: #5fd4ff; }
.so-ms-lane__k { font-size: 16px; font-weight: 700; fill: #f1f4fa; }
.so-ms-lane__k--s { font-size: 13px; }
.so-ms-bar { filter: drop-shadow(0 0 10px rgba(61,115,255,0.6)); transform-box: fill-box; transform-origin: 0 50%; }
.so-ms-bar--v { transform-origin: 50% 0; }
.so-ms-lane__end { font: 600 14px var(--font-mono); fill: #c8d4ec; }
.so-ms-ov { filter: drop-shadow(0 0 12px rgba(248,101,79,0.7)); }
.so-ms-ov__t { font-size: 15px; font-weight: 700; fill: #ffa192; }
.so-tall .so-ms-ov__t { font-size: 13px; }
.so-ms-ax line { stroke: rgba(130,169,253,0.45); stroke-width: 1.5; }
.so-ms-ax__t { font: 500 14px var(--font-mono); fill: #92a5c8; }
.so-tall .so-ms-ax__t { font-size: 13px; }
.so-ms-cur { display: none; }
.so-ms.is-live .so-ms-cur { display: inline; }
.so-ms-cur line { stroke: #f1f4fa; stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.85; }
.so-ms-cur__y { font: 800 20px var(--font-display); fill: #f1f4fa; }
.so-tall .so-ms-cur__y { font-size: 15px; }
.so-ms.is-live .so-ms-bar { transform: scaleX(var(--g, 0)); }
.so-ms.is-live .so-ms-bar--v { transform: scaleY(var(--g, 0)); }
.so-ms.is-live .so-ms-win { opacity: var(--w, 0); }
.so-ms.is-live .so-ms-ov, .so-ms.is-live .so-ms-ov__t { opacity: var(--o, 0); }
.so-ms.is-live .so-ms-lane__end { opacity: var(--g, 0); }

/* ---------- device makers: the memory map ---------- */
.so-map__chip { fill: rgba(12,26,60,0.55); stroke: rgba(130,169,253,0.32); stroke-width: 1.5; }
.so-map__h { font: 600 12px var(--font-mono); letter-spacing: 0.24em; fill: #92a5c8; }
.so-map__k { font-size: 17px; font-weight: 700; fill: #f1f4fa; }
.so-map__u { font: 500 13px var(--font-mono); fill: #92a5c8; }
.so-map__tls { font-size: 16px; font-weight: 700; fill: #ffa192; }
.so-map__tls--s { font-size: 14px; }
.so-map__slim { font-size: 17px; font-weight: 700; fill: #9ab9ff; }
.so-map__slim--s { font-size: 14px; }
.so-map__left { font-size: 15px; font-weight: 600; fill: #5fd4ff; }
.so-map__left--s { font-size: 13px; }
.so-c { fill: rgba(130,169,253,0.06); stroke: rgba(130,169,253,0.24); stroke-width: 1; }
.so-c-t { opacity: 0; }
.so-c-t.is-hatch { stroke: rgba(248,121,102,0.55); stroke-width: 1; }
.so-c-s { fill: #3d73ff; stroke: #9ab9ff; stroke-width: 1; }
.so-cells { filter: none; }
.so-deck { opacity: 0.45; }
.so-deck__s { fill: rgba(248,121,102,0.06); stroke: rgba(248,121,102,0.75); stroke-width: 1.5; stroke-dasharray: 6 5; }
.so-map.is-live .so-c-t { opacity: 0; transition: opacity 400ms var(--st-ease); }
.so-map.is-live[data-phase="b"] .so-c-t { opacity: clamp(0, calc(var(--t, 0) * var(--n) - var(--i)), 1); transition: none; }
.so-map.is-live .so-c-s { opacity: clamp(0, calc(var(--s, 0) * var(--sn) - var(--i)), 1); }
.so-map.is-live .so-deck { opacity: 0; transition: opacity 500ms var(--st-ease); }
.so-map.is-live[data-phase="b"] .so-deck { opacity: clamp(0, calc(var(--t, 0) * 4 - 2.8), 1); transition: none; }
.so-map.is-live[data-phase="c"] .so-deck { opacity: 0.28; }
.so-map.is-live .so-map__tls, .so-map.is-live .so-map__slim, .so-map.is-live .so-map__left { opacity: 0; transition: opacity 500ms var(--st-ease); }
.so-map.is-live[data-phase="b"] .so-map__tls { opacity: 1; }
.so-map.is-live[data-phase="c"] .so-map__tls { opacity: 0.5; }
.so-map.is-live[data-phase="c"] .so-map__slim, .so-map.is-live[data-phase="c"] .so-map__left { opacity: 1; }

/* ---------- operators: airtime ---------- */
.so-air__h { font: 600 12px var(--font-mono); letter-spacing: 0.18em; fill: #92a5c8; }
.so-air__lane { font: 800 21px var(--font-display); fill: #ffa192; }
.so-air__lane--slim { fill: #9ab9ff; }
.so-air__lane--s { font-size: 17px; }
.so-air__lsub { font-size: 13px; fill: #b0bed8; }
.so-air__tls { stroke: rgba(248,121,102,0.85); stroke-width: 1.5; transform-box: fill-box; transform-origin: 0 50%; }
.so-air__tls--v { transform-origin: 50% 0; }
.so-air__ext { stroke: rgba(248,121,102,0.75); stroke-width: 1.5; stroke-dasharray: 5 4; }
.so-air__in { font-size: 16px; font-weight: 700; fill: #ffe4dd; }
.so-air__in--s { font: 800 20px var(--font-display); }
.so-air__ins { font: 500 13px var(--font-mono); fill: #ffd2c9; }
.so-air__ext-t { font: 600 13px var(--font-mono); fill: #ffa192; }
.so-air__ext-t--s { font-size: 13px; }
.so-air__blk > rect:first-child { stroke: #9ab9ff; stroke-width: 1; }
.so-air__slimg { filter: drop-shadow(0 0 10px rgba(61,115,255,0.55)); }
.so-air__sent { fill: #062af3; }
.so-air__bt { font: 800 14px var(--font-mono); fill: #030a1d; }
.so-air__n { font: 800 36px var(--font-display); fill: #f1f4fa; }
.so-air__n--s { font-size: 26px; }
.so-air__sub { font: 500 13px var(--font-mono); fill: #9ab9ff; }
.so-air__brace path { fill: none; stroke: #82a9fd; stroke-width: 1.5; }
.so-air__brace .so-air__brace2 { stroke-dasharray: 4 4; }
.so-air__bl { font-size: 15px; font-weight: 700; fill: #f1f4fa; }
.so-air__bl--2 { fill: #9ab9ff; }
.so-air__bls { font-size: 12px; fill: #b0bed8; }
.so-air__ax line { stroke: rgba(130,169,253,0.38); stroke-width: 1.2; }
.so-air__axt { font: 500 13px var(--font-mono); fill: #92a5c8; }
.so-tall .so-air__axt { font-size: 12px; }
.so-air__axk { font: 600 12px var(--font-mono); letter-spacing: 0.2em; fill: #92a5c8; }
.so-air.is-live .so-air__tls { transform: scaleX(var(--a, 0)); }
.so-air.is-live .so-air__tls--v { transform: scaleY(var(--a, 0)); }
.so-air.is-live .so-air__ext, .so-air.is-live .so-air__ext-t, .so-air.is-live .so-air__in, .so-air.is-live .so-air__ins { opacity: clamp(0, calc(var(--a, 0) * 5 - 4), 1); }
.so-air.is-live .so-air__blk { opacity: 0; transform: translateY(10px); transition: opacity 300ms var(--st-ease), transform 450ms var(--st-ease); }
.so-air.is-live .so-air__blk.is-on { opacity: 1; transform: none; }
.so-air.is-live .so-air__brace { opacity: 0; transition: opacity 500ms var(--st-ease); }
.so-air.is-live[data-phase="c"] .so-air__brace { opacity: 1; }

/* ---------- utilities: the forged reading ---------- */
.so-pump text { transition: opacity 450ms var(--st-ease); }
.so-pump__wall { fill: none; stroke: #82a9fd; stroke-width: 3; stroke-linejoin: round; }
.so-pump__rise { opacity: 0; transition: opacity 600ms var(--st-ease); }
.so-pump__spill { fill: none; stroke: #5fd4ff; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity 500ms var(--st-ease); }
.so-pump__over { font: 800 19px var(--font-display); letter-spacing: 0.06em; fill: #ff8f7d; opacity: 0; }
.so-pump__k { font: 600 12px var(--font-mono); letter-spacing: 0.14em; fill: #92a5c8; }
.so-pump__lvl { font: 700 13px var(--font-mono); fill: #041027; }
.so-pump__box { fill: #0b1838; stroke: #82a9fd; stroke-width: 1.8; }
.so-pump__ant { stroke: #82a9fd; stroke-width: 2; }
.so-pump__led { fill: #5fd4ff; }
html.apq-motion .so-pump__led { animation: st-blink 1.4s steps(2, jump-none) infinite; }
.so-pump__s { font-size: 14px; fill: #c8d4ec; }
.so-pump__link { fill: none; stroke: rgba(130,169,253,0.45); stroke-width: 2; stroke-dasharray: 3 6; }
.so-pump__ok rect { fill: rgba(61,115,255,0.26); stroke: #3d73ff; stroke-width: 1.4; }
.so-pump__ok text { font: 700 13px var(--font-mono); fill: #dfe8ff; }
html.apq-motion .so-pk { animation: so-pk 3.9s linear infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes so-pk { 0% { transform: translateX(-40px); opacity: 0; } 12%, 84% { opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
html.apq-motion .so-pk--v { animation-name: so-pkv; }
@keyframes so-pkv { 0% { transform: translateY(-30px); opacity: 0; } 12%, 84% { opacity: 1; } 100% { transform: translateY(84px); opacity: 0; } }
.so-pump__atk, .so-pump__atkp, .so-pump__fin, .so-pump__fout, .so-pump__guard { transition: opacity 450ms var(--st-ease); }
.so-pump__atk circle { fill: rgba(248,121,102,0.16); stroke: #f87966; stroke-width: 2; }
.so-pump__atk path { stroke: #f87966; stroke-width: 2.5; stroke-linecap: round; }
.so-pump__atkt { font-size: 16px; font-weight: 700; fill: #ffa192; }
.so-pump__atkp { fill: none; stroke: #f87966; stroke-width: 1.6; stroke-dasharray: 4 6; }
html.apq-motion .so-pump__atkp { animation: st-march 0.9s linear infinite; }
.so-pump__forged rect { fill: rgba(248,121,102,0.26); stroke: #f87966; stroke-width: 1.6; }
.so-pump__forged text { font: 700 13px var(--font-mono); fill: #ffe4dd; }
.so-pump__fin { opacity: 0; }
.so-pump__bounce { fill: none; stroke: #f87966; stroke-width: 1.5; stroke-dasharray: 3 4; }
.so-pump__x { stroke: #f1f4fa; stroke-width: 3; stroke-linecap: round; }
.so-pump__rej { font: 800 16px var(--font-display); letter-spacing: 0.08em; fill: #ff8f7d; }
.so-pump__rejs { font-size: 13px; fill: #c8d4ec; }
.so-pump__lockhalo { fill: rgba(95,212,255,0.12); stroke: rgba(95,212,255,0.55); stroke-width: 1.5; }
.so-pump__shackle { fill: none; stroke: #5fd4ff; stroke-width: 3; stroke-linecap: round; }
.so-pump__lockb { fill: #5fd4ff; }
.so-pump__guard { filter: drop-shadow(0 0 10px rgba(95,212,255,0.6)); }
.so-pump__gt { font: 600 12px var(--font-mono); letter-spacing: 0.12em; fill: #5fd4ff; }
.so-pump__gl { fill: none; stroke: rgba(95,212,255,0.5); stroke-width: 1.2; stroke-dasharray: 2 4; }
.so-pump__plc, .so-pump__hmi { fill: #0b1838; stroke: #3d73ff; stroke-width: 1.8; transition: stroke 400ms var(--st-ease); }
.so-pump__code { font: 600 14px var(--font-mono); fill: #dfe8ff; white-space: pre; }
.so-pump__div { stroke: rgba(130,169,253,0.25); }
.so-pump__in { font: 800 26px var(--font-display); }
.so-pump__in--ok { fill: #82a9fd; }
.so-pump__in--bad, .so-pump__st--bad, .so-pump__hv--bad, .so-pump__hs--bad { opacity: 0; }
.so-pump__in--bad { fill: #ff8f7d; }
.so-pump__ctl { fill: none; stroke: rgba(130,169,253,0.5); stroke-width: 1.6; stroke-dasharray: 3 5; }
.so-pump__pipe { fill: none; stroke: rgba(130,169,253,0.35); stroke-width: 12; stroke-linecap: round; }
.so-pump__flow { fill: none; stroke: #5fd4ff; stroke-width: 4; stroke-dasharray: 6 12; stroke-linecap: round; opacity: 0; transition: opacity 400ms var(--st-ease); }
.so-pump__body { fill: #0b1838; stroke: #82a9fd; stroke-width: 2.4; transition: stroke 400ms var(--st-ease); }
.so-pump__imp path { fill: none; stroke: #82a9fd; stroke-width: 3; stroke-linecap: round; }
.so-pump__imp circle { fill: #82a9fd; }
.so-pump__imp { transform-box: view-box; }
.so-wide .so-pump__imp { transform-origin: 900px 430px; }
.so-tall .so-pump__imp { transform-origin: 80px 380px; }
.so-pump__st { font: 700 14px var(--font-mono); letter-spacing: 0.12em; }
.so-pump__st--ok { fill: #82a9fd; }
.so-pump__st--bad { fill: #ff8f7d; }
.so-pump__glass { fill: rgba(6,42,243,0.16); stroke: rgba(130,169,253,0.2); }
.so-pump__hv { font: 800 46px var(--font-display); }
.so-pump__hv--ok { fill: #f1f4fa; }
.so-pump__hv--bad { fill: #ff8f7d; }
.so-pump__hs { font: 700 12px var(--font-mono); letter-spacing: 0.1em; }
.so-pump__hs--ok { fill: #5fd4ff; }
.so-pump__hs--bad { fill: #ff8f7d; }
.so-pump.is-live[data-phase="a"] .so-pump__atk, .so-pump.is-live[data-phase="a"] .so-pump__atkp, .so-pump.is-live[data-phase="a"] .so-pump__fout, .so-pump.is-live[data-phase="a"] .so-pump__guard { opacity: 0; }
.so-pump.is-live[data-phase="b"] .so-pump__guard, .so-pump.is-live[data-phase="b"] .so-pump__fout { opacity: 0; }
.so-pump.is-live[data-phase="b"] .so-pump__fin { opacity: 1; }
.so-pump.is-live[data-phase="b"] .so-pump__in--ok, .so-pump.is-live[data-phase="b"] .so-pump__st--ok, .so-pump.is-live[data-phase="b"] .so-pump__hv--ok, .so-pump.is-live[data-phase="b"] .so-pump__hs--ok, .so-pump.is-live[data-phase="b"] .so-pump__lvl { opacity: 0; }
.so-pump.is-live[data-phase="b"] .so-pump__in--bad, .so-pump.is-live[data-phase="b"] .so-pump__st--bad, .so-pump.is-live[data-phase="b"] .so-pump__hv--bad, .so-pump.is-live[data-phase="b"] .so-pump__hs--bad { opacity: 1; }
.so-pump.is-live[data-phase="b"] .so-pump__rise, .so-pump.is-live[data-phase="b"] .so-pump__spill, .so-pump.is-live[data-phase="b"] .so-pump__over, .so-pump.is-live[data-phase="b"] .so-pump__flow { opacity: 1; }
.so-pump.is-live[data-phase="b"] .so-pump__plc, .so-pump.is-live[data-phase="b"] .so-pump__hmi, .so-pump.is-live[data-phase="b"] .so-pump__body { stroke: #f87966; }
html.apq-motion .so-pump.is-live[data-phase="b"] .so-pump__imp { animation: so-spin 0.9s linear infinite; }
html.apq-motion .so-pump.is-live[data-phase="b"] .so-pump__flow { animation: so-march18 0.8s linear infinite; }
@keyframes so-march18 { to { stroke-dashoffset: -18; } }

/* ---------- index: the class squares ---------- */
.so-sq { transform-box: fill-box; transition: transform 1300ms var(--st-ease); }
.so-sq--dev { fill: rgba(130,169,253,0.06); stroke: #f1f4fa; stroke-width: 2; }
.so-sq--tlsmax { stroke: #f87966; stroke-width: 2; stroke-dasharray: 8 6; transform-origin: 0 100%; transition-delay: 450ms; }
.so-sq--tlsmin { fill: rgba(248,121,102,0.55); stroke: #f87966; stroke-width: 1.5; transform-origin: 0 100%; transition-delay: 250ms; }
.so-sq--slim { fill: #2f62f5; stroke: #9ab9ff; stroke-width: 1.5; filter: drop-shadow(0 0 16px rgba(61,115,255,0.85)); transform-origin: 100% 100%; transition-delay: 1000ms; }
html.apq-live.apq-motion .so-cls:not(.is-in) .so-sq--tlsmax, html.apq-live.apq-motion .so-cls:not(.is-in) .so-sq--tlsmin, html.apq-live.apq-motion .so-cls:not(.is-in) .so-sq--slim { transform: scale(0.02); }
.so-cls__h { font: 800 30px var(--font-display); fill: #f1f4fa; }
.so-cls__hs { font: 500 12px var(--font-mono); letter-spacing: 0.16em; fill: #92a5c8; }
.so-cls__tl { font-size: 16px; font-weight: 700; fill: #ffa192; }
.so-cls__dk { font-size: 16px; font-weight: 700; fill: #f1f4fa; }
.so-cls__dk--s { font-size: 14px; }
.so-cls__dv { font-size: 14px; fill: #c8d4ec; }
.so-cls__mt { font: 700 13px var(--font-mono); fill: #ffa192; }
.so-cls__st { font-size: 15px; font-weight: 800; fill: #ffffff; }
.so-cls__st--s { font-size: 12px; }
.so-cls__sv { font: 600 12px var(--font-mono); fill: #ffffff; }
.so-cls__out { font-size: 15px; font-weight: 700; fill: #ffa192; }
.so-cls__lg .so-sq { transform: none !important; transition: none; }
.so-cls__lgt { font-size: 15px; font-weight: 700; fill: #f1f4fa; }
.so-cls__lgs { font: 500 12px var(--font-mono); fill: #92a5c8; }

/* ---------- utilities: the meter dial ---------- */
.so-dial { margin: 0 auto; max-width: 540px; }
.so-dial svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.so-dial__face { stroke: rgba(130,169,253,0.22); stroke-width: 1.5; }
.so-dial__track { fill: none; stroke: rgba(130,169,253,0.12); stroke-width: 16; stroke-linecap: round; }
.so-dial__arc { fill: none; stroke-width: 16; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms linear; }
.so-dial__arc.is-a { stroke: #3d73ff; }
.so-dial__arc.is-b { stroke: #f9b64f; transition-delay: 800ms; filter: drop-shadow(0 0 8px rgba(249,182,79,0.6)); }
.so-dial__arc.is-c { stroke: #f87966; transition-delay: 1600ms; filter: drop-shadow(0 0 8px rgba(248,121,102,0.6)); }
html.apq-live.apq-motion .so-dial:not(.is-in) .so-dial__arc { stroke-dashoffset: 1; }
.so-dial__tick { stroke: rgba(130,169,253,0.5); stroke-width: 2; }
.so-dial__tick.is-major { stroke: #f1f4fa; stroke-width: 3; }
.so-dial__y { font: 700 18px var(--font-mono); fill: #f1f4fa; }
.so-dial__m--2030 .so-dial__y, .so-dial__m--2030 .so-dial__w { fill: #fece8c; }
.so-dial__m--2035 .so-dial__y, .so-dial__m--2035 .so-dial__w { fill: #ffa192; }
.so-dial__w { font: 600 13px var(--font-mono); letter-spacing: 0.06em; }
.so-dial__big { font: 900 80px var(--font-display); letter-spacing: -0.03em; fill: #f1f4fa; }
.so-dial__cap { font: 600 12px var(--font-mono); letter-spacing: 0.18em; fill: #c8d4ec; }
.so-dial__needle path { fill: #f1f4fa; }
.so-dial__needle circle { fill: #0b1838; stroke: #f1f4fa; stroke-width: 3; }
.so-dial__needle { transform-box: view-box; transform-origin: 260px 290px; transition: transform 2600ms var(--st-ease); }
html.apq-live.apq-motion .so-dial:not(.is-in) .so-dial__needle { transform: rotate(-270deg); }
.so-dial__lcd { fill: rgba(95,212,255,0.08); stroke: rgba(95,212,255,0.45); }
.so-dial__lcdt { font: 700 16px var(--font-mono); letter-spacing: 0.06em; fill: #5fd4ff; }
.so-life .stats--2 { gap: 28px; }
@media (max-width: 960px) { .so-dial { max-width: 440px; } }
@media (max-width: 720px) { .so-dial__y { font-size: 24px; } .so-dial__w { font-size: 18px; } .so-dial__cap { font-size: 17px; letter-spacing: 0.12em; } .so-dial__lcdt { font-size: 21px; } }

/* ---------- operators: the compromised core, the SIM ---------- */
.so-core__net { stroke: rgba(248,121,102,0.45); stroke-width: 1.5; stroke-dasharray: 6 5; }
.so-core__k { font: 600 13px var(--font-mono); letter-spacing: 0.14em; fill: #ffa192; }
.so-core__k--s { font-size: 12px; letter-spacing: 0.1em; fill: #c8d4ec; }
.so-core__wire { fill: none; stroke: rgba(248,121,102,0.55); stroke-width: 2; stroke-dasharray: 3 6; }
.so-core__wire--b { stroke: rgba(130,169,253,0.6); }
html.apq-motion .so-core__wire { animation: st-march 0.9s linear infinite reverse; }
.so-core__dev { fill: #0b1838; stroke: #f87966; stroke-width: 2; }
.so-core__dev--b { stroke: #82a9fd; }
.so-core__led { fill: #f87966; }
.so-core__led--b { fill: #5fd4ff; }
.so-core__app { fill: #0b1838; stroke: rgba(130,169,253,0.65); stroke-width: 2; }
.so-core__dl { font-size: 16px; font-weight: 700; fill: #ffa192; }
.so-core__dl--b { fill: #9ab9ff; }
.so-core__pk rect { stroke-width: 1.5; }
.so-core__pk text { font: 700 12px var(--font-mono); }
.so-core__pk--a rect { fill: rgba(248,121,102,0.22); stroke: #f87966; }
.so-core__pk--a text { fill: #ffe4dd; }
.so-core__pk--b rect { fill: rgba(61,115,255,0.26); stroke: #3d73ff; }
.so-core__pk--b text { fill: #cfe0ff; }
.so-core__tap { fill: none; stroke: #f87966; stroke-width: 1.6; stroke-dasharray: 3 4; }
.so-core__iris { fill: rgba(248,121,102,0.18); stroke: #f87966; stroke-width: 2; }
.so-core__lid { fill: none; stroke: #ffa192; stroke-width: 2; }
.so-core__pupil { fill: #ffa192; }
.so-core__seen { font: 700 14px var(--font-mono); fill: #ffa192; }
.so-core__seen--b { fill: #9ab9ff; }
.so-sim__card { stroke: rgba(130,169,253,0.5); stroke-width: 2; }
.so-sim__cut { fill: none; stroke: rgba(130,169,253,0.28); stroke-width: 1.2; stroke-dasharray: 5 5; }
.so-sim__chip { stroke: rgba(26,18,4,0.5); stroke-width: 1; filter: drop-shadow(0 0 16px rgba(249,182,79,0.45)); }
.so-sim__pads { fill: none; stroke: rgba(26,18,4,0.6); stroke-width: 2; }
.so-sim__lead { fill: none; stroke: #fece8c; stroke-width: 2; stroke-dasharray: 3 4; }
html.apq-motion .so-sim__lead { animation: st-march 0.9s linear infinite reverse; }
.so-sim__jc { fill: rgba(9,20,48,0.95); stroke: rgba(130,169,253,0.5); stroke-width: 1.5; }
.so-sim__k { font: 600 14px var(--font-mono); letter-spacing: 0.14em; fill: #b0bed8; }
.so-sim__app { fill: rgba(61,115,255,0.35); stroke: #82a9fd; stroke-width: 1.5; filter: drop-shadow(0 0 12px rgba(61,115,255,0.7)); }
.so-sim__t { font-size: 21px; font-weight: 800; fill: #ffffff; }
.so-sim__s { font: 600 14px var(--font-mono); fill: #fece8c; }
.so-sim__mark { font: 800 24px var(--font-display); letter-spacing: 0.12em; fill: #92a5c8; }
.so-panel--sim { padding: clamp(24px, 4vw, 48px); }
.so-panel > .so-core, .so-panel > .so-stack { max-width: 470px; margin: 0 auto; }

/* ---------- device makers: the firmware stack ---------- */
.so-stack__l rect { fill: rgba(10,22,52,0.85); stroke: rgba(130,169,253,0.32); stroke-width: 1.5; }
.so-stack__l--slim rect { stroke: #82a9fd; stroke-width: 2; }
.so-stack__l--hw rect { fill: rgba(16,32,72,0.9); }
.so-stack__t { font: 700 21px var(--font-display); fill: #f1f4fa; }
.so-stack__s { font-size: 16px; fill: #b0bed8; }
.so-stack__l--slim .so-stack__s { fill: #dfe8ff; }
.so-stack__arrow { fill: none; stroke: #5fd4ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.apq-motion .so-stack__arrow { animation: st-blink 1.8s ease-in-out infinite; }

/* ---------- throughput bars ---------- */
.so-bars { margin: 0; padding: clamp(22px, 3vw, 40px); border-radius: 24px; background: linear-gradient(180deg, rgba(10,22,52,0.62), rgba(6,14,36,0.5)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14), 0 40px 100px -40px rgba(0,0,0,0.8); }
.so-bars__k { margin: 0 0 26px; font: 500 12px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.so-bars__list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.so-bars__row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 8.5em; align-items: center; gap: 18px; }
.so-bars__l { font: 600 14px/1.2 var(--font-mono); color: var(--ink-muted); }
.so-bars__row.is-us .so-bars__l { font-weight: 700; color: var(--st-ink); }
.so-bars__track { position: relative; height: 30px; border-radius: 8px; overflow: hidden; background: rgba(130,169,253,0.07); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14); }
.so-bars__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); border-radius: 8px; transform-origin: 0 50%; transition: transform 1400ms var(--st-ease);
  background: linear-gradient(90deg, rgba(248,121,102,0.22), rgba(248,121,102,0.62)); }
.so-bars__row.is-us .so-bars__fill { background: linear-gradient(90deg, #3d73ff, #82a9fd); box-shadow: 0 0 26px rgba(61,115,255,0.75); }
.so-bars__row:nth-child(2) .so-bars__fill { transition-delay: 150ms; }
.so-bars__row:nth-child(3) .so-bars__fill { transition-delay: 300ms; }
.so-bars__row:nth-child(4) .so-bars__fill { transition-delay: 450ms; }
html.apq-live.apq-motion .so-bars:not(.is-in) .so-bars__fill { transform: scaleX(0); }
.so-bars__v { font: 700 17px/1 var(--font-mono); color: var(--st-ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-bars__u { font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.so-bars__note { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
@media (max-width: 560px) {
  .so-bars__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .so-bars__track { grid-column: 1 / -1; grid-row: 2; height: 24px; }
}
.so-duo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 1060px) { .so-duo { grid-template-columns: minmax(0, 1fr); } }
.so-ring { display: grid; justify-items: center; }
.so-ring .apq-ring { grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; max-width: 340px; gap: 20px; }
.so-ring .apq-ring__legend { width: 100%; }
.so-stats-gap { margin-top: clamp(56px, 7vw, 104px); }

/* ---------- device makers: the market gates ---------- */
.so-gates { margin: 0 0 clamp(56px, 7vw, 104px); }
.so-gates__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.so-gates__list::before { content: ""; position: absolute; left: 8px; right: 0; top: 7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #3d73ff 0%, #3d73ff 52%, #f9b64f 74%, #f87966 100%); box-shadow: 0 0 14px rgba(249,182,79,0.4); }
.so-gate { position: relative; margin-top: 44px; padding: 26px 24px 24px; border-radius: 22px; background: rgba(10,22,52,0.62); box-shadow: inset 0 3px 0 var(--gc), inset 0 0 0 1px rgba(130,169,253,0.1), 0 30px 80px -40px rgba(0,0,0,0.8); }
.so-gate--past { --gc: #3d73ff; --gc2: #9ab9ff; }
.so-gate--now { --gc: #f9b64f; --gc2: #fece8c; }
.so-gate--ahead { --gc: #f87966; --gc2: #ffa192; background: linear-gradient(165deg, rgba(248,121,102,0.14), rgba(10,22,52,0.7) 60%); }
.so-gate__node { position: absolute; left: 0; top: -44px; width: 16px; height: 16px; border-radius: 50%; background: var(--st-night); box-shadow: inset 0 0 0 2px var(--gc), 0 0 14px var(--gc); }
.so-gate--past .so-gate__node, .so-gate--now .so-gate__node { background: var(--gc); }
html.apq-motion .so-gate--ahead .so-gate__node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gc); animation: st-ping 2.2s var(--st-ease) infinite; }
.so-gate__now { position: absolute; left: -48px; top: -52px; padding: 6px 10px; border-radius: 999px; font: 700 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #1a1204; background: var(--st-amber); box-shadow: 0 0 18px rgba(249,182,79,0.6); }
.so-gate__date { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; letter-spacing: -0.02em; color: var(--st-ink); white-space: nowrap; }
.so-gate__st { display: inline-block; margin: 14px 0 0; padding: 6px 10px; border-radius: 999px; font: 700 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gc2); box-shadow: inset 0 0 0 1px var(--gc); }
.so-gate__who { margin: 18px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--st-ink); text-wrap: balance; }
.so-gate__what { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 1060px) {
  .so-gates__list { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 40px; }
  .so-gates__list::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, #3d73ff 0%, #3d73ff 50%, #f9b64f 72%, #f87966 100%); }
  .so-gate { margin-top: 0; }
  .so-gate__node { left: -40px; top: 28px; }
  .so-gate__now { left: -52px; top: -22px; }
  .so-gate--ahead { margin-top: 26px; }
}

/* ---------- index: the four market bands ---------- */
.so-bands { display: grid; gap: clamp(24px, 3vw, 40px); }
.so-band { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(28px, 4vw, 60px); border-radius: 32px; overflow: hidden;
  background: linear-gradient(160deg, rgba(var(--bc), 0.15) 0%, rgba(12,26,62,0.68) 46%, rgba(6,14,36,0.86) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--bc), 0.24), 0 40px 100px -40px rgba(0,0,0,0.8); transition: box-shadow 500ms var(--st-ease), transform 500ms var(--st-ease); }
.so-band.is-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.so-band.is-flip .so-band__art { order: 2; }
.so-band:hover { box-shadow: inset 0 0 0 1px rgba(var(--bc), 0.5), 0 50px 110px -40px rgba(var(--bc), 0.35); }
.so-band:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; }
.so-band--ahead { --bc: 249,182,79; }
.so-band--signal { --bc: 61,115,255; }
.so-band--cyan { --bc: 95,212,255; }
.so-band--danger { --bc: 248,121,102; }
.so-band__art { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.so-band__halo { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(var(--bc), 0.34), rgba(var(--bc), 0) 68%); }
.so-band__ring { position: absolute; inset: 10%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--bc), 0.32); }
.so-band__ring--2 { inset: 22%; box-shadow: none; border: 1px dashed rgba(var(--bc), 0.38); }
html.apq-motion .so-band__ring--2 { animation: so-spin 48s linear infinite; }
.so-band__art .ma { position: relative; width: 58%; height: auto; }
.so-band__art .ma g { stroke-width: 2.4; }
.so-band--ahead .ma g { stroke: #fece8c; }
.so-band--cyan .ma g { stroke: #5fd4ff; }
.so-band--danger .ma g { stroke: #ffa192; }
.so-band--ahead .ma .ma-dot { fill: #fece8c; }
.so-band--cyan .ma .ma-dot { fill: #5fd4ff; }
.so-band--danger .ma .ma-dot { fill: #ffa192; }
.so-band__n { margin: 0 0 16px; font: 500 13px/1 var(--font-mono); letter-spacing: 0.14em; color: rgb(var(--bc)); }
.so-band__t { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; }
.so-band__link { color: var(--st-ink); text-decoration: none; }
.so-band__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.so-band__link:focus-visible { outline: none; }
.so-band .apq-claim { position: relative; z-index: 2; }
.so-band__lede { margin: 18px 0 0; max-width: 40ch; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.42; color: var(--st-ink); text-wrap: pretty; }
.so-band__stake { margin: 14px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
.so-band .stat { margin-top: 30px; max-width: 520px; }
.so-band__go { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-weight: 700; font-size: 16px; color: rgb(var(--bc)); }
.so-band__go .apq-arrow { transition: transform 500ms var(--st-ease); }
.so-band:hover .so-band__go .apq-arrow { transform: translateX(6px); }
@media (max-width: 860px) {
  .so-band, .so-band.is-flip { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 22px 28px; border-radius: 26px; }
  .so-band.is-flip .so-band__art { order: 0; }
  .so-band__art { max-width: 200px; margin: 0; }
}

/* ---------- chips, links, other markets ---------- */
.so-chips__k { margin: 0 0 14px; font: 500 12px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.so-chips + .so-chips__k { margin-top: 30px; }
.so-chips--link li { color: #bff0ff; box-shadow: inset 0 0 0 1px rgba(95,212,255,0.32); background: rgba(95,212,255,0.08); }
.split__b .so-chips + .stat, .so-chips + .stat { margin-top: 44px; }
.so-links { margin-top: clamp(48px, 6vw, 88px); }
.so-gov-req { margin-top: clamp(56px, 7vw, 104px); }
.so-gov-req .act__note { margin-top: 0; }
.so-next .act__head { margin-bottom: clamp(32px, 4vw, 56px); }
.so-more { margin-top: clamp(72px, 9vw, 128px); }
.so-more__k { margin: 0 0 22px; font: 700 13px/1.2 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-blue-3); }
.so-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.so-more__card { min-height: 300px; }
@media (max-width: 900px) { .so-more__grid { grid-template-columns: minmax(0, 1fr); } .so-more__card { min-height: 0; } .so-more__card .ma { width: 72px; height: 72px; margin-bottom: 8px; } }
.so-more__all { margin: 26px 0 0; font-size: 15px; color: var(--ink-faint); }
.so-more__all a { color: var(--st-blue-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* reduced motion: final states, no loops */
@media (prefers-reduced-motion: reduce) {
  .so-art *, .so-scene *, .so-panel *, .so-band__ring, .so-gate__node::after { animation: none !important; }
  .so-sq, .so-dial__needle, .so-dial__arc, .so-bars__fill, .so-air__blk { transition: none !important; }
}
.so-dial__big--word { font-size: 58px; letter-spacing: -0.02em; }

/* ---- 50-company.css ---- */
/* Company (/company/): the vision as the headline, the drawn architecture, values, the leadership plate, the record, offices. */

/* ---------- hero ---------- */
.co-hero .phero__title { font-size: clamp(40px, 4.6vw, 74px); line-height: 0.98; max-width: 15ch; }
.co-hero .phero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.co-hero .phero__art { max-width: 640px; justify-self: end; width: 100%; }
.co-hero .sglobe { transform: scale(1.08); }
@media (max-width: 960px) { .co-hero .phero__inner { grid-template-columns: minmax(0, 1fr); } .co-hero .phero__art { justify-self: center; max-width: 480px; } }

/* ---------- 1. what AgilePQ does ---------- */
.co-does { align-items: center; margin-top: 0; }
.co-arch-fig { padding: clamp(18px, 2.6vw, 36px); border-radius: 28px;
  background: radial-gradient(600px 300px at 30% 0%, rgba(249,182,79,0.08), rgba(249,182,79,0) 70%), linear-gradient(180deg, rgba(10,22,52,0.62), rgba(5,12,32,0.42));
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14), 0 40px 120px -40px rgba(0,0,0,0.85); }
.co-arch { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.co-arch__key { fill: none; stroke: #f9b64f; stroke-width: 1.8; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0.9; }
html.apq-motion .co-arch__key { animation: st-march 1.4s linear infinite; }
.co-arch__kt { font: 600 13px var(--font-mono); fill: #fece8c; letter-spacing: 0.02em; }
.co-arch__srv rect { stroke: #f9b64f; stroke-width: 1.6; }
.co-arch__srvt { font: 700 15px var(--font-mono); letter-spacing: 0.2em; fill: #fece8c; }
.co-arch__srvs { font-size: 14px; fill: #b0bed8; }
.co-arch__link { fill: none; stroke-width: 3; }
.co-arch__dev rect:first-child { fill: rgba(16,32,72,0.95); stroke: #3d73ff; stroke-width: 1.5; }
.co-arch__led { fill: #5fd4ff; }
html.apq-motion .co-arch__led { animation: st-blink 1.6s steps(2, jump-none) infinite; }
.co-arch__lane:nth-child(2n) .co-arch__led { animation-delay: -0.5s; }
.co-arch__dn { font-size: 18px; font-weight: 700; fill: #f1f4fa; }
.co-arch__tag { fill: rgba(249,182,79,0.16); stroke: #f9b64f; stroke-width: 1.2; }
.co-arch__tagt { font: 600 11.5px var(--font-mono); fill: #fece8c; }
.co-arch__pkt rect { fill: #0b1838; stroke: #3d73ff; stroke-width: 1.4; }
.co-arch__pkt text { font: 600 12px var(--font-mono); fill: #cfe0ff; }
html.apq-motion .co-arch__pkt { transform: translate(214px, var(--ly)); }
html.apq-motion .co-arch__pkt > * { animation: co-run 3.6s linear infinite; animation-delay: calc(var(--k) * -1.2s - var(--i) * 0.45s); }
@keyframes co-run { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateX(196px); opacity: 0; } }
.co-arch__ok { fill: none; stroke: #5fd4ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.co-arch__op rect { fill: rgba(16,32,72,0.95); stroke: #82a9fd; stroke-width: 1.5; }
.co-arch__opl { fill: none; stroke: #82a9fd; stroke-width: 2; stroke-linecap: round; }
.co-arch__opt { font-size: 19px; font-weight: 700; fill: #f1f4fa; }
.co-arch__ops { font: 500 12px var(--font-mono); fill: #92a5c8; }
.co-arch__ops--ok { fill: #8fe3ff; font-weight: 600; }
.co-arch__foot { font: 500 13px var(--font-mono); letter-spacing: 0.04em; fill: #b0bed8; }
.co-does__facts { display: grid; gap: 14px; }
.co-does__facts .fact { padding: 22px 24px 20px; }
.co-does__facts .fact::before { left: 24px; right: 24px; }

/* ---------- 2. values ---------- */
.co-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1100px) { .co-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .co-values { grid-template-columns: minmax(0, 1fr); } }
.co-value { display: flex; flex-direction: column; min-height: 230px; padding: 30px 30px 28px; }
.co-value::after { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--st-blue-2), var(--st-cyan), rgba(95,212,255,0)); }
.co-value:nth-child(3n+2)::after { background: linear-gradient(90deg, var(--st-blue-3), var(--st-blue-2), rgba(61,115,255,0)); }
.co-value:nth-child(3n)::after { background: linear-gradient(90deg, var(--st-cyan), var(--st-blue-3), rgba(130,169,253,0)); }
.co-value__n { display: block; margin-bottom: auto; font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.04em; color: #6585cf; font-variant-numeric: tabular-nums; }
.co-value__t { margin: 36px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.08; letter-spacing: -0.015em; color: var(--st-ink); }
.co-value__d { margin: 0; font-size: 16px !important; line-height: 1.55; color: var(--ink-muted); max-width: 34ch; }
@media (max-width: 640px) { .co-value { min-height: 0; padding: 24px 24px 22px; } .co-value__n { font-size: 44px; } .co-value__t { margin-top: 18px; } }

/* ---------- 3. leadership ---------- */
.co-lead { position: relative; max-width: 960px; padding: clamp(28px, 4vw, 56px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(700px 320px at 100% 0%, rgba(6,42,243,0.3), rgba(6,42,243,0) 70%), linear-gradient(170deg, rgba(14,30,72,0.78), rgba(6,14,36,0.9));
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.2), inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 120px -40px rgba(6,42,243,0.45); }
.co-lead__k { margin: 0 0 18px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-blue-3); }
.co-lead__name { display: inline-flex; align-items: flex-start; gap: 6px; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6.4vw, 104px); line-height: 0.95; letter-spacing: -0.03em; color: var(--st-ink); }
.co-lead__name .apq-claim { font-size: 14px; letter-spacing: 0; }
.co-dim { display: block; width: min(100%, 720px); height: 36px; margin: 18px 0 30px; overflow: visible; }
.co-dim__ext { stroke: rgba(130,169,253,0.45); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.co-dim__line { stroke: #82a9fd; stroke-width: 1; vector-effect: non-scaling-stroke; }
.co-dim__tick { stroke: #82a9fd; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.co-lead__block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(130,169,253,0.18); }
.co-lead__block > div { padding: 16px 20px 18px; }
.co-lead__block > div + div { box-shadow: inset 1px 0 0 rgba(130,169,253,0.18); }
.co-lead__block dt { margin: 0 0 8px; font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.co-lead__block dd { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--st-ink); }
@media (max-width: 760px) {
  .co-lead__block { grid-template-columns: minmax(0, 1fr); }
  .co-lead__block > div + div { box-shadow: inset 0 1px 0 rgba(130,169,253,0.18); }
}

/* ---------- 4. the record ---------- */
.co-ruler-wrap { margin: 0 0 clamp(40px, 5vw, 72px); padding: clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 36px) clamp(10px, 1.6vw, 20px); border-radius: 24px; background: linear-gradient(180deg, rgba(10,22,52,0.6), rgba(5,12,32,0.4)); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.12), 0 40px 120px -40px rgba(0,0,0,0.8); }
.co-ruler { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.co-ruler__rail { stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(61,115,255,0.7)); }
.co-ruler__yr line { stroke: rgba(176,190,216,0.55); stroke-width: 1.2; }
.co-ruler__yr text { font: 500 15px var(--font-mono); fill: #b0bed8; }
.co-ruler__stem { stroke: rgba(130,169,253,0.55); stroke-width: 1.2; stroke-dasharray: 2 4; }
.co-ruler__dot { fill: #82a9fd; filter: drop-shadow(0 0 6px rgba(130,169,253,0.9)); }
.co-ruler__badge { fill: #0b1838; stroke: #7086b1; stroke-width: 1.6; }
.co-ruler__bn { font-family: var(--font-display); font-weight: 800; font-size: 14px; fill: #dfe6f3; }
.co-ruler__ev.is-signal .co-ruler__badge { stroke: #3d73ff; fill: rgba(6,42,243,0.4); }
.co-ruler__ev.is-patent .co-ruler__badge { stroke: #f9b64f; fill: rgba(249,182,79,0.16); }
.co-ruler__ev.is-patent .co-ruler__bn { fill: #fece8c; }
.co-ruler__ev.is-patent .co-ruler__dot { fill: #f9b64f; }
.co-ruler__today circle { fill: #f9b64f; filter: drop-shadow(0 0 8px rgba(249,182,79,0.9)); }
.co-ruler__today text { font: 700 12px var(--font-mono); letter-spacing: 0.16em; fill: #fece8c; }
@media (max-width: 640px) { .co-ruler-wrap { display: none; } }

.co-rec { position: relative; display: grid; gap: clamp(28px, 3.4vw, 48px); margin: 0; padding: 0; list-style: none; }
.co-rec::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--st-blue-2) 0%, var(--st-blue-3) 55%, var(--st-amber) 100%); box-shadow: 0 0 14px rgba(61,115,255,0.45); }
.co-rec__yr { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.co-rec__head { position: sticky; top: calc(var(--st-hdr) + 24px); display: flex; align-items: center; gap: 16px; }
.co-rec__node { flex: 0 0 auto; width: 28px; height: 28px; overflow: visible; }
.co-rec__node circle { fill: var(--st-night); stroke: #82a9fd; stroke-width: 2; }
.co-rec__node .co-rec__dot { fill: #82a9fd; stroke: none; filter: drop-shadow(0 0 6px rgba(130,169,253,0.9)); }
.co-rec__yr:last-child .co-rec__node circle { stroke: #f9b64f; }
.co-rec__yr:last-child .co-rec__node .co-rec__dot { fill: #f9b64f; filter: drop-shadow(0 0 6px rgba(249,182,79,0.9)); }
.co-rec__y { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 4.6vw, 72px); line-height: 0.9; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--st-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .co-rec__y { background-image: linear-gradient(180deg, #ffffff 0%, #d6e2ff 45%, #82a9fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .co-rec__yr:last-child .co-rec__y { background-image: linear-gradient(180deg, #fff3dc 0%, #fece8c 50%, #f9b64f 100%); }
}
.co-rec__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.co-rec__items.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.co-rec__item { position: relative; padding: 24px 26px 24px; border-radius: 20px; background: rgba(10,22,52,0.62); box-shadow: inset 3px 0 0 var(--rc, #7086b1), inset 0 0 0 1px rgba(130,169,253,0.12); }
.co-rec__item--signal { --rc: var(--st-blue-2); background: linear-gradient(165deg, rgba(6,42,243,0.26), rgba(10,22,52,0.7) 60%); }
.co-rec__item--patent { --rc: var(--st-amber); background: linear-gradient(165deg, rgba(249,182,79,0.12), rgba(10,22,52,0.7) 60%); }
.co-rec__no { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 13px/1 var(--font-display); color: #dfe6f3; box-shadow: inset 0 0 0 1.5px #7086b1; }
.co-rec__item--signal .co-rec__no { box-shadow: inset 0 0 0 1.5px #3d73ff; }
.co-rec__item--patent .co-rec__no { color: #fece8c; box-shadow: inset 0 0 0 1.5px #f9b64f; }
.co-rec__when { display: block; margin-bottom: 12px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.co-rec__t { margin: 0 40px 10px 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.2; color: var(--st-ink); text-wrap: balance; }
.co-rec__pno { font-family: var(--font-mono); font-weight: 600; font-size: 0.9em; letter-spacing: 0.02em; color: var(--st-amber-2); }
.co-rec__d { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
@media (max-width: 860px) {
  .co-rec__yr { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .co-rec__head { position: relative; top: auto; }
  .co-rec__items, .co-rec__items.is-pair { grid-template-columns: minmax(0, 1fr); margin-left: 44px; }
  .co-rec__y { font-size: 44px; }
}

/* ---------- 5. offices ---------- */
.co-finale .aurora--b { --au: rgba(249,182,79,0.10); }
.co-finale__inner { position: relative; z-index: 1; max-width: var(--layout-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
@media (max-width: 960px) { .co-finale__inner { grid-template-columns: minmax(0, 1fr); } }
.co-finale .act__title { font-size: clamp(48px, 6.2vw, 104px); }
.co-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .co-offices { grid-template-columns: minmax(0, 1fr); } }
.co-office { display: flex; flex-direction: column; gap: 4px; font-style: normal; }
.co-office__k { margin-bottom: 14px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-blue-3); }
.co-office__city { margin-bottom: 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.015em; color: var(--st-ink); }
.co-office__line { font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.co-office__main { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin: 4px 0 0; padding: 18px 22px; border-radius: 16px; font-size: 17px; color: var(--st-ink); background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.16); }
.co-office__main a { color: var(--st-blue-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .co-arch__key, .co-arch__led, .co-arch__pkt > * { animation: none !important; }
}

/* contact cards (no street addresses) and the investor card across both columns */
.co-office__city a { color: inherit; text-decoration: none; }
.co-office__city a:hover, .co-office__city a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.co-office--ir { grid-column: 1 / -1; }
.co-office__cta { margin-top: 14px; }
@media (max-width: 420px) { .co-office__city { font-size: 22px; overflow-wrap: anywhere; } }
.co-office__city--sm { font-size: clamp(18px, 1.55vw, 24px); overflow-wrap: anywhere; }

/* ---- 60-resources.css ---- */
/* Resources (/resources/): the source map, the paper archive, announcements, the grouped reference index, press. */

/* ---------- hero: the source map ---------- */
.rs-hero .phero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .rs-hero .phero__inner { grid-template-columns: minmax(0, 1fr); } }
.rs-hero__art { margin: 0; padding: clamp(18px, 2.4vw, 32px); border-radius: 28px;
  background: radial-gradient(520px 340px at 80% 20%, rgba(61,115,255,0.16), rgba(61,115,255,0) 70%), linear-gradient(180deg, rgba(10,22,52,0.62), rgba(5,12,32,0.42));
  box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14), 0 40px 120px -40px rgba(0,0,0,0.85); }
.rs-hero__cap { margin: 12px 2px 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.rs-map { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.rs-map__k { font: 600 13px var(--font-mono); letter-spacing: 0.14em; fill: #b0bed8; }
.rs-map__recent { fill: rgba(249,182,79,0.07); stroke: rgba(249,182,79,0.35); stroke-width: 1; stroke-dasharray: 4 5; }
.rs-map__rt { font: 600 13px var(--font-mono); fill: #fece8c; }
.rs-map__row line { stroke: rgba(130,169,253,0.12); stroke-width: 1; }
.rs-map__name { font-size: 16px; font-weight: 700; fill: #dfe6f3; }
.rs-map__name--agile { fill: #9ab9ff; }
.rs-map__n { font: 600 13px var(--font-mono); fill: #92a5c8; }
.rs-map__axis { stroke: rgba(176,190,216,0.5); stroke-width: 1.2; }
.rs-map__break { stroke: #92a5c8; stroke-width: 1.5; fill: none; }
.rs-map__tick line { stroke: rgba(176,190,216,0.6); stroke-width: 1.2; }
.rs-map__yr { font: 500 13px var(--font-mono); fill: #92a5c8; }
.rs-map__dot { stroke: rgba(3,10,29,0.9); stroke-width: 1.5; }
.rs-map__dot--agile { fill: #3d73ff; filter: drop-shadow(0 0 6px rgba(61,115,255,0.95)); }
.rs-map__dot--signal { fill: #82a9fd; }
.rs-map__dot--ahead { fill: #f9b64f; }
.rs-map__dot--exposed { fill: #f87966; }
.rs-map__dot--ink { fill: #dfe6f3; }
.rs-map__dot--muted { fill: #7f93b8; }
html.apq-motion .rs-map__dot--exposed { animation: rs-pulse 2.6s ease-in-out infinite; }
@keyframes rs-pulse { 50% { opacity: 0.55; } }
@media (max-width: 560px) {
  .rs-map__name { font-size: 20px; }
  .rs-map__n { font-size: 15px; }
  .rs-map__yr, .rs-map__rt, .rs-map__k { font-size: 15px; }
  .rs-hero__art { padding: 14px 12px 16px; border-radius: 20px; }
}

/* ---------- 1. the paper archive ---------- */
.rs-papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .rs-papers { grid-template-columns: minmax(0, 1fr); } }
.rs-paper { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 26px; align-items: start; padding: 28px; }
@media (max-width: 520px) { .rs-paper { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 22px 20px; } }
.rs-paper__cover { display: block; transition: transform 500ms var(--st-ease); }
.rs-paper:hover .rs-paper__cover { transform: translateY(-4px) rotate(-1.5deg); }
.rs-cover { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)); }
.rs-cover__page { fill: #0d1c44; stroke: rgba(130,169,253,0.35); stroke-width: 1.2; }
.rs-cover__band { fill: #3d73ff; }
.rs-cover--0 .rs-cover__band { fill: #f87966; }
.rs-cover--2 .rs-cover__band { fill: #f9b64f; }
.rs-cover--3 .rs-cover__band { fill: #82a9fd; }
.rs-cover__y { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; fill: #f1f4fa; }
.rs-cover__l { stroke: rgba(176,190,216,0.4); stroke-width: 4; stroke-linecap: round; }
.rs-cover__pdf { font: 700 12px var(--font-mono); letter-spacing: 0.1em; fill: #9ab9ff; }
.rs-paper__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px !important; font: 500 11px/1.4 var(--font-mono) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint) !important; }
.rs-paper__meta span:first-child { color: var(--st-blue-3); }
.rs-paper__t { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; letter-spacing: -0.005em; color: var(--st-ink); text-wrap: balance; }
.rs-paper__d { margin: 0 0 18px !important; font-size: 16px; line-height: 1.55; }
.rs-paper__go { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; font-size: 15px; color: var(--st-blue-3) !important; text-decoration: none !important; }
.rs-paper__go:hover { color: #fff !important; }
.rs-paper__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ---------- 2. announcements ---------- */
.rs-news { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 30px 0 0; list-style: none; }
.rs-news::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--st-blue-2), var(--st-blue-3) 60%, rgba(130,169,253,0.1)); box-shadow: 0 0 12px rgba(61,115,255,0.5); }
@media (max-width: 1100px) { .rs-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-news::before { display: none; } }
@media (max-width: 600px) { .rs-news { grid-template-columns: minmax(0, 1fr); } }
.rs-new { position: relative; display: flex; flex-direction: column; padding: 26px 26px 22px; border-radius: 22px;
  background: linear-gradient(165deg, rgba(6,42,243,0.22) 0%, rgba(12,26,62,0.72) 50%, rgba(6,14,36,0.85) 100%); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.18), 0 30px 80px -36px rgba(0,0,0,0.8); }
.rs-new__node { position: absolute; left: 26px; top: -30px; width: 16px; height: 16px; border-radius: 50%; background: var(--st-night); box-shadow: inset 0 0 0 2px var(--st-blue-3), 0 0 12px rgba(61,115,255,0.7); }
@media (max-width: 1100px) { .rs-new__node { display: none; } .rs-news { padding-top: 0; } }
.rs-new__date { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; }
.rs-new__day { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 0.9; letter-spacing: -0.04em; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.rs-new__mon { font: 600 13px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-blue-3); }
.rs-new__t { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--st-ink); text-wrap: balance; }
.rs-new__d { margin: 0 0 16px; flex: 1 0 auto; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.rs-new__via { margin: 0 0 12px; font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.rs-new__go { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; font-size: 15px; color: var(--st-blue-3); text-decoration: none; }
.rs-new__go:hover { color: #fff; }
.rs-new__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.rs-new__go--off { color: var(--ink-faint); font-weight: 500; font-size: 14px; }

/* ---------- 3. the reference index ---------- */
.rs-refs { columns: 2; column-gap: 20px; }
@media (max-width: 960px) { .rs-refs { columns: 1; } }
.rs-group { break-inside: avoid; margin: 0 0 20px; padding: 26px 28px 12px; border-radius: 22px; background: rgba(10,22,52,0.55); box-shadow: inset 0 0 0 1px rgba(130,169,253,0.14), 0 30px 80px -40px rgba(0,0,0,0.8); }
.rs-group::before { content: ""; display: block; height: 2px; margin: -26px 0 24px; border-radius: 2px; background: linear-gradient(90deg, var(--rg, var(--st-blue-2)), rgba(130,169,253,0)); }
.rs-group--signal { --rg: var(--st-blue-3); }
.rs-group--ahead { --rg: var(--st-amber); }
.rs-group--exposed { --rg: var(--st-coral); }
.rs-group--ink { --rg: #dfe6f3; }
.rs-group--muted { --rg: #7f93b8; }
.rs-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rs-group__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; color: var(--st-ink); }
.rs-group__n { font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap; }
.rs-group__list { margin: 0; padding: 0; list-style: none; }
.rs-ref { padding: 14px 0 14px; box-shadow: inset 0 1px 0 rgba(130,169,253,0.1); }
.rs-ref__who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 6px; font: 600 11px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rg, var(--st-blue-3)); }
.rs-ref__who span { color: var(--ink-faint); font-weight: 500; }
.rs-ref__t { margin: 0; font-size: 16px; line-height: 1.45; color: var(--st-ink); }
.rs-ref__t a { color: var(--st-ink); text-decoration: underline; text-decoration-color: rgba(130,169,253,0.45); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color 200ms linear, color 200ms linear; }
.rs-ref__t a:hover { color: #fff; text-decoration-color: var(--st-blue-3); }

/* ---------- 4. press ---------- */
.rs-finale { padding-top: clamp(96px, 12vh, 168px); padding-bottom: clamp(96px, 12vh, 168px); }
.rs-finale__inner { position: relative; z-index: 1; max-width: var(--layout-page); margin: 0 auto; }
.rs-finale .act__title { font-size: clamp(48px, 6.2vw, 104px); max-width: 14ch; }

@media (prefers-reduced-motion: reduce) {
  .rs-map__dot, .rs-paper__cover { animation: none !important; transition: none !important; }
}