/* ============================================================
   WHY --pvh AND NOT --vh
   ------------------------------------------------------------
   style.css defines --vh at :root as 100vh -- the WHOLE viewport
   height. The pinned sections on this page want one HUNDREDTH of
   it, so they set their own value locally. Same name, opposite
   meaning, and it only works while every single section remembers
   to override it: one that forgets inherits the site-wide value and
   comes out a hundred times too tall. #prPersonas did exactly that
   and measured 300 screens instead of 3. Renamed so the two can
   never be confused again.
   ============================================================ */
/* ============================================================
   PRODUCTS & PRICING
   ------------------------------------------------------------
   The page's own layout, restated in Virevo's tokens.

   Scoped under .pr-page throughout. This sheet loads alongside style.css,
   which already owns #nav, #menu, #sidePane and #foot — and the source page
   arrived carrying class names like .btn, .dot, .lbl and .card. Unscoped,
   the two vocabularies would collide in both directions; one prefix removes
   the whole class of problem.

   Three things were taken out rather than translated:

     its :root — style.css defines the palette, and a second set of tokens
     is a second source of truth

     its reset and #nav / #navmenu / footer rules — this page uses the site's
     own shell, lifted verbatim from index.html, so that styling comes with it

     every scroll-snap declaration. Lenis drives the scroll here, and snap
     points fight it: both want to decide where the page comes to rest.

   Colour mapping, source -> ours:
     #f7f5ee / #f9f7f1 ground .... var(--cream)
     #16130e ink ................. var(--ink)
     #a9793f bronze .............. var(--grid), the site's gold
     #15130f near-black .......... #14251b, the deep green the footer uses
   ============================================================ */
