/* Deep Breez site. One stylesheet for the landing page and the three text pages. */
/* The site wears one buddy colour at a time. These tokens are registered so they can cross-fade; script.js switches data-theme on <html> every 20 seconds. */
@property --brand{syntax:'<color>';inherits:true;initial-value:#3969F7}
@property --brand-hi{syntax:'<color>';inherits:true;initial-value:#7698FF}
@property --brand-lo{syntax:'<color>';inherits:true;initial-value:#1E3BB8}
@property --brand-deep{syntax:'<color>';inherits:true;initial-value:#2A4FD0}
@property --on-brand{syntax:'<color>';inherits:true;initial-value:#FFFFFF}
@property --wash{syntax:'<color>';inherits:true;initial-value:#EEF2FF}
@property --glow{syntax:'<color>';inherits:true;initial-value:rgba(57,105,247,.45)}
@property --night{syntax:'<color>';inherits:true;initial-value:#0A1030}
@property --b-hi{syntax:'<color>';inherits:true;initial-value:#DCE6FF}
@property --b-mid{syntax:'<color>';inherits:true;initial-value:#5C86FF}
@property --b-lo{syntax:'<color>';inherits:true;initial-value:#2F56E0}
@property --b-deep{syntax:'<color>';inherits:true;initial-value:#1B2F9C}
@property --b-cheek{syntax:'<color>';inherits:true;initial-value:#FF7FA8}
:root[data-theme=sol]{--brand:#FF7A26;--brand-hi:#FFA35C;--brand-lo:#EC5F12;--brand-deep:#B8400A;--on-brand:#4A1405;--wash:#FFF0E4;--glow:rgba(255,122,38,.45);--night:#220D03;--b-hi:#FFE9D2;--b-mid:#FF9A4A;--b-lo:#F0641A;--b-deep:#A83A08;--b-cheek:#FF5F6D}
:root[data-theme=sage]{--brand:#0FD69C;--brand-hi:#5CEBC0;--brand-lo:#0DB583;--brand-deep:#087652;--on-brand:#04352B;--wash:#E2F9F0;--glow:rgba(15,214,156,.42);--night:#03231A;--b-hi:#D9FFF0;--b-mid:#3DDCA4;--b-lo:#0FA873;--b-deep:#087652;--b-cheek:#C8FFE9}
:root[data-theme=luna]{--brand:#8652F6;--brand-hi:#AE88FF;--brand-lo:#5A2DD0;--brand-deep:#6D3FE6;--on-brand:#FFFFFF;--wash:#F1EAFF;--glow:rgba(134,82,246,.45);--night:#150B33;--b-hi:#F0E6FF;--b-mid:#A985FF;--b-lo:#7446E8;--b-deep:#4A27AD;--b-cheek:#FF8FD6}
:root.theme-anim{transition:--brand 1.2s cubic-bezier(.45,0,.2,1),--brand-hi 1.2s cubic-bezier(.45,0,.2,1),--brand-lo 1.2s cubic-bezier(.45,0,.2,1),--brand-deep 1.2s cubic-bezier(.45,0,.2,1),--on-brand 1.2s cubic-bezier(.45,0,.2,1),--wash 1.2s cubic-bezier(.45,0,.2,1),--glow 1.2s cubic-bezier(.45,0,.2,1),--night 1.2s cubic-bezier(.45,0,.2,1),--b-hi 1.2s cubic-bezier(.45,0,.2,1),--b-mid 1.2s cubic-bezier(.45,0,.2,1),--b-lo 1.2s cubic-bezier(.45,0,.2,1),--b-deep 1.2s cubic-bezier(.45,0,.2,1),--b-cheek 1.2s cubic-bezier(.45,0,.2,1)}
:root{
  --bg:#FCFCFC; --ink:#0B0B0D; --muted:#6B6B73; --faint:#B4B4BA; --line:rgba(0,0,0,.08); --soft:#F1F1F3;
  --brand:#3969F7; --brand-hi:#7698FF; --brand-lo:#1E3BB8; --brand-deep:#2A4FD0; --on-brand:#FFFFFF; --wash:#EEF2FF; --glow:rgba(57,105,247,.45); --night:#0A1030; --b-hi:#DCE6FF; --b-mid:#5C86FF; --b-lo:#2F56E0; --b-deep:#1B2F9C; --b-cheek:#FF7FA8;
  --orange:#FF7A2F; --green:#12B981; --purple:#8B5CF6; --amber:#F5A524; --navy:#0A1030;
  --r-hero:36px; --r-card:28px; --r-tile:24px;
  --gut:clamp(16px,6vw,88px);
  --font:"Onest","Inter Tight","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.08);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:12px}
.sprite{position:absolute}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}
.wrap{width:min(1440px,100% - 2*var(--gut));margin-inline:auto}
.block{margin-top:clamp(48px,6.4vw,88px)}
.title{font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.5px;margin-bottom:16px}
.anchor-top{position:absolute;top:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:45px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-.2px;white-space:nowrap;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-brand{background:var(--brand);color:var(--on-brand);box-shadow:0 6px 18px var(--glow)}
.btn-brand:hover{box-shadow:0 10px 26px var(--glow)}
.btn-white{background:#fff;color:var(--ink);transition:transform .25s var(--ease),background-color .2s}
.btn-white:hover{background:var(--wash)}
.btn-sm{height:38px;padding:0 16px;font-size:13.5px}
.btn-store{height:54px;padding:0 26px 0 22px;font-size:16px}
.btn .ic{width:20px;height:20px}

/* the buddy ball, drawn in CSS */
.ball{color:var(--b-cheek);
  position:relative;display:block;aspect-ratio:1;border-radius:50%;flex:none;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 9%,rgba(255,255,255,0) 24%),radial-gradient(circle at 36% 30%,var(--b-hi) 0,var(--b-mid) 40%,var(--b-lo) 76%,var(--b-deep) 100%);
  box-shadow:inset -.06em -.08em .22em rgba(0,0,30,.28),0 .12em .5em var(--glow)}
.ball>svg{position:absolute;inset:0;width:100%;height:100%}
.b-breez{--b-cheek:#FF7FA8;--b-hi:#DCE6FF;--b-mid:#5C86FF;--b-lo:#2F56E0;--b-deep:#1B2F9C;--glow:rgba(57,105,247,.45)}
.b-sol{--b-cheek:#FF5F6D;--b-hi:#FFE9D2;--b-mid:#FF9A4A;--b-lo:#F0641A;--b-deep:#B8400A;--glow:rgba(255,122,47,.45)}
.b-sage{--b-cheek:#C8FFE9;--b-hi:#D9FFF0;--b-mid:#3DDCA4;--b-lo:#0FA873;--b-deep:#087652;--glow:rgba(18,185,129,.45)}
.b-luna{--b-cheek:#FF8FD6;--b-hi:#F0E6FF;--b-mid:#A985FF;--b-lo:#7446E8;--b-deep:#4A27AD;--glow:rgba(139,92,246,.45)}
.ball-xs{width:22px;font-size:22px}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:0;pointer-events:none}
.top>*{pointer-events:auto}
.brand{position:absolute;left:16px;top:18px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.6px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 24px rgba(0,0,0,.08)}
.brand-static,.doc-top .brand{position:static;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.logo{border-radius:28%;box-shadow:0 2px 8px rgba(42,79,208,.25)}
.brand .logo{width:40px;height:40px}
.bar{position:absolute;left:50%;top:14px;transform:translateX(-50%);height:64px;border-radius:32px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 30px rgba(0,0,0,.10);display:flex;align-items:center;gap:6px;padding:0 10px 0 14px;white-space:nowrap}
.bar-logo{display:none;align-items:center;gap:9px;font-weight:800;letter-spacing:-.5px;font-size:17px;margin-right:auto}
.bar-logo .logo{width:36px;height:36px}
.bar-links{display:flex;gap:2px}
.bar-links a{display:block;padding:10px 16px;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:-.2px;color:#2A2A2E;transition:background-color .2s,color .2s}
.bar-links a:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.bar-cta{margin-left:8px}

/* left rail */
.rail{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 24px rgba(0,0,0,.10)}
.rail a{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#8A8A92;transition:background-color .2s,color .2s,transform .25s var(--ease)}
.rail a .ic{width:20px;height:20px}
.rail a:hover{background:var(--soft);color:var(--ink);transform:scale(1.06)}
.rail a.is-on{background:var(--ink);color:#fff}
.tip{position:absolute;left:52px;top:50%;transform:translate(-6px,-50%);background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:6px 10px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .2s var(--ease)}
.rail a:hover .tip,.rail a:focus-visible .tip{opacity:1;transform:translate(0,-50%)}
@media (min-width:1180px){.rail{display:flex}}

/* hero carousel */
.hero{position:relative;margin-top:98px;height:clamp(460px,40vw,620px);border-radius:var(--r-hero);overflow:hidden;isolation:isolate;background:var(--night);box-shadow:0 20px 50px -20px color-mix(in srgb,var(--night) 45%,transparent)}
.slides,.slide{position:absolute;inset:0}
.slide{opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s;color:#fff}
.slide.is-on{opacity:1;visibility:visible;transition:opacity .7s var(--ease)}
.slide{background:radial-gradient(90% 120% at 82% 20%,var(--brand-hi) 0,var(--brand) 30%,var(--b-deep) 62%,var(--night) 100%)}
.s-2{background:radial-gradient(100% 130% at 64% 0,var(--brand-hi) 0,var(--brand) 28%,var(--b-deep) 60%,var(--night) 100%)}
.s-3{background:radial-gradient(90% 120% at 96% 60%,var(--brand-hi) 0,var(--brand) 30%,var(--b-deep) 62%,var(--night) 100%)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(75deg,rgba(0,0,10,.5) 0,rgba(0,0,10,0) 55%);pointer-events:none;z-index:1}
.slide-art{position:absolute;inset:0;z-index:0}
.phone{position:absolute;width:clamp(200px,21vw,300px);border-radius:clamp(26px,2.6vw,38px);box-shadow:0 0 0 clamp(4px,.45vw,6px) #0C0C10,0 0 0 clamp(5px,.55vw,7.5px) rgba(255,255,255,.18),0 40px 80px -10px rgba(0,0,20,.6);transition:transform 1.1s var(--ease)}
.p-front{right:8%;top:11%;transform:rotate(6deg) translateY(40px)}
.p-back{right:calc(8% + clamp(170px,18.5vw,265px));top:22%;transform:rotate(-7deg) translateY(60px)}
.slide.is-on .p-front{transform:rotate(6deg)}
.slide.is-on .p-back{transform:rotate(-7deg)}
.hero:hover .slide.is-on .p-front{transform:rotate(5deg) translateY(-8px)}
.hero:hover .slide.is-on .p-back{transform:rotate(-8deg) translateY(-4px)}
.slide-copy{position:absolute;left:clamp(22px,3.2vw,40px);bottom:clamp(64px,5.4vw,76px);z-index:2;max-width:min(660px,52%)}
.slide-copy h1,.slide-copy h2{font-size:clamp(34px,5.1vw,78px);line-height:1;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.slide-copy p{margin-top:14px;font-size:clamp(16px,1.25vw,18px);line-height:1.4;color:rgba(255,255,255,.9);max-width:440px}
.slide-cta{margin-top:20px}
.slide>*{transition:transform .9s var(--ease)}
.hero-ui{position:absolute;z-index:3;left:clamp(22px,3.2vw,40px);right:clamp(16px,2vw,24px);bottom:clamp(18px,2vw,26px);display:flex;align-items:center;gap:8px}
.dots{display:flex;align-items:center;gap:2px;margin-right:auto}
.dot{width:24px;height:28px;display:grid;place-items:center}
.dot::before{content:"";width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.45);transition:width .35s var(--ease),background-color .25s}
.dot.is-on::before{width:22px;background:#fff}
.dot:hover::before{background:#fff}
.hero-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .2s,transform .25s var(--ease)}
.hero-btn:hover{background:rgba(255,255,255,.3);transform:scale(1.06)}
.hero-btn .ic{width:20px;height:20px}
.hero :focus-visible{outline-color:#fff}

/* breathing ball */
.breath{position:absolute;left:38%;top:6%;width:clamp(88px,8.6vw,126px);aspect-ratio:1;display:grid;place-items:center}
.breath-ring{position:absolute;inset:-18%;border-radius:50%;border:3px solid rgba(255,255,255,.75);box-shadow:0 0 40px var(--brand-hi),inset 0 0 30px color-mix(in srgb,var(--brand-hi) 50%,transparent);animation:ring 8s ease-in-out infinite}
.ball-hero{width:100%;font-size:clamp(88px,8.6vw,126px);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.9)}50%{transform:scale(1.04)}}
@keyframes ring{0%,100%{transform:scale(.86);opacity:.45}50%{transform:scale(1.06);opacity:1}}

.tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:-.1px}
.tag-dark{background:rgba(11,11,13,.62);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* the four colour dots in the top bar: pick one to keep it, pick it again to let the colours move on */
@property --tp{syntax:'<angle>';inherits:false;initial-value:360deg}
.tdots{display:flex;align-items:center;margin-left:6px}
.tdot{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.tdot .ball{width:14px;font-size:14px;transition:transform .35s var(--ease)}
.tdot:hover .ball{transform:scale(1.22)}
.tdot.is-on .ball{transform:scale(1.12)}
.tdot.is-on::before{content:"";position:absolute;inset:2px;border-radius:50%;background:conic-gradient(var(--ink) var(--tp),rgba(0,0,0,.13) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 1.6px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 1.6px))}
.theme-run .tdot.is-on::before{animation:tp 20s linear both}
@keyframes tp{from{--tp:0deg}to{--tp:360deg}}

/* same moment, better habit */
.swap-head{margin-bottom:clamp(18px,2.2vw,28px)}
.swap-head h2{font-size:clamp(34px,4.6vw,64px);line-height:1;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.swap-head p{margin-top:12px;font-size:clamp(16px,1.3vw,18px);color:#4A4A52;max-width:46ch}
.swaps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.swap{border-radius:var(--r-card);background:var(--wash);padding:22px 22px 24px;display:grid;justify-items:start;align-content:start;gap:10px}
.swap-old{font-size:17px;font-weight:500;letter-spacing:-.2px;color:#5E5E66;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(0,0,0,.4)}
.swap-arrow{width:20px;height:20px;color:var(--brand-deep);stroke-width:2.4}
.swap-new{display:flex;align-items:center;gap:12px;font-size:clamp(21px,2.1vw,29px);line-height:1.08;font-weight:800;letter-spacing:-.8px;text-wrap:balance}
.swap-ic{flex:none;width:46px;height:46px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;box-shadow:0 6px 16px var(--glow)}

/* craving help: the dark stage and the curved carousel */
.stage{position:relative;isolation:isolate;border-radius:var(--r-hero);overflow:hidden;color:#fff;background:#05060B;padding:clamp(30px,3.6vw,52px) 0 clamp(20px,2.2vw,28px);scroll-margin-top:96px}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(46% 50% at 50% 60%,color-mix(in srgb,var(--brand) 44%,transparent) 0,transparent 72%),radial-gradient(120% 70% at 50% 118%,color-mix(in srgb,var(--b-deep) 60%,transparent) 0,transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--night) 80%,#05060B) 0,#05060B 100%)}
.stage-head{text-align:center;padding:0 20px}
.stage-head h2{font-size:clamp(30px,3.6vw,52px);line-height:1.02;font-weight:800;letter-spacing:-.035em}
.stage-head p{margin-top:10px;font-size:clamp(15px,1.25vw,17px);color:rgba(255,255,255,.74)}
.stage :focus-visible{outline-color:#fff}
.flow{--cw:clamp(232px,21.5vw,300px);--ch:calc(var(--cw)*1.76);margin-top:clamp(14px,1.8vw,24px)}
.flow-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px 24px 34px;scroll-padding-inline:24px}
.flow-track::-webkit-scrollbar{display:none}
.fcard{position:relative;flex:0 0 var(--cw);height:var(--ch);scroll-snap-align:center;border-radius:var(--r-card);outline:0;scroll-margin-top:150px}
.fcard-in{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;color:var(--on-brand);background:linear-gradient(168deg,var(--brand) 0,var(--brand) 34%,var(--brand-lo) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.35);transition:box-shadow .5s var(--ease)}
.fcard:focus-visible .fcard-in{outline:3px solid #fff;outline-offset:3px}
.fcard-top{position:relative;z-index:1;padding:18px 20px 0}
.fcard h3{margin-top:12px;font-size:clamp(24px,2.1vw,28px);line-height:1.05;font-weight:800;letter-spacing:-.8px}
.fcard p{margin-top:6px;font-size:14.5px;line-height:1.35}
.fphone{position:absolute;left:50%;top:150px;width:76%;aspect-ratio:600/1304;transform:translateX(-50%);border-radius:calc(var(--cw)*.105);overflow:hidden;background:#000;box-shadow:0 0 0 5px #0C0C10,0 0 0 6px rgba(255,255,255,.24),0 30px 50px -10px rgba(0,0,0,.55)}
.fphone img{color:transparent}
.fphone img,.fphone video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.fphone video{opacity:0;transition:opacity .5s ease;pointer-events:none}
.fcard.is-playing video{opacity:1}
.fcard-in::after{content:"";position:absolute;inset:0;z-index:3;background:#05060B;opacity:var(--dim,0);pointer-events:none;will-change:opacity}
.fcard .tag-dark{-webkit-backdrop-filter:none;backdrop-filter:none}
.flow.is-3d .flow-track{contain:layout style;display:block;position:relative;height:calc(var(--ch) + 64px);overflow:visible;padding:0;perspective:1500px;perspective-origin:50% 44%;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.flow.is-3d .flow-track.is-drag{cursor:grabbing}
.flow.is-3d .flow-track::after{content:"";position:absolute;left:50%;bottom:6px;width:calc(var(--cw)*1.5);height:54px;margin-left:calc(var(--cw)*-.75);border-radius:50%;background:var(--brand);filter:blur(30px);opacity:.55;pointer-events:none}
.flow.is-3d .fcard{position:absolute;left:50%;top:20px;margin-left:calc(var(--cw)/-2);width:var(--cw);will-change:transform,opacity;backface-visibility:hidden}
.flow.is-3d .fcard img{-webkit-user-drag:none;pointer-events:none}
.flow.is-3d .fcard.is-mid .fcard-in{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 30px 60px -26px rgba(0,0,0,.8)}
.flow.is-3d .fcard:not(.is-mid){cursor:pointer}
.flow{position:relative}
.flow.is-3d::before,.flow.is-3d::after{content:"";position:absolute;z-index:2;top:0;bottom:60px;width:clamp(20px,5%,64px);pointer-events:none}
.flow.is-3d::before{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--night) 55%,#05060B) 0,transparent 100%)}
.flow.is-3d::after{right:0;background:linear-gradient(270deg,color-mix(in srgb,var(--night) 55%,#05060B) 0,transparent 100%)}
.flow-ui{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px}
.flow-btn{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);transition:background-color .2s,transform .25s var(--ease)}
.flow-btn:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.flow-btn:active{transform:scale(.94)}
.flow-btn .ic{width:20px;height:20px}
.flow-names{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.09)}
.flow-names button{height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.2px;color:rgba(255,255,255,.72);transition:background-color .3s,color .3s}
.flow-names button:hover{color:#fff}
.flow-names button.is-on{background:#fff;color:var(--ink)}
html:not(.js) .flow-ui{display:none}

/* day by day: tall picture cards with a frosted panel */
.days-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:8px}
.days-head .title{margin:0}
.days-head p{font-size:14px;color:var(--muted)}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding-top:22px}
.day{position:relative;isolation:isolate;transition:transform .7s var(--ease)}
.day::before{content:"";position:absolute;z-index:-1;left:9%;right:9%;bottom:-16px;height:64px;border-radius:50%;background:var(--g);filter:blur(26px);opacity:0;transition:opacity .7s var(--ease)}
.day.is-focus{transform:translateY(-16px)}
.day.is-focus::before{opacity:.85}
.day-in{position:relative;isolation:isolate;aspect-ratio:9/17;border-radius:var(--r-card);overflow:hidden;color:#fff;background:color-mix(in srgb,var(--g) 40%,#101014)}
.day-in>img{color:transparent;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(var(--zoom,1));transform-origin:50% var(--from,50%);transition:scale 1.4s var(--ease)}
.day.is-focus .day-in>img{scale:1.045}
.day-glass{position:absolute;inset:auto 0 0 0;z-index:1;display:grid;justify-items:start;padding:56px 18px 18px;background:linear-gradient(180deg,rgba(12,12,16,0) 0,color-mix(in srgb,var(--g) 26%,rgba(12,12,16,.9)) 100%)}
.day-glass::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--g) 18%,rgba(14,14,18,.5));-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.day-glass::before{background:color-mix(in srgb,var(--g) 24%,rgba(14,14,18,.9))}}
.day h3{font-size:clamp(20px,1.75vw,24px);line-height:1.05;font-weight:800;letter-spacing:-.6px}
.day-sub{margin-top:6px;min-height:2.7em;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.86)}
.day-nums{margin-top:10px;font-size:13px;line-height:1.3;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.day-nums b{font-size:15px;font-weight:700;color:#fff}
.day-nums i{font-style:normal;opacity:.55;margin:0 1px}
.day-btn{margin-top:14px;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.2px;transition:transform .25s var(--ease),box-shadow .25s}
.day-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.3)}
.day-btn:focus-visible{outline-color:#fff}
.days-note{margin-top:26px;font-size:14px;color:var(--muted)}
@media (max-width:1099px){
  .days{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:22px var(--gut) 44px;margin:0 calc(-1*var(--gut)) -30px;scroll-padding-inline:var(--gut)}
  .days::-webkit-scrollbar{display:none}
  .day{flex:0 0 min(70vw,264px);scroll-snap-align:center}
}

/* rows that scroll sideways, with arrow buttons */
.row{position:relative}
.row-btn{position:absolute;top:50%;z-index:3;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.18);transition:transform .25s var(--ease),opacity .2s}
.row-btn:hover{transform:scale(1.1)}
.row-btn .ic{width:20px;height:20px}
.row-btn[hidden]{display:none}
.row-next{right:-14px}.row-prev{left:-14px}
@media (hover:none){.row-btn{display:none}}

/* tiles: one rendered object each, breaking out of the frame */
.tiles{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:44px var(--gut) 34px;margin:-14px calc(-1*var(--gut)) -34px;scroll-padding-inline:var(--gut)}
.tiles::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 clamp(200px,17.2vw,243px);scroll-snap-align:start;height:clamp(196px,16.4vw,236px);border-radius:var(--r-tile);color:#fff;padding:16px 18px;display:flex;align-items:flex-end;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 30px -14px rgba(0,0,0,.35)}
.tile>span{position:relative;z-index:2;font-size:clamp(16px,1.36vw,19px);font-weight:600;letter-spacing:-.5px;line-height:1.12}
.tile-obj{position:absolute;z-index:1;left:0;right:0;margin-inline:auto;top:-13%;height:88%;width:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 16px 14px rgba(0,0,0,.3));transition:transform .55s var(--ease);transform-origin:60% 70%}
.tile:hover .tile-obj{transform:translateY(-8px) rotate(-4deg) scale(1.06)}
.t-blue{background:#3969F7}.t-coral{background:#FF6A5C}.t-ink{background:#232327}.t-amber{background:#FFB32E}.t-green{background:#1FC98D}
.t-coral,.t-amber,.t-green,.t-sky,.t-rose,.t-teal{color:var(--ink)}
.t-sky{background:#4FA3FF}.t-violet{background:#7C4DF0}.t-navy{background:#101B55}.t-rose{background:#FF6FA5}.t-teal{background:#1CC8B8}

/* health timeline */
.health{margin-top:clamp(28px,3.4vw,44px);scroll-margin-top:110px;border-radius:var(--r-hero);background:var(--wash);padding:clamp(22px,3vw,40px);overflow:hidden}
.health-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.health-head h3{font-size:clamp(26px,3vw,40px);line-height:1.04;font-weight:800;letter-spacing:-1px}
.health-head p{font-size:15px;color:var(--muted)}
.health-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(22px,2.6vw,34px);padding-top:30px}
.health-steps::before,.health-steps::after{content:"";position:absolute;left:7px;right:0;top:6px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--brand) 18%,transparent)}
.health-steps::after{background:var(--brand);transform-origin:0 50%}
.health-steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.health-steps li::before{content:"";z-index:1;position:absolute;left:0;top:-31px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 5px var(--brand),0 2px 8px var(--glow)}
.h-when{display:flex;align-items:baseline;gap:.1em;font-size:clamp(44px,5.6vw,84px);line-height:.95;font-weight:800;letter-spacing:-.045em;color:var(--brand-deep);white-space:nowrap}
.h-when small{font-size:.3em;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.health-steps p{margin-top:12px;font-size:16.5px;line-height:1.35;font-weight:500;letter-spacing:-.2px;max-width:26ch}
.h-src{margin-top:auto;display:inline-flex;align-items:center;min-height:28px;padding:5px 12px;line-height:1.25;border-radius:999px;background:#fff;font-size:12.5px;font-weight:700;color:var(--brand-deep);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 16%,transparent)}
.health-steps p+.h-src{margin-top:14px}
.health-steps li{height:100%}
.health-steps p{flex:1}
.js .health.rv-h .health-steps::after{transform:scaleX(0)}
.js .health.rv-h li{opacity:0;transform:translateY(14px)}
.js .health.is-in .health-steps::after{transform:none;transition:transform 1.6s var(--ease)}
.js .health.is-in li{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .health.is-in li:nth-child(2){transition-delay:.3s}.js .health.is-in li:nth-child(3){transition-delay:.6s}.js .health.is-in li:nth-child(4){transition-delay:.9s}

/* marquee */
.marquee{--mf:clamp(72px,11vw,168px);position:relative;margin-top:clamp(20px,3.4vw,44px);overflow:hidden;padding:calc(var(--mf)*.5) 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track span{font-size:var(--mf);line-height:1.05;font-weight:800;letter-spacing:-.045em;color:#C4C4C9;padding:0 calc(var(--mf)*.26);transition:color .35s}
.marquee-track span.is-mid{color:var(--ink)}
.marquee-ball{position:absolute;left:50%;top:calc(var(--mf)*.2);width:calc(var(--mf)*.54);margin:0 0 0 calc(var(--mf)*.8);animation:bob 5s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(-16%) rotate(-8deg)}50%{transform:translateY(6%) rotate(8deg)}}
html:not(.js) .marquee-track{justify-content:center;width:100%;flex-wrap:wrap}

/* statement */
.statement{text-align:center;padding:clamp(72px,10vw,140px) var(--gut) clamp(24px,4vw,56px)}
.statement h2{font-size:clamp(42px,7.6vw,112px);line-height:1;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
.statement p{margin-top:22px;font-size:clamp(16px,1.5vw,19px);color:var(--muted)}
.st-ball{display:inline-block;width:.86em;height:.86em;vertical-align:-.1em;margin:0 .02em}
.st-ball .ball{width:100%;animation:bob2 6s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translateY(4%) rotate(-10deg)}50%{transform:translateY(-10%) rotate(10deg)}}

/* plans: the app's paywall */
.ticks{margin-top:22px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;font-weight:500;letter-spacing:-.2px;line-height:1.3}
.ticks .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:#fff;color:#0B0B0D;stroke-width:3;margin-top:-1px}
.pay{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(24px,5vw,80px);align-items:center;border-radius:var(--r-hero);padding:clamp(22px,3.6vw,52px);color:#fff;background:#07080F}
.pay::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 78% 0,color-mix(in srgb,var(--brand) 60%,transparent) 0,color-mix(in srgb,var(--b-deep) 30%,transparent) 42%,rgba(7,8,15,0) 72%),radial-gradient(50% 60% at 0 100%,color-mix(in srgb,var(--brand) 20%,transparent) 0,rgba(7,8,15,0) 70%)}
.pay-free h3{margin-top:16px;font-size:clamp(28px,3.2vw,44px);line-height:1.04;font-weight:800;letter-spacing:-1.2px;max-width:14ch}
.pay-note{margin-top:22px;font-size:15px;font-weight:600;color:rgba(255,255,255,.72)}
.pay-wall{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.pay-glow{position:absolute;left:50%;top:-10px;width:260px;height:200px;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-hi) 55%,transparent),transparent);pointer-events:none;z-index:-1}
.pay-ball{width:clamp(96px,9vw,128px);animation:breathe 8s ease-in-out infinite}
.pay-wall h3{margin-top:18px;font-size:clamp(24px,2.3vw,30px);line-height:1.1;font-weight:800;letter-spacing:-.8px}
.pay-sub{margin-top:8px;font-size:15px;color:rgba(255,255,255,.66)}
.medals{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;margin-top:22px}
.medal{width:100%;display:grid;justify-items:center;gap:8px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.55);border-radius:18px;padding:4px 0;transition:color .3s}
.medal svg{width:min(72px,78%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));opacity:.8;transform:scale(.9);transition:transform .45s var(--ease),opacity .3s,filter .3s}
.medal.is-on{color:#fff;font-weight:600}
.medal.is-on svg{opacity:1;transform:scale(1.06);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--brand-hi) 75%,transparent)) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.medal:hover svg{transform:scale(1.02) rotate(-4deg)}
.medal-line{margin-top:14px;min-height:1.4em;font-size:15.5px;font-weight:500;letter-spacing:-.2px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:26px}
.opt{position:relative;text-align:left;display:grid;gap:3px;padding:16px 16px 14px;border-radius:22px;background:#15161C;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);transition:background-color .25s,box-shadow .25s,transform .25s var(--ease)}
.opt:hover{transform:translateY(-2px)}
.opt.is-on{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 34%,#0C0D16),color-mix(in srgb,var(--brand) 12%,#0C0D16));box-shadow:inset 0 0 0 2px var(--brand-hi)}
.opt-name{font-size:15px;font-weight:500;color:rgba(255,255,255,.72)}
.opt b{font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.4px;white-space:nowrap}
.opt small{font-size:13px;color:rgba(255,255,255,.6)}
.opt-tick{position:absolute;right:13px;top:13px;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);display:grid;place-items:center}
.opt-tick .ic{width:13px;height:13px;stroke-width:3.4;opacity:0}
.opt.is-on .opt-tick{background:var(--brand);color:var(--on-brand);box-shadow:none}
.opt.is-on .opt-tick .ic{opacity:1}
.opt-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);height:22px;padding:0 10px;border-radius:999px;background:#34D399;color:#04241A;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;white-space:nowrap}
.pay-cta{width:100%;height:58px;margin-top:16px;font-size:17px}
.pay-terms{margin-top:12px;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.62)}
.pay :focus-visible{outline-color:#fff}

/* widgets: two drawn phones */
.wide{--acc:var(--brand);--acc-hi:var(--brand-hi);--acc-lo:var(--brand-lo);--on:var(--on-brand);--wall:color-mix(in srgb,var(--brand) 55%,#3A3550);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:24px;border-radius:var(--r-hero);padding:clamp(24px,3vw,40px);overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 16%,#fff) 0,color-mix(in srgb,var(--acc) 30%,#fff) 100%)}
.wide .tag-dark{background:var(--ink)}
.wide h3{margin-top:14px;font-size:clamp(30px,3.4vw,46px);line-height:1.02;font-weight:800;letter-spacing:-1.2px}
.wide p{margin-top:12px;font-size:16px;color:#3A3A44;max-width:40ch}
.pick{display:flex;align-items:center;gap:8px;margin-top:22px}
.pick-b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:transform .3s var(--ease),box-shadow .25s,background-color .25s}
.pick-b .ball{width:30px}
.pick-b:hover{transform:scale(1.1)}
.pick-b.is-on{background:#fff;box-shadow:0 0 0 2px var(--ink)}
.pick-name{margin-left:6px;font-size:14.5px;font-weight:500;color:#3A3A44}
.pick-name b{font-weight:700;color:var(--ink)}
.wide .wide-note{margin-top:14px;font-size:13.5px;color:#4A4A55}
.devs{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2.4vw,34px);padding:10px 0 6px}
.dev{flex:0 0 auto;width:clamp(200px,19.5vw,280px);aspect-ratio:603/1311;border-radius:14.5% / 6.7%;background:#0B0B0F;padding:1.9%;box-shadow:0 0 0 1.5px rgba(255,255,255,.35),0 40px 60px -20px rgba(10,16,48,.55);container-type:inline-size;animation:float 7s ease-in-out infinite}
.dev-lock{margin-top:clamp(24px,3vw,44px);animation-delay:-3.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.dev-in{position:relative;height:100%;border-radius:13% / 6%;overflow:hidden;font-size:4cqw;color:#fff;padding:14% 5.5% 0;
  background:radial-gradient(90% 45% at 12% 18%,color-mix(in srgb,var(--wall) 55%,#F2D9B8) 0,transparent 70%),radial-gradient(110% 50% at 100% 55%,color-mix(in srgb,var(--wall) 80%,#000) 0,transparent 70%),linear-gradient(165deg,color-mix(in srgb,var(--wall) 45%,#2A2530) 0,#121018 100%)}
.island{position:absolute;left:50%;top:1.6%;width:31%;height:3.8%;margin-left:-15.5%;border-radius:99px;background:#000}
.sb{position:absolute;left:11%;right:10%;top:2.1%;height:3%;display:flex;align-items:center;justify-content:space-between;font-size:1.05em;font-weight:600}
.sb span{display:flex;gap:.3em;align-items:center}
.sb span i{width:.5em;height:.5em;border-radius:50%;background:#fff}.sb span i:last-child{width:1.5em;border-radius:.2em}
.wg{border-radius:1.9em;box-shadow:0 .6em 1.6em -.4em rgba(0,0,0,.5)}
.wlabel{display:block;text-align:center;font-size:.86em;font-weight:500;margin:.35em 0 .9em;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.wbar{display:block;height:.34em;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden}
.wbar i{display:block;height:100%;width:52%;border-radius:9px;background:var(--acc-hi);transition:width 1s linear}
.wg-days{display:grid;grid-template-columns:.9fr 1.1fr;gap:.7em;padding:1.1em 1em 1em 1.2em;background:linear-gradient(125deg,color-mix(in srgb,var(--acc) 34%,#0C0D13) 0,#0C0D13 58%)}
.wd-l{display:flex;flex-direction:column}
.wd-num{font-size:2.9em;font-weight:700;letter-spacing:-.04em;line-height:1}
.wd-l span{font-size:.92em;color:rgba(255,255,255,.72);margin-top:.2em}
.wd-l .wbar{margin-top:auto}
.wd-l small{font-size:.7em;font-weight:600;margin-top:.5em;white-space:nowrap}
.wd-r{display:grid;gap:.42em;font-size:.88em;color:rgba(255,255,255,.68);white-space:nowrap}
.wd-r>span{display:flex;align-items:center;gap:.45em}
.wd-r b{color:#fff;font-weight:700}
.wd-ic{width:1.5em;height:1.5em;border-radius:50%;background:color-mix(in srgb,var(--acc) 30%,transparent);box-shadow:inset 0 0 0 .32em color-mix(in srgb,var(--acc) 30%,transparent),inset 0 0 0 1em var(--acc-hi);flex:none}
.wd-r em{font-style:normal;margin-top:.3em;height:2.4em;border-radius:99px;background:var(--acc);color:var(--on);display:flex;align-items:center;justify-content:center;gap:.4em;font-weight:600}
.wd-r em .ic{width:1.3em;height:1.3em}
.hs-row{display:grid;grid-template-columns:1fr 1fr;gap:6%}
.wg-crave{aspect-ratio:1;padding:1.1em;display:flex;flex-direction:column;color:var(--on);background:linear-gradient(165deg,var(--acc),var(--acc-lo));animation:nudge 3.2s var(--ease) infinite}
@keyframes nudge{0%,70%,100%{scale:1}80%{scale:1.05}90%{scale:.99}}
.wg-crave .ic{width:2.6em;height:2.6em;stroke-width:1.7}
.wg-crave b{margin-top:auto;font-size:1.3em;font-weight:700;letter-spacing:-.03em}
.wg-crave span{font-size:.92em;opacity:.9}
.apps{display:grid;grid-template-columns:1fr 1fr;gap:16% 14%;align-content:start;padding:2% 2% 0}
.apps i,.dock i{display:block;aspect-ratio:1;border-radius:26%;background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.apps i:nth-child(2){background:linear-gradient(160deg,rgba(20,20,26,.75),rgba(20,20,26,.5))}
.apps i:nth-child(3){background:linear-gradient(160deg,color-mix(in srgb,var(--acc-hi) 70%,#fff),color-mix(in srgb,var(--acc) 60%,transparent))}
.apps-4{grid-template-columns:repeat(4,1fr);gap:0 7%;margin-top:7%;padding:0 3%}
.apps-4 i:nth-child(n){background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.14))}
.apps-4 i:nth-child(2){background:linear-gradient(160deg,color-mix(in srgb,var(--acc-hi) 55%,#fff),color-mix(in srgb,var(--acc) 45%,transparent))}
.dock{position:absolute;left:5%;right:5%;bottom:2.4%;display:grid;grid-template-columns:repeat(4,1fr);gap:7%;padding:4% 5%;border-radius:2.2em;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lk-date{text-align:center;font-size:1.25em;font-weight:600;color:rgba(255,255,255,.85);margin-top:4%}
.lk-time{text-align:center;font-size:6em;font-weight:700;letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.88)}
.lk-wg{display:flex;align-items:center;gap:.8em;margin-top:.9em;padding:0 .3em}
.lk-ring{position:relative;width:3.4em;height:3.4em;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14)}
.lk-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke:rgba(255,255,255,.25);stroke-width:4}
.lk-arc{stroke:#fff!important;stroke-linecap:round;stroke-dasharray:68 100}
.lk-ring b{font-size:1.15em;font-weight:700}
.lk-wg>div{flex:1;display:grid;gap:.25em}
.lk-wg>div b{font-size:1.5em;font-weight:700;letter-spacing:-.03em;line-height:1}
.lk-wg>div b small{font-size:.6em;font-weight:600;letter-spacing:0}
.lk-wg .wbar i{background:#fff;width:68%}
.lk-wg>div span{font-size:.86em;color:rgba(255,255,255,.85)}
.la{position:absolute;left:4%;right:4%;bottom:7%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5em .8em;padding:1em 1.1em 1.1em;border-radius:1.9em;background:rgba(10,10,14,.92);box-shadow:0 .8em 2em -.4em rgba(0,0,0,.6)}
.la-ic{position:relative;width:2.9em;height:2.9em;border-radius:50%;background:color-mix(in srgb,var(--acc) 26%,#0B0B10);color:var(--acc-hi);display:grid;place-items:center}
.la-ic>span{grid-area:1/1;display:grid;transition:opacity .4s,transform .4s var(--ease)}
.la-ic .ic{width:1.6em;height:1.6em}
.la-walk{opacity:0;transform:scale(.6)}
.la.is-walk .la-walk{opacity:1;transform:none}.la.is-walk .la-wind{opacity:0;transform:scale(.6)}
.la small{display:block;font-size:.72em;letter-spacing:.09em;color:rgba(255,255,255,.6);font-weight:600}
.la b{font-size:1.05em;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.la strong{font-size:1.9em;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.la-bar{grid-column:1/-1}
.la-bar i{width:8%}
.lk-home{position:absolute;left:50%;bottom:1.6%;width:36%;height:.42em;margin-left:-18%;border-radius:9px;background:rgba(255,255,255,.85)}
/* animated icons: wind blows, the walker steps */
.wind path{stroke-dasharray:1;animation:blow 2.6s ease-in-out infinite}
.wind path:nth-child(2){animation-delay:.18s}.wind path:nth-child(3){animation-delay:.36s}
@keyframes blow{0%{stroke-dashoffset:1}40%,62%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.walker .leg,.walker .arm{transform-box:view-box;animation:swing .9s ease-in-out infinite alternate}
.walker .leg{transform-origin:12.3px 14.2px}.walker .arm{transform-origin:12.3px 8.6px}
.walker .l1,.walker .a2{--sw:26deg}.walker .l2,.walker .a1{--sw:-26deg}
@keyframes swing{from{transform:rotate(var(--sw))}to{transform:rotate(calc(-1*var(--sw)))}}
.walker{animation:bobw .45s ease-in-out infinite alternate}
@keyframes bobw{from{transform:translateY(0)}to{transform:translateY(-4%)}}

/* buddies */
.buddies{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.buddy{width:100%;border-radius:var(--r-card);padding:clamp(22px,3vw,36px) 16px 20px;display:grid;justify-items:center;gap:18px;transition:transform .45s var(--ease),box-shadow .35s}
.buddy.is-on{box-shadow:inset 0 0 0 3px var(--brand)}
.buddy b{font-size:22px;font-weight:800;letter-spacing:-.6px}
.buddy:hover{transform:translateY(-6px)}
.buddy .ball{width:min(62%,150px);transition:transform .6s var(--ease)}
.buddy:hover .ball{transform:scale(1.08) rotate(-6deg)}
.u-breez{background:#E4EBFF}.u-sol{background:#FFE9D9}.u-sage{background:#D8F7EA}.u-luna{background:#ECE4FF}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 48px;align-items:start}
.faq-head{position:sticky;top:110px}
.faq-head h2{font-size:clamp(34px,4.4vw,60px);line-height:1;font-weight:800;letter-spacing:-1.5px}
.faq-head p{margin-top:16px;color:var(--muted);max-width:30ch}
.faq-head a{color:var(--brand-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq-list{display:grid;gap:8px}
.faq details{background:#fff;border-radius:24px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s,background-color .25s}
.faq details:hover{box-shadow:0 0 0 1px rgba(0,0,0,.14),0 8px 22px -10px rgba(0,0,0,.15)}
.faq details[open]{background:var(--wash);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-size:18px;font-weight:600;letter-spacing:-.4px;cursor:pointer;border-radius:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:22px;height:22px;transition:transform .35s var(--ease);color:var(--muted)}
.faq details[open] summary .ic{transform:rotate(45deg);color:var(--brand-deep)}
.faq details p{padding:0 22px 22px;max-width:68ch;color:#3A3A44}
.faq details a{color:var(--brand-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* closing banner */
.closing{position:relative;border-radius:var(--r-hero);overflow:hidden;min-height:clamp(320px,30vw,400px);color:#fff;background:radial-gradient(90% 130% at 80% 30%,var(--brand-hi) 0,var(--brand) 30%,var(--b-deep) 64%,var(--night) 100%);display:flex;align-items:flex-end;padding:clamp(24px,3.2vw,44px)}
.closing h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;font-weight:800;letter-spacing:-1.5px;max-width:13ch}
.closing p{margin:12px 0 22px;font-size:16px;color:#fff}
.closing-copy{position:relative;z-index:1}
.closing::before{content:"";position:absolute;inset:0;background:linear-gradient(75deg,rgba(0,0,10,.66) 0,rgba(0,0,10,.42) 38%,rgba(0,0,10,0) 66%);pointer-events:none}
.closing .breath{left:auto;right:14%;top:50%;margin-top:calc(-.5*clamp(120px,15vw,210px));width:clamp(120px,15vw,210px)}
.closing :focus-visible{outline-color:#fff}

/* footer */
.foot{margin-top:clamp(56px,7vw,96px);padding:40px 0 150px;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:start}
.foot-brand p{margin-top:14px;max-width:44ch;color:var(--muted);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px}
.foot-links a{padding:10px 14px;border-radius:999px;font-weight:600;font-size:15px;transition:background-color .2s}
.foot-links a:hover{background:var(--soft)}
.foot-fine{grid-column:1/-1;font-size:13px;color:var(--muted)}

/* floating get-the-app card */
.getcard{position:fixed;right:20px;bottom:20px;z-index:45;display:none;gap:14px;align-items:center;width:376px;padding:14px 16px 14px 14px;border-radius:24px;background:#111114;color:#fff;box-shadow:0 20px 50px -12px rgba(0,0,0,.5);transition:transform .5s var(--ease),opacity .3s}
.getcard.is-off{transform:translateY(24px);opacity:0;pointer-events:none;visibility:hidden}
.qr{width:104px;height:104px;border-radius:14px;background:#fff;padding:8px;flex:none}
.qr svg{width:100%;height:100%}
.getcard-copy{display:grid;gap:4px;justify-items:start;padding-right:14px}
.getcard-copy b{font-size:16px;font-weight:700;letter-spacing:-.3px}
.getcard-copy span{font-size:13px;line-height:1.3;color:rgba(255,255,255,.72);margin-bottom:6px}
.getcard-x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.7)}
.getcard-x:hover{background:rgba(255,255,255,.14);color:#fff}
.getcard-x .ic{width:16px;height:16px}
.getcard :focus-visible{outline-color:#fff}
@media (min-width:1100px){.getcard{display:flex}}

/* floating bottom bar, mobile */
.tabbar{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;display:flex;gap:2px;padding:6px;border-radius:999px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.18)}
.tabbar a{width:60px;height:50px;border-radius:999px;display:grid;place-items:center;align-content:center;gap:1px;font-size:10.5px;font-weight:600;color:#6B6B73;transition:background-color .2s,color .2s}
.tabbar a .ic{width:21px;height:21px}
.tabbar a.is-on{background:var(--soft);color:var(--ink)}
.tabbar .tabbar-get{background:var(--brand);color:var(--on-brand)}
@media (min-width:900px){.tabbar{display:none}}

/* looping animations rest while their section is off screen (script.js sets .is-away) */
.is-away,.is-away *,.is-away *::before,.is-away *::after{animation-play-state:paused!important}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero .slide-art .breath{display:none}
  .p-front{right:4%}
  .p-back{right:calc(4% + clamp(150px,15vw,200px))}
  .slide-copy{max-width:44%}
}
@media (max-width:1100px){
  .brand-name{display:none}
  .brand{padding:8px}
  .brand-static{padding:0}
}
@media (max-width:899px){
  html{scroll-padding-top:90px}
  .brand{display:none}
  .bar{left:12px;right:12px;transform:none;top:10px;height:58px;border-radius:29px;padding:0 8px 0 10px}
  .bar-logo{display:flex}
  .bar-links{display:none}
  .bar-cta{height:42px;padding:0 18px}
  .hero{height:auto;aspect-ratio:auto;min-height:600px;border-radius:30px;margin-top:80px}
  .slide::after{background:linear-gradient(0deg,rgba(2,4,20,.96) 0,rgba(2,4,20,.9) 36%,rgba(2,4,20,.42) 50%,rgba(2,4,20,0) 64%)}

  .slide,.s-2,.s-3{background:radial-gradient(120% 70% at 60% 16%,var(--brand-hi) 0,var(--brand) 34%,var(--b-deep) 66%,var(--night) 100%)}
  .phone{width:176px;border-radius:26px}
  .p-front{right:50%;margin-right:-160px;top:28px}
  .p-back{right:50%;margin-right:-6px;top:58px}

  .slide-copy{max-width:none;right:22px;bottom:70px}
  .hero{min-height:640px}
  .slide-copy h1,.slide-copy h2{font-size:clamp(34px,9.6vw,46px);letter-spacing:-1.2px}
  .hero-pause,.hero-prev,.hero-next{width:36px;height:36px}
  .tiles{gap:10px}
  .tile{flex-basis:min(44vw,190px);height:178px;padding:13px 14px}
  .tile>span{font-size:15px}
  .tile-obj{height:84%;top:-12%}
  .pay{grid-template-columns:1fr;padding:26px 18px 24px}
  .pay-wall{order:-1}
  .pay-free{padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
  .pay::before{background:radial-gradient(120% 46% at 50% 0,color-mix(in srgb,var(--brand) 60%,transparent) 0,color-mix(in srgb,var(--b-deep) 30%,transparent) 45%,rgba(7,8,15,0) 80%)}
  .health{padding-inline:0}
  .health-head{padding-inline:22px}
  .health-steps{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:30px 22px 4px;scroll-padding-inline:22px}
  .health-steps::-webkit-scrollbar{display:none}
  .health-steps::before,.health-steps::after{display:none}
  .health-steps li{flex:0 0 min(72vw,280px);height:auto;scroll-snap-align:start}
  .health-steps li::after{content:"";position:absolute;left:0;right:-14px;top:-24px;height:4px;background:var(--brand)}
  .health-steps li:last-child::after{right:0;border-radius:0 4px 4px 0}
  .h-when{font-size:52px}
  .devs{gap:10px}
  .dev-lock{margin-top:34px}
  .dev{flex:0 1 auto;width:calc(50% - 5px);max-width:230px}
  .pick{gap:4px}
  .pick-name{font-size:13.5px}
  .faq{grid-template-columns:1fr}
  .faq-head{position:static}
  .wide{grid-template-columns:1fr}
  .buddies{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px var(--gut) 8px;margin:-8px calc(-1*var(--gut));scroll-padding-inline:var(--gut)}
  .buddies::-webkit-scrollbar{display:none}
  .buddies>li{flex:0 0 min(58vw,240px);scroll-snap-align:start}
  .closing{min-height:440px}
  .closing::before{background:linear-gradient(0deg,rgba(2,4,20,.9) 0,rgba(2,4,20,.8) 40%,rgba(2,4,20,0) 70%)}
  .closing .breath{right:50%;top:36px;margin:0 -65px 0 0;width:130px}
  .foot{padding-bottom:120px}
  .marquee{--mf:clamp(72px,21vw,150px)}
  .foot-in{grid-template-columns:1fr}
  .foot-links{margin-left:-14px}
  .tdots{margin-left:8px}
  .tdot{width:24px;height:24px}
  .bar-logo{gap:8px}
  .bar-logo span{font-size:16px}
  .bar-cta{margin-left:6px;padding:0 13px}
  .swaps{grid-template-columns:1fr;gap:10px}
  .swap{padding:18px 18px 20px}
  .stage{border-radius:30px}
  .flow{--cw:min(66vw,264px);--ch:calc(var(--cw)*1.92)}
  .flow-btn{display:none}
  .row-btn{display:none}
  .flow-names button{padding:0 11px;font-size:13.5px}
  .pick{flex-wrap:wrap}
  .pick-name{flex-basis:100%;margin:4px 0 0 4px}
  .days-head{display:block}
  .days-head p{margin-top:4px}
}
@media (min-width:600px) and (max-width:899px){
  .tile{flex-basis:210px;height:220px;padding:18px}
  .tile>span{font-size:18px}
}
@media (max-width:399px){
  .bar-logo span{display:none}
}
@media (max-width:420px){
  .flow-ui{padding:0 8px}
  .flow-names{padding:3px;gap:0}
  .flow-names button{padding:0 clamp(6px,2.4vw,10px);font-size:13px}
  .opt{padding:14px 12px 12px}
  .opt b{font-size:16px}
  .medal{font-size:12.5px}
  .faq summary{font-size:16.5px;padding:18px}
  .faq details p{padding:0 18px 18px}
  .bar-logo span{font-size:16px}
}

/* ---------- text pages: privacy, terms, support ---------- */
.doc-top{width:min(1280px,100% - 2*var(--gut));margin:14px auto 0;height:64px;border-radius:32px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 30px rgba(0,0,0,.08);display:flex;align-items:center;gap:6px;padding:0 10px 0 14px;position:sticky;top:14px;z-index:20}
.doc-top .brand{display:flex;position:static;margin-right:auto;font-size:17px}
.doc-top .brand .logo{width:36px;height:36px}
.doc-top nav{display:flex;gap:2px}
.doc-top nav a{padding:10px 14px;border-radius:999px;font-weight:500;font-size:15px;color:#2A2A2E}
.doc-top nav a:hover{background:rgba(0,0,0,.06)}
.doc-top nav a[aria-current]{background:var(--soft);font-weight:600;color:var(--ink)}
.doc{width:min(800px,100% - 2*var(--gut));margin:0 auto;padding:48px 0 40px;font-size:17px;line-height:1.62}
.doc h1{font-size:clamp(40px,7vw,68px);line-height:1;font-weight:800;letter-spacing:-.04em;margin:20px 0 20px}
.doc h2{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.7px;margin:56px 0 12px;scroll-margin-top:100px}
.doc h3{font-size:18px;font-weight:600;letter-spacing:-.4px;margin:32px 0 8px}
.doc p,.doc li{color:#3A3A44}
.doc p{margin:0 0 16px}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.doc ul{list-style:disc;margin:0 0 18px;padding-left:22px}
.doc ol{margin:0 0 18px}
.doc li{margin:0 0 8px}
.doc li::marker{color:var(--faint)}
.doc code{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft);padding:2px 6px;border-radius:6px}
.doc .toc{background:#F4F6FF;border-radius:28px;padding:22px 24px;margin:28px 0 8px}
.doc .toc p{font-size:18px;font-weight:600;letter-spacing:-.5px;color:var(--ink);margin:0 0 10px}
.doc .toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:28px}
.doc .toc li{margin:0;break-inside:avoid}
.doc .toc a{display:block;padding:6px 0;color:#3A3A44;text-decoration:none;font-size:15px}
.doc .toc a:hover{color:var(--brand-deep)}
.doc .tw{overflow-x:auto;margin:6px 0 22px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.doc table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--line);color:#3A3A44}
.doc th{color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{color:var(--ink);min-width:130px}
.doc mark.ph{background:#FFF1C9;color:#7A4B00;border-radius:6px;padding:1px 5px;font-weight:600}
.doc .cards-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}
.doc .box{border-radius:28px;padding:24px;background:#F4F6FF}
.doc .box h2{margin:0 0 8px;font-size:22px}
.doc .box p:last-child{margin:0}
.doc .box-dark{background:radial-gradient(110% 90% at 100% 0,#3969F7 0,#1B2F9C 45%,#0A1030 90%)}
.doc .box-dark h2,.doc .box-dark p,.doc .box-dark strong{color:#fff}
.doc .box-dark a{color:#fff}
.doc-foot{padding-bottom:56px}
@media (max-width:640px){
  .doc-top{top:10px;height:58px;border-radius:29px}
  .doc-top .brand-name{display:none}
  .doc-top nav a{padding:9px 11px;font-size:14.5px}
  .doc .toc ol{columns:1}
  .doc .cards-2{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .tile:hover,.buddy:hover,.btn:hover,.opt:hover,.day.is-focus{transform:none}
  .wind path{stroke-dashoffset:0}
  .tdot.is-on::before{background:var(--ink)}
}

/* ---------- hero story (three.js phone, HTML screen) ---------- */
.story{position:relative;height:clamp(600px,47vw,740px);border-radius:var(--r-hero);overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(80% 110% at 72% 46%,var(--brand-hi) 0,var(--brand) 26%,var(--brand-deep) 58%,var(--night) 100%);
  box-shadow:0 20px 50px -20px rgba(10,16,48,.45)}
.story::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(80deg,rgba(0,0,10,.62) 0,rgba(0,0,10,.3) 45%,rgba(0,0,10,0) 68%)}
.st-halo{position:absolute;left:70%;top:50%;width:min(60vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0));opacity:0;transition:opacity 1.6s var(--ease) .9s}
.is-live .st-halo{opacity:1}
.st-gl,.st-dom{position:absolute;inset:0;width:100%;height:100%}
.st-dom{overflow:hidden;pointer-events:none}
.st-cam{position:absolute;left:0;top:0;transform-style:preserve-3d}
/* the phone's screen: real HTML, placed on the 3D phone every frame */
.scr{position:absolute;left:0;top:0;width:390px;height:826px;border-radius:56px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#06070D;color:#fff;font:400 16px/1.3 var(--font);opacity:0;transition:opacity 1s var(--ease)}
.is-awake .scr{opacity:1}
.scr::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 46% at 50% 0,color-mix(in srgb,var(--brand) 55%,transparent) 0,transparent 100%);opacity:.9}
.scr-bar{position:absolute;z-index:5;left:0;right:0;top:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 34px 0;font-weight:600;font-size:16px}
.scr-bar i{position:absolute;left:50%;top:13px;width:118px;height:34px;margin-left:-59px;border-radius:99px;background:#000}
.scr-bar span{display:flex;gap:5px;align-items:center}
.scr-bar span b{width:7px;height:7px;border-radius:50%;background:#fff}.scr-bar span b:last-child{width:24px;height:11px;border-radius:4px}
.scr-glare{position:absolute;z-index:6;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 48%,rgba(255,255,255,0) 62%);transform:translateX(-120%)}
.is-awake .scr-glare{transition:transform 1.5s var(--ease) .2s;transform:translateX(120%)}
/* scenes: one per part of the story. The old one lifts away, the new one rises in, pieces one after another */
.sc{position:absolute;inset:54px 0 0;padding:14px 24px 0;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(46px) scale(.97);transition:opacity .55s var(--ease),transform .8s var(--ease);pointer-events:none}
.sc.is-on{opacity:1;transform:none;transition-delay:.28s}
.sc.is-out{opacity:0;transform:translateY(-46px) scale(.97)}
.sc .in{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.sc.is-on .in{opacity:1;transform:none;transition-delay:calc(var(--i,0)*110ms + 480ms)}
.sc h4{margin:0;font-size:26px;line-height:1.12;font-weight:800;letter-spacing:-.6px;text-align:center}
.sc h4 em{font-style:normal;color:var(--brand-hi)}
.sc small{font-size:13.5px;color:rgba(255,255,255,.62)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:99px;background:var(--brand);color:var(--on-brand,#fff);font-weight:700;font-size:17px;box-shadow:0 10px 30px -8px var(--glow)}
.pill .ic{width:20px;height:20px}
/* 1 craving: Breez breathes */
.s-crave .orb{position:relative;width:200px;height:200px;margin:44px 0 30px;display:grid;place-items:center}
.s-crave .orb i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--brand-hi);box-shadow:0 0 34px var(--glow),inset 0 0 26px var(--glow);animation:st-ring 6s ease-in-out infinite}
.s-crave .orb .ball{width:128px;animation:st-breath 6s ease-in-out infinite}
@keyframes st-breath{0%,100%{transform:scale(.82)}50%{transform:scale(1.1)}}
@keyframes st-ring{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.04);opacity:1}}
.s-crave .say{position:relative;height:34px;width:100%;font-size:25px;font-weight:700;letter-spacing:-.4px}
.s-crave .say span{position:absolute;inset:0;text-align:center;animation:st-say 6s ease-in-out infinite}
.s-crave .say span+span{animation-delay:-3s}
@keyframes st-say{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
.s-crave .helps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;margin-top:auto;margin-bottom:112px}
.s-crave .helps li{display:grid;justify-items:center;gap:7px;padding:12px 0 10px;border-radius:20px;background:rgba(255,255,255,.07);font-size:12.5px;font-weight:600}
.s-crave .helps i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 34%,transparent);color:var(--brand-hi)}
.s-crave .helps .ic{width:22px;height:22px}
/* 2 workout: the ring fills, the figure marches, the count runs */
.s-work .ringbox{position:relative;width:268px;height:268px;margin:26px 0 18px;display:grid;place-items:center}
.s-work .ringbox>svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:9;stroke-linecap:round}
.s-work .track{stroke:rgba(255,255,255,.1)}
.s-work .prog{stroke:var(--brand-hi);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s linear}
.s-work .ringbox::before{content:"";position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 44px 2px var(--glow)}
@keyframes st-fill{to{stroke-dashoffset:22}}
.s-work .coach{position:relative;width:226px;height:226px;border-radius:50%;overflow:hidden;background:#05060C}
.s-work .coach video{position:absolute;left:-67px;top:-222px;width:360px;max-width:none;height:auto}
.s-work .coach::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 30px 12px #06070D}
.s-work .count{font-size:92px;line-height:1;font-weight:800;letter-spacing:-3px;font-variant-numeric:tabular-nums}
.s-work .steps{display:flex;gap:6px;margin-top:16px}
.s-work .steps i{width:38px;height:5px;border-radius:5px;background:rgba(255,255,255,.18)}.s-work .steps i:first-child{background:var(--brand-hi)}
/* 3 talk: the messages arrive one after another */
.s-talk{align-items:stretch}
.s-talk .who{display:flex;align-items:center;gap:12px;margin:6px 0 34px}
.s-talk .who .ball{width:46px}
.s-talk .who b{display:block;font-size:19px}.s-talk .who small{display:block}
.s-talk p{margin:0 0 16px;font-size:20px;line-height:1.32;font-weight:500;letter-spacing:-.2px}
.s-talk .me{align-self:flex-end;margin:4px 0 20px;padding:13px 20px;border-radius:24px 24px 8px 24px;background:var(--brand);color:var(--on-brand,#fff);font-size:19px;font-weight:600}
.s-talk .dots{display:flex;gap:6px;height:20px;align-items:center;margin-bottom:14px}
.s-talk .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);animation:st-dot 1s ease-in-out infinite}
.s-talk .dots i:nth-child(2){animation-delay:.15s}.s-talk .dots i:nth-child(3){animation-delay:.3s}
@keyframes st-dot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
.s-talk.is-on .dots{animation:st-gone .3s 2.6s forwards}
@keyframes st-gone{to{opacity:0;height:0;margin:0}}
.s-talk .pill{align-self:flex-start}
/* 4 days and money */
.s-days .ball{width:118px;margin:26px 0 18px;animation:st-bob 5s ease-in-out infinite}
@keyframes st-bob{0%,100%{transform:translateY(-5%) rotate(-5deg)}50%{transform:translateY(5%) rotate(5deg)}}
.s-days .big{font-size:76px;line-height:1;font-weight:800;letter-spacing:-2.500px}
.s-days .big small{font-size:.5em;font-weight:800;letter-spacing:-1px;color:#fff}
.s-days .cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:30px}
.s-days .cd{border-radius:24px;padding:16px 18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.s-days .cd span{font-size:13.5px;font-weight:600;color:var(--brand-hi)}
.s-days .cd b{display:block;margin-top:6px;font-size:36px;font-weight:800;letter-spacing:-1px;line-height:1.05;font-variant-numeric:tabular-nums}
.s-days .cd-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.14);margin-top:14px;overflow:hidden}
.s-days .cd-bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--brand-hi);transition:width 1.6s var(--ease) 1.1s}
.s-days.is-on .cd-bar i{width:72%}
.s-days .wk{display:flex;gap:6px;margin-top:12px}
.s-days .wk i{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.14);transition:background-color .4s,transform .4s var(--ease)}
.s-days.is-on .wk i:nth-child(-n+4){background:var(--brand-hi);transform:scale(1.1)}
.s-days.is-on .wk i:nth-child(1){transition-delay:1.2s}.s-days.is-on .wk i:nth-child(2){transition-delay:1.35s}.s-days.is-on .wk i:nth-child(3){transition-delay:1.5s}.s-days.is-on .wk i:nth-child(4){transition-delay:1.65s}
/* 5 medals */
.s-medals{align-items:stretch}
.s-medals .mtop{display:flex;align-items:center;justify-content:space-between;margin:6px 0 20px}
.s-medals .mtop b{font-size:30px;font-weight:800;letter-spacing:-.8px}
.s-medals .mtop span{font-size:14px;font-weight:700;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.1)}
.s-medals .new{position:relative;display:grid;justify-items:center;gap:10px;padding:22px 0 20px;border-radius:28px;background:rgba(255,255,255,.06);overflow:hidden}
.s-medals .new svg{width:132px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
.s-medals.is-on .new svg{animation:st-pop 1s var(--ease) .6s both,st-turn 5s ease-in-out 1.6s infinite}
@keyframes st-pop{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.12) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes st-turn{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.s-medals .new::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-120%)}
.s-medals.is-on .new::after{animation:st-shine 1.3s var(--ease) 1.3s}
@keyframes st-shine{to{transform:translateX(120%)}}
.s-medals .new small{letter-spacing:.14em;font-weight:700;color:var(--brand-hi)}
.s-medals .new b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.s-medals .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;margin-top:20px}
.s-medals .grid svg{width:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));opacity:0;transform:scale(.4)}
.s-medals.is-on .grid svg{opacity:1;transform:none;transition:opacity .4s,transform .6s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--i)*70ms + 1.500s)}
/* words and controls */
.st-copy{position:absolute;z-index:4;left:clamp(22px,3.4vw,48px);bottom:clamp(86px,7.4vw,112px);width:min(600px,46%)}
.st-line{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.st-line.is-on{opacity:1;transform:none;pointer-events:auto;transition-delay:.3s}
.st-line h1,.st-line h2{font-size:clamp(34px,5vw,76px);line-height:1;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.st-line p{margin-top:14px;font-size:clamp(16px,1.25vw,18px);line-height:1.4;color:rgba(255,255,255,.92);max-width:430px}
.st-cta{position:absolute;z-index:4;left:clamp(22px,3.4vw,48px);bottom:clamp(22px,2.4vw,34px);display:flex;align-items:center;gap:18px}
.st-marks{display:flex;gap:6px;align-items:center}
.st-mark{width:34px;height:24px;display:grid;place-items:center}
.st-mark::before{content:"";width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--fill,0%),rgba(255,255,255,.34) var(--fill,0%))}
.st-pause{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.st-pause .ic{width:18px;height:18px}
.story :focus-visible{outline-color:#fff}
@media (max-width:899px){
  .story{height:auto;min-height:700px;border-radius:30px}
  .story::after{background:linear-gradient(0deg,rgba(2,4,20,.96) 0,rgba(2,4,20,.88) 28%,rgba(2,4,20,0) 52%)}
  .st-halo{left:50%;top:32%;width:120vw}
  .st-copy{width:auto;right:22px;bottom:92px}
  .st-line h1,.st-line h2{font-size:clamp(32px,9.4vw,44px)}
  .st-mark{width:24px}.st-cta{gap:12px}
}
.story{margin-top:98px}
@media (max-width:899px){.story{margin-top:80px}}
@media (prefers-reduced-motion:reduce){.sc .in{opacity:1;transform:none}}

/* ---------- widgets, large, no phones ---------- */
.wide{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.wstage{container-type:inline-size;align-self:stretch;display:grid;align-items:center}
.wstage-in{position:relative;font-size:2.55cqw;color:#fff;height:27.5em}
.wstage .wg,.wstage .la,.wstage .lk{position:absolute;transition:transform .5s var(--ease)}
.wstage .wg{box-shadow:0 1.6em 3em -1em rgba(10,16,48,.55),0 0 0 1px rgba(255,255,255,.08)}
.wstage .wg-days{left:0;top:1.5em;width:25em;border-radius:2.1em;transform:rotate(-3deg)}
.wstage .wg-crave{right:.5em;top:0;width:12.5em;border-radius:2.1em;transform:rotate(5deg)}
.wstage .lk{left:2em;top:14.5em;width:17em;padding:1em 1.2em;border-radius:1.8em;background:rgba(20,22,40,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:rotate(3deg);box-shadow:0 1.4em 2.6em -1em rgba(10,16,48,.5)}
.wstage .lk .lk-wg{margin:0;padding:0}
.wstage .la{left:auto;right:0;top:auto;bottom:0;width:23em;border-radius:2em;transform:rotate(-1.5deg)}
.wstage .wg-days:hover,.wstage .wg-crave:hover,.wstage .lk:hover,.wstage .la:hover{transform:rotate(0) translateY(-4px)}
@media (max-width:899px){
  .wide{grid-template-columns:1fr}
  .wstage-in{font-size:3.95cqw;height:31em;margin-top:1em}
  .wstage .wg-days{width:24em;top:0}
  .wstage .wg-crave{top:12.5em;right:0;width:9.6em}
  .wstage .wg-crave .ic{width:2em;height:2em}.wstage .wg-crave b{font-size:1.15em}
  .wstage .lk{top:13.5em;left:0;width:13.6em;padding:.8em .9em}
  .wstage .la{right:auto;left:.4em;bottom:0;width:23.4em}
}

/* ---------- same moment, better habit: a plain, large list ---------- */
.swap-box{max-width:860px;margin-inline:auto;padding:clamp(8px,2vw,28px) 0;text-align:center}
.swap-box h2{font-size:clamp(38px,5.6vw,84px);line-height:1;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
.swap-sub{margin-top:16px;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.3px;color:var(--muted)}
.swap-box .swaps{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,24px);margin:clamp(30px,4.4vw,60px) auto 0;width:fit-content;max-width:100%;text-align:left}
.swap-box .swap{display:flex;align-items:center;gap:16px;padding:0;background:none;border-radius:0;font-size:clamp(19px,2.3vw,30px);line-height:1.2;letter-spacing:-.035em;color:#7B7B86;font-weight:500}
.swap-box .swap b{color:var(--ink);font-weight:700}
.swap-box .swap-ic{width:clamp(34px,3.2vw,44px);height:clamp(34px,3.2vw,44px);border-radius:30%;background:linear-gradient(150deg,var(--brand-hi),var(--brand));color:var(--on-brand,#fff);box-shadow:0 8px 16px -6px var(--glow);transform:rotate(-6deg)}
.swap-box .swap:nth-child(even) .swap-ic{transform:rotate(6deg)}
.swap-box .swap-ic .ic{width:58%;height:58%;stroke-width:2.2}
.swap-cta{width:100%;height:clamp(58px,5.4vw,76px);margin-top:clamp(32px,4.6vw,64px);border-radius:22px;background:var(--ink);color:#fff;font-size:clamp(17px,1.6vw,22px)}
.swap-cta:hover{background:#26262C}
.js .swap-box.rv-s .swap{opacity:0;transform:translateY(16px)}
.js .swap-box.is-in .swap{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}

/* ---------- hero: glass phone, moving gradient stroke, bottom fade, rolling numbers ---------- */
@property --st-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.scr::after{content:"";position:absolute;z-index:7;inset:0;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--st-ang),rgba(255,255,255,0) 0deg,var(--brand-hi) 70deg,#fff 110deg,rgba(255,255,255,0) 180deg,rgba(255,255,255,.25) 250deg,var(--brand-hi) 300deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:st-stroke 7s linear infinite}
@keyframes st-stroke{to{--st-ang:360deg}}
/* a soft sheen across the glass, always there, very light */
.scr-glass{position:absolute;z-index:6;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.03) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06) 100%)}
/* the hero settles into a darker floor, so the phone sits in the scene and the words stay readable */
.st-floor{position:absolute;z-index:3;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--night) 82%,transparent) 0,color-mix(in srgb,var(--night) 40%,transparent) 45%,transparent 100%)}
/* numbers roll when they change */
.roll{display:inline-block;animation:st-roll .5s var(--ease)}
@keyframes st-roll{0%{transform:translateY(.45em);opacity:0;filter:blur(6px)}100%{transform:none;opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.scr::after{animation:none}.roll{animation:none}}

/* ---------- fixes after the independent review ---------- */
.brand-static{display:flex}
.brand-static .brand-name{display:inline}
/* no WebGL: the phone screen is shown flat, in the same place */
.story.is-flat .st-gl{display:none}
.story.is-flat .st-cam{transform:none!important;width:100%;height:100%}
.story.is-flat .scr{left:70%;top:50%;transform:translate(-50%,-50%) scale(.66) rotate(3deg);box-shadow:0 0 0 10px #0B0B0F,0 40px 80px -20px rgba(0,0,24,.7)}
@media (max-width:899px){
  .story{min-height:760px}
  .story.is-flat .scr{left:50%;top:30%;transform:translate(-50%,-50%) scale(.44)}
  /* the hero's button and marks clear the floating bottom bar, and the marks shrink to fit */
  .st-cta{right:22px;bottom:96px}
  .st-copy{bottom:166px}
  .st-marks{flex:1;min-width:0}
  .st-mark{flex:1;min-width:0;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .s-crave .say span+span{display:none}
  .s-talk .dots{display:none}
  .s-work .prog{stroke-dashoffset:22}
  .st-pause{display:none}
}

/* widgets section: no card behind it, the widgets sit straight on the page */
.wide[data-widgets]{background:none;padding-inline:0;border-radius:0;overflow:visible}

/* ---------- day by day: white cards on a soft grey band ---------- */
.aband{background:#F5F5F7;padding:clamp(48px,6vw,96px) 0}
.aband .days-note{margin-top:18px;color:var(--muted);font-size:15px}
.a-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3.4vw,48px)}
.a-head h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
.a-link{font-size:18px;font-weight:500;color:var(--brand-deep);white-space:nowrap;padding-bottom:8px}
.a-link:hover{text-decoration:underline;text-underline-offset:4px}
.acards{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px var(--gut) 24px;margin:-6px calc(-1*var(--gut)) -24px;scroll-padding-inline:var(--gut)}
.acards::-webkit-scrollbar{display:none}
.acards>li{flex:0 0 clamp(280px,27.5vw,372px);scroll-snap-align:start}
.acard{position:relative;height:clamp(460px,41vw,520px);border-radius:28px;background:#fff;padding:30px 30px 0;overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.acard:hover{transform:scale(1.012);box-shadow:0 18px 40px -18px rgba(0,0,0,.2)}
.ac-label{font-size:16px;font-weight:600;letter-spacing:-.2px}
.acard h3{margin-top:8px;font-size:clamp(24px,2.1vw,29px);line-height:1.12;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.ac-text{margin-top:12px;font-size:16.5px;line-height:1.35;color:#3A3A44;max-width:30ch}
.ac-vis{flex:1;min-height:0;display:grid;place-items:center;padding:6px 0 18px}
.ac-vis picture{display:contents}
.ac-obj{height:100%;max-height:260px;width:auto;object-fit:contain;transition:transform .7s var(--ease)}
.acard:hover .ac-obj{transform:translateY(-6px) rotate(-3deg) scale(1.04)}
.ac-go{position:absolute;right:22px;bottom:22px;width:38px;height:38px;border-radius:50%;background:#E8E8ED;color:#3A3A44;display:grid;place-items:center;transition:background-color .2s,transform .25s var(--ease)}
.ac-go:hover{background:#DDDDE3;transform:scale(1.08)}
.ac-go .ic{width:18px;height:18px;stroke-width:2.4}
/* two cards draw their own picture */
.ac-ui{color:var(--ink)}
.ac-goal{position:relative;width:min(220px,80%);aspect-ratio:1;display:grid;place-items:center;align-content:center}
.ac-goal svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke:#E8E8ED;stroke-width:10;stroke-linecap:round}
.ac-goal .arc{stroke:var(--brand);stroke-dasharray:58 100;transition:stroke .6s}
.ac-goal b{font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1}
.ac-goal span{font-size:14.5px;color:var(--muted);margin-top:4px}
.ac-body{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;padding-top:22px}
.ac-body::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brand) 0,var(--brand-hi) 100%)}
.ac-body i{position:relative;font-style:normal;font-size:13.5px;color:var(--muted);display:grid;gap:2px}
.ac-body i::before{content:"";position:absolute;left:0;top:-23px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4.5px var(--brand)}
.ac-body b{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.a-nav{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:26px}
.a-note{margin-right:auto;font-size:14.5px;color:var(--muted)}
.arow .row-btn{position:static;margin:0;width:40px;height:40px;background:#E8E8ED;box-shadow:none;color:#3A3A44}
.arow .row-btn[hidden]{display:grid;opacity:.4;pointer-events:none}
@media (hover:none){.arow .row-btn{display:grid}}
@media (max-width:899px){
  .a-head{flex-direction:column;align-items:flex-start;gap:8px}
  .acards{gap:12px}
  .acards>li{flex-basis:min(82vw,330px)}
  .acard{height:470px;padding:24px 24px 0}
  .arow .row-btn{display:grid}
}

/* ---------- words row: one object for the word in focus; it changes from below while the words move sideways ---------- */
.marquee{padding-top:calc(var(--mf)*1.15)}
.marquee-obj{position:absolute;left:50%;top:calc(var(--mf)*.08);width:calc(var(--mf)*1.1);height:calc(var(--mf)*1.1);margin-left:calc(var(--mf)*-.55);pointer-events:none;display:none}
.marquee.has-obj .marquee-obj{display:block}
.marquee.has-obj .marquee-ball{display:none}
.marquee-obj img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(55%) scale(.8) rotate(8deg);transition:opacity .45s var(--ease),transform .7s cubic-bezier(.3,1.3,.5,1);filter:drop-shadow(0 14px 16px rgba(0,0,0,.22))}
.marquee-obj img.is-on{opacity:1;transform:none}
.marquee-obj img.is-out{opacity:0;transform:translateY(-55%) scale(.8) rotate(-8deg);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.marquee-obj img.is-on{animation:mo-float 4s ease-in-out .7s infinite}
@keyframes mo-float{0%,100%{translate:0 0}50%{translate:0 -6%}}

/* ---------- hero: only the phone. The words stay in the page for search and screen readers ---------- */
.story .st-copy{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story .st-cta .btn,.story .st-marks{display:none}
.story .st-pause{position:absolute;left:0;bottom:0;opacity:0}
.story .st-pause:focus-visible{opacity:1}
.story::after{display:none}
.story .st-halo{left:50%}
.story .st-floor{height:26%}
.story.is-flat .scr{left:50%}
.story{cursor:pointer}
@media (max-width:899px){.story{min-height:600px}.story .st-halo{top:46%}}

/* ---------- same moment list: the icons move ---------- */
.swap-ic .ic{overflow:visible}
.sw-lift{animation:sw-lift 1.8s var(--ease) infinite}
@keyframes sw-lift{0%,100%{transform:translateY(8%) rotate(0)}45%,60%{transform:translateY(-12%) rotate(-10deg)}}
.sw-lotus .p1,.sw-lotus .p2,.sw-lotus .p3{transform-box:view-box;transform-origin:12px 14px;animation:sw-open 4s ease-in-out infinite}
.sw-lotus .p2{--r:-10deg}.sw-lotus .p3{--r:10deg}
@keyframes sw-open{0%,100%{transform:scale(.86) rotate(0)}50%{transform:scale(1.06) rotate(var(--r,0deg))}}
.sw-talk .d{fill:currentColor;stroke:none;animation:sw-dot 1.2s ease-in-out infinite}
.sw-talk .d:nth-of-type(2){animation-delay:.16s}.sw-talk .d:nth-of-type(3){animation-delay:.32s}
@keyframes sw-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-2.5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.marquee-obj img{transition:none}}

/* ---------- "When a craving hits": bento grid, one colour family, fragments only ---------- */
.bento-head{margin-bottom:clamp(18px,2.4vw,30px)}
.bento-head h2{font-size:clamp(34px,4.6vw,64px);line-height:1;font-weight:800;letter-spacing:-.04em}
.bento-head p{margin-top:12px;font-size:clamp(16px,1.3vw,18px);color:#4A4A52}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(220px,19vw,280px);gap:12px}
.cell{position:relative;border-radius:28px;overflow:hidden;isolation:isolate;color:#fff;padding:22px;display:flex;flex-direction:column;scroll-margin-top:110px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cell:hover{transform:translateY(-4px);box-shadow:0 26px 44px -18px rgba(10,16,48,.5)}
.cell:target{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--brand)}
.cell h3{margin-top:12px;font-size:clamp(26px,2.5vw,36px);line-height:1.02;font-weight:800;letter-spacing:-1px}
.cell p{margin-top:8px;font-size:15.5px;line-height:1.35;color:rgba(255,255,255,.9);max-width:22ch}
.cell .tag{align-self:flex-start}
.c-work{grid-column:span 5;grid-row:span 2;background:radial-gradient(120% 90% at 70% 60%,var(--brand-hi) 0,var(--brand) 34%,var(--brand-deep) 78%)}
.c-breathe{grid-column:span 4;background:linear-gradient(150deg,var(--brand-deep),color-mix(in srgb,var(--brand-deep) 55%,#05060F))}
.c-walk{grid-column:span 3;background:linear-gradient(160deg,var(--brand),var(--brand-deep))}
.c-med{grid-column:span 3;background:linear-gradient(160deg,color-mix(in srgb,var(--brand-deep) 70%,#05060F),#0A0D22)}
.c-talk{grid-column:span 4;background:#07080F}
.c-talk::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 90% at 100% 0,color-mix(in srgb,var(--brand) 45%,transparent),transparent 70%)}
/* text on the bright cells follows the theme's readable colour (dark on Sol and Sage) */
.c-work,.c-walk{color:var(--on-brand,#fff)}
.c-work p,.c-walk p{color:inherit;opacity:.9}
/* the fragment: a round crop of the app's own screen; its clip fades in over the same still */
.frag{position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;overflow:hidden;pointer-events:none;transition:transform .6s var(--ease)}
.cell:hover .frag{transform:scale(1.04)}
.frag img,.frag video{position:absolute;max-width:none;height:auto;width:var(--s);left:var(--x);top:var(--y)}
.frag video{opacity:0;transition:opacity .35s var(--ease)}
.frag.is-playing video{opacity:1}
.f-port{background:#05060F;box-shadow:0 0 0 6px rgba(255,255,255,.16),0 30px 60px -20px rgba(0,0,30,.6);--s:112%;--x:-6%;--y:-64.5%}
.f-glow{mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 98%);mask-image:radial-gradient(closest-side,#000 62%,transparent 98%)}
.c-work .frag{right:-7%;bottom:-22%;width:88%}
.c-walk .frag{right:-18%;bottom:-30%;width:88%}
.c-breathe .frag{right:-4%;top:50%;width:52%;margin-top:-26%;--s:150%;--x:-25%;--y:-99.4%}
.c-med .frag{right:-10%;bottom:-6%;width:74%;--s:210%;--x:-55%;--y:-140.7%}
/* talk: the reply arrives while you look at the cell */
.chat{margin-top:auto;display:grid;gap:10px}
.bub{justify-self:end;max-width:78%;padding:10px 14px;border-radius:18px 18px 6px 18px;background:var(--brand);color:var(--on-brand,#fff);font-size:15px;font-weight:500}
.rep{display:flex;gap:10px;align-items:flex-end;max-width:94%}
.rep .ball{width:34px}
.rep-text,.rep-dots{padding:10px 14px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.1);font-size:15px;line-height:1.35}
.rep-dots{display:none;gap:5px;align-items:center;height:41px}
.rep-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.7);animation:st-dot 1s ease-in-out infinite}
.rep-dots i:nth-child(2){animation-delay:.15s}.rep-dots i:nth-child(3){animation-delay:.3s}
.c-talk.is-typing .rep-dots{display:flex}.c-talk.is-typing .rep-text{display:none}
.c-talk .rep-text{animation:rep-in .5s var(--ease)}
@keyframes rep-in{from{opacity:0;transform:translateY(8px)}}
.c-talk p{max-width:30ch}
@media (max-width:1100px){.cell p{max-width:18ch}.c-talk p{max-width:26ch}}
@media (max-width:899px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .cell{min-height:210px;padding:18px}
  .c-work{grid-column:1/-1;grid-row:auto;min-height:340px}
  .c-breathe,.c-talk{grid-column:1/-1}
  .c-walk,.c-med{grid-column:span 1;min-height:250px}
  .cell h3{font-size:26px}
  .c-walk p,.c-med p{font-size:14px;max-width:14ch}
  .c-work .frag{width:84%}
  .c-walk .frag,.c-med .frag{width:96%;opacity:.92}
}
@media (prefers-reduced-motion:reduce){.frag video{display:none}.c-talk .rep-text{animation:none}}

/* ---------- health milestones: a small moving picture above each number ---------- */
.h-art{display:grid;place-items:center;width:clamp(84px,8vw,112px);height:clamp(56px,5.4vw,72px);margin-bottom:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(57,105,247,.1),0 10px 22px -14px var(--glow);color:var(--brand)}
.ha{height:62%;width:auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ha-walk{stroke-width:1.5;height:78%}
.ha-beat path{stroke-dasharray:100;stroke-dashoffset:100}
.health.is-in .ha-beat path,.health:not(.rv-h) .ha-beat path{animation:ha-beat 3.6s ease-in-out infinite}
@keyframes ha-beat{0%{stroke-dashoffset:100}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.ha-cup .st{animation:ha-steam 2.6s ease-in-out infinite;opacity:0}
.ha-cup .s2{animation-delay:.5s}.ha-cup .s3{animation-delay:1s}
@keyframes ha-steam{0%{opacity:0;transform:translateY(5px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-7px)}}
.ha-heart{fill:currentColor;stroke:none;transform-origin:50% 60%;animation:ha-pulse 1.5s ease-in-out infinite}
@keyframes ha-pulse{0%,100%{transform:scale(.86)}18%{transform:scale(1.06)}34%{transform:scale(.92)}50%{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.ha-beat path{stroke-dashoffset:0}.ha-cup .st{opacity:.8}}

/* ---------- day-by-day cards: each picture moves on hover ---------- */
.acard:hover .ac-goal .arc{animation:ac-fill 1.3s var(--ease) both}
@keyframes ac-fill{from{stroke-dasharray:0 100}to{stroke-dasharray:58 100}}
.acard:hover .ac-goal b{animation:ac-pop .6s var(--ease)}
@keyframes ac-pop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:none}}
.acard:hover .ac-obj[src*="obj-timer"]{animation:ac-tick 1.5s var(--ease) both}
@keyframes ac-tick{0%{transform:none}18%{transform:translateY(-10px) rotate(-9deg) scale(1.05)}38%{transform:translateY(-10px) rotate(7deg) scale(1.05)}58%{transform:translateY(-8px) rotate(-4deg) scale(1.05)}78%{transform:translateY(-6px) rotate(2deg) scale(1.04)}100%{transform:translateY(-6px) scale(1.04)}}
.acard:hover .ac-obj[src*="obj-coins"]{animation:ac-bounce 1.2s var(--ease) both}
@keyframes ac-bounce{0%{transform:none}25%{transform:translateY(-22px) rotate(-5deg) scale(1.05)}50%{transform:translateY(0) rotate(1deg) scale(1.02,.97)}70%{transform:translateY(-9px) rotate(-2deg) scale(1.04)}100%{transform:translateY(-4px) scale(1.04)}}
.ac-obj[src*="obj-medal"]{transform-origin:50% 10%}
.acard:hover .ac-obj[src*="obj-medal"]{animation:ac-swing 2s ease-in-out both}
@keyframes ac-swing{0%{transform:none}15%{transform:rotate(11deg)}35%{transform:rotate(-8deg)}55%{transform:rotate(5deg)}75%{transform:rotate(-2.5deg)}100%{transform:rotate(0) scale(1.03)}}
.acard:hover .ac-body::before{animation:ac-line 1.4s var(--ease) both;transform-origin:0 50%}
@keyframes ac-line{from{transform:scaleX(0)}to{transform:none}}
.acard:hover .ac-body i{animation:ac-step .5s var(--ease) both}
.acard:hover .ac-body i:nth-child(2){animation-delay:.25s}.acard:hover .ac-body i:nth-child(3){animation-delay:.5s}.acard:hover .ac-body i:nth-child(4){animation-delay:.75s}
@keyframes ac-step{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.acard:hover .ac-obj,.acard:hover .ac-goal .arc,.acard:hover .ac-goal b,.acard:hover .ac-body::before,.acard:hover .ac-body i{animation:none}}

/* a rendered animation sits exactly over the still while the card is hovered */
.ac-vis{position:relative}
.ac-sprite{position:absolute;background-size:600% 600%;background-repeat:no-repeat;opacity:0;pointer-events:none}
.acard.is-sprite .ac-sprite{opacity:1}
.acard.is-sprite .ac-obj{opacity:0;animation:none!important;transform:none!important}

/* ---------- quick-links rail: a horizontal pill fixed at the bottom centre (desktop and tablet; phones keep their bottom bar) ---------- */
.rail{left:50%;top:auto;bottom:20px;transform:translateX(-50%);flex-direction:row;gap:4px}
.rail a:hover{transform:scale(1.06)}
.rail .tip{left:50%;top:auto;bottom:52px;transform:translate(-50%,6px)}
.rail a:hover .tip,.rail a:focus-visible .tip{transform:translate(-50%,0)}
@media (min-width:900px){.rail{display:flex}}
@media (max-width:899px){.rail{display:none}}

/* ---------- logo follows the buddy colour ---------- */
.logo-d{fill:var(--brand);transition:fill .6s}
svg.logo{display:block}

/* ---------- top bar on desktop: logo and links in the left corner, colours and the button in the right corner ---------- */
@media (min-width:900px){
  .top{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 0}
  .brand{position:static;height:64px;border-radius:32px}
  .bar{position:static;transform:none;flex:1;height:64px;padding:0;gap:10px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .bar-links,.tdots{height:64px;align-items:center;border-radius:32px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 30px rgba(0,0,0,.10)}
  .bar-links{padding:0 10px}
  .tdots{margin-left:auto;padding:0 14px;gap:4px}
  .tdot{width:34px;height:34px}
  .tdot .ball{width:18px;font-size:18px}
  .bar-cta{margin-left:0;height:64px;padding:0 28px;border-radius:32px;font-size:16px}
}

/* ---------- brand: only the logo; the name rises in letter by letter on hover or focus ---------- */
.top .brand{gap:0;padding:8px}
.top .brand .brand-name{display:inline-flex;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .55s var(--ease),margin .55s var(--ease)}
.top .brand:hover .brand-name,.top .brand:focus-visible .brand-name{max-width:180px;margin:0 12px 0 10px}
.brand-name .ch{display:inline-block;white-space:pre;transform:translateY(115%);opacity:0;transition:transform .5s var(--ease),opacity .3s;transition-delay:0s}
.top .brand:hover .ch,.top .brand:focus-visible .ch{transform:none;opacity:1;transition-delay:calc(var(--i)*38ms + 120ms)}
@media (max-width:1100px){.top .brand .brand-name{display:inline-flex}}
@media (max-width:899px){.top .brand{display:none}}

/* ---------- first screen: the hero leaves room for "Same moment. Better habit." and its line ---------- */
.story{height:clamp(360px,calc(100svh - 440px),740px)}
#swap.block{margin-top:clamp(28px,3.4vw,52px)}
.swap-box{padding-top:0}
@media (max-width:899px){
  .story{height:clamp(340px,calc(100svh - 360px),600px);min-height:0}
}

/* words row: the object slot is always there; the ball fades out while an object shows */
.marquee-obj{display:block}
.marquee .marquee-ball{display:block;left:50%;margin-left:calc(var(--mf)*-.27);top:calc(var(--mf)*.36);transition:opacity .35s,scale .5s var(--ease)}
.marquee.has-obj .marquee-ball{display:block;opacity:0;scale:.5}

/* top bar links: a smaller pill with smaller type, in the left corner */
@media (min-width:900px){
  .brand,.bar-links,.tdots,.bar-cta,.bar{height:48px}
  .brand{padding:6px!important}.brand .logo{width:36px;height:36px}
  .bar-links{padding:0 6px;border-radius:24px}
  .bar-links a{font-size:13px;padding:7px 12px}
  .tdots{border-radius:24px;padding:0 10px}.tdot{width:30px;height:30px}.tdot .ball{width:16px;font-size:16px}
  .bar-cta{border-radius:24px;padding:0 20px;font-size:14px}
}

/* ---------- hero text above the phone: the app's value in one glance ---------- */
.hero-say{margin:clamp(84px,7vw,104px) auto 0;max-width:980px;text-align:center}
.hero-say h1{font-size:clamp(34px,5vw,72px);line-height:1;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.hero-say p{margin:14px auto 0;max-width:56ch;font-size:clamp(16px,1.5vw,20px);line-height:1.4;letter-spacing:-.2px;color:var(--muted);text-wrap:balance}
.story{margin-top:clamp(20px,2.4vw,32px);height:clamp(340px,calc(100svh - 360px),700px)}
@media (max-width:899px){.hero-say{margin-top:84px}.story{margin-top:20px;height:clamp(320px,calc(100svh - 420px),560px);min-height:0}}

/* ---------- hero headline: the habit word rotates (cigarette, vape, tobacco stick) ---------- */
.rot{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:nowrap;color:var(--brand);transition:width .5s var(--ease),color .6s;height:1.08em;line-height:1.08}
.rot-w{display:inline-block}
.rot-w.is-out{animation:rot-out .35s var(--ease) forwards}
.rot-w.is-in{animation:rot-in .5s var(--ease)}
@keyframes rot-out{to{transform:translateY(-70%);opacity:0;filter:blur(6px)}}
@keyframes rot-in{from{transform:translateY(70%);opacity:0;filter:blur(6px)}}

/* smoother word rotation: both words move together, one out, one in */
.rot{position:relative;height:1.12em;line-height:1.12;transition:width .9s cubic-bezier(.65,0,.2,1),color .6s;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.rot-w{position:absolute;left:0;top:0;animation:none!important;transition:transform .9s cubic-bezier(.65,0,.2,1),opacity .7s ease}
.rot-w.is-below{transform:translateY(100%);opacity:0}
.rot-w.is-above{transform:translateY(-100%);opacity:0}

/* rotating word: room for letters that hang below the line (p, g), no fade on them */
.rot{-webkit-mask-image:none;mask-image:none;height:1.3em;line-height:1.3;padding:0 .04em;margin:-.15em -.04em;vertical-align:baseline;top:.3em}
.rot-w{left:.04em}

/* ---------- "Same moment. Better habit." and the bento are one section: each cell names the moment it replaces ---------- */
.bento-head-big{text-align:center;margin-bottom:clamp(26px,3.6vw,48px)}
.bento-head-big h2{font-size:clamp(38px,5.6vw,84px);letter-spacing:-.045em}
.bento-head-big p{margin-top:16px;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.3px;color:var(--muted)}
#helps.block{margin-top:clamp(36px,4.4vw,64px)}
.cell .when{order:0;margin-top:14px;font-size:13.5px;font-weight:600;letter-spacing:-.1px;opacity:.82;max-width:none;color:inherit}
.cell .when+h3{margin-top:4px}
.bento-cta{display:flex;max-width:860px;margin-inline:auto}
@media (max-width:899px){.c-walk .when,.c-med .when{font-size:12.5px;max-width:13ch}}

/* ---------- fixes after the art-direction review ---------- */
.bento{grid-auto-rows:clamp(288px,20vw,300px)}
.cell .tag{flex:none}
.c-talk .tag-dark{background:rgba(255,255,255,.16)}
.c-walk .frag{width:64%;right:-12%;bottom:-30%}
.c-walk p:not(.when){max-width:15ch}
@media (max-width:1180px) and (min-width:900px){
  .bento .c-work,.bento .c-breathe,.bento .c-walk,.bento .c-med,.bento .c-talk{grid-column:span 4}
  .c-talk .bub{display:none}
}
@media (min-width:600px) and (max-width:899px){
  .c-work .frag{width:50%;bottom:-14%}
  .c-walk .frag{width:62%}
}
.ha-walk{width:44px;height:44px}
.ha-heart{width:30px;height:30px}
.h-src{background:none;box-shadow:none;padding:0;min-height:0;color:var(--muted);font-weight:500;font-size:13px}
.aband .health{background:#fff}
.aband .h-art{background:#F5F5F7;box-shadow:none}
.a-head h2{font-size:clamp(34px,4.6vw,64px);line-height:1;font-weight:800;letter-spacing:-.04em}
@media (min-width:1100px) and (max-width:1499px){.getcard{width:auto;padding:10px;gap:0}.getcard-copy{display:none}.qr{width:88px;height:88px}.getcard-x{right:-8px;top:-8px;background:#111114}}
.tabbar{transition:transform .45s var(--ease),opacity .3s}
.tabbar.is-rest{transform:translate(-50%,130%);opacity:0;pointer-events:none}
@media (max-width:899px){
  .ac-go{width:44px;height:44px;right:18px;bottom:18px}
  .a-link{padding:8px 0}
  .tdots{gap:6px}.tdot{width:26px;height:26px}
  .tdot::after{content:"";position:absolute;inset:-9px -3px}
  .story.is-flat .scr{top:50%;transform:translate(-50%,-50%) scale(.34)}
}
@media (prefers-reduced-motion:reduce){.walker .l1,.walker .a2{transform:rotate(22deg)}.walker .l2,.walker .a1{transform:rotate(-22deg)}}

/* ---------- bento, same quality as the hero: live drawn Breez, moving rings, clips that play while on screen ---------- */
.live{position:absolute;z-index:-1;display:grid;place-items:center;aspect-ratio:1;pointer-events:none}
.live .ball{width:62%;animation:st-breath 6s ease-in-out infinite}
.live i{position:absolute;inset:4%;border-radius:50%;border:3px solid var(--brand-hi);box-shadow:0 0 34px var(--glow),inset 0 0 26px var(--glow);animation:st-ring 6s ease-in-out infinite}
.live i+i{inset:-8%;border-width:1.5px;opacity:.35;animation-delay:-.6s;box-shadow:none}
.c-breathe .live{right:5%;top:50%;width:44%;translate:0 -50%}
.c-med .live{right:2%;bottom:-4%;width:52%}
.c-med .live .ball{animation:st-bob 7s ease-in-out infinite}
.c-med .live i{inset:auto -30% 6% -30%;height:2px;border:0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand-hi),transparent);box-shadow:0 0 18px var(--glow);animation:none}
.c-med .live i+i{display:none}
/* a ring of light travels round the workout and walk windows */
.f-port{box-shadow:0 30px 60px -20px rgba(0,0,30,.6);overflow:visible}
.f-port img,.f-port video{border-radius:0}
.f-port>.clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#05060F}
.f-port::before{content:"";position:absolute;inset:-7px;border-radius:50%;padding:7px;background:conic-gradient(from var(--st-ang),rgba(255,255,255,.14) 0deg,rgba(255,255,255,.14) 200deg,#fff 300deg,rgba(255,255,255,.14) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:st-stroke 5s linear infinite}
.cell{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.cell:hover{transform:translateY(-6px) scale(1.008)}
.cell h3,.cell p,.cell .tag{transition:transform .6s var(--ease)}
.cell:hover h3{transform:translateX(4px)}
/* cells arrive one after another */
.js .bento.rv-b .cell{opacity:0;transform:translateY(28px) scale(.97)}
.js .bento.is-in .cell{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
@media (max-width:899px){.c-breathe .live{width:40%}.c-med .live{width:86%;right:-8%;bottom:-8%}}
@media (prefers-reduced-motion:reduce){.live .ball,.live i,.f-port::before{animation:none}}

/* ---------- FAQ as a chat: each question is your bubble on the right; tap it and the answer arrives on the left ---------- */
.faq-list{gap:14px;padding:clamp(18px,2.4vw,30px);border-radius:var(--r-hero);background:#F5F5F7}
.faq details,.faq details:hover,.faq details[open]{background:none;box-shadow:none;border-radius:0;display:grid}
.faq summary{justify-self:end;max-width:86%;padding:13px 16px 13px 20px;border-radius:24px 24px 8px 24px;background:var(--brand);color:var(--on-brand,#fff);font-size:17px;gap:10px;box-shadow:0 8px 20px -10px var(--glow);transition:transform .3s var(--ease),background-color .6s,color .6s}
.faq summary:hover{transform:translateY(-2px)}
.faq summary .ic,.faq details[open] summary .ic{color:inherit;opacity:.8;width:18px;height:18px}
.faq details p{position:relative;justify-self:start;max-width:min(86%,62ch);margin:10px 0 4px 46px;padding:14px 18px;border-radius:8px 24px 24px 24px;background:#fff;color:#2A2A32;box-shadow:0 0 0 1px var(--line);animation:faq-in .5s var(--ease) both}
.faq details p::before{content:"";position:absolute;left:-46px;top:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 9%,rgba(255,255,255,0) 24%),radial-gradient(circle at 36% 30%,var(--b-hi,#DCE6FF) 0,var(--b-mid,#5C86FF) 40%,var(--b-lo,#2F56E0) 76%,var(--b-deep,#1B2F9C) 100%);box-shadow:0 4px 10px var(--glow);animation:faq-pop .5s var(--ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes faq-pop{from{opacity:0;transform:scale(.4)}}
.faq details p{transform-origin:0 0}
@media (max-width:899px){.faq-list{padding:14px}.faq summary{font-size:16px;max-width:92%}.faq details p{max-width:none;margin-left:42px}}
@media (prefers-reduced-motion:reduce){.faq details p,.faq details p::before{animation:none}}

/* ---------- FAQ: the heading takes the size of the big statement it replaced; the chat sits under it ---------- */
.faq{grid-template-columns:1fr;gap:clamp(24px,3.4vw,44px);padding-top:clamp(40px,6vw,96px)}
.faq-head{position:static;text-align:center}
.faq-head h2{font-size:clamp(42px,7.6vw,112px);line-height:1;letter-spacing:-.045em}
.faq-head p{margin:20px auto 0;max-width:none;font-size:clamp(16px,1.5vw,19px)}
.faq-list{width:min(900px,100%);margin-inline:auto}

/* ---------- bento, second set: Training, AI coach, Journal, Meditation, Learn ---------- */
.c-talk{order:2}.c-journal{order:3}.c-med{order:4}.c-learn{order:5}
.c-journal{grid-column:span 3;background:linear-gradient(160deg,var(--brand),var(--brand-deep));color:var(--on-brand,#fff)}
.c-journal p{color:inherit;opacity:.9}
.c-learn{grid-column:span 4;background:linear-gradient(150deg,var(--brand-deep),color-mix(in srgb,var(--brand-deep) 55%,#05060F))}
.cell h3:first-child{margin-top:0}
.kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-width:60%}
.kinds li{height:34px;padding:0 14px;border-radius:99px;display:flex;align-items:center;font-size:14px;font-weight:600;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.note{margin-top:auto;padding:14px 16px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 18px 30px -16px rgba(0,0,30,.5);display:grid;gap:6px;transform:rotate(-2deg);transition:transform .6s var(--ease)}
.cell:hover .note{transform:rotate(0) translateY(-4px)}
.note small{font-size:12px;font-weight:700;color:var(--muted)}
.note-line{font-size:15.5px;line-height:1.3;font-weight:600;letter-spacing:-.2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.moods{display:flex;gap:6px;margin-top:4px}
.moods i{width:14px;height:14px;border-radius:50%;background:#E8E8ED}
.moods i.on{background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent);animation:mood 2.4s ease-in-out infinite}
@keyframes mood{50%{transform:scale(1.25)}}
.reads{position:absolute;z-index:-1;right:-4%;top:14%;width:52%;display:grid;gap:10px}
.read{display:grid;gap:3px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:13.5px;line-height:1.25;font-weight:600;transition:transform .6s var(--ease)}
.read small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-hi)}
.read:nth-child(2){transform:translateX(-14%)}
.cell:hover .read:nth-child(1){transform:translateX(-6%)}.cell:hover .read:nth-child(2){transform:translateX(-20%)}.cell:hover .read:nth-child(3){transform:translateX(-4%)}
.c-learn p{max-width:16ch}
@media (max-width:1180px) and (min-width:900px){.bento .c-journal,.bento .c-learn{grid-column:span 4}}
@media (max-width:899px){
  .c-journal{grid-column:span 1;min-height:250px}.c-med{grid-column:span 1}
  .c-learn{grid-column:1/-1;min-height:230px}
  .kinds{max-width:none}.kinds li{font-size:13px;height:30px;padding:0 11px}
  .c-work{min-height:420px}
  .reads{width:54%;top:18%}
  .c-journal p{font-size:14px}.note-line{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.moods i.on{animation:none}}

/* ---------- "Day by day" is now the health timeline alone, with a real object above each number ---------- */
.aband .health{padding:clamp(24px,3.4vw,48px)}
.health-head h2{font-size:clamp(34px,4.6vw,64px);line-height:1;font-weight:800;letter-spacing:-.04em}
.health-head p{max-width:46ch}
.h-photo{width:clamp(110px,11vw,160px);height:clamp(110px,11vw,160px);background:none!important;box-shadow:none!important;border-radius:0;margin-bottom:6px}
.h-photo img{width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.health-steps li:hover .h-photo img{transform:translateY(-6px) rotate(-5deg) scale(1.06)}
.health-steps .h-art:not(.h-photo){width:clamp(110px,11vw,160px);height:clamp(110px,11vw,160px);background:none;margin-bottom:6px}
.health-steps .h-art:not(.h-photo) .ha{height:46%}
/* bento on phones: Learn's reads keep clear of its text */
@media (max-width:899px){.c-learn p{max-width:12ch}.reads{width:50%;right:-6%}}

/* rotating word: a fixed slot, the word centred in it, so nothing around it jumps */
.rot{transition:color .6s;text-align:center}
.rot-w{left:0;right:0;margin:auto;width:max-content}
.rot img.rot-w{height:1.15em;width:auto;top:.08em;filter:drop-shadow(0 .08em .1em rgba(0,0,0,.22))}

/* ---------- "Day by day" as a winding road: four stops, the path draws itself, each stop lights in turn ---------- */
.aband .health{padding-bottom:clamp(28px,4vw,56px)}
.health-head{flex-direction:column;align-items:center;text-align:center;gap:12px}
.health-head p{max-width:60ch}
.road{position:relative;margin-top:clamp(20px,3vw,40px);--row:clamp(200px,19vw,250px);--node:clamp(120px,12vw,168px)}
.road-start{position:absolute;left:50%;top:-6px;transform:translate(-50%,-50%);z-index:2;height:30px;padding:0 14px;border-radius:99px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;white-space:nowrap}
.road-line{position:absolute;inset:0;width:100%;height:100%;fill:none;overflow:visible}
.road-line path{vector-effect:non-scaling-stroke;stroke-linecap:round}
.rl-bed{stroke:#EDEDF2;stroke-width:34}
.rl-dash{stroke:#fff;stroke-width:3;stroke-dasharray:2 12}
.rl-go{stroke:var(--brand);stroke-width:10;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 4px 10px var(--glow));transition:stroke .6s}
.rl-m{display:none}
.stops{position:relative;display:grid;grid-auto-rows:var(--row)}
.stop{position:relative}
.node{position:absolute;left:38%;top:50%;width:var(--node);height:var(--node);margin:calc(var(--node)/-2) 0 0 calc(var(--node)/-2);border-radius:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 70%,#000),color-mix(in srgb,var(--brand) 55%,#000));box-shadow:0 18px 30px -12px var(--glow);transition:transform .5s var(--ease)}
.stop:nth-child(even) .node{left:62%}
.node-face{position:absolute;inset:0 0 9% 0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 26%,#fff 0,#F4F6FF 46%,#E3E8FA 100%);box-shadow:inset 0 0 0 5px #fff,inset 0 -8px 16px rgba(20,30,90,.08),0 0 0 3px var(--brand);transition:transform .35s var(--ease),inset .35s}
.node-face img{width:86%;height:86%;object-fit:contain;transition:transform .6s var(--ease)}
.node-face .ha{height:40%;color:var(--brand)}
.stop:hover .node-face{transform:translateY(5%)}
.stop:hover .node-face img{transform:rotate(-6deg) scale(1.08)}
.info{position:absolute;top:50%;transform:translateY(-50%);left:calc(38% + var(--node)/2 + 28px);width:min(38%,420px)}
.stop:nth-child(even) .info{left:auto;right:calc(38% + var(--node)/2 + 28px);text-align:right}
.info .h-when{justify-content:flex-start;font-size:clamp(44px,5vw,76px)}
.stop:nth-child(even) .info .h-when{justify-content:flex-end}
.info p{margin-top:8px;font-size:17px;line-height:1.35;font-weight:500;letter-spacing:-.2px}
.info .h-src{margin-top:10px;display:inline-block}
/* arrival */
.js .health.rv-h .rl-go{stroke-dashoffset:100}
.js .health.is-in .rl-go{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.5,0,.3,1),stroke .6s}
.js .health.rv-h .node{transform:scale(.3);opacity:0}
.js .health.rv-h .info{opacity:0}
.js .health.is-in .node{transform:none;opacity:1;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .3s;transition-delay:calc(var(--i)*.6s + .3s)}
.js .health.is-in .info{opacity:1;transition:opacity .6s var(--ease);transition-delay:calc(var(--i)*.6s + .5s)}
@media (max-width:899px){
  .health{padding-inline:18px!important}
  .health-head{padding-inline:0}
  .road{--row:210px;--node:96px}
  .road-start{left:19%}
  .rl-d{display:none}.rl-m{display:block}
  .rl-bed{stroke-width:22}.rl-go{stroke-width:7}
  .node,.stop:nth-child(even) .node{left:15%}
  .stop:nth-child(even) .node{left:27%}
  .info,.stop:nth-child(even) .info{left:calc(27% + 62px);right:0;width:auto;text-align:left}
  .stop:nth-child(even) .info .h-when{justify-content:flex-start}
  .info .h-when{font-size:44px}
  .info p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.rl-go{transition:none}}

/* top bar: the three section links are gone (the bottom pill and phone bar still jump to sections) */
.bar-links{display:none!important}

/* the app's One Year medal on the road's last stop: platinum, crown, 365; a band of light crosses it */
.node-face .medal365{width:74%;height:74%;filter:drop-shadow(0 8px 12px rgba(40,50,70,.35));transition:transform .6s var(--ease)}
.stop:hover .medal365{transform:rotate(-6deg) scale(1.08)}
.m-shine{animation:m-shine 4.5s var(--ease) infinite}
@keyframes m-shine{0%,55%{transform:skewX(-18deg) translateX(0)}100%{transform:skewX(-18deg) translateX(190px)}}
@media (prefers-reduced-motion:reduce){.m-shine{animation:none}}

/* FAQ chat writing itself */
.faq details.faq-wait{display:none}
.faq details.faq-typing summary{animation:faq-in .35s var(--ease) both}
.faq details.faq-typing summary::after{content:"";width:2px;height:1.1em;background:currentColor;margin-left:-6px;animation:faq-blink .7s steps(1) infinite}
.faq details.faq-typing summary .ic{display:none}
.faq-caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-.12em;margin-left:2px;animation:faq-blink .7s steps(1) infinite}
@keyframes faq-blink{50%{opacity:0}}
.faq-dots{display:inline-flex;gap:5px;align-items:center;height:1.4em}
.faq-dots i{width:7px;height:7px;border-radius:50%;background:#9A9AA4;animation:st-dot 1s ease-in-out infinite}
.faq-dots i:nth-child(2){animation-delay:.15s}.faq-dots i:nth-child(3){animation-delay:.3s}

/* hero headline: realistic objects rotate in the slot where the word was */
.rot{width:3.3em!important;height:1.25em}
.rot img.rot-w{height:1.1em;width:3.3em;object-fit:contain;top:.1em;filter:none}

/* feature cards driven by GSAP: no CSS entry transitions fighting it; the head stays compact while pinned */
.js .bento.is-gsap .cell{transition:box-shadow .6s var(--ease);transition-delay:0s}
.bento.is-gsap .cell:hover{transform:none}
@media (min-width:900px){#helps .bento-head-big{margin-bottom:22px}#helps .bento-head-big h2{font-size:clamp(34px,4.4vw,60px)}#helps .bento-head-big h2 br{display:none}#helps .bento-head-big p{margin-top:8px;font-size:17px}#helps .bento{grid-auto-rows:clamp(240px,32vh,300px)}}

/* ---------- feature cards as a deck (set by script when GSAP is there) ---------- */
@media (min-width:900px){
  #helps .bento.is-deck{display:block;position:relative;width:min(1080px,100%);height:min(64vh,560px);margin:10px auto 0}
  #helps .bento.is-deck .cell{position:absolute;inset:0;padding:clamp(28px,3.4vw,52px);border-radius:var(--r-hero);box-shadow:0 30px 60px -28px rgba(10,16,48,.55),0 0 0 1px rgba(255,255,255,.06);will-change:transform;transform-origin:50% 60%}
}
.bento.is-deck .cell h3{font-size:clamp(40px,5.2vw,80px);letter-spacing:-.04em;margin-top:18px}
.bento.is-deck .cell h3:first-child{margin-top:0}
.bento.is-deck .cell p{margin-top:16px;font-size:clamp(17px,1.6vw,22px);line-height:1.35;max-width:26ch}
.bento.is-deck .cell .tag{height:30px;padding:0 14px;font-size:13px}
@media (min-width:900px){
  .bento.is-deck .kinds{max-width:44%;margin-top:22px}
  .bento.is-deck .kinds li{height:40px;padding:0 18px;font-size:15.5px}
  .bento.is-deck .c-work .frag{width:auto;height:128%;right:5%;bottom:-42%}
  .bento.is-deck .live{width:auto;height:72%;right:9%;top:50%;bottom:auto;translate:0 -50%}
  .bento.is-deck .c-med .live i{inset:auto -40% 4% -40%}
  .bento.is-deck .chat{position:absolute;right:clamp(28px,3.4vw,52px);bottom:clamp(28px,3.4vw,52px);width:min(46%,500px);margin:0;gap:14px}
  .bento.is-deck .bub,.bento.is-deck .rep-text,.bento.is-deck .rep-dots{font-size:clamp(16px,1.5vw,21px);padding:14px 20px}
  .bento.is-deck .rep .ball{width:48px}
  .bento.is-deck .note{position:absolute;right:8%;top:50%;width:min(40%,440px);margin:0;padding:24px 26px;border-radius:28px;gap:10px;transform:translateY(-50%) rotate(-3deg)}
  .bento.is-deck .note small{font-size:14px}.bento.is-deck .note-line{font-size:clamp(18px,1.8vw,24px);-webkit-line-clamp:3}
  .bento.is-deck .moods i{width:20px;height:20px}
  .bento.is-deck .reads{right:5%;top:50%;width:min(44%,480px);translate:0 -50%;gap:14px}
  .bento.is-deck .read{padding:18px 20px;border-radius:22px;font-size:clamp(15px,1.4vw,19px)}
  .bento.is-deck .c-learn p{max-width:22ch}
}
@media (max-width:899px){
  .bento.is-deck{display:block}
  .bento.is-deck .cell{position:sticky;top:calc(80px + var(--i,0)*10px);min-height:min(68vh,480px);margin-bottom:18px;border-radius:30px;transform-origin:50% 0;box-shadow:0 -14px 30px -20px rgba(10,16,48,.4)}
  .bento.is-deck .cell h3{font-size:38px}
  .bento.is-deck .c-med .live{width:56%;right:50%;translate:50% 0;bottom:6%}
  .bento.is-deck .reads{position:static;width:auto;margin-top:auto;z-index:0}
  .bento.is-deck .read:nth-child(2){transform:none}
  .bento.is-deck .c-learn p,.bento.is-deck .c-journal p{max-width:none}
}

/* ---------- feature cards: a dark stage; five glass cards arrive one by one and settle into an overlapping, slightly tilted row ---------- */
.fan{position:relative;height:min(68vh,600px);min-height:430px;border-radius:var(--r-hero);overflow:hidden;isolation:isolate;background:radial-gradient(80% 90% at 50% 40%,color-mix(in srgb,var(--brand) 38%,#07080F) 0,#07080F 75%);perspective:1200px}
.fan-row{position:absolute;inset:0;--cw:clamp(128px,17vw,236px);--step:calc(var(--cw)*.62)}
.fcard{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:3/4.15;margin:calc(var(--cw)*-.69) 0 0 calc(var(--cw)*-.5);z-index:calc(var(--k) + 1);
  transform:translate3d(calc((var(--k) - 2)*var(--step)),var(--dy,0px),0) rotate(var(--r,0deg));will-change:transform,opacity}
.fcard:nth-child(1){--r:-5deg;--dy:-9%}.fcard:nth-child(2){--r:2.5deg;--dy:5%}.fcard:nth-child(3){--r:-8deg;--dy:11%}.fcard:nth-child(4){--r:4deg;--dy:2%}.fcard:nth-child(5){--r:-2deg;--dy:5%}
.fcard article{position:relative;height:100%;border-radius:calc(var(--cw)*.085);padding:calc(var(--cw)*.075);display:flex;flex-direction:column;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 30px 50px -24px rgba(0,0,0,.7);transition:transform .5s var(--ease)}
.fcard:hover{z-index:9}
.fcard:hover article{transform:translateY(-6%) scale(1.04)}
.f-top,.f-bot{font:600 calc(var(--cw)*.046)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.f-top{align-self:flex-end}.f-bot{margin-top:auto}
.f-vis{flex:1;display:grid;place-items:center;min-height:0}
.fcard h3{font-size:calc(var(--cw)*.135);line-height:1;font-weight:800;letter-spacing:-.03em}
.fcard p{margin-top:calc(var(--cw)*.03);font-size:calc(var(--cw)*.062);line-height:1.25;color:rgba(255,255,255,.75);margin-bottom:calc(var(--cw)*.05)}
.fv{position:relative;display:grid;place-items:center;width:62%;aspect-ratio:1}
.fv-ring svg:first-child{position:absolute;inset:0;transform:rotate(-90deg);fill:none;stroke:rgba(255,255,255,.16);stroke-width:7;stroke-linecap:round}
.fv-ring .go{stroke:var(--brand-hi);stroke-dasharray:64 100;filter:drop-shadow(0 0 6px var(--glow))}
.fv-ring .walker{width:56%;height:56%;stroke-width:1.5}
.fv-chat{width:80%;aspect-ratio:auto;gap:8%;justify-items:stretch}
.fv-chat i{font-style:normal;font-size:calc(var(--cw)*.062);font-weight:600;padding:.6em .9em;border-radius:1.2em 1.2em .3em 1.2em;background:var(--brand);color:var(--on-brand,#fff);justify-self:end}
.fv-chat .b2{justify-self:start;border-radius:1.2em 1.2em 1.2em .3em;background:rgba(255,255,255,.16);display:flex;gap:.35em}
.fv-chat u{width:.45em;height:.45em;border-radius:50%;background:#fff;animation:st-dot 1s ease-in-out infinite}.fv-chat u:nth-child(2){animation-delay:.15s}.fv-chat u:nth-child(3){animation-delay:.3s}
.fv-note{width:76%;aspect-ratio:1.25;border-radius:12%;background:#fff;padding:12%;align-content:center;justify-items:start;gap:9%;transform:rotate(-4deg);box-shadow:0 12px 20px -10px rgba(0,0,0,.5)}
.fv-note i{height:calc(var(--cw)*.028);border-radius:9px;background:#D9D9E0;width:100%}.fv-note i:nth-child(2){width:78%}.fv-note i:nth-child(3){width:52%}
.fv-note b{width:calc(var(--cw)*.07);height:calc(var(--cw)*.07);border-radius:50%;background:var(--brand);animation:mood 2.4s ease-in-out infinite}
.fv-ball .ball{width:78%;animation:st-breath 6s ease-in-out infinite}
.fv-ball>i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-hi);box-shadow:0 0 22px var(--glow);animation:st-ring 6s ease-in-out infinite}
.fv-reads{width:84%;aspect-ratio:auto;gap:7%;justify-items:stretch}
.fv-reads i{height:calc(var(--cw)*.15);border-radius:calc(var(--cw)*.04);background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:flex;align-items:center;padding:0 8%}
.fv-reads i:nth-child(2){margin-left:-10%;margin-right:10%}
.fv-reads small{font:700 calc(var(--cw)*.048)/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-hi)}
#helps .bento-head-big h2 br{display:none}
#helps .bento-head-big{margin-bottom:20px}
#helps .bento-head-big h2{font-size:clamp(32px,4.4vw,60px)}
@media (max-width:899px){.fan{height:min(62vh,480px);border-radius:30px}.fan-row{--cw:clamp(118px,34vw,170px);--step:calc(var(--cw)*.4)}.fcard p{display:none}}
@media (prefers-reduced-motion:reduce){.fv-chat u,.fv-note b,.fv-ball .ball,.fv-ball>i{animation:none}}

/* hero headline objects: smaller, with the name under them, dimmed; one shrinks away, the next grows in */
.rot.has-pics{width:2.5em!important;height:1.05em;margin:0 .06em;top:.12em;overflow:visible;vertical-align:baseline}
.rot-pic{position:absolute;inset:0;display:grid;justify-items:center;align-content:start;width:auto;margin:0;transform-origin:50% 45%;transition:transform .55s cubic-bezier(.34,1.3,.5,1),opacity .4s ease,filter .4s ease}
.rot-pic img{position:static;width:100%;height:.8em;object-fit:contain;filter:drop-shadow(0 .05em .06em rgba(0,0,0,.2))}
.rot-pic small{margin-top:-.2em;font-size:.2em;line-height:1;font-weight:600;letter-spacing:0;color:#A0A0AA;white-space:nowrap}
.rot-pic.is-small{transform:scale(.25);opacity:0;filter:blur(6px);transition:transform .42s cubic-bezier(.5,0,.8,.4),opacity .36s ease,filter .36s ease}
.rot-w.rot-pic.is-below,.rot-w.rot-pic.is-above{transform:none;opacity:1}

/* feature cards: no dark frame; the glass cards sit straight on the page (darker glass so they read on a light page) */
.fan{background:none;border-radius:0;overflow:visible}
.fcard article{color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--brand-deep) 78%,transparent),color-mix(in srgb,var(--night) 84%,transparent));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 30px 50px -24px rgba(10,16,48,.55)}

/* words row: the object for a word shrinks away with a fade, the next one grows in */
.marquee-obj img{transform:scale(.25);opacity:0;filter:blur(6px) drop-shadow(0 14px 16px rgba(0,0,0,.22));transition:transform .42s cubic-bezier(.5,0,.8,.4),opacity .36s ease,filter .36s ease}
.marquee-obj img.is-on{transform:none;opacity:1;filter:drop-shadow(0 14px 16px rgba(0,0,0,.22));transition:transform .6s cubic-bezier(.34,1.3,.5,1) .38s,opacity .4s ease .38s,filter .4s ease .38s}
.marquee-obj img.is-out{transform:scale(.25);opacity:0;filter:blur(6px);transition:transform .42s cubic-bezier(.5,0,.8,.4),opacity .36s ease,filter .36s ease}

/* the small name under each headline object is struck through: the line draws across just after the object arrives */
.rot-pic small{position:relative}
.rot-pic small::after{content:"";position:absolute;left:-8%;right:-8%;top:52%;height:.12em;border-radius:.12em;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease) .8s}
.rot-pic:not(.is-small) small::after{transform:scaleX(1)}
.rot-pic.is-small small::after{transition:none}

/* words row: the object for the dark word glides in from the right; the old one leaves to the left */
.marquee-obj img{transform:translateX(70%) scale(.9);opacity:0;filter:blur(8px);transition:transform .5s cubic-bezier(.5,0,.75,.3),opacity .4s ease,filter .4s ease}
.marquee-obj img.is-on{transform:none;opacity:1;filter:drop-shadow(0 14px 16px rgba(0,0,0,.22));transition:transform .9s cubic-bezier(.16,1,.3,1) .12s,opacity .5s ease .12s,filter .5s ease .12s;animation:none}
.marquee-obj img.is-out{transform:translateX(-70%) scale(.9);opacity:0;filter:blur(8px);transition:transform .5s cubic-bezier(.5,0,.75,.3),opacity .4s ease,filter .4s ease}

/* ---------- feature cards, refined: cleaner glass in the buddy colour, less overlap so every title reads, a slow float once landed ---------- */
.fan{height:min(66vh,580px);perspective:1400px}
.fan-row{--cw:clamp(132px,17.5vw,248px);--step:calc(var(--cw)*.76);transform-style:preserve-3d}
.fcard{transform-style:preserve-3d}
.fcard:nth-child(1){--r:-4deg;--dy:-5%}.fcard:nth-child(2){--r:2deg;--dy:4%}.fcard:nth-child(3){--r:-3deg;--dy:8%}.fcard:nth-child(4){--r:3deg;--dy:0%}.fcard:nth-child(5){--r:-1.5deg;--dy:5%}
.fcard article{padding:calc(var(--cw)*.085);border-radius:calc(var(--cw)*.1);
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand-hi) 82%,transparent) 0,color-mix(in srgb,var(--brand) 86%,transparent) 42%,color-mix(in srgb,var(--brand-deep) 92%,transparent) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22),0 34px 60px -26px color-mix(in srgb,var(--brand-deep) 70%,#000),0 8px 18px -10px rgba(10,16,48,.35);
  color:var(--on-brand,#fff);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.fcard article::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.06) 28%,rgba(255,255,255,0) 46%);pointer-events:none}
.fcard:hover article{transform:translateY(-7%) scale(1.05) rotate(calc(var(--r)*-1))}
.fcard h3{font-size:calc(var(--cw)*.15);letter-spacing:-.035em}
.fcard p{color:inherit;opacity:.82;font-size:calc(var(--cw)*.066);max-width:9.5em}
.f-top,.f-bot{opacity:.72}
.fv{width:66%}
.fv-ring svg:first-child{stroke:rgba(255,255,255,.26)}
.fv-ring .go{stroke:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}
.fv-chat i{background:#fff;color:var(--brand-deep)}
.fv-chat .b2{background:rgba(255,255,255,.26)}
.fv-reads i{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.fv-reads small{color:inherit}
.fv-ball>i{border-color:rgba(255,255,255,.8);box-shadow:0 0 22px rgba(255,255,255,.5)}
.fan.is-landed .fcard{animation:f-float 6s ease-in-out infinite;animation-delay:calc(var(--k)*-1.3s)}
@keyframes f-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:899px){.fan-row{--cw:clamp(120px,36vw,176px);--step:calc(var(--cw)*.42)}}
@media (prefers-reduced-motion:reduce){.fan.is-landed .fcard{animation:none}}

/* feature cards: solid, light grey, dark type; the buddy colour only as an accent */
.fcard article{color:var(--ink);background:linear-gradient(165deg,#FAFAFB 0,#EFEFF2 55%,#E4E4E9 100%);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.06),0 30px 50px -26px rgba(10,16,48,.35),0 6px 14px -8px rgba(10,16,48,.18)}
.fcard article::before{display:none}
.fcard p{color:#4A4A52;opacity:1}
.f-top,.f-bot{opacity:1;color:#8A8A92}
.fv-ring svg:first-child{stroke:#D9D9E0}
.fv-ring .go{stroke:var(--brand);filter:none}
.fv-ring .walker{color:var(--ink)}
.fv-chat i{background:var(--brand);color:var(--on-brand,#fff)}
.fv-chat .b2{background:#D9D9E0}
.fv-chat u{background:#6B6B73}
.fv-note{box-shadow:0 12px 20px -10px rgba(10,16,48,.3),0 0 0 1px rgba(0,0,0,.05)}
.fv-reads i{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fv-reads small{color:var(--brand-deep)}
.fv-ball>i{border-color:var(--brand-hi);box-shadow:0 0 22px var(--glow)}

/* words row: each word carries its own object above its middle. It travels in from the right with the word and shows, smoothly, while that word is the dark one */
.marquee .marquee-obj,.marquee .marquee-ball{display:none!important}
.marquee-track span{position:relative}
.marquee-track span::before{content:"";position:absolute;left:50%;bottom:92%;width:calc(var(--mf)*1.05);height:calc(var(--mf)*1.05);margin-left:calc(var(--mf)*-.525);background:center/contain no-repeat;
  opacity:0;transform:translateX(55%) scale(.8);filter:blur(8px);transition:opacity .45s ease,transform .6s cubic-bezier(.5,0,.75,.3),filter .45s ease;pointer-events:none}
.marquee-track span.is-mid::before{opacity:1;transform:none;filter:drop-shadow(0 14px 16px rgba(0,0,0,.2));transition:opacity .6s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .6s ease}
.marquee-track span:nth-child(5n+1)::before{background-image:url(assets/words/breathe.png)}
.marquee-track span:nth-child(5n+2)::before{background-image:url(assets/words/move.png)}
.marquee-track span:nth-child(5n+3)::before{background-image:url(assets/words/walk.png)}
.marquee-track span:nth-child(5n+4)::before{background-image:url(assets/words/meditate.png)}
.marquee-track span:nth-child(5n+5)::before{background-image:url(assets/words/talk.png)}
@media (prefers-reduced-motion:reduce){.marquee-track span::before{transition:none}}

/* headline objects: the name sits clear under the object (the pack is taller than the others) */
.rot-pic img{height:.74em}
.rot-pic small{margin-top:-.02em}

/* words row: the object sits to the right of its word, on the same line, not above it */
.marquee{padding-top:calc(var(--mf)*.22)}
.marquee-track span{padding:0 calc(var(--mf)*1.12) 0 calc(var(--mf)*.2)}
.marquee-track span::before{left:auto;right:calc(var(--mf)*.14);bottom:auto;top:50%;width:calc(var(--mf)*.9);height:calc(var(--mf)*.9);margin:calc(var(--mf)*-.47) 0 0 0}

/* training card: the real coach clip inside the ring */
.fv-ring{width:74%}
.fv-clip{position:absolute;inset:9%;border-radius:50%;overflow:hidden;background:#05060C}
.fv-clip video{position:absolute;left:-30%;top:-98%;width:160%;max-width:none;height:auto}
.fv-ring .go{animation:fv-go 6s linear infinite}
@keyframes fv-go{from{stroke-dasharray:4 100}to{stroke-dasharray:100 100}}

/* headline objects: a puff of smoke drifts off as each one appears */
.smoke{position:absolute;right:2%;top:.05em;width:.5em;height:.5em;pointer-events:none}
.smoke b{position:absolute;left:0;bottom:0;width:.34em;height:.34em;border-radius:50%;background:radial-gradient(closest-side,rgba(150,150,160,.55),rgba(150,150,160,0));filter:blur(.04em);opacity:0}
.rot-pic:not(.is-small) .smoke b{animation:smoke 2.4s ease-out .5s both}
.rot-pic:not(.is-small) .smoke b:nth-child(2){animation-delay:.75s;left:.12em}
.rot-pic:not(.is-small) .smoke b:nth-child(3){animation-delay:1.05s;left:-.08em}
.rot-pic:not(.is-small) .smoke b:nth-child(4){animation-delay:1.4s;left:.06em}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:.9}100%{opacity:0;transform:translate(.35em,-1.1em) scale(2.6)}}
@media (prefers-reduced-motion:reduce){.smoke{display:none}.fv-ring .go{animation:none}}

/* training card: the squat animation, no background, sitting inside the ring */
.fv-ring{width:78%}
.fv-move{position:absolute;inset:4% 4% 2% 4%;display:grid;place-items:center}
.fv-move svg{width:100%!important;height:100%!important}

/* training card: the squat figure keeps its own colours (the ring's grey stroke must not leak onto it) */
.fv-ring>svg{position:absolute;inset:0}
.fv-move svg{position:static!important;inset:auto;stroke:none;stroke-width:0;fill:initial}
/* feature cards, hover: the card lifts, straightens and comes forward; the others step back a little */
.fcard article{transition:translate .6s cubic-bezier(.16,1,.3,1),scale .6s cubic-bezier(.16,1,.3,1),rotate .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease,filter .5s ease}
.fcard:hover article{translate:0 -6%;scale:1.07;rotate:calc(var(--r)*-1);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 55%,transparent),0 44px 60px -28px color-mix(in srgb,var(--brand-deep) 55%,#000),0 10px 20px -10px rgba(10,16,48,.25)}
.fan-row:hover .fcard:not(:hover) article{filter:brightness(.94) saturate(.85);scale:.98}
.fcard .f-vis{transition:scale .7s cubic-bezier(.16,1,.3,1)}
.fcard:hover .f-vis{scale:1.08}
/* premium: a gold tag with a crown, and a gold edge on hover */
.f-gold{align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;padding:.55em .9em .5em .7em;border-radius:99px;color:#5B3D00;
  background:linear-gradient(120deg,#F9E08A 0,#E9B93A 45%,#F7DB7D 70%,#D9A223 100%);background-size:220% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 12px -6px rgba(180,120,0,.6);transition:background-position .9s ease}
.f-gold svg{width:1.25em;height:1.25em;fill:#5B3D00}
.fcard:hover .f-gold{background-position:100% 0}
.fcard:has(.f-gold):hover article{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1.5px #E3B341,0 44px 60px -28px rgba(160,110,0,.55),0 10px 20px -10px rgba(10,16,48,.25)}
/* words row: every word keeps its object; it is dimmed like the word and comes to full colour when the word is the dark one */
.marquee-track span::before{opacity:.3;transform:scale(.9);filter:grayscale(1);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease}
.marquee-track span.is-mid::before{opacity:1;transform:none;filter:drop-shadow(0 14px 16px rgba(0,0,0,.2))}
/* 48 hours: loose fruit that drops into the bowl */
.fruits{position:absolute;inset:0;z-index:2;pointer-events:none}
.fr{position:absolute;left:50%;top:46%;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;opacity:0;box-shadow:0 6px 8px -4px rgba(0,0,0,.35)}
.fr.blue{background:radial-gradient(circle at 34% 28%,#8FA3E8 0,#3B4BA8 28%,#1B2460 70%,#0E1338 100%)}
.fr.straw{width:15%;border-radius:50% 50% 50% 50%/42% 42% 58% 58%;background:radial-gradient(circle at 50% 55%,#FFD9D2 0,#FF8E80 30%,#E5322D 62%,#B5161A 100%)}
.fr.orange{width:19%;background:radial-gradient(circle,#FFE2A8 0 8%,#FFA630 10% 78%,#FFF3D6 80% 86%,#F28A13 88%)}
/* stopwatch: the moving-hand sheet sits exactly over the still while hovered */
.node-face .sweep{position:absolute;left:7%;top:7%;width:86%;height:86%;background-size:600% 600%;background-repeat:no-repeat;opacity:0;pointer-events:none}
.stop.is-sweep .sweep{opacity:1}
.stop.is-sweep .node-face img{opacity:0}
.stop.is-sweep:hover .node-face img{transform:none}

/* hero, workout screen: the coach fits whole inside the ring; transport buttons under the count */
.s-work .coach video{left:-32px;top:-150px;width:290px}
.s-work .ringbox{margin:18px 0 12px}
.s-work .ctl{display:flex;align-items:center;gap:22px;margin-top:26px}
.s-work .ctl i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.09);color:#fff}
.s-work .ctl .ic{width:22px;height:22px}
.s-work .ctl .main{width:76px;height:76px;background:var(--brand);color:var(--on-brand,#fff);box-shadow:0 10px 26px -6px var(--glow)}
.s-work .ctl .main .ic{width:28px;height:28px}
/* hero, days screen: next medal, today, and the craving button */
.s-days .ball{width:96px;margin:10px 0 12px}
.s-days .cards{margin-top:20px}
.s-days .nxt{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;margin-top:12px;border-radius:24px;padding:14px 18px 22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.s-days .nxt>i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 34%,transparent);color:var(--brand-hi)}
.s-days .nxt .ic{width:21px;height:21px}
.s-days .nxt span{display:block;font-size:12.5px;font-weight:600;color:var(--brand-hi)}
.s-days .nxt b{font-size:19px;font-weight:800;letter-spacing:-.4px}
.s-days .nxt em{font-style:normal;font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}
.s-days .nxt .cd-bar{position:absolute;left:18px;right:18px;bottom:10px;margin:0;height:4px}
.s-days.is-on .nxt .cd-bar i{width:68%}
.s-days .tdy{display:flex;gap:8px;width:100%;margin-top:12px}
.s-days .tdy span{flex:1;display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.07);font-size:12px;font-weight:600;white-space:nowrap}
.s-days .tdy .ic{width:16px;height:16px;color:var(--brand-hi);flex:none}
.s-days .crave-btn{margin-top:auto;margin-bottom:104px;width:100%;height:62px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.3px;background:var(--brand);color:var(--on-brand,#fff);box-shadow:0 14px 30px -8px var(--glow);animation:crave-pulse 2.4s ease-in-out infinite}
.s-days .crave-btn .ic{width:24px;height:24px}
@keyframes crave-pulse{50%{transform:scale(1.035);box-shadow:0 14px 40px -4px var(--glow)}}
/* feature cards: a little bigger, and no hover change (the row still leans to the pointer) */
.fan{height:min(74vh,660px)}
.fan-row{--cw:clamp(150px,20vw,290px)}
.fcard:hover article,.fan-row:hover .fcard:not(:hover) article{translate:none;scale:none;rotate:none;filter:none;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.06),0 30px 50px -26px rgba(10,16,48,.35),0 6px 14px -8px rgba(10,16,48,.18)}
.fcard:hover{z-index:calc(var(--k) + 1)}
.fcard:hover .f-vis{scale:none}
@media (max-width:899px){.fan-row{--cw:clamp(128px,38vw,190px)}}
/* the words row is off; "Day by day" takes the full width with its own background, and its pictures are bigger */
.marquee{display:none}
.aband{padding-inline:0;background:linear-gradient(180deg,#F4F5F9 0,color-mix(in srgb,var(--brand) 9%,#F4F5F9) 55%,#F4F5F9 100%)}
.aband>.wrap{max-width:none;padding-inline:0}
.aband .health{background:none;box-shadow:none;border-radius:0;max-width:1320px;margin-inline:auto}
.road{--row:clamp(260px,25vw,340px);--node:clamp(168px,17vw,240px)}
.rl-bed{stroke:#fff;stroke-width:46}.rl-dash{stroke:#DADCE6}.rl-go{stroke-width:13}
.info .h-when{font-size:clamp(54px,6.2vw,96px)}
.info p{font-size:clamp(17px,1.5vw,21px)}
.fr{width:14%}
@media (max-width:899px){.road{--row:230px;--node:112px}.rl-bed{stroke-width:26}.rl-go{stroke-width:8}.info .h-when{font-size:48px}.info,.stop:nth-child(even) .info{left:calc(27% + 72px)}}

/* the headline now lives inside the hero card, above the phone; the top bar stays outside */
.story{margin-top:clamp(76px,6vw,92px);height:clamp(620px,calc(100svh - 110px),900px)}
.story .hero-say{position:absolute;z-index:4;left:0;right:0;top:clamp(26px,4.2vh,52px);margin:0 auto;padding:0 20px;max-width:980px;text-align:center;color:#fff;pointer-events:none}
.story .hero-say h1{font-size:clamp(32px,4.6vw,66px);text-shadow:0 2px 24px rgba(0,0,20,.25)}
.story .hero-say p{color:rgba(255,255,255,.86);margin-top:12px;font-size:clamp(15px,1.35vw,19px)}
.story .hero-say .rot-pic small{color:rgba(255,255,255,.7)}
.story .hero-say .rot-pic img{filter:drop-shadow(0 8px 14px rgba(0,0,20,.35))}
@media (max-width:899px){.story{margin-top:72px;height:clamp(560px,calc(100svh - 96px),760px);min-height:0}.story .hero-say{top:22px}.story .hero-say h1{font-size:clamp(28px,8vw,40px)}.story .hero-say p{font-size:14.5px}}
/* the phone casts a deep soft shadow on the card */
.story .st-gl{filter:drop-shadow(0 46px 44px rgba(2,4,24,.5)) drop-shadow(0 10px 14px rgba(2,4,24,.3))}

/* ===== measured-test fixes ===== */
/* nothing may widen the page: cards waiting off to the side are clipped by their section */
html,body{overflow-x:clip}
#helps{overflow-x:clip}
/* FAQ: bubbles hold their place while waiting and while typing (no layout movement) */
.faq details.faq-wait{display:block;visibility:hidden}
.faq-rest{visibility:hidden}
.faq details.faq-typing summary::after{position:absolute;margin:0;display:none}
/* the app's own values (Motion.swift, CircleTraining.swift, HomeView.swift) */
:root{--app-out:cubic-bezier(.22,1,.36,1)}
.sc{transition:opacity .4s var(--app-out),transform .4s var(--app-out)}
.sc .in{transform:translateY(-12px);transition:opacity .35s var(--app-out),transform .35s var(--app-out)}
.s-work .count{font-size:80px;letter-spacing:-1px}
.s-work .ctl{gap:30px}
.s-work .ctl i{width:56px;height:56px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.s-work .ctl .main{width:76px;height:76px}
.s-days .crave-btn{height:54px;font-size:17px;font-weight:600}
.s-days .big{font-size:56px;letter-spacing:-1.5px}
.s-days .cd b{font-size:34px;letter-spacing:-.8px}
.s-days .cd,.s-days .nxt{border-radius:24px;padding-inline:16px}
/* road: the coloured line is one unbroken stroke, revealed from the top as you scroll (the old dash trick broke it into pieces) */
.rl-go,.js .health.rv-h .rl-go,.js .health.is-in .rl-go{stroke-dasharray:none;stroke-dashoffset:0;transition:stroke .6s;clip-path:inset(0 0 var(--cut,0%) 0)}
/* headline line: a fixed measure, so it does not re-wrap and jump when the typeface lands */
.story .hero-say p{max-width:540px}
@media (max-width:899px){.story .hero-say p{max-width:340px}}

/* ===== fixes from the six-area test pass (each one reproduced by a second tester) ===== */
/* training card: the squat figure keeps its own colours */
.fv-ring .fv-move svg,.fv-ring .fv-move svg *{stroke:none;stroke-width:0}
/* cards float from rest (no jump when the float starts) */
.fan.is-landed .fcard{animation-delay:calc(var(--k)*.5s)}
/* card content sits in the part of the card that stays uncovered */
.fcard:not(:last-child) article{padding-right:calc(var(--cw)*.3)}
.f-top{align-self:flex-start}
.fcard h3{font-size:calc(var(--cw)*.125)}
.fcard p{max-width:none}
.fv-chat i{white-space:nowrap}
/* short windows: cards sized by height too, clear of the bottom pill and the QR card */
@media (min-width:900px) and (max-height:800px){.fan{height:min(66vh,660px)}.fan-row{--cw:clamp(150px,min(20vw,33vh),290px)}}
/* premium cards: nothing changes on hover */
.fcard:hover .f-gold{background-position:0 0}
.fcard:has(.f-gold):hover article{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.06),0 30px 50px -26px rgba(10,16,48,.35),0 6px 14px -8px rgba(10,16,48,.18)}
#helps.rv,#helps.rv.is-in{opacity:1;transform:none;transition:none}
/* phones and tablets: the five cards wrap into rows, every title readable, nothing cut */
@media (max-width:899px){.fan{height:auto;min-height:0;padding:10px 0 16px}.fan-row{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;--cw:min(29vw,200px)}.fcard{position:static;margin:0;transform:rotate(var(--r,0deg))}.fcard:not(:last-child) article{padding-right:calc(var(--cw)*.085)}.fcard p{display:none}}
/* hero: one-line sentence on wide screens; readable on the light green and orange cards */
@media (min-width:1100px){.story .hero-say p{max-width:none;white-space:nowrap}}
:root[data-theme=sage] .story::before,:root[data-theme=sol] .story::before{content:"";position:absolute;inset:0 0 auto 0;height:52%;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--brand-deep) 80%,transparent) 0,color-mix(in srgb,var(--brand-deep) 50%,transparent) 55%,transparent 100%)}
.story .hero-say p{color:#fff}
.story .hero-say .rot-pic small{color:rgba(255,255,255,.9)}
.story{cursor:auto}
/* hero screens */
.s-days .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.s-days .wk{gap:4px}
.s-work .coach video{left:-40px;top:-148px;width:306px}
.s-crave .helps{margin-bottom:60px}
.s-days .crave-btn{margin-bottom:56px}
/* headline object: the name is struck as the object lands; smoke puffs finish on their own */
.rot-pic small::after{transition:transform .35s var(--ease) .3s}
.rot-pic .smoke b,.rot-pic:not(.is-small) .smoke b{animation:smoke 1.7s ease-out .8s both}
.rot-pic .smoke b:nth-child(2),.rot-pic:not(.is-small) .smoke b:nth-child(2){animation-delay:1s}
.rot-pic .smoke b:nth-child(3),.rot-pic:not(.is-small) .smoke b:nth-child(3){animation-delay:1.2s}
.rot-pic .smoke b:nth-child(4),.rot-pic:not(.is-small) .smoke b:nth-child(4){animation-delay:1.4s}
/* QR card stays compact until the page content clears it */
@media (min-width:1100px) and (max-width:1699px){.getcard{width:auto;padding:10px;gap:0}.getcard-copy{display:none}.qr{width:88px;height:88px}.getcard-x{right:-8px;top:-8px;background:#111114}}
/* top bar on phones and tablets: logo only */
@media (max-width:899px){.bar-logo span{display:none}}
/* day by day: each stop lights as it comes on screen */
.js .health.rv-h .stop.is-in .node{transform:none;opacity:1;transition:transform .6s cubic-bezier(.34,1.45,.64,1),opacity .3s}
.js .health.rv-h .stop.is-in .info{opacity:1;transition:opacity .4s var(--app-out) .12s}
.node-face img{scale:var(--pop,1)}
/* colour change: everything follows the one page-wide fade (no part trailing behind) */
.logo-d{transition:none}
.faq summary{transition:transform .3s var(--ease)}
.rl-go,.js .health.rv-h .rl-go,.js .health.is-in .rl-go{transition:none}
/* FAQ: the plus icon keeps its place while a question types */
.faq details.faq-typing summary .ic{display:block;visibility:hidden}
/* ===== second measured pass ===== */
/* headline waits (hidden, space kept) for the typeface, then enters like content in the app */
.js .story .hero-say{visibility:hidden}
.js .story .hero-say.is-set{visibility:visible;animation:say-in .35s var(--app-out) both}
@keyframes say-in{from{opacity:0;transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.js .story .hero-say.is-set{animation:none}}
@media (min-width:600px){.story .hero-say h1{height:2em}}
/* cards: cheaper to move (own layer), and larger on very wide screens */
.fcard article{will-change:transform,opacity}
@media (min-width:1700px){.fan-row{--cw:clamp(150px,18.5vw,350px)}.fan{height:min(74vh,760px)}}
/* ===== fixes from the fresh review ===== */
/* day by day: the stops themselves show; only their picture and text light up in turn */
.js .health.rv-h .stop{opacity:1;transform:none}
.rl-go{filter:none}
@media (max-width:899px){.health-head{margin-bottom:28px}}
/* headline: room under the "g"; the object's name readable on phones; no clipped fallback word before the pictures load */
.story .hero-say p{margin-top:22px}
@media (max-width:899px){.rot-pic small{font-size:max(9px,.2em)}}
.js .rot:not(.has-pics) .rot-w{visibility:hidden}
/* cards on phones: readable tags, title clear of its tag */
@media (max-width:899px){.f-top,.f-bot{font-size:max(9px,calc(var(--cw)*.046))}.fv-reads small{font-size:max(7px,calc(var(--cw)*.048))}.fcard h3{margin-bottom:calc(var(--cw)*.06)}}
/* less dead space between the cards and Day by day */
@media (min-width:900px) and (max-width:1699px){.fan{height:min(70vh,600px)}}
.aband{padding-top:clamp(28px,3vw,48px)}
.js .rot.no-pics:not(.has-pics) .rot-w{visibility:visible}
/* ===== fixes from the second fresh review ===== */
.s-work .ctl{margin-top:auto;margin-bottom:56px}
.story .st-pause{pointer-events:none}
.story .st-pause:focus-visible{pointer-events:auto}
@media (max-width:560px){.fan-row{--cw:min(42vw,200px)}.f-top,.f-bot{font-size:max(10px,calc(var(--cw)*.062))}}
@media (max-width:899px){.fv-reads i{width:max-content;min-width:100%;padding:0 6%}.fv-reads small{letter-spacing:.02em}}
/* hero: buddy balls beside the phone (purple, orange | phone | green, purple). A click turns the whole page that colour */
.sideballs{position:absolute;inset:0;z-index:0;pointer-events:none}
.sideb{position:absolute;top:var(--y);left:var(--x);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;pointer-events:auto;cursor:pointer;animation:sideb-float 7s ease-in-out infinite;animation-delay:var(--d,0s);transition:scale .3s var(--app-out),filter .3s}
.sideb .ball{display:block;width:100%;font-size:var(--s);filter:drop-shadow(0 22px 22px rgba(2,4,24,.42))}
.sideb:hover{scale:1.08}
.sideb:active{scale:.96}
.sb-l2{--x:17%;--y:66%;--s:clamp(54px,6.2vw,96px);--d:-1.5s}
.sb-l1{--x:31%;--y:56%;--s:clamp(70px,8.4vw,132px);--d:-3.2s}
.sb-r1{--x:69%;--y:56%;--s:clamp(70px,8.4vw,132px);--d:-.6s}
.sb-r2{--x:83%;--y:66%;--s:clamp(54px,6.2vw,96px);--d:-4.4s}
@keyframes sideb-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media (max-width:899px){.sb-l2,.sb-r2{display:none}.sb-l1{--x:11%;--y:60%;--s:52px}.sb-r1{--x:89%;--y:60%;--s:52px}}
@media (prefers-reduced-motion:reduce){.sideb{animation:none}}

/* =====================================================================
   Layout 2 (body.bv): a centred pill menu, a light hero with the phone rising from the bottom,
   tall and wide feature cards, a dark buddy section with a phone that holds still while cards pass,
   four day cards, a list that moves on by itself, one dark privacy card, a last call.
   Everything here is scoped to .bv so it wins over the older layers above.
   ===================================================================== */
.bv{--card:#EBF0F8;--ink2:#1F2025;--sub:rgba(31,32,37,.6);--expo:cubic-bezier(.19,1,.22,1);background:#fff;color:#222326}

/* ---- menu */
.nv{position:fixed;inset:0 0 auto 0;z-index:60;padding:16px 16px 0;display:flex;justify-content:center;pointer-events:none}
.nv-pill{pointer-events:auto;display:flex;align-items:center;gap:40px;padding:8px;border-radius:32px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nv-home{display:flex;align-items:center;gap:10px;padding:0 8px 0 2px;font-weight:700;font-size:18px;letter-spacing:-.02em;color:#222326;white-space:nowrap}
.nv-home .logo{width:38px;height:38px;border-radius:12px;box-shadow:none}
.nv-links{display:flex;gap:24px}
.nv-links a{font-size:16px;font-weight:500;color:var(--sub);transition:color .15s;white-space:nowrap}
.nv-links a:hover,.nv-links a.is-on{color:var(--ink2)}
.nv-cta,.hx-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:128px;background:var(--ink2);color:#EBF0F8;font-weight:500;white-space:nowrap;transition:transform .6s var(--expo),box-shadow .3s}
.nv-cta{height:38px;padding:0 16px;font-size:16px}
.hx-btn{height:54px;padding:0 30px;font-size:18px;font-weight:600}
.nv-cta:hover,.hx-btn:hover{transform:scale(1.045);box-shadow:0 10px 24px -10px rgba(31,32,37,.55)}
.nv-cta:active,.hx-btn:active{transform:scale(.97);transition-duration:.15s}
@media (max-width:767px){.nv{padding:8px 16px 0}.nv-pill{width:100%;justify-content:space-between;gap:12px}.nv-links{display:none}}

/* ---- hero */
.bv .hx-wrap{position:relative}
.bv .story{margin:0;height:clamp(820px,calc(100svh + 180px),1180px);min-height:0;border-radius:0;background:none;color:#222326;cursor:auto;box-shadow:none}
.bv .story::before,.bv .story .st-halo,.bv .story .st-floor{display:none}
.hx-bg{position:absolute;inset:8px 8px 0;z-index:-1;border-radius:24px 24px 0 0;
  background:radial-gradient(64% 26% at 50% 72%,color-mix(in srgb,var(--brand) 34%,transparent),transparent 72%),radial-gradient(38% 20% at 16% 78%,color-mix(in srgb,var(--brand-hi) 34%,transparent),transparent 72%),radial-gradient(38% 20% at 86% 68%,rgba(255,171,148,.34),transparent 72%),linear-gradient(180deg,#E3EAF6 0,#EEF3FA 26%,#fff 56%)}
.hx-bg::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;background:linear-gradient(0deg,#fff,rgba(255,255,255,0))}
.bv .story .hero-say{top:clamp(96px,11.6vh,120px);max-width:1040px;color:#222326}
.bv .story .hero-say h1{font-size:clamp(40px,5.56vw,80px);line-height:1;font-weight:700;letter-spacing:-.035em;text-shadow:none}
.bv .story .hero-say p{margin-top:24px;max-width:600px;white-space:normal;font-size:clamp(18px,1.67vw,24px);line-height:1.3;letter-spacing:0;color:var(--sub)}
.bv .story .hero-say .rot-pic small{color:#8B8E99}
.bv .story .hero-say .rot-pic img{filter:drop-shadow(0 8px 12px rgba(20,24,60,.22))}
.hx-cta{margin-top:30px;display:grid;justify-items:center;gap:14px;pointer-events:auto}
.hx-cta small{font-size:14px;font-weight:500;color:var(--sub)}
.bv .story .st-gl{filter:drop-shadow(0 50px 46px rgba(20,24,60,.34)) drop-shadow(0 12px 16px rgba(20,24,60,.22))}
.bv .sideb{left:calc(50% + var(--dx)*var(--ph-h,700px));top:calc(var(--ph-top,480px) + var(--dy)*var(--ph-h,700px));--s:calc(var(--k)*var(--ph-h,700px))}
.bv .sideb .ball{filter:drop-shadow(0 22px 20px rgba(20,24,60,.3))}
.bv .sb-l2{--dx:-.63;--dy:.5;--k:.13}.bv .sb-l1{--dx:-.41;--dy:.33;--k:.185}.bv .sb-r1{--dx:.41;--dy:.29;--k:.185}.bv .sb-r2{--dx:.63;--dy:.52;--k:.13}
@media (max-width:899px){
  .bv .story{height:clamp(760px,calc(100svh + 110px),960px)}
  .hx-bg{inset:8px 8px 0}
  .bv .story .hero-say{top:92px}
  .bv .story .hero-say h1{font-size:clamp(38px,11.4vw,56px)}
  .bv .story .hero-say p{font-size:18px;max-width:330px}
  .bv .sb-l2,.bv .sb-r2{display:none}
  .bv .sb-l1{--dx:-.3;--dy:.2;--k:.1}.bv .sb-r1{--dx:.3;--dy:.36;--k:.1}
}

/* ---- the QR card: small, bottom right, fades as the hero leaves */
.bv .getcard{right:16px;bottom:16px;width:auto;gap:12px;padding:8px 18px 8px 8px;border-radius:16px;background:var(--ink2);box-shadow:none}
.bv .getcard .qr{width:64px;height:64px;border-radius:10px;padding:5px}
.bv .getcard-copy{display:grid;padding:0;gap:2px}
.bv .getcard-copy b{font-size:16px;font-weight:600}
.bv .getcard-copy span{margin:0;max-width:17ch;font-size:13px;color:rgba(235,240,248,.6)}
.bv .getcard-copy .btn,.bv .getcard-x{display:none}

/* ---- sections */
.sx{padding-top:clamp(80px,11.1vw,160px)}
.sx-in{width:min(1376px,100% - 64px);margin-inline:auto}
.sx-head{text-align:center;max-width:1024px;margin:0 auto clamp(36px,4.5vw,64px);padding-inline:16px}
.sx-head h2,.more-left h2,.priv h2{font-size:clamp(38px,4.45vw,64px);line-height:1;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.sx-head p,.more-left>p,.priv p{margin:16px auto 0;max-width:640px;font-size:clamp(18px,1.67vw,24px);line-height:1.3;color:var(--sub);text-wrap:pretty}
@media (max-width:767px){.sx-in{width:calc(100% - 32px)}}

/* small tags */
.tg{display:inline-flex;align-items:center;gap:.45em;align-self:flex-start;height:30px;padding:0 12px;border-radius:99px;background:#fff;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink2)}
.tg-gold{color:#5B3D00;background:linear-gradient(120deg,#F9E08A 0,#E9B93A 45%,#F7DB7D 70%,#D9A223 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.tg-gold svg{width:16px;height:16px;fill:#5B3D00}

/* a phone that shows one real screenshot */
.ph{--pw:338px;position:relative;display:block;width:var(--pw);padding:calc(var(--pw)*.03);border-radius:calc(var(--pw)*.17);background:#101116;box-shadow:inset 0 0 0 1.5px #3B3D48,0 0 0 1px #000,0 40px 60px -30px rgba(20,24,60,.5)}
.ph img{display:block;width:100%;height:auto;aspect-ratio:570/1239;border-radius:calc(var(--pw)*.14);background:#06070D}

/* tall cards */
.tall3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.tcard,.wcard,.scard,.dcard{position:relative;overflow:hidden;border-radius:24px;background-color:var(--card);background-image:linear-gradient(rgba(255,255,255,0) 40%,rgba(var(--tint),.2) 90%,rgba(var(--tint),.4))}
.tcard{display:flex;flex-direction:column;height:clamp(600px,51.3vw,760px)}
.tcard-top{padding:clamp(28px,3.33vw,48px);padding-bottom:28px;display:flex;flex-direction:column}
.tcard h3,.dc-when{font-size:clamp(30px,2.78vw,40px);line-height:1;font-weight:700;letter-spacing:-.03em}
.tcard-top p{margin-top:12px;font-size:clamp(17px,1.67vw,24px);line-height:1.3;color:var(--sub)}
.tcard-top .tg{margin-top:18px}
.tcard-vis{position:relative;flex:1;min-height:0}
.tcard-vis .ph{--pw:min(77%,338px);position:absolute;left:50%;top:0;transform:translateX(-50%)}
.tcard-vis .ph{width:min(77%,338px)}
.flo{position:absolute;z-index:2;will-change:transform}
.flo-move,.flo-ball{left:6%;top:34%;width:38%;max-width:168px;aspect-ratio:1;display:grid;place-items:center;border-radius:24px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 40px -18px rgba(20,24,60,.4)}
.flo-move{left:auto;right:4%;top:30%}
.flo-move .mv{display:block;width:82%;aspect-ratio:1}
.flo-move .mv svg{display:block;width:100%!important;height:100%!important}
.flo-ball .ball{width:58%;animation:st-breath 6s ease-in-out infinite}
.flo-ball>i{position:absolute;inset:14%;border-radius:50%;border:2px solid rgba(57,105,247,.5);animation:st-ring 6s ease-in-out infinite}
.flo-obj{width:44%;max-width:200px;height:auto;right:-2%;top:36%;filter:drop-shadow(0 24px 22px rgba(20,24,60,.3))}

/* wide cards */
.wcard{margin-top:32px;height:clamp(520px,45.7vw,658px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;background-image:linear-gradient(rgba(255,255,255,0),rgba(var(--tint),.36) 90%,rgba(var(--tint),.4))}
.wcard-r{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wcard-text{padding:40px clamp(32px,5.55vw,80px);display:flex;flex-direction:column}
.wcard h3,.scard h3{margin-top:18px;font-size:clamp(38px,4.45vw,64px);line-height:1;font-weight:700;letter-spacing:-.03em}
.wcard-text p,.scard-text p{margin-top:16px;max-width:22em;font-size:clamp(18px,1.67vw,24px);line-height:1.3;color:var(--sub)}
.wcard-vis{position:relative;align-self:stretch}
.wcard-vis .ph{position:absolute;left:50%;top:13%;width:min(46%,360px);--pw:min(46%,360px);transform:translateX(-50%)}
.flo-bub{right:6%;top:24%;padding:.7em 1.1em;border-radius:1.3em 1.3em .35em 1.3em;background:#3D7BFF;color:#fff;font-size:clamp(15px,1.4vw,20px);font-weight:600;box-shadow:0 22px 36px -16px rgba(40,70,200,.6)}
.flo-bub.b2{right:auto;left:8%;top:52%;display:flex;gap:.4em;border-radius:1.3em 1.3em 1.3em .35em;background:#fff;box-shadow:0 22px 36px -16px rgba(20,24,60,.35)}
.flo-bub u{width:.5em;height:.5em;border-radius:50%;background:#9A9DAA;animation:st-dot 1s ease-in-out infinite}.flo-bub u:nth-child(2){animation-delay:.15s}.flo-bub u:nth-child(3){animation-delay:.3s}
.flo-obj.o1{right:auto;left:4%;top:8%;width:26%}
.flo-obj.o2{right:5%;top:52%;width:30%}
.orbit{position:absolute;left:50%;top:52%;width:0;height:0}
.orbit i{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);transform:translate(-50%,-50%);animation:orbit-in 6s ease-in-out infinite}
.orbit i:nth-child(1){width:clamp(380px,40vw,560px);height:clamp(380px,40vw,560px)}
.orbit i:nth-child(2){width:clamp(540px,56vw,800px);height:clamp(540px,56vw,800px);animation-delay:-2s}
.orbit i:nth-child(3){width:clamp(700px,72vw,1040px);height:clamp(700px,72vw,1040px);animation-delay:-4s}
@keyframes orbit-in{0%,100%{scale:1;opacity:.9}50%{scale:1.05;opacity:.45}}

/* ---- dark section */
.dk{margin-top:clamp(80px,11.1vw,160px);padding:clamp(72px,11.1vw,160px) 0 clamp(72px,9vw,128px);background:var(--ink2);color:#fff}
.bud{position:relative;display:flex;justify-content:center;gap:clamp(12px,2.8vw,40px);margin-bottom:clamp(40px,4.4vw,64px)}
.bud-i{position:relative;z-index:1;width:clamp(72px,11.1vw,160px);display:grid;justify-items:center;gap:clamp(12px,1.4vw,20px);cursor:pointer;-webkit-tap-highlight-color:transparent}
.bud-i .ball{width:78%;filter:blur(5px) saturate(.8);opacity:.55;scale:.86;transition:filter .5s var(--expo),opacity .5s,scale .7s var(--expo)}
.bud-i em{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:99px;font-style:normal;font-size:15px;font-weight:500;color:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:color .3s,background-color .3s,box-shadow .3s}
.bud-i:hover .ball{filter:blur(1.5px);opacity:.9}
.bud-i.is-on .ball{filter:none;opacity:1;scale:1.12}
.bud-i.is-on em{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.bud-light{position:absolute;left:50%;top:calc(-1*clamp(72px,11.1vw,160px));bottom:30%;width:min(520px,70%);transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0,transparent 0 158deg,color-mix(in srgb,var(--brand-hi) 55%,transparent) 172deg 188deg,transparent 202deg);filter:blur(22px);opacity:.75;pointer-events:none;left:var(--lx,50%);transition:left .8s var(--expo)}
.sx-head-dk h2{color:#fff}.sx-head-dk h2 span{color:rgba(255,255,255,.5)}
.sx-head-dk p{color:rgba(255,255,255,.6)}
.stack{position:relative;display:grid;gap:32px}
.scard{height:clamp(480px,43vw,620px);display:flex;align-items:center;color:#222326;background-image:radial-gradient(circle at 75% 100%,rgba(var(--tint),.4),rgba(var(--tint),.28) 10%,rgba(255,255,255,0) 64%)}
.scard-text{width:50%;padding:clamp(32px,5.55vw,80px);display:flex;flex-direction:column}
.scard h3{margin-top:0}.scard .tg+h3{margin-top:18px}
.scard-ph{display:none}
.stack-rail{position:absolute;z-index:3;top:0;bottom:0;right:0;width:50%;pointer-events:none;padding:clamp(20px,2.4vw,34px) 0}
.ph-st{--pw:min(300px,calc((100svh - 150px)*.44));margin-inline:auto;position:sticky;top:calc(50svh - var(--pw)*1.1)}
.ph-st img{transition:opacity .5s ease}
.ph-st img+img{position:absolute;left:calc(var(--pw)*.03);top:calc(var(--pw)*.03);width:calc(100% - var(--pw)*.06)}
.ph-st img:not(.is-on){opacity:0}
.ph-st img:first-child:not(.is-on){opacity:1}

/* ---- day by day */
.days4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,32px)}
.dcard{display:flex;flex-direction:column;height:clamp(520px,42vw,600px)}
.dcard-top{padding:clamp(24px,2.5vw,36px);padding-bottom:0;display:flex;flex-direction:column}
.dc-when{display:flex;align-items:baseline;gap:.22em;font-size:clamp(44px,4.45vw,64px);white-space:nowrap}
.dc-when small{font-size:.38em;font-weight:600;letter-spacing:-.01em}
.dcard-top p{margin-top:12px;font-size:clamp(16px,1.25vw,18px);line-height:1.35;color:var(--sub)}
.dc-src{margin-top:12px;font-size:13px;font-weight:500;color:rgba(31,32,37,.45)}
.dcard-vis{position:relative;flex:1;min-height:0;display:grid;place-items:end center}
.dc-obj{position:relative;display:grid;place-items:center;width:min(78%,250px);aspect-ratio:1;margin-bottom:8%}
.dc-obj>img,.dc-obj>svg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(20,24,60,.28));scale:var(--pop,1);transition:transform .7s var(--expo)}
.dc-obj>svg.medal365{width:82%;height:82%}
.dcard:hover .dc-obj>img,.dcard:hover .dc-obj>svg{transform:rotate(-5deg) scale(1.06)}
.dc-fruits{position:absolute;inset:0;z-index:2;pointer-events:none}
.dc-obj .sweep{position:absolute;inset:0;background-size:600% 600%;background-repeat:no-repeat;opacity:0;pointer-events:none;filter:drop-shadow(0 22px 20px rgba(20,24,60,.28))}
.dc-20.is-sweep .sweep{opacity:1}.dc-20.is-sweep .dc-obj>img{opacity:0;transform:none}

/* ---- the list that moves on by itself */
.more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.more-left{padding-left:clamp(0px,8.1vw,117px)}
.more-left>p{margin-inline:0}
.more-list{list-style:none;margin:clamp(28px,3.4vw,48px) 0 0;padding:0;display:grid;gap:8px;max-width:555px}
.more-i{border-radius:24px;background:var(--card);transform:scale(.925);transform-origin:50% 50%;opacity:.62;transition:transform .25s,opacity .25s}
.more-i.is-on{transform:none;opacity:1}
.more-i:hover{opacity:1}
.more-i button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.more-i b{display:block;font-size:clamp(20px,1.67vw,24px);line-height:1.1;font-weight:700;letter-spacing:-.01em}
.more-i small{display:block;margin-top:8px;font-size:clamp(15px,1.25vw,18px);line-height:1.35;color:var(--sub)}
.more-ring{position:relative;flex:none;width:39px;height:39px;display:grid;place-items:center;color:rgba(31,32,37,.5)}
.more-ring svg.r{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke:rgba(31,32,37,.16);stroke-width:2}
.more-ring .go{stroke:var(--ink2);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0)*100);stroke-linecap:round}
.more-ring .ic{width:16px;height:16px}
.more-i:not(.is-on) .more-ring .go,.more-i:not(.is-on) .more-ring .i-on{display:none}
.more-i.is-on .more-ring .i-off{display:none}
.more-stage{position:relative;justify-self:center;width:min(100%,460px);aspect-ratio:323/420;border-radius:24px;background-color:var(--card);background-image:radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--brand) 34%,transparent),transparent 66%);overflow:hidden}
.more-o{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.86) translateY(14px);transition:opacity .3s ease,transform .6s var(--expo)}
.more-o.is-on{opacity:1;transform:none}
.more-o img{width:62%;height:auto;filter:drop-shadow(0 30px 26px rgba(20,24,60,.28))}
.jn{width:58%;aspect-ratio:1.2;border-radius:22px;background:#fff;padding:10%;display:grid;align-content:center;justify-items:start;gap:12%;transform:rotate(-4deg);box-shadow:0 30px 40px -20px rgba(20,24,60,.4)}
.jn i{height:10px;border-radius:9px;background:#D9DCE6;width:100%}.jn i:nth-child(2){width:78%}.jn i:nth-child(3){width:52%}
.jn b{width:22px;height:22px;border-radius:50%;background:var(--brand)}

/* ---- privacy */
.priv{position:relative;overflow:hidden;height:clamp(420px,45vw,650px);border-radius:24px;display:grid;align-content:center;justify-items:center;text-align:center;padding:32px;color:#fff;background-color:var(--ink2);background-image:radial-gradient(circle at 50% 0,rgba(255,255,255,0) 40%,color-mix(in srgb,var(--brand-hi) 22%,transparent) 90%,color-mix(in srgb,var(--brand-hi) 42%,transparent))}
.priv-shape{position:absolute;left:50%;top:50%;width:min(86%,620px);height:auto;transform:translate(-50%,-50%);opacity:.16;filter:grayscale(1) brightness(1.5)}
.priv h2,.priv p{position:relative}
.priv p{max-width:520px;color:rgba(255,255,255,.62)}

/* ---- questions: the old block, on the new measure */
.bv .faq{padding-top:clamp(80px,11.1vw,160px);margin-top:0}
.bv .faq-head h2{font-size:clamp(38px,4.45vw,64px);font-weight:700;letter-spacing:-.03em}
.bv .faq-head p{font-size:clamp(18px,1.67vw,24px);line-height:1.3;color:var(--sub)}
.bv .faq-list{border-radius:24px;background:var(--card)}

/* ---- last call */
.fin{overflow:hidden}
.fin .sx-head{margin-bottom:0}
.fin .hx-btn{margin-top:28px}
.fin-row{position:relative;height:clamp(360px,42.6vw,613px);margin-top:clamp(28px,3vw,44px)}
.ph-fin{--pw:clamp(190px,20vw,290px);position:absolute;left:50%;top:6%;transform:translateX(-50%)}
.fo{position:absolute;height:auto;filter:drop-shadow(0 30px 26px rgba(20,24,60,.26))}
.fo-1{left:4%;top:18%;width:clamp(120px,17vw,250px)}
.fo-2{left:24%;top:42%;width:clamp(110px,15vw,220px)}
.fo-3{right:23%;top:40%;width:clamp(110px,15vw,220px)}
.fo-4{right:4%;top:14%;width:clamp(120px,17vw,250px)}
.bv .foot{margin-top:0;padding:clamp(56px,8vw,120px) 0 clamp(56px,8vw,120px);border-top:0}

/* ---- arriving (set by script, only for things still below the fold) */
.bv [data-enter].pre{opacity:0;transform:translateY(12px)}
.bv [data-enter].in{opacity:1;transform:none;transition:opacity .35s ease,transform .5s var(--app-out);transition-delay:calc(var(--n,0)*60ms)}

/* ---- narrower screens */
@media (max-width:1099px){
  .days4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dcard{height:auto;min-height:440px}
  .dc-obj{width:min(56%,220px)}
}
@media (max-width:899px){
  .tall3{grid-template-columns:1fr;gap:16px}
  .tcard{height:560px}
  .tcard-vis .ph{width:min(70%,300px);--pw:min(70%,300px)}
  .wcard,.wcard-r{margin-top:16px;height:auto;grid-template-columns:1fr}
  .wcard-text{padding:32px 28px 8px}
  .wcard-r .wcard-text{order:-1}
  .wcard-vis{height:400px}
  .wcard-vis .ph{width:min(58%,250px);--pw:min(58%,250px);top:8%}
  .stack{gap:16px}
  .stack-rail{display:none}
  .scard{height:auto;flex-direction:column;align-items:stretch}
  .scard-text{width:auto;padding:32px 28px 0}
  .scard-ph{display:block;height:300px;position:relative;margin-top:28px}
  .scard-ph .ph{--pw:200px;position:absolute;left:28px;top:0}
  .more{grid-template-columns:1fr}
  .more-left{padding-left:0}
  .more-list{max-width:none;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .more-list::-webkit-scrollbar{display:none}
  .more-i{flex:0 0 82%;scroll-snap-align:start;transform:none}
  .more-i button{height:100%;align-items:flex-start}
  .more-stage{width:min(100%,360px)}
  .fo-1{left:-6%}.fo-4{right:-6%}.fo-2{left:6%;top:56%}.fo-3{right:6%;top:56%}
  .bud-i em{height:28px;padding:0 10px;font-size:13px}
}
@media (max-width:599px){.days4{grid-template-columns:1fr}.dcard{min-height:420px}.bv .getcard{display:none}}
@media (prefers-reduced-motion:reduce){.flo-ball .ball,.flo-ball>i,.orbit i,.flo-bub u{animation:none}.more-i,.more-o,.bud-i .ball{transition:none}}
/* layout 2, first look fixes: the buddy light points down; the far buddies sit clear of the QR card; a fuller glow behind the phone */
.bud-light{background:conic-gradient(from 0deg at 50% 0,transparent 0 160deg,color-mix(in srgb,var(--brand-hi) 60%,transparent) 174deg 186deg,transparent 200deg)}
.bv .sb-l2{--dy:.36}.bv .sb-r2{--dy:.38}
.hx-bg{background:radial-gradient(60% 28% at 50% 74%,color-mix(in srgb,var(--brand) 46%,transparent),transparent 72%),radial-gradient(40% 22% at 14% 80%,color-mix(in srgb,var(--brand-hi) 44%,transparent),transparent 72%),radial-gradient(40% 22% at 88% 70%,rgba(255,171,148,.42),transparent 72%),linear-gradient(180deg,#E3EAF6 0,#EEF3FA 26%,#fff 56%)}
/* layout 2: on phones the sideways list must not widen its column */
.more-left,.more-stage{min-width:0}
@media (max-width:899px){.more{grid-template-columns:minmax(0,1fr)}.more-stage{aspect-ratio:1/1}}
/* layout 2, after the review */
.bv .story .st-gl{pointer-events:none}                         /* the buddies beside the phone take the clicks */
.bv .story :focus-visible{outline-color:var(--brand-deep)}
.bv .story .st-pause{display:none}
.bv .story{height:max(820px,calc(100svh + 180px))}             /* the hero always ends below the first screen */
.hx-still{display:none}
html:not(.js) .hx-still{display:block;--pw:300px;position:absolute;left:50%;top:560px;transform:translateX(-50%)}
html:not(.js) .story .st-gl,html:not(.js) .story .st-dom,html:not(.js) .getcard{display:none}
html:not(.js) .rot{width:auto!important;height:auto;overflow:visible;margin:0;top:0}
html:not(.js) .rot-w{position:static}
.wcard-vis,.dcard-vis{overflow:hidden}
.ph-chat .chat-scr{display:flex;flex-direction:column;align-items:flex-start;gap:4.5%;aspect-ratio:570/1239;padding:20% 7% 0;border-radius:calc(var(--pw)*.14);background:linear-gradient(180deg,#0B0E1E,#06070D);color:#fff;font-size:clamp(11px,1.05vw,15px);line-height:1.35;overflow:hidden}
.wcard-vis .ph-chat{container-type:inline-size}
.chat-who{display:flex;align-items:center;gap:.7em}.chat-who .ball{width:2.6em}
.chat-who b{display:grid;font-weight:700}.chat-who small{font-weight:400;font-size:.8em;color:rgba(255,255,255,.55)}
.cb{max-width:88%;font-weight:500}
.cb.me{align-self:flex-end;padding:.55em .9em;border-radius:1.1em 1.1em .3em 1.1em;background:#22294A}
.chat-pill{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1em;border-radius:99px;background:#3969F7;font-weight:600}
.chat-pill .ic{width:1.2em;height:1.2em}
@media (max-width:899px){
  .bv .story{height:max(760px,calc(100svh + 110px))}
  .bv .sideb{left:clamp(calc(var(--s)/2 + 8px),calc(50% + var(--dx)*var(--ph-h,700px)),calc(100% - var(--s)/2 - 8px))}
  .fo-2{left:-5%;width:104px}.fo-3{right:-5%;width:104px}
  .ph-chat .chat-scr{font-size:12px}
}
@media (min-width:700px) and (max-width:899px){
  .stack-rail{display:block}.scard-ph{display:none}
  .scard{height:clamp(420px,58vw,520px);flex-direction:row;align-items:center}
  .scard-text{width:52%;padding:36px}
}

/* =====================================================================
   Layout 3 (body.nm): a calm, narrow page. Three small menu pills, a hero that is one rounded card,
   numbered steps, tabs beside a phone, one dark card for the day-by-day facts, a plain table,
   a sideways row, the buddies, a plain list of questions, one dark last card.
   Scoped to .nm so it wins over the older layers above.
   ===================================================================== */
.nm{--ink:#0A0A0A;--ink2:#6B6B6B;--ink3:#A1A1A1;--paper:#fff;--paper2:#F5F5F5;--line:rgba(10,10,10,.1);--e:cubic-bezier(.22,1,.36,1);--pad:32px;background:#fff;color:var(--ink);font-size:16px;line-height:1.5}
.n-in{width:100%;max-width:1040px;margin-inline:auto;padding-inline:var(--pad)}
.nm h2{font-size:36px;line-height:1.1;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.nm h3{font-size:22px;line-height:1.5;font-weight:600;letter-spacing:0}

/* strip + menu */
.n-strip{margin:0;height:32px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden}
.n-strip span{width:1px;height:12px;background:rgba(255,255,255,.3)}
.n-nav{position:fixed;inset:0 0 auto 0;top:32px;z-index:60;pointer-events:none;transition:top .3s var(--e)}
.n-nav.is-up{top:0}
.n-nav-in{width:100%;max-width:1040px;margin-inline:auto;padding-inline:var(--pad);height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.n-nav-in>*{pointer-events:auto}
.n-pill{display:flex;align-items:center;height:40px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.n-brand{justify-self:start;gap:8px;padding:0 16px 0 8px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.n-brand .logo{width:24px;height:24px;border-radius:7px;box-shadow:none}
.n-links{padding:4px;gap:0}
.n-links a{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap;transition:color .15s,background-color .15s}
.n-links a .ic{width:14px;height:14px}
.n-links a:hover,.n-links a.is-on{color:var(--ink);background:rgba(10,10,10,.05)}
.n-get{justify-self:end}

/* buttons */
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;background:var(--ink);color:#fff;font-size:16px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--e),transform .2s var(--e),border-color .15s}
.n-btn:hover{background:#2A2A2A}
.n-btn:active{transform:scale(.97)}
.n-btn-sm{height:40px;padding:0 16px;font-size:14px;font-weight:500}
.n-btn-white{background:#fff;color:var(--ink)}.n-btn-white:hover{background:#EDEDED}
.n-btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.n-btn-glass:hover{background:rgba(255,255,255,.2)}
.n-btn-wide{width:100%}
.n-arw{width:16px;height:16px;transition:transform .2s var(--e)}
.n-btn:hover .n-arw{transform:translateX(3px)}
.n-crown{width:14px;height:14px;fill:#C9961A;stroke:none}

/* hero: one rounded card */
.n-hero{position:relative;padding:16px 16px 0}
.nm .story{margin:0 auto;max-width:1920px;height:clamp(700px,calc(100svh - 64px),960px);min-height:0;border-radius:28px;color:#fff;cursor:auto;box-shadow:none;
  background:radial-gradient(90% 70% at 50% 108%,var(--brand) 0,color-mix(in srgb,var(--brand-deep) 70%,var(--night)) 38%,var(--night) 78%),var(--night)}
.nm .story::before,.nm .story .st-halo,.nm .story .st-floor,.nm .story .hx-bg,.nm .story .st-pause{display:none}
.nm .story .hero-say{top:clamp(120px,17vh,160px);left:0;right:0;width:100%;max-width:1040px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:start;text-align:left;color:#fff;pointer-events:none}
.n-chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;font-weight:500;color:rgba(255,255,255,.8);white-space:nowrap}
.nm .story .hero-say h1{margin-top:28px;height:auto;font-size:56px;line-height:1.02;font-weight:600;letter-spacing:-.03em;text-shadow:none;text-wrap:nowrap}
.nm .story .hero-say h1 .n-dim{color:rgba(255,255,255,.55)}
.nm .story .hero-say p{margin:64px 0 0;max-width:44ch;white-space:normal;font-size:17px;line-height:1.5;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.8);text-wrap:pretty}
.nm .story .hero-say p b{font-weight:500;color:#fff}
.n-say-btns{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;pointer-events:auto}
.nm .story .st-gl{pointer-events:none;filter:drop-shadow(0 50px 46px rgba(2,4,24,.5)) drop-shadow(0 12px 16px rgba(2,4,24,.3))}
.nm .story :focus-visible{outline-color:#fff}
.nm .sideb{left:calc(50% + var(--dx)*var(--ph-h,600px));top:calc(var(--ph-top,420px) + var(--dy)*var(--ph-h,600px));--s:calc(var(--k)*var(--ph-h,600px))}
.nm .sb-l2{--dx:-.63;--dy:.34;--k:.13}.nm .sb-l1{--dx:-.41;--dy:.24;--k:.185}.nm .sb-r1{--dx:.41;--dy:.2;--k:.185}.nm .sb-r2{--dx:.63;--dy:.36;--k:.13}
.n-live{position:absolute;z-index:5;left:50%;bottom:32px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font-size:16px;font-weight:500;white-space:nowrap;animation:n-rise .9s var(--e) 1.2s both}
.n-live i{position:relative;width:10px;height:10px;border-radius:50%;background:#fff}
.n-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;animation:n-ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes n-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}}
@keyframes n-rise{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* sections */
.n-sec{padding:112px 0}
.n-sec-s{padding:64px 0}
.n-head p,.n-split-text p{margin-top:16px;max-width:46ch;font-size:17px;line-height:1.5;color:var(--ink2)}
.n-center{text-align:center;margin-top:28px}
.n-card{border-radius:28px;background:var(--paper2);overflow:hidden}

/* same moment */
.n-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.n-split>*{height:600px}
.n-split-text{display:flex;flex-direction:column;padding:56px}
.n-split-text h2{max-width:16ch}
.n-split-text p{margin-top:20px;max-width:38ch}
.n-split-text .n-btn{margin-top:auto}
.n-slides{position:relative;background:radial-gradient(80% 60% at 50% 100%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%),#EFEFEF}
.n-slides img{position:absolute;left:50%;top:46%;width:58%;height:auto;transform:translate(-50%,-50%) scale(.94);opacity:0;filter:blur(6px) drop-shadow(0 30px 26px rgba(10,10,30,.25));transition:opacity .7s var(--e),transform .9s var(--e),filter .7s var(--e)}
.n-slides img.is-on{opacity:1;transform:translate(-50%,-50%);filter:drop-shadow(0 30px 26px rgba(10,10,30,.25))}
.n-dots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:5px}
.n-dots i{width:5px;height:5px;border-radius:5px;background:rgba(10,10,10,.25);transition:width .4s var(--e),background-color .3s}
.n-dots i.is-on{width:18px;background:var(--ink)}

/* steps */
.n-steps{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.n-step{position:relative;overflow:hidden;display:flex;flex-direction:column;height:403px;padding:28px 28px 0;border-radius:28px;border:1px solid var(--line)}
.n-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink2)}
.n-step h3{margin-top:16px}
.n-step p{margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink2)}
.n-step-vis{position:relative;flex:1;min-height:0;margin:24px -28px 0;border-top:1px solid var(--line);background:var(--paper2);overflow:hidden}
.n-step-vis img{position:absolute;left:50%;top:26px;width:62%;height:auto;transform:translateX(-50%);border-radius:26px;box-shadow:0 0 0 5px #0d0e12,0 0 0 6px #3B3D48,0 24px 40px -20px rgba(10,10,30,.5)}
.n-step-vis.v1 img{top:auto;bottom:-22%}
.n-also{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:15px;color:var(--ink3)}
.n-also span{height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--paper2);font-size:13px;font-weight:500;color:var(--ink)}

/* the tabbed panel */
.n-panel-wrap{padding:0 16px}
.n-panel{max-width:1920px;margin-inline:auto;border-radius:28px 28px 0 0;background:var(--paper2);padding:80px 0 112px}
.n-panel-b{border-radius:28px;padding:80px 0}
.n-feat{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:48px;min-height:606px}
.n-feat-l{display:flex;flex-direction:column;min-width:0}
.n-tabs{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px;max-width:640px}
.n-tab{display:inline-flex;align-items:center;gap:6px;height:39px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);font:500 14px/1 var(--font);cursor:pointer;white-space:nowrap;transition:color .15s,background-color .15s,border-color .15s}
.n-tab .ic{width:15px;height:15px}
.n-tab:hover{color:var(--ink)}
.n-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.n-panes{position:relative;margin-top:auto;padding-top:40px;display:grid}
.n-pane{grid-area:1/1;max-width:46ch;opacity:0;visibility:hidden;transform:translateY(8px);filter:blur(4px);transition:opacity .25s ease,transform .5s var(--e),filter .4s var(--e),visibility 0s .25s}
.n-pane.is-on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.12s,.12s,.12s,0s}
.n-pane p{margin-top:12px;font-size:17px;line-height:1.5;color:var(--ink2)}
.n-phone{position:relative;width:278px;height:606px;border-radius:44px;background:#0d0e12;box-shadow:0 0 0 1px #3B3D48,0 40px 60px -30px rgba(10,10,30,.45);padding:7px;align-self:start}
.n-scr{position:absolute;inset:7px;border-radius:38px;overflow:hidden;background:#06070D;opacity:0;transform:scale(1.02);transition:opacity .35s ease,transform .6s var(--e)}
.n-scr.is-on{opacity:1;transform:none}
.n-scr img,.n-scr video{display:block;width:100%;height:100%;object-fit:cover}
.n-scr .chat-scr{display:flex;flex-direction:column;align-items:flex-start;gap:16px;height:100%;padding:64px 18px 0;color:#fff;font-size:13.5px;line-height:1.35;background:linear-gradient(180deg,#0B0E1E,#06070D)}
.n-scr .chat-who{display:flex;align-items:center;gap:10px}.n-scr .chat-who .ball{width:34px}
.n-scr .chat-who b{display:grid;font-weight:700}.n-scr .chat-who small{font-weight:400;font-size:.8em;color:rgba(255,255,255,.55)}
.n-scr .cb{max-width:90%;font-weight:500}
.n-scr .cb.me{align-self:flex-end;padding:.55em .9em;border-radius:1.1em 1.1em .3em 1.1em;background:#22294A}
.n-scr .chat-pill{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1em;border-radius:99px;background:#3969F7;font-weight:600}
.n-scr .chat-pill .ic{width:1.2em;height:1.2em}

/* day by day: one dark card */
.n-wide{position:relative;z-index:1;padding:0 16px;margin-top:-32px}
.n-dark{max-width:1920px;margin-inline:auto;border-radius:28px;color:#fff;padding:56px 0;
  background:radial-gradient(80% 90% at 12% 100%,color-mix(in srgb,var(--brand) 70%,transparent) 0,transparent 62%),radial-gradient(60% 60% at 100% 0,color-mix(in srgb,var(--brand-deep) 60%,transparent) 0,transparent 70%),var(--night)}
.n-day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px 48px;min-height:640px}
.n-day-l h2{max-width:18ch}
.n-day-l p{margin-top:16px;max-width:38ch;font-size:15px;line-height:1.5;color:rgba(255,255,255,.7)}
.n-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-self:start}
.n-tile{position:relative;overflow:hidden;min-height:214px;padding:24px;border-radius:20px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .3s}
.n-tile:hover{background:rgba(255,255,255,.17)}
.n-tile b{display:block;font-size:48px;line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.n-tile strong{display:block;margin-top:14px;font-size:16px;font-weight:600}
.n-tile p{margin-top:4px;max-width:24ch;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.72)}
.n-tile small{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.5)}
.n-tobj{position:absolute;right:14px;top:14px;width:76px;height:76px;display:grid;place-items:center}
.n-tobj>img,.n-tobj>svg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));transition:transform .7s var(--e)}
.n-tile:hover .n-tobj>img,.n-tile:hover .n-tobj>svg{transform:rotate(-6deg) scale(1.08)}
.n-tobj .sweep{position:absolute;inset:0;background-size:600% 600%;background-repeat:no-repeat;opacity:0;pointer-events:none}
.dc-20.is-sweep .sweep{opacity:1}.dc-20.is-sweep .n-tobj>img{opacity:0}
.n-day-btns{grid-column:1/-1;align-self:end;margin:0;display:flex;flex-wrap:wrap;gap:12px}

/* table */
.n-table{margin-top:40px;border-radius:28px;border:1px solid var(--line);background:var(--paper2);overflow:hidden}
.n-table table{width:100%;border-collapse:collapse;font-size:15px}
.n-table th,.n-table td{padding:16px 20px;text-align:center;border-top:1px solid var(--line);font-weight:500;vertical-align:middle}
.n-table thead th,.n-table thead td{border-top:0;padding:28px 20px;font-weight:600;line-height:1.3}
.n-table thead th>svg{display:block;margin:0 auto 12px;width:28px;height:28px}
.n-table thead .logo{border-radius:8px;box-shadow:none}
.n-table tbody th{text-align:left;font-weight:600;background:#fff}
.n-table tbody td{background:#fff;color:var(--ink2)}
.n-table .n-me{background:var(--ink)!important;color:#fff!important;border-top-color:rgba(255,255,255,.12);width:22%}
.n-table td:last-child,.n-table th:last-child{width:34%}
.n-table .ic{width:18px;height:18px;stroke-width:2.4}
.n-no{color:var(--ink3)}
.n-fine{margin-top:16px;font-size:13px;color:var(--ink3)}

/* sideways row */
.n-clip{overflow:hidden}
.n-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.n-arrows{display:flex;gap:8px;flex:none}
.n-arrows button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background-color .15s,opacity .2s}
.n-arrows button:hover{background:var(--paper2)}
.n-arrows button:disabled{opacity:.35;cursor:default}
.n-arrows .ic{width:16px;height:16px}
.n-row{list-style:none;margin:40px calc(50% - 50vw) 0;padding:0 calc(50vw - 50%);scroll-padding-inline:calc(50vw - 50%);display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.n-row::-webkit-scrollbar{display:none}
.n-mcard{flex:0 0 316px;scroll-snap-align:start}
.n-mvis{position:relative;height:316px;border-radius:28px;background:radial-gradient(80% 60% at 50% 100%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 70%),var(--paper2);display:grid;place-items:center;overflow:hidden}
.n-mvis img{width:56%;height:auto;filter:drop-shadow(0 24px 22px rgba(10,10,30,.22));transition:transform .7s var(--e)}
.n-mcard:hover .n-mvis img{transform:scale(1.06) rotate(-3deg)}
.n-mlabel{position:absolute;left:16px;bottom:16px;height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:14px;font-weight:600}
.n-mcard p{margin:14px 4px 0;font-size:15px;line-height:1.45;color:var(--ink2);max-width:30ch}
.nm .jn{width:54%;aspect-ratio:1.2;border-radius:20px;background:#fff;padding:10%;display:grid;align-content:center;justify-items:start;gap:12%;transform:rotate(-4deg);box-shadow:0 24px 34px -18px rgba(10,10,30,.35)}
.nm .jn i{height:9px;border-radius:9px;background:#DDD;width:100%}.nm .jn i:nth-child(2){width:78%}.nm .jn i:nth-child(3){width:52%}
.nm .jn b{width:20px;height:20px;border-radius:50%;background:var(--brand)}

/* buddies */
.n-buddy{position:relative;min-height:min(100svh,860px);display:grid;align-content:end;justify-items:center;gap:56px;padding:96px 24px 96px;overflow:hidden;background:linear-gradient(180deg,#fff 0,#fff 46%,var(--paper2) 100%)}
.n-buds{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,3vw,40px)}
.n-bud{width:clamp(64px,11vw,132px);cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:width .7s var(--e),filter .5s,opacity .5s;opacity:.8;filter:saturate(.85)}
.n-bud .ball{width:100%;font-size:inherit;filter:drop-shadow(0 26px 24px rgba(10,10,30,.22))}
.n-bud:hover{opacity:1}
.n-bud.is-on{width:clamp(120px,22vw,300px);opacity:1;filter:none}
.n-buddy-say{text-align:center;display:grid;justify-items:center}
.n-buddy-say p{margin-top:12px;font-size:17px;color:var(--ink2)}
.n-buddy-say .n-btn{margin-top:24px}

/* questions */
.n-qa-wrap{margin-top:0}
.n-qa{margin-top:48px;border-radius:20px;border:1px solid var(--line);background:#fff;overflow:hidden}
.n-qa details{border-top:1px solid var(--line)}
.n-qa details:first-child{border-top:0}
.n-qa summary{list-style:none;display:flex;align-items:center;gap:16px;padding:20px 32px;font-size:17px;font-weight:500;cursor:pointer;transition:background-color .15s}
.n-qa summary::-webkit-details-marker{display:none}
.n-qa summary:hover{background:rgba(10,10,10,.02)}
.n-qa summary span{flex:1}
.n-qi{width:18px;height:18px;color:var(--ink3);flex:none}
.n-plus{width:18px;height:18px;color:var(--ink3);flex:none;transition:transform .35s var(--e)}
.n-qa details[open] .n-plus{transform:rotate(45deg)}
.n-qa details p{padding:0 32px 24px 66px;max-width:74ch;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.n-qa details[open] p{animation:n-open .5s var(--e)}
.n-qa a,.n-head a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@keyframes n-open{from{opacity:0;transform:translateY(-6px)}}

/* last card + footer */
.n-last{margin-top:64px}
.n-end{position:relative;overflow:hidden;max-width:1920px;margin-inline:auto;min-height:680px;border-radius:28px;background:#000;color:#fff;display:grid;align-content:center;justify-items:center;text-align:center;padding:64px 24px;isolation:isolate}
.n-end::before{content:"";position:absolute;z-index:-1;left:50%;top:-140%;width:180%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#262626;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px}
.n-end-ball{position:absolute;left:32%;top:20%;width:56px;font-size:56px;animation:n-bob 6s ease-in-out infinite;box-shadow:0 0 0 8px rgba(255,255,255,.12),0 0 60px 20px var(--glow)}
@keyframes n-bob{50%{translate:14px -12px}}
.n-end h2{font-size:36px}
.n-end p{margin-top:24px}
.n-end-qr{margin-top:36px;display:flex;align-items:center;gap:14px;font-size:13px;color:rgba(255,255,255,.6);text-align:left;max-width:240px}
.n-end-qr .qr{width:64px;height:64px;border-radius:10px;padding:5px;background:#fff;flex:none}
.n-foot{padding:72px 0 56px}
.n-foot-in{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px}
.n-foot-logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.n-foot-logo .logo{border-radius:8px;box-shadow:none}
.n-foot-brand p{margin:10px 0 18px;font-size:15px;color:var(--ink2)}
.n-foot-col{display:grid;gap:10px;align-content:start;font-size:14px}
.n-foot-col b{font-weight:600;margin-bottom:4px}
.n-foot-col a{color:var(--ink2);transition:color .15s}.n-foot-col a:hover{color:var(--ink)}
.n-foot-fine{grid-column:1/-1;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink3)}

/* arriving: a fade, a small rise and a blur that clears (only for what starts below the fold; set by script) */
.nm [data-rv].pre{opacity:0;transform:translateY(16px);filter:blur(8px)}
.nm [data-rv].in{transition:opacity .7s var(--e),transform .7s var(--e),filter .7s var(--e);transition-delay:calc(var(--d,0)*80ms)}

/* without scripts */
html:not(.js) .nm .hx-still{top:440px;--pw:260px}
html:not(.js) .n-pane{position:static;opacity:1;visibility:visible;transform:none;filter:none;grid-area:auto;margin-top:20px}
html:not(.js) .n-tabs,html:not(.js) .n-end-qr{display:none}

/* narrower */
@media (max-width:1023px){
  .n-links a .ic{display:none}
  .nm .story .hero-say{grid-template-columns:1fr;gap:0}
  .nm .story .hero-say p{margin-top:20px}
  .nm .story .hero-say h1{font-size:clamp(38px,6.4vw,56px)}
  .n-day{grid-template-columns:1fr}
  .n-feat{gap:32px}
}
@media (max-width:767px){
  .nm{--pad:20px}
  .n-strip span,.n-strip span~*{display:none}
  .n-nav-in{grid-template-columns:auto 1fr;height:56px}
  .n-links{display:none}
  .n-hero,.n-panel-wrap,.n-wide{padding-inline:12px}
  .n-hero{padding-top:12px}
  .nm .story{height:clamp(720px,calc(100svh - 44px),900px)}
  .nm .story .hero-say{top:92px}
  .nm .story .hero-say h1{margin-top:18px;font-size:clamp(34px,10.4vw,46px);text-wrap:balance}
  .n-chip{height:32px;font-size:12px}
  .n-live{bottom:20px;height:42px;font-size:13.5px;padding:0 16px}
  .nm .sb-l2,.nm .sb-r2{display:none}
  .nm .sb-l1{--dx:-.3;--dy:.3;--k:.1}.nm .sb-r1{--dx:.3;--dy:.42;--k:.1}
  .nm .sideb{left:clamp(calc(var(--s)/2 + 8px),calc(50% + var(--dx)*var(--ph-h,600px)),calc(100% - var(--s)/2 - 8px))}
  .nm h2,.n-end h2{font-size:30px}
  .n-sec{padding:72px 0}.n-sec-s{padding:48px 0}
  .n-split{grid-template-columns:1fr}
  .n-split>*{height:auto}
  .n-split-text{padding:32px 24px;min-height:340px}
  .n-slides{height:340px}
  .n-steps{grid-template-columns:1fr;margin-top:40px}
  .n-step{height:380px}
  .n-panel{padding:56px 0 88px}.n-panel-b{padding:56px 0}
  .n-feat{grid-template-columns:1fr;min-height:0}
  .n-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .n-tabs::-webkit-scrollbar{display:none}
  .n-panes{margin-top:0;padding-top:28px;min-height:150px;align-content:start}
  .n-phone{justify-self:center}
  .n-dark{padding:40px 0}
  .n-day{min-height:0}
  .n-tiles{gap:8px}
  .n-tile{padding:16px;min-height:0}
  .n-tile b{font-size:36px}
  .n-tobj{width:48px;height:48px;right:10px;top:10px}
  .n-table th,.n-table td{padding:12px 10px;font-size:13.5px}
  .n-table thead th,.n-table thead td{padding:18px 8px}
  .n-mcard{flex-basis:260px}.n-mvis{height:260px}
  .n-row{margin-top:28px}
  .n-buddy{min-height:0;padding:72px 20px;gap:40px}
  .n-qa summary{padding:16px 18px;gap:12px;font-size:16px}
  .n-qa details p{padding:0 18px 20px 48px}
  .n-end{min-height:560px}.n-end::before{width:320%;top:-60%}
  .n-foot-in{grid-template-columns:1fr 1fr}
  .n-foot-brand{grid-column:1/-1}
  .n-end-qr{display:none}
}
@media (prefers-reduced-motion:reduce){.n-live,.n-live i::after,.n-end-ball{animation:none}.n-slides img,.n-pane,.n-scr,.n-bud{transition:none}}
/* layout 3, hero in the "paper studio" look: a pale backdrop, the phone floating whole and turning slowly, a soft shadow under it */
.nm .story{height:clamp(780px,calc(100svh + 100px),1040px);color:var(--ink);background:radial-gradient(70% 60% at 50% 58%,#fff 0,#F6F6F6 45%,#EAEAEA 100%)}
.nm .story::after{content:"";position:absolute;left:50%;top:calc(var(--ph-top,400px) + var(--ph-h,560px) + 26px);width:calc(var(--ph-h,560px)*.86);height:calc(var(--ph-h,560px)*.075);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(10,10,20,.26),rgba(10,10,20,.1) 55%,transparent);filter:blur(7px);pointer-events:none;animation:n-shadow 7s ease-in-out infinite}
@keyframes n-shadow{50%{scale:.94 1;opacity:.8}}
.nm .story .hero-say{color:var(--ink)}
.nm .story .hero-say h1 .n-dim{color:rgba(10,10,10,.38)}
.nm .story .hero-say p{color:var(--ink2)}.nm .story .hero-say p b{color:var(--ink)}
.nm .story .hero-say .rot-pic small{color:var(--ink3)}
.nm .story .hero-say .rot-pic img{filter:drop-shadow(0 8px 12px rgba(10,10,20,.2))}
.nm .n-chip{background:rgba(10,10,10,.06);color:var(--ink2);-webkit-backdrop-filter:none;backdrop-filter:none}
.nm .n-say-btns .n-btn-white{background:var(--ink);color:#fff}.nm .n-say-btns .n-btn-white:hover{background:#2A2A2A}
.nm .n-say-btns .n-btn-glass{background:#fff;border-color:var(--line);color:var(--ink)}.nm .n-say-btns .n-btn-glass:hover{background:var(--paper2)}
.nm .n-live{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);height:44px;bottom:24px;font-size:15px}
.nm .n-live i,.nm .n-live i::after{background:#22B573}
.nm .story .st-gl{filter:drop-shadow(0 30px 30px rgba(10,10,20,.22)) drop-shadow(0 8px 10px rgba(10,10,20,.16))}
.nm .story :focus-visible{outline-color:var(--ink)}
.nm .sideb .ball{filter:drop-shadow(0 18px 16px rgba(10,10,20,.2))}
.nm .sb-l2{--dy:.62}.nm .sb-l1{--dy:.36}.nm .sb-r1{--dy:.3}.nm .sb-r2{--dy:.66}
@media (max-width:767px){.nm .story{height:clamp(820px,calc(100svh + 150px),1000px)}.nm .sb-l1{--dy:.5}.nm .sb-r1{--dy:.62}}
@media (prefers-reduced-motion:reduce){.nm .story::after{animation:none}}
.n-strip em{font-style:normal}
@media (max-width:767px){.n-strip em{display:none}}
/* layout 3, plain hero: no phone, no buddies; the headline is the picture. Big words, a big rotating object, one line and two buttons under it */
.nm .story[data-plain]{height:auto;min-height:clamp(600px,calc(100svh - 64px),860px);display:flex}
.nm .story[data-plain]::after,.nm .story[data-plain] .st-gl,.nm .story[data-plain] .st-dom,.nm .story[data-plain] .sideballs,.nm .story[data-plain] .st-copy,.nm .story[data-plain] .st-cta,.nm .story[data-plain] .hx-still{display:none!important}
.nm .story[data-plain] .hero-say{position:relative;top:auto;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-top:clamp(104px,15vh,150px);padding-bottom:clamp(36px,6vh,64px)}
.nm .story[data-plain] .n-say-l{margin-block:auto;padding-block:24px}
.nm .story[data-plain] .hero-say h1{margin-top:28px;font-size:clamp(44px,7.6vw,110px);line-height:.98;letter-spacing:-.04em;font-weight:600}
.nm .story[data-plain] .n-say-r{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line)}
.nm .story[data-plain] .hero-say p{margin:0;max-width:40ch;font-size:clamp(17px,1.5vw,20px)}
.nm .story[data-plain] .n-say-btns{margin:0}
.nm .story[data-plain] .n-say-btns .n-btn{height:48px;padding:0 24px;font-size:16px;font-weight:600}
@media (max-width:767px){
  .nm .story[data-plain]{min-height:clamp(560px,calc(100svh - 56px),760px)}
  .nm .story[data-plain] .hero-say{padding-top:96px;padding-bottom:28px}
  .nm .story[data-plain] .hero-say h1{font-size:clamp(40px,12.6vw,64px);text-wrap:nowrap}
}
@media (max-width:767px){.nm .story[data-plain] .hero-say h1{font-size:clamp(32px,10.4vw,60px)}}
/* plain hero, centred */
.nm .story[data-plain] .hero-say{align-items:center;text-align:center}
.nm .story[data-plain] .n-say-l{display:flex;flex-direction:column;align-items:center}
.nm .story[data-plain] .n-say-r{flex-direction:column;align-items:center;justify-content:center;gap:22px;border-top:0;padding-top:0}
.nm .story[data-plain] .hero-say p{max-width:46ch;text-align:center}
.nm .story[data-plain] .n-say-btns{justify-content:center}
/* "What the app does" in the dark frame */
.n-panel-dark{border-radius:28px;padding:80px 0;color:#fff;background:radial-gradient(80% 90% at 12% 100%,color-mix(in srgb,var(--brand) 70%,transparent) 0,transparent 62%),radial-gradient(60% 60% at 100% 0,color-mix(in srgb,var(--brand-deep) 60%,transparent) 0,transparent 70%),var(--night)}
.n-panel-dark .n-tab{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.n-panel-dark .n-tab:hover{color:#fff;background:rgba(255,255,255,.16)}
.n-panel-dark .n-tab.is-on{background:#fff;border-color:#fff;color:var(--ink)}
.n-panel-dark .n-pane p{color:rgba(255,255,255,.72)}
.n-panel-dark .n-crown{fill:#F2C14E}
.n-panel-dark .n-phone{box-shadow:0 0 0 1px rgba(255,255,255,.22),0 40px 60px -24px rgba(0,0,0,.6)}
.n-panel-dark :focus-visible{outline-color:#fff}
/* day by day as a timeline: quit day on the left, four stops along one line that draws itself in */
.n-tl-wrap{position:relative;margin-top:72px}
.n-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.n-tl-i{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.n-tl-i .n-tobj{position:static;width:112px;height:112px;margin-bottom:28px}
.n-tl-i .n-tobj>img,.n-tl-i .n-tobj>svg{filter:drop-shadow(0 16px 14px rgba(10,10,30,.2))}
.n-tl-i:hover .n-tobj>img,.n-tl-i:hover .n-tobj>svg{transform:rotate(-6deg) scale(1.08)}
.n-tl-i .n-tobj{position:relative}
.n-tl-dot{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--ink);margin-bottom:26px;transition:box-shadow .3s,scale .4s var(--e)}
.n-tl-i:hover .n-tl-dot{box-shadow:inset 0 0 0 5px var(--brand);scale:1.25}
.n-tl-line{position:absolute;left:0;right:0;top:147px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.n-tl-line i{display:block;height:100%;background:var(--ink);transform-origin:0 50%}
.n-tl-wrap.pre .n-tl-line i{transform:scaleX(0)}
.n-tl-wrap.in .n-tl-line i{transition:transform 1.8s var(--e) .3s}
.n-tl-start{position:absolute;left:0;top:104px;transform:translateY(-100%);display:none}
.n-tl-i b{font-size:48px;line-height:1;font-weight:600;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.n-tl-i b small{font-size:18px;font-weight:600;letter-spacing:-.01em}
.n-tl-i p{margin-top:12px;max-width:24ch;font-size:15px;line-height:1.45;color:var(--ink2)}
.n-tl-src{margin-top:10px;font-size:12.5px;color:var(--ink3)}
.n-tl-wrap.pre .n-tl-i{opacity:0;transform:translateY(12px)}
.n-tl-wrap.in .n-tl-i{transition:opacity .6s var(--e),transform .6s var(--e)}
.n-tl-wrap.in .n-tl-i:nth-child(1){transition-delay:.35s}.n-tl-wrap.in .n-tl-i:nth-child(2){transition-delay:.7s}.n-tl-wrap.in .n-tl-i:nth-child(3){transition-delay:1.05s}.n-tl-wrap.in .n-tl-i:nth-child(4){transition-delay:1.4s}
.nm .n-tl-wrap[data-rv].pre{opacity:1;transform:none;filter:none}
@media (max-width:767px){
  .n-panel-dark{padding:56px 0}
  .n-tl-wrap{margin-top:40px;padding-left:36px}
  .n-tl{grid-template-columns:1fr;gap:44px}
  .n-tl-line{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .n-tl-line i{width:100%;transform-origin:50% 0}
  .n-tl-wrap.pre .n-tl-line i{transform:scaleY(0)}
  .n-tl-dot{position:absolute;left:-36px;top:4px;margin:0}
  .n-tl-i .n-tobj{position:absolute;right:0;top:-8px;width:84px;height:84px;margin:0}
  .n-tl-i b{font-size:40px}
  .n-tl-i p{max-width:22ch}
}
@media (prefers-reduced-motion:reduce){.n-tl-line i,.n-tl-i{transition:none!important}}
/* plain hero: the dot field sits behind the words and fades out toward the edges */
.n-dotfield{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(75% 75% at 50% 50%,#000 40%,transparent 100%)}
.nm .story[data-plain] .hero-say{z-index:1}
/* steps: drawn, moving pictures in place of screenshots; and a fuller arrival */
.n-step-vis{display:grid;place-items:center;background:radial-gradient(90% 80% at 50% 110%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%),var(--paper2)}
.nm .n-step[data-rv].pre{opacity:0;transform:translateY(36px) scale(.96);filter:blur(10px)}
.nm .n-step[data-rv].in{transition:opacity .8s var(--e),transform 1s var(--e),filter .8s var(--e);transition-delay:calc(var(--d,0)*140ms)}
.n-step .n-num,.n-step h3,.n-step>p,.n-step-vis>*{transition:opacity .6s var(--e),transform .8s var(--e);transition-delay:calc(var(--d,0)*140ms + var(--w,0ms))}
.n-step h3{--w:120ms}.n-step>p{--w:200ms}.n-step-vis>*{--w:320ms}
.n-step.pre .n-num,.n-step.pre h3,.n-step.pre>p{opacity:0;transform:translateY(14px)}
.n-step.pre .n-step-vis>*{opacity:0;transform:scale(.8)}
/* 1: the button is tapped */
.sv-tap{position:relative;display:grid;place-items:center}
.sv-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;background:var(--brand);color:var(--on-brand,#fff);font-size:17px;font-weight:600;box-shadow:0 14px 26px -10px var(--glow);animation:sv-press 3.2s var(--e) infinite}
.sv-btn .ic{width:20px;height:20px}
.sv-ring{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:sv-ripple 3.2s ease-out infinite}
.sv-ring.r2{animation-delay:.25s}
.sv-hand{position:absolute;z-index:2;left:56%;top:58%;width:44px;fill:#fff;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 8px 8px rgba(10,10,30,.2));animation:sv-hand 3.2s var(--e) infinite}
@keyframes sv-press{0%,34%,58%,100%{transform:none}42%{transform:scale(.93)}50%{transform:scale(1.03)}}
@keyframes sv-ripple{0%,40%{opacity:0;transform:scale(1)}44%{opacity:.6}80%,100%{opacity:0;transform:scale(4.2)}}
@keyframes sv-hand{0%,12%{transform:translate(46px,54px);opacity:0}30%{transform:translate(0,6px);opacity:1}42%{transform:translate(0,0) scale(.92)}52%{transform:translate(0,6px)}74%{opacity:1;transform:translate(0,6px)}90%,100%{transform:translate(46px,54px);opacity:0}}
/* 2: four choices, one lights up after another */
.sv-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:min(78%,250px)}
.sv-opt{display:flex;align-items:center;gap:8px;height:52px;padding:0 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13.5px;font-weight:600;color:var(--ink);animation:sv-opt 6.4s var(--e) infinite;animation-delay:calc(var(--k)*1.6s)}
.sv-opt i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--paper2);color:var(--ink2);animation:sv-opt-i 6.4s var(--e) infinite;animation-delay:calc(var(--k)*1.6s)}
.sv-opt .ic{width:16px;height:16px}
@keyframes sv-opt{0%,22%{transform:scale(1.05);box-shadow:0 0 0 2px var(--brand),0 14px 22px -12px var(--glow)}28%,100%{transform:none;box-shadow:0 0 0 1px var(--line)}}
@keyframes sv-opt-i{0%,22%{background:var(--brand);color:#fff}28%,100%{background:var(--paper2);color:var(--ink2)}}
/* 3: the ring fills while the figure moves and the clock runs down */
.sv-do{position:relative;width:min(64%,190px);aspect-ratio:1;display:grid;place-items:center}
.sv-prog{position:absolute;inset:0;transform:rotate(-90deg);fill:none;stroke:rgba(10,10,10,.08);stroke-width:5;stroke-linecap:round}
.sv-prog .go{stroke:var(--brand);stroke-dasharray:100;animation:sv-fill 8s linear infinite}
@keyframes sv-fill{0%{stroke-dashoffset:100}92%,100%{stroke-dashoffset:0}}
.sv-fig{width:70%;aspect-ratio:1;display:block}
.sv-fig svg{display:block;width:100%!important;height:100%!important}
.sv-count{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;line-height:28px;font-variant-numeric:tabular-nums}
.n-step:nth-child(3) .n-step-vis{padding-bottom:10px}
@media (prefers-reduced-motion:reduce){.sv-btn,.sv-ring,.sv-hand,.sv-opt,.sv-opt i,.sv-prog .go{animation:none}.sv-hand{display:none}.sv-prog .go{stroke-dashoffset:40}}
/* also in the app: a bento grid of small live pieces drawn like the app itself */
.n-bento{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.n-bc{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:28px;background:var(--paper2);transition:transform .6s var(--e),box-shadow .6s var(--e)}
.n-bc:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(10,10,30,.3)}
.bc-w,.bc-m{grid-column:span 3;height:380px}
.bc-j,.bc-l,.bc-b{grid-column:span 2;height:340px}
.bc-s{grid-column:span 6;flex-direction:row-reverse;align-items:center;height:180px}
.n-bv{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.n-bt{padding:0 28px 26px}
.n-bt h3{font-size:19px;line-height:1.3}
.n-bt p{margin-top:4px;font-size:15px;line-height:1.45;color:var(--ink2)}
.bc-s .n-bt{flex:1;padding:0 0 0 40px}.bc-s .n-bv{flex:1.2;height:100%}
.nm .n-bc[data-rv].pre{opacity:0;transform:translateY(32px) scale(.96);filter:blur(10px)}
.nm .n-bc[data-rv].in{transition:opacity .8s var(--e),transform 1s var(--e),filter .8s var(--e),box-shadow .6s var(--e);transition-delay:calc(var(--d,0)*120ms)}
/* widgets: two home-screen widgets on a soft wallpaper */
.bc-w{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 26%,#EDEFF5),#F1F1F4 60%)}
.bc-w .n-bv{display:flex;align-items:center;justify-content:center;gap:18px}
.bw{display:flex;flex-direction:column;width:148px;height:148px;padding:16px;border-radius:32px;background:linear-gradient(160deg,#141A33,#070912);color:#fff;box-shadow:0 24px 34px -16px rgba(10,10,40,.55),inset 0 0 0 1px rgba(255,255,255,.08);animation:bw-float 7s ease-in-out infinite}
.bw-b{animation-delay:-3.5s;background:linear-gradient(160deg,#fff,#F3F4F8);color:var(--ink);box-shadow:0 24px 34px -16px rgba(10,10,40,.35),inset 0 0 0 1px rgba(10,10,10,.05)}
.bw-top{display:flex;align-items:center;gap:6px}.bw-top .ball{width:22px}.bw small{font-size:11px;font-weight:600;opacity:.7}
.bw b{margin-top:auto;font-size:46px;line-height:1;font-weight:700;letter-spacing:-.04em}
.bw-b b{font-size:30px}
.bw em{font-style:normal;font-size:13px;font-weight:600;opacity:.7}
.bw i{display:block;margin-top:10px;height:6px;border-radius:6px;background:rgba(10,10,10,.08);overflow:hidden}
.bw u{display:block;height:100%;width:68%;border-radius:6px;background:var(--brand);animation:bw-bar 5s var(--e) infinite}
@keyframes bw-float{50%{translate:0 -8px;rotate:-1.5deg}}
@keyframes bw-bar{0%{width:10%}40%,100%{width:68%}}
/* money */
.bm-coins{position:absolute;right:4%;bottom:-6%;width:58%;height:auto;filter:drop-shadow(0 26px 22px rgba(60,40,0,.3));transition:transform .9s var(--e)}
.bc-m:hover .bm-coins{transform:rotate(-5deg) scale(1.05)}
.bm-card{position:absolute;left:28px;top:28px;display:grid;gap:2px;padding:16px 20px;border-radius:20px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 30px -18px rgba(10,10,30,.35),inset 0 0 0 1px rgba(10,10,10,.05)}
.bm-card small{font-size:12px;font-weight:600;color:var(--ink2)}
.bm-card b{font-size:38px;line-height:1.05;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bm-card em{font-style:normal;font-size:12.5px;font-weight:600;color:#1E9E63}
/* journal: a page, one line being written */
.bj{display:grid;gap:12px;width:78%;padding:18px 18px 16px;border-radius:20px;background:#fff;box-shadow:0 22px 34px -20px rgba(10,10,30,.35),inset 0 0 0 1px rgba(10,10,10,.05);transform:rotate(-2deg)}
.bj small{font-size:11.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.bj-line{display:block;min-height:42px;font-size:14.5px;line-height:1.4;font-weight:500;color:var(--ink)}
.bj-line span{display:inline;background:linear-gradient(#000,#000) no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;background-size:0% 100%;animation:bj-type 7s steps(38) infinite}
@keyframes bj-type{0%,6%{background-size:0% 100%}60%,100%{background-size:100% 100%}}
.bj-dots{display:flex;gap:6px}.bj-dots i{width:16px;height:16px;border-radius:50%;background:#EBEBEF}.bj-dots i.on{background:var(--brand);animation:bj-pop 7s var(--e) infinite}
@keyframes bj-pop{0%,62%{scale:.6;opacity:.3}70%,100%{scale:1;opacity:1}}
/* learn: three reads, shuffling */
.bl{position:relative;width:80%;height:150px}
.bl-c{position:absolute;inset:0 0 auto 0;display:grid;gap:7px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 18px 30px -20px rgba(10,10,30,.4),inset 0 0 0 1px rgba(10,10,10,.05);animation:bl-deck 9s var(--e) infinite;animation-delay:calc(var(--k)*-3s)}
.bl-c small{justify-self:start;padding:3px 8px;border-radius:99px;background:var(--paper2);font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--ink2)}
.bl-c b{font-size:14px;line-height:1.3;font-weight:600}
.bl-c i{height:6px;border-radius:6px;background:#EEEEF1}.bl-c i:last-child{width:62%}
@keyframes bl-deck{0%,26%{transform:translateY(0) scale(1);opacity:1;z-index:3}33%,59%{transform:translateY(22px) scale(.94);opacity:.75;z-index:2}66%,92%{transform:translateY(44px) scale(.88);opacity:.45;z-index:1}96%{transform:translateY(-30px) scale(1);opacity:0;z-index:3}100%{transform:translateY(0) scale(1);opacity:1;z-index:3}}
/* buddies: four, bobbing in turn */
.bb{display:flex;align-items:flex-end;gap:10px}
.bb-i{display:grid;justify-items:center;gap:8px;width:58px;animation:bb-hop 4.8s var(--e) infinite;animation-delay:calc(var(--k)*.45s)}
.bb-i .ball{width:100%;filter:drop-shadow(0 12px 10px rgba(10,10,30,.2))}
.bb-i small{font-size:11.5px;font-weight:600;color:var(--ink2)}
@keyframes bb-hop{0%,18%,100%{translate:0 0}8%{translate:0 -16px}}
/* slip: the medals stay */
.bs{display:flex;align-items:center;gap:14px}
.bs-m{width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(255,255,255,.45),inset -4px -6px 10px rgba(0,0,0,.18),0 12px 16px -8px rgba(10,10,30,.35);position:relative;overflow:hidden}
.bs-m::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);translate:-120% 0;animation:bs-shine 5s var(--e) infinite}
.bs-m.m1{background:radial-gradient(circle at 34% 28%,#FFE9A6,#F2B32A 55%,#96610A)}.bs-m.m2{background:radial-gradient(circle at 34% 28%,#B8F5D8,#22C58B 55%,#0A6E4B)}.bs-m.m2::after{animation-delay:.2s}
.bs-m.m3{background:radial-gradient(circle at 34% 28%,#B5F0F2,#2BB8C4 55%,#0C6570)}.bs-m.m3::after{animation-delay:.4s}.bs-m.m4{background:radial-gradient(circle at 34% 28%,#E3D4FF,#A77BF5 55%,#4A2F9E)}.bs-m.m4::after{animation-delay:.6s}
@keyframes bs-shine{0%,55%{translate:-120% 0}75%,100%{translate:120% 0}}
.bs-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;background:#fff;font-size:13.5px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.bs-chip .ic{width:15px;height:15px;color:#1E9E63;stroke-width:2.6}
@media (max-width:899px){
  .n-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bc-w,.bc-m,.bc-s{grid-column:span 2}.bc-j,.bc-l{grid-column:span 2;height:300px}.bc-b{grid-column:span 2;height:260px}
  .bc-w,.bc-m{height:340px}
  .bc-s{flex-direction:column;height:auto;align-items:stretch}.bc-s .n-bv{height:130px;flex:none}.bc-s .n-bt{padding:0 24px 24px}
  .n-bt{padding:0 24px 24px}
  .bw{width:136px;height:136px}.bs-m{width:44px;height:44px}.bs{gap:10px}
}
@media (prefers-reduced-motion:reduce){.bw,.bw u,.bj-line span,.bj-dots i.on,.bl-c,.bb-i,.bs-m::after{animation:none}.bj-line span{background-size:100% 100%}.bl-c{position:static;margin-bottom:8px}.bl{height:auto}}
/* inside: workout screen with three looping moves */
.wk{display:flex;flex-direction:column;align-items:center;height:100%;padding:56px 18px 0;color:#fff;background:radial-gradient(70% 40% at 50% 38%,rgba(57,105,247,.28),transparent 70%),linear-gradient(180deg,#0A0C18,#04050A)}
.wk-n{font-size:11.5px;font-weight:600;color:#6F93FF}
.wk-name{margin-top:2px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.wk-ring{position:relative;margin-top:26px;width:86%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2A2C38,#15161D);display:grid;place-items:center}
.wk-ring>svg{position:absolute;inset:-5%;width:110%;height:110%;transform:rotate(-90deg);fill:none;stroke:rgba(255,255,255,.1);stroke-width:2.6;stroke-linecap:round}
.wk-ring .go{stroke:#3D7BFF;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 4px rgba(61,123,255,.8))}
.wk-mv{position:absolute;inset:8%;opacity:0;transform:scale(.92);transition:opacity .4s ease,transform .6s var(--e)}
.wk-mv.is-on{opacity:1;transform:none}
.wk-mv svg{display:block;width:100%!important;height:100%!important}
.wk-count{margin-top:34px;font-size:60px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wk-bar{margin-top:auto;margin-bottom:64px;display:flex;gap:5px}
.wk-bar i{width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);transition:background-color .3s}
.wk-bar i.is-on,.wk-bar i.is-done{background:#3D7BFF}
/* inside: the chat writes itself */
.n-scr .chat-live{padding-top:72px;gap:12px;justify-content:flex-start}
.chat-live .cb{padding:.6em .9em;border-radius:1.1em 1.1em 1.1em .3em;background:rgba(255,255,255,.1);opacity:0;transform:translateY(10px) scale(.96);transform-origin:0 100%;transition:opacity .3s ease,transform .5s var(--e);max-height:0;margin-top:-12px;overflow:hidden}
.chat-live .cb.is-in{opacity:1;transform:none;max-height:200px;margin-top:0}
.chat-live .cb.me{background:#3969F7;border-radius:1.1em 1.1em .3em 1.1em;transform-origin:100% 100%}
.chat-live .cb-dots{display:flex;gap:4px;align-items:center;height:32px}
.chat-live .cb-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);animation:st-dot 1s ease-in-out infinite}.chat-live .cb-dots i:nth-child(2){animation-delay:.15s}.chat-live .cb-dots i:nth-child(3){animation-delay:.3s}
.chat-live .cb-card{display:grid;gap:10px;justify-items:start}
/* review fixes */
.n-crown{flex:none}
.n-end :focus-visible{outline-color:#fff}
.n-qa summary:focus-visible{outline-offset:-3px}
@media (max-width:767px){.n-tab:focus-visible{outline-offset:-3px}.nm .story .hero-say .rot-pic small{font-size:max(11px,.2em)}}
.js .story .hero-say{animation:say-fallback 0s 3s forwards}          /* if the script never runs, the headline still shows */
@keyframes say-fallback{to{visibility:visible}}
@media (prefers-reduced-motion:reduce){.chat-live .cb-dots i{animation:none}}
/* inside: a living home screen */
.hm{display:flex;flex-direction:column;align-items:center;height:100%;padding:52px 14px 0;color:#fff;background:radial-gradient(80% 36% at 50% 26%,rgba(57,105,247,.4),transparent 72%),linear-gradient(180deg,#0A0C18,#04050A)}
.hm-top{align-self:stretch;display:flex;justify-content:space-between;align-items:center}
.hm-chip{height:26px;display:inline-flex;align-items:center;padding:0 11px;border-radius:99px;background:rgba(255,255,255,.1);font-size:11px;font-weight:600}
.hm-av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:11px;font-weight:700}
.hm-hero{position:relative;margin-top:14px;display:grid;justify-items:center}
.hm-hero .ball{width:92px;animation:hm-bob 4s ease-in-out infinite}
.hm-hero .ball.pop{animation:hm-pop .7s var(--e),hm-bob 4s ease-in-out .7s infinite}
.hm-say{position:absolute;left:62%;top:-4px;width:112px;padding:7px 10px;border-radius:12px 12px 12px 3px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10.5px;line-height:1.3;font-weight:500}
.hm-say.pop{animation:hm-say .5s var(--e)}
@keyframes hm-bob{50%{translate:0 -5px}}
@keyframes hm-pop{0%{scale:1}35%{scale:1.14 .9}65%{scale:.95 1.06}100%{scale:1}}
@keyframes hm-say{from{opacity:0;transform:translateY(6px) scale(.9)}}
.hm-days{margin-top:10px;font-size:38px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hm-sub{margin-top:5px;font-size:10.5px;color:rgba(255,255,255,.6)}
.hm-cards{align-self:stretch;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hm-c{display:grid;gap:3px;align-content:start;padding:12px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);min-height:92px}
.hm-c small{font-size:10.5px;font-weight:600;color:#7C9BFF}
.hm-c b{font-size:22px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.hm-c em{font-style:normal;font-size:10px;color:rgba(255,255,255,.55)}
.hm-c i{display:block;margin-top:8px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.hm-c u{display:block;height:100%;width:0;border-radius:4px;background:#3D7BFF;transition:width 1.6s var(--e) .3s}
.hm.is-live .hm-c u{width:72%}
.hm-btn{align-self:stretch;margin-top:auto;margin-bottom:34px;height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;background:#3969F7;font-size:14px;font-weight:600;box-shadow:0 0 0 0 rgba(57,105,247,.6);animation:hm-pulse 2.6s ease-out infinite}
.hm-btn .ic{width:17px;height:17px}
@keyframes hm-pulse{0%{box-shadow:0 0 0 0 rgba(57,105,247,.55)}70%,100%{box-shadow:0 0 0 14px rgba(57,105,247,0)}}
.hm-cards>*,.hm-days,.hm-sub,.hm-btn{transition:opacity .5s var(--e),transform .7s var(--e)}
.js .hm:not(.is-live) .hm-cards>*,.js .hm:not(.is-live) .hm-btn{opacity:0;transform:translateY(14px)}
.hm.is-live .hm-cards>*:nth-child(1){transition-delay:.25s}.hm.is-live .hm-cards>*:nth-child(2){transition-delay:.35s}.hm.is-live .hm-btn{transition-delay:.5s}
/* inside: the reward first, then the medals page */
.md{position:relative;display:block;height:100%;overflow:hidden;background:#06070D}
.md img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.md-a{transition:opacity .6s ease,transform .9s var(--e),filter .6s ease}
.md.is-live .md-a{animation:md-pop 1.1s var(--e)}
.md.p2 .md-a{opacity:0;transform:scale(.86);filter:blur(8px)}
.md-b{opacity:0;transform:translateY(40px);transition:opacity .6s ease .15s,transform .9s var(--e) .15s}
.md.p2 .md-b{opacity:1;transform:none}
.md-glow{position:absolute;left:50%;top:30%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(180,150,255,.5),transparent 70%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.md.is-live .md-glow{animation:md-glow 4.2s ease-out}
@keyframes md-pop{0%{transform:scale(1.25);filter:blur(10px);opacity:0}60%{transform:scale(.98)}100%{transform:none;filter:none;opacity:1}}
@keyframes md-glow{0%{opacity:0;scale:.4}18%{opacity:1;scale:1}60%{opacity:.5;scale:1.15}100%{opacity:0;scale:1.3}}
html:not(.js) .md-a{display:none}html:not(.js) .md-b{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hm-hero .ball,.hm-btn{animation:none}.md-a{display:none}.md-b{opacity:1;transform:none}.js .hm:not(.is-live) .hm-cards>*,.js .hm:not(.is-live) .hm-btn{opacity:1;transform:none}.hm-c u{width:72%}}
/* inside: Your body. It arrives, the heart is tapped, its sheet comes up */
.bd{position:relative;display:block;height:100%;overflow:hidden;background:#05060C}
.bd>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e),filter .8s ease}
.js .bd:not(.is-live)>img{transform:scale(1.18);filter:blur(10px) brightness(.4)}
.bd.is-live>img{transition:transform 1.6s var(--e),filter 1.2s ease}
.bd.p2>img{transform:scale(1.04) translateY(-3%);filter:brightness(.55)}
.bd.p3>img{transform:none;filter:none}
.bd-scan{position:absolute;left:0;right:0;top:-20%;height:20%;background:linear-gradient(180deg,transparent,rgba(90,140,255,.35),transparent);opacity:0;pointer-events:none}
.bd.is-live .bd-scan{animation:bd-scan 1.9s ease-in-out .3s}
@keyframes bd-scan{0%{top:-20%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:70%;opacity:0}}
.bd-tap{position:absolute;left:57%;top:43.6%;width:34px;height:34px;margin:-17px;border-radius:50%;background:rgba(255,255,255,.3);box-shadow:0 0 0 2px rgba(255,255,255,.8);opacity:0;transform:scale(.3);pointer-events:none}
.bd.p1 .bd-tap{animation:bd-tap .9s var(--e) forwards}
@keyframes bd-tap{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(.7)}60%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.bd-sheet{position:absolute;left:0;right:0;bottom:0;display:grid;gap:10px;padding:10px 16px 26px;border-radius:26px 26px 0 0;background:rgba(22,24,36,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 -1px 0 rgba(255,255,255,.1);color:#fff;transform:translateY(105%);transition:transform .7s var(--e)}
.bd.p2 .bd-sheet{transform:none}
.bd.p3 .bd-sheet{transform:translateY(105%);transition-duration:.5s}
.bd-grip{justify-self:center;width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.25)}
.bd-head{display:flex;align-items:baseline;justify-content:space-between}
.bd-head b{font-size:19px;font-weight:700}.bd-head small{font-size:11px;font-weight:600;color:#7C9BFF}
.bd-row{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.8);opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .6s var(--e)}
.bd-row b{font-size:12.5px;color:#fff}.bd-row small{font-size:10px;color:rgba(255,255,255,.5)}
.bd.p2 .bd-row{opacity:1;transform:none}
.bd.p2 .bd-row:nth-of-type(3){transition-delay:.25s}.bd.p2 .bd-row:nth-of-type(4){transition-delay:.4s}.bd.p2 .bd-row:nth-of-type(5){transition-delay:.55s}
.n-shoot{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
@media (prefers-reduced-motion:reduce){.js .bd:not(.is-live)>img{transform:none;filter:none}}
html:not(.js) .bd-sheet{display:none}
/* plain hero: slow moving colour behind everything, very faint (8%) */
.nm .story[data-plain]::before{content:"";display:block;position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.08;filter:blur(60px);
  background:radial-gradient(34% 40% at 24% 32%,#3969F7,transparent 70%),radial-gradient(30% 36% at 76% 28%,#8652F6,transparent 70%),radial-gradient(34% 40% at 68% 76%,#0FD69C,transparent 70%),radial-gradient(30% 36% at 28% 74%,#FF7A26,transparent 70%);
  animation:n-drift 26s ease-in-out infinite alternate}
@keyframes n-drift{0%{transform:translate3d(-4%,-3%,0) rotate(0deg) scale(1)}50%{transform:translate3d(5%,4%,0) rotate(18deg) scale(1.12)}100%{transform:translate3d(-3%,5%,0) rotate(-14deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.nm .story[data-plain]::before{animation:none}}
/* plain hero: more depth. A lit centre, darker rim, and a soft inner edge so the card reads as a shallow bowl */
.nm .story[data-plain]{background:radial-gradient(60% 55% at 50% 46%,#fff 0,#F7F7F8 38%,#ECECEE 72%,#E0E0E4 100%);box-shadow:inset 0 0 0 1px rgba(10,10,10,.04),inset 0 -40px 80px -40px rgba(10,10,30,.1),inset 0 30px 60px -40px rgba(255,255,255,.9)}
.nm .story[data-plain] .hero-say h1{text-shadow:0 18px 40px rgba(10,10,30,.1)}
.nm .story[data-plain] .hero-say .rot-pic img{filter:drop-shadow(0 22px 20px rgba(10,10,20,.22))}
/* timeline: pictures three times the size; the row breaks out of the narrow column to make room */
.n-tl-wrap{--ob:clamp(180px,21vw,336px);width:min(100vw - 64px,1560px);margin-left:50%;transform:translateX(-50%)}
.nm .n-tl-wrap[data-rv].pre,.nm .n-tl-wrap[data-rv].in{transform:translateX(-50%)}
.n-tl{gap:32px}
.n-tl-i .n-tobj{width:var(--ob);height:var(--ob);margin-bottom:28px}
.n-tl-i .n-tobj>img,.n-tl-i .n-tobj>svg{filter:drop-shadow(0 30px 26px rgba(10,10,30,.22))}
.n-tl-line{top:calc(var(--ob) + 35px)}
.n-tl-i b{font-size:clamp(48px,5vw,72px)}.n-tl-i b small{font-size:22px}
.n-tl-i p{font-size:17px;max-width:26ch}
@media (max-width:1023px){.n-tl-wrap{--ob:clamp(120px,20vw,200px)}}
@media (max-width:767px){
  .n-tl-wrap{--ob:132px;width:auto;margin-left:0;transform:none}
  .nm .n-tl-wrap[data-rv].pre,.nm .n-tl-wrap[data-rv].in{transform:none}
  .n-tl-line{top:8px}
  .n-tl-i .n-tobj{position:relative;right:auto;top:auto;width:var(--ob);height:var(--ob);margin:0 0 8px}
  .n-tl-i b{font-size:44px}.n-tl-i p{font-size:15.5px;max-width:none}
  .n-tl-dot{top:calc(var(--ob) + 22px)}
}
/* timeline driven by the scroll (class set by script) */
.n-tl-wrap.is-scroll .n-tl-line i{transition:transform .25s linear!important}
.n-tl-wrap.is-scroll .n-tl-i{opacity:1!important;transform:none!important}
.n-tl-wrap.is-scroll .n-tobj{translate:0 var(--py,0px)}
.n-tl-wrap.is-scroll .n-tobj>img,.n-tl-wrap.is-scroll .n-tobj>svg{opacity:0;transform:translateY(60px) scale(.55) rotate(-16deg);transition:opacity .5s ease,transform 1.1s cubic-bezier(.34,1.4,.5,1)}
.n-tl-wrap.is-scroll .n-tl-i.is-on .n-tobj>img,.n-tl-wrap.is-scroll .n-tl-i.is-on .n-tobj>svg{opacity:1;transform:none}
.n-tl-wrap.is-scroll .n-tl-i.is-on:hover .n-tobj>img,.n-tl-wrap.is-scroll .n-tl-i.is-on:hover .n-tobj>svg{transform:rotate(-6deg) scale(1.06)}
.n-tl-wrap.is-scroll .n-tl-dot{scale:0;transition:scale .5s var(--e),box-shadow .3s}
.n-tl-wrap.is-scroll .n-tl-i.is-on .n-tl-dot{scale:1}
.n-tl-wrap.is-scroll .n-tl-i>b,.n-tl-wrap.is-scroll .n-tl-i>p,.n-tl-wrap.is-scroll .n-tl-src{opacity:0;transform:translateY(18px);transition:opacity .6s var(--e),transform .8s var(--e)}
.n-tl-wrap.is-scroll .n-tl-i>p{transition-delay:.08s}.n-tl-wrap.is-scroll .n-tl-src{transition-delay:.16s}
.n-tl-wrap.is-scroll .n-tl-i.is-on>b,.n-tl-wrap.is-scroll .n-tl-i.is-on>p,.n-tl-wrap.is-scroll .n-tl-i.is-on .n-tl-src{opacity:1;transform:none}
.dc-20.is-sweep .n-tobj>img{opacity:0!important}
/* timeline: pictures back down (about 190px) and the row back inside the page column, so nothing is cut at the sides */
.n-tl-wrap{--ob:clamp(130px,13.4vw,190px);width:auto;margin-left:0;transform:none}
.nm .n-tl-wrap[data-rv].pre,.nm .n-tl-wrap[data-rv].in{transform:none}
.n-tl{gap:24px}
.n-tl-i b{font-size:clamp(44px,4vw,56px)}.n-tl-i b small{font-size:19px}
.n-tl-i p{font-size:16px;max-width:24ch}
@media (max-width:1023px){.n-tl-wrap{--ob:clamp(110px,15vw,150px)}}
@media (max-width:767px){.n-tl-wrap{--ob:112px}.n-tl-i b{font-size:40px}.n-tl-i p{font-size:15.5px;max-width:none}}
/* timeline: the line is a row of dots */
.n-tl-line{height:4px;margin-top:-1px;border-radius:0;overflow:visible;background:radial-gradient(circle,rgba(10,10,10,.16) 1.5px,transparent 2px) 0 50%/10px 4px repeat-x}
.n-tl-line i{background:radial-gradient(circle,var(--ink) 1.6px,transparent 2.1px) 0 50%/10px 4px repeat-x;transition:clip-path .25s linear}
.n-tl-wrap.pre .n-tl-line i{transform:none}
@media (max-width:767px){
  .n-tl-line{width:4px;height:auto;left:6px;margin-top:0;background:radial-gradient(circle,rgba(10,10,10,.16) 1.5px,transparent 2px) 50% 0/4px 10px repeat-y}
  .n-tl-line i{background:radial-gradient(circle,var(--ink) 1.6px,transparent 2.1px) 50% 0/4px 10px repeat-y}
}
/* timeline: much smaller dots in the line */
.n-tl-line{height:2px;margin-top:0;background:radial-gradient(circle,rgba(10,10,10,.2) .6px,transparent .9px) 0 50%/6px 2px repeat-x}
.n-tl-line i{background:radial-gradient(circle,var(--ink) .7px,transparent 1px) 0 50%/6px 2px repeat-x}
@media (max-width:767px){
  .n-tl-line{width:2px;height:auto;left:7px;background:radial-gradient(circle,rgba(10,10,10,.2) .6px,transparent .9px) 50% 0/2px 6px repeat-y}
  .n-tl-line i{background:radial-gradient(circle,var(--ink) .7px,transparent 1px) 50% 0/2px 6px repeat-y}
}
/* day by day: smaller pictures, bigger words, a heading three times the size, more air */
#progress.n-sec{padding:clamp(120px,13vw,200px) 0}
#progress .n-head h2{font-size:clamp(44px,7.4vw,108px);line-height:.98;letter-spacing:-.04em;max-width:11ch}
#progress .n-head p{margin-top:28px;font-size:clamp(17px,1.5vw,20px);max-width:44ch}
.n-tl-wrap{--ob:clamp(96px,9vw,128px);margin-top:clamp(72px,9vw,128px)}
.n-tl{gap:40px}
.n-tl-i .n-tobj{margin-bottom:36px}
.n-tl-line{top:calc(var(--ob) + 43px)}
.n-tl-dot{margin-bottom:40px}
.n-tl-i b{font-size:clamp(52px,5vw,72px)}.n-tl-i b small{font-size:22px}
.n-tl-i p{margin-top:18px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;max-width:22ch}
.n-tl-src{margin-top:16px;font-size:14px}
@media (max-width:767px){
  #progress.n-sec{padding:88px 0}
  .n-tl-wrap{--ob:92px;margin-top:56px}
  .n-tl{gap:64px}
  .n-tl-line{top:8px}
  .n-tl-i .n-tobj{margin-bottom:12px}
  .n-tl-dot{margin:0;top:calc(var(--ob) + 30px)}
  .n-tl-i b{font-size:48px}.n-tl-i p{font-size:17px;max-width:none}
}
/* workout screen: one clean ring. The disc sits exactly inside it, the track is a hairline, the progress arc glows softly */
.wk-ring{background:none;width:82%}
.wk-ring::before{content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 50% 34%,#262937 0,#161821 70%,#101119 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 30px -14px rgba(0,0,0,.7)}
.wk-ring>svg{inset:0;width:100%;height:100%;left:0;top:0;stroke:rgba(255,255,255,.09);stroke-width:1.6;overflow:visible}
.wk-ring .go{stroke:#4C7DFF;stroke-width:2.6;filter:drop-shadow(0 0 3px rgba(76,125,255,.9))}
.wk-mv{inset:13%}
/* inside: the workout screen, fuller. Status bar, close and sound chips, a name that slides in, a count that ticks, bars that fill, time left */
.wk{padding:0 16px;position:relative}
.wk-sb{align-self:stretch;height:44px;display:flex;align-items:center;justify-content:space-between;padding:6px 10px 0;font-size:12.5px;font-weight:700}
.wk-sb span{display:flex;align-items:flex-end;gap:2.5px}
.wk-sb i{width:3px;border-radius:1px;background:#fff}.wk-sb i:nth-child(1){height:5px}.wk-sb i:nth-child(2){height:8px}.wk-sb i:nth-child(3){height:11px}
.wk-top{align-self:stretch;margin-top:8px;display:flex;align-items:center;justify-content:space-between}
.wk-chip{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:rgba(255,255,255,.85)}
.wk-chip .ic{width:13px;height:13px;stroke-width:2.2}
.wk-mute{background:none;color:rgba(255,255,255,.4)}
.wk-name{margin-top:2px;font-size:20px}
.wk-name.swap{animation:wk-swap .6s var(--e)}
@keyframes wk-swap{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}
.wk-ring{margin-top:22px}
.wk-count{margin-top:26px;font-size:64px}
.wk-count.tick{animation:wk-tick .45s var(--e)}
@keyframes wk-tick{from{opacity:.3;transform:translateY(-10px) scale(1.06);filter:blur(3px)}}
.wk-bar{margin-top:auto;margin-bottom:8px;gap:5px}
.wk-bar i{position:relative;width:40px;height:4px;overflow:hidden;background:rgba(255,255,255,.14)}
.wk-bar u{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:#4C7DFF}
.wk-left{margin-bottom:40px;font-size:11px;font-weight:500;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
/* inside: the phone itself gets a soft glow in the page colour and floats slightly */
.n-panel-dark .n-phone{animation:n-float 8s ease-in-out infinite}
.n-panel-dark .n-phone::before{content:"";position:absolute;inset:-18% -30%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-hi) 46%,transparent),transparent 72%);filter:blur(24px);opacity:.7;pointer-events:none}
@keyframes n-float{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.n-panel-dark .n-phone,.wk-name.swap,.wk-count.tick{animation:none}}
.wk-name.wk-in{animation:wk-swap .6s var(--e)}
@media (prefers-reduced-motion:reduce){.wk-name.wk-in{animation:none}}
/* money card, fuller: warm light behind the coins, the stack floats and catches a glint, the amount counts up, a week of small bars grows */
.bc-m{background:linear-gradient(150deg,#F7F5EF,#F3F3F4 55%)}
.bm-glow{position:absolute;right:-6%;bottom:-18%;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(242,179,42,.3),transparent 70%);filter:blur(10px);animation:bm-glow 6s ease-in-out infinite}
@keyframes bm-glow{50%{opacity:.6;scale:1.08}}
.bm-coinbox{position:absolute;right:3%;bottom:-7%;width:60%;aspect-ratio:1;animation:bm-float 7s ease-in-out infinite;transition:transform .9s var(--e)}
.bc-m:hover .bm-coinbox{transform:rotate(-5deg) scale(1.05)}
.bm-coinbox .bm-coins{position:static;display:block;width:100%;height:100%;transform:none!important}
.bm-glint{position:absolute;inset:0;-webkit-mask:url(assets/day/obj-coins.png) center/100% 100% no-repeat;mask:url(assets/day/obj-coins.png) center/100% 100% no-repeat;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:130% 0;mix-blend-mode:screen;animation:bm-glint 5.5s var(--e) infinite;pointer-events:none}
@keyframes bm-glint{0%,45%{background-position:130% 0}80%,100%{background-position:-60% 0}}
@keyframes bm-float{50%{translate:0 -10px;rotate:1.5deg}}
.bm-card{gap:4px;padding:18px 22px 16px;border-radius:22px;min-width:190px}
.bm-card b{font-size:42px}
.bm-card em{display:inline-flex;align-items:center;gap:4px;justify-self:start;height:24px;padding:0 9px 0 6px;border-radius:99px;background:#E6F6EC;color:#16824F;font-size:12.5px}
.bm-card em svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;animation:bm-up 2.4s var(--e) infinite}
@keyframes bm-up{0%,60%,100%{translate:0 0}30%{translate:0 -3px}}
.bm-week{margin-top:10px;height:34px;display:flex;align-items:flex-end;gap:5px}
.bm-week i{flex:1;height:var(--h);border-radius:4px;background:#E4E4E8;transform-origin:50% 100%;transition:transform .9s var(--e)}
.bm-week i.on{background:#F2B32A}
.js .bc-m:not(.is-seen) .bm-week i{transform:scaleY(.08)}
.bc-m.is-seen .bm-week i:nth-child(2){transition-delay:.06s}.bc-m.is-seen .bm-week i:nth-child(3){transition-delay:.12s}.bc-m.is-seen .bm-week i:nth-child(4){transition-delay:.18s}.bc-m.is-seen .bm-week i:nth-child(5){transition-delay:.24s}.bc-m.is-seen .bm-week i:nth-child(6){transition-delay:.3s}.bc-m.is-seen .bm-week i:nth-child(7){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.bm-glow,.bm-coinbox,.bm-glint,.bm-card em svg{animation:none}.js .bc-m:not(.is-seen) .bm-week i{transform:none}}
/* questions as a chat inside a large phone: 60% of the panel wide, only its upper part showing, cut by the bottom of the panel */
.n-qa.is-src{display:none}
.n-panel-b:has([data-chatfaq]:not([hidden])){padding-bottom:0;overflow:hidden}
.n-cp{margin-top:56px;height:clamp(520px,60vw,680px);display:flex;justify-content:center}
.n-cp-phone{position:relative;width:60%;min-width:340px;max-width:620px;height:1240px;display:flex;flex-direction:column;border-radius:64px;background:#fff;box-shadow:0 0 0 12px #0d0e12,0 0 0 13px #3B3D48,0 60px 80px -30px rgba(10,10,30,.35);overflow:hidden}
.n-cp-bar{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 34px 0;font-size:15px;font-weight:700}
.n-cp-bar::after{content:"";position:absolute;left:50%;top:14px;width:112px;height:30px;margin-left:-56px;border-radius:20px;background:#0d0e12}
.n-cp-bar span{display:flex;align-items:flex-end;gap:3px}
.n-cp-bar i{width:3.500px;border-radius:1px;background:var(--ink)}.n-cp-bar i:nth-child(1){height:6px}.n-cp-bar i:nth-child(2){height:9px}.n-cp-bar i:nth-child(3){height:12px}
.n-cp-head{flex:none;display:flex;align-items:center;gap:12px;padding:10px 26px 16px;border-bottom:1px solid var(--line)}
.n-cp-head .ball{width:42px}
.n-cp-head b{display:block;font-size:17px;font-weight:600;line-height:1.2}
.n-cp-head small{font-size:13px;color:var(--ink2)}
.n-cp-thread{flex:none;height:calc(clamp(520px,60vw,680px) - 124px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px 28px}
.n-cp-thread::-webkit-scrollbar{display:none}
.n-cp-m{max-width:82%;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--paper2);font-size:16px;line-height:1.45;color:var(--ink);opacity:0;transform:translateY(12px) scale(.96);transform-origin:0 100%;transition:opacity .35s ease,transform .55s var(--e)}
.n-cp-m.is-in{opacity:1;transform:none}
.n-cp-m.me{align-self:flex-end;border-radius:20px 20px 6px 20px;background:var(--brand);color:var(--on-brand,#fff);font-weight:500;transform-origin:100% 100%}
.n-cp-m a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.n-cp-m.dots{display:flex;gap:5px;align-items:center;height:44px}
.n-cp-m.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:st-dot 1s ease-in-out infinite}.n-cp-m.dots i:nth-child(2){animation-delay:.15s}.n-cp-m.dots i:nth-child(3){animation-delay:.3s}
.n-cp-chips{align-self:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:6px}
.n-cp-chip{padding:10px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);background:#fff;color:var(--brand-deep);font:500 15px/1.3 var(--font);text-align:left;cursor:pointer;transition:background-color .15s,transform .2s var(--e)}
.n-cp-chip:hover{background:color-mix(in srgb,var(--brand) 9%,#fff)}
.n-cp-chip:active{transform:scale(.97)}
@media (max-width:767px){
  .n-cp{margin-top:36px;height:560px}
  .n-cp-phone{width:100%;min-width:0;border-radius:44px;box-shadow:0 0 0 8px #0d0e12,0 0 0 9px #3B3D48}
  .n-cp-thread{height:436px;padding:16px 14px 24px}
  .n-cp-m{font-size:15px;max-width:88%}.n-cp-chip{font-size:14px}
  .n-cp-bar{padding-inline:26px}
}
@media (prefers-reduced-motion:reduce){.n-cp-m{transition:none}.n-cp-m.dots i{animation:none}}
/* chat phone: clearer that it is a chat you can type into */
.n-cp-head small{display:flex;align-items:center;gap:6px}
.n-cp-head small i{width:7px;height:7px;border-radius:50%;background:#22B573;box-shadow:0 0 0 0 rgba(34,181,115,.5);animation:cp-live 2s ease-out infinite}
@keyframes cp-live{70%,100%{box-shadow:0 0 0 7px rgba(34,181,115,0)}}
.n-cp-head .ball{animation:hm-bob 4s ease-in-out infinite}
.n-cp-thread{height:calc(clamp(520px,60vw,680px) - 124px - 78px)}
.n-cp-in{flex:none;display:flex;align-items:center;gap:8px;height:78px;padding:10px 18px 16px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 30%)}
.n-cp-in input{flex:1;min-width:0;height:50px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--paper2);font:500 16px/1 var(--font);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.n-cp-in input::placeholder{color:var(--ink3);transition:opacity .2s,transform .2s}
.n-cp-in input.ph-out::placeholder{opacity:0;transform:translateY(-6px)}
.n-cp-in input:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.n-cp-in button{flex:none;width:50px;height:50px;border-radius:50%;background:var(--brand);color:var(--on-brand,#fff);display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--e)}
.n-cp-in button .ic{width:20px;height:20px;transform:rotate(-90deg);stroke-width:2.4}
.n-cp-in button:hover{transform:scale(1.06)}.n-cp-in button:active{transform:scale(.94)}
.n-cp-hint{align-self:flex-end;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.n-cp-chips{margin-top:0}
.n-cp-chip{animation:cp-chip 3.6s var(--e) infinite}
.n-cp-chip:nth-child(2){animation-delay:.25s}.n-cp-chip:nth-child(3){animation-delay:.5s}.n-cp-chip:nth-child(4){animation-delay:.75s}.n-cp-chip:nth-child(5){animation-delay:1s}.n-cp-chip:nth-child(6){animation-delay:1.25s}.n-cp-chip:nth-child(7){animation-delay:1.5s}
@keyframes cp-chip{0%,70%,100%{box-shadow:0 0 0 0 transparent}82%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}}
.n-cp-wave{display:inline-block;transform-origin:70% 80%;animation:cp-wave 2.4s ease-in-out 1}
@keyframes cp-wave{0%,60%,100%{rotate:0deg}10%,30%{rotate:16deg}20%,40%{rotate:-10deg}}
@media (max-width:767px){.n-cp-thread{height:358px}.n-cp-in{padding-inline:12px}.n-cp-in input{font-size:16px}}
@media (prefers-reduced-motion:reduce){.n-cp-head small i,.n-cp-head .ball,.n-cp-chip,.n-cp-wave{animation:none}}
/* headings: a soft top-to-bottom gradient inside the letters, for depth (falls back to plain ink where clipping to text is not supported) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nm .story[data-plain] .hero-say h1,.nm .n-head h2,.nm #progress .n-head h2,.n-tl-i>b,.nm .n-bt h3,.nm .n-step h3{background:linear-gradient(180deg,#2B2B33 0%,#0A0A0A 46%,#000 60%,#3C3C48 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
  .nm .story[data-plain] .hero-say h1{background-image:linear-gradient(178deg,#3A3A44 0%,#0A0A0A 38%,#000 62%,#4A4A58 100%);padding-bottom:.08em}
  .nm .story[data-plain] .hero-say h1 .n-dim{background:linear-gradient(180deg,rgba(10,10,10,.26) 0%,rgba(10,10,10,.5) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .nm .story[data-plain] .hero-say h1 .rot,.nm .story[data-plain] .hero-say h1 .rot *{-webkit-text-fill-color:currentColor;background:none}
  .n-tl-i>b small{-webkit-text-fill-color:var(--ink)}
  .nm .n-panel-dark h2,.nm .n-panel-dark .n-pane h3,.nm .n-end h2{background:linear-gradient(180deg,#fff 0%,#fff 45%,color-mix(in srgb,var(--brand-hi) 55%,#C9CCDA) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
/* hero headline: the gradient goes on each line separately, so the pale first line stays pale and the rotating object is untouched */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nm .story[data-plain] .hero-say h1{background:none;-webkit-text-fill-color:currentColor;padding-bottom:0}
  .nm .story[data-plain] .hero-say h1 .rot,.nm .story[data-plain] .hero-say h1 .rot *{-webkit-text-fill-color:unset;background:unset}
  .nm .story[data-plain] .hero-say h1 .n-main{display:inline-block;padding-bottom:.12em;margin-bottom:-.12em;background:linear-gradient(178deg,#3A3A44 0%,#0A0A0A 36%,#000 60%,#4A4A58 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .nm .story[data-plain] .hero-say h1 .n-dim{background:linear-gradient(180deg,rgba(10,10,10,.24) 0%,rgba(10,10,10,.5) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
/* hero without the line and buttons: only the tag and the headline */
.nm .story[data-plain] .hero-say{padding-bottom:clamp(96px,14vh,150px)}
.n-head p b{font-weight:500;color:var(--ink)}
/* the QR card is back, bottom right on wide screens */
.nm .getcard{right:20px;bottom:20px;width:auto;display:none;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:18px;background:var(--ink);color:#fff;box-shadow:0 20px 40px -16px rgba(10,10,30,.45)}
@media (min-width:1100px){.nm .getcard{display:flex}}
.nm .getcard .qr{width:72px;height:72px;border-radius:12px;padding:6px}
.nm .getcard-copy{display:grid;gap:2px;padding:0}
.nm .getcard-copy b{font-size:15px;font-weight:600}
.nm .getcard-copy span{margin:0;max-width:17ch;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.6)}
.nm .getcard-x{right:-8px;top:-8px;width:24px;height:24px;background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.18);opacity:0;transition:opacity .2s}
.nm .getcard:hover .getcard-x,.nm .getcard-x:focus-visible{opacity:1}
html:not(.js) .nm .getcard{display:none}
/* hero in two views, stacked in one cell so the card never changes height */
.nm .story[data-plain]{display:grid;min-height:clamp(680px,calc(100svh - 64px),900px)}
.nm .story[data-plain]>.hero-say,.nm .story[data-plain]>.n-hd{grid-area:1/1;min-width:0}
.n-hd{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;padding:clamp(104px,14vh,140px) var(--pad) 76px;display:flex;flex-direction:column}
.n-hd-head h2{font-size:clamp(34px,4.8vw,64px);line-height:1;letter-spacing:-.035em}
.n-hd-head p{margin-top:18px;max-width:52ch;font-size:16px;line-height:1.5;color:var(--ink2)}
.n-hd .n-tl-wrap{--ob:clamp(84px,8vw,112px);margin-top:auto;padding-top:36px;width:auto;margin-left:0;transform:none}
.n-hd .n-tl{gap:28px}
.n-hd .n-tl-line{top:calc(var(--ob) + 36px + 31px)}
.n-hd .n-tl-i .n-tobj{margin-bottom:24px}
.n-hd .n-tl-dot{margin-bottom:24px}
.n-hd .n-tl-i b{font-size:clamp(36px,3.6vw,48px)}.n-hd .n-tl-i b small{font-size:17px}
.n-hd .n-tl-i p{margin-top:10px;font-size:15px;max-width:24ch}
.n-hd .n-tl-src{margin-top:8px;font-size:12.5px}
/* what each view does when it is not the one showing (only once the script has taken over) */
.story.is-two .hero-say,.story.is-two .n-hd-head>*{transition:opacity .7s var(--e),transform .9s var(--e),filter .7s var(--e)}
.story.is-two.is-b .hero-say{opacity:0;transform:translateY(-40px) scale(.97);filter:blur(12px);pointer-events:none}
.story.is-two:not(.is-b) .n-hd{pointer-events:none}
.story.is-two:not(.is-b) .n-hd-head>*{opacity:0;transform:translateY(40px);filter:blur(12px)}
.story.is-two.is-b .n-hd-head>*{transition-delay:.35s}.story.is-two.is-b .n-hd-head>p{transition-delay:.47s}
.story.is-two .n-tl-line{opacity:0;transition:opacity .5s ease}
.story.is-two.is-b .n-tl-line{opacity:1;transition-delay:.6s}
.story.is-two .n-tl-line i{clip-path:inset(0 100% 0 0);transition:clip-path .5s ease}
.story.is-two.is-b .n-tl-line i{clip-path:inset(0 0 0 0);transition:clip-path 1.9s var(--e) .8s}
.story.is-two .n-tl-i{opacity:1!important;transform:none!important}
.story.is-two .n-tl-i .n-tobj>img,.story.is-two .n-tl-i .n-tobj>svg{opacity:0;transform:translateY(46px) scale(.6) rotate(-14deg);transition:opacity .45s ease,transform 1s cubic-bezier(.34,1.4,.5,1)}
.story.is-two .n-tl-i.is-on .n-tobj>img,.story.is-two .n-tl-i.is-on .n-tobj>svg{opacity:1;transform:none}
.story.is-two .n-tl-i.is-on:hover .n-tobj>img,.story.is-two .n-tl-i.is-on:hover .n-tobj>svg{transform:rotate(-6deg) scale(1.06)}
.story.is-two .n-tl-dot{scale:0;transition:scale .5s var(--e),box-shadow .3s}.story.is-two .n-tl-i.is-on .n-tl-dot{scale:1}
.story.is-two .n-tl-i>b,.story.is-two .n-tl-i>p,.story.is-two .n-tl-src{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .8s var(--e)}
.story.is-two .n-tl-i>p{transition-delay:.08s}.story.is-two .n-tl-src{transition-delay:.16s}
.story.is-two .n-tl-i.is-on>b,.story.is-two .n-tl-i.is-on>p,.story.is-two .n-tl-i.is-on .n-tl-src{opacity:1;transform:none}
.dc-20.is-sweep .n-tobj>img{opacity:0!important}
/* the two marks */
.n-hpager{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:99px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.n-hpager button{width:22px;height:14px;display:grid;place-items:center;cursor:pointer;border-radius:99px}
.n-hpager i{width:6px;height:6px;border-radius:6px;background:rgba(10,10,10,.25);transition:width .5s var(--e),background-color .3s}
.n-hpager button.is-on i{width:20px;background:var(--ink)}
html:not(.js) .n-hpager{display:none}
html:not(.js) .nm .story[data-plain]{display:block}
/* phones: the four stops sit side by side and scroll sideways, so the card keeps one height */
@media (max-width:767px){
  .nm .story[data-plain]{min-height:clamp(640px,calc(100svh - 56px),780px)}
  .n-hd{padding:92px var(--pad) 70px}
  .n-hd .n-tl-wrap{--ob:88px;padding-left:0;padding-top:28px;margin-inline:calc(-1*var(--pad));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .n-hd .n-tl-wrap::-webkit-scrollbar{display:none}
  .n-hd .n-tl{grid-template-columns:repeat(4,68vw);gap:20px;padding-inline:var(--pad);width:max-content}
  .n-hd .n-tl-i{scroll-snap-align:start;scroll-margin-left:var(--pad)}
  .n-hd .n-tl-line{left:var(--pad);right:auto;width:calc(272vw + 60px);height:2px;top:calc(var(--ob) + 28px + 31px);bottom:auto;background:radial-gradient(circle,rgba(10,10,10,.2) .6px,transparent .9px) 0 50%/6px 2px repeat-x}
  .n-hd .n-tl-line i{width:100%;background:radial-gradient(circle,var(--ink) .7px,transparent 1px) 0 50%/6px 2px repeat-x}
  .n-hd .n-tl-i .n-tobj{position:relative;right:auto;top:auto;margin:0 0 24px}
  .n-hd .n-tl-dot{position:relative;left:auto;top:auto;margin:0 0 20px}
  .n-hd .n-tl-i b{font-size:40px}.n-hd .n-tl-i p{font-size:15px;max-width:26ch}
  .n-hd-head p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.story.is-two .hero-say,.story.is-two .n-hd-head>*,.story.is-two .n-tl-line i,.story.is-two .n-tl-i *{transition:none!important}}
/* questions: no grey frame, plain white behind the phone; the phone still runs off the bottom of the section */
.n-qa-wrap .n-panel-b{background:#fff;border-radius:0;padding-top:clamp(72px,9vw,128px)}
.n-qa-wrap .n-cp-phone{box-shadow:0 0 0 12px #0d0e12,0 0 0 13px #3B3D48,0 50px 90px -30px rgba(10,10,30,.28),0 0 120px -20px color-mix(in srgb,var(--brand) 22%,transparent)}
.n-qa-wrap .n-cp{position:relative}
.n-qa-wrap .n-cp::after{content:"";position:absolute;left:-20%;right:-20%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.n-last{margin-top:0}
@media (max-width:767px){.n-qa-wrap .n-cp-phone{box-shadow:0 0 0 8px #0d0e12,0 0 0 9px #3B3D48,0 40px 70px -30px rgba(10,10,30,.28)}}
/* hero, second view: the same headline, same size and place, only the words change. The lines of the first roll up and out one after the other, the new lines roll in from below, the block lifts a little and the timeline rises along the bottom */
.n-hd{align-items:center;text-align:center;padding-top:clamp(104px,15vh,150px);padding-bottom:70px}
.n-hd-head{display:flex;flex-direction:column;align-items:center}
.n-hd-head h2,.nm .n-hd-head h2{margin-top:28px;font-size:clamp(44px,7.6vw,110px);line-height:.98;letter-spacing:-.04em;font-weight:600;max-width:none;background:none;-webkit-text-fill-color:currentColor;text-wrap:nowrap}
.n-hd-head h2 .n-dim{background:linear-gradient(180deg,rgba(10,10,10,.24) 0%,rgba(10,10,10,.5) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.n-hd-head h2 .n-main{display:inline-block;padding-bottom:.12em;margin-bottom:-.12em;background:linear-gradient(178deg,#3A3A44 0%,#0A0A0A 36%,#000 60%,#4A4A58 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.n-hd-head h2 .n-dim,.n-hd-head h2 .n-main,.story[data-plain] .hero-say h1 .n-dim,.story[data-plain] .hero-say h1 .n-main,.story[data-plain] .hero-say h1 .rot{display:inline-block}
.n-hd-head p{margin-top:18px;max-width:60ch;font-size:14px;line-height:1.5;color:var(--ink3)}
.n-hd .n-tl-wrap{--ob:clamp(72px,6.6vw,92px);text-align:left;align-self:stretch;padding-top:28px}
.n-hd .n-tl-i b{font-size:clamp(32px,3.2vw,42px)}.n-hd .n-tl-i p{font-size:14.5px;margin-top:8px}
.n-hd .n-tl-i .n-tobj{margin-bottom:20px}.n-hd .n-tl-dot{margin-bottom:20px}
.n-hd .n-tl-line{top:calc(var(--ob) + 28px + 27px)}
/* the roll */
.story.is-two .hero-say,.story.is-two .n-hd-head>*{transition:none;opacity:1;transform:none;filter:none}
.story.is-two.is-b .hero-say{opacity:1;transform:none;filter:none}
.story.is-two .hero-say{transition:transform 1.1s var(--e)}
.story.is-two.is-b .hero-say{transform:translateY(calc(-1*clamp(20px,5vh,56px)))}
.story.is-two .hero-say .n-chip,.story.is-two .hero-say h1 .n-dim,.story.is-two .hero-say h1 .rot,.story.is-two .hero-say h1 .n-main,
.story.is-two .n-hd-head .n-chip,.story.is-two .n-hd-head h2 .n-dim,.story.is-two .n-hd-head h2 .n-main,.story.is-two .n-hd-head p{transition:opacity .55s ease,transform .9s var(--e),filter .55s ease}
.story.is-two.is-b .hero-say .n-chip,.story.is-two.is-b .hero-say h1 .n-dim,.story.is-two.is-b .hero-say h1 .rot,.story.is-two.is-b .hero-say h1 .n-main{opacity:0;transform:translateY(-70%) rotateX(50deg);filter:blur(10px)}
.story.is-two.is-b .hero-say h1 .n-dim,.story.is-two.is-b .hero-say h1 .rot{transition-delay:.06s}
.story.is-two.is-b .hero-say h1 .n-main{transition-delay:.14s}
.story.is-two:not(.is-b) .n-hd-head .n-chip,.story.is-two:not(.is-b) .n-hd-head h2 .n-dim,.story.is-two:not(.is-b) .n-hd-head h2 .n-main,.story.is-two:not(.is-b) .n-hd-head p{opacity:0;transform:translateY(70%) rotateX(-50deg);filter:blur(10px)}
.story.is-two.is-b .n-hd-head .n-chip{transition-delay:.3s}
.story.is-two.is-b .n-hd-head h2 .n-dim{transition-delay:.38s}
.story.is-two.is-b .n-hd-head h2 .n-main{transition-delay:.48s}
.story.is-two.is-b .n-hd-head p{transition-delay:.62s}
.story.is-two .hero-say h1,.story.is-two .n-hd-head h2{perspective:900px}
.story.is-two:not(.is-b) .hero-say .n-chip{transition-delay:.25s}.story.is-two:not(.is-b) .hero-say h1 .n-dim,.story.is-two:not(.is-b) .hero-say h1 .rot{transition-delay:.33s}.story.is-two:not(.is-b) .hero-say h1 .n-main{transition-delay:.43s}
/* the timeline rises along the bottom */
.story.is-two .n-hd .n-tl-wrap{transition:opacity .7s ease,transform 1.1s var(--e)}
.story.is-two:not(.is-b) .n-hd .n-tl-wrap{opacity:0;transform:translateY(70px)}
.story.is-two.is-b .n-hd .n-tl-wrap{transition-delay:.55s}
@media (max-width:767px){
  .n-hd{padding-top:96px}
  .n-hd-head h2,.nm .n-hd-head h2{font-size:clamp(32px,10.4vw,60px)}
  .n-hd-head p{font-size:13px}
  .n-hd .n-tl-wrap{--ob:76px}
  .n-hd .n-tl-line{top:calc(var(--ob) + 28px + 27px)}
}
@media (prefers-reduced-motion:reduce){.story.is-two *{transition:none!important}}
html:not(.js) .n-hd-head h2{font-size:clamp(34px,5vw,64px)}
/* headline lines: room below the baseline so the tails of y, g and the comma are painted in full */
.n-hd-head h2 .n-dim,.n-hd-head h2 .n-main,.nm .story[data-plain] .hero-say h1 .n-dim,.nm .story[data-plain] .hero-say h1 .n-main{display:inline-block;padding:.06em .04em .24em;margin:-.06em -.04em -.24em}
/* timeline: the per-stop source lines stay in the page for screen readers and search, but are not drawn; the sources are named once in the line under the headline */
.n-hd .n-tl-src{position:absolute!important;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* hero timeline pictures: each object sits on its own white tile, a little larger, with a soft shadow and a slow bob, so the four read as one set */
.n-hd .n-tl-wrap{--ob:clamp(92px,8.2vw,116px)}
.n-hd .n-tl-i .n-tobj{border-radius:28%;background:linear-gradient(160deg,#fff,#F3F4F7);box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(10,10,10,.05),0 22px 30px -16px rgba(10,10,30,.28),0 4px 8px -4px rgba(10,10,30,.12);overflow:hidden;animation:tl-bob 6s ease-in-out infinite}
.n-hd .n-tl-i:nth-child(2) .n-tobj{animation-delay:-1.5s}.n-hd .n-tl-i:nth-child(3) .n-tobj{animation-delay:-3s}.n-hd .n-tl-i:nth-child(4) .n-tobj{animation-delay:-4.5s}
.n-hd .n-tl-i .n-tobj>img{width:96%;height:96%;filter:none;mix-blend-mode:multiply}
.n-hd .n-tl-i .n-tobj>svg{width:74%;height:74%;filter:drop-shadow(0 6px 8px rgba(40,50,70,.3))}
.n-hd .n-tl-i .n-tobj::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 42%);pointer-events:none}
.n-hd .n-tobj .sweep{inset:2%;mix-blend-mode:multiply}
@keyframes tl-bob{50%{translate:0 -6px;rotate:-2deg}}
@media (max-width:767px){.n-hd .n-tl-wrap{--ob:84px}}
@media (prefers-reduced-motion:reduce){.n-hd .n-tl-i .n-tobj{animation:none}}
/* questions: no phone frame. A plain chat window: no bezel, no status bar, whole in view */
.n-qa-wrap .n-panel-b{padding-bottom:clamp(72px,9vw,128px);overflow:visible}
.n-qa-wrap .n-cp{height:auto}
.n-qa-wrap .n-cp::after{display:none}
.n-qa-wrap .n-cp-phone{height:auto;border-radius:32px;background:#fff;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(10,10,30,.25),0 0 120px -30px color-mix(in srgb,var(--brand) 20%,transparent)}
.n-qa-wrap .n-cp-bar{display:none}
.n-qa-wrap .n-cp-head{padding:20px 26px 18px}
.n-qa-wrap .n-cp-thread{height:clamp(380px,46vh,480px)}
.n-qa-wrap .n-cp-in{height:auto;padding:12px 18px 18px;background:none;border-top:1px solid var(--line)}
@media (max-width:767px){.n-qa-wrap .n-cp-phone{border-radius:26px;box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(10,10,30,.25)}.n-qa-wrap .n-cp-thread{height:400px}.n-qa-wrap .n-cp-head{padding:16px 18px 14px}}
.n-vh{position:absolute!important;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.n-qa-wrap .n-cp{margin-top:0}
/* hero as one story in two beats. Beat one: "Swap the [object] / for a good habit." Beat two: "A good habit, / day by day."
   The second line of beat one does not leave: it travels up, pales, and becomes the first line of beat two. Only then does "day by day." arrive under it and the timeline rise. */
.story.is-two .hero-say,.story.is-two.is-b .hero-say{transform:none;transition:none}
.story.is-two .hero-say h1 .n-main,.story.is-two .n-hd-head h2 .n-dim{transition:transform 1s cubic-bezier(.6,0,.2,1),opacity .5s ease .22s,filter .5s ease;transition-delay:0s,.22s,0s}
.story.is-two.is-b .hero-say h1 .n-main{opacity:0;transform:translateY(calc(-1*var(--dy,140px)));filter:none;transition-delay:0s,.22s,0s}
.story.is-two:not(.is-b) .n-hd-head h2 .n-dim{opacity:0;transform:translateY(var(--dy,140px));filter:none}
.story.is-two.is-b .n-hd-head h2 .n-dim{transition-delay:0s,.22s,0s}
.story.is-two:not(.is-b) .hero-say h1 .n-main{transition-delay:0s,.22s,0s}
/* the first line (the swap and its object) lifts away while that happens */
.story.is-two.is-b .hero-say .n-chip,.story.is-two.is-b .hero-say h1 .n-dim,.story.is-two.is-b .hero-say h1 .rot{transform:translateY(-90%);filter:blur(8px);transition-delay:0s}
.story.is-two.is-b .hero-say h1 .rot{transform:translateY(-90%) scale(.7)}
/* then the new second line, the note and the timeline */
.story.is-two.is-b .n-hd-head h2 .n-main{transition-delay:.75s}
.story.is-two:not(.is-b) .n-hd-head h2 .n-main{transform:translateY(60%);filter:blur(8px)}
.story.is-two.is-b .n-hd-head .n-chip{transition-delay:.55s}
.story.is-two.is-b .n-hd-head p{transition-delay:.95s}
.story.is-two.is-b .n-hd .n-tl-wrap{transition-delay:1s}
.story.is-two.is-b .n-tl-line{transition-delay:1.1s}
.story.is-two.is-b .n-tl-line i{transition:clip-path 1.9s var(--e) 1.3s}
/* hero timeline: each stop centred on its marker */
.n-hd .n-tl-wrap{text-align:center}
.n-hd .n-tl-i{align-items:center;text-align:center}
.n-hd .n-tl-i p{margin-inline:auto}
.n-hd .n-tl-i b{justify-content:center}
/* chat window: its lower part, with the message box, runs off below the edge of the section */
.n-qa-wrap .n-panel-b{padding-bottom:0;overflow:hidden}
.n-qa-wrap .n-cp-phone{border-radius:32px 32px 0 0;margin-bottom:-2px;box-shadow:0 0 0 1px var(--line),0 -10px 80px -30px rgba(10,10,30,.2),0 0 120px -30px color-mix(in srgb,var(--brand) 20%,transparent)}
.n-qa-wrap .n-cp-in{display:none}
.n-qa-wrap .n-cp-thread{height:clamp(420px,52vh,540px);padding-bottom:48px}
@media (max-width:767px){.n-qa-wrap .n-cp-phone{border-radius:26px 26px 0 0}.n-qa-wrap .n-cp-thread{height:440px}}
/* the menu sits above the hero card, not on it */
.n-hero{padding-top:68px}
.nm .story[data-plain]{min-height:clamp(640px,calc(100svh - 116px),860px)}
.nm .story[data-plain] .hero-say{padding-top:clamp(48px,8vh,88px)}
.n-hd{padding-top:clamp(44px,7vh,80px)}
@media (max-width:767px){
  .n-hero{padding-top:60px}
  .nm .story[data-plain]{min-height:clamp(600px,calc(100svh - 104px),760px)}
  .nm .story[data-plain] .hero-say{padding-top:44px}
  .n-hd{padding-top:40px}
}
/* hero loop, both directions written out so the way back is as smooth as the way there.
   Forward: first line lifts away, second line travels up and pales, "day by day." arrives, timeline rises.
   Back: timeline sinks, "day by day." drops away, the pale line travels back down and darkens, "Swap the" and its object come down into place. */
.story.is-two .n-hd .n-tl-wrap{transition:opacity .5s ease,transform .8s var(--e)}
.story.is-two:not(.is-b) .n-hd .n-tl-wrap{transition-delay:0s}
.story.is-two:not(.is-b) .n-tl-line,.story.is-two:not(.is-b) .n-tl-line i{transition-delay:0s}
.story.is-two:not(.is-b) .n-hd-head .n-chip,.story.is-two:not(.is-b) .n-hd-head p{transition-delay:0s}
.story.is-two:not(.is-b) .n-hd-head h2 .n-main{transition-delay:.08s}
.story.is-two:not(.is-b) .n-hd-head h2 .n-dim{transition-delay:.35s,.35s,0s;opacity:0}
.story.is-two:not(.is-b) .hero-say h1 .n-main{transition-delay:.35s,.35s,0s}
.story.is-two:not(.is-b) .hero-say .n-chip{transition-delay:.75s}
.story.is-two:not(.is-b) .hero-say h1 .n-dim,.story.is-two:not(.is-b) .hero-say h1 .rot{transition-delay:.85s}
/* the two lines that trade places cross-fade exactly on top of each other, so it reads as one line changing */
.story.is-two .hero-say h1 .n-main,.story.is-two .n-hd-head h2 .n-dim{transition-property:transform,opacity,filter;transition-duration:1.1s,.6s,.5s;transition-timing-function:cubic-bezier(.65,0,.2,1),ease,ease}
.story.is-two.is-b .hero-say h1 .n-main{transition-delay:.1s,.35s,0s}
.story.is-two.is-b .n-hd-head h2 .n-dim{transition-delay:.1s,.35s,0s}
/* tabs: the icon of the open tab moves, each in its own way */
.n-tab .ic{transform-origin:50% 60%}
.n-tab.is-on .ic{animation:ti-jump 1.3s cubic-bezier(.3,0,.3,1) infinite}
.n-tab.is-on:nth-child(2) .ic{animation:ti-drift 2.2s ease-in-out infinite}
.n-tab.is-on:nth-child(3) .ic{animation:ti-breathe 3.6s ease-in-out infinite}
.n-tab.is-on:nth-child(4) .ic{animation:ti-talk 1.8s ease-in-out infinite}
.n-tab.is-on:nth-child(5) .ic{animation:ti-swing 2s ease-in-out infinite;transform-origin:30% 20%}
.n-tab.is-on:nth-child(6) .ic{animation:ti-cheer 1.8s ease-in-out infinite}
.n-tab.is-on:nth-child(7) .ic{animation:ti-pop 2s var(--e) infinite}
@keyframes ti-jump{0%,100%{transform:translateY(0) scale(1,1)}18%{transform:translateY(1px) scale(1.12,.86)}45%{transform:translateY(-4px) scale(.94,1.1)}70%{transform:translateY(0) scale(1.08,.92)}85%{transform:translateY(0) scale(1,1)}}
@keyframes ti-drift{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2.500px)}}
@keyframes ti-breathe{0%,100%{transform:scale(.9)}50%{transform:scale(1.14)}}
@keyframes ti-talk{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.06)}50%{transform:rotate(6deg) scale(1)}75%{transform:rotate(-3deg) scale(1.04)}}
@keyframes ti-swing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes ti-cheer{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}}
@keyframes ti-pop{0%,60%,100%{transform:scale(1)}75%{transform:scale(1.3)}88%{transform:scale(.92)}}
@media (prefers-reduced-motion:reduce){.n-tab.is-on .ic{animation:none!important}}
/* name pill: only the logo; the name slides out on hover or keyboard focus */
.n-brand{gap:0;padding:0 7px}
.n-brand span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--e),opacity .3s ease,margin .5s var(--e)}
.n-brand:hover span,.n-brand:focus-visible span{max-width:120px;opacity:1;margin:0 8px 0 8px}
/* menu links: once the page is scrolled they shrink to their icons; a link shows its label again on hover or focus (wide screens, where the icons are shown) */
.n-links a span{display:inline-block;max-width:160px;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--e),opacity .3s ease}
.n-links a{transition:color .15s,background-color .15s,gap .5s var(--e),padding .5s var(--e)}
@media (min-width:1024px){
  .n-nav.is-up .n-links a{gap:0;padding:0 10px}
  .n-nav.is-up .n-links a .ic{width:16px;height:16px}
  .n-nav.is-up .n-links a span{max-width:0;opacity:0}
  .n-nav.is-up .n-links a:hover,.n-nav.is-up .n-links a:focus-visible{gap:6px;padding:0 12px}
  .n-nav.is-up .n-links a:hover span,.n-nav.is-up .n-links a:focus-visible span{max-width:160px;opacity:1}
}
/* hero leaving: scale down and fade with the scroll (value set by script) */
.nm .story[data-plain]{transform:scale(calc(1 - var(--hp,0)*.12));opacity:calc(1 - var(--hp,0)*1.05);transform-origin:50% 35%;will-change:transform,opacity}
.nm .story[data-plain].is-gone{visibility:hidden}
@media (prefers-reduced-motion:reduce){.n-brand span,.n-links a span,.n-links a{transition:none}}
/* QR card: shrinks to the code alone once the page is scrolled; over dark parts it becomes light glass */
.nm .getcard{transition:background-color .4s ease,box-shadow .4s ease,padding .5s var(--e),gap .5s var(--e),color .4s ease,-webkit-backdrop-filter .4s,backdrop-filter .4s}
.nm .getcard-copy{max-width:170px;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--e),opacity .3s ease}
.nm .getcard-copy span{white-space:normal}
.nm .getcard.is-min{gap:0;padding:8px}
.nm .getcard.is-min .getcard-copy{max-width:0;opacity:0}
.nm .getcard.is-min:hover{gap:12px;padding:8px 18px 8px 8px}
.nm .getcard.is-min:hover .getcard-copy{max-width:170px;opacity:1}
.nm .getcard.on-dark{background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.35),0 20px 40px -16px rgba(0,0,0,.5)}
.nm .getcard.on-dark .getcard-copy span{color:rgba(255,255,255,.75)}
.nm .getcard.on-dark .getcard-x{background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* step 1: a drawn finger taps the button, coming up from below */
.sv-hand{left:50%;top:62%;width:34px;margin-left:-6px;fill:none;stroke:none;filter:drop-shadow(0 10px 10px rgba(10,10,30,.22));transform-origin:50% 100%;animation:sv-finger 3.2s var(--e) infinite}
@keyframes sv-finger{0%,10%{transform:translate(26px,70px) rotate(14deg);opacity:0}30%{transform:translate(0,10px) rotate(8deg);opacity:1}42%{transform:translate(0,0) rotate(8deg) scale(.96)}52%{transform:translate(0,10px) rotate(8deg)}72%{transform:translate(0,10px) rotate(8deg);opacity:1}90%,100%{transform:translate(26px,70px) rotate(14deg);opacity:0}}
.n-step-vis.v1{overflow:hidden}
/* ---- fixes from the review ---- */
/* reduced motion: the two hero beats one under the other */
.nm .story[data-plain].is-stack{display:block}
.nm .story[data-plain].is-stack .hero-say{padding-bottom:24px}
/* the QR card stays out of the way while the hero's second beat (with its text at the bottom right) is showing at the top of the page */
body:has(.story.is-b) .nm .getcard:not(.is-min),.nm:has(.story.is-b) .getcard:not(.is-min){opacity:0;visibility:hidden;pointer-events:none}
.nm .getcard{transition:background-color .4s ease,box-shadow .4s ease,padding .5s var(--e),gap .5s var(--e),color .4s ease,opacity .4s ease,visibility .4s}
/* the chat thread no longer holds the page's scroll */
.n-cp-thread{overscroll-behavior:auto;position:relative}
/* step 2: the four choices fit the card at every width */
.sv-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-opt{min-width:0;white-space:nowrap}
@media (min-width:768px) and (max-width:1023px){.sv-pick{width:90%;gap:6px}.sv-opt{height:42px;padding:0 7px;gap:5px;font-size:11px;border-radius:13px}.sv-opt i{width:22px;height:22px;border-radius:8px;flex:none}.sv-opt .ic{width:13px;height:13px}}
/* headline word when the object pictures do not arrive: the plain word, whole */
.rot.no-pics:not(.has-pics){width:auto!important;height:auto;overflow:visible;margin:0;top:0}
.rot.no-pics:not(.has-pics) .rot-w{position:static}
/* second beat: readable note; and on short screens the headline and tiles scale with the height so the four stops stay in view */
.n-hd-head p{color:var(--ink2)}
.n-hd-head h2,.nm .n-hd-head h2,.nm .story[data-plain] .hero-say h1{font-size:clamp(44px,min(7.6vw,13.4vh),110px)}
.n-hd .n-tl-wrap{--ob:clamp(72px,min(8.2vw,12vh),116px)}
@media (max-width:767px){.n-hd-head h2,.nm .n-hd-head h2,.nm .story[data-plain] .hero-say h1{font-size:clamp(32px,10.4vw,60px)}.n-hd .n-tl-wrap{--ob:84px}.n-hd-head p{font-size:14px}.nm .story .hero-say .rot-pic small{font-size:max(12px,.2em);color:var(--ink2)}}
/* short laptop screens: the whole second beat fits above the fold (no marks at the bottom any more, so less room is kept there) */
.n-hd{padding-bottom:34px}
.n-hd-head h2,.nm .n-hd-head h2,.nm .story[data-plain] .hero-say h1{font-size:clamp(44px,min(7.6vw,11vh),110px)}
.n-hd .n-tl-wrap{--ob:clamp(64px,min(8.2vw,10vh),116px)}
@media (max-width:767px){.n-hd-head h2,.nm .n-hd-head h2,.nm .story[data-plain] .hero-say h1{font-size:clamp(32px,10.4vw,60px)}.n-hd .n-tl-wrap{--ob:84px}.n-hd{padding-bottom:28px}}
/* the hero and the drawn/animated pieces cannot be selected or dragged (clicks on the hero are for the dots, not for highlighting text) */
.nm .story[data-plain],.nm .n-step-vis,.nm .n-phone,.nm .n-bv,.nm .getcard,.nm .n-end-ball{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nm img,.nm svg{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
/* step 1: a big finger, coming up from the bottom edge of the card */
.sv-hand{width:66px;margin-left:-8px;top:56%;filter:drop-shadow(0 14px 14px rgba(10,10,30,.25))}
@keyframes sv-finger{0%,10%{transform:translate(40px,110px) rotate(16deg);opacity:0}30%{transform:translate(0,12px) rotate(8deg);opacity:1}42%{transform:translate(0,0) rotate(8deg) scale(.97)}52%{transform:translate(0,12px) rotate(8deg)}72%{transform:translate(0,12px) rotate(8deg);opacity:1}90%,100%{transform:translate(40px,110px) rotate(16deg);opacity:0}}
/* the finger is long enough to always run off the bottom of the card, so its end is never seen */
.sv-hand{transform-origin:50% 20%}
.n-step-vis.v1{overflow:hidden}
/* last card: only the words, at hero size (pale first line, bright second) */
.nm .n-end h2{font-size:clamp(40px,min(7.6vw,11vh),110px);line-height:.98;letter-spacing:-.04em;font-weight:600;background:none;-webkit-text-fill-color:currentColor;text-wrap:balance}
.nm .n-end h2 .n-dim,.nm .n-end h2 .n-main{display:inline-block;padding:.06em .04em .24em;margin:-.06em -.04em -.24em;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nm .n-end h2 .n-dim{background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.56))}
.nm .n-end h2 .n-main{background-image:linear-gradient(180deg,#fff 0%,#fff 48%,color-mix(in srgb,var(--brand-hi) 55%,#C9CCDA) 100%)}
@media (max-width:767px){.nm .n-end h2{font-size:clamp(30px,9.6vw,56px)}}
/* hero: no grey card behind it, just white (the dots and the faint colour stay) */
.nm .story[data-plain]{background:#fff;box-shadow:none}
.n-dotfield{-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
.nm .story[data-plain]{position:relative}
.story.no-tr .hero-say h1 .n-main,.story.no-tr .n-hd-head h2 .n-dim{transition:none!important}
/* the second headline's box itself never moves or fades (only its two lines do), so the travelling line lands exactly */
.nm .story.is-two .n-hd-head>h2,.nm .story.is-two:not(.is-b) .n-hd-head>h2,.nm .story.is-two.is-b .n-hd-head>h2{opacity:1;transform:none;filter:none;transition:none}
/* ===== hero headline as one flowing sentence =====
   Every word is its own piece. The shared words ("a good habit") physically glide between the two headlines; the others fade around them. */
.nm .story[data-plain] h1 .w,.nm .story[data-plain] h2 .w{display:inline-block;padding:.06em .02em .24em;margin:-.06em -.02em -.24em;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;will-change:transform,opacity}
.nm .story[data-plain] .n-main .w{background-image:linear-gradient(178deg,#3A3A44 0%,#0A0A0A 36%,#000 60%,#4A4A58 100%)}
.nm .story[data-plain] .n-dim .w{background-image:linear-gradient(180deg,rgba(10,10,10,.24) 0%,rgba(10,10,10,.5) 100%)}
/* the line wrappers no longer animate or carry the gradient themselves */
.nm .story[data-plain] .hero-say h1 .n-dim,.nm .story[data-plain] .hero-say h1 .n-main,.nm .story[data-plain] .n-hd-head h2 .n-dim,.nm .story[data-plain] .n-hd-head h2 .n-main{display:inline!important;transform:none!important;opacity:1!important;filter:none!important;transition:none!important;background:none!important;-webkit-text-fill-color:currentColor!important;padding:0!important;margin:0!important}
.story.flat .w{transform:none!important}
.story.no-tr .w{transition:none!important}
/* timing: one curve for the glide, soft fades for the rest */
.story.is-two h1 .w,.story.is-two h2 .w{transition:transform 1.05s cubic-bezier(.62,.02,.18,1),opacity .45s ease,filter .45s ease}
/* shared words: each copy rides the same path, cross-fading in the middle of it, so the eye sees one word move and change tone */
.story.is-two.is-b .hero-say h1 .w[data-k]{transform:translate(var(--tx,0),var(--ty,0));opacity:0;transition-delay:0s,.42s,0s}
.story.is-two:not(.is-b) .hero-say h1 .w[data-k]{transition-delay:0s,.2s,0s}
.story.is-two:not(.is-b) .n-hd-head h2 .w[data-k]{transform:translate(var(--tx,0),var(--ty,0));opacity:0;transition-delay:0s,.42s,0s}
.story.is-two.is-b .n-hd-head h2 .w[data-k]{transition-delay:0s,.2s,0s}
/* words only in beat one: they lift and dissolve first, and settle back last */
.story.is-two.is-b .hero-say h1 .w:not([data-k]){opacity:0;transform:translateY(-38%);filter:blur(10px);transition-delay:calc(var(--i)*35ms)}
.story.is-two:not(.is-b) .hero-say h1 .w:not([data-k]){transition-delay:calc(.62s + var(--i)*45ms)}
.story.is-two.is-b .hero-say h1 .rot,.story.is-two.is-b .hero-say .n-chip{opacity:0;transform:translateY(-38%) scale(.8);filter:blur(10px);transition:opacity .45s ease,transform 1.05s cubic-bezier(.62,.02,.18,1),filter .45s ease;transition-delay:.05s}
.story.is-two:not(.is-b) .hero-say h1 .rot,.story.is-two:not(.is-b) .hero-say .n-chip{transition:opacity .45s ease,transform 1.05s cubic-bezier(.62,.02,.18,1),filter .45s ease;transition-delay:.7s}
/* words only in beat two: they arrive from below once the glide is under way, and leave first on the way back */
.story.is-two:not(.is-b) .n-hd-head h2 .w:not([data-k]){opacity:0;transform:translateY(46%);filter:blur(10px);transition-delay:calc(var(--i)*30ms)}
.story.is-two.is-b .n-hd-head h2 .w:not([data-k]){transition-delay:calc(.5s + var(--i)*70ms)}
/* the small pieces around the second headline follow the words */
.story.is-two .n-hd-head .n-chip,.story.is-two .n-hd-head p{transition:opacity .5s ease,transform .9s var(--e),filter .5s ease}
.story.is-two:not(.is-b) .n-hd-head .n-chip,.story.is-two:not(.is-b) .n-hd-head p{opacity:0;transform:translateY(16px);filter:blur(6px);transition-delay:0s}
.story.is-two.is-b .n-hd-head .n-chip{transition-delay:.55s}.story.is-two.is-b .n-hd-head p{transition-delay:.95s}
.story.is-two.is-b .n-hd .n-tl-wrap{transition-delay:1.05s}
@media (prefers-reduced-motion:reduce){.story h1 .w,.story h2 .w{transition:none!important}}
/* ===== hero change, simple: the old headline goes up, shrinking and fading; the new one rises from below ===== */
/* the word-by-word glide is switched off */
.nm .story.is-two h1 .w,.nm .story.is-two h2 .w{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
.nm .story.is-two .hero-say .n-chip,.nm .story.is-two .hero-say h1 .rot,.nm .story.is-two .n-hd-head .n-chip,.nm .story.is-two .n-hd-head p{opacity:1!important;filter:none!important;transition:none!important}
.nm .story.is-two .hero-say .n-chip,.nm .story.is-two .n-hd-head .n-chip,.nm .story.is-two .n-hd-head p{transform:none!important}
.nm .story.is-two .hero-say h1 .rot{transform:none!important}
/* the two blocks */
.nm .story.is-two>.hero-say,.nm .story.is-two>.n-hd{transform-origin:50% 38%;transition:transform .95s cubic-bezier(.22,1,.36,1),opacity .5s ease,filter .5s ease!important;will-change:transform,opacity}
.nm .story.is-two>.v-on{transform:none!important;opacity:1!important;filter:none!important;transition-delay:.18s!important}
.nm .story.is-two>.v-above{transform:translateY(-110px) scale(.86)!important;opacity:0!important;filter:blur(8px)!important;pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.75,.4),opacity .45s ease,filter .45s ease!important;transition-delay:0s!important}
.nm .story.is-two>.v-below{transform:translateY(130px)!important;opacity:0!important;filter:none!important;pointer-events:none}
.nm .story.is-two>.v-snap{transition:none!important}
/* the timeline inside the second block starts as the block arrives */
.story.is-two.is-b .n-hd .n-tl-wrap{transition-delay:.3s}
.story.is-two.is-b .n-tl-line{transition-delay:.45s}
.story.is-two.is-b .n-tl-line i{transition:clip-path 1.6s var(--e) .6s}
/* hero: full screen. Edge to edge, no rounded card, the height of the window */
.n-hero{padding:0}
.nm .story[data-plain]{max-width:none;border-radius:0;min-height:calc(100svh - 32px)}
.nm .story[data-plain] .hero-say{padding-top:calc(68px + clamp(40px,7vh,80px))}
.n-hd{padding-top:calc(68px + clamp(28px,5vh,64px))}
.n-dotfield{-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 50%,#000 35%,transparent 100%)}
@media (max-width:767px){
  .n-hero{padding:0}
  .nm .story[data-plain]{min-height:calc(100svh - 32px)}
  .nm .story[data-plain] .hero-say{padding-top:calc(60px + 36px)}
  .n-hd{padding-top:calc(60px + 28px)}
}
/* timeline pictures: exactly over their markers (an old 14px offset removed) */
.n-hd .n-tl-i .n-tobj{right:auto;left:auto;top:auto}
/* hero change: only the words move (old up and out, new up from below). The timeline does not travel; it fades in where it stands */
.nm .story.is-two>.n-hd{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
.nm .story.is-two .n-hd-head{transform-origin:50% 38%;transition:transform .95s cubic-bezier(.22,1,.36,1),opacity .5s ease,filter .5s ease;will-change:transform,opacity}
.nm .story.is-two .n-hd-head.v-on{transform:none;opacity:1;filter:none;transition-delay:.18s}
.nm .story.is-two .n-hd-head.v-above{transform:translateY(-110px) scale(.86);opacity:0;filter:blur(8px);transition:transform .7s cubic-bezier(.5,0,.75,.4),opacity .45s ease,filter .45s ease;transition-delay:0s}
.nm .story.is-two .n-hd-head.v-below{transform:translateY(130px);opacity:0;filter:none}
.nm .story.is-two .n-hd-head.v-snap{transition:none}
.story.is-two .n-hd .n-tl-wrap{transition:opacity .7s ease,transform .9s var(--e)}
.story.is-two:not(.is-b) .n-hd .n-tl-wrap{opacity:0;transform:translateY(14px);transition-delay:0s}
.story.is-two.is-b .n-hd .n-tl-wrap{opacity:1;transform:none;transition-delay:.45s}
/* ===== hero with GSAP (.is-g): both headlines in the same place, in the middle; the timeline along the bottom ===== */
.nm .story.is-g{display:block!important;position:relative;min-height:calc(100svh - 32px)}
.nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{position:absolute!important;inset:0;z-index:1;width:auto;max-width:none;margin:0;padding:0 var(--pad)!important;display:grid!important;grid-template-rows:.82fr auto 1.18fr;justify-items:center;align-items:center;text-align:center;transform:none!important;opacity:1!important;filter:none!important;transition:none!important;pointer-events:none}
.nm .story.is-g .n-say-l{display:contents}
.nm .story.is-g>.n-hd{position:static;padding:0!important;display:block;transform:none!important;opacity:1!important;filter:none!important;max-width:none}
.nm .story.is-g .n-chip{grid-row:1;align-self:end;margin:0 0 26px}
.nm .story.is-g h1,.nm .story.is-g h2{grid-row:2;margin:0!important;opacity:1!important;transform:none!important;filter:none!important}
.nm .story.is-g .n-hd-head p{grid-row:3;align-self:start;margin:20px auto 0;visibility:hidden}
.nm .story.is-g .n-hd-head{visibility:hidden}
/* letters: each is its own piece and carries the gradient itself */
.nm .story.is-g .w{display:inline-block;white-space:nowrap;background:none!important;-webkit-text-fill-color:currentColor!important;padding:0!important;margin:0!important;transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
.nm .story.is-g .c{display:inline-block;padding:.06em 0 .24em;margin:-.06em 0 -.24em;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;will-change:transform,opacity,filter;backface-visibility:hidden}
.nm .story.is-g .n-main .c{background-image:linear-gradient(178deg,#3A3A44 0%,#0A0A0A 36%,#000 60%,#4A4A58 100%)}
.nm .story.is-g .n-dim .c{background-image:linear-gradient(180deg,rgba(10,10,10,.24) 0%,rgba(10,10,10,.5) 100%)}
.nm .story.is-g h1 .rot{will-change:transform,opacity}
/* the timeline: compact, pinned along the bottom, never under the words */
.nm .story.is-g .n-tl-wrap{position:absolute;z-index:1;left:0;right:0;bottom:clamp(18px,3vh,34px);width:min(1040px,100%);margin:0 auto!important;padding:0 var(--pad);--ob:clamp(48px,min(6vw,7.4vh),76px);text-align:center;transform:none;visibility:hidden}
.nm .story.is-g .n-tl{gap:24px}
.nm .story.is-g .n-tl-i .n-tobj{margin-bottom:16px}
.nm .story.is-g .n-tl-dot{margin-bottom:14px;scale:1}
.nm .story.is-g .n-tl-line{left:var(--pad);right:var(--pad);top:calc(var(--ob) + 16px + 7px);opacity:1}
.nm .story.is-g .n-tl-i b{font-size:clamp(26px,3.4vh,38px)}.nm .story.is-g .n-tl-i b small{font-size:15px}
.nm .story.is-g .n-tl-i p{margin-top:6px;font-size:clamp(12.5px,1.6vh,14.5px);line-height:1.4;max-width:24ch}
.nm .story.is-g .n-tl-i>b,.nm .story.is-g .n-tl-i>p{opacity:1;transform:none}
.nm .story.is-g .n-tl-i .n-tobj>img,.nm .story.is-g .n-tl-i .n-tobj>svg{opacity:1;transform:none}
@media (max-width:767px){
  .nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.62fr auto 1.38fr}
  .nm .story.is-g .n-tl-wrap{width:auto;margin:0!important;padding:0 var(--pad);overflow-x:auto;--ob:64px;bottom:20px}
  .nm .story.is-g .n-tl{padding-inline:0;gap:18px}
  .nm .story.is-g .n-tl-line{left:var(--pad);right:auto;top:calc(var(--ob) + 16px + 7px)}
  .nm .story.is-g .n-tl-i .n-tobj,.nm .story.is-g .n-tl-dot{position:relative;left:auto;top:auto}
  .nm .story.is-g .n-tl-i .n-tobj{margin:0 0 16px}.nm .story.is-g .n-tl-dot{margin:0 0 14px}
  .nm .story.is-g .n-tl-i b{font-size:30px}.nm .story.is-g .n-tl-i p{font-size:13.5px}
  .nm .story.is-g .n-hd-head p{font-size:12.5px;margin-top:14px}
}
/* GSAP hero: one column, so the first headline is centred like the second */
.nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-columns:minmax(0,1fr)!important;gap:0!important;grid-template-rows:.9fr auto 1.1fr}
.nm .story.is-g h1,.nm .story.is-g h2{text-align:center;justify-self:center}
@media (max-width:767px){.nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.62fr auto 1.38fr}}
/* phone screens follow the page colour */
:root{--hue:0deg}
:root[data-theme=sol]{--hue:158deg}
:root[data-theme=sage]{--hue:-62deg}
:root[data-theme=luna]{--hue:36deg}
/* drawn screens: every blue accent becomes the page colour */
.wk{background:radial-gradient(70% 40% at 50% 38%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 70%),linear-gradient(180deg,#0A0C18,#04050A)}
.wk-n{color:var(--brand-hi)}
.wk-ring .go{stroke:var(--brand-hi);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--brand) 90%,transparent))}
.wk-bar u{background:var(--brand-hi)}
.hm{background:radial-gradient(80% 36% at 50% 26%,color-mix(in srgb,var(--brand) 42%,transparent),transparent 72%),linear-gradient(180deg,#0A0C18,#04050A)}
.hm-c small{color:var(--brand-hi)}
.hm-c u{background:var(--brand-hi)}
.hm-btn{background:var(--brand);color:var(--on-brand,#fff);animation-name:hm-pulse2}
@keyframes hm-pulse2{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
.chat-live .cb.me{background:var(--brand);color:var(--on-brand,#fff)}
.n-scr .chat-pill{background:var(--brand);color:var(--on-brand,#fff)}
.bd-head small{color:var(--brand-hi)}
/* recorded clips and the body screenshot: their blue is turned toward the page colour */
.n-scr video,.bd>img{filter:hue-rotate(var(--hue));transition:filter 1.2s cubic-bezier(.45,0,.2,1)}
.js .bd:not(.is-live)>img{filter:blur(10px) brightness(.4) hue-rotate(var(--hue))}
.bd.p2>img{filter:brightness(.55) hue-rotate(var(--hue))}
.bd.p3>img{filter:hue-rotate(var(--hue))}
.bd-scan{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand-hi) 40%,transparent),transparent)}
/* sections leaving at the top: same shrink and fade as the hero (value set by script) */
#how>.n-in.is-leaving,#inside>.n-panel.is-leaving,#more>.n-in.is-leaving,#faq>.n-panel.is-leaving{transform:scale(calc(1 - var(--lp,0)*.12));opacity:calc(1 - var(--lp,0)*1.05);transform-origin:50% calc(100% - 28vh);will-change:transform,opacity}
/* the widget follows the page colour too: its buddy, its dark face and its glow */
.bw-a{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 26%,#12162B),var(--night));box-shadow:0 24px 34px -16px color-mix(in srgb,var(--brand) 45%,rgba(10,10,40,.55)),inset 0 0 0 1px rgba(255,255,255,.08)}
.bw-b b{color:var(--ink)}
.n-end-ball{box-shadow:0 0 0 8px rgba(255,255,255,.12),0 0 60px 20px var(--glow)}
/* QR card: bottom centre */
.nm .getcard{right:auto;left:50%;translate:-50% 0}
/* pieces that GSAP brings in itself: the older CSS entrance stays out of the way */
.nm .g-own,.nm .g-own *{transition-property:none!important}
.nm .n-step.g-own .n-num,.nm .n-step.g-own h3,.nm .n-step.g-own>p,.nm .n-step.g-own .n-step-vis>*{transition:none!important}
.nm [data-rv].g-own{opacity:1;transform:none;filter:none}
/* the exercise figure's top and shoes take the page colour (as in the app, where the outfit follows the buddy) */
.wk-mv [fill="rgb(255,122,38)"],.sv-fig [fill="rgb(255,122,38)"]{fill:var(--brand)}
.wk-mv [fill="rgb(236,106,26)"],.sv-fig [fill="rgb(236,106,26)"],.wk-mv [fill="rgb(224,100,26)"],.sv-fig [fill="rgb(224,100,26)"]{fill:var(--brand-lo)}
.wk-mv [fill="rgb(207,90,22)"],.sv-fig [fill="rgb(207,90,22)"]{fill:var(--brand-deep)}
.wk-mv [stroke="rgb(255,122,38)"],.sv-fig [stroke="rgb(255,122,38)"]{stroke:var(--brand)}
/* the same outfit tint, with the colour values exactly as the animation writes them */
.wk-mv [fill="rgb(255,121,37)"],.sv-fig [fill="rgb(255,121,37)"]{fill:var(--brand)}
.wk-mv [fill="rgb(235,106,26)"],.sv-fig [fill="rgb(235,106,26)"],.wk-mv [fill="rgb(223,99,26)"],.sv-fig [fill="rgb(223,99,26)"]{fill:var(--brand-lo)}
.wk-mv [fill="rgb(207,90,21)"],.sv-fig [fill="rgb(207,90,21)"]{fill:var(--brand-deep)}
/* QR: the floating card only lives on the first screen; once you scroll it goes, and the code waits in the last card under the words */
.nm .getcard.is-min,.nm .getcard.is-min:hover{opacity:0;visibility:hidden;pointer-events:none;translate:-50% 16px}
.nm .n-end-qr{margin-top:clamp(28px,5vh,56px);display:grid;justify-items:center;gap:14px;max-width:none;text-align:center;font-size:14px;color:rgba(255,255,255,.6)}
.nm .n-end-qr .qr{width:132px;height:132px;border-radius:24px;padding:12px;background:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.08),0 30px 60px -20px rgba(0,0,0,.6)}
.nm .n-end-qr .qr svg{display:block;width:100%;height:100%}
@media (max-width:767px){.nm .n-end-qr{display:grid}.nm .n-end-qr .qr{width:112px;height:112px}}
html:not(.js) .nm .n-end-qr{display:none}
.nm .n-end-ball{top:7%;left:28%}
/* medals tab: the reward screen, drawn here (the medal turns, the rays drift, confetti falls) */
.rw{position:absolute;inset:0;display:block;overflow:hidden;color:#fff;text-align:center;background:radial-gradient(70% 46% at 50% 34%,rgba(134,82,246,.5),transparent 72%),linear-gradient(180deg,#120B26,#07060F)}
.rw-rays{position:absolute;left:50%;top:34%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(167,123,245,.3) 0 7deg,transparent 7deg 20deg);-webkit-mask-image:radial-gradient(closest-side,#000 0,transparent 78%);mask-image:radial-gradient(closest-side,#000 0,transparent 78%);filter:blur(2px);animation:rw-rays 26s linear infinite;opacity:0;transition:opacity .6s ease .1s}
.rw.is-shown .rw-rays,.rw.is-still .rw-rays{opacity:1}
@keyframes rw-rays{to{rotate:360deg}}
.rw-conf{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.rw-medal{position:absolute;z-index:2;left:50%;top:34%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.01);filter:drop-shadow(0 14px 22px rgba(60,20,140,.6));will-change:transform}
.rw.is-still .rw-medal{transform:translate(-50%,-50%)}
.rw-medal svg{display:block;width:100%;height:100%}
.rw-new,.rw-title,.rw-sub,.rw-say,.rw-btn{position:absolute;left:0;right:0;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .7s var(--e)}
.rw.is-shown .rw-new,.rw.is-shown .rw-title,.rw.is-shown .rw-sub,.rw.is-shown .rw-say,.rw.is-shown .rw-btn,.rw.is-still .rw-new,.rw.is-still .rw-title,.rw.is-still .rw-sub,.rw.is-still .rw-say,.rw.is-still .rw-btn{opacity:1;transform:none}
.rw-new{top:55%;font-size:10.5px;font-weight:700;letter-spacing:.24em;color:#C9A8FF;transition-delay:.9s}
.rw-title{top:59%;font-size:25px;font-weight:700;letter-spacing:-.02em;transition-delay:1s}
.rw-sub{top:66.5%;font-size:12.5px;color:rgba(255,255,255,.7);transition-delay:1.1s}
.rw-say{top:76%;display:flex;align-items:center;justify-content:center;gap:8px;transition-delay:1.35s}
.rw-say .ball{width:26px}
.rw-say em{font-style:normal;font-size:12px;font-weight:500;padding:7px 11px;border-radius:12px;background:rgba(255,255,255,.1)}
.rw-btn{left:16px;right:16px;bottom:38px;height:44px;border-radius:99px;background:#fff;color:#0A0A0A;font-size:14.5px;font-weight:600;line-height:44px;transition-delay:1.5s}
.md .rw.md-a{transition:opacity .6s ease,transform .9s var(--e),filter .6s ease}
.md.is-live .rw.md-a{animation:none}
html:not(.js) .rw{display:none}
/* medals page: its "I'm craving" button is redrawn over the screenshot in the page colour */
.md span.md-b{position:absolute;inset:0;display:block}
.md span.md-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.md-btn{position:absolute;left:5.1%;right:5.3%;top:81.3%;height:6.2%;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:99px;background:var(--brand);color:var(--on-brand,#fff);font-size:13px;font-weight:600;box-shadow:0 0 18px -2px color-mix(in srgb,var(--brand) 70%,transparent)}
.md-btn .ic{width:15px;height:15px}
/* four buddies: a squash-and-stretch pop when one reacts */
.bb-i{cursor:pointer}
.bb-i .ball.bb-pop{animation:bb-pop .7s var(--e)}
@keyframes bb-pop{0%{scale:1}28%{scale:1.2 .88}55%{scale:.94 1.1}100%{scale:1}}
/* medals page button: fully covers the blue one under it, with a dark surround that hides the blue glow */
.md-btn{left:4.4%;right:4.6%;top:81%;height:6.9%;box-shadow:0 0 0 7px #07080E,0 0 0 14px rgba(7,8,14,.7);font-size:13.5px}
/* medals page button, finished like the app's own: soft top light, deeper lower edge, a glow in the page colour */
.md-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-hi) 55%,var(--brand)) 0%,var(--brand) 46%,var(--brand-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.18),0 0 0 7px #07080E,0 0 0 14px rgba(7,8,14,.72),0 8px 26px 12px color-mix(in srgb,var(--brand) 38%,transparent);letter-spacing:-.01em;text-shadow:0 1px 0 rgba(0,0,0,.12)}
.md-btn .ic{width:16px;height:16px;stroke-width:2.2}
/* ===== Your body, alive: the organs breathe and beat, markers pulse, the view dives to the heart when it is tapped, and its sheet draws itself ===== */
.bd-art{position:absolute;inset:0;display:block;transform-origin:57% 43.6%;transition:transform 1.1s cubic-bezier(.6,0,.2,1),filter .9s ease}
.bd>img{display:none}
.bd-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:hue-rotate(var(--hue))}
.js .bd:not(.is-live) .bd-art{transform:scale(1.2);filter:blur(10px) brightness(.4)}
.bd.is-live .bd-art{transform:none;filter:none;transition:transform 1.6s var(--e),filter 1.2s ease}
.bd.p1 .bd-art{transform:scale(1.9);transition:transform 1s cubic-bezier(.6,0,.2,1),filter .8s ease}
.bd.p2 .bd-art{transform:scale(2.2) translateY(-13%);filter:brightness(.7)}
.bd.p3 .bd-art{transform:none;filter:none;transition:transform 1s var(--e),filter .7s ease}
/* lungs breathe, heart beats */
.bd-lung{position:absolute;top:36.5%;width:19%;height:12.5%;border-radius:46% 46% 40% 40%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-hi) 60%,transparent),transparent 78%);mix-blend-mode:screen;opacity:.0;animation:bd-breathe 4.6s ease-in-out infinite}
.bd-lung.l{left:33%}.bd-lung.r{left:51%;animation-delay:.12s}
@keyframes bd-breathe{0%,100%{opacity:.18;transform:scale(.92)}50%{opacity:.75;transform:scale(1.1)}}
.bd-heart{position:absolute;left:57%;top:43.6%;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;background:radial-gradient(closest-side,#FF6B8A,rgba(255,107,138,.35) 55%,transparent 75%);mix-blend-mode:screen;animation:bd-beat 1.1s ease-in-out infinite}
@keyframes bd-beat{0%,100%{transform:scale(.8);opacity:.45}12%{transform:scale(1.25);opacity:1}24%{transform:scale(.92);opacity:.6}36%{transform:scale(1.15);opacity:.9}55%{transform:scale(.8);opacity:.45}}
/* the five markers pulse in turn */
.bd-dot{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--brand-hi);box-shadow:0 0 8px var(--brand-hi)}
.bd-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--brand-hi);animation:bd-ping 2.6s ease-out infinite}
.bd-dot.d1{left:43.5%;top:21.5%}.bd-dot.d2{left:53.5%;top:26.7%}.bd-dot.d2::after{animation-delay:.4s}.bd-dot.d3{left:46.3%;top:31.3%}.bd-dot.d3::after{animation-delay:.8s}.bd-dot.d4{left:38.6%;top:39.6%}.bd-dot.d4::after{animation-delay:1.2s}.bd-dot.d5{left:57%;top:43.6%;background:#FF8FA6;box-shadow:0 0 10px #FF6B8A}.bd-dot.d5::after{border-color:#FF8FA6;animation-delay:1.6s}
@keyframes bd-ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(4.2);opacity:0}}
.js .bd:not(.is-live) .bd-dot,.js .bd:not(.is-live) .bd-lung,.js .bd:not(.is-live) .bd-heart{opacity:0;animation:none}
/* the sheet */
.bd-sheet{gap:9px;padding:10px 14px 22px;border-radius:26px 26px 0 0;background:rgba(18,20,32,.9)}
.bd-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 10px}
.bd-hi{grid-row:1/3;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,107,138,.16)}
.bd-hi svg{width:20px;height:20px;fill:#FF6B8A;animation:bd-beat2 1.1s ease-in-out infinite;transform-origin:50% 60%}
@keyframes bd-beat2{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(.96)}36%{transform:scale(1.14)}55%{transform:scale(1)}}
.bd-head b{font-size:19px;line-height:1.1}
.bd-head small{grid-column:3;grid-row:1;font-size:11px;font-weight:600;color:var(--brand-hi)}
.bd-prog{grid-column:2/4;display:flex;gap:4px}
.bd-prog i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;position:relative}
.bd-prog i::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--brand-hi);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e)}
.bd.p2 .bd-prog i:nth-child(-n+3)::after{transform:scaleX(1)}
.bd.p2 .bd-prog i:nth-child(1)::after{transition-delay:.55s}.bd.p2 .bd-prog i:nth-child(2)::after{transition-delay:.75s}.bd.p2 .bd-prog i:nth-child(3)::after{transition-delay:.95s}
.bd-ecg{display:block;width:100%;height:30px;fill:none;stroke:#FF6B8A;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 0 4px rgba(255,107,138,.7))}
.bd-ecg path{stroke-dasharray:34 100;stroke-dashoffset:34;vector-effect:non-scaling-stroke}
.bd.p2 .bd-ecg path{animation:bd-ecg 2.2s linear infinite}
@keyframes bd-ecg{from{stroke-dashoffset:34}to{stroke-dashoffset:-100}}
.bd-row{grid-template-columns:auto 1fr;align-items:start;gap:10px;padding:9px 11px;border-radius:14px}
.bd-row>span{display:grid;gap:2px}
.bd-ck{width:20px;height:20px;margin-top:1px}
.bd-ck svg{width:100%;height:100%;fill:none;stroke:var(--brand-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bd-ck circle{stroke-opacity:.35}
.bd-ck path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .5s ease}
.bd.p2 .bd-ck path{stroke-dashoffset:0}
.bd.p2 .bd-row:nth-of-type(1){transition-delay:.3s}.bd.p2 .bd-row:nth-of-type(2){transition-delay:.45s}.bd.p2 .bd-row:nth-of-type(3){transition-delay:.6s}
.bd.p2 .bd-row:nth-of-type(1) .bd-ck path{transition-delay:.8s}.bd.p2 .bd-row:nth-of-type(2) .bd-ck path{transition-delay:1s}.bd.p2 .bd-row:nth-of-type(3) .bd-ck path{transition-delay:1.2s}
/* the tap lands on the heart */
.bd-tap{left:57%;top:43.6%;z-index:2}
@media (prefers-reduced-motion:reduce){.bd-lung,.bd-heart,.bd-dot::after,.bd-hi svg,.bd.p2 .bd-ecg path{animation:none}.bd-lung{opacity:.4}}
/* home screen: no speech bubble; the stats of the app's own home screen fill it out and arrive one after another */
.hm{padding-top:46px}
.hm-hero{margin-top:8px}.hm-hero .ball{width:78px}
.hm-days{margin-top:8px;font-size:34px}
.hm-cards{margin-top:12px}
.hm-c{min-height:0;padding:10px 11px 11px}
.hm-c b{font-size:20px}
.hm-c em{color:rgba(255,255,255,.55)}
.hm-c:first-child em{color:#3ED598}
.hm-wk{margin-top:7px;display:flex;gap:3px}
.hm-wk s{flex:1;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);font-size:7px;font-weight:700;text-decoration:none;color:rgba(255,255,255,.55)}
.hm-wk s.on{background:var(--brand);color:var(--on-brand,#fff)}
.hm-wk s.now{box-shadow:inset 0 0 0 1.500px var(--brand-hi);color:#fff}
.hm-row{align-self:stretch;margin-top:8px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 11px;border-radius:15px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hm-row>span{display:grid;gap:1px;min-width:0}
.hm-row small{font-size:7.500px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.hm-row b{font-size:12.500px;font-weight:700;line-height:1.2}
.hm-row em{font-style:normal;font-size:9.500px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-ri{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff}
.hm-ri.p{background:linear-gradient(160deg,#A985FF,#6D3FE6)}
.hm-ri .ic,.hm-play .ic{width:14px;height:14px}
.hm-play{width:26px;height:26px;border-radius:50%;background:#fff;color:#0A0A0A;display:grid;place-items:center}
.hm-play .ic{width:11px;height:11px;fill:currentColor;stroke:none}
.hm-go{width:12px;height:12px;color:rgba(255,255,255,.5)}
.hm-next{grid-template-columns:auto 1fr}
.hm-bar{margin-top:5px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.hm-bar u{display:block;height:100%;width:0;border-radius:4px;background:var(--brand-hi);transition:width 1.6s var(--e) .9s}
.hm.is-live .hm-bar u{width:68%}
.hm-btn{margin-top:auto;margin-bottom:30px;height:40px;font-size:13px}
.hm-row{transition:opacity .5s var(--e),transform .7s var(--e)}
.js .hm:not(.is-live) .hm-row{opacity:0;transform:translateY(14px)}
.hm.is-live .hm-row:nth-of-type(1){transition-delay:.45s}.hm.is-live .hm-row:nth-of-type(2){transition-delay:.55s}.hm.is-live .hm-row:nth-of-type(3){transition-delay:.65s}
.hm.is-live .hm-btn{transition-delay:.8s}
.hm-wk s{transition:scale .5s var(--e)}
.js .hm:not(.is-live) .hm-wk s{scale:0}
.hm.is-live .hm-wk s:nth-child(1){transition-delay:.5s}.hm.is-live .hm-wk s:nth-child(2){transition-delay:.55s}.hm.is-live .hm-wk s:nth-child(3){transition-delay:.6s}.hm.is-live .hm-wk s:nth-child(4){transition-delay:.65s}.hm.is-live .hm-wk s:nth-child(5){transition-delay:.7s}.hm.is-live .hm-wk s:nth-child(6){transition-delay:.75s}.hm.is-live .hm-wk s:nth-child(7){transition-delay:.8s}
@media (prefers-reduced-motion:reduce){.js .hm:not(.is-live) .hm-row{opacity:1;transform:none}.js .hm:not(.is-live) .hm-wk s{scale:1}.hm-bar u{width:68%}}
/* last card: moving colour and the dot field, like the hero (on dark) */
.n-end{user-select:none;-webkit-user-select:none}
.n-end::after{content:"";position:absolute;z-index:-1;inset:-20%;pointer-events:none;opacity:.34;filter:blur(70px);background:radial-gradient(32% 38% at 22% 30%,#3969F7,transparent 70%),radial-gradient(28% 34% at 78% 26%,#8652F6,transparent 70%),radial-gradient(32% 38% at 70% 78%,#0FD69C,transparent 70%),radial-gradient(28% 34% at 26% 76%,#FF7A26,transparent 70%);animation:n-drift 26s ease-in-out infinite alternate}
.n-dotfield-dk{z-index:0;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 50%,#000 35%,transparent 100%)}
.n-end>h2,.n-end>.n-end-qr{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.n-end::after{animation:none}}
/* Your body: the "You noticed" card shows a number, drawn over the screenshot */
.bd-note{position:absolute;left:51.7%;top:53%;width:43.2%;height:16.3%;display:flex;flex-direction:column;padding:6.5% 5% 0;border-radius:15% / 20%;background:#15161C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:#fff}
.bd-note small{font-size:8.500px;font-weight:700;color:var(--brand-hi)}
.bd-note b{margin-top:5%;font-size:19px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.bd-note b em{font-style:normal;font-size:.6em;font-weight:600;color:rgba(255,255,255,.75)}
.bd-nsub{margin-top:4%;font-size:7.500px;color:rgba(255,255,255,.6)}
.bd-th{margin-top:auto;margin-bottom:9%;display:flex;gap:3px}
.bd-th i{width:11px;height:11px;opacity:.3;transition:opacity .4s ease,scale .5s var(--e)}
.bd-th svg{display:block;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bd-th i.on svg{fill:var(--brand-hi);stroke:var(--brand-hi)}
.bd.is-live .bd-th i.on{opacity:1;animation:bd-thumb .6s var(--e) both}
.bd.is-live .bd-th i:nth-child(1){animation-delay:1.3s}.bd.is-live .bd-th i:nth-child(2){animation-delay:1.45s}.bd.is-live .bd-th i:nth-child(3){animation-delay:1.6s}.bd.is-live .bd-th i:nth-child(4){animation-delay:1.75s}
@keyframes bd-thumb{from{scale:0;opacity:0}60%{scale:1.35}to{scale:1;opacity:1}}
/* last card: no line grid, only the small dots; the colour drifts toward the pointer */
.n-end::before{background-image:none!important}
.n-end::after{translate:calc(var(--mx,0)*46px) calc(var(--my,0)*34px);transition:translate 1.1s cubic-bezier(.22,1,.36,1)}
/* last card: the heading's letters lean away from the pointer and ripple on a click, like the dots */
.nm .n-end h2.is-fx .n-dim,.nm .n-end h2.is-fx .n-main{background:none;-webkit-text-fill-color:currentColor;color:#fff}
.n-end h2.is-fx .ew{display:inline-block;white-space:nowrap}
.n-end h2.is-fx .ec{display:inline-block;color:#fff;will-change:transform;transition:color 1.1s ease}
.n-end h2.is-fx .n-dim .ec{opacity:.45}
/* last card: a soft lens around the pointer where the solid letters give way to dots */
.n-end h2.is-fx{-webkit-mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 45%,#000 100%);mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 45%,#000 100%);-webkit-mask-clip:no-clip;mask-clip:no-clip}
/* lens: a tighter edge, so no grey ghost of the letter sits under the dots */
.n-end h2.is-fx,.story[data-plain] .lens-l{-webkit-mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 84%,#000 100%);mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 84%,#000 100%);-webkit-mask-clip:no-clip;mask-clip:no-clip}
.n-lens{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
/* the smoke over the headline object is back (a later rule had wiped its colour), and it keeps rising */
.nm .story[data-plain] .hero-say h1 .rot .smoke b{background:radial-gradient(closest-side,rgba(120,120,132,.5),rgba(120,120,132,0))!important;animation:smoke 2.6s ease-out .6s infinite both}
.nm .story[data-plain] .hero-say h1 .rot .smoke b:nth-child(2){animation-delay:1.2s}
.nm .story[data-plain] .hero-say h1 .rot .smoke b:nth-child(3){animation-delay:1.8s}
.nm .story[data-plain] .hero-say h1 .rot .smoke b:nth-child(4){animation-delay:2.4s}
.nm .story[data-plain] .hero-say h1 .rot .rot-pic.is-small .smoke{opacity:0}
/* What's included: the colour in the dark panel moves slowly */
.n-panel-dark{position:relative;overflow:hidden;isolation:isolate;background:var(--night)}
.n-panel-dark::before,.n-panel-dark::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(60px);will-change:transform}
.n-panel-dark::before{left:-22%;bottom:-48%;width:80%;aspect-ratio:1.25;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 78%,transparent),transparent);animation:pd-a 17s ease-in-out infinite alternate}
.n-panel-dark::after{right:-20%;top:-42%;width:62%;aspect-ratio:1.1;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-deep) 75%,transparent),color-mix(in srgb,var(--brand-hi) 10%,transparent) 60%,transparent);animation:pd-b 23s ease-in-out infinite alternate}
@keyframes pd-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26%,-18%,0) scale(1.18)}100%{transform:translate3d(52%,-6%,0) scale(.92)}}
@keyframes pd-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-30%,24%,0) scale(1.2)}100%{transform:translate3d(-58%,10%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.n-panel-dark::before,.n-panel-dark::after{animation:none}}
/* lens edge: the dots merge into solid there, so the solid letters stop almost sharply */
.n-end h2.is-fx,.story[data-plain] .lens-l{-webkit-mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 96.5%,#000 100%);mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 96.5%,#000 100%)}
/* a very soft colour that drifts through the letters, one gradient across the whole line */
@property --tg{syntax:'<length>';inherits:true;initial-value:0px}
@keyframes tg-move{to{--tg:-1400px}}
.n-end h2.is-fx,.nm .story.is-g .hero-say h1,.nm .story.is-g #progress-t{animation:tg-move 16s linear infinite}
.n-end h2.is-fx .ec{background:linear-gradient(100deg,currentColor 0,color-mix(in srgb,currentColor 80%,#7698FF) 20%,currentColor 40%,color-mix(in srgb,currentColor 82%,#AE88FF) 60%,color-mix(in srgb,currentColor 84%,#5CEBC0) 80%,currentColor 100%) calc(var(--tg) - var(--ox,0px)) 0/1400px 100% repeat-x;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nm .story.is-g .n-main .c{background:linear-gradient(100deg,#0A0A0A 0,#27356B 20%,#0A0A0A 40%,#43306E 60%,#16483C 80%,#0A0A0A 100%) calc(var(--tg) - var(--ox,0px)) 0/1400px 100% repeat-x;-webkit-background-clip:text;background-clip:text}
@media (prefers-reduced-motion:reduce){.n-end h2.is-fx,.nm .story.is-g .hero-say h1,.nm .story.is-g #progress-t{animation:none}}
/* hero letters: the drifting colour is much quieter */
.nm .story.is-g .n-main .c{background:linear-gradient(100deg,#0A0A0A 0,#1A2140 20%,#0A0A0A 40%,#261C3C 60%,#102A24 80%,#0A0A0A 100%) calc(var(--tg) - var(--ox,0px)) 0/1400px 100% repeat-x;-webkit-background-clip:text;background-clip:text}
/* lens: a small, soft-edged circle; the solid letters fade out gently and the dots fade in over them */
.n-end h2.is-fx,.story[data-plain] .lens-l{-webkit-mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 38%,#000 100%);mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 38%,#000 100%)}
/* lens: softer still */
.n-end h2.is-fx,.story[data-plain] .lens-l{-webkit-mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 12%,rgba(0,0,0,.55) 62%,#000 100%);mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),transparent 12%,rgba(0,0,0,.55) 62%,#000 100%)}
.n-end h2.is-fx .ec{background:linear-gradient(100deg,currentColor 0,color-mix(in srgb,currentColor 90%,#7698FF) 20%,currentColor 40%,color-mix(in srgb,currentColor 91%,#AE88FF) 60%,color-mix(in srgb,currentColor 92%,#5CEBC0) 80%,currentColor 100%) calc(var(--tg) - var(--ox,0px)) 0/1400px 100% repeat-x;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* lens: much softer. The letters only thin out toward the pointer, they never vanish */
.n-end h2.is-fx,.story[data-plain].lens-on .lens-l{-webkit-mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),rgba(0,0,0,.22) 0,rgba(0,0,0,.4) 30%,rgba(0,0,0,.75) 65%,#000 100%);mask-image:radial-gradient(circle calc(var(--lr,.01)*1px) at calc(var(--lx,-999)*1px) calc(var(--ly,-999)*1px),rgba(0,0,0,.22) 0,rgba(0,0,0,.4) 30%,rgba(0,0,0,.75) 65%,#000 100%)}
.story[data-plain]:not(.lens-on) .lens-l{-webkit-mask-image:none!important;mask-image:none!important}
/* What's included: three real counts from the app */
.n-stats{list-style:none;margin:auto 0 0;padding:44px 0 0;display:flex;gap:44px;flex-wrap:wrap}
.n-stats li{display:flex;flex-direction:column;gap:6px;min-width:0}
.n-stats b{font-size:clamp(40px,4.6vw,64px);line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--brand-hi) 60%,#fff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.n-stats span{font-size:14px;color:rgba(255,255,255,.66)}
.n-stats+.n-panes{margin-top:0;padding-top:36px}
@media (max-width:767px){.n-stats{gap:22px;padding-top:28px}.n-stats b{font-size:34px}.n-stats span{font-size:12px}}
/* What's included, left side: the words are the main thing, the three counts sit on a quiet line at the bottom */
.n-panel-dark .n-feat-l .n-panes{order:2;margin-block:auto;padding-block:48px}
.n-panel-dark .n-pane{max-width:20ch}
.nm .n-panel-dark .n-pane h3{font-size:clamp(30px,3.5vw,48px);line-height:1.04;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.n-panel-dark .n-pane p{margin-top:18px;font-size:18px;line-height:1.5;max-width:34ch;color:rgba(255,255,255,.7)}
.n-panel-dark .n-stats{order:3;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;border-top:1px solid rgba(255,255,255,.12)}
.n-panel-dark .n-stats li{flex-direction:row;align-items:baseline;gap:10px;padding:0 28px;border-left:1px solid rgba(255,255,255,.12)}
.n-panel-dark .n-stats li:first-child{padding-left:0;border-left:0}
.n-panel-dark .n-stats b{font-size:34px;letter-spacing:-.03em}
.n-panel-dark .n-stats span{font-size:13px;line-height:1.25;max-width:9ch;color:rgba(255,255,255,.6)}
@media (max-width:999px){.n-panel-dark .n-feat-l .n-panes{padding-block:28px;min-height:170px}.n-panel-dark .n-pane{max-width:none}.n-panel-dark .n-stats li{padding:0 16px}.n-panel-dark .n-stats b{font-size:26px}.n-panel-dark .n-stats span{font-size:11.500px}}
.n-panel-dark .n-pane{max-width:580px}
.nm .n-panel-dark .n-pane h3{max-width:13ch}
.n-panel-dark .n-pane p{max-width:36ch}
/* What's included: each tab carries its own count and a few real names from the app */
.n-panel-dark .n-feat-l .n-panes{order:2;flex:1;margin:0;padding:0;display:grid}
.n-panel-dark .n-pane{max-width:none;display:flex;flex-direction:column}
.n-panel-dark .n-pane-t{margin-block:auto;padding-block:44px}
.n-inc{display:flex;align-items:center;gap:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);min-height:92px}
.n-inc-n{flex:none;display:flex;align-items:baseline;gap:10px;padding-right:28px;border-right:1px solid rgba(255,255,255,.12)}
.n-inc-n b{font-size:46px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--brand-hi) 60%,#fff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.n-inc-n span{font-size:13px;line-height:1.25;max-width:9ch;color:rgba(255,255,255,.62)}
.n-chips2{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.n-chips2 li{padding:6px 11px;border-radius:999px;font-size:12.500px;line-height:1.2;color:rgba(255,255,255,.86);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:0;transform:translateY(6px)}
.n-chips2 li.more{background:none;box-shadow:none;color:rgba(255,255,255,.5);padding-inline:4px}
.n-pane.is-on .n-chips2 li{opacity:1;transform:none;transition:opacity .4s ease,transform .6s var(--e)}
.n-pane.is-on .n-chips2 li:nth-child(1){transition-delay:.12s}.n-pane.is-on .n-chips2 li:nth-child(2){transition-delay:.17s}.n-pane.is-on .n-chips2 li:nth-child(3){transition-delay:.22s}.n-pane.is-on .n-chips2 li:nth-child(4){transition-delay:.27s}.n-pane.is-on .n-chips2 li:nth-child(5){transition-delay:.32s}.n-pane.is-on .n-chips2 li:nth-child(6){transition-delay:.37s}.n-pane.is-on .n-chips2 li:nth-child(7){transition-delay:.42s}.n-pane.is-on .n-chips2 li:nth-child(n+8){transition-delay:.47s}
@media (max-width:999px){.n-panel-dark .n-pane-t{padding-block:26px}.n-inc{flex-direction:column;align-items:flex-start;gap:14px;min-height:0}.n-inc-n{border-right:0;padding-right:0}.n-inc-n b{font-size:34px}.n-inc-n span{max-width:none}}
@media (prefers-reduced-motion:reduce){.n-chips2 li{opacity:1;transform:none}}
/* What's included, bottom tray: one glass card; the count stacked over its label, names beside it */
.n-inc{align-items:center;gap:22px;margin-top:0;padding:16px 18px;min-height:86px;border-top:0;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -22px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.n-inc-n{flex-direction:column;align-items:flex-start;gap:5px;min-width:104px;padding:4px 22px 4px 6px;border-right:1px solid rgba(255,255,255,.12)}
.n-inc-n b{font-size:40px}
.n-inc-n span{max-width:none;font-size:11px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6);white-space:nowrap}
.n-chips2{gap:7px}
.n-chips2 li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 11px;font-size:13px;font-weight:500;color:#fff;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.n-chips2 li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-hi);box-shadow:0 0 8px var(--brand-hi)}
.n-chips2 li.more{padding-inline:6px;font-weight:400}
.n-chips2 li.more::before{display:none}
.n-inc:not(:has(.n-inc-n)){padding-left:16px}
@media (max-width:999px){.n-inc{padding:14px}.n-inc-n{flex-direction:row;align-items:baseline;gap:10px;border-right:0;padding:0 0 0 4px}.n-inc-n b{font-size:32px}}
/* What's included, bottom tray: stats only, side by side */
.n-inc{display:inline-flex;align-self:flex-start;gap:0;padding:18px 8px;min-height:0}
.n-inc-n{min-width:0;padding:2px 30px;gap:8px;border-right:0;border-left:1px solid rgba(255,255,255,.12)}
.n-inc-n:first-child{border-left:0}
.n-inc-n b{display:flex;align-items:baseline;gap:6px;font-size:44px}
.n-inc-n b i{font-style:normal}
.n-inc-n b small{font-size:.38em;font-weight:500;letter-spacing:0;-webkit-text-fill-color:rgba(255,255,255,.8)}
@media (max-width:999px){.n-inc{display:flex;align-self:stretch;padding:14px 4px}.n-inc-n{flex:1;flex-direction:column;align-items:flex-start;gap:6px;padding:0 14px;border-left:1px solid rgba(255,255,255,.12)}.n-inc-n b{font-size:30px}.n-inc-n span{white-space:normal;font-size:10px}}
/* What's included: four big fixed numbers along the bottom */
.n-hero-stats{order:3;list-style:none;margin:0;padding:26px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.14)}
.n-hero-stats li{display:flex;flex-direction:column;gap:10px;padding:0 20px;border-left:1px solid rgba(255,255,255,.12);min-width:0}
.n-hero-stats li:first-child{padding-left:0;border-left:0}
.n-hero-stats b{font-size:clamp(44px,5.4vw,76px);line-height:.9;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 20%,color-mix(in srgb,var(--brand-hi) 70%,#fff) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.n-hero-stats span{font-size:12px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.62)}
.n-panel-dark .n-pane-t{padding-block:40px}
@media (max-width:767px){.n-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;padding-top:20px}.n-hero-stats li{padding:0 14px}.n-hero-stats li:nth-child(odd){padding-left:0;border-left:0}.n-hero-stats b{font-size:44px}.n-hero-stats span{font-size:10.500px}}
/* big numbers: evenly spaced, no dividers, one-line labels */
.n-hero-stats{display:flex;flex-wrap:wrap;gap:22px 48px;padding-top:28px}
.n-hero-stats li,.n-hero-stats li:first-child{padding:0;border-left:0;gap:8px}
.n-hero-stats b{font-size:clamp(44px,5vw,68px)}
.n-hero-stats span{font-size:14px;letter-spacing:0;text-transform:none;font-weight:400;white-space:nowrap;color:rgba(255,255,255,.7)}
@media (max-width:767px){.n-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.n-hero-stats li,.n-hero-stats li:nth-child(odd){padding:0;border-left:0}.n-hero-stats span{font-size:13px}}
/* opening loader: shooting balls on white */
.n-load{position:fixed;inset:0;z-index:9999;background:#fff;cursor:pointer;transition:opacity .55s ease}
.n-load canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.n-load.is-out{opacity:0;pointer-events:none}
html.is-loading{overflow:hidden}
html.is-loading .getcard{opacity:0!important}
@keyframes n-arrive{from{opacity:0;transform:translateY(24px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero-say.n-arrive{animation:n-arrive 1s cubic-bezier(.22,1,.36,1) both}
/* big numbers: three, inside one glass frame */
.n-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:22px 8px;border-top:0;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.16),0 22px 44px -26px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.n-hero-stats li,.n-hero-stats li:first-child{padding:2px 22px;border-left:1px solid rgba(255,255,255,.12)}
.n-hero-stats li:first-child{border-left:0}
.n-hero-stats b{font-size:clamp(40px,4.4vw,60px)}
.n-hero-stats span{white-space:normal}
@media (max-width:767px){.n-hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:16px 2px}.n-hero-stats li,.n-hero-stats li:nth-child(odd){padding:0 12px;border-left:1px solid rgba(255,255,255,.12)}.n-hero-stats li:first-child{border-left:0}.n-hero-stats b{font-size:34px}.n-hero-stats span{font-size:12px}}
/* stats: three tiles in the same glass as the tab pills, on the same width as the tab rows */
.n-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:640px;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.n-hero-stats li,.n-hero-stats li:first-child{gap:6px;padding:18px 20px 16px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.n-hero-stats b{font-size:40px;line-height:1;letter-spacing:-.035em;background:none;-webkit-text-fill-color:#fff;color:#fff;padding:0}
.n-hero-stats span{font-size:14px;line-height:1.3;color:rgba(255,255,255,.75)}
.n-panel-dark .n-pane-t{padding-block:36px}
@media (max-width:767px){.n-hero-stats{gap:6px}.n-hero-stats li,.n-hero-stats li:first-child,.n-hero-stats li:nth-child(odd){padding:14px 12px 12px;border:1px solid rgba(255,255,255,.16);border-radius:18px}.n-hero-stats b{font-size:30px}.n-hero-stats span{font-size:12px}}
/* ---- all-device pass ---- */
/* last card on a phone: a button, not a QR code you cannot point your own phone at */
.n-end-get{display:none;position:relative;z-index:1;margin-top:28px;background:#fff;color:#0A0A0A}
@media (max-width:767px){.n-end-get{display:inline-flex}.n-end .n-end-qr{display:none}}
/* chat on a phone: tall enough to show every suggested question */
@media (max-width:767px){.n-qa-wrap .n-cp-thread{height:540px}}
/* hero timeline on a phone: stops snap into place when swiped */
@media (max-width:767px){.n-hd .n-tl-wrap{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}.n-hd .n-tl-wrap::-webkit-scrollbar{display:none}.n-hd .n-tl-i{scroll-snap-align:center}}
@media (max-width:400px){.n-hero-stats{gap:5px}.n-hero-stats li,.n-hero-stats li:first-child,.n-hero-stats li:nth-child(odd){min-width:0;padding:12px 9px 11px;border-radius:16px}.n-hero-stats b{font-size:26px}.n-hero-stats span{font-size:11px;overflow-wrap:anywhere}}
/* short laptop screens: the hero headline sits higher and its note is smaller, so it never touches the timeline */
@media (min-width:768px) and (max-height:800px){
  .nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.5fr auto 1.5fr}
  .nm .n-hd-head h2,.nm .story[data-plain] .hero-say h1{font-size:clamp(40px,min(7vw,10.5vh),96px)}
  .n-hd-head p{font-size:13px;line-height:1.45;margin-top:10px}
}
@media (min-width:768px) and (max-height:660px){
  .nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.34fr auto 1.66fr}
  .nm .n-hd-head h2,.nm .story[data-plain] .hero-say h1{font-size:clamp(34px,min(6vw,9.5vh),72px)}
}
@media (min-width:768px) and (max-height:660px){.nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.7fr auto 1.3fr}}
/* phones and tablets: a shorter hero, so the timeline sits closer to the headline and "How it works" shows below it */
@media (max-width:1023px){
  .nm .story[data-plain]{min-height:clamp(600px,66svh,700px)}
  .nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.62fr auto 1.38fr}
  .nm #how.n-sec{padding-top:56px}
}
@media (max-width:767px){
  .nm .story[data-plain]{min-height:clamp(540px,72svh,640px)}
  .nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.5fr auto 1.5fr}
  .nm #how.n-sec{padding-top:44px}
}
/* phones and tablets: the hero is two stacked parts (headline, then day by day with its timeline); no empty screen */
@media (max-width:1023px){
  .nm .story[data-plain].is-stack{min-height:0;padding:112px 0 40px}
  .nm .story[data-plain].is-stack .hero-say{padding-bottom:0}
  .nm .story[data-plain].is-stack .n-hd{margin-top:72px}
}
/* stacked hero (phones and tablets): no scroll fade, tighter top */
.nm .story[data-plain].is-stack{transform:none!important;opacity:1!important}
@media (max-width:1023px){
  .nm .story[data-plain].is-stack{padding:120px 0 44px}
  .nm .story[data-plain].is-stack .hero-say{min-height:0!important;padding-top:0!important;padding-bottom:0!important;display:block}
  .nm .story[data-plain].is-stack .n-hd{margin-top:64px;padding-top:0}
}
/* phones: the timeline is a simple list of four cards, not a sideways strip */
@media (max-width:767px){
  .nm .story[data-plain].is-stack{padding:104px 0 28px}
  .nm .story.is-stack .n-hd .n-tl-wrap{overflow:visible!important;padding:0 20px!important;margin-top:28px!important}
  .nm .story.is-stack .n-tl-line{display:none!important}
  .nm .story.is-stack .n-tl{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:auto!important;margin:0!important;padding:0!important}
  .nm .story.is-stack .n-tl-i{display:grid!important;grid-template-columns:60px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;text-align:left!important;padding:14px 16px 14px 14px!important;margin:0!important;border-radius:20px;background:#F5F5F5;width:auto!important;min-width:0!important}
  .nm .story.is-stack .n-tl-i .n-tobj{position:static!important;grid-column:1;grid-row:1/3;width:60px!important;height:60px!important;margin:0!important;transform:none!important;opacity:1!important;inset:auto!important}
  .nm .story.is-stack .n-tl-i .n-tobj img,.nm .story.is-stack .n-tl-i .n-tobj svg{width:100%!important;height:100%!important;object-fit:contain}
  .nm .story.is-stack .n-tl-dot{display:none!important}
  .nm .story.is-stack .n-tl-i>b{grid-column:2;margin:0!important;font-size:20px;align-self:end;justify-self:start;opacity:1!important;transform:none!important}
  .nm .story.is-stack .n-tl-i>p{grid-column:2;margin:0!important;font-size:14px;line-height:1.4;align-self:start;max-width:none!important;opacity:1!important;transform:none!important;text-align:left}
  /* What's included: no phone mock-up on a phone */
  .n-feat .n-phone{display:none!important}
}
/* phones: no second headline block; each card names its own source, with the caveat under the list */
.n-tl-cap{display:none}
@media (max-width:767px){
  .nm .story.is-stack .n-hd-head{display:none!important}
  .nm .story[data-plain].is-stack .n-hd{margin-top:36px}
  .nm .story.is-stack .n-hd .n-tl-wrap{margin-top:0!important}
  .nm .story.is-stack .n-tl-i .n-tl-src{grid-column:2;position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;margin:2px 0 0!important;white-space:normal!important;font-size:12px;color:var(--ink3)}
  .nm .story.is-stack .n-tl-i .n-tobj{grid-row:1/4}
  .nm .story.is-stack .n-tl-cap{display:block;margin:14px 4px 0;font-size:12.500px;line-height:1.45;color:var(--ink3);text-align:center}
}
@media (max-width:767px){.nm .story.is-stack .n-tl-i{align-items:start}.nm .story.is-stack .n-tl-i .n-tobj{align-self:start}.nm .story.is-stack .n-tl-i>b{align-self:start;margin-top:2px!important}}
/* from 900px wide the hero is full screen again, as on desktop; only upright tablets keep the shorter hero */
@media (min-width:900px) and (max-width:1023px){
  .nm .story[data-plain]{min-height:calc(100svh - 32px)}
  .nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.9fr auto 1.1fr}
  .nm #how.n-sec{padding-top:112px}
}
@media (min-width:900px) and (max-width:1023px) and (max-height:800px){.nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.5fr auto 1.5fr}}
@media (min-width:900px) and (max-width:1023px) and (max-height:660px){.nm .story.is-g>.hero-say,.nm .story.is-g .n-hd-head{grid-template-rows:.7fr auto 1.3fr}}
/* upright tablets (768 to 899): same idea as phones. Headline, then the four timeline stops right under it; no second headline, no empty screen */
@media (min-width:768px) and (max-width:899px){
  .nm .story[data-plain].is-stack{min-height:0;padding:128px 0 48px}
  .nm .story.is-stack .n-hd-head{display:none!important}
  .nm .story[data-plain].is-stack .n-hd{margin-top:56px}
  .nm .story.is-stack .n-tl-i .n-tl-src{position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;display:block;margin:8px 0 0!important;font-size:12px;color:var(--ink3)}
  .nm .story.is-stack .n-tl-cap{display:block;margin:28px auto 0;max-width:60ch;padding:0 var(--pad);font-size:13px;line-height:1.45;color:var(--ink3);text-align:center}
}
/* larger tablets (900px and up) get the floating QR card, like desktop; smaller tablets behave like phones: no QR, a button on the last card */
@media (min-width:900px){.nm .getcard{display:flex}}
@media (max-width:899px){.nm .getcard{display:none!important}.n-end-get{display:inline-flex}.n-end .n-end-qr{display:none}}
/* floating QR card: very soft layered shadow and a glass edge with a slow light that travels round it */
@property --ga{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ga-turn{to{--ga:360deg}}
.nm .getcard{background:linear-gradient(180deg,#1B1B20 0%,#0C0C0F 100%);box-shadow:0 1px 1px rgba(10,10,30,.06),0 4px 8px -2px rgba(10,10,30,.08),0 14px 28px -8px rgba(10,10,30,.12),0 34px 64px -20px rgba(10,10,30,.16),0 60px 110px -40px rgba(10,10,30,.14),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4)}
.nm .getcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--ga),rgba(255,255,255,.1) 0deg,rgba(255,255,255,.55) 40deg,color-mix(in srgb,var(--brand-hi) 70%,#fff) 70deg,rgba(255,255,255,.14) 120deg,rgba(255,255,255,.08) 200deg,rgba(255,255,255,.3) 260deg,rgba(255,255,255,.08) 320deg,rgba(255,255,255,.1) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ga-turn 9s linear infinite}
.nm .getcard::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 42%)}
.nm .getcard>*{position:relative;z-index:1}
.nm .getcard.on-dark{box-shadow:0 14px 30px -10px rgba(0,0,0,.3),0 40px 80px -30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}
@media (prefers-reduced-motion:reduce){.nm .getcard::before{animation:none}}
.nm .getcard>.getcard-x{position:absolute;z-index:2}
/* step cards side by side: every card keeps room for two lines of text, so the white parts are always the same height */
@media (min-width:768px){.nm .n-step>p{min-height:calc(2*1.5em);min-height:2lh}}
/* step cards side by side: number, title and text share rows across the three cards, so the white parts match however the words wrap */
@supports (grid-template-rows:subgrid){@media (min-width:768px){
  .nm .n-steps{grid-template-rows:auto auto auto auto}
  .nm .n-step{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;height:auto;align-content:start}
  .nm .n-step>.n-num{justify-self:start}
  .nm .n-step>p{min-height:0}
  .nm .n-step>.n-step-vis{flex:none;height:264px}
}}
/* menu logo: no ring or pill around it */
.nm .n-nav .n-brand,.nm .n-nav .n-brand:hover{background:none!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-inline:0}
/* menu pill: clear, glossy glass. See-through with a strong blur, a bright rim on top, a soft shade underneath */
.nm .n-nav .n-links{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.4) 100%)!important;border:1px solid rgba(255,255,255,.75)!important;-webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 -10px 16px -10px rgba(10,10,40,.1),inset 0 0 0 .5px rgba(10,10,30,.06),0 1px 1px rgba(10,10,30,.05),0 8px 20px -8px rgba(10,10,30,.16),0 22px 44px -22px rgba(10,10,30,.2)!important}
.nm .n-nav .n-links::before{content:"";position:absolute;inset:1px 10% auto 10%;height:46%;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));opacity:.7}
.nm .n-nav .n-links>*{position:relative}
.nm .n-nav .n-links a{color:rgba(10,10,10,.72)}
.nm .n-nav .n-links a:hover,.nm .n-nav .n-links a.is-on{color:#0A0A0A}
/* hero: a real fair-weather sky far in the background, very faint, fading out toward the bottom, drifting slowly */
.nm .story[data-plain] .n-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.3) 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.3) 72%,transparent 100%)}
.nm .story[data-plain] .n-sky::before{content:"";position:absolute;inset:-6% -8%;background:url(assets/hero-sky.jpg) 50% 30%/cover no-repeat;filter:saturate(.85) brightness(1.06);animation:n-sky-drift 70s ease-in-out infinite alternate;will-change:transform}
@keyframes n-sky-drift{from{transform:translate3d(-3%,0,0) scale(1.04)}to{transform:translate3d(3%,-1.5%,0) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.nm .story[data-plain] .n-sky::before{animation:none}}
.nm .story[data-plain] .n-sky{opacity:.22}
/* smoke layer: fixed behind the content; the hero lets it through, and the sky photo steps much further back */
.n-smoke{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
html.has-smoke .nm .story[data-plain]{background:transparent}
.nm .story[data-plain] .n-sky{opacity:.11}
html.has-smoke .nm .n-step{background:#fff}
/* hero colour wash melts into white at the bottom instead of stopping on a line, the same way the sky does */
.nm .story[data-plain]::before{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 84%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 84%)}
.nm .story[data-plain] .n-dotfield{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 98%);mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 98%)}
/* the still sky photo is only the fallback; when the living sky is running it takes over */
html.has-smoke .nm .story[data-plain] .n-sky{display:none}
.nm .story[data-plain] .n-sky{opacity:.2}
/* FAQ section: no white box behind the chat, so the sky runs through it */
html.has-smoke .nm .n-qa-wrap,html.has-smoke .nm #faq{background:transparent!important;box-shadow:none!important}
/* nothing on the page can be highlighted or dragged out by accident; form fields still work normally */
body.nm,body.nm *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.nm input,body.nm textarea,body.nm [contenteditable]{-webkit-user-select:text;user-select:text}
body.nm img,body.nm svg{-webkit-user-drag:none}
/* "Also in the app" cards: glossy glass over the sky. See-through, bright rim on top, soft shade below */
.nm .n-bento .n-bc{position:relative;background-color:rgba(255,255,255,.46)!important;-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.8)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 -24px 40px -28px rgba(10,10,40,.08),0 1px 1px rgba(10,10,30,.04),0 10px 24px -12px rgba(10,10,30,.12),0 30px 60px -30px rgba(10,10,30,.16)!important}
.nm .n-bento .n-bc::after{content:"";position:absolute;inset:1px 1px auto 1px;height:42%;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));opacity:.75;z-index:0}
.nm .n-bento .n-bc>*{position:relative;z-index:1}
/* "How it works" cards: the same glossy glass */
html.has-smoke .nm .n-step,.nm .n-step{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5))!important;-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.85)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(10,10,30,.05),0 1px 1px rgba(10,10,30,.04),0 10px 24px -12px rgba(10,10,30,.12),0 30px 60px -30px rgba(10,10,30,.16)}
.nm .n-step>.n-step-vis{background:radial-gradient(90% 80% at 50% 110%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%),rgba(245,245,247,.5);border-top-color:rgba(10,10,30,.07)}
/* every bento card uses the one glass style: no card keeps its own tinted background */
.nm .n-bento .n-bc{background-image:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.4))!important;background-color:transparent!important}
/* the puff over the cigarette, vape and stick takes the sky's blue instead of grey */
.nm .story[data-plain] .hero-say h1 .rot .smoke b{background:radial-gradient(closest-side,rgba(138,188,246,.6),rgba(168,206,250,.28) 55%,rgba(168,206,250,0))!important}
/* the FAQ's inner panel was the white box: clear it so the sky runs through */
.nm .n-qa-wrap .n-panel,.nm .n-qa-wrap .n-panel-b{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
/* the puff over the cigarette, vape and stick is white like the clouds, with a faint cool edge so it still reads on a pale page */
.nm .story[data-plain] .hero-say h1 .rot .smoke b{background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(255,255,255,.7) 50%,rgba(255,255,255,0))!important;filter:blur(.035em) drop-shadow(0 0 .07em rgba(120,165,225,.42))}
/* desktop hero timeline: four glass cards in a row (picture left, time, sentence, source), in the same glossy style as the other cards; no dotted line */
@media (min-width:900px){
  .nm .story.is-g .n-tl{gap:10px;align-items:stretch}
  .nm .story.is-g .n-tl-line,.nm .story.is-g .n-tl-dot{display:none!important}
  .nm .story.is-g .n-tl-i{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;row-gap:1px;align-content:start;align-items:start;text-align:left;padding:15px 16px 14px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.46));-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(10,10,30,.05),0 1px 1px rgba(10,10,30,.04),0 10px 24px -12px rgba(10,10,30,.12),0 30px 60px -30px rgba(10,10,30,.16)}
  .nm .story.is-g .n-tl-i .n-tobj{position:static!important;inset:auto!important;grid-column:1;grid-row:1/4;width:56px!important;height:56px!important;margin:0!important;translate:none}
  .nm .story.is-g .n-tl-i .n-tobj img,.nm .story.is-g .n-tl-i .n-tobj svg{width:100%!important;height:100%!important;object-fit:contain}
  .nm .story.is-g .n-tl-i>b{grid-column:2;justify-self:start;margin:1px 0 0!important;font-size:clamp(20px,2.6vh,24px);line-height:1.1}
  .nm .story.is-g .n-tl-i>b small{font-size:14px}
  .nm .story.is-g .n-tl-i>p{grid-column:2;margin:4px 0 0!important;max-width:none;font-size:13px;line-height:1.4;text-align:left;color:var(--ink2)}
  .nm .story.is-g .n-hd .n-tl-i .n-tl-src{grid-column:2;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;white-space:normal!important;margin:6px 0 0!important;font-size:11.500px;color:var(--ink3)}
}
/* white glossy veils: content fades and softly blurs into white at the top and bottom of the window while scrolling */
.n-veil{position:fixed;left:0;right:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .25s ease}
.n-veil-t{top:0;height:132px;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.4) 68%,rgba(255,255,255,0) 100%);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%)}
.n-veil-b{bottom:0;height:120px;background:linear-gradient(0deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 36%,rgba(255,255,255,.3) 70%,rgba(255,255,255,0) 100%);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);-webkit-mask-image:linear-gradient(0deg,#000 0%,#000 36%,transparent 100%);mask-image:linear-gradient(0deg,#000 0%,#000 36%,transparent 100%)}
@media (max-width:767px){.n-veil-t{height:104px}.n-veil-b{height:84px}}
/* desktop hero timeline cards, second design: picture on top, "After" + a big time, the sentence across the full width, source pinned to the bottom. No wasted space, no narrow text column */
@media (min-width:900px){
  .nm .story.is-g .n-tl{gap:12px}
  .nm .story.is-g .n-tl-i{display:flex;flex-direction:column;align-items:flex-start;padding:18px 20px 16px;border-radius:24px;row-gap:0}
  .nm .story.is-g .n-tl-i .n-tobj{width:50px!important;height:50px!important;margin:0 0 12px!important;flex:none;overflow:visible}
  .nm .story.is-g .n-tl-i>b{display:block;margin:0!important;font-size:clamp(26px,3.5vh,34px);line-height:1;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
  .nm .story.is-g .n-tl-i>b::before{content:"After";display:block;margin-bottom:5px;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink3)}
  .nm .story.is-g .n-tl-i>b small{font-size:.5em;letter-spacing:0;font-weight:600;margin-left:1px}
  .nm .story.is-g .n-tl-i>p{margin:9px 0 0!important;font-size:13.500px;line-height:1.42;color:var(--ink2);text-wrap:pretty}
  .nm .story.is-g .n-hd .n-tl-i .n-tl-src{margin:auto 0 0!important;padding-top:12px;font-size:11.500px;color:var(--ink3);display:flex;align-items:center;gap:6px}
  .nm .story.is-g .n-hd .n-tl-i .n-tl-src::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);flex:none}
}
/* menu: at the top of the page the logo carries the name; once scrolled it is just the mark. "Get the app" shrinks to a round download button on scroll */
.nm .n-nav:not(.is-up) .n-brand span{max-width:130px;opacity:1;margin:0 0 0 9px}
.nm .n-nav .n-get{display:inline-flex;align-items:center;justify-content:center;gap:0;transition:padding .5s var(--e),width .5s var(--e),gap .5s var(--e)}
.nm .n-nav .n-get .n-get-ic{flex:none;width:0;opacity:0;transition:width .5s var(--e),opacity .3s ease}
.nm .n-nav .n-get span{display:inline-block;max-width:140px;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--e),opacity .3s ease}
.nm .n-nav.is-up .n-get{padding-inline:0;width:44px;min-width:44px}
.nm .n-nav.is-up .n-get .n-get-ic{width:18px;opacity:1}
.nm .n-nav.is-up .n-get span{max-width:0;opacity:0}
@media (prefers-reduced-motion:reduce){.nm .n-nav .n-get,.nm .n-nav .n-get *{transition:none}}
/* the long note under "day by day" is no longer shown (each card names its own source); it stays in the page for screen readers */
.nm .story .n-hd-head p{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* phones and tablets: the timeline uses the same card as desktop (picture on top, "After", big time, sentence, source at the bottom). Tablets: four in a row. Phones: two by two */
@media (max-width:899px){
  .nm .story.is-stack .n-hd .n-tl-wrap{overflow:visible!important;padding:0 var(--pad)!important}
  .nm .story.is-stack .n-tl-line,.nm .story.is-stack .n-tl-dot{display:none!important}
  .nm .story.is-stack .n-tl{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;width:auto!important;margin:0!important;padding:0!important;align-items:stretch}
  .nm .story.is-stack .n-tl-i{display:flex!important;flex-direction:column;align-items:flex-start;text-align:left!important;width:auto!important;min-width:0!important;margin:0!important;padding:16px 16px 14px!important;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.48));-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(10,10,30,.05),0 1px 1px rgba(10,10,30,.04),0 10px 24px -12px rgba(10,10,30,.12),0 30px 60px -30px rgba(10,10,30,.16)}
  .nm .story.is-stack .n-tl-i .n-tobj{position:static!important;inset:auto!important;width:48px!important;height:48px!important;margin:0 0 12px!important;flex:none;transform:none!important;opacity:1!important}
  .nm .story.is-stack .n-tl-i .n-tobj img,.nm .story.is-stack .n-tl-i .n-tobj svg{width:100%!important;height:100%!important;object-fit:contain}
  .nm .story.is-stack .n-tl-i>b{display:block;margin:0!important;font-size:28px;line-height:1;letter-spacing:-.03em;font-weight:600;align-self:flex-start;opacity:1!important;transform:none!important}
  .nm .story.is-stack .n-tl-i>b::before{content:"After";display:block;margin-bottom:5px;font-size:10.500px;line-height:1;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink3)}
  .nm .story.is-stack .n-tl-i>b small{font-size:.5em;letter-spacing:0;font-weight:600;margin-left:1px}
  .nm .story.is-stack .n-tl-i>p{margin:8px 0 0!important;font-size:13px;line-height:1.42;color:var(--ink2);text-align:left;max-width:none!important;opacity:1!important;transform:none!important}
  .nm .story.is-stack .n-tl-i .n-tl-src{position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;margin:auto 0 0!important;padding-top:12px;font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:6px}
  .nm .story.is-stack .n-tl-i .n-tl-src::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);flex:none}
}
@media (max-width:767px){
  .nm .story.is-stack .n-tl{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .nm .story.is-stack .n-tl-i{padding:14px 14px 12px!important;border-radius:20px}
  .nm .story.is-stack .n-tl-i .n-tobj{width:44px!important;height:44px!important;grid-row:auto}
  .nm .story.is-stack .n-tl-i>b{font-size:26px}
}
/* menu hides while the footer is on screen */
.nm .n-nav .n-nav-in{transition:opacity .35s ease,transform .5s var(--e),visibility .35s}
.nm .n-nav.is-foot .n-nav-in{opacity:0;transform:translateY(-18px);visibility:hidden}
.nm .n-nav.is-foot .n-nav-in *{pointer-events:none!important}
/* recorded app screens are recoloured to match the buddy; their status-bar battery must not change colour with them. A small glass patch over the battery turns it neutral white in every theme */
.n-scr:has(>video)::after,.bd-art::after{content:"";position:absolute;z-index:3;pointer-events:none;top:2.2%;right:5.5%;width:19%;height:3.6%;border-radius:999px;-webkit-backdrop-filter:grayscale(1) brightness(1.25) contrast(1.1);backdrop-filter:grayscale(1) brightness(1.25) contrast(1.1)}
/* QR card returns as soon as the hero is scrolling away (code only; it opens on hover), and stays until the closing card */
.nm .getcard.is-min.is-show,.nm .getcard.is-min.is-show:hover{opacity:1;visibility:visible;pointer-events:auto;translate:-50% 0}
.nm .getcard{z-index:56}