/* ═══════════════════════════════════════════════════════════════════════════
   Paracosm Landing Page Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme Variables ──────────────────────────────────────────────────────── */

:root {
  --bg: #0a0806;
  --bg2: #14110e;
  --bg3: #1c1915;
  --bg4: #242018;
  --bg-card: #1c1915;
  --border: #302a22;
  --border-hl: #4a3f30;
  --t1: #f5f0e4;
  --t2: #d8ccb0;
  --t3: #a89878;
  --t4: #6b5f50;
  --rust: #e06530;
  --rust-d: #8b3d1e;
  --amber: #e8b44a;
  --amber-d: #8b6a2e;
  --teal: #4ca8a8;
  --teal-d: #2a5f5f;
  --green: #6aad48;
  --pc-line: #f5f0e4;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --grad: linear-gradient(135deg, #e06530, #e8b44a, #4ca8a8);

  /* Type scale — mirrors src/cli/dashboard/src/theme/tokens.css so
     the marketing landing reads at the same rhythm as the live demo. */
  --font-3xs: 9px;
  --font-2xs: 10px;
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-lg: 14px;
  --font-xl: 16px;
  --font-2xl: 20px;
  --font-3xl: 24px;
  color-scheme: dark;
}

.light {
  --bg: #f0e6d2;
  --bg2: #d8cab0;
  --bg3: #f8f2e4;
  --bg4: #e4d8c0;
  --bg-card: #f8f2e4;
  --border: #b8a888;
  --border-hl: #9a8868;
  --t1: #1a1208;
  --t2: #2e2418;
  --t3: #4a3e2c;
  --t4: #6a5c44;
  /* AA-safe values for sepia bg (#dbcdb4 in nav, #d8cab0 in footer):
     - amber #7a5200 → #6b4700 (was 4.28-4.41:1, now 4.5:1+)
     - rust  #a83810 → #8e2c0c (was 4.13:1, now 4.5:1+)
     Synced with src/cli/dashboard/src/theme/tokens.css. */
  --rust: #8e2c0c;
  --rust-d: #5a1e06;
  --amber: #6b4700;
  --amber-d: #463000;
  --teal: #186060;
  --teal-d: #0e4040;
  --green: #305a10;
  --pc-line: #8a7e6c;
  --grad: linear-gradient(135deg, #8e2c0c, #6b4700, #186060);
  color-scheme: light;
}

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes pc-hub-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}

@keyframes pc-glow-breathe {
  0%, 100% { opacity: .06; }
  50% { opacity: .15; }
}

@keyframes pc-spoke-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: .35; }
}

@keyframes pc-cross-breathe {
  0%, 100% { opacity: .18; }
  50% { opacity: .1; }
}

.pc-hub { animation: pc-hub-pulse 4s ease-in-out infinite; }
.pc-hub-glow { animation: pc-glow-breathe 4s ease-in-out infinite; }
.pc-orbit line { animation: pc-spoke-breathe 6s ease-in-out infinite; }
.pc-cross line { animation: pc-cross-breathe 8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .pc-hub, .pc-hub-glow, .pc-orbit line, .pc-cross line {
    animation: none !important;
  }
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: var(--font-lg);
  line-height: 1.6;
  background-image: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(20, 17, 14, 1) 0%, var(--bg) 50%);
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
*:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hl); border-radius: 3px; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(10, 8, 6, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(48, 42, 34, .4);
}

.light .nav {
  background: rgba(216, 202, 176, .88);
  border-bottom-color: rgba(184, 168, 136, .5);
}

.nav-l {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-l svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nav-brand {
  font-family: var(--mono);
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--t1);
  text-decoration: none;
  letter-spacing: .08em;
}

.nav-brand:hover {
  color: var(--amber);
  text-decoration: none;
}

.nav-brand-accent { color: var(--amber); }

.nav-tag {
  font-size: var(--font-3xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--rust);
  font-family: var(--mono);
}

.nav-r {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.nav-r a {
  font-size: var(--font-md);
  color: var(--t3);
  font-weight: 500;
  transition: color .2s;
  text-decoration: none;
  white-space: nowrap;
}

.nav-r a:hover {
  color: var(--t1);
  text-decoration: none;
}

.nav-r a.cta,
.nav-r a.cta:hover {
  color: #f5f0e4;
}

/* Compact icon links in the nav (GitHub, npm). */
.nav-r .nav-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-r .nav-icon-npm {
  font-family: var(--mono);
  font-size: var(--font-sm);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--t2);
}

/* ── Nav dropdown (Sections / Docs) ───────────────────────────────────────── */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
  white-space: nowrap;
}

.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger {
  color: var(--t1);
}

.nav-dropdown-trigger svg {
  transition: transform .2s;
}

.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(14, 11, 9, .98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  z-index: 110;
}

.light .nav-dropdown-menu {
  background: rgba(232, 220, 196, .98);
  box-shadow: 0 12px 32px rgba(60, 40, 20, .25);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--font-md);
  color: var(--t2);
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: rgba(200, 88, 40, .12);
  color: var(--t1);
}

/* ── Theme toggle ─────────────────────────────────────────────────────────── */

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--t3);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--t1);
  border-color: var(--rust);
}

/* ── Tab buttons (example tabs) ───────────────────────────────────────────── */

.tab-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--t3);
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .15s, background .15s, box-shadow .15s;
  position: relative;
}

.tab-btn:last-child {
  border-right: none;
}

.tab-btn:hover {
  color: var(--t1);
  background: rgba(200, 88, 40, .04);
}

.tab-btn.active {
  color: var(--amber);
  background: var(--bg2);
  box-shadow: inset 0 -2px 0 0 var(--amber);
}

@media (max-width: 600px) {
  .tab-btn { padding: 12px 14px; font-size: var(--font-xs); }
}

