/* ── Nodge Landing — Design Tokens ────────────────────────────────────────
   Inlined from nodge-platform/public/variables.css (self-contained deploy)
   ──────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* Dark mode (default) */
:root {
  --color-text:          #ddd4c5;
  --color-text-muted:    #9e9283;
  --color-bg:            #161412;
  --color-surface:       #1e1b18;
  --color-border:        #2e2a26;
  --color-primary:       #cf5e3f;
  --color-primary-hover: #b8502f;
  --color-primary-20:    hsl(13, 60%, 53%, 20%);
  --color-secondary:     #a885b9;
  --color-secondary-20:  hsl(280, 21%, 46%, 20%);
  --color-accent:        #8aa26d;
  --color-accent-20:     rgba(138, 162, 109, 0.2);
  --color-muted-20:      rgba(158, 146, 131, 0.2);
  --color-on-primary:    #ffffff;
  --color-hover:         rgba(255, 255, 255, 0.06);

  --font-ui:   'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;

  --radius:    10px;
  --radius-sm: 6px;

  /* ── Type scale ── */
  --text-2xs:  12px;
  --text-xs:   13px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-hero: clamp(40px, 7vw, 80px);

  /* ── Line heights ── */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Letter spacing ── */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-text:          #3a3122;
    --color-text-muted:    #7a6f62;
    --color-bg:            #fbfbfe;
    --color-surface:       #ffffff;
    --color-border:        #e2ddd7;
    --color-primary:       #c04f30;
    --color-primary-hover: #a84228;
    --color-primary-20:    hsl(13, 60%, 53%, 20%);
    --color-secondary:     #9271a2;
    --color-secondary-20:  hsl(280, 21%, 46%, 20%);
    --color-accent:        #7a925d;
    --color-accent-20:     rgba(122, 146, 93, 0.2);
    --color-muted-20:      rgba(122, 111, 98, 0.2);
    --color-on-primary:    #ffffff;
    --color-hover:         rgba(0, 0, 0, 0.04);
  }
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  font-optical-sizing: auto;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-code);
  font-size: 0.9em;
  color: var(--color-accent);
  background: var(--color-muted-20);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Layout ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.header-brand:hover {
  text-decoration: none;
}

.header-logo {
  width: 28px;
  height: 28px;
}

.header-wordmark {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* ── Header nav ── */
.header-nav {
  display: none;
  gap: 28px;
}

.header-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

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

/* ── Hamburger toggle (mobile) ── */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav dropdown */
.header-nav.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 24px;
  gap: 16px;
  z-index: 99;
}

.header-nav.open a {
  font-size: var(--text-base);
}

