/* ══════════════════════════════════════════════════════════════
   Drift · website
   Figma: Home (desktop 1440) / Home (mobile 393)
   ══════════════════════════════════════════════════════════════ */

:root{
  --page:#181d24;
  --deep:#12161c;
  --wall:#0e1116;
  --card:#20262e;
  --glass:#171a1f;

  --ink:#f5f1e6;
  --ink2:#c6cbd3;
  --ink3:#8f96a3;
  --cta:#ede2bc;
  --on-cta:#1b2028;
  --butter:#f1e5b0;
  --mint:#bde5d5;

  --line:rgba(245,242,229,.10);
  --line-soft:rgba(245,242,229,.06);

  --gutter:120px;
  --wrap:1200px;

  --ease:cubic-bezier(.22,.8,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:400 16px/1.5 'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
canvas{display:block}

.skip{position:absolute;left:-9999px;top:0;background:var(--cta);color:var(--on-cta);padding:10px 16px;border-radius:10px;z-index:99}
.skip:focus{left:16px;top:16px}

:focus-visible{outline:2px solid var(--cta);outline-offset:3px;border-radius:6px}

/* ── shared bits ────────────────────────────────────────────── */
.i{width:16px;height:16px;flex:none;fill:currentColor}
.i--30{width:30px;height:30px}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--butter);
  background:rgba(245,242,229,.045);
  border-radius:999px;padding:6px 14px 6px 8px;
}
.eyebrow__dot{
  width:13px;height:13px;border-radius:50%;
  background:linear-gradient(160deg,#dff0e4,#f6e2b4 45%,#f3b7a0);
  box-shadow:0 0 10px rgba(243,183,160,.35);
}

.sec__title{
  font-weight:300;font-size:clamp(28px,3.1vw,44px);line-height:1.18;
  letter-spacing:-.02em;text-align:center;color:var(--ink);text-wrap:balance;
}
.sec__sub{
  margin-top:14px;text-align:center;color:var(--ink2);
  font-size:clamp(15px,1.3vw,19px);line-height:1.6;text-wrap:balance;
}

/* ── buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
     transition:transform .18s var(--ease),background-color .14s ease-out,
                box-shadow .14s ease-out,color .14s ease-out}

.btn--pill{
  background:var(--cta);color:var(--on-cta);
  font-weight:600;font-size:15px;line-height:20px;
  padding:11px 22px 11px 20px;border-radius:999px;gap:9px;
  box-shadow:inset 0 0 0 1px rgba(27,32,40,0);
}
.btn--pill:hover{
  background:rgba(237,226,188,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 24px -8px rgba(237,226,188,.5);
}

.btn--store{
  background:var(--cta);color:var(--on-cta);
  border-radius:18px;padding:12px 28px 12px 22px;
  box-shadow:0 10px 34px -16px rgba(237,226,188,.7);
}
.btn--store:hover{transform:translateY(-2px);
  box-shadow:0 18px 44px -18px rgba(237,226,188,.75),inset 0 0 0 1px rgba(255,255,255,.35)}
.btn__stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.btn__stack small{font-size:12px;line-height:14px;font-weight:400}
.btn__stack strong{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em}

.btn--ghost{
  border-radius:999px;padding:14px 22px;gap:10px;
  background:rgba(245,242,229,.055);color:var(--ink);
  font-size:15px;font-weight:500;
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn--ghost:hover{background:rgba(245,242,229,.1)}
.btn--ghost.is-on{background:var(--cta);color:var(--on-cta);box-shadow:none}

/* ── proof: laurels + stars ─────────────────────────────────── */
.proof{display:inline-flex;align-items:center;gap:17px}
.proof__laurel{width:37.5px;height:100px;object-fit:contain;opacity:.9}
.proof__laurel--l{transform:scaleX(-1)}
.proof__mid{display:flex;flex-direction:column;align-items:center;gap:8px}
.proof__text{font-size:16px;line-height:1.17;color:var(--ink2)}
.proof__text b{color:var(--ink);font-weight:600}
.stars{display:flex;gap:7px}
.stars svg{width:20px;height:20px;fill:var(--cta)}
.stars--lg svg{width:27px;height:27px}
.proof--big .proof__laurel{width:50px;height:134px}
.proof__num{font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.1}

/* ══ cursor ══════════════════════════════════════════════════ */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;
        mix-blend-mode:screen;opacity:0;transition:opacity .3s ease}
.cursor.is-on{opacity:1}
.cursor__star,.cursor__ring{position:absolute;left:0;top:0;translate:-50% -50%}
.cursor__star{
  width:10px;height:10px;border-radius:50%;background:var(--cta);
  transition:width .2s var(--ease),height .2s var(--ease);
}
.cursor__ring{display:none}
.cursor.is-hot .cursor__star{width:16px;height:16px}
@media (pointer:fine){ body.has-cursor,body.has-cursor *{cursor:none} }

/* ══ nav ═════════════════════════════════════════════════════ */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:0;
     transition:padding .32s var(--ease)}
