/* ============================================================
   Marketing — Brutalist-Dark component layer
   Locked 2026-05-05 via /design-consultation. See DESIGN.md.
   Reference mockup:
     ~/.gstack/projects/Tom-R-Main-ExecuFunction/designs/
       siftable-system-20260505-1949/B2-brutalist-dark.html
   Tokens come from colors_and_type.css (.exf-marketing scope).
   All selectors nest under .exf-marketing so the React app at /app/
   is unaffected. Class prefix is .b- to avoid collision with
   marketing-shared.css.
   ============================================================ */

/* ── Container + grid backdrop ──────────────────────────── */
html,
body {
  margin: 0;
}

.exf-marketing .b-container {
  max-width: 1280px;
  margin: 0 auto;
  border-left: 1px solid var(--grid);
  border-right: 1px solid var(--grid);
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% / 12 - 1px),
      var(--grid) calc(100% / 12 - 1px),
      var(--grid) calc(100% / 12)
    );
}
.exf-marketing .b-row { padding: 0 24px; background: var(--bg-0); }

/* ── Rules / dividers ───────────────────────────────────── */
.exf-marketing .b-hr-heavy { border: 0; border-top: 1px solid rgba(255,255,255,0.72); margin: 0; }
.exf-marketing .b-hr-thin  { border: 0; border-top: 1px solid var(--rule);        margin: 0; }
.exf-marketing .b-hr-soft  { border: 0; border-top: 1px solid var(--rule-soft);   margin: 0; }

/* ── Top meta strip ─────────────────────────────────────── */
.exf-marketing .b-meta-strip {
  display: flex;
  justify-content: space-between;
  padding: 7px 24px;
  background: var(--bg-0);
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.02em;
}
.exf-marketing .b-meta-strip .b-pulse::before {
  content: '●';
  color: var(--ok);
  margin-right: 6px;
  animation: bPulse 2.4s ease-in-out infinite;
}
.exf-marketing .b-meta-strip b { color: var(--fg-2); font-weight: 500; }
@keyframes bPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.exf-marketing .b-meta-strip .b-right { display: flex; gap: 18px; }
.exf-marketing .b-meta-strip a { color: var(--fg-4); text-decoration: none; }
.exf-marketing .b-meta-strip a:hover { color: var(--fg-2); }

/* ── Nav bar (mono brutalist) ──────────────────────────── */
.exf-marketing .b-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-0);
}
.exf-marketing .b-wordmark {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--fg-1);
}
.exf-marketing .b-wordmark::before { content: '['; color: var(--fg-4); margin-right: 2px; font-weight: 400; }
.exf-marketing .b-wordmark::after  { content: ']'; color: var(--fg-4); margin-left: 2px;  font-weight: 400; }

.exf-marketing .b-nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}
.exf-marketing .b-nav-links a {
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  letter-spacing: 0.04em;
}
.exf-marketing .b-nav-links a:hover { border-bottom-color: var(--ok); color: var(--ok); }
.exf-marketing .b-nav-links .b-login {
  background: transparent;
  color: var(--fg-1);
  padding: 6px 14px;
  font-weight: 600;
  border: 1px solid var(--fg-5);
  transition: background 120ms;
}
.exf-marketing .b-nav-links .b-login:hover { background: var(--bg-2); border-color: var(--fg-3); border-bottom-color: var(--fg-3); color: var(--fg-1); }
.exf-marketing .b-nav-links .b-login::before { content: '['; }
.exf-marketing .b-nav-links .b-login::after  { content: ']'; }

/* ── Hero ───────────────────────────────────────────────── */
.exf-marketing .b-hero {
  padding: 64px 24px 56px;
  background: var(--bg-0);
  display: grid;
  grid-template-columns: minmax(420px, 0.86fr) minmax(640px, 1.14fr);
  gap: 56px;
}
.exf-marketing .b-hero > * { min-width: 0; }
@media (max-width: 1120px) {
  .exf-marketing .b-hero { grid-template-columns: 1fr; gap: 32px; }
}

.exf-marketing .b-doc-marker {
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grid-2);
  display: inline-block;
  font-weight: 500;
}
.exf-marketing .b-doc-marker b { color: var(--ok); font-weight: 600; }

.exf-marketing .b-title {
  font-family: var(--exf-font-marketing-mono);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0 0 26px;
  color: var(--fg-1);
}
.exf-marketing .b-title .b-slash  { color: var(--fg-4); font-weight: 400; }
.exf-marketing .b-title .b-accent { color: var(--ok); }

.exf-marketing .b-subhead {
  font-size: 14px;
  color: var(--fg-2);
  max-width: 480px;
  line-height: 1.6;
  margin: 0 0 26px;
}
.exf-marketing .b-pill {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--fg-3);
  margin: 0 1px;
  font-weight: 500;
  color: var(--fg-1);
}
.exf-marketing .b-pill.b-ok { color: var(--ok); border-color: var(--ok); }

.exf-marketing .b-cta-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

.exf-marketing .b-cta {
  background: var(--ok);
  color: #00120C;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 11px 18px;
  border: 1px solid var(--ok);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
}
.exf-marketing .b-cta::before { content: '▸'; color: #00120C; }
/* Pin text dark on hover — global a:hover sets color: var(--mint-strong) which
   would otherwise blend with our hover background. */
.exf-marketing .b-cta:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #00120C !important;
}
.exf-marketing .b-cta:hover::before { color: #00120C; }

.exf-marketing .b-cta-secondary {
  color: var(--fg-1);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 11px 14px;
  border: 1px solid var(--fg-3);
  background: transparent;
}
.exf-marketing .b-cta-secondary:hover { border-color: var(--fg-1); }
.exf-marketing .b-cta-secondary::before { content: '['; color: var(--fg-3); }
.exf-marketing .b-cta-secondary::after  { content: ']'; color: var(--fg-3); margin-left: 4px; }

.exf-marketing .b-kbd {
  display: inline-block;
  border: 1px solid var(--fg-3);
  padding: 0 6px;
  font-size: 10px;
  color: var(--fg-2);
  margin-left: 6px;
  font-weight: 500;
}
.exf-marketing .b-command-hint {
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--fg-3);
  background: var(--bg-1);
  color: var(--fg-1);
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-family: var(--exf-font-marketing-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  cursor: pointer;
  min-height: 46px;
  text-transform: uppercase;
}
.exf-marketing .b-command-hint:hover {
  border-color: var(--ok);
  color: var(--fg-1);
}
.exf-marketing .b-command-hint .b-kbd { margin-left: 0; color: var(--ok); }

.exf-marketing .b-tertiary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 0 0;
  color: var(--fg-4);
  font-size: 12px;
  line-height: 1.5;
}
.exf-marketing .b-tertiary-row a {
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.exf-marketing .b-tertiary-row a:hover {
  color: var(--ok);
  border-bottom-color: var(--ok);
}

/* ── Stat row ───────────────────────────────────────────── */
.exf-marketing .b-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 36px 0 0;
  border-top: 1px solid var(--fg-1);
  border-bottom: 1px solid var(--fg-1);
}
.exf-marketing .b-stat {
  padding: 16px 16px 14px;
  border-right: 1px solid var(--grid-2);
}
.exf-marketing .b-stat:last-child { border-right: 0; }
.exf-marketing .b-stat .b-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.exf-marketing .b-stat .b-num-word {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 5px;
  min-height: 27px;
}
.exf-marketing .b-stat .b-num .b-unit { font-size: 13px; font-weight: 500; color: var(--fg-3); margin-left: 2px; }
.exf-marketing .b-stat .b-lab {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-top: 3px;
}

/* ============================================================
   Universal brutalist nav — applies to every marketing page that
   uses class="b-nav". Uses marketing-shared.css :root tokens so
   it works regardless of .exf-marketing body class. Same nav
   across homepage + siblings.
   ============================================================ */
.b-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--void, #0A0A0A);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 10;
}
.b-nav.nav { /* on the homepage where both classes co-exist, no extra effect */ }

