/* Strech homepage preview · Arbor Bright (homeowner brand) */
@font-face{font-family:Lora;src:url(/home-assets/fonts/lora.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(/home-assets/fonts/albert-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --oat:#F6F3EC; --surface:#FFFFFF; --ink:#1C2A20; --ink2:#5A6353; --ink3:#96A08F;
  --accent:#16A34A; --accent-text:#0E7A37; --on-accent:#0B2412; --wash:#E4F7EC;
  --forest:#20402c; --forest-deep:#173322; --water:#3E8FD0;
  --on-dark:#F6F3EC; --on-dark2:rgba(246,243,236,.78); --green-on-dark:#8FD8A8;
  --hair:rgba(28,42,32,.12); --hair-dark:rgba(246,243,236,.16);
  --leaf:26px 4px 26px 26px; --leaf-sm:16px 4px 16px 16px;
  --shadow:0 10px 30px rgba(38,43,36,.07);
  --serif:Lora,Georgia,serif; --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.22,.8,.22,1); --spring:cubic-bezier(.3,1.4,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--oat);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:var(--green-on-dark)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:60;background:var(--ink);color:var(--oat);padding:8px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:16px}

h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;line-height:1.08}
h2{font-size:clamp(32px,4.2vw,58px)}
.g{color:var(--accent-text)}
.dark .g{color:var(--green-on-dark)}
.eyebrow{font:700 12.5px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text)}
.dark .eyebrow{color:var(--green-on-dark)}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--ink2);max-width:52ch}
.dark .lede{color:var(--on-dark2)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:0;border-radius:var(--leaf);background:var(--accent);color:var(--on-accent);font:700 17px var(--sans);letter-spacing:.005em;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px rgba(22,163,74,.32),inset 0 -2px 0 rgba(0,0,0,.12);transition:background-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn::after{content:"→";font-weight:700;transition:transform .25s var(--ease)}
.btn:hover{background:#13923F;transform:translate3d(0,-2px,0);box-shadow:0 14px 30px rgba(22,163,74,.42),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn:hover::after{transform:translate3d(3px,0,0)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1.5px var(--hair-dark)}
.btn.ghost:hover{background:rgba(246,243,236,.08)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--wash);color:var(--accent-text);font:700 13px/1.2 var(--sans)}

/* ───────── top bar ───────── */
.bar{position:fixed;inset:0 0 auto 0;z-index:40;height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);color:var(--on-dark);transition:color .45s var(--ease)}
.bar::before,.bar::after{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .45s var(--ease);pointer-events:none}
.bar::before{background:linear-gradient(180deg,rgba(15,32,21,.62),rgba(15,32,21,0));height:110px}
.bar::after{background:var(--oat);box-shadow:0 1px 0 var(--hair);opacity:0}
.bar.light{color:var(--ink)}
.bar.light::before{opacity:0}
.bar.light::after{opacity:1}
.brand{justify-self:start;display:flex;align-items:center;gap:10px;text-decoration:none;font:700 22px/1 var(--serif);letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:8px}
.links{display:flex;gap:clamp(18px,2.6vw,36px)}
.links a{font:600 15px var(--sans);text-decoration:none;opacity:.86;padding:10px 2px;position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.links a:hover{opacity:1}
.links a:hover::after{transform:scaleX(1)}
.bar .btn{justify-self:end;min-height:46px;padding:0 22px;font-size:15.5px}
@media (max-width:760px){.links{display:none}.bar{grid-template-columns:1fr auto}.bar .btn{min-height:40px;padding:0 14px;font-size:14px}}

/* ───────── stops ───────── */
.stop{position:relative;min-height:100vh;min-height:100svh}
.dark{background:var(--forest);color:var(--on-dark)}

/* rise-in: content eases up once when its stop arrives */
.rise{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms + 120ms)}
.in .rise{opacity:1;transform:none}