.nav__bar{
  display:flex;align-items:center;justify-content:space-between;
  height:84px;padding:0 var(--gutter);
  margin:0 auto;max-width:none;
  border-radius:0;background:rgba(18,22,28,0);
  backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  box-shadow:inset 0 0 0 1px rgba(245,242,229,0);
  transition:height .32s var(--ease),max-width .32s var(--ease),
             border-radius .32s var(--ease),background-color .32s var(--ease),
             backdrop-filter .32s var(--ease),box-shadow .32s var(--ease),
             padding .32s var(--ease);
}
.nav.is-stuck{padding-top:16px}
.nav.is-stuck .nav__bar{
  height:68px;max-width:1200px;border-radius:999px;padding:0 24px 0 28px;
  background:rgba(18,22,28,.62);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 0 0 1px var(--line-soft),0 18px 50px -30px #000;
}
.nav__logo{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:28px}
.nav__links{display:flex;align-items:center;gap:36px}
.nav__links>a:not(.btn){
  font-size:15px;line-height:22px;color:var(--ink2);padding:4px 0;
  transition:color .12s ease-out;
}
.nav__links>a:not(.btn):hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .nav,.nav__bar{transition:background-color .2s linear,opacity .2s linear}
}

/* ══ hero ════════════════════════════════════════════════════ */
.hero{position:relative;min-height:909px;isolation:isolate;overflow:clip}
.hero__backdrop{position:absolute;inset:0 0 auto;height:1004px;overflow:hidden;z-index:-1}
.hero__forest{width:100%;height:100%;object-fit:cover}
.hero__vig-x{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(17,21,27,0) 50%,rgba(17,21,27,.55) 100%)}

.hero__inner{position:relative;max-width:1440px;margin:0 auto;height:909px}

.hero__phone{position:absolute;left:176px;top:160px;width:398px}
.device{
  position:relative;width:398px;height:794px;border-radius:67px;
  background:#0d0e12;border:2.5px solid #99a1b2;overflow:hidden;
  box-shadow:0 40px 90px -10px rgba(0,0,0,.65);
}
.device__screen{position:absolute;left:12.3px;top:12px;width:373.35px;height:770px;
                border-radius:47.5px;overflow:hidden;background:var(--deep)}
.device__wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device__grade{position:absolute;inset:0;mix-blend-mode:multiply;
  background:rgba(34,43,34,.94)}
.device__wash{position:absolute;inset:0;background:
  radial-gradient(42% 26% at 12% 6%,rgba(110,140,200,.16),transparent 70%),
  radial-gradient(62% 30% at 50% 18%,rgba(173,184,219,.13),transparent 70%),
  linear-gradient(180deg,rgba(13,14,18,0) 42%,rgba(13,14,18,.72) 100%)}
.device__ring{position:absolute;left:50%;top:40%;translate:-50% -50%;
              width:340px;height:340px;mix-blend-mode:screen}
.device__brand{position:absolute;left:0;right:0;top:430px;text-align:center;padding:0 23px}
.device__title{font-size:32.3px;line-height:1.3;color:var(--ink)}
.device__sub{margin-top:14px;font-size:19px;line-height:22.8px;color:var(--ink2)}
.device__glass{position:absolute;left:12.3px;top:12px;width:373.35px;height:770px;
  border-radius:47.5px;pointer-events:none;
  background:linear-gradient(109deg,rgba(255,255,255,0) 21%,rgba(255,255,255,.06) 36%,
             rgba(255,255,255,0) 37%,rgba(255,255,255,0) 71%)}
.device__island{position:absolute;left:139px;top:22px;width:119.7px;height:35px;
                border-radius:99px;background:#050508}

.hero__copy{position:absolute;left:680px;top:277px;width:620px}
.hero__title{
  margin-top:18px;
  font-weight:300;font-size:64px;line-height:74px;letter-spacing:-1.6px;color:var(--ink);
}
.hero__sub{margin-top:22px;font-size:19px;line-height:30px;color:var(--ink2)}
.hero__copy .btn--store{margin-top:38px}

.hero__fade{position:absolute;left:0;right:0;bottom:0;height:321px;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,29,36,0) 0%,rgba(24,29,36,0) 41%,
             rgba(24,29,36,.85) 68%,var(--page) 86%)}

/* ══ benefits ════════════════════════════════════════════════ */
.benefits{padding:0 var(--gutter) 90px}
.benefits .sec__title{padding:60px 0}
.benefits__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
                max-width:var(--wrap);margin:0 auto}
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border-radius:22px;padding:9px;
  box-shadow:inset 0 0 0 1px var(--line-soft),0 24px 60px -40px #000;
}
.glass__img{border-radius:15px;overflow:hidden;aspect-ratio:386/203;background:#0f1319}
.glass__img img{width:100%;height:100%;object-fit:cover}
.glass__body{padding:28px 23px 26px}
.glass__icon{width:24px;height:24px;fill:none;stroke:var(--butter);stroke-width:1.4;
             stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.glass h3{margin-top:16px;font-size:21px;font-weight:600;letter-spacing:-.01em;
          background:linear-gradient(100deg,#f2e9c6,#efd9b4);-webkit-background-clip:text;
          background-clip:text;color:transparent}
.glass p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink2)}

/* ══ sound wall ══════════════════════════════════════════════ */
.wall{background:var(--wall);padding:110px 0 20px;overflow:hidden}
.wall__head{padding:0 var(--gutter);text-align:center}
.wall__head .eyebrow{margin-bottom:18px}
.wall__stage{position:relative;height:632px;margin-top:86px}
.wall__grid{position:absolute;inset:-70px -40px;display:flex;gap:8px;
            justify-content:center;overflow:hidden;
            --cw:162px;--ch:290px;--cgap:20px}
.wall__col{flex:0 0 var(--cw);display:flex;flex-direction:column;gap:var(--cgap);
           --shift:calc(var(--len) * (var(--ch) + var(--cgap)));
           animation:wallDown var(--dur,46s) linear infinite}
.wall__col--up{animation-name:wallUp}
.wall__card{position:relative;flex:none;width:var(--cw);height:var(--ch);border-radius:14px;
            overflow:hidden;background:#12161c}
.wall__card img{width:100%;height:100%;object-fit:cover;opacity:.9}
.wall__ring{position:absolute;left:50%;top:50%;width:132px;height:144px;
  margin:-72px 0 0 -66px;pointer-events:none;opacity:.85;
  background:url('assets/wall-ring.webp') no-repeat center/contain}
@keyframes wallDown{from{transform:translateY(calc(var(--shift) * -1))}to{transform:translateY(0)}}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(calc(var(--shift) * -1))}}

