/* ACS homepage, redesign: one buyer's week.
   One ground, one ink, one yellow decision per screen. Light by design. */
:root{
  --paper:#F4F6F2; --wash:#EBF0EC; --card:#FFFFFF; --ink:#17221C; --ink-2:#3A4741; --muted:#5E6B64;
  --line:#DAE1DC; --forest:#1F4A39; --yellow:#F2C94C; --on-yellow:#2B2300;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --r:14px; --shadow:0 1px 2px rgba(23,34,28,.05),0 14px 40px rgba(23,34,28,.08);
  --pad:clamp(72px,10vw,128px);
  /* the shared lift and the kit green, used by every redesigned section */
  --lift:0 1px 2px rgba(23,34,28,.06),0 18px 40px -18px rgba(23,34,28,.3),0 40px 80px -48px rgba(23,34,28,.35);
  --forest-grad:linear-gradient(160deg,#2A5B46 0%,#1F4A39 46%,#163629 100%);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.narrow{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:8px 14px;border-radius:8px;z-index:50}
.skip:focus{left:12px}

h1,h2,h3{font-family:var(--serif);font-weight:340;letter-spacing:-.018em;line-height:1.04;margin:0;text-wrap:balance}
h1{font-size:clamp(46px,7.4vw,96px);font-weight:320}
h2{font-size:clamp(34px,4.6vw,58px)}
h3{font-size:24px;font-weight:400;letter-spacing:-.01em}
p{margin:0}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:16px;height:16px}
.ic.lg{width:28px;height:28px;stroke-width:1.4}
use[href="#i-play"]{fill:currentColor}

/* buttons: yellow is the decision, everything else is quiet */
.btn{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;
  font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--yellow);color:var(--on-yellow)}
