/* ============================================================
   PRODUCT DEMO REDESIGN — chapters (default) + tabs variants,
   animated in-frame scenes. Switchable via Tweaks:
   html[data-demo-mode="chapters" | "tabs" | "original"]
   ============================================================ */

/* ---- variant switching ---- */
.psc-variant{display:none;}
html:not([data-demo-mode]) .psc-variant[data-demo-variant="chapters"],
html[data-demo-mode="chapters"] .psc-variant[data-demo-variant="chapters"],
html[data-demo-mode="tabs"] .psc-variant[data-demo-variant="tabs"],
html[data-demo-mode="original"] .psc-variant[data-demo-variant="original"]{display:block;}

/* ---- shared section header (moved out of .ps-scroll) ---- */
.ps-demo-wrap{margin-top:88px;}
.ps-demo-wrap h2{font-family:var(--serif); font-size:clamp(28px,4vw,44px); font-weight:700; line-height:1.04; letter-spacing:-0.01em; color:var(--ink); margin:0 0 12px;}
.ps-demo-wrap > .ps-demo-sub{font-family:var(--sans); font-size:16px; color:var(--ink-2); max-width:56ch; margin:0 0 8px; line-height:1.55;}
.psc-variant .ps-scroll{margin-top:0;}

/* ============================================================
   CHAPTERS VARIANT — 4-act scrollytelling, sticky animated frame
   ============================================================ */
.psc-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start; margin-top:8px;}
.psc-media{position:sticky; top:84px;}
.psc-frame{position:relative; min-height:448px; background:var(--bg); overflow:hidden;}
.psc-count{margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase; display:flex; align-items:center; gap:10px;}
.psc-count .bar{flex:1; height:2px; background:var(--rule); position:relative; overflow:hidden;}
.psc-count .bar span{position:absolute; left:0; top:0; bottom:0; width:25%; background:var(--accent); transition:transform .5s ease;}

.psc-steps{display:flex; flex-direction:column;}
.psc-step{min-height:72vh; display:flex; flex-direction:column; justify-content:center; opacity:.3; transition:opacity .45s ease;}
.psc-step:first-child{min-height:56vh;}
.psc-step:last-child{min-height:50vh;}
.psc-step.is-active{opacity:1;}
.psc-num{font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--accent); margin-bottom:16px; text-transform:uppercase;}
.psc-step h3, .psc-pane h3{font-family:var(--serif); font-size:clamp(24px,2.7vw,36px); font-weight:700; color:var(--ink); margin:0 0 16px; line-height:1.06; letter-spacing:-0.01em;}
.psc-step p, .psc-pane p{font-family:var(--sans); font-size:17px; color:var(--ink-2); line-height:1.62; margin:0; max-width:46ch;}
.psc-covers{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.psc-covers span{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft); border:1px solid var(--rule); padding:5px 11px; border-radius:999px;}
.psc-mobile-img{display:none;}

/* ============================================================
   TABS VARIANT — pinned viewport, user-driven
   ============================================================ */
.psc-tabs{display:flex; gap:6px; margin:26px 0 26px; border-bottom:1.5px solid var(--rule); flex-wrap:wrap;}
.psc-tab{appearance:none; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1.5px; padding:10px 14px 12px; font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; transition:color .2s ease;}
.psc-tab:hover{color:var(--ink-2);}
.psc-tab.is-active{color:var(--ink); border-bottom-color:var(--accent);}
.psc-tabgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.psc-pane{display:none;}
.psc-pane.is-active{display:block;}

/* ============================================================
   SCENES — animated in-frame UI (shared by chapters + tabs)
   ============================================================ */
.psc-scene{position:absolute; inset:0; display:none; flex-direction:column; gap:7px; padding:12px 15px; font-family:var(--sans); color:var(--ink-2);}
.psc-scene.is-live{display:flex;}

