/* Shared funnel styles. Every colour comes from the client config as a CSS
   variable (scripts/palette.mjs fills the ones a config leaves out); a test
   fails on any other colour here, save white, black and the named exceptions. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--font);color:var(--ink-soft);background:var(--white);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
/* Room under the page while the cookie banner shows (consent.js sets it), so
   nothing has to stay under the banner. */
body{padding-bottom:var(--consent-h,0px)}
img{max-width:100%;height:auto;display:block}
svg{width:1em;height:1em;flex:none}
a{color:inherit}
h1,h2,h3{font-family:var(--font);color:var(--ink);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em;overflow-wrap:anywhere}
h1{font-weight:800;font-size:clamp(2rem,5.4vw,3.6rem)}
h2{font-weight:800;font-size:clamp(1.65rem,3.6vw,2.6rem)}
h3{font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.narrow{max-width:760px}
.logo{height:34px;width:auto}

/* Focus: the brand's ring on light surfaces, and one that shows on the dark ones. */
.btn:focus-visible,.option:focus-visible,input:focus-visible,summary:focus-visible,.back:focus-visible,.day:focus-visible,.slot:focus-visible,.linkish:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hero :focus-visible,.band-navy :focus-visible,.stats :focus-visible,.footer :focus-visible,.sticky-cta :focus-visible,.consent :focus-visible{outline-color:var(--focus-on-dark)}
/* A heading focused only so a screen reader reads the new screen is not a
   control: no ring (it showed round the first question on landing). */
h1[tabindex="-1"]:focus{outline:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;border:0;border-radius:12px;padding:15px 26px;font:700 1.05rem/1.2 var(--font);text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--gold-text);box-shadow:0 10px 24px -10px rgba(var(--gold-rgb),.9),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn-gold:hover{background:var(--gold-deep)}
.btn-quiet{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-xl{padding:19px 30px;font-size:1.12rem}
/* A version's larger buttons (button_size: larger); smaller ones are .btn alone. */
.btn-xxl{padding:23px 38px;font-size:1.3rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.65;cursor:progress}
/* Named exception: the DRAFT badge looks the same on every brand (preview builds only). */
.draft{display:inline-block;vertical-align:middle;font:800 .6rem/1 var(--font);letter-spacing:.08em;background:#ffd60a;color:#000;padding:3px 6px;border-radius:4px;margin-left:6px}

/* VSL hero */
.hero{--hero-top:20px;position:relative;color:var(--on-navy);padding:var(--hero-top) 0 52px;text-align:center;background:linear-gradient(180deg,rgba(var(--hero-overlay-rgb),.92) 0%,rgba(var(--hero-overlay-rgb),.86) 55%,var(--navy) 100%),var(--hero-image) center/cover no-repeat,var(--navy)}
.hero-inner{max-width:880px}
.logo-hero{height:40px;margin:0 auto 26px;filter:brightness(0) invert(1)}
.pill{display:inline-block;margin:0 0 16px;padding:7px 14px;border:1px solid rgba(var(--gold-rgb),.55);border-radius:999px;color:var(--gold);font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hero h1{color:#fff;margin:0 auto 14px;max-width:20ch;text-wrap:balance}
.promise{max-width:620px;margin:0 auto 22px;font-size:1.08rem;color:var(--on-navy)}
.video,.hero .cta-block{max-width:720px;margin-left:auto;margin-right:auto}
.accent{color:var(--gold);font-style:italic}
.video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--navy-deep);box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video video{object-fit:contain;background:var(--navy-deep)}
.video-facade{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:var(--navy-deep);cursor:pointer}
.video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-facade .play{position:relative;margin:0}
.video-facade:focus-visible{outline:3px solid var(--focus-on-dark);outline-offset:-3px}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff}
.video-placeholder small{color:var(--on-navy);font-size:.85rem}
.video-failed{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6px;margin:0;padding:16px;background:var(--navy-deep);color:#fff;text-align:center;line-height:1.4}
.video-failed a{display:inline-block;padding:12px 4px;margin:-12px 0;color:var(--gold);font-weight:700;text-decoration:underline}
.video-failed a:focus-visible{outline:3px solid var(--focus-on-dark);outline-offset:2px}
.play{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--gold);color:var(--gold-text);font-size:1.6rem;margin-bottom:6px;box-shadow:0 0 0 10px rgba(var(--gold-rgb),.18)}
.cta-block{margin-top:26px}
.cta-block.center{text-align:center;margin-top:34px}
.cta-note{margin:12px 0 0;font-size:.88rem;opacity:.85}
.rating{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;font-size:.92rem;text-decoration:none;color:var(--ink)}
.rating-dark{color:#fff}
.rating strong{font-weight:800}
/* Named exception: Trustpilot's own star colour. */
.stars{display:inline-flex;gap:2px;color:#00b67a;font-size:1rem}
.hero-sub{max-width:640px;margin:22px auto 0;font-size:1.08rem}

/* Laptops and desktops: the first screen is the hero down to its button. The
   video takes the room the copy leaves (any brand's copy, any screen), keeps
   16:9, and never drops below 150px tall; the button stays in view. While
   the cookie banner sits over the button or the note under it, the first
   screen gets shorter by what they need to show above it (--consent-fold,
   src/js/consent-room.js). */
@media (min-width:821px) and (min-height:501px){
  .hero-fold{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--hero-top) - var(--consent-fold,0px));min-height:calc(100svh - var(--hero-top) - var(--consent-fold,0px));padding-bottom:16px}
  .video-slot{flex:1 1 0;width:100%;min-height:150px;max-height:405px;display:flex;align-items:center;justify-content:center;container-type:size}
  .video-slot>.video{flex:none;width:100%;width:min(100%,100cqh * 16 / 9)}
  .hero h1{font-size:clamp(2rem,min(5.4vw,6.4svh),3.6rem)}
  .hero .cta-block{margin-top:20px}
}
@media (min-width:821px) and (min-height:501px) and (max-height:820px){
  .logo-hero{margin-bottom:16px}
  .pill{margin-bottom:12px}
  .promise{margin-bottom:16px}
}
/* A phone on its side: a headline sized to the short screen, and the whole
   video fits it. */
@media (max-height:500px){
  .logo-hero{height:30px;margin-bottom:12px}
  .pill{margin-bottom:10px}
  .hero h1{font-size:clamp(1.7rem,min(5.4vw,8svh),3.6rem)}
  .hero .video{max-width:min(720px,calc((100svh - 60px) * 16 / 9))}
}

/* Stats strip */
.stats{background:var(--navy);border-top:1px solid rgba(255,255,255,.08);padding:26px 0 34px}
.stats dl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;text-align:center}
.stats dt{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;color:var(--gold);letter-spacing:-.02em}
.stats dd{margin:0;color:var(--on-navy);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* Bands */
.band{padding:84px 0}
.band-paper{background:var(--paper)}
.band-navy{background:var(--navy);color:var(--on-navy)}
.band-navy h2,.band-navy h3{color:#fff}
.section-head{max-width:720px;margin:0 auto 40px;text-align:center}
.section-head p{font-size:1.08rem}
.final{text-align:center}
.final p{font-size:1.1rem}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{margin:0;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 30px -24px rgba(var(--ink-rgb),.5)}
.review blockquote{margin:0;color:var(--ink);font-size:1rem;line-height:1.55;flex:1}
.review blockquote::before{content:"\201C"}
.review blockquote::after{content:"\201D"}
.review figcaption{display:flex;align-items:center;gap:12px;font-size:.92rem}
.review figcaption img,.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.avatar{display:grid;place-items:center;background:var(--paper-2);color:var(--ink);font-weight:800}
.review figcaption strong{display:block;color:var(--ink)}
.review figcaption small{color:var(--ink-soft)}
.review-placeholder{border:2px dashed var(--gold);align-items:center;justify-content:center;min-height:160px;font-weight:700;color:var(--ink)}

/* Problem cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px}
.card .num{display:inline-block;font-weight:800;color:var(--accent-text);font-size:.85rem;letter-spacing:.1em;margin-bottom:10px}
.card p{margin:0}

/* System steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.steps li{counter-increment:s;padding:24px;background:var(--navy-2);border:1px solid rgba(255,255,255,.07);border-radius:16px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--gold-text);font-weight:800;margin-bottom:14px}
.steps p{margin:0;font-size:.96rem}

/* Founder */
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-width:0;gap:56px;align-items:center}
.founder img{border-radius:20px;box-shadow:0 30px 60px -30px rgba(var(--ink-rgb),.55)}
.founder p{font-size:1.06rem}

/* Call timeline */
.timeline{list-style:none;counter-reset:t;padding:0;margin:0 auto;max-width:760px;display:grid;gap:14px}
.timeline li{counter-increment:t;position:relative;padding:22px 24px 22px 76px;background:var(--white);border:1px solid var(--line);border-radius:16px}
.timeline li::before{content:counter(t);position:absolute;left:22px;top:22px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800}
.timeline p{margin:0}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;color:var(--ink);font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--accent-text);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px}

/* Footer */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.62);padding:40px 0;font-size:.85rem;text-align:center}
.logo-footer{height:32px;margin:0 auto 18px;filter:brightness(0) invert(1);opacity:.85}
.disclaimer{max-width:720px;margin:0 auto 12px}
.legal{margin:0}
.business{margin:0 0 8px}
.business a{color:inherit}
/* Links big enough to tap; one inside a sentence grows its tap area, not its line. */
.legal a,.app-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.business a,.fine a{display:inline-block;padding:12px 0;margin:-12px 0}
.risk{margin:18px auto 0;max-width:720px;text-align:center;font-size:.8rem;opacity:.8}
.next-steps{text-align:left;max-width:440px;margin:26px auto 0;padding-left:1.3em;display:grid;gap:8px;color:var(--ink)}
.host{display:flex;align-items:center;gap:12px;justify-content:center;margin:24px auto 0;max-width:440px;text-align:left;font-size:.92rem}
.host img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top}
.on-outcome .app-foot p:first-child{display:none}

