/*
Theme Name: Verintra Kinetic
Template: astra
Description: The kinetic Verintra design (city hero, product, scan, services, pricing, about, contact). Built by site/build_wp.py from the prototype in site/. Do not edit here: edit site/ and rebuild.
Version: 2.0.0
Text Domain: verintra-child
*/
/* Layout: one light product system for every page. Each page opens with a thesis beside a live
   module that only that page has, then alternates calm bands (bg / surface). One dark band on
   the home page is the only departure, because the catalog-as-light-field idea needs a dark field.
   Shape rule: surfaces 18px, controls full pill, chips 8px. Nothing else. */
:root{
  --bg:#F3F7F8; --surface:#FFFFFF; --sunk:#E9F0F2; --ink:#0B1C2C; --muted:#4A5C6A; --line:#DCE6EA;
  --accent:#00C2CB; --accent-ink:#00747C; --accent-soft:#E2F7F8; --on-accent:#04222A;
  --field:#07131C; --field-ink:#E6F0F3; --field-muted:#94AAB7; --field-dim:#1B3040; --field-lit:#00C2CB;
  --gA:#15803D; --gB:#4D7C0F; --gC:#B45309; --gD:#C2410C; --gF:#B91C1C; --redact:#0B1C2C;
  --shadow:0 1px 0 rgba(11,28,44,.04),0 18px 40px -22px rgba(11,60,80,.28);
  --shadow-lg:0 1px 0 rgba(11,28,44,.04),0 30px 60px -30px rgba(11,60,80,.35);
  --f-display:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-surface:18px; --r-chip:8px; --r-pill:999px;
  --ease:cubic-bezier(.3,.7,.2,1);
  color-scheme:light;
}

.vr *{box-sizing:border-box}
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.vr{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
:is(.vr-page,.top,.sheet,.foot) a{color:inherit}
:is(.vr-page,.top,.sheet,.foot) h1,:is(.vr-page,.top,.sheet,.foot) h2,:is(.vr-page,.top,.sheet,.foot) h3,:is(.vr-page,.top,.sheet,.foot) h4{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.035em;line-height:1.04}
:is(.vr-page,.top,.sheet,.foot) p,:is(.vr-page,.top,.sheet,.foot) ul,:is(.vr-page,.top,.sheet,.foot) ol,:is(.vr-page,.top,.sheet,.foot) dl,:is(.vr-page,.top,.sheet,.foot) dd,:is(.vr-page,.top,.sheet,.foot) figure{margin:0}
:is(.vr-page,.top,.sheet,.foot) ul,:is(.vr-page,.top,.sheet,.foot) ol{padding:0;list-style:none}
:is(.vr-page,.top,.sheet,.foot) button,:is(.vr-page,.top,.sheet,.foot) input,:is(.vr-page,.top,.sheet,.foot) select,:is(.vr-page,.top,.sheet,.foot) textarea{font:inherit;color:inherit}
.vr .wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.vr .mono{font-family:var(--f-mono)}
.vr .num{font-variant-numeric:tabular-nums}
.vr :focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:6px}
.vr .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(.vr-page,.top,.sheet,.foot) section[id],.vr [data-toc]{scroll-margin-top:84px}

.vr /* ---------- type scale ---------- */
.h-xl{font-size:clamp(2.5rem,4.6vw,4.1rem);font-weight:700}
.vr .h-l{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:700}
.vr .h-m{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:650}
.vr .h-s{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:650;letter-spacing:-.02em}
.vr .lede{margin-top:1.2rem;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:44ch}
.vr .sub{margin-top:1rem;color:var(--muted);font-size:1.05rem;max-width:58ch}
.vr .kicker{display:inline-flex;align-items:center;gap:.5rem;font:500 13px/1 var(--f-mono);color:var(--accent-ink);margin-bottom:1.1rem}
.vr .kicker a{text-decoration:none;color:var(--muted)}
.vr .kicker a:hover{color:var(--ink)}
.vr .tag{display:inline-flex;align-items:center;gap:.35rem;font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .fine{font-size:13px;color:var(--muted)}

.vr /* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;min-height:46px;
  font:600 15px/1 var(--f-body);text-decoration:none;border:1px solid transparent;cursor:pointer;
  padding:.8rem 1.35rem;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  transition:transform .15s ease,background-color .2s ease,border-color .2s ease}
.vr .btn:hover{background:color-mix(in oklab,var(--accent) 86%,#000)}
.vr .btn:active{transform:translateY(1px)}
.vr .btn svg{width:18px;height:18px;flex:none}
.vr .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.vr .btn.ghost:hover{border-color:var(--ink);background:var(--surface)}
.vr .btn.ink{background:var(--ink);color:var(--surface)}
.vr .btn.ink:hover{background:color-mix(in oklab,var(--ink) 85%,var(--accent))}
.vr .acts{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.8rem}
.vr .under{margin-top:.9rem;font-size:13.5px;color:var(--muted)}
.vr .arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--accent-ink);text-decoration:none}
.vr .arrow svg{width:16px;height:16px;transition:transform .2s ease}
.vr .arrow:hover svg{transform:translateX(3px)}
.vr .ext svg{width:14px;height:14px}

.vr .seg{display:inline-flex;padding:4px;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill)}
.vr .seg button{border:0;background:transparent;padding:.55rem 1rem;min-height:38px;border-radius:var(--r-pill);cursor:pointer;font-weight:600;font-size:14px;color:var(--muted)}
.vr .seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.vr .seg .save{font:600 11px/1 var(--f-mono);color:var(--accent-ink);margin-left:.35rem}
.vr .seg button[aria-pressed="true"] .save{color:var(--accent)}

.vr .chips{display:flex;flex-wrap:wrap;gap:8px}
.vr .chipbtn{border:1px solid var(--line);background:var(--surface);padding:.5rem .85rem;min-height:38px;border-radius:var(--r-pill);
  cursor:pointer;font-size:14px;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:.45rem}
.vr .chipbtn b{font:500 11px/1 var(--f-mono);color:var(--muted)}
.vr .chipbtn:hover{border-color:var(--muted);color:var(--ink)}
.vr .chipbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.vr .chipbtn[aria-pressed="true"] b{color:var(--accent)}

.vr /* ---------- header ---------- */
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--surface);padding:.7rem 1rem;border-radius:var(--r-pill);font-weight:600;text-decoration:none}
.vr .skip:focus{top:12px}
.vr .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  background:color-mix(in oklab,var(--bg) 84%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid color-mix(in oklab,var(--line) 80%,transparent)}
.vr .top .wrap{display:flex;align-items:center;gap:1.6rem;height:64px}
.vr .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:700 19px/1 var(--f-display);letter-spacing:-.03em;flex:none}
.vr .brand svg{width:30px;height:30px}
.vr .nav{display:flex;gap:.25rem;margin-left:auto}
.vr .nav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:15px;padding:.5rem .7rem;border-radius:var(--r-pill)}
.vr .nav a:hover{color:var(--ink)}
.vr .nav a[aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.vr .top .btn{min-height:40px;padding:.6rem 1.05rem;font-size:14px}
.vr .menu-btn{display:none;margin-left:auto;width:44px;height:44px;padding:0;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);
  align-items:center;justify-content:center;cursor:pointer}
.vr .menu-btn svg{width:20px;height:20px;flex:none}
.vr .sheet{position:fixed;inset:calc(64px + env(safe-area-inset-top,0px)) 0 auto 0;z-index:29;background:var(--bg);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding-block:12px 20px;max-height:calc(100dvh - 64px);overflow:auto}
.vr .sheet nav{display:grid}
.vr .sheet a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font:600 20px/1.2 var(--f-display);
  letter-spacing:-.02em;padding:.9rem 0;border-bottom:1px solid var(--line)}
.vr .sheet a[aria-current="page"]{color:var(--accent-ink)}
.vr .sheet .btn{margin-top:16px;width:100%}
@media (max-width:1020px){.vr .nav{display:none}.vr .menu-btn{display:inline-flex}.vr .top .btn{display:none}}

.vr /* ---------- pages ---------- */
.page{animation:pagein .5s var(--ease)}
@keyframes pagein{from{transform:translateY(14px)}to{transform:none}}
.vr .band{padding-block:clamp(64px,8vw,112px)}
.vr .band.alt{background:var(--surface);border-block:1px solid var(--line)}
.vr .band.tight{padding-block:clamp(44px,6vw,72px)}
.vr .sec-head{display:grid;gap:.2rem;max-width:760px;margin-bottom:clamp(28px,4vw,52px)}
.vr .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.vr .split.wide-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.vr .split.center{align-items:center}
@media (max-width:900px){.vr .split,.vr .split.wide-r{grid-template-columns:1fr}}
.vr .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);padding:clamp(18px,2.2vw,28px);min-width:0}
.vr .card.lift{box-shadow:var(--shadow)}
.vr .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vr .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vr .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:980px){.vr .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.vr .grid-3{grid-template-columns:1fr}}
@media (max-width:640px){.vr .grid-2,.vr .grid-4{grid-template-columns:1fr}}
.vr .prose p+p{margin-top:1rem}
.vr .prose p{color:var(--muted);max-width:62ch}

.vr /* page head: thesis beside the page's own live module */
.phead{padding-block:clamp(36px,6vw,80px) clamp(48px,6vw,84px)}
.vr .phead .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:960px){.vr .phead .wrap{grid-template-columns:1fr}}

.vr /* ---------- shared bits ---------- */
.chip{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-chip);flex:none;
  color:#fff;font:700 16px/1 var(--f-mono);background:var(--gC);transform-style:preserve-3d}
.vr .chip.sm{width:26px;height:26px;font-size:13px;border-radius:6px}
.vr .chip.flip{animation:flip .11s linear}
.vr .g-A{background:var(--gA)}.vr .g-B{background:var(--gB)}.vr .g-C{background:var(--gC)}.vr .g-D{background:var(--gD)}.vr .g-F{background:var(--gF)}
@keyframes flip{50%{transform:rotateX(90deg)}}
.vr .thumb{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.vr .thumb svg{width:26px;height:26px}
.vr .pill{display:inline-flex;align-items:center;gap:.35rem;font:600 11px/1 var(--f-mono);padding:.38rem .55rem;border-radius:var(--r-chip);
  background:var(--accent-soft);color:var(--accent-ink)}
.vr .pill.ink{background:var(--ink);color:var(--surface)}
.vr .pill.warn{background:color-mix(in oklab,var(--gC) 14%,var(--surface));color:var(--gC)}
.vr .facts{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem}
.vr .facts li{display:flex;align-items:center;gap:.45rem;font-size:14px;color:var(--muted)}
.vr .facts svg{width:16px;height:16px;color:var(--accent-ink)}

.vr /* scan form (hero, scan page, inside articles) */
.scan{margin-top:2rem;max-width:520px}
.vr .scan label{display:block;font:500 13px/1 var(--f-mono);color:var(--muted);margin-bottom:.55rem}
.vr .field-row{display:flex;gap:6px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--shadow)}
.vr .field-row:focus-within{border-color:var(--accent-ink)}
.vr .field-row input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 15px/1 var(--f-mono);padding:0 .9rem;outline:none}
.vr .field-row input::placeholder{color:var(--muted);opacity:.85}
.vr .scan .msg{min-height:1.5rem;margin-top:.7rem;font-size:14px;color:var(--muted)}
.vr .scan .msg.err{color:var(--gF)}
.vr .scan .msg a{color:var(--accent-ink);font-weight:600}
@media (max-width:460px){.vr .field-row{flex-direction:column;border-radius:var(--r-surface)}.vr .field-row input{padding:.9rem .7rem}.vr .field-row .btn{width:100%}}

.vr /* accordion */
.faq{display:grid;border-top:1px solid var(--line)}
.vr .faq details{border-bottom:1px solid var(--line)}
.vr .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.15rem 0;font-weight:600;font-size:1.05rem}
.vr .faq summary::-webkit-details-marker{display:none}
.vr .faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .25s var(--ease)}
.vr .faq summary i::before,.vr .faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.vr .faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.vr .faq details[open] summary i{transform:rotate(45deg)}
.vr .faq details p{color:var(--muted);padding:0 0 1.2rem;max-width:66ch}

.vr /* closing band,.vr reused with page-specific copy */
.close{padding-block:clamp(72px,10vw,132px)}
.vr .close .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end}
.vr .close h2{font-size:clamp(2.2rem,4.8vw,4rem);font-weight:700}
.vr .close p{color:var(--muted);font-size:1.1rem;max-width:36ch}
.vr .close .act{display:grid;gap:1.1rem;justify-items:start}
@media (max-width:860px){.vr .close .wrap{grid-template-columns:1fr}}

.vr /* reveal: moves in from a visible resting state,.vr never from hidden */
.rise{transform:translateY(0);transition:transform .7s var(--ease)}
.vr .rise.pre{transform:translateY(18px)}

.vr /* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface);padding-block:clamp(40px,5vw,64px) 32px;font-size:14px;color:var(--muted)}
.vr .foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.vr .foot h4{font:600 13px/1 var(--f-mono);color:var(--ink);letter-spacing:0;margin-bottom:.4rem}
.vr .foot nav{display:grid}
.vr .foot nav a{text-decoration:none;padding-block:9px;width:fit-content}
.vr .foot nav a:hover{color:var(--ink)}
.vr .foot .blurb{max-width:34ch;margin-top:1rem}
.vr .mailrow{display:flex;align-items:center;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap}
.vr .mail{font-family:var(--f-mono);user-select:all;color:var(--ink);font-size:14px}
.vr .copy{border:1px solid var(--line);background:var(--bg);border-radius:var(--r-pill);min-height:34px;padding:0 .75rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .copy svg{width:14px;height:14px}
.vr .copy:hover{color:var(--ink);border-color:var(--muted)}
.vr /* socials: the old footer's cascading panels,.vr laid flat into one slim strip. Six frosted panels pinned to
   the left edge,:is(.vr-page,.top,.sheet,.foot) each shorter than the last,.vr so every channel owns one 38px segment; on hover they slide out
   one after another and the panel under the pointer brightens. Brand gradient,.vr nothing new. */