/* Command Center strip — names every module, highlights the active pair */
.cc-strip{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-bottom:8px; border-bottom:1px solid var(--rule);}
.cc-badge{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--bg-4); border:1px solid var(--rule); border-radius:6px; padding:4px 9px; font-weight:600;}
.cc-chip{font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--ink-soft); border:1px solid var(--rule-2); border-radius:999px; padding:3px 9px; transition:color .3s ease, border-color .3s ease, background .3s ease;}
.cc-chip.on{color:var(--bg); background:var(--accent); border-color:var(--accent); font-weight:600;}
.cc-chip, .cc-badge{cursor:pointer;}
.cc-chip:not(.on):hover{color:var(--ink); border-color:var(--rule);}
.cc-badge:hover{border-color:var(--accent);}

/* clickable chapter steps */
.psc-step{cursor:pointer;}
.psc-step .psc-num{transition:color .2s ease;}
.psc-step:not(.is-active):hover h3{color:var(--ink);}
.psc-step:not(.is-active):hover .psc-num{color:var(--ink-2);}
.psc-hint{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft); margin:2px 0 0; display:inline-flex; align-items:center; gap:7px;}
.psc-hint::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);}

/* Personalization detail scene */
.pers-detail{display:flex; flex-direction:column; gap:6px;}
.pd-card{background:var(--bg-2); border:1px solid var(--rule); border-left:2px solid var(--accent-2); border-radius:8px; padding:7px 10px; display:flex; flex-direction:column; gap:2px;}
.pd-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2);}
.pd-card b{font-size:13px; color:var(--ink); font-weight:600; line-height:1.3;}
.pd-sub{font-size:11.5px; color:var(--ink-soft);}
.pd-emails{display:flex; flex-direction:column; gap:5px;}
.pd-mail{display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--rule); border-radius:7px; padding:5px 10px;}
.pd-role{font-family:var(--mono); font-size:10px; color:var(--accent); border:1px solid rgba(255,122,77,.35); border-radius:5px; padding:2px 7px; flex:none; min-width:74px; text-align:center;}
.pd-mail > span:last-child{font-size:12px; color:var(--ink-2); line-height:1.25;}
.pd-assets{display:flex; flex-wrap:wrap; gap:6px;}
.pd-assets span{font-family:var(--mono); font-size:10.5px; color:var(--ink); background:var(--bg-4); border:1px solid var(--rule); border-radius:6px; padding:3px 8px;}

/* clickable personalization teaser inside Close scene */
.pers-out.is-click{cursor:pointer; transition:border-color .2s ease, background .2s ease;}
.pers-out.is-click:hover{border-color:var(--accent-2); background:var(--bg-3);}
.pers-more{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--accent-2);}

