/* RevOp · the module story (the recap reel). Built 13 Oct 2026 from the M5
   pilot. The stage is always dark: it is a film, not a page, so it does not
   follow the light theme. Colours mean one thing each: indigo a person or a
   deal, red caught or failing, green replaced or working, amber money. */
.rr-ov{position:fixed;inset:0;z-index:1000;background:#04060E;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .4s}
.rr-ov.on{opacity:1}
.rr-stage{position:relative;width:min(100%,1080px,calc((100vh - 32px) * 16 / 9));aspect-ratio:16/9;background:#070B18;border-radius:14px;overflow:hidden;color:#E2E8F0;
  font-family:Inter,system-ui,sans-serif;
  background-image:radial-gradient(60% 70% at 85% 0%,rgba(67,56,202,.32),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(14,124,143,.2),transparent 70%)}
.rr-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.rr-top{position:absolute;left:4%;top:5%;font-size:clamp(9px,1.15vw,12px);letter-spacing:.18em;text-transform:uppercase;color:#94A3B8;font-weight:600;z-index:3}
.rr-ctl{position:absolute;right:3%;top:3.6%;display:flex;gap:8px;z-index:6}
.rr-ctl button{font:inherit;font-size:12px;color:#E2E8F0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:5px 10px;cursor:pointer}
.rr-ctl button:focus-visible,.rr-card button:focus-visible{outline:2px solid #A5B4FC;outline-offset:2px}
.rr-o{position:absolute;opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:3}
.rr-o.on{opacity:1}
.rr-hook{left:8%;right:8%;top:28%;text-align:center;transform:translateY(14px)}
.rr-hook.on{transform:none}
.rr-hook h2{margin:0;font-size:clamp(20px,3.4vw,38px);line-height:1.18;font-weight:600;letter-spacing:-.02em;color:#fff}
.rr-hook p{margin:.7em auto 0;max-width:46em;line-height:1.45;font-size:clamp(13px,1.8vw,19px);color:#A5B4FC;opacity:0;transition:opacity .7s}
.rr-hook p.on{opacity:1}
.rr-hook p span{color:#E2E8F0}
.rr-cap{left:5%;right:5%;bottom:6%;text-align:center;font-size:clamp(16px,2.6vw,28px);line-height:1.35;font-weight:500;transform:translateY(8px);text-shadow:0 2px 14px rgba(7,11,24,.9)}
.rr-cap.on{transform:none}
.rr-cap mark{background:none;color:#fff;font-weight:600;box-shadow:inset 0 -.35em rgba(99,102,241,.55)}
.rr-cap .k{display:block;font-size:.55em;letter-spacing:.18em;text-transform:uppercase;color:#A5B4FC;margin-bottom:.45em;font-weight:600}
.rr-cap,.rr-hook h2,.rr-hook p,.rr-big em,.rr-card .cm{text-wrap:pretty;text-wrap:balance}
.rr-lbl{font-size:clamp(9px,1.1vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#94A3B8;line-height:1.35}
.rr-lbl.c{transform:translateX(-50%);text-align:center}
.rr-lbl.hi{color:#E0E7FF}
.rr-bub{font-size:clamp(11px,1.5vw,16px);font-weight:600;color:#fff;background:rgba(249,128,128,.16);border:1px solid rgba(249,128,128,.55);
  border-radius:10px;padding:.35em .7em;transform:translateY(6px) scale(.96);white-space:nowrap}
.rr-bub.on{transform:none}
.rr-bub.indigo{background:rgba(99,102,241,.18);border-color:rgba(165,180,252,.6)}
.rr-bub.green{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.6)}
.rr-big{left:0;right:0;top:20%;text-align:center;transform:scale(.94)}
.rr-big.on{transform:none}
.rr-big b{display:block;font-size:clamp(46px,10vw,116px);line-height:1;font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(251,191,36,.35)}
.rr-big.word b{font-size:clamp(40px,8vw,96px)}
.rr-big span{display:block;margin-top:.5em;font-size:clamp(15px,2.3vw,24px);color:#E2E8F0}
.rr-big em{display:block;margin:.6em auto 0;max-width:80%;font-style:normal;font-size:clamp(14px,2.1vw,22px);line-height:1.4;color:#FBBF24;opacity:0;transition:opacity .7s}
.rr-big em.on{opacity:1}
.rr-card{left:50%;top:50%;width:min(78%,620px);transform:translate(-50%,-46%);background:rgba(11,16,32,.94);border:1px solid rgba(165,180,252,.28);
  border-radius:16px;padding:clamp(16px,3vw,30px);box-shadow:0 30px 80px rgba(0,0,0,.5);z-index:5}
.rr-card.on{transform:translate(-50%,-50%);pointer-events:auto}
.rr-card .t{font-size:clamp(9px,1.1vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#A5B4FC}
.rr-card h3{margin:.35em 0 .1em;font-size:clamp(18px,2.8vw,30px);font-weight:600;letter-spacing:-.02em;color:#fff}
.rr-card .d{color:#94A3B8;font-size:clamp(11px,1.4vw,14px)}
.rr-card .row{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin-top:clamp(10px,2vw,18px);align-items:baseline}
.rr-card .row b{font-size:clamp(22px,4vw,40px);font-weight:700;letter-spacing:-.03em;color:#fff}
.rr-card .row span{font-size:clamp(11px,1.5vw,15px);color:#CBD5E1}
.rr-card .cm{margin-top:clamp(10px,2vw,16px);padding-top:clamp(10px,2vw,14px);border-top:1px solid rgba(165,180,252,.2);font-size:clamp(12px,1.7vw,16px);color:#E2E8F0}
.rr-card .cm i{font-style:normal;display:block;font-size:.75em;color:#34D399;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:.3em}
.rr-card .acts{display:flex;gap:8px;margin-top:clamp(12px,2vw,18px);flex-wrap:wrap}
.rr-card button{font:inherit;font-size:13px;font-weight:600;border-radius:8px;padding:8px 14px;cursor:pointer;border:1px solid rgba(165,180,252,.35);background:rgba(99,102,241,.25);color:#fff}
.rr-card button.g{background:transparent;color:#E2E8F0}
.rr-card .ex{margin-top:8px;font-size:11px;color:#94A3B8}
.rr-bar{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#6366F1,#34D399);width:0;z-index:4}
.rr-stage.carded .rr-ctl [data-k="skip"],.rr-stage.carded .rr-ctl [data-k="replay"]{display:none}
@media(max-width:600px){
  .rr-top{max-width:46%;line-height:1.4}
  .rr-stage{aspect-ratio:3/4;width:min(100%,calc((100vh - 32px) * 3 / 4))}
  .rr-card{width:90%}.rr-hook{top:22%}.rr-big{top:16%}
  .rr-card .row{grid-template-columns:1fr;gap:0}
  .rr-card .row span{margin-bottom:8px}
}
/* the button on the module's done card */
.rr-play{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font:inherit;font-size:14px;font-weight:600;color:#fff;
  background:var(--ink-900,#0F172A);border:0;border-radius:var(--radius-control,8px);padding:10px 16px;cursor:pointer}
.rr-play i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#34D399;color:#0F172A;font-style:normal;font-size:10px}