/* ═══════════════════════════════════
   ZEPHRA V3 — COMPLETE DESIGN SYSTEM
═══════════════════════════════════ */

/* Accessibility: visually hidden but available to screen readers and crawlers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link: visible on focus only */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--teal);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  border-radius: 2px;
  transition: top .1s;
}

.skip-link:focus {
  top: 16px;
}

:root {
  --ink: #0F1923;
  --ink2: #1C2D3E;
  --ink3: #2B4260;
  --teal: #00C4A1;
  --deep-teal: #008F7A;
  --teal2: #00A588;
  --teal3: #007D67;
  --gold: #F2A623;
  --gold2: #D48B18;
  --canvas: #F8F7F4;
  --slate: #4B5563;
  --slate-light: #64748B;
  --slate-on-light: #1F2937;
  /* Slate 800 - High contrast on white */
  --slate-on-dark: #CBD5E1;
  /* Slate 300 - Optimal for long-form on dark bg and form labels */
  --alert: #E24B4A;
  --success: #10B981;
  --tr: cubic-bezier(.16, 1, .3, 1);
  --white: #FFFFFF;

  /* 📏 SPACING SYSTEM */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 80px;
  --s-5xl: 100px;
  --s-max: 120px;

  /* 📐 GEOMETRIC LANGUAGE */
  --radius: 12px;

  /* 🌑 SHADOW SYSTEM 2.0 (Layered Penumbra) */
  --shadow-layered:
    0 1px 2px rgba(15, 25, 35, 0.02),
    0 4px 8px rgba(15, 25, 35, 0.04),
    0 12px 24px rgba(15, 25, 35, 0.06),
    0 32px 64px rgba(15, 25, 35, 0.08);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased
}

body {
  font-family: 'Josefin Sans', sans-serif;
  background: var(--canvas);
  color: var(--ink);
  font-weight: 400;
  overflow-x: hidden;
  line-height: 1.85;
  /* Expert Panel: 1.85 for minimum reading fatigue */
}

.ff-mono {
  font-family: 'IBM Plex Mono', monospace;
}

/* ── GLOBAL CURSOR SUPPRESSION (desktop only) ──
   The hummingbird cursor JS sets body cursor to none during init,
   but browser may re-assert pointer on interactive elements.
   We enforce none on all elements here; JS restores click/hover via events.
── */
@media (min-width: 768px) {

  body.custom-cursor-active,
  body.custom-cursor-active *,
  body.custom-cursor-active *::before,
  body.custom-cursor-active *::after {
    cursor: none !important;
  }
}

/* ── KEYBOARD FOCUS VISIBILITY ──
   Restores visible focus ring for keyboard nav users.
   Must come after cursor suppression to override it.
── */
@media (min-width: 768px) {
  :focus-visible {
    outline: 2px solid #00C4A1;
    outline-offset: 3px;
  }
}

/* ── FORM FIELD CURSOR RESTORE (desktop) ──
   Hummingbird cursor must never suppress the text cursor inside
   form fields — users need visual feedback that the field is active.
   Comes after the global suppression block to override it.
── */
@media (min-width: 768px) {

  input,
  textarea,
  select,
  [contenteditable] {
    cursor: text !important;
  }

  input[type="submit"],
  input[type="button"],
  input[type="checkbox"],
  input[type="radio"] {
    cursor: pointer !important;
  }
}

/* Mobile — restore natural cursors */
@media (max-width: 767px) {

  a,
  button,
  [role="button"],
  .cap-tab {
    cursor: pointer;
  }

  input,
  textarea,
  [contenteditable] {
    cursor: text;
  }

  select {
    cursor: default;
  }
}

/* ── BIRD-HOVER: triggered when hummingbird body overlaps an element ──
   Mirrors every :hover state so visual feedback fires even when only
   the bird's wing/tail/body (not the beak/mouse-tip) is over a link.
── */
.nav-links a.bird-hover {
  color: var(--canvas);
}

.nav-links a.bird-hover::after {
  width: 100%;
}

.nav.scrolled .nav-links a.bird-hover {
  color: var(--canvas);
}

.nav.on-light .nav-links a.bird-hover {
  color: var(--ink);
}

.nav-demo-btn.bird-hover {
  background: var(--teal) !important;
  color: var(--ink) !important;
}

.nav.on-light .nav-demo-btn.bird-hover {
  background: var(--teal);
  color: var(--ink) !important;
}

.nav-signin.bird-hover {
  color: var(--teal2);
}

.mobile-links a.bird-hover {
  color: var(--teal);
}

.hero-btn-primary.bird-hover {
  background: var(--teal) !important;
  transform: translateY(-2px);
  color: #000 !important;
  box-shadow: 0 8px 32px rgba(0, 196, 161, 0.4);
}

.card-cta.bird-hover {
  background: var(--teal);
  color: var(--ink) !important;
  box-shadow: 0 8px 20px rgba(0, 196, 161, 0.2);
}

.card-cta.ghost.bird-hover {
  background: rgba(0, 196, 161, .08);
  color: var(--teal);
  border-color: var(--teal);
}

.final-card-btn.teal-fill.bird-hover {
  background: var(--teal2);
  color: var(--ink) !important;
  box-shadow: 0 8px 24px rgba(0, 196, 161, 0.25);
}

.final-card-btn.teal-outline.bird-hover {
  background: rgba(0, 196, 161, .1);
  border-color: var(--teal);
}

.sticky-btn.bird-hover {
  background: var(--teal2);
  color: var(--ink) !important;
  box-shadow: 0 4px 12px rgba(0, 196, 161, 0.2);
}

.sticky-close.bird-hover {
  color: var(--canvas);
}

.footer-col ul a.bird-hover {
  color: var(--teal);
}

.footer-social a.bird-hover {
  color: var(--teal);
}

.footer-legal a.bird-hover {
  color: var(--teal);
}

.form-submit.bird-hover {
  background: var(--teal2);
  transform: translateY(-2px);
  color: var(--ink) !important;
}

.final-main-btn.bird-hover {
  background: var(--teal2);
  color: var(--ink) !important;
}

.final-sub-link.bird-hover {
  color: var(--canvas);
}

.matrix-card.bird-hover {
  transform: translateY(-4px);
  border-color: rgba(0, 196, 161, .3);
}

.audit-card.bird-hover {
  transform: translateY(-4px);
}

.stat-card.bird-hover {
  transform: translateY(-4px);
}



/* ──────────────────────────────────────────────────
   ELITE FEATURE: Card Metadata Footers
   ────────────────────────────────────────────────── */
.matrix-card {
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-layered) !important;
  border: 1px solid rgba(15, 25, 35, 0.05);
}

.card-metadata {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 25, 35, 0.06);
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #94A3B8;
  text-transform: uppercase;
}

.matrix-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 196, 161, 0.3);
}

/* Generic fallback for any other link or button */
a.bird-hover:not([class*="btn"]):not(.nav-links a) {
  color: var(--teal);
}

button.bird-hover {
  opacity: 0.85;
}

/* ── PROGRESS BAR (D25) ── */
.prog {
  position: fixed;
  top: 0;
  /* Reset for Status Bar removal */
  left: 0;
  height: 2px;
  background: var(--teal);
  z-index: 10001;
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 8px var(--teal);
}

::selection {
  background: var(--teal);
  color: var(--ink)
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0
}

button {
  font-family: inherit;
  border: none;
  background: none
}

.hero-h1 {
  font-size: clamp(34px, 8vw, 84px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 24px;
}

.hero-h1 span {
  display: block;
  /* Default: each .line becomes its own block */
  width: auto;
}

/* The teal nested span inside .line2 must NOT be block — that splits 'With' from 'AI...' */
.hero-h1 .line2 span {
  display: inline !important;
}

.hero-sub {
  font-size: 1.25rem;
  max-width: 650px;
  line-height: 1.6;
  margin-bottom: 40px;
  color: var(--slate-on-dark)
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 52px;
  transition: background 0.3s ease, padding 0.45s var(--tr), width 0.45s var(--tr), border 0.3s ease, box-shadow 0.3s ease;
}

.no-transition {
  transition: none !important;
}

.nav.scrolled {
  top: 10px;
  left: 2%;
  right: 2%;
  padding: 8px 24px;
  background: rgba(15, 25, 35, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 50px;
  border: 1px solid rgba(43, 66, 96, 0.4);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

/* Nav on light hero — before scroll */
.nav.on-light .nav-links a {
  color: var(--ink3);
}

.nav.on-light .nav-links a:hover {
  color: var(--ink);
}

.nav.on-light .nav-demo-btn {
  background: transparent;
  border: 1px solid rgba(15, 25, 35, 0.4);
  color: var(--ink);
}

/* Ensure scrolled state always uses light text colors regardless of initial on-light class */
.nav.scrolled .nav-links a {
  color: var(--slate-on-dark) !important;
}

.nav.scrolled .nav-links a:hover {
  color: var(--canvas) !important;
}

.nav.scrolled .nav-signin {
  color: var(--slate-on-dark) !important;
}

.nav.scrolled .nav-demo-btn {
  color: var(--slate-on-dark) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.nav.scrolled .nav-demo-btn:hover,
.nav.scrolled .nav-demo-btn.bird-hover {
  background: var(--teal) !important;
  color: var(--ink) !important;
  border-color: var(--teal) !important;
}

/* Modal Active State — forces nav into scrolled capsule style when any modal is open */
.modal-active .nav {
  top: 10px;
  left: 2%;
  right: 2%;
  padding: 8px 24px;
  background: rgba(15, 25, 35, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 50px;
  border: 1px solid rgba(43, 66, 96, 0.4);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  z-index: 99999;
  /* Just below modal overlay */
}

.modal-active .nav .nav-links a {
  color: var(--slate-on-dark) !important;
}

.modal-active .nav .nav-links a:hover {
  color: var(--canvas) !important;
}

.modal-active .nav .nav-signin {
  color: var(--slate-on-dark) !important;
}

.modal-active .nav .nav-demo-btn {
  color: var(--slate-on-dark) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.modal-active .nav .nav-demo-btn:hover,
.modal-active .nav .nav-demo-btn.bird-hover {
  background: var(--teal) !important;
  color: var(--ink) !important;
  border-color: var(--teal) !important;
}

.modal-active .nav-mobile-toggle span {
  background: var(--canvas) !important;
}


.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none
}

.nav-links {
  display: flex;
  gap: 28px
}

.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  transition: color .2s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--teal);
  transition: width .25s;
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  width: 100%
}

.nav-links a[aria-current="page"] {
  color: var(--teal3) !important;
  font-weight: 500;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px
}

.nav-signin {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  transition: all .2s;
}

.nav-signin:hover {
  color: var(--teal);
}

.nav-demo-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--slate-on-dark);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius);
  transition: all .3s;
  position: relative;
  z-index: 15000;
  white-space: nowrap;
}

.nav-demo-btn:hover {
  background: rgba(15, 25, 35, 0.05);
  border-color: var(--teal);
  color: var(--teal3) !important;
  text-shadow: none;
  transform: translateY(-2px);
}

.btn-nav-teal {
  background: var(--deep-teal) !important;
  color: var(--canvas) !important;
  border-radius: 24px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  border: 1px solid var(--deep-teal) !important;
  transition: all 0.3s var(--tr) !important;
}

.btn-nav-teal:hover {
  background: var(--teal2) !important;
  box-shadow: 0 8px 24px rgba(0, 143, 122, 0.25);
  transform: translateY(-2px);
  color: var(--canvas) !important;
}

.btn-nav-teal:active {
  transform: scale(0.98);
}

/* ── MOBILE TOGGLE ── */
.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1.5px solid rgba(15, 25, 35, 0.18);
  border-radius: 10px;
  cursor: pointer;
  z-index: 2100;
  padding: 0;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}

.nav-mobile-toggle:hover {
  border-color: var(--teal);
  background: rgba(0, 196, 161, 0.07);
  box-shadow: 0 0 0 3px rgba(0, 196, 161, 0.12);
}

.nav-mobile-toggle:active {
  transform: scale(0.94);
}

.nav-mobile-toggle span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: width 0.3s var(--tr), transform 0.3s var(--tr), opacity 0.2s ease;
}

/* Three lines: top full, middle 70%, bottom full */
.nav-mobile-toggle span:nth-child(1) { width: 18px; }
.nav-mobile-toggle span:nth-child(2) { width: 12px; align-self: flex-start; margin-left: 11px; }
.nav-mobile-toggle span:nth-child(3) { width: 18px; }

/* On scrolled (dark bg) nav */
.nav.scrolled .nav-mobile-toggle {
  border-color: rgba(248, 247, 244, 0.22);
}

.nav.scrolled .nav-mobile-toggle:hover {
  border-color: var(--teal);
  background: rgba(0, 196, 161, 0.1);
}

.nav.scrolled .nav-mobile-toggle span {
  background: var(--canvas);
}

/* Active (open) state — clean X */
.nav-mobile-toggle.active {
  border-color: var(--teal);
  background: rgba(0, 196, 161, 0.08);
}

.nav-mobile-toggle.active span:nth-child(1) {
  width: 18px;
  transform: translateY(6.5px) rotate(45deg);
}

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

.nav-mobile-toggle.active span:nth-child(3) {
  width: 18px;
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── MOBILE MENU OVERLAY ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 2050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--tr), transform 0.35s var(--tr), visibility 0s linear 0.35s;
  transform: translateY(-16px) scale(0.98);
  /* Subtle teal top accent */
  border-top: 3px solid var(--teal);
}

.mobile-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 196, 161, 0.09) 0%, transparent 70%);
  pointer-events: none;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.35s var(--tr), transform 0.35s var(--tr), visibility 0s linear 0s;
}

.mobile-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  width: 100%;
}

.mobile-links a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: rgba(248, 247, 244, 0.85);
  transition: color 0.2s ease, padding-left 0.2s ease;
  padding: 10px 0;
  position: relative;
}

.mobile-links a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1.5px;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.25s var(--tr);
}

.mobile-links a:hover {
  color: var(--canvas);
}

.mobile-links a:hover::after {
  width: 32px;
}

/* Stagger-in animation when menu opens */
.mobile-menu.open .mobile-links a {
  animation: menuLinkIn 0.4s var(--tr) both;
}

.mobile-menu.open .mobile-links a:nth-child(1) { animation-delay: 0.06s; }
.mobile-menu.open .mobile-links a:nth-child(2) { animation-delay: 0.10s; }
.mobile-menu.open .mobile-links a:nth-child(3) { animation-delay: 0.14s; }
.mobile-menu.open .mobile-links a:nth-child(4) { animation-delay: 0.18s; }
.mobile-menu.open .mobile-links a:nth-child(5) { animation-delay: 0.22s; }

@keyframes menuLinkIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Divider between links and footer */
.mobile-menu-divider {
  width: 40px;
  height: 1px;
  background: rgba(0, 196, 161, 0.3);
  margin: 28px auto;
}

.mobile-menu-footer {
  margin-top: 0;
  text-align: center;
  animation: menuLinkIn 0.4s 0.28s var(--tr) both;
}

.mobile-menu.open .mobile-menu-footer {
  animation: menuLinkIn 0.4s 0.28s var(--tr) both;
}

.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--ink);
  padding: 15px 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 20px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 196, 161, 0.28);
}

.mobile-menu-btn:hover {
  background: #00ddb4;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 196, 161, 0.38);
}

.mobile-menu-btn:active {
  transform: scale(0.97);
}

/* ── SECTION SYSTEM ── */
.section {
  padding: 100px 5%;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--ink3)
}

.s-light {
  background: var(--canvas);
  color: var(--ink)
}

.s-mid {
  background: var(--ink2)
}

.s-dark {
  background: var(--ink)
}

.s-inner {
  max-width: 1200px;
  margin: 0 auto
}

/* Scoped Contrast Overrides for Dark Surfaces */
.s-dark,
.s-mid,
.matrix-card,
.terminal-card,
.footer,
.modal-content,
.obj-card,
.page-hero,
.audience-section,
.honesty-block,
.final-main-inner,
.final-main-card,
.sticky-cta {
  --slate: var(--slate-on-dark);
  color: var(--slate-on-dark);
}

label {
  color: var(--slate-on-dark);
  font-weight: 400;
}

.s-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 20px;
  font-weight: 500;
}

.s-label.light {
  color: var(--teal2)
}