.soc{position:relative;width:244px;height:40px;margin-top:1.2rem;border-radius:12px;overflow:hidden;isolation:isolate;
  background:linear-gradient(100deg,#00C2CB 0%,#0089A7 60%,#0B1C2C 100%);box-shadow:0 12px 24px -16px rgba(0,116,124,.55)}
.vr .soc::before{content:"";position:absolute;width:110px;height:110px;right:-30px;top:-70px;border-radius:50%;background:rgba(255,255,255,.22);filter:blur(28px);z-index:-1}
.vr .soc-t,.vr .soc-b span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vr .soc-b{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:0 12px 12px 0;border:1px solid rgba(255,255,255,.45);border-left:0;
  background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .45s var(--ease),background-color .3s}
.vr .soc-b svg{position:absolute;top:50%;right:11px;width:15px;height:15px;margin-top:-7.5px;fill:#fff;transition:transform .3s var(--ease)}
.vr .soc-b1{width:228px;z-index:1}
.vr .soc-b2{width:190px;z-index:2;transition-delay:.04s}
.vr .soc-b3{width:152px;z-index:3;transition-delay:.08s}
.vr .soc-b4{width:114px;z-index:4;transition-delay:.12s}
.vr .soc-b5{width:76px;z-index:5;transition-delay:.16s}
.vr .soc-b6{width:38px;z-index:6;transition-delay:.2s}
.vr .soc:hover .soc-b1,.vr .soc:focus-within .soc-b1{transform:translateX(12px)}
.vr .soc:hover .soc-b2,.vr .soc:focus-within .soc-b2{transform:translateX(10px)}
.vr .soc:hover .soc-b3,.vr .soc:focus-within .soc-b3{transform:translateX(8px)}
.vr .soc:hover .soc-b4,.vr .soc:focus-within .soc-b4{transform:translateX(6px)}
.vr .soc:hover .soc-b5,.vr .soc:focus-within .soc-b5{transform:translateX(4px)}
.vr .soc:hover .soc-b6,.vr .soc:focus-within .soc-b6{transform:translateX(2px)}
.vr .soc .soc-b:hover,.vr .soc .soc-b:focus-visible{background:rgba(255,255,255,.3);transition-delay:0s}
.vr .soc-b:hover svg,.vr .soc-b:focus-visible svg{transform:translateY(-2px)}
.vr .soc-b:focus-visible{outline:2px solid #fff;outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.vr .soc-b,.vr .soc-b svg{transition:none}}
.vr .foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px}
.vr .pause{display:inline-flex;align-items:center;min-height:32px;padding:0 .7rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--muted);font:500 12px/1 var(--f-mono);cursor:pointer}
.vr .pause:hover{color:var(--ink);border-color:var(--muted)}
@media (max-width:860px){.vr .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vr .foot-grid>:first-child{grid-column:1/-1}}

.vr /* ================= HOME ================= */
.hero{padding-block:clamp(40px,7vw,88px) clamp(48px,6vw,80px)}
.vr .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.vr .hero .lede{max-width:34ch}
@media (max-width:960px){.vr .hero .wrap{grid-template-columns:1fr}.vr .hero .lede{max-width:46ch}}
.vr .stage{position:relative;aspect-ratio:6/5;max-width:100%;border-radius:var(--r-surface);
  background:
    radial-gradient(60% 55% at 70% 30%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%),
    radial-gradient(50% 50% at 15% 85%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 70%),
    var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.vr .stage-cap{position:absolute;left:18px;top:16px;font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .stage .pause{position:absolute;left:12px;bottom:12px;z-index:4}
.vr .score{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:.7rem;
  background:var(--ink);color:var(--surface);padding:.55rem .6rem .55rem 1rem;border-radius:var(--r-pill);font:600 14px/1 var(--f-body);z-index:3}
.vr .score b{font:700 20px/1 var(--f-mono);letter-spacing:-.02em}
.vr .pcard{position:absolute;width:44%;display:grid;grid-template-columns:44px 1fr auto;gap:.7rem;align-items:center;
  padding:.7rem .8rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);z-index:2;animation:drift var(--d,7s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.vr .pcard .nm{font:600 14px/1.2 var(--f-body);min-width:0;text-wrap:balance}
.vr .pcard .pr{font:500 12px/1 var(--f-mono);color:var(--muted);margin-top:.3rem}
.vr .beam{position:absolute;top:0;bottom:0;left:0;width:9%;z-index:1;pointer-events:none;transform:translateX(-140%);
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 40%,transparent) 70%,var(--accent) 96%,transparent)}
.vr .stage.sweeping .beam{animation:beam 3s cubic-bezier(.55,0,.35,1) forwards}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes beam{from{transform:translateX(-140%)}to{transform:translateX(1150%)}}
@media (max-width:520px){.vr .stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:8px;padding:44px 12px 12px}
  .vr .pcard{position:static;width:100%;grid-template-columns:36px 1fr auto;padding:.55rem .6rem;animation:none}
  .vr .pcard .thumb{width:36px;height:36px}.vr .score{position:static;order:99;align-self:flex-end;margin-top:4px}}

.vr .chan{padding-block:clamp(36px,5vw,56px);border-block:1px solid var(--line);background:var(--surface)}
.vr .chan h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;margin-bottom:1.6rem}
.vr .ticker{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vr .ticker + .ticker{margin-top:12px}
.vr .track{display:flex;gap:12px;width:max-content;animation:tick 48s linear infinite}
.vr .ticker.rev .track{animation-direction:reverse;animation-duration:56s}
.vr .ticker:hover .track{animation-play-state:paused}
.vr .tkt{display:flex;flex-direction:column;gap:.25rem;padding:.8rem 1.1rem;min-width:170px;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.vr .tkt b{font:600 15px/1.2 var(--f-body)}
.vr .tkt span{font:500 12px/1 var(--f-mono);color:var(--muted)}
@keyframes tick{to{transform:translateX(-50%)}}

.vr .story{padding-block:clamp(64px,9vw,120px)}
.vr .story .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px)}
.vr .record-col{align-self:center}
.vr .record{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--shadow);padding:1.2rem}
.vr .rec-head{display:flex;align-items:center;gap:.8rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.vr .rec-head .t{flex:1;min-width:0}
.vr .rec-head .t b{display:block;font:600 16px/1.2 var(--f-body)}
.vr .rec-head .t span{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .rows{display:grid;gap:2px;margin-top:.6rem}
.vr .row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:1rem;align-items:center;padding:.62rem .2rem}
.vr .row .k{font:500 13px/1.2 var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
.vr /* both values share one grid cell,.vr so the row is as tall as the longer of the two */
.cell{position:relative;display:grid;overflow:hidden;font:500 14px/1.35 var(--f-body);min-height:1.35em;border-radius:4px}
.vr .cell .v{grid-area:1/1;transition:transform .45s var(--ease)}
.vr .cell .v.later{transform:translateY(105%);color:var(--accent-ink);font-weight:600}
.vr .cell .bar{position:absolute;inset:0;background:var(--redact);border-radius:4px;transform:translateX(-102%);transition:transform .55s cubic-bezier(.65,0,.35,1)}
.vr .cell .flag{color:var(--gC)}
.vr .record[data-state="read"] .cell.gap .bar{transform:translateX(0)}
.vr .record[data-state="fixed"] .cell .v.now{transform:translateY(-105%)}
.vr .record[data-state="fixed"] .cell .v.later{transform:translateY(0)}
.vr /* steps tile with no gaps,.vr so the middle band of the screen always sits inside one of them */
.steps{display:grid;gap:6px;align-self:center;counter-reset:st}
.vr .step{position:relative;cursor:pointer;padding:1rem 1.1rem 1.05rem 3.4rem;border-radius:16px;transition:background-color .35s;counter-increment:st}
.vr .step::before{content:counter(st,decimal-leading-zero);position:absolute;left:1.1rem;top:1.15rem;font:600 12px/1 var(--f-mono);color:var(--muted)}
.vr .step h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:650;line-height:1.25}
.vr .step p{color:var(--muted);max-width:42ch;font-size:1rem;max-height:0;overflow:hidden;transition:max-height .5s var(--ease),margin .5s var(--ease)}
.vr .step .tick{position:absolute;left:1.1rem;right:1.1rem;bottom:0;height:2px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0}
.vr .step .tick::after{content:"";position:absolute;inset:0;background:var(--accent-ink);transform:scaleX(var(--p,0));transform-origin:left}
.vr .step.on{background:var(--surface);box-shadow:var(--shadow)}
.vr .step.on::before{color:var(--accent-ink)}
.vr .step.on p{max-height:8em;margin-top:.5rem}
.vr .step.on .tick{opacity:1}
.vr .step:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
@media (max-width:900px){.vr .story .wrap{grid-template-columns:1fr}
  .vr .row{grid-template-columns:minmax(0,128px) minmax(0,1fr);gap:.6rem}}

.vr .bento{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-areas:"fix fix fix ttl ttl ttl" "fix fix fix rul rul rul" "cat cat ga4 ga4 ga4 ga4"}
.vr .tile{position:relative;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface);
  padding:clamp(18px,2.2vw,28px);overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:1rem}
.vr .tile h3{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:650}
.vr .tile p{color:var(--muted);font-size:15px;max-width:40ch}
.vr .t-fix{grid-area:fix}.vr .t-ttl{grid-area:ttl;background:var(--accent-soft)}
.vr .t-rul{grid-area:rul}
.vr .t-cat{grid-area:cat;background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--accent) 7%,transparent) 0 10px,transparent 10px 20px),var(--surface)}
.vr .t-ga4{grid-area:ga4}
@media (max-width:900px){.vr .bento{grid-template-columns:1fr;grid-template-areas:"fix" "ttl" "rul" "cat" "ga4"}}
.vr .fixes{position:relative;height:288px;margin-top:auto}
.vr .fx{position:absolute;left:0;right:0;height:64px;display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:.8rem;align-items:center;
  padding:0 .9rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:transform .6s var(--ease)}
