/* Hi-Vis - marketing site styles. Signature: reflective tape on black asphalt - lime-and-silver stripes,
   expanded Archivo capitals and a tape band that sweeps past like headlights. Flat slabs, no offset shadows. */
:root{
  --asphalt:#121314; --asphalt-2:#1A1C1E; --asphalt-3:#25282B; --asphalt-4:#33373B;
  --yellow:#E6FF2E; --yellow-2:#D4EE12; --orange:#FF5B14; --orange-d:#C93F00;
  --silver:#C9CED4; --silver-l:#E9ECEF; --silver-d:#9AA1AA;
  --concrete:#DADDE1; --chalk:#F6F7F4; --white:#fff;
  --ink:#121314; --ink-2:#3B4046; --muted:#5C636B; --muted-d:#A6ACB3; --line:#DADDE1; --line-d:rgba(255,255,255,.12);
  --r:4px; --r-lg:6px; --r-btn:2px;
  --f:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* the reflective tape: lime edges (28% each) and a silver centre, as in the logo stripe */
  --tape:linear-gradient(180deg,var(--yellow) 0 28%,var(--silver) 28% 72%,var(--yellow) 72%);
  --tape-shine:linear-gradient(180deg,var(--yellow) 0 26%,var(--silver-d) 26%,var(--silver-l) 50%,#A9B0B8 74%,var(--yellow) 74%);
  --hazard:repeating-linear-gradient(45deg,var(--asphalt) 0 4px,var(--yellow) 4px 10px);
  /* sitekit component theme */
  --sk-bg:#fff; --sk-surface:#fff; --sk-text:#121314; --sk-muted:#5C636B; --sk-line:#DADDE1;
  --sk-accent:#121314; --sk-accent-ink:#E6FF2E; --sk-radius:4px; --sk-font:var(--f); --sk-font-display:var(--f);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--chalk);color:var(--ink);font:17px/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
::selection{background:var(--yellow);color:var(--asphalt)}
/* focus: asphalt on light grounds, lime on asphalt - never orange */
:focus-visible{outline:3px solid var(--asphalt);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.plan.pop :focus-visible,.stat :focus-visible{outline-color:var(--yellow)}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--yellow);color:var(--asphalt);padding:10px 16px;border-radius:var(--r-btn);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.skip:focus{left:12px}
.container{width:min(1240px,100% - 48px);margin-inline:auto}
.i{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------------------------------------------------------------- type */
.display,h1,h2{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.012em;line-height:.95;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(42px,6.4vw,92px)}
h2{font-size:clamp(32px,4.4vw,62px)}
h3{font-stretch:112%;font-weight:800;font-size:22px;line-height:1.2;margin:0 0 .4em;letter-spacing:-.005em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 22px}
.eyebrow::before{content:"";width:22px;height:10px;background:repeating-linear-gradient(-45deg,var(--orange) 0 4px,transparent 4px 7px)}
.on-dark .eyebrow{color:var(--yellow)}
.on-dark .eyebrow::before{background:repeating-linear-gradient(-45deg,var(--yellow) 0 4px,transparent 4px 7px)}
/* the homepage hero's eyebrow sits inside its h1 (the search phrase counts as the heading) but looks the same */
h1 .eyebrow{display:flex;width:max-content;max-width:100%;font-stretch:100%;line-height:1.6;letter-spacing:.16em}
.trade-links{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.trade-links p{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.trade-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.trade-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid currentColor;color:inherit;text-decoration:none;font-weight:700;font-size:15px}
.trade-links a:hover,.trade-links a:focus-visible{background:var(--yellow);border-color:var(--yellow);color:var(--asphalt)}
.lead{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--ink-2);max-width:46ch}
.on-dark .lead{color:#C9CDD2}
/* highlight = a strip of reflective tape behind the words; a light catches it once as it scrolls in */
.hl-y{color:var(--asphalt);padding:.02em .16em 0;margin-inline:-.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%),var(--tape);
  background-size:320% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat}
.in .hl-y,.hl-y.in{animation:hlSweep 1.5s .35s var(--ease) both}
@keyframes hlSweep{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}
.on-dark .hl{color:var(--yellow)}
.hl-o{color:var(--orange)}
.src{font-size:12.5px;color:var(--muted);letter-spacing:.01em}
.on-dark .src{color:var(--muted-d)}
.small{font-size:14px;color:var(--muted)}

/* ---------------------------------------------------------------- buttons
   Flat slabs, 2px corners, 52px tall, Archivo 800 caps. Primary: lime with asphalt ink. On hover a hazard stripe
   slides in along the left 12px. No offset shadows anywhere. */
.btn{--bg:var(--yellow);--fg:var(--asphalt);--bd:var(--asphalt);--hz:var(--hazard);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;max-width:100%;padding:14px 24px;border-radius:var(--r-btn);border:2px solid var(--bd);background:var(--bg);color:var(--fg);
  font:800 15px/1.05 var(--f);font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s,color .18s,border-color .18s,padding .22s var(--ease)}
.btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--hz);transform:translateX(-101%);transition:transform .22s var(--ease);z-index:-1}
.btn:hover,.btn:focus-visible{padding-left:32px;padding-right:16px}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:active{transform:translateY(1px)}
.btn .i{transition:transform .2s var(--ease)}
.btn:hover .i:last-child{transform:translateX(3px)}
.btn-y{--bg:var(--yellow);--fg:var(--asphalt)}
.btn-dark{--bg:var(--asphalt);--fg:var(--yellow);--bd:var(--asphalt)}
.btn-ghost{--bg:transparent;--fg:var(--asphalt);--bd:var(--asphalt)}
.btn-ghost:hover{--bg:rgba(18,19,20,.04)}
.on-dark .btn,.plan.pop .btn{--bd:var(--yellow)}
.on-dark .btn-dark{--bg:var(--yellow);--fg:var(--asphalt)}
.on-dark .btn-ghost{--bg:transparent;--fg:var(--chalk);--bd:var(--chalk)}
.on-dark .btn-ghost:hover{--bg:rgba(246,247,244,.06)}
.btn-lg{min-height:58px;padding:16px 22px;font-size:15.5px;letter-spacing:.05em}
.btn-lg:hover,.btn-lg:focus-visible{padding-left:30px;padding-right:14px}
.btn-sm{min-height:40px;padding:9px 14px;font-size:13px;letter-spacing:.05em}
.btn-sm::before{width:8px}
.btn-sm:hover,.btn-sm:focus-visible{padding-left:20px;padding-right:8px}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.btn[disabled]::before{display:none}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:80;background:rgba(18,19,20,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line-d);color:#fff}
.hdr{display:flex;align-items:center;gap:24px;min-height:74px}
.logo{display:block;margin-right:auto}
.logo img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:#E4E7EA;text-decoration:none;font-weight:600;font-size:15.5px;padding:10px 13px;border-radius:var(--r);transition:color .15s,background .15s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current]{color:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow)}
.nav-sep{width:1px;height:26px;background:var(--line-d);margin:0 8px}
.nav .nav-cta{color:var(--asphalt);background:var(--yellow);min-height:44px;padding:10px 16px;margin-left:6px;border-color:var(--yellow);font-size:13.5px}
.nav .nav-cta:hover,.nav .nav-cta:focus-visible{background:var(--yellow);color:var(--asphalt);padding-left:24px;padding-right:8px}
/* mobile menu: the brand's button, not a hamburger - a flat lime slab reading MENU in Archivo caps, 2px corners,
   46px tall. Open, it flips to asphalt with lime caps and reads CLOSE (both words share one grid cell, so the slab
   never changes width). Hover and keyboard focus slide the hazard stripe in, like every other button. */
.nav-toggle{display:none;position:relative;isolation:isolate;overflow:hidden;place-items:center;min-width:44px;height:46px;padding:0 15px;
  border:2px solid var(--yellow);border-radius:var(--r-btn);background:var(--yellow);color:var(--asphalt);cursor:pointer;
  font:800 13.5px/1 var(--f);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .18s,color .18s,padding .22s var(--ease)}
.nav-toggle>span{grid-area:1/1}
.nav-toggle .nt-close{visibility:hidden}
.nav-toggle::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--hazard);transform:translateX(-101%);transition:transform .22s var(--ease);z-index:-1}
.nav-toggle:focus-visible{padding-left:21px;padding-right:9px}
.nav-toggle:focus-visible::before{transform:none}
@media (hover:hover){.nav-toggle:hover{padding-left:21px;padding-right:9px}.nav-toggle:hover::before{transform:none}}
.nav-open .nav-toggle{background:var(--asphalt);color:var(--yellow)}
.nav-open .nav-toggle .nt-open{visibility:hidden}
.nav-open .nav-toggle .nt-close{visibility:visible}

