/* ============================================================
   Ergod — shared stylesheet
   Source of truth: DESIGN.md (lint with `node .design-tooling/
   node_modules/@google/design.md/dist/index.js lint DESIGN.md`)
   ------------------------------------------------------------
   If a value isn't a CSS variable here, it shouldn't be in the
   page either. Add the token to DESIGN.md first.
   ============================================================ */

/* ─── Tokens ─── */
:root {
  /* Colors */
  --color-surface: #0a0b14;
  --color-surface-elevated: #14151f;
  --color-surface-high: #1e2030;
  --color-surface-overlay: #0d0e18;
  --color-border: #2a2c3d;
  --color-border-strong: #3f4159;
  --color-text: #fafafa;
  --color-text-muted: #a1a3b8;
  --color-text-dim: #71728a;
  --color-primary: #818cf8;
  --color-primary-bright: #a5b4fc;
  --color-primary-deep: #6366f1;
  --color-accent: #a78bfa;
  --color-accent-deep: #7c3aed;
  --color-success: #22c55e;
  --color-amber: #f59e0b;
  --color-discord: #5865f2;
  --color-discord-hover: #4752c4;

  /* Spacing — 8px grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --container-padding: 32px;
  --container-max: 1120px;
  --container-narrow: 720px;
  --section-y: 96px;
  --section-y-tight: 40px;
  --card-gap: 24px;
  --card-padding: 32px;

  /* Rounded */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* Typography — families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;

  /* Elevation & Depth — recipes from DESIGN.md prose */
  --shadow-card: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 0 32px rgba(99,102,241,0.12), 0 12px 32px rgba(0,0,0,0.5);
  --shadow-glow-primary: 0 0 40px rgba(99,102,241,0.3);
  --shadow-glow-accent: 0 0 60px rgba(167,139,250,0.25);
  --shadow-cta: 0 8px 24px rgba(88,101,242,0.4);
  --shadow-glow-cta: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 8px 32px rgba(99,102,241,0.45);

  /* Glass — nav, lightbox, featured pricing */
  --glass-blur: blur(16px);
  --glass-blur-soft: blur(8px);
  --glass-bg: rgba(10,11,20,0.8);
  --glass-wash: rgba(255,255,255,0.04);

  /* Gradients — named recipes per DESIGN.md */
  --gradient-accent: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
  --gradient-text-emphasis: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 50%, #e9d5ff 100%);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  line-height: 1.7;
  font-size: 16px;
  font-weight: 400;
  font-feature-settings: 'ss01';
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }
a { color: var(--color-primary-bright); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-primary-deep); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ─── Typography utility classes ─── */
.t-display-serif  { font-family: var(--font-serif); font-size: clamp(3rem, 7vw, 4.75rem); font-weight: 400; line-height: 1.0;  letter-spacing: -0.02em; }
.t-display-lg     { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.t-display-md     { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.1;  letter-spacing: -0.03em; }
.t-headline-serif { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 2.875rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
.t-headline-lg    { font-size: 2.25rem; font-weight: 700; line-height: 1.2;  letter-spacing: -0.02em; }
.t-headline-md    { font-size: 1.75rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.t-headline-sm    { font-size: 1.25rem; font-weight: 700; line-height: 1.3;  letter-spacing: -0.01em; }
.t-body-lg        { font-size: 1.125rem; font-weight: 400; line-height: 1.7; }
.t-body-md        { font-size: 1rem;     font-weight: 400; line-height: 1.7; }
.t-body-sm        { font-size: 0.875rem; font-weight: 400; line-height: 1.6; }
.t-label-md       { font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.t-label-sm       { font-size: 0.75rem;  font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.t-mono-md        { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; line-height: 1.5; }
.t-mono-sm        { font-family: var(--font-mono); font-size: 0.75rem;  font-weight: 500; line-height: 1.5; }

h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

/* Marketing section H2 — confident Inter, tight tracking, no serif on this page.
   Serif tokens stay defined in DESIGN.md for dev pages (agent.html etc.)
   where the literary moment fits the audience. */
.section-header h2,
.cta-section h2 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.5vw, 2.875rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.section-header h2 em,
.cta-section h2 em,
.hero-title em {
  font-style: italic;
  font-weight: 900;
  background: var(--gradient-text-emphasis);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Layout ─── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--container-padding); }
section { padding: var(--section-y) 0; }
.section-tight { padding: var(--section-y-tight) 0; }
.section-header { text-align: center; margin-bottom: var(--space-3xl); }
.section-header .section-label { color: var(--color-primary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md); display: block; }
.section-header h2 { margin-bottom: var(--space-md); }
.section-header .section-desc { font-size: 1.125rem; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* ─── Nav ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-md) var(--space-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--color-border);
}
.nav-logo { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-text); font-weight: 700; font-size: 1.125rem; }
.nav-logo svg { flex-shrink: 0; }
.nav-links { display: flex; gap: var(--space-xl); align-items: center; }
.nav-link { color: var(--color-text-muted); font-size: 0.875rem; font-weight: 600; transition: color 0.2s; }
.nav-link:hover { color: var(--color-text); }
.nav-link.active { color: var(--color-text); }
.nav-cta { margin-left: var(--space-md); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1;
  border: none; cursor: pointer; text-align: center;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn-primary {
  background: var(--color-discord);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.25s;
  pointer-events: none;
}
.btn-primary:hover {
  background: var(--color-discord-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-cta);
  color: #fff;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-secondary { background: var(--color-surface-overlay); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-surface-elevated); color: var(--color-primary-bright); border-color: var(--color-border-strong); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0); }

.btn-ghost { background: transparent; color: var(--color-text-muted); padding: 10px 16px; }
.btn-ghost:hover { background: var(--color-surface-elevated); color: var(--color-text); }

.btn-sm { padding: 10px 18px; font-size: 0.8125rem; }

/* ─── Badge ─── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 6px 14px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
}
.badge code { font-family: var(--font-mono); color: var(--color-primary-bright); font-size: 0.75rem; letter-spacing: 0; }

/* ─── Hero ─── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 128px var(--container-padding) var(--space-4xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Aurora — three viewport-anchored ellipse blooms on full-bleed
   pseudo-elements. Same approach as the body ambient (which has zero
   visible edges) but brighter and slowly drifting. Shape is ellipse
   (not circle), gradient stops decay all the way to transparent at
   60-70%, and the element fills the hero so there's no element edge
   for the eye to trace. The whole stack masks at the bottom so the
   bloom dissolves into the following section. */
.hero {
  --aurora-fade-mask: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.hero::before,
.hero::after,
.hero .aurora {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
  mask-image: var(--aurora-fade-mask);
  -webkit-mask-image: var(--aurora-fade-mask);
}
.hero::before {
  /* Indigo bloom — anchored top-left */
  background: radial-gradient(ellipse 70% 65% at 15% 20%,
    rgba(99,102,241,0.45) 0%,
    rgba(99,102,241,0.18) 30%,
    transparent 65%);
  transform: translate(var(--glow-x, 0px), var(--glow-y, 0px));
  animation: aurora-a 28s ease-in-out infinite alternate;
  transition: transform 0.4s ease-out;
}
.hero::after {
  /* Violet bloom — anchored top-right */
  background: radial-gradient(ellipse 65% 60% at 85% 30%,
    rgba(167,139,250,0.4) 0%,
    rgba(167,139,250,0.15) 30%,
    transparent 65%);
  animation: aurora-b 32s ease-in-out infinite alternate;
}
.hero .aurora {
  /* Magenta bloom — anchored bottom-center */
  background: radial-gradient(ellipse 80% 55% at 50% 95%,
    rgba(192,132,252,0.32) 0%,
    rgba(192,132,252,0.12) 35%,
    transparent 70%);
  animation: aurora-c 36s ease-in-out infinite alternate;
}
.hero .grid-overlay {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none; z-index: -1;
}
.hero > * { position: relative; z-index: 1; }

/* Aurora drift — slow translates on full-bleed pseudos. Because the
   gradients are anchored to viewport-percentage positions on inset:0
   elements, moving the element shifts the bloom but keeps the soft
   falloff intact. */
@keyframes aurora-a {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(4vw, 3vw); }
}
@keyframes aurora-b {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-3vw, 4vw); }
}
@keyframes aurora-c {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-2vw, -2vw); }
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 6.5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  max-width: 18ch;
}
.hero-title em {
  font-style: italic;
  font-weight: 900;
  background: var(--gradient-text-emphasis);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 0.02em;
}
.hero-subtitle {
  font-size: 1.125rem; color: var(--color-text-muted); line-height: 1.7;
  max-width: 580px; margin-bottom: var(--space-2xl);
}
.hero-ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; align-items: center; }
.hero-hint { font-size: 0.8125rem; color: var(--color-text-dim); margin-top: var(--space-md); }