/* Sticky button on phones, tablets and narrow windows, once the hero's own
   button has scrolled away */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(var(--navy-rgb),.94);backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .25s ease}
.sticky-cta.show{transform:none}
.sticky-cta .btn{display:flex;width:100%;max-width:520px;margin:0 auto;min-height:52px;padding:12px 20px}
.vsl-page .footer{padding-bottom:110px}

/* Consent: a compact bar at the bottom, text beside the buttons where it
   fits; on a wide desktop a card in the corner (narrower, a card would sit
   over the hero's button). */
.consent{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));z-index:60;max-width:680px;margin:0 auto;background:var(--navy-2);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 8px 8px 14px;box-shadow:0 12px 32px rgba(0,0,0,.45);display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap}
.consent[hidden]{display:none}
html.consent-ask .consent[hidden]{display:flex}
.consent p{margin:0;flex:1 1 150px;font-size:.78rem;line-height:1.4}
.consent-actions{display:flex;gap:6px;margin-left:auto}
.consent .btn{min-height:44px;padding:0 14px;font-size:.88rem;border-radius:10px}
@media (min-width:1100px) and (min-height:501px) and (pointer:fine){
  /* Narrower beside a hero whose call to action is wide (--consent-w); the
     bar after all in a window too short for the card beside it
     (data-consent-bar). Both src/js/consent-room.js. */
  html:not([data-consent-bar]) .consent{left:max(20px,env(safe-area-inset-left));right:auto;bottom:calc(20px + env(safe-area-inset-bottom));max-width:var(--consent-w,380px);margin:0;padding:14px 16px;gap:12px;border-radius:14px}
  html:not([data-consent-bar]) .consent p{flex-basis:100%;font-size:.88rem;line-height:1.6}
  html:not([data-consent-bar]) .consent-actions{margin-left:0}
  html:not([data-consent-bar]) .consent .btn{padding:0 18px;font-size:.92rem}
  .sticky-cta{display:none}
  .vsl-page .footer{padding-bottom:40px}
}