.vr .fx .rk{font:600 13px/1 var(--f-mono);color:var(--muted)}
.vr .fx .lb{font:600 15px/1.2 var(--f-body);min-width:0;text-wrap:balance}
.vr .fx .ct{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .fx .lift{font:600 13px/1 var(--f-mono);color:var(--accent-ink)}
.vr .fx.done{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.vr .fx.done .lb{text-decoration:line-through;text-decoration-thickness:2px}
.vr .ab{display:grid;gap:10px;margin-top:auto}
.vr .abl{padding:.8rem .95rem;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.vr .abl .tag{display:flex;justify-content:space-between;align-items:center}
.vr .abl .txt{margin-top:.45rem;font:500 15px/1.35 var(--f-body);min-height:2.7em}
.vr .abl.b{border-color:color-mix(in oklab,var(--accent) 50%,var(--line))}
.vr .win{font:600 11px/1 var(--f-mono);background:var(--accent);color:var(--on-accent);padding:.35rem .5rem;border-radius:var(--r-chip);
  transform:translateY(-140%);transition:transform .35s var(--ease)}
.vr .win.show{transform:translateY(0)}
.vr .caret{display:inline-block;width:2px;height:1.05em;background:var(--accent-ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{background:transparent}}
.vr .rule{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vr .tok{font:500 13px/1 var(--f-mono);padding:.55rem .7rem;border-radius:var(--r-chip);border:1px solid var(--line);background:var(--bg)}
.vr .tok.k{background:var(--ink);color:var(--surface);border-color:var(--ink);font-weight:700}
.vr .tok.op{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
.vr .nums{display:flex;gap:1.6rem;margin-top:auto}
.vr .nums div b{display:block;font:700 34px/1 var(--f-mono);color:var(--accent-ink);letter-spacing:-.03em}
.vr .nums div span{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .cat-flow{display:grid;gap:10px;margin-top:auto}
.vr .cf{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem .85rem;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px}
.vr .cf .mono{font-size:12px;color:var(--muted)}
.vr .cf.win2{border-color:var(--accent-ink);font-weight:600}
.vr .cf.win2 .mono{color:var(--accent-ink)}
.vr .narrow{display:flex;align-items:baseline;gap:.5rem;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.vr .narrow b{font-size:22px;color:var(--ink);letter-spacing:-.02em}
.vr .ga4-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);margin-top:auto;align-items:end}
.vr .funnel{display:grid;gap:12px}
.vr .fn{display:grid;gap:6px}
.vr .fn .h{display:flex;justify-content:space-between;font-size:14px}
.vr .fn .h b{font:600 13px/1 var(--f-mono);color:var(--accent-ink)}
.vr .fn .clip{overflow:hidden;height:12px;border-radius:var(--r-pill);background:var(--sunk)}
.vr .fn .fill{height:12px;border-radius:var(--r-pill);background:var(--accent);width:var(--w);transform:translateX(0);transition:transform .9s var(--ease)}
.vr .t-ga4.pre .fn .fill{transform:translateX(-45%)}
.vr .tiers{display:grid;gap:8px}
.vr .tier{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.65rem .8rem;border-radius:12px;border:1px solid var(--line);font-size:14px}
.vr .tier b{font-weight:600;display:flex;align-items:center;gap:.5rem}
.vr .tier span{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .sw{width:10px;height:10px;border-radius:3px;flex:none;display:inline-block}
@media (max-width:600px){.vr .ga4-grid{grid-template-columns:1fr}}

.vr .fieldband{background:var(--field);color:var(--field-ink);position:relative;overflow:hidden}
.vr .fieldband canvas{display:block;width:100%;height:clamp(420px,52vw,600px)}
.vr .fieldband .over{position:absolute;inset:0;display:flex;align-items:flex-end;pointer-events:none}
.vr .fieldband .over .wrap{width:100%;padding-block:clamp(28px,4vw,56px)}
.vr .fieldband .panel{max-width:520px;background:color-mix(in oklab,var(--field) 86%,transparent);
  backdrop-filter:blur(6px);border:1px solid var(--field-dim);border-radius:var(--r-surface);padding:clamp(18px,2.4vw,28px);pointer-events:auto}
.vr /* the heading names its colour: on WordPress the theme's bare h2 colour beats inheritance and drew it navy on the dark band */
.fieldband h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;color:var(--field-ink)}
.vr .fieldband p{margin-top:.8rem;color:var(--field-muted);max-width:42ch}
.vr .key{display:flex;gap:1.4rem;margin-top:1.1rem;font:500 13px/1 var(--f-mono);color:var(--field-muted)}
.vr .key i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.45rem;vertical-align:-1px}

.vr /* two doors at the end of home: product or people */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vr .door{display:flex;flex-direction:column;gap:.8rem;text-decoration:none;padding:clamp(22px,3vw,36px);border-radius:var(--r-surface);
  border:1px solid var(--line);background:var(--surface);transition:border-color .2s ease,transform .25s var(--ease)}
.vr .door:hover{border-color:var(--ink);transform:translateY(-2px)}
.vr .door p{color:var(--muted);max-width:44ch}
.vr .door .arrow{margin-top:auto;padding-top:.6rem}
@media (max-width:760px){.vr .doors{grid-template-columns:1fr}}

.vr /* ================= PRODUCT ================= */
.diff{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--shadow-lg);overflow:hidden}
.vr .diff-head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.vr .diff-head .t{flex:1;min-width:0}
.vr .diff-head .t b{display:block;font:600 16px/1.2 var(--f-body)}
.vr .diff-head .t span{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .gscore{display:flex;align-items:center;gap:.5rem;font:700 18px/1 var(--f-mono)}
.vr .diff-rows{display:grid}
.vr .drow{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:1rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--line);align-items:start}
.vr .drow:last-child{border-bottom:0}
.vr .drow .k{font:500 13px/1.3 var(--f-mono);color:var(--muted);padding-top:.1rem}
.vr .drow .vals{display:grid;gap:.25rem;min-width:0}
.vr .drow .old{font-size:14px;color:var(--muted);position:relative;width:fit-content;max-width:100%}
.vr .drow .old::after{content:"";position:absolute;left:0;right:0;top:55%;height:1.5px;background:var(--gF);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.vr .drow .new{font-size:14.5px;font-weight:600;color:var(--accent-ink);overflow:hidden}
.vr .drow .new span{display:block;transform:translateY(0);transition:transform .45s var(--ease)}
.vr .drow.wait .new span{transform:translateY(110%)}
.vr .drow.done .old::after{transform:scaleX(1)}
.vr .drow .note{font:500 11.5px/1.3 var(--f-mono);color:var(--muted)}
.vr .diff-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.2rem;background:var(--bg);border-top:1px solid var(--line)}
@media (max-width:520px){.vr .drow{grid-template-columns:1fr;gap:.35rem}}

.vr .quad-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:960px){.vr .quad-wrap{grid-template-columns:1fr}}
.vr .quad{position:relative;aspect-ratio:1/1;max-width:100%;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.vr .quad .q{position:absolute;width:50%;height:50%;padding:14px;font:500 12px/1.3 var(--f-mono);color:var(--muted);display:flex}
.vr .quad .q1{right:0;top:0;justify-content:flex-end;text-align:right;background:color-mix(in oklab,var(--accent) 9%,transparent);color:var(--accent-ink)}
.vr .quad .q2{left:0;top:0}
.vr .quad .q3{left:0;bottom:0;align-items:flex-end}
.vr .quad .q4{right:0;bottom:0;align-items:flex-end;justify-content:flex-end;text-align:right}
.vr .quad .axis{position:absolute;background:var(--line)}
.vr .quad .ax-x{left:0;right:0;top:50%;height:1px}.vr .quad .ax-y{top:0;bottom:0;left:50%;width:1px}
.vr .dot{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--surface);cursor:pointer;padding:0;
  transition:transform 1.1s var(--ease);box-shadow:0 1px 3px rgba(11,28,44,.25)}
.vr .dot:hover,.vr .dot:focus-visible{z-index:3;outline:2px solid var(--ink);outline-offset:1px}
.vr .quad-tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--surface);border-radius:10px;padding:.55rem .7rem;font-size:12.5px;line-height:1.35;
  transform:translate(-50%,calc(-100% - 12px));white-space:nowrap}
.vr .quad-tip b{font-weight:600}
.vr .quad-tip span{font-family:var(--f-mono);color:var(--field-muted)}
.vr .axlab{display:flex;justify-content:space-between;margin-top:.6rem;font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .weights{display:grid;gap:4px}
.vr .wrow{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:12px;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:14.5px}
.vr .wrow.h{font:500 12px/1 var(--f-mono);color:var(--muted);border-bottom:1px solid var(--ink);padding-bottom:.6rem}
.vr .wbar{height:8px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.vr .wbar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--accent-ink)}
.vr .wbar.m i{background:var(--accent)}
.vr .wbar .none{font:500 11px/8px var(--f-mono);color:var(--muted)}
.vr .same{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:520px){.vr .wrow{grid-template-columns:minmax(0,1fr) 64px 64px;gap:8px;font-size:13.5px}}

.vr .fixlist{display:grid;gap:8px}
.vr .fxg{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,190px) 70px;gap:14px;align-items:center;padding:1rem 1.1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:14px}
.vr .fxg .rk{font:600 13px/1 var(--f-mono);color:var(--muted)}
.vr .fxg b{display:block;font-weight:600}
.vr .fxg small{display:block;color:var(--muted);font-size:13.5px;margin-top:.2rem}
.vr .fxg .meter{height:8px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.vr .fxg .meter i{display:block;height:100%;border-radius:inherit;background:var(--accent);width:var(--w);transform:translateX(0);transition:transform 1s var(--ease)}
.vr .fixlist.pre .meter i{transform:translateX(-101%)}
.vr .fxg .ct{font:500 12px/1 var(--f-mono);color:var(--muted);margin-top:.4rem;display:block}
.vr .fxg .pts{font:700 16px/1 var(--f-mono);color:var(--accent-ink);text-align:right}
@media (max-width:640px){.vr .fxg{grid-template-columns:28px minmax(0,1fr) 54px}.vr .fxg .mcol{grid-column:2/-1}}

.vr .prov{display:grid;gap:14px}
.vr .attrs{display:flex;flex-wrap:wrap;gap:8px}
.vr .attr{font:500 12.5px/1 var(--f-mono);padding:.5rem .65rem;border-radius:var(--r-chip);border:1px solid var(--line);background:var(--bg);transition:background-color .2s,border-color .2s}
.vr .attr i{font-style:normal;color:var(--muted)}
.vr .attr.hot{background:var(--accent-soft);border-color:var(--accent-ink)}
.vr .gen{font:600 clamp(1.1rem,1.6vw,1.35rem)/1.35 var(--f-display);letter-spacing:-.02em}
.vr .gen span{border-bottom:2px solid color-mix(in oklab,var(--accent) 55%,transparent);cursor:default;transition:background-color .2s}
.vr .gen span:hover,.vr .gen span.hot{background:var(--accent-soft)}
.vr .funnel5{display:grid;gap:10px}
.vr .f5{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.vr .f5 .bar5{height:40px;border-radius:12px;background:var(--sunk);position:relative;overflow:hidden}
.vr .f5 .bar5 i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--accent);border-radius:inherit;transform-origin:left;transition:transform 1s var(--ease)}
.vr .funnel5.pre .bar5 i{transform:scaleX(.02)}
.vr .f5 .bar5 b{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:700 15px/1 var(--f-mono);color:var(--on-accent);z-index:1}
.vr .f5 .lab{display:flex;justify-content:space-between;gap:1rem;font-size:14px}
.vr .f5 .lab span{color:var(--muted)}

.vr .builder{display:grid;gap:14px}
.vr .brow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vr .brow .kw{font:700 13px/1 var(--f-mono);padding:.65rem .75rem;border-radius:var(--r-chip);background:var(--ink);color:var(--surface)}
.vr .brow select,.vr .brow input{min-height:42px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-chip);padding:0 .7rem;font:500 13.5px/1 var(--f-mono);color:var(--ink)}
.vr .brow input{width:9rem}
.vr .preview{display:grid;gap:6px}
.vr .prev{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:.7rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:14px}
.vr .prev .out{min-width:0}
.vr .prev .out del{color:var(--muted);text-decoration-color:var(--gF)}
.vr .prev .out ins{text-decoration:none;color:var(--accent-ink);font-weight:600}
.vr .prev.hit{border-color:color-mix(in oklab,var(--accent) 55%,var(--line));background:var(--surface)}

.vr .conn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vr .conn .card{display:flex;flex-direction:column;gap:.7rem}
.vr .conn .card p{color:var(--muted);font-size:14.5px}
.vr .conn .top-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.vr .live{display:inline-flex;align-items:center;gap:.4rem;font:500 11.5px/1 var(--f-mono);color:var(--gA)}
.vr .live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.6)}}
@media (max-width:980px){.vr .conn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.vr .conn{grid-template-columns:1fr}}

.vr /* ================= FREE SCAN ================= */
.report{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--shadow-lg);padding:1.2rem;display:grid;gap:1rem}
.vr .report-top{display:grid;grid-template-columns:auto 1fr 1fr;gap:1rem;align-items:center}
.vr .bigchip{width:68px;height:68px;border-radius:14px;display:grid;place-items:center;color:#fff;font:700 34px/1 var(--f-mono)}
.vr .stat b{display:block;font:700 26px/1 var(--f-mono);letter-spacing:-.03em}
.vr .stat span{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .hist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;height:150px;padding-top:10px}
.vr .hb{display:grid;grid-template-rows:auto 1fr auto;gap:6px;height:100%;align-items:end;text-align:center}
.vr .hb .v{font:600 12px/1 var(--f-mono);color:var(--muted)}
.vr .hb .col{border-radius:8px 8px 4px 4px;height:var(--h);transform-origin:bottom;transition:transform .8s var(--ease);align-self:end}
.vr .hist.pre .col{transform:scaleY(.04)}
.vr .hb .l{font:700 13px/1 var(--f-mono)}
.vr .mini-fixes{display:grid;gap:6px}
.vr .mf{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:.6rem .75rem;border-radius:10px;background:var(--bg);font-size:14px}
.vr .mf .c{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .mf .p{font:700 13px/1 var(--f-mono);color:var(--accent-ink)}
.vr .mf.locked{color:var(--muted)}
.vr .mf.locked .p{color:var(--muted)}

.vr .run{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:960px){.vr .run{grid-template-columns:1fr}}
.vr .tl{position:relative;display:grid;gap:0;padding-left:28px}
.vr .tl::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--line)}
.vr .tl .prog{position:absolute;left:9px;top:10px;width:2px;height:calc(100% - 20px);background:var(--accent-ink);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .5s linear}
.vr .ts{position:relative;padding:0 0 1.6rem}
.vr .ts::before{content:"";position:absolute;left:-26px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--line);transition:background-color .3s,border-color .3s}
.vr .ts.on::before{background:var(--accent);border-color:var(--accent-ink)}
.vr .ts .t{font:600 12px/1 var(--f-mono);color:var(--muted)}
.vr .ts.on .t{color:var(--accent-ink)}
.vr .ts h3{font-size:1.2rem;font-weight:650;margin-top:.45rem;letter-spacing:-.02em}
.vr .ts p{color:var(--muted);font-size:14.5px;margin-top:.3rem;max-width:44ch}
.vr .ts .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:.6rem}
.vr .out-panels{display:grid;gap:14px}
.vr .out-panels .card h3{font-size:1.05rem;font-weight:650;letter-spacing:-.01em;margin-bottom:.2rem}
.vr .out-panels .card p.c{color:var(--muted);font-size:14px;margin-bottom:1rem;max-width:52ch}
.vr .ring{display:flex;align-items:center;gap:1.2rem}
.vr .ring svg{width:92px;height:92px;flex:none;transform:rotate(-90deg)}
.vr .ring circle{fill:none;stroke-width:10}
.vr .ring .bg{stroke:var(--sunk)}
.vr .ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--ease)}
.vr .ring b{font:700 28px/1 var(--f-mono)}
.vr .nots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vr .nots .card{display:flex;flex-direction:column;gap:.6rem}
.vr .nots .card h3{font-size:1.1rem;font-weight:650;letter-spacing:-.02em}
.vr .nots .card p{font-size:14.5px;color:var(--muted)}
.vr .strike{font:600 12px/1 var(--f-mono);color:var(--gF);text-decoration:line-through;text-decoration-thickness:1.5px}
@media (max-width:980px){.vr .nots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vr .nots{grid-template-columns:1fr}}
.vr .paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vr .paths .card{display:flex;flex-direction:column;gap:.8rem}
.vr .paths .card p{color:var(--muted)}
.vr .paths .card .arrow{margin-top:auto}
@media (max-width:760px){.vr .paths{grid-template-columns:1fr}}

.vr /* ================= SERVICES ================= */
.week{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--shadow-lg);padding:1rem 1.1rem;overflow:hidden}
.vr .week-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(7,minmax(0,1fr));gap:4px;position:relative}
.vr .wk-h{font:500 11.5px/1 var(--f-mono);color:var(--muted);text-align:center;padding:.4rem 0 .6rem}
.vr .wk-h:first-child{text-align:left}
.vr .wk-n{font-size:13px;font-weight:600;padding:.45rem .3rem .45rem 0;display:flex;flex-direction:column;justify-content:center;min-width:0}
.vr .wk-n small{font:500 10.5px/1.2 var(--f-mono);color:var(--muted);font-weight:500}
.vr .wk-c{border-radius:6px;background:var(--bg);min-height:34px;display:grid;place-items:center;transition:background-color .25s,transform .25s var(--ease)}
.vr .wk-c.on{background:var(--accent-soft)}
.vr .wk-c.on i{width:8px;height:8px;border-radius:2px;background:var(--accent-ink)}
.vr .wk-c.fire{background:var(--accent);transform:scale(1.06)}
.vr .wk-c.fire i{background:var(--on-accent)}
.vr .playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.85;left:0;transform:translateX(var(--x,0));transition:transform .45s linear;pointer-events:none}
.vr .week-foot{display:flex;justify-content:space-between;margin-top:.8rem;font:500 12px/1 var(--f-mono);color:var(--muted)}
@media (max-width:520px){.vr .week-grid{grid-template-columns:minmax(0,1.2fr) repeat(7,minmax(0,1fr))}.vr .wk-n small{display:none}.vr .wk-n{font-size:12px}}