.s-label-high {
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--gold);
}

.s-h2 {
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.s-lead {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--slate);
  max-width: 640px
}

/* ── REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s var(--tr), transform .75s var(--tr)
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .75s var(--tr), transform .75s var(--tr)
}

.reveal-left.visible {
  opacity: 1;
  transform: none
}

.stagger-1 {
  transition-delay: .1s
}

.stagger-2 {
  transition-delay: .2s
}

.stagger-3 {
  transition-delay: .3s
}

.stagger-4 {
  transition-delay: .4s
}

.stagger-5 {
  transition-delay: .5s
}

.stagger-6 {
  transition-delay: .6s
}

/* ── HERO ── */
.hero-section {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 60px);
  background: transparent;
  display: flex;
  align-items: center;
  padding: 115px 40px 40px;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(0, 196, 161, .11) 0%, rgba(0, 196, 161, .04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 5s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: .7;
    transform: translateY(-50%) scale(1)
  }

  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.06)
  }
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 196, 161, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 196, 161, .018) 1px, transparent 1px);
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 55% 55% at 65% 50%, black 0%, transparent 70%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 1.1fr;
  gap: 30px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: center;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-right {
  display: block;
}

.hero-label-top {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal2);
  margin-bottom: 20px;
  display: block;
}

/* We remove the ::before to keep labels in HTML */
.hero-label-top::before {
  content: '';
}

.hero-h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(24px, 3.1vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 10px;
  color: var(--ink);
  width: 100%;
  max-width: none;
}

.hero-h1 .line1 {
  display: inline-block;
  white-space: nowrap;
  animation: fadeUp .9s .15s cubic-bezier(.16, 1, .3, 1) both;
  opacity: 0
}

.hero-h1 .line2 {
  display: block;
  /* Block keeps it below line 1 */
  white-space: nowrap;
  /* Prevents internal wrap: 'With' + 'AI...' stay together */
  color: var(--teal2);
  animation: fadeUp .9s .32s cubic-bezier(.16, 1, .3, 1) both;
  opacity: 0
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.hero-body {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink3);
  max-width: 800px;
  margin-bottom: 12px;
}

.hero-body b,
.hero-body strong {
  font-weight: 600;
}

.hero-body-italic {
  font-size: 17px;
  font-style: italic;
  color: var(--teal2);
  margin-bottom: 12px;
}

/* ── HERO TEAM CARD ── */
.hero-team-card {
  background: rgba(248, 247, 244, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 196, 161, 0.18);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  padding: 0;
  margin: 8px 0 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.hero-team-lead {
  padding: 12px 20px 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink2);
  border-bottom: 1px solid rgba(0, 196, 161, 0.12);
}

.hero-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: rgba(0, 196, 161, 0.08);
  gap: 1px;
}

.hero-team-box {
  background: rgba(248, 247, 244, 0.97);
  padding: 10px 16px 11px;
  border-right: 1px solid rgba(0, 196, 161, 0.08);
  border-bottom: 1px solid rgba(0, 196, 161, 0.08);
}

.hero-team-box h3,
.hero-team-box h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-light);
  margin-bottom: 3px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-team-box p {
  font-size: 11px;
  line-height: 1.4;
  color: var(--slate);
  margin: 0;
}

@media (max-width: 1100px) {
  .hero-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hero-team-grid {
    grid-template-columns: 1fr;
  }

  .hero-team-lead {
    font-size: 17px;
    padding: 24px;
  }

  .hero-team-box {
    padding: 20px;
    min-height: auto;
  }
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  /* tightened from 20 */
}

/* ── HERO PRIMARY BUTTON (filled) ── */
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  background: var(--teal);
  color: var(--ink);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid var(--teal);
  white-space: nowrap;
  transition: all 0.3s var(--tr);
  box-shadow: 0 4px 16px rgba(0, 196, 161, 0.25);
}

.hero-btn-primary:hover {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 196, 161, 0.4);
}

.hero-btn-primary:active {
  transform: scale(0.98);
}

/* ── HERO GHOST BUTTON (outline) ── */
.hero-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  background: transparent;
  color: var(--ink);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid rgba(15, 25, 35, 0.25);
  white-space: nowrap;
  transition: all 0.3s var(--tr);
}

.hero-btn-ghost:hover {
  border-color: var(--teal3);
  color: var(--teal3);
  transform: translateY(-2px);
  background: rgba(0, 196, 161, 0.04);
}

.hero-trust-line {
  font-size: 13px;
  color: var(--slate);
  opacity: 0.75;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.hero-trust-line .dot {
  margin: 0 10px;
  color: var(--teal);
  opacity: 0.7;
}

.hero-founding-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.hero-founding-link:hover {
  color: var(--teal);
}

.hero-urgency {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink);
  line-height: 1.4;
}

.hero-urgency .spots {
  color: var(--teal2);
  font-weight: 500
}

/* ── TERMINAL ── */
.hero-right {
  position: relative;
  z-index: 2;
  opacity: 0;
  margin-top: -40px;
  animation: slideInRight .9s .28s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.terminal-card {
  background: rgba(15, 25, 35, 0.95);
  border: 1px solid rgba(0, 196, 161, 0.45);
  border-radius: var(--radius);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 100px rgba(0, 196, 161, 0.25);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(12px);
}

.terminal-card::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(0, 196, 161, 0.2) 0%, transparent 75%);
  z-index: -1;
  pointer-events: none;
  filter: blur(30px);
  animation: glowPulse 4s ease-in-out infinite;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(15, 25, 35, .8);
  border-bottom: 1px solid var(--ink3);
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.term-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--slate-on-dark);
  margin-left: 8px
}

.term-label .blink {
  color: var(--teal);
  animation: blink 1s step-end infinite
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

.term-body {
  padding: 16px;
  min-height: 168px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  line-height: 1.85
}

.term-entry {
  display: block;
  color: var(--teal);
  margin-bottom: 2px;
  animation: termIn .35s var(--tr)
}

.term-entry.approve-line {
  color: var(--canvas);
  background: rgba(0, 196, 161, .08);
  padding: 6px 10px;
  margin-top: 8px;
  letter-spacing: .05em;
  font-weight: 500;
}

@keyframes termIn {
  from {
    opacity: 0;
    transform: translateX(-8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.term-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink3);
  border-top: 1px solid var(--ink3)
}

.metric-tile {
  background: rgba(15, 25, 35, .6);
  padding: 10px 14px;
  text-align: center
}

.metric-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 4px
}

.metric-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-on-dark)
}

.budget-bars {
  padding: 10px 14px;
  border-top: 1px solid var(--ink3)
}

.bb-row {
  margin-bottom: 8px
}

.bb-lbl {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  margin-bottom: 4px
}

.bb-track {
  height: 3px;
  background: var(--ink3);
  border-radius: 2px
}

.bb-fill {
  height: 100%;
  border-radius: 2px;
  width: 0;
  transition: width 2.5s cubic-bezier(.25, 1, .5, 1)
}

/* ── AUDIENCE MIRRORS ── */
.audience-section {
  background: var(--ink2);
  padding: 40px 80px 0;
}

.audience-bridge {
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  color: var(--slate-on-dark);
  margin-bottom: 60px
}

.audience-bridge strong {
  color: var(--canvas);
  font-weight: 400
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink3);
}

@media(max-width:960px) {
  .matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .matrix-grid {
    grid-template-columns: 1fr;
  }
}

.matrix-card {
  background: var(--ink);
  padding: 32px 28px;
  display: grid;
  grid-template-rows: auto auto auto 1fr 58px 44px;
  /* rows: aud | quote | consequence | role(1fr) | cta(fixed) | micro(fixed) */
  /* Rows 5+6 are fixed px — button tops are always identical across all cards */
  box-shadow: inset 3px 0 0 transparent;
  transition: background .25s ease, box-shadow .25s ease;
}

.matrix-card:hover {
  background: var(--ink2);
  box-shadow: inset 3px 0 0 var(--teal);
}

/* Badge flips to teal on card hover */
.matrix-card:hover .card-aud {
  background: var(--teal);
  color: var(--ink);
  transition: background .25s ease, color .25s ease;
}

/* CTA button fills on card hover (not just on direct button hover) */
.matrix-card:hover .card-cta {
  background: var(--teal);
  color: var(--ink);
  border-color: var(--teal);
}

/* CTA catch-all card — row 2, col 3 (Z-path endpoint) */
.matrix-card--cta {
  background: rgba(0, 196, 161, .04);
  box-shadow: inset 3px 0 0 rgba(0, 196, 161, .35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: 40px 28px;
}

.matrix-card--cta:hover {
  background: rgba(0, 196, 161, .09);
  box-shadow: inset 3px 0 0 var(--teal);
}

.card-aud {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--canvas);
  padding: 6px 12px;
  display: inline-block;
  align-self: center;
  margin-bottom: 24px;
  border-radius: 0;
  transition: background .25s ease, color .25s ease;
}

.card-quote {
  font-size: 19px;
  font-weight: 400;
  font-style: italic;
  color: var(--canvas);
  line-height: 1.45;
  margin-bottom: 14px;
  min-height: 120px;
  text-align: center;
}

.card-consequence {
  font-size: 15px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: center;
}

.card-role {
  font-size: 15px;
  font-weight: 300;
  color: var(--canvas);
  line-height: 1.6;
  border-top: 1px solid var(--ink3);
  padding-top: 16px;
  margin-bottom: 24px;
  align-self: center;
  text-align: center;
}

.card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  color: var(--teal);
  border: 1px solid rgba(0, 196, 161, .5);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 20px;
  height: 100%;
  border-radius: 4px;
  transition: all 0.3s var(--tr);
  /* cursor: none; removed */
  line-height: 1.4;
}

.card-cta:hover {
  background: var(--teal);
  color: var(--ink);
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(0, 196, 161, 0.2);
}

.card-cta:active {
  transform: scale(0.98);
}


.card-cta.ghost:hover {
  background: rgba(0, 196, 161, .08);
  border-color: var(--teal)
}

/* cohort-trigger inside audience card must inherit ghost if parent is ghost */
.matrix-card .card-cta.cohort-trigger {
  background: transparent;
  border: 1px solid rgba(0, 196, 161, .4);
  color: var(--teal)
}

.matrix-card .card-cta.cohort-trigger:hover {
  background: var(--teal);
  color: var(--ink);
  border-color: var(--teal);
}

.card-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--slate-on-dark);
  text-align: center;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 8px;
}

/* Audit band */
.audit-band {
  background: var(--deep-teal);
  padding: 24px 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px
}

.audit-band-text {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.6
}

.audit-band-btn {
  background: var(--ink);
  color: var(--canvas);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 13px 24px;
  white-space: nowrap;
  transition: all .3s;
  /* cursor: none; removed */
  border-radius: 2px;
}

.audit-band-btn:hover {
  background: var(--gold);
  color: var(--ink)
}

/* ── PROBLEM SECTION ── */
.problem-section {
  background: var(--ink) !important;
  padding: 100px 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.problem-h2 {
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--canvas) !important;
  max-width: 880px;
  margin: 0 auto 24px;
}

.problem-h2 .teal-em {
  color: var(--teal) !important;
  font-weight: 400
}

.problem-lead {
  font-size: 16px;
  font-weight: 300;
  color: var(--slate-on-dark) !important;
  max-width: 600px;
  margin: 0 auto 80px;
  line-height: 1.78
}

.pi-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255, .15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
}

.pi-block {
  text-align: center
}

.pi-line1 {
  font-size: clamp(22px, 3.2vw, 42px);
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--canvas) !important;
  line-height: 1.1;
  display: block
}

.pi-line2 {
  font-size: clamp(22px, 3.2vw, 48px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.1;
  display: block;
  margin-top: 4px
}

.pi-line2.teal {
  color: var(--teal) !important;
}

.pi-line2.gold {
  color: var(--gold) !important;
}

.pi-divider {
  width: 1px;
  height: 0;
  background: rgba(255, 255, 255, .15);
  transition: height 1.2s var(--tr)
}

.pi-divider.visible {
  height: 64px
}

/* ── BRAIN SECTION (OPTION A) ── */
.brain-section {
  background: var(--ink2);
  padding: 100px 80px
}

.brain-identity {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px
}

.brain-negatives {
  font-size: 18px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.8;
  margin-bottom: 24px
}

.brain-payoff {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--canvas);
  margin-bottom: 24px;
}

.brain-bridge {
  font-size: 20px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto
}

/* Option A: Tab layout */
.cap-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1px;
  background: var(--ink3);
  max-width: 1100px;
  margin: 0 auto
}

.cap-tabs {
  background: var(--ink);
  display: flex;
  flex-direction: column
}

.cap-tab {
  padding: 22px 24px;
  /* cursor: none; removed */
  border-bottom: 1px solid var(--ink2);
  transition: all .2s;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.cap-tab:last-child {
  border-bottom: none
}

.cap-tab:hover {
  background: var(--ink2)
}

.cap-tab.active {
  background: var(--ink2);
  border-left-color: var(--teal)
}

.cap-tab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: .4;
  stroke: var(--teal)
}

.cap-tab.active .cap-tab-icon {
  opacity: 1
}

.cap-tab-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: #94A3B8;
  /* Lighter slate for better contrast */
  text-transform: uppercase;
  margin-bottom: 4px
}

.cap-tab.active .cap-tab-cat {
  color: var(--teal)
}

.cap-tab-title {
  font-size: 13px;
  color: #CBD5E1;
  /* Lighter slate for better contrast */
  line-height: 1.4
}

.cap-tab.active .cap-tab-title {
  color: var(--canvas)
}

/* Panel area */
.cap-panels {
  background: var(--ink);
  min-height: auto;
  position: relative;
  overflow: visible
}

.cap-panel {
  position: absolute;
  inset: 0;
  padding: 40px 40px 60px;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transition: opacity .4s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.cap-panel.active {
  position: relative;
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}

.cp-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink3);
  margin-bottom: 28px
}

.cp-metric {
  background: rgba(15, 25, 35, .7);
  padding: 14px 16px;
  text-align: center
}

.cp-metric-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 4px
}

.nav-cta {
  background: var(--teal) !important;
  color: var(--ink) !important;
  padding: 10px 24px !important;
  border-radius: 30px !important;
  font-weight: 500 !important;
}

.cp-metric-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-on-dark)
}

.cp-screen {
  background: #0A1520;
  border: 1px solid var(--ink3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px
}

.cp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(15, 25, 35, .9);
  border-bottom: 1px solid var(--ink3);
}

.cp-bar-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--slate);
  margin-left: 6px
}

.cp-output {
  padding: 18px 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.85;
  min-height: 148px
}

.cp-line {
  display: block;
  margin-bottom: 1px;
  color: var(--teal)
}

.cp-line.dim {
  color: var(--ink3)
}

.cp-line.hi {
  color: var(--canvas);
  font-weight: 500
}

.cp-line.gold {
  color: var(--gold)
}

.cp-line.sp {
  height: 9px;
  display: block
}

.cp-approve {
  display: flex;
  gap: 8px;
  margin-top: 12px
}

.cp-btn-approve {
  background: var(--teal);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: none;
  /* cursor: none; removed */
  transition: background .2s;
}

.cp-btn-approve:hover {
  background: var(--teal2)
}

.cp-btn-mod {
  background: transparent;
  color: var(--slate);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--ink3);
  /* cursor: none; removed */
  transition: all .2s;
}

.cp-btn-mod:hover {
  border-color: var(--teal);
  color: var(--teal)
}

.cp-desc {
  font-size: 13px;
  color: var(--slate-on-dark);
  line-height: 1.78;
  border-left: 3px solid var(--teal);
  padding-left: 18px
}

.cp-desc-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--teal);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px
}

.cp-desc-text {
  font-size: 13px;
  color: var(--slate-on-dark);
  line-height: 1.75
}

/* Reasoning callout */
.reasoning-callout {
  background: rgba(0, 196, 161, 0.04);
  border: 1px solid var(--teal);
  border-left: 4px solid var(--teal);
  padding: 40px 56px;
  max-width: 1100px;
  margin: 1px auto 0;
}

.reasoning-callout h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: .06em;
  margin-bottom: 16px
}

.reasoning-callout p {
  font-size: 15px;
  font-weight: 300;
  color: var(--canvas);
  line-height: 1.78;
  max-width: 680px
}

