/* =====================================================
   SAUSERA — The Map of Sausera
   Black + gold. Circuit-board density. Organized complexity.
   ===================================================== */

:root {
  --map-bg: #0A0A0A;
  --map-node: #111111;
  --map-node-2: #161616;
  --map-rule: rgba(200, 144, 28, 0.4);
  --map-rule-soft: rgba(200, 144, 28, 0.18);
  --map-rule-hard: rgba(200, 144, 28, 1.0);
}

body[data-page="map"] {
  background: var(--map-bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ---------------------------------------------------
   ABOVE-THE-FOLD INTRO
   --------------------------------------------------- */
.map-intro {
  position: relative;
  min-height: 100vh;
  padding: clamp(120px, 14vh, 180px) var(--pad) 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(1100px 600px at 50% 30%, rgba(200,144,28,0.10), transparent 70%),
    linear-gradient(180deg, #0A0A0A 0%, #060606 100%);
}
.map-intro-inner { max-width: 920px; width: 100%; }
.map-intro .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 14px;
  border: 1px solid var(--map-rule);
  border-radius: 999px;
  margin-bottom: 28px;
}
.map-intro .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(200,144,28,0.7);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.map-intro h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 6.8vw, 96px);
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
}
.map-sub {
  color: var(--text-dim);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 40px;
}
.map-intro-stats {
  display: flex; justify-content: center; gap: clamp(20px, 4vw, 56px);
  margin: 0 auto 44px;
  flex-wrap: wrap;
}
.mi-stat .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--gold);
  line-height: 1;
}
.mi-stat .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-top: 6px;
}
.map-intro-ctas {
  display: inline-flex; gap: 16px; flex-wrap: wrap;
  justify-content: center;
}
.scroll-cue {
  margin-top: 60px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  animation: cue-bob 2.4s ease-in-out infinite;
}
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------------------------------------------------
   MAP STAGE (panzoom host)
   --------------------------------------------------- */
.map-stage {
  position: relative;
  width: 100%;
  background: #050505;
  padding: 0;
}
.map-stage-frame {
  position: relative;
  width: 100%;
  height: 88vh;
  min-height: 600px;
  overflow: hidden;
  background:
    radial-gradient(1400px 700px at 50% 50%, rgba(200,144,28,0.04), transparent 70%),
    #0A0A0A;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* Subtle circuit-board lattice */
  background-image:
    linear-gradient(0deg, rgba(200,144,28,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,144,28,0.025) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px;
}
.map-canvas-host {
  position: absolute;
  inset: 0;
  cursor: grab;
}
.map-canvas-host:active { cursor: grabbing; }
.map-canvas {
  position: absolute;
  top: 0; left: 0;
  /* V14 — expanded canvas to 42000×26000 to accommodate doubled Zone 4
     brain (now 4400×3200) and the whiteboard-spec spatial re-layout. */
  width: 42000px;
  height: 26000px;
  transform-origin: 0 0;
  /* V4 Fix 1 — NEVER animate the canvas via CSS. All motion is JS-driven
     by panzoom or our manual tween. A CSS transition here would fight
     user drags and cause the auto-pull-back bug. */
  transition: none !important;
  background:
    radial-gradient(2200px 1200px at 50% 30%, rgba(200,144,28,0.05), transparent 80%),
    radial-gradient(1400px 800px at 20% 70%, rgba(200,144,28,0.03), transparent 70%),
    #0A0A0A;
}

/* ---------------------------------------------------
   ZONES — common
   --------------------------------------------------- */
.zone {
  position: absolute;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid var(--map-rule-soft);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.zone:hover {
  border-color: var(--map-rule-hard);
  box-shadow: 0 0 30px rgba(200, 144, 28, 0.22);
}
.zone-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.zone-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 600;
}
.zone-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 14px;
}
.zone-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-2);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--map-rule-soft);
  border-radius: 999px;
  background: rgba(200, 144, 28, 0.06);
}
.zone-stat-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin: 6px 0 14px;
}
.zone-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 4px 0 16px;
  color: var(--text);
}
.zone-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  margin: 6px 0 22px;
  color: #fff;
}
.zone-callout {
  margin-top: 16px;
  padding: 10px 14px;
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--text);
  font-size: 14px;
  background: rgba(200, 144, 28, 0.04);
  border-radius: 0 8px 8px 0;
}

/* Zone color tints */
.zone--acquisition { background: rgba(61, 214, 200, 0.03); }
.zone--speed.hero-zone {
  background: rgba(200, 144, 28, 0.08);
  border: 2px solid var(--map-rule-hard);
  box-shadow: 0 0 60px rgba(200, 144, 28, 0.18) inset, 0 0 80px rgba(200, 144, 28, 0.25);
}
.zone--recovery { background: rgba(200, 144, 28, 0.05); }
.zone--addons   { background: rgba(255, 255, 255, 0.02); }
.zone--substrate {
  background: linear-gradient(180deg, #1a1a1a, #0a0a0a);
  border-color: var(--map-rule);
}
.zone--outputs  { background: rgba(200, 144, 28, 0.04); }
.zone--founding {
  background: rgba(200, 144, 28, 0.12);
  border: 2px solid var(--map-rule-hard);
  box-shadow: 0 0 90px rgba(200, 144, 28, 0.3);
}
.zone--founder {
  background: rgba(200, 144, 28, 0.07);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200, 144, 28, 0.18), 0 0 40px rgba(200, 144, 28, 0.4);
  animation: vip-pulse 3.2s ease-in-out infinite;
}
@keyframes vip-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 144, 28, 0.18), 0 0 40px rgba(200, 144, 28, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(200, 144, 28, 0.32), 0 0 64px rgba(200, 144, 28, 0.6); }
}
.zone--intel,
.zone--pipeline,
.zone--adjuster,
.zone--comms,
.zone--compliance,
.zone--homeowner,
.zone--onboarding,
.zone--academy,
.zone--vendors,
.zone--api,
.zone--outputs { /* shared neutral handled above */ }

.sub-zone {
  background: rgba(20, 20, 20, 0.4);
  border-style: dashed;
  border-color: var(--map-rule);
}

/* ---------------------------------------------------
   NODES
   --------------------------------------------------- */
.node {
  background: var(--map-node);
  border: 1px solid var(--map-rule);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  position: relative;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.node:hover {
  border-color: var(--map-rule-hard);
  background: var(--map-node-2);
  box-shadow: 0 0 16px rgba(200, 144, 28, 0.25);
  transform: translateY(-1px);
}
.node .node-sub {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.node.atom {
  font-size: 12px;
  padding: 8px 12px;
  border-color: var(--map-rule-soft);
}
.node.dashed {
  border-style: dashed;
  color: var(--text-dim);
  background: transparent;
}
.node.hero-node {
  background: linear-gradient(180deg, #1a1a1a, #0e0e0e);
  border: 1.5px solid var(--gold);
  padding: 14px 18px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  min-width: 160px;
}
.node.ai-tagged {
  position: relative;
}
.node.ai-tagged::after {
  content: 'AI';
  position: absolute;
  top: -6px; right: -6px;
  background: var(--gold);
  color: #000;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.node.ghl {
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(200,144,28,0.15), rgba(200,144,28,0.04));
  font-weight: 700;
}
.node.webhook-bus {
  display: inline-flex; align-items: center; gap: 8px;
}
.node .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-glow);
  box-shadow: 0 0 10px var(--gold);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.node.pa-disclaimer {
  border: 2px solid var(--gold);
  background: rgba(200, 144, 28, 0.06);
  font-size: 11.5px;
  color: var(--gold-2);
  line-height: 1.45;
}

/* Diamonds (decision branches) */
.diamond {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--map-node);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 18px 22px;
  transform: rotate(45deg);
  width: 130px; height: 130px;
}
.diamond span,
.diamond > * {
  transform: rotate(-45deg);
  display: inline-block;
}
.diamond.ai-tagged::after {
  transform: rotate(-45deg);
  top: -2px; right: -2px;
}
.diamond-mini {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-align: center;
  padding: 4px 10px;
  border: 1px dashed var(--gold);
  border-radius: 4px;
  background: rgba(200,144,28,0.06);
  margin: 4px 0;
}