.vr .pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vr .pillar{display:flex;flex-direction:column;gap:.9rem;text-decoration:none}
.vr .pillar p{color:var(--muted);font-size:15px}
.vr .plats{display:flex;flex-wrap:wrap;gap:6px}
.vr .plats span{font:500 12px/1 var(--f-mono);padding:.42rem .55rem;border-radius:var(--r-chip);background:var(--bg);border:1px solid var(--line)}
@media (max-width:980px){.vr .pillars{grid-template-columns:1fr}}
.vr .svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
.vr .svc.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.vr .svc.flip>:first-child{order:2}
@media (max-width:960px){.vr .svc,.vr .svc.flip{grid-template-columns:1fr}.vr .svc.flip>:first-child{order:0}}
.vr .svc .prose{margin-top:1rem}
.vr .svc .plats{margin-top:1.4rem}
.vr .seq{display:grid;gap:8px;counter-reset:s}
.vr .seq li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:500}
.vr .seq li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:600 13px/1 var(--f-mono);color:var(--accent-ink)}
.vr .seq li.mark{border-color:var(--accent-ink);background:var(--accent-soft)}
.vr .seq-note{margin-top:.9rem;font-size:14px;color:var(--muted)}
.vr .rfm{display:grid;grid-template-columns:28px repeat(5,minmax(0,1fr));gap:4px}
.vr .rfm .ax{font:500 11px/1 var(--f-mono);color:var(--muted);display:grid;place-items:center}
.vr .rfm button{aspect-ratio:1/1;border:0;border-radius:6px;cursor:pointer;font:600 11px/1 var(--f-mono);color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s}
.vr .rfm button:hover,.vr .rfm button:focus-visible,.vr .rfm button.sel{transform:scale(1.06);box-shadow:0 0 0 2px var(--ink)}
.vr .s-CH{background:var(--accent)}.vr .s-LO{background:color-mix(in oklab,var(--accent) 55%,var(--surface))}
.vr .s-PR{background:color-mix(in oklab,var(--accent) 25%,var(--surface))}.vr .s-AR{background:color-mix(in oklab,var(--gC) 30%,var(--surface))}
.vr .s-DO{background:var(--sunk);color:var(--muted)!important}
.vr .rfm-out{margin-top:1rem;padding:1rem 1.1rem;border-radius:12px;background:var(--bg);border:1px solid var(--line);min-height:92px}
.vr .rfm-out b{display:flex;align-items:center;gap:.5rem;font-weight:650}
.vr .rfm-out p{color:var(--muted);font-size:14.5px;margin-top:.35rem}
.vr .rfm-axes{display:flex;justify-content:space-between;margin:.5rem 0 0 32px;font:500 11px/1.2 var(--f-mono);color:var(--muted)}
.vr .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vr .three .card{padding:1rem}
.vr .three .card span{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .skel{height:26px;width:70%;border-radius:6px;margin-top:.7rem;background:linear-gradient(90deg,var(--sunk),var(--bg),var(--sunk));background-size:200% 100%;animation:shimmer 2.4s linear infinite}
.vr .skel.s{height:10px;width:45%;margin-top:.5rem}
@keyframes shimmer{to{background-position:-200% 0}}
.vr .why{margin-top:10px;display:grid;gap:8px}
.vr .why div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:14.5px}
.vr .why b{font:600 12px/1.5 var(--f-mono);color:var(--accent-ink)}
@media (max-width:520px){.vr .three{grid-template-columns:1fr}}

.vr /* ================= PRICING ================= */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.vr .plan{position:relative;display:flex;flex-direction:column;gap:1rem;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-surface);border:1px solid var(--line);
  background:var(--surface);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.vr .plan.fit{border-color:var(--accent-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 35%,transparent),var(--shadow-lg);transform:translateY(-4px)}
.vr .plan h3{font-size:1.4rem;font-weight:700}
.vr .plan .tl2{color:var(--muted);font-size:14.5px;min-height:2.9em}
.vr .price{display:flex;align-items:baseline;gap:.4rem}
.vr .price .amt{font:700 clamp(2.4rem,4vw,3.2rem)/1 var(--f-display);letter-spacing:-.04em;display:inline-flex;overflow:hidden;height:1em;font-variant-numeric:tabular-nums}
.vr .price .per{color:var(--muted);font-size:14px}
.vr .price-sub{font:500 12.5px/1.3 var(--f-mono);color:var(--muted);min-height:1.3em}
.vr .digit{display:inline-block;transition:transform .5s var(--ease)}
.vr .plan ul{display:grid;gap:.55rem;margin-top:.2rem}
.vr .plan li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.55rem;font-size:14.5px;align-items:start}
.vr .plan li svg{width:16px;height:16px;margin-top:.2rem;color:var(--accent-ink)}
.vr .plan .btn{margin-top:auto}
.vr .plan .badge{position:absolute;top:-12px;left:22px}
@media (max-width:980px){.vr .plans{grid-template-columns:1fr}}
.vr .fitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:end;padding:clamp(18px,2.4vw,28px);
  border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface);margin-bottom:22px}
.vr .fitter label{display:flex;justify-content:space-between;font-weight:600;font-size:15px;margin-bottom:.7rem;gap:1rem}
.vr .fitter label output{font:700 15px/1 var(--f-mono);color:var(--accent-ink)}
.vr .fitter input[type=range]{width:100%;accent-color:var(--accent-ink);height:28px}
.vr .ticks{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);color:var(--muted);margin-top:.2rem}
.vr .tog{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:15px;cursor:pointer;min-height:44px}
.vr .tog input{width:44px;height:26px;appearance:none;border-radius:var(--r-pill);background:var(--line);position:relative;cursor:pointer;transition:background-color .2s;flex:none;margin:0}
.vr .tog input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:transform .25s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.vr .tog input:checked{background:var(--accent-ink)}
.vr .tog input:checked::after{transform:translateX(18px)}
.vr .fit-out{grid-column:1/-1;font-size:15px;color:var(--muted)}
.vr .fit-out b{color:var(--ink)}
@media (max-width:860px){.vr .fitter{grid-template-columns:1fr}}
.vr .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.vr .cmp{width:100%;border-collapse:collapse;min-width:620px;font-size:14.5px}
.vr .cmp th,.vr .cmp td{padding:.85rem 1rem;border-bottom:1px solid var(--line);text-align:center}
.vr .cmp th:first-child,.vr .cmp td:first-child{text-align:left}
.vr .cmp thead th{font:600 14px/1 var(--f-body);position:sticky;top:0;background:var(--surface)}
.vr .cmp tbody tr:last-child td{border-bottom:0}
.vr .cmp td svg{width:18px;height:18px;vertical-align:middle}
.vr .cmp .y{color:var(--accent-ink)}.vr .cmp .n{color:var(--line)}
.vr .cmp .num{font-family:var(--f-mono);font-size:13.5px}
.vr .cmp .pro{background:color-mix(in oklab,var(--accent) 6%,transparent)}
.vr .trial{position:relative;padding-top:8px}
.vr .trial-bar{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:4px}
.vr .trial-bar i{height:34px;border-radius:6px;background:var(--accent-soft)}
.vr .trial-bar i:last-child{background:var(--sunk)}
.vr .trial-bar i.now{background:var(--accent)}
.vr .trial-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.vr .trial-labels b{display:block;font-size:1.05rem}
.vr .trial-labels p{color:var(--muted);font-size:14.5px;margin-top:.3rem}
.vr .trial-days{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);color:var(--muted);margin-top:.5rem}
@media (max-width:760px){.vr .trial-labels{grid-template-columns:1fr}}

.vr /* ================= ABOUT ================= */
.stack{display:grid;gap:8px}
.vr .layer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  text-align:left;cursor:pointer;width:100%;transition:border-color .2s,background-color .2s}
.vr .layer b{display:block;font-weight:650}
.vr .layer small{color:var(--muted);font-family:var(--f-mono);font-size:12px}
.vr .layer:hover{border-color:var(--muted)}
.vr .layer.base{border-style:dashed;border-color:var(--accent-ink);background:var(--accent-soft)}
.vr .layer .do{font:600 12px/1 var(--f-mono);color:var(--accent-ink);white-space:nowrap}
.vr .gauge{margin-top:14px;padding:1rem 1.1rem;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.vr .gauge .lbl{display:flex;justify-content:space-between;font-size:14px;gap:1rem}
.vr .gauge .lbl b{font:700 14px/1 var(--f-mono)}
.vr .gauge .track2{margin-top:.6rem;height:12px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.vr .gauge .track2 i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--g,.22));transition:transform .8s var(--ease)}
.vr .gauge p{margin-top:.6rem;font-size:14px;color:var(--muted);min-height:2.6em}
.vr .tline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vr .tline .card span{font:600 12px/1 var(--f-mono);color:var(--accent-ink)}
.vr .tline .card b{display:block;font:700 1.3rem/1.2 var(--f-display);letter-spacing:-.02em;margin-top:.5rem}
.vr .tline .card p{color:var(--muted);font-size:14.5px;margin-top:.4rem}
.vr .rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vr .rulecard{display:flex;flex-direction:column;gap:.8rem;padding:0;overflow:hidden}
.vr .rulecard .in{padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px) 0;display:grid;gap:.6rem}
.vr .rulecard .in span{font:600 12px/1 var(--f-mono);color:var(--accent-ink)}
.vr .rulecard .in p{color:var(--muted);font-size:15px}
.vr .rulecard .out{margin-top:auto;padding:1rem clamp(18px,2.2vw,28px);background:var(--bg);border-top:1px solid var(--line);font-size:14px}
.vr .rulecard .out i{font:500 11.5px/1 var(--f-mono);font-style:normal;color:var(--gF);display:block;margin-bottom:.35rem}
@media (max-width:760px){.vr .rules,.vr .tline{grid-template-columns:1fr}}
.vr .dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.vr .dl div{padding:1rem 0;border-bottom:1px solid var(--line);padding-right:1rem}
.vr .dl dt{font:500 12px/1 var(--f-mono);color:var(--muted)}
.vr .dl dd{margin-top:.45rem;font-weight:600}
@media (max-width:760px){.vr .dl{grid-template-columns:1fr 1fr}}

.vr /* ================= CONTACT ================= */
.routes{display:grid;gap:12px}
.vr .route{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:1.1rem 1.2rem;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface)}
.vr .route h3{font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
.vr .route p{color:var(--muted);font-size:14.5px;margin-top:.25rem}
.vr .route .val{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.6rem}
.vr .route.main{box-shadow:var(--shadow-lg)}
.vr .form{display:grid;gap:14px}
.vr .form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vr .form label{display:grid;gap:.4rem;font-weight:600;font-size:14px}
.vr .form input,.vr .form select,.vr .form textarea{min-height:46px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:.7rem .85rem;font-size:15px;font-weight:400;width:100%}
.vr .form textarea{min-height:140px;resize:vertical}
.vr .form input:focus,.vr .form select:focus,.vr .form textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent)}
.vr .form .err{color:var(--gF);font-size:13px;font-weight:500;min-height:1em}
.vr .form .hp{position:absolute;left:-9999px}
.vr .form-msg{padding:1rem 1.1rem;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 45%,transparent);font-size:14.5px}
.vr .form-msg b{display:block;margin-bottom:.25rem}
@media (max-width:560px){.vr .form .two{grid-template-columns:1fr}}
.vr .helps{display:grid;gap:12px}
.vr .helps div{padding:1rem 0;border-bottom:1px solid var(--line)}
.vr .helps b{display:block;font-weight:600}
.vr .helps p{color:var(--muted);font-size:14.5px;margin-top:.2rem}
.vr .warn{margin-top:1rem;padding:.9rem 1rem;border-radius:12px;background:color-mix(in oklab,var(--gC) 9%,var(--surface));border:1px solid color-mix(in oklab,var(--gC) 30%,var(--line));font-size:14px;color:var(--ink)}
.vr .callcard{display:grid;gap:1rem}
.vr .callcard ul{display:grid;gap:.7rem}
.vr .callcard li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.6rem;font-size:15px;color:var(--muted)}
.vr .callcard li svg{width:16px;height:16px;margin-top:.25rem;color:var(--accent-ink)}