/* ── CTA Button ───────────────────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: var(--font-lg);
  font-weight: 800;
  color: #f5f0e4;
  text-decoration: none;
  transition: all .25s;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #c85828 0%, #a84018 60%, #882c0c 100%);
  box-shadow: 0 1px 0 0 rgba(255, 160, 120, .2) inset,
              0 -2px 0 0 rgba(60, 20, 0, .3) inset,
              0 4px 16px rgba(0, 0, 0, .4);
  letter-spacing: .3px;
}

.nav .cta {
  padding: 8px 20px;
  font-size: var(--font-md);
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 0 rgba(255, 160, 120, .25) inset,
              0 -2px 0 0 rgba(60, 20, 0, .3) inset,
              0 8px 24px rgba(0, 0, 0, .5),
              0 0 20px rgba(200, 88, 40, .15);
  text-decoration: none;
}

.cta:active {
  transform: translateY(0);
  box-shadow: 0 -1px 0 0 rgba(60, 20, 0, .2) inset,
              0 2px 0 0 rgba(255, 160, 120, .15) inset,
              0 2px 8px rgba(0, 0, 0, .4);
}

.cta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
  animation: ctaSheen 5s ease-in-out infinite;
}

.cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .2s;
}

.cta:hover svg { transform: translateX(3px); }

@keyframes ctaSheen {
  0%, 100% { transform: translateX(-100%) rotate(25deg); }
  50% { transform: translateX(100%) rotate(25deg); }
}

@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 1px 0 0 rgba(255, 160, 120, .2) inset,
                0 -2px 0 0 rgba(60, 20, 0, .3) inset,
                0 4px 16px rgba(0, 0, 0, .4);
  }
  50% {
    box-shadow: 0 1px 0 0 rgba(255, 160, 120, .25) inset,
                0 -2px 0 0 rgba(60, 20, 0, .3) inset,
                0 6px 20px rgba(0, 0, 0, .4),
                0 0 40px rgba(200, 88, 40, .1);
  }
}

.cta-pulse { animation: ctaPulse 3s ease-in-out infinite; }

/* ── Ghost Button ─────────────────────────────────────────────────────────── */

.btn-ghost {
  padding: 12px 28px;
  border-radius: 8px;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--t2);
  border: 1px solid var(--border-hl);
  background: linear-gradient(180deg, rgba(36, 32, 24, .8) 0%, rgba(20, 17, 14, .9) 100%);
  text-decoration: none;
  transition: all .25s;
  box-shadow: 0 1px 0 0 rgba(255, 240, 200, .04) inset,
              0 -1px 0 0 rgba(0, 0, 0, .2) inset,
              0 2px 8px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.btn-ghost:hover {
  border-color: var(--amber-d);
  color: var(--t1);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 0 rgba(255, 240, 200, .06) inset,
              0 -1px 0 0 rgba(0, 0, 0, .2) inset,
              0 6px 16px rgba(0, 0, 0, .4);
  text-decoration: none;
}

.btn-ghost:active {
  transform: translateY(0);
  box-shadow: 0 -1px 0 0 rgba(255, 240, 200, .02) inset,
              0 1px 0 0 rgba(0, 0, 0, .15) inset,
              0 1px 4px rgba(0, 0, 0, .3);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 80px;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(232, 180, 74, .05) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 25% 70%, rgba(224, 101, 48, .03) 0%, transparent 50%),
              radial-gradient(ellipse 50% 40% at 75% 60%, rgba(76, 168, 168, .03) 0%, transparent 50%);
  pointer-events: none;
}

.hero-logo { width: 96px; height: 96px; margin-bottom: 32px; }

.hero h1 {
  font-family: var(--mono);
  font-size: clamp(32px, 7vw, 72px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.1;
  margin-bottom: 20px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-tagline {
  font-family: var(--mono);
  font-size: clamp(13px, 2vw, 18px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--t3);
  max-width: 700px;
  line-height: 1.6;
  margin-bottom: 24px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-tagline span { opacity: 0; display: inline-block; animation: word-in .6s ease forwards; }
.hero-tagline span:nth-child(1) { animation-delay: .2s; }
.hero-tagline span:nth-child(2) { animation-delay: .35s; }
.hero-tagline span:nth-child(3) { animation-delay: .5s; }
.hero-tagline span:nth-child(4) { animation-delay: .6s; }
.hero-tagline span:nth-child(5) { animation-delay: .75s; color: var(--amber); }
.hero-tagline span:nth-child(6) { animation-delay: .9s; color: var(--amber); }
.hero-tagline .dot { color: var(--rust); font-size: var(--font-3xs); align-self: center; }

@keyframes word-in {
  0% { opacity: 0; transform: translateY(8px) scale(.95); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.hero-sub { font-size: clamp(15px, 2.2vw, 20px); color: var(--t2); max-width: 640px; line-height: 1.8; margin-bottom: 12px; }
.hero-mono { font-family: var(--mono); font-size: var(--font-sm); color: var(--t4); letter-spacing: 1px; margin-bottom: 40px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }

.hero-prompt-chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--t2);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: var(--font-md);
  line-height: 1.4;
  font-family: var(--sans);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  max-width: 100%;
}
.hero-prompt-chip::before {
  content: "→";
  color: var(--amber);
  font-family: var(--mono);
  margin-right: 8px;
  opacity: 0.7;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.hero-prompt-chip:hover {
  border-color: var(--amber);
  color: var(--t1);
  background: rgba(232, 180, 74, 0.06);
}
.hero-prompt-chip:hover::before {
  opacity: 1;
  transform: translateX(2px);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.sec { padding: 100px 24px; position: relative; }
.sec-inner { max-width: 1100px; margin: 0 auto; }

/* Animated divider that runs across the top of every section. A faint
   horizontal line with a moving amber gradient highlight that drifts
   across, giving the page a subtle pulse without anything obnoxious.
   The line itself is always visible; the highlight animates with a
   long, slow keyframe so the eye catches it during scroll without
   chasing it. */
.sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 92vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(48, 42, 34, 0.6) 8%,
    rgba(48, 42, 34, 0.6) 92%,
    transparent 100%
  );
  pointer-events: none;
}

.sec::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 92vw);
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 180, 74, 0) 35%,
    rgba(232, 180, 74, 0.55) 50%,
    rgba(232, 180, 74, 0) 65%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-position: -100% 0;
  pointer-events: none;
  animation: secDividerPulse 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  filter: blur(0.5px);
  opacity: 0.7;
}

@keyframes secDividerPulse {
  0% { background-position: -100% 0; opacity: 0; }
  10% { opacity: 0.7; }
  50% { background-position: 100% 0; opacity: 0.7; }
  60% { opacity: 0; }
  100% { background-position: 100% 0; opacity: 0; }
}

/* First section under the hero shouldn't show a divider at the top —
   the hero already provides closure; an extra line above the very
   first section reads as visual debris. */
.hero + .sec::before,
.hero + .sec::after {
  display: none;
}

/* Light-mode tone-down: the amber pulse is warmer + lower contrast so
   it doesn't blast the eye on a pale background. */
.light .sec::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(122, 82, 0, 0.18) 8%,
    rgba(122, 82, 0, 0.18) 92%,
    transparent 100%
  );
}
.light .sec::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(176, 90, 50, 0) 35%,
    rgba(176, 90, 50, 0.4) 50%,
    rgba(176, 90, 50, 0) 65%,
    transparent 100%
  );
  opacity: 0.6;
}

/* Respect reduced-motion users — kill the pulse, keep the static line. */
@media (prefers-reduced-motion: reduce) {
  .sec::after { animation: none; opacity: 0; }
}