.b-wordmark,
.b-nav .nav__brand {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text, #F0F0F0);
  background: transparent !important;
  border: 0 !important;
}
.b-wordmark img,
.b-nav .nav__brand img {
  display: inline-block !important;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 0;
}
.b-wordmark span,
.b-nav .nav__brand span {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--text, #F0F0F0) !important;
  text-transform: uppercase;
}
/* Reset pseudo-elements — only the inner span carries the brackets. */
.b-wordmark::before, .b-wordmark::after,
.b-nav .nav__brand::before, .b-nav .nav__brand::after { content: none !important; }
.b-wordmark span::before,
.b-nav .nav__brand span::before { content: '['; color: var(--text-dim, #5A5A5A); margin-right: 2px; font-weight: 400; }
.b-wordmark span::after,
.b-nav .nav__brand span::after  { content: ']'; color: var(--text-dim, #5A5A5A); margin-left: 2px; font-weight: 400; }

.b-nav-links,
.b-nav .nav__links {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}
.b-nav-links a:not(.b-login):not(.nav__cta),
.b-nav .nav__links > a:not(.b-login):not(.nav__cta) {
  color: var(--text-secondary, #C7C7C7) !important;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  background: transparent !important;
  font-family: inherit;
  font-size: 12px;
}
.b-nav-links a:not(.b-login):not(.nav__cta):hover,
.b-nav .nav__links > a:not(.b-login):not(.nav__cta):hover {
  color: var(--mint, #00C896) !important;
  border-bottom-color: var(--mint, #00C896);
}

.b-login,
.b-nav .nav__cta {
  background: transparent !important;
  color: var(--text, #F0F0F0) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 120ms;
}
.b-login:hover,
.b-nav .nav__cta:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text, #F0F0F0) !important;
  border-color: rgba(255,255,255,0.36) !important;
  border-bottom-color: rgba(255,255,255,0.36) !important;
}
.b-login::before,
.b-nav .nav__cta::before { content: '['; }
.b-login::after,
.b-nav .nav__cta::after  { content: ']'; }

/* Lang picker — DEFAULT HIDDEN. Pages that don't load marketing-shared.css
   (terms, privacy, security, contact) need this baseline so the dropdown
   doesn't auto-render open and stretch the nav. The 'open' class — added
   by marketing-shared.js — flips it to visible. */
.b-nav .lang-picker { position: relative; }
.b-nav .lang-picker__dropdown {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 200;
  min-width: 200px;
  max-height: 440px;
  overflow-y: auto;
  padding: 6px;
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 0 !important;
}
.b-nav .lang-picker__dropdown--open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Lang picker, scoped to brutalist nav */
.b-nav .lang-picker__btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: var(--text-secondary, #C7C7C7) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 0 !important;
}
.b-nav .lang-picker__btn:hover { color: var(--text, #F0F0F0) !important; border-color: rgba(255,255,255,0.3) !important; }
.b-nav .lang-picker__option {
  color: var(--text-secondary, #C7C7C7) !important;
  font-size: 12px;
  background: transparent !important;
  border: 0 !important;
  text-align: left;
  font-family: inherit;
}
.b-nav .lang-picker__option:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text, #F0F0F0) !important;
}
.b-nav .lang-picker__option--active { color: var(--mint, #00C896) !important; }

/* Mobile-only toggle. Hidden on desktop (>= 760px) on every page,
   including the legal/contact pages that don't load marketing-shared.css. */
.b-nav .nav__toggle {
  display: none !important;
  background: transparent !important;
  border: 1px solid var(--text-secondary, #C7C7C7) !important;
  color: var(--text, #F0F0F0) !important;
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 0 !important;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  cursor: pointer;
}

/* ── Mobile nav (≤760px) ─────────────────────────────────
   Hide the desktop nav-links container by default. Tap the
   ☰ toggle (which adds .nav__links--open via marketing-shared.js)
   to slide it down as a vertical menu.
*/
@media (max-width: 760px) {
  .b-nav {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    align-items: center;
  }
  .b-nav .nav__toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .b-nav-links,
  .b-nav .nav__links {
    display: none !important;
    flex-basis: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
    background: var(--void, #0A0A0A);
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 12px;
    padding: 8px 0 12px !important;
  }
  .b-nav-links.nav__links--open,
  .b-nav .nav__links.nav__links--open {
    display: flex !important;
  }
  .b-nav-links a:not(.b-login):not(.nav__cta),
  .b-nav .nav__links > a:not(.b-login):not(.nav__cta) {
    padding: 12px 4px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    font-size: 13px !important;
  }
  .b-nav-links .b-login,
  .b-nav .nav__links > .nav__cta,
  .b-nav .nav__links > .b-login {
    align-self: flex-start;
    margin: 12px 0 4px !important;
  }
  .b-nav .lang-picker {
    width: 100%;
    padding: 8px 0 0 !important;
  }
  .b-nav .lang-picker__btn {
    width: 100%;
    justify-content: space-between !important;
  }
  .b-nav .lang-picker__dropdown {
    position: static !important;
    margin-top: 4px !important;
    width: 100%;
    transform: none !important;
  }
}

/* Block horizontal scroll caused by any wide element on small viewports. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .exf-marketing,
  .exf-marketing * { min-width: 0; }
  .exf-marketing .b-hero {
    padding: 56px 24px 48px;
    overflow: hidden;
  }
  .exf-marketing .b-title {
    font-size: clamp(40px, 12vw, 48px);
    letter-spacing: -0.055em;
  }
  .exf-marketing .b-subhead {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .exf-marketing .b-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .exf-marketing .b-cta,
  .exf-marketing .b-cta-secondary,
  .exf-marketing .b-command-hint {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    justify-content: flex-start;
  }
  .exf-marketing .b-cta-secondary {
    flex: 1 1 100%;
  }
  .exf-marketing .b-tertiary-row {
    flex-wrap: wrap;
  }
  .exf-marketing .b-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .exf-marketing .b-stat:nth-child(2) {
    border-right: 0;
  }
  .exf-marketing .b-stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--grid-2);
  }
  .exf-marketing .b-callout-head {
    padding: 10px 12px;
    align-items: flex-start;
  }
  .exf-marketing .b-callout-tag,
  .exf-marketing .b-callout-meta {
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
  .exf-marketing .b-workspace-proof,
  .exf-marketing .b-agent-proof {
    margin: 0 12px 12px;
  }
  .exf-marketing .b-proof-links,
  .exf-marketing .b-trace-line {
    grid-template-columns: 1fr;
  }
  .exf-marketing .b-proof-links div,
  .exf-marketing .b-proof-links div:nth-child(2n),
  .exf-marketing .b-proof-links div:nth-child(-n+2) {
    border-right: 0;
    border-top: 1px solid var(--grid-2);
  }
  .exf-marketing .b-proof-links div:first-child {
    border-top: 0;
  }
  .exf-marketing .b-callout-meta-row {
    padding: 12px;
  }
}

/* ============================================================
   Focus page (focus.html) body harmonization — drop the cream
   hero, sharp corners on cards, mono headings. Same brand voice
   as the rest of the site without rewriting the page structure.
   ============================================================ */
.adhd-hero {
  background: var(--void, #0A0A0A) !important;
  color: var(--text, #F0F0F0) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: 0 !important;
  padding: 96px 0 72px !important;
}
.adhd-hero h1,
.adhd-hero .adhd-hero__headline {
  color: var(--text, #F0F0F0) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}
.adhd-hero p,
.adhd-hero .label {
  color: var(--text-secondary, #C7C7C7) !important;
}
/* Don't paint the headline gray — it has .reveal class for animation but is white. */
.adhd-hero p.reveal { color: var(--text-secondary, #C7C7C7) !important; }
.adhd-hero .label {
  color: var(--mint, #00C896) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
}

.adhd-card {
  background: var(--surface, #111111) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
}
.adhd-card__title { font-family: 'JetBrains Mono', monospace !important; }

.adhd-hero .reveal,
.section .reveal {
  opacity: 1 !important;
  transform: none !important;
}
.adhd-hero .reveal--visible,
.section .reveal--visible {
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 760px) {
  .adhd-hero {
    padding: 72px 0 44px !important;
  }
  .adhd-hero .container,
  .section .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .adhd-hero__headline {
    font-size: clamp(38px, 12vw, 48px) !important;
    line-height: 1.08 !important;
  }
  .adhd-hero__cta {
    display: grid !important;
    gap: 10px !important;
  }
  .adhd-hero__cta a {
    width: 100% !important;
    justify-content: center !important;
  }
  .section--lg,
  .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* Generic legacy sections — pull cream-themed bits to dark */
.section--cream,
.gradient-mesh {
  background: var(--void, #0A0A0A) !important;
  color: var(--text, #F0F0F0) !important;
}
.section--cream *,
.gradient-mesh * { color: inherit; }
.section--cream [style*="color:var(--cream-text)"],
.section--cream [style*="color: var(--cream-text)"] { color: var(--text, #F0F0F0) !important; }
.section--cream [style*="color:#5a5a68"],
.section--cream [style*="color:#3a3a46"],
.section--cream [style*="color:#8a8a8a"] { color: var(--text-secondary, #C7C7C7) !important; }
.section--cream [style*="background:rgba(0,0,0,0.04)"] {
  background: var(--surface, #111111) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.section--cream [style*="border-left-color:var(--cream-text)"] {
  border-left-color: var(--mint, #00C896) !important;
}
.section--cream [style*="background:var(--cream-text)"] {
  background: var(--surface, #111111) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Sharp corners on every legacy card / button on focus + sibling pages */
.adhd-card, .adhd-grid > *,
.failure-list,
.btn, .btn--primary, .btn--secondary, .btn--outline,
.cta-section .btn { border-radius: 0 !important; }

/* Legacy .btn--primary (Open Workspace) → match homepage .b-cta exactly:
   flat green background, DARK text, sharp corners, mono. The legacy rule
   was mint-on-white which fails contrast against the new dark base. */
.btn--primary,
.btn.btn--primary,
.btn.btn--primary.btn--large,
.btn--primary.btn--large {
  background: var(--mint, #00C896) !important;
  color: #00120C !important;
  border: 1px solid var(--mint, #00C896) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.btn--primary:hover,
.btn.btn--primary:hover {
  background: var(--mint-strong, #00E5AA) !important;
  border-color: var(--mint-strong, #00E5AA) !important;
  color: #00120C !important;
  transform: none !important;
}

/* Legacy .btn--secondary / .btn--outline → outline with mono ink */
.btn--secondary,
.btn--outline {
  background: transparent !important;
  color: var(--text, #F0F0F0) !important;
  border: 1px solid var(--text-secondary, #C7C7C7) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.btn--secondary:hover,
.btn--outline:hover {
  border-color: var(--text, #F0F0F0) !important;
  color: var(--text, #F0F0F0) !important;
  transform: none !important;
}

/* Focus page used cream-themed CTAs (.btn--cream-primary, --secondary)
   matching the original cream hero. Now that the hero is dark, those
   need to match the brand mint CTA exactly. */
.btn--cream-primary,
.adhd-hero__cta .btn--cream-primary {
  background: var(--mint, #00C896) !important;
  color: #00120C !important;
  border: 1px solid var(--mint, #00C896) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 11px 22px !important;
  transform: none !important;
}
.btn--cream-primary:hover,
.adhd-hero__cta .btn--cream-primary:hover {
  background: var(--mint-strong, #00E5AA) !important;
  border-color: var(--mint-strong, #00E5AA) !important;
  color: #00120C !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn--cream-secondary,
.adhd-hero__cta .btn--cream-secondary {
  color: var(--text-secondary, #C7C7C7) !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-decoration: none !important;
  border: 0 !important;
  letter-spacing: 0.04em !important;
}
.btn--cream-secondary:hover {
  color: var(--text, #F0F0F0) !important;
  text-decoration: none !important;
}

/* ── Founder section (about.html) ──────────────────────── */
.about-founder {
  background: var(--void, #0A0A0A) !important;
  color: var(--text, #F0F0F0) !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.about-founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .about-founder__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.about-founder__photo {
  margin: 0;
  background: var(--surface, #111111);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.about-founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02);
}
.about-founder__body { font-family: 'JetBrains Mono', monospace; }
.about-founder__body .label {
  color: var(--mint, #00C896) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}
.about-founder__body h2 {
  color: var(--text, #F0F0F0) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.05 !important;
}
.about-founder__lead {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--text-secondary, #C7C7C7) !important;
  font-family: 'JetBrains Mono', monospace !important;
  max-width: 560px;
}

/* ============================================================
   Universal sibling-page harmonization (features, agents, focus,
   pricing, about). Pulls every legacy hero + display heading into
   the brutalist-dark visual language WITHOUT changing copy. Body
   classes unchanged; CSS-only override scoped to known hero/section
   classes.
   ============================================================ */

/* All hero variants — shared rules */
.features-hero,
.agents-hero,
.about-hero,
.pricing-hero,
.adhd-hero {
  background: var(--void, #0A0A0A) !important;
  color: var(--text, #F0F0F0) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 96px 0 72px !important;
  min-height: 0 !important;
}
@media (max-width: 760px) {
  .features-hero,
  .agents-hero,
  .about-hero,
  .pricing-hero,
  .adhd-hero { padding: 72px 0 44px !important; }
}

/* All hero h1 variants — high contrast on dark, mono, brutalist.
   Wide max-width so the headline lays out as 1-2 lines, not 3-4.
   Inline page-level max-width caps (~640-720px) overridden here. */
.features-hero h1,
.features-hero .features-hero__headline,
.agents-hero h1,
.agents-hero__headline,
.about-hero h1,
.about-hero__headline,
.pricing-hero h1,
.pricing-hero__headline,
.adhd-hero h1,
.adhd-hero__headline {
  color: #FFFFFF !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.0 !important;
  font-size: clamp(40px, 5.4vw, 68px) !important;
  max-width: 1100px !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
/* Ensure no inherited reveal opacity blocks the headline */
.adhd-hero__headline.reveal,
.features-hero__headline.reveal,
.agents-hero__headline.reveal,
.pricing-hero__headline.reveal,
.about-hero__headline.reveal { opacity: 1 !important; transform: none !important; }

/* About page goes hard cream → dark */
.about-hero { background: var(--void, #0A0A0A) !important; color: var(--text, #F0F0F0) !important; }
.about-hero h1, .about-hero p { color: var(--text, #F0F0F0) !important; }
.about-hero .label { color: var(--mint, #00C896) !important; }
.about-hero p, .about-hero .text-secondary { color: var(--text-secondary, #C7C7C7) !important; }

/* All hero kickers/labels */
.features-hero .label,
.agents-hero .label,
.about-hero .label,
.pricing-hero .label,
.adhd-hero .label {
  color: var(--mint, #00C896) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

/* All hero body copy */
.features-hero p,
.features-hero .text-secondary,
.agents-hero p,
.agents-hero .text-secondary,
.about-hero p,
.about-hero .text-secondary,
.pricing-hero p,
.pricing-hero .text-secondary,
.adhd-hero p,
.adhd-hero .text-secondary {
  color: var(--text-secondary, #C7C7C7) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Generic .display-md / .display-lg / .display-xl / .display-sm — used on
   feature-row titles, section H2s, etc. Force mono. */
.display-md,
.display-lg,
.display-xl,
.display-sm {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* Generic .label/.kicker styling everywhere on sibling pages */
.section .label,
.section--lg .label,
.cta-section .label {
  color: var(--mint, #00C896) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* Pills on sibling pages — flatten radius, mono */
.pill, .pill--mint, .pill--blue, .pill--amber, .pill--coral {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.04em !important;
}

/* Browser-frame mockups: convert into bordered brutalist mock cards.
   The screenshot images are replaced by the `.b-mock-canvas` content
   we inject inline below where needed. As a fallback safety net, hide
   the embedded screenshot image entirely on .exf-marketing pages and
   show whatever brutalist content sits inside .browser-frame__body. */
.browser-frame {
  background: var(--surface, #111111) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 0 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55) !important;
  overflow: hidden;
}
.browser-frame__bar {
  background: var(--surface, #111111) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 8px 12px !important;
}
.browser-frame__url {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--text-secondary, #C7C7C7) !important;
  font-size: 11px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 3px 10px !important;
}
.browser-frame__dot { border-radius: 0 !important; width: 10px; height: 10px; }
.browser-frame__dot--red    { background: var(--err, #F25C4F) !important; }
.browser-frame__dot--yellow { background: var(--pending, #E5A82A) !important; }
.browser-frame__dot--green  { background: var(--ok, #00C896) !important; }
.browser-frame__body {
  background: var(--bg-1, #0a0a0a) !important;
  padding: 0 !important;
  position: relative;
}
/* Hide screenshot images — replaced by the brutalist .b-mock-* content. */
.browser-frame__body > img { display: none !important; }
.browser-frame__body .b-mock-canvas { display: block; }

/* Generic .section / .section--lg legacy paddings — flatten cream */
.section--lg, .section {
  background: var(--void, #0A0A0A);
}

/* Editorial blocks (the "quote" panels on features/about) */
.editorial-block {
  background: var(--surface, #111111) !important;
  border-left: 3px solid var(--mint, #00C896) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--text-secondary, #C7C7C7) !important;
}

/* Definition block (about.html "Why Siftable?") */
.definition-block {
  background: var(--surface, #111111) !important;
  border-left: 3px solid var(--mint, #00C896) !important;
  border-radius: 0 !important;
  color: var(--text, #F0F0F0) !important;
}
.definition-block__word { color: var(--text, #F0F0F0) !important; }
.definition-block__pos  { color: var(--mint, #00C896) !important; font-family: 'JetBrains Mono', monospace; }
.definition-block__text { color: var(--text-secondary, #C7C7C7) !important; }

/* Pricing tier cards — flatten + mono */
.pricing-tier,
.tier-card,
.plan-card,
.credit-translator {
  background: var(--surface, #111111) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.credit-translator__title {
  color: var(--mint, #00C896) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.credit-translator__num {
  color: var(--text, #F0F0F0) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.credit-translator__lbl {
  color: var(--text-secondary, #C7C7C7) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* CTA section — sharp + mono headline */
.cta-section {
  background: var(--void, #0A0A0A) !important;
  border-top: 1.5px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.10) !important;
}
.cta-section__title,
.cta-section h2 {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--text, #F0F0F0) !important;
}
.cta-section__subtitle {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--text-secondary, #C7C7C7) !important;
}

/* Feature rows — surface bg flat dark */
.feature-row__visual,
.feature-row__content { background: transparent !important; }
.feature-row__content h2 { color: var(--text, #F0F0F0) !important; }
.feature-row__content .text-secondary { color: var(--text-secondary, #C7C7C7) !important; }

/* Agents page state-primitive pills/chips */
.agents-hero__headline em,
.agents-hero em { font-style: normal !important; color: var(--mint, #00C896) !important; }

/* Override any hardcoded inline colors on sibling pages we know about */
[style*="color:#5a5a68"],
[style*="color: #5a5a68"] { color: var(--text-secondary, #C7C7C7) !important; }
[style*="color:#3a3a46"],
[style*="color: #3a3a46"] { color: var(--text-secondary, #C7C7C7) !important; }
[style*="color:#8a8a8a"],
[style*="color: #8a8a8a"] { color: var(--text-secondary, #C7C7C7) !important; }
[style*="background:var(--cream)"],
[style*="background: var(--cream)"] {
  background: var(--surface, #111111) !important;
  color: var(--text, #F0F0F0) !important;
}

/* Brutalist UI mock — used inline inside .browser-frame__body to replace
   the dropped screenshot. Same visual language as the homepage entity grid. */
.b-mock-canvas {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text, #F0F0F0);
  background: var(--bg-1, #0a0a0a);
  padding: 20px 22px;
  font-size: 12.5px;
  line-height: 1.55;
  display: block;
}
.b-mock-canvas .b-mock-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.b-mock-canvas .b-mock-row:last-child { border-bottom: 0; }
.b-mock-canvas .b-mock-tag {
  color: var(--mint, #00C896);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  flex: 0 0 56px;
}
.b-mock-canvas .b-mock-name { color: var(--text, #F0F0F0); flex: 1; }
.b-mock-canvas .b-mock-meta { color: var(--text-secondary, #C7C7C7); font-size: 11px; }
.b-mock-canvas .b-mock-status {
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-weight: 600;
}
.b-mock-canvas .b-mock-status.ok  { color: var(--ok, #00C896); }
.b-mock-canvas .b-mock-status.pen { color: var(--pending, #E5A82A); }
.b-mock-canvas .b-mock-status.err { color: var(--err, #F25C4F); }
.b-mock-canvas .b-mock-marker {
  font-size: 10.5px;
  color: var(--text-dim, #5A5A5A);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.b-mock-canvas .b-mock-h {
  color: var(--text, #F0F0F0);
  font-weight: 700;
  font-size: 14px;
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}
.b-mock-canvas pre {
  background: transparent;
  color: var(--text-secondary, #C7C7C7);
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.b-mock-canvas .b-mock-prompt { color: var(--ok, #00C896); }
.b-mock-canvas .b-mock-cmd    { color: var(--text, #F0F0F0); }
.b-mock-canvas .b-mock-arrow  { color: var(--text-dim, #5A5A5A); }

/* Features page examples should read as product cards, not terminal dumps.
   Keep the injected mock text available in markup for future reuse, but let
   the real screenshots carry the visual proof on this page. */
html[data-page-id="features"] .section {
  padding-block: clamp(72px, 8vw, 112px);
}

html[data-page-id="features"] .feature-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 64px);
}

html[data-page-id="features"] .feature-row__visual {
  min-width: 0;
}

html[data-page-id="features"] .browser-frame {
  width: min(100%, 620px);
  margin-inline: auto;
  border-radius: 8px !important;
  background: #090a10 !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.42) !important;
  cursor: zoom-in;
}

html[data-page-id="features"] .browser-frame:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 28px 86px rgba(0,0,0,0.48) !important;
}

html[data-page-id="features"] .browser-frame__bar {
  padding: 10px 14px !important;
  gap: 8px;
  background: #12131b !important;
}

html[data-page-id="features"] .browser-frame__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px !important;
  flex: 0 0 auto;
}

html[data-page-id="features"] .browser-frame__url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px !important;
  color: rgba(232,228,223,0.46) !important;
}

html[data-page-id="features"] .browser-frame__body {
  aspect-ratio: 16 / 10;
  background: #05060a !important;
}

html[data-page-id="features"] .browser-frame__body .b-mock-canvas {
  display: none !important;
}

html[data-page-id="features"] .browser-frame__body > img {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 768px) {
  html[data-page-id="features"] .section {
    padding-block: 56px;
  }

  html[data-page-id="features"] .feature-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  html[data-page-id="features"] .feature-row__visual {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  html[data-page-id="features"] .feature-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  html[data-page-id="features"] .feature-row--reverse {
    direction: ltr;
  }

  html[data-page-id="features"] .feature-row__content {
    max-width: 700px;
  }
}

/* Mobile containment for legacy docs/legal tables and command examples. */
@media (max-width: 760px) {
  .code-block,
  .docs-code,
  .code-block__body,
  .docs-code pre {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }
  .code-block code,
  .docs-code code,
  .hl-string {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }
  .tool-table,
  .data-table,
  .state-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border-collapse: collapse;
  }
  .tool-table thead,
  .data-table thead,
  .state-table thead {
    display: none !important;
  }
  .tool-table tbody,
  .tool-table tr,
  .tool-table td,
  .data-table tbody,
  .data-table tr,
  .data-table td,
  .state-table tbody,
  .state-table tr,
  .state-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .tool-table tr,
  .data-table tr,
  .state-table tr {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 10px 0;
  }
  .tool-table td,
  .data-table td,
  .state-table td {
    padding: 4px 0 !important;
    border-bottom: 0 !important;
    overflow-wrap: anywhere;
  }
}

/* ── Static Command-K workflow-fit prototype ───────────── */
.exf-marketing .b-command-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.exf-marketing .b-command-modal.is-open { display: flex; }
.exf-marketing .b-command-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.74);
}
.exf-marketing .b-command-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--fg-2);
  background: var(--bg-0);
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  color: var(--fg-1);
  font-family: var(--exf-font-marketing-mono);
}
.exf-marketing .b-command-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--grid-2);
  background: var(--bg-1);
}
.exf-marketing .b-command-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ok);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.exf-marketing .b-command-top h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.exf-marketing .b-command-top p {
  margin: 10px 0 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
}
.exf-marketing .b-command-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--fg-4);
  background: transparent;
  color: var(--fg-1);
  font-size: 22px;
  cursor: pointer;
}
.exf-marketing .b-command-input {
  display: grid;
  gap: 8px;
  padding: 22px 24px 0;
  color: var(--fg-3);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.exf-marketing .b-command-input input {
  width: 100%;
  border: 1px solid var(--grid-2);
  background: var(--bg-1);
  color: var(--fg-1);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  padding: 13px 14px;
}
.exf-marketing .b-command-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 24px 8px;
}
.exf-marketing .b-command-chips button {
  border: 1px solid var(--grid-2);
  background: var(--bg-1);
  color: var(--fg-2);
  font: inherit;
  font-size: 11px;
  padding: 8px 10px;
  cursor: pointer;
}
.exf-marketing .b-command-chips button:hover,
.exf-marketing .b-command-chips button.is-selected {
  border-color: var(--ok);
  color: var(--ok);
}
.exf-marketing .b-command-result {
  margin: 14px 24px 0;
  border: 1px solid var(--grid-2);
}
.exf-marketing .b-command-result-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--grid-2);
  color: var(--fg-3);
  font-size: 11px;
}
.exf-marketing .b-command-result-head b {
  color: var(--fg-1);
  font-weight: 700;
}
.exf-marketing .b-fit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.exf-marketing .b-fit-grid div {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--grid-2);
}
.exf-marketing .b-fit-grid div:last-child { border-right: 0; }
.exf-marketing .b-fit-grid span {
  color: var(--ok);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.exf-marketing .b-fit-grid b {
  display: block;
  margin: 10px 0 8px;
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.2;
}
.exf-marketing .b-fit-grid p {
  margin: 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.5;
}
.exf-marketing .b-fit-summary,
.exf-marketing .b-fit-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.exf-marketing .b-fit-summary > div,
.exf-marketing .b-fit-columns > section,
.exf-marketing .b-fit-plan,
.exf-marketing .b-fit-handoff {
  min-width: 0;
  padding: 16px;
  border-bottom: 1px solid var(--grid-2);
}
.exf-marketing .b-fit-summary > div:first-child,
.exf-marketing .b-fit-columns > section:first-child {
  border-right: 1px solid var(--grid-2);
}
.exf-marketing .b-fit-summary span,
.exf-marketing .b-fit-plan span,
.exf-marketing .b-fit-handoff span {
  color: var(--ok);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.exf-marketing .b-fit-summary b,
.exf-marketing .b-fit-plan b {
  display: block;
  margin: 10px 0 8px;
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.exf-marketing .b-fit-summary p,
.exf-marketing .b-fit-handoff p,
.exf-marketing .b-fit-empty {
  margin: 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.exf-marketing .b-fit-columns h3 {
  margin: 0 0 10px;
  color: var(--fg-2);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.exf-marketing .b-fit-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exf-marketing .b-fit-list li {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.exf-marketing .b-fit-list li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.exf-marketing .b-fit-list b {
  color: var(--fg-1);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.exf-marketing .b-fit-list small {
  flex: 0 0 auto;
  color: var(--ok);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exf-marketing .b-fit-list p {
  margin: 0;
  color: var(--fg-4);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.exf-marketing .b-fit-plan {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
}
.exf-marketing .b-fit-plan ol {
  margin: 0;
  padding-left: 18px;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.55;
}
.exf-marketing .b-fit-plan li {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.exf-marketing .b-fit-handoff {
  border-bottom: 0;
  background: rgba(0, 200, 150, 0.045);
}
.exf-marketing .b-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--grid-2);
}
.exf-marketing .b-command-actions button.b-cta {
  border-radius: 0;
  font-family: var(--exf-font-marketing-mono);
  cursor: pointer;
}
.exf-marketing .b-command-actions .is-primary-action {
  outline: 1px solid var(--ok);
  outline-offset: 2px;
}
.exf-marketing .b-command-actions [hidden] {
  display: none !important;
}
.exf-marketing .b-command-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.exf-marketing .b-command-followups button {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--grid-2);
  border-radius: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--exf-font-marketing-mono);
  font-size: 11px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.exf-marketing .b-command-followups button:hover,
.exf-marketing .b-command-followups button:focus-visible {
  border-color: var(--ok);
  color: var(--ok);
}
.exf-marketing .b-command-note {
  margin: 0;
  padding: 14px 24px 22px;
  color: var(--fg-4);
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .exf-marketing .b-command-modal {
    padding: 12px;
    align-items: flex-start;
  }
  .exf-marketing .b-command-panel {
    max-height: calc(100vh - 24px);
  }
  .exf-marketing .b-fit-grid {
    grid-template-columns: 1fr;
  }
  .exf-marketing .b-fit-summary,
  .exf-marketing .b-fit-columns,
  .exf-marketing .b-fit-plan {
    grid-template-columns: 1fr;
  }
  .exf-marketing .b-fit-grid div {
    border-right: 0;
    border-bottom: 1px solid var(--grid-2);
  }
  .exf-marketing .b-fit-grid div:last-child { border-bottom: 0; }
  .exf-marketing .b-fit-summary > div:first-child,
  .exf-marketing .b-fit-columns > section:first-child {
    border-right: 0;
  }
  .exf-marketing .b-fit-list li > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .exf-marketing .b-command-actions {
    display: grid;
  }
}

/* ── Demo booking modal ─────────────────────────────────── */
.exf-marketing.demo-booking-modal-lock {
  overflow: hidden;
}

.exf-marketing .demo-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--fg-1);
  font-family: var(--exf-font-marketing-mono);
}

.exf-marketing .demo-booking-modal--open {
  display: flex;
}

.exf-marketing .demo-booking-modal__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(10,10,10,0.9), rgba(10,10,10,0.9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14vw);
}

.exf-marketing .demo-booking-modal__panel {
  position: relative;
  width: min(960px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--fg-2);
  background: var(--bg-0);
  box-shadow: 0 30px 90px rgba(0,0,0,0.65);
  outline: none;
}

.exf-marketing .demo-booking__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--grid-2);
  background: var(--bg-1);
}

.exf-marketing .demo-booking__eyebrow,
.exf-marketing .demo-booking__stamp {
  margin: 0 0 8px;
  color: var(--ok);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.exf-marketing .demo-booking__header h2 {
  margin: 0;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.exf-marketing .demo-booking__icon-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--fg-4);
  border-radius: 0;
  background: transparent;
  color: var(--fg-1);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.exf-marketing .demo-booking__icon-button:hover {
  border-color: var(--ok);
  color: var(--ok);
}

.exf-marketing .demo-booking__alert {
  margin: 24px 24px 0;
  padding: 14px;
  border: 1px solid #7a3d3d;
  background: rgba(122, 61, 61, 0.16);
  color: #f0b7b0;
  font-size: 12px;
  line-height: 1.5;
}

.exf-marketing .demo-booking__intro {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px 24px 14px;
}

.exf-marketing .demo-booking__intro p {
  margin: 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.55;
}

.exf-marketing .demo-booking__context {
  display: grid;
  gap: 8px;
  margin: 0 24px 18px;
  padding: 14px;
  border: 1px solid rgba(0, 200, 150, 0.28);
  background: rgba(0, 200, 150, 0.055);
}

.exf-marketing .demo-booking__context span {
  color: var(--ok);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.exf-marketing .demo-booking__context strong {
  color: var(--fg-1);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.exf-marketing .demo-booking__context p {
  margin: 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.exf-marketing .demo-booking__context dl {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
}
.exf-marketing .demo-booking__context dl > div {
  display: grid;
  grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr);
  gap: 10px;
}
.exf-marketing .demo-booking__context dt,
.exf-marketing .demo-booking__context dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}
.exf-marketing .demo-booking__context dt {
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.exf-marketing .demo-booking__context dd {
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

.exf-marketing .demo-booking__text-button {
  border: 0;
  background: transparent;
  color: var(--ok);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.exf-marketing .demo-booking__text-button:hover {
  color: var(--fg-1);
}

.exf-marketing .demo-booking__slot-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  margin: 0 24px 24px;
  border: 1px solid var(--grid-2);
}

.exf-marketing .demo-booking__dates,
.exf-marketing .demo-booking__slots {
  min-width: 0;
}

.exf-marketing .demo-booking__dates {
  border-right: 1px solid var(--grid-2);
  background: var(--bg-1);
}

.exf-marketing .demo-booking__date,
.exf-marketing .demo-booking__slot {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--grid-2);
  border-radius: 0;
  background: transparent;
  color: var(--fg-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.exf-marketing .demo-booking__date {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
}

.exf-marketing .demo-booking__date span,
.exf-marketing .demo-booking__slots-title {
  color: var(--fg-3);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.exf-marketing .demo-booking__date strong {
  font-size: 14px;
}

.exf-marketing .demo-booking__date--active,
.exf-marketing .demo-booking__date:hover,
.exf-marketing .demo-booking__slot:hover {
  background: rgba(0, 200, 150, 0.08);
  color: var(--ok);
}

.exf-marketing .demo-booking__slots-title {
  padding: 14px 16px;
  border-bottom: 1px solid var(--grid-2);
}

.exf-marketing .demo-booking__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
}

.exf-marketing .demo-booking__slot span {
  font-size: 18px;
  font-weight: 700;
}

.exf-marketing .demo-booking__slot small {
  color: var(--fg-3);
  font-size: 11px;
}

.exf-marketing .demo-booking__loading,
.exf-marketing .demo-booking__empty {
  margin: 24px;
  padding: 36px 18px;
  border: 1px dashed var(--grid-2);
  color: var(--fg-3);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}

.exf-marketing .demo-booking__back {
  margin: 22px 24px 0;
}

.exf-marketing .demo-booking__selected {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 24px 0;
  padding: 14px;
  border: 1px solid var(--grid-2);
  background: var(--bg-1);
}

.exf-marketing .demo-booking__selected span {
  color: var(--fg-1);
  font-weight: 700;
}

.exf-marketing .demo-booking__selected strong {
  color: var(--ok);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.exf-marketing .demo-booking__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 24px 24px;
}

.exf-marketing .demo-booking__form label {
  display: grid;
  gap: 8px;
  color: var(--fg-3);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.exf-marketing .demo-booking__form input,
.exf-marketing .demo-booking__form select,
.exf-marketing .demo-booking__form textarea {
  width: 100%;
  border: 1px solid var(--grid-2);
  border-radius: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  padding: 13px 14px;
  box-sizing: border-box;
}

.exf-marketing .demo-booking__form input:focus,
.exf-marketing .demo-booking__form select:focus,
.exf-marketing .demo-booking__form textarea:focus {
  border-color: var(--ok);
  outline: none;
}

.exf-marketing .demo-booking__form-wide,
.exf-marketing .demo-booking__submit {
  grid-column: 1 / -1;
}

.exf-marketing .demo-booking__hp {
  position: absolute;
  left: -9999px;
}

.exf-marketing .demo-booking__submit,
.exf-marketing .demo-booking__actions .btn {
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: #00120C;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 16px;
  cursor: pointer;
}

.exf-marketing .demo-booking__submit:hover,
.exf-marketing .demo-booking__actions .btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.exf-marketing .demo-booking__confirmed {
  padding: 24px;
}

.exf-marketing .demo-booking__confirmed h3 {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.exf-marketing .demo-booking__confirmed p {
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.6;
}

.exf-marketing .demo-booking__meta,
.exf-marketing .demo-booking__footnote {
  color: var(--fg-4) !important;
}

.exf-marketing .demo-booking__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.exf-marketing .demo-booking__actions .btn--secondary {
  background: transparent;
  border-color: var(--fg-3);
  color: var(--fg-1);
}

@media (max-width: 760px) {
  .exf-marketing .demo-booking-modal {
    align-items: flex-start;
    padding: 12px;
  }

  .exf-marketing .demo-booking-modal__panel {
    max-height: calc(100vh - 24px);
  }

  .exf-marketing .demo-booking__header,
  .exf-marketing .demo-booking__intro,
  .exf-marketing .demo-booking__selected {
    display: grid;
  }

  .exf-marketing .demo-booking__slot-layout,
  .exf-marketing .demo-booking__form {
    grid-template-columns: 1fr;
  }

  .exf-marketing .demo-booking__dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--grid-2);
  }

  .exf-marketing .demo-booking__date {
    border-right: 1px solid var(--grid-2);
  }
}

/* ── Hero callout — bounded For-you / For-agents pair ──── */
.exf-marketing .b-hero-callout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-self: start;
  font-family: var(--exf-font-marketing-mono);
  min-width: 0;
  width: 100%;
}
.exf-marketing .b-callout-card {
  background: var(--bg-1);
  border: 1px solid var(--fg-5);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.exf-marketing .b-callout-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--grid-2);
  background: var(--bg-1);
  gap: 12px;
  min-width: 0;
}
.exf-marketing .b-callout-tag {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.exf-marketing .b-callout-tag::before { content: '— '; color: var(--fg-4); }
.exf-marketing .b-callout-meta {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.exf-marketing .b-callout-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  padding: 18px 18px 6px;
  line-height: 1.15;
}
.exf-marketing .b-callout-body {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.6;
  padding: 0 18px 14px;
  margin: 0;
  flex: 1;
}
.exf-marketing .b-callout-meta-row {
  border-top: 1px solid var(--grid-2);
  padding: 14px 18px 16px;
  margin-top: auto;
  font-size: 10.5px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Shared-object proof panels */
.exf-marketing .b-workspace-proof,
.exf-marketing .b-agent-proof {
  margin: 0 18px 14px;
  min-width: 0;
}
.exf-marketing .b-proof-primary {
  border: 1px solid var(--grid-2);
  padding: 13px 14px;
  background: var(--bg-0);
  min-width: 0;
}
.exf-marketing .b-proof-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--ok);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.exf-marketing .b-proof-primary strong {
  display: block;
  color: var(--fg-1);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.exf-marketing .b-proof-primary code {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 3px 6px;
  border: 1px solid var(--grid-2);
  color: var(--ok);
  background: var(--bg-1);
  font-family: var(--exf-font-marketing-mono);
  font-size: 10.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.exf-marketing .b-proof-primary p {
  margin: 8px 0 0;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.5;
}
.exf-marketing .b-proof-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--grid-2);
  border-top: 0;
}
.exf-marketing .b-proof-links div {
  min-width: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--grid-2);
  border-right: 1px solid var(--grid-2);
  background: var(--bg-1);
}
.exf-marketing .b-proof-links div:nth-child(-n+2) { border-top: 0; }
.exf-marketing .b-proof-links div:nth-child(2n) { border-right: 0; }
.exf-marketing .b-proof-links span {
  display: inline-block;
  min-width: 42px;
  color: var(--ok);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.exf-marketing .b-proof-links b {
  display: block;
  margin-top: 4px;
  color: var(--fg-1);
  font-size: 12.5px;
  line-height: 1.25;
}
.exf-marketing .b-proof-links em {
  display: block;
  margin-top: 4px;
  color: var(--fg-4);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.3;
}
.exf-marketing .b-agent-proof {
  display: grid;
  border: 1px solid var(--grid-2);
  background: var(--bg-0);
  min-width: 0;
}
.exf-marketing .b-trace-line {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--grid-2);
  min-width: 0;
}
.exf-marketing .b-trace-line:last-child { border-bottom: 0; }
.exf-marketing .b-trace-line span {
  min-width: 0;
  color: var(--ok);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.exf-marketing .b-trace-line em {
  color: var(--fg-3);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ── Problem-card bullet list (restored from item1-5 keys) ── */
.exf-marketing .b-problem-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--fg-2);
}
.exf-marketing .b-paired-cell.b-cream .b-problem-list { border-top-color: var(--exf-cream-text); }
.exf-marketing .b-problem-list li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--grid-2);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
}
.exf-marketing .b-paired-cell.b-cream .b-problem-list li {
  border-bottom-color: rgba(0,0,0,0.12);
  color: #4A4639;
}
.exf-marketing .b-problem-list li::before {
  content: '—';
  color: var(--fg-4);
  flex-shrink: 0;
}
.exf-marketing .b-paired-cell.b-cream .b-problem-list li::before { color: #8A826E; }

/* ── Solution layers — stacked bounded cards ───────────── */
.exf-marketing .b-layers {
  padding: 0 24px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--bg-0);
  font-family: var(--exf-font-marketing-mono);
}
.exf-marketing .b-layer-card {
  background: var(--bg-1);
  border: 1px solid var(--fg-5);
  padding: 18px 22px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.exf-marketing .b-layer-card.b-layer-emphasis {
  border-color: var(--ok);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
.exf-marketing .b-layer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--grid-2);
}
.exf-marketing .b-layer-tag {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.exf-marketing .b-layer-tag::before { content: '— '; color: var(--fg-4); }
.exf-marketing .b-layer-card.b-layer-emphasis .b-layer-tag { color: var(--ok); }
.exf-marketing .b-layer-meta {
  font-size: 10.5px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
}
.exf-marketing .b-layer-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.exf-marketing .b-layer-sub {
  font-size: 12.5px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.exf-marketing .b-layer-flow {
  text-align: center;
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.18em;
  padding: 4px 0;
}
.exf-marketing .b-layer-flow span { padding-left: 8px; text-transform: uppercase; }

/* ── Surfaces grid — auto-fit so when execuTerm is feature-flagged
   off the visible cards expand to fill, no stranded right column. */
.exf-marketing .b-surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  border-left: 1px solid var(--fg-1);
  border-right: 1px solid var(--fg-1);
  margin: 0 24px;
  background: var(--bg-0);
  padding: 28px 0;  /* breathing room between heavy edges and cards */
}
@media (max-width: 980px) {
  .exf-marketing .b-surfaces { grid-template-columns: 1fr; }
}
.exf-marketing .b-surface-card {
  padding: 22px;
  border-right: 1px solid var(--fg-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--exf-font-marketing-mono);
  background: var(--bg-0);
}
/* The server strips disabled-feature cards out of the HTML entirely, so
   :last-child correctly identifies the rightmost rendered card. */
.exf-marketing .b-surface-card:last-child { border-right: 0; }
.exf-marketing .b-surface-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grid-2);
}
.exf-marketing .b-surface-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 600;
}
.exf-marketing .b-surface-num {
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
}
.exf-marketing .b-surface-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1.1;
  margin-top: 4px;
}
.exf-marketing .b-surface-sub {
  font-size: 12.5px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.exf-marketing .b-surface-body {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 4px 0;
  flex: 1;
}
.exf-marketing .b-surface-meta {
  border-top: 1px solid var(--grid-2);
  padding-top: 10px;
  font-size: 10.5px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
}

/* ── Brutalist CLI session — kept for potential reuse but no
   longer linked from index.html (replaced with honest restored copy).
   Remove in a future cleanup PR if no consumer materializes. */
.exf-marketing .b-cli {
  background: var(--bg-1);
  border: 1px solid var(--fg-5);
  display: flex;
  flex-direction: column;
  font-family: var(--exf-font-marketing-mono);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden;
  min-height: 480px;
}
.exf-marketing .b-cli-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--grid-2);
  font-size: 11px;
  color: var(--fg-3);
  background: var(--bg-1);
}
.exf-marketing .b-cli-header b { color: var(--fg-1); font-weight: 600; }
.exf-marketing .b-cli-live { color: var(--ok); font-size: 11px; }
.exf-marketing .b-cli-live::before { content: ''; }

.exf-marketing .b-cli-body {
  flex: 1;
  margin: 0;
  padding: 18px 18px 14px;
  font-family: var(--exf-font-marketing-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2);
  white-space: pre;
  overflow-x: auto;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.exf-marketing .b-cli-prompt { color: var(--ok); font-weight: 700; }
.exf-marketing .b-cli-cmd    { color: var(--fg-1); font-weight: 500; }
.exf-marketing .b-cli-arrow  { color: var(--fg-4); }
.exf-marketing .b-cli-meta   { color: var(--fg-4); }
.exf-marketing .b-cli-ok     { color: var(--ok); font-weight: 700; }
.exf-marketing .b-cli-pen    { color: var(--pending); font-weight: 700; }
.exf-marketing .b-cli-err    { color: var(--err); font-weight: 700; }
.exf-marketing .b-cli-ty     { font-weight: 700; }
.exf-marketing .b-cli-evt    { color: var(--fg-1); }
.exf-marketing .b-cli-tsk    { color: var(--info); }
.exf-marketing .b-cli-nte    { color: var(--exf-cream); }
.exf-marketing .b-cli-cnt    { color: var(--err); }
.exf-marketing .b-cli-dem    { color: var(--ok); }
.exf-marketing .b-cli-del    { color: var(--pending); }
.exf-marketing .b-cli-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--ok);
  vertical-align: -2px;
  animation: bCliCursor 1.1s steps(1) infinite;
}
@keyframes bCliCursor {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.exf-marketing .b-cli-footer {
  border-top: 1px solid var(--grid-2);
  padding: 6px 14px;
  font-size: 10.5px;
  color: var(--fg-4);
  display: flex;
  justify-content: space-between;
  background: var(--bg-1);
}

/* ── (legacy) Embedded product UI mock — class set unused on homepage now,
   kept for potential reuse. Safe to delete in a follow-up if no consumer. */
.exf-marketing .b-product {
  background: var(--bg-1);
  border: 1px solid var(--fg-5);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden;
}
.exf-marketing .b-product .b-top-bar {
  display: flex;
  align-items: center;
  height: 38px;
  border-bottom: 1px solid var(--grid-2);
  padding: 0 12px;
  gap: 12px;
  font-size: 11px;
  color: var(--fg-3);
  background: var(--bg-1);
}
.exf-marketing .b-product .b-top-bar .b-crumb b { color: var(--fg-2); font-weight: 500; }
.exf-marketing .b-product .b-top-bar .b-crumb .b-sep { color: var(--fg-5); margin: 0 6px; }
.exf-marketing .b-product .b-top-bar .b-palette {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fg-5);
  padding: 3px 8px;
  color: var(--fg-3);
  font-size: 11px;
}
.exf-marketing .b-product .b-top-bar .b-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ok);
  font-size: 11px;
}
.exf-marketing .b-product .b-top-bar .b-live::before { content: '●'; animation: bPulse 2.4s ease-in-out infinite; }

.exf-marketing .b-product .b-product-body {
  display: grid;
  grid-template-columns: 150px 1fr 220px;
  min-height: 480px;
}
@media (max-width: 980px) {
  .exf-marketing .b-product .b-product-body { grid-template-columns: 1fr; min-height: auto; }
  .exf-marketing .b-product .b-side, .exf-marketing .b-product .b-detail { display: none; }
}

.exf-marketing .b-side {
  border-right: 1px solid var(--grid-2);
  padding: 12px 0;
  font-size: 11.5px;
}
.exf-marketing .b-side .b-group {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 8px 14px 4px;
  margin-top: 4px;
}
.exf-marketing .b-side .b-group:first-child { margin-top: 0; }
.exf-marketing .b-side a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 14px;
  color: var(--fg-2);
  text-decoration: none;
}
.exf-marketing .b-side a:hover { background: var(--bg-2); color: var(--fg-1); }
.exf-marketing .b-side a.b-active { background: var(--bg-sel); color: var(--ok); }
.exf-marketing .b-side a .b-count { color: var(--fg-4); font-size: 10.5px; }
.exf-marketing .b-side a.b-active .b-count { color: var(--ok); }
.exf-marketing .b-side a::before { content: '·'; color: var(--fg-5); width: 10px; display: inline-block; }
.exf-marketing .b-side a.b-active::before { content: '▸'; color: var(--ok); }
.exf-marketing .b-side a .b-dot { width: 5px; height: 5px; background: currentColor; display: inline-block; margin-right: 4px; }

.exf-marketing .b-main {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
}
.exf-marketing .b-main-tabs {
  display: flex;
  border-bottom: 1px solid var(--grid-2);
  height: 32px;
  align-items: center;
  padding: 0 12px;
  gap: 0;
  font-size: 11px;
}
.exf-marketing .b-main-tabs .b-tab {
  padding: 0 14px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  color: var(--fg-3);
  border-right: 1px solid var(--grid-2);
  cursor: default;
  letter-spacing: 0.06em;
}
.exf-marketing .b-main-tabs .b-tab:first-child { border-left: 1px solid var(--grid-2); }
.exf-marketing .b-main-tabs .b-tab.b-active { color: var(--fg-1); background: var(--bg-2); border-bottom: 1px solid var(--bg-2); position: relative; top: 1px; }
.exf-marketing .b-main-tabs .b-tab .b-ct { color: var(--fg-4); margin-left: 6px; }
.exf-marketing .b-main-tabs .b-tools {
  margin-left: auto;
  display: flex;
  gap: 12px;
  color: var(--fg-3);
  font-size: 10.5px;
}
.exf-marketing .b-main-tabs .b-tools .b-filter { border: 1px solid var(--grid-2); padding: 1px 6px; }
.exf-marketing .b-main-tabs .b-tools .b-filter b { color: var(--fg-2); font-weight: 500; }

.exf-marketing .b-entity-list { font-size: 11.5px; }
.exf-marketing .b-entity-list .b-eheader {
  display: grid;
  grid-template-columns: 80px 60px 1fr 90px 80px;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--grid-2);
  color: var(--fg-4);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--bg-1);
}
.exf-marketing .b-entity-list .b-erow {
  display: grid;
  grid-template-columns: 80px 60px 1fr 90px 80px;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px dashed var(--grid);
  color: var(--fg-2);
  align-items: baseline;
}
.exf-marketing .b-entity-list .b-erow:hover { background: var(--bg-2); }
.exf-marketing .b-entity-list .b-erow.b-sel {
  background: var(--bg-sel);
  border-left: 2px solid var(--ok);
  padding-left: 12px;
}
.exf-marketing .b-entity-list .b-erow.b-sel .b-name { color: var(--ok); }
.exf-marketing .b-entity-list .b-id { color: var(--fg-4); }
.exf-marketing .b-entity-list .b-ty { color: var(--fg-3); font-size: 10px; letter-spacing: 0.1em; }
.exf-marketing .b-entity-list .b-ty.b-task    { color: var(--info); }
.exf-marketing .b-entity-list .b-ty.b-event   { color: var(--fg-1); }
.exf-marketing .b-entity-list .b-ty.b-note    { color: var(--exf-cream); }
.exf-marketing .b-entity-list .b-ty.b-contact { color: var(--err); }
.exf-marketing .b-entity-list .b-ty.b-daemon  { color: var(--ok); }
.exf-marketing .b-entity-list .b-name { color: var(--fg-1); font-weight: 500; }
.exf-marketing .b-entity-list .b-name .b-meta { color: var(--fg-4); margin-left: 6px; font-weight: 400; font-size: 10.5px; }
.exf-marketing .b-entity-list .b-ts { color: var(--fg-4); font-size: 10.5px; }

/* Status chips */
.exf-marketing .b-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
  border: 1px solid currentColor;
}
.exf-marketing .b-chip.b-ok   { color: var(--ok); }
.exf-marketing .b-chip.b-pen  { color: var(--pending); }
.exf-marketing .b-chip.b-err  { color: var(--err); }
.exf-marketing .b-chip.b-info { color: var(--info); }
.exf-marketing .b-chip.b-run  { color: var(--ok); background: var(--accent-glow); }

/* Detail pane */
.exf-marketing .b-detail {
  border-left: 1px solid var(--grid-2);
  background: var(--bg-2);
  padding: 16px 14px 12px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.exf-marketing .b-detail .b-dlabel {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.exf-marketing .b-detail .b-dtitle {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.3;
}
.exf-marketing .b-detail .b-kv {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-top: 1px dashed var(--grid-2);
  font-size: 11px;
}
.exf-marketing .b-detail .b-kv:first-of-type { border-top: 1px solid var(--fg-5); }
.exf-marketing .b-detail .b-kv .b-k { color: var(--fg-4); }
.exf-marketing .b-detail .b-kv .b-v { color: var(--fg-1); }
.exf-marketing .b-detail .b-kv .b-v.b-vok  { color: var(--ok); }
.exf-marketing .b-detail .b-kv .b-v.b-verr { color: var(--err); }

.exf-marketing .b-detail .b-neighbors { margin-top: 16px; }
.exf-marketing .b-detail .b-nlabel {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 8px;
}
.exf-marketing .b-detail .b-nbox {
  border: 1px solid var(--grid-2);
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--fg-2);
  display: flex;
  justify-content: space-between;
}
.exf-marketing .b-detail .b-nbox:hover { border-color: var(--ok); color: var(--ok); }
.exf-marketing .b-detail .b-nbox .b-nty { font-size: 9.5px; letter-spacing: 0.1em; color: var(--fg-4); }

.exf-marketing .b-detail .b-actions {
  margin-top: 18px;
  border-top: 1px solid var(--fg-5);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exf-marketing .b-detail .b-act {
  border: 1px solid var(--grid-2);
  padding: 3px 8px;
  font-size: 10px;
  color: var(--fg-2);
  cursor: default;
}
.exf-marketing .b-detail .b-act .b-k { color: var(--fg-4); margin-left: 4px; }

.exf-marketing .b-product .b-bottom-bar {
  border-top: 1px solid var(--grid-2);
  padding: 6px 14px;
  font-size: 10.5px;
  color: var(--fg-4);
  display: flex;
  justify-content: space-between;
  background: var(--bg-1);
}
.exf-marketing .b-product .b-bottom-bar .b-bleft { display: flex; gap: 14px; }
.exf-marketing .b-product .b-bottom-bar .b-bok  { color: var(--ok); }
.exf-marketing .b-product .b-bottom-bar .b-bpen { color: var(--pending); }
.exf-marketing .b-product .b-bottom-bar .b-keymap { display: flex; gap: 14px; color: var(--fg-4); }
.exf-marketing .b-product .b-bottom-bar .b-keymap b { color: var(--fg-2); font-weight: 500; }

/* ── Customer logos / proof ─────────────────────────────── */
.exf-marketing .b-proof {
  padding: 18px 24px;
  background: var(--bg-0);
  display: flex;
  align-items: center;
  gap: 32px;
  border-top: 1.5px solid var(--rule);
  border-bottom: 1px solid var(--grid-2);
}
.exf-marketing .b-proof .b-plabel {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-4);
  flex-shrink: 0;
  border-right: 1px solid var(--grid-2);
  padding-right: 32px;
}
.exf-marketing .b-proof-logos {
  display: flex;
  gap: 28px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  flex-wrap: wrap;
  letter-spacing: 0.04em;
}
.exf-marketing .b-proof-logos span::before { content: '· '; color: var(--fg-4); font-weight: 400; }
.exf-marketing .b-proof-logos span:first-child::before { content: ''; }

/* ── Doc-style section header ───────────────────────────── */
.exf-marketing .b-doc-header {
  padding: 56px 24px 14px;
  background: var(--bg-0);
}
.exf-marketing .b-doc-header .b-doc-marker { margin-bottom: 8px; }
.exf-marketing .b-doc-header h2 {
  font-size: clamp(26px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.05;
  color: var(--fg-1);
}
.exf-marketing .b-doc-header h2 .b-ok { color: var(--ok); }
.exf-marketing .b-doc-header h2 .b-er { color: var(--err); }

/* ── Paired-asymmetric problem cards ────────────────────── */
.exf-marketing .b-problems { padding: 8px 24px 0; background: var(--bg-0); }
.exf-marketing .b-paired-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  border-left: 1px solid var(--fg-1);
  border-right: 1px solid var(--fg-1);
  padding: 28px 0;  /* breathing room between heavy edges and inner cards */
}
@media (max-width: 980px) {
  .exf-marketing .b-paired-grid { grid-template-columns: 1fr; }
}
.exf-marketing .b-paired-cell {
  padding: 26px 26px 24px;
  border-right: 1px solid var(--fg-1);
}
.exf-marketing .b-paired-cell:last-child { border-right: 0; }
.exf-marketing .b-paired-cell.b-dark  { background: var(--bg-1); }
.exf-marketing .b-paired-cell.b-cream { background: var(--exf-cream); color: var(--exf-cream-text); }
.exf-marketing .b-paired-cell .b-plabel {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--err);
  margin-bottom: 14px;
  font-weight: 500;
}
.exf-marketing .b-paired-cell .b-plabel::before { content: '— '; color: var(--err); opacity: 0.5; }
.exf-marketing .b-paired-cell.b-cream .b-plabel { color: #B33B30; }
.exf-marketing .b-paired-cell h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 18px;
}
.exf-marketing .b-paired-cell.b-cream h3 { color: var(--exf-cream-text); }

.exf-marketing .b-paired-cell .b-row-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px dashed var(--grid-2);
  font-size: 11.5px;
}
.exf-marketing .b-paired-cell.b-cream .b-row-line { border-top-color: rgba(0,0,0,0.12); }
.exf-marketing .b-paired-cell .b-row-line:first-of-type { border-top: 1px solid var(--fg-2); }
.exf-marketing .b-paired-cell.b-cream .b-row-line:first-of-type { border-top: 1px solid var(--exf-cream-text); }
.exf-marketing .b-paired-cell .b-row-line .b-key { color: var(--fg-3); margin-right: 24px; }
.exf-marketing .b-paired-cell.b-cream .b-row-line .b-key { color: #6E664F; }
.exf-marketing .b-paired-cell .b-row-line .b-val { color: var(--fg-1); font-weight: 500; }
.exf-marketing .b-paired-cell.b-cream .b-row-line .b-val { color: var(--exf-cream-text); }

.exf-marketing .b-paired-cell .b-footnote {
  margin-top: 18px;
  font-size: 11px;
  color: var(--fg-4);
  border-top: 1px solid var(--fg-2);
  padding-top: 10px;
}
.exf-marketing .b-paired-cell.b-cream .b-footnote { color: #6E664F; border-top-color: var(--exf-cream-text); }
.exf-marketing .b-paired-cell .b-footnote b { color: var(--err); }
.exf-marketing .b-paired-cell.b-cream .b-footnote b { color: #B33B30; }

/* ── Status table ───────────────────────────────────────── */
.exf-marketing .b-status-block { padding: 0 24px 0; background: var(--bg-0); }
.exf-marketing .b-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  font-family: var(--exf-font-marketing-mono);
}
.exf-marketing .b-status-table th {
  text-align: left;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 10px 8px;
  border-bottom: 1px solid var(--fg-1);
  background: var(--bg-0);
}
.exf-marketing .b-status-table td {
  padding: 10px 8px;
  border-bottom: 1px dashed var(--grid-2);
  color: var(--fg-2);
  vertical-align: top;
}
.exf-marketing .b-status-table tr:last-child td { border-bottom: 0; }
.exf-marketing .b-status-table td.b-id { color: var(--fg-4); }
.exf-marketing .b-status-table td.b-name { color: var(--fg-1); font-weight: 500; }
.exf-marketing .b-status-table td.b-entity { color: var(--fg-3); font-size: 10.5px; letter-spacing: 0.06em; }
.exf-marketing .b-status-table td.b-ts { color: var(--fg-4); font-size: 10.5px; }
.exf-marketing .b-status-table tr:hover td { background: var(--bg-1); }

/* ── Specification list ─────────────────────────────────── */
.exf-marketing .b-specs {
  padding: 56px 24px 64px;
  background: var(--bg-0);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
}
@media (max-width: 980px) { .exf-marketing .b-specs { grid-template-columns: 1fr; } }
.exf-marketing .b-specs h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  line-height: 1.1;
}
.exf-marketing .b-specs .b-lede { color: var(--fg-3); font-size: 12.5px; line-height: 1.6; }
.exf-marketing .b-spec-list {
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
}
.exf-marketing .b-spec-row {
  display: grid;
  grid-template-columns: 60px 1fr 200px;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--grid-2);
  align-items: baseline;
}
.exf-marketing .b-spec-row:last-child { border-bottom: 0; }
.exf-marketing .b-spec-row .b-num { color: var(--fg-4); font-size: 11px; padding-top: 2px; }
.exf-marketing .b-spec-row .b-body h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-1);
}
.exf-marketing .b-spec-row .b-body p { margin: 0; font-size: 12.5px; color: var(--fg-3); line-height: 1.55; }
.exf-marketing .b-spec-row .b-meter { font-size: 11px; color: var(--fg-4); text-align: right; }
.exf-marketing .b-spec-row .b-meter b { color: var(--ok); font-weight: 600; }

/* ── Final CTA block ────────────────────────────────────── */
.exf-marketing .b-final-cta {
  padding: 80px 24px 80px;  /* extra room above + below content vs heavy edges */
  margin-top: 32px;
  background: var(--bg-0);
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  text-align: left;
}
.exf-marketing .b-final-cta .b-doc-marker { margin-bottom: 16px; }
.exf-marketing .b-final-cta h2 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0 0 24px;
  max-width: 800px;
}
.exf-marketing .b-final-cta h2 .b-ok { color: var(--ok); }
.exf-marketing .b-final-cta .b-sub {
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 0 32px;
}
.exf-marketing .b-final-cta .b-cta-row { gap: 12px; }

/* ── Footer ─────────────────────────────────────────────── */
.exf-marketing .b-footer {
  padding: 36px 24px 48px;
  background: var(--bg-0);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .exf-marketing .b-footer { grid-template-columns: 1fr 1fr; }
}
.exf-marketing .b-footer h5 {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 12px;
  font-weight: 600;
}
.exf-marketing .b-footer ul { list-style: none; padding: 0; margin: 0; }
.exf-marketing .b-footer li { padding: 3px 0; }
.exf-marketing .b-footer a { color: var(--fg-3); text-decoration: none; }
.exf-marketing .b-footer a:hover { color: var(--ok); }
.exf-marketing .b-colophon { color: var(--fg-3); font-size: 12px; line-height: 1.6; max-width: 290px; }
.exf-marketing .b-colophon b { display: block; color: var(--fg-1); margin-bottom: 8px; font-weight: 700; letter-spacing: 0.04em; }

.exf-marketing .b-build-strip {
  padding: 8px 24px;
  border-top: 1px solid var(--grid);
  background: var(--bg-0);
  font-size: 10px;
  color: var(--fg-4);
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.08em;
}
.exf-marketing .b-build-strip .b-ok { color: var(--ok); }

/* ============================================================
   Legacy chrome overrides — restyle the existing .nav and
   .footer markup on every marketing page to match the
   Brutalist-Dark system. Affects 7 sibling pages that don't
   get an HTML rewrite in this PR.
   ============================================================ */

.exf-marketing .nav {
  background: var(--bg-0) !important;
  border-bottom: 1.5px solid var(--rule);
  padding: 14px 24px;
  height: auto;
  min-height: 0;
  font-family: var(--exf-font-marketing-mono);
}
.exf-marketing .nav.nav--cream {
  /* Reset the cream-themed nav variant on about.html / focus.html. */
  background: var(--bg-0) !important;
  border-bottom-color: var(--rule) !important;
}

.exf-marketing .nav__brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--exf-font-marketing-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--fg-1) !important;
  text-decoration: none;
  text-transform: uppercase;
}
.exf-marketing .nav__brand img { display: none; }
.exf-marketing .nav__brand::before { content: '['; color: var(--fg-4); margin-right: 2px; font-weight: 400; }
.exf-marketing .nav__brand::after  { content: ']'; color: var(--fg-4); margin-left: 2px; font-weight: 400; }
.exf-marketing .nav__brand span { font-family: inherit; }

.exf-marketing .nav__toggle {
  background: transparent;
  border: 1px solid var(--fg-3);
  color: var(--fg-1);
  font-family: var(--exf-font-marketing-mono);
}

.exf-marketing .nav__links {
  font-family: var(--exf-font-marketing-mono);
  gap: 22px;
}
.exf-marketing .nav__links a {
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.exf-marketing .nav__links a:hover { color: var(--ok); border-bottom-color: var(--ok); }

.exf-marketing .nav__cta,
.exf-marketing .b-login {
  background: transparent !important;
  color: var(--fg-1) !important;
  padding: 6px 14px !important;
  font-weight: 600;
  font-family: var(--exf-font-marketing-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--fg-5) !important;
  transition: background 120ms;
}
.exf-marketing .nav__cta:hover,
.exf-marketing .b-login:hover {
  background: var(--bg-2) !important;
  color: var(--fg-1) !important;
  border-color: var(--fg-3) !important;
  border-bottom-color: var(--fg-3) !important;
}
.exf-marketing .nav__cta::before,
.exf-marketing .b-login::before { content: '['; }
.exf-marketing .nav__cta::after,
.exf-marketing .b-login::after  { content: ']'; }

.exf-marketing .lang-picker__btn {
  background: transparent;
  border: 1px solid var(--fg-5);
  color: var(--fg-2);
  font-family: var(--exf-font-marketing-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
}
.exf-marketing .lang-picker__btn:hover { color: var(--fg-1); border-color: var(--fg-3); }
.exf-marketing .lang-picker__dropdown {
  background: var(--bg-1);
  border: 1px solid var(--fg-5);
  font-family: var(--exf-font-marketing-mono);
}
.exf-marketing .lang-picker__option {
  color: var(--fg-2);
  font-size: 12px;
  background: transparent;
  border: 0;
  text-align: left;
}
.exf-marketing .lang-picker__option:hover {
  background: var(--bg-2);
  color: var(--fg-1);
}
.exf-marketing .lang-picker__option--active { color: var(--ok); }

/* Footer overrides — generic .footer markup (7 sibling pages) */
.exf-marketing .footer {
  background: var(--bg-0) !important;
  border-top: 1.5px solid var(--rule);
  padding: 36px 24px 48px;
  font-family: var(--exf-font-marketing-mono);
  font-size: 12px;
  color: var(--fg-3);
}
.exf-marketing .footer .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}
.exf-marketing .footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 760px) {
  .exf-marketing .footer__grid { grid-template-columns: 1fr 1fr; }
}
.exf-marketing .footer__col-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 12px;
  font-weight: 600;
}
.exf-marketing .footer a {
  color: var(--fg-3) !important;
  text-decoration: none;
  display: block;
  padding: 3px 0;
}
.exf-marketing .footer a:hover { color: var(--ok) !important; }
.exf-marketing .footer__brand-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 8px;
}
.exf-marketing .footer__brand-name::before { content: '['; color: var(--fg-4); margin-right: 2px; font-weight: 400; }
.exf-marketing .footer__brand-name::after  { content: ']'; color: var(--fg-4); margin-left: 2px; font-weight: 400; }
.exf-marketing .footer__brand-name img { display: none; }
.exf-marketing .footer__brand-info { color: var(--fg-3); line-height: 1.6; font-size: 12px; }
.exf-marketing .footer__bottom {
  border-top: 1px solid var(--grid);
  padding-top: 12px;
  margin-top: 24px;
  color: var(--fg-4);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.exf-marketing .footer__bottom-copy { color: var(--fg-4); }

/* ============================================================
   Inline-style neutralization — sibling pages have hardcoded
   colors meant for the legacy "Cognitive Clarity" cream-or-warm
   theme. They go invisible on the new dark base. Beat inline
   styles via [style*=...] attribute selectors with !important.
   ============================================================ */

/* Cream-themed nav band on /about and /focus — flatten to dark */
.exf-marketing nav.nav--cream,
.exf-marketing [style*="background:rgba(240,236,226"] {
  background: var(--bg-0) !important;
  border-bottom-color: var(--rule) !important;
}

/* Hardcoded grays on dark — pull up to legible */
.exf-marketing [style*="color:#5a5a68"],
.exf-marketing [style*="color: #5a5a68"] {
  color: var(--fg-2) !important;
}
.exf-marketing [style*="color:#4e4e5e"],
.exf-marketing [style*="color: #4e4e5e"] {
  color: var(--fg-3) !important;
}
.exf-marketing [style*="color:#1a1a22"],
.exf-marketing [style*="color: #1a1a22"] {
  color: var(--fg-1) !important;
}

/* Undefined token references (--cream-text / --coral / --text-secondary
   live only inside the legacy theme classes; on dark they fall back to
   browser default = invisible). Force them to legible tokens. */
.exf-marketing [style*="--cream-text"]    { color: var(--fg-1) !important; }
.exf-marketing [style*="--coral"]         { color: var(--err) !important; }
.exf-marketing [style*="--text-secondary"]{ color: var(--fg-3) !important; }
.exf-marketing [style*="var(--mint)"]     { color: var(--ok) !important; }
.exf-marketing [style*="var(--accent)"]   { color: var(--ok) !important; }

/* Cream-on-cream sections become dark-on-dark — readable but tonally shifted */
.exf-marketing [style*="background:#f0ece2"],
.exf-marketing [style*="background:rgb(240, 236, 226)"],
.exf-marketing .section--cream,
.exf-marketing .gradient-mesh {
  background: var(--bg-1) !important;
  color: var(--fg-1) !important;
}

/* Typography: legacy heading classes get mono treatment without breaking
   the existing layout structure on sibling pages. */
.exf-marketing .display-md,
.exf-marketing .display-lg,
.exf-marketing .display-xl {
  font-family: var(--exf-font-marketing-mono) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--fg-1) !important;
}
.exf-marketing .label,
.exf-marketing .kicker,
.exf-marketing .eyebrow {
  font-family: var(--exf-font-marketing-mono) !important;
  letter-spacing: 0.18em !important;
  color: var(--ok) !important;
}

/* Buttons — tighten legacy .btn to brutalist treatment */
.exf-marketing .btn--primary {
  background: var(--ok) !important;
  color: #00120C !important;
  border: 1px solid var(--ok) !important;
  font-family: var(--exf-font-marketing-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}
.exf-marketing .btn--secondary,
.exf-marketing .btn--outline {
  background: transparent !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--fg-3) !important;
  font-family: var(--exf-font-marketing-mono) !important;
}

/* ============================================================
   Italics are not part of the brutalist brand — purge any
   stragglers from legacy classes / inline styles globally.
   ============================================================ */
.exf-marketing em,
.exf-marketing i,
.exf-marketing .editorial,
.exf-marketing .pullquote,
em, i, .editorial, .pullquote {
  font-style: normal !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.exf-marketing .pullquote, .pullquote {
  border-left: 3px solid var(--mint, #00C896) !important;
  padding-left: 18px;
  color: var(--text, #F0F0F0) !important;
  background: transparent !important;
}