.btn-header {
  padding: 8px 20px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-header:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-login {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.header-login:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* ── Section spacing ── */
.section {
  padding: 56px 0;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .section {
    padding: 80px 0;
  }
}

/* The hero already ends with the framed video; a section divider right below it
   competes with the video's own border. Drop the line on the first section. */
.section--no-divider {
  border-top: none;
}

/* Flat single background (Supabase-style): both modifiers resolve to the page bg.
   Section separation comes from spacing + the thin .section border-top divider. */
.section--surface,
.section--bg {
  background: var(--color-bg);
}

.section-title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 680px;
  line-height: var(--leading-relaxed);
  margin-bottom: 40px;
}

/* ── Hero ── */
.hero {
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background: radial-gradient(ellipse 60% 50% at center 30%,
    hsl(13, 60%, 53%, 22%) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  animation: hero-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  margin-bottom: 28px;
  text-wrap: balance;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-accent {
  color: var(--color-primary);
}

.hero-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 560px;
  margin: 0 auto 36px;
  text-wrap: balance;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 0;
}

/* ── Hero screenshot (large, fades into next section) ── */
.hero-shot-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  width: calc(100% - 32px);
  margin: 64px auto 0;
  padding: 0;
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Funnel graphic is self-contained (own dark backdrop): no frame/mask, just centered
   with breathing room above the next section. PNG is 1848px native, so displaying up
   to 1100px only ever downscales — stays crisp, never upscales/blurs. */
.hero-shot-wrap--funnel {
  max-width: 1100px;
  margin-top: 40px;
}

.hero-funnel-img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hero-funnel-caption {
  margin: 16px auto 0;
  text-align: center;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .hero {
    padding: 80px 0 72px;
  }

  .hero-shot-wrap {
    margin-top: 56px;
  }
}

/* ── Any framework / database strip ── */
.stack-strip {
  max-width: 880px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Each row is a contained panel so the strip reads as a deliberate band,
   not small icons floating in empty space. */
.stack-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.stack-label {
  font-family: var(--font-code);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.stack-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.stack-logos li {
  display: inline-flex;
  color: var(--color-text-muted);
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.stack-logos li:hover {
  opacity: 1;
  color: var(--color-text);
}
.stack-logos svg {
  width: 38px;
  height: 38px;
  display: block;
}

@media (min-width: 768px) {
  .stack-strip {
    gap: 28px;
  }
  .stack-row {
    flex-direction: row;
    justify-content: center;
    gap: 28px;
  }
  .stack-label {
    flex-shrink: 0;
    min-width: 130px;
    text-align: right;
  }
  .stack-logos {
    justify-content: flex-start;
    gap: 32px;
  }
}

/* ── Platform bento (everything Nodge does) ── */
.platform-bento {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-align: left;
}

.bento-cell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.bento-cell:hover {
  border-color: var(--color-muted-20);
}

/* Artwork canvas: fills the top, pushes body to the bottom (Supabase pattern). */
.bento-art {
  position: relative;
  flex: 1;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-direction: column;
  padding: 24px 24px 8px;
  overflow: hidden;
  color: var(--color-text-muted);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.bento-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bento-cell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-primary-20);
  color: var(--color-primary);
  margin-bottom: 4px;
}
.bento-cell-icon svg {
  width: 18px;
  height: 18px;
}

.bento-cell h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin: 0;
}
.bento-cell p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Bento artwork primitives ── */
.art-chip {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  color: var(--color-primary);
  background: var(--color-primary-20);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}
.art-chip--quiet {
  color: var(--color-text-muted);
  background: var(--color-muted-20);
}
.art-muted { color: var(--color-text-muted); opacity: .7; margin-left: auto; }
.art-check { color: var(--color-accent); font-weight: 700; margin-right: 8px; }

/* Cell 1 — code editor */
.art-editor {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  overflow: hidden;
  text-align: left;
}
.art-editor-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-code);
  font-size: var(--text-xs);
  color: var(--color-text);
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border);
}
.art-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-secondary);
  flex-shrink: 0;
}
.art-editor-code {
  margin: 0;
  padding: 12px;
  font-family: var(--font-code);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
  white-space: pre;
  overflow: hidden;
}
.c-key { color: var(--color-secondary); }
.c-fn  { color: var(--color-primary); }
.c-tag { color: var(--color-accent); }

/* Cell 2 — commit graph */
.art-graph { width: 130px; height: 64px; color: var(--color-text-muted); }
.art-node { fill: var(--color-primary); stroke: none; }
.art-node--alt { fill: var(--color-secondary); }

/* Cell 3 — checklist */
.art-checklist {
  list-style: none; margin: 0; padding: 0;
  width: 100%; max-width: 220px;
  display: flex; flex-direction: column; gap: 9px;
  font-family: var(--font-code);
  font-size: var(--text-xs);
  color: var(--color-text);
}
.art-checklist li { display: flex; align-items: center; }

/* Cell 4 — sparkline */
.art-spark { width: 100%; max-width: 240px; height: 56px; color: var(--color-accent); }
.art-spark-fill { fill: var(--color-accent-20); stroke: none; }
.art-stat {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-code); font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.art-stat strong { color: var(--color-text); }

/* Cell 5 — approval avatars */
.art-approval { display: flex; align-items: center; }
.art-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-code); font-size: 11px; font-weight: 700;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-left: -8px;
}
.art-avatar:first-child { margin-left: 0; }
.art-avatar--ok { border-color: var(--color-accent); color: var(--color-accent); }
.art-approval-label {
  margin-left: 12px;
  font-family: var(--font-code); font-size: var(--text-xs);
  color: var(--color-text);
}

