/* Design tokens — the single source of truth for the whole site: the SSG
   marketing pages, blog and guides (through dist/site.css), the /app
   dashboard (through app.css) and the static marketing pages (inlined by the
   Worker). The JS-side copy lives in src/site/tokens.mjs and
   test/tokens-parity.test.mjs keeps the two equal.

   These are the royal-blue brand (28 September 2026, docs/decisions.md),
   applied whole to both the marketing site and the /app SPA: a light tinted
   ground so white panels lift off it, near-black ink, one accent — royal
   #1a5fd6 — for the next action and every link, and the owl-shield's cyan
   #35c0f0 as the single secondary. The marketing site refines the ground and
   ambient tokens at the top of site.css; the /app SPA reads these through
   app.css. The one deep surface is evidence: scan transcripts and proofs are
   set in mono on --term-bg (navy since 20 October 2026), so proof reads as proof.

   Ambient depth, by decision (27 September 2026, docs/decisions.md):
   gradients are allowed at low alpha in the accent hue only (--glow-*),
   plus motion tokens for the reveal system in site.css. */

:root {
  /* ground and ink — royal-blue brand (28 September 2026, docs/decisions.md):
     a light tinted ground so white panels lift off it, values from
     docs/mockups/sekura-app-dashboard.html */
  --ground: #eef2fb;
  --panel: #ffffff;
  --tint: #f1f5fc;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #64748b;
  --hair: #e2e8f0;
  --hair-2: #eef2f8;
  --bw: 1px;
  --on-ink: #ffffff;

  /* the accent — royal blue; the secondary is the owl-shield's cyan edge */
  --accent: #1a5fd6;
  --accent-hover: #1550bd;
  --accent-ink: #ffffff;
  --accent-tint: #eaf1fe;
  --accent-2: #35c0f0;
  --focus-ring: 0 0 0 3px rgba(26, 95, 214, 0.35);

  /* evidence surface — the one deep island. Navy since 20 October 2026
     (Tikka: terminals in blue, not black), a step below the hero gradient's
     first stop so a transcript reads as the same brand's evidence surface. */
  --term-bg: #0B1E4F;
  --term-bg-2: #10265F;
  --term-chrome: #152E6D;
  --term-fg: #E4ECFF;
  --term-dim: #6F87C2;
  --term-gray: #9CB0DC;
  --term-phase: #7FB394;
  --term-agent: #9BC2AE;
  --term-finding: #E8C36B;
  --term-exploit: #FF7A7A;

  /* scan lifecycle */
  --st-queued: #86868b;
  --st-running: #1a5fd6;
  --st-ok: #1d9f5f;
  --st-fail: #d0342c;
  --st-cancelled: #6e6e73;

  /* finding severities (red → amber → gray on white) */
  --sev-crit: #c81e1e;
  --sev-high: #d9640d;
  --sev-med: #b58500;
  --sev-low: #6e6e73;
  --sev-info: #86868b;

  /* type */
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* ONE type scale for the whole site — six tokens, and NO other font-size in
     site.css or app.css. Map by role, never raw value. (docs/sekura-branding-
     guidelines.md carries the table; test/tokens-parity.test.mjs keeps
     src/site/tokens.mjs equal to these.) */
  --fs-hero: clamp(36px, 5vw, 56px);   /* hero title — 56, phone 36 */
  --fs-hero-sub: 34px;                  /* hero subline */
  --fs-title: clamp(30px, 3.6vw, 38px);/* section titles, metric numbers, prices — 38, phone 30 */
  --fs-card: 18px;                      /* card / tile / plan titles */
  --fs-text: 17px;                      /* body: paragraphs, ledes, ticks, buttons, links, cells, inputs */
  --fs-small: 14px;                     /* nav, kickers, notes, captions, labels, per-unit, footer, badges, table headers, mono-small */

  /* rhythm */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px; --sp-9: 96px;
  --r-1: 6px;   /* inputs, badges */
  --r-2: 10px;  /* buttons, small cards */
  --r-3: 16px;  /* panels */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --elev-2: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* motion (27 September 2026 visual refresh) */
  --dur-1: 160ms;   /* micro: hovers, chevrons, buttons */
  --dur-2: 320ms;   /* small reveals */
  --dur-3: 600ms;   /* section reveals */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ambient depth — low-alpha accent, the one permitted gradient hue */
  --glow-1: rgba(26, 95, 214, 0.08);
  --glow-2: rgba(26, 95, 214, 0.04);
  --dot-grid: rgba(15, 23, 42, 0.05);

  /* elevation */
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.10);
  --elev-term: 0 24px 64px -24px rgba(11, 15, 14, 0.45);

  /* measures */
  --measure: 65ch;
  --w-read: 720px;
  --w-app: 1080px;
  --w-site: 1120px;
  --nav-h: 52px;
}

/* site.css — every page outside the /app SPA: marketing, blog, guides, legal.
   Built on src/styles/tokens.css (concatenated ahead of this file into
   dist/site.css by scripts/assemble-dist.mjs). Mobile-first, one class per
   rule, no scoping wrappers, no lowercase transforms.

   The look (28 September 2026, docs/decisions.md): the royal-blue brand. Bold,
   on a light tinted ground, white cards lifted on hairline borders, very large
   tight display type with an ink gradient, a royal aurora behind the heroes,
   and royal #1a5fd6 as the one accent with the owl-shield's cyan #35c0f0 for
   light (dots, glows, the far end of the gradient). This replaces the
   27 September forest-green light-paper palette; the structure of that refresh
   — display type, aurora, glass cards, boxed metrics — is kept. The home hero
   carries the owl-in-shield (home only). The scan terminal stays dark: on a
   light page it is the single dark object, so proof reads as proof.

   The palette lives in tokens.css now (both surfaces share the brand); this
   file refines only the ground and the ambient/structural tokens for the
   marketing pages.

   Motion: every reveal state is gated behind `html.motion`, which only
   src/site/motion.mjs sets — never `html.js`, which the Enterprise pricing
   sizer owns — so no-JS, crawler and prefers-reduced-motion readers always
   see the finished page. */

