/* ============================================================
   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;}
/* ---------- THE PRICE LADDER, AS THE HEALTHCARE PAGE STATES IT ----------
   Same three levels, same figures, same spec table — one price list, said
   twice. The cards keep this page's own shell (the swipe rail below 981px,
   the pinned lockrail, the dots) so only what the cards SAY has changed,
   not how the section behaves. */
.pr-page .tier-gloss{
  margin-top:6px;font-size:13px;font-style:italic;font-weight:300;
  color:rgba(30,55,39,.52);
}
.pr-page .tier-slide.doer .tier-gloss{color:rgba(245,241,230,.6);}
/* THE DOLLAR LIST PRICE, STRUCK — shown, but no longer offered. The strike
   is in CSS rather than an <s> in the markup because the annual/monthly
   switch rewrites this span's textContent, which would carry a wrapper
   element away with it. The "/mo" goes with the number: it is that
   figure's unit and reads as one phrase with it. */
.pr-page .tier-usd{
  font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;
  letter-spacing:.08em;font-weight:600;color:rgba(30,55,39,.52);
}
.pr-page .tier-slide.doer .tier-usd,
.pr-page .tier-slide.doer .tier-period{color:rgba(245,241,230,.6);}
.pr-page .tier-price-row .tier-usd,
.pr-page .tier-price-row .tier-period{
  text-decoration:line-through;text-decoration-thickness:1.5px;
}
.pr-page .tier-bill{
  margin-top:8px;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:rgba(30,55,39,.52);
}
.pr-page .tier-slide.doer .tier-bill{color:rgba(245,241,230,.6);}
.pr-page .tier-specs{
  margin:22px 0;border-top:1px solid rgba(22,19,14,.12);
}
.pr-page .tier-sr{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(22,19,14,.12);
}
.pr-page .tier-sr span{font-size:12.5px;color:rgba(30,55,39,.52);flex:none;}
.pr-page .tier-sr b{font-size:12.5px;font-weight:600;text-align:right;color:var(--ink);}
/* The gold says "included" as a marker beside the value, never as the
   value's own colour: at this size brass on cream falls under AA, and
   "Complete set" against "—" is the entire point of the table. */
.pr-page .tier-sr b.tier-no{color:rgba(30,55,39,.52);font-weight:400;}

/* THE ONE LABEL THAT IS LONGER THAN A LABEL.
   .tier-sr span is flex:none, which is right for "Model depth" and "Credits"
   -- a short name that should never wrap and should let the value take the
   slack. The Tools row carries a parenthetical naming the three families to
   pick from, and under flex:none that label claims its full single-line
   width and pushes the value off the right edge of the card. So this row
   alone lets the label wrap and take the slack, and the value holds its
   size. Aligned to the top rather than the baseline, because a two-line
   label baselined against a one-line value sits visibly low.

   A class on the row rather than :has(), so the rule needs nothing of the
   browser that the rest of this stylesheet does not already assume. */
.pr-page .tier-sr-wide{align-items:flex-start;}
.pr-page .tier-sr-wide span{flex:1 1 auto;min-width:0;}
.pr-page .tier-sr-wide b{flex:0 0 auto;}
/* .tier-qual, NOT .tier-note -- that name is already the carousel's own
   footnote further down this file, which is centred and carries 40px of
   bottom padding. Reusing it put a 30px indent and a 40px hole inside the
   table row. */
.pr-page .tier-qual{
  display:block;font-style:normal;
  font-size:10.6px;line-height:1.35;margin-top:3px;opacity:.82;
  padding:0;text-align:inherit;
}

/* INLINE, AND IT HAS TO BE.
   "(only 1)" is short enough to finish the line it starts on, and that is
   not a cosmetic preference: the three tier cards sit side by side above
   981px, and their rows line up only because each card's rows are the same
   heights. Giving this one a second line the way .tier-qual does would make
   the Thinker's Financial row 17px taller than the other two cards' and
   push every row below it out of step across the set. */
.pr-page .tier-qual-in{
  font-style:normal;font-size:10.6px;opacity:.82;white-space:nowrap;
}
.pr-page .tier-sr b.tier-all::before,
.pr-page .tier-sr b.tier-only::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--grid);margin-right:7px;vertical-align:middle;
}
.pr-page .tier-cr i{font-style:normal;font-weight:400;color:rgba(30,55,39,.52);}
.pr-page .tier-slide.doer .tier-specs,
.pr-page .tier-slide.doer .tier-sr{border-color:rgba(246,242,233,.14);}
.pr-page .tier-slide.doer .tier-sr span,
.pr-page .tier-slide.doer .tier-cr i{color:rgba(245,241,230,.6);}
.pr-page .tier-slide.doer .tier-sr b{color:var(--cream);}
.pr-page .tier-slide.doer .tier-sr b.tier-no{color:rgba(246,242,233,.45);}
.pr-page .tier-slide.doer .tier-sr b.tier-all::before,
.pr-page .tier-slide.doer .tier-sr b.tier-only::before{background:#d8b978;}

.pr-page .tier-toggle-row{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:0 30px 26px;
}
.pr-page .tier-toggle{
  display:inline-flex;padding:4px;gap:4px;
  border:1px solid rgba(22,19,14,.12);border-radius:5px;background:#ece9e1;
}
.pr-page .tier-toggle button{
  border:0;cursor:pointer;background:transparent;color:rgba(30,55,39,.52);
  padding:10px 18px;border-radius:3px;min-height:42px;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background .35s ease,color .35s ease;
}
.pr-page .tier-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--cream);}
.pr-page .tier-toggle button:focus-visible{outline:2px solid var(--grid);outline-offset:2px;}
.pr-page .tier-save{
  font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grid);font-weight:600;
}
.pr-page .tier-save[hidden]{display:none;}

.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.
   ============================================================ */
/* The taskboard that used to sit above this is gone, so the ticker is
   now the section's first block and takes the section's own top padding
   rather than adding a gap of its own. */
#prDay #prWhere{margin-top:0;}
#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));
  }

  /* 2b. ...EXCEPT THE PINNED ONES. THIS IS THE BEIGE GAP.
     Every section above is a box with content in it, and 20px of breathing
     room is right for that. The nine below are not: each is a tall scroll
     track whose only child is a sticky, full-bleed, 100vh stage. Padding a
     scroll track does not move the stage inboard -- the stage still fills
     the screen -- it only opens 20px of bare section box above and below
     the track, and for the five whose colour lives on the stage rather
     than on the section (#prBeats, #prProcess, #prPersonas, #prPoint,
     #prExec) that bare box is transparent, so the cream page background
     shows through as a band at the seam. That band is the gap: a 20px
     stripe of beige between the grey of the three layers and the grey of
     the section after it.

     On the coloured ones the band is hidden, but the padding still costs
     something -- it pushes the sticky stage 20px down the screen, which is
     why the closing rule at the foot of the layers stage began its life
     below the fold.

     Written as a separate block rather than by deleting ids from the list
     above so the intent survives: the list is "every section", this is
     "every section that is a scroll track". Same specificity, stated
     second, so it wins. */
  #prBeats,
  #prLayers,
  #prProcess,
  #prDecide,
  #prPersonas,
  #prStrategy,
  #prPoint,
  #prExec,
  #prExecRail{
    padding-top:0;
    padding-bottom:0;
  }

  /* 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 */
}

/* ============================================================
   #prBeats — THE SECOND HALF OF EACH HEADLINE
   ------------------------------------------------------------
   The carousel after the hero carries a two-part line: the claim,
   then the thing it is not. Only that one — the process track lower
   down keeps its own wording. The reference sets the second half in a light
   warm grey so the pair reads as one sentence with a turn in it
   rather than as two sentences of equal weight.

   #c5c3be is sampled from the reference. It is given as an rgba
   of the page's own ink instead of that literal, so it keeps its
   relationship to the text beside it if the palette is ever
   retuned.

   Inherit, not re-declare: the block already sets its own family,
   size and weight on the heading, and the span takes all of it.
   Only the colour changes, which is the only thing that should.
   ============================================================ */
#prBeats .pb-head-b{
  color:rgba(30,55,39,.30);
}