.pr-page :root{--bg:var(--cream); --bg2:#ece9e1; --bg3:#e2ded2; --ink:var(--ink); --ink2:rgba(30,55,39,.72); --ink3:rgba(30,55,39,.52); --line:rgba(22,19,14,0.12); --line2:rgba(22,19,14,0.08); --bronze:var(--grid); --bronze-light:#d8b978; --dark:#14251b; --cream:var(--cream);}
.pr-page .burger.open i:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.pr-page .burger.open i:nth-child(2){opacity:0;}
.pr-page .burger.open i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}
.pr-page #navmenu.open{transform:translateY(0);}
.pr-page .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.pr-page .reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.pr-page .reveal{opacity:1;transform:none;transition:none;}}
.pr-page .btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;width:240px;max-width:100%;border-radius:30px;font-size:13.5px;font-weight:600;letter-spacing:0.2px;}
.pr-page .btn-primary{background:var(--ink);color:var(--cream);}
.pr-page .btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(30,55,39,.14);}
.pr-page .hero{padding:105px 22px 34px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.pr-page .eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:1px solid rgba(30,55,39,.14);font-size:10px;letter-spacing:1.6px;font-weight:600;color:rgba(30,55,39,.72);text-transform:uppercase;}
.pr-page .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--grid);}
.pr-page .hero h1{font-size:26px;line-height:1.12;font-weight:400;letter-spacing:-0.3px;margin-top:20px;}
.pr-page .hero h1 .accent{color:var(--grid);font-weight:500;}
.pr-page .hero-sub{font-size:12.5px;line-height:1.7;color:rgba(30,55,39,.52);margin-top:16px;max-width:300px;}
.pr-page .mascot-wrap{position:relative;margin-top:20px;width:230px;height:230px;display:flex;align-items:center;justify-content:center;}
.pr-page .mascot-ring{position:absolute;width:196px;height:196px;border-radius:50%;border:1px dashed rgba(22,19,14,0.18);}
.pr-page .mascot-img{position:relative;width:210px;height:auto;z-index:2;filter:drop-shadow(0 14px 30px rgba(22,19,14,0.10));}
.pr-page .mascot-cap{margin-top:4px;font-size:10px;letter-spacing:1.4px;color:rgba(30,55,39,.52);text-transform:uppercase;font-weight:600;}
.pr-page .mascot-cap b{color:var(--grid);font-weight:700;}
.pr-page .cta-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px;width:100%;max-width:280px;}
.pr-page .beat{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:50px 26px;position:relative;}
.pr-page .beat.light{background:var(--cream);color:var(--ink);}
.pr-page .beat.dark{background:#14251b;color:var(--cream);}
.pr-page .beat-lock{display:flex;align-items:center;gap:8px;margin-bottom:26px;}
.pr-page .beat.centered .beat-lock{justify-content:center;}
.pr-page .beat-lock .ico{width:22px;height:22px;border-radius:50%;border:1px solid rgba(30,55,39,.14);display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(30,55,39,.52);flex-shrink:0;}
.pr-page .beat.dark .beat-lock .ico{border-color:rgba(245,241,230,0.25);color:rgba(245,241,230,0.6);}
.pr-page .beat-lock .lbl{font-size:10px;letter-spacing:1.6px;font-weight:600;color:rgba(30,55,39,.52);text-transform:uppercase;}
.pr-page .beat.dark .beat-lock .lbl{color:rgba(245,241,230,0.5);}
.pr-page .beat-num{font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--grid);text-transform:uppercase;margin-bottom:14px;}
.pr-page .beat.dark .beat-num{color:#d8b978;}
.pr-page .beat-statement{font-size:26px;line-height:1.36;font-weight:600;letter-spacing:-0.2px;}
.pr-page .beat.centered{text-align:center;}
.pr-page .beat-statement .live{color:var(--ink);}
.pr-page .beat.dark .beat-statement .live{color:var(--cream);}
.pr-page .beat-statement .dim{color:rgba(22,19,14,0.22);}
.pr-page .beat.dark .beat-statement .dim{color:rgba(245,241,230,0.22);}
.pr-page .beat-sub{font-size:12.5px;color:rgba(30,55,39,.52);line-height:1.6;max-width:290px;margin-top:20px;}
.pr-page .beat.dark .beat-sub{color:rgba(245,241,230,0.55);}
.pr-page .beat.centered .beat-sub{margin-left:auto;margin-right:auto;}
.pr-page .dots{display:flex;gap:6px;margin-top:20px;}
.pr-page .beat.centered .dots{justify-content:center;}
.pr-page .dots span{width:5px;height:5px;border-radius:50%;background:rgba(30,55,39,.14);}
.pr-page .beat.dark .dots span{background:rgba(245,241,230,0.2);}
.pr-page .dots span.on{background:var(--grid);width:16px;border-radius:3px;}
.pr-page .beat.dark .dots span.on{background:#d8b978;}
.pr-page .intro{position:relative;overflow:hidden;padding:80px 26px 40px 26px;}
.pr-page .intro.light{background:var(--cream);color:var(--ink);}
.pr-page .intro.grey{background:#ece9e1;color:var(--ink);}
.pr-page .intro.dark{background:#14251b;color:var(--cream);}
.pr-page .ghost{position:absolute;font-weight:800;line-height:1;z-index:0;white-space:nowrap;}
.pr-page .intro.light .ghost{top:56px;right:-18px;font-size:210px;color:rgba(22,19,14,0.05);letter-spacing:-8px;}
.pr-page .intro.grey .ghost{top:40px;left:-22px;font-size:190px;color:rgba(22,19,14,0.05);letter-spacing:-6px;}
.pr-page .intro.dark .ghost{top:70px;left:50%;transform:translateX(-50%);font-size:220px;color:rgba(245,241,230,0.045);letter-spacing:-8px;}
.pr-page .sec-num{position:relative;z-index:1;display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--grid);text-transform:uppercase;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #d8b978;}
.pr-page .intro.dark .sec-num{color:#d8b978;}
.pr-page .intro h2{position:relative;z-index:1;font-size:25px;line-height:1.32;font-weight:600;letter-spacing:-0.2px;}
.pr-page .intro h2 b{font-weight:700;}
.pr-page .intro.dark h2 b{color:var(--cream);}
.pr-page .intro .lede{position:relative;z-index:1;font-size:12.5px;line-height:1.75;color:rgba(30,55,39,.52);margin-top:16px;max-width:320px;}
.pr-page .intro.dark .lede{color:rgba(245,241,230,0.6);}
.pr-page .intro.grey .lede{margin-left:auto;}
.pr-page .intro.centered{text-align:center;}
.pr-page .intro.centered .sec-num{margin-left:auto;margin-right:auto;}
.pr-page .intro.centered .lede{margin-left:auto;margin-right:auto;}
.pr-page .intro.right{text-align:right;}
.pr-page .intro.right .lede{margin-left:auto;}
.pr-page .danno{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:18px;padding:6px 12px;border-radius:20px;border:1px dashed rgba(245,241,230,0.28);font-size:9.5px;letter-spacing:1px;font-weight:600;color:rgba(245,241,230,0.55);text-transform:uppercase;}
.pr-page .intro.light .danno{border-color:rgba(30,55,39,.14);color:rgba(30,55,39,.52);}
.pr-page .layer-stack{padding:34px 26px 0 26px;display:flex;flex-direction:column;position:relative;z-index:1;}
.pr-page .layer-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid rgba(30,55,39,.08);}
.pr-page .layer-row:last-child{border-bottom:1px solid rgba(30,55,39,.08);}
.pr-page .layer-row .li-num{font-size:11px;font-weight:700;color:rgba(30,55,39,.52);letter-spacing:1px;width:20px;flex-shrink:0;}
.pr-page .layer-row .li-txt{font-size:13px;font-weight:500;}
.pr-page .layer-row .li-arrow{margin-left:auto;color:rgba(30,55,39,.52);font-size:14px;}
.pr-page .steps-wrap{background:#ece9e1;padding:0 22px 50px 22px;}
.pr-page .stepcard{background:var(--cream);border:1px solid rgba(30,55,39,.08);border-radius:16px;padding:20px;margin-bottom:14px;}
.pr-page .stepcard .stepnum{font-size:10px;font-weight:700;letter-spacing:1.6px;color:var(--grid);text-transform:uppercase;margin-bottom:10px;}
.pr-page .stepcard h5{font-size:16px;font-weight:600;margin-bottom:8px;}
.pr-page .stepcard p{font-size:12.5px;line-height:1.6;color:rgba(30,55,39,.52);}
.pr-page .chat-wrap{background:#14251b;color:var(--cream);padding:0 22px 50px 22px;}
.pr-page .qlabel{font-size:10.5px;font-weight:600;letter-spacing:0.8px;color:rgba(245,241,230,0.48);text-transform:uppercase;margin-bottom:12px;line-height:1.6;}
.pr-page .qchips{display:flex;flex-direction:column;gap:9px;}
.pr-page .qchip{padding:13px 16px;border-radius:12px;border:1px solid rgba(245,241,230,0.16);font-size:12.5px;color:rgba(245,241,230,0.75);background:rgba(245,241,230,0.03);line-height:1.4;text-align:left;width:100%;}
.pr-page .qchip.active{border-color:#d8b978;color:var(--cream);background:rgba(201,154,95,0.13);}
.pr-page .dpanel-tag{font-size:10.5px;font-weight:700;letter-spacing:1.4px;color:rgba(245,241,230,0.4);text-transform:uppercase;margin:30px 0 14px 0;}
.pr-page .panel-card{border-radius:16px;overflow:hidden;border:1px solid rgba(245,241,230,0.14);margin-bottom:22px;}
.pr-page .panel-card.llm{background:rgba(245,241,230,0.025);}
.pr-page .panel-card.tojo{background:linear-gradient(180deg, rgba(201,154,95,0.16), rgba(201,154,95,0.03));border-color:rgba(201,154,95,0.45);box-shadow:0 24px 50px rgba(201,154,95,0.10);}
.pr-page .panel-bar{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid rgba(245,241,230,0.1);}
.pr-page .avatar{width:25px;height:25px;border-radius:50%;background:rgba(245,241,230,0.12);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:rgba(245,241,230,0.7);flex-shrink:0;}
.pr-page .avatar.tj{background:#d8b978;color:#14251b;}
.pr-page .plabel{font-size:12.5px;font-weight:600;color:rgba(245,241,230,0.88);}
.pr-page .live-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:1px;color:#7fd99a;text-transform:uppercase;}
.pr-page .live-badge .ldot{width:6px;height:6px;border-radius:50%;background:#3fca6e;}
.pr-page .panel-body{padding:16px;}
.pr-page .msg-user{font-size:12px;color:rgba(245,241,230,0.55);background:rgba(245,241,230,0.05);padding:10px 12px;border-radius:10px;margin-bottom:14px;line-height:1.5;}
.pr-page .msg-bot{font-size:13px;line-height:1.62;color:rgba(245,241,230,0.68);}
.pr-page .panel-card.tojo .msg-bot{color:var(--cream);}
.pr-page .tagline{display:block;margin-top:14px;font-size:9.5px;letter-spacing:1.2px;font-weight:700;color:rgba(245,241,230,0.32);text-transform:uppercase;}
.pr-page .panel-card.tojo .tagline{color:#d8b978;}
.pr-page .panel-cta{padding:14px 16px;border-top:1px solid rgba(245,241,230,0.1);}
.pr-page .muted{font-size:11px;color:rgba(245,241,230,0.4);}
.pr-page .dbtn-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:13px 18px;border-radius:26px;background:#d8b978;color:#14251b;font-size:13px;font-weight:700;}
.pr-page .tojo-form{display:flex;gap:8px;padding:14px 16px;border-top:1px solid rgba(245,241,230,0.1);}
.pr-page .tojo-form input{flex:1;background:rgba(245,241,230,0.06);border:1px solid rgba(245,241,230,0.15);border-radius:20px;padding:11px 14px;color:var(--cream);font-size:12.5px;font-family:inherit;}
.pr-page .tojo-form input::placeholder{color:rgba(245,241,230,0.4);}
.pr-page .tojo-form button{background:#d8b978;color:#14251b;border-radius:20px;padding:0 18px;font-size:12.5px;font-weight:700;flex-shrink:0;}
.pr-page .tojo-typing{display:none;padding:14px 16px;font-size:12px;color:rgba(245,241,230,0.5);font-style:italic;}
.pr-page .tojo-gate{display:none;padding:14px 16px;border-top:1px solid rgba(245,241,230,0.1);}
.pr-page .tojo-gate p{font-size:12px;color:rgba(245,241,230,0.7);line-height:1.6;margin-bottom:12px;}
.pr-page .wlabel-main{font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:rgba(245,241,230,0.5);text-transform:uppercase;margin:36px 0 14px 0;}
.pr-page .wcard{background:var(--cream);border-radius:16px;padding:18px;box-shadow:0 30px 60px rgba(0,0,0,0.4);}
.pr-page .wtopbar{display:flex;align-items:center;gap:6px;margin-bottom:16px;}
.pr-page .wtopbar i{width:8px;height:8px;border-radius:50%;background:rgba(22,19,14,0.15);display:block;}
.pr-page .wtitle{margin-left:6px;font-size:10px;color:rgba(30,55,39,.52);font-weight:500;}
.pr-page .wsection{margin-bottom:18px;}
.pr-page .wsection:last-child{margin-bottom:0;}
.pr-page .wlabel{font-size:9.5px;font-weight:700;letter-spacing:1px;color:rgba(30,55,39,.52);text-transform:uppercase;margin-bottom:10px;}
.pr-page .wfolder{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink);padding:7px 0;font-weight:500;}
.pr-page .fc{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pr-page .wstagetitle{font-size:12px;font-weight:600;margin-bottom:10px;}
.pr-page .wbars{display:flex;align-items:flex-end;gap:7px;height:62px;}
.pr-page .wbars div{flex:1;background:#e2ded2;border-radius:3px 3px 0 0;}
.pr-page .wbars div.hi{background:var(--grid);}
.pr-page .wchat-msg{font-size:11.5px;padding:8px 11px;border-radius:9px;margin-bottom:7px;line-height:1.4;}
.pr-page .wchat-msg.user{background:#ece9e1;color:rgba(30,55,39,.72);}
.pr-page .wchat-msg.bot{background:rgba(169,121,63,0.1);color:var(--ink);font-weight:500;}
.pr-page .persona-wrap{background:var(--cream);padding:36px 22px 50px 22px;}
.pr-page .persona-intro-lbl{font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--grid);text-transform:uppercase;margin-bottom:10px;}
.pr-page .persona-wrap h3{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:22px;}
.pr-page .persona-card{background:#fff;border:1px solid rgba(30,55,39,.08);border-radius:14px;padding:18px;margin-bottom:12px;}
.pr-page .persona-card .pn{font-size:14px;font-weight:700;margin-bottom:7px;}
.pr-page .persona-card .pd{font-size:12px;line-height:1.65;color:rgba(30,55,39,.52);}
.pr-page .sim-wrap{background:#ece9e1;padding:0 22px 40px 22px;}
.pr-page .simcard{background:var(--cream);border:1px solid rgba(30,55,39,.08);border-radius:18px;padding:20px;margin-bottom:16px;}
.pr-page .simhead{padding-bottom:14px;border-bottom:1px solid rgba(30,55,39,.08);margin-bottom:14px;}
.pr-page .simname{font-size:14px;font-weight:700;margin-bottom:4px;line-height:1.35;}
.pr-page .simmeta{font-size:11px;color:rgba(30,55,39,.52);display:flex;align-items:center;gap:6px;}
.pr-page .live-dot{width:6px;height:6px;border-radius:50%;background:#3fca6e;display:inline-block;}
.pr-page .scenwrap{display:flex;flex-wrap:wrap;gap:8px;}
.pr-page .scenchip{font-size:11.5px;font-weight:500;padding:9px 14px;border-radius:20px;border:1px solid rgba(30,55,39,.14);color:rgba(30,55,39,.72);background:#fff;}
.pr-page .scenchip.active{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.pr-page .lv-title{margin-bottom:16px;text-transform:uppercase;letter-spacing:1px;font-weight:700;font-size:10.5px;color:rgba(30,55,39,.52);}
.pr-page .lv-row{margin-bottom:20px;}
.pr-page .lv-row:last-child{margin-bottom:0;}
.pr-page .lv-label{display:flex;justify-content:space-between;font-size:12px;color:rgba(30,55,39,.72);margin-bottom:9px;font-weight:500;}
.pr-page .lv-label .v{color:var(--grid);font-weight:700;}
.pr-page input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:linear-gradient(to right, var(--grid) 0%, var(--grid) var(--pct,50%), #e2ded2 var(--pct,50%), #e2ded2 100%);}
.pr-page input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--grid);cursor:pointer;}
.pr-page input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--grid);cursor:pointer;}
.pr-page .tg-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.pr-page .tg-row:last-child{margin-bottom:0;}
.pr-page .tg-label{font-size:12.5px;color:rgba(30,55,39,.72);font-weight:500;}
.pr-page .tg-switch{position:relative;width:38px;height:22px;flex-shrink:0;}
.pr-page .tg-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.pr-page .tg-pill{position:absolute;inset:0;border-radius:20px;background:#e2ded2;transition:background .2s;pointer-events:none;}
.pr-page .tg-switch input:checked + .tg-pill{background:var(--grid);}
.pr-page .tg-pill .tk{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left .2s;}
.pr-page .tg-switch input:checked + .tg-pill .tk{left:18px;}
.pr-page .outgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pr-page .outcard{background:var(--cream);border:1px solid rgba(30,55,39,.08);border-radius:14px;padding:16px;}
.pr-page .outcard.intangible{background:rgba(169,121,63,0.06);border-color:rgba(169,121,63,0.25);}
.pr-page .outcard .ol{font-size:10px;font-weight:600;letter-spacing:0.6px;color:rgba(30,55,39,.52);text-transform:uppercase;margin-bottom:8px;}
.pr-page .outcard .ov{font-size:19px;font-weight:700;}
.pr-page .outcard.intangible .ov{color:var(--grid);}
.pr-page .chart-legend{display:flex;gap:18px;margin-top:14px;}
.pr-page .chart-legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(30,55,39,.52);}
.pr-page .chart-legend .sw{width:10px;height:10px;border-radius:50%;}
.pr-page .sim-footnote{font-size:10.5px;color:rgba(30,55,39,.52);line-height:1.6;margin-top:6px;}
.pr-page .giant{min-height:70vh;background:#14251b;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 26px;position:relative;overflow:hidden;}
.pr-page .giant .gwm{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);font-size:130px;font-weight:800;color:rgba(245,241,230,0.035);letter-spacing:2px;white-space:nowrap;}
.pr-page .giant .gwm-num{bottom:auto;top:36px;right:-10px;left:auto;transform:none;font-size:200px;letter-spacing:-6px;}
.pr-page .giant-cap{font-size:10.5px;font-weight:700;letter-spacing:2.4px;color:#d8b978;text-transform:uppercase;margin-bottom:22px;position:relative;z-index:1;}
.pr-page .giant-statement{font-size:32px;line-height:1.24;font-weight:700;color:var(--cream);letter-spacing:-0.5px;position:relative;z-index:1;}
.pr-page .giant-sub{font-size:13px;color:rgba(245,241,230,0.5);margin-top:20px;max-width:300px;position:relative;z-index:1;line-height:1.6;}
.pr-page .check-wrap{background:var(--cream);padding:0 22px 50px 22px;}
.pr-page .check-intro-lbl{font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--grid);text-transform:uppercase;margin-bottom:10px;}
.pr-page .check-wrap h3{font-size:19px;font-weight:600;line-height:1.32;margin-bottom:8px;}
.pr-page .check-row{display:flex;gap:14px;padding:18px 0;border-top:1px solid rgba(30,55,39,.08);}
.pr-page .check-row:last-child{border-bottom:1px solid rgba(30,55,39,.08);}
.pr-page .check-ico{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px;}
.pr-page .check-ico.no{background:#e2ded2;color:rgba(30,55,39,.52);}
.pr-page .check-ico.yes{background:var(--grid);color:#fff;}
.pr-page .check-body .ck-label{font-size:13px;font-weight:600;margin-bottom:6px;}
.pr-page .check-body .ck-excel{font-size:11.5px;color:rgba(30,55,39,.52);margin-bottom:3px;}
.pr-page .check-body .ck-excel b{font-weight:600;}
.pr-page .check-body .ck-virevo{font-size:11.5px;color:var(--grid);font-weight:500;}
.pr-page .check-body .ck-virevo b{font-weight:700;}
.pr-page .ticker{padding:50px 0;position:relative;overflow:hidden;}
.pr-page .ticker.dark1{background:#14251b;}
.pr-page .ticker.dark2{background:var(--ink);}
.pr-page .ticker-kicker{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:2.2px;color:#d8b978;text-transform:uppercase;margin-bottom:10px;}
.pr-page .ticker-title{text-align:center;font-size:19px;font-weight:600;color:var(--cream);margin-bottom:34px;padding:0 30px;line-height:1.42;}
.pr-page .ticker-lane{overflow:hidden;border-top:1px solid rgba(245,241,230,0.1);}
.pr-page .ticker-lane.last{border-bottom:1px solid rgba(245,241,230,0.1);}
.pr-page .ticker-track{display:flex;gap:12px;padding:16px 0;width:max-content;animation:tickL 26s linear infinite;}
.pr-page .ticker-track.rev{animation-name:tickR;}
@keyframes tickL{from{transform:translateX(0);}
to{transform:translateX(-50%);}}
@keyframes tickR{from{transform:translateX(-50%);}
to{transform:translateX(0);}}
@media (prefers-reduced-motion: reduce){.pr-page .ticker-track{animation:none;}}
.pr-page .tick{flex-shrink:0;padding:11px 18px;border-radius:20px;border:1px solid rgba(245,241,230,0.2);font-size:12.5px;font-weight:600;color:rgba(245,241,230,0.85);white-space:nowrap;background:rgba(245,241,230,0.03);}
.pr-page .tick b{color:#d8b978;}
.pr-page .tick.live{border-color:#d8b978;color:var(--cream);background:rgba(201,154,95,0.15);}
.pr-page .tb-wrap{background:#14251b;padding:36px 22px 0 22px;}
.pr-page .tb-card{background:var(--cream);border-radius:16px;padding:18px;box-shadow:0 30px 60px rgba(0,0,0,0.4);}
.pr-page .tb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.pr-page .tb-head .t{font-size:12.5px;font-weight:700;color:var(--ink);}
.pr-page .tb-head .m{font-size:10.5px;color:rgba(30,55,39,.52);}
.pr-page .tb-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid rgba(30,55,39,.08);}
.pr-page .tb-row .n{font-size:12.5px;font-weight:600;color:var(--ink);}
.pr-page .tb-row .s{font-size:10.5px;color:rgba(30,55,39,.52);margin-top:2px;}
.pr-page .tb-row .v{font-size:11.5px;font-weight:600;color:var(--grid);}
.pr-page .tb-dot{width:6px;height:6px;border-radius:50%;background:var(--grid);display:inline-block;margin-right:6px;}
.pr-page .roadmap{padding:34px 22px 50px 22px;}
.pr-page .rm-row{margin-bottom:18px;}
.pr-page .rm-row .rl{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:10px;}
.pr-page .rm-row.live .rl{color:#d8b978;}
.pr-page .rm-row.next .rl{color:rgba(245,241,230,0.4);}
.pr-page .rm-items{display:flex;flex-wrap:wrap;gap:8px;}
.pr-page .rm-chip{padding:8px 14px;border-radius:16px;border:1px solid rgba(245,241,230,0.18);font-size:11.5px;color:rgba(245,241,230,0.75);}
.pr-page .rm-row.live .rm-chip{border-color:#d8b978;color:var(--cream);background:rgba(201,154,95,0.1);}
.pr-page .circle-carousel{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--cream);}
.pr-page .circle-carousel::-webkit-scrollbar{display:none;}
.pr-page .circle-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 30px;min-height:80vh;}
.pr-page .circle-kicker{font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--grid);text-transform:uppercase;margin-bottom:28px;}
.pr-page .circle-badge{width:190px;height:190px;border-radius:50%;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 38%, #efe9d8, #e2dbc2);display:flex;align-items:flex-end;justify-content:center;box-shadow:0 26px 55px rgba(22,19,14,0.14);}
.pr-page .circle-badge img{width:82%;height:auto;position:relative;top:6px;}
.pr-page .circle-word{margin-top:28px;font-size:23px;font-weight:700;letter-spacing:0.5px;}
.pr-page .circle-sub{margin-top:12px;font-size:12.5px;color:rgba(30,55,39,.52);max-width:270px;line-height:1.65;}
.pr-page .circle-dots{margin-top:24px;display:flex;gap:8px;}
.pr-page .circle-dots span{width:6px;height:6px;border-radius:50%;background:rgba(30,55,39,.14);}
.pr-page .circle-dots span.on{background:var(--grid);width:20px;border-radius:4px;}
.pr-page .circle-swipe{margin-top:16px;font-size:10px;letter-spacing:1px;color:rgba(30,55,39,.52);text-transform:uppercase;font-weight:600;}
.pr-page .pi-wrap{background:var(--cream);position:relative;overflow:hidden;padding:80px 30px 30px 30px;text-align:center;}
.pr-page .pi-ghost{position:absolute;top:100px;left:50%;transform:translateX(-50%);font-size:230px;font-weight:800;line-height:1;color:rgba(22,19,14,0.045);letter-spacing:-8px;z-index:0;white-space:nowrap;}
.pr-page .pi-wrap h2{position:relative;z-index:1;font-size:24px;line-height:1.34;font-weight:600;}
.pr-page .pi-wrap h2 b{font-weight:700;color:var(--grid);}
.pr-page .pi-wrap .lede{position:relative;z-index:1;font-size:12.5px;line-height:1.75;color:rgba(30,55,39,.52);margin:16px auto 0 auto;max-width:290px;}
.pr-page .tier-carousel{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--cream);}
.pr-page .tier-carousel::-webkit-scrollbar{display:none;}
.pr-page .tier-slide{flex:0 0 92%;margin:0 4%;display:flex;flex-direction:column;padding:30px 24px;border-radius:24px;min-height:64vh;}
.pr-page .tier-slide:first-child{margin-left:8%;}
.pr-page .tier-slide:last-child{margin-right:8%;}
.pr-page .tier-slide.listener{border:1px solid rgba(30,55,39,.14);background:var(--cream);}
.pr-page .tier-slide.strategist{border:1.5px solid #d8b978;background:linear-gradient(180deg, rgba(201,154,95,0.10), rgba(201,154,95,0.02));box-shadow:0 30px 60px rgba(169,121,63,0.14);}
.pr-page .tier-slide.doer{background:#14251b;color:var(--cream);}
.pr-page .tier-badge{display:inline-block;align-self:flex-start;padding:6px 14px;border-radius:20px;background:var(--grid);color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;}
.pr-page .tier-num{font-size:10.5px;font-weight:700;letter-spacing:1.8px;color:var(--grid);text-transform:uppercase;margin-bottom:10px;}
.pr-page .tier-slide.doer .tier-num{color:#d8b978;}
.pr-page .tier-name{font-size:24px;font-weight:700;letter-spacing:-0.3px;margin-bottom:12px;line-height:1.2;}
.pr-page .tier-desc{font-size:12.5px;line-height:1.7;color:rgba(30,55,39,.52);}
.pr-page .tier-slide.doer .tier-desc{color:rgba(245,241,230,0.6);}
.pr-page .tier-price-row{display:flex;align-items:baseline;gap:8px;margin-top:26px;}
.pr-page .tier-price{font-size:40px;font-weight:800;letter-spacing:-1px;}
.pr-page .tier-period{font-size:13px;font-weight:500;}
.pr-page .tier-credits{font-size:11.5px;font-weight:600;letter-spacing:0.4px;margin-top:8px;text-transform:uppercase;color:rgba(30,55,39,.52);}
.pr-page .tier-slide.strategist .tier-credits{color:var(--grid);}
.pr-page .tier-slide.doer .tier-credits{color:#d8b978;}
.pr-page .tier-feats{margin-top:22px;display:flex;flex-direction:column;gap:11px;}
.pr-page .tier-feat{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;}
.pr-page .tier-feat .plus{font-weight:700;flex-shrink:0;}
.pr-page .tier-slide.doer .tier-feat .plus{color:#d8b978;}
.pr-page .tier-cta{margin-top:auto;padding-top:26px;}
.pr-page .tier-cta a{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:15px;border-radius:30px;font-size:13.5px;font-weight:600;}
.pr-page .tier-slide.listener .tier-cta a{background:transparent;border:1.5px solid var(--ink);color:var(--ink);}
.pr-page .tier-slide.strategist .tier-cta a{background:var(--grid);color:#fff;}
.pr-page .tier-slide.doer .tier-cta a{background:#d8b978;color:#14251b;}
.pr-page .tier-dots{display:flex;justify-content:center;gap:8px;padding:20px 0 6px 0;}
.pr-page .tier-dots span{width:6px;height:6px;border-radius:50%;background:rgba(30,55,39,.14);}
.pr-page .tier-dots span.on{background:var(--grid);width:20px;border-radius:4px;}
.pr-page .tier-note{text-align:center;font-size:11px;color:rgba(30,55,39,.52);padding:0 30px 40px 30px;line-height:1.6;}
.pr-page .ent-wrap{background:var(--cream);padding:20px 22px 50px 22px;}
.pr-page .ent-lbl{font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--grid);text-transform:uppercase;margin-bottom:18px;}
.pr-page .ent-card2{background:#fff;border:1px solid rgba(30,55,39,.08);border-radius:16px;padding:22px;margin-bottom:14px;}
.pr-page .ent-card2 .et{font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--grid);text-transform:uppercase;}
.pr-page .ent-card2 h4{font-size:17px;font-weight:600;margin-top:12px;line-height:1.32;}
.pr-page .ent-card2 p{font-size:12.5px;color:rgba(30,55,39,.52);margin-top:12px;line-height:1.65;}
.pr-page .ent-card2 a{display:inline-block;margin-top:16px;font-size:12.5px;font-weight:700;border-bottom:1.5px solid var(--grid);padding-bottom:2px;}

/* ============================================================
   DESKTOP — min-width:981px
   ------------------------------------------------------------
   EVERY SELECTOR HERE MIRRORS THE ONE IT OVERRIDES.

   The first attempt at this block did not, and that is what left the page
   in a phone column on a wide screen. It said ".pr-page h1", which scores
   0,1,1 — while the translated source rule says ".pr-page .hero h1" at
   0,2,1 and wins whatever the order. So the source's 29px stayed, and the
   only part of my rule that DID land was its max-width:16ch, which is what
   pinned the headline to a narrow measure. A half-applied rule was worse
   than none: it changed the width without the size it was sized for.

   Matching the source's selectors exactly means specificity ties and source
   order decides — and this block is last.

   The other half is the phone measures. Seven blocks carry a hard
   max-width between 270px and 320px, which is right on a 390px screen and
   absurd on a 1440px one. Released to character-based measures so they
   stay readable instead of merely wide: prose stops being comfortable
   somewhere around 70ch however much room there is.
   ============================================================ */
@media (min-width:981px){
  .pr-page{--pr-gut:clamp(28px,5vw,120px);}

  /* the page's own gutter, so nothing sits against the window edge */
  .pr-page .hero,.pr-page .intro,.pr-page .giant,.pr-page .beat,
  .pr-page .pi-wrap,.pr-page .check-wrap,.pr-page .tb-wrap,
  .pr-page .persona-wrap,.pr-page .chat-wrap,.pr-page .sim-wrap,
  .pr-page .steps-wrap,.pr-page .ent-wrap{
    padding-left:var(--pr-gut);padding-right:var(--pr-gut);
  }

  /* ---- headings: same selectors, so these actually win ---- */
  .pr-page .hero h1        {font-size:clamp(36px,4.14vw,70px);line-height:0.94;
                            max-width:none;width:min(70vw,100%);}
  .pr-page .intro h2       {font-size:clamp(26px,2.7vw,46px);line-height:1.16;max-width:20ch;}
  .pr-page .pi-wrap h2     {font-size:clamp(26px,2.7vw,46px);line-height:1.16;max-width:20ch;}
  .pr-page .persona-wrap h3{font-size:clamp(19px,1.6vw,28px);}
  .pr-page .check-wrap h3  {font-size:clamp(18px,1.5vw,26px);}
  .pr-page .ent-card2 h4   {font-size:clamp(17px,1.3vw,23px);}

  /* ---- the phone measures, released ---- */
  .pr-page .hero-sub    {max-width:56ch;font-size:clamp(13px,1.02vw,18px);line-height:1.65;}
  .pr-page .cta-row     {max-width:none;}
  .pr-page .beat-sub    {max-width:52ch;}
  .pr-page .intro .lede {max-width:64ch;font-size:clamp(13px,1vw,17px);}
  .pr-page .giant-sub   {max-width:64ch;font-size:clamp(13px,1vw,17px);}
  .pr-page .circle-sub  {max-width:40ch;}
  .pr-page .pi-wrap .lede{max-width:64ch;font-size:clamp(13px,1vw,17px);}

  /* the hero column centres, so the released widths need somewhere to go */
  .pr-page .hero{padding-top:150px;padding-bottom:60px;}

  /* ---- both answers in view at once: the section exists to be compared ---- */
  .pr-page .chat-wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
  .pr-page .qchips,.pr-page .panel-cta,.pr-page .dpanel-tag{grid-column:1/-1;}

  /* ---- tiers and personas become columns, not swipe rails ---- */
  .pr-page .tier-carousel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible;}
  .pr-page .tier-slide{width:auto;min-width:0;}
  .pr-page .tier-dots{display:none;}
  .pr-page .circle-carousel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible;}
  .pr-page .circle-slide{width:auto;min-width:0;}
  .pr-page .circle-dots,.pr-page .circle-swipe{display:none;}
}

/* ============================================================
   THE SLAT PANEL — hero
   ------------------------------------------------------------
   Measured off the reference recording at 60fps rather than eyeballed:
   the picture is cut into horizontal slats whose HEIGHT is driven by a
   vertical drag. At rest the blinds are nearly shut — thin slats with the
   ground showing between them. Dragging opens them and the figure appears.

   Layering matters here. The <img> underneath is the real picture and the
   real fallback; the canvas sits over it and is transparent until the
   shader has drawn. If WebGL is unavailable the canvas never gains a
   context, .slat-on is never set, and what remains is simply the photograph
   — which is a fine hero on its own.
   ============================================================ */
.pr-page .slat-wrap{
  position:relative;margin-top:20px;
  width:331px;height:432px;          /* +20% again */
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-x;                 /* the vertical axis belongs to the drag */
  cursor:grab;
}
.pr-page .slat-wrap:active{cursor:grabbing;}
.pr-page .slat-src{
  position:relative;z-index:2;
  width:auto;height:100%;
  filter:drop-shadow(0 14px 30px rgba(22,19,14,0.10));
  user-select:none;-webkit-user-drag:none;
}
/* The interleave: Tojo, then the marquee, then the strings on top. These
   z-indexes only work because .slat-wrap is positioned but has NO z-index --
   position:relative with z-index:auto does not open a stacking context, so
   these children are ranked against .pr-mq in the hero. Giving .slat-wrap a
   z-index of its own would trap them and the marquee could then only be
   wholly in front of the blind or wholly behind it. */
.pr-page .slat-canvas{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:100%;width:auto;z-index:1;
  opacity:0;transition:opacity .25s ease;
  pointer-events:none;                /* the wrapper owns the pointer */
}
.pr-page .slat-lines{z-index:3;}
.pr-page .slat-src{z-index:1;}
/* only once the first frame is on the canvas does it take over from the img */
.pr-page .slat-wrap.slat-on .slat-canvas{opacity:1;}
.pr-page .slat-wrap.slat-on .slat-src{visibility:hidden;}

/* the drag affordance — the reference marks the axis, and without it nobody
   knows the panel is grabbable */
.pr-page .slat-hint{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;line-height:.62;
  font-size:11px;color:rgba(30,55,39,.42);pointer-events:none;
  transition:opacity .3s ease;
}
.pr-page .slat-hint i{font-style:normal;}
.pr-page .slat-wrap.slat-held .slat-hint{opacity:0;}

@media (min-width:981px){
  .pr-page .slat-wrap{width:490px;height:662px;margin-top:34px;}   /* +20% again */
}
@media (prefers-reduced-motion:reduce){
  /* no shader, no drag: the picture and nothing else */
  .pr-page .slat-canvas{display:none;}
  .pr-page .slat-wrap{cursor:default;}
  .pr-page .slat-hint{display:none;}
}


/* ============================================================
   THE HEADLINE, REVEALED A LINE AT A TIME
   ------------------------------------------------------------
   The split itself is done in JS, because where the lines actually
   break is only knowable after layout. These rules style the result.

   Deliberately no overflow:hidden on the line box. A masked slide-up
   is the usual pairing, but the leading here is now 0.94 — tighter
   than the em box — so a mask would crop the descenders on every
   line. Fade plus a small rise reads the same and cannot clip.
   ============================================================ */
.pr-page .hero h1 .ln{display:block;}
.pr-page .hero h1 .acc{color:var(--grid);font-weight:500;}

@keyframes prLineIn{
  from{opacity:0;transform:translateY(0.24em);}
  to  {opacity:1;transform:none;}
}
/* hidden only once the split has succeeded, so a JS failure leaves a
   perfectly readable headline rather than an invisible one */
.pr-page .hero h1.is-split .ln{opacity:0;}
.pr-page .hero h1.is-split.go .ln{
  animation:prLineIn .78s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i) * .11s);
}
@media (prefers-reduced-motion:reduce){
  .pr-page .hero h1.is-split .ln{opacity:1;}
  .pr-page .hero h1.is-split.go .ln{animation:none;}
}


/* ============================================================
   THE MARQUEE
   ------------------------------------------------------------
   Full-bleed, so it has to escape the hero's centred column and its
   gutters -- hence the negative margins pegged to the same --pr-gut
   the hero pads with, rather than a guessed value that would drift
   the moment the gutter changes.

   The track holds TWO identical copies and translates by exactly
   -50%. That is the whole trick: at -50% the second copy sits
   precisely where the first began, so the loop point is invisible.
   Any other percentage leaves a visible jump.
   ============================================================ */
.pr-page .pr-mq{
  /* --mq-lift is how far the band rides UP over Tojo. The matching
     margin-bottom gives back exactly what the lift took, so the caption and
     the buttons land where they did before the marquee existed. Expressed as
     (lift - 1em) because the track is one line tall at line-height 1, and 1em
     resolves against this element -- which is why the font-size lives here
     and the sets inherit it rather than setting their own. */
  --mq-lift:110px;
  font-size:clamp(52px,10vw,150px);
  margin-top:calc(var(--mq-lift) * -1);
  margin-bottom:calc(var(--mq-lift) - 0.86em);   /* 0.86em = the line-height, i.e. the band's real height */

  /* Between the two blind passes: above Tojo and his veil (z-index 1),
     below the strings (z-index 3). Source order alone cannot express this --
     the marquee is a sibling of .slat-wrap, so without explicit z-indexes it
     would land wholly in front of the blind or wholly behind it. */
  position:relative;z-index:2;

  /* .hero is a column flex with align-items:center, so a child is sized to
     its own content -- and this child's content is a 4000px track, which made
     the "window" as wide as the thing it is supposed to be a window onto.
     Stretching it to the hero's content box is what gives overflow:hidden
     something to clip against. */
  align-self:stretch;width:auto;min-width:0;

  /* 100vw INCLUDES the scrollbar while the element's containing block does
     not, so the usual `width:100vw; margin-left:calc(50% - 50vw)` trick
     overhangs by exactly the scrollbar width and adds a horizontal one of its
     own. Escaping the hero's padding instead is exact at both widths -- and
     --pr-gut is only defined at >=981px, so the fallback covers mobile. */
  margin-left:calc(-1 * var(--pr-gut, 22px));
  margin-right:calc(-1 * var(--pr-gut, 22px));

  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.pr-page .pr-mq-track{display:flex;width:max-content;animation:prMq 26s linear infinite;}
.pr-page .pr-mq-set{
  display:flex;align-items:center;flex:0 0 auto;
  font-family:'Bebas Neue',var(--font-display),sans-serif;
  font-size:inherit;
  /* Bebas caps fill almost the whole em box and it carries no descenders in
     these words, so 1.0 leaves a visible gap under the line. */
  line-height:0.86;
  font-weight:400;letter-spacing:0.02em;text-transform:uppercase;
  color:rgba(30,55,39,.16);
  white-space:nowrap;user-select:none;
}
.pr-page .pr-mq-set b{font-weight:400;padding:0 .10em;}
.pr-page .pr-mq-set i{
  font-style:normal;font-weight:400;
  color:rgba(30,55,39,.10);
  padding:0 .12em;transform:translateY(-.04em);
}
@keyframes prMq{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}

@media (min-width:981px){
  .pr-page .pr-mq{--mq-lift:200px;}
}

@media (prefers-reduced-motion:reduce){
  .pr-page .pr-mq-track{animation:none;}
}

/* ============================================================
   THE LOCKED STEPS
   ------------------------------------------------------------
   Four viewports tall, with a one-viewport stage stuck to the top:
   three screens of travel, one per step, plus a fourth so the last
   one can sit before the section releases.

   Mobile stacks all three in a single grid cell and cross-fades
   between them -- one at a time. Desktop puts them in three columns
   that arrive in turn and STAY, so by the end all three are readable
   side by side, which is the whole point of the column layout.
   ============================================================ */
/* Five viewports now, not four: three of travel, one for the last step to
   sit, and a fifth for the stage to slide away and uncover what is under it.
   z-index and an opaque background are both load-bearing -- a transparent
   stage would show the section beneath from the start and there would be
   nothing to reveal. */
#prBeats{position:relative;z-index:2;height:calc(var(--pvh, 1vh) * 500);}
#prBeats .pb-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  background:var(--cream, #f7f5ef);
  transform:translate3d(var(--pb-slide, 0px),0,0);will-change:transform;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pr-gut, 22px);
  overflow:hidden;
}

/* the rule: a measured span with a post at each end */
#prBeats .pb-rule{position:relative;height:1px;margin-bottom:30px;flex:0 0 auto;}
#prBeats .pb-line{
  position:absolute;inset:0;background:rgba(30,55,39,.30);
  /* grows from the LEFT post, not from the centre: the line is measuring out
     the columns one at a time, so its right end has to be somewhere the eye
     can follow rather than appearing at both ends at once */
  transform:scaleX(var(--pb-rule, 1));transform-origin:left center;
}
#prBeats .pb-p{position:absolute;top:0;width:15px;height:15px;opacity:var(--pb-post,1);}
#prBeats .pb-p::before,#prBeats .pb-p::after{content:"";position:absolute;background:rgba(30,55,39,.5);}
#prBeats .pb-p::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px;}
#prBeats .pb-p::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;}
#prBeats .pb-p.l{left:0;transform:translate(-50%,-50%);}
/* The right post is the TRAVELLER: it rides the growing end of the line and
   comes to rest at the far edge of whichever column has just arrived.
   Positioned by `left` rather than `right` because a percentage translateX
   would resolve against the post's own 15px, not the rule's width. */
#prBeats .pb-p.r{left:calc(var(--pb-tip, 1) * 100%);right:auto;transform:translate(-50%,-50%);}

/* ---- mobile: one at a time, stacked in a single cell ---- */
#prBeats .pb-cols{display:grid;flex:0 0 auto;}
#prBeats .pb-item{
  grid-area:1/1;                     /* all three share one cell */
  text-align:left;opacity:0;
  will-change:opacity,transform;
}
#prBeats .pb-item > *{will-change:opacity,transform;}

#prBeats .pb-kicker{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
  color:var(--ink);
}
#prBeats .pb-head{
  margin-top:16px;
  font-family:'Bebas Neue',var(--font-display),sans-serif;
  font-size:clamp(30px,4.4vw,52px);line-height:0.98;letter-spacing:0.01em;
  font-weight:400;text-transform:uppercase;color:var(--ink);
}
#prBeats .pb-body{
  margin-top:18px;
  font-size:clamp(12.5px,1vw,15px);line-height:1.7;color:rgba(30,55,39,.62);
}
#prBeats .pb-foot{
  margin-top:22px;
  font-family:'Bebas Neue',var(--font-display),sans-serif;
  font-size:clamp(19px,2.4vw,30px);line-height:1;letter-spacing:0.01em;
  font-weight:400;text-transform:uppercase;color:var(--ink);
}

#prBeats .pb-dots{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  display:flex;gap:7px;
}
#prBeats .pb-dots i{
  width:5px;height:5px;border-radius:50%;
  background:rgba(30,55,39,.16);transition:background .25s ease,width .25s ease;
}
#prBeats .pb-dots i.on{background:var(--grid);width:16px;border-radius:3px;}

/* ---- desktop: three columns under one rule ---- */
@media (min-width:981px){
  #prBeats .pb-cols{
    grid-template-columns:repeat(3,1fr);
    gap:clamp(28px,4vw,80px);
    align-items:start;
  }
  /* out of the shared cell and into a column each */
  #prBeats .pb-item{grid-area:auto;}
  #prBeats .pb-item + .pb-item{
    /* a hairline between columns, the same weight as the rule above them.
       The grid gap already provides the separation, so this only needs its
       own left padding -- no negative margin (and clamp() with a min below
       its max is silently the min, which is what my first attempt did). */
    border-left:1px solid rgba(30,55,39,.12);
    padding-left:clamp(20px,2.2vw,44px);
  }
  #prBeats .pb-head{font-size:clamp(24px,2.1vw,38px);}
  #prBeats .pb-foot{font-size:clamp(17px,1.3vw,24px);}
  #prBeats .pb-body{margin-top:16px;}
}

/* No pin and no scrub: the three simply stack down the page. */
@media (prefers-reduced-motion:reduce){
  #prBeats{height:auto;}
  #prBeats .pb-stage{position:static;height:auto;display:block;padding-top:70px;padding-bottom:70px;}
  #prBeats .pb-cols{display:block;}
  #prBeats .pb-item{opacity:1;transform:none;margin:0 0 70px;border-left:0;padding-left:0;}
  #prBeats .pb-line{transform:none;}
  #prBeats .pb-dots{display:none;}
}


/* ============================================================
   THE THREE LAYERS
   ------------------------------------------------------------
   Pulled up by one viewport so it is already sitting underneath the
   locked-steps stage while that stage is still covering it. When the
   stage slides off to the right this is revealed in place, rather than
   scrolling up into the space the stage vacated -- which is the whole
   difference between "slides away to show what's beneath" and "the
   next section arrives".
   ============================================================ */
#prLayers{
  position:relative;z-index:1;
  /* -180, not -100. A sticky child only pins once its OWN section top reaches
     the viewport top, so this margin decides when the section is standing
     still behind the stage. At -100 its top arrived exactly as the slide
     ENDED, which meant it was scrolling up into place the whole time the
     stage moved off -- it appeared to rise in from the bottom-right rather
     than being uncovered. The wipe spans 80vh of scroll (raw 0.80 to 1.00 of
     a 400vh travel), so it has to be a further 80vh higher to be already
     parked when the wipe begins. */
  margin-top:calc(var(--pvh, 1vh) * -180);
  height:calc(var(--pvh, 1vh) * 300);
  background:#e1e1e0;
}
#prLayers .pl-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  display:flex;align-items:center;
  padding:0 var(--pr-gut, 22px);
  overflow:hidden;
}
#prLayers .pl-inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;}

/* the watermark: present from the moment the section is uncovered */
#prLayers .pl-mark{
  position:absolute;right:calc(var(--pr-gut, 22px) * -0.2);top:50%;
  transform:translateY(-58%);
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(180px,30vw,460px);line-height:.8;font-weight:700;
  color:rgba(30,55,39,.05);
  pointer-events:none;user-select:none;z-index:1;
}

#prLayers .pl-kicker{
  display:inline-block;
  font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;
  color:var(--grid);
  padding-bottom:10px;border-bottom:1px solid var(--grid);
}
#prLayers .pl-head{
  margin-top:26px;
  font-size:clamp(26px,3.4vw,46px);line-height:1.16;letter-spacing:-0.01em;
  color:var(--ink);font-weight:500;
}
#prLayers .pl-head b{font-weight:800;}
#prLayers .pl-lede{
  margin-top:20px;max-width:44ch;
  font-size:clamp(13px,1.05vw,16px);line-height:1.75;color:rgba(30,55,39,.58);
}
#prLayers .pl-list{margin-top:44px;list-style:none;padding:0;border-top:1px solid rgba(30,55,39,.14);}
#prLayers .pl-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:26px;padding:20px 4px;
  border-bottom:1px solid rgba(30,55,39,.14);
}
#prLayers .pl-n{
  font-size:11px;font-weight:700;letter-spacing:1.4px;
  color:rgba(30,55,39,.45);font-variant-numeric:tabular-nums;
}
#prLayers .pl-t{font-size:clamp(14px,1.25vw,19px);color:var(--ink);font-weight:500;}
#prLayers .pl-a{font-size:15px;color:rgba(30,55,39,.45);}

@media (min-width:981px){
  #prLayers .pl-lede{max-width:38ch;}
  #prLayers .pl-row{gap:34px;padding:22px 6px;}
}

@media (prefers-reduced-motion:reduce){
  #prLayers{margin-top:0;height:auto;}
  #prLayers .pl-stage{position:static;height:auto;display:block;padding-top:80px;padding-bottom:80px;}
  #prBeats .pb-stage{transform:none;}
}

/* ============================================================
   THE PROCESS TRACK
   ------------------------------------------------------------
   Four viewports: three of travel, one for the last column to sit.
   Desktop is three columns that arrive in turn and stay; mobile
   stacks them in one cell and hands over, matching the section
   above so the two behave alike at each width.
   ============================================================ */
/* Five viewports now: three of travel, one for the last column to sit, and
   a fifth for the stage to slide away and uncover the section beneath. The
   z-index and the stage's own opaque background are both load-bearing -- a
   transparent stage shows what is under it from the start and there is
   nothing left to reveal. */
/* NO background on the section itself -- only on the stage. The section box
   is five screens of opaque cream sitting at z-index 2 over #prDecide, so a
   background here keeps covering it long after the stage has slid away: the
   wipe happens and nothing is revealed until you scroll clear of the section
   entirely, which reads as .02 arriving from the bottom. #prBeats never had
   one, which is the only reason .01 worked. */
#prProcess{position:relative;z-index:2;height:calc(var(--pvh, 1vh) * 600);}
#prProcess .pw-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  background:#e1e1e0;
  transform:translate3d(var(--pw-slide, 0px),0,0);will-change:transform;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pr-gut, 22px);
  overflow:hidden;
}
#prProcess .pw-cols{display:grid;}
#prProcess .pw-col{
  grid-area:1/1;                     /* mobile: all three share one cell */
  opacity:0;will-change:opacity,transform;
}
#prProcess .pw-col > *{will-change:opacity,transform;}
/* the gold eyebrow and the heavy near-black headline from the reference */
#prProcess .pw-step{
  font-size:clamp(11px,.85vw,13px);letter-spacing:2.2px;
  text-transform:uppercase;font-weight:700;
  color:var(--grid);
}
#prProcess .pw-head{
  margin-top:22px;
  /* deliberately NOT the Bebas used on the section above: the reference sets
     these in the display sans at a heavy weight, and the two do not mix in
     one panel */
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(24px,2.6vw,38px);line-height:1.14;letter-spacing:-0.02em;
  font-weight:800;color:#141414;
  text-transform:none;
}
#prProcess .pw-body{
  margin-top:26px;max-width:34ch;
  font-size:clamp(13px,1.05vw,16px);line-height:1.65;color:rgba(30,55,39,.58);
}

