/* ==============================================================
   AnswerVault v2 stylesheet
   Built from mockups/option-g4-catapult-navy.html,
              mockups/hub-g4-sovereignty.html,
              mockups/blog-g4-7-minimal.html
   Palette taken directly from the Catapult styleguide (pp. 21–25).
   ============================================================== */

:root {
  /* Catapult brand palette — primary */
  --cat-purple: #753988;
  --cat-pink:   #a20075;
  --cat-blue:   #4e7cdd;
  --cat-mint:   #73c5b0;
  /* Secondary */
  --cat-orange: #c9414c;
  --cat-lime:   #a9e77a;
  --cat-blush:  #cb74ae;
  --cat-lilac:  #cdb7d4;
  --cat-navy:   #281745;
  --cat-navy-deep: #1c1031;
  --cat-grey:   #1e1e1e;
  --cat-off-white: #f5f3f6;

  /* Brand gradients */
  --grad-blue-purple: linear-gradient(135deg, #4e7cdd 0%, #753988 100%);
  --grad-orange-pink: linear-gradient(135deg, #c9414c 0%, #a20075 100%);
  --grad-lime-mint:   linear-gradient(135deg, #a9e77a 0%, #73c5b0 100%);

  /* Page tokens */
  --bg:         #ffffff;
  --bg-soft:    #f8f7fa;
  --bg-2:       #ece9f0;
  --ink:        #281745;
  --ink-2:      #4a3a65;
  --muted:      #6f6685;
  --rule:       #e3dfe8;
  --mint-deep:  #2d6e5b;
  --mint-pale:  #e8f5f1;
  --navy-pale:  #ece8f1;
  --highlight:  #73c5b0;       /* mint as the hero highlighter */
}

/* ───── Reset ───── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* .container-narrow used to be 1080. The v2 layout refactor unifies on
   a single 1240 wrapper so every page's left edge aligns with the nav
   logo. Inner content (prose, hub-content) caps itself for readability
   via its own max-width rules. Class kept as an alias for hand-rolled
   pages that still emit it; remove once all references are migrated. */
.container-narrow { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Highlight em — used across pages on hero h1 + section h2 key words */
h1 em, .section-head h2 em, .sov h2 em, .home-stats-band h2 em {
  font-style: normal; font-weight: inherit;
  background: var(--highlight); padding: 0 12px; border-radius: 6px;
  display: inline-block; transform: rotate(-1deg); color: var(--ink);
}
.section-head h2 em, .sov h2 em, .home-stats-band h2 em {
  padding: 0 10px; transform: rotate(-0.8deg);
}

/* ───── Nav (sticky, white, mint-underline active) ───── */
nav.primary {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky; top: 0; z-index: 60;
}
nav.primary .inner {
  max-width: 1240px; margin: 0 auto; padding: 16px 32px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center;
}
.logo {
  display: inline-flex; align-items: center; text-decoration: none;
}
.logo img { height: 28px; width: auto; display: block; }
nav.primary ul { list-style: none; display: flex; gap: 28px; font-size: 14px; font-weight: 500; margin: 0; padding: 0; }
nav.primary > .inner > ul > li { position: relative; }
nav.primary a { text-decoration: none; color: var(--ink-2); }
nav.primary > .inner > ul > li.active > a { color: var(--cat-navy); }
nav.primary > .inner > ul > li.active > a::after { content: ""; display: block; height: 2px; background: var(--cat-mint); margin-top: 4px; }
nav.primary a:hover { color: var(--cat-navy); }
nav.primary .chev {
  width: 11px; height: 11px; display: inline-block; vertical-align: -1px;
  margin-left: 2px; fill: currentColor; opacity: 0.65;
  transition: transform 0.15s;
}
nav.primary li.has-children > a {
  display: inline-flex; align-items: center;
}
nav.primary li.has-children:hover > a .chev,
nav.primary li.has-children:focus-within > a .chev { transform: rotate(180deg); }

nav.primary .submenu {
  position: absolute; top: 100%; left: -16px;
  margin: 0; padding: 8px;
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(40, 23, 69, 0.10), 0 2px 6px rgba(40, 23, 69, 0.04);
  min-width: 220px;
  list-style: none;
  z-index: 70;
  /* Visibility — show on hover/focus-within only */
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s, visibility 0s linear 0.12s;
}
nav.primary li.has-children:hover > .submenu,
nav.primary li.has-children:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.12s, transform 0.12s, visibility 0s;
}
/* Invisible hover-bridge so the submenu doesn't disappear when crossing the gap */
nav.primary li.has-children > a::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
nav.primary .submenu li { padding: 0; position: static; }
nav.primary .submenu a {
  display: block;
  padding: 9px 12px; border-radius: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
nav.primary .submenu a:hover { background: var(--bg-soft); color: var(--cat-navy); }

.nav-cta { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.nav-cta a { text-decoration: none; }
.nav-cta .ghost { color: var(--ink-2); padding: 8px 14px; }
.nav-cta .primary {
  background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 8px; font-weight: 500;
}
.nav-cta .primary:hover { background: var(--cat-navy-deep); }

/* ───── Generic band & section-head ───── */
section.band { padding: 96px 0; border-top: 1px solid var(--rule); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: 44px; line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 700; margin-bottom: 16px;
}
.section-head p { font-size: 18px; color: var(--ink-2); line-height: 1.5; }

/* ───── Buttons ───── */
.btn-primary {
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 14px 22px; border-radius: 10px; font-weight: 500; font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary:hover { background: var(--cat-navy-deep); }
.btn-primary::after { content: "→"; }
.btn-ghost {
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
  text-decoration: none; padding: 14px 22px; border-radius: 10px; font-weight: 500; font-size: 15px;
}
.btn-ghost:hover { border-color: var(--ink); }

/* ───── Hero (homepage) ───── */
.hero { padding: 72px 0 0; }
.hero .grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--cat-navy); background: var(--navy-pale);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 24px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--cat-navy); border-radius: 50%; }
.hero h1 {
  font-size: 64px; line-height: 1.04; letter-spacing: -0.025em; font-weight: 700;
  margin-bottom: 20px;
}
.hero .dek {
  font-size: 19px; line-height: 1.5; color: var(--ink-2);
  margin-bottom: 32px; max-width: 560px;
}
.actions { display: flex; gap: 12px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; }
.actions .meta { color: var(--muted); font-size: 13px; margin-left: 8px; }

/* ───── Trust strip ───── */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 24px 32px;
  padding-top: 24px; border-top: 1px solid var(--rule);
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.trust-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.trust-item .check { color: var(--mint-deep); }

/* ───── Mock product UI in hero ───── */
.ui-frame {
  background: linear-gradient(180deg, #fafafe 0%, var(--bg-2) 100%);
  border: 1px solid var(--rule); border-radius: 16px; padding: 28px;
  box-shadow: 0 1px 0 rgba(40,23,69,0.04), 12px 12px 0 var(--cat-navy);
  transform: rotate(0.6deg); position: relative;
}
.ui-window {
  background: #fff; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08);
  overflow: hidden; border: 1px solid var(--rule);
}
.ui-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #f8f7fa; border-bottom: 1px solid var(--rule);
}
.ui-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: #e0dde6; }
.ui-chrome .title { font-size: 12px; color: var(--muted); margin-left: 12px; font-weight: 500; }
.ui-chrome .title strong { color: var(--ink); font-weight: 600; }
.msg {
  padding: 14px 16px;
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  border-bottom: 1px solid #f3f1f6;
}
.msg:last-child { border-bottom: none; }
.av {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, #ffd6e0, #c7e9ff);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; color: var(--cat-navy-deep);
}
.av.bot { background: var(--cat-navy); color: #fff; }
.msg .meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.msg .meta strong { color: var(--ink); font-weight: 600; margin-right: 6px; }
.msg .text { font-size: 14px; line-height: 1.5; color: var(--ink); }
.msg .badge-gov {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--mint-deep);
  background: var(--mint-pale); padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em; margin-left: 6px;
}
.msg .badge-gov::before { content: "✓"; }
.source-card {
  margin-top: 10px; padding: 10px 12px;
  background: var(--bg-soft); border: 1px solid var(--rule);
  border-radius: 8px; border-left: 3px solid var(--cat-navy);
  font-size: 12px; color: var(--ink-2);
}
.source-card .label {
  font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
}
.source-card strong { color: var(--ink); font-weight: 600; }
.ui-input {
  padding: 10px 14px; border-top: 1px solid var(--rule);
  background: #fafafe; font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.ui-input::before { content: "▸"; color: var(--cat-navy); }
.surface-tabs {
  margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 11px; font-family: "JetBrains Mono", monospace;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.surface-tabs .label { color: var(--muted); }
.surface-tabs .surface { color: var(--ink-2); font-weight: 600; }
.surface-tabs .dot { color: var(--rule); }

/* ───── Integrations row ───── */
.integrations-row {
  margin-top: 80px; padding: 32px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.integrations-row .label {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
  text-align: center; margin-bottom: 20px;
}
.integrations-row .logos {
  display: flex; justify-content: center; align-items: center; gap: 48px;
  flex-wrap: wrap; color: var(--ink-2); font-weight: 600; font-size: 16px; opacity: 0.7;
}
.integrations-row .logos span { display: flex; align-items: center; gap: 10px; }
.integrations-row .logos img {
  width: 22px; height: 22px; flex-shrink: 0;
  /* simple-icons SVGs ship black — tint to ink-2 (#4a3a65) to match
     the v2 navy ink while keeping logos visually distinct. */
  filter: brightness(0) saturate(100%) invert(20%) sepia(20%) saturate(900%) hue-rotate(230deg) brightness(95%) contrast(95%);
}

/* ───── Stats grid ───── */
.band-stats { background: var(--bg-soft); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: 32px 28px; border-top: 3px solid var(--cat-navy);
}
.stat-num {
  font-size: 56px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--cat-navy); line-height: 1; margin-bottom: 8px;
}
.stat-unit {
  font-size: 14px; color: var(--ink-2); font-weight: 500;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.stat-card p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.stat-card p strong { color: var(--ink); font-weight: 600; }
.stat-source {
  font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ───── How it works (steps) ───── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step {
  background: var(--bg-soft); border: 1px solid var(--rule);
  border-radius: 14px; padding: 28px;
}
.step .num {
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: var(--cat-navy); font-weight: 600; margin-bottom: 16px;
}
.step h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px;
}
.step p { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; }
.step ul { list-style: none; }
.step li {
  font-size: 13px; color: var(--ink-2); padding: 6px 0;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between;
}
.step li .mono { font-family: "JetBrains Mono", monospace; color: var(--muted); font-size: 12px; }

/* ───── Use cases inline strip ───── */
.use-strip { padding: 56px 0; border-top: 1px solid var(--rule); }
.use-strip .kicker {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--cat-navy); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 500; margin-bottom: 14px;
}
.use-strip .roles {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: baseline; font-size: 19px; line-height: 1.4;
  color: var(--ink-2); letter-spacing: -0.005em;
}
.use-strip .roles a {
  color: var(--ink); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.use-strip .roles a:hover { color: var(--cat-navy); border-bottom-color: var(--cat-navy); }
.use-strip .roles .dot { color: var(--rule); }
.use-strip .all-link {
  margin-top: 18px; font-family: "JetBrains Mono", monospace;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.use-strip .all-link a {
  color: var(--mint-deep); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color 0.15s;
}
.use-strip .all-link a:hover { border-bottom-color: var(--mint-deep); }

/* ───── Differentiators (features) ───── */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature {
  background: #fff; border: 1px solid var(--rule);
  border-radius: 14px; padding: 28px; transition: border-color 0.2s;
}
.feature:hover { border-color: var(--cat-navy); }
.feature .id {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--cat-navy); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; margin-bottom: 12px;
}
.feature h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.feature p { color: var(--ink-2); font-size: 15px; }

/* ───── Sovereignty band ───── */
.sov {
  background: var(--grad-blue-purple); color: #fff;
  border-radius: 16px; padding: 56px 56px 48px;
  margin: 64px 0;
  display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: center;
}
.sov .label {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7); margin-bottom: 16px;
}
.sov h2 {
  font-size: 32px; line-height: 1.2; letter-spacing: -0.015em;
  font-weight: 700; margin-bottom: 16px;
}
.sov p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92); max-width: 640px; }
.sov h2 em {
  background: var(--cat-mint); color: var(--cat-navy);
}
.sov .right {
  border-left: 1px solid rgba(255,255,255,0.2); padding-left: 32px;
}
.sov .right h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7); margin-bottom: 12px; font-weight: 600;
}
.sov .right ul { list-style: none; }
.sov .right li {
  padding: 8px 0; font-size: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; justify-content: space-between;
}
.sov .right li:first-child { border-top: none; }
.sov .right .mono {
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: rgba(255,255,255,0.7);
}

/* ───── Cost comparison ───── */
.cost-table { display: flex; flex-direction: column; gap: 4px; max-width: 980px; margin-top: 8px; }
.cost-row {
  display: grid; grid-template-columns: 280px 1fr 110px;
  align-items: center; gap: 24px; padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.cost-row:last-child { border-bottom: none; }
.cost-name { font-weight: 500; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cost-name .badge {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  background: var(--cat-navy); color: #fff; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.cost-name .meta { font-size: 12px; color: var(--muted); font-weight: 400; }
.cost-bar { height: 10px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); }
.cost-fill { height: 100%; background: var(--ink-2); border-radius: 4px; }
.cost-num { font-family: "JetBrains Mono", monospace; font-size: 16px; font-weight: 600; color: var(--ink); text-align: right; }
.cost-row--us { background: var(--navy-pale); border-radius: 8px; padding: 16px; }
.cost-row--us .cost-name { color: var(--cat-navy); font-weight: 700; }
.cost-row--us .cost-num { color: var(--cat-navy); }
.cost-row--us .cost-fill { background: var(--cat-navy); }
.cost-foot {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule);
  font-size: 17px; color: var(--ink-2); max-width: 820px; line-height: 1.5;
}
.cost-foot strong { color: var(--cat-navy); font-weight: 700; }

/* ───── Blog list (homepage section) ───── */
.blog { display: grid; grid-template-columns: 280px 1fr; gap: 64px; }
.blog-side h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 600; margin-bottom: 16px;
}
.blog-side ul { list-style: none; }
.blog-side li {
  padding: 10px 0; border-top: 1px solid var(--rule);
  font-size: 14px; display: flex; justify-content: space-between;
}
.blog-side li:first-child { border-top: none; }
.blog-side li a { text-decoration: none; color: var(--ink-2); }
.blog-side li a:hover { color: var(--cat-navy); }
.blog-side li .count {
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted);
}
.blog-side li.active a { color: var(--ink); font-weight: 600; }
.post-list { border-top: 1px solid var(--rule); }
.post {
  display: grid;
  grid-template-columns: 100px 1fr 140px;
  gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  align-items: start;
}
.post .date {
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted);
  padding-top: 4px;
}
.post .read {
  text-align: right;
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted);
  padding-top: 4px;
}
.post .title h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.25; margin-bottom: 8px;
}
.post:hover .title h3 { color: var(--cat-navy); }
.post .title p {
  color: var(--ink-2); font-size: 15px; margin-bottom: 8px; max-width: 640px;
}
.post .title .meta {
  font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; gap: 14px;
}
.post .title .meta a { color: var(--mint-deep); font-weight: 600; text-decoration: none; }
.post .title .meta a:hover { color: var(--cat-navy); }

