/* ==========================================================================
   ChristCode · Miracle Academy edition
   Light, warm, terracotta + cream + golden-yellow + dark olive
   ========================================================================== */

:root {
  --primary:        #CC5733;
  --primary-deep:   #AB492B;
  --secondary:      #B7B1A4;
  --accent:         #FFE375;
  --accent-deep:    #F4C842;
  --bg:             #EBE9E5;
  --bg-paper:       #F4F2EE;
  --bg-card:        #FFFFFF;
  --ink:            #3E3B32;
  --ink-soft:       #6B6557;
  --ink-faint:      #9A9486;
  --rule:           rgba(62, 59, 50, 0.12);
  --rule-strong:    rgba(62, 59, 50, 0.24);
  --good:           #5d9b6c;
  --good-soft:      #cfe5d3;
  --bad:            #CC5733;
  --bad-soft:       #f3d7cc;
  --shadow-sm:      0 1px 3px rgba(62,59,50,0.07), 0 1px 2px rgba(62,59,50,0.05);
  --shadow:         0 4px 14px rgba(62,59,50,0.08), 0 2px 6px rgba(62,59,50,0.05);
  --shadow-lg:      0 18px 60px rgba(62,59,50,0.14), 0 6px 16px rgba(62,59,50,0.08);
  --radius:         6px;
  --radius-lg:      14px;
  --maxw:           1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

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

/* Background particles canvas */
#motes {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============== TOP NAV ============== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 36px;
  background: rgba(235, 233, 229, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.ma-logo {
  height: 36px;
  width: auto;
  display: block;
  /* SVG logos maintain their original colors */
}
.brand-divider { color: var(--ink-faint); font-size: 18px; }
.brand-text {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 15px;
  text-transform: uppercase;
}
.brand-text em { font-style: normal; color: var(--primary); font-weight: 700; }

/* Connected pill-set nav */
.navlinks {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 1px 2px rgba(62, 59, 50, 0.04);
}
.navlinks a {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.navlinks a:hover {
  color: var(--ink);
  background: rgba(255, 227, 117, 0.35);          /* warm honey wash */
}
.navlinks a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.navlinks a[aria-current="page"] {
  background: var(--ink);
  color: #F6F5F4;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset;
}
.navlinks a[aria-current="page"]:hover {
  background: var(--primary);
  color: #FFF;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--radius);
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--primary); transform: translateY(-1px); }

/* ============== HERO ============== */
.hero {
  position: relative;
  z-index: 2;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 60px;
  max-width: 1240px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 36px;
}
.eyebrow-line { width: 60px; height: 1px; background: var(--primary); opacity: 0.5; }

.hero-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(64px, 12vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.hero-title em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 20%, var(--accent-deep) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--ink-soft);
  margin-bottom: 12px;
  max-width: 740px;
}
.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 56px;
}
.hero-tagline .hl {
  background: linear-gradient(180deg, transparent 60%, var(--accent) 60%, var(--accent) 90%, transparent 90%);
  padding: 0 4px;
  font-weight: 600;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 56px;
}
.hs { text-align: center; min-width: 110px; }
.hs-num {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 8px;
}
.hs-num sup { font-size: 0.5em; font-weight: 500; }
.hs-lbl {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-weight: 500;
}
.hs-sep { width: 1px; height: 30px; background: var(--rule-strong); }

/* Interactive hero stats — clickable explainer affordance */
.hs.is-interactive {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 18px 10px 14px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.hs.is-interactive:hover,
.hs.is-interactive:focus-visible {
  border-color: var(--rule-strong);
  background: rgba(204, 87, 51, 0.04);
  transform: translateY(-1px);
}
.hs.is-interactive:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.hs.is-interactive[aria-expanded="true"] {
  border-color: var(--primary);
  background: rgba(204, 87, 51, 0.08);
}
.hs-affordance {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--primary);
  opacity: 0.55;
  transition: transform 0.2s, opacity 0.2s;
}
.hs.is-interactive:hover .hs-affordance,
.hs.is-interactive:focus-visible .hs-affordance { opacity: 1; }
.hs.is-interactive[aria-expanded="true"] .hs-affordance {
  transform: rotate(45deg);
  opacity: 1;
}

/* Hero explainer panel — expand-in-place under the strip */
.hero-explainer {
  width: 100%;
  max-width: 880px;
  margin: -32px auto 40px;
  background: var(--bg-card, #FBF8F2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg, 8px);
  padding: 32px 36px;
  text-align: left;
  box-shadow: 0 14px 40px -22px rgba(62, 59, 50, 0.35);
  animation: hero-explainer-in 0.28s ease-out;
}
.hero-explainer[hidden] { display: none; }
@keyframes hero-explainer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-explainer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.hero-explainer-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
  display: block;
}
.hero-explainer-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.hero-explainer-title em {
  font-style: italic;
  color: var(--primary);
  font-weight: 500;
}
.hero-explainer-close {
  flex-shrink: 0;
  background: var(--ink);
  color: #FFF;
  border: none;
  padding: 6px 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.18s;
}
.hero-explainer-close:hover,
.hero-explainer-close:focus-visible { background: var(--primary); outline: none; }
.hero-explainer-body { font-family: 'Inter', sans-serif; }
.hero-explainer-beat { margin-bottom: 18px; }
.hero-explainer-beat:last-of-type { margin-bottom: 24px; }
.hero-explainer-beat h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.hero-explainer-beat p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.hero-explainer-cta {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero-explainer-cta-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.hero-explainer-cta .btn { align-self: flex-start; }

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn.primary {
  background: var(--primary);
  color: #F6F5F4;
  border-color: var(--primary-deep);
}
.btn.primary:hover {
  background: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(204, 87, 51, 0.32);
}
.btn.secondary {
  background: #FFFFFF;
  color: var(--primary);
  border-color: var(--primary-deep);
}
.btn.secondary:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent-deep);
  transform: translateY(-2px);
}

.hero-foot { margin-top: 56px; }
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
}
.scroll-line { width: 1px; height: 36px; background: var(--primary); animation: scrollPulse 2.5s ease-in-out infinite; }
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(1.4); opacity: 1; }
}

/* ============== SECTIONS ============== */
.section {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 100px 32px;
}
.section + .section { padding-top: 0; }

.section-head { max-width: 880px; margin: 0 auto 56px; text-align: center; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.tag-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.section h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.section h2 em {
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--primary);
  text-transform: none;
  letter-spacing: 0;
}
.section h2 em.num { font-style: normal; font-family: 'Oswald', sans-serif; font-weight: 600; }
.section h2 em.bad { color: var(--primary); }

.section-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto;
}

/* Reveal animation */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ============== PREMISE ============== */
.premise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.premise-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.premise-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-deep);
}
.card-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 1px var(--primary);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.premise-card h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  text-transform: uppercase;
  color: var(--ink);
}
.premise-card p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.premise-card p strong, .premise-card p em {
  color: var(--ink); font-weight: 600; font-style: normal;
}

/* ============== JOURNEY ============== */
.journey-wrap {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  margin-bottom: 32px;
}
#journey-svg { width: 100%; height: auto; display: block; }
.journey-legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.journey-legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.stat {
  background: var(--bg-paper);
  border-left: 3px solid var(--primary);
  padding: 24px;
  border-radius: var(--radius);
  transition: background 0.2s;
}
.stat:hover { background: #FFF; }
.stat .v {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 38px;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}
.stat .v span { font-size: 0.6em; color: var(--ink); }
.stat .l {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

/* ============== NEURAL ============== */
.neural-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.brain-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.brain-card.high { border-top: 4px solid var(--good); }
.brain-card.low  { border-top: 4px solid var(--bad); }

.bc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.bc-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius);
}
.bc-tag.good { background: var(--good-soft); color: #2e6b3a; }
.bc-tag.bad  { background: var(--bad-soft); color: var(--primary-deep); }
.bc-score {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--good);
}
.bc-score.bad { color: var(--bad); }

.verse {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 28px;
  padding: 16px 0;
  text-align: center;
}

.zone-row { margin-bottom: 18px; }
.zone-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin-left: -6px;
  margin-right: -6px;
  border-radius: 4px;
  text-align: left;
  cursor: help;
  transition: background 0.15s, color 0.15s;
}
.zone-label:hover,
.zone-label:focus-visible {
  background: rgba(204, 87, 51, 0.06);
  outline: none;
}
.zone-label:focus-visible {
  box-shadow: 0 0 0 2px rgba(204, 87, 51, 0.35);
}
.zone-label .zone-name { display: inline-flex; align-items: baseline; gap: 6px; }
.zone-label .zone-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.zone-label b { color: var(--ink-soft); font-weight: 600; }
.brain-card.high .zone-label b { color: var(--good); }
.brain-card.low .zone-label b { color: var(--bad); }