/* ─── Cards ─── */
.card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow: var(--shadow-card);
}
.card:hover {
  background: var(--color-surface-high);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}

.feature-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(167,139,250,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.feature-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}
.feature-card:hover::before { opacity: 1; }
.feature-card > * { position: relative; }
.feature-card h3 { margin-bottom: var(--space-sm); }
.feature-card p { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.65; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--card-gap);
}
.feature-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}

/* ─── Feature (compact card) — denser variant for spec-heavy pages ─── */
.feature {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  transition: border-color 0.25s, background 0.25s;
}
.feature:hover { border-color: var(--color-border-strong); background: var(--color-surface-high); }
.feature h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-sm); color: var(--color-text); }
.feature p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.65; }
.feature p + p { margin-top: var(--space-sm); }

/* ─── Comparison table ─── */
.compare-wrap {
  max-width: 960px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-card);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 720px;
}
.compare th, .compare td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.compare thead th {
  background: var(--color-surface-overlay);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child { color: var(--color-text-muted); font-weight: 500; width: 32%; }
.compare .col-ergod {
  color: var(--color-primary-bright);
  font-weight: 600;
  background: rgba(99,102,241,0.08);
  position: relative;
}
.compare thead th.col-ergod { color: var(--color-text); background: rgba(99,102,241,0.12); }
.compare .yes { color: var(--color-success); font-weight: 600; }
.compare .no { color: var(--color-text-dim); }
.compare-note { text-align: center; margin-top: var(--space-md); font-size: 0.8125rem; color: var(--color-text-dim); }

/* ─── Pricing ─── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
}
.pricing-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pricing-card.featured {
  background: var(--color-surface-high);
  border-color: transparent;
  box-shadow: var(--shadow-card), var(--shadow-glow-accent);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  position: relative;
}
.pricing-card.featured::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gradient-accent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: border-breathe 8s ease-in-out infinite;
}
.pricing-card.featured::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(167,139,250,0.06) 0%, transparent 60%);
  pointer-events: none;
}
@keyframes border-breathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ── Pro+ tier — gold accent treatment ── */
.pricing-card.is-pro-plus {
  background: var(--color-surface-high);
  border-color: transparent;
  box-shadow: var(--shadow-card), 0 0 40px rgba(251,191,36,0.15);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  position: relative;
}
.pricing-card.is-pro-plus::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: gold-breathe 12s ease-in-out infinite;
  opacity: 0.95;
}
@keyframes gold-breathe {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}
.pricing-card.is-pro-plus::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.pricing-card.is-pro-plus .pricing-features li.pro-feat::before {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.6);
}
.pricing-card.is-pro-plus .pricing-tier {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
a.btn.pricing-cta,
.pricing-card.is-pro-plus a.btn.pricing-cta {
  /* anchor selector wins over plain .btn-secondary color rule */
}
.pricing-card.is-pro-plus a.btn.pricing-cta {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1a1625;
  border: none;
  position: relative;
  overflow: hidden;
}
.pricing-card.is-pro-plus a.btn.pricing-cta:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #1a1625;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(251,191,36,0.35), 0 0 0 1px rgba(251,191,36,0.4);
}
.pricing-card.is-pro-plus .pricing-cta:active {
  transform: translateY(0);
  box-shadow: none;
}
.pricing-badge {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent-deep);
  color: #fff;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}