/* Grids */
.node-grid { display: grid; gap: 10px; }
.grid-5-2 { grid-template-columns: repeat(5, 1fr); }
.grid-6   { grid-template-columns: repeat(6, 1fr); }
.grid-1   { grid-template-columns: 1fr; }

/* Speed-to-Lead row */
.speed-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap;
  margin: 12px 0;
}
.connector-mini {
  color: var(--gold);
  font-size: 22px;
  font-weight: 700;
  opacity: 0.7;
  flex-shrink: 0;
}
.countdown-node .tick {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--gold);
  font-weight: 700;
  margin-top: 4px;
}
.fallback-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px;
}
.dashed-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}

/* Pipeline */
.pipeline-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 8px 0 12px;
}
.phase {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 12px 16px;
  border: 1px solid var(--map-rule-soft);
  border-radius: 10px;
  background: rgba(15, 15, 15, 0.6);
}
.phase-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.stage {
  background: var(--map-node);
  border: 1px solid var(--map-rule-soft);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text);
}
.stage:hover { border-color: var(--gold); }
.phase-a { border-color: rgba(61, 214, 200, 0.25); }
.phase-b { border-color: rgba(200, 144, 28, 0.35); }
.phase-c { border-color: rgba(200, 144, 28, 0.45); }
.phase-d { border-color: rgba(200, 144, 28, 0.4); }
.phase-e { border-color: rgba(200, 144, 28, 0.55); }

.cash-branch {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px dashed var(--gold);
  border-radius: 8px;
  background: rgba(200, 144, 28, 0.04);
  display: flex; align-items: center; gap: 14px;
}
.cash-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
}

/* Adjuster sub-zone */
.adjuster-row {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.adjuster-row .node { flex: 1 1 220px; }

/* Recovery sub-funnels */
.sub-funnel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
.sub-funnel {
  background: rgba(15, 15, 15, 0.7);
  border: 1px solid var(--map-rule-soft);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.sf-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.texas-badge-pill {
  display: inline-flex; align-items: center;
  background: var(--gold);
  color: #000;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Add-on sub-modules */
.submod {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--map-rule-soft);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(10, 10, 10, 0.55);
}
.submod-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.submod.phase2 { border-style: dashed; }
.ph2 {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-left: 6px;
  background: rgba(200,144,28,0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Carrier grid */
.carrier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.carrier-chip {
  background: var(--map-node);
  border: 1px solid var(--map-rule-soft);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  text-align: center;
  color: var(--text);
  transition: all 0.25s ease;
}
.carrier-chip:hover { border-color: var(--gold); background: var(--map-node-2); }

/* Substrate */
.substrate-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  margin-top: 8px;
}

/* Compliance */
.compliance-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 6px;
}

/* VIP badge */
.vip-badge {
  background: var(--gold);
  color: #000;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.12em;
  animation: vip-pulse-badge 2.4s ease-in-out infinite;
}
@keyframes vip-pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,144,28,0.6); }
  50%     { box-shadow: 0 0 0 8px rgba(200,144,28,0); }
}

/* ---------------------------------------------------
   FOUNDING ZONE (Zone 8)
   --------------------------------------------------- */
.founding-zone { padding: 30px 36px; }
.founding-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  color: var(--gold);
  margin: 6px 0 22px;
  letter-spacing: -0.01em;
}
.founding-headline em { font-style: normal; color: var(--text); }
.founding-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
.f-card {
  background: rgba(10, 10, 10, 0.85);
  border: 1.5px solid var(--map-rule);
  border-radius: 12px;
  padding: 22px;
}
.f-featured {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(200, 144, 28, 0.3);
}
.f-tier {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.f-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: #fff;
}
.f-price span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
}
.f-setup {
  font-size: 13px;
  color: var(--text-dim);
  margin: 4px 0 12px;
}
.f-feat {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.f-feat li::before {
  content: '— ';
  color: var(--gold);
  font-weight: 700;
}
.founding-bonus {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: center;
  background: rgba(200, 144, 28, 0.08);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 22px;
}
.bonus-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.founding-bonus ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px;
  color: var(--text);
}
.founding-bonus ul li::before {
  content: '◆ ';
  color: var(--gold);
}
.slot-counter {
  text-align: center;
  padding: 14px;
  background: #0A0A0A;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
}
.slot-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.slot-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 30px rgba(200, 144, 28, 0.7);
}
.founding-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ---------------------------------------------------
   CONNECTORS SVG
   --------------------------------------------------- */
.connectors-svg {
  position: absolute;
  top: 0; left: 0;
  width: 14000px; height: 9400px;
  pointer-events: none;
  z-index: 1;
}
/* V10 — bolder strokes so the circuit-board mesh remains legible at the
   most-zoomed-out tour state (Step 1, ~0.10× scale). Solid brand-gold,
   higher opacity. Dashed variants reserved for genuine decision branches. */