/* ───── Footer ───── */
footer.site {
  background: var(--cat-navy-deep); color: rgba(255,255,255,0.85);
  padding: 64px 0 40px;
  /* Default: breathing room from content above when there's no dark CTA. */
  margin-top: 96px;
  border-top: 1px solid var(--rule);
}
/* When the page ends with a CTA band, drop the gap and use a mint
   hairline as the step from --cat-navy (CTA) into --cat-navy-deep (footer). */
section.band-cta + footer.site {
  margin-top: 0;
  border-top: 3px solid var(--cat-mint);
}
footer.site .grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 40px;
}
footer.site h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5); font-weight: 600; margin-bottom: 14px;
  font-family: "JetBrains Mono", monospace;
}
footer.site a {
  display: block; padding: 4px 0;
  color: rgba(255,255,255,0.78); text-decoration: none; font-size: 14px;
}
footer.site a:hover { color: #fff; }
footer.site .lockup {
  display: flex; align-items: center; margin-bottom: 12px;
}
footer.site .lockup img { height: 28px; width: auto; display: block; }
footer.site .tagline { font-size: 14px; color: rgba(255,255,255,0.6); max-width: 280px; }
footer.site .credit {
  margin-top: 24px; font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: rgba(255,255,255,0.4);
  display: flex; justify-content: space-between;
}

/* ===============================================================
   BLOG INDEX PAGE (B7)
   =============================================================== */

.blog-header-band {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  padding: 64px 0 48px;
}
.blog-header-band .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 16px;
}
.blog-header-band h1 {
  font-size: 56px; font-weight: 700; line-height: 1.06;
  letter-spacing: -0.025em; margin-bottom: 16px;
  color: var(--ink);
}
.blog-header-band p {
  color: var(--ink-2); font-size: 19px; line-height: 1.5;
  max-width: 720px; margin: 0;
}
.blog-header-hubs {
  margin-top: 24px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.blog-header-hubs .label { color: var(--muted); font-weight: 500; padding-right: 4px; }
.blog-header-hubs a {
  color: var(--mint-deep); text-decoration: none; font-weight: 600;
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.blog-header-hubs a:hover { color: var(--cat-navy); border-bottom-color: var(--cat-mint); }
.blog-header-hubs .dot { color: var(--rule); }

.blog-featured-band { padding: 48px 0 0; }
.blog-featured-card {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 0; background: #fff;
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(40,23,69,0.06), 0 4px 14px rgba(40,23,69,0.05);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-decoration: none; color: inherit;
}
.blog-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(40,23,69,0.12);
  border-color: var(--cat-mint);
}
.blog-featured-card-image {
  flex: 0 0 40%; max-width: 400px; min-height: 260px;
  aspect-ratio: 3 / 2; border-radius: 12px 0 0 12px;
  background-size: cover; background-position: center;
}
.blog-featured-card-content {
  flex: 1; padding: 36px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.blog-featured-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--mint-deep); margin-bottom: 12px;
}
.blog-featured-card-content h2 {
  font-size: 1.65rem; color: var(--cat-navy);
  line-height: 1.3; margin-bottom: 12px; letter-spacing: -0.012em;
}
.blog-featured-card-content .blog-desc {
  color: var(--ink-2); font-size: 1rem; max-width: 600px;
  margin-bottom: 20px; line-height: 1.7;
}
.blog-featured-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.blog-featured-meta .blog-meta {
  font-size: 0.8rem; color: var(--muted);
  display: flex; gap: 10px; align-items: center;
}
.blog-featured-meta .blog-meta .blog-dot { color: #cbd5e1; }

/* Tag pills */
.blog-tag-pill {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 16px; text-decoration: none;
}
.pill-sovereignty     { background: rgba(78, 124, 221, 0.12); color: #355ab8; }
.pill-curated         { background: rgba(115, 197, 176, 0.16); color: var(--mint-deep); }
.pill-governance      { background: rgba(115, 197, 176, 0.16); color: var(--mint-deep); }
.pill-compliance      { background: rgba(162, 0, 117, 0.10); color: #7a0058; }
.pill-cost            { background: rgba(201, 65, 76, 0.12); color: #8d2c33; }
.pill-field           { background: rgba(40, 23, 69, 0.10); color: var(--cat-navy); }
.pill-product-updates { background: rgba(117, 57, 136, 0.10); color: var(--cat-purple); }
.pill-cross-ecosystem { background: rgba(169, 231, 122, 0.20); color: #5a8a3a; }
.pill-technical       { background: rgba(205, 183, 212, 0.30); color: #5a4f60; }
.pill-default         { background: rgba(115, 197, 176, 0.16); color: var(--mint-deep); }

.blog-filter-bar {
  position: sticky; top: 56px; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0; margin-top: 56px;
}
.blog-filter-bar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.blog-filter-bar .label {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px;
}
.blog-tag-pill--filter {
  cursor: pointer; transition: background 0.15s, color 0.15s;
  padding: 6px 14px; font-size: 0.78rem;
  background: #f1efef; color: var(--ink-2); text-decoration: none;
  display: inline-block; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; border-radius: 16px;
}
.blog-tag-pill--filter:hover { background: var(--mint-pale); color: var(--mint-deep); }
.blog-tag-pill--filter.active { background: var(--cat-mint); color: var(--cat-navy); }

.blog-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; padding: 36px 0 64px;
}
.blog-card {
  background: #fff; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(40,23,69,0.05), 0 4px 14px rgba(40,23,69,0.04);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  border: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(40,23,69,0.10);
  border-color: var(--cat-mint);
}
.blog-card .blog-cover-image {
  width: 100%; aspect-ratio: 40;
  background-size: cover; background-position: center;
  border-radius: 12px 12px 0 0;
}
.blog-card .blog-card-stripe { height: 3px; flex-shrink: 0; }
.blog-card-content { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card-content .blog-tag-pill { align-self: flex-start; margin-bottom: 14px; }
.blog-card-content h3 {
  font-size: 1.05rem; color: var(--cat-navy);
  line-height: 1.35; margin-bottom: 10px; letter-spacing: -0.005em;
}
.blog-card-content .blog-desc {
  font-size: 0.88rem; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 16px; flex: 1;
}
.blog-card-content .blog-meta {
  font-size: 0.8rem; color: var(--muted);
  display: flex; gap: 10px; align-items: center; margin-top: auto;
}
.blog-card-content .blog-meta .blog-dot { color: #cbd5e1; }

/* ===============================================================
   TOPIC HUB PAGE (e.g. /sovereignty/)
   =============================================================== */

.topic-nav { border-bottom: 1px solid var(--rule); background: var(--bg-soft); }
.topic-nav .inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 32px;
  display: flex; align-items: center; gap: 24px; font-size: 13px;
}
.topic-nav .label {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.topic-nav .topics { display: flex; gap: 20px; flex-wrap: wrap; }
.topic-nav .topics a {
  text-decoration: none; color: var(--ink-2); font-weight: 500;
}
.topic-nav .topics a.active {
  color: var(--cat-navy); border-bottom: 1px solid var(--cat-mint); padding-bottom: 8px;
}
.topic-nav .topics a:hover { color: var(--cat-navy); }

.hub-hero {
  padding: 64px 0 48px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
}
.hub-hero .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 16px;
}
.hub-hero .meta-strip {
  display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.hub-hero .meta-strip strong { color: var(--ink); font-weight: 600; }
.hub-hero .meta-strip .updated { color: var(--mint-deep); }
.hub-hero .meta-strip .updated::before { content: "● "; }
.hub-hero h1 {
  font-size: 56px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05; max-width: 980px; margin-bottom: 24px;
}
.hub-hero .dek {
  font-size: 21px; line-height: 1.5; color: var(--ink-2);
  max-width: 820px; margin-bottom: 32px;
}
.hub-hero .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.exec {
  background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 16px;
  padding: 36px 40px; margin: 48px 0;
  position: relative; overflow: hidden;
}
.exec::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-blue-purple);
}
.exec h2 {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--mint-deep);
  margin-bottom: 18px; font-weight: 600;
}
.exec ol {
  list-style: none; counter-reset: tldr;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px;
}
.exec ol li {
  counter-increment: tldr; padding-left: 36px; position: relative;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
}
.exec ol li strong { color: var(--ink); font-weight: 600; }
.exec ol li::before {
  content: counter(tldr, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: var(--mint-deep); font-weight: 600;
}

.hub-body-grid { display: grid; grid-template-columns: 240px 1fr; gap: 64px; padding: 32px 0 96px; align-items: start; }
.hub-toc { position: sticky; top: 96px; }
.hub-toc h3 {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
  margin-bottom: 14px; font-weight: 600;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.hub-toc ol { list-style: none; counter-reset: toc; }
.hub-toc li { counter-increment: toc; padding: 6px 0; font-size: 14px; line-height: 1.4; }
.hub-toc li a {
  text-decoration: none; color: var(--ink-2);
  display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 4px 0;
}
.hub-toc li a::before {
  content: "§" counter(toc, decimal-leading-zero);
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--muted); padding-top: 1px;
}
.hub-toc li a:hover { color: var(--cat-navy); }
.hub-toc li.current a { color: var(--cat-navy); font-weight: 600; }
.hub-toc li.current a::before { color: var(--mint-deep); }

.hub-content section { padding-top: 12px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); }
.hub-content section:last-of-type { border-bottom: none; }
.hub-content h2 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 8px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
}
.hub-content h2 .num {
  font-family: "JetBrains Mono", monospace; font-size: 14px;
  color: var(--mint-deep); font-weight: 600; padding-top: 4px;
}
.hub-content .intro { font-size: 18px; color: var(--ink-2); margin-bottom: 24px; line-height: 1.55; max-width: 740px; }
.hub-content p { font-size: 16.5px; line-height: 1.65; color: var(--ink); margin-bottom: 16px; max-width: 740px; }
.hub-content p strong { color: var(--ink); font-weight: 600; }
.hub-content p a {
  color: var(--cat-navy); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.hub-content p a:hover { color: var(--cat-navy-deep); }
.hub-content ul, .hub-content ol { margin: 0 0 20px 0; padding-left: 28px; max-width: 740px; }
.hub-content li { font-size: 16.5px; line-height: 1.65; margin-bottom: 8px; color: var(--ink); }

.pull {
  margin: 32px 0; padding: 28px 32px;
  background: var(--mint-pale); border-left: 4px solid var(--cat-mint);
  border-radius: 0 10px 10px 0;
  max-width: 740px;
}
.pull p {
  font-size: 22px; line-height: 1.4; font-weight: 500;
  letter-spacing: -0.012em; color: var(--ink); margin-bottom: 8px;
}
.pull .source {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--mint-deep); font-weight: 600;
}

.related-band { padding: 64px 0; border-top: 1px solid var(--rule); background: var(--bg-soft); }
.related-band .related-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.related-band h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; }
.related-band .related-head a { color: var(--mint-deep); font-size: 14px; font-weight: 500; text-decoration: none; }
.related-band .related-head a::after { content: " →"; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.related-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  padding: 24px 26px; text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.related-card:hover { border-color: var(--cat-navy); transform: translateY(-2px); }
.related-card .meta {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  margin-bottom: 8px; display: flex; gap: 14px;
}
.related-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; }
.related-card p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

.cross-hub { padding: 64px 0; border-top: 1px solid var(--rule); }
.cross-hub .label {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
  margin-bottom: 20px; font-weight: 500;
}
.cross-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cross-hub-card {
  border: 1px solid var(--rule); border-radius: 12px; padding: 24px;
  text-decoration: none; transition: border-color 0.15s; display: block;
}
.cross-hub-card:hover { border-color: var(--cat-navy); }
.cross-hub-card .topic-name {
  font-size: 18px; font-weight: 600; color: var(--ink);
  margin-bottom: 8px; letter-spacing: -0.01em;
}
.cross-hub-card .topic-name::after { content: " →"; color: var(--mint-deep); }
.cross-hub-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* Topic-index page (/topics/) */
.topics-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 24px 0 48px;
}
.topic-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(40, 23, 69, 0.10);
  border-color: var(--cat-mint);
}
.topic-card-stripe { height: 6px; }
.topic-card-content { padding: 28px 32px 32px; }
.topic-card-label {
  font-family: "JetBrains Mono", monospace; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--mint-deep);
  font-weight: 600; margin-bottom: 12px;
}
.topic-card h2 {
  font-size: 1.4rem; color: var(--cat-navy);
  line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 12px;
}
.topic-card p {
  color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 18px;
}
.topic-card-cta {
  font-family: "JetBrains Mono", monospace; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cat-purple); font-weight: 600;
}