/* the rule, along the bottom */
#prProcess .pw-rule{position:relative;height:1px;margin-top:54px;flex:0 0 auto;}
#prProcess .pw-line{
  position:absolute;inset:0;background:rgba(30,55,39,.28);
  transform:scaleX(var(--pw-tip, 0));transform-origin:left center;
}
#prProcess .pw-p,#prProcess .pw-tip{
  position:absolute;top:50%;
  font-size:16.5px;line-height:1;font-weight:300;   /* +10% */
  color:rgba(30,55,39,.55);
  transform:translate(-50%,-50%);
  /* left is written by the driver from the columns' own measured positions */
}
#prProcess .pw-tip{color:var(--ink);}

@media (min-width:981px){
  #prProcess .pw-cols{
    grid-template-columns:repeat(3,1fr);
    gap:clamp(28px,4vw,80px);
    align-items:start;
  }
  #prProcess .pw-col{grid-area:auto;}   /* out of the shared cell */
  #prProcess .pw-head{font-size:clamp(22px,1.95vw,32px);}
}

@media (prefers-reduced-motion:reduce){
  #prProcess{height:auto;}
  #prProcess .pw-stage{position:static;height:auto;display:block;padding-top:80px;padding-bottom:80px;}
  #prProcess .pw-cols{display:block;}
  #prProcess .pw-col{opacity:1;transform:none;margin-bottom:70px;}
  #prProcess .pw-line{transform:none;}
  #prProcess .pw-tip{display:none;}
}