.connector-main { stroke: #C8901C; stroke-width: 6; fill: none; opacity: 0.95; }
.connector-thin { stroke: #C8901C; stroke-width: 3; fill: none; opacity: 0.85; }
.connector-dashed { stroke: #C8901C; stroke-width: 4; fill: none; opacity: 0.9; stroke-dasharray: 10 6; }
.connector-loop { stroke: #C8901C; stroke-width: 7; fill: none; opacity: 1.0; }

/* V11 — Sequential tour path. One continuous polyline threaded through every
   tour stop in order. Solid brand-gold, bold enough to read at the most
   zoomed-out tour state. Drop-shadow filter gives a subtle glow halo. */
.connector-tour {
  fill: none;
  stroke: #C9A96E;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(201,169,110,0.55));
}
.connector-pulse {
  stroke: #C8901C;
  stroke-width: 2;
  fill: none;
  opacity: 0.6;
  stroke-dasharray: 6 10;
  animation: dashdance 2s linear infinite;
}
@keyframes dashdance { to { stroke-dashoffset: -32; } }

/* Zones live above connectors */
.zone { z-index: 5; }

/* ---------------------------------------------------
   AI OVERLAY (Zone 10)
   --------------------------------------------------- */
.ai-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 14000px; height: 9400px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.3;
  transition: opacity 0.6s ease;
}
.ai-overlay.bright { opacity: 1; }
.ai-filament {
  stroke: #C8901C;
  stroke-width: 1.5;
  fill: none;
  opacity: 0.7;
  stroke-dasharray: 3 6;
  animation: dashdance 4s linear infinite;
}
.ai-node-dot {
  fill: #C8901C;
  filter: drop-shadow(0 0 8px rgba(200,144,28,0.9));
  animation: ai-blink 4s ease-in-out infinite;
}
@keyframes ai-blink { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.ai-node-label {
  fill: #C8901C;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #0A0A0A;
  stroke-width: 3;
}
#aiBrain circle:first-child { animation: brain-pulse 3.6s ease-in-out infinite; transform-origin: 7000px 2700px; }
@keyframes brain-pulse {
  0%,100% { opacity: 0.7; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.08); }
}

/* ---------------------------------------------------
   HUD OVERLAYS
   --------------------------------------------------- */
.map-hud {
  position: absolute;
  z-index: 30;
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid var(--map-rule-soft);
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  pointer-events: auto;     /* never let a parent inherit none */
}
.hud-tl { top: 16px; left: 16px; }
/* Tour controls — moved from top-right to under the top-left HUD so the
   sun-logo glow in the top-right corner stays unobstructed. */
.hud-tr {
  top: 130px;
  left: 16px;
  right: auto;
}
.hud-bl { bottom: 16px; left: 16px; }
.hud-row { display: flex; gap: 10px; align-items: center; }
.hud-row + .hud-row { margin-top: 4px; }
.hud-k { color: var(--text-faint); font-size: 10px; letter-spacing: 0.18em; }
.hud-v { color: var(--gold); font-weight: 600; }

/* Tour controls */
.tour-controls {
  display: inline-flex; align-items: center; gap: 6px;
}
.tc-btn {
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid var(--map-rule);
  color: var(--gold);
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
}
.tc-btn:hover { background: var(--gold); color: #000; transform: translateY(-1px); }
.tc-exit { color: #fff; border-color: var(--rule-3); }
.tc-progress {
  margin-left: 8px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* Legend */
.legend-btn {
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid var(--map-rule);
  color: var(--gold);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.legend-btn:hover { background: var(--gold); color: #000; }
.legend-panel {
  margin-top: 10px;
  background: rgba(10,10,10,0.92);
  border: 1px solid var(--map-rule);
  border-radius: 10px;
  padding: 14px 16px;
  width: 260px;
  font-family: var(--font-body);
}
.legend-panel ul {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.legend-panel li {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.legend-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.lg { display: inline-block; width: 28px; height: 2px; flex-shrink: 0; }
.lg-thick { height: 3px; background: var(--gold); }
.lg-thin  { background: var(--gold); opacity: 0.65; }
.lg-dashed { background: repeating-linear-gradient(90deg, var(--gold), var(--gold) 4px, transparent 4px, transparent 8px); height: 2px; }
.lg-pulse { background: var(--gold); opacity: 0.75; animation: dashdance 1.6s linear infinite; }
.lg-ai { background: repeating-linear-gradient(90deg, var(--gold), var(--gold) 3px, transparent 3px, transparent 7px); height: 1.5px; opacity: 0.55; }
.lg-sw { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--map-rule-soft); flex-shrink: 0; }
.sw-acq { background: rgba(61, 214, 200, 0.4); }
.sw-speed { background: rgba(200, 144, 28, 0.6); }
.sw-recovery { background: rgba(200, 144, 28, 0.35); }
.sw-founding { background: rgba(200, 144, 28, 1); }

/* Persistent CTA pill */
.cta-pill {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 32;
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--gold-glow) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  color: #000;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(200, 144, 28, 0.5);
  transition: all 0.25s ease;
}
.cta-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(200, 144, 28, 0.7);
}
.cta-pill .cta-arrow { font-size: 16px; }

/* Tour explanation card */
.tour-card {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  background: rgba(10, 10, 10, 0.94);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 20px 26px 22px;
  max-width: 560px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: tc-in 0.4s var(--easing);
}
@keyframes tc-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tour-card .tc-stop {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tour-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 6px;
  color: #fff;
}
.tour-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.tc-dismiss {
  position: absolute;
  top: 8px; right: 12px;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}
.tc-dismiss:hover { color: var(--gold); }

/* Exit banner */
.exit-banner {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 33;
  display: flex; align-items: center; gap: 16px;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 10px 14px 10px 22px;
  box-shadow: 0 14px 40px rgba(200,144,28,0.3);
  animation: tc-in 0.5s var(--easing);
}
.exit-banner .eb-text { color: var(--text); font-size: 14px; }
.eb-dismiss {
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-faint);
  font-size: 14px;
  border: 1px solid var(--rule-3);
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
}
.eb-dismiss:hover { color: var(--gold); border-color: var(--gold); }

/* ---------------------------------------------------
   FALLBACK SECTION (visible on mobile or scroll-past)
   --------------------------------------------------- */
.map-fallback {
  padding: 80px var(--pad) 100px;
  background: linear-gradient(180deg, #050505, #0A0A0A);
  border-top: 1px solid var(--rule);
}
.map-fallback .container { max-width: 880px; margin: 0 auto; }
.map-fallback .section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.map-fallback h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  margin: 0 0 12px;
  line-height: 1.1;
}
.fb-sub {
  color: var(--text-dim);
  font-size: 16px;
  margin: 0 0 28px;
}
.fb-autoscroll { margin-bottom: 40px; }
.fb-zones { display: flex; flex-direction: column; gap: 20px; }
.fb-zone {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 24px;
  background: rgba(15, 15, 15, 0.6);
  transition: border-color 0.3s ease;
}
.fb-zone:hover { border-color: var(--gold); }
.fb-zone-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fb-zone h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
}
.fb-zone p {
  color: var(--text-dim);
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
}
.fb-zone ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fb-zone li {
  font-size: 12px;
  padding: 5px 10px;
  background: var(--map-node);
  border: 1px solid var(--map-rule-soft);
  border-radius: 6px;
  color: var(--text);
}
.fb-zone.fb-current { border-color: var(--gold); box-shadow: 0 0 20px rgba(200,144,28,0.25); }
.fb-final-cta {
  margin-top: 56px;
  padding: 36px;
  background: rgba(200, 144, 28, 0.08);
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  text-align: center;
}
.fb-final-cta h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 10px;
}
.fb-final-cta p {
  color: var(--text-dim);
  margin: 0 0 20px;
}
.fb-final-cta .endcta-ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* ---------------------------------------------------
   MOBILE FALLBACK SWAP (under 768px hides the canvas)
   V19 — except when body.map-active, where the mobile user
   has opted into the full interactive pan/zoom map.
   --------------------------------------------------- */
@media (max-width: 768px) {
  .map-stage { display: none; }
  body.map-active .map-stage { display: block; }
  .map-intro { min-height: auto; padding-top: 110px; padding-bottom: 40px; }
  .map-intro-stats { gap: 14px; }
  .map-intro-ctas .btn { width: 100%; justify-content: center; }
  .map-fallback { display: block; }
  /* Hide the vertical scroll content while user is in the interactive
     map view (body.map-active). They flip back via the Back to Scroll
     View button which removes map-active and restores vertical-mode. */
  body.map-active .map-fallback { display: none; }
  .nav-links { gap: 16px; }
}

/* Above 768px, hide the fallback (it's only for mobile + scroll-past info) */
@media (min-width: 769px) {
  .map-fallback { display: block; }
}

/* ---------------------------------------------------
   NAV MAP PILL (page-level fallback if main.css ordering matters)
   --------------------------------------------------- */
.nav-links a.nav-map-pill {
  background: linear-gradient(180deg, rgba(200,144,28,0.2), rgba(200,144,28,0.06));
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--gold);
  transition: all 0.25s ease;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.nav-links a.nav-map-pill:hover {
  background: rgba(200, 144, 28, 0.3);
  box-shadow: 0 0 16px rgba(200, 144, 28, 0.35);
  transform: translateY(-1px);
}
.nav-links a.nav-map-pill::after { display: none !important; }
.nav-links a.nav-map-pill.active {
  background: rgba(200, 144, 28, 0.35);
  box-shadow: 0 0 18px rgba(200, 144, 28, 0.4);
}

/* =====================================================
   V2 — TWO-MODE PAGE ARCHITECTURE
   - Default (no body class): landing only, no scroll
   - body.map-active: map fills viewport, intro hidden
   - body.vertical-mode: vertical stacked sections, intro+map hidden
   ===================================================== */

/* ---- DEFAULT (LANDING) ---- */

/* Hide map + vertical-mode UI in default state */
body:not(.map-active):not(.vertical-mode) .map-stage { display: none; }
body:not(.vertical-mode) .map-fallback { display: none; }
body:not(.vertical-mode) .vm-back-btn,
body:not(.vertical-mode) .vm-autoscroll-btn { display: none; }
body:not(.map-active) .exit-map-btn { display: none; }
body:not(.map-active) .cta-pill { display: none; }
body:not(.map-active) .map-hud { display: none; }
body:not(.map-active) .tour-card { display: none; }
body:not(.map-active) .exit-banner { display: none; }

/* Landing intro: centered, single viewport */
.map-intro {
  min-height: 100vh;
  padding-top: 110px;   /* clear nav */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.map-intro-hint {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* Three-CTA layout: keep horizontal-row on desktop, stack on mobile */
.map-intro-ctas {
  flex-wrap: wrap;
  justify-content: center;
}
.cta-tour    { font-size: 14px; padding: 20px 32px; }   /* biggest */
.cta-explore,
.cta-vertical { font-size: 13px; padding: 16px 26px; }

/* ---- MAP MODE ---- */
body.map-active { overflow: hidden; }
body.map-active .map-intro { display: none; }
body.map-active .map-stage { display: block; }
body.map-active .map-stage-frame {
  position: fixed;
  top: 68px;            /* below nav */
  left: 0; right: 0; bottom: 0;
  height: auto;
  min-height: 0;
  z-index: 40;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
}
body.map-active .map-fallback,
body.map-active .footer { display: none; }

/* Exit Map button (top-left of map mode) */
.exit-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}
.exit-map-btn:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 18px rgba(200, 144, 28, 0.5);
}

/* Resume Tour button — stacks beneath the tour-controls panel on the
   LEFT side (used to be top-right, but the sun-logo glow lives there now). */
.resume-tour-btn {
  position: absolute;
  top: 180px;
  left: 16px;
  right: auto;
  z-index: 35;
  background: linear-gradient(135deg, var(--gold-glow), var(--gold) 50%, var(--gold-deep));
  color: #000;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(200, 144, 28, 0.55);
  animation: tc-in 0.35s var(--easing);
  cursor: pointer;
  pointer-events: auto;
}
.resume-tour-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(200, 144, 28, 0.75);
}

/* Tour card during transition (overview hop) — hidden */
.tour-card.during-transition {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ---- VERTICAL MODE ---- */
body.vertical-mode { overflow-y: auto; }
body.vertical-mode .map-intro,
body.vertical-mode .map-stage,
body.vertical-mode .footer { display: none; }
body.vertical-mode .map-fallback { display: block; }

/* Stacked full-viewport sections */
.map-fallback {
  padding: 0;
  background: #050505;
  border: 0;
}
.vm-intro {
  min-height: 60vh;
  padding: 140px var(--pad) 60px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.vm-intro .section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.vm-intro h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 12px;
  line-height: 1.1;
}
.vm-intro .fb-sub {
  color: var(--text-dim);
  font-size: 16px;
  margin: 0;
}

.fb-zones {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each fallback zone becomes a full-viewport "slide" in vertical mode */
.fb-zone {
  min-height: 100vh;
  padding: clamp(80px, 12vh, 130px) var(--pad) clamp(80px, 12vh, 130px);
  background: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid rgba(200, 144, 28, 0.15);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.35s ease;
  position: relative;
}
.fb-zone:nth-child(odd) {
  background: linear-gradient(180deg, #0A0A0A, #060606);
}
.fb-zone:nth-child(even) {
  background: linear-gradient(180deg, #060606, #0A0A0A);
}
.fb-zone.fb-current::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: 64px; height: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}
.fb-zone .fb-zone-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(200, 144, 28, 0.08);
}
.fb-zone h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.08;
  margin: 0 0 18px;
  max-width: 22ch;
  color: #fff;
}
.fb-zone p {
  color: var(--text-dim);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 60ch;
}
.fb-zone .vz-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  color: var(--gold);
  margin: 0 0 20px;
  letter-spacing: 0.04em;
}
.fb-zone ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 820px;
  justify-content: center;
}
.fb-zone li {
  font-size: 13px;
  padding: 8px 14px;
  background: var(--map-node);
  border: 1px solid var(--map-rule-soft);
  border-radius: 8px;
  color: var(--text);
  transition: border-color 0.2s ease;
}
.fb-zone li:hover {
  border-color: var(--gold);
}

/* Final CTA section also full-viewport */
.fb-final-cta {
  min-height: 100vh;
  margin-top: 0;
  padding: clamp(80px, 12vh, 130px) var(--pad);
  background: radial-gradient(900px 500px at 50% 50%, rgba(200,144,28,0.16), transparent 70%), #0A0A0A;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fb-final-cta h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 16px;
  color: var(--gold);
}
.fb-final-cta p {
  color: var(--text);
  font-size: clamp(16px, 1.4vw, 19px);
  max-width: 56ch;
  margin: 0 0 28px;
}

/* Sticky vertical-mode buttons */
.vm-back-btn {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 60;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 10px 18px;
  border-radius: 999px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}
.vm-back-btn:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 22px rgba(200, 144, 28, 0.5);
}

.vm-autoscroll-btn {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: linear-gradient(135deg, var(--gold-glow), var(--gold) 50%, var(--gold-deep));
  color: #000;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(200, 144, 28, 0.55);
  transition: all 0.25s ease;
}
.vm-autoscroll-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 16px 44px rgba(200, 144, 28, 0.75);
}
.vm-autoscroll-btn.is-active {
  background: linear-gradient(135deg, #2A2A2A, #1A1A1A);
  color: var(--gold);
  border: 1px solid var(--gold);
}

/* ---- DEEP-LINK STATE: don't even show landing if hash routes elsewhere ---- */
body.boot-hidden .map-intro { opacity: 0; pointer-events: none; }

/* ---- MOBILE: under 768px, hide guided/explore CTAs, only show vertical ---- */
@media (max-width: 768px) {
  .map-intro .cta-tour,
  .map-intro .cta-explore { display: none; }
  .map-intro .cta-vertical { width: 100%; justify-content: center; }
  .map-intro-hint { display: none; }
}

/* Above 768px, the V1 stylesheet had .map-fallback always-block; override
   so it only shows in vertical mode. */
@media (min-width: 769px) {
  body:not(.vertical-mode) .map-fallback { display: none; }
}

/* =====================================================
   Z-INDEX LAYERING — foundation strips behind ring zones,
   key hero zones float above any neighbor edge contact.
   (Spatial layout has zero overlaps, but these stack-order
   rules also help against the SVG overlays + AI brain glow.)
   ===================================================== */
.zone.substrate-strip,
.zone--compliance,
.zone--api { z-index: 3; }
.zone--substrate { z-index: 3; }
.zone--founding  { z-index: 7; }
.zone--founder   { z-index: 6; }
.zone--speed.hero-zone { z-index: 6; }
.zone--recovery  { z-index: 6; }

/* ==============================================================
   P4 — START HERE marker + numbered flow guide
   All elements live INSIDE .map-canvas, so they pan/zoom with the
   canvas. Pointer-events disabled so clicks pass through to zones.
   ============================================================== */

/* START HERE — gold pill above-left of Zone 1 Acquisition */
.start-here-marker {
  position: absolute;
  /* V14 — moved to top-center directly above brain (brain at x=18800-23200, center x=21000).
     Marker centered at x=21000 → left = 21000 - 700 = 20300. */
  left: 20300px;
  top: 200px;
  width: 1400px;
  height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 15;
  background: linear-gradient(135deg, rgba(200,144,28,0.18), rgba(200,144,28,0.08));
  border: 4px solid var(--gold);
  border-radius: 32px;
  box-shadow: 0 0 80px rgba(200, 144, 28, 0.55);
  animation: start-pulse 2.4s ease-in-out infinite;
}
.start-here-marker .start-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 160px;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(200,144,28,0.8);
  line-height: 1;
}
.start-here-marker .start-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 200px;
  color: var(--gold);
  margin-top: 24px;
  animation: start-arrow-bounce 1s ease-in-out infinite;
}
@keyframes start-pulse {
  0%,100% { box-shadow: 0 0 80px rgba(200, 144, 28, 0.55); }
  50%     { box-shadow: 0 0 120px rgba(200, 144, 28, 0.95); }
}
@keyframes start-arrow-bounce {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(40px); }
}