/* With the footer line gone the body is the last thing in the card, and the
   old spacing was tuned for something sitting under it. */
#prBeats .pb-body{margin-top:20px;}

/* The kicker is a bare number now. At 11px with 1.6px of tracking it read as
   a stray figure rather than a step marker, so it gets the weight and size
   the numeral needs to hold its own above a 52px headline. */
#prBeats .pb-kicker{
  font-size:13px;letter-spacing:2px;
}

/* ============================================================
   THE PHONE DROPS THE BAR AND KEEPS THE TAB
   ------------------------------------------------------------
   The same decision the healthcare page makes, for the same
   reason: on a phone the glass pill sits on top of the hero's
   own first line, and the pull-tab that replaces it past the
   first screen does the whole job on its own. One way in, in the
   same corner, the whole way down.

   products.js is told the same thing, so the tab is shown rather
   than waiting for the hero to leave; this rule only makes sure
   the bar never flashes before the script has run.
   ============================================================ */
@media (max-width:980px){
  body.pr-page #nav{display:none;}
  body.pr-page .side-tab{transform:translateX(0);opacity:1;pointer-events:auto;}
}

/* ============================================================
   THE THREE LAYERS: A FULL STOP AT THE FOOT, ON A PHONE
   ------------------------------------------------------------
   The stage is a screen tall and pins while the section is read,
   and the block inside it is vertically centred — so under the
   last layer there was a band of empty ground before the next
   section wiped across it. On a wide screen that band is part of
   the composition; on a phone it is just a gap.

   So on a phone the gap gets a job: a rule that draws itself from
   left to right as the section arrives, with a cross at each end
   where it comes to rest. The line is a scaleX from its left
   edge, which the compositor can do on its own — a width
   animation would lay the whole stage out again on every frame.

   The crosses wait for the line and then fade in, left first, so
   the three read as one gesture rather than three things
   appearing at once.
   ============================================================ */
.pr-page #prLayers .pl-rule{display:none;}

@media (max-width:980px){
  /* PINNED TO THE FOOT OF THE STAGE, NOT HUNG UNDER THE LIST.
     .pl-stage is sticky, which is a positioned value, so it is the
     containing block for this — and it is the stage, not the centred
     block inside it, whose bottom edge is the one the next section
     wipes across. Inset by the same gutter the stage is padded by, so
     the rule lines up with the copy above it.

     THE FLOOR IS SET AGAINST THE BACK-TO-TOP BUTTON, NOT BY TASTE. That
     control is fixed 16px off the bottom and 42px tall, so it owns the
     last 58px of the screen. At 44px the rule sits just clear of its top
     edge — this is as low as the rule can go while both crosses stay in
     front of it rather than behind it. */
  .pr-page #prLayers .pl-rule{
    position:absolute;z-index:2;
    left:var(--pr-gut,22px);right:var(--pr-gut,22px);
    bottom:clamp(44px,11.3vw,56px);
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:10px;
  }
  .pr-page #prLayers .pl-ln{
    display:block;height:1px;background:rgba(30,55,39,.30);
  }
  /* the crosses are drawn, not typed: a "+" in this face sits off the
     optical centre of the line and changes size with the body font */
  .pr-page #prLayers .pl-x{
    position:relative;display:block;width:11px;height:11px;
  }
  .pr-page #prLayers .pl-x::before,
  .pr-page #prLayers .pl-x::after{
    content:"";position:absolute;left:50%;top:50%;background:rgba(30,55,39,.55);
  }
  .pr-page #prLayers .pl-x::before{width:11px;height:1px;transform:translate(-50%,-50%);}
  .pr-page #prLayers .pl-x::after{width:1px;height:11px;transform:translate(-50%,-50%);}

  /* ONE WIPE OVER THE WHOLE RULE, NOT THREE ANIMATIONS IN SEQUENCE.
     The crosses used to fade in on timers while the line scaled under
     them, so they read as three separate marks that happened to arrive
     together — the right-hand one appearing out of nothing at a spot the
     line had not reached yet. Clipping the rule from the right instead
     means there is only ever one moving edge: the left cross is uncovered
     first, the line unrolls from it, and the right cross is uncovered by
     the same edge at the instant the line arrives under it. Nothing moves
     independently, so both crosses stay welded to the ends of the line.

     THE WIPE IS NOT A CSS ANIMATION ANY MORE. It was one, fired once by an
     observer, which meant it could only ever play forwards: scrolling back
     up left the rule sitting there fully drawn while the layers above it
     withdrew. It is now driven frame by frame from scroll position in
     products.js, like every other moving part on this page, so it unrolls
     on the way down and rolls back up on the way up, off the same number.

     This is the state it rests in before the driver has said otherwise:
     closed, with the reveal edge hard against the left. -6px rather than 0
     on the other three sides because the inset is measured off the border
     box and the crosses are 11px wide with their strokes centred on its
     very edge, so closing to exactly 0 shaves their outer half-pixel. */
  .pr-page #prLayers .pl-rule{
    clip-path:inset(-6px 100% -6px -6px);
  }
}

/* THE BACK-TO-TOP BUTTON YIELDS TO THE CLOSING RULE, ON A PHONE ONLY.
   See the note in products.js: the control is fixed in the same band the
   rule is pinned in, and it is opaque, so one of the two has to give. On a
   wide screen the rule is not drawn at all and the button keeps the corner
   to itself, which is why this is inside the query. Visibility rather than
   display, so the button's own fade is what the reader sees and it is not
   torn out of the layout mid-transition. */
@media (max-width:980px){
  /* .to-top.on scores (0,2,0) and sets opacity:1; this has to outscore it
     rather than merely follow it, since stylesheet order is not something
     a later edit to the page head should be able to break. */
  html.pr-layers-pinned .to-top,
  html.pr-layers-pinned .to-top.on{
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
}

/* Nothing to draw for a reader who has asked for stillness: the rule and
   both crosses are simply there. */
@media (prefers-reduced-motion:reduce){
  .pr-page #prLayers .pl-rule{animation:none;clip-path:none;}
  .pr-page #prLayers .pl-ln{transform:none;animation:none;}
  .pr-page #prLayers .pl-x{opacity:1;animation:none;}
}

/* ============================================================
   TOJO'S ANSWER, WITH ITS WORKING SHOWN
   ------------------------------------------------------------
   The card used to hold one quoted sentence. It now holds the
   whole answer — the reasoning, the sequence, three key points
   and the projection the claim rests on — and it writes itself
   out when the reader arrives at it.

   THE CARD IS DARK AND THE FIGURE IS NOT. Everything written
   straight onto the card is light ink; the figure is a white
   report inset into it, because a chart is a thing you read the
   way you read it on paper and the two colours it uses were
   chosen against white. Scoped to .is-tojo so none of it reaches
   the pale assistant card above.

   Those two colours: the house green for what happens today,
   the gold for what happens once turnover is fixed. The gold
   sits below 3:1 against the figure's paper, so both lines
   carry an end label and a legend and neither is left to be
   told apart by colour alone.
   ============================================================ */
#prCompare .is-tojo .pc-brief{margin-top:14px;}
#prCompare .is-tojo .pc-brief .pc-say{margin:0 0 14px;color:#fff;}
#prCompare .is-tojo .pc-brief .pc-say b{font-weight:700;color:var(--grid,#c7a45d);}

#prCompare .is-tojo .pc-kp{
  margin:20px 0 0;
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
#prCompare .is-tojo .pc-pts{
  margin:11px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px;
}
#prCompare .is-tojo .pc-pts li{
  position:relative;padding-left:20px;
  font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.84);
}
#prCompare .is-tojo .pc-pts li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--grid,#c7a45d);
}

/* ---------- the figure, inset white ---------- */
#prCompare .is-tojo .pc-fig{
  margin:22px 0 0;padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:#fff;color:#1e3727;
}
#prCompare .is-tojo .pc-fig figcaption{display:block;margin:0 0 14px;}
#prCompare .is-tojo .pc-fig figcaption b{display:block;font-size:15.5px;font-weight:700;color:#1e3727;}
#prCompare .is-tojo .pc-fig figcaption span{display:block;margin-top:4px;font-size:13px;color:rgba(30,55,39,.56);}