/* GTM Assessor recommendations detail */
.gtm-card[data-open]{cursor:pointer; transition:border-color .2s ease, background .2s ease;}
.gtm-card[data-open]:hover{border-color:var(--accent-2); background:var(--bg-3);}
.gtm-detail{display:flex; flex-direction:column; gap:6px;}
.gr-lead{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft);}
.gr-rec{display:flex; align-items:center; gap:12px; background:var(--bg-2); border:1px solid var(--rule); border-left:2px solid var(--accent); border-radius:8px; padding:6px 10px;}
.gr-rank{font-family:var(--mono); font-size:12px; color:var(--accent); flex:none;}
.gr-body{flex:1; min-width:0;}
.gr-body b{display:block; font-size:13px; color:var(--ink); font-weight:600; line-height:1.25;}
.gr-why{font-size:11px; color:var(--ink-soft);}
.gr-meta{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none;}
.gr-impact{font-family:var(--mono); font-size:11.5px; color:var(--accent-2);}
.gr-effort{font-family:var(--mono); font-size:10px; color:var(--ink-soft);}
.scn-head{display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.scn-mono{font-family:var(--mono); font-size:11px; color:var(--accent-2);}
.scn-live{display:inline-flex; align-items:center; gap:6px; color:var(--accent-2);}
.scn-live i{width:6px; height:6px; border-radius:50%; background:var(--accent-2); animation:scnPulse 1.6s ease-in-out infinite;}
.scn-foot{margin-top:auto; font-family:var(--mono); font-size:11px; color:var(--ink-soft); border-top:1px solid var(--rule); padding-top:8px; opacity:0; animation:scnIn .5s ease forwards; animation-delay:1.7s;}
.scn-in{opacity:0; transform:translateY(10px); animation:scnIn .5s ease forwards; animation-delay:var(--d,0s);}
@keyframes scnIn{to{opacity:1; transform:translateY(0);}}
@keyframes scnPulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

/* --- 01 capture --- */
.scn-rows{display:flex; flex-direction:column; gap:6px;}
.sig-row{display:flex; align-items:center; gap:12px; background:var(--bg-2); border:1px solid var(--rule); border-radius:8px; padding:6px 12px;}
.sig-t{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft);}
.sig-body b{display:block; font-size:13px; font-weight:600; color:var(--ink); line-height:1.25;}
.sig-body span{font-size:11px; color:var(--ink-soft); line-height:1.2;}
.sig-score{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--accent-2); border:1px solid rgba(109,211,154,.35); border-radius:6px; padding:3px 8px;}
.sig-row.gated{border-style:dashed; opacity:.55;}
.sig-row.gated .sig-score{color:var(--warn); border-color:rgba(255,112,112,.35);}

/* --- 02 route --- */
.route-board{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; flex:1; align-content:start;}
.rep-col{background:var(--bg-2); border:1px solid var(--rule); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:8px;}
.rep-top{display:flex; align-items:center; gap:7px;}
.rep-av{width:24px; height:24px; border-radius:50%; background:var(--bg-4); color:var(--ink); font-family:var(--mono); font-size:9.5px; display:flex; align-items:center; justify-content:center; border:1px solid var(--rule); flex:none;}
.rep-name{font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap;}
.rep-win{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink-soft);}
.rep-cap{height:3px; background:var(--rule); border-radius:2px; overflow:hidden;}
.rep-cap span{display:block; height:100%; width:var(--w,50%); background:var(--accent-3); border-radius:2px;}
.rep-col.best .rep-cap span{animation:capGrow .6s ease 1.6s forwards;}
@keyframes capGrow{to{width:72%;}}
.rep-slot{background:var(--bg-3); border:1px solid var(--rule-2); border-radius:6px; padding:7px 8px; font-size:11px; color:var(--ink-2);}
.route-slot-target{min-height:34px; border:1px dashed var(--rule); border-radius:6px;}
.route-fly{position:absolute; left:35.5%; top:57%; width:29%; background:var(--bg-4); border:1px solid var(--accent); border-radius:8px; padding:9px 10px; box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; transform:translate(-40%,-150%) scale(.95); animation:routeFly .9s cubic-bezier(.22,.9,.3,1) .8s forwards;}
.route-fly b{display:block; font-size:12px; font-weight:600; color:var(--ink);}
.route-fly span{font-family:var(--mono); font-size:10px; color:var(--accent);}
@keyframes routeFly{30%{opacity:1;} 100%{opacity:1; transform:translate(0,0) scale(1);}}