/* Brain transition */
.brain-transition {
  text-align: center;
  margin: 72px auto 56px;
  max-width: 600px
}

.brain-transition .line1 {
  font-size: 18px;
  font-weight: 300;
  color: var(--canvas);
  letter-spacing: .04em;
  margin-bottom: 8px
}

.brain-transition .line2 {
  font-size: 18px;
  font-weight: 300;
  color: var(--teal);
  letter-spacing: .04em
}

/* Roadmap */
.roadmap-strip {
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .05);
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px;
}

.roadmap-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px
}

.roadmap-framing {
  font-size: 14px;
  font-weight: 300;
  color: var(--slate-on-dark);
  max-width: 600px;
  margin-bottom: 40px;
  line-height: 1.6;
}

.form-field-group {
  display: flex !important;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.modal-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  min-width: 120px;
  text-align: left;
}

.roadmap-col-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2s ease-in-out infinite
}

.soon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--gold)
}

@keyframes pulse {

  0%,
  100% {
    opacity: .6
  }

  50% {
    opacity: 1
  }
}

.roadmap-list {
  list-style: none;
  padding: 0
}

.roadmap-list li {
  font-size: 13px;
  font-weight: 300;
  line-height: 2.2;
  padding-left: 16px;
  position: relative
}

.roadmap-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  font-size: 16px;
  line-height: 2.1;
  font-weight: 600;
}

.roadmap-list.live li {
  color: var(--canvas)
}

.roadmap-list.live li::before {
  color: var(--teal)
}

.roadmap-list.coming li {
  color: rgba(248, 247, 244, .38)
}

.roadmap-list.coming li::before {
  color: var(--gold)
}

.roadmap-cols>div+div {
  border-left: 1px solid var(--ink3);
  padding-left: 64px
}

/* ── HOW IT WORKS ── */
.how-section {
  background: var(--ink);
  padding: 100px 80px
}

.how-header {
  text-align: center;
  margin-bottom: 80px
}

.how-h2 {
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--canvas);
  margin-bottom: 16px
}

.how-sub {
  font-size: 18px;
  font-weight: 300;
  color: var(--teal)
}

.steps-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative
}

.steps-container::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--teal), rgba(0, 196, 161, .1));
}

.steps-container::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 40px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  border: 2px solid var(--teal);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.step {
  display: flex;
  gap: 48px;
  margin-bottom: 80px;
  position: relative
}

.step:last-child {
  margin-bottom: 0
}

.step-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 48px;
  font-weight: 500;
  color: var(--teal);
  background: var(--ink);
  line-height: 1;
  flex-shrink: 0;
  width: 80px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.step-content {
  flex: 1
}

.step-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.step-h {
  font-size: 22px;
  font-weight: 500;
  color: var(--canvas);
  letter-spacing: .04em
}

.step-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 3px
}

.step-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.78;
  margin-bottom: 24px
}

.mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 12px
}

.mode-card {
  background: var(--ink2);
  border-left: 3px solid;
  padding: 20px 24px
}

.mode-card.teal-mode {
  border-color: var(--teal)
}

.mode-card.gold-mode {
  border-color: var(--gold)
}

.mode-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--canvas);
  margin-bottom: 8px
}

.mode-card p {
  font-size: 12px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.6
}

.mode-switch {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--slate-on-dark);
  font-style: italic
}

.step-detail {
  border-left: 1px solid rgba(0, 196, 161, .3);
  padding-left: 20px;
  margin-top: 16px
}

.step-detail-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
  display: block
}

.step-detail p {
  font-size: 13px;
  font-weight: 300;
  color: var(--canvas);
  line-height: 1.7
}

.step-highlight {
  background: var(--ink3);
  padding: 2px 8px;
  border-radius: 2px;
  color: var(--canvas);
  font-size: 13px
}

.payment-callout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: rgba(6, 95, 70, 0.04);
  border-left: 4px solid var(--teal);
  padding: 32px;
  margin-top: 64px;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 2px 12px 12px 2px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.payment-callout:hover {
  background: rgba(6, 95, 70, 0.07);
  transform: translateX(4px);
}

.payment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--teal);
  color: white;
  border-radius: 50%;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.payment-content p {
  font-size: 19px;
  color: var(--canvas);
  margin: 0;
  line-height: 1.4;
}

.payment-content p strong {
  color: var(--teal);
  font-weight: 700;
}

.payment-sub {
  font-size: 14px !important;
  color: var(--slate) !important;
  opacity: 0.8;
  margin-top: 10px !important;
  font-style: italic;
}

@media (max-width: 768px) {
  .payment-callout {
    padding: 24px;
    gap: 16px;
  }

  .payment-content p {
    font-size: 17px;
  }
}

.how-ctas {
  text-align: center;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.how-cta-primary {
  display: inline-flex;
  align-items: center;
  background: var(--teal);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 40px;
  transition: all 0.3s var(--tr);
  /* cursor: none; removed */
}

.how-cta-primary:hover {
  background: var(--teal2);
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 196, 161, .22)
}

.how-cta-primary:active {
  transform: scale(0.98);
}

.how-cta-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--teal);
  border-bottom: 1px solid rgba(0, 196, 161, .3);
  padding-bottom: 2px;
  cursor: none;
  transition: all 0.3s var(--tr);
}

.how-cta-link:hover {
  border-color: var(--teal)
}

/* ── FREE AUDIT ── */
.audit-section {
  background: var(--ink2);
  padding: 100px 80px
}

.audit-header {
  text-align: center;
  margin-bottom: 64px
}

.audit-h2 {
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--canvas);
  margin-bottom: 16px
}

.audit-sub {
  font-size: 18px;
  font-weight: 300;
  color: var(--teal)
}

.audit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink3);
  max-width: 960px;
  margin: 0 auto 56px
}

.audit-card {
  background: var(--ink);
  padding: 40px 32px;
}

.audit-card:hover {
  background: rgba(15, 25, 35, .97)
}

.audit-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 32px;
  font-weight: 500;
  color: var(--teal);
  opacity: .2;
  margin-bottom: 20px;
  line-height: 1
}

.audit-card h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--canvas);
  margin-bottom: 12px;
  letter-spacing: .04em
}

.audit-card p {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.75
}

.honesty-block {
  background: var(--ink);
  border-left: 4px solid var(--teal);
  padding: 44px 48px;
  max-width: 1040px;
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: center;
}

.honesty-block h4 {
  font-size: 18px;
  font-weight: 500;
  color: var(--canvas);
  letter-spacing: .05em;
  margin-bottom: 16px;
}

.honesty-block p {
  font-size: 15px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.8;
}

/* Audit Trace Mini Visual */
.audit-trace-mini {
  background: var(--ink2);
  border: 1px solid var(--ink3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trace-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--slate);
  letter-spacing: .05em;
}

.trace-status {
  font-style: normal;
  color: var(--teal);
  font-weight: 500;
}

.trace-status.gold {
  color: var(--gold);
}

.trace-status.lock {
  color: var(--slate);
  opacity: 0.6;
}

@media(max-width: 900px) {
  .honesty-block {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px;
  }

  .honesty-visual {
    display: none;
  }
}

.audit-cta-block {
  text-align: center
}

.audit-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--teal);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 18px 52px;
  border-radius: 4px;
  transition: all 0.3s var(--tr);
  /* cursor: none; removed */
  margin-bottom: 16px;
}

.audit-btn-primary:hover {
  background: var(--teal2);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 196, 161, .28)
}

.audit-btn-primary:active {
  transform: scale(0.98);
}

.audit-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  margin-bottom: 20px
}

.audit-sample-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--teal);
  border-bottom: 1px solid rgba(0, 196, 161, .3);
  padding-bottom: 2px;
  cursor: none;
  transition: all 0.3s var(--tr);
}

.audit-sample-link:hover {
  border-color: var(--teal)
}

/* ── SOCIAL PROOF ── */
.proof-section {
  background: var(--ink);
  padding: 100px 80px 80px;
  /* Increased bottom padding for sticky CTA */
}

.proof-h2 {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--canvas);
  text-align: center;
  margin-bottom: 80px
}

.stats-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: center;
  margin-bottom: 32px
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink3);
  margin-bottom: 80px
}

.stat-card {
  background: var(--ink2);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: background .3s;
}

.stat-card.featured {
  background: rgba(0, 196, 161, .06);
  border: 1px solid rgba(0, 196, 161, .2)
}

.stat-card:hover {
  background: var(--ink3)
}

.stat-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 500;
  color: var(--teal);
  letter-spacing: .04em;
  line-height: 1;
  margin-bottom: 6px
}

.stat-sub-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
  min-height: 14px
}

.stat-dots {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
  flex-wrap: wrap
}

.stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink3);
  flex-shrink: 0
}

.stat-dot.active {
  background: var(--teal)
}

.stat-desc {
  font-size: 13px;
  font-weight: 300;
  color: rgba(248, 247, 244, .8);
  line-height: 1.75;
  flex-grow: 1
}

.stat-consequence {
  font-size: 12px;
  font-weight: 300;
  color: var(--teal);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.5
}

.stat-source {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.75);
  /* Increased contrast and size */
  margin-top: 12px;
  letter-spacing: .06em
}

.ios-bars {
  margin: 12px 0
}

.ios-bar-row {
  margin-bottom: 8px
}

.ios-bar-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.75);
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between
}

.ios-bar-label .ios-val {
  color: var(--canvas)
}

.ios-bar-track {
  height: 4px;
  background: var(--ink3);
  border-radius: 2px
}

.ios-bar-fill {
  height: 100%;
  border-radius: 2px
}

.ios-bar-fill.platform {
  background: var(--slate);
  width: 68%
}

.ios-bar-fill.actual {
  background: var(--teal);
  width: 100%
}

.testers-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px
}

.testers-caveat {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate-on-dark);
  font-style: italic;
  margin-bottom: 32px
}

.tester-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink3);
  margin-bottom: 80px
}

.tester-card {
  background: var(--ink2);
  border-top: 3px solid var(--teal);
  padding: 40px 32px;
  transition: background .2s
}

.tester-card:nth-child(2) {
  border-top-color: var(--gold)
}

.tester-card:nth-child(3) {
  border-top-color: #7C9EBF
}

.tester-card:hover {
  background: var(--ink3)
}

.tester-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.78;
  margin-bottom: 16px
}

.tester-quote {
  font-size: 13px;
  font-weight: 300;
  color: var(--canvas);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 12px;
}

.tester-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: .02em;
}

.cohort-momentum {
  background: var(--ink2);
  border: 1px solid var(--ink3);
  padding: 48px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ── EARLY TESTER RESULTS — light break section ── */
.testers-section {
  background: var(--canvas);
  padding: 80px 80px 80px;
  border-top: 1px solid rgba(15, 25, 35, 0.08);
  border-bottom: 1px solid rgba(15, 25, 35, 0.08);
}

.testers-label--light {
  color: var(--teal3);
}

.testers-caveat--light {
  color: var(--slate-on-light);
}

.tester-cards--light {
  background: rgba(15, 25, 35, 0.06);
}

.tester-card--light {
  background: var(--canvas);
  border-top-color: var(--teal);
}

.tester-card--light:nth-child(2) {
  border-top-color: var(--gold);
}

.tester-card--light:nth-child(3) {
  border-top-color: #4A80A8;
}

.tester-card--light:hover {
  background: #f5f4f1;
}

.tester-body--light {
  color: var(--slate-on-light);
}

.tester-quote--light {
  color: var(--ink);
}

.tester-meta--light {
  color: var(--slate-light);
}

/* ── COHORT SECTION (standalone light section) ── */
.cohort-section {
  background: var(--canvas);
  padding: 100px 80px;
  border-top: 1px solid rgba(15, 25, 35, 0.08);
  border-bottom: 1px solid rgba(15, 25, 35, 0.08);
}

/* Text inversions — cohort-momentum on light background */
.cohort-section .cohort-momentum {
  background: transparent;
  border: none;
}

.cohort-section .cohort-sub {
  color: var(--ink3);
}

.cohort-section .cohort-desc {
  color: var(--slate-on-light);
}

.cohort-section .cohort-benefits li {
  color: var(--ink);
  border-bottom-color: rgba(15, 25, 35, 0.12);
}

.cohort-section .benefit-item {
  color: var(--ink) !important;
}

.cohort-section .cohort-micro {
  color: var(--slate-on-light);
}

/* ── SKEPTICISM DEFUSER ── */
.skeptic-section {
  background: var(--canvas);
  padding: 80px 0;
  border-top: 1px solid rgba(15, 25, 35, 0.05);
  border-bottom: 1px solid rgba(15, 25, 35, 0.05);
}

.skeptic-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  background: var(--canvas);
  border: 1px solid rgba(15, 25, 35, 0.08);
  padding: 64px;
  align-items: center;
}

.skeptic-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 24px;
}

.skeptic-q p {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 28px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
}

.skeptic-a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 20px;
}

.skeptic-sub {
  font-size: 13px;
  color: var(--slate);
  opacity: 0.8;
  font-style: italic;
}

.skeptic-link {
  display: inline-block;
  margin-top: 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 196, 161, 0.3);
  transition: all 0.3s var(--tr);
}

.skeptic-link:hover {
  color: var(--teal2);
  border-bottom-color: var(--teal2);
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .skeptic-card {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 48px 32px;
  }

  .skeptic-q p {
    font-size: 24px;
  }
}

.cohort-big {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 88px;
  font-weight: 500;
  color: var(--teal);
  line-height: 1
}

.cohort-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  margin-top: 8px
}

.cohort-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.75;
  margin-top: 16px
}

.cohort-benefits {
  list-style: none;
  padding: 0;
  margin-bottom: 28px
}

.cohort-benefits li {
  font-size: 13px;
  font-weight: 300;
  color: var(--canvas);
  border-bottom: 1px solid var(--ink3);
  position: relative;
  line-height: 1.5;
}

.cohort-benefits li::before {
  display: none;
}

.cohort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 4px;
  transition: all .35s;
  /* cursor: none; removed */
  margin-bottom: 12px;
}

.cohort-btn:hover {
  background: var(--teal2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 196, 161, .22)
}

.cohort-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--slate-on-light);
  letter-spacing: .08em;
  text-align: center
}

/* ── OBJECTIONS ── */
.obj-section {
  background: var(--ink2);
  padding: 100px 80px
}

.obj-header {
  text-align: center;
  margin-bottom: 64px
}

.obj-h2 {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--canvas);
  margin-bottom: 16px
}

.obj-lead {
  font-size: 18px;
  font-weight: 300;
  color: var(--slate-on-dark);
  max-width: 580px;
  margin: 0 auto 12px
}

.obj-trust {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--teal)
}

.obj-stack {
  max-width: 960px;
  margin: 0 auto
}

.obj-card {
  display: grid;
  grid-template-columns: 4fr 6fr;
  border: 1px solid var(--ink3);
  margin-bottom: 2px;
  transition: border-color .3s
}

.obj-card:hover {
  border-color: rgba(0, 196, 161, .3)
}

.obj-left {
  background: var(--ink);
  padding: 40px 32px;
  border-right: 1px solid var(--ink3)
}

.obj-what {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  margin-bottom: 12px
}

.obj-q {
  font-size: 14px;
  font-weight: 300;
  color: var(--slate-on-dark);
  font-style: italic;
  line-height: 1.75
}

.obj-right {
  background: var(--ink2);
  padding: 40px 32px
}

.obj-honest {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px
}

.obj-a {
  font-size: 14px;
  font-weight: 300;
  color: var(--canvas);
  line-height: 1.78
}

.obj-cta {
  text-align: center;
  margin-top: 64px
}

.obj-cta-p {
  font-size: 16px;
  font-weight: 300;
  color: var(--slate-on-dark);
  margin-bottom: 8px
}

.obj-cta-p2 {
  font-size: 16px;
  font-weight: 300;
  color: var(--canvas);
  margin-bottom: 28px
}

/* ── FOUNDING BLOCK ── */
.founding-block {
  background: var(--teal);
  padding: 48px 64px;
  max-width: 960px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  border-radius: var(--radius);
}

.founding-block h3 {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 20px
}

.founding-block p {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 12px
}

.founding-block p strong {
  font-weight: 600
}

.founding-cta-btn {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--teal);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 28px;
  white-space: nowrap;
  transition: all .3s;
  /* cursor: none; removed */
}