#prCompare .is-tojo .pc-tiles{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;margin-bottom:18px;
}
#prCompare .is-tojo .pc-tile{padding:11px 13px 12px;border-radius:9px;background:#eff4ef;}
#prCompare .is-tojo .pc-t-k{display:block;font-size:12px;line-height:1.3;color:rgba(30,55,39,.62);}
#prCompare .is-tojo .pc-t-v{
  display:block;margin:6px 0 3px;
  font-size:23px;font-weight:700;line-height:1;color:#2f6b45;
}
#prCompare .is-tojo .pc-t-s{display:block;font-size:11.5px;line-height:1.3;color:rgba(30,55,39,.5);}

#prCompare .is-tojo .pc-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:8px;}
#prCompare .is-tojo .pc-lg{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(30,55,39,.72);}
#prCompare .is-tojo .pc-lg i{display:block;width:22px;height:4px;border-radius:2px;}

/* A HEIGHT, NOT AN ASPECT RATIO. maintainAspectRatio is off so the
   canvas takes whatever box it is given — left to grow it stretched a
   0–105 scale over five hundred pixels and put half a card of white
   under a line that moves nineteen points. */
#prCompare .is-tojo .pc-canvas{position:relative;width:100%;height:300px;}
#prCompare .is-tojo .pc-canvas canvas{display:block;width:100%;height:100%;}

#prCompare .is-tojo .pc-table{margin-top:10px;}
#prCompare .is-tojo .pc-table summary{
  font-size:12.5px;color:rgba(30,55,39,.6);cursor:pointer;list-style:none;
}
#prCompare .is-tojo .pc-table summary::-webkit-details-marker{display:none;}
#prCompare .is-tojo .pc-table summary::before{content:"\25b8  ";}
#prCompare .is-tojo .pc-table[open] summary::before{content:"\25be  ";}
#prCompare .is-tojo .pc-table-w{overflow:auto;margin-top:9px;}
#prCompare .is-tojo .pc-table table{border-collapse:collapse;font-size:12.5px;color:#1e3727;}
#prCompare .is-tojo .pc-table th,
#prCompare .is-tojo .pc-table td{
  padding:5px 10px;text-align:right;white-space:nowrap;
  border-bottom:1px solid rgba(30,55,39,.1);
}
#prCompare .is-tojo .pc-table th:first-child,
#prCompare .is-tojo .pc-table td:first-child{text-align:left;}
#prCompare .is-tojo .pc-table thead th{color:rgba(30,55,39,.6);font-weight:700;}

#prCompare .is-tojo .pc-foot-n{margin:11px 0 0;font-size:11.5px;line-height:1.45;color:rgba(30,55,39,.5);}

#prCompare .is-tojo .pc-caveat{
  margin:20px 0 0;padding:10px 0 10px 16px;
  border-left:3px solid #c0585c;
  font-size:14px;line-height:1.6;font-style:italic;color:rgba(255,255,255,.76);
}

/* ============================================================
   THE ARRIVAL
   ------------------------------------------------------------
   Animation only. The markup is complete without it: .is-typing
   is added by the script the moment it takes charge, so a reader
   with no JavaScript — or one on reduced motion, where the
   script hands straight over — never meets a hidden word.
   ============================================================ */
#prCompare .pc-brief.is-typing .pc-fig,
#prCompare .pc-brief.is-typing .pc-caveat,
#prCompare .pc-brief.is-typing .pc-kp,
#prCompare .pc-brief.is-typing .pc-pts li{opacity:0;}

#prCompare .pc-brief .pc-fig,
#prCompare .pc-brief .pc-caveat,
#prCompare .pc-brief .pc-kp,
#prCompare .pc-brief .pc-pts li{transition:opacity .45s ease;}
#prCompare .pc-brief .is-in{opacity:1 !important;}

/* the cursor that follows the typing, and leaves when it is done */
#prCompare .pc-caret{
  display:inline-block;width:.5em;height:1.05em;
  margin-left:1px;vertical-align:-.18em;
  background:var(--grid,#c7a45d);opacity:.9;
  animation:pc-blink 1s steps(2,start) infinite;
}
@keyframes pc-blink{0%,49%{opacity:.9}50%,100%{opacity:0}}

#prCompare .pc-brief.is-typing .pc-tile{opacity:0;transform:translateY(6px);}
#prCompare .pc-tile{transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);}
#prCompare .pc-tile.is-in{opacity:1 !important;transform:none !important;}

#prCompare .pc-brief.is-typing .pc-lg{opacity:0;transform:translateY(4px);}
#prCompare .pc-lg{transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1);}
#prCompare .pc-lg.is-in{opacity:1 !important;transform:none !important;}

#prCompare .pc-brief.is-typing .pc-canvas{opacity:0;}
#prCompare .pc-canvas{transition:opacity .3s ease;}
#prCompare .pc-canvas.is-in{opacity:1 !important;}

@media (prefers-reduced-motion:reduce){
  #prCompare .pc-caret{display:none;}
  #prCompare .pc-brief .pc-fig,#prCompare .pc-brief .pc-caveat,
  #prCompare .pc-brief .pc-kp,#prCompare .pc-brief .pc-pts li,
  #prCompare .pc-tile,#prCompare .pc-lg,#prCompare .pc-canvas{transition:none;}
}

@media (max-width:760px){
  #prCompare .is-tojo .pc-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  #prCompare .is-tojo .pc-fig{padding:14px 13px 13px;}
  #prCompare .is-tojo .pc-canvas{height:240px;}
}

/* ============================================================
   INSIDE TOJO'S WORKSPACE — SIX SCREENS
   ------------------------------------------------------------
   The card is the frame; the screens are the content. The frame
   keeps the browser bar it always had, because that is what says
   "inside the product", and everything under it is now a track
   of real captures that moves one screen at a time.

   The six are not the same shape — they were taken at different
   heights, from 1.73 to 2.05 — so the viewport is a fixed box
   and each screen is contained inside it rather than cropped.
   The box is painted the same #eff1f4 the screens themselves sit
   on, which is what makes the letterboxing invisible on five of
   the six and unremarkable on the one taken against grey.
   ============================================================ */
#prWorkspace .ws-shots{position:relative;padding:14px 14px 10px;}
#prWorkspace .ws-view{
  position:relative;overflow:hidden;
  border-radius:12px;background:#eff1f4;
  box-shadow:inset 0 0 0 1px rgba(30,55,39,.08);
}
#prWorkspace .ws-track{
  display:flex;margin:0;padding:0;list-style:none;
  transition:transform .62s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
#prWorkspace .ws-shot{
  flex:0 0 100%;min-width:0;
  display:grid;place-items:center;
  aspect-ratio:16/9.6;
}
#prWorkspace .ws-shot img{
  display:block;width:100%;height:100%;
  object-fit:contain;
}

/* ---------- the two arrows ---------- */
#prWorkspace .ws-arw{
  position:absolute;top:50%;z-index:3;
  display:grid;place-items:center;
  width:42px;height:42px;margin-top:-21px;
  border:0;border-radius:50%;
  background:rgba(30,55,39,.82);color:#f6f2e9;
  cursor:pointer;opacity:0;
  transition:opacity .22s ease,background .18s ease,transform .18s ease;
}
#prWorkspace .ws-arw.is-prev{left:24px;}
#prWorkspace .ws-arw.is-next{right:24px;}
#prWorkspace .ws-shots:hover .ws-arw,
#prWorkspace .ws-arw:focus-visible{opacity:1;}
#prWorkspace .ws-arw:hover{background:rgba(30,55,39,.95);transform:scale(1.06);}
#prWorkspace .ws-arw:focus-visible{outline:2px solid var(--grid,#c7a45d);outline-offset:2px;}
#prWorkspace .ws-arw svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- what you are looking at ---------- */
#prWorkspace .ws-cap2{
  margin:12px 2px 0;min-height:1.5em;
  font-size:13px;line-height:1.5;color:rgba(30,55,39,.62);
  transition:opacity .25s ease;
}
#prWorkspace .ws-cap2.is-out{opacity:0;}