/* Step 2 — START HERE description card. Lives inside .map-canvas so it
   pans/zooms with everything else. V11: anchored directly below the
   START HERE marker (marker at left:200 top:200 w:1400 h:540 ends y:740).
   Card sits at the marker's left edge, just below it, sized to match the
   marker's footprint so the eye reads "this card belongs to that callout."
   Visible only while the tour is on Step 2; toggled via body[data-tour-step="2"]. */
.start-here-desc {
  position: absolute;
  left: 200px;
  top: 760px;
  width: 1400px;
  padding: 28px 32px 32px;
  background: linear-gradient(180deg, rgba(20,18,12,0.96) 0%, rgba(12,10,6,0.96) 100%);
  border: 2px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 12px 60px rgba(200,144,28,0.30);
  z-index: 16;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}
.start-here-desc .zone-header-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.start-here-desc .zone-number-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--gold);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
}
.start-here-desc .zone-header-text { display: flex; flex-direction: column; gap: 4px; }
.start-here-desc .zone-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.start-here-desc .zone-step-indicator {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.start-here-desc .zone-description {
  color: rgba(255,255,255,0.92);
  font-size: 22px;
  line-height: 1.55;
}
body[data-tour-step="2"] .start-here-desc {
  opacity: 1;
}

/* Numbered flow circles */
#flowMarkers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}
.flow-marker {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFD27A 0%, #C8901C 60%, #8B5A00 100%);
  border: 6px solid #FFF6D6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 130px;
  color: #0A0A0A;
  box-shadow: 0 0 40px rgba(200, 144, 28, 0.7);
  pointer-events: none;
  letter-spacing: -0.02em;
}
.flow-marker.is-major { font-size: 140px; }

/* Animated dashed gold connecting path */
.flow-path-svg {
  position: absolute;
  top: 0; left: 0;
  width: 14000px; height: 9400px;
  pointer-events: none;
  z-index: 14;
}
.flow-path-line {
  stroke: #C8901C;
  stroke-width: 12;
  fill: none;
  opacity: 0.55;
  stroke-dasharray: 28 22;
  stroke-linecap: round;
  animation: flow-march 8s linear infinite;
}
@keyframes flow-march { to { stroke-dashoffset: -500; } }

/* Helper legend (bottom-left of the map stage frame, OUTSIDE the canvas) */
.flow-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 32;
  max-width: 320px;
  padding: 12px 16px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid var(--map-rule-soft);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.flow-legend strong { color: var(--gold); font-weight: 600; }
/* When the bottom-left HUD (legend toggle) is also positioned bottom-left,
   shift the flow legend up so they don't collide. */
body.map-active .map-hud.hud-bl { bottom: 110px; }

/* ===============================================================
   V3 — CIRCUIT-BOARD NODE SYSTEM
   Compact nodes sized to content. Color-coded by type.
   =============================================================== */

/* Zone wrappers — keep absolute positioning from V2.fix2 layout,
   but let inner content drive the visual density. Override the
   loose padding from the older .zone rule. */
.zone {
  padding: 28px 14px 14px;   /* room for top-anchored label */
}
.zone-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
}