/* Cell 6 — pipeline strip */
.art-pipeline {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; justify-content: center;
}
.art-stage {
  position: relative;
  font-family: var(--font-code); font-size: var(--text-xs);
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.art-stage--done { color: var(--color-accent); border-color: var(--color-accent); }
.art-stage--live { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-20); }
.art-stage:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -8px;
  width: 8px; height: 1px; background: var(--color-border);
}

/* Cell 7 — globe */
.art-globe { width: 88px; height: 88px; color: var(--color-secondary); }

/* Cell 8 — token budget meter */
.art-budget { width: 100%; max-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.art-budget-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-code); font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.art-budget-top strong { color: var(--color-text); }
.art-meter {
  height: 8px; border-radius: 99px;
  background: var(--color-muted-20); overflow: hidden;
}
.art-meter span {
  display: block; height: 100%;
  background: var(--color-primary); border-radius: 99px;
}

.bento-more {
  margin: 32px auto 0;
  text-align: center;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-muted);
}
.bento-more a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.bento-more a:hover {
  text-decoration: underline;
}

@media (min-width: 720px) {
  .platform-bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 48px;
  }
  /* On 2-col, wide cells still span both for breathing room. */
  .bento-cell--wide { grid-column: span 2; }
}

@media (min-width: 980px) {
  .platform-bento {
    /* 4-col grid. Wide cells (1, 6, 7, 8) span 2 columns so every
       row sums to 4 — gapless, with Supabase-style size rhythm:
       row1: Code(2) Git Signed · row2: Logs Governed Push(2) · row3: Sovereign(2) Agents(2) */
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(248px, auto);
    gap: 20px;
  }
  .bento-cell--wide { grid-column: span 2; }
  /* Wide cells get a roomier artwork canvas. */
  .bento-cell--wide .bento-art { min-height: 168px; }
}

/* ── Promo video (centered showcase) ── */
.promo-video {
  position: relative;
  max-width: 1080px;
  margin: 8px auto 0;
}

/* Soft radial glow behind the video so it reads as a centerpiece, not a frame
   floating in flat black. */
.promo-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 115%;
  height: 130%;
  background: radial-gradient(ellipse 50% 50% at center,
    hsl(13, 60%, 53%, 14%) 0%,
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.promo-video-el {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 32px 64px -16px rgba(0, 0, 0, 0.7),
    0 80px 120px -48px rgba(207, 94, 63, 0.25);
  background: var(--color-bg);
}

/* Clickable wrapper with a big, obvious play affordance. */
.promo-video-trigger {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 14px;
}
/* Subtle dark veil over the poster so the play button always reads. */
.promo-video-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease;
}
.promo-video-trigger:hover::before {
  background: rgba(0, 0, 0, 0.42);
}

.promo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.promo-play svg {
  width: 34px;
  height: 34px;
  margin-left: 4px; /* optically center the triangle */
}
.promo-video-trigger:hover .promo-play {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.7);
}

/* Once playing, hide the veil + button and reveal native controls. */
.promo-video-trigger.is-hidden {
  cursor: default;
}
.promo-video-trigger.is-hidden::before,
.promo-video-trigger.is-hidden .promo-play {
  opacity: 0;
  pointer-events: none;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 8px 24px -8px rgba(207, 94, 63, 0.5);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 16px 32px -8px rgba(207, 94, 63, 0.6);
}

.btn-primary:active {
  transform: translateY(0);
}

/* ── Bento grid (asymmetric feature grid) ── */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
  text-align: left;
}

.bento-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  border-color: var(--color-muted-20);
}

.bento-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.bento-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.bento-card p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

@media (min-width: 860px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
  }

  .bento-card {
    padding: 32px;
  }

  /* Row 1: wide (2 col) + compact (1 col) */
  .bento-card:nth-child(1) { grid-column: span 2; }
  .bento-card:nth-child(2) { grid-column: span 1; }

  /* Row 2: compact (1 col) + wide (2 col) */
  .bento-card:nth-child(3) { grid-column: span 1; }
  .bento-card:nth-child(4) { grid-column: span 2; }

  /* Even variant: all cards equal width (3 columns) */
  .bento-grid--even .bento-card:nth-child(n) { grid-column: span 1; }
}