.founding-cta-btn:hover {
  background: rgba(15, 25, 35, .85);
  transform: translateY(-2px)
}

.founding-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: rgba(15, 25, 35, .6);
  text-align: center;
  margin-top: 10px;
  letter-spacing: .08em
}

/* ── FINAL CTA ── */
.final-section {
  background: var(--ink);
  padding: 120px 5% 180px;
  /* Increased bottom padding to clear sticky CTA */
}

.final-header {
  text-align: center;
  margin-bottom: 80px
}

.final-h2 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.15;
  color: var(--canvas);
  margin-bottom: 20px
}

.final-sub {
  font-size: 18px;
  font-weight: 300;
  color: var(--slate-on-dark);
  margin-bottom: 12px
}

.final-urgency {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--teal);
  text-transform: uppercase
}

.final-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink3);
  max-width: 960px;
  margin: 0 auto 100px
}

.final-card {
  background: var(--ink2);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  border-top: 4px solid transparent;
  transition: background .3s, box-shadow .3s;
  position: relative;
}

.final-card.primary {
  border-top-color: var(--teal);
  background: rgba(0, 196, 161, .04)
}

.final-card:hover {
  background: var(--ink3)
}

.final-card.primary:hover {
  background: rgba(0, 196, 161, .08)
}

.final-card-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 20px
}

.final-card-label.teal {
  color: var(--teal)
}

.final-card-label.gold {
  color: var(--gold)
}

.final-card h3 {
  font-size: 22px;
  font-weight: 500;
  color: var(--canvas);
  margin-bottom: 16px;
  letter-spacing: .02em
}

.final-card p {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.75;
  flex-grow: 1;
  margin-bottom: 28px
}

.final-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 20px;
  transition: all .3s;
  /* cursor: none; removed */
  margin-bottom: 10px;
  border: 2px solid transparent;
}

.final-card-btn.teal-fill {
  background: var(--deep-teal);
  color: var(--canvas);
  border: 1px solid var(--deep-teal);
}

.final-card-btn.teal-fill:hover {
  background: var(--teal2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 196, 161, .28)
}

.final-card-btn.teal-outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal)
}

.final-card-btn.teal-outline:hover {
  background: rgba(0, 196, 161, .08);
  transform: translateY(-2px)
}

.final-card-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: rgba(248, 247, 244, .35);
  text-align: center;
  letter-spacing: .08em;
  line-height: 1.6
}

.brand-close {
  text-align: center;
  padding: 0 0 40px
}

.brand-close .line1 {
  font-size: 22px;
  font-weight: 300;
  color: var(--slate-on-dark);
  letter-spacing: .04em;
  margin-bottom: 16px
}

.brand-close .line2 {
  font-size: 36px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: .06em
}

/* ── FOUNDER STRIP ── */
.founder-strip {
  background: var(--ink2);
  border-top: 1px solid var(--ink3);
  padding: 64px 80px
}

.founder-inner {
  max-width: 900px;
  margin: 0 auto
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 48px
}

.founder-card {
  display: flex;
  gap: 20px;
  align-items: flex-start
}

.founder-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: var(--ink);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-avatar .initials {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--teal)
}

.modal-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--canvas);
  /* Increased contrast from var(--slate-on-dark) */
  margin-bottom: 6px;
  display: block;
}

.founder-name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--canvas);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px
}

.founder-bio {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate-on-dark);
  line-height: 1.7
}

.founder-shared {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--ink3)
}

.founder-shared-quote {
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: var(--teal);
  letter-spacing: .02em;
  line-height: 1.6
}

/* ── FOOTER ── */
.footer {
  background: #080E14;
  padding: 64px 80px 36px;
  border-top: 1px solid var(--ink2)
}

/* ── FINAL CTA REDESIGN (D33) ── */
.final-resolve {
  max-width: 1000px;
  margin: 0 auto;
}

.final-main-card {
  background: var(--ink2);
  border: 1px solid var(--ink3);
  padding: 2px;
  margin-bottom: 24px;
}

.final-main-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--ink);
  padding: 48px;
  gap: 48px;
  align-items: center;
}

.final-main-h {
  font-size: 32px;
  font-weight: 400;
  color: var(--canvas);
  line-height: 1.2;
  margin-bottom: 20px;
}

.final-main-p {
  font-size: 15px;
  color: var(--slate);
  margin-bottom: 32px;
  line-height: 1.7;
}

.final-main-btn {
  display: inline-flex;
  background: var(--teal);
  color: var(--ink);
  padding: 18px 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.final-main-btn:hover {
  background: var(--teal2);
  transform: translateY(-2px);
}

.final-main-btn:active {
  transform: scale(0.98);
}

.final-main-p {
  font-size: 14px;
  color: var(--slate-on-dark);
  margin-bottom: 28px;
}

.final-main-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--slate-on-dark);
  letter-spacing: .08em;
}

.mini-terminal {
  background: rgba(15, 25, 35, .8);
  border: 1px solid var(--ink3);
  padding: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

.mini-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.mini-line {
  margin-bottom: 8px;
  color: var(--teal);
}

.mini-line.gold {
  color: var(--gold);
}

.final-sub-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: var(--s-3xl);
  /* Added gap after boxes */
}

.final-sub-card {
  background: var(--ink2);
  padding: 32px;
  border: 1px solid var(--ink3);
  display: flex;
  flex-direction: column;
}

.final-sub-card h3,
.final-sub-card h4 {
  font-size: 16px;
  color: var(--canvas);
  margin-bottom: 12px;
}

.final-sub-card p {
  font-size: 13px;
  color: var(--slate-on-dark);
  margin-bottom: 24px;
  line-height: 1.6;
}

.final-sub-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: auto;
}

.final-sub-link:hover {
  color: var(--canvas);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 80px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto
}

.footer-brand-tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--teal);
  margin-top: 8px;
  margin-bottom: 24px
}

.footer-brand-quote {
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  color: var(--slate-on-dark);
  line-height: 1.7;
  max-width: 240px
}

.footer-col h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 16px
}

.footer-col ul {
  list-style: none;
  padding: 0
}

.footer-col ul li {
  margin-bottom: 8px
}

.footer-col ul a {
  font-size: 12px;
  font-weight: 300;
  color: var(--slate-on-dark);
  text-decoration: none;
  transition: color .2s
}

.footer-col ul a:hover {
  color: var(--teal)
}

.footer-contact-item {
  font-size: 12px;
  font-weight: 300;
  color: var(--teal);
  margin-bottom: 6px;
  text-decoration: none;
  display: block;
  transition: color .2s
}

.footer-contact-item.plain {
  color: var(--slate-on-dark);
  cursor: none
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px
}

.footer-social a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  transition: color .2s;
  text-decoration: none;
}

.footer-social a:hover {
  color: var(--teal)
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-legal {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--slate-on-dark)
}

.footer-legal a {
  color: var(--slate-on-dark);
  text-decoration: none
}

.footer-legal a:hover {
  color: var(--teal)
}

.footer-legal .sep {
  margin: 0 8px;
  color: var(--ink3)
}

.footer-built {
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: var(--teal)
}

/* ── FOOTER NEWSLETTER ── */
.footer-newsletter {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer-newsletter-label {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
}

/* wrap holds form + status so status appears below without disturbing the row */
.footer-newsletter-wrap {
  flex: 1;
  min-width: 0;
  max-width: 400px;
}

.footer-newsletter-form {
  /* transparent wrapper — layout handled by .footer-newsletter-field */
}

/* ── pill container ── */
.footer-newsletter-field {
  display: flex;
  align-items: center;
  background: rgba(248,247,244,.05);
  border: 1px solid rgba(248,247,244,.12);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  transition: border-color .25s;
}

.footer-newsletter-field:focus-within {
  border-color: rgba(0,196,161,.45);
}

.footer-newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 8px 6px 0;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 11px;
  color: var(--canvas);
  outline: none;
  min-width: 0;
}

.footer-newsletter-input::placeholder {
  color: rgba(203,213,225,.28);
}

/* circular button sits flush inside the pill */
.footer-newsletter-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}

.footer-newsletter-btn:hover {
  background: var(--teal);
  transform: scale(1.06);
}

.footer-newsletter-btn:active {
  transform: scale(.95);
}

.footer-newsletter-btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

.footer-newsletter-status {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: .05em;
  margin-top: 8px;
  padding-left: 20px;
  display: block;
}

.footer-newsletter-status.ok { color: var(--teal) }
.footer-newsletter-status.err { color: #FF6B6B }

.footer-newsletter-micro {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: .04em;
  color: rgba(203,213,225,.18);
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-newsletter-micro a {
  color: rgba(203,213,225,.18);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-newsletter-micro a:hover {
  color: var(--teal);
}

/* ── STICKY CTA ── */
.sticky-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--ink2);
  border: 1px solid var(--ink3);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1100;
  transform: translateY(100px);
  opacity: 0;
  transition: all .4s var(--tr);
  font-size: 13px;
  font-weight: 300;
}

.sticky-cta.show {
  transform: none;
  opacity: 1
}

.sticky-cta span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--canvas)
}

.sticky-cta span .bolt {
  color: var(--gold)
}

.sticky-btn {
  background: var(--deep-teal);
  color: var(--canvas);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 18px;
  transition: background .2s;
  /* cursor: none; removed */
  white-space: nowrap;
}

.sticky-btn:hover {
  background: var(--teal2)
}

.sticky-close {
  font-size: 16px;
  color: var(--slate-on-dark);
  /* cursor: none; removed */
  padding: 2px;
  line-height: 1;
  background: none;
  border: none
}

.sticky-close:hover {
  color: var(--canvas)
}

/* ── MODALS ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 20, .9);
  backdrop-filter: blur(8px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
  opacity: 1;
  pointer-events: all
}

.modal {
  background: var(--ink2);
  border: 1px solid var(--ink3);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 48px;
}

.modal-cohort {
  border-color: rgba(242, 166, 35, .3)
}

/* ── BUILD / COHORT MODAL: form readability overrides ── */
.modal-cohort .form-field-group {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.modal-cohort .modal-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  min-width: unset;
  display: block;
  margin-bottom: 0;
}

.modal-cohort .modal-label span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
}

.modal-cohort .demo-form {
  gap: 16px;
}

.modal-cohort .demo-form input,
.modal-cohort .demo-form select {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--canvas);
  font-size: 14px;
  padding: 13px 16px;
  border-radius: 3px;
  width: 100%;
}

.modal-cohort .demo-form input:focus,
.modal-cohort .demo-form select:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 196, 161, .12);
}

.modal-cohort .demo-form input::placeholder {
  color: rgba(248, 247, 244, 0.35);
  font-size: 13px;
}

.modal-cohort .form-micro {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.65;
  color: rgba(248, 247, 244, 0.5);
  opacity: 1;
  margin-top: 16px;
}

.modal-cohort .modal h2,
.modal-cohort h2 {
  font-size: 22px;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 22px;
  color: var(--slate);
  /* cursor: none; removed */
  line-height: 1;
  background: none;
  border: none
}

.modal-close:hover {
  color: var(--canvas)
}

.modal-accent {
  width: 40px;
  height: 2px;
  background: var(--teal);
  margin-bottom: 16px
}

.modal-accent.gold {
  background: var(--gold)
}

.modal h2 {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: .05em;
  margin-bottom: 8px;
  color: var(--canvas);
}

.modal .modal-lead {
  font-size: 14px;
  font-weight: 300;
  color: rgba(248, 247, 244, 0.7);
  line-height: 1.7;
  margin-bottom: 32px
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 12px
}

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

.demo-form input,
.demo-form select,
.demo-form textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--canvas);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 14px 16px;
  width: 100%;
  border-radius: 4px;
  transition: all .2s ease;
  outline: none;
  /* cursor: none; removed */
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: rgba(248, 247, 244, 0.5);
}

.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.08);
}

.demo-form select {
  /* cursor: none; removed */
  appearance: none
}

.demo-form select option {
  background: var(--ink2)
}

.form-submit {
  background: var(--teal);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px;
  margin-top: 8px;
  /* cursor: none; removed */
  border: none;
  transition: all .3s;
  width: 100%;
}

.form-submit:hover {
  background: var(--teal2);
  transform: translateY(-2px)
}

.form-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  text-align: center;
  color: var(--slate);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 8px
}

.cohort-benefits-modal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px
}

.cohort-benefits-modal div {
  font-size: 13px;
  font-weight: 300;
  color: var(--teal);
  padding-left: 4px
}

.btn-gold-submit {
  background: var(--gold);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px;
  /* cursor: none; removed */
  border: none;
  transition: all .3s;
  width: 100%;
}

.btn-gold-submit:hover {
  background: var(--gold2);
  transform: translateY(-2px)
}

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--teal);
  color: var(--ink);
  padding: 12px 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 500;
  text-transform: uppercase;
  z-index: 9999;
  opacity: 0;
  transition: all .4s var(--tr);
  pointer-events: none;
  border-radius: 2px;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--deep-teal);
  color: var(--canvas);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 28px;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  /* cursor: none; removed */
}

.btn-primary:hover {
  background: var(--teal2);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 196, 161, .18)
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(248, 247, 244, .25);
  color: var(--canvas);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 28px;
  transition: all .35s;
  /* cursor: none; removed */
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-3px)
}

/* ── READABILITY SYSTEM — WCAG AA ── */
/* Minimum font sizes enforced */
.card-micro,
.stat-source,
.metric-lbl,
.bb-lbl,
.term-label,
.cp-bar-title,
.cp-desc-cat,
.footer-col h4,
.footer-legal,
.audit-micro,
.cohort-micro,
.founding-micro,
.final-card-micro,
.mode-switch,
.step-time,
.obj-what,
.obj-honest,
.testers-label {
  font-size: 11px !important;
}

/* Dark section contrast overrides */
[data-section="dark"] .stat-source,
[data-section="dark"] .metric-lbl,
[data-section="dark"] .term-label,
[data-section="dark"] .footer-legal,
[data-section="dark"] .bb-lbl,
[data-section="dark"] .cp-desc-cat,
[data-section="dark"] .founding-micro {
  color: var(--slate-on-dark) !important;
}

/* Dark slate on light bg — bump to pass AA */
.hero-body {
  color: var(--slate-on-light)
}

/* Light section contrast overrides (UI STANDARD) */
[data-section="light"] .section-h2,
[data-section="light"] .section-sub,
[data-section="light"] .faq-question,
[data-section="light"] .faq-answer-inner {
  color: var(--ink) !important;
}

[data-section="light"] .section-kicker {
  color: var(--teal3) !important;
}

[data-section="light"] .faq-item {
  border-bottom-color: rgba(15, 25, 35, 0.12) !important;
}

.s-light .s-lead,
.s-light p {
  color: var(--slate-on-light)
}

/* Nav links on light bg — full contrast */
.nav.on-light .nav-links a {
  color: #1C2D3E;
  font-weight: 500
}

.nav.on-light .nav-signin {
  color: #2B4260
}

/* Scrolled nav — readable against dark pill */
.nav.scrolled .nav-links a {
  color: var(--slate-on-dark);
  font-weight: 400
}

.nav.scrolled .nav-links a:hover {
  color: var(--canvas)
}

.nav.scrolled .nav-signin {
  color: var(--slate-on-dark)
}

/* Body text sizing */
.step-body {
  font-size: 15px;
  color: var(--slate-on-dark)
}

.obj-a,
.obj-q {
  font-size: 14px;
  line-height: 1.82
}

.audit-card p,
.honesty-block p,
.tester-body,
.tester-quote,
.bio-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate-on-light);
}

.cp-output {
  font-size: 11px !important
}

.cp-desc-text {
  font-size: 13px
}

/* Roadmap readable */
.roadmap-list.coming li {
  color: var(--slate-on-dark)
}

/* ── LIFESTYLE ILLUSTRATION ── */
.lifestyle-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: rgba(255, 255, 255, .1);
  margin: 64px auto 0;
  max-width: 1000px;
  /* Slight increase for better fit */
  width: 100%;
}

.lifestyle-panel {
  background: var(--canvas);
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.lifestyle-panel.dark-panel {
  background: var(--ink2)
}

.lifestyle-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}

.lifestyle-label.red {
  color: #DC2626;
  /* Slightly brighter red for panel contrast */
}

.lifestyle-label.teal {
  color: #10B981;
  /* Brighter teal for high visibility */
}