/* ── the tinted ground: token overrides for the site only ─────────────── */
:root {
  --ground: #eef2fb;   /* the tinted-blue ground; white cards lift off it */
  --panel: #ffffff;
  --tint: #f1f5fc;
  --ink: #0f172a;
  --ink-body: #334155;
  --ink-2: #475569;
  --ink-3: #64748b;
  --hair: #e2e8f0;
  --hair-2: #eef2f8;

  /* the accent is royal (--accent, tokens.css); the shield-edge cyan carries
     light — dots, glows, the far end of the brand gradient */
  --accent-bright: #35c0f0;
  --glow-rgb: 26, 95, 214;
  /* the two block types: royal (gradient, white text) and tint (--ground) */
  --navy: #0e2a6b;
  --cyan: #35c0f0;
  --grad: linear-gradient(118deg, #0e2a6b 0%, #1a5fd6 55%, #35c0f0 100%);
  /* the one signal colour: fluorescent green, the hero subline and nowhere else */
  --signal: #7CFF4F;

  --elev-1: 0 1px 2px rgba(17, 19, 18, 0.05);
  --elev-2: 0 12px 32px -12px rgba(17, 19, 18, 0.16);
  --elev-3: 0 20px 48px -16px rgba(17, 19, 18, 0.22);
  --elev-term: 0 48px 100px -32px rgba(11, 15, 14, 0.55), 0 0 0 1px rgba(11, 15, 14, 0.12);

  /* cards: white, lifted on a hairline, the one surface treatment */
  --glass: linear-gradient(180deg, #ffffff, #fcfcfa);
  --glass-line: rgba(17, 19, 18, 0.08);
  --glass-line-hover: rgba(17, 19, 18, 0.18);
  --glass-top: 0 1px 2px rgba(17, 19, 18, 0.04), inset 0 1px 0 #ffffff;
  --wash-1: rgba(17, 19, 18, 0.03);
  --wash-2: rgba(17, 19, 18, 0.05);
  --wash-3: rgba(17, 19, 18, 0.08);
  --grad-text: linear-gradient(180deg, #0f172a 45%, rgba(15, 23, 42, 0.62) 100%);
  --grad-text-accent: linear-gradient(90deg, #1a5fd6, #35c0f0);
  --rule: linear-gradient(90deg, transparent, rgba(17, 19, 18, 0.10) 20%, rgba(17, 19, 18, 0.10) 80%, transparent);

  --r-2: 10px;
  --r-3: 16px;
  --nav-h: 60px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, figcaption, blockquote { margin: 0; }
img, svg { max-width: 100%; height: auto; }
img { display: inline-block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
/* Content links must read as links, not as brand-green body text. Consequence:
   before 27 September 2026 (Sudhir) the reset painted every anchor --accent
   (green), so an inline link inside reading copy was hard to tell from emphasised
   text. Mechanism: a dedicated --link blue applied ONLY to anchors inside
   <main class="page"> — the content region; the nav/subnav/header live outside
   .page and keep their own treatment, and anchors styled as buttons are excluded
   by :not([class*="btn"]). The marketing ground is light (--ground #f6f6f3), so
   --link is #1a5fd6 (~4.5:1 on it), the same accessible blue the light app uses;
   #6fa8ff is the lighter variant kept for any dark surface. Wrong conclusion to
   avoid: do not turn the base `a` rule blue — that would recolour nav and CTAs. */
:root { --link: #1a5fd6; }
.page a:not([class*="btn"]) { color: var(--link); }
.page a:not([class*="btn"]):hover,
.page a:not([class*="btn"]):focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
/* Links on ROYAL blocks are white and underline on hover; the arrow/icon alone
   is the signal cyan. On TINT blocks links keep --link (#1a5fd6). Royal-on-royal
   links were invisible before (e.g. the hero "See enterprise pricing →"). */
.hero a:not([class*="btn"]),
.home-block.royal a:not([class*="btn"]),
.block-royal a:not([class*="btn"]) { color: #ffffff; }
.hero a:not([class*="btn"]):hover,
.hero a:not([class*="btn"]):focus-visible,
.home-block.royal a:not([class*="btn"]):hover,
.home-block.royal a:not([class*="btn"]):focus-visible,
.block-royal a:not([class*="btn"]):hover,
.block-royal a:not([class*="btn"]):focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.hero .link-arrow, .home-block.royal .link-arrow, .block-royal .link-arrow { color: #ffffff; }
.hero .link-arrow:hover, .home-block.royal .link-arrow:hover, .block-royal .link-arrow:hover { color: #ffffff; }
.hero .link-arrow::after, .home-block.royal .link-arrow::after, .block-royal .link-arrow::after { color: var(--cyan); }
button { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--mono); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
::selection { background: rgba(var(--glow-rgb), 0.22); color: var(--ink); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js-only { display: none; }
html.js .js-only { display: block; }
[id] { scroll-margin-top: calc(var(--nav-h) + 56px); }

/* ── type ─────────────────────────────────────────────────────────────── */
/* The gradient is painted into the glyphs with background-clip; `color`
   stays set underneath so a browser without clip support still draws ink,
   never transparent text. */
.display, .h2, .article-title, .legal-title {
  color: var(--ink);
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.display {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.0;
  text-wrap: balance;
  padding-bottom: 0.06em; /* descenders sit inside the clipped box */
}
.h2 {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
  padding-bottom: 0.05em;
}
.h3 {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.h4 { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.lede {
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 58ch;
}
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-small); color: var(--ink-3); }
.muted { color: var(--ink-2); }
.eyebrow {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent-bright);
}
.measure { max-width: var(--measure); }
.center { text-align: center; }
.center .lede, .center .measure { margin-left: auto; margin-right: auto; }

/* ── buttons and links ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-5);
  border: var(--bw) solid transparent; border-radius: var(--r-2);
  font-size: var(--fs-text); font-weight: 500; white-space: nowrap; cursor: pointer;
  text-decoration: none; letter-spacing: -0.005em;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease,
    transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent); color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -8px rgba(26, 95, 214, 0.5);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 30px -8px rgba(26, 95, 214, 0.55); }
.btn-ghost {
  background: var(--panel); color: var(--ink); border-color: var(--glass-line);
  box-shadow: var(--glass-top);
}
.btn-ghost:hover { border-color: var(--glass-line-hover); }
.btn-sm { height: 34px; padding: 0 var(--sp-4); font-size: var(--fs-small); border-radius: 8px; }
.btn-lg { height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-text); }
.link-arrow { font-size: var(--fs-text); font-weight: 500; color: var(--ink); }
.link-arrow:hover { text-decoration: none; color: var(--accent); }
.link-arrow::after { content: " \2192"; display: inline-block; color: var(--ink-3); transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) ease; }
.link-arrow:hover::after { transform: translateX(4px); color: var(--accent-bright); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); align-items: center; }

/* ── nav ──────────────────────────────────────────────────────────────── */
/* Tint-page nav: seamless with the tint ground — no band edge. There is no
   translucent panel and no scrolled border, because a band edge above the tint
   read as a separate chrome strip; the nav is meant to be part of the ground. */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--ground);
  border: none;
  box-shadow: none;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
/* MOTION_SCRIPT (src/site/motion.mjs) adds this past 8px of scroll. It must not
   reintroduce a band edge on the tint, so it only firms the background. */
.nav.nav-scrolled { background: var(--ground); border: none; box-shadow: none; }
.nav-inner {
  max-width: var(--w-site); height: 100%; margin: 0 auto; padding: 0 var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-6);
}
/* The mark + wordmark lockup: square owl cutout to the LEFT of "Sekura",
   sized by HEIGHT only so it never distorts. The wordmark is text, so it
   recolours per ground (ink on tint here; white over the royal hero below). */
.nav-logo { display: inline-flex; align-items: center; gap: 8px; }
.nav-mark { height: 28px; width: auto; display: block; }
.nav-word { font-weight: 700; font-size: var(--fs-card); letter-spacing: .01em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: var(--sp-5); }
.nav-links a { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); transition: color var(--dur-1) ease; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links-desktop { display: none; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.nav-signin { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.nav-signin:hover { color: var(--ink); text-decoration: none; }
.nav-actions .nav-signin { display: none; }
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  width: 36px; height: 36px; justify-content: center; border-radius: var(--r-1);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-burger i { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 1px; }
.nav-links-mobile {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--panel); border: var(--bw) solid var(--glass-line); border-radius: var(--r-3);
  box-shadow: var(--elev-3); padding: var(--sp-2);
}
.nav-links-mobile a { padding: 10px var(--sp-3); font-size: var(--fs-small); border-radius: 8px; }
.nav-links-mobile a:hover { background: var(--wash-2); }
/* The bar holds eight links since Incidents joined (23 October 2026), about
   1,000px with Sign in and Scan free beside them; at the old 900px switch
   "Contact us" and "Sign in" broke onto two lines between 900 and 1,050px.
   The burger takes over below 1,100px, and no bar label may wrap. */
.nav-links a, .nav-signin { white-space: nowrap; }
@media (min-width: 1100px) {
  .nav-links-desktop { display: flex; }
  .nav-actions .nav-signin { display: inline; }
  .nav-menu { display: none; }
}

/* ── sub-nav ──────────────────────────────────────────────────────────── */
/* Tint-page sub-nav (blog/learn): seamless with the ground, no band edge —
   the same rule as the nav above it, so the two read as one surface. */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--ground);
  border: none;
  box-shadow: none;
}
.subnav-inner {
  max-width: var(--w-site); margin: 0 auto; padding: 0 var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5); height: 44px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-inner a { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); white-space: nowrap; flex: none; }
.subnav-inner a:hover { color: var(--ink); text-decoration: none; }
.subnav-inner a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); padding-bottom: 2px; }
.subnav-primary { color: var(--accent) !important; margin-left: auto; }
@media (min-width: 900px) {
  .subnav-inner { -webkit-mask-image: none; mask-image: none; }
}

/* ── nav over the royal hero (home, enterprise) ───────────────────────────
   On pages whose first block is the royal hero, the nav is PART of the hero,
   not a band above it. It overlays the gradient absolutely so the hero starts
   at the very top behind it, and everything on it turns white. Absolute, not
   sticky: the nav scrolls away with the hero, which matches the brand mock —
   a sticky translucent band over the gradient reads as a seam, which is the
   thing this whole change removes. The owl cutout stays as-is on the gradient. */
body.p-home .nav,
body.p-enterprise .nav,
body.p-pricing .nav {
  position: absolute; left: 0; right: 0; top: 0;
  background: transparent; border: none; box-shadow: none;
}
/* The lockup wordmark is ink on tint grounds and white on royal grounds. This
   white override is scoped to `.nav .nav-word` on purpose: the footer reuses
   the .nav-word class for its own lockup on the light footer ground, and an
   unscoped `body.p-* .nav-word` (0,2,1) outspecifies `.footer-logo .nav-word`
   (0,2,0) and paints the footer wordmark white — near-invisible — on home,
   enterprise and pricing. Keep it bound to the nav. */
body.p-home .nav .nav-word,
body.p-enterprise .nav .nav-word,
body.p-pricing .nav .nav-word,
body.p-home .nav-links a,
body.p-enterprise .nav-links a,
body.p-pricing .nav-links a,
body.p-home .nav-links a:hover,
body.p-enterprise .nav-links a:hover,
body.p-pricing .nav-links a:hover,
body.p-home .nav-links a[aria-current="page"],
body.p-enterprise .nav-links a[aria-current="page"],
body.p-pricing .nav-links a[aria-current="page"],
body.p-home .nav-signin,
body.p-enterprise .nav-signin,
body.p-pricing .nav-signin,
body.p-home .nav-signin:hover,
body.p-enterprise .nav-signin:hover,
body.p-pricing .nav-signin:hover { color: #fff; }
body.p-home .nav-burger i,
body.p-enterprise .nav-burger i,
body.p-pricing .nav-burger i { background: #fff; }
/* The mobile dropdown is a white panel even over the royal hero, so its links
   and the sign-in inside it stay ink — white-on-white would vanish. */
body.p-home .nav-links-mobile a,
body.p-enterprise .nav-links-mobile a,
body.p-pricing .nav-links-mobile a,
body.p-home .nav-links-mobile .nav-signin,
body.p-enterprise .nav-links-mobile .nav-signin,
body.p-pricing .nav-links-mobile .nav-signin { color: var(--ink-2); }
body.p-home .nav-links-mobile a[aria-current="page"],
body.p-enterprise .nav-links-mobile a[aria-current="page"],
body.p-pricing .nav-links-mobile a[aria-current="page"] { color: var(--ink); }
/* The nav "Scan free" pill: translucent white over the gradient, like the
   mock's .pill-nav — not the solid royal .btn-primary, which vanishes on royal. */
body.p-home .nav-cta.btn-primary,
body.p-enterprise .nav-cta.btn-primary,
body.p-pricing .nav-cta.btn-primary {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
}
body.p-home .nav-cta.btn-primary:hover,
body.p-enterprise .nav-cta.btn-primary:hover,
body.p-pricing .nav-cta.btn-primary:hover {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .5);
}

/* Enterprise sub-nav follows the nav: transparent over the royal hero, white,
   stacked directly under the (absolute) nav. Its primary "Request a POC" link
   becomes a translucent-white pill instead of the accent colour. */
body.p-enterprise .subnav {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  z-index: 40; background: transparent; border: none; box-shadow: none;
}
body.p-enterprise .subnav-inner a,
body.p-enterprise .subnav-inner a:hover { color: rgba(255, 255, 255, .86); }
body.p-enterprise .subnav-inner a[aria-current="page"] {
  color: #fff; box-shadow: inset 0 -1.5px 0 #fff;
}
body.p-enterprise .subnav-primary {
  color: #fff !important;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px; padding: 6px 16px;
}
/* The hero must clear the overlaid chrome so no text hides under it. Home has
   nav only; enterprise has nav + sub-nav, so it needs the extra band of room. */
body.p-home .hero-inner { padding-top: calc(var(--nav-h) + 56px); }
body.p-enterprise .hero-inner { padding-top: calc(var(--nav-h) + 44px + 48px); }

/* ── layout ───────────────────────────────────────────────────────────── */
.page { display: block; overflow-x: clip; }
.container { max-width: var(--w-site); margin: 0 auto; padding: 0 var(--sp-5); }
.container-read { max-width: var(--w-read); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-9) 0; position: relative; }
/* The divider is a faded rule, not a border: a full-width hairline reads as
   a table edge, and the page stops feeling like one surface. */
.section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--w-site), 100%); height: 1px; background: var(--rule);
}
.section-tint {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--glow-rgb), 0.06), transparent 70%),
    linear-gradient(180deg, var(--ground) 0%, var(--tint) 120px, var(--tint) calc(100% - 120px), var(--ground) 100%);
}
.section-head { max-width: 64ch; margin-bottom: var(--sp-8); }
.section-head .eyebrow { margin-bottom: var(--sp-4); }
.section-head .lede { margin-top: var(--sp-5); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
@media (min-width: 900px) {
  .section { padding: 136px 0; }
}
.grid-2 { display: grid; gap: var(--sp-7); }
.grid-3 { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); align-items: start; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* cards — every bordered surface shares one treatment */
.card, .tile, .plan, .partner, .meter, .finding-card, .ladder-card, .gate-cell,
.chain-link, .sizer, .form-step, .artifact, .table-wrap, .legal-toc, .key-facts {
  background: var(--glass);
  border: var(--bw) solid var(--glass-line);
  box-shadow: var(--glass-top);
}
.card { border-radius: var(--r-3); padding: var(--sp-5); }

.card, .tile, .plan, .partner, .meter, .finding-card, .ladder-card {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}
.card:hover, .tile:hover, .plan:hover, .partner:hover, .meter:hover, .finding-card:hover, .ladder-card:hover {
  transform: translateY(-2px); border-color: var(--glass-line-hover);
  box-shadow: var(--glass-top), var(--elev-2);
}

/* ── hero ─────────────────────────────────────────────────────────────── */
/* Home.tsx, EnterpriseHero.tsx and Pricing.tsx use .hero, so the ambience below
   (pattern, vignette, white text) reaches all three and no committed page. */
/* .hero is a full-width ROYAL block (Home + EnterpriseHero): white text on the
   brand gradient, centred by default, two columns with .hero--split (home). */
.hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--grad); }
.hero::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(3, 10, 30, 0.08), rgba(3, 10, 30, 0.24));
}
.hero-inner { max-width: var(--w-site); margin: 0 auto; padding: 96px var(--sp-5) 72px; position: relative; z-index: 1; text-align: center; }
.hero--split .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; text-align: left; }
.hero-copy { min-width: 0; }
.hero--split .hero-copy { max-width: 600px; }
.hero-sub {  /* the home hero subline: 34px bold in the one signal colour,
     fluorescent green, with a faint glow. Green is used here and nowhere else. */
  display: block; margin: 30px 0 0; font-size: var(--fs-hero-sub); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.25; color: var(--signal);
  text-shadow: 0 0 18px rgba(124, 255, 79, 0.35);
}
.hero:not(.hero--split) .hero-sub { margin-left: auto; margin-right: auto; }
/* other heroes (enterprise) keep a light kicker eyebrow — never the signal green */
.hero .eyebrow { color: rgba(255, 255, 255, 0.82); }
.hero .display { margin: 0; color: #fff; background: none; -webkit-text-fill-color: #fff; text-shadow: 0 2px 30px rgba(4, 12, 40, 0.25); }
.hero:not(.hero--split) .display { margin: 0 auto; }
/* the split hero shares its row with the owl, so the headline is sized to its
   column, not the full-bleed display size, or it collides with the art. */
.hero--split .display { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.025em; }
.hero .lede { margin: 30px 0 0; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.hero:not(.hero--split) .lede { margin: var(--sp-5) auto 0; }
.wedges { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.hero:not(.hero--split) .wedges { justify-content: center; margin: var(--sp-6) auto 0; }
.wedge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); }
.wedge svg { color: var(--cyan); flex: none; }
.hero-cta { margin-top: var(--sp-6); }
.hero:not(.hero--split) .hero-cta { justify-content: center; }
.hero .btn-primary { background: #fff; color: var(--navy); border-radius: 9999px; height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-text); box-shadow: 0 12px 30px rgba(3, 10, 40, 0.28); }
.hero .btn-primary:hover { background: #eef2fb; }
.hero-note { margin-top: var(--sp-4); color: rgba(255, 255, 255, 0.72); }
.hero-secondary { display: inline-block; margin-top: var(--sp-4); color: #dce7ff; }
.hero-secondary:hover { color: #fff; }
.hero-art { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 560px; margin: var(--sp-6) auto 0; }
.hero-input { height: 52px; padding: 0 var(--sp-4); width: 100%; border: var(--bw) solid rgba(255, 255, 255, 0.3); border-radius: 12px; background: rgba(255, 255, 255, 0.12); font: inherit; font-size: var(--fs-text); color: #fff; }
.hero-input::placeholder { color: rgba(255, 255, 255, 0.7); }
@media (min-width: 640px) { .hero-form { flex-direction: row; } .hero-form .btn { flex: none; height: 52px; } }
@media (max-width: 820px) {
  .hero--split .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero--split .hero-copy { max-width: none; }
  .hero--split .wedges, .hero--split .hero-cta { justify-content: center; }
  .hero-art { order: 2; }
}

/* the dark strip at the foot of the hero (home) */
.hero-strip { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(3, 10, 30, 0.24), rgba(3, 10, 30, 0.36)); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.hero-strip-in { max-width: var(--w-site); margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 16px var(--sp-5); color: rgba(255, 255, 255, 0.86); font-size: var(--fs-small); }
.hero-strip .proof { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.hero-strip .proof i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero-strip .hint { margin: 0 auto; color: rgba(255, 255, 255, 0.7); }
.hero-strip .count { font-weight: 600; letter-spacing: 0.02em; }
.hero-strip .count b { font-size: var(--fs-card); color: #fff; }
.hero-strip .count span { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 640px) { .hero-strip-in { flex-wrap: wrap; justify-content: center; gap: 12px; } .hero-strip .hint { order: 3; width: 100%; justify-content: center; } }

/* home block sections: two types. Tint blocks sit on --ground already; royal
   blocks paint the gradient with white text and glass cards. */
.home-block { position: relative; }
.home-block.royal { background: var(--grad); color: #fff; }
.home-block.royal .h2 { color: #fff; background: none; -webkit-text-fill-color: #fff; }
.home-block.royal .eyebrow { color: rgba(255, 255, 255, 0.72); }
.home-block.royal .lede { color: rgba(255, 255, 255, 0.9); }
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-7); }
.gcard { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-3); padding: var(--sp-5); text-align: left; }
.gcard h3 { font-size: var(--fs-card); margin: 0 0 8px; color: #fff; }
.gcard p { font-size: var(--fs-text); line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; }
.gcard .ic { width: 46px; height: 46px; margin-bottom: var(--sp-4); color: #fff; }
@media (max-width: 820px) { .gcards { grid-template-columns: 1fr; } }

/* The home "One scan to find what is real" royal block (Sudhir, 27 September 2026):
   the lede in the signal green — the one lede per page allowed to carry the signal
   on a royal block — and the three card titles in three colours: green, shield
   cyan, white. These are COLOUR rules only; the kicker size follows the global
   scale (--fs-small) now, so its former 17px override is gone. */
.home-block.royal .lede { color: var(--signal); }
.gcards .gcard:nth-child(1) h3 { color: var(--signal); }
.gcards .gcard:nth-child(2) h3 { color: var(--cyan); }
.gcards .gcard:nth-child(3) h3 { color: #ffffff; }

/* The /pricing/ page (Pricing.tsx): the hero lede is the one lede per page
   allowed to carry the signal green on a royal block — the closing block's lede
   stays white (the shared .block-royal .lede rule). And the closing block's
   primary CTA is the white pill like the hero's .btn-primary: a solid royal
   .btn-primary vanishes on the gradient, the same reason the nav pill is
   translucent. Colour/treatment only; every size still comes from the six
   --fs tokens. */
body.p-pricing .hero .lede { color: var(--signal); text-shadow: 0 0 18px rgba(124, 255, 79, 0.35); }
body.p-pricing .block-royal .btn-primary {
  background: #fff; color: var(--navy); border-radius: 9999px;
  height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-text);
  box-shadow: 0 12px 30px rgba(3, 10, 40, 0.28);
}
body.p-pricing .block-royal .btn-primary:hover { background: #eef2fb; }

/* The hero background PATTERN: faceted polygons + a faint constellation,
   exactly as docs/mockups/brand/home.html, at the mock opacity. Rule:
   ROYAL blocks carry the pattern, TINT blocks do not. Site.css-level so
   every royal block gets it — home hero, home "one scan", enterprise
   hero — and frozen pages pick it up on regeneration. */
.hero::after, .home-block.royal::before, .block-royal::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20620'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cg%20fill='rgba%28255%2C255%2C255%2C0.10%29'%20stroke='rgba%28255%2C255%2C255%2C0.08%29'%3E%3Cpolygon%20points='820%2C30%201010%2C0%201120%2C150%20940%2C210'/%3E%3Cpolygon%20points='940%2C210%201120%2C150%201180%2C330%201000%2C360'/%3E%3Cpolygon%20points='1000%2C360%201180%2C330%201150%2C520%20980%2C500'/%3E%3Cpolygon%20points='700%2C110%20820%2C30%20940%2C210%20800%2C270'/%3E%3Cpolygon%20points='0%2C420%20150%2C360%20240%2C540%2060%2C620'/%3E%3C/g%3E%3Cg%20stroke='rgba%28255%2C255%2C255%2C0.28%29'%20stroke-width='1'%3E%3Cline%20x1='130'%20y1='80'%20x2='300'%20y2='140'/%3E%3Cline%20x1='300'%20y1='140'%20x2='240'%20y2='290'/%3E%3Cline%20x1='300'%20y1='140'%20x2='470'%20y2='110'/%3E%3Cline%20x1='900'%20y1='470'%20x2='1040'%20y2='560'/%3E%3C/g%3E%3Cg%20fill='%23ffffff'%3E%3Ccircle%20cx='130'%20cy='80'%20r='2.4'/%3E%3Ccircle%20cx='300'%20cy='140'%20r='2.4'/%3E%3Ccircle%20cx='240'%20cy='290'%20r='2'/%3E%3Ccircle%20cx='470'%20cy='110'%20r='2.2'/%3E%3Ccircle%20cx='1040'%20cy='560'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; background-position: center; opacity: 0.5;
}
.home-block.royal { position: relative; }
.home-block .container { position: relative; z-index: 1; }

/* ── generic full-width blocks: .block-royal / .block-tint ─────────────────
   The enterprise page is the same alternating template as home: royal blocks
   paint the gradient with white text, glass cards and the hero pattern; tint
   blocks are the light --ground with ink text and white cards. These are
   ADDITIVE — they reuse the home patterns and never touch home's own rules.
   The signal green (#7CFF4F) never appears here; links follow the shared
   .block-royal rule near the top of this file (white + cyan arrow). */
.block-royal { position: relative; background: var(--grad); color: #fff; }
.block-tint { background: var(--ground); color: var(--ink); }

/* the same faceted pattern as .hero::after, at the same opacity, on royal
   blocks only. Added to the shared pattern rule below via .block-royal::before. */
.block-royal { overflow: hidden; }
.block-royal .container { position: relative; z-index: 1; }

/* headings, eyebrows and body text go white on royal */
.block-royal .h2 { color: #fff; background: none; -webkit-text-fill-color: #fff; }
.block-royal .h3,
.block-royal .h4 { color: #fff; }
.block-royal .eyebrow { color: rgba(255, 255, 255, 0.72); }
.block-royal .argument-text .eyebrow { color: var(--cyan); }
.block-royal .lede { color: rgba(255, 255, 255, 0.9); }
.block-royal p,
.block-royal li,
.block-royal dd,
.block-royal dt,
.block-royal .muted,
.block-royal .small,
.block-royal .caption { color: rgba(255, 255, 255, 0.85); }
.block-royal strong,
.block-royal b { color: #fff; }

/* section cards go GLASS on royal — the same look as home's .gcard. Cover the
   card/panel classes the enterprise sections actually use. */
.block-royal .card,
.block-royal .tile,
.block-royal .plan,
.block-royal .partner,
.block-royal .meter,
.block-royal .finding-card,
.block-royal .ladder-card,
.block-royal .gate-cell,
.block-royal .chain-link,
.block-royal .sizer,
.block-royal .form-step,
.block-royal .table-wrap,
.block-royal .stat,
.block-royal .doc-sec,
.block-royal .sizer-out {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.block-royal .card:hover,
.block-royal .tile:hover,
.block-royal .plan:hover,
.block-royal .partner:hover,
.block-royal .meter:hover,
.block-royal .finding-card:hover,
.block-royal .ladder-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

/* card interiors: whiten every ink token the enterprise cards use */
.block-royal .stat-value,
.block-royal .metric-value {
  color: #fff; background: none; -webkit-text-fill-color: #fff;
}
.block-royal .stat-label,
.block-royal .metric-label { color: rgba(255, 255, 255, 0.85); }
.block-royal .stat-src { color: rgba(255, 255, 255, 0.6); }
.block-royal .tile-title,
.block-royal .finding-title,
.block-royal .plan-name,
.block-royal .meter-title,
.block-royal .doc-title,
.block-royal .sizer-tier { color: #fff; }
.block-royal .tile-body,
.block-royal .finding-summary,
.block-royal .plan-who,
.block-royal .meter-body,
.block-royal .doc-body,
.block-royal .chain-label,
.block-royal .sizer-note { color: rgba(255, 255, 255, 0.85); }
.block-royal .tile-caps { color: rgba(255, 255, 255, 0.85); }
.block-royal .tile-caps li::before { background: var(--cyan); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.block-royal .plan-short,
.block-royal .plan-per,
.block-royal .finding-meta,
.block-royal .chain-note,
.block-royal .doc-n,
.block-royal .timeline-t { color: rgba(255, 255, 255, 0.7); }
.block-royal .plan-price { color: #fff; }
.block-royal .doc-sec { border-top: none; }
.block-royal .doc { gap: var(--sp-4); }
.block-royal .plan-rows { border-top-color: rgba(255, 255, 255, 0.22); }
.block-royal .plan-row dt { color: rgba(255, 255, 255, 0.85); }

/* the pipeline attack-graph / hops captions and lists */
.block-royal .graph-caption,
.block-royal .hops { color: rgba(255, 255, 255, 0.85); }
.block-royal .graph-caption strong,
.block-royal .hops code { color: #fff; }
.block-royal .method { color: rgba(255, 255, 255, 0.85); }

/* comparison table (Compare, royal): glass table, white text, translucent rules */
.block-royal .table th,
.block-royal .table td { border-top-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.block-royal .table thead th { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); border-top: 0; }
.block-royal .table tbody th { color: #fff; }
.block-royal .table tbody tr:hover { background: rgba(255, 255, 255, 0.06); }
.block-royal .compare-with { color: #fff !important; background: rgba(255, 255, 255, 0.08); }
.block-royal .compare-th-with { color: #fff !important; }

/* sizer rows and dl-lists on royal */
.block-royal .sizer-row { color: rgba(255, 255, 255, 0.85); }
.block-royal .sizer-row dd { color: #fff; }
.block-royal .sizer-row.is-total { border-top-color: rgba(255, 255, 255, 0.22); color: #fff; }
.block-royal .sizer-row.is-saving dd { color: var(--cyan); }
.block-royal .sizer-rows { border-top-color: rgba(255, 255, 255, 0.22); }
.block-royal .dl-list > div { border-top-color: rgba(255, 255, 255, 0.22); }
.block-royal .dl-list dt { color: #fff; }
.block-royal .dl-list dd { color: rgba(255, 255, 255, 0.85); }

/* the POC form on royal: white legends/labels, translucent inputs */
.block-royal .form-step legend { color: #fff; }
.block-royal .field > label,
.block-royal .field-legend { color: rgba(255, 255, 255, 0.9); }
.block-royal .field-hint { color: rgba(255, 255, 255, 0.65); }
.block-royal .input,
.block-royal .select,
.block-royal .textarea {
  background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.28); color: #fff;
}
.block-royal .input::placeholder,
.block-royal .textarea::placeholder { color: rgba(255, 255, 255, 0.6); }
.block-royal .select { color: #fff; }
.block-royal .select option { color: var(--ink); }
.block-royal .pills label { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.9); }
.block-royal .pills label:has(input:checked) { background: rgba(255, 255, 255, 0.9); border-color: #fff; color: var(--navy); }
.block-royal .consent span { color: rgba(255, 255, 255, 0.9); }
.block-royal .form-success h3 { color: #fff; }

/* section top-rules that read as ink hairlines go translucent on royal */
.block-royal .timeline li,
.block-royal .after-list,
.block-royal .chip-group-title { color: rgba(255, 255, 255, 0.85); }
.block-royal .timeline li { border-top-color: rgba(255, 255, 255, 0.16); }

/* a few later rules (.argument-text p, .plan-row dd, .sizer-*, .term-caption)
   have equal specificity to the block-royal body rule but come later in the
   file, so they win and stay ink; re-assert white with a matched selector. */
.block-royal .argument-text p { color: rgba(255, 255, 255, 0.85); }
.block-royal .sizer-field label { color: rgba(255, 255, 255, 0.85); }
.block-royal .sizer-price {
  color: var(--cyan); background: none; -webkit-text-fill-color: var(--cyan);
}
.block-royal .plan-row dd { color: #fff; }
.block-royal .plan-row.on dd { color: var(--cyan); }
.block-royal .plan-row.off dd { color: rgba(255, 255, 255, 0.5); }
.block-royal .term-caption { color: rgba(255, 255, 255, 0.7); }

/* range slider track/thumb read on royal */
.block-royal input[type="range"] { accent-color: #fff; }

/* the pale between-section hairline the .section stacking draws would show as a
   dark line across a royal block; suppress it where a block-royal follows. */
.block-royal.section::before,
.section + .block-royal.section::before { display: none; }

/* The type scale is global now: the base class rules (.h2, .metric-value,
   .ladder-price, .gcard h3, .lede, .eyebrow, …) carry the six tokens, so the
   old per-page body.p-home / body.p-enterprise size blocks are gone. What stays
   below is home-only LAYOUT and COLOUR, never size (Sudhir, 27 September 2026). */
/* metric numbers each carry their own inline colour (from HOME_METRICS); the
   base .metric-value clips an ink gradient to the glyphs, which would hide that
   colour — so turn the clip off here and let the inline `color` show. Size is
   the global --fs-title (38), set on the base .metric-value. */
body.p-home .metric-value {
  background: none; -webkit-text-fill-color: currentColor;
}
body.p-home .metric-label { color: #0f172a; }
body.p-home .metrics { grid-template-columns: repeat(5, 1fr); max-width: none; }
body.p-home .proof-strip .h2 { margin-bottom: var(--sp-6); }
@media (max-width: 720px) { body.p-home .metrics { grid-template-columns: repeat(2, 1fr); } }
/* the client logos, ~1.6x the base 26px */
body.p-home .logos img { height: 42px; }

/* ── hero scan terminal (src/marketing/components/HeroScan.tsx) ────────────
   The product shot, and the one dark object on the page. A staged, CSS-only
   replay of a scan: each .ts-line carries its delay in --ts-d and fades in
   once. Lines are laid out at full height from the first byte (opacity only,
   min-height absorbs font swap), so CLS is zero. Without html.motion — no
   JS, crawlers, reduced motion — every line is visible and the frame sits
   flat. */
.hero-scan {
  max-width: 1120px; margin: 88px auto 0; padding: 0 var(--sp-5);
  text-align: left; position: relative; z-index: 1;
  perspective: 2000px;
}
.hero-scan::before {  /* the glow the frame floats on */
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: -40px; height: 70%;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(var(--glow-rgb), 0.22), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.hero-term {
  position: relative;
  box-shadow: var(--elev-term);
  border: var(--bw) solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  min-height: 300px; padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-small);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 120px),
    var(--term-bg);
  transform-origin: 50% 0%;
}
.hero-term::before {  /* a lit top edge */
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 192, 240, 0.7), transparent);
}
.term-dots { display: inline-flex; gap: 6px; margin-right: var(--sp-2); }
.term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2b4a94; border: 0; }
.hero-scan .term-caption { text-align: center; margin-top: var(--sp-5); }

/* The owl-in-shield is the home hero visual (home only, 28 September 2026,
   docs/decisions.md). It floats on the light ground with a soft royal glow;
   the white background is already cut from the asset, so it sits on any ground. */
.hero-owl { margin: 0 auto; width: min(88%, 300px); position: relative; }
.hero-owl::before {
  content: ""; position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 66%; height: 56px; border-radius: 50%; z-index: -1; filter: blur(10px);
  background: radial-gradient(closest-side, var(--cyan), transparent 72%); opacity: 0.5;
}
.hero-owl img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(3, 10, 40, 0.42)); }
@media (min-width: 760px) { .hero-owl { width: min(100%, 420px); } }
html.motion .hero-owl { animation: rise-in 900ms var(--ease-out) 0.2s both; }

html.motion .hero-term { animation: tilt-in 1.4s var(--ease-out) 0.2s both; }
@keyframes tilt-in {
  from { opacity: 0; transform: rotateX(24deg) translateY(40px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
html.motion .hero-term .ts-line { opacity: 0; animation: ts-appear var(--dur-2) var(--ease-out) forwards; animation-delay: calc(var(--ts-d, 0ms) + 600ms); }
@keyframes ts-appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ts-cursor { color: var(--term-phase); }
html:not(.motion) .ts-cursor { display: none; }
html.motion .ts-cursor { animation: ts-blink 1.1s steps(1) infinite, ts-appear var(--dur-2) var(--ease-out) backwards; animation-delay: calc(var(--ts-d, 0ms) + 600ms); }
@keyframes ts-blink { 50% { opacity: 0; } }

/* ── proof strip (logos + metrics) ────────────────────────────────────── */
.proof-strip { padding: var(--sp-8) 0 var(--sp-8); text-align: center; }
.proof-strip .eyebrow { margin-bottom: var(--sp-6); color: var(--ink-3); }
.logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-6) 56px;
}
.logos img, .partner img { filter: grayscale(1); opacity: 0.7; transition: opacity var(--dur-1) ease, filter var(--dur-1) ease; }
.logos img { height: 26px; width: auto; }
.logos a:hover img, .partner:hover img { opacity: 1; filter: none; }
.metrics {
  list-style: none; padding: 0; margin: var(--sp-8) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  max-width: 960px;
  border: var(--bw) solid var(--glass-line); border-radius: var(--r-3);
  background: var(--glass); box-shadow: var(--glass-top), var(--elev-2); overflow: hidden;
}
.metric {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-6) var(--sp-4);
  border-right: var(--bw) solid var(--glass-line); border-bottom: var(--bw) solid var(--glass-line);
  margin: 0 -1px -1px 0;
}
.metric-value {
  font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.metric-label { font-size: var(--fs-small); color: var(--ink-2); }
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, 1fr); } }

/* ── ladder ───────────────────────────────────────────────────────────── */
.ladder { list-style: none; padding: 0; margin: var(--sp-7) 0 0; display: grid; gap: var(--sp-4); }
.ladder-card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: 18px;
}
/* The featured card carries its border as a gradient: a background layer
   clipped to the border box under a padding-box fill, since border-image
   cannot follow a radius. */
.ladder-card.is-featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #ffffff, #fafcfb) padding-box,
    linear-gradient(180deg, var(--accent-bright), rgba(var(--glow-rgb), 0.12) 75%) border-box;
  box-shadow: 0 24px 56px -24px rgba(var(--glow-rgb), 0.45);
}
.ladder-card.is-featured:hover { box-shadow: 0 28px 64px -24px rgba(var(--glow-rgb), 0.55); }
.ladder-mark {
  position: absolute; top: -11px; left: var(--sp-5);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 9999px;
}
.ladder-name { font-size: var(--fs-card); font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; }
.ladder-line { font-size: var(--fs-small); color: var(--ink-3); margin: 0 0 var(--sp-4); }
.ladder-price { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; }
.ladder-per { font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.ladder-who { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); margin: var(--sp-3) 0 var(--sp-5); flex: 1; }
@media (min-width: 640px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ladder { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

/* ── argument (why now) ───────────────────────────────────────────────── */
.argument-text p + p { margin-top: var(--sp-4); }
.argument-text p { color: var(--ink-2); font-size: var(--fs-text); line-height: 1.65; }
.argument-text .eyebrow { color: var(--accent-bright); }
.chart { display: block; width: 100%; height: auto; }
.chart-rise { stroke: var(--accent-bright); stroke-width: 2.5; fill: none; }
.chart-flat { stroke: var(--ink-3); stroke-width: 2; fill: none; stroke-dasharray: 6 6; }
.chart-gap { fill: rgba(var(--glow-rgb), 0.10); }
.chart-axis { stroke: var(--hair); stroke-width: 1; }
.chart-label { font-family: var(--sans); font-size: var(--fs-small); fill: var(--ink-2); }
.chart-label-accent { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; fill: var(--accent); }
.stats { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
.stat { border-top: var(--bw) solid var(--hair); padding-top: var(--sp-5); }
.stat-value {
  font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { font-size: var(--fs-text); color: var(--ink-2); margin-top: var(--sp-2); line-height: 1.45; }
.stat-src { font-size: var(--fs-small); color: var(--ink-3); margin-top: var(--sp-2); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ── proof: gate, report anatomy, artifact, transcript ────────────────── */
.gate { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.gate-cell {
  border-radius: var(--r-3); padding: var(--sp-5);
  font-size: var(--fs-text); color: var(--ink-2);
}
.gate-cell strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.gate-cell.is-verdict {
  border-color: rgba(var(--glow-rgb), 0.5);
  background: linear-gradient(180deg, #f1f8f4, #ffffff);
  box-shadow: 0 16px 40px -20px rgba(var(--glow-rgb), 0.5);
}
.gate-cell.is-verdict strong { color: var(--accent); }
.gate-arrow { display: none; text-align: center; color: var(--ink-3); align-self: center; }
@media (min-width: 900px) {
  .gate { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
  .gate-arrow { display: block; }
}
.doc { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: 0; }
.doc-sec { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: var(--bw) solid var(--hair); }
.doc-n { font-family: var(--mono); font-size: var(--fs-small); color: var(--accent-bright); padding-top: 3px; }
.doc-title { font-size: var(--fs-card); font-weight: 600; }
.doc-body { font-size: var(--fs-text); color: var(--ink-2); margin-top: 2px; }
@media (min-width: 900px) { .doc { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-8); } }

.artifact { border-radius: var(--r-3); overflow: hidden; margin-top: var(--sp-6); box-shadow: var(--glass-top), var(--elev-2); }
.artifact-head { padding: var(--sp-4) var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; border-bottom: var(--bw) solid var(--glass-line); }
.artifact-title { font-weight: 600; font-size: var(--fs-card); }
.artifact-target { font-size: var(--fs-small); color: var(--ink-3); width: 100%; }
.artifact-body { padding: var(--sp-5); display: grid; gap: var(--sp-4); font-size: var(--fs-text); }
.artifact-body dt { font-size: var(--fs-small); font-weight: 500; color: var(--ink-3); margin-bottom: 4px; }
.artifact-body dd { color: var(--ink-body); }
.artifact-body dd code { font-size: var(--fs-small); background: var(--accent-tint); padding: 2px 6px; border-radius: 5px; color: var(--accent); }
@media (min-width: 900px) { .artifact-body { grid-template-columns: 1fr 1fr; } }

.term {
  background: var(--term-bg); color: var(--term-fg);
  border: var(--bw) solid rgba(11, 30, 79, 0.9);
  border-radius: 14px; padding: var(--sp-4) var(--sp-5);
  font-family: var(--mono); font-size: var(--fs-small); line-height: 1.65;
  overflow-x: auto; white-space: pre; margin: 0;
  tab-size: 2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--elev-2);
}
.term-head { display: flex; align-items: center; gap: var(--sp-3); color: var(--term-dim); font-size: var(--fs-small); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: var(--bw) solid rgba(255, 255, 255, 0.06); white-space: normal; }
.term-head b { color: var(--term-fg); font-weight: 500; }
.term-line { display: block; }
.term-phase { color: var(--term-phase); }
.term-agent { color: var(--term-agent); }
.term-finding { color: var(--term-finding); }
.term-exploit { color: var(--term-exploit); }
.term-info { color: var(--term-fg); }
.term-dim { color: var(--term-dim); }
.term-verdict { color: var(--term-phase); font-weight: 500; }
.term-more { margin-top: var(--sp-3); }
.term-more summary { cursor: pointer; color: var(--term-phase); font-size: var(--fs-small); list-style: none; white-space: normal; }
.term-more summary::-webkit-details-marker { display: none; }
.term-more summary::before { content: "+ "; }
.term-more[open] summary::before { content: "\2212  "; }
.term-more[open] summary { margin-bottom: var(--sp-2); }
.term-caption { font-size: var(--fs-small); color: var(--ink-3); margin-top: var(--sp-3); }
.artifact .term { border-radius: 0; border: 0; box-shadow: none; }

.tiles { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-4); }
.tile { border-radius: 20px; padding: var(--sp-6); position: relative; overflow: hidden; }
.tile::before {  /* a corner light, so a grid of tiles reads as lit, not flat */
  content: ""; position: absolute; top: -120px; right: -120px; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.12), transparent 65%);
  pointer-events: none;
}
.tile-label { margin-bottom: var(--sp-3); }
.tile-title { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.tile-body { color: var(--ink-2); font-size: var(--fs-text); margin-top: var(--sp-3); line-height: 1.6; }
.tile-caps { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: 8px; font-size: var(--fs-text); color: var(--ink-body); }
.tile-caps li { display: flex; gap: 10px; align-items: baseline; }
.tile-caps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(var(--glow-rgb), 0.15); flex: none; position: relative; top: -2px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }

.chain { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-3); }
.chain-link { flex: 1 1 140px; border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); }
.chain-op { align-self: center; color: var(--ink-3); font-size: var(--fs-card); padding: 0 2px; }
.chain-v { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.chain-label { font-size: var(--fs-small); color: var(--ink); margin-top: 2px; }
.chain-note { font-size: var(--fs-small); color: var(--ink-3); }
.chain-result {
  border-color: rgba(var(--glow-rgb), 0.5);
  background: linear-gradient(180deg, #f1f8f4, #ffffff);
  box-shadow: 0 16px 40px -20px rgba(var(--glow-rgb), 0.5);
}
.chain-result .chain-v { color: var(--accent); }
.chain-result .chain-note { color: var(--accent); font-weight: 600; }

/* ── pipeline ─────────────────────────────────────────────────────────── */
.pipeline { list-style: none; padding: 0; margin: var(--sp-7) 0 0; position: relative; }
.phase { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); padding: var(--sp-6) 0; border-top: var(--bw) solid var(--hair); }
.phase:first-child { border-top: 0; padding-top: 0; }
.phase-num {
  font-family: var(--mono); font-size: var(--fs-small); color: var(--accent); font-variant-numeric: tabular-nums;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw) solid rgba(var(--glow-rgb), 0.3); border-radius: 10px; background: var(--accent-tint);
}
.phase-name { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.025em; }
.phase-tag { font-size: var(--fs-text); color: var(--ink-2); margin-top: 4px; }
.phase-desc { margin-top: var(--sp-3); color: var(--ink-2); max-width: 62ch; font-size: var(--fs-text); line-height: 1.65; }
.phase-counter { margin-top: var(--sp-3); font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-3); }
.phase-more { margin-top: var(--sp-4); }
.phase-more summary { cursor: pointer; font-size: var(--fs-small); font-weight: 500; color: var(--ink); list-style: none; display: inline-block; }
.phase-more summary::-webkit-details-marker { display: none; }
.phase-more summary::after { content: " \203A"; display: inline-block; color: var(--accent-bright); transition: transform var(--dur-1) ease; }
.phase-more[open] summary::after { transform: rotate(90deg); }
.phase-detail { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
.agents { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.agent { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-3); font-size: var(--fs-small); padding: 8px 0; border-top: var(--bw) solid var(--hair-2); }
.agent-kind { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-3); padding-top: 3px; text-transform: none; }
.agent-id { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink); }
.agent-role { color: var(--ink-2); }
.agent-hover { font-size: var(--fs-small); color: var(--ink-3); }
.code {
  background: var(--term-bg); color: var(--term-fg); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--elev-1);
  padding: var(--sp-4) var(--sp-5); font-family: var(--mono); font-size: var(--fs-small); line-height: 1.65;
  overflow-x: auto; margin: 0; white-space: pre;
}
.code-title { font-size: var(--fs-small); font-weight: 500; color: var(--ink-3); margin-bottom: var(--sp-2); }
@media (min-width: 900px) {
  .phase { grid-template-columns: 64px 1fr; gap: var(--sp-5); }
  .phase-detail { grid-template-columns: 3fr 2fr; }
}

.graph-figure { margin-top: var(--sp-6); padding: var(--sp-5); border: var(--bw) solid var(--glass-line); border-radius: 20px; background: var(--glass); box-shadow: var(--glass-top), var(--elev-2); }
.graph { display: block; width: 100%; height: auto; }
.graph-edge { stroke: var(--hair); stroke-width: 1.5; fill: none; }
.graph-node { fill: var(--panel); stroke: var(--hair); stroke-width: 1.5; }
.graph-node-store { fill: var(--tint); }
.graph-node-label { font-family: var(--mono); font-size: var(--fs-small); fill: var(--ink); }
.graph-node-kind { font-family: var(--sans); font-size: var(--fs-small); fill: var(--ink-3); }
.graph-hop { stroke: var(--accent-bright); stroke-width: 2.5; fill: none; }
.graph-hop-n { fill: var(--accent); }
.graph-hop-n-text { font-family: var(--mono); font-size: var(--fs-small); font-weight: 600; fill: var(--accent-ink); }
.graph-pill { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; }
.graph-pill-bg { rx: 9; }
.graph-pill-med .graph-pill-bg { fill: #fff6e0; stroke: var(--sev-med); }
.graph-pill-med text { fill: var(--sev-med); }
.graph-pill-high .graph-pill-bg { fill: #fdf0e6; stroke: var(--sev-high); }
.graph-pill-high text { fill: var(--sev-high); }
.graph-caption { font-size: var(--fs-text); color: var(--ink-2); margin-top: var(--sp-4); }
.graph-caption strong { color: var(--ink); }
.hops { margin: var(--sp-4) 0 0; padding-left: 1.3em; color: var(--ink-2); font-size: var(--fs-text); }
.hops li { margin: 4px 0; }
.hops code { font-size: var(--fs-small); color: var(--ink-body); }

/* ── integrations ─────────────────────────────────────────────────────── */
.chips { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: var(--fs-small); color: var(--ink-body); background: var(--panel);
  border: var(--bw) solid var(--glass-line); border-radius: 9999px; padding: 6px 12px;
  box-shadow: var(--glass-top);
  transition: border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.chip:hover { border-color: var(--glass-line-hover); color: var(--ink); }
/* A chip that is a link (the agent and coding-tool chips on Home, J-48) keeps
   the chip's ink and no underline: as a bare <a> it would turn accent-blue and
   underline on hover, and read as a different kind of thing from its neighbours. */
a.chip { display: inline-block; color: var(--ink-body); }
a.chip:hover { color: var(--ink); text-decoration: none; }
.chip-group + .chip-group { margin-top: var(--sp-5); }
.chip-group-title { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.cmd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: var(--term-bg); color: var(--term-fg); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px -20px rgba(var(--glow-rgb), 0.55);
  padding: var(--sp-4) var(--sp-5); font-family: var(--mono); font-size: var(--fs-text);
  margin-top: var(--sp-5); overflow-x: auto; white-space: nowrap;
}
.cmd span::before { content: "$ "; color: var(--term-phase); }
.timeline { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4); padding: 12px 0; border-top: var(--bw) solid var(--hair); font-size: var(--fs-text); }
.timeline-t { font-family: var(--mono); font-size: var(--fs-small); color: var(--accent-bright); padding-top: 2px; font-variant-numeric: tabular-nums; }
.timeline-text { color: var(--ink-2); }
.timeline-text code { font-size: var(--fs-small); background: var(--wash-2); padding: 1px 5px; border-radius: 4px; color: var(--ink-body); }
.yaml { margin-top: var(--sp-5); }
.after-list { margin: var(--sp-4) 0 0; padding-left: 1.3em; color: var(--ink-2); font-size: var(--fs-text); }
.after-list li { margin: 6px 0; }

/* ── compare table ────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: var(--sp-6); border-radius: var(--r-3); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-text); }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--sp-4); border-top: var(--bw) solid var(--hair-2); }
.table thead th { border-top: 0; background: var(--wash-1); font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.table tbody th { font-weight: 600; white-space: nowrap; color: var(--ink); }
.table td { color: var(--ink-2); }
.table tbody tr { transition: background var(--dur-1) ease; }
.table tbody tr:hover { background: var(--wash-1); }
.compare-with { color: var(--ink) !important; background: rgba(var(--glow-rgb), 0.06); }
.compare-th-with { color: var(--accent) !important; }
.compare-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); }

/* ── pricing ──────────────────────────────────────────────────────────── */
.plans { list-style: none; padding: 0; margin: var(--sp-7) 0 0; display: grid; gap: var(--sp-4); }
.plan { position: relative; display: flex; flex-direction: column; border-radius: 18px; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.plan.is-grouped { border-color: rgba(var(--glow-rgb), 0.5); box-shadow: var(--glass-top), 0 24px 56px -28px rgba(var(--glow-rgb), 0.5); }
.plan-groupmark { position: absolute; top: -11px; left: var(--sp-5); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-small); font-weight: 600; padding: 4px 10px; border-radius: 9999px; }
.plan-name { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.01em; }
.plan-short { font-size: var(--fs-small); color: var(--ink-3); margin-top: 2px; }
.plan-price { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.04em; margin-top: var(--sp-4); font-variant-numeric: tabular-nums; line-height: 1.05; }
.plan-per { font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.plan-who { font-size: var(--fs-text); color: var(--ink-2); line-height: 1.55; margin-top: var(--sp-3); }
.plan .btn { margin-top: var(--sp-5); align-self: flex-start; }
.plan-rows { margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border-top: var(--bw) solid var(--glass-line); display: grid; gap: 8px; font-size: var(--fs-small); }
.plan-row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.plan-row dt { color: var(--ink-3); }
.plan-row dd { color: var(--ink); text-align: right; }
.plan-row.on dd { color: var(--accent); font-weight: 500; }
.plan-row.off dd { color: var(--ink-3); }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

.sizer { border-radius: 20px; padding: var(--sp-6); margin-top: var(--sp-6); display: grid; gap: var(--sp-6); box-shadow: var(--glass-top), var(--elev-2); }
.sizer-controls { display: grid; gap: var(--sp-4); }
.sizer-field { display: grid; gap: 8px; }
.sizer-field label { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-2); }
.sizer-field output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sizer input[type="range"] { width: 100%; accent-color: var(--accent); }
.sizer-dep { display: flex; flex-wrap: wrap; gap: 8px; }
.sizer-dep label { position: relative; font-size: var(--fs-small); border: var(--bw) solid var(--glass-line); background: var(--panel); border-radius: 9999px; padding: 6px 12px; cursor: pointer; color: var(--ink-body); }
.sizer-dep input { position: absolute; opacity: 0; width: 0; height: 0; }
.sizer-dep input:checked + span { color: var(--accent); }
.sizer-dep label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.sizer-out { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-5); border-radius: var(--r-3); background: var(--ground); border: var(--bw) solid var(--glass-line); }
.sizer-tier { font-size: var(--fs-card); font-weight: 600; }
.sizer-price {
  font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.05;
  color: var(--accent); background: var(--grad-text-accent);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sizer-note { font-size: var(--fs-small); color: var(--ink-2); }
.sizer-rows { margin: var(--sp-3) 0 0; display: grid; gap: 6px; font-size: var(--fs-small); border-top: var(--bw) solid var(--glass-line); padding-top: var(--sp-3); }
.sizer-row { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--ink-2); }
.sizer-row dd { font-variant-numeric: tabular-nums; color: var(--ink); }
.sizer-row.is-total { border-top: var(--bw) solid var(--glass-line); padding-top: 8px; margin-top: 2px; font-weight: 600; color: var(--ink); }
.sizer-row.is-saving dd { color: var(--accent); }
@media (min-width: 900px) { .sizer { grid-template-columns: 3fr 2fr; } }

.dl-list { margin: var(--sp-6) 0 0; display: grid; gap: 0; }
.dl-list > div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-4); padding: 14px 0; border-top: var(--bw) solid var(--hair); font-size: var(--fs-text); }
.dl-list dt { font-weight: 600; }
.dl-list dd { color: var(--ink-2); }
.meters { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-4); }
.meter { border-radius: var(--r-3); padding: var(--sp-5); }
.meter-title { font-weight: 600; }
.meter-body { font-size: var(--fs-text); color: var(--ink-2); margin-top: 6px; line-height: 1.55; }
@media (min-width: 900px) { .meters { grid-template-columns: repeat(3, 1fr); } }
.notes { margin: var(--sp-5) 0 0; padding-left: 1.3em; color: var(--ink-2); font-size: var(--fs-text); }
.notes li { margin: 6px 0; }

/* ── customers / research ─────────────────────────────────────────────── */
.partners { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-4); }
.partner { border-radius: 18px; padding: var(--sp-6) var(--sp-5); }
.partner img { height: 28px; width: auto; }
.partner-blurb { font-size: var(--fs-text); color: var(--ink-2); margin-top: var(--sp-4); line-height: 1.55; }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(3, 1fr); } }
.finding-card { border-radius: 20px; padding: var(--sp-6); margin-top: var(--sp-6); }
.finding-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; font-size: var(--fs-small); color: var(--ink-3); }
.finding-title { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin-top: var(--sp-4); }
.finding-summary { color: var(--ink-2); font-size: var(--fs-text); margin-top: var(--sp-3); line-height: 1.6; }
.sev-pill { display: inline-block; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; border: var(--bw) solid currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.sev-critical { color: var(--sev-crit); }
.sev-high { color: var(--sev-high); }
.sev-medium { color: var(--sev-med); }
.method { margin: var(--sp-5) 0 0; padding-left: 1.3em; color: var(--ink-2); font-size: var(--fs-text); }
.method li { margin: 6px 0; }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq-list { margin-top: var(--sp-6); border-top: var(--bw) solid var(--hair); }
.faq { border-bottom: var(--bw) solid var(--hair); }
.faq summary { cursor: pointer; padding: var(--sp-5) 0; font-size: var(--fs-text); font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); transition: color var(--dur-1) ease; }
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; flex: none; font-size: var(--fs-small); line-height: 1; transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) ease; }
.faq[open] summary::after { transform: rotate(45deg); color: var(--accent-bright); }
.faq div { padding: 0 0 var(--sp-5); color: var(--ink-2); font-size: var(--fs-text); line-height: 1.65; max-width: 65ch; }

/* ── forms (POC) ──────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.form-step { border-radius: 20px; padding: var(--sp-6) var(--sp-5) var(--sp-5); margin: 0; min-width: 0; }
.form-step legend { font-weight: 600; font-size: var(--fs-card); padding: 0 8px; }
.form-step-note { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--sp-4); }
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } .form-grid .span-2 { grid-column: span 2; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field-legend { font-size: var(--fs-small); font-weight: 500; color: var(--ink-body); }
.field-hint { font-size: var(--fs-small); color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; padding: 0 var(--sp-3); height: 42px;
  border: var(--bw) solid var(--hair); border-radius: 8px; background: var(--panel);
  font: inherit; font-size: var(--fs-text); color: var(--ink);
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.textarea { height: auto; min-height: 104px; padding: var(--sp-3); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--st-fail); }
.field-error { font-size: var(--fs-small); color: var(--st-fail); display: none; }
.field.is-invalid .field-error { display: block; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { position: relative; font-size: var(--fs-small); border: var(--bw) solid var(--hair); background: var(--panel); border-radius: 9999px; padding: 6px 12px; cursor: pointer; color: var(--ink-body); }
.pills input { position: absolute; opacity: 0; width: 0; height: 0; }
.pills label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.pills label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-2); }
.consent input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.form-status { font-size: var(--fs-small); color: var(--st-fail); }
.form-success { border: var(--bw) solid rgba(var(--glow-rgb), 0.5); background: linear-gradient(180deg, #f1f8f4, #ffffff); border-radius: 20px; padding: var(--sp-6); }
.form-success h3 { font-size: var(--fs-card); font-weight: 600; }
.form-success p { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-text); }
.cf-turnstile { min-height: 65px; }

/* ── prose (articles, guides, legal, about) ───────────────────────────── */
.prose { font-size: var(--fs-text); line-height: 1.7; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin-top: 2.2em; color: var(--ink); }
.prose h3 { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin-top: 1.8em; color: var(--ink); }
.prose h4 { font-size: var(--fs-card); font-weight: 600; margin-top: 1.4em; color: var(--ink); }
.prose p, .prose li { color: var(--ink-body); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--ink-3); }
.prose a { text-decoration: underline; text-decoration-color: rgba(26, 95, 214, 0.35); text-underline-offset: 0.18em; }
.prose a:hover { text-decoration-color: var(--accent); }
/* A button inside prose (the doors on /connect/, the one-click links in each
   tool section) is a button, not a link in a sentence: no underline. */
.prose a.btn, .prose a.btn:hover { text-decoration: none; }
.prose blockquote { border-left: 2px solid var(--accent-bright); padding-left: var(--sp-4); color: var(--ink-2); }
.prose pre { background: var(--term-bg); color: var(--term-fg); border-radius: 12px; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-small); line-height: 1.65; overflow-x: auto; }
.prose code { font-size: var(--fs-small); background: var(--wash-2); color: var(--ink); padding: 2px 6px; border-radius: 5px; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-text); display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-top: var(--bw) solid var(--hair); vertical-align: top; }
.prose th { font-weight: 600; background: var(--wash-1); color: var(--ink); }
.prose hr { border: 0; height: 1px; background: var(--rule); }
.prose img { border-radius: var(--r-2); }
.prose .mermaid { display: flex; justify-content: center; margin: 1.5em 0; overflow-x: auto; }
.prose strong { font-weight: 600; color: var(--ink); }
.key-facts { border-left: 3px solid var(--accent-bright); border-radius: var(--r-2); padding: var(--sp-5); }
.key-facts h2 { margin-top: 0; font-size: var(--fs-card); }
.key-facts ul { margin-top: var(--sp-3); }

/* ── blog ─────────────────────────────────────────────────────────────── */
.blog-head { padding: 112px 0 var(--sp-7); }
.blog-head h1 { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02;
  color: var(--ink); background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.posts { list-style: none; padding: 0; margin: 0; }
.post-item { border-top: var(--bw) solid var(--hair); }
.post-item a { display: grid; gap: 6px; padding: var(--sp-6) 0; color: inherit; }
.post-item a:hover { text-decoration: none; }
.post-item a:hover .post-title { color: var(--accent); }
.post-item a:hover .post-title::after { opacity: 1; transform: translateX(4px); }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); color: var(--ink-3); }
.track-tag { display: inline-block; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-tint); border: var(--bw) solid rgba(var(--glow-rgb), 0.25); border-radius: 9999px; padding: 2px 9px; }
.post-title { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); transition: color var(--dur-1) ease; }
.post-title::after { content: " \2192"; display: inline-block; opacity: 0; color: var(--accent-bright); transition: opacity var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.post-summary { font-size: var(--fs-text); color: var(--ink-2); max-width: 65ch; line-height: 1.6; }
@media (min-width: 900px) {
  .post-item a { grid-template-columns: 180px 1fr; column-gap: var(--sp-7); align-items: start; }
  .post-meta { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 6px; grid-row: span 2; }
  .post-summary { grid-column: 2; }
}
.article { padding: 112px 0 var(--sp-9); }
.article-header { margin-bottom: var(--sp-8); }
.article-date { font-size: var(--fs-small); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.article-author a { color: var(--ink-2); }
.article-title { margin-top: var(--sp-4); font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; padding-bottom: 0.05em; }
.article-summary { margin-top: var(--sp-5); font-size: var(--fs-text); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.related { margin-top: var(--sp-9); padding-top: var(--sp-6); border-top: var(--bw) solid var(--hair); }
.related-heading { font-size: var(--fs-small); font-weight: 500; color: var(--accent-bright); }
.related ul { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.related li a { display: block; font-weight: 500; color: var(--ink); padding: var(--sp-4); border: var(--bw) solid var(--glass-line); border-radius: 12px; background: var(--glass); box-shadow: var(--glass-top); transition: border-color var(--dur-1) ease; }
.related li a:hover { text-decoration: none; border-color: var(--glass-line-hover); }
.related-date { display: block; font-size: var(--fs-small); color: var(--ink-3); font-weight: 400; margin-top: 4px; }
.article-foot { margin-top: var(--sp-7); font-size: var(--fs-text); }
.guides-group { margin-top: var(--sp-7); }
.guides-group-title { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.015em; padding-bottom: var(--sp-3); }
.bio { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.bio img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--glass-line), var(--elev-2); }
.bio-name { font-size: var(--fs-card); font-weight: 600; }
.bio-role { font-size: var(--fs-text); color: var(--ink-3); }
.bio-text { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--fs-text); line-height: 1.65; }
.bio-links { margin-top: var(--sp-3); font-size: var(--fs-small); }
@media (min-width: 640px) { .bio { grid-template-columns: 120px 1fr; align-items: start; } }

/* ── cookie line ──────────────────────────────────────────────────────── */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-5);
  padding: 12px var(--sp-4);
  background: rgba(255, 255, 255, 0.92); border-top: var(--bw) solid var(--hair);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: var(--fs-small); color: var(--ink-2);
}
/* Issue #2: OK sets the `hidden` attribute, and the rule above sets display,
   which beats the UA's [hidden] — so the line stayed on screen after the
   click (and the choice was recorded, so a reload hid it: the one order of
   events that reads as "the button does nothing"). Same trap as
   .signin-panel [hidden] below. */
.cookie[hidden] { display: none !important; }
.cookie-text { margin: 0; }
.cookie-ok { height: 30px; padding: 0 14px; border: var(--bw) solid var(--hair); border-radius: 9999px; background: var(--panel); color: var(--ink); cursor: pointer; font-size: var(--fs-small); font-weight: 500; }
.cookie-ok:hover { background: var(--tint); }

/* ── dev-only screen-number badge (src/site/chrome.mjs) ───────────────────────
   The marketing twin of the SPA's .screen-badge. Shown only on dev.sekura.ai
   and local dev (the snippet unhides it on-host; it ships `hidden`, so
   production shows nothing). pointer-events:none so it can never cover a
   control. Bottom-left; the support fab sits bottom-right, clear of it. */
.screen-badge {
  position: fixed; z-index: 45; bottom: 10px; left: 10px;
  pointer-events: none; user-select: none;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; color: var(--ink-3);
  background: var(--panel); border: var(--bw) solid var(--hair-2);
  border-radius: 9999px; padding: 4px 8px; opacity: .6;
}
.screen-badge[hidden] { display: none !important; }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer { position: relative; padding: var(--sp-8) 0 var(--sp-8); font-size: var(--fs-small); background: linear-gradient(180deg, var(--ground), var(--tint)); }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule); }
.footer-inner { max-width: var(--w-site); margin: 0 auto; padding: 0 var(--sp-5); }
/* Footer brand lockup: the same owl-left-of-wordmark mark, ink on the footer's
   light ground, so the footer carries the logo the way the nav does. */
.footer-logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sp-6); }
.footer-logo .nav-mark { height: 26px; width: auto; display: block; }
.footer-logo .nav-word { font-weight: 700; font-size: var(--fs-card); letter-spacing: .01em; color: var(--ink); }
.footer-cols { display: grid; gap: var(--sp-6); }
.footer-col-title { font-size: var(--fs-small); font-weight: 500; color: var(--ink); margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--ink-2); transition: color var(--dur-1) ease; }
.footer-col a:hover { color: var(--ink); text-decoration: none; }
.footer-meta { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: var(--bw) solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-4); color: var(--ink-3); font-size: var(--fs-small); }
.footer-copy { margin: 0; }
.footer-dot { margin: 0 6px; }
.footer-social { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-4); }
.footer-social a { color: var(--ink-3); display: inline-flex; transition: color var(--dur-1) ease; }
.footer-social a:hover { color: var(--ink); }
/* NVIDIA Inception badge: NVIDIA's artwork, unaltered and kept smaller than
   the Sekura lockup above it (their rule). Clear space comes from the gap. */
