/* Refervia landing-page product demos (rv-demos.js renders into [data-rv-demo] mounts).
 * Mirrors the real dashboard (components/dashboard/**): Referral Desk, referral popup
 * with the stage tracker, Team Referral Queue, partner list, notifications, Insights.
 * Every demo has a fixed height per breakpoint so nothing on the page shifts while it
 * plays. Sample data only. Static end state under prefers-reduced-motion. */

.rvdm{--navy:#0F1F3D;--deep:#021646;--teal:#00C7A7;--success:#00997D;--brand:#2D6FE8;--light:#F4F6F9;
  --slate:#5A6B85;--muted:#7A879C;--line:#E1E6EF;--warn:#E0A030;--danger:#E0453A;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--navy);text-align:left;line-height:1.35;-webkit-font-smoothing:antialiased;position:relative}
.rvdm *,.rvdm *::before,.rvdm *::after{box-sizing:border-box}
.rvdm [hidden]{display:none!important}
.rvdm svg{display:block}
.rvdm .num{font-variant-numeric:tabular-nums}
.rvdm .ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-instant,.rvdm-instant *{transition:none!important;animation:none!important}

/* ---------- shared atoms ---------- */
.rvdm .pill{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;line-height:1.3;transition:background-color .35s ease,color .35s ease}
.rvdm .pill.info{background:rgba(45,111,232,.10);color:var(--brand)}
.rvdm .pill.good{background:rgba(0,199,167,.13);color:var(--success)}
.rvdm .pill.warn{background:rgba(224,160,48,.15);color:#8A5A00}
.rvdm .pill.bad{background:rgba(224,69,58,.10);color:var(--danger)}
.rvdm .pill.neutral{background:rgba(15,31,61,.06);color:var(--slate)}
.rvdm .pill.solid{background:var(--success);color:#fff}
.rvdm .io{flex:none;border-radius:999px;padding:2px 7px;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.rvdm .io.in{background:rgba(0,199,167,.11);color:var(--success)}
.rvdm .io.out{background:rgba(45,111,232,.10);color:var(--brand)}
.rvdm .av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.02em}
.rvdm .av.sm{width:26px;height:26px;font-size:9.5px}
.rvdm .av.c0{background:linear-gradient(135deg,#2D6FE8,#669bf5)}
.rvdm .av.c1{background:linear-gradient(135deg,#00C7A7,#0fae90)}
.rvdm .av.c2{background:linear-gradient(135deg,#0F1F3D,#3a4f78)}
.rvdm .av.c3{background:linear-gradient(135deg,#E0A030,#efbf73)}
.rvdm .av.c4{background:linear-gradient(135deg,#5A6B85,#8695ad)}
/* Sample people (build list N2): a member's photo, or their business logo when
   they have no photo, in place of the initials (PEOPLE in rv-demos.js). */
.rvdm .av.av-pic{background:#E9EEF5;overflow:hidden}
.rvdm .av.av-logo{background:#fff;overflow:hidden}
.rvdm .av.av-pic img,.rvdm .av.av-logo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.rvdm .av.av-pic img{outline:1px solid rgba(15,31,61,.08);outline-offset:-1px}
.rvdm .card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px rgba(15,31,61,.06)}
.rvdm .cap{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rvdm .ic{width:16px;height:16px;flex:none}

/* pointer + tap ripple */
.rvdm .cur{position:absolute;left:0;top:0;z-index:40;width:22px;height:22px;pointer-events:none;opacity:0;
  transform:translate(var(--x,60%),var(--y,60%));transition:transform .8s var(--ease),opacity .3s ease;filter:drop-shadow(0 4px 8px rgba(15,31,61,.28))}
.rvdm .cur.on{opacity:1}
.rvdm .cur svg{width:22px;height:22px;transition:transform .18s ease}
.rvdm .cur.down svg{transform:scale(.8)}
.rvdm .cur i{position:absolute;left:2px;top:2px;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(45,111,232,.35);transform:scale(.2);opacity:0}
.rvdm .cur.down i{animation:rvdTap .55s ease-out}
@keyframes rvdTap{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.5)}}

/* push notification (NotificationToaster look) */
.rvdm .push{position:absolute;z-index:30;left:50%;top:12px;width:min(360px,calc(100% - 24px));display:flex;align-items:flex-start;gap:10px;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:0 18px 40px rgba(15,31,61,.16);
  transform:translate(-50%,-140%);opacity:0;transition:transform .55s var(--spring),opacity .35s ease;pointer-events:none}
.rvdm .push.on{transform:translate(-50%,0);opacity:1}
.rvdm .push .pi{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(45,111,232,.10);color:var(--brand)}
.rvdm .push .pi.good{background:rgba(0,199,167,.13);color:var(--success)}
.rvdm .push b{display:block;font-size:13px;font-weight:800;color:var(--navy)}
.rvdm .push span{display:block;font-size:12px;color:var(--slate);margin-top:1px}
.rvdm .push .pt{min-width:0;flex:1}
.rvdm .push .pt b,.rvdm .push .pt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* stage tracker (StageMover look) */
.rvdm .trk{position:relative;height:50px;margin:0 22px}
.rvdm .trk .rail,.rvdm .trk .fill{position:absolute;left:0;top:12px;height:5px;border-radius:999px}
.rvdm .trk .rail{right:0;background:var(--line)}
.rvdm .trk .fill{width:0;background:linear-gradient(90deg,var(--brand),var(--teal));transition:width .7s var(--ease)}
.rvdm .trk .nd{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.rvdm .trk .dot{position:relative;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:900;transition:all .35s ease}
.rvdm .trk .dot svg{width:14px;height:14px}
.rvdm .trk .nd.done .dot{background:var(--brand);border-color:var(--brand);color:#fff}
.rvdm .trk .nd.here .dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px rgba(45,111,232,.18)}
.rvdm .trk .nd.here .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;animation:rvdPing 1.8s cubic-bezier(0,0,.2,1) infinite}
.rvdm .trk .nd.won .dot{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 0 0 5px rgba(0,153,125,.16)}
.rvdm .trk .lb{margin-top:5px;white-space:nowrap;font-size:11px;font-weight:800;color:var(--muted);transition:color .3s ease}
.rvdm .trk .nd.done .lb{color:var(--slate)}
.rvdm .trk .nd.here .lb,.rvdm .trk .nd.won .lb{color:var(--navy)}
@keyframes rvdPing{0%{box-shadow:0 0 0 0 rgba(45,111,232,.45)}80%,100%{box-shadow:0 0 0 10px rgba(45,111,232,0)}}
.rvdm .spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;pointer-events:none;animation:rvdSpark .8s var(--ease) both}
@keyframes rvdSpark{0%{transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(1);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-26px) scale(.4);opacity:0}}

/* =====================================================================
   DESK  (Dashboard Preview)  data-rv-demo="desk"
   ===================================================================== */
.rvdm-desk{container-type:inline-size;background:#0F1F3D;border-radius:28px;padding:clamp(10px,2vw,22px);box-shadow:0 40px 90px rgba(15,31,61,.26)}
.rvdm-desk .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:2px 2px 14px}
.rvdm-desk .tab{appearance:none;border:0;cursor:pointer;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:700;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);transition:background .25s ease,color .25s ease}
.rvdm-desk .tab:hover{color:#fff}
.rvdm-desk .tab[aria-selected="true"]{background:#fff;color:var(--navy)}
.rvdm-desk .tab:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.rvdm-desk .win{position:relative;overflow:hidden;background:var(--light);border-radius:18px;height:640px;display:flex;flex-direction:column}
.rvdm-desk .scene{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .45s ease}
.rvdm-desk .scene.fade{opacity:0}
.rvdm-desk .top{flex:none;height:56px;display:flex;align-items:center;gap:10px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line)}
.rvdm-desk .top img{height:24px;width:auto;flex:none}
.rvdm-desk .top .ttl{font-size:15px;font-weight:800;white-space:nowrap}
.rvdm-desk .top .sync{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:11.5px;font-weight:800;white-space:nowrap}
.rvdm-desk .top .sync b{width:7px;height:7px;border-radius:50%;background:var(--success);animation:rvdBlink 2.4s ease-in-out infinite}
@keyframes rvdBlink{0%,100%{opacity:1}50%{opacity:.35}}
.rvdm-desk .top .srch{margin-left:auto;display:flex;align-items:center;gap:8px;width:220px;height:34px;border:1px solid var(--line);border-radius:12px;padding:0 12px;color:var(--muted);font-size:12.5px}
.rvdm-desk .top .bell{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--slate);flex:none}
.rvdm-desk .top .bell .bd{position:absolute;right:3px;top:3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;transform:scale(0);transition:transform .35s var(--spring)}
.rvdm-desk .top .bell.on .bd{transform:scale(1)}
.rvdm-desk .top .bell.ring svg{animation:rvdRing .7s ease}
@keyframes rvdRing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.rvdm-desk .body{flex:1;min-height:0;display:flex}
.rvdm-desk .side{flex:none;width:196px;background:#fff;border-right:1px solid var(--line);padding:14px 10px;display:none;flex-direction:column;gap:2px}
.rvdm-desk .side a{display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700;color:var(--slate);text-decoration:none;pointer-events:none}
.rvdm-desk .side a.on{background:rgba(45,111,232,.09);color:var(--brand)}
.rvdm-desk .side a .n{margin-left:auto;font-size:11px;font-weight:800;color:var(--muted)}
.rvdm-desk .side a.on .n{color:var(--brand)}
.rvdm-desk .main{flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;gap:12px}
.rvdm-desk .hd{display:flex;align-items:center;gap:10px}
.rvdm-desk .hd h4{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.rvdm-desk .hd .chips{display:none;gap:6px}
.rvdm-desk .hd .chips span{border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--slate)}
.rvdm-desk .hd .chips span.on{background:var(--brand);border-color:var(--brand);color:#fff}
.rvdm-desk .hd .new{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--brand);color:#fff;font-size:12px;font-weight:800;padding:8px 13px;box-shadow:0 10px 22px rgba(45,111,232,.28);white-space:nowrap}
.rvdm-desk .kpis{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rvdm-desk .kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;min-width:0}
.rvdm-desk .kpi .k{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvdm-desk .kpi .v{display:inline-block;transform-origin:0 60%;margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.1;transition:color .3s ease}
.rvdm-desk .kpi .v.bump{animation:rvdBump .6s var(--spring)}
@keyframes rvdBump{0%{transform:scale(1)}40%{transform:scale(1.14);color:var(--success)}100%{transform:scale(1)}}
.rvdm-desk .grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.rvdm-desk .col{min-height:0;display:flex;flex-direction:column;gap:12px}
.rvdm-desk .list{overflow:hidden;display:flex;flex-direction:column}
.rvdm-desk .list .lh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 14px;border-bottom:1px solid var(--line)}
.rvdm-desk .list .lh .cap{font-size:11.5px}
.rvdm-desk .list .lh .cnt{font-size:11.5px;font-weight:800;color:var(--muted)}
.rvdm-desk .rows{position:relative;overflow:hidden}
.rvdm-desk .open .rows{height:236px}
.rvdm-desk .closed .rows{height:104px}
.rvdm-desk .row{display:flex;align-items:center;gap:10px;height:59px;padding:0 14px;border-bottom:1px solid var(--line);background:#fff;transition:background-color .5s ease,height .5s var(--ease),opacity .4s ease}
.rvdm-desk .closed .row{height:52px}
.rvdm-desk .row.enter{height:0!important;opacity:0}
.rvdm-desk .row.hot{background:rgba(45,111,232,.06)}
.rvdm-desk .row.press{background:rgba(45,111,232,.10)}
.rvdm-desk .row .rt{flex:1;min-width:0}
.rvdm-desk .row .rt b{display:block;font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-desk .row .rt span{display:block;margin-top:1px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-desk .row .chev{width:14px;height:14px;color:var(--muted);flex:none}
.rvdm-desk .side-col{display:none}
.rvdm-desk .feed{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.rvdm-desk .feed .fl{position:relative;flex:1;overflow:hidden;padding:4px 12px 10px}
.rvdm-desk .ev{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid rgba(225,230,239,.7);transition:opacity .45s ease,transform .45s var(--ease),max-height .45s var(--ease);max-height:80px}
.rvdm-desk .ev.enter{opacity:0;transform:translateY(-8px);max-height:0;padding:0}
.rvdm-desk .ev .ei{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(45,111,232,.10);color:var(--brand)}
.rvdm-desk .ev .ei.good{background:rgba(0,199,167,.13);color:var(--success)}
.rvdm-desk .ev .ei svg{width:12px;height:12px}
.rvdm-desk .ev p{margin:0;font-size:12px;line-height:1.35;color:var(--slate);min-width:0}
.rvdm-desk .ev p b{color:var(--navy);font-weight:800}
.rvdm-desk .ev time{display:block;font-size:10.5px;font-weight:700;color:var(--muted);margin-top:2px}
.rvdm-desk .mirror{flex:none;padding:12px 14px}
.rvdm-desk .mirror .mh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rvdm-desk .mirror .mh .cap{font-size:10.5px}
.rvdm-desk .mirror .mh .live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:var(--success)}
.rvdm-desk .mirror .mh .live b{width:6px;height:6px;border-radius:50%;background:var(--success);animation:rvdBlink 1.6s ease-in-out infinite}
.rvdm-desk .mirror .mr{display:flex;align-items:center;gap:9px}
.rvdm-desk .mirror .mr .rt{flex:1;min-width:0}
.rvdm-desk .mirror .mr .rt b{display:block;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-desk .mirror .mr .rt span{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-desk .mirror .bar{margin-top:10px;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.rvdm-desk .mirror .bar i{display:block;height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--teal));transition:width .7s var(--ease)}
.rvdm-desk .mirror .mf{margin-top:7px;font-size:11px;font-weight:700;color:var(--muted)}
.rvdm-desk .mirror.flash{animation:rvdFlash 1s ease}
@keyframes rvdFlash{0%{box-shadow:0 10px 24px rgba(15,31,61,.06)}35%{box-shadow:0 0 0 3px rgba(0,199,167,.35),0 10px 24px rgba(15,31,61,.06)}100%{box-shadow:0 10px 24px rgba(15,31,61,.06)}}

/* referral popup */
.rvdm-desk .ov{position:absolute;inset:0;z-index:20;background:rgba(15,31,61,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease;display:flex;align-items:flex-end;justify-content:center}
.rvdm-desk .ov.on{opacity:1}
.rvdm-desk .modal{width:100%;background:#fff;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 30px 60px rgba(15,31,61,.3);transform:translateY(40px);transition:transform .45s var(--spring)}
.rvdm-desk .ov.on .modal{transform:translateY(0)}
.rvdm-desk .mh2{position:relative;background:linear-gradient(135deg,#0F1F3D,#13294d 55%,#021646);color:#fff;padding:16px 18px;display:flex;gap:12px;align-items:center}
.rvdm-desk .mh2 .ini{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);font-size:14px;font-weight:900}
.rvdm-desk .mh2 .nm{font-size:17px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-desk .mh2 .tg{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px}
.rvdm-desk .mh2 .tg span{border-radius:999px;background:rgba(255,255,255,.12);padding:2px 8px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.88);white-space:nowrap}
.rvdm-desk .mh2 .tg span.st{background:var(--brand);color:#fff}
.rvdm-desk .mh2 .tg span.st.good{background:var(--teal)}
.rvdm-desk .mh2 .x{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.rvdm-desk .meta{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line);background:rgba(244,246,249,.6);font-size:12px;font-weight:700;color:var(--slate);min-height:40px}
.rvdm-desk .meta .mi{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(45,111,232,.1);color:var(--brand)}
.rvdm-desk .meta .mi.good{background:rgba(0,199,167,.15);color:var(--success)}
.rvdm-desk .meta .mi svg{width:11px;height:11px}
.rvdm-desk .meta .mt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .25s ease}
.rvdm-desk .meta .mt b{color:var(--navy)}
.rvdm-desk .stg{margin:12px 14px 14px;border:1px solid var(--line);border-radius:16px;padding:12px 12px 14px;box-shadow:0 10px 24px rgba(15,31,61,.05)}
.rvdm-desk .stg .cap{font-size:10.5px}
.rvdm-desk .stg .trk{margin-top:12px}
.rvdm-desk .nx{margin-top:10px;display:flex;align-items:center;gap:10px;border-radius:14px;background:linear-gradient(90deg,#2D6FE8,#2563d6);color:#fff;padding:10px 12px;box-shadow:0 12px 24px rgba(45,111,232,.28);transition:opacity .3s ease,transform .15s ease}
.rvdm-desk .nx.press{transform:scale(.98)}
.rvdm-desk .nx .nt{flex:1;min-width:0}
.rvdm-desk .nx b{display:block;font-size:14px;font-weight:800;white-space:nowrap}
.rvdm-desk .nx span{display:block;font-size:11.5px;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvdm-desk .nx .ar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2)}
.rvdm-desk .nx.idle{background:var(--light);color:var(--slate);box-shadow:none}
.rvdm-desk .nx.idle span{color:var(--muted)}
.rvdm-desk .nx.idle .ar{background:#fff;color:var(--muted)}
.rvdm-desk .oc{margin-top:12px}
.rvdm-desk .oc .cap{font-size:10.5px;margin-bottom:7px}
.rvdm-desk .oc .ot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.rvdm-desk .oc .o{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;padding:8px 4px;background:#fff;transition:all .3s ease}
.rvdm-desk .oc .o .oi{display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
.rvdm-desk .oc .o .oi svg{width:12px;height:12px}
.rvdm-desk .oc .o.g .oi{background:rgba(0,153,125,.1);color:var(--success)}
.rvdm-desk .oc .o.b .oi{background:rgba(224,69,58,.1);color:var(--danger)}
.rvdm-desk .oc .o.n .oi{background:rgba(15,31,61,.06);color:var(--slate)}
.rvdm-desk .oc .o b{font-size:12.5px;font-weight:800}
.rvdm-desk .oc .o.on{background:var(--success);border-color:var(--success);color:#fff;transform:scale(1.03);box-shadow:0 10px 24px rgba(0,153,125,.28)}
.rvdm-desk .oc .o.on .oi{background:rgba(255,255,255,.22);color:#fff}
.rvdm-desk .win .push{top:64px}

@container (min-width:640px){
  .rvdm-desk .win{height:640px}
  .rvdm-desk .kpis{display:grid}
  .rvdm-desk .hd .chips{display:flex}
  .rvdm-desk .ov{align-items:center}
  .rvdm-desk .modal{width:420px;border-radius:22px;transform:translateY(16px) scale(.97)}
  .rvdm-desk .ov.on .modal{transform:none}
}
@container (min-width:760px){
  .rvdm-desk .grid{grid-template-columns:minmax(0,1fr) 250px}
  .rvdm-desk .side-col{display:flex}
}
@container (min-width:1000px){
  .rvdm-desk .side{display:flex}
  .rvdm-desk .grid{grid-template-columns:minmax(0,1fr) 290px}
  .rvdm-desk .main{padding:18px 20px}
}
@container (max-width:639px){
  .rvdm-desk .win{height:590px}
  .rvdm-desk .top{height:52px;padding:0 12px;gap:8px}
  .rvdm-desk .top .srch{display:none}
  .rvdm-desk .top .bell{margin-left:auto}
  .rvdm-desk .top .ttl{font-size:14px}
  .rvdm-desk .main{padding:12px;gap:10px}
  .rvdm-desk .hd h4{font-size:17px}
  .rvdm-desk .open .rows{height:236px}
  .rvdm-desk .tab{padding:8px 13px;font-size:12.5px}
  .rvdm-desk .win .push{top:60px}
}
@container (max-width:380px){
  .rvdm-desk .top .sync{display:none}
  .rvdm-desk .row{padding:0 11px;gap:8px}
  .rvdm-desk .row .chev{display:none}
  .rvdm-desk .row .io{display:none}
  .rvdm-desk .trk{margin:0 18px}
  .rvdm-desk .trk .lb{font-size:10px}
  .rvdm-desk .hd .new span{display:none}
}

/* =====================================================================
   HERO CARD (audience heroes)  data-rv-demo="hero"
   ===================================================================== */
.rvdm-hero{height:336px;display:flex;flex-direction:column}
.rvdm-hero .hh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.rvdm-hero .hh .cap{font-size:11.5px;letter-spacing:.05em;color:rgba(15,31,61,0.66)}
.rvdm-hero .hh .live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--success);white-space:nowrap}
.rvdm-hero .hh .live b{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:rvdBlink 2s ease-in-out infinite}
.rvdm-hero .stack{position:relative;flex:1;min-height:0}
.rvdm-hero .ph{position:absolute;inset:0;transition:opacity .45s ease,transform .45s var(--ease)}
.rvdm-hero .ph.off{opacity:0;transform:translateY(10px);pointer-events:none}
.rvdm-hero .item{display:flex;align-items:center;gap:11px;background:var(--light);border-radius:14px;padding:12px}
.rvdm-hero .item .rt{flex:1;min-width:0}
.rvdm-hero .item .rt b{display:block;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-hero .item .rt span{display:block;margin-top:2px;font-size:11.5px;color:rgba(15,31,61,0.66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-hero .item.new{box-shadow:0 0 0 2px rgba(45,111,232,.35);background:#fff;animation:rvdPop .55s var(--spring)}
@keyframes rvdPop{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:none;opacity:1}}
.rvdm-hero .trk{margin:16px 26px 0}
.rvdm-hero .log{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.rvdm-hero .lg{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--slate);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s var(--ease)}
.rvdm-hero .lg.on{opacity:1;transform:none}
.rvdm-hero .lg .li{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(45,111,232,.1);color:var(--brand)}
.rvdm-hero .lg .li.good{background:rgba(0,199,167,.15);color:var(--success)}
.rvdm-hero .lg .li svg{width:11px;height:11px}
.rvdm-hero .lg .lt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-hero .lg .lt b{color:var(--navy);font-weight:800}
.rvdm-hero .lg time{flex:none;font-size:11px;font-weight:800;color:var(--muted)}
.rvdm-hero .lg.win{color:var(--success)}
.rvdm-hero .lg.win .lt b{color:var(--success)}
.rvdm-hero .both{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px;font-size:12px;font-weight:700;color:var(--slate)}
.rvdm-hero .both .avs{display:flex}
.rvdm-hero .both .avs .av{box-shadow:0 0 0 2px #fff}
.rvdm-hero .both .avs .av+.av{margin-left:-7px}
.rvdm-hero .both .lt{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* composer phase (real estate) */
.rvdm-hero .fld{height:40px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;padding:0 12px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:9px;background:#fff;transition:border-color .25s ease}
.rvdm-hero .fld.on{border-color:var(--brand);color:var(--navy)}
.rvdm-hero .fld .caret{display:inline-block;width:1.5px;height:15px;margin-left:1px;background:var(--brand);animation:rvdBlink 1s steps(2) infinite}
.rvdm-hero .chs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.rvdm-hero .chs span{border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;background:var(--light);color:var(--slate);transition:all .25s ease}
.rvdm-hero .chs span.on{background:rgba(45,111,232,.12);color:var(--brand)}
.rvdm-hero .to{display:flex;align-items:center;gap:10px;border-radius:12px;background:var(--light);padding:9px 11px;margin-bottom:12px}
.rvdm-hero .to .rt{flex:1;min-width:0}
.rvdm-hero .to .rt b{display:block;font-size:13px;font-weight:800}
.rvdm-hero .to .rt span{display:block;font-size:11px;color:rgba(15,31,61,0.66)}
.rvdm-hero .send{height:42px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:800;transition:transform .15s ease,background-color .3s ease}
.rvdm-hero .send.press{transform:scale(.97);background:#18305c}
.rvdm-hero .send.done{background:var(--success)}
.rvdm-hero .claim{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:28px}
.rvdm-hero .claim .nt{font-size:12px;font-weight:700;color:var(--slate)}
.rvdm-hero .claim .btn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;padding:6px 12px;transition:transform .15s ease,opacity .3s ease}
.rvdm-hero .claim .btn.press{transform:scale(.93)}
.rvdm-hero .avs{display:flex}
.rvdm-hero .avs .av{box-shadow:0 0 0 2px #fff}
.rvdm-hero .avs .av+.av{margin-left:-7px}
.rvdm-hero .cur{width:20px;height:20px}
@media (max-width:420px){
  .rvdm-hero{height:350px}
  .rvdm-hero .trk{margin:16px 24px 0}
  .rvdm-hero .trk .lb{font-size:10px}
}

/* =====================================================================
   RACE (Speed section)  data-rv-demo="race"
   ===================================================================== */
.rvdm-race{container-type:inline-size;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:clamp(8px,2.6vw,24px);margin-bottom:22px;color:#fff}
.rvdm-race .lanes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rvdm-race .lane{position:relative;border-radius:16px;padding:16px;height:284px;overflow:hidden}
.rvdm-race .lane.a{background:rgba(255,255,255,.04);border:1px solid rgba(0,201,167,.24)}
.rvdm-race .lane.b{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.09)}
.rvdm-race .lh{display:flex;align-items:center;gap:8px;margin-bottom:14px;min-height:26px}
.rvdm-race .lh .t{min-width:0;flex:1;line-height:1.25}
.rvdm-race .lh .d{width:7px;height:7px;border-radius:50%;flex:none}
.rvdm-race .lane.a .lh .d{background:#00C9A7;animation:rvdBlink 2s ease-in-out infinite}
.rvdm-race .lane.b .lh .d{background:#B7791F}
.rvdm-race .lh .t{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.rvdm-race .lane.a .lh .t{color:#00C9A7}
.rvdm-race .lane.b .lh .t{color:rgba(255,255,255,.55)}
.rvdm-race .clk{margin-left:auto;min-width:78px;justify-content:center;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvdm-race .clk svg{width:12px;height:12px}
.rvdm-race .lane.a .clk{background:rgba(0,201,167,.12);color:#00C9A7}
.rvdm-race .lane.b .clk{background:rgba(183,121,31,.16);color:#E9B45A}
.rvdm-race .lane.b .clk.late{background:rgba(224,69,58,.18);color:#FF8F86}
.rvdm-race .ref{display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:11px 12px;color:var(--navy);box-shadow:0 10px 22px rgba(0,0,0,.18);opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s var(--spring)}
.rvdm-race .ref.on{opacity:1;transform:none}
.rvdm-race .ref .rt{flex:1;min-width:0}
.rvdm-race .ref .rt b{display:block;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-race .ref .rt span{display:block;font-size:11.5px;color:rgba(15,31,61,0.66);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-race .tl{position:relative;margin:14px 0 0 12px;padding-left:20px}
.rvdm-race .tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.1);border-radius:2px}
.rvdm-race .tl .prog{position:absolute;left:4px;top:6px;width:2px;height:0;background:linear-gradient(#2D6FE8,#00C9A7);border-radius:2px;transition:height .6s var(--ease)}
.rvdm-race .st{position:relative;display:flex;align-items:center;gap:8px;height:34px;opacity:.28;transition:opacity .4s ease}
.rvdm-race .st.on{opacity:1}
.rvdm-race .st::before{content:"";position:absolute;left:-20px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#14284c;border:2px solid rgba(255,255,255,.25);transition:all .35s ease}
.rvdm-race .st.on::before{background:#00C9A7;border-color:#00C9A7;box-shadow:0 0 0 4px rgba(0,201,167,.18)}
.rvdm-race .st .sx{flex:1;min-width:0;font-size:13px;font-weight:700;color:rgba(255,255,255,.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-race .st time{flex:none;font-size:11.5px;font-weight:800;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.rvdm-race .st.key .sx{color:#fff}
.rvdm-race .st.key.on .chip{opacity:1;transform:none}
.rvdm-race .st .chip{flex:none;border-radius:999px;background:#00C9A7;color:#0F1F3D;font-size:11px;font-weight:900;padding:3px 9px;opacity:0;transform:scale(.8);transition:all .4s var(--spring);white-space:nowrap}
.rvdm-race .msg{border-radius:14px;padding:11px 13px;margin-bottom:10px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.rvdm-race .msg.on{opacity:1;transform:none}
.rvdm-race .msg.call{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.82);color:rgba(15,31,61,.75)}
.rvdm-race .msg.call.on{animation:rvdShake .5s ease .1s}
@keyframes rvdShake{0%,100%{transform:none}20%{transform:rotate(-2.5deg)}40%{transform:rotate(2.5deg)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(1deg)}}
.rvdm-race .msg.call .ci{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#B7791F;color:#fff}
.rvdm-race .msg.call .ci svg{width:15px;height:15px}
.rvdm-race .msg b{display:block;font-size:13px;font-weight:800}
.rvdm-race .msg span{display:block;font-size:11.5px;font-weight:600;opacity:.8;margin-top:1px}
.rvdm-race .msg.txt{background:rgba(255,255,255,.62);color:rgba(15,31,61,.66);border-radius:14px 14px 14px 4px;max-width:92%}
.rvdm-race .msg.txt b{font-weight:700}
.rvdm-race .msg.txt.dim{opacity:0}
.rvdm-race .msg.txt.dim.on{opacity:.75}
.rvdm-race .seen{font-size:12px;font-weight:700;color:rgba(255,255,255,.45);opacity:0;transition:opacity .5s ease}
.rvdm-race .seen.on{opacity:1}
@container (min-width:620px){
  .rvdm-race .lanes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@container (max-width:619px){
  /* Every element is present from the first frame (only opacity changes), so auto height never shifts. */
  .rvdm-race .lane,.rvdm-race .lane.a,.rvdm-race .lane.b{height:auto}
  .rvdm-race .st{height:auto;min-height:34px;padding:5px 0}
  .rvdm-race .st .sx{white-space:normal;line-height:1.3}
  .rvdm-race .st.key{flex-wrap:wrap;row-gap:4px}
  .rvdm-race .seen{margin-top:2px}
}
@container (max-width:420px){
  .rvdm-race .lane{padding:13px}
  .rvdm-race .lh .t{font-size:11px}
  .rvdm-race .tl{margin-left:6px}
  .rvdm-race .st .sx{font-size:12.5px}
  .rvdm-race .msg.txt{max-width:100%}
}

/* =====================================================================
   QUEUE (Team Referral Queue)  data-rv-demo="queue"
   ===================================================================== */
.rvdm-queue{container-type:inline-size;position:relative;overflow:hidden;background:#fff;border-radius:20px;color:var(--navy)}
.rvdm-queue .qh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 18px 12px}
.rvdm-queue .qh .cap{font-size:11.5px;color:rgba(15,31,61,0.66)}
.rvdm-queue .qh .notif{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:11.5px;font-weight:800;color:var(--success);opacity:0;transform:translateY(4px);transition:all .35s ease;white-space:nowrap}
.rvdm-queue .qh .notif.on{opacity:1;transform:none}
.rvdm-queue .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 18px 12px;background:var(--light);border-radius:14px;padding:10px 0}
.rvdm-queue .stats div{padding:0 14px;min-width:0}
.rvdm-queue .stats div+div{border-left:1px solid var(--line)}
.rvdm-queue .stats .k{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvdm-queue .stats .v{display:inline-block;transform-origin:0 60%;margin-top:3px;font-size:20px;font-weight:800;line-height:1.1}
.rvdm-queue .stats .v.warn{color:#8A5A10}
.rvdm-queue .stats .v.bump{animation:rvdBump .6s var(--spring)}
.rvdm-queue .rows{position:relative;height:268px;overflow:hidden;border-top:1px solid var(--line)}
.rvdm-queue .row{display:flex;align-items:center;gap:12px;height:67px;padding:0 18px;border-bottom:1px solid rgba(15,31,61,.06);background:#fff;transition:background-color .5s ease,height .5s var(--ease),opacity .4s ease}
.rvdm-queue .row.enter{height:0;opacity:0}
.rvdm-queue .row.hot{background:rgba(224,160,48,.07)}
.rvdm-queue .row.mine{background:rgba(0,199,167,.06)}
.rvdm-queue .row .rt{flex:1;min-width:0}
.rvdm-queue .row .rt b{display:block;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-queue .row .rt span{display:block;margin-top:2px;font-size:12px;color:rgba(15,31,61,0.66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-queue .row .rr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:46%}
.rvdm-queue .row .rr small{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rvdm-queue .row .rr small b{color:var(--navy);font-weight:800}
.rvdm-queue .cl{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;padding:6px 12px;box-shadow:0 8px 18px rgba(45,111,232,.28);transition:transform .15s ease}
.rvdm-queue .cl.press{transform:scale(.92)}
.rvdm-queue .cl svg{width:12px;height:12px}
.rvdm-queue .ping{position:relative;display:inline-flex;align-items:center;gap:6px}
.rvdm-queue .ping::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);animation:rvdBlink 1.2s ease-in-out infinite}
.rvdm-queue .foot{display:flex;align-items:center;gap:8px;padding:0 18px;font-size:12px;font-weight:700;color:var(--slate);border-top:1px solid var(--line);height:58px}
.rvdm-queue .foot .avs{display:flex}
.rvdm-queue .foot .avs .av{box-shadow:0 0 0 2px #fff}
.rvdm-queue .foot .avs .av+.av{margin-left:-7px}
.rvdm-queue .foot .lt{min-width:0;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.rvdm-queue .sh{display:none}
@container (max-width:520px){
  .rvdm-queue .lg{display:none}
  .rvdm-queue .sh{display:inline}
  .rvdm-queue .row .rt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
  .rvdm-queue .row .rr{max-width:42%}
  .rvdm-queue .row{padding:0 14px;gap:10px}
  .rvdm-queue .row .rt b{font-size:13.5px}
  .rvdm-queue .stats{margin:0 14px 12px}
  .rvdm-queue .stats div{padding:0 10px}
  .rvdm-queue .qh{padding:14px 14px 10px}
  .rvdm-queue .qh .notif{margin-left:0;width:100%}
  .rvdm-queue .foot{padding:0 14px}
  .rvdm-queue .stats .k{letter-spacing:.02em;font-size:9.5px}
}

/* =====================================================================
   PARTNERS (home Partner Quality board)  data-rv-demo="partners"
   ===================================================================== */
.rvdm-partners{container-type:inline-size}
.rvdm-partners .pg{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.rvdm-partners .pc{position:relative;background:#fff;border-radius:16px;padding:16px;min-height:150px;color:var(--navy);transition:box-shadow .4s ease}
.rvdm-partners .pc.flash{box-shadow:0 0 0 3px rgba(0,199,167,.45)}
.rvdm-partners .pc.dim{box-shadow:0 0 0 3px rgba(224,160,48,.35)}
.rvdm-partners .ph{display:flex;align-items:center;gap:10px}
.rvdm-partners .ph .rt{flex:1;min-width:0}
.rvdm-partners .ph .rt b{display:block;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-partners .ph .rt span{display:block;font-size:11.5px;color:rgba(15,31,61,0.66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-partners .sg{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;min-height:22px}
.rvdm-partners .sg .pill{font-size:10.5px}
.rvdm-partners .sg .lbl{display:inline-flex}
.rvdm-partners .sg .lbl .pill{box-shadow:inset 0 0 0 1px currentColor}
.rvdm-partners .sg .pill.ghost{visibility:hidden}
.rvdm-partners .sg .pill.pop{animation:rvdPop .5s var(--spring)}
.rvdm-partners .ms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px;background:var(--light);border-radius:12px;padding:8px 6px;text-align:center}
.rvdm-partners .ms b{display:block;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;transition:color .3s ease}
.rvdm-partners .ms b.bump{animation:rvdBump .6s var(--spring)}
.rvdm-partners .ms span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rvdm-partners .ev{position:absolute;left:12px;right:12px;top:-12px;display:flex;justify-content:center;pointer-events:none}
.rvdm-partners .ev span{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;box-shadow:0 8px 18px rgba(0,0,0,.25);opacity:0;transform:translateY(6px);transition:all .4s var(--spring);white-space:nowrap}
.rvdm-partners .ev span.on{opacity:1;transform:none}
.rvdm-partners .ev svg{width:11px;height:11px;color:var(--teal)}
@container (max-width:559px){.rvdm-partners .sg{min-height:49px;align-content:flex-start}}
@container (min-width:560px){.rvdm-partners .pg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:1000px){.rvdm-partners .pg{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* =====================================================================
   INSIGHTS  data-rv-demo="insights"
   ===================================================================== */
.rvdm-ins{container-type:inline-size}
.rvdm-ins .frame{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px rgba(15,31,61,.12);overflow:hidden}
.rvdm-ins .bar{display:flex;align-items:center;gap:10px;height:54px;padding:0 18px;border-bottom:1px solid var(--line)}
.rvdm-ins .bar img{height:22px;width:auto;flex:none}
.rvdm-ins .bar .ttl{font-size:15px;font-weight:800;white-space:nowrap}
.rvdm-ins .bar .rng{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.rvdm-ins .bar .rng span{border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:700;color:var(--slate);white-space:nowrap}
.rvdm-ins .bar .rng span.on{background:var(--navy);color:#fff}
.rvdm-ins .in{background:var(--light);padding:18px;display:flex;flex-direction:column;gap:14px}
.rvdm-ins .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rvdm-ins .kpi{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 10px 24px rgba(15,31,61,.05);min-width:0}
.rvdm-ins .kpi .k{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvdm-ins .kpi .v{margin-top:7px;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvdm-ins .kpi .s{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.3}
.rvdm-ins .kpi .f{margin-top:auto;padding-top:10px}
.rvdm-ins .kpi .f .fr{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--slate);margin-bottom:4px}
.rvdm-ins .kpi .f .fr b{color:var(--navy)}
.rvdm-ins .mtr{display:block;height:6px;border-radius:999px;background:rgba(0,199,167,.15);overflow:hidden}
.rvdm-ins .mtr i{display:block;height:100%;width:0;border-radius:999px;background:var(--teal);transition:width 1.1s var(--ease)}
.rvdm-ins .split{display:flex;gap:2px;height:6px;border-radius:999px;overflow:hidden}
.rvdm-ins .split i{display:block;height:100%;width:0;transition:width 1s var(--ease)}
.rvdm-ins .split i:first-child{background:var(--brand)}
.rvdm-ins .split i:last-child{background:var(--teal)}
.rvdm-ins .top1{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--slate);min-width:0}
.rvdm-ins .top1 em{font-style:normal;flex:none;border-radius:999px;background:var(--navy);color:#fff;font-size:10px;padding:1px 6px}
.rvdm-ins .top1 span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-ins .g2{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.rvdm-ins .cd{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 24px rgba(15,31,61,.05);min-width:0}
.rvdm-ins .cd h5{margin:0;font-size:15px;font-weight:800}
.rvdm-ins .cd .cc{margin:2px 0 0;font-size:12px;color:var(--slate);line-height:1.4}
.rvdm-ins .lgd{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 6px}
.rvdm-ins .lgd span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--slate)}
.rvdm-ins .lgd span i{width:9px;height:9px;border-radius:50%}
.rvdm-ins .lgd span b{color:var(--navy);font-weight:800}
.rvdm-ins .chart{position:relative;height:190px}
.rvdm-ins .chart svg{position:absolute;inset:0;overflow:visible}
.rvdm-ins .chart text{font-family:inherit;font-size:11px;fill:#7A879C}
.rvdm-ins .ln{fill:none;stroke:#2D6FE8;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.rvdm-ins .ar{fill:#2D6FE8;opacity:0;transition:opacity .8s ease .9s}
.rvdm-ins.go .ar{opacity:.1}
.rvdm-ins .pdot{fill:#2D6FE8;opacity:0;transition:opacity .3s ease}
.rvdm-ins .edot{fill:#2D6FE8;stroke:#fff;stroke-width:2;opacity:0;transition:opacity .3s ease}
.rvdm-ins .ering{fill:none;stroke:#2D6FE8;stroke-width:2;opacity:0}
.rvdm-ins.go .ering{animation:rvdRingOut 2.4s ease-out 1.6s infinite}
@keyframes rvdRingOut{0%{opacity:.5;r:5}70%,100%{opacity:0;r:14}}
.rvdm-ins .tip{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;background:var(--navy);color:#fff;border-radius:10px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap;opacity:0;transition:opacity .4s ease 1.5s;pointer-events:none}
.rvdm-ins .tip::after{content:"";position:absolute;left:calc(50% + var(--ax, 0px));bottom:-4px;width:8px;height:8px;margin-left:-4px;background:var(--navy);transform:rotate(45deg);border-radius:2px}
.rvdm-ins.go .tip{opacity:1}
.rvdm-ins .colb{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s var(--ease)}
.rvdm-ins.go .colb{transform:scaleY(1)}
.rvdm-ins .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rvdm-ins .chips span{border-radius:999px;background:var(--light);padding:4px 10px;font-size:11.5px;font-weight:700;color:var(--slate)}
/* leaderboard */
.rvdm-ins .lbh,.rvdm-ins .lr .wide{display:none}
.rvdm-ins .lbh{grid-template-columns:28px 34px minmax(0,1fr) 72px 74px 58px;gap:10px;align-items:center;padding:12px 2px 8px;border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rvdm-ins .lbh span:nth-child(n+3){text-align:right}
.rvdm-ins .lbh span:nth-child(2){text-align:left}
.rvdm-ins .tstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px;background:rgba(244,246,249,.8);border-radius:12px;padding:9px 0}
.rvdm-ins .tstat div{padding:0 12px;min-width:0}
.rvdm-ins .tstat div+div{border-left:1px solid var(--line)}
.rvdm-ins .tstat .k{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvdm-ins .tstat .v{margin-top:3px;font-size:18px;font-weight:800;line-height:1.1}
.rvdm-ins ol{list-style:none;margin:0;padding:0}
.rvdm-ins .lr{padding:10px 2px;border-bottom:1px solid rgba(225,230,239,.7);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--ease)}
.rvdm-ins .lr:last-child{border-bottom:0}
.rvdm-ins.go .lr{opacity:1;transform:none}
.rvdm-ins .lr .who{display:flex;align-items:center;gap:10px;min-width:0}
.rvdm-ins .rk{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:11.5px;font-weight:800;background:#fff;color:var(--slate);box-shadow:inset 0 0 0 1.5px var(--line);font-variant-numeric:tabular-nums}
.rvdm-ins .rk.medal{width:30px;height:36px;margin:-6px -1px -4px;border-radius:0;background:none;box-shadow:none}
.rvdm-ins .rk.medal svg{display:block;width:30px;height:36px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(15,31,61,.2))}
.rvdm-ins.go .lr .rk.medal svg{animation:rvdMedal .6s var(--spring) both;animation-delay:var(--d,0s)}
@keyframes rvdMedal{0%{transform:scale(.6) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.rvdm-ins .lr .nm{flex:1;min-width:0}
.rvdm-ins .lr .nm div{display:flex;align-items:center;gap:6px;min-width:0}
.rvdm-ins .lr .nm b{font-size:13.5px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-ins .lr .nm span{display:block;font-size:11.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-ins .mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px;background:rgba(244,246,249,.8);border-radius:10px;padding:6px 4px;text-align:center}
.rvdm-ins .mini b{display:block;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.rvdm-ins .mini span{display:block;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rvdm-ins .wide .c{text-align:right;font-size:13px;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.rvdm-ins .wide .c.s{font-weight:800;color:var(--navy)}
.rvdm-ins .wide .mt{display:block;margin:5px 0 0 auto;width:52px;height:5px;border-radius:999px;background:rgba(0,199,167,.15);overflow:hidden}
.rvdm-ins .wide .mt i{display:block;height:100%;width:0;background:var(--teal);border-radius:999px;transition:width 1s var(--ease) .5s}
/* outcomes */
.rvdm-ins .oh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px}
.rvdm-ins .oh .big{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.rvdm-ins .oh .sub{margin-top:4px;font-size:11.5px;font-weight:600;color:var(--muted)}
.rvdm-ins .oh .tot{text-align:right;font-size:11.5px;font-weight:600;color:var(--muted)}
.rvdm-ins .oh .tot b{font-size:15px;font-weight:800;color:var(--navy)}
.rvdm-ins .ob{display:flex;gap:2px;height:12px;margin-top:14px;border-radius:999px;overflow:hidden;background:var(--light)}
.rvdm-ins .ob i{display:block;height:100%;width:0;transition:width .9s var(--ease)}
.rvdm-ins .ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:14px 0 0;padding:0;list-style:none}
.rvdm-ins .ol li{display:flex;align-items:center;gap:7px;font-size:12.5px;min-width:0}
.rvdm-ins .ol li i{flex:none;width:9px;height:9px;border-radius:50%}
.rvdm-ins .ol li span{flex:1;min-width:0;font-weight:600;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-ins .ol li b{font-weight:800;font-variant-numeric:tabular-nums}
.rvdm-ins .ol li em{font-style:normal;width:34px;text-align:right;font-size:11px;font-weight:600;color:var(--muted)}
.rvdm-ins .ostage{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--muted)}
.rvdm-ins .hide-sm{display:none}
@container (min-width:620px){
  .rvdm-ins .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rvdm-ins .hide-sm{display:block}
  .rvdm-ins .in{padding:22px}
}
@container (min-width:900px){
  .rvdm-ins .g2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .rvdm-ins .g2.b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rvdm-ins .kpi .v{font-size:28px}
}
@container (min-width:1060px){
  .rvdm-ins .lbh{display:grid}
  .rvdm-ins .lbh span:nth-child(2){grid-column:span 2}
  .rvdm-ins .lr .mini{display:none}
  .rvdm-ins .lr{display:grid;grid-template-columns:28px 34px minmax(0,1fr) 72px 74px 58px;gap:10px;align-items:center}
  .rvdm-ins .lr .who{display:contents}
  .rvdm-ins .lr .wide{display:contents}
  .rvdm-ins .ct{height:236px}
}
@container (max-width:480px){
  .rvdm-ins .ol{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:619px){
  .rvdm-ins .bar{padding:0 14px}
  .rvdm-ins .bar .rng span{padding:4px 8px}
  .rvdm-ins .bar .rng span.x{display:none}
  .rvdm-ins .in{padding:12px;gap:12px}
  .rvdm-ins .kpi{padding:12px}
  .rvdm-ins .kpi .v{font-size:22px}
  .rvdm-ins .chart{height:170px}
}
@container (max-width:360px){
  .rvdm-ins .bar .ttl{font-size:14px}
  .rvdm-ins .bar .rng span:not(.on){display:none}
}

/* Insights section text (lives in the page template) */
.rvdm-ins-list{list-style:none;padding:0;margin:22px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:900px}
.rvdm-ins-list li{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:#0F1F3D}
.rvdm-ins-list li svg{flex:none}

/* =====================================================================
   FLOW ("How it works" steps)  [data-rv-steps]
   Step copy lives in the page; this lights each step in turn and plays a
   small dashboard vignette beside it. Without JS it reads as the plain list.
   ===================================================================== */
.rvdm-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.rvdm-flow .fl-steps{list-style:none;margin:0;padding:0;max-width:640px;width:100%;justify-self:center}
.rvdm-flow .fl-step{display:flex;gap:22px}
.rvdm-flow .fl-rail{display:flex;flex-direction:column;align-items:center;flex:none}
.rvdm-flow .fl-num{position:relative;width:48px;height:48px;border-radius:50%;background:#0F1F3D;color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none;transition:background-color .45s ease,color .45s ease,box-shadow .45s ease,transform .45s var(--spring)}
.rvdm-flow .fl-step:last-child .fl-num{background:#00C9A7}
.rvdm-flow .fl-line{position:relative;width:2px;flex:1;min-height:36px;background:rgba(15,31,61,.15);border-radius:2px;overflow:hidden}
.rvdm-flow .fl-line i{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(#2D6FE8,#00C7A7)}
.rvdm-flow .fl-txt{padding-bottom:36px;transition:opacity .45s ease}
.rvdm-flow .fl-step:last-child .fl-txt{padding-bottom:0}
.rvdm-flow .fl-t{font-size:18px;font-weight:800;margin-bottom:6px;line-height:1.3}
.rvdm-flow .fl-d{font-size:15px;color:rgba(15,31,61,0.66);line-height:1.6}
.rvdm-flow .fl-n{margin-top:8px;font-size:13.5px;color:rgba(15,31,61,0.66);line-height:1.6;font-style:italic}
.rvdm-flow.on .fl-txt{opacity:.48}
.rvdm-flow.on .fl-num{background:#fff;color:#0F1F3D;box-shadow:inset 0 0 0 2px rgba(15,31,61,.16)}
.rvdm-flow.on .is-done .fl-num{background:#0F1F3D;color:#fff;box-shadow:none}
.rvdm-flow.on .is-done .fl-txt{opacity:.8}
.rvdm-flow.on .is-cur .fl-num{background:#2D6FE8;color:#fff;box-shadow:0 0 0 6px rgba(45,111,232,.15);transform:scale(1.05)}
.rvdm-flow.on .fl-step:last-child.is-cur .fl-num{background:#00C9A7;box-shadow:0 0 0 6px rgba(0,201,167,.18)}
.rvdm-flow.on .is-cur .fl-txt{opacity:1}
.rvdm-flow .is-done .fl-line i{height:100%;transition:height .4s ease}
.rvdm-flow .is-cur .fl-line i{height:100%;transition:height var(--dur,3400ms) linear}
/* vignette */
.rvdm-flow .fl-vig{position:relative;order:-1;width:100%;max-width:460px;justify-self:center;height:356px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px rgba(15,31,61,.12);overflow:hidden}
.rvdm-flow .vh{display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-bottom:1px solid var(--line)}
.rvdm-flow .vh img{height:20px;width:auto;flex:none}
.rvdm-flow .vh .ttl{font-size:14px;font-weight:800;white-space:nowrap}
.rvdm-flow .vh .stp{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.rvdm-flow .vh .stp b{color:var(--brand)}
.rvdm-flow .vprog{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 16px 0}
.rvdm-flow .vprog i{display:block;height:4px;border-radius:999px;background:var(--line);position:relative;overflow:hidden}
.rvdm-flow .vprog i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--brand),var(--teal));border-radius:inherit}
.rvdm-flow .vprog i.done::after{width:100%;transition:width .3s ease}
.rvdm-flow .vprog i.is-on::after{width:100%;transition:width var(--dur,3400ms) linear}
.rvdm-flow .sc{position:absolute;left:0;right:0;top:62px;bottom:0;padding:14px 16px 16px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s var(--ease);pointer-events:none}
.rvdm-flow .sc.is-on{opacity:1;transform:none}
.rvdm-flow .scap{font-size:10.5px;margin-bottom:10px}
.rvdm-flow .vfx{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--ease)}
.rvdm-flow .sc.is-on .vfx{opacity:1;transform:none}
.rvdm-flow .sc.is-on .d1{transition-delay:.15s}.rvdm-flow .sc.is-on .d2{transition-delay:.4s}.rvdm-flow .sc.is-on .d3{transition-delay:.65s}
.rvdm-flow .sc.is-on .d4{transition-delay:.9s}.rvdm-flow .sc.is-on .d5{transition-delay:1.15s}.rvdm-flow .sc.is-on .d6{transition-delay:2.5s}
.rvdm-flow .vrow{display:flex;align-items:center;gap:10px;border:1.5px solid transparent;background:var(--light);border-radius:12px;padding:9px 11px;margin-bottom:8px;transition:opacity .45s ease,transform .45s var(--ease),border-color .3s ease,background-color .3s ease,box-shadow .3s ease}
.rvdm-flow .vrow.sel{border-color:var(--brand);background:#fff;box-shadow:0 8px 20px rgba(45,111,232,.14)}
.rvdm-flow .rt{flex:1;min-width:0}
.rvdm-flow .rt b{display:block;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-flow .rt span{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-flow .vnote{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12px;font-weight:700;color:var(--slate)}
.rvdm-flow .vnote svg{width:13px;height:13px;color:var(--brand);flex:none}
.rvdm-flow .vnote.good,.rvdm-flow .vnote.good svg{color:var(--success)}
.rvdm-flow .vfld{display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--line);border-radius:11px;padding:7px 11px;margin-bottom:8px;min-width:0}
.rvdm-flow .vfld span{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rvdm-flow .vfld b{font-size:13px;font-weight:700;min-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-flow .vfld.typing{border-color:var(--brand)}
.rvdm-flow .vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px;margin-top:10px}
.rvdm-flow .vbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:12px;background:var(--navy);color:#fff;font-size:13px;font-weight:800;margin-top:4px;transition:opacity .45s ease,transform .45s var(--ease),background-color .35s ease}
.rvdm-flow .vbtn.ok{background:var(--success)}
.rvdm-flow .vjoin{margin-top:12px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--spring)}
.rvdm-flow .vjoin.on{opacity:1;transform:none}
.rvdm-flow .vhead{display:flex;align-items:center;gap:10px;background:var(--light);border-radius:12px;padding:9px 11px}
.rvdm-flow .trk{margin:14px 24px 2px}
.rvdm-flow .trk .lb{font-size:10.5px}
.rvdm-flow .vlog{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12px;font-weight:700;color:var(--slate);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s var(--ease)}
.rvdm-flow .vlog.in{opacity:1;transform:none}
.rvdm-flow .vlog .li{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(45,111,232,.1);color:var(--brand)}
.rvdm-flow .vlog .li.good{background:rgba(0,199,167,.15);color:var(--success)}
.rvdm-flow .vlog .li svg{width:11px;height:11px}
.rvdm-flow .vlog .lt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-flow .vlog b{color:var(--navy);font-weight:800}
.rvdm-flow .vboth{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:11px;font-size:12px;font-weight:700;color:var(--slate)}
.rvdm-flow .avs{display:flex}
.rvdm-flow .avs .av{box-shadow:0 0 0 2px #fff}
.rvdm-flow .avs .av+.av{margin-left:-7px}
.rvdm-flow .vboth .lt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-flow .vchk{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:13px;font-weight:700;color:var(--slate)}
.rvdm-flow .vchk .ck{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);color:transparent;transition:all .35s var(--spring)}
.rvdm-flow .vchk .ck svg{width:11px;height:11px}
.rvdm-flow .vchk.done{color:var(--navy)}
.rvdm-flow .vchk.done .ck{background:var(--success);border-color:var(--success);color:#fff}
.rvdm-flow .vsig{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.rvdm-flow .vstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px;background:var(--light);border-radius:12px;padding:8px 6px;text-align:center}
.rvdm-flow .vstats b{display:inline-block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.rvdm-flow .vstats b.bump{animation:rvdBump .6s var(--spring)}
.rvdm-flow .vstats span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rvdm-flow .vhist{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid rgba(225,230,239,.7);font-size:12px;min-width:0}
.rvdm-flow .vhist:last-child{border-bottom:0}
.rvdm-flow .vhist .pill{font-size:10px}
.rvdm-flow .vhist b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rvdm-flow .vhist span{margin-left:auto;color:var(--muted);font-weight:600;white-space:nowrap}
.rvdm-flow .vclaim{display:flex;align-items:center;gap:8px;margin-top:2px;border-radius:12px;padding:8px 10px;border:1.5px dashed var(--line);font-size:12px;font-weight:700;color:var(--slate);transition:opacity .45s ease,transform .45s var(--ease),background-color .35s ease,border-color .35s ease}
.rvdm-flow .vclaim .lt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvdm-flow .vclaim .lt b{color:var(--navy)}
.rvdm-flow .vclaim .vb{display:inline-flex;align-items:center;gap:4px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:5px 10px}
.rvdm-flow .vclaim .vb svg{width:10px;height:10px}
.rvdm-flow .vclaim.on{border-style:solid;border-color:rgba(0,199,167,.4);background:rgba(0,199,167,.07)}
.rvdm-flow .vclaim.on .vb{display:none}
.rvdm-flow .sc.is-on .vbtn.ok,.rvdm-flow .sc.is-on .vclaim.on,.rvdm-flow .sc.is-on .vrow.sel{transition-delay:0s}
@media (min-width:960px){
  .rvdm-flow{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px}
  .rvdm-flow .fl-vig{order:0}
  .rvdm-flow .fl-steps{justify-self:stretch}
}
@media (max-width:460px){
  .rvdm-flow .fl-step{gap:16px}
  .rvdm-flow .fl-num{width:42px;height:42px;font-size:15px}
  .rvdm-flow .sc{padding:12px 13px 14px}
  .rvdm-flow .vh{padding:0 13px}
  .rvdm-flow .vprog{padding:10px 13px 0}
  .rvdm-flow .vboth{left:13px;right:13px}
  .rvdm-flow .trk{margin:14px 20px 2px}
  .rvdm-flow .trk .lb{font-size:9.5px}
}

/* =====================================================================
   FAQ accordion (home)  .rvfaq
   ===================================================================== */
.rvfaq{display:flex;flex-direction:column;gap:12px}
.rvfaq-item{background:#fff;border-radius:18px;box-shadow:0 10px 24px rgba(15,31,61,.05);overflow:hidden;transition:background-color .3s ease,box-shadow .3s ease}
.rvfaq-item.is-open{background:#fff;box-shadow:0 0 0 1px rgba(45,111,232,.16),0 16px 34px rgba(15,31,61,.08)}
.rvfaq-h{margin:0;font:inherit}
.rvfaq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;background:transparent;border:0;border-radius:18px;cursor:pointer;text-align:left;font-family:inherit;font-size:16.5px;font-weight:800;line-height:1.35;color:#0F1F3D;min-height:48px}
.rvfaq-q:hover{color:#2763D0}
.rvfaq-q:focus-visible{outline:2px solid #2D6FE8;outline-offset:-3px}
.rvfaq-ic{flex:none;transition:transform .3s ease}
.rvfaq-item.is-open .rvfaq-ic{transform:rotate(45deg)}
.rvfaq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s}
.rvfaq-item.is-open .rvfaq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1),visibility 0s}
.rvfaq-in{min-height:0;overflow:hidden}
.rvfaq-in p{margin:0;padding:0 26px 24px;font-size:15px;line-height:1.65;color:rgba(15,31,61,.68)}
.rvfaq-cta{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0 26px 24px;margin-top:-6px}
.rvfaq-cta a{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;color:#2763D0;text-decoration:none}
.rvfaq-cta a.go{color:#007561}
.rvfaq-cta a:hover{text-decoration:underline;text-underline-offset:3px}
.rvfaq-link{color:#2763D0;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){
  .rvfaq-q{padding:18px 20px;font-size:15.5px}
  .rvfaq-in p{padding:0 20px 20px;font-size:14.5px}
  .rvfaq-cta{padding:0 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  .rvfaq-a,.rvfaq-item.is-open .rvfaq-a,.rvfaq-ic,.rvfaq-item{transition:none}
}

/* =====================================================================
   Header logo (same size on every page, matching components/site/Nav.tsx).
   The mark is /brand/mark-navy-teal.png; the wordmark is the real wordmark from
   /brand/logo-on-light-transparent.png, cropped with background-position (no redraw).
   ===================================================================== */
.rv-wm{display:inline-block;flex:none;width:56px;height:14px;background:url(/brand/logo-on-light-transparent.png) no-repeat;background-size:56.63px auto;background-position:-0.27px -27.55px}
@media (max-width:640px){
  .rv-hmark{height:24px!important}
  .rv-wm{width:52px;height:13px;background-size:52.59px auto;background-position:-0.25px -25.58px}
}

/* Swipeable marquee strips (rv-demos.js initMarquee) */
.rv-mq{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;opacity:1!important;touch-action:pan-x pan-y;cursor:grab;padding:6px 0 26px;margin:-6px 0 -26px}
.rv-mq::-webkit-scrollbar{display:none}
.rv-mq.dragging{cursor:grabbing;user-select:none}
.rv-mq.dragging *{pointer-events:none}

/* "Compatible with" logo row (home, Trusted Partners). Logos are alpha masks
   painted in brand navy; a highlight walks across them in brand blue/teal.
   Small static elements only (no wide moving layer, safe on iPhone). */
.rv-compat{margin:30px auto 0;max-width:900px}
.rv-compat-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,31,61,0.66);margin-bottom:16px}
.rv-compat-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 34px}
.rv-compat-row>span{display:block;flex:0 0 auto;background-color:rgba(15,31,61,.55);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;animation:rvCompatB 9.6s ease-in-out infinite}
.rv-compat-row>span:nth-child(even){animation-name:rvCompatT}
@keyframes rvCompatB{0%,13%,100%{background-color:rgba(15,31,61,.55);transform:none}5%,8%{background-color:#2D6FE8;transform:translateY(-3px) scale(1.06)}}
@keyframes rvCompatT{0%,13%,100%{background-color:rgba(15,31,61,.55);transform:none}5%,8%{background-color:#00806B;transform:translateY(-3px) scale(1.06)}}
.rv-compat--side{margin:0 0 28px;max-width:none}
.rv-compat--side .rv-compat-row{justify-content:flex-start;gap:14px 18px}
.rv-compat--side .rv-compat-row>span{zoom:.82}
@media (max-width:640px){.rv-compat--side .rv-compat-row{justify-content:center}}
@media (max-width:600px){.rv-compat-row{gap:16px 24px}.rv-compat-row>span{zoom:.86}}
@media (prefers-reduced-motion:reduce){.rv-compat-row>span{animation:none}}
.rv-compat .c-lofty{width:74px;height:22px;-webkit-mask-image:url(/brand/crm/lofty.svg);mask-image:url(/brand/crm/lofty.svg);animation-delay:0.0s}
.rv-compat .c-fub{width:62px;height:22px;-webkit-mask-image:url(/brand/crm/followupboss.png);mask-image:url(/brand/crm/followupboss.png);animation-delay:1.2s}
.rv-compat .c-az{width:36px;height:26px;-webkit-mask-image:url(/brand/crm/agencyzoom.png);mask-image:url(/brand/crm/agencyzoom.png);animation-delay:2.4s}
.rv-compat .c-hubspot{width:69px;height:20px;-webkit-mask-image:url(/brand/crm/hubspot.svg);mask-image:url(/brand/crm/hubspot.svg);animation-delay:3.6s}
.rv-compat .c-salesforce{width:40px;height:28px;-webkit-mask-image:url(/brand/crm/salesforce-mask.svg);mask-image:url(/brand/crm/salesforce-mask.svg);animation-delay:4.8s}
.rv-compat .c-zoho{width:56px;height:24px;-webkit-mask-image:url(/brand/crm/zoho.svg);mask-image:url(/brand/crm/zoho.svg);animation-delay:6.0s}
.rv-compat .c-pipedrive{width:88px;height:20px;-webkit-mask-image:url(/brand/crm/pipedrive.svg);mask-image:url(/brand/crm/pipedrive.svg);animation-delay:7.2s}
.rv-compat .c-monday{width:97px;height:18px;-webkit-mask-image:url(/brand/crm/monday.svg);mask-image:url(/brand/crm/monday.svg);animation-delay:8.4s}
.rv-mq-dots{display:none}
/* Phones and tablets: a plain native swipe row. No script moves it, nothing is
   transformed, and the looping duplicates are dropped so the row stays a few
   screens wide (iPhone WebKit leaves very wide moving layers unpainted, which
   showed as a blank strip). Cards snap one at a time with the next one peeking. */
@media (max-width:760px),(hover:none) and (pointer:coarse){
  .rv-mq{scroll-snap-type:x mandatory;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;cursor:auto;padding:6px 0 22px;margin:-6px 0 -12px;transform:none!important}
  .rv-mq-track{gap:14px!important;padding:0 20px!important;animation:none!important;transform:none!important}
  .rv-mq-track>[aria-hidden="true"]{display:none!important}
  .rv-mq-track>*{flex:0 0 min(84vw,320px)!important;scroll-snap-align:start;scroll-snap-stop:always}
  .rv-mq-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .rv-mq-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(15,31,61,.18);transition:width .25s ease,background-color .25s ease;cursor:pointer}
  .rv-mq-dots button[aria-current="true"]{width:22px;background:#2D6FE8}
}

@media (prefers-reduced-motion:reduce){
  .rvdm *,.rvdm *::before,.rvdm *::after{animation:none!important;transition:none!important}
}
.rvdm-hero .both{transition:opacity .5s ease}
.rvdm-desk .nx{transition:opacity .4s ease,transform .15s ease}

/* Sample buttons in the previews open the pricing plans (rv-demos.js goPlans) */
.rvdm-flow .sc.is-on .vbtn{pointer-events:auto}
.rvdm-hero .send,.rvdm-flow .vbtn,.rvdm-desk .hd .new,[data-rv-topricing]{cursor:pointer}
.rvdm-hero .send:hover,.rvdm-flow .vbtn:hover,.rvdm-desk .hd .new:hover,[data-rv-topricing]:hover{filter:brightness(1.18)}

/* Audience pages, "Bring your trusted partners" two-column section (desktop):
   the example card sits at the top beside the heading and stays in view while
   the text column scrolls, and the two columns share the width evenly. */
@media (min-width:1000px){
  [data-rv-tp2]{align-items:flex-end!important;gap:64px!important} /* wrap-reverse flips the cross axis: flex-end = top */
  [data-rv-tp2]>div:first-child{flex:0 1 460px!important;position:sticky;top:110px;align-self:flex-end}
}

/* Same section: the checklist and the callout(s) under it sit centered in the
   text column (list rows stay left-aligned inside the centered block). */
[data-rv-tp-list]{width:fit-content;max-width:100%;margin-left:auto!important;margin-right:auto!important}
[data-rv-tp-note]{display:block!important;text-align:center!important;text-wrap:balance}
[data-rv-tp-note]>svg{display:inline-block;vertical-align:-3px;margin-right:8px}
[data-rv-tp-note]>span{display:inline}

/* ...and the whole text column is centered (eyebrow, heading, copy, logo row). */
[data-rv-tp-col]{text-align:center}
[data-rv-tp-col] .rv-compat--side .rv-compat-row{justify-content:center}

/* Phones: the page's mobile rule ([data-rv-ctr] div:has(>svg) -> left) beat the
   centering above; these win on specificity. Checklist rows and notes center
   with the icon inline beside the text. */
[data-rv-tp-col] [data-rv-tp-note]{text-align:center!important;justify-content:center!important}
[data-rv-tp-col] [data-rv-tp-list]{width:100%}
[data-rv-tp-col] [data-rv-tp-list]>div{display:block!important;text-align:center!important}
[data-rv-tp-col] [data-rv-tp-list]>div>svg{display:inline-block;vertical-align:-3px;margin-right:6px}
[data-rv-tp-col] [data-rv-tp-list]>div>span{display:inline}

/* ---------------------------------------------------------------------------
   Branded referral link section (#referral-link on the marketing pages, and
   /features/referral-link through components/site/features/homeDemoHtml.ts).
   A sample /r/<name> page in a browser frame that mirrors app/r/[handle]: the
   profile card (photo, logo, Verified seal, role, location, bio, preferred
   areas, lines of business) and the send form, on the client path that needs
   no account. One 22s CSS loop:
     0-3s     "Who's sending this?": the pointer picks "A client or friend",
              and the step folds to one line
     3-9s     the client form fills in (name, phone, what they need, that
              type's details) and scrolls to Send
     9-12.5s  "Before you send": the rules scroll, the consent box ticks,
              Accept and continue
     12.4-18s the no-account pop-up: name, email, Email me a code, the 6-digit
              code, Confirm and send
     18-21s   "Referral sent" and the notice on the owner's desk, then it
              starts over.
   The frame keeps its old size at every width (407px tall from 761px up,
   617px from 413px, 659px below): the page area has a fixed height and what
   doesn't fit scrolls, the form column on desktop (the real page keeps the
   profile card in place there) and the whole page on phones. Off screen the
   browser skips drawing it (content-visibility, with a placeholder of the
   same size). Sample data only: made-up people and businesses, free Pexels
   headshots. Under prefers-reduced-motion it's a still of the filled-in form.
   --------------------------------------------------------------------------- */
.rvrl{position:relative;max-width:940px;margin:36px auto 0;text-align:left;line-height:1.3;border-radius:22px;background:#fff;border:1px solid #E1E6EF;box-shadow:0 30px 60px rgba(15,31,61,.14),0 4px 12px rgba(15,31,61,.05);overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 404px}
.rvrl *,.rvrl *::before,.rvrl *::after{box-sizing:border-box}
.rvrl-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#F4F6F9;border-bottom:1px solid #E1E6EF}
.rvrl-dots{display:flex;gap:6px}.rvrl-dots i{width:10px;height:10px;border-radius:99px;background:#D5DBE5;display:block}
.rvrl-url{flex:1;max-width:420px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid #E1E6EF;border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:700;line-height:15px;color:#0F1F3D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvrl-url b{color:#2763D0}
.rvrl-body{position:relative;height:352px;overflow:hidden;background:radial-gradient(closest-side,rgba(0,199,167,.26),transparent) right -120px top -140px/420px 420px no-repeat,radial-gradient(closest-side,rgba(45,111,232,.3),transparent) left -140px bottom -170px/460px 460px no-repeat,linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(135deg,#0F1F3D 0%,#13294d 52%,#021646 100%)}
.rvrl-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:minmax(0,1fr);gap:18px;height:100%;padding:18px}
/* the real page's white cards, floating on the premium navy backdrop */
.rvrl-card,.rvrl-form{background:#fff;border-radius:18px;box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
.rvrl-card{align-self:start;overflow:hidden}
.rvrl-hero{height:52px;background:linear-gradient(135deg,#0F1F3D,#13294d 55%,#0b1a33);position:relative;overflow:hidden}
.rvrl-hero:after{content:"";position:absolute;right:-18px;top:-18px;width:90px;height:90px;border-radius:99px;background:rgba(0,201,167,.22);filter:blur(16px)}
.rvrl-pro{padding:0 18px 16px}
.rvrl-av{position:relative;display:inline-block;margin-top:-36px;padding:3px;border-radius:22px;background:linear-gradient(135deg,#00C9A7,#2D6FE8);box-shadow:0 0 0 4px #fff,0 10px 24px rgba(15,31,61,.18)}
.rvrl-av img.ph{display:block;width:72px;height:72px;border-radius:19px;object-fit:cover;background:#E9EEF5}
.rvrl-av img.lg{position:absolute;right:-9px;bottom:-9px;width:32px;height:32px;border-radius:99px;background:#fff;padding:2px;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(15,31,61,.18)}
/* A sample member whose photo is still to come (build list N3): their initials
   sit in the photo's box, and rv-demos.js puts the photo there once it exists. */
.rv-face{display:grid;place-items:center;flex:none;overflow:hidden;background:#0F1F3D;color:#fff;font-weight:800;line-height:1;letter-spacing:.02em}
.rv-face img{display:block;width:100%;height:100%;object-fit:cover}
.rvrl-av .ph.rv-face{width:72px;height:72px;border-radius:19px;font-size:22px}
.rvrl-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:11px;font-size:20px;font-weight:800;line-height:24px;color:#0F1F3D;letter-spacing:-.01em}
.rvrl-role{margin-top:2px;font-size:13px;font-weight:700;line-height:17px;color:rgba(15,31,61,0.66)}
.rvrl-loc{margin-top:1px;font-size:12px;line-height:16px;color:rgba(15,31,61,0.66)}
.rvrl-bio{margin:7px 0 0;font-size:12px;line-height:17px;color:#0F1F3D}
.rvrl-lbl{margin-top:10px;font-size:9.5px;font-weight:800;line-height:12px;letter-spacing:.07em;text-transform:uppercase;color:rgba(15,31,61,0.66)}
.rvrl-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.rvrl-chips span{font-size:11px;font-weight:700;line-height:14px;padding:3px 9px;border-radius:99px;background:#F4F6F9;border:1px solid #E1E6EF;color:#0F1F3D}
.rvrl-chips.b span{background:rgba(45,111,232,.08);border-color:transparent;color:#2763D0}
/* the send form */
.rvrl-col{position:relative;min-height:0}
.rvrl-form{position:absolute;top:0;left:0;right:0;padding:16px;animation:rvrlScroll 22s infinite}
.rvrl-h{font-size:16.5px;font-weight:800;line-height:20px;color:#0F1F3D}
.rvrl-sub{margin-top:2px;font-size:11.5px;line-height:16px;color:rgba(15,31,61,0.66)}
.rvrl-q{font-size:12px;font-weight:800;line-height:16px;color:#0F1F3D}
/* folds: they open and close by max-height (4px of side room keeps focus rings whole) */
.rvrl-who,.rvrl-as,.rvrl-fields,.rvrl-det{overflow:hidden;margin:0 -4px;padding:0 4px}
.rvrl-who{max-height:300px;animation:rvrlWho 22s infinite}
.rvrl-who .rvrl-q{margin-top:12px}
/* the three choices are buttons (title, one line, a chevron), not radios */
.rvrl-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:8px 12px;border:1px solid #E1E6EF;border-radius:12px;background:#fff}
.rvrl-opt>span{min-width:0}
.rvrl-opt b{display:block;font-size:11.5px;font-weight:800;line-height:15px;color:#0F1F3D}
.rvrl-opt .d{display:block;font-size:10.5px;line-height:14px;color:rgba(15,31,61,0.66)}
.rvrl-opt:after{content:"";flex:none;width:6px;height:6px;margin-right:2px;border-top:1.6px solid rgba(15,31,61,.38);border-right:1.6px solid rgba(15,31,61,.38);transform:rotate(45deg)}
.rvrl-opt.o1{animation:rvrlOpt 22s infinite}
.rvrl-opt.o1:after{animation:rvrlChev 22s infinite}
.rvrl-as{max-height:0;opacity:0;animation:rvrlAs 22s infinite}
.rvrl-as p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:11px 0 0;padding:0 0 9px;border-bottom:1px solid #E1E6EF;font-size:11.5px;line-height:15px;color:rgba(15,31,61,0.66)}
.rvrl-as p b{font-weight:800;color:#0F1F3D}
.rvrl-as p>b{flex:none;color:#2763D0}
.rvrl-fields{max-height:0;opacity:0;animation:rvrlFields 22s infinite}
.rvrl-fields .rvrl-q{margin-top:11px}
.rvrl-f{margin-top:8px}
.rvrl-f>div:first-child{margin-bottom:3px;font-size:10.5px;font-weight:800;line-height:13px;color:#0F1F3D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvrl-f em{font-style:normal;font-weight:600;color:rgba(15,31,61,0.66)}
.rvrl-in{position:relative;height:30px;display:flex;align-items:center;padding:0 9px;border:1px solid #E1E6EF;border-radius:9px;background:#fff;font-size:12px;font-weight:600;line-height:16px;color:#0F1F3D;white-space:nowrap;overflow:hidden}
.rvrl-in .ph{color:rgba(15,31,61,0.66);font-weight:500}
.rvrl-in .ph.p2,.rvrl-in .ph.p4{position:absolute;left:9px}
.rvrl-in .p2{animation:rvrlP2 22s infinite}.rvrl-in .p4{animation:rvrlP4 22s infinite}
.rvrl-in .t{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0}
.rvrl-in.i1{animation:rvrlI1 22s infinite}.rvrl-in.i2{animation:rvrlI2 22s infinite}.rvrl-in.i3{animation:rvrlI3 22s infinite}.rvrl-in.i4{animation:rvrlI4 22s infinite}.rvrl-in.i5{animation:rvrlI5 22s infinite}.rvrl-in.i6{animation:rvrlI6 22s infinite}
.rvrl-in .t1{animation:rvrlT1 22s steps(11,end) infinite}
.rvrl-in .t2{animation:rvrlT2 22s steps(14,end) infinite}
.rvrl-in .t4{animation:rvrlT4 22s steps(10,end) infinite}
.rvrl-in .t5{animation:rvrlT5 22s steps(16,end) infinite}
.rvrl-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.rvrl-hint{margin-top:4px;font-size:10.5px;line-height:14px;color:rgba(15,31,61,0.66)}
.rvrl-sel{padding-right:24px}
.rvrl-sel:after{content:"";position:absolute;right:11px;top:50%;width:5px;height:5px;margin-top:-4px;border-right:1.5px solid rgba(15,31,61,.45);border-bottom:1.5px solid rgba(15,31,61,.45);transform:rotate(45deg)}
.rvrl-sel .v{position:absolute;left:0;top:0;bottom:0;right:22px;display:flex;align-items:center;padding-left:9px;background:#fff;opacity:0}
.rvrl-sel .v3{animation:rvrlV3 22s infinite}.rvrl-sel .v4{animation:rvrlV4 22s infinite}.rvrl-sel .v5{animation:rvrlV5 22s infinite}
.rvrl-det{max-height:0;opacity:0;animation:rvrlDet 22s infinite}
.rvrl-dbox{margin-top:10px;padding:10px;border:1px solid #E1E6EF;border-radius:12px;background:#F8FAFC}
.rvrl-dbox>b{display:block;font-size:11.5px;font-weight:800;line-height:15px;color:#0F1F3D}
.rvrl-dbox>span{display:block;font-size:10.5px;line-height:14px;color:rgba(15,31,61,0.66)}
.rvrl-dbox .rvrl-f{margin-top:6px}
.rvrl-ta{height:44px;align-items:flex-start;padding-top:7px;white-space:normal;font-size:11px;line-height:15px}
.rvrl-send{position:relative;margin-top:12px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:99px;background:#2D6FE8;color:#fff;font-size:12.5px;font-weight:800;line-height:16px;box-shadow:0 8px 18px rgba(45,111,232,.28);animation:rvrlSend 22s infinite}
.rvrl-cap{margin-top:7px;text-align:center;font-size:10.5px;line-height:14px;color:rgba(15,31,61,0.66)}
/* the pointer: it moves in, presses, and leaves */
.rvrl-cur{position:absolute;z-index:2;width:14px;height:19px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M1.6 1.6v16.1l4.1-3.9 2.8 6.2 2.7-1.2-2.8-6.1h5.7z' fill='%230F1F3D' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;opacity:0;pointer-events:none;transform-origin:1px 1px;filter:drop-shadow(0 2px 3px rgba(15,31,61,.3))}
.rvrl-cur.c1{left:80%;top:40%;animation:rvrlC1 22s infinite}
.rvrl-cur.c2{left:60%;top:48%;animation:rvrlC2 22s infinite}
.rvrl-cur.c3{left:15px;top:13px;animation:rvrlC3 22s infinite}
.rvrl-cur.c4{left:30%;top:44%;animation:rvrlC4 22s infinite}
.rvrl-cur.c5{left:58%;top:48%;animation:rvrlC5 22s infinite}
.rvrl-cur.c6{left:58%;top:48%;animation:rvrlC6 22s infinite}
/* "Before you send", the pop-up, sent, and the desk notice */
.rvrl-shade{position:absolute;inset:0;background:rgba(15,31,61,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;animation:rvrlShade 22s infinite}
.rvrl-gate,.rvrl-modal,.rvrl-sent{position:absolute;left:50%;top:50%;background:#fff;box-shadow:0 24px 50px rgba(15,31,61,.3);opacity:0;pointer-events:none}
.rvrl-gate{width:min(392px,90%);border-radius:16px;overflow:hidden;transform:translate(-50%,-46%);animation:rvrlGate 22s infinite}
.rvrl-gate .gh{position:relative;padding:13px 40px 10px 16px;border-bottom:1px solid #E1E6EF}
.rvrl-gate .gh b{display:block;font-size:14.5px;font-weight:800;line-height:18px;color:#0F1F3D}
.rvrl-gate .gh span{display:block;margin-top:2px;font-size:10.5px;font-weight:700;line-height:14px;color:rgba(15,31,61,0.66)}
.rvrl-gate .gh i{position:absolute;right:15px;top:15px;width:12px;height:12px}
.rvrl-gate .gh i:before,.rvrl-gate .gh i:after{content:"";position:absolute;left:5px;top:-1px;width:2px;height:14px;border-radius:2px;background:rgba(15,31,61,.45);transform:rotate(45deg)}
.rvrl-gate .gh i:after{transform:rotate(-45deg)}
.rvrl-gate .gl{height:92px;overflow:hidden;padding:0 16px}
.rvrl-gate .gs{animation:rvrlRules 22s infinite}
.rvrl-gate .gs p{display:flex;gap:9px;margin:0;padding:9px 0;border-bottom:1px solid #EEF1F6;font-size:11px;line-height:16px;color:#0F1F3D}
.rvrl-gate .gs em{flex:none;width:8px;font-style:normal;font-weight:700;color:rgba(15,31,61,0.66)}
.rvrl-gate .gs small{display:block;margin-top:2px;font-size:10px;font-weight:700;line-height:13px;color:rgba(15,31,61,0.66)}
.rvrl-gate .gs .fn{display:block;border:0;font-size:10px;line-height:14px;color:rgba(15,31,61,0.66)}
.rvrl-gate .gf{padding:10px 16px 10px;border-top:1px solid #E1E6EF}
.rvrl-gate .gc{position:relative;display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:10px;background:#F4F6F9;font-size:11px;line-height:15px;color:#0F1F3D}
.rvrl-box{position:relative;flex:none;width:14px;height:14px;margin-top:1px;border-radius:4px;border:1.5px solid #B8C2D3;background:#fff}
.rvrl-box:after{content:"";position:absolute;inset:-1.5px;border-radius:4px;background:#2D6FE8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;opacity:0;animation:rvrlTick 22s infinite}
.rvrl-gate .ga{position:relative;margin-top:8px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:99px;background:#2D6FE8;color:#fff;font-size:12px;font-weight:800;line-height:16px;opacity:.45;animation:rvrlAccept 22s infinite}
.rvrl-gate .gx{padding-top:7px;text-align:center;font-size:11.5px;font-weight:800;line-height:15px;color:rgba(15,31,61,0.66)}
.rvrl-modal{width:min(318px,88%);padding:15px 16px 14px;border-radius:16px;transform:translate(-50%,-46%);animation:rvrlModal 22s infinite}
.rvrl-mo{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;line-height:13px;color:rgba(15,31,61,0.66)}
.rvrl-mo img{flex:none;width:30px;height:30px;border-radius:99px;object-fit:cover;background:#E9EEF5;box-shadow:0 2px 6px rgba(15,31,61,.15)}
.rvrl-mo b{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;line-height:16px;color:#0F1F3D}
.rvrl-steps{display:grid}
.rvrl-steps>div{grid-area:1/1}
.rvrl-steps .m1{animation:rvrlM1 22s infinite}
.rvrl-steps .m2{opacity:0;animation:rvrlM2 22s infinite}
.rvrl-modal .mt{margin-top:10px;font-size:15.5px;font-weight:800;line-height:19px;color:#0F1F3D}
.rvrl-modal .ms{margin-top:3px;font-size:11px;line-height:16px;color:rgba(15,31,61,0.66)}
.rvrl-modal .go{position:relative;margin-top:12px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:99px;background:#2D6FE8;color:#fff;font-size:12px;font-weight:800;line-height:16px}
.rvrl-modal .g1{animation:rvrlGo1 22s infinite}.rvrl-modal .g2{animation:rvrlGo2 22s infinite}
.rvrl-modal .mn{display:flex;align-items:flex-start;justify-content:center;gap:5px;margin-top:9px;text-align:center;font-size:10px;line-height:14px;color:rgba(15,31,61,0.66)}
.rvrl-modal .mn svg{flex:none;margin-top:1px;color:#007561}
.rvrl-modal .mr{margin-top:9px;text-align:center;font-size:11px;font-weight:800;line-height:15px;color:rgba(15,31,61,0.66)}
.rvrl-modal .mr b{color:#2763D0}
.rvrl-modal .mr span{margin:0 8px;color:#E1E6EF}
.rvrl-modal .mf{margin-top:8px;text-align:center;font-size:10px;line-height:14px;color:rgba(15,31,61,0.66)}
.rvrl-code{justify-content:center;height:38px;font-size:18px;font-weight:800;letter-spacing:.32em;font-variant-numeric:tabular-nums}
.rvrl-code .w{position:relative;display:inline-block;margin-right:-.32em}
.rvrl-code .ph{color:rgba(15,31,61,0.66);font-weight:800}
.rvrl-code .t{position:absolute;left:0;top:0;background:#fff;animation:rvrlT6 22s steps(6,end) infinite}
/* sent: the real page's sent card, in its light success tint */
.rvrl-sent{display:flex;flex-direction:column;align-items:center;gap:5px;width:min(300px,86%);padding:20px 22px 18px;border:1px solid rgba(0,153,125,.25);border-radius:18px;background:#F2FAF8;text-align:center;transform:translate(-50%,-50%) scale(.94);animation:rvrlSent 22s infinite}
.rvrl-sent .c{width:38px;height:38px;border-radius:99px;background:#00806B;color:#fff;display:grid;place-items:center;font-size:17px;font-weight:900;line-height:1}
.rvrl-sent .st{margin-top:4px;font-size:15px;font-weight:800;line-height:19px;color:#0F1F3D}
.rvrl-sent .ss{font-size:11.5px;line-height:16px;color:rgba(15,31,61,0.66)}
.rvrl-sent .sa{margin-top:8px;padding:7px 14px;border:1px solid #E1E6EF;border-radius:99px;background:#fff;font-size:11px;font-weight:800;line-height:14px;color:#0F1F3D}
.rvrl-toast{position:absolute;right:12px;top:12px;display:flex;align-items:flex-start;gap:9px;max-width:calc(100% - 24px);padding:10px 14px 10px 12px;border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(15,31,61,.3);font-size:10.5px;font-weight:600;line-height:14px;color:rgba(15,31,61,0.66);opacity:0;transform:translateY(-10px);pointer-events:none;animation:rvrlToast 22s infinite}
.rvrl-toast i{flex:none;width:8px;height:8px;margin-top:4px;border-radius:99px;background:#00C9A7;box-shadow:0 0 0 4px rgba(0,201,167,.22)}
.rvrl-toast b{display:block;font-size:11.5px;font-weight:800;line-height:15px;color:#0F1F3D}
@keyframes rvrlC1{0%,4.55%{opacity:0;transform:translate(26px,18px) scale(1)}5.68%{opacity:1}7.05%,7.86%{transform:translate(0,0) scale(1)}8.18%{transform:translate(0,0) scale(.84)}8.86%{transform:translate(0,0) scale(1)}9.77%{opacity:1}10.91%,100%{opacity:0;transform:translate(0,0) scale(1)}}
@keyframes rvrlC2{0%,37.27%{opacity:0;transform:translate(26px,18px) scale(1)}38.41%{opacity:1}39.77%,40.59%{transform:translate(0,0) scale(1)}40.91%{transform:translate(0,0) scale(.84)}41.59%{transform:translate(0,0) scale(1)}42.5%{opacity:1}43.64%,100%{opacity:0;transform:translate(0,0) scale(1)}}
@keyframes rvrlC3{0%,46.82%{opacity:0;transform:translate(26px,18px) scale(1)}47.95%{opacity:1}49.32%,50.14%{transform:translate(0,0) scale(1)}50.45%{transform:translate(0,0) scale(.84)}51.14%{transform:translate(0,0) scale(1)}51.36%{opacity:1}51.91%,100%{opacity:0;transform:translate(0,0) scale(1)}}
@keyframes rvrlC4{0%,51.45%{opacity:0;transform:translate(-84px,-56px) scale(1)}51.82%{opacity:1}53.41%,54.23%{transform:translate(0,0) scale(1)}54.55%{transform:translate(0,0) scale(.84)}55.23%{transform:translate(0,0) scale(1)}56.14%{opacity:1}57.27%,100%{opacity:0;transform:translate(0,0) scale(1)}}
@keyframes rvrlC5{0%,66.36%{opacity:0;transform:translate(26px,18px) scale(1)}67.5%{opacity:1}68.86%,69.68%{transform:translate(0,0) scale(1)}70%{transform:translate(0,0) scale(.84)}70.68%{transform:translate(0,0) scale(1)}71.59%{opacity:1}72.73%,100%{opacity:0;transform:translate(0,0) scale(1)}}
@keyframes rvrlC6{0%,74.55%{opacity:0;transform:translate(26px,18px) scale(1)}75.68%{opacity:1}77.05%,77.86%{transform:translate(0,0) scale(1)}78.18%{transform:translate(0,0) scale(.84)}78.86%{transform:translate(0,0) scale(1)}79.77%{opacity:1}80.91%,100%{opacity:0;transform:translate(0,0) scale(1)}}
@keyframes rvrlOpt{0%,6.82%{border-color:#E1E6EF;background-color:#fff}7.27%,96.36%{border-color:rgba(45,111,232,.45);background-color:#F8F9FB}96.59%,100%{border-color:#E1E6EF;background-color:#fff}}
@keyframes rvrlChev{0%,6.82%{border-color:rgba(15,31,61,.38);transform:rotate(45deg)}7.27%,96.36%{border-color:#2D6FE8;transform:translateX(2px) rotate(45deg)}96.59%,100%{border-color:rgba(15,31,61,.38);transform:rotate(45deg)}}
@keyframes rvrlP2{0%,21.36%{opacity:1}21.5%,96.36%{opacity:0}96.59%,100%{opacity:1}}
@keyframes rvrlP4{0%,59.09%{opacity:1}59.23%,96.36%{opacity:0}96.59%,100%{opacity:1}}
@keyframes rvrlWho{0%,11.59%{max-height:300px;opacity:1}12.73%{opacity:1}13.64%,96.36%{max-height:0;opacity:0}96.59%,100%{max-height:300px;opacity:1}}
@keyframes rvrlAs{0%,12.95%{max-height:0;opacity:0}14.32%,96.36%{max-height:40px;opacity:1}96.59%,100%{max-height:0;opacity:0}}
@keyframes rvrlFields{0%,13.41%{max-height:0;opacity:0}15.68%,96.36%{max-height:640px;opacity:1}96.59%,100%{max-height:0;opacity:0}}
@keyframes rvrlDet{0%,28.64%{max-height:0;opacity:0}31.36%,96.36%{max-height:200px;opacity:1}96.59%,100%{max-height:0;opacity:0}}
@keyframes rvrlI1{0%,15.91%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}16.27%,20.68%{border-color:#2D6FE8;box-shadow:0 0 0 3px rgba(45,111,232,.13)}21.14%,100%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}}
@keyframes rvrlI2{0%,20.91%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}21.27%,25.68%{border-color:#2D6FE8;box-shadow:0 0 0 3px rgba(45,111,232,.13)}26.14%,100%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}}
@keyframes rvrlI3{0%,25.91%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}26.27%,28.41%{border-color:#2D6FE8;box-shadow:0 0 0 3px rgba(45,111,232,.13)}28.86%,100%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}}
@keyframes rvrlI4{0%,58.64%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}59%,62.95%{border-color:#2D6FE8;box-shadow:0 0 0 3px rgba(45,111,232,.13)}63.41%,100%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}}
@keyframes rvrlI5{0%,63.18%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}63.55%,67.95%{border-color:#2D6FE8;box-shadow:0 0 0 3px rgba(45,111,232,.13)}68.41%,100%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}}
@keyframes rvrlI6{0%,72.73%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}73.09%,76.14%{border-color:#2D6FE8;box-shadow:0 0 0 3px rgba(45,111,232,.13)}76.59%,100%{border-color:#E1E6EF;box-shadow:0 0 0 0 rgba(45,111,232,0)}}
@keyframes rvrlT1{0%,16.36%{width:0}20%,96.36%{width:8ch}96.59%,100%{width:0}}
@keyframes rvrlT2{0%,21.36%{width:0}25%,96.36%{width:11.6ch}96.59%,100%{width:0}}
@keyframes rvrlT4{0%,59.09%{width:0}62.27%,96.36%{width:7.4ch}96.59%,100%{width:0}}
@keyframes rvrlT5{0%,63.64%{width:0}67.5%,96.36%{width:14.6ch}96.59%,100%{width:0}}
@keyframes rvrlT6{0%,72.95%{width:0}75.91%,96.36%{width:100%}96.59%,100%{width:0}}
@keyframes rvrlV3{0%,26.82%{opacity:0}27.27%,96.36%{opacity:1}96.59%,100%{opacity:0}}
@keyframes rvrlV4{0%,32.27%{opacity:0}32.73%,96.36%{opacity:1}96.59%,100%{opacity:0}}
@keyframes rvrlV5{0%,34.09%{opacity:0}34.55%,96.36%{opacity:1}96.59%,100%{opacity:0}}
@keyframes rvrlScroll{0%{transform:translateY(0);opacity:1}28.18%{transform:translateY(0)}30.91%,35.45%{transform:translateY(-110px)}38.18%,94.55%{transform:translateY(-253px);opacity:1}96.36%{transform:translateY(-253px);opacity:0}96.59%,96.82%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes rvrlScrollM{0%{transform:translateY(0);opacity:1}14.09%{transform:translateY(0)}16.82%,35.45%{transform:translateY(-222px)}38.18%,94.55%{transform:translateY(-348px);opacity:1}96.36%{transform:translateY(-348px);opacity:0}96.59%,96.82%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes rvrlScrollS{0%{transform:translateY(0);opacity:1}14.09%{transform:translateY(0)}16.82%,35.45%{transform:translateY(-256px)}38.18%,94.55%{transform:translateY(-405px);opacity:1}96.36%{transform:translateY(-405px);opacity:0}96.59%,96.82%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes rvrlSend{0%,40.64%{transform:scale(1)}41%{transform:scale(.96)}41.64%,100%{transform:scale(1)}}
@keyframes rvrlShade{0%,42.27%{opacity:0}44.09%,94.55%{opacity:1}96.36%,100%{opacity:0}}
@keyframes rvrlGate{0%,42.73%{opacity:0;transform:translate(-50%,-46%)}44.55%,55.45%{opacity:1;transform:translate(-50%,-50%)}56.82%,100%{opacity:0;transform:translate(-50%,-53%)}}
@keyframes rvrlGateM{0%,42.73%{transform:translateY(calc(100% + 60px))}44.77%,55.45%{transform:translateY(0)}57.05%,100%{transform:translateY(calc(100% + 60px))}}
@keyframes rvrlRules{0%,45.45%{transform:translateY(0)}48.18%,57.73%{transform:translateY(calc(-100% + 92px))}58.18%,100%{transform:translateY(0)}}
@keyframes rvrlTick{0%,50.59%{opacity:0}50.91%,57.73%{opacity:1}58.18%,100%{opacity:0}}
@keyframes rvrlAccept{0%,50.68%{opacity:.45;transform:scale(1)}51.36%{opacity:1}54.27%{transform:scale(1)}54.64%{transform:scale(.96)}55.27%{transform:scale(1)}57.73%{opacity:1}58.18%,100%{opacity:.45;transform:scale(1)}}
@keyframes rvrlModal{0%,56.36%{opacity:0;transform:translate(-50%,-46%) scale(1)}58.18%,78.86%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%,100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}}
@keyframes rvrlModalM{0%,56.82%{transform:translateY(calc(100% + 60px))}58.86%,78.86%{transform:translateY(0)}80%,100%{transform:translateY(calc(100% + 60px))}}
@keyframes rvrlM1{0%,70.45%{opacity:1;transform:translateX(0)}71.45%,80.91%{opacity:0;transform:translateX(-14px)}81.36%,100%{opacity:1;transform:translateX(0)}}
@keyframes rvrlM2{0%,71.45%{opacity:0;transform:translateX(14px)}72.73%,80.91%{opacity:1;transform:translateX(0)}81.36%,100%{opacity:0;transform:translateX(14px)}}
@keyframes rvrlGo1{0%,69.73%{transform:scale(1)}70.09%{transform:scale(.96)}70.73%,100%{transform:scale(1)}}
@keyframes rvrlGo2{0%,77.91%{transform:scale(1)}78.27%{transform:scale(.96)}78.91%,100%{transform:scale(1)}}
@keyframes rvrlSent{0%,79.91%{opacity:0;transform:translate(-50%,-50%) scale(.94)}81.59%,94.55%{opacity:1;transform:translate(-50%,-50%) scale(1)}96.36%,100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}}
@keyframes rvrlToast{0%,82.73%{opacity:0;transform:translateY(-10px)}84.55%,94.55%{opacity:1;transform:translateY(0)}95.91%,100%{opacity:0;transform:translateY(-10px)}}
@media (max-width:760px){
  .rvrl{contain-intrinsic-size:auto 614px}
  .rvrl-body{height:562px}
  .rvrl-page{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto;gap:12px;padding:12px;animation:rvrlScrollM 22s infinite}
  .rvrl-pro .rvrl-lbl,.rvrl-pro .rvrl-chips{display:none}
  .rvrl-form{position:relative;animation:none}
  .rvrl-fields .rvrl-two,.rvrl-dbox .rvrl-two{grid-template-columns:minmax(0,1fr);gap:0}
  .rvrl-gate,.rvrl-modal{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:18px 18px 0 0;box-shadow:0 -12px 30px rgba(15,31,61,.25);opacity:1;transform:translateY(calc(100% + 60px))}
  .rvrl-gate{animation-name:rvrlGateM}
  .rvrl-modal{padding:16px 16px 18px;animation-name:rvrlModalM}
  .rvrl-toast{left:10px;right:10px;top:10px;max-width:none}
}
@media (max-width:412px){
  .rvrl{contain-intrinsic-size:auto 656px}
  .rvrl-body{height:604px}
}
@media (max-width:359px){
  .rvrl-page{animation-name:rvrlScrollS}
}
@media (prefers-reduced-motion:reduce){
  .rvrl *,.rvrl *::after{animation:none!important}
  .rvrl-who{max-height:0;opacity:0}
  .rvrl-as,.rvrl-fields,.rvrl-det{max-height:none;opacity:1}
  .rvrl-in .t{width:auto}
  .rvrl-in .p2,.rvrl-in .p4{opacity:0}
  .rvrl-sel .v{opacity:1}
}
/* Refervia Line (build list 2.11): a partner calls a member's Line, the
   referral is written up on the member's Referral Desk, and one tap adds it
   (received, New). Sample data only. 12s loop. */
.rvln{position:relative;max-width:940px;margin:36px auto 0;text-align:left;border-radius:22px;background:#fff;border:1px solid #E1E6EF;box-shadow:0 30px 60px rgba(15,31,61,.14),0 4px 12px rgba(15,31,61,.05);overflow:hidden}
.rvln-bar{padding:11px 14px;background:#F4F6F9;border-bottom:1px solid #E1E6EF;text-align:center;font-size:12.5px;font-weight:700;color:rgba(15,31,61,0.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvln-bar b{color:#0F1F3D;font-variant-numeric:tabular-nums}
.rvln-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;padding:18px;background:radial-gradient(closest-side,rgba(0,199,167,.26),transparent) right -120px top -140px/420px 420px no-repeat,radial-gradient(closest-side,rgba(45,111,232,.3),transparent) left -140px bottom -170px/460px 460px no-repeat,linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(135deg,#0F1F3D 0%,#13294d 52%,#021646 100%)}
.rvln-call,.rvln-draft{background:#fff;border-radius:18px;padding:18px;box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
.rvln-who{display:flex;align-items:center;gap:10px}
.rvln-av{position:relative;width:40px;height:40px;border-radius:99px;background:#0F1F3D;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
/* The caller's sample photo with their made-up business logo (build list N2). */
.rvln-av:has(img){background:none}
.rvln-av img.ph{display:block;width:40px;height:40px;border-radius:99px;object-fit:cover;background:#E9EEF5}
.rvln-av img.lg{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:99px;background:#fff;box-shadow:0 0 0 2px #fff}.rvln-n{font-size:15px;font-weight:800;color:#0F1F3D}
.rvln-s{font-size:11.5px;font-weight:700;color:rgba(15,31,61,0.66)}
.rvln-wave{margin-left:auto;display:flex;align-items:center;gap:3px;height:22px;animation:rvlnLive 12s infinite}
.rvln-wave i{display:block;width:3px;height:6px;border-radius:2px;background:#00C9A7;animation:rvlnWave 1.1s ease-in-out infinite}
.rvln-wave i:nth-child(2){animation-delay:.15s}.rvln-wave i:nth-child(3){animation-delay:.3s}.rvln-wave i:nth-child(4){animation-delay:.45s}.rvln-wave i:nth-child(5){animation-delay:.6s}
.rvln-tx{margin-top:14px;display:grid;gap:10px}
.rvln-tx p{margin:0;font-size:12.5px;line-height:1.5;color:#0F1F3D;opacity:0}
.rvln-tx b{display:block;font-size:10.5px;font-weight:800;color:rgba(15,31,61,0.66);margin-bottom:1px}
.rvln-tx .x1{animation:rvlnX1 12s infinite}
.rvln-tx .x2{animation:rvlnX2 12s infinite}
.rvln-tx .x3{animation:rvlnX3 12s infinite}
.rvln-h{font-size:16px;font-weight:800;color:#0F1F3D}
.rvln-sub{margin-top:2px;font-size:11.5px;color:rgba(15,31,61,0.66)}
.rvln-f{margin-top:10px}
.rvln-f>div:first-child{font-size:11px;font-weight:800;color:#0F1F3D;margin-bottom:4px}
.rvln-in{height:34px;border:1px solid #E1E6EF;border-radius:10px;padding:0 10px;display:flex;align-items:center;font-size:12.5px;font-weight:600;color:#0F1F3D;overflow:hidden;white-space:nowrap}
.rvln-in .t{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0}
.rvln-in .t1{animation:rvlnT1 12s steps(11,end) infinite}
.rvln-in .t2{animation:rvlnT2 12s steps(14,end) infinite}
.rvln-in .t3{animation:rvlnT3 12s steps(9,end) infinite}
.rvln-in .t4{animation:rvlnT4 12s steps(20,end) infinite}
.rvln-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rvln-send{position:relative;margin-top:12px;height:38px;border-radius:99px;background:#2D6FE8;color:#fff;font-size:12.5px;font-weight:800;box-shadow:0 8px 18px rgba(45,111,232,.28);animation:rvlnSend 12s infinite}
.rvln-send span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.rvln-send .a{animation:rvlnSendA 12s infinite}
.rvln-send .b{opacity:0;animation:rvlnSendB 12s infinite}
.rvln-toast{position:absolute;right:14px;top:4px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:#fff;color:#0F1F3D;font-size:11.5px;font-weight:700;box-shadow:0 14px 30px rgba(15,31,61,.3);opacity:0;transform:translateX(16px);animation:rvlnToast 12s infinite;pointer-events:none}
.rvln-toast i{width:8px;height:8px;border-radius:99px;background:#00C9A7;display:block;box-shadow:0 0 0 4px rgba(0,201,167,.22)}
@keyframes rvlnWave{0%,100%{height:6px}50%{height:20px}}
@keyframes rvlnLive{0%,40%{opacity:1}44%,94%{opacity:.2}100%{opacity:1}}
@keyframes rvlnX1{0%,3%{opacity:0}7%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes rvlnX2{0%,14%{opacity:0}18%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes rvlnX3{0%,28%{opacity:0}32%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes rvlnT1{0%,44%{width:0}50%,94%{width:11ch}98%,100%{width:0}}
@keyframes rvlnT2{0%,50%{width:0}57%,94%{width:14ch}98%,100%{width:0}}
@keyframes rvlnT3{0%,57%{width:0}62%,94%{width:9ch}98%,100%{width:0}}
@keyframes rvlnT4{0%,62%{width:0}70%,94%{width:20ch}98%,100%{width:0}}
@keyframes rvlnSend{0%,78%{transform:none;background:#2D6FE8}80%{transform:scale(.96);background:#2D6FE8}83%,94%{transform:none;background:#00806B;box-shadow:0 8px 18px rgba(0,153,125,.28)}98%,100%{background:#2D6FE8}}
@keyframes rvlnSendA{0%,80%{opacity:1}82%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes rvlnSendB{0%,81%{opacity:0}83%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes rvlnToast{0%,72%{opacity:0;transform:translateX(16px)}76%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(16px)}}
@media (max-width:760px){
  .rvln-body{grid-template-columns:1fr;padding:12px;gap:12px}
  .rvln-toast{top:auto;bottom:14px;right:50%;transform:translateX(50%)}
  @keyframes rvlnToast{0%,72%{opacity:0}76%,92%{opacity:1}96%,100%{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .rvln-wave,.rvln-wave i{animation:none}
  .rvln-tx p{animation:none;opacity:1}
  .rvln-in .t{animation:none;width:auto}
  .rvln-toast{animation:none;opacity:1;transform:none}
  .rvln-send,.rvln-send .a,.rvln-send .b{animation:none}
}

/* ---------------------------------------------------------------------------
   Refervia Line on the landing pages (#refervia-line, LN1, Perry, Oct 20:
   "show better visually that its a phone system"). Grace's number, then a
   phone taking a partner's call to her Line: it rings, the Line answers, the
   call timer and the waveform run, the live transcript underlines the
   client's name, number, need and area as they're said, the call ends, a
   notification comes in, and the referral is on her Referral Desk with Add to
   my desk. Calls only: no texting in a Line (Perry, Oct 16). Built in the Line
   page's own look (its navy card and big number, the app's call screen with
   Mute / Keypad / End, glyphs from components/dashboard/admin/phone/ui.tsx),
   so it never reads as the referral link's browser window (.rvrl).
   /features/refervia-line keeps .rvln above. One 16s CSS loop, sample data
   only, never taller than .rvln at any width. The resting styles are the
   reduced-motion still: the call on the phone, the referral on the desk.
   --------------------------------------------------------------------------- */
.rvph{position:relative;display:grid;grid-template-columns:332px minmax(0,1fr);max-width:940px;height:384px;margin:36px auto 0;text-align:left;border-radius:26px;overflow:hidden;color:#fff;
  background:radial-gradient(closest-side,rgba(0,199,167,.22),transparent) right -130px top -160px/460px 460px no-repeat,radial-gradient(closest-side,rgba(45,111,232,.3),transparent) left 14% bottom -200px/480px 480px no-repeat,radial-gradient(130% 150% at 0% 0%,#22407D 0%,#0F1F3D 46%,#021646 100%);
  box-shadow:0 30px 60px -20px rgba(2,22,70,.5),0 4px 12px rgba(15,31,61,.06)}
.rvph-well{position:relative;min-width:0}
/* the phone: a dark bezel in a thin metal edge, cut off by the card's bottom edge */
.rvph-phone{position:absolute;left:62px;top:28px;width:252px;height:540px;padding:8px;border-radius:46px;background:#05080F;box-shadow:0 0 0 1.5px #3A455F,0 0 0 3px #0B111D,0 40px 70px -20px rgba(0,0,0,.75)}
.rvph-scr{position:relative;height:100%;border-radius:38px;overflow:hidden;text-align:center;background:linear-gradient(180deg,#1B3466 0%,#10224A 40%,#0A1631 100%)}
.rvph-sb{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 21px 0 27px;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:#fff}
/* A generic phone (no Apple details, like the Download page's phones): a small centered camera. */
.rvph-isl{position:absolute;left:50%;top:13px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 2px #0B111D}
.rvph-bat{position:relative;display:block;width:22px;height:11px;border-radius:3.5px;box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.5)}
.rvph-bat:before{content:"";position:absolute;left:2.2px;top:2.2px;bottom:2.2px;width:13px;border-radius:1.5px;background:#fff}
.rvph-bat:after{content:"";position:absolute;right:-3px;top:3.5px;width:1.6px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.5)}
.rvph-to{position:relative;height:17px;margin-top:10px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.66)}
.rvph-to span{position:absolute;left:0;right:0;top:0;white-space:nowrap}
.rvph-to .a{opacity:0}
.rvph-pic{position:relative;width:68px;height:68px;margin:22px auto 0}
.rvph-pic i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(0,199,167,.7);opacity:0}
.rvph-pic img.ph{position:relative;display:block;width:68px;height:68px;border-radius:50%;object-fit:cover;background:#22355E;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.rvph-pic img.lg{position:absolute;right:-5px;bottom:-4px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #112450}
.rvph-pic .ph.rv-face{position:relative;width:68px;height:68px;border-radius:50%;font-size:21px;background:#22355E;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.rvph-name{margin-top:12px;font-size:21px;font-weight:700;letter-spacing:-.015em;color:#fff}
.rvph-biz{margin-top:1px;font-size:13px;font-weight:500;color:rgba(255,255,255,.6)}
/* incoming, then the live timer and waveform, then call ended, in one place */
.rvph-st{display:grid;justify-items:center;height:20px;margin-top:14px;font-size:13px;font-weight:600;color:rgba(255,255,255,.62)}
.rvph-st>span{grid-area:1/1;display:flex;align-items:center;gap:10px;white-space:nowrap}
.rvph-st .s1,.rvph-st .s3{opacity:0}
.rvph-clk{display:block;height:20px;line-height:20px;overflow:hidden;font-weight:700;color:#00C7A7;font-variant-numeric:tabular-nums}
.rvph-clk>span{display:block;transform:translateY(-120px)}
.rvph-wv{display:flex;align-items:center;gap:2.5px;height:18px}
.rvph-wv i{display:block;width:2.5px;height:18px;border-radius:2px;background:#00C7A7;transform:scaleY(.4)}
.rvph-wv i:nth-child(2),.rvph-wv i:nth-child(10){transform:scaleY(.65)}
.rvph-wv i:nth-child(3),.rvph-wv i:nth-child(8){transform:scaleY(.9)}
.rvph-wv i:nth-child(5),.rvph-wv i:nth-child(12){transform:scaleY(.55)}
.rvph-wv i:nth-child(6){transform:scaleY(1)}
.rvph-wv i:nth-child(7){transform:scaleY(.7)}
.rvph-wv i:nth-child(11){transform:scaleY(.3)}
/* the call controls: Decline / Accept while it rings, then Mute / Keypad / End */
.rvph-keys{display:grid;margin-top:18px}
.rvph-keys>div{grid-area:1/1;display:flex;justify-content:center;gap:14px}
.rvph-keys .k1{justify-content:space-between;padding:0 26px;opacity:0}
.rvph-k{display:flex;flex-direction:column;align-items:center;gap:6px;width:60px;font-size:11px;font-weight:500;line-height:14px;color:rgba(255,255,255,.74)}
.rvph-k i{position:relative;display:block;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.15)}
.rvph-k i:before{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:var(--g) center/24px no-repeat;mask:var(--g) center/24px no-repeat}
.rvph-k.no i,.rvph-k.end i{background:#E5484D}
.rvph-k.yes i{background:#00806B}
.rvph-k.yes i:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(0,199,167,.55)}
.rvph-k.no,.rvph-k.end{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 14.6c-.7-.7-.6-1.8.1-2.4C5.9 10.1 8.9 9 12 9s6.1 1.1 8.6 3.2c.7.6.8 1.7.1 2.4l-1.2 1.2a1.3 1.3 0 01-1.7.1l-1.9-1.4a1.3 1.3 0 01-.5-1.1v-1.6a9.7 9.7 0 00-6.8 0v1.6c0 .4-.2.8-.5 1.1l-1.9 1.4a1.3 1.3 0 01-1.7-.1l-1.2-1.2z'/%3E%3C/svg%3E")}
.rvph-k.yes{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.2 3.8l1.7 3.9a1.4 1.4 0 01-.4 1.6L7.9 10.7a11 11 0 005.4 5.4l1.4-1.6a1.4 1.4 0 011.6-.4l3.9 1.7a1.4 1.4 0 01.8 1.6l-.6 2.6a1.4 1.4 0 01-1.4 1.1C10.6 21.1 2.9 13.4 2.9 4.9a1.4 1.4 0 011.1-1.4l2.6-.6a1.4 1.4 0 011.6.9z'/%3E%3C/svg%3E")}
.rvph-k.mic{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a3 3 0 00-3 3v5.5a3 3 0 006 0V6.5a3 3 0 00-3-3zM5.5 11.5a6.5 6.5 0 0013 0M12 18v2.5'/%3E%3C/svg%3E")}
.rvph-k.pad{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='5.5' r='1.6'/%3E%3Ccircle cx='12' cy='5.5' r='1.6'/%3E%3Ccircle cx='18' cy='5.5' r='1.6'/%3E%3Ccircle cx='6' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3Ccircle cx='6' cy='18.5' r='1.6'/%3E%3Ccircle cx='12' cy='18.5' r='1.6'/%3E%3Ccircle cx='18' cy='18.5' r='1.6'/%3E%3C/svg%3E")}
/* the notification that comes in when the call ends */
.rvph-push{position:absolute;left:6px;right:6px;top:6px;z-index:2;display:flex;align-items:flex-start;gap:9px;padding:9px 10px 10px;border-radius:20px;background:rgba(244,246,250,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#0F1F3D;text-align:left;box-shadow:0 14px 30px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(-130%)}
.rvph-push .ic{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-top:1px;border-radius:8px;background:#0F1F3D}
.rvph-push .ic img{display:block;width:19px;height:auto}
.rvph-push .tx{min-width:0;flex:1}
.rvph-push .ap{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:700;line-height:14px;color:rgba(15,31,61,0.66)}
.rvph-push .ap em{font-style:normal;font-weight:500}
.rvph-push b{display:block;margin-top:1px;font-size:11.5px;font-weight:800;line-height:15px;text-wrap:balance}
.rvph-push .tx>span:last-child{display:block;margin-top:1px;font-size:11px;line-height:14px;color:rgba(15,31,61,.7);text-wrap:balance}
/* beside the phone: Grace's number while it rings, the live transcript, then the referral on her desk */
.rvph-side{display:grid;align-items:center;min-width:0;padding:28px 52px 28px 12px}
.rvph-id,.rvph-tx,.rvph-desk{grid-area:1/1}
.rvph-id{opacity:0}
.rvph-id span{display:block;font-size:14px;font-weight:600;color:rgba(255,255,255,.62)}
.rvph-id b{display:block;margin-top:6px;font-size:42px;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvph-tx{display:grid;gap:14px;max-width:480px}
.rvph-tx p{margin:0;font-size:15.5px;line-height:1.5;font-weight:500;color:#fff;opacity:0}
.rvph-tx b{display:block;margin-bottom:2px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.5)}
.rvph-tx .x1 b{color:#00C7A7}
/* what the Line picked out of the call, underlined in teal as it's said */
.rvph-tx em{font-style:normal;white-space:nowrap;padding-bottom:1px;background:linear-gradient(#00C7A7,#00C7A7) 0 100%/100% 2px no-repeat}
.rvph-desk{justify-self:start;width:100%;max-width:400px;padding:16px 18px 18px;border-radius:20px;background:#fff;color:#0F1F3D;box-shadow:0 26px 50px -22px rgba(0,0,0,.7)}
.rvph-dh{display:flex;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid #E1E6EF;font-size:12px;font-weight:700;color:rgba(15,31,61,0.66);white-space:nowrap}
.rvph-dh span:last-child{font-weight:600;color:rgba(15,31,61,0.66)}
.rvph-ref{display:flex;align-items:flex-start;gap:12px;margin-top:14px}
.rvph-ini{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#0F1F3D,#2A3F66);color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.02em}
.rvph-who{min-width:0}
.rvph-who b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.rvph-who>span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:rgba(15,31,61,.68)}
.rvph-who i{font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums}
.rvph-from{margin-top:12px;font-size:12px;line-height:1.45;color:rgba(15,31,61,0.66)}
/* the desk's own Add to my desk button (ReferralDrafts.tsx), green once it's added */
.rvph-add{display:inline-grid;margin-top:14px;border-radius:10px;background:#0F1F3D;color:#fff;font-size:12.5px;font-weight:800}
.rvph-add span{grid-area:1/1;display:flex;align-items:center;justify-content:center;height:36px;padding:0 16px;white-space:nowrap}
.rvph-add .b{opacity:0}
/* the 16s loop: number and ringing 0-1.8s, the Line answers at 1.8s,
   transcript 2.2-9.8s (facts underlined: m1-m3 and m5 in the partner's first
   line, m4 in the second), call ends at 9.8s, notification and desk
   10.3-11s, Add to my desk at 12.7s, back to the number at 15.5s */
.rvph-id{animation:rvphId 16s infinite}
.rvph-to .a,.rvph-st .s1,.rvph-keys .k1{animation:rvphRinging 16s infinite}
.rvph-to .b{animation:rvphOn 16s infinite}
.rvph-st .s2{animation:rvphCall 16s infinite}
.rvph-keys .k2{animation:rvphCallK 16s infinite}
.rvph-st .s3{animation:rvphEnded 16s infinite}
.rvph-pic i{animation:rvphPulse 1.6s cubic-bezier(.2,.6,.3,1) infinite,rvphRinging 16s infinite}
.rvph-pic i+i{animation-delay:-.8s,0s}
.rvph-k.yes i:after{animation:rvphAccept 1.6s infinite}
.rvph-clk>span{animation:rvphClk 16s steps(8,end) infinite}
.rvph-wv i{animation:rvphWave 1.1s ease-in-out infinite}
.rvph-wv i:nth-child(3n){animation-duration:.85s}
.rvph-wv i:nth-child(3n+1){animation-duration:1.3s}
.rvph-wv i:nth-child(2){animation-delay:-.3s}.rvph-wv i:nth-child(3){animation-delay:-.6s}.rvph-wv i:nth-child(4){animation-delay:-.15s}
.rvph-wv i:nth-child(5){animation-delay:-.45s}.rvph-wv i:nth-child(6){animation-delay:-.75s}.rvph-wv i:nth-child(7){animation-delay:-.2s}
.rvph-wv i:nth-child(8){animation-delay:-.5s}.rvph-wv i:nth-child(9){animation-delay:-.9s}.rvph-wv i:nth-child(10){animation-delay:-.35s}
.rvph-wv i:nth-child(11){animation-delay:-.65s}.rvph-wv i:nth-child(12){animation-delay:-.1s}
.rvph-push{animation:rvphPush 16s cubic-bezier(.2,.8,.2,1) infinite}
.rvph-tx .x1{animation:rvphX1 16s infinite}
.rvph-tx .x2{animation:rvphX2 16s infinite}
.rvph-tx .x3{animation:rvphX3 16s infinite}
.rvph-tx .m1{animation:rvphM1 16s infinite}
.rvph-tx .m2{animation:rvphM2 16s infinite}
.rvph-tx .m3{animation:rvphM3 16s infinite}
.rvph-tx .m4{animation:rvphM4 16s infinite}
.rvph-tx .m5{animation:rvphM5 16s infinite}
.rvph-desk{animation:rvphDesk 16s cubic-bezier(.2,.8,.2,1) infinite}
.rvph-add{animation:rvphAdd 16s infinite}
.rvph-add .a{animation:rvphAddA 16s infinite}
.rvph-add .b{animation:rvphAddB 16s infinite}
@keyframes rvphId{0%,10.6%{opacity:1;transform:none}13.1%{opacity:0;transform:translateY(-8px)}96.9%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
/* one state out before the next comes in, so two never overlap mid-swap */
@keyframes rvphRinging{0%,10.6%{opacity:1}11.9%,96.9%{opacity:0}100%{opacity:1}}
@keyframes rvphOn{0%,11.9%{opacity:0}13.1%,94.4%{opacity:1}95.6%,100%{opacity:0}}
@keyframes rvphCall{0%,11.9%{opacity:0}13.1%,61.25%{opacity:1}62.5%,100%{opacity:0}}
@keyframes rvphCallK{0%,11.9%{opacity:0;transform:translateY(6px)}13.75%,61.25%{opacity:1;transform:none}62.5%,100%{opacity:0;transform:none}}
@keyframes rvphEnded{0%,62.5%{opacity:0}63.75%,94.4%{opacity:1}95.6%,100%{opacity:0}}
@keyframes rvphPulse{0%{transform:scale(1);border-color:rgba(0,199,167,.75)}100%{transform:scale(1.8);border-color:rgba(0,199,167,0)}}
@keyframes rvphAccept{0%{box-shadow:0 0 0 0 rgba(0,199,167,.55)}70%,100%{box-shadow:0 0 0 12px rgba(0,199,167,0)}}
@keyframes rvphClk{0%,11.25%{transform:translateY(0)}61.25%,100%{transform:translateY(-160px)}}
@keyframes rvphWave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes rvphPush{0%,64.4%{opacity:0;transform:translateY(-130%)}67.5%,93.75%{opacity:1;transform:none}96.9%,100%{opacity:0;transform:translateY(-130%)}}
@keyframes rvphX1{0%,13.75%{opacity:0;transform:translateY(8px)}16.25%,28.75%{opacity:1;transform:none}31.25%,62.5%{opacity:.5;transform:none}65%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes rvphX2{0%,28.75%{opacity:0;transform:translateY(8px)}31.25%,46.25%{opacity:1;transform:none}48.75%,62.5%{opacity:.5;transform:none}65%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes rvphX3{0%,46.25%{opacity:0;transform:translateY(8px)}48.75%,62.5%{opacity:1;transform:none}65%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes rvphM1{0%,32.5%{background-size:0 2px}35%,100%{background-size:100% 2px}}
@keyframes rvphM2{0%,35.6%{background-size:0 2px}38.1%,100%{background-size:100% 2px}}
@keyframes rvphM3{0%,39.4%{background-size:0 2px}41.9%,100%{background-size:100% 2px}}
@keyframes rvphM4{0%,50.6%{background-size:0 2px}53.1%,100%{background-size:100% 2px}}
@keyframes rvphM5{0%,42.5%{background-size:0 2px}45%,100%{background-size:100% 2px}}
@keyframes rvphDesk{0%,65%{opacity:0;transform:translateY(14px)}68.75%,93.75%{opacity:1;transform:none}96.9%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes rvphAdd{0%,78.75%{transform:none;background-color:#0F1F3D}79.7%{transform:scale(.96);background-color:#0F1F3D}81.25%,96.9%{transform:none;background-color:#00806B}97%,100%{transform:none;background-color:#0F1F3D}}
@keyframes rvphAddA{0%,80%{opacity:1}81.25%,96.9%{opacity:0}97%,100%{opacity:1}}
@keyframes rvphAddB{0%,80%{opacity:0}81.25%,96.9%{opacity:1}97%,100%{opacity:0}}
/* narrower: the phone steps down a size beside the transcript */
@media (max-width:760px){
  .rvph{grid-template-columns:250px minmax(0,1fr)}
  .rvph-phone{left:20px;transform:scale(.88);transform-origin:0 0}
  .rvph-side{padding:24px 26px 24px 18px}
  .rvph-id b{font-size:32px}
  .rvph-tx p{font-size:14px}
}
/* phones: the phone on top, fading out where the card cuts it, then the number, transcript and desk under it */
@media (max-width:599px){
  .rvph{display:block;height:auto}
  .rvph-well{height:372px;-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
  .rvph-phone{left:50%;top:18px;margin-left:-126px;transform:none}
  .rvph-side{padding:2px 18px 20px}
  .rvph-id b{font-size:30px}
  .rvph-tx{gap:12px}
  .rvph-desk{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .rvph *,.rvph *:before,.rvph *:after{animation:none!important}
}