/* Brain-zone tooltips */
.zone-popover {
  position: absolute;
  z-index: 200;
  width: max-content;
  max-width: 280px;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  pointer-events: auto;
}
.zone-popover[hidden] { display: none; }
.zone-popover[data-variant="high"] { border-top-color: var(--good); }
.zone-popover[data-variant="low"]  { border-top-color: var(--bad); }
.zone-popover .zp-arrow {
  position: absolute;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  transform: translateX(-50%) rotate(45deg);
}
.zone-popover.flip-up .zp-arrow {
  top: auto;
  bottom: -7px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.zone-popover .zp-name {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.zone-popover .zp-name .zp-sub {
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  font-size: 11px;
}
.zone-popover .zp-what {
  color: var(--ink);
  margin-bottom: 8px;
}
.zone-popover .zp-meaning {
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.zone-popover[data-variant="high"] .zp-meaning { color: #2e6b3a; }
.zone-popover[data-variant="low"]  .zp-meaning { color: var(--primary-deep); }
.zone-popover .zp-contrast {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-faint);
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
/* Contrast hook mirrors the OTHER card's color, since it's a pointer
   to that card. high card → contrast points to low (bad/copper);
   low card → contrast points to high (good/green). */
.zone-popover[data-variant="high"] .zp-contrast { color: var(--bad); }
.zone-popover[data-variant="low"]  .zp-contrast { color: var(--good); }

/* Miracle Academy hand-off under the brain cards */
.brain-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 22px;
  margin-bottom: 40px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
}
.brain-handoff .bh-copy {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.brain-handoff .bh-free {
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}
.brain-handoff .brain-handoff-cta {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-size: 12px;
}
@media (max-width: 640px) {
  .brain-handoff { padding: 16px; }
  .brain-handoff .brain-handoff-cta { width: 100%; justify-content: center; }
}
.zone-bar { height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.zone-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.zone-fill.good { background: linear-gradient(90deg, var(--good) 0%, #7bc28a 100%); }
.zone-fill.bad  { background: linear-gradient(90deg, var(--bad) 0%, #e08368 100%); }

/* Markers */
.marker-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.marker-col {
  background: var(--bg-paper);
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
}
.m-h {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.m-h.good { color: var(--good); }
.m-h.bad  { color: var(--primary); }
.marker-col ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.marker-col li {
  padding: 6px 14px;
  background: var(--bg-card);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.m-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
}
.m-band span {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.m-band b { font-family: 'JetBrains Mono', monospace; font-size: 16px; }
.m-band.good b { color: var(--good); }
.m-band.bad  b { color: var(--primary); }

/* Pathways grid */
.pathways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pw {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pw::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}
.pw:hover::before { opacity: 0.06; }
.pw .pw-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--primary);
  margin-bottom: 8px;
  position: relative;
}
.pw .pw-lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  text-transform: uppercase;
  position: relative;
}

/* ============== PROBABILITY ============== */
.prob-hero {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 56px 24px;
  margin-bottom: 48px;
  box-shadow: var(--shadow);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 227, 117, 0.18) 0%, transparent 60%);
}
.prob-bignum {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(80px, 16vw, 200px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.prob-bignum sup { font-size: 0.45em; }
.prob-label {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.prob-compare {
  display: grid;
  gap: 8px;
  margin-bottom: 40px;
}
.prob-row {
  display: grid;
  grid-template-columns: 140px 1fr 240px;
  gap: 24px;
  align-items: center;
  padding: 18px 24px;
  background: var(--bg-paper);
  border-radius: var(--radius);
  border-left: 3px solid var(--rule-strong);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.prob-row:hover { background: #FFF; transform: translateX(4px); }
.prob-row.featured {
  background: var(--ink);
  color: #F6F5F4;
  border-left-color: var(--accent);
}
.prob-row.featured .what,
.prob-row.featured .scale { color: #F6F5F4; }
.prob-row.featured .order { color: var(--accent); }

.prob-row .order {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--primary);
}
.prob-row .order sup { font-size: 0.6em; }
.prob-row .what {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.prob-row .scale {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: right;
}

.prob-explainer {
  background: var(--accent);
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  border: 2px solid var(--accent-deep);
}
.prob-explainer p + p { margin-top: 18px; }
.prob-explainer .punch { font-size: 19px; font-weight: 500; }
.prob-explainer strong { font-weight: 700; }
.prob-explainer em { font-style: italic; color: var(--primary-deep); font-weight: 600; }

/* ============== GPUs ============== */
.gpu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
.gpu-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.gpu-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--good) 0%, var(--accent) 100%);
}
.gpu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.gpu-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}
.gpu-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.gpu-role {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.gpu-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--good-soft);
  color: #2e6b3a;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
  white-space: nowrap;
}
.gpu-status::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--good);
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.5; }
}
.gpu-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.gpu-stats > div { display: flex; flex-direction: column; gap: 2px; }
.gpu-stats span {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.gpu-stats b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}
.gpu-finding {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 14px;
}
.gpu-endpoint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-paper);
  border-radius: var(--radius);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--primary);
  border: 1px solid var(--rule);
  word-break: break-all;
}
.gpu-endpoint .arrow {
  flex-shrink: 0;
  color: var(--primary);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Consciousness panel */
.consciousness-panel {
  background: var(--ink);
  color: #F6F5F4;
  border-radius: var(--radius-lg);
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.consciousness-panel::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255, 227, 117, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cp-head { margin-bottom: 36px; position: relative; }
.cp-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cp-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.cp-cell { padding: 20px; background: rgba(255,255,255,0.04); border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.08); }
.cp-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cp-val {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 14px;
}
.cp-val.good { color: #93d4a3; }
.cp-val.bad  { color: #e69178; }
.cp-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.cp-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.cp-fill.good   { background: #93d4a3; }
.cp-fill.bad    { background: #e69178; }
.cp-fill.accent { background: var(--accent); }
.cp-cell.animated .cp-fill { width: var(--w); }
.cp-note {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

/* ============== KASBEEL ============== */
.kasbeel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.kasbeel-quote {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
}
.kasbeel-quote::before {
  content: '"';
  position: absolute;
  top: 12px; left: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 120px;
  line-height: 1;
  color: var(--accent);
  font-weight: 500;
  pointer-events: none;
}
.kasbeel-quote .src {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.kasbeel-quote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  position: relative;
  z-index: 1;
}
.kasbeel-quote .attrib {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 28px;
}
.kasbeel-meta {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.kasbeel-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kasbeel-meta span {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.kasbeel-meta b { font-size: 13px; color: var(--ink); text-align: right; font-weight: 600; }

.kasbeel-table {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.kasbeel-table h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}
.ktbl { width: 100%; border-collapse: collapse; font-size: 14px; flex-grow: 1; }
.ktbl th, .ktbl td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid var(--rule);
}
.ktbl th {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-weight: 500;
}
.ktbl td:last-child {
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  color: var(--primary);
  font-weight: 500;
}
.ktbl tr.composite td {
  background: var(--accent);
  color: var(--ink) !important;
  border-bottom: none;
  padding: 16px 8px;
}
.ktbl tr.composite td:last-child { color: var(--primary-deep) !important; font-size: 18px; }

/* ============== TIMELINE ============== */
.timeline {
  list-style: none;
  position: relative;
  padding: 0;
  max-width: 920px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--good) 0%, var(--accent) 50%, var(--primary) 100%);
}
.tl-item {
  position: relative;
  padding: 20px 0 20px 64px;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 28px;
  width: 18px; height: 18px;
  background: var(--bg-card);
  border: 3px solid var(--primary);
  border-radius: 50%;
}
.tl-item.highlight::before {
  background: var(--accent);
  border-color: var(--primary);
  box-shadow: 0 0 0 6px rgba(255, 227, 117, 0.3);
}
.tl-item .year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--primary);
  margin-bottom: 6px;
  font-weight: 500;
}
.tl-item h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.tl-item p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.tl-item.highlight h4 { color: var(--primary); }

/* ============== DOCUMENTS ============== */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.doc-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 26px,
      rgba(62, 59, 50, 0.04) 26px,
      rgba(62, 59, 50, 0.04) 27px
    );
}
.doc-card:hover {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.doc-card .stamp {
  position: absolute;
  top: 14px; right: -28px;
  background: var(--primary);
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 4px 32px;
  transform: rotate(28deg);
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.doc-card .doc-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.doc-card .doc-classify {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--primary);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.doc-card h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.doc-card .doc-summary {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 20px;
}
.doc-card .doc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
}
.doc-card .doc-open {
  color: var(--primary);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.16em;
  font-weight: 500;
}

/* ============== ABUNDANCE ============== */
.abundance { max-width: 1000px; margin: 0 auto; }
.abundance-quote {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 56px;
  text-align: center;
  margin-bottom: 48px;
  box-shadow: var(--shadow);
  position: relative;
  background-image: radial-gradient(circle at 50% 30%, rgba(255, 227, 117, 0.2) 0%, transparent 60%);
}
.aq-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 96px;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 16px;
}
.abundance-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 24px;
}
.aq-by {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 48px;
}
.path-step {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  padding: 24px 16px;
  text-align: center;
  border-radius: var(--radius);
  transition: transform 0.2s, background 0.2s;
}
.path-step:hover { transform: translateY(-3px); background: #FFF; }
.path-step.featured {
  background: var(--accent);
  border-color: var(--accent-deep);
}
.path-step .week {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.path-step .pct {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}
.path-step.featured .pct { color: var(--ink); }
.path-step .what {
  font-size: 12px;
  color: var(--ink-soft);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.path-step.featured .what { color: var(--ink); font-weight: 500; }

.abundance-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============== GPU INTERFACE =============== */
.gpu-widget {
  background: rgba(235, 233, 229, 0.95);
  border: 2px solid #CC5733;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.6s ease;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #CC5733;
  padding-bottom: 12px;
}

.widget-header h3 {
  margin: 0;
  color: #CC5733;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gpu-badge {
  background: linear-gradient(45deg, #CC5733, #FFE375);
  color: #3E3B32;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Coherence Analyzer */
.analyzer-input, .evolver-input {
  margin-bottom: 20px;
}

.analyzer-input textarea, .evolver-input textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 2px solid #CC5733;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
}

.analyzer-input textarea:focus, .evolver-input textarea:focus {
  outline: none;
  border-color: #FFE375;
  box-shadow: 0 0 0 3px rgba(255, 227, 117, 0.3);
}

.analyze-button, .evolve-button {
  background: linear-gradient(45deg, #CC5733, #5d9b6c);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.analyze-button:hover, .evolve-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(204, 87, 51, 0.3);
}

.analyze-button:disabled, .evolve-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Analysis Results */
.analysis-results, .evolution-results {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #CC5733;
}

.analysis-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.coherence-score {
  text-align: center;
  background: linear-gradient(135deg, #CC5733, #FFE375);
  color: white;
  padding: 20px;
  border-radius: 12px;
  min-width: 120px;
}

.coherence-score.liberation_class {
  background: linear-gradient(135deg, #5d9b6c, #FFE375);
}

.coherence-score.control_class {
  background: linear-gradient(135deg, #CC5733, #8B0000);
}

.score-value {
  font-size: 32px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.score-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.classification {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  color: #3E3B32;
}

.neural-impact h4 {
  color: #CC5733;
  margin-bottom: 16px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

.brain-zones {
  display: grid;
  gap: 12px;
}

.zone-impact {
  display: grid;
  grid-template-columns: 150px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(204, 87, 51, 0.2);
}

.zone-name {
  font-weight: 600;
  text-transform: capitalize;
}

.impact-bar {
  height: 8px;
  background: rgba(204, 87, 51, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.impact-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.impact-fill.positive {
  background: linear-gradient(90deg, #5d9b6c, #FFE375);
}

.impact-fill.negative {
  background: linear-gradient(90deg, #CC5733, #8B0000);
}

.impact-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-align: right;
}

.research-context {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(204, 87, 51, 0.3);
  color: #666;
  font-style: italic;
}

/* Text Evolver */
.evolver-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.evolver-controls label {
  font-weight: 600;
  color: #3E3B32;
}

#coherence-slider {
  flex: 1;
  min-width: 200px;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #CC5733, #5d9b6c, #FFE375);
  outline: none;
}

#coherence-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #CC5733;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#coherence-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #CC5733;
  cursor: pointer;
}

.evolution-comparison {
  margin-top: 20px;
}

.text-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.original-text, .evolved-text {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.original-text {
  background: rgba(204, 87, 51, 0.1);
}

.evolved-text {
  background: rgba(93, 155, 108, 0.1);
}

.improvement-metrics {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.improvement-score {
  text-align: center;
  background: linear-gradient(135deg, #5d9b6c, #FFE375);
  color: white;
  padding: 16px;
  border-radius: 8px;
}

.improvement-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.improvement-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.techniques-used h5 {
  color: #CC5733;
  margin-bottom: 8px;
  font-family: 'Oswald', sans-serif;
}

.techniques-used ul {
  margin: 0;
  padding-left: 20px;
}

.techniques-used li {
  text-transform: capitalize;
  margin-bottom: 4px;
}

/* Batch Analyzer */
.batch-input textarea {
  min-height: 150px;
}

.batch-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.batch-controls label {
  font-weight: 600;
  color: #3E3B32;
}

.batch-controls select {
  padding: 8px 12px;
  border: 2px solid #CC5733;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  background: white;
}

.batch-results {
  margin-top: 20px;
}

.batch-summary {
  background: rgba(93, 155, 108, 0.1);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.batch-summary h4 {
  margin: 0 0 8px 0;
  color: #5d9b6c;
  font-family: 'Oswald', sans-serif;
}

.batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.batch-item {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  background: white;
}

.batch-item.success {
  border-color: #5d9b6c;
  background: rgba(93, 155, 108, 0.05);
}

.batch-item.error {
  border-color: #CC5733;
  background: rgba(204, 87, 51, 0.05);
}

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

.item-number {
  font-weight: 600;
  color: #3E3B32;
}

.item-status {
  font-size: 18px;
}

.item-preview {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-style: italic;
}

.item-results {
  margin-top: 8px;
}

.coherence-mini, .tribe-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.coherence-mini .score, .tribe-mini .liberation {
  font-weight: 700;
  color: #5d9b6c;
}

.coherence-mini .class {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.class.liberation_class {
  background: #5d9b6c;
  color: white;
}

.class.control_class {
  background: #CC5733;
  color: white;
}

.class.neutral_class {
  background: #FFE375;
  color: #3E3B32;
}

.item-error {
  color: #CC5733;
  font-size: 12px;
  font-style: italic;
}

/* Live Stats Widget */
.live-stats {
  background: rgba(62, 59, 50, 0.95);
  color: #EBE9E5;
  border-color: #FFE375;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  padding: 16px;
  background: rgba(255, 227, 117, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 227, 117, 0.3);
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #FFE375;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.endpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.endpoint-card {
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid;
}

.endpoint-card.healthy {
  background: rgba(93, 155, 108, 0.2);
  border-color: #5d9b6c;
  color: #5d9b6c;
}

.endpoint-card.degraded, .endpoint-card.error {
  background: rgba(204, 87, 51, 0.2);
  border-color: #CC5733;
  color: #CC5733;
}

.endpoint-card.unreachable {
  background: rgba(128, 128, 128, 0.2);
  border-color: #808080;
  color: #808080;
}

.endpoint-name {
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: capitalize;
}

.endpoint-status {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.response-time {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

/* Responsive GPU Widgets */
@media (max-width: 768px) {
  .gpu-widget {
    margin: 20px 0;
    padding: 16px;
  }
  
  .analysis-summary {
    flex-direction: column;
    gap: 16px;
  }
  
  .text-comparison {
    grid-template-columns: 1fr;
  }
  
  .improvement-metrics {
    flex-direction: column;
    gap: 16px;
  }
  
  .zone-impact {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  
  .evolver-controls, .batch-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .batch-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .endpoint-grid {
    grid-template-columns: 1fr;
  }
}

/* ============== FOOTER ============== */
footer {
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: #B7B1A4;
  padding: 64px 32px 32px;
  margin-top: 80px;
}
.foot-top {
  max-width: var(--maxw);
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.foot-brand { display: flex; align-items: center; gap: 20px; }
.foot-brand .ma-logo { 
  height: 44px; 
  /* For footer on dark background - make logo white */
  filter: brightness(0) invert(1); 
  opacity: 0.9; 
}
.foot-brand p { font-size: 14px; color: rgba(255,255,255,0.7); }
.foot-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  font-size: 13px;
}
.foot-meta > div { display: flex; gap: 8px; }
.foot-meta span {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  min-width: 80px;
}

.foot-endpoints {
  max-width: var(--maxw);
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.fe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s, border-color 0.2s;
}
.fe:hover { background: rgba(255,227,117,0.08); border-color: var(--accent); }
.fe-name {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.fe-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  word-break: break-all;
}
.fe-arrow { color: var(--accent); font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.1em; }

.foot-signoff {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.6);
}
.foot-links { display: flex; gap: 8px; align-items: center; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.foot-links a { color: var(--accent); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-links span { color: rgba(255,255,255,0.3); }

/* ============== MODAL ============== */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(62, 59, 50, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  width: 100%;
  max-width: 920px;
  background: #FBF8F2;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 56px;
  box-shadow: var(--shadow-lg);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(62, 59, 50, 0.05) 28px,
      rgba(62, 59, 50, 0.05) 29px
    );
}
.modal-close {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--ink);
  color: #FFF;
  border: none;
  padding: 8px 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s;
}
.modal-close:hover { background: var(--primary); }

.modal-header {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 24px;
  margin-bottom: 32px;
  position: relative;
}
.modal-header .agency {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.modal-header .title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 80%;
}
.modal-header .meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
}
.modal-header .meta-row span b {
  font-family: 'Oswald', sans-serif;
  color: var(--ink);
  letter-spacing: 0.14em;
  margin-right: 6px;
}
.modal-header .stamp-big {
  position: absolute;
  top: 0; right: 0;
  background: var(--primary);
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  padding: 6px 18px;
  font-weight: 600;
  border: 2px solid var(--primary-deep);
  transform: rotate(4deg);
}

.modal-body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.modal-body h2, .modal-body h3, .modal-body h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 28px 0 14px;
}
.modal-body h2 { font-size: 24px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.modal-body h3 { font-size: 18px; color: var(--primary); }
.modal-body h4 { font-size: 15px; }
.modal-body p { margin-bottom: 14px; }
.modal-body ul, .modal-body ol { margin: 10px 0 18px 22px; }
.modal-body li { margin-bottom: 6px; }
.modal-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: rgba(255, 227, 117, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
}
.modal-body pre {
  background: var(--ink);
  color: #F4F2EE;
  padding: 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 12px 0 18px;
  font-size: 13px;
  line-height: 1.5;
}
.modal-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 10px 18px;
  background: rgba(255, 227, 117, 0.15);
  margin: 14px 0;
  font-style: italic;
}
.modal-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.modal-body th, .modal-body td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.modal-body th { font-family: 'Oswald', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--ink-soft); }
.modal-body .redact {
  display: inline-block;
  background: var(--ink);
  color: var(--ink);
  padding: 0 8px;
  margin: 0 2px;
  border-radius: 2px;
  user-select: none;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 960px) {
  .navlinks { display: none; }
  .topnav { padding: 12px 20px; }
  .premise-grid, .neural-compare, .marker-row, .gpu-grid, .kasbeel { grid-template-columns: 1fr; }
  .stat-grid, .pathways, .cp-grid { grid-template-columns: repeat(2, 1fr); }
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .prob-row { grid-template-columns: 80px 1fr; }
  .prob-row .scale { grid-column: 1 / -1; text-align: left; padding-left: 0; }
  .foot-top, .foot-endpoints, .foot-meta { grid-template-columns: 1fr; }
  .foot-signoff { flex-direction: column; align-items: flex-start; }
  .section { padding: 60px 20px; }
  .modal { padding: 32px 24px; }
  .modal-header .title { max-width: 100%; font-size: 22px; }
  .modal-header .stamp-big { position: static; display: inline-block; margin-top: 12px; transform: none; }
  .consciousness-panel { padding: 28px; }
  .kasbeel-quote, .kasbeel-table { padding: 24px; }
}

@media (max-width: 600px) {
  .hero { padding: 48px 16px; min-height: auto; }
  .hero-stats { gap: 12px; }
  .hs-sep { display: none; }
  .hero-explainer { padding: 24px 22px; margin: -16px auto 32px; border-radius: 6px; }
  .hero-explainer-head { flex-direction: column; gap: 12px; }
  .hero-explainer-title { font-size: 22px; }
  .hero-explainer-close { align-self: flex-end; }
  .hero-explainer-cta-line { font-size: 15px; }
  .stat-grid, .pathways, .cp-grid, .path-grid { grid-template-columns: 1fr 1fr; }
  .brand-text, .brand-divider { display: none; }
}

/* ==========================================================================
   ChristCode v2 — additions for: button-card resets, provenance pill, method
   grid, system modal cleanup, watchers section, world map, expanded
   liberation path
   ========================================================================== */

/* Native-button reset for card-shaped buttons.
   .fe lives on a dark footer and keeps its own background/colour from
   its original .fe rule above — only inherit font and reset cursor for it. */
.gpu-card,
.path-step,
.doc-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.gpu-card { padding: 28px; }
.fe {
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
}
.gpu-card:focus-visible,
.fe:focus-visible,
.path-step:focus-visible,
.doc-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ============== TRIBE provenance pill (in neural section) ============== */
.provenance {
  margin: 22px auto 0;
  max-width: 860px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-deep);
  padding: 18px 24px;
  border-radius: var(--radius);
  text-align: left;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.prov-head {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--primary);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.provenance a { color: var(--primary); font-weight: 600; }

/* ============== METHODOLOGY GRID ============== */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.method-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.method-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--accent-deep);
}
.method-card .m-step {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--primary);
  background: rgba(204, 87, 51, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.method-card h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.method-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* clickable methodology cards (modal trigger) */
button.method-card.is-clickable {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button.method-card.is-clickable:focus { outline: none; }
button.method-card.is-clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.method-card .m-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.method-card .m-card-head .m-step { margin-bottom: 0; }
.method-card .m-card-title {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 8px;
  text-transform: uppercase;
}
button.method-card.is-clickable .m-detail {
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.m-open-affordance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
  transition: color 0.2s, opacity 0.2s, transform 0.2s;
}
button.method-card.is-clickable:hover .m-open-affordance,
button.method-card.is-clickable:focus-visible .m-open-affordance {
  color: var(--primary);
  opacity: 1;
}
.m-open-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  transition: transform 0.25s ease;
}
button.method-card.is-clickable:hover .m-open-icon {
  transform: rotate(90deg);
}

/* methodology modal styling */
.method-modal-body h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
  margin: 22px 0 10px;
}
.method-modal-body h2:first-child { margin-top: 0; }
.method-modal-body p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 6px;
}
.method-modal-body .method-modal-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 2px solid var(--rule);
  padding: 12px 14px;
  border-radius: 4px;
  line-height: 1.6;
}
.method-modal-body .m-plain-terms {
  display: grid;
  gap: 10px;
  margin: 0;
}
.method-modal-body .m-plain-term {
  padding: 12px 14px;
  background: rgba(204, 87, 51, 0.05);
  border-left: 2px solid var(--primary);
  border-radius: 4px;
}
.method-modal-body .m-plain-term dt {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
}
.method-modal-body .m-plain-term dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.method-source {
  margin-top: 28px;
  background: linear-gradient(180deg, var(--bg-paper) 0%, #fff 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
}
.method-source .ms-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--primary);
  margin-bottom: 12px;
  font-weight: 600;
}
.method-source p { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.7; }
.method-source ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.method-source li { font-size: 14px; color: var(--ink-soft); padding: 4px 0; border-bottom: 1px dashed var(--rule); }
.method-source li b { color: var(--ink); font-weight: 600; }

/* ============== WATCHERS SECTION ============== */
.watchers-section {
  position: relative;
}
.watchers-hero {
  position: relative;
  margin: 30px auto 50px;
  max-width: 1240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 21 / 9;
  background: var(--bg-paper);
}
.watchers-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.watchers-hero .wh-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(235,233,229,0) 60%, rgba(235,233,229,0.85) 100%),
    radial-gradient(circle at 50% 20%, rgba(255,227,117,0.15), transparent 60%);
  pointer-events: none;
}

.watchers-thesis {
  max-width: 880px;
  margin: 0 auto 50px;
  text-align: center;
}
.watchers-thesis .wt-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.watchers-thesis h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 22px;
}
.watchers-thesis p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  line-height: 1.65;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}
.wt-callout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 22px;
  background: rgba(255, 227, 117, 0.32);
  border-left: 3px solid var(--accent-deep);
  border-right: 3px solid var(--accent-deep);
  border-radius: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.wt-callout .wt-mark { color: var(--primary); font-size: 22px; font-style: normal; }

/* Kasbeel feature */
.watchers-kasbeel {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 50px;
  align-items: start;
  margin: 0 auto 60px;
  max-width: 1140px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-paper) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.watchers-kasbeel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--good));
}
.wk-portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-paper);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow);
}
.wk-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.05);
}
.wk-stamp {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: rgba(204, 87, 51, 0.92);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 600;
  border-radius: 999px;
}
.wk-body .wk-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 10px;
}
.wk-body h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 56px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1;
}
.wk-name-meaning {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.wk-body blockquote {
  margin: 18px 0 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--accent-deep);
  background: rgba(255, 227, 117, 0.18);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.55;
}
.wk-body p {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  line-height: 1.7;
}
.wk-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 24px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--rule);
}
.wk-meta > div { display: flex; flex-direction: column; gap: 4px; }
.wk-meta span {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.wk-meta b { font-size: 14px; color: var(--ink); font-weight: 500; }

/* Watchers grid head + cards */
.watchers-grid-head {
  text-align: center;
  margin-bottom: 28px;
}
.watchers-grid-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.5vw, 36px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.watchers-grid-head h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--primary);
}
.watchers-grid-head p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 15px;
}
.watchers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto 50px;
}
.watcher-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 0;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.watcher-card .wc-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.watcher-card:not(.has-portrait) .wc-body {
  padding-top: 24px;
}
.watcher-card:not(.has-portrait)::before {
  content: '⟡';
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 18px;
  color: var(--accent-deep);
  opacity: 0.65;
}