/* ───────── 1 · film ───────── */
.film{height:100vh;height:100svh;overflow:hidden;background:var(--forest)}
.scene{position:absolute;left:0;top:0;width:2000px;height:1125px;transform-origin:0 0;will-change:transform}
.scene>canvas,.scene>img,.scene>svg{position:absolute;inset:0;width:100%;height:100%}
.scene>img{opacity:0}
#reel{transform-origin:49% 59%;will-change:transform}
#lay-kitchen{transform-origin:50% 50%;will-change:transform,opacity}
.marks .ring{opacity:0;transition:opacity .5s var(--ease)}
.marks .ring.on{opacity:1}
.marks .core{fill:var(--accent);stroke:#fff;stroke-width:4;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .55s var(--spring),fill .4s}
.marks .on .core{transform:scale(1)}
.marks .pulse{fill:none;stroke:var(--accent);stroke-width:3;transform-box:fill-box;transform-origin:center;opacity:0}
.marks .on .pulse{animation:pulse 2.2s var(--ease) infinite}
.marks .on .p2{animation-delay:1.1s}
.marks .alert .core{fill:var(--water)}
.marks .alert .pulse{stroke:#fff;animation-duration:1.5s}
.marks .alert .p2{animation-delay:.75s}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.sheen{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.15,.4);transition:opacity 1.4s var(--ease),transform 2.2s var(--ease)}
.sheen.on{opacity:.9;transform:none}
.sheen.on ellipse{animation:shimmer 3.2s ease-in-out infinite}
@keyframes shimmer{50%{opacity:.62}}

.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,38,26,.2) 0%,rgba(18,38,26,0) 22%,rgba(18,38,26,.35) 45%,rgba(18,38,26,.8) 68%,rgba(18,38,26,.94) 100%),linear-gradient(90deg,rgba(18,38,26,.55) 0%,rgba(18,38,26,.2) 45%,rgba(18,38,26,0) 70%);transition:opacity .9s var(--ease)}
/* words over the photo: a soft dark halo so every line reads on bright siding and sky */
.hero,.caps{text-shadow:0 2px 20px rgba(8,22,14,.65),0 1px 3px rgba(8,22,14,.5)}
.hero .eyebrow,.cap .eyebrow{font-size:14px;color:#C2EFD0}
.hero .lede{font-size:clamp(18px,1.55vw,22px);font-weight:500;color:rgba(246,243,236,.95);max-width:46ch}
.cap small{font-size:13.5px;color:rgba(246,243,236,.88)}
.scrim.side{background:linear-gradient(90deg,rgba(20,42,28,.9) 0%,rgba(20,42,28,.72) 30%,rgba(20,42,28,.12) 58%,rgba(20,42,28,0) 72%),linear-gradient(180deg,rgba(20,42,28,.35),rgba(20,42,28,0) 30%);opacity:0}
.film.alert .scrim.side{opacity:1}
.film.alert .scrim.base{opacity:.35}

.cab{position:absolute;left:1040px;top:755px;width:320px;height:270px;perspective:700px;opacity:0;pointer-events:none}
.door{position:absolute;inset:0}
/* the open cabinet: the kitchen photo with the doors taken off, its edges feathered into the room */
.scene>.cab-open{position:absolute;inset:auto;left:990px;top:705px;width:420px;height:315px;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.door{background-size:2000px 1125px;background-position:-1040px -755px;will-change:transform}
.door.l{clip-path:polygon(7px 7px,147px 36px,147px 217px,7px 175px);transform-origin:7px 50%}
.door.r{clip-path:polygon(148px 36px,310px 66px,310px 262px,148px 217px);transform-origin:310px 50%}
.bigsensor{position:absolute;left:0;top:0;z-index:4;width:240px;height:240px;margin:-120px 0 0 -120px;opacity:0;pointer-events:none;will-change:transform,opacity}
.bigsensor img{width:100%;height:auto;margin-top:10%;filter:drop-shadow(0 34px 44px rgba(0,0,0,.5))}
.bs-label{position:absolute;left:100%;top:38%;margin-left:6px;white-space:nowrap;padding:12px 16px;border-radius:var(--leaf-sm);background:rgba(18,38,25,.94);color:var(--on-dark);font:600 15px/1.35 var(--sans);box-shadow:inset 0 0 0 1px rgba(246,243,236,.14),0 18px 40px rgba(0,0,0,.35)}
.bs-label b{display:block;color:var(--green-on-dark);font-size:16.5px}
@media (max-width:700px){.bigsensor{width:160px;height:160px;margin:-80px 0 0 -80px}.bs-label{left:50%;top:100%;margin:8px 0 0;transform:translateX(-50%)}}
.tag{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--leaf-sm);background:rgba(255,255,255,.95);color:var(--ink);font:600 14px/1 var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.18);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.tag b{color:var(--accent-text);font-weight:700}
/* the leak under the sink: plays (and keeps dripping) while the film rests on this scene */
.marks .leak{opacity:0;transition:opacity .4s}
.film.wet .marks .leak{opacity:1}
.marks .drop,.marks .splash,.marks .puddle{transform-box:fill-box;transform-origin:center top}
.film.wet .marks .drop{animation:drip 1.5s cubic-bezier(.5,0,.9,.6) infinite}
.film.wet .marks .d2{animation-delay:.75s}
@keyframes drip{0%{transform:translateY(0) scale(.4,.4);opacity:0}12%{transform:translateY(0) scale(1,1);opacity:1}30%{transform:translateY(0) scale(.9,1.15)}82%{transform:translateY(21px) scale(.8,1.35);opacity:1}86%,100%{transform:translateY(22px) scale(1.4,.3);opacity:0}}
.marks .splash{transform-origin:center;opacity:0}
.film.wet .marks .splash{animation:splash 1.5s ease-out infinite;animation-delay:1.25s}
@keyframes splash{0%{transform:scale(.3);opacity:.9}40%{transform:scale(2.2);opacity:0}100%{opacity:0}}
.marks .puddle{transform-origin:center;transform:scale(0,0)}
.film.wet .marks .puddle{animation:puddle 3.2s cubic-bezier(.2,.7,.3,1) 1s forwards}
@keyframes puddle{to{transform:none}}
.film.wet #r-cab .core{animation:wetcore .5s ease 3s forwards}
@keyframes wetcore{to{fill:#3E8FD0}}
.film.wet #r-cab .pulse{animation-duration:1.5s}
.tag .wet-chip{display:none;margin-left:8px;padding:3px 8px;border-radius:99px;background:rgba(62,143,208,.22);color:#A9D3F2;font:700 12px/1 var(--sans)}
.film.wet .tag .wet-chip{display:inline-block;opacity:0;animation:chipin .4s ease 3.1s forwards}
@keyframes chipin{to{opacity:1}}
.tag.on{opacity:1}

.hero,.caps,.alert-copy{position:absolute;z-index:4;left:var(--gut);right:var(--gut)}
.hero{bottom:clamp(40px,9vh,96px);max-width:900px;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.hero h1{font-size:clamp(42px,6.4vw,92px);margin-top:14px;max-width:15ch}
.hero .lede{margin-top:18px}
.film.playing .hero{opacity:0;transform:translate3d(0,-24px,0);pointer-events:none}

.caps{bottom:clamp(40px,9vh,96px);height:9em;pointer-events:none}
.cap{position:absolute;left:0;bottom:0;max-width:min(760px,100%);opacity:0;transform:translate3d(0,26px,0);transition:opacity .28s var(--ease),transform .5s var(--ease)}
.cap.on{opacity:1;transform:none;transition-duration:.7s,.8s;transition-delay:.22s}
.cap.gone{transform:translate3d(0,-18px,0)}
.cap-line{font:700 clamp(28px,3.4vw,48px)/1.12 var(--serif);letter-spacing:-.012em;margin-top:10px;max-width:20ch}
.cap-line b{color:var(--green-on-dark)}
.cap small{display:block;margin-top:10px;font:500 12px/1.4 var(--sans);color:var(--on-dark2)}
.film.alert .caps{opacity:0}

.alert-copy{top:50%;transform:translateY(-46%);max-width:min(520px,42vw);pointer-events:none}
.alert-copy>:not(.steps){opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.film.a-copy .alert-copy>:not(.steps){opacity:1;transform:none}
.film.a-copy .alert-copy>:nth-child(2){transition-delay:.08s}
.film.a-copy .alert-copy>:nth-child(3){transition-delay:.16s}
.alert-copy h2{font-size:clamp(32px,3.6vw,52px);margin-top:12px}
.alert-copy p:not(.eyebrow){margin-top:16px;color:var(--on-dark2);font-size:clamp(16px,1.3vw,19px)}
.steps{list-style:none;margin-top:26px;display:grid;gap:0;position:relative;padding-left:26px}
.steps::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--hair-dark);opacity:0;transition:opacity .5s var(--ease)}
.film.a-steps .steps::before{opacity:1}
.steps::after{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--green-on-dark);transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ease) .1s}
.film.a-steps .steps::after{transform:scaleY(1)}
.steps li{position:relative;padding:8px 0;font:600 16px/1.35 var(--sans);opacity:0;transform:translate3d(-8px,0,0);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.steps li::before{content:"";position:absolute;left:-25px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--forest);box-shadow:inset 0 0 0 2px var(--green-on-dark)}
.steps li:last-child::before{background:var(--green-on-dark)}
.steps .time{display:inline-block;min-width:76px;color:var(--green-on-dark);font-weight:700;font-variant-numeric:tabular-nums}
.film.a-steps .steps li{opacity:1;transform:none}
.film.a-steps .steps li:nth-child(2){transition-delay:.4s}
.film.a-steps .steps li:nth-child(3){transition-delay:.8s}

.inset{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:var(--leaf);background:#fff;color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.inset svg{width:64px;height:64px;flex:none;transform:scale(.6);transition:transform .7s var(--spring)}
.inset.on{opacity:1}
.inset.on svg{transform:none}
.inset b{display:block;font:700 15px/1.2 var(--sans)}
.inset .chip{margin-top:6px;background:#E3EFF9;color:#1F5F92}

.notif{position:absolute;z-index:5;right:var(--gut);top:clamp(88px,16vh,150px);width:min(420px,calc(100vw - 32px));display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 16px 16px;border-radius:24px;background:rgba(250,249,245,.97);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.32);opacity:0;transform:translate3d(0,-26px,0) scale(.96);transition:opacity .5s var(--ease),transform .75s var(--spring);pointer-events:none}
.film.a-notif .notif{opacity:1;transform:none}
.notif>img{width:44px;height:44px;border-radius:11px}
.n-top{display:flex;justify-content:space-between;font:600 13px/1.2 var(--sans);color:var(--ink2)}
.n-top b{color:var(--ink);letter-spacing:.02em}
.n-title{margin-top:3px;font:700 17px/1.25 var(--sans)}
.n-text{margin-top:2px;font-size:15px;line-height:1.4;color:var(--ink2)}
.n-btn{margin-top:12px;min-height:44px;width:100%;font-size:15px;pointer-events:none;cursor:default}

@media (min-width:901px){.scrim.base{-webkit-mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.6) 82%);mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.6) 82%)}}
@media (max-width:900px){
  .scrim.base{background:linear-gradient(180deg,rgba(18,38,26,.35) 0%,rgba(18,38,26,0) 18%,rgba(18,38,26,.1) 32%,rgba(18,38,26,.7) 50%,rgba(18,38,26,.94) 100%)}
  .alert-copy{top:auto;bottom:clamp(28px,6vh,56px);transform:none;max-width:none}
  .scrim.side{background:linear-gradient(180deg,rgba(20,42,28,0) 30%,rgba(20,42,28,.75) 55%,rgba(20,42,28,.95) 100%)}
  .steps{margin-top:18px}
  .steps li{padding:5px 0;font-size:15px}
  .notif{top:84px;left:auto;right:16px;width:min(420px,calc(100vw - 32px))}
  .inset{display:none}
}

/* ───────── 2 · fix ─────────
   The phone is the star: as tall as the screen allows, one live app inside it (the map holds still, the route draws in,
   the van drives to the house, the sheet changes with each step). The words beside it stay quiet and clean. */
.fix{display:grid;align-items:center;overflow:hidden;padding:76px 0 16px}
.fix-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;opacity:.18;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.fix.in .fix-bg{transform:none}
.fix::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 68% 50%,rgba(143,216,168,.12),rgba(23,51,34,0) 60%),radial-gradient(90% 100% at 70% 50%,rgba(32,64,44,0),rgba(14,30,20,.88))}
.fix-grid{position:relative;display:grid;grid-template-columns:minmax(0,560px) auto;justify-content:center;gap:clamp(24px,5vw,96px);align-items:center}
.fix-copy{max-width:520px}