/* Stub page banner (for hubs that aren't written yet) */
.stub-banner {
  background: var(--bg-soft); border: 1px solid var(--rule);
  border-left: 4px solid var(--cat-orange);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px; margin: 32px 0; max-width: 740px;
}
.stub-banner strong { color: var(--cat-navy); }

/* Provenance footer used on pillar pages (and matching blog posts) */
.hub-content .source-note,
.prose .source-note {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.55;
  color: var(--muted); max-width: 740px;
}
.hub-content .source-note a,
.prose .source-note a {
  color: var(--mint-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(45, 110, 91, 0.35);
}

/* Comparison-style table inside hub content (used on curated-knowledge) */
.hub-content table {
  width: 100%; border-collapse: collapse;
  margin: 24px 0; font-size: 14.5px;
  background: #fff;
  border: 1px solid var(--rule); border-radius: 10px;
  overflow: hidden; max-width: 740px;
}
.hub-content table th,
.hub-content table td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.hub-content table thead th {
  background: var(--bg-soft);
  font-weight: 600; color: var(--ink);
  font-size: 13px;
  border-bottom: 2px solid var(--rule);
}
.hub-content table tbody tr:last-child td { border-bottom: none; }
.hub-content table td { color: var(--ink-2); }
.hub-content table strong { color: var(--ink); }

/* ───── Mobile breakpoints ───── */
@media (max-width: 1100px) {
  .hub-toc { display: none; }
  .hub-body-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hero .grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 44px; }
  .stats-grid, .steps, .features, .cross-hub-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .blog-card-grid { grid-template-columns: repeat(2, 1fr); }
  .topics-grid { grid-template-columns: 1fr; }
  .blog { grid-template-columns: 1fr; }
  .sov { grid-template-columns: 1fr; padding: 32px; }
  .sov .right { border-left: none; border-top: 1px solid rgba(255,255,255,0.2); padding-left: 0; padding-top: 24px; }
  .blog-featured-card { flex-direction: column; }
  .blog-featured-card-image { flex: none; max-width: 100%; width: 100%; aspect-ratio: 16/9; border-radius: 12px 12px 0 0; }
  footer.site .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .blog-card-grid { grid-template-columns: 1fr; }
  nav.primary ul { display: none; }
  nav.primary .inner { grid-template-columns: auto auto; }
  .container, .container-narrow { padding: 0 20px; }
}

