/* Fourseat · product demo (light mode only) */

/* ── Player chrome ─────────────────────────────────────────────── */
.demo-player{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(139,92,50,.28);
  box-shadow:0 28px 80px rgba(86,57,28,.14);
  background:linear-gradient(165deg, rgba(248,244,237,.98), rgba(235,226,210,.94));
}

.demo-toolbar{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 1rem;
  background:#ece4d6;
  border-bottom:1px solid var(--line);
}
.demo-dots{display:flex;gap:.4rem}
.demo-dots span{width:10px;height:10px;border-radius:50%}
.demo-dots span:nth-child(1){background:#e87c7c}
.demo-dots span:nth-child(2){background:#e8d27c}
.demo-dots span:nth-child(3){background:#7ccea8}
.demo-url{
  flex:1;text-align:center;
  font-family:var(--font-mono);font-size:.72rem;
  color:var(--dim);
  background:rgba(255,255,255,.55);
  border-radius:8px;padding:.35rem .75rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-time{
  font-family:var(--font-mono);font-size:.72rem;color:var(--muted);
  min-width:4.5rem;text-align:right;
}

.demo-stage-wrap{
  position:relative;
  aspect-ratio:16/9;
  min-height:320px;
  background:linear-gradient(180deg,#f3ecdf,#ebe2d2);
  overflow:hidden;
  isolation:isolate;
  color:var(--fg);
}

.demo-scene{
  position:absolute;inset:0;
  padding:1.4rem 1.6rem;
  opacity:0;visibility:hidden;
  pointer-events:none;
  overflow:auto;
  transition:opacity .45s ease, visibility .45s;
  display:none;
}
.demo-scene.active{
  opacity:1;visibility:visible;
  pointer-events:auto;
  display:block;
}

/* Tech scenes: warm light panel, not a dark inset */
.demo-stage-wrap.demo-stage--tech,
.demo-scene--tech{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(207,145,82,.1), transparent 55%),
    radial-gradient(700px 380px at 90% 100%, rgba(95,133,102,.08), transparent 50%),
    linear-gradient(160deg, #faf6ee 0%, #f3ecdf 48%, #ebe2d2 100%);
  color:var(--fg);
}

.dm-actions{margin-top:1rem}
.dm-live{display:inline-flex;align-items:center;gap:.45rem;color:#5f8566 !important}
.dm-pulse-dot{
  width:7px;height:7px;border-radius:50%;background:#5f8566;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(95,133,102,.55);
  animation:dmPulse 1.8s ease-out infinite;
}
@keyframes dmPulse{
  0%{box-shadow:0 0 0 0 rgba(95,133,102,.55)}
  70%{box-shadow:0 0 0 8px rgba(95,133,102,0)}
  100%{box-shadow:0 0 0 0 rgba(95,133,102,0)}
}

.dm-agent-layout{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:.85rem;height:calc(100% - 2.2rem);min-height:0;
}
.dm-agent-roster{display:flex;flex-direction:column;gap:.45rem}
.dm-agent{
  padding:.55rem .65rem;border-radius:10px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  transition:border-color .3s,box-shadow .3s;
}
.dm-agent.running{border-color:rgba(168,100,56,.45);box-shadow:0 0 16px rgba(207,145,82,.12)}
.dm-agent.done{border-color:rgba(95,133,102,.45)}
.dm-agent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem}
.dm-agent-name{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--fg)}
.dm-agent-status{
  font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dim);
}
.dm-agent.running .dm-agent-status{color:#a86438}
.dm-agent.done .dm-agent-status{color:#5f8566}
.dm-agent-task{font-size:.62rem;color:var(--muted);margin-bottom:.35rem;line-height:1.35}
.dm-agent-bar{height:3px;border-radius:999px;background:rgba(42,34,24,.1);overflow:hidden}
.dm-agent-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#cf9152,#e0a876);transition:width 1.1s cubic-bezier(.4,0,.2,1)}

.dm-activity-wrap{
  display:flex;flex-direction:column;min-height:0;
  border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.92);overflow:hidden;
}
.dm-activity-head{
  padding:.45rem .7rem;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft,#5c4f3a);
  border-bottom:1px solid var(--line);background:#ece4d6;
}
.dm-activity{
  flex:1;min-height:140px;max-height:180px;overflow:auto;
  list-style:none;margin:0;padding:.55rem .65rem;
  display:flex;flex-direction:column;gap:.45rem;
  background:#faf6ee;
}
.dm-activity-item{
  display:flex;align-items:flex-start;gap:.5rem;
  font-size:.72rem;line-height:1.45;color:var(--fg);
  animation:dmActivityIn .28s ease-out;
}
.dm-activity-check{
  flex-shrink:0;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;color:#5f8566;
  background:rgba(95,133,102,.14);margin-top:.05rem;
}
@keyframes dmActivityIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.dm-scan-bar{
  display:flex;align-items:center;gap:.5rem;
  font-size:.68rem;color:var(--muted);
  padding:.45rem .65rem;border-radius:8px;margin-bottom:.75rem;
  background:rgba(255,255,255,.75);border:1px solid var(--line);
  opacity:.55;transition:opacity .4s,border-color .4s;
}
.dm-scan-bar.active{opacity:1;border-color:rgba(168,100,56,.35)}

.dm-alert-card{cursor:pointer;margin-top:.35rem}
.dm-alert-copy{font-size:.74rem;line-height:1.45;color:var(--fg)}
.dm-debate-actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;
  margin-bottom:.85rem;
}
.dm-debate-feed{margin-top:.25rem}
.dm-debate-msg.typing .dm-bub{box-shadow:0 0 0 1px rgba(207,145,82,.35)}
.dm-ship-lead{font-size:.78rem;line-height:1.45;margin:.35rem 0 .85rem;color:var(--muted)}
.dm-export-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:1rem;align-items:center;margin-top:.75rem;
}
.dm-export-meta{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.dm-export-meta li{
  font-size:.68rem;line-height:1.4;color:var(--muted);
  padding-left:.75rem;border-left:2px solid rgba(168,100,56,.35);
}
.dm-export-meta span{display:block;font-family:var(--font-mono);font-size:.58rem;color:#a86438;margin-bottom:.1rem}

/* ── Shared mock UI ────────────────────────────────────────────── */
.dm-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;gap:.75rem;
}
.dm-brand{
  font-family:var(--font-serif);font-size:1rem;color:#9c5c2a;
  letter-spacing:.02em;
}
.dm-workspace{
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);
}
.dm-grid{display:grid;gap:.75rem}
.dm-grid-2{grid-template-columns:1fr 1fr}
.dm-card{
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem;
}
.dm-label{
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.35rem;
}
.dm-value{
  font-family:var(--font-serif);font-size:1.35rem;color:var(--fg);line-height:1;
}
.dm-delta{font-size:.72rem;color:#5f8566;margin-top:.2rem}
.dm-delta.bad{color:#b8452e}

.dm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:.45rem .85rem;border-radius:8px;
  border:1px solid var(--line);
  background:#fff;color:var(--fg);
  transition:background .2s,transform .15s,box-shadow .2s;
}
.dm-btn.primary{background:#9c5c2a;border-color:#9c5c2a;color:#fff}
.dm-btn.lit{
  background:rgba(156,92,42,.18);
  border-color:#cf9152;
  box-shadow:0 0 0 3px rgba(207,145,82,.22);
}

.dm-connector{
  display:flex;align-items:center;gap:.65rem;
  padding:.65rem .8rem;border-radius:10px;
  background:rgba(255,255,255,.55);border:1px solid var(--line);
  margin-bottom:.5rem;
}
.dm-dot{width:8px;height:8px;border-radius:50%;background:#9a8868;flex-shrink:0}
.dm-dot.on{background:#5f8566;box-shadow:0 0 0 3px rgba(95,133,102,.2)}
.dm-conn-name{font-size:.82rem;font-weight:500;color:var(--fg);flex:1}
.dm-conn-status{font-size:.68rem;color:#5f8566}
.dm-connector--soon{opacity:.72;border-style:dashed}
.dm-connector--soon .dm-conn-status{color:var(--muted)}

.dm-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#9c5c2a;background:rgba(207,145,82,.14);
  border:1px solid rgba(168,100,56,.28);
  padding:.28rem .55rem;border-radius:7px;
}

.dm-chart{
  display:block;
  width:100%;height:90px;max-height:90px;
  margin-top:.5rem;
  overflow:hidden;
}
.dm-chart path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dm-chart .baseline{stroke:rgba(28,23,18,.12)}
.dm-chart .spike{stroke:#cf9152}

.dm-row{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.55rem}
.dm-av{
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:#fff;flex-shrink:0;
}
.dm-bub{
  flex:1;background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:10px;padding:.45rem .65rem;
}
.dm-role{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:.12rem}
.dm-said{font-size:.74rem;line-height:1.35;color:var(--fg)}

.dm-verdict{
  margin-top:.75rem;padding:.75rem .85rem;border-radius:10px;
  background:rgba(255,252,246,.95);
  border:1px solid rgba(168,100,56,.28);
  box-shadow:0 8px 24px rgba(42,34,24,.06);
}
.dm-verdict-label{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#a86438;margin-bottom:.25rem}
.dm-verdict-text{font-family:var(--font-serif);font-size:.92rem;color:var(--fg);line-height:1.4}

.dm-deck{
  width:min(220px,55%);margin:1rem auto 0;
  aspect-ratio:4/3;border-radius:12px;
  background:linear-gradient(160deg,#efe7d8,#d9cab0);
  box-shadow:0 12px 32px rgba(42,34,24,.12);
  padding:.85rem;display:flex;flex-direction:column;gap:.4rem;
  position:relative;
}
.dm-deck-line{height:7px;border-radius:4px;background:rgba(28,23,18,.7)}
.dm-deck-line.sm{height:5px;width:55%;background:rgba(28,23,18,.35)}
.dm-deck-block{flex:1;border-radius:6px;background:rgba(156,92,42,.25)}
.dm-deck-tag{
  position:absolute;bottom:.65rem;right:.65rem;
  font-size:.58rem;font-weight:600;color:#9c5c2a;
}
.dm-toast{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(12px);
  background:#5f8566;color:#fff;font-size:.72rem;font-weight:600;
  padding:.45rem .9rem;border-radius:999px;opacity:0;
  transition:opacity .3s,transform .3s;white-space:nowrap;
}
.dm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Cursor ────────────────────────────────────────────────────── */
.demo-cursor{
  position:absolute;width:18px;height:18px;z-index:20;
  pointer-events:none;opacity:0;
  transition:left .55s cubic-bezier(.4,0,.2,1),top .55s cubic-bezier(.4,0,.2,1),opacity .25s;
}
.demo-cursor.visible{opacity:1}
.demo-cursor svg{width:18px;height:18px;filter:drop-shadow(0 2px 4px rgba(42,34,24,.25))}
.demo-cursor.click::after{
  content:'';position:absolute;left:50%;top:50%;
  width:28px;height:28px;margin:-14px 0 0 -14px;
  border:2px solid rgba(168,100,56,.55);border-radius:50%;
  animation:dmClick .45s ease-out forwards;
}
@keyframes dmClick{
  from{transform:scale(.4);opacity:1}
  to{transform:scale(1.4);opacity:0}
}

/* ── Caption bar ───────────────────────────────────────────────── */
.demo-caption{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;
  background:#ece4d6;border-top:1px solid var(--line);
}
.demo-caption-text{font-size:.88rem;color:var(--fg);line-height:1.4}
.demo-caption-step{
  font-family:var(--font-mono);font-size:.68rem;color:var(--muted);white-space:nowrap;
}

.demo-controls{
  display:flex;justify-content:center;gap:.65rem;margin-top:1.5rem;flex-wrap:wrap;
}
.demo-dot-btn{
  width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;
  background:var(--line-2);padding:0;transition:transform .2s,background .2s;
}
.demo-dot-btn.active{background:var(--accent);transform:scale(1.25)}
.demo-dot-btn:hover{background:var(--accent-2)}

.demo-cta-row{
  display:flex;justify-content:center;gap:.85rem;margin-top:2.5rem;flex-wrap:wrap;
}

@media (max-width:640px){
  .demo-page{padding-top:96px}
  .demo-scene{padding:1rem}
  .dm-grid-2{grid-template-columns:1fr}
  .dm-agent-layout{grid-template-columns:1fr;height:auto}
  .dm-export-grid{grid-template-columns:1fr}
}