.pricing-tier { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm); }
.pricing-price { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--space-xs); }
.pricing-price span { font-size: 1rem; font-weight: 500; color: var(--color-text-dim); }
.pricing-desc { font-size: 0.9375rem; color: var(--color-text-dim); margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.pricing-features { flex: 1; margin-bottom: var(--space-xl); }
.pricing-features li { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: var(--space-md); }
.pricing-features li.pro-feat { color: var(--color-text); }
.pricing-features li.pro-feat svg { display: none; }
.pricing-features li.pro-feat::before {
  content: '✦';
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(167,139,250,0.6);
  margin-top: 2px;
}
.pricing-features li svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--color-success); }
.pricing-cta { width: 100%; }
.pricing-note { text-align: center; margin-top: var(--space-xl); font-size: 0.875rem; color: var(--color-text-dim); }

/* ─── Code ─── */
.code-inline,
code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(99,102,241,0.08);
  color: var(--color-primary-bright);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.code-block,
pre {
  background: var(--color-surface-overlay);
  color: var(--color-text);
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.5;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow-x: auto;
}
.code-block code, pre code { background: transparent; color: inherit; padding: 0; }

/* ─── Callout ─── */
.callout {
  background: rgba(99,102,241,0.05);
  border: 1px solid rgba(99,102,241,0.15);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text);
  font-size: 1rem; line-height: 1.65;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}