.footer-inception { display: inline-flex; margin-left: auto; padding: 4px; }
.footer-inception img { height: 36px; width: auto; display: block; }
.footer-legal { margin: var(--sp-4) 0 0; color: var(--ink-3); font-size: var(--fs-small); line-height: 1.5; max-width: 72ch; }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .footer-cols { grid-template-columns: repeat(3, 200px); } }

/* ── reveal choreography ──────────────────────────────────────────────────
   html.motion is set only by MOTION_BOOT (src/site/motion.mjs), and only
   when IntersectionObserver exists and reduced motion is off. Hidden states
   therefore never exist for no-JS readers or crawlers, and MOTION_SCRIPT
   carries a 2.5s failsafe so nothing can stay hidden. Opacity, transform and
   filter only — never display — so layout never shifts. */
/* a .reveal-group carries data-reveal only so the observer sees it; the
   group itself stays opaque and its CHILDREN stagger, so the two fades
   never compound */
html.motion [data-reveal]:not(.reveal-group) {
  opacity: 0; transform: translateY(20px); filter: blur(6px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 800ms var(--ease-out);
}
html.motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
html.motion .reveal-group > * {
  opacity: 0; transform: translateY(16px); filter: blur(4px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out),
    border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
html.motion .reveal-group.is-in > * { opacity: 1; transform: none; filter: none; }
html.motion .reveal-group.is-in > :nth-child(2) { transition-delay: 80ms; }
html.motion .reveal-group.is-in > :nth-child(3) { transition-delay: 160ms; }
html.motion .reveal-group.is-in > :nth-child(4) { transition-delay: 240ms; }
html.motion .reveal-group.is-in > :nth-child(5) { transition-delay: 320ms; }
html.motion .reveal-group.is-in > :nth-child(6) { transition-delay: 400ms; }
html.motion .reveal-group.is-in > :nth-child(n+7) { transition-delay: 480ms; }
/* Once a card has arrived its hover must answer at once; the stagger delay
   above would otherwise hold the hover lift back by up to half a second. */
html.motion .reveal-group.is-in > :hover { transition-delay: 0ms; }

/* hero copy rises on load — above the fold, no observer needed */
html.motion .hero-inner > * { animation: rise-in 900ms var(--ease-out) both; }
html.motion .hero-inner > :nth-child(2) { animation-delay: 80ms; }
html.motion .hero-inner > :nth-child(3) { animation-delay: 160ms; }
html.motion .hero-inner > :nth-child(4) { animation-delay: 240ms; }
html.motion .hero-inner > :nth-child(5) { animation-delay: 320ms; }
html.motion .hero-inner > :nth-child(n+6) { animation-delay: 400ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ── motion: keep it quiet ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── published legal instruments (shared with the app's /app/terms) ──── */
.legal-page { padding-top: 0; }
.legal-doc { font-size: var(--fs-text); line-height: 1.7; color: var(--ink-body); }
.legal-title { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: var(--sp-5); padding-bottom: 0.05em; }
.legal-h2 { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.015em; margin: var(--sp-7) 0 var(--sp-3); color: var(--ink); }
.legal-p { margin-bottom: var(--sp-3); }
.legal-list { margin: 0 0 var(--sp-3) var(--sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.legal-section { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
.legal-version { margin-top: var(--sp-6); }
.legal-callout { margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: var(--r-1); }
.legal-toc { margin: var(--sp-5) 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-3); }
.legal-toc-t { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-2); }
.legal-toc ol { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-small); }
.legal-doc .link { color: var(--accent); }

/* ── grid children must be allowed to shrink ─────────────────────────────
   A grid or flex item defaults to min-width:auto, so a long unbreakable
   token (an agent id, a hover note, a URL) widens the whole page on a
   phone. Let the containers shrink and let those strings wrap anywhere. */
.grid-2 > *, .grid-3 > *, .phase > *, .phase-detail > *, .agent > *, .doc-sec > *, .timeline li > *, .bio > * { min-width: 0; }
.agent-id, .agent-hover, .agent-role, .timeline-text, .hops code, .finding-meta, .artifact-body dd { overflow-wrap: anywhere; }
.agents, .pipeline, .tiles, .chain, .doc, .stats, .metrics, .partners, .plans, .ladder { min-width: 0; max-width: 100%; }

/* ── the sign-in dialog (src/site/signin-modal.mjs) ─────────────────────── */
/* Pill buttons and a 24px radius are deliberate departures from the site's
   tokens: this is the front door, and the softer shape reads as a welcome
   rather than a form. The same panel is used by the app's consent fallback. */
.signin-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: var(--sp-4); border: 0; background: transparent; display: none;
  place-items: center; z-index: 60;
}
.signin-modal[open] { display: grid; }
/* The class rules below set display, which beats the UA's [hidden] rule; the
   account row and divider are toggled with the attribute, so it has to win. */
.signin-panel [hidden] { display: none !important; }
.signin-modal::backdrop { background: rgba(29, 29, 31, .42); backdrop-filter: blur(2px); }
.signin-panel {
  position: relative; width: min(420px, 100%);
  background: var(--panel); border: var(--bw) solid var(--hair-2); border-radius: 24px;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -20px rgba(29,29,31,.35);
  text-align: center;
}
.signin-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3); width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 0; color: var(--ink-3); font-size: var(--fs-small); line-height: 1; cursor: pointer;
}
.signin-close:hover { background: var(--tint); color: var(--ink); }
.signin-brand { display: inline-block; margin-bottom: var(--sp-5); }
.signin-logo { height: 30px; display: block; }
.signin-title { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--sp-2); color: var(--ink); }
.signin-sub { margin: 0 0 var(--sp-5); color: var(--ink-2); font-size: var(--fs-text); line-height: 1.45; }
.signin-error { text-align: left; margin: 0 0 var(--sp-4); color: #b3261e; font-size: var(--fs-small); }
.signin-note { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: var(--sp-4); padding: 12px 14px; border-radius: 12px; background: var(--tint); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.signin-note strong { color: var(--ink); font-weight: 600; }
.signin-account { display: flex; align-items: stretch; gap: var(--sp-2); }
.signin-account-main {
  flex: 1; display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  padding: var(--sp-3) var(--sp-4); background: var(--panel); color: var(--ink);
  border: var(--bw) solid var(--hair); border-radius: 16px; cursor: pointer; font: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.signin-account-main:hover:not(:disabled) { background: var(--tint); border-color: var(--ink-3); }
.signin-account-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signin-account-main:disabled { opacity: .6; cursor: default; }
.signin-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: var(--accent-tint); }
.signin-avatar--initials { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 600; font-size: var(--fs-small); letter-spacing: .02em; }
.signin-account-text { display: flex; flex-direction: column; min-width: 0; }
.signin-account-name { font-weight: 600; font-size: var(--fs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signin-account-email { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signin-account-forget { flex: none; width: 40px; height: 40px; align-self: center; border-radius: 50%; background: none; border: 0; color: var(--ink-3); font-size: var(--fs-small); line-height: 1; cursor: pointer; }
.signin-account-forget:hover { background: var(--tint); color: var(--ink); }
.signin-divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-3); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; margin: var(--sp-4) 0; }
.signin-divider::before, .signin-divider::after { content: ''; flex: 1; height: var(--bw); background: var(--hair-2); }
.signin-btn {
  width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border-radius: 999px; font: inherit; font-size: var(--fs-text); font-weight: 500; cursor: pointer;
  border: var(--bw) solid transparent; transition: background .12s ease, border-color .12s ease;
}
.signin-btn:disabled { opacity: .6; cursor: default; }
.signin-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signin-btn--primary { background: var(--accent); color: var(--accent-ink); }
.signin-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.signin-btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--hair); }
.signin-btn--ghost:hover:not(:disabled) { background: var(--tint); border-color: var(--ink-3); }
.signin-mark { flex: none; }
.signin-opt { display: flex; align-items: flex-start; gap: var(--sp-2); text-align: left; margin: var(--sp-4) 0 0; font-size: var(--fs-small); color: var(--ink-2); cursor: pointer; }
.signin-opt input { margin: 3px 0 0; accent-color: var(--accent); }
.signin-legal { margin: var(--sp-4) 0 0; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.5; }
.signin-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.signin-legal a:hover { color: var(--ink); }
/* UL-1: the three tabs. A segmented control rather than underlined tabs: the
   panel is a pill-shaped front door and underlines read as a settings page. */
.signin-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 0 var(--sp-5); background: var(--tint); border-radius: 999px; }
.signin-tab { height: 36px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: var(--fs-small); font-weight: 500; cursor: pointer; }
.signin-tab:hover { color: var(--ink); }
.signin-tab[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.signin-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signin-form { text-align: left; }
.signin-label { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); margin: 0 0 6px; }
.signin-input { width: 100%; height: 44px; padding: 0 14px; margin: 0 0 var(--sp-3); border: var(--bw) solid var(--hair); border-radius: 12px; font: inherit; color: var(--ink); background: var(--panel); }
.signin-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.signin-input--code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.signin-btn--gap { margin-top: var(--sp-2); }
.signin-ok { text-align: left; margin: 0 0 var(--sp-4); color: #1b7f3b; font-size: var(--fs-small); }
.signin-off a, .signin-legal a { color: var(--ink-2); }
/* The framed portal page reports its height; until it does, room for the
   password step so the dialog does not jump on the first message. */
.signin-frame { display: block; width: 100%; height: 330px; border: 0; background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   The reorganised marketing site (Sudhir, 4 and 7 October 2026).
   Spec: docs/mockups/brand/reorg-*.html + reorg-chrome.css. Every rule here is
   scoped under body.reorg so it wins over the base .hero/.display rules above
   and never reaches the blog, guides, legal or /app surfaces. The nav, footer,
   cookie line and sign-in dialog still come from src/site/chrome.mjs; the chrome
   nav is overlaid on the royal hero (transparent, white) exactly as the old
   p-home rule did, but for every marketing page now.

   Two block types and nothing else below the hero: .lite (white #f8fafc) and
   .tint (faint blue --ground), both ink text with royal links. The royal
   gradient lives only in the hero and the one dark scan terminal.
   ═══════════════════════════════════════════════════════════════════════════ */
body.reorg {
  /* The six-size scale, one modest step down (~12%, Sudhir 5 October 2026) so
     Home fits a laptop — scoped to the marketing pages, not the whole token
     file, so blog/legal/app keep the documented scale. */
  --fs-hero: 48px; --fs-hero-sub: 30px; --fs-title: 33px;
  --fs-card: 16px; --fs-text: 15px; --fs-small: 13px;
  --r-1: 7px; --r-2: 11px; --r-3: 16px;
  --navy: #0e2a6b; --cyan: #35c0f0; --signal: #7CFF4F; --maroon: #7a1f2b;
  --grad: linear-gradient(118deg, #0e2a6b 0%, #1a5fd6 55%, #35c0f0 100%);
  /* The reorg mocks (the approved spec) render in the system stack and never
     load a webfont; the live site set Inter Tight first, whose smaller apparent
     size read "a step smaller than the mock" (Sudhir). Match the mock's stack
     verbatim here — scoped to the marketing pages, so blog/learn/legal/app keep
     brand Inter Tight. Every --fs token and all spacing already matched the mock
     to the pixel; the font was the only visible difference. */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Inter Tight', sans-serif;
  scroll-behavior: smooth;
}

/* ── chrome nav, overlaid white on the hero ─────────────────────────────── */
body.reorg .nav {
  position: absolute; left: 0; right: 0; top: 0;
  background: transparent; border: none; box-shadow: none;
}
body.reorg .nav .nav-word,
body.reorg .nav-links a,
body.reorg .nav-links a:hover,
body.reorg .nav-links a[aria-current="page"],
body.reorg .nav-signin,
body.reorg .nav-signin:hover { color: #fff; }
body.reorg .nav-links a { color: rgba(255,255,255,.86); }
body.reorg .nav-links a:hover,
body.reorg .nav-links a[aria-current="page"] { color: #fff; }
body.reorg .nav-burger i { background: #fff; }
/* Header row one step up the six-size scale (Sudhir, 9 October 2026): the main
   bar links, Sign in and the Scan free pill read at --fs-text, not --fs-small.
   Scoped to the desktop bar and the nav actions so the burger dropdown keeps
   its own size; mirrored in docs/mockups/brand/reorg-chrome.css. */
body.reorg .nav-links-desktop a,
body.reorg .nav-actions .nav-signin,
body.reorg .nav-cta { font-size: var(--fs-text); }
body.reorg .nav-links-mobile a,
body.reorg .nav-links-mobile .nav-signin { color: var(--ink-2); }
body.reorg .nav-links-mobile a[aria-current="page"] { color: var(--ink); }
body.reorg .nav-cta.btn-primary {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff;
}
body.reorg .nav-cta.btn-primary:hover {
  background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5);
}

/* ── block system ───────────────────────────────────────────────────────── */
body.reorg .block { position: relative; overflow: hidden; }
body.reorg .block-in { max-width: 1160px; margin: 0 auto; padding: 72px 40px; position: relative; z-index: 2; }
body.reorg .block.royal { background: var(--grad); color: #fff; }
body.reorg .block.tint { background: var(--ground); color: var(--ink); }
body.reorg .block.lite { background: #f8fafc; color: var(--ink); }
body.reorg .block[id] { scroll-margin-top: 24px; }
body.reorg .kick {
  text-transform: uppercase; letter-spacing: .16em; font-size: var(--fs-small);
  font-weight: 600; margin: 0 0 16px; color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
}
body.reorg .kick .hx { width: 15px; height: 15px; flex: 0 0 auto; }
body.reorg h2.bh { font-size: var(--fs-title); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 0 0 14px; color: var(--ink); }
body.reorg .blede { font-size: var(--fs-text); line-height: 1.6; margin: 0; max-width: 64ch; color: var(--ink-2); }
body.reorg .center { text-align: center; }
body.reorg .center .blede { margin-left: auto; margin-right: auto; }
body.reorg .block h3 { font-size: var(--fs-card); }
body.reorg .more { display: inline-flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
body.reorg .sub-h { font-size: var(--fs-card); font-weight: 700; margin: 0 0 6px; color: var(--ink); }

/* ── hero (royal, owl on every page) ────────────────────────────────────── */
body.reorg .hero { padding-top: calc(var(--nav-h) + 8px); background: var(--grad); color: #fff; isolation: isolate; }
body.reorg .hero::before { content: none; } /* defer to .vign, not the base .hero highlight */
body.reorg .hero .facets, body.reorg .hero .constell { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .5; }
body.reorg .hero .vign { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 90% at 78% 15%, rgba(255,255,255,.10), transparent 55%), linear-gradient(180deg, rgba(3,10,30,.10), rgba(3,10,30,.30)); }
/* Home subnav band on the hero */
body.reorg .subbar { position: relative; z-index: 3; max-width: 1200px; margin: 12px auto 0; padding: 0 40px; }
body.reorg .subbar-rail { display: flex; align-items: center; gap: 4px; background: rgba(14,30,74,.28); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; backdrop-filter: blur(2px); }
body.reorg .subbar-rail::-webkit-scrollbar { height: 6px; }
body.reorg .subbar-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }
body.reorg .subbar a { flex: 0 0 auto; white-space: nowrap; color: rgba(255,255,255,.86); font-size: var(--fs-small); font-weight: 500; padding: 8px 14px; border-radius: 999px; }
body.reorg .subbar a:hover { color: #fff; background: rgba(255,255,255,.10); text-decoration: none; }
body.reorg .subbar a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.18); }
/* hero copy */
/* align-items:start, not center (Sudhir, 9 October 2026): the copy column is
   shorter than the owl column, so centring it dropped the kicker ~48px below the
   subnav — a gap that read as dead space. Top-aligning it lets the headline sit
   with the top of the owl and pulls the whole copy block up under the subnav;
   the reduced top padding tightens what remains. Mirrored in reorg-chrome.css. */
body.reorg .hgrid { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start; padding: 18px 40px 48px; min-height: 320px; }
body.reorg .hcopy { max-width: 620px; }
body.reorg .hero .display { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.025em; font-weight: 700; margin: 0 0 12px; color: #fff; text-shadow: 0 2px 30px rgba(4,12,40,.25); max-width: none; }
body.reorg .hero-sub { font-size: var(--fs-hero-sub); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--signal); text-shadow: 0 0 22px rgba(124,255,79,.3); margin: 8px 0 18px; }
/* Legal pages (Terms, Privacy, DPA, Cookies, Subprocessors): the hero subline is
   the 'Last updated' date, not a tagline, so it reads white rather than signal
   green. The published instrument below is rendered byte for byte. */
body.legal .hero-sub { color: rgba(255,255,255,.82); font-weight: 600; font-size: var(--fs-title); text-shadow: none; }
body.legal .legal-page { margin: 0 auto; }
body.reorg .hlede { font-size: var(--fs-text); line-height: 1.6; color: rgba(255,255,255,.9); max-width: 46ch; margin: 0 0 18px; }
/* .hero .wedges, not just .wedges: the base .hero:not(.hero--split) .wedges rule
   outranks a bare body.reorg .wedges and was zeroing the margin-bottom, so the
   ticks sat flush on the CTA. This wins it back. The 20px below here and the
   20px on .hnote give an even gap above and below the button (Sudhir,
   9 October 2026); mirrored in reorg-chrome.css. */
/* justify-content: the base rule centres the wedges, which left them floating to
   the right of a left-aligned hero (Sudhir, 10 October 2026: "aligned to left with
   the rest of the text"). */
body.reorg .hero .wedges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: var(--sp-6) 0 20px; }
/* Its own rule, at .hero:not(.hero--split) .wedges's specificity plus the body
   class, because that :not() rule is what centres them. */
body.reorg .hero:not(.hero--split) .wedges, body.reorg .hero--split .wedges { justify-content: flex-start; }
body.reorg .wedges li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: var(--fs-small); }
body.reorg .wedges svg { color: var(--cyan); flex: 0 0 auto; }
body.reorg .hactions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.reorg .pill-cta { display: inline-block; background: #fff; color: var(--navy); font-weight: 600; font-size: var(--fs-text); padding: 14px 26px; border-radius: 999px; box-shadow: 0 12px 30px rgba(3,10,40,.28); }
body.reorg .pill-cta:hover { text-decoration: none; background: #eaf1fe; }
/* A second pill of equal weight in the brand cyan (the partners page's "Already a partner? Sign in", Sudhir, 22 October 2026). */
body.reorg .pill-cta--alt { background: var(--cyan); color: var(--navy); }
body.reorg .pill-cta--alt:hover { background: #5fd0f5; }
body.reorg .hactions--stack { display: inline-flex; flex-direction: column; align-items: stretch; gap: 14px; }
body.reorg .hactions--stack .pill-cta { text-align: center; }
body.reorg .pill-nav { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; font-weight: 600; font-size: var(--fs-small); padding: 9px 20px; border-radius: 999px; }
body.reorg .pill-nav:hover { text-decoration: none; background: rgba(255,255,255,.24); }
body.reorg .hsecondary { display: inline-block; color: #dce7ff; font-size: var(--fs-small); font-weight: 500; }
body.reorg .hnote { font-size: var(--fs-small); color: rgba(255,255,255,.72); margin: 20px 0 0; }
/* owl + glow (right column) */
body.reorg .hart { position: relative; display: flex; align-items: center; justify-content: center; }
body.reorg .hart.has-stats { flex-direction: column; }
body.reorg .hart .owl { position: relative; z-index: 2; width: min(100%, 360px); height: auto; aspect-ratio: 1/1; object-fit: contain; filter: drop-shadow(0 26px 44px rgba(3,10,40,.42)); }
body.reorg .hart .glow { position: absolute; z-index: 1; bottom: 8%; left: 50%; transform: translateX(-50%); width: 66%; height: 52px; border-radius: 50%; background: radial-gradient(closest-side, var(--cyan), transparent 72%); opacity: .55; filter: blur(8px); }
/* Home live counts under the owl: three boxes side by side, number on top and a
   small label under it (Sudhir, 11 October 2026; replaced two full-width pills).
   The block keeps the pills' height (about 113px), so the hero does not grow;
   it is 420px wide so a four-digit count has room. The numbers share one row
   across the three boxes (a grid row of their own), and each label is centred in
   the space under its number, so a one-line label does not leave a strip at the
   bottom and a two-line one does not push its number up (Sudhir, 11 October 2026). */
body.reorg .herostats { display: flex; flex-direction: row; align-items: stretch; align-self: center; gap: 10px; width: min(100%, 420px); margin-top: 24px; }
body.reorg .hstat { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center; text-align: center; row-gap: 4px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(3px); color: #fff; border-radius: 18px; padding: 9px 10px; }
/* Numbers sized down a notch (Sudhir, 18 October 2026) so a compacted count —
   up to "99,999" before the k/M threshold, and "999k" / "9.9M" above it — fits
   on one line in the same box at desktop and phone widths. */
body.reorg .hstat .n { font-size: clamp(21px, 2vw, 26px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--signal); text-shadow: 0 0 22px rgba(124,255,79,.3); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.reorg .hstat .l { font-size: 12.5px; line-height: 1.3; font-weight: 400; color: rgba(255,255,255,.88); white-space: normal; }
body.reorg .herocap { align-self: center; text-align: center; font-size: var(--fs-small); color: rgba(255,255,255,.62); margin: 12px 0 0; width: min(100%, 420px); }
body.reorg .herocap code { font-family: var(--mono); }

/* ── cards ───────────────────────────────────────────────────────────────── */
body.reorg .cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; text-align: left; }
body.reorg .cards2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 36px; text-align: left; }
body.reorg .mcard { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 24px 20px; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
body.reorg .mcard .num { color: var(--accent); font-weight: 700; font-size: var(--fs-small); letter-spacing: .14em; }
body.reorg .mcard h3 { margin: 8px 0 6px; color: var(--ink); }
body.reorg .mcard p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; line-height: 1.55; }
/* The core-differentiator card (Proof, Step 2 VerdictGate) stands out: a royal
   fill with white text, the step kicker in signal green and a small tag; the
   grid (align-items:stretch) keeps it the same height as the white cards. */
body.reorg .mcard.core { background: var(--accent); border-color: var(--accent); box-shadow: 0 14px 34px rgba(26,95,214,.28); }
body.reorg .mcard.core .num { color: var(--signal); }
body.reorg .mcard.core h3 { color: #fff; }
body.reorg .mcard.core p { color: rgba(255,255,255,.9); }
body.reorg .mcard.core .core-tag { display: inline-block; margin-top: 14px; font-size: var(--fs-small); font-weight: 600; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px 11px; }
/* The industry-term tag beside a plain test name ("· SAST"). A span in the
   body font, small and muted — NOT the .term class, which is the dark mono scan
   terminal (line ~928): reusing it dropped a black rounded code box over the
   bullets on /pricing/. nowrap keeps "· SAST" attached to its name. */
body.reorg .ttag { font-family: var(--sans); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
body.reorg .phases { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 40px; text-align: left; }
body.reorg .phases.p3 { grid-template-columns: repeat(3,1fr); }
body.reorg .pcard { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 22px 20px; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
body.reorg .pcard .n { font-size: var(--fs-small); font-weight: 700; color: var(--accent); letter-spacing: .06em; }
body.reorg .pcard h3 { margin: 8px 0 6px; color: var(--ink); }
body.reorg .pcard p { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-3); margin: 0; }
body.reorg .pcard .ct { display: inline-block; margin-top: 12px; font-size: var(--fs-small); font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 4px 10px; }
body.reorg .pcard.chain-card { background: var(--accent); border-color: var(--accent); }
body.reorg .pcard.chain-card .n, body.reorg .pcard.chain-card h3 { color: #fff; }
body.reorg .pcard.chain-card p { color: rgba(255,255,255,.9); }

/* ── pricing ladders ────────────────────────────────────────────────────── */
body.reorg .ladder { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 40px; text-align: left; }
body.reorg .ladder.l3 { grid-template-columns: repeat(3,1fr); }
body.reorg .ladder.l2 { grid-template-columns: repeat(2,1fr); max-width: 720px; }
body.reorg .ladder.l5 { grid-template-columns: repeat(5,1fr); gap: 12px; }
body.reorg .lcard { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 26px 22px; position: relative; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
body.reorg .lcard.feat { border-color: var(--accent); box-shadow: 0 12px 32px rgba(26,95,214,.16); }
body.reorg .lmark { position: absolute; top: -11px; left: 22px; background: var(--accent); color: #fff; font-size: var(--fs-small); font-weight: 600; padding: 3px 10px; border-radius: 999px; }
body.reorg .lname { font-size: var(--fs-card); font-weight: 700; margin: 0 0 2px; color: var(--ink); }
body.reorg .lline { font-size: var(--fs-small); color: var(--ink-3); margin: 0 0 12px; }
body.reorg .lprice { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
body.reorg .lprice .per { font-size: var(--fs-small); font-weight: 500; color: var(--ink-3); }
body.reorg .lwho { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); margin: 12px 0 16px; flex: 1; }
body.reorg .lfeat { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
body.reorg .lfeat li { font-size: var(--fs-small); color: var(--ink-2); padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--hair-2); }
body.reorg .lfeat li:first-child { border-top: 0; }
body.reorg .lfeat li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
body.reorg .lcta { color: var(--accent); font-weight: 600; font-size: var(--fs-text); }
body.reorg .lbtn { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: var(--fs-text); padding: 11px 20px; border-radius: var(--r-2); }
body.reorg .lbtn:hover { text-decoration: none; background: var(--accent-hover); }
/* pricing subtabs + notes */
body.reorg .ptabs-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
body.reorg .ptabs { display: inline-flex; gap: 4px; background: var(--tint); border: 1px solid var(--hair); border-radius: 999px; padding: 5px; }
body.reorg .ptabs a { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); padding: 9px 20px; border-radius: 999px; }
body.reorg .ptabs a:hover { text-decoration: none; color: var(--ink); }
body.reorg .ptabs a[aria-current="page"] { background: var(--accent); color: #fff; }
body.reorg .tiernote { background: var(--panel); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 0 var(--r-2) var(--r-2) 0; padding: 16px 18px; margin: 24px auto 0; max-width: 820px; text-align: left; font-size: var(--fs-small); color: var(--ink-2); }
body.reorg .tiernote b { color: var(--ink); }
body.reorg .tiernote ul { margin: 8px 0 0; padding-left: 18px; }
body.reorg .tiernote li { margin: 4px 0; }
body.reorg .tiernote p { margin: 0; }
body.reorg .tiernote p + p { margin-top: 10px; }

/* ── pricing redesign (Sudhir's deck, 10 October 2026) ──────────────────── */
/* Hero: the two frosted overview cards replace the owl in the right column. */
body.reorg .hart.hart-art { align-items: stretch; }
body.reorg .hero-ovw { display: flex; flex-direction: column; gap: 16px; width: 100%; align-self: center; }
body.reorg .ovw-card { display: block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(3px); border-radius: var(--r-3); padding: 24px; text-decoration: none; color: #fff; box-shadow: 0 14px 36px rgba(3,10,40,.20); transition: background .16s, transform .16s; }
body.reorg .ovw-card:hover { text-decoration: none; background: rgba(255,255,255,.18); transform: translateY(-2px); }
body.reorg .ovw-kick { color: var(--cyan); font-weight: 700; font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; }
body.reorg .ovw-h { margin: 8px 0 6px; font-size: var(--fs-card); color: #fff; }
body.reorg .ovw-p { font-size: var(--fs-small); color: rgba(255,255,255,.85); margin: 0 0 16px; line-height: 1.55; }
body.reorg .ovw-btn { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: var(--fs-text); padding: 11px 20px; border-radius: var(--r-2); }
body.reorg .ovw-card:hover .ovw-btn { background: var(--accent-hover); }
/* The "Remediation guidance in every scan." line on its gradient band. */
/* The hero notice (Connect, 21 October 2026): a page that is live but not yet
   open says so before its headline. Warm against the royal gradient on purpose:
   a blue strip reads as part of the hero and is skimmed past, and a reader who
   skims past it runs a command the page told them not to run yet. */
body.reorg .hero-notice { position: relative; z-index: 1; margin: 0 0 22px; padding: 12px 24px; text-align: center; background: linear-gradient(90deg, #f7c04a, #f0962e); color: #1b1407; font-size: var(--fs-text); font-weight: 600; line-height: 1.5; box-shadow: 0 1px 0 rgba(0,0,0,.18); }
body.reorg .hero-notice strong { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin-right: 10px; }
body.reorg .hero-band { display: inline-block; margin: 16px 0 0; padding: 9px 18px; border-radius: 999px; background: linear-gradient(90deg, rgba(53,192,240,.30), rgba(26,95,214,.26)); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(2px); color: #fff; font-weight: 600; font-size: var(--fs-text); }
/* Developer plans: two boxed groups, every card one height. align-items:stretch
   + each group a flex column with the box flex:1 makes both boxes share a height;
   grid-auto-rows:1fr stretches every card to the tallest, button pinned bottom. */
body.reorg .dev-groups { display: grid; grid-template-columns: 2fr 3fr; gap: 18px; align-items: stretch; margin-top: 40px; text-align: left; }
body.reorg .dev-grp { display: flex; flex-direction: column; }
body.reorg .grp-label { font-size: var(--fs-small); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; text-align: center; }
body.reorg .grp-cards { display: grid; gap: 14px; border: 1px solid transparent; border-radius: var(--r-3); padding: 22px 12px 14px; flex: 1; grid-auto-rows: 1fr; }
body.reorg .grp-cards.grp2 { grid-template-columns: repeat(2,1fr); }
body.reorg .grp-cards.grp3 { grid-template-columns: repeat(3,1fr); }
body.reorg .grp-cards.outlined { border-color: rgba(26,95,214,.32); background: rgba(26,95,214,.035); }
/* The two developer groups read as two families at a glance: On Demand in the
   cyan of the brand's second colour, Continuous in the royal blue, each label in
   the darker shade of its own box (Sudhir, 10 October 2026). */
body.reorg .grp-ondemand .grp-cards.outlined { border-color: rgba(11,122,166,.38); background: rgba(53,192,240,.07); }
body.reorg .grp-ondemand .grp-label { color: #0b6f93; }
body.reorg .grp-continuous .grp-cards.outlined { border-color: rgba(26,95,214,.38); background: rgba(26,95,214,.05); }
body.reorg .grp-continuous .grp-label { color: #1748a8; }
/* A feature row the plan to its left does not have: underlined, so the step
   up between neighbours is visible without reading every row. */
body.reorg .dev-groups .lcard .lfeat li.diff { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); font-weight: 600; color: var(--ink); }
/* a little more inner width and no wrapping, so the plan name and
   'Lab copy · lab DAST' stay on one line and the feature rows line up. */
body.reorg .dev-groups .lcard { padding: 22px 16px; }
body.reorg .dev-groups .lcard .lname, body.reorg .dev-groups .lcard .lfeat li { white-space: nowrap; }

/* ── integrations: chips, code, timeline ────────────────────────────────── */
body.reorg .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 32px; text-align: left; }
body.reorg .chip-group { margin: 0 0 16px; }
body.reorg .chip-group-title { font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .08em; }
body.reorg .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
body.reorg .chip { font-size: var(--fs-small); color: var(--ink-2); background: var(--panel); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 14px; }
body.reorg .code { font-family: var(--mono); font-size: var(--fs-small); background: var(--term-bg); color: var(--term-fg); border-radius: var(--r-2); padding: 16px 18px; overflow: auto; white-space: pre; line-height: 1.5; margin: 14px 0; }
body.reorg .cmd { font-family: var(--mono); font-size: var(--fs-small); background: var(--term-bg); color: var(--signal); border-radius: var(--r-2); padding: 13px 16px; overflow: auto; margin: 12px 0; }
body.reorg .timeline { list-style: none; padding: 0; margin: 14px 0; }
/* display:block, not the base rule's 56px/1fr grid: the badge is absolutely placed, so the
   step text became the grid's first item and wrapped one word per line in 56px (Sudhir,
   10 October 2026, the Connect your agent steps at phone width). */
body.reorg .timeline li { display: block; position: relative; padding: 0 0 16px 40px; font-size: var(--fs-small); color: var(--ink-2); }
body.reorg .timeline li .t { position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: var(--fs-small); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
body.reorg .faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
body.reorg .faq-jump a { font-size: var(--fs-small); color: var(--accent); background: var(--panel); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 14px; }
body.reorg .faq-jump a:hover { text-decoration: none; border-color: var(--accent); }
body.reorg .faq-sec { scroll-margin-top: 90px; margin: 36px 0 12px; }
body.reorg .faq-sec h3 { font-size: var(--fs-card); font-weight: 700; color: var(--ink); margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--accent); display: inline-block; }
body.reorg .faq { max-width: 820px; }
body.reorg .faq details { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-2); padding: 0; margin: 0 0 12px; overflow: hidden; }
body.reorg .faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-size: var(--fs-card); font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
body.reorg .faq summary::-webkit-details-marker { display: none; }
body.reorg .faq summary::after { content: "+"; color: var(--accent); font-weight: 700; flex: 0 0 auto; }
body.reorg .faq details[open] summary::after { content: "\2013"; }
body.reorg .faq .fa { padding: 0 22px 20px; font-size: var(--fs-text); color: var(--ink-2); line-height: 1.6; }

/* ── forms (contact, POC) ───────────────────────────────────────────────── */
body.reorg .form { max-width: 680px; margin: 28px auto 0; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 30px 28px; box-shadow: 0 8px 24px rgba(15,23,42,.05); text-align: left; }
body.reorg .field { margin: 0 0 18px; }
body.reorg .field label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin: 0 0 7px; }
body.reorg .field input, body.reorg .field textarea, body.reorg .field select { width: 100%; font: inherit; font-size: var(--fs-text); color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: var(--r-2); padding: 12px 14px; }
body.reorg .field textarea { min-height: 130px; resize: vertical; }
body.reorg .field input:focus, body.reorg .field textarea:focus, body.reorg .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,95,214,.22); }
body.reorg .whorow { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
body.reorg .whorow label { display: flex; align-items: center; gap: 10px; white-space: nowrap; border: 1px solid var(--hair); border-radius: var(--r-2); padding: 14px 16px; font-weight: 500; cursor: pointer; background: var(--tint); margin: 0; }
body.reorg .whorow label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
body.reorg .whorow input { width: auto; padding: 0; border: 0; box-shadow: none; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
body.reorg .formfoot { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
/* The partner application (PartnersApply.tsx; Sudhir, 18 October 2026: "the
   form is too long to scroll"). Tighter than the contact form, short fields
   paired in rows, and a problem marked on its own field: the base rule hides
   .field-error until the field is .is-invalid, which the old script never set,
   so the server's field messages were in the page and invisible. */
body.reorg .form--compact { max-width: 760px; padding: 22px 24px; gap: 0; }
body.reorg .form--compact fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
body.reorg .form--compact legend { font-weight: 600; font-size: var(--fs-text); color: var(--ink); padding: 0; margin: 0 0 8px; }
body.reorg .form--compact .legend-note { font-weight: 400; font-size: var(--fs-small); color: var(--ink-3); }
body.reorg .form--compact .field { gap: 0; margin: 0 0 10px; }
body.reorg .form--compact .field label { margin: 0 0 4px; }
body.reorg .form--compact .field input, body.reorg .form--compact .field textarea { padding: 8px 12px; }
body.reorg .form--compact .field textarea { min-height: 60px; }
body.reorg .form--compact .field-hint { margin: 3px 0 0; }
body.reorg .form--compact .whorow { grid-template-columns: repeat(2, max-content); }
body.reorg .form--compact .whorow label { padding: 9px 14px; }
body.reorg .form--compact .frow { display: grid; gap: 0 14px; align-items: start; }
@media (max-width: 639px) {
  body.reorg .form--compact .frow--3 { grid-template-columns: 1fr 1fr; }
  body.reorg .form--compact .frow--3 > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  body.reorg .form--compact .frow { grid-template-columns: 1fr 1fr; }
  body.reorg .form--compact .frow--3 { grid-template-columns: 2fr 1.3fr 1fr; }
}
body.reorg .form--compact .field.is-invalid input:not([type=checkbox]):not([type=radio]),
body.reorg .form--compact .field.is-invalid textarea { border-color: var(--st-fail, #b00020); box-shadow: 0 0 0 3px rgba(176, 0, 32, .12); }
body.reorg .form--compact .field.is-invalid > label { color: var(--st-fail, #b00020); }
body.reorg .form--compact .field-error { margin: 4px 0 0; color: var(--st-fail, #b00020); }
body.reorg .form--compact .ts-host.is-invalid .cf-turnstile { outline: 2px solid var(--st-fail, #b00020); outline-offset: 4px; border-radius: 8px; }
body.reorg .form--compact .form-summary { border: 1px solid var(--st-fail, #b00020); background: #fff6f6; border-radius: var(--r-2); padding: 10px 14px; margin: 4px 0 12px; font-size: var(--fs-small); color: var(--ink); }
body.reorg .form--compact .form-summary p { margin: 0; font-weight: 600; }
body.reorg .form--compact .form-summary ul { margin: 6px 0 0; padding-left: 18px; }
body.reorg .form--compact .form-summary a { color: var(--st-fail, #b00020); text-decoration: underline; }
body.reorg .form--compact .form-summary.form-note { border-color: #1d9f5f; background: #f1f8f4; }
body.reorg .form--compact .form-summary.form-note p { font-weight: 500; }
body.reorg .joke { max-width: 680px; margin: 22px auto 0; text-align: center; font-size: var(--fs-text); color: var(--ink-3); font-style: italic; }
body.reorg .sent-note { margin: 16px 0 0; color: #1d9f5f; font-weight: 600; font-size: var(--fs-text); }

/* ── blog (index post cards + about blurb) ──────────────────────────────── */
body.reorg .post { display: block; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-3); padding: 22px 20px; box-shadow: 0 8px 24px rgba(15,23,42,.05); color: var(--ink); }
body.reorg .post:hover { text-decoration: none; border-color: var(--accent); }
body.reorg .post .d { font-size: var(--fs-small); color: var(--ink-3); }
body.reorg .post h3 { margin: 6px 0 6px; color: var(--ink); }
body.reorg .post p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; line-height: 1.55; }
/* ── blog index list layout (Sudhir, 9 October 2026) ────────────────────────
   Not a grid of boxes: a featured banner, track chips + search, then one post
   per row with a thumbnail, separated by hair rules. Brand colours throughout —
   the gradient, the accent blue, the six-size scale; nothing from the reference. */
body.reorg .blog-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; margin: 28px 0 0; background: var(--grad); border-radius: var(--r-3); overflow: hidden; box-shadow: 0 12px 30px rgba(3,10,40,.18); }
body.reorg .bf-main { padding: 34px 32px; align-self: center; }
body.reorg .bf-kick { text-transform: uppercase; letter-spacing: .16em; font-size: var(--fs-small); font-weight: 600; color: var(--cyan); margin: 0 0 12px; }
body.reorg .bf-title { font-size: var(--fs-title); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; margin: 0 0 16px; }
body.reorg .bf-title a { color: #fff; text-shadow: 0 2px 20px rgba(4,12,40,.25); }
body.reorg .bf-title a:hover { color: #fff; text-decoration: none; }
body.reorg .bf-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-small); color: rgba(255,255,255,.82); margin: 0; }
body.reorg .bf-track { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px 12px; font-weight: 600; color: #fff; }
body.reorg .bf-excerpt { background: #fff; margin: 16px; border-radius: var(--r-2); padding: 24px 24px; display: flex; flex-direction: column; justify-content: center; }
body.reorg .bf-excerpt p { font-size: var(--fs-text); line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }

body.reorg .blog-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 30px 0 4px; }
body.reorg .blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.reorg .blog-chip { font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); background: var(--panel); border: 1px solid var(--hair); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease; }
body.reorg .blog-chip:hover { border-color: var(--accent); color: var(--ink); }
body.reorg .blog-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
body.reorg .blog-search { margin-left: auto; min-width: 220px; font: inherit; font-size: var(--fs-text); color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 10px 18px; }
body.reorg .blog-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,95,214,.18); }

body.reorg .post-list { margin-top: 10px; }
body.reorg .post-row { display: grid; grid-template-columns: 30% 1fr; gap: 24px; align-items: center; padding: 24px 0; border-top: 1px solid var(--hair); }
body.reorg .post-row:first-child { border-top: 0; }
body.reorg .post-row-thumb { display: block; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 1200 / 630; background: var(--grad); }
body.reorg .post-row-thumb .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.reorg .thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--grad); }
body.reorg .thumb-ph img { width: 44px; height: 44px; opacity: .92; filter: drop-shadow(0 8px 16px rgba(3,10,40,.35)); }
body.reorg .post-row-body { min-width: 0; }
body.reorg .post-row-meta { font-size: var(--fs-small); color: var(--ink-3); margin: 0 0 6px; }
body.reorg .post-row-title { font-size: var(--fs-card); font-weight: 700; line-height: 1.28; margin: 0 0 8px; }
body.reorg .post-row-title a { color: var(--ink); }
body.reorg .post-row-title a:hover { color: var(--accent); text-decoration: none; }
body.reorg .post-row-excerpt { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.reorg .read-more { font-size: var(--fs-small); font-weight: 600; color: var(--accent); }
body.reorg .read-more:hover { text-decoration: none; }
body.reorg .post-empty { font-size: var(--fs-text); color: var(--ink-3); margin: 24px 0 0; }

@media (max-width: 720px) {
  body.reorg .blog-featured { grid-template-columns: 1fr; }
  body.reorg .bf-main { padding: 26px 22px 6px; }
  body.reorg .bf-excerpt { margin: 0 16px 16px; }
  body.reorg .blog-search { margin-left: 0; width: 100%; min-width: 0; }
  body.reorg .post-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Live incidents (pwn.watch, 23 October 2026) ─────────────────────────────
   /incidents/ and the home strip in "Why now". The rows are poured in by the
   Worker (src/incidents/render.ts) and reuse the blog's chips and the report's
   severity pills; nothing here takes a colour from outside the tokens. Patched
   reads in the accent and unpatched in the critical red: the signal green is
   the hero subline's alone. */
.sev-low { color: var(--sev-low); }
.sev-unknown { color: var(--ink-3); }
body.reorg .inc-chips { margin: 22px 0 8px; }
body.reorg .inc-count { font-weight: 500; opacity: 0.7; margin-left: 2px; }
body.reorg .page a.blog-chip { text-decoration: none; }
body.reorg .page a.blog-chip:not(.is-on) { color: var(--ink-2); }
body.reorg .page a.blog-chip:not(.is-on):hover { color: var(--ink); }
body.reorg .inc-list { margin-top: 8px; }
body.reorg .inc-row { padding: 26px 0; border-top: 1px solid var(--hair); scroll-margin-top: 96px; }
body.reorg .inc-row:first-child { border-top: 0; }
body.reorg .inc-row:target { background: var(--tint); box-shadow: 0 0 0 12px var(--tint); border-radius: 2px; }
body.reorg .inc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-small); color: var(--ink-3); margin: 0 0 10px; }
body.reorg .inc-tag { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); background: var(--tint); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 10px; text-transform: capitalize; }
body.reorg .inc-tag-done { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
body.reorg .inc-tag-open { color: var(--sev-crit); border-color: color-mix(in srgb, var(--sev-crit) 30%, transparent); }
body.reorg .inc-title { font-size: var(--fs-card); font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
body.reorg .page .inc-title a { color: var(--ink); }
body.reorg .page .inc-title a:hover { color: var(--accent); }
body.reorg .inc-summary { font-size: var(--fs-text); line-height: 1.65; color: var(--ink-body); margin: 0 0 12px; max-width: 72ch; }
body.reorg .inc-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 12px; font-size: var(--fs-small); }
body.reorg .inc-facts div { display: flex; gap: 8px; }
body.reorg .inc-facts dt { color: var(--ink-3); font-weight: 600; }
body.reorg .inc-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
body.reorg .inc-updates { margin: 0 0 10px; font-size: var(--fs-small); }
body.reorg .inc-updates summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
body.reorg .inc-updates summary:hover { color: var(--ink); }
body.reorg .inc-updates ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-body); line-height: 1.6; max-width: 80ch; }
body.reorg .inc-updates li + li { margin-top: 8px; }
body.reorg .inc-more { margin: 0; }
body.reorg .inc-empty { color: var(--ink-2); padding: 18px 0; }
body.reorg .inc-credit { font-size: var(--fs-small); color: var(--ink-3); margin: 22px 0 0; }
body.reorg .inc-strip { margin-top: 40px; padding: 24px 28px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-3); box-shadow: var(--glass-top); }
body.reorg .inc-strip-h { font-size: var(--fs-card); font-weight: 700; margin: 0 0 12px; }
body.reorg .inc-lines { list-style: none; margin: 0; padding: 0; }
body.reorg .inc-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair-2); font-size: var(--fs-small); }
body.reorg .inc-line:first-child { border-top: 0; }
body.reorg .inc-line .sev-pill { min-width: 84px; text-align: center; }
body.reorg .page .inc-line a { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.reorg .page .inc-line a:hover { color: var(--accent); }
body.reorg .inc-line time { color: var(--ink-3); white-space: nowrap; }
body.reorg .inc-strip-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 0 0; }
body.reorg .inc-strip-foot .inc-credit { margin: 0; }
@media (max-width: 720px) {
  body.reorg .inc-strip { padding: 20px 18px; }
  body.reorg .inc-line { grid-template-columns: auto 1fr; }
  body.reorg .inc-line time { display: none; }
  body.reorg .page .inc-line a { white-space: normal; }
}

body.reorg .about { max-width: 760px; }
/* The post reading column sits in a light block; the prose/article styles are
   global (defined above) and apply unchanged on the lighter .lite ground. */
body.reorg .block.lite .article, body.reorg .block.tint .article { margin: 0 auto; }
/* /connect/: the documentation sits in a block after the doors block, so the
   article's own top padding (sized for a post straight under its hero) would
   open a 180px gap between the two. */
body.reorg .article--in-block { padding-top: 0; }

/* ── partners "coming soon" ─────────────────────────────────────────────── */
body.reorg .soon { max-width: 720px; margin: 0 auto; text-align: center; }
/* Partners: NVIDIA Inception membership. The badge stays below the size of the
   Sekura lockup in the nav and hero (NVIDIA: never larger than the partner logo). */
body.reorg .inception { max-width: 640px; margin: 0 auto; text-align: center; }
body.reorg .inception-badge { height: 56px; width: auto; display: block; margin: 0 auto 20px; }
body.reorg .inception-legal { margin: 20px auto 0; color: var(--ink-3); font-size: var(--fs-small); line-height: 1.5; max-width: 60ch; }
body.reorg .soon .badge { display: inline-block; font-size: var(--fs-small); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 6px 16px; margin-bottom: 20px; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  body.reorg .hgrid { grid-template-columns: 1fr; padding: 30px 22px 44px; }
  body.reorg .hart { order: 2; }
  body.reorg .hart .owl { width: min(62%, 240px); }
  body.reorg .hero .display { font-size: 32px; }
  body.reorg .hero-sub { font-size: 21px; }
  body.reorg h2.bh { font-size: 26px; }
  body.reorg .block-in { padding: 48px 22px; }
  body.reorg .cards3, body.reorg .cards2, body.reorg .phases, body.reorg .phases.p3,
  body.reorg .ladder, body.reorg .ladder.l3, body.reorg .ladder.l2, body.reorg .ladder.l5,
  body.reorg .grid2, body.reorg .whorow { grid-template-columns: 1fr; }
  body.reorg .dev-groups { grid-template-columns: 1fr; }
  body.reorg .grp-cards.grp2, body.reorg .grp-cards.grp3 { grid-template-columns: 1fr; }
}

/* /blog/about/ as a long-form article (Sudhir, 10 October 2026), after
   primeintellect.ai/blog/prime-agent-rust: centred title, byline row, sticky
   contents rail, one reading column. */
body.reorg .about-head { max-width: 920px; margin: 0 auto 40px; text-align: center; }
body.reorg .about-title { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 18px; }
body.reorg .about-byline { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 10px 0; text-align: left; }
body.reorg .about-byline-right { display: inline-flex; gap: 12px; align-items: center; }
body.reorg .about-tag { background: rgba(26,95,214,.08); color: var(--accent); border-radius: 6px; padding: 2px 8px; }
body.reorg .about-grid { display: grid; grid-template-columns: 210px minmax(0, 680px); gap: 56px; justify-content: center; text-align: left; }
body.reorg .about-toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-small); }
body.reorg .about-toc-h { font-weight: 700; color: var(--ink); margin: 0 0 4px; }
body.reorg .about-toc a { color: var(--ink-3); text-decoration: none; line-height: 1.35; }
body.reorg .about-toc a.sub { padding-left: 14px; }
body.reorg .about-toc a[aria-current] { color: var(--accent); font-weight: 600; }
body.reorg .about-article { font-size: var(--fs-text); line-height: 1.75; color: var(--ink-body); }
body.reorg .about-article p { margin: 0 0 18px; }
body.reorg .about-article .about-lead { font-size: var(--fs-lede, 19px); color: var(--ink); }
body.reorg .about-article h2 { font-size: 26px; font-weight: 700; color: var(--ink); margin: 48px 0 14px; scroll-margin-top: 96px; }
body.reorg .about-article h3 { font-size: var(--fs-card, 18px); font-weight: 700; color: var(--ink); margin: 32px 0 12px; scroll-margin-top: 96px; }
body.reorg .about-article ul { padding-left: 20px; margin: 0 0 18px; }
body.reorg .about-article li { margin: 0 0 10px; }
body.reorg .about-article a { color: var(--accent); }
body.reorg .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0 28px; }
body.reorg .about-stats div { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-3); padding: 18px 20px; }
body.reorg .about-stats b { display: block; font-size: 34px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; line-height: 1.1; }
body.reorg .about-stats span { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.4; }
body.reorg .about-timeline { list-style: none; padding: 0; margin: 8px 0 28px; border-left: 2px solid rgba(26,95,214,.25); }
body.reorg .about-timeline li { position: relative; padding: 0 0 18px 22px; margin: 0; }
body.reorg .about-timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff; }
body.reorg .about-timeline .when { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--accent); letter-spacing: .04em; }
body.reorg .about-timeline .what { display: block; }
body.reorg .about-quote { margin: 32px 0; padding: 22px 26px; border-radius: var(--r-3); background: linear-gradient(135deg, #12357f, #1a5fd6); color: #fff; font-size: 19px; line-height: 1.55; font-weight: 600; }
body.reorg .about-refs { padding-left: 20px; font-size: var(--fs-small); }
body.reorg .about-article .bio { margin: 0 0 22px; }
@media (max-width: 860px) {
  body.reorg .about-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.reorg .about-toc { display: none; }
  body.reorg .about-stats { grid-template-columns: 1fr; }
}

/* ── connect: the tabbed terminal and the folded reference (J-50, 20 October 2026) ──
   Thirty-eight stacked tool sections made /connect/ twenty-nine screens tall; now
   one terminal shows one tool at a time. The tabs are anchors to their panels:
   without the page's script `:target` shows the linked panel and nothing targeted
   shows the first, so a shared link opens the right tool with no JS. With the
   script (`.ct.js`) the `is-on` class is the only switch, because `:target` does
   not follow history.replaceState and two rules would show two panels. */
body.reorg .ct { margin-top: 40px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 120px), var(--term-bg); color: var(--term-fg); box-shadow: var(--elev-term); border: var(--bw) solid rgba(255,255,255,.08); overflow: hidden; text-align: left; }
body.reorg .ct-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 8px 10px 0; border-bottom: var(--bw) solid rgba(255,255,255,.08); scrollbar-width: none; }
body.reorg .ct-tabs::-webkit-scrollbar { display: none; }
body.reorg .ct-tab { flex: none; font-size: var(--fs-small); font-weight: 500; color: var(--term-dim); padding: 10px 14px 11px; border-radius: 10px 10px 0 0; text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--dur-1) ease, background var(--dur-1) ease; }
body.reorg .ct-tab:hover { color: var(--term-fg); text-decoration: none; background: rgba(255,255,255,.04); }
body.reorg .ct-tab[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.07); border-bottom-color: var(--cyan); }
body.reorg .ct-panel { display: none; padding: 22px 26px 26px; scroll-margin-top: 90px; }
body.reorg .ct.js .ct-panel.is-on { display: block; }
body.reorg .ct:not(.js) .ct-panel:target { display: block; }
body.reorg .ct:not(.js):not(:has(.ct-panel:target)) .ct-panel:first-of-type { display: block; }
body.reorg .ct-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; }
body.reorg .ct-head .term-dots { margin-right: 2px; }
body.reorg .ct-name { margin: 0; font-size: var(--fs-card); font-weight: 600; color: #fff; }
body.reorg .ct-link { margin-left: auto; }
body.reorg .ct-steps { margin: 0 0 14px; padding-left: 22px; color: rgba(255,255,255,.86); font-size: var(--fs-small); line-height: 1.6; }
body.reorg .ct-steps li { margin: 6px 0; }
body.reorg .ct-steps li::marker { color: var(--term-dim); }
body.reorg .ct-panel code { font-family: var(--mono); font-size: 0.94em; color: var(--signal); background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 5px; }
body.reorg .ct-snip { margin: 14px 0; }
body.reorg .ct-label { font-family: var(--mono); font-size: var(--fs-small); color: var(--term-dim); margin: 0 0 6px; }
body.reorg .ct-label::before { content: "$ "; color: var(--term-phase); }
body.reorg .ct-code { margin: 0; padding: 12px 16px; border-radius: 10px; background: rgba(0,0,0,.28); border: var(--bw) solid rgba(255,255,255,.06); font-family: var(--mono); font-size: var(--fs-small); line-height: 1.6; color: var(--term-fg); overflow-x: auto; white-space: pre; }
body.reorg .ct-code code { background: none; padding: 0; color: inherit; font-size: inherit; }
body.reorg .ct-auth { margin: 14px 0 0; font-size: var(--fs-small); color: var(--term-dim); line-height: 1.6; max-width: 80ch; }
body.reorg .ct-auth a { color: var(--cyan); }
body.reorg .ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
body.reorg .ct-chip { font-size: var(--fs-small); color: #fff; background: rgba(255,255,255,.07); border: var(--bw) solid rgba(255,255,255,.12); border-radius: 999px; padding: 7px 13px; text-decoration: none; transition: background var(--dur-1) ease, border-color var(--dur-1) ease; }
body.reorg .ct-chip:hover { background: rgba(255,255,255,.14); border-color: var(--cyan); text-decoration: none; }
body.reorg .ct-under { margin-top: 20px; max-width: 80ch; }
/* The reference: key facts beside what the connector does, then the folds. */
body.reorg .ct-ref { display: grid; gap: 28px; text-align: left; }
body.reorg .ct-ref .key-facts { margin: 0; align-self: start; }
body.reorg .ct-ref .key-facts li { font-size: var(--fs-small); }
body.reorg .ct-does h2 { margin: 0 0 12px; font-size: var(--fs-card); }
body.reorg .ct-does p, body.reorg .ct-does li { font-size: var(--fs-small); }
body.reorg .ct-does-cols { display: grid; gap: 0 28px; }
body.reorg .ct-does-cols ul { margin: 6px 0 14px; }
body.reorg .ct-folds { margin-top: 28px; border-top: var(--bw) solid var(--hair); text-align: left; }
body.reorg .ct-fold { border-bottom: var(--bw) solid var(--hair); }
body.reorg .ct-fold summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: 18px 0; }
body.reorg .ct-fold summary::-webkit-details-marker { display: none; }
body.reorg .ct-fold summary h2 { margin: 0; font-size: var(--fs-text); font-weight: 600; color: var(--ink); }
body.reorg .ct-fold summary:hover h2 { color: var(--accent); }
body.reorg .ct-fold summary::after { content: "+"; color: var(--ink-3); font-size: var(--fs-text); line-height: 1; flex: none; transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) ease; }
body.reorg .ct-fold[open] summary::after { transform: rotate(45deg); color: var(--accent-bright); }
body.reorg .ct-fold-body { padding: 0 0 22px; max-width: 78ch; }
body.reorg .ct-fold-body > :first-child { margin-top: 0; }
body.reorg .ct-fold-body h3 { font-size: var(--fs-text); margin: 20px 0 8px; }
body.reorg .ct-fold-body p, body.reorg .ct-fold-body li, body.reorg .ct-fold-body td, body.reorg .ct-fold-body th { font-size: var(--fs-small); }
body.reorg .ct-fold-body pre { font-family: var(--mono); font-size: var(--fs-small); background: var(--term-bg); color: var(--term-fg); border-radius: var(--r-2); padding: 14px 18px; overflow: auto; white-space: pre; line-height: 1.5; margin: 12px 0; }
body.reorg .ct-fold-body table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
body.reorg .ct-fold-body th, body.reorg .ct-fold-body td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: var(--bw) solid var(--hair); }
@media (min-width: 900px) {
  body.reorg .ct-ref { grid-template-columns: 2fr 3fr; gap: 36px; }
  body.reorg .ct-does-cols { grid-template-columns: 1fr 1fr; }
  body.reorg .ct-panel { padding: 24px 30px 30px; }
}

/* ── connect: the installer (J-51, 20 October 2026) ────────────────────────
   The command, what it does, what it leaves alone and how to look before
   running: read in that order, so the main column carries the first two and
   the side card the last two. */
body.reorg .ct-init { display: grid; gap: 28px; margin-top: 28px; text-align: left; }
body.reorg .ct-init-cmd { margin: 0 0 18px; max-width: 48ch; font-size: var(--fs-text); padding: 16px 22px; }
body.reorg .ct-init-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: ct-step; }
body.reorg .ct-init-steps li { counter-increment: ct-step; position: relative; padding: 0 0 12px 40px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
body.reorg .ct-init-steps li::before { content: counter(ct-step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
body.reorg .ct-init-steps strong { color: var(--ink); font-weight: 600; }
body.reorg .ct-init-detects, body.reorg .ct-init-again { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; margin: 10px 0 0; max-width: 72ch; }
body.reorg .ct-init-again code, body.reorg .ct-init-side code { font-family: var(--mono); font-size: 0.92em; background: var(--accent-tint); color: var(--accent); padding: 1px 6px; border-radius: 5px; }
body.reorg .ct-init-side { align-self: start; border-left: 3px solid var(--accent-bright); border-radius: var(--r-2); padding: 20px 22px; background: var(--panel); box-shadow: var(--glass-top); }
body.reorg .ct-init-side h3 { margin: 0 0 8px; font-size: var(--fs-text); }
body.reorg .ct-init-side h3 + ul { margin: 0 0 18px; padding-left: 18px; }
body.reorg .ct-init-side li { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; margin: 4px 0; }
body.reorg .ct-init-side ul:last-child { margin-bottom: 0; }
body.reorg .ct-or { margin: 40px 0 0; font-size: var(--fs-card); font-weight: 600; }
@media (min-width: 900px) { body.reorg .ct-init { grid-template-columns: 3fr 2fr; gap: 40px; } }
body.reorg .ct-init-tool { color: var(--ink); font-weight: 500; scroll-margin-top: 90px; }
body.reorg .ct-covered { margin: -6px 0 14px; }
body.reorg .ct-covered a { color: var(--cyan); }

/* ── connect: the terminal wears the hero's blue (Tikka, 20 October 2026:
   "match the terminal blue to hero blue"). The royal gradient and the hero's
   own vignette, so the terminal and the hero above it read as one surface;
   the code wells darken over it for contrast, and the dim text is lifted
   because --term-dim was tuned for navy. Scoped to this page's terminal and
   the two command blocks beside it; the home hero's terminal sits inside the
   hero already and keeps its navy. */
body.reorg .ct, body.reorg #doors .code {
  background:
    radial-gradient(120% 90% at 78% 15%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(3,10,30,.10), rgba(3,10,30,.30)),
    var(--grad);
  border-color: rgba(255,255,255,.14);
}
body.reorg .ct-tabs { border-bottom-color: rgba(255,255,255,.16); }
body.reorg .ct-tab { color: rgba(255,255,255,.72); }
body.reorg .ct-tab:hover { background: rgba(255,255,255,.08); }
body.reorg .ct-tab[aria-selected="true"] { background: rgba(255,255,255,.14); border-bottom-color: #fff; }
body.reorg .ct-steps { color: rgba(255,255,255,.92); }
body.reorg .ct-steps li::marker { color: rgba(255,255,255,.6); }
body.reorg .ct-label { color: rgba(255,255,255,.78); }
body.reorg .ct-label::before { color: #fff; }
body.reorg .ct-code { background: rgba(3,10,30,.42); border-color: rgba(255,255,255,.12); }
body.reorg .ct-auth { color: rgba(255,255,255,.80); }
body.reorg .ct-auth a, body.reorg .ct-covered a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }
body.reorg .ct-panel code { color: #fff; background: rgba(3,10,30,.35); }
body.reorg .ct-chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
body.reorg .ct-chip:hover { background: rgba(255,255,255,.22); border-color: #fff; }
body.reorg .ct .term-dots i { background: rgba(255,255,255,.35); }
/* After the rule above: the well's own <code> is the block, not an inline token. */
body.reorg .ct-code code { background: none; color: inherit; }

/* ── the support icon and panel (§11) ─────────────────────────────────────
   One stylesheet for both surfaces: concatenated into /site.css by
   scripts/assemble-dist.mjs and @imported by app.css. Above the cookie line
   (z 60) and the sign-in dialog's scrim never covers it because the dialog is
   modal — the panel is not. */
.support { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: inherit; }
.support-label { background: var(--panel); color: var(--ink); border: 1px solid var(--hair); border-radius: 9999px; padding: 6px 12px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.support-fab { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 24px rgba(45,74,62,.35); }
.support-fab:hover { background: var(--accent-hover); }
.support-fab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.support-panel { width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 110px)); background: var(--panel); color: var(--ink); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
.support-panel[hidden] { display: none; }
.support-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.support-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.support-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.support-head-text b { font-size: 14px; }
.support-ctx { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.support-close { border: 0; background: transparent; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.support-close:hover { background: var(--tint); color: var(--ink); }
.support-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.support-m { max-width: 88%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.support-m-bot { background: var(--tint); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.support-m-you { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; align-self: flex-end; }
.support-m-sys { align-self: center; background: transparent; color: var(--ink-3); font-size: 12px; padding: 2px 0; text-align: center; }
.support-m-thinking::after { content: '…'; color: var(--ink-3); animation: support-blink 1s steps(3) infinite; }
@keyframes support-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .support-m-thinking::after { animation: none; } }
.support-why { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.support-status { align-self: flex-start; font-size: 12px; color: var(--ink-3); padding: 0 4px; }
.support-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; }
.support-chip { border: 1px solid var(--hair); background: var(--panel); color: var(--ink); border-radius: 9999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; }
.support-chip-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.support-chip-primary:hover { background: var(--accent-hover); }
.support-chip:disabled { opacity: .6; cursor: default; }
.support-chip-summary { flex-basis: 100%; font-size: 12px; color: var(--ink-3); }
.support-email { flex-basis: 100%; border: 1px solid var(--hair); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; }
.support-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.support-quick:empty { display: none; }
.support-quick-item { border: 1px solid var(--hair); background: var(--panel); color: var(--ink-2); border-radius: 9999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.support-quick-item:hover { background: var(--tint); color: var(--ink); }
.support-turnstile { padding: 0 14px; }
.support-turnstile:empty { display: none; }
.support-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--hair); }
.support-input { flex: 1; resize: none; border: 1px solid var(--hair); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; line-height: 1.4; max-height: 120px; background: var(--panel); color: var(--ink); }
.support-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.support-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 18px; cursor: pointer; flex: none; }
.support-send:disabled { opacity: .5; cursor: default; }
/* the cookie line is in the way until it is dismissed */
body:has(#cookie:not([hidden])) .support { bottom: 72px; }
/* while the panel is open the header's × closes it; the icon would only push
   the panel off the top of a short window (seen at 757px with the cookie line) */
.support-open .support-fab, .support-open .support-label { display: none; }
@media (max-width: 640px) {
  .support { right: 12px; bottom: 12px; }
  /* the rail is a bottom bar here and its avatar (the way to Sign out) sits
     at the right end — under the icon, if the icon stays at 12px (dev, 22 September 2026) */
  body:has(.rail) .support { bottom: 84px; }
  .support-panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: min(85vh, 640px); border-radius: 18px 18px 0 0; }
}