.sec-alt {
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(20, 17, 14, .6) 50%, var(--bg2) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.light .sec-alt {
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(216, 202, 176, .6) 50%, var(--bg2) 100%);
}

.sec-label { font-family: var(--mono); font-size: var(--font-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); margin-bottom: 12px; }
.sec-title { font-family: var(--mono); font-size: clamp(22px, 4vw, 34px); font-weight: 800; color: var(--t1); margin-bottom: 14px; letter-spacing: -.5px; }
.sec-desc { font-size: var(--font-lg); color: var(--t2); max-width: 640px; line-height: 1.8; margin-bottom: 48px; }
.sec-center { text-align: center; }
.sec-center .sec-desc { margin-left: auto; margin-right: auto; }

/* ── Landing typography utilities ─────────────────────────────────────────────
 * Extracted from inline `style="font-size: var(--font-…); color: var(--…)"`
 * declarations that were scattered across landing.html. Same visual output as
 * the inline styles they replaced; consolidating here means a future i18n /
 * theme pass touches one file instead of 23 spans. Keep these in sync with
 * .sec-* and .feat-* sizing above.
 *
 *   .l-eyebrow         — mono uppercase tracker label, neutral color
 *   .l-eyebrow-rust    — same, accent rust color (used on hero-adjacent eyebrows)
 *   .l-body-md         — body paragraph at the default reading size
 *   .l-body-lg         — body paragraph at the larger pull-quote size
 *   .l-list-md         — unstyled list at body-md size + comfortable line-height
 *   .l-mono-meta       — small mono caption (footnotes, metric refs)
 *   .l-sec-trailer     — section-trailing copy with a margin push above
 */