/* ===============================================================
   PROSE LAYOUT (about, privacy, terms, cookies, roadmap, 404…)
   =============================================================== */

/* ===============================================================
   PAGE LAYOUT (canonical) — used by v2/page.njk + everything that
   extends it (prose.njk / hub pages / marketing pages / blog index).
   The .prose-hero / .band-prose / .container-narrow rules below are
   kept as visual aliases so legacy markup keeps rendering during the
   refactor; remove them once nothing emits the old class names.
   =============================================================== */

.page-hero,
.prose-hero {
  padding: 88px 0 56px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
}
.page-hero .kicker,
.prose-hero .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 16px;
}
.page-hero h1,
.prose-hero h1 {
  font-size: 56px; line-height: 1.06; letter-spacing: -0.025em; font-weight: 700;
  margin-bottom: 16px;
  /* Cap heading width so long lines don't ride to the page edge.
     Left-anchored — no auto margin. Same rule for wide + narrow. */
  max-width: 880px;
}
.page-hero h1 em,
.prose-hero h1 em {
  font-style: normal; font-weight: inherit;
  background: var(--highlight); padding: 0 12px; border-radius: 6px;
  display: inline-block; transform: rotate(-1deg); color: var(--ink);
}
.page-hero .tagline,
.prose-hero .tagline {
  font-size: 19px; line-height: 1.5; color: var(--ink-2);
  max-width: 720px;
}
.page-hero .actions { margin-top: 28px; }

