:root{--vh:1vh}
@supports (height:1svh){:root{--vh:1svh}}
html{scroll-padding-top:56px}

h1,h2,h3{text-wrap:balance}
/* ============ story: hero + guided tour in one pinned 3D scene ============ */
.story{position:relative;height:calc((var(--travel,4.1) + 1) * 100 * var(--vh))}
.story-sticky{position:sticky;top:0;height:calc(100 * var(--vh));overflow:hidden;--ph:min(calc(78 * var(--vh)),780px);--stage-bg:var(--cream);--stage-ink:var(--ink)}
.story-bg{position:absolute;inset:0;background-color:var(--stage-bg);transition:background-color .7s ease}

.hero-copy{position:absolute;z-index:4;left:var(--edge);top:50%;width:min(56vw,800px);transform:translateY(calc(-50% + var(--cy,0) * 1px));will-change:transform}
.hero-copy h1 span,.hero-copy .lead,.hero-copy .platforms,.hero-copy .btn{opacity:var(--ca,1)}
.hero-copy h1{font-size:clamp(42px,5.7vw,92px);line-height:1.02;letter-spacing:-.045em;font-weight:700;color:var(--ink)}
.hero-copy h1 span{display:block;white-space:nowrap}
.hero-copy .lead{margin-top:clamp(18px,2vw,28px);font-size:clamp(18px,1.55vw,23px);line-height:1.45;color:var(--ink-2);max-width:29em;letter-spacing:-.012em}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(24px,2.6vw,36px)}
.platforms{font-size:15px;color:var(--ink-2)}

.rig{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2}
.rig-yaw{position:absolute;left:0;top:0;width:0;height:0;font-size:var(--ph);transform-style:preserve-3d;
  transform:perspective(2200px) translate3d(calc(var(--x,0) * 1vw),calc(var(--y,0) * var(--vh)),0) scale(var(--sc,1)) rotateX(calc(var(--pitch,0) * 1deg - var(--my,0) * 5deg)) rotateY(calc(var(--yaw,0) * 1deg + var(--mx,0) * 7deg));
  will-change:transform}
.bob{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-.006em) rotateZ(-.4deg)}50%{transform:translateY(.008em) rotateZ(.5deg)}}

.floor{position:absolute;left:-.32em;top:-.32em;width:.64em;height:.64em;border-radius:50%;background:radial-gradient(closest-side,rgba(27,26,51,.30),rgba(27,26,51,.12) 55%,rgba(27,26,51,0));transform:translateY(.62em) rotateX(90deg);opacity:var(--fo,1)}