/* ---------------------------------------------------------------- sections */
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.sec-tight{padding:clamp(48px,7vw,90px) 0}
.on-dark{background:var(--asphalt);color:#fff}
.on-white{background:#fff}
.sec-head{max-width:860px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lead{margin-inline:auto}
.split-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,56px)}
.split-head h2{margin:0;max-width:16ch}

/* bullet marker: a short slanted chip of reflective tape (lime / silver / lime, like the logo hyphen) with an asphalt
   keyline so it holds on white as well as on asphalt. Hi-Vis never bullets with a ✓ - ticks are Lettick's. */
.tc{display:inline-block;flex:none;width:22px;height:11px;vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 11'%3E%3ClinearGradient id='t' x2='0' y2='1'%3E%3Cstop offset='.3' stop-color='%23E6FF2E'/%3E%3Cstop offset='.3' stop-color='%23C9CED4'/%3E%3Cstop offset='.7' stop-color='%23C9CED4'/%3E%3Cstop offset='.7' stop-color='%23E6FF2E'/%3E%3C/linearGradient%3E%3Cpath d='M4.7.75h16.55l-3.95 9.5H.75z' fill='url(%23t)' stroke='%23121314' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* hazard stripes, reflective tape, ruler */
.hazard{height:16px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 16px,var(--asphalt) 16px 32px)}
.hazard.thin{height:8px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 8px,var(--asphalt) 8px 16px)}
.tape{position:relative;height:26px;background:var(--tape-shine);overflow:hidden}
.tape::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 48%,transparent 66%);background-size:260px 100%;background-repeat:no-repeat;background-position:-300px 0;mix-blend-mode:screen}
.tape-sweep::after{animation:sweep 5.5s var(--ease) infinite}
@keyframes sweep{0%{background-position:-300px 0}55%,100%{background-position:calc(100% + 300px) 0}}
.ruler{position:relative;height:28px;border-bottom:2px solid currentColor;opacity:.55;
  background-image:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 60px),repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 12px);
  background-size:100% 18px,100% 9px;background-position:0 100%,0 100%;background-repeat:no-repeat}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:var(--asphalt);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 40%,rgba(230,255,46,.10),transparent 70%),radial-gradient(40% 50% at 10% 100%,rgba(201,206,212,.08),transparent 70%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:24px;min-height:min(820px,calc(100vh - 74px));padding:56px 0 84px}