/* Portrait header — matches Chief Watcher icon aesthetic */
.wc-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #f3ecdb 0%, #e9dfc8 100%);
  border-bottom: 1px solid var(--rule);
}
.wc-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  transition: transform 0.6s ease;
}
.watcher-card:hover .wc-portrait img {
  transform: scale(1.03);
}
.wc-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(62,59,50,0.55) 100%);
  pointer-events: none;
}
.wc-portrait-label {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-deep);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(171,73,43,0.35);
}
.watcher-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}
.wc-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.wc-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--primary);
  margin-top: -6px;
  margin-bottom: 6px;
}
.wc-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }
.wc-row span {
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-top: 3px;
}
.wc-row p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.wc-row.communion p { color: var(--ink); font-weight: 500; }
.wc-row.communion span { color: var(--good); }
.wc-freq {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wc-freq span {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.wc-freq b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--primary);
}

.watchers-close {
  text-align: center;
  max-width: 640px;
  margin: 20px auto 0;
  padding: 28px 20px;
}
.watchers-close .wc-mark {
  font-size: 28px;
  color: var(--accent-deep);
  margin-bottom: 12px;
}
.watchers-close p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

/* ============== WORLD MAP ============== */
.map-section {}
.map-wrap {
  background: linear-gradient(180deg, #fff 0%, var(--bg-paper) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}
#world-svg {
  width: 100%;
  height: auto;
  display: block;
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  justify-content: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
}
.map-legend .dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.map-legend .dot.impact  { background: var(--primary); }
.map-legend .dot.freedom { background: var(--good); }

.map-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.map-col {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.mc-head {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.mc-head.impact  { color: var(--primary); }
.mc-head.freedom { color: var(--good); }

.map-list { display: flex; flex-direction: column; gap: 14px; }
.ml-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg-paper);
}
.ml-row.impact  { border-left: 3px solid var(--primary); }
.ml-row.freedom { border-left: 3px solid var(--good); }
.ml-code {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.ml-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.ml-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.ml-stat b { color: var(--primary); font-weight: 500; }
.ml-row.freedom .ml-stat b { color: var(--good); }
.ml-note { font-size: 13px; color: var(--ink-soft); font-style: italic; }

.map-foot {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.6;
}
.map-foot strong { color: var(--primary); font-weight: 600; }

/* ============== EXPANDED LIBERATION PATH ============== */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto 24px;
}
.path-step.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.path-step.active .week,
.path-step.active .what { color: var(--bg); }
.path-step.active .pct  { color: var(--accent); }

.path-detail {
  max-width: 1140px;
  margin: 0 auto 28px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
.pd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.pd-week {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.pd-pct {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: var(--primary);
  line-height: 1;
}
.pd-pct span { font-size: 24px; }
.pd-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
}
.pd-actions h4,
.pd-neuro h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.pd-actions ol {
  list-style: none;
  counter-reset: actions;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-actions li {
  counter-increment: actions;
  position: relative;
  padding-left: 38px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pd-actions li::before {
  content: counter(actions, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--primary);
  background: rgba(204, 87, 51, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.pd-neuro p {
  background: var(--bg-paper);
  padding: 18px 20px;
  border-radius: var(--radius);
  border-left: 3px solid var(--good);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.65;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

/* Footer endpoint button reset */
.fe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ============== RESPONSIVE TWEAKS ============== */
@media (max-width: 880px) {
  .watchers-kasbeel { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
  .wk-portrait { max-width: 320px; margin: 0 auto; aspect-ratio: 3 / 4; }
  .wk-body h3 { font-size: 42px; }
  .pd-cols { grid-template-columns: 1fr; gap: 24px; }
  .watchers-hero { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .topnav { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .navlinks { display: none; }
  .ma-logo { height: 28px; }
  .brand-text { font-size: 13px; }
  .hero-stats { gap: 14px; flex-wrap: wrap; }
  .hs-sep { display: none; }
}

/* ==========================================================================
   ChristCode v3 — brain scans, GPT chat, status panel, watchers proof,
   richer map interactivity
   ========================================================================== */

/* ------------ Brain scans (in #neural) ------------ */
.brainscans {
  margin: 60px auto 50px;
  max-width: 1240px;
}
.bs-head {
  text-align: center;
  margin-bottom: 28px;
}
.bs-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.bs-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--ink);
}
.bs-head h3 em { font-style: normal; font-weight: 600; color: var(--primary); }
.bs-head p { color: var(--ink-soft); font-size: 16px; max-width: 720px; margin: 0 auto; }

.bs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.bs-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.bs-card.high { border-top: 3px solid var(--good); }
.bs-card.low  { border-top: 3px solid var(--primary); }
.bs-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-paper);
  overflow: hidden;
}
.bs-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-pin {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  background: rgba(62, 59, 50, 0.92);
  color: #FBF8F2;
  padding: 4px 8px;
  border-radius: 999px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.12);
}
.bs-pin.pfc      { top: 18%; left: 18%; }
.bs-pin.pineal   { top: 42%; left: 50%; }
.bs-pin.amyg     { top: 56%; left: 38%; }
.bs-pin.dim      { background: rgba(155, 148, 134, 0.85); color: #FBF8F2; opacity: 0.85; }
.bs-pin.hot      { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(204,87,51,0.18); }
.bs-card figcaption { padding: 22px 24px 26px; }
.bs-cap-tag {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.bs-cap-tag.good { background: var(--good-soft); color: #2e6b3a; }
.bs-cap-tag.bad  { background: var(--bad-soft);  color: var(--primary-deep); }
.bs-cap-verse {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.4;
}
.bs-readout { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bs-readout li {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px dashed var(--rule);
}
.bs-readout b { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.bs-readout b.good { color: var(--good); }
.bs-readout b.bad  { color: var(--primary); }
.bs-foot {
  text-align: center;
  margin-top: 22px;
  font-size: 14.5px;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.bs-foot strong { color: var(--ink); font-style: normal; font-weight: 600; }

/* ------------ Watchers proof block ------------ */
.watchers-proof {
  max-width: 1140px;
  margin: 0 auto 50px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow);
  position: relative;
}
.watchers-proof::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--primary));
}
.wp-head { text-align: center; margin-bottom: 24px; }
.wp-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.wp-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 34px);
  margin-bottom: 12px;
  color: var(--ink);
}
.wp-head p { color: var(--ink-soft); max-width: 720px; margin: 0 auto; font-size: 15.5px; }

.wp-counts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 36px;
}
.wp-count {
  text-align: center;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  min-width: 150px;
}
.wp-count.featured {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: var(--accent-deep);
  box-shadow: 0 6px 16px rgba(244,200,66,0.35);
}
.wp-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 6px;
}
.wp-count.featured .wp-num { color: var(--ink); }
.wp-lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
}
.wp-lbl em { font-style: italic; font-family: 'Cormorant Garamond', serif; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-faint); }
.wp-arrow {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  color: var(--ink-faint);
}

.wp-citations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.wp-cite {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.wp-cite-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 8px;
}
.wp-cite blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 10px;
}
.wp-cite-interp {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.wp-cite-interp span {
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-right: 6px;
}
.wp-foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 820px;
  margin: 0 auto;
}