.lifestyle-title {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.3
}

.lifestyle-panel.dark-panel .lifestyle-title {
  color: var(--canvas)
}

.lifestyle-body {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--slate-on-light)
}

.lifestyle-panel.dark-panel .lifestyle-body {
  color: var(--slate-on-dark)
}

/* Problem illustration — CSS drawn dashboard chaos */
.chaos-visual {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.chaos-dash {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 8px;
  position: relative;
  overflow: hidden;
}

.chaos-dash-bar {
  height: 3px;
  border-radius: 2px;
  margin-bottom: 6px
}

.chaos-dash-line {
  height: 2px;
  border-radius: 2px;
  background: #E2E8F0;
  margin-bottom: 4px;
  opacity: .7
}

.chaos-dash-line.w40 {
  width: 40%
}

.chaos-dash-line.w65 {
  width: 65%
}

.chaos-dash-line.w80 {
  width: 80%
}

.chaos-dash-line.w55 {
  width: 55%
}

.chaos-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: #94A3B8;
  letter-spacing: .08em
}

.chaos-red-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E24B4A;
  animation: chaosBlip 1.5s ease-in-out infinite;
}

@keyframes chaosBlip {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: 1
  }
}

.chaos-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(226, 75, 74, .06);
}

.chaos-x::after {
  content: '↕';
  font-size: 18px;
  color: rgba(226, 75, 74, .4)
}

/* Solution illustration — single clean Zephra view */
.zephra-visual {
  margin-top: 24px;
  background: #0A1520;
  border: 1px solid rgba(0, 196, 161, .3);
  border-radius: 4px;
  padding: 16px;
  font-family: 'IBM Plex Mono', monospace;
}

.zv-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px
}

.zv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%
}

.zv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.zv-label {
  font-size: 9px;
  color: #6B7280;
  letter-spacing: .06em;
  flex: 1
}

.zv-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--teal)
}

.zv-bar-track {
  flex: 2;
  height: 3px;
  background: #1C2D3E;
  border-radius: 2px
}

.zv-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--teal);
  transition: width 1.2s cubic-bezier(.25, 1, .5, 1)
}

.zv-decision {
  background: rgba(0, 196, 161, .08);
  border: 1px solid rgba(0, 196, 161, .2);
  padding: 8px 10px;
  margin-top: 10px;
  font-size: 9px;
  color: var(--canvas);
  /* Increased from --teal for readability on dark */
  line-height: 1.7;
}

/* ── ENHANCED ANIMATIONS ── */
/* Float animation for stat numbers */
@keyframes floatUp {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-6px)
  }
}

.stat-card:nth-child(1) .stat-num {
  animation: floatUp 4s ease-in-out infinite
}

.stat-card:nth-child(2) .stat-num {
  animation: floatUp 4s 0.8s ease-in-out infinite
}

.stat-card:nth-child(3) .stat-num {
  animation: floatUp 4s 1.6s ease-in-out infinite
}

.stat-card:nth-child(4) .stat-num {
  animation: floatUp 4s 2.4s ease-in-out infinite
}

/* Glowing teal border pulse on capability panel */
.cap-panel.active .cp-screen {
  animation: screenGlow 3s ease-in-out infinite;
}

@keyframes screenGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 transparent
  }

  50% {
    box-shadow: 0 0 20px rgba(0, 196, 161, .12)
  }
}

/* Typewriter cursor in terminal */
.term-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--teal);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink .9s step-end infinite;
}

/* Step number count-up visual */
.step-num {
  position: relative;
}


/* Roadmap tile grid */
.roadmap-live-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 16px;
}

.rl-tile {
  background: rgba(0, 196, 161, .06);
  border: 1px solid rgba(0, 196, 161, .15);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 300;
  color: var(--canvas);
  line-height: 1.5;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}

.rl-tile.lit {
  opacity: 1;
  transform: none
}

.rl-tile::before {
  content: '●';
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 7px;
  color: var(--success)
}

/* Section entrance line draw */
.section-enter-line {
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 0.8s var(--tr);
  margin-bottom: 32px;
}

.section-enter-line.visible {
  width: 48px
}

/* Center alignment for centered sections */
.problem-section .section-enter-line,
.brain-identity .section-enter-line,
.how-header .section-enter-line,
.how-info .section-enter-line,
.final-section .section-enter-line,
.audience-section .section-enter-line,
.cohort-section .section-enter-line,
.objections-section .section-enter-line,
.obj-header .section-enter-line {
  margin-left: auto !important;
  margin-right: auto !important;
}

.brain-identity .s-label,
.objections-section .s-label,
.cohort-section .s-label,
.audience-section .s-label {
  text-align: center;
  display: block;
}

/* Floating badge on hero */
.hero-float-badge {
  position: absolute;
  bottom: 60px;
  right: 20px;
  background: var(--ink2);
  border: 1px solid rgba(0, 196, 161, .3);
  padding: 12px 16px;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--teal);
  animation: float 4s ease-in-out infinite;
  display: none;
  /* hidden until terminal renders fully */
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

/* Card entrance scale */
.matrix-card {
  transform-origin: center bottom
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.matrix-card.visible {
  animation: cardIn .65s var(--tr) both
}

.matrix-card:nth-child(2).visible {
  animation-delay: .12s
}

.matrix-card:nth-child(3).visible {
  animation-delay: .24s
}

/* Tester card stagger */
.tester-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--tr), transform .6s var(--tr);
}

.tester-card.vis {
  opacity: 1;
  transform: none
}

.tester-card:nth-child(2) {
  transition-delay: .12s
}

.tester-card:nth-child(3) {
  transition-delay: .24s
}

/* Objection card hover */
.obj-card {
  transition: border-color .25s, transform .25s var(--tr);
}

.obj-card:hover {
  transform: translateX(4px);
  border-color: rgba(0, 196, 161, .35);
}

/* Animated underline for section labels */
.s-label::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--teal);
  transition: width .6s var(--tr) .2s;
  margin-top: 4px;
}

[style*="text-align:center"] .s-label::after,
[style*="text-align: center"] .s-label::after,
.s-label-center::after,
.audience-section .s-label::after,
.audit-section .s-label::after,
.proof-section .s-label::after,
.problem-section .s-label::after,
.brain-identity .s-label::after,
.how-header .s-label::after,
.objections-section .s-label::after,
.cohort-section .s-label::after,
.final-section .s-label::after {
  margin-left: auto;
  margin-right: auto;
}

.s-label.anim-done::after {
  width: 32px
}

/* Cohort big number pulse */
@keyframes countPulse {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.04)
  }

  100% {
    transform: scale(1)
  }
}

.cohort-big.pulsed {
  animation: countPulse .4s ease-out
}

/* ── WEBGL SECTION INDICATORS ── */
/* Each section gets a subtle coloured left border when WebGL transitions */
[data-webgl="hero"] {
  border-left: none
}

[data-webgl="chaos"] {
  border-left: none
}

[data-webgl="neural"] {
  border-left: none
}

[data-webgl="data"] {
  border-left: none
}

[data-webgl="converge"] {
  border-left: none
}

/* ── READABILITY: DARK SECTION TEXT ── */
.problem-section .s-label {
  color: var(--teal) !important;
}

.problem-section .problem-h2 {
  color: var(--canvas) !important;
}

.problem-section .pi-line1 {
  color: var(--canvas) !important;
  font-size: clamp(22px, 3vw, 40px)
}

.problem-section .pi-line2 {
  font-size: clamp(22px, 3vw, 44px)
}

/* ── METRIC LABEL SIZES ── */
.metric-lbl {
  font-size: 9px !important
}

.cp-metric-lbl {
  font-size: 9px !important;
  letter-spacing: .1em
}

/* ── BUTTON READABILITY ── */
.how-cta-primary {
  font-size: 12px;
  padding: 17px 44px
}

.audit-btn-primary {
  font-size: 12px
}

.final-card-btn {
  font-size: 11px
}

.card-cta {
  font-size: 11px
}

/* ── SECTION H2 CONTRAST ── */
.s-canvas .s-h2,
.problem-h2 {
  color: var(--ink) !important
}

.how-h2,
.audit-h2,
.proof-h2,
.obj-h2,
.final-h2,
.brain-payoff {
  color: var(--canvas) !important;
}

/* ── FOOTER READABILITY ── */
.footer-col ul a {
  font-size: 13px;
  color: var(--slate-on-dark)
}

.footer-col ul a:hover {
  color: var(--teal)
}

.footer-contact-item {
  font-size: 13px
}

.footer-brand-quote {
  font-size: 13px;
  color: var(--slate-on-dark)
}

.footer-built {
  font-size: 12px
}

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .cap-layout {
    grid-template-columns: 240px 1fr
  }

  .hero-inner {
    grid-template-columns: 1fr 420px;
    gap: 48px
  }
}

@media(max-width:900px) {
  .hero-inner {
    grid-template-columns: 1fr
  }

  /* Fix specificity: .hero-section .hero-inner (0,2,0) overrides .hero-inner (0,1,0).
     Match specificity here so mobile single-column wins. */
  .hero-section .hero-inner {
    grid-template-columns: 1fr
  }

  .hero-right {
    display: none
  }

  /* first-timer callout spans full width when hero-right is hidden */
  #first-timer-hero {
    grid-column: 1 / -1
  }

  .cap-layout {
    grid-template-columns: 1fr
  }

  .cap-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    background: var(--ink2)
  }

  .cap-tab {
    border-bottom: none;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 14px 18px
  }

  .cap-tab.active {
    border-bottom-color: var(--teal);
    border-left: none
  }

  .cap-panels {
    min-height: auto
  }
}

@media(max-width:768px) {

  .section,
  .hero-section,
  .problem-section,
  .brain-section,
  .how-section,
  .audit-section,
  .proof-section,
  .obj-section,
  .final-section {
    padding: 80px 24px
  }

  .audience-section {
    padding: 80px 24px 0
  }

  .audit-band {
    flex-direction: column;
    padding: 28px 24px;
    text-align: center
  }

  .matrix-grid,
  .audit-cards,
  .tester-cards,
  .final-cards {
    grid-template-columns: 1fr
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr
  }

  .roadmap-cols {
    grid-template-columns: 1fr
  }

  .roadmap-cols>div+div {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--ink3);
    padding-top: 40px;
    margin-top: 40px
  }

  .obj-card {
    grid-template-columns: 1fr
  }

  .obj-left {
    border-right: none;
    border-bottom: 1px solid var(--ink3)
  }

  .founding-block {
    grid-template-columns: 1fr;
    text-align: center
  }

  .founder-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-newsletter {
    flex-wrap: wrap;
    gap: 14px 20px;
    padding: 20px 0;
    margin-bottom: 28px;
  }

  .footer-newsletter-wrap {
    flex: 1 1 220px;
    max-width: 100%;
  }

  .footer-newsletter-micro {
    flex-basis: 100%;
    white-space: normal;
  }

  .footer,
  .founder-strip {
    padding: 48px 24px
  }

  .nav {
    padding: 12px 24px
  }

  /* Mobile Nav Logic */
  .nav-mobile-toggle {
    display: flex
  }

  .nav-links,
  .nav-signin {
    display: none
  }

  .mode-cards {
    grid-template-columns: 1fr
  }

  .cohort-momentum {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .pi-row {
    flex-direction: column;
    gap: 32px
  }

  .pi-divider {
    display: none
  }

  .reasoning-callout {
    padding: 32px 28px
  }
}

.footer-link-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.lifestyle-caption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  margin-top: 100px;
  margin-bottom: 16px;
}

@media(max-width: 900px) {

  .cap-tab-cat,
  .lifestyle-label,
  .lifestyle-caption {
    font-size: 11px !important;
    letter-spacing: .15em !important;
  }
}

.benefit-item {
  padding-left: 32px !important;
  position: relative;
  font-size: 14px;
  font-weight: 300;
  color: var(--canvas) !important;
  line-height: 1.75;
  margin-bottom: 12px;
}

.benefit-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}


/* ── MOBILE AUDIT (D34) ── */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .hero-left {
    align-items: center;
    border-left: none;
    padding-left: 0;
  }

  .hero-h1 {
    font-size: 36px;
  }

  .hero-sub {
    margin: 0 auto 32px;
  }

  .hero-ctas {
    align-items: center;
  }

  .hero-demo-link {
    align-self: center;
  }

  .matrix-grid,
  .audit-cards,
  .stats-grid,
  .tester-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 64px 24px;
  }

  .nav {
    padding: 12px 24px;
  }

  .nav-links {
    display: none;
  }

  /* Hide on mobile for simplicity */
  .matrix-grid,
  .audit-cards,
  .stats-grid,
  .tester-cards {
    grid-template-columns: 1fr;
  }

  .final-main-inner {
    grid-template-columns: 1fr;
    padding: 32px;
    text-align: center;
  }

  .final-main-btn {
    width: 100%;
    justify-content: center;
  }

  .final-sub-actions {
    grid-template-columns: 1fr;
  }

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

  .cohort-momentum {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .obj-card {
    grid-template-columns: 1fr;
  }

  .obj-left {
    border-right: none;
    border-bottom: 1px solid var(--ink3);
  }

  .final-h2 {
    font-size: 28px;
  }

  .card-quote {
    min-height: auto !important;
  }

  .hero-btn-primary {
    width: 100%;
    align-self: stretch;
  }

  /* Fix hero h1 size — .hero-section .hero-h1 has clamp(34px,...) globally;
     match specificity so this mobile size wins */
  .hero-section .hero-h1 {
    font-size: clamp(24px, 7vw, 28px);
    line-height: 1.15;
  }

  /* Remove inner horizontal padding — outer section already has 24px */
  .hero-inner {
    padding: 0;
  }

  /* Hero section: reduce top padding (nav is ~60px) */
  .hero-section {
    padding-top: 88px;
  }

  /* ── PROBLEM / COMPARISON SECTION ── */

  /* Stack the two panels vertically on mobile */
  .lifestyle-wrap {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 32px;
  }

  /* Reduce panel padding */
  .lifestyle-panel {
    padding: 28px 20px;
  }

  /* Larger label text for readability */
  .lifestyle-label {
    font-size: 9px;
    letter-spacing: .18em;
    margin-bottom: 14px;
  }

  /* Larger title on mobile */
  .lifestyle-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* Slightly smaller body text */
  .lifestyle-body {
    font-size: 13px;
    line-height: 1.65;
  }

  /* Chaos grid: keep 2 cols but give them breathing room */
  .chaos-visual {
    margin-top: 20px;
    gap: 6px;
  }

  .chaos-dash {
    padding: 10px 8px 8px;
  }

  .chaos-label {
    font-size: 7px;
    letter-spacing: .06em;
    display: block;
    margin-bottom: 6px;
  }

  /* Zephra visual: fix row layout so label + bar + value sit properly */
  .zephra-visual {
    margin-top: 20px;
    padding: 14px 12px;
  }

  .zv-row {
    display: grid;
    grid-template-columns: 80px 1fr 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .zv-label {
    font-size: 8px;
    letter-spacing: .05em;
    line-height: 1.3;
    flex: unset;
    white-space: normal;
    color: #94A3B8;
  }

  .zv-bar-track {
    flex: unset;
    min-width: 0;
    width: 100%;
  }

  .zv-val {
    font-size: 10px;
    text-align: right;
    white-space: nowrap;
  }

  /* Decision text: word-wrap and font */
  .zv-decision {
    font-size: 9px;
    line-height: 1.8;
    padding: 10px 12px;
    word-break: break-word;
    margin-top: 12px;
  }

  /* Caption above the two panels */
  .lifestyle-caption {
    font-size: 9px;
    letter-spacing: .18em;
    margin-top: 48px;
    margin-bottom: 0;
  }
}

/* Nav Link Active State (D29) */
.nav-links a.active {
  color: var(--teal) !important;
}

.nav-links a.active::after {
  width: 100% !important;
}

@media(max-width: 480px) {
  .nav-mobile-toggle {
    display: flex;
  }
}

/* ════════════════════════════════════
   HERO MOBILE METRICS (D25)
════════════════════════════════════ */
.hero-mobile-metrics {
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--ink3);
  border-bottom: 1px solid var(--ink3);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
}

.hmm-track {
  display: inline-flex;
  animation: hmmMarquee 30s linear infinite;
}