/* ============================================================
   THE DECISION LAYER PANEL
   ------------------------------------------------------------
   Four viewports over a one-viewport sticky stage. Two movements:
   the centred copy fades in a line at a time, then the question
   rows arrive one after another -- so the reader finishes reading
   before being asked to choose.
   ============================================================ */
/* Parked one wipe higher, so #prProcess's stage is covering it and the wipe
   uncovers it in place. -180 = the screen the stage occupies, plus the 80vh
   the wipe itself spans; at -100 the section would still be scrolling up
   while the stage moved, and would appear to rise in from a corner. */
#prDecide{
  position:relative;z-index:1;
  /* -240 = the screen the cover's stage occupies, plus the 140vh its wipe now
     spans. This number is not free: it has to equal the wipe budget or the
     section is still scrolling up while the cover slides, and it arrives from
     a corner instead of being uncovered in place. */
  margin-top:calc(var(--pvh, 1vh) * -240);
  height:calc(var(--pvh, 1vh) * 400);background:#39473e;
}
#prDecide .pd-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  display:flex;align-items:center;
  padding:0 var(--pr-gut, 22px);
  overflow:hidden;
}
#prDecide .pd-inner{position:relative;z-index:2;width:100%;max-width:1100px;margin:0 auto;}

#prDecide .pd-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(200px,26vw,420px);line-height:.8;font-weight:700;
  color:rgba(255,255,255,.035);
  pointer-events:none;user-select:none;z-index:1;
}