/* ------------ ChristCode GPT CTA + Chat modal ------------ */
.gpt-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: linear-gradient(120deg, #2A2820 0%, #3E3B32 70%, var(--primary-deep) 130%);
  color: #FBF8F2;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin: 28px auto 24px;
  max-width: 1240px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.gpt-cta::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 20% 30%, rgba(255,227,117,0.18), transparent 50%);
  pointer-events: none;
}
.gpt-cta-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 600;
}
.gpt-cta h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.01em;
  color: #FBF8F2;
  margin-bottom: 10px;
}
.gpt-cta p {
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  max-width: 620px;
  line-height: 1.6;
}
.gpt-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--ink);
  border: none;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  z-index: 1;
}
.gpt-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,227,117,0.4); }
.gpt-cta-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(93,155,108,0.7);
  animation: gptPulse 1.6s infinite;
}
@keyframes gptPulse {
  0%   { box-shadow: 0 0 0 0 rgba(93,155,108,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(93,155,108,0); }
  100% { box-shadow: 0 0 0 0 rgba(93,155,108,0); }
}

/* GPT modal */
.gpt-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.gpt-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--bg-paper), #fff);
}
.gpt-h-left { display: flex; align-items: center; gap: 14px; }
.gpt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--ink);
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 50%;
}
.gpt-avatar.small { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
.gpt-h-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
}
.gpt-h-meta { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.gpt-h-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good);
  animation: gptPulse 1.6s infinite;
}
.gpt-h-right {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.gpt-stream {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  min-height: 280px;
  max-height: 50vh;
}
.gpt-bubble {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 90%;
}
.gpt-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.gpt-b-body {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6;
}
.gpt-bubble.user .gpt-b-body { background: var(--ink); color: #FBF8F2; border-color: var(--ink); }
.gpt-bubble.bot  .gpt-b-body p:not(:last-child) { margin-bottom: 10px; }
.gpt-bubble.typing .dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 2px;
  background: var(--ink-faint);
  border-radius: 50%;
  animation: gptDot 1.2s infinite;
}
.gpt-bubble.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.gpt-bubble.typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes gptDot { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

.gpt-verses {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 4px;
  font-size: 12.5px;
}
.gpt-verses th {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}
.gpt-verses td { padding: 6px 8px; border-bottom: 1px dashed var(--rule); font-family: 'JetBrains Mono', monospace; }
.gpt-verses td:first-child { font-family: 'Inter', sans-serif; color: var(--ink); }
.gpt-verses td b { color: var(--primary); }

.gpt-watcher {
  display: flex; gap: 18px; flex-wrap: wrap;
  background: var(--bg-paper);
  border-left: 3px solid var(--accent-deep);
  border-radius: 6px;
  padding: 12px 14px; margin-top: 8px;
}
.gpt-watcher > div { display: flex; flex-direction: column; gap: 2px; }
.gpt-watcher span { font-family: 'Oswald', sans-serif; font-size: 9px; letter-spacing: 0.2em; color: var(--ink-faint); text-transform: uppercase; }
.gpt-watcher b { font-size: 13px; color: var(--ink); font-weight: 600; }

.gpt-steps { margin: 8px 0 0 18px; font-size: 13.5px; }
.gpt-steps li { margin-bottom: 6px; color: var(--ink); }

.gpt-pathway {
  display: inline-block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--primary);
  background: rgba(204,87,51,0.08);
  padding: 4px 10px;
  border-radius: 999px;
}
.gpt-pathway b { color: var(--primary-deep); }
.gpt-pathway a { color: var(--primary); font-weight: 600; }

.gpt-starters {
  padding: 14px 28px;
  border-top: 1px solid var(--rule);
  background: var(--bg-paper);
}
.gpt-starters-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.gpt-starters-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gpt-starter {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.gpt-starter:hover { background: var(--accent); border-color: var(--accent-deep); transform: translateY(-1px); }

.gpt-input {
  display: flex;
  gap: 10px;
  padding: 14px 28px;
  border-top: 1px solid var(--rule);
  background: #fff;
}
.gpt-input input {
  flex: 1;
  font: inherit;
  font-size: 14.5px;
  padding: 12px 16px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.gpt-input input:focus { border-color: var(--primary); }
.gpt-input button {
  background: var(--ink);
  color: var(--accent);
  border: none;
  padding: 12px 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}
.gpt-input button:hover { background: var(--primary); color: #fff; }
.gpt-foot {
  padding: 10px 28px 18px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  background: #fff;
}
.gpt-foot a { color: var(--primary); font-weight: 600; }

/* ------------ System Status Panel ------------ */
.status-panel {
  background: linear-gradient(180deg, #fff 0%, var(--bg-paper) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 0 auto 28px;
  max-width: 1240px;
  box-shadow: var(--shadow);
}
.sp-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px dashed var(--rule);
}
.sp-left { display: flex; align-items: center; gap: 16px; }
.sp-pulse {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(93,155,108,0.7);
  animation: gptPulse 1.6s infinite;
  flex-shrink: 0;
}
.sp-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--good);
  font-weight: 600;
  text-transform: uppercase;
}
.sp-title {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.sp-right { display: flex; gap: 28px; flex-wrap: wrap; }
.sp-metric { display: flex; flex-direction: column; gap: 2px; }
.sp-metric span {
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.sp-metric b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
}
.sp-metric b.hot { color: var(--primary); }
.sp-clusters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sp-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--good);
  border-radius: var(--radius);
}
.sp-light {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px rgba(93,155,108,0.6);
  flex-shrink: 0;
  animation: gptPulse 2s infinite;
}
.sp-cluster-name {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  flex: 1;
}
.sp-cluster-meta { display: flex; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-soft); }
.sp-cluster-meta b { color: var(--ink); font-weight: 500; }
.sp-cluster-status {
  background: var(--good-soft);
  color: #2e6b3a;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* ------------ Map dot + row interactivity ------------ */
.map-dot { cursor: pointer; transition: transform 0.2s; transform-origin: center; transform-box: fill-box; }
.map-dot .md-core { transition: r 0.2s, stroke-width 0.2s; }
.map-dot:hover .md-core,
.map-dot.active .md-core { stroke-width: 4px; }
.map-dot:hover { transform: scale(1.08); }
.map-dot.active .md-pulse { opacity: 1 !important; }

.ml-row {
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.ml-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ml-row.active {
  background: #fff;
  box-shadow: var(--shadow);
  outline: 2px solid var(--accent-deep);
  outline-offset: 0;
}
.ml-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------ Responsive ------------ */
@media (max-width: 880px) {
  .bs-grid { grid-template-columns: 1fr; }
  .gpt-cta { grid-template-columns: 1fr; padding: 28px; }
  .gpt-cta-btn { justify-self: start; }
  .sp-right { gap: 16px; }
  .wp-counts { gap: 8px; }
  .wp-arrow { display: none; }
}

/* ==========================================================================
   Watcher Influence Atlas — ledger of who each Watcher backs vs. who pays
   ========================================================================== */
.watchers-influence {
  max-width: 1240px;
  margin: 60px auto 50px;
  padding: 36px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.watchers-influence::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-deep) 50%, var(--good) 100%);
}

