/* Runverra 2026-10 gallery round: the home page as a dark studio gallery.
   Loaded last on the home page only. Flips the Ink & Ember tokens to dark, then styles the new sections:
   original light R hero (.cine), stacked project panels (.gx) with case and live-demo dialogs, product index (.gi),
   founder strip (.gabout), giant closing CTA (.gfinal) and a short first-visit loader (.gload). */
:root{--ink:#0B0B0C;--bone:#F2EEE8;--mute:#A39D95;--line:rgba(242,238,232,.14);--ember-text:#FF8A5C;--g-panel:#050506;--g-ease:cubic-bezier(.22,.8,.24,1);color-scheme:dark}
html{background:#0B0B0C}
body.g{background:#0B0B0C;color:var(--bone)}
body.g::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url(assets/gallery/grain.png)}
body.g .fx-bg,body.g .ink{display:none}
body.g a{color:inherit}
body.g .eyebrow{color:var(--ember-text)}
body.g .btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid rgba(242,238,232,.35);border-radius:3px;color:var(--bone);text-decoration:none;font-weight:600;font-size:14px;background:rgba(11,11,12,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s,background .3s}
body.g .btn-ghost:hover,body.g .btn-ghost:focus-visible{border-color:var(--bone);background:rgba(242,238,232,.08)}
body.g .btn-ghost span[aria-hidden]{color:#58E6A0;font-size:11px}

/* headline split reveal: words rise in once visible */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform 1s var(--g-ease);transition-delay:calc(var(--i,0) * 60ms)}
[data-split].in .w>i{transform:none}

/* ---------- hero: the studio R (seq.js frames + critters.js) ---------- */
/* 2026-10: the hero is black now, like the 4K colour-explosion film (pure black studio) and the gallery */
.cine{background:#000;color:#FAF8F4;color-scheme:dark}
/* 2026-10-19: a long, slow hero - dance stage, then the 4K burst + fall (all 249 frames); grows again when scenes 2-3 land */
.cine{height:700vh}
@media (max-width:860px){.cine{height:550vh}}
@media (prefers-reduced-motion:reduce){.cine{height:auto}}
/* 2026-10-19 (Matt: the R faded to dark at the bottom while the letters stayed bright): only a soft fade at the very bottom, so the R keeps its full brightness */
.cine .hero__veil{background:linear-gradient(rgba(0,0,0,0) 46%,rgba(0,0,0,.38) 72%,rgba(0,0,0,.72) 100%)}
/* 2026-10-19 (Matt: the shade looked real, but it must fall on the little letters too): one studio light falloff over the film,
   the walking R AND the little letters (.rvk layers), under the text: shade above the pictures, text above the shade */
.cine .hero__veil{z-index:1;pointer-events:none}
.cine .hero__top,.cine .hero__copy,.cine .cine__big,.cine .cine__hud,.cine .hero__mark{z-index:2}
.cine .hero__copy{background:rgba(11,11,12,.72);color:#F2EEE8;border-color:rgba(242,238,232,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cine .hero__copy h1,.cine .hero__copy p,.cine .hero__copy strong,.cine .hero__more a{color:#F2EEE8}
.cine .hero__copy .btn.secondary,.cine .hero__copy .btn--ghost{color:#F2EEE8;border-color:rgba(242,238,232,.5);background:transparent}
.cine .hero__mark{color:#F2EEE8}
.cine .cine__big{color:#F2EEE8;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.cine .cine__big+.cine__big{color:#FF8A5C}
.cine .hero__ctas .btn--call{color:#F2EEE8;border-color:rgba(242,238,232,.55);background:transparent}
.cine .hero__ctas .btn--call:hover{background:#F2EEE8;color:#0B0B0C;border-color:#F2EEE8}
.cine .eyebrow{color:var(--ember-text)}
.cine::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;pointer-events:none;z-index:3;background:linear-gradient(to bottom,rgba(11,11,12,0),#0B0B0C)}

/* ---------- gallery: stacked full-bleed panels ---------- */
.gallery{position:relative;padding:clamp(70px,12vh,140px) 0 0}
.gallery__head{padding:0 var(--pad) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px 40px;align-items:end}
.gallery__head .eyebrow{grid-column:1/-1;margin:0}
.gallery__head h2,.gindex h2,.gfinal__h{font-family:Display,"Barlow Condensed",Impact,sans-serif;text-transform:uppercase;line-height:.88;letter-spacing:-.005em;margin:0}
.gallery__head h2{font-size:clamp(54px,9vw,150px)}
.gallery__sub{color:var(--mute);margin:0 0 .6em}
.gx{position:sticky;top:0;height:100svh;padding:76px var(--pad) 16px;background:#0B0B0C;margin-bottom:70svh}
.gx:last-of-type{margin-bottom:0;position:relative;top:auto}
.gx+.gx{box-shadow:0 -30px 60px rgba(0,0,0,.55)}
.gx__frame{position:relative;height:100%;border:1px solid var(--line);overflow:hidden;background:var(--g-panel);isolation:isolate}
.gx__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);transition:transform 1.6s var(--g-ease)}
.gx.on .gx__film{transform:scale(1)}
.gx__frame::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,6,.82),rgba(5,5,6,0) 45%),linear-gradient(to bottom,rgba(5,5,6,.55),rgba(5,5,6,0) 22%)}
.gx__kicker,.gx__label{position:absolute;top:22px;margin:0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,238,232,.82)}
.gx__kicker{left:28px}.gx__label{right:28px}
.gx__head{position:absolute;left:clamp(22px,3vw,40px);right:clamp(22px,3vw,40px);bottom:clamp(86px,12vh,120px);margin:0;font-family:Display,"Barlow Condensed",Impact,sans-serif;font-size:clamp(46px,7.4vw,124px);line-height:.9;letter-spacing:-.01em;color:var(--bone);text-transform:none;max-width:12ch}
.gx__actions{position:absolute;left:clamp(22px,3vw,40px);right:clamp(22px,3vw,40px);bottom:clamp(24px,4vh,36px);margin:0;display:flex;justify-content:space-between;align-items:center;gap:14px}
.gx__explore{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:6px 0;color:var(--bone);font:600 14px/1 var(--sans,inherit);cursor:pointer}
.gx__explore span{color:#58E6A0;font-size:18px;transition:transform .3s}
.gx__explore:hover span,.gx__explore:focus-visible span{transform:translate(3px,-3px)}

/* case-study dialog */
.gcase,.gplay{border:0;padding:0;color:var(--bone);background:transparent;max-width:none;max-height:none}
.gcase[open],.gplay[open]{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content}
.gcase::backdrop,.gplay::backdrop{background:rgba(5,5,6,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gcase[open]{animation:g-rise .5s var(--g-ease)}
@keyframes g-rise{from{opacity:0;transform:translateY(24px)}}
.gcase__in{position:relative;width:min(1100px,94vw);max-height:90vh;overflow:auto;background:#0E1110;border:1px solid var(--line)}
.gcase__x,.gplay__x{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;gap:10px;align-items:center;padding:11px 16px;border:0;border-radius:3px;background:#58E6A0;color:#0B0B0C;font:600 13px/1 var(--sans,inherit);cursor:pointer}
.gcase__film{display:block;width:100%;height:clamp(200px,38vh,380px);object-fit:cover;background:#000}
.gcase__body{padding:clamp(24px,4vw,52px)}
.gcase__kick{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#58E6A0}
.gcase h3{font-family:Display,"Barlow Condensed",Impact,sans-serif;font-size:clamp(48px,6vw,88px);line-height:.9;margin:.2em 0 .25em}
.gcase__lede{font-size:clamp(16px,1.3vw,19px);color:rgba(242,238,232,.88);max-width:62ch}
.gcase__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:32px 0}
.gcase__cols h4{font-family:Display,"Barlow Condensed",Impact,sans-serif;font-size:24px;margin:0 0 8px}
.gcase__cols p{color:var(--mute);font-size:15px;margin:0}
.gcase__ctas{display:flex;gap:12px;flex-wrap:wrap}
.gcase__ctas .btn{background:#58E6A0;color:#0B0B0C}
.gcase__note{margin-top:22px;font-size:12px;color:var(--mute)}

/* live demo player */
.gplay__bar{position:relative;display:flex;align-items:center;gap:18px;padding:14px 150px 14px 18px;background:#141615;border:1px solid var(--line);border-bottom:0;font-size:12px}
.gplay__name{color:var(--bone)}.gplay__hint{color:var(--mute)}
.gplay__open{margin-left:auto;color:#58E6A0}
.gplay__x{top:7px;right:8px}
.gplay__stage{width:min(1400px,94vw);height:min(82vh,860px);background:#000;border:1px solid var(--line)}
.gplay__stage iframe{display:block;width:100%;height:100%;border:0}

/* ---------- services on dark ---------- */
body.g .offers h2{color:var(--bone)}
body.g .offers .rate strong{color:var(--bone)}
body.g .car__body h3{color:var(--bone)}
body.g .car__body p{color:var(--mute)}
body.g .car__body .price{color:#58E6A0}
body.g .car__media--scene .stage--scene{background:radial-gradient(circle at 50% 35%,#1d1f1e 0%,#0F1110 75%);border:1px solid var(--line)}
body.g .offers__else{color:var(--mute)}

/* ---------- product index ---------- */
.gindex{position:relative;padding:clamp(70px,12vh,140px) var(--pad)}
.gindex h2{font-size:clamp(48px,7vw,112px);margin-bottom:34px}
.gi{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gi__row a{position:relative;display:grid;grid-template-columns:52px minmax(0,1.3fr) minmax(0,1fr) auto 28px;gap:18px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--bone);transition:padding .4s var(--g-ease),color .3s}
.gi__n{color:var(--mute);font-size:12px}
.gi__name{font-family:Display,"Barlow Condensed",Impact,sans-serif;font-size:clamp(28px,3.4vw,52px);line-height:1;text-transform:uppercase}
.gi__what{color:var(--mute);font-size:15px}
.gi__tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#58E6A0;border:1px solid rgba(88,230,160,.35);border-radius:999px;padding:5px 10px;white-space:nowrap}
.gi__arrow{color:#58E6A0;font-size:20px;transition:transform .3s}
.gi__thumb{display:none}
@media (hover:hover) and (pointer:fine){.gi__row a:hover{padding-left:18px}.gi__row a:hover .gi__arrow{transform:translate(4px,-4px)}.gi:hover .gi__row a:not(:hover){color:rgba(242,238,232,.45)}}
.gindex__all{margin-top:26px}

/* ---------- process, founder, faq, contact on dark ---------- */
body.g .process h2,body.g .faq h2,body.g .contact h2,body.g .gabout h2{color:var(--bone)}
body.g .steps p,body.g .facts li,body.g .faq details p,body.g .contact__l p{color:var(--mute)}
body.g .faq summary{color:var(--bone)}
.gabout{display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start;padding:clamp(60px,10vh,110px) var(--pad);border-top:1px solid var(--line)}
.gabout__face{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.gabout h2{font-family:Display,"Barlow Condensed",Impact,sans-serif;text-transform:uppercase;font-size:clamp(40px,5vw,72px);line-height:.9;margin:.15em 0 .3em}
body.g .founder__quote footer{color:var(--mute)}
body.g .quote input,body.g .quote select,body.g .quote textarea{background:#141615;color:var(--bone);border-color:rgba(242,238,232,.2)}

/* ---------- closing CTA with marquee ---------- */
.gfinal{position:relative;padding:clamp(80px,14vh,160px) var(--pad) 0;border-top:1px solid var(--line);overflow:hidden;text-align:center}
.gfinal__crit{display:block;width:min(1200px,100%);height:clamp(170px,20vw,270px);margin:6px auto 0;cursor:pointer;position:relative;z-index:1}
.gfinal__fire{position:absolute;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .6s ease;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 30% 46% at 50% 48%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 30% 46% at 50% 48%,#000 62%,transparent 100%)}
.gfinal__fire.on{opacity:1}
.gmarq{position:absolute;left:0;right:0;top:28px;overflow:hidden;white-space:nowrap;color:var(--mute);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.gmarq__t{display:inline-flex;gap:28px;animation:g-marq 34s linear infinite}
.gmarq__t i{font-style:normal;color:#58E6A0}
@keyframes g-marq{to{transform:translateX(-50%)}}
.gfinal__h{font-size:clamp(70px,15vw,260px);margin-top:.3em}
.gfinal__sub{color:var(--mute);margin:18px auto 28px;max-width:52ch}
.gfinal__btn{font-size:clamp(20px,2vw,28px);padding:clamp(22px,2.2vw,30px) clamp(40px,4.4vw,64px);min-height:clamp(68px,6vw,90px);gap:16px;border-radius:999px;box-shadow:0 18px 50px rgba(255,90,31,.35)}
.gfinal__btn:hover{box-shadow:0 22px 60px rgba(255,90,31,.5)}
/* home nav: the solid ink bar from the very top (same look as .nav.scrolled in v31.css) */
body.g .nav{background:#0B0B0C!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:rgba(250,248,244,.12)!important;box-shadow:0 6px 20px rgba(11,11,12,.18);color:#FAF8F4}
body.g .nav .nav__logo,body.g .nav nav a,body.g .nav .nav__menu,body.g .nav .snd{color:#FAF8F4!important;opacity:1!important}
body.g .nav .nav__cta,body.g .nav .nav__menu,body.g .nav .snd{border-color:rgba(250,248,244,.7)!important;background:transparent}
body.g .nav .nav__cta:hover,body.g .nav .nav__menu:hover{background:#FAF8F4!important;color:#0B0B0C!important}

/* ---------- first-visit loader (under ~1s, skipped on repeat visits and for reduced motion) ---------- */
.gload{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:14px;background:#0B0B0C;transition:opacity .45s ease,visibility .45s}
.gload__mark{font-family:Display,"Barlow Condensed",Impact,sans-serif;font-size:clamp(46px,9vw,120px);letter-spacing:.04em;margin:0;color:var(--bone)}
.gload__n{color:var(--mute);margin:0;font-size:12px;letter-spacing:.2em}
html.gl-done .gload{opacity:0;visibility:hidden}
html:not(.js) .gload{display:none}

/* magnetic buttons (desktop pointers only; set by gallery.js) */
@media (hover:hover) and (pointer:fine){body.g .btn,body.g .btn-ghost{transform:translate(var(--mx,0),var(--my,0));transition:transform .35s var(--g-ease),background .3s,border-color .3s}}

/* ---------- phones ---------- */
@media (max-width:860px){
  .gallery__head{grid-template-columns:1fr}
  .gx{position:relative;top:auto;height:78svh;min-height:520px;padding-top:0;padding-bottom:14px;margin-bottom:0}
  .gx+.gx{box-shadow:none}
  .gx__kicker{left:16px;right:16px;top:16px}.gx__label{display:none}
  .gx__head{left:16px;right:16px;bottom:132px;font-size:clamp(40px,12vw,64px)}
  .gx__actions{left:16px;right:16px;bottom:18px;flex-direction:column;align-items:flex-start;gap:10px}
  .gcase__cols{grid-template-columns:1fr;gap:18px}
  .gplay__bar{padding-right:110px}.gplay__hint{display:none}
  .gplay__stage{width:96vw;height:76vh}
  .gi__row a{grid-template-columns:34px minmax(0,1fr) 22px;gap:4px 12px;padding:18px 2px}
  .gi__what,.gi__tag{grid-column:2}
  .gi__arrow{grid-column:3;grid-row:1}
  .gi__thumb{display:block;grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;margin-top:10px;border:1px solid var(--line)}
  .gabout{grid-template-columns:1fr}.gabout__face{width:88px;height:88px}
}
@media (prefers-reduced-motion:reduce){
  .gfinal__crit{height:150px}
  [data-split] .w>i{transform:none;transition:none}
  .gx{position:relative;top:auto}
  .gmarq__t{animation:none}
  .gload{display:none}
  .gx__film{transform:none}
}
/* 2026-10-19 readability: light-theme greys (#3b3732 in styles.css / v31.css) were nearly invisible on the dark home */
body.g .car__body>p:not(.eyebrow):not(.tiers-h):not(.price),body.g .car__cat,body.g .ch__text p:not(.eyebrow),body.g .work__head p:not(.eyebrow),body.g .panel__in>p:not(.eyebrow):not(.tiny),
body.g .steps p,body.g .contact__l>p:not(.eyebrow):not(.tiny),body.g .fde>p:not(.eyebrow),body.g .pkg li,body.g .facts li,body.g .svc__card p,body.g .pay,body.g .faq details p{color:#A9A39B}
body.g .contact__l a{color:#F2EEE8}
body.g a.btn.gfinal__btn,body.g a.btn.gfinal__btn:visited{color:#0B0B0C!important}
/* 2026-10-19: the closing heading has a max-width (h2 measure); centre its box too, or it hugs the left on wide screens */
.gfinal__h{margin-left:auto;margin-right:auto}
/* 2026-10-19 sound button on every page: slow ember glow until first pressed; a music note on phones */
.snd{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#F2EEE8;border:1px solid rgba(242,238,232,.7);border-radius:999px;padding:7px 12px;font:500 13px/1 "DM Sans",Sans,sans-serif;cursor:pointer;position:relative}
.snd[hidden]{display:none!important}
.snd__bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}.snd__bars i{width:2px;height:4px;background:currentColor}
.snd[aria-pressed="true"] .snd__bars i{background:#FF5A1F;animation:sndeq .9s infinite alternate}.snd[aria-pressed="true"] .snd__bars i:nth-child(2){animation-delay:.3s}.snd[aria-pressed="true"] .snd__bars i:nth-child(3){animation-delay:.6s}
@keyframes sndeq{to{height:12px}}
.snd__note{display:none}
.snd--invite{animation:sndglow 2.6s ease-in-out infinite;border-color:rgba(255,90,31,.85)!important}
@keyframes sndglow{0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,0),0 0 0 rgba(255,90,31,0)}50%{box-shadow:0 0 0 4px rgba(255,90,31,.18),0 0 22px rgba(255,90,31,.55)}}
@media (max-width:860px){
  .snd{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .snd .snd__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .snd .snd__bars{display:none}.snd .snd__note{display:block}
  .snd[aria-pressed="true"] .snd__note{color:#FF5A1F;animation:sndnote 1.2s ease-in-out infinite alternate}
}
@keyframes sndnote{to{transform:translateY(-2px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.snd--invite,.snd .snd__note{animation:none}}

/* 2026-10-19: homepage keeps 3 panels; the rest live on /work/#demos-3d */
.gx:last-of-type{margin-bottom:0;position:relative;top:auto}
.gallery__more{position:relative;z-index:3;background:#0B0B0C;padding:56px var(--pad) 8px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0}
.gallery__more-note{color:var(--muted,#A9A39B);font-size:15px;max-width:520px}

/* 2026-10-19 Websites dropdown (lib/chrome-v3.mjs webMenu): opens on hover or keyboard focus; the same block is in src/v3-sub.css and v3/site/gallery.css */
.nav__dd{position:relative;display:flex;align-items:center}
.nav__dd>a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.nav__ddm{position:absolute;top:100%;left:-16px;margin-top:12px;min-width:290px;padding:8px;border-radius:14px;background:#0F0F11;border:1px solid rgba(250,248,244,.14);box-shadow:0 24px 50px rgba(0,0,0,.45);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:60}
.nav__ddm::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__dd:hover .nav__ddm,.nav__dd:focus-within .nav__ddm{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.nav .nav__ddm a{display:grid!important;gap:2px;padding:10px 12px!important;border-radius:10px;border:0!important;color:#FAF8F4!important;font:500 14.5px/1.3 "DM Sans",system-ui,sans-serif!important;white-space:nowrap;text-decoration:none}
.nav .nav__ddm a small{font-size:12.5px;line-height:1.3;color:#A9A39B;font-weight:400}
.nav .nav__ddm a:hover,.nav .nav__ddm a:focus-visible{background:rgba(255,90,31,.14)!important;color:#FFFFFF!important}
@media (max-width:860px){.nav__dd{display:none!important}}
@media (prefers-reduced-motion:reduce){.nav__ddm{transition:none!important}}

/* 2026-10-19 contrast sweep: dark text on the ember buttons (cream on ember was 2.7:1) */
.hero__ctas .btn:not(.btn--call),.gallery__more .btn{color:#0B0B0C}
.sc-card--win span{color:#0B0B0C!important}

/* 2026-10-19 clear-pitch pass (Matt + Nick's feedback): the pitch leads. Shorter hero film, no HUD/wordmark/big words over it,
   a "what we fix" section, prices before the gallery, shorter gallery hold between panels. */
.cine{height:320vh}
@media (max-width:860px){.cine{height:240vh}}
@media (prefers-reduced-motion:reduce){.cine{height:auto}}
.cine .hero__top,.cine .cine__hud{display:none!important} /* 2026-10-19: the RUNVERRA wordmark is back (Matt) */
.cine .cine__canvas{-webkit-mask-image:linear-gradient(#000 86%,transparent 99%);mask-image:linear-gradient(#000 86%,transparent 99%)} /* idle sway tilts the canvas: its bottom edge fades out instead of showing */
/* 2026-10-19 (Matt): scroll words back, and a gentle idle sway of the whole frame at the top (R and its reflection move together) */
@media (max-width:860px){.cine .cine__big{font-size:clamp(52px,15vw,84px);top:auto;bottom:22svh;transform:none}.cine .cine__big+.cine__big{bottom:12svh}}
@media (max-width:860px) and (orientation:portrait){.cine .hero__copy{bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 11svh));z-index:4}}
@media (max-width:860px) and (orientation:portrait) and (max-height:700px){.cine .hero__copy{bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px))}} /* phones: card sits lower, above the bottom fade, so the R gets room under the nav */
.cine .hero__copy .hero__trust{margin:14px 0 0;font-size:13.5px;color:#C9C2B8;letter-spacing:.01em}
/* 2026-10-20 (Matt: at ~2000x1000 the RUNVERRA wordmark covered the card's last line): the wordmark's size is one value (--mk), its
   visible part is .608 of it (line-height .8 minus the .192 that sits below the hero), and the card always sits 16px above that, so the
   two never overlap from 360px to 2560px. On short, very wide screens the wordmark stops growing (52svh) so the card still fits under the bar. */
.cine{--mk:min(24.5vw,52svh)}
.cine .hero__mark{font-size:var(--mk);bottom:calc(var(--mk) * -.192)}
@media (min-width:861px){.cine .hero__copy{bottom:max(clamp(110px,18vw,260px),calc(var(--mk) * .608 + 16px))}}
@media (max-width:860px) and (orientation:portrait){.cine .hero__copy{bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 11svh),calc(var(--mk) * .608 + 12px))}}
@media (max-width:860px) and (orientation:portrait) and (max-height:700px){.cine .hero__copy{bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px),calc(var(--mk) * .608 + 12px))}}
.gx{margin-bottom:38svh}
.pains{background:#0B0B0C;color:#F2EEE8;padding:clamp(72px,10vw,130px) var(--pad,24px) clamp(56px,8vw,100px)}
.pains .eyebrow{color:#FF8A5C;margin:0 0 10px}
.pains h2{font-family:Display,"Barlow Condensed",Impact,sans-serif;text-transform:uppercase;font-size:clamp(40px,6vw,84px);line-height:.92;margin:0 0 40px;max-width:16ch;text-wrap:balance}
.pains__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.pains__list li{border:1px solid rgba(242,238,232,.14);border-radius:16px;padding:24px 22px;background:#141416;display:grid;gap:10px;align-content:start}
.pains__list h3{margin:0;font:600 19px/1.25 "DM Sans",system-ui,sans-serif;color:#F2EEE8}
.pains__list li::before{content:"";width:28px;height:3px;border-radius:2px;background:#FF5A1F}
.pains__list p{margin:0;font-size:15.5px;line-height:1.55;color:#BDB5AA}
/* 2026-10-19: Runverra's own line (Vision answers it) on the contact block */
.contact__ways{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
body.g .contact__l .contact__ways .btn--call{color:#F2EEE8;border:1px solid rgba(242,238,232,.55);background:transparent}

/* 2026-10-19: tap-to-call in the header (Runverra's line, answered by Vision): number on desktop, phone icon on phones */
.nav .nav__call{display:inline-flex;align-items:center;gap:7px}.nav .nav__call svg{width:15px;height:15px;flex:none}
@media (max-width:860px){.nav .nav__call .nav__num{display:none}.nav .nav__call{padding:8px 11px!important}}
@media (max-width:380px){.nav nav{gap:6px!important}.nav .nav__call{padding:7px 9px!important}.nav .nav__cta:not(.nav__call){padding:8px 11px!important}}
/* 2026-10-19 nav plan: "Call" word on phones (the number shows on wider screens) */
.nav .nav__word{display:none}@media (max-width:860px){.nav .nav__call .nav__word{display:inline}.nav .nav__call{padding:8px 13px!important}}
.rvm__top .snd{margin-left:auto;margin-right:12px}
/* 2026-10-19 (Matt): the sound button breathes a slow brand-orange glow until it is on; then a steady glow */
@keyframes sndPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,0),0 0 8px rgba(255,90,31,.2)}50%{box-shadow:0 0 0 4px rgba(255,90,31,.16),0 0 22px rgba(255,90,31,.55)}}
.snd{animation:sndPulse 3s ease-in-out infinite;border-color:rgba(255,90,31,.8)!important}
.snd[aria-pressed="true"]{animation:none;box-shadow:0 0 14px rgba(255,90,31,.45)}
@media (prefers-reduced-motion:reduce){.snd{animation:none;box-shadow:0 0 12px rgba(255,90,31,.4)}}
@media (max-width:380px){.nav nav{gap:6px!important}.nav .nav__call{padding:7px 10px!important}.nav .nav__cta:not(.nav__call){padding:8px 11px!important}}
/* phones: Menu shows as its icon only, so the logo, Call and Get a free demo all have room */
@media (max-width:400px){.nav .nav__menu{font-size:0!important;gap:0!important;padding:9px 11px!important}.nav .nav__menu i{margin:0!important}}
@media (max-width:400px){.nav .nav__menu{min-height:38px;min-width:44px;justify-content:center}}
/* 2026-10-20 (Matt): the header call button reads "Call" at every width */
.nav .nav__call .nav__word{display:inline}
/* 2026-10-20 (Matt): before/after on the home page, the same proof as the outreach previews. Slatehaven Roofing is fictional:
   "today" = v3/ba/before.html, "new" = its sample site; screenshots by v3/ba/make-ba.py, hashed into /assets by build-v3.mjs.
   Without scripting the two shots sit side by side (stacked on a phone); with it, a drag/arrow-key slider (gallery.js). */
.ba{background:#0B0B0C;color:#F2EEE8;padding:clamp(56px,8vw,110px) var(--pad,24px);display:grid;gap:clamp(32px,5vw,72px);align-items:center;border-top:1px solid rgba(242,238,232,.08)}
@media (min-width:900px){.ba{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.ba .eyebrow{color:#FF8A5C;margin:0 0 10px}
.ba h2{font-family:Display,"Barlow Condensed",Impact,sans-serif;text-transform:uppercase;font-size:clamp(38px,5.4vw,76px);line-height:.92;margin:0 0 22px;max-width:14ch;text-wrap:balance;color:#F2EEE8}
body.g .ba .ba__lede{font-size:17px;line-height:1.55;color:#BDB5AA;max-width:46ch;margin:0 0 24px}
.ba__ticks{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:12px;max-width:48ch}
.ba__ticks li{position:relative;padding-left:32px;font-size:16px;line-height:1.5;color:#E6E0D7}
.ba__ticks li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:#FF5A1F}
.ba__ticks li::after{content:"";position:absolute;left:7px;top:calc(.2em + 4px);width:5px;height:9px;border:solid #0B0B0C;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ba__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0 0 16px}
.ba__open{color:#FF8A5C;font:600 15px/1.2 Sans,sans-serif;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;min-height:24px;display:inline-flex;align-items:center;gap:4px}
.ba__open:hover{color:#F2EEE8}
body.g .ba .ba__note{font-size:13.5px;line-height:1.5;color:#8F8981;margin:0}
.ba__view{display:grid;gap:14px;justify-items:center;min-width:0}
.ba__cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;width:100%;max-width:620px}
.ba__half{margin:0;position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(242,238,232,.16);background:#141416}
.ba__half img{display:block;width:100%;height:auto}
.ba__half--before{order:-1}
.ba__lab{position:absolute;top:10px;font:700 12px/1 Sans,sans-serif;letter-spacing:.04em;padding:7px 11px;border-radius:999px;background:rgba(11,11,12,.85);color:#fff;pointer-events:none}
.ba__lab--b{left:10px}.ba__lab--a{right:10px;background:#FF5A1F;color:#0B0B0C}
.ba__tabs,.ba__range,.ba__handle{display:none}
@media (scripting:enabled){
  .ba__tabs{display:flex;gap:8px}
  .ba__tabs button{font:600 14px/1 Sans,sans-serif;border:1px solid rgba(242,238,232,.3);background:transparent;color:#F2EEE8;border-radius:999px;padding:0 16px;min-height:44px;cursor:pointer;transition:background .2s,color .2s}
  .ba__tabs button[aria-pressed="true"]{background:#F2EEE8;color:#0B0B0C;border-color:#F2EEE8}
  .ba__cmp{display:block;position:relative;width:min(360px,100%);aspect-ratio:390/844;border-radius:24px;overflow:hidden;border:1px solid rgba(242,238,232,.18);background:#141416;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);--x:50%;user-select:none;-webkit-user-select:none}
  .ba__cmp[data-k="d"]{width:100%;max-width:none;aspect-ratio:1366/854;border-radius:12px}
  .ba__half{position:absolute;inset:0;border:0;border-radius:0}
  .ba__half img{width:100%;height:100%;object-fit:cover;object-position:top}
  .ba__half--before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
  .ba__range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;z-index:3;-webkit-appearance:none;appearance:none}
  .ba__handle{display:block;position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#FF5A1F;pointer-events:none;z-index:2}
  .ba__handle i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#FF5A1F;box-shadow:0 6px 20px rgba(0,0,0,.5)}
  .ba__handle i::before,.ba__handle i::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
  .ba__handle i::before{left:7px;border-right:8px solid #0B0B0C;border-left:0}
  .ba__handle i::after{right:7px;border-left:8px solid #0B0B0C;border-right:0}
  .ba__range:focus-visible~.ba__handle i{outline:3px solid #F2EEE8;outline-offset:3px}
  .ba__lab{z-index:1}
}
/* 2026-10-20 (Matt): the phone "after" shot ends on the template's tap-to-call bar; a small label points at it (phone view only) */
.ba__lab--bar{top:auto;right:10px;bottom:calc(8.6% + 8px);background:#0B0B0C;color:#F2EEE8;font-weight:600;letter-spacing:.02em}
.ba__cmp[data-k="d"] .ba__lab--bar{display:none}
/* the "New" pill sat over the sample's header Call button: in the slider, both pills sit just under the header instead */
@media (scripting:enabled){.ba__lab--a,.ba__lab--b{top:calc(9% + 6px)}}
/* 2026-10-20 (Matt): "What a new site does for you", value cards under the before/after (cards from lib/value-cards.mjs) */
.val{background:#0B0B0C;color:#F2EEE8;padding:clamp(48px,7vw,96px) var(--pad,24px) clamp(56px,8vw,110px);border-top:1px solid rgba(242,238,232,.08)}
.val .eyebrow{color:#FF8A5C;margin:0 0 10px}
.val h2{font-family:Display,"Barlow Condensed",Impact,sans-serif;text-transform:uppercase;font-size:clamp(36px,5vw,68px);line-height:.92;margin:0 0 16px;max-width:18ch;text-wrap:balance;color:#F2EEE8}
body.g .val .val__lede{font-size:17px;line-height:1.55;color:#BDB5AA;max-width:60ch;margin:0 0 32px}
.val__grid{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.val__card{border:1px solid rgba(242,238,232,.14);border-radius:16px;padding:22px 20px;background:#141416;display:grid;gap:8px;align-content:start}
.val__ic{width:30px;height:30px;color:#F2EEE8;margin-bottom:4px}
.val__card h3{margin:0;font:600 18px/1.25 "DM Sans",system-ui,sans-serif;color:#F2EEE8}
body.g .val__card p{margin:0;font-size:15px;line-height:1.55;color:#BDB5AA}
.val__card a{color:#FF8A5C;text-decoration:underline;text-underline-offset:2px}
.val__ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}
body.g .val__ctas .btn--call{color:#F2EEE8;border:1px solid rgba(242,238,232,.55);background:transparent}
body.g .val__ctas .btn--call:hover{background:#F2EEE8;color:#0B0B0C}
/* 2026-10-20 (Matt): "Your business" picker, per-industry headline, numbered pins on the new site, the numbered list under the
   slider (always shown, so the pins can stay small on phones), the care-plan line and the template facts. */
.ba__pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;width:100%;max-width:620px}
.ba__pick label{font:600 15px/1.2 Sans,sans-serif;color:#F2EEE8}
.ba__pick select{flex:1 1 200px;min-height:46px;font:600 16px/1.2 Sans,sans-serif;color:#0B0B0C;background:#F2EEE8;border:0;border-radius:999px;padding:0 40px 0 18px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#0B0B0C 50%),linear-gradient(135deg,#0B0B0C 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.ba__pick select:focus-visible{outline:3px solid #FF5A1F;outline-offset:3px}
body.g .ba .ba__hl{margin:0;width:100%;max-width:620px;font:600 clamp(18px,2vw,22px)/1.3 Sans,sans-serif;color:#F2EEE8;text-align:center}
body.g .ba .ba__worth{margin:4px 0 0;width:100%;max-width:620px;padding:14px 16px;border:1px solid rgba(242,238,232,.16);border-left:4px solid #FF5A1F;border-radius:12px;font-size:15.5px;line-height:1.5;color:#E6E0D7}
.ba__deal{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ba__deal li{border:1px solid rgba(242,238,232,.22);border-radius:999px;padding:7px 12px;font-size:13.5px;line-height:1.3;color:#E6E0D7}
body.g .ba__ctas .btn--call{color:#F2EEE8;border:1px solid rgba(242,238,232,.55);background:transparent}
body.g .ba__ctas .btn--call:hover{background:#F2EEE8;color:#0B0B0C}
.ba__note .ba__open{font-size:13.5px}
.ba__pick{display:none}
@media (scripting:enabled){.ba__pick{display:flex}}
.ba__half{isolation:isolate} /* the pins stay inside the "new" image, so the "today" side covers them */
.ba__view>*{min-width:0}.ba__pick select{min-width:0;max-width:100%;width:100%;flex-basis:0} /* long options must not widen the page on phones */
/* 2026-10-20 (Matt): "Who we help" strip (every industry in the picker, grouped; each name picks it in the slider) */
.who{background:#0B0B0C;color:#F2EEE8;padding:clamp(48px,7vw,96px) var(--pad,24px);border-top:1px solid rgba(242,238,232,.08)}
.who .eyebrow{color:#FF8A5C;margin:0 0 10px}
.who h2{font-family:Display,"Barlow Condensed",Impact,sans-serif;text-transform:uppercase;font-size:clamp(34px,4.6vw,64px);line-height:.92;margin:0 0 16px;max-width:18ch;color:#F2EEE8}
body.g .who .who__lede{font-size:17px;line-height:1.55;color:#BDB5AA;max-width:60ch;margin:0 0 28px}
.who__grid{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.who__grid li{border:1px solid rgba(242,238,232,.14);border-radius:16px;padding:20px;background:#141416}
.who__grid h3{margin:0 0 10px;font:600 17px/1.25 "DM Sans",system-ui,sans-serif;color:#F2EEE8}
body.g .who__grid p{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.who__grid a{border:1px solid rgba(242,238,232,.22);border-radius:999px;padding:7px 12px;font-size:14px;line-height:1.2;color:#E6E0D7;text-decoration:none}
.who__grid a:hover,.who__grid a:focus-visible{border-color:#FF5A1F;color:#F2EEE8}
.who__all{margin:0}
/* 2026-10-20 (Matt): closing wordmark, "stamp" version (replaces the laser R canvas). The letters UNVERRA run in and leave a gap,
   a hand with a rubber stamp comes down and stamps a red ink R into it, the page cracks around it (shake, dust), the hand lifts.
   Plays once when it scrolls into view (gallery.js adds .stamp--armed, then .stamp--go). Default styles = the finished state,
   which is what reduced motion and no-JS get. Transform and opacity only; colours follow the theme (currentColor). */
.stamp{position:relative;margin:clamp(18px,3vw,40px) auto 0;padding:0 0 clamp(26px,4vw,56px);font-family:Display,"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(70px,18.5vw,290px);line-height:.86;letter-spacing:-.005em;color:var(--bone,#F2EEE8);pointer-events:none;user-select:none}
.stamp__row{display:flex;justify-content:center;align-items:flex-end}
.stamp__slot{position:relative;display:inline-block}
.stamp__l{display:inline-block;position:relative;z-index:1}
.stamp__r{position:relative;z-index:2;display:inline-block;color:#E8441B;transform:rotate(-3deg) translateY(.01em);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
/* cracks: an SVG centred under the R, spreading over the "ground" behind the letters */
.stamp__cracks{position:absolute;z-index:0;left:50%;top:50%;width:4.2em;height:1.7em;margin:-.85em 0 0 -2.1em;overflow:visible;opacity:.5}
.stamp__crack{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:200px 80px}
.stamp__dust{position:absolute;left:50%;bottom:.04em;width:0;height:0;z-index:1}
.stamp__dust i{position:absolute;left:-.09em;top:-.09em;width:.18em;height:.18em;border-radius:50%;background:currentColor;opacity:0}
/* the hand with the stamp: hidden at rest */
.stamp__hand{position:absolute;z-index:3;left:50%;bottom:-.1em;width:1.05em;height:auto;margin-left:-.525em;opacity:0;transform:translateY(-140%) scale(1.3);transform-origin:50% 95%}
.stamp__sleeve{fill:#2F3A4A}.stamp__arm,.stamp__skin{fill:#D8A07A;stroke:#5A3422;stroke-width:3}.stamp__crease{fill:none;stroke:#8A5236;stroke-width:3;stroke-linecap:round}
.stamp__wood{fill:#9A6534;stroke:#4A2C16;stroke-width:3}.stamp__knob{fill:#7A4A22;stroke:#4A2C16;stroke-width:3}
.stamp__base{fill:#4A3326;stroke:#1E140E;stroke-width:3}.stamp__top{fill:#6B4A34}.stamp__rubber{fill:#E8441B;stroke:#1E140E;stroke-width:2}
/* ---- the animation (only when gallery.js armed it and it came into view) ---- */
.stamp--armed .stamp__l{opacity:0;transform:translateX(70vw)}
.stamp--armed .stamp__r,.stamp--armed .stamp__crack{opacity:0}
.stamp--armed .stamp__crack{transform:scale(0)}
.stamp--go .stamp__l{animation:st-run .62s cubic-bezier(.2,.9,.25,1.12) calc(.1s + var(--i) * .07s) both}
.stamp--go .stamp__hand{animation:st-hand 1.5s cubic-bezier(.45,0,.3,1) 1s both}
.stamp--go .stamp__r{animation:st-ink .4s ease-out 1.42s both}
.stamp--go .stamp__crack{animation:st-crack .5s cubic-bezier(.15,.85,.3,1) calc(1.44s + var(--k) * .025s) both}
.stamp--go .stamp__row{animation:st-shake .36s linear 1.42s both}
.stamp--go .stamp__dust i{animation:st-dust .7s ease-out 1.42s forwards}
.stamp__dust i:nth-child(1){--dx:-.55em;--dy:-.12em}.stamp__dust i:nth-child(2){--dx:-.32em;--dy:-.3em}.stamp__dust i:nth-child(3){--dx:-.1em;--dy:-.36em}
.stamp__dust i:nth-child(4){--dx:.14em;--dy:-.34em}.stamp__dust i:nth-child(5){--dx:.36em;--dy:-.26em}.stamp__dust i:nth-child(6){--dx:.58em;--dy:-.1em}
@keyframes st-run{from{opacity:0;transform:translateX(70vw)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes st-hand{0%{opacity:0;transform:translateY(-140%) scale(1.3)}8%{opacity:1}28%{opacity:1;transform:translateY(-2%) scale(1.02)}31%{transform:translateY(1%) scale(.98,.96)}
  46%{opacity:1;transform:none}80%{opacity:1;transform:translateY(-110%) scale(1.18) rotate(6deg)}100%{opacity:0;transform:translateY(-160%) scale(1.25) rotate(8deg)}}
@keyframes st-ink{from{opacity:0;transform:rotate(-3deg) translateY(.01em) scale(1.08)}to{opacity:1;transform:rotate(-3deg) translateY(.01em) scale(1)}}
@keyframes st-crack{from{opacity:1;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes st-shake{0%,100%{transform:none}20%{transform:translate(-.012em,.008em)}40%{transform:translate(.01em,-.006em)}60%{transform:translate(-.006em,.004em)}80%{transform:translate(.004em,0)}}
@keyframes st-dust{0%{opacity:.35;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.6)}}
@media (prefers-reduced-motion:reduce){.stamp--armed .stamp__l,.stamp--armed .stamp__r,.stamp--armed .stamp__crack{opacity:1;transform:none}.stamp--go *{animation:none!important}}
/* 2026-10-21 (Matt): the before/after, calmer. Desktop: the copy in a narrower left column; on the right, the business dropdown
   (full width), then two small segmented controls [Phone | Computer] [Before | After], then the frame beside a plain checklist
   "What's on the new site" and the care-plan line (a 2:1 grid). Phones: dropdown, controls, frame (about 60vh), list, value line.
   The Today / New tags sit above the frame's corners, outside the screenshots. No numbered pins. Transform/opacity animation only. */
@property --x{syntax:"<percentage>";inherits:true;initial-value:50%}
.ba{padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(40px,6vh,72px)}
@media (min-width:1080px){
  .ba{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(36px,4vw,72px);align-items:start;padding-right:max(var(--pad,24px),calc(100vw - 1480px - var(--pad,24px)))}
  .ba h2{font-size:clamp(34px,3.5vw,56px);max-width:none;margin-bottom:12px}
  body.g .ba .ba__lede{font-size:15.5px;margin-bottom:14px}
  .ba__ticks{gap:7px;margin-bottom:16px}.ba__ticks li{font-size:14.5px}
  .ba__deal{margin-bottom:16px}.ba__deal li{font-size:13px;padding:6px 11px}
}
.ba__view{display:grid;gap:12px;justify-items:stretch;width:100%;min-width:0;container-type:inline-size}
.ba__controls{display:grid;gap:10px}
.ba__controls .ba__pick{width:100%;max-width:none;flex-wrap:nowrap}
.ba__pick select{flex:1 1 auto}
.ba__segs{display:flex;flex-wrap:wrap;gap:10px}
.ba__seg{display:none}
body.g .ba .ba__hl{margin:2px 0 0;text-align:left;max-width:none;font-size:clamp(16px,1.4vw,19px);color:#E6E0D7}
.ba__stage{display:grid;gap:16px 24px;align-items:center}
.ba__frame{display:grid;gap:8px;width:100%;justify-self:center}
.ba__tags{display:flex;justify-content:space-between;gap:8px}
.ba__tags .ba__lab{position:static;font-size:11.5px;padding:5px 10px;border:1px solid rgba(242,238,232,.25)}
.ba__tags .ba__lab--a{border-color:#FF5A1F}
.ba__side{display:grid;gap:12px;align-content:center;min-width:0}
body.g .ba .ba__list-h{margin:0;font:600 16px/1.3 Sans,sans-serif;color:#F2EEE8;text-transform:none;letter-spacing:0}
.ba__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ba__list li{position:relative;padding-left:24px;font-size:15px;line-height:1.4;color:#E6E0D7}
.ba__list li::before{content:"";position:absolute;left:3px;top:.2em;width:6px;height:11px;border:solid #FF8A5C;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
body.g .ba .ba__side .ba__worth{margin:2px 0 0;max-width:none}
@container (min-width:620px){.ba__stage{grid-template-columns:2fr 1fr}}
@media (scripting:enabled){
  .ba__seg{display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(242,238,232,.22);border-radius:999px;background:#141416}
  .ba__seg button{font:600 13.5px/1 Sans,sans-serif;border:0;background:transparent;color:#BDB5AA;border-radius:999px;padding:0 15px;min-height:36px;cursor:pointer;transition:background .2s,color .2s}
  .ba__seg button[aria-pressed="true"]{background:#F2EEE8;color:#0B0B0C}
  .ba__seg button:focus-visible{outline:2px solid #FF5A1F;outline-offset:2px}
  .ba__frame{width:fit-content;max-width:100%}
  .ba__cmp{width:min(100cqw,calc(min(60vh,560px) * 390 / 844));max-width:none}
  .ba__cmp[data-k="d"]{width:100cqw}
  .ba__cmp.is-snap{transition:--x .35s cubic-bezier(.3,.7,.2,1)}
  .ba__handle{z-index:4}
  .ba__handle i{width:52px;height:52px;margin:-26px 0 0 -26px}
  .ba__hint{position:absolute;top:50%;left:50%;transform:translate(-50%,36px);background:#0B0B0C;color:#F2EEE8;font:700 12px/1 Sans,sans-serif;letter-spacing:.04em;padding:6px 10px;border-radius:999px;white-space:nowrap;transition:opacity .3s}
  .ba--used .ba__hint{opacity:0}
  .ba__cmp:not(.ba--used) .ba__handle i{animation:ba-nudge 1.4s ease-in-out 1s 3}
}
@container (min-width:620px){@media (scripting:enabled){
  .ba__cmp{width:calc(min(62vh,600px) * 390 / 844)}
  .ba__cmp[data-k="d"]{width:min(calc((100cqw - 24px) * 2 / 3),calc(min(62vh,600px) * 1366 / 854))}
}}
@keyframes ba-nudge{0%,100%{transform:none}30%{transform:translateX(-7px)}70%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){.ba__cmp .ba__handle i{animation:none!important}.ba__cmp.is-snap{transition:none}}
.ba__pick label{white-space:nowrap}
@media (min-width:1080px){.ba{padding-top:clamp(28px,4vh,52px);padding-bottom:clamp(28px,4vh,52px)}}
@container (min-width:620px){@media (scripting:enabled){.ba__cmp{width:calc(min(60vh,600px) * 390 / 844)}.ba__cmp[data-k="d"]{width:min(calc((100cqw - 24px) * 2 / 3),calc(min(60vh,600px) * 1366 / 854))}}}
@media (max-width:420px){@media (scripting:enabled){.ba__segs{gap:8px}.ba__seg button{padding:0 11px;font-size:13px;min-height:34px}}}
/* 2026-10-21 (Matt: "super simple and clear, selling points only"): the slider is the focal point. Desktop: a narrow column with
   the short headline, three one-line selling points and the two buttons; the slider takes about 68% of the width (computer
   view by default) and stays within about 75vh. Above it one small row: a compact business pill and Phone | Computer.
   Phones: the copy, the row, the slider full width at about 60vh. Lots of space around it. */
.ba{padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(64px,10vh,120px)}
.ba h2{max-width:11ch;margin-bottom:22px}
.ba__points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.ba__points li{position:relative;padding-left:30px;font:600 18px/1.3 Sans,sans-serif;color:#F2EEE8}
.ba__points li::before{content:"";position:absolute;left:4px;top:.12em;width:7px;height:13px;border:solid #FF8A5C;border-width:0 3px 3px 0;transform:rotate(45deg)}
.ba__view{display:grid;gap:12px;justify-items:center;width:100%;min-width:0;container-type:inline-size}
.ba__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.ba__controls .ba__pick{display:none;width:auto;flex:none}
.ba__controls .ba__pick select{width:min(260px,72vw);flex:0 0 auto;min-height:38px;font-size:14.5px;padding:0 36px 0 16px;background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%}
.ba__frame{width:100%;justify-self:center}
body.g .ba .ba__note{margin:2px 0 0;font-size:12.5px;color:#8F8981;text-align:center}
body.g .ba .ba__note .ba__open{font-size:12.5px}
@media (scripting:enabled){
  .ba__controls .ba__pick{display:block}
  .ba__frame{width:fit-content;max-width:100%}
  .ba__cmp{width:min(100cqw,calc(min(60vh,560px) * 390 / 844))}
  .ba__cmp[data-k="d"]{width:100cqw}
}
@container (min-width:620px){@media (scripting:enabled){
  .ba__cmp{width:calc(min(75vh,780px) * 390 / 844)}
  .ba__cmp[data-k="d"]{width:min(100cqw,calc(min(75vh,780px) * 1366 / 854))}
}}
@media (min-width:1080px){
  .ba{grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:clamp(40px,4.5vw,96px);align-items:center;padding-right:max(var(--pad,24px),calc(100vw - 1640px - var(--pad,24px)))}
  .ba h2{font-size:clamp(44px,4.6vw,76px)}
}
@container (min-width:620px){@media (scripting:enabled){.ba__cmp{width:calc(min(68vh,720px) * 390 / 844)}}}
@media (max-width:480px){.ba__controls{flex-wrap:nowrap;gap:8px}.ba__controls .ba__pick select{width:min(200px,54vw);font-size:14px}@media (scripting:enabled){.ba__seg button{padding:0 11px;font-size:13px}}}

/* 2026-10-20 (Matt): one line of facts under the before/after buttons (risk, price, speed) */
body.g .ba .ba__facts{margin:0;font-size:14.5px;line-height:1.5;letter-spacing:.01em;color:#C9C3BA}