.l-eyebrow { font-family: var(--mono); font-size: var(--font-xs); letter-spacing: 1.5px; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
.l-eyebrow-rust { font-family: var(--mono); font-size: var(--font-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); margin-bottom: 12px; }
.l-body-md { font-size: var(--font-md); color: var(--t2); line-height: 1.7; }
.l-body-lg { font-size: var(--font-lg); color: var(--t2); line-height: 1.65; }
.l-list-md { list-style: none; padding: 0; margin: 0; font-size: var(--font-md); color: var(--t2); line-height: 1.7; }
.l-mono-meta { font-family: var(--mono); font-size: var(--font-xs); color: var(--t3); margin-top: 12px; }
.l-sec-trailer { margin-top: 24px; font-size: var(--font-lg); color: var(--t3); }

/* ── Features ─────────────────────────────────────────────────────────────── */

.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.feat {
  background: rgba(28, 25, 21, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(48, 42, 34, .6);
  border-radius: 8px;
  padding: 24px 26px;
  transition: all .35s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 240, 200, .02);
}

.feat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.feat:hover {
  border-color: var(--border-hl);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.feat:hover::before { transform: scaleX(1); }

.feat-icon { width: 48px; height: 48px; margin-bottom: 16px; display: block; }
.feat h3 { font-family: var(--mono); font-size: var(--font-lg); font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.feat p { font-size: var(--font-md); color: var(--t2); line-height: 1.7; }
.feat-ref { font-size: var(--font-2xs); color: var(--t4); margin-top: 10px; font-family: var(--mono); border-top: 1px solid var(--border); padding-top: 8px; }

/* ── Flow Diagram ─────────────────────────────────────────────────────────── */

.flow-wrap { position: relative; margin: 48px 0; padding: 40px 0; }

/* Pin the connector to the vertical center of the icon-ring row.
   padding-top (40px) + half the ring height (64 / 2 = 32px) = 72px.
   Was `top: 50%`, which scaled with the tallest node's paragraph and
   started cutting through the title/description text as soon as the
   copy got long enough. */
.flow-line { position: absolute; top: 72px; left: 60px; right: 60px; height: 2px; background: var(--border); z-index: 0; }
.flow-line-fill { height: 100%; width: 0; background: var(--grad); transition: width 1.5s ease; }
.flow-line-fill.active { width: 100%; }

.flow { display: flex; justify-content: space-between; position: relative; z-index: 1; }

.flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 22%; position: relative; }

.flow-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: all .5s;
  margin-bottom: 14px;
}

.flow-ring svg { width: 28px; height: 28px; opacity: .7; transition: opacity .3s; }
.flow-ring.active { border-color: var(--amber); }
.flow-ring.active svg { opacity: 1; }

.flow-num { font-family: var(--mono); font-size: var(--font-2xs); font-weight: 700; color: var(--t4); letter-spacing: 1px; margin-bottom: 4px; }
.flow-node h3 { font-family: var(--mono); font-size: var(--font-md); font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.flow-node p { font-size: var(--font-xs); color: var(--t3); line-height: 1.5; max-width: 180px; }

/* ── Divergence Visualization ─────────────────────────────────────────────── */

.diverge { display: flex; gap: 20px; margin-top: 48px; }
.diverge-side { flex: 1; border-radius: 8px; padding: 24px; border: 1px solid var(--border); background: var(--bg3); transition: all .3s; }
.diverge-side:hover { border-color: var(--border-hl); }
.diverge-side h3 { font-family: var(--mono); font-size: var(--font-lg); font-weight: 700; margin-bottom: 8px; }
.diverge-bar { height: 6px; border-radius: 3px; margin: 6px 0; overflow: hidden; background: var(--border); }
.diverge-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }

/* ── Scenarios ────────────────────────────────────────────────────────────── */

.scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.sc-card {
  background: rgba(28, 25, 21, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(48, 42, 34, .6);
  border-radius: 8px;
  padding: 24px 26px;
  transition: all .3s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 240, 200, .02);
}

.sc-card:hover { border-color: var(--border-hl); box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.sc-badge { display: inline-block; font-family: var(--mono); font-size: var(--font-3xs); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 12px; margin-bottom: 14px; }
.sc-card h3 { font-family: var(--mono); font-size: var(--font-2xl); font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.sc-card p { font-size: var(--font-md); color: var(--t2); line-height: 1.7; margin-bottom: 14px; }
.sc-stats { display: flex; gap: 16px; font-family: var(--mono); font-size: var(--font-xs); color: var(--t3); }
.sc-stats b { color: var(--t1); }

/* ── Architecture ─────────────────────────────────────────────────────────── */
/* Two-column card grid. Each pillar renders as a self-contained vertical
 * card (icon → label → description → tech pills) so all four read at
 * uniform width + height regardless of description length. The earlier
 * single-column horizontal flex (icon | label | desc | tech) collapsed
 * into uneven rows with the label hugging the left and descriptions of
 * very different lengths producing visibly mismatched card heights. */

.arch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.arch-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 26px;
  border-radius: 8px;
  border: 1px solid rgba(48, 42, 34, .6);
  background: rgba(28, 25, 21, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .3s, transform .3s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

.arch-row:hover { border-color: var(--border-hl); }
.arch-row svg { width: 28px; height: 28px; flex-shrink: 0; }
.arch-label {
  font-family: var(--mono);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.35;
}
.arch-desc {
  font-size: var(--font-md);
  color: var(--t2);
  line-height: 1.7;
  /* Push the tech pill to the bottom so all four cards align there */
  flex: 1;
}
.arch-tech {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  color: var(--t4);
  letter-spacing: .3px;
  padding-top: 4px;
  border-top: 1px dashed rgba(120, 100, 70, .25);
  width: 100%;
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */

.pricing-banner { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 40px; text-align: center; max-width: 700px; margin: 0 auto; backdrop-filter: blur(12px); }
.pricing-banner h3 { font-family: var(--mono); font-size: var(--font-2xl); font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.pricing-banner p { font-size: var(--font-lg); color: var(--t2); line-height: 1.8; margin-bottom: 8px; }
.pricing-tiers { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.pricing-tier { font-family: var(--mono); font-size: var(--font-sm); font-weight: 700; padding: 6px 16px; border-radius: 6px; background: var(--bg4); color: var(--t2); border: 1px solid var(--border); }

/* ── Code Blocks ──────────────────────────────────────────────────────────── */

.code-sec { margin-top: 56px; width: 100%; max-width: 720px; }
.code-block { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 0; overflow: hidden; margin-bottom: 12px; position: relative; }
.code-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: rgba(36, 32, 24, .6); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: var(--font-xs); color: var(--t3); }
.code-copy { background: none; border: 1px solid var(--border); color: var(--t3); padding: 3px 10px; border-radius: 4px; font-size: var(--font-2xs); font-family: var(--mono); cursor: pointer; transition: all .2s; }
.code-copy:hover { border-color: var(--amber); color: var(--t1); }
.code-copy.copied { color: var(--green); border-color: var(--green); }
.code-body { padding: 14px 16px; font-family: var(--mono); font-size: var(--font-md); line-height: 1.7; color: var(--t1); overflow-x: auto; white-space: pre; text-align: left; }
/* Bumped from #6b6356 (~4:1) to --t3 (~6.5:1) so code comments pass WCAG AA against the dark code-body background. */
.code-body .cm { color: var(--t3); font-style: italic; }
.code-body .kw { color: #4ca8a8; }
.code-body .str { color: #e8b44a; }
.code-body .fn { color: #e06530; }
.code-body .num { color: #6aad48; }

.light .code-block { background: #1c1915; border-color: #302a22; box-shadow: 0 4px 20px rgba(0, 0, 0, .2); }
.light .code-header { background: #242018; border-bottom-color: #302a22; color: #a89878; }
.light .code-body { color: #f5f0e4; }
.light .code-body .cm { color: #c4b894; } /* lighter than dark mode for the inverted (dark-on-cream) code block */
.light .code-body .kw { color: #4ca8a8; }
.light .code-body .str { color: #e8b44a; }
.light .code-body .fn { color: #e06530; }
.light .code-body .num { color: #6aad48; }
.light .code-copy { border-color: #302a22; color: #a89878; }
.light .code-copy:hover { border-color: #e8b44a; color: #f5f0e4; }

/* ── Chips ────────────────────────────────────────────────────────────────── */

.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 48px; }
.chip { font-family: var(--mono); font-size: var(--font-xs); font-weight: 600; padding: 6px 14px; border-radius: 20px; background: rgba(232, 180, 74, .06); color: var(--t2); border: 1px solid var(--border); letter-spacing: .3px; transition: all .3s; }
.chip:hover { border-color: var(--amber-d); color: var(--t1); background: rgba(232, 180, 74, .1); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { padding: 18px 0; font-size: var(--font-lg); font-weight: 600; cursor: pointer; color: var(--t1); list-style: none; display: flex; justify-content: space-between; align-items: center; transition: color .2s; }
.faq-item summary:hover { color: var(--amber); }
.faq-item summary::after { content: ''; width: 12px; height: 12px; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; margin-left: 16px; }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-body { padding: 0 0 18px; font-size: var(--font-md); color: var(--t2); line-height: 1.8; }
.faq-cite { font-size: var(--font-2xs); color: var(--t4); font-family: var(--mono); margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }

/* ── Contact ──────────────────────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.contact-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 24px; transition: all .3s; }
.contact-card:hover { border-color: var(--amber-d); }
.contact-card h3 { font-family: var(--mono); font-size: var(--font-lg); font-weight: 700; color: var(--t1); margin-bottom: 6px; }

/* Underline ALL inline links inside prose paragraphs so they read as
   actionable when CSS color alone fails (a11y rule
   `link-in-text-block`). The .nav, .footer, .cta, and similar
   icon-link patterns reset text-decoration to none in their own
   scopes, so this only hits actual prose paragraphs.
   `.sec-desc` covers the world-models section explainer copy
   that still inherits .sec-desc styling outside #world-models. */
section p a,
.sec-desc a,
.faq-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-card p { font-size: var(--font-md); color: var(--t2); margin-bottom: 12px; line-height: 1.6; }
.contact-card a { font-weight: 600; }

/* ── CTA Banner ───────────────────────────────────────────────────────────── */

/* ── Whitepaper "coming soon" CTA ───────────────────────────────────────── */

.whitepaper-sec { padding: 80px 24px; }
.whitepaper-inner { max-width: 1040px; margin: 0 auto; }

.whitepaper-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--bg2) 92%, transparent) 0%, color-mix(in oklab, var(--bg3) 88%, transparent) 100%);
  padding: 48px 40px;
  overflow: hidden;
  isolation: isolate;
}

.whitepaper-card::before {
  /* Subtle hex-grid texture overlay matching the agentos.sh whitepaper card */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'><path d='M 30 0 L 60 17 L 60 35 L 30 52 L 0 35 L 0 17 Z' fill='none' stroke='%23e8b44a' stroke-width='0.6' /></svg>");
  background-repeat: repeat;
  z-index: 0;
}

.whitepaper-card::after {
  /* Bottom gradient hairline accent */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rust) 0%, var(--amber) 50%, var(--teal) 100%);
  z-index: 0;
}

.whitepaper-card > * { position: relative; z-index: 1; }

.whitepaper-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--amber) 50%, transparent);
  background: color-mix(in oklab, var(--amber) 10%, transparent);
  color: var(--amber);
  font-family: var(--mono);
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}

.whitepaper-pill-icon {
  width: 14px;
  height: 14px;
}

.whitepaper-title {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--rust) 0%, var(--amber) 50%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.whitepaper-dek {
  margin: 0 0 32px;
  max-width: 640px;
  font-size: var(--font-lg);
  line-height: 1.7;
  color: var(--t2);
}

.whitepaper-dek code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  border: 1px solid var(--border);
}

.whitepaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.whitepaper-grid-item {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
  padding: 18px 20px;
}

.whitepaper-grid-label {
  font-family: var(--mono);
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}

.whitepaper-grid-body {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--t2);
}

.whitepaper-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.whitepaper-cta-disabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--amber) 60%, transparent);
  background: color-mix(in oklab, var(--amber) 18%, transparent);
  color: var(--amber);
  font-family: var(--mono);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: not-allowed;
  opacity: 0.85;
  position: relative;
}

.whitepaper-cta-disabled::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px dashed color-mix(in oklab, var(--amber) 35%, transparent);
  pointer-events: none;
}

.whitepaper-cta-notify {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--rust);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--font-md);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.whitepaper-cta-notify:hover {
  background: color-mix(in oklab, var(--rust) 80%, var(--amber));
  transform: translateY(-1px);
}

.whitepaper-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--t2);
  font-size: var(--font-md);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.whitepaper-cta-secondary:hover {
  border-color: var(--amber);
  color: var(--t1);
}

.banner { text-align: center; padding: 100px 24px; position: relative; }
.banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grad); opacity: .3; }
.banner h2 { font-family: var(--mono); font-size: clamp(22px, 4vw, 32px); font-weight: 800; margin-bottom: 14px; }
.banner p { font-size: var(--font-lg); color: var(--t2); margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.7; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

footer { padding: 28px 24px; border-top: 1px solid var(--border); background: var(--bg2); }
.ft-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.ft-links { display: flex; gap: 20px; font-size: var(--font-sm); flex-wrap: wrap; }
.ft-links a { color: var(--t3); text-decoration: none; transition: color .2s; }
.ft-links a:hover { color: var(--amber); }
/* Bumped from --t4 (~3.2:1) to --t3 so the copyright passes WCAG AA against the footer background. */
.ft-copy { font-size: var(--font-xs); color: var(--t3); }

/* ── Reveal Animation ─────────────────────────────────────────────────────── */

.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.rv.vis { opacity: 1; transform: translateY(0); }

/* No-JS fallback: without IntersectionObserver firing, every .rv element
   would stay opacity:0 and the page would look blank to crawlers,
   screenshot tools, OpenGraph previewers, screen readers that don't
   trigger scroll, and visitors with JS disabled. The HEAD inline-script
   below adds a `js` class to <html> on page boot; if that script never
   runs (no-JS), the `:not(.js)` rule wins and content is visible. */
html:not(.js) .rv {
  opacity: 1;
  transform: none;
  transition: none;
}
.rv-d1 { transition-delay: .1s; }
.rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .25s; }
.rv-d4 { transition-delay: .3s; }
.rv-d5 { transition-delay: .35s; }
.rv-d6 { transition-delay: .4s; }

/* ── Hamburger Menu ───────────────────────────────────────────────────────── */

.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--t2);
  border-radius: 1px;
  transition: transform .25s, opacity .25s;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  background: rgba(10, 8, 6, .97);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: 14px clamp(14px, 4vw, 32px) 22px;
  flex-direction: column;
  gap: 6px;
  z-index: 99;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-mobile.open { display: flex; }