.dx-line{display:grid;margin-top:14px;font-size:clamp(34px,4.2vw,60px);line-height:1.06}
.dx-cell{grid-area:1/1;align-self:end;opacity:0;transform:translate3d(0,18px,0);transition:opacity .4s var(--ease),transform .55s var(--ease);pointer-events:none}
.dx-cell em{font-style:normal;color:var(--green-on-dark)}
.dispatch[data-state=idle] .dx-tap,.dispatch[data-state=matching] .dx-matching,.dispatch[data-state=accepted] .dx-accepted,
.dispatch[data-state=way] .dx-way,.dispatch[data-state=door] .dx-door,.dispatch[data-state=fixed] .dx-fixed{opacity:1;transform:none;transition-delay:.1s;pointer-events:auto}
.dx-tapbtn{position:relative;display:inline-flex;align-items:center;gap:.28em;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;transition:transform .25s var(--ease)}
.dx-tapbtn .ring{position:relative;width:.6em;height:.6em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .1em rgba(143,216,168,.28)}
.dx-tapbtn .ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--green-on-dark);opacity:0}
.dx-tapbtn.pressed{transform:scale(.94)}
.dx-tapbtn.pressed .ring::after{animation:ripple .7s var(--ease)}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(3);opacity:0}}
.dx-matching i{display:inline-block;width:1.4em;height:.08em;margin-left:.3em;vertical-align:.28em;overflow:hidden;border-radius:2px}
.dx-matching i::before{content:"";display:block;width:calc(100% + .5em);height:100%;background:repeating-linear-gradient(90deg,var(--green-on-dark) 0 .3em,transparent .3em .5em);animation:dash .9s linear infinite}
@keyframes dash{to{transform:translate3d(-.5em,0,0)}}
.dx-subs{display:grid;margin-top:14px}
.dx-subs p{grid-area:1/1;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--on-dark2);max-width:38ch;opacity:0;transition:opacity .4s var(--ease)}
.dx-subs p.on{opacity:1;transition-delay:.15s}

