/* Clock In: With Bo — marketing site.
   Brand tokens mirror the app (src/theme/tokens.ts): Fraunces for editorial
   headlines, Bricolage Grotesque for body, Space Mono Bold for labels and the
   timer, warm paper and ink, mint ink for the emphasised phrase. Light, airy
   sections alternate with the app's dark palette for the cinematic moments. */
@font-face{font-family:Fraunces;src:url('assets/fraunces-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/fraunces-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Bricolage;src:url('assets/bricolage-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Bricolage;src:url('assets/bricolage-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Bricolage;src:url('assets/bricolage-semibold.ttf') format('truetype');font-weight:600 700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/spacemono-bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --canvas:#F2EDDF;--paper:#FBF7EC;--raised:#FFFBEF;--surface:#FFFEFA;
  --ink:#1E1B16;--ink-2:#5A5246;--ink-3:#6B6153;--line:#DCD1BC;--line-soft:#E8E0CE;
  --leaf:#639922;--leaf-soft:#E9F2DC;--leaf-ink:#3B6D11;
  --honey:#EF9F27;--honey-soft:#FBEEDA;--honey-ink:#714306;
  --mint:#1D9E75;--mint-soft:#DFF3EC;--mint-ink:#0C654E;
  --berry-soft:#F9E4EC;--berry-ink:#8D2949;--sky-soft:#E3EFFA;--sky-ink:#145997;
  --sage:#BFD3BD;
  --night:#17140F;--night-2:#1E1A14;--night-3:#28221A;--night-ink:#F9F2E5;--night-ink-2:#D1C6B4;--night-ink-3:#AAA08F;--night-line:rgba(249,242,229,.1);
  --night-mint:#77D5B4;--night-leaf:#A6D171;--night-honey:#F5BD64;
  --serif:Fraunces,'Iowan Old Style',Georgia,serif;
  --sans:Bricolage,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,4vw,56px);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --shadow-1:0 1px 2px rgba(30,27,22,.05),0 10px 30px rgba(30,27,22,.07);
  --shadow-2:0 2px 8px rgba(30,27,22,.06),0 40px 80px -20px rgba(30,27,22,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.035em;line-height:1;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:normal;font-weight:inherit;color:inherit}
h2{font-size:clamp(40px,5.4vw,76px)}
h3{font-family:var(--serif);font-weight:500;font-size:clamp(23px,2vw,30px);line-height:1.12;letter-spacing:-.02em}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
p{color:var(--ink-2)}
strong{font-weight:600;color:var(--ink)}
:focus-visible{outline:3px solid var(--mint-ink);outline-offset:4px;border-radius:8px}
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px}
.skip-link:focus{top:12px}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-ink);margin-bottom:18px}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-ink);background:var(--surface);border:1px solid var(--line-soft);border-radius:999px;padding:8px 14px;margin-bottom:22px}
.tag-night{color:var(--night-mint);background:rgba(249,242,229,.05);border-color:var(--night-line)}
.fine{font-size:13px;line-height:1.55;color:var(--ink-3)}

