/* ═══════════════════════════════════════════════════════════════════
   CONTROL-CENTER DEMO — one continuous, cursor-driven auto-tour.
   Mirrors the real app: Lighthouse (create project → 7 platforms →
   analysis → report) → Rival Radar (open → analysis → report) →
   Campaign Studio (segments → build → ideas drop → enlarge → refine).

   Engine is setTimeout-based (rAF is unreliable in some embeds). Every
   view is fully visible at rest; the arm→release transform is pure
   enhancement, never opacity (a stalled compositor must never hide
   real content). Hover pauses. Loops.

   Namespaced dm- to avoid clashing with the sim/cc styles.
   ═══════════════════════════════════════════════════════════════════ */
.dm-sec{padding:var(--s5) 0;position:relative}
.dm-head{text-align:center;max-width:62ch;margin:0 auto var(--s4)}
.dm-head h2{margin:var(--s2) 0 14px}
.dm-win{max-width:1180px;margin:0 auto;position:relative;border-radius:18px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg)}

/* window chrome */
.dm-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.dm-bar .tl{display:flex;gap:7px}
.dm-bar .tl i{width:11px;height:11px;border-radius:50%;display:block}
.dm-bar .ttl{font-family:var(--mono);font-size:12.5px;color:var(--ink-70);letter-spacing:-.01em}
.dm-bar .live{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--accent);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);padding:3px 9px;border-radius:99px}
.dm-bar .ver{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-45)}
.dm-bar .dot{width:20px;height:20px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-2))}

.dm-body{display:grid;grid-template-columns:214px 1fr;position:relative;min-height:560px}

/* left rail */
.dm-rail{border-right:1px solid var(--line);padding:16px 12px;background:var(--bg-2)}
.dm-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--bg);
  border:1px solid var(--line);font-size:13px;color:var(--ink-45);margin-bottom:18px}
.dm-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);padding:0 8px;margin-bottom:9px}
.dm-mods{display:grid;gap:3px}
.dm-mod{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;width:100%;background:transparent;
  border:0;text-align:left;font-size:14px;color:var(--ink-70);transition:background .3s var(--ease),color .3s}
.dm-mod .ic{width:18px;height:18px;border-radius:5px;background:var(--line);flex:none;display:grid;place-items:center;
  font-size:9px;color:var(--ink-45);transition:background .3s,color .3s}
.dm-mod .ct{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-45)}
.dm-mod.on{background:var(--accent);color:#fff}
.dm-mod.on .ic{background:rgba(255,255,255,.24);color:#fff}
.dm-mod.on .ct{color:rgba(255,255,255,.8)}

/* stage */
.dm-stage{padding:22px 26px;position:relative;overflow:hidden}
.dm-view{display:none}
.dm-view.on{display:block}
/* Each view is a <section>, so the page-level `section{padding:var(--s5) 0}` rhythm
   was leaking inside the window — 224px of dead space per view on desktop, 128px on
   mobile. That is what forced the oversized box. .dm-stage supplies the real padding. */
.dm-stage .dm-view{padding:0}
.dm-view.on > *{transform:none;transition:transform .5s var(--ease)}
.dm-stage.arm .dm-view.on > *{transform:translateY(14px);transition:none}
.dm-view.on > *:nth-child(1){transition-delay:.04s}.dm-view.on > *:nth-child(2){transition-delay:.10s}
.dm-view.on > *:nth-child(3){transition-delay:.16s}.dm-view.on > *:nth-child(4){transition-delay:.22s}
.dm-view.on > *:nth-child(5){transition-delay:.28s}

.dm-title{font-size:24px;font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.03em;line-height:1.1}
.dm-sub{font-size:14px;color:var(--ink-45);margin-top:3px;margin-bottom:18px}
.dm-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}

/* generic bits reused across views */
.dm-btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;border:0;border-radius:9px;
  padding:9px 15px;font-size:13px;font-variation-settings:"wght" 600}
.dm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:13px}
.dm-kpi{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:var(--bg)}
.dm-kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.dm-kpi .v{font-size:22px;font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.035em;margin-top:5px}
.dm-kpi .d{font-family:var(--mono);font-size:9.5px;color:var(--good);margin-top:3px}
.dm-kpi.hl{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.dm-kpi.hl .v{color:var(--accent)}

/* projects table */
.dm-tbl{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg)}
.dm-tbl .hd,.dm-tr{display:grid;grid-template-columns:1.5fr 1fr .6fr .8fr;gap:10px;padding:11px 14px;align-items:center}
.dm-tbl .hd{background:var(--bg-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-45)}
.dm-tr{border-bottom:1px solid var(--line);font-size:13px;cursor:pointer;transition:background .2s}
.dm-tr:last-child{border-bottom:0}
.dm-tr.hot{background:var(--accent-soft)}
.dm-tr .nm{font-variation-settings:"wght" 600}
.dm-tr .term{font-family:var(--mono);font-size:9px;color:var(--accent);background:var(--accent-soft);padding:2px 6px;border-radius:4px;display:inline-block}
.dm-tr .pill{font-family:var(--mono);font-size:9px;padding:2px 7px;border-radius:99px}
.dm-tr .pill.ok{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.dm-list-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}