/* ── Features grid (used by security page) ── */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
}

/* ── Final CTA ── */
.final-cta .container {
  text-align: center;
}

.final-cta .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* When the final CTA has no subtitle (title sits directly above the buttons),
   add breathing room so the buttons don't crowd the headline. */
.final-cta .section-title + .final-cta-actions {
  margin-top: 32px;
}

/* ── FAQ (accordion) ── */
.faq-list {
  max-width: 720px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: var(--tracking-snug);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-family: var(--font-code);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  flex: none;
}

.faq-item[open] summary::after {
  content: '\2212';
  color: var(--color-primary);
}

.faq-item-body {
  padding: 0 0 20px;
}

.faq-item-body p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Pricing CTA note (closed beta) ── */
.pricing-cta-note {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  margin: 10px 0 0;
  line-height: var(--leading-normal);
}

/* ── Pricing ── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
  }
}

@media (min-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pricing-card--compute {
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  text-align: left;
}

.pricing-card--compute .pricing-tier {
  font-size: var(--text-xl);
  margin-bottom: 12px;
}

.pricing-card--compute .pricing-desc {
  min-height: auto;
  margin-bottom: 0;
}

.compute-units {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.compute-units li {
  font-family: var(--font-code);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 14px;
}

.pricing-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pricing-card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  padding: 31px 27px;
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.pricing-tier {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.pricing-price {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.pricing-price-unit {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0;
  margin-left: 4px;
}

.pricing-price-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.pricing-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: 24px;
  min-height: 112px;
}

.pricing-cta {
  align-self: flex-start;
  margin-bottom: 28px;
}

.pricing-footnote {
  margin-top: 32px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-features li {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
  padding-left: 22px;
  position: relative;
}

.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}


/* ── Math comparison grid ── */
.math-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
  text-align: left;
}

@media (min-width: 880px) {
  .math-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.math-grid .code-block {
  height: 100%;
}

.math-caption {
  max-width: 880px;
  margin: 40px auto 0;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 880px) {
  .math-caption {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.math-caption p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.math-caption strong {
  color: var(--color-text);
  display: block;
  margin-bottom: 4px;
}

.alt-shot {
  position: relative;
  margin-top: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 32px 64px -16px rgba(0, 0, 0, 0.7),
    0 80px 120px -32px rgba(0, 0, 0, 0.5),
    0 100px 160px -48px rgba(207, 94, 63, 0.2);
}

.alt-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Funnel graphic brings its own dark backdrop, so drop the frame/shadow and just
   center it (same treatment as the homepage hero funnel). */
.alt-shot--funnel {
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Page hero (sub-page hero with subtle glow) ── */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 64px;
}

.page-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  background: radial-gradient(ellipse 60% 50% at center 30%,
    hsl(13, 60%, 53%, 18%) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: 20px;
  text-wrap: balance;
}

.section--centered.page-hero h1 {
  text-align: center;
}

.page-hero .section-subtitle {
  font-size: clamp(17px, 1.6vw, 20px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .page-hero {
    padding: 128px 0 80px;
  }
}

/* ── Fork (org/dev) ── */
.fork-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
}

@media (min-width: 880px) {
  .fork-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .fork-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fork-card {
  display: flex;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}

.fork-card-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fork-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.fork-card-headline {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: var(--leading-tight);
}

@media (min-width: 720px) {
  .fork-card-headline {
    font-size: var(--text-3xl);
  }
}

.fork-card-sub {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 16px;
  line-height: var(--leading-snug);
}

.fork-card-body p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0 0 20px;
}

.fork-card-cta {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: auto;
  padding-top: 20px;
}

/* ── Developer page: cycle stage rows ── */
.dev-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
  text-align: left;
}

.dev-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.dev-stage-label {
  font-family: var(--font-code);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  align-self: start;
}

.dev-stage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dev-stage-list li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  padding-left: 18px;
  position: relative;
}

.dev-stage-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

.dev-stage-list li code {
  font-size: var(--text-sm);
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: 4px;
}

@media (min-width: 720px) {
  .dev-stages {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
  }

  .dev-stage {
    grid-template-columns: 100px 1fr;
    gap: 20px;
    align-items: start;
  }

  .dev-stage-list li {
    font-size: var(--text-base);
  }
}

/* ── Features page (table of contents + lists) ── */
.feat-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font-family: var(--font-code);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.feat-toc a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 6px 4px;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.feat-toc a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.feat-h3 {
  font-family: var(--font-code);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 780px) {
  .feat-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
  }
}