.wall__scrim{position:absolute;inset:-70px -40px;pointer-events:none;
  background:
    radial-gradient(44% 58% at 50% 48%,rgba(14,17,22,.92),rgba(14,17,22,.28) 78%,rgba(14,17,22,0) 100%),
    linear-gradient(180deg,var(--wall) 0%,rgba(14,17,22,.62) 20%,rgba(14,17,22,.62) 74%,var(--wall) 99%);
}
.wall__pick{position:absolute;left:50%;top:50%;translate:-50% -54%;width:272px;z-index:2}
.pick{position:relative;border-radius:22px}
.pick__media{display:block;position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 40px 70px -20px rgba(0,0,0,.75)}
.pick img{width:100%;display:block}
.pick::after{content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(237,226,188,.55)}
.pick__scrim{position:absolute;left:0;right:0;bottom:0;height:42%;border-radius:0 0 22px 22px;
  pointer-events:none;background:linear-gradient(180deg,rgba(10,13,17,0),rgba(10,13,17,.62) 72%)}
.pick__name{position:absolute;left:10.3%;bottom:13.8%;margin:0;z-index:2;
  font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--butter);
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
.pick__play{position:absolute;right:6.6%;bottom:10.9%;z-index:2;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(18,22,28,.72);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(245,242,229,.22)}
.pick__play svg{width:20px;height:20px;fill:var(--ink)}