/* ---------- the six marks ---------- */
#prWorkspace .ws-dots2{display:flex;gap:7px;margin:10px 2px 2px;}
#prWorkspace .ws-dot2{
  width:26px;height:4px;padding:0;border:0;border-radius:2px;
  background:rgba(30,55,39,.18);cursor:pointer;
  transition:background .25s ease,width .25s ease;
}
#prWorkspace .ws-dot2[aria-selected="true"]{background:var(--grid,#c7a45d);width:36px;}
#prWorkspace .ws-dot2:focus-visible{outline:2px solid var(--grid,#c7a45d);outline-offset:3px;}

/* THE BAR THAT SHOWS HOW LONG IS LEFT.
   An auto-advancing carousel that gives no warning is the one people
   complain about: a screen goes while they are still reading it. This
   is the warning, and it is the same element that is paused when the
   pointer is over the card. */
#prWorkspace .ws-dot2[aria-selected="true"]{position:relative;overflow:hidden;}
#prWorkspace .ws-dot2 i{
  position:absolute;inset:0;transform-origin:left center;
  background:rgba(30,55,39,.45);transform:scaleX(0);
}
#prWorkspace .ws-dot2[aria-selected="true"] i.is-run{
  animation:ws-tick var(--ws-dur,5s) linear forwards;
}
#prWorkspace .ws-shots.is-held .ws-dot2 i{animation-play-state:paused;}
@keyframes ws-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:760px){
  #prWorkspace .ws-shots{padding:10px 10px 8px;}
  #prWorkspace .ws-arw{width:36px;height:36px;margin-top:-18px;opacity:1;}
  #prWorkspace .ws-arw.is-prev{left:14px;}
  #prWorkspace .ws-arw.is-next{right:14px;}
  #prWorkspace .ws-cap2{font-size:12.5px;}
}

/* Reduced motion: it still works, it simply does not move on its own
   and does not slide between screens. */
@media (prefers-reduced-motion:reduce){
  #prWorkspace .ws-track{transition:none;}
  #prWorkspace .ws-dot2 i{display:none;}
  #prWorkspace .ws-arw{opacity:1;}
}


/* ============================================================
   SAME QUESTION, ANSWERED BY TOJO — the guided tour
   ------------------------------------------------------------
   This is the slideshow, moved in whole. It arrived as a page of
   its own: its own :root tokens, its own body rules, its own ids.
   Three things had to change for it to live inside a card.

   Every rule is scoped to #ttRoot. The tokens that were on :root
   are on #ttRoot, the rules that were on body are on #ttRoot, and
   the two body-state classes (portrait, small) are classes on
   #ttRoot. Nothing in here can reach the rest of the page, and the
   extra id in every selector means nothing on the page reaches in
   either — which matters for .pr-page .eyebrow, the one page rule
   that would otherwise have landed on the drawing's eyebrow.

   Every id carries a tt_ prefix. The source used #chat, #stage,
   #note, #detail, #score, #title, #prog and #call; this page
   already owns several of those names.

   The stage is still 1600x900 scaled to fit, as it was. What
   changed is what it is fitted to: the card's width, and a share
   of the viewport height rather than all of it.
   ============================================================ */
/* Layout: a fixed 1600x900 stage scaled to fit; inside it a wide "world" that a camera pans and zooms across. Generic AI on the left, Tojo on the right. Captions and controls sit under the stage at readable size. Single committed look: Tojo's forest frame. */
#ttRoot{
  --forest:#10241a; --forest-2:#183528; --cream:#F3F1EA; --cream-dim:#C9CFC6; --gold:#d4a94f; --gold-text:#6B4F16;
  --sage:#DCE3DA; --card:#F7F9F5; --ink:#10241a; --muted:#44544A; --red:#8E2F1C; --amber:#B8862B; --green:#2f7350; --later:#879689;
  --gen-bg:#E9EAEE; --gen-win:#FFFFFF; --gen-ink:#24262B; --gen-muted:#5E636D; --gen-line:#D4D6DC;
  --indigo:#3D52C9; --indigo-2:#1E2A7A; --pink:#FF4FA3; --pink-soft:#FFB3D9; --sun:#FFD86B;
  --f-display:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --f-body:'Poppins','Segoe UI',system-ui,sans-serif;
  --f-hand:'Caveat','Segoe Print',cursive;
  --f-generic:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
#ttRoot,#ttRoot{background:var(--forest);color:var(--cream)}
#ttRoot{font-family:var(--f-body);margin:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 24px}
#ttRoot,#ttRoot *{box-sizing:border-box}
#ttRoot button{font:inherit;cursor:pointer}
#ttRoot :focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* top bar */
#ttRoot .bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:14px 12px;max-width:1600px;margin:0 auto}
#ttRoot .brand{font-family:var(--f-display);font-size:34px;letter-spacing:.02em;color:var(--gold);line-height:1}
#ttRoot .bar h1{font-family:var(--f-display);font-weight:400;font-size:26px;letter-spacing:.03em;margin:0;color:var(--cream);line-height:1}
#ttRoot .bar .sub{font-size:13px;color:var(--cream-dim);flex:1 1 260px;min-width:0}