/* === The node === V4 Fix 4 — tighter padding, smaller min-width, content-sized */
.zone-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 0;
  max-width: 170px;
  padding: 5px 8px;
  background: #111;
  border: 1px solid rgba(200, 144, 28, 0.5);
  border-radius: 4px;
  font-size: 10.5px;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.zone-node .node-sub {
  display: block;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Type variants */
.zone-node.action      { background: #1a1a1a; border-color: rgba(200,144,28,0.5); }
.zone-node.trigger     { background: var(--gold); color: #0A0A0A; border-color: var(--gold); font-weight: 700; }
.zone-node.wait        { background: #1f1c14; border-color: rgba(200,144,28,0.4); border-style: dashed; color: var(--gold-2); }
.zone-node.ai          { background: #1a1a1a; border-color: rgba(200,144,28,1.0); box-shadow: 0 0 12px rgba(200,144,28,0.3); }
.zone-node.integration { background: #111; border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); font-size: 10px; }
.zone-node.email       { background: #1a1a1a; border-color: rgba(120,160,255,0.5); }
.zone-node.sms         { background: #1a1a1a; border-color: rgba(120,255,170,0.5); }
.zone-node.voice       { background: #1a1a1a; border-color: rgba(255,170,120,0.5); }
.zone-node.output      { background: linear-gradient(90deg, var(--gold), var(--gold-glow)); color: #0A0A0A; border-color: var(--gold); font-weight: 700; }
.zone-node.disclaimer  { background: rgba(200,144,28,0.06); border: 2px solid var(--gold); color: var(--gold-2); font-size: 10px; max-width: 240px; padding: 8px 12px; }

/* Decision diamond */
.zone-node.decision {
  width: 76px;
  height: 76px;
  padding: 0;
  background: #0a0a0a;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin: 12px auto;
}
.zone-node.decision span {
  transform: rotate(-45deg);
  display: inline-block;
  text-align: center;
  line-height: 1.1;
}

/* Flow column — vertical stack of nodes connected by ↓ arrows */
.flow-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.flow-col-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: center;
  font-weight: 600;
}
.flow-arrow {
  font-family: var(--font-mono);
  color: rgba(200, 144, 28, 0.65);
  font-size: 12px;
  line-height: 1;
  margin: 3px 0;
  text-align: center;
}
.flow-arrow.thick { color: var(--gold); font-size: 18px; font-weight: 700; }
.flow-arrow.dashed { opacity: 0.5; }

/* Flow row — horizontal sequence connected by → arrows */
.flow-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.flow-row .flow-arrow { margin: 0 2px; }

/* Branch indicator — labels Yes/No on a connector */
.branch-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--gold-2);
  text-transform: uppercase;
  padding: 1px 5px;
  background: rgba(10,10,10,0.7);
  border-radius: 2px;
  margin: 1px 4px;
}

/* The 10-column grid wrapper for Zone 1 etc. */
.flow-grid {
  display: grid;
  gap: 10px 8px;
  justify-content: center;
  align-items: start;
}
.flow-grid.cols-10 { grid-template-columns: repeat(10, max-content); }
.flow-grid.cols-7  { grid-template-columns: repeat(7,  max-content); }
.flow-grid.cols-5  { grid-template-columns: repeat(5,  max-content); }
.flow-grid.cols-4  { grid-template-columns: repeat(4,  max-content); }
.flow-grid.cols-3  { grid-template-columns: repeat(3,  max-content); }
.flow-grid.cols-2  { grid-template-columns: repeat(2,  max-content); }
.flow-grid.cols-1  { grid-template-columns: max-content; }
.flow-grid.cols-6  { grid-template-columns: repeat(6,  max-content); }

/* Convergence / output rail — thick gold bar at the bottom of a zone */
.convergence-rail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
  color: #0A0A0A;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  margin-top: 10px;
  box-shadow: 0 0 16px rgba(200, 144, 28, 0.5);
}

/* Inline column header for sub-phases (Phase 3A, etc.) */
.phase-band {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(200, 144, 28, 0.3);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
}
.phase-band .phase-band-h {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 700;
}

/* Sub-funnel quadrant (Zone 4) */
.sub-quadrant {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 10px;
  border: 1px solid rgba(200, 144, 28, 0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
}
.sub-quadrant .sub-quadrant-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
}

/* === V4 Fix 2/3 — Zone number marker ABOVE each zone === */
.zone-number-marker {
  position: absolute;
  top: -40px;
  left: 8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: #0A0A0A;
  font-weight: 800;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(200, 144, 28, 0.5),
              0 0 0 2px rgba(10,10,10,0.85),
              0 0 0 3px rgba(200, 144, 28, 0.55);
  font-family: var(--font-mono);
  letter-spacing: 0;
  z-index: 50;
  pointer-events: none;
  user-select: none;
}

/* === V4 Fix 8 — Foundation Layer 3-col side-by-side grid === */
.foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
  align-items: start;
}
.foundation-grid .phase-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* === V4 Fix 4 — Tight zone wrappers (apply to all zones globally) === */
.zone {
  /* Tighter outer padding (was 28px 14px 14px); leave room above for the
     -40px number marker. */
  padding: 14px 12px 10px !important;
}
.zone .zone-head {
  margin-bottom: 6px;
}
.zone .zone-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-bottom: 2px;
}
.zone .zone-stat {
  font-size: 9px;
}
.zone .zone-h3 {
  font-size: 13px;
  margin: 4px 0 6px;
  letter-spacing: 0.02em;
}
.zone .zone-headline {
  font-size: 15px;
  line-height: 1.2;
  margin: 6px 0 8px;
}
.zone .zone-callout {
  font-size: 10px;
  padding: 6px 10px;
  margin-top: 8px;
}

/* === V4 Fix 12 — Tour card moved to bottom-left, dismissable, tighter === */
.tour-card {
  left: 24px !important;
  right: auto !important;
  bottom: 84px !important;
  max-width: 320px !important;
  transform: none !important;
  padding: 14px 16px 14px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: tc-in-bl 0.32s var(--easing) !important;
}
@keyframes tc-in-bl {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tour-card h4 { font-size: 17px !important; margin-bottom: 4px !important; }
.tour-card p  { font-size: 12px !important; line-height: 1.45 !important; }
.tc-loop-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.7;
}

/* === V4 Fix 7 — Connectors must never block clicks on zones === */
.connectors-svg,
.connectors-svg * {
  pointer-events: none;
}
.ai-overlay,
.ai-overlay * {
  pointer-events: none;
}
.flow-path-svg,
.flow-path-svg * {
  pointer-events: none;
}

/* ====================================================================
   V5 — FINAL POLISH
   ==================================================================== */

/* === V5 Fix 1 — Zone HEADER STRIP floating above each zone ===
   The header lives INSIDE the .zone wrapper so panzoom transforms it
   together with the zone body. top:-52px positions it above the box
   from the zone's own coordinate system. */
.zone-header {
  position: absolute;
  top: -52px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(200, 144, 28, 0.45);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 60;
  min-width: 280px;
  width: max-content;
  max-width: 100%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  pointer-events: auto;
}
.zone-header .zone-number-marker {
  position: static;
  top: auto; left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: #0A0A0A;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(200, 144, 28, 0.55),
              0 0 0 2px rgba(10,10,10,0.85),
              0 0 0 3px rgba(200, 144, 28, 0.4);
  flex: 0 0 auto;
  font-family: var(--font-mono);
}
.zone-header .zone-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.zone-header .zone-step-indicator {
  margin-left: 12px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* Hide ONLY the old inside-zone label (the new floating header carries it).
   We keep the .zone-stat visible for inline stats inside the zone body. */
.zone[data-v5-header="1"] > .zone-head > .zone-label {
  display: none;
}

/* === V5 Fix 2 — Sausera Brain central node + radial satellite layout === */
.zone--ai-brain {
  /* The brain zone wrapper — sized to brain + satellites */
  overflow: visible;
}
.brain-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sausera-brain-central {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 122, 0.55), rgba(200, 144, 28, 0.25) 55%, rgba(200,144,28,0.05) 80%, transparent 100%);
  border: 2.5px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    0 0 32px rgba(200, 144, 28, 0.6),
    0 0 72px rgba(200, 144, 28, 0.35),
    inset 0 0 24px rgba(255, 210, 122, 0.25);
  animation: brainPulse 2.5s ease-in-out infinite;
  z-index: 12;
}
.sausera-brain-central .brain-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(200,144,28,0.6));
}
.sausera-brain-central .brain-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-2);
}
.sausera-brain-central .brain-sub {
  font-size: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

@keyframes brainPulse {
  0%, 100% {
    box-shadow:
      0 0 32px rgba(200, 144, 28, 0.6),
      0 0 72px rgba(200, 144, 28, 0.35),
      inset 0 0 24px rgba(255, 210, 122, 0.25);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 56px rgba(200, 144, 28, 0.85),
      0 0 120px rgba(200, 144, 28, 0.55),
      inset 0 0 36px rgba(255, 210, 122, 0.4);
    transform: scale(1.04);
  }
}

/* 12 satellite nodes orbiting brain at fixed positions */
.brain-satellite {
  position: absolute;
  background: #141414;
  border: 1px solid rgba(200, 144, 28, 0.8);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 10px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(200, 144, 28, 0.25);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-weight: 500;
  z-index: 10;
}
.brain-satellite .sat-arrow {
  display: block;
  font-size: 8px;
  color: var(--gold);
  margin-top: 2px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* Filament SVG layer above the brain — connects brain to each satellite */
.brain-filaments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
}
/* V12 — Brain filaments scaled up so the spiderweb reads at zoom 0.65×.
   Solid stroke (no dashes), thicker, with a soft gold glow. */
.brain-filament {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.5px;
  stroke-linecap: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(200,144,28,0.55));
  animation: filamentPulse 3s ease-in-out infinite;
}
@keyframes filamentPulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* Decision diamonds inside the brain area */
.brain-decision {
  position: absolute;
  width: 64px;
  height: 64px;
  background: #0a0a0a;
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  z-index: 11;
  box-shadow: 0 0 12px rgba(200,144,28,0.3);
}
.brain-decision span {
  transform: rotate(-45deg);
  display: inline-block;
  text-align: center;
  line-height: 1.1;
}