/* Body band — every interior page sits inside one of these */
.page-body { padding: 72px 0 96px; border-top: none; }
.band-prose { padding: 72px 0 96px; border-top: none; }

/* Narrow body: cap content at 720px, left-anchored to the same gutter
   as the nav logo. Card grids and full-width sections inside narrow
   bodies can opt out by adding .page-full to themselves. */
.page-body--narrow > .container > *:not(.page-full) {
  max-width: 720px;
}
.page-body--wide > .container > * { /* no width constraint */ }

/* Lead paragraph (intro under hero) + last-updated footer */
.page-lead,
.prose-lead {
  font-size: 19px; line-height: 1.55;
  color: var(--ink-2);
  padding-bottom: 28px; margin-bottom: 36px;
  border-bottom: 1px solid var(--rule);
  max-width: 720px;
}
.page-updated,
.prose-updated {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  max-width: 720px;
}

.prose {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
}
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700;
  margin-top: 56px; margin-bottom: 16px; color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 19px; line-height: 1.3; font-weight: 600;
  margin-top: 32px; margin-bottom: 12px; color: var(--ink);
}
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
  color: var(--mint-deep); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(45, 110, 91, 0.35);
}
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol {
  margin-left: 1.25em; color: var(--ink-2);
}
.prose ul li, .prose ol li { margin-top: 8px; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: 8px; }
.prose hr {
  border: none; border-top: 1px solid var(--rule);
  margin: 48px 0;
}
.prose code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--bg-2);
  padding: 2px 6px; border-radius: 4px;
  color: var(--cat-navy);
}
.prose pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: var(--cat-navy); color: #e8e4ed;
  padding: 18px 20px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.5;
  overflow-x: auto;
}
.prose pre code { background: transparent; padding: 0; color: inherit; }
.prose table {
  width: 100%; border-collapse: collapse; margin: 8px 0;
  font-size: 14px;
}
.prose table th, .prose table td {
  text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.prose table th {
  font-weight: 600; color: var(--ink);
  background: var(--bg-soft);
  border-bottom: 2px solid var(--rule);
}
.prose table td { color: var(--ink-2); }
.prose table code { font-size: 12.5px; }

/* Callouts / notices used by terms & getting-started style content */
.prose .notice,
.prose .important-notice {
  background: var(--mint-pale);
  border-left: 3px solid var(--mint-deep);
  padding: 16px 20px; border-radius: 6px;
  margin: 24px 0;
}
.prose .notice strong, .prose .important-notice strong { color: var(--ink); }
.prose .note {
  background: var(--navy-pale);
  border-left: 3px solid var(--cat-navy);
  padding: 14px 18px; border-radius: 6px;
  margin: 20px 0;
  font-size: 15px;
}

/* Card grid used on roadmap-style prose pages */
.prose .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.prose .card-grid .card {
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 20px; background: #fff;
}
.prose .card-grid .card h3 {
  margin-top: 0; margin-bottom: 8px;
  font-size: 16px; font-weight: 600;
}
.prose .card-grid .card p {
  font-size: 14.5px; line-height: 1.55; margin: 0;
}
.prose .card-grid .card .icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}

