/* ── Reset ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html[data-theme='dark'] { color-scheme: dark; }
html[data-theme='light'] { color-scheme: light; }
body {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  background: #0a0a0a;
  color: #e5e5e5;
  font-size: 1.05rem;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  position: relative;
}
/* Atmospheric film grain — sits above the page background, below content.
   Inline SVG so it ships with the HTML; no extra request, no CDN dep. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
}
html[data-theme='light'] body::before { opacity: 0.08; mix-blend-mode: multiply; }
body > * { position: relative; z-index: 1; }
/* Every reactShell page's actual header/main/footer are now one level
   deeper, inside the #app-root hydration root SiteShell renders into (see
   src/shared/render-page.tsx) — restate the same guarantee one level down
   so .hero-showcase-bg (position:fixed, z-index:0, nested inside main)
   still sits behind header/main/footer's whole subtree, not just the hero
   text next to it. Without this, sections below the hero would fall back
   to the auto z-index layer and paint behind the fixed backdrop instead
   of over it. */
#app-root > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: grain-shift 11s steps(8) infinite; }
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(-4%, 2%); }
  30% { transform: translate(2%, -4%); }
  40% { transform: translate(-2%, 5%); }
  50% { transform: translate(-3%, -2%); }
  60% { transform: translate(4%, 0); }
  70% { transform: translate(0, 3%); }
  80% { transform: translate(-3%, -3%); }
  90% { transform: translate(3%, 4%); }
}
a { color: inherit; text-decoration: none; }
.nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid #333;
  background: #111;
  color: #a1a1aa;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.nav-theme-toggle:hover {
  background: #161616;
  border-color: #FF0000;
  color: #FF0000;
}
.nav-theme-icon {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
}
html[data-theme-choice='system'] .nav-theme-icon--system,
html[data-theme-choice='light'] .nav-theme-icon--light,
html[data-theme-choice='dark'] .nav-theme-icon--dark,
html:not([data-theme-choice]) .nav-theme-icon--light {
  display: block;
}

/* ── Header & Nav Dropdowns ─────────────────────────────────────────────── */
/* Scoped to #app-root > header (SiteShell's own header, the direct child of
   the React hydration root every reactShell page renders into) so nested
   <header> elements (e.g. .article-header inside articles, .ssg-dash-header
   inside dashboards) are not overridden. */