.callout strong { color: var(--color-text); }

/* ─── FAQ (collapsible <details>/<summary>) ─── */
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem; font-weight: 700;
  color: var(--color-text);
  padding: var(--space-lg) var(--space-xl) var(--space-lg) 0;
  position: relative;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:hover { color: var(--color-primary-bright); }
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 4px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s, border-color 0.2s;
}
.faq-item[open] summary::after { transform: translateY(-25%) rotate(-135deg); border-color: var(--color-primary); }
.faq-item[open] summary { color: var(--color-text); }
.faq-a {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  padding: 0 0 var(--space-lg);
}
.faq-a a { color: var(--color-primary); }
.faq-a a:hover { color: var(--color-primary-bright); }

/* ─── Steps (How it works) ─── */
.steps-section {
  background: var(--color-surface-elevated);
  position: relative;
}
.steps-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(var(--color-surface), var(--color-surface-elevated));
  pointer-events: none;
}
.steps {
  display: flex; flex-direction: column; gap: var(--space-xl);
  max-width: 700px; margin: 0 auto;
  counter-reset: step;
}
.step { display: flex; gap: var(--space-lg); position: relative; }
.step::before {
  counter-increment: step;
  content: counter(step);
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.0625rem;
  color: var(--color-primary);
}
.step:not(:last-child)::after {
  content: '';
  position: absolute; left: 23px; top: 56px;
  width: 2px; height: calc(100% - 16px);
  background: var(--color-border);
}
.step-content h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--space-xs); }
.step-content p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* ─── Breadcrumb ─── */
.breadcrumb { font-size: 0.8125rem; color: var(--color-text-dim); margin-bottom: var(--space-lg); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb-sep { margin: 0 var(--space-sm); color: var(--color-text-dim); }

/* ─── Literary mode (dev-targeted technical pages) ─── */
/* Opt-in via <body class="literary">. Triggers Instrument Serif on h1
   and section H2s — matches the dev audience for agent.html and
   similar long-form technical writing. Marketing pages stay on Inter.
   Reserve Italic-mono for code; emphasized prose stays italic-serif
   so a line of "..*memory*.." doesn't read as a code identifier. */
body.literary .page-header h1,
body.literary h1.serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
body.literary .group h2,
body.literary h2.serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
body.literary .page-header h1 em,
body.literary .group h2 em,
body.literary h1.serif-display em,
body.literary h2.serif-display em {
  font-style: italic;
  font-weight: 400;
  background: var(--gradient-text-emphasis);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Page header (non-hero pages) ─── */
.page-header {
  position: relative;
  padding: 144px var(--container-padding) var(--space-3xl);
  text-align: left;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; top: -10%; left: 50%;
  width: 600px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.page-header > * { position: relative; }
.page-header h1 { margin-bottom: var(--space-md); max-width: 24ch; }
.page-header .lede { font-size: 1.125rem; color: var(--color-text-muted); max-width: 60ch; }

/* ─── Group (long-form section, used on agent.html / commands.html) ─── */
.group { padding: 40px 0; border-top: 1px solid var(--color-border); }
.group:first-of-type { border-top: none; }
.group-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.group h2 {
  font-size: 1.625rem; font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}
.group-desc {
  font-size: 0.9375rem; color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 720px; line-height: 1.75;
}
.group-body p { font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: var(--space-md); max-width: 720px; line-height: 1.75; }
.group-body p:last-child { margin-bottom: 0; }
.group-body strong { color: var(--color-text); font-weight: 600; }
.group-body a { color: var(--color-primary); }
.group-body a:hover { color: var(--color-primary-bright); }

/* ─── Table of contents (collapsible) ─── */
.toc {
  max-width: 960px; margin: 0 auto var(--space-3xl);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.toc > summary {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: '▾'; color: var(--color-text-dim); font-size: 0.9rem; transition: transform 0.2s; }
.toc[open] > summary::after { transform: rotate(180deg); }
.toc > summary:hover { color: var(--color-primary-bright); }
.toc-list { display: none; }
.toc[open] > .toc-list {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm) var(--space-lg);
  padding: 0 var(--space-lg) var(--space-lg);
}
.toc-list li { font-size: 0.9rem; }
.toc-list a { color: var(--color-text-muted); }
.toc-list a:hover { color: var(--color-primary-bright); }

/* ─── Prompt block (collapsible literal-text container) ─── */
.prompt-block {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.prompt-block + .prompt-block,
.group-body + .prompt-block { margin-top: var(--space-md); }
.prompt-block > summary {
  padding: 14px 24px;
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-surface-high);
  border-bottom: 1px solid var(--color-border);
}
.prompt-block:not([open]) > summary { border-bottom: none; }
.prompt-block > summary::-webkit-details-marker { display: none; }
.prompt-block > summary::after { content: '▾'; color: var(--color-text-dim); font-size: 0.9rem; transition: transform 0.2s; }
.prompt-block[open] > summary::after { transform: rotate(180deg); }
.prompt-block > summary:hover { color: var(--color-primary-bright); }
.prompt-meta {
  font-size: 0.78rem; color: var(--color-text-dim);
  padding: 10px 24px;
  background: var(--color-surface-overlay);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
}
.prompt-meta code { background: transparent; padding: 0; color: var(--color-text-muted); }
pre.prompt {
  margin: 0;
  padding: 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre.prompt .heading { color: var(--color-primary-bright); font-weight: 600; }
pre.prompt .var { color: var(--color-amber); }
pre.prompt strong { color: var(--color-text); font-weight: 600; }

/* ─── Tool inventory ─── */
.tool-cats { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.tool-cat {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: border-color 0.25s, background 0.25s;
}
.tool-cat:hover { border-color: var(--color-border-strong); background: var(--color-surface-high); }
.tool-cat-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.tool-cat-name { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.tool-cat-count { font-size: 0.75rem; color: var(--color-text-dim); font-weight: 500; }
.tool-cat p { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-sm); }
.tool-cat p:last-child { margin-bottom: 0; }
.tool-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-sm); }
.tool-list code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.tool-list code.special {
  color: var(--color-primary-bright);
  border-color: rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.08);
}
.tool-list code.is-pro {
  color: var(--color-accent);
  border-color: rgba(167,139,250,0.4);
  background: rgba(167,139,250,0.08);
  text-shadow: 0 0 8px rgba(167,139,250,0.3);
}
.tool-list code.is-pro::before {
  content: '✦ ';
  color: var(--color-accent);
  text-shadow: 0 0 6px rgba(167,139,250,0.8);
}
.tool-list code.is-pro::after {
  content: ' Pro';
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ─── Group H2 with inline code (used on commands.html) ─── */
.group h2 code {
  font-family: var(--font-mono);
  color: var(--color-primary-bright);
  font-size: 0.9em;
  background: rgba(99,102,241,0.08);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* ─── Group gate badges (Pro / Admin) ─── */
.group-gate {
  display: inline-flex; align-items: center; gap: 6px;
  vertical-align: middle;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #1a1408;
  background: var(--color-amber);
  border: 1px solid var(--color-amber);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin-left: var(--space-sm);
  box-shadow: 0 4px 14px -4px rgba(245,158,11,0.5);
}
.group-gate.pro {
  color: #fff;
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  box-shadow:
    0 0 0 4px rgba(124,58,237,0.18),
    0 6px 22px -4px rgba(124,58,237,0.6);
}
.group-gate.pro::before {
  content: '✦';
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1;
  color: var(--color-accent);
  text-shadow: 0 0 6px rgba(167,139,250,0.7);
}

/* Pro feature trail — borrows the featured-pricing-card vocabulary
   (breathing gradient mask, accent glow, ✦ glyph) so anywhere a Pro
   feature lives in the docs, the eye reads the same premium signal as
   the index Pro pricing card. */

.group.is-pro {
  position: relative;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  margin-left: calc(-1 * var(--space-xl));
  margin-right: calc(-1 * var(--space-xl));
  background: var(--color-surface-high);
  border: 1px solid rgba(167,139,250,0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--shadow-glow-accent);
  overflow: hidden;
}
.group.is-pro::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.group.is-pro > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .group.is-pro { margin-left: 0; margin-right: 0; padding: var(--space-lg); }
}

/* Inline Pro tag — ghost treatment, mirrors .pricing-features li.pro-feat
   on the index. ✦ glow + accent-tinted text, no fill.
   .pro-tag is the canonical class; .cmd-pro-tag is kept as an alias
   for use inside .cmd-head rows. */
.pro-tag,
.cmd-pro-tag {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: middle;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent);
  margin-left: var(--space-md);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  text-shadow: 0 0 8px rgba(167,139,250,0.35);
}
.pro-tag::before,
.cmd-pro-tag::before {
  content: '✦';
  font-size: 0.95rem; line-height: 1;
  letter-spacing: 0;
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(167,139,250,0.7);
}

/* Pro command row — subtle violet aura + ✦ accent on the name. The
   row reads as part of the same family without shouting. */
.cmd.is-pro {
  background: linear-gradient(135deg, rgba(167,139,250,0.04) 0%, var(--color-surface-elevated) 60%);
  border-color: rgba(167,139,250,0.25);
}
.cmd.is-pro:hover {
  border-color: rgba(167,139,250,0.5);
  box-shadow: 0 0 30px -10px rgba(167,139,250,0.35);
}

/* ─── Command rows (commands.html) ─── */
.cmd-list { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.cmd {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: border-color 0.2s, background 0.2s;
}
.cmd:hover { border-color: var(--color-border-strong); background: var(--color-surface-high); }
.cmd-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 6px;
}
.cmd-name {
  font-family: var(--font-mono);
  font-size: 1rem; font-weight: 600;
  color: var(--color-text);
}
.cmd-name .subcmd { color: var(--color-primary-bright); }
.cmd-args { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text-dim); }
.cmd-arg { color: var(--color-text-muted); }
.cmd-arg-type { color: var(--color-text-dim); }
.cmd-desc { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.65; }
.cmd-example {
  margin-top: var(--space-md);
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.cmd-example .user { color: var(--color-primary-bright); }
.cmd-example .bot { color: var(--color-success); }
.cmd-example .muted { color: var(--color-text-dim); }

/* ─── Intro cards (commands.html top section) ─── */
.intro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.intro-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: border-color 0.2s, background 0.2s;
}
.intro-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-high); }
.intro-card h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: var(--space-xs); }
.intro-card h3 code { font-family: var(--font-mono); color: var(--color-primary-bright); font-size: 0.875rem; }
.intro-card p { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; }