/* create-project panel */
.dm-create{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:18px 20px}
.dm-field{margin-bottom:16px}
.dm-field label{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);display:block;margin-bottom:6px}
.dm-input{border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;font-size:14px;color:var(--ink);background:var(--card);min-height:42px;display:flex;align-items:center}
.dm-input .car{width:1.5px;height:16px;background:var(--accent);margin-left:1px;animation:dmCar 1s step-end infinite}
@keyframes dmCar{50%{opacity:0}}
.dm-plats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dm-chip{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--card);font-size:12.5px;color:var(--ink-70);transition:border-color .25s,background .25s,color .25s}
.dm-chip i{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:8px;color:#fff;font-family:var(--mono);font-weight:600;flex:none}
.dm-chip .ck{margin-left:auto;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:9px;color:transparent;transition:background .25s,border-color .25s,color .25s}
.dm-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.dm-chip.on .ck{background:var(--accent);border-color:var(--accent);color:#fff}
.dm-create-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.dm-create-foot .cnt{font-family:var(--mono);font-size:11px;color:var(--ink-45)}

/* conversation stream chart */
.dm-chart{border:1px solid var(--line);border-radius:11px;padding:15px;background:var(--bg);margin-bottom:13px}
.dm-chart .ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.dm-chart .ch b{font-size:14px;font-variation-settings:"wght" 650;letter-spacing:-.02em}
.dm-chart .ch span{font-family:var(--mono);font-size:10px;color:var(--ink-45)}
.dm-chart svg{width:100%;height:120px;display:block}
.dm-draw{transition:stroke-dashoffset 1.2s var(--ease)}
.dm-stage.arm .dm-draw{stroke-dashoffset:1;transition:none}
.dm-fill{transform:scaleY(1);transform-origin:bottom;transition:transform 1s var(--ease)}
.dm-stage.arm .dm-fill{transform:scaleY(0);transition:none}

/* topic / scoreboard rows */
.dm-rows{display:grid;gap:8px}
.dm-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.dm-row .t{font-size:14px;font-variation-settings:"wght" 600;letter-spacing:-.015em}
.dm-row .s{font-size:12px;color:var(--ink-45);margin-top:2px}
.dm-row .bar{width:120px;height:7px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.dm-row .bar i{display:block;height:100%;border-radius:99px;background:var(--accent);width:var(--w);
  transform-origin:left;transform:scaleX(1);transition:transform .8s var(--ease)}
.dm-stage.arm .dm-row .bar i{transform:scaleX(0);transition:none}
.dm-row.hl{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft)}

/* win/lose/gain + scoreboard */
.dm-wlg{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.dm-wlg .c{border:1px solid var(--line);border-radius:11px;padding:13px;background:var(--bg)}
.dm-wlg .c .h{font-size:10px;font-variation-settings:"wght" 700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.dm-wlg .win .h{color:var(--good)}.dm-wlg .lose .h{color:#d2564f}.dm-wlg .gain .h{color:var(--accent)}
.dm-wlg .c p{font-size:11.5px;color:var(--ink-70);line-height:1.45}
.dm-sc{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.dm-sc .c{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--bg)}
.dm-sc .c .k{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.dm-sc .c .v{font-size:16px;font-variation-settings:"wght" 700;letter-spacing:-.03em;margin-top:4px}
.dm-sc .c .b{font-family:var(--mono);font-size:8px;padding:1.5px 5px;border-radius:4px;display:inline-block;margin-top:4px}
.dm-sc .c .b.lead{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.dm-sc .c .b.you{background:var(--accent-soft);color:var(--accent)}

/* strategic report slide */
.dm-report{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.dm-slide{padding:20px 22px;border-bottom:1px solid var(--line)}
.dm-slide:last-child{border-bottom:0}
.dm-slide .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.dm-slide h4{font-size:19px;font-variation-settings:"wght" 700;letter-spacing:-.025em;line-height:1.2;margin-bottom:8px}
.dm-slide p{font-size:13.5px;color:var(--ink-70);line-height:1.55}
.dm-slide.verdict{background:var(--accent-soft)}
.dm-scrollport{max-height:378px;overflow:hidden;position:relative}
.dm-scrollport .inner{transition:transform 1.4s var(--ease)}

/* segments */
.dm-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dm-seg{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg);position:relative}
.dm-seg .pc{position:absolute;right:11px;top:11px;font-size:13px;font-variation-settings:"wght" 700;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:6px}
.dm-seg .nm{font-size:14px;font-variation-settings:"wght" 650;letter-spacing:-.02em;padding-right:48px}
.dm-seg .mt{font-size:10px;color:var(--ink-45);margin-top:2px}
.dm-seg .ds{font-size:11.5px;color:var(--ink-70);line-height:1.45;margin-top:9px;margin-bottom:12px}
.dm-seg .go{width:100%;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px;font-size:11.5px;font-variation-settings:"wght" 600}
.dm-seg.hot{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* ideas dropping in */
.dm-build-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dm-build-hd .sp{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:dmSpin .8s linear infinite}
@keyframes dmSpin{to{transform:rotate(360deg)}}
.dm-build-hd .t{font-size:14px;font-variation-settings:"wght" 600}
.dm-ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.dm-idea{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);cursor:pointer;
  transform:none;opacity:1;transition:transform .5s var(--ease),box-shadow .25s,border-color .25s}
.dm-idea.drop{transform:translateY(16px)}
.dm-idea:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:var(--shadow)}
.dm-idea .ih{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line)}
.dm-idea .ih b{font-family:var(--mono);font-size:8.5px;color:var(--accent);background:var(--accent-soft);padding:2px 5px;border-radius:4px;letter-spacing:.04em}
.dm-idea .ih span{margin-left:auto;font-size:9px;color:var(--ink-45)}
.dm-idea .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1a1622}
.dm-idea .im img{width:100%;height:100%;object-fit:cover;display:block}
.dm-idea .im .ov{position:absolute;inset:0}
.dm-idea .im .ov.play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92)}
.dm-idea .im .ov.play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #2a2440}
.dm-idea .im .ov.dots::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:5px;background:radial-gradient(circle,#fff 1.6px,transparent 1.8px) center/10px 10px}
.dm-idea .cp{padding:8px 10px;font-size:11px;color:var(--ink);line-height:1.35}

/* enlarged asset + refine chat (the finale) */
.dm-enlarge{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dm-preview{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.dm-preview .ph{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.dm-preview .ph b{font-family:var(--mono);font-size:9px;color:var(--accent);background:var(--accent-soft);padding:2px 6px;border-radius:4px;letter-spacing:.04em}
.dm-preview .ph span{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--ink-45)}
.dm-preview .big{position:relative;aspect-ratio:4/3;background:#1a1622;overflow:hidden}
.dm-preview .big img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.dm-preview .cap{padding:11px 13px;font-size:13px;color:var(--ink);line-height:1.4;border-top:1px solid var(--line)}
.dm-refine{border:1px solid var(--line);border-radius:12px;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;min-height:280px}
.dm-refine .rh{display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.dm-refine .rh i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* height:0 + flex:1 means the log fills the panel but contributes nothing to its
   intrinsic height, so appending bubbles can never grow the demo window. */
.dm-refine .log{padding:13px;display:flex;flex-direction:column;gap:8px;flex:1 1 0;
  justify-content:flex-end;height:0;min-height:0;overflow:hidden}
.dm-msg{max-width:88%;padding:8px 11px;border-radius:11px;font-size:12px;line-height:1.42;transform:translateY(6px);transition:transform .3s var(--ease)}
.dm-msg.ai{background:var(--card);border:1px solid var(--line);color:var(--ink-70);align-self:flex-start;border-bottom-left-radius:3px}
.dm-msg.you{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.dm-msg.in{transform:none}
.dm-typing{align-self:flex-start;display:inline-flex;gap:3px;padding:9px 11px;background:var(--card);border:1px solid var(--line);border-radius:11px}
.dm-typing i{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.4;animation:dmTy 1.1s infinite}
.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
@keyframes dmTy{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* the cursor */
.dm-cursor{position:absolute;width:22px;height:22px;z-index:30;pointer-events:none;left:0;top:0;
  transition:transform 1.05s cubic-bezier(.42,0,.18,1);will-change:transform}
.dm-cursor svg{filter:drop-shadow(0 3px 7px rgba(20,18,28,.42))}
.dm-cursor .rg{position:absolute;left:-11px;top:-11px;width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);opacity:0;transform:scale(.3)}
.dm-cursor.click .rg{animation:dmRip .6s var(--ease) forwards}
@keyframes dmRip{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1.3)}}
.dm-cursor.click svg{animation:dmPr .22s var(--ease)}
@keyframes dmPr{50%{transform:scale(.84)}}

/* progress hud */
.dm-hud{position:absolute;right:15px;bottom:13px;z-index:31;display:flex;align-items:center;gap:9px;padding:7px 13px;
  border-radius:99px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--shadow);font-family:var(--mono);font-size:10px;color:var(--ink-45)}
.dm-hud .bars{display:flex;gap:4px}
.dm-hud .bars i{width:14px;height:3px;border-radius:99px;background:var(--line-2);display:block}
.dm-hud .bars i.on{background:var(--accent)}

@media(max-width:1000px){.dm-body{grid-template-columns:1fr}.dm-rail{display:none}.dm-cursor,.dm-hud{display:none}
  .dm-enlarge{grid-template-columns:1fr}.dm-kpis{grid-template-columns:repeat(2,1fr)}.dm-plats{grid-template-columns:repeat(2,1fr)}
  .dm-sc{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.dm-ideas,.dm-segs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dm-cursor,.dm-hud{display:none}
  .dm-stage.arm .dm-view.on > *,.dm-stage.arm .dm-draw,.dm-stage.arm .dm-fill,.dm-stage.arm .dm-row .bar i{transform:none;stroke-dashoffset:0}}

/* ── LH analysis: praise & pain drivers ────────────────────────────── */
.dm-drivers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dm-drv{border:1px solid var(--line);border-radius:11px;background:var(--bg);overflow:hidden}
.dm-drv .h{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.dm-drv.praise .h{color:var(--good)}.dm-drv.pain .h{color:#d2564f}
.dm-drv .r{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);font-size:12px}
.dm-drv .r:last-child{border-bottom:0}
.dm-drv .r .q{color:var(--ink);letter-spacing:-.01em}
.dm-drv .r .m{font-family:var(--mono);font-size:10px;color:var(--ink-45);flex:none;margin-left:10px}
.dm-drv .r .m b{color:var(--good)}
.dm-drv.pain .r .m b{color:#d2564f}

/* ── RR analysis: topic-ownership heatmap ─────────────────────────── */
.dm-heat{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg);margin-bottom:12px}
.dm-heat .hrow{display:grid;grid-template-columns:132px repeat(6,1fr);gap:0;align-items:stretch}
.dm-heat .hh{padding:9px 6px;text-align:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-45);border-bottom:1px solid var(--line)}
.dm-heat .hh.rl{text-align:left;padding-left:12px}
.dm-heat .rl{display:flex;align-items:center;gap:7px;padding:0 12px;font-size:11.5px;color:var(--ink);border-right:1px solid var(--line)}
.dm-heat .rl i{width:6px;height:6px;border-radius:50%;flex:none}
.dm-heat .cell{padding:11px 0;text-align:center;font-size:11px;font-variation-settings:"wght" 600;color:#fff;position:relative}
.dm-heat .cell.lead::after{content:"★";position:absolute;top:2px;right:4px;font-size:7px;color:#fff}
.dm-heat .body .hrow{border-bottom:1px solid var(--line)}
.dm-heat .body .hrow:last-child{border-bottom:0}
.dm-heat-note{font-size:11px;color:var(--ink-45);padding:9px 12px;background:var(--bg-2)}
.dm-lead-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}

/* ── CS wall dashboard ─────────────────────────────────────────────── */
.dm-wall-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dm-wall-hd .meta{font-size:12px;color:var(--ink-45)}
.dm-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dm-wcard{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg)}
.dm-wcard .im{position:relative;aspect-ratio:1;overflow:hidden;background:#1a1622}
.dm-wcard .im img{width:100%;height:100%;object-fit:cover}
.dm-wcard .b{font-family:var(--mono);font-size:7.5px;color:#fff;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:4px;position:absolute;left:6px;bottom:6px;letter-spacing:.04em}
.dm-wnew{border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:11px;background:var(--accent-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-height:110px;transition:background .2s}
.dm-wnew .plus{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px}
.dm-wnew span{font-size:12px;font-variation-settings:"wght" 600;color:var(--accent)}

.dm-view-foot{display:flex;justify-content:flex-end;margin-top:14px}

/* ── CS format picker ──────────────────────────────────────────────── */
.dm-formats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dm-fmt{border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--bg);cursor:pointer;
  transition:border-color .25s,box-shadow .25s,transform .2s var(--ease)}
.dm-fmt:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:var(--shadow)}
.dm-fmt.hot{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.dm-fmt .ic{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:17px;margin-bottom:10px}
.dm-fmt .nm{font-size:13.5px;font-variation-settings:"wght" 650;letter-spacing:-.02em}
.dm-fmt .ds{font-size:11px;color:var(--ink-45);margin-top:3px;line-height:1.4}

/* ═══════════════════════════════════════════════════════════════════
   HERO SLIDER — auto-advancing slides w/ animated data overlays
   (numbers count in, charts draw, AI chat types). Sample images as bg.
   ═══════════════════════════════════════════════════════════════════ */
.hero-slider{position:relative;width:100%}
.hs-stage{position:relative;border-radius:20px;aspect-ratio:4/3.7;isolation:isolate;
  filter:drop-shadow(0 34px 70px rgba(30,16,70,.28))}
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.hs-slide.on{opacity:1;pointer-events:auto}
.hs-slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
.hs-slide::after{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(120deg,rgba(20,10,45,.28),rgba(20,10,45,0) 45%)}
/* floating overlay cards */
.hs-ov{position:absolute;z-index:2;background:var(--card);border:1px solid var(--line);
  border-radius:15px;box-shadow:0 18px 44px -18px rgba(30,16,70,.5);color:var(--ink);
  transform:translateY(14px) scale(.96);opacity:0;transition:transform .55s var(--ease),opacity .5s}
.hs-slide.on .hs-ov{transform:none;opacity:1}
.hs-slide.on .hs-ov:nth-of-type(2){transition-delay:.12s}
.hs-slide.on .hs-ov:nth-of-type(3){transition-delay:.24s}
.hs-ov .hh{display:flex;align-items:center;gap:8px;font-size:13.5px;font-variation-settings:"wght" 680;letter-spacing:-.01em}
.hs-ov .hh .g{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;font-size:10px;color:#fff;background:var(--accent);flex:none}
.hs-num{font-family:var(--mono);font-variation-settings:"wght" 600;font-variant-numeric:tabular-nums}
.hs-donut{position:relative;width:118px;height:118px;margin:0 auto}
.hs-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.hs-donut .ring{fill:none;stroke:var(--bg-3);stroke-width:11}
.hs-donut .val{fill:none;stroke-width:11;stroke-linecap:round}
.hs-donut .mid{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-variation-settings:"wght" 700;letter-spacing:-.03em}

/* — slide 1 · Social Lighthouse: net sentiment + whitespace + drivers — */
.hs-net{left:-6%;top:13%;width:54%;max-width:252px;padding:14px 16px}
.hs-net .big{font-size:36px;font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.hs-net .sub{font-size:11px;color:var(--ink-45);margin-top:3px}
.hs-net svg{width:100%;height:38px;display:block;margin-top:8px}
.hs-net .area{fill:url(#hsArea);opacity:0;transition:opacity .8s var(--ease) .35s}
.hs-slide.on .hs-net .area{opacity:1}
.hs-net .ln{fill:none;stroke:#6d4fe0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease)}
.hs-slide.on .hs-net .ln{stroke-dashoffset:0}
.hs-white{left:5%;bottom:6%;width:60%;max-width:286px;padding:13px 15px}
.hs-white .hh{margin-bottom:8px}
.hs-white .row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;padding:7px 0;border-top:1px solid var(--line)}
.hs-white .row .nm{color:var(--ink-70);letter-spacing:-.01em}
.hs-white .row .chip{font-family:var(--mono);font-size:8px;letter-spacing:.05em;padding:2px 7px;border-radius:99px;flex:none}
.hs-white .row .chip.own{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.hs-white .row .chip.open{background:var(--accent);color:#fff;animation:hsPulse 1.9s var(--ease) infinite}
@keyframes hsPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 6px transparent}}
.hs-drv{right:-4%;top:29%;width:52%;max-width:242px;padding:13px 15px}
.hs-drv .d{margin-top:11px}
.hs-drv .d .r{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-70);margin-bottom:5px}
.hs-drv .d .track{height:7px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.hs-drv .d .track i{display:block;height:100%;border-radius:99px;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.hs-slide.on .hs-drv .d .track i{transform:scaleX(var(--w))}
.hs-drv .praise .track i{background:var(--good)}
.hs-drv .pain .track i{background:#d2564f}
.hs-drv .praise b{color:var(--good)}.hs-drv .pain b{color:#d2564f}

/* — slide 2 · Rival Radar: topic-ownership heatmap + share of voice + leadership — */
.hs-heat{left:-6%;top:15%;width:64%;max-width:300px;padding:13px 14px}
.hs-heat .hh{margin-bottom:10px}
.hs-heat .grid{display:grid;grid-template-columns:56px repeat(4,1fr);gap:3px;align-items:center}
.hs-heat .hd{font-family:var(--mono);font-size:7px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-45);text-align:center}
.hs-heat .rl{font-size:9px;color:var(--ink-70);letter-spacing:-.01em}
.hs-heat .c{aspect-ratio:1.6;border-radius:4px;position:relative;transform:scale(.5);opacity:0}
.hs-slide.on .hs-heat .c{transform:none;opacity:1;transition:transform .4s var(--ease),opacity .4s}
.hs-heat .c.lead::after{content:"★";position:absolute;top:1px;right:2px;font-size:6px;color:#fff}
.hs-slide.on .hs-heat .c:nth-child(5n+3){transition-delay:.06s}
.hs-slide.on .hs-heat .c:nth-child(5n+4){transition-delay:.13s}
.hs-slide.on .hs-heat .c:nth-child(5n){transition-delay:.2s}
.hs-ring{right:1%;top:15%;width:44%;max-width:198px;padding:14px;text-align:center}
.hs-ring .t{font-size:12.5px;font-variation-settings:"wght" 680;margin-bottom:8px}
.hs-ring .hs-donut{width:100px;height:100px}
.hs-ring .hs-donut .val{stroke:var(--accent);stroke-dasharray:326;stroke-dashoffset:326;transition:stroke-dashoffset 1.1s var(--ease)}
.hs-slide.on .hs-ring .hs-donut .val{stroke-dashoffset:255}
.hs-ring .rank{font-size:11px;color:var(--ink-45);margin-top:8px}
.hs-lead{right:4%;bottom:9%;width:52%;max-width:226px;padding:14px 15px}
.hs-lead .big{font-size:32px;font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.04em;line-height:1}
.hs-lead .big small{font-size:15px;color:var(--ink-45)}
.hs-lead .t{font-size:12px;color:var(--ink-70);margin-top:3px}
.hs-lead .chips{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.hs-lead .chips span{font-size:8px;font-family:var(--mono);padding:3px 7px;border-radius:99px;background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}

/* — slide 3 · Campaign Studio: concept + REAL instagram post + refine chat — */
.hs-concept{left:-5%;top:12%;width:55%;max-width:262px;padding:14px 15px}
.hs-concept .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.hs-concept .q{font-size:17px;font-variation-settings:"wght" 700;letter-spacing:-.02em;line-height:1.15}
.hs-concept .seg{font-size:11px;color:var(--ink-45);margin-top:8px}
.hs-post{right:-4%;top:8%;width:56%;max-width:238px;padding:0;overflow:hidden;border-radius:16px}
.hs-post .ph{display:flex;align-items:center;gap:8px;padding:9px 10px}
.hs-post .ph .av{width:27px;height:27px;border-radius:50%;background:conic-gradient(from 210deg,#F58529,#DD2A7B,#8134AF,#F58529);padding:2px;flex:none}
.hs-post .ph .av i{display:block;width:100%;height:100%;border-radius:50%;background:var(--card);
  background-clip:content-box;border:2px solid transparent}
.hs-post .ph .nm{font-size:11.5px;font-variation-settings:"wght" 650;line-height:1.15}
.hs-post .ph .nm small{display:block;font-size:8.5px;color:var(--ink-45);font-variation-settings:"wght" 400}
.hs-post .ph .dots{margin-left:auto;color:var(--ink-45);font-size:16px;letter-spacing:1px;line-height:.5}
.hs-post .im{aspect-ratio:1;position:relative;background:#1a1622}
.hs-post .im img{width:100%;height:100%;object-fit:cover;display:block}
.hs-post .acts{display:flex;align-items:center;gap:13px;padding:9px 11px 5px}
.hs-post .acts svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.hs-post .acts .bm{margin-left:auto}
.hs-slide.on .hs-post .acts .like svg{animation:hsHeart .55s 1.1s both}
@keyframes hsHeart{0%{fill:none;stroke:var(--ink);transform:scale(1)}45%{transform:scale(1.4)}60%,100%{fill:#ED4956;stroke:#ED4956;transform:scale(1)}}
.hs-post .likes{padding:1px 11px;font-size:12px;font-variation-settings:"wght" 650}
.hs-post .cap{padding:3px 11px 12px;font-size:11.5px;color:var(--ink-70);line-height:1.42}
.hs-post .cap b{color:var(--ink);font-variation-settings:"wght" 650}
.hs-refine{left:4%;bottom:8%;width:66%;max-width:302px;padding:12px 13px}
.hs-refine .rh{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.hs-refine .rh i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hs-refine .msg{font-size:12px;padding:8px 11px;border-radius:11px;max-width:88%;line-height:1.4}
.hs-refine .msg.you{background:var(--accent);color:#fff;margin-left:auto;border-bottom-right-radius:3px;margin-bottom:6px}
.hs-refine .msg.ai{background:var(--bg-2);color:var(--ink-70);border:1px solid var(--line);border-bottom-left-radius:3px}
.hs-refine .msg.ai .car{display:inline-block;width:1.5px;height:13px;background:var(--accent);vertical-align:-2px;animation:dmCar 1s step-end infinite}

/* nav steps + play/pause */
.hs-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.hs-step{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;cursor:pointer;padding:6px 11px;border-radius:99px;
  font-size:12px;font-variation-settings:"wght" 600;color:var(--ink-45);transition:color .3s,background .3s}
.hs-step i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .3s,transform .3s}
.hs-step.on{color:var(--ink);background:var(--accent-soft)}
.hs-step.on i{background:var(--accent);transform:scale(1.15)}
.hs-play{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;
  color:var(--ink-45);font-size:9px;display:grid;place-items:center;cursor:pointer;margin-left:4px}
@media(max-width:900px){
  .hs-net,.hs-white,.hs-drv,.hs-heat,.hs-ring,.hs-lead,.hs-concept,.hs-post,.hs-refine{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;margin:8px}
  /* The overlay cards drop into normal flow here, but the slides stayed
     position:absolute inside a fixed 340px stage — so the stack ran straight
     out of the stage and got cut off by .hero's overflow:hidden. Stack the
     slides in one grid cell instead: they still cross-fade on top of each
     other, the stage grows to the tallest slide, and nothing is clipped. */
  .hs-stage{aspect-ratio:auto;min-height:0;display:grid;padding:6px 0}
  .hs-slide{position:relative;inset:auto;grid-area:1/1;min-width:0}
  /* full-width the square post image is ~240px taller than any other slide,
     and every slide is sized to the tallest — keep it post-sized */
  .hs-post{max-width:264px}
  .hs-nav{gap:4px}.hs-step{padding:6px 8px;font-size:11px}
}

/* ═══════════════════════════════════════════════════════════════════
   PAIN — "Marketing signal overload"
   ═══════════════════════════════════════════════════════════════════ */
#overload{padding:var(--s4) 0;border-bottom:1px solid var(--line);background:var(--bg-2)}
.ov-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.ov-l .tag{margin-bottom:16px}
.ov-l h2{font-size:clamp(28px,3.6vw,44px);line-height:1.03;letter-spacing:-.035em;
  font-variation-settings:"wght" 800,"wdth" 96;margin-bottom:18px}
.ov-l h2 .acc{color:var(--accent)}
.ov-l p{font-size:16px;line-height:1.6;color:var(--ink-70);max-width:52ch}
.ov-vis{position:relative;height:280px;border:1px solid var(--line);border-radius:16px;
  background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.ov-noise{position:absolute;inset:0;display:flex;flex-wrap:wrap;gap:7px;padding:20px;align-content:flex-start;opacity:.5}
.ov-noise span{height:8px;border-radius:99px;background:var(--line-2)}
.ov-sig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:14px;padding:16px 22px;box-shadow:var(--shadow-lg);z-index:2}
.ov-sig .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ov-sig .v{font-size:20px;font-variation-settings:"wght" 700;letter-spacing:-.02em;margin-top:5px}
.ov-sig .arrow{font-family:var(--mono);font-size:11px;color:var(--ink-45);margin-top:6px}
@media(max-width:820px){.ov-grid{grid-template-columns:1fr;gap:32px}.ov-vis{height:220px}}

/* ═══════════════════════════════════════════════════════════════════
   THE WORKSPACE — UVP pointers (left) + compact demo (right)
   ═══════════════════════════════════════════════════════════════════ */
#control.dm-sec{padding:var(--s4) 0}
.dm-layout{display:grid;grid-template-columns:minmax(255px,.72fr) minmax(0,1.62fr);
  gap:clamp(28px,3.6vw,58px);align-items:center}
.dm-side .tag{margin-bottom:13px}
.dm-side .display{font-size:clamp(28px,3vw,40px);line-height:1.04;letter-spacing:-.03em;margin-bottom:13px}
.dm-side .display .acc{color:var(--accent)}
.dm-side-lede{font-size:14.5px;color:var(--ink-70);line-height:1.5;max-width:40ch;margin-bottom:24px}
.uvp{list-style:none;display:grid;gap:0;margin:0;padding:0}
.uvp li{position:relative;padding:15px 0 15px 20px;border-top:1px solid var(--line)}
.uvp li:last-child{border-bottom:1px solid var(--line)}
.uvp li::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:2px;border-radius:2px;
  background:var(--line-2);transition:background .3s var(--ease),box-shadow .3s}
.uvp li:hover::before{background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
.uvp h4{font-size:15.5px;font-variation-settings:"wght" 680;letter-spacing:-.02em;margin:0 0 4px;
  display:flex;align-items:baseline;gap:9px}
.uvp h4 .num{font-family:var(--mono);font-size:10px;color:var(--accent);flex:none}
.uvp p{font-size:12.5px;color:var(--ink-45);line-height:1.5;margin:0}
.dm-layout .dm-win{max-width:none;margin:0}
.dm-layout .dm-stage{padding:18px 20px}
/* stable window height across all views (no long/short jump); sized to the tallest
   view so nothing is clipped, shorter ones simply have room below like a real app
   window. Was 704px, which was tuned around the leaked section padding above. */
.dm-layout .dm-body{height:560px}
/* .dm-enlarge stacks below 1000px, but .dm-layout stays two-column until 940px —
   in that 60px band the stacked preview + chat made this view ~845px. Keep it
   side by side for as long as the demo sits in the narrow right-hand column. */
@media(min-width:941px){.dm-layout .dm-enlarge{grid-template-columns:1fr 1fr}}
.dm-layout .dm-title{font-size:21px}
.dm-layout .dm-kpi{padding:8px 10px}
.dm-layout .dm-kpi .v{font-size:17px;margin-top:2px}
.dm-layout .dm-kpis{margin-bottom:9px}
.dm-layout .dm-sub{margin-bottom:10px}
.dm-layout .dm-chart{padding:10px 13px;margin-bottom:9px}
.dm-layout .dm-chart svg{height:46px}
.dm-layout .dm-chart .ch{margin-bottom:6px}
.dm-layout .dm-drivers{margin-top:9px}
.dm-layout .dm-drv .h{padding:6px 12px}
.dm-layout .dm-drv .r{padding:5px 12px}
.dm-layout .dm-view-foot{margin-top:9px}
.dm-layout .dm-heat .cell{padding:6px 0}
.dm-layout .dm-heat .hh{padding:6px 5px}
.dm-layout .dm-heat .rl{font-size:11px;padding:0 10px}
.dm-layout .dm-heat-note{padding:6px 12px}
.dm-layout .dm-lead-kpis .dm-kpi .v{font-size:19px}
.dm-layout .dm-report .dm-scrollport{max-height:322px}
/* The auto-tour cycles ten views whose natural heights span ~450–740px, so an
   auto height made the window pump on every step and dragged the page with it.
   Same trick as desktop: one fixed height, sized to the tallest view so nothing
   is clipped; shorter views simply have room below, like a real app window.
   The trims above it keep that fixed height from dominating a phone screen. */
@media(max-width:940px){
  .dm-layout{grid-template-columns:1fr;gap:30px}
  .dm-layout .dm-stage{padding:14px 15px}
  /* stacked, the 4:3 preview grows with the viewport, so the chat panel below it
     gets a shorter floor here — otherwise cs-enlarge alone drives the box ~80px taller */
  .dm-layout .dm-refine{min-height:200px}
  .dm-layout .dm-body{min-height:0;height:684px}
}
/* window chrome on a phone: the title wrapped onto four lines and pushed the
   title bar to 107px. Keep it one row — truncate the title, drop the version. */
@media(max-width:620px){
  .dm-bar{padding:10px 13px;gap:9px;flex-wrap:nowrap}
  .dm-bar .ttl{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
  .dm-bar .live{flex:none}
  .dm-bar .ver,.dm-bar .dot{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   INDUSTRIES — selectable headers, image + description swap
   ═══════════════════════════════════════════════════════════════════ */
#industries{padding:var(--s5) 0}
.ind-head{max-width:60ch;margin-bottom:var(--s3)}
.ind-head h2{margin:var(--s2) 0 12px}
.ind-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;border-bottom:1px solid var(--line);padding-bottom:2px}
.ind-tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:11px 4px;margin-bottom:-3px;
  font-size:14.5px;font-variation-settings:"wght" 600;color:var(--ink-45);cursor:pointer;
  transition:color .25s,border-color .25s;letter-spacing:-.01em}
.ind-tab:hover{color:var(--ink-70)}
.ind-tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.ind-stage{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3.5vw,52px);align-items:center;min-height:360px}
.ind-pic{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/11;background:var(--bg-3)}
.ind-pic .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ind-pic .glaze{position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 42%,transparent),transparent 55%);mix-blend-mode:multiply}
.ind-pic .badge{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:9px;
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:99px;padding:8px 14px 8px 9px;box-shadow:var(--shadow)}
.ind-pic .badge .ic{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.ind-pic .badge .ic svg{width:15px;height:15px}
.ind-pic .badge b{font-size:12.5px;font-variation-settings:"wght" 650;letter-spacing:-.01em}
.ind-copy .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.ind-copy h3{font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:-.03em;
  font-variation-settings:"wght" 750,"wdth" 96;margin-bottom:14px}
.ind-copy p{font-size:15px;line-height:1.62;color:var(--ink-70)}
.ind-copy .metrics{display:flex;gap:22px;margin-top:20px}
.ind-copy .metrics .m .v{font-size:20px;font-variation-settings:"wght" 700;letter-spacing:-.03em;color:var(--accent)}
.ind-copy .metrics .m .l{font-size:11px;color:var(--ink-45);font-family:var(--mono);letter-spacing:.03em;margin-top:2px}
/* swap animation */
.ind-pic.swap .ph{opacity:0;transform:scale(1.04)}
.ind-copy.swap{opacity:0;transform:translateY(10px)}
.ind-copy{transition:opacity .35s var(--ease),transform .35s var(--ease)}
@media(max-width:860px){
  .ind-stage{grid-template-columns:1fr;gap:26px;min-height:0}
  /* overflow-x:auto alone also forces overflow-y to auto, which gave the tab
     strip a second, vertical scrollbar on top of the horizontal one */
  .ind-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .ind-tabs::-webkit-scrollbar{display:none}
  .ind-tab{white-space:nowrap}
}

/* ═══════════════════════════════════════════════════════════════════
   COUNTDOWN — replaces the founding-seats counter at the form
   ═══════════════════════════════════════════════════════════════════ */
.wl-count .cd-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cd-cell{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center}
.cd-cell .n{font-size:26px;font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cd-cell .u{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);margin-top:6px}
.cd-foot{font-size:12.5px;color:var(--ink-45);margin-top:11px}
.cd-foot b{color:var(--ink-70)}

/* ═══════════════════════════════════════════════════════════════════
   ALTERNATING SECTION BANDS — a .band-alt renders in the OPPOSITE
   palette to the page theme, so the light/dark rhythm survives the
   global theme toggle (Sprout-style alternating sections).
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .band-alt{
  --bg:#0C0B12;--bg-2:#141220;--bg-3:#1C1930;
  --ink:#EDEBF5;--ink-70:rgba(237,235,245,.68);--ink-45:rgba(237,235,245,.44);
  --line:rgba(237,235,245,.13);--line-2:rgba(237,235,245,.22);
  --accent:#9A7BF0;--accent-2:#B79EF7;--accent-soft:rgba(154,123,240,.16);--accent-ink:#C6B2FA;
  --good:#3DDC97;--card:#151322;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 32px 70px -28px rgba(0,0,0,.75);
}
:root[data-theme="dark"] .band-alt{
  --bg:#FFFFFF;--bg-2:#F7F6FB;--bg-3:#EFEDF7;
  --ink:#14121C;--ink-70:rgba(20,18,28,.68);--ink-45:rgba(20,18,28,.46);
  --line:rgba(20,18,28,.10);--line-2:rgba(20,18,28,.16);
  --accent:#6D4FE0;--accent-2:#8B6DF0;--accent-soft:#EFEAFD;--accent-ink:#4B32B0;
  --good:#1D8A60;--card:#FFFFFF;
  --shadow:0 1px 2px rgba(20,18,28,.05),0 12px 32px -14px rgba(70,45,170,.24);
  --shadow-lg:0 2px 6px rgba(20,18,28,.05),0 32px 70px -28px rgba(70,45,170,.36);
}
.band-alt{background:var(--bg);color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   JOURNEY CONNECTING LINE — a dimmed rail with a node per step; a
   purple fill travels down with the user's scroll, lighting each node.
   ═══════════════════════════════════════════════════════════════════ */
.pr-track{position:relative;padding-left:48px}
.pr-rail{position:absolute;left:15px;top:26px;bottom:26px;width:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.pr-rail-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(var(--accent),var(--accent-2))}
.pr-step{position:relative}
.pr-node{position:absolute;left:-40px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line-2);z-index:2;
  transition:border-color .35s var(--ease),background .35s,box-shadow .35s}
.pr-node.on{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}
@media(max-width:820px){.pr-track{padding-left:34px}.pr-rail{left:9px}.pr-node{left:-32px;width:14px;height:14px}}