.btn.primary:hover{background:#EDBE35}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(23,34,28,.28)}
.btn.ghost:hover{border-color:var(--ink);background:var(--card)}
.btn.small{min-height:40px;padding:0 18px;font-size:14.5px}
.round{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;border:1.5px solid rgba(23,34,28,.22);
  background:var(--card);color:var(--ink);cursor:pointer}
.round:hover{border-color:var(--ink)}
.textlink{display:inline-flex;align-items:center;gap:6px;color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* the lifted card: frosted white, one radius, one soft lift. Cards over films, plans, the form */
.frost{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.8);border-radius:20px;box-shadow:var(--lift)}

/* header: the week pill tells you where you are in the story */
.top{position:sticky;top:0;z-index:20;background:rgba(244,246,242,.84);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(218,225,220,.7)}
.top-row{display:flex;align-items:center;gap:20px;height:68px}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:26px;margin-left:12px}
.nav a{text-decoration:none;font-size:15px;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
/* the week pill is the page's clock and its storyteller, and the header's only control: the ask lives in the hero
   and then in the floating button. Its hands turn to each moment of the buyer's week, the time rolls over, and on
   wider screens a line from the scene says what is happening (redesign.js) */
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.when-pill{display:inline-flex;align-items:center;gap:8px;height:38px;max-width:520px;padding:0 14px 0 10px;border-radius:999px;
  background:#1B4133;color:#A9D6BE;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(8,24,17,.35),0 1px 2px rgba(23,34,28,.18),0 10px 22px -12px rgba(23,34,28,.6);
  transition:max-width .55s cubic-bezier(.3,.7,.2,1),opacity .35s ease,padding .55s cubic-bezier(.3,.7,.2,1),margin .55s cubic-bezier(.3,.7,.2,1)}
.when-clock{flex:0 0 auto;width:20px;height:20px}
.when-clock circle{fill:none;stroke:currentColor;stroke-width:1.6}
.when-clock .hub{fill:currentColor;stroke:none}
.when-clock line{stroke:currentColor;stroke-width:1.9;stroke-linecap:round;transform-box:view-box;transform-origin:12px 12px;
  transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.when-clock .m-hand{stroke-width:1.5}
/* the words, as a flight board (redesign.js builds the cells). Each character is a flap: the old top half folds
   down, the new bottom half lands, and a few characters flick past before it settles; characters that stay the same
   stay put. The time sits on tiles; the story line flips bare, in a smaller mono. Without script: plain words */
.when-roll,.when-say{display:inline-flex;align-items:center;height:38px;overflow:hidden;white-space:nowrap;
  transition:width .5s cubic-bezier(.3,.7,.2,1)}
.cells{display:inline-flex;align-items:center;gap:2px}
.fc{--tile:#0E261D;--tile-top:#133027;position:relative;flex:0 0 auto;width:calc(1ch + 4px);height:20px;letter-spacing:0;perspective:140px;
  font-weight:600;color:#F1F5F2;transition:opacity .2s ease}
.fc b{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--tile);font-weight:inherit}
.fc .t,.fc .ft{top:0;border-radius:3px 3px 0 0;background:var(--tile-top,var(--tile))}
.fc .b,.fc .fb{bottom:0;border-radius:0 0 3px 3px}
.fc i{position:absolute;left:0;right:0;height:200%;line-height:20px;font-style:normal;text-align:center}
.fc .t i,.fc .ft i{top:0}
.fc .b i,.fc .fb i{top:-100%}
.fc .ft,.fc .fb{display:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fc .ft{transform-origin:50% 100%}
.fc .fb{transform-origin:50% 0;transform:rotateX(90deg)}
.fc.go .ft{display:block;animation:flap-top var(--fd,50ms) ease-in both}
.fc.go .fb{display:block;animation:flap-bot var(--fd,50ms) ease-out var(--fd,50ms) both}
@keyframes flap-top{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes flap-bot{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
/* the split between the flaps: a hairline, light enough that it never reads as a line through the letters */
.fc::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:rgba(4,14,10,.85);transform:scaleY(.6);z-index:2}
.fc.gone{opacity:0}
.when-say .cells{gap:0}
.when-say .fc{--tile:#1B4133;--tile-top:#1B4133;width:1ch;height:18px;font:500 11.5px var(--mono);text-transform:uppercase;color:#CFE0D6}
.when-say .fc i{line-height:18px}
.when-say .fc::after{display:none}
.when-say{max-width:300px;margin-left:2px;padding-left:10px;box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
.when-say:not(.board) > span{font:500 13.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-2)}

/* hero */
.hero{padding:clamp(56px,8vw,96px) 0 var(--pad)}
.hero-text{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;margin-bottom:clamp(40px,6vw,64px)}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.lede{max-width:34ch;font-size:clamp(18px,1.6vw,21px);color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}

/* films: placeholders now, keyframes and loops dropped in later */
.film{margin:0;display:flex;flex-direction:column;gap:12px}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background-size:cover;background-position:var(--focus,center);box-shadow:var(--shadow)}
.film.wide .film-frame{border-radius:20px}
/* --focus on a .film sets where a landscape film is cropped on a phone, e.g. style="--focus:22% 50%" */
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);opacity:0;transition:opacity .6s ease}
.film.playing video{opacity:1}
.film-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:clamp(18px,3vw,28px);color:#fff}
.ph-icon{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.3;opacity:.9;margin-bottom:auto}
.ph-kind{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.ph-desc{font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);line-height:1.25;max-width:30ch;text-shadow:0 1px 14px rgba(0,0,0,.2)}
.ph-file{font-family:var(--mono);font-size:11.5px;opacity:.75}
.film.has-frame .film-ph{background:linear-gradient(180deg,transparent 45%,rgba(10,16,13,.55))}
.film.has-frame .ph-icon,.film.has-frame .ph-file,.film.has-frame .ph-kind{display:none}
.film.has-film .film-ph{display:none}
.film figcaption{font-size:15px;color:var(--muted);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.film figcaption .mono{color:var(--forest);font-size:11.5px}
.film-toggle{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:999px;
  background:rgba(255,255,255,.88);color:var(--ink);font:600 13px var(--sans);cursor:pointer}
.film-toggle .ic{width:15px;height:15px}
.film-toggle[hidden]{display:none}
/* a phone held upright plays the vertical films at their own 9:16, uncropped */
@media (max-width:700px) and (orientation:portrait){ html .film-frame,html .film.wide .film-frame{aspect-ratio:9/16} }
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* film stories: timed lines that type themselves over a playing film (redesign.js) */
.film-story{display:none;position:absolute;left:0;right:0;bottom:0;margin:0;list-style:none;
  padding:clamp(56px,9vw,110px) 150px clamp(18px,2.6vw,26px) clamp(18px,3vw,30px);
  background:linear-gradient(180deg,rgba(18,14,10,0) 0%,rgba(18,14,10,.32) 45%,rgba(18,14,10,.6) 100%);
  color:#F4EEE4;font:400 15px/1.55 var(--mono);letter-spacing:.01em;pointer-events:none;opacity:0;transition:opacity .9s ease}
.film.has-film .film-story{display:grid;gap:4px}
.film.playing .film-story,.film-story.told{opacity:1}
.film.playing .film-story.fading{opacity:0}
.film-story li{display:grid;grid-template-columns:5.6em 1fr;gap:12px;align-items:baseline;transition:opacity .6s ease}
.film-story time{color:rgba(244,238,228,.62);font-size:.8em;letter-spacing:.08em;text-transform:uppercase}
.film-story .says{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.film-story.armed li{opacity:0}
.film-story.armed li.in{opacity:1}
.film-story.armed li.past{opacity:.5}
.film-story.armed .says span{display:none}
.film-story.armed .says span.on{display:inline;animation:ink .3s ease-out both}
.film-story li.cur .says::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.18em;
  background:currentColor;opacity:.8;animation:caret 1.1s steps(1) infinite}
@media (min-width:701px){ .film:not(.wide) .film-story{padding-top:clamp(40px,6vw,72px);font-size:14px} }
@keyframes ink{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
@keyframes caret{50%{opacity:0}}
.sky-night .film-frame{background-image:linear-gradient(160deg,#1B2440 0%,#2D3A5E 55%,#8A6D3B 130%)}
.sky-dusk .film-frame{background-image:linear-gradient(180deg,#E9B872 0%,#C98E6B 38%,#4E5E7E 100%)}
.sky-dawn .film-frame{background-image:linear-gradient(180deg,#F3E2B3 0%,#D9E3D6 55%,#9DB6A7 100%)}
.sky-late .film-frame{background-image:linear-gradient(180deg,#F1CE8E 0%,#D7A776 45%,#7C8F86 100%)}
.sky-dawn .film-ph{color:#17221C}
.sky-dawn .ph-desc{text-shadow:none}

/* the hero's three promises: lifted cards over the foot of the film, the same move as the keys */
.hero-stage{--lap:clamp(52px,5.4vw,72px);position:relative}
.hero-stage .film figcaption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-stage .film-toggle{top:14px;bottom:auto}
@media (min-width:901px){ .hero-stage .film-story{padding-bottom:calc(var(--lap) + 22px)} }
.promise-row{position:relative;z-index:2;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin:calc(-1 * var(--lap)) clamp(16px,2.6vw,32px) 0;padding:0}
.promise{display:flex;gap:14px;align-items:center;padding:16px 18px}
.promise-ic{width:42px;height:42px;border-radius:50%;background:var(--wash);color:var(--forest);display:grid;place-items:center;flex:0 0 auto}
.promise div{display:flex;flex-direction:column;gap:1px;min-width:0}
.promise b{font-weight:600;font-size:16px}
.promise div span{font-size:14.5px;line-height:1.4;color:var(--muted)}
@media (max-width:900px){ .promise-row{grid-template-columns:1fr;gap:10px;margin:14px 0 0} }

/* Thursday: a device on the sofa, a laptop on desktops, a tablet on tablets, a phone on phones. The film plays as
   the page in its browser, with ten Everests open in the tabs; they switch by themselves and the address bar follows (redesign.js) */
.device{position:relative;width:100%}
.device-screen{position:relative;padding:13px 12px 14px;border-radius:18px 18px 8px 8px;background:#1C211F;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),var(--lift)}
.device-screen::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3A423E}
.device-base{position:relative;height:clamp(10px,1.2vw,15px);margin:0 -5%;border-radius:2px 2px 14px 14px / 2px 2px 12px 12px;
  background:linear-gradient(180deg,#E6EBE8 0%,#C4CBC7 55%,#A8B0AB 100%);box-shadow:0 22px 34px -20px rgba(23,34,28,.5)}
.device-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;border-radius:0 0 8px 8px;background:rgba(23,34,28,.14);transform:translateX(-50%)}
.browser{border-radius:7px;overflow:hidden;background:#fff}
.browser-top{display:flex;align-items:flex-end;gap:12px;padding:8px 10px 0;background:#DEE4E0}
.lights{display:flex;gap:6px;align-self:center;flex:0 0 auto;margin-top:-2px}
.lights i{width:10px;height:10px;border-radius:50%;background:#E5695A}
.lights i:nth-child(2){background:#E6B647}
.lights i:nth-child(3){background:#5BB662}
.browser-tabs{flex:1;min-width:0;position:relative;display:flex;align-items:flex-end;list-style:none;margin:0;padding:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.browser-tabs li{flex:0 0 auto;display:flex;align-items:center;gap:7px;max-width:172px;height:30px;padding:0 13px;
  border-radius:9px 9px 0 0;background:transparent;color:var(--muted);font:500 12px var(--sans);white-space:nowrap;
  box-shadow:inset -1px 0 0 rgba(23,34,28,.1);transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.browser-tabs li span{overflow:hidden;text-overflow:ellipsis}
.browser-tabs li::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--forest);opacity:.4;flex:0 0 auto}
.browser-tabs li.on{position:relative;z-index:1;background:#fff;color:var(--ink);box-shadow:none}
.browser-tabs li.on::before{opacity:1}
.browser-tabs li.more{box-shadow:none;font:500 11px var(--mono);letter-spacing:.04em}
.browser-tabs li.more::before{display:none}
/* switching: the tab being read loads along its foot, and the page flashes as it changes */
.browser-tabs.tabs-live li.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
  background:var(--forest);opacity:.7;transform-origin:left;animation:tab-load var(--tab-dwell,1.8s) linear both}
@keyframes tab-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tabs-stage .film-frame.tab-flash::after{content:"";position:absolute;inset:0;z-index:1;background:#fff;pointer-events:none;animation:tab-flash .45s ease-out both}
@keyframes tab-flash{from{opacity:.16}to{opacity:0}}
.browser-bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:#fff;border-bottom:1px solid #E6EBE8;color:#9AA39E}
.browser-bar > .ic{width:15px;height:15px}
.url{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:24px;margin-left:4px;padding:0 12px;border-radius:999px;
  background:#F1F4F2;color:var(--ink-2);font:500 12.5px var(--sans)}
.url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .22s ease}
.url.swap span{opacity:0}
.url .ic{width:13px;height:13px;color:var(--muted)}
.device .film{gap:0}
.device .film-frame{border-radius:0;box-shadow:none}
.device .film figcaption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* tablets: the same browser on a tablet, an even bezel and no keyboard */
@media (min-width:701px) and (max-width:980px){
  .device{max-width:720px;margin:0 auto}
  .device-screen{padding:16px;border-radius:30px}
  .device-screen::before{top:6px}
  .browser{border-radius:14px}
  .device-base{display:none}
}
/* phones: a phone in the hand. Its browser keeps the tabs, and the film plays in its own upright cut */
@media (max-width:700px){
  .device{width:min(300px,84vw);margin:0 auto}
  .device-screen{padding:9px;border-radius:42px}
  .device-screen::before{top:17px;z-index:3;width:64px;height:19px;margin-left:-32px;border-radius:999px;background:#050706}
  .browser{border-radius:34px}
  .browser-top{padding:42px 10px 0;gap:0}
  .lights{display:none}
  .browser-tabs li{max-width:112px;height:27px;padding:0 10px;font-size:11px}
  .browser-bar{height:32px;gap:6px}
  .browser-bar > .ic{display:none}
  .url{margin-left:0;height:24px;font-size:11.5px;justify-content:center}
  .device .film-story{padding:64px 14px 16px;font-size:11.5px}
  .device-base{display:none}
  .browser-tabs:not(.tabs-live) li.on{order:-1}
}

/* scenes: text beside a large frame, alternating sides */
.scene{padding:var(--pad) 0}
.scene + .scene{border-top:1px solid var(--line)}
.scene-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:center}
.scene.flip .scene-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.scene.flip .scene-text{order:2}
/* a scene led by a film gives the film more of the row */
.scene-grid.media-wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,64px)}
.scene.flip .scene-grid.media-wide{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.scene-text{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.scene-text > p{max-width:44ch;font-size:18px;color:var(--ink-2)}
.scene-text.center{align-items:center;text-align:center;margin:0 auto clamp(36px,5vw,56px);max-width:760px}
.scene-text.center > p{max-width:52ch}
.time{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.time .ic{width:17px;height:17px}
.points{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.points li{display:flex;gap:12px;align-items:center;font-size:16px;line-height:1.45;color:var(--ink-2)}
.points .ic{box-sizing:content-box;width:18px;height:18px;padding:8px;border-radius:50%;background:var(--wash);color:var(--forest)}

/* Saturday: the film with the live sticker over its corner */
.qr-stack{position:relative;display:flex;flex-direction:column;gap:18px}
.try{display:flex;gap:clamp(18px,3vw,32px);align-items:center;padding:clamp(16px,2vw,22px)}
/* Saturday: the live sticker card lifts over the foot of the film, the film's width less a small inset */
@media (min-width:701px){
  .qr-stack{--lap:56px;gap:0}
  .qr-stack .try{position:relative;z-index:2;margin:calc(-1 * var(--lap)) 18px 0}
  .qr-stack .film-story{padding-bottom:calc(var(--lap) + 20px)}
  .qr-stack .film figcaption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .qr-stack .film-toggle{top:14px;bottom:auto}
}
.try .sticker{transform:rotate(-2deg);box-shadow:0 10px 20px -12px rgba(23,34,28,.4)}
.sticker{background:#fff;color:#15222A;border:1px dashed #9AA0A3;border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;flex:0 0 auto}
.sticker b{font-family:var(--serif);font-weight:500;font-size:14px}
.sticker img{width:118px;height:118px;image-rendering:pixelated}
.sticker small{font-family:var(--mono);font-size:9.5px;color:#5B676D}
.sticker.big img{width:190px;height:190px}
.sticker.big b{font-size:18px}
.sticker.big small{font-size:11px}
.try-text{display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex:1 1 auto;min-width:0}
.try-text .textlink{white-space:nowrap}
.try-text b{font-weight:600}
.try-text p{font-size:14.5px;color:var(--muted)}

/* Sunday: the page flipper */
/* Sunday: the brochure as a deck of cards dealt over the film (redesign.js) */
.deck-stage{position:relative;container-type:inline-size}
/* the film stops short of the right edge, so the deck hangs off it: about a quarter of the pages sit out past the video */
@media (min-width:701px){ .deck-stage > .deck-film{margin-right:9cqw} }
.deck{position:absolute;top:4.5cqw;right:1.5cqw;width:27cqw;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px}
.deck-cards{position:relative;width:100%;aspect-ratio:900/1274;outline:none}
.deck-cards:focus-visible{outline:2px solid #fff;outline-offset:8px;border-radius:18px}
.deck-card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(10,8,6,.55),0 2px 6px rgba(10,8,6,.25);transform-origin:50% 90%;
  transition:transform .6s cubic-bezier(.2,.75,.25,1),opacity .45s ease}
.deck-card[data-pos="0"]{z-index:3}
.deck-card[data-pos="1"]{z-index:2;transform:translate(3.5%,2.5%) rotate(2.5deg)}
.deck-card[data-pos="2"]{z-index:1;transform:translate(7%,5%) rotate(5deg)}
.deck-card[data-pos="out"]{z-index:4;transform:translate(-75%,3%) rotate(-9deg);opacity:0}
.deck-card.snap{transition:none}
.deck-card.hid{opacity:0}
.deck-cards{cursor:pointer;touch-action:pan-y}
.deck-controls{display:flex;align-items:center;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 6px 18px -8px rgba(10,8,6,.5)}
.deck-controls .round{width:36px;height:36px;border:0}
.deck-controls .mono{min-width:4.5em;text-align:center;font-size:12px;color:var(--ink)}
.deck-play{position:relative;margin-left:4px}
.deck .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.deck .ring circle{fill:none;stroke:var(--forest);stroke-width:2;stroke-linecap:round;stroke-dasharray:100.6;stroke-dashoffset:100.6;opacity:0}
.deck.ticking .ring circle{opacity:1;animation:deal-ring var(--dwell,3s) linear forwards}
@keyframes deal-ring{to{stroke-dashoffset:0}}
.film.deck-film .film-toggle{left:14px;right:auto;top:14px;bottom:auto}
@media (min-width:701px){ .film.deck-film .film-story{padding-right:calc(20cqw + 24px)} }
@media (prefers-reduced-motion:reduce){ .deck-card{transition:none} }
.film.small{margin-top:10px;width:100%;max-width:460px}

/* Monday: the chat */
/* the chat phone: one fixed shape, sized to fit the window, with a slim bezel and a soft lift.
   Everything inside is drawn in --u (one screen point), so the screen scales like a screenshot and never reflows */
.phone{justify-self:center;width:min(340px,100%,calc((100svh - 96px) * 9 / 18.5));aspect-ratio:9/18.5;background:#fff;border-radius:44px;padding:12px;
  display:flex;flex-direction:column;overflow:hidden;container-type:inline-size;--u:calc(100cqw / 316);
  box-shadow:0 0 0 1px rgba(23,34,28,.06),0 0 0 7px #EEF2EF,0 0 0 8px rgba(23,34,28,.08),
    0 2px 4px rgba(23,34,28,.05),0 22px 44px -22px rgba(23,34,28,.28),0 44px 90px -40px rgba(23,34,28,.3)}
.phone-top{flex:0 0 auto;display:flex;align-items:center;gap:calc(12*var(--u));padding:calc(8*var(--u)) calc(8*var(--u)) calc(12*var(--u));border-bottom:1px solid var(--line)}
.phone-top div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.phone-top b{font-size:calc(15.5*var(--u))}
.phone-top small{color:var(--muted);font-size:calc(12.5*var(--u))}
/* a group chat: Alex and Sam, faces overlapping. Each face shows its initial until the photo loads */
.faces{display:flex;flex:0 0 auto}
.face{width:calc(38*var(--u));height:calc(38*var(--u));border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;
  font-weight:600;font-size:calc(14*var(--u));overflow:hidden;position:relative;box-shadow:0 0 0 calc(2.5*var(--u)) #fff}
.face.alt{background:#5E6B64}
.face + .face{margin-left:calc(-12*var(--u))}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the thread fills the screen and builds from the bottom, like a real chat: older messages rise out of view */
.thread{list-style:none;margin:0;padding:calc(14*var(--u)) calc(6*var(--u)) calc(10*var(--u));display:flex;flex-direction:column;justify-content:flex-end;gap:calc(10*var(--u));
  flex:1 1 auto;min-height:0;overflow:hidden}
.msg{max-width:84%;padding:calc(10*var(--u)) calc(13*var(--u)) calc(6*var(--u));border-radius:calc(18*var(--u));font-size:calc(15*var(--u));line-height:1.4;
  display:flex;flex-direction:column;gap:calc(2*var(--u))}
.msg time{font-size:calc(10.5*var(--u));opacity:.6;align-self:flex-end}
.msg .who{font-size:calc(12*var(--u));font-weight:600;color:var(--forest)}
.msg.in{background:var(--wash);border-bottom-left-radius:calc(6*var(--u));align-self:flex-start}
.msg.out{background:var(--forest);color:#fff;border-bottom-right-radius:calc(6*var(--u));align-self:flex-end}
/* the brochure is the point of the chat: a warm butter card, drawn from the brand yellow, lifted off the thread */
.msg.file{flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(12*var(--u));background:#FFF7DC;color:var(--ink);
  border:1px solid #F0DC9C;border-bottom-right-radius:calc(6*var(--u));padding:calc(10*var(--u));position:relative;z-index:1;
  box-shadow:0 1px 2px rgba(74,56,0,.08),0 calc(14*var(--u)) calc(28*var(--u)) calc(-14*var(--u)) rgba(74,56,0,.38)}
.msg.file img{width:calc(46*var(--u));height:calc(82*var(--u));object-fit:cover;border-radius:calc(7*var(--u));border:calc(2*var(--u)) solid #fff;
  box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) calc(-4*var(--u)) rgba(74,56,0,.35)}
.msg.file div{display:flex;flex-direction:column;gap:calc(3*var(--u));font-size:calc(13.5*var(--u));line-height:1.3;flex:1}
.msg.file small{color:#7A6327;display:flex;align-items:center;gap:calc(6*var(--u))}
.msg.file time{width:100%;color:#7A6327;opacity:.85}
.thread.replaying .msg:not(.shown){display:none}
.thread.replaying .msg.shown{animation:msg-in .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes msg-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.phone-compose{flex:0 0 auto;display:flex;align-items:center;gap:calc(8*var(--u));margin:calc(8*var(--u)) calc(4*var(--u)) calc(2*var(--u));
  padding:calc(5*var(--u)) calc(5*var(--u)) calc(5*var(--u)) calc(16*var(--u));
  border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:calc(14*var(--u))}
.phone-compose span{flex:1}
.phone-compose i{width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center}
@media (max-width:700px){ .phone{width:min(330px,100%,calc((100svh - 80px) * 9 / 17.5));aspect-ratio:9/17.5} }
.typing{align-self:flex-start;background:var(--wash);border-radius:calc(18*var(--u));padding:calc(12*var(--u)) calc(14*var(--u));display:inline-flex;gap:calc(4*var(--u))}
.typing i{width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--muted);animation:dot 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}

/* Tuesday: the walk-around fills the row; the cabin plays as a smaller film in its corner, hanging off the
   edge like the Sunday pages. Narrower screens swipe between the two */
.pair{position:relative;container-type:inline-size}
@media (min-width:901px){
  .pair > .film:first-child{margin:0 8cqw 12cqw 0}
  .pair > .film:first-child .film-frame{border-radius:20px}
  .pair > .film:first-child .film-story{padding-right:calc(30cqw + 28px)}
  .pair > .film:first-child .film-toggle{top:14px;bottom:auto}
  .pair > .film:nth-child(2){position:absolute;right:0;bottom:0;z-index:2;width:38cqw}
  .pair > .film:nth-child(2) .film-frame{border-radius:16px;box-shadow:0 0 0 6px #fff,var(--lift)}
  .pair > .film:nth-child(2) .film-story{padding:44px 16px 14px;font-size:12.5px}
  .pair > .film:nth-child(2) .film-toggle{top:10px;right:10px;bottom:auto;height:30px;padding:0 11px}
  .pair .film figcaption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:900px){
  .pair{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:-12px calc(-1 * clamp(20px,4vw,40px)) -48px;
    padding:12px clamp(20px,4vw,40px) 56px;scroll-padding:0 clamp(20px,4vw,40px);scrollbar-width:none}
  .pair::-webkit-scrollbar{display:none}
  .pair > .film{flex:0 0 min(84%,560px);scroll-snap-align:start}
}

/* keys + who wins */
/* Tuesday 5:15 pm, the keys: one wide film, and the three people it is good for, lifted over its lower edge.
   Buyer first, because the headline runs that way: their confidence is what speeds the sale and protects the name */
/* the cards stop below the key: the fob sits ~77% down the film, so they cover only the last ~18% */
.wins-stage{--lap:clamp(84px,8.8vw,116px);position:relative}
.wins .film figcaption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wins .film-toggle{top:14px;bottom:auto}
@media (min-width:901px){ .wins .film-story{padding-bottom:calc(var(--lap) + 22px)} }
.sides{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin:calc(-1 * var(--lap)) clamp(16px,2.6vw,32px) 0}
.side{display:flex;flex-direction:column;gap:14px;padding:22px 24px 24px;border-radius:20px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 2px rgba(23,34,28,.06),0 18px 40px -18px rgba(23,34,28,.3),0 40px 80px -48px rgba(23,34,28,.35)}
.side-head{display:flex;align-items:center;gap:12px}
.side-face{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;
  background:var(--forest);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.side-face img{width:100%;height:100%;object-fit:cover}
/* the buyer card holds the couple: Alex and Jordan, faces overlapping */
.side-faces{display:flex;flex:0 0 auto}
.side-faces .side-face + .side-face{margin-left:-14px}
.side-who{display:flex;flex-direction:column;line-height:1.3}
.side-who .mono{font-size:11.5px;color:var(--forest)}
.side-who small{font-size:13.5px;color:var(--muted)}
.side h3{font-size:clamp(22px,2vw,26px);line-height:1.12}
.checks{margin:auto 0 0;padding:14px 0 0;list-style:none;display:flex;flex-direction:column;gap:9px;
  border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-2)}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks .ic{width:16px;height:16px;margin-top:3px;color:var(--forest);stroke-width:2}
/* narrower screens: the cards leave the film and become a row you swipe, the next one peeking in */
@media (max-width:900px){
  .sides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:6px calc(-1 * clamp(20px,4vw,40px)) -42px;
    padding:18px clamp(20px,4vw,40px) 72px;scroll-padding:0 clamp(20px,4vw,40px);scrollbar-width:none}
  .sides::-webkit-scrollbar{display:none}
  .side{flex:0 0 min(84%,340px);scroll-snap-align:start;background:#fff}
}

/* the kit */
.kit{padding:var(--pad) 0;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;background:var(--paper);padding:6px;border-radius:999px;width:max-content;max-width:100%;margin:0 auto 36px}
.tabs button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  font:600 15px var(--sans);color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(23,34,28,.08),0 4px 12px rgba(23,34,28,.06)}
.panel[hidden]{display:none}
.shelf{display:grid;gap:22px;align-items:end}
.shelf figure{margin:0;display:flex;flex-direction:column;gap:12px}
.shelf img{border-radius:6px;box-shadow:var(--shadow);background:var(--wash)}
.shelf figcaption{display:flex;flex-direction:column;gap:2px}
.shelf figcaption b{font-weight:600}
.shelf figcaption span{font-size:14.5px;color:var(--muted)}
.shelf.four{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr)}
.shelf.phones{grid-template-columns:repeat(3,minmax(0,230px));justify-content:center}
.shelf.phones img{border-radius:22px}
.shelf.posts{grid-template-columns:1fr .8fr 1.6fr .56fr;align-items:end}
.shelf video{display:block;width:100%;height:auto;border-radius:6px;box-shadow:var(--shadow);background:var(--wash)}
/* anything that opens large in the lightbox */
.zoom{display:block;position:relative;width:100%;padding:0;border:0;background:none;border-radius:6px;cursor:zoom-in;color:inherit}
.zoom:focus-visible{outline:2px solid var(--forest);outline-offset:4px}
.slot{border:1.5px dashed #B9C4BD;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--muted);text-align:center;padding:16px;background:var(--paper)}
.slot b{color:var(--ink);font-weight:600}
.slot span{font-size:13.5px}
.slot .ic{color:var(--forest)}
.slot.sq{aspect-ratio:1}.slot.tall{aspect-ratio:4/5}.slot.land{aspect-ratio:16/9}
.shelf.oncar{grid-template-columns:minmax(0,340px) minmax(0,260px);justify-content:center;gap:48px}
.mini-phone{border-radius:30px;padding:10px;background:#fff;box-shadow:var(--shadow),0 0 0 8px #E4E9E5;aspect-ratio:9/18.5;overflow:hidden}
.mini-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:22px;box-shadow:none}
.panel-note{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:24px;font-size:14.5px;color:var(--muted)}
.panel-note .ic{color:var(--forest)}

/* ---- the kit as an orbit (redesign.js). Without script, or with reduced motion, it is a row to swipe ---- */
#kit{background:var(--wash)}
.orbit{position:relative;margin-top:clamp(8px,1.5vw,20px)}
.orbit-stage{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vh,28px)}
.orbit-tabs{position:relative;z-index:5;display:flex;gap:2px;padding:6px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 10px 30px -18px rgba(23,34,28,.35)}
.orbit-pill{position:absolute;top:6px;left:6px;width:0;height:44px;border-radius:999px;background:var(--paper);
  box-shadow:0 0 0 1.5px var(--forest),0 6px 14px -8px rgba(23,34,28,.4);transition:transform .6s cubic-bezier(.3,.8,.2,1),width .6s cubic-bezier(.3,.8,.2,1)}
.o-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;
  color:var(--muted);font-weight:600;font-size:15.5px;text-decoration:none;white-space:nowrap;transition:color .35s}
.o-tab .ic{width:18px;height:18px}
.o-tab:hover,.o-tab[aria-current="true"]{color:var(--ink)}
.o-tab:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.orbit-ring{position:relative;width:100%}
.orbit-dome{display:none}
.orbit-cards{list-style:none;margin:0;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px clamp(20px,6vw,80px) 28px;scrollbar-width:none}
.orbit-cards::-webkit-scrollbar{display:none}
.o-card{flex:0 0 auto;height:min(52svh,440px);aspect-ratio:var(--ar);scroll-snap-align:center}
/* every piece in the kit wears the same card: one radius, one soft shadow */
.o-card .zoom{height:100%;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(23,34,28,.06),0 20px 44px -24px rgba(23,34,28,.38)}
.o-card img,.o-card video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.o-card.is-phone img{object-position:top}
.orbit:not(.orbit-on) .o-card.o-first{margin-left:clamp(28px,4vw,56px)}
/* each group opens with a card of its own: what the group is for, and what is in it */
.o-intro-in{height:100%;display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.2vw,28px);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#2A5B46 0%,#1F4A39 46%,#163629 100%);color:#EAF2ED;
  box-shadow:0 1px 2px rgba(23,34,28,.06),0 20px 44px -24px rgba(23,34,28,.38)}
.o-eyebrow{display:flex;align-items:center;gap:8px;margin:0;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#A9D6BE}
.o-eyebrow .ic{width:18px;height:18px}
.o-intro h3{margin-top:auto;font-family:var(--serif);font-weight:340;font-size:clamp(25px,2.5vw,34px);line-height:1.04;color:#FFFFFF;text-wrap:balance}
.o-lede{margin:0;font-size:clamp(13px,1vw,15px);line-height:1.5;color:#D3E2D9}
.o-intro ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:5px;
  font:500 11.5px var(--mono);letter-spacing:.03em;color:#CFE0D6}
.o-intro ul li{display:flex;align-items:center;gap:8px}
.o-intro ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:#A9D6BE;flex:0 0 auto}
.orbit-on .o-card:not(.is-front){cursor:pointer}   /* the row keeps a gap between groups too */
.kit.has-orbit{padding-bottom:0}                                           /* the stage ends where the section does */
.orbit-caption{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:98px;padding:0 20px;text-align:center}
.o-group{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.o-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.15;text-wrap:balance}
.o-desc{margin:0;color:var(--ink-2);font-size:16px}
.o-note{margin:0;color:var(--muted);font-size:13.5px;max-width:54ch}
.orbit-caption.swap .o-title,.orbit-caption.swap .o-desc,.orbit-caption.swap .o-note{animation:cap-in .5s cubic-bezier(.2,.7,.2,1) both}
.orbit-caption.swap .o-desc{animation-delay:.05s}
.orbit-caption.swap .o-note{animation-delay:.1s}
@keyframes cap-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* the orbit itself, once the script has taken over: a sticky stage the page scrolls through */
.orbit.orbit-on{height:var(--run,500vh)}
.orbit-on .orbit-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;justify-content:flex-start;padding:clamp(78px,11vh,112px) 0 0}
.orbit-on .orbit-ring{flex:1;min-height:0}
/* a wheel of cards: flat, fanned on the rim, stacked by distance from the front */
.orbit-on .orbit-cards{position:absolute;inset:0;z-index:1;display:block;overflow:visible;padding:0}
.orbit-on .o-card{position:absolute;left:50%;top:var(--cy,50%);will-change:transform,opacity;backface-visibility:hidden}
/* the hub the wheel turns on: it rises behind the cards, so no card is ever covered, and carries the caption */
.orbit-on .orbit-dome{display:block;position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#132E24 0%,#18392D 60%,#1F4A39 88%,#2E6250 100%);
  box-shadow:0 -28px 70px -34px rgba(23,34,28,.5),inset 0 3px 0 rgba(255,255,255,.08)}
.orbit-on .orbit-caption{position:absolute;left:0;right:0;bottom:clamp(18px,3.5vh,36px);z-index:3;min-height:0}
.orbit-on .o-group{color:#A9D6BE}
.orbit-on .o-title{color:#FFFFFF}
.orbit-on .o-desc{color:#DCE8E1}
.orbit-on .o-note{color:#B4CABF}
.orbit-on .o-card:not(.is-front) .zoom{cursor:pointer}
@media (max-width:700px){
  .o-tab{gap:0;padding:0 11px;font-size:14px}
  .o-tab .ic{display:none}
  .o-card{height:min(46svh,380px)}
  .o-title{font-size:23px}
  .o-desc{font-size:15px}
}

/* Wednesday: three steps (a real order) */
.steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;counter-reset:step}
.steps li{display:flex;gap:16px;align-items:flex-start;counter-increment:step}
.step-ic{width:44px;height:44px;border-radius:50%;background:var(--wash);color:var(--forest);display:grid;place-items:center;flex:0 0 auto;position:relative}
.step-ic::after{content:counter(step);position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;background:var(--forest);color:#fff;
  font:500 11px/20px var(--mono);text-align:center}
.steps div{display:flex;flex-direction:column;gap:2px}
.steps b{font-weight:600}
.steps span{font-size:15.5px;color:var(--muted)}
.steps li{position:relative}
.steps li:not(:last-child)::before{content:"";position:absolute;left:21px;top:52px;bottom:-14px;width:2px;border-radius:2px;background:var(--line)}
/* Wednesday: the film runs the width, and the three steps sit on it in one lifted card */
.steps-stage{position:relative;container-type:inline-size}
.steps-card{display:flex;flex-direction:column;gap:14px;padding:22px 24px 24px}
.steps-eyebrow{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.steps-stage .film figcaption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:901px){
  .steps-card{position:absolute;z-index:2;top:50%;right:28px;width:min(360px,34cqw);transform:translateY(-50%)}
  .steps-stage .film-story{padding-right:calc(34cqw + 60px)}
  .steps-stage .film-toggle{left:14px;right:auto;top:14px;bottom:auto}
}
@media (max-width:900px){
  .steps-card{position:relative;z-index:2;margin:-40px 14px 0}
  .steps-stage .film-story{padding-bottom:58px}
}

/* honest by design: a real page, the front of a stack of three. Scrolling pins it and lights its markers
   one, two, three, each with its note as a tooltip (redesign.js). Without script, or with reduced motion,
   every marker shows, a marker opens its tooltip, and the notes are listed beside the page */
.honest{padding:var(--pad) 0;border-top:1px solid var(--line)}
.honest-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:center}
.honest-pin{display:grid;place-items:center}
.notes{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:note;width:100%}
.notes li{counter-increment:note;display:grid;grid-template-columns:30px 1fr;column-gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  transition:border-color .2s ease,background-color .2s ease}
.notes li::before{content:counter(note);grid-row:span 2;width:26px;height:26px;border-radius:50%;background:var(--wash);color:var(--forest);
  font:500 12px/26px var(--mono);text-align:center}
.notes b{font-weight:600}
.notes span{font-size:15px;color:var(--muted)}
.notes li.on{border-color:var(--forest);background:var(--wash)}
.notes li.on::before{background:var(--yellow);color:var(--on-yellow)}
.honest-rail{display:none}
/* the stack: the page up front, two more fanned behind it as you arrive */
.stack{position:relative;margin:0;width:min(430px,100%,calc((100svh - 150px) * 900 / 1274));aspect-ratio:900/1274;--fan:1}
.stack-front,.stack-back{position:absolute;inset:0;width:100%;height:100%;border-radius:14px}
.stack-front{z-index:2;box-shadow:0 1px 2px rgba(23,34,28,.08),0 26px 54px -22px rgba(23,34,28,.42)}
.stack-front > img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.stack-back{object-fit:cover;background:#fff;transform-origin:50% 90%;box-shadow:0 14px 30px -16px rgba(23,34,28,.35)}
/* the pages behind step back: a touch smaller and fainter, so the eye stays on the page up front */
.stack-back.b1{z-index:1;opacity:.6;transform:translate(calc(var(--fan) * -9%),calc(var(--fan) * 1.5%)) rotate(calc(var(--fan) * -4deg)) scale(calc(1 - var(--fan) * .08))}
.stack-back.b2{z-index:0;opacity:.45;transform:translate(calc(var(--fan) * 9%),calc(var(--fan) * 3%)) rotate(calc(var(--fan) * 5deg)) scale(calc(1 - var(--fan) * .08))}
/* markers: they arrive one at a time; the one being told is yellow and breathes */
.hot{position:absolute;z-index:2;transform:translate(-50%,-50%);width:32px;height:32px;padding:0;border-radius:50%;border:2px solid #fff;
  background:var(--forest);color:#fff;font:500 12.5px var(--mono);cursor:pointer;
  box-shadow:0 0 0 5px rgba(31,74,57,.18),0 6px 14px -4px rgba(10,20,15,.45);
  transition:scale .5s cubic-bezier(.3,1.5,.5,1),opacity .3s ease,background-color .25s ease,color .25s ease}
.hot.on,.hot:hover{background:var(--yellow);color:var(--on-yellow)}
.hot.on::before,.hot.on::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--yellow);
  animation:hot-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.hot.on::after{animation-delay:.9s}
@keyframes hot-ring{from{opacity:.9;scale:1}to{opacity:0;scale:2.4}}
.honest-on .hot:not(.seen){opacity:0;scale:.3}
/* tooltips: frosted cards that rise out of their marker, with a pointer back to it */
.tip{position:absolute;z-index:3;width:max-content;max-width:min(260px,72vw);padding:12px 14px 13px;border-radius:14px;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(23,34,28,.08);
  box-shadow:0 1px 2px rgba(23,34,28,.08),0 16px 36px -14px rgba(23,34,28,.38);
  display:flex;flex-direction:column;gap:3px;text-align:left;pointer-events:none;
  --ax:50%;transform:translate(-50%,calc(-100% - 26px));transform-origin:var(--ax) 100%;
  opacity:0;translate:0 8px;scale:.96;transition:opacity .35s ease,translate .45s cubic-bezier(.2,.75,.25,1),scale .45s cubic-bezier(.2,.75,.25,1)}
.tip[data-align="end"]{--ax:calc(100% - 28px);transform:translate(calc(-100% + 28px),calc(-100% - 26px))}
.tip.on{opacity:1;translate:0 0;scale:1}
.tip::after{content:"";position:absolute;left:var(--ax);bottom:-7px;width:13px;height:13px;background:inherit;
  border-right:1px solid rgba(23,34,28,.08);border-bottom:1px solid rgba(23,34,28,.08);transform:translateX(-50%) rotate(45deg)}
.tip .mono{font-size:10.5px;color:var(--forest)}
.tip b{font-size:15px;line-height:1.3;font-weight:600;color:var(--ink)}
.tip > span:last-child{font-size:13.5px;line-height:1.45;color:var(--muted)}
/* pinned: the words hold the middle of the left column, the stack holds the right, while the page scrolls through three steps */
.honest.honest-on{padding:0}
.honest-on .honest-grid{align-items:start}
.honest-on .honest-text{position:sticky;top:0;height:100vh;height:100dvh;justify-content:center;padding-top:68px}
.honest-on .honest-track{height:360vh;overflow-x:clip}
.honest-on .honest-pin{position:sticky;top:0;height:100vh;height:100dvh;padding-top:68px}
.honest-on .honest-rail{display:flex;gap:6px;width:min(100%,240px);margin-top:4px}
.honest-rail i{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
/* one segment per point, filling over the half second that point holds */
.honest-rail b{display:block;height:100%;background:var(--forest);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.honest-on .notes{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){
  .honest-grid{grid-template-columns:minmax(0,1fr)}
  .honest.honest-on{padding-top:var(--pad)}
  .honest-on .honest-text{position:static;height:auto;padding-top:0}
  .honest-on .honest-track{height:300vh}
  .stack{width:min(300px,76vw,calc((100svh - 130px) * 900 / 1274))}
}
@media (prefers-reduced-motion:reduce){ .hot.on::before,.hot.on::after{animation:none} }

/* the person */
/* 12 · the person (redesign.js). Without script, or with reduced motion: the words, then the picture */
.human{padding:var(--pad) 0 0;background:var(--wash)}
.human-text{display:flex;flex-direction:column;gap:18px;align-items:flex-start;max-width:600px}
.human-text > p:not(.time){font-size:18px;color:var(--ink-2);max-width:48ch}
.human-car{display:block;width:min(100%,1100px);height:auto;margin:clamp(24px,4vw,40px) auto 0}
/* the pinned stage: the car sits at the foot of the screen, the words sit behind it and are cut off
   along the car's beltline, so they pass behind the bodywork and never show beneath it */
.human.human-on{padding:0}
.human-on .human-run{height:var(--hrun,230vh)}
.human-on .human-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.human-on .human-clip{position:absolute;left:0;right:0;top:0;height:var(--belt,60%);overflow:hidden;z-index:1}
.human-on .human-clip > .wrap{position:relative;height:100%}
.human-on .human-text{position:absolute;bottom:var(--lift,32px);left:clamp(20px,4vw,40px);width:auto}
.human-on.stacked .human-text{left:50%;width:min(92%,640px);max-width:none;margin-left:max(-46%,-320px);align-items:center;text-align:center}
.human-on .human-car{position:absolute;z-index:2;bottom:0;left:0;margin:0;height:auto;max-width:none;transform-origin:50% 100%;will-change:transform}
.human-on .h-rise{will-change:transform}
@media (max-width:700px){ .human-text > p:not(.time){font-size:16px} }

/* pricing, on request: three tiers read left to right. The free sample is the way in and carries the section's
   one yellow decision; package 2, the whole system this page shows, wears the kit green and sits a touch higher */
.pricing{padding:var(--pad) 0}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin-top:8px}
.tier{position:relative;display:flex;flex-direction:column;gap:6px;padding:28px;border-radius:20px;background:var(--card);box-shadow:var(--lift)}
.tier-anchor{top:-10px;background:var(--forest-grad);color:#EAF2ED}
.tier-flag{align-self:flex-start;margin-bottom:8px;padding:4px 10px;border-radius:999px;background:var(--wash);
  font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.tier-name{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.tier-price{margin-top:10px;font-family:var(--serif);font-weight:340;line-height:1}
.tier-price span{font-size:clamp(44px,4.4vw,60px);letter-spacing:-.02em}
.tier-price.on-request span{font-size:clamp(30px,2.7vw,38px)}   /* not "ask": that is the form section's class */
.tier-unit{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tier-list{flex:1;list-style:none;display:flex;flex-direction:column;gap:8px;margin:10px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-2)}
.tier-list li{position:relative;padding-left:24px}
.tier-list li::before{content:"";position:absolute;left:3px;top:.42em;width:9px;height:5px;
  border-left:1.6px solid var(--forest);border-bottom:1.6px solid var(--forest);transform:rotate(-45deg)}
.tier-list li.not{color:var(--muted)}
.tier-list li.not::before{top:.72em;height:0;border-left:0;transform:none}
.tier .btn{align-self:flex-start;margin-top:18px}
.tier-anchor .tier-flag{background:rgba(255,255,255,.1);color:#A9D6BE}
.tier-anchor .tier-name{color:#A9D6BE}
.tier-anchor .tier-price span{color:#fff}
.tier-anchor .tier-unit{color:#B4CABF}
.tier-anchor .tier-list{border-top-color:rgba(255,255,255,.16);color:#D3E2D9}
.tier-anchor .tier-list li::before{border-color:#A9D6BE}
.tier-anchor .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.tier-anchor .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.tier-small{max-width:72ch;margin:22px auto 0;text-align:center;font-size:13.5px;line-height:1.6;color:var(--muted)}
@media (max-width:980px){ .tiers{grid-template-columns:minmax(0,1fr)} .tier-anchor{top:0} }

/* questions: the heading holds the left column while the answers pass on the right, each a card that opens */
.faq{padding:var(--pad) 0;border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
.faq-head{position:sticky;top:120px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:16px;background:var(--card);box-shadow:0 1px 2px rgba(23,34,28,.06),0 10px 24px -18px rgba(23,34,28,.3);transition:box-shadow .3s ease}
.faq details[open]:not(.is-closing){box-shadow:var(--lift)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 16px 16px 22px;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:50%;background-color:var(--wash);
  background-image:linear-gradient(var(--forest),var(--forest)),linear-gradient(var(--forest),var(--forest));
  background-size:12px 1.6px,1.6px 12px;background-position:center;background-repeat:no-repeat;transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.faq details[open]:not(.is-closing) summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;max-width:64ch;color:var(--ink-2)}

/* the ask: the page closes on the kit's green. The words and a fan of the kit on the left, the form lifted on the right */
.ask{padding:var(--pad) 0}
.ask-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:stretch;
  padding:clamp(24px,5vw,64px);border-radius:28px;background:var(--forest-grad);color:#EAF2ED;overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(23,34,28,.6)}
.ask-text{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.ask-text .time{color:#A9D6BE}
.ask-text h2{color:#fff}
.ask-text > p:not(.time){font-size:18px;color:#D3E2D9;max-width:40ch}
.ask-kit{position:relative;width:100%;height:clamp(170px,19vw,240px);margin-top:auto}
.ask-kit img{position:absolute;bottom:0;width:auto;max-width:none;object-fit:cover;border-radius:10px;background:#fff;transform-origin:50% 100%;
  box-shadow:0 18px 36px -16px rgba(0,0,0,.55)}
.ask-kit .k1{left:2%;height:76%;aspect-ratio:3/4;transform:rotate(-9deg)}
.ask-kit .k2{left:24%;z-index:1;height:92%;aspect-ratio:900/1274;transform:rotate(-2deg)}
.ask-kit .k3{left:50%;z-index:2;height:100%;aspect-ratio:9/19;border-radius:16px;object-position:top;transform:rotate(6deg);
  box-shadow:0 0 0 4px #fff,0 18px 36px -16px rgba(0,0,0,.55)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-content:start}
.ask .form{padding:clamp(22px,3vw,32px);color:var(--ink);align-self:center}   /* sized to its fields, not stretched to the panel */
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:14px;font-weight:600}
.field input{height:50px;border-radius:12px;border:1.5px solid #C9D2CC;padding:0 14px;font:16px var(--sans);background:var(--paper);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(31,74,57,.14)}
.field .btn{align-self:flex-start;margin-top:6px}
.form-msg{font-size:14.5px;color:var(--forest);min-height:1.4em}
/* the form's extras: two ticks, and the note that the film only joins the free sample when asked for */
.picks{border:0;margin:0;padding:0;gap:10px;min-width:0}
.picks legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:600}
.pick{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid #C9D2CC;border-radius:12px;background:var(--paper);
  cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.pick:hover{border-color:var(--forest)}
.pick:has(input:checked){border-color:var(--forest);background:var(--wash)}
.pick input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--forest)}
.pick span{display:flex;flex-direction:column;gap:1px}
.pick b{font-size:15px;font-weight:600}
.pick small{font-size:13.5px;color:var(--muted)}
.pick-note{display:flex;gap:8px;align-items:flex-start;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--muted)}
/* arriving from "Ask for a price": the pricing tick lights up once, in the decision yellow */
.pick.flash{animation:pick-flash 1.4s ease-out 1}
@keyframes pick-flash{0%{box-shadow:0 0 0 0 rgba(242,201,76,0)}25%{box-shadow:0 0 0 5px rgba(242,201,76,.6)}100%{box-shadow:0 0 0 0 rgba(242,201,76,0)}}
.pick-note .ic{margin-top:2px;color:var(--forest)}

.foot{padding:40px 0 56px;border-top:1px solid var(--line)}
.foot-row{display:flex;gap:18px 28px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:14.5px}
.foot-nav{display:flex;gap:22px;margin-left:auto}
.foot-nav a{text-decoration:none;color:var(--ink-2)}
.foot-nav a:hover{color:var(--ink)}
.foot-row .mono{font-size:11.5px}

/* the floating ask: once the hero has gone by, a yellow "Get a free kit" waits at the foot of the screen,
   and steps aside while the form itself is showing (redesign.js) */
.float-cta{position:fixed;z-index:30;right:clamp(16px,3vw,32px);bottom:calc(clamp(16px,3vw,28px) + env(safe-area-inset-bottom));
  box-shadow:0 2px 4px rgba(43,35,0,.12),0 16px 32px -12px rgba(43,35,0,.45);
  opacity:0;translate:0 18px;pointer-events:none;
  transition:opacity .35s ease,translate .45s cubic-bezier(.2,.75,.25,1),background-color .15s ease,transform .15s ease}
.float-cta[hidden]{display:none}
.float-cta.show{opacity:1;translate:0 0;pointer-events:auto}
@media (max-width:700px){
  .float-cta{right:auto;left:50%;transform:translateX(-50%)}
  .float-cta:active{transform:translateX(-50%) scale(.98)}
}
/* skip: a small way out of each scroll-driven section, straight to the one after it (redesign.js).
   It shows only while the section is pinned; without the pinning there is nothing to skip */
.skip-btn{display:none}
.orbit-on .skip-btn,.honest-on .skip-btn,.human-on .skip-btn{position:absolute;z-index:6;left:clamp(14px,3vw,28px);
  bottom:calc(clamp(16px,3vw,28px) + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:3px;height:30px;padding:0 9px 0 13px;
  border:0;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ink-2);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 1px 2px rgba(23,34,28,.08),0 6px 16px -8px rgba(23,34,28,.35);opacity:.88;transition:opacity .2s ease,color .2s ease}
.skip-btn:hover{opacity:1;color:var(--ink)}
.skip-btn .ic{width:14px;height:14px;transform:rotate(90deg)}

/* the fine print: a small card over the page, opened from the footer */
.fine{border:0;border-radius:24px;padding:30px 30px 26px;max-width:460px;width:calc(100vw - 32px);color:var(--ink);background:var(--card);
  box-shadow:0 30px 80px rgba(0,0,0,.25)}
.fine::backdrop{background:rgba(15,21,18,.45);backdrop-filter:blur(6px)}
.fine[open]{display:flex;flex-direction:column;gap:16px;animation:fine-in .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes fine-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.fine h2{font-size:30px;padding-right:44px}
.fine ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.fine li{display:flex;gap:12px;align-items:flex-start}
.fine li .ic{box-sizing:content-box;width:15px;height:15px;padding:6px;border-radius:50%;background:var(--wash);color:var(--forest)}
.fine .close{position:absolute;top:14px;right:14px}
.fine .btn{align-self:flex-start;margin-top:4px}
.foot-link{padding:0;border:0;background:none;font:inherit;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot-link:hover{color:var(--ink)}

/* the scan dialog */
.scan{border:0;border-radius:24px;padding:32px;max-width:420px;width:calc(100vw - 32px);box-shadow:0 30px 80px rgba(0,0,0,.25);text-align:center;color:var(--ink);background:var(--card)}
.scan::backdrop{background:rgba(15,21,18,.45);backdrop-filter:blur(6px)}
.scan[open]{display:flex;flex-direction:column;align-items:center;gap:16px}
.scan h2{font-size:34px}
.scan p{color:var(--ink-2);font-size:15.5px}
.scan .close{position:absolute;top:14px;right:14px}

/* the range: campaign work as a bento. Each row gives its tiles widths in proportion to their
   shapes, so every tile in a row shares one height and no poster is ever cropped. Phones get a
   two-column masonry, uncropped too. */
.range{padding:var(--pad) 0}
.bento{display:flex;flex-direction:column;gap:clamp(10px,1.3vw,16px);margin-top:clamp(28px,4vw,48px)}
.bento-row{display:flex;gap:clamp(10px,1.3vw,16px)}
.b-tile{flex:var(--a) 1 0;min-width:0;aspect-ratio:var(--a);position:relative;overflow:hidden;border-radius:14px;background:var(--wash);
  box-shadow:0 1px 2px rgba(23,34,28,.06),0 18px 40px -26px rgba(23,34,28,.45);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.b-tile img,.b-tile video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.b-tile:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(23,34,28,.08),0 28px 52px -26px rgba(23,34,28,.55)}
.b-tile:hover img,.b-tile:hover video{transform:scale(1.035)}
.b-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;text-align:left;color:#fff;font:500 13.5px/1.35 var(--sans);
  background:linear-gradient(180deg,rgba(10,14,12,0),rgba(10,14,12,.74));opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.b-tile:hover .b-cap,.b-tile:focus-visible .b-cap{opacity:1;transform:none}
@media (hover:none){ .b-cap{opacity:1;transform:none;padding:26px 10px 9px;font-size:12px} }
@media (prefers-reduced-motion:reduce){ .b-tile,.b-tile img,.b-tile video{transition:none} .b-tile:hover{transform:none} .b-tile:hover img,.b-tile:hover video{transform:none} }
@media (max-width:700px){
  .bento{display:block;columns:2;column-gap:10px}
  .bento-row{display:contents}
  .b-tile{display:block;width:100%;margin:0 0 10px;break-inside:avoid;border-radius:12px}
  .b-cap{display:none}                   /* the posters carry their own titles; a tap opens the caption large */
}
.chip{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase}

/* the lightbox */
.lightbox{border:0;padding:0;background:transparent;overflow:visible;max-width:none;max-height:none}
.lightbox::backdrop{background:rgba(12,16,14,.84);backdrop-filter:blur(6px)}
.lightbox[open]{display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-media img,.lb-media video{display:block;max-width:min(84vw,1400px);max-height:76vh;width:auto;height:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#111;
  animation:lb-in .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes lb-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.lb-count{margin:0;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#A9D6BE}
.lb-nav{position:fixed;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;background:rgba(255,255,255,.92);border-color:transparent;color:var(--ink)}
.lb-nav:hover{background:#fff}
.lb-prev{left:clamp(10px,2.5vw,32px)}
.lb-next{right:clamp(10px,2.5vw,32px)}
.lb-nav[hidden],.lb-dots[hidden],.lb-count[hidden]{display:none}
.lb-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(90vw,520px);padding:4px 0}
.lb-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.34);cursor:pointer;transition:width .3s cubic-bezier(.2,.7,.2,1),background .3s}
.lb-dot:hover{background:rgba(255,255,255,.6)}
.lb-dot[aria-current="true"]{width:24px;background:#FFFFFF}
.lb-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .lb-media img,.lb-media video{animation:none} }
/* on a phone the arrows move to the bottom corners, under the thumb and off the picture */
@media (max-width:700px){ .lb-nav{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));margin-top:0} }
.lb-cap{color:#E9EEEA;font-size:14.5px;text-align:center;max-width:60ch;padding:0 16px}
.lightbox .close{position:absolute;top:10px;right:10px;z-index:1;background:rgba(255,255,255,.92);border-color:transparent}

@media (max-width:980px){
  .nav{display:none}
  /* minmax(0,…): a column may shrink below its content, so a long row inside (the laptop's tabs) never widens the page */
  .scene-grid,.scene.flip .scene-grid,.scene-grid.media-wide,.scene.flip .scene-grid.media-wide{grid-template-columns:minmax(0,1fr)}
  .scene.flip .scene-text{order:0}
  .faq-grid,.ask-panel{grid-template-columns:minmax(0,1fr)}
  .faq-head{position:static}
  .ask-kit{height:170px;margin-top:8px}
  .shelf.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf.four .wide{grid-column:1 / -1}
  .shelf.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  body{font-size:16px}
  /* phones: the clock and the time; the story line needs a wider screen */
  .when-say{display:none}
  .film-frame{aspect-ratio:4/5}
  .film.wide .film-frame{aspect-ratio:4/5}
  .film-story{padding:72px 18px 18px;font-size:12.5px;
    background:linear-gradient(180deg,rgba(18,14,10,0) 0%,rgba(18,14,10,.45) 40%,rgba(18,14,10,.72) 100%)}
  .film-story li{grid-area:1 / 1;grid-template-columns:1fr;gap:2px;align-self:end}
  .film-story.armed li{transition:opacity .35s ease}
  .film-story.armed li.in:not(.past){transition-delay:.3s}
  .film-story.armed li.past{opacity:0}
  .film-story.told li{grid-area:auto}
  .film.has-story .film-toggle{top:14px;bottom:auto}
  /* phones: the deck rises over the foot of the film, its story lifted clear, the caption kept for screen readers */
  .deck{position:relative;top:auto;right:auto;width:min(70%,280px);margin:-88px auto 0}
  .film.deck-film .film-story{padding-bottom:106px}
  .film.deck-film figcaption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .foot-nav{margin-left:0;flex-wrap:wrap;gap:14px 20px}
  .try{margin:0;max-width:none;flex-direction:column;text-align:center}
  .try-text{align-items:center}
  .sticker img{width:120px;height:120px}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:18px}
  .tabs button{justify-content:center;border-radius:12px}
  .shelf.phones{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .shelf.oncar{grid-template-columns:1fr;gap:32px}
  .shelf.oncar .phone-shot{max-width:240px;justify-self:center}
  .form{grid-template-columns:1fr}
  .tabs button{padding:0 12px;font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* reveal on scroll, every time (redesign.js tags the elements and adds .reveal-on to the page).
   Text rises line by line, cards lift in with a touch of scale; both use the translate and scale
   properties, so hover transforms still work. Coming back from above, things settle downward. */
.reveal-on [data-rv]{opacity:0;translate:0 var(--rv-y,26px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),translate .95s cubic-bezier(.16,.8,.2,1),scale .95s cubic-bezier(.16,.8,.2,1);
  transition-delay:calc(var(--rv-i,0) * 80ms)}
.reveal-on [data-rv="card"]{--rv-y:44px;scale:.965}
.reveal-on [data-rv][data-from="top"]{--rv-y:-26px}
.reveal-on [data-rv="card"][data-from="top"]{--rv-y:-44px}
.reveal-on [data-rv].is-in{opacity:1;translate:0 0;scale:1}

/* CTA wording: "Free" rides inside the primary button */
.free-tag{display:inline-block;margin-left:2px;padding:3px 8px;border-radius:999px;background:var(--on-yellow);color:var(--yellow);
  font:600 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hero .scan-link{margin-top:14px;padding:0;border:0;background:none;font:inherit;font-size:15px;cursor:pointer}

/* the floating ask is now a stack: the yellow kit button, and Download samples in forest under it */
.float-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;box-shadow:none}
.float-cta .btn{justify-content:center;box-shadow:0 2px 4px rgba(23,34,28,.14),0 16px 32px -12px rgba(23,34,28,.5)}
.btn.float-alt{background:var(--forest);color:#fff}
.btn.float-alt:hover{background:#173A2C}
@media (max-width:700px){
  .float-cta{left:16px;right:16px;transform:none}
  .float-cta:active{transform:none}
}
.float-cta .btn{white-space:nowrap}