/* ─── TOC code highlighting (used when TOC links contain commands) ─── */
.toc-list code { font-family: var(--font-mono); color: var(--color-primary-bright); font-size: 0.85rem; background: transparent; padding: 0; }

/* ─── Boundaries / Rough edges (left-border-accent lists) ─── */
.boundaries, .rough { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.boundaries li, .rough li {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  transition: border-color 0.2s;
}
.boundaries li { border-left: 3px solid #ef4444; }
.rough li { border-left: 3px solid var(--color-amber); }
.boundaries li strong, .rough li strong { color: var(--color-text); font-weight: 600; }

/* ─── Legal pages (privacy, terms) ─── */
.legal-content {
  max-width: 800px; margin: 0 auto;
  padding: 144px var(--container-padding) var(--space-3xl);
}
.legal-content h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--space-xs); }
.legal-content .effective-date { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--space-3xl); }
.legal-content h2 { font-size: 1.375rem; font-weight: 700; margin-top: var(--space-2xl); margin-bottom: var(--space-md); color: var(--color-text); }
.legal-content p,
.legal-content li { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.8; margin-bottom: var(--space-md); }
.legal-content ul { padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.legal-content li { margin-bottom: var(--space-sm); }
.legal-content strong { color: var(--color-text); font-weight: 600; }
.legal-content code {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 0.85rem;
  font-family: var(--font-mono);
}
.legal-content a { color: var(--color-primary); }
.legal-content a:hover { color: var(--color-primary-bright); }

/* ─── Footer ─── */
.footer {
  padding: var(--space-2xl) var(--container-padding);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
}
.footer a { color: var(--color-text-muted); }
.footer a:hover { color: var(--color-text); }
.footer-links { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.footer-meta { color: var(--color-text-dim); font-size: 0.8125rem; }

/* ─── Scroll reveal ─── */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .hero::before, .hero::after, .hero .aurora { animation: none !important; }
  .pricing-card.featured::before { animation: none !important; opacity: 1; }
}

/* ============================================================
   Page-specific components
   These are not in DESIGN.md's components map (the spec only
   defines reusable design-system primitives), but they share
   tokens with everything above.
   ============================================================ */

/* ─── Mobile menu toggle ─── */
.menu-toggle { display: none; background: transparent; border: none; padding: var(--space-sm); color: var(--color-text-muted); cursor: pointer; }
.menu-toggle:hover { color: var(--color-text); }

/* ─── Hero stats (below CTA row) ─── */
.hero-stats { display: flex; gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); align-items: center; }
.hero-stats span { font-size: 0.8125rem; color: var(--color-text-dim); font-weight: 500; }
.hero-stats .stat-sep { color: var(--color-border); }