.hmm-item {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--slate-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 40px;
  display: flex;
  align-items: center;
}

.hmm-item .dot {
  width: 4px;
  height: 4px;
  background: var(--teal);
  border-radius: 50%;
  margin-right: 10px;
}

@keyframes hmmMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 1023px) {
  .hero-mobile-metrics {
    display: block;
  }
}

/* ════════════════════════════════════
   375px BREAKPOINT (D25)
════════════════════════════════════ */
@media (max-width: 375px) {
  .section {
    padding: 48px 16px;
  }

  .hero-section {
    padding: 80px 16px 32px;
  }

  .hero-h1 {
    font-size: 26px;
  }

  /* Match .hero-section .hero-h1 specificity for 375px */
  .hero-section .hero-h1 {
    font-size: 22px;
    line-height: 1.2;
  }

  .s-h2 {
    font-size: 24px;
  }

  .nav {
    padding: 10px 16px;
  }

  .hero-btn-primary {
    font-size: 12px;
    padding: 13px 18px;
  }

  .card-aud {
    font-size: 16px;
  }
}

.nav-link.active {
  color: var(--teal);
  font-weight: 600;
}

/* ── FAQ SECTION ── */
.faq-section {
  background: var(--canvas);
}

.faq-section .section-head {
  text-align: center;
  margin-bottom: 64px;
}

.faq-stack {
  max-width: 860px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid rgba(15, 25, 35, 0.1);
}

.faq-item:first-child {
  border-top: 1px solid rgba(15, 25, 35, 0.1);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  transition: color 0.2s;
}

.faq-question:hover {
  color: var(--teal2);
}

.faq-q-text {
  flex: 1;
}

.faq-icon {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
  transition: transform 0.25s ease;
  width: 24px;
  text-align: center;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}

.faq-answer.faq-open {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink2);
  padding: 0 48px 20px 0;
  overflow: hidden;
  min-height: 0;
}

.faq-answer-inner strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 640px) {
  .faq-question {
    font-size: 15px;
    padding: 18px 0;
  }

  .faq-answer-inner {
    font-size: 14px;
    padding-right: 16px;
  }
}

/* ─── Mobile Sticky CTA Bar ─── */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--ink2);
  border-top: 1px solid var(--ink3);
  padding: 12px 16px;
  align-items: center;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-sticky-bar.visible {
  transform: translateY(0);
}

.mobile-sticky-text {
  font-size: 12px;
  color: var(--slate-on-dark);
  flex: 1;
  white-space: nowrap;
}

.mobile-sticky-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--canvas);
  background: var(--deep-teal);
  padding: 13px 18px;
  min-height: 44px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.mobile-sticky-close {
  background: none;
  border: none;
  color: var(--slate-on-dark);
  font-size: 14px;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .mobile-sticky-bar {
    display: flex;
  }
}

/* ── INDEX PAGE OVERRIDES ── */
/* ══ INDEX2 TYPOGRAPHY OVERRIDES ══ */

/* H1: larger display size — 32px max is too small for a hero headline */
.hero-section .hero-h1 {
  font-size: clamp(34px, 4vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

/* H1 Line 1 (problem): light weight — understated, almost resigned */
.hero-section .hero-h1 .line1 {
  font-weight: 300;
  color: var(--ink);
  opacity: 0.82;
  white-space: normal;
}

/* H1 Line 2 (solution): bold — confident, authoritative */
.hero-section .hero-h1 .line2 {
  font-weight: 500;
}

/* Team card: fix inverted hierarchy (heading was 10px < body 11px) */
.hero-team-box h3,
.hero-team-box h4 {
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

.hero-team-box p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--slate-on-light) !important;
}

/* Stats: now IBM Plex Mono 600 is loaded — use it */
.hsp-stat-val {
  font-weight: 600 !important;
}

/* ══ INDEX2 CRITICAL LAYOUT OVERRIDES ══
   These override global styles.css rules that break the
   restructured hero with the new longer headline.
═══════════════════════════════════════ */

/* 1. line2 in styles.css forces color:teal2 + white-space:nowrap.
      The nowrap causes line2 to overflow hero-left, busting the
      CSS grid and pushing hero-right off-screen.
      Override both here. */
.hero-h1 .line2 {
  color: var(--ink) !important;
  white-space: normal !important;
}

/* 2. Grid: give left column more weight (copy leads, panel supports) */
.hero-section .hero-inner {
  grid-template-columns: 1.3fr 1fr;
}

/* Prevent hero-left from expanding the grid track on any overflow */
.hero-section .hero-left {
  min-width: 0;
}

/* 3. hero-top-row: stack label + pill vertically (pill under label) */
.hero-top-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}

/* 4. label inside top-row: reset the global margin-bottom */
.hero-top-row .hero-label-top {
  margin-bottom: 0;
}

.hero-founding-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(242, 166, 35, 0.10);
  border: 1px solid rgba(242, 166, 35, 0.38);
  border-radius: 20px;
  padding: 4px 13px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .10em;
  color: var(--gold);
  white-space: nowrap;
}

.hero-founding-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(242, 166, 35, 0.8);
  animation: foundingPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes foundingPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}

/* ── SOCIAL PROOF STRIP ── */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.hsp-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hsp-stat-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}

.hsp-stat-lbl {
  font-size: 10px;
  color: var(--slate);
  letter-spacing: .04em;
  margin-top: 1px;
}

.hsp-divider {
  width: 1px;
  height: 28px;
  background: rgba(75, 85, 99, 0.22);
}

.hsp-stars {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hsp-star-row {
  display: flex;
  gap: 2px;
}

.hsp-star-row svg {
  width: 12px;
  height: 12px;
  fill: var(--gold);
}

.hsp-star-lbl {
  font-size: 10px;
  color: var(--slate);
  letter-spacing: .03em;
}

/* ── CTA button: content-width (not full-width) ── */
.hero-btn-primary--index2 {
  padding: 13px 32px;
  font-size: 14px;
  letter-spacing: .06em;
  border-radius: 10px;
}

/* ── CTA sub-text ── */
.hero-cta-sub {
  font-size: 12px;
  color: var(--slate);
  letter-spacing: .02em;
  margin-top: 8px;
  margin-bottom: 0;
}

/* ── Social proof: sits BELOW CTA with clear gap ── */
.hero-social-proof {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(75, 85, 99, 0.14);
}

/* ── Stars: smaller than metrics, different visual tier ── */
.hsp-star-row svg {
  width: 13px !important;
  height: 13px !important;
}

.hsp-star-lbl {
  font-size: 9px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate) !important;
  opacity: 0.7;
}

.hsp-stat-val {
  font-size: 16px !important;
}

.hsp-stat-lbl {
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── PAUSE BUTTON on panel ── */
.z-pause-btn {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 40;
  background: rgba(6, 4, 18, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 196, 161, 0.22);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  transition: background .2s, border-color .2s;
  color: rgba(203, 213, 225, 0.7);
}

.z-pause-btn:hover {
  background: rgba(0, 196, 161, 0.12);
  border-color: rgba(0, 196, 161, 0.5);
  color: var(--teal);
}

.z-pause-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ── SCENE PROGRESS DOTS ── */
.zdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(148, 163, 184, .28);
  transition: all .38s ease;
  cursor: pointer !important;
}

.zdot.on {
  background: #00C4A1;
  width: 16px;
  border-radius: 3px;
}

/* ── MOBILE FALLBACK RESULTS CARD ── */
.hero-mobile-results {
  display: none;
}

@media (max-width: 767px) {
  .hero-mobile-results {
    display: block;
    margin: 20px 0 0;
    width: 100%;
    align-self: stretch;
    background: linear-gradient(148deg, #0a1520 0%, #0F1923 52%, #0c1825 100%);
    border: 1px solid rgba(0, 196, 161, 0.22);
    border-radius: 14px;
    padding: 20px;
  }

  .hmr-header {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    letter-spacing: .22em;
    color: rgba(0, 196, 161, 0.65);
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .hmr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .hmr-metric {
    background: rgba(0, 196, 161, 0.06);
    border: 1px solid rgba(0, 196, 161, 0.16);
    border-radius: 8px;
    padding: 10px 10px 8px;
    text-align: center;
  }

  .hmr-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #00C4A1;
    display: block;
    line-height: 1.1;
  }

  .hmr-val.gold {
    color: #F2A623;
  }

  .hmr-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 7px;
    color: rgba(148, 163, 184, 0.6);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 3px;
    display: block;
  }

  .hmr-caption {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    color: rgba(148, 163, 184, 0.45);
    letter-spacing: .06em;
    text-align: center;
  }
}


/* ── HERO STORY ANIMATION PANEL ── */
.hero-story-panel {
  position: relative;
  width: 100%;
  height: clamp(340px, 42vh, 410px);
  /* Brand-aligned: dark ink base, no off-brand purple */
  background: linear-gradient(148deg, #0a1520 0%, #0F1923 52%, #0c1825 100%);
  border-radius: 18px;
  border: 1px solid rgba(0, 196, 161, 0.28);
  overflow: hidden;
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 196, 161, 0.06),
    inset 0 1px 0 rgba(0, 196, 161, 0.08),
    0 0 60px rgba(0, 196, 161, 0.05);
}

.hero-story-panel::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  /* Teal corner glow — brand accent, not violet */
  background: radial-gradient(circle, rgba(0, 196, 161, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-story-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* Phase wrapper */
.hsp-phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  opacity: 0;
}

.hsp-phase.active {
  opacity: 1;
}

/* Hide old phases — using new film animation */
#hspChaos,
#hspTransition,
#hspClarity {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  position: absolute;
  inset: 0;
}

/* ── NEW FILM ANIMATION IN HERO ── */
.film-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(61, 0, 0, 0.08) 0%, transparent 100%);
  transition: background 0.8s ease;
  border-radius: 16px;
  z-index: 1;
}

.film-character {
  position: absolute;
  left: 12%;
  top: 0%;
  transform: translateY(-50%);
  width: 100px;
  height: 120px;
  z-index: 20;
}

.film-bird {
  position: absolute;
  width: 70px;
  height: 70px;
  z-index: 25;
  left: 20%;
  top: 38%;
}

.film-screens {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  z-index: 30;
  display: none;
}

.screen-tab {
  position: absolute;
  width: 160px;
  background: rgba(20, 30, 48, 0.8);
  border: 1px solid rgba(100, 150, 200, 0.3);
  border-radius: 4px;
  padding: 8px;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0;
  font-size: 7px;
}

.phone-ui {
  position: absolute;
  width: 140px;
  background: rgba(15, 25, 35, 0.95);
  border: 6px solid rgba(50, 60, 80, 0.8);
  border-radius: 24px;
  padding: 10px;
  text-align: center;
  opacity: 0;
  z-index: 15;
  left: 70%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 7px;
}

@media (max-width: 1024px) {
  .film-character {
    left: 10%;
    width: 100px;
    height: 120px;
  }

  .film-bird {
    left: 20%;
    width: 70px;
    height: 70px;
  }

  .film-screens {
    right: 5%;
    width: 240px;
  }

  .screen-tab {
    width: 200px;
    font-size: 8px;
    padding: 10px;
  }

  .phone-ui {
    width: 180px;
  }
}

/* ── PHASE 1: CHAOS — redesigned ── */
.chaos-ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(226, 75, 74, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(226, 75, 74, 0.06) 0%, transparent 50%);
  pointer-events: none;
  animation: chaosGlow 2.2s ease-in-out infinite alternate;
}

@keyframes chaosGlow {
  from {
    opacity: 0.7;
  }

  to {
    opacity: 1;
  }
}

.chaos-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.chaos-timer-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(226, 75, 74, 0.7);
  display: block;
  margin-bottom: 4px;
}

.chaos-timer-val {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 38px;
  font-weight: 700;
  color: #E24B4A;
  letter-spacing: -.01em;
  line-height: 1;
  text-shadow: 0 0 30px rgba(226, 75, 74, 0.6), 0 0 60px rgba(226, 75, 74, 0.2);
  margin-bottom: 4px;
}

.chaos-timer-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: rgba(148, 163, 184, 0.45);
  letter-spacing: .04em;
}

.chaos-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(226, 75, 74, 0.08);
  border: 1px solid rgba(226, 75, 74, 0.2);
  border-radius: 20px;
  padding: 5px 11px;
  margin-top: 6px;
}

.chaos-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E24B4A;
  box-shadow: 0 0 6px rgba(226, 75, 74, 0.9);
  animation: dotPulse 1s ease-in-out infinite;
}

.chaos-status-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: rgba(226, 75, 74, 0.75);
  letter-spacing: .08em;
}

.chaos-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  position: relative;
  z-index: 2;
}

.chaos-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(10, 20, 32, 0.55);
  border-left: 2px solid var(--pc, #4F8EF7);
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.chaos-row-platform {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 108px;
  flex-shrink: 0;
}

.chaos-row-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px currentColor;
}

.chaos-row-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .1em;
  color: rgba(203, 213, 225, 0.6);
  text-transform: uppercase;
}

.chaos-row-metric {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.crm-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: rgba(248, 247, 244, 0.9);
  letter-spacing: -.01em;
}

.crm-val.flicker {
  animation: valueFlicker 2.8s ease-in-out infinite;
}

.crm-val.flicker2 {
  animation: valueFlicker 2.8s ease-in-out infinite .7s;
}

.crm-val.conflict {
  color: #F2A623;
}

.crm-val.unknown {
  color: rgba(226, 75, 74, 0.8);
  font-size: 14px;
}

@keyframes valueFlicker {

  0%,
  70%,
  100% {
    opacity: 1;
  }

  35% {
    opacity: 0.15;
  }

  37% {
    opacity: 0.85;
  }

  39% {
    opacity: 0.1;
  }

  41% {
    opacity: 1;
  }
}

.crm-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: rgba(148, 163, 184, 0.38);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chaos-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(226, 75, 74, 0.12);
  border: 1px solid rgba(226, 75, 74, 0.28);
  color: rgba(226, 75, 74, 0.85);
  animation: badgePulse 2s ease-in-out infinite;
}

.chaos-badge.warn {
  background: rgba(242, 166, 35, 0.1);
  border-color: rgba(242, 166, 35, 0.28);
  color: rgba(242, 166, 35, 0.85);
}

.chaos-badge.stale {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.25);
  color: rgba(167, 139, 250, 0.7);
}

.chaos-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
}

.chaos-sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 75, 74, 0.22), transparent);
}

.chaos-sep-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7.5px;
  letter-spacing: .12em;
  color: rgba(226, 75, 74, 0.4);
  white-space: nowrap;
  text-transform: uppercase;
}

.chaos-question {
  margin-top: 12px;
  padding: 10px 14px;
  border-top: 1px solid rgba(226, 75, 74, 0.1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.45);
  font-style: italic;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ── PHASE 2: TRANSITION ── */
.hsp-transition-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

.hsp-bird {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 20px rgba(0, 196, 161, 0.5));
}

.hsp-transition-text {
  font-size: 22px;
  font-weight: 300;
  color: var(--canvas);
  text-align: center;
  line-height: 1.4;
  letter-spacing: .02em;
}

.hsp-transition-text span {
  color: var(--teal);
  font-weight: 500;
}

/* ── PHASE 3: CLARITY ── */
.hsp-clarity-header {
  margin-bottom: 16px;
}

.hsp-cl-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsp-cl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(0, 196, 161, 0.8);
  animation: dotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.hsp-cl-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--teal);
  text-transform: uppercase;
}

.hsp-cl-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.hsp-cl-metric {
  background: rgba(0, 196, 161, 0.05);
  border: 1px solid rgba(0, 196, 161, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
}

.hsp-cl-val {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--canvas);
  margin-bottom: 2px;
  font-family: 'IBM Plex Mono', monospace;
}

.hsp-cl-val.teal {
  color: var(--teal);
}

.hsp-cl-lbl {
  display: block;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1.3;
}

.hsp-decisions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsp-dec-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.5);
  margin-bottom: 2px;
}

.hsp-dec-card {
  background: rgba(15, 25, 35, 0.6);
  border: 1px solid rgba(43, 66, 96, 0.8);
  border-left: 2px solid var(--teal);
  border-radius: 6px;
  padding: 10px 12px;
}

.hsp-dec-q {
  font-size: 12px;
  color: rgba(248, 247, 244, 0.85);
  margin-bottom: 8px;
  line-height: 1.4;
}