.wi-head { text-align: center; margin-bottom: 28px; }
.wi-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.wi-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  color: var(--ink);
}
.wi-head p {
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.6;
}

.wi-ledger {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 18px;
}
.wi-col-heads {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  gap: 18px;
  padding: 0 22px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.wi-col-h.backed { color: var(--good); }
.wi-col-h.taken  { color: var(--primary); }

.wi-row {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  gap: 18px;
  padding: 22px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}
.wi-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--rule-strong);
}

.wi-row-h {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-right: 1px dashed var(--rule);
  padding-right: 14px;
}
.wi-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  background: #fff;
  border: 1px solid var(--rule);
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.wi-name {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.1;
}
.wi-domain {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--primary);
  text-transform: uppercase;
  line-height: 1.4;
}

.wi-side {
  position: relative;
  padding: 4px 0 0 0;
}
.wi-side-tag {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.wi-backed .wi-side-tag {
  background: var(--good-soft);
  color: #2e6b3a;
}
.wi-taken .wi-side-tag {
  background: var(--bad-soft);
  color: var(--primary-deep);
}
.wi-side ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wi-side li {
  position: relative;
  padding: 10px 12px 10px 14px;
  background: #fff;
  border-radius: 6px;
  border-left: 2px solid var(--rule);
  transition: border-color 0.2s, transform 0.2s;
}
.wi-backed li { border-left-color: var(--good); }
.wi-taken  li { border-left-color: var(--primary); }
.wi-side li:hover { transform: translateX(2px); }
.wi-entity {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 4px;
}
.wi-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  font-style: italic;
}

.wi-foot {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  line-height: 1.6;
}

/* Responsive — collapse the ledger into a single column on narrow screens */
@media (max-width: 980px) {
  .wi-col-heads { display: none; }
  .wi-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .wi-row-h {
    border-right: none;
    border-bottom: 1px dashed var(--rule);
    padding-right: 0;
    padding-bottom: 14px;
  }
  .watchers-influence { padding: 24px; }
}

/* ==========================================================================
   Nephilim Chain — Watcher → offspring → modern office → invoking rite
   ========================================================================== */
.watchers-nephilim {
  max-width: 1240px;
  margin: 50px auto 50px;
  padding: 36px;
  background:
    radial-gradient(circle at 20% 0%, rgba(204,87,51,0.06) 0%, transparent 55%),
    var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.watchers-nephilim::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--ink) 0%,
    var(--primary) 35%,
    var(--accent-deep) 70%,
    var(--good) 100%);
}

.np-head { text-align: center; margin-bottom: 26px; }
.np-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.np-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  color: var(--ink);
}
.np-lede {
  color: var(--ink-soft);
  max-width: 820px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Citations block */
.np-citations {
  margin: 28px auto 32px;
  max-width: 1080px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  border-radius: 8px;
  position: relative;
}
.np-cit-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--rule);
  text-transform: uppercase;
}
.np-cit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: cite;
}
.np-cit-list li {
  counter-increment: cite;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  padding-left: 26px;
  position: relative;
}
.np-cit-list li::before {
  content: counter(cite);
  position: absolute;
  left: 0; top: 1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.np-cit-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--primary-deep);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.np-cit-note {
  color: var(--ink-soft);
  font-style: italic;
}

/* Chain rows */
.np-chain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.np-chain-heads {
  display: grid;
  grid-template-columns: 150px 24px 1fr 24px 1fr 32px 1.1fr;
  gap: 12px;
  padding: 0 18px;
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.np-chain-heads .np-h-w { color: var(--ink); }
.np-chain-heads .np-h-o { color: #8a5a3a; grid-column: 3; }
.np-chain-heads .np-h-r { color: var(--good); grid-column: 5; }
.np-chain-heads .np-h-c { color: var(--primary); grid-column: 7; }

.np-row {
  display: grid;
  grid-template-columns: 150px 24px 1fr 24px 1fr 32px 1.1fr;
  gap: 12px;
  align-items: stretch;
  padding: 18px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.np-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--rule-strong);
}
.np-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.np-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  color: var(--ink-faint);
  font-weight: 300;
  user-select: none;
}
.np-arrow-call {
  color: var(--primary);
  font-size: 16px;
}

/* Watcher cell */
.np-watcher {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  align-items: flex-start;
  gap: 4px;
}
.np-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.np-w-name {
  font-family: 'Oswald', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.np-w-freq {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* Offspring cell */
.np-os-name {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #6b3e22;
  margin-bottom: 5px;
  font-style: italic;
  letter-spacing: 0.01em;
}
.np-os-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  font-style: italic;
}

/* Role / seat cell */
.np-role-tag,
.np-call-tag {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  text-transform: uppercase;
  align-self: flex-start;
}
.np-role-tag {
  background: var(--good-soft);
  color: #2e6b3a;
}
.np-call-tag {
  background: var(--bad-soft);
  color: var(--primary-deep);
}
.np-role-body {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}
.np-call-body {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
  font-style: italic;
}

/* Break-the-rite aside */
.np-break {
  margin: 8px 0 22px;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(93,155,108,0.08) 0%, rgba(255,227,117,0.10) 100%);
  border: 1px solid var(--good);
  border-left-width: 4px;
  border-radius: 8px;
}
.np-break-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: #2e6b3a;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.np-break p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

.np-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  line-height: 1.6;
}

/* Responsive — stack chain rows on narrow screens */
@media (max-width: 1080px) {
  .np-chain-heads { display: none; }
  .np-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  .np-arrow {
    transform: rotate(90deg);
    height: 16px;
  }
  .np-cit-list li {
    grid-template-columns: 110px 1fr;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  .watchers-nephilim { padding: 22px; }
  .np-citations { padding: 18px; }
  .np-cit-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Bridge note between citations and chain — flags interpretive content */
.np-bridge {
  max-width: 1080px;
  margin: -8px auto 26px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(204,87,51,0.05) 0%, rgba(255,227,117,0.10) 100%);
  border: 1px dashed var(--primary);
  border-radius: 8px;
}
.np-bridge-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.np-bridge p {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
  font-style: italic;
}

/* ==========================================================================
   Liberation Path — Stakes, Promises, Detail Inspiration, Launch CTA
   ========================================================================== */

/* Stakes panel (above the milestone tabs) */
.path-stakes {
  max-width: 1240px;
  margin: 6px auto 32px;
  padding: 32px 36px 30px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,227,117,0.18) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(204,87,51,0.10) 0%, transparent 60%),
    var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.path-stakes::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--ink) 0%,
    var(--primary) 30%,
    var(--accent-deep) 65%,
    var(--good) 100%);
}
.ps-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ps-h {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 780px;
  line-height: 1.15;
}
.ps-stakes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.ps-stake {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  border-left: 4px solid var(--primary);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ps-stake:nth-child(2) { border-left-color: var(--accent-deep); }
.ps-stake:nth-child(3) { border-left-color: var(--good); }
.ps-stake:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.ps-stake-num {
  font-family: 'Oswald', sans-serif;
  font-size: 38px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.ps-stake:nth-child(1) .ps-stake-num { color: var(--primary); }
.ps-stake:nth-child(2) .ps-stake-num { color: var(--accent-deep); }
.ps-stake:nth-child(3) .ps-stake-num { color: #2e6b3a; }
.ps-stake-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ps-stake-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.ps-promises {
  padding: 22px 24px;
  background: rgba(255,255,255,0.55);
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
}
.ps-promises-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--primary-deep);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ps-promises ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-promises li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.ps-bullet {
  color: var(--primary);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Detail panel — tagline, inspiration block, two-column body, commit */
.pd-tagline {
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 15px;
  color: var(--primary);
  letter-spacing: 0.01em;
  margin-top: 6px;
  font-weight: 400;
}
.pd-inspiration {
  margin: 18px 0 22px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(204,87,51,0.06) 0%, rgba(255,227,117,0.10) 100%);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}
.pd-insp-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pd-inspiration p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  font-style: italic;
}
.pd-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pd-feel {
  padding: 16px 18px;
  background: var(--good-soft);
  border-radius: 8px;
  border-left: 3px solid var(--good);
}
.pd-feel h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: #2e6b3a;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pd-feel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-feel li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.pd-feel li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 0;
  color: var(--good);
  font-size: 9px;
  line-height: 1.7;
}
.pd-proof {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  font-style: italic;
}
.pd-proof-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  color: var(--primary-deep);
  background: var(--bad-soft);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  letter-spacing: 0.05em;
}

.pd-commit {
  margin-top: 20px;
  padding: 22px 26px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 10px;
  text-align: center;
}
.pd-commit-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pd-commit blockquote {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: #fff;
  max-width: 720px;
  margin: 0 auto;
}

/* Launch CTA — countdown energy at the end of the section */
.path-launch {
  max-width: 1240px;
  margin: 36px auto 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,227,117,0.40) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(204,87,51,0.30) 0%, transparent 55%),
    var(--ink);
  box-shadow: var(--shadow-lg);
}
.path-launch::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
.pl-inner {
  position: relative;
  padding: 48px 44px 40px;
  text-align: center;
  color: #fff;
}
.pl-kicker {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pl-headline {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: #fff;
}
.pl-body {
  max-width: 680px;
  margin: 0 auto 28px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
}
.pl-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.pl-primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  font-size: 15px;
  padding: 14px 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(255,227,117,0.25);
}
.pl-primary:hover {
  background: #ffd84a;
  border-color: #ffd84a;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255,227,117,0.35);
}
.pl-actions .btn.secondary {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.3);
}
.pl-actions .btn.secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.pl-countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
}
.pl-cd-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(93,155,108,0.6);
  animation: plPulse 2s ease-out infinite;
}
@keyframes plPulse {
  0%   { box-shadow: 0 0 0 0   rgba(93,155,108,0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(93,155,108,0); }
  100% { box-shadow: 0 0 0 0   rgba(93,155,108,0); }
}

/* Responsive */
@media (max-width: 900px) {
  .ps-stakes-row { grid-template-columns: 1fr; }
  .path-stakes { padding: 24px; }
  .pl-inner { padding: 36px 22px 30px; }
  .pl-actions .btn { width: 100%; justify-content: center; }
}

/* Focus-visible on the dark launch CTA buttons (high-contrast cream ring) */
.pl-actions .btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,227,117,0.18);
}
/* ==========================================================================
   System product modals — interactive bodies for the four cluster cards
   ========================================================================== */

.modal-header .meta-row .mh-endpoint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--bg-paper);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.sys-modal-body { display: flex; flex-direction: column; gap: 22px; }
.sys-modal-body > * { margin: 0; }

.prod-intro h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
  border: none;
  padding: 0;
  margin: 0 0 8px;
}
.prod-intro p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; }

.prod-form {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prod-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.prod-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 72px;
  transition: border-color 0.2s;
}
.prod-form textarea:focus { border-color: var(--primary); }

.prod-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prod-pair-col { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) { .prod-pair { grid-template-columns: 1fr; } }

.prod-chips {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.prod-chip-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}
.prod-chip {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  text-align: left;
}
.prod-chip:hover { background: var(--accent); border-color: var(--accent-deep); transform: translateY(-1px); }

.prod-actions { display: flex; justify-content: flex-end; }
.prod-submit {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--primary);
  color: #fff;
  border: 1.5px solid var(--primary-deep);
  padding: 12px 22px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.prod-submit:hover:not(:disabled) { background: var(--primary-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(204,87,51,0.28); }
.prod-submit:disabled { opacity: 0.7; cursor: progress; }

.prod-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: prod-spin 0.7s linear infinite;
}
@keyframes prod-spin { to { transform: rotate(360deg); } }

.prod-result {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.prod-result-head { display: flex; flex-direction: column; gap: 4px; }
.prod-result-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--primary);
  font-weight: 600;
}
.prod-result-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none; padding: 0; margin: 0;
}
.prod-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding: 14px 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.prs { display: flex; flex-direction: column; gap: 2px; }
.prs span {
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.prs b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
}
.prs b.good { color: var(--good); }
.prs b.bad  { color: var(--primary); }