.light .nav-mobile { background: rgba(248, 242, 228, .97); }

/* Top-level link rows. Class-targeted (.nav-mobile-link) so we don't
   accidentally style anchors nested inside groups. Block-display +
   width:100% guarantees stacking even when the nav is wrapped by an
   <details> ancestor that flips the layout context. */
.nav-mobile-link {
  display: block;
  width: 100%;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--t2);
  padding: 13px 14px;
  text-decoration: none;
  border-radius: 8px;
  letter-spacing: .005em;
  transition: color .15s, background .15s, transform .15s;
}
.nav-mobile-link:hover {
  color: var(--amber);
  background: rgba(232, 180, 74, .05);
  transform: translateX(2px);
}
.nav-mobile-link:active { background: rgba(232, 180, 74, .1); }

/* CTA: full-width primary button. Uses a 135deg rust→amber gradient
   so the button reads as the page's accent color rather than a solid
   block; the inner amber-tinted ring + drop shadow give it lift. */
.nav-mobile a.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--rust) 0%, color-mix(in srgb, var(--rust) 80%, var(--amber)) 100%);
  color: #f5f0e4;
  border-radius: 10px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: var(--font-xl);
  letter-spacing: .03em;
  margin-top: 10px;
  box-shadow:
    0 6px 22px rgba(176, 90, 50, .4),
    inset 0 0 0 1px rgba(232, 180, 74, .18);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.nav-mobile a.cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(176, 90, 50, .48),
    inset 0 0 0 1px rgba(232, 180, 74, .28);
}
.nav-mobile a.cta:active { transform: translateY(0); }

/* === Collapsible groups (Sections / Docs) ===
   Card-style container so each group reads as a contained unit rather
   than a run of anchors with a header above them. The wrapper carries
   a subtle 1.5%-opacity background + rounded corners; on [open] the
   background lifts to 5% and the summary picks up an amber accent
   line under it. */
.nav-mobile-group {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, .015);
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 10px;
  overflow: hidden;
  transition: background .2s, border-color .2s;
}
.light .nav-mobile-group {
  background: rgba(0, 0, 0, .015);
  border-color: rgba(0, 0, 0, .05);
}

.nav-mobile-group[open] {
  background: rgba(232, 180, 74, .04);
  border-color: rgba(232, 180, 74, .15);
}

.nav-mobile-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-lg);
  color: var(--t1);
  font-weight: 600;
  letter-spacing: .005em;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
/* Hide native <details> markers across browsers. The bare ::marker /
   ::-webkit-details-marker rules cover Chromium, Safari, Firefox. The
   `list-style: none` on <summary> belt-and-suspenders for older WebKit. */
.nav-mobile-group > summary::-webkit-details-marker,
.nav-mobile-group > summary::marker { display: none; content: ""; }

/* CSS-border chevron — no font dependency, so it renders identically
   on iOS Safari, Android Chrome, and desktop. The two borders form an
   arrow tip that rotates from "down" (closed) to "up" (open). */
.nav-mobile-group > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--t3);
  border-bottom: 2px solid var(--t3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease, border-color .15s;
  flex-shrink: 0;
  margin-right: 4px;
}

.nav-mobile-group:hover > summary { background: rgba(255, 255, 255, .025); }
.light .nav-mobile-group:hover > summary { background: rgba(0, 0, 0, .03); }