/* While the banner shows and the first screen has no other room for its main
   button above it (src/js/consent-room.js): a version page leaves out its
   eyebrow, then its promise, and the questions sit closer together. All back
   once the visitor chooses. */
html[data-consent-tight] .hero .pill,html[data-consent-tight="2"] .hero .promise{display:none}

/* Screener app */
.screener-page{background:var(--paper)}
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.app-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;max-width:640px;width:100%;margin:0 auto;padding:18px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left))}
.app-head .logo{justify-self:center;height:32px}
.back{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--white);color:var(--ink);font-size:1.2rem;cursor:pointer;box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
.back[hidden]{visibility:hidden;display:grid}
.count{justify-self:end;font-size:.82rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.bar{max-width:600px;width:calc(100% - 40px);margin:0 auto;height:6px;background:var(--line);border-radius:999px;overflow:hidden}
#progress{height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:999px;transition:width .35s ease}
.screener{flex:1;width:100%;max-width:600px;margin:0 auto;padding:34px max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left))}
.screen{animation:in .28s ease both}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen h1{font-size:clamp(1.55rem,4.6vw,2.05rem);margin:0 0 24px}
.lede{font-size:1.02rem;margin:0 0 10px;color:var(--ink-soft)}
.options{display:grid;gap:12px}
.option{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 16px;border:2px solid var(--line);border-radius:14px;background:var(--white);font:600 1.05rem/1.35 var(--font);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .1s;min-height:62px}
@media (hover:hover){.option:hover{border-color:var(--gold)}}
.option .key{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);font-size:.8rem;font-weight:800;color:var(--ink-soft);background:var(--paper)}
.option .label{flex:1}
.option .tick{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--gold-text);font-size:.95rem;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.option[aria-pressed=true]{border-color:var(--gold);background:var(--selected)}
.option[aria-pressed=true] .key{background:var(--gold);border-color:var(--gold);color:var(--gold-text)}
.option[aria-pressed=true] .tick{opacity:1;transform:none}
.text-answer{display:grid;gap:14px}
input[type=text],input[type=email],input[type=tel],input:not([type]){width:100%;padding:16px;border:2px solid var(--field-border);border-radius:14px;background:var(--white);font:500 1.05rem var(--font);color:var(--ink);margin-top:6px;transition:border-color .15s}
input:focus{border-color:var(--focus)}
input[aria-invalid=true]{border-color:var(--error)}
.details{display:grid;gap:16px}
.details label>span{font-weight:700;color:var(--ink);font-size:.92rem}
.details .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.5}
.check input{margin-top:2px;width:22px;height:22px;flex:none;accent-color:var(--focus)}
.fine{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.82rem;color:var(--ink-soft)}
.fine svg{margin-top:3px}
.fine a{color:var(--ink-soft)}
.error-msg{color:var(--error);font-size:.88rem;margin:-6px 0 0}
.outcome{text-align:center;padding-top:10px}
.badge-ok{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--gold);color:var(--gold-text);font-size:1.9rem;box-shadow:0 0 0 10px rgba(var(--gold-rgb),.18)}
.outcome .lede{margin:0 auto 26px;max-width:440px}
.app-foot{max-width:600px;width:100%;margin:0 auto;padding:14px max(20px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));text-align:center;font-size:.8rem;color:var(--ink-soft)}
.app-foot p{margin:4px 0;display:flex;gap:6px;justify-content:center;align-items:center}
/* The questions closer together while the banner shows on a short screen
   (data-consent-tight, src/js/consent-room.js); fields stay 44px to tap. */