#prDecide .pd-kicker{
  display:block;width:max-content;margin:0 auto;
  font-size:clamp(11px,.85vw,13px);letter-spacing:2.4px;
  text-transform:uppercase;font-weight:700;color:var(--grid);
  padding-bottom:9px;border-bottom:1px solid var(--grid);
  text-align:center;
}
#prDecide .pd-head{
  margin-top:26px;text-align:center;
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(23px,2.7vw,40px);line-height:1.18;letter-spacing:-0.02em;
  color:#fff;font-weight:600;
}
#prDecide .pd-head b{font-weight:800;}
#prDecide .pd-lede{
  margin:20px auto 0;max-width:52ch;text-align:center;
  font-size:clamp(13px,1.05vw,16px);line-height:1.7;color:rgba(255,255,255,.52);
}

#prDecide .pd-label{
  margin-top:52px;
  font-size:clamp(10px,.78vw,12px);letter-spacing:1.8px;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.42);
}
#prDecide .pd-list{margin-top:18px;list-style:none;padding:0;display:grid;gap:12px;}
#prDecide .pd-q{
  padding:18px 22px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
  font-size:clamp(13px,1.05vw,16px);line-height:1.4;
  opacity:0;will-change:opacity,transform;
}
/* the one already chosen, as in the reference */
#prDecide .pd-q.is-on{
  border-color:rgba(199,164,93,.75);
  background:rgba(199,164,93,.09);
  color:#fff;
}

@media (prefers-reduced-motion:reduce){
  #prDecide{height:auto;}
  #prDecide .pd-stage{position:static;height:auto;display:block;padding-top:80px;padding-bottom:80px;}
  #prDecide .pd-q{opacity:1;transform:none;}
}

/* ============================================================
   THE COMPARISON
   ------------------------------------------------------------
   Normal flow, not pinned: the two cards together run well past a
   single screen, and a one-viewport stage would have had to shrink
   them to fit. They reveal on scroll instead, one block at a time,
   which is the same reading rhythm without the constraint.
   ============================================================ */
#prCompare{background:#39473e;padding:0 var(--pr-gut, 22px) clamp(70px,9vh,130px);}
#prCompare .pc-wrap{max-width:1180px;margin:0 auto;}

#prCompare .pc-label{
  margin:0 0 14px;
  font-size:clamp(10px,.78vw,12px);letter-spacing:1.8px;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.42);
}
#prCompare .pc-label + .pc-card{margin-bottom:44px;}

#prCompare .pc-card{
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(0,0,0,.22);
  overflow:hidden;
  opacity:0;will-change:opacity,transform;
}
#prCompare .pc-card.is-tojo{
  border-color:rgba(199,164,93,.55);
  background:linear-gradient(180deg, rgba(199,164,93,.10), rgba(0,0,0,.28));
}
#prCompare .pc-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.10);
  color:#fff;font-size:clamp(13px,1.05vw,16px);font-weight:700;
}
#prCompare .pc-av{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.75);
  font-size:11px;font-weight:700;
}
#prCompare .is-tojo .pc-av{background:var(--grid);color:#20301f;}
#prCompare .pc-live{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.75);font-weight:700;
}
#prCompare .pc-live i{width:6px;height:6px;border-radius:50%;background:#63d089;}

#prCompare .pc-body{padding:22px;}
#prCompare .pc-ask{
  margin:0;padding:14px 18px;border-radius:10px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.62);
  font-size:clamp(12.5px,1vw,15px);line-height:1.5;
}
#prCompare .pc-say{
  margin:20px 0 0;
  color:rgba(255,255,255,.92);
  font-size:clamp(13px,1.12vw,17px);line-height:1.6;
}
#prCompare .is-tojo .pc-say{color:#fff;}
#prCompare .pc-tag{
  margin:14px 0 0;
  font-size:clamp(9.5px,.74vw,11.5px);letter-spacing:1.6px;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.34);
}
#prCompare .pc-tag.is-gold{color:var(--grid);}
#prCompare .pc-foot{
  padding:18px 22px;border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.34);
  font-size:clamp(12px,.95vw,14.5px);
}

#prCompare .pc-reply{display:flex;gap:14px;align-items:center;padding:18px 22px 22px;}
#prCompare .pc-input{
  flex:1 1 auto;min-width:0;
  padding:15px 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.55);
  font:inherit;font-size:clamp(12.5px,1vw,15px);
  outline:none;
}
#prCompare .pc-input::placeholder{color:rgba(255,255,255,.38);}
#prCompare .pc-input:focus-visible{
  border-color:rgba(199,164,93,.7);
  box-shadow:0 0 0 3px rgba(199,164,93,.18);
}
#prCompare .pc-send{
  flex:0 0 auto;padding:15px 26px;border-radius:999px;border:0;
  background:var(--grid);color:#20301f;cursor:pointer;
  font:inherit;font-size:clamp(12.5px,1vw,15px);font-weight:700;
}
#prCompare .pc-send:hover{filter:brightness(1.06);}
#prCompare .pc-send:focus-visible{outline:2px solid #fff;outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  #prCompare .pc-card{opacity:1;transform:none;}
}


/* the answer, and the live indicator
   ------------------------------------------------------------ */
/* A real label kept for screen readers only -- a placeholder is not a
   label: it disappears the moment anyone types. */
#prCompare .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

#prCompare .pc-answer{padding:0 22px 24px;}
#prCompare .pc-answer[hidden]{display:none;}
#prCompare .pc-echo{
  margin:0 0 16px;padding:14px 18px;border-radius:10px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.62);
  font-size:clamp(12.5px,1vw,15px);line-height:1.5;
}
#prCompare .pc-echo:empty{display:none;}
#prCompare .pc-note{
  margin:0 0 16px;color:rgba(255,255,255,.68);
  font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.65;
}
#prCompare .pc-cta{
  display:block;width:100%;text-align:center;
  padding:17px 24px;border-radius:999px;
  background:var(--grid);color:#20301f;
  font-size:clamp(13px,1.05vw,16px);font-weight:700;text-decoration:none;
}
#prCompare .pc-cta:hover{filter:brightness(1.06);}

/* the LIVE dot: glowing and dimming, so the badge reads as a state
   rather than as a label */
#prCompare .pc-dot{
  width:7px;height:7px;border-radius:50%;background:#63d089;
  animation:pcPulse 1.9s ease-in-out infinite;
}
@keyframes pcPulse{
  0%,100%{opacity:.45;box-shadow:0 0 0 0 rgba(99,208,137,.0);}
  50%    {opacity:1;  box-shadow:0 0 0 5px rgba(99,208,137,.16);}
}
@media (prefers-reduced-motion:reduce){
  #prCompare .pc-dot{animation:none;opacity:1;}
}

/* ============================================================
   INSIDE TOJO'S WORKSPACE
   ------------------------------------------------------------
   Normal flow, revealed on scroll. The card is cream on the dark
   ground, which is the whole point of the image: it reads as a
   window onto the product rather than as more page.
   ============================================================ */
#prWorkspace{
  background:#39473e;                 /* the same green as the sections either side */
  padding:clamp(60px,8vh,110px) var(--pr-gut, 22px) clamp(70px,9vh,130px);
}
#prWorkspace .ws-wrap{max-width:1180px;margin:0 auto;}
#prWorkspace .ws-label{
  margin:0 0 16px;
  font-size:clamp(10px,.78vw,12px);letter-spacing:1.9px;
  text-transform:uppercase;font-weight:700;color:rgba(245,241,230,.42);
  opacity:0;will-change:opacity,transform;
}
#prWorkspace .ws-card{
  border-radius:18px;background:var(--cream, #f7f5ee);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.28);
  opacity:0;will-change:opacity,transform;
}

/* the browser chrome */
#prWorkspace .ws-bar-top{
  display:flex;align-items:center;gap:8px;
  padding:18px 24px;
}
#prWorkspace .ws-tl{width:9px;height:9px;border-radius:50%;background:rgba(22,19,14,.16);}
#prWorkspace .ws-url{
  margin-left:14px;
  font-size:clamp(12px,.95vw,14.5px);color:rgba(22,19,14,.48);
}

#prWorkspace .ws-body{padding:0 24px 26px;}
#prWorkspace .ws-h{
  margin:22px 0 14px;
  font-size:clamp(10px,.76vw,11.5px);letter-spacing:1.7px;
  text-transform:uppercase;font-weight:700;color:rgba(22,19,14,.42);
}
#prWorkspace .ws-h:first-child{margin-top:0;}

#prWorkspace .ws-folders{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
#prWorkspace .ws-folder{
  display:flex;align-items:center;gap:12px;
  font-size:clamp(13px,1.08vw,16.5px);color:var(--ink);
  opacity:0;will-change:opacity,transform;
}
#prWorkspace .ws-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
#prWorkspace .ws-dot.f1{background:#b9762c;}
#prWorkspace .ws-dot.f2{background:#4cbfae;}
#prWorkspace .ws-dot.f3{background:#8b9aa3;}
#prWorkspace .ws-dot.f4{background:#7d9b6a;}