.vr /* ================= BLOG ================= */
.blog-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}
.vr .search{display:flex;align-items:center;gap:.5rem;min-height:46px;padding:0 .9rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);min-width:min(320px,100%)}
.vr .search svg{width:18px;height:18px;color:var(--muted);flex:none}
.vr .search input{border:0;background:transparent;outline:none;min-width:0;flex:1;font-size:15px}
.vr .search:focus-within{border-color:var(--accent-ink)}
.vr .feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-surface);overflow:hidden;background:var(--surface);text-decoration:none;margin-bottom:22px;transition:border-color .2s}
.vr .feat:hover{border-color:var(--ink)}
.vr .feat .cv{aspect-ratio:16/10;max-width:100%}
.vr .feat .tx{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:.8rem;justify-content:center}
.vr .feat .tx p{color:var(--muted)}
@media (max-width:860px){.vr .feat{grid-template-columns:1fr}}
.vr .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.vr .posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.vr .posts{grid-template-columns:1fr}}
.vr .post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-surface);overflow:hidden;background:var(--surface);text-decoration:none;transition:border-color .2s,transform .25s var(--ease)}
.vr .post:hover{border-color:var(--ink);transform:translateY(-2px)}
.vr .post .cv{aspect-ratio:16/9;max-width:100%;border-bottom:1px solid var(--line)}
.vr .post .tx{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.vr .post h3{font-size:1.12rem;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.vr .post p{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vr .post .meta,.vr .feat .meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;font:500 12px/1 var(--f-mono);color:var(--muted);margin-top:auto;padding-top:.4rem}
.vr .meta .ext{display:inline-flex;align-items:center;gap:.25rem;margin-left:auto}
.vr .cv{display:block;background:var(--bg);width:100%}
.vr .cv svg{display:block;width:100%;height:100%}
.vr .c-bg{fill:var(--bg)}.vr .c-line{fill:var(--line)}.vr .c-sunk{fill:var(--sunk)}.vr .c-acc{fill:var(--accent)}.vr .c-acc-i{fill:var(--accent-ink)}.vr .c-soft{fill:var(--accent-soft)}
.vr .c-ink{fill:var(--ink)}.vr .c-surf{fill:var(--surface)}.vr .c-gA{fill:var(--gA)}.vr .c-gB{fill:var(--gB)}.vr .c-gC{fill:var(--gC)}.vr .c-gD{fill:var(--gD)}.vr .c-gF{fill:var(--gF)}
.vr .c-field{fill:var(--field)}.vr .c-fdim{fill:var(--field-dim)}
.vr .c-txt{fill:#fff;font:700 13px var(--f-mono)}
.vr .empty{padding:3rem 1rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-surface)}

.vr /* ================= POST ================= */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:40;background:var(--accent-ink);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .vr .page[data-page="post"]:not([hidden]) ~ .progress,.vr .progress.on{animation:grow linear both;animation-timeline:scroll(root)}
}
@keyframes grow{to{transform:scaleX(1)}}
.vr .art-head{padding-block:clamp(32px,5vw,64px) clamp(28px,4vw,44px);border-bottom:1px solid var(--line)}
.vr .art-head .wrap{max-width:1000px}
.vr .art-head h1{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:700;max-width:20ch}
.vr .art-head .dek{margin-top:1.1rem;font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--muted);max-width:56ch}
.vr .art-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.6rem;font:500 13px/1 var(--f-mono);color:var(--muted)}
.vr .art{display:grid;grid-template-columns:minmax(0,220px) minmax(0,68ch);gap:clamp(28px,5vw,72px);justify-content:center;padding-block:clamp(36px,5vw,64px)}
.vr .toc{position:sticky;top:96px;align-self:start;display:grid;gap:2px}
.vr .toc b{font:600 12px/1 var(--f-mono);color:var(--muted);margin-bottom:.6rem}
.vr .toc a{display:block;text-decoration:none;font-size:14px;color:var(--muted);padding:.42rem 0 .42rem .8rem;border-left:2px solid var(--line);line-height:1.3}
.vr .toc a:hover{color:var(--ink)}
.vr .toc a.on{color:var(--ink);border-left-color:var(--accent-ink);font-weight:600}
@media (max-width:960px){.vr .art{grid-template-columns:minmax(0,1fr)}.vr .toc{display:none}}
.vr .body{font-size:1.075rem;line-height:1.72;min-width:0}
.vr .body p{margin-top:1.15rem;color:color-mix(in oklab,var(--ink) 88%,var(--muted))}
.vr .body p:first-child{margin-top:0}
.vr .body h2{font-size:clamp(1.5rem,2.3vw,1.9rem);font-weight:650;margin-top:3rem;letter-spacing:-.025em}
.vr .body h3{font-size:1.15rem;font-weight:650;margin-top:2rem;letter-spacing:-.015em}
.vr .body strong{font-weight:650;color:var(--ink)}
.vr .body .lead-term{font-weight:650;color:var(--ink)}
.vr .body a{color:var(--accent-ink);font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}
.vr .callout{margin-top:2rem;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-surface);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.vr .callout .scan{margin-top:1rem;max-width:none}
.vr .callout h3{margin-top:0!important;font-size:1.15rem}
.vr .callout p{margin-top:.4rem!important;color:var(--muted)!important;font-size:15px}
.vr .tiers3{margin-top:1.4rem;display:grid;gap:8px}
.vr .tr3{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.vr .tr3 .n{font:700 13px/1 var(--f-mono);color:var(--on-accent);background:var(--accent);border-radius:8px;width:30px;height:30px;display:grid;place-items:center}
.vr .tr3:nth-child(2) .n{background:color-mix(in oklab,var(--accent) 60%,var(--surface))}
.vr .tr3:nth-child(3) .n{background:var(--accent-soft);color:var(--accent-ink)}
.vr .tr3 p{margin-top:0!important;font-size:15.5px}
.vr .metrics4{margin-top:1.4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vr .m4{padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.vr .m4 b{display:block;font-weight:650;font-size:15.5px}
.vr .m4 p{margin-top:.35rem!important;font-size:14.5px;line-height:1.55;color:var(--muted)!important}
.vr .m4 .tag{margin-bottom:.5rem}
@media (max-width:560px){.vr .metrics4{grid-template-columns:1fr}}
.vr .body .faq{margin-top:1.2rem}
.vr .body .faq p{margin-top:0}
.vr .related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.vr .related{grid-template-columns:1fr}}

.vr /* ---------- motion switches ---------- */
.motion-off *,.motion-off .vr *::before,.motion-off .vr *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){
  .vr .pause{display:none}
  .vr *,.vr *::before,.vr *::after{animation:none !important;transition:none !important}
  .vr .track{width:auto;flex-wrap:wrap}
  .vr .ticker{mask-image:none}
  .vr .ticker.rev{display:none}
}

.vr /* ================= CITY HERO (home) ================= */
/* A tall section with a sticky stage: scrolling through it moves the camera,.vr the page stays put. */
.city{position:relative;height:560vh;background:linear-gradient(180deg,var(--bg),color-mix(in oklab,var(--accent) 5%,var(--bg)) 70%,var(--bg))}
.vr .ch-stick{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));height:calc(100svh - 64px);overflow:hidden}
.vr .ch-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vr .ch-copy{position:relative;height:100%;display:flex;align-items:center;pointer-events:none}
.vr /* a soft veil keeps the copy readable when the camera brings the city close */
.ch-stick::before{content:"";position:absolute;inset:0 auto 0 0;width:min(760px,56%);z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0,color-mix(in oklab,var(--bg) 92%,transparent) 55%,transparent)}
.vr .ch-copy,.vr .ch-rail{z-index:2}
.vr .ch-text{width:min(470px,40%);pointer-events:auto}
.vr .ch-text h1{font-size:clamp(2.2rem,3.7vw,3.5rem);font-weight:700}
.vr .ch-steps{position:relative;margin-top:1.6rem;display:grid}
.vr /* steps wipe and slide: the clip hides the waiting copy,.vr so nothing ever animates from opacity 0 */
.ch-step{grid-area:1/1}
.vr .ch-step>div{transition:transform .7s var(--ease),clip-path .7s var(--ease)}
.vr .ch-step[data-state="next"]>div{transform:translateY(44px);clip-path:inset(0 0 100% 0)}
.vr .ch-step[data-state="past"]>div{transform:translateY(-44px);clip-path:inset(100% 0 0 0)}
.vr .ch-step[data-state="now"]>div{transform:none;clip-path:inset(0 0 0 0)}
.vr .ch-step h2{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:650;letter-spacing:-.025em}
.vr .ch-step p{margin-top:.6rem;color:var(--muted);font-size:1.02rem;max-width:40ch}
.vr .ch-step .big{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:700}
.vr .ch-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.vr .ch-rail{position:absolute;right:clamp(16px,2.4vw,32px);top:50%;transform:translateY(-50%);display:grid;gap:4px;z-index:3}
.vr .ch-rail button{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;border:0;background:transparent;cursor:pointer;
  font:500 12px/1 var(--f-mono);color:var(--muted);padding:.45rem 0;min-height:32px}
.vr .ch-rail button i{width:18px;height:2px;border-radius:2px;background:var(--line);transition:width .35s var(--ease),background-color .3s}
.vr .ch-rail button[aria-current="step"]{color:var(--ink)}
.vr .ch-rail button[aria-current="step"] i{width:34px;background:var(--accent-ink)}
.vr .ch-cap{position:absolute;left:clamp(16px,4vw,40px);bottom:18px;font:500 12px/1 var(--f-mono);color:var(--muted);z-index:2;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.vr .ch-cap .lg{display:inline-flex;align-items:center;gap:.35rem}
.vr .ch-cap .lg i{width:10px;height:10px;border-radius:2px;display:inline-block}
.vr .ch-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:500 12px/1 var(--f-mono);color:var(--muted);display:flex;align-items:center;gap:.5rem}
.vr .ch-scroll i{width:1px;height:22px;background:var(--muted);transform-origin:top;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2)}60%{transform:scaleY(1)}100%{transform:scaleY(.2) translateY(22px)}}
.vr .city[data-act]:not([data-act="0"]) .ch-scroll{visibility:hidden}
.vr .ch-tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.vr .ch-tag{position:absolute;left:0;top:0;display:grid;transform-origin:0 100%;gap:.15rem;padding:.45rem .6rem .5rem;border-radius:10px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap;margin:-64px 0 0 -12px;
  clip-path:inset(-200px -40px -200px 0);transition:clip-path .45s var(--ease)}
.vr .ch-tag{translate:calc(var(--nudge,0px) * -1) 0}
.vr .ch-tag::after{content:"";position:absolute;left:calc(12px + var(--nudge,0px));top:100%;width:1px;height:var(--lead,20px);background:var(--ink)}
.vr .ch-tag::before{content:"";position:absolute;left:calc(9px + var(--nudge,0px));top:calc(100% + var(--lead,20px) - 2px);width:7px;height:7px;border-radius:50%;background:var(--ink)}
.vr .ch-tag b{font:600 13px/1.1 var(--f-body)}
.vr .ch-tag span{font:500 11px/1.2 var(--f-mono);color:var(--muted)}
.vr .ch-tag[data-on="0"]{clip-path:inset(-200px 100% -200px 0);visibility:hidden}
.vr /* on the plan,.vr tags become drafting annotations: small paper chips with a short leader */
.ch-tag.plan{background:color-mix(in oklab,var(--surface) 94%,transparent);box-shadow:none;border-radius:6px;padding:.3rem .45rem .32rem;margin:-48px 0 0 -12px;gap:.1rem}
.vr .ch-tag.plan b{font:600 10.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.vr .ch-tag.plan span{font-size:10px}
.vr .ch-tip{position:absolute;left:0;top:0;z-index:4;pointer-events:none;background:var(--ink);color:var(--surface);border-radius:10px;padding:.5rem .65rem;display:grid;gap:.15rem;white-space:nowrap}
.vr .ch-tip b{font:600 13px/1.1 var(--f-body)}
.vr .ch-tip span{font:500 11px/1.2 var(--f-mono);color:var(--field-muted)}
.vr .ch-plan{position:absolute;right:clamp(70px,8vw,120px);bottom:22px;z-index:2;display:flex;gap:1rem;align-items:center;font:500 11px/1 var(--f-mono);color:var(--muted);
  transform:translateY(160%);transition:transform .6s var(--ease)}
.vr .city[data-act="4"] .ch-plan{transform:none}
.vr .ch-plan .scale{display:flex;align-items:center;gap:.4rem}
.vr .ch-plan .scale i{width:46px;height:6px;border:1.5px solid var(--ink);border-top:0}
.vr .ch-plan .north{display:inline-grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;font-weight:700;color:var(--ink)}
@media (max-width:760px){
  .vr .city{height:480vh}
  .vr .ch-copy{align-items:flex-end;padding-bottom:20px}
  .vr .ch-text{width:100%;background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-surface);padding:16px}
  .vr .ch-text h1{font-size:1.75rem}
  .vr .ch-steps{margin-top:.9rem}
  .vr .ch-step p{font-size:.95rem}
  .vr .ch-acts{margin-top:1rem}.vr .ch-acts .btn{min-height:42px;padding:.6rem 1rem;font-size:14px}
  .vr .ch-rail,.vr .ch-cap,.vr .ch-scroll,.vr .ch-plan,.vr .ch-stick::before{display:none}
  .vr .ch-tag{margin:-56px 0 0 -10px}.vr .ch-tag b{font-size:12px}.vr .ch-tag span{display:none}.vr .ch-tag.plan b{font-size:9.5px;letter-spacing:.04em}
}
@media (prefers-reduced-motion: reduce){.vr .city{height:auto}.vr .ch-stick{position:relative;top:0;height:86svh}}