.feat-list li {
  position: relative;
  padding: 14px 18px 14px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.feat-list li strong {
  display: block;
  color: var(--color-text);
  font-size: var(--text-base);
  margin-bottom: 2px;
}

.feat-list--coming li {
  border-left-color: var(--color-primary);
  background: transparent;
}

/* ── Feature detail pages (/features/<slug>) ── */
.container--narrow {
  max-width: 760px;
}

.feat-eyebrow {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

.feat-eyebrow a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.feat-eyebrow a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Detail-page body: plain prose, heading + paragraph per section. */
.feat-prose > * + * {
  margin-top: 0;
}

.feat-prose h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: var(--tracking-snug);
  margin: 40px 0 12px;
}

.feat-prose h3:first-child {
  margin-top: 0;
}

.feat-prose p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.feat-closing {
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: var(--tracking-snug);
}

/* "Learn more" link under each section on the features index. */
.feat-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-family: var(--font-code);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

.feat-learn-more:hover {
  border-bottom-color: var(--color-primary);
}

.feat-learn-more::after {
  content: '\2192';
}

/* Prev / next pager between feature pages. */
.feat-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: stretch;
  max-width: 760px;
  margin: 0 auto;
}

.feat-pager a {
  flex: 1 1 220px;
  display: block;
  padding: 18px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 120ms ease;
}

.feat-pager a:hover {
  border-color: var(--color-primary);
}

.feat-pager .feat-pager-dir {
  display: block;
  font-family: var(--font-code);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.feat-pager .feat-pager-title {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.feat-pager a.feat-pager-next {
  text-align: right;
}

.feat-pager-index {
  text-align: center;
  margin: 28px 0 0;
}

.feat-pager-index a {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.feat-pager-index a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── "See all features" CTA (developer page) ── */
.poster-cta {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.feature-card {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%,
      hsl(13, 60%, 53%, 5%) 0%,
      transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  border-color: var(--color-muted-20);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}

.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-20);
  color: var(--color-primary);
  margin-bottom: 18px;
}

.feature-card-icon svg {
  width: 20px;
  height: 20px;
}

.feature-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  margin-bottom: 8px;
  color: var(--color-text);
}

.feature-card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


/* ── MCP Gateway ── */
.gateway-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gateway-text .section-subtitle {
  margin-bottom: 0;
}

.gateway-text p {
  margin-bottom: 6px;
}

.code-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.code-header {
  font-family: var(--font-code);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: 0.02em;
}

.code-block pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
}

.code-block code {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-accent);
  background: none;
  padding: 0;
}


/* ── Centered section header (title + subtitle) ── */
.section--centered .section-title,
.section--centered .section-subtitle {
  text-align: center;
}

.section--centered .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ── Timeline (vertical how-it-works) ── */
.timeline {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.timeline-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

.timeline-num {
  display: block;
  font-family: var(--font-code);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 860px) {
  .timeline-num {
    font-size: 64px;
    margin-bottom: 20px;
  }
}

.timeline-text h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: 12px;
  color: var(--color-text);
}

.timeline-text p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 48ch;
}

.timeline-text code {
  font-size: 0.9em;
}

.timeline-visual {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-bg);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.timeline-visual img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 6px;
}

.timeline-step--center {
  justify-items: center;
  text-align: center;
  grid-template-columns: 1fr;
}