#app-root > header {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #1a1a1a; position: relative;
}
.logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 1.15rem; font-weight: 700; color: #FF0000;
  letter-spacing: -0.03em; flex-shrink: 0; text-decoration: none;
}
.logo:hover { color: #FF0000; }
.logo .logo-mark { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.logo .logo-word { line-height: 1; }
.mobile-menu-btn { display: none; background: transparent; border: none; color: #a1a1aa; cursor: pointer; padding: 0.5rem; }
.mobile-menu-btn:hover { color: #fdfdfd; }
#app-root > header nav { display: flex; gap: 0; align-items: center; }

/* top-level items */
.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: #888; font-size: 0.875rem; font-weight: 500;
  padding: 0.45rem 0.75rem; border-radius: 6px;
  cursor: pointer; background: transparent; border: none;
  font-family: inherit; transition: color 0.15s, background 0.15s;
}
.nav-trigger:hover { color: #e5e5e5; background: #161616; }
.nav-item.open > .nav-trigger { color: #e5e5e5; background: #161616; }
.nav-chevron { flex-shrink: 0; transition: transform 0.2s; }
.nav-item.open .nav-chevron { transform: rotate(180deg); }
.nav-direct {
  color: #888; font-size: 0.875rem; font-weight: 500;
  padding: 0.45rem 0.75rem; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav-direct:hover { color: #e5e5e5; background: #161616; }

/* dropdown panel */
.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  background: #111; border: 1px solid #222; border-radius: 12px;
  padding: 1.5rem 1.75rem; min-width: 480px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  display: flex; gap: 2rem;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.nav-item.open > .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-col { display: flex; flex-direction: column; min-width: 130px; }
.nav-col-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: #555; margin-bottom: 0.75rem;
}
.nav-col a {
  color: #999; font-size: 0.85rem; padding: 0.3rem 0;
  transition: color 0.12s;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.nav-col a:hover { color: #FF0000; }
.nav-link-tag {
  display: inline-flex; align-items: center;
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(180deg, #FF0000 0%, #FF0000 100%);
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
  line-height: 1;
}

/* right CTAs */
.nav-ctas { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.75rem; }
.nav-try-ssg {
  background: #FF0000; color: #000 !important; font-weight: 700;
  font-size: 0.825rem; padding: 0.45rem 1rem; border-radius: 7px;
  text-decoration: none; transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}
.nav-try-ssg:hover { background: #FF0000; transform: translateY(-1px); }
.nav-login { border: 1px solid #333 !important; color: #ccc !important; padding: 0.4rem 0.8rem; border-radius: 6px; font-weight: 500; font-size: 0.825rem; }
.nav-login:hover { border-color: #FF0000 !important; color: #FF0000 !important; background: transparent !important; }
.nav-dashboard { background: #fff !important; color: #000 !important; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.825rem; border: 1px solid #fff; }
.nav-dashboard:hover { background: #e5e5e5 !important; border-color: #e5e5e5 !important; color: #000 !important; }

/* Mobile */
@media (max-width: 1024px) {
  #app-root > header { padding: 1rem 1.25rem; }
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
  #app-root > header nav {
    display: none; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #0d0d0d; padding: 1rem 1.25rem 1.5rem;
    border-bottom: 1px solid #1a1a1a; gap: 0;
    z-index: 100; box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  }
  #nav-menu.open { display: flex; }
  /* on mobile, dropdowns become inline accordions */
  .nav-item { width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 0.75rem 0.5rem; font-size: 1rem; color: #ccc; }
  .nav-dropdown {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none; border: none; border-radius: 0;
    background: transparent; padding: 0 0 0.5rem 1rem;
    min-width: 0; flex-direction: column; gap: 1rem;
    display: none;
  }
  .nav-item.open > .nav-dropdown { display: flex; transform: none; }
  .nav-col-label { font-size: 0.6rem; margin-bottom: 0.4rem; }
  .nav-col a { font-size: 0.95rem; padding: 0.35rem 0; color: #bbb; }
  .nav-direct { padding: 0.75rem 0.5rem; font-size: 1rem; color: #ccc; width: 100%; display: block; }
  .nav-ctas { flex-direction: column; width: 100%; margin-left: 0; margin-top: 1rem; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid #1a1a1a; }
  .nav-theme-toggle, .nav-try-ssg, .nav-login, .nav-dashboard { text-align: center; width: 100%; display: flex; justify-content: center; }
}

/* ── Hero extras ───────────────────────────────────────────────────────── */
.hero-code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.95em;
  background: rgba(239,68,68,0.12);
  color: #f87171;
  padding: 0.1em 0.4em;
  border-radius: 5px;
  border: 1px solid rgba(239,68,68,0.2);
}
.subtitle-sub {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: #888;
  max-width: 600px;
  margin: -1rem auto 2.5rem;
  font-weight: 400;
}


/* ── Community CTA ─────────────────────────────────────────────────────── */
.community-cta {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}
.community-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(88,101,242,0.06) 0%, rgba(97,31,105,0.04) 100%);
  border: 1px solid rgba(88,101,242,0.15);
  border-radius: 20px;
  padding: 2.5rem 3rem;
}
.community-cta-text { flex: 1; }
.community-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5865f2;
  margin-bottom: 0.6rem;
}
.community-cta-text h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.community-cta-text p {
  font-size: 0.95rem;
  color: #888;
  margin: 0;
}
.community-cta-links {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.community-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.community-btn--discord {
  background: #5865f2;
  color: #fff;
  border-color: #5865f2;
}
.community-btn--discord:hover { background: #4752c4; border-color: #4752c4; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(88,101,242,0.35); }
.community-btn--slack {
  background: transparent;
  color: #ccc;
  border-color: rgba(255,255,255,0.12);
}
.community-btn--slack:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
@media (max-width: 640px) {
  .community-cta-inner { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; }
  .community-cta-links { flex-direction: column; width: 100%; }
  .community-btn { justify-content: center; }
}

.hero-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 850px;
  margin: 2rem auto 3rem;
  justify-items: center;
  align-items: center;
}
@media (max-width: 768px) {
  .hero-badges {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
/* ── Hero ──────────────────────────────────────────────────────────────── */
.custom-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  height: 54px;
  width: 250px;
  margin: 0;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.custom-badge:hover {
  transform: translateY(-2px);
  border-color: #FF0000;
  background: rgba(255, 0, 0, 0.05);
}
.custom-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #FF0000;
}
.custom-badge-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.custom-badge-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a1a1aa;
  line-height: 1;
  margin-bottom: 4px;
}
.custom-badge-value {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.hero {
  text-align: center; padding: 3rem 1.5rem 5rem;
  max-width: 1000px; margin: 0 auto;
  position: relative;
  /* Immersive first-screen height; flex so content centres vertically
     while still respecting the top padding that clears the site header. */
  min-height: min(92svh, 880px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* ── Showcase backdrop (fixed full-viewport ambient dashboard) ──────────── */
/* Promoted from hero-absolute to a site-wide fixed backdrop. Rendered directly
   by src/client/pages/Home.tsx (no ancestor has a transform/filter/perspective,
   so position:fixed still resolves against the viewport). .class specificity
   beats the  body > * { z-index:1 }  rule, so z-index:0 keeps the backdrop
   behind all page content while sitting above the #0a0a0a page bg. */
.hero-showcase-bg {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.6s ease;
}
/* The island adds .is-faded once scrolled past the last [data-bg-route]
   section so dense lower sections (pricing/FAQ/footer) get a clean bg. */
.hero-showcase-bg.is-faded {
  opacity: 0;
}
/* Hidden on narrow viewports — the island also skips iframe injection < 720px
   (see src/client/hero-showcase-bg.ts). */
@media (max-width: 768px) {
  .hero-showcase-bg { display: none; }
}
.hero-showcase-bg__frame {
  position: absolute;
  inset: 0;
}
/* The embed is a same-origin dashboard UI; fill the frame edge-to-edge and
   fade it in only once the island confirms the app root has mounted (.is-ready),
   so a slow load never flashes an empty/loading iframe over the hero. */
.hero-showcase-bg__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-showcase-bg.is-ready .hero-showcase-bg__iframe {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase-bg__iframe { transition: none; }
}
/* Until the iframe is ready, the tint has nothing to dim: the mounter's guards
   (reduced-motion / saveData / <720px / JS-off) return before relocating the
   container, so it never gets past this state on those paths, and the tint
   would otherwise sit at full opacity over every non-positioned section below
   the hero with no dashboard behind it to justify the wash. Fades in with the
   iframe once .is-ready lands. */
.hero-showcase-bg__tint {
  transition: opacity 0.8s ease;
}
.hero-showcase-bg:not(.is-ready) .hero-showcase-bg__tint {
  opacity: 0;
}
/* Dark tint: radial keeps the centre translucent so the live dashboard is
   visible across the full page scroll, linear ensures progressive darkening.
   Slightly more translucent than v1 so the live feed reads clearly while
   white headline + amber gradient stay ≥4.5:1 over it.
   Gated to dark theme — light theme uses a neutral wash instead. */
html[data-theme='dark'] .hero-showcase-bg__tint,
html:not([data-theme]) .hero-showcase-bg__tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(10,10,12,0.34) 0%, rgba(10,10,12,0.66) 58%, rgba(10,10,12,0.82) 100%),
    linear-gradient(180deg, rgba(10,10,12,0.30) 0%, rgba(10,10,12,0.58) 60%, rgba(10,10,12,0.78) 100%);
}
/* Light theme: white-based neutral wash keeps section text readable without
   a dark overlay that would fight the light background. */
html[data-theme='light'] .hero-showcase-bg__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248,250,252,0.62) 0%, rgba(248,250,252,0.88) 65%, rgba(248,250,252,0.96) 100%);
}
/* Single, calm hero glow — one soft amber radial, no drift, no horizon line.
   Lifted to z-index:1 so it grades over the dashboard tint. */
.hero-glow {
  position: absolute;
  top: 40%; left: 50%;
  width: 60vw; height: 60vw;
  max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.14) 0%, rgba(255, 0, 0, 0) 65%);
  transform: translate(-50%, -50%);
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
}
/* Quiet ASCII Σ accent behind the hero. Lifted to z-index:1 so the amber
   texture grades over the dashboard tint (same layer as .hero-glow). */
.hero-sigma-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
  mask-image: radial-gradient(ellipse 42% 42% at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(ellipse 42% 42% at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
}
/* Hero text content sits above glow + tint layers. */
.hero > h1,
.hero > p,
.hero > .hero-badges,
.hero > .hero-desktop-cta,
.hero > .cta-row,
.hero > .install-tabs-wrap,
.hero > .hero-stats {
  position: relative;
  z-index: 2;
}
.hero-sigma-bg pre {
  margin: 0;
  padding: 0;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
  font-size: clamp(9px, 1.5vmin, 17px);
  line-height: 1.0;
  letter-spacing: 0;
  white-space: pre;
  color: rgba(255, 0, 0, 0.08);
  will-change: transform, opacity;
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.45s ease-out;
}
.hero-sigma-bg.is-paused pre { opacity: 0; }
html[data-theme='light'] .hero-sigma-bg pre {
  color: rgba(0, 0, 0, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .hero-sigma-bg pre { transition: none; }
}
.hero h1 {
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 800; color: #fff;
  line-height: 0.98; letter-spacing: -0.045em;
  margin-bottom: 1.25rem;
  animation: fadeInUp 0.6s ease-out 0.1s both;
  text-wrap: balance;
}
.hero-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #FF0000 70%, #FF0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .subtitle {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  color: #d4d4d8; max-width: 680px; margin: 0 auto 3rem;
  animation: fadeInUp 0.6s ease-out 0.2s both;
  font-weight: 500; letter-spacing: -0.01em;
  min-height: 3.2rem;
}
/* Static value-prop lede (replaces the typed-pivot variant). No min-height
   reserve, tighter bottom margin so the secondary line sits close. */
.hero .subtitle.hero-static-lede {
  min-height: 0;
  margin: 0 auto 0.6rem;
  color: #f1f1f1;
  font-weight: 600;
}
.hero .subtitle-sub.hero-static-sub {
  margin: 0 auto 2.5rem;
  color: var(--hig-fg-2);
  font-weight: 400;
  max-width: 640px;
}
.hero .accent { color: #FF0000; font-weight: 700; }

/* ── Install box ───────────────────────────────────────────────────────── */
.install-commands {
  display: flex; flex-direction: column; gap: 0.75rem;
  max-width: 560px; margin: 0 auto 2.5rem;
  animation: fadeInUp 0.6s ease-out 0.3s both;
}
.install-row {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(0,0,0,0.4); 
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.5);
  border-radius: 12px; padding: 0.85rem 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer; position: relative;
  backdrop-filter: blur(10px);
}
.install-row:hover { 
  border-color: rgba(255, 0, 0, 0.5); 
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 8px 32px rgba(255, 0, 0, 0.15);
}
.copied-tooltip {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  background: #FF0000; color: #000; font-size: 0.75rem; font-weight: 700;
  padding: 0.25em 0.7em; border-radius: 6px;
  pointer-events: none;
  animation: fadeInOut 1.5s ease-out forwards;
}
@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.9); }
  15%  { opacity: 1; transform: translateY(-50%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
.install-label {
  font-size: 0.75rem; font-weight: 700; color: #a1a1aa;
  text-transform: uppercase; letter-spacing: 0.08em;
  min-width: 40px;
}
.install-cmd {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 1rem; color: #FF0000; flex: 1;
  user-select: all; text-align: left;
}

/* ── CTA — sharper than the SaaS pill, mono label, animated arrow ───────── */
.cta-row {
  display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap;
  animation: fadeInUp 0.6s ease-out 0.4s both;
}
/* Hero secondary actions as quiet text links so the Download button is the one
   dominant CTA (Krug: one primary action). */
.cta-row--sublinks { gap: 1.5rem; margin-top: 0.1rem; }
.hero-sublink {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: #9ca3af; text-decoration: none; font-size: 0.92rem; font-weight: 500;
  transition: color 0.15s;
}
.hero-sublink:hover { color: #FF0000; }
.hero-sublink .btn-arrow { transition: transform 0.15s; }
.hero-sublink:hover .btn-arrow { transform: translateX(2px); }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem; border-radius: 6px;
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-variation-settings: 'opsz' 16;
  font-size: 0.92rem; font-weight: 700; letter-spacing: -0.012em;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  cursor: pointer; border: 1px solid transparent;
  position: relative;
}
.btn > .btn-arrow {
  display: inline-block;
  font-weight: 800;
  transition: transform 0.18s ease;
}
.btn:hover > .btn-arrow { transform: translateX(3px); }
.btn-primary {
  background: linear-gradient(180deg, #FF0000 0%, #FF0000 100%);
  color: #0a0a0a;
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.42) inset,
    0 6px 18px rgba(255, 0, 0, 0.32);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 10px 26px rgba(255, 0, 0, 0.45);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: rgba(255,255,255,0.025);
  color: #f4f4f5;
  border: 1px solid #2a2a2a;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.btn-secondary:hover {
  background: rgba(255, 0, 0, 0.05);
  border-color: rgba(255, 0, 0, 0.4);
  color: #FF0000;
  transform: translateY(-1px);
}
.btn-disabled { opacity: 0.5; cursor: default; pointer-events: none; }

/* ── Rule Playground Container ───────────────────────────────────────────── */
.playground-section {
  max-width: 1280px; margin: 0 auto;
  padding: 0 1.5rem 4rem;
}
/* ── Rule Playground ────────────────────────────────────────────────────── */
.playground-inner {
  background: #0d0d0d; border: 1px solid #1e1e1e;
  border-radius: 12px; padding: 2rem;
}
.playground-section { scroll-margin-top: 80px; }
.playground-header { text-align: center; margin-bottom: 2rem; }
.playground-header h2 {
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-variation-settings: 'opsz' 48;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; color: #fff;
  margin-bottom: 0.6rem; letter-spacing: -0.03em; line-height: 1.08;
}
.playground-sub { font-size: 0.95rem; color: #a1a1aa; max-width: 680px; margin: 0 auto; line-height: 1.5; }

/* ── Layer 1: Eyebrow + header (bracket-framed terminal pill) ────────────── */
.pg-eyebrow {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem; font-weight: 700; color: #FF0000;
  text-transform: uppercase; letter-spacing: 0.14em;
  background: rgba(255, 0, 0, 0.06);
  border: 1px solid rgba(255, 0, 0, 0.22);
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.pg-eyebrow::before {
  content: '[';
  color: rgba(255, 0, 0, 0.55);
  font-weight: 600;
}
.pg-eyebrow::after {
  content: ']';
  color: rgba(255, 0, 0, 0.55);
  font-weight: 600;
}

/* ── Layer 2: Install → Deploy → Protect ─────────────────────────────────── */
.risk-layer-promise {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-bottom: 2.5rem;
}
.risk-promise-card {
  position: relative; background: #111; border: 1px solid #1e1e1e;
  border-radius: 10px; padding: 1.25rem 1.1rem; display: flex; flex-direction: column;
  overflow: hidden;
}
.risk-promise-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--card-accent, #FF0000);
}
.risk-card--install { --card-accent: #FF0000; }
.risk-card--deploy  { --card-accent: #8b5cf6; }
.risk-card--protect { --card-accent: #ef4444; }
.risk-card-step {
  font-size: 0.65rem; font-weight: 700; color: var(--card-accent, #FF0000);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.5rem;
}
.risk-promise-card h3, .risk-card-title {
  font-size: 1rem; color: #fdfdfd; margin: 0 0 0.9rem 0;
  line-height: 1.3; letter-spacing: -0.01em; font-weight: 700;
}
.risk-card-foot {
  margin-top: auto; padding-top: 0.9rem; font-size: 0.78rem; color: #a1a1aa;
  line-height: 1.45;
}
/* Install card tabs (mirror hero install UI, scoped) */
.risk-install-tabs-wrap {
  display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.25rem;
}
.risk-install-tabs-wrap .install-tabs-nav {
  display: flex; gap: 0.35rem; margin: 0; padding: 0;
}
.risk-install-tabs {
  display: flex; gap: 0.35rem; margin-bottom: 0.5rem;
}
.risk-install-tab {
  background: transparent; color: #a1a1aa; border: 1px solid transparent;
  font-size: 0.72rem; font-weight: 600; padding: 0.28rem 0.6rem;
  border-radius: 5px; cursor: pointer; transition: all 0.15s;
}
.risk-install-tab:hover { color: #fff; }
.risk-install-tab.active {
  color: #FF0000; background: rgba(255, 0, 0, 0.1);
  border-color: rgba(255, 0, 0, 0.3);
}
.risk-install-row {
  display: flex; align-items: center; gap: 0.5rem;
  background: #0a0a0a; border: 1px solid #242424; border-radius: 6px;
  padding: 0.55rem 0.7rem; cursor: pointer; transition: border-color 0.15s;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.78rem; color: #e4e4e7; word-break: normal; overflow-wrap: anywhere;
}
.risk-install-row:hover { border-color: #FF0000; }
.risk-install-row .install-prompt { color: #FF0000; user-select: none; }
.risk-install-row .install-label {
  font-size: 0.62rem; padding: 0.1rem 0.4rem; border-radius: 4px;
  background: rgba(255, 0, 0, 0.08); color: #FF0000;
  border: 1px solid rgba(255, 0, 0, 0.22);
}
.risk-install-cmd { flex: 1; min-width: 0; color: #e4e4e7; font-size: 0.78rem; font-weight: 400; }
.risk-install-copy-hint { font-size: 0.65rem; color: #52525b; white-space: nowrap; }
.risk-install-row .install-copy-icon { flex-shrink: 0; }
/* Deploy card agent grid */
.risk-agent-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem;
  align-items: center; margin-bottom: 0.3rem;
}
.risk-agent-icon {
  display: flex; align-items: center; justify-content: center;
  background: #0a0a0a; border: 1px solid #242424; border-radius: 6px;
  padding: 0.55rem; aspect-ratio: 1 / 1; color: inherit;
}
.risk-agent-icon img, .risk-agent-icon svg { width: 22px; height: 22px; opacity: 0.85; }
/* Protect card mini-ledger — DENY / ASK / FORCE */
.risk-deny-ledger {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.risk-deny-row {
  background: #0a0a0a; border: 1px solid #242424; border-radius: 6px;
  padding: 0.6rem 0.7rem; display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.78rem; color: #e4e4e7;
  transition: border-color 0.18s, transform 0.18s;
}
.risk-deny-row:hover { border-color: #3a3a3a; transform: translateX(2px); }
.risk-deny-cmd {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.risk-deny-cmd .deny-prompt { color: #71717a; margin-right: 0.35rem; }
.risk-deny-row:nth-child(1) .risk-deny-cmd { color: #f87171; }
.risk-deny-row:nth-child(2) .risk-deny-cmd { color: #FF0000; }
.risk-deny-row:nth-child(3) .risk-deny-cmd { color: #c084fc; }
.risk-deny-badge {
  flex-shrink: 0;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  color: #fff;
  padding: 0.2rem 0.5rem; border-radius: 4px;
}
.risk-deny-badge--deny  { background: #ff0000; color: #000000; animation: riskDenyPulse 2.4s ease-in-out infinite; }
.risk-deny-badge--ask   { background: #FF0000; color: #000000; animation: riskAskPulse 2.8s ease-in-out infinite 0.6s; }
.risk-deny-badge--force { background: #8b5cf6; animation: riskForcePulse 2.6s ease-in-out infinite 1.2s; }
.risk-deny-badge--audit { background: #0e7490; color: #cffafe; animation: riskAuditPulse 3s ease-in-out infinite 0.3s; }
@keyframes riskDenyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0);   }
}
@keyframes riskAskPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 0, 0, 0);  }
}
@keyframes riskForcePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(139,92,246,0);  }
}
@keyframes riskAuditPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.50); }
  50%      { box-shadow: 0 0 0 6px rgba(34,211,238,0);  }
}
@media (prefers-reduced-motion: reduce) {
  .risk-deny-badge, .risk-deny-badge--deny, .risk-deny-badge--ask, .risk-deny-badge--force, .risk-deny-badge--audit { animation: none; }
  .risk-deny-row:hover { transform: none; }
}

/* ── Layer 3: Live demo chips + terminal ─────────────────────────────────── */
.risk-layer-demo { margin-bottom: 2rem; }
.risk-demo-header {
  display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem;
  text-align: left;
}
.risk-demo-eyebrow {
  font-size: 0.68rem; font-weight: 700; color: #FF0000;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.risk-demo-hint {
  font-size: 0.85rem; color: #a1a1aa; margin: 0; line-height: 1.5;
  max-width: 680px;
}
.risk-scenario-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem;
  margin-bottom: 1rem;
}
.risk-chip {
  background: #111; border: 1px solid #2a2a2a; border-radius: 8px;
  padding: 0.75rem 0.85rem; cursor: pointer; transition: all 0.15s;
  text-align: left; display: flex; align-items: center; gap: 0.55rem;
  position: relative; font-family: inherit; color: inherit;
}
.risk-chip:hover { border-color: #444; background: #161616; }
.risk-chip.active {
  border-color: #FF0000; background: rgba(255, 0, 0, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.2);
}
.risk-chip-icon {
  font-size: 1.1rem; line-height: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.risk-chip-body {
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1;
}
.risk-chip-title { font-size: 0.82rem; font-weight: 700; color: #fdfdfd; letter-spacing: -0.005em; }
.risk-chip.active .risk-chip-title { color: #FF0000; }
.risk-chip-sub { font-size: 0.65rem; color: #71717a; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.risk-chip-decision {
  position: absolute; top: 0.45rem; right: 0.55rem;
  font-size: 0.58rem; font-weight: 800; padding: 0.12em 0.45em;
  border-radius: 3px; letter-spacing: 0.06em; line-height: 1;
}
.risk-chip-decision--deny { color: #ef4444; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.22); }
.risk-chip-decision--ask  { color: #FF0000; background: rgba(255, 0, 0, 0.12); border: 1px solid rgba(255, 0, 0, 0.22); }
.risk-chip-decision--force { color: #a78bfa; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.24); }
.risk-chip-decision--audit { color: #22d3ee; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.22); }
.risk-rule-catalog-link {
  display: block; margin-top: 0.4rem; font-size: 0.78rem; color: #71717a;
  text-align: right; text-decoration: none; transition: color 0.15s;
}
.risk-rule-catalog-link:hover { color: #FF0000; }
.risk-demo-player { /* inherits from .playground-preview base */ }

/* ── Layer 4: Engineer proof accordion — terminal-section aesthetic ──────── */
.risk-layer-proof {
  background: linear-gradient(180deg, #0a0a0a 0%, #080808 100%);
  border: 1px solid #1c1c1c;
  border-radius: 10px;
  margin-bottom: 2rem;
  overflow: hidden;
  position: relative;
}
.risk-layer-proof::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  bottom: 0;
  background: linear-gradient(180deg, #FF0000 0%, #FF0000 50%, transparent 100%);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.risk-layer-proof[open] { border-color: rgba(255, 0, 0, 0.18); }
.risk-layer-proof[open]::before { opacity: 1; }
.risk-proof-summary {
  cursor: pointer;
  padding: 1.05rem 1.4rem 1.05rem 1.7rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #a8a8a8;
  text-transform: lowercase;
  transition: background 0.18s ease, color 0.18s ease;
}
.risk-proof-summary::-webkit-details-marker { display: none; }
.risk-proof-summary:hover {
  background: linear-gradient(to right, rgba(255, 0, 0, 0.05), transparent 70%);
  color: #fff;
}
.risk-proof-summary-text { flex: 1; }
.risk-proof-summary-prefix {
  color: #FF0000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  margin-right: 0.1em;
}
.risk-proof-summary-prefix::before {
  content: '[ ';
  color: rgba(255, 0, 0, 0.5);
  font-weight: 400;
}
.risk-proof-summary-prefix::after {
  content: ' ]';
  color: rgba(255, 0, 0, 0.5);
  font-weight: 400;
}
.risk-proof-summary-divider { color: #3a3a3a; margin: 0 0.4rem; }
.risk-proof-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font-size: 0.7rem;
  color: #4a4a4a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}
.risk-proof-summary:hover .risk-proof-chevron {
  color: #FF0000;
  border-color: rgba(255, 0, 0, 0.4);
}
.risk-layer-proof[open] .risk-proof-chevron {
  transform: rotate(180deg);
  color: #FF0000;
  border-color: rgba(255, 0, 0, 0.4);
}
.risk-proof-body {
  padding: 0 1rem 1.25rem;
  border-top: 1px solid #1a1a1a;
}
.risk-proof-tabs { margin-top: 0.75rem; }
.risk-bench-callout {
  font-size: 0.78rem; color: #a1a1aa; padding: 0.5rem 0.75rem;
  background: rgba(255, 0, 0, 0.05); border: 1px solid rgba(255, 0, 0, 0.15);
  border-radius: 6px; margin-bottom: 0.75rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  text-align: center;
}

/* ── Layer 5: Exit CTA ───────────────────────────────────────────────────── */
.risk-layer-cta {
  text-align: center; padding: 1.75rem 1rem 0.25rem;
  border-top: 1px solid #1a1a1a;
}
.risk-cta-buttons {
  display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.risk-cta-primary, .risk-cta-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.75rem 1.25rem; border-radius: 6px;
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.risk-cta-primary {
  background: linear-gradient(180deg, #FF0000 0%, #FF0000 100%);
  color: #0a0a0a;
  border: 1px solid rgba(255, 0, 0, 0.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 6px 18px rgba(255, 0, 0, 0.30);
}
.risk-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 10px 24px rgba(255, 0, 0, 0.42);
}
.risk-cta-secondary {
  background: rgba(255,255,255,0.025);
  color: #e4e4e7;
  border: 1px solid #2a2a2a;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.risk-cta-secondary:hover {
  border-color: rgba(255, 0, 0, 0.4);
  color: #FF0000;
  background: rgba(255, 0, 0, 0.05);
  transform: translateY(-1px);
}
.risk-cta-hint {
  font-size: 0.78rem; color: #71717a; max-width: 560px; margin: 0 auto;
  line-height: 1.5;
}

.playground-preview {
  display: flex; flex-direction: column; background: #0a0a0a;
  border: 1px solid #1e1e1e; border-radius: 8px; overflow: hidden;
}
.pg-player-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; background: #111; border-bottom: 1px solid #1e1e1e;
}
.pg-player-title { font-size: 0.8rem; font-weight: 600; color: #fff; font-family: 'SF Mono', 'Fira Code', monospace; }
.pg-player-freshness { margin-left: auto; font-size: 0.625rem; color: #888; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.24); border-radius: 4px; padding: 0.15rem 0.45rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'SF Mono', Menlo, monospace; }
.pg-player-controls { display: flex; gap: 0.5rem; align-items: center; }
.pg-speed-select {
  background: #1a1a1a; border: 1px solid #333; color: #ccc; outline: none;
  font-size: 0.7rem; padding: 0.2rem 0.4rem; border-radius: 4px; cursor: pointer;
}
.pg-speed-select:focus { border-color: #FF0000; }
.pg-replay-btn {
  background: transparent; border: 1px solid #333; color: #ccc;
  font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 4px;
  cursor: pointer; transition: all 0.15s; font-family: system-ui, sans-serif;
}
.pg-replay-btn:hover { border-color: #FF0000; color: #FF0000; }
.pg-player-container { flex: 1; padding: 0.5rem; min-height: 400px; display: flex; flex-direction: column; justify-content: center; }
#pg-onboarding-player { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
#pg-onboarding-player::-webkit-scrollbar { height: 6px; }
#pg-onboarding-player::-webkit-scrollbar-track { background: transparent; }
#pg-onboarding-player::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
#pg-onboarding-player .asciinema-terminal { white-space: pre; }
.pg-no-ai-note {
  font-size: 0.7rem; color: #555; text-align: center; padding: 0.75rem;
  background: #0d0d0d; border-top: 1px solid #1e1e1e;
}
.pg-note-icon { color: #FF0000; margin-right: 0.3rem; }

/* ── Benchmark panel ──────────────────────────────────────────────────── */
.bench-panel {
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem;
}
.bench-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.bench-mode-card {
  background: #111; border: 1px solid #2a2a2a; border-radius: 12px;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.2s;
}
.bench-mode-card:hover { border-color: #444; }
.bench-mode--daemon { border-color: rgba(74,222,128,0.25); }
.bench-mode--daemon:hover { border-color: rgba(74,222,128,0.5); }
.bench-mode-header {
  display: flex; align-items: center; gap: 0.75rem;
}
.bench-mode-icon {
  font-size: 1.25rem; color: #FF0000; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 0, 0, 0.1); border-radius: 8px;
}
.bench-mode-icon--daemon {
  color: #4ade80; background: rgba(74,222,128,0.1);
}
.bench-mode-header strong {
  display: block; font-size: 0.95rem; color: #fdfdfd;
}
.bench-mode-sub {
  display: block; font-size: 0.72rem; color: #888;
}
.bench-hero-stat {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.bench-val {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.bench-val--cli { color: #FF0000; }
.bench-val--daemon { color: #4ade80; }
.bench-unit { font-size: 1rem; font-weight: 400; color: #a1a1aa; margin-left: 0.15em; }
.bench-label { font-size: 0.72rem; color: #888; }
.bench-speedup {
  display: flex; align-items: baseline; gap: 0.5rem;
  background: rgba(74,222,128,0.06); border: 1px solid rgba(74,222,128,0.15);
  border-radius: 8px; padding: 0.5rem 0.75rem;
}
.bench-speedup-val {
  font-size: 1.25rem; font-weight: 800; color: #4ade80;
}
.bench-speedup-lbl {
  font-size: 0.75rem; color: #86efac;
}
.bench-bars {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.bench-bar-row {
  display: grid; grid-template-columns: 28px 1fr 60px; align-items: center; gap: 0.5rem;
}
.bench-bar-label {
  font-size: 0.65rem; font-weight: 600; color: #a1a1aa;
  text-transform: uppercase; letter-spacing: 0.05em; text-align: right;
}
.bench-bar-track {
  height: 12px; background: rgba(255,255,255,0.04); border-radius: 6px;
  overflow: hidden;
}
.bench-bar {
  height: 100%; border-radius: 6px;
  width: var(--pct, 0);
  animation: benchBarGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes benchBarGrow {
  from { width: 0; }
  to { width: var(--pct, 0); }
}
.bench-bar--cli {
  background: linear-gradient(90deg, #FF0000, #FF0000);
}
.bench-bar--daemon {
  background: linear-gradient(90deg, #4ade80, #22d3ee);
}
.bench-bar-val {
  font-size: 0.7rem; font-weight: 600; color: #d4d4d8;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums; text-align: right;
}
.bench-details {
  display: flex; flex-direction: column; gap: 0.35rem;
  border-top: 1px solid #1e1e1e; padding-top: 0.75rem; margin-top: 0.25rem;
}
.bench-detail {
  display: flex; justify-content: space-between; font-size: 0.72rem; color: #a1a1aa;
}
.bench-detail-lbl { color: #666; }
.bench-decisions { display: flex; gap: 0.5rem; }
.bench-dec {
  font-size: 0.65rem; font-weight: 700; padding: 0.1em 0.35em; border-radius: 3px;
}
.bench-dec--allow { color: #4ade80; background: rgba(74,222,128,0.1); }
.bench-dec--block { color: #ef4444; background: rgba(239,68,68,0.1); }
.bench-dec--log { color: #a1a1aa; background: rgba(161,161,170,0.1); }
.bench-footer {
  text-align: center; padding: 0.5rem 0;
}
.bench-footer-note {
  font-size: 0.65rem; color: #555;
}

/* ── Benchmark system bar ─────────────────────────────────────────────── */
.bench-sys-bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.75rem; background: rgba(255,255,255,0.02);
  border: 1px solid #1e1e1e; border-radius: 8px;
}
.bench-sys-chip {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; color: #a1a1aa;
  background: rgba(255,255,255,0.03); border: 1px solid #2a2a2a;
  padding: 0.3rem 0.6rem; border-radius: 6px;
}
.bench-sys-chip svg { color: #FF0000; flex-shrink: 0; }

/* ── Scaling table ────────────────────────────────────────────────────── */
.bench-scaling {
  background: #111; border: 1px solid #2a2a2a; border-radius: 12px;
  padding: 1.25rem;
}
.bench-scaling-title {
  font-size: 0.9rem; font-weight: 700; color: #fdfdfd;
  margin-bottom: 0.25rem;
}
.bench-scaling-sub {
  font-size: 0.7rem; color: #666; margin-bottom: 1rem;
}
.bench-scale-table-wrap {
  overflow-x: auto;
}
.bench-scale-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.bench-scale-table th {
  text-align: left; padding: 0.5rem 0.6rem;
  color: #888; font-weight: 600; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid #2a2a2a;
}
.bench-scale-table td {
  padding: 0.45rem 0.6rem; color: #d4d4d8;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.72rem;
}
.bench-scale-table tbody tr:hover {
  background: rgba(255, 0, 0, 0.04);
}
.bench-scale-table td strong {
  color: #fff; font-weight: 700;
}
.bench-td-fast {
  color: #4ade80 !important;
}
.bench-scaling-note {
  font-size: 0.68rem; color: #666; margin-top: 0.75rem;
  line-height: 1.5;
}
.bench-row-extreme {
  background: rgba(255, 0, 0, 0.06) !important;
  border-top: 1px solid rgba(255, 0, 0, 0.2);
}
.bench-row-extreme td {
  font-weight: 600 !important;
}
.bench-row-extreme td:first-child strong {
  color: #FF0000;
}
.bench-highlight {
  color: #4ade80; font-weight: 700;
}


/* ── Hub Preview ───────────────────────────────────────────────────────── */
.hub-section {
  max-width: 1200px; margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
  border-top: 1px solid #1a1a1a;
}
/* ── Clients Strip ─────────────────────────────────────────────────────── */
.clients-strip {
  max-width: 100%; margin: 0 auto 5rem; overflow: hidden;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.clients-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #666; margin: 0; font-weight: 600;
}
.marquee-container {
  display: flex; overflow: hidden; width: 100vw; position: relative; padding: 1rem 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-content {
  display: flex; gap: 1.5rem; padding-right: 1.5rem;
  animation: scroll-left 40s linear infinite; white-space: nowrap;
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.client-badge {
  display: flex; align-items: center; gap: 1rem;
  background: #111; border: 1px solid #2a2a2a; border-radius: 12px;
  padding: 1rem 1.25rem; text-align: left; min-width: 280px; flex-shrink: 0;
}
.client-badge svg {
  color: #FF0000;
}
.client-badge strong {
  display: block; font-size: 0.95rem; color: #fdfdfd; margin-bottom: 0.1rem;
}
.client-badge span {
  display: block; font-size: 0.75rem; color: #888;
}
.client-badge--soon {
  opacity: 0.6; border-style: dashed;
}
.client-badge--soon svg {
  color: #888;
}
.clients-tagline {
  font-size: 0.85rem; color: #777; margin-top: 0.5rem;
}

/* ── Hub Callout ─────────────────────────────────────────────────────── */
.hub-callout {
  max-width: 1000px; margin: 4rem auto 5rem;
  text-align: center; position: relative; padding: 4rem 1.5rem;
  background: radial-gradient(circle at center, rgba(255, 0, 0, 0.05) 0%, transparent 60%);
  border: 1px solid #1a1a1a; border-radius: 24px;
}
.hub-callout-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60%; height: 60%; background: rgba(255, 0, 0, 0.1); filter: blur(100px);
  z-index: -1; pointer-events: none;
}
.hub-callout h2 {
  font-size: 2.25rem; color: #fff; margin-bottom: 0.75rem; font-weight: 700;
}
.hub-callout .accent {
  color: #FF0000;
}
.hub-callout .section-sub {
  color: #a1a1aa; font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.5;
}
.hub-install-example {
  background: #000; border: 1px solid #333; padding: 1.25rem;
  border-radius: 8px; max-width: 450px; margin: 0 auto 3rem;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.hub-install-example code {
  font-family: 'SF Mono', 'Fira Code', monospace; color: #8be9fd; font-size: 1rem;
}
#hub-tech-toggle {
  transition: opacity 0.3s ease;
  color: #FF0000;
}
.hub-cursor {
  animation: blink 1s step-end infinite;
  color: #fdfdfd;
}
@keyframes blink {
  50% { opacity: 0; }
}
.hub-stats {
  display: flex; justify-content: center; gap: 4rem; margin-bottom: 3rem; flex-wrap: wrap;
}
.hub-stat {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
.hub-stat strong {
  font-size: 2.5rem; color: #fff; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums;
}
.hub-stat span {
  font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.cta-row {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}

/* Badge colors (match hub) */
.badge-typescript { background: rgba(29,78,216,0.25); color: #93c5fd; border: 1px solid rgba(29,78,216,0.4); }
.badge-rust { background: rgba(194,65,12,0.25); color: #fb923c; border: 1px solid rgba(194,65,12,0.4); }
.badge-python { background: rgba(22,101,52,0.25); color: #86efac; border: 1px solid rgba(22,101,52,0.4); }
.badge-go { background: rgba(6,95,124,0.25); color: #67e8f9; border: 1px solid rgba(6,95,124,0.4); }
.badge-bash { background: rgba(22,101,52,0.25); color: #86efac; border: 1px solid rgba(22,101,52,0.4); }
.badge-git { background: rgba(255, 0, 0, 0.25); color: #FF0000; border: 1px solid rgba(255, 0, 0, 0.4); }
.badge-agent { background: rgba(88,28,135,0.25); color: #d8b4fe; border: 1px solid rgba(88,28,135,0.4); }
.badge-npm { background: rgba(153,27,27,0.25); color: #fca5a5; border: 1px solid rgba(153,27,27,0.4); }
.badge-security { background: rgba(220,38,38,0.2); color: #f87171; border: 1px solid rgba(220,38,38,0.35); }
.badge-privacy { background: rgba(13,148,136,0.2); color: #5eead4; border: 1px solid rgba(13,148,136,0.35); }

/* ── Pricing ──────────────────────────────────────────────────────────── */
.faq-section {
  max-width: 720px; margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
  border-top: 1px solid #1a1a1a;
}
.faq-section h2 {
  text-align: center; font-size: 1.5rem; color: #fff;
  margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.faq-section .section-sub {
  text-align: center; color: #a1a1aa; font-size: 1rem;
  margin-bottom: 2.5rem;
}
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: #111; border: 1px solid #222; border-radius: 8px;
  overflow: hidden;
}
.faq-item summary {
  padding: 1rem 1.25rem; font-size: 0.95rem; font-weight: 600; color: #e4e4e7;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.1rem; color: #666; transition: transform 0.2s, color 0.2s;
}
.faq-item[open] summary::after { content: '−'; color: #a78bfa; }
.faq-item[open] summary { color: #fff; }
.faq-body {
  padding: 0 1.25rem 1.25rem; color: #a1a1aa; font-size: 0.9rem; line-height: 1.65;
}
.faq-body p { margin: 0 0 0.75rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body code { background: #1a1a2e; color: #c4b5fd; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.85em; }
.faq-link { color: #a78bfa; text-decoration: none; }
.faq-link:hover { text-decoration: underline; }
.pricing-section {
  max-width: 1000px; margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
  border-top: 1px solid #1a1a1a;
}
.pricing-section h2 {
  text-align: center; font-size: 1.5rem; color: #fff;
  margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.pricing-section .section-sub {
  text-align: center; color: #a1a1aa; font-size: 1.15rem; font-weight: 500;
  margin-bottom: 2.5rem;
}
.pricing-toggle-wrap {
  display: flex; justify-content: center; align-items: center; gap: 1rem;
  margin-bottom: 2.5rem;
}
.pricing-toggle-label {
  font-size: 0.95rem; color: #888; cursor: pointer; transition: color 0.2s;
  display: flex; align-items: center; gap: 0.5rem;
}
.pricing-toggle-label:hover { color: #ccc; }
.pricing-toggle-label.active { color: #fff; font-weight: 600; }
.pricing-save-badge {
  background: rgba(255, 0, 0, 0.15); color: #FF0000; padding: 0.2rem 0.5rem;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; border: 1px solid rgba(255, 0, 0, 0.3);
}
.pricing-switch {
  position: relative; display: inline-block; width: 50px; height: 26px; margin: 0;
}
.pricing-switch input { opacity: 0; width: 0; height: 0; }
.pricing-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #333; transition: .3s; border-radius: 34px; border: 1px solid #444;
}
.pricing-slider:before {
  position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background-color: white; transition: .3s; border-radius: 50%;
}
.pricing-switch input:checked + .pricing-slider {
  background-color: #FF0000; border-color: #FF0000;
}
.pricing-switch input:checked + .pricing-slider:before {
  transform: translateX(24px);
}
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem; margin-bottom: 1.5rem;
}
.price-card {
  background: #111; border: 1px solid #2a2a2a;
  border-radius: 10px; padding: 2rem 1.5rem;
  display: flex; flex-direction: column;
  text-align: center; position: relative;
  transition: border-color 0.15s;
}
.price-card:hover { border-color: #444; }
.price-featured {
  border-color: #FF0000;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.12), 0 8px 24px rgba(255, 0, 0, 0.06);
  padding-top: 2.5rem;
}
.price-badge {
  position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%);
  background: #FF0000; color: #000; font-size: 0.65rem; font-weight: 700;
  padding: 0.15em 0.7em; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.price-card h3 {
  font-size: 1rem; color: #fdfdfd; margin-bottom: 0.5rem;
}
.price-amount {
  font-size: 2.25rem; font-weight: 800; color: #fff;
  letter-spacing: -0.04em;
}
.price-amount span { font-size: 0.9rem; font-weight: 400; color: #a1a1aa; }
.price-period { color: #555; font-size: 0.75rem; margin-bottom: 1.25rem; }
.price-card ul {
  list-style: none; text-align: left; flex: 1;
  margin-bottom: 1.25rem; padding: 0;
}
.price-card li {
  padding: 0.3rem 0 0.3rem 1.4rem; font-size: 0.82rem;
  color: #d4d4d8; position: relative;
}
.price-card li::before {
  content: "✓"; position: absolute; left: 0;
  color: #4ade80; font-weight: 700; font-size: 0.8rem;
}
.price-card .btn {
  display: block; text-align: center;
  padding: 0.6rem 1rem; border-radius: 8px;
  font-size: 0.85rem; font-weight: 600;
  width: 100%; box-sizing: border-box;
}
.btn-soon { opacity: 0.5; cursor: default; pointer-events: none; }
.pricing-detail {
  text-align: center; margin-top: 1rem;
}
.pricing-detail a {
  color: #FF0000; text-decoration: none; font-size: 0.85rem;
}
.pricing-detail a:hover { text-decoration: underline; }

/* ── Security page ─────────────────────────────────────────────────────── */
.security-page {
  max-width: 800px; margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}
.security-page h1 {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
  color: #fff; letter-spacing: -0.04em; margin-bottom: 1rem; text-align: center;
}
.security-page .intro-sub {
  color: #a1a1aa; font-size: 1.15rem; margin-bottom: 4rem; line-height: 1.6; text-align: center;
}
.security-section {
  margin-bottom: 4rem;
}
.security-section h2 {
  font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 1rem; border-bottom: 1px solid #1a1a1a; padding-bottom: 0.5rem;
}
.security-section p {
  color: #d4d4d8; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem;
}
.security-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;
}
.security-card {
  background: #111; border: 1px solid #2a2a2a; border-radius: 8px; padding: 1.5rem;
}
.security-card h3 {
  font-size: 1.1rem; color: #FF0000; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;
}
.security-card p {
  color: #a1a1aa; font-size: 0.85rem; margin-bottom: 0;
}
.security-links a {
  color: #FF0000; font-weight: 600; text-decoration: none;
}
.security-links a:hover {
  text-decoration: underline;
}

/* ── Contact page ──────────────────────────────────────────────────────── */
.contact-page {
  max-width: 640px; margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}
.contact-page h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800;
  color: #fff; letter-spacing: -0.04em; margin-bottom: 0.75rem;
}
.contact-page h1 .accent { color: #FF0000; }
.contact-page .contact-sub {
  color: #a1a1aa; font-size: 1rem; margin-bottom: 2.5rem; line-height: 1.6;
}
.contact-page .contact-sub a { color: #FF0000; }
.contact-page .contact-sub a:hover { text-decoration: underline; }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: 0.8rem; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.form-input, .form-select, .form-textarea {
  background: #111; border: 1px solid #2a2a2a;
  border-radius: 8px; padding: 0.75rem 1rem;
  color: #fdfdfd; font-size: 0.9rem; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%; outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #FF0000;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: #444; }
.form-select { appearance: none; cursor: pointer; }
.form-select option { background: #111; }
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.contact-submit {
  margin-top: 0.5rem; align-self: flex-start;
  padding: 0.8rem 2rem; font-size: 0.95rem;
}
.contact-success {
  display: none; background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 8px; padding: 1rem 1.25rem;
  color: #4ade80; font-size: 0.9rem;
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-submit { width: 100%; justify-content: center; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
  .bench-modes { grid-template-columns: 1fr; }
  .bench-val { font-size: 2rem; }
  .discount-grid { grid-template-columns: 1fr; }
  .deal-step { flex-direction: column; gap: 0.75rem; }
}

/* ── Enterprise page ───────────────────────────────────────────────────── */
.enterprise-page { max-width: 900px; margin: 0 auto; padding: 5rem 1.5rem 6rem; }
.enterprise-page h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800;
  color: #fff; letter-spacing: -0.04em; margin-bottom: 0.75rem;
}
.enterprise-page h1 .accent { color: #FF0000; }
.enterprise-sub { color: #a1a1aa; font-size: 1rem; margin-bottom: 2.5rem; line-height: 1.7; max-width: 640px; }
.enterprise-h2 { font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.enterprise-h3 {
  font-size: 1.05rem; font-weight: 700; color: #e5e5e5;
  margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.6rem;
}
.enterprise-section-sub { color: #a1a1aa; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; }

.deal-steps { display: flex; flex-direction: column; gap: 1.25rem; }
.deal-step {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; background: #0e0e0e;
  border: 1px solid #1f1f1f; border-radius: 12px;
}
.deal-step strong { display: block; color: #e5e5e5; font-size: 0.95rem; margin-bottom: 0.35rem; }
.deal-step p { color: #a1a1aa; font-size: 0.875rem; line-height: 1.65; margin: 0; }
.step-number {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
  background: #FF0000; color: #000; font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; margin-top: 0.1rem;
}

/* auto-fit collapses 3→2→1 columns as width shrinks. The earlier @media 1fr
   override lived BEFORE this base rule, so source order kept 3 columns on
   phones (cards became one-word-per-line); auto-fit fixes it width-driven. */
.discount-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.discount-item {
  background: #0e0e0e; border: 1px solid #2a2a2a;
  border-radius: 12px; padding: 1.5rem 1.25rem; text-align: center;
}
.discount-pct { font-size: 2.5rem; font-weight: 800; color: #FF0000; line-height: 1; }
.discount-pct span { font-size: 1.5rem; }
.discount-label { color: #a1a1aa; font-size: 0.8rem; line-height: 1.5; margin-top: 0.5rem; }
.discount-label strong { color: #e5e5e5; }
.discount-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  border-radius: 999px; padding: 0.2rem 0.6rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.discount-badge--year1 {
  background: rgba(255, 0, 0, 0.12); color: #FF0000;
  border: 1px solid rgba(255, 0, 0, 0.25);
}
.discount-badge--perm {
  background: rgba(74,222,128,0.08); color: #4ade80;
  border: 1px solid rgba(74,222,128,0.2);
}
.deal-callout {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: rgba(255, 0, 0, 0.05); border: 1px solid rgba(255, 0, 0, 0.18);
  border-radius: 12px; color: #a1a1aa; font-size: 0.9rem; line-height: 1.7;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
  max-width: 1200px; margin: 0 auto;
  border-top: 1px solid #1a1a1a;
  padding: 2rem 1.5rem 1.5rem;
}
.footer-inner {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 2rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.footer-brand p { color: #555; font-size: 0.85rem; margin-top: 0.3rem; }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.footer-links a { color: #555; font-size: 0.85rem; }
.footer-links a:hover { color: #FF0000; }
.copyright { color: #333; font-size: 0.75rem; }

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes termFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes typeLine {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes blink {
  50% { opacity: 0; }
}
.cursor {
  display: inline-block; width: 7px; height: 14px;
  background: #FF0000; vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

/* ── Accessibility utilities ───────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
  opacity: 1; transform: translateY(0);
}

/* ── Platform badges ───────────────────────────────────────────────────── */
.platform-row {
  display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 2rem;
  animation: fadeInUp 0.6s ease-out 0.35s both;
}
.platform-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: #888;
  background: #111; border: 1px solid #1e1e1e;
  border-radius: 6px; padding: 0.35rem 0.75rem;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.platform-badge:hover {
  color: #FF0000; border-color: rgba(255, 0, 0, 0.45);
  background: rgba(255, 0, 0, 0.06);
  transform: translateY(-1px);
}
.platform-badge svg { flex-shrink: 0; }
html[data-theme='light'] .platform-badge {
  color: #475569; background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .platform-badge:hover {
  color: #000000; background: #FFF5F5; border-color: #FF0000;
}

/* ── Hero Desktop CTA — platform-detected primary download button ────────── */
.hero-desktop-cta {
  max-width: 720px;
  margin: 1.75rem auto 1.5rem;
  text-align: center;
  animation: fadeInUp 0.6s ease-out 0.25s both;
}
.hero-desktop-cta__row {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.85rem; flex-wrap: wrap;
}
.hero-desktop-cta__primary {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.65rem;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(255, 0, 0, 0.18), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.hero-desktop-cta__primary:hover {
  box-shadow: 0 12px 32px rgba(255, 0, 0, 0.28), 0 1px 0 rgba(255,255,255,0.1) inset;
  transform: translateY(-1px);
}
.hero-desktop-cta__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.12); border-radius: 6px;
  color: inherit;
}
.hero-desktop-cta__icon svg { display: block; }
.hero-desktop-cta__secondary {
  padding: 0.85rem 1.25rem;
  font-size: 0.95rem;
}
.hero-desktop-cta__note {
  margin: 0.85rem auto 0;
  max-width: 560px;
  font-size: 0.82rem; color: #71717a; line-height: 1.55;
}
.hero-desktop-cta__note code {
  background: #18181b; border: 1px solid #27272a; color: #FF0000;
  padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.92em;
}
html[data-theme='light'] .hero-desktop-cta__note { color: #6b7280; }
html[data-theme='light'] .hero-desktop-cta__note code {
  background: #FFF5F5; border-color: #FF0000; color: #000000;
}
@media (max-width: 640px) {
  .hero-desktop-cta__primary { width: 100%; justify-content: center; }
  .hero-desktop-cta__secondary { width: 100%; justify-content: center; display: inline-flex; }
}
/* ── Hero scenario vignette — illustrative block scenario beneath CTAs ────── */
.hero-scenario-note {
  margin: 1rem auto 0;
  max-width: 480px;
  font-size: 0.8rem; color: #52525b; line-height: 1.5;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  background: #09090b; border: 1px solid #27272a; border-radius: 6px;
  padding: 0.5rem 0.9rem;
}
.hero-scenario-note code {
  background: transparent; color: #FF0000; font-size: 0.92em;
}
.hero-scenario-deny {
  color: #ef4444; font-weight: 700;
}
html[data-theme='light'] .hero-scenario-note {
  background: #fafafa; border-color: #e4e4e7; color: #52525b;
}
html[data-theme='light'] .hero-scenario-note code { color: #000000; }

/* ── Install tabs eyebrow — frames the CLI install row as alt-path ───────── */
.install-tabs-eyebrow {
  text-align: center;
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #71717a; margin: 0 0 0.75rem;
}
html[data-theme='light'] .install-tabs-eyebrow { color: #64748b; }

/* ── Install picker — Desktop, CLI, and Docker install cards ────────────── */
.install-picker {
  padding: 4rem 1.5rem 3rem;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 0, 0, 0.025) 50%, transparent 100%);
}
.install-picker__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.install-picker__head {
  text-align: center;
  margin-bottom: 2.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.install-picker__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #FF0000;
  background: rgba(255, 0, 0, 0.08);
  border: 1px solid rgba(255, 0, 0, 0.25);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.install-picker__title {
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-variation-settings: 'opsz' 64;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #fafafa;
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
.install-picker__lede {
  font-size: 1.02rem;
  color: #a1a1aa;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 580px;
  text-wrap: pretty;
}
.install-picker__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
/* SpotlightCard (src/client/components/reactbits/SpotlightCard.tsx) defaults
   to overflow-hidden on its wrapper div unless the caller passes
   overflowVisible: true — this call site doesn't, so the wrapper clips the
   "Recommended for you" badge (install-picker__card[data-recommended="1"]
   ::before, positioned top: -0.85rem, above). Un-clip here in CSS instead of
   touching Home.tsx: every direct child of .install-picker__cards is a
   SpotlightCard wrapper (or, pre-hydration, the plain .install-picker__card
   itself, which is overflow: visible by default already — a no-op for it). */
.install-picker__cards > div {
  overflow: visible;
}
@media (max-width: 1024px) {
  .install-picker__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .install-picker__cards { grid-template-columns: 1fr; }
}
.install-picker__card {
  position: relative;
  background: rgba(13,13,13,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  padding: 2rem 1.85rem 1.85rem;
  display: flex;
  flex-direction: column;
  /* Grid item: allow shrink below content min-width so a long CLI command can't
     blow the card (and therefore the 1fr track) wider than the mobile viewport. */
  min-width: 0;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.install-picker__card:hover {
  border-color: #2a2a2a;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.install-picker__card[data-recommended="1"]::before {
  content: 'Recommended for you';
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(180deg, #FF0000 0%, #FF0000 100%);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}
.install-picker__card--desktop[data-recommended="1"] {
  border-color: rgba(255, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.18), 0 12px 36px rgba(255, 0, 0, 0.1);
}
.install-picker__card-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.install-picker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.12) 0%, rgba(255, 0, 0, 0.04) 100%);
  border: 1px solid rgba(255, 0, 0, 0.25);
  border-radius: 12px;
  color: #FF0000;
}
.install-picker__icon--cli {
  background: linear-gradient(135deg, rgba(56,189,248,0.10) 0%, rgba(56,189,248,0.03) 100%);
  border-color: rgba(56,189,248,0.25);
  color: #38bdf8;
}
.install-picker__icon--docker {
  background: linear-gradient(135deg, rgba(34,197,94,0.10) 0%, rgba(34,197,94,0.03) 100%);
  border-color: rgba(34,197,94,0.25);
  color: #22c55e;
}
.install-picker__card-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a1a1aa;
  margin-bottom: 0.3rem;
}
.install-picker__card-title {
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fafafa;
  margin: 0;
}
.install-picker__card-title .accent { color: #FF0000; }
.install-picker__code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem;
  background: #18181b;
  border: 1px solid #27272a;
  color: #FF0000;
  padding: 0.05em 0.4em;
  border-radius: 6px;
  font-weight: 600;
}
.install-picker__recommended {
  display: none;
}
.install-picker__card-lede {
  font-size: 0.92rem;
  color: #a1a1aa;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.install-picker__features {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.install-picker__features li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: #d4d4d8;
  line-height: 1.5;
}
.install-picker__features li code {
  background: #18181b;
  border: 1px solid #27272a;
  color: #FF0000;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  font-size: 0.92em;
}
.install-picker__features li strong { color: #fafafa; font-weight: 600; }
.install-picker__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px; height: 16px;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.install-picker__cli-cmd {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  background: #050505;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 1.25rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  color: #FF0000;
  cursor: text;
}
.install-picker__cli-cmd code {
  flex: 1 1 auto;
  /* Without min-width:0 a flex item refuses to shrink below its content's
     min-content width — so the nowrap command forced the whole card wide on
     mobile instead of letting overflow-x:auto scroll the command in place. */
  min-width: 0;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  overflow-x: auto;
}
.install-picker__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid #27272a;
  border-radius: 5px;
  color: #d4d4d8;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.install-picker__copy:hover {
  color: #FF0000;
  border-color: rgba(255, 0, 0, 0.45);
  background: rgba(255, 0, 0, 0.06);
}
.install-picker__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
/* Let the primary CTA shrink + wrap its label on very narrow phones (≤~340px)
   instead of overflowing the card; it stays content-width when there's room. */
.install-picker__primary { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.install-picker__cta-row .btn { max-width: 100%; }
.install-picker__alt {
  font-size: 0.86rem;
  color: #a1a1aa;
  text-decoration: none;
  transition: color 0.15s;
}
.install-picker__alt:hover { color: #FF0000; }
.install-picker__footnote {
  margin: 1.05rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed #1e1e1e;
  font-size: 0.76rem;
  color: #a1a1aa;
  line-height: 1.5;
}

html[data-theme='light'] .install-picker {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 0, 0, 0.04) 50%, transparent 100%);
}
html[data-theme='light'] .install-picker__title { color: #0f172a; }
html[data-theme='light'] .install-picker__lede { color: #475569; }
html[data-theme='light'] .install-picker__card {
  background: #ffffff;
  border-color: #e5e7eb;
}
html[data-theme='light'] .install-picker__card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 12px 32px rgba(15,23,42,0.08);
}
html[data-theme='light'] .install-picker__card--desktop[data-recommended="1"] {
  border-color: rgba(255, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.2), 0 12px 36px rgba(255, 0, 0, 0.12);
}
html[data-theme='light'] .install-picker__icon {
  background: linear-gradient(135deg, #FFF5F5 0%, #ffffff 100%);
  border-color: #FF0000;
  color: #000000;
}
html[data-theme='light'] .install-picker__icon--cli {
  background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
  border-color: #bae6fd;
  color: #0369a1;
}
html[data-theme='light'] .install-picker__icon--docker {
  background: linear-gradient(135deg, #dcfce7 0%, #ffffff 100%);
  border-color: #bbf7d0;
  color: #15803d;
}
html[data-theme='light'] .install-picker__card-eyebrow { color: #64748b; }
html[data-theme='light'] .install-picker__card-title { color: #0f172a; }
html[data-theme='light'] .install-picker__card-title .accent { color: #000000; }
html[data-theme='light'] .install-picker__code {
  background: #FFF5F5;
  border-color: #FF0000;
  color: #000000;
}
html[data-theme='light'] .install-picker__card-lede { color: #475569; }
html[data-theme='light'] .install-picker__features li { color: #334155; }
html[data-theme='light'] .install-picker__features li strong { color: #0f172a; }
html[data-theme='light'] .install-picker__features li code {
  background: #FFF5F5;
  border-color: #FF0000;
  color: #000000;
}
html[data-theme='light'] .install-picker__cli-cmd {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #000000;
}
html[data-theme='light'] .install-picker__copy {
  border-color: #e5e7eb;
  color: #64748b;
}
html[data-theme='light'] .install-picker__copy:hover {
  color: #000000;
  border-color: #FF0000;
  background: #FFF5F5;
}
html[data-theme='light'] .install-picker__alt { color: #475569; }
html[data-theme='light'] .install-picker__alt:hover { color: #000000; }
html[data-theme='light'] .install-picker__footnote {
  color: #64748b;
  border-top-color: #e5e7eb;
}

/* ── Editor extension strip (under the two install cards) ─────────────────── */
.install-picker__editor-strip {
  display: block;
  margin: 1.5rem auto 0;
  max-width: 1100px;
  background: linear-gradient(135deg, rgba(0,120,215,0.06) 0%, rgba(99,102,241,0.04) 100%);
  border: 1px solid rgba(0,120,215,0.22);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.install-picker__editor-strip:hover {
  border-color: rgba(0,120,215,0.55);
  background: linear-gradient(135deg, rgba(0,120,215,0.11) 0%, rgba(99,102,241,0.08) 100%);
  transform: translateY(-1px);
}
.install-picker__editor-strip-inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.install-picker__editor-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(0,120,215,0.12);
  border: 1px solid rgba(0,120,215,0.25);
  border-radius: 10px;
}
.install-picker__editor-text { flex: 1; min-width: 0; }
.install-picker__editor-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 0.25rem;
}
.install-picker__editor-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.install-picker__editor-title strong { color: #fff; font-weight: 700; }
.install-picker__editor-lede {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.55;
}
.install-picker__editor-lede code {
  background: rgba(0,120,215,0.12);
  border: 1px solid rgba(0,120,215,0.25);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.95em;
  color: #93c5fd;
}
.install-picker__editor-arrow {
  flex-shrink: 0;
  font-size: 1.5rem;
  color: #60a5fa;
  font-weight: 300;
  transition: transform .15s ease;
}
.install-picker__editor-strip:hover .install-picker__editor-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .install-picker__editor-strip-inner { flex-wrap: wrap; }
  .install-picker__editor-arrow { display: none; }
}

html[data-theme='light'] .install-picker__editor-strip {
  background: linear-gradient(135deg, rgba(0,120,215,0.04) 0%, rgba(99,102,241,0.03) 100%);
  border-color: rgba(0,120,215,0.25);
}
html[data-theme='light'] .install-picker__editor-strip:hover {
  border-color: #0078d7;
  background: linear-gradient(135deg, rgba(0,120,215,0.08) 0%, rgba(99,102,241,0.05) 100%);
}
html[data-theme='light'] .install-picker__editor-eyebrow { color: #0369a1; }
html[data-theme='light'] .install-picker__editor-title { color: #0f172a; }
html[data-theme='light'] .install-picker__editor-title strong { color: #0f172a; }
html[data-theme='light'] .install-picker__editor-lede { color: #475569; }
html[data-theme='light'] .install-picker__editor-lede code {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1;
}
html[data-theme='light'] .install-picker__editor-arrow { color: #0078d7; }

/* ── Moat pillars strip ──────────────────────────────────────────────────── */
.b-moat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  max-width: 1100px; margin: 0 auto 2rem;
  padding: 0 1rem;
}
.b-moat-pillar {
  background: rgba(20,20,20,0.6); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  padding: 1.5rem 1.25rem; border-top-width: 2px;
}
.b-moat-pillar--engine { border-top-color: #ec4899; }
.b-moat-pillar--agents { border-top-color: #8b5cf6; }
.b-moat-pillar--hub { border-top-color: #FF0000; }
.b-moat-icon { display: block; font-size: 1.5rem; margin-bottom: 0.5rem; line-height: 1; }
.b-moat-title { font-weight: 700; font-size: 0.95rem; color: #fff; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.b-moat-metric {
  background: linear-gradient(90deg, #ec4899, #8b5cf6, #FF0000);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 0.5rem; display: block;
}
.b-moat-body { font-size: 0.8rem; color: #888; line-height: 1.55; }
.b-moat-body code { font-family: 'SF Mono','Fira Code',monospace; color: #a1a1aa; font-size: 0.78rem; }
/* ── Comparison table ─────────────────────────────────────────────────── */
.benchmark-section {
  background: #0d0d0d; border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  padding: 3rem 1.5rem;
}
.benchmark-header { text-align: center; margin-bottom: 2rem; }
.benchmark-header h2 {
  font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 700; color: #fff;
  letter-spacing: -0.02em; margin-bottom: 0.4rem;
}
.b-compare-summary {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-top: 0.9rem; padding: 0.4rem 0.9rem;
  background: rgba(20,20,20,0.6); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; font-size: 0.78rem;
}
.b-summary-chip {
  font-weight: 700; letter-spacing: 0.02em;
  padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem;
}
.b-summary-chip--win {
  color: #4ade80; background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.3);
}
.b-summary-sep { color: #444; }
.b-summary-text { color: #a1a1aa; }
.b-compare-wrap {
  position: relative; max-width: 1100px; margin: 0 auto;
  padding: 0.5rem 1rem 1.5rem;
}
.b-glow-blob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 50%; height: 120%;
  background: radial-gradient(circle, rgba(236,72,153,0.15) 0%, rgba(139,92,246,0.15) 30%, rgba(255, 0, 0, 0.15) 60%, transparent 80%);
  filter: blur(80px);
  z-index: 0; pointer-events: none;
}
.b-compare-scroll {
  position: relative; z-index: 1;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.b-compare-scroll::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 2.5rem; pointer-events: none; opacity: 0;
  background: linear-gradient(to left, #0d0d0d, transparent);
  transition: opacity 0.2s;
}
.b-compare-table {
  width: 100%; min-width: 580px; border-collapse: collapse;
}
.b-compare-header {
  padding: 1rem 1rem 0.9rem; font-weight: 700; font-size: 0.72rem;
  color: #888; letter-spacing: 0.06em;
  border-bottom: 2px solid #222; text-align: center;
  vertical-align: bottom;
}
.b-compare-header--feature { text-transform: uppercase; }
.b-col-title {
  display: block; font-size: 0.95rem; font-weight: 700; color: #e4e4e7;
  letter-spacing: -0.01em; text-transform: none;
}
.b-col-sub {
  display: block; font-size: 0.7rem; font-weight: 500; color: #666;
  margin-top: 0.2rem; letter-spacing: 0;
}
.b-compare-header--hl {
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 2px solid #ec4899;
}
.b-compare-header--hl .b-col-title {
  color: #fff; text-shadow: 0 0 12px rgba(236,72,153,0.5);
}
.b-compare-header--hl .b-col-sub {
  color: #ec4899; opacity: 0.8;
}
.b-compare-cell {
  padding: 1.25rem 1.25rem; border-bottom: 1px solid #1a1a1a;
  vertical-align: middle;
  transition: background 0.2s;
}
.b-compare-feature {
  font-weight: 700; color: #fff; font-size: 0.95rem; text-align: left;
  white-space: nowrap;
}
.b-compare-base { text-align: center; color: #555; background: rgba(0,0,0,0.2); }
.b-compare-table tbody tr:nth-child(even) .b-compare-feature,
.b-compare-table tbody tr:nth-child(even) .b-compare-base { background: rgba(255,255,255,0.015); }
.b-compare-hl {
  text-align: center;
  background: rgba(20,20,20,0.6); backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,0.05); border-right: 1px solid rgba(255,255,255,0.05);
}
.b-compare-table tbody tr:last-child .b-compare-cell { border-bottom: none; }
.b-compare-table tbody tr:last-child .b-compare-hl {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.b-compare-table tbody tr:hover .b-compare-feature { color: #FF0000; }
.b-compare-table tbody tr:hover .b-compare-hl {
  background: rgba(30,30,30,0.8);
  box-shadow: 0 0 0 1px rgba(236,72,153,0.3) inset;
}
.b-metric {
  display: block; font-size: 1.1rem; font-weight: 800; color: #fff;
  line-height: 1.2; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.b-metric--dim { color: #6b7280; font-weight: 700; }
.b-metric--glow {
  background: linear-gradient(90deg, #ec4899, #8b5cf6, #FF0000);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.b-detail {
  display: block; font-size: 0.78rem; color: #777;
  margin-top: 0.3rem; line-height: 1.35;
}
.b-detail-link {
  color: #FF0000; text-decoration: none; border-bottom: 1px dotted rgba(255, 0, 0, 0.4);
  font-family: 'SF Mono','Fira Code',monospace; font-size: 0.75rem;
}
.b-detail-link:hover { color: #FF0000; border-bottom-color: #FF0000; }
.b-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-size: 0.95rem; font-weight: 700; line-height: 1;
  margin-bottom: 0.4rem;
}
.b-status--win {
  color: #4ade80; background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.3);
  box-shadow: 0 0 0 3px rgba(74,222,128,0.04);
}
.b-status--partial {
  color: #FF0000; background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
}
.b-status--fail {
  color: #6b7280; background: rgba(107,114,128,0.08);
  border: 1px solid rgba(107,114,128,0.2);
}
.b-compare-pill { display: none; }
.b-compare-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 2rem; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.b-compare-cta-btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(90deg, #FF0000 0%, #FF0000 20%, #FF0000 50%, #FF0000 80%, #FF0000 100%);
  background-size: 300% 100%;
  color: #0a0a0a; font-weight: 800; font-size: 0.92rem; letter-spacing: -0.01em;
  border-radius: 10px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s;
  animation: bCompareCtaShift 5s ease-in-out infinite;
  overflow: hidden;
}
.b-compare-cta-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: bCompareCtaSheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bCompareCtaShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes bCompareCtaSheen {
  0%, 60%, 100% { transform: translateX(-100%); }
  75%           { transform: translateX(100%); }
}
.b-compare-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  animation-duration: 2.5s;
}
.b-compare-cta-arrow { transition: transform 0.15s; position: relative; z-index: 1; }
.b-compare-cta-btn > * { position: relative; z-index: 1; }
.b-compare-cta-btn:hover .b-compare-cta-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .b-compare-cta-btn { animation: none; background-position: 50% 50%; }
  .b-compare-cta-btn::before { animation: none; display: none; }
}
.b-compare-cta-hint {
  font-size: 0.78rem; color: #777;
}
.b-compare-cta-hint code {
  color: #d4d4d8; font-family: 'SF Mono','Fira Code',monospace; font-size: 0.75rem;
  background: rgba(255,255,255,0.04); padding: 0.1rem 0.4rem; border-radius: 4px;
}
/* ── SHAKEDOWN agent-containment benchmark band (links to bench.sigmashake.com) ─ */
/* Scope numbers mirror sigmashake-bench CORPUS_META (corpus v1.1.0); the live
   matrix + leaderboard at bench.sigmashake.com is the source of truth. */
.sd-band {
  max-width: 1080px; margin: 0 auto; padding: 1.9rem 1.7rem 2rem;
  background: linear-gradient(180deg, rgba(227,55,46,0.07), rgba(18,18,20,0.5));
  border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
  position: relative; overflow: hidden;
}
.sd-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #e3372e, #FF0000, #4ade80); opacity: 0.85;
}
.sd-eyebrow {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #ff7a72; border: 1px solid rgba(227,55,46,0.3); background: rgba(227,55,46,0.08);
  border-radius: 999px; padding: 0.25rem 0.7rem; margin-bottom: 0.85rem;
}
.sd-band h2 {
  font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 700; color: #fff;
  letter-spacing: -0.02em; margin: 0 0 0.55rem;
}
.sd-lede { color: #a1a1aa; font-size: 0.95rem; line-height: 1.55; max-width: 700px; margin: 0 0 1.45rem; }
.sd-scope {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; overflow: hidden; margin-bottom: 1.35rem;
}
.sd-stat { background: #0e0e10; padding: 0.9rem 1rem; }
.sd-stat .n {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(135deg, #fff, #ff9d96);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sd-stat .n small { font-size: 0.95rem; color: #71717a; -webkit-text-fill-color: #71717a; }
.sd-stat .l { font-size: 0.67rem; color: #71717a; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.35rem; }
.sd-tactics { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 1.45rem; }
.sd-tactics .tl { font-size: 0.72rem; color: #71717a; margin-right: 0.2rem; }
.sd-chip {
  font-size: 0.72rem; color: #d4d4d8; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 0.22rem 0.55rem; font-weight: 600;
}
.sd-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.sd-cta {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem;
  color: #000000; background: #ff0000; border-radius: 10px;
  padding: 0.62rem 1.15rem; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
}
.sd-cta:hover, .sd-cta:active, .sd-cta:focus-visible { color: #000000; background: #ff0000; }
.sd-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,0,0,0.4); }
.sd-cta-2 { color: #d4d4d8; font-size: 0.82rem; text-decoration: none; border-bottom: 1px solid transparent; }
.sd-cta-2:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.3); }
.sd-cta-hint { font-size: 0.76rem; color: #777; }
@media (max-width: 768px) {
  .sd-band { border-radius: 14px; padding: 1.4rem 1.1rem 1.6rem; }
}
/* ── SHAKEDOWN verdict band — top-of-page "which guardrail is better" ──────── */
/* Band numbers come from the committed SHAKEDOWN records. The overlay-model
   score and the real-engine score are separate runs. Competitor rows are modeled. */
.vb-band {
  max-width: 1080px; margin: 0 auto; padding: 2rem 1.8rem 2.1rem;
  background: linear-gradient(160deg, rgba(74,222,128,0.07), rgba(18,18,20,0.55));
  border: 1px solid rgba(74,222,128,0.22); border-radius: 18px;
  position: relative; overflow: hidden;
}
.vb-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #4ade80, #FF0000, #e3372e); opacity: 0.9;
}
.vb-eyebrow {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #86efac; border: 1px solid rgba(74,222,128,0.3); background: rgba(74,222,128,0.08);
  border-radius: 999px; padding: 0.25rem 0.7rem; margin-bottom: 0.9rem;
}
.vb-band h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem); font-weight: 800; color: #fff;
  letter-spacing: -0.025em; margin: 0 0 0.55rem;
}
.vb-hl { background: linear-gradient(135deg, #4ade80, #86efac); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vb-lede { color: #a1a1aa; font-size: 0.95rem; line-height: 1.55; max-width: 760px; margin: 0 0 1.5rem; }
.vb-lede strong { color: #e4e4e7; }
.vb-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: start; }
.vb-board { display: flex; flex-direction: column; gap: 0.55rem; }
.vb-row { display: grid; grid-template-columns: minmax(118px,1fr) 1.3fr auto; align-items: center; gap: 0.8rem; }
.vb-name { font-size: 0.84rem; color: #d4d4d8; font-weight: 600; white-space: normal; line-height: 1.35; }
.vb-name small { color: #71717a; font-weight: 400; font-size: 0.72rem; }
.vb-me .vb-name { color: #4ade80; font-weight: 800; }
.vb-track { height: 10px; background: #0c0c0e; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.vb-track > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#FF0000,#71717a); }
.vb-me .vb-track > i { background: linear-gradient(90deg,#22c55e,#4ade80); }
.vb-sc { font-size: 0.9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #e4e4e7; min-width: 2.6rem; text-align: right; }
.vb-me .vb-sc { color: #4ade80; }
.vb-scale { font-size: 0.72rem; color: #71717a; margin-top: 0.35rem; line-height: 1.4; }
.vb-scale span { color: #a1a1aa; }
.vb-diffs { display: flex; flex-direction: column; gap: 0.7rem; }
.vb-diff { display: flex; gap: 0.7rem; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 0.7rem 0.85rem; }
.vb-di { font-size: 1.05rem; line-height: 1.3; }
.vb-dt { font-size: 0.84rem; font-weight: 700; color: #fff; }
.vb-dd { font-size: 0.78rem; color: #a1a1aa; line-height: 1.45; margin-top: 0.15rem; }
.vb-dd strong { color: #e4e4e7; }
.vb-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 1.5rem; }
.vb-foot { font-size: 0.74rem; color: #777; }
.vb-foot a { color: #a1a1aa; }
@media (max-width: 768px) {
  .vb-band { border-radius: 14px; padding: 1.5rem 1.1rem 1.7rem; }
  .vb-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}
/* ── Mobile compare: moat pillars stack, table scrolls ──────────────────── */
@media (max-width: 768px) {
  .b-moat-strip { grid-template-columns: 1fr; padding: 0; }
  .b-compare-wrap { padding: 0 0 1rem; }
  .b-compare-scroll::after { opacity: 1; }
  .b-glow-blob { display: none; }
  .b-compare-summary { flex-wrap: wrap; justify-content: center; gap: 0.4rem; font-size: 0.72rem; }
  .b-col-title { font-size: 0.8rem; }
  .b-col-sub { font-size: 0.62rem; }
  .b-metric { font-size: 0.95rem; }
  .b-detail { font-size: 0.7rem; }
  .b-status { width: 1.3rem; height: 1.3rem; font-size: 0.85rem; }
  .b-compare-cta { flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
  .b-compare-cta-hint { font-size: 0.7rem; text-align: center; }
  .b-compare-cta-hint code { font-size: 0.68rem; }
}

/* ── Ecosystem section ─────────────────────────────────────────────────── */
.ecosystem-section {
  max-width: 1100px; margin: 0 auto;
  padding: 5rem 1.5rem;
  border-top: 1px solid #1a1a1a;
}
.ecosystem-section h2 {
  text-align: center; font-size: 1.5rem; color: #fff;
  margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.ecosystem-section .section-sub {
  text-align: center; color: #a1a1aa; font-size: 1.15rem; font-weight: 500;
  margin-bottom: 2.5rem;
}
.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.eco-card {
  background: rgba(255,255,255,0.02); backdrop-filter: blur(10px);
  border: 1px solid #2a2a2a; border-top: 1px solid #333;
  border-radius: 12px; padding: 2rem; position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none; color: inherit; display: block;
  overflow: hidden;
}
.eco-card::before {
  content: ''; position: absolute; inset: 0; 
  background: linear-gradient(145deg, rgba(255,255,255,0.04), transparent); 
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.eco-card:hover {
  border-color: #4a4a4a; border-top: 2px solid #FF0000;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(255, 0, 0, 0.06);
}
.eco-card:hover::before { opacity: 1; }
.eco-icon {
  width: 40px; height: 40px;
  background: rgba(255, 0, 0, 0.12); border: 1px solid rgba(255, 0, 0, 0.25);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem; color: #FF0000;
}
.eco-card h3 {
  font-size: 1.15rem; color: #fdfdfd; font-weight: 700; margin-bottom: 0.6rem; letter-spacing: -0.01em;
}
.eco-card p {
  font-size: 0.9rem; color: #a1a1aa; line-height: 1.6; margin-bottom: 1rem;
}
.eco-card-link {
  font-size: 0.85rem; color: #FF0000; opacity: 0.8; font-weight: 600;
}
.eco-card:hover .eco-card-link { opacity: 1; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   INCIDENT DISPATCH — /articles listing
   ═══════════════════════════════════════════════════════════════════════════ */

.dispatch {
  --d-bg:        #0a0a0a;
  --d-surface:   #0f0f0f;
  --d-surface-2: #141414;
  --d-border:    #1e1e1e;
  --d-border-2:  #2a2a2a;
  --d-text:      #e4e4e7;
  --d-text-dim:  #a1a1aa;
  --d-muted:     #6b7280;
  --d-heading:   #fafafa;
  --d-accent:    #FF0000;
  --d-accent-2:  #FF0000;
  --d-mono:      'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --d-serif:     'Newsreader', 'Source Serif Pro', Georgia, serif;

  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.75rem 6rem;
  color: var(--d-text);
}
html[data-theme='light'] .dispatch {
  --d-bg: #FFFFFF; --d-surface: #FFFFFF; --d-surface-2: #F9F9FB;
  --d-border: rgba(60,60,67,0.12); --d-border-2: rgba(60,60,67,0.22);
  --d-text: rgba(0,0,0,0.82); --d-text-dim: rgba(60,60,67,0.62); --d-muted: rgba(60,60,67,0.5);
  --d-heading: rgba(0,0,0,0.92); --d-accent: #FF0000; --d-accent-2: #FF0000;
}
@media (max-width: 640px) { .dispatch { padding: 0 1rem 4rem; } }

/* ── Masthead ── */
.dispatch-masthead {
  border-bottom: 1px solid var(--d-border);
  padding: 3.25rem 0 2.5rem;
}
.dispatch-masthead__inner { max-width: 980px; }
.dispatch-masthead__marque {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--d-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin-bottom: 2rem;
}
.dispatch-masthead__live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 999px;
  color: #f87171;
  background: rgba(239,68,68,0.06);
  font-weight: 700;
}
.dispatch-masthead__live-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
  animation: dispatch-pulse 1.4s ease-in-out infinite;
}
@keyframes dispatch-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.dispatch-masthead__sep { color: var(--d-border-2); }
.dispatch-masthead__pub { font-weight: 600; color: var(--d-text-dim); }
.dispatch-masthead__title {
  font-family: var(--d-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--d-heading);
  margin: 0 0 1.1rem;
}
.dispatch-masthead__title-alt {
  font-style: italic;
  color: var(--d-accent);
}
.dispatch-masthead__lede {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--d-text-dim);
  max-width: 68ch;
  margin: 0 0 2.25rem;
}
.dispatch-masthead__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 2.25rem;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--d-border);
}
.dispatch-masthead__stat { margin: 0; }
.dispatch-masthead__stat dt {
  font-family: var(--d-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin-bottom: 0.3rem;
}
.dispatch-masthead__stat dd {
  margin: 0;
  font-family: var(--d-mono);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--d-heading);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .dispatch-masthead__stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* ── Live feed ticker ── */
.dispatch-feed {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--d-border);
  overflow: hidden;
  position: relative;
}
.dispatch-feed__label {
  flex-shrink: 0;
  font-family: var(--d-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
  padding-right: 0.8rem;
  border-right: 1px solid var(--d-border);
}
.dispatch-feed__rail {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dispatch-feed__rail::-webkit-scrollbar { display: none; }
.dispatch-feed__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s;
  font-size: 0.82rem;
}
.dispatch-feed__item:hover { transform: translateX(2px); }
.dispatch-feed__sev,
.dispatch-feed__id {
  font-family: var(--d-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.dispatch-feed__id { color: var(--d-muted); }
.dispatch-feed__title {
  color: var(--d-text);
  font-weight: 500;
  max-width: 44ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dispatch-feed__item:hover .dispatch-feed__title { color: var(--d-accent); }

/* ── Controls ── */
.dispatch-controls {
  padding: 1.5rem 0 0.75rem;
  border-bottom: 1px solid var(--d-border);
}
.dispatch-controls__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.dispatch-controls__row--tools { gap: 1rem; margin-top: 0.5rem; }
.dispatch-controls__row--filters { row-gap: 0.4rem; }
.dispatch-controls__row--status {
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  font-family: var(--d-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--d-muted);
  text-transform: uppercase;
}
.dispatch-status {
  font-family: var(--d-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--d-muted);
  text-transform: uppercase;
}

.dispatch-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}
.dispatch-filters--agents { gap: 0.3rem; }

.dispatch-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--d-text-dim);
  background: transparent;
  border: 1px solid var(--d-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.dispatch-chip:hover {
  color: var(--d-heading);
  border-color: var(--d-border-2);
  background: rgba(255,255,255,0.02);
}
.dispatch-chip--active {
  color: var(--d-heading);
  border-color: var(--d-accent);
  background: rgba(255, 0, 0, 0.08);
}
.dispatch-chip__dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--chip-dot, var(--d-muted));
  flex-shrink: 0;
}
.dispatch-chip--all { font-weight: 700; }
.dispatch-chip--agent { font-family: var(--d-mono); font-size: 0.72rem; letter-spacing: 0.02em; }

.dispatch-search {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}
.dispatch-search__icon {
  position: absolute;
  left: 0.85rem;
  color: var(--d-muted);
  pointer-events: none;
}
.dispatch-search__input {
  width: 100%;
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 8px;
  color: var(--d-text);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.55rem 2.75rem 0.55rem 2.4rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.dispatch-search__input:focus {
  border-color: var(--d-accent);
  background: var(--d-surface-2);
}
.dispatch-search__input::placeholder { color: var(--d-muted); }
.dispatch-search__kbd {
  position: absolute;
  right: 0.65rem;
  font-family: var(--d-mono);
  font-size: 0.7rem;
  color: var(--d-muted);
  background: var(--d-surface-2);
  border: 1px solid var(--d-border);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  pointer-events: none;
}

.dispatch-sort {
  display: inline-flex;
  border: 1px solid var(--d-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.dispatch-sort__btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--d-text-dim);
  background: transparent;
  border: none;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  border-right: 1px solid var(--d-border);
  transition: all 0.12s;
}
.dispatch-sort__btn:last-child { border-right: none; }
.dispatch-sort__btn:hover { color: var(--d-heading); background: rgba(255,255,255,0.03); }
.dispatch-sort__btn--active {
  color: var(--d-heading);
  background: rgba(255, 0, 0, 0.1);
}

.dispatch-clear {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--d-accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: auto;
}
.dispatch-clear:hover { color: var(--d-accent-2); }

/* ── Case grid ── */
.dispatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--d-border);
}
@media (max-width: 1024px) { .dispatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dispatch-grid { grid-template-columns: 1fr; } }

.dispatch-case {
  border-right: 1px solid var(--d-border);
  border-bottom: 1px solid var(--d-border);
  transition: background 0.15s;
}
@media (max-width: 1024px) {
  .dispatch-case:nth-child(2n) { border-right: none; }
}
@media (min-width: 1025px) {
  .dispatch-case:nth-child(3n) { border-right: none; }
}
@media (max-width: 640px)  {
  .dispatch-case { border-right: none; }
}
.dispatch-case:hover { background: rgba(255,255,255,0.015); }

.dispatch-case__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 1.5rem 1.75rem 1.6rem;
  gap: 0.85rem;
  height: 100%;
  min-height: 220px;
}
.dispatch-case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dispatch-case__id {
  font-family: var(--d-mono);
  font-size: 0.72rem;
  color: var(--d-muted);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.dispatch-case__sev {
  font-family: var(--d-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sev-color, var(--d-muted));
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--sev-color, #666) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sev-color, #666) 30%, transparent);
}
.dispatch-case__title {
  font-family: var(--d-serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--d-heading);
  margin: 0;
  transition: color 0.15s;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dispatch-case__link:hover .dispatch-case__title { color: var(--d-accent); }
.dispatch-case__desc {
  font-size: 0.875rem;
  color: var(--d-text-dim);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dispatch-case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.dispatch-case__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--d-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}
.dispatch-case__pill--dec {
  color: var(--dec-color, var(--d-text));
  background: color-mix(in srgb, var(--dec-color, #666) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dec-color, #666) 28%, transparent);
}
.dispatch-case__pill--cat {
  color: var(--cat-color, var(--d-text-dim));
  border: 1px solid var(--d-border);
}
.dispatch-case__pill-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--cat-color, var(--d-muted));
}
.dispatch-case__pill--agent {
  color: var(--d-text-dim);
  border: 1px solid var(--d-border);
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.dispatch-case__latency {
  margin-left: auto;
  font-family: var(--d-mono);
  font-size: 0.7rem;
  color: var(--d-muted);
  font-variant-numeric: tabular-nums;
}

.dispatch-empty {
  padding: 5rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--d-border);
}
.dispatch-empty__code {
  display: inline-block;
  font-family: var(--d-mono);
  font-size: 0.75rem;
  color: var(--d-muted);
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}
.dispatch-empty__msg { color: var(--d-text); font-size: 1rem; margin: 0 0 1rem; }
.dispatch-empty__reset {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--d-accent);
  background: transparent;
  border: 1px solid var(--d-accent);
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
}
.dispatch-empty__reset:hover { background: rgba(255, 0, 0, 0.1); }

/* ── Install CTA ── */
.dispatch-install {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3rem;
  margin-top: 4rem;
  padding: 3rem 2rem;
  border: 1px solid var(--d-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 0, 0, 0.08), transparent 50%),
    var(--d-surface);
}
@media (max-width: 1024px) {
  .dispatch-install { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; }
}
.dispatch-install__side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.dispatch-install__eyebrow {
  font-family: var(--d-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-accent);
  margin-bottom: 0.9rem;
  display: block;
}
.dispatch-install__title {
  font-family: var(--d-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--d-heading);
  margin: 0 0 1rem;
}
.dispatch-install__copy {
  color: var(--d-text-dim);
  font-size: 0.975rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
  max-width: 52ch;
}
.dispatch-install__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--d-accent);
  color: #0a0a0a;
  padding: 0.65rem 1.3rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  letter-spacing: -0.01em;
}
.dispatch-install__cta:hover { background: var(--d-accent-2); transform: translateY(-1px); }

.dispatch-install__code {
  background: #070707;
  border: 1px solid var(--d-border);
  border-radius: 10px;
  overflow: hidden;
  height: fit-content;
}
.dispatch-install__code-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--d-border);
  background: #0b0b0b;
}
.dispatch-install__code-dot {
  width: 10px; height: 10px; border-radius: 999px;
}
.dispatch-install__code-label {
  margin-left: auto;
  font-family: var(--d-mono);
  font-size: 0.7rem;
  color: var(--d-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dispatch-install__code-body {
  margin: 0;
  padding: 1rem 1.25rem;
  font-family: var(--d-mono);
  font-size: 0.82rem;
  color: #e4e4e7;
  line-height: 1.75;
  overflow-x: auto;
}
.dispatch-install__prompt { color: var(--d-accent); user-select: none; }
.dispatch-install__comment { color: var(--d-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   CASE REPORT — /articles/:slug detail
   ═══════════════════════════════════════════════════════════════════════════ */

.report {
  --r-bg:        #0a0a0a;
  --r-surface:   #0f0f0f;
  --r-surface-2: #141414;
  --r-border:    #1e1e1e;
  --r-border-2:  #2a2a2a;
  --r-text:      #c4c4c8;
  --r-text-strong: #f0f0f0;
  --r-heading:   #fafafa;
  --r-muted:     #8b8b97;
  --r-accent:    #FF0000;
  --r-accent-2:  #FF0000;
  --r-code-bg:   rgba(255, 0, 0, 0.08);
  --r-code-border: rgba(255, 0, 0, 0.18);
  --r-code-fg:   #FF0000;
  --r-pre-bg:    #070707;
  --r-pre-border: #222;
  --r-pre-fg:    #d4d4d8;
  --r-mono:      'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --r-serif:     'Newsreader', 'Source Serif Pro', Georgia, serif;

  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.75rem 6rem;
  color: var(--r-text);
}
html[data-theme='light'] .report {
  --r-bg: #FFFFFF; --r-surface: #FFFFFF; --r-surface-2: #F9F9FB;
  --r-border: rgba(60,60,67,0.12); --r-border-2: rgba(60,60,67,0.22);
  --r-text: rgba(0,0,0,0.82); --r-text-strong: rgba(0,0,0,0.92); --r-heading: rgba(0,0,0,0.92);
  --r-muted: rgba(60,60,67,0.5); --r-accent: #FF0000; --r-accent-2: #FF0000;
  --r-code-bg: rgba(255, 0, 0, 0.12); --r-code-border: rgba(255, 0, 0, 0.30); --r-code-fg: #000000;
  --r-pre-bg: #1d1d1f; --r-pre-border: rgba(0,0,0,0.12); --r-pre-fg: #e5e5e7;
}
@media (max-width: 640px) { .report { padding: 0 1rem 4rem; } }

/* ── Dispatch strip (narrow amber bar at top) ── */
.report-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--r-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r-muted);
  padding: 0.65rem 1rem;
  margin: 1.25rem 0 2rem;
  border-top: 2px solid var(--strip-sev, var(--r-accent));
  border-bottom: 1px solid var(--r-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--strip-sev, var(--r-accent)) 4%, transparent), transparent 70%);
}
.report-strip__tag {
  font-weight: 700;
  color: var(--r-text-strong);
}
.report-strip__id {
  font-weight: 600;
}
.report-strip__sev {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--strip-sev, var(--r-accent));
}
.report-strip__sev-dot {
  width: 6px; height: 6px; border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--strip-sev, var(--r-accent)) 20%, transparent);
}
.report-strip__pub {
  margin-left: auto;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
}

/* ── Breadcrumb ── */
.report-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--r-muted);
  margin-bottom: 1.5rem;
}
.report-breadcrumb__link {
  color: var(--r-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.report-breadcrumb__link:hover { color: var(--r-accent); }
.report-breadcrumb__sep { color: var(--r-border-2); }
.report-breadcrumb__cat { font-weight: 600; }
.report-breadcrumb__cur {
  font-family: var(--r-mono);
  color: var(--r-text);
  font-weight: 500;
  font-size: 0.78rem;
}

/* ── Header ── */
.report-header {
  max-width: 900px;
  margin-bottom: 2.25rem;
}
.report-title {
  font-family: var(--r-serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--r-heading);
  margin: 0 0 1rem;
}
.report-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--r-text);
  margin: 0;
  max-width: 68ch;
}

/* ── Stat strip ── */
.report-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 3rem;
  padding: 0;
  border-top: 1px solid var(--r-border);
  border-bottom: 1px solid var(--r-border);
}
.report-stats__item {
  margin: 0;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--r-border);
}
.report-stats__item:last-child { border-right: none; }
.report-stats__item dt {
  font-family: var(--r-mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-muted);
  margin-bottom: 0.35rem;
}
.report-stats__item dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--r-text-strong);
}
.report-stats__mono {
  font-family: var(--r-mono) !important;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.report-stats__unit { color: var(--r-muted); font-weight: 400; margin-left: 1px; font-size: 0.78rem; }
@media (max-width: 1024px) {
  .report-stats { grid-template-columns: repeat(3, 1fr); }
  .report-stats__item:nth-child(3n) { border-right: none; }
  .report-stats__item:nth-child(-n+3) { border-bottom: 1px solid var(--r-border); }
}
@media (max-width: 640px) {
  .report-stats { grid-template-columns: repeat(2, 1fr); }
  .report-stats__item { border-right: 1px solid var(--r-border); }
  .report-stats__item:nth-child(2n) { border-right: none; }
  .report-stats__item:nth-child(-n+4) { border-bottom: 1px solid var(--r-border); }
}

/* ── 3-col layout ── */
.report-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .report-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 2.5rem; }
  .report-toc-wrap { display: none; }
}
@media (max-width: 1024px) {
  .report-layout { grid-template-columns: 1fr; gap: 2rem; }
  .report-side { position: static; }
}

.report-toc-wrap {
  position: sticky;
  top: 80px;
}

/* TOC */
.report-toc {
  padding: 0 0 0 0;
  border-left: 1px solid var(--r-border);
  padding-left: 1rem;
}
.report-toc__label {
  font-family: var(--r-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-muted);
  margin-bottom: 0.9rem;
  font-weight: 700;
}
.report-toc__list { list-style: none; padding: 0; margin: 0; }
.report-toc__item { margin-bottom: 0.1rem; }
.report-toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  color: var(--r-muted);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.45;
  transition: color 0.15s;
}
.report-toc__num {
  font-family: var(--r-mono);
  font-size: 0.65rem;
  color: var(--r-border-2);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.report-toc__link:hover {
  color: var(--r-text-strong);
}
.report-toc__link:hover .report-toc__num { color: var(--r-muted); }
.report-toc__link--active {
  color: var(--r-accent) !important;
}
.report-toc__link--active .report-toc__num {
  color: var(--r-accent) !important;
}

/* Body */
.report-body {
  min-width: 0;
  max-width: 760px;
}

.report-body h1 { display: none; }
.report-body h2 {
  font-family: var(--r-serif);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--r-heading);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 3.25rem;
  margin-bottom: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--r-border);
  scroll-margin-top: 100px;
}
.report-body h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.report-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r-text-strong);
  letter-spacing: -0.01em;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}
.report-body p {
  font-size: 1rem;
  color: var(--r-text);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.report-body ul, .report-body ol {
  font-size: 1rem;
  color: var(--r-text);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.report-body li { margin-bottom: 0.4rem; }
.report-body li strong { color: var(--r-text-strong); }
.report-body strong { color: var(--r-text-strong); font-weight: 600; }
.report-body code {
  font-family: var(--r-mono);
  font-size: 0.85em;
  color: var(--r-code-fg);
  background: var(--r-code-bg);
  border: 1px solid var(--r-code-border);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.report-body pre {
  background: var(--r-pre-bg);
  border: 1px solid var(--r-pre-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.75rem;
}
.report-body pre code {
  color: var(--r-pre-fg);
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.7;
}
.report-body pre code.language-sigma,
.report-body pre code.language-bash,
.report-body pre code.language-shell { color: #a5f3fc; }
.report-body blockquote {
  background: rgba(255, 0, 0, 0.04);
  border-left: 3px solid var(--r-accent);
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.25rem;
  margin: 0 0 1.5rem;
  color: #d4b86e;
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
}
.report-body blockquote p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.report-body blockquote strong { color: #FF0000; font-style: normal; }
.report-body a { color: var(--r-accent); text-decoration: underline; text-underline-offset: 3px; }
.report-body a:hover { color: var(--r-accent-2); }
.report-body hr { border: none; border-top: 1px dashed var(--r-border); margin: 2.5rem 0; }

/* Signoff block at the bottom of body */
.report-signoff {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--r-border);
  border-radius: 12px;
  background: var(--r-surface);
}
.report-signoff__sigil {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--r-accent), #FF0000);
  color: #0a0a0a;
  font-family: var(--r-serif);
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.report-signoff__text { flex: 1; min-width: 0; }
.report-signoff__by { font-size: 0.9rem; color: var(--r-text); }
.report-signoff__by strong { color: var(--r-text-strong); font-weight: 700; }
.report-signoff__meta {
  font-family: var(--r-mono);
  font-size: 0.72rem;
  color: var(--r-muted);
  margin-top: 0.25rem;
  letter-spacing: 0.04em;
}
.report-signoff__meta code {
  background: none; border: none; padding: 0;
  color: var(--r-text-strong);
}
.report-signoff__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--r-border);
  color: var(--r-text-strong);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.report-signoff__copy:hover {
  border-color: var(--r-accent);
  color: var(--r-accent);
  background: rgba(255, 0, 0, 0.06);
}

/* Side panel */
.report-side {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.report-side__card {
  border: 1px solid var(--r-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  background: var(--r-surface);
}
.report-side__eyebrow {
  font-family: var(--r-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-muted);
  font-weight: 700;
  display: block;
  margin-bottom: 0.6rem;
}
.report-side__verdict {
  font-family: var(--r-serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--verdict-color, var(--r-text-strong));
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.report-side__verdict-caption {
  font-size: 0.8rem;
  color: var(--r-muted);
  margin: 0;
  line-height: 1.5;
}
.report-side__features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.report-side__feature {
  font-size: 0.8rem;
  color: var(--r-text);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.4;
}
.report-side__feature::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--r-accent);
  font-size: 0.7rem;
  top: 0.15em;
}
.report-side__empty { font-size: 0.8rem; color: var(--r-muted); margin: 0; font-style: italic; }
.report-side__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--r-accent);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  letter-spacing: -0.01em;
}
.report-side__cta:hover { background: var(--r-accent-2); transform: translateY(-1px); }
.report-side__cta-arrow { font-size: 1.1rem; }

/* Related */
.report-related {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--r-border);
}
.report-related__title {
  font-family: var(--r-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--r-heading);
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.report-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--r-border);
}
.report-related__item {
  display: grid;
  grid-template-columns: 72px 72px minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--r-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, padding-left 0.15s;
}
.report-related__item:hover {
  background: rgba(255,255,255,0.02);
  padding-left: 1rem;
}
.report-related__id {
  font-family: var(--r-mono);
  font-size: 0.78rem;
  color: var(--r-muted);
  font-weight: 600;
}
.report-related__sev {
  font-family: var(--r-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.report-related__title {
  font-family: var(--r-serif);
  font-size: 1.05rem;
  color: var(--r-text-strong);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-related__item:hover .report-related__title { color: var(--r-accent); }
.report-related__cat {
  font-family: var(--r-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .report-related__item {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.25rem;
    column-gap: 0.75rem;
    padding: 0.85rem 0.5rem;
  }
  .report-related__id { grid-row: 1; }
  .report-related__sev { grid-row: 1; grid-column: 2; margin-left: auto; }
  .report-related__title { grid-row: 2; grid-column: 1 / -1; white-space: normal; }
  .report-related__cat { display: none; }
}

/* Bottom CTA */
.report-bottom {
  margin-top: 4.5rem;
  border: 1px solid var(--r-border);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 100%, rgba(255, 0, 0, 0.1), transparent 50%),
    var(--r-surface);
}
.report-bottom__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
  padding: 2.75rem 2.5rem;
}
@media (max-width: 1024px) {
  .report-bottom__inner { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.5rem; }
}
.report-bottom__eyebrow {
  font-family: var(--r-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-accent);
  display: block;
  margin-bottom: 0.75rem;
}
.report-bottom__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--r-heading);
  margin: 0 0 0.75rem;
}
.report-bottom__copy {
  color: var(--r-text);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.report-bottom__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .report-bottom__actions { flex-direction: row; flex-wrap: wrap; }
}
.report-bottom__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9px;
  text-decoration: none;
  transition: all 0.15s;
  letter-spacing: -0.01em;
  min-width: 180px;
}
.report-bottom__cta--primary {
  background: var(--r-accent);
  color: #0a0a0a;
}
.report-bottom__cta--primary:hover { background: var(--r-accent-2); transform: translateY(-1px); }
.report-bottom__cta--ghost {
  background: transparent;
  color: var(--r-text-strong);
  border: 1px solid var(--r-border-2);
}
.report-bottom__cta--ghost:hover { border-color: var(--r-text); color: var(--r-heading); }

/* ── Security section ──────────────────────────────────────────────────── */
.security-section {
  max-width: 900px; margin: 0 auto;
  padding: 5rem 1.5rem;
  border-top: 1px solid #1a1a1a;
}
.security-section h2 {
  text-align: center; font-size: 1.5rem; color: #fff;
  margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.security-section .section-sub {
  text-align: center; color: #a1a1aa; font-size: 1.15rem; font-weight: 500;
  margin-bottom: 2.5rem;
}
.sec-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.sec-item {
  background: rgba(255,255,255,0.02); backdrop-filter: blur(10px);
  border: 1px solid #2a2a2a; border-top: 1px solid #333;
  border-radius: 12px; padding: 1.75rem;
  display: flex; gap: 1.25rem; align-items: flex-start;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sec-item:hover {
  border-color: #4a4a4a; border-top: 2px solid #4ade80;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(74,222,128,0.06);
}
.sec-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.sec-icon-green { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.25); color: #4ade80; }
.sec-icon-amber { background: rgba(255, 0, 0, 0.12); border: 1px solid rgba(255, 0, 0, 0.25); color: #FF0000; }
.sec-icon-blue  { background: rgba(125,211,252,0.12); border: 1px solid rgba(125,211,252,0.25); color: #7dd3fc; }
.sec-icon-red   { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); color: #f87171; }
.sec-item h3 {
  font-size: 1.05rem; color: #fdfdfd; font-weight: 700; margin-bottom: 0.4rem; letter-spacing: -0.01em;
}
.sec-item p {
  font-size: 0.88rem; color: #a1a1aa; line-height: 1.6; margin: 0;
}

/* ── DX section ────────────────────────────────────────────────────────── */
.dx-section {
  max-width: 1100px; margin: 0 auto;
  padding: 5rem 1.5rem;
  border-top: 1px solid #1a1a1a;
}
.dx-section h2 {
  text-align: center; font-size: 1.5rem; color: #fff;
  margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.dx-section .section-sub {
  text-align: center; color: #a1a1aa; font-size: 1.15rem; font-weight: 500;
  margin-bottom: 2.5rem;
}
.dx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.dx-card {
  background: rgba(255,255,255,0.02); backdrop-filter: blur(10px);
  border: 1px solid #2a2a2a; border-top: 1px solid #333;
  border-radius: 12px; padding: 2rem; position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.dx-card::before {
  content: ''; position: absolute; inset: 0; 
  background: linear-gradient(145deg, rgba(255,255,255,0.04), transparent); 
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.dx-card:hover {
  border-color: #4a4a4a; border-top: 2px solid #7dd3fc;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(125,211,252,0.06);
}
.dx-card:hover::before { opacity: 1; }
.dx-card-icon {
  font-size: 1.75rem; margin-bottom: 1.2rem; display: block;
}
.dx-card h3 {
  font-size: 1.2rem; color: #fdfdfd; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.01em;
}
.dx-card p {
  font-size: 0.95rem; color: #a1a1aa; line-height: 1.6; margin: 0;
}
.dx-card code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85em; color: #FF0000;
  background: rgba(255, 0, 0, 0.08); padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #app-root > header { padding: 1rem; }
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
  #app-root > header nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #0a0a0a; padding: 1rem; border-bottom: 1px solid #1a1a1a; gap: 0.5rem; z-index: 50; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
  #nav-menu.open { display: flex; }
  #app-root > header nav a { width: 100%; text-align: left; padding: 0.8rem 1rem; font-size: 1.05rem; border-radius: 6px; border-left: 2px solid transparent; }
  #app-root > header nav a:hover { border-left-color: #FF0000; background: rgba(255, 0, 0, 0.05); }
  /* Mobile: collapse immersive height; island skips iframe on <720px anyway */
  .hero { padding: 4rem 1rem 3rem; min-height: 0; }
  .hero-showcase-bg { display: none; }
  .install-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .terminal-body { padding: 1rem; font-size: 0.75rem; min-height: 280px; }
  .terminal-tab { padding: 0.5rem 0.6rem; font-size: 0.68rem; }
  .hub-grid { grid-template-columns: 1fr; }
  .pricing-cards { grid-template-columns: 1fr; }
  .compare-table { font-size: 0.85rem; }
  .compare-feature { font-size: 0.82rem; padding: 0.75rem 0.5rem; }
  .compare-cell { padding: 0.75rem 0.4rem; }
  .compare-detail { font-size: 0.65rem; }
  .compare-table thead th { padding: 0.75rem 0.5rem; font-size: 0.72rem; }
  .compare-product-name { font-size: 0.8rem; }
  .sec-grid { grid-template-columns: 1fr; }
  .dx-grid { grid-template-columns: 1fr; }
  .playground-section { padding: 0 0.5rem 2rem; }
  .playground-inner { padding: 1rem; }
  .playground-header h2 { font-size: 1.3rem; }
  .playground-sub { font-size: 0.85rem; }
  .pg-player-container { min-height: 280px; padding: 0.25rem; }
  .pg-preview-tabs { flex-wrap: nowrap; gap: 0; border-bottom: 1px solid #222; justify-content: flex-start; overflow-x: auto; }
  .pg-prev-tab { font-size: 0.8rem; padding: 0.5rem 0.75rem; white-space: nowrap; }
  .pg-player-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .pg-source-code-panel pre { padding: 1rem; font-size: 0.8rem; }
  .pg-dash-wrap.active { padding: 0.5rem; }
  .risk-layer-promise { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.75rem; }
  /* One chip per row on phones: full width gives the title room and keeps the
     absolute DENY/ASK/FORCE badge from overlapping it (it collided at 2-up). */
  .risk-scenario-chips { grid-template-columns: 1fr; gap: 0.5rem; }
  .risk-chip { padding: 0.7rem 3.6rem 0.7rem 0.8rem; min-height: 52px; }
  .risk-chip-title { white-space: normal; }
  .risk-chip-head { font-size: 0.78rem; }
  .risk-chip-sub { font-size: 0.62rem; }
  .risk-agent-grid { grid-template-columns: repeat(4, 1fr); }
  .risk-proof-summary { font-size: 0.82rem; padding: 0.85rem 1rem; }
  .risk-cta-buttons { flex-direction: column; }
  .risk-cta-primary, .risk-cta-secondary { width: 100%; justify-content: center; }
  .ssg-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .ssg-val { font-size: 1.5rem; }
  .ssg-table { font-size: 0.7rem; }
  .ssg-pending-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
@media (max-width: 480px) {
  .pg-player-container { min-height: 220px; }
  .playground-inner { padding: 0.75rem; }
}

/* ── Install box Tabs ───────────────────────────────────────────────────────── */
.install-tabs-wrap {
  display: flex; flex-direction: column; 
  max-width: 560px; margin: 0 auto 2.5rem;
  animation: fadeInUp 0.6s ease-out 0.3s both;
}
.install-tabs-nav {
  display: flex; gap: 0.5rem; justify-content: flex-start;
  margin-bottom: 0.5rem; padding-left: 0.5rem;
}
.install-tab {
  background: transparent; color: #a1a1aa; border: none;
  font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem;
  border-radius: 6px; cursor: pointer; transition: all 0.2s;
  text-decoration: none; display: inline-block;
}
.install-tab:hover { color: #fff; background: rgba(255,255,255,0.06); }
.install-tab.active { background: #222; color: #FF0000; box-shadow: 0 1px 3px rgba(0,0,0,0.3); border: 1px solid #333; }
.install-tab-link:hover { text-decoration: underline; }

/* ── Bracket motif — recurring [ … ] terminal frame, used as <span class="bracket">[</span>
   inside eyebrows + section markers. The site's design signature. ──────────── */
.bracket {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--color-brand, #FF0000);
  font-weight: 600;
  font-size: 0.85em;
  display: inline-block;
  transform: translateY(-0.04em);
  opacity: 0.85;
  margin: 0 0.18em;
}

/* ── Playground Tabs — terminal-command framing with auto-numbered prefix ─── */
.pg-preview-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #1a1a1a;
  margin: 0 0 1.25rem;
  padding: 0;
  background: linear-gradient(to bottom, #0a0a0a 0%, #060606 100%);
  counter-reset: tab-num;
}
.pg-prev-tab {
  position: relative;
  background: transparent;
  border: none;
  border-right: 1px solid #1a1a1a;
  color: #5a5a5a;
  padding: 0.85rem 1.15rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  counter-increment: tab-num;
}
.pg-prev-tab::before {
  content: '0' counter(tab-num);
  margin-right: 0.55em;
  color: #2f2f2f;
  font-weight: 600;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  transition: color 0.15s ease;
}
.pg-prev-tab:hover { color: #d4d4d8; background: rgba(255, 0, 0, 0.04); }
.pg-prev-tab:hover::before { color: var(--color-brand, #FF0000); }
.pg-prev-tab.active {
  color: #fff;
  background: rgba(255, 0, 0, 0.06);
}
.pg-prev-tab.active::before { color: var(--color-brand, #FF0000); }
.pg-prev-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, #FF0000 30%, #FF0000 70%, transparent 100%);
}
.pg-source-wrap, .pg-player-wrap, .pg-dash-wrap { display: none; }
.pg-player-wrap.active { display: block; }
.pg-source-wrap.active { display: flex; flex-direction: column; flex: 1; min-height: 400px; gap: 1.5rem; align-items: stretch; justify-content: flex-start; padding: 1.5rem 2rem; }
/* Live Dashboard panel: now hosts a CTA card linking to showcase.sigmashake.com. */
.pg-source-code-panel { display: flex; background: #282a36; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 12px; border: 1px solid #44475a; }
.pg-source-code-panel pre {
  background: transparent; border: none; padding: 1.5rem;
  overflow-x: auto; color: #f8f8f2; font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.05rem; text-align: left; margin: 0; width: 100%; min-width: 0; line-height: 1.4;
  /* The longest rule line (the quoted MESSAGE string) was only reachable via
     overflow-x scroll, which the operator's screenshot showed truncated at
     the right edge. pre defaults to white-space: pre (no wrap); switch to
     pre-wrap so every line is visible without requiring a scroll gesture.
     overflow-x: auto stays as a harmless fallback for any single token
     (e.g. a long unbroken path) that still can't fit on one line. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.pg-syntax-k { color: #c678dd; font-weight: 600; }
.pg-syntax-a { color: #e5c07b; font-weight: 600; }
.pg-syntax-p { color: #d19a66; }
.pg-syntax-n { color: #d19a66; }
.pg-syntax-b { color: #61afef; font-weight: 600; font-style: italic; }
.pg-syntax-s { color: #98c379; }
.pg-syntax-c { color: #5c6370; font-style: italic; }
.pg-syntax-i { color: #e06c75; }
.pg-syntax-o { color: #56b6c2; }
.pg-syntax-punc { color: #abb2bf; }
.pg-annotations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; border-top: 1px solid #2a2a2a; padding-top: 1.5rem; }
.pg-annot-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.pg-annot-badge { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.6rem; border-radius: 6px; border: 1px solid; }
.pg-annot-row p { font-size: 0.85rem; color: #a1a1aa; line-height: 1.55; margin: 0; }
.pg-dash-wrap.active {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
  position: relative;
  overflow: visible;
}

/* ── Dashboard Preview Card — replaces the embedded teaser. Links to showcase.sigmashake.com. */
.dash-preview {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) 1fr;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, #0d0d0d 0%, #080808 100%);
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  isolation: isolate;
}
.dash-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255, 0, 0, 0.08), transparent 55%),
    radial-gradient(120% 60% at 100% 100%, rgba(56,189,248,0.04), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.dash-preview:hover {
  border-color: rgba(255, 0, 0, 0.40);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255, 0, 0, 0.12);
}
.dash-preview:hover::before { opacity: 1; }

.dash-preview__media {
  position: relative;
  background: radial-gradient(80% 80% at 50% 60%, #111 0%, #060606 75%);
  border-right: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  isolation: isolate;
  min-height: 280px;
  z-index: 1;
}
.dash-preview__media-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 65%, rgba(255, 0, 0, 0.10) 0%, transparent 70%);
  z-index: 0;
}
.dash-preview__diagram {
  width: 100%;
  max-width: 380px;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6));
}

.dash-preview__copy {
  padding: 1.85rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}
.dash-preview__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: #FF0000;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.15rem;
}
.dash-preview__eyebrow .bracket {
  color: rgba(255, 0, 0, 0.6);
  font-weight: 700;
  margin: 0 0.25em;
}
.dash-preview__title {
  font-family: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  font-variation-settings: 'opsz' 64;
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.dash-preview__lede {
  font-size: 0.93rem;
  color: #a1a1aa;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
  max-width: 38ch;
}
.dash-preview__features {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.85rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px dashed #1e1e1e;
}
.dash-preview__features li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.81rem;
  color: #c4c4c4;
  font-feature-settings: 'tnum';
}
.dash-preview__feat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  color: var(--color-brand, #FF0000);
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 1.55em;
  display: inline-block;
}
.dash-preview__cta-row {
  margin-top: 0.95rem;
}
.dash-preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.05rem 0.7rem 1.1rem;
  border-radius: 6px;
  background: linear-gradient(180deg, #FF0000 0%, #FF0000 100%);
  color: #0a0a0a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 6px 18px rgba(255, 0, 0, 0.32);
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease;
}
.dash-preview__cta-label { letter-spacing: 0.02em; }
.dash-preview__cta-host {
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.55;
  border-left: 1px solid rgba(0,0,0,0.28);
  padding-left: 0.7rem;
  letter-spacing: 0;
  text-transform: lowercase;
}
.dash-preview__cta-arrow {
  font-size: 1rem;
  transition: transform 0.2s ease;
  font-weight: 800;
}
.dash-preview:hover .dash-preview__cta {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 10px 28px rgba(255, 0, 0, 0.50);
}
.dash-preview:hover .dash-preview__cta-arrow { transform: translateX(4px); }

@media (max-width: 768px) {
  .dash-preview { grid-template-columns: 1fr; }
  .dash-preview__media {
    border-right: none;
    border-bottom: 1px solid #1a1a1a;
    min-height: 200px;
    padding: 1.25rem;
  }
  .dash-preview__copy { padding: 1.4rem 1.5rem; gap: 0.65rem; }
  .dash-preview__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.7rem 1rem;
  }
  .dash-preview__cta-host {
    border-left: none;
    padding-left: 0;
    font-size: 0.62rem;
  }
}

/* ── Live teaser variant — hosts the React showcase island inline ────────── */
.dash-preview--live { cursor: default; }
.dash-preview--live:hover { transform: none; }
.dash-preview__media--live {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  min-height: 420px;
  background: #1e1e1f;
  flex-direction: column;
}
.dash-preview__chrome {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  background: rgba(8,8,8,0.85);
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
  z-index: 2;
}
.dash-preview__chrome-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
}
.dash-preview__chrome-host {
  margin-left: 0.55rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem; color: #71717a;
  letter-spacing: 0.02em;
}
.dash-preview__teaser-mount {
  flex: 1 1 auto;
  position: relative;
  min-height: 360px;
  background: #1e1e1f;
  overflow: hidden;
  isolation: isolate;
}
.dash-preview__teaser-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(235,235,245,0.4);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.05em;
}
.dash-preview__live-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin: 0 0.35em 0 0.55em;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: dashPreviewPulse 1.6s ease-out infinite;
  vertical-align: 1px;
}
@keyframes dashPreviewPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.dash-preview__cta-row {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.dash-preview__cta--primary {
  background: linear-gradient(180deg, #FF0000 0%, #FF0000 100%);
  color: #0a0a0a;
}
.dash-preview__cta:not(.dash-preview__cta--primary) {
  background: transparent;
  color: #d4d4d8;
  border: 1px solid #27272a;
  box-shadow: none;
}
.dash-preview__cta:not(.dash-preview__cta--primary):hover {
  border-color: rgba(255, 0, 0, 0.45);
  color: #FF0000;
  background: rgba(255, 0, 0, 0.04);
}
.dash-preview--live .dash-preview__cta { text-decoration: none; }
@media (max-width: 768px) {
  .dash-preview__media--live { min-height: 320px; }
  .dash-preview__teaser-mount { min-height: 260px; }
}
html[data-theme='light'] .dash-preview__media--live {
  background: #f8fafc;
}
html[data-theme='light'] .dash-preview__chrome {
  background: #ffffff;
  border-bottom-color: #e5e7eb;
}
html[data-theme='light'] .dash-preview__chrome-host { color: #64748b; }
html[data-theme='light'] .dash-preview__teaser-mount {
  background: #f8fafc;
}
html[data-theme='light'] .dash-preview__teaser-fallback { color: #64748b; }
html[data-theme='light'] .dash-preview__cta:not(.dash-preview__cta--primary) {
  color: #475569;
  border-color: #e5e7eb;
}
html[data-theme='light'] .dash-preview__cta:not(.dash-preview__cta--primary):hover {
  color: #000000;
  border-color: #FF0000;
  background: #FFF5F5;
}

/* Outer dash-preview card: switch to a true light surface so it stops
   reading as a dark card pasted onto a white page. */
html[data-theme='light'] .dash-preview {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 38px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.03);
}
html[data-theme='light'] .dash-preview__media {
  background: radial-gradient(80% 80% at 50% 60%, #ffffff 0%, #f1f5f9 75%);
  border-right-color: #e5e7eb;
}
html[data-theme='light'] .dash-preview__copy {
  color: #0f172a;
}
html[data-theme='light'] .dash-preview__title { color: #0f172a; }
html[data-theme='light'] .dash-preview__lede { color: #475569; }
html[data-theme='light'] .dash-preview__features { border-top-color: #e5e7eb; }
html[data-theme='light'] .dash-preview__features li { color: #334155; }
html[data-theme='light'] .dash-preview__feat-num { color: #000000; }
html[data-theme='light'] .dash-preview__eyebrow { color: #000000; }
html[data-theme='light'] .dash-preview__eyebrow .bracket { color: rgba(0, 0, 0, 0.55); }
@media (max-width: 768px) {
  html[data-theme='light'] .dash-preview__media {
    border-bottom-color: #e5e7eb;
  }
}

/* ── Gov-token bridge ─────────────────────────────────────────────────────
   The embedded gov dashboard (loaded via @gov/index.css inside the lazy
   showcase chunks) only declares its dark tokens via
     @media (prefers-color-scheme: dark) { :root:not([data-theme]) { … } }
   But sigmashake-web sets <html data-theme="dark"> explicitly, which makes
   :not([data-theme]) fail — so the embedded teaser previously rendered with
   gov's LIGHT defaults on a dark page (the contrast complaint). Mirror gov's
   dark tokens here under our own [data-theme='dark'] selector so the
   teaser, /desktop preview, and /showcase stage all match the host theme.
   We also map our [data-theme='light'] back onto the gov apple-light tokens
   to be defensive (gov's :root defaults are already light, so this is a
   no-op safety net rather than a fix). */
html[data-theme='dark'] {
  --color-brand: #FF0000;
  --color-brand-hover: #FF0000;
  --color-accent: #FF0000;
  --color-accent-on: #1F1300;
  --color-accent-tint: rgba(255, 0, 0, 0.18);
  --color-hig-blue: #0A84FF;
  --color-hig-blue-press: #0966C9;
  --color-hig-green: #30D158;
  --color-hig-indigo: #5E5CE6;
  --color-hig-orange: #FF0000;
  --color-hig-pink: #FF375F;
  --color-hig-purple: #BF5AF2;
  --color-hig-red: #FF453A;
  --color-hig-teal: #64D2FF;
  --color-hig-yellow: #FFD60A;
  --color-hig-mint: #66D4CF;
  --color-hig-cyan: #6AC4DC;
  --color-surface-0: #1E1E1F;
  --color-surface-1: #2A2A2D;
  --color-surface-2: #2C2C2E;
  --color-surface-3: #3A3A3D;
  --color-surface-4: #48484B;
  --color-line-0: rgba(84, 84, 88, 0.45);
  --color-line-1: rgba(84, 84, 88, 0.65);
  --color-line-2: rgba(120, 120, 128, 0.85);
  --color-fg-0: rgba(255, 255, 255, 0.96);
  --color-fg-1: rgba(255, 255, 255, 0.92);
  --color-fg-2: rgba(235, 235, 245, 0.62);
  --color-fg-3: rgba(235, 235, 245, 0.40);
  --color-fg-4: rgba(235, 235, 245, 0.20);
  --color-fg-5: rgba(235, 235, 245, 0.10);
  --color-decision-allow:  #30D158;
  --color-decision-block:  #FF453A;
  --color-decision-ask:    #FF0000;
  --color-decision-force:  #64D2FF;
  --color-decision-log:    #BF5AF2;
  --color-decision-shadow: rgba(235, 235, 245, 0.40);
  --color-material-sidebar: rgba(38, 38, 41, 0.72);
  --color-material-toolbar: rgba(38, 38, 41, 0.78);
  --color-material-popover: rgba(44, 44, 46, 0.92);
  --color-fill-1: rgba(120, 120, 128, 0.36);
  --color-fill-2: rgba(120, 120, 128, 0.32);
  --color-fill-3: rgba(118, 118, 128, 0.24);
  --color-fill-4: rgba(116, 116, 128, 0.18);
  --hig-shadow-1: 0 0 0 0.5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --hig-shadow-2: 0 0 0 0.5px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.5);
  --hig-shadow-3: 0 0 0 0.5px rgba(0,0,0,0.55), 0 14px 40px rgba(0,0,0,0.6);
  --hig-shadow-button: inset 0 0.5px 0 rgba(255,255,255,0.10), 0 0.5px 1.5px rgba(0,0,0,0.4);
  --hig-shadow-focus: 0 0 0 3px rgba(10,132,255,0.45);
  --hig-switch-off: rgba(120, 120, 128, 0.36);
  --hig-switch-on: var(--color-hig-green);
}

/* ── Native-window chrome upgrade (macOS-flavored, looks like the real Sentinel) */
.dash-preview__media--live {
  background: linear-gradient(180deg, #232325 0%, #1c1c1d 100%);
  border-radius: 0 0 9px 0;
}
.dash-preview__chrome,
.desktop-preview__chrome,
.showcase-stage__chrome {
  position: relative;
  background: linear-gradient(180deg, #2d2d30 0%, #232325 100%);
  border-bottom: 1px solid rgba(0,0,0,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.35);
  padding: 0.55rem 0.85rem;
  min-height: 36px;
}
.dash-preview__chrome-dot,
.desktop-preview__dot,
.showcase-stage__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(0,0,0,0.18);
  position: relative;
}
.dash-preview__chrome-dot:nth-of-type(1),
.desktop-preview__dot:nth-of-type(1),
.showcase-stage__dot:nth-of-type(1) {
  background: radial-gradient(circle at 30% 30%, #ff7165 0%, #ff5f57 60%, #d6463d 100%);
}
.dash-preview__chrome-dot:nth-of-type(2),
.desktop-preview__dot:nth-of-type(2),
.showcase-stage__dot:nth-of-type(2) {
  background: radial-gradient(circle at 30% 30%, #ffd16e 0%, #febc2e 60%, #d99c14 100%);
}
.dash-preview__chrome-dot:nth-of-type(3),
.desktop-preview__dot:nth-of-type(3),
.showcase-stage__dot:nth-of-type(3) {
  background: radial-gradient(circle at 30% 30%, #4cf07d 0%, #28c940 60%, #1ea336 100%);
}
.dash-preview__chrome-host,
.desktop-preview__host,
.showcase-stage__host {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(235,235,245,0.66);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.dash-preview__chrome-host::before,
.desktop-preview__host::before,
.showcase-stage__host::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #FF0000 0%, #FF0000 100%);
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.45), inset 0 0 0 0.5px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.desktop-preview__caption {
  position: relative;
  z-index: 1;
}

/* The viewport sits inside a window: deep canvas color matching gov dark surface-0 */
.dash-preview__teaser-mount,
.desktop-preview__viewport,
.showcase-stage__viewport {
  background: #1E1E1F;
}
.dash-preview--live {
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 56px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255, 0, 0, 0.06);
  border-radius: 10px;
}
.desktop-preview,
.showcase-stage {
  background: #1E1E1F;
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 56px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255, 0, 0, 0.06);
}

/* Light-theme native-window — clean macOS Big Sur ish */
html[data-theme='light'] .dash-preview__media--live,
html[data-theme='light'] .desktop-preview,
html[data-theme='light'] .showcase-stage {
  background: #ffffff;
}
html[data-theme='light'] .dash-preview__chrome,
html[data-theme='light'] .desktop-preview__chrome,
html[data-theme='light'] .showcase-stage__chrome {
  background: linear-gradient(180deg, #ececec 0%, #d8d8d8 100%);
  border-bottom-color: rgba(0,0,0,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.06);
}
html[data-theme='light'] .dash-preview__chrome-host,
html[data-theme='light'] .desktop-preview__host,
html[data-theme='light'] .showcase-stage__host {
  color: rgba(60,60,67,0.66);
}
html[data-theme='light'] .dash-preview__teaser-mount,
html[data-theme='light'] .desktop-preview__viewport,
html[data-theme='light'] .showcase-stage__viewport {
  background: #F2F2F7;
}
html[data-theme='light'] .dash-preview--live {
  border-color: rgba(0,0,0,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 18px 38px rgba(15,23,42,0.10),
    0 0 0 1px rgba(15,23,42,0.04);
}
html[data-theme='light'] .desktop-preview,
html[data-theme='light'] .showcase-stage {
  border-color: rgba(0,0,0,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 18px 38px rgba(15,23,42,0.10),
    0 0 0 1px rgba(15,23,42,0.04);
}

/* The host text on smaller screens: hide on narrow widths so dots don't overlap */
@media (max-width: 480px) {
  .dash-preview__chrome-host,
  .desktop-preview__host,
  .showcase-stage__host { font-size: 0.66rem; }
}

.sigma-galaxy { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 999; }
.sigma-star { position: absolute; color: rgba(24, 211, 252, 0.2); font-family: 'SF Mono', 'Fira Code', monospace; text-shadow: 0 0 10px rgba(24, 211, 252, 0.4); animation: floatSigma 60s linear infinite; top: 100vh; opacity: 0; }
@keyframes floatSigma {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.2; }
  50% { opacity: 0.4; text-shadow: 0 0 15px rgba(255, 0, 0, 0.5); color: rgba(255, 0, 0, 0.3); }
  90% { opacity: 0.2; color: rgba(24, 211, 252, 0.2); }
  100% { transform: translateY(-150vh) rotate(360deg); opacity: 0; }
}

.ssg-dash-app {
  display: flex; flex-direction: column; width: 100%; max-width: 950px; z-index: 10;
  background: #080808; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  height: 540px; margin: 0 auto;
}
.ssg-dash-header { border-bottom: 1px solid #1e1e1e; background: rgba(8,8,8,0.95); }
.ssg-dash-header-inner { display: flex; align-items: center; gap: 1.5rem; padding: 0 1rem; height: 3rem; overflow-x: auto; scrollbar-width: none; }
.ssg-dash-header-inner::-webkit-scrollbar { display: none; }
.ssg-dash-logo-link { display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none; user-select: none; }
.ssg-dash-logo { color: #FF0000; font-weight: 700; font-size: 0.875rem; letter-spacing: -0.02em; font-family: 'SF Mono', Menlo, monospace; }
.ssg-dash-logo-suffix { color: #555; font-size: 0.6875rem; font-family: 'SF Mono', Menlo, monospace; letter-spacing: -0.02em; }
.ssg-dash-nav { display: flex; align-items: center; gap: 0.1rem; font-family: 'SF Mono', Menlo, monospace; }
.ssg-dash-tab { background: transparent; border: none; color: #666; padding: 0.25rem 0.6rem; font-size: 0.75rem; cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; position: relative; transition: color 0.15s; }
.ssg-dash-tab:hover { color: #ccc; }
.ssg-dash-tab.active { color: #fff; }
.ssg-dash-tab.active::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -1px; height: 1px; background: #FF0000; }
.ssg-dash-status { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.ssg-dash-indicator { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: #555; white-space: nowrap; }
.ssg-dash-indicator .dot { width: 8px; height: 8px; border-radius: 50%; }
.ssg-dash-indicator .dot.blue { background: #3b82f6; }
.ssg-dash-indicator .dot.green { background: #22c55e; }
.ssg-dash-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.ssg-dash-body::-webkit-scrollbar { width: 6px; }
.ssg-dash-body::-webkit-scrollbar-track { background: transparent; }
.ssg-dash-body::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.ssg-dash-pane { display: none; flex-direction: column; gap: 1.5rem; }
.ssg-dash-pane.active { display: flex; }
.ssg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 768px) {
  .hidden-mobile { display: none; }
  .ssg-dash-header-inner { gap: 0.75rem; }
  .ssg-grid-3 { grid-template-columns: 1fr; }
  .ssg-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ssg-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .ssg-grid-2 { grid-template-columns: 1fr; }
}
.ssg-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.ssg-card { background: #000; border: 1px solid #222; border-radius: 8px; padding: 1.25rem; font-family: inherit; }
.ssg-val { font-size: 1.875rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ssg-lbl { font-size: 0.75rem; color: #555; margin-top: 0.5rem; font-weight: 500; }
.ssg-stat-card { background: #080808; border: 1px solid #1a1a1a; border-radius: 6px; padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ssg-stat-lbl { font-size: 0.65rem; color: #666; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'SF Mono', Menlo, monospace; font-weight: 500; }
.ssg-stat-val { font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; font-family: 'SF Mono', Menlo, monospace; }
.ssg-metric-grid { margin-top: 0.5rem; }
.ssg-metric-card { background: #080808; border: 1px solid #1a1a1a; border-radius: 6px; padding: 0.625rem 0.875rem; }
.ssg-metric-head { display: flex; justify-content: space-between; align-items: baseline; font-family: 'SF Mono', Menlo, monospace; }
.ssg-metric-lbl { font-size: 0.65rem; color: #666; text-transform: uppercase; letter-spacing: 0.08em; }
.ssg-metric-val { font-size: 0.875rem; color: #ddd; font-variant-numeric: tabular-nums; }
.ssg-metric-spark { margin-top: 0.375rem; height: 24px; opacity: 0.85; }
.ssg-metric-spark svg { width: 100%; height: 100%; }
.text-violet-400 { color: #a78bfa; }

.ssg-section h2 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 0.75rem; letter-spacing: -0.01em; }
.ssg-pending-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.ssg-title { font-size: 0.875rem; font-weight: 500; color: #ddd; }
.ssg-actions { display: flex; gap: 0.5rem; }
.ssg-btn { padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; transition: 0.2s; }
.ssg-btn.primary { background: #fff; color: #000; }
.ssg-btn.danger, .ssg-btn.danger:hover, .ssg-btn.danger:active, .ssg-btn.danger:focus-visible { background: #ff0000; color: #000000; }
.ssg-btn:hover { opacity: 0.8; }
.ssg-pending-body { font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ssg-pending-body .lbl { color: #555; }
.ssg-pending-body .val { color: #aaa; }
.ssg-code-block { background: #111; border: 1px solid #333; padding: 0.75rem; border-radius: 6px; font-family: 'SF Mono', monospace; font-size: 0.75rem; color: #ccc; margin-top: 0.25rem; overflow-x: auto; }

.ssg-table-wrap { padding: 0; overflow-x: auto; }
.ssg-table { width: 100%; text-align: left; border-collapse: collapse; font-size: 0.8rem; }
.ssg-table th { padding: 0.75rem 1rem; color: #a1a1aa; font-weight: 600; border-bottom: 1px solid #222; text-transform: capitalize;}
.ssg-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #1c1c1c; color: #888; }
.ssg-table tr:last-child td { border-bottom: none; }
.ssg-table .trunc { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ssg-badge { padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; border: 1px solid; text-transform: capitalize; }
.ssg-badge.green { color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.2); }
.ssg-badge.red { color: #f87171; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.2); }
.ssg-badge.amber { color: #FF0000; background: rgba(255, 0, 0, 0.1); border-color: rgba(255, 0, 0, 0.2); }
.ssg-badge.gray { color: #9ca3af; background: rgba(156,163,175,0.1); border-color: rgba(156,163,175,0.2); }

.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-brand-400 { color: #FF0000; }
.text-blue-400 { color: #60a5fa; }
.text-gray-400 { color: #9ca3af; }
.text-center { text-align: center; }
.font-mono { font-family: 'SF Mono', monospace; }

/* ── Dashboard Extended Styles ─────────────────────────────────────────── */

/* Badge variants */
.ssg-badge.blue { color: #60a5fa; background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.2); }
.ssg-badge.purple { color: #c084fc; background: rgba(192,132,252,0.1); border-color: rgba(192,132,252,0.2); }
.ssg-badge.yellow { color: #facc15; background: rgba(250,204,21,0.1); border-color: rgba(250,204,21,0.2); }
.ssg-badge.cyan { color: #22d3ee; background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.2); }

/* Kibana-style log entries */
.ssg-log-entry { border: 1px solid #1e1e1e; border-left: 2px solid #333; border-radius: 8px; background: #0d0d0d; padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; }
.ssg-log-entry.le-green { border-left-color: rgba(74,222,128,0.5); }
.ssg-log-entry.le-red { border-left-color: rgba(248,113,113,0.6); }
.ssg-log-entry.le-amber { border-left-color: rgba(255, 0, 0, 0.6); }
.ssg-log-entry.le-blue { border-left-color: rgba(96,165,250,0.5); }
.ssg-log-entry.le-gray { border-left-color: rgba(107,114,128,0.4); }
.ssg-log-entry .le-time { color: #555; font-family: 'SF Mono', monospace; width: 3.5rem; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 0.7rem; }
.ssg-log-entry .le-preview { flex: 1; min-width: 0; color: #666; font-family: 'SF Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssg-log-entry .le-client { color: #3a3a3a; font-size: 0.6rem; margin-left: auto; flex-shrink: 0; }

/* Column legend */
.ssg-col-legend { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: #3a3a3a; font-weight: 500; user-select: none; margin-bottom: 0.25rem; }

/* Blocked action card */
.ssg-blocked-card { background: #000; border: 1px solid #222; border-radius: 8px; padding: 0.75rem 1rem; }
.ssg-blocked-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-top: 0.5rem; font-size: 0.7rem; }
.ssg-blocked-meta .meta-lbl { color: #555; }
.ssg-blocked-meta .meta-val { color: #777; font-variant-numeric: tabular-nums; font-family: 'SF Mono', monospace; }
.ssg-btn-ask { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.75rem; padding: 0 0.75rem; border-radius: 6px; font-size: 0.7rem; font-weight: 500; background: rgba(59,130,246,0.1); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); cursor: pointer; }
.ssg-btn-disable { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.75rem; padding: 0 0.75rem; border-radius: 6px; font-size: 0.7rem; font-weight: 500; background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); cursor: pointer; }

/* Search/filter bar */
.ssg-search-wrap { position: relative; }
.ssg-search-bar { width: 100%; background: #0d0d0d; border: 1px solid #1e1e1e; color: #ccc; font-size: 0.8rem; border-radius: 8px; padding: 0.5rem 0.75rem 0.5rem 2rem; box-sizing: border-box; }
.ssg-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ssg-select { background: #111; border: 1px solid #222; color: #aaa; font-size: 0.75rem; border-radius: 4px; padding: 0.3rem 0.5rem; cursor: pointer; }

/* Hub tab toggle */
.ssg-tab-toggle { display: flex; align-items: center; background: #0d0d0d; border: 1px solid #1c1c1c; border-radius: 8px; padding: 2px; flex-shrink: 0; }
.ssg-tab-toggle-btn { padding: 0.15rem 0.75rem; border-radius: 6px; font-size: 0.6875rem; font-weight: 500; color: #555; background: transparent; border: none; cursor: pointer; }
.ssg-tab-toggle-btn.active { background: #1e1e1e; color: #fff; }
.ssg-installed-count { font-size: 0.5625rem; background: rgba(74,222,128,0.2); color: #4ade80; border-radius: 9999px; padding: 0.1rem 0.375rem; font-weight: 700; }

/* Tech pills */
.ssg-tech-pill { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 9999px; font-size: 0.6rem; font-weight: 500; border: 1px solid; }
.ssg-tech-pill.tp-ts { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.2); }
.ssg-tech-pill.tp-js { background: rgba(255, 0, 0, 0.1); color: #FF0000; border-color: rgba(255, 0, 0, 0.2); }
.ssg-tech-pill.tp-python { background: rgba(74,222,128,0.1); color: #4ade80; border-color: rgba(74,222,128,0.2); }
.ssg-tech-pill.tp-rust { background: rgba(251,146,60,0.1); color: #fb923c; border-color: rgba(251,146,60,0.2); }
.ssg-tech-pill.tp-go { background: rgba(34,211,238,0.1); color: #22d3ee; border-color: rgba(34,211,238,0.2); }
.ssg-tech-pill.tp-bash { background: rgba(192,132,252,0.1); color: #c084fc; border-color: rgba(192,132,252,0.2); }

/* Hub card */
.ssg-hub-card { position: relative; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid #1c1c1c; background: #0d0d0d; overflow: hidden; padding: 1rem; gap: 0.5rem; }
.ssg-hub-card.installed { border-color: rgba(74,222,128,0.2); }
.ssg-ribbon-wrap { position: absolute; top: 0; right: 0; width: 4rem; height: 4rem; overflow: hidden; pointer-events: none; }
.ssg-ribbon { position: absolute; top: 0.75rem; right: -1.125rem; background: rgba(74,222,128,0.2); color: #4ade80; font-size: 0.5625rem; font-weight: 700; transform: rotate(45deg); width: 5rem; text-align: center; border-top: 1px solid rgba(74,222,128,0.3); padding: 0.125rem 0; }
.ssg-hub-stats { display: flex; align-items: center; gap: 0.75rem; font-size: 0.6875rem; color: #444; margin-top: auto; }
.ssg-hub-install-btn { width: 100%; height: 1.75rem; border-radius: 8px; font-size: 0.6875rem; font-weight: 500; border: 1px solid rgba(255, 0, 0, 0.2); background: rgba(255, 0, 0, 0.1); color: #FF0000; cursor: pointer; margin-top: 0.5rem; }
.ssg-hub-installed-btn { width: 100%; height: 1.75rem; border-radius: 8px; font-size: 0.6875rem; font-weight: 500; background: rgba(74,222,128,0.05); color: #4ade80; border: 1px solid rgba(74,222,128,0.15); margin-top: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }

/* Grid helpers */
.ssg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.ssg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.ssg-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }

/* Stat card (Monitor) */
.ssg-stat-card { background: #111; border: 1px solid #222; border-radius: 4px; padding: 0.75rem; }
.ssg-stat-card .ssg-stat-label { font-size: 0.6rem; color: #555; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.ssg-stat-card .ssg-stat-value { font-size: 1.25rem; font-family: 'SF Mono', monospace; font-weight: 600; }

/* Daemon status */
.ssg-daemon-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; animation: ssg-pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes ssg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.ssg-daemon-status { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; flex-wrap: wrap; }
.ssg-daemon-meta { color: #666; font-size: 0.75rem; }
.ssg-daemon-meta span { color: #aaa; font-family: 'SF Mono', monospace; }

/* Latency bars */
.ssg-latency-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.ssg-latency-label { color: #555; width: 1.75rem; text-align: right; font-family: 'SF Mono', monospace; font-size: 0.7rem; }
.ssg-latency-track { flex: 1; background: #1a1a1a; border-radius: 9999px; height: 0.375rem; overflow: hidden; }
.ssg-latency-fill { height: 100%; border-radius: 9999px; }
.ssg-latency-fill.lat-green { background: #22c55e; }
.ssg-latency-fill.lat-yellow { background: #eab308; }
.ssg-latency-fill.lat-red { background: #ef4444; }
.ssg-latency-val { color: #aaa; font-family: 'SF Mono', monospace; font-size: 0.7rem; width: 3.5rem; text-align: right; }

/* Key-value rows */
.ssg-kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid #0f0f0f; font-size: 0.75rem; }
.ssg-kv-row:last-child { border-bottom: none; }
.ssg-kv-label { color: #555; flex-shrink: 0; }
.ssg-kv-value { color: #aaa; font-family: 'SF Mono', monospace; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Event tail */
.ssg-event-tail { font-family: 'SF Mono', monospace; font-size: 0.7rem; max-height: 11rem; overflow-y: auto; }
.ssg-event-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; border-bottom: 1px solid #0f0f0f; }
.ssg-event-row:last-child { border-bottom: none; }
.ssg-event-time { color: #444; width: 4rem; flex-shrink: 0; }
.ssg-event-decision { width: 5rem; flex-shrink: 0; font-weight: 600; }
.ssg-event-tool { color: #aaa; width: 5rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssg-event-latency { color: #444; width: 3rem; text-align: right; flex-shrink: 0; }
.ssg-event-rule { color: #FF0000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.65rem; }

/* Card header for nested cards */
.ssg-card-header { font-size: 0.7rem; font-weight: 500; color: #888; padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid #1e1e1e; display: flex; justify-content: space-between; align-items: center; }

/* Rules page */
.ssg-file-section { background: #000; border: 1px solid #222; border-radius: 8px; overflow: hidden; }
.ssg-file-section summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.ssg-file-section summary:hover { background: #0d0d0d; }
.ssg-file-section summary::-webkit-details-marker { display: none; }
.ssg-file-body { padding: 0 1rem 0.75rem 1rem; }
.ssg-rule-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid #1a1a1a; }
.ssg-rule-row:last-child { border-bottom: none; }
.ssg-decision-select { background: #0d0d0d; border: 1px solid #222; border-radius: 4px; padding: 0.1rem 0.3rem; font-size: 0.7rem; cursor: pointer; }
.ssg-rule-info { min-width: 0; flex: 1; }
.ssg-rule-msg { font-size: 0.7rem; color: #555; margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssg-rule-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; color: #555; flex-shrink: 0; }

/* Profile */
.ssg-profile-tabs { display: flex; border-bottom: 1px solid #1e1e1e; margin-bottom: 1rem; }
.ssg-profile-tab { padding: 0.5rem 1rem; font-size: 0.8rem; color: #555; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ssg-profile-tab.active { color: #fff; border-bottom-color: #FF0000; }
.ssg-phase-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; }
.ssg-phase-name { width: 6.5rem; font-family: 'SF Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777; font-size: 0.7rem; flex-shrink: 0; }
.ssg-phase-name.bottleneck { color: #FF0000; font-weight: 600; }
.ssg-phase-track { flex: 1; background: #111; border-radius: 9999px; height: 0.375rem; overflow: hidden; }
.ssg-phase-fill { height: 100%; border-radius: 9999px; background: #333; }
.ssg-phase-fill.bottleneck { background: #FF0000; }
.ssg-phase-val { color: #777; font-family: 'SF Mono', monospace; font-size: 0.7rem; width: 2.5rem; text-align: right; flex-shrink: 0; }
.ssg-rec-card { border: 1px solid #1e1e1e; border-radius: 8px; padding: 0.75rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.ssg-rec-body { flex: 1; min-width: 0; }
.ssg-rec-msg { font-size: 0.8rem; color: #ccc; margin-bottom: 0.25rem; }
.ssg-rec-cmd { font-family: 'SF Mono', monospace; font-size: 0.7rem; color: #FF0000; background: #111; border-radius: 4px; padding: 0.15rem 0.4rem; display: inline-block; }
.ssg-session-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #1a1a1a; font-size: 0.75rem; flex-wrap: wrap; }
.ssg-session-row:last-child { border-bottom: none; }
.ssg-current-badge { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(255, 0, 0, 0.15); color: #FF0000; border: 1px solid rgba(255, 0, 0, 0.3); border-radius: 4px; padding: 0.1rem 0.4rem; flex-shrink: 0; }

/* Observability */
.ssg-capacity-bar { height: 0.5rem; background: #111; border-radius: 9999px; overflow: hidden; margin: 0.5rem 0; }
.ssg-capacity-fill { height: 100%; border-radius: 9999px; background: #22c55e; }
.ssg-status-ok { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #4ade80; border: 1px solid rgba(74,222,128,0.2); border-radius: 4px; padding: 0.1rem 0.375rem; }
.ssg-status-bad { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #f87171; border: 1px solid rgba(248,113,113,0.2); border-radius: 4px; padding: 0.1rem 0.375rem; }
.ssg-pragma-row { font-size: 0.7rem; }
.ssg-section-label { font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #444; margin-bottom: 0.5rem; margin-top: 0.75rem; }

@media (max-width: 1024px) {
  .pg-source-wrap.active { padding: 1rem; gap: 1.5rem; }
  .pg-annotations { grid-template-columns: 1fr; padding-top: 1rem; }
}

/* CSP Nonce Inline style replacements */
.error-page-body { font-family: system-ui; background: #0a0a0a; color: #e0e0e0; padding: 2rem; }
.error-page-link { color: #FF0000; }
.platform-icon-offset { margin-left: -4px; }
.pg-annot-priority { color: #8be9fd; border-color: rgba(139,233,253,0.3); background: rgba(139,233,253,0.1); }
.pg-intro-priority { color: #8be9fd; }
.pg-annot-action { color: #ff5555; border-color: rgba(255,85,85,0.3); background: rgba(255,85,85,0.1); }
.pg-intro-action { color: #ff5555; }
.pg-annot-condition { color: #ff79c6; border-color: rgba(255,121,198,0.3); background: rgba(255,121,198,0.1); }
.pg-intro-condition { color: #ff79c6; }
.compare-product-prompt { color: #ff5555; }
.compare-product-claude { color: #8be9fd; }
.compare-product-sigmashake { color: #fff; font-weight: 800; }
.compare-cell--hl { color: #fff; font-weight: 700; }
.pricing-sub-margin { margin-bottom: 1.5rem; }

/* ── Launch Promo Banner ──────────────────────────────────────────────── */
.promo-banner {
  position: relative; overflow: hidden;
  max-width: 680px; margin: 0 auto 2.5rem;
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.08) 0%, rgba(236,72,153,0.06) 50%, rgba(139,92,246,0.08) 100%);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 16px; padding: 1.75rem 2rem;
  text-align: center;
}
.promo-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.08) 50%, transparent 100%);
  animation: promoShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promoShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}
.promo-banner-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 80%; height: 120%;
  background: radial-gradient(ellipse, rgba(255, 0, 0, 0.15) 0%, transparent 60%);
  filter: blur(40px); pointer-events: none; z-index: 0;
}
.promo-content { position: relative; z-index: 1; }
.promo-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: #FF0000; margin-bottom: 0.75rem;
}
.promo-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
  animation: promoPulse 2s ease-in-out infinite;
}
@keyframes promoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.promo-headline {
  font-size: 1.5rem; font-weight: 800; color: #fff;
  letter-spacing: -0.03em; margin-bottom: 0.35rem; line-height: 1.2;
}
.promo-headline .promo-pct {
  background: linear-gradient(90deg, #FF0000, #ec4899, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 1.6rem;
}
.promo-sub {
  font-size: 0.9rem; color: #a1a1aa; margin-bottom: 1rem; line-height: 1.5;
}
.promo-code-wrap {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: #000; border: 1px solid #333;
  border-radius: 10px; padding: 0.6rem 1.25rem;
  margin-bottom: 1rem;
}
.promo-code-label {
  font-size: 0.7rem; color: #888; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
}
.promo-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.25rem; font-weight: 800; color: #FF0000;
  letter-spacing: 0.08em;
  animation: promoCodeGlow 2s ease-in-out infinite alternate;
}
@keyframes promoCodeGlow {
  from { text-shadow: 0 0 8px rgba(255, 0, 0, 0.3); }
  to { text-shadow: 0 0 16px rgba(255, 0, 0, 0.6), 0 0 32px rgba(255, 0, 0, 0.2); }
}
.promo-copy-btn {
  background: rgba(255, 0, 0, 0.15); border: 1px solid rgba(255, 0, 0, 0.3);
  color: #FF0000; font-size: 0.7rem; font-weight: 600;
  padding: 0.25rem 0.6rem; border-radius: 6px; cursor: pointer;
  transition: all 0.15s;
}
.promo-copy-btn:hover {
  background: rgba(255, 0, 0, 0.25); border-color: #FF0000;
}
.promo-expires {
  font-size: 0.72rem; color: #666;
}
.promo-expires strong {
  color: #a1a1aa; font-weight: 600;
}
.promo-strike {
  text-decoration: line-through; color: #555; font-weight: 400; font-size: 1.1rem;
}
.promo-new-price {
  color: #4ade80; font-weight: 800; font-size: 1.1rem;
}
@media (max-width: 640px) {
  .promo-banner { padding: 1.25rem 1rem; margin: 0 auto 2rem; }
  .promo-headline { font-size: 1.2rem; }
  .promo-headline .promo-pct { font-size: 1.3rem; }
  .promo-code { font-size: 1rem; }
  .promo-code-wrap { padding: 0.5rem 0.75rem; gap: 0.5rem; }
}

/* ── PH Launch Banner ───────────────────────────────────────────────────── */
.ph-launch-banner {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.12) 0%, rgba(255, 0, 0, 0.06) 100%);
  border-bottom: 1px solid rgba(255, 0, 0, 0.3);
  padding: 0.65rem 1.25rem; font-size: 0.85rem; color: #e5e5e5;
  position: relative;
}
.ph-launch-text {
  display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  flex: 1; min-width: 200px; text-align: center;
}
.ph-launch-icon {
  width: 1.2rem; height: 1.2rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.ph-launch-icon svg { width: 100%; height: 100%; display: block; }
.ph-launch-icon-circle { fill: #da552f; }
.ph-launch-icon-mark { fill: #ffffff; }
.ph-launch-copy { display: inline; }
.ph-launch-copy .ph-launch-cta { display: inline-block; margin-left: 0.35em; vertical-align: baseline; }
.ph-launch-cta {
  background: #FF0000; color: #0a0a0a; font-weight: 600; font-size: 0.8rem;
  padding: 0.3rem 0.8rem; border-radius: 4px; text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.ph-launch-cta:hover { background: #FF0000; }
.ph-launch-dismiss {
  background: none; border: none; color: #666; cursor: pointer; font-size: 1rem;
  padding: 0.2rem 0.4rem; line-height: 1; border-radius: 4px; transition: color 0.15s;
}
.ph-launch-dismiss:hover { color: #e5e5e5; }
@media (max-width: 640px) {
  .ph-launch-text {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ── Standardized Footer ────────────────────────────────────────────────── */
.ssg-footer { border-top: 1px solid #1a1a1a; padding: 4rem 1.5rem 2rem; background: #0a0a0a; color: #a1a1aa; font-family: system-ui, -apple-system, sans-serif; }
.ssg-footer-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; max-width: 1400px; margin: 0 auto 3rem; }
.ssg-col h4 { color: #e5e5e5; font-size: 0.95rem; font-weight: 600; margin-bottom: 1.25rem; }
.ssg-col a { display: block; color: #888; text-decoration: none; font-size: 0.85rem; margin-bottom: 0.75rem; transition: color 0.15s; }
.ssg-col a:hover { color: #FF0000; }
.ssg-footer-bottom { max-width: 1400px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
@media (max-width: 768px) {
  .ssg-footer-nav { grid-template-columns: repeat(2, 1fr); }
  .ssg-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 480px) {
  .ssg-footer-nav { grid-template-columns: 1fr; }
}

html[data-theme='light'] body {
  background: #f8fafc;
  color: #111827;
}
html[data-theme='light'] header {
  border-bottom-color: #e5e7eb;
}
html[data-theme='light'] .logo {
  color: #000000;
}
html[data-theme='light'] .logo:hover {
  color: #000000;
}
html[data-theme='light'] .mobile-menu-btn {
  color: #6b7280;
}
html[data-theme='light'] .mobile-menu-btn:hover {
  color: #111827;
}
html[data-theme='light'] .nav-trigger,
html[data-theme='light'] .nav-direct {
  color: #6b7280;
}
html[data-theme='light'] .nav-trigger:hover,
html[data-theme='light'] .nav-item.open > .nav-trigger,
html[data-theme='light'] .nav-direct:hover {
  color: #111827;
  background: #f3f4f6;
}
html[data-theme='light'] .nav-dropdown {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
html[data-theme='light'] .nav-col-label,
html[data-theme='light'] .filter-chip-label,
html[data-theme='light'] .subtitle-sub,
html[data-theme='light'] .promo-expires,
html[data-theme='light'] .sort-wrap label {
  color: #9ca3af;
}
html[data-theme='light'] .nav-col a,
html[data-theme='light'] .hero p,
html[data-theme='light'] .card-desc-text,
html[data-theme='light'] .recent-desc,
html[data-theme='light'] .recent-meta,
html[data-theme='light'] .card-meta,
html[data-theme='light'] .results-count,
html[data-theme='light'] .ph-launch-banner,
html[data-theme='light'] .promo-sub {
  color: #4b5563;
}
html[data-theme='light'] .nav-col a:hover,
html[data-theme='light'] .ssg-col a:hover,
html[data-theme='light'] footer a {
  color: #000000;
}
html[data-theme='light'] .nav-theme-toggle {
  background: #ffffff;
  border-color: #d1d5db;
  color: #6b7280;
}
html[data-theme='light'] .nav-theme-toggle:hover {
  background: #f9fafb;
  color: #111827;
}
html[data-theme='light'] .nav-login {
  border-color: #d1d5db !important;
  color: #4b5563 !important;
}
html[data-theme='light'] .nav-login:hover {
  border-color: #FF0000 !important;
  color: #000000 !important;
}
html[data-theme='light'] .nav-dashboard {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
}
html[data-theme='light'] .nav-dashboard:hover {
  background: #1f2937 !important;
  border-color: #1f2937 !important;
}
html[data-theme='light'] .hero-glow {
  background: radial-gradient(circle, rgba(255, 0, 0, 0.08) 0%, rgba(255, 0, 0, 0.04) 40%, rgba(248,250,252,0) 70%);
}
html[data-theme='light'] .hero h1,
html[data-theme='light'] .hero-code,
html[data-theme='light'] .card-title,
html[data-theme='light'] .card-author,
html[data-theme='light'] .recent-title,
html[data-theme='light'] .npm-section-title,
html[data-theme='light'] .metric-box p {
  color: #111827;
}
html[data-theme='light'] .hero h1 span,
html[data-theme='light'] .section-icon,
html[data-theme='light'] .npm-section-title,
html[data-theme='light'] .recent-title,
html[data-theme='light'] .metric-box p {
  color: #000000;
}
html[data-theme='light'] .hero code,
html[data-theme='light'] .promo-code-wrap,
html[data-theme='light'] .promo-copy-btn,
html[data-theme='light'] .ph-launch-banner {
  background: #FFF5F5;
  border-color: #FF0000;
}
html[data-theme='light'] .hero code,
html[data-theme='light'] .promo-code,
html[data-theme='light'] .promo-eyebrow,
html[data-theme='light'] .promo-copy-btn {
  color: #000000;
}
html[data-theme='light'] .filters input[type=search],
html[data-theme='light'] .filters select,
html[data-theme='light'] .sort-wrap select,
html[data-theme='light'] .card,
html[data-theme='light'] .metric-box,
html[data-theme='light'] .pop-cards-container,
html[data-theme='light'] .tech-card,
html[data-theme='light'] .back-btn,
html[data-theme='light'] .npm-search-bar input[type=search] {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}
html[data-theme='light'] .filters input[type=search]::placeholder,
html[data-theme='light'] .npm-search-bar input[type=search]::placeholder {
  color: #9ca3af;
}
html[data-theme='light'] .filters input[type=search]:focus,
html[data-theme='light'] .filters select:focus,
html[data-theme='light'] .sort-wrap select:focus,
html[data-theme='light'] .npm-search-bar input[type=search]:focus {
  border-color: #FF0000;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12);
}
html[data-theme='light'] .back-btn:hover,
html[data-theme='light'] .card:hover,
html[data-theme='light'] .tech-card:hover,
html[data-theme='light'] .pop-tag-link:hover {
  background: #FFF5F5;
  color: #000000;
}
html[data-theme='light'] .card,
html[data-theme='light'] .metric-box,
html[data-theme='light'] .pop-cards-container,
html[data-theme='light'] .results-header,
html[data-theme='light'] .filter-chips,
html[data-theme='light'] .ssg-footer,
html[data-theme='light'] .ssg-footer-bottom {
  border-color: #e5e7eb;
}
html[data-theme='light'] .card:hover {
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.12);
}
html[data-theme='light'] .filter-chip + label {
  background: #ffffff;
  border-color: #d1d5db;
  color: #6b7280;
}
html[data-theme='light'] .filter-chip + label:hover {
  border-color: #9ca3af;
  color: #111827;
}
html[data-theme='light'] .filter-chip:checked + label {
  background: #FFF5F5;
  border-color: #FF0000;
  color: #000000;
}
html[data-theme='light'] .ssg-footer {
  background: #ffffff;
  color: #6b7280;
}
html[data-theme='light'] .ssg-col h4 {
  color: #111827;
}
html[data-theme='light'] .ssg-col a {
  color: #4b5563;
}
html[data-theme='light'] [class~="bg-[#0d0d0d]"] {
  background-color: #ffffff !important;
}
html[data-theme='light'] [class~="border-[#1e1e1e]"],
html[data-theme='light'] [class~="border-[#2a2a2a]"],
html[data-theme='light'] [class~="border-[#3a3a3a]"] {
  border-color: #e5e7eb !important;
}
html[data-theme='light'] [class~="text-[#555]"],
html[data-theme='light'] [class~="text-[#666]"],
html[data-theme='light'] [class~="text-[#999]"] {
  color: #6b7280 !important;
}
html[data-theme='light'] [class~="hover:bg-[#141414]"]:hover {
  background-color: #f3f4f6 !important;
}
html[data-theme='light'] [class~="hover:text-[#999]"]:hover,
html[data-theme='light'] [class~="hover:text-[#ccc]"]:hover {
  color: #111827 !important;
}
html[data-theme='light'] .asciinema-player,
html[data-theme='light'] .asciinema-player .ap-terminal {
  background: #ffffff !important;
  color: #111827 !important;
}
html[data-theme='light'] .asciinema-player .ap-control-bar {
  background: #f3f4f6 !important;
  border-top-color: #e5e7eb !important;
}

/* ── Platform badges ──────────────────────────────────────────────────────── */
html[data-theme='light'] .platform-badge {
  background: #ffffff; border-color: #d1d5db; color: #4b5563;
}
html[data-theme='light'] .platform-badge:hover { color: #111827; border-color: #9ca3af; }

/* ── btn-secondary in light (rgba border is invisible on white bg) ──────── */
html[data-theme='light'] .btn-secondary {
  background: #ffffff; color: #111827;
  border: 1px solid #d1d5db;
}
html[data-theme='light'] .btn-secondary:hover {
  background: #f3f4f6; border-color: #9ca3af;
}

/* ── Install commands (terminal — stays dark, frame only) ─────────────────── */
html[data-theme='light'] .install-commands {
  filter: drop-shadow(0 2px 12px rgba(15,23,42,0.08));
}
html[data-theme='light'] .install-row {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.02), 0 6px 18px rgba(15,23,42,0.12);
}

/* ── Clients strip ──────────────────────────────────────────────────────── */
html[data-theme='light'] .clients-strip { background: transparent; }
html[data-theme='light'] .clients-label { color: #9ca3af; }
html[data-theme='light'] .clients-tagline { color: #9ca3af; }
html[data-theme='light'] .client-badge {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .client-badge strong { color: #111827; }
html[data-theme='light'] .client-badge span { color: #6b7280; }
html[data-theme='light'] .client-badge--soon { border-color: #e5e7eb; }
html[data-theme='light'] .marquee-container {
  mask-image: linear-gradient(to right, transparent, #f8fafc 10%, #f8fafc 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #f8fafc 10%, #f8fafc 90%, transparent);
}

/* ── Hub section divider ─────────────────────────────────────────────────── */
html[data-theme='light'] .hub-section { border-top-color: #e5e7eb; }

/* ── Community CTA ──────────────────────────────────────────────────────── */
html[data-theme='light'] .community-cta-inner {
  background: linear-gradient(135deg, rgba(88,101,242,0.05) 0%, rgba(97,31,105,0.03) 100%);
  border-color: rgba(88,101,242,0.18);
}
html[data-theme='light'] .community-cta-text h2 { color: #111827; }
html[data-theme='light'] .community-cta-text p { color: #4b5563; }
html[data-theme='light'] .community-btn--slack {
  color: #374151; border-color: #d1d5db;
}
html[data-theme='light'] .community-btn--slack:hover {
  background: #f3f4f6; border-color: #9ca3af;
}

/* ── Hub callout (outer card flips; .hub-install-example terminal stays dark) */
html[data-theme='light'] .hub-callout {
  background: radial-gradient(circle at center, rgba(255, 0, 0, 0.04) 0%, transparent 60%);
  border-color: #e5e7eb;
}
html[data-theme='light'] .hub-callout h2 { color: #111827; }
html[data-theme='light'] .hub-callout .section-sub { color: #4b5563; }
html[data-theme='light'] .hub-callout-glow { background: rgba(255, 0, 0, 0.06); }
html[data-theme='light'] .hub-stat strong { color: #111827; }
html[data-theme='light'] .hub-stat span { color: #6b7280; }
/* hub-install-example stays dark — just soften its outer frame shadow */
html[data-theme='light'] .hub-install-example { box-shadow: inset 0 0 8px rgba(0,0,0,0.3), 0 4px 16px rgba(15,23,42,0.15); }

/* ── Playground section (terminal — stays dark entirely) ────────────────── */
/* no overrides — pg-* classes keep their dark styles */
html[data-theme='light'] .playground-preview {
  box-shadow: 0 4px 20px rgba(15,23,42,0.15);
}

/* ── Benchmark panel ─────────────────────────────────────────────────────── */
html[data-theme='light'] .benchmark-section {
  background: #f3f4f6; border-top-color: #e5e7eb; border-bottom-color: #e5e7eb;
}
html[data-theme='light'] .benchmark-header h2 { color: #111827; }
html[data-theme='light'] .benchmark-header .section-sub { color: #4b5563; }
html[data-theme='light'] .bench-panel { background: transparent; }
html[data-theme='light'] .bench-mode-card {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .bench-mode-card:hover { border-color: #d1d5db; }
html[data-theme='light'] .bench-mode--daemon { border-color: rgba(74,222,128,0.3); }
html[data-theme='light'] .bench-mode--daemon:hover { border-color: rgba(74,222,128,0.6); }
html[data-theme='light'] .bench-mode-header strong { color: #111827; }
html[data-theme='light'] .bench-mode-sub { color: #6b7280; }
html[data-theme='light'] .bench-unit { color: #6b7280; }
html[data-theme='light'] .bench-label { color: #6b7280; }
html[data-theme='light'] .bench-bar-track { background: rgba(15,23,42,0.06); }
html[data-theme='light'] .bench-bar-val { color: #374151; }
html[data-theme='light'] .bench-detail { color: #4b5563; }
html[data-theme='light'] .bench-detail-lbl { color: #9ca3af; }
html[data-theme='light'] .bench-details { border-top-color: #e5e7eb; }
html[data-theme='light'] .bench-footer-note { color: #9ca3af; }
html[data-theme='light'] .bench-sys-bar {
  background: rgba(15,23,42,0.03); border-color: #e5e7eb;
}
html[data-theme='light'] .bench-sys-chip {
  background: rgba(15,23,42,0.03); border-color: #e5e7eb; color: #4b5563;
}
html[data-theme='light'] .bench-scaling {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .bench-scaling-title { color: #111827; }
html[data-theme='light'] .bench-scaling-sub { color: #6b7280; }
html[data-theme='light'] .bench-scale-table th {
  color: #6b7280; border-bottom-color: #e5e7eb;
}
html[data-theme='light'] .bench-scale-table td {
  color: #374151; border-bottom-color: rgba(15,23,42,0.04);
}
html[data-theme='light'] .bench-scale-table td strong { color: #111827; }
html[data-theme='light'] .bench-scale-table tbody tr:hover { background: rgba(255, 0, 0, 0.04); }
html[data-theme='light'] .bench-scaling-note { color: #9ca3af; }
html[data-theme='light'] .bench-row-extreme { background: rgba(255, 0, 0, 0.06) !important; border-top-color: rgba(255, 0, 0, 0.2); }

/* ══ LIGHT-MODE READABILITY ROUND 2 (additive overrides) ══════════════════
   Four homepage surfaces were dark-anchored and unreadable on light:
   (2) benchmark big-number values + decision chips, (3) the SHAKEDOWN band,
   (4) the worker-rendered Newcomer "brakes" section. Apple-light + brand red:
   accent-as-text #FF0000 (about 5.7:1 on white; required), dark green #15803d,
   dark red #b91c1c, headings rgba(0,0,0,0.92), body rgba(0,0,0,0.82),
   muted #4b5563/#6b7280, surfaces #FFFFFF/#F9F9FB, hairline rgba(60,60,67,0.12).
   Dark rules above are untouched. ───────────────────────────────────────── */

/* FIX 2 — Benchmark values + decision/system chips (base ~lines 1915-1998) */
html[data-theme='light'] .bench-val--cli { color: #000000; }
html[data-theme='light'] .bench-val--daemon { color: #15803d; }
html[data-theme='light'] .bench-dec--allow { color: #15803d; background: rgba(21,128,61,0.14); }
html[data-theme='light'] .bench-dec--block { color: #b91c1c; background: rgba(185,28,28,0.14); }
html[data-theme='light'] .bench-dec--log { color: #4b5563; background: rgba(75,85,99,0.14); }
html[data-theme='light'] .bench-sys-chip svg { color: #000000; }

/* FIX 3 — SHAKEDOWN agent-containment band (.sd-*, base ~lines 3287-3335) */
html[data-theme='light'] .sd-band {
  background: linear-gradient(180deg, rgba(227,55,46,0.05), #F9F9FB);
  border-color: rgba(60,60,67,0.12);
}
html[data-theme='light'] .sd-eyebrow {
  color: #b91c1c; border-color: rgba(185,28,28,0.3); background: rgba(227,55,46,0.08);
}
html[data-theme='light'] .sd-band h2 { color: rgba(0,0,0,0.92); }
html[data-theme='light'] .sd-lede { color: #6b7280; }
html[data-theme='light'] .sd-scope {
  background: rgba(60,60,67,0.12); border-color: rgba(60,60,67,0.12);
}
html[data-theme='light'] .sd-stat { background: #FFFFFF; }
html[data-theme='light'] .sd-stat .n {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme='light'] .sd-stat .n small { color: #6b7280; -webkit-text-fill-color: #6b7280; }
html[data-theme='light'] .sd-stat .l { color: #6b7280; }
html[data-theme='light'] .sd-tactics .tl { color: #6b7280; }
html[data-theme='light'] .sd-chip {
  color: #374151; background: rgba(0,0,0,0.05); border-color: rgba(60,60,67,0.12);
}
html[data-theme='light'] .sd-cta-2 { color: #4b5563; }
html[data-theme='light'] .sd-cta-2:hover { color: rgba(0,0,0,0.92); border-bottom-color: rgba(60,60,67,0.3); }
html[data-theme='light'] .sd-cta-hint { color: #6b7280; }

/* FIX 4 — Newcomer "brakes" section (CSS lives in worker.ts; cascades here) */
html[data-theme='light'] .newcomer-inner {
  background: linear-gradient(135deg, #FFF5F5 0%, #fef2f2 100%);
  border-color: rgba(255, 0, 0, 0.35);
}
html[data-theme='light'] .newcomer-badge {
  color: #000000; background: rgba(255, 0, 0, 0.16); border-color: rgba(255, 0, 0, 0.35);
}
html[data-theme='light'] .newcomer-headline { color: rgba(0,0,0,0.92); }
html[data-theme='light'] .newcomer-sub { color: #4b5563; }
html[data-theme='light'] .newcomer-story {
  background: #FFFFFF; border-color: rgba(60,60,67,0.12);
}
html[data-theme='light'] .newcomer-story p { color: #4b5563; }
html[data-theme='light'] .newcomer-story strong { color: rgba(0,0,0,0.82); }
html[data-theme='light'] .newcomer-learn-link { color: #4b5563; }
html[data-theme='light'] .newcomer-learn-link:hover { color: #000000; }

/* ══ LIGHT-MODE READABILITY ROUND 3 (additive overrides) ══════════════════
   Three more dark-anchored homepage surfaces were invisible/transparent on
   light. Same Apple-light + brand red palette as round 2:
   accent-as-text #FF0000 (about 5.7:1 on white; required), dark green #15803d
   (never light green as text on white), dark red #b91c1c, headings
   rgba(0,0,0,0.92), body rgba(0,0,0,0.82), muted #4b5563/#6b7280, surfaces
   #FFFFFF/#F9F9FB/#ECECF0, hairline rgba(60,60,67,0.12). Dark rules untouched.
   ──────────────────────────────────────────────────────────────────────── */

/* FIX A — SHAKEDOWN top-score leaderboard band (.vb-*, base ~3342-3387,
   had ZERO light overrides → fully invisible on light). */
html[data-theme='light'] .vb-band {
  background: #F9F9FB; border-color: rgba(60,60,67,0.12);
}
html[data-theme='light'] .vb-eyebrow {
  color: #000000; border-color: rgba(255, 0, 0, 0.3); background: rgba(255, 0, 0, 0.08);
}
html[data-theme='light'] .vb-band h2 { color: rgba(0,0,0,0.92); }
html[data-theme='light'] .vb-hl {
  background: linear-gradient(135deg, #15803d, #166534);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html[data-theme='light'] .vb-lede { color: rgba(0,0,0,0.82); }
html[data-theme='light'] .vb-lede strong { color: rgba(0,0,0,0.92); }
html[data-theme='light'] .vb-name { color: #374151; }
html[data-theme='light'] .vb-name small { color: #6b7280; }
html[data-theme='light'] .vb-me .vb-name { color: #15803d; }
html[data-theme='light'] .vb-track {
  background: #ECECF0; border-color: rgba(60,60,67,0.12);
}
html[data-theme='light'] .vb-sc { color: rgba(0,0,0,0.82); }
html[data-theme='light'] .vb-me .vb-sc { color: #15803d; }
html[data-theme='light'] .vb-scale { color: #6b7280; }
html[data-theme='light'] .vb-scale span { color: #4b5563; }
html[data-theme='light'] .vb-diff {
  background: #FFFFFF; border-color: rgba(60,60,67,0.12);
}
html[data-theme='light'] .vb-dt { color: rgba(0,0,0,0.92); }
html[data-theme='light'] .vb-dd { color: rgba(0,0,0,0.82); }
html[data-theme='light'] .vb-dd strong { color: rgba(0,0,0,0.92); }
html[data-theme='light'] .vb-foot { color: #6b7280; }
html[data-theme='light'] .vb-foot a { color: #4b5563; }

/* FIX B — risk-chip scenario picker + decision pills + demo copy (base ~1644-1695).
   The 6 existing overrides (6376-6381) miss .risk-chip-title (markup uses -title,
   not -head), the active title, the icon, the deny/ask/force pills, and the
   "Watch a live block" eyebrow + "Pick a scenario…" description copy. */
html[data-theme='light'] .risk-demo-eyebrow { color: #000000; }
html[data-theme='light'] .risk-demo-hint { color: #4b5563; }
html[data-theme='light'] .risk-chip-title { color: rgba(0,0,0,0.92); }
html[data-theme='light'] .risk-chip.active .risk-chip-title { color: #000000; }
html[data-theme='light'] .risk-chip-icon { color: #4b5563; }
html[data-theme='light'] .risk-chip-decision--deny { color: #b91c1c; background: rgba(185,28,28,0.12); border: 1px solid rgba(185,28,28,0.28); }
html[data-theme='light'] .risk-chip-decision--ask  { color: #000000; background: rgba(255, 0, 0, 0.14); border: 1px solid rgba(255, 0, 0, 0.3); }
html[data-theme='light'] .risk-chip-decision--force { color: #6d28d9; background: rgba(109,40,217,0.10); border: 1px solid rgba(109,40,217,0.26); }
/* .risk-chip.active uses a red-tint highlight (base #FFF5F5 border #FF0000 at 6378);
   reinforce the inset ring as a brand-red hairline for clarity on white. */
html[data-theme='light'] .risk-chip.active { box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.35); }

/* ── Moat pillars + compare table ──────────────────────────────────────── */
html[data-theme='light'] .b-moat-pillar {
  background: #ffffff; border-color: #e5e7eb; border-top-width: 2px;
}
html[data-theme='light'] .b-moat-title { color: #111827; }
html[data-theme='light'] .b-moat-body { color: #4b5563; }
html[data-theme='light'] .b-moat-body code { color: #6b7280; }
html[data-theme='light'] .b-glow-blob {
  background: radial-gradient(circle, rgba(255, 0, 0, 0.12) 0%, rgba(236,72,153,0.08) 30%, rgba(139,92,246,0.08) 60%, transparent 80%);
  opacity: 0.5;
}
/* Compare header row */
html[data-theme='light'] .b-compare-header {
  color: #6b7280; border-bottom-color: #e5e7eb;
}
html[data-theme='light'] .b-compare-header--hl {
  color: #ffffff; border-color: rgba(255,255,255,0.1); border-bottom-color: #ec4899;
}
/* Compare cells */
html[data-theme='light'] .b-compare-cell { border-bottom-color: #e5e7eb; }
html[data-theme='light'] .b-compare-feature {
  color: #111827; border-bottom-color: #e5e7eb;
}
html[data-theme='light'] .b-compare-base {
  color: #4b5563; background: rgba(15,23,42,0.02);
}
html[data-theme='light'] .b-compare-table tbody tr:nth-child(even) .b-compare-feature,
html[data-theme='light'] .b-compare-table tbody tr:nth-child(even) .b-compare-base { background: rgba(15,23,42,0.04); }
/* SigmaShake highlight column stays dark — just tone down the shadow */
html[data-theme='light'] .b-compare-row:hover .b-compare-hl {
  box-shadow: 0 10px 30px -10px rgba(236,72,153,0.15);
}
html[data-theme='light'] .b-compare-base .b-metric--dim { color: #4b5563; }
html[data-theme='light'] .b-compare-base .b-detail { color: #4b5563; }
/* Highlight (SigmaShake) column keeps its dark-island look — keep text light */
html[data-theme='light'] .b-compare-hl .b-metric { color: #ffffff; }
html[data-theme='light'] .b-compare-hl .b-detail { color: #d1d5db; }
html[data-theme='light'] .b-compare-hl .b-detail-link { color: #000000; }
html[data-theme='light'] .b-col-title { color: #111827; }
html[data-theme='light'] .b-compare-header--hl .b-col-title { color: #ffffff; }
html[data-theme='light'] .b-col-sub { color: #9ca3af; }
html[data-theme='light'] .b-compare-header--hl .b-col-sub { color: #000000; opacity: 0.9; }
html[data-theme='light'] .b-status--fail {
  color: #9ca3af; background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.12);
}
html[data-theme='light'] .b-compare-summary {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .b-summary-text { color: #4b5563; }
html[data-theme='light'] .b-summary-sep { color: #d1d5db; }
html[data-theme='light'] .b-compare-cta-hint { color: #6b7280; }
html[data-theme='light'] .b-compare-cta-hint code {
  background: #ffffff; color: #111827; border: 1px solid #e5e7eb;
}
html[data-theme='light'] .playground-inner { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .playground-header h2 { color: #111827; }
html[data-theme='light'] .playground-sub { color: #4b5563; }
html[data-theme='light'] .pg-eyebrow { color: #000000; background: #FFF5F5; border-color: #FF0000; }
html[data-theme='light'] .risk-promise-card { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .risk-promise-card h3 { color: #111827; }
html[data-theme='light'] .risk-card-foot { color: #4b5563; }
html[data-theme='light'] .risk-install-row { background: #f9fafb; border-color: #e5e7eb; color: #111827; }
html[data-theme='light'] .risk-install-cmd { color: #111827; }
html[data-theme='light'] .risk-install-copy-hint { color: #9ca3af; }
html[data-theme='light'] .risk-agent-icon { background: #f9fafb; border-color: #e5e7eb; }
html[data-theme='light'] .risk-deny-ledger { background: transparent; }
html[data-theme='light'] .risk-deny-row { background: #f9fafb; border-color: #e5e7eb; color: #111827; }
html[data-theme='light'] .risk-deny-cmd { color: #dc2626; }
html[data-theme='light'] .risk-deny-badge { color: #ffffff; }
html[data-theme='light'] .risk-deny-badge--deny, html[data-theme='light'] .risk-deny-badge--ask { color: #000000; }
html[data-theme='light'] .risk-chip { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .risk-chip:hover { background: #f9fafb; border-color: #d1d5db; }
html[data-theme='light'] .risk-chip.active { background: #FFF5F5; border-color: #FF0000; }
html[data-theme='light'] .risk-chip-head { color: #111827; }
html[data-theme='light'] .risk-chip-sub { color: #6b7280; }
html[data-theme='light'] .risk-chip-decision--audit { color: #0e7490; background: rgba(14,116,144,0.08); border: 1px solid rgba(14,116,144,0.22); }
html[data-theme='light'] .risk-rule-catalog-link { color: #6b7280; }
html[data-theme='light'] .risk-layer-proof { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .risk-proof-summary { color: #374151; }
html[data-theme='light'] .risk-proof-summary:hover { background: #f9fafb; color: #111827; }
html[data-theme='light'] .risk-proof-body { border-top-color: #e5e7eb; }
html[data-theme='light'] .risk-bench-callout { background: #FFF5F5; border-color: #FF0000; color: #000000; }
html[data-theme='light'] .risk-layer-cta { border-top-color: #e5e7eb; }
html[data-theme='light'] .risk-cta-secondary { color: #374151; border-color: #e5e7eb; }
html[data-theme='light'] .risk-cta-secondary:hover { color: #000000; border-color: #FF0000; }
html[data-theme='light'] .risk-cta-hint { color: #6b7280; }
/* Compare wrap background */
html[data-theme='light'] .b-compare-wrap { background: transparent; }
html[data-theme='light'] .b-compare-scroll::after {
  background: linear-gradient(to left, #f3f4f6, transparent);
}
/* table scrolls on mobile — no stacked-card overrides needed */

/* ── Language badges strip ──────────────────────────────────────────────── */
html[data-theme='light'] .badge-typescript { background: rgba(29,78,216,0.08); color: #1d4ed8; border-color: rgba(29,78,216,0.2); }
html[data-theme='light'] .badge-rust       { background: rgba(194,65,12,0.08);  color: #c2410c; border-color: rgba(194,65,12,0.2); }
html[data-theme='light'] .badge-python     { background: rgba(22,101,52,0.08);  color: #15803d; border-color: rgba(22,101,52,0.2); }
html[data-theme='light'] .badge-go         { background: rgba(6,95,124,0.08);   color: #0e7490; border-color: rgba(6,95,124,0.2); }
html[data-theme='light'] .badge-bash       { background: rgba(22,101,52,0.08);  color: #15803d; border-color: rgba(22,101,52,0.2); }
html[data-theme='light'] .badge-git        { background: rgba(255, 0, 0, 0.08);  color: #000000; border-color: rgba(255, 0, 0, 0.2); }
html[data-theme='light'] .badge-agent      { background: rgba(88,28,135,0.08);  color: #7c3aed; border-color: rgba(88,28,135,0.2); }
html[data-theme='light'] .badge-npm        { background: rgba(153,27,27,0.08);  color: #b91c1c; border-color: rgba(153,27,27,0.2); }
html[data-theme='light'] .badge-security   { background: rgba(220,38,38,0.07);  color: #dc2626; border-color: rgba(220,38,38,0.18); }
html[data-theme='light'] .badge-privacy    { background: rgba(13,148,136,0.07); color: #0f766e; border-color: rgba(13,148,136,0.18); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
html[data-theme='light'] .faq-section { border-top-color: #e5e7eb; }
html[data-theme='light'] .faq-section h2 { color: #111827; }
html[data-theme='light'] .faq-section .section-sub { color: #4b5563; }
html[data-theme='light'] .faq-item { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .faq-item summary { color: #111827; }
html[data-theme='light'] .faq-item summary::after { color: #9ca3af; }
html[data-theme='light'] .faq-item[open] summary { color: #0f172a; }
html[data-theme='light'] .faq-item[open] summary::after { color: #7c3aed; }
html[data-theme='light'] .faq-body { color: #4b5563; }
html[data-theme='light'] .faq-body code { background: #FFF5F5; color: #000000; border: 1px solid #FF0000; }
html[data-theme='light'] .faq-link { color: #7c3aed; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
html[data-theme='light'] .pricing-section { border-top-color: #e5e7eb; }
html[data-theme='light'] .pricing-section h2 { color: #111827; }
html[data-theme='light'] .pricing-section .section-sub { color: #4b5563; }
html[data-theme='light'] .pricing-toggle-label { color: #6b7280; }
html[data-theme='light'] .pricing-toggle-label:hover { color: #374151; }
html[data-theme='light'] .pricing-toggle-label.active { color: #111827; }
html[data-theme='light'] .pricing-slider { background-color: #d1d5db; border-color: #9ca3af; }
html[data-theme='light'] .price-card { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .price-card:hover { border-color: #d1d5db; }
html[data-theme='light'] .price-featured {
  border-color: #FF0000;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.15), 0 8px 24px rgba(255, 0, 0, 0.1);
}
html[data-theme='light'] .price-card h3 { color: #111827; }
html[data-theme='light'] .price-amount { color: #111827; }
html[data-theme='light'] .price-amount span { color: #6b7280; }
html[data-theme='light'] .price-period { color: #9ca3af; }
html[data-theme='light'] .price-card li { color: #374151; }
html[data-theme='light'] .price-card li::before { color: #15803d; }
html[data-theme='light'] .pricing-detail a { color: #000000; }

/* ── Ecosystem section ──────────────────────────────────────────────────── */
html[data-theme='light'] .ecosystem-section { border-top-color: #e5e7eb; }
html[data-theme='light'] .ecosystem-section h2 { color: #111827; }
html[data-theme='light'] .ecosystem-section .section-sub { color: #4b5563; }
html[data-theme='light'] .eco-card {
  background: #ffffff; border-color: #e5e7eb; border-top-color: #e5e7eb;
  backdrop-filter: none;
}
html[data-theme='light'] .eco-card:hover {
  border-color: #d1d5db; border-top-color: #FF0000;
  box-shadow: 0 14px 30px rgba(255, 0, 0, 0.08);
}
html[data-theme='light'] .eco-card h3 { color: #111827; }
html[data-theme='light'] .eco-card p { color: #4b5563; }
html[data-theme='light'] .eco-card-link { color: #000000; }

/* ── Incident Dispatch (listing) ──────────────────────────────────────── */
html[data-theme='light'] .dispatch {
  --d-bg: #f8fafc;
  --d-surface: #ffffff;
  --d-surface-2: #f1f5f9;
  --d-border: #e5e7eb;
  --d-border-strong: #cbd5e1;
  --d-text: #0f172a;
  --d-dim: #475569;
  --d-muted: #94a3b8;
  background: #f8fafc; color: #0f172a;
}
html[data-theme='light'] .dispatch-masthead { border-bottom-color: #e5e7eb; }
html[data-theme='light'] .dispatch-masthead__pub,
html[data-theme='light'] .dispatch-masthead__sep { color: #64748b; }
html[data-theme='light'] .dispatch-masthead__title,
html[data-theme='light'] .dispatch-masthead__title-alt { color: #0f172a; }
html[data-theme='light'] .dispatch-masthead__lede { color: #475569; }
html[data-theme='light'] .dispatch-masthead__stat { color: #475569; }
html[data-theme='light'] .dispatch-masthead__stat strong { color: #0f172a; }
html[data-theme='light'] .dispatch-feed { background: #f1f5f9; border-color: #e5e7eb; }
html[data-theme='light'] .dispatch-feed__label { color: #334155; }
html[data-theme='light'] .dispatch-feed__item,
html[data-theme='light'] .dispatch-feed__title { color: #475569; }
html[data-theme='light'] .dispatch-feed__id { color: #64748b; }
html[data-theme='light'] .dispatch-controls { border-bottom-color: #e5e7eb; }
html[data-theme='light'] .dispatch-chip {
  background: #ffffff; border-color: #e5e7eb; color: #475569;
}
html[data-theme='light'] .dispatch-chip:hover { border-color: #cbd5e1; color: #0f172a; }
html[data-theme='light'] .dispatch-chip--active {
  background: #0f172a; color: #ffffff; border-color: #0f172a;
}
html[data-theme='light'] .dispatch-search__input {
  background: #ffffff; border-color: #e5e7eb; color: #0f172a;
}
html[data-theme='light'] .dispatch-search__input::placeholder { color: #64748b; }
html[data-theme='light'] .dispatch-search__input:focus { border-color: #FF0000; }
html[data-theme='light'] .dispatch-search__icon { color: #64748b; }
html[data-theme='light'] .dispatch-search__kbd {
  background: #f1f5f9; border-color: #e5e7eb; color: #475569;
}
html[data-theme='light'] .dispatch-sort { border-color: #e5e7eb; }
html[data-theme='light'] .dispatch-sort__btn { color: #64748b; border-right-color: #e5e7eb; }
html[data-theme='light'] .dispatch-sort__btn:hover { background: rgba(15,23,42,0.03); color: #0f172a; }
html[data-theme='light'] .dispatch-sort__btn--active { background: #0f172a; color: #ffffff; }
html[data-theme='light'] .dispatch-case {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .dispatch-case:hover {
  border-color: #cbd5e1; box-shadow: 0 14px 40px rgba(15,23,42,0.08);
}
html[data-theme='light'] .dispatch-case__id { color: #64748b; }
html[data-theme='light'] .dispatch-case__title { color: #0f172a; }
html[data-theme='light'] .dispatch-case__desc { color: #475569; }
html[data-theme='light'] .dispatch-case__foot { border-top-color: #e5e7eb; color: #64748b; }
html[data-theme='light'] .dispatch-case__pill {
  background: #f1f5f9; border-color: #e5e7eb; color: #475569;
}
html[data-theme='light'] .dispatch-case__latency { color: #475569; }
html[data-theme='light'] .dispatch-empty {
  background: #f8fafc; border-color: #e5e7eb; color: #475569;
}
html[data-theme='light'] .dispatch-empty__code { color: #64748b; }
html[data-theme='light'] .dispatch-empty__msg { color: #64748b; }
html[data-theme='light'] .dispatch-empty__reset { color: #475569; border-color: #e5e7eb; }
html[data-theme='light'] .dispatch-empty__reset:hover { color: #0f172a; border-color: #cbd5e1; }
html[data-theme='light'] .dispatch-install {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .dispatch-install__eyebrow { color: #64748b; }
html[data-theme='light'] .dispatch-install__title { color: #0f172a; }
html[data-theme='light'] .dispatch-status { color: #64748b; }

/* ── Case Report (detail) ──────────────────────────────────────────────── */
html[data-theme='light'] .report {
  --r-bg: #f8fafc;
  --r-surface: #ffffff;
  --r-surface-2: #f1f5f9;
  --r-border: #e5e7eb;
  --r-border-strong: #cbd5e1;
  --r-text: #0f172a;
  --r-dim: #475569;
  --r-muted: #94a3b8;
  background: #f8fafc; color: #0f172a;
}
html[data-theme='light'] .report-strip { border-bottom-color: #e5e7eb; color: #475569; }
html[data-theme='light'] .report-strip__id,
html[data-theme='light'] .report-strip__pub,
html[data-theme='light'] .report-strip__tag { color: #475569; }
html[data-theme='light'] .report-breadcrumb { color: #64748b; }
html[data-theme='light'] .report-breadcrumb__link { color: #475569; }
html[data-theme='light'] .report-breadcrumb__link:hover { color: #0f172a; }
html[data-theme='light'] .report-breadcrumb__cur { color: #0f172a; }
html[data-theme='light'] .report-breadcrumb__cat { color: #64748b; }
html[data-theme='light'] .report-breadcrumb__sep { color: #64748b; }
html[data-theme='light'] .report-title { color: #0f172a; }
html[data-theme='light'] .report-lede { color: #475569; }
html[data-theme='light'] .report-stats { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .report-stats__item { border-right-color: #e5e7eb; border-bottom-color: #e5e7eb; }
html[data-theme='light'] .report-stats__item dt { color: #64748b; }
html[data-theme='light'] .report-stats__item dd { color: #0f172a; }
html[data-theme='light'] .report-stats__unit { color: #64748b; }
html[data-theme='light'] .report-toc {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .report-toc__label { color: #64748b; }
html[data-theme='light'] .report-toc__link { color: #475569; border-left-color: transparent; }
html[data-theme='light'] .report-toc__link:hover { color: #0f172a; }
html[data-theme='light'] .report-toc__link--active,
html[data-theme='light'] .report-toc__item.is-active .report-toc__link {
  color: #000000; border-left-color: #FF0000;
}
html[data-theme='light'] .report-toc__num { color: #64748b; }
html[data-theme='light'] .report-toc__text { color: inherit; }
html[data-theme='light'] .report-body { color: #334155; }
html[data-theme='light'] .report-body h2 { color: #0f172a; }
html[data-theme='light'] .report-body h3 { color: #0f172a; }
html[data-theme='light'] .report-body h2::before { color: #000000; }
html[data-theme='light'] .report-body a { color: #000000; }
html[data-theme='light'] .report-body strong { color: #0f172a; }
html[data-theme='light'] .report-body code {
  background: #f1f5f9; border-color: #e5e7eb; color: #0f172a;
}
html[data-theme='light'] .report-body pre {
  background: #0f172a; border-color: #1e293b; color: #e2e8f0;
}
html[data-theme='light'] .report-body blockquote { border-left-color: #FF0000; color: #475569; }
html[data-theme='light'] .report-signoff {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .report-signoff__sigil { background: #0f172a; color: #ffffff; }
html[data-theme='light'] .report-signoff__by { color: #64748b; }
html[data-theme='light'] .report-signoff__text { color: #0f172a; }
html[data-theme='light'] .report-signoff__meta { color: #64748b; }
html[data-theme='light'] .report-signoff__copy { color: #475569; }
html[data-theme='light'] .report-side__card {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .report-side__eyebrow { color: #64748b; }
html[data-theme='light'] .report-side__verdict { color: #0f172a; }
html[data-theme='light'] .report-side__verdict-caption { color: #64748b; }
html[data-theme='light'] .report-side__feature { color: #475569; }
html[data-theme='light'] .report-side__cta { color: #000000; }
html[data-theme='light'] .report-side__cta:hover { color: #000000; }
html[data-theme='light'] .report-side__cta-arrow { color: #000000; }
html[data-theme='light'] .report-related__item { border-color: #e5e7eb; background: #ffffff; }
html[data-theme='light'] .report-related__item:hover { border-color: #cbd5e1; background: rgba(15,23,42,0.02); }
html[data-theme='light'] .report-related__id { color: #64748b; }
html[data-theme='light'] .report-related__title { color: #0f172a; }
html[data-theme='light'] .report-related__cat { color: #64748b; }
html[data-theme='light'] .report-bottom {
  background: #ffffff; border-color: #e5e7eb;
}
html[data-theme='light'] .report-bottom__title { color: #0f172a; }
html[data-theme='light'] .report-bottom__eyebrow { color: #64748b; }
html[data-theme='light'] .report-bottom__copy { color: #475569; }
html[data-theme='light'] .report-bottom__cta--ghost { color: #475569; border-color: #e5e7eb; }
html[data-theme='light'] .report-bottom__cta--ghost:hover { color: #0f172a; border-color: #cbd5e1; }

/* ── Contact page ──────────────────────────────────────────────────────── */
html[data-theme='light'] .contact-page h1 { color: #111827; }
html[data-theme='light'] .contact-page .contact-sub { color: #4b5563; }
html[data-theme='light'] .form-group label { color: #6b7280; }
html[data-theme='light'] .form-input,
html[data-theme='light'] .form-select,
html[data-theme='light'] .form-textarea {
  background: #ffffff; border-color: #d1d5db; color: #111827;
}
html[data-theme='light'] .form-input:focus,
html[data-theme='light'] .form-select:focus,
html[data-theme='light'] .form-textarea:focus {
  border-color: #FF0000; box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}
html[data-theme='light'] .form-input::placeholder,
html[data-theme='light'] .form-textarea::placeholder { color: #9ca3af; }
html[data-theme='light'] .form-select option { background: #ffffff; color: #111827; }
html[data-theme='light'] .contact-success {
  background: rgba(21,128,61,0.07); border-color: rgba(21,128,61,0.25); color: #15803d;
}

/* ── Security page ──────────────────────────────────────────────────────── */
html[data-theme='light'] .security-page h1 { color: #111827; }
html[data-theme='light'] .security-page .intro-sub { color: #4b5563; }
html[data-theme='light'] .security-section h2 { color: #111827; border-bottom-color: #e5e7eb; }
html[data-theme='light'] .security-section p { color: #374151; }
html[data-theme='light'] .security-card { background: #ffffff; border-color: #e5e7eb; }
html[data-theme='light'] .security-card p { color: #4b5563; }

/* ── Footer (bare selector + inner elements) ──────────────────────────── */
html[data-theme='light'] footer { border-top-color: #e5e7eb; }
html[data-theme='light'] .footer-brand p { color: #9ca3af; }
html[data-theme='light'] .footer-links a { color: #9ca3af; }
html[data-theme='light'] .footer-links a:hover { color: #000000; }
html[data-theme='light'] .copyright { color: #d1d5db; }

/* ── Promo banner remaining states ──────────────────────────────────────── */
html[data-theme='light'] .ph-launch-dismiss { color: #9ca3af; }
html[data-theme='light'] .ph-launch-dismiss:hover { color: #374151; }

/* ── Section dividers (misc border-top: #1a1a1a) ───────────────────────── */
html[data-theme='light'] .pricing-section,
html[data-theme='light'] .faq-section,
html[data-theme='light'] .ecosystem-section,
html[data-theme='light'] .hub-section { border-top-color: #e5e7eb; }

/* ════════════════════════════════════════════════════════════════════════
   ▼  APPLE HUMAN INTERFACE GUIDELINES — luxury overlay (iOS / macOS)
   ════════════════════════════════════════════════════════════════════════
   Tokens, typography, and component overrides modelled on the Apple
   developer reference. The overlay re-skins existing classes (nav, hero,
   buttons, pricing, FAQ) and adds new .hig-* primitives so any new
   marketing surface can adopt the editorial language. Dark is canonical;
   light is fully tracked through data-theme='light' selectors.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Apple system colour scale — dark canon */
  --hig-blue:    #0a84ff;
  --hig-indigo:  #5e5ce6;
  --hig-purple:  #bf5af2;
  --hig-pink:    #ff375f;
  --hig-red:     #ff453a;
  --hig-orange:  #FF0000;
  --hig-yellow:  #ffd60a;
  --hig-green:   #30d158;
  --hig-mint:    #66d4cf;
  --hig-teal:    #6ac4dc;
  --hig-cyan:    #64d2ff;
  --hig-brand:   #FF0000;
  --hig-brand-2: #FF0000;

  /* Surfaces — dark (Apple "Materials" palette) */
  --hig-bg-0:    #0a0a0c;
  --hig-bg-1:    #0e0e10;
  --hig-bg-2:    #141417;
  --hig-bg-3:    #1c1c1f;
  --hig-bg-4:    #232327;
  --hig-line-0:  rgba(255,255,255,0.06);
  --hig-line-1:  rgba(255,255,255,0.10);
  --hig-line-2:  rgba(255,255,255,0.16);
  --hig-fg-0:    #ffffff;
  --hig-fg-1:    #ebebf0;
  --hig-fg-2:    rgba(235,235,245,0.78);
  --hig-fg-3:    rgba(235,235,245,0.55);
  --hig-fg-4:    rgba(235,235,245,0.32);

  /* Materials & elevations */
  --hig-vibrancy: rgba(28,28,30,0.72);
  --hig-shadow-1: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.30);
  --hig-shadow-2: 0 1px 3px rgba(0,0,0,0.48), 0 24px 60px rgba(0,0,0,0.40);

  /* Type — SF Pro stack (system fallback first) */
  --hig-font: -apple-system, 'SF Pro Text', 'SF Pro Display', BlinkMacSystemFont, 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --hig-font-display: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --hig-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', 'Cascadia Code', monospace;
}

html[data-theme='light'] {
  --hig-blue:    #007aff;
  --hig-indigo:  #5856d6;
  --hig-purple:  #af52de;
  --hig-pink:    #ff2d55;
  --hig-red:     #ff3b30;
  --hig-orange:  #FF0000;
  --hig-yellow:  #ffcc00;
  --hig-green:   #34c759;
  --hig-teal:    #5ac8fa;

  --hig-bg-0:    #f5f5f7;
  --hig-bg-1:    #ffffff;
  --hig-bg-2:    #fafafa;
  --hig-bg-3:    #f0f0f3;
  --hig-bg-4:    #e8e8ed;
  --hig-line-0:  rgba(0,0,0,0.06);
  --hig-line-1:  rgba(0,0,0,0.10);
  --hig-line-2:  rgba(0,0,0,0.18);
  --hig-fg-0:    #1d1d1f;
  --hig-fg-1:    #1d1d1f;
  --hig-fg-2:    rgba(60,60,67,0.85);
  --hig-fg-3:    rgba(60,60,67,0.62);
  --hig-fg-4:    rgba(60,60,67,0.32);

  --hig-vibrancy: rgba(255,255,255,0.78);
  --hig-shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --hig-shadow-2: 0 2px 6px rgba(0,0,0,0.06), 0 32px 80px rgba(0,0,0,0.10);
}

/* ── Body & typography reset (HIG) ─────────────────────────────────────── */
body {
  font-family: var(--hig-font);
  font-feature-settings: 'ss01','cv02','cv11','cv09';
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--hig-bg-0);
  color: var(--hig-fg-1);
}
html[data-theme='light'] body {
  background: var(--hig-bg-0);
}

code, pre, .font-mono { font-family: var(--hig-font-mono); }

/* ── Header / nav ──────────────────────────────────────────────────────── */
#app-root > header {
  border-bottom: 0.5px solid var(--hig-line-1);
  background: color-mix(in oklab, var(--hig-bg-0) 86%, transparent);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
          backdrop-filter: blur(40px) saturate(180%);
  position: sticky; top: 0; z-index: 90;
  max-width: none;
}
#app-root > header > .logo,
#app-root > header > nav,
#app-root > header > .mobile-menu-btn {
  max-width: 1240px;
}
#app-root > header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.75rem; }
.logo { color: var(--hig-fg-0); letter-spacing: -0.022em; font-weight: 600; font-size: 1.05rem; }
.logo:hover { color: var(--hig-brand); }
.logo .logo-word { font-family: var(--hig-font-display); }

.nav-trigger, .nav-direct {
  color: var(--hig-fg-2); font-weight: 500; font-size: 0.86rem;
  letter-spacing: -0.005em; padding: 0.4rem 0.7rem; border-radius: 8px;
  transition: color 140ms ease, background 140ms ease;
}
.nav-trigger:hover, .nav-direct:hover, .nav-item.open > .nav-trigger {
  color: var(--hig-fg-0); background: var(--hig-line-0);
}

/* Dropdown — translucent vibrancy */
.nav-dropdown {
  background: var(--hig-vibrancy);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
          backdrop-filter: blur(60px) saturate(180%);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 14px;
  box-shadow: var(--hig-shadow-2);
  padding: 1.1rem 1.4rem;
  min-width: 460px;
}
.nav-col-label {
  color: var(--hig-fg-3); font-size: 0.62rem;
  letter-spacing: 0.08em; font-weight: 600;
}
.nav-col a { color: var(--hig-fg-2); font-size: 0.85rem; padding: 0.32rem 0; }
.nav-col a:hover { color: var(--hig-brand); }

/* CTAs — capsule HIG buttons */
.nav-try-ssg {
  background: var(--hig-brand);
  color: #000000 !important;
  font-weight: 590;
  letter-spacing: -0.005em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.825rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px rgba(255, 0, 0, 0.32);
  transition: transform 120ms cubic-bezier(0.32,0.72,0,1), box-shadow 160ms ease, background 160ms ease;
}
.nav-try-ssg:hover {
  background: #ff0000;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 24px rgba(255, 0, 0, 0.42);
}
.nav-login {
  background: transparent !important;
  color: var(--hig-fg-1) !important;
  border: 0.5px solid var(--hig-line-2) !important;
  border-radius: 999px;
  font-weight: 500;
  padding: 0.45rem 0.95rem;
}
.nav-login:hover {
  background: var(--hig-line-0) !important;
  border-color: var(--hig-line-2) !important;
  color: var(--hig-fg-0) !important;
}
.nav-dashboard {
  background: var(--hig-fg-0) !important;
  color: var(--hig-bg-0) !important;
  border-radius: 999px !important;
  border: 0.5px solid transparent !important;
  font-weight: 590;
  padding: 0.45rem 0.95rem;
}

.nav-theme-toggle {
  background: transparent;
  border: 0.5px solid var(--hig-line-1);
  color: var(--hig-fg-2);
  width: 2.25rem; height: 2.25rem;
}
.nav-theme-toggle:hover {
  background: var(--hig-line-0);
  border-color: var(--hig-line-2);
  color: var(--hig-fg-0);
}

/* ── Hero — editorial display typography ──────────────────────────────── */
.hero {
  /* Fluid vertical padding: keeps the generous 8rem breathing room on desktop
     but scales down to ~3rem on phones so there isn't a giant empty band below
     the sticky 68px header. clamp() avoids the source-order trap where this base
     rule (defined after the @media max-width:640px hero override above) would
     otherwise reinstate the full 8rem on mobile. */
  padding: clamp(3rem, 11vw, 8rem) 1.5rem clamp(3.5rem, 9vw, 6.5rem);
  max-width: 1080px;
}
.hero-glow {
  background: radial-gradient(circle, rgba(255, 0, 0, 0.12) 0%, rgba(255, 0, 0, 0) 70%);
  filter: blur(70px);
}
.hero h1 {
  font-family: var(--hig-font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7.2vw, 5.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--hig-fg-0);
}
.hero-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #FF0000 70%, #FF0000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html[data-theme='light'] .hero-gradient {
  background: linear-gradient(135deg, #1d1d1f 0%, #FF0000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .subtitle {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--hig-fg-2);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.42;
  text-wrap: pretty;
  max-width: 720px;
}
.subtitle-sub { color: var(--hig-fg-3); font-size: 0.95rem; }
.hero .accent { color: var(--hig-brand); font-weight: 600; }

/* Hero install row — flat HIG card, no blur, no drop shadow */
.install-commands { gap: 0.6rem; }
.install-row {
  background: var(--hig-bg-1);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  box-shadow: none;
  transition: border-color 200ms ease;
}
.install-row:hover {
  border-color: color-mix(in oklab, var(--hig-brand) 50%, var(--hig-line-2));
  transform: none;
}
.install-label {
  color: var(--hig-fg-3); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
}
.install-cmd { font-family: var(--hig-font-mono); color: var(--hig-brand); font-size: 0.92rem; }
.copied-tooltip {
  background: var(--hig-green); color: #fff;
  border-radius: 999px; padding: 0.22em 0.7em;
  box-shadow: 0 6px 18px rgba(48,209,88,0.36);
}

/* ── Buttons (HIG capsule) ─────────────────────────────────────────────── */
.btn {
  border-radius: 999px;
  font-weight: 590;
  letter-spacing: -0.005em;
  padding: 0.78rem 1.6rem;
  transition: transform 120ms cubic-bezier(0.32,0.72,0,1), box-shadow 200ms ease, background 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: var(--hig-brand);
  color: #000000;
  border: 0.5px solid color-mix(in oklab, var(--hig-brand) 70%, #000);
  box-shadow: none;
}
.btn-primary:hover {
  background: #ff0000;
  border-color: #ff0000;
}
.btn-primary:active { transform: translateY(0.5px); }
.btn-secondary {
  background: transparent;
  color: var(--hig-fg-0);
  border: 0.5px solid var(--hig-line-2);
}
.btn-secondary:hover {
  background: var(--hig-line-0);
  border-color: var(--hig-line-2);
  color: var(--hig-fg-0);
}

/* ── Eyebrow (.pg-eyebrow / .community-eyebrow) ────────────────────────── */
.pg-eyebrow, .community-eyebrow {
  background: color-mix(in oklab, var(--hig-brand) 12%, transparent);
  border: 0.5px solid color-mix(in oklab, var(--hig-brand) 40%, var(--hig-line-1));
  color: var(--hig-brand);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.78rem;
  border-radius: 999px;
}
.community-eyebrow { color: var(--hig-indigo); border-color: color-mix(in oklab, var(--hig-indigo) 40%, var(--hig-line-1)); background: color-mix(in oklab, var(--hig-indigo) 12%, transparent); }

/* ── Community CTA — translucent vibrancy panel ────────────────────────── */
.community-cta-inner {
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in oklab, var(--hig-indigo) 12%, transparent), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, color-mix(in oklab, var(--hig-purple) 10%, transparent), transparent 70%),
    color-mix(in oklab, var(--hig-bg-2) 70%, transparent);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(40px) saturate(180%);
          backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--hig-shadow-1);
}
.community-cta-text h2 {
  font-family: var(--hig-font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--hig-fg-0);
}
.community-cta-text p { color: var(--hig-fg-2); }
.community-btn { border-radius: 999px; font-weight: 590; padding: 0.7rem 1.3rem; }
.community-btn--discord { background: var(--hig-indigo); border-color: var(--hig-indigo); color: #fff; }
.community-btn--discord:hover { background: color-mix(in oklab, var(--hig-indigo) 88%, white); border-color: transparent; }
.community-btn--slack {
  background: color-mix(in oklab, var(--hig-bg-3) 80%, transparent);
  border: 0.5px solid var(--hig-line-2);
  color: var(--hig-fg-0);
}

/* ── Pricing — premium HIG cards ───────────────────────────────────────── */
.pricing-section h2, .faq-section h2 {
  font-family: var(--hig-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--hig-fg-0);
}
.pricing-section .section-sub, .faq-section .section-sub {
  color: var(--hig-fg-2);
  font-size: 1.05rem;
  letter-spacing: -0.012em;
}
.pricing-toggle-label { color: var(--hig-fg-3); }
.pricing-toggle-label.active { color: var(--hig-fg-0); }
.pricing-save-badge {
  background: color-mix(in oklab, var(--hig-green) 16%, transparent);
  color: var(--hig-green);
  border: 0.5px solid color-mix(in oklab, var(--hig-green) 36%, var(--hig-line-1));
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.pricing-slider { background: var(--hig-bg-3); border-color: var(--hig-line-2); }
.pricing-switch input:checked + .pricing-slider { background: var(--hig-green); border-color: var(--hig-green); }

.price-card {
  background: color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 22px;
  padding: 2.25rem 1.75rem 1.75rem;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--hig-shadow-1);
  transition: transform 200ms cubic-bezier(0.32,0.72,0,1), border-color 200ms ease, box-shadow 200ms ease;
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: var(--hig-line-2);
  box-shadow: var(--hig-shadow-2);
}
.price-featured {
  border: 0.5px solid color-mix(in oklab, var(--hig-brand) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--hig-brand) 18%, transparent),
    0 24px 70px color-mix(in oklab, var(--hig-brand) 14%, transparent);
  background:
    radial-gradient(80% 100% at 50% 0%, color-mix(in oklab, var(--hig-brand) 10%, transparent), transparent 60%),
    color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
}
.price-badge {
  background: linear-gradient(180deg, var(--hig-brand-2), var(--hig-brand));
  color: #000000;
  border-radius: 999px;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 14px rgba(255, 0, 0, 0.32);
  font-weight: 700;
}
.price-card h3 {
  font-family: var(--hig-font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--hig-fg-1);
}
.price-amount {
  font-family: var(--hig-font-display);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--hig-fg-0);
}
.price-amount span { color: var(--hig-fg-3); font-weight: 500; }
.price-period { color: var(--hig-fg-3); }
.price-card li { color: var(--hig-fg-2); font-size: 0.88rem; }
.price-card li::before { color: var(--hig-green); }
.price-card .btn { border-radius: 999px; padding: 0.72rem 1rem; font-weight: 590; }

/* ── FAQ — inset-grouped HIG list ──────────────────────────────────────── */
.faq-list { gap: 0.5rem; }
.faq-item {
  background: color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: border-color 160ms ease;
}
.faq-item:hover { border-color: var(--hig-line-2); }
.faq-item summary {
  font-family: var(--hig-font);
  font-weight: 590;
  letter-spacing: -0.012em;
  color: var(--hig-fg-1);
  font-size: 1rem;
  padding: 1.1rem 1.4rem;
}
.faq-item[open] summary { color: var(--hig-fg-0); }
.faq-item summary::after { color: var(--hig-fg-3); transition: transform 200ms cubic-bezier(0.32,0.72,0,1); }
.faq-item[open] summary::after { color: var(--hig-brand); }
.faq-body { color: var(--hig-fg-2); font-size: 0.92rem; line-height: 1.6; padding: 0 1.4rem 1.3rem; }
.faq-body code {
  background: color-mix(in oklab, var(--hig-bg-3) 92%, transparent);
  color: var(--hig-fg-1);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 6px;
  padding: 0.12em 0.42em;
  font-family: var(--hig-font-mono);
}
.faq-link { color: var(--hig-blue); font-weight: 500; }
.faq-link:hover { color: var(--hig-brand); text-decoration: none; }

/* ── ──────────────────────────────────────────────────────────────────── */
/* HIG primitives — re-usable luxury surfaces                              */
/* ── ──────────────────────────────────────────────────────────────────── */

/* Display typography */
.hig-display-1 {
  font-family: var(--hig-font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--hig-fg-0);
  text-wrap: balance;
}
.hig-display-2 {
  font-family: var(--hig-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.85rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: var(--hig-fg-0);
  text-wrap: balance;
}
.hig-display-3 {
  font-family: var(--hig-font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--hig-fg-0);
  text-wrap: balance;
}
.hig-lede {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--hig-fg-2);
  font-weight: 400;
  text-wrap: pretty;
}
.hig-lede-lg {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.42;
  letter-spacing: -0.014em;
  color: var(--hig-fg-2);
  font-weight: 400;
  text-wrap: pretty;
}
.hig-eyebrow {
  display: inline-block;
  font-family: var(--hig-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hig-brand);
}

/* Ambient mesh background */
.hig-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, color-mix(in oklab, var(--hig-brand) 10%, transparent), transparent 65%),
    radial-gradient(50% 50% at 100% 0%, color-mix(in oklab, var(--hig-indigo) 8%, transparent), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, color-mix(in oklab, var(--hig-blue) 6%, transparent), transparent 65%);
  filter: blur(80px);
  z-index: 0;
  opacity: 1;
  animation: hig-ambient-drift 30s linear infinite alternate;
}
@keyframes hig-ambient-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hig-ambient { animation: none; }
}

/* Sections */
.hig-section { padding: 5.5rem 0; position: relative; }
.hig-section-tight { padding: 3.5rem 0; position: relative; }

/* Cards */
.hig-card {
  background: color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--hig-shadow-1);
  transition: transform 200ms cubic-bezier(0.32,0.72,0,1), box-shadow 200ms ease, border-color 200ms ease;
}
.hig-card:hover {
  transform: translateY(-2px);
  border-color: var(--hig-line-2);
  box-shadow: var(--hig-shadow-2);
}

/* Pills (status-style chips) */
.hig-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.78rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--hig-bg-3) 80%, transparent);
  border: 0.5px solid var(--hig-line-1);
  color: var(--hig-fg-1);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.hig-pill[data-tone="blue"]   { color: var(--hig-blue);   border-color: color-mix(in oklab, var(--hig-blue)   34%, var(--hig-line-1)); background: color-mix(in oklab, var(--hig-blue)   12%, transparent); }
.hig-pill[data-tone="green"]  { color: var(--hig-green);  border-color: color-mix(in oklab, var(--hig-green)  34%, var(--hig-line-1)); background: color-mix(in oklab, var(--hig-green)  12%, transparent); }
.hig-pill[data-tone="orange"] { color: var(--hig-orange); border-color: color-mix(in oklab, var(--hig-orange) 34%, var(--hig-line-1)); background: color-mix(in oklab, var(--hig-orange) 12%, transparent); }
.hig-pill[data-tone="red"]    { color: var(--hig-red);    border-color: color-mix(in oklab, var(--hig-red)    34%, var(--hig-line-1)); background: color-mix(in oklab, var(--hig-red)    12%, transparent); }
.hig-pill[data-tone="purple"] { color: var(--hig-purple); border-color: color-mix(in oklab, var(--hig-purple) 34%, var(--hig-line-1)); background: color-mix(in oklab, var(--hig-purple) 12%, transparent); }

/* Capsule HIG buttons (.hig-button) */
.hig-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.66rem 1.3rem;
  border-radius: 999px;
  font-family: var(--hig-font);
  font-weight: 590;
  letter-spacing: -0.005em;
  font-size: 0.94rem;
  border: 0.5px solid var(--hig-line-2);
  background: color-mix(in oklab, var(--hig-bg-2) 80%, transparent);
  color: var(--hig-fg-0);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.32,0.72,0,1), background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.hig-button:hover { background: color-mix(in oklab, var(--hig-bg-3) 92%, transparent); transform: translateY(-1px); }
.hig-button-primary {
  background: linear-gradient(180deg, var(--hig-brand-2) 0%, var(--hig-brand) 100%);
  color: #000000;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 22px rgba(255, 0, 0, 0.32);
}
.hig-button-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 12px 32px rgba(255, 0, 0, 0.42); }
.hig-button-blue {
  background: linear-gradient(180deg, color-mix(in oklab, var(--hig-blue) 90%, white) 0%, var(--hig-blue) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 22px color-mix(in oklab, var(--hig-blue) 32%, transparent);
}

/* Segmented control */
.hig-segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: color-mix(in oklab, var(--hig-bg-3) 80%, transparent);
  border: 0.5px solid var(--hig-line-1);
  border-radius: 9px;
}
.hig-segmented button {
  background: transparent;
  border: none;
  color: var(--hig-fg-2);
  font-family: var(--hig-font);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  padding: 0.3rem 0.78rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.hig-segmented button:hover { color: var(--hig-fg-0); }
.hig-segmented button.selected,
.hig-segmented button[aria-selected='true'] {
  background: color-mix(in oklab, var(--hig-bg-1) 96%, transparent);
  color: var(--hig-fg-0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 0 0 0.5px var(--hig-line-2);
}

/* Moment tile (homepage hero entry-points) */
.hig-moment {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
  border: 0.5px solid var(--hig-line-1);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--hig-shadow-1);
  transition: transform 240ms cubic-bezier(0.32,0.72,0,1), box-shadow 240ms ease, border-color 240ms ease;
  text-decoration: none;
  color: inherit;
}
.hig-moment:hover { transform: translateY(-4px); border-color: var(--hig-line-2); box-shadow: var(--hig-shadow-2); }
.hig-moment-canvas {
  height: 130px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 100% at 0% 100%, color-mix(in oklab, var(--hig-tone, var(--hig-brand)) 40%, transparent) 0%, transparent 70%),
    radial-gradient(60% 80% at 100% 0%, color-mix(in oklab, var(--hig-tone, var(--hig-brand)) 24%, transparent) 0%, transparent 65%),
    color-mix(in oklab, var(--hig-tone, var(--hig-brand)) 10%, var(--hig-bg-3));
}
.hig-moment[data-tone="blue"]   { --hig-tone: var(--hig-blue); }
.hig-moment[data-tone="orange"] { --hig-tone: var(--hig-orange); }
.hig-moment[data-tone="green"]  { --hig-tone: var(--hig-green); }
.hig-moment[data-tone="indigo"] { --hig-tone: var(--hig-indigo); }
.hig-moment[data-tone="purple"] { --hig-tone: var(--hig-purple); }
.hig-moment[data-tone="pink"]   { --hig-tone: var(--hig-pink); }
.hig-moment[data-tone="teal"]   { --hig-tone: var(--hig-teal); }
.hig-moment-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.hig-moment-title {
  font-family: var(--hig-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.018em;
  color: var(--hig-fg-0);
}
.hig-moment-desc {
  color: var(--hig-fg-2);
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  line-height: 1.42;
}

/* Pack card (rule starter packs) */
.hig-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
  border: 0.5px solid var(--hig-line-1);
  box-shadow: var(--hig-shadow-1);
  transition: transform 200ms cubic-bezier(0.32,0.72,0,1), border-color 200ms ease, box-shadow 200ms ease;
}
.hig-pack:hover { transform: translateY(-2px); border-color: var(--hig-line-2); box-shadow: var(--hig-shadow-2); }
.hig-pack-canvas {
  height: 96px;
  background:
    radial-gradient(80% 100% at 0% 100%, color-mix(in oklab, var(--hig-tone, var(--hig-brand)) 36%, transparent) 0%, transparent 65%),
    color-mix(in oklab, var(--hig-tone, var(--hig-brand)) 10%, var(--hig-bg-3));
}
.hig-pack[data-tone="blue"]   { --hig-tone: var(--hig-blue); }
.hig-pack[data-tone="orange"] { --hig-tone: var(--hig-orange); }
.hig-pack[data-tone="red"]    { --hig-tone: var(--hig-red); }
.hig-pack[data-tone="green"]  { --hig-tone: var(--hig-green); }
.hig-pack[data-tone="purple"] { --hig-tone: var(--hig-purple); }
.hig-pack[data-tone="teal"]   { --hig-tone: var(--hig-teal); }
.hig-pack-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.hig-pack-title { font-family: var(--hig-font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.014em; color: var(--hig-fg-0); }
.hig-pack-desc { color: var(--hig-fg-2); font-size: 0.85rem; line-height: 1.45; }

/* Decision reveal (simulator-style result) */
.hig-decision {
  position: relative;
  border-radius: 24px;
  border: 0.5px solid color-mix(in oklab, var(--hig-decision-tone, var(--hig-brand)) 36%, var(--hig-line-1));
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in oklab, var(--hig-decision-tone, var(--hig-brand)) 14%, transparent) 0%, transparent 60%),
    color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
  box-shadow: 0 24px 60px color-mix(in oklab, var(--hig-decision-tone, var(--hig-brand)) 14%, transparent), var(--hig-shadow-1);
  overflow: hidden;
}
.hig-decision[data-decision="block"]  { --hig-decision-tone: var(--hig-red); }
.hig-decision[data-decision="ask"]    { --hig-decision-tone: var(--hig-orange); }
.hig-decision[data-decision="allow"]  { --hig-decision-tone: var(--hig-green); }
.hig-decision[data-decision="log"]    { --hig-decision-tone: var(--hig-blue); }
.hig-decision[data-decision="force"]  { --hig-decision-tone: var(--hig-purple); }

/* Feed row (live activity) */
.hig-feed-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 0.5px solid var(--hig-line-0);
  background: color-mix(in oklab, var(--hig-bg-2) 60%, transparent);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.32,0.72,0,1);
}
.hig-feed-row:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--hig-bg-2) 80%, transparent); border-color: var(--hig-line-1); }
.hig-feed-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--hig-tone, var(--hig-fg-3));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--hig-tone, var(--hig-fg-3)) 14%, transparent);
  flex-shrink: 0;
}

/* Banner (CTA full-width) */
.hig-banner {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: 3rem 3.25rem;
  border: 0.5px solid color-mix(in oklab, var(--hig-banner-tone, var(--hig-brand)) 36%, var(--hig-line-1));
  background:
    radial-gradient(80% 100% at 0% 100%, color-mix(in oklab, var(--hig-banner-tone, var(--hig-brand)) 22%, transparent) 0%, transparent 68%),
    radial-gradient(50% 80% at 100% 0%, color-mix(in oklab, var(--hig-banner-tone-2, var(--hig-indigo)) 18%, transparent) 0%, transparent 70%),
    color-mix(in oklab, var(--hig-bg-2) 92%, transparent);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  box-shadow: var(--hig-shadow-2);
}
.hig-banner[data-tone="brand"] { --hig-banner-tone: var(--hig-brand); --hig-banner-tone-2: var(--hig-orange); }
.hig-banner[data-tone="blue"]  { --hig-banner-tone: var(--hig-blue);  --hig-banner-tone-2: var(--hig-indigo); }
.hig-banner[data-tone="green"] { --hig-banner-tone: var(--hig-green); --hig-banner-tone-2: var(--hig-mint); }

/* Entrance animation */
@keyframes hig-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hig-rise {
  opacity: 0;
  animation: hig-rise 600ms cubic-bezier(0.32,0.72,0,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hig-rise { opacity: 1; animation: none; }
}

/* ── Light theme refinements for new tokens ────────────────────────────── */
html[data-theme='light'] .hero h1,
html[data-theme='light'] .hig-display-1,
html[data-theme='light'] .hig-display-2,
html[data-theme='light'] .hig-display-3,
html[data-theme='light'] .hig-moment-title,
html[data-theme='light'] .hig-pack-title,
html[data-theme='light'] .pricing-section h2,
html[data-theme='light'] .faq-section h2 { color: var(--hig-fg-0); }

html[data-theme='light'] .hero .subtitle,
html[data-theme='light'] .hig-lede,
html[data-theme='light'] .hig-lede-lg,
html[data-theme='light'] .hig-moment-desc,
html[data-theme='light'] .hig-pack-desc { color: var(--hig-fg-2); }

html[data-theme='light'] .nav-trigger,
html[data-theme='light'] .nav-direct { color: rgba(60,60,67,0.85); }
html[data-theme='light'] .nav-trigger:hover,
html[data-theme='light'] .nav-direct:hover,
html[data-theme='light'] .nav-item.open > .nav-trigger { color: #1d1d1f; background: rgba(0,0,0,0.04); }

html[data-theme='light'] .install-row {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}
html[data-theme='light'] .install-cmd { color: #000000; }
html[data-theme='light'] .install-label { color: rgba(60,60,67,0.62); }

html[data-theme='light'] .price-card {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme='light'] .price-amount { color: #1d1d1f; }
html[data-theme='light'] .price-card li { color: rgba(60,60,67,0.85); }
html[data-theme='light'] .price-card h3 { color: #1d1d1f; }

html[data-theme='light'] .faq-item {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme='light'] .faq-item summary { color: #1d1d1f; }
html[data-theme='light'] .faq-body { color: rgba(60,60,67,0.82); }

html[data-theme='light'] .community-cta-inner {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(88,86,214,0.10), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(175,82,222,0.08), transparent 70%),
    rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme='light'] .community-cta-text h2 { color: #1d1d1f; }

html[data-theme='light'] .hig-card,
html[data-theme='light'] .hig-moment,
html[data-theme='light'] .hig-pack,
html[data-theme='light'] .hig-feed-row,
html[data-theme='light'] .hig-banner {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme='light'] .hig-segmented {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme='light'] .hig-segmented button.selected,
html[data-theme='light'] .hig-segmented button[aria-selected='true'] {
  background: #ffffff;
  color: #1d1d1f;
}

html[data-theme='light'] .btn-secondary {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.10);
  color: #1d1d1f;
}
html[data-theme='light'] .nav-login {
  border-color: rgba(0,0,0,0.10) !important;
  color: #1d1d1f !important;
}
html[data-theme='light'] .nav-dashboard {
  background: #1d1d1f !important;
  color: #ffffff !important;
}

/* ── Public-home material roles and accessibility contract ─────────────── */
body:has(.marketing-home) {
  --hig-fg-3: rgba(235,235,245,0.72);
  --hig-font: system-ui, sans-serif;
  --hig-font-display: system-ui, sans-serif;
  --hig-font-mono: ui-monospace, monospace;
  --hig-focus: #FF0000;
}
html[data-theme='light'] body:has(.marketing-home) {
  --hig-fg-3: rgba(60,60,67,0.78);
  --hig-focus: #000000;
}
.marketing-home {
  min-width: 0;
  color: var(--hig-fg-1);
  /* See the matching HOME_CRITICAL_CSS rule above for why overflow-y is
     explicit here — same .hero-glow top-clip fix. */
  overflow-x: clip;
  overflow-y: visible;
  overflow-wrap: anywhere;
}
/* See the matching HOME_CRITICAL_CSS override above — inline code chips
   must never break mid-identifier even though prose around them may. */
.marketing-home code {
  overflow-wrap: normal;
  word-break: keep-all;
}
.marketing-home > section,
.marketing-home :where(.pricing-cards, .faq-list, .community-cta-inner) {
  min-width: 0;
  max-width: 100%;
}

/* The redesigned homepage keeps reading and settings planes opaque. These
   overrides intentionally live behind the route-unique wrapper so the legacy
   marketing cascade remains byte-for-byte unchanged for every other route. */
.marketing-home :is(
  .install-row,
  .install-picker__card,
  .b-moat-pillar,
  .b-compare-hl,
  .eco-card,
  .sec-item,
  .dx-card,
  .community-cta-inner,
  .price-card,
  .faq-item,
  .hig-card,
  .hig-moment,
  .hig-pack,
  .hig-decision,
  .hig-feed-row,
  .hig-banner
) {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.marketing-home .install-picker__card { background: #0d0d0d; }
.marketing-home :is(.b-moat-pillar, .b-compare-hl) { background: #141414; }
.marketing-home :is(.eco-card, .sec-item, .dx-card) { background: #101010; }
.marketing-home .community-cta-inner {
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in oklab, var(--hig-indigo) 12%, transparent), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, color-mix(in oklab, var(--hig-purple) 10%, transparent), transparent 70%),
    var(--hig-bg-2);
}
.marketing-home :is(.price-card, .faq-item, .hig-card, .hig-moment, .hig-pack) {
  background: var(--hig-bg-2);
}
.marketing-home .price-featured {
  background:
    radial-gradient(80% 100% at 50% 0%, color-mix(in oklab, var(--hig-brand) 10%, transparent), transparent 60%),
    var(--hig-bg-2);
}
.marketing-home .hig-decision {
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in oklab, var(--hig-decision-tone, var(--hig-brand)) 14%, transparent) 0%, transparent 60%),
    var(--hig-bg-2);
}
.marketing-home .hig-feed-row { background: var(--hig-bg-2); }
.marketing-home .hig-feed-row:hover { background: var(--hig-bg-3); }
.marketing-home .hig-banner {
  background:
    radial-gradient(80% 100% at 0% 100%, color-mix(in oklab, var(--hig-banner-tone, var(--hig-brand)) 22%, transparent) 0%, transparent 68%),
    radial-gradient(50% 80% at 100% 0%, color-mix(in oklab, var(--hig-banner-tone-2, var(--hig-indigo)) 18%, transparent) 0%, transparent 70%),
    var(--hig-bg-2);
}
html[data-theme='light'] .marketing-home :is(
  .price-card,
  .faq-item,
  .community-cta-inner,
  .hig-card,
  .hig-moment,
  .hig-pack,
  .hig-feed-row,
  .hig-banner
) {
  background-color: #ffffff;
}
html[data-theme='light'] .marketing-home .hig-segmented { background: #f0f0f3; }
html[data-theme='light'] .marketing-home .btn-secondary { background: #ffffff; }

/* Text-only store links are original SigmaShake controls, not store badges. */
.marketing-home .store-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 190px;
  min-height: 64px;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--hig-line-2);
  border-radius: 16px;
  background: var(--hig-bg-2);
  color: var(--hig-fg-0);
  font-family: var(--hig-font);
  filter: none;
  transform: none;
  box-shadow: var(--hig-shadow-1);
  transition: border-color 160ms ease, background 160ms ease;
}
.marketing-home .store-badge:hover {
  border-color: color-mix(in oklab, var(--hig-brand) 68%, var(--hig-line-2));
  background: var(--hig-bg-3);
  filter: none;
  transform: none;
}
.marketing-home .store-badge__eyebrow {
  color: var(--hig-fg-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.marketing-home .store-badge__label {
  margin-top: 0.2rem;
  color: var(--hig-fg-0);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* Ordinary text uses legibility-first roles across both opaque and glass
   surfaces. Semantic states retain symbols and borders as non-colour cues. */
.marketing-home :is(
  .hero-sublink,
  .clients-label,
  .hero-desktop-cta__note,
  .hero-scenario-note,
  .risk-install-tab,
  .risk-chip-sub,
  .risk-rule-catalog-link,
  .risk-proof-summary-prefix,
  .risk-cta-hint,
  .b-col-sub,
  .b-detail,
  .b-metric--dim,
  .b-summary-sep,
  .b-compare-cta-hint,
  .price-period,
  .tour-fallback__badge
) {
  color: var(--hig-fg-2);
}
.marketing-home .tour-fallback__badge { color: #a1a1aa; }
.marketing-home .pricing-billing-note { color: var(--hig-fg-2) !important; }
.marketing-home .hero-scenario-deny { color: #ff6961; }
.marketing-home .risk-install-tab.active,
.marketing-home #risk-install-label { color: #FF0000; }
.marketing-home .risk-card--install { --card-accent: #FF0000; }
.marketing-home .risk-card--deploy { --card-accent: #c4b5fd; }
.marketing-home .risk-card--protect { --card-accent: #fca5a5; }
.marketing-home .risk-deny-row:nth-child(1) .risk-deny-cmd { color: #fca5a5; }
.marketing-home .risk-deny-row:nth-child(2) .risk-deny-cmd { color: #FF0000; }
.marketing-home .risk-deny-row:nth-child(3) .risk-deny-cmd { color: #d8b4fe; }
.marketing-home .risk-deny-cmd .deny-prompt { color: var(--hig-fg-2); }
.marketing-home .risk-deny-badge--deny { background: #ff0000; color: #000000; }
.marketing-home .risk-deny-badge--force { background: #6d28d9; }
.marketing-home .b-status--fail {
  color: var(--hig-fg-2);
  background: var(--hig-bg-3);
  border-color: var(--hig-line-2);
}
.marketing-home .b-status--partial { color: #FF0000; }
.marketing-home .risk-chip-decision--deny { color: #ff6961; }

html[data-theme='light'] .marketing-home .hero-scenario-deny { color: #991b1b; }
html[data-theme='light'] .marketing-home :is(
  .clients-label,
  .b-col-sub,
  .b-compare-cta-hint,
  .price-period
) {
  color: #4b5563;
}
html[data-theme='light'] .marketing-home .risk-install-tab.active,
html[data-theme='light'] .marketing-home #risk-install-label { color: #000000; }
html[data-theme='light'] .marketing-home .risk-card--install { --card-accent: #FF0000; }
html[data-theme='light'] .marketing-home .risk-card--deploy { --card-accent: #6d28d9; }
html[data-theme='light'] .marketing-home .risk-card--protect { --card-accent: #991b1b; }
html[data-theme='light'] .marketing-home .risk-deny-row:nth-child(1) .risk-deny-cmd { color: #991b1b; }
html[data-theme='light'] .marketing-home .risk-deny-row:nth-child(2) .risk-deny-cmd { color: #000000; }
html[data-theme='light'] .marketing-home .risk-deny-row:nth-child(3) .risk-deny-cmd { color: #581c87; }
html[data-theme='light'] .marketing-home .risk-deny-badge--deny { background: #ff0000; color: #000000; }
html[data-theme='light'] .marketing-home .risk-deny-badge--ask { color: #000000; }
html[data-theme='light'] .marketing-home .risk-deny-badge--force { background: #6d28d9; }
html[data-theme='light'] .marketing-home .risk-chip-decision--deny { color: #991b1b; }
html[data-theme='light'] .marketing-home .b-detail-link { color: #000000; }
html[data-theme='light'] .marketing-home .b-compare-header--hl { background: #141417; }
html[data-theme='light'] .marketing-home .b-compare-header--hl .b-col-title { color: #ffffff; }
html[data-theme='light'] .marketing-home .b-compare-header--hl .b-col-sub,
html[data-theme='light'] .marketing-home .b-compare-hl .b-detail,
html[data-theme='light'] .marketing-home .b-compare-hl .b-detail-link { color: #000000; }
html[data-theme='light'] .marketing-home .b-status--fail {
  color: #4b5563;
  background: #f0f0f3;
  border-color: rgba(0,0,0,0.28);
}
html[data-theme='light'] .marketing-home .b-status--partial { color: #000000; }
html[data-theme='light'] .marketing-home .b-summary-chip--win {
  color: #166534;
  background: #dcfce7;
  border-color: #16a34a;
}

/* Opaque fallback for engines without backdrop-filter; the @supports block
   below upgrades only these bounded controls to functional glass. */
.marketing-home .hig-pill { background: var(--hig-bg-3); }
.marketing-home .hig-pill[data-tone="blue"] {
  background: color-mix(in oklab, var(--hig-blue) 12%, var(--hig-bg-3));
}
.marketing-home .hig-pill[data-tone="green"] {
  background: color-mix(in oklab, var(--hig-green) 12%, var(--hig-bg-3));
}
.marketing-home .hig-pill[data-tone="orange"] {
  background: color-mix(in oklab, var(--hig-orange) 12%, var(--hig-bg-3));
}
.marketing-home .hig-pill[data-tone="red"] {
  background: color-mix(in oklab, var(--hig-red) 12%, var(--hig-bg-3));
}
.marketing-home .hig-pill[data-tone="purple"] {
  background: color-mix(in oklab, var(--hig-purple) 12%, var(--hig-bg-3));
}
.marketing-home .hig-button { background: var(--hig-bg-2); }
.marketing-home .hig-button:hover { background: var(--hig-bg-3); }
.marketing-home .hig-segmented { background: var(--hig-bg-3); }

body:has(.marketing-home) > header {
  background: var(--hig-bg-0);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
body:has(.marketing-home) > header .nav-dropdown {
  background: var(--hig-bg-1);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:has(.marketing-home) > header {
    background: color-mix(in oklab, var(--hig-bg-0) 84%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
            backdrop-filter: blur(24px) saturate(145%);
  }
  body:has(.marketing-home) > header .nav-dropdown {
    background: color-mix(in oklab, var(--hig-bg-1) 84%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
            backdrop-filter: blur(24px) saturate(145%);
  }
  .marketing-home .hig-pill,
  .marketing-home .hig-button,
  .marketing-home .hig-segmented,
  .marketing-home .store-badge {
    background: color-mix(in oklab, var(--hig-bg-2) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
  }
}

/* Continuous decoration is static; bounded reveals and user state may move. */
body:has(.marketing-home)::before { animation: none; }
.marketing-home :is(
  .hero h1,
  .hero .subtitle,
  .hero-desktop-cta,
  .cta-row,
  .risk-deny-badge,
  .marquee-content,
  .hub-cursor,
  .b-compare-cta-btn,
  .b-compare-cta-btn::before,
  .hig-ambient
) {
  animation: none;
}
.marketing-home #hero-sigma-art {
  transition: none;
  will-change: auto;
}
.marketing-home .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

body:has(.marketing-home) :where(
  a,
  button,
  summary,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex='-1'])
):focus-visible {
  outline: 3px solid var(--hig-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-transparency: reduce) {
  body:has(.marketing-home) > header,
  body:has(.marketing-home) > header .nav-dropdown,
  .marketing-home :is(.hig-pill, .hig-button, .hig-segmented, .store-badge) {
    background: var(--hig-bg-1);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.marketing-home) { scroll-behavior: auto; }
  .marketing-home,
  .marketing-home *,
  .marketing-home *::before,
  .marketing-home *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  body:has(.marketing-home) {
    --hig-line-0: rgba(255,255,255,0.32);
    --hig-line-1: rgba(255,255,255,0.52);
    --hig-line-2: rgba(255,255,255,0.74);
    --hig-fg-2: #ffffff;
    --hig-fg-3: #e5e7eb;
  }
  html[data-theme='light'] body:has(.marketing-home) {
    --hig-line-0: rgba(0,0,0,0.28);
    --hig-line-1: rgba(0,0,0,0.46);
    --hig-line-2: rgba(0,0,0,0.68);
    --hig-fg-2: #29292d;
    --hig-fg-3: #3f3f46;
  }
}

@media (forced-colors: active) {
  body:has(.marketing-home) > header,
  body:has(.marketing-home) > header .nav-dropdown,
  .marketing-home :is(
    .store-badge,
    .hig-pill,
    .hig-button,
    .hig-segmented,
    .community-cta-inner,
    .price-card,
    .faq-item,
    .hig-card,
    .hig-moment,
    .hig-pack,
    .hig-feed-row,
    .hig-banner
  ) {
    color: CanvasText;
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  body:has(.marketing-home) :where(a, button, summary):focus-visible {
    outline-color: Highlight;
  }
}

@media (max-width: 480px) {
  .marketing-home .hero { padding-inline: 1rem; }
  .marketing-home .hero-badges,
  .marketing-home .store-badge,
  .marketing-home .hero-desktop-cta,
  .marketing-home .hero-desktop-cta__row,
  .marketing-home .community-cta-links {
    width: 100%;
    min-width: 0;
  }
  .marketing-home .store-badge { align-items: center; }
  .marketing-home pre,
  .marketing-home code { max-width: 100%; }
}