/* preview-demo.css — dark immersive stage for the 7-step Valor demo.
   Self-contained: doesn't inherit from components.css. */

:root {
  --d-bg:        #0E1318;
  --d-stage:     #0E1318;
  --d-surface:   #1F2935;
  --d-surface-2: #15202B;
  --d-line:      #2A3744;
  --d-ink:       #ECEFF3;
  --d-ink-dim:   #A8B2BE;
  --d-ink-faint: #5A6574;
  --amber:       #E8B04B;
  --amber-soft:  rgba(232,176,75,.12);
  --sage:        #7FB069;
  --azure:       #5DA9E9;
  --rose:        #E86B5E;
  --violet:      #B089DD;
  --term-bg:     #0A0E13;
}

/* OVERRIDE the global cream theme on this page only. */
body.demo-page {
  background: var(--d-bg) !important;
  color: var(--d-ink) !important;
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body.demo-page a { color: var(--amber); }
body.demo-page h1, body.demo-page h2, body.demo-page h3, body.demo-page h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  color: var(--d-ink);
}

/* ── OUTER STAGE ──────────────────────────────── */
.stage {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 100vh;
  position: relative;
}

/* Subtle radial backlight behind the phone frame */
.stage::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(232,176,75,.06), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(176,137,221,.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── TOP BAR ──────────────────────────────────── */
.top-bar {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--d-line);
  background: rgba(14,19,24,.75);
  backdrop-filter: blur(8px);
}
.top-bar .brand {
  display: flex; align-items: baseline; gap: .5rem;
  text-decoration: none;
}
.top-bar .brand-name { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 1.25rem; color: var(--d-ink); }
.top-bar .brand-tag  { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--d-ink-faint); letter-spacing: .1em; text-transform: uppercase; }

.step-dots {
  display: flex; align-items: center; gap: .55rem;
  flex: 1; justify-content: center;
}
.step-dots .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--d-line);
  transition: width .3s ease, height .3s ease, background .3s ease;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; line-height: 1;
}
.step-dots .dot.done {
  width: 14px; height: 14px; background: var(--sage); color: var(--d-bg);
}
.step-dots .dot.done::after { content: '✓'; }
.step-dots .dot.active {
  width: 18px; height: 18px; background: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-soft);
}

.step-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  color: var(--d-ink-faint);
  white-space: nowrap;
}

/* Audience toggle (overrides cream variant) */
.demo-page .pill-toggle {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: 999px;
  padding: 3px;
  display: inline-flex;
}
.demo-page .pill-toggle button {
  appearance: none; border: 0;
  background: transparent;
  color: var(--d-ink-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  padding: .35rem .85rem;
  border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s;
}
.demo-page .pill-toggle button[aria-pressed="true"] {
  background: var(--amber); color: var(--d-bg);
}

/* ── MAIN GRID ────────────────────────────────── */
.demo-main {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  min-height: 0;
}
@media (max-width: 980px) {
  .demo-main { grid-template-columns: 1fr; }
  .panel-left, .panel-right { display: none; }
}

.panel-left, .panel-right {
  max-width: 22rem;
  align-self: center;
  color: var(--d-ink-dim);
}
.panel-left { justify-self: end; text-align: right; }
.panel-right { justify-self: start; text-align: left; }

.panel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem; font-style: italic;
  color: var(--d-ink); margin: 0 0 .5rem;
  line-height: 1.3;
}
.panel-body { font-size: .95rem; line-height: 1.6; }
.panel-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--amber); margin: 0 0 .65rem;
}