/* Buttons: the ink pill mirrors the app's Clock in button. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 26px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:600;font-size:16px;line-height:1.2;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,color .25s,border-color .25s}
.button svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(30,27,22,.45)}
.button:hover svg{transform:translateX(3px)}
.button:active{transform:scale(.98)}
.button-small{min-height:42px;padding:9px 18px;font-size:14.5px;gap:8px}
.button-large{min-height:58px;padding:16px 30px;font-size:17px}
.button-ghost{background:rgba(255,254,250,.6);color:var(--ink);border-color:var(--line)}
.button-ghost:hover{background:var(--surface);box-shadow:var(--shadow-1)}
.button:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none}
.button.is-done{opacity:1;cursor:default;background:var(--mint-ink);border-color:var(--mint-ink)}
.inline-link{padding:0;border:0;background:none;color:var(--mint-ink);font-size:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Glass navigation pill ---------- */
.site-header{position:fixed;top:14px;left:0;right:0;z-index:50;pointer-events:none}
.nav{pointer-events:auto;width:min(1240px,100% - var(--gutter)*2);margin-inline:auto;height:64px;display:flex;align-items:center;gap:24px;padding:0 10px 0 14px;border-radius:999px;border:1px solid transparent;transition:background-color .4s,border-color .4s,box-shadow .4s}
.site-header.is-scrolled .nav{background:rgba(255,254,250,.72);border-color:rgba(220,209,188,.6);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 10px 40px -12px rgba(30,27,22,.18)}
.site-header.on-night .nav{background:rgba(30,26,20,.62);border-color:rgba(249,242,229,.1)}
.site-header.on-night .brand-name{color:var(--night-ink)}
.site-header.on-night .desktop-nav a{color:var(--night-ink-2)}
.site-header.on-night .desktop-nav a:hover{color:var(--night-ink);background:rgba(249,242,229,.08)}
.site-header.on-night .desktop-nav a[aria-current=true]{color:var(--night-ink);background:rgba(249,242,229,.1)}
.site-header.on-night .header-cta{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.site-header.on-night .menu-toggle span{background:var(--night-ink)}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand-icon{width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 1px rgba(30,27,22,.08),0 2px 6px rgba(30,27,22,.1)}
.brand-name{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1;transition:color .4s}
.brand-tag,.brand-sub{font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-ink);background:var(--surface);border:1px solid var(--line-soft);border-radius:999px;padding:4px 8px;line-height:1.2}
.desktop-nav{display:flex;gap:2px;margin-left:auto;font-size:15px}
.desktop-nav a{padding:9px 14px;border-radius:999px;color:var(--ink-2);transition:background-color .25s,color .25s}
.desktop-nav a:hover{color:var(--ink);background:rgba(30,27,22,.05)}
.desktop-nav a[aria-current=true]{color:var(--ink);background:rgba(30,27,22,.06)}
.menu-toggle,.mobile-nav{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(112px,13vh,150px);overflow:clip;isolation:isolate;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#F7F3E6 0%,var(--paper) 60%);overflow:hidden}
.hero-bg::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.09;mix-blend-mode:multiply;pointer-events:none}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;animation:drift 22s ease-in-out infinite alternate}
.orb-a{width:620px;height:620px;left:-180px;top:-160px;background:radial-gradient(circle,#D8EFE4,rgba(216,239,228,0) 70%)}
.orb-b{width:560px;height:560px;right:-160px;top:-60px;background:radial-gradient(circle,#F9E3BC,rgba(249,227,188,0) 70%);animation-delay:-8s}
.orb-c{width:900px;height:600px;left:50%;bottom:-260px;margin-left:-450px;background:radial-gradient(ellipse,#E3EFD2,rgba(227,239,210,0) 70%);animation-delay:-14s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,30px,0) scale(1.08)}100%{transform:translate3d(-30px,10px,0) scale(.96)}}
.hero-dial{position:absolute;left:50%;bottom:-38%;width:min(1100px,140vw);height:auto;aspect-ratio:1;color:var(--sage);stroke-width:.5;opacity:.7;transform:translateX(-50%) rotate(var(--spin,0deg))}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,254,250,.75);border:1px solid var(--line-soft);border-radius:999px;padding:5px 6px;font-size:14.5px;font-weight:500;box-shadow:var(--shadow-1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .35s var(--ease),box-shadow .35s}
.hero-badge:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(30,27,22,.25)}
.hero-badge img{width:30px;height:30px;border-radius:50%;background:var(--honey-soft)}
.badge-cta{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.badge-cta svg{width:14px;height:14px}
.hero h1{font-size:clamp(54px,7.4vw,108px);line-height:.95;letter-spacing:-.05em;margin:26px 0 22px;max-width:12ch}
.hero-lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.hero-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:26px}
.hero-facts li{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2)}
.hero-facts svg{width:16px;height:16px;color:var(--mint-ink)}
/* Word-by-word headline reveal (split by script.js). */
.js h1[data-split]:not(.is-split){opacity:0;animation:failsafe 0s 1.6s forwards}
@keyframes failsafe{to{opacity:1}}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.word>span{display:inline-block;transform:translateY(108%);animation:word-up 1.05s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*75ms + 120ms)}
@keyframes word-up{to{transform:none}}
.rise{animation:rise 1s var(--ease-out) both;animation-delay:calc(var(--d,0)*80ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Fan of real screens, in the spirit of an App Store hero. */
.hero-devices{position:relative;height:clamp(360px,44vw,590px);margin-top:clamp(40px,4.4vw,60px);--p:0}
.hero-devices .device{position:absolute;left:50%;top:0;transform-origin:50% 100%;transform:translate3d(calc(-50% + var(--x) * (1 + var(--p) * .22)),calc(var(--y) + var(--p) * var(--dy)),0) rotate(calc(var(--r) * (1 + var(--p) * .35)));animation:device-in 1.3s var(--ease-out) both;animation-delay:var(--delay)}
@keyframes device-in{from{translate:0 160px;opacity:0}to{translate:0 0;opacity:1}}
.fan-3{--x:0px;--y:0px;--r:0deg;--dy:-40px;--delay:.35s;z-index:5}
.fan-2{--x:-300px;--y:60px;--r:-5deg;--dy:20px;--delay:.5s;z-index:4}
.fan-4{--x:300px;--y:60px;--r:5deg;--dy:20px;--delay:.5s;z-index:4}
.fan-1{--x:-570px;--y:150px;--r:-10deg;--dy:60px;--delay:.65s;z-index:3}
.fan-5{--x:570px;--y:150px;--r:10deg;--dy:60px;--delay:.65s;z-index:3}

/* ---------- iPhone frame ---------- */
.device{--w:280px;position:relative;width:var(--w);padding:calc(var(--w)*.034);border-radius:calc(var(--w)*.17);background:linear-gradient(140deg,#4a453f 0%,#1d1a16 22%,#2c2824 50%,#151310 78%,#3d3833 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 calc(var(--w)*.011) #0d0c0a,0 50px 90px -30px rgba(30,27,22,.5),0 24px 40px -24px rgba(30,27,22,.45);flex-shrink:0}
.device::before,.device::after{content:'';position:absolute;width:calc(var(--w)*.012);border-radius:3px;background:linear-gradient(90deg,#3a3530,#151310)}
.device::before{left:calc(var(--w)*-.009);top:20%;height:6.5%;box-shadow:0 calc(var(--w)*.2) 0 #24201c,0 calc(var(--w)*.31) 0 #24201c}
.device::after{right:calc(var(--w)*-.009);top:27%;height:11%}
.device-screen{position:relative;border-radius:calc(var(--w)*.138);overflow:hidden;background:var(--paper);aspect-ratio:429/960;isolation:isolate}
.device-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 30%);pointer-events:none;z-index:2}
.device-status{height:5.84%;display:flex;align-items:center;justify-content:space-between;padding:1.2% 9.5% 0 11%;font:600 calc(var(--w)*.045)/1 var(--sans);color:var(--ink);letter-spacing:-.01em}
.device-status .sb{display:flex;align-items:center;gap:calc(var(--w)*.014)}
.device-status svg{fill:currentColor;stroke:none;height:calc(var(--w)*.036);width:auto}
.device-status svg:first-child{width:calc(var(--w)*.054)}
.device-status svg:nth-child(2){width:calc(var(--w)*.048)}
.device-status svg:last-child{width:calc(var(--w)*.078)}
.device-screen img{width:100%;height:auto}
.device-island{position:absolute;top:calc(var(--w)*.048);left:50%;width:30%;height:calc(var(--w)*.083);transform:translateX(-50%);background:#050505;border-radius:999px;z-index:3}

/* ---------- Promise marquee ---------- */
.promise-band{position:relative;padding:22px 0;border-block:1px solid var(--line-soft);background:var(--surface);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee{display:flex;width:max-content;animation:marquee 52s linear infinite}
.promise-band:hover .marquee{animation-play-state:paused}
.marquee-track{display:flex;flex-shrink:0}
.marquee-track li{display:flex;align-items:center;gap:10px;padding:0 34px;font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;white-space:nowrap}
.marquee-track svg{width:20px;height:20px;color:var(--mint-ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Pinned statement ---------- */
.statement{height:230vh;position:relative}
.statement-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;text-align:center}
.statement-text{font-size:clamp(34px,5vw,72px);line-height:1.08;letter-spacing:-.035em;max-width:17ch;margin:0 auto}
.js .statement-text .w{color:rgba(30,27,22,.13);transition:color .45s ease}
.js .statement-text .w.on{color:var(--ink)}
.js .statement-text .w.em.on{color:var(--ink)}
.statement-sign{display:inline-flex;align-items:center;gap:12px;margin-top:40px;font-size:18px;font-weight:500;color:var(--ink-2);transition:opacity .6s,transform .6s var(--ease)}
.statement-sign img{width:40px;height:40px;border-radius:50%;background:var(--honey-soft)}
.js .statement-sign{opacity:0;transform:translateY(12px)}
.js .statement.is-done .statement-sign{opacity:1;transform:none}

/* ---------- Session: the cinematic dark chapter ---------- */
.session{position:relative;height:520vh}
.session-frame{position:absolute;inset:0;background:var(--night);color:var(--night-ink);clip-path:inset(0 var(--inset,0px) round var(--radius,0px))}
.session-frame::before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.06;pointer-events:none}
.session-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.session-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:center}
.session .eyebrow{color:var(--night-mint)}
.session h2{color:var(--night-ink);font-size:clamp(42px,5vw,72px)}
.session h2 em{color:inherit}
.session-progress{display:flex;gap:8px;margin:36px 0 34px;max-width:420px}
.session-progress span{flex:1;height:3px;border-radius:9px;background:rgba(249,242,229,.14);overflow:hidden}
.session-progress i{display:block;height:100%;background:var(--night-ink);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.session-steps{position:relative}
.step-num{display:block;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--night-ink-3);margin-bottom:14px}
.session-step+.session-step{margin-top:28px}
.session-step h3{color:var(--night-ink);font-size:clamp(30px,3vw,44px);letter-spacing:-.025em}
.session-step p{color:var(--night-ink-2);margin-top:14px;font-size:clamp(17px,1.35vw,19px);max-width:460px}
.session-step strong{color:var(--night-ink)}
.js .session-steps{min-height:230px}
.js .session-step{position:absolute;inset:0 0 auto 0;margin:0;opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s}
.js .session-step.is-active{opacity:1;transform:none;filter:none}
.session-stage{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.stage-glow{position:absolute;top:42%;left:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(166,209,113,.22),rgba(166,209,113,0) 60%);transition:background .8s;pointer-events:none}
.session-stage[data-state="0"] .stage-glow{background:radial-gradient(circle,rgba(249,242,229,.08),rgba(249,242,229,0) 60%)}
.session-stage[data-state="2"] .stage-glow{background:radial-gradient(circle,rgba(245,189,100,.22),rgba(245,189,100,0) 60%)}
.session-stage[data-state="3"] .stage-glow{background:radial-gradient(circle,rgba(119,213,180,.26),rgba(119,213,180,0) 60%)}
.stage-task{position:relative;height:42px;width:100%;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;margin-bottom:20px;color:var(--night-ink)}
.stage-task span{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s,transform .6s var(--ease)}
.stage-task-old{color:var(--night-ink-3);text-decoration:line-through;text-decoration-color:var(--night-honey);text-decoration-thickness:3px}
.stage-task-new{opacity:0;transform:translateY(12px)}
.session-stage.is-smaller .stage-task-old{opacity:0;transform:translateY(-12px)}
.session-stage.is-smaller .stage-task-new{opacity:1;transform:none}
.stage-ring{position:relative;width:clamp(240px,30vw,400px);aspect-ratio:1}
.stage-dial{position:absolute;inset:0;width:100%;height:100%;color:rgba(191,211,189,.35);stroke-width:1.4}
.stage-progress{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);stroke-width:3.5;overflow:visible}
.stage-progress .track{stroke:transparent;fill:none}
.stage-progress .bar{fill:none;stroke:var(--night-leaf);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--ring,0));stroke-linecap:round;transition:stroke .6s,stroke-dashoffset .25s linear;filter:drop-shadow(0 0 6px rgba(166,209,113,.6))}
.session-stage[data-state="2"] .bar{stroke:var(--night-honey);filter:drop-shadow(0 0 6px rgba(245,189,100,.6))}
.session-stage[data-state="3"] .bar{stroke:var(--night-mint);filter:drop-shadow(0 0 8px rgba(119,213,180,.7))}
.stage-bo{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;opacity:0;transform:scale(.92);transition:opacity .5s ease,transform .8s var(--ease-out)}
.stage-bo.is-active{opacity:1;transform:none}
.stage-timer{font-family:var(--mono);font-weight:700;font-size:clamp(52px,5.6vw,84px);letter-spacing:-.05em;line-height:1;margin-top:22px;font-variant-numeric:tabular-nums;color:var(--night-ink)}
.stage-status{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-2);background:rgba(249,242,229,.06);border:1px solid var(--night-line);border-radius:999px;padding:9px 15px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--night-leaf);animation:pulse 2.4s infinite}
.session-stage[data-state="0"] .status-dot{background:var(--night-ink-3);animation:none}
.session-stage[data-state="2"] .status-dot{background:var(--night-honey);animation:none}
.session-stage[data-state="3"] .status-dot{background:var(--night-mint);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(166,209,113,.55)}70%{box-shadow:0 0 0 10px rgba(166,209,113,0)}100%{box-shadow:0 0 0 0 rgba(166,209,113,0)}}

/* ---------- Feature cards ---------- */
.features{padding:clamp(100px,12vw,170px) 0 clamp(60px,7vw,100px);overflow:clip}
.features-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:clamp(40px,4.5vw,64px)}
.features-head h2{max-width:11ch}
.features-side{max-width:360px;display:flex;flex-direction:column;gap:22px}
.features-side p{font-size:15.5px}
.rail-controls{display:flex;gap:10px}
.rail-button{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--surface);border:1px solid var(--line);transition:background-color .25s,color .25s,transform .3s var(--ease),opacity .25s}
.rail-button:hover:not(:disabled){background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.rail-button:disabled{opacity:.35;cursor:default}
.rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:max(var(--gutter),(100vw - 1240px)/2);scroll-padding-inline:max(var(--gutter),(100vw - 1240px)/2)}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline-offset:-4px}
.rail-track{display:flex;gap:clamp(16px,2vw,24px);width:max-content;padding-bottom:12px}
.feature-card{width:clamp(290px,27vw,380px);scroll-snap-align:start}
.feature-visual{position:relative;height:clamp(380px,34vw,470px);border-radius:32px;overflow:hidden;display:flex;justify-content:center;isolation:isolate}
.feature-visual::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:multiply;pointer-events:none}
.feature-visual .device{margin-top:13%;transition:transform .8s var(--ease-out);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 calc(var(--w)*.011) #0d0c0a,0 30px 60px -20px rgba(30,27,22,.4)}
.feature-card:hover .feature-visual .device{transform:translateY(-14px) rotate(-1.5deg)}
.feature-card h3{margin-top:24px;font-size:clamp(24px,2.1vw,30px)}
.feature-card p{margin-top:8px;font-size:16px;max-width:34ch}
.tint-leaf{background:radial-gradient(120% 90% at 20% 0%,#F4F9EA,#DCEBC5)}
.tint-honey{background:radial-gradient(120% 90% at 20% 0%,#FEF7EA,#F7DFB1)}
.tint-mint{background:radial-gradient(120% 90% at 20% 0%,#EEF9F4,#C6EADB)}
.tint-sky{background:radial-gradient(120% 90% at 20% 0%,#F1F6FC,#D0E3F6)}
.tint-berry{background:radial-gradient(120% 90% at 20% 0%,#FCF1F5,#F2D0DD)}

/* ---------- Alternating rows ---------- */
.rows{padding:clamp(40px,6vw,80px) 0 clamp(100px,12vw,160px);display:grid;gap:clamp(90px,11vw,160px)}
.row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,100px);align-items:center}
.row-reverse .row-visual{order:2}
.row-visual{position:relative;height:clamp(500px,48vw,680px);border-radius:40px;overflow:hidden;display:grid;place-items:center;isolation:isolate;perspective:1800px}
.row-visual::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:multiply;pointer-events:none}
.row-dial{position:absolute;width:115%;height:auto;aspect-ratio:1;color:rgba(255,255,255,.75);stroke-width:.6;z-index:-1}
.row-visual .device{transform:translate3d(0,var(--py,0px),0) var(--tilt)}
.tilt-left{--tilt:rotateY(16deg) rotateX(6deg) rotateZ(-4deg)}
.tilt-right{--tilt:rotateY(-16deg) rotateX(6deg) rotateZ(4deg)}
.chip{position:absolute;display:inline-flex;align-items:center;gap:9px;background:rgba(255,254,250,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:10px 18px 10px 11px;font-weight:600;font-size:15px;box-shadow:0 16px 40px -14px rgba(30,27,22,.3);transform:translate3d(0,var(--py,0px),0);z-index:3;white-space:nowrap}
.chip svg{width:26px;height:26px;padding:5px;border-radius:50%}
.chip-1{top:7%;left:5%}.chip-1 svg{background:var(--berry-soft);color:var(--berry-ink)}
.chip-2{top:47%;right:6%}.chip-2 svg{background:var(--leaf-soft);color:var(--leaf-ink)}
.chip-3{bottom:15%;left:11%}.chip-3 svg{background:var(--honey-soft);color:var(--honey-ink)}
.chip-4{top:16%;right:6%}.chip-4 svg{background:var(--mint-soft);color:var(--mint-ink)}
.chip-5{bottom:17%;left:8%}.chip-5 svg{background:var(--canvas);color:var(--ink-2)}
.chip-6{bottom:15%;right:7%}.chip-6 svg{background:var(--berry-soft);color:var(--berry-ink)}
.row-copy h2{font-size:clamp(40px,4.6vw,64px)}
.row-copy>p{margin-top:22px;font-size:clamp(17px,1.4vw,19px);max-width:500px}
.ticks{margin:28px 0 32px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink)}
.ticks svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--ink);color:var(--paper);stroke-width:2.6;margin-top:1px}
.row-copy>.ticks:last-child{margin-bottom:0}

/* ---------- Night chapter: Bo and privacy ---------- */
.night{position:relative;background:var(--night);color:var(--night-ink);border-radius:clamp(32px,5vw,64px);margin-inline:clamp(8px,1.2vw,16px);overflow:hidden;isolation:isolate}
.night::before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.06;pointer-events:none;z-index:-1}
.night::after{content:'';position:absolute;top:-10%;left:50%;width:1200px;height:900px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(119,213,180,.12),rgba(119,213,180,0) 60%);pointer-events:none;z-index:-1}
.night h2{color:var(--night-ink)}
.night h2 em{color:inherit}
.night p{color:var(--night-ink-2)}
.night-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,4vw,56px)}
.night-head>p{margin-top:22px;font-size:clamp(17px,1.4vw,19px)}
.night-fine{text-align:center;font-size:14px;color:var(--night-ink-3)!important;margin-top:32px}
.bo{padding:clamp(100px,11vw,150px) 0 clamp(60px,7vw,100px)}
.coat-switch{display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:0 auto clamp(40px,4vw,56px);padding:6px;border-radius:999px;background:rgba(249,242,229,.06);border:1px solid var(--night-line)}
.coat-switch button{display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--night-ink-2);border-radius:999px;padding:10px 18px;font-weight:600;font-size:15px;transition:background-color .3s,color .3s}
.coat-switch button:hover{color:var(--night-ink)}
.coat-switch button.is-selected{background:var(--night-ink);color:var(--ink)}
.swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.swatch-sandy{background:#C9A57B}.swatch-ash{background:#8C877F}.swatch-opal{background:#AFA9EC}.swatch-guava{background:#F0997B}
.mood-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.mood-card{position:relative;border-radius:28px;padding:22px 16px 24px;text-align:center;background:linear-gradient(180deg,rgba(249,242,229,.06),rgba(249,242,229,.02));border:1px solid var(--night-line);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),border-color .4s}
.mood-card:nth-child(even){margin-top:46px}
.mood-card::before{content:'';position:absolute;left:50%;top:38%;width:85%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(119,213,180,.2),rgba(119,213,180,0) 65%);z-index:-1}
.mood-card:hover{transform:translateY(-6px);border-color:rgba(249,242,229,.2)}
.mood-card img{width:min(170px,100%);margin:0 auto 14px;transition:opacity .3s,transform .5s var(--ease-out)}
.mood-card img.is-swapping{opacity:0;transform:scale(.94)}
.mood-card strong{display:block;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--night-ink)}
.mood-card span{display:block;font-size:13.5px;color:var(--night-ink-3);margin-top:4px;line-height:1.4}
[data-glow]::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),rgba(249,242,229,.10),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
[data-glow]:hover::after{opacity:1}
.wardrobe{margin-top:clamp(80px,9vw,120px);display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,72px);align-items:center}
.wardrobe-head h3{font-size:clamp(32px,3.4vw,46px);color:var(--night-ink)}
.wardrobe-head p{margin-top:16px;font-size:16.5px}
.wardrobe-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wardrobe-list li{position:relative;display:grid;gap:3px;border-radius:20px;padding:18px;background:rgba(249,242,229,.04);border:1px solid var(--night-line);overflow:hidden}
.wardrobe-list strong{font-size:15.5px;color:var(--night-ink)}
.wardrobe-list li>span:last-child{font-size:13.5px;color:var(--night-ink-3)}
/* A short last row: the final card takes the empty cells, at three or two columns. */
@media (min-width:901px){.wardrobe-list li:last-child:nth-child(3n+2){grid-column:span 2}}
@media (min-width:641px) and (max-width:900px){.wardrobe-list li:last-child:nth-child(odd){grid-column:span 2}}
.w-tag{justify-self:start;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 9px;margin-bottom:8px}
.tone-honey{background:rgba(245,189,100,.14);color:var(--night-honey)}
.tone-berry{background:rgba(240,142,174,.14);color:#F08EAE}
.tone-mint{background:rgba(119,213,180,.14);color:var(--night-mint)}
.tone-sky{background:rgba(127,184,236,.14);color:#7FB8EC}
.privacy{padding:clamp(60px,7vw,100px) 0 clamp(100px,11vw,150px);border-top:1px solid var(--night-line)}
.privacy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.privacy-card{position:relative;border-radius:28px;padding:32px 30px 34px;background:linear-gradient(180deg,rgba(249,242,229,.06),rgba(249,242,229,.02));border:1px solid var(--night-line);overflow:hidden}
.privacy-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:rgba(119,213,180,.12);color:var(--night-mint);margin-bottom:24px}
.privacy-card h3{color:var(--night-ink);font-size:25px}
.privacy-card ul{margin-top:16px;display:grid;gap:11px}
.privacy-card li{position:relative;padding-left:22px;color:var(--night-ink-2);font-size:15.5px;line-height:1.5}
.privacy-card li::before{content:'';position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--night-mint)}