.timeline-step--center .timeline-text p {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 860px) {
  .timeline {
    gap: 96px;
    margin-top: 64px;
  }

  .timeline-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 64px;
  }

  .timeline-step--reverse .timeline-text {
    order: 2;
  }

  .timeline-step--reverse .timeline-visual {
    order: 1;
  }

  .timeline-step--center {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .timeline-text h3 {
    font-size: var(--text-3xl);
  }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.btn-secondary:hover {
  border-color: var(--color-text-muted);
  background: var(--color-hover);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 40px 0 20px;
  background: var(--color-bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
}

.footer-logo {
  height: 28px;
  width: auto;
}

.footer-wordmark {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
}

.footer-iso {
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity 120ms ease;
}

.footer-iso:hover {
  opacity: 1;
}

.footer-iso img {
  height: 36px;
  width: auto;
  display: block;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color 120ms ease;
}

.footer-social:hover {
  color: var(--color-primary);
}

.footer-col h4 {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  margin: 0 0 12px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col li {
  font-size: var(--text-sm);
}

.footer-col a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 120ms ease;
}

.footer-col a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.footer-legal-inline {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* ── Subpage layout ── */
.page-content {
  padding: 48px 0 60px;
  min-height: calc(100vh - 60px - 97px);
}

/* 404: center the content block and let the buttons sit centered */
.page-content.section--centered p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.error-code {
  font-family: var(--font-code);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.page-content h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  margin-bottom: 8px;
}

.page-content .page-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: 40px;
}

.page-content h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: 36px;
  margin-bottom: 12px;
}

.page-content p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: 16px;
  max-width: 640px;
}

.page-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}

.page-content ul li {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  padding-left: 20px;
  position: relative;
}

.page-content ul li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

