body.rvx-page{
    --rvx-red:#E32636; --rvx-red-2:#b8202d; --rvx-blue:#5BC3F9; --rvx-green:#2BD17E;
    --rvx-gold:#F5C542; --rvx-bg:#050810;
    --rvx-line:rgba(120,148,210,.10); --rvx-line-2:rgba(120,148,210,.20); --rvx-line-3:rgba(120,148,210,.34);
    --rvx-text:#F0F3F8; --rvx-dim:#B8C2D6; --rvx-muted:#7C8AA4; --rvx-muted-2:#4A5570;
    background:var(--rvx-bg); color:var(--rvx-text); overflow-x:hidden;
  }
  .rvx-page .landing-nav{ position:sticky; top:0; z-index:60; }
  .rvx-wrap{ max-width:1320px; margin:0 auto; padding:0 30px; }

  /* Scroll reveal. The engine adds .rvx-in; a 3.4s failsafe adds it to
     everything regardless, so a missed observer can never leave the page
     stuck at opacity 0. */
  .rvx-rev{ opacity:0; transform:translateY(24px);
    transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
  .rvx-rev.rvx-in{ opacity:1; transform:none; }
  .rvx-d1{ transition-delay:.08s } .rvx-d2{ transition-delay:.16s }
  /*The hero is above the fold by definition, so its reveal must not
     wait for the deferred script: the same curve and the same .08/.16s delays
     as an animation that starts on the first frame the browser paints. `both`
     leaves it at the end state, so the .rvx-in the sweep adds later is a no-op
     and nothing can strand the headline at opacity 0. Everything below the
     fold keeps the JS reveal — that is what makes it a reveal.*/
  @keyframes rvx-enter{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
  .rvx-hero .rvx-rev{ animation:rvx-enter .8s cubic-bezier(.2,.7,.3,1) both }
  .rvx-hero .rvx-rev.rvx-d1{ animation-delay:.08s }
  .rvx-hero .rvx-rev.rvx-d2{ animation-delay:.16s }

  .rvx-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display),sans-serif;
    font-weight:800; font-size:10px; letter-spacing:.22em; color:var(--rvx-blue);
    border:1px solid rgba(91,195,249,.34); background:rgba(91,195,249,.06);
    border-radius:999px; padding:8px 16px; }
  .rvx-eyebrow i{ width:5px; height:5px; border-radius:50%; background:var(--rvx-blue);
    box-shadow:0 0 9px var(--rvx-blue); animation:rvx-blip 2.6s ease-in-out infinite; }
  @keyframes rvx-blip{ 50%{ opacity:.3 } }

  /* ---- hero -------------------------------------------------------------- */
  /*The poster lives here rather than in a style="" on the header so
     that phones can be given the narrow crop; the two `preload`s above carry
     the same media conditions, so the scanner still fetches it in the head.*/
  .rvx-hero{ position:relative; overflow:hidden; text-align:center;
    padding:clamp(84px,10vw,132px) 0 clamp(76px,9vw,116px);
    border-bottom:1px solid var(--rvx-line);
    background:#050810 center/cover no-repeat; background-position:50% 46%;
    background-image:url("../../images/reviews/hero-onboard-poster.cab01c9e2f9c.webp"); }
  .rvx-herovid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:50% 46%; z-index:0; opacity:0; transition:opacity 1.2s ease; }
  .rvx-herovid.rvx-on{ opacity:1 }
  .rvx-hero:before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(1000px 560px at 50% 48%, rgba(5,8,16,.80), rgba(5,8,16,.66) 46%, rgba(5,8,16,.52) 72%),
      linear-gradient(180deg, rgba(5,8,16,.88) 0%, rgba(5,8,16,.34) 26%, rgba(5,8,16,.42) 68%, var(--rvx-bg) 100%); }
  .rvx-hero:after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
    background:linear-gradient(90deg, transparent, var(--rvx-red) 18%, var(--rvx-red) 82%, transparent);
    box-shadow:0 0 26px rgba(227,38,54,.5); }
  .rvx-hero-in{ position:relative; z-index:4 }
  .rvx-h1{ font-family:var(--font-display),sans-serif; font-weight:900;
    font-size:clamp(32px,5.6vw,74px); line-height:1.04; letter-spacing:-.01em; margin:22px 0 0;
    text-shadow:0 18px 60px rgba(0,0,0,.8); }
  .rvx-h1 span{ background:linear-gradient(96deg,#7cc4ff,#9aa8ff 46%,#ff5163);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .rvx-hero-p{ margin:22px auto 0; max-width:62ch; color:#cfd9ea;
    font-size:clamp(14.5px,1.2vw,17px); text-wrap:pretty; text-shadow:0 2px 18px rgba(0,0,0,.7); }
  .rvx-hero-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:30px;
    font-family:var(--font-display),sans-serif; font-weight:800; font-size:11px; letter-spacing:.15em;
    color:#fff; text-decoration:none; padding:16px 30px; border-radius:12px;
    background:linear-gradient(180deg,var(--rvx-red),var(--rvx-red-2));
    box-shadow:0 16px 44px rgba(227,38,54,.42); }
  .rvx-hero-cta:hover{ color:#fff; filter:brightness(1.1) }

  #rvxKpi{ display:flex; justify-content:center; flex-wrap:wrap; margin:38px auto 0;
    max-width:min(940px,100%); border:1px solid var(--rvx-line-2); border-radius:16px;
    background:linear-gradient(180deg,rgba(11,18,32,.78),rgba(6,10,20,.72));
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 26px 60px rgba(0,0,0,.5); overflow:hidden; }
  .rvx-kpi{ flex:1 1 200px; display:flex; flex-direction:column; justify-content:flex-start;
    padding:20px clamp(14px,2.4vw,30px); border-left:1px solid var(--rvx-line); }
  .rvx-kpi:first-child{ border-left:0 }
  .rvx-kpi b{ display:block; font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(23px,2.7vw,35px); line-height:1; letter-spacing:.01em; color:#fff; }
  .rvx-kpi b i{ font-style:normal; color:var(--rvx-gold); margin-right:6px }
  .rvx-kpi b em{ font-style:normal; font-size:.6em; color:var(--rvx-muted) }
  /*DIRECT CHILD, not a descendant. `.rvx-kpi span` would also match
     the counter <span> nested inside the <b>, dropping the rating figure onto
     its own line at 9.5px muted grey. That bug shipped once.*/
  .rvx-kpi>span{ display:block; margin-top:8px; font-family:var(--font-display),sans-serif;
    font-weight:800; font-size:9.5px; letter-spacing:.17em; color:var(--rvx-muted); }
  .rvx-kpi b span{ font:inherit; color:inherit; letter-spacing:inherit }

  /* ---- section heads ----------------------------------------------------- */
  /*padding-TOP, not the `padding:88px 0 0` shorthand the prototype
     used: these sections are `class="rvx-sec rvx-wrap"`, the shorthand also
     writes padding-left/right, and being the later rule at equal specificity it
     silently wiped .rvx-wrap's 30px gutter — the tower ran edge to edge.*/
  .rvx-sec{ padding-top:88px }
  .rvx-shead{ max-width:760px }
  .rvx-shead h2{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(22px,3vw,40px); line-height:1.1; letter-spacing:-.005em; margin:16px 0 0; color:#fff; }
  .rvx-shead p{ margin-top:14px; color:var(--rvx-muted); font-size:14.5px; max-width:56ch; text-wrap:pretty }
  .rvx-slabel{ font-family:var(--font-display),sans-serif; font-weight:800; font-size:10px;
    letter-spacing:.22em; color:var(--rvx-muted-2); display:flex; align-items:center; gap:10px; }
  .rvx-slabel:before{ content:""; width:16px; height:1px; background:linear-gradient(90deg,var(--rvx-red),transparent) }

  /* ---- timing tower ------------------------------------------------------ */
  #rvxTower{ margin-top:32px; border:1px solid var(--rvx-line-2); border-radius:14px; overflow:hidden;
    background:linear-gradient(180deg,rgba(14,26,46,.6),rgba(8,13,24,.5)); }
  .rvx-trow{ scroll-margin-top:96px; display:grid;
    grid-template-columns:44px minmax(150px,1.05fr) minmax(90px,.85fr) minmax(180px,1.25fr) 96px 58px;
    align-items:center; gap:clamp(10px,1.4vw,20px); width:100%; text-align:left;
    background:none; border:0; border-top:1px solid var(--rvx-line); border-left:2px solid transparent;
    padding:15px clamp(12px,1.6vw,20px); cursor:pointer; font-family:inherit; color:inherit;
    transition:background .2s, border-color .2s; }
  .rvx-trow:first-child{ border-top:0 }
  .rvx-trow:hover, .rvx-trow:focus-visible{
    background:linear-gradient(90deg,rgba(227,38,54,.11),rgba(120,148,210,.045) 55%,transparent);
    border-left-color:var(--rvx-red); outline:0; }
  .rvx-tpos{ font-family:var(--font-mono),ui-monospace,monospace; font-weight:700; font-size:12px;
    color:var(--rvx-muted-2); text-align:center; border:1px solid var(--rvx-line-2); border-radius:6px;
    padding:5px 0; transition:color .2s, border-color .2s, background .2s; }
  .rvx-trow:hover .rvx-tpos{ color:#fff; border-color:var(--rvx-red);
    background:linear-gradient(180deg,var(--rvx-red),var(--rvx-red-2)); }
  .rvx-tval{ display:block; font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(16px,1.75vw,22px); line-height:1.15; letter-spacing:.01em; color:#fff; }
  .rvx-tunit{ display:block; margin-top:3px; font-size:12.5px; font-weight:500; color:var(--rvx-blue) }
  .rvx-tbar{ display:block; height:6px; border-radius:3px; background:rgba(120,148,210,.13); overflow:hidden }
  .rvx-tbar i{ display:block; height:100%; border-radius:3px;
    background:linear-gradient(90deg,var(--rvx-green),#7ee6b0); box-shadow:0 0 14px rgba(43,209,126,.45);
    transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.2,.8,.3,1); }
  /*One-way ignition: .rvx-lit is added when the tower enters view and
     never removed, so the bars sweep out top-to-bottom exactly once.*/
  #rvxTower.rvx-lit .rvx-tbar i{ transform:scaleX(var(--g)) }
  #rvxTower.rvx-lit .rvx-trow:nth-child(2) .rvx-tbar i{ transition-delay:.06s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(3) .rvx-tbar i{ transition-delay:.12s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(4) .rvx-tbar i{ transition-delay:.18s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(5) .rvx-tbar i{ transition-delay:.24s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(6) .rvx-tbar i{ transition-delay:.30s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(7) .rvx-tbar i{ transition-delay:.36s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(8) .rvx-tbar i{ transition-delay:.42s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(9) .rvx-tbar i{ transition-delay:.48s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(10) .rvx-tbar i{ transition-delay:.54s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(11) .rvx-tbar i{ transition-delay:.60s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(12) .rvx-tbar i{ transition-delay:.66s }
  #rvxTower.rvx-lit .rvx-trow:nth-child(13) .rvx-tbar i{ transition-delay:.72s }
  .rvx-twho b{ display:block; font-weight:700; font-size:14px; color:#fff }
  .rvx-twho span{ display:block; margin-top:2px; font-size:12.5px; color:var(--rvx-muted) }
  .rvx-ttag{ font-family:var(--font-display),sans-serif; font-weight:800; font-size:8.5px;
    letter-spacing:.14em; text-align:center; border-radius:999px; padding:5px 0; }
  .rvx-ttag.rvx-coaching{ color:#ff8a97; border:1px solid rgba(227,38,54,.34); background:rgba(227,38,54,.08) }
  .rvx-ttag.rvx-course{ color:#8fd6ff; border:1px solid rgba(91,195,249,.32); background:rgba(91,195,249,.07) }
  .rvx-tgo{ font-family:var(--font-display),sans-serif; font-weight:800; font-size:9px;
    letter-spacing:.16em; color:var(--rvx-muted-2); text-align:right; transition:color .2s; }
  .rvx-trow:hover .rvx-tgo{ color:var(--rvx-blue) }

  /* ---- provenance note --------------------------------------------------- */
  .rvx-prov{ max-width:860px; margin:76px auto 0; padding:34px 30px; text-align:center;
    border-top:1px solid var(--rvx-line); border-bottom:1px solid var(--rvx-line); position:relative; }
  .rvx-prov:before{ content:""; position:absolute; left:50%; top:-1px; transform:translateX(-50%);
    width:120px; height:1px; background:linear-gradient(90deg,transparent,var(--rvx-red),transparent); }
  .rvx-prov h2{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(16px,1.9vw,24px); letter-spacing:.01em; color:#fff; line-height:1.24; }
  .rvx-prov p{ margin-top:14px; color:var(--rvx-dim); font-size:14.5px; line-height:1.68; text-wrap:pretty }
  .rvx-prov p a{ color:var(--rvx-red); text-decoration:underline;
    text-decoration-color:rgba(227,38,54,.42); text-underline-offset:3px }
  .rvx-prov p a:hover{ color:#fff; text-decoration-color:currentColor }

  /* ---- filter bar -------------------------------------------------------- */
  .rvx-tools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:30px;
    padding-bottom:22px; border-bottom:1px solid var(--rvx-line); }
  .rvx-chips{ display:flex; gap:8px; flex-wrap:wrap }
  .rvx-chip{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display),sans-serif;
    font-weight:800; font-size:10.5px; letter-spacing:.15em; color:var(--rvx-dim);
    border:1px solid var(--rvx-line-2); background:rgba(10,19,34,.6); border-radius:999px;
    padding:10px 18px; cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
  .rvx-chip:hover{ color:#fff; border-color:var(--rvx-line-3) }
  .rvx-chip.rvx-on{ color:#04121f; background:var(--rvx-blue); border-color:var(--rvx-blue) }
  .rvx-rescount{ font-size:13px; color:var(--rvx-muted); white-space:nowrap; margin-left:auto }
  .rvx-rescount b{ font-family:var(--font-mono),ui-monospace,monospace; color:#fff }

  /* ---- the wall ---------------------------------------------------------- */
  .rvx-wallwrap{ position:relative; margin-top:26px; padding-bottom:96px }
  .rvx-wall.rvx-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    height:min(1180px,158vh); overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 5%,#000 92%,transparent); }
  .rvx-col{ overflow:hidden }
  /*Each column's cards are duplicated by the engine, because the
     keyframe ends at translateY(-50%) — without the second copy the loop
     visibly jumps. Hover pauses ONE column (`.rvx-col:hover .rvx-colin`), not
     all three; that is the whole point of the interaction.*/
  .rvx-colin{ display:flex; flex-direction:column; gap:16px;
    animation:rvx-flow var(--dur,90s) linear infinite; animation-direction:var(--dir,normal); }
  .rvx-col:hover .rvx-colin, .rvx-col:focus-within .rvx-colin{ animation-play-state:paused }
  @keyframes rvx-flow{ to{ transform:translateY(-50%) } }
  /*Mobile list mode reuses the same column elements — the engine
     stacks every visible card into the first one and empties the other two,
     so the marquee's structure never has to be torn down and rebuilt.*/
  .rvx-wall.rvx-list{ display:flex; flex-direction:column }
  .rvx-wall.rvx-list .rvx-colin{ animation:none; gap:14px }

  .rvx-card{ border:1px solid var(--rvx-line-2); border-radius:13px; padding:18px;
    background:linear-gradient(180deg,rgba(14,26,46,.66),rgba(9,15,28,.5)); cursor:pointer;
    transition:border-color .22s, transform .22s, box-shadow .22s; flex:0 0 auto; }
  .rvx-card:hover, .rvx-card:focus-visible{ border-color:rgba(91,195,249,.5);
    transform:translateY(-2px); box-shadow:0 20px 44px rgba(0,0,0,.45); outline:0; }
  .rvx-card.rvx-feat{ border-color:rgba(227,38,54,.34);
    background:linear-gradient(180deg,rgba(38,18,26,.7),rgba(12,14,26,.55)); }
  .rvx-card.rvx-feat:hover{ border-color:rgba(227,38,54,.6) }
  .rvx-card header{ display:flex; align-items:center; gap:11px; margin-bottom:12px }
  .rvx-av{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
    font-family:var(--font-display),sans-serif; font-weight:800; font-size:13px; color:#04121f;
    background:hsl(var(--h,210) 74% 62%); }
  .rvx-av.rvx-big{ width:46px; height:46px; font-size:19px }
  .rvx-who{ flex:1 1 auto; min-width:0 }
  .rvx-who b{ display:block; font-weight:700; font-size:14.5px; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:normal; }
  .rvx-who span{ display:block; font-size:12px; color:var(--rvx-muted) }
  .rvx-tag{ flex:0 0 auto; font-family:var(--font-display),sans-serif; font-weight:800; font-size:8px;
    letter-spacing:.13em; border-radius:999px; padding:4px 9px; }
  .rvx-tag.rvx-coaching{ color:#ff8a97; border:1px solid rgba(227,38,54,.34); background:rgba(227,38,54,.08) }
  .rvx-tag.rvx-course{ color:#8fd6ff; border:1px solid rgba(91,195,249,.32); background:rgba(91,195,249,.07) }
  /*Clamped by height, not -webkit-line-clamp: the card holds the
     review's real <p> paragraphs (the reader lifts them straight out of here,
     so the text ships exactly once) and -webkit-box would clamp PARAGRAPHS
     rather than lines. 7 lines at 1.62 line-height, 11 for a featured card —
     the handoff's numbers, with the cut faded instead of hard.*/
  .rvx-rtext{ font-size:14px; line-height:1.62; color:var(--rvx-dim);
    max-height:11.34em; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent); }
  .rvx-rtext p+p{ margin-top:.7em }
  .rvx-card.rvx-feat .rvx-rtext{ max-height:17.82em; font-size:14.5px; color:#dbe4f2 }
  /*A short review does not need fading — it is not cut off.*/
  .rvx-rtext.rvx-nofade{ -webkit-mask-image:none; mask-image:none }
  .rvx-card footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px }
  .rvx-more{ font-family:var(--font-display),sans-serif; font-weight:800; font-size:9.5px;
    letter-spacing:.14em; color:var(--rvx-muted-2); transition:color .2s; }
  .rvx-card:hover .rvx-more{ color:var(--rvx-blue) }
  .rvx-fire{ font-size:11.5px; color:var(--rvx-muted); border:1px solid var(--rvx-line);
    border-radius:999px; padding:3px 9px; background:rgba(5,8,16,.5); }
  #rvxEmpty{ display:none; padding:56px 0; text-align:center; color:var(--rvx-muted) }
  #rvxMore{ display:none; margin:26px auto 0; font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:10.5px; letter-spacing:.16em; color:var(--rvx-dim); border:1px solid var(--rvx-line-3);
    background:rgba(10,19,34,.6); border-radius:11px; padding:14px 26px; cursor:pointer; }
  #rvxMore:hover{ color:#fff; border-color:var(--rvx-blue) }
  .rvx-wallhint{ position:absolute; left:50%; bottom:52px; transform:translateX(-50%); z-index:3;
    font-family:var(--font-display),sans-serif; font-weight:800; font-size:9px; letter-spacing:.18em;
    color:var(--rvx-muted-2); background:rgba(5,8,16,.86); border:1px solid var(--rvx-line);
    border-radius:999px; padding:8px 16px; pointer-events:none; }

  /* ---- reader overlay ---------------------------------------------------- */
  #rvxReader{ position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:24px;
    background:rgba(3,6,13,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  #rvxReader.rvx-open{ display:grid }
  .rvx-rpanel{ position:relative; width:min(760px,100%); max-height:min(84vh,760px);
    display:flex; flex-direction:column; border:1px solid var(--rvx-line-3); border-radius:18px;
    overflow:hidden; background:linear-gradient(180deg,#111a2c,#080d18);
    box-shadow:0 50px 120px rgba(0,0,0,.75); animation:rvx-pop .3s cubic-bezier(.2,.8,.3,1); }
  @keyframes rvx-pop{ from{ opacity:0; transform:translateY(16px) scale(.98) } }
  .rvx-rbar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--rvx-line) }
  .rvx-rbar .rvx-rt{ flex:1 1 auto; font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:9.5px; letter-spacing:.2em; color:var(--rvx-muted); }
  .rvx-rnav{ display:flex; align-items:center; gap:6px }
  .rvx-rnav button, #rvxClose{ width:34px; height:34px; display:grid; place-items:center;
    border:1px solid var(--rvx-line-2); border-radius:9px; background:rgba(10,19,34,.7);
    color:var(--rvx-dim); cursor:pointer; transition:color .2s, border-color .2s; }
  .rvx-rnav button:hover:not(:disabled), #rvxClose:hover{ color:#fff; border-color:var(--rvx-blue) }
  .rvx-rnav button:disabled{ opacity:.32; cursor:default }
  .rvx-rnav button svg, #rvxClose svg{ width:15px; height:15px; fill:none; stroke:currentColor;
    stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  #rvxPos{ font-family:var(--font-mono),ui-monospace,monospace; font-size:11.5px;
    color:var(--rvx-muted-2); min-width:52px; text-align:center; }
  #rvxBody{ padding:24px 26px 28px; overflow-y:auto }
  .rvx-metric{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:20px;
    padding:14px 16px; border:1px solid rgba(43,209,126,.28); border-radius:12px;
    background:linear-gradient(90deg,rgba(43,209,126,.11),transparent); }
  .rvx-metric b{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(20px,2.8vw,28px); letter-spacing:.01em; color:#fff; }
  .rvx-metric span{ font-size:13.5px; font-weight:600; color:var(--rvx-green) }
  .rvx-metric em{ flex:1 1 100%; font-style:normal; font-size:12.5px; color:var(--rvx-muted) }
  .rvx-rhead{ display:flex; align-items:center; gap:13px; margin-bottom:18px; padding-bottom:18px;
    border-bottom:1px solid var(--rvx-line); }
  .rvx-rhead b{ display:block; font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:16px; letter-spacing:.01em; color:#fff; }
  /*The date line only — NOT `.rvx-rhead span`, which is the same
     descendant-selector trap as `.rvx-kpi>span` above. The row also holds the
     avatar span and the reaction pill, and a blanket rule blockifies the
     avatar (killing its place-items:center, so the initial sits in the
     top-left corner of the circle) and repaints it 13px muted grey.*/
  .rvx-rhead > div > span{ display:block; margin-top:2px; font-size:13px; color:var(--rvx-muted) }
  .rvx-rhead .rvx-fire{ margin-left:auto }
  .rvx-rfull p{ font-size:15px; line-height:1.72; color:#dbe4f2; text-wrap:pretty }
  .rvx-rfull p+p{ margin-top:14px }

  /* ---- closing section: the Academy members' own lap reviews -------------
     The owner replaced the four Diagnose/Train/Review/Repeat boxes with every lap review an
     Academy member rated, and picked this layout, Spotlight + deck (2026-09-14; data and who
     counts: apps/core/academy_reviews.py). The wall above is years of coaching and course
     testimonials; this is the only place the page shows what members say about the Academy
     itself, so it must not look like the wall: the rating leads, one review at a time is set
     large, and the deck beside it is an index of all of them, not a second marquee.

     Every review is in the HTML in full (the deck), readable with no script. The script only
     moves the spotlight between them, and a long review opens in the reader rather than
     growing in place: nothing on this page expands under the cursor.

     THE PHOTO IS ATMOSPHERE, NOT SUBJECT (owner: dim it so the car does not take the
     attention). Blurred, desaturated and under a heavy scrim, on a sticky 100vh layer so it
     stays behind the panels for the whole scroll. `overflow:clip`, not hidden: hidden makes
     the section a scroll container and the layer stops sticking. */
  .rvx-close{ position:relative; overflow:clip; border-top:1px solid var(--rvx-line); isolation:isolate }
  .rvx-ac-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none }
  .rvx-ac-bgin{ position:sticky; top:0; height:100vh; overflow:hidden }
  /*No `filter:` here any more. The blur, the desaturation and the dimming
     are baked into the cta-mx5-bg-* files, which is both the same picture and a
     quarter of the bytes — a blurred photograph compresses about four times
     better, so the sharp 1920w file was downloaded only to be thrown away. The
     bake uses the CSS matrix (Rec.709 saturate, then brightness) at the blur
     radius each width renders at; simulating both pipelines gives a mean
     difference of 1.3-1.9/255 before the scrim below is even applied. Keep
     scale(1.04): it hides the blur's soft edge exactly as it did before.*/
  .rvx-ac-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 62%;
    transform:scale(1.04) }
  .rvx-ac-bgin:after{ content:""; position:absolute; inset:0;
    background:
      radial-gradient(120% 90% at 50% 45%, rgba(5,8,16,.58) 0%, rgba(5,8,16,.78) 70%, rgba(5,8,16,.92) 100%),
      linear-gradient(180deg, var(--rvx-bg) 0%, rgba(5,8,16,.36) 22%, rgba(5,8,16,.24) 60%, rgba(5,8,16,.6) 100%); }
  /*padding-BLOCK: a `padding` shorthand here would wipe .rvx-wrap's side gutter.*/
  .rvx-ac-in{ position:relative; padding-block:clamp(76px,8.4vw,120px) clamp(84px,8vw,120px) }
  .rvx-ac-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0 }

  .sd-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,450px); gap:48px; align-items:end }
  .sd-head h2{ font-family:var(--font-display),sans-serif; font-weight:900; color:#fff;
    font-size:clamp(28px,3.5vw,50px); line-height:1.08; letter-spacing:-.005em; margin:18px 0 0;
    text-shadow:0 3px 22px rgba(0,0,0,.6); text-wrap:balance }
  .sd-head > div > p{ margin:18px 0 0; max-width:52ch; color:var(--rvx-dim); font-size:15.5px; line-height:1.65; text-wrap:pretty }

  .sd-glass{ border:1px solid var(--rvx-line-2); border-radius:20px;
    background:linear-gradient(170deg,rgba(15,24,42,.82),rgba(6,10,20,.86) 62%);
    -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
    box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); }

  .sd-stats{ padding:20px 22px 0; overflow:hidden }
  .sd-stats-main{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 26px; align-items:center }
  .sd-avg{ display:flex; flex-direction:column; gap:9px }
  .sd-avg b{ font-family:var(--font-display),sans-serif; font-weight:800; font-size:46px; line-height:.9;
    color:#fff; letter-spacing:.01em; font-variant-numeric:tabular-nums }
  .sd-avg b small{ font-size:.34em; color:var(--rvx-muted); font-weight:800; margin-left:6px; letter-spacing:.06em }
  .sd-avg-stars{ position:relative; display:inline-flex; width:max-content }
  .sd-avg-stars .sd-fill{ position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; display:flex }
  .sd-cap{ font-family:inherit; font-weight:600; font-size:11.5px; letter-spacing:.05em; color:var(--rvx-dim);
    text-transform:uppercase }
  .sd-dist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
  .sd-dist-row{ display:grid; grid-template-columns:26px minmax(0,1fr) 22px; align-items:center; gap:10px;
    font-size:12px; color:var(--rvx-dim); font-variant-numeric:tabular-nums }
  .sd-dist-k{ display:inline-flex; align-items:center; gap:3px; font-weight:600 }
  .sd-dist-k svg{ width:10px; height:10px; fill:var(--rvx-muted) }
  .sd-dist-track{ display:block; height:5px; border-radius:99px; background:rgba(120,148,210,.12); overflow:hidden }
  .sd-dist-track i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d9a92c,var(--rvx-gold)) }
  .sd-dist-v{ text-align:right; color:var(--rvx-dim) }
  .sd-stats-foot{ display:flex; flex-wrap:wrap; margin:18px -22px 0; border-top:1px solid var(--rvx-line) }
  .sd-stats-foot span{ flex:1 1 auto; padding:12px 12px; text-align:center; border-left:1px solid var(--rvx-line);
    font-family:inherit; font-weight:600; font-size:11.5px; letter-spacing:.04em; color:var(--rvx-dim);
    text-transform:uppercase; white-space:nowrap }
  .sd-stats-foot span:first-child{ border-left:0 }
  .sd-stats-foot b{ color:#fff; font-weight:700; margin-right:5px }

  .sd-star{ width:15px; height:15px; fill:rgba(120,148,210,.24); flex:0 0 auto }
  .sd-star.on{ fill:var(--rvx-gold) }
  .sd-stars{ display:inline-flex; gap:3px; align-items:center }
  .sd-fill .sd-star{ fill:var(--rvx-gold) }

  .sd-stage{ display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); gap:18px; margin-top:34px }

  .sd-spot{ position:relative; overflow:hidden; padding:24px 32px 22px; display:flex; flex-direction:column; }
  .sd-spot:before{ content:""; position:absolute; left:32px; right:32px; top:0; height:2px;
    background:linear-gradient(90deg,var(--rvx-red),rgba(227,38,54,0) 70%); }
  .sd-qmark{ position:absolute; left:22px; top:58px; width:92px; height:74px; fill:rgba(227,38,54,.10); pointer-events:none;
    transition:opacity .3s ease }
  .sd-spot.is-long .sd-qmark{ opacity:.35 }
  .sd-spot-top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px }
  .sd-kicker{ display:inline-flex; align-items:center; gap:9px; font-family:inherit; text-transform:uppercase;
    font-weight:700; font-size:11.5px; letter-spacing:.08em; color:var(--rvx-blue) }
  .sd-kicker i{ width:6px; height:6px; border-radius:50%; background:var(--rvx-muted-2) }
  .sd-js .sd-spot:not(.is-paused) .sd-kicker i{ background:var(--rvx-red); box-shadow:0 0 10px var(--rvx-red); animation:sd-blip 2.4s ease-in-out infinite }
  @keyframes sd-blip{ 50%{ opacity:.35 } }
  .sd-count{ font-family:inherit; font-weight:600; font-size:12px; letter-spacing:.02em;
    color:var(--rvx-muted); font-variant-numeric:tabular-nums; display:inline-flex; align-items:baseline; gap:7px }
  .sd-count b{ color:#fff; font-size:18px; letter-spacing:.04em }

  .sd-slide{ position:relative; margin:14px 0 0; display:flex; flex-direction:column; flex:1 1 auto }
  .sd-qbox{ display:flex; flex-direction:column; justify-content:center; padding-left:2px }
  /*Fixed height only with the script on, where "Read the full review" exists; without
     it the spotlight simply shows the whole review.*/
  .sd-js .sd-qbox{ --qh:238px; height:var(--qh); overflow:hidden }
  .sd-js .sd-qbox.is-clipped{ justify-content:flex-start; padding-top:10px;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent); }
  .sd-quote{ margin:0; color:#E9EEF6; text-wrap:pretty; overflow-wrap:anywhere; max-width:62ch;
    transition:opacity .28s ease, transform .28s ease; }
  .sd-quote p{ margin:0 }
  .sd-quote p+p{ margin-top:.5em }
  .sd-quote[data-len="s"]{ font-size:34px; line-height:1.25; font-weight:500; letter-spacing:-.015em; color:#fff; max-width:22ch }
  .sd-quote[data-len="m"]{ font-size:25px; line-height:1.45; font-weight:500; letter-spacing:-.01em; color:#F3F6FB; max-width:40ch }
  .sd-quote[data-len="l"]{ font-size:17.5px; line-height:1.68; font-weight:400 }
  .sd-quote.is-out{ opacity:0; transform:translateY(8px) }

  .sd-more{ align-self:flex-start; margin-top:6px; cursor:pointer; background:none; border:0; padding:6px 0;
    font-family:inherit; font-weight:700; text-transform:uppercase;
    font-size:12px; letter-spacing:.05em; color:var(--rvx-blue) }
  .sd-more:hover{ color:#fff }

  .sd-foot{ margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
    transition:opacity .28s ease }
  .sd-foot.is-out{ opacity:0 }
  .sd-rate{ display:inline-flex; align-items:center; gap:9px }
  .sd-rate .sd-star{ width:16px; height:16px }
  .sd-rate > span:last-child{ font-size:12px; font-weight:600; color:var(--rvx-dim); font-variant-numeric:tabular-nums }
  .sd-attr{ padding-left:16px; border-left:1px solid var(--rvx-line-2); font-size:13.5px; color:#95a2bb; min-width:0 }
  .sd-attr strong{ color:#fff; font-weight:600 }

  .sd-controls{ display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--rvx-line) }
  .sd-btn{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; cursor:pointer; flex:0 0 auto;
    border:1px solid var(--rvx-line-2); background:rgba(10,19,34,.7); color:var(--rvx-dim);
    transition:color .2s, border-color .2s, background .2s }
  .sd-btn svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round }
  .sd-btn .sd-ic-play{ fill:currentColor; stroke:none; display:none }
  .sd-btn:hover{ color:#fff; border-color:var(--rvx-line-3); background:rgba(18,30,52,.8) }
  .sd-spot.is-paused .sd-btn .sd-ic-pause{ display:none }
  .sd-spot.is-paused .sd-btn .sd-ic-play{ display:block }
  .sd-progress{ flex:1 1 auto; height:3px; margin:0 6px 0 12px; border-radius:3px; background:rgba(120,148,210,.14); overflow:hidden }
  .sd-progress i{ display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
    background:linear-gradient(90deg,var(--rvx-red),#ff6a76) }
  .sd-state{ font-family:inherit; font-weight:600; font-size:11px; letter-spacing:.06em;
    color:var(--rvx-muted); min-width:64px; text-align:right }
  .rvx-close .sd-btn:focus-visible, .rvx-close .sd-pick:focus-visible, .rvx-close .sd-more:focus-visible,
  .rvx-close .rvx-cta:focus-visible{ outline:2px solid var(--rvx-blue); outline-offset:2px }

  /*The deck is an index panel, not a second wall. With the script on it is filled
     absolutely so the spotlight alone sets the row height and the list scrolls inside it.*/
  .sd-deck{ position:relative; min-height:0; overflow:hidden }
  .sd-deck-in{ display:flex; flex-direction:column }
  .sd-js .sd-deck-in{ position:absolute; inset:0 }
  .sd-deck-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding:18px 20px 14px; border-bottom:1px solid var(--rvx-line) }
  .sd-deck-top h3{ margin:0; font-family:inherit; font-weight:700; font-size:12.5px;
    letter-spacing:.05em; color:#fff; text-transform:uppercase }
  .sd-deck-top p{ margin:0; font-family:inherit; font-weight:600; font-size:11px;
    letter-spacing:.05em; color:var(--rvx-dim); text-transform:uppercase; white-space:nowrap }
  .sd-deck-top p .sd-swipe{ display:none }
  .sd-deck-top .sd-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  .sd-list{ position:relative; list-style:none; margin:0; flex:1 1 auto; min-height:0;
    padding:14px 14px 26px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; align-content:start }
  .sd-js .sd-list{ overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(120,148,210,.3) transparent;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 34px),transparent); }
  .sd-list li{ display:flex; min-width:0 }
  .sd-tile{ position:relative; overflow:hidden; width:100%; margin:0; text-align:left; display:flex; flex-direction:column; gap:7px;
    padding:11px 12px 12px; border-radius:12px; border:1px solid var(--rvx-line); background:rgba(13,21,38,.62);
    transition:border-color .2s, background .2s }
  .sd-js .sd-tile:hover{ border-color:var(--rvx-line-3); background:rgba(19,31,54,.78) }
  .sd-tile.is-on{ border-color:rgba(227,38,54,.55); background:linear-gradient(180deg,rgba(227,38,54,.13),rgba(13,21,38,.72) 70%); }
  .sd-tile-top{ display:flex; align-items:center; justify-content:space-between; gap:8px }
  .sd-stars-sm{ gap:2px }
  .sd-stars-sm .sd-star{ width:10px; height:10px }
  .sd-tile-date{ font-size:10.5px; color:#8a97af; font-weight:600; white-space:nowrap }
  .sd-tile-q{ margin:0; font-size:12.5px; line-height:1.5; color:#C3CCDD; overflow-wrap:anywhere }
  .sd-tile-q p{ margin:0 }
  .sd-tile-q p+p{ margin-top:.4em }
  /*Three lines with the script on, where the spotlight shows the rest; whole without it.
     Inline paragraphs, because -webkit-line-clamp only counts lines of inline content.*/
  .sd-js .sd-tile-q{ min-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
  .sd-js .sd-tile-q p{ display:inline }
  .sd-js .sd-tile-q p+p:before{ content:" " }
  .sd-tile.is-on .sd-tile-q{ color:#fff }
  .sd-tile-m{ margin-top:auto; font-size:11px; color:#8a97af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .sd-pick{ display:none }
  .sd-js .sd-pick{ display:block; position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; margin:0;
    border:0; border-radius:12px; background:transparent; cursor:pointer }
  .sd-tile-bar{ position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:0 50%;
    transform:scaleX(var(--p,0)); background:var(--rvx-red); opacity:0 }
  .sd-tile.is-on .sd-tile-bar{ opacity:1 }

  .sd-end{ display:flex; justify-content:center; margin-top:clamp(40px,4.4vw,58px) }

  .rvx-ac-reader{ width:min(720px,calc(100vw - 32px)); max-height:min(86vh,900px); padding:0; border-radius:18px; color:var(--rvx-text);
    background:linear-gradient(180deg,#111a2c,#080d18); border:1px solid var(--rvx-line-3); box-shadow:0 50px 120px rgba(0,0,0,.75) }
  .rvx-ac-reader[open]{ display:flex; flex-direction:column }
  .rvx-ac-reader::backdrop{ background:rgba(3,6,13,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
  .rvx-ac-x{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--rvx-line-2); border-radius:9px;
    background:rgba(10,19,34,.7); color:var(--rvx-dim); cursor:pointer }
  .rvx-ac-x:hover{ color:#fff; border-color:var(--rvx-blue) }
  .rvx-ac-x svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
  .rvx-ac-readerbody{ overflow:auto; padding:22px 26px 26px; overscroll-behavior:contain }
  .rvx-ac-readerhead{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding-bottom:14px; border-bottom:1px solid var(--rvx-line) }
  .rvx-ac-readerhead .sd-attr{ padding-left:0; border-left:0 }
  .rvx-ac-readerbody .sd-quote{ margin-top:16px; font-size:16px; line-height:1.72; color:#dfe6f1; max-width:64ch; font-weight:400; letter-spacing:0 }
  .rvx-ac-readerbody .sd-quote p+p{ margin-top:.7em }

  @media(max-width:1140px){
    .sd-head{ grid-template-columns:minmax(0,1fr) minmax(330px,400px); gap:32px }
    .sd-list{ grid-template-columns:minmax(0,1fr) }
    .sd-quote[data-len="m"]{ font-size:22px }
  }
  @media(max-width:880px){
    .rvx-ac-in{ padding-block:64px 76px }
    .sd-head{ grid-template-columns:minmax(0,1fr); gap:28px }
    .sd-stage{ grid-template-columns:minmax(0,1fr); margin-top:24px; gap:14px }
    .sd-glass{ -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(170deg,rgba(15,24,42,.92),rgba(6,10,20,.94) 62%) }
    .sd-spot{ padding:20px 20px 18px }
    .sd-spot:before{ left:20px; right:20px }
    .sd-qmark{ width:64px; height:52px; left:12px; top:50px }
    .sd-js .sd-qbox{ --qh:216px }
    .sd-quote[data-len="s"]{ font-size:26px }
    .sd-quote[data-len="m"]{ font-size:19px; line-height:1.5 }
    .sd-quote[data-len="l"]{ font-size:15.5px; line-height:1.64 }
    .sd-foot{ flex-direction:column; align-items:flex-start; gap:8px }
    .sd-attr{ padding-left:0; border-left:0; font-size:12.5px; line-height:1.45 }
    .sd-attr strong{ display:block; margin-bottom:1px }
    .sd-sep{ display:none }
    .sd-controls{ margin-top:16px; padding-top:16px }
    .sd-state{ display:none }
    .sd-deck{ overflow:visible }
    .sd-js .sd-deck-in{ position:static }
    .sd-deck-top{ padding:16px 18px 12px }
    .sd-js .sd-deck-top p .sd-swipe{ display:inline }
    .sd-js .sd-deck-top p .sd-order{ display:none }
    /*The deck becomes a swipe rail on a phone: the reviews stacked would be a
       3000px list.*/
    .sd-js .sd-list{ display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
      scroll-padding:0 16px; padding:14px 16px 18px; scrollbar-width:none;
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
      mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); }
    .sd-js .sd-list::-webkit-scrollbar{ display:none }
    .sd-js .sd-list li{ flex:0 0 76%; scroll-snap-align:start }
    .rvx-ac-bg img{ object-position:24% 60% }
    .rvx-ac-readerbody{ padding:18px 18px 22px }
  }
  @media(max-width:420px){
    .sd-stats{ padding:18px 16px 0 }
    .sd-stats-main{ gap:10px 18px }
    .sd-avg b{ font-size:38px }
    .sd-stats-foot{ margin:16px -16px 0 }
    .sd-stats-foot span{ padding:11px 6px; font-size:10.5px; letter-spacing:.02em }
    .sd-js .sd-list li{ flex-basis:82% }
  }
  @media(prefers-reduced-motion:reduce){
    .sd-js .sd-spot:not(.is-paused) .sd-kicker i{ animation:none }
    .sd-quote, .sd-foot, .sd-tile{ transition:none }
    .sd-tile-bar{ display:none }
  }
  @media(prefers-reduced-transparency:reduce){
    .sd-glass{ -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(170deg,rgba(15,24,42,.95),rgba(6,10,20,.96) 62%) }
  }
  .rvx-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:clamp(30px,3.6vw,46px);
    font-family:var(--font-display),sans-serif; font-weight:800; font-size:11px; letter-spacing:.15em;
    color:#fff; text-decoration:none; padding:16px 30px; border-radius:12px;
    background:linear-gradient(180deg,var(--rvx-red),var(--rvx-red-2));
    box-shadow:0 16px 40px rgba(227,38,54,.32); }
  .rvx-cta:hover{ color:#fff; filter:brightness(1.1) }
  .rvx-foot{ border-top:1px solid var(--rvx-line); padding:24px 0 0; text-align:center;
    font-size:12px; color:var(--rvx-muted-2); }

  @media(max-width:900px){
    .rvx-wrap{ padding:0 20px }
    .rvx-hero{ padding:56px 0 50px; background-position:50% 42% }
    .rvx-herovid{ object-position:50% 42% }
    .rvx-sec{ padding-top:62px }
    .rvx-kpi{ flex:1 1 100%; border-left:0; border-top:1px solid var(--rvx-line); padding:16px }
    .rvx-kpi:first-child{ border-top:0 }
    .rvx-trow{ grid-template-columns:38px 1fr auto;
      grid-template-areas:"pos main tag" "pos who who" "bar bar bar"; gap:8px 12px; padding:14px; }
    .rvx-tpos{ grid-area:pos; align-self:start }
    .rvx-tmain{ grid-area:main } .rvx-twho{ grid-area:who }
    .rvx-ttag{ grid-area:tag; padding:5px 10px }
    .rvx-tbar{ grid-area:bar; margin-top:4px }
    .rvx-tgo{ display:none }
    .rvx-prov{ margin-top:52px; padding:26px 4px }
    .rvx-wallwrap{ padding-bottom:20px }
    .rvx-wallhint{ display:none }
    .rvx-rpanel{ max-height:92vh }
    #rvxBody{ padding:20px }
    /*A phone never sees the marquee: build() in reviews.js swaps the
       wall to `.rvx-list` and keeps 12 cards. Without these three rules it does
       that only once the deferred script runs, so the first style pass lays all
       98 testimonials out in three ~106px columns and then throws the result
       away. Measured on the mobile profile: LCP -340 ms, TBT 1060 -> 570 ms.
       The first four cards of each round-robin column are review indexes 0-11,
       i.e. exactly the 12 the script goes on to show, so this is the same
       layout arriving earlier rather than a different one. All 98 stay in the
       HTML for a crawler; only their painting is deferred.*/
    .rvx-wall.rvx-cols{ display:flex; flex-direction:column; gap:14px; height:auto;
      -webkit-mask-image:none; mask-image:none }
    .rvx-wall.rvx-cols .rvx-colin{ animation:none; gap:14px }
    .rvx-wall.rvx-cols .rvx-colin>.rvx-card:nth-child(n+5){ display:none }
  }
  @media(max-width:560px){
    /* The centre half of the same frame — see the preloads at the top. */
    .rvx-hero{ background-image:url("../../images/reviews/hero-onboard-poster-narrow.7675590bef89.webp") }
  }
  @media(max-width:520px){ .rvx-kpi b{ font-size:26px } }

  /*A wall that scrolls forever is exactly what a motion-sensitive
     reader needs stopped. Hold every column still and drop the reveal /
     ignition transitions; the content is identical, it just does not move.*/
  @media(prefers-reduced-motion:reduce){
    .rvx-colin{ animation:none }
    .rvx-rev{ opacity:1; transform:none; transition:none }
    /* Equal specificity to the hero entrance above, and later, so it wins. */
    .rvx-hero .rvx-rev{ animation:none }
    .rvx-tbar i, .rvx-rpanel, .rvx-herovid{ transition:none; animation:none }
    .rvx-eyebrow i{ animation:none }
  }