#prWorkspace .ws-cap{
  margin:0 0 12px;
  font-size:clamp(12px,.95vw,14.5px);color:rgba(22,19,14,.34);
  opacity:0;will-change:opacity,transform;
}

/* the chart: bars grow from the baseline, one after another */
#prWorkspace .ws-chart{
  display:flex;align-items:flex-end;gap:clamp(8px,1.2vw,18px);
  height:clamp(96px,13vh,150px);margin-bottom:6px;
}
#prWorkspace .ws-bar{
  flex:1 1 0;min-width:0;border-radius:5px;
  height:var(--h, 60%);
  transform:scaleY(var(--g, 0));transform-origin:50% 100%;
  will-change:transform;
}
/* pastel shades, with the one being read in the brand bronze */
#prWorkspace .ws-bar.b1{background:#eee7d8;}
#prWorkspace .ws-bar.b2{background:#e7e3d4;}
#prWorkspace .ws-bar.b3{background:#e4e6dd;}
#prWorkspace .ws-bar.b4{background:#dfe4e2;}
#prWorkspace .ws-bar.b5{background:#ece5da;}
#prWorkspace .ws-bar.b6{background:#e9e6d9;}
#prWorkspace .ws-bar.is-on{background:#a9793f;}

#prWorkspace .ws-msg{
  margin:0 0 10px;padding:15px 18px;border-radius:10px;
  background:rgba(22,19,14,.055);color:var(--ink);
  font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.45;
  opacity:0;will-change:opacity,transform;
}
#prWorkspace .ws-msg.is-reply{font-weight:600;background:rgba(22,19,14,.075);}

#prWorkspace .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  #prWorkspace .ws-label,#prWorkspace .ws-card,#prWorkspace .ws-folder,
  #prWorkspace .ws-cap,#prWorkspace .ws-msg{opacity:1;transform:none;}
  #prWorkspace .ws-bar{transform:none;}
}

/* ============================================================
   ONE AGENT, THREE PERSONAS
   ------------------------------------------------------------
   Cards hinge along their top edge and tip open as they arrive.

   The perspective lives on the LIST, not on each card: one shared
   vanishing point means the three fold as parts of the same object.
   Per-card perspective gives each its own centre, and they read as
   three unrelated flaps.
   ============================================================ */
/* Pinned, like the other covers: it needs a stage that can slide off to
   uncover .03 underneath. */
#prPersonas{position:relative;z-index:2;height:calc(var(--pvh, 1vh) * 500);}
#prPersonas .pn-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  display:flex;align-items:center;
  background:#39473e;
  padding:0 var(--pr-gut, 22px);
  overflow:hidden;
  transform:translate3d(var(--pn-slide, 0px),0,0);will-change:transform;
}
#prPersonas .pn-wrap{width:100%;max-width:1180px;margin:0 auto;}

#prPersonas .pn-kicker{
  margin:0 0 18px;
  font-size:clamp(11px,.85vw,13px);letter-spacing:2.2px;
  text-transform:uppercase;font-weight:700;color:var(--grid);
  opacity:0;will-change:opacity,transform;
}
#prPersonas .pn-head{
  margin:0 0 40px;
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(23px,2.9vw,42px);line-height:1.18;letter-spacing:-0.02em;
  color:#fff;font-weight:500;
  opacity:0;will-change:opacity,transform;
}
#prPersonas .pn-head b{font-weight:800;}

#prPersonas .pn-list{
  display:grid;gap:1px;               /* a hairline, so the three fold as one block */
  perspective:1400px;                 /* one shared vanishing point */
  perspective-origin:50% 0%;
}
#prPersonas .pn-card{
  background:#fbfaf7;
  padding:clamp(24px,2.6vw,38px) clamp(24px,2.8vw,42px);
  /* hinged along the top edge: the bottom is what swings away */
  transform-origin:50% 0%;
  transform:rotateX(var(--fold, 0deg));
  opacity:var(--o, 1);
  backface-visibility:hidden;
  will-change:transform,opacity;
  /* Only the OUTER corners are rounded: at a 1px gap, three separately
     rounded cards leave six little notches down the seams. Rounding the
     group instead is what makes it read as one panel folding open. */
  border-radius:0;
}
#prPersonas .pn-card:first-child{border-radius:16px 16px 0 0;}
#prPersonas .pn-card:last-child{border-radius:0 0 16px 16px;}
/* The shadow belongs to the group, not to each card -- three overlapping
   shadows at a 1px gap darken every seam into a grey band. A wrapper takes
   it so the cards themselves stay free to rotate. */
#prPersonas .pn-list{
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.18));
}
#prPersonas .pn-name{
  margin:0 0 12px;
  font-size:clamp(16px,1.5vw,23px);line-height:1.2;
  font-weight:700;color:#141414;
}
#prPersonas .pn-say{
  margin:0;max-width:62ch;
  font-size:clamp(13px,1.08vw,16.5px);line-height:1.6;color:rgba(22,19,14,.58);
}

@media (min-width:981px){
  #prPersonas .pn-list{gap:1px;}
}

@media (prefers-reduced-motion:reduce){
  #prPersonas .pn-kicker,#prPersonas .pn-head{opacity:1;transform:none;}
  #prPersonas .pn-card{transform:none;opacity:1;}
  #prPersonas .pn-list{perspective:none;}
}


/* ============================================================
   .03 — STRATEGY LAYER
   ------------------------------------------------------------
   Parked one wipe higher than it would otherwise sit, so the
   personas stage covers it and the wipe uncovers it in place.
   ============================================================ */
#prStrategy{
  position:relative;z-index:1;
  /* -240: one screen for the cover's stage, plus its 140vh wipe. Must match
     the wipe budget above it. */
  margin-top:calc(var(--pvh, 1vh) * -240);
  height:calc(var(--pvh, 1vh) * 400);
  background:#ece9e1;
}
#prStrategy .st-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  display:flex;align-items:center;
  padding:0 var(--pr-gut, 22px);
  overflow:hidden;
}
#prStrategy .st-inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;}

#prStrategy .st-mark{
  position:absolute;left:-.06em;top:50%;transform:translateY(calc(-64% - 110px));
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(150px,21vw,330px);line-height:.78;font-weight:800;
  color:rgba(22,19,14,.055);
  pointer-events:none;user-select:none;z-index:1;
}

/* the head block sits right, against the watermark on the left */
#prStrategy .st-top{margin-left:auto;max-width:64ch;text-align:right;}
#prStrategy .st-kicker{
  display:inline-block;margin:0;
  font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.2px;
  text-transform:uppercase;font-weight:700;color:var(--grid);
  padding-bottom:9px;border-bottom:1px solid var(--grid);
  opacity:0;will-change:opacity,transform;
}
#prStrategy .st-head{
  margin:22px 0 0;
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(22px,2.6vw,38px);line-height:1.18;letter-spacing:-0.02em;
  color:var(--ink);font-weight:500;
  opacity:0;will-change:opacity,transform;
}
#prStrategy .st-head b{font-weight:800;}
#prStrategy .st-lede{
  margin:18px 0 0 auto;max-width:44ch;
  font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.7;color:rgba(22,19,14,.52);
  opacity:0;will-change:opacity,transform;
}

#prStrategy .st-list{
  margin-top:clamp(28px,4vh,54px);display:grid;gap:1px;   /* a hairline, so the three fold as one block */
  /* Perspective on the LIST, not on each card: one shared vanishing point
     makes the three read as parts of the same object opening. Per-card
     perspective gives each its own centre and they look unrelated. */
  perspective:1400px;perspective-origin:50% 0%;
}
#prStrategy .st-card{
  background:#fbfaf7;
  /* Only the OUTER corners are rounded. At a 1px gap, three separately
     rounded cards leave six little notches down the seams; rounding the
     group instead is what makes it read as one panel opening. */
  border-radius:0;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  /* hinged along the top edge: the bottom is what swings away */
  transform-origin:50% 0%;
  transform:rotateX(var(--fold, 0deg));
  opacity:var(--o, 0);
  backface-visibility:hidden;
  will-change:transform,opacity;
}
#prStrategy .st-card:first-child{border-radius:14px 14px 0 0;}
#prStrategy .st-card:last-child{border-radius:0 0 14px 14px;}
#prStrategy .st-step{
  margin:0 0 10px;
  font-size:clamp(9.5px,.74vw,11.5px);letter-spacing:1.7px;
  text-transform:uppercase;font-weight:700;color:var(--grid);
}
#prStrategy .st-name{
  margin:0 0 8px;
  font-size:clamp(15px,1.35vw,21px);line-height:1.2;font-weight:700;color:#141414;
}
#prStrategy .st-say{
  margin:0;font-size:clamp(12px,1vw,15px);line-height:1.55;color:rgba(22,19,14,.55);
}

@media (prefers-reduced-motion:reduce){
  #prStrategy{margin-top:0;height:auto;}
  #prStrategy .st-stage{position:static;height:auto;display:block;padding-top:70px;padding-bottom:70px;}
  #prStrategy .st-kicker,#prStrategy .st-head,#prStrategy .st-lede{opacity:1;transform:none;}
  #prStrategy .st-card{opacity:1;transform:none;}
  #prStrategy .st-list{perspective:none;}
  #prDecide{margin-top:0;}
  #prPersonas{height:auto;}
  #prPersonas .pn-stage{position:static;height:auto;display:block;padding:70px var(--pr-gut,22px);transform:none;}
  #prProcess .pw-stage{transform:none;}
}

/* ============================================================
   THE SAMPLE SIMULATION
   ------------------------------------------------------------
   The card, lever, output and chart rules were translated in the
   original build and are already above. These only place the
   section and give its blocks something to arrive from.
   ============================================================ */
#prSim{
  background:#ece9e1;
  padding:clamp(60px,8vh,110px) var(--pr-gut, 22px) clamp(70px,9vh,130px);
}
#prSim .sim-head-block{max-width:1180px;margin:0 auto clamp(26px,4vh,48px);}
#prSim .sim-kicker{
  margin:0 0 14px;
  font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.2px;
  text-transform:uppercase;font-weight:700;color:var(--grid);
  opacity:0;will-change:opacity,transform;
}
#prSim .sim-h2{
  margin:0;
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(22px,2.6vw,38px);line-height:1.18;letter-spacing:-0.02em;
  color:var(--ink);font-weight:500;
  opacity:0;will-change:opacity,transform;
}
#prSim .sim-h2 b{font-weight:800;}
/* The source gave .sim-wrap its own 22px gutter, and the desktop block adds
   --pr-gut to it as well -- so the cards sat inset from the heading above
   them by the width of a second gutter. The section already supplies the
   gutter; this only needs the same measure as the head block. */
#prSim .sim-wrap{max-width:1180px;margin:0 auto;background:none;padding:0 0 8px;}
#prSim .sim-rise{opacity:0;will-change:opacity,transform;}

/* The range inputs need a visible track fill: the driver writes --pct on
   each one, and without a rule that reads it the sliders move but nothing
   about them changes. */
#prSim input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;border-radius:2px;margin-top:12px;
  background:linear-gradient(90deg,
    var(--grid) 0, var(--grid) calc(var(--pct,50%) * var(--k,1)),
    rgba(22,19,14,.14) calc(var(--pct,50%) * var(--k,1)), rgba(22,19,14,.14) 100%);
  cursor:pointer;
}
#prSim input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--grid);border:2px solid #fbfaf7;
  box-shadow:0 1px 4px rgba(22,19,14,.28);cursor:grab;
}
#prSim input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:2px solid #fbfaf7;
  background:var(--grid);box-shadow:0 1px 4px rgba(22,19,14,.28);cursor:grab;
}
#prSim input[type=range]:focus-visible{outline:2px solid var(--grid);outline-offset:4px;}

@media (prefers-reduced-motion:reduce){
  #prSim .sim-kicker,#prSim .sim-h2,#prSim .sim-rise{opacity:1;transform:none;}
}


/* ============================================================
   THE POINT OF ALL THIS
   ------------------------------------------------------------
   Pinned, with a sheet the colour of the section above covering it.
   The sheet slides off on scroll and this is uncovered in place --
   the same reveal as .02 and .03, self-contained because #prSim has
   no stage of its own to move.
   ============================================================ */