.vr /* ---------- home: same city,.vr two ways ---------- */
.ways{padding-block:clamp(48px,6vw,80px) clamp(44px,5vw,72px)}
.vr .ways-head{display:grid;gap:.4rem;max-width:760px;margin-bottom:clamp(20px,2.6vw,32px)}
.vr .ways-tabs{display:none}
.vr .ways-split{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
.vr .way{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;min-width:0;
  box-shadow:0 1px 0 rgba(11,28,44,.03),0 18px 40px -28px rgba(11,40,56,.28);transition:transform .7s var(--ease),box-shadow .3s}
.vr .way:hover{box-shadow:0 1px 0 rgba(11,28,44,.03),0 26px 50px -26px rgba(11,40,56,.36)}
.vr .way-fig{position:relative;margin:10px 10px 0;border-radius:14px;overflow:hidden;background:#EEF4F5;box-shadow:inset 0 0 0 1px rgba(11,28,44,.06)}
.vr .way-map{display:block;width:100%;height:auto}
.vr .way-hud{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:.5rem;padding:.38rem .5rem .38rem .65rem;border-radius:10px;
  background:rgba(255,255,255,.94);box-shadow:0 6px 18px -8px rgba(11,40,56,.35),0 0 0 1px rgba(11,28,44,.06);font:500 11px/1 var(--f-mono);color:var(--muted)}
.vr .hud-g{display:grid;place-items:center;width:24px;height:22px;border-radius:6px;color:#fff;font:700 13px/1 var(--f-mono);transition:background-color .4s}
.vr .hud-m{width:54px;height:5px;border-radius:3px;background:var(--sunk);overflow:hidden}
.vr .hud-m i{display:block;height:100%;width:100%;background:var(--accent);border-radius:inherit;transform:scaleX(var(--k,0));transform-origin:left;transition:transform .5s var(--ease)}
.vr .hud-n{min-width:9ch;color:var(--ink)}
.vr .hud-v{font:600 11px/1 var(--f-mono);color:var(--ink);text-transform:uppercase;letter-spacing:.05em;min-width:15ch}
.vr .way-body{display:flex;flex-direction:column;gap:.55rem;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px) clamp(18px,2vw,24px);flex:1}
.vr .way-body .h-m{font-size:clamp(1.3rem,1.9vw,1.7rem)}
.vr .way-meta{font:500 12px/1.3 var(--f-mono);color:var(--accent-ink) !important}
.vr .way-tag{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;font:500 12px/1 var(--f-mono);color:var(--accent-ink);
  padding:.42rem .65rem;border-radius:999px;background:var(--accent-soft)}
.vr .way-tag svg{width:14px;height:14px}
.vr .way[data-way="traffic"] .way-tag{color:var(--ink);background:var(--sunk)}
.vr .way-body p{color:var(--muted);max-width:46ch}
.vr .way-pts{list-style:none;display:grid;gap:.45rem;margin:.1rem 0 .3rem;padding:0}
.vr .way-pts li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem}
.vr .way-pts svg{width:18px;height:18px;flex:none;margin-top:.12rem;color:var(--accent-ink)}
.vr .way .acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;padding-top:.3rem}
.vr .way[data-way="roads"].pre{transform:translateX(-22px)}
.vr .way[data-way="traffic"].pre{transform:translateX(22px)}
.vr .ways-seam{position:relative;display:grid;place-items:center}
.vr .ways-seam::before{content:"";position:absolute;top:10%;bottom:10%;left:50%;width:1px;background:repeating-linear-gradient(var(--line) 0 6px,transparent 6px 12px)}
.vr .ways-seam span{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  font:500 11px/1 var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.vr .ways-bridge{display:flex;gap:.7rem;align-items:flex-start;margin:clamp(14px,1.8vw,20px) auto 0;max-width:720px;padding:1rem 1.2rem;border-radius:var(--r-surface);
  background:var(--accent-soft);color:var(--ink);transition:transform .7s var(--ease)}
.vr .ways-bridge svg{width:22px;height:22px;flex:none;color:var(--accent-ink);margin-top:.05rem}
.vr .ways-bridge b{font-weight:650}
.vr .ways-bridge.pre,.vr .ways-head.pre{transform:translateY(18px)}
.vr /* map pieces,.vr drawn in the hero's plan palette */
.way-map .wm-road{fill:#DCE5E8}
.vr .way-map .wm-dash{stroke:#fff;stroke-width:.9;stroke-dasharray:3 3;fill:none}
.vr .way-map .wm-fix{stroke:var(--accent);stroke-width:9;stroke-linecap:butt;fill:none;opacity:.55}
.vr .way-map .wm-van rect{fill:var(--ink);stroke:#fff;stroke-width:1.2}
.vr .way-map .wm-van .roof{fill:var(--accent);stroke:none}
.vr .way-map .wm-ppl{fill:rgba(11,28,44,.55)}
.vr .way-map .wm-ppl.acc{fill:var(--accent)}
.vr .way-map .jr{stroke:#00747C;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vr .way-map .jr-case{stroke:#fff;stroke-width:7.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vr .way-map .stop circle{fill:var(--ink);stroke:#fff;stroke-width:2}
.vr .way-map .stop text{font:700 8.5px var(--f-mono);fill:#fff;text-anchor:middle;dominant-baseline:central}
.vr .way-map .walker{fill:#00C2CB;stroke:#fff;stroke-width:1.6}
.vr .way-map .walker-halo{fill:rgba(0,194,203,.22)}
@media (max-width:860px){
  .vr .ways-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
    position:sticky;top:72px;z-index:3;box-shadow:0 8px 20px -14px rgba(11,40,56,.4)}
  .vr .ways-tabs button{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;border:0;border-radius:999px;background:none;color:var(--muted);
    font:600 14px/1 var(--f-body);cursor:pointer;transition:background-color .25s,color .25s}
  .vr .ways-tabs button svg{width:17px;height:17px}
  .vr .ways-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
  .vr .ways-split{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(clamp(16px,4vw,40px) * -1);padding:4px clamp(16px,4vw,40px) 18px;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .vr .ways-split::-webkit-scrollbar{display:none}
  .vr .way{flex:0 0 88%;scroll-snap-align:center}
  .vr .ways-seam{display:none}
  .vr .way[data-way="roads"].pre,.vr .way[data-way="traffic"].pre{transform:translateY(18px)}
  .vr .way-body{gap:.6rem}
  .vr .way-tag{display:none}
  .vr .way .acts .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.vr .way,.vr .ways-bridge,.vr .hud-m i{transition:none}}

.vr /* ---------- services: hero that makes promises,.vr then the first 30 days ---------- */
.svh{padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,88px)}
.vr .svh .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.vr .svh h1{font-size:clamp(2.3rem,4vw,3.5rem);font-weight:700;line-height:1.04;letter-spacing:-.02em;max-width:15ch}
.vr .svh h1 span{display:block;color:var(--accent-ink)}
.vr .svh .acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.vr .svh-promise{list-style:none;display:grid;gap:.85rem;margin:2rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);max-width:52ch}
.vr .svh-promise li{display:flex;gap:.75rem;align-items:flex-start;color:var(--muted);font-size:.97rem}
.vr .svh-promise b{color:var(--ink);font-weight:650}
.vr .svh-promise svg{width:22px;height:22px;flex:none;color:var(--accent-ink);margin-top:.05rem}
.vr .svh-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:clamp(18px,2.2vw,26px);position:relative;overflow:hidden}
.vr .svh-card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.vr .svh-card h2{font:600 13px/1 var(--f-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.vr .svh-day{font:700 12px/1 var(--f-mono);color:var(--on-accent);background:var(--accent);padding:.38rem .6rem;border-radius:999px}
.vr .svh-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:4px}
.vr .svh-steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--sunk);border-radius:2px}
.vr .svh-steps::after{content:"";position:absolute;left:21px;top:22px;width:2px;height:var(--fill,0px);background:var(--accent);border-radius:2px;transition:height .6s var(--ease)}
.vr .svh-steps li{position:relative;border-radius:14px;transition:background-color .35s}
.vr .svh-steps li.on{background:var(--accent-soft)}
.vr .svh-steps button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center;
  padding:.65rem .7rem .65rem 0;cursor:pointer;border-radius:14px}
.vr .svh-steps button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.vr .svh-steps .ic{grid-row:1/3;position:relative;z-index:1;justify-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line);color:var(--muted);transition:background-color .35s,border-color .35s,color .35s}
.vr .svh-steps .ic svg{width:17px;height:17px}
.vr .svh-steps li.done .ic{border-color:var(--accent);color:var(--accent-ink)}
.vr .svh-steps li.on .ic{background:var(--ink);border-color:var(--ink);color:#fff}
.vr .svh-steps .when{font:500 11.5px/1 var(--f-mono);color:var(--muted);margin-bottom:.3rem}
.vr .svh-steps b{font-size:1.02rem;font-weight:650;line-height:1.25}
.vr .svh-steps p{max-height:0;margin:0;padding:0 1rem 0 calc(44px + .6rem);color:var(--muted);font-size:.93rem;line-height:1.5;overflow:hidden;
  transition:max-height .5s var(--ease),padding .5s var(--ease)}
.vr .svh-steps li.on p{max-height:9em;padding-bottom:.9rem}
.vr .svh-card footer{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line);font:500 12px/1.3 var(--f-mono);color:var(--muted)}
.vr .svh-card footer svg{width:16px;height:16px;color:var(--accent-ink)}
.vr .svc-rhythm{background:var(--surface);border-block:1px solid var(--line)}
.vr .svc-rhythm .week{max-width:1000px;box-shadow:none}
.vr .svc-rhythm .week-grid{grid-template-columns:minmax(180px,1.8fr) repeat(7,minmax(0,1fr))}
.vr .oath{list-style:none;display:grid;gap:.7rem;margin:1.6rem 0 0;padding:0}
.vr .oath li{display:flex;gap:.65rem;align-items:flex-start;font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--ink)}
.vr .oath svg{width:22px;height:22px;flex:none;color:var(--accent-ink);margin-top:.02rem}
@media (max-width:960px){.vr .svh .wrap{grid-template-columns:1fr}.vr .svh h1{max-width:18ch}}
@media (max-width:620px){
  .vr .svc-rhythm .week-grid{grid-template-columns:minmax(0,1.3fr) repeat(7,minmax(0,1fr))}
  .vr .svh-steps p{padding-right:.6rem}
}
@media (prefers-reduced-motion:reduce){.vr .svh-steps p,.vr .svh-steps::after,.vr .svh-steps li,.vr .svh-steps .ic{transition:none}}

.vr /* ---------- pricing: the trial first,.vr the plans after ---------- */
.prh{padding-block:clamp(32px,5vw,72px) clamp(24px,3vw,40px)}
.vr .prh .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center}
.vr .prh h1{font-size:clamp(2.4rem,4.4vw,3.8rem);font-weight:700;line-height:1.02;letter-spacing:-.02em}
.vr .prh h1 span{display:block;color:var(--accent-ink)}
.vr .prh .acts{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:1.6rem}
.vr .prh-safe{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0}
.vr .prh-safe li{display:inline-flex;align-items:center;gap:.4rem;font:500 12.5px/1 var(--f-mono);color:var(--ink);padding:.5rem .7rem;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.vr .prh-safe svg{width:15px;height:15px;color:var(--accent-ink)}
.vr .trialcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:clamp(18px,2.2vw,26px)}
.vr .trialcard header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.vr .tc-l{font:600 13px/1 var(--f-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.vr .tc-day{font:700 12px/1 var(--f-mono);color:var(--on-accent);background:var(--accent);padding:.38rem .6rem;border-radius:999px;min-width:13ch;text-align:center}
.vr .tc-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.vr .tc-grid i{position:relative;aspect-ratio:1;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;font:600 12px/1 var(--f-mono);font-style:normal;color:var(--accent-ink);
  transition:background-color .3s,color .3s,transform .3s var(--ease)}
.vr .tc-grid i.past{background:color-mix(in oklab,var(--accent) 55%,var(--accent-soft));color:var(--on-accent)}
.vr .tc-grid i.now{background:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:0 10px 18px -10px rgba(11,28,44,.6)}
.vr .tc-grid i.free{background:var(--sunk);color:var(--muted);font-size:10.5px}
.vr .tc-grid i.free.now{background:var(--ink);color:#fff}
.vr .tc-phases{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:4px}
.vr .tc-phases li{display:grid;grid-template-columns:8.5ch 1fr;gap:.8rem;align-items:baseline;padding:.6rem .7rem;border-radius:12px;transition:background-color .3s}
.vr .tc-phases li.on{background:var(--accent-soft)}
.vr .tc-phases b{font:600 12px/1.3 var(--f-mono);color:var(--ink)}
.vr .tc-phases span{color:var(--muted);font-size:.93rem;line-height:1.45}
.vr .tc-phases li.on span{color:var(--ink)}
.vr .plans-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.vr .plans-head .sub{max-width:56ch}
@media (max-width:960px){.vr .prh .wrap{grid-template-columns:1fr}}
@media (max-width:460px){.vr .tc-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.vr .tc-phases li{grid-template-columns:1fr;gap:.2rem}}
@media (prefers-reduced-motion:reduce){.vr .tc-grid i,.vr .tc-phases li{transition:none}}

.vr /* ---------- about: the origin in three frames,.vr then numbers we can defend ---------- */
.abh{padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,88px)}
.vr .abh .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.vr .abh h1{font-size:clamp(2.3rem,4vw,3.5rem);font-weight:700;line-height:1.04;letter-spacing:-.02em;max-width:16ch}
.vr .abh h1 span{color:var(--accent-ink)}
.vr .abh .acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.vr .origin{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:12px 12px clamp(16px,2vw,22px)}
.vr .origin .way-fig{margin:10px 0 0}
.vr .story-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 2px 0}
.vr .story-bars button{all:unset;cursor:pointer;height:16px;display:flex;align-items:center}
.vr .story-bars button i{position:relative;display:block;width:100%;height:4px;border-radius:2px;background:var(--sunk);overflow:hidden}
.vr .story-bars button i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left}
.vr .story-bars button:focus-visible i{outline:2px solid var(--accent-ink);outline-offset:3px}
.vr .story-cap{display:grid;padding:16px 10px 0}
.vr .story-cap > div{grid-area:1/1;transition:transform .5s var(--ease),clip-path .5s var(--ease);clip-path:inset(0 0 0 0)}
.vr .story-cap > div:not(.on){visibility:hidden;transform:translateX(14px);clip-path:inset(0 100% 0 0)}
.vr .story-cap .when{font:500 11.5px/1 var(--f-mono);color:var(--accent-ink)}
.vr .story-cap b{display:block;font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:650;margin:.45rem 0 .35rem;line-height:1.2}
.vr .story-cap p{color:var(--muted);font-size:.96rem;max-width:46ch}
.vr .facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.vr .fact{display:grid;gap:.5rem;padding:clamp(20px,2.6vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.vr .fact b{font:600 clamp(2.2rem,4vw,3.4rem)/1 var(--f-mono);letter-spacing:-.03em;color:var(--ink)}
.vr .fact span{color:var(--muted);max-width:26ch}
.vr .fact::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.vr .fact:hover::after{transform:scaleX(1)}
@media (max-width:960px){.vr .abh .wrap{grid-template-columns:1fr}}
@media (max-width:640px){.vr .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vr .fact{padding:18px 14px}}
@media (prefers-reduced-motion:reduce){.vr .story-cap > div,.vr .fact::after{transition:none}}

.vr /* ---------- contact: the form is the hero ---------- */
.cth{padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,88px)}
.vr .cth .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.vr .cth h1{font-size:clamp(2.3rem,4vw,3.5rem);font-weight:700;line-height:1.04;letter-spacing:-.02em;max-width:15ch}
.vr .cth h1 span{display:block;color:var(--accent-ink)}
.vr .ct-next{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:4px;position:relative;max-width:460px}
.vr .ct-next::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.vr .ct-next li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:.6rem;align-items:center;padding:.55rem .7rem .55rem 0;border-radius:14px;transition:background-color .35s}
.vr .ct-next li > svg{position:relative;z-index:1;justify-self:center;width:36px;height:36px;padding:8px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);color:var(--muted);
  transition:background-color .35s,border-color .35s,color .35s}