/* stage */
#ttRoot #tt_stageWrap{position:relative;max-width:1600px;margin:0 auto;overflow:hidden;border-radius:6px;background:var(--forest)}
#ttRoot #tt_stage{position:absolute;top:0;left:0;width:1600px;height:900px;transform-origin:0 0;overflow:hidden;background:var(--forest)}
#ttRoot #tt_world{position:absolute;top:0;left:0;width:3400px;height:1000px;transform-origin:0 0;transition:transform 1.25s cubic-bezier(.65,.02,.25,1)}
@media (prefers-reduced-motion:reduce){#ttRoot #tt_world{transition:none}}

/* ===== Generic AI half ===== */
#ttRoot #tt_gen{position:absolute;left:0;top:0;width:1640px;height:1000px;background:var(--gen-bg);color:var(--gen-ink);font-family:var(--f-generic)}
#ttRoot .sec-h{position:absolute;left:40px;top:26px;font-family:var(--f-display);font-size:44px;letter-spacing:.03em;line-height:1}
#ttRoot .sec-h small{font-family:var(--f-body);font-size:15px;letter-spacing:0;margin-left:14px;font-weight:500}
#ttRoot #tt_gen .sec-h{color:var(--gen-ink)} #ttRoot #tt_gen .sec-h small{color:var(--gen-muted)}
#ttRoot #tt_gQ{position:absolute;left:40px;top:92px;width:960px;background:#DDE0E6;border-radius:18px;padding:18px 24px;font-size:20px;line-height:1.45;min-height:72px}
#ttRoot #tt_gQ .lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gen-muted);margin-bottom:4px}
#ttRoot #tt_gWin{position:absolute;left:40px;top:196px;width:960px;height:770px;background:var(--gen-win);border:1px solid var(--gen-line);border-radius:14px;overflow:hidden}
#ttRoot #tt_gScroll{position:relative;height:100%;overflow-y:auto;padding:26px 34px 60px;font-size:17px;line-height:1.62}
#ttRoot #tt_gScroll p,#ttRoot #tt_gScroll h4,#ttRoot #tt_gScroll ul{margin:0 0 14px}
#ttRoot #tt_gScroll h4{font-size:19px;margin-top:22px}
#ttRoot #tt_gScroll h5{font-size:17px;margin:16px 0 6px}
#ttRoot #tt_gScroll ul{padding-left:24px}
#ttRoot #tt_gScroll .gp{transition:opacity .4s}
#ttRoot #tt_gScroll .gp.off{display:none}
#ttRoot #tt_gScroll.full{font-size:7.5px;line-height:1.32;padding:16px 22px;overflow:hidden}
#ttRoot #tt_gScroll.full p,#ttRoot #tt_gScroll.full h4,#ttRoot #tt_gScroll.full ul{margin:0 0 4px}
#ttRoot #tt_gScroll.full h4{font-size:9.6px;margin-top:6px}
#ttRoot #tt_gScroll.full h5{font-size:8.6px;margin:4px 0 1px}
#ttRoot #tt_gScroll.full mark{box-shadow:none}
#ttRoot #tt_gScroll mark{background:transparent;color:inherit;border-radius:3px;transition:background .4s,box-shadow .4s}
#ttRoot #tt_gScroll mark.seen{background:rgba(212,169,79,.22)}
#ttRoot #tt_gScroll mark.on{background:rgba(212,169,79,.55);box-shadow:0 0 0 3px rgba(212,169,79,.55)}
#ttRoot .typing::after{content:'▍';margin-left:2px;color:var(--gen-muted);animation:tt-blink 1s steps(1) infinite}
@keyframes tt-blink{50%{opacity:0}}

#ttRoot .meters{position:absolute;left:1050px;top:92px;width:540px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
#ttRoot .meter{background:var(--gen-win);border:1px solid var(--gen-line);border-radius:12px;padding:14px 18px;transition:box-shadow .4s}
#ttRoot .meter.hot{box-shadow:0 0 0 4px var(--gold)}
#ttRoot .meter .v{font-family:var(--f-display);font-size:64px;line-height:1;color:var(--gen-ink);font-variant-numeric:tabular-nums}
#ttRoot .meter .k{font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--gen-muted);margin-top:4px}
#ttRoot .flags{position:absolute;left:1050px;top:400px;width:540px;font-family:var(--f-body)}
#ttRoot .flags h3{font-family:var(--f-display);font-weight:400;font-size:30px;letter-spacing:.03em;margin:0 0 10px;color:var(--gen-ink)}
#ttRoot .flags ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#ttRoot .flags li{display:flex;gap:14px;align-items:center;background:var(--gen-win);border:1px solid var(--gen-line);border-left:5px solid var(--red);border-radius:8px;padding:11px 14px;transition:opacity .45s,transform .45s}
#ttRoot .flags li.off{opacity:0;transform:translateX(20px)}
#ttRoot .flags li b{display:block;font-size:19px;line-height:1.35;color:var(--gen-ink)}
#ttRoot .flags li span{font-size:13.5px;color:var(--gen-muted);line-height:1.45}
#ttRoot .flags li.lit{box-shadow:0 0 0 4px var(--gold)}
#ttRoot .flags .x{flex:0 0 26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;display:grid;place-items:center;font-size:14px;margin-top:2px}

/* ===== Tojo half ===== */
#ttRoot #tt_tojo{position:absolute;left:1640px;top:0;width:1760px;height:1000px;background:var(--forest);font-family:var(--f-body)}
#ttRoot #tt_tojo .sec-h{color:var(--gold);left:60px} #ttRoot #tt_tojo .sec-h small{color:var(--cream-dim)}
#ttRoot #tt_tojo.dim > *:not(.sec-h){opacity:.18}
#ttRoot #tt_tojo > *{transition:opacity .6s}

/* library panel */
#ttRoot #tt_lib{position:absolute;left:60px;top:92px;width:520px;min-height:600px;border:1.5px solid rgba(243,241,234,.25);border-radius:10px;padding:22px 24px;background:var(--forest-2)}
#ttRoot #tt_lib h3{font-family:var(--f-display);font-weight:400;font-size:34px;letter-spacing:.03em;margin:0;color:var(--cream);line-height:1}
#ttRoot #tt_lib .lead{font-size:14px;color:var(--cream-dim);margin:6px 0 16px;line-height:1.5}
#ttRoot #tt_lib .lead b{color:var(--gold);font-weight:600}
#ttRoot .files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#ttRoot .file{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:10px 12px;border-radius:8px;border:1.5px dashed rgba(243,241,234,.22);transition:border-color .4s,background .4s,opacity .4s}
#ttRoot .file.off{opacity:.25}
#ttRoot .file.reading{border-color:var(--gold);border-style:solid;background:rgba(212,169,79,.08)}
#ttRoot .file.done{border-style:solid;border-color:rgba(243,241,234,.3)}
#ttRoot .doc{width:30px;height:38px;position:relative;background:var(--cream);clip-path:polygon(0 0,72% 0,100% 24%,100% 100%,0 100%)}
#ttRoot .doc::after{content:'';position:absolute;left:6px;right:6px;top:15px;height:2px;background:var(--forest);box-shadow:0 6px 0 var(--forest),0 12px 0 var(--forest)}
#ttRoot .file.done .doc{background:var(--gold)}
#ttRoot .file .fn{font-size:14px;font-weight:600;color:var(--cream);line-height:1.35}
#ttRoot .file .fs{font-size:12px;color:var(--cream-dim);letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-top:2px}
#ttRoot .file .take{font-size:13.5px;color:var(--cream);line-height:1.45;margin-top:6px;max-height:0;overflow:hidden;transition:max-height .5s}
#ttRoot .file.done .take,#ttRoot .file.reading .take{max-height:80px}
#ttRoot .file .take::before{content:'Takes: ';color:var(--gold);font-weight:600}
#ttRoot .zero{margin-top:16px;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1.5px solid var(--gold);border-radius:8px;transition:opacity .5s}
#ttRoot .zero.off{opacity:0}
#ttRoot .zero .v{font-family:var(--f-display);font-size:58px;color:var(--gold);line-height:1}
#ttRoot .zero .k{font-size:14px;line-height:1.4;color:var(--cream)}
#ttRoot .zero .k i{font-family:var(--f-hand);font-style:normal;font-size:22px;color:var(--gold);display:block}

/* chat panel */
#ttRoot #tt_chat{position:absolute;left:620px;top:92px;width:420px;min-height:874px;padding:22px 24px;border-left:1px solid rgba(243,241,234,.15);color:var(--cream)}
#ttRoot #tt_chat .who{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#ttRoot #tt_chat .av{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--forest);font-family:var(--f-display);font-size:22px;display:grid;place-items:center}
#ttRoot #tt_chat .nm{font-family:var(--f-display);font-size:24px;letter-spacing:.03em;line-height:1}
#ttRoot #tt_chat .ctx{font-size:12px;color:var(--cream-dim)}
#ttRoot .cp{font-size:15.5px;line-height:1.55;margin:0 0 12px;transition:opacity .5s,transform .5s}
#ttRoot .cp.lead1{font-size:19px;font-weight:600;line-height:1.4}
#ttRoot .cp.off,#ttRoot .cb.off,#ttRoot .cblock.off{opacity:0;transform:translateY(8px)}
#ttRoot .cbul{margin:0 0 12px;padding-left:20px;font-size:15px;line-height:1.5}
#ttRoot .cbul li{margin-bottom:6px}
#ttRoot .ptr{font-size:13.5px;color:var(--cream-dim);font-style:italic;margin-bottom:12px}
#ttRoot .note{font-family:var(--f-hand);font-weight:700;font-size:31px;line-height:1.08;color:var(--gold);margin:6px 0 14px}
#ttRoot .pts{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
#ttRoot .pt{display:flex;gap:10px;align-items:center;font-size:13.5px;background:none;border:1px solid rgba(243,241,234,.22);border-radius:8px;padding:7px 10px;color:var(--cream);text-align:left;min-height:40px}
#ttRoot .pt .n{font-weight:700;color:var(--gold);flex:0 0 auto}
#ttRoot .pt[aria-pressed="true"]{border-color:var(--gold);background:rgba(212,169,79,.12)}
#ttRoot .q{font-size:16px;font-weight:500;margin:4px 0 8px}
#ttRoot .opts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
#ttRoot .opt{background:var(--cream);color:var(--forest);border:none;border-radius:8px;padding:9px 12px;text-align:left;font-size:14px;font-weight:500;min-height:40px}
#ttRoot .opt[aria-pressed="true"]{background:var(--gold)}
#ttRoot .prompts{display:flex;flex-wrap:wrap;gap:6px}
#ttRoot .prompt{background:none;border:1px dashed rgba(243,241,234,.4);color:var(--cream-dim);border-radius:16px;padding:6px 11px;font-size:12.5px;min-height:34px}
#ttRoot .cblock{transition:opacity .5s,transform .5s}
#ttRoot .picked{font-size:13px;color:var(--gold);min-height:18px;margin-top:8px}

/* canvas (Diagnosis look, sage) */
#ttRoot #tt_cv{position:absolute;left:1080px;top:92px;width:640px;min-height:874px;background:var(--sage);color:var(--ink);padding:22px 26px 24px;border-radius:4px}
#ttRoot #tt_cv .eyebrow{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
#ttRoot #tt_cv h2{font-family:var(--f-display);font-weight:400;font-size:52px;line-height:.95;margin:4px 0 14px;letter-spacing:.015em}
#ttRoot .tw{display:grid;grid-template-columns:62px 1fr 1fr;gap:0 14px;position:relative}
#ttRoot .tw .colh{padding-bottom:8px}
#ttRoot .tw .colh b{display:block;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
#ttRoot .tw .colh span{font-size:12.5px;color:var(--muted)}
#ttRoot .axis,#ttRoot .col{position:relative;height:430px}
#ttRoot .axis .tick{position:absolute;left:0;right:0;font-size:11.5px;font-weight:600;color:var(--muted);transform:translateY(-50%);font-variant-numeric:tabular-nums}
#ttRoot .axis .tick::after{content:'';position:absolute;left:46px;width:600px;top:50%;border-top:1px dotted rgba(16,36,26,.18)}
#ttRoot .brk{position:absolute;left:0;right:0;height:26px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-style:italic;color:var(--muted);background:repeating-linear-gradient(135deg,rgba(16,36,26,.06) 0 6px,transparent 6px 12px)}
#ttRoot .col .line{position:absolute;left:10px;width:3px;background:var(--ink);border-radius:2px}
#ttRoot .col .idle{position:absolute;left:10px;width:0;border-left:3px dashed var(--later)}
#ttRoot .stop{position:absolute;left:0;display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;color:var(--ink);transform:translateY(-50%);min-height:24px;text-align:left;transition:opacity .35s}
#ttRoot .stop.off{opacity:0}
#ttRoot .stop .dot{flex:0 0 23px;height:23px;border-radius:50%;background:var(--card);border:3px solid var(--ink);transition:box-shadow .3s,background .3s}
#ttRoot .stop[data-s="start"] .dot{border-color:var(--green)}
#ttRoot .stop[data-s="target"] .dot{border-color:var(--amber)}
#ttRoot .stop[data-s="outcome"] .dot{border-color:var(--red);background:#F4E3DE}
#ttRoot .stop .t{font-size:13px;line-height:1.2}
#ttRoot .stop .t b{font-weight:700;font-variant-numeric:tabular-nums;margin-right:5px}
#ttRoot .stop[data-s="outcome"] .t{color:var(--red);font-weight:600}
#ttRoot .stop.lit .dot,#ttRoot .stop[aria-pressed="true"] .dot{background:var(--gold);box-shadow:0 0 0 5px rgba(212,169,79,.35)}
#ttRoot .idlelbl{position:absolute;left:24px;font-size:12px;font-style:italic;color:var(--muted);transform:translateY(-50%)}
#ttRoot .band{position:absolute;left:24px;right:0;top:-2px;font-size:11.5px;line-height:1.3;color:var(--ink);background:var(--card);border:1.5px solid var(--ink);padding:4px 7px;transition:box-shadow .4s}
#ttRoot .band.lit{box-shadow:0 0 0 4px var(--gold)}
#ttRoot .gap{position:absolute;left:4px;width:15px;border:2.5px solid var(--red);border-left:none;transition:box-shadow .4s,opacity .4s}
#ttRoot .gap.off{opacity:0}
#ttRoot .gapl{position:absolute;left:28px;color:var(--red);font-family:var(--f-display);font-size:30px;line-height:.95;transform:translateY(-50%);transition:opacity .4s}
#ttRoot .gapl small{display:block;font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
#ttRoot .gap.lit{box-shadow:4px 0 0 0 var(--gold)}
#ttRoot .detail{margin-top:6px;min-height:42px;background:var(--card);border:1.5px solid var(--ink);padding:8px 12px;font-size:13.5px;line-height:1.4}
#ttRoot .detail b{font-weight:600}
#ttRoot .tiles-h{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:14px 0 6px}
#ttRoot .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#ttRoot .tile{background:var(--card);border:1.5px solid var(--ink);padding:9px 10px;text-align:left;color:var(--ink);min-height:96px;display:flex;flex-direction:column;gap:3px;transition:box-shadow .3s,background .3s}
#ttRoot .tile b{font-size:13px;line-height:1.25}
#ttRoot .tile span{font-size:12px;line-height:1.35;color:var(--muted)}
#ttRoot .tile .td{display:none;color:var(--red)}
#ttRoot .tile[aria-pressed="true"] .td{display:block}
#ttRoot .tile[aria-pressed="true"] .tw2{display:none}
#ttRoot .tile.lit{box-shadow:0 0 0 4px var(--gold)}
#ttRoot .tile .flip{margin-top:auto;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
#ttRoot .effect{margin-top:12px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center;background:#FBF6EA;border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(16,36,26,.12);padding:12px 16px;transition:box-shadow .4s}
#ttRoot .effect.lit{box-shadow:0 0 0 4px var(--gold),8px 8px 0 rgba(16,36,26,.12)}
#ttRoot .effect .big{font-family:var(--f-display);font-size:56px;line-height:.9;color:var(--red);grid-row:span 2}
#ttRoot .effect .big small{display:block;font-size:22px;color:var(--ink)}
#ttRoot .effect .lbl{font-size:14px;font-weight:600}
#ttRoot .effect .wk{font-size:12.5px;color:var(--muted);line-height:1.45}
#ttRoot .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:10px;padding:1px 7px;margin-right:4px;white-space:nowrap}
#ttRoot .tag.y{color:var(--green)} #ttRoot .tag.g{color:var(--gold-text);border-style:dashed}
#ttRoot .cvblk{transition:opacity .5s,transform .5s}
#ttRoot .cvblk.off{opacity:0;transform:translateY(10px)}
#ttRoot .focus{outline:5px solid var(--pink);outline-offset:6px;border-radius:4px;box-shadow:0 0 0 14px rgba(11,25,18,.35)}
#ttRoot .nbox{position:absolute;width:600px;padding:26px 32px 28px;font-family:var(--f-body);color:var(--cream);border-radius:10px;
 background:linear-gradient(150deg,var(--indigo),var(--indigo-2));
 box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.25),-18px 28px 46px rgba(0,0,0,.55);
 transition:opacity .45s;z-index:6}