/* five steps, one slim line */
.dx-steps{position:relative;list-style:none;margin-top:30px;display:grid;max-width:340px}
.dx-steps::before,.dx-steps .fill{content:"";position:absolute;left:11px;top:22px;bottom:22px;width:1.5px;background:rgba(246,243,236,.16)}
.dx-steps .fill{background:var(--green-on-dark);transform-origin:top;transform:scaleY(0);transition:transform .8s var(--ease)}
.dx-steps button{position:relative;display:grid;grid-template-columns:24px 1fr;align-items:center;gap:14px;width:100%;padding:9px 0;background:none;border:0;cursor:pointer;text-align:left;color:rgba(246,243,236,.5);font:500 15.5px/1.2 var(--sans);transition:color .35s}
.dx-steps .dot{position:relative;justify-self:center;width:10px;height:10px;border-radius:50%;background:#15301F;box-shadow:0 0 0 1.5px rgba(246,243,236,.32);transition:background-color .35s,box-shadow .35s,transform .5s var(--spring)}
.dx-steps .done button{color:var(--on-dark2)}
.dx-steps .done .dot{background:var(--green-on-dark);box-shadow:none}
.dx-steps .now button{color:var(--on-dark);font-weight:700}
.dx-steps .now .dot{transform:scale(1.3);background:var(--green-on-dark);box-shadow:0 0 0 6px rgba(143,216,168,.18)}
.dx-steps button:hover{color:var(--on-dark)}
.fix-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.fix-cta p{color:var(--on-dark2);font-size:15px;max-width:30ch;line-height:1.45}
.fix-cta b{color:var(--on-dark);font-weight:600}

/* the phone */
.phone-wrap{position:relative;justify-self:center}
.phone-wrap::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:90%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(143,216,168,.2),rgba(143,216,168,0));pointer-events:none}
.phone{position:relative;height:min(calc(100svh - 96px),960px);aspect-ratio:367/772;padding:11px;border-radius:64px;background:linear-gradient(145deg,#2A352D,#0C110D 40%,#1A221C);box-shadow:0 60px 110px rgba(0,0,0,.5),0 0 0 1.5px #34413A inset,0 0 0 4px #090D0A;transform:translate3d(0,40px,0) scale(.94);opacity:0;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.fix.in .phone{transform:none;opacity:1}
.phone::before,.phone::after{content:"";position:absolute;width:4px;border-radius:3px;background:#090D0A}
.phone::before{left:-5px;top:20%;height:9%}
.phone::after{right:-5px;top:26%;height:14%}
.screen{position:relative;width:100%;height:100%;border-radius:53px;overflow:hidden;background:#fff;isolation:isolate;container-type:size}
@media (max-width:1100px){.dx-line{font-size:clamp(30px,4.4vw,48px)}.fix-cta p{display:none}}
@media (max-width:860px){.dx-steps button{font-size:14px;padding:7px 0}.dx-subs p{font-size:15px}.fix-copy{max-width:none}}
@media (max-width:640px){
  .fix{padding:70px 0 12px;align-items:start}
  .fix-grid{grid-template-columns:1fr;gap:10px}
  .dx-line{font-size:clamp(26px,7.4vw,36px);margin-top:6px}
  .dx-subs,.dx-steps,.fix-cta{display:none}
  .phone{height:calc(100svh - 158px);min-height:300px;border-radius:48px;padding:8px}
  .screen{border-radius:41px}
}

/* the app, drawn live on the real app's 347-point grid (--u = one point) */
.app{--u:calc(100cqw / 347);position:absolute;inset:0;overflow:hidden;background:#ECE6D8;color:var(--ink);font-family:var(--sans)}
.app .map{position:absolute;left:0;top:0;width:100%;height:auto}
.app .sb{position:absolute;left:0;right:0;top:0;z-index:3;height:calc(var(--u)*46);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*24) 0 calc(var(--u)*30);font:600 calc(var(--u)*15)/1 var(--sans);letter-spacing:-.01em}
.app .island{position:absolute;z-index:3;left:50%;top:calc(var(--u)*11);width:calc(var(--u)*112);height:calc(var(--u)*33);margin-left:calc(var(--u)*-56);border-radius:calc(var(--u)*17);background:#0B0F0C}
.app .sb svg{height:calc(var(--u)*12);width:auto}
.app .sb i{display:flex;gap:calc(var(--u)*6);align-items:center}
.app .addr{position:absolute;z-index:3;left:calc(var(--u)*14);top:calc(var(--u)*56);height:calc(var(--u)*36);display:flex;align-items:center;gap:calc(var(--u)*7);padding:0 calc(var(--u)*12);border-radius:calc(var(--u)*18);background:rgba(255,255,255,.95);box-shadow:0 calc(var(--u)*3) calc(var(--u)*10) rgba(38,43,36,.12);font:600 calc(var(--u)*12.5)/1 var(--sans)}
.app .addr svg{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.app .addr .chev{width:calc(var(--u)*9);height:calc(var(--u)*9);opacity:.5}
.app .me{position:absolute;z-index:3;right:calc(var(--u)*14);top:calc(var(--u)*56);width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);box-shadow:0 calc(var(--u)*3) calc(var(--u)*10) rgba(38,43,36,.12);font:700 calc(var(--u)*11.5)/1 var(--sans)}
.app .toast{position:absolute;z-index:4;left:calc(var(--u)*10);right:calc(var(--u)*10);top:calc(var(--u)*50);display:flex;gap:calc(var(--u)*11);align-items:center;padding:calc(var(--u)*12) calc(var(--u)*14);border-radius:calc(var(--u)*22);background:rgba(250,250,248,.97);box-shadow:0 calc(var(--u)*10) calc(var(--u)*30) rgba(20,30,22,.22),inset 0 0 0 1px rgba(255,255,255,.6);opacity:0;transform:translate3d(0,-130%,0) scale(.94);transition:opacity .3s var(--ease),transform .5s cubic-bezier(.4,0,.6,1)}
.app .toast img{flex:none;width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:calc(var(--u)*8)}
.app .toast>div{flex:1;min-width:0}
.app .toast p{font:500 calc(var(--u)*11.5)/1.3 var(--sans);color:#1C2A20}
.app .toast .t1{display:flex;justify-content:space-between;font-size:calc(var(--u)*10);color:#7D857B;text-transform:uppercase;letter-spacing:.04em}
.app .toast .t1 b{font-weight:600}
.app .toast .t2{margin-top:calc(var(--u)*1);font-weight:700}
.app[data-s="5"] .toast{opacity:1;transform:none;transition:opacity .35s var(--ease) .15s,transform .8s cubic-bezier(.18,1.25,.4,1) .15s}
.app .radar circle{transform-box:fill-box;transform-origin:center;opacity:0}
.app[data-s="0"] .radar circle,.app[data-s="1"] .radar circle{animation:radar 2.4s var(--ease) infinite}
.app .radar circle:nth-child(2){animation-delay:.8s}
.app .radar circle:nth-child(3){animation-delay:1.6s}
@keyframes radar{0%{transform:scale(.3);opacity:.55}100%{transform:scale(3.2);opacity:0}}
.app .pros circle{transition:opacity .6s var(--ease),transform .6s var(--spring);transform-box:fill-box;transform-origin:center}
.app[data-s="0"] .pros circle,.app[data-s="1"] .pros circle{animation:blink 1.8s ease-in-out infinite}
.app .pros circle:nth-child(2n){animation-delay:.6s}
.app .pros circle:nth-child(3n){animation-delay:1.1s}
@keyframes blink{50%{opacity:.35}}
.app:not([data-s="0"]):not([data-s="1"]) .pros circle{opacity:0;transform:scale(.4)}
.app .route-left,.app .route-done{fill:none;stroke-linecap:round;stroke-linejoin:round}
.app .route-case{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s}
.app .route-done{stroke:#A7D9B8;stroke-width:5;opacity:0;transition:opacity .4s}
.app .route-left{stroke:var(--accent);stroke-width:5;opacity:0;transition:opacity .4s}
.app[data-route] .route-case,.app[data-route] .route-done,.app[data-route] .route-left{opacity:1}
.app .vanmk{opacity:0;transition:opacity .4s}
.app[data-route] .vanmk{opacity:1}
.app .bubble{transition:opacity .3s}
.app[data-s="4"] .bubble,.app[data-s="5"] .bubble{opacity:0}
.app .vglow{transform-box:fill-box;transform-origin:center;animation:vglow 2s ease-in-out infinite}
@keyframes vglow{50%{transform:scale(1.35);opacity:.06}}
.app[data-s="5"] .vglow{animation:none;opacity:0}
.app .halo{transform-box:fill-box;transform-origin:center;animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.6}100%{transform:scale(2);opacity:0}}

.app .sheet{position:absolute;z-index:2;left:0;right:0;top:calc(var(--u)*318);bottom:0;border-radius:calc(var(--u)*26) calc(var(--u)*26) 0 0;background:#fff;box-shadow:0 calc(var(--u)*-6) calc(var(--u)*22) rgba(38,43,36,.1);transform:translate3d(0,calc(var(--u)*226),0);transition:transform .85s cubic-bezier(.22,1,.36,1)}
.app:not([data-s="0"]):not([data-s="1"]) .sheet{transform:none}
.app .handle{position:absolute;left:50%;top:calc(var(--u)*10);width:calc(var(--u)*34);height:calc(var(--u)*4);margin-left:calc(var(--u)*-17);border-radius:9px;background:#E3DED3}
.app .pane{position:absolute;inset:0;padding:calc(var(--u)*24) calc(var(--u)*20) 0;display:grid;justify-items:center;align-content:start;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.app .pane.on{opacity:1;transition:none}
/* each change rebuilds the card line by line: out quickly, in with a short soft stagger */
.app .pane>*{opacity:0;transform:translate3d(0,calc(var(--u)*9),0);transition:opacity .25s var(--ease),transform .3s var(--ease)}
.app .pane.on>*{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .75s cubic-bezier(.2,1.1,.35,1)}
.app .pane.on>:nth-child(1){transition-delay:.18s}.app .pane.on>:nth-child(2){transition-delay:.23s}.app .pane.on>:nth-child(3){transition-delay:.28s}
.app .pane.on>:nth-child(4){transition-delay:.32s}.app .pane.on>:nth-child(5){transition-delay:.36s}.app .pane.on>:nth-child(6){transition-delay:.4s}
.app .pane.on>:nth-child(n+7){transition-delay:.44s}
.app .top{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.app .btnc{width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:50%;display:grid;place-items:center;background:#F4F1EA}
.app .btnc svg{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.app .pill{justify-self:center;padding:calc(var(--u)*5) calc(var(--u)*12);border-radius:99px;background:var(--wash);color:var(--accent-text);font:600 calc(var(--u)*11)/1.2 var(--sans)}
.app .pill.amber{background:#FBEFD3;color:#8A6410}
.app .pill.solid{background:var(--accent);color:#fff}
.app h5{margin-top:calc(var(--u)*10);font:700 calc(var(--u)*21)/1.2 var(--serif);letter-spacing:-.01em;text-align:center;max-width:calc(var(--u)*290)}
.app .sub{margin-top:calc(var(--u)*5);font-size:calc(var(--u)*11.5);color:#8A9187;text-align:center;line-height:1.35}
.app .rule{width:100%;height:1px;background:#F0ECE4;margin-top:calc(var(--u)*14)}
.app .steps5{position:relative;width:100%;display:grid;grid-template-columns:repeat(5,1fr);margin-top:calc(var(--u)*16)}
.app .steps5::before,.app .steps5 .fill{content:"";position:absolute;left:10%;right:10%;top:calc(var(--u)*4.5);height:calc(var(--u)*2);background:#E6E2DA;border-radius:2px}
.app .steps5 .fill{background:var(--accent);right:auto;transition:width .9s var(--ease) .45s}
.app .steps5 span{position:relative;display:grid;justify-items:center;gap:calc(var(--u)*5);font:500 calc(var(--u)*8.2)/1.1 var(--sans);color:#8A9187}
.app .steps5 span::before{content:"";width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 calc(var(--u)*1.6) #CFCAC0}
.app .steps5 span::before{transition:background-color .3s var(--ease) .9s,box-shadow .3s var(--ease) .9s}
.app .steps5 span.done::before{background:var(--accent);box-shadow:none}
.app .steps5 span.done{color:var(--ink2)}
.app .pro{width:100%;display:flex;align-items:center;gap:calc(var(--u)*10);margin-top:calc(var(--u)*18);padding:calc(var(--u)*11) calc(var(--u)*12);border-radius:calc(var(--u)*16);background:#fff;box-shadow:inset 0 0 0 1px #ECE8E0,0 calc(var(--u)*4) calc(var(--u)*14) rgba(28,42,32,.06)}
.app .pro b{width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--accent-text);font:700 calc(var(--u)*13)/1 var(--sans)}
.app .pro span{display:grid;gap:calc(var(--u)*2);font:700 calc(var(--u)*12.5)/1.2 var(--sans)}
.app .pro small{font-weight:500;font-size:calc(var(--u)*10.5);color:#8A9187}
.app .pro .nm{display:flex;align-items:center;gap:calc(var(--u)*5);font-style:normal}
.app .pro .vet{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.app .msg{width:100%;display:flex;gap:calc(var(--u)*8);margin-top:calc(var(--u)*12)}
.app .msg span{flex:1;height:calc(var(--u)*40);display:flex;align-items:center;padding:0 calc(var(--u)*14);border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #E6E1D8;color:#9AA193;font-size:calc(var(--u)*12)}
.app .msg i{width:calc(var(--u)*40);height:calc(var(--u)*40);border-radius:50%;display:grid;place-items:center;background:var(--wash)}
.app .msg svg{width:calc(var(--u)*15);height:calc(var(--u)*15)}
.app .pane:not(.find) .fine{display:none}
.app .fine{margin-top:calc(var(--u)*10);font-size:calc(var(--u)*9.5);line-height:1.4;color:#9AA193;text-align:center;max-width:calc(var(--u)*270)}
.app .paper{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:calc(var(--u)*18);padding-top:calc(var(--u)*12);border-top:1px solid #F0ECE4;font:600 calc(var(--u)*11.5)/1 var(--sans)}
.app .paper svg{width:calc(var(--u)*10);height:calc(var(--u)*10);opacity:.5}
.app .find h5{margin-top:calc(var(--u)*8)}
.app .seg4{display:flex;gap:calc(var(--u)*6);margin-top:calc(var(--u)*18)}
.app .seg4 i{width:calc(var(--u)*44);height:calc(var(--u)*3);border-radius:3px;background:#E6E2DA;overflow:hidden}
.app .seg4 i:first-child::before{content:"";display:block;height:100%;background:var(--accent);animation:seg 1.6s var(--ease) infinite}
@keyframes seg{0%{transform:translateX(-100%)}60%,100%{transform:none}}
.app .find .fine{margin-top:calc(var(--u)*16);font-size:calc(var(--u)*11)}

/* looping animations rest while their section is off screen */
.film.off .marks *,.fix:not(.in) .app *,.fix:not(.in) .dispatch *{animation-play-state:paused!important}
/* the phone screen paints on its own layer, apart from the page around it */
.screen{will-change:transform;contain:paint}
/* labels: one style everywhere a thing is pointed out */
.callout{position:absolute;z-index:3;display:grid;justify-items:center;transform:translateX(-50%);pointer-events:none}
.callout i{width:12px;height:12px;border-radius:50%;background:var(--green-on-dark);box-shadow:0 0 0 4px rgba(143,216,168,.25)}
.callout s{display:block;width:1.5px;height:24px;background:rgba(143,216,168,.75)}
.callout b{padding:7px 12px;border-radius:var(--leaf-sm);background:rgba(18,38,25,.94);box-shadow:inset 0 0 0 1px rgba(246,243,236,.14),0 10px 26px rgba(0,0,0,.3);color:var(--on-dark);font:600 14px/1.3 var(--sans);white-space:nowrap}
.callout b em{font-style:normal;font-weight:700;color:var(--green-on-dark)}
.callout.up{grid-template-areas:"b" "s" "i"}
.callout.up b{grid-area:b}.callout.up s{grid-area:s}.callout.up i{grid-area:i}
/* ── fix part: a real-looking map in the phone, and one label at a time for what just changed ── */
.app{background:#F3F1EB}
.app .fx-map text{user-select:none}
.app .route-case{stroke-width:9}
.app .route-done,.app .route-left{stroke-width:4.6}
/* calmer: the home pin keeps a still, soft ring (the radar already marks it while matching) */
.app .halo{animation:none;transform:scale(1.25);opacity:.16}

/* labels ride on the phone (so they track it at every size); one shows at a time, fading in after the screen settles */
.fx-calls{position:absolute;inset:0;z-index:4;pointer-events:none}
.fx-calls[hidden]{display:none}
.fx-at{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .3s var(--ease)}
.fx-at.on{opacity:1;transition:opacity .5s var(--ease) .35s}
.fx-at .callout{left:0;top:-6px}
.fx-at .callout.up{top:auto;bottom:-6px}
/* modifier: the tag may slide sideways (the dot stays on the thing) so it never leaves the phone or covers the words */
.fx-at .callout b{transform:translate3d(var(--fx-sx,0px),0,0)}
@media (prefers-reduced-motion:reduce){.fx-at,.fx-at.on{transition:none}}
/* ───────── shared light sections ───────── */
.light-sec{display:grid;align-items:center;padding:112px 0 72px}
.sec-head{max-width:760px}
.sec-head h2{margin-top:12px;text-wrap:balance}
.sec-head .lede{margin-top:16px}
.card{background:var(--surface);border-radius:var(--leaf);box-shadow:var(--shadow)}

/* ───────── 3 · kit ─────────
   One story on one screen: the real kit (each numbered sensor labelled with where it goes),
   then the difference it makes, without Strech vs with Strech. The photo takes whatever
   height is left (a size container), so it shrinks instead of spilling over. */
#kit{height:100vh;height:100svh;min-height:0;overflow-x:clip;display:flex;flex-direction:column;align-items:stretch;padding:92px 0 28px}
#kit>.wrap{flex:1;min-height:0;display:flex;flex-direction:column}
#kit .sec-head{flex:none;max-width:none}
#kit .sec-head h2{text-wrap:balance}

/* the crop window, in photo pixels (photo is 1344×752); labels are placed in photo percent, so they stay on the objects */
.kx-stage{--x0:0;--y0:180;--cw:1344;--ch:340;flex:1;min-height:0;container-type:size;display:grid;place-items:center;margin:4px calc(50% - 50vw) 0;padding:2px 0}
.kx-photo{position:relative;width:min(100cqw,calc(100cqh * var(--cw) / var(--ch)));aspect-ratio:var(--cw)/var(--ch)}
.kx-clip{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent);
  mask-composite:intersect}
.kx-full,.kx-map{position:absolute;width:calc(100% * 1344 / var(--cw));height:calc(100% * 752 / var(--ch));left:calc(-100% * var(--x0) / var(--cw));top:calc(-100% * var(--y0) / var(--ch))}
.kx-full{max-width:none;object-fit:fill}
.kx-map{pointer-events:none}

/* the shared .callout, pinned so its dot's centre sits exactly on the given point (kit-only modifier) */
.kx-map .callout{transform:translate(-50%,-6px)}
.kx-map .callout.up{transform:translate(-50%,calc(-100% + 6px))}
.kx-c-hub{left:20.8%;top:39.9%}
/* each sensor's label hangs from the front of that sensor, so 1–4 explain themselves */
.kx-c{top:55.3%}
.kx-c1{left:43.42%}.kx-c2{left:57.7%}.kx-c3{left:72.02%}.kx-c4{left:86.64%}

/* without vs with: two quiet panels, rows paired across */
.kx-vs{flex:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(3,auto);column-gap:clamp(10px,1.4vw,18px);margin-top:6px}
.kx-col{grid-row:1/span 4;display:grid;grid-template-rows:subgrid;padding:18px 26px 6px;border-radius:var(--leaf-sm)}
.kx-col ul{display:contents;list-style:none}
.kx-col h3{padding-bottom:10px;font:700 12.5px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase}
.kx-col li{display:grid;grid-template-columns:22px 1fr;align-items:start;padding:11px 0;border-top:1px solid;font:500 17px/1.4 var(--sans)}
.kx-col li::before{content:"";justify-self:start}
.kx-no{background:rgba(246,243,236,.03);box-shadow:inset 0 0 0 1px rgba(246,243,236,.09)}
.kx-no h3{color:rgba(246,243,236,.5)}
.kx-no li{color:rgba(246,243,236,.6);border-color:rgba(246,243,236,.07)}
.kx-no li::before{width:10px;height:1.5px;margin-top:.7em;background:rgba(246,243,236,.38)}
.kx-no b{font-weight:700;color:rgba(246,243,236,.82)}
.kx-yes{background:linear-gradient(160deg,rgba(143,216,168,.15),rgba(143,216,168,.045));box-shadow:inset 0 0 0 1px rgba(143,216,168,.26),0 24px 60px rgba(0,0,0,.26)}
.kx-yes h3{color:var(--green-on-dark)}
.kx-yes li{color:var(--on-dark);border-color:rgba(143,216,168,.15)}
.kx-yes li::before{width:8px;height:8px;margin:.42em 0 0 1px;border-radius:50%;background:var(--green-on-dark);box-shadow:0 0 0 4px rgba(143,216,168,.18)}

/* shorter screens */
@media (max-height:880px) and (min-width:901px){
  #kit{padding:84px 0 22px}
  .kx-col{padding:14px 24px 4px}
  .kx-col h3{padding-bottom:8px}
  .kx-col li{padding:9px 0;font-size:16px}
}
@media (max-height:720px) and (min-width:901px){
  #kit{padding:78px 0 18px}
  .kx-col{padding:12px 22px 2px}
  .kx-col h3{padding-bottom:6px;font-size:12px}
  .kx-col li{padding:7px 0;font-size:15.5px}
}

/* tablets and phones: labels alternate above and below the sensors so they never touch */
@media (max-width:900px){
  #kit{padding:76px 0 16px}
  .kx-stage{--x0:40;--y0:150;--cw:1264;--ch:420}
  .kx-map .kx-flip{grid-template-areas:"b" "s" "i";top:40.4%;transform:translate(-50%,calc(-100% + 6px))}
  .kx-flip b{grid-area:b}.kx-flip s{grid-area:s}.kx-flip i{grid-area:i}
  .kx-col{padding:16px 20px 6px}
  .kx-col li{grid-template-columns:20px 1fr;padding:10px 0;font-size:16px}
}
/* phones: the photo crops to the four sensors so they read large; the outer tags lean inward to stay on screen */
@media (max-width:640px){
  .kx-stage{--x0:470;--y0:170;--cw:810;--ch:400;margin-top:2px}
  .kx-clip{-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent)}
  .kx-c-hub{display:none}
  .kx-c1 b{transform:translateX(14px)}
  .kx-c4 b{transform:translateX(-18px)}
  .kx-vs{column-gap:8px;margin-top:4px}
  .kx-col{padding:12px 12px 2px}
  .kx-col h3{padding-bottom:6px;font-size:11px;letter-spacing:.12em}
  .kx-col li{grid-template-columns:14px 1fr;padding:9px 0;font-size:14.5px;line-height:1.35}
  .kx-no li::before{width:7px}
  .kx-yes li::before{width:6px;height:6px;margin-top:.45em;box-shadow:0 0 0 3px rgba(143,216,168,.18)}
}
@media (max-width:640px) and (max-height:700px){
  .kx-col{padding:10px 11px 1px}
  .kx-col li{padding:6px 0;font-size:13.5px;line-height:1.3}
}
@media (max-width:640px) and (min-height:780px){
  .kx-col{padding:14px 14px 4px}
  .kx-col li{padding:11px 0;font-size:15px}
}
/* ───────── 4 · plans ─────────
   One shared process up top, then two calm cards with room to breathe. */
.plans{padding:96px 0 40px}
.plans .sec-head{max-width:none}
.flow{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.flow span{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:999px;background:rgba(246,243,236,.06);box-shadow:inset 0 0 0 1px rgba(246,243,236,.12);font:500 15px/1.2 var(--sans);color:var(--on-dark)}
.flow span b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 12px var(--sans)}
.flow i{width:28px;height:1.5px;background:rgba(143,216,168,.5);position:relative}
.flow i::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left:6px solid rgba(143,216,168,.7);border-right:0}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);margin-top:clamp(26px,4vh,44px);align-items:stretch}
.plan{padding:clamp(26px,3vw,40px);display:grid;align-content:start;gap:6px}
.plan.prem{box-shadow:inset 0 0 0 1.5px var(--accent),0 24px 60px rgba(0,0,0,.3)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan h3{font-size:clamp(28px,2.6vw,36px);font-weight:600}
.promise{font:400 17px/1.45 var(--sans);color:var(--on-dark2);margin-top:2px}
.feats{list-style:none;display:grid;gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--hair-dark)}
.feats li{display:grid;grid-template-columns:18px 1fr;gap:14px;align-items:start;font:500 16px/1.4 var(--sans);color:var(--on-dark)}
.feats li::before{content:"";width:8px;height:8px;margin:7px 0 0 4px;border-radius:50%;background:var(--green-on-dark)}
.feats li.all{color:var(--green-on-dark)}
.plans-foot{display:flex;justify-content:center;margin-top:clamp(22px,4vh,40px)}
@media (max-width:760px){.plan-grid{grid-template-columns:1fr}.flow i{display:none}}

/* what you get: one list, no tiers */
.getlist{list-style:none;margin-top:clamp(22px,4vh,40px);padding:clamp(8px,1.4vw,14px) clamp(22px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,72px)}
.getlist li{display:grid;grid-template-columns:22px 1fr;column-gap:14px;padding:clamp(14px,2.2vh,22px) 0;border-bottom:1px solid var(--hair-dark)}
.getlist li::before{content:"";grid-row:span 2;width:10px;height:10px;margin:7px 0 0 4px;border-radius:50%;background:var(--green-on-dark);box-shadow:0 0 0 4px rgba(143,216,168,.18)}
.getlist b{font:600 clamp(17px,1.4vw,19px)/1.3 var(--sans);color:var(--on-dark)}
.getlist span{margin-top:3px;font-size:15px;color:var(--on-dark2)}
.getlist li:last-child{border-bottom:0}
@media (max-width:760px){.getlist{grid-template-columns:1fr;padding:6px 18px}.getlist li{padding:11px 0}.getlist b{font-size:16px}.getlist span{font-size:14px}}
/* a year with Strech, beside the list: said plainly, the way the app would tell you */
.get-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;margin-top:clamp(18px,3.4vh,36px)}
.get-grid .getlist{margin-top:0;grid-template-columns:1fr}
.get-grid .getlist li{padding:clamp(10px,1.7vh,17px) 0}
.get-year-h{margin-bottom:12px;font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--green-on-dark)}
.feed{list-style:none;display:grid;gap:12px}
.note{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;align-items:start;padding:16px 18px;border-radius:18px;background:rgba(246,243,236,.05);box-shadow:inset 0 0 0 1px rgba(246,243,236,.1)}
.note img{grid-row:span 2;width:40px;height:40px;border-radius:10px}
.note .when{font:600 12.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(246,243,236,.55)}
.note p{font:400 16.5px/1.45 var(--sans);color:var(--on-dark)}
.note p b{font-weight:600}
.note.hi{background:rgba(143,216,168,.1);box-shadow:inset 0 0 0 1px rgba(143,216,168,.35)}
.note.hi .when{color:var(--green-on-dark)}
.note.quiet p{color:var(--on-dark2)}
.note{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.plans.in .note{opacity:1;transform:none;transition-delay:calc(var(--i) * 160ms + 500ms)}
@media (max-width:900px){.get-grid{grid-template-columns:1fr;gap:14px;margin-top:14px}.get-grid .getlist li{padding:9px 0}.getlist span{display:none}
  .get-year-h{margin-bottom:8px;font-size:12px}.feed{gap:8px}.note{grid-template-columns:30px 1fr;gap:2px 12px;padding:10px 13px;border-radius:14px}.note img{width:30px;height:30px;border-radius:8px}.note .when{font-size:11.5px}.note p{font-size:14.5px}}
@media (max-width:900px) and (max-height:760px){.get-grid .getlist li{padding:6px 0}.getlist b{font-size:15px}.note{padding:8px 12px}.note p{font-size:14px;line-height:1.35}}

/* ───────── 6 · join ───────── */
.join{display:grid;align-items:center;padding:96px 0 48px}
.join-grid{display:grid;grid-template-columns:1fr minmax(340px,440px);gap:clamp(32px,6vw,96px);align-items:center}
.join h2{font-size:clamp(34px,4.2vw,58px);margin-top:12px;max-width:16ch}
.steps-next{list-style:none;margin-top:36px;display:grid;gap:28px;position:relative}
.steps-next::before,.steps-next::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:rgba(14,122,55,.18)}
.steps-next::after{background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease) .5s}
.join.in .steps-next::after{transform:scaleY(1)}
.steps-next li{position:relative;z-index:1;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.steps-next .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font:700 17px var(--sans);box-shadow:0 0 0 6px var(--oat)}
.steps-next b{display:block;font:700 clamp(19px,1.7vw,22px)/1.3 var(--sans);padding-top:9px}
.call{margin-top:30px;font-size:16.5px;color:var(--on-dark2)}
.call a{color:var(--green-on-dark);font-weight:700;text-decoration:none;white-space:nowrap}
.call a:hover{text-decoration:underline}
.steps-next .s{display:block;margin-top:4px;color:var(--ink2);font-size:16px}
.wait{position:relative;padding:clamp(22px,2.6vw,32px);display:grid;gap:12px}
.wait h3{font-size:26px}
.wait label{display:grid;gap:6px;font:700 14px var(--sans)}
.wait input{width:100%;min-height:54px;padding:0 16px;border:1.5px solid var(--hair);border-radius:14px;background:var(--oat);font:500 17px var(--sans);color:var(--ink);transition:border-color .2s,background-color .2s}
.wait input:focus{outline:none;border-color:var(--accent-text);background:#fff}
.wait input[aria-invalid=true]{border-color:#A83C2B}
.err{font-size:13.5px;color:#A83C2B}
.err:empty{display:none}
.wait .btn{width:100%;margin-top:4px;min-height:58px;font-size:18px}
.status{font-size:14px;color:var(--ink2)}
.status:empty{display:none}
.pro-link{font-size:14.5px;color:var(--ink2)}
.pro-link a{color:var(--accent-text);font-weight:700}
.privacy{margin-top:4px;padding-top:14px;border-top:1px solid var(--hair);display:grid;gap:8px}
.privacy h4{font:700 14px/1.3 var(--sans);display:flex;align-items:center;gap:8px}
.privacy h4 svg{width:16px;height:16px}
.privacy ul{list-style:none;display:grid;gap:5px}
.privacy li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.privacy li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.privacy li b{color:var(--ink)}
.privacy p{font-size:13.5px;color:var(--ink2)}
.privacy-links{font-size:13.5px;color:var(--ink2)}
.privacy-links a{color:var(--accent-text);font-weight:700}
.done-panel{display:none;text-align:center;padding:24px 8px;gap:10px;justify-items:center}
.done-panel svg{width:72px;height:72px;transform:scale(.3) rotate(-60deg);transition:transform 1s var(--spring)}
.wait.done>:not(.done-panel){display:none}
.wait.done .done-panel{display:grid}
.wait.done .done-panel svg{transform:none}
.done-panel h3{font-size:28px}
.done-panel p{color:var(--ink2);max-width:30ch}
@media (max-width:900px){.join-grid{grid-template-columns:1fr;gap:28px}.steps-next{margin-top:24px;gap:20px}}

/* ───────── footer ───────── */
.foot{position:relative;padding:clamp(88px,11vh,112px) 0 28px;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.foot>.wrap{flex:none}
.foot-close{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 48px}
.foot-close p{font:700 clamp(30px,4vw,56px)/1.1 var(--serif);letter-spacing:-.015em;max-width:18ch}
.foot-close p .g{color:var(--green-on-dark)}
.foot-vine{display:block;width:100%;height:54px;margin:clamp(32px,5vh,52px) 0 clamp(28px,4vh,44px);overflow:visible}
.foot-vine path{fill:none;stroke:var(--green-on-dark);stroke-width:2;stroke-linecap:round;opacity:.55}
.foot-vine .lf{fill:var(--green-on-dark);opacity:.75}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px clamp(20px,3vw,48px)}
.foot-brand .brand{color:var(--on-dark)}
.foot-brand p{margin-top:16px;color:var(--on-dark2);font-size:15.5px;max-width:34ch}
.foot-brand .where{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 14px;border-radius:999px;background:rgba(246,243,236,.08);font:600 13.5px/1.2 var(--sans);color:var(--on-dark)}
.foot-brand .where::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-on-dark)}
.foot-col h4{font:700 12.5px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--green-on-dark)}
.foot-col ul{list-style:none;margin-top:16px;display:grid;gap:11px}
.foot-col a,.foot-col span{font-size:15.5px;color:var(--on-dark2);text-decoration:none;line-height:1.35}
.foot-col a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.foot-col small{display:block;font-size:13px;color:rgba(246,243,236,.55);margin-top:2px}
.foot-bottom{margin-top:clamp(40px,6vh,64px);padding-top:22px;border-top:1px solid var(--hair-dark);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;font-size:13.5px;color:rgba(246,243,236,.6)}
.foot-bottom .notes{max-width:80ch}
.top-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--on-dark);font:700 13.5px var(--sans);padding:8px 0}
.top-btn svg{width:16px;height:16px}
@media (max-width:1000px){.foot-grid{grid-template-columns:repeat(2,1fr)}.foot-brand{grid-column:1/-1}}
@media (max-width:620px){.foot-close{grid-template-columns:1fr}.foot-grid{gap:28px 20px}}

/* ───────── the whole site lives in the hero's world ─────────
   A blurred, darkened view of the house sits behind every stop; pages and cards are dark glass, never white. */
body{background:var(--forest-deep)}
.backdrop{position:fixed;inset:-8%;z-index:-1;background:var(--forest-deep) center/cover no-repeat;transform:scale(1.04);transition:transform 1.6s var(--ease);will-change:transform}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 35%,rgba(26,56,38,.62),rgba(12,27,18,.93))}
.dark.glass{background:transparent;color:var(--on-dark)}
.card{background:rgba(20,42,28,.7);box-shadow:inset 0 0 0 1px rgba(246,243,236,.1),0 24px 60px rgba(0,0,0,.28)}
.chip{background:rgba(143,216,168,.16);color:var(--green-on-dark)}
/* top bar over a glass stop */
.bar.solid{color:var(--on-dark)}
.bar.solid::before{opacity:0}
.bar.solid::after{opacity:1;background:rgba(13,29,19,.9);box-shadow:0 1px 0 var(--hair-dark)}
/* the film's floating pieces */
.tag,.inset,.pop,.vpin b{background:rgba(18,38,25,.94);color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(246,243,236,.14),0 14px 34px rgba(0,0,0,.35)}
.tag b{color:var(--green-on-dark)}
.notif{background:rgba(18,38,25,.95);color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(246,243,236,.14),0 24px 60px rgba(0,0,0,.4)}
.n-top,.n-text{color:var(--on-dark2)}
.n-top b{color:var(--on-dark)}
.inset .chip{background:rgba(62,143,208,.22);color:#A9D3F2}
.pop.amber .chip{background:rgba(255,214,140,.16);color:#F3CF86}
.pop.solid .chip{background:var(--accent);color:var(--on-accent)}
/* kit */
.device p,.kit-note{color:var(--on-dark2)}
.device.hub{background:linear-gradient(160deg,rgba(143,216,168,.16),rgba(143,216,168,.05));box-shadow:inset 0 0 0 1px rgba(143,216,168,.22),0 24px 60px rgba(0,0,0,.28)}
.inbox li{background:rgba(246,243,236,.1)}
/* plans */
.promise,.fine{color:var(--on-dark2)}
.plan-art{background:rgba(143,216,168,.08)}
.feats li{color:var(--on-dark)}
.feats li.all{color:var(--green-on-dark)}
.plan.prem{box-shadow:inset 0 0 0 2px var(--accent),0 24px 60px rgba(0,0,0,.3)}
/* year */
.yr-vine .base{stroke:rgba(246,243,236,.16)}
.yr-mo .node::before{background:#15301F;box-shadow:0 0 0 1px rgba(246,243,236,.08)}
.yr-mo.hi .node::before{background:rgba(143,216,168,.2)}
.yr-mo .m{color:rgba(246,243,236,.55)}
.yr-mo.hi .m{color:var(--green-on-dark)}
.yr-legend{color:var(--on-dark2)}
.yr-events{border-top-color:var(--hair-dark)}
.yr-ev{background:rgba(143,216,168,.1)}
.yr-ev .when{color:var(--green-on-dark)}
.yr-ev b{color:var(--on-dark)}
.yr-ev span:last-child{color:var(--on-dark2)}
/* join */
.steps-next::before{background:rgba(143,216,168,.22)}
.steps-next .n{box-shadow:0 0 0 6px rgba(13,29,19,.9)}
.steps-next .s,.pro-link,.status,.privacy li,.privacy-links,.done-panel p{color:var(--on-dark2)}
.pro-link a,.privacy-links a{color:var(--green-on-dark)}
.privacy li b{color:var(--on-dark)}
.privacy{border-top-color:var(--hair-dark)}
.privacy h4 svg path{stroke:var(--green-on-dark)}
.privacy summary::after{border-color:rgba(246,243,236,.5)}
.wait input{background:rgba(246,243,236,.07);border-color:rgba(246,243,236,.18);color:var(--on-dark)}
.wait input::placeholder{color:rgba(246,243,236,.42)}
.wait input:focus{background:rgba(246,243,236,.11);border-color:var(--green-on-dark)}
.err{color:#FFB4A6}
.wait input[aria-invalid=true]{border-color:#FF9F8C}

/* ───────── one screen per stop, at any size ─────────
   Shorter screens tighten spacing and type; phones also drop the extras that only make sense with room to spare. */
.privacy summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.privacy summary::-webkit-details-marker{display:none}
.privacy summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.privacy[open] summary::after{transform:rotate(-135deg)}
.privacy[open] summary{margin-bottom:8px}
.still-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 78%}

@media (max-width:1000px) and (min-width:561px){
  .hub-list{grid-template-columns:1fr 1fr;column-gap:20px}
}
@media (max-height:880px) and (min-width:901px){
  .light-sec,.kit,.plans{padding:84px 0 24px}
  .join{padding:84px 0 28px}
  .sec-head h2,.plans h2{font-size:clamp(28px,3.2vw,46px)}
  .sec-head .lede{margin-top:10px;font-size:17px}
  .kit-grid{margin-top:20px}
  .device{padding:14px 16px 16px}
  .device .art{height:66px;margin-bottom:4px}
  .device .art svg{width:66px;height:66px}
  .badge{width:26px;height:26px;font-size:13px;right:calc(50% - 46px)}
  .device h3{font-size:17px}
  .device p{font-size:14px}
  .device.hub{padding:20px 22px}
  .hub .art,.hub .art svg{width:78px;height:78px}
  .device.hub>h3,.device.hub>p{padding-right:90px}
  .hub h3{font-size:24px}
  .device.hub p{font-size:14.5px}
  .hub-list{gap:6px;margin-top:4px}
  .hub-list li{font-size:14px}
  .inbox{margin-top:8px;padding-top:10px}
  .kit-note{margin-top:12px;font-size:14px}
  .plan-grid{margin-top:18px}
  .plan-art{aspect-ratio:16/3.8}
  .plan-body{padding:16px 22px 18px}
  .plan h3{font-size:26px}
  .promise{font-size:15.5px}
  .feats{gap:10px;margin-top:16px;padding-top:16px}
  .plan{padding:24px 28px}
  .plans-foot{margin-top:14px}
  .plans-foot .btn{min-height:48px}
  .yr{margin-top:22px;padding:22px 30px 22px}
  .yr-legend{margin-top:12px}
  .yr-events{margin-top:16px;padding-top:16px}
  .yr-ev{padding:14px 18px}
  .join h2{font-size:clamp(32px,3.6vw,50px)}
  .steps-next{margin-top:26px;gap:20px}
  .wait{padding:22px 24px;gap:10px}
  .wait h3{font-size:23px}
  .wait input{min-height:48px}
  .wait .btn{min-height:52px}
  .privacy li{font-size:13px}
  .dx-line{font-size:clamp(36px,4.4vw,62px)}
  .dx-strip,.route{margin-top:18px}
  .fix-cta{margin-top:20px}
  .hero h1{font-size:clamp(40px,5.8vw,84px)}
}
@media (max-height:720px) and (min-width:901px){
  .light-sec,.kit,.plans,.join{padding-top:78px}
  .kit .sec-head .lede,.kit-note,.inbox{display:none}
  .plan-art{display:none}
  .yr-legend{display:none}
  .steps-next .s{font-size:14.5px}
  .dx-strip{display:none}
}

/* phones and narrow tablets: each stop still fits one screen */
@media (max-width:900px){
  .light-sec,.kit,.plans,.join{padding:76px 0 16px;align-items:start}
  .sec-head h2,.plans h2,.join h2{font-size:clamp(26px,7.4vw,40px);margin-top:8px}
  .sec-head .lede{font-size:15.5px;margin-top:8px}
  .kit .sec-head .lede{display:none}
  .kit-note{display:none}
  .device.hub{padding:16px 18px;grid-template-columns:64px 1fr;column-gap:14px}
  .hub .art{grid-row:span 3;height:64px}
  .hub .art svg{width:64px;height:64px}
  .hub h3{font-size:21px}
  .device.hub p{font-size:13.5px}
  .hub-list{display:none}
  .inbox{grid-column:1/-1;margin-top:6px;padding-top:10px}
  .inbox li{font-size:12px;padding:4px 9px}
  .plan-grid{gap:10px;margin-top:16px}
  .plan-art{display:none}
  .plan-body{padding:14px 16px}
  .plan h3{font-size:22px}
  .promise{font-size:14px;margin-top:2px}
  .feats{gap:9px;margin-top:12px;padding-top:12px}
  .call{margin-top:14px;font-size:15px}
  .feats li{font-size:15px;grid-template-columns:16px 1fr;gap:10px}
  .feats svg{width:14px;height:14px;margin-top:3px}
  .plans-foot{margin-top:12px}
  .plans-foot .btn{width:100%;min-height:48px}
  .join-grid{gap:16px}
  .steps-next{margin-top:16px;gap:12px}
  .steps-next::before,.steps-next::after{left:15px;top:16px;bottom:16px}
  .steps-next li{grid-template-columns:32px 1fr;gap:12px}
  .steps-next .n{width:32px;height:32px;font-size:14px}
  .steps-next b{font-size:16px;padding-top:5px}
  .steps-next .s{display:none}
  .wait{padding:16px 18px;gap:8px}
  .wait h3{font-size:20px}
  .wait label{font-size:13px;gap:4px}
  .wait input{min-height:46px;font-size:16px}
  .wait .btn{min-height:50px;font-size:16.5px}
  .pro-link{font-size:13.5px}
  .privacy{padding-top:10px}
  .yr{margin-top:18px;padding:18px 14px 16px}
  .yr-events{margin-top:14px;padding-top:14px;gap:8px}
  .yr-ev{padding:12px 14px;gap:2px 12px}
  .yr-ev b{font-size:15.5px}
  .yr-ev span:last-child{font-size:13.5px}
}
@media (max-width:900px) and (max-height:800px){
  .sec-head .lede{display:none}
  .yr-legend{display:none}
  .device .art{height:56px}
  .device .art svg{width:56px;height:56px}
  .badge{right:calc(50% - 40px)}
  .device p{display:none}
  .device.hub p{display:block}
  .inbox{display:none}
  .feats li{font-size:13px}
  .steps-next{gap:8px}
}

@media (max-width:900px) and (max-height:700px){
  .join .eyebrow,.pro-link{display:none}
  .join h2{margin-top:0}
  .wait{gap:6px}
  .privacy-links{font-size:12.5px}
  .steps-next{margin-top:10px;gap:4px}
  .wait input{min-height:42px}
  .wait .btn{min-height:46px}
}
/* plans on phones: the shared flow becomes one quiet line, cards tighten */
@media (max-width:640px){
  .flow{gap:6px;margin-top:12px}
  .flow span{padding:5px 10px 5px 6px;font-size:12.5px;gap:6px}
  .flow span b{width:18px;height:18px;font-size:10.5px;flex:none}
  .flow{display:grid;grid-template-columns:repeat(3,1fr)}
  .flow span{border-radius:14px;line-height:1.25;padding:7px 8px 7px 6px}
  .plan-grid{gap:10px;margin-top:14px}
  .plan{padding:16px 18px;gap:2px}
  .plan h3{font-size:23px}
  .promise{font-size:14.5px}
  .feats{gap:6px;margin-top:10px;padding-top:10px}
  .feats li{font-size:14px}
  .plans-foot{margin-top:12px}
}
@media (max-width:640px) and (max-height:760px){
  .flow{display:none}
  .plan .chip{display:none}
  .promise{display:none}
  .feats li{font-size:13.5px}
}
@media (max-width:900px) and (max-height:700px){
  .call{margin-top:8px;font-size:14px}
  .steps-next b{font-size:15px}
  .wait h3{font-size:18px}
  .steps-next{gap:2px}
  .join h2{font-size:26px}
}
/* the footer is the last stop: on phones it closes in one screen too */
@media (max-width:900px){
  .foot{padding:76px 0 18px;min-height:100svh}
  .foot-close{gap:14px}
  .foot-close p{font-size:clamp(24px,7vw,32px)}
  .foot-close .btn{min-height:48px}
  .foot-vine{display:none}
  .foot-grid{margin-top:24px;grid-template-columns:1fr 1fr;gap:20px 16px}
  .foot-brand{grid-column:1/-1}
  .foot-brand p{display:none}
  .foot-brand .where{margin-top:10px}
  .foot-col.home{display:none}
  .foot-col ul{margin-top:10px;gap:8px}
  .foot-col a,.foot-col span{font-size:14px}
  .foot-bottom{margin-top:22px;padding-top:14px;font-size:12px;gap:8px 16px}
}
@media (max-width:900px) and (max-height:800px){
  .foot{padding:70px 0 14px}
  .foot-close p{font-size:24px}
  .foot-grid{margin-top:16px;gap:14px 12px}
  .foot-col ul{gap:6px;margin-top:8px}
  .foot-col a,.foot-col span{font-size:13.5px}
  .foot-bottom{margin-top:14px;padding-top:10px;font-size:11px}
}
@media (max-width:900px) and (max-height:700px){
  .foot-brand .where{display:none}
  .foot-close .btn{display:none}
  .join{padding-top:76px}
  .fix{padding-top:70px}
}
/* reduced motion: everything shows at once, nothing travels */
/* ───────── bigger on laptops and desktops: the fix copy and "what you get" fill the screen.
   Sizes follow both width and height, so every stop still fits one screen. */
@media (min-width:1101px){
  .fix-grid{grid-template-columns:minmax(0,660px) auto}
  .fix-copy{max-width:640px}
  .dx-line{font-size:min(5vw,8.4vh);margin-top:min(18px,2vh)}
  .dx-subs{margin-top:min(18px,2vh)}
  .dx-subs p{font-size:min(1.55vw,2.7vh);max-width:34ch}
  .dx-steps{margin-top:min(40px,3.6vh);max-width:440px}
  .dx-steps button{grid-template-columns:28px 1fr;gap:16px;font-size:min(1.35vw,2.5vh);padding:min(13px,1.35vh) 0}
  .dx-steps::before,.dx-steps .fill{left:13px}
  .dx-steps .dot{width:12px;height:12px}
  .fix-cta{margin-top:min(40px,3.8vh)}
  .fix-cta .btn{min-height:min(62px,7.4vh);padding:0 34px;font-size:18.5px}
  .fix-cta p{font-size:min(17px,2.2vh);max-width:32ch}
}
@media (min-width:901px){
  .plans>.wrap{max-width:1420px}
  .plans h2{font-size:min(4.7vw,8vh)}
  .get-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:min(56px,3.6vw);margin-top:min(40px,3.6vh)}
  .get-grid .getlist{padding:min(16px,1.6vh) min(44px,3vw)}
  .get-grid .getlist li{grid-template-columns:28px 1fr;padding:min(18px,1.75vh) 0}
  .getlist li::before{width:12px;height:12px;margin-top:8px}
  .getlist b{font-size:min(1.6vw,2.85vh)}
  .getlist span{font-size:min(17px,2.25vh)}
  .get-year-h{font-size:15px;margin-bottom:min(16px,1.8vh)}
  .feed{gap:min(16px,1.8vh)}
  .note{grid-template-columns:52px 1fr;gap:4px 18px;padding:min(22px,2.4vh) 24px;border-radius:22px}
  .note img{width:52px;height:52px;border-radius:13px}
  .note .when{font-size:14px}
  .note p{font-size:min(1.45vw,2.6vh)}
  .plans-foot{margin-top:min(40px,3.6vh)}
  .plans-foot .btn{min-height:min(62px,7.4vh);padding:0 38px;font-size:18.5px}
}
@media (min-width:1101px){
  .join>.wrap{max-width:1420px}
  .join-grid{grid-template-columns:minmax(0,1fr) minmax(440px,560px);gap:min(110px,6vw)}
  .join h2{font-size:min(5.3vw,8.6vh);max-width:14ch}
  .join .eyebrow{font-size:14px}
  .call{font-size:min(20px,2.5vh);margin-top:min(36px,3.6vh)}
  .wait{padding:min(40px,4.2vh) min(40px,3vw);gap:min(16px,1.6vh)}
  .wait h3{font-size:min(34px,4.2vh)}
  .wait label{font-size:15.5px;gap:8px}
  .wait input{min-height:min(62px,6.8vh);font-size:18px;padding:0 20px;border-radius:16px}
  .wait .btn{min-height:min(64px,7vh);font-size:19px}
  .pro-link{font-size:15.5px}
  .privacy li{font-size:min(15px,1.85vh)}
  .privacy summary{font-size:15.5px}
  .privacy-links{font-size:min(15px,1.85vh)}
}
@media (min-width:901px) and (max-height:740px){.get-grid .getlist li{padding:min(12px,1.5vh) 0}.get-grid{margin-top:20px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rise{opacity:1;transform:none}
}