html[data-consent-tight] .app-head{padding-top:6px;padding-bottom:6px}
html[data-consent-tight] .screener{padding-top:14px}
html[data-consent-tight] .screen h1{margin-bottom:14px}
html[data-consent-tight="2"] .screener{padding-top:8px}
html[data-consent-tight="2"] .screen h1{margin-bottom:10px;font-size:1.4rem}
html[data-consent-tight="2"] .details{gap:10px}
html[data-consent-tight="2"] .details label>span,html[data-consent-tight="2"] .check{line-height:1.3}
html[data-consent-tight="2"] .details input:not([type=checkbox]){margin-top:3px;padding-top:11px;padding-bottom:11px}

@media (max-width:820px){
  body{font-size:16px}
  .band{padding:60px 0}
  .reviews,.cards{grid-template-columns:1fr}
  .stats dl{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .founder{grid-template-columns:1fr;gap:28px}
  .founder img{max-width:min(380px,100%)}
  .founder>*{min-width:0}
  /* The hero on a phone: tight enough that the button shows above the
     cookie banner on a 360x740 screen with everything in it; a shorter one
     makes room (src/js/consent-room.js). A browser test checks every brand
     from 320x548 up. */
  .hero{--hero-top:14px}
  .logo-hero{height:30px;margin-bottom:14px}
  .pill{margin-bottom:10px;padding:5px 12px;font-size:.72rem}
  .hero h1{font-size:clamp(1.7rem,7.6vw,2.4rem);margin-bottom:10px}
  .promise{font-size:1rem;line-height:1.5;margin-bottom:16px}
  .hero .cta-block{margin-top:16px}
  .btn-xl{width:100%;padding:16px 24px}
  .btn-xxl{padding:20px 24px;font-size:1.2rem}
  /* While the cookie banner shows, the video gives up what the button needs
     to show above it on a short phone (--hero-squeeze, src/js/consent-room.js). */
  .hero .video-slot>.video{max-width:min(720px,calc(100% - var(--hero-squeeze,0px) * 16 / 9))}
}
@media (max-width:480px){.details .row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.urgency{max-width:560px;margin:16px auto 0;padding:10px 14px;border-radius:10px;background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.35);color:var(--urgency-text);font-size:.88rem;font-weight:600}
.signature{font-family:'Brush Script MT','Segoe Script',cursive;font-size:1.9rem;color:var(--ink);margin-top:8px}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.case h3{margin:6px 0 0}
.case p{margin:0}
.case-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy)}
.case-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.case-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.55);transform:scale(1.2)}
.case-video-file .video-facade{background:transparent}
.case-video-file .video-facade img,.case-video-file video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.case-video-file .video-facade .play{position:absolute;left:12px;bottom:12px;width:48px;height:48px;font-size:1.1rem}
.case-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;border:2px dashed var(--gold)}
.case-pending .play{width:48px;height:48px;font-size:1.1rem;margin:0}
.case-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.guarantee{text-align:center}
.guarantee p{font-size:1.15rem;color:#fff}
.seal{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font-size:1.7rem}
@media (max-width:820px){.cases{grid-template-columns:1fr}.case-video-file.upright{aspect-ratio:4/5}}
/* Booking */
.demo-strip{margin:0 0 16px;padding:8px 12px;border-radius:10px;background:rgba(var(--gold-rgb),.18);border:1px solid rgba(var(--gold-rgb),.6);color:var(--ink);font-size:.85rem;font-weight:700;text-align:center}
.demo-strip[hidden]{display:none}
.host-left{justify-content:flex-start;margin:0 0 14px;max-width:none}
.tz{font-size:.88rem;margin:0 0 14px}
/* A text button big enough to tap, without making its line taller. */
.linkish{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;padding:0 4px;background:none;border:0;font:inherit;color:var(--accent-text);font-weight:700;text-decoration:underline;cursor:pointer}
.booking-note{padding:10px 12px;border-radius:10px;background:rgba(var(--error-rgb),.08);color:var(--error);font-size:.9rem}
.days{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;margin:0 -2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.day{flex:0 0 84px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:2px solid var(--line);border-radius:14px;background:var(--white);font:600 .95rem var(--font);color:var(--ink);cursor:pointer}
.day .dow{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:800}
.day .date{font-weight:800}
.day .left{font-size:.72rem;color:var(--accent-text);font-weight:700}
.day[aria-pressed=true]{border-color:var(--gold);background:var(--selected);box-shadow:0 6px 16px -10px rgba(var(--gold-rgb),.9)}
.day:focus-visible,.slot:focus-visible{outline-offset:2px}
@media (hover:hover){.day:hover,.slot:hover{border-color:var(--gold)}}
.skeleton{flex:0 0 84px;height:78px;border-radius:14px;background:linear-gradient(90deg,var(--paper-2),var(--white),var(--paper-2));background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.times-title{font-size:1.15rem;margin:12px 0 4px}
.slot-group h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin:16px 0 8px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot{min-height:52px;border:2px solid var(--line);border-radius:12px;background:var(--white);font:700 1rem var(--font);color:var(--ink);cursor:pointer}
.slot:active{transform:translateY(1px)}
.summary{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--white);margin:0 0 20px}
.summary>div{flex:1;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.summary strong{color:var(--ink);font-size:1rem}
.summary-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--gold-text)}
.center{text-align:center}
.booked h2{font-size:1.25rem;margin:30px 0 12px}
.cal-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 26px}
.cal-links .btn{padding:12px 10px;font-size:.88rem}
.btn-outline{background:var(--white);color:var(--ink);border:2px solid var(--line)}
.booked-video{margin:0 0 8px}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.checklist svg{color:var(--accent-text);margin-top:4px}
.booked .next-steps{max-width:none;margin:0}
.reviews-compact{grid-template-columns:1fr;margin-top:26px}
@media (max-width:480px){.cal-links{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,1fr)}}
.options+.text-answer{margin-top:14px}
.text-answer[hidden]{display:none}
/* Short landing version: one screen */
/* Its one screen is the room above the cookie banner on a laptop (--consent-fold). */
.hero-short{--hero-top:16px;min-height:calc(100svh - var(--consent-fold,0px));display:flex;align-items:center;padding:var(--hero-top) 0 28px}
.hero-short>.wrap{flex:1;min-width:0}
.hero-short h1{margin-bottom:16px}
.hero-short .video{margin-top:0}