/* a light that keeps walking clockwise around the card */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spinAng{to{--ang:360deg}}
.pick__sweep{position:absolute;inset:-1.6px;border-radius:24px;pointer-events:none;
  padding:1.6px;
  background:conic-gradient(from var(--ang),
    rgba(237,226,188,0) 0deg,rgba(237,226,188,0) 236deg,
    rgba(237,226,188,.5) 320deg,#fff6d8 351deg,rgba(237,226,188,.45) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spinAng 6.5s linear infinite}
.pick__glow{position:absolute;inset:-34px;border-radius:52px;pointer-events:none;
  background:conic-gradient(from var(--ang),
    transparent 0deg,transparent 248deg,rgba(237,226,188,.34) 342deg,transparent 360deg);
  filter:blur(24px);animation:spinAng 6.5s linear infinite}
.pick__ring{position:absolute;left:51%;top:31.8%;translate:-50% -50%;
  width:111%;aspect-ratio:1;mix-blend-mode:screen;opacity:.8;pointer-events:none}
.wall__caption{position:absolute;left:0;right:0;bottom:4px;text-align:center;
               font-size:15px;color:var(--ink3);z-index:2}

/* ══ monaural ════════════════════════════════════════════════ */
.mono{padding:100px var(--gutter)}
.mono__row{max-width:var(--wrap);margin:0 auto;display:grid;
           grid-template-columns:550px 1fr;gap:90px;align-items:center}
.mono__title{text-wrap:balance;margin:18px 0 0;font-weight:300;font-size:clamp(30px,3vw,42px);
             line-height:1.14;letter-spacing:-.02em}
.mono__text{margin-top:22px;font-size:17px;line-height:1.65;color:var(--ink2);max-width:520px}
.mono__copy .btn--ghost{margin-top:34px}
.mono__viz canvas{width:100%;height:auto;aspect-ratio:560/470}

/* ══ science ═════════════════════════════════════════════════ */
.science{padding:100px var(--gutter)}
.science__head{text-align:center}
.science__head .eyebrow{margin-bottom:22px}
.science__note{margin-top:18px;font-size:14px;color:var(--ink3)}
.science__note a{color:var(--ink2);border-bottom:1px solid var(--line)}
.science__cards{display:grid;grid-template-columns:repeat(2,minmax(0,393px));
                gap:28px;justify-content:center;margin-top:50px}
.stat{background:#12161c;border-radius:22px;padding:38px 28px 34px;text-align:center;
      box-shadow:0 0 0 1px var(--line-soft)}
.stat__big{position:relative;z-index:0;display:inline-flex;align-items:baseline;gap:6px;
           font-size:62px;font-weight:300;letter-spacing:-.03em;line-height:1;
           font-variant-numeric:tabular-nums}
.stat__big .count,.stat__big>i{position:relative;z-index:2}
.stat__big i{font-style:normal;font-size:22px;font-weight:400;color:var(--ink2)}
.stat__arrow{position:absolute;left:calc(100% - 34px);top:4px;width:116px;height:auto;
             z-index:1;opacity:0;transform:translateX(-14px) scale(.9);transform-origin:0 50%}
.stat__arrow--up{top:-20px;width:110px}
.is-in .stat__arrow{opacity:.85;transform:none;
  transition:opacity .45s ease 1.75s,transform .7s var(--ease) 1.75s}
.stat__lede{margin-top:14px;font-size:21px;font-weight:600;letter-spacing:-.01em}
.stat__lede em{font-style:normal;color:var(--butter)}
.stat__meta{margin-top:8px;font-size:15px;color:var(--ink2)}
.stat__body{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:10px}
.panel{width:100%;background:#1b212a;border-radius:16px;padding:16px 18px 18px;
       box-shadow:0 0 0 1px var(--line-soft);
       opacity:0;transform:translateY(14px);
       transition:opacity .5s var(--ease),transform .5s var(--ease)}
.is-in .panel--before,.is-in .panel--ringA{opacity:1;transform:none;transition-delay:.15s}
.is-in .panel--after,.is-in .panel--ringB{opacity:1;transform:none;transition-delay:.7s}
.panel__tag{display:flex;align-items:center;justify-content:center;gap:7px;
            font-size:13px;color:var(--ink2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink2)}
.dot--warm{background:var(--cta)}
.bar{margin:12px 0 14px;height:9px;border-radius:999px;background:rgba(245,242,229,.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:rgba(245,242,229,.75);
       width:0;transition:width .85s var(--ease) var(--d,.35s)}
.panel--after .bar i{--d:1.1s}
.bar .bar--warm{background:linear-gradient(90deg,rgba(245,242,229,.75),var(--cta))}
.is-in .bar i{width:var(--w)}
.panel__value{font-size:24px;font-weight:600;letter-spacing:-.01em}
.panel__unit{margin-top:2px;font-size:13px;color:var(--ink3)}
.stat__link{width:12px;height:44px;fill:none;stroke:var(--ink2);stroke-width:1.3;
            stroke-linecap:round;opacity:0;transition:opacity .4s ease .55s}
.is-in .stat__link{opacity:.6}

.stat__body--rings{flex-direction:row;align-items:flex-start;justify-content:center;gap:0;
                   position:relative;min-height:322px}
.panel--ringA{width:208px;position:absolute;left:0;top:0}
.panel--ringB{width:208px;position:absolute;right:0;top:92px;z-index:1}
.donut{position:relative;width:150px;height:150px;margin:14px auto 0}
.donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.donut__track{fill:none;stroke:#2b313a;stroke-width:15}
.donut__arc{fill:none;stroke:#cfd2d8;stroke-width:15;stroke-linecap:round;
  stroke-dasharray:402.12;stroke-dashoffset:402.12;
  transition:stroke-dashoffset 1s var(--ease) var(--d,.35s)}

.is-in .donut__arc{stroke-dashoffset:calc(402.12 * (1 - var(--p) / 100))}
.panel--ringB .donut__arc{--d:.95s}
.donut__arc--gain{stroke:url(#arcWarm);
  transform:rotate(calc(var(--from) * 3.6deg));transform-origin:80px 80px;
  stroke-dasharray:calc(402.12 * var(--p) / 100) 402.12;
  stroke-dashoffset:calc(402.12 * var(--p) / 100);
  transition:stroke-dashoffset .8s var(--ease) 1.75s}
.is-in .donut__arc--gain{stroke-dashoffset:0}
.donut>span{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;font-size:17px;font-weight:600}
.panel--ringA .donut>span{z-index:2}
.donut>span small{font-size:11px;font-weight:400;color:var(--ink3)}

/* ══ one night / bento ═══════════════════════════════════════
   Every card keeps its Figma aspect ratio and everything inside it is
   positioned as a percentage of that box, so the whole thing scales
   instead of needing a different set of numbers at each breakpoint. */
.night{padding:100px var(--gutter)}
.night__head{text-align:center}
.night__head .eyebrow{margin-bottom:22px}
.bento{max-width:var(--wrap);margin:56px auto 0;display:grid;gap:20px}
.bento__row{display:flex;gap:20px;align-items:flex-start}

.bcard{position:relative;overflow:hidden;border-radius:22px;
       container-type:inline-size;
       box-shadow:0 0 0 1px var(--line-soft);
       transition:box-shadow .5s var(--ease)}
.bcard:hover{box-shadow:0 0 0 1px var(--line),0 30px 70px -50px #000}
.bcard--checkin{flex:760;aspect-ratio:760/480;background:#11151b}
.bcard--wake{flex:760;aspect-ratio:760/440;background:#11151b}
.bcard--alarm{flex:420;aspect-ratio:420/480;
  background:linear-gradient(145deg,
    rgba(189,229,214,.22) 0%,rgba(189,229,214,.06) 50%,rgba(17,21,27,0) 100%),#11151b}
.bcard--session{flex:420;aspect-ratio:420/440;
  background:linear-gradient(145deg,
    rgba(237,227,176,.22) 0%,rgba(237,227,176,.06) 50%,rgba(17,21,27,0) 100%),#11151b}

.bcard__copy{position:absolute;left:4.2%;top:6.7%;right:4.2%;z-index:3}
.bcard__copy h3{font-size:max(17px,2.9cqw);font-weight:600;letter-spacing:-.01em}
.bcard__copy p{margin-top:8px;font-size:max(13px,1.98cqw);line-height:1.55;
               color:var(--ink2);max-width:48ch}
.bcard--alarm .bcard__copy h3,.bcard--session .bcard__copy h3{font-size:max(17px,5.24cqw)}
.bcard--alarm .bcard__copy p,.bcard--session .bcard__copy p{font-size:max(13px,3.57cqw)}

.bcard__art{position:absolute;inset:0;overflow:hidden;container-type:inline-size}
.bcard__light{display:none}
.bcard__mask{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,28,35,.92) 0%,rgba(23,28,35,0) 34%)}

/* card 1 · check-in */
.bcard--checkin .sheet{position:absolute;left:7.89%;bottom:0;width:38.16%;
  filter:drop-shadow(0 3.4cqw 5.8cqw rgba(0,0,0,.6))}
.mood-orbit{position:absolute;left:47.37%;top:17.08%;width:52.11%;height:auto;
  transition:transform .6s var(--ease)}
.bcard--checkin:hover .mood-orbit{transform:scale(1.045)}

/* card 2 · alarm */
.bcard--alarm .wake{position:absolute;left:.71%;bottom:0;width:99.05%;
  filter:drop-shadow(0 5cqw 8cqw rgba(0,0,0,.55))}
.float-panel{position:absolute;left:26.19%;top:68.75%;width:64.29%;z-index:2;
  border-radius:4.3cqw;padding:2.86cqw;
  background:rgba(22,27,34,.92);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px var(--line),0 5.7cqw 12cqw -6.7cqw #000;
  transition:transform .5s var(--ease)}
.bcard--alarm:hover .float-panel{transform:translateY(-2.4cqw)}
.float-panel__row{display:flex;align-items:center;justify-content:space-between;
  gap:2.9cqw;padding:1.9cqw 2.4cqw;font-size:max(12px,3.57cqw);font-weight:500}
.switch{width:9.5cqw;height:5.5cqw;border-radius:999px;background:var(--cta);position:relative;flex:none}
.switch::after{content:'';position:absolute;right:.5cqw;top:.5cqw;width:4.5cqw;height:4.5cqw;
               border-radius:50%;background:#fff}
.float-panel__row--step{margin-top:1cqw;background:rgba(245,242,229,.05);
  border-radius:2.9cqw;padding:2.4cqw 3.3cqw}
.float-panel__row--step button{font-size:max(15px,4.5cqw);color:var(--ink2);line-height:1}
.float-panel__row--step b{font-size:max(18px,5.7cqw);font-weight:500}
.float-panel__row--step b small{font-size:max(10px,2.9cqw);color:var(--ink3);margin-left:.9cqw}

/* card 3 · session */
.session-ring{position:absolute;left:-15.7%;top:12.27%;width:131.4%;aspect-ratio:1;
              mix-blend-mode:screen;opacity:.95}
.pill-now{position:absolute;left:48.81%;top:38.64%;z-index:2;
  display:inline-flex;align-items:center;gap:1.9cqw;padding:2.1cqw 3.6cqw;
  border-radius:999px;font-size:max(11px,3.21cqw);white-space:nowrap;
  background:rgba(28,34,42,.85);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px var(--line)}
.pill-now svg{width:max(12px,3.57cqw);height:auto;fill:none;stroke:var(--butter);
              stroke-width:1.3;stroke-linecap:round}

/* card 4 · wake */
.bcard--wake .scene{position:absolute;left:.26%;bottom:0;width:99.74%;max-width:none}
.bcard--wake .bcard__art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(21,26,33,.78),rgba(21,26,33,0) 34%),
    linear-gradient(270deg,rgba(21,26,33,.5),rgba(21,26,33,0) 40%)}
.clockcard{position:absolute;left:4.47%;top:45.23%;width:44.21%;z-index:2;
  border-radius:2.9cqw;padding:2.4cqw 1.8cqw 1.8cqw;text-align:center;
  background:rgba(22,27,34,.86);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px var(--line),0 3.4cqw 7cqw -4cqw #000}
.clockcard__time{font-size:max(30px,7.37cqw);font-weight:300;letter-spacing:-.02em;line-height:1}
.clockcard__meta{margin-top:1cqw;display:flex;align-items:center;justify-content:center;
                 gap:.8cqw;font-size:max(11px,1.84cqw);color:var(--ink2)}
.clockcard__meta svg{width:max(12px,1.84cqw);height:auto;fill:none;stroke:currentColor;
                     stroke-width:1.2;stroke-linecap:round}
.slider{position:relative;margin-top:1.8cqw;height:8.95cqw;min-height:46px;
        border-radius:999px;overflow:hidden;
        background:rgba(245,242,229,.09);display:grid;place-items:center}
.slider__label{font-size:max(13px,2.24cqw);color:var(--ink2);padding-left:4.7cqw;
  transition:opacity .45s linear}
.slider__knob{position:absolute;left:0;top:0;height:100%;aspect-ratio:1;border-radius:50%;
  background:var(--cta);color:var(--on-cta);display:grid;place-items:center;
  font-size:max(16px,2.9cqw);z-index:2;
  transition:transform 1.25s cubic-bezier(.32,.72,0,1)}
/* an iOS-style slide: the knob travels the full track and the label clears ahead of it */
.bcard--wake:hover .slider__knob{transform:translateX(calc(40.61cqw - 100%))}
.bcard--wake:hover .slider__label{opacity:0;transition-duration:.25s}

/* ══ record ══════════════════════════════════════════════════ */
.record{padding:100px var(--gutter)}
.record__row{max-width:var(--wrap);margin:0 auto;display:grid;
             grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.record__title{margin:18px 0 0;font-weight:300;font-size:clamp(30px,3vw,42px);
               line-height:1.14;letter-spacing:-.02em}
.record__text{margin-top:22px;font-size:17px;line-height:1.65;color:var(--ink2)}
.record__list{margin-top:26px;display:grid;gap:10px}
.record__list li{position:relative;padding-left:18px;font-size:15px;color:var(--ink2)}
.record__list li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;
                         border-radius:50%;background:var(--ink3)}
.record__art img{width:100%;border-radius:0}

/* ══ testimonials ════════════════════════════════════════════ */
.voices{position:relative;padding:100px 0;overflow:hidden}
.voices__head{text-align:center;padding:0 var(--gutter)}
.voices__head .eyebrow{margin-bottom:22px}
.voices__proof{display:flex;justify-content:center;gap:44px;margin-top:40px;flex-wrap:wrap}
.marquee{margin-top:56px;overflow:hidden;-webkit-mask:none}
.marquee--rev{margin-top:12.6px}
.marquee__track{display:flex;gap:12.6px;width:max-content;
                animation:slideL var(--dur,70s) linear infinite}
.marquee--rev .marquee__track{animation-name:slideR}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(calc(var(--half) * -1))}}
@keyframes slideR{from{transform:translateX(calc(var(--half) * -1))}to{transform:translateX(0)}}
.quote{flex:none;margin:0;width:315px;height:184.8px;overflow:hidden;
       border-radius:18px;padding:20px;background:var(--card);
       box-shadow:0 0 0 1px var(--line-soft)}
.quote__head{display:flex;align-items:center;gap:10.5px}
.quote__who{margin:0}
.quote__avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.quote__who{flex:1;min-width:0}
.quote__name{font-size:16px;font-weight:600;line-height:24px}
.quote__ten{font-size:13px;line-height:21px;color:var(--ink3)}
.quote__stars{display:flex;gap:4px}
.quote__stars svg{width:14px;height:14px;fill:var(--cta)}
.quote__text{margin-top:14.7px;font-size:14.6px;line-height:23.3px;color:var(--ink2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.marquee__fade{position:absolute;top:0;bottom:0;width:220px;pointer-events:none;z-index:2}
.marquee__fade--l{left:0;background:linear-gradient(90deg,var(--page),rgba(24,29,36,0))}
.marquee__fade--r{right:0;background:linear-gradient(270deg,var(--page),rgba(24,29,36,0))}

/* ══ pricing ═════════════════════════════════════════════════ */
.pricing{padding:100px var(--gutter);text-align:center}
.pricing .eyebrow{margin-bottom:22px}
.plans{max-width:960px;margin:46px auto 0;background:var(--card);border-radius:22px;
       padding:11px 41px;box-shadow:inset 0 0 0 1px var(--line-soft)}
.plans__row{display:grid;grid-template-columns:1fr 160px 160px;align-items:center;
  height:66px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:16px;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms)}
.plans.is-in .plans__row{opacity:1;transform:none}
.plans__row:last-child{border-bottom:0}
.plans__row>span:not(:first-child){text-align:center;color:var(--ink2)}
.plans__row--head{color:var(--ink3);font-size:15px}
.plans__row--head .is-pro{color:var(--butter)}
.yes,.no{position:relative}
.yes::after{content:'';position:absolute;left:50%;top:50%;translate:-50% -60%;
  width:14px;height:8px;border-left:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);
  rotate:-45deg}
.plans__row>.yes:last-child::after{border-color:var(--cta)}
.no::after{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:12px;height:1.6px;background:var(--ink3)}

.plan{position:relative;max-width:328px;margin:52px auto 0;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  background:var(--card);border-radius:20px;padding:18px 20px;text-align:left;
  box-shadow:inset 0 0 0 1px rgba(237,226,188,.26)}
.plan__badge{position:absolute;right:-12px;top:-14px;background:var(--cta);color:var(--on-cta);
  font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px}
.plan__check{width:24px;height:24px;border-radius:50%;background:var(--cta);position:relative}
.plan__check::after{content:'';position:absolute;left:50%;top:50%;translate:-50% -62%;
  width:10px;height:6px;border-left:1.8px solid var(--on-cta);border-bottom:1.8px solid var(--on-cta);
  rotate:-45deg}
.plan__name{display:flex;flex-direction:column}
.plan__name b{font-size:17px;font-weight:600}
.plan__name small{font-size:13px;color:var(--ink3)}
.plan__price{font-size:21px;font-weight:600}
.plan__note{margin-top:16px;font-size:13px;color:var(--ink3)}


/* ══ FAQ ═════════════════════════════════════════════════════ */
.faq{padding:100px var(--gutter);text-align:center}
.faq .eyebrow{margin-bottom:22px}
.faq__list{max-width:820px;margin:50px auto 0;text-align:left;
           border-top:1px solid var(--line-soft)}
.faq__item{border-bottom:1px solid var(--line-soft)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px 4px;cursor:pointer;text-align:left;
  font-size:clamp(16px,1.5vw,19px);font-weight:500;line-height:1.45;color:var(--ink);
  transition:color .15s ease-out}
.faq__q:hover{color:var(--butter)}
.faq__sign{position:relative;flex:none;width:20px;height:20px}
.faq__sign::before,.faq__sign::after{content:'';position:absolute;left:50%;top:50%;
  width:14px;height:1.6px;translate:-50% -50%;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.faq__sign::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__sign::after{transform:rotate(0);opacity:0}
.faq__a{height:0;overflow:hidden;transition:height .38s var(--ease)}
.faq__a p{padding:0 56px 28px 4px;margin:0;font-size:16px;line-height:1.7;color:var(--ink2)}

/* ══ CTA ═════════════════════════════════════════════════════ */
.cta{padding:60px var(--gutter)}
.cta__banner{position:relative;max-width:var(--wrap);margin:0 auto;height:560px;
             border-radius:26px;overflow:hidden;isolation:isolate}
.cta__forest{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__tone{position:absolute;inset:0;background:rgba(17,21,27,.42)}
.cta__glow{position:absolute;left:390px;top:70px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(237,226,188,.14),rgba(237,226,188,0) 65%)}
.cta__ring{position:absolute;left:50%;top:50%;translate:-50% -50%;
           width:800px;height:800px;mix-blend-mode:screen;opacity:.88}
.cta__inner{position:relative;height:100%;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:18px;text-align:center}
.cta__title{font-weight:300;font-size:clamp(32px,3.4vw,46px);letter-spacing:-.02em;line-height:1.2}
.cta__inner .btn--store{margin-top:10px}

/* ══ footer ══════════════════════════════════════════════════ */
.foot{background:var(--deep);padding:70px var(--gutter) 40px;text-align:center;overflow:hidden}
.foot__mark{display:flex;justify-content:center;font-weight:600;line-height:1;
  font-size:clamp(76px,11.5vw,166px);letter-spacing:-.02em;color:var(--ink)}
.foot__mark span{display:inline-block;opacity:0;transform:translateY(26px);filter:blur(6px)}
.foot__mark.is-in span{opacity:1;transform:none;filter:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);
  transition-delay:calc(var(--n) * 90ms)}
.foot__links{margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap;gap:28px;
             font-size:15px;color:var(--ink2)}
.foot__links a{transition:color .12s ease-out}
.foot__links a:hover{color:var(--ink)}
.foot__copy{margin-top:22px;font-size:14px;color:var(--ink3)}
.foot__moons{position:relative;width:393px;height:214px;margin:18px auto 0}
.foot__moons svg{width:100%;height:100%;overflow:visible}

/* ══ reveal ══════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   Responsive — desktop → tablet → mobile (Figma mobile 393)
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1380px){
  :root{--gutter:64px}
  .hero__inner{height:auto;min-height:860px}
  .hero__phone{left:4%}
  .hero__copy{left:auto;right:4%;width:min(560px,46%)}
  .hero__title{font-size:clamp(40px,4.4vw,64px);line-height:1.15;letter-spacing:-.025em}.token--2{left:520px}.token--3{left:436px}
}

@media (max-width:1120px){
  :root{--gutter:40px}
  .mono__row{grid-template-columns:1fr;gap:46px}
  .mono__text{max-width:none}
  .record__row{grid-template-columns:1fr;gap:40px}
  .bento__row{flex-direction:column}
  /* flex-grow would otherwise split the row height between the cards */
  .bcard{flex:0 0 auto;width:100%}.token--2{left:400px;top:8px}.token--3{left:320px;top:80px}
  .science__cards{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}

@media (max-width:860px){
  :root{--gutter:20px}

  /* hero: copy first, phone below — matches the mobile frame */
  .hero{min-height:auto;padding-bottom:0}
  .hero__backdrop{height:100%}
  .hero__vig-x{background:none}
  .hero__inner{height:auto;min-height:0;display:flex;flex-direction:column;
               padding:120px 20px 0;gap:36px;align-items:center}
  .hero__copy{position:static;width:100%;max-width:420px;text-align:center}
  .hero__copy .proof{justify-content:center}
  .hero__title{margin-top:16px;font-size:clamp(32px,9vw,40px);line-height:1.16;
               letter-spacing:-.02em}
  .hero__sub{margin-top:14px;font-size:16px;line-height:1.6}
  .hero__copy .btn--store{margin-top:26px}
  .hero__phone{position:static;width:min(300px,78vw);margin-bottom:-120px}
  /* Separate radius axes preserve circular corners as the phone scales. */
  .device{width:100%;height:auto;aspect-ratio:398/794;border-radius:16.834% / 8.438%}
  .device__screen,.device__glass{left:3.1%;top:1.5%;width:93.8%;height:97%;border-radius:12.723% / 6.169%}
  .device__ring{width:88%;height:auto;aspect-ratio:1}
  .device__title{font-size:clamp(20px,6.6vw,26px)}
  .device__sub{font-size:clamp(13px,4vw,15px);line-height:1.35}
  .device__brand{top:55%}
  .device__island{left:35%;width:30%;height:4.4%;top:2.8%}
  .hero__fade{height:200px}

  .nav__bar{height:68px;padding:0 20px}
  .nav.is-stuck{padding-top:10px}
  .nav.is-stuck .nav__bar{height:58px;margin:0 12px;padding:0 10px 0 18px}
  .nav__links>a:not(.btn){display:none}
  .btn--pill{padding:9px 18px 9px 16px;font-size:14px}


  /* bento: copy above the art, art keeps its Figma aspect so the
     composition inside it stays exactly right at any width */
  .bcard{aspect-ratio:auto}
  .bcard__copy{position:static;padding:24px 20px 4px}
  .bcard__copy h3,.bcard--alarm .bcard__copy h3,.bcard--session .bcard__copy h3{font-size:21px}
  .bcard__copy p,.bcard--alarm .bcard__copy p,.bcard--session .bcard__copy p{font-size:15px;max-width:none}
  .bcard__art{position:relative;inset:auto;width:100%}
  /* keep each art box at its Figma aspect so every position inside it still
     lands exactly where it was drawn — only the type needs a readable floor */
  .bcard--checkin .bcard__art{aspect-ratio:760/480}
  .bcard--alarm .bcard__art{aspect-ratio:420/480}
  .bcard--session .bcard__art{aspect-ratio:420/440}
  .bcard--wake .bcard__art{aspect-ratio:760/440}


  .pill-now{font-size:10px;padding:6px 11px;gap:6px}
  .pill-now svg{width:12px}

  .float-panel{border-radius:14px;padding:10px}
  .float-panel__row{font-size:12px;padding:7px 9px;gap:10px}
  .switch{width:34px;height:20px}
  .switch::after{width:16px;height:16px;right:2px;top:2px}
  .float-panel__row--step{border-radius:10px;padding:8px 12px;margin-top:4px}
  .float-panel__row--step b{font-size:18px}
  .float-panel__row--step b small{font-size:10px}
  .float-panel__row--step button{font-size:15px}

  .clockcard{width:min(236px,66%);border-radius:14px;padding:12px 10px 10px}
  .clockcard__time{font-size:34px}
  .clockcard__meta{font-size:10px;gap:4px;white-space:nowrap}
  .clockcard__meta svg{width:11px}
  .slider{min-height:40px;margin-top:8px}
  .slider__label{font-size:12px;padding-left:40px;white-space:nowrap}
  .slider__knob{font-size:14px}
  .bcard--wake:hover .slider__knob{transform:translateX(calc(min(236px,66cqw) - 20px - 100%))}
  .bcard__mask{display:none}
  .bcard--checkin .bcard__copy p{max-width:30ch}

  .benefits{padding-bottom:60px}
  .benefits .sec__title{padding:54px 0 28px}
  .benefits__grid{grid-template-columns:1fr;gap:16px}

  .wall{padding-top:70px}
  .wall__stage{height:560px;margin-top:84px}
  .wall__grid{inset:-60px -120px;--cw:122px;--ch:218px;--cgap:15px}
  .wall__pick{width:min(240px,64vw)}
  .wall__caption{bottom:-2px;font-size:13px}

  .mono{padding:70px var(--gutter)}
  .mono__row{gap:34px}
  .mono__copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .mono__title{font-size:clamp(26px,7.6vw,34px)}
  .mono__text{font-size:15.5px}

  .science,.night,.record,.voices,.pricing,.faq{padding-top:70px;padding-bottom:70px}
  .faq__q{padding:22px 2px;gap:16px}
  .faq__a p{padding:0 8px 24px 2px;font-size:15px}
  .stat__big{font-size:54px}
  .stat__arrow{width:88px;height:40px;stroke-width:6}
  .stat__body--rings{min-height:356px}
  .panel--ringA{width:62%;left:0}
  .panel--ringB{width:62%;right:0;top:150px}
  .donut{width:120px;height:120px}
.token--2{left:280px;top:4px}.token--3{left:230px;top:64px}


  /* the mobile frame shows a plain stacked list, not the drifting rows */
  .voices__proof{gap:20px;flex-direction:column;align-items:center}
  .proof--big .proof__laurel{width:38px;height:102px}
  .proof__num{font-size:34px}
  .marquee{overflow:visible;margin-top:22px}
  .marquee__track{display:block;width:auto;padding:0 20px;animation:none}
  .marquee:hover .marquee__track{animation:none}
  .marquee__track>.quote{display:block;width:auto;max-width:none;margin:0 0 14px}
  .marquee__track>.quote:nth-child(n+4){display:none}
  .marquee--rev .marquee__track>.quote:nth-child(n+3){display:none}
  .marquee__fade{display:none}

  .plans{padding:8px 18px}
  .plans__row{grid-template-columns:1fr 84px 70px;height:auto;min-height:58px;
              padding:12px 0;font-size:14.5px;gap:6px}
  .plans__row--head{font-size:13px}
  .plan{max-width:none}

  .cta{padding:30px var(--gutter) 60px}
  .cta__banner{height:min(560px,112vw);border-radius:20px}
  .cta__ring{width:min(620px,124vw);height:min(620px,124vw)}
  .cta__glow{left:50%;top:10%;translate:-50% 0;width:75%;height:52%}

  .foot{padding:54px 20px 34px}
  .foot__links{gap:18px 22px;font-size:14px}
  .foot__moons{width:100%;max-width:330px;height:180px}
}

@media (max-width:420px){
  .wall__grid{inset:-60px -200px;--cw:112px;--ch:200px;--cgap:14px}
}