/* In-page button row (used in 404) */
.prose-hero .actions { margin-top: 28px; }

/* ===============================================================
   GENERIC CTA BAND (used on prose + marketing pages)
   =============================================================== */

.band-cta {
  background: var(--cat-navy);
  color: #fff;
  padding: 72px 0;
  border-top: none;
  text-align: center;
}
.band-cta .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--cat-mint);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 16px;
}
.band-cta h2 {
  font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700;
  margin-bottom: 16px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.band-cta h2 em {
  font-style: normal; font-weight: inherit;
  background: var(--highlight); padding: 0 10px; border-radius: 6px;
  display: inline-block; transform: rotate(-0.8deg); color: var(--ink);
}
.band-cta p {
  font-size: 18px; color: rgba(255,255,255,0.75);
  max-width: 640px; margin: 0 auto 28px;
}
.band-cta .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.band-cta .btn-primary { background: var(--cat-mint); color: var(--cat-navy-deep); }
.band-cta .btn-primary:hover { background: #8ed5c2; }
.band-cta .btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.band-cta .btn-ghost:hover { border-color: #fff; }

@media (max-width: 768px) {
  .prose-hero { padding: 64px 0 40px; }
  .prose-hero h1 { font-size: 40px; }
  .band-prose { padding: 48px 0 72px; }
  .prose h2 { font-size: 24px; margin-top: 40px; }
  .band-cta h2 { font-size: 30px; }
}

/* ===============================================================
   BLOG POST PAGE (single post)
   =============================================================== */

/* Blog post header — matches the prose-hero / hub-hero pattern (light
   bg-soft band with a mint hairline below). Replaces the earlier dark
   navy band + cover-image overlay treatment, which left the post page
   with a purple sandwich (hero + CTA both navy) at odds with every
   other v2 interior page. */
.v2-post-header {
  background: var(--bg-soft);
  color: var(--ink);
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--rule);
}
/* The --hero variant on cover-image posts no longer applies a colour
   wash; the v2 hero is light by default. Kept as a no-op selector so
   templates emitting the class don't break. */
.v2-post-header--hero { }
/* Match the content area's container width (1200) so the hero's left
   edge lines up with the prose body underneath. The global .container
   is 1240, which left the hero 20px wider on each side than the body. */
.v2-post-header > .container { max-width: 1200px; position: relative; }
.v2-post-header .breadcrumb {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 16px;
}
.v2-post-header .breadcrumb a { color: var(--mint-deep); text-decoration: none; }
.v2-post-header .breadcrumb a:hover { color: var(--cat-navy); }
.v2-post-header .breadcrumb .sep { color: var(--rule); margin: 0 8px; }
.v2-post-header h1 {
  font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 700;
  margin-bottom: 16px; max-width: 880px; color: var(--ink);
}
.v2-post-header .post-desc {
  font-size: 19px; line-height: 1.5; color: var(--ink-2);
  max-width: 760px; margin-bottom: 24px;
}
.v2-post-header .post-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 14px; color: var(--muted);
}
.v2-post-header .post-meta .dot { color: var(--rule); }
.v2-post-header .post-tags {
  margin-top: 22px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
/* Tag pills inherit their existing pill-* colour theme on the light bg. */

.v2-post-content-area {
  max-width: 1200px; margin: 0 auto; padding: 56px 32px 64px;
}
.v2-post-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 56px; align-items: start;
}
.v2-post-body {
  font-size: 17px; line-height: 1.7;
  color: var(--ink);
  max-width: 760px;
}
.v2-post-body > * + * { margin-top: 20px; }
.v2-post-body h2 {
  font-size: 30px; line-height: 1.2; letter-spacing: -0.015em;
  font-weight: 700; margin-top: 56px; margin-bottom: 12px;
  scroll-margin-top: 96px;
}
.v2-post-body h3 {
  font-size: 22px; line-height: 1.3; font-weight: 600;
  margin-top: 36px; margin-bottom: 10px;
}
.v2-post-body p { color: var(--ink-2); }
.v2-post-body strong { color: var(--ink); font-weight: 600; }
.v2-post-body a {
  color: var(--mint-deep); text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(45, 110, 91, 0.35);
}
.v2-post-body a:hover { text-decoration-color: currentColor; }
.v2-post-body ul, .v2-post-body ol { margin-left: 1.4em; color: var(--ink-2); }
.v2-post-body li { margin-top: 8px; }
.v2-post-body hr { border: none; border-top: 1px solid var(--rule); margin: 40px 0; }
.v2-post-body code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9em; background: var(--bg-2);
  padding: 2px 6px; border-radius: 4px; color: var(--cat-navy);
}
.v2-post-body pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: var(--cat-navy); color: #e8e4ed;
  padding: 20px 22px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.55;
  overflow-x: auto; margin: 20px 0;
}
.v2-post-body pre code { background: transparent; padding: 0; color: inherit; }
.v2-post-body blockquote {
  margin: 28px 0; padding: 20px 28px;
  background: var(--mint-pale); border-left: 4px solid var(--cat-mint);
  border-radius: 0 10px 10px 0;
  font-size: 19px; line-height: 1.5; color: var(--ink);
  font-style: italic;
}
.v2-post-body img { border-radius: 8px; margin: 24px 0; }
.v2-post-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.v2-post-body th, .v2-post-body td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
.v2-post-body th { font-weight: 600; background: var(--bg-soft); }