/* ── Responsive: Desktop ── */
@media (min-width: 768px) {
  .header-nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  .page-content h1 {
    font-size: var(--text-3xl);
  }

  .gateway-section {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .gateway-text {
    flex: 1;
  }

  .gateway-code {
    flex: 0 0 340px;
  }

  .section {
    padding: 48px 0;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .features-grid--odd > .feature-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    justify-self: center;
  }

  .site-footer .container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── Compare table ── */
.compare-table-wrap {
  padding: 0 24px;
  max-width: 1120px;
  margin: 0 auto;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  table-layout: fixed;
}

.compare-table th,
.compare-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.compare-table thead th {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 16px;
  position: sticky;
  top: 60px;
  background: var(--color-bg);
  z-index: 10;
}

.compare-feature-col {
  width: 20%;
}

.compare-table tbody td:first-child {
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}

/* Group header rows */
.compare-group td {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding-top: 28px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}

/* Status colors */
.compare-yes {
  color: var(--color-accent);
}

.compare-partial {
  color: var(--color-text);
}

.compare-no {
  color: var(--color-primary);
}

/* Nodge column highlight */
.compare-highlight {
  background: rgba(138, 162, 109, 0.03);
}

.compare-table thead th.compare-highlight {
  color: var(--color-text);
}

/* ── Honorable mentions ── */
.mentions-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.mention {
  padding: 20px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.mention h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 6px;
}

.mention p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .mentions-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Trust boundaries (security page) ── */
.boundary-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 40px;
}

@media (min-width: 720px) {
  .boundary-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.boundary-row {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.boundary-row strong {
  display: block;
  color: var(--color-text);
  font-size: var(--text-base);
  margin-bottom: 6px;
}

.boundary-row p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ── Attack-path reduction callout ── */
.callout-attack {
  margin-top: 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.callout-attack strong {
  color: var(--color-primary);
}

/* ── Standards mapping table ── */
.standards-table-wrap {
  margin-top: 40px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.standards-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.standards-table thead th {
  background: var(--color-bg);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
}

.standards-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.standards-table tbody tr:last-child td {
  border-bottom: none;
}

.standards-table td:first-child {
  width: 32%;
  min-width: 200px;
}

.standards-table td strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.standards-sub {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── NDA pack list ── */
.nda-pack {
  margin-top: 40px;
  text-align: left;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 32px;
}

.nda-pack h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.nda-pack p {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0 0 12px;
}

.nda-pack ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--color-text);
}

.nda-pack li {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: 4px;
}

/* ── Certification section (security page) ── */
.cert-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 720px) {
  .cert-section {
    grid-template-columns: 180px 1fr;
    gap: 48px;
  }
}

.cert-badge {
  display: flex;
  justify-content: center;
}

.cert-badge img {
  width: 100%;
  max-width: 180px;
  height: auto;
}

.cert-text h2 {
  margin-bottom: 16px;
}

.cert-text p {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0 0 12px;
}

.cert-text p:last-child {
  margin-bottom: 0;
}

/* ── Audit list (security page) ── */
.audit-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}

@media (min-width: 720px) {
  .audit-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.audit-row {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.audit-row strong {
  display: block;
  color: var(--color-text);
  font-size: var(--text-base);
  margin-bottom: 8px;
}

.audit-row p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.audit-note {
  margin-top: 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.audit-note p {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.audit-note strong {
  color: var(--color-primary);
}

/* ── "Does NOT" list (security page) ── */
.not-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.not-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.not-item:last-child {
  border-bottom: none;
}

.not-x {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-20);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: 50%;
  margin-top: 2px;
}

.not-item strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.not-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
}

/* ── Status Page ───────────────────────────────────────────────────────── */

.status-page {
  padding: 40px 0 120px;
  min-height: 60vh;
}

.status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 40px;
}

.status-banner-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-border);
  flex: none;
}

.status-banner-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.status-banner--up {
  background: var(--color-accent-20);
  border-color: var(--color-accent);
}
.status-banner--up .status-banner-dot { background: var(--color-accent); }
.status-banner--up .status-banner-text { color: var(--color-accent); }

.status-banner--degraded {
  background: rgba(212, 168, 67, 0.15);
  border-color: #d4a843;
}
.status-banner--degraded .status-banner-dot { background: #d4a843; }
.status-banner--degraded .status-banner-text { color: #d4a843; }

.status-banner--down {
  background: var(--color-primary-20);
  border-color: var(--color-primary);
}
.status-banner--down .status-banner-dot { background: var(--color-primary); }
.status-banner--down .status-banner-text { color: var(--color-primary); }

.status-services {
  display: flex;
  flex-direction: column;
}

.status-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.status-row:last-child {
  border-bottom: none;
}

.status-uptime {
  flex: none;
  width: 64px;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  padding-top: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.status-center {
  flex: 1;
  min-width: 0;
}

.status-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.status-service-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.status-label {
  font-size: var(--text-xs);
  font-weight: 600;
}

.status-bar-chart {
  display: flex;
  gap: 1px;
  height: 32px;
  align-items: stretch;
}

.status-bar {
  flex: 1;
  min-width: 1px;
  border-radius: 2px;
  transition: opacity 0.15s;
}

.status-bar:hover {
  opacity: 0.7;
}

.status-bar-labels {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.status-bar-labels-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.status-bar-labels-avg {
  flex: none;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.status-updated {
  margin-top: 32px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.status-error {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  padding: 40px 0;
}

@media (max-width: 640px) {
  .status-uptime {
    width: 48px;
    font-size: var(--text-sm);
  }

  .status-bar-chart {
    height: 24px;
  }
}

/* ── Contact page layout ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

@media (min-width: 880px) {
  .contact-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
  }
}

.contact-layout--solo {
  max-width: 640px;
}

@media (min-width: 880px) {
  .contact-layout--solo {
    grid-template-columns: 1fr;
  }
}

/* ── Book a demo intro (left column) ── */
.demo-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.demo-intro-title {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0;
}

@media (min-width: 880px) {
  .demo-intro-title {
    font-size: var(--text-4xl);
  }
}

.demo-intro-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 40ch;
}

.demo-intro-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px;
  background: var(--color-surface);
}

.demo-intro-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 16px;
}

.demo-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-checklist li {
  position: relative;
  padding-left: 32px;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.demo-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* ── Contact card (form container) ── */
.contact-card {
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%,
      hsl(13, 60%, 53%, 5%) 0%,
      transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 48px -16px rgba(0, 0, 0, 0.5);
}

@media (min-width: 720px) {
  .contact-card {
    padding: 40px;
  }
}

/* ── Contact form ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-20);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: var(--leading-normal);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-submit {
  width: 100%;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: 4px;
}

.form-privacy {
  margin: -4px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.form-privacy a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.form-privacy a:hover {
  color: var(--color-primary);
}

.form-status {
  margin: 0;
  font-size: var(--text-sm);
  min-height: 1.4em;
  text-align: center;
}

.form-status--ok {
  color: var(--color-accent);
}

.form-status--err {
  color: #d04848;
}

#contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}