.hero h1{font-size:clamp(46px,6.6vw,104px)}
.hero h1 .row{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .row>span{display:inline-block}
.hero .lead{margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 24px;margin:30px 0 0;padding:0;list-style:none;color:#C9CDD2;font-size:15px}
.hero-proof li{display:flex;align-items:center;gap:10px}
.hero-stage{position:relative;aspect-ratio:1.12/1;width:100%}
.hero-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:crosshair}
.hero-stage img.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero-stage .stage-tag{position:absolute;right:6%;bottom:4%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7b8189;font-weight:700;pointer-events:none}
.hero-stage .stage-ex{position:absolute;left:18%;bottom:4%;display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A6ACB3;font-weight:700;pointer-events:none;z-index:1}
.hero-stage .stage-ex::before{content:"";width:16px;height:8px;background:repeating-linear-gradient(-45deg,var(--orange) 0 3px,transparent 3px 5px)}
.hero-stage .stage-ex{white-space:nowrap}
@media (max-width:640px){
  .hero-stage .stage-tag{display:none}
  .hero-stage .stage-ex{left:50%;transform:translateX(-50%);bottom:3%;font-size:11px}
}
.hero-tape{transform:rotate(-1.4deg) scale(1.02);margin:-6px -10px 0;position:relative;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* the tape band: the one scrolling band in the group - a strip of reflective tape laid across the road,
   trades printed on its silver centre, with a headlight sweep passing over it */
.tape-road{position:relative;z-index:3;overflow:hidden;margin:-66px 0 -32px;padding:32px 0}
.marquee{position:relative;overflow:hidden;white-space:nowrap;color:var(--asphalt);background:var(--tape-shine);
  border-block:2px solid var(--asphalt);margin:0 -2%;transform:rotate(-1.2deg);box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}
.marquee::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.95) 48%,transparent 61%) no-repeat;background-size:420px 100%;background-position:-460px 0;animation:headlights 6.5s var(--ease) 1s infinite}
@keyframes headlights{0%{background-position:-460px 0}60%,100%{background-position:calc(100% + 460px) 0}}
.marquee-track{display:inline-flex;gap:0;animation:marq 42s linear infinite;padding:21px 0 20px}
.marquee span{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(17px,1.9vw,23px);line-height:1;letter-spacing:.01em;display:inline-flex;align-items:center}
.marquee span::after{content:"";width:16px;height:16px;margin:0 26px;background:var(--asphalt);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
@keyframes marq{to{transform:translateX(-50%)}}

/* stats: each figure printed on a lime tape-chip, laid on a strip of asphalt with a lane marking */
.stats{display:grid;gap:12px}
.stat{container-type:inline-size;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto;column-gap:clamp(20px,4vw,64px);row-gap:8px;align-items:center;
  background:var(--asphalt);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,36px) clamp(22px,3.4vw,44px) clamp(30px,3.4vw,42px)}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:3px;opacity:.5;background:repeating-linear-gradient(90deg,var(--silver) 0 34px,transparent 34px 62px)}
.stat-n{grid-row:1 / span 2;justify-self:start;display:inline-block;max-width:100%;font-weight:900;font-stretch:118%;font-size:clamp(36px,4.6vw,66px);line-height:1;letter-spacing:-.02em;white-space:nowrap;font-size:clamp(34px,5cqi,66px);
  background:var(--yellow);color:var(--asphalt);padding:.16em .5em .12em;clip-path:polygon(.26em 0,100% 0,calc(100% - .26em) 100%,0 100%)}