/* ── PHONE FRAME ──────────────────────────────── */
.phone-stack {
  display: flex; gap: 1.5rem;
  justify-content: center; align-items: center;
  flex-wrap: wrap;
}
.phone {
  width: 420px;
  height: 720px;
  background: #FDFAF4;
  border-radius: 36px;
  border: 1px solid var(--d-line);
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 0 0 8px #1A2230;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  color: #2C1810;
  font-family: 'Manrope', system-ui, sans-serif;
}
.phone .notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 22px;
  background: #1A2230; border-radius: 0 0 14px 14px;
  z-index: 5;
}
.phone-screen {
  flex: 1; padding: 40px 22px 22px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.phone-screen::-webkit-scrollbar { width: 4px; }
.phone-screen::-webkit-scrollbar-thumb { background: rgba(180,83,9,.3); border-radius: 2px; }

.phone-label {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--d-ink-dim); white-space: nowrap;
}
.phone[data-tint="rose"]   .phone-screen { border-top: 3px solid var(--rose); }
.phone[data-tint="azure"]  .phone-screen { border-top: 3px solid var(--azure); }

/* ── PHONE INTERNAL ELEMENTS ──────────────────── */
.app-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; text-transform: uppercase; letter-spacing: .15em;
  color: #9B8B7A; margin: 0 0 .35rem;
}
.app-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; margin: 0 0 .5rem; color: #2C1810; font-weight: 500; }
.app-sub   { font-size: .9rem; color: #6B5744; margin: 0 0 1rem; }

.btn-primary-amber {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #B45309; color: #fff;
  border: 0; border-radius: 999px;
  padding: .7rem 1.25rem;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 500; font-size: .92rem;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-primary-amber:hover { background: #92400E; transform: translateY(-1px); }
.btn-primary-amber:disabled { opacity: .5; cursor: not-allowed; transform: none; background: #B45309; }

.btn-ghost {
  background: transparent; color: #6B5744; border: 1px solid #D4C5B2;
  border-radius: 999px; padding: .55rem 1rem;
  font-size: .85rem; cursor: pointer;
}

/* ── STEP 0 — Landing ─────────────────────────── */
.landing { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 1.25rem; text-align: center; }
.landing-logo {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 3.4rem;
  color: #2C1810;
  margin: 0;
  opacity: 0; animation: fadeIn .6s .1s forwards ease;
}
.pulse-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #B45309;
  position: relative;
  opacity: 0; animation: fadeIn .4s .8s forwards ease;
}
.pulse-dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid #B45309;
  animation: pulse 2s infinite ease-out;
}
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
@keyframes fadeIn { to { opacity: 1; } }

.landing-tagline {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem; font-style: italic;
  color: #6B5744; max-width: 18rem;
  margin: 0; line-height: 1.5;
  opacity: 0; animation: fadeIn .5s 1.1s forwards ease;
}
.landing-cta { opacity: 0; animation: fadeIn .5s 1.4s forwards ease; }

.kbd-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: .7rem;
  color: #9B8B7A;
}

/* ── STEP 1 — Reticulum terminal ──────────────── */
.terminal {
  background: var(--term-bg); color: #C9D4DF;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  line-height: 1.5;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 .8rem;
  height: 280px; overflow: hidden;
  border: 1px solid #1F2935;
  position: relative;
}
.terminal::after {
  content: '_'; position: absolute; bottom: 14px;
  color: var(--amber); animation: blink 1s step-end infinite;
}
.terminal.done::after { display: none; }
.terminal.faded { opacity: .55; transition: opacity .8s ease; }
@keyframes blink { 50% { opacity: 0; } }

.term-line { white-space: pre; }
.term-line.dim    { color: #5A6574; }
.term-line.amber  { color: var(--amber); }
.term-line.sage   { color: var(--sage); }
.term-line.azure  { color: var(--azure); }
.term-line.rose   { color: var(--rose); }
.term-cursor { display: none; }

.identity-hash {
  cursor: pointer;
  text-decoration: underline dotted rgba(232,176,75,.4);
  text-underline-offset: 2px;
}

.mesh-viz {
  background: #FDFAF4;
  border: 1px solid #D4C5B2;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  position: relative;
}
.mesh-viz svg { width: 100%; height: 130px; display: block; }
.mesh-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(127,176,105,.15);
  color: #4A7140;
  border: 1px solid rgba(127,176,105,.4);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
  margin-top: .5rem;
  opacity: 0; transition: opacity .4s;
}
.mesh-badge.show { opacity: 1; }
.mesh-caveat {
  font-size: .68rem; color: #9B8B7A; font-family: 'JetBrains Mono', monospace;
  margin: .5rem 0 0; line-height: 1.4;
}

/* mesh node + edge styles */
.mesh-node-group { transition: transform .3s; }
.mesh-edge { stroke: #B45309; stroke-width: 1; opacity: .35; stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawEdge 1s .3s forwards ease; }
@keyframes drawEdge { to { stroke-dashoffset: 0; } }
.mesh-pulse {
  fill: var(--amber);
  animation: pulseDot 2s infinite linear;
  opacity: 0;
}
@keyframes pulseDot {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Right-panel mini terminal for v.net step */
.mini-term {
  background: var(--term-bg); color: #C9D4DF;
  font-family: 'JetBrains Mono', monospace; font-size: .7rem;
  border-radius: 8px; padding: 10px;
  border: 1px solid #1F2935;
  margin-top: .85rem;
}
.mini-term .term-line { font-size: .68rem; }

.mode-badges {
  display: flex; gap: .35rem; flex-wrap: wrap;
  margin-top: .7rem; justify-content: center;
}
.mode-badge {
  font-family: 'JetBrains Mono', monospace; font-size: .65rem;
  background: var(--d-surface); color: var(--d-ink-dim);
  border: 1px solid var(--d-line);
  padding: .15rem .5rem; border-radius: 4px;
}
.mode-badge.ok { color: var(--sage); border-color: rgba(127,176,105,.3); }

/* ── STEP 2 — Bot dialog ──────────────────────── */
.chat-area {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 0 0 1rem;
  flex: 1; overflow-y: auto;
}
.chat-msg {
  max-width: 85%;
  padding: .65rem .85rem;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.45;
  animation: slideIn .35s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.bot {
  background: var(--amber-soft);
  color: #2C1810; align-self: flex-start;
  border-top-left-radius: 4px;
}
.chat-msg.user {
  background: #B45309; color: #fff;
  align-self: flex-end;
  border-top-right-radius: 4px;
}
.chat-msg .bot-name {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; color: #B45309;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .25rem;
}
.typing {
  display: inline-flex; gap: 3px; align-items: center;
  padding: .5rem .85rem; background: var(--amber-soft); border-radius: 14px;
  align-self: flex-start;
}
.typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: #B45309; opacity: .3;
  animation: typing 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%,80%,100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.pill-row {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-self: flex-start; max-width: 90%;
}
.pill-choice {
  background: #FDFAF4;
  color: #2C1810;
  border: 1px solid #D4C5B2;
  border-radius: 999px;
  padding: .5rem .9rem;
  font-size: .82rem; cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  position: relative;
}
.pill-choice:hover { background: var(--amber-soft); border-color: var(--amber); }
.pill-choice.hint::after {
  content: ''; position: absolute; inset: -3px;
  border: 2px solid var(--amber); border-radius: 999px;
  opacity: 0; animation: hintPulse 1.5s 2;
}
@keyframes hintPulse {
  0%,100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.pill-choice.selected { background: #B45309; color: #fff; border-color: #B45309; }

.recommendation-card {
  background: #FDFAF4;
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  padding: 1rem;
  margin: .5rem 0;
  animation: slideIn .4s ease;
}
.recommendation-card .reco-title {
  font-family: 'Fraunces', serif; font-size: 1.05rem; margin: 0 0 .25rem;
  display: flex; align-items: center; gap: .5rem;
}
.recommendation-card .reco-meta {
  font-family: 'JetBrains Mono', monospace; font-size: .7rem;
  color: #9B8B7A; margin: 0 0 .55rem;
}
.recommendation-card .reco-body { font-size: .85rem; color: #6B5744; line-height: 1.5; margin: 0 0 .65rem; }
.recommendation-card .reco-alt  { font-size: .75rem; color: #9B8B7A; }

/* ── STEP 3 — Session preview ─────────────────── */
.session-card {
  background: #FDFAF4; border: 1px solid #D4C5B2;
  border-radius: 12px; padding: .85rem 1rem;
  position: relative;
  margin-bottom: .65rem;
}
.session-card .label { font-weight: 500; }
.session-card .by    { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: #9B8B7A; }
.session-card .lock-overlay {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--amber-soft); color: #B45309;
  font-family: 'JetBrains Mono', monospace; font-size: .65rem;
  padding: .15rem .4rem; border-radius: 4px;
}
.fake-slider {
  display: flex; align-items: center; gap: .65rem;
  margin: .35rem 0;
  font-size: .78rem;
}
.fake-slider .name { width: 5em; color: #6B5744; font-size: .72rem; }
.fake-slider .track {
  flex: 1; height: 4px; background: #D4C5B2; border-radius: 4px;
  position: relative;
  transition: width .8s ease;
}
.fake-slider .track::before {
  content: ''; position: absolute; left: 0; top: 0; height: 100%;
  width: var(--v, 50%); background: #B45309; border-radius: 4px;
  transition: width .8s ease;
}
.fake-slider .track::after {
  content: ''; position: absolute; left: var(--v, 50%); top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: #FDFAF4; border: 2px solid #B45309;
  transform: translate(-50%, -50%);
  transition: left .8s ease;
}
.fake-slider .val { font-family: 'JetBrains Mono', monospace; width: 2em; text-align: right; }

.participants {
  display: flex; align-items: center; gap: .35rem;
  margin: 1rem 0;
  font-size: .8rem; color: #6B5744;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 600;
  color: #fff;
}
.avatar.a { background: #B45309; }
.avatar.b { background: #5C8A5A; }
.avatar.v { background: #CA8A04; }

/* ── STEP 4 — Split-screen voting ─────────────── */
/* phone-stack already supports two phones side by side; phone-label adds caption */

/* ── STEP 5 — v.net poll ──────────────────────── */
.poll-modal {
  background: #FDFAF4; border: 1px solid #D4C5B2;
  border-radius: 14px; padding: 1rem;
  animation: slideIn .35s ease;
}
.poll-q { font-family: 'Fraunces', serif; font-size: 1.05rem; margin: 0 0 .8rem; color: #2C1810; }
.poll-options { display: flex; flex-direction: column; gap: .4rem; }
.poll-option {
  background: #fff; border: 1px solid #D4C5B2; border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer; font-size: .85rem;
  text-align: left; transition: background .2s, border-color .2s;
}
.poll-option:hover { background: var(--amber-soft); border-color: var(--amber); }
.poll-option.voted { background: rgba(127,176,105,.15); border-color: var(--sage); color: #4A7140; font-weight: 500; }

.poll-results {
  margin-top: .85rem; padding: .65rem 0 0; border-top: 1px dashed #D4C5B2;
}
.poll-vote-row {
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; padding: .4rem 0;
  animation: slideIn .35s ease;
}
.poll-vote-row .check { color: var(--sage); font-weight: 700; }

.consensus-pill {
  display: inline-block;
  background: rgba(127,176,105,.18);
  color: #4A7140;
  border: 1px solid rgba(127,176,105,.4);
  padding: .25rem .65rem; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  margin-top: .35rem;
}

/* ── STEP 6 — Result ──────────────────────────── */
.result-wrap { padding: .5rem 0 1rem; }
.chart-canvas-wrap {
  width: 200px; height: 200px; margin: 0 auto 1rem;
  position: relative;
}
.result-list { list-style: none; padding: 0; margin: 0; }
.result-row {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'JetBrains Mono', monospace; font-size: .85rem;
  padding: .35rem 0;
  border-bottom: 1px dashed #D4C5B2;
  opacity: 0; transform: translateY(6px);
  animation: slideIn .35s forwards ease;
}
.result-row .swatch { width: 12px; height: 12px; border-radius: 3px; }
.result-row .name { flex: 1; color: #2C1810; }
.result-row .pct { font-weight: 600; }
.result-row .arrow { color: #9B8B7A; font-size: .7rem; }

details.sensitivity {
  margin-top: .9rem; background: #F2ECDF; border-radius: 10px;
  padding: .65rem .85rem;
}
details.sensitivity summary { cursor: pointer; font-weight: 500; font-size: .85rem; color: #2C1810; }
details.sensitivity[open] { background: var(--amber-soft); }
.sens-table {
  width: 100%; border-collapse: collapse; font-size: .75rem;
  font-family: 'JetBrains Mono', monospace; margin-top: .5rem;
}
.sens-table td, .sens-table th { padding: .25rem .4rem; text-align: left; }
.sens-table tr:not(:last-child) { border-bottom: 1px dashed rgba(155,139,122,.3); }

.daoist-quote {
  font-family: 'Fraunces', serif; font-style: italic;
  color: #6B5744; font-size: .85rem;
  margin: .85rem 0 0; line-height: 1.5;
  border-left: 2px solid var(--amber); padding-left: .75rem;
}

/* ── STEP 7 — Close ───────────────────────────── */
.success-card {
  text-align: center; padding: 1.5rem 0;
}
.success-card svg.check {
  width: 56px; height: 56px;
  margin-bottom: 1rem;
}
.success-card .check-circle, .success-card .check-tick {
  fill: none; stroke: #B45309; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.success-card .check-circle {
  stroke-dasharray: 226; stroke-dashoffset: 226;
  animation: drawCircle .55s .1s forwards ease;
}
.success-card .check-tick {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: drawTick .35s .65s forwards ease;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawTick   { to { stroke-dashoffset: 0; } }

.share-row { display: flex; gap: .65rem; justify-content: center; margin: 1rem 0; }
.share-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: #FDFAF4; border: 1px solid #D4C5B2; cursor: not-allowed;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; opacity: .8;
  font-size: 1.1rem;
}
.share-btn::after {
  content: 'preview'; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: .55rem;
  color: #9B8B7A; text-transform: uppercase; letter-spacing: .1em;
}

.outer-tagline {
  position: relative; z-index: 5;
  text-align: center; padding: 2rem 1rem 3rem;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.5rem; color: var(--d-ink); max-width: 38rem; margin: 0 auto;
  line-height: 1.4;
}
.outer-tagline .cta-row {
  display: flex; gap: .75rem; justify-content: center; margin-top: 1.25rem;
  font-style: normal; font-size: .95rem;
}
.outer-tagline .btn-amber {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--amber); color: var(--d-bg);
  border: 0; border-radius: 999px;
  padding: .65rem 1.25rem;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 500;
  text-decoration: none;
}
.outer-tagline .btn-ghost-d {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; color: var(--d-ink-dim);
  border: 1px solid var(--d-line); border-radius: 999px;
  padding: .65rem 1.25rem;
  font-family: 'Manrope', system-ui, sans-serif;
  text-decoration: none;
}
.outer-tagline .btn-amber:hover  { background: #C99A3D; }
.outer-tagline .btn-ghost-d:hover{ border-color: var(--amber); color: var(--amber); }

/* ── TOOLTIP ──────────────────────────────────── */
.daoist-tooltip {
  position: fixed; bottom: 80px; left: 24px;
  z-index: 30;
  background: var(--d-surface);
  border: 1px solid var(--amber);
  border-radius: 12px;
  padding: .85rem 1rem;
  max-width: 22rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .85rem;
  color: var(--d-ink-dim);
  cursor: pointer;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .35s;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.daoist-tooltip.show { opacity: 1; transform: translateY(0); }
.daoist-tooltip::before {
  content: '⌬'; color: var(--amber); margin-right: .5rem;
  font-family: monospace; font-size: 1rem;
}
.daoist-tooltip .extra {
  display: none;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px dashed var(--d-line);
  font-style: italic; color: var(--d-ink-faint);
  font-size: .8rem;
}
.daoist-tooltip.expanded .extra { display: block; }
.daoist-tooltip[hidden] { display: none; }

/* ── FOOTER NAV ───────────────────────────────── */
.demo-footer {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem;
  border-top: 1px solid var(--d-line);
  background: rgba(14,19,24,.75);
  backdrop-filter: blur(8px);
}
.btn-nav {
  background: transparent; color: var(--d-ink-dim);
  border: 1px solid var(--d-line); border-radius: 999px;
  padding: .55rem 1.25rem;
  font-family: 'Manrope', system-ui, sans-serif; font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-nav:hover { border-color: var(--amber); color: var(--amber); }
.btn-nav.primary {
  background: var(--amber); color: var(--d-bg); border-color: var(--amber);
  font-weight: 500;
}
.btn-nav.primary:hover { background: #C99A3D; color: var(--d-bg); }
.btn-nav:disabled { opacity: .35; cursor: not-allowed; }

.progress-bar {
  position: relative;
  width: 100%; height: 1px; background: var(--d-line);
}
.progress-bar > .fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--amber);
  width: 0%;
  transition: width .4s ease;
}

/* ── EASTER EGG MODAL ─────────────────────────── */
.egg-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,14,19,.78);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
}
.egg-backdrop.open { display: flex; animation: fadeIn .25s; }
.egg-modal {
  background: var(--term-bg); color: #C9D4DF;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  border: 1px solid var(--amber);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  max-width: 36rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  white-space: pre;
}
.egg-modal .head { color: var(--amber); margin-bottom: .65rem; font-size: .85rem; }
.egg-modal .foot { color: #5A6574; margin-top: .85rem; font-style: italic; white-space: normal; }

/* ── REDUCED MOTION ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after, .mesh-pulse, .mesh-edge,
  .landing-logo, .pulse-dot, .landing-tagline, .landing-cta,
  .chat-msg, .typing span, .pill-choice.hint::after,
  .recommendation-card, .poll-modal, .poll-vote-row,
  .result-row, .success-card .check-circle, .success-card .check-tick,
  .terminal::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .terminal::after { display: none; }
}

/* RS additions for preview demo */
.demo-page .brand-name em { font-style: italic; font-weight: 400; color: var(--amber); }

/* Elders mode: parchment-to-cream gradient on the immersive stage */
html.aud-elders body.demo-page {
  background: linear-gradient(160deg, #F6F1E9 0%, #EDE8DF 100%) !important;
  color: #1E140C !important;
}
html.aud-elders body.demo-page .top-bar,
html.aud-elders body.demo-page .demo-footer {
  background: rgba(246,241,233,.85);
  border-color: #D4CABC;
}
html.aud-elders body.demo-page .brand-name { color: #1E140C; }
html.aud-elders body.demo-page .brand-tag,
html.aud-elders body.demo-page .step-counter,
html.aud-elders body.demo-page .panel-eyebrow { color: #6B5240; }
html.aud-elders body.demo-page .panel-title { color: #1E140C; }
html.aud-elders body.demo-page .panel-body { color: #6B5240; }
html.aud-elders body.demo-page .step-dots .dot { background: #D4CABC; }
html.aud-elders body.demo-page .step-dots .dot.active { background: #B45309; box-shadow: 0 0 0 4px rgba(180,83,9,.15); }
html.aud-elders body.demo-page .step-dots .dot.done { background: #5C8A5A; }
html.aud-elders body.demo-page .progress-bar { background: #D4CABC; }
html.aud-elders body.demo-page .progress-bar > .fill { background: #B45309; }
html.aud-elders body.demo-page .btn-nav { color: #6B5240; border-color: #D4CABC; }
html.aud-elders body.demo-page .btn-nav.primary { background: #B45309; color: #FDFAF4; border-color: #B45309; }
html.aud-elders body.demo-page .btn-nav.primary:hover { background: #92400E; }
html.aud-elders body.demo-page .btn-nav:hover { border-color: #B45309; color: #B45309; }
html.aud-elders body.demo-page .daoist-tooltip { background: #FDFAF4; border-color: #B45309; color: #6B5240; }
html.aud-elders body.demo-page .daoist-tooltip .extra { color: #A08870; border-top-color: #D4CABC; }
html.aud-elders body.demo-page .stage::before {
  background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(180,83,9,.06), transparent 60%);
}

/* Audience toggle in demo top bar — make it visually consistent with RS */
.demo-page .pill-toggle.audience-toggle button {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}