/* Sections carried over from the previous Rivuni site.
   Every selector is scoped under .rv-legacy, so this file can never reach
   the hero, the statement or the three process cards of the new design. */

.rv-legacy{
    --ink:#141110;
    --white:#ffffff;
    --coral:#BE3F22;
    --coral-deep:#96301A;
    --coral-soft:#FDF1EC;
    --amber:#C98A13;
    --mint:#1FB98A;
    --muted:rgba(20,17,16,.62);
    --muted-2:rgba(20,17,16,.72);
    --label:rgba(20,17,16,.70);
    --line:rgba(20,17,16,.08);
    --line-2:rgba(20,17,16,.13);
    --fill:rgba(20,17,16,.03);
    --wa:#25d366;
  }
.rv-legacy *{margin:0;padding:0;box-sizing:border-box}
.rv-legacy [hidden]{display:none!important}
.rv-legacy{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h,76px) + 24px)}
.rv-legacy{
    font-family:var(--font-body);
    background:var(--white);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    letter-spacing:-.012em;
    overflow-x:hidden;
  }
.rv-legacy .wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.rv-legacy section{position:relative;background:var(--white);isolation:isolate}
  @media(max-width:900px){}
.rv-legacy .grad{color:var(--coral)}
  @keyframes shimmer{to{background-position:-220% center}}
.rv-legacy /* NAV */
  nav{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--line)}
.rv-legacy nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:76px}
.rv-legacy nav .navlinks{position:absolute;left:50%;transform:translateX(-50%)}
.rv-legacy .logo{font-size:25px;letter-spacing:-.012em;display:inline-flex;align-items:center;line-height:1}
.rv-legacy .logo span{color:var(--coral)}
/* The lockup keeps the ratios measured off the original artwork: the mark
   diameter is 1.16 times the ink height of the wordmark, and the R starts at
   0.87 of a mark width from its edge. */
/* The logo is the original artwork, so nothing about it is redrawn: the mark,
   the wordmark and their spacing come from the file itself. Height is the only
   thing the page decides. */
.rv-legacy .logo--img{display:inline-flex;align-items:center;line-height:1}
.rv-legacy .logo-img{display:block;width:auto;height:22px}
.rv-legacy footer .logo-img{height:22px}
.rv-legacy .logo-img--light{display:none}

.rv-legacy .logo--img{transition:opacity .25s ease}
.rv-legacy .logo--img:hover{opacity:.82}

