/* Demo page — governed-vs-ungoverned proof widget + live embed + product screens.
   Built on top of ../styles.css design tokens (--ink, --muted, --green, --red, --amber, --line, --paper, --radius). */

.demo-hero{padding:56px 0 8px}
.demo-hero .lede{font-size:18px;line-height:1.6;color:var(--muted);max-width:68ch;margin:10px 0 0}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0 8px}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px;box-shadow:var(--shadow-sm)}
.seg button{background:none;border:0;color:var(--muted);font:650 14px/1 inherit;padding:10px 16px;border-radius:8px;cursor:pointer}
.seg button.on{color:#fff}
.seg button.on.g{background:linear-gradient(135deg,var(--green),var(--green2))}
.seg button.on.u{background:linear-gradient(135deg,var(--red),#f0787f)}
.replay-btn{background:var(--navy);color:#fff;border:0;border-radius:11px;padding:11px 18px;font:650 14px/1 inherit;cursor:pointer}
.replay-btn:hover{background:#182331}

.stage{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px 22px;box-shadow:var(--shadow)}
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch;position:relative}
@media(max-width:760px){.pipe{grid-template-columns:1fr;gap:10px}}
.node{position:relative;text-align:center;padding:10px 8px}
.node .box{background:#f6f8f6;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 10px;transition:.35s;position:relative}
.node.act .box{border-color:var(--amber);box-shadow:0 0 0 3px rgba(200,134,19,.14),0 0 26px rgba(200,134,19,.2)}
.node.deny .box{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,70,70,.14),0 0 26px rgba(232,70,70,.22)}
.node.allow .box{border-color:var(--green);box-shadow:0 0 0 3px rgba(16,168,117,.14),0 0 26px rgba(16,168,117,.22)}
.node .ic{font-size:25px;line-height:1}
.node .nm{font-weight:750;font-size:14px;margin-top:8px;color:var(--ink)}
.node .sm{font-size:11.5px;color:var(--muted2);margin-top:2px}
.node.gate .box{border-style:dashed}
.node.gate.off{opacity:.28;filter:grayscale(.6)}
.node:before{content:"";position:absolute;top:50%;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.node:first-child:before{display:none}
@media(max-width:760px){.node:before{display:none}}
.node>*{position:relative;z-index:1}
#packet{position:absolute;top:56px;left:0;width:14px;height:14px;border-radius:50%;margin-left:-7px;
  background:radial-gradient(circle at 30% 30%,#fff,var(--amber));box-shadow:0 0 14px 3px rgba(200,134,19,.6);
  opacity:0;transition:left .8s cubic-bezier(.5,0,.3,1),opacity .3s,background .3s,box-shadow .3s;z-index:5}
#packet.red{background:radial-gradient(circle at 30% 30%,#fff,var(--red));box-shadow:0 0 14px 3px rgba(232,70,70,.6)}
@media(max-width:760px){#packet{display:none}}

.status{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:flex;gap:12px;align-items:flex-start;min-height:52px}
.status .tick{flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;background:#f6f8f6;border:1px solid var(--line)}
.status .txt{font-size:15px;color:var(--ink)}
.status .txt .muted{color:var(--muted)}
.outcome{margin-top:14px;border-radius:var(--radius-sm);padding:14px 16px;font-weight:700;display:flex;gap:10px;align-items:center;font-size:15px;opacity:0;transition:.4s;min-height:0}
.outcome.show{opacity:1}
.outcome.deny{background:var(--red-soft);border:1px solid #f6c9cf;color:var(--red)}
.outcome.allow{background:var(--green-soft);border:1px solid var(--green-line);color:#0d7a56}
.outcome .big{font-size:22px}
.counter{font-variant-numeric:tabular-nums}

.real{display:inline-block;font-size:11px;color:#0d7a56;border:1px solid var(--green-line);background:var(--green-soft);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}

.live-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0}
.iframe-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.iframe-wrap iframe{width:100%;height:1080px;border:0;display:block}
@media(max-width:760px){.iframe-wrap iframe{height:1560px}}

.screens{display:flex;flex-direction:column;gap:0;margin-top:26px}
.screen{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.screen .cap{display:flex;gap:12px;align-items:flex-start}
.screen .step{flex:0 0 30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:14px;
  color:#fff;background:linear-gradient(135deg,var(--green),var(--green2))}
.screen h3{margin:2px 0 3px;font-size:18px;color:var(--ink)}
.screen p{margin:0;color:var(--muted);font-size:14.5px}
.shot{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.shot img{display:block;width:100%;height:auto}
.flowline{height:30px;width:2px;background:linear-gradient(var(--green),transparent);margin:14px auto}