#ttRoot .nbox.r{transform:perspective(1000px) rotateY(-9deg) rotateX(5deg)}
#ttRoot .nbox.l{transform:perspective(1000px) rotateY(9deg) rotateX(5deg);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.25),18px 28px 46px rgba(0,0,0,.55)}
#ttRoot .nbox.off{opacity:0}
#ttRoot .nbox .eh{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-soft);margin-bottom:6px}
#ttRoot .nbox h3{font-family:var(--f-display);font-weight:400;font-size:58px;line-height:.92;margin:0 0 14px;letter-spacing:.015em;color:var(--cream)}
#ttRoot .nbox p{font-size:23px;line-height:1.5;margin:0}
#ttRoot .nbox .k{padding:0 3px;border-radius:4px;transition:background .35s,color .35s}
#ttRoot .nbox .k.seen{color:var(--sun)}
#ttRoot .nbox .k.on{background:var(--sun);color:var(--indigo-2)}
#ttRoot #tt_nSvg,#ttRoot #tt_nSpot{position:absolute;left:0;top:0;width:1600px;height:900px;pointer-events:none;transition:opacity .45s}
#ttRoot #tt_nSpot{z-index:4} #ttRoot #tt_nSvg{z-index:5}
#ttRoot #tt_nSpot.off,#ttRoot #tt_nSvg.off{opacity:0}
#ttRoot.portrait .nbox{width:556px;padding:22px 24px 24px}
#ttRoot.portrait .nbox.p{transform:perspective(1000px) rotateX(6deg)}
#ttRoot.portrait .nbox h3{font-size:50px}
#ttRoot.portrait .nbox p{font-size:25px;line-height:1.45}
#ttRoot.portrait .nbox .eh{font-size:16px}
#ttRoot.portrait #tt_title,#ttRoot.portrait #tt_title2{left:24px;width:552px;top:300px;padding:40px 30px}
#ttRoot.portrait #tt_title h2{font-size:84px} #ttRoot.portrait #tt_title p{font-size:24px}
#ttRoot.portrait #tt_title2 h2{font-size:76px}
#ttRoot.portrait #tt_verdict{left:20px;width:560px;top:60px;padding:30px 28px}
#ttRoot.portrait #tt_verdict h2{font-size:56px;margin-bottom:18px} #ttRoot.portrait #tt_verdict p{font-size:24px;margin-bottom:14px}
#ttRoot.portrait #tt_score{left:16px;width:568px;top:90px;padding:26px 20px}
#ttRoot.portrait #tt_score h2{font-size:56px}
#ttRoot.portrait .sg{grid-template-columns:150px 1fr 1fr}
#ttRoot.portrait .sg>div{font-size:22px;padding:12px 8px}
#ttRoot.portrait .sg .rk{font-size:15px} #ttRoot.portrait .sg .hd{font-size:34px}
#ttRoot.portrait #tt_close{left:16px;width:568px;top:60px;padding:34px 28px}
#ttRoot.portrait #tt_close h2{font-size:80px}
#ttRoot.portrait .kw{grid-template-columns:1fr;gap:18px}
#ttRoot.portrait .kw p{font-size:24px} #ttRoot.portrait .cbtn{font-size:24px;min-height:72px;padding:14px 26px} #ttRoot.portrait #tt_close .hand{font-size:42px}
#ttRoot.portrait #tt_sum{left:24px;width:552px;top:auto;bottom:30px}
#ttRoot.portrait #tt_sum.card:not(.off){transform:perspective(1000px) rotateX(6deg)}
#ttRoot.portrait #tt_sum li{font-size:24px}
#ttRoot #tt_saysM{display:none}
#ttRoot.portrait #tt_saysM{display:block;left:24px;width:552px;top:auto;bottom:24px;padding:22px 24px;color:var(--cream);border-radius:10px;background:linear-gradient(150deg,var(--indigo),var(--indigo-2));box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.25),0 24px 40px rgba(0,0,0,.5)}
#ttRoot #tt_saysM .eh{font-size:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-soft);margin-bottom:10px}
#ttRoot #tt_saysM ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#ttRoot #tt_saysM li{display:flex;gap:12px;align-items:center;font-size:23px;line-height:1.3;transition:opacity .4s}
#ttRoot #tt_saysM li.off{opacity:.12} #ttRoot #tt_saysM li.lit{color:var(--sun)}
#ttRoot #tt_saysM .x{flex:0 0 30px;height:30px;border-radius:50%;background:var(--pink);color:#fff;font-weight:700;display:grid;place-items:center;font-size:15px}
#ttRoot.portrait .sub{display:none}
#ttRoot.portrait .bar{padding-block:10px 8px} #ttRoot.portrait .bar h1{font-size:22px} #ttRoot.portrait .brand{font-size:28px}
#ttRoot.portrait .chaps{display:none}
#ttRoot.portrait .under{grid-template-columns:1fr;gap:10px}
#ttRoot.portrait .cap h2{font-size:26px} #ttRoot.portrait .cap p{font-size:15px}
#ttRoot.portrait .ctrl{position:sticky;bottom:0;z-index:20;background:var(--forest);justify-content:space-between;flex-wrap:nowrap;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(243,241,234,.15)}
#ttRoot.portrait .ctrl .cb{flex:1;min-height:52px;justify-content:center;font-size:15px;padding:0 8px}
#ttRoot.small .nbox,#ttRoot.small #tt_nSvg path,#ttRoot.small #tt_nSvg circle.dot{display:none}