.rv-legacy .navlinks{display:flex;gap:34px;align-items:center}
.rv-legacy .navlinks a{color:var(--muted-2);text-decoration:none;font-size:15.5px;font-weight:500;letter-spacing:-.01em;transition:color .2s}
.rv-legacy .navlinks a:hover{color:var(--ink)}
.rv-legacy .cta{background:var(--ink);color:var(--white)!important;text-decoration:none;padding:11px 20px;border-radius:10px;font-size:15px;font-weight:500;transition:opacity .2s}
.rv-legacy .cta:hover{opacity:.85}
  @media(max-width:760px){
.rv-legacy .navlinks a:not(.cta){display:none}}
.rv-legacy /* HERO */
  header{position:relative;isolation:isolate;padding:88px 0 0;text-align:center;background:#ffffff;}
.rv-legacy header .wrap{position:relative}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(190,63,34,.5)}70%{box-shadow:0 0 0 9px rgba(190,63,34,0)}100%{box-shadow:0 0 0 0 rgba(190,63,34,0)}}
.rv-legacy h1,.rv-legacy h2,.rv-legacy h3,.rv-legacy h4,.rv-legacy h5{font-family:var(--font-display);font-weight:400}
.rv-legacy h1{font-size:clamp(44px,7vw,86px);line-height:1.0;letter-spacing:-.015em;margin:0 auto;max-width:14ch}
.rv-legacy .sub,.rv-legacy .ch-sub{font-family:var(--font-display);font-weight:400}
.rv-legacy .btn-primary{background:var(--coral);color:#fff;padding:14px 26px;border-radius:12px;text-decoration:none;font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 26px -10px rgba(190,63,34,.6)}
.rv-legacy .btn-primary:hover{background:var(--coral-deep);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(190,63,34,.7)}
.rv-legacy .proof span{display:inline-flex;align-items:center;gap:7px}
.rv-legacy .proof svg{width:15px;height:15px;color:var(--coral)}
.rv-legacy .hm-check-row svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;stroke:var(--mint);stroke-width:2;animation:checkFadeIn 0.6s ease-out}
.rv-legacy .hm-check-row span{color:rgba(20,17,16,.75);line-height:1.3;font-weight:500}
.rv-legacy .hm-buttons button{flex:1;padding:9px 14px;font-size:12px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all .2s;line-height:1}
.rv-legacy /* responsive scale-down */
  @media(max-width:1024px){
  }
  @media(max-width:820px){
  }
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  @media(prefers-reduced-motion:reduce){}
  @keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.rv-legacy .order-chip .ok svg{width:14px;height:14px;color:#fff}
.rv-legacy .order-chip .txt b{display:block;font-size:13px;font-weight:600;letter-spacing:-.02em}
.rv-legacy .order-chip .txt span{font-size:11.5px;color:var(--muted)}
.rv-legacy /* Rivuni demo embed: autoplays,.rv-legacy then blurs behind the email gate (scoped to #demoContainer) */
  .demo-band{position:relative;margin-top:80px;border-top:1px solid rgba(20,17,16,.07);border-bottom:1px solid rgba(20,17,16,.07)}
.rv-legacy #demoContainer{position:relative;isolation:isolate;width:min(1200px,calc(100% - 160px));aspect-ratio:1200/613;margin:0 auto;border-radius:0;background:#fff;overflow:hidden}
.rv-legacy #demoFrame{display:block;width:100%;height:100%;border:0;background:transparent}
.rv-legacy #demoFrame:focus{outline:0}
.rv-legacy #demoReveal h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3.2vw,42px);line-height:1.15;letter-spacing:-.015em;color:#141110;margin:0 0 12px}
.rv-legacy #demoGateForm{width:100%;max-width:520px;margin:0 auto;text-align:left}
.rv-legacy .dr-field.err{border-color:#96301A}
.rv-legacy #demoEmail{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:16px;padding:13px 16px;color:var(--ink)}
.rv-legacy #demoEmail::placeholder{color:var(--muted)}
.rv-legacy #demoWatchBtn{flex-shrink:0;min-height:48px;font-family:var(--font-body);font-weight:500;font-size:15px;background:#BE3F22;color:#141110;border:0;border-radius:12px;padding:13px 26px;cursor:pointer;white-space:nowrap;box-shadow:0 8px 24px rgba(190,63,34,.3);transition:transform 200ms ease-out,box-shadow 200ms ease-out}
.rv-legacy #demoWatchBtn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(190,63,34,.4)}
.rv-legacy #demoWatchBtn:focus-visible{outline:3px solid #141110;outline-offset:3px}
.rv-legacy #demoWatchBtn[disabled]{opacity:.72;cursor:default;transform:none}
.rv-legacy #demoReveal .dr-note.err{color:#96301A;font-weight:500}
  @media(max-width:900px){
.rv-legacy #demoContainer{width:92vw}
  }
  @media(max-width:760px){
.rv-legacy #demoContainer{aspect-ratio:5/6}
.rv-legacy #demoReveal{padding:20px}
  }
  @media(max-width:640px){
.rv-legacy .wrap{padding:0 20px}
.rv-legacy .close-form{flex-direction:column;align-items:stretch;gap:12px;padding:12px}
.rv-legacy #closeEmail{padding:12px 8px;border:1px solid var(--line-2);border-radius:11px}
.rv-legacy #closeSubmit{width:100%}
.rv-legacy .close{padding:88px 0 72px}

.rv-legacy #demoContainer{width:calc(100% - 40px)}
.rv-legacy #demoEmail{font-size:16px;padding:12px 8px;border:1px solid var(--line-2);border-radius:11px}
.rv-legacy #demoWatchBtn{width:100%;min-height:48px}
  }
  @media(max-width:760px){
.rv-legacy .steps,.rv-legacy .feat,.rv-legacy .brain,.rv-legacy .about,.rv-legacy .close{padding:64px 0}
  }
  @media(prefers-reduced-motion:reduce){
.rv-legacy #demoWatchBtn{transition:none}
.rv-legacy #demoWatchBtn:hover{transform:none}
  }
.rv-legacy /* SCROLL-TRIGGERED PRODUCT REVEAL - TRANSPARENT,.rv-legacy REAL-TIME PROGRESSIVE */

  .screen{background:#0b141a;border-radius:34px;overflow:hidden;height:600px;display:flex;flex-direction:column;text-align:left;
    background-image:linear-gradient(rgba(11,20,26,.94),rgba(11,20,26,.94)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23ffffff' stroke-opacity='.02' stroke-width='1'/%3E%3C/svg%3E")}
.rv-legacy .wa-status b{color:var(--wa);font-weight:500}
.rv-legacy .bubble .t{display:block;font-size:9.5px;color:#8696a0;text-align:right;margin-top:3px}
.rv-legacy .typing span{width:6.5px;height:6.5px;border-radius:50%;background:#8696a0;animation:blink 1.2s infinite}
.rv-legacy .typing span:nth-child(2){animation-delay:.2s}
.rv-legacy .typing span:nth-child(3){animation-delay:.4s}
  @keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
  @keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rv-legacy .replay button{background:none;border:1px solid rgba(255,255,255,.18);color:#8696a0;font-size:11.5px;padding:5px 13px;border-radius:100px;cursor:pointer;font-family:inherit;transition:.2s}
.rv-legacy .replay button:hover{color:#e9edef;border-color:#e9edef}
  @media(max-width:820px){}
.rv-legacy .tag{display:inline-block;font-size:12px;font-weight:600;color:var(--label);text-transform:uppercase;letter-spacing:.16em;margin-bottom:18px}
.rv-legacy h2{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.3vw,48px);line-height:1.08;letter-spacing:-.015em}
.rv-legacy /* how it works,.rv-legacy played as a sequence */
  .flow{position:relative;margin-top:52px}
.rv-legacy .flow-rail{position:absolute;top:41px;left:16%;right:16%;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.rv-legacy .flow-fill{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--coral),var(--amber));transition:width .7s cubic-bezier(.16,.8,.3,1)}
.rv-legacy .flow-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.rv-legacy .flow-step{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px 24px 22px;transition:border-color .35s,box-shadow .35s,transform .35s}

/* Hover lifts a step the way the active one sits, so the three cards answer
   the pointer instead of waiting to be clicked. */
/* Hovering a step lifts it and grows it a little, and the other two step
   back, so the one under the pointer is unmistakable. */
.rv-legacy .flow-step{transform-origin:50% 55%;will-change:transform}
.rv-legacy .flow-step:hover{position:relative;z-index:2;border-color:rgba(190,63,34,.32);box-shadow:0 38px 70px -34px rgba(90,38,22,.5);transform:translateY(-10px) scale(1.045)}
.rv-legacy .flow-steps:hover .flow-step:not(:hover){opacity:.72;transform:scale(.985)}
.rv-legacy .flow-step{transition:border-color .35s,box-shadow .35s,transform .38s cubic-bezier(.22,.72,.25,1),opacity .35s ease}
.rv-legacy .flow-step:hover .fs-k{background:var(--ink);color:#fff}
.rv-legacy .flow-step:hover .fs-t{color:var(--coral)}
.rv-legacy .fs-k,.rv-legacy .fs-t{transition:background .3s ease,color .3s ease}
.rv-legacy .flow-step .plat,.rv-legacy .flow-step .chan-t,.rv-legacy .flow-step .know-row{transition:transform .3s cubic-bezier(.22,.72,.25,1),border-color .3s ease,box-shadow .3s ease,background .3s ease}
.rv-legacy .flow-step .plat:hover,.rv-legacy .flow-step .chan-t:hover{transform:translateY(-2px);border-color:rgba(190,63,34,.4);box-shadow:0 10px 20px -12px rgba(90,38,22,.4)}
.rv-legacy .flow-step .know-row:hover{border-color:rgba(190,63,34,.3);background:rgba(190,63,34,.035)}
@media(hover:none){.rv-legacy .flow-step:hover{transform:none;box-shadow:none;border-color:var(--line)}}
@media(prefers-reduced-motion:reduce){.rv-legacy .flow-step,.rv-legacy .flow-step:hover,.rv-legacy .flow-step .plat:hover,.rv-legacy .flow-step .chan-t:hover{transition:none;transform:none}}
.rv-legacy .fs-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.rv-legacy .fs-head:focus-visible{outline:3px solid var(--ink);outline-offset:5px;border-radius:10px}
.rv-legacy .fs-k{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:var(--fill);color:var(--label);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px;transition:background .35s,color .35s}

.rv-legacy .fs-t{font-size:18.5px;font-weight:600;letter-spacing:-.03em}
.rv-legacy .fs-p{font-size:14.5px;color:var(--muted-2);line-height:1.55;margin-top:14px}
.rv-legacy .fs-vis{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rv-legacy .fs-cap{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--label);margin-bottom:12px}
.rv-legacy /* step 1,.rv-legacy platforms */
  .plats{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rv-legacy .plat{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:13px;padding:11px 15px;font-size:14.5px;font-weight:500;color:var(--ink);background:var(--white);transition:border-color .45s,color .45s}
.rv-legacy .plat svg{height:22px;width:auto;max-width:36px;flex-shrink:0}
.rv-legacy .plat.live{position:relative}
.rv-legacy .plat.live::after{content:"";position:absolute;inset:-3px;border-radius:14px;border:1px solid rgba(190,63,34,.55);opacity:0;pointer-events:none}
.rv-legacy .flow-step:hover .plat.live::after{animation:platPing 2.2s ease-out .15s 2}
  @keyframes platPing{0%{opacity:.9;transform:scale(.98)}70%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
.rv-legacy .plat .st{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--label);margin-left:2px}
.rv-legacy .plat.live{color:var(--ink);border-color:rgba(20,17,16,.24)}
.rv-legacy .plat.live .st{color:var(--ink);background:var(--coral-soft);padding:3px 8px;border-radius:7px}
.rv-legacy .sync-row .ck{flex-shrink:0;width:17px;height:17px;border-radius:50%;background:var(--coral-soft);display:flex;align-items:center;justify-content:center}
.rv-legacy .sync-row .ck svg{width:10px;height:10px;color:var(--ink)}
.rv-legacy /* step 2,.rv-legacy product knowledge */
  .know{display:grid;gap:7px}
.rv-legacy .know-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.rv-legacy .know-row span{color:var(--label)}
.rv-legacy .know-row b{color:var(--ink);font-weight:500;text-align:right}
.rv-legacy .know-note{margin-top:11px;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--ink);background:var(--coral-soft);border-radius:100px;padding:5px 11px}
.rv-legacy /* step 3,.rv-legacy channels */
  .chans{display:flex;flex-wrap:wrap;gap:7px}
.rv-legacy .chan-t{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:11px;padding:7px 10px;font-size:12.5px;font-weight:500;color:var(--ink);background:var(--white)}
.rv-legacy .chan-t svg{width:14px;height:14px;color:var(--coral-deep)}
.rv-legacy .who{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.rv-legacy .who-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--coral-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.rv-legacy .who b{font-weight:600;color:var(--ink)}
.rv-legacy .who-m{font-size:11.5px;color:var(--label)}
.rv-legacy .chat-line{margin-top:10px;display:grid;gap:7px}
.rv-legacy .chat-b{max-width:92%;font-size:12.5px;line-height:1.45;border-radius:12px;padding:9px 12px}
.rv-legacy .chat-b.out{background:var(--fill);color:var(--ink)}
.rv-legacy .chat-b.in{justify-self:end;background:var(--ink);color:#fff}
.rv-legacy /* the entrance replays on whichever step becomes active,.rv-legacy nothing is ever left blank */
  @keyframes flowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  @keyframes flowPop{from{opacity:0;transform:translateY(9px) scale(.94)}to{opacity:1;transform:none}}
  @keyframes flowSlide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.rv-legacy .flow-step:hover .plat.live{border-color:rgba(190,63,34,.4)}
.rv-legacy .flow.static .flow-step{transition:none;transform:none}
.rv-legacy .flow.static .flow-step *{animation:none}
  @media(max-width:820px){
.rv-legacy .flow-steps{grid-template-columns:1fr}
.rv-legacy .flow-rail{display:none}
.rv-legacy .fs-vis{min-height:0}
  }
  @media(prefers-reduced-motion:reduce){
.rv-legacy .flow-step,.rv-legacy .plat,.rv-legacy .flow-fill{transition:none}

  }
.rv-legacy .step .k{width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px;margin-bottom:18px}
.rv-legacy .step h3{font-size:18.5px;font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
.rv-legacy .step p{font-size:14.5px;color:var(--muted-2);line-height:1.55}
  @media(max-width:820px){}
.rv-legacy .shift .wrap{position:relative;z-index:1}
.rv-legacy .sc-ic svg{width:16px;height:16px;color:var(--muted)}
.rv-legacy .sc-body b{font-weight:600;color:var(--ink)}
.rv-legacy .sc-flip svg{width:20px;height:20px}
.rv-legacy .fomo p{font-size:15.5px;color:var(--muted-2);line-height:1.55}
.rv-legacy /* FEATURES */
  .feat{padding:96px 0}
.rv-legacy /* alternating left/right feature splits (karumi-style) */
  .splits{display:flex;flex-direction:column;gap:40px;margin-top:104px}
.rv-legacy .split-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.rv-legacy .split-text .tag{margin-bottom:16px}
.rv-legacy .split-text h3{font-family:var(--font-display);font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.015em;line-height:1.12;margin-bottom:14px}
.rv-legacy .split-text p{font-size:16px;color:var(--muted-2);line-height:1.55;max-width:40ch}
.rv-legacy .vpanel{border-radius:26px;padding:40px 34px;min-height:320px;display:flex;flex-direction:column;justify-content:center;gap:16px;position:relative;overflow:hidden;
    background:linear-gradient(150deg,#F6E4CE 0%,#E5A277 48%,#C2482A 100%);box-shadow:0 44px 100px -55px rgba(190,63,34,.6),inset 0 0 0 1px rgba(255,255,255,.22)}
.rv-legacy .split-row.reverse .vpanel{order:-1}
.rv-legacy .v-card{background:#fff;border-radius:16px;padding:12px;box-shadow:0 26px 50px -24px rgba(20,17,16,.35);max-width:300px}
.rv-legacy .v-thumb{height:126px;border-radius:11px;background:linear-gradient(to top,rgba(20,17,16,.62),rgba(20,17,16,0) 58%),linear-gradient(135deg,#55231A,#D0603A);display:flex;align-items:flex-end;padding:13px;color:#fff;font-weight:600;font-size:15px;letter-spacing:-.02em}
.rv-legacy .v-meta{display:flex;justify-content:space-between;align-items:center;padding:12px 5px 4px;font-size:13px;color:var(--muted-2)}
.rv-legacy .v-sold{color:var(--ink);background:linear-gradient(95deg,var(--coral),var(--coral-deep));padding:4px 11px;border-radius:100px;font-weight:600;font-size:11px}
.rv-legacy .v-chip{align-self:flex-start;background:#fff;border-radius:100px;padding:9px 15px;font-size:12.5px;font-weight:600;box-shadow:0 16px 30px -14px rgba(20,17,16,.3);display:inline-flex;align-items:center;gap:8px}
.rv-legacy .v-chip svg{width:15px;height:15px;color:var(--coral-deep)}
.rv-legacy .v-profile{background:#fff;border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;box-shadow:0 26px 50px -24px rgba(20,17,16,.35);max-width:320px}
.rv-legacy .v-profile .pav{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--coral-deep));color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.rv-legacy .v-profile b{font-size:15px;letter-spacing:-.02em}
.rv-legacy .v-profile span{display:block;font-size:12.5px;color:var(--muted)}
.rv-legacy .v-tags{display:flex;flex-wrap:wrap;gap:8px;max-width:340px}
.rv-legacy .v-tags span{background:rgba(255,255,255,.9);border-radius:100px;padding:7px 13px;font-size:12.5px;font-weight:600;color:#2E1109;box-shadow:0 6px 14px -8px rgba(20,17,16,.2)}
.rv-legacy .v-langs{display:flex;flex-wrap:wrap;gap:9px}
.rv-legacy .v-langs span{background:#fff;border-radius:100px;padding:9px 16px;font-size:13.5px;font-weight:600;color:#2E1109;box-shadow:0 10px 22px -12px rgba(20,17,16,.25)}
.rv-legacy .v-langs span.on{background:#141110;color:#fff}
.rv-legacy .v-wave{display:flex;align-items:center;gap:5px;height:34px;margin-top:6px}
.rv-legacy .v-wave i{width:5px;border-radius:5px;background:rgba(255,255,255,.95);animation:wave 1.1s ease-in-out infinite}
  @keyframes wave{0%,100%{height:26%}50%{height:100%}}
  @media(prefers-reduced-motion:reduce){
.rv-legacy .v-wave i{animation:none;height:60%}}
.rv-legacy /* interactive states */
  .vpanel.sell,.rv-legacy .vpanel.cust{cursor:pointer}
.rv-legacy .vpanel.sell:active,.rv-legacy .vpanel.cust:active{transform:scale(.992)}
.rv-legacy .v-sold{cursor:pointer}
.rv-legacy .vpanel.sell .v-chip{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,.8,.3,1)}
.rv-legacy .vpanel.sell.done .v-chip{opacity:1;transform:none}
.rv-legacy .v-langs span{cursor:pointer;transition:background .2s,color .2s,transform .2s}
.rv-legacy .v-langs span:hover{transform:translateY(-1px)}
.rv-legacy .v-sample{align-self:flex-start;background:#fff;border-radius:13px;padding:11px 15px;font-size:14px;font-weight:500;color:var(--ink);box-shadow:0 16px 30px -16px rgba(20,17,16,.28);margin-top:4px;transition:opacity .25s}
  @media(max-width:820px){
.rv-legacy .split-row{grid-template-columns:1fr;gap:24px}
.rv-legacy .split-row.reverse .vpanel{order:0}
.rv-legacy .vpanel{min-height:240px}}
  @media(max-width:820px){}
.rv-legacy /* BRAIN */
  .brain{padding:96px 0;background:var(--white)}
.rv-legacy .brain-grid h2{text-align:left}
  @media(max-width:900px){
.rv-legacy .brain-grid h2{text-align:center}
.rv-legacy .brain-grid .l{text-align:center}}
.rv-legacy .memory .row .k{color:var(--muted)}
.rv-legacy .memory .row .v{font-weight:500;text-align:right}
.rv-legacy .layer{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--white);transition:transform .25s,box-shadow .25s,border-color .25s;cursor:pointer}
.rv-legacy .layer:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(20,17,16,.2);border-color:var(--line-2)}
.rv-legacy .layer.active{border-color:rgba(190,63,34,.5);box-shadow:0 22px 46px -30px rgba(190,63,34,.45);background:linear-gradient(180deg,#fff,#FCF3EC)}
.rv-legacy .mem-view{animation:memfade .4s ease}
.rv-legacy .mem-view[hidden]{display:none}
  @keyframes memfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rv-legacy .pill.on{color:#fff;background:linear-gradient(95deg,var(--coral),var(--coral-deep));border-color:transparent}
.rv-legacy .layer p{font-size:14px;color:var(--muted-2);line-height:1.55}
  @media(max-width:820px){}
.rv-legacy .ml.live{border-color:rgba(190,63,34,.4);background:linear-gradient(180deg,#fff,#FCF3EC);box-shadow:0 22px 46px -30px rgba(190,63,34,.4)}
.rv-legacy .mlh b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.rv-legacy .ml p{font-size:14.5px;color:var(--muted-2);line-height:1.5}
.rv-legacy /* communication section */
  .comm-hero{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.rv-legacy .ch-title{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;line-height:1.06;margin:16px 0 16px}
.rv-legacy .ch-sub{font-size:16px;color:var(--muted-2);line-height:1.5;margin-bottom:26px;max-width:42ch}
.rv-legacy .comm-rows{display:flex;flex-direction:column}
.rv-legacy .comm-rows>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.rv-legacy .comm-rows>div:last-child{border:none}
.rv-legacy .comm-rows span{color:var(--muted)}
.rv-legacy .comm-rows b{font-weight:500}
.rv-legacy .orbit{position:relative;height:340px}
.rv-legacy .orbit-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%}
.rv-legacy .orbit-ring.r1{width:210px;height:210px}
.rv-legacy .orbit-ring.r2{width:330px;height:330px}
.rv-legacy .orbit-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:124px;height:124px;border-radius:50%;background:linear-gradient(150deg,#E5A277,#C2482A);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);font-size:23px;box-shadow:0 22px 44px -16px rgba(190,63,34,.6)}
.rv-legacy .orbit-core span{font-family:var(--font-body);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:1;color:rgba(20,17,16,.78);margin-top:3px}
.rv-legacy .chan{position:absolute;background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:12.5px;font-weight:600;box-shadow:0 10px 24px -12px rgba(20,17,16,.28);display:flex;align-items:center;gap:7px;white-space:nowrap}
.rv-legacy .chan::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.rv-legacy .c-wa{top:18%;left:2%}
.rv-legacy .c-sms{top:8%;right:8%}
.rv-legacy .c-em{bottom:16%;left:0}
.rv-legacy .c-web{bottom:12%;right:2%}
.rv-legacy /* orbit animation */
  .orbit .chan{opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .55s cubic-bezier(.2,1.5,.4,1)}
.rv-legacy .orbit.lit .chan{opacity:1;transform:scale(1)}
.rv-legacy .orbit.lit .c-wa{transition-delay:.15s}
.rv-legacy .orbit.lit .c-sms{transition-delay:.3s}
.rv-legacy .orbit.lit .c-em{transition-delay:.45s}
.rv-legacy .orbit.lit .c-web{transition-delay:.6s}
.rv-legacy .orbit-core{animation:corePulse 3.4s ease-in-out infinite}
  @keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}
.rv-legacy .orbit-ping{position:absolute;top:50%;left:50%;width:124px;height:124px;border-radius:50%;border:1.5px solid rgba(190,63,34,.45);opacity:0}
.rv-legacy .orbit.lit .orbit-ping{animation:ping 3.4s ease-out infinite}
.rv-legacy .orbit.lit .orbit-ping.p2{animation-delay:1.7s}
  @keyframes ping{0%{transform:translate(-50%,-50%) scale(1);opacity:.55}100%{transform:translate(-50%,-50%) scale(2.7);opacity:0}}
.rv-legacy /* Hero mockup animations */
  @keyframes heroSlideUp{from{opacity:0.001;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
  @keyframes scoreBarFill{from{width:0}to{width:45%}}
  @keyframes checkFadeIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
  @keyframes sideCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @media(prefers-reduced-motion:reduce){
.rv-legacy .orbit-core,.rv-legacy .orbit-ping{animation:none}
.rv-legacy .orbit .chan{opacity:1;transform:none}}
  @media(max-width:820px){
.rv-legacy .comm-hero{grid-template-columns:1fr;gap:32px}
.rv-legacy .orbit{height:300px}}
.rv-legacy .prod.featured p{color:rgba(58,18,7,.82)}
.rv-legacy .prod.featured .inc li{color:#2E1109}
.rv-legacy .prod.featured .inc li svg{color:#2E1109}
.rv-legacy .prod-ic svg{width:28px;height:28px}
.rv-legacy .prod h3{font-family:var(--font-display);font-size:23px;font-weight:500;letter-spacing:-.015em;margin-bottom:10px}
.rv-legacy .prod p{font-size:14.5px;color:var(--muted-2);line-height:1.55}
.rv-legacy .prod .inc li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink);line-height:1.4}
.rv-legacy .prod .inc li svg{width:16px;height:16px;color:var(--coral-deep);flex-shrink:0;margin-top:1px}
  @media(max-width:820px){}
.rv-legacy .about{padding:96px 0;background:var(--white)}
.rv-legacy .dash-bar .dots span{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.rv-legacy .dash-side .dbrand span{color:var(--coral)}
.rv-legacy .dnav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13.5px;color:var(--muted-2);margin-bottom:3px;text-decoration:none}
.rv-legacy .dnav a svg{width:16px;height:16px;flex-shrink:0}
.rv-legacy .dnav a.on{background:var(--coral-soft);color:var(--coral-deep);font-weight:500}
.rv-legacy .dash-main{padding:26px 28px}
.rv-legacy .dgrid .f{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.rv-legacy .dinsight .spark svg{width:15px;height:15px;color:#fff}
.rv-legacy .dinsight .it b{color:var(--coral-deep)}
.rv-legacy .dnav a{cursor:pointer}
.rv-legacy .dview{animation:memfade .35s ease;min-height:300px}
.rv-legacy .dview[hidden]{display:none}
.rv-legacy .cst.live{color:var(--coral-deep);background:var(--coral-soft);border-color:transparent}
  @media(max-width:760px){}
.rv-legacy .why .tag{color:var(--label)}
.rv-legacy .why h2{color:var(--ink)}
.rv-legacy .stage{position:relative;padding-top:44px;cursor:pointer;transition:opacity .35s}
.rv-legacy .stage:not(.on){opacity:.6}
.rv-legacy .stage h4{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.rv-legacy .stage p{font-size:13.5px;color:var(--muted-2);line-height:1.5}
  @media(max-width:820px){
.rv-legacy .stage{padding-top:0;opacity:1}}
.rv-legacy /* CLOSE */
  .close{padding:140px 0 120px;text-align:center;position:relative;overflow:hidden;background:var(--white)}

.rv-legacy .close .wrap{position:relative;z-index:1}
.rv-legacy .close-form{display:flex;align-items:center;gap:6px;width:100%;max-width:520px;margin:36px auto 0;box-sizing:border-box;background:#fff;border:1px solid var(--line-2);border-radius:15px;padding:6px;box-shadow:0 30px 56px -28px rgba(20,17,16,.4)}
.rv-legacy .close-form:focus-within{border-color:rgba(20,17,16,.38)}
.rv-legacy .close-form.err{border-color:#96301A}
.rv-legacy #closeEmail{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:16px;padding:13px 16px;color:var(--ink)}
.rv-legacy #closeEmail::placeholder{color:var(--muted)}
.rv-legacy #closeSubmit{flex-shrink:0;min-height:48px;background:linear-gradient(95deg,var(--coral),var(--coral-deep));color:#fff;border:0;border-radius:12px;padding:13px 26px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 26px -12px rgba(190,63,34,.7)}
.rv-legacy #closeSubmit:hover{transform:translateY(-1px)}
.rv-legacy #closeSubmit:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.rv-legacy #closeSubmit[disabled]{opacity:.72;cursor:default;transform:none}
.rv-legacy .close-note{font-size:13px;color:var(--muted-2);margin-top:14px}
.rv-legacy .close-note.err{color:#96301A;font-weight:500}
.rv-legacy .close-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.rv-legacy .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rv-legacy .close .wrap{position:relative;z-index:1}
.rv-legacy .close h2{font-size:clamp(32px,4.4vw,54px);max-width:min(980px,100%);margin:0 auto;line-height:1.1;letter-spacing:-.02em}
.rv-legacy footer{border-top:1px solid var(--line);padding:72px 0 32px;background:var(--white)}
.rv-legacy footer .cols{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.rv-legacy footer .logo{font-size:19px;margin-bottom:8px}
.rv-legacy footer .tagf{font-size:14px;line-height:1.5;color:var(--muted-2);max-width:28ch;margin-top:14px}
.rv-legacy footer .fnav{display:flex;gap:64px;flex-wrap:wrap}
.rv-legacy footer .fcol h5{font-family:var(--font-body);font-size:14px;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px;font-weight:600}
.rv-legacy footer .fcol a{display:block;color:var(--muted-2);text-decoration:none;font-size:14.5px;margin-bottom:14px;transition:color .2s}
.rv-legacy footer .fcol a:hover{color:var(--ink)}
.rv-legacy footer .base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--muted)}
.rv-legacy /* karumi-style reveal (class name is 'rv in',.rv-legacy WhatsApp bubbles use wa-in/wa-out,.rv-legacy no collision) */
  .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1)}
.rv-legacy .rv.in{opacity:1;transform:none}
.rv-legacy .rv-d1{transition-delay:.08s}
.rv-legacy .rv-d2{transition-delay:.16s}
.rv-legacy .rv-d3{transition-delay:.24s}
  @media(prefers-reduced-motion:reduce){
.rv-legacy .rv,.rv-legacy .rv-d1,.rv-legacy .rv-d2,.rv-legacy .rv-d3{opacity:1;transform:none;transition:none}}
.rv-legacy /* ==========================================================
     Redesigned blocks: intelligence cards,.rv-legacy recommendation,.rv-legacy rewards and about. Scoped to .rd so nothing else changes.
     ========================================================== */
  .rd{font-family:var(--font-body);font-size:16px;line-height:1.55;color:#141110;text-align:left}
.rv-legacy .rd h2,.rv-legacy .rd h3{font-family:var(--font-display);font-weight:500;margin:0}
.rv-legacy .rd p{margin:0}
.rv-legacy .rd h2{font-size:clamp(34px,4.4vw,50px);line-height:1.1;letter-spacing:-.03em}
.rv-legacy .rd h3{font-size:27px;line-height:1.2;letter-spacing:-.022em}
.rv-legacy .rd .accent{color:#9E3A22}
.rv-legacy .rd .eyebrow{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#6B615B}
.rv-legacy .rd .intro{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:end;padding-bottom:40px}
.rv-legacy .rd .intro h2{margin-top:20px;font-size:clamp(32px,3.8vw,46px)}
.rv-legacy .rd .intro>p{font-size:18px;line-height:1.65;color:#6B615B;max-width:400px;padding-bottom:4px}
.rv-legacy .rd .cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rv-legacy .rd .card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #F2ECE4;border-radius:20px;padding:28px;transition:transform .32s cubic-bezier(.22,.72,.25,1),box-shadow .32s ease,border-color .32s ease}
/* Hovering lifts a card slightly, just enough to read as live. */
.rv-legacy .rd .card:hover{transform:translateY(-4px) scale(1.018);border-color:rgba(190,63,34,.22);box-shadow:0 22px 48px -20px rgba(90,38,22,.32)}
@media (prefers-reduced-motion: reduce){.rv-legacy .rd .card{transition:none}.rv-legacy .rd .card:hover{transform:none}}
.rv-legacy .rd .card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.rv-legacy .rd .index{font-size:12px;color:#82736b}
.rv-legacy .rd .card h3{margin-bottom:10px}
.rv-legacy .rd .desc{font-size:15px;line-height:1.6;color:#6B615B}
.rv-legacy .rd .example{margin-top:24px;border-radius:12px;background:#faf7f5;padding:20px;flex:1;min-height:148px}
.rv-legacy .rd .product-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid #e5dbd3}
.rv-legacy .rd .product-head strong{font-size:17px;font-weight:500}
.rv-legacy .rd .rd-pill{display:inline-block;border:1px solid #e3d7cf;border-radius:20px;padding:3px 10px;font-size:12px;white-space:nowrap;color:#6B615B}
.rv-legacy .rd .attributes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.rv-legacy .rd .attributes small{display:block;font-size:12px;color:#6B615B;margin-bottom:4px}
.rv-legacy .rd .attributes strong{font-size:14px;font-weight:500}
.rv-legacy .rd .policy{margin-top:24px;border:1px solid #F2ECE4;border-radius:12px;padding:4px 20px;flex:1}
.rv-legacy .rd .policy div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;font-size:14px}
.rv-legacy .rd .policy div+div{border-top:1px solid #ede7e3}
.rv-legacy .rd .policy span{color:#6B615B}
.rv-legacy .rd .policy strong{font-weight:500}
.rv-legacy .rd .person{display:flex;align-items:center;gap:12px}
.rv-legacy .rd .avatar{height:38px;width:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:#F3D6C9;color:#6B2A1A;font-size:13px}
.rv-legacy .rd .person strong{font-weight:500}
.rv-legacy .rd .person small{display:block;font-size:12px;color:#6B615B}
.rv-legacy .rd .person>.rd-pill{margin-left:auto}
.rv-legacy .rd .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.rv-legacy .rd .rd-chip{background:#fff;border-radius:6px;padding:5px 10px;font-size:12px;color:#6B615B}
.rv-legacy .rd .prediction{background:#141110;color:#fff}
.rv-legacy .rd .prediction .eyebrow,.rv-legacy .rd .prediction .desc,.rv-legacy .rd .prediction .index{color:#E3DCD4}
.rv-legacy .rd .prediction .example{background:#201A17}
.rv-legacy .rd .rhythm{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px}
.rv-legacy .rd .rhythm small{display:block;font-size:11px;color:#E3DCD4}
.rv-legacy .rd .rhythm strong{font-size:15px;font-weight:500}
.rv-legacy .rd .interval{font-size:11px;color:#E5A277;border-bottom:1px solid #725046;padding-bottom:6px}
.rv-legacy .rd .signal-note{font-size:12px;color:#E3DCD4;margin-top:18px;border-top:1px solid #493b35;padding-top:12px}
.rv-legacy .rd .action{margin-top:24px;padding:36px;border-radius:20px;background:linear-gradient(115deg,#F6E4CE 0%,#E5A277 55%,#CC6244 100%);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.rv-legacy .rd .action .eyebrow{color:#5c3624}
.rv-legacy .rd .action h2{font-size:36px;margin:16px 0}
.rv-legacy .rd .action p{font-size:16px;color:#503a2c;max-width:400px}
.rv-legacy .rd .recommendation{padding:24px;background:#fff;border-radius:16px;box-shadow:0 16px 32px rgba(143,57,36,.13)}
.rv-legacy .rd .rec-label{font-size:11px;letter-spacing:.09em;color:#6B615B;text-transform:uppercase;margin-bottom:12px}
.rv-legacy .rd .recommendation strong{display:block;font-size:18px;line-height:1.35;font-weight:500}
.rv-legacy .rd .recommendation p{font-size:14px;color:#6B615B;margin-top:10px}
.rv-legacy .rd .review{font-size:13px;color:#6B615B;border-top:1px solid #F2ECE4;padding-top:16px;margin-top:20px}
.rv-legacy .rd .rewards{margin-top:16px;background:#141110;border-radius:20px;padding:28px 36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;color:#fff}
.rv-legacy .rd .rewards h3{font-size:25px;margin:8px 0}
.rv-legacy .rd .rewards .eyebrow,.rv-legacy .rd .rewards p{color:#E3DCD4}
.rv-legacy .rd .rewards p{font-size:14px;max-width:540px}
.rv-legacy .rd .toggle{color:#fff;border:1px solid #655b56;border-radius:12px;background:#201A17;padding:14px 16px;display:flex;align-items:center;gap:20px;cursor:pointer;text-align:left;font:inherit;font-size:14px}
.rv-legacy .rd .toggle small{display:block;color:#E3DCD4;font-size:12px}
.rv-legacy .rd .rd-track{width:44px;height:26px;flex:none;border-radius:20px;background:#6B615B;padding:3px;transition:background 180ms}
.rv-legacy .rd .rd-track::before{content:'';display:block;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 180ms}
.rv-legacy .rd .toggle[aria-checked="true"] .rd-track{background:#9E3A22}
.rv-legacy .rd .toggle[aria-checked="true"] .rd-track::before{transform:translateX(18px)}
.rv-legacy .rd .reward-note{display:none;margin-top:14px;padding:10px 12px;background:#FBEDE5;border-radius:8px;color:#6B2A1A;font-size:13px}
.rv-legacy .rd .reward-note.visible{display:block}
.rv-legacy .rd .reward-reveal{grid-column:1/-1;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,margin-top .5s ease}
.rv-legacy .rd .rewards.on .reward-reveal{max-height:340px;opacity:1;margin-top:4px}
.rv-legacy .rd .reward-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:16px}
.rv-legacy .rd .reward-balance{background:linear-gradient(150deg,#6B2A1A,#9E3A22);border-radius:14px;padding:20px}
.rv-legacy .rd .reward-balance .label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.72)}
.rv-legacy .rd .reward-balance .amount{font-family:var(--font-display);font-size:34px;font-weight:500;margin:6px 0 4px}
.rv-legacy .rd .reward-balance .expiry{font-size:12px;color:rgba(255,255,255,.66)}
.rv-legacy .rd .reward-message{background:#201A17;border:1px solid #493b35;border-radius:14px;padding:20px;display:flex;flex-direction:column;justify-content:center}
.rv-legacy .rd .reward-message .label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#25d366;margin-bottom:8px}
.rv-legacy .rd .reward-message p{font-size:14px;color:rgba(255,255,255,.86);line-height:1.5;max-width:none}
.rv-legacy .rd button:focus-visible,.rv-legacy .rd a:focus-visible{outline:3px solid #9E3A22;outline-offset:4px}
.rv-legacy .rd .about-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:end}
.rv-legacy .rd .about-heading h2{margin-top:20px;max-width:none;font-size:clamp(30px,3.3vw,40px)}
.rv-legacy .rd .about-heading>p{font-size:17px;line-height:1.65;color:#6B615B;max-width:400px}
.rv-legacy .rd .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.rv-legacy .rd .principle{border-top:1px solid #F2ECE4;padding-top:20px}
.rv-legacy .rd .num{font-family:var(--font-display);color:#9E3A22;font-size:28px;line-height:1}
.rv-legacy .rd .principle h3{font-size:24px;margin:20px 0 12px}
.rv-legacy .rd .principle p{font-size:15px;color:#6B615B;line-height:1.65}
  @media(max-width:900px){
.rv-legacy .rd .intro,.rv-legacy .rd .about-heading{gap:32px}
.rv-legacy .rd .action{gap:24px;padding:28px}
.rv-legacy .rd .rewards{padding:24px 28px}
.rv-legacy .rd .card{padding:22px}
  }
  @media(max-width:760px){
.rv-legacy .rd .intro{grid-template-columns:1fr;gap:20px;padding-bottom:28px}
.rv-legacy .rd .intro>p{font-size:16px}
.rv-legacy .rd .cards{grid-template-columns:1fr;gap:16px}
.rv-legacy .rd .card{padding:24px}
.rv-legacy .rd .card h3{font-size:25px}
.rv-legacy .rd .action{grid-template-columns:1fr;padding:24px;gap:24px}
.rv-legacy .rd .action h2{font-size:32px}
.rv-legacy .rd .rewards{grid-template-columns:1fr;padding:24px;gap:20px}
.rv-legacy .rd .reward-grid{grid-template-columns:1fr}
.rv-legacy .rd .toggle{justify-content:space-between}
.rv-legacy .rd .about-heading{grid-template-columns:1fr;gap:20px}
.rv-legacy .rd .about-heading>p{font-size:16px}
.rv-legacy .rd .principles{grid-template-columns:1fr;gap:24px;margin-top:32px}
.rv-legacy .rd .principle{display:grid;grid-template-columns:36px 1fr;gap:0 16px}
.rv-legacy .rd .num{grid-row:1/3}
.rv-legacy .rd .principle h3{margin:0 0 10px}
.rv-legacy .rd .principle p{grid-column:2}
.rv-legacy .rd .rhythm{gap:7px}
.rv-legacy .rd .interval{font-size:10px}
  }
  @media(prefers-reduced-motion:reduce){
.rv-legacy .rd *{transition:none!important}}

/* ---------------------------------------------------------------------------
   The ported flow sits inside the new how it works section, on top of the
   light cycle. This variant drops the wrapper's own page background and gives
   the steps a card so they stay readable from dawn through to night. */
.rv-legacy--inline {
  background: transparent;
  position: relative;
  z-index: 1;
}

.flow-shell {
  max-width: 1020px;
  margin: 54px auto 0;
  padding: 40px clamp(22px, 3.4vw, 46px) 44px;
  border: 1px solid #ece7e1;
  border-radius: 20px;
  background: var(--cycle-card, #fff);
  box-shadow: 0 18px 38px rgba(25, 20, 32, .18);
  backdrop-filter: blur(16px);
}

.flow-shell .flow { margin: 0; }

@media (max-width: 680px) {
  .flow-shell { margin-top: 36px; padding: 28px 18px 32px; }
}

/* ---------------------------------------------------------------------------
   Sticky navigation. The wrapper is what sticks, because a sticky child only
   travels as far as its own parent, and this wrapper is only as tall as the
   bar itself. */
/* The bar floats over the film to begin with, so it is fixed rather than
   sticky: it must not take a row of layout above the hero. It turns solid
   once the film has scrolled past, which script.js flags with .is-solid. */
.rv-legacy--nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.rv-legacy--nav nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 17, 16, .08);
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease;
}

/* --- over the film ---------------------------------------------------- */
.rv-legacy--nav .logo--img .logo-img--dark{display:block}
.rv-legacy--nav .logo--img .logo-img--light{display:none}
.rv-legacy--nav .logo span { color: var(--coral); }
.rv-legacy--nav .navlinks a { color: var(--muted-2); }
.rv-legacy--nav .navlinks a:hover { color: var(--ink); }
.rv-legacy--nav .cta {
  background: linear-gradient(95deg, var(--coral), var(--coral-deep));
  color: #fff !important;
  transition: background .32s ease, color .32s ease;
}
.rv-legacy--nav .logo,
.rv-legacy--nav .navlinks a { transition: color .32s ease; }


@media (prefers-reduced-motion: reduce) {
  .rv-legacy--nav nav,
  .rv-legacy--nav .logo,
  .rv-legacy--nav .navlinks a,
  .rv-legacy--nav .cta,
  .rv-legacy--nav .mark circle { transition: none; }
}

.rv-legacy .logo { text-decoration: none; cursor: pointer; }

.rv-legacy .cta {
  font-family:var(--font-body);
  border: 0;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 680px) {
  .rv-legacy--nav .navlinks { display: none; }
  .rv-legacy--nav nav .wrap { height: 62px; }
  .rv-legacy--nav .logo { font-size: 21px; }
  .rv-legacy--nav .cta { padding: 9px 15px; font-size: 14px; }
}

/* ===========================================================================
   Type system, applied. Every level below reads the tokens declared in
   styles.css :root, and this is the only place that assigns them, so no
   component carries a size, a weight or a tracking of its own. Loaded last so
   it wins over the sizes the legacy blocks were written with.
   =========================================================================== */

/* --- Headlines. Newsreader, weight 400, never bold. --------------------- */
h1,
.rv-legacy h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2,
.rv-legacy h2,
.how-it-works h2,
.product h2,
.compare h2,
.demo-dialog__panel h2,
.rv-legacy .ch-title,
.rv-legacy .close h2,
.rv-legacy .rd h2,
.rv-legacy .rd .intro h2,
.rv-legacy .rd .action h2,
.rv-legacy .rd .about-heading h2,
.rv-legacy #demoReveal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3,
.rv-legacy h3,
.rv-legacy .rd h3,
.rv-legacy .rd .card h3,
.rv-legacy .rd .rewards h3,
.rv-legacy .rd .principle h3,
.rv-legacy .prod h3,
.rv-legacy .split-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

h1 em, h2 em, h3 em,
.rv-legacy h1 em, .rv-legacy h2 em, .rv-legacy h3 em,
.how-it-works h2 em, .product h2 em,
.rv-legacy .accent, .rv-legacy .grad { font-weight: 600; }

h4, h5,
.rv-legacy h4,
.rv-legacy h5 { font-family: var(--font-display); font-weight: 400; }

/* The serif editorial subtitle. */
.rv-legacy .sub,
.rv-legacy .ch-sub,
.rv-legacy .flip-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-serif-sub);
  line-height: var(--lh-serif-sub);
  letter-spacing: var(--ls-serif-sub);
}

/* --- Body and UI. Inter. ------------------------------------------------ */
body,
.rv-legacy { font-family: var(--font-body); }

.hero-lede,
.rv-legacy #demoReveal .dr-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-hero-sub);
  line-height: var(--lh-hero-sub);
}

.product-sub,
.rv-legacy .lede,
.rv-legacy .rd .intro > p,
.rv-legacy .rd .about-heading > p,
.rv-legacy .rd .recommendation strong,
.rv-legacy .rd .action p {
  font-family: var(--font-body);
  font-weight: var(--fw-lead);
  font-size: var(--fs-lead);
  letter-spacing: var(--ls-lead);
  line-height: var(--lh-lead);
}

.navigation a,
.rv-legacy .navlinks a,
.rv-legacy .fs-p,
.rv-legacy .step p,
.rv-legacy .rd .desc,
.rv-legacy .rd .principle p,
.rv-legacy .prod p,
.rv-legacy .layer p,
.rv-legacy .split-text p,
.rv-legacy .stage p,
.rv-legacy .ml p,
.rv-legacy .fomo p,
.rv-legacy .sc-body,
.rv-legacy footer .tagf,
.rv-legacy .close-note,
.demo-dialog__note {
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-ui);
  line-height: var(--lh-ui);
}

.rv-legacy .fs-p,
.rv-legacy .step p,
.rv-legacy .rd .desc,
.rv-legacy .rd .principle p,
.rv-legacy .prod p,
.rv-legacy .layer p,
.rv-legacy .split-text p,
.rv-legacy .stage p,
.rv-legacy .ml p,
.rv-legacy .fomo p,
.rv-legacy .sc-body,
.rv-legacy footer .tagf,
.rv-legacy .close-note,
.demo-dialog__note { line-height: 1.55; }

/* Names and roles. */
.rv-legacy .wa-name,
.rv-legacy .v-profile b,
.rv-legacy .memory .mn,
.rv-legacy .ct .cn,
.rv-legacy .dprofile .nm,
.rv-legacy .who b {
  font-family: var(--font-body);
  font-size: var(--fs-name);
  font-weight: var(--fw-name);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-ui);
}

.rv-legacy .wa-status,
.rv-legacy .v-profile span,
.rv-legacy .memory .ms,
.rv-legacy .ct .cm,
.rv-legacy .dprofile .mt,
.rv-legacy .who-m,
.rv-legacy .rd .person small {
  font-family: var(--font-body);
  font-size: var(--fs-role);
  font-weight: var(--fw-role);
  line-height: var(--lh-meta);
}

/* --- Uppercase micro type. Geist Mono. ---------------------------------- */
.hero-eyebrow,
.section-kicker,
.rv-legacy .tag,
.rv-legacy .rd .eyebrow,
.rv-legacy .dr-label,
.rv-legacy .sc-flip,
.rv-legacy .stage .yr {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.product-note,
.rv-legacy .fs-cap,
.rv-legacy .plat .st,
.rv-legacy .pill,
.rv-legacy .rd .rec-label,
.rv-legacy .rd .reward-balance .label,
.rv-legacy .rd .reward-message .label,
.rv-legacy .prod .ph,
.rv-legacy .cb-tag,
.rv-legacy .orbit-core span,
.rv-legacy .hm-form-label,
.rv-legacy .hm-score-label,
.rv-legacy .dgrid .f {
  font-family: var(--font-mono);
  font-size: var(--fs-microlabel);
  font-weight: var(--fw-microlabel);
  letter-spacing: var(--ls-microlabel);
  text-transform: uppercase;
}

/* --- Actions, footer links and product labels. Geist. ------------------- */
.hero-btn,
.demo-dialog__form button,
.rv-legacy .cta,
.rv-legacy--nav .cta,
.rv-legacy .btn-primary,
.rv-legacy .btn-ghost,
.rv-legacy .btn-try-demo,
.rv-legacy #closeSubmit,
.rv-legacy #demoWatchBtn,
.rv-legacy .review,
.demo-invite__open b {
  font-family: var(--font-ui);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  letter-spacing: var(--ls-button);
  line-height: var(--lh-button);
}

.rv-legacy footer .fcol a,
.rv-legacy footer .fcol h5,
.rv-legacy footer .base,
.rv-legacy .close-talk,
.rv-legacy .chan-t,
.rv-legacy .plat,
.rv-legacy .chip,
.rv-legacy .v-tags span,
.rv-legacy .rd .rd-chip,
.rv-legacy .rd .rd-pill,
.rv-legacy .know-row,
.rv-legacy .fs-t,
.rv-legacy .step h3,
.demo-invite__open .di-title,
.demo-invite.is-mini .di-title {
  font-family: var(--font-ui);
  letter-spacing: var(--ls-ui);
}

.rv-legacy .fs-t,
.rv-legacy .step h3 {
  font-size: var(--fs-lead);
  font-weight: var(--fw-name);
  line-height: var(--lh-meta);
}

.rv-legacy footer .fcol a,
.rv-legacy .close-talk,
.rv-legacy .chan-t,
.rv-legacy .plat,
.demo-invite__open .di-title,
.demo-invite.is-mini .di-title {
  font-size: var(--fs-ui);
  font-weight: var(--fw-name);
  line-height: var(--lh-ui);
}

/* The brand wordmark keeps the display face. */
.rv-legacy .logo,
.rv-legacy footer .logo,
.demo-invite__open .di-brand,
.rv-legacy .orbit-core,
.rv-legacy .rd .num,
.rv-legacy .rd .reward-balance .amount,
.rv-legacy .dtile .big2,
.rv-legacy .stat .big { font-family: var(--font-display); font-weight: 400; }

/* ---- About, redesigned -----------------------------------------------------
   The three principles were cards in a row, which made them read like a price
   table. They are a ledger now: one hairline per row, the figure out in the
   margin where a folio sits, the claim and the reason side by side. Hovering a
   row warms it, walks an Ember rule across its top and lets the other two fall
   back, so the page stays quiet until the pointer asks something of it.
--------------------------------------------------------------------------- */
.rv-legacy .rd .about-heading { align-items: end; }

.rv-legacy .rd .principles {
  display: block;
  margin: clamp(52px, 6vw, 76px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #EFE7DE;
}

.rv-legacy .rd .principle {
  position: relative;
  display: grid;
  grid-template-columns: clamp(76px, 8vw, 128px) minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: baseline;
  gap: 0 clamp(20px, 3vw, 48px);
  padding: clamp(26px, 3vw, 40px) clamp(14px, 1.6vw, 24px) clamp(28px, 3.2vw, 44px);
  border: 0;
  border-bottom: 1px solid #EFE7DE;
  border-radius: 0;
  background: transparent;
  transition: background .45s ease, opacity .35s ease, transform .45s cubic-bezier(.22,.72,.25,1);
}

/* The Ember rule, drawn along the top of the row the pointer is on. */
.rv-legacy .rd .principle::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(95deg, var(--coral), #E0933F);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.16,.8,.3,1);
}
.rv-legacy .rd .principle:hover::before,
.rv-legacy .rd .principle:focus-within::before { transform: scaleX(1); }

.rv-legacy .rd .principle .num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: #D9CFC6;
  transition: color .4s ease, transform .45s cubic-bezier(.22,.72,.25,1);
}
.rv-legacy .rd .principle h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  transition: transform .45s cubic-bezier(.22,.72,.25,1), color .35s ease;
}
.rv-legacy .rd .principle p {
  margin: 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: #6B615B;
}

.rv-legacy .rd .principle:hover {
  background: linear-gradient(90deg, rgba(253,241,236,.9), rgba(253,241,236,0) 82%);
}
.rv-legacy .rd .principle:hover .num { color: var(--coral); transform: translateY(-3px); }
.rv-legacy .rd .principle:hover h3 { transform: translateX(6px); }
.rv-legacy .rd .principles:hover .principle:not(:hover) { opacity: .5; }

@media(hover:none){
  .rv-legacy .rd .principle:hover { background: transparent; }
  .rv-legacy .rd .principle:hover .num { transform: none; color: #D9CFC6; }
  .rv-legacy .rd .principle:hover h3 { transform: none; }
  .rv-legacy .rd .principles:hover .principle:not(:hover) { opacity: 1; }
}
@media(max-width:860px){
  .rv-legacy .rd .principle {
    grid-template-columns: clamp(56px, 12vw, 76px) minmax(0, 1fr);
    gap: 4px 12px;
    padding: 26px 0 28px;
  }
  .rv-legacy .rd .principle .num { grid-row: 1; }
  .rv-legacy .rd .principle h3 { grid-column: 2; }
  .rv-legacy .rd .principle p { grid-column: 2; margin-top: 10px; }
}
@media(prefers-reduced-motion:reduce){
  .rv-legacy .rd .principle,
  .rv-legacy .rd .principle::before,
  .rv-legacy .rd .principle .num,
  .rv-legacy .rd .principle h3 { transition: none; }
}

/* ---- The grid rails --------------------------------------------------------
   Two hairlines at the column edges and one between every section, so the page
   reads on a visible grid from the end of the film to the last line of the
   footer. The hero keeps its own full bleed and stays out of it.
--------------------------------------------------------------------------- */
.how-it-works,
.rv-legacy .brain,
.rv-legacy .feat,
.rv-legacy .about,
.rv-legacy .close,
.rv-legacy footer {
  position: relative;
  border-top: 1px solid rgba(20, 17, 16, .08);
}

.how-it-works::before, .how-it-works::after,
.rv-legacy .brain::before, .rv-legacy .brain::after,
.rv-legacy .feat::before, .rv-legacy .feat::after,
.rv-legacy .about::before, .rv-legacy .about::after,
.rv-legacy .close::before, .rv-legacy .close::after,
.rv-legacy footer::before, .rv-legacy footer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 1px;
  background: rgba(20, 17, 16, .07);
  pointer-events: none;
}
.how-it-works::before,
.rv-legacy .brain::before,
.rv-legacy .feat::before,
.rv-legacy .about::before,
.rv-legacy .close::before,
.rv-legacy footer::before { left: max(18px, calc(50% - 640px)); }

.how-it-works::after,
.rv-legacy .brain::after,
.rv-legacy .feat::after,
.rv-legacy .about::after,
.rv-legacy .close::after,
.rv-legacy footer::after { right: max(18px, calc(50% - 640px)); }

/* The content sits above the rails. */
.how-it-works__stage,
.rv-legacy .brain > .wrap,
.rv-legacy .feat > .wrap,
.rv-legacy .about > .wrap,
.rv-legacy .close > .wrap,
.rv-legacy footer > .wrap { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .how-it-works::before, .how-it-works::after,
  .rv-legacy .brain::before, .rv-legacy .brain::after,
  .rv-legacy .feat::before, .rv-legacy .feat::after,
  .rv-legacy .about::before, .rv-legacy .about::after,
  .rv-legacy .close::before, .rv-legacy .close::after,
  .rv-legacy footer::before, .rv-legacy footer::after { display: none; }
}

/* The rail belongs behind the cards: it should only show in the two gaps
   between them, never across a card, and never over the one being hovered. */
.rv-legacy .flow-rail { z-index: 0; }
.rv-legacy .flow-steps { position: relative; z-index: 1; }
.rv-legacy .flow-step { background: var(--white); }

/* The dimmed siblings are translucent, so anything behind them showed through:
   that is why the rail still crossed the cards. The rail goes, and each card
   carries its own short connector into the gap on its right. */
.rv-legacy .flow-rail { display: none; }
.rv-legacy .flow-step { position: relative; }
.rv-legacy .flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  right: -17px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--coral), var(--amber));
  opacity: .55;
  transition: opacity .35s ease;
}
.rv-legacy .flow-step:hover::after { opacity: 1; }
@media(max-width:820px){ .rv-legacy .flow-step:not(:last-child)::after { display: none; } }

/* The closing glow of the original site, repainted in the 2026 palette: Ember
   at the centre, Saffron warming its middle band, Ember wash at the edge. It
   is allowed to spill over the section line above, so the light arrives
   instead of starting at a hard edge. */
.rv-legacy .close { overflow: visible; }
.rv-legacy .close-glow {
  position: absolute;
  top: -230px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1460px, 146vw);
  height: 900px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 48% at 50% 46%,
    rgba(247, 226, 217, .96) 0%,
    rgba(184, 121, 15, .34) 22%,
    rgba(190, 63, 34, .26) 40%,
    rgba(190, 63, 34, .14) 56%,
    rgba(253, 241, 236, .5) 72%,
    rgba(255, 255, 255, 0) 86%);
  filter: blur(38px);
}
.rv-legacy .close > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .rv-legacy .close-glow { height: 620px; top: -120px; } }

/* The navigation carries a little more weight: the wordmark, the links and the
   action all step up together so the bar keeps its proportions. */
.rv-legacy--nav .logo-img { height: 28px; }
.rv-legacy--nav .navlinks { gap: 38px; }
.rv-legacy--nav .navlinks a { font-size: 16.5px; }
.rv-legacy--nav .cta { font-size: 16.5px; padding: 13px 24px; }
.rv-legacy--nav nav .wrap { height: 84px; }

/* ---- The intelligence layer ------------------------------------------------
   One message, and where each piece of it came from. Brand palette throughout:
   Ember and Ember deep on the mark and the labels, Ember wash under the message
   itself, Line for the hairlines, Ink 500 for the notes. The four notes arrive
   one at a time, each drawing its own rule towards the card.
--------------------------------------------------------------------------- */

.rv-legacy .layer-head { text-align: center; max-width: 720px; margin: 0 auto; }
.rv-legacy .layer-head .eyebrow { display: flex; justify-content: center; }

.rv-legacy .layer-grid {
  display: grid;
  grid-template-columns: 1fr minmax(380px, 540px) 1fr;
  align-items: center;
  gap: clamp(34px, 5vw, 78px);
  margin-top: clamp(54px, 7vw, 92px);
}

.rv-legacy .layer-notes {
  display: flex;
  flex-direction: column;
  gap: clamp(46px, 6vw, 88px);
  margin: 0; padding: 0;
  list-style: none;
}
.rv-legacy .layer-notes--left { text-align: right; }

/* Each note waits its turn, then slides in from its own side. */
.rv-legacy .layer-note {
  position: relative;
  opacity: 0;
  transform: translateX(var(--from, -14px));
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  transition-delay: calc(var(--n) * .22s + .35s);
}
.rv-legacy .layer-notes--left .layer-note { --from: -14px; }
.rv-legacy .layer-notes--right .layer-note { --from: 14px; }
.rv-legacy .layer-grid.is-in .layer-note { opacity: 1; transform: none; }

.rv-legacy .layer-note__k {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-microlabel);
  font-weight: var(--fw-microlabel);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--coral);
  transition: color .35s ease;
}
.rv-legacy .layer-note p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  letter-spacing: var(--ls-ui);
  color: #6B615B;
  transition: color .35s ease;
}
.rv-legacy .layer-note.is-lit .layer-note__k { color: var(--coral-deep); }
.rv-legacy .layer-note.is-lit p { color: var(--ink); }

/* The rule that ties a note to the message draws itself with the note. */
.rv-legacy .layer-note::after {
  content: "";
  position: absolute;
  top: 11px;
  width: clamp(22px, 4vw, 62px);
  height: 1px;
  background: linear-gradient(90deg, rgba(190,63,34,.5), rgba(190,63,34,.12));
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.16,.8,.3,1), opacity .35s ease;
  transition-delay: calc(var(--n) * .22s + .5s);
  opacity: .8;
}
.rv-legacy .layer-grid.is-in .layer-note::after { transform: scaleX(1); }
.rv-legacy .layer-note.is-lit::after { opacity: 1; }
.rv-legacy .layer-notes--left .layer-note::after {
  right: calc(-1 * clamp(34px, 5vw, 78px));
  transform-origin: right center;
}
.rv-legacy .layer-notes--right .layer-note::after {
  left: calc(-1 * clamp(34px, 5vw, 78px));
  transform-origin: left center;
}

.rv-legacy .layer-card {
  margin: 0;
  padding: 26px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 40px 80px -46px rgba(90, 38, 22, .38), 0 2px 8px rgba(90, 38, 22, .04);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
}
.rv-legacy .layer-grid.is-in .layer-card { opacity: 1; transform: none; }

.rv-legacy .layer-card__top { display: flex; align-items: center; gap: 12px; }
.rv-legacy .layer-card__av {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(95deg, var(--coral), var(--coral-deep));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 600;
}
.rv-legacy .layer-card__who b {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-name);
  font-weight: 600;
  letter-spacing: var(--ls-ui);
  color: var(--ink);
}
.rv-legacy .rd .layer-card__who small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8C827B;
}

/* The message sits on Ember wash, so the card has a body and not just lines. */
.rv-legacy .rd .layer-msg {
  margin: 22px 0;
  padding: 20px 22px;
  border-radius: 18px 18px 18px 6px;
  background: var(--coral-soft);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  letter-spacing: var(--ls-ui);
  color: #2a1d18;
}
.rv-legacy .rd .layer-msg mark {
  padding: 2px 5px;
  margin: 0 -1px;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  transition: background .45s ease, color .45s ease;
}
.rv-legacy .rd .layer-msg mark.is-lit { background: rgba(190, 63, 34, .16); color: var(--coral-deep); }

.rv-legacy .layer-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rv-legacy .layer-card__state {
  font-family: var(--font-mono);
  font-size: var(--fs-microlabel);
  font-weight: var(--fw-microlabel);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #8C827B;
  transition: color .35s ease;
}
.rv-legacy .layer-card__state.is-lit { color: var(--coral); }
.rv-legacy .layer-card__go {
  position: relative;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fffaf3;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--fw-button);
  letter-spacing: var(--ls-button);
}
.rv-legacy .layer-card__go::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid rgba(190, 63, 34, .5);
  opacity: 0;
}
.rv-legacy .layer-grid.is-done .layer-card__go::after { animation: layerPing 2.4s ease-out 2; }
@keyframes layerPing {
  0% { opacity: .7; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.14); }
}

.rv-legacy .rd .layer-foot {
  margin: clamp(42px, 5vw, 64px) 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: #A79C94;
}

@media (max-width: 1020px) {
  .rv-legacy .layer-grid { grid-template-columns: 1fr; gap: 34px; }
  .rv-legacy .layer-notes { flex-direction: row; flex-wrap: wrap; gap: 26px 32px; text-align: left; }
  .rv-legacy .layer-notes--left { text-align: left; order: 2; }
  .rv-legacy .layer-notes--right { order: 3; }
  .rv-legacy .layer-note { flex: 1 1 260px; padding-top: 16px; border-top: 1px solid rgba(190, 63, 34, .26); --from: 0; transform: translateY(12px); }
  .rv-legacy .layer-note::after { display: none; }
  .rv-legacy .layer-card { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-legacy .layer-note,
  .rv-legacy .layer-card,
  .rv-legacy .layer-note::after { opacity: 1; transform: none; transition: none; }
  .rv-legacy .layer-grid.is-done .layer-card__go::after { animation: none; }
}

/* ---- In, through, out -------------------------------------------------------
   Karumi pattern, read off the reference: everything arriving is a pile of
   overlapping, tilted, half blurred cards that drift on their own; everything
   leaving is one clean column, evenly spaced, masked at both ends, with the
   message being sent right now lit in coral. The bracket and the wires are
   dotted, and a dot travels each of them so the direction is never in doubt.
--------------------------------------------------------------------------- */

.rv-legacy .io-head { max-width: 860px; margin: 0 auto; text-align: center; }
.rv-legacy .io-title { text-wrap: balance; }
.rv-legacy .io-head .tag { display: inline-flex; margin-bottom: 18px; }
.rv-legacy .io-head .grad {
  background: linear-gradient(96deg, #8E3520 0%, var(--coral) 46%, #CE6A3D 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.rv-legacy .io {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 230px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.4vw, 22px);
  margin-top: clamp(48px, 6vw, 82px);
}

/* ---- Left: the live deck --------------------------------------------------
   Three cards, three seats. JS moves every card one seat along every few
   seconds, so the front card slides to the back, blurs and fades, and the one
   behind steps forward. The seats carry the transform, the face carries a slow
   independent float, which is why nothing in the pile ever moves in lockstep.
--------------------------------------------------------------------------- */
.rv-legacy .io-in {
  position: relative;
  display: grid;
  gap: clamp(46px, 5vw, 74px);
  padding-right: clamp(56px, 6vw, 112px);
}
.rv-legacy .io-deck {
  position: relative;
  width: min(100%, 372px);
  height: 152px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-legacy .io-deck--b { justify-self: end; }
@media (min-width: 1021px) {
  .rv-legacy .io-deck--a { margin-left: clamp(-56px, -3vw, -18px); }
  .rv-legacy .io-deck--b { margin-right: clamp(-10px, -.6vw, 0px); }
}

.rv-legacy .io-in .io-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform-origin: 50% 50%;
  transition:
    transform 1.15s cubic-bezier(.22,.72,.25,1),
    opacity 1.15s cubic-bezier(.22,.72,.25,1),
    filter 1.15s cubic-bezier(.22,.72,.25,1);
  will-change: transform, opacity, filter;
}

/* The three seats. Back to front. */
.rv-legacy .io-in .io-card.at-0 { z-index: 1; opacity: .4;  filter: blur(2.8px); transform: translate3d(-34px, -12px, 0) scale(.93) rotate(-2.8deg); }
.rv-legacy .io-in .io-card.at-1 { z-index: 2; opacity: .9;  filter: blur(.6px);  transform: translate3d(20px, 34px, 0) scale(.972) rotate(1.7deg); }
.rv-legacy .io-in .io-card.at-2 { z-index: 3; opacity: 1;   filter: blur(0);     transform: translate3d(0, 80px, 0) scale(1) rotate(-.9deg); }

/* Before the section is on screen the whole deck is folded away. */
.rv-legacy .io:not(.is-in) .io-in .io-card { opacity: 0; transform: translate3d(-30px, 26px, 0) scale(.94); filter: blur(3px); }
.rv-legacy .io.is-in .io-in .io-card { transition-delay: calc(var(--d, 0s)); }

/* The face floats inside its seat, each on its own clock. */
.rv-legacy .io-in .io-face { animation: ioFloat 11s ease-in-out infinite; }
.rv-legacy .io-in .io-card:nth-child(2) .io-face { animation-duration: 13.5s; animation-delay: -4s; }
.rv-legacy .io-in .io-card:nth-child(3) .io-face { animation-duration: 9.5s;  animation-delay: -7s; }
@keyframes ioFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(4px, -6px, 0); }
  66%      { transform: translate3d(-3px, 5px, 0); }
}

/* The pill that sits on the top edge of a card, exactly as in the reference. */
.rv-legacy .io-tag {
  position: absolute;
  top: -9px;
  right: 16px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F6C9BB;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

/* ---- The card itself, shared by both sides ----------------------------- */
.rv-legacy .io-card {
  position: relative;
  display: block;
  padding: 11px 16px 11px 11px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 34px -26px rgba(90, 38, 22, .45);
}
.rv-legacy .io-face { display: flex; align-items: center; gap: 12px; width: 100%; }
.rv-legacy .io-pin {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 9px;
  background: var(--coral-soft);
}
.rv-legacy .io-pin svg { width: 21px; height: 21px; fill: #141110; }
.rv-legacy .io-body { display: block; min-width: 0; }
.rv-legacy .io-body b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.rv-legacy .io-body i {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .07em;
  line-height: 1.55;
  text-transform: uppercase;
  color: #A79C94;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Right: the clean column ------------------------------------------ */
.rv-legacy .io-out {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.rv-legacy .io-card--out {
  width: min(362px, 100%);
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1), border-color .45s ease, box-shadow .45s ease;
  transition-delay: calc(var(--i) * .12s + .75s);
}
.rv-legacy .io.is-in .io-card--out { opacity: 1; transform: none; }
.rv-legacy .io-card--out .io-pin { background: #F2F1F0; }
.rv-legacy .io-card--out .io-pin svg { fill: #6C6663; }

/* The one being sent right now. JS walks this class down the column. */
.rv-legacy .io-card--out.is-live {
  border-color: rgba(190, 63, 34, .45);
  box-shadow: 0 20px 40px -24px rgba(190, 63, 34, .5);
}
.rv-legacy .io-card--out.is-live .io-pin { background: var(--coral-soft); }
.rv-legacy .io-card--out.is-live .io-pin svg { fill: #141110; }
.rv-legacy .io-card--out.is-live .io-body b { color: var(--coral); }

/* ---- Middle: bracket, wires, mark, halo -------------------------------- */
.rv-legacy .io-core { --reach: clamp(30px, 4.2vw, 68px); position: relative; display: grid; place-items: center; height: 100%; }
.rv-legacy .io-mark { position: relative; z-index: 3; width: clamp(128px, 13vw, 178px); height: auto; overflow: visible; }
.rv-legacy .io-sheen { animation: ioShine 5s ease-in-out infinite; }
@keyframes ioShine {
  0%, 10%   { transform: translateX(-30px) rotate(-20deg); }
  65%, 100% { transform: translateX(190px) rotate(-20deg); }
}
.rv-legacy .io-halo {
  position: absolute;
  z-index: 1;
  width: clamp(220px, 23vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,226,199,.85) 0%,
    rgba(255,231,212,.62) 20%,
    rgba(255,236,224,.38) 38%,
    rgba(255,241,233,.19) 55%,
    rgba(255,245,239,.07) 72%,
    rgba(255,248,244,0) 88%);
  animation: ioBreathe 5s ease-in-out infinite;
}
@keyframes ioBreathe {
  0%, 100% { transform: scale(.96); opacity: .65; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* The dotted bracket that gathers both clusters into one line. */
.rv-legacy .io-bracket {
  position: absolute;
  z-index: 0;
  right: calc(100% + var(--reach));
  width: clamp(26px, 3.2vw, 46px);
  height: 46%;
  border: 1.3px dashed #DD9477;
  border-right: 0;
  border-radius: 14px 0 0 14px;
}

.rv-legacy .io-wire {
  position: absolute;
  z-index: 0;
  top: 50%;
  width: calc(50% + var(--reach));
  height: 1px;
  height: 1.3px;
  background-image: linear-gradient(90deg, #DD9477 0 4px, transparent 4px 10px);
  background-size: 10px 1.3px;
  background-repeat: repeat-x;
}
.rv-legacy .io-wire--in { right: 50%; width: calc(50% + var(--reach)); }
.rv-legacy .io-wire--out { left: 50%; width: calc(50% + var(--reach)); }
.rv-legacy .io-wire::before {
  content: "";
  position: absolute;
  top: -2.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D45A30;
}
.rv-legacy .io-wire--in::before { left: 0; }
.rv-legacy .io-wire--out::before { right: 0; }
.rv-legacy .io-wire::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #D45A30;
  opacity: 0;
}
.rv-legacy .io.is-in .io-wire--in::after  { animation: ioSignalIn 2.5s ease-in-out infinite; }
.rv-legacy .io.is-in .io-wire--out::after { animation: ioSignalOut 2.5s ease-in-out infinite; }
@keyframes ioSignalIn {
  0%        { left: 0;    opacity: 0; }
  8%        { opacity: 1; }
  30%       { opacity: 1; }
  36%, 100% { left: 100%; opacity: 0; }
}
@keyframes ioSignalOut {
  0%, 42%   { left: 0;    opacity: 0; }
  48%       { opacity: 1; }
  72%       { opacity: 1; }
  80%, 100% { left: 100%; opacity: 0; }
}

.rv-legacy .rd .io-foot,
.rv-legacy .io-foot {
  margin: clamp(38px, 5vw, 58px) 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: #A79C94;
}

@media (max-width: 1020px) {
  .rv-legacy .io { grid-template-columns: 1fr; gap: 26px; }
  .rv-legacy .io-in { gap: 10px; padding-right: 0; }
  .rv-legacy .io-deck { width: 100%; height: auto; display: flex; flex-direction: column; gap: 10px; }
  .rv-legacy .io-deck--b { justify-self: stretch; }
  .rv-legacy .io-in .io-card,
  .rv-legacy .io-in .io-card.at-0,
  .rv-legacy .io-in .io-card.at-1,
  .rv-legacy .io-in .io-card.at-2 {
    position: static;
    width: 100%;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .rv-legacy .io-in .io-face { animation: none; }
  .rv-legacy .io-out { -webkit-mask-image: none; mask-image: none; }
  .rv-legacy .io-card--out { width: 100%; }
  .rv-legacy .io-core { height: 120px; }
  .rv-legacy .io-bracket, .rv-legacy .io-wire { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-legacy .io-card,
  .rv-legacy .io-card.at-0,
  .rv-legacy .io-card.at-1,
  .rv-legacy .io-card.at-2 { opacity: 1 !important; filter: none !important; transform: none !important; transition: none; }
  .rv-legacy .io-face { animation: none !important; }
  .rv-legacy .io-sheen, .rv-legacy .io-halo, .rv-legacy .io-wire::after { animation: none; }
}


/* ---- The CRM, the pillar the site was missing -------------------------------
   The left card is the brain itself: one customer, everything Rivuni worked out
   about them without anybody typing it. The right column is how it learns, in
   the three modes the product actually has.
--------------------------------------------------------------------------- */
.rv-legacy .crm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(44px, 5vw, 70px);
}
.rv-legacy .crm-card {
  margin: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 70px -50px rgba(90, 38, 22, .5);
}
.rv-legacy .crm-card__top { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.rv-legacy .crm-av {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(150deg, #F6E4CE, #E5A277 48%, #C2482A);
  font-family: var(--font-display); font-size: 19px; color: #fff;
}
.rv-legacy .crm-who b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.rv-legacy .crm-who small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #A79C94; }

.rv-legacy .crm-facts { margin: 0; padding: 0; list-style: none; }
.rv-legacy .crm-facts li {
  display: grid;
  grid-template-columns: clamp(76px, 8vw, 104px) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
  transition-delay: calc(var(--n) * .12s + .2s);
}
.rv-legacy .crm-card.in .crm-facts li { opacity: 1; transform: none; }
.rv-legacy .crm-facts span { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #A79C94; }
.rv-legacy .crm-facts b { font-size: 15px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.rv-legacy .crm-card__foot { margin: 18px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #A79C94; }

.rv-legacy .crm-lede { margin: 0 0 clamp(22px, 2.6vw, 34px); font-size: 17px; line-height: 1.65; color: #6B615B; max-width: 46ch; }
.rv-legacy .crm-ways { margin: 0; padding: 0; list-style: none; border-top: 1px solid #EFE7DE; }
.rv-legacy .crm-ways li {
  display: grid;
  grid-template-columns: clamp(50px, 5vw, 70px) minmax(0, 1fr);
  gap: 2px 18px;
  padding: 22px 6px 24px;
  border-bottom: 1px solid #EFE7DE;
  transition: background .45s ease;
}
.rv-legacy .crm-ways li:hover { background: linear-gradient(90deg, rgba(253,241,236,.85), rgba(253,241,236,0) 85%); }
.rv-legacy .crm-ways .num { grid-row: span 2; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1; color: #D9CFC6; transition: color .4s ease; }
.rv-legacy .crm-ways li:hover .num { color: var(--coral); }
.rv-legacy .crm-ways h3 { margin: 0 0 6px; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2; }
.rv-legacy .crm-ways p { margin: 0; font-size: 15px; line-height: 1.65; color: #6B615B; max-width: 44ch; }
.rv-legacy .crm-moat { margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ink); max-width: 46ch; }

@media (max-width: 960px) {
  .rv-legacy .crm { grid-template-columns: 1fr; gap: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-legacy .crm-facts li { opacity: 1; transform: none; transition: none; }
}


/* ---- The eyebrows ----------------------------------------------------------
   Every micro label across the page takes the Ember of the mark, sampled from
   the logo itself, and one step up in size so it reads as a section marker
   rather than as a caption.
--------------------------------------------------------------------------- */
.hero-eyebrow,
.section-kicker,
.rv-legacy .tag,
.rv-legacy .rd .eyebrow,
.rv-legacy .io-head .tag,
.rv-legacy .layer-head .eyebrow,
.rv-legacy .split-text .tag {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .15em;
  color: #BE3F22;
}
.rv-legacy .rd .prediction .eyebrow,
.rv-legacy .rd .rewards .eyebrow,
.rv-legacy .rd .action .eyebrow { color: inherit; }

/* ---- Connecting, what you can buy, and who is in charge ---------------------
   Three blocks that answer the three questions the page never answered: how
   hard is it to plug in, can I buy half of it, and what happens if the AI gets
   it wrong. All three are hairline work, no cards competing with the ones above.
--------------------------------------------------------------------------- */

/* Connecting: four checkable facts, not a promise. */
.rv-legacy .cx {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #EFE7DE;
}
.rv-legacy .cx li {
  padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 34px);
  border-bottom: 1px solid #EFE7DE;
  border-right: 1px solid #EFE7DE;
}
.rv-legacy .cx li:last-child { border-right: 0; }
.rv-legacy .cx-k {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A79C94;
}
.rv-legacy .cx b {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* What you can buy: the middle one carries the weight. */
.rv-legacy .mod {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(44px, 5vw, 68px);
  align-items: stretch;
}
.rv-legacy .mod-card {
  position: relative;
  padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.2vw, 30px) clamp(30px, 3vw, 38px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: #fff;
  transition: border-color .35s ease, box-shadow .35s ease, transform .4s cubic-bezier(.22,.72,.25,1);
}
.rv-legacy .mod-card:hover {
  border-color: rgba(190,63,34,.3);
  box-shadow: 0 34px 64px -40px rgba(90,38,22,.45);
  transform: translateY(-4px);
}
.rv-legacy .mod-card--both {
  border-color: rgba(190,63,34,.32);
  box-shadow: 0 30px 60px -44px rgba(90,38,22,.5);
}
.rv-legacy .mod-flag {
  position: absolute;
  top: -11px; left: clamp(22px, 2.2vw, 30px);
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--coral);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.rv-legacy .mod-card h3 { margin: 0 0 4px; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; }
.rv-legacy .mod-sub {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A79C94;
}
.rv-legacy .mod-card ul { margin: 0; padding: 0; list-style: none; }
.rv-legacy .mod-card li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.55;
  color: #6B615B;
}
.rv-legacy .mod-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  opacity: .55;
}

/* Who is in charge: four guarantees on one rule. */
.rv-legacy .ctrl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 4vw, 70px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.rv-legacy .ctrl li {
  padding: clamp(22px, 2.4vw, 30px) 0 clamp(24px, 2.6vw, 32px);
  border-top: 1px solid #EFE7DE;
}
.rv-legacy .ctrl b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
}
.rv-legacy .ctrl p { margin: 0; font-size: 15px; line-height: 1.65; color: #6B615B; max-width: 44ch; }

@media (max-width: 1020px) {
  .rv-legacy .cx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-legacy .cx li:nth-child(2n) { border-right: 0; }
  .rv-legacy .mod { grid-template-columns: 1fr; }
  .rv-legacy .mod-card--both { order: -1; }
}
@media (max-width: 700px) {
  .rv-legacy .cx { grid-template-columns: 1fr; }
  .rv-legacy .cx li { border-right: 0; }
  .rv-legacy .ctrl { grid-template-columns: 1fr; gap: 0; }
}

/* ---- One ground, white --------------------------------------------------
   The page reads as a single white sheet, the way the reference does. The only
   warm light left is the halo behind the mark. The big coral panels become
   white cards on a hairline, the closing glow goes, and the section rules do
   the separating instead of blocks of colour.
--------------------------------------------------------------------------- */
.rv-legacy .close-glow { display: none; }

.rv-legacy .vpanel {
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -60px rgba(90, 38, 22, .38);
}
.rv-legacy .v-card {
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 44px -34px rgba(20, 17, 16, .3);
}
.rv-legacy .v-thumb {
  background: linear-gradient(to top, rgba(20,17,16,.55), rgba(20,17,16,0) 58%), linear-gradient(135deg, #5A2A1E, #C2482A);
}
.rv-legacy .v-chip { border: 1px solid var(--line-2); box-shadow: 0 14px 26px -18px rgba(20,17,16,.3); }
.rv-legacy .v-profile .pav { box-shadow: none; }
.rv-legacy .v-tags span,
.rv-legacy .v-langs span { background: #fff; border: 1px solid var(--line-2); }
.rv-legacy .v-langs span.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.rv-legacy .v-sample { background: #fff; border: 1px solid var(--line-2); }
.rv-legacy .v-wave i { background: var(--coral); opacity: .45; }

/* ---- The rails reach the top ------------------------------------------------
   The reference runs its two column hairlines from the very first pixel, behind
   the navigation and through the hero, so the whole page sits on one visible
   grid instead of the grid starting halfway down.
--------------------------------------------------------------------------- */
.hero { position: relative; }
.hero::before,
.hero::after,
.rv-legacy nav::before,
.rv-legacy nav::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 1px;
  background: rgba(20, 17, 16, .07);
  pointer-events: none;
}
.hero::before,
.rv-legacy nav::before { left: max(18px, calc(50% - 640px)); }
.hero::after,
.rv-legacy nav::after { right: max(18px, calc(50% - 640px)); }

/* The hero content and the navigation stay above the rails. */
.hero-copy, .hero-frame { position: relative; z-index: 1; }
.rv-legacy nav .wrap { position: relative; z-index: 1; }

/* And the film no longer bleeds past them. */
.hero-frame { max-width: min(1280px, calc(100% - 36px)); margin-left: auto; margin-right: auto; }

/* ---- The three steps, shortened --------------------------------------------
   They were three tall panels with a table, a chat and a platform list inside.
   One line of three cards now, same height, one sentence and one row of chips
   each, so the step reads in a glance instead of asking to be studied.
--------------------------------------------------------------------------- */
.rv-legacy .flow-steps { align-items: stretch; }
.rv-legacy .flow-step { display: flex; flex-direction: column; }
.rv-legacy .flow-step .fs-p { min-height: 0; }
.rv-legacy .flow-step .fs-vis { margin-top: auto; }

.rv-legacy .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rv-legacy .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.rv-legacy .chip i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A79C94;
}
.rv-legacy .chip--on { border-color: rgba(190,63,34,.35); }
.rv-legacy .chip--on i { color: var(--coral); }

/* The about page gives the section room to open, since it has no hero above. */
.rv-legacy .about--page { padding-top: clamp(64px, 8vw, 120px); border-top: 0; }

/* The line under the headline is the one sentence that says what Rivuni is, so
   it carries a little more weight than a caption. */
.hero-lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; max-width: 44ch; }

/* ---- The hero is the film --------------------------------------------------
   Full screen, nothing above it but the navigation, and the copy set against
   the right third where the frame is quiet. Every line arrives a beat after the
   one above it, so the sentence reads itself.
--------------------------------------------------------------------------- */
.hero.hero--film {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  padding: 0 clamp(24px, 6vw, 110px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero.hero--film .hero-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.hero.hero--film .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(270deg, rgba(20,17,16,.72) 0%, rgba(20,17,16,.5) 34%, rgba(20,17,16,.12) 62%, rgba(20,17,16,0) 82%),
    linear-gradient(0deg, rgba(20,17,16,.28), rgba(20,17,16,0) 42%);
}
.hero.hero--film .hero-copy {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  margin: 0;
  text-align: left;
  color: #fff;
}
.hero.hero--film .hero-eyebrow,
.hero.hero--film h1,
.hero.hero--film .hero-lede,
.hero.hero--film .hero-actions {
  opacity: 0;
  transform: translateY(18px);
  animation: heroRise .9s cubic-bezier(.16,.8,.3,1) forwards;
}
.hero.hero--film .hero-eyebrow { animation-delay: .15s; color: #F6C9BB; }
.hero.hero--film h1 { animation-delay: .3s; color: #fff; margin: 14px 0 0; }
.hero.hero--film h1 em { color: #F6C9BB; }
.hero.hero--film .hero-lede {
  animation-delay: .55s;
  margin: 20px 0 0;
  max-width: 46ch;
  color: rgba(255,255,255,.86);
}
.hero.hero--film .hero-actions { animation-delay: .75s; margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero.hero--film .hero-btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: background .25s ease, border-color .25s ease;
}
.hero.hero--film .hero-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
.hero.hero--film .hero-btn--primary {
  background: var(--coral);
  border-color: var(--coral);
  box-shadow: 0 16px 34px -14px rgba(190,63,34,.7);
}
.hero.hero--film .hero-btn--primary:hover { background: var(--coral-deep); border-color: var(--coral-deep); }

@keyframes heroRise { to { opacity: 1; transform: none; } }

/* The film covers the page, so the rails have nothing to draw on up here. */
.hero.hero--film::before, .hero.hero--film::after { display: none; }

@media (max-width: 860px) {
  .hero.hero--film { justify-content: flex-start; align-items: flex-end; padding-bottom: clamp(48px, 10vh, 90px); }
  /* The vertical cut carries its own message bubble low in the frame, right
     where the copy sits. The scrim goes deeper at the bottom so the words
     stay first and the bubble reads as the scene behind them. */
  .hero.hero--film .hero-scrim { background: linear-gradient(0deg, rgba(20,17,16,.92) 0%, rgba(20,17,16,.86) 26%, rgba(20,17,16,.6) 48%, rgba(20,17,16,.16) 74%, rgba(20,17,16,0) 92%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.hero--film .hero-eyebrow,
  .hero.hero--film h1,
  .hero.hero--film .hero-lede,
  .hero.hero--film .hero-actions { opacity: 1; transform: none; animation: none; }
}
.hero.hero--film .hero-actions { justify-content: flex-start; }
.hero.hero--film h1 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; }

/* The chips carry their own icon now, so the step is read rather than parsed. */
.rv-legacy .chip { padding: 7px 13px 7px 10px; gap: 8px; box-shadow: 0 8px 18px -14px rgba(20,17,16,.5); transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,.72,.25,1); }
.rv-legacy .chip:hover { transform: translateY(-1px); border-color: rgba(190,63,34,.28); box-shadow: 0 12px 22px -14px rgba(90,38,22,.45); }
.rv-legacy .chip svg { width: 16px; height: 16px; flex: 0 0 auto; }
.rv-legacy .chip > svg:not([fill="none"]) { width: 15px; height: 15px; }
.rv-legacy .chip svg[stroke="currentColor"] { color: var(--coral-deep); opacity: .85; }

/* ---- The bar over the film --------------------------------------------------
   Transparent while the film is behind it, with the light wordmark and white
   links, and it turns solid the moment the next section arrives. script.js
   flags that with .is-solid.
--------------------------------------------------------------------------- */
.rv-legacy--nav:not(.is-solid) nav {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.rv-legacy--nav:not(.is-solid) .logo--img .logo-img--dark { display: none; }
.rv-legacy--nav:not(.is-solid) .logo--img .logo-img--light { display: block; }
.rv-legacy--nav:not(.is-solid) .navlinks a { color: rgba(255,255,255,.82); }
.rv-legacy--nav:not(.is-solid) .navlinks a:hover { color: #fff; }
.rv-legacy--nav:not(.is-solid) .cta {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(8px);
}
.rv-legacy--nav:not(.is-solid) .cta:hover { background: rgba(255,255,255,.24); }

/* The film starts at the top of the page, under the bar. */
/* The bar is fixed, so it takes no room: the film starts at the very top. */
.hero.hero--film { margin-top: 0; padding-top: 0; }

}

/* The film is 2.23 to 1. Rather than letterbox it or crop half of it away, the
   section takes a cinematic shape of its own and the film fills it: full bleed,
   no bars, and only the edges of the frame give. */
.hero.hero--film {
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  padding-top: 0;
  background: #141110;
}
.hero.hero--film .hero-film { object-fit: cover; object-position: 22% center; }
.hero.hero--film .hero-copy { padding-top: var(--nav-h, 76px); }
@media (max-width: 860px) {
  .hero.hero--film { height: 100vh; height: 100dvh; }
}

/* ---- The product window -----------------------------------------------------
   Built at the density of a real product, not at website size: 13px rows, 9px
   labels, tight gutters, three columns that fill. It runs a three beat loop and
   the captions underneath say what just happened, so nothing ever sits on top
   of the screen it is describing.
--------------------------------------------------------------------------- */
.rv-legacy .app {
  position: relative;
  margin-top: clamp(40px, 4.5vw, 64px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 50px 90px -60px rgba(90, 38, 22, .45);
  overflow: hidden;
}
.rv-legacy .app-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: #FCFAF8;
}
.rv-legacy .app-bar span { width: 8px; height: 8px; border-radius: 50%; background: #E8E2DB; }
.rv-legacy .app-bar b {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #A79C94;
}

.rv-legacy .app-body { display: grid; grid-template-columns: 186px minmax(0, 1.2fr) minmax(0, .95fr); min-height: 340px; }

/* rail */
.rv-legacy .app-rail { display: flex; flex-direction: column; gap: 1px; padding: 12px 10px; border-right: 1px solid var(--line); background: #FCFAF8; }
.rv-legacy .app-search {
  margin-bottom: 10px; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: 8px; background: #fff;
  font-size: 12px; color: #B0A69F;
}
.rv-legacy .app-nav { padding: 7px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: #7D736D; }
.rv-legacy .app-nav.is-on { background: var(--coral-soft); color: var(--coral-deep); font-weight: 600; }
.rv-legacy .app-cap--rail { margin: 16px 0 6px; padding-left: 10px; }
.rv-legacy .app-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.rv-legacy .app-item i { font-style: normal; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #B0A69F; }
.rv-legacy .app-item.is-on { background: #fff; border: 1px solid var(--line-2); }

/* main */
.rv-legacy .app-main { padding: 16px 18px 18px; border-right: 1px solid var(--line); }
.rv-legacy .app-who { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.rv-legacy .app-av {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(150deg, #F6E4CE, #E5A277 48%, #C2482A);
  font-family: var(--font-display); font-size: 15px; color: #fff;
}
.rv-legacy .app-who__t b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.rv-legacy .app-who__t i {
  display: block; margin-top: 1px; font-style: normal;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #A79C94;
}
.rv-legacy .app-flag {
  margin-left: auto; padding: 4px 8px; border-radius: 5px; background: #F6C9BB;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.72,.25,1);
}
.rv-legacy .app-facts { margin: 0; padding: 0; list-style: none; }
.rv-legacy .app-facts li {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 9px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--line); border-radius: 6px;
  opacity: 0; transform: translateY(5px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.72,.25,1), background .4s ease;
}
.rv-legacy .app-facts li:last-child { border-bottom: 0; }
.rv-legacy .app-facts span { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #A79C94; }
.rv-legacy .app-facts b { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }

/* side */
.rv-legacy .app-side { padding: 16px 18px 18px; }
.rv-legacy .app-cap { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #A79C94; }
.rv-legacy .app-cap--queue { margin-top: 18px; }
.rv-legacy .app-draft {
  padding: 13px; border: 1px solid var(--line-2); border-radius: 11px; background: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.72,.25,1), border-color .45s ease, box-shadow .45s ease;
}
.rv-legacy .app-draft__k { display: block; margin-bottom: 7px; font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.rv-legacy .app-draft p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.rv-legacy .app-draft__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.rv-legacy .app-draft__foot span { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #A79C94; }
.rv-legacy .app-draft__foot b { padding: 6px 12px; border-radius: 100px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500; }
.rv-legacy .app-mini {
  padding: 9px 11px; margin-top: 7px;
  border: 1px solid var(--line); border-radius: 9px; background: #FCFAF8;
}
.rv-legacy .app-mini b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.rv-legacy .app-mini i { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: #A79C94; }

/* the beat */
.rv-legacy .app.beat-1 .app-facts li[data-beat="1"],
.rv-legacy .app.beat-2 .app-facts li,
.rv-legacy .app.beat-3 .app-facts li { opacity: 1; transform: none; }
.rv-legacy .app.beat-2 .app-facts li[data-beat="2"],
.rv-legacy .app.beat-3 .app-facts li[data-beat="2"] { background: var(--coral-soft); }
.rv-legacy .app.beat-2 .app-flag,
.rv-legacy .app.beat-3 .app-flag { opacity: 1; transform: none; }
.rv-legacy .app.beat-3 .app-draft {
  opacity: 1; transform: none;
  border-color: rgba(190, 63, 34, .38);
  box-shadow: 0 20px 40px -28px rgba(190, 63, 34, .5);
}

/* the captions, under the window, one lit at a time */
.rv-legacy .app-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 42px);
  margin: clamp(34px, 3.6vw, 52px) 0 0; padding: 0; list-style: none;
}
.rv-legacy .app-steps li {
  padding-top: 18px; border-top: 1px solid #EFE7DE;
  opacity: .45; transition: opacity .5s ease, border-color .5s ease;
}
.rv-legacy .app-steps span { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: #C3B8AF; transition: color .5s ease; }
.rv-legacy .app-steps b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 22px); font-weight: 400; letter-spacing: -.02em; }
.rv-legacy .app-steps p { margin: 0; font-size: 14px; line-height: 1.6; color: #6B615B; }
.rv-legacy .app-steps li.is-on { opacity: 1; border-top-color: var(--coral); }
.rv-legacy .app-steps li.is-on span { color: var(--coral); }

@media (max-width: 1020px) {
  .rv-legacy .app-body { grid-template-columns: 1fr; min-height: 0; }
  .rv-legacy .app-rail { display: none; }
  .rv-legacy .app-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .rv-legacy .app-steps { grid-template-columns: 1fr; gap: 18px; }
  .rv-legacy .app-steps li { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-legacy .app-facts li, .rv-legacy .app-draft, .rv-legacy .app-flag { opacity: 1; transform: none; transition: none; }
  .rv-legacy .app-steps li { opacity: 1; }
}

/* ---- The first brands, and what it costs -----------------------------------
   The brands run as a band, the way a logo row does: real marks, moving slowly
   from right to left, masked at both ends so they arrive and leave rather than
   stop. It pauses when the pointer is on it.
--------------------------------------------------------------------------- */
.rv-legacy .proof { padding: 0; background: #fff; }
.rv-legacy .proof-k {
  margin: 0;
  padding: 18px 0 0;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-align: center; color: #BDB3AB;
}
.rv-legacy .proof-band {
  margin-top: 16px;
  overflow: hidden;
  border-top: 1px solid rgba(20, 17, 16, .09);
  border-bottom: 1px solid rgba(20, 17, 16, .09);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rv-legacy .proof-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: proofRoll 42s linear infinite;
}
.rv-legacy .proof-band:hover .proof-track { animation-play-state: paused; }
@keyframes proofRoll { to { transform: translate3d(-50%, 0, 0); } }

/* One cell per brand, hairlines between them, logos at their own colour and at
   the size a logo row is meant to be read at. */
.rv-legacy .proof-track li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: clamp(240px, 22vw, 330px);
  min-height: clamp(120px, 11vw, 152px);
  padding: 0 clamp(22px, 2.6vw, 40px);
  border-right: 1px solid rgba(20, 17, 16, .07);
  white-space: nowrap;
}
.rv-legacy .proof-track .mk { width: auto; height: clamp(30px, 2.8vw, 38px); display: block; }
.rv-legacy .proof-track .mk--wide { height: clamp(24px, 2.2vw, 30px); }
.rv-legacy .proof-track span {
  font-size: clamp(22px, 2.1vw, 29px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #0A0A0C;
}
.rv-legacy .proof-track .ais { color: #192433; font-weight: 800; letter-spacing: -.04em; }

@media (prefers-reduced-motion: reduce) {
  .rv-legacy .proof-track { animation: none; }
}

.rv-legacy .price-rows {
  margin: clamp(40px, 5vw, 62px) 0 0; padding: 0; list-style: none;
  border-top: 1px solid #EFE7DE;
}
.rv-legacy .price-rows li {
  display: grid;
  grid-template-columns: clamp(110px, 12vw, 180px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 28px) clamp(6px, 1vw, 14px);
  border-bottom: 1px solid #EFE7DE;
}
.rv-legacy .price-rows span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--coral);
}
.rv-legacy .price-rows b { font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; line-height: 1.55; letter-spacing: -.015em; }

@media (max-width: 700px) {
  .rv-legacy .price-rows li { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- The four questions ----------------------------------------------------
   The objections a store owner raises out loud, answered in their own words and
   before the form rather than in a call.
--------------------------------------------------------------------------- */
.rv-legacy .faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 5vw, 80px);
  margin: clamp(40px, 5vw, 62px) 0 0;
  padding: 0;
  list-style: none;
}
.rv-legacy .faq li { padding: clamp(24px, 2.6vw, 32px) 0; border-top: 1px solid #EFE7DE; }
.rv-legacy .faq b {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
}
.rv-legacy .faq p { margin: 0; font-size: 15px; line-height: 1.7; color: #6B615B; max-width: 52ch; }
@media (max-width: 860px) { .rv-legacy .faq { grid-template-columns: 1fr; } }
/* HiStrips ships a wordmark rather than a symbol, so it runs wider and alone. */
.rv-legacy .proof-track .mark-wide { height: 21px; }

/* ---- The questions, at the end ---------------------------------------------
   Where a FAQ belongs: after the ask, for the reader who is nearly convinced
   and has one thing left. Rows that open, one hairline each, no boxes.
--------------------------------------------------------------------------- */
.rv-legacy .faq-end { border-top: 1px solid rgba(20, 17, 16, .08); }
.rv-legacy .qa-list {
  max-width: 860px;
  margin: clamp(38px, 4.4vw, 58px) auto 0;
  border-top: 1px solid #EFE7DE;
}
.rv-legacy .qa { border-bottom: 1px solid #EFE7DE; }
.rv-legacy .qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(19px, 2vw, 25px) 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
  transition: color .3s ease;
}
.rv-legacy .qa summary::-webkit-details-marker { display: none; }
.rv-legacy .qa summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1;
  color: var(--coral);
  transition: transform .35s cubic-bezier(.22,.72,.25,1);
}
.rv-legacy .qa[open] summary::after { transform: rotate(45deg); }
.rv-legacy .qa summary:hover { color: var(--coral); }
.rv-legacy .qa p {
  margin: 0;
  padding: 0 4px clamp(22px, 2.2vw, 28px);
  max-width: 64ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: #6B615B;
  animation: qaOpen .4s cubic-bezier(.22,.72,.25,1) both;
}
@keyframes qaOpen { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rv-legacy .qa p { animation: none; }
  .rv-legacy .qa summary::after { transition: none; }
}

/* ---- The first week, the founders, the price -------------------------------
   The three things the site was missing: how much work it is on you, who is on
   the other end, and what it costs.
--------------------------------------------------------------------------- */
.rv-legacy .week {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(40px, 5vw, 62px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #EFE7DE;
}
.rv-legacy .week li {
  padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 28px) clamp(26px, 2.8vw, 36px);
  border-right: 1px solid #EFE7DE;
  border-bottom: 1px solid #EFE7DE;
}
.rv-legacy .week li:last-child { border-right: 0; }
.rv-legacy .week-d {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral);
}
.rv-legacy .week b {
  display: block; margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.2;
}
.rv-legacy .week p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #6B615B; }
.rv-legacy .week-you {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--coral-soft);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral-deep);
}

.rv-legacy .team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(40px, 5vw, 62px);
  max-width: 860px;
  margin-left: auto; margin-right: auto;
}
.rv-legacy .team-card { display: flex; align-items: flex-start; gap: clamp(16px, 2vw, 24px); margin: 0; }
.rv-legacy .team-card img {
  flex: 0 0 auto;
  width: clamp(84px, 9vw, 116px); height: clamp(84px, 9vw, 116px);
  border-radius: 14px;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .4s ease;
}
.rv-legacy .team-card:hover img { filter: none; }
.rv-legacy .team-card b {
  display: block; margin-bottom: 7px;
  font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 400; letter-spacing: -.02em;
}
.rv-legacy .team-card span { display: block; font-size: 14.5px; line-height: 1.65; color: #6B615B; }

.rv-legacy .price-rows {
  margin: clamp(40px, 5vw, 62px) 0 0; padding: 0; list-style: none;
  border-top: 1px solid #EFE7DE;
}
.rv-legacy .price-rows li {
  display: grid;
  grid-template-columns: clamp(110px, 12vw, 180px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 28px) clamp(6px, 1vw, 14px);
  border-bottom: 1px solid #EFE7DE;
}
.rv-legacy .price-rows span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--coral);
}
.rv-legacy .price-rows b { font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; line-height: 1.55; letter-spacing: -.015em; }

@media (max-width: 1020px) {
  .rv-legacy .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-legacy .week li:nth-child(2n) { border-right: 0; }
}
@media (max-width: 700px) {
  .rv-legacy .week { grid-template-columns: 1fr; }
  .rv-legacy .week li { border-right: 0; }
  .rv-legacy .team { grid-template-columns: 1fr; }
  .rv-legacy .price-rows li { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- How it works, as steps -------------------------------------------------
   The rail on the left holds the three steps, the dark stage on the right holds
   the one you are on. It walks itself every six seconds and stops for good the
   moment somebody clicks, because nothing is more annoying than a thing that
   moves while you are reading it.
--------------------------------------------------------------------------- */
.hiw-sub {
  max-width: 62ch;
  margin: 16px auto 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: #6B615B;
  text-align: center;
}

.rv-legacy .steps {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.9fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(38px, 4.4vw, 58px);
  text-align: left;
}
.rv-legacy .steps-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(12px, 1.4vw, 18px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: #fff;
}
.rv-legacy .st-btn {
  display: block;
  width: 100%;
  padding: clamp(14px, 1.5vw, 19px) clamp(14px, 1.4vw, 18px);
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .35s ease;
}
.rv-legacy .st-btn:hover { background: #FAF7F4; }
.rv-legacy .st-btn.is-on { background: var(--coral-soft); }
.rv-legacy .st-k {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A79C94;
  transition: color .35s ease;
}
.rv-legacy .st-btn.is-on .st-k { color: var(--coral); }
.rv-legacy .st-btn b {
  display: block;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}

.rv-legacy .steps-stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 30vw, 430px);
  padding: clamp(28px, 3.4vw, 54px);
  border-radius: 18px;
  background: #141110;
  overflow: hidden;
}
.rv-legacy .st-panel {
  max-width: 54ch;
  opacity: 0;
  transform: translateY(10px);
  animation: stIn .55s cubic-bezier(.16,.8,.3,1) forwards;
}
.rv-legacy .st-panel[hidden] { display: none; }
@keyframes stIn { to { opacity: 1; transform: none; } }

.rv-legacy .st-panel h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 31px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: #fff;
}
.rv-legacy .st-panel > p {
  margin: 0;
  font-size: clamp(14.5px, 1.35vw, 16px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
}

.rv-legacy .st-vis { margin-top: clamp(24px, 2.6vw, 34px); }
.rv-legacy .st-vis--plats { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-legacy .st-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .84);
}
.rv-legacy .st-chip i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.rv-legacy .st-chip.is-live { border-color: rgba(233, 150, 110, .55); }
.rv-legacy .st-chip.is-live i { color: #E9966E; }

.rv-legacy .st-vis--rows { display: grid; gap: 1px; max-width: 460px; }
.rv-legacy .st-vis--rows span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rv-legacy .st-vis--rows i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.rv-legacy .st-vis--rows b { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .9); }

.rv-legacy .st-vis--msg { max-width: 430px; }
.rv-legacy .st-who {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E9966E;
}
.rv-legacy .st-bubble {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, .08);
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}
.rv-legacy .st-approve {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 100px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 900px) {
  .rv-legacy .steps { grid-template-columns: 1fr; }
  .rv-legacy .steps-rail { flex-direction: row; overflow-x: auto; }
  .rv-legacy .st-btn { min-width: 190px; }
  .rv-legacy .steps-stage { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-legacy .st-panel { animation: none; opacity: 1; transform: none; }
}

/* ---- The step mockups -------------------------------------------------------
   Each step now shows the screen it is talking about, drawn in the same window
   language as the CRM section: white, hairlines, mono labels, one Ember accent.
   The dark stage is only the table the window sits on.
--------------------------------------------------------------------------- */
.rv-legacy .steps-stage { display: block; padding: clamp(24px, 2.8vw, 40px); }
.rv-legacy .st-panel { display: grid; gap: clamp(20px, 2.2vw, 30px); max-width: none; }
.rv-legacy .st-copy { max-width: 46ch; }
.rv-legacy .st-panel h3 { margin: 0 0 10px; font-size: clamp(20px, 2vw, 27px); }
.rv-legacy .st-panel > .st-copy p { margin: 0; font-size: clamp(14px, 1.3vw, 15.5px); color: rgba(255,255,255,.6); }

.rv-legacy .mock {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8);
}
.rv-legacy .mock-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #FCFAF8;
}
.rv-legacy .mock-bar span { width: 7px; height: 7px; border-radius: 50%; background: #E8E2DB; }
.rv-legacy .mock-bar b {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #A79C94;
}
.rv-legacy .mock-body { padding: clamp(14px, 1.6vw, 20px); }
.rv-legacy .mock-k {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #A79C94;
}

/* step one */
.rv-legacy .mock-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line-2); border-radius: 9px;
}
.rv-legacy .mock-url { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.rv-legacy .mock-badge {
  padding: 4px 9px; border-radius: 5px; background: var(--coral-soft);
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep);
}
.rv-legacy .mock-btn {
  display: inline-block; margin-top: 12px;
  padding: 9px 18px; border-radius: 100px;
  background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 600;
}
.rv-legacy .mock-ghost {
  display: inline-block; margin-left: 8px;
  padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 100px;
  font-size: 12.5px; font-weight: 500; color: #6B615B;
}
.rv-legacy .mock-log { margin: 16px 0 0; padding: 0; list-style: none; }
.rv-legacy .mock-log li {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 12.5px; color: #6B615B;
}
.rv-legacy .mock-log i { font-style: normal; color: #1FB98A; font-size: 11px; }
.rv-legacy .mock-log b { margin-left: auto; font-weight: 600; color: var(--ink); }

/* step two */
.rv-legacy .mock-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.rv-legacy .mock-thumb {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px;
  background: linear-gradient(140deg, #F1EBE5, #DCD3CA);
}
.rv-legacy .mock-t { min-width: 0; }
.rv-legacy .mock-t b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.rv-legacy .mock-t i {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 11.5px; color: #A79C94;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-legacy .mock-tag {
  margin-left: auto; flex: 0 0 auto;
  padding: 4px 9px; border-radius: 5px; background: #F2F1F0;
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #8A807A;
}
.rv-legacy .mock-tag.is-now { background: var(--coral-soft); color: var(--coral-deep); }
.rv-legacy .mock-prog { height: 4px; margin: 14px 0 8px; border-radius: 100px; background: #F2F1F0; overflow: hidden; }
.rv-legacy .mock-prog span { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--coral), #E0933F); }
.rv-legacy .mock-foot {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #A79C94;
}

/* step three */
.rv-legacy .mock-who { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.rv-legacy .mock-av {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(150deg, #F6E4CE, #E5A277 48%, #C2482A);
  font-family: var(--font-display); font-size: 15px; color: #fff;
}
.rv-legacy .mock-bubble {
  margin: 14px 0 16px; padding: 13px 15px;
  border-radius: 13px 13px 13px 4px;
  background: var(--coral-soft);
  font-size: 13px; line-height: 1.6; color: var(--ink);
}
.rv-legacy .mock-why { margin: 0 0 16px; padding: 0; list-style: none; }
.rv-legacy .mock-why li {
  position: relative; padding: 6px 0 6px 16px;
  font-size: 12.5px; color: #6B615B;
}
.rv-legacy .mock-why li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--coral); opacity: .6;
}
.rv-legacy .mock-actions { display: flex; align-items: center; }
.rv-legacy .mock-actions .mock-btn { margin-top: 0; }

/* The rail keeps the brand focus ring instead of the browser blue one. */
.rv-legacy .st-btn:focus { outline: none; }
.rv-legacy .st-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

@media (min-width: 1100px) {
  .rv-legacy .st-panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(26px, 3vw, 44px); }
}

/* ---- The stage, on brand ----------------------------------------------------
   The dark panel was a black box. It now carries the warm Ember light the rest
   of the page uses and the mark watermarked into the corner, and the window
   wears the Rivuni lockup in its title bar instead of three grey dots.
--------------------------------------------------------------------------- */
.rv-legacy .steps-stage { position: relative; isolation: isolate; }
.rv-legacy .steps-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18%; right: -10%;
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(190, 63, 34, .5) 0%,
    rgba(190, 63, 34, .22) 34%,
    rgba(190, 63, 34, .07) 58%,
    rgba(190, 63, 34, 0) 78%);
  pointer-events: none;
}
.rv-legacy .steps-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -70px; bottom: -90px;
  width: 300px; height: 300px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.26' fill='none' stroke='%23ffffff' stroke-width='3.49'/%3E%3Cpath d='M18.84 3.53 A16.52 16.52 0 1 0 31.23 32.11 A15.72 15.72 0 1 1 18.84 3.53 Z' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .04;
  pointer-events: none;
}
.rv-legacy .st-panel { position: relative; z-index: 1; }

/* The window wears the lockup, and an Ember hairline along its top edge. */
.rv-legacy .mock { position: relative; }
.rv-legacy .mock::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(95deg, var(--coral), #E0933F);
  z-index: 2;
}
.rv-legacy .mock-bar { gap: 9px; }
.rv-legacy .mock-mark { width: 15px; height: 15px; flex: 0 0 auto; }
.rv-legacy .mock-bar b {
  margin-left: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ink);
}
.rv-legacy .mock-sep { width: auto; height: auto; background: none; border-radius: 0; color: #C3B8AF; font-size: 11px; }
.rv-legacy .mock-bar i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A79C94;
}

/* Approve is the brand button, not a generic black pill. */
.rv-legacy .mock-btn {
  background: linear-gradient(95deg, var(--coral), var(--coral-deep));
  box-shadow: 0 12px 26px -14px rgba(190, 63, 34, .8);
}

/* ===========================================================================
   Phones. Everything above was drawn for a wide screen first, so this block
   does the honest work: nothing narrower than the screen, nothing smaller than
   the eye can read, nothing that hides content behind an animation that only
   makes sense with room to breathe.
   =========================================================================== */
@media (max-width: 760px) {
  /* The bar keeps the mark and one action, at a real tap size. */
  .rv-legacy--nav nav .wrap { height: 62px; padding: 0 16px; }
  .rv-legacy--nav .navlinks { display: none; }
  .rv-legacy--nav .cta { min-height: 40px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; }
  .rv-legacy--nav .logo-img { height: 17px; }

  /* The hero: the copy sits at the bottom over its own scrim, and the two
     buttons go full width so they are thumb sized. */
  .hero.hero--film { padding: 0 18px calc(34px + env(safe-area-inset-bottom)); }
  .hero.hero--film .hero-copy { width: 100%; padding-top: 0; }
  .hero.hero--film h1 { font-size: clamp(31px, 8.6vw, 40px); line-height: 1.06; }
  .hero.hero--film .hero-eyebrow { font-size: 10.5px; letter-spacing: .12em; }
  .hero.hero--film .hero-lede { font-size: 15.5px; line-height: 1.55; margin-top: 14px; }
  .hero.hero--film .hero-actions { margin-top: 22px; gap: 10px; width: 100%; }
  .hero.hero--film .hero-btn { flex: 1 1 100%; justify-content: center; min-height: 50px; }

  /* The brand band: smaller cells so no logo is ever cut in half. */
  .rv-legacy .proof-track li { min-width: 172px; min-height: 92px; padding: 0 18px; gap: 9px; }
  .rv-legacy .proof-track .mk { height: 24px; }
  .rv-legacy .proof-track .mk--wide { height: 19px; }
  .rv-legacy .proof-track span { font-size: 17px; }
  .rv-legacy .proof-k { padding-top: 22px; font-size: 8.5px; }

  /* How it works: the rail scrolls sideways with snap, the stage stacks. */
  .rv-legacy .steps { gap: 12px; }
  .rv-legacy .steps-rail {
    flex-direction: row;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rv-legacy .steps-rail::-webkit-scrollbar { display: none; }
  .rv-legacy .st-btn { min-width: 210px; scroll-snap-align: start; padding: 13px 14px; }
  .rv-legacy .steps-stage { padding: 20px 16px 22px; border-radius: 16px; }
  .rv-legacy .st-panel h3 { font-size: 21px; }
  .rv-legacy .st-panel > .st-copy p { font-size: 14.5px; }
  .rv-legacy .mock-body { padding: 14px; }
  .rv-legacy .mock-bar b { font-size: 13px; }
  .rv-legacy .mock-bar i, .rv-legacy .mock-k, .rv-legacy .mock-foot, .rv-legacy .mock-tag { font-size: 9px; }
  .rv-legacy .mock-t i { font-size: 11px; }
  .rv-legacy .mock-btn, .rv-legacy .mock-ghost { min-height: 40px; display: inline-flex; align-items: center; }

  /* The product window: with no room for three columns the beats hide half the
     screen, so on a phone everything is simply there. */
  .rv-legacy .app-facts li,
  .rv-legacy .app-draft,
  .rv-legacy .app-flag { opacity: 1 !important; transform: none !important; }
  .rv-legacy .app-side { border-top: 1px solid var(--line); }
  .rv-legacy .app-steps li { opacity: 1; }
  .rv-legacy .app-facts span, .rv-legacy .app-who__t i, .rv-legacy .app-cap { font-size: 9.5px; }
  .rv-legacy .app-facts b { font-size: 14px; }

  /* The in and out block: the decks read as a plain list, no blur, no tilt. */
  .rv-legacy .io-body i { white-space: normal; font-size: 10.5px; }
  .rv-legacy .io-body b { font-size: 12.5px; }

  /* Micro type that was drawn for a desk, not a hand. */
  .rv-legacy .tag, .hero-eyebrow, .section-kicker { font-size: 11.5px; }
  .rv-legacy .io-foot, .rv-legacy .proof-more { font-size: 9.5px; }

  /* Section rhythm: less air, the page is long enough on a phone. */
  .rv-legacy .feat, .rv-legacy .about, .rv-legacy .close { padding: 54px 0; }
  .rv-legacy .wrap { padding: 0 18px; }
  .how-it-works__stage { padding: 54px 18px 60px; }

  /* The closing form stacks instead of squeezing a button next to an input. */
  .rv-legacy .close-form { flex-direction: column; gap: 8px; padding: 10px; }
  .rv-legacy #closeEmail { width: 100%; }
  .rv-legacy #closeSubmit { width: 100%; min-height: 50px; }

  /* The questions: bigger tap area, no cramped rows. */
  .rv-legacy .qa summary { padding: 18px 2px; font-size: 18px; }
  .rv-legacy .qa p { font-size: 15px; padding-bottom: 20px; }
}

@media (max-width: 420px) {
  .rv-legacy .proof-track li { min-width: 150px; padding: 0 14px; }
  .rv-legacy .st-btn { min-width: 184px; }
  .rv-legacy .app-facts li { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
}

/* The film fills the window, with dvh where it exists and vh everywhere else. */
.hero.hero--film { min-height: 0; height: 100vh; height: 100dvh; }