/* --- 03 close --- */
.deal-table{display:flex; flex-direction:column; gap:8px;}
.deal-row{display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--rule); border-radius:8px; padding:8px 12px; font-size:12.5px;}
.deal-dot{width:7px; height:7px; border-radius:50%; background:var(--accent-2); flex:none;}
.deal-name{color:var(--ink); font-weight:600;}
.deal-flag{font-family:var(--mono); font-size:10px; color:#febc2e;}
.deal-nudge{font-family:var(--mono); font-size:10px; color:var(--accent-2); border:1px solid rgba(109,211,154,.35); border-radius:999px; padding:2px 8px;}
.deal-stage{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); margin-left:auto;}
.deal-val{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); width:56px; text-align:right;}
.deal-row.quiet{border-color:rgba(254,188,46,.4);}
.deal-row.quiet .deal-dot{background:#febc2e; animation:scnPulse 1.2s ease-in-out infinite;}

/* --- 04 learn --- */
.won-banner{display:flex; align-items:center; gap:10px; background:rgba(109,211,154,.08); border:1px solid rgba(109,211,154,.35); border-radius:8px; padding:8px 12px;}
.won-check{color:var(--accent-2); font-weight:700;}
.won-banner b{display:block; font-size:13px; font-weight:600; color:var(--ink);}
.won-banner div > span{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft);}
.learn-panel{background:var(--bg-2); border:1px solid var(--rule); border-radius:8px; padding:10px 14px; display:flex; flex-direction:column; gap:10px;}
.learn-row{display:flex; align-items:baseline; gap:10px;}
.learn-num{font-family:var(--mono); font-size:29px; font-weight:600; color:var(--ink);}
.learn-unit{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.learn-delta{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--accent-2); opacity:0; animation:scnIn .4s ease 1.6s forwards;}
.learn-bar{height:4px; background:var(--rule); border-radius:2px; overflow:hidden;}
.learn-bar span{display:block; height:100%; width:68%; background:var(--accent); border-radius:2px; animation:learnGrow 1s ease .9s forwards;}
@keyframes learnGrow{to{width:74%;}}

/* Account Intel brief (route scene) */
.ai-brief{background:var(--bg-2); border:1px solid rgba(126,170,255,.35); border-left:2px solid var(--accent-3); border-radius:8px; padding:9px 12px; display:flex; flex-direction:column; gap:2px;}
.ai-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-3);}
.ai-brief b{font-size:13px; color:var(--ink); font-weight:600;}
.ai-facts{font-size:11.5px; color:var(--ink-soft);}

/* Personalization output (close scene) */
.pers-out{display:flex; align-items:center; flex-wrap:wrap; gap:6px; background:var(--bg-2); border:1px solid var(--rule); border-radius:8px; padding:9px 12px;}
.pers-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-right:2px;}
.pers-pill{font-family:var(--mono); font-size:10.5px; color:var(--ink); background:var(--bg-4); border:1px solid var(--rule); border-radius:6px; padding:3px 9px;}

/* GTM Assessor card (learn scene) */
.gtm-card{background:var(--bg-2); border:1px solid var(--rule); border-radius:8px; padding:9px 12px; display:flex; flex-direction:column; gap:6px;}
.gtm-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.gtm-row{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.gtm-mat{font-family:var(--mono); font-size:12px; color:var(--ink-2);}
.gtm-mat b{font-size:18px; color:var(--accent-2); font-weight:600; margin-left:4px;}
.gtm-gap{font-family:var(--mono); font-size:11px; color:var(--accent);}

/* ---- motion off (Tweaks toggle or user preference) ---- */
html[data-scene-motion="off"] .psc-scene *{animation-duration:.01s !important; animation-delay:0s !important;}
@media (prefers-reduced-motion: reduce){
  .psc-scene *{animation-duration:.01s !important; animation-delay:0s !important;}
  .psc-step{transition:none;}
}

/* ---- mobile ---- */
@media (max-width:900px){
  .psc-grid{grid-template-columns:1fr; gap:0;}
  .psc-media{display:none;}
  .psc-step{min-height:auto; opacity:1; padding:36px 0; border-top:1.5px solid var(--rule-2);}
  .psc-step:first-child{border-top:none; min-height:auto;}
  .psc-step:last-child{min-height:auto;}
  .psc-mobile-img{display:block; margin-bottom:22px; border:1.5px solid var(--ink); border-radius:10px; overflow:hidden;}
  .psc-mobile-img img{display:block; width:100%; height:auto;}
  .psc-tabgrid{grid-template-columns:1fr; gap:26px;}
}