/* Saksham deck, the controlled flow (VEL-CAP-0542, W1). Loaded by the Saksham deck page only (tools/build-saksham.cjs); built from the CEO-approved sample
   (the local UX sample's next/rv-layer.css, 7 Oct 2026). One idea per slide: a headline, one line, one visual, one action; depth on tap (the drawers).
   Colour: Mulberry #7A1F5B = the ground and the answer; Paper #F7F4ED and Ink #171717 = reading; Gold #F2A900 = look here / press this (on Paper the accent
   turns Mulberry: Gold on Paper is 1.8:1). Green, Amber and Red appear only inside the dashboard card, always with a word. Problems are neutral, answers Mulberry.
   Type (Inter 400/500/600 only): headline 28-48 px (two-column 26-40), line 16-19, title 18-22, body 16-17, small 14; cover headline 40-70. Nothing under 14 px.
   Pictures: the Saksham screens keep their SAMPLE DATA band whole: no crop, no clip, no radius, no overflow on a picture or its frame; in the s05 collage the
   picture in front covers only the upper right corner of the one behind, never its band. Motion: one meaning per animation; all of it stops under reduce motion. */
.beat .rv{--rv-h:clamp(28px,min(3.3vw,5.6svh),48px);--rv-h2:clamp(26px,min(2.8vw,4.8svh),40px);--rv-line:clamp(16px,min(1.3vw,2.3svh),19px);--rv-title:clamp(18px,1.45vw,22px);--rv-body:clamp(16px,1.12vw,17px);--rv-small:14px;justify-content:flex-start;gap:clamp(12px,2.2svh,24px);max-width:1200px;margin:0 auto;width:100%;color:var(--fg)}
.beat .rv button{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;text-transform:none;letter-spacing:normal;font-family:inherit;font-size:inherit;color:inherit;text-align:left;cursor:pointer}
.beat .rv .rv-eye{font-size:var(--rv-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.beat .rv .rv-h{margin:0;font-size:var(--rv-h);line-height:1.08;font-weight:600;letter-spacing:-.015em;max-width:20ch;color:var(--fg)}
.beat .rv .rv-h--big{max-width:22ch}
.beat .rv .rv-lede{margin:0;font-size:var(--rv-line);line-height:1.5;max-width:42ch;color:var(--fg-2)}
.beat .rv .rv-fine{margin:0;font-size:var(--rv-small);line-height:1.5;color:var(--fg-3);max-width:64ch}
.beat .rv .rv-fine a{color:inherit;text-underline-offset:4px}
.beat .rv .rv-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:var(--rv-body);font-weight:600;color:var(--accent-text);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.beat .rv .rv-link::after{content:"\2192";margin-left:10px;text-decoration:none;display:inline-block;transition:transform .25s}
.beat .rv .rv-link:hover::after{transform:translateX(5px)}
.beat .rv :focus-visible,.rv-dlg :focus-visible{outline:3px solid var(--accent-text,#7A1F5B);outline-offset:3px}
.beat[data-tone="ink"] .rv :focus-visible{outline-color:#F7F4ED}
.beat .rv-copy{display:flex;flex-direction:column;gap:clamp(10px,1.8svh,18px);min-width:0}
.beat .rv-split .rv-h,.beat .rv-hub .rv-h,.beat .rv-ai .rv-h{font-size:var(--rv-h2)}

/* a block whose content changes with the step: the versions sit on top of each other and cross-fade */
.beat .rv-swap{display:grid}
.beat .rv-swap>.sw{grid-area:1/1;display:flex;flex-direction:column;gap:clamp(10px,1.6svh,16px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
.beat[data-step="1"] .rv-swap>.sw1,.beat[data-step="2"] .rv-swap>.sw2,.beat[data-step="3"] .rv-swap>.sw3,.beat[data-step="4"] .rv-swap>.sw4{opacity:1;visibility:visible;transform:none;transition:opacity .45s .12s,transform .6s cubic-bezier(.2,.8,.2,1) .12s,visibility 0s}

/* ── s02 · the hub: problems float, then fall into four disconnected tools, then ONE Saksham core with arrows out to four parts ── */
.beat .rv-hub{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);gap:clamp(24px,4vw,60px);align-items:center}
#s02 .hb{position:relative;width:min(100%,calc(min(58svh,540px)*1.35));aspect-ratio:1.35;justify-self:center}
#s02 .hb-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
#s02 .hb-broken line{stroke:rgba(23,23,23,.4);stroke-width:.45;stroke-dasharray:1.4 1.4;opacity:0;transition:opacity .4s}
#s02[data-step="2"] .hb-broken line{opacity:1;transition:opacity .5s .5s}
#s02 .hb-spokes line{stroke:var(--sak-plum,#7A1F5B);stroke-width:.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s}
#s02[data-step="3"] .hb-spokes line{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1) .45s}
#s02 .hb-heads{opacity:0;transition:opacity .2s}
#s02[data-step="3"] .hb-heads{opacity:1;transition:opacity .35s 1.2s}
#s02 .hb-heads line{stroke:transparent;stroke-width:.6}
#s02 .hb-flow line{stroke:var(--sak-gold,#F2A900);stroke-width:1;stroke-linecap:round;stroke-dasharray:.1 4.4;opacity:0;transition:opacity .3s}
#s02[data-step="3"] .hb-flow line{opacity:1;transition:opacity .4s 1.3s;animation:hbflow 1.8s linear infinite}
@keyframes hbflow{to{stroke-dashoffset:-4.5}}
#s02 .hb-x{position:absolute;left:var(--x);top:var(--y);z-index:2;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--paper);border:1.5px solid rgba(23,23,23,.45);display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}
#s02 .hb-x::before{content:"\00D7";font-size:16px;line-height:1;color:var(--ink)}
#s02[data-step="2"] .hb-x{opacity:1;transform:none;transition:opacity .4s .8s,transform .4s cubic-bezier(.2,.8,.2,1) .8s}
#s02 .hb-box{position:absolute;left:var(--x);top:var(--y);width:30%;height:26%;z-index:2;border:1.5px dashed rgba(23,23,23,.42);border-radius:14px;background:rgba(227,222,210,.6);opacity:0;visibility:hidden;transform:scale(.9);transition:opacity .4s,transform .5s,visibility 0s .5s}
#s02 .hb-box:nth-of-type(1){--rb:-1.5deg}#s02 .hb-box:nth-of-type(2){--rb:1.2deg}#s02 .hb-box:nth-of-type(3){--rb:1.4deg}#s02 .hb-box:nth-of-type(4){--rb:-1.2deg}
#s02 .hb-box span{position:absolute;left:12px;top:8px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#57544D}
#s02[data-step="2"] .hb-box{opacity:1;visibility:visible;transform:rotate(var(--rb));transition:opacity .45s .2s,transform .6s cubic-bezier(.2,.8,.2,1) .2s,visibility 0s}
#s02 .hb-chip{position:absolute;left:var(--x1);top:var(--y1);z-index:3;transform:rotate(var(--r1));transform-origin:left top;transition:left .9s cubic-bezier(.65,0,.35,1) var(--d),top .9s cubic-bezier(.65,0,.35,1) var(--d),transform .9s cubic-bezier(.65,0,.35,1) var(--d),opacity .5s var(--d),visibility 0s}
#s02 .hb-chip i{display:inline-flex;align-items:center;gap:8px;font-style:normal;padding:7px 14px;border-radius:999px;background:var(--paper);border:1.5px solid rgba(23,23,23,.3);box-shadow:0 8px 20px rgba(23,23,23,.08);font-size:var(--rv-small);font-weight:500;color:var(--ink);white-space:nowrap}
#s02 .hb-chip i::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(23,23,23,.45)}
#s02[data-step="1"] .hb-chip i{animation:hbdrift 4.8s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -14)}
@keyframes hbdrift{from{transform:translate(0,0)}to{transform:translate(7px,-6px)}}
#s02[data-step="2"] .hb-chip{left:var(--x2);top:var(--y2);transform:scale(.84)}
#s02[data-step="2"] .hb-chip i{box-shadow:none;background:rgba(247,244,237,.85)}
#s02[data-step="3"] .hb-chip{left:46%;top:47%;transform:scale(.15);opacity:0;visibility:hidden;transition:left .8s cubic-bezier(.65,0,.35,1) var(--d),top .8s cubic-bezier(.65,0,.35,1) var(--d),transform .8s cubic-bezier(.65,0,.35,1) var(--d),opacity .5s calc(var(--d) + .3s),visibility 0s 1.3s}
#s02 .hb-core{position:absolute;left:50%;top:50%;z-index:4;width:clamp(76px,7.4vw,108px);aspect-ratio:1;border-radius:50%;background:var(--sak-plum,#7A1F5B);display:grid;place-items:center;box-shadow:0 14px 34px rgba(122,31,91,.35);opacity:0;transform:translate(-50%,-50%) scale(.3);transition:transform .4s,opacity .3s}
#s02 .hb-core .sk-ico{--h:clamp(34px,3.3vw,48px);background:var(--paper)}
#s02 .hb-core::before,#s02 .hb-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--sak-gold,#F2A900);opacity:0}
#s02[data-step="3"] .hb-core{opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform .8s cubic-bezier(.2,.9,.25,1.2) .35s,opacity .4s .35s}
#s02[data-step="3"] .hb-core::before{animation:hbpulse 2.6s ease-out 1.4s infinite}
#s02[data-step="3"] .hb-core::after{animation:hbpulse 2.6s ease-out 2.7s infinite}
@keyframes hbpulse{from{transform:scale(1);opacity:.85}to{transform:scale(2);opacity:0}}
#s02 .hb-node{position:absolute;left:var(--x);top:var(--y);z-index:5;width:30%;min-height:26%;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 40px 12px 16px;border-radius:14px;background:var(--sak-plum,#7A1F5B);color:#F7F4ED;box-shadow:0 14px 30px rgba(122,31,91,.22);text-align:left;opacity:0;visibility:hidden;transform:scale(.9);transition:opacity .3s,transform .4s,visibility 0s .4s}
#s02 .hb-node b{font-size:var(--rv-title);font-weight:600;line-height:1.15}
#s02 .hb-node span{font-size:var(--rv-small);line-height:1.35;color:#E8DADC}
#s02 .hb-node::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--sak-gold,#F2A900);transition:transform .3s}
#s02[data-step="3"] .hb-node{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--d),transform .6s cubic-bezier(.2,.8,.2,1) var(--d),visibility 0s}
#s02[data-step="3"] .hb-node:hover,#s02[data-step="3"] .hb-node:focus-visible{transform:translateY(-4px);box-shadow:0 20px 40px rgba(122,31,91,.32)}
#s02 .hb-node:hover::after{transform:translateY(-50%) rotate(90deg)}
#s02 .hb-node:focus-visible{outline:3px solid var(--sak-gold,#F2A900);outline-offset:3px}

/* ── s03 · AI readiness: four steps up a path; each step brings its proof card ── */
.beat .rv-ai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(24px,4vw,60px);align-items:center}
.beat .ai-path{list-style:none;margin:clamp(4px,1.4svh,16px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.beat .ai-path li{position:relative;--lift:0px}
.beat .ai-path li:nth-child(1){--lift:36px}.beat .ai-path li:nth-child(2){--lift:24px}.beat .ai-path li:nth-child(3){--lift:12px}
.beat .rv .ai-path button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;min-height:44px;padding:var(--lift) 8px 0 0;font-size:var(--rv-small);font-weight:600;line-height:1.3;color:var(--fg-3)}
.beat .ai-path i{display:block;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;background:var(--sak-plum,#7A1F5B);transition:background .4s,border-color .4s,box-shadow .4s}
.beat .ai-path li+li::before{content:"";position:absolute;left:calc(-100% + 18px);width:calc(100% - 9px);top:calc(var(--lift) + 9px);height:12px;border:solid rgba(247,244,237,.35);border-width:0 2px 2px 0;border-bottom-right-radius:8px;transition:border-color .5s}
.beat[data-step="1"] .ai-path li:nth-child(1) button,.beat[data-step="2"] .ai-path li:nth-child(2) button,.beat[data-step="3"] .ai-path li:nth-child(3) button,.beat[data-step="4"] .ai-path li:nth-child(4) button{color:var(--fg)}
.beat[data-step="1"] .ai-path li:nth-child(1) button i,.beat[data-step="2"] .ai-path li:nth-child(2) button i,.beat[data-step="3"] .ai-path li:nth-child(3) button i,.beat[data-step="4"] .ai-path li:nth-child(4) button i{background:var(--sak-gold,#F2A900);border-color:var(--sak-gold,#F2A900);box-shadow:0 0 0 6px rgba(242,169,0,.25)}
#s03[data-step="2"] .ai-path li:nth-child(-n+1) i,#s03[data-step="3"] .ai-path li:nth-child(-n+2) i,#s03[data-step="4"] .ai-path li:nth-child(-n+3) i{background:var(--paper);border-color:var(--paper)}
#s03[data-step="2"] .ai-path li:nth-child(2)::before,#s03[data-step="3"] .ai-path li:nth-child(-n+3)::before,#s03[data-step="4"] .ai-path li::before{border-color:var(--sak-gold,#F2A900)}
.beat .rv .ai-path button:hover{color:var(--fg)}
.beat .rv-cards{display:grid;min-width:0}
.beat .rv-c{grid-area:1/1;align-self:center;display:grid;gap:10px;min-width:0;opacity:0;visibility:hidden;transform:translateX(40px);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
#s03[data-step="2"] .rv-c1,#s03[data-step="3"] .rv-c1,#s03[data-step="3"] .rv-c2,#s03[data-step="4"] .rv-c1,#s03[data-step="4"] .rv-c2,#s03[data-step="4"] .rv-c3{transform:translateX(-40px)}
#s03[data-step="1"] .rv-c1,#s03[data-step="2"] .rv-c2,#s03[data-step="3"] .rv-c3,#s03[data-step="4"] .rv-c4{opacity:1;visibility:visible;transform:none;transition:opacity .45s .12s,transform .7s cubic-bezier(.2,.8,.2,1) .12s,visibility 0s}
.beat .rv-shot{margin:0;display:grid;gap:10px}

/* cards (dashboard, assistant, managed updates) */
.beat .rv-card{background:var(--paper);color:var(--ink);border-radius:18px;padding:clamp(18px,1.8vw,26px);box-shadow:0 24px 60px rgba(23,23,23,.35);display:grid;gap:clamp(12px,1.8svh,18px);min-width:0}
.beat .rv-card__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--rv-body);color:var(--ink)}
.beat .rv-card__hd b{font-weight:600;display:inline-flex;align-items:center;gap:10px}
.beat .rv-chip{font-size:var(--rv-small);font-weight:500;color:#57544D;border:1px solid rgba(23,23,23,.28);border-radius:999px;padding:3px 12px}
.beat .rv-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.beat .rv-kpi{display:grid;gap:4px;padding:clamp(12px,1.2vw,16px);border:1.5px solid rgba(23,23,23,.14);border-radius:12px}
.beat .rv-kpi .k{font-size:var(--rv-small);color:#57544D}
.beat .rv-kpi .v{font-size:var(--rv-h2);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.beat .rv-kpi .v em{font-style:normal;font-variant-numeric:tabular-nums}
.beat .rv-kpi .s{justify-self:start;font-size:var(--rv-small);font-weight:600;padding:2px 11px;border-radius:999px}
.beat .rv-kpi .s--g{background:#2E7D4F;color:#F7F4ED}.beat .rv-kpi .s--a{background:#F2A900;color:#171717}.beat .rv-kpi .s--r{background:#B3261E;color:#F7F4ED}
#s03[data-step="2"] .rv-kpi{animation:rvpopin .6s cubic-bezier(.2,.8,.2,1) both}
#s03[data-step="2"] .rv-kpi:nth-child(2){animation-delay:.12s}#s03[data-step="2"] .rv-kpi:nth-child(3){animation-delay:.24s}#s03[data-step="2"] .rv-kpi:nth-child(4){animation-delay:.36s}
@keyframes rvpopin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.beat .rv-dot{width:12px;height:12px;border-radius:50%;background:var(--sak-gold);display:inline-block}
.beat .rv-q{margin:0;align-self:end;justify-self:end;max-width:88%;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--sak-plum,#7A1F5B);color:#F7F4ED;font-size:var(--rv-body);line-height:1.45;min-height:3.1em}
.beat .rv-a{display:grid;gap:12px;max-width:92%;padding:12px 16px;border-radius:16px 16px 16px 4px;background:#E3DED2;color:var(--ink);font-size:var(--rv-body);line-height:1.5;transition:opacity .5s,transform .5s}
.beat .rv-card--chat[data-typing] .rv-a:not(.on){opacity:0;transform:translateY(12px)}   /* W2: the answer appears once the question is typed */
.beat .rv-a p{margin:0}.beat .rv-a.on{opacity:1;transform:none}
.beat .rv-fake{display:flex;gap:10px;flex-wrap:wrap}.beat .rv-fake span{font-size:var(--rv-small);font-weight:600;padding:7px 13px;border-radius:8px;background:var(--sak-plum,#7A1F5B);color:#F7F4ED}.beat .rv-fake span+span{background:transparent;color:var(--sak-plum,#7A1F5B);border:1.5px solid var(--sak-plum,#7A1F5B)}
.beat .rv-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.beat .rv-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1.5px solid rgba(23,23,23,.14);border-radius:12px;font-size:var(--rv-body);font-weight:500;color:var(--ink)}
.beat .rv-row i{flex:none;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-weight:600;font-size:15px;line-height:1}
.beat .rv-row i.ok{background:#2E7D4F;color:#F7F4ED}.beat .rv-row i.ok::before{content:"\2713"}
#s03[data-step="4"] .rv-row{animation:rvslide .6s cubic-bezier(.2,.8,.2,1) both}
#s03[data-step="4"] .rv-row:nth-child(2){animation-delay:.18s}#s03[data-step="4"] .rv-row:nth-child(3){animation-delay:.36s}
@keyframes rvslide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* ── s05: three struck words, a two-picture collage ── */
.beat .rv-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,60px);align-items:center}
.beat .rv-mini{margin:0;font-size:var(--rv-small);font-weight:600;letter-spacing:.02em;color:var(--fg-3)}
.beat .rv-strike{list-style:none;margin:-4px 0 0;padding:0;display:grid;gap:clamp(4px,1svh,8px)}
.beat .rv-strike li{font-size:var(--rv-title);font-weight:600;line-height:1.25;color:var(--fg)}
.beat .rv-strike .w{position:relative;display:inline-block}
.beat .rv-strike .w::after{content:"";position:absolute;left:-5px;right:-5px;top:56%;height:3px;border-radius:2px;background:var(--accent);transform:scaleX(1);transform-origin:left}
.beat.live .rv-strike .w::after{animation:rvstrike .7s cubic-bezier(.2,.8,.2,1) calc(.9s + var(--k,0)*.35s) both}
.beat .rv-strike li:nth-child(2) .w::after{--k:1}.beat .rv-strike li:nth-child(3) .w::after{--k:2}
.beat .rv-strike li:nth-child(4) .w::after{--k:3}
.beat .rv-strike li:nth-child(5) .w::after{--k:4}
@keyframes rvstrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.beat .rv-coll{margin:0;padding:10px 8px 0;display:flex;flex-direction:column;gap:10px;min-width:0}   /* the inset keeps the tilted corners inside the slide (its scroll region clips) */
.beat .rv-coll__stage{position:relative;width:100%;aspect-ratio:1.28}
.beat .rv-coll__p{position:absolute;width:76%}
.beat .rv-coll__p--1{left:0;bottom:0;z-index:1}.beat .rv-coll__p--2{right:0;top:0;z-index:2;width:70%}   /* behind: lower left; in front: upper right, clear of the band behind */
.beat .rv-pic{background:var(--paper);border:1px solid rgba(23,23,23,.18);box-shadow:0 18px 44px rgba(23,23,23,.28);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.beat .rv-coll__p--1 .rv-pic{transform:rotate(-2deg)}.beat .rv-coll__p--2 .rv-pic{transform:rotate(2.2deg)}
.beat .rv-coll:hover .rv-coll__p--1 .rv-pic{transform:rotate(-3deg) translate(-6px,4px)}.beat .rv-coll:hover .rv-coll__p--2 .rv-pic{transform:rotate(3deg) translate(6px,-4px)}   /* apart, never closer */
.beat .rv-pic img{display:block;width:100%;height:auto}

/* ── s07: a timeline that draws itself, three numbers ── */
.beat .rv-tl{list-style:none;margin:clamp(12px,2.6svh,30px) 0 0;padding:32px 0 0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.beat .rv-tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:2px;background:rgba(23,23,23,.14)}
.beat .rv-tl::after{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:2px;background:var(--accent);transform-origin:left;transform:scaleX(1);z-index:1}
.beat.live .rv-tl::after{animation:rvgrow 2.1s cubic-bezier(.3,.7,.2,1) .5s both}
@keyframes rvgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.beat .rv-tl li{position:relative;display:grid;gap:6px;align-content:start}
.beat .rv-tl li::before{content:"";position:absolute;left:0;top:-32px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:4px solid var(--accent);z-index:2}
.beat.live .rv-tl li::before{animation:rvpop .5s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--j,0)*.5s) both}
.beat .rv-tl li:nth-child(2){--j:1}.beat .rv-tl li:nth-child(3){--j:2}.beat .rv-tl li:nth-child(4){--j:3}
.beat .rv-tl li:last-child::before{background:var(--sak-gold);border-color:var(--accent)}
@keyframes rvpop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.beat .rv-wk{font-size:var(--rv-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.beat .rv-tl h3{margin:0;font-size:var(--rv-title);font-weight:600;line-height:1.2;color:var(--fg)}
.beat .rv-tl p{margin:0;font-size:var(--rv-body);line-height:1.45;color:var(--fg-2)}
.beat .rv-stats{list-style:none;margin:clamp(6px,1.4svh,16px) 0 0;padding:clamp(12px,2svh,20px) 0 0;border-top:1.5px solid var(--line);display:flex;gap:clamp(24px,5vw,72px);flex-wrap:wrap}
.beat .rv-stats li{display:flex;align-items:baseline;gap:12px}
.beat .rv-stats b{font-size:var(--rv-h);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--accent-text)}
.beat .rv-stats span{font-size:var(--rv-body);color:var(--fg-2)}

/* ── s08 ── */
.beat .rv-final{align-items:flex-start;gap:clamp(14px,2.4svh,26px)}
.beat .rv-final .acts{display:flex;gap:14px;flex-wrap:wrap}
.beat .rv-fine--foot{margin-top:clamp(4px,1.6svh,18px);max-width:70ch}

/* ── the cover, quieter: the headline one step smaller, small print at the 14 px floor ── */
.sak #s01 h1{font-size:clamp(40px,min(4.8vw,8svh),70px)!important;letter-spacing:-.02em}
#s01 .sk-kicker,#s01 .sk-chips li{font-size:14px}

/* ── the drawer: every list that used to crowd a slide lives here, one tap away ── */
.rv-dlg{border:0;padding:0;margin:auto;width:min(980px,94vw);max-height:min(88vh,800px);overflow:auto;border-radius:20px;background:#F7F4ED;color:#171717;box-shadow:0 30px 90px rgba(23,23,23,.5);font-family:Inter,system-ui,sans-serif}
.rv-dlg[open]{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);animation:rvdlg .5s cubic-bezier(.2,.8,.2,1)}
.rv-dlg.no-img[open]{grid-template-columns:minmax(0,1fr);width:min(640px,94vw)}
@keyframes rvdlg{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.rv-dlg::backdrop{background:rgba(23,23,23,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rv-dlg .vis{background:#E3DED2;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(14px,2vw,26px);min-width:0}
.rv-dlg .vis img{display:block;width:100%;height:auto;border:1px solid rgba(23,23,23,.18);box-shadow:0 14px 34px rgba(23,23,23,.25);background:#F7F4ED}
.rv-dlg .vis p{margin:0;font-size:14px;color:#57544D}
.rv-dlg .txt{padding:clamp(22px,2.8vw,40px);overflow:auto;max-height:min(88vh,800px);min-width:0}
.rv-dlg h3{margin:0;font-size:clamp(24px,2.2vw,30px);font-weight:600;line-height:1.15;color:#7A1F5B;padding-right:44px}
.rv-dlg h4{margin:22px 0 0;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7A1F5B}
.rv-dlg ul,.rv-dlg ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.rv-dlg h4+ul{margin-top:10px}
.rv-dlg li{position:relative;padding-left:24px;font-size:clamp(16px,1.15vw,17px);line-height:1.5}
.rv-dlg li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:50%;background:#F2A900}
.rv-dlg p.t{margin:14px 0 0;font-size:clamp(16px,1.15vw,17px);line-height:1.55}
.rv-dlg p.f{margin:20px 0 0;padding-top:14px;border-top:1px solid #E3DED2;font-size:14px;line-height:1.5;color:#57544D}
.rv-dlg .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;background:#171717;color:#F7F4ED;border:0;font:500 22px/1 Inter,sans-serif;cursor:pointer;display:grid;place-items:center}
.rv-dlg .x:hover{background:#7A1F5B}

html.rv-lock body{overflow:hidden!important}   /* body only: the page keeps the same scroller, so the deck's smooth moves still work after the drawer closes */

/* centre vertically, but never cut the top off when the content is taller than the slide (phones): auto margins instead of justify-content:center */
.beat .rv>:first-child{margin-top:auto}.beat .rv>:last-child{margin-bottom:auto}

/* ── tablets and phones ── */
@media (max-width:900px){
  .beat .rv-split,.beat .rv-hub,.beat .rv-ai{grid-template-columns:minmax(0,1fr);gap:18px}
  .beat .rv{padding-bottom:16px}   /* the arrows are cleared by the frame's own bottom padding (124 px, overhaul.css: the region ends above them); the old 78 px here counted that twice and made every slide scroll 62 px more */
  .beat .rv-tl{grid-template-columns:minmax(0,1fr);padding:0 0 0 32px;gap:16px}
  .beat .rv-tl::before,.beat .rv-tl::after{left:8px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .beat .rv-tl::after{transform-origin:top;transform:scaleY(1)}.beat.live .rv-tl::after{animation-name:rvgrowy}
  .beat .rv-tl li::before{left:-32px;top:2px}
  /* the hub becomes a list, then tags, then a 2 x 2 of parts round the core */
  #s02 .hb{width:100%;aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
  #s02 .hb-lines,#s02 .hb-x{display:none}
  #s02 .hb-chip,#s02[data-step] .hb-chip{position:static;transform:none;opacity:1;visibility:visible;transition:none}
  #s02 .hb-chip i{animation:none!important;white-space:normal}
  #s02[data-step="3"] .hb-chip,#s02[data-step="1"] .hb-box,#s02[data-step="3"] .hb-box,#s02 .hb-core,#s02 .hb-node{display:none}
  #s02[data-step="2"] .hb-box{display:flex;position:static;width:auto;height:auto;flex-basis:100%;padding:8px 12px;opacity:1;visibility:visible;transform:none;order:-1}
  #s02[data-step="2"] .hb-box span{position:static}
  #s02[data-step="3"] .hb-core{display:grid;position:static;transform:none;opacity:1;flex-basis:100%;width:auto;height:64px;aspect-ratio:auto;border-radius:14px}
  #s02[data-step="3"] .hb-node{display:flex;position:static;width:calc(50% - 4px);min-height:88px;opacity:1;visibility:visible;transform:none}
  #s02[data-step="2"] .hb-chip{display:none}
  #s02[data-step="2"] .hb-box{flex-basis:calc(50% - 4px)}
  #s02 .hb-core::before,#s02 .hb-core::after{display:none}
  .beat .rv-c{align-self:start;display:none}   /* only the current proof card takes space on a small screen */
  #s03[data-step="1"] .rv-c1,#s03[data-step="2"] .rv-c2,#s03[data-step="3"] .rv-c3,#s03[data-step="4"] .rv-c4{display:grid}
  .beat .rv-shot{max-width:460px;width:100%;justify-self:center}
  .beat .rv-coll{width:100%;max-width:440px;justify-self:center}
  .beat .ai-path li:nth-child(n){--lift:0px}
  .beat .ai-path li+li::before{display:none}
  .rv-dlg[open]{grid-template-columns:minmax(0,1fr);max-height:92vh;overflow:auto}
  .rv-dlg .txt{max-height:none;overflow:visible}
}
@keyframes rvgrowy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:520px){.beat .rv-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .beat.live .rv-strike .w::after,.beat.live .rv-tl::after,.beat.live .rv-tl li::before,#s03 .rv-kpi,#s03 .rv-row,.rv-dlg[open],#s02 .hb-chip i,#s02 .hb-flow line,#s02 .hb-core::before,#s02 .hb-core::after{animation:none!important}
  .beat .rv-swap>.sw,.beat .rv-c,.beat .rv-a,.beat .rv-pic,#s02 .hb-chip,#s02 .hb-box,#s02 .hb-node,#s02 .hb-core,#s02 .hb-x,#s02 .hb-spokes line,#s02 .hb-heads,#s02 .hb-flow line,#s02 .hb-broken line{transition:none!important}
  .beat .rv-a{opacity:1;transform:none}
}

/* ════════ W2 (VEL-CAP-0542): behaviour. Ported from the sample's rv-layer.css (rounds 2 and 3), the tail from "slide 2 · the three stages" on ════════ */
/* ── slide 2 · the three stages as a journey: a track over the hub; the fill and the marker travel; the ground changes with the stage ── */
#s02 .hb-wrap{display:grid;gap:clamp(12px,2svh,22px);justify-items:center;min-width:0}
#s02 .hb{width:min(100%,calc(min(100svh - 330px,480px)*1.35))}
#s02 .hb-track{list-style:none;margin:0;padding:10px 0 0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,calc(min(100svh - 330px,480px)*1.35))}
#s02 .hb-track::before,#s02 .hb-track::after{content:"";position:absolute;left:16.66%;right:16.66%;top:27px;height:3px;border-radius:2px;background:rgba(23,23,23,.14)}
#s02 .hb-track::after{background:var(--sak-gold,#F2A900);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.65,0,.35,1)}
#s02[data-step="2"] .hb-track::after{transform:scaleX(.5)}#s02[data-step="3"] .hb-track::after{transform:scaleX(1)}
#s02 .hb-track li{position:relative;z-index:1;display:flex;justify-content:center}
#s02 .rv .hb-track button,#s02 .hb-track button{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--fg-3);font:600 var(--rv-small,14px)/1.2 Inter,sans-serif;text-align:center}
#s02 .hb-track b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);border:2px solid rgba(23,23,23,.3);color:var(--ink);font-size:15px;font-weight:600;transition:background .45s,border-color .45s,color .45s,transform .45s cubic-bezier(.2,.9,.25,1.3),box-shadow .45s}
#s02 .hb-track button span{font-size:15px;letter-spacing:.01em}
#s02 .hb-track button[aria-current]{color:var(--fg)}
#s02 .hb-track button[aria-current] b{background:var(--sak-gold,#F2A900);border-color:var(--sak-gold,#F2A900);color:#171717;transform:scale(1.18);box-shadow:0 0 0 7px rgba(242,169,0,.22)}
#s02[data-step="2"] .hb-track li:nth-child(1) b,#s02[data-step="3"] .hb-track li:nth-child(-n+2) b{background:var(--sak-plum,#7A1F5B);border-color:var(--sak-plum,#7A1F5B);color:#F7F4ED}
#s02 .hb-track button:hover{color:var(--fg)}
#s02 .hb-track button:focus-visible{outline:3px solid var(--sak-plum,#7A1F5B);outline-offset:4px;border-radius:8px}
/* the ground under the hub: loose (step 1), boxed grey (step 2), a Mulberry glow round the core (step 3); a Gold sweep marks each change */
#s02 .hb::before{content:"";position:absolute;inset:-3% -2%;border-radius:26px;z-index:0;background:transparent;transition:background .8s ease}
#s02[data-step="1"] .hb::before{background:radial-gradient(rgba(23,23,23,.07) 1.2px,transparent 1.4px) 0 0/22px 22px}
#s02[data-step="2"] .hb::before{background:rgba(227,222,210,.5)}
#s02[data-step="3"] .hb::before{background:radial-gradient(circle at 50% 50%,rgba(122,31,91,.16),rgba(122,31,91,.04) 46%,transparent 70%)}
#s02 .hb::after{content:"";position:absolute;top:-3%;bottom:-3%;width:18%;left:-20%;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(242,169,0,.28),transparent);opacity:0}
#s02[data-step="2"] .hb::after{animation:hbsweep2 1s cubic-bezier(.65,0,.35,1) .05s}
#s02[data-step="3"] .hb::after{animation:hbsweep3 1s cubic-bezier(.65,0,.35,1) .05s}
@keyframes hbsweep2{0%{left:-20%;opacity:1}100%{left:104%;opacity:0}}
@keyframes hbsweep3{0%{left:-20%;opacity:1}100%{left:104%;opacity:0}}
/* the headline moves like time passing: the new stage slides in from the right */
#s02 .rv-swap>.sw{transform:translateX(36px)}
#s02[data-step="2"] .rv-swap>.sw1,#s02[data-step="3"] .rv-swap>.sw1,#s02[data-step="3"] .rv-swap>.sw2{transform:translateX(-36px)}
#s02[data-step="1"] .rv-swap>.sw1,#s02[data-step="2"] .rv-swap>.sw2,#s02[data-step="3"] .rv-swap>.sw3{transform:none}
@media (max-width:900px){#s02 .hb-track,#s02 .hb{width:100%}#s02 .hb::before,#s02 .hb::after{display:none}#s02 .hb-track button span{font-size:14px}}
@media (prefers-reduced-motion:reduce){#s02 .hb::after{animation:none!important}#s02 .hb-track::after,#s02 .hb-track b,#s02 .hb::before{transition:none!important}}

/* ── cover: the two buttons the same width and height ── */
.sak .sk-cover .acts{display:inline-grid;grid-template-columns:max-content;grid-auto-rows:1fr;justify-self:start;align-self:end}
.sak .sk-cover .acts .btn{width:100%;justify-content:space-between;box-sizing:border-box}

#s02 .hb-node b{font-size:var(--rv-line)}#s02 .hb-node{width:32%;padding-right:34px}

/* step 2: bigger tool boxes so the problems fit inside them at every desktop width */
#s02 .hb-box{width:38%;height:36%}
#s02[data-step="2"] .hb-chip{transform:scale(.78)}
/* the Pause / Play button of the self-playing hub (its name is the visible word; .is-paused draws the play triangle) */

/* small desktop windows (under about 1200 x 700): the diagram would be too small to read, so slide 2 uses the compact form
   (a list, then the four tools as tags, then the core and a 2 x 2 of parts); same story, text stays at 14 px or more */
@media (min-width:901px) and (max-width:1199px), (min-width:901px) and (max-height:699px){
  #s02 .hb{width:100%;aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
  #s02 .hb::before,#s02 .hb::after,#s02 .hb-lines,#s02 .hb-x,#s02 .hb-core::before,#s02 .hb-core::after{display:none}
  #s02 .hb-track{width:100%}
  #s02 .hb-chip,#s02[data-step] .hb-chip{position:static;transform:none;opacity:1;visibility:visible;transition:none}
  #s02 .hb-chip i{animation:none!important;white-space:normal;padding:6px 12px}
  #s02[data-step="2"] .hb-chip,#s02[data-step="3"] .hb-chip,#s02[data-step="1"] .hb-box,#s02[data-step="3"] .hb-box,#s02 .hb-core,#s02 .hb-node{display:none}
  #s02[data-step="2"] .hb-box{display:flex;align-items:center;position:static;width:auto;height:auto;flex-basis:calc(50% - 4px);padding:16px 12px;opacity:1;visibility:visible;transform:none}
  #s02[data-step="2"] .hb-box span{position:static}
  #s02[data-step="3"] .hb-core{display:grid;position:static;transform:none;opacity:1;flex-basis:100%;width:auto;height:56px;aspect-ratio:auto;border-radius:14px}
  #s02[data-step="3"] .hb-node{display:flex;position:static;width:calc(50% - 4px);min-height:76px;opacity:1;visibility:visible;transform:none}
}

/* ── the launch screen: Skip intro and the Frae mark beside the Saksham lockup (added by next/saksham-loader.js on <html data-nav="v2"> only) ── */
.sk-lo-frae{position:absolute;right:clamp(20px,5.4vw,78px);top:clamp(20px,3.3vw,48px);height:clamp(40px,4.6vw,62px);width:auto;z-index:5}
.sk-skip{-webkit-appearance:none;appearance:none;position:absolute;right:clamp(20px,5.4vw,78px);bottom:clamp(24px,5vh,56px);z-index:6;min-height:44px;margin:0;padding:0 20px;border:2px solid #F7F4ED;border-radius:6px;background:transparent;color:#F7F4ED;font:600 15px/1 Inter,sans-serif;letter-spacing:normal;text-transform:none;cursor:pointer}
.sk-skip:hover{background:#F7F4ED;color:#7A1F5B}
.sk-skip:focus-visible{outline:3px solid #F2A900;outline-offset:3px}
@media (max-width:900px){.sk-lo-frae{height:40px}}

/* ── s06 "Why it pays": the former 'pays' drawer, now a slide of its own. Its struck-through list uses the text's own line-through (the draw-in line of s05 sits between the lines of a
   wrapped item), fading in one item after another; and on a phone it is tightened so that it ends above the bottom arrows (measured on 390x844: 777 px of content in a 699 px slide) ── */
#s06 .rv-strike .w{display:inline;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--accent);text-decoration-skip-ink:none}
#s06 .rv-strike .w::after{display:none}
#s06 .rv-strike li:nth-child(2) .w{--k:1}#s06 .rv-strike li:nth-child(3) .w{--k:2}#s06 .rv-strike li:nth-child(4) .w{--k:3}#s06 .rv-strike li:nth-child(5) .w{--k:4}
#s06.live .rv-strike .w{animation:rvstrikefade .6s ease calc(.9s + var(--k,0)*.35s) both}
@keyframes rvstrikefade{from{text-decoration-color:transparent}}
@media (prefers-reduced-motion:reduce){#s06.live .rv-strike .w{animation:none!important}}
@media (max-width:900px){
  #s06 .rv-split{gap:10px}
  #s06 .rv-copy{gap:6px}
  #s06 .rv-strike{gap:4px;margin-top:0}
  #s06 .rv-strike li{font-size:var(--rv-body);line-height:1.3}
}