/* === V5 Fix 4 — Restructured Founding Offer tier card grid === */
.founding-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 880px;
}
.founding-inner .founding-headline {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}
.founding-inner .founding-subhead {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: 1.45;
}
.founding-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.founding-tiers .tier-card {
  background: #0d0d0d;
  border: 1px solid rgba(200,144,28,0.3);
  border-radius: 8px;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.founding-tiers .tier-card-featured {
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(200,144,28,0.06), #0d0d0d 50%);
  box-shadow: 0 0 22px rgba(200,144,28,0.25);
}
.founding-tiers .tier-card h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0;
  font-weight: 700;
}
.founding-tiers .tier-price {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}
.founding-tiers .tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.founding-tiers .tier-features li {
  font-size: 10px;
  color: rgba(255,255,255,0.72);
  padding-left: 12px;
  position: relative;
  line-height: 1.35;
}
.founding-tiers .tier-features li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.7;
}
.founding-bonus-stack {
  border: 1px solid rgba(200,144,28,0.35);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(200,144,28,0.04);
}
.founding-bonus-stack .bonus-stack-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
}
.founding-bonus-stack .bonus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.founding-bonus-stack .bonus-list li {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  padding-left: 14px;
  position: relative;
}
.founding-bonus-stack .bonus-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.founding-slots {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(200,144,28,0.1);
  border-radius: 4px;
  align-self: flex-start;
}
.founding-slots .slot-count {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.founding-slots .slot-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.founding-inner .founding-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.founding-inner .founding-ctas .cta {
  flex: 1 1 auto;
  text-align: center;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.founding-inner .founding-ctas .cta-primary {
  background: var(--gold);
  color: #0A0A0A;
  box-shadow: 0 6px 20px rgba(200,144,28,0.35);
}
.founding-inner .founding-ctas .cta-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.founding-inner .founding-ctas .cta:hover {
  transform: translateY(-1px);
}

/* === V5 Fix 7 — Add-on sub-section cards (one per sub-stop in Zone 5) === */
.addon-card {
  border: 1px solid rgba(200,144,28,0.3);
  border-radius: 8px;
  padding: 10px 10px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.015);
}
.addon-card[id="addon-overview"] {
  border-color: rgba(200,144,28,0.6);
  background: linear-gradient(180deg, rgba(200,144,28,0.06), transparent 60%);
}
.addon-card .addon-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
  border-bottom: 1px dashed rgba(200,144,28,0.3);
  padding-bottom: 4px;
}
.addon-card .addon-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