.v2-post-toc {
  position: sticky; top: 96px;
  padding-left: 24px; border-left: 1px solid var(--rule);
  font-size: 13.5px;
}
.v2-post-toc-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 14px;
}
.v2-post-toc-list { list-style: none; padding: 0; margin: 0; }
.v2-post-toc-list li { margin: 0; padding: 6px 0; }
.v2-post-toc-list a {
  color: var(--ink-2); text-decoration: none;
  display: block; line-height: 1.4;
  border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px;
  transition: color 0.15s, border-color 0.15s;
}
.v2-post-toc-list a:hover { color: var(--cat-navy); }
.v2-post-toc-list a.active {
  color: var(--cat-navy); font-weight: 600;
  border-left-color: var(--cat-mint);
}

.v2-prev-next {
  max-width: 1200px;
  /* Bottom margin matters when no .v2-related section follows; without
     it the prev/next cards butt directly into the navy CTA below.
     The CTA already has 72px of internal top padding, so a small
     margin here is enough to read as separation. */
  margin: 24px auto 32px;
  padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
/* If a related-posts band immediately follows, drop the prev/next's
   bottom margin — .v2-related supplies its own 64px top margin. */
.v2-prev-next + .v2-related { margin-top: 0; }
.v2-prev-next:has(+ .v2-related) { margin-bottom: 0; }
.v2-prev-next a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 24px;
  background: var(--bg-soft); border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.v2-prev-next a:hover { border-color: var(--cat-mint); background: #fff; }
.v2-prev-next a.next { text-align: right; }
.v2-prev-next .label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.v2-prev-next .title-link { font-size: 15px; font-weight: 600; color: var(--ink); }

.v2-related {
  max-width: 1200px; margin: 64px auto 0; padding: 56px 32px 0;
  border-top: 1px solid var(--rule);
}
.v2-related .head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 28px;
}
.v2-related h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.015em;
}
.v2-related .head a {
  color: var(--mint-deep); font-size: 14px; font-weight: 500; text-decoration: none;
}
.v2-related .head a::after { content: " →"; }
.v2-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* ===============================================================
   BLOG TAG ARCHIVE PAGE
   =============================================================== */

.v2-tag-header {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  padding: 64px 0 48px;
}
.v2-tag-header .accent-bar {
  width: 56px; height: 4px; border-radius: 2px;
  background: var(--cat-mint);
  margin-bottom: 20px;
}
.v2-tag-header .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 12px;
}
.v2-tag-header h1 {
  font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700;
  margin-bottom: 12px;
}
.v2-tag-header .count {
  font-size: 16px; color: var(--ink-2);
}

@media (max-width: 1024px) {
  .v2-post-layout { grid-template-columns: 1fr; }
  .v2-post-toc { display: none; }
}

@media (max-width: 768px) {
  .v2-post-header { padding: 48px 0 40px; }
  .v2-post-header h1 { font-size: 32px; }
  .v2-post-content-area { padding: 40px 20px 48px; }
  .v2-prev-next { grid-template-columns: 1fr; padding: 0 20px; }
  .v2-related { padding: 40px 20px 0; margin: 48px auto 0; }
  .v2-related-grid { grid-template-columns: 1fr; }
  .v2-tag-header { padding: 48px 0 32px; }
  .v2-tag-header h1 { font-size: 36px; }
}

/* ===============================================================
   USE-CASE CARDS (index page) + WORKS-ON-TOP BAND
   =============================================================== */

.use-case-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.use-case-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: #fff;
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 32px 28px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.use-case-card:hover {
  border-color: var(--cat-mint);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(40, 23, 69, 0.06);
}
.use-case-card .id {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 14px;
}
.use-case-card h3 {
  font-size: 22px; line-height: 1.2; letter-spacing: -0.012em;
  font-weight: 700; margin-bottom: 8px;
}
.use-case-card > p {
  color: var(--ink-2); font-size: 15px; line-height: 1.55;
  margin-bottom: 12px;
}
.use-case-card .blurb {
  color: var(--muted); font-size: 13.5px; line-height: 1.55;
  margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.use-case-card .more {
  margin-top: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--mint-deep); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}

.band-works-on-top {
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band-works-on-top .features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 32px;
}
.band-works-on-top .feature {
  background: #fff;
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 28px 24px;
}
.band-works-on-top .feature .id {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 12px;
}
.band-works-on-top .feature h3 {
  font-size: 18px; line-height: 1.3; font-weight: 700; margin-bottom: 8px;
}
.band-works-on-top .feature p {
  color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
}

@media (max-width: 1024px) {
  .use-case-cards, .band-works-on-top .features {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .use-case-cards, .band-works-on-top .features {
    grid-template-columns: 1fr;
  }
}

/* ===============================================================
   COMPARE — matrix table, two-col table, deep-dive cards, note
   =============================================================== */

.prose .compare-matrix,
.prose .compare-side {
  width: 100%; border-collapse: collapse;
  margin: 16px 0; font-size: 14.5px;
  background: #fff;
  border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden;
}
.prose .compare-matrix th,
.prose .compare-matrix td,
.prose .compare-side th,
.prose .compare-side td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.prose .compare-matrix thead th,
.prose .compare-side thead th {
  background: var(--bg-soft);
  font-weight: 600; color: var(--ink);
  font-size: 13px;
  border-bottom: 2px solid var(--rule);
}
.prose .compare-matrix .col-us,
.prose .compare-side .col-us {
  background: rgba(115, 197, 176, 0.08);
  color: var(--ink);
  border-left: 2px solid var(--cat-mint);
  border-right: 2px solid var(--cat-mint);
  font-weight: 500;
}
.prose .compare-matrix thead .col-us,
.prose .compare-side thead .col-us {
  background: var(--mint-pale);
  border-bottom-color: var(--cat-mint);
}
.prose .compare-matrix .col-us .from,
.prose .compare-side .col-us .from {
  display: block;
  font-size: 11px; font-weight: 400; color: var(--mint-deep);
  margin-top: 4px;
}
.prose .compare-matrix .yes,
.prose .compare-side .yes {
  display: inline-block;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cat-mint); color: var(--cat-navy-deep);
  text-align: center; line-height: 22px; font-weight: 700;
}
.prose .compare-matrix .no,
.prose .compare-side .no {
  display: inline-block;
  color: var(--muted); font-weight: 600;
}
.prose .compare-matrix .price-row,
.prose .compare-side .price-row {
  background: var(--bg-soft);
}
.prose .compare-matrix .price-row td,
.prose .compare-side .price-row td { font-weight: 600; }
.prose .compare-matrix tbody tr:last-child td,
.prose .compare-side tbody tr:last-child td { border-bottom: none; }

.prose .prose-note {
  font-size: 13.5px; color: var(--muted);
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-radius: 8px;
}