/* ===== overlay (stage coords) ===== */
#ttRoot #tt_ov{position:absolute;inset:0;pointer-events:none}
#ttRoot .card{position:absolute;pointer-events:auto;background:var(--cream);color:var(--forest);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.45);transition:opacity .5s,transform .5s}
#ttRoot .card.off{opacity:0;transform:translateY(16px) scale(.98);pointer-events:none}
#ttRoot #tt_title{left:280px;top:250px;width:1040px;padding:50px 60px;text-align:center}
#ttRoot #tt_title .e{font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
#ttRoot #tt_title h2{font-family:var(--f-display);font-weight:400;font-size:120px;line-height:.9;margin:10px 0 14px}
#ttRoot #tt_title p{font-size:22px;line-height:1.5;margin:0 auto;max-width:760px}
#ttRoot #tt_verdict{left:170px;top:90px;width:1260px;padding:40px 56px;background:var(--forest);color:var(--cream);border:2px solid var(--red)}
#ttRoot #tt_verdict h2{font-family:var(--f-display);font-weight:400;font-size:78px;line-height:.95;margin:0 0 22px;color:var(--cream)}
#ttRoot #tt_verdict p{font-size:25px;line-height:1.5;margin:0 0 14px;color:var(--cream-dim)}
#ttRoot #tt_verdict .kh{color:var(--cream);border-radius:3px;padding:0 2px;transition:background .4s,color .4s}
#ttRoot #tt_verdict .kh.on{background:var(--gold);color:var(--forest)}
#ttRoot #tt_verdict .kh.seen{color:var(--gold)}
#ttRoot #tt_verdict p b{color:var(--gold);font-weight:600}
#ttRoot #tt_score{left:150px;top:90px;width:1300px;padding:34px 44px}
#ttRoot #tt_score h2{font-family:var(--f-display);font-weight:400;font-size:64px;margin:0 0 14px;line-height:1}
#ttRoot .sg{display:grid;grid-template-columns:300px 1fr 1fr;border-top:2px solid var(--forest)}
#ttRoot .sg > div{padding:12px 16px;border-bottom:1px solid rgba(16,36,26,.18);font-size:19px;line-height:1.35;transition:opacity .35s}
#ttRoot .sg .rk{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center}
#ttRoot .sg .hd{font-family:var(--f-display);font-size:34px;letter-spacing:.03em;border-bottom:2px solid var(--forest)}
#ttRoot .sg .gv{color:var(--red)}
#ttRoot .sg .tv{background:rgba(212,169,79,.18);font-weight:600}
#ttRoot .sg .off{opacity:0}
#ttRoot #tt_sum{left:40px;top:80px;width:540px;padding:30px 34px;color:var(--cream);border-radius:10px;background:linear-gradient(150deg,var(--indigo),var(--indigo-2));box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.25),18px 28px 46px rgba(0,0,0,.55)}
#ttRoot #tt_sum.card:not(.off){transform:perspective(1000px) rotateY(9deg) rotateX(5deg)}
#ttRoot #tt_sum .eh{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-soft);margin-bottom:6px}
#ttRoot #tt_sum h2{font-family:var(--f-display);font-weight:400;font-size:54px;line-height:.95;margin:0 0 18px}
#ttRoot #tt_sum ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
#ttRoot #tt_sum li{display:flex;gap:14px;align-items:center;font-size:21px;line-height:1.3;transition:opacity .4s}
#ttRoot #tt_sum li.off{opacity:.15}
#ttRoot #tt_sum li .ck{flex:0 0 34px;height:34px;border-radius:50%;background:var(--sun);color:var(--indigo-2);font-weight:700;display:grid;place-items:center;font-size:18px}
#ttRoot #tt_title2{left:280px;top:280px;width:1040px;padding:50px 60px;text-align:center}
#ttRoot #tt_title2 .e{font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
#ttRoot #tt_title2 h2{font-family:var(--f-display);font-weight:400;font-size:96px;line-height:.92;margin:10px 0 0}
#ttRoot #tt_close{left:120px;top:110px;width:1360px;padding:50px 60px;background:var(--forest);color:var(--cream);border:2px solid var(--gold)}
#ttRoot #tt_close .e{font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
#ttRoot #tt_close h2{font-family:var(--f-display);font-weight:400;font-size:110px;line-height:.9;margin:8px 0 26px}
#ttRoot .kw{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px}
#ttRoot .kw div{border-top:3px solid var(--cream-dim);padding-top:14px}
#ttRoot .kw div.w{border-color:var(--gold)}
#ttRoot .kw b{font-family:var(--f-display);font-weight:400;font-size:46px;letter-spacing:.03em;display:block;line-height:1}
#ttRoot .kw p{font-size:20px;line-height:1.5;margin:8px 0 0;color:var(--cream-dim)}
#ttRoot .kw .w p{color:var(--cream)}
#ttRoot #tt_close .hand{font-family:var(--f-hand);font-weight:700;font-size:56px;color:var(--gold);line-height:1.05;margin:0 0 26px}
#ttRoot .cbtns{display:flex;gap:14px;flex-wrap:wrap}
#ttRoot .cbtn{min-height:52px;padding:12px 24px;border-radius:6px;border:2px solid var(--gold);background:none;color:var(--cream);font-size:18px;font-weight:600}
#ttRoot .cbtn.pri{background:var(--gold);color:var(--forest)}
#ttRoot .call{position:absolute;max-width:430px;font-family:var(--f-hand);font-weight:700;font-size:46px;line-height:1;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.55);background:rgba(16,36,26,.88);padding:14px 20px;border-radius:6px;border:2px solid var(--gold);transition:opacity .45s,transform .45s}
#ttRoot .call.off{opacity:0;transform:translateY(10px)}
#ttRoot.small .call{display:none}
#ttRoot #tt_veil{position:absolute;inset:0;background:rgba(6,14,10,.6);transition:opacity .5s;pointer-events:none}
#ttRoot #tt_veil.off{opacity:0}