.prod-bars { display: flex; flex-direction: column; gap: 10px; }
.prod-zone .zone-label {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ink); margin-bottom: 4px;
}
.prod-zone .zone-label b {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500; color: var(--ink-soft);
}
.prod-zone .zone-bar {
  height: 8px; background: var(--bg-paper); border-radius: 999px; overflow: hidden;
}
.prod-zone .zone-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.prod-zone .zone-fill.good { background: linear-gradient(90deg, var(--good), #7fb585); }
.prod-zone .zone-fill.bad  { background: linear-gradient(90deg, var(--primary), var(--primary-deep)); }

.prod-error {
  background: rgba(204,87,51,0.06);
  border: 1px solid rgba(204,87,51,0.25);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.prod-error-msg { color: var(--primary-deep); font-size: 14px; }
.prod-retry {
  font: inherit;
  font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--ink); color: var(--accent);
  padding: 8px 16px; border: none; border-radius: var(--radius);
  cursor: pointer; transition: background 0.2s;
}
.prod-retry:hover { background: var(--primary); color: #fff; }

/* Encoder cards (Enhanced modal) */
.enc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.enc-card {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.enc-name {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
}
.enc-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 500;
}
.enc-delta.good { color: var(--good); }
.enc-delta.bad  { color: var(--primary); }
.enc-bar { height: 6px; background: #fff; border-radius: 999px; overflow: hidden; border: 1px solid var(--rule); }
.enc-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-deep)); border-radius: 999px; }

/* Status modal (live) */
.status-live {
  background: linear-gradient(180deg, #fff 0%, var(--bg-paper) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.status-live-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px dashed var(--rule);
}
.sl-left { display: flex; align-items: center; gap: 14px; }
.sl-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--good); font-weight: 600; text-transform: uppercase;
}
.sl-title {
  font-family: 'Oswald', sans-serif;
  font-size: 18px; font-weight: 500; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.sl-refresh {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule);
  padding: 8px 14px; border-radius: var(--radius);
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.sl-refresh:hover:not(:disabled) { background: var(--accent); border-color: var(--accent-deep); }
.sl-refresh:disabled { opacity: 0.55; cursor: progress; }
.sl-refresh-icon { display: inline-block; }
.sl-refresh:disabled .sl-refresh-icon { animation: prod-spin 0.9s linear infinite; }
.sl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.sl-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-faint);
  text-align: right;
}
.sl-skel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.sl-skel > div {
  height: 56px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg-paper) 0%, #fff 50%, var(--bg-paper) 100%);
  background-size: 200% 100%;
  animation: sl-skel-shimmer 1.4s infinite;
}
@keyframes sl-skel-shimmer { to { background-position: -200% 0; } }
.sp-cluster.bad { border-left-color: var(--primary); }
.sp-light.bad { background: var(--primary); box-shadow: 0 0 8px rgba(204,87,51,0.6); }
.sp-cluster-status.bad { background: var(--bad-soft); color: var(--primary-deep); }

/* Miracle Academy hand-off panel (shared) */
.ma-handoff {
  position: relative;
  background: linear-gradient(180deg, var(--bg-paper) 0%, #fff 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.ma-handoff-rule {
  position: absolute; top: 0; left: 24px; right: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-deep));
  border-radius: 0 0 2px 2px;
}
.ma-handoff-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ma-handoff-eye {
  font-family: 'Oswald', sans-serif;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--primary); font-weight: 600; text-transform: uppercase;
}
.ma-handoff-body p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.ma-handoff-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border: 1.5px solid var(--primary-deep);
  padding: 12px 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ma-handoff-cta:hover { background: var(--primary-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(204,87,51,0.3); }
@media (max-width: 640px) {
  .ma-handoff { grid-template-columns: 1fr; }
}

.ma-handoff-quiet {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  padding: 8px 0 0;
  border-top: 1px dashed var(--rule);
  margin-top: 4px;
}
.ma-handoff-link {
  color: var(--primary); font-weight: 600; text-decoration: none;
  font-style: normal; font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  margin-left: 8px;
}
.ma-handoff-link:hover { text-decoration: underline; }

/* GPT chat live additions */
.gpt-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
}
.gpt-foot-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary);
  color: #fff !important;
  text-decoration: none;
  padding: 8px 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid var(--primary-deep);
  transition: background 0.2s, transform 0.2s;
}
.gpt-foot-cta:hover { background: var(--primary-deep); transform: translateY(-1px); }
.gpt-bubble.bot.error .gpt-b-body { border-color: rgba(204,87,51,0.3); background: rgba(204,87,51,0.05); }
.gpt-err { color: var(--primary-deep); font-size: 14px; margin-bottom: 8px; }