.nav-mobile-group[open] > summary { color: var(--amber); }
.nav-mobile-group[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--amber);
}

/* Inner items wrapper — explicit display:flex column so anchors stack
   regardless of the <details> default behavior or any inherited inline
   formatting context. Top-border separates the body from the summary. */
.nav-mobile-group-body {
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.light .nav-mobile-group-body { border-top-color: rgba(0, 0, 0, .05); }

.nav-mobile-group-body > a {
  display: block;
  position: relative;
  padding: 12px 16px 12px 30px;
  font-size: var(--font-lg);
  color: var(--t2);
  font-weight: 400;
  text-decoration: none;
  letter-spacing: .003em;
  transition: color .15s, background .15s, padding-left .15s;
}

/* Animated dot indicator on the left. Idle = small dim dot; hover =
   amber capsule that grows into a 2-px-wide bar. Subtle tactile cue
   that an item is hovered, no JS, no SVG. */
.nav-mobile-group-body > a::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(232, 180, 74, .25);
  transform: translateY(-50%);
  transition: background .15s, width .2s ease, border-radius .2s ease;
}

.nav-mobile-group-body > a:hover {
  color: var(--amber);
  background: rgba(232, 180, 74, .05);
  padding-left: 34px;
}
.nav-mobile-group-body > a:hover::before {
  background: var(--amber);
  width: 10px;
  border-radius: 2px;
}
.nav-mobile-group-body > a:active { background: rgba(232, 180, 74, .1); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  .nav-r { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 900px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .scenarios { grid-template-columns: 1fr; }
  /* Architecture pillars collapse here too so the page reflows in one
   * step instead of staggering across a 20px window (.arch used to
   * collapse at 880, .scenarios at 900 — visible double reflow). */
  .arch { grid-template-columns: 1fr; }
  .flow { flex-direction: column; align-items: stretch; gap: 28px; }
  .flow-line { display: none; }
  /* Desktop keeps each node at width:22% so four fit across the row. On
     mobile the flex direction flips to column, but without widening the
     node the 22% cap turns every stacked block into a narrow centered
     strip with huge empty gutters. Let each node take the full column
     width and the description paragraph read at a natural line length. */
  .flow-node { width: 100%; max-width: 520px; margin: 0 auto; }
  .flow-node p { max-width: none; font-size: var(--font-md); line-height: 1.6; }
  .diverge { flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-chips { gap: 6px; }
  .pricing-tiers { flex-direction: column; align-items: center; }
}


@media (max-width: 600px) {
  .feat-grid { grid-template-columns: 1fr; }
  .sec { padding: 64px 16px; }
  .hero { padding: 80px 16px 56px; }
  .arch-row { padding: 18px 18px; }
  /* Whitepaper card: shrinks horizontal padding and stacks the CTA row
     so each pill button fills the card width instead of wrapping into
     an awkward 2/3-column hybrid on phones. */
  .whitepaper-sec { padding: 56px 16px; }
  .whitepaper-card { padding: 32px 22px; border-radius: 18px; }
  .whitepaper-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .whitepaper-grid-item { padding: 16px 18px; }
  .whitepaper-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .whitepaper-cta-disabled,
  .whitepaper-cta-notify,
  .whitepaper-cta-secondary { justify-content: center; padding: 12px 18px; }
  /* Banner: mobile users were seeing 100px of empty padding above and
     below the headline, pushing the CTA below the fold on most phones. */
  .banner { padding: 64px 16px; }
  /* Footer rows stack instead of wrap-and-truncate. */
  .ft-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Light Mode Overrides ─────────────────────────────────────────────────── */

.light body,
.light { background-image: none; }

.light .hero::before {
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(122, 82, 0, .06) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 25% 70%, rgba(168, 56, 16, .04) 0%, transparent 50%),
              radial-gradient(ellipse 50% 40% at 75% 60%, rgba(24, 96, 96, .04) 0%, transparent 50%);
}

.light .feat,
.light .sc-card {
  background: rgba(248, 242, 228, .8);
  backdrop-filter: blur(8px);
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(60, 40, 10, .08), inset 0 1px 0 rgba(255, 250, 240, .5);
}

.light .feat:hover,
.light .sc-card:hover {
  box-shadow: 0 8px 24px rgba(60, 40, 10, .12);
  border-color: var(--border-hl);
}

.light .arch-row { background: rgba(248, 242, 228, .7); border-color: var(--border); box-shadow: 0 2px 8px rgba(60, 40, 10, .06); }
.light .flow-ring { background: var(--bg); border-color: var(--border); }
.light .diverge-side { background: var(--bg3); border-color: var(--border); }
.light .pricing-banner { background: var(--bg3); border-color: var(--border); }
.light .contact-card { background: var(--bg3); border-color: var(--border); }
.light .faq-item { border-bottom-color: var(--border); }

.light .cta {
  background: linear-gradient(180deg, #b04820 0%, #903818 60%, #6a2808 100%);
  color: #fff;
  box-shadow: 0 1px 0 0 rgba(220, 130, 80, .2) inset,
              0 -2px 0 0 rgba(60, 20, 0, .25) inset,
              0 4px 16px rgba(60, 20, 0, .2);
}

.light .cta:hover {
  box-shadow: 0 1px 0 0 rgba(220, 130, 80, .25) inset,
              0 -2px 0 0 rgba(60, 20, 0, .25) inset,
              0 8px 24px rgba(60, 20, 0, .25),
              0 0 20px rgba(176, 72, 32, .1);
}

.light .btn-ghost {
  background: linear-gradient(180deg, rgba(248, 242, 228, .9) 0%, rgba(232, 220, 200, .95) 100%);
  border-color: var(--border);
  color: var(--t1);
  box-shadow: 0 1px 0 0 rgba(255, 250, 240, .5) inset, 0 -1px 0 0 rgba(60, 40, 10, .08) inset, 0 2px 8px rgba(60, 40, 10, .08);
}

.light .btn-ghost:hover {
  border-color: var(--border-hl);
  box-shadow: 0 1px 0 0 rgba(255, 250, 240, .6) inset, 0 -1px 0 0 rgba(60, 40, 10, .08) inset, 0 6px 16px rgba(60, 40, 10, .1);
}

.light .chip { background: rgba(122, 82, 0, .06); border-color: var(--border); color: var(--t2); }
.light .chip:hover { background: rgba(122, 82, 0, .1); border-color: var(--border-hl); color: var(--t1); }
.light footer { background: var(--bg2); border-top-color: var(--border); }
.light .banner::before { opacity: .15; }
.light .pc-badge { background: var(--bg4); color: var(--amber); border-color: var(--border); }
.light .pricing-tier { background: var(--bg); color: var(--t2); border-color: var(--border); }
.light .theme-toggle { color: var(--t3); border-color: var(--border); }
.light .theme-toggle:hover { color: var(--t1); border-color: var(--border-hl); }

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

/* ── Library wireframe (Library tab section) ───────────────────────────────── */

.library-wireframe-wrapper {
  margin: 32px auto 0;
  background: var(--bg2, #14110e);
  border: 1px solid var(--border, rgba(48, 42, 34, .5));
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
  max-width: 900px;
}

.library-wireframe {
  width: 100%;
  height: auto;
  display: block;
  max-width: 800px;
  margin: 0 auto;
}

/* ── Use cases grid (Use cases section) ───────────────────────────────────── */

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.use-case {
  background: var(--bg3, #1c1915);
  border: 1px solid var(--border, rgba(48, 42, 34, .5));
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 200ms ease;
}

.use-case:hover {
  border-color: var(--amber, #e8b44a);
}

.use-case h3 {
  font-size: var(--font-xl);
  margin: 0;
  color: var(--t1, #f5f0e4);
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-weight: 600;
}

.use-case p {
  font-size: var(--font-lg);
  color: var(--t2, #d8ccb0);
  margin: 0;
  line-height: 1.55;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
}

.use-case code {
  background: var(--bg, #0a0806);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: var(--font-sm);
  color: var(--amber, #e8b44a);
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .use-case { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero CTA: "secondary" pill — same shape as .cta but inverted color so
   it stays subordinate to the primary demo button.
   ═══════════════════════════════════════════════════════════════════════════ */
.cta-secondary {
  background: transparent !important;
  color: var(--amber) !important;
  border: 1px solid var(--amber) !important;
  box-shadow: none !important;
}
.cta-secondary:hover {
  background: rgba(232, 180, 74, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Waitlist section
   ═══════════════════════════════════════════════════════════════════════════ */
.waitlist-section {
  position: relative;
  padding: 96px 24px 72px;
  border-top: 1px solid rgba(232, 180, 74, 0.12);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(224, 101, 48, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(76, 168, 168, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(232, 180, 74, 0.04) 0%, transparent 60%);
  scroll-margin-top: 80px;
  overflow: hidden;
}
/* Subtle paracosm orbit-line accent — top hairline, gradient amber→rust→teal */
.waitlist-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 480px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--rust) 25%,
    var(--amber) 50%,
    var(--teal) 75%,
    transparent 100%);
  opacity: 0.5;
}
.waitlist-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.waitlist-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--rust);
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid rgba(224, 101, 48, 0.3);
  border-radius: 999px;
  background: rgba(224, 101, 48, 0.06);
}
.waitlist-heading {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--t1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.waitlist-heading-accent {
  background: linear-gradient(135deg, var(--rust), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.waitlist-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--t2);
  margin: 0 auto 36px;
  max-width: 520px;
}
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.waitlist-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.waitlist-field > span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--t3);
  text-transform: uppercase;
}
.waitlist-required {
  color: var(--rust);
}
.waitlist-field input,
.waitlist-field textarea,
.waitlist-field select {
  background: var(--waitlist-input-bg, rgba(0, 0, 0, 0.28));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--t1);
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  resize: vertical;
}
/* Light mode: input fields go to a clean off-white card-style background
   so they don't blend into the sepia section bg the way the dark-mode
   "blackish overlay" does. */
html.light .waitlist-field input,
html.light .waitlist-field textarea,
html.light .waitlist-field select {
  background: #fbf7ee;
  box-shadow: 0 1px 0 rgba(60, 40, 10, 0.04) inset;
}
html.light .waitlist-field input:hover,
html.light .waitlist-field textarea:hover,
html.light .waitlist-field select:hover {
  background: #fff;
}
html.light .waitlist-field input:focus,
html.light .waitlist-field textarea:focus,
html.light .waitlist-field select:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(142, 44, 12, 0.12);
}
.waitlist-field input::placeholder,
.waitlist-field textarea::placeholder {
  color: var(--t3);
  opacity: 0.7;
}
.waitlist-field input:hover,
.waitlist-field textarea:hover,
.waitlist-field select:hover {
  border-color: var(--border-hl);
}
.waitlist-field input:focus,
.waitlist-field textarea:focus,
.waitlist-field select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(232, 180, 74, 0.15);
  background: rgba(0, 0, 0, 0.18);
}
.waitlist-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--t3) 50%),
    linear-gradient(135deg, var(--t3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}
.waitlist-submit {
  background: linear-gradient(135deg, var(--rust), var(--amber));
  color: #0a0806;
  border: none;
  border-radius: 6px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 80ms ease, opacity 120ms ease;
  margin-top: 4px;
}
.waitlist-submit:hover { transform: translateY(-1px); }
.waitlist-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
.waitlist-submit svg { width: 14px; height: 14px; }
.waitlist-fineprint {
  font-size: 12px;
  color: var(--t3);
  margin: 4px 0 0;
  text-align: center;
}
.waitlist-fineprint code {
  background: rgba(232, 180, 74, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--amber);
}
/* Real-time field validation (the JS sets data-validity="ok|err|empty"
   on each .waitlist-field element on input/blur). The static :invalid
   pseudo-class fires too eagerly — it lights up empty required inputs
   on first paint, which looks broken to first-time visitors. The
   data-attribute lets us only show error state AFTER the user has
   actually typed something. */
.waitlist-field[data-validity="ok"] input,
.waitlist-field[data-validity="ok"] textarea,
.waitlist-field[data-validity="ok"] select {
  border-color: var(--green, #305a10);
  padding-right: 38px;
}
.waitlist-field[data-validity="ok"] {
  position: relative;
}
.waitlist-field[data-validity="ok"]::after {
  content: '✓';
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: var(--green, #5a8a30);
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
}
.waitlist-field[data-validity="err"] input,
.waitlist-field[data-validity="err"] textarea {
  border-color: var(--rust);
  background: rgba(196, 106, 58, 0.05);
}
.waitlist-field-hint {
  font-size: 11.5px;
  color: var(--t3);
  margin: 4px 2px 0;
  font-family: var(--mono);
  letter-spacing: 0.3px;
  min-height: 14px;
  transition: color 120ms ease;
}
.waitlist-field[data-validity="err"] .waitlist-field-hint {
  color: var(--rust);
}
.waitlist-success {
  text-align: center;
  padding: 32px 16px;
}
.waitlist-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rust), var(--amber));
  color: #0a0806;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto 16px;
}
.waitlist-success h3 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--t1);
}
.waitlist-success p {
  margin: 0;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.5;
}
.waitlist-error {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(224, 101, 48, 0.12);
  border: 1px solid rgba(224, 101, 48, 0.4);
  border-radius: 6px;
  color: var(--t1);
  font-size: 14px;
}
.waitlist-error strong { color: var(--rust); margin-right: 6px; }

/* Mobile: stack hero CTAs vertically below 640px */
@media (max-width: 640px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas a {
    width: 100%;
    justify-content: center;
  }
  .waitlist-section { padding: 64px 20px 40px; }
}

/* Mobile hero trim — page is 27k+ px tall on phones because the hero
   stacks logo + tagline + 3 CTAs + 5 prompt chips + demo video + sub-
   paragraph + waitlist before the visitor reaches the explainer. The
   demo video + redundant sub-paragraph collectively eat ~700-900px of
   vertical real estate on a 375px-wide phone for content that's also
   covered by the prompts and the page below. Show a tappable "Watch
   the demo" hint instead; the video still autoplays on tablet+desktop
   where vertical space is cheap. */
@media (max-width: 768px) {
  .hero-video {
    display: none !important;
  }
  .hero-sub {
    display: none;
  }
  /* Trim the hero-prompts label since the hero CTAs already explain
     the affordance and on mobile the chips wrap into a tall column. */
  .hero-prompts {
    margin-top: 18px !important;
  }
  .hero-prompts > div:first-child {
    display: none;
  }

  /* Mobile code-block readability — desktop uses `white-space: pre` +
     overflow-x:auto, which on a 375px phone forces 3-4 horizontal swipes
     per line for typical TypeScript examples. Wrap on mobile so visitors
     can read top-to-bottom without swiping; keep the monospace + syntax
     colors so it still reads as code. Indentation alignment suffers
     slightly when wrapped lines flow back to column 0, but readability
     wins on a phone screen. */
  .code-body {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    line-height: 1.6;
    padding: 12px 14px;
  }
  /* Long URLs and JSON keys can still cause unbreakable runs; force-break
     anywhere as a safety net so they never push the parent page wide. */
  .code-body .str,
  .code-body a {
    word-break: break-all;
  }
  /* Tighten copy buttons on mobile so the header doesn't waste a row */
  .code-header {
    font-size: 10.5px;
    padding: 6px 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Hero trust signals (npm version, downloads, GitHub stars, runtime)
   Live counts fetched async with SSR fallback so crawlers see real
   text. Pills sit between the mono tagline and the CTA bar.
   ══════════════════════════════════════════════════════════════════════ */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* Generous breathing room: pulled away from the dense mono tagline
     above and gives the CTA row below its own visual chunk. The pill
     row is the only piece on the hero with this much vertical air, so
     the eye lands on it before scanning to the CTAs. */
  margin: 36px auto 28px;
  max-width: 720px;
}
.hero-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* Subtle inner gradient so the pill reads as a "chip" rather than a
     flat label. Two-stop gradient with the second stop at the bg color
     keeps the elevation cue when the page is in dark mode but stays
     invisible against the same-tone bg2 in light mode. */
  background: linear-gradient(180deg, var(--bg2), var(--bg1) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.18);
  color: var(--t2);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  transition: border-color 120ms ease, color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.hero-trust-pill:not(.hero-trust-pill-static):hover {
  border-color: var(--amber);
  color: var(--t1);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 10px rgba(232, 180, 74, 0.18);
}
.hero-trust-label {
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
}
.hero-trust-value {
  color: var(--t1);
  font-weight: 700;
}
.hero-trust-pill-static { cursor: default; }
.hero-trust-pill-static:hover { transform: none; border-color: var(--border); }
/* Inline SVG glyph for the forks pill — Unicode ⑂ (U+2442) tofus on
   iOS Safari + several Linux distros without OCR-A fallback. SVG
   sized to font-em so it scales with the label and aligns to its
   baseline. */
.hero-trust-glyph {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 2px;
}
@media (max-width: 640px) {
  .hero-trust { margin-top: 14px; gap: 6px; }
  .hero-trust-pill { padding: 5px 10px; font-size: 11px; }
  .hero-trust-label { display: none; }
  .hero-trust-pill[aria-label="npm package"] .hero-trust-value::before { content: 'npm '; opacity: 0.5; }
  .hero-trust-pill[aria-label="GitHub stars"] .hero-trust-value::before { content: '★ '; }
  .hero-trust-pill[aria-label="GitHub forks"] .hero-trust-value::before { content: 'forks '; opacity: 0.5; }
}

/* ════════════════════════════════════════════════════════════════════
   Comparison table (collapsed-by-default <details>)
   Renders into the SEO crawl + structured-data extraction either way;
   visually hidden behind a single <summary> click for clean above-the
   fold scroll. Pulled out of the FAQ pattern because tables benefit
   from a wider reading column.
   ══════════════════════════════════════════════════════════════════════ */
.compare-details {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.compare-details[open] {
  border-color: var(--border-hl);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.compare-summary {
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 18px;
  list-style: none;
  font-family: var(--mono);
  position: relative;
  user-select: none;
}
.compare-summary::-webkit-details-marker { display: none; }
.compare-summary::after {
  content: '+';
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--rust);
  font-weight: 700;
  transition: transform 200ms ease;
}
.compare-details[open] .compare-summary::after {
  content: '−';
}
.compare-summary-eyebrow {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--rust);
  text-transform: uppercase;
}
.compare-summary-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
}
.compare-summary-hint {
  font-size: var(--font-xs);
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.compare-summary:hover .compare-summary-title {
  color: var(--amber);
}
.compare-body {
  padding: 0 28px 28px;
}
.compare-lede {
  color: var(--t2);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 820px;
}
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
}
.compare-table thead th {
  background: var(--bg3, var(--bg2));
  color: var(--t1);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--border-hl);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.compare-table thead th:first-child {
  width: 200px;
}
.compare-table tbody th {
  background: var(--bg2);
  color: var(--t2);
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}
.compare-table tbody td {
  color: var(--t1);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table tbody td:first-of-type {
  /* The paracosm column gets a subtle highlight */
  background: rgba(232, 180, 74, 0.04);
  border-left: 2px solid var(--amber);
}
.compare-table code {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(232, 180, 74, 0.08);
  border-radius: 3px;
  color: var(--amber);
  white-space: nowrap;
}
.compare-footer {
  color: var(--t2);
  line-height: 1.7;
  margin: 24px 0 0;
  max-width: 820px;
  font-size: 14px;
}
.compare-footer strong {
  color: var(--t1);
}
@media (max-width: 640px) {
  .compare-summary { padding: 18px 22px; }
  .compare-summary::after { right: 18px; }
  .compare-body { padding: 0 18px 22px; }
  .compare-table { font-size: 12.5px; }
  .compare-table thead th,
  .compare-table tbody th,
  .compare-table tbody td {
    padding: 10px 11px;
  }
}