.product-demo {--demo-accent:var(--data-blue);border:1px solid var(--data-line);border-radius:22px;overflow:hidden;background:var(--panel);box-shadow:0 18px 60px #0000000a}
.product-demo[data-stage="2"],.product-demo[data-stage="3"] {--demo-accent:var(--editorial-rose)}
.product-demo[data-stage="4"],.product-demo[data-stage="5"] {--demo-accent:var(--editorial-teal)}
.pd-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;border-bottom:1px solid var(--line);font-size:15px}
.pd-header>div {display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px}
.pd-header strong {font-size:20px;letter-spacing:-.035em}.pd-header strong span {color:var(--data-blue)}
.pd-header>div>span {color:var(--muted)}
.pd-toggle {padding:9px 14px;min-height:44px;border:1px solid var(--data-line);border-radius:8px;background:transparent;color:var(--data-blue);font:inherit;white-space:nowrap;cursor:pointer}
.pd-body {display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
.pd-stage {padding:30px;min-width:0;background:radial-gradient(ellipse at 10% 10%,var(--data-halo),transparent 70%),var(--panel2);border-right:1px solid var(--line)}
.pd-stage-label {display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--muted);margin-bottom:22px}
.pd-stage-label strong {color:var(--ink);font-weight:500}
.pd-scene {min-height:335px;position:relative}
.product-demo [hidden] {display:none!important}
.pd-scene h3 {font-size:26px;letter-spacing:-.035em;line-height:1.25;margin:0 0 20px}
.pd-item {display:flex;align-items:center;gap:15px;padding:17px 18px;margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.pd-item>div {min-width:0;flex:1}
.pd-item strong {display:block;font-weight:500;font-size:18px;line-height:1.45;overflow-wrap:anywhere}
.pd-item small {display:block;font-size:15px;line-height:1.6;color:var(--muted);margin-top:4px}
.pd-item>i {display:grid;place-items:center;flex-shrink:0;width:36px;height:42px;background:var(--data-soft);border:1px solid var(--data-line);border-radius:6px;color:var(--data-blue);font-style:normal;font-size:18px}
.pd-item-selected {border-color:var(--demo-accent);box-shadow:inset 3px 0 var(--demo-accent)}
.pd-badge {display:inline-block;margin-top:10px;color:var(--demo-accent);font-size:15px;font-weight:500}
.pd-evidence {padding:22px;border-left:3px solid var(--demo-accent);background:var(--panel);border-radius:0 12px 12px 0;margin:18px 0}
.pd-evidence strong {display:block;font-size:19px;color:var(--demo-accent);margin:6px 0}
.pd-evidence p {font-size:17px;line-height:1.7;color:var(--muted);margin:0}
.pd-evidence>span {font-size:15px;color:var(--muted)}
.pd-decision {display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;font-size:17px}
.pd-decision span {padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.pd-decision span:first-child {border-color:var(--demo-accent);color:var(--demo-accent)}
.pd-copy {display:flex;flex-direction:column;justify-content:center;min-width:0;padding:36px}
.pd-kicker {color:var(--demo-accent);font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.pd-copy h3 {font-size:clamp(30px,3.6vw,44px);letter-spacing:-.045em;line-height:1.15;color:var(--demo-accent);margin-bottom:20px}
.pd-copy>div>p {font-size:18px;line-height:1.75;color:var(--muted)}
.pd-copy>div>.pd-kicker {color:var(--demo-accent);font-size:15px}
.pd-takeaway {padding-top:20px;border-top:1px solid var(--line);margin-top:24px;font-size:17px;color:var(--ink)}
.pd-copy .button {align-self:flex-start;margin-top:28px}
.pd-controls {padding:22px 28px;border-top:1px solid var(--line)}
.pd-controls>p {font-size:15px;color:var(--muted);margin-bottom:12px}
.pd-steps {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pd-steps button {position:relative;display:grid;gap:6px;text-align:left;background:transparent;color:var(--muted);font:inherit;font-size:15px;min-height:66px;padding:9px 0 13px;border:0;border-bottom:3px solid var(--line);cursor:pointer}
.pd-steps button strong {font-size:17px;font-weight:500;color:var(--ink)}
.pd-steps button[aria-pressed=true] {border-color:var(--demo-accent);color:var(--demo-accent)}
.pd-steps button[aria-pressed=true] strong {color:var(--demo-accent)}
.pd-steps button:focus-visible,.pd-toggle:focus-visible {outline:3px solid var(--data-blue);outline-offset:5px;border-radius:5px}
.pd-footer {display:flex;align-items:baseline;justify-content:space-between;gap:12px 25px;flex-wrap:wrap;margin-top:22px;font-size:15px;color:var(--muted)}
.pd-footer a {color:var(--data-blue)}
.product-demo[data-playing=true] .pd-scene:not([hidden]) .pd-item {animation:pd-rise .7s both}
.product-demo[data-playing=true] .pd-scene .pd-item:nth-of-type(2) {animation-delay:.18s}
.product-demo[data-playing=true] .pd-scene .pd-item:nth-of-type(3) {animation-delay:.36s}
.product-demo[data-playing=true] .pd-steps button[aria-pressed=true]::after {content:'';position:absolute;left:0;bottom:-3px;width:100%;height:3px;background:var(--demo-accent);transform-origin:left;animation:pd-progress 6s linear both}
.product-demo[data-playing=true] .pd-steps button[aria-pressed=true] {border-color:var(--line)}
@keyframes pd-rise {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pd-progress {from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:780px) {
  .pd-body {grid-template-columns:1fr}.pd-stage {border-right:0;border-bottom:1px solid var(--line);padding:24px}.pd-scene {min-height:320px}
  .pd-copy {padding:28px 24px;min-height:340px}.pd-copy h3 {font-size:34px}
  .pd-header {padding:16px 22px;gap:12px}.pd-header>div {gap:0 10px}.pd-header>div>span {font-size:15px}
  .pd-controls {padding:20px 24px}.pd-steps {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px}
}
@media(max-width:400px) {
  .pd-header {align-items:flex-start;flex-wrap:wrap;padding:16px}.pd-header>div {display:block}.pd-header>div>span {display:block;margin-top:3px}.pd-toggle {padding:9px 10px}
  .pd-stage,.pd-copy,.pd-controls {padding:22px 18px}.pd-stage-label {flex-wrap:wrap;gap:3px}
  .pd-item {padding:14px 12px;gap:11px}.pd-item strong {font-size:17px}.pd-copy h3 {font-size:31px}.pd-steps {gap:10px}
  .pd-steps button strong {font-size:15px}
}
@media(prefers-reduced-motion:reduce) {.product-demo *,.product-demo *::after {animation:none!important;transition:none!important}}