/* Vouch row (Kairos Automations 02), text left · film right. Generated from kairos-automations/vouch-showcase (pan film). */
/* Vouch row (Kairos Automations 02): text left, film right. Text rules = Echo row, re-scoped. */
#vouch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
@media (max-width:900px){#vouch{grid-template-columns:1fr}}
#vouch{--ink:#080808;--paper:#fcfcfc;--mute:#8d8d8d;--line:#262626;--red:#ff2d3f;--blue:#8496F4;
  --sans:'Host Grotesk','Helvetica Neue',Arial,sans-serif;--serif:'Gambetta','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.25,.64,1);--gut:clamp(16px,2.2vw,32px)}
#vouch .txt{max-width:560px}
#vouch .t-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#vouch .e-logo{display:flex;align-items:center;gap:12px}
#vouch .e-logo img{height:22px;filter:invert(1)}
#vouch .e-logo span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
#vouch .h{font-weight:500;text-transform:uppercase;font-size:clamp(34px,3.7vw,62px);line-height:.92;letter-spacing:-.035em;margin-top:28px}
#vouch .h em{font-size:.62em;vertical-align:.22em;margin-right:.08em}
#vouch .intro{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:rgba(252,252,252,.78);margin-top:22px}
#vouch .intro em{color:var(--paper)}
#vouch .caps{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
#vouch .caps li{display:grid;grid-template-columns:1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
#vouch .caps .n{display:none}
/* captions: one closes while the next opens, both on the same in-out curve so the list height glides instead of jumping */
#vouch .caps li>div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)}
#vouch .caps li:hover>div,#vouch .caps li.on>div{grid-template-rows:auto 1fr}
#vouch .caps b{font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;transition:color .6s ease}
#vouch .caps p{font-size:13.5px;color:var(--mute);min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .5s var(--ease)}
#vouch .caps p::before{content:"";display:block;height:2px}
#vouch .caps li:hover b,#vouch .caps li.on b{color:var(--red)}
#vouch .caps li:hover p,#vouch .caps li.on p{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .8s var(--ease) .2s}
/* the film's loop restart freezes transitions for two frames; the captions keep theirs so 05 → 01 glides too */
#vouch.noanim .caps li>div{transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)!important}
#vouch.noanim .caps b{transition:color .6s ease!important}
#vouch.noanim .caps p{transition:opacity .35s ease,transform .5s var(--ease)!important}
#vouch .txt{order:-1}
#vouch .e-logo img{height:18px}
#vouch .txt .btn-line{margin-top:30px}
#vouch .caps{padding:0}
@media (max-width:900px){#vouch .txt{order:0}}
#vouch .media{position:relative}
#vouch .frame{position:relative;width:100%;aspect-ratio:5/4;container-type:inline-size;isolation:isolate}
@media (prefers-reduced-motion:reduce){#vouch *{transition:none!important;animation:none!important}}

/* ============================================================
   Vouch films (A / B / C). Everything sized in cqw of #vframe (5:4),
   scoped under #vouch. Same materials as the Echo film: dark glass
   panels, iPhone, a flow of light; Vouch indigo instead of Echo blue.
   ============================================================ */
#vouch{--acc:#7472EC;--acc-2:#5E5CE6;--acc-soft:rgba(116,114,236,.16);--gy:#FBBC04;--gb:#1A73E8;
  --pan:#131418;--pan-l:#2a2b31;--pan-t:#f2f2ef;--pan-m:#9a9ca3;--spring:cubic-bezier(.34,1.25,.64,1)}
#vouch .par{position:absolute;inset:0;transition:transform 1.6s var(--ease)}
#vouch .stars{display:inline-flex;gap:.25cqw}
#vouch .stars svg{width:1em;height:1em;display:block}
#vouch .stars .off{opacity:.22}

/* ---------- shared: phone (mirrored: sits on the right, turned toward the centre) ---------- */
#vouch .phone,#vouch .pside{transform:perspective(150cqw) rotateY(-8deg) rotateX(1.5deg);transform-origin:0% 50%}
#vouch .pside{position:absolute;width:30cqw;height:61cqw;border-radius:5cqw;z-index:2;
  background:linear-gradient(270deg,#55565c 0%,#2a2b2f 9%,#18181b 30%,#1d1e21 100%);box-shadow:0 4cqw 9cqw rgba(0,0,0,.75),inset -.12cqw 0 0 rgba(255,255,255,.18)}
#vouch .pside i{position:absolute;right:-.32cqw;width:.55cqw;border-radius:.3cqw;background:linear-gradient(270deg,#6a6b71,#2c2d31)}
#vouch .pside i:nth-child(1){top:14cqw;height:6cqw}
#vouch .phone{position:absolute;width:30cqw;height:61cqw;border-radius:5cqw;background:#050505;padding:1cqw;box-shadow:inset 0 0 0 .22cqw #3a3b40,inset 0 0 0 .32cqw #0b0b0c,inset .1cqw .1cqw 0 .3cqw rgba(255,255,255,.07);z-index:3}
#vouch .scr{position:relative;height:100%;border-radius:4.1cqw;overflow:hidden;background:#000;color:#f4f4f4}
#vouch .isl{position:absolute;top:1.2cqw;left:50%;transform:translateX(-50%);width:9.4cqw;height:2.7cqw;border-radius:1.5cqw;background:#000;z-index:30}
#vouch .panel{position:absolute;border-radius:2.4cqw;background:var(--pan);border:.12cqw solid var(--pan-l);box-shadow:0 5cqw 12cqw rgba(0,0,0,.6);color:var(--pan-t);z-index:2}
#vouch .v-logo{height:1.6cqw;filter:invert(1) brightness(.95);display:block}
@keyframes v-floatA{0%,100%{translate:0 0}50%{translate:0 -1.1cqw}}
@keyframes v-floatB{0%,100%{translate:0 -.5cqw}50%{translate:0 .7cqw}}
#vouch .vshade{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(1.2cqw);pointer-events:none}

/* messages screen */
#vouch .msgs{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:5cqw}
#vouch .mh{text-align:center;padding:.6cqw 0 1.2cqw;font-size:1.4cqw;color:rgba(255,255,255,.5)}
#vouch .mh .ma{width:4.4cqw;height:4.4cqw;border-radius:50%;margin:0 auto .6cqw;background:#2b2b31;display:grid;place-items:center;font-size:1.5cqw;font-weight:600;color:#d8d8de}
#vouch .mh b{display:block;font-size:1.6cqw;color:#f4f4f4;font-weight:500}
#vouch .ml{flex:1;padding:1cqw 1.2cqw 3cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:.7cqw}
#vouch .bub{max-width:86%;padding:1cqw 1.4cqw;border-radius:2.2cqw;border-bottom-left-radius:.8cqw;font-size:1.72cqw;line-height:1.36;background:#2a2a2d;align-self:flex-start;transform-origin:bottom left;transition:opacity .55s var(--ease),transform .7s var(--spring)}
#vouch .bub.hide{opacity:0;transform:scale(.6) translateY(1.5cqw)}
#vouch .bub u{text-decoration:none;color:#6fb6ff;border-radius:.4cqw;transition:background .3s}
#vouch .bub u.tap{background:rgba(111,182,255,.28)}
#vouch .when{font-size:1.3cqw;color:rgba(255,255,255,.4);text-align:center;margin-bottom:.6cqw}

/* Google review sheet (light, like the real one) */
#vouch .gsheet{position:absolute;inset:0;z-index:6;background:#fff;color:#202124;padding:6.2cqw 2cqw 2cqw;display:flex;flex-direction:column;transform:translateY(102%);transition:transform .9s cubic-bezier(.32,.72,0,1);font-family:Arial,'Helvetica Neue',sans-serif}
#vouch .gsheet.on{transform:none}
#vouch .g-top{display:flex;align-items:center;gap:1cqw;font-size:1.45cqw;color:#5f6368}
#vouch .g-top .x{font-size:2cqw;line-height:1;color:#5f6368}
#vouch .g-biz{font-size:2.1cqw;color:#202124;margin-top:2.2cqw;text-align:center}
#vouch .g-pub{font-size:1.2cqw;color:#5f6368;text-align:center;margin-top:.4cqw}
#vouch .g-who{display:flex;align-items:center;gap:1cqw;margin-top:2.4cqw;font-size:1.45cqw}
#vouch .g-who i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#7b5ea7;color:#fff;font-style:normal;display:grid;place-items:center;font-size:1.4cqw}
#vouch .g-stars{display:flex;justify-content:center;gap:1.1cqw;margin-top:2.6cqw;color:#dadce0}
#vouch .g-stars svg{width:3.6cqw;height:3.6cqw;transition:color .25s,transform .45s var(--spring)}
#vouch .g-stars svg.on{color:var(--gy);transform:scale(1.12)}
#vouch .g-stars svg.on.set{transform:none}
#vouch .g-text{margin-top:2.6cqw;border:.15cqw solid #dadce0;border-radius:.8cqw;padding:1.2cqw;font-size:1.55cqw;line-height:1.4;min-height:11cqw;color:#202124;transition:border-color .3s}
#vouch .g-text.focus{border-color:var(--gb)}
#vouch .g-text .ph{color:#80868b}
#vouch .g-text .cur{display:inline-block;width:.16cqw;height:1.8cqw;background:var(--gb);vertical-align:-.3cqw;animation:v-bl 1s infinite}
@keyframes v-bl{50%{opacity:0}}
#vouch .g-post{margin-top:auto;align-self:flex-end;background:var(--gb);color:#fff;font-size:1.5cqw;padding:1cqw 2.6cqw;border-radius:2cqw;transition:transform .3s var(--spring),opacity .3s}
#vouch .g-post.dim{opacity:.4}
#vouch .g-post.press{transform:scale(.9)}
#vouch .g-done{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqw;font-size:1.8cqw;color:#202124;opacity:0;transition:opacity .5s}
#vouch .g-done.on{opacity:1}
#vouch .g-done b{width:6cqw;height:6cqw;border-radius:50%;background:#1e8e3e;display:grid;place-items:center;transform:scale(.4);transition:transform .7s var(--spring)}
#vouch .g-done.on b{transform:none}
#vouch .g-done b svg{width:3cqw;height:3cqw}

/* flow of light */
#vouch .flow{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible}
#vouch .flow path.trail{fill:none;stroke-linecap:round}
#vouch .flow path.glow{fill:none;stroke:rgba(116,114,236,.38);stroke-linecap:round;filter:blur(4px)}
#vouch .flow circle.dot{fill:#eeeeff}
#vouch .flow circle.halo{fill:rgba(116,114,236,.4);filter:blur(5px)}
#vouch .land{position:absolute;z-index:5;width:1px;height:1px;pointer-events:none}
#vouch .land::before{content:"";position:absolute;left:-3cqw;top:-3cqw;width:6cqw;height:6cqw;border-radius:50%;background:radial-gradient(circle,rgba(180,178,255,.75),transparent 65%);opacity:0;transform:scale(.3)}
#vouch .land.go::before{animation:v-land 1.1s var(--ease)}
@keyframes v-land{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.2)}}

/* dashboard pieces */
#vouch .d-top{display:flex;align-items:center;gap:1.2cqw}
#vouch .d-top span{margin-left:auto;font-size:1.5cqw;color:var(--pan-m)}
#vouch .bal{display:flex;align-items:baseline;gap:1.4cqw}
#vouch .bal-n{font-weight:600;letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums;display:inline-block}
#vouch .bal-n.pop{animation:v-pop .7s var(--spring)}
@keyframes v-pop{0%{transform:translateY(25%);opacity:.2}100%{transform:none;opacity:1}}
#vouch .sub{font-size:1.55cqw;color:var(--pan-m)}
#vouch .chg{font-size:1.55cqw;color:var(--acc);font-weight:500}
#vouch .rv{display:grid;grid-template-columns:4.2cqw 1fr auto;gap:1.3cqw;align-items:center;padding:1.3cqw 0;border-bottom:.12cqw solid #26272c;position:relative;transition:max-height .9s var(--ease),opacity .7s,padding .9s var(--ease),background .9s,box-shadow 1s;max-height:16cqw}
#vouch .rv .a{width:4.2cqw;height:4.2cqw;border-radius:50%;background:#24252b;display:grid;place-items:center;font-size:1.4cqw;font-weight:600;color:#b9bbc2}
#vouch .rv .n{font-size:1.75cqw;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:1cqw}
#vouch .rv .n .stars{font-size:1.25cqw;color:#e8e8ee}
#vouch .rv .t{font-size:1.45cqw;color:var(--pan-m);margin-top:.15cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28cqw}
#vouch .chip{font-size:1.3cqw;padding:.45cqw 1cqw;border-radius:2cqw;display:flex;align-items:center;gap:.6cqw;white-space:nowrap;background:#1c1d22;color:#b9bbc2;transition:background .5s,color .5s}
#vouch .chip::before{content:"";width:.75cqw;height:.75cqw;border-radius:50%;background:var(--c,var(--acc))}
#vouch .chip.open{--c:#c7a36c}
#vouch .rv.new{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;border-bottom-color:transparent}
#vouch .rv.lit{background:linear-gradient(270deg,rgba(116,114,236,.16),rgba(116,114,236,.03));box-shadow:inset -.3cqw 0 0 var(--acc)}
#vouch .rv.lit .a{background:rgba(116,114,236,.24);color:#d4d3ff}
#vouch .reply{overflow:hidden;max-height:0;opacity:0;transition:max-height .9s var(--ease),opacity .6s,margin .9s var(--ease)}
#vouch .reply.on{max-height:20cqw;opacity:1;margin:1.2cqw 0 .4cqw}
#vouch .reply .lb{font-size:1.25cqw;color:var(--pan-m);display:flex;align-items:center;gap:.6cqw}
#vouch .reply .lb svg{width:1.4cqw;height:1.4cqw;color:var(--acc)}
#vouch .reply .box{margin-top:.7cqw;border-radius:1.2cqw;background:#1b1c21;border:.12cqw solid #2c2d34;padding:1.1cqw 1.3cqw;font-size:1.5cqw;line-height:1.42;min-height:6.4cqw;transition:border-color .4s}
#vouch .reply .box.focus{border-color:rgba(116,114,236,.6)}
#vouch .reply .box .cur{display:inline-block;width:.16cqw;height:1.7cqw;background:var(--acc);vertical-align:-.3cqw;animation:v-bl 1s infinite}
#vouch .reply .act{display:flex;justify-content:flex-end;margin-top:.9cqw}
#vouch .pub{font-size:1.35cqw;font-weight:500;background:var(--acc-2);color:#fff;padding:.75cqw 1.8cqw;border-radius:2cqw;transition:transform .3s var(--spring),background .4s}
#vouch .pub.press{transform:scale(.9)}
#vouch .pub.done{background:#1f6b45}


/* impact panel */
#vouch .imp{display:grid;grid-template-columns:1fr 1fr;gap:2.4em;color:var(--pan-t)}
#vouch .imp h5{font-size:1.3em;font-weight:500;color:var(--pan-m);margin-bottom:1em}
#vouch .imp .ihero .lb{font-size:1.3em;color:var(--pan-m)}
#vouch .imp .bal{margin-top:.4em}
#vouch .imp .bal-n{font-size:5.6em}
#vouch .imp .bal .stars{font-size:1.6em;color:#f2f2ef}
#vouch .imp .chg{font-size:1.35em;margin-top:.5em;font-variant-numeric:tabular-nums}
#vouch .imp .chg span{color:var(--pan-m);font-weight:400}
#vouch .bars{display:flex;align-items:flex-end;gap:.7em;height:8.4em;margin-top:2.2em;border-bottom:.1em solid #2a2b31}
#vouch .bars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
#vouch .bars i{display:block;width:100%;border-radius:.45em .45em 0 0;background:#2e2f36;transition:height 1.1s var(--spring),background .6s}
#vouch .bars>div.post i{background:var(--acc-2)}
#vouch .bars>div.grow i{background:var(--acc)}
#vouch .bars b{position:absolute;bottom:calc(var(--h) + .4em);font-size:1.05em;font-weight:500;color:#d8d8de;transition:bottom 1.1s var(--spring)}
#vouch .bars span{position:absolute;top:calc(100% + .5em);font-size:1em;color:#6d6f76}
#vouch .rank{position:relative;height:calc(4 * 3.7em)}
#vouch .rk{position:absolute;left:0;right:0;top:calc(var(--p) * 3.7em);height:3.7em;display:grid;grid-template-columns:1.6em 1fr 5.4em 2.6em;align-items:center;gap:.8em;font-size:1em;border-bottom:.1em solid #24252b;transition:top .9s cubic-bezier(.65,0,.35,1),background .8s}
#vouch .rk .no{font-size:1.25em;color:#6d6f76;font-variant-numeric:tabular-nums}
#vouch .rk .nm{font-size:1.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vouch .rk .nm small{font-size:.8em;color:#6d6f76;margin-left:.4em}
#vouch .rk .br{height:.45em;border-radius:.3em;background:#26272d;overflow:hidden}
#vouch .rk .br i{display:block;height:100%;border-radius:.3em;background:#55575f;transition:width 1s var(--ease)}
#vouch .rk .rt{font-size:1.35em;text-align:right;font-variant-numeric:tabular-nums}
#vouch .rk.you .nm,#vouch .rk.you .rt{font-weight:600}
#vouch .rk.you .br i{background:var(--acc)}
#vouch .rk.you.lit{background:linear-gradient(90deg,rgba(116,114,236,.18),transparent)}
#vouch .rk .up{color:#58c48a;font-size:.85em;margin-left:.4em;opacity:0;transition:opacity .5s}
#vouch .rk.lit .up{opacity:1}
#vouch .imp.compact{grid-template-columns:1fr;gap:1.8em}
#vouch .imp.compact .bars{display:none}

/* website with the review strip */
#vouch .site2{border-radius:1.4em;overflow:hidden;background:#f4f2ee;color:#1b1b1b;display:flex;flex-direction:column}
#vouch .site2 .bar{height:3em;flex:none;display:flex;align-items:center;gap:.6em;padding:0 1.2em;background:#e4e1dc}
#vouch .site2 .bar i{width:.9em;height:.9em;border-radius:50%;background:#c9c5bf}
#vouch .site2 .bar span{margin:0 auto;font-size:1.1em;color:#6b6762;background:#f4f2ee;padding:.25em 2.2em;border-radius:.7em;transform:translateX(-1.6em)}
#vouch .site2 .pg{flex:1;padding:2em 2.4em 2.2em;display:flex;flex-direction:column}
#vouch .site2 .nav{display:flex;align-items:center;gap:1.4em;font-size:1.05em;color:#6b6762}
#vouch .site2 .nav b{font-size:1.35em;color:#1b1b1b;font-weight:600;margin-right:auto;letter-spacing:-.02em}
#vouch .site2 .vhl{font-size:3.4em;line-height:.98;font-weight:600;letter-spacing:-.04em;margin-top:.8em}
#vouch .site2 .vhl em{font-weight:300}
#vouch .site2 .wl{margin-top:auto;padding-top:2em;display:flex;gap:.9em;align-items:flex-start}
#vouch .site2 .ws{flex:none;width:9.6em;display:flex;flex-direction:column;gap:.35em;padding-top:.6em}
#vouch .site2 .ws .bal-n{font-size:3.8em;color:#1b1b1b}
#vouch .site2 .ws .stars{font-size:1.15em;color:#1b1b1b}
#vouch .site2 .ws .sub{font-size:1em;color:#6b6762;font-variant-numeric:tabular-nums}
#vouch .site2 .wc{flex:none;width:12em;min-height:11em;overflow:hidden;background:#fff;border-radius:1.1em;padding:1em 1.1em;display:flex;flex-direction:column;gap:.55em;box-shadow:0 .2em .8em rgba(0,0,0,.05);transition:width .9s var(--ease),opacity .6s,padding .9s var(--ease),margin .9s var(--ease),box-shadow 1s}
#vouch .site2 .wc>*{width:9.8em}
#vouch .site2 .wc .stars{font-size:1em;color:#1b1b1b}
#vouch .site2 .wc p{font-size:1.05em;line-height:1.36;flex:1}
#vouch .site2 .wc span{font-size:.95em;color:#8a857f}
#vouch .site2 .wc.new{width:0;padding-left:0;padding-right:0;opacity:0;margin-left:-.9em}
#vouch .site2 .wc.lit{box-shadow:0 0 0 .22em rgba(116,114,236,.6),0 1em 3em rgba(116,114,236,.28)}
#vouch .site2 .chipw{align-self:flex-start;margin-bottom:.8em;font-size:1em;color:#6b6762;display:flex;align-items:center;gap:.5em}
#vouch .site2 .chipw::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#3fa36d}


/* ============================================================
   The film: three scenes on one track, the camera pans from scene to scene:
   1 automatic request → phone · 2 impact updating · 3 wall → reply → website widget
   ============================================================ */
#vouch .vstage{position:absolute;inset:0}
#vouch .scene{position:absolute;inset:0}
/* x2: pan — one long track, the camera slides from scene to scene */
#vouch .x2 .track{position:absolute;top:0;left:0;height:100%;width:324cqw;transition:transform 1.5s cubic-bezier(.65,0,.35,1)}
#vouch .x2 .scene{width:100cqw;transition:opacity .9s var(--ease)}
#vouch .x2 .scene:nth-child(2){left:112cqw}
#vouch .x2 .scene:nth-child(3){left:224cqw}
/* only the current scene is visible; nothing sticks out of the frame sideways while panning */
#vouch .x2 .scene:not(.on){opacity:0}
#vouch .media.x2wrap{clip-path:inset(-12cqw 0 -12cqw 0)}
/* ---------- scene 1: the automation card + the phone ---------- */
#vouch .s1 .autoc{left:3cqw;top:17cqw;width:52cqw;padding:2.4cqw 2.6cqw;font-size:1.05cqw;transform:perspective(170cqw) rotateY(7deg) rotateX(1.5deg);transform-origin:100% 50%;transition:box-shadow .8s var(--ease)}
#vouch .s1 .autoc.fired{box-shadow:0 0 0 .2em rgba(116,114,236,.55),0 0 6em rgba(116,114,236,.35),0 5cqw 12cqw rgba(0,0,0,.6)}
#vouch .s1 .autoc .d-top span{font-size:1.4em}
#vouch .s1 .step{display:grid;grid-template-columns:4.6em 1fr auto;gap:1.4em;align-items:center;padding:1.6em 0;opacity:.32;transition:opacity .6s}
#vouch .s1 .step.on{opacity:1}
#vouch .s1 .step .ic{width:4.6em;height:4.6em;border-radius:50%;display:grid;place-items:center;background:#24252b;font-size:1.3em;font-weight:600;color:#c8c9cf;transition:background .5s,color .5s}
#vouch .s1 .step .ic svg{width:2em;height:2em}
#vouch .s1 .step.on.done .ic{background:#1f6b45;color:#fff}
#vouch .s1 .step.on.sent .ic{background:var(--acc-2);color:#fff}
#vouch .s1 .step b{display:block;font-size:1.75em;font-weight:500;letter-spacing:-.015em}
#vouch .s1 .step span{display:block;font-size:1.3em;color:var(--pan-m);margin-top:.15em}
#vouch .s1 .step time{font-size:1.4em;color:var(--pan-m);text-align:right;font-variant-numeric:tabular-nums}
#vouch .s1 .step .tag{display:inline-block;margin-top:.5em;font-size:1.1em;color:var(--acc);background:var(--acc-soft);padding:.3em .9em;border-radius:2em}
#vouch .s1 .wait{display:grid;grid-template-columns:4.6em 1fr;gap:1.4em;align-items:center}
#vouch .s1 .wait .ln{justify-self:center;width:.2em;height:5.6em;border-radius:.1em;background:#2c2d34;overflow:hidden}
#vouch .s1 .wait .ln i{display:block;width:100%;height:0;background:linear-gradient(#3fa36d,var(--acc))}
#vouch .s1 .wait span{font-size:1.3em;color:var(--pan-m);display:flex;align-items:center;gap:.6em}
#vouch .s1 .wait span svg{width:1.3em;height:1.3em}
#vouch .s1 .phone{left:65cqw;top:9cqw}
#vouch .s1 .pside{left:65.6cqw;top:9.15cqw}
#vouch .s1 .vshade.p{left:66cqw;top:70.5cqw;width:24cqw;height:3.4cqw}
#vouch .s1 .vshade.d{left:8cqw;top:66cqw;width:44cqw;height:3.4cqw}

/* ---------- scene 2: the impact dashboard, full frame ---------- */
#vouch .s2 .dash2{left:4cqw;top:9cqw;width:92cqw;height:56cqw;padding:2.6cqw 3cqw;font-size:1.05cqw;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto 1fr;gap:2.4em 3.4em;transform:perspective(200cqw) rotateX(3deg);transform-origin:50% 100%}
#vouch .s2 .d-top{grid-column:1/-1}
#vouch .s2 .d-top span{font-size:1.4em}
#vouch .s2 .ihero .lb{font-size:1.35em;color:var(--pan-m)}
#vouch .s2 .ihero .bal-n{font-size:8em}
#vouch .s2 .ihero .bal .stars{font-size:2.1em;color:#f2f2ef}
#vouch .s2 .ihero .chg{font-size:1.45em;margin-top:.5em}
#vouch .s2 .ihero .chg span{color:var(--pan-m);font-weight:400}
#vouch .s2 .spark2{grid-column:1;width:100%;height:9em;overflow:visible;align-self:end}
#vouch .s2 .rankw h5,#vouch .s2 .barsw h5{font-size:1.35em;font-weight:500;color:var(--pan-m);margin-bottom:1em}
#vouch .s2 .rankw{grid-column:2;grid-row:2/4}
#vouch .s2 .rank{height:calc(4 * 4.4em)}
#vouch .s2 .rk{top:calc(var(--p) * 4.4em);height:4.4em}
#vouch .s2 .rk .nm,#vouch .s2 .rk .rt{font-size:1.55em}
#vouch .s2 .figs2{display:grid;grid-template-columns:1fr 1fr;margin-top:2.4em;border-top:.1em solid #26272c}
#vouch .s2 .fig2{padding-top:1.6em}
#vouch .s2 .fig2 .lb{font-size:1.25em;color:var(--pan-m)}
#vouch .s2 .fig2 .v{font-size:3.4em;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:.15em;display:inline-block}
#vouch .s2 .fig2 .v small{font-size:.55em;font-weight:500}
#vouch .s2 .fig2 .v.pop{animation:v-pop .7s var(--spring)}
#vouch .s2 .barsw{grid-column:1;grid-row:3}
#vouch .s2 .bars{height:9.5em;margin-top:0}
#vouch .s2 .toast2{position:absolute;right:3cqw;top:4cqw;z-index:6;font-size:1.05cqw;display:grid;grid-template-columns:4.2em 1fr;gap:1.2em;align-items:center;padding:1.2em 1.8em 1.2em 1.2em;border-radius:2.4em;background:rgba(44,44,50,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:.1em solid rgba(255,255,255,.1);box-shadow:0 2em 5em rgba(0,0,0,.55);color:#f2f2ef;opacity:0;transform:translateY(-3em) scale(.95);transition:opacity .6s var(--ease),transform .9s var(--spring)}
#vouch .s2 .toast2.on{opacity:1;transform:none}
#vouch .s2 .toast2 .ic{width:4.2em;height:4.2em;border-radius:1.1em;background:#fff;display:grid;place-items:center}
#vouch .s2 .toast2 .ic svg{width:2.2em;height:2.2em}
#vouch .s2 .toast2 b{display:flex;align-items:center;gap:.6em;font-size:1.55em;font-weight:500}
#vouch .s2 .toast2 b .stars{color:var(--gy);font-size:.8em}
#vouch .s2 .toast2 div>span{display:block;font-size:1.3em;color:var(--pan-m);margin-top:.15em}

/* ---------- scene 3: the wall (reply + pick) and the website ---------- */
#vouch .s3 .wall3{left:2cqw;top:6cqw;width:50cqw;padding:2.2cqw 2.2cqw 2cqw;font-size:1cqw;transform:perspective(170cqw) rotateY(7deg) rotateX(1.5deg);transform-origin:100% 50%}
#vouch .s3 .wall3 .d-top span{font-size:1.4em}
#vouch .s3 .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:1.2em;margin-top:2em;align-items:start}
#vouch .s3 .col{display:flex;flex-direction:column;gap:1.2em}
#vouch .s3 .rc{position:relative;background:#1b1c21;border:.12em solid #2a2b31;border-radius:1.5em;padding:1.3em 1.4em;transition:border-color .8s,box-shadow .8s}
#vouch .s3 .rc .who{display:flex;align-items:center;gap:.8em;font-size:1.35em;font-weight:500}
#vouch .s3 .rc .who i{width:2.4em;height:2.4em;border-radius:50%;background:#2b2c33;font-style:normal;display:grid;place-items:center;font-size:.75em;color:#c3c4cb}
#vouch .s3 .rc .who time{margin-left:auto;font-size:.8em;color:var(--pan-m);font-weight:400}
#vouch .s3 .rc .stars{font-size:1.15em;color:#e8e8ee;margin-top:.8em}
#vouch .s3 .rc p{font-size:1.3em;line-height:1.4;color:#d9d9de;margin-top:.5em}
#vouch .s3 .rc .rp{margin-top:1em;padding-top:.9em;border-top:.1em solid #2a2b31;font-size:1.15em;color:var(--pan-m);line-height:1.4}
#vouch .s3 .rc .rp b{display:block;color:#e8e8ee;font-weight:500;font-size:.95em;margin-bottom:.2em}
#vouch .s3 .rc.hero3{border-color:rgba(116,114,236,.6);box-shadow:0 0 3em rgba(116,114,236,.22)}
#vouch .s3 .rc.hero3 .who{font-size:1.5em}
#vouch .s3 .rc.hero3 p{font-size:1.45em}
#vouch .s3 .open3{margin-top:1em;padding-top:.9em;border-top:.1em solid #2a2b31;font-size:1.2em;color:var(--pan-m);display:flex;align-items:center;gap:.6em}
#vouch .s3 .open3::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--acc)}
#vouch .s3 .draft{overflow:hidden;max-height:0;opacity:0;transition:max-height 1s var(--ease),opacity .6s,margin 1s var(--ease)}
#vouch .s3 .draft.on{max-height:30em;opacity:1;margin-top:1.1em}
#vouch .s3 .draft .lb{font-size:1.15em;color:var(--pan-m);display:flex;align-items:center;gap:.5em}
#vouch .s3 .draft .lb svg{width:1.3em;height:1.3em;color:var(--acc)}
#vouch .s3 .draft .box{margin-top:.6em;border-radius:1.1em;background:#14151a;border:.12em solid rgba(116,114,236,.5);padding:1em 1.2em;font-size:1.3em;line-height:1.42;min-height:5.2em}
#vouch .s3 .draft .box .cur{display:inline-block;width:.12em;height:1.2em;background:var(--acc);vertical-align:-.2em;animation:v-bl 1s infinite}
#vouch .s3 .acts{display:flex;align-items:center;gap:.8em;margin-top:1em}
#vouch .s3 .acts .pub{font-size:1.2em}
#vouch .s3 .addw{display:flex;align-items:center;gap:.6em;font-size:1.2em;color:var(--pan-m);margin-left:auto;padding:.5em 1em;border-radius:2em;background:#24252b;transition:background .5s,color .5s,opacity .5s,transform .4s var(--spring)}
#vouch .s3 .addw i{width:1.4em;height:1.4em;border-radius:.4em;border:.12em solid #5d5e66;display:grid;place-items:center;transition:background .3s,border-color .3s}
#vouch .s3 .addw i svg{width:.9em;height:.9em;opacity:0}
#vouch .s3 .addw.on{background:var(--acc-soft);color:#d4d3ff}
#vouch .s3 .addw.on i{background:var(--acc-2);border-color:var(--acc-2)}
#vouch .s3 .addw.on i svg{opacity:1}
#vouch .s3 .addw.press{transform:scale(.92)}
#vouch .s3 .addw.hide{opacity:0}
#vouch .s3 .vweb{position:absolute;left:56cqw;top:15cqw;width:42cqw;height:52cqw;font-size:.92cqw;z-index:2;transform:perspective(150cqw) rotateY(-8deg) rotateX(1.5deg);transform-origin:0% 50%;box-shadow:0 4cqw 10cqw rgba(0,0,0,.6);border-radius:1.4em}
#vouch .s3 .vweb .site2{height:100%}
#vouch .s3 .vweb .vhl{font-size:3.1em}
#vouch .s3 .vweb .wl{flex-wrap:wrap}
#vouch .s3 .vweb .ws{width:100%;flex-direction:row;align-items:baseline;gap:.8em;padding:0}
#vouch .s3 .vweb .ws .bal-n{font-size:3.2em}
#vouch .s3 .vweb .wc{width:13em}
#vouch .s3 .vweb .wc.new{width:0}
#vouch .s3 .vshade.d{left:7cqw;top:74cqw;width:42cqw;height:3.4cqw}
#vouch .s3 .vshade.p{left:60cqw;top:71cqw;width:36cqw;height:3cqw}
#vouch .s3 .open3[hidden]{display:none}
#vouch .s3 .vweb{top:19cqw;height:42cqw}
#vouch .s1 .step .tag{font-size:1.3em;padding:.35em 1em}
/* final spacing */
#vouch .s2 .dash2{top:12cqw;height:55cqw}
#vouch .s2 .toast2{top:2.5cqw;right:4cqw}
#vouch .s3 .cols{grid-template-columns:1.45fr 1fr}
#vouch .s3 .acts .pub,#vouch .s3 .addw{white-space:nowrap}
#vouch .s3 .addw{font-size:1.1em}

/* fixes 2026-10-07: no endless float on the tilted panels (Chrome rasterised them at low scale = blurry);
   circles get their own column in the automation card; ranking rows get side padding so the numbers breathe */
#vouch .s1 .step{grid-template-columns:6em 1fr auto;gap:1.8em}
#vouch .s1 .wait{grid-template-columns:6em 1fr;gap:1.8em}
#vouch .s2 .rk{grid-template-columns:2.2em 1fr 5.4em 3em;padding:0 1em;border-radius:.6em}
#vouch .s2 .rk .no{font-size:1.4em;color:#8a8c93}

/* window: same panel as the Echo film (rounded, soft dark ground, hairline edge) */
#vouch .media.x2wrap{clip-path:none}
#vouch .frame{overflow:hidden;border-radius:2.4cqw;background:radial-gradient(60cqw 50cqw at 50% 46%,#16171b,#08080a 72%);box-shadow:inset 0 0 0 .12cqw #1d1e22}
#vouch .frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .12cqw #1d1e22;pointer-events:none;z-index:80}
#vouch .vwin{position:absolute;inset:0;transform:scale(.9);transform-origin:50% 50%}