/* captions + controls */
#ttRoot .under{max-width:1600px;margin:14px auto 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 28px;align-items:start}
#ttRoot .cap .ch{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
#ttRoot .cap h2{font-family:var(--f-display);font-weight:400;font-size:34px;letter-spacing:.02em;margin:2px 0 4px;line-height:1;text-wrap:balance}
#ttRoot .cap p{font-size:16px;line-height:1.55;margin:0;color:var(--cream);max-width:70ch}
#ttRoot .ctrl{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#ttRoot .cb{min-width:44px;min-height:44px;padding:0 14px;border-radius:6px;border:1.5px solid rgba(243,241,234,.35);background:none;color:var(--cream);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
#ttRoot .cb.pri{background:var(--gold);color:var(--forest);border-color:var(--gold)}
#ttRoot .prog{max-width:1600px;margin:12px auto 0;display:flex;gap:3px;height:12px}
#ttRoot .prog button{flex:1;border:none;padding:0;background:rgba(243,241,234,.18);border-radius:2px;min-width:0;position:relative}
#ttRoot .prog button.done{background:rgba(212,169,79,.6)}
#ttRoot .prog button.cur{background:var(--gold)}
#ttRoot .chaps{max-width:1600px;margin:8px auto 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px}
#ttRoot .chaps button{background:none;border:none;color:var(--cream-dim);padding:6px 0;min-height:32px;font-weight:500}
#ttRoot .chaps button.cur{color:var(--gold);font-weight:600}
@media (max-width:760px){
  #ttRoot .under{grid-template-columns:1fr}
  #ttRoot .ctrl{justify-content:flex-start}
  #ttRoot .cap h2{font-size:28px}
  #ttRoot .cap p{font-size:15px}
}

/* ---- and the joins to the card it now sits in ---- */
#prCompare .is-tojo .pc-body:has(#ttRoot){padding:16px 12px 20px;}
#ttRoot{
  padding-left:0;padding-right:0;padding-block:0;
  border-radius:12px;overflow:hidden;
  /* the card above is a gradient over the section's green; the tour
     brings its own forest ground and needs to sit on it cleanly */
  background:var(--forest);
}
#ttRoot .bar,#ttRoot .prog,#ttRoot .chaps,#ttRoot .under{padding-inline:16px;}
#ttRoot .bar{padding-block:16px 12px;}
#ttRoot .under{margin-bottom:16px;}
/* the page sets .pr-page p/h2/h3 margins in places; the tour states its
   own everywhere it matters, so only the stray list needs saying */
#ttRoot ol,#ttRoot ul{list-style:none;}
#ttRoot #tt_gScroll ul{list-style:disc;}
#ttRoot #tt_gScroll .gp{color:var(--gen-ink);}

/* ---- the ground, and the four controls under the stage ---- */

/* THE DARK FIELD IS ITS OWN COLOUR NOW.
   --forest still does the work it did: the ink on the cream cards, the
   border of the document glyphs, the two dark overlay cards that have to
   read as cards against this. Only the ground the tour sits on moves. */
/* THE CONTAINER ITSELF IS NOT A PANEL.
   The bar, the scene rail, the caption and the controls now sit straight
   on the card, so the tour reads as part of it rather than as a slab laid
   over it. Only the stage — the thing that actually is a screen — keeps a
   ground of its own. */
#ttRoot{--ground:#363e34;background:transparent;}
#ttRoot #tt_stageWrap,
#ttRoot #tt_stage,
#ttRoot #tt_tojo{background:var(--ground);}
/* a slab needs its corners cut; a transparent block does not, and the
   clip would only crop the stage's own rounding */
#ttRoot{border-radius:0;overflow:visible;}
#ttRoot #tt_stageWrap{border-radius:10px;}

/* GLASS, NOT A SLAB.
   Four marks over the ground rather than four labelled boxes: the names
   they used to carry are now in aria-label and title, so the meaning is
   still there for anyone who needs it said. */
#ttRoot .ctrl{gap:10px;}
#ttRoot .cb{
  width:46px;min-width:46px;height:46px;min-height:46px;padding:0;
  display:inline-grid;place-items:center;
  border-radius:13px;
  border:1px solid rgba(243,241,234,.20);
  background:rgba(243,241,234,.07);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  /* the inner top highlight is what makes glass read as glass rather
     than as a flat translucent rectangle */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 4px 14px rgba(0,0,0,.22);
  color:var(--cream);
  transition:background .18s, border-color .18s, transform .18s;
}
#ttRoot .cb:hover{background:rgba(243,241,234,.14);border-color:rgba(243,241,234,.34);}
#ttRoot .cb:active{transform:translateY(1px);}
#ttRoot .cb.pri{
  background:rgba(212,169,79,.22);
  border-color:rgba(212,169,79,.52);
  color:var(--gold);
}
#ttRoot .cb.pri:hover{background:rgba(212,169,79,.32);border-color:rgba(212,169,79,.75);}
#ttRoot .cb svg{width:21px;height:21px;fill:currentColor;display:block;}
#ttRoot .cb#tt_bRestart svg{fill:none;}
/* one button, two marks: whichever the state does not call for is not drawn */
#ttRoot #tt_bPlay .ic-play{display:none;}
#ttRoot #tt_bPlay .ic-pause{display:block;}
#ttRoot #tt_bPlay:not(.is-playing) .ic-play{display:block;}
#ttRoot #tt_bPlay:not(.is-playing) .ic-pause{display:none;}

/* on a phone the row was four stretched bars; square marks stay square */
#ttRoot.portrait .ctrl{justify-content:center;gap:14px;}
#ttRoot.portrait .ctrl .cb{flex:0 0 auto;width:52px;min-width:52px;height:52px;min-height:52px;}
#ttRoot.portrait .ctrl{background:transparent;border-top:1px solid rgba(243,241,234,.12);}

/* ---------- the second hero button carries a second line ----------
   .btn is a one-line component everywhere else on the site, so this
   is a variant rather than a change to it: the row becomes a column
   and the sub-line sits under the label.

   The text is written in sentence case and set in capitals by CSS,
   not typed in capitals. .btn already uppercases its contents, and a
   screen reader given literal capitals can spell a short line out
   letter by letter — so the markup stays readable and the page still
   looks the way it should.

   position/z-index because .btn::before is the hover wipe at z-index
   0 and .btn span is lifted above it at 1; a <small> left flat would
   be painted under the ink as it rises. */
.pr-page .cta-row .btn.is-stacked{
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding-block:11px;
  line-height:1.15;
}
.pr-page .cta-row .btn.is-stacked small{
  position:relative;z-index:1;
  font-size:9px;
  letter-spacing:.18em;
  font-weight:700;
  /* a shade back from the label, and it follows the label's colour
     through the hover wipe rather than being stated twice */
  opacity:.62;
}