#prPoint{position:relative;height:calc(var(--pvh, 1vh) * 500);}
#prPoint .pt-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  display:flex;align-items:center;justify-content:center;
  background:#14251b;overflow:hidden;
  padding:0 var(--pr-gut, 22px);
}
#prPoint .pt-inner{position:relative;z-index:2;max-width:900px;text-align:center;}
#prPoint .pt-cap{
  margin:0 0 22px;
  font-size:clamp(10px,.8vw,12px);letter-spacing:2.4px;
  text-transform:uppercase;font-weight:700;color:#d8b978;
  opacity:0;will-change:opacity,transform;
}
#prPoint .pt-statement{
  margin:0;
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(26px,3.4vw,52px);line-height:1.22;letter-spacing:-0.02em;
  font-weight:700;color:var(--cream);
  opacity:0;will-change:opacity,transform;
}
#prPoint .pt-sub{
  margin:22px auto 0;max-width:52ch;
  font-size:clamp(12.5px,1.02vw,16px);line-height:1.65;color:rgba(245,241,230,.5);
  opacity:0;will-change:opacity,transform;
}
#prPoint .pt-wm{
  position:absolute;bottom:-.18em;left:50%;transform:translateX(-50%);
  /* Bebas is condensed and all-caps, so it sets far wider per character and
     sits differently in its em box than the display sans did -- hence the
     changed size and baseline offset alongside the family. */
  font-family:'Bebas Neue',var(--font-display),sans-serif;
  font-size:clamp(130px,20vw,320px);line-height:.84;font-weight:400;letter-spacing:6px;
  color:rgba(245,241,230,.05);white-space:nowrap;
  pointer-events:none;user-select:none;z-index:1;
}
/* the cover: the colour of #prSim, so it reads as that section drawn aside */
#prPoint .pt-sheet{
  position:absolute;inset:0;z-index:3;
  background:#ece9e1;
  transform:translate3d(var(--pt-slide, 0px),0,0);will-change:transform;
}

@media (prefers-reduced-motion:reduce){
  #prPoint{height:auto;}
  #prPoint .pt-stage{position:static;height:auto;display:block;padding-top:80px;padding-bottom:80px;}
  #prPoint .pt-cap,#prPoint .pt-statement,#prPoint .pt-sub{opacity:1;transform:none;}
  #prPoint .pt-sheet{display:none;}
}


/* ============================================================
   WHY THIS ISN'T JUST A FANCIER SPREADSHEET
   ------------------------------------------------------------
   The row, icon and label rules were translated in the original
   build and are above. These only place the section and give each
   row something to arrive from.
   ============================================================ */
#prCheck{background:#18251c;padding:clamp(50px,7vh,96px) var(--pr-gut, 22px) clamp(60px,8vh,110px);}
#prCheck .check-wrap{max-width:1180px;margin:0 auto;background:none;padding:0;}
#prCheck .check-wrap > div:first-child{padding-top:0 !important;}
#prCheck .check-intro-lbl{font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.2px;}
#prCheck .check-wrap h3{
  font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(20px,2.3vw,34px);line-height:1.22;letter-spacing:-0.015em;
  font-weight:500;margin-bottom:clamp(16px,2.4vh,34px);
}
#prCheck .check-wrap h3 b{font-weight:800;}
#prCheck .check-intro-lbl,#prCheck .check-wrap h3{opacity:0;will-change:opacity,transform;}
#prCheck .ck-rise{opacity:0;will-change:opacity,transform;}
#prCheck .check-body .ck-label{font-size:clamp(13px,1.15vw,17px);}
#prCheck .check-body .ck-excel,#prCheck .check-body .ck-virevo{font-size:clamp(11.5px,.95vw,14.5px);line-height:1.5;}
#prCheck .check-row{padding:clamp(16px,2vh,24px) 0;}

@media (min-width:981px){
  /* label | excel | virevo, so the two answers can be compared across rather
     than read one under the other */
  #prCheck .check-body{display:grid;grid-template-columns:1fr 1.2fr 1.4fr;gap:26px;align-items:baseline;width:100%;}
  #prCheck .check-body .ck-label{margin-bottom:0;}
  #prCheck .check-body .ck-excel{margin-bottom:0;}
}

@media (prefers-reduced-motion:reduce){
  #prCheck .check-intro-lbl,#prCheck .check-wrap h3,#prCheck .ck-rise{opacity:1;transform:none;}
}

/* ============================================================
   THE COMPARISON — fuller measure
   ------------------------------------------------------------
   It was sitting in the same 1180px column as the card sections
   above, which left it looking like a narrow table on a wide
   screen. A comparison wants the width: the rows are three columns
   of text, and cramping them is what forced the wrapping.
   ============================================================ */
#prCheck{padding:clamp(64px,10vh,130px) var(--pr-gut, 22px) clamp(72px,11vh,150px);}
#prCheck .check-wrap{max-width:1520px;}
#prCheck .check-wrap h3{max-width:26ch;}
@media (min-width:981px){
  #prCheck .check-body{grid-template-columns:1fr 1.25fr 1.5fr;gap:clamp(28px,3.4vw,64px);}
  #prCheck .check-row{gap:22px;padding:clamp(20px,2.6vh,32px) 0;}
  #prCheck .check-ico{width:30px;height:30px;font-size:13px;}
}

/* ============================================================
   PROVEN IN THE MODEL
   ============================================================ */
#prTicker{background:#18251c;}
#prTicker .ticker{padding:clamp(50px,7vh,96px) 0;}
#prTicker .ticker.dark1{background:none;}     /* the section carries it now */
#prTicker .ticker-kicker{font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.2px;}
#prTicker .ticker-title{
  font-size:clamp(19px,2.2vw,32px);line-height:1.34;font-weight:600;
  max-width:26ch;margin-left:auto;margin-right:auto;
  padding:0 var(--pr-gut, 22px);
}
#prTicker .ticker-kicker,#prTicker .ticker-title{opacity:0;will-change:opacity,transform;}

/* ============================================================
   .04 — EXECUTION LAYER
   ============================================================ */
#prExec{position:relative;height:calc(var(--pvh, 1vh) * 500);}
#prExec .ex-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  display:flex;align-items:center;justify-content:center;
  background:#39473e;overflow:hidden;
  padding:0 var(--pr-gut, 22px);
}
#prExec .ex-inner{position:relative;z-index:2;max-width:60ch;text-align:center;}
#prExec .ex-mark{
  position:absolute;top:50%;right:-.04em;transform:translateY(-62%);
  font-family:'Bebas Neue',var(--font-display),sans-serif;
  font-size:clamp(150px,23vw,360px);line-height:.82;font-weight:400;letter-spacing:4px;
  color:rgba(245,241,230,.05);
  pointer-events:none;user-select:none;z-index:1;
}
#prExec .ex-kicker{
  margin:0 0 22px;font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.4px;
  text-transform:uppercase;font-weight:700;color:#d8b978;
  opacity:0;will-change:opacity,transform;
}
#prExec .ex-statement{
  margin:0;font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(24px,3.1vw,46px);line-height:1.22;letter-spacing:-0.02em;
  font-weight:700;color:var(--cream);
  opacity:0;will-change:opacity,transform;
}
#prExec .ex-sub{
  margin:22px auto 0;max-width:52ch;
  font-size:clamp(12.5px,1.02vw,16px);line-height:1.65;color:rgba(245,241,230,.5);
  opacity:0;will-change:opacity,transform;
}
#prExec .ex-sheet{
  position:absolute;inset:0;z-index:3;background:var(--cream, #f7f5ee);
  transform:translate3d(var(--ex-slide, 0px),0,0);will-change:transform;
}

/* ============================================================
   THE FOUR PROOF POINTS — same track as .01
   ============================================================ */
#prExecRail{position:relative;height:calc(var(--pvh, 1vh) * 500);background:#39473e;}
#prExecRail .ex-rail-stage{
  position:sticky;top:0;height:calc(var(--pvh, 1vh) * 100);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pr-gut, 22px);overflow:hidden;
}
#prExecRail .ex-cols{display:grid;}
#prExecRail .ex-col{grid-area:1/1;opacity:0;will-change:opacity,transform;}
#prExecRail .ex-col > *{will-change:opacity,transform;}
#prExecRail .ex-step{
  font-size:clamp(10px,.78vw,12px);letter-spacing:1.9px;
  text-transform:uppercase;font-weight:700;color:#d8b978;
}
#prExecRail .ex-head{
  margin-top:22px;font-family:var(--font-display),'Poppins',sans-serif;
  font-size:clamp(22px,2.5vw,36px);line-height:1.14;letter-spacing:-0.02em;
  font-weight:800;color:var(--cream);
}
#prExecRail .ex-body{
  margin-top:20px;max-width:34ch;
  font-size:clamp(12.5px,1vw,15.5px);line-height:1.62;color:rgba(245,241,230,.55);
}
#prExecRail .ex-rule{position:relative;height:1px;margin-top:clamp(30px,5vh,64px);flex:0 0 auto;}
#prExecRail .ex-line{
  position:absolute;inset:0;background:rgba(245,241,230,.22);
  transform:scaleX(var(--ex-tip, 0));transform-origin:left center;
}
#prExecRail .ex-p,#prExecRail .ex-tip{
  position:absolute;top:50%;font-size:16.5px;line-height:1;font-weight:300;
  color:rgba(245,241,230,.5);transform:translate(-50%,-50%);
}
#prExecRail .ex-tip{color:var(--cream);}

@media (min-width:981px){
  #prExecRail .ex-cols{grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,52px);align-items:start;}
  #prExecRail .ex-col{grid-area:auto;}
  #prExecRail .ex-head{font-size:clamp(19px,1.7vw,28px);}
  #prExecRail .ex-body{font-size:clamp(12px,.9vw,14.5px);}
}

@media (prefers-reduced-motion:reduce){
  #prTicker .ticker-kicker,#prTicker .ticker-title{opacity:1;transform:none;}
  #prExec{height:auto;}
  #prExec .ex-stage{position:static;height:auto;display:block;padding-top:80px;padding-bottom:80px;}
  #prExec .ex-kicker,#prExec .ex-statement,#prExec .ex-sub{opacity:1;transform:none;}
  #prExec .ex-sheet{display:none;}
  #prExecRail{height:auto;}
  #prExecRail .ex-rail-stage{position:static;height:auto;display:block;padding:70px var(--pr-gut,22px);}
  #prExecRail .ex-cols{display:block;}
  #prExecRail .ex-col{opacity:1;transform:none;margin-bottom:60px;}
  #prExecRail .ex-line{transform:none;}
  #prExecRail .ex-tip{display:none;}
}


/* ============================================================
   THE COMPARISON, ON THE DARK GROUND
   ------------------------------------------------------------
   The .check- rules were written for cream: dark ink text, a pale
   grey icon chip, and hairlines at 8% of the ink colour. Every one
   of those is invisible or near-invisible on #18251c, so the ground
   cannot change on its own -- the whole set has to inverColour.
   ============================================================ */
#prCheck .check-wrap h3{color:var(--cream, #f6f2e9);}
#prCheck .check-wrap h3 b{color:#fff;}
#prCheck .check-body .ck-label{color:var(--cream, #f6f2e9);}
#prCheck .check-body .ck-excel{color:rgba(245,241,230,.55);}   /* .42 measured 3.6:1 -- body text wants 4.5 */
#prCheck .check-body .ck-excel b{color:rgba(245,241,230,.62);}
#prCheck .check-body .ck-virevo{color:#d8b978;}
#prCheck .check-body .ck-virevo b{color:#fff;}
#prCheck .check-row{border-top-color:rgba(245,241,230,.12);}
#prCheck .check-row:last-child{border-bottom-color:rgba(245,241,230,.12);}
#prCheck .check-ico.no{background:rgba(245,241,230,.10);color:rgba(245,241,230,.5);}
#prCheck .check-ico.yes{background:#d8b978;color:#18251c;}
#prCheck .check-intro-lbl{color:#d8b978;}

/* The .04 sheet imitates whatever sits directly above #prExec, and that is
   now the ticker -- so it follows it to the same dark green. A cream sheet
   would read as a stray white panel sliding across. */
#prExec .ex-sheet{background:#18251c;}

/* ============================================================
   INSIDE A LIVE DAY  /  WHERE VIREVO RUNS TODAY
   ------------------------------------------------------------
   The taskboard and ticker rules were translated in the original
   build. These only place the two sections and give their parts
   something to arrive from.
   ============================================================ */
/* top padding down 20% (50/7/96 -> 40/5.6/77): it is the only thing between
   the pinned rail above and this section, so it IS the gap. */
#prDay{background:#39473e;padding:clamp(26px,3.6vh,50px) var(--pr-gut, 22px) clamp(46px,6vh,84px);}
#prDay .tb-wrap{max-width:none;margin:0;padding:0;background:none;}
#prDay .wlabel-main{
  font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.2px;
  color:rgba(245,241,230,.5);margin-top:0 !important;
  opacity:0;will-change:opacity,transform;
}
#prDay .tb-card{opacity:0;will-change:opacity,transform;}
#prDay .tb-rise{opacity:0;will-change:opacity,transform;}

#prWhere .ticker{padding:clamp(50px,7vh,96px) 0;}
#prWhere .ticker-kicker{font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.2px;}
#prWhere .ticker-title{
  font-size:clamp(19px,2.2vw,32px);line-height:1.34;
  max-width:26ch;margin-left:auto;margin-right:auto;padding:0 var(--pr-gut,22px);
}
#prWhere .ticker-kicker,#prWhere .ticker-title{opacity:0;will-change:opacity,transform;}

@media (prefers-reduced-motion:reduce){
  #prDay .wlabel-main,#prDay .tb-card,#prDay .tb-rise,
  #prWhere .ticker-kicker,#prWhere .ticker-title{opacity:1;transform:none;}
}


/* ============================================================
   WHERE VIREVO RUNS TODAY, INSIDE THE LIVE-DAY SECTION
   ------------------------------------------------------------
   It sits on its own ground no longer -- the parent section
   carries the green, so the ticker's own background is cleared.
   Left as it was it would paint the source's ink colour over the
   green and reinstate the seam this move was meant to remove.
   ============================================================ */