/* ─── Bento grid (homepage features) ─── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.bento-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.bento-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(167,139,250,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.bento-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card-hover); }
.bento-card:hover::before { opacity: 1; }
.bento-card > * { position: relative; }
.bento-card h3 { font-size: 1.1875rem; font-weight: 700; margin-bottom: var(--space-sm); }
.bento-card p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.65; }
.bento-1 { grid-column: 1 / 3; }
.bento-4 { grid-column: 2 / 4; }

/* ─── Container diagram (status rows inside bento cards) ─── */
.container-stack { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.container-box {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  display: flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-mono); font-size: 0.8125rem;
  color: var(--color-text-dim);
  transition: all 0.3s;
}
.container-box.active { border-color: var(--color-success); color: var(--color-success); background: rgba(34,197,94,0.05); }
.container-box.primary { border-color: var(--color-primary-bright); color: var(--color-primary-bright); background: rgba(99,102,241,0.05); }
.container-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; }
.container-box.active .container-dot { background: var(--color-success); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.container-box.primary .container-dot { background: var(--color-primary-bright); box-shadow: 0 0 8px rgba(99,102,241,0.5); }

/* ─── Provider tag row (small pill tags) ─── */
.provider-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.provider-tag {
  padding: 4px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 500;
  color: var(--color-text-dim);
}
.provider-tag code { background: transparent; padding: 0; font-size: inherit; color: inherit; }

/* ─── Showcase carousel ─── */
.showcase { max-width: 580px; margin: var(--space-2xl) auto 0; }
.showcase-frame {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-elevated);
}
.showcase-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease-in-out; cursor: zoom-in; }
.showcase-frame img.active { opacity: 1; }
.showcase-frame img:not(.active) { opacity: 0; }
.showcase-dots { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-md); }
.showcase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); cursor: pointer; transition: background 0.3s; border: none; padding: 0; }
.showcase-dot.active { background: var(--color-primary); }
.showcase-caption { text-align: center; font-size: 0.8125rem; color: var(--color-text-dim); margin-top: var(--space-sm); transition: opacity 0.5s; }