.hsp-dec-btns {
  display: flex;
  gap: 8px;
}

.hsp-btn-yes {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  background: var(--deep-teal);
  color: var(--canvas);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.hsp-btn-rev {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  background: transparent;
  color: rgba(148, 163, 184, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.hsp-clarity-footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 196, 161, 0.1);
}

.hsp-cf-icon {
  color: var(--teal);
  font-size: 14px;
}

.hsp-cf-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(203, 213, 225, 0.7);
  letter-spacing: .04em;
}

/* ── Progress dots ── */
.hsp-progress {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.hsp-prog-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background .3s, transform .3s;
}

.hsp-prog-dot.on {
  background: var(--teal);
  transform: scale(1.3);
}

@keyframes badgePulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(0.94);
  }
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

/* Mobile: hide animation, show compact metrics row */
@media (max-width: 767px) {
  .hero-story-panel {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — Comprehensive Pass
   Touch targets · Typography · Layout · Conversion · A11y
   Breakpoints: 767px, 480px, 375px, 320px
═══════════════════════════════════════════════════════════ */

/* ── NAV MOBILE TOGGLE: expand touch target to 44×44px ── */
.nav-mobile-toggle {
  padding: 13px 8px;
  /* 18 + 26 = 44px height, 30 + 16 = 46px width */
  margin: -13px -8px;
  /* keep visual size, expand hit area */
}

/* ── STICKY CLOSE: expand touch target to ≥44px ── */
.sticky-close {
  padding: 10px;
}

/* ── MOBILE MENU FOCUS STATE (Accessibility) ── */
.mobile-links a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── 767px BREAKPOINT ADDITIONS ── */
@media (max-width: 767px) {

  /* Hide desktop sticky CTA — mobile-sticky-bar handles it */
  .sticky-cta {
    display: none !important;
  }

  /* Sticky button sizing for touch */
  .sticky-btn {
    font-size: 11px;
    padding: 12px 20px;
    min-height: 44px;
  }

  /* Sticky close touch target */
  .sticky-close {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile sticky text wrap on very narrow screens */
  .mobile-sticky-text {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Modal: remove heavy backdrop blur for performance */
  .modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 14, 20, .96);
  }

  /* Nav scrolled: full-width on mobile (pill style looks odd) */
  .nav.scrolled {
    border-radius: 0;
    left: 0;
    right: 0;
    top: 0;
  }

  /* Modal close touch target */
  .modal-close {
    padding: 10px;
    top: 8px;
    right: 10px;
    font-size: 24px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 480px BREAKPOINT ADDITIONS ── */
@media (max-width: 480px) {

  /* Nav: tighter padding on very narrow screens */
  .nav {
    padding: 10px 16px;
  }

  /* Modal: reduce padding so content has room */
  .modal {
    padding: 32px 20px 24px;
    max-height: 88vh;
  }

  /* Modal overlay: less padding so modal fills more width */
  .modal-overlay {
    padding: 12px;
  }

  /* Mobile menu links: tighter gap on small screens */
  .mobile-links {
    gap: 24px;
  }

  /* Mobile menu links: slightly smaller text on tiny phones */
  .mobile-links a {
    font-size: 24px;
  }

  /* Section padding: tighter on very narrow screens */
  .section {
    padding: 48px 16px;
  }
}

/* ── 375px BREAKPOINT ADDITIONS ── */
@media (max-width: 375px) {

  /* Mobile sticky text: allow wrapping on smallest phones */
  .mobile-sticky-text {
    white-space: normal;
    font-size: 11px;
  }

  /* Mobile sticky button: tighter on tiny screens */
  .mobile-sticky-btn {
    padding: 9px 12px;
    font-size: 9px;
  }
}

/* ── 320px BREAKPOINT (iPhone SE, smallest supported) ── */
@media (max-width: 320px) {
  .modal {
    padding: 24px 14px;
  }

  .modal-overlay {
    padding: 8px;
  }

  .nav {
    padding: 8px 12px;
  }
}

/* ── MOBILE USABILITY: minimum 12px text (Google CWV) ── */
@media (max-width: 768px) {

  .term-label,
  .bb-lbl,
  .card-aud,
  .card-micro,
  .cap-tab-cat,
  .cp-bar-title,
  .cp-btn-approve,
  .cp-btn-mod,
  .cp-desc-cat,
  .cp-bar-pct,
  .cap-tag {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   WHO ZEPHRA IS BUILT FOR — LIGHT MODE TREATMENT
   Design intent: Trust, clarity, warmth. The surrounding site
   is dark-technical — this section "lifts" to signal openness
   and inclusivity. Cards feel like clean editorial tiles.
   Every detail is calibrated for WCAG AA contrast & conversion.
═══════════════════════════════════════════════════════════ */

/* ── SECTION CANVAS ── */
.audience-section {
  background: #F4F6F8 !important;
  /* cool-warm neutral — less stark than pure white */
  padding: 80px 80px 0 !important;
  position: relative;
}

/* Subtle top separator — keeps visual flow from dark section above */
.audience-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, var(--deep-teal) 60%, transparent 100%);
  opacity: 0.6;
}

/* ── SECTION HEADER ── */
.audience-section .s-label {
  color: var(--teal) !important;
  letter-spacing: 0.28em;
}

/* The .section-h2 gets `color: var(--ink)` via inline style already,
   but belt-and-suspenders scoped rule here just in case */
.audience-section .section-h2 {
  color: var(--ink) !important;
}

.audience-section .section-h2 .teal-em {
  color: var(--teal) !important;
}

/* ── GRID SEPARATOR ── */
.audience-section .matrix-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: stretch !important;
  /* Force all cards in a row to have the same height */
  background: transparent !important;
  gap: 28px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

@media (max-width: 960px) {
  .audience-section .matrix-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .audience-section .matrix-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CARD BASE ── */
.audience-section .matrix-card {
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto auto auto !important;
  /* Explicit rows for alignment */
  background: var(--canvas) !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 25, 35, 0.03) !important;
  padding: 32px !important;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.22s cubic-bezier(.16, 1, .3, 1);
}

/* Hover — gentle lift + left teal accent stripe */
.audience-section .matrix-card:hover {
  background: var(--canvas) !important;
  border-color: var(--teal) !important;
  box-shadow: inset 4px 0 0 var(--teal), 0 12px 32px rgba(0, 196, 161, 0.08) !important;
  transform: translateY(-4px);
}

/* ── AUDIENCE BADGE ── */
/* Default: teal pill — inverted from dark-mode white badge */
.audience-section .card-aud {
  background: var(--teal) !important;
  color: #FFFFFF !important;
  border-radius: 3px;
  letter-spacing: 0.18em;
  font-size: 10px;
  padding: 5px 11px;
  box-shadow: 0 2px 8px rgba(0, 196, 161, 0.22);
}

/* On hover: deep teal (maintains contrast) */
.audience-section .matrix-card:hover .card-aud {
  background: var(--deep-teal) !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 12px rgba(0, 143, 122, 0.3);
}

/* ── QUOTE — the voice-of-customer moment ── */
.audience-section .card-quote {
  color: var(--ink) !important;
  /* full contrast — this is the empathy hook */
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  opacity: 0.9;
  min-height: 125px !important;
  /* Standardizes quote area across all cards */
  margin-bottom: 24px !important;
  display: flex;
  align-items: center;
  /* Center quote vertically within the fixed slot */
  text-align: center;
}

/* ── CONSEQUENCE LINE ── */
.audience-section .card-consequence {
  color: var(--slate-on-light) !important;
  /* #1F2937 — strong enough to land the point */
  font-size: 14px;
  line-height: 1.7;
  min-height: 52px !important;
  /* Standardizes the bridge line across cards */
  margin-bottom: 16px !important;
  display: flex;
  align-items: center;
  text-align: center;
}

/* ── ROLE DESCRIPTION ── */
.audience-section .card-role {
  flex-grow: 1 !important;
  /* Expands to push CTA to the bottom */
  color: #374151 !important;
  /* slightly lighter than ink — supporting copy */
  border-top-color: #E5EBF0 !important;
  font-size: 14px;
  line-height: 1.65;
}

/* ── CTA BUTTON (ghost → teal on hover ) ── */
.audience-section .card-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--teal) !important;
  border: 1.2px solid rgba(0, 196, 161, 0.45) !important;
  background: transparent !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 14px 28px !important;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  min-height: 44px;
  margin-bottom: 20px !important;
  /* Space to micro text */
  transition: all 0.25s cubic-bezier(.16, 1, .3, 1);
}

.audience-section .card-cta:hover,
.audience-section .matrix-card:hover .card-cta {
  background: var(--teal) !important;
  color: #000 !important;
  border-color: var(--teal) !important;
  box-shadow: 0 6px 18px rgba(0, 196, 161, 0.25) !important;
  transform: translateY(-1px);
}

/* cohort-trigger variant */
.audience-section .matrix-card .card-cta.cohort-trigger {
  background: transparent !important;
  border: 1px solid rgba(0, 196, 161, 0.4) !important;
  color: var(--teal) !important;
}

.audience-section .matrix-card .card-cta.cohort-trigger:hover,
.audience-section .matrix-card:hover .card-cta.cohort-trigger {
  background: var(--teal) !important;
  color: #000 !important;
  border-color: var(--teal) !important;
}

/* ── MICRO TEXT ── */
.audience-section .card-micro {
  color: #94A3B8 !important;
  /* slate-400 — readable but unobtrusive */
  font-size: 10px !important;
  min-height: 44px !important;
  /* Align even if text wraps, matching CTA height */
  margin-bottom: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── CATCH-ALL CTA CARD ── */
/* Gets a soft teal wash to stand out from white cards */
.audience-section .matrix-card--cta {
  background: linear-gradient(140deg, #EDF9F7 0%, #E4F6F3 100%) !important;
  box-shadow:
    inset 4px 0 0 rgba(0, 196, 161, 0.5),
    inset 0 0 0 1px rgba(0, 196, 161, 0.15) !important;
}

.audience-section .matrix-card--cta:hover {
  background: linear-gradient(140deg, #DCF5F1 0%, #D0F0EC 100%) !important;
  transform: translateY(-2px);
}

.audience-section .matrix-card--cta:hover::after {
  opacity: 0.08;
}

/* ── SHOW MORE TOGGLE BUTTON ── */
.audience-section #rolesToggleWrapper button {
  background: transparent !important;
  border: 1px solid rgba(0, 196, 161, 0.4) !important;
  color: var(--teal) !important;
  font-family: 'IBM Plex Mono', monospace;
}

.audience-section #rolesToggleWrapper button:hover {
  background: rgba(0, 196, 161, 0.07) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 4px 14px rgba(0, 196, 161, 0.12);
}

/* ── SECTION ENTER LINE (decorative accent under label) ── */
.audience-section .section-enter-line {
  background: rgba(0, 196, 161, 0.15) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .audience-section {
    padding: 64px 20px 0 !important;
  }

  .audience-section .matrix-grid {
    border-radius: 8px;
  }
}

@media (max-width: 600px) {
  .audience-section {
    padding: 52px 16px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FROM ZERO TO LIVE CAMPAIGN — LIGHT MODE TREATMENT
   Matches the WHO ZEPHRA IS BUILT FOR section palette exactly.
   Background: #F4F6F8 — same cool-warm neutral, warm consistency.
   Design intent: step-by-step clarity, trust in process, zero friction.
   Every text token remapped from dark-mode to WCAG AA light-mode.
═══════════════════════════════════════════════════════════ */

/* ── SECTION CANVAS ── */
.how-section {
  background: #F4F6F8 !important;
  padding: 100px 80px !important;
  position: relative;
}

/* Top entrance gradient — mirrors audience section top stripe */
.how-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, var(--deep-teal) 60%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* ── HEADER ── */
.how-section .s-label {
  color: var(--teal) !important;
}

.how-section .how-h2 {
  color: var(--ink) !important;
}

.how-section .how-h2 .teal-em {
  color: var(--teal) !important;
}

.how-section .how-sub {
  color: var(--teal) !important;
  /* already teal — explicitly locked */
}

/* ── STEP CONNECTOR LINE — tail dot needs light bg match ── */
.how-section .steps-container::after {
  background: #F4F6F8 !important;
  /* matches section bg so dot "floats" cleanly */
}

/* ── STEP NUMBER BADGE ── */
/* Was: teal text on dark --ink bg. Now: teal text on bright white circle -- premium feel */
.how-section .step-num {
  background: var(--canvas) !important;
  color: var(--teal) !important;
  border: 2px solid rgba(0, 196, 161, 0.25);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 196, 161, 0.12);
}

/* ── STEP HEADING ── */
.how-section .step-h {
  color: var(--ink) !important;
  /* was --canvas */
}

/* ── STEP BODY TEXT ── */
.how-section .step-body {
  color: var(--slate-on-light) !important;
  /* was --slate-on-dark */
}

/* ── STEP INLINE LINK ── */
.how-section .step-body a,
.how-section .step-link {
  color: var(--teal) !important;
  border-bottom: 1px solid rgba(0, 196, 161, 0.4);
  text-decoration: none;
}

.how-section .step-body a:hover,
.how-section .step-link:hover {
  border-bottom-color: var(--teal);
}

/* ── MODE CARDS (Just build it / I want to guide) ── */
.how-section .mode-card {
  background: var(--canvas) !important;
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.06);
}

.how-section .mode-card h4 {
  color: var(--ink) !important;
  /* was --canvas */
}

.how-section .mode-card p {
  color: #374151 !important;
  /* was --slate-on-dark */
}

/* ── MODE SWITCH CAPTION ── */
.how-section .mode-switch {
  color: #94A3B8 !important;
  /* was --slate-on-dark */
}

/* ── STEP DETAIL CALLOUT ── */
.how-section .step-detail {
  border-left-color: rgba(0, 196, 161, 0.35) !important;
  background: rgba(0, 196, 161, 0.04);
  border-radius: 0 4px 4px 0;
  padding: 12px 20px;
}

.how-section .step-detail p {
  color: var(--slate-on-light) !important;
  /* was --canvas */
}

/* ── STEP HIGHLIGHT CHIP ── */
.how-section .step-highlight {
  background: #E8EEF4 !important;
  /* was --ink3 */
  color: var(--ink) !important;
  /* was --canvas */
}

/* ── PAYMENT CALLOUT BANNER ── */
/* Already has teal left border — on light bg this looks great */
.how-section .payment-callout {
  background: rgba(0, 196, 161, 0.06) !important;
  border-left-color: var(--teal) !important;
  box-shadow: 0 2px 12px rgba(0, 196, 161, 0.08);
}

.how-section .payment-callout:hover {
  background: rgba(0, 196, 161, 0.10) !important;
}

.how-section .payment-content p {
  color: var(--ink) !important;
  /* was --canvas */
}

.how-section .payment-content p strong {
  color: var(--teal) !important;
  /* stays teal — good on light */
}

.how-section .payment-sub {
  color: var(--slate) !important;
  /* already slate — explicitly locked */
}

/* ── HONESTY BLOCK (AUDIT CTA) ── */
.how-section .honesty-block {
  background: var(--canvas) !important;
  border-left-color: var(--teal) !important;
  box-shadow: 0 2px 16px rgba(15, 25, 35, 0.07);
}

.how-section .honesty-block h4 {
  color: var(--ink) !important;
  /* was --canvas */
}

.how-section .honesty-block p {
  color: var(--slate-on-light) !important;
  /* was --slate-on-dark */
}

/* ── AUDIT TRACE MINI VISUAL ── */
.how-section .audit-trace-mini {
  background: #F4F6F8 !important;
  /* was --ink2 */
  border-color: #D8E0E8 !important;
  /* was --ink3 */
}

.how-section .trace-line {
  color: var(--slate-on-light) !important;
  font-weight: 500;
}

.how-section .trace-status.lock {
  color: #64748B !important;
  /* Deeper slate for better contrast on white */
  opacity: 1 !important;
  font-weight: 500;
}

/* ── CTA BUTTONS — already good on light, lock them ── */
.how-section .how-cta-primary {
  background: var(--teal) !important;
  color: #000 !important;
  box-shadow: 0 4px 16px rgba(0, 196, 161, 0.25);
}

.how-section .how-cta-link {
  color: var(--teal) !important;
  border-bottom-color: rgba(0, 196, 161, 0.4) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .how-section {
    padding: 64px 20px !important;
  }
}

@media (max-width: 600px) {
  .how-section {
    padding: 52px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LATEST FROM THE INSIGHTS HUB — LIGHT MODE TREATMENT
   Background: #F4F6F8. Reuses matrix-card token logic from the
   audience section for perfect consistency.
═══════════════════════════════════════════════════════════ */

.insights-preview-section {
  background: #F4F6F8 !important;
}

/* Entrance gradient top stripe */
.insights-preview-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, var(--deep-teal) 60%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* Insights Cards */
.insights-preview-section .matrix-card {
  background: var(--canvas) !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 25, 35, 0.03) !important;
}

.insights-preview-section .matrix-card:hover {
  background: var(--canvas) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 12px 32px rgba(0, 196, 161, 0.08) !important;
  transform: translateY(-4px);
}

.insights-preview-section .matrix-grid {
  background: transparent !important;
  gap: 28px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Section specific overrides for responsive padding */
@media (max-width: 768px) {
  .insights-preview-section {
    padding: 64px 20px !important;
  }
}

@media (max-width: 600px) {
  .insights-preview-section {
    padding: 52px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN UNIFORMITY SYSTEM v2  ·  executed 2026-04
   Expert Panel Audit — Standardising padding, heading scale,
   sub-text, body copy, s-label, and alignment across all sections.
   Rule: last stylesheet wins — overrides live above.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. SECTION PADDING — one standard, applied everywhere ──
   Standard: 100px top/bottom · 80px sides
   Exceptions maintained: final-section (extra bottom for sticky CTA)
── */
.how-section,
.audit-section,
.proof-section,
.brain-section {
  padding: 100px 80px;
}

/* Audience gets symmetric padding (was 40px 80px 0) */
.audience-section {
  padding: 100px 80px !important;
}

/* Skeptic was 80px 0 — give it standard horizontal rhythm */
.skeptic-section {
  padding: 100px 80px;
}

/* Testers light break stays a bit tighter — intentional visual contrast */
.testers-section {
  padding: 80px 80px;
}

/* Insights preview */
.insights-preview-section {
  padding: 100px 80px !important;
}


/* ── 2. SECTION H2s — unified headline scale across all sections ──
   Standard: clamp(28px, 3.5vw, 52px) · weight 300 · ls .04em · lh 1.15
   All variants (.how-h2, .proof-h2, .final-h2, .audit-h2) now match .s-h2
── */
.s-h2,
.how-h2,
.audit-h2,
.proof-h2,
.final-h2 {
  font-size: clamp(28px, 3.5vw, 52px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}

/* Section headers get uniform bottom margin to give consistent breathing room */
.how-header,
.audit-header,
.final-header {
  margin-bottom: 72px !important;
}

/* Proof h2 had its own bottom — normalise */
.proof-h2 {
  margin-bottom: 16px !important;
}


/* ── 3. SECTION SUB-TEXT (.how-sub, .audit-sub, .final-sub, .brain-bridge) ──
   Standard: 17px · weight 300 · line-height 1.7 · color slate-on-dark
   was: audit-sub/how-sub = teal; final-sub = slate-on-dark (inconsistent)
── */
.how-sub,
.audit-sub,
.final-sub,
.brain-bridge,
.brain-negatives,
.audience-bridge {
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: var(--slate-on-dark) !important;
}

/* Preserve the teal accent for audit-sub specifically as a design highlight */
.audit-sub {
  color: var(--teal) !important;
}

/* Brain bridge is on dark bg – slate-on-dark is correct */
.brain-bridge {
  max-width: 560px;
}


/* ── 4. BODY COPY LINE-HEIGHT — premium editorial standard ──
   Standard: 1.8 across all descriptive prose
   was: 1.6 (body), 1.75 (some), 1.78 (some), 1.8 (some) — messy
── */
.step-body,
.honesty-block p,
.audit-card p,
.mode-card p,
.brain-negatives,
.s-lead {
  line-height: 1.8 !important;
}

/* Global body text default — sets the baseline for all unclassed <p> */
body {
  line-height: 1.75;
}


/* ── 5. s-LABEL — the section micro-label ──
   Standard: 12px + IBM Plex Mono + 0.26em ls + uppercase + var(--teal)
   was: some sections had slightly different values (9px, 10px, different colours)
── */
.s-label,
.stats-label,
.skeptic-label,
.step-detail-label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}

/* Teal on dark sections */
.s-label,
.step-detail-label {
  color: var(--teal) !important;
}

/* Softer on light sections */
.skeptic-label {
  color: var(--teal) !important;
  letter-spacing: 0.22em !important;
}

/* Stats label gets slightly smaller leading — it's a decorative label */
.stats-label {
  font-size: 10px !important;
  text-align: center;
}


/* ── 6. SECTION HEADER BOTTOM-MARGIN (section intro area) ── */
.brain-identity {
  margin-bottom: 72px !important;
}

.how-header {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* ── 7. CARD TEXT — uniform body inside cards ──
   All card <p> elements: 14px, line-height 1.78, weight 300
── */
.audit-card p,
.mode-card p,
.dark-card p {
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.78 !important;
}

/* Inner card headings: consistent 16px weight 500 */
.audit-card h3,
.mode-card h4 {
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 10px !important;
}


/* ── 8. STEP HEADINGS (How It Works) ── */
.step-h {
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: var(--canvas);
}

.step-body {
  font-size: 15px !important;
  font-weight: 300 !important;
}


/* ── 9. TEAL EMPHASIS — uniform across all section h2s ──
   Ensure .teal-em, the coloured word in headlines, stays consistent
── */
.teal-em {
  color: var(--teal) !important;
  font-weight: inherit;
}


/* ── 10. RESPONSIVE UNIFORMITY — mobile-first section padding ── */
@media (max-width: 1024px) {

  .how-section,
  .audit-section,
  .proof-section,
  .brain-section,
  .audience-section,
  .skeptic-section,
  .testers-section,
  .insights-preview-section {
    padding: 80px 48px !important;
  }
}

@media (max-width: 768px) {

  .how-section,
  .audit-section,
  .proof-section,
  .brain-section,
  .audience-section,
  .skeptic-section,
  .testers-section,
  .insights-preview-section {
    padding: 64px 24px !important;
  }

  .s-h2,
  .how-h2,
  .audit-h2,
  .proof-h2,
  .final-h2 {
    font-size: clamp(24px, 7vw, 36px) !important;
  }

  .how-header,
  .audit-header,
  .final-header,
  .brain-identity {
    margin-bottom: 48px !important;
  }
}

@media (max-width: 480px) {

  .how-section,
  .audit-section,
  .proof-section,
  .brain-section,
  .audience-section,
  .skeptic-section,
  .testers-section,
  .insights-preview-section {
    padding: 52px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   EXPERT PANEL AUDIT — IMPLEMENTATION v1  ·  2026-04
   All findings from multi-discipline panel applied below.
═══════════════════════════════════════════════════════════════════ */


/* ── FINDING 1: BRAIN SECTION — Floating Card Architecture ──
   UI Director: "Brain tab grid uses 1px dark dividers — inconsistent
   with Audience/Insights which use floating separated cards."
   Fix: Apply the same floating-card treatment to cap-layout.
── */
.brain-section .cap-layout {
  background: transparent !important;
  gap: 0 !important;
}

.brain-section .cap-tabs {
  background: var(--canvas);
  border-radius: 12px 0 0 12px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px rgba(15, 25, 35, 0.06);
  overflow: hidden;
}

.brain-section .cap-content {
  background: var(--canvas);
  border-radius: 0 12px 12px 0;
  border: 1px solid #E2E8F0;
  border-left: none;
  box-shadow: 0 4px 20px rgba(15, 25, 35, 0.06);
}

.brain-section .cap-tab {
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.brain-section .cap-tab.active {
  background: rgba(0, 196, 161, 0.04);
  border-left-color: var(--teal);
}

.brain-section .cap-tab-cat {
  color: #64748B;
}

.brain-section .cap-tab.active .cap-tab-cat {
  color: var(--teal);
}

.brain-section .cap-tab-title {
  color: #1F2937;
}

.brain-section .cap-tab.active .cap-tab-title {
  color: var(--ink);
}


/* ── FINDING 2: SHADOW SYSTEM 2.0 — Layered Depth ──
   UI Director: "Replace flat rgba(0,0,0,0.1) shadows with layered
   shadows — creates genuine sense of physical elevation."
── */
.hero-team-card {
  box-shadow:
    0 1px 2px rgba(15, 25, 35, 0.04),
    0 4px 8px rgba(15, 25, 35, 0.06),
    0 12px 24px rgba(15, 25, 35, 0.08) !important;
}

.audience-section .matrix-card,
.insights-preview-section .matrix-card {
  box-shadow:
    0 1px 2px rgba(15, 25, 35, 0.03),
    0 4px 12px rgba(15, 25, 35, 0.04),
    0 8px 24px rgba(15, 25, 35, 0.04) !important;
}

.audience-section .matrix-card:hover,
.insights-preview-section .matrix-card:hover {
  box-shadow:
    0 2px 4px rgba(0, 196, 161, 0.04),
    0 8px 20px rgba(0, 196, 161, 0.06),
    0 20px 40px rgba(0, 196, 161, 0.08) !important;
}


/* ── FINDING 3: HERO GHOST BUTTON — Visibility on Light Bg ──
   Conversion Architect: "Ghost button border is almost invisible on
   the light hero background — needs stronger presence."
── */
.hero-btn-ghost {
  border: 2px solid rgba(15, 25, 35, 0.35) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  background: rgba(248, 247, 244, 0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-btn-ghost:hover {
  border-color: var(--teal) !important;
  color: var(--teal3) !important;
  background: rgba(0, 196, 161, 0.06) !important;
  transform: translateY(-2px);
}

/* Hero CTAs row — add flex alignment and breathing room */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px !important;
  flex-wrap: wrap;
  margin-bottom: 12px !important;
}


/* ── FINDING 4: HERO CTA SUB-LINE — Refinement ──
   Consumer Psychologist: "Sub-line 'Free · No credit card' 
   should be more distinct and reassuring — increase contrast."
── */
.hero-cta-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate) !important;
  opacity: 1 !important;
  text-transform: uppercase;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-cta-sub::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  animation: ctaPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ctaPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}


/* ── FINDING 5: MICRO-INTERACTIONS — Teal Icon Pulse ──
   SaaS Specialist: "The server-side icons and teal stat values
   should breathe — subtle pulse shows the system is alive."
── */
.hsp-stat-val {
  position: relative;
}

/* Metric tiles in hero terminal breathe on hover */
.metric-tile:hover .metric-val {
  text-shadow: 0 0 12px rgba(0, 196, 161, 0.5);
  transition: text-shadow 0.3s ease;
}

/* Stat cards: teal value number lifts on hover */
.stat-card:hover .stat-val {
  color: var(--teal) !important;
  transition: color 0.2s ease;
}

/* Audit trace lines: glow on hover — Studio intelligence feel */
.trace-line {
  transition: background 0.2s ease, padding 0.2s ease;
  border-radius: 4px;
}

.trace-line:hover {
  background: rgba(0, 196, 161, 0.05);
  padding: 3px 6px;
}

.trace-line:hover .trace-status {
  text-shadow: 0 0 8px rgba(0, 196, 161, 0.4);
}

/* Bird cursor glow on trace hover (CSS side) */
.how-section .trace-line:hover {
  background: rgba(0, 196, 161, 0.08) !important;
}


/* ── FINDING 6: REVEAL ANIMATION — Elastic-out easing ──
   UI Director: "Current stagger feels staccato. Use elastic-out 
   spring for premium physical weight in card entrances."
── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1.1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1.1, 0.3, 1) !important;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card-specific elastic entrance — slightly more bounce */
.matrix-card.reveal,
.audit-card.reveal,
.stat-card.reveal {
  transition:
    opacity 0.75s cubic-bezier(0.2, 1.2, 0.4, 1),
    transform 0.75s cubic-bezier(0.2, 1.2, 0.4, 1) !important;
}


/* ── FINDING 7: PROOF SECTION — Tester Quote contrast ──
   Consumer Psychologist: "Tester quote text is too light.
   On dark background, quote marks and meta-text need 
   higher contrast for credibility."
── */
.tester-q {
  color: var(--canvas) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  font-weight: 300;
}

.tester-meta {
  color: var(--slate-on-dark) !important;
  opacity: 0.9 !important;
}


/* ── FINDING 8: AUDIENCE MATRIX — Metadata footer on cards ──
   SaaS Specialist: "Each audience card should have a technical
   metadata footer (industry/spend tier) for Studio authenticity."
── */
.matrix-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
}

/* The card-micro row already exists but needs stronger presence */
.card-micro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
  opacity: 0.6;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: auto;
}

/* On light bg (Audience section) */
.audience-section .card-micro {
  color: var(--slate-light) !important;
  opacity: 0.7;
  border-top-color: rgba(15, 25, 35, 0.08) !important;
}


/* ── FINDING 9: SECTION ENTER LINE — uniform width/colour ──
   UI Director: "The horizontal rule entering light sections
   is inconsistent — sometimes teal, sometimes missing."
── */
.section-enter-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, var(--deep-teal) 60%, transparent 100%);
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 64px;
}

.section-enter-line.visible {
  opacity: 0.45;
  transform: scaleX(1);
}


/* ── FINDING 10: HOW-IT-WORKS SECTION — step number refinement ──
   UI Director: "Step numbers are too large and compete with headings.
   Use a contained bubble style for optical balance."
── */
.how-section .step-num {
  font-size: 32px !important;
  width: 56px !important;
  height: 56px !important;
  border: 1.5px solid rgba(0, 196, 161, 0.35);
  border-radius: 50%;
  background: rgba(0, 196, 161, 0.06) !important;
  font-weight: 400 !important;
}


/* ── FINDING 11: HERO Primary Button — upgraded shadow ──
   Conversion Architect: "CTA button shadow is too flat.
   Upgrade to a glowing layered shadow for premium feel."
── */
.hero-btn-primary {
  box-shadow:
    0 2px 4px rgba(0, 196, 161, 0.15),
    0 6px 16px rgba(0, 196, 161, 0.25),
    0 12px 32px rgba(0, 196, 161, 0.18) !important;
}

.hero-btn-primary:hover {
  box-shadow:
    0 4px 8px rgba(0, 196, 161, 0.2),
    0 10px 28px rgba(0, 196, 161, 0.35),
    0 20px 48px rgba(0, 196, 161, 0.2) !important;
}


/* ── FINDING 12: TYPOGRAPHY — Hero H1 weight correction ──
   UI Director: "Hero h1 at 700 weight feels too heavy on small
   sizes, and Josefin Sans bold has poor legibility at thin weights.
   600 is the optimal weight for the brand's premium feel."
── */
.hero-h1 {
  font-weight: 600 !important;
}


/* ── RESPONSIVE: ghost button stacks below primary on mobile ── */
@media (max-width: 640px) {
  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .hero-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════
   STEP NUMBER FINAL FIX — "FROM ZERO TO LIVE" section
   Problem: previous rules set 56px circle (border-radius:50%)
   which clips the 48px number, and box-shadow/border add visual
   noise. This block uses highest specificity to win the cascade.
   The bg matches section bg exactly so the vertical line creates
   a clean optical "pause" behind each number — no overlap.
════════════════════════════════════════════════════════════ */
.how-section .steps-container .step-num {
  /* Typography — large, confident, monospaced */
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  color: var(--teal) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;

  /* Container — wide enough, no overflow clip */
  width: 80px !important;
  min-width: 80px !important;
  height: 72px !important;
  min-height: 72px !important;
  overflow: visible !important;

  /* Layout — centred in the box */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;

  /* Layer above the timeline line so it appears to "pause" the line */
  position: relative !important;
  z-index: 3 !important;

  /* Background matches section exactly — creates the gap in the timeline */
  background: #F4F6F8 !important;

  /* Remove all decorative chrome from previous rules */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure the step flexbox doesn't compress the number column */
.how-section .step {
  align-items: flex-start;
  gap: 40px;
}

/* Push the vertical line so it centres exactly on 40px (half of 80px) */
.how-section .steps-container::before {
  left: 40px !important;
}

.how-section .steps-container::after {
  left: 40px !important;
  background: #F4F6F8 !important;
}