/* ====================================================================
   V6 — DESCRIPTIONS + FINAL POLISH
   ==================================================================== */

/* === V8 — Description INSIDE zone wrapper via flexbox =====================
   Every .zone is a flexbox container holding the description header AND the
   inner model content as siblings. The zone wrapper grows to contain both
   with a 32px gap. data-layout="row|column|row-reverse|column-reverse"
   chooses the axis. Zone 14 is the only exception (external-desc via JS). */
.zone[data-v5-header="1"] {
  display: flex;
  gap: 32px;
  padding: 24px !important;
  /* Allow the wrapper to grow naturally to contain description + model.
     Overrides the V3/V4 inline width/height that constrained content to a
     specific footprint. */
  width: max-content !important;
  height: max-content !important;
  min-width: 0;
  min-height: 0;
}
.zone[data-layout="row"]            { flex-direction: row;            align-items: flex-start; }
.zone[data-layout="row-reverse"]    { flex-direction: row-reverse;    align-items: flex-start; }
.zone[data-layout="column"]         { flex-direction: column;         align-items: stretch; }
.zone[data-layout="column-reverse"] { flex-direction: column-reverse; align-items: stretch; }

/* The header is now inline-flow inside the zone wrapper */
.zone-header.zone-header-full {
  position: relative;
  flex: 0 0 auto;
  width: 340px;
  max-width: 380px;
  padding: 14px 16px;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(200, 144, 28, 0.4);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* The wrapped model content. installer wraps existing zone children into this. */
.zone-inner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

/* V8 Fix 5 — Zone 14 exception: description sits OUTSIDE the zone, positioned
   absolutely on the canvas, NOT inside the zone wrapper. */
.zone-with-external-desc {
  /* Zone 14 keeps a column inner layout (no description sibling) */
}
.zone-header-full.external-desc {
  position: absolute;
  z-index: 65;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  /* left/top set by positionExternalDescriptions() in JS */
}

/* === V14 — Zone 4 brain doubled to 4400×3200. Description card pinned
   top-left; entire tile is the brain-stage. Raised motherboard treatment
   intensified (larger shadow, stronger gold glow) so the doubled tile
   reads as elevated even at the new size. === */
.zone[data-zone-id="4"][data-v5-header="1"],
.zone#zone-ai-brain[data-v5-header="1"] {
  display: block !important;
  position: absolute;
  width: 4400px !important;
  height: 3200px !important;
  min-width: 4400px !important;
  min-height: 3200px !important;
  padding: 0 !important;
  gap: 0;
  flex-direction: initial;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
  /* Raised motherboard treatment — intensified for doubled tile */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.92),
    0 0 120px rgba(200, 144, 28, 0.55),
    0 0 280px rgba(200, 144, 28, 0.28),
    inset 0 0 0 2px rgba(255, 210, 122, 0.7);
}
/* Description card pinned at top-left, raised above the stage */
.zone#zone-ai-brain[data-v5-header="1"] > .zone-header-full {
  position: absolute !important;
  top: 24px;
  left: 24px;
  width: 360px;
  max-width: 360px;
  z-index: 60;
}
/* Brain stage fills the entire 2200×1600 tile */
.zone#zone-ai-brain[data-v5-header="1"] > .zone-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block !important;
  flex-direction: initial;
}
.zone#zone-ai-brain[data-v5-header="1"] .brain-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  min-height: 0;
}
.zone-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.zone-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zone-description {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}
.zone-description::-webkit-scrollbar { width: 4px; }
.zone-description::-webkit-scrollbar-thumb {
  background: rgba(200, 144, 28, 0.45);
  border-radius: 2px;
}
.zone-description::-webkit-scrollbar-track {
  background: transparent;
}

/* === V6 Fix 2 — Sausera Brain doubled in size + zone-level glow === */
.zone[id="zone-ai-brain"] {
  border: 1.5px solid rgba(200, 144, 28, 0.7) !important;
  background: radial-gradient(circle at center, rgba(200, 144, 28, 0.07), rgba(10, 10, 10, 0) 70%) !important;
  box-shadow:
    0 0 60px rgba(200, 144, 28, 0.4),
    0 0 120px rgba(200, 144, 28, 0.25),
    0 0 200px rgba(200, 144, 28, 0.15);
  animation: brainZonePulse 4s ease-in-out infinite;
}
@keyframes brainZonePulse {
  0%, 100% {
    box-shadow:
      0 0 60px rgba(200, 144, 28, 0.4),
      0 0 120px rgba(200, 144, 28, 0.25),
      0 0 200px rgba(200, 144, 28, 0.15);
  }
  50% {
    box-shadow:
      0 0 100px rgba(200, 144, 28, 0.6),
      0 0 200px rgba(200, 144, 28, 0.4),
      0 0 320px rgba(200, 144, 28, 0.25);
  }
}

/* V14 — Brain central rescaled to ~1/3 of doubled-tile shorter dimension.
   Tile is 4400x3200 → shorter dim 3200 → brain diameter ~1067px. Inline
   width/height are set by layoutBrainZone() at runtime; CSS sets fonts. */