/* ---------- Is / isn't ---------- */
.isnt{padding:clamp(110px,12vw,170px) 0 clamp(50px,6vw,80px)}
.section-head{text-align:center;max-width:780px;margin:0 auto clamp(40px,5vw,64px)}
.section-head>p{margin-top:20px;font-size:clamp(17px,1.4vw,19px)}
.isnt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1040px;margin-inline:auto}
.isnt-col{border-radius:32px;padding:clamp(28px,3.2vw,44px)}
.isnt-yes{background:radial-gradient(120% 90% at 20% 0%,#F4F9EA,#E1EDCD)}
.isnt-no{background:var(--surface);border:1px solid var(--line-soft)}
.isnt-col h3{font-size:28px}
.isnt-col ul{margin-top:22px;display:grid;gap:14px}
.isnt-col li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.45;color:var(--ink)}
.isnt-col svg{width:24px;height:24px;padding:5px;border-radius:50%}
.isnt-yes svg{background:var(--leaf-ink);color:#fff;stroke-width:2.6}
.isnt-no svg{background:var(--canvas);color:var(--ink-2);stroke-width:2.4}

/* ---------- FAQ ---------- */
.faq{padding:clamp(70px,8vw,110px) 0}
.faq-card{max-width:900px;margin:0 auto;background:var(--surface);border:1px solid var(--line-soft);border-radius:32px;padding:10px clamp(20px,3vw,40px);box-shadow:var(--shadow-1)}
.faq-card details+details{border-top:1px solid var(--line-soft)}
.faq-card summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font-weight:600;font-size:clamp(17px,1.5vw,19px);line-height:1.35}
.faq-card summary::-webkit-details-marker{display:none}
.faq-card summary svg{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--canvas);transition:transform .4s var(--ease),background-color .25s,color .25s}
.faq-card details[open] summary svg{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
.faq-card details p{padding:0 56px 26px 0;font-size:16.5px;line-height:1.65;max-width:720px}
.faq-card details[open] p{animation:faq-in .5s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Final call to action ---------- */
.final{position:relative;padding:clamp(90px,10vw,140px) 0 0;overflow:clip;isolation:isolate;text-align:center}
.final-floor{position:absolute;inset:auto 0 0 0;height:85%;z-index:-1;background:radial-gradient(60% 70% at 50% 100%,#CDEBDC 0%,rgba(205,235,220,.6) 35%,rgba(249,227,188,.35) 60%,rgba(251,247,236,0) 85%)}
.final-floor::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.1;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(60% 75% at 50% 100%,#000 30%,transparent 85%);mask-image:radial-gradient(60% 75% at 50% 100%,#000 30%,transparent 85%)}
.final-inner{display:flex;flex-direction:column;align-items:center}
.final h2{font-size:clamp(52px,7.6vw,112px);letter-spacing:-.05em}
.final-inner>p:not(.final-note){margin-top:22px;font-size:clamp(17px,1.4vw,20px);max-width:480px}
.final-inner .button{margin-top:34px}
.final-note{margin-top:14px;font-size:13.5px;color:var(--ink-3)}
.final-bo{position:relative;width:clamp(240px,28vw,380px);aspect-ratio:1;margin-top:clamp(36px,5vw,64px);margin-bottom:-6%;transform:translateY(var(--rise,0px))}
.final-bo img{position:relative;width:100%;filter:drop-shadow(0 30px 40px rgba(30,27,22,.22))}
.final-dial{position:absolute;inset:-14%;width:128%;height:128%;color:rgba(30,27,22,.12);stroke-width:.6;transform:rotate(var(--spin,0deg))}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--paper);border-top:1px solid var(--line-soft);padding:clamp(56px,6vw,80px) 0 28px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.footer-brand>p{margin-top:18px;font-family:var(--serif);font-size:20px;color:var(--ink)}
.footer-brand>p.fine{font-family:var(--sans);font-size:13px;color:var(--ink-3);margin-top:8px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-col h2{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.footer-col a,.footer-col button{font-size:15px;color:var(--ink-2);background:none;border:0;padding:2px 0;text-align:left;transition:color .2s}
.footer-col a:hover,.footer-col button:hover{color:var(--ink)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-3)}

/* ---------- Floating pill ---------- */
.float-pill{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:14px;padding:7px 7px 7px 8px;border-radius:999px;background:rgba(30,27,22,.82);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border:1px solid rgba(249,242,229,.12);box-shadow:0 20px 50px -14px rgba(30,27,22,.5);color:var(--night-ink);transform:translate(-50%,0);transition:transform .6s var(--ease),opacity .5s}
.float-pill.is-hidden{transform:translate(-50%,160%);opacity:0;pointer-events:none}
.float-pill img{width:38px;height:38px;border-radius:11px}
.float-text{font-size:15px;font-weight:500;white-space:nowrap}
.float-pill .button{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.float-pill.on-night{background:rgba(251,247,236,.9);color:var(--ink);border-color:rgba(255,255,255,.6)}
.float-pill.on-night .button{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- Dialogs ---------- */
dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:30px;padding:44px 38px 32px;width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;box-shadow:0 40px 140px rgba(23,20,15,.4)}
dialog[open]{animation:dialog-in .45s var(--ease-out)}
dialog::backdrop{background:rgba(23,20,15,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
body.dialog-open{overflow:hidden}
.dialog-close{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:50%}
.dialog-close svg{width:18px;height:18px}
.dialog-bo{width:84px;margin-bottom:10px}
.waitlist-dialog h2,.text-dialog h2{font-size:clamp(32px,4vw,42px)}
.waitlist-dialog>p:not(.eyebrow):not(.fine){margin-top:16px;font-size:16px}
.waitlist-dialog form{margin-top:24px}
.waitlist-dialog form>label:first-child{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
#waitlist-email{width:100%;min-height:56px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--surface);font-size:17px;transition:border-color .2s,box-shadow .2s}
#waitlist-email:focus{outline:none;border-color:var(--mint-ink);box-shadow:0 0 0 4px rgba(12,101,78,.14)}
.waitlist-consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;margin:18px 0 22px;color:var(--ink-2)}
.waitlist-consent input{accent-color:var(--ink);width:19px;height:19px;margin-top:1px;flex-shrink:0}
.waitlist-dialog .button{width:100%}
.waitlist-result{font-size:15px;margin-top:14px;min-height:22px}
.waitlist-result.success{color:#27714F}
.waitlist-result.error{color:#A33A3A}
.waitlist-interest{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.waitlist-interest h3{font-family:var(--sans);font-size:17px;line-height:1.4;margin:0}
.waitlist-interest>p{font-size:13px;color:var(--ink-2);margin-top:6px}
.interest-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.interest-options button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 13px;min-height:44px;font-size:13px}
.interest-options button[aria-pressed="true"]{background:var(--mint-soft);border-color:var(--mint-ink);color:var(--mint-ink)}
#waitlist-interest-result{font-size:13px;margin-top:10px;color:var(--mint-ink)}
.waitlist-dialog>.fine{margin-top:12px}
.text-dialog>p:not(.eyebrow){margin-top:16px;font-size:15.5px}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Server-rendered waitlist pages */
.unsubscribe-page{width:min(560px,100% - 40px);margin:80px auto}
.unsubscribe-page>.eyebrow{margin-top:48px}
.unsubscribe-page h1{font-size:48px}
.unsubscribe-page>p:not(.eyebrow){margin-top:22px}
.unsubscribe-page .button{margin-top:24px}

/* Scroll reveal (armed by script.js) */
.motion-ready .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--stagger,0ms)}
.motion-ready .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .fan-1{--x:-520px}.fan-5{--x:520px}
}
@media (max-width:1060px){
  .desktop-nav{display:none}
  .header-cta{margin-left:auto}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:10px;background:transparent;border:0;flex-shrink:0}
  .menu-toggle span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .mobile-nav{pointer-events:auto;position:absolute;top:74px;left:var(--gutter);right:var(--gutter);display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:14px;box-shadow:var(--shadow-2)}
  .mobile-nav a{padding:13px 16px;border-radius:14px;font-size:17px;font-weight:500;color:var(--ink)}
  .mobile-nav a:hover{background:var(--canvas)}
  .mobile-nav .button{margin-top:8px}
  .fan-1,.fan-5{display:none}
  .wardrobe{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  body{font-size:17px}
  .session{height:500vh}
  .session-sticky{align-items:stretch}
  .session-grid{grid-template-columns:1fr;gap:18px;align-content:center;height:100%;padding-top:84px;padding-bottom:20px}
  .session-copy{order:2}
  .session-stage{order:1}
  .session .eyebrow{display:none}
  .session h2{font-size:28px}
  .session-progress{margin:14px 0 18px}
  .js .session-steps{min-height:150px}
  .session-step h3{font-size:26px}
  .session-step p{font-size:16px;margin-top:8px}
  .stage-ring{width:clamp(150px,26svh,230px)}
  .stage-task{height:30px;font-size:20px;margin-bottom:10px}
  .stage-timer{font-size:44px;margin-top:10px}
  .stage-status{margin-top:10px;font-size:10px;padding:7px 12px}
  .features-head{flex-direction:column;align-items:flex-start}
  .row,.row-reverse{grid-template-columns:1fr}
  .row-reverse .row-visual{order:0}
  .row-visual{height:clamp(440px,110vw,560px)}
  .mood-grid{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 50px;scrollbar-width:none}
  .mood-grid::-webkit-scrollbar{display:none}
  .mood-card{scroll-snap-align:center}
  .wardrobe-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .privacy-grid{grid-template-columns:1fr}
  .isnt-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-header{top:10px}
  .nav{height:58px;padding:0 6px 0 10px;gap:10px}
  .header-cta{display:none}
  .menu-toggle{margin-left:auto}
  .brand-icon{width:32px;height:32px;border-radius:9px}
  .brand-name{font-size:20px}
  .mobile-nav{top:66px}
  .hero{padding-top:112px}
  .hero-badge{font-size:13px;padding-right:14px}
  .badge-cta{display:none}
  .hero h1{font-size:clamp(48px,14vw,66px);margin:24px 0 20px}
  .hero-actions{width:100%}
  .hero-actions .button{flex:1 1 100%}
  .hero-facts{gap:8px 16px}
  .hero-facts li{font-size:13px}
  .hero-devices{height:420px;margin-top:44px}
  .hero-devices .fan-3{--w:230px!important}
  .hero-devices .fan-2{--x:-150px;--y:46px;--w:200px!important}
  .hero-devices .fan-4{--x:150px;--y:46px;--w:200px!important}
  .statement{height:200vh}
  .statement-text{font-size:clamp(30px,8.6vw,42px)}
  .features-head h2{font-size:42px}
  .feature-card{width:82vw}
  .rows{gap:90px}
  .row-visual{border-radius:30px}
  .chip{font-size:13px;padding:8px 14px 8px 9px}
  .chip svg{width:22px;height:22px;padding:4px}
  .row-visual .device{--w:236px!important}
  .night{margin-inline:6px;border-radius:30px}
  .coat-switch{gap:2px;padding:4px}
  .coat-switch button{padding:9px 11px;font-size:13.5px;gap:6px}
  .swatch{width:13px;height:13px}
  .wardrobe-list{grid-template-columns:1fr}
  .faq-card{border-radius:24px}
  .faq-card details p{padding-right:0}
  .final h2{font-size:clamp(46px,13vw,64px)}
  .final-inner .button{width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column}
  .float-pill{left:12px;right:12px;transform:none;justify-content:space-between}
  .float-pill.is-hidden{transform:translateY(160%)}
  .float-text{font-size:13.5px;white-space:normal;line-height:1.25}
  dialog{padding:40px 22px 26px}
}
@media (max-width:380px){
  .float-text{display:none}
  .float-pill .button{flex:1}
  .coat-switch .swatch{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .statement-text .w{color:var(--ink)}
  .js .statement-sign{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .hero-orb{animation:none}
  .marquee{animation:none;width:100%}
  .marquee-track{flex:1 1 100%;flex-wrap:wrap;justify-content:center;row-gap:14px;padding-inline:var(--gutter)}
  .marquee-track[aria-hidden=true]{display:none}
  .promise-band{-webkit-mask-image:none;mask-image:none}
  .motion-ready .reveal{opacity:1;transform:none}
  .session-frame{clip-path:none}
  .js .session-step{filter:none}
}

/* Product film: native playback, with no video download until requested. */
.film-duration{font-family:var(--mono);font-size:12px;opacity:.7}
.product-film{padding-block:clamp(64px,8vw,112px)}
.film-heading{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:48px;margin-bottom:32px}
.film-heading h2{font-size:clamp(38px,5vw,68px);max-width:14ch}
.film-heading>p{max-width:410px;justify-self:end;font-size:clamp(17px,1.5vw,20px)}
.film-player{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 64px -30px rgba(30,27,22,.35)}
.film-figure figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:13px;color:var(--ink-3)}
.film-figure figcaption>span:first-child{color:var(--ink);font-weight:600}
.film-caption-dot{padding-inline:6px;color:var(--mint-ink)}
.film-footer{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line-soft)}
.film-footer>div{max-width:650px}
.film-footer .fine{margin-top:8px}
.film-footer .button{flex-shrink:0}
@media(max-width:767px){
  .film-heading{grid-template-columns:1fr;gap:20px;margin-bottom:24px}
  .film-heading>p{justify-self:start;max-width:38ch}
  .film-player{border-radius:14px}
  .film-footer{align-items:flex-start;flex-direction:column;gap:20px}
  .film-figure figcaption{font-size:12px}
}