.vr .ct-next li.past > svg{border-color:var(--accent);color:var(--accent-ink)}
.vr .ct-next li.on{background:var(--accent-soft)}
.vr .ct-next li.on > svg{background:var(--ink);border-color:var(--ink);color:#fff}
.vr .ct-next b{display:block;font-weight:650}
.vr .ct-next span{color:var(--muted);font-size:.93rem}
.vr .ct-direct{display:grid;gap:.5rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line);max-width:460px}
.vr .ct-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.vr .ct-row > svg{width:20px;height:20px;color:var(--accent-ink)}
.vr .ct-row .mail{font-weight:600}
.vr .ct-form{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:clamp(20px,2.6vw,30px)}
.vr .ct-form-h{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;padding-bottom:.9rem;border-bottom:1px dashed var(--line)}
.vr .ct-form-h b{font-size:1.15rem;font-weight:650}
.vr .ct-form-h span{font:500 11.5px/1.3 var(--f-mono);color:var(--muted)}
@media (max-width:960px){.vr .cth .wrap{display:flex;flex-direction:column;gap:0}.vr .cth-copy{display:contents}.vr .ct-form{order:1;margin-top:1.6rem}.vr .ct-next{order:2}.vr .ct-direct{order:3}}
@media (prefers-reduced-motion:reduce){.vr .ct-next li,.vr .ct-next li > svg{transition:none}}

.vr .steps-h{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.01em;margin:0 0 .8rem 1.1rem}
.vr .fmsgwrap:empty{display:none}

/* ===========================================================
   Astra reconciliation for the kinetic design. Every rule exists
   because the theme fought the design; see the verintra-wordpress
   skill for the history of each one.
   =========================================================== */
html{font-size:100%}
@media (max-width:921px){html{font-size:100%}}
/* the prototype's preview wrapper carried this; without it the mobile menu sheet renders open */
.vr [hidden]{display:none !important}
body.vr{margin:0}
.vr-page .site-content .ast-container{max-width:none;padding-left:0;padding-right:0;display:block}
.vr-page #primary,.vr-page.ast-separate-container #primary{margin:0;padding:0;width:100%;max-width:none}
.vr-page .ast-article-single,.vr-page.ast-separate-container .ast-article-single{padding:0;margin:0;background:transparent;border:0;box-shadow:none}
.vr-page .entry-header,.vr-page .entry-meta,.vr-page .ast-single-post-order,.vr-page .post-navigation{display:none}
.vr-page .entry-content,.vr-page .entry-content > *{margin:0}
.vr-page .entry-content{max-width:none}
.vr-page .site-content{padding:0}
.vr-page .entry-content table,.vr-page .entry-content th,.vr-page .entry-content td{border:0;background:transparent}
.vr-page a,.vr .top a,.vr .foot a,.vr .sheet a{text-decoration:none}
/* Astra styles bare buttons with uppercase, letter-spacing and its own colours */
.vr .btn,.vr button{text-transform:none;letter-spacing:normal}
/* the header is ours; Astra's sticky/transparent header wrappers must not add a strip */
.vr #masthead,.vr .ast-above-header-wrap,.vr .ast-below-header-wrap{display:none}

/* ===========================================================
   Carried from verintra-child, unchanged: the blog, the contact
   result banner, the honeypot, the cookie notice and the language
   switch. Their old variable names are mapped onto the new tokens
   here, so the tuned layouts keep working in the new colours.
   =========================================================== */
.vr{--white:#fff;--light:var(--sunk);--hair:var(--line);--navy:var(--ink);--turq:var(--accent);--turq-d:var(--accent-ink);
  --teal:#01577E;--cyan:#3DB3D1;--ai:#7C4DEF;--sans:var(--f-body);--mono:var(--f-mono);--r:10px;--r-card:16px;--wrap:1200px;
  --sh:0 1px 3px rgba(11,28,44,.08),0 1px 2px -1px rgba(11,28,44,.06);--sh-md:0 6px 18px -4px rgba(11,28,44,.12);
  --sh-lg:0 18px 44px -12px rgba(11,28,44,.20);--sh-xl:0 34px 80px -22px rgba(11,28,44,.30);
  --t1:150ms;--t2:200ms;--t3:300ms;--track:-.02em;--track-meta:.12em}
/* ---------- language switch ---------------------------------------------
   Both languages always show, even where a page has no counterpart: a control
   that appears and disappears between pages is worse than one that takes you to
   the other language's home. aria-current marks which one you are reading. */
.langsw{display:flex;align-items:center;gap:2px;margin-left:18px;flex:none;
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px;background:#fff}
.langsw a{padding:5px 11px;border-radius:var(--r-pill);font-family:var(--mono);
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-decoration:none;transition:background var(--t2) var(--ease),color var(--t2) var(--ease)}
.langsw a:hover{color:var(--navy);background:var(--light)}
.langsw a[aria-current]{background:var(--navy);color:#fff}


/* ---------- language chip on a blog card -------------------------------
   Only English posts carry one: the blog is Turkish by default, so a chip on
   every Turkish card would repeat what the other twelve already establish. The
   point is to flag the exception before someone clicks it. */
.langchip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(61,179,209,.14);border:1px solid rgba(61,179,209,.32);
  font-family:var(--mono);font-size:.625rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal);vertical-align:middle}

/* ---------- contact form: result banner and honeypot --------------------
   The banner text is chosen in PHP from a fixed map, so nothing a visitor
   typed is ever reflected into the page. The wrapper collapses when empty so
   the prototype, where PHP never runs, shows no dead space. */
.fmsgwrap{margin:0 0 22px}
.fmsgwrap:empty{display:none;margin:0}
.fmsg{margin:0;padding:13px 16px;border-radius:var(--r);border:1px solid;
  font-size:.9375rem;line-height:1.55}
.fmsg--ok{background:rgba(0,166,81,.08);border-color:rgba(0,166,81,.34);color:#0A5C34}
.fmsg--bad{background:rgba(231,76,60,.07);border-color:rgba(231,76,60,.32);color:#8A2318}

/* The honeypot row. Visually hidden with the clip pattern rather than
   display:none or visibility:hidden, both of which form fillers skip: the whole
   point is that automation fills it in and a person never reaches it. No
   opacity, because the build asserts no stylesheet sets opacity:0 outside the
   two intentional cases, and no off-page left offset, which can widen the page. */
.hp{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- cookie notice ---------------------------------------------------
   The markup is a Code Snippets snippet whose consent logic we do not touch; it
   shows the banner with display:block, hides it with display:none and animates
   through .fade-out, so those three are honoured here. It used to be a
   full-width dark bar with a gradient button and an emoji, styled entirely
   inline, which meant CSS could not touch it and it fought the light design. */
#cookie-banner{position:fixed;left:22px;right:22px;bottom:22px;z-index:150;display:none;
  transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
#cookie-banner.fade-out{opacity:0;transform:translateY(14px)}
.vrck-card{position:relative;max-width:452px;background:#fff;border:1px solid var(--hair);
  border-radius:18px;box-shadow:var(--sh-xl);padding:22px 24px 20px}
.vrck-t{font-size:.9375rem;font-weight:700;color:var(--navy);margin:0 0 7px}
.vrck-b{font-size:.8125rem;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:44ch}
.vrck-b a{color:var(--turq-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.vrck-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vrck-no{background:none;border:0;padding:8px 4px;cursor:pointer;font-family:var(--sans);
  font-size:.8125rem;font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:normal;
  transition:color var(--t2) var(--ease)}
.vrck-no:hover{color:var(--navy)}
.vrck-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;background:none;
  cursor:pointer;color:#9AA6B2;display:grid;place-items:center;padding:0;border-radius:8px;
  transition:color var(--t2) var(--ease),background var(--t2) var(--ease)}
.vrck-x:hover{color:var(--navy);background:var(--light)}
.vrck-x svg{width:14px;height:14px}
@media (max-width:600px){
  /* Measured on the live site at 390x844: this card is 218px tall, 26% of the
     screen, and it sits over every scroll position until it is dismissed. It is
     a consent notice, so it has to be legible and it has to stay until answered,
     but a quarter of a phone is more than it needs. Tighter type and padding buy
     back about a fifth of it without touching the wording, which is legal copy. */
  #cookie-banner{left:14px;right:14px;bottom:14px}
  .vrck-card{max-width:none;padding:16px 16px 14px}
  .vrck-t{font-size:.875rem;margin:0 0 5px}
  .vrck-b{font-size:.75rem;line-height:1.5;margin:0 0 12px}
  .vrck-a .btn{width:auto}
}


/* ===========================================================
   BLOG
   Scoped to .vr-blog, which functions.php adds to the posts
   page, single posts and the term archives. The six designed
   pages carry .vr-page and are untouched by everything below.

   The old .page-id-472 block that used to sit here is gone
   with the page it patched: 472 was a Spectra hero from the
   dark round and is now the posts page, whose content
   WordPress never renders.
   =========================================================== */

/* ---------- archive header ------------------------------------------------
   The archive had no <h1> at all, so it opened straight onto the card grid.  */
.vr-blog .bh{max-width:var(--wrap);margin:0 auto;padding:56px 24px 40px}
.bh-eyebrow{font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--turq-d);margin:0 0 14px}
.bh-t{font-family:var(--sans);font-size:clamp(2rem,4.2vw,3rem);line-height:1.06;
  letter-spacing:-.03em;font-weight:800;color:var(--navy);margin:0 0 16px;
  text-wrap:balance;max-width:24ch}
.bh-lead{font-size:1.0625rem;line-height:1.65;color:var(--muted);margin:0;max-width:62ch}

/* The category row is the archive's only means of narrowing, and every term in
   it has posts, so the counts are read from the terms rather than written. */
.bh-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.bh-cats a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--hair);border-radius:var(--r-pill);background:#fff;
  font-size:.8125rem;font-weight:600;color:var(--navy);text-decoration:none;
  transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease),
    transform var(--t2) var(--ease)}
.bh-cats a:hover{border-color:var(--turq);background:var(--light);transform:translateY(-1px)}
.bh-cats a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.bh-cats i{font-style:normal;font-family:var(--mono);font-size:.6875rem;
  color:var(--muted);font-weight:400}
.bh-cats a[aria-current] i{color:rgba(255,255,255,.62)}

/* ---------- the card grid ------------------------------------------------
   Astra Addon's blog-layout-1 markup, restyled. The layout was previously
   layout 6, which paints the featured image as the card BACKGROUND: white
   titles landed on a pale photograph and were unreadable.                   */
.vr-blog .site-main > .ast-row,
.vr-blog .ast-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  max-width:var(--wrap);margin:0 auto;padding:0 24px 8px}
.vr-blog .ast-article-post{margin:0;padding:0;border:0;background:none}
/* Astra Addon sizes the columns itself, emitting `width:33.33%` on the article
   through its dynamic stylesheet. Inside a grid track that is 33% OF THE TRACK,
   so every card rendered 126px wide inside a 377px column. The grid owns the
   column widths here, so the article must simply fill the one it is in. */
.vr-blog .ast-article-post{width:100% !important;max-width:none !important}

/* height:100% on both the article and the inner wrapper, then a column flex,
   is what makes a row of cards line up: the excerpts differ in length and
   without it each card was as tall as its own text. */
.vr-blog .ast-article-post,
.vr-blog .ast-article-post > .ast-article-inner{height:100%}
.vr-blog .ast-article-inner{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh);
  transition:transform var(--t3) var(--ease),box-shadow var(--t3) var(--ease),
    border-color var(--t3) var(--ease)}
.vr-blog .ast-article-inner:hover{transform:translateY(-3px);
  box-shadow:var(--sh-lg);border-color:#CFD9E2}
.vr-blog .ast-article-inner > .post-content{display:flex;flex-direction:column;
  flex:1 1 auto;padding:0}

.vr-blog .ast-blog-featured-section{margin:0}
.vr-blog .post-thumb-img-content{margin:0;overflow:hidden}
.vr-blog .post-thumb-img-content a{display:block}
.vr-blog .post-thumb-img-content img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:0;transition:transform 400ms var(--ease)}
.vr-blog .ast-article-inner:hover .post-thumb-img-content img{transform:scale(1.03)}

/* Astra prints the title before the meta, so the category chips are pulled
   above it with order rather than by moving markup. */
.vr-blog .ast-article-post .entry-title{order:2;margin:0;padding:0 22px;
  font-size:1.0625rem !important;line-height:1.36;letter-spacing:-.015em;
  font-weight:700}
.vr-blog .ast-article-post .entry-title a{color:var(--navy);text-decoration:none;
  transition:color var(--t2) var(--ease)}
.vr-blog .ast-article-inner:hover .entry-title a{color:var(--turq-d)}
.vr-blog .ast-article-post .entry-header{order:1;margin:0;padding:20px 22px 10px;
  border:0}
.vr-blog .ast-article-post .entry-meta{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.vr-blog .ast-article-post .entry-meta a{color:var(--turq-d);text-decoration:none;
  font-weight:600}
.vr-blog .ast-article-post .entry-meta a:hover{text-decoration:underline;
  text-underline-offset:2px}

.vr-blog .ast-excerpt-container{order:3;padding:10px 22px 0;flex:1 1 auto}
.vr-blog .ast-excerpt-container p{margin:0;font-size:.9375rem;line-height:1.62;
  color:var(--muted)}

/* margin-top:auto pins the action to the bottom of whatever height the card
   ends up at, which is the other half of making a row look aligned. */
.vr-blog .ast-read-more-container{order:4;margin:auto 0 0;padding:18px 22px 22px}
.vr-blog .ast-read-more-container a{display:inline-flex;align-items:center;gap:8px;
  font-size:.8125rem;font-weight:700;color:var(--turq-d);text-decoration:none}
.vr-blog .ast-read-more-container a::after{content:"\2192";
  transition:transform var(--t2) var(--ease)}
.vr-blog .ast-article-inner:hover .ast-read-more-container a::after{transform:translateX(4px)}
.vr-blog .ast-article-post .entry-content{display:none}

/* ---------- pagination --------------------------------------------------- */
.vr-blog .ast-pagination,.vr-blog .navigation.pagination{max-width:var(--wrap);
  margin:0 auto;padding:40px 24px 8px}
.vr-blog .navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:center}
.vr-blog .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;border:1px solid var(--hair);
  border-radius:var(--r-pill);background:#fff;font-size:.875rem;font-weight:600;
  color:var(--navy);text-decoration:none;
  transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease)}