.sausera-brain-central {
  font-size: 64px !important;
}
.sausera-brain-central .brain-icon { font-size: 144px !important; margin-bottom: 28px !important; }
.sausera-brain-central .brain-label { font-size: 56px !important; }
.sausera-brain-central .brain-sub { font-size: 32px !important; }

/* Satellite chips — scaled up to remain readable around the bigger brain */
.brain-satellite {
  padding: 20px 28px !important;
  font-size: 24px !important;
  min-width: 320px !important;
  border-width: 2px !important;
}
.brain-satellite .sat-arrow {
  font-size: 18px !important;
  margin-top: 8px !important;
}

/* Decision diamonds — scaled up to match */
.brain-decision {
  width: 180px !important;
  height: 180px !important;
  font-size: 18px !important;
}

/* V14 — Brain filaments scaled up to remain visible at the bigger orbit */
.brain-filament {
  stroke-width: 6px;
}

/* === V6 Fix 6 — Outputs zone: bigger nodes, more breathing room === */
#zone-outputs .zone-node {
  padding: 8px 12px !important;
  font-size: 12px !important;
  max-width: 220px !important;
}
#zone-outputs .flow-arrow {
  font-size: 14px !important;
  margin: 4px 0 !important;
}

/* === V6 Fix 4 — Zone 14 sub-module cards === */
.intel-card {
  border: 1px solid rgba(200,144,28,0.3);
  border-radius: 8px;
  padding: 10px 12px 12px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.015);
}
.intel-card[id="zone-14-overview"] {
  border-color: rgba(200,144,28,0.6);
  background: linear-gradient(180deg, rgba(200,144,28,0.06), transparent 60%);
}
.intel-card .intel-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
  border-bottom: 1px dashed rgba(200,144,28,0.3);
  padding-bottom: 4px;
}

/* === V6 Fix 10 — Foundation sub-section IDs === */
.foundation-grid .phase-band[id^="foundation-"] {
  /* Make each foundation sub-section addressable as a tour sub-target */
  scroll-margin-top: 80px;
}

/* === V6 Fix 11 — Long-range Brain filaments to other zones ===
   Thin pulsing gold lines that telegraph the AI Brain's influence over
   every major zone. Lower opacity than in-zone filaments so they read
   as background-layer connective tissue. */
.connector-brain-filament {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2px;
  stroke-dasharray: 6 6;
  opacity: 0.4;
  animation: brainFilamentDrift 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brainFilamentDrift {
  0%, 100% { opacity: 0.25; stroke-dashoffset: 0; }
  50%      { opacity: 0.7;  stroke-dashoffset: -24; }
}

/* =================================================================
   V9 — Universal orthogonal connector style. Every connector path
   on the canvas SVG uses square line caps + miter joins so 90° corners
   read as sharp circuit-board angles. Variants:
     .connector-main     — primary flow, thick gold
     .connector-branch   — secondary / branch, slightly thinner
     .connector-dashed   — conditional / decision branches
     .connector-thin     — long-range / feedback / power lines
     .connector-feedback — AI feedback loop (low-opacity dashed)
   ================================================================= */
#connectorsSvg path,
.connector-main,
.connector-branch,
.connector-dashed,
.connector-thin,
.connector-feedback,
.connector-loop,
.connector-pulse {
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.connector-feedback {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1px;
  stroke-dasharray: 2 5;
  opacity: 0.55;
  pointer-events: none;
}

/* V9 Fix 6 — Zone 13 Homeowner: column-reverse keeps model above the
   description, and a wider flex gap prevents the description from
   crowding the model's bottom edge at any tour zoom. */
.zone[data-zone-id="13"],
.zone[id="zone-homeowner"][data-v5-header="1"] {
  gap: 64px;
}

/* V12 — Zone 14 Founder Direct Line: column-reverse layout (model on
   top, description below). Gap doubled to 80px + extra bottom padding
   so the description card sits clearly below the bottom node of the
   model at all tour zooms. */
.zone[id="zone-founder"][data-v5-header="1"] {
  gap: 80px;
  padding-bottom: 48px;
}

/* V13 — Circuit-board wire layer. SVG sits behind every .zone tile so the
   28 wires appear to dive UNDER the raised Zone 4 motherboard. Brand-gold
   strokes, rounded caps/joins, soft glow filter applied via SVG filter. */
.circuit-wires-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* V16 — wires must render ABOVE destination tiles so the +7px in-tile
     dock is visible. Previously z-index:1 placed wires BEHIND zones
     (z=5) AND BEHIND .zone-founder/recovery (z=6-7) AND BEHIND
     .zone-founding (z=7). With tiles having backdrop-filter:blur(2px)
     and rgba(20,20,20,0.55) background, the in-tile portion of every
     wire was blurred to invisibility, reading as a gap.
     z-index:49 keeps wires below the Z4 brain motherboard (inline
     z-index:50) so they still appear to emerge from under the brain
     tile, while sitting above every other zone. */
  z-index: 49;
  overflow: visible;
}
.circuit-wire {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.78;
  filter: drop-shadow(0 0 4px rgba(200,144,28,0.55))
          drop-shadow(0 0 10px rgba(200,144,28,0.32));
}

/* V12 — Zone 16 Foundation Layer: pull the injected step badge INSIDE
   the container at top-left so it stops looking like a detached
   floating card. The default .zone-header sits absolutely above the
   zone box at top:-52px; this override re-pins it inside the panel,
   compact and out of the way. */
.zone[id="zone-foundation"] > .zone-header {
  top: 14px;
  left: 14px;
  min-width: 0;
  padding: 6px 10px 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  background: rgba(10, 10, 10, 0.88);
}
.zone[id="zone-foundation"] > .zone-header .zone-label {
  font-size: 10px;
  letter-spacing: 0.14em;
}
.zone[id="zone-foundation"] > .zone-header .zone-step-indicator {
  font-size: 9.5px;
}
.zone[id="zone-foundation"] > .zone-header .zone-number-marker {
  width: 26px;
  height: 26px;
  font-size: 13px;
}
/* Push the existing zone-head down so it doesn't collide with the
   pinned step badge in the top-left corner. */
.zone[id="zone-foundation"] > .zone-inner > .zone-head {
  margin-left: 220px;
}

/* =====================================================
   V19 — Mobile interactive-map toggle controls
   ===================================================== */

/* "View Interactive Map" entry sits at the very top of the vertical
   scroll mobile view. Desktop never sees it. */
.mobile-map-switch { display: none; }
@media (max-width: 768px) {
  .mobile-map-switch {
    display: block;
    text-align: center;
    padding: 96px var(--pad) 0;
    /* nav-aware top padding mirrors .map-intro */
  }
  body.map-active .mobile-map-switch { display: none; }
}
.btn-mobile-interactive-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold-glow), var(--gold) 50%, var(--gold-deep));
  color: #000;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  box-shadow: 0 10px 26px rgba(200, 144, 28, 0.45);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-mobile-interactive-map:active {
  transform: translateY(1px);
}
.mobile-map-switch-hint {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* "Back to Scroll View" — only on mobile + map-active. */
.mobile-back-to-scroll-btn { display: none; }
@media (max-width: 768px) {
  body.map-active .mobile-back-to-scroll-btn {
    display: inline-flex;
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    background: rgba(10, 10, 10, 0.92);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 9px 16px;
    border-radius: 999px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
  }
}