@font-face{font-family:"Make Yourself Sans";src:url(assets/fonts/MakeYourselfSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Make Yourself Sans";src:url(assets/fonts/MakeYourselfSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#000;--fg:#f4f4f2;--mute:#8d8d8a;--line:rgba(255,255,255,.12);
  --card:#0d0d0d;--paper:#f1f0ec;--ink:#0b0b0b;--red:#ff3b30;
  --pad:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--fg);font-family:"Make Yourself Sans","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#fff;color:#000}

.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* Loader */
.loader{position:fixed;inset:0;z-index:200;background:#000;display:grid;place-items:center}
.loader-mark{width:84px;height:84px}
.loader-mark img{width:100%;height:100%}
.loader-count{position:absolute;right:var(--pad);bottom:28px;font-size:clamp(60px,12vw,180px);font-weight:700;letter-spacing:-.05em;line-height:.8}
.loader-word{position:absolute;left:var(--pad);bottom:34px;font-size:13px;letter-spacing:.3em;color:var(--mute)}
.loader-bar{position:absolute;left:0;right:0;top:0;height:2px}
.loader-bar i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
html:not(.js) .loader{display:none}

/* Cursor */
.cursor,.cursor-dot{position:fixed;left:0;top:0;z-index:150;pointer-events:none;border-radius:50%;opacity:0}
.cursor{width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;mix-blend-mode:difference}
.cursor.hover{width:70px;height:70px;margin:-35px 0 0 -35px;background:#fff;border-color:#fff}
.cursor.label{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff}
.cursor-label{font-size:12px;font-weight:700;letter-spacing:.14em;color:#000;opacity:0;text-transform:uppercase}
.cursor.label .cursor-label{opacity:1}
@media (hover:hover) and (pointer:fine){.cursor,.cursor-dot{opacity:1}}

.eyebrow{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:22px}
.big-h{font-weight:700;font-size:clamp(40px,7vw,108px);line-height:.95;letter-spacing:-.035em}
.lead{font-size:clamp(18px,1.6vw,22px);color:var(--mute);max-width:560px;margin-top:24px}
.pill{display:inline-block;background:var(--fg);color:var(--bg);border-radius:999px;padding:0 .28em .04em;line-height:1.02}

/* Buttons */
.btn-white,.btn-ghost,.btn-outline,.btn-dark-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;font-size:15px;padding:12px 22px;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn-white{background:#fff;color:#000}
.btn-white:hover{background:#e7e7e3}
.btn-ghost{color:var(--fg);padding:12px 16px}
.btn-ghost:hover{opacity:.7}
.btn-outline{border:1px solid var(--line);color:var(--fg)}
.btn-outline:hover{border-color:#fff}
.btn-dark-outline{border:1.5px solid var(--ink);color:var(--ink)}
.btn-dark-outline:hover{background:var(--ink);color:var(--paper)}
.btn-pc svg{width:16px;height:16px}
.store-btn{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#000;border-radius:16px;padding:11px 22px 11px 18px;transition:box-shadow .35s}
.store-btn svg{width:26px;height:26px}
.store-btn span{display:flex;flex-direction:column;font-weight:700;font-size:20px;line-height:1.05}
.store-btn small{font-size:10px;letter-spacing:.14em;font-weight:400}
.store-btn:hover{box-shadow:0 18px 50px -12px rgba(255,255,255,.4)}
.store-btn.big{padding:16px 30px 16px 24px}
.store-btn.big span{font-size:26px}

/* Launch bar + nav */
.launchbar{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;padding:9px var(--pad);font-size:14px;background:#111;border-bottom:1px solid var(--line);text-align:center}
.launchbar a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pulse{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad);border-bottom:1px solid transparent;transition:transform .5s var(--ease),background .4s,border-color .4s}
.nav.scrolled{background:rgba(6,6,6,.9);border-color:var(--line)}   /* no backdrop blur: it re-rendered a full-width blur on every scroll frame */
.nav.hidden{transform:translateY(-100%)}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2em;font-size:14px}
.logo img{width:32px;height:32px;transition:transform .6s var(--ease)}
.logo:hover img{transform:rotate(90deg) scale(1.08)}
.nav-links{display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.nav-links a{padding:7px 14px;border-radius:999px;font-size:14px;color:#cfcfcb;transition:background .3s,color .3s}
.nav-links a:hover,.nav-links a.on{background:rgba(255,255,255,.1);color:#fff}
.nav-cta{display:flex;align-items:center;gap:6px}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:#fff;transition:transform .35s var(--ease)}
.burger i:first-child{top:16px}.burger i:last-child{top:24px}
.burger[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;background:#000;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .7s var(--ease)}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 40px) 40px)}
.mobile-menu a{font-size:42px;font-weight:700;letter-spacing:-.03em}
.mobile-menu .btn-ghost{justify-content:flex-start;padding:12px 0;font-size:20px;color:var(--mute)}

/* Hero */
.hero{position:relative;height:230vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad)}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rings i{position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;width:min(60vw,760px);aspect-ratio:1}
.rings i:nth-child(2){width:min(90vw,1150px)}
.rings i:nth-child(3){width:min(125vw,1600px)}
.kicker{position:relative;z-index:3;font-size:13px;letter-spacing:.3em;color:var(--mute);margin-bottom:2vh;font-family:ui-monospace,Menlo,Consolas,monospace}
.hero-title{position:relative;z-index:1;font-weight:700;text-align:center;font-size:clamp(64px,15.5vw,270px);line-height:.82;letter-spacing:-.055em;margin-top:-.14em}
.hero-title .line{display:block;overflow:hidden;padding:.14em .04em .06em}
.hero-title .word{display:inline-block}
.blob{position:absolute;z-index:2;width:min(50vw,720px);height:auto;aspect-ratio:1;left:50%;top:40%;pointer-events:none;filter:drop-shadow(0 40px 60px rgba(0,0,0,.8))}
.chips{position:absolute;inset:0;z-index:3;pointer-events:none}
.chip{position:absolute;display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:18px;background:rgba(18,18,18,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.chip small{font-size:10px;letter-spacing:.2em;color:var(--mute)}
.chip b{font-size:28px;letter-spacing:-.03em;line-height:1}
.chip em{font-style:normal;font-size:12px;color:var(--mute)}
.chip.light{background:rgba(240,239,235,.92);color:#000}
.chip.light small,.chip.light em{color:#555}
.c1{left:9%;top:26%}.c2{right:8%;top:22%}.c3{left:13%;top:62%}.c4{right:11%;top:64%;flex-direction:row;align-items:center;gap:10px}
.c4 b{font-size:16px}.c4 em{margin-left:4px}
.dot-red{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:pulseR 1.6s infinite}
@keyframes pulseR{100%{box-shadow:0 0 0 10px rgba(255,59,48,0)}}
.hero-bottom{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:6vh;gap:22px;text-shadow:0 2px 20px #000}
.hero-sub{font-size:clamp(17px,1.5vw,21px);color:#bdbdb9;max-width:560px}
.hero-sub b{color:#fff;font-weight:400}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.hero-note{font-size:13px;color:var(--mute);letter-spacing:.04em}
.scroll-hint{position:absolute;bottom:24px;left:var(--pad);display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;color:var(--mute)}
.scroll-hint span{width:1px;height:40px;background:linear-gradient(#fff,transparent);animation:drip 2s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:#050505}
.marquee .track{display:flex;gap:34px;width:max-content;font-size:clamp(28px,4vw,56px);font-weight:700;letter-spacing:-.02em;align-items:center;will-change:transform}
.marquee i{font-style:normal;font-size:.4em;color:var(--mute)}
.marquee span:nth-child(4n+1){-webkit-text-stroke:1px #fff;color:transparent}

/* Manifesto */
.manifesto{padding:clamp(120px,20vh,240px) var(--pad);max-width:1400px;margin:0 auto}
.reveal-text{font-size:clamp(30px,4.6vw,72px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.reveal-text em{font-style:normal}
.reveal-text .w{opacity:.14}

/* A DAY — horizontal */
.day{position:relative;height:600vh}
.day-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-top:clamp(80px,11vh,120px)}
.day-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--pad)}
.day-clock{display:flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.day-clock i{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 30px 6px rgba(255,255,255,.35)}
.day-track{flex:1;display:flex;width:max-content;will-change:transform}
.dpanel{width:100vw;height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;padding:0 var(--pad) 8vh}
.dtext{max-width:520px;justify-self:end}
.dtime{display:inline-block;font-size:13px;letter-spacing:.2em;border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin-bottom:22px;color:#cfcfcb}
.dtext h3{font-size:clamp(40px,5vw,84px);line-height:.95;letter-spacing:-.04em;margin-bottom:22px}
.dtext p{color:#a9a9a5;font-size:clamp(17px,1.3vw,20px)}
.dmock{position:relative;width:min(420px,100%);border-radius:30px;background:linear-gradient(180deg,#141414,#080808);border:1px solid var(--line);padding:28px;box-shadow:0 60px 100px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.day-dots{position:absolute;bottom:30px;left:50%;translate:-50%;display:flex;gap:10px}
.day-dots i{width:34px;height:3px;border-radius:3px;background:var(--line);transition:background .4s,width .4s}
.day-dots i.on{background:#fff;width:60px}
/* habits mock */
.mh-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px}
.mh-top small{font-size:11px;letter-spacing:.2em;color:var(--mute)}
.streak{font-size:34px;letter-spacing:-.03em;line-height:1;text-shadow:0 0 24px rgba(255,255,255,.35)}
.streak em{font-size:13px;font-style:normal;font-weight:400;color:var(--mute);letter-spacing:0}
.sn{display:inline-block}
.mock-habits ul{list-style:none;display:grid;gap:10px}
.mock-habits li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#111;border:1px solid #1d1d1d;font-size:16px;transition:background .4s}
.mock-habits li i{width:22px;height:22px;border-radius:50%;border:1.5px solid #555;flex:none;position:relative;transition:all .35s var(--ease)}
.mock-habits li span{margin-left:auto;font-size:12px;color:var(--mute);opacity:0;transition:opacity .4s}
.mock-habits li.done{background:#171717}
.mock-habits li.done i{background:#fff;border-color:#fff;transform:scale(1.1);box-shadow:0 0 16px 2px rgba(255,255,255,.45)}
.mock-habits li.done i::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mock-habits li.done span{opacity:1}
.mh-meter{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13px;color:var(--mute)}
.mh-meter div{flex:1;height:6px;border-radius:6px;background:#1d1d1d;overflow:hidden}
.mh-meter div i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px 1px rgba(255,255,255,.5)}
.mh-meter b{color:#fff;font-size:18px;min-width:52px;text-align:right}
/* focus mock */
.mock-focus{display:grid;place-items:center;aspect-ratio:1/1.1}
.dnd{position:absolute;top:22px;left:50%;translate:-50%;display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;padding:7px 14px;border-radius:999px;background:#1b1b1b;border:1px solid #2a2a2a;white-space:nowrap}
.dnd span{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.ring{width:78%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .track{stroke:#1f1f1f}
.ring .prog{stroke:#fff;stroke-linecap:round;stroke-dasharray:540.4;stroke-dashoffset:540.4}
.ftime{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ftime b{font-size:clamp(46px,5vw,64px);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ftime small{font-size:10px;letter-spacing:.2em;color:var(--mute)}
.fnotes{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.fnotes span{font-size:11px;padding:6px 10px;border-radius:999px;background:#151515;border:1px solid #232323;color:#aaa}
/* block mock */
.mock-block{aspect-ratio:1/1.25;overflow:hidden;padding:0}
.feed{position:absolute;inset:0;display:grid;gap:6px;padding:6px}
.feed div{border-radius:18px;background:linear-gradient(160deg,#2a2a2a,#111 60%);position:relative;overflow:hidden}
.feed div::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);animation:shimmer 1.6s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.blocked{position:absolute;inset:0;background:rgba(0,0,0,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;clip-path:inset(0 0 100% 0)}
.bdot{width:62px;height:62px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin-bottom:8px;box-shadow:0 0 50px rgba(255,59,48,.5)}
.bdot svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.blocked b{font-size:30px;letter-spacing:.06em}
.blocked small{color:#aaa;font-size:14px}
.blocked em{font-style:normal;margin-top:14px;background:#fff;color:#000;border-radius:999px;padding:10px 20px;font-weight:700;font-size:14px}
.saved{position:absolute;left:50%;bottom:18px;translate:-50%;font-size:12px;padding:7px 12px;border-radius:999px;background:#fff;color:#000;font-weight:700;opacity:0;white-space:nowrap}
/* ride mock */
.mr-top{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.mr-top small{font-size:11px;letter-spacing:.2em;color:var(--mute)}
.mr-top b{font-size:56px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hr{width:100%;height:120px;overflow:visible}
.hr path{fill:none;stroke:url(#hrGrad);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
.mr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.mr-grid div{padding:12px;border-radius:14px;background:#111;border:1px solid #1d1d1d}
.mr-grid small{display:block;font-size:9px;letter-spacing:.16em;color:var(--mute)}
.mr-grid b{font-size:22px;letter-spacing:-.02em}
.mr-grid em{font-style:normal;font-size:11px;color:var(--mute);margin-left:2px;font-weight:400}
/* journal mock */
.mock-journal{display:flex;flex-direction:column;gap:10px;min-height:400px}
.mj-h{font-size:11px;letter-spacing:.2em;color:var(--mute);margin-bottom:8px}
.bub{max-width:82%;padding:12px 16px;border-radius:18px 18px 18px 6px;background:#1a1a1a;font-size:15px;opacity:0}
.bub.me{align-self:flex-end;background:#fff;color:#000;border-radius:18px 18px 6px 18px}
.bub.typing{display:flex;gap:5px;padding:14px 16px}
.bub.typing i{width:7px;height:7px;border-radius:50%;background:#777;animation:typing 1.2s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.daydone{margin-top:auto;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:#fff;color:#000;opacity:0}
.daydone b{font-size:40px;letter-spacing:-.04em;line-height:1}
.daydone span{font-size:14px}

/* Tour — 9 slides in normal document flow (no pinning/scroll-jacking): you scroll past them one
   after another like a reel feed, each just playing a reveal as it crosses into view. Full 16:9,
   matching the source images exactly, so nothing is ever cropped off the sides. */
/* TOUR — full-screen live slides that scroll like one long page; 4+5 is a sideways panorama */
.tour{position:relative;background:#050505;isolation:isolate}
.tslide{position:relative;height:100vh;height:100svh;overflow:hidden;z-index:1}
.tfit{position:absolute;left:50%;top:50%;overflow:hidden;transform-origin:0 0}
.tfit.port{display:none}
@media (max-aspect-ratio:1/1){.tfit.land{display:none}.tfit.port{display:block}}
.tstage{position:absolute;top:0;font-family:"Make Yourself Sans","Helvetica Neue",Arial,sans-serif;color:#f3f3f0;-webkit-font-smoothing:antialiased}
.tstage *{box-sizing:border-box}
/* the traveller swims UNDER the slides (z 0 < .tslide z 1): it never covers a headline or a screenshot */
.blob.tour-blob{position:fixed;left:0;top:0;width:520px;height:520px;z-index:0;pointer-events:none;opacity:0;transform-origin:50% 50%;will-change:transform}
.tstage .meta{position:absolute;left:72px;right:72px;top:78px;display:flex;align-items:center;gap:28px;font-size:22px;letter-spacing:.02em;color:rgba(255,255,255,.78)}
.tstage .meta .rule{flex:1;height:1px;background:rgba(255,255,255,.28);transform-origin:0 50%}
.tstage .meta b{font-weight:700;color:#fff;letter-spacing:.14em;font-size:19px}
.tstage .h1{font-weight:400;font-size:132px;line-height:.9;letter-spacing:-.045em;color:#fff;margin:0}
.tstage .pill{display:inline-block;border:3px solid #fff;border-radius:999px;padding:0 .28em .02em;line-height:.98}
.tstage .pill.solid{background:#fff;color:#050505}
.tstage .tlead{font-size:34px;line-height:1.22;color:rgba(255,255,255,.72);letter-spacing:-.01em;max-width:none}
.tstage .tlead b{color:#fff;font-weight:400}
.tstage .tchip{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 26px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);font-size:24px;color:#fff;background:rgba(255,255,255,.04);white-space:nowrap;position:static;opacity:1;transform:none}
.tstage .tchip.solid{background:#fff;color:#050505;border-color:#fff;font-weight:700}
.tstage .tcard{border-radius:40px;background:linear-gradient(180deg,#151515,#0c0c0c);border:1.5px solid rgba(255,255,255,.11)}
.tstage .shot{position:absolute;overflow:hidden;border-radius:38px;background:#000;border:2px solid rgba(255,255,255,.16);box-shadow:0 50px 120px rgba(0,0,0,.85),0 12px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.tstage .shot img{position:absolute;left:0;display:block;max-width:none}
.tstage .shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 30%)}
.tstage .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.14)}
.tstage .blob{position:absolute;z-index:auto;height:auto;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 60px 80px rgba(0,0,0,.7))}
.tstage .stat{position:absolute;padding:30px 34px 32px;border-radius:36px}
.tstage .stat .k{font-size:18px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.tstage .stat .v{font-size:96px;letter-spacing:-.05em;line-height:.95;margin-top:18px;color:#fff}
.tstage .stat .v small{font-size:40px;letter-spacing:-.02em;margin-left:6px;color:rgba(255,255,255,.7)}
.tstage .stat .d{font-size:22px;color:rgba(255,255,255,.6);margin-top:10px;line-height:1.25}
.tstage .stat.light{background:#f2f2ee;color:#050505;border:0}
.tstage .stat.light .k,.tstage .stat.light .d{color:rgba(0,0,0,.55)}
.tstage .stat.light .v{color:#050505}
.tstage .stat.light .v small{color:rgba(0,0,0,.6)}
.tstage .cap{position:absolute}
.tstage .cap .n{font-size:38px;letter-spacing:-.02em;color:#fff}
.tstage .cap .g{font-size:22px;color:rgba(255,255,255,.58);margin-top:6px;line-height:1.3}
.tstage .tag{position:absolute;display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 22px;border-radius:999px;background:#fff;color:#050505;font-size:20px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.tstage .tag.dark{background:#0c0c0c;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
/* word masks for the headline, and the chart "draw-in" curtains */
.tstage .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.tstage .w>span{display:inline-block}
.tstage .scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);box-shadow:0 0 24px 6px rgba(255,255,255,.25);pointer-events:none;z-index:4;opacity:0}

/* Stats bento */
.stats{padding:clamp(120px,18vh,220px) var(--pad);max-width:1440px;margin:0 auto}
.stats-head{margin-bottom:70px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;border-radius:28px;background:linear-gradient(180deg,#121212,#070707);border:1px solid var(--line);padding:28px;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.07),transparent 60%);pointer-events:none}
.span2{grid-column:span 2}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card-h b{font-size:20px;letter-spacing:-.01em}
.tag{font-size:11px;letter-spacing:.16em;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:#cfcfcb}
.legend{display:flex;gap:18px;font-size:12px;color:var(--mute);margin-bottom:6px}
.legend i{display:inline-block;width:14px;height:2px;background:#fff;vertical-align:middle;margin-right:6px}
.legend i.l2{background:#555}
.sc{width:100%;height:200px;overflow:visible}
.sc .gridl line{stroke:#242424}
.sc .gridl line.dashed{stroke:#3a3a3a;stroke-dasharray:4 4}
.sc-axis-y text,.sc-axis-x text{fill:var(--mute);font-size:11px;font-variant-numeric:tabular-nums;font-family:"Make Yourself Sans",Arial}
.sc path{fill:none;vector-effect:non-scaling-stroke}
.sc .now{stroke:#fff;stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(255,255,255,.5))}
.sc .last{stroke:#555;stroke-width:1.5;stroke-linecap:round}
.sc .area{fill:url(#none);fill:rgba(255,255,255,.09);stroke:none;opacity:0}
.sc-dots circle{fill:#fff}
.sc-dots circle.end{filter:drop-shadow(0 0 8px rgba(255,255,255,.85))}
.card-f{display:flex;gap:40px;margin-top:18px;flex-wrap:wrap}
.card-f b{display:block;font-size:44px;letter-spacing:-.04em;line-height:1}
.card-f small,.card-note{color:var(--mute);font-size:14px}
.card-note b{color:#fff}
.radar{width:100%;max-width:300px;margin:0 auto;display:block;overflow:visible}
.radar .web{fill:none;stroke:#2c2c2c}
.radar .web-out{stroke:#333;stroke-dasharray:3 4}
.radar .web-in{stroke:#242424}
.radar .shape{fill:rgba(255,255,255,.05);stroke:#fff;stroke-width:1.75;stroke-linejoin:round}
.radar .rl text{fill:#777;font-size:9px;letter-spacing:.1em;text-anchor:middle;font-family:"Make Yourself Sans",Arial}
.radar-dot{fill:#fff}
.radar-dot.today{fill:#0b0b0b;stroke:#fff;stroke-width:2}
.radar-pct{font-size:24px;font-weight:700;fill:#fff;text-anchor:middle;letter-spacing:-.03em;font-family:"Make Yourself Sans",Arial}
.radar-label{font-size:8px;letter-spacing:.16em;fill:var(--mute);text-anchor:middle;font-family:"Make Yourself Sans",Arial}
.heat{display:grid;grid-template-columns:repeat(26,1fr);grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:4px;margin:10px 0 18px}
.heat i{aspect-ratio:1;border-radius:4px;background:#1a1a1a}
.heat-f{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;color:var(--mute)}
.heat-f b{color:#fff;font-size:18px;margin-left:4px}
.bars{display:flex;align-items:flex-end;gap:6px;height:170px;margin:14px 0 16px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:#fff;transform-origin:bottom;transform:scaleY(0)}
.big-num{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;background:#f1f0ec;color:#000;border-color:#f1f0ec}
.big-num small{font-size:11px;letter-spacing:.2em;color:#555}
.hours{font-size:clamp(52px,9vw,150px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.big-num .card-note{color:#555}

/* Features — sticky phone */
.features{padding:clamp(100px,16vh,200px) var(--pad) 0}
.features-intro{max-width:1400px;margin:0 auto 10vh}
.phone-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6vw;max-width:1300px;margin:0 auto}
.phone-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
.phone{width:min(330px,70vw);aspect-ratio:1080/2340;border-radius:48px;padding:11px;background:linear-gradient(145deg,#3a3a3a,#0e0e0e 40%,#262626);box-shadow:0 0 0 1px #444,0 80px 120px -40px rgba(255,255,255,.12),0 40px 80px rgba(0,0,0,.8);position:relative}
.phone::before{content:"";position:absolute;top:22px;left:50%;translate:-50%;width:14px;height:14px;border-radius:50%;background:#000;z-index:3;box-shadow:0 0 0 2px #111}
.phone-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#000}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06)}
.phone-screen img:first-child{opacity:1;transform:none}
.feature-steps{padding:30vh 0 40vh}
.fstep{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.18;transition:opacity .6s var(--ease)}
.fstep.on{opacity:1}
.fstep .num{font-size:14px;letter-spacing:.2em;color:var(--mute);margin-bottom:18px}
.fstep h3{font-size:clamp(34px,4vw,64px);line-height:.98;letter-spacing:-.035em;margin-bottom:22px}
.fstep p{color:#a9a9a5;font-size:clamp(17px,1.35vw,20px);max-width:470px}

/* The Five — stacking cards */
.minds{position:relative;padding:clamp(100px,16vh,200px) var(--pad) 0}
.minds-intro{max-width:1400px;margin:0 auto 12vh}
.mind{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;padding:clamp(70px,9vh,100px) 0 3vh}
.mind-in{position:relative;width:100%;max-width:1400px;height:100%;border-radius:36px;border:1px solid rgba(255,255,255,.14);background:#0b0b0b;display:grid;grid-template-columns:1.05fr .8fr 1fr;align-items:center;gap:clamp(20px,3vw,50px);padding:clamp(28px,4vw,60px);overflow:hidden;transform-origin:50% 0;box-shadow:0 40px 90px -20px rgba(0,0,0,.9)}
.mind:nth-of-type(2n) .mind-in{background:#f1f0ec;color:#0b0b0b;border-color:#f1f0ec}
.mind-in::after{content:attr(data-bg);position:absolute;right:-2%;bottom:-6%;font-size:clamp(120px,22vw,340px);font-weight:700;letter-spacing:-.06em;line-height:.8;opacity:.05;pointer-events:none}
.mind-no{font-size:13px;letter-spacing:.24em;color:var(--mute)}
.mind-text h3{font-size:clamp(46px,6.2vw,104px);letter-spacing:-.05em;line-height:.9;margin:14px 0 10px}
.mind-role{font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px;opacity:.6}
.mind-text > p:not(.mind-role){font-size:clamp(16px,1.3vw,19px);opacity:.75;max-width:440px}
.mind-text ul{list-style:none;margin-top:24px;display:grid;gap:8px}
.mind-text li{font-size:15px;padding:10px 14px;border-radius:12px;border:1px solid rgba(128,128,128,.25)}
.mind-phone{justify-self:center;width:min(260px,100%);aspect-ratio:1080/2340;border-radius:36px;padding:8px;background:linear-gradient(145deg,#3a3a3a,#0e0e0e 40%,#262626);box-shadow:0 50px 90px -30px rgba(0,0,0,.8)}
.mind-phone img{width:100%;height:100%;object-fit:cover;border-radius:29px}
.mind-widget{border-radius:26px;padding:26px;background:#141414;color:#f4f4f2;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.mind-widget small{font-size:11px;letter-spacing:.2em;color:var(--mute)}
.w-chat{display:flex;flex-direction:column;gap:10px}
.w-chat .bub{opacity:1}
.bub.rec{display:flex;align-items:center;gap:10px;align-self:flex-end;background:#fff;color:#000;border-radius:18px 18px 6px 18px}
.bub.rec > i{width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulseR 1.4s infinite}
.bub.rec span{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.wave{display:flex;gap:3px;align-items:center;height:22px}
.wave b{width:3px;border-radius:3px;background:#000;height:30%;animation:wave 1s ease-in-out infinite}
.wave b:nth-child(3n){animation-delay:-.3s}.wave b:nth-child(3n+1){animation-delay:-.6s}.wave b:nth-child(4n){animation-delay:-.15s}
@keyframes wave{50%{height:100%}}
.goal{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin-top:18px;font-size:14px}
.goal div{grid-column:1/-1;grid-row:2;height:8px;border-radius:8px;background:#232323;overflow:hidden}
.goal div i{display:block;height:100%;width:calc(var(--v)*100%);background:#fff;border-radius:8px;transform:scaleX(0);transform-origin:left}
.goal b{grid-row:1;grid-column:2;font-variant-numeric:tabular-nums}
.shelf{display:flex;align-items:flex-end;gap:8px;height:180px;padding-bottom:10px;border-bottom:2px solid #333}
.shelf i{flex:1;height:calc(var(--h)*100%);border-radius:4px;background:linear-gradient(90deg,#2b2b2b,#474747 50%,#2b2b2b);transform-origin:bottom;transform:scaleY(0);position:relative}
.shelf i:nth-child(3n){background:linear-gradient(90deg,#d8d6cf,#f4f2ec 50%,#d8d6cf)}
.shelf i::after{content:"";position:absolute;left:20%;right:20%;top:12%;height:2px;background:rgba(128,128,128,.6)}
.books-f,.mrow{display:flex;gap:30px;margin-top:20px}
.books-f b{display:block;font-size:40px;letter-spacing:-.04em;line-height:1}
.books-f small{letter-spacing:0;font-size:13px}
.bal{display:block;font-size:clamp(44px,4.4vw,64px);letter-spacing:-.04em;line-height:1;margin:8px 0 22px;font-variant-numeric:tabular-nums}
.mbars{display:flex;align-items:flex-end;gap:8px;height:120px}
.mbars i{flex:1;height:calc(var(--h)*100%);border-radius:6px;background:#fff;transform-origin:bottom;transform:scaleY(0)}
.mbars i:nth-child(odd){background:#3a3a3a}
.mrow{font-size:14px;color:var(--mute)}
.mrow b{color:#fff;margin-left:4px}
.w-body{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px}
.kcal{width:130px;transform:rotate(-90deg)}
.kcal circle{fill:none;stroke-width:10}
.kcal .track{stroke:#222}
.kcal .prog{stroke:#fff;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16}
.kc b{display:block;font-size:44px;letter-spacing:-.04em;line-height:1}
.kc small{letter-spacing:0;font-size:13px}
.macros{grid-column:1/-1;display:grid;gap:12px}
.macros span{display:grid;grid-template-columns:70px 1fr;align-items:center;font-size:13px;color:#aaa}
.macros i{height:6px;border-radius:6px;background:#fff;width:calc(var(--v)*100%);transform:scaleX(0);transform-origin:left}

/* Wall */
.wall{position:relative;height:160vh;overflow:hidden;display:grid;place-items:center;margin-top:10vh}
.wall-grid{position:absolute;left:50%;top:50%;width:170vw;display:grid;grid-template-columns:repeat(6,1fr);gap:22px;transform:translate(-50%,-50%) rotateX(28deg) rotateZ(-14deg) scale(1.05);transform-style:preserve-3d;perspective:1400px}
.wall-col{display:flex;flex-direction:column;gap:22px;will-change:transform}
.wall-col img{width:100%;aspect-ratio:1080/2340;object-fit:cover;border-radius:22px;border:1px solid #222;filter:brightness(.8)}
.wall::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.2) 0%,rgba(0,0,0,.85) 55%,#000 80%);pointer-events:none}
.wall-copy{position:relative;z-index:2;text-align:center}
.wall-copy .big-h{font-size:clamp(48px,9vw,150px)}

/* Kinetic */
.kinetic{padding:12vh 0;overflow:hidden;display:grid;gap:1vh}
.kline{white-space:nowrap;font-size:clamp(60px,11vw,190px);font-weight:700;letter-spacing:-.05em;line-height:.95;will-change:transform}
.kline.outline{-webkit-text-stroke:1.5px #fff;color:transparent}

/* Numbers */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.stat{padding:clamp(40px,7vh,80px) var(--pad);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:clamp(64px,8vw,130px);line-height:.9;letter-spacing:-.05em}
.stat span{color:var(--mute);font-size:15px}

/* Privacy */
.privacy{padding:clamp(120px,22vh,260px) var(--pad);position:relative;overflow:hidden}
.privacy-inner{max-width:1200px;margin:0 auto}
.privacy .big-h{max-width:14ch}
.split .ch{display:inline-block}

/* Pricing */
.pricing{padding:clamp(100px,16vh,180px) var(--pad)}
.pricing-head{max-width:1300px;margin:0 auto 70px}
.pricing-hook{font-size:clamp(17px,1.5vw,20px);color:#e2e2de;max-width:640px;margin-top:18px;padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.pricing-hook b{color:#fff}
.plans{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);border-radius:28px;padding:34px;display:flex;flex-direction:column;background:linear-gradient(180deg,#121212,#070707);transition:box-shadow .5s,border-color .5s}
.plan:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border-color:rgba(255,255,255,.24)}
.plan.featured{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.plan h3{font-size:22px;margin-bottom:28px}
.price{display:flex;flex-direction:column;margin-bottom:28px}
.price s{color:var(--mute);font-size:18px}
.price b{font-size:62px;line-height:1;letter-spacing:-.04em}
.price span{color:var(--mute);font-size:14px;margin-top:8px}
.plan ul{list-style:none;margin-bottom:34px;display:grid;gap:10px}
.plan li{padding-left:26px;position:relative;color:#d6d6d2}
.plan li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-3px)}
.plan a{margin-top:auto}
.badge{position:absolute;top:24px;right:24px;font-size:11px;letter-spacing:.14em;font-weight:700;padding:6px 10px;border-radius:999px;background:#fff;color:#000}
.badge.dark{background:transparent;color:#fff;border:1px solid var(--line)}
.fine{max-width:1300px;margin:30px auto 0;font-size:13px;color:var(--mute)}

/* FAQ */
.faq{background:var(--paper);color:var(--ink);padding:clamp(100px,16vh,180px) var(--pad);border-radius:40px 40px 0 0}
.faq>*{max-width:1000px;margin-left:auto;margin-right:auto}
.faq .eyebrow{color:#6b6b67}
.qa{margin-top:50px;border-top:1px solid #d9d8d2}
.qa details{border-bottom:1px solid #d9d8d2}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:26px 0;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-weight:400;font-size:30px;line-height:.8;transition:transform .4s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 0 28px;color:#55554f;max-width:720px;font-size:18px}

/* Ecosystem film (Higgsfield, promo/ecosystem) */
.eco{position:relative;height:300vh;background:#000}
.eco-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:flex-end}
.eco-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(var(--ei,14%) round var(--er,32px));transform:scale(var(--es,1.08))}
.eco-shade{position:absolute;inset:0;pointer-events:none;opacity:var(--eo,0);background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 18%,transparent 34%)}
.eco-copy{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 60px;flex-wrap:wrap;padding:0 var(--pad) clamp(34px,6vh,70px);opacity:var(--eo,0);transform:translateY(calc((1 - var(--eo,0)) * 40px))}
.eco-copy .eyebrow{width:100%;margin-bottom:-8px}
.eco-title{font-size:clamp(30px,3.6vw,64px);line-height:1;letter-spacing:-.04em}
.eco-lead{font-size:clamp(15px,1.2vw,19px);color:#d6d6d0;max-width:440px}
/* the promise over the film: this AI scene gets shot for real once the project takes off.
   Top right, over the bikes - the car is left and the face centre-right. Rises with the copy (--eo). */
.eco-promise{position:absolute;right:calc(var(--pad) * .6);top:calc(80px + 1.5vh);z-index:3;width:min(410px,28.5vw);padding:22px 24px 20px;background:rgba(10,10,10,.86);color:#f1f0ec;border:1.5px solid rgba(255,59,48,.75);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:var(--pv,0);transform:translateY(calc((1 - var(--pv,0)) * -30px));animation:ppGlow 2.2s ease-in-out infinite}
.eco-promise::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:#ff3b30}
.eco-promise.is-in{animation:ppSlam .7s cubic-bezier(.2,1.5,.35,1) both,ppGlow 2.2s ease-in-out .7s infinite}
@keyframes ppGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.0),0 0 40px -6px rgba(255,59,48,.35),0 30px 70px -24px rgba(0,0,0,.9)}50%{box-shadow:0 0 0 6px rgba(255,59,48,.14),0 0 70px 0 rgba(255,59,48,.55),0 30px 70px -24px rgba(0,0,0,.9)}}
@keyframes ppSlam{0%{transform:scale(1.35) rotate(-2deg);filter:brightness(2.2)}60%{transform:scale(.97) rotate(.4deg);filter:brightness(1.2)}100%{transform:none;filter:none}}
.pp-tag{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.2em;color:#ff5a4e;margin-bottom:14px}
.pp-tag i{flex:none;width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:ppRec 1.2s ease-out infinite}
.pp-tag b{margin-left:auto;font-weight:600;letter-spacing:.08em;color:#f1f0ec;font-variant-numeric:tabular-nums}
@keyframes ppRec{0%{box-shadow:0 0 0 0 rgba(255,59,48,.7);opacity:1}70%{box-shadow:0 0 0 11px rgba(255,59,48,0);opacity:.45}100%{box-shadow:0 0 0 0 rgba(255,59,48,0);opacity:1}}
.pp-head{font-weight:700;font-size:clamp(26px,2.5vw,40px);line-height:1;letter-spacing:-.035em}
.pp-head em{font-style:italic;font-weight:400;font-family:Georgia,"Times New Roman",serif;letter-spacing:-.01em;color:#ff5a4e}
.pp-body{margin-top:12px;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:#dcd9d4}
.pp-body strong{color:#fff}
.pp-sign{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ff5a4e}
@media (prefers-reduced-motion:reduce){.pp-tag i,.eco-promise,.eco-promise.is-in{animation:none}}
@media (max-width:1000px){
  .eco-promise{left:var(--pad);right:var(--pad);top:calc(72px + env(safe-area-inset-top,0px));width:auto;padding:16px 18px 14px}
  .pp-head{font-size:clamp(24px,7vw,32px)}
  .pp-body{font-size:14px;margin-top:8px}
  .pp-sign{margin-top:8px}
}
@media (max-aspect-ratio:1/1){.eco-video{object-position:40% 50%}.eco-shade{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 35%,transparent 55%)}}

/* Final */
.final{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:140px var(--pad);text-align:center;overflow:hidden}
.final-logo{width:72px;position:relative;z-index:3}
.final-title{position:relative;z-index:3;font-size:clamp(40px,6.4vw,110px);line-height:.95;letter-spacing:-.045em}
.blob-final{width:min(80vw,900px);top:50%;opacity:.5;z-index:1}
.final-ctas{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.final-ctas .btn-pc{padding:15px 24px}

/* Footer */
.footer{border-top:1px solid var(--line);padding:60px var(--pad) 40px;display:grid;grid-template-columns:1fr 2fr;gap:40px;overflow:hidden}
.foot-brand img{width:40px;margin-bottom:14px}
.foot-brand b{letter-spacing:.2em}
.foot-brand p{color:var(--mute);margin-top:6px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.foot-cols h4{font-size:12px;letter-spacing:.2em;color:var(--mute);margin-bottom:14px;font-weight:400}
.foot-cols a{display:block;padding:4px 0;color:#d6d6d2}
.foot-cols a:hover{color:#fff}
.foot-giant{grid-column:1/-1;font-size:12.4vw;font-weight:700;letter-spacing:-.06em;line-height:.85;white-space:nowrap;margin:30px 0 0 -.04em;color:#fff;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 95%);mask-image:linear-gradient(180deg,#000 10%,transparent 95%)}
.copy{grid-column:1/-1;color:#5f5f5b;font-size:13px;padding-top:30px;border-top:1px solid var(--line)}

/* Responsive */
@media (max-width:1100px){
  .mind-in{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .mind-text{grid-column:1/-1}
  .mind-text ul{display:none}
  .mind-phone{width:min(200px,100%)}
}
@media (max-width:1000px){
  .nav-links{display:none}
  .burger{display:inline-block}
  .nav-cta .btn-pc{display:none}
  .chip{padding:10px 12px;border-radius:14px}
  .chip b{font-size:20px}
  .c1{left:4%;top:18%}.c2{right:4%;top:14%}.c3{display:none}.c4{display:none}
  .dpanel{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:24px;padding-bottom:10vh}
  .dtext{justify-self:start}
  .dtext h3{font-size:clamp(34px,9vw,56px);margin-bottom:12px}
  .dtext p{font-size:15px}
  .dmock{justify-self:center;width:min(340px,100%);padding:20px}
  .mock-habits li{padding:10px 12px;font-size:14px}
  .mock-focus{aspect-ratio:1/.9}
  .mock-block{aspect-ratio:1/1}
  .mock-journal{min-height:300px}
  .mr-top b{font-size:40px}.hr{height:80px}
  .bento{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .heat{grid-template-columns:repeat(18,1fr)}
  .heat i:nth-child(n+127){display:none}
  .phone-stage{grid-template-columns:1fr;gap:0}
  .phone-pin{height:auto;top:12vh;padding:0;z-index:1;place-items:center}
  .phone{width:min(210px,52vw);border-radius:34px;padding:8px}
  .phone-screen{border-radius:27px}
  .feature-steps{padding:6vh 0 20vh;position:relative;z-index:2}
  .fstep{min-height:auto;margin-bottom:40vh;padding:24px;border-radius:24px;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);opacity:1}
  .mind{padding:70px 0 12px}
  .mind-in{grid-template-columns:1fr;border-radius:28px;padding:24px;gap:16px;align-content:start}
  .mind-phone{display:none}
  .mind-text h3{font-size:clamp(44px,13vw,72px)}
  .mind-widget{padding:20px}
  .wall-grid{width:260vw;grid-template-columns:repeat(5,1fr);gap:12px}
  .wall-col{gap:12px}
  .numbers{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .plans{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr}
  .blob{width:min(84vw,520px)}
  .hero-pin{justify-content:flex-end;padding-bottom:9vh}
  #blob{z-index:0;top:29%;width:64vw}
}
@media (max-width:560px){
  .nav-cta .btn-white{padding:10px 16px;font-size:14px}
  .logo span{display:none}
  .launchbar{font-size:12.5px;gap:8px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .day-clock{font-size:24px}
  .day-head .eyebrow{max-width:55%}
  .mind-text > p:not(.mind-role){font-size:15px}
  .mind-role{margin-bottom:10px}
}
@media (max-height:760px) and (min-width:1001px){
  .mind-text ul{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .loader{display:none}
  .hero,.tour,.day{height:auto}
  .hero-pin,.tour-pin,.day-pin,.phone-pin,.mind{position:relative}
  .day-track{flex-direction:column;width:auto}
}

/* Larger nav, hero cards and hero copy on desktop (user feedback 2026-09-25: too small to read) */
@media (min-width:1001px){
  .nav{padding:18px var(--pad)}
  .logo{font-size:17px;gap:14px}
  .logo img{width:40px;height:40px}
  .nav-links{padding:6px}
  .nav-links a{font-size:16.5px;padding:10px 19px}
  .nav-cta{gap:10px}
  .nav-cta .btn-white,.nav-cta .btn-outline{font-size:17px;padding:14px 26px}
  .nav-cta .btn-outline svg{width:18px;height:18px}
  .chip{padding:19px 25px;border-radius:22px;gap:4px}
  .chip small{font-size:12.5px}
  .chip b{font-size:38px}
  .chip em{font-size:14.5px}
  .c4{gap:13px}.c4 b{font-size:21px}.dot-red{width:12px;height:12px}
  .kicker{font-size:14.5px}
  .hero-sub{font-size:clamp(19px,1.65vw,24px);max-width:640px}
  .hero-bottom{gap:24px}
  .hero-actions .btn-outline{font-size:17px;padding:15px 26px}
  .store-btn{padding:13px 26px 13px 20px}
  .store-btn svg{width:30px;height:30px}
  .store-btn span{font-size:23px}
  .store-btn small{font-size:11px}
  .hero-note{font-size:14.5px}
}

/* Performance (2026-09-25): a drop-shadow filter on a canvas whose picture changes every frame is
   recomputed every frame, and backdrop blur over the animated hero is recomputed every frame too -
   together they made scrolling stutter. The blob canvases and the hero chips go without them. */
canvas.blob,.tstage .blob,.blob.tour-blob{filter:none}
.chip{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,20,20,.9)}
.chip.light{background:rgba(240,239,235,.96)}

/* "A day with Make Yourself": text and the live mock 1.25x on desktop */
@media (min-width:1001px){
  .dtext{max-width:660px}
  .dtime{font-size:16px;padding:8px 15px;margin-bottom:26px}
  .dtext h3{font-size:clamp(50px,6.25vw,105px)}
  .dtext p{font-size:clamp(21px,1.62vw,25px)}
  .dmock{zoom:1.25}
}

/* FEATURES — full-resolution captures without a phone frame, left column; copy in full white */
.phone-stage{max-width:1560px}
.fshots{position:relative;width:100%;height:100%}
.fgroup{position:absolute;inset:0;opacity:0;visibility:hidden}
.fgroup:first-child{opacity:1;visibility:visible}
.fgroup img{position:absolute;display:block;height:auto;border-radius:clamp(22px,2.2vw,36px);border:1px solid rgba(255,255,255,.14);box-shadow:0 60px 120px -30px rgba(0,0,0,.95),0 0 80px -20px rgba(255,255,255,.08);background:#000}
/* the pair stands side by side, never overlapping: left one a little higher, right one lower, and
   while the section scrolls the left drifts up and the right drifts down (--fp, set by main.js),
   the same counter-motion as the wall of screens
   (offsets are relative-position top, not the translate property: GSAP folds that into its own
   transform on first touch and drops the var() for good) */
.fgroup{display:flex;align-items:center;justify-content:center;gap:28px}
.fgroup img{position:relative;flex:none;width:min(calc(66vh*1080/2340),calc(50% - 14px),380px)}
.fs-main{order:0;top:calc(-4vh - var(--fp,0px));z-index:2}
.fs-side{order:1;top:calc(4vh + var(--fp,0px));z-index:1}
.fstep{opacity:1}
.fstep.on{opacity:1}
.fstep h3{color:#fff}
.fstep p{color:#e2e2de}
.fstep .num{color:#bdbdb9}
@media (max-width:1000px){
  .fgroup{gap:20px}
  .fgroup img{width:min(calc(54vh*1080/2340),calc(50% - 10px),230px)}
  .fs-main{top:calc(-3vh - var(--fp,0px))}
  .fs-side{top:calc(3vh + var(--fp,0px))}
  .phone-pin{height:62vh}
  .fstep{opacity:1}
}

/* STATS bento 1.25x on desktop */
@media (min-width:1001px){
  .stats{max-width:1800px}
  .bento{zoom:1.25}
}
.blob-fly{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0}

/* THE FIVE: every card holds the screen for a while before the next one comes down over it, so its
   own animation is actually seen on the way down (before, the next card started the moment the last
   one landed) */
@media (prefers-reduced-motion:no-preference){
  .mind:not(:last-of-type){margin-bottom:40vh}   /* 140vh per page; was 185vh, the user wanted 25% less scrolling */
  /* the last page holds too: a sticky box stops where its margin box meets the end of .minds, so its
     own margin cannot do it - this spacer after it does */
  .minds::after{content:"";display:block;height:40vh}
}

/* FEATURES v3: the whole left half is a tilted wall of screens (like "Every number that matters"),
   pinned while the six steps scroll by on the right */
.features{padding-left:0;padding-right:0}
.features-intro{padding:0 var(--pad)}
.features .phone-stage{max-width:none;margin:0;grid-template-columns:1fr 1fr;gap:4vw}
.features .feature-steps{padding-right:var(--pad)}
.features .phone-pin{overflow:hidden;perspective:1400px}
.fwall{position:absolute;left:50%;top:50%;width:125%;transform:translate(-50%,-50%) rotateX(28deg) rotateZ(-14deg);transform-style:preserve-3d}
.fwall-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;will-change:transform}
.fwall-col{display:flex;flex-direction:column;gap:20px;will-change:transform}
.fwall-col img{width:100%;aspect-ratio:1080/2340;object-fit:cover;border-radius:20px;border:1px solid #222;filter:brightness(.82);display:block}
.features .phone-pin::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 45% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.6) 75%,#000 96%),linear-gradient(90deg,rgba(0,0,0,0) 75%,#000 100%)}
@media (max-width:1000px){
  .features .phone-stage{grid-template-columns:1fr;gap:0}
  .features .feature-steps{padding:6vh var(--pad) 20vh}
  .fwall{width:150%}
  .fwall-in,.fwall-col{gap:12px}
  .features .phone-pin::after{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 30%,rgba(0,0,0,.8) 75%,#000 95%)}
}

/* THE FIVE v3: every page is the whole screen - grey, white, grey, white, grey - with its name
   written across the full width behind it and slow motion running up and down both sides */
.minds{padding-left:0;padding-right:0}
.minds-intro{padding:0 var(--pad)}
.mind{padding:0}
.mind-in{max-width:none;border-radius:0;border:0;box-shadow:none;background:#161616;
  padding:clamp(100px,13vh,150px) max(calc(var(--pad) + 3vw),calc((100vw - 1400px)/2)) clamp(90px,19vh,210px)}
.mind:nth-of-type(2n) .mind-in{background:#f1f0ec;border:0}
.mind-in::after{content:none}
.mind-in > .mind-text,.mind-in > .mind-phone,.mind-in > .mind-widget{position:relative;z-index:2}
.mind-bg span{display:inline-block}
.mind-bg{position:absolute;left:0;right:0;bottom:1.5vh;text-align:center;white-space:nowrap;font-weight:700;letter-spacing:-.055em;line-height:.78;opacity:.07;pointer-events:none;z-index:0;will-change:transform}
.mind-side{position:absolute;top:0;bottom:0;width:22px;overflow:hidden;z-index:1;pointer-events:none;opacity:.4}
.mind-side.l{left:clamp(12px,1.4vw,26px)}.mind-side.r{right:clamp(12px,1.4vw,26px)}
.mind-side div{writing-mode:vertical-rl;white-space:nowrap;font-size:11px;letter-spacing:.34em;font-family:ui-monospace,Menlo,Consolas,monospace;animation:mindSide 38s linear infinite}
.mind-side.r div{animation-direction:reverse}
@keyframes mindSide{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.mind-orb{position:absolute;border-radius:50%;border:1px solid currentColor;opacity:.2;pointer-events:none;z-index:0}
.mind-orb::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:currentColor;top:-5px;left:50%;margin-left:-4.5px;opacity:1}
.mind-orb.o1{width:34vw;height:34vw;right:-12vw;top:-12vw;animation:orb 26s linear infinite}
.mind-orb.o2{width:22vw;height:22vw;left:-8vw;bottom:14vh;animation:orb 19s linear infinite reverse}
.mind-orb.o3{width:10vw;height:10vw;right:30%;top:9vh;border-style:dashed;animation:orb 14s linear infinite}
@keyframes orb{to{transform:rotate(360deg)}}
@media (max-width:1000px){
  .mind-in{padding:88px calc(var(--pad) + 18px) 90px}
  .mind-orb.o3{display:none}
  .mind-side{opacity:.22}
}
@media (prefers-reduced-motion:reduce){.mind-side div,.mind-orb{animation:none}}

/* PORTRAIT after the hero: head -> white statue, scroll-scrubbed frames on the frames' own grey */
.portrait{position:relative;z-index:5;height:370vh;margin-top:-130vh;background:#bbb5b0;color:#111;visibility:hidden}
/* It lies over the last 130vh of the hero, so it pins the moment the hero is done - the fly-through is
   already black there (frames 77+ are empty). Hidden until then (main.js), or its grey would slide up
   over the hero as a hard-edged panel. */
.portrait-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#bbb5b0}
.portrait-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.portrait-fade{position:absolute;inset:0;background:#000;pointer-events:none}
.portrait-copy{position:absolute;left:var(--pad);top:15vh;bottom:15vh;width:min(34vw,520px);z-index:2}
.pc-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:0;visibility:hidden}
.pc-tag{display:inline-block;background:#111;color:#f1f0ec;font-size:11px;letter-spacing:.2em;padding:5px 9px 4px;margin-bottom:18px}
.portrait-copy h2{font-weight:700;font-size:clamp(40px,5.2vw,92px);line-height:.92;letter-spacing:-.04em}
.portrait-copy h2 em{font-style:italic;font-weight:400;font-family:Georgia,"Times New Roman",serif;letter-spacing:-.02em}
.pc-sub{margin-top:20px;font-size:clamp(15px,1.15vw,18px);color:#3a3836;max-width:34ch}
.portrait-side{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:28px;text-align:right;font-size:13px;line-height:1.4;color:#2a2826}
.portrait-side small{display:block;font-size:10.5px;letter-spacing:.22em;color:#5d5955;margin-bottom:4px}
@media (max-width:1000px){
  .portrait{height:330vh}
  .portrait-copy{left:var(--pad);right:var(--pad);top:auto;bottom:8vh;width:auto;height:36vh}
  .pc-step{justify-content:flex-end}
  .portrait-copy h2{font-size:clamp(38px,11vw,64px)}
  .portrait-side{display:none}
}
@media (prefers-reduced-motion:reduce){
  .portrait{height:auto;margin-top:0;visibility:visible}
  .portrait-pin{position:relative}
  .portrait-fade{display:none}
}

/* SOCRATES widget: pages-per-month chart (replaced the grey "book spine" bars, 2026-09-26) */
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bk-pill{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#0b0b0b;background:#f1f0ec;border-radius:999px;padding:4px 10px 3px}
.bk-chart{position:relative;height:200px;margin:22px 0 4px}
.bk-grid{position:absolute;inset:0 0 24px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.bk-grid i{display:block;border-top:1px dashed rgba(255,255,255,.09)}
.bk-grid i:last-child{border-top:1px solid rgba(255,255,255,.18)}
.bk-bars{position:absolute;inset:0;display:flex;align-items:stretch;gap:clamp(6px,.8vw,11px)}
.bk-col{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.bk-col i{display:block;width:100%;height:calc(var(--h) * (100% - 24px));border-radius:999px 999px 5px 5px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.1) 70%,rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.07);
  transform-origin:bottom;transform:scaleY(0)}
.bk-col em{font-style:normal;font-size:11px;letter-spacing:.08em;color:#6f6f6b;height:24px;line-height:24px}
.bk-col.now i{background:linear-gradient(180deg,#fff,#e4e2db 60%,#bdbbb4);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.6),0 14px 40px -8px rgba(255,255,255,.5)}
.bk-col.now em{color:#fff;font-weight:700}
.bk-tip{position:absolute;left:50%;bottom:calc(var(--h) * (100% - 24px) + 34px);transform:translateX(-50%);white-space:nowrap;
  background:#fff;color:#0b0b0b;font-size:12px;font-weight:700;padding:5px 10px 4px;border-radius:999px;box-shadow:0 10px 24px -8px rgba(0,0,0,.8)}
.bk-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#fff}

/* PRICING v2 - glass cards over a giant blurred MAKE YOURSELF (user reference, 2026-09-26) */
.pricing{position:relative;overflow:hidden;background:#000;padding:clamp(90px,14vh,160px) var(--pad) clamp(80px,12vh,140px)}
.pr-stage{position:relative;max-width:1240px;margin:0 auto}
.pr-eyebrow{position:relative;z-index:2;text-align:center;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.pr-giant{position:relative;z-index:0;display:flex;justify-content:center;gap:.22em;white-space:nowrap;font-weight:700;letter-spacing:-.06em;line-height:.8;
  font-size:clamp(64px,11.6vw,210px);margin:clamp(14px,2vw,26px) calc(-1 * var(--pad)) 0;color:#fff;filter:blur(3px);opacity:.96;pointer-events:none;user-select:none}
.pr-giant span{display:inline-block}
.pr-giant span:last-child{padding-right:.06em}   /* gives back the last letter's negative tracking, which pushed the word right */
.pricing .plans{position:relative;z-index:1;max-width:1240px;margin:calc(-.42 * clamp(64px,11.6vw,210px)) auto 0;gap:clamp(14px,1.6vw,22px)}
.pricing .plan{border-radius:26px;padding:clamp(24px,2.4vw,34px);border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 45%,rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -40px rgba(0,0,0,.9)}
.pricing .plan:hover{border-color:rgba(255,255,255,.26)}
.pricing .plan.featured{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 45%,rgba(255,255,255,.025));border-color:rgba(255,255,255,.24)}
.pr-name{font-size:14px;color:#ececE8;font-weight:700;margin-bottom:14px;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.pricing .price{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.pricing .price{flex-direction:column;margin-bottom:0;min-height:96px;justify-content:flex-end}
.pricing .price b{font-size:clamp(44px,4.4vw,64px);font-weight:700;letter-spacing:-.045em}
.pricing .price b small{font-size:.5em;font-weight:400;color:#cfcfcb;letter-spacing:-.02em;margin-left:2px}
.pricing .price s{font-size:15px;color:#d8d8d4;opacity:.75}
.pricing .price span{font-size:13px}
.pricing .plan hr{border:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.2),rgba(255,255,255,.04));margin:0 0 24px}
.pricing .plan ul{gap:14px;margin-bottom:34px}
.pricing .plan li{display:flex;align-items:center;gap:12px;padding-left:0;font-size:14.5px;color:#cfcfcb}
.pricing .plan li::before{content:none}
.pr-ck{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pr-ck svg{width:13px;height:13px}
.pr-btn{margin-top:auto;display:block;text-align:center;padding:15px 20px;border-radius:999px;font-size:15px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);transition:background .3s,border-color .3s}
.pr-btn:hover{background:rgba(0,0,0,.75);border-color:rgba(255,255,255,.3)}
.pr-btn.light{background:#fff;color:#000;border-color:#fff;box-shadow:0 10px 40px -10px rgba(255,255,255,.35)}
.pr-btn.light:hover{background:#e9e9e5}
.pricing .badge{top:22px;right:22px;font-size:10.5px}
.pricing .pricing-hook{max-width:640px;margin:56px auto 0;text-align:center}
.pricing .fine{text-align:center;max-width:720px;margin:18px auto 0}
@media (max-width:1000px){
  .pr-giant{font-size:clamp(60px,17vw,150px);white-space:normal;line-height:.82;flex-direction:column;align-items:center;gap:0}
  .pr-giant span{display:block}
  .pricing .plans{grid-template-columns:1fr;max-width:520px;margin-top:-18vw}
  .pricing .price{min-height:0}
}

/* LITE mode (html.lite, set by main.js on weak hardware or long frames): no blurs, glows or blend cursor */
html.lite .pr-giant{filter:none;opacity:.35}
html.lite .cursor,html.lite .cursor-dot{display:none}
html.lite .sc .now,html.lite .sc-dots circle.end,html.lite .hr path{filter:none}
html.lite .mind-side div,html.lite .mind-orb{animation:none}
html.lite .fstep{-webkit-backdrop-filter:none;backdrop-filter:none}

/* NAV island grows when the pointer is on it (user request 2026-09-26) */
@media (hover:hover) and (pointer:fine){
  .nav-links{transform-origin:50% 30%;transition:transform .55s cubic-bezier(.2,1.4,.3,1),background .4s,border-color .4s,box-shadow .4s}
  .nav-links:hover{transform:scale(1.25);background:rgba(20,20,20,.92);border-color:rgba(255,255,255,.22);box-shadow:0 18px 50px -16px rgba(0,0,0,.9)}
}

/* HERO: the face that fades up in the fly-through's black middle (drawn by main.js) */
.hero-face{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:lighten}
.portrait-fade{display:none}   /* replaced by the canvas vignette (pDark in main.js) */

/* HERO: Windows pitch inside the blob's hole */
.hero-win{position:absolute;left:50%;top:50%;z-index:4;width:min(400px,78vw);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;opacity:0;visibility:hidden;text-shadow:0 2px 24px #000}
.hw-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.24em;font-weight:700;color:#000;background:#fff;border-radius:999px;padding:6px 12px 5px;text-shadow:none}
.hw-tag svg{width:13px;height:13px}
.hw-h{font-size:clamp(28px,2.7vw,44px);line-height:.98;letter-spacing:-.04em;font-weight:700;margin-top:4px}
.hw-h em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.02em}
.hw-p{font-size:clamp(13px,.95vw,15px);color:#d5d5d1;max-width:30ch}
.hw-btn{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:14px 24px;border-radius:999px;background:#fff;color:#000;font-weight:700;font-size:15px;text-shadow:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:hwPulse 2.2s ease-out infinite;transition:transform .3s}
.hw-btn svg{width:17px;height:17px}
.hw-btn:hover{transform:scale(1.06)}
.hw-note{font-size:11.5px;color:#a9a9a5;letter-spacing:.04em}
@keyframes hwPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* TOUR slide 1: the trial chip is a real button to the pricing */
.tstage .tcta{cursor:pointer;background:#fff;color:#000;border-color:#fff;font-weight:700;transition:transform .35s cubic-bezier(.2,1.4,.3,1),box-shadow .35s}
.tstage .tcta::after{content:"→";margin-left:4px}
.tstage .tcta:hover{transform:scale(1.06);box-shadow:0 14px 40px -10px rgba(255,255,255,.45)}

/* PRICING: the per-day price and the free week are the loudest things on the cards */
.pr-day{display:inline-flex;align-items:baseline;gap:8px;margin-top:14px;align-self:flex-start;padding:9px 16px 8px;border-radius:14px;background:#fff;color:#000;
  font-size:15px;font-weight:700;letter-spacing:-.01em;text-shadow:none;box-shadow:0 12px 36px -10px rgba(255,255,255,.55);animation:prDay 3.2s ease-in-out infinite}
.pr-day b{font-size:30px;letter-spacing:-.04em;line-height:1}
.pr-day.dim{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;animation:none;border:1px solid rgba(255,255,255,.2)}
@keyframes prDay{0%,100%{box-shadow:0 12px 36px -10px rgba(255,255,255,.45)}50%{box-shadow:0 12px 48px -6px rgba(255,255,255,.8)}}
.pr-trial{display:inline-flex;align-items:center;gap:8px;margin:14px 0 20px;font-size:13.5px;font-weight:700;color:#fff}
.pr-trial i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18)}
html.lite .pr-day{animation:none}
html.lite .hw-btn{animation:none}
@media (hover:hover) and (pointer:fine) and (max-width:1279px){
  .nav-links:hover{transform:scale(1.12)}   /* 1.25 would run into the logo and the buttons on narrow desktops */
}
.hero-veil{position:absolute;inset:0;z-index:6;background:#000;opacity:0;visibility:hidden;pointer-events:none}

/* NUMBERS strip: the labels are as loud as the numbers (user: "nobody can read them", 2026-09-26) */
.numbers .stat{display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);padding:clamp(56px,10vh,110px) var(--pad)}
.numbers .stat b{font-size:clamp(84px,10vw,170px)}
.numbers .stat span{position:relative;display:block;padding-top:18px;max-width:11ch;color:#fff;font-weight:700;
  font-size:clamp(24px,2.4vw,40px);line-height:1.02;letter-spacing:-.03em}
.numbers .stat span::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;border-radius:2px;background:#fff}
.numbers .stat:last-child{background:#f1f0ec;color:#0b0b0b}
.numbers .stat:last-child span{color:#0b0b0b}
.numbers .stat:last-child span::before{background:#0b0b0b}
@media (max-width:1000px){
  .numbers .stat span{font-size:clamp(22px,6vw,30px)}
  .numbers .stat b{font-size:clamp(70px,20vw,120px)}
}


/* Short wide screens (short laptop windows, a tablet on its side): the hero title follows the height
   too, so it clears the nav. */
.nav-links a{white-space:nowrap}
@media (min-width:1001px) and (max-height:640px){
  .nav{padding-top:10px;padding-bottom:10px}
  .hero-title{font-size:min(15.5vw,27vh)}
  .kicker{margin-bottom:1vh}
  .hero-bottom{margin-top:3vh;gap:14px}
  .blob{width:min(50vw,720px,92vh)}
  .c3,.c4{display:none}   /* the lower two cards would sit on the tagline */
}

/* WINDOWS DOWNLOAD overlay (index.html #wdl, main.js "Windows download") */
.wdl{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,90px);padding:clamp(24px,6vw,110px);color:#f4f4f2}
.wdl[hidden]{display:none}
.wdl-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 50%,#161616 0%,#050505 55%,#000 100%)}
.wdl-x{position:absolute;top:22px;right:26px;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .25s,transform .25s}
.wdl-x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.wdl-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(260px,50vh,520px)}
.wdl-mark{position:absolute;top:50%;left:50%;width:clamp(120px,14vw,190px);aspect-ratio:1;translate:-50% -60%;display:grid;grid-template-columns:1fr 1fr;gap:7%}
.wdl-mark i{display:block;background:#fff;border-radius:6%;box-shadow:0 0 40px rgba(255,255,255,.35)}
.wdl-laptop{width:min(100%,520px);overflow:visible;opacity:0}
.wdl-laptop .wl-lid,.wdl-laptop .wl-base{fill:none;stroke:#f4f4f2;stroke-width:2.2;stroke-linejoin:round}
.wdl-laptop .wl-screen{fill:#0c0c0c;stroke:rgba(255,255,255,.14)}
.wdl-laptop .wl-logo rect{fill:#fff}.wdl-laptop .wl-logo circle{fill:#000}
.wdl-laptop .wl-bar{fill:rgba(255,255,255,.14)}
.wdl-laptop .wl-fill{fill:#fff;transform-box:fill-box;transform-origin:left center}
.wdl-status{margin-top:20px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.12em;color:#9b9b97;text-transform:uppercase;opacity:0}
.wdl-panel{position:relative;z-index:2;max-width:560px}
.wdl-tag{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.28em;color:#9b9b97}
.wdl-tag svg{width:15px;height:15px;color:#fff}
.wdl-h{margin:18px 0 26px;font-size:clamp(40px,5.2vw,84px);line-height:.95;letter-spacing:-.045em;font-weight:700}
.wdl-h em{font-style:normal;background:#fff;color:#000;border-radius:999px;padding:0 .22em .04em}
.wdl-h.small{font-size:clamp(34px,8vw,52px);margin:0 0 16px}
.wdl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.wdl-steps li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)}
.wdl-steps b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#000;font-size:15px}
.wdl-steps strong{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:4px}
.wdl-steps span{color:#a9a9a5;font-size:14.5px;line-height:1.45}
.wdl-steps em{font-style:normal;color:#fff;font-weight:700}
.wdl-ss{position:relative;margin-top:12px;width:min(100%,330px);border-radius:10px;overflow:hidden;background:#1d5fbf;color:#fff;font-size:11.5px;line-height:1.35;box-shadow:0 20px 50px -20px rgba(29,95,191,.8)}
.wdl-ss .ss-head{padding:12px 14px 4px;font-size:15px;font-weight:700}
.wdl-ss .ss-body{padding:0 14px 12px;color:#dbe7fb}
.wdl-ss .ss-body u{display:block;margin-top:6px;color:#fff;text-underline-offset:2px}
.wdl-ss .ss-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;background:#174f9f}
.wdl-ss .ss-foot span{padding:5px 12px;border:1px solid rgba(255,255,255,.5);font-size:11px}
.wdl-ss .ss-run{opacity:0}
.wdl-ss .ss-cursor{position:absolute;left:60%;top:30%;width:14px;height:20px;background:#fff;clip-path:polygon(0 0,0 100%,28% 74%,48% 100%,62% 94%,42% 68%,78% 68%);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.wdl-foot{margin-top:22px;font-size:13.5px;color:#8d8d8a}
.wdl-foot a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:6px}
.wdl-phone{display:none;position:relative;z-index:2;max-width:460px}
.wdl-p{color:#a9a9a5;font-size:16px;line-height:1.5;margin:0 0 22px}
.wdl-copy{padding:14px 24px;border-radius:999px;border:0;background:#fff;color:#000;font:700 15px/1 "Make Yourself Sans",Arial,sans-serif;cursor:pointer}
.wdl.is-phone{grid-template-columns:1fr;place-items:center;align-content:center;text-align:center}
.wdl.is-phone .wdl-stage,.wdl.is-phone .wdl-panel{display:none}
.wdl.is-phone .wdl-phone{display:block}
@media (max-width:900px){
  .wdl{grid-template-columns:1fr;align-content:start;overflow-y:auto;padding:80px 20px 40px}
  .wdl-stage{min-height:220px}
  .wdl-laptop{width:min(100%,340px)}
  .wdl-status{font-size:11px;letter-spacing:.05em;text-align:center}
}

/* PHONES AND SMALL SCREENS (2026-10-02). The narrow layout is the phone layout again - no "turn your
   phone" gate, no widened viewport. What follows makes it hold on short screens (360x640) and on a
   phone lying on its side (wide but only 320-430 px tall), where the pinned full-screen sections
   used to run out of height. */
@media (max-width:1000px){
  /* the hero starts under the nav, so its first screen is not pushed below the fold by the nav */
  .hero{margin-top:-71px}
  .kicker{font-size:11px;letter-spacing:.2em;text-align:center;white-space:nowrap}
  #blob{width:min(64vw,30vh);top:27%}
  .hero-bottom{margin-top:clamp(14px,3.5vh,6vh);gap:clamp(12px,2.2vh,22px)}
  .launchbar{flex-wrap:wrap;row-gap:2px}
  .mobile-menu{overflow-y:auto;padding-top:80px;padding-bottom:24px;justify-content:safe center}
  .mobile-menu a{font-size:clamp(28px,9vw,42px)}
  /* thumbs, not cursors: nothing smaller than 44 px to tap */
  .foot-cols a{padding:9px 0}
}
@media (max-width:560px){
  .kicker{font-size:10px;letter-spacing:.16em}
  .hero-sub{font-size:16px;max-width:34ch}
  .hero-note{font-size:12px}
  .pp-body{font-size:13px}
  .eco-promise{padding:13px 16px 12px}
}
/* short upright phones (iPhone SE, 360x640 Androids) */
@media (max-width:1000px) and (max-height:720px) and (orientation:portrait){
  .chips,.scroll-hint{display:none}
  #blob{top:24%}
  .hero-pin{padding-bottom:5vh}
  .hero-sub{font-size:15px}
  .store-btn{padding:9px 18px 9px 14px}
  .hero-actions{gap:10px}
  .hero-actions .btn-outline{padding:10px 18px;font-size:14px}
  .day-pin{padding-top:72px}
  .dpanel{gap:14px;padding-bottom:7vh}
  .dtime{margin-bottom:10px;padding:4px 10px;font-size:12px}
  .dtext h3{font-size:30px;margin-bottom:8px}
  .dtext p{font-size:14px}
  .dmock{zoom:.75}
  .day-dots{bottom:16px}
  .mind-in{padding:78px calc(var(--pad) + 18px) 40px;gap:12px}
  .mind-text h3{font-size:40px;margin:8px 0 6px}
  .mind-text > p:not(.mind-role){font-size:14px}
  .mind-widget{zoom:.8}
  .pp-body{display:none}
  .final{padding:100px var(--pad) 70px;gap:26px}
}
@media (max-width:1000px) and (max-height:600px) and (orientation:portrait){
  .dmock{zoom:.62}
  .mind-widget{zoom:.68}
}
/* a phone on its side */
@media (max-width:1000px) and (max-height:520px) and (orientation:landscape){
  .launchbar{display:none}
  .nav{padding-top:8px;padding-bottom:8px}
  .hero{margin-top:-59px}
  .hero-pin{justify-content:center;padding-top:59px;padding-bottom:0}
  .kicker,.chips,.scroll-hint,.hero-note{display:none}
  .hero-title{font-size:min(11.5vw,30vh);white-space:nowrap}
  .hero-title .line{display:inline-block}
  .hero-title .l1{margin-right:.12em}
  #blob{width:min(40vw,62vh);top:44%}
  .hero-bottom{margin-top:2vh;gap:12px}
  .hero-sub{font-size:14px;max-width:none}
  .store-btn{padding:8px 16px 8px 12px}
  .hero-actions .btn-outline{padding:10px 18px;font-size:14px}
  .hw-p,.hw-note{display:none}
  .hw-h{font-size:24px}
  .hw-btn{padding:10px 18px;font-size:14px}
  /* A day: copy on the left, the live mock on the right */
  .day-pin{padding-top:64px}
  .day-head .eyebrow{font-size:11px}
  .day-clock{font-size:20px}
  .dpanel{grid-template-columns:1fr 1fr;grid-template-rows:auto;align-items:center;gap:4vw;padding-bottom:28px}
  .dtext{justify-self:end}
  .dtime{margin-bottom:8px;padding:3px 9px;font-size:11px}
  .dtext h3{font-size:clamp(22px,8vh,34px);margin-bottom:8px}
  .dtext p{font-size:13px}
  .dmock{zoom:.6;justify-self:start}
  .day-dots{bottom:10px}
  /* portrait: the copy sits beside the head, not under it */
  .portrait-copy{left:var(--pad);right:auto;top:60px;bottom:10px;width:46vw;height:auto}
  .pc-step{justify-content:center}
  .portrait-copy h2{font-size:clamp(28px,11vh,48px)}
  .pc-sub{font-size:13px;margin-top:10px}
  /* The Five: name and copy left, widget right, on one screen */
  .mind-in{grid-template-columns:1fr 1fr;grid-template-rows:auto;align-items:center;gap:4vw;padding:66px calc(var(--pad) + 22px) 20px}
  .mind-text{grid-column:auto}
  .mind-text h3{font-size:clamp(30px,13vh,52px);margin:6px 0 4px}
  .mind-role{margin-bottom:8px;font-size:11px}
  .mind-text > p:not(.mind-role){font-size:13px}
  .mind-widget{zoom:.58}
  .mind-orb{display:none}
  /* film: the promise shrinks to its headline so the scene stays visible */
  .eco-promise{left:auto;right:var(--pad);top:62px;width:min(340px,44vw);padding:10px 14px}
  .pp-body,.pp-sign{display:none}
  .pp-head{font-size:20px}
  .eco-copy{padding-bottom:16px;gap:6px 30px}
  .eco-title{font-size:24px}
  .eco-lead{font-size:13px;max-width:52ch}
  .final{min-height:0;padding:84px var(--pad) 40px;gap:18px}
  .final-logo{width:44px}
  .final-title{font-size:30px}
  .features .phone-pin{height:100svh}
  .fstep{margin-bottom:60vh;padding:16px 18px}
  .fstep h3{font-size:24px;margin-bottom:8px}
  .fstep p{font-size:14px}
  .mobile-menu{flex-direction:row;flex-wrap:wrap;align-content:center;gap:4px 28px}
  .mobile-menu a{font-size:26px}
  .wdl{padding-top:60px}
}
.lb-tail{font-style:normal}
@media (max-width:560px){.lb-tail{display:none}.launchbar{flex-wrap:nowrap}}
@media (max-width:1000px) and (max-height:600px) and (orientation:portrait){.kicker{display:none}}
/* small laptops and tablets on their side (1001-1199 px): the nav and the lower hero cards ran into each other */
@media (min-width:1001px) and (max-width:1199px){
  .logo span{display:none}
  .nav-links a{font-size:15px;padding:9px 14px}
  .nav-cta .btn-white,.nav-cta .btn-outline{font-size:15px;padding:12px 18px}
  .c3,.c4{display:none}
}
@media (max-width:560px){
  .final-title{font-size:clamp(28px,9.2vw,40px)}
  .eco-title{font-size:clamp(24px,7.4vw,30px)}
}
@media (max-width:1000px) and (max-height:720px) and (orientation:portrait){#blob{width:min(64vw,26vh);top:23.5%}}

/* PHONE FEEDBACK ROUND (2026-10-01, seen on the Pixel) */
/* tour: the slide blobs hang over the slide's edge on purpose; the fit box and the slide cut them
   off in a straight line. Upright they may run into the next slide - the tour clips sideways only. */
.tour{overflow-x:clip}
@media (max-aspect-ratio:1/1){
  .tslide,.tfit{overflow:visible}
}
/* film, upright: the whole 16:9 picture, then the promise and the copy rise under it */
@media (max-width:1000px) and (max-aspect-ratio:1/1){
  .eco{height:260vh}
  .eco-stage{height:100svh;flex-direction:column;justify-content:center;align-items:stretch;gap:16px;padding:20px 0}
  .eco-video{position:relative;inset:auto;flex:none;height:auto;aspect-ratio:16/9;object-position:50% 50%}
  .eco-shade{display:none}
  .eco-promise{position:relative;left:auto;right:auto;top:auto;width:auto;margin:0 var(--pad);transform:translateY(calc((1 - var(--pv,0)) * 50px))}
  .eco-copy{padding:0 var(--pad);gap:8px}
  .eco-copy .eyebrow{margin-bottom:0}
}
/* footer: one compact block instead of a screen of links */
@media (max-width:560px){
  .footer{padding:34px var(--pad) 22px;gap:20px}
  .foot-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .foot-brand img{width:28px;margin:0}
  .foot-brand p{margin:0}
  .foot-cols{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:10px}
  .foot-cols h4{font-size:11px;margin-bottom:4px}
  .foot-cols a{padding:6px 0;font-size:14px}
  .foot-giant{margin-top:6px}
  .copy{padding-top:14px;font-size:12px}
}

/* PHONE FEEDBACK ROUND 2 (2026-10-01 late) */
@media (max-width:1000px){
  /* pricing: clearer glass, no frame, and the word behind it glows */
  .pricing .plan,.pricing .plan.featured{border:0;box-shadow:none;-webkit-backdrop-filter:blur(9px) saturate(1.15);backdrop-filter:blur(9px) saturate(1.15);
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02) 50%,rgba(255,255,255,.012))}
  .pricing .plan.featured{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03) 50%,rgba(255,255,255,.018))}
  .pr-giant,html.lite .pr-giant{filter:none;opacity:1;text-shadow:0 0 18px rgba(255,255,255,.9),0 0 46px rgba(255,255,255,.6),0 0 110px rgba(255,255,255,.4)}
}
/* film: less scrolling before it lets go */
@media (max-width:1000px) and (max-aspect-ratio:1/1){.eco{height:185vh}}

/* tour 4+5 on phones: held by sticky instead of a JS pin (tour.js panorama) */
.tslide.pano-native{height:calc(100svh + 130vmax);overflow:visible}
.pano-stick{position:sticky;top:0;height:100svh;overflow:clip}
@media (max-aspect-ratio:1/1){.pano-stick{overflow:visible}}

/* LOW tier (weak phones, html.low set by main.js; ?low=1 forces it): no glass, no glow */
html.low .pricing .plan,html.low .pricing .plan.featured{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(30,30,30,.9),rgba(14,14,14,.94))}
html.low .pr-giant{text-shadow:none;opacity:.5}
html.low .eco-promise{-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
html.low .fstep{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.9)}
/* small links get a thumb-sized touch area without changing the layout */
@media (max-width:1000px){
  .launchbar a,.hero-note a{position:relative}
  .launchbar a::after,.hero-note a::after{content:"";position:absolute;inset:-14px -10px}
  .foot-cols a{padding:8px 0}
}