/* Hand-off dismiss + status panel "open" trigger */
.ma-handoff { position: relative; }
.ma-handoff-dismiss {
  position: absolute;
  top: 8px; right: 10px;
  width: 24px; height: 24px;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.ma-handoff-dismiss:hover { background: var(--bg-paper); color: var(--ink); }

.sp-open {
  align-self: center;
  font: inherit;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--ink);
  color: var(--accent);
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.sp-open:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* ===== Enhanced modal: provenance line, flip card, word diff ===== */
.prod-provenance {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, #6e6452);
  margin-top: 0.35rem;
}

.prod-flip-stage { margin: 1.25rem 0 1.5rem; }
.prod-flip-eye {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary, #c0432a);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.flip-card {
  perspective: 1400px;
  width: 100%;
  min-height: 160px;
}
.flip-inner {
  position: relative;
  width: 100%;
  min-height: 160px;
  transition: transform 0.95s cubic-bezier(0.55, 0.06, 0.32, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: var(--paper, #f7f0e2);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 6px 22px -10px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.flip-back { transform: rotateY(180deg); border-color: rgba(192, 67, 42, 0.35); }
.flip-tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft, #6e6452);
  font-weight: 600;
}
.flip-back .flip-tag { color: var(--primary, #c0432a); }
.flip-text {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink, #2a2418);
  font-family: var(--font-serif, Georgia, serif);
}
.flip-ref {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #6e6452);
}

.diff-block {
  margin-top: 1.5rem;
  padding: 1.1rem 1.2rem 1.25rem;
  background: var(--paper, #f7f0e2);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}
.diff-eye {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #6e6452);
  margin-bottom: 0.7rem;
  font-weight: 600;
}
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) { .diff-grid { grid-template-columns: 1fr; } }
.diff-col {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 0.75rem 0.9rem 0.9rem;
}
.diff-col-tag {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft, #6e6452);
  margin-bottom: 0.45rem;
  font-weight: 600;
}
.diff-col-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink, #2a2418);
  font-family: var(--font-serif, Georgia, serif);
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-del {
  background: rgba(192, 67, 42, 0.16);
  color: #8a2f1a;
  text-decoration: line-through;
  padding: 0 2px;
  border-radius: 3px;
}
.diff-add {
  background: rgba(46, 125, 50, 0.16);
  color: #1f5b25;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 500;
}
.diff-arrow { color: var(--ink-soft, #6e6452); margin: 0 0.25rem; }

.diff-notes { margin-top: 1rem; }
.diff-note {
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  margin-bottom: 0.55rem;
}
.diff-note:last-child { margin-bottom: 0; }
.diff-note-line {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.98rem;
  line-height: 1.5;
}
.diff-note-why {
  margin-top: 0.3rem;
  font-size: 0.86rem;
  color: var(--ink-soft, #6e6452);
  line-height: 1.5;
}


/* ==========================================================================
   READINGS — Week-1 source-text modals
   ========================================================================== */

/* The "READ THE TEXT" pill that appears on Week-1 reading actions */
.pd-actions li.pd-action-readable {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding-right: 0;
  background: linear-gradient(180deg, rgba(204,87,51,0.04), transparent 60%);
  border-radius: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.pd-actions li.pd-action-readable .pda-text {
  flex: 1 1 280px;
  min-width: 0;
}
.pda-read {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary-deep);
  padding: 7px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.pda-read:hover { background: var(--primary-deep); transform: translateY(-1px); }
.pda-read:active { transform: translateY(0); }
.pda-read:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 3px;
}
.pda-read svg { stroke: currentColor; }

/* Reading modal interior */
.modal-header.reading-header { border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 18px; }
.modal-body.reading-body { padding-top: 6px; }

.reading-intro {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 14px 0 22px;
  padding: 14px 16px;
  background: rgba(255, 227, 117, 0.18);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

.reading-blocks {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 24px;
}
.reading-block {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 16px;
}
.reading-block:first-child { border-top: 0; padding-top: 0; }
.reading-block .rb-h {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0 0 10px;
}
.reading-block .rb-body {
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
.reading-block.is-emphasis {
  background: linear-gradient(180deg, rgba(204,87,51,0.06), rgba(204,87,51,0.02));
  border-left: 3px solid var(--primary);
  border-top: 0;
  padding: 18px 20px;
  border-radius: 0 6px 6px 0;
}
.reading-block.is-emphasis .rb-h { color: var(--primary); }
.reading-block.is-emphasis .rb-body {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px;
  line-height: 1.78;
}

.reading-practice {
  margin: 8px 0 22px;
  padding: 16px 18px;
  background: rgba(93, 155, 108, 0.10);
  border-left: 3px solid var(--good, #5d9b6c);
  border-radius: 0 6px 6px 0;
}
.reading-practice .rp-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--good, #5d9b6c);
  margin-bottom: 6px;
}
.reading-practice p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }

.reading-links {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed rgba(0,0,0,0.15);
}
.reading-links .rl-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft, #6c685d);
  margin-bottom: 12px;
}
.reading-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reading-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--primary-deep);
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid rgba(171, 73, 43, 0.25);
  border-radius: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.reading-links a:hover {
  background: rgba(204, 87, 51, 0.06);
  border-color: var(--primary-deep);
}
.reading-links a:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .pd-actions li.pd-action-readable { gap: 10px; }
  .pda-read { width: 100%; justify-content: center; }
  .reading-block .rb-body { font-size: 15px; }
}

/* ============== PROBABILITY · NEW HERO (1 in 10^47) ============== */
.prob-prefix {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.prob-odds {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 28px);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.po-one  { font-size: clamp(80px, 14vw, 168px); }
.po-in   {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: none;
  -webkit-text-fill-color: var(--ink-soft);
  color: var(--ink-soft);
  font-style: italic;
  position: relative;
  top: -0.18em;
}
.po-pow  { font-size: clamp(80px, 14vw, 168px); }
.po-pow sup { font-size: 0.45em; top: -0.55em; }

.prob-footnote {
  margin-top: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.prob-footnote sup { font-size: 0.7em; }
.pf-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  background: var(--ink);
  color: var(--bg);
  padding: 3px 8px;
  border-radius: 3px;
}

/* ============== PROBABILITY · DERIVATION ============== */
.prob-derivation {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: 48px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pd-summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s;
}
.pd-summary:hover { background: #FFF; }
.pd-summary::-webkit-details-marker { display: none; }
.pd-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  background: var(--ink);
  color: var(--bg);
  padding: 5px 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pd-title {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.pd-title em { font-style: italic; color: var(--primary); font-weight: 700; }
.pd-arrow {
  font-size: 20px;
  color: var(--ink-soft);
  transition: transform 0.25s;
}
.prob-derivation[open] .pd-arrow { transform: rotate(180deg); }

.pd-steps {
  list-style: none;
  margin: 0;
  padding: 12px 28px 28px;
}
.pd-steps li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--rule);
}
.pd-steps li:last-child { border-bottom: none; }
.pd-step-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.pd-step-body h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.pd-step-body p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.pd-step-body em { color: var(--primary-deep); font-style: italic; font-weight: 600; }
.pd-step-body strong { font-weight: 700; }

/* ============== PROBABILITY · COMPARE & IMAGINE HEADERS ============== */
.prob-compare-head,
.prob-imagine-head {
  margin-bottom: 14px;
}
.pch-tag,
.pih-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pch-title,
.pih-title {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.prob-imagine-head { margin-top: 48px; }

/* ============== PROBABILITY · IMAGINE STACK ============== */
.prob-imagine-stack {
  display: grid;
  gap: 18px;
  margin-bottom: 40px;
}
.imagine-panel {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 28px 32px 22px;
  box-shadow: var(--shadow);
  transition: transform 0.2s, border-left-color 0.2s;
}
.imagine-panel:hover {
  transform: translateX(3px);
  border-left-color: var(--accent-deep);
}
.imagine-panel:nth-child(2) { border-left-color: var(--accent-deep); }
.imagine-panel:nth-child(3) { border-left-color: var(--primary-deep); }
.ip-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ip-headline {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.ip-body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
}
.ip-body strong { font-weight: 700; }
.ip-body em { font-style: italic; color: var(--primary-deep); font-weight: 600; }
.ip-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  flex-wrap: wrap;
}
.ip-eq { color: var(--primary); font-weight: 700; }

/* ============== PROBABILITY · INTENT CALLOUT ============== */
.prob-intent {
  background: var(--ink);
  color: #F6F5F4;
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  border-left: 6px solid var(--accent);
  margin-bottom: 28px;
}
.pi-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.prob-intent p {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
}
.prob-intent em { font-style: italic; color: var(--accent); font-weight: 600; }
.prob-intent strong { font-weight: 700; color: #FFF; }

/* ============== PATHWAY CARDS · BUTTON BEHAVIOR ============== */
.pw {
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  width: 100%;
  display: block;
  text-align: center;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.pw:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 8px 22px rgba(204, 87, 51, 0.12);
}
.pw:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.pw-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--primary);
  opacity: 0.78;
  transition: opacity 0.2s, gap 0.2s;
}
.pw:hover .pw-cta { opacity: 1; gap: 9px; }

/* ============== PATHWAY MODAL ============== */
.modal-header.pathway-header {
  background: linear-gradient(135deg, var(--ink) 0%, #2A271F 100%);
  color: #F6F5F4;
}
.modal-header.pathway-header .agency { color: var(--accent); }
.modal-header.pathway-header .title { color: #FFF; }
.modal-header.pathway-header .meta-row {
  color: rgba(246, 245, 244, 0.78);
}
.modal-header.pathway-header .meta-row b { color: var(--accent); }
.modal-header.pathway-header .stamp-big {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.16;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.pathway-body { padding: 28px 32px 32px; }
.pw-section { margin-bottom: 26px; }
.pw-section:last-child { margin-bottom: 0; }
.pw-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.pw-prose {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}
.pw-examples {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pw-examples li {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  padding: 12px 0 12px 22px;
  position: relative;
  border-bottom: 1px dashed var(--rule);
}
.pw-examples li:last-child { border-bottom: none; }
.pw-examples li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 12px;
  height: 1px;
  background: var(--primary);
}
.pw-recognise {
  background: var(--accent);
  border: 2px solid var(--accent-deep);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.pw-recognise .pw-tag {
  border-bottom-color: var(--accent-deep);
  color: var(--ink);
}
.pw-next-wrap { margin-top: 8px; text-align: center; }
.pw-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFF;
  background: var(--primary);
  padding: 12px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s, gap 0.2s;
}
.pw-next:hover { background: var(--primary-deep); gap: 12px; }

/* ============== PROBABILITY · MOBILE ============== */
@media (max-width: 720px) {
  .prob-odds { gap: 10px; }
  .po-in { font-size: 22px; }
  .pd-steps li { grid-template-columns: 44px 1fr; gap: 14px; }
  .pd-step-num { font-size: 28px; }
  .pd-summary { padding: 18px 20px; gap: 12px; }
  .pd-title { font-size: 17px; }
  .imagine-panel { padding: 22px 22px 18px; }
  .ip-headline { font-size: 19px; }
  .prob-intent { padding: 24px 22px; }
  .prob-intent p { font-size: 15px; }
  .pathway-body { padding: 22px 20px 26px; }
  .modal-header.pathway-header .stamp-big { font-size: 64px; right: 18px; }
}

/* ============================================================
   SIGNUP WIZARD (.su-*)  ·  pay-what-you-can paywall
   ============================================================ */
.su-host{
  position:fixed;inset:0;z-index:9000;
  background:rgba(20,18,14,0.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  padding:24px;opacity:0;transition:opacity .22s ease;
}
.su-host.open{display:flex;opacity:1}
.su-modal{
  position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;
  background:var(--bg,#EBE9E5);
  border:1px solid var(--rule,#D8D3C7);border-radius:18px;
  box-shadow:0 30px 80px rgba(20,18,14,.45);
  padding:36px 34px 30px;color:var(--ink,#3E3B32);
  animation:suIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes suIn{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.su-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;
  border:1px solid var(--rule,#D8D3C7);background:rgba(255,255,255,.6);
  border-radius:50%;font-size:22px;line-height:1;cursor:pointer;
  color:var(--ink-soft,#7A7468);transition:background .15s,color .15s;
}
.su-close:hover{background:var(--ink,#3E3B32);color:#fff;border-color:var(--ink,#3E3B32)}
.su-eyebrow{
  font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.32em;
  font-weight:600;color:var(--primary-deep,#AB492B);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.su-eyepulse{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#5BA572;box-shadow:0 0 0 0 rgba(91,165,114,.5);
  animation:supulse 1.6s infinite;
}
@keyframes supulse{0%{box-shadow:0 0 0 0 rgba(91,165,114,.55)}70%{box-shadow:0 0 0 9px rgba(91,165,114,0)}100%{box-shadow:0 0 0 0 rgba(91,165,114,0)}}
.su-title{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(24px,3vw,30px);line-height:1.15;margin:0 0 14px;
}
.su-dots{display:flex;gap:8px;margin-bottom:18px}
.su-dot{
  flex:1;height:4px;border-radius:2px;background:var(--rule,#D8D3C7);transition:background .25s;
}
.su-dot.active,.su-dot.done{background:var(--primary,#CC5733)}
.su-dot.done{opacity:.55}
.su-error{
  background:rgba(204,87,51,.10);border:1px solid rgba(204,87,51,.32);
  color:var(--primary-deep,#AB492B);
  padding:10px 14px;border-radius:10px;font-size:13.5px;font-family:'Inter',sans-serif;
  margin-bottom:14px;
}
.su-form{display:flex;flex-direction:column;gap:14px}
.su-field{display:flex;flex-direction:column;gap:6px}
.su-lbl{
  font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft,#7A7468);font-weight:600;
}
.su-opt{color:var(--ink-faint,#9C968A);font-weight:500;letter-spacing:.18em}
.su-field input,.su-field textarea{
  font-family:'Inter',sans-serif;font-size:15px;
  padding:11px 14px;border:1px solid var(--rule,#D8D3C7);
  border-radius:10px;background:rgba(255,255,255,.7);color:var(--ink,#3E3B32);
  transition:border .15s,background .15s,box-shadow .15s;
}
.su-field input:focus,.su-field textarea:focus{
  outline:none;border-color:var(--primary,#CC5733);
  background:#fff;box-shadow:0 0 0 3px rgba(204,87,51,.15);
}
.su-field textarea{resize:vertical;min-height:74px}
.su-pathways{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.su-pathcard{
  text-align:left;background:rgba(255,255,255,.55);
  border:1.5px solid var(--rule,#D8D3C7);border-radius:12px;
  padding:14px 14px;cursor:pointer;transition:all .18s;
  display:flex;flex-direction:column;gap:4px;font-family:'Inter',sans-serif;
  color:var(--ink,#3E3B32);
}
.su-pathcard:hover{background:#fff;border-color:#B8AE96}
.su-pathcard.sel{
  background:var(--ink,#3E3B32);color:#F6F5F4;border-color:var(--ink,#3E3B32);
  box-shadow:0 6px 18px rgba(62,59,50,.25);
}
.su-pathcard.sel .su-pc-sub{color:rgba(246,245,244,.75)}
.su-pc-id{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.06em;font-size:14px}
.su-pc-sub{font-size:12.5px;color:var(--ink-soft,#7A7468);line-height:1.4}
.su-paywall-lede{
  font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.6;
  color:var(--ink-soft,#7A7468);margin:0 0 4px;
}
.su-paywall-lede strong{color:var(--ink,#3E3B32)}
.su-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.su-tier{
  background:rgba(255,255,255,.55);border:1.5px solid var(--rule,#D8D3C7);
  border-radius:12px;padding:10px 6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:0;
  font-family:'Oswald',sans-serif;color:var(--ink,#3E3B32);
  transition:all .15s;
}
.su-tier:hover{background:#fff;border-color:#B8AE96}
.su-tier.sel{
  background:var(--accent,#FFE375);border-color:var(--accent,#FFE375);
  box-shadow:0 6px 14px rgba(255,227,117,.4);
}
.su-tier-num{font-size:20px;font-weight:600;line-height:1}
.su-tier-per{font-size:10.5px;letter-spacing:.16em;color:var(--ink-soft,#7A7468);text-transform:uppercase;margin-top:2px}
.su-tier.sel .su-tier-per{color:var(--ink,#3E3B32)}
.su-amt-wrap{
  display:flex;align-items:center;border:1px solid var(--rule,#D8D3C7);
  border-radius:10px;background:rgba(255,255,255,.7);padding:0 10px;
  transition:border .15s,box-shadow .15s,background .15s;
}
.su-amt-wrap:focus-within{
  border-color:var(--primary,#CC5733);background:#fff;
  box-shadow:0 0 0 3px rgba(204,87,51,.15);
}
.su-amt-prefix,.su-amt-suffix{
  font-family:'Oswald',sans-serif;color:var(--ink-soft,#7A7468);
  font-size:14px;font-weight:500;
}
.su-amt-wrap input{
  flex:1;border:none;background:transparent;padding:11px 8px;
  font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;color:var(--ink,#3E3B32);
}
.su-amt-wrap input:focus{outline:none}
.su-summary{
  background:rgba(255,255,255,.5);border:1px dashed var(--rule,#D8D3C7);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;
  font-family:'Inter',sans-serif;font-size:13.5px;
}
.su-sum-row{display:flex;justify-content:space-between;gap:12px}
.su-sum-row span{color:var(--ink-soft,#7A7468)}
.su-sum-row strong{color:var(--ink,#3E3B32);font-weight:600}
.su-actions{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.su-actions.center{justify-content:center}
.su-btn{
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;padding:12px 20px;
  border-radius:999px;border:1px solid var(--ink,#3E3B32);
  background:transparent;color:var(--ink,#3E3B32);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:background .18s,color .18s,transform .18s;
}
.su-btn:hover:not([disabled]){background:rgba(255,227,117,.35)}
.su-btn.primary{background:var(--ink,#3E3B32);color:#F6F5F4}
.su-btn.primary:hover:not([disabled]){background:var(--primary,#CC5733);border-color:var(--primary,#CC5733)}
.su-btn.ghost{border-color:var(--rule,#D8D3C7);color:var(--ink-soft,#7A7468)}
.su-btn[disabled]{opacity:.55;cursor:not-allowed}
.su-fineprint{
  font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-faint,#9C968A);
  text-align:center;margin:6px 0 0;line-height:1.45;
}
.su-done{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:8px 0}
.su-checkmark{
  width:64px;height:64px;border-radius:50%;
  background:#5BA572;color:#fff;font-size:34px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(91,165,114,.35);
}
.su-done-lede{font-family:'Inter',sans-serif;font-size:15px;line-height:1.55;color:var(--ink,#3E3B32);max-width:380px;margin:0}
.su-status{display:flex;flex-direction:column;gap:4px;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink-soft,#7A7468)}
@media (max-width:560px){
  .su-modal{padding:28px 20px 24px}
  .su-pathways{grid-template-columns:1fr}
  .su-tiers{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   SEAN CHAT DOCK  ·  floating AI assistant
   ============================================================ */
.sean-dock{position:fixed;right:24px;bottom:24px;z-index:8000;font-family:'Inter',sans-serif}
.sean-fab{
  display:flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;
  background:var(--ink,#3E3B32);color:#F6F5F4;border:none;border-radius:999px;
  box-shadow:0 10px 30px rgba(20,18,14,.35);cursor:pointer;
  font-family:'Oswald',sans-serif;letter-spacing:.16em;font-size:12px;
  text-transform:uppercase;font-weight:500;position:relative;
  transition:background .18s,transform .18s,box-shadow .18s;
}
.sean-fab:hover{background:var(--primary,#CC5733);transform:translateY(-1px)}
.sean-fab-avatar{
  width:26px;height:26px;border-radius:50%;background:var(--accent,#FFE375);
  color:var(--ink,#3E3B32);display:inline-flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;letter-spacing:0;
}
.sean-fab-pulse{
  position:absolute;top:9px;left:34px;width:8px;height:8px;border-radius:50%;
  background:#5BA572;box-shadow:0 0 0 0 rgba(91,165,114,.6);animation:supulse 1.8s infinite;
}
.sean-panel{
  position:absolute;bottom:62px;right:0;width:min(380px,calc(100vw - 32px));
  height:min(560px,70vh);background:var(--bg,#EBE9E5);
  border:1px solid var(--rule,#D8D3C7);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(20,18,14,.35);
  display:none;flex-direction:column;
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .22s ease,transform .22s ease;
}
.sean-panel.open{display:flex;opacity:1;transform:none}
.sean-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;background:var(--ink,#3E3B32);color:#F6F5F4;
}
.sean-head-id{display:flex;align-items:center;gap:10px}
.sean-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--accent,#FFE375);
  color:var(--ink,#3E3B32);display:inline-flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;
}
.sean-name{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.06em;font-size:15px;line-height:1.1}
.sean-sub{font-size:11px;color:rgba(246,245,244,.7);margin-top:2px;display:flex;align-items:center;gap:6px}
.sean-status-dot{width:7px;height:7px;border-radius:50%;background:#5BA572;display:inline-block}
.sean-close{
  background:transparent;border:1px solid rgba(246,245,244,.25);color:#F6F5F4;
  width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.sean-close:hover{background:rgba(246,245,244,.12);border-color:rgba(246,245,244,.5)}
.sean-msgs{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px}
.sean-msg{display:flex;gap:8px;align-items:flex-end}
.sean-msg.user{justify-content:flex-end}
.sean-msg-av{
  width:26px;height:26px;border-radius:50%;background:var(--ink,#3E3B32);color:var(--accent,#FFE375);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:12px;
}
.sean-msg-bubble{
  max-width:78%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;
  background:#fff;border:1px solid var(--rule,#D8D3C7);color:var(--ink,#3E3B32);
}
.sean-msg.user .sean-msg-bubble{background:var(--ink,#3E3B32);color:#F6F5F4;border-color:var(--ink,#3E3B32);border-bottom-right-radius:4px}
.sean-msg.assistant .sean-msg-bubble{border-bottom-left-radius:4px}
.sean-msg-bubble.typing{display:inline-flex;gap:4px;padding:14px 16px}
.sean-msg-bubble.typing span{
  width:6px;height:6px;border-radius:50%;background:var(--ink-soft,#7A7468);
  animation:seant 1.2s infinite ease-in-out;
}
.sean-msg-bubble.typing span:nth-child(2){animation-delay:.18s}
.sean-msg-bubble.typing span:nth-child(3){animation-delay:.36s}
@keyframes seant{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.sean-form{
  display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rule,#D8D3C7);
  background:rgba(255,255,255,.55);
}
.sean-form input{
  flex:1;padding:10px 14px;border:1px solid var(--rule,#D8D3C7);border-radius:999px;
  font-family:'Inter',sans-serif;font-size:14px;background:#fff;color:var(--ink,#3E3B32);
}
.sean-form input:focus{outline:none;border-color:var(--primary,#CC5733);box-shadow:0 0 0 3px rgba(204,87,51,.15)}
.sean-form button{
  width:40px;height:40px;border-radius:50%;border:none;background:var(--ink,#3E3B32);
  color:#F6F5F4;cursor:pointer;font-size:18px;line-height:1;transition:background .15s,transform .15s;
}
.sean-form button:hover{background:var(--primary,#CC5733)}
.sean-foot{
  padding:8px 14px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint,#9C968A);font-family:'Oswald',sans-serif;text-align:center;
  background:rgba(255,255,255,.4);border-top:1px solid var(--rule,#D8D3C7);
}
@media (max-width:560px){
  .sean-dock{right:14px;bottom:14px}
  .sean-fab-label{display:none}
  .sean-fab{padding:10px;border-radius:50%}
  .sean-fab-pulse{top:6px;left:30px}
  .sean-panel{height:calc(100vh - 110px);bottom:64px;right:0}
}

/* ============================================================
   SCRIPTURE SEARCH SECTION
   ============================================================ */
.scripture-section { background: linear-gradient(180deg, var(--cream) 0%, #f3ead8 100%); }
.scripture-card {
  max-width: 980px; margin: 32px auto 0;
  background: #fff; border: 1px solid rgba(60,30,20,0.10);
  border-radius: 18px; padding: 28px 28px 24px;
  box-shadow: 0 18px 50px -28px rgba(60,30,20,0.35);
}
.scrip-form { display: flex; flex-direction: column; gap: 14px; }
.scrip-label {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.18em;
  font-size: 11px; color: rgba(60,30,20,0.55); font-weight: 600;
}
.scrip-input-wrap { display: flex; gap: 10px; align-items: stretch; }
#scrip-q {
  flex: 1; min-width: 0; font: inherit; font-size: 17px;
  padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid rgba(60,30,20,0.15); background: #fdfbf6;
  color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
#scrip-q:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(196,82,40,0.15); }
.scrip-submit {
  flex: 0 0 auto; font-family: 'Oswald', sans-serif; letter-spacing: 0.12em;
  font-weight: 600; font-size: 14px; text-transform: uppercase;
  background: var(--terracotta); color: #fff; border: 0; padding: 0 22px;
  border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.15s, transform 0.05s;
}
.scrip-submit:hover:not(:disabled) { background: #a93d22; }
.scrip-submit:active:not(:disabled) { transform: translateY(1px); }
.scrip-submit:disabled { opacity: 0.6; cursor: wait; }
.scrip-spinner {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: scrip-spin 0.7s linear infinite;
}
@keyframes scrip-spin { to { transform: rotate(360deg); } }
.scrip-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.scrip-chip {
  font: inherit; font-size: 13px; background: #fdf6e9;
  border: 1px solid rgba(60,30,20,0.15); color: var(--ink);
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.scrip-chip:hover { background: #f7e9c8; border-color: var(--golden); }
.scrip-result { margin-top: 24px; }
.scrip-result:empty { display: none; }
.scrip-result-head { margin-bottom: 14px; }
.scrip-eye {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.16em;
  font-size: 11px; color: rgba(60,30,20,0.6); font-weight: 600;
}
.scrip-alias { font-weight: 400; opacity: 0.75; text-transform: none; letter-spacing: 0; }
.scrip-result-head h3 {
  font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600;
  margin: 4px 0 0; color: var(--ink);
}
.scrip-verses { display: grid; gap: 14px; }
.scrip-verse {
  border: 1px solid rgba(60,30,20,0.10); border-radius: 14px;
  padding: 16px 18px; background: #fdfbf6;
}
.sv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.sv-ref {
  font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--terracotta);
}
.sv-coh { text-align: right; font-size: 11px; line-height: 1.3; }
.sv-coh-num {
  display: block; font-family: 'Oswald', sans-serif; font-size: 18px;
  font-weight: 600; letter-spacing: 0.02em;
}
.sv-coh-word { display: block; color: rgba(60,30,20,0.65); font-size: 11px; max-width: 180px; }
.sv-coh.good .sv-coh-num { color: #4a7c2a; }
.sv-coh.bad  .sv-coh-num { color: #a93d22; }
.sv-coh.mid  .sv-coh-num { color: #b8862a; }
.sv-text { margin: 6px 0 12px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.sv-bar { height: 5px; background: rgba(60,30,20,0.08); border-radius: 999px; overflow: hidden; }
.sv-bar-fill { height: 100%; transition: width 0.5s ease; }
.sv-bar-fill.good { background: linear-gradient(90deg, #6ea44a, #4a7c2a); }
.sv-bar-fill.bad  { background: linear-gradient(90deg, #d77555, #a93d22); }
.sv-bar-fill.mid  { background: linear-gradient(90deg, #d8b059, #b8862a); }
.scrip-error {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: #fbe9df; border: 1px solid rgba(169,61,34,0.25); color: #6a2410;
}
.scrip-err-msg { font-weight: 500; margin-bottom: 8px; }
.scrip-err-sug { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scrip-err-chip {
  font: inherit; font-size: 12px; background: #fff; border: 1px solid rgba(169,61,34,0.3);
  color: #6a2410; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.scrip-err-chip:hover { background: #f7e9c8; }
.scrip-foot {
  max-width: 980px; margin: 14px auto 0; text-align: center;
  font-size: 12px; color: rgba(60,30,20,0.55);
}
.scrip-foot .mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 11.5px; }
@media (max-width: 640px) {
  .scripture-card { padding: 22px 18px; }
  .scrip-input-wrap { flex-direction: column; }
  .scrip-submit { padding: 12px 22px; justify-content: center; }
  .sv-head { flex-direction: column; }
  .sv-coh { text-align: left; }
  .sv-coh-word { max-width: none; }
}


/* ===== ChristCode AI · Enhanced — selectable verse cards + run bar + AI commentary ===== */
.scrip-verse.selectable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  position: relative;
}
.scrip-verse.selectable:hover {
  border-color: var(--terracotta);
  box-shadow: 0 6px 22px rgba(169, 61, 34, 0.10);
}
.scrip-verse.selectable:active { transform: translateY(1px); }
.scrip-verse.selectable.is-picked {
  border-color: var(--terracotta);
  background: linear-gradient(180deg, #fbf2dc 0%, #f7e8c8 100%);
  box-shadow: 0 0 0 2px var(--terracotta) inset, 0 8px 28px rgba(169, 61, 34, 0.14);
}
.sv-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.scrip-verse.selectable:focus-within {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
  border-color: var(--terracotta);
}
.sv-pickhint {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(60,30,20,0.5);
}
.scrip-verse.selectable.is-picked .sv-pickhint { color: var(--terracotta); }
.scrip-verse.selectable.is-picked .sv-pickhint::before { content: '✓ '; }

.enh-run-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  margin-top: 22px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fffaf0 0%, #fbeed0 100%);
  border: 1.5px solid var(--terracotta);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(169, 61, 34, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.enh-run-pick {
  font-size: 14px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.enh-run-pick b { font-size: 16px; font-weight: 600; color: var(--terracotta); }
.enh-run-eye {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(60,30,20,0.55);
}
.enh-run-bar .prod-submit { flex: 0 0 auto; }

.ai-commentary {
  margin-top: 14px;
  padding: 22px 24px;
  background: #fffaf0;
  border: 1px solid rgba(60,30,20,0.10);
  border-radius: 12px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}
.ai-commentary p { margin: 0 0 14px; }
.ai-commentary p:last-child { margin-bottom: 0; }
.ai-commentary strong { color: var(--terracotta); font-weight: 600; }
.ai-list { margin: 0 0 14px; padding-left: 22px; }
.ai-list li { margin-bottom: 6px; }

/* ==========================================================================
   Neural Analyzer Widget
   ========================================================================== */

.neural-analyzer-widget {
  margin: 48px 0;
  background: var(--bg-card);
  border: 2px solid var(--primary);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(204, 87, 51, 0.15);
}

.analyzer-container {
  padding: 0;
}

.analyzer-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: white;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.analyzer-title {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brain-icon {
  font-size: 24px;
}

.gpu-badge {
  background: rgba(255, 227, 117, 0.2);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 500;
}

.analyzer-input-section {
  padding: 28px;
}

#neural-text-input {
  width: 100%;
  min-height: 80px;
  padding: 16px 20px;
  border: 2px solid var(--rule);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-paper);
  resize: vertical;
  transition: border-color 0.2s;
}

#neural-text-input:focus {
  outline: none;
  border-color: var(--primary);
}

.analyzer-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.analyze-button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 32px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.analyze-button:hover {
  background: var(--primary-deep);
  transform: translateY(-1px);
}

.analyze-button:disabled {
  background: var(--secondary);
  cursor: not-allowed;
  transform: none;
}

.analysis-results {
  padding: 28px;
  border-top: 1px solid var(--rule);
  background: var(--bg-paper);
}

.coherence-display {
  text-align: center;
  margin-bottom: 24px;
}

.coherence-score {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  font-weight: 700;
  padding: 20px 40px;
  border-radius: 16px;
  display: inline-block;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.coherence-label {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}

.classification {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 32px;
}

.neural-prediction {
  background: white;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--rule);
}

.prediction-title {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brain-regions {
  display: grid;
  gap: 12px;
}

.brain-region {
  display: grid;
  grid-template-columns: 1fr 200px 60px;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.region-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.region-bar {
  height: 8px;
  background: var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  transition: width 0.8s ease-out;
}

.region-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: right;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .brain-region {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  
  .region-bar {
    width: 100%;
  }
  
  .region-value {
    text-align: center;
  }
  
  .analyzer-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.mobile-menu-btn:hover {
  background: rgba(62, 59, 50, 0.1);
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }
  
  .navlinks {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    font-size: 20px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
  }
  
  .navlinks.open {
    transform: translateY(0);
    opacity: 1;
  }
  
  .nav-cta {
    display: none;
  }
}