/* ---- the 3D phone ---- */
.phone3d{position:absolute;left:-.239em;top:-.5em;width:.478em;height:1em;transform-style:preserve-3d}
.pe{position:absolute;inset:0;border-radius:.078em;background:#1A1B45;transform:translateZ(calc(var(--i) * -.0012em))}
.pe:nth-child(3n){background:#24265A}
.pe:nth-child(3n+1){background:#14153A}
.pb{position:absolute;inset:0;border-radius:.078em;background:#0C0D2A;transform:translateZ(-.0305em)}
.pf{position:absolute;inset:0;border-radius:.078em;background:linear-gradient(135deg,#3A3D78 0%,#1F2054 42%,#14153A 100%);transform:translateZ(.0006em);box-shadow:inset 0 0 0 .002em rgba(255,255,255,.28)}
.ph-screen{position:absolute;inset:.0165em;border-radius:.062em;transform-style:preserve-3d;transform:translateZ(.0016em)}

/* ---- floating objects ---- */
.obj{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none;transform:translate3d(var(--ox),var(--oy),var(--oz)) scale(var(--s,1))}
.objin{transform-style:preserve-3d;animation:float 6.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-.012em) rotateZ(-3deg)}50%{transform:translateY(.014em) rotateZ(3deg)}}
.o-coin{--ox:-.33em;--oy:-.29em;--oz:.15em}
.o-check{--ox:.37em;--oy:.1em;--oz:.1em}
.o-book{--ox:-.34em;--oy:.31em;--oz:.1em}
.o-toast{--ox:.33em;--oy:-.33em;--oz:.22em}
.o-check .objin{animation-delay:-2s}
.o-book .objin{animation-delay:-4s}

.coin{position:absolute;left:-.085em;top:-.085em;width:.17em;height:.17em;transform-style:preserve-3d;animation:coin 9s linear infinite}
@keyframes coin{from{transform:rotateX(14deg) rotateY(0)}to{transform:rotateX(14deg) rotateY(360deg)}}
.coin .cl{position:absolute;inset:0;border-radius:50%;background:#C9570F;transform:translateZ(calc((var(--i) - 7) * .0012em))}
.coin .cl:nth-child(even){background:#B94C0A}
.coin .cf{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.1em;color:#FFF3E2;background:radial-gradient(circle at 34% 28%,#FFB878,#F4731C 52%,#D55A0C);box-shadow:inset 0 0 0 .0085em rgba(255,255,255,.4),inset 0 0 .022em rgba(0,0,0,.2)}
.coin .cf.f{transform:translateZ(calc(var(--ph) * .0094))}
.coin .cf.b{transform:rotateY(180deg) translateZ(calc(var(--ph) * .0094))}

.chk{position:absolute;left:-.07em;top:-.07em;width:.14em;height:.14em;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(10deg)}
.chk .cl{position:absolute;inset:0;border-radius:.036em;background:#16299A;transform:translateZ(calc((var(--i) - 6) * .0013em))}
.chk .cl:nth-child(even){background:#1B31A6}
.chk .cf{position:absolute;inset:0;border-radius:.036em;display:grid;place-items:center;background:linear-gradient(145deg,#5470F2,#2340C8 58%,#1B33AE);transform:translateZ(.0082em);box-shadow:inset 0 0 0 .0055em rgba(255,255,255,.3)}
.chk .cf svg{width:.082em;height:.082em;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.bk{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateY(-32deg) rotateX(10deg)}
.bk .f{position:absolute;left:50%;top:50%;backface-visibility:hidden}
.bk .front,.bk .back{width:.15em;height:.2em;margin:-.1em 0 0 -.075em;border-radius:.006em .014em .014em .006em;background:radial-gradient(circle at 30% 22%,#A02A4F,#7A1F3D 55%,#5C1530)}
.bk .front{transform:translateZ(.0225em)}
.bk .back{transform:rotateY(180deg) translateZ(.0225em)}
.bk .front::before{content:"";position:absolute;left:.012em;top:0;bottom:0;width:.0035em;background:rgba(0,0,0,.2)}
.bk .front::after{content:"";position:absolute;right:0;top:.07em;width:.032em;height:.034em;background:var(--orange);border-radius:.004em 0 0 .004em}
.bk .front svg{position:absolute;left:50%;top:44%;width:.048em;height:.048em;margin:-.024em 0 0 -.024em;stroke:#FBF4E4;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.bk .right,.bk .left{width:.045em;height:.2em;margin:-.1em 0 0 -.0225em}
.bk .right{transform:rotateY(90deg) translateZ(.075em);background:repeating-linear-gradient(0deg,#F7EEDB 0 .004em,#DCCDB0 .004em .0055em)}
.bk .left{transform:rotateY(-90deg) translateZ(.075em);background:#4F1126}
.bk .top,.bk .bottom{width:.15em;height:.045em;margin:-.0225em 0 0 -.075em}
.bk .top{transform:rotateX(90deg) translateZ(.1em);background:repeating-linear-gradient(90deg,#F7EEDB 0 .004em,#DCCDB0 .004em .0055em)}
.bk .bottom{transform:rotateX(-90deg) translateZ(.1em);background:#E3D5B8}

.tst{position:absolute;left:-.12em;top:-.03em;width:.24em;height:.062em;border-radius:.031em;background:var(--ink);color:var(--cream);display:flex;align-items:center;gap:.013em;padding:0 .018em 0 .016em;font-weight:650;font-size:max(13px,.0215em);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 .012em .03em rgba(27,26,51,.28)}
.tdot{flex:none;width:.034em;height:.034em;border-radius:50%;background:var(--orange)}

/* ---- text of the guided tour ---- */
.tour{position:absolute;inset:0;z-index:4;pointer-events:none}
.ch{position:absolute;left:var(--edge);top:50%;width:min(40vw,540px);color:var(--stage-ink);transform:translateY(calc(-50% + var(--ty,40) * 1px));transition:color .7s ease;will-change:transform,opacity}
.ch-r{left:auto;right:var(--edge)}
.ch h2{font-size:clamp(36px,4.8vw,72px);line-height:1.03;letter-spacing:-.042em;font-weight:700}
.ch p{margin-top:clamp(14px,1.5vw,22px);font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:25em;opacity:calc(var(--co,0) * .88);letter-spacing:-.01em}
.ch h2{opacity:var(--co,0)}
.exit{position:absolute;left:50%;bottom:calc(9 * var(--vh));width:min(90vw,26em);text-align:center;font-size:clamp(22px,2.4vw,34px);line-height:1.2;font-weight:600;letter-spacing:-.03em;color:var(--stage-ink);opacity:0;transform:translateX(-50%) translateY(calc(var(--ty,30) * 1px))}
.cue{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);opacity:var(--cu,1)}
.cue i{width:2px;height:30px;background:var(--ink-2);border-radius:2px;transform-origin:top;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ============ real 3D (WebGL) ============ */
.gl-host{position:absolute;inset:0;z-index:2;pointer-events:none}
.try-stage{position:relative}
.try-stage .gl-host{z-index:1}
.gl .rig,.gl .demo-rig{display:none}
.gl .try-stage{min-height:min(calc(84 * var(--vh)),760px);perspective:none}
.gl .ph-screen{inset:auto;transform:none;will-change:transform}
.ph-screen input,.ph-screen textarea{-webkit-user-select:text;user-select:text}

/* ============ the live demo ============ */
.try{background:var(--sand);padding:clamp(84px,10vw,150px) 0}
.try-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,100px);align-items:center}
.try-copy h2{font-size:clamp(40px,5.4vw,86px);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.lead{font-size:clamp(18px,1.55vw,23px);line-height:1.45;color:var(--ink-2);letter-spacing:-.012em;max-width:29em}
.try-copy .lead{margin-top:clamp(16px,1.8vw,26px)}
.missions{list-style:none;padding:0;margin:clamp(26px,3vw,42px) 0 0;display:grid;gap:10px}
.mission{width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:20px 24px;border-radius:26px;background:var(--cream);transition:background-color .35s,color .35s,transform .25s cubic-bezier(.2,.8,.2,1)}
.mission:hover{transform:translateX(4px)}
.m-n{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.03em}
.m-t{grid-column:1;font-size:16px;line-height:1.4;color:var(--ink-2);max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .35s ease}
.mission.on{background:var(--blue);color:var(--cream)}
.mission.on .m-t{max-height:60px;opacity:.9;color:var(--cream)}
.m-ok{grid-row:1;grid-column:2;width:30px;height:30px;border-radius:50%;background:var(--green);opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1);position:relative}
.m-ok::after{content:"";position:absolute;left:10px;top:6px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(40deg)}
.mission.done .m-ok{opacity:1;transform:none}
.again{margin-top:20px;font-size:15px;font-weight:600;color:var(--blue);padding:10px 4px;border-radius:8px}
.again:hover{text-decoration:underline}
.try-stage{display:grid;place-items:center;min-height:calc(88 * var(--vh));perspective:2400px}
.demo-rig{--ph:min(calc(80 * var(--vh)),780px);font-size:var(--ph);position:relative;width:.478em;height:1em;transform-style:preserve-3d;transform:rotateX(calc(var(--tx,0) * 1deg)) rotateY(calc(var(--ty,0) * 1deg));will-change:transform}
.demo-rig .phone3d{left:0;top:0}
.demo-rig::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:-.05em;height:.07em;border-radius:50%;background:radial-gradient(closest-side,rgba(27,26,51,.3),rgba(27,26,51,0));transform:translateZ(-.04em)}
.nojs{font-size:18px}
.js .nojs{display:none}

/* ============ privacy ============ */
.privacy{background:var(--blue);color:var(--cream);padding:clamp(90px,11vw,170px) 0;overflow:hidden}
.priv-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(36px,6vw,100px);align-items:center}
.privacy h2{font-size:clamp(36px,4.5vw,72px);line-height:1.03;letter-spacing:-.045em;font-weight:700}
.privacy .lead{margin:clamp(18px,2vw,28px) 0 clamp(26px,3vw,40px);color:var(--cream);opacity:.9}
.stack{perspective:1700px;height:clamp(430px,44vw,640px);display:grid;place-items:center}
.stack-in{position:relative;width:min(100%,470px);height:100%;transform-style:preserve-3d;transform:rotateX(calc(10deg - var(--sy,0) * 5deg)) rotateY(calc(-22deg + var(--sx,0) * 9deg));will-change:transform}
.pc{position:absolute;left:0;right:0;padding:30px 32px 32px;border-radius:32px;color:var(--ink);box-shadow:0 30px 60px -28px rgba(8,16,80,.65)}
.pc svg{width:40px;height:40px;margin-bottom:34px}
.pc h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;font-weight:700;line-height:1.1}
.pc p{margin-top:8px;font-size:17px;line-height:1.45;max-width:20em}
.pc1{top:0;background:var(--cream);transform:translateZ(120px)}
.pc2{top:34%;background:var(--sand);transform:translateZ(0)}
.pc3{top:68%;background:var(--blue-deep);color:var(--cream);transform:translateZ(-120px)}

/* ============ get ============ */
.get{background:var(--cream);padding:clamp(90px,11vw,160px) 0;text-align:center}
.get-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.get h2{font-size:clamp(38px,5.7vw,90px);line-height:1.03;letter-spacing:-.045em;font-weight:700;max-width:13em;margin:0 auto}
.get .lead{margin:clamp(16px,2vw,26px) auto 0;text-align:center}
.stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:780px;margin:clamp(34px,4vw,56px) auto clamp(28px,3vw,40px)}
.store{border-radius:36px;padding:clamp(26px,3vw,40px);background:var(--ink);color:var(--cream);text-align:left;display:grid;gap:6px;min-height:200px;align-content:end}
.store:nth-child(2){background:var(--wine)}
.s-n{font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.s-os{font-size:16px;font-weight:500;opacity:.85}
.s-st{margin-top:10px;justify-self:start;font-size:14px;font-weight:600;padding:7px 16px;border-radius:999px;background:var(--orange);color:var(--ink)}

/* ============ faq ============ */
.faq{background:var(--alabaster);padding:clamp(80px,10vw,150px) 0}
.faq-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq h2{font-size:clamp(38px,4.8vw,74px);line-height:1.03;letter-spacing:-.045em;font-weight:700;position:sticky;top:96px}
.faq-list{display:grid;gap:10px}
details{background:var(--cream);border-radius:28px;transition:background-color .35s,color .35s}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:78px;padding:20px 30px;font-size:clamp(18px,1.5vw,22px);font-weight:600;letter-spacing:-.022em;border-radius:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) center/100% 3px no-repeat,linear-gradient(currentColor,currentColor) center/3px 100% no-repeat;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
details[open]{background:var(--blue);color:var(--cream)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 30px 28px;font-size:17px;line-height:1.55;max-width:52ch;opacity:.95}

/* ============ entrances ============ */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ============ the MyDay app, drawn in HTML (sizes follow the screen width) ============ */
.mdapp{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d}
.screen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:var(--milk)}
.screen.x{overflow:visible;transform-style:preserve-3d;background:none}
.layer{position:absolute;inset:0;container-type:inline-size;border-radius:inherit;pointer-events:none}
.l-bg{background:var(--milk)}
.lc{position:absolute;inset:0;font-family:var(--font);font-size:3.7cqw;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.layer button,.layer input,.layer textarea,.vscroll,.scrim,.sheet{pointer-events:auto}
.mdapp.ro *,.mdapp.ro .layer{pointer-events:none!important}
.l-bg .lc::before{content:"";position:absolute;left:50%;top:2.4cqw;width:5cqw;height:5cqw;margin-left:-2.5cqw;border-radius:50%;background:#14142B}
.status{position:absolute;left:0;right:0;top:0;height:10cqw;padding:3.3cqw 7cqw 0;display:flex;justify-content:space-between;align-items:flex-start;font-size:3.2cqw;font-weight:650}
.status-i{display:flex;gap:1.4cqw;align-items:center;height:3.2cqw}
.status-i svg{height:2.6cqw;width:auto}
.appbar{position:absolute;left:0;right:0;top:10.5cqw;height:12cqw;padding:0 5cqw;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:2cqw;font-weight:800;font-size:5cqw;letter-spacing:-.035em;color:var(--blue-ink)}
.logo img{width:7.8cqw;height:7.8cqw;border-radius:2.3cqw}
.abtns{display:flex;gap:4.2cqw;color:var(--ink-2)}
.abtns svg{width:5.6cqw;height:5.6cqw}
.vscroll{position:absolute;left:0;right:0;top:23cqw;bottom:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:0 5cqw 30cqw}
.vscroll::-webkit-scrollbar{display:none}
.screen.swap .vscroll{animation:swap .55s cubic-bezier(.2,.8,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(3cqw) scale(.985)}to{opacity:1;transform:none}}

.tabbar{position:absolute;left:3.2cqw;right:3.2cqw;bottom:3.4cqw;height:15.6cqw;border-radius:8cqw;background:rgba(255,251,244,.96);display:flex;padding:1.4cqw;outline:.3cqw solid rgba(27,26,51,.1);outline-offset:-.3cqw}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7cqw;border-radius:6.6cqw;color:var(--ink-2);font-size:2.6cqw;font-weight:600;letter-spacing:0;transition:background-color .3s,color .3s}
.tab svg{width:5.6cqw;height:5.6cqw}
.tab.on{background:var(--blue);color:#fff;box-shadow:0 .6cqw 0 rgba(15,28,110,.35)}
.fab{position:absolute;right:5cqw;bottom:22cqw;display:flex;align-items:center;gap:2cqw;height:13cqw;padding:0 6cqw 0 4.6cqw;border-radius:6.5cqw;background:var(--blue);color:#fff;font-size:3.9cqw;font-weight:700;box-shadow:0 .8cqw 0 rgba(15,28,110,.35);animation:rise .4s cubic-bezier(.2,.8,.2,1)}
.fab svg{width:5.4cqw;height:5.4cqw}

.card{display:block;width:100%;text-align:left;background:#fff;border-radius:5cqw;padding:4cqw;margin-bottom:3cqw;outline:.3cqw solid rgba(27,26,51,.07);outline-offset:-.3cqw}
.hdate{font-size:3cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:1cqw}
.hgreet{font-size:8.2cqw;line-height:1.05;font-weight:800;letter-spacing:-.045em;color:var(--blue-ink);margin:1.6cqw 0 4cqw}
.rcard{display:flex;align-items:center;gap:4.4cqw;padding:3.8cqw 4.4cqw}
.rtext{display:grid;gap:.4cqw}
.rtext b{font-size:4cqw;font-weight:600}
.rtext small{font-size:3.2cqw;color:var(--ink-2)}
.rtext em{font-style:normal;font-size:3.2cqw;font-weight:600;color:var(--orange-deep)}
.rtext .big{font-size:6.4cqw;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ring{position:relative;width:17cqw;height:17cqw;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rt{fill:none;stroke:#EDE6D5;stroke-width:3.6}
.rv{fill:none;stroke-width:3.6;stroke-linecap:round;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1)}
.ring.blue .rv{stroke:var(--blue)}.ring.orange .rv{stroke:var(--orange)}.ring.green .rv{stroke:var(--green)}
.ri{position:absolute;inset:0;display:grid;place-items:center;font-size:4cqw;font-weight:800}
.ri svg{width:6.4cqw;height:6.4cqw;transform:none;stroke:var(--ink-2);fill:none}
.sec{display:flex;justify-content:space-between;align-items:center;margin:5cqw 0 2.6cqw;font-size:4.4cqw;font-weight:700;letter-spacing:-.02em}
.sec button{font-size:3.4cqw;font-weight:600;color:var(--blue)}
.chips{display:flex;gap:2cqw;margin:1cqw 0 3.4cqw;overflow:hidden}
.chips span{flex:none;padding:2.3cqw 4cqw;border-radius:5cqw;background:#fff;font-size:3.3cqw;font-weight:600;color:var(--ink-2);outline:.3cqw solid rgba(27,26,51,.07);outline-offset:-.3cqw}
.chips span.on{background:#DCE3FB;color:var(--blue-ink);outline:none}
.mnav{display:flex;justify-content:center;align-items:center;gap:6cqw;font-size:4cqw;margin:0 0 3.4cqw;color:var(--ink-2)}
.mnav b{color:var(--ink);font-weight:600}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.st{margin:0;display:grid;gap:.8cqw;padding:3.6cqw}
.sl{display:flex;align-items:center;gap:1.6cqw;font-size:3.2cqw;font-weight:600;color:var(--ink-2)}
.sl svg{width:3.8cqw;height:3.8cqw}
.sl .up{color:var(--orange-deep)}.sl .dn{color:var(--green)}
.st strong{font-size:5.8cqw;font-weight:800;letter-spacing:-.035em;line-height:1.15}
.st .spent{color:var(--orange-deep)}.st .inc{color:var(--green)}
.st small{font-size:3cqw;color:var(--ink-2)}
.bud{display:grid;gap:2cqw}
.bh{display:flex;justify-content:space-between;align-items:baseline;font-size:3.5cqw}
.bh b{font-size:4cqw;font-weight:700}
.bh span{color:var(--ink-2);font-weight:600}
.bar{display:block;height:2.6cqw;border-radius:2cqw;background:#EDE6D5;overflow:hidden}
.bar i{display:block;height:100%;border-radius:2cqw;background:var(--green);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.bar.warn i{background:var(--orange)}
.bud small{font-size:3.1cqw;font-weight:600}
.bud small.ok{color:var(--green)}.bud small.over{color:var(--orange-deep)}
.elist{display:grid;gap:2cqw}
.erow{display:grid;grid-template-columns:auto 1fr auto;gap:3.4cqw;align-items:center;background:#fff;border-radius:4.4cqw;padding:3cqw 3.6cqw;outline:.3cqw solid rgba(27,26,51,.055);outline-offset:-.3cqw}
.dot{width:9.4cqw;height:9.4cqw;border-radius:50%;display:grid;place-items:center;color:#fff}
.dot svg{width:4.8cqw;height:4.8cqw}
.emain{display:grid;gap:.3cqw}
.emain b{font-size:3.9cqw;font-weight:650}
.emain small{font-size:3cqw;color:var(--ink-2)}
.eamt{font-size:3.9cqw;font-weight:800;letter-spacing:-.02em}
.eamt.in{color:var(--green)}
.erow.fresh{animation:fresh 1.6s ease backwards}
@keyframes fresh{0%{opacity:0;transform:translateY(-4cqw) scale(.96);background:#DCE3FB}25%{opacity:1;transform:none}100%{background:#fff}}

.tlist{display:grid;gap:2.4cqw}
.trow{display:flex;align-items:center;gap:3.6cqw;width:100%;text-align:left;background:#fff;border-radius:4.6cqw;padding:3.6cqw 4cqw;outline:.3cqw solid rgba(27,26,51,.055);outline-offset:-.3cqw}
.ro-row{margin-bottom:0}
.cb{flex:none;width:6.4cqw;height:6.4cqw;border-radius:50%;border:.55cqw solid var(--ink-2);display:grid;place-items:center;transition:background-color .3s,border-color .3s}
.cb svg{width:4cqw;height:4cqw;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.3);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.tmain{display:grid;gap:.5cqw;flex:1;min-width:0}
.tmain b{font-size:3.9cqw;font-weight:650;line-height:1.25;transition:color .3s}
.tmain small{font-size:3.1cqw;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:1.2cqw;align-items:center}
.tmain small i{font-style:normal;color:var(--blue)}
.tmain small.late{color:var(--orange-deep)}
.mi{width:3.3cqw;height:3.3cqw}
.flag{flex:none;width:4.8cqw;height:4.8cqw}
.flag.red{color:#D1341B}.flag.amber{color:#E79A12}
.trow.done .cb{background:var(--blue);border-color:var(--blue)}
.trow.done .cb svg{opacity:1;transform:none}
.trow.done b{text-decoration:line-through;color:var(--ink-2)}
.trow.pop{animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
.trow.fresh{animation:fresh 1.6s ease backwards}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}

.jlock{position:relative;height:150cqw;perspective:260cqw;margin-top:1cqw}
.jpage{position:absolute;inset:0 0 auto 0;height:138cqw;border-radius:5cqw;background:#fff;display:grid;place-content:center;text-align:center;gap:1cqw;outline:.3cqw solid rgba(27,26,51,.06);outline-offset:-.3cqw}
.jpage b{font-size:5cqw}.jpage small{color:var(--ink-2);font-size:3.4cqw}
.jcover{position:absolute;inset:0 0 auto 0;height:138cqw;border-radius:5cqw;background:#7A1F3D;color:#FBF4E4;display:flex;flex-direction:column;align-items:center;padding:7cqw 6cqw 0;transform-origin:left center;transition:transform .95s cubic-bezier(.6,0,.2,1),opacity .4s .6s;outline:none}
.jlock.opening .jcover{transform:rotateY(-118deg);opacity:0}
.jc-lock{display:grid;place-items:center;width:14cqw;height:14cqw;border-radius:50%;background:rgba(251,244,228,.14)}
.jc-lock svg{width:7cqw;height:7cqw}
.jcover b{font-size:5cqw;margin-top:3.4cqw;letter-spacing:-.025em}
.jcover small{font-size:3.1cqw;opacity:.85;margin-top:1.2cqw;text-align:center;max-width:56cqw;line-height:1.35}
.pdots{display:flex;gap:3cqw;margin:4.4cqw 0 4cqw}
.pdots i{width:3.4cqw;height:3.4cqw;border-radius:50%;border:.5cqw solid #FBF4E4;transition:background-color .2s}
.pdots i.on{background:#FBF4E4}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw;width:100%}
.key{height:11.4cqw;border-radius:3.4cqw;background:#fff;color:var(--ink);font-size:4.8cqw;font-weight:650;display:grid;place-items:center;transition:background-color .15s}
.key:active{background:#E8DFC8}
.key svg{width:5.4cqw;height:5.4cqw}
.jlock .key{background:rgba(251,244,228,.16);color:#FBF4E4;height:10.6cqw}
.jlock .key:active{background:rgba(251,244,228,.3)}
.jh{font-size:7cqw;font-weight:800;letter-spacing:-.04em;margin:1cqw 0 3.4cqw}
.streak{display:flex;align-items:center;gap:4cqw}
.streak .flame{width:9cqw;height:9cqw;color:var(--orange)}
.streak b{font-size:4.4cqw;font-weight:700;display:block}
.streak small{font-size:3.2cqw;color:var(--ink-2)}
.jlist{display:grid;gap:2.6cqw}
.jrow{display:grid;grid-template-columns:auto 1fr auto;gap:4cqw;align-items:start;background:#fff;border-radius:4.6cqw;padding:3.6cqw 4cqw;outline:.3cqw solid rgba(27,26,51,.055);outline-offset:-.3cqw}
.jd{display:grid;justify-items:center;line-height:1.1;min-width:8cqw}
.jd b{font-size:6.2cqw;font-weight:800;color:var(--blue-ink)}
.jd small{font-size:2.8cqw;font-weight:600;color:var(--ink-2)}
.jm{display:grid;gap:.8cqw;min-width:0}
.jm b{font-size:4.1cqw;font-weight:700}
.jb{font-size:3.3cqw;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jmood{width:7cqw;height:7cqw;color:var(--orange-deep)}
.jmood svg{width:100%;height:100%}
.jrow.fresh{animation:fresh 1.6s ease backwards}

.scrim{position:absolute;inset:0;background:rgba(27,26,51,.42);animation:fade .25s ease backwards}
@keyframes fade{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--milk);border-radius:6cqw 6cqw 0 0;padding:2.6cqw 5cqw 6cqw;animation:rise .38s cubic-bezier(.2,.8,.2,1) backwards;border-top:.4cqw solid rgba(27,26,51,.07)}
@keyframes rise{from{transform:translateY(100%)}}
.grab{width:10cqw;height:1.2cqw;border-radius:1cqw;background:#D8CFB9;margin:0 auto 3.4cqw}
.sheet h4{font-size:5cqw;font-weight:800;letter-spacing:-.03em;margin-bottom:3cqw}
.seg{display:flex;background:#EFE8D7;border-radius:5cqw;padding:1cqw;margin-bottom:3cqw}
.seg button{flex:1;height:9cqw;border-radius:4cqw;font-size:3.6cqw;font-weight:650;color:var(--ink-2);transition:background-color .25s,color .25s}
.seg button.on{background:var(--blue);color:#fff}
.amount{display:flex;justify-content:center;align-items:baseline;gap:1.4cqw;padding:1.6cqw 0 3cqw}
.amount .cur{font-size:7cqw;font-weight:700;color:var(--ink-2)}
.amount b{font-size:12cqw;font-weight:800;letter-spacing:-.05em;line-height:1}
.amount.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-2cqw)}40%,80%{transform:translateX(2cqw)}}
.cats{display:flex;flex-wrap:wrap;gap:2cqw;margin-bottom:3.4cqw}
.cat{display:flex;align-items:center;gap:1.6cqw;padding:2.1cqw 3.6cqw;border-radius:5cqw;background:#fff;font-size:3.3cqw;font-weight:650;outline:.3cqw solid rgba(27,26,51,.08);outline-offset:-.3cqw;transition:background-color .2s,color .2s}
.cat i{width:2.4cqw;height:2.4cqw;border-radius:50%}
.cat.on{background:var(--blue);color:#fff;outline:none}
.sheet .keys{margin-bottom:3.4cqw}
.sheet .key{height:10.4cqw}
.go{width:100%;height:12.6cqw;border-radius:6.4cqw;background:var(--orange);color:var(--ink);font-size:4cqw;font-weight:750;letter-spacing:-.015em}
.go:active{filter:brightness(.93)}
.fld{display:block;margin-bottom:3cqw}
.fld input,.fld textarea{width:100%;border:0;border-radius:4cqw;background:#fff;padding:3.4cqw 4cqw;font:inherit;font-size:3.9cqw;color:var(--ink);outline:.3cqw solid rgba(27,26,51,.1);outline-offset:-.3cqw;resize:none}
.fld input:focus,.fld textarea:focus{outline:.6cqw solid var(--blue);outline-offset:0}
.fld.bad{animation:shake .4s}
.moods{display:flex;justify-content:space-between;margin-bottom:3.6cqw}
.mood{width:11cqw;height:11cqw;border-radius:50%;padding:1.2cqw;background:#fff;color:var(--ink-2);outline:.3cqw solid rgba(27,26,51,.08);outline-offset:-.3cqw;transition:background-color .2s,color .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.mood svg{width:100%;height:100%}
.mood.on{background:var(--orange);color:var(--ink);transform:scale(1.12)}
.toastbox{position:absolute;left:0;right:0;top:24cqw;display:flex;justify-content:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:2.4cqw 4.6cqw;border-radius:5cqw;font-size:3.3cqw;font-weight:650;animation:drop .4s cubic-bezier(.2,.8,.2,1) backwards;box-shadow:0 .6cqw 0 rgba(0,0,0,.2)}
@keyframes drop{from{opacity:0;transform:translateY(-4cqw)}}
.glare{display:none}

/* ============ small screens ============ */
@media (max-width:980px){
  .try-in,.priv-in,.faq-in{grid-template-columns:minmax(0,1fr)}
  .faq h2{position:static}
  .try-stage{min-height:0;padding:10px 0 20px}
  .demo-rig{--ph:min(calc(78 * var(--vh)),calc((100vw - 40px) / .478),760px)}
  .stack{height:560px}
}
/* stacked story: phones, and tablets held upright (the page sets html.m) */
.m .story-sticky{--ph:min(calc(63 * var(--vh)),680px)}
.m .hero-copy{top:calc(56px + 4 * var(--vh));left:var(--gut);width:auto;right:var(--gut);transform:translateY(calc(var(--cy,0) * 1px))}
.m .hero-copy h1{font-size:clamp(34px,9.6vw,64px)}
.m .hero-copy .lead{font-size:clamp(16px,2.4vw,20px);margin-top:14px;max-width:34em}
.m .cta{margin-top:18px;gap:10px 18px}
.m .btn{min-height:50px;padding:0 24px}
.m .ch,.m .ch-r{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:calc(4.5 * var(--vh));transform:translateY(calc(var(--ty,40) * 1px))}
.m .ch h2{font-size:clamp(32px,9vw,56px)}
.m .ch p{font-size:clamp(16px,2.4vw,20px);max-width:32em}
.m .exit{bottom:calc(8 * var(--vh));font-size:clamp(21px,4.4vw,30px)}
.m .cue,.m .o-toast{display:none}
.m .o-coin{--ox:-.28em}.m .o-check{--ox:.3em}.m .o-book{--ox:-.28em}

/* a phone turned sideways: short and wide */
@media (max-height:520px) and (orientation:landscape){
  .hero-copy h1{font-size:clamp(28px,9vh,52px)}
  .hero-copy .lead{font-size:15px;margin-top:10px;max-width:26em}
  .cta{margin-top:14px}
  .btn{min-height:44px;font-size:15px;padding:0 22px}
  .platforms{font-size:13px}
  .ch h2{font-size:clamp(26px,8.6vh,48px)}
  .ch p{font-size:15px;margin-top:10px}
  .cue{display:none}
  .exit{font-size:clamp(18px,5vh,24px);bottom:calc(5 * var(--vh))}
  .try-stage{min-height:calc(96 * var(--vh))}
}
@media (max-width:820px){
  .stores{grid-template-columns:1fr}
  .store{min-height:150px}
  .stack{height:520px}
  .stack-in{width:calc(100% - 36px);transform:rotateX(calc(8deg - var(--sy,0) * 4deg)) rotateY(calc(-9deg + var(--sx,0) * 6deg))}
  .pc{padding:24px 26px 26px}
  .pc svg{margin-bottom:22px}
}
@media (max-width:520px){
  .summary,summary{padding:18px 22px}
  details p{padding:0 22px 24px}
}

/* ============ calm layout: reduced motion, or no script ============ */
.static .story,.no-js .story{height:auto}
.static .story-sticky,.no-js .story-sticky{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding-top:56px}
.static .story-bg,.no-js .story-bg,.static .cue,.no-js .cue{display:none}
.static .hero-copy,.no-js .hero-copy{position:relative;left:auto;top:auto;transform:none;width:auto;grid-column:1;grid-row:1;align-self:center;padding:40px 0 40px var(--edge)}
.static .rig{position:relative;left:auto;top:auto;width:auto;height:calc(86 * var(--vh));grid-column:2;grid-row:1}
.static .rig-yaw{left:50%;top:50%}
.no-js .rig{display:none}
.static .tour,.no-js .tour{position:static;grid-column:1 / -1;grid-row:2;pointer-events:auto}
.static .ch,.no-js .ch{position:static;transform:none;width:auto;--co:1;padding:clamp(64px,9vw,130px) var(--edge)}
.static .ch > *,.no-js .ch > *{max-width:640px}
.static .ch:nth-child(1),.no-js .ch:nth-child(1){background:var(--alabaster);color:var(--ink)}
.static .ch:nth-child(2),.no-js .ch:nth-child(2){background:var(--blue);color:var(--cream)}
.static .ch:nth-child(3),.no-js .ch:nth-child(3){background:var(--wine);color:var(--cream)}
.static .exit,.no-js .exit{position:static;transform:none;opacity:1;width:auto;max-width:none;text-align:left;padding:clamp(48px,7vw,90px) var(--edge);color:var(--ink)}
.no-js .story-sticky{grid-template-columns:minmax(0,1fr)}
@media (max-width:820px){
  .static .story-sticky{grid-template-columns:minmax(0,1fr)}
  .static .hero-copy{padding:30px var(--gut) 0}
  .static .rig{grid-column:1;grid-row:2;height:calc(66 * var(--vh))}
  .static .tour{grid-row:3}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bob,.objin,.coin,.cue i{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .mission,.tab,.sheet,.scrim,.fab,.toast{animation:none;transition:none}
}