.stat p{margin:0;align-self:end;font-size:17.5px;line-height:1.5;color:#D3D6DA;max-width:46ch}
.stat .src{align-self:start;color:var(--muted-d)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{position:relative;overflow:hidden;background:#fff;border:2px solid var(--asphalt);border-radius:var(--r-lg);padding:38px 28px 28px;transition:transform .25s var(--ease),border-color .25s}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--tape-shine)}
.step::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 48%,transparent 66%) no-repeat;background-size:200px 100%;background-position:-220px 0;mix-blend-mode:screen;transition:background-position .9s var(--ease)}
.step:hover{transform:translateY(-4px)}
.step:hover::after{background-position:calc(100% + 220px) 0}
.step-n{font-weight:900;font-stretch:125%;font-size:84px;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--asphalt);margin-bottom:22px;display:flex;justify-content:space-between;align-items:flex-start}
.step-n small{-webkit-text-stroke:0;color:var(--asphalt);background:var(--yellow);font-size:13px;letter-spacing:.08em;padding:6px 12px;border-radius:0;font-stretch:100%;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.step p{color:var(--ink-2);margin:0}
.on-dark .step{background:var(--asphalt-2);border:1px solid var(--asphalt-4)}
.on-dark .step:hover{border-color:rgba(230,255,46,.45)}
.on-dark .step-n{-webkit-text-stroke-color:var(--yellow)}
.on-dark .step p{color:#C9CDD2}
.time-ruler{display:flex;justify-content:space-between;font-weight:800;font-size:13px;letter-spacing:.12em;margin:0 0 8px;color:var(--muted)}
.on-dark .time-ruler{color:var(--muted-d)}

/* before/after */
.ba-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);align-items:center}
.ba{position:relative;aspect-ratio:9/16;max-height:720px;margin-inline:auto;width:min(100%,400px);border-radius:38px;overflow:hidden;border:10px solid var(--asphalt);background:var(--asphalt);box-shadow:0 50px 80px -40px rgba(0,0,0,.6);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:6px;margin-left:-3px;background:linear-gradient(90deg,var(--yellow) 0 30%,var(--silver) 30% 70%,var(--yellow) 70%);box-shadow:0 0 0 1px var(--asphalt);cursor:ew-resize}
.ba-handle button{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:3px solid var(--asphalt);background:var(--yellow);color:var(--asphalt);display:grid;place-items:center;cursor:ew-resize;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.ba-label{position:absolute;top:16px;padding:6px 10px;border-radius:var(--r-btn);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.ba-label.l{left:14px;background:#fff;color:var(--asphalt)}
.ba-label.r{right:14px;background:var(--yellow);color:var(--asphalt)}
.ba-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.ba-list li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;font-size:17px}
.ba-list .x{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;background:var(--asphalt);color:var(--yellow)}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat{background:var(--asphalt-2);border:1px solid var(--line-d);border-radius:var(--r-lg);padding:26px;position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(230,255,46,.10) 50%,transparent 65%);transform:translateX(-100%);transition:transform .8s var(--ease)}
.feat:hover{transform:translateY(-4px);border-color:rgba(230,255,46,.5)}
.feat:hover::after{transform:translateX(100%)}
.feat .fi{width:50px;height:50px;border-radius:var(--r);display:grid;place-items:center;background:var(--yellow);color:var(--asphalt);margin-bottom:20px;box-shadow:inset 0 -6px 0 rgba(18,19,20,.08)}
.feat .fi .i{width:24px;height:24px}
.feat h3{font-size:19px}
.feat p{color:#B9BEC4;margin:0;font-size:15.5px}
.feat .plan-tag{position:absolute;top:18px;right:18px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--asphalt);background:var(--orange);padding:4px 10px;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.feat .plan-tag.pro{background:var(--silver)}

/* examples */
.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ex-card{display:block;text-decoration:none;color:inherit;background:#fff;border:2px solid var(--asphalt);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ex-card:hover{transform:translateY(-4px);box-shadow:0 28px 44px -28px rgba(18,19,20,.55)}
.ex-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--concrete);border-bottom:2px solid var(--asphalt)}
.ex-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.tw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.ex-frame iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:0 0;transform:scale(var(--s,.4));pointer-events:none;background:#fff}
.ex-frame .ex-badge{position:absolute;left:14px;bottom:14px;z-index:2;background:var(--asphalt);color:var(--yellow);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-btn)}
.ex-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px}
.ex-meta h3{margin:0;font-size:20px}
.ex-meta p{margin:2px 0 0;color:var(--muted);font-size:15px}
.ex-go{width:46px;height:46px;border-radius:var(--r-btn);display:grid;place-items:center;background:var(--yellow);border:2px solid var(--asphalt);flex:none;transition:transform .25s var(--ease),background-color .25s}
.ex-card:hover .ex-go{transform:rotate(-45deg)}
.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.15)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--asphalt);border-radius:var(--r-lg);padding:34px 28px 28px}
.plan.pop{background:var(--asphalt);color:#fff;transform:translateY(-12px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.plan.pop::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--tape-shine);border-radius:4px 4px 0 0}
.plan .tagline{color:var(--muted);font-size:15.5px;min-height:48px}
.plan.pop .tagline{color:#B9BEC4}
.plan-badge{position:absolute;top:-15px;left:24px;z-index:1;background:var(--orange);color:var(--asphalt);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.price{display:flex;align-items:baseline;gap:6px;margin:16px 0 4px}
.price b{font-weight:900;font-stretch:125%;font-size:60px;line-height:1;letter-spacing:-.03em}
.price span{color:var(--muted);font-weight:600}
.plan.pop .price span{color:#B9BEC4}
.setup-note{font-size:14px;color:var(--muted);margin:0 0 22px;min-height:22px}
.plan.pop .setup-note{color:var(--yellow)}
.plan ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px;font-size:15.5px}
.plan li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.plan li .tc{margin-top:7px}
.plan .btn{margin-top:auto}
.toggle{display:inline-flex;background:#fff;border:2px solid var(--asphalt);border-radius:var(--r);padding:4px;gap:4px;margin:0 auto 46px;position:relative}
.toggle button{border:0;background:transparent;font:800 14px/1 var(--f);font-stretch:108%;letter-spacing:.05em;text-transform:uppercase;padding:12px 18px;border-radius:var(--r-btn);cursor:pointer;color:var(--ink-2)}
.toggle button[aria-pressed=true]{background:var(--asphalt);color:var(--yellow)}
.toggle button small{display:block;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:inherit;opacity:.8;margin-top:4px}
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:2px solid var(--asphalt);border-radius:var(--r-lg);overflow:hidden;font-size:16px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{background:var(--asphalt);color:#fff;font-stretch:112%;font-weight:800;font-size:15px}
.compare thead th.us{background:var(--tape);color:var(--asphalt)}
.compare td.us{background:#FBFFE0;font-weight:700}
.compare tbody tr:last-child>*{border-bottom:0}
.compare td{position:relative}
.compare td .tc{vertical-align:-1px}
.compare td .no{display:inline-block;width:16px;height:2px;border-radius:1px;background:var(--muted);vertical-align:middle;overflow:hidden;color:transparent;font-size:0}   /* not included: a short rule, drawn (not a dash glyph) */
.compare th[scope=row]{font-weight:700;color:var(--ink-2);width:22%}
.compare-wrap{overflow-x:auto;border-radius:var(--r-lg)}

/* guarantee */
.guarantee{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;background:var(--yellow);border:2px solid var(--asphalt);border-radius:var(--r-lg);padding:clamp(30px,4vw,50px) clamp(24px,4vw,44px)}
.guarantee::before,.guarantee::after{content:"";position:absolute;left:0;right:0;height:8px;background:repeating-linear-gradient(-45deg,var(--asphalt) 0 8px,transparent 8px 16px)}
.guarantee::before{top:0}
.guarantee::after{bottom:0}
.guarantee h2{font-size:clamp(28px,3.4vw,46px);margin:0 0 8px}
.guarantee p{margin:0;font-size:18px}
/* the walk-away sign: a diamond road-works sign (asphalt plate, lime keyline, upright caps) - not a stamp or seal */
.seal{position:relative;isolation:isolate;width:132px;height:132px;flex:none;display:grid;place-items:center;text-align:center;color:var(--yellow);font-weight:900;font-stretch:125%;font-size:14px;line-height:1.08;letter-spacing:.02em;text-transform:uppercase}
.seal::before{content:"";position:absolute;inset:15%;z-index:-1;background:var(--asphalt);border-radius:6px;transform:rotate(45deg);box-shadow:inset 0 0 0 5px var(--asphalt),inset 0 0 0 8px var(--yellow)}

/* FAQ */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{background:#fff;border:2px solid var(--asphalt);border-radius:var(--r);padding:0 24px;transition:box-shadow .2s}
.faq details[open]{box-shadow:inset 8px 0 0 var(--yellow),inset 10px 0 0 var(--asphalt)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-weight:800;font-stretch:108%;font-size:18.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:0;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:var(--r-btn);background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121314' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;border:2px solid var(--asphalt);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);margin:0 0 22px;max-width:70ch}
.faq details[open] summary,.faq details[open] p{padding-left:4px}

/* final CTA */
.final{background:var(--yellow);position:relative;overflow:hidden;text-align:center}
.final h2{font-size:clamp(40px,6.6vw,104px);max-width:14ch;margin-inline:auto}
.final .lead{margin:0 auto 34px;color:var(--asphalt)}

/* page heroes (inner) */
.page-hero{background:var(--asphalt);color:#fff;padding:clamp(64px,9vw,128px) 0 clamp(56px,7vw,96px);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-120px;top:-60px;width:520px;height:520px;background:repeating-linear-gradient(-45deg,rgba(230,255,46,.07) 0 26px,transparent 26px 52px);border-radius:50%;pointer-events:none}
.page-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--tape-shine);border-top:2px solid var(--asphalt)}
.page-hero h1{font-size:clamp(40px,6vw,86px);max-width:15ch}
.page-hero .lead{color:#C9CDD2}

/* trade grid */
.trade-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.trade-chip{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px;border-radius:var(--r);background:#fff;border:2px solid var(--asphalt);text-decoration:none;font-weight:800;font-stretch:108%;transition:transform .2s var(--ease),background .2s}
.trade-chip:hover{transform:translateY(-3px);background:var(--yellow)}
.trade-chip .i{width:28px;height:28px}

/* forms (marketing) - raised cards carry a reflective tape edge instead of a shadow */
.card{background:#fff;border:2px solid var(--asphalt);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px)}
.card.shadow{position:relative;overflow:hidden;padding-top:calc(clamp(22px,3vw,36px) + 10px)}
.card.shadow::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--tape-shine)}
.field{display:block;margin:0 0 16px}
.field>span{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:2px solid var(--concrete);border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B9BEC4}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--asphalt);box-shadow:0 0 0 4px rgba(230,255,46,.7)}
.field [aria-invalid=true]{border-color:#D92D20}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-msg{padding:14px 16px;border-radius:var(--r);font-weight:600;margin:0 0 16px}
.form-msg.ok{background:#E9F9EE;color:#0E6B35;border:1.5px solid #A6E3BC}
.form-msg.err{background:#FDECEC;color:#A11B12;border:1.5px solid #F3B4AF}

/* footer */
.site-footer{background:var(--asphalt);color:#C9CDD2;font-size:15px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:72px 0 48px}
.foot-brand img{height:36px;width:auto;margin-bottom:18px}
.foot-tag{max-width:30ch;color:#C9CDD2}
.foot-col{display:flex;flex-direction:column;gap:7px}
.foot-col a{color:#E4E7EA;text-decoration:none;width:max-content;max-width:100%}
.foot-col a:hover{color:var(--yellow)}
.foot-h{font-weight:800;color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-d);padding:22px 0 30px;font-size:13.5px;color:#9097A0}
.foot-base p{margin:0}
.foot-base a{color:#C9CDD2}

/* sitekit pages (auth, legal) */
.sk-wrap{padding-block:clamp(48px,8vw,110px)}
body .sk-card{position:relative;overflow:hidden;border:2px solid var(--asphalt);box-shadow:none;border-radius:var(--r-lg);padding-top:calc(clamp(22px,5vw,40px) + 10px)}
body .sk-card::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--tape-shine)}
body .sk-card h1,body .sk-legal h1{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
body .sk-btn{min-height:52px;border-radius:var(--r-btn);border:2px solid var(--asphalt);background:var(--yellow);color:var(--asphalt);font-stretch:112%;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
body .sk-btn{position:relative;isolation:isolate;overflow:hidden}
body .sk-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--hazard);transform:translateX(-101%);transition:transform .22s var(--ease);z-index:-1}
body .sk-btn:hover{filter:none;transform:none}
body .sk-btn:hover::before,body .sk-btn:focus-visible::before{transform:none}
body .sk-btn.sk-ghost{background:transparent;color:var(--asphalt);border:2px solid var(--asphalt)}
body .sk-btn.sk-danger{border-color:var(--sk-danger,#B42318)}
body .sk-field input,body .sk-field select,body .sk-field textarea{border-width:2px}
body .sk-field input:focus,body .sk-field select:focus,body .sk-field textarea:focus{border-color:var(--asphalt);box-shadow:0 0 0 4px rgba(230,255,46,.7)}
.sk-legal h2{font-stretch:112%;font-weight:800}
.sk-legal{background:transparent}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .trade-grid{grid-template-columns:repeat(4,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;padding:18px 20px 26px;background:var(--asphalt);border-bottom:1px solid var(--line-d);transform:translateY(-120%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s;max-height:calc(100vh - 74px);overflow:auto}
  .nav-open .nav{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
  .nav a{font-size:20px;padding:14px 10px}
  .nav a[aria-current]{box-shadow:inset 4px 0 0 var(--yellow)}
  .nav-sep{display:none}
  .nav .nav-cta{margin:14px 0 0;justify-content:center;font-size:15px;min-height:52px}
  .nav-toggle{display:inline-grid}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding:40px 0 56px;gap:8px}
  .hero-stage{aspect-ratio:1.25/1;max-width:640px;margin-inline:auto}
  .steps,.plans{grid-template-columns:1fr}
  .plan.pop{transform:none}
  .stat{grid-template-columns:1fr;grid-template-rows:auto;row-gap:14px}
  .stat-n{grid-row:auto;font-size:clamp(30px,10.5cqi,58px)}
  .stat p{align-self:start}
  .ba-wrap{grid-template-columns:1fr}
  .ex-grid,.tw-grid{grid-template-columns:1fr}
  .guarantee{grid-template-columns:1fr;text-align:left}
}
@media (max-width:640px){
  body{font-size:16px}
  .container{width:calc(100% - 32px)}
  .hdr{min-height:64px}
  .nav{top:64px}
  .logo img{height:30px}
  .hero h1{font-size:clamp(38px,11vw,56px)}
  .hero-ctas .btn{width:100%}
  .btn{white-space:normal;text-align:center}
  .tape-road{margin:-56px 0 -28px;padding:28px 0}
  .marquee{margin:0 -4%;transform:rotate(-2deg)}
  .marquee-track{padding:16px 0 15px}
  .feat-grid{grid-template-columns:1fr}
  .trade-grid{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr;gap:30px;padding-top:56px}
  .fgrid2{grid-template-columns:1fr}
  .btn-lg{min-height:56px;font-size:15.5px}
  .step-n{font-size:64px}
  .price b{font-size:52px}
  .compare{font-size:14.5px}
  .compare th,.compare td{padding:12px}
  .seal{width:108px;height:108px;font-size:11.5px}
  .toggle button{padding:11px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (hover:none){.hero-stage .stage-tag{display:none}}
@media (max-width:640px){.hero-stage{aspect-ratio:1.05/1;margin-inline:-16px;width:calc(100% + 32px)}}
.hero-stage{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
@media (min-width:981px){.hero-stage{margin-right:calc(-1 * max(24px,(100vw - 1240px) / 2));width:auto}}
[hidden]{display:none!important}

/* ================================================================ the self-serve builder pages (19 Oct 2026)
   Vic (the one allowed character, BRAND.md "Vic"), the three tiers, hosting, Vic's tank, the examples gallery.
   Built to the approved mockups (_tmp/mockups/hivis/pricing.html, vic.html). */
/* Vic on a light plate with a lime keyline (the mockups' art frame) */
.vic-frame{display:flex;justify-content:center;align-items:flex-end;background:#E9EBED;border:2px solid var(--yellow);border-radius:var(--r-lg);padding:20px 26px 0}
.vic-frame img{width:min(300px,100%);height:auto}
/* a slanted label chip (tier names, "Our pick"): lime by default, .o orange, .s silver; asphalt ink always */
.chipl{display:inline-block;background:var(--yellow);color:var(--asphalt);font:900 12px/1 var(--f);font-stretch:118%;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px 5px;transform:skewX(-14deg);border:2px solid var(--asphalt);white-space:nowrap}
.chipl>span{display:inline-block;transform:skewX(14deg)}
.chipl.o{background:var(--orange)}
.chipl.s{background:var(--silver)}
ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
ul.ticks li{display:flex;gap:11px;align-items:baseline}
/* Vic speaking: a white bubble with a strip of tape down its left edge */
.say{display:flex;gap:14px;align-items:flex-end}
.say>img{flex:none;width:120px;height:auto}
.bubble{position:relative;background:#fff;color:var(--ink);border:2px solid var(--asphalt);border-radius:var(--r-lg);padding:14px 18px 14px 26px;font-size:17px;line-height:1.45;max-width:36ch}
.bubble::before{content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:10px;background:linear-gradient(90deg,var(--yellow) 0 28%,var(--silver) 28% 72%,var(--yellow) 72%);border:2px solid var(--asphalt);border-radius:6px 0 0 6px}
.bubble .who{display:block;font-weight:900;font-stretch:118%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.bubble p{margin:0}

/* home hero: copy left, Vic and the three homepages right */
.hv-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding:64px 0 96px}
.hv-hero .lead{margin-bottom:32px}
.hv-stage{position:relative;min-height:440px}
.ways{position:absolute;inset:0 0 0 18%;pointer-events:none}
.way{position:absolute;width:64%;background:#fff;border:2px solid var(--asphalt);border-radius:4px;overflow:hidden;box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.way .bar{height:20px;background:var(--asphalt-3);display:flex;gap:5px;align-items:center;padding:0 8px}
.way .bar i{width:7px;height:7px;border-radius:50%;background:#5C636B}
.way .pg{padding:14px;display:grid;gap:8px}
.way .pg b{display:block;height:12px;border-radius:2px;background:var(--c,#1D3A6B)}
.way .pg b.w6{width:60%}.way .pg b.w8{width:80%}.way .pg b.w4{width:40%}
.way .pg u{display:block;height:7px;border-radius:2px;background:#DADDE1;text-decoration:none}
.way .pg em{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.way .pg em s{display:block;height:34px;border-radius:2px;background:var(--t,#EEF2F8)}
.way .pg .cta{width:34%;height:16px;border-radius:2px;background:var(--a,#F2B33D)}
.way .chipl{position:absolute;right:12px;top:30px}
.way.w1{left:0;top:6%;transform:rotate(-5deg);--c:#1D5A43;--t:#EDF4F0;--a:#E3C26B}
.way.w2{left:18%;top:20%;transform:rotate(1deg);--c:#1D3A6B;--t:#EEF2F8;--a:#F2B33D;z-index:1}
.way.w3{left:36%;top:36%;transform:rotate(5deg);--c:#E6FF2E;--t:#25282B;--a:#E6FF2E;z-index:2}
.way.w3 .pg{background:#1A1C1E}.way.w3 .pg u{background:#3B4046}
.hv-stage .say{position:absolute;left:0;bottom:-10px;z-index:3}
.hv-stage .say>img{width:190px}
.hv-stage .bubble{margin-bottom:130px;font-size:16px;max-width:24ch}

/* Vic's poses and Vic's rules (the approved vic.html mockup) */
.vic-poses{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pose{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--concrete);border-radius:var(--r-lg);padding:18px 18px 22px}
.pose-art{background:var(--chalk);border-radius:4px;width:100%;display:flex;justify-content:center;padding:8px 0 0}
.pose-art img{width:190px;height:auto}
.pose .pq{font-size:17px;font-weight:600;line-height:1.4;margin:0}
.pose .small{margin:0}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rules .card{border-color:var(--concrete)}
.rules h3{font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:24px;line-height:1;margin:0 0 16px}

/* prices (the approved mockup) */
.pr-hero{background:var(--asphalt);color:#fff}
.pr-hero-in{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;padding:56px 0 48px}
.pr-hero h1{font-size:clamp(40px,6.2vw,88px);margin:0 0 22px;max-width:none}
.pr-hero .lead{color:#C9CDD2}
.pr-wrap{width:min(1300px,100% - 80px);margin:auto;padding:56px 0;display:grid;gap:40px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tier{position:relative;background:#fff;border:2px solid var(--concrete);border-radius:var(--r-lg)}
.tier.chosen{border-color:var(--asphalt)}
.tier.chosen::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:10px;background:var(--tape);border:2px solid var(--asphalt);border-radius:6px 6px 0 0;z-index:2}
.tier .tag{position:absolute;right:14px;top:-14px;z-index:3}
.tier .tb{padding:30px 26px 28px;display:grid;gap:14px}
.tier .tn{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tier .tn .chipl{margin:0}
.tier .small{margin:0}
.tprice{display:flex;align-items:baseline;gap:10px;margin:0}
.tprice b{font-weight:900;font-stretch:122%;font-size:64px;line-height:1;letter-spacing:-.02em}
.tprice span{font-weight:700;color:var(--muted)}
.hostp{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:var(--asphalt);color:#fff;border-radius:var(--r-lg);padding:36px 40px}
.hostp h2{font-size:clamp(32px,3.6vw,46px);margin:0 0 12px}
.hostp .lead{color:#C9CDD2;margin:0}
.hostp .eyebrow{color:var(--yellow)}
.hostp .eyebrow::before{background:repeating-linear-gradient(-45deg,var(--yellow) 0 4px,transparent 4px 7px)}
.tankp{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:#fff;border:2px solid var(--concrete);border-radius:var(--r-lg);padding:26px 30px}
.tankp h2{font-size:34px;margin:0 0 8px}
.tankp p{margin:0}
.gauge{width:170px;height:auto}
.faq-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.faq-cards>div{background:#fff;border:2px solid var(--concrete);border-radius:var(--r-lg);padding:20px 22px}
.faq-cards h3{font-size:18px;margin:0 0 6px;font-stretch:100%}
.faq-cards p{margin:0;color:var(--ink-2)}
.fine{font-size:14px;color:var(--muted);max-width:110ch;margin:0}

/* a long figure on a tape-chip ("£600 to £2,400") stays on one line by getting smaller */
.stat .stat-n.long{font-size:clamp(22px,7cqi,44px)}

/* tier summary (home, trade pages) */
.mini-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mini-tiers .tier .tb{padding:24px 22px 22px}
.mini-tiers .tprice b{font-size:48px}

/* examples gallery */
.ex-tier{position:absolute;right:14px;bottom:16px;z-index:2}
.ex-empty{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;background:#fff;border:2px solid var(--concrete);border-radius:var(--r-lg);padding:30px}
.ex-empty img{width:180px;height:auto}
.ex-empty h2{font-size:clamp(28px,3vw,40px);margin:0 0 10px}

/* FAQ groups */
.faq-group{margin:0 0 44px}
.faq-group h2{font-size:clamp(26px,3vw,36px);margin:0 0 16px}

@media (max-width:980px){
  .hv-hero-grid{grid-template-columns:1fr;padding:40px 0 64px;gap:20px}
  .hv-stage{min-height:360px;max-width:560px;width:100%;margin-inline:auto}
  .tiers,.mini-tiers,.vic-poses,.rules{grid-template-columns:1fr}
  .tiers{gap:30px}
  .pr-hero-in{grid-template-columns:1fr}
  .hostp{grid-template-columns:1fr;padding:26px 20px}
  .faq-cards{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pr-wrap{width:calc(100% - 32px);padding:30px 0}
  .pr-hero-in{padding:34px 0}
  .pr-hero h1{font-size:clamp(34px,10vw,48px)}
  .tprice b{font-size:52px}
  .tankp{grid-template-columns:1fr;padding:22px 18px}
  .hv-stage{min-height:460px}
  .ways{inset:0 0 auto 0;height:270px}
  .way{width:62%}
  .way.w1{top:0}.way.w2{left:19%;top:15%}.way.w3{left:38%;top:32%}
  .way .chipl{top:23px;right:8px;font-size:10px;padding:4px 8px 3px}
  .hv-stage .say{bottom:0}
  .hv-stage .say>img{width:110px}
  .hv-stage .bubble{margin-bottom:40px;font-size:15px}
  .ex-empty{grid-template-columns:1fr;padding:22px}
  .ex-empty img{width:130px}
  .say>img{width:90px}
}