/* ============ SwFl Ductless Pros: v3 premium ============ */
/* Metric-matched local fallbacks + font-display:optional = no layout shift when web fonts arrive (CLS fix).
   On a slow first visit the page renders in the fallback; repeat views use the preloaded web fonts. */
@font-face{font-family:"Open Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:105.48%;ascent-override:101.65%;descent-override:27.86%;line-gap-override:0%}
@font-face{font-family:"Source Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:93.6%;ascent-override:104.9%;descent-override:29.1%;line-gap-override:0%}
@font-face{font-family:"Open Sans";src:url(assets/opensans-regular.woff2) format("woff2");font-weight:400;font-display:optional}
@font-face{font-family:"Open Sans";src:url(assets/opensans-700.woff2) format("woff2");font-weight:700 800;font-display:optional}
@font-face{font-family:"Open Sans";src:url(assets/opensans-italic.woff2) format("woff2");font-style:italic;font-display:optional}
@font-face{font-family:"Source Sans Pro";src:url(assets/sourcesanspro-regular.woff2) format("woff2");font-weight:400;font-display:optional}
@font-face{font-family:"Source Sans Pro";src:url(assets/sourcesanspro-700.woff2) format("woff2");font-weight:700;font-display:optional}
@font-face{font-family:"Source Sans Pro";src:url(assets/sourcesanspro-italic.woff2) format("woff2");font-style:italic;font-display:optional}
@font-face{font-family:"Roboto Slab";src:url(assets/robotoslab-700.woff2) format("woff2");font-weight:700;font-display:optional}

:root{
  --blue:#149EFC; --blue2:#0174C7; --red:#D0021B; --yellow:#F8E71C; --orange:#F5A623; --green:#7ED321;
  --ink:#06121f; --ink2:#0b1d31; --paper:#f6f8fb; --muted:#8aa0b6; --line:rgba(255,255,255,.12);
  --warm:1; /* 1 = hot, 0 = cool; driven by scroll (v3.js) */
  --r:18px; --ease:cubic-bezier(.2,.8,.2,1);
  --sticky-h:0px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font-family:"Source Sans Pro","Source Sans Fallback",system-ui,sans-serif;font-size:19px;line-height:1.55;color:#e8eef5;background:var(--ink);overflow-x:hidden}
img,video,canvas{max-width:100%;display:block}
a{color:var(--blue)}
.wrap{width:min(1240px,92vw);margin:0 auto}
.narrow{width:min(860px,92vw)}
[hidden]{display:none!important}
.small{font-size:.85em}.muted{color:var(--muted)}
.green{color:var(--green)}.orange{color:var(--orange)}.white-txt{color:#fff}
.lbl-red{display:inline-block;background:var(--red);color:#fff;font:700 .72em/1 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:.08em;padding:.45em .6em;border-radius:6px;vertical-align:.12em;margin-right:.35em}

/* ---------- 3D layer + lighting ---------- */
.scene-layer{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict;opacity:calc(1 - var(--scene-out,0))}
.scene-layer.offscreen canvas{visibility:hidden}
.scene-layer canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.scene-layer.ready canvas{opacity:1}
.haze{position:absolute;inset:-10%;transition:opacity .2s linear}
.haze-warm{opacity:calc(var(--warm)*.9);background:radial-gradient(60% 55% at 72% 38%,rgba(245,120,35,.38),transparent 70%),radial-gradient(45% 40% at 15% 85%,rgba(208,2,27,.22),transparent 70%)}
.haze-cool{opacity:calc((1 - var(--warm))*.9);background:radial-gradient(60% 55% at 72% 38%,rgba(20,158,252,.36),transparent 70%),radial-gradient(45% 40% at 15% 85%,rgba(0,220,255,.18),transparent 70%)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header,main,footer,section,nav{position:relative;z-index:1}
.stage{position:relative}
.unit-fallback{width:100%;height:auto;object-fit:contain;transition:opacity .6s var(--ease)}
.scene-ready .unit-fallback{opacity:0}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);background:rgba(6,18,31,.55);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{color:#fff;text-decoration:none;font:400 20px "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:-.01em;display:flex;align-items:center;gap:.45em}
.logo strong{font-weight:700}
.logo-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue),#5fd3ff);color:#fff;font-size:18px;box-shadow:0 6px 20px rgba(20,158,252,.45)}
.topbar-cta{display:flex;gap:16px;align-items:center}
.tb-call{color:#fff;text-decoration:none;font-weight:700}

/* ---------- buttons ---------- */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font:700 17px/1 "Open Sans","Open Sans Fallback",sans-serif;text-decoration:none;letter-spacing:.01em;transform:translate(var(--mx),var(--my));transition:transform .35s var(--ease),box-shadow .3s,background .3s,filter .2s;will-change:transform}
.btn:active{filter:brightness(.92)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-yellow{background:var(--yellow);color:#111;box-shadow:0 10px 30px rgba(248,231,28,.25)}
.btn-yellow:hover{box-shadow:0 14px 40px rgba(248,231,28,.42)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(208,2,27,.3)}
.btn-blue{background:var(--blue);color:#fff}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn-ghost{background:transparent;color:#4d6178;border:1px solid #cdd7e2}
.btn-sm{min-height:40px;padding:0 18px;font-size:15px}
.tb-short{display:none}
.btn-xl{min-height:64px;padding:0 40px;font-size:20px}

/* ---------- hero ---------- */
.hero{padding:36px 0 56px}
.hero>.wrap{width:min(1320px,92vw)}
/* Desktop: copy left; video on top + quiz directly below on the right. The right column may run below the fold. */
.hero-grid{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:56px;row-gap:0;align-items:center}
/* desktop: left column = head, details, cta, disclosure (rows 1-4); right column = video spanning rows 1-4, centred */
.hero-grid>.hero-head{grid-column:1;grid-row:1;padding-top:12px}
.hero-grid>.hero-details{grid-column:1;grid-row:2}
.hero-grid>.hero-cta{grid-column:1;grid-row:3;margin-top:0}
.hero-grid>.hero-disclosure{grid-column:1;grid-row:4}
.hero-grid>.hero-side{grid-column:2;grid-row:1/5;align-self:center}

.hero-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero-watch{text-align:center}.hero-watch .kicker{margin-bottom:8px}
.watch-title{margin:0;font-size:clamp(24px,2.2vw,34px);text-align:center;text-wrap:balance}
/* desktop: right column top-aligned with the left column. Same 12px top padding as .hero-head, so the "Watch"
   kicker and the eyebrow (both 13px/1) start on the same y; compact heading so the video starts near the headline */
@media (min-width:981px){
  .hero-grid>.hero-side{align-self:start;padding-top:12px;gap:14px}
  .hero-watch .kicker{margin-bottom:6px}
  .hero-watch .watch-title{font-size:clamp(22px,2vw,30px);line-height:1.15}
}
/* quiz form: its own section directly below the hero */
.quote-sec{position:relative;padding:72px 0 96px}
.quote-wrap{width:min(820px,92vw)}
.quote-head{text-align:center;margin-bottom:28px}
.quote-head .h2{margin-bottom:10px}
.quote-lead{margin:0 auto;max-width:34em;color:#c9d6e3;font-size:18px}
.hero-video{width:100%}
.hero-bullets{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.hero-bullets li{position:relative;padding-left:30px;font-size:17px;line-height:1.4;color:#dce7f2}
.hero-bullets li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(126,211,33,.16);color:var(--green);font:800 13px/20px "Open Sans","Open Sans Fallback",sans-serif;text-align:center}
.opts input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.eyebrow{margin:0 0 12px;font:700 13px/1 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#9fdcff}
.h-hero{margin:0;font:800 clamp(34px,3.9vw,58px)/1.05 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:-.025em;color:#fff}
/* word masks: padding + equal negative margin = room for descenders/apostrophes/overhang with zero layout change */
.h-hero .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .14em .32em;margin:-.12em -.14em -.32em}
.h-hero .w>span{display:inline-block}
/* intro runs only when html.intro is set (inline head script); no JS = no animation = text simply visible */
.intro .h-hero .w>span{animation:wordIn .7s var(--ease) both;animation-delay:calc(var(--i)*35ms)}
@keyframes wordIn{from{transform:translateY(140%)}to{transform:none}}
.h-sub{margin:18px 0 12px;font-size:clamp(18px,1.45vw,21px);color:#c9d6e3;max-width:36em}
.intro .h-sub,.intro .h-urgency{animation:fadeUp .6s .25s var(--ease) both}
/* safety net: 1.3s after start the head script sets .intro-done, which forces the final (visible) state */
.intro-done .h-hero .w>span,.intro-done .h-sub,.intro-done .h-urgency{animation:none!important;opacity:1!important;transform:none!important}
@keyframes settle{from{transform:translateY(10px)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.h-urgency{margin:0 0 6px;font:700 16px/1.45 "Open Sans","Open Sans Fallback",sans-serif;color:#fff} /* Open Sans 700 is preloaded: no late font swap re-wrapping this line (CLS) */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 14px}
.hero-disclosure{font-size:13.5px;line-height:1.45;color:var(--muted);max-width:40em;margin:0}
.hero-disclosure a{color:#cfe7ff}

/* ---------- quiz card ---------- */
.quiz-card{background:rgba(255,255,255,.97);color:#13202e;border-radius:24px;padding:28px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.4) inset;position:relative}
.quiz-card .h3{margin:0;font:800 24px/1.15 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:-.01em;color:#0b1d31;text-align:left}
.quiz-sub{margin:4px 0 14px;color:#5b6d80;font-size:15px}
.progress{height:6px;background:#e7edf3;border-radius:6px;overflow:hidden;margin-bottom:18px}
.progress .bar{height:100%;width:20%;background:linear-gradient(90deg,var(--blue),#5fd3ff);border-radius:6px;transition:width .5s var(--ease)}
.step{border:0;padding:0;margin:0;min-height:236px}
.step legend{font:700 19px/1.3 "Open Sans","Open Sans Fallback",sans-serif;color:#0b1d31;margin-bottom:12px;padding:0}
.step.enter{animation:stepIn .45s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:flex;align-items:center;min-height:56px;padding:10px 14px;border:1.5px solid #d4dde7;border-radius:14px;font-weight:700;color:#1d2f42;background:#fff;transition:border-color .2s,background .2s,transform .2s var(--ease),box-shadow .2s}
.opts label:hover span{border-color:var(--blue);transform:translateY(-1px)}
.opts input:checked+span{border-color:var(--blue);background:#eaf6ff;box-shadow:0 0 0 3px rgba(20,158,252,.18)}
.opts input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.txt{display:block;width:100%;min-height:52px;margin:0 0 10px;padding:12px 14px;border:1.5px solid #d4dde7;border-radius:12px;font:inherit;font-size:17px;color:#13202e;background:#fff;transition:border-color .2s,box-shadow .2s}
.txt:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,158,252,.18)}
.txt.bad{border-color:var(--red);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:#44566a;margin:4px 0 4px;cursor:pointer}
.consent input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--blue)}
.msg{min-height:1.2em;margin:6px 0 0;font-size:14.5px;font-weight:700}
.msg.ok{color:#2e7d0f}.msg.err{color:var(--red)}
.nav{display:flex;gap:10px;justify-content:space-between;margin-top:14px}
.nav .js-next,.nav .js-submit{flex:1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.thanks{text-align:left;padding:8px 0;outline:0}
.thanks h3{font:800 22px/1.25 "Open Sans","Open Sans Fallback",sans-serif;color:#0b1d31;margin:6px 0 8px}
.thanks{animation:stepIn .5s var(--ease) both}

/* ---------- trust bar ---------- */
.trustbar{position:relative;z-index:1;border-block:1px solid var(--line);background:rgba(6,18,31,.6);backdrop-filter:blur(10px)}
.trustbar ul{list-style:none;margin:0 auto;padding:16px 0;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;font-weight:700;color:#dfe9f3;font-size:16px}
.trustbar a{color:#cfe7ff}

/* ---------- pinned story ---------- */
.story{height:400vh;position:relative}
/* 3D entrance anchor (empty box): straddles the boundary between the quiz form and the story */
.story>.stage-enter{position:absolute;left:50%;top:0;width:min(420px,60vw);height:150px;transform:translate(-50%,-50%);pointer-events:none}
/* Pinned frame. Never a fixed height + overflow:hidden (that clipped the last panel's CTA on phones whose visible
   height is smaller than the content). It is at least one small-viewport tall, grows to fit its content, and v3.js
   sets --story-top = min(0, viewport - frame height) so that when the frame is taller than the screen it pins with
   its BOTTOM edge on screen (the CTA stays visible and clickable). Horizontal overflow is clipped without
   creating a scroll container. */
.story-sticky{position:sticky;top:var(--story-top,0px);min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:visible;overflow-x:clip}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
/* panels are stacked in one grid cell, so the stack is as tall as the tallest panel (no absolute overflow) */
.story-panels{position:relative;display:grid;min-height:440px}
.panel{grid-area:1/1;position:relative;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(30px);transition:none}
.panel[data-panel="0"]{opacity:1;transform:none}
.kicker{margin:0 0 10px;font:700 13px/1 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.kicker.warm{color:var(--orange)}.kicker.cool{color:#7fd0ff}
.h2{margin:0 0 16px;font:800 clamp(30px,3.3vw,48px)/1.08 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:-.02em;color:#fff}
.panel p{color:#c9d6e3;margin:0 0 12px}
.xlist,.checks{list-style:none;padding:0;margin:0 0 18px}
.xlist li,.checks li{position:relative;padding-left:32px;margin:0 0 10px;color:#d3dee9}
.xlist li::before{content:"✕";position:absolute;left:0;top:0;color:#ff6a3d;font-weight:700}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.stage-story{height:min(56vh,520px)}
.stage-story .unit-fallback{position:absolute;inset:0;margin:auto;width:90%;height:auto;top:50%;transform:translateY(-50%)}
.temp-readout{position:absolute;right:4%;bottom:6%;font:800 64px/1 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:-.03em;color:#fff;text-shadow:0 0 30px rgba(255,140,40,calc(var(--warm)*.8)),0 0 30px rgba(20,158,252,calc((1 - var(--warm))*.8))}
.temp-readout small{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:right}
.story-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.story-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--blue))}

/* ---------- sections ---------- */
.sec{padding:110px 0}
.sec.dark{background:linear-gradient(180deg,rgba(6,18,31,0),rgba(6,18,31,.92) 18%,var(--ink))}
.sec.white{background:var(--paper);color:#13202e}
.sec.white .h2,.sec.white .h3{color:#0b1d31}
.sec.letter{background:var(--ink2)}
.sec.black{background:#000}
.h3{margin:0 0 26px;font:800 clamp(26px,2.6vw,38px)/1.12 "Open Sans","Open Sans Fallback",sans-serif;letter-spacing:-.015em;text-align:center;color:#fff}
.video-sec .h2{text-align:center}.video-sec .kicker{text-align:center}
.video-box{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--line);aspect-ratio:16/9;background:#000}
.video-box video{width:100%;height:100%;object-fit:cover}
.unmute{position:absolute;left:14px;top:14px;border:0;border-radius:999px;padding:9px 14px;background:rgba(0,0,0,.6);color:#fff;font:700 14px "Open Sans","Open Sans Fallback",sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
video::cue{background:rgba(0,0,0,.72);font-family:"Source Sans Pro","Source Sans Fallback",sans-serif;font-size:20px}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps li{background:#fff;border:1px solid #e1e8ef;border-radius:var(--r);padding:22px;box-shadow:0 12px 30px rgba(11,29,49,.06);transition:transform .4s var(--ease),box-shadow .4s}
.steps li:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,29,49,.12)}
.steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#5fd3ff);color:#fff;font:800 18px "Open Sans","Open Sans Fallback";margin-bottom:12px}
#how .wrap.narrow{width:min(1180px,92vw)}
#how p.small{text-align:center;margin-top:22px;color:#4a5d70}
#how p.small a{color:#0a5fa8}

.example-tag{text-align:center;color:var(--orange);font-weight:700;margin:-12px 0 34px}
.walk{position:relative;padding-left:34px}
.walk::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.walk::after{content:"";position:absolute;left:9px;top:6px;width:2px;height:calc(var(--walk,0)*100% - 12px);background:linear-gradient(var(--orange),var(--blue))}
.walk-step{position:relative;margin:0 0 30px}
.walk-step::before{content:"";position:absolute;left:-31px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--ink2);border:2px solid #7fd0ff}
.walk-step .walk-h{margin:0 0 6px;font:700 21px "Open Sans","Open Sans Fallback",sans-serif;color:#fff}
.walk-step p{margin:0;color:#c9d6e3}

.partner{background:linear-gradient(180deg,#0e2740,#0b1d31)}
.partner-name{text-align:center;font:800 28px "Open Sans","Open Sans Fallback";color:#fff;margin:-8px 0 18px}
.partner-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:0 0 18px}
.partner-facts a{color:#9fdcff}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0}
.gallery figure{margin:0}.gallery img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:6px}

.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.review{background:#0d1824;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.review .stars{color:var(--yellow);letter-spacing:2px}
.review blockquote{margin:8px 0;color:#e8eef5}
.review cite{color:var(--muted);font-style:normal;font-size:15px}

.offer-box{background:#fff;color:#13202e;border-radius:28px;padding:48px clamp(22px,5vw,64px);max-width:880px;margin:0 auto;text-align:center;box-shadow:0 40px 100px rgba(20,158,252,.15)}
.offer-box .h3{color:#0b1d31}
.offer-box p{font-size:20px}
.urg-inline{font-weight:700}

details{border-bottom:1px solid #dbe3ec;padding:6px 0}
summary{cursor:pointer;list-style:none;font:700 19px/1.35 "Open Sans","Open Sans Fallback",sans-serif;color:#0b1d31;padding:14px 36px 14px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:26px;color:var(--blue);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 14px;color:#3d5064}

.final{text-align:center;background:radial-gradient(60% 60% at 50% 30%,rgba(20,158,252,.18),transparent 70%),#000}
.hurry{display:inline-block;background:#fff;color:var(--red);font:800 15px "Open Sans","Open Sans Fallback";letter-spacing:.08em;padding:8px 14px;border-radius:8px}
.final .big{font:800 clamp(26px,3vw,40px)/1.15 "Open Sans","Open Sans Fallback";margin:8px 0}
.slotbox{display:inline-flex;align-items:center;gap:14px;margin:12px auto 18px;padding:12px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04)}
.slot-num{font:800 56px/1 "Open Sans","Open Sans Fallback";color:var(--green);font-variant-numeric:tabular-nums}
.slot-lbl{text-align:left;color:#c9d6e3;font-size:15px;line-height:1.3}
.call-line a{color:#fff;font-weight:700}
.ps{max-width:40em;margin:26px auto 0;color:#c9d6e3}

.footer{background:#03080e;color:var(--muted);padding:44px 0 110px;font-size:15px;text-align:center;border-top:1px solid var(--line)}
.footer a{color:#cfe7ff}
.disclosure{max-width:62em;margin:10px auto}

/* reveal (JS adds .in) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.split .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .14em .32em;margin:-.12em -.14em -.32em}
.split .sw>span{display:inline-block;transform:translateY(140%);transition:transform .9s var(--ease);transition-delay:calc(var(--i)*35ms)}
.split.in .sw>span{transform:none}
.panel .split .sw>span{transform:none}

/* parallax blobs */
.depth{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.depth i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;will-change:transform}
.sec>.wrap{position:relative;z-index:1}

/* sticky mobile CTA */
.sticky-cta{display:none}

/* ---------- desktop floating CTA dock (>980px) ---------- */
.dock{display:none}
@media (min-width:981px){
  .footer{padding-bottom:140px}
  .dock{display:flex;align-items:center;gap:14px;position:fixed;left:50%;bottom:22px;z-index:65;padding:10px 10px 10px 22px;border-radius:999px;
    background:rgba(6,18,31,.72);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
    border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset;
    transform:translate(-50%,160%);opacity:0;visibility:hidden;
    transition:transform .75s cubic-bezier(.34,1.56,.64,1),opacity .35s ease,visibility 0s linear .75s}
  .dock.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .75s cubic-bezier(.34,1.56,.64,1),opacity .35s ease,visibility 0s}
  .dock-note{margin:0 4px 0 0;font:600 13.5px/1.2 "Open Sans","Open Sans Fallback",sans-serif;color:#d3dfeb;white-space:nowrap}
  .dock-quote,.dock-call{--mx:0px;--my:0px;transform:translate(var(--mx),var(--my));transition:transform .35s var(--ease);position:relative;display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;text-decoration:none;white-space:nowrap;font:800 16.5px/1 "Open Sans","Open Sans Fallback",sans-serif;isolation:isolate}
  .dock-in{display:inline-flex;align-items:center;gap:.45em;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
  .dock-quote:hover .dock-in,.dock-call:hover .dock-in{transform:scale(1.04)}
  /* primary: vivid yellow -> orange, glow, shimmer sweep (~every 4s), soft pulse ring */
  .dock-quote{color:#1a0f00;background:linear-gradient(100deg,#FFE600 0%,#FFB800 45%,#FF8A00 100%);overflow:hidden;
    box-shadow:0 0 0 1px rgba(255,214,0,.55),0 10px 30px rgba(255,138,0,.45),0 0 42px rgba(255,190,0,.35)}
  .dock-quote::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:dockShimmer 4s ease-in-out 1.2s infinite}
  .dock-arrow{display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
  .dock-quote:hover .dock-arrow,.dock-quote:focus-visible .dock-arrow{transform:translateX(5px)}
  .dock::before{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:999px;inset:-1px;box-shadow:0 0 0 0 rgba(255,184,0,.45);animation:dockPulse 2.8s ease-out infinite}
  /* secondary: electric blue, dark text for AA contrast */
  .dock-call{color:#03142a;background:linear-gradient(100deg,#1E90FF 0%,#00C2FF 100%);box-shadow:0 0 0 1px rgba(0,194,255,.5),0 10px 26px rgba(0,150,255,.35)}
  .dock-quote:focus-visible,.dock-call:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .dock:not(.on) *,.dock:not(.on)::before{animation-play-state:paused}
  @keyframes dockShimmer{0%{transform:translateX(-120%)}22%{transform:translateX(120%)}100%{transform:translateX(120%)}}
  @keyframes dockPulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
}
@media (min-width:981px) and (prefers-reduced-motion:reduce){
  .dock,.dock.on{transform:translate(-50%,0);transition:opacity .2s linear,visibility 0s linear .2s}
  .dock.on{transition:opacity .2s linear,visibility 0s}
  .dock-quote::after,.dock::before{animation:none!important;display:none}
}

@media (max-width:980px){
  .hero{min-height:0;padding:22px 0 36px}
  /* Tablet/mobile: single column in DOM order = headline, video, CTA, details, disclosure; then the form section */
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-grid>*{grid-column:1!important;grid-row:auto!important}
  .hero-grid>.hero-head{padding-top:0}
  .hero-side{width:100%;margin:20px 0 0;gap:10px}
  /* compact one-line "Watch" label so the video starts high on the screen */
  .hero-watch{display:flex;align-items:baseline;gap:10px;text-align:left}
  .hero-watch .kicker{margin:0;flex:none;font-size:11px}
  .hero-watch .watch-title{font-size:17px;line-height:1.25;letter-spacing:-.01em;text-align:left;text-wrap:balance}
  .hero-grid>.hero-cta{margin:18px 0 0}
  .hero-grid>.hero-disclosure{margin-top:10px}
  .quote-sec{padding:48px 0 72px}
  .story-grid{grid-template-columns:1fr;gap:10px}
  .story-sticky{align-items:flex-start;padding:68px 0 28px}
  .stage-story{height:26vh;height:26svh;order:-1}
  .story-panels{min-height:0}
  .temp-readout{font-size:40px}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:17.5px}
  .topbar-in{height:56px;gap:10px}.logo{font-size:16px;white-space:nowrap;gap:.4em}.logo-mark{width:28px;height:28px;font-size:16px}.tb-call{display:none}
  .topbar .btn-sm{white-space:nowrap;padding:0 14px;font-size:14px;flex:none}
  .tb-long{display:none}.tb-short{display:inline}
  .h-hero{font-size:34px}
  .intro .h-hero .w>span{animation:none} /* phones: paint the headline immediately */
  .intro .h-sub,.intro .h-urgency{animation:settle .5s var(--ease) both}
  .hero-cta .js-tel{display:none} /* phones: primary CTA right under the video; Call lives in the sticky bar */
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-bullets li{font-size:16px}
  .eyebrow{font-size:11px;letter-spacing:.14em}
  .h-sub{margin:12px 0 10px}
  .quiz-card{padding:22px 18px 18px;border-radius:20px}
  .opts{grid-template-columns:1fr 1fr}
  .opts span{min-height:52px;font-size:16px}
  .step{min-height:0}
  .sec{padding:72px 0}
  .steps{grid-template-columns:1fr}
  .story{height:360vh}
  .h2{font-size:28px}
  .xlist li,.checks li{margin-bottom:6px;font-size:16.5px}
  .panel p{font-size:16.5px}
  .story-sticky{padding-bottom:calc(96px + env(safe-area-inset-bottom))} /* clear the fixed bottom bar below */
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(6,18,31,.88);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;font:800 16px "Open Sans","Open Sans Fallback";text-decoration:none}
  .sc-quote{background:var(--yellow);color:#111}
  .sc-call{background:#0a6bc0;color:#fff;flex:.6!important}
  .footer{padding-bottom:120px}
}

/* reduced motion: static, everything visible */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.split .sw>span{opacity:1!important;transform:none!important}
  .story{height:auto}
  .story-sticky{position:relative;height:auto;display:block;padding:80px 0}
  .story-panels{min-height:0;display:block}
  .panel{position:relative;opacity:1!important;transform:none!important;margin-bottom:40px}
  .scene-layer canvas{display:none}
  .stage-story{height:320px}
  .scene-ready .unit-fallback{opacity:1}
}
.reduced .story{height:auto}
.reduced .story-sticky{position:relative;height:auto;display:block;padding:80px 0}
.reduced .story-panels{min-height:0;display:block}
.reduced .panel{position:relative;opacity:1;transform:none;margin-bottom:40px}
.sec.white .muted{color:#4a5d70}