.prose .compare-deep-dives {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0 32px;
}
.prose .compare-deep-dives .dive-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: #fff;
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 28px 24px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.prose .compare-deep-dives .dive-card:hover {
  border-color: var(--cat-mint);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(40, 23, 69, 0.06);
}
.prose .compare-deep-dives .id {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--mint-deep);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 14px;
}
.prose .compare-deep-dives h3 {
  font-size: 18px; line-height: 1.25; letter-spacing: -0.01em;
  margin-top: 0; margin-bottom: 8px; font-weight: 700;
}
.prose .compare-deep-dives p {
  color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
  margin: 0 0 16px;
}
.prose .compare-deep-dives .more {
  margin-top: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--mint-deep); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .prose .compare-deep-dives { grid-template-columns: 1fr; }
  .prose .compare-matrix,
  .prose .compare-side { font-size: 13.5px; }
  .prose .compare-matrix th,
  .prose .compare-matrix td,
  .prose .compare-side th,
  .prose .compare-side td { padding: 10px 10px; }
}

/* ===============================================================
   PRICING TIERS
   =============================================================== */

.pricing-tiers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; align-items: stretch;
}
.pricing-tier {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule); border-radius: 16px;
  padding: 32px 24px;
}
.pricing-tier--highlight {
  border: 2px solid var(--cat-mint);
  box-shadow: 0 18px 40px -22px rgba(115, 197, 176, 0.55);
}
.pricing-tier .ribbon {
  position: absolute; top: -12px; left: 24px;
  background: var(--cat-mint); color: var(--cat-navy-deep);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 12px; border-radius: 999px;
}
.pricing-tier .tier-name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.pricing-tier .tier-strap {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
  margin-bottom: 24px;
  min-height: 38px;
}
.pricing-tier .tier-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 24px;
}
.pricing-tier .tier-price .amount {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
}
.pricing-tier .tier-price .unit {
  font-size: 14px; color: var(--muted); font-weight: 500;
}
.pricing-tier .tier-cta {
  text-align: center; padding: 12px 18px;
  border-radius: 10px; font-weight: 500; font-size: 14px;
  text-decoration: none;
  margin-bottom: 24px;
}
.pricing-tier .tier-cta.primary {
  background: var(--ink); color: #fff;
}
.pricing-tier .tier-cta.primary:hover { background: var(--cat-navy-deep); }
.pricing-tier .tier-cta.ghost {
  border: 1px solid var(--rule); color: var(--ink);
}
.pricing-tier .tier-cta.ghost:hover { border-color: var(--ink); }
.pricing-tier .tier-features {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.pricing-tier .tier-features li {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--rule);
}
.pricing-tier .tier-features li:last-child { border-bottom: none; }
.pricing-tier .tier-features .label { color: var(--ink-2); }
.pricing-tier .tier-features .value { color: var(--ink); font-weight: 500; }
.pricing-tier .tier-features .yes {
  color: var(--mint-deep); font-weight: 700;
}
.pricing-tier .tier-features .no { color: var(--muted); }

.pricing-foot {
  margin-top: 24px;
  font-size: 13.5px; color: var(--muted);
  text-align: center;
}

.band-enterprise-cta { padding-top: 48px; padding-bottom: 48px; border-top: none; }
.enterprise-card {
  background: var(--cat-navy); color: #fff;
  border-radius: 18px; padding: 48px 56px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
}
.enterprise-card .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--cat-mint);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 12px;
}
.enterprise-card h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.2;
  margin-bottom: 12px; color: #fff;
}
.enterprise-card p {
  font-size: 15.5px; color: rgba(255,255,255,0.7); line-height: 1.55;
}
.enterprise-card .actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
}
.enterprise-card .btn-primary { background: var(--cat-mint); color: var(--cat-navy-deep); }
.enterprise-card .btn-primary:hover { background: #8ed5c2; }
.enterprise-card .btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.enterprise-card .btn-ghost:hover { border-color: #fff; }

.faq-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}
.faq-item {
  padding: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--rule); border-radius: 12px;
}
.faq-item h3 {
  font-size: 16px; font-weight: 700; margin-bottom: 10px;
}
.faq-item p {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.6;
}
.faq-item p a { color: var(--mint-deep); text-decoration: underline; }

@media (max-width: 1024px) {
  .pricing-tiers { grid-template-columns: repeat(2, 1fr); }
  .enterprise-card { grid-template-columns: 1fr; padding: 36px 32px; }
  .enterprise-card .actions { justify-content: flex-start; }
  .faq-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pricing-tiers { grid-template-columns: 1fr; }
}

/* ===============================================================
   CHANNEL MOCKUPS (rendered between prose-hero and prose body on
   /v2/slack/, /v2/teams/, /v2/cli/)
   =============================================================== */

.channel-mockup-band {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  padding: 48px 0 64px;
}
.ui-frame--centred {
  max-width: 720px;
  margin: 0 auto;
  /* The homepage hero version tilts the frame; centred channel mockups
     sit flat so the chat content reads at full clarity. */
  transform: rotate(0deg);
}

/* Teams chrome variant — purple Teams accent strip + adjusted message
   layout. .ui-frame defaults already give us the rounded card shell. */
.ui-frame--teams { box-shadow: 0 1px 0 rgba(40,23,69,0.04), 12px 12px 0 #4b3e9e; }
.ui-chrome--teams {
  background: linear-gradient(180deg, #f3f0ff 0%, #ede9ff 100%);
  border-bottom: 1px solid #d8d2f3;
}
.ui-chrome--teams .title strong { color: #4b3e9e; }
.msg--teams .av { background: linear-gradient(135deg, #c7c0ff, #d8d2f3); color: #2a205a; }
.msg--teams .av.bot { background: #4b3e9e; color: #fff; }
.ui-input--teams { background: #f5f3fb; }

/* CLI / terminal variant */
.ui-frame--cli { box-shadow: 0 1px 0 rgba(40,23,69,0.04), 12px 12px 0 var(--cat-mint); }
.ui-window--cli { background: var(--cat-navy-deep); }
.ui-chrome--cli {
  background: #2a1a4a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ui-chrome--cli .title,
.ui-chrome--cli .title strong { color: rgba(255,255,255,0.75); }
.ui-chrome--cli .dot { background: rgba(255,255,255,0.18); }
.cli-body {
  padding: 18px 20px 22px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13.5px; line-height: 1.65;
  color: #e8e4f0;
}
.cli-prompt { color: var(--cat-mint); font-weight: 600; margin-right: 6px; }
.cli-line--muted { color: rgba(232, 228, 240, 0.55); }
.cli-line--label {
  color: var(--cat-mint); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 2px;
}
.cli-line--cite { color: rgba(232, 228, 240, 0.7); }
.cli-cursor {
  display: inline-block; width: 8px; color: var(--cat-mint);
  animation: cli-blink 1.05s steps(2, start) infinite;
}
@keyframes cli-blink { to { visibility: hidden; } }

@media (max-width: 640px) {
  .channel-mockup-band { padding: 32px 0 40px; }
  .ui-frame--centred { max-width: 100%; }
}