/* ─── Image gallery ─── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-2xl); align-items: start; }
.gallery-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
  cursor: zoom-in;
  box-shadow: var(--shadow-card);
}
.gallery-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card-hover); }
.gallery-card img { width: 100%; height: auto; display: block; }
.gallery-caption { padding: 12px 16px 14px; font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; border-top: 1px solid var(--color-border); cursor: default; }
.gallery-caption strong { color: var(--color-text); display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.875rem; }
.gallery-caption code { font-size: 0.875em; }

/* ─── Lightbox ─── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5,5,8,0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-xl);
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 20px 80px rgba(0,0,0,0.6); }
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(20,21,31,0.6);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
  z-index: 2;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; background: var(--color-surface-high); border-color: var(--color-border-strong); }
.lightbox-close:active,
.lightbox-prev:active,
.lightbox-next:active { transform: scale(0.95); }

.lightbox-close {
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.lightbox-prev,
.lightbox-next {
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  font-size: 1.75rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev:active,
.lightbox-next:active { transform: translateY(-50%) scale(0.95); }

.lightbox-counter {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(20,21,31,0.6);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 640px) {
  .lightbox-prev { left: 12px; width: 40px; height: 40px; }
  .lightbox-next { right: 12px; width: 40px; height: 40px; }
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* ─── Final CTA section ─── */
.cta-section {
  text-align: center;
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(167,139,250,0.15) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2 { margin-bottom: var(--space-md); }
.cta-section p { font-size: 1.125rem; color: var(--color-text-muted); margin: 0 auto var(--space-xl); max-width: 480px; }
.cta-section .hero-ctas { justify-content: center; }

/* ─── Body ambient field ─── */
/* The single source of mid-page atmosphere. Three large blobs fixed to
   the viewport so the color field scrolls *with the eye*, not with the
   sections — that way no boundary creates a horizontal seam. This is
   the only atmosphere allowed in the middle of the page; per-section
   glows are forbidden because they read as stripes.
   The fourth blob (off-center, large, low-opacity) keeps the mid-page
   from going pure black between hero and CTA. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 12% 8%, rgba(99,102,241,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 88% 45%, rgba(167,139,250,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 90% 50% at 50% 95%, rgba(192,132,252,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(129,140,248,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ─── Section atmosphere ─── */
/* The whole page is one continuous deep canvas (--color-surface).
   Sections that previously broke into a "lighter slab" (How it works,
   FAQ, etc.) now use a soft top-center radial glow as their atmosphere
   marker — no hard horizontal seam, just a gentle "spotlight" arriving. */
.section-glow-top {
  position: relative;
  isolation: isolate;
}
.section-glow-top::before {
  content: '';
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: min(900px, 80vw);
  height: 360px;
  background: radial-gradient(ellipse at center top, rgba(129,140,248,0.18) 0%, rgba(167,139,250,0.08) 35%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
/* Soft hairline divider with a gradient that fades from the page edges */
.section-divider {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(129,140,248,0.28) 50%, transparent 100%) 1;
}
/* Legacy aliases — kept as no-op pass-throughs so existing markup
   doesn't break. All atmosphere lives in body::before now; per-section
   glows are intentionally not added back, because they create the
   horizontal seams we are trying to eliminate. */
.section-on-elevated,
.section-fade-back { position: relative; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  :root { --section-y: 80px; }
}
@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --section-y: 64px;
    --card-padding: 24px;
  }
  .feature-grid, .feature-grid-3, .pricing-grid, .gallery, .bento { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .bento-1, .bento-4 { grid-column: auto; }
  .nav { padding: var(--space-md) var(--space-lg); }
  .menu-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) var(--space-xl);
    gap: var(--space-md);
  }
  .nav-links.open { display: flex; }
  .nav-cta { display: none; }
  .hero { padding: 112px var(--container-padding) var(--space-3xl); min-height: auto; }
  .hero-stats { flex-direction: column; gap: var(--space-sm); align-items: center; }
  .hero-stats .stat-sep { display: none; }
  .pricing-card { padding: 32px; }
  .page-header { padding: 112px var(--container-padding) var(--space-2xl); }
}
@media (max-width: 480px) {
  .nav-links { gap: var(--space-sm); font-size: 0.8125rem; }
  .hero-ctas .btn { width: 100%; }
}