#prDay #prWhere{margin-top:clamp(34px,5vh,72px);}
#prDay #prWhere .ticker{background:none;padding:0;}
#prDay #prWhere .ticker.dark2{background:none;}

/* the scroller, centred */
#prDay #prWhere .ticker-kicker,
#prDay #prWhere .ticker-title{
  text-align:center;margin-left:auto;margin-right:auto;
  opacity:0;will-change:opacity,transform;
}
#prDay #prWhere .ticker-kicker{font-size:clamp(10px,.8vw,12.5px);letter-spacing:2.2px;}
#prDay #prWhere .ticker-title{
  /* no max-width: it is meant to run the measure of the section rather than
     wrap into a narrow column */
  font-size:clamp(19px,2.6vw,40px);line-height:1.24;letter-spacing:-0.015em;
  max-width:none;padding:0;
  margin-bottom:clamp(20px,3vh,34px);
}
#prDay #prWhere .ticker-lane{
  max-width:none;margin:0;
  border-top-color:rgba(245,241,230,.14);
  border-bottom:1px solid rgba(245,241,230,.14);
  /* Fades at both ends so the loop point is never a hard edge. The track is
     wider than the lane by design, so without this the ticks simply get
     guillotined at the boundary. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
#prDay #prWhere .tick{color:rgba(245,241,230,.62);}
#prDay #prWhere .tick.live{color:#d8b978;}

@media (prefers-reduced-motion:reduce){
  #prDay #prWhere .ticker-kicker,#prDay #prWhere .ticker-title{opacity:1;transform:none;}
  #prDay #prWhere .ticker-track{animation:none;}
}


/* the roadmap, now on the section's own ground */
#prDay .roadmap{
  max-width:none;margin:clamp(30px,4.5vh,60px) 0 0;
  padding:0;background:none;
}
#prDay .rm-row{margin-bottom:clamp(16px,2.4vh,26px);opacity:0;will-change:opacity,transform;}
#prDay .rm-row:last-child{margin-bottom:0;}
#prDay .rm-row .rl{font-size:clamp(10px,.8vw,12.5px);letter-spacing:2px;margin-bottom:12px;}
#prDay .rm-chip{font-size:clamp(11.5px,.95vw,14px);padding:9px 16px;}

@media (prefers-reduced-motion:reduce){ #prDay .rm-row{opacity:1;transform:none;} }

/* ============================================================
   THE PRICING RUN
   ------------------------------------------------------------
   It RISES over the section above rather than wiping sideways.
   The negative margin parks it one screen low, overlapping the
   live-day section; the driver slides it up into place.

   This works where the fixed sheet did not, and the reason is
   worth keeping: nothing here is pinned to the viewport waiting
   for JS to move it. The section is in normal flow, so if the
   driver never runs it simply sits where it belongs instead of
   covering the page.
   ============================================================ */
#prPricing{
  position:relative;z-index:5;
  /* NO negative margin. It was pulling this section one screen up, directly
     over the live-day section above -- and that section is only about one
     screen tall, so the riser covered all of it from the moment it was in
     view. No amount of retiming fixes that; the overlap was structural. With
     margin 0 the section sits where it belongs and the transform alone lifts
     it into place from below. */
  background:var(--cream, #f7f5ee);
  /* The fallback is 100vh, NOT 0. Until the driver first runs the variable is
     unset, and a 0 fallback puts the section in its FINISHED position -- so
     the first frame the driver touches it, it snaps a whole screen downward
     to start the rise. Defaulting to the un-risen position means the very
     first paint is already correct and the driver only ever moves it up. */
}
/* The transform is applied ONLY while the rise is running. A transform makes
   its element a containing block, which disables position:sticky for every
   descendant -- so leaving it on permanently meant the carousels further
   down could never pin to the viewport and simply scrolled past, which is
   exactly the fault in the recording. Once the rise finishes the transform
   is 0 anyway, so dropping it changes nothing visually and hands the sticky
   rails their viewport back. */
#prPricing.pz-moving{
  transform:translate3d(0,var(--pz-up, 100vh),0);will-change:transform;
}
#prPricing .pz-rise{opacity:0;will-change:opacity,transform;}

@media (prefers-reduced-motion:reduce){
  #prPricing{margin-top:0;transform:none;}
  #prPricing .pz-rise{opacity:1;transform:none;}
}


/* ------------------------------------------------------------
   BUTTON HOVER
   style.css sets `.btn:hover{color:var(--cream)}` at (0,2,0), and
   `.pr-page .btn-ghost{color:var(--ink)}` is also (0,2,0) but loads
   later -- so the resting colour won the tie and the label stayed
   ink on an ink fill. These are (0,3,0), which settles it.
   ------------------------------------------------------------ */
.pr-page .btn-ghost:hover,
.pr-page .btn-ghost:focus-visible{color:var(--cream);}
.pr-page .btn-primary:hover,
.pr-page .btn-primary:focus-visible{color:var(--cream);}


/* ============================================================
   THE SECTION WATERMARKS
   ------------------------------------------------------------
   One size and one family for all five, held in a single token so
   they cannot drift apart again -- they were at 30vw, 26vw, 21vw,
   23vw and a fixed 230px, which is why they never read as a set.

   The new value is the average of those, plus 10%.

   Bebas for all of them, not just 04 and 05. Setting one size
   across two different families would not have produced one size
   on screen: Bebas is condensed and sets far narrower and taller
   per character than the display sans, so the same font-size
   renders visibly smaller. Matching the size means matching the
   face.
   ============================================================ */
.pr-page{
  --wm-size:clamp(187px, 27.5vw, 432px);
  --wm-family:'Bebas Neue', var(--font-display), sans-serif;
}
#prLayers .pl-mark,
#prDecide .pd-mark,
#prStrategy .st-mark,
#prExec .ex-mark,
#prPricing .pi-ghost{
  font-family:var(--wm-family);
  font-size:var(--wm-size);
  font-weight:400;              /* Bebas ships one weight; 800 would synthesise */
  line-height:.82;
  letter-spacing:4px;           /* it is tightly spaced by default */
}

/* 05 to the top right, and out of the flow of the centred column */
#prPricing .pi-ghost{
  position:absolute;
  top:clamp(-10px,-1vw,0px);
  right:clamp(6px,1.5vw,34px);
  left:auto;bottom:auto;
  transform:none;
  color:rgba(22,19,14,.05);
  z-index:0;pointer-events:none;user-select:none;
}
#prPricing .pi-wrap{position:relative;overflow:hidden;}

/* ============================================================
   MOBILE: SHORTER PINNED SECTIONS
   ------------------------------------------------------------
   The pinned heights were set for desktop, where the content is
   laid out across columns and needs the travel. Stacked on a
   phone, each step is one short block, so the same 4-6 screens
   leave the content finished and sitting for a screen or more
   before the wipe starts -- which reads as a blank stretch.
   These are sized so the content and the wipe fill the section
   with nothing left over.
   ============================================================ */
@media (max-width:980px){
  #prBeats     {height:calc(var(--pvh, 1vh) * 400);}
  #prLayers    {height:calc(var(--pvh, 1vh) * 240);margin-top:calc(var(--pvh, 1vh) * -180);}
  #prProcess   {height:calc(var(--pvh, 1vh) * 480);}
  #prDecide    {height:calc(var(--pvh, 1vh) * 320);margin-top:calc(var(--pvh, 1vh) * -240);}
  #prPersonas  {height:calc(var(--pvh, 1vh) * 400);}
  #prStrategy  {height:calc(var(--pvh, 1vh) * 320);margin-top:calc(var(--pvh, 1vh) * -240);}
  #prPoint     {height:calc(var(--pvh, 1vh) * 380);}
  #prExec      {height:calc(var(--pvh, 1vh) * 380);}
  #prExecRail  {height:calc(var(--pvh, 1vh) * 500);}
}

/* ============================================================
   MOBILE: THE CAROUSELS, SCROLL-LOCKED
   ------------------------------------------------------------
   The wrapper is tall, the carousel sticks to the viewport, and
   vertical scroll drives the carousel's OWN scrollLeft.

   Deliberately no transform and no will-change here. The first
   attempt at this moved a max-content track on its own compositor
   layer and locked the renderer solid; scrollLeft asks the browser
   to do something it already does natively, with no new layers.
   ============================================================ */
@media (max-width:980px){
  .pr-page .lockrail{position:relative;}
  .pr-page .lockrail > .circle-carousel,
  .pr-page .lockrail > .tier-carousel{
    position:sticky;top:0;
    height:calc(var(--pvh, 1vh) * 100);
    overflow-x:hidden;                 /* the driver owns the axis */
    scroll-behavior:auto;              /* it is set every frame; smooth would fight it */
  }
  /* Each slide is exactly one viewport tall and centres its own content.
     Setting min-height:0 and height:100% was not enough: the carousel is a
     flex ROW, so with the default align-items:stretch every slide grows to
     the tallest one's content. One tall slide therefore pushed the others
     down and off, which is why the first arrived at the bottom of the screen
     instead of the middle. Pinning the height to the viewport and centring
     inside it makes each slide independent of its neighbours. */
  /* display:flex stated again, not inherited: the >=981px block turns these
     into a 3-column grid, and relying on "the desktop rule just will not
     apply here" is the kind of assumption that breaks the moment the
     breakpoints move. A row is what makes the slides overflow sideways and
     gives scrollLeft something to travel. */
  .pr-page .lockrail > .circle-carousel,
  .pr-page .lockrail > .tier-carousel{display:flex;flex-wrap:nowrap;align-items:center;}
  /* The tier slides are 92% wide with 4% side margins -- a peek-at-the-next
     card layout, which is right for a finger-swipe but wrong for a driven
     rail: each stop landed 117px, then 58px, then 0px off, because the slide
     pitch no longer matches the viewport. One slide per screen, no margins,
     so every stop lands flush. The card keeps its inset via padding. */
  .pr-page .lockrail .tier-slide{
    flex:0 0 100%;margin:0;
    padding-left:clamp(18px,6vw,34px);padding-right:clamp(18px,6vw,34px);
  }
  .pr-page .lockrail .tier-slide:first-child{margin-left:0;}
  .pr-page .lockrail .tier-slide:last-child{margin-right:0;}
  .pr-page .lockrail .circle-slide,
  .pr-page .lockrail .tier-slide{
    min-height:0;
    height:calc(var(--pvh, 1vh) * 100);
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding-top:0;padding-bottom:0;
    overflow-y:auto;                 /* a pricing card taller than the screen
                                        scrolls within its own slide rather
                                        than spilling past the pinned frame */
  }
}
@media (prefers-reduced-motion:reduce){
  .pr-page .lockrail{height:auto !important;}
  .pr-page .lockrail > div{position:static;height:auto;overflow-x:auto;}
}

/* ============================================================
   MOBILE POLISH
   ------------------------------------------------------------
   Three things, all below 981px only.
   ============================================================ */
@media (max-width:980px){

  /* 1. the tier cards lose their frames. In a driven rail each card already
     fills the screen, so a border and a 24px radius are drawing a box around
     the whole viewport -- which is what put those hairlines down the middle
     of the screen mid-transition. The colour and gradient stay; only the
     frame goes. */
  .pr-page .lockrail .tier-slide,
  .pr-page .lockrail .tier-slide.listener,
  .pr-page .lockrail .tier-slide.strategist,
  .pr-page .lockrail .tier-slide.doer{
    border:0;border-radius:0;box-shadow:none;
  }

  /* 2. breathing room top and bottom on every section, so nothing sits hard
     against the edge of the screen. Applied as a minimum rather than a fixed
     value, so the sections that already pad more keep theirs. */
  /* Every section listed by id. `.pr-page > section` scores (0,1,1) and
     loses to the per-section `#prCompare{padding:0 ...}` rules at (1,0,0),
     so the minimum silently did not apply to exactly the sections that
     needed it. Matching their specificity is what makes it hold. */
  #prBeats,
  #prLayers,
  #prProcess,
  #prDecide,
  #prCompare,
  #prWorkspace,
  #prPersonas,
  #prStrategy,
  #prSim,
  #prPoint,
  #prCheck,
  #prTicker,
  #prExec,
  #prExecRail,
  #prDay,
  #prPricing,
  #foot,
  .pr-page .lockrail .circle-slide,
  .pr-page .lockrail .tier-slide{
    padding-top:max(20px, var(--sec-pad-top, 0px));
    padding-bottom:max(20px, var(--sec-pad-bottom, 0px));
  }

  /* 3. the three tier names and the three persona names: Bebas, 60% larger.
     Bebas is condensed, so the same box now holds a much bigger word. */
  .pr-page .lockrail .tier-name,
  .pr-page .lockrail .circle-word{
    font-family:'Bebas Neue', var(--font-display), sans-serif;
    font-weight:400;                 /* Bebas ships one weight */
    letter-spacing:1px;
    line-height:1.02;
  }
  .pr-page .lockrail .tier-name{font-size:calc(24px * 1.6);}   /* base is 24px */
  .pr-page .lockrail .circle-word{font-size:calc(23px * 1.6);}  /* base is 23px */
}