.vr-blog a.page-numbers:hover{border-color:var(--turq);background:var(--light)}
.vr-blog .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.vr-blog .page-numbers .ast-right-arrow,.vr-blog .page-numbers .ast-left-arrow{
  margin:0 0 0 6px}

/* ---------- single post: one reading column ------------------------------
   Astra was told per post to hide the title and the featured image, so two
   posts had no <h1> at all. Both switches are cleared; this styles what the
   theme now prints.                                                          */
.vr-blog.single .ast-article-single{padding:0;border:0;background:none}
.vr-blog.single .site-main > article > .single-layout-1{max-width:840px;margin:0 auto;
  padding:0 24px}
.vr-blog.single .entry-header{margin:0;padding:44px 0 0;border:0;text-align:left}
.vr-blog.single .entry-header .entry-meta{font-family:var(--mono);font-size:.75rem;
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted);
  margin:0 0 14px}
.vr-blog.single .entry-header .entry-meta a{color:var(--turq-d);font-weight:600;
  text-decoration:none}
.vr-blog.single .entry-title{font-size:clamp(1.9rem,3.6vw,2.7rem) !important;
  line-height:1.09;letter-spacing:-.03em;font-weight:800;color:var(--navy);
  margin:0 0 18px;text-wrap:balance}
/* The source images are square or portrait, so at full column width the hero
   filled an entire screen before a single line of the article. Cropping to 16:9
   with a ceiling keeps it an illustration rather than a landing page. */
.vr-blog.single .post-thumb img{border-radius:var(--r-card);border:1px solid var(--hair);
  width:100%;aspect-ratio:16/9;max-height:400px;object-fit:cover}
.vr-blog.single .ast-single-post-featured-section{margin:6px 0 30px}
.vr-blog.single .ast-single-post-order{margin:0 0 26px}

/* breadcrumb */
.vr-blog .ast-breadcrumbs-wrapper{margin:0 0 22px}
.vr-blog .trail-items{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  list-style:none;font-size:.8125rem;color:var(--muted)}
.vr-blog .trail-items li::after{content:"/";margin-left:8px;color:#B9C4CF}
.vr-blog .trail-items li:last-child::after{content:none}
.vr-blog .trail-items a{color:var(--muted);text-decoration:none}
.vr-blog .trail-items a:hover{color:var(--turq-d);text-decoration:underline;
  text-underline-offset:2px}

/* ---------- prose ---------------------------------------------------------
   One measure for the whole article. 72ch keeps a line at a readable length
   while the code blocks and tables below are allowed to break out of it.     */
.vr-blog .entry-content{font-size:1.0625rem;line-height:1.75;color:var(--ink)}
.vr-blog .entry-content > p,
.vr-blog .entry-content > ul,
.vr-blog .entry-content > ol,
.vr-blog .entry-content > h2,
.vr-blog .entry-content > h3,
.vr-blog .entry-content > h4,
.vr-blog .entry-content > blockquote{max-width:72ch}
.vr-blog .entry-content p{margin:0 0 22px}
.vr-blog .entry-content h2{font-size:clamp(1.5rem,2.4vw,1.875rem) !important;
  line-height:1.18;letter-spacing:-.02em;font-weight:750;color:var(--navy);
  margin:52px 0 16px;text-wrap:balance}
.vr-blog .entry-content h3{font-size:1.1875rem !important;line-height:1.3;
  font-weight:700;color:var(--navy);margin:36px 0 12px}
.vr-blog .entry-content h4{font-size:1.0625rem !important;font-weight:700;
  color:var(--navy);margin:28px 0 10px}
.vr-blog .entry-content a{color:var(--turq-d);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.vr-blog .entry-content a:hover{text-decoration-thickness:2px}
.vr-blog .entry-content ul,.vr-blog .entry-content ol{margin:0 0 22px;padding-left:24px}
.vr-blog .entry-content li{margin:0 0 8px}
.vr-blog .entry-content strong{font-weight:700;color:var(--navy)}
.vr-blog .entry-content img{border-radius:var(--r-card);border:1px solid var(--hair);
  margin:8px 0 26px}
.vr-blog .entry-content hr{border:0;border-top:1px solid var(--hair);margin:44px 0}
.vr-blog .entry-content blockquote{margin:0 0 26px;padding:4px 0 4px 22px;
  border-left:3px solid var(--turq);font-size:1.125rem;line-height:1.6;
  color:var(--navy);font-style:normal}
.vr-blog .entry-content blockquote p:last-child{margin:0}

/* Wide content scrolls inside its own box so the page body never scrolls
   sideways. This is the rule the mobile pass keeps needing. */
.vr-blog .entry-content pre,.vr-blog .entry-content .code-block{overflow-x:auto}
.vr-blog .entry-content pre{background:var(--light);border:1px solid var(--hair);
  border-radius:var(--r);padding:18px 20px;margin:0 0 26px;
  font-family:var(--mono);font-size:.8125rem;line-height:1.6;color:var(--navy)}
.vr-blog .entry-content code{font-family:var(--mono);font-size:.875em;
  background:var(--light);border:1px solid var(--hair);border-radius:6px;
  padding:2px 6px;color:var(--teal)}
.vr-blog .entry-content pre code{background:none;border:0;padding:0;color:inherit}

/* Astra draws a full grid on .entry-content tables; the design uses horizontal
   hairlines. The wrapper is what stops a wide table widening the page. */
.vr-blog .entry-content table{width:100%;margin:0 0 26px;border-collapse:collapse;
  font-size:.9375rem;display:block;overflow-x:auto}
.vr-blog .entry-content th,.vr-blog .entry-content td{border:0;
  border-bottom:1px solid var(--hair);padding:11px 14px;text-align:left;
  background:transparent;vertical-align:top}
.vr-blog .entry-content thead th{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid #CFD9E2;white-space:nowrap}
.vr-blog .entry-content tr:last-child td{border-bottom:0}

/* ---------- the one article that was pasted as a whole HTML page ----------
   Post 1983 arrived as a complete document with its own 11 KB dark stylesheet.
   blog-unwrap.php strips the document chrome and that stylesheet but keeps the
   author's layout classes, which are styled here in the light palette so the
   structure survives without repainting the site.
   -------------------------------------------------------------------------- */
.vr-blog .lead-text{font-size:1.1875rem;line-height:1.68;color:var(--muted);
  max-width:68ch;margin:0 0 32px}
.vr-blog .content-section{margin:0 0 8px}
/* These carry .entry-content on purpose. The article's own headings are h2 and
   h4, so `.vr-blog .entry-content h2` (two classes plus a type) outranked a bare
   `.vr-blog .toc-title` even with !important on both, and the table of contents
   label rendered at 30px instead of 12px. Specificity, not the cascade order. */
.vr-blog .entry-content .section-title{font-size:clamp(1.5rem,2.4vw,1.875rem) !important;
  line-height:1.18;letter-spacing:-.02em;font-weight:750;color:var(--navy);
  margin:52px 0 16px}
.vr-blog .content-text{max-width:72ch}
.vr-blog .highlight-list li,.vr-blog .highlight-list{max-width:72ch}
.vr-blog .highlight-list{margin:0;padding-left:22px}
.vr-blog .highlight-list li{margin:0 0 10px}
.vr-blog .field-name{font-family:var(--mono);font-size:.875em;color:var(--teal)}
.vr-blog .code-inline{font-family:var(--mono);font-size:.875em;background:var(--light);
  border:1px solid var(--hair);border-radius:6px;padding:2px 6px;color:var(--teal)}

/* code block with its own label row */
.vr-blog .code-block{background:var(--light);border:1px solid var(--hair);
  border-radius:var(--r);margin:0 0 26px;overflow:hidden}
.vr-blog .code-header{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;background:#EDF2F6;border-bottom:1px solid var(--hair)}
.vr-blog .code-title{font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vr-blog .code-block pre{background:none;border:0;border-radius:0;margin:0}

/* callouts. Each keeps the meaning its emoji used to carry, in the border. */
.vr-blog .highlight-box,.vr-blog .info-box,.vr-blog .tip-box{
  border:1px solid var(--hair);border-left:3px solid var(--cyan);
  border-radius:var(--r);background:var(--light);padding:18px 20px;
  margin:0 0 26px;max-width:72ch}
.vr-blog .tip-box{border-left-color:var(--turq)}
.vr-blog .highlight-box{border-left-color:var(--ai)}
.vr-blog .info-text,.vr-blog .tip-text,.vr-blog .warning-text{margin:0;
  font-size:.9375rem;line-height:1.65}
.vr-blog .warning-text{color:#8A3A12}
.vr-blog .info-box:has(.warning-text){border-left-color:var(--gD)}

/* stats: a real figure and its label, so the tiles read as data */
.vr-blog .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin:0 0 30px}
.vr-blog .stats-card{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);padding:18px 20px}
.vr-blog .stats-title{font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.vr-blog .stats-value{font-size:1.0625rem;line-height:1.5;font-weight:700;
  color:var(--navy);margin:0;font-variant-numeric:tabular-nums}
.vr-blog .stats-item{margin:0 0 6px;font-size:.9375rem;line-height:1.55}

/* numbered steps: the number is the structure, so it stays visible */
.vr-blog .steps-list{list-style:none;margin:0 0 30px;padding:0;counter-reset:none}
.vr-blog .steps-list li{display:grid;grid-template-columns:32px 1fr;gap:14px;
  margin:0 0 16px;max-width:72ch}
.vr-blog .step-number{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-pill);background:var(--navy);
  color:#fff;font-family:var(--mono);font-size:.8125rem;font-weight:700}

.vr-blog .action-card{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);padding:18px 20px;margin:0 0 14px}
.vr-blog .entry-content .action-card-title{font-size:1rem !important;font-weight:700;
  color:var(--navy);margin:0 0 6px}
.vr-blog .action-card-text{margin:0;font-size:.9375rem;color:var(--muted)}
.vr-blog .action-icon{display:none}

/* the article's own table of contents */
.vr-blog .toc-box{background:var(--light);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:22px 24px;margin:0 0 36px;max-width:72ch}
.vr-blog .entry-content .toc-title{font-family:var(--mono);font-size:.75rem !important;
  font-weight:600;letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.vr-blog .toc-list{list-style:none;margin:0;padding:0;
  columns:2;column-gap:28px}
.vr-blog .toc-list li{margin:0 0 8px;break-inside:avoid}
/* Each entry used to carry a typed bullet character inside its link, which
   blog-unwrap.php removes; the marker is drawn here instead so it can be
   coloured and aligned. */
.vr-blog .toc-list a{display:inline-flex;gap:9px;font-size:.9375rem;color:var(--navy);
  text-decoration:none}
.vr-blog .toc-list a::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:.55em;
  border-radius:50%;background:var(--turq)}
.vr-blog .toc-list a:hover{color:var(--turq-d);text-decoration:underline;
  text-underline-offset:2px}
.vr-blog .data-table{width:100%}

/* ---------- previous/next and related ------------------------------------ */
.vr-blog .post-navigation{max-width:840px;margin:48px auto 0;padding:24px 24px 0;
  border-top:1px solid var(--hair)}
.vr-blog .post-navigation .nav-links{display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between}
.vr-blog .post-navigation a{font-size:.875rem;font-weight:600;color:var(--turq-d);
  text-decoration:none}
.vr-blog .post-navigation a:hover{text-decoration:underline;text-underline-offset:2px}

.vr-blog .ast-related-posts-wrapper{max-width:var(--wrap);margin:56px auto 0;
  padding:44px 24px 0;border-top:1px solid var(--hair)}
.vr-blog .ast-related-posts-title{font-size:1.375rem !important;font-weight:750;
  letter-spacing:-.02em;color:var(--navy);margin:0 0 24px}
.vr-blog .ast-related-post-content{padding:18px 20px}
.vr-blog .ast-related-posts-inner{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.vr-blog .ast-related-post{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);overflow:hidden;
  transition:transform var(--t3) var(--ease),box-shadow var(--t3) var(--ease)}
.vr-blog .ast-related-post:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.vr-blog .ast-related-post-featured-section img{width:100%;aspect-ratio:16/9;
  object-fit:cover}
.vr-blog .ast-related-post-title{font-size:1rem !important;line-height:1.36;
  font-weight:700;margin:0}
.vr-blog .ast-related-post-title a{color:var(--navy);text-decoration:none}

/* ---------- blog responsive ---------------------------------------------- */
@media (max-width:1000px){
  .vr-blog .ast-row{grid-template-columns:repeat(2,1fr);gap:22px}
  .vr-blog .toc-list{columns:1}
}
@media (max-width:680px){
  .vr-blog .ast-row{grid-template-columns:1fr;gap:18px}
  .vr-blog .bh{padding:36px 20px 28px}
  .vr-blog .ast-row,.vr-blog .navigation.pagination{padding-left:20px;padding-right:20px}
  .vr-blog.single .site-main > article > .single-layout-1{padding:0 20px}
  .vr-blog .entry-content{font-size:1rem}
  .vr-blog .stats-grid{grid-template-columns:1fr}
  .vr-blog .steps-list li{grid-template-columns:26px 1fr;gap:11px}
  .vr-blog .toc-box,.vr-blog .highlight-box,.vr-blog .info-box,
  .vr-blog .tip-box{padding:16px 18px}
}