*{box-sizing:border-box;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
:root{
  --ink:#0d0b12;--paper:#f2eee7;--paper2:#e9e4da;--mute:#8a8496;--peach:#f39a4b;--berry:#e4566c;
  --line:rgba(255,255,255,.12);--lineD:rgba(13,11,18,.14);
  --acc:#cdb6ff;--deep:#7c3aed;--tick:#d9f36b;
  --pad:clamp(20px,4vw,72px);
  --navh:clamp(60px,5.2vw,88px);
  --bottom:112px;               /* space the flavour switcher needs at the bottom of the stage */
  --safe-b:0px;                 /* mobile toolbar strip; bottom UI is lifted above it */
}
@supports (height:100lvh){:root{--safe-b:calc(100lvh - 100svh)}}
[data-flav=peach]{--acc:#ffc28a;--deep:#de7024;--tick:#ffc28a}
[data-flav=berry]{--acc:#ffb0bd;--deep:#d03e5a;--tick:#ffb0bd}

html{background:var(--ink)}
body{background:var(--paper);color:var(--ink);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
.wrap{width:100%;max-width:1680px;margin:0 auto;padding:0 var(--pad);position:relative}
.d{font-family:Anton,sans-serif;text-transform:uppercase;line-height:.9;font-weight:400;letter-spacing:-.005em}
.s{font-family:"Instrument Serif",serif;font-style:italic;text-transform:none;letter-spacing:-.01em;font-weight:400}
.m{font:500 clamp(10px,.72vw,12px)/1.4 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.acc{color:var(--acc);transition:color .6s}.acc2{color:var(--deep);transition:color .6s}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;background:var(--acc);color:var(--ink);font:600 14px Inter;white-space:nowrap;transition:background-color .6s,color .6s,transform .15s}
.pill:active{transform:scale(.96)}
.pill.sm{height:42px;padding:0 20px;font-size:13px}

/* ---------- reveals: CSS only, triggered once ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.wi{display:inline-block;transform:translateY(110%) rotate(4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 45ms)}
.in .wi{transform:none}
[data-r]{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 1s)}
[data-r].in{opacity:1;transform:none}

/* ---------- loader ---------- */
/* the show itself lives in splash.js; this is only the ink shown before it mounts */
#loader{position:fixed;inset:0;z-index:100;background:var(--ink)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--navh);color:#fff;transition:color .35s,background-color .35s}
.nav.ink{color:var(--ink)}
.nav.solid{background:rgba(242,238,231,.94)}
.navin{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{font:clamp(22px,1.7vw,30px) Anton;letter-spacing:.02em;justify-self:start;display:inline-flex;align-items:center;gap:clamp(8px,.7vw,12px)}
.lmk{width:calc(var(--navh) - 12px);height:calc(var(--navh) - 12px);display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover .lmk{transform:rotate(-14deg) scale(1.1)}
.logo sup{font:500 9px "JetBrains Mono";vertical-align:top;margin-left:4px;opacity:.6}
.links{display:flex;gap:clamp(22px,2.4vw,42px)}
.links button{position:relative;padding:6px 0}.links i{font-style:normal;opacity:.45;margin-right:6px}
.links button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.links button:hover::after,.links button.act::after{transform:scaleX(1)}
.nr{justify-self:end;display:flex;gap:16px;align-items:center}
.bag{height:36px;padding:0 14px;border-radius:99px;border:1px solid currentColor;display:flex;align-items:center;gap:8px}
.bag b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--acc);color:var(--ink);font:600 10px Inter;transition:background-color .6s,transform .3s}
.bag b.bump{transform:scale(1.35)}
.burger{display:none;width:36px;height:36px;position:relative}
.burger i{position:absolute;left:7px;right:7px;height:1.5px;background:currentColor;transition:transform .35s}
.burger i:first-child{top:13px}.burger i:last-child{top:21px}
.menu-open .burger i:first-child{transform:translateY(4px) rotate(45deg)}.menu-open .burger i:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:39;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.menu button{font:clamp(44px,12vw,72px)/1.05 Anton;text-transform:uppercase}
.menu .m{margin-top:28px;color:#7f7890}
.menu-open .menu{transform:none}
.menu-open .nav{color:#fff;background:transparent}

/* ---------- journey ---------- */
.journey{position:relative;height:460vh;background:var(--ink)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;touch-action:pan-y;color:#fff;-webkit-user-select:none;user-select:none}
.L{position:absolute;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.no-gl #gl{display:none}

/* flavour-swapped text: all three stacked in one grid cell, the active one shown */
.sw{display:grid}
.sw>*{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
[data-flav=citrus] .sw>[data-f=citrus],[data-flav=peach] .sw>[data-f=peach],[data-flav=berry] .sw>[data-f=berry]{opacity:1;transform:none;transition-delay:.08s;pointer-events:auto}

/* hero */
.hbg{z-index:1;background:var(--ink)}
.spot{position:absolute;left:var(--hx,50%);top:var(--hy,50%);width:min(1200px,170vw);aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;transition:opacity .9s}
.spot.citrus{background:radial-gradient(closest-side,rgba(124,58,237,.5),rgba(124,58,237,0) 75%)}
.spot.peach{background:radial-gradient(closest-side,rgba(243,154,75,.42),rgba(243,154,75,0) 75%)}
.spot.berry{background:radial-gradient(closest-side,rgba(228,86,108,.45),rgba(228,86,108,0) 75%)}
[data-flav=citrus] .spot.citrus,[data-flav=peach] .spot.peach,[data-flav=berry] .spot.berry{opacity:1}
.dialw{position:absolute;left:var(--hx,50%);top:var(--hy,50%);width:var(--dial,600px);height:var(--dial,600px);transform:translate(-50%,-50%)}
.dial{width:100%;height:100%;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.giant{position:absolute;left:0;bottom:-.13em;font:clamp(140px,23vw,440px)/1 Anton;color:#17131f;white-space:nowrap;will-change:transform}
.hfg{z-index:7;will-change:transform,opacity}
.hgrid{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:4vw;padding-top:var(--navh);padding-bottom:var(--bottom)}
.hcopy .eb{color:#7f7890}
.hcopy h1{font-size:clamp(56px,min(6.6vw,12vh),132px);margin-top:22px}
.hcopy h1 .s{font-size:1.12em;line-height:.8;color:var(--acc);transition:color .6s}
.hcopy p{color:#a59fb2;font-size:clamp(15px,1vw,17px);line-height:1.65;max-width:400px;margin-top:clamp(18px,3vh,32px)}
.acts{display:flex;gap:22px;margin-top:clamp(20px,3.4vh,36px);align-items:center}
.ulink{font:500 14px Inter;border-bottom:1px solid #fff6;padding-bottom:4px}
.hslot{width:min(26vw,380px);height:min(66vh,660px)}
.hspecs{justify-self:end;width:min(320px,100%)}
.spec{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:clamp(12px,2vh,18px) 0}
.spec:last-child{border-bottom:1px solid var(--line)}
.spec b{font:clamp(30px,2.6vw,46px)/1 Anton}.spec span{color:#a59fb2}
.hfoot{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 44px);display:flex;justify-content:space-between;color:#7f7890;pointer-events:none}

/* product */
.prod{z-index:2;background:#241044;color:#efe7ff;transform:translate3d(0,100%,0);will-change:transform;transition:background-color .7s,color .7s}
[data-flav=peach] .prod{background:#f39a4b;color:#3b1305}
[data-flav=berry] .prod{background:#e4566c;color:#3d0613}
.pbig{position:absolute;left:0;width:50%;top:50%;transform:translateY(-50%);text-align:center;font:clamp(160px,19vw,380px)/1 Anton;opacity:.08;pointer-events:none}
.pgrid{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:6vw;
  grid-template-rows:1fr repeat(6,auto) 1fr;
  grid-template-areas:"slot ." "slot top" "slot name" "slot tag" "slot notes" "slot prof" "slot buy" "slot .";
  padding-top:var(--navh);padding-bottom:var(--bottom)}
.pslot{grid-area:slot;align-self:center;height:min(68vh,680px)}
.ptop{grid-area:top;display:flex;justify-content:space-between;gap:20px;max-width:520px;opacity:.75}
.pname{grid-area:name;margin-top:clamp(12px,2vh,22px)}
.pname h2{font-size:clamp(72px,min(8vw,14vh),160px)}
.ptag{grid-area:tag;margin-top:clamp(12px,2vh,22px)}
.ptag p{font:italic clamp(22px,1.8vw,32px)/1.2 "Instrument Serif"}
.pnotes{grid-area:notes;margin-top:12px;max-width:440px;opacity:.78}
.pnotes p{font-size:15px;line-height:1.6}
.prof{grid-area:prof;margin-top:clamp(18px,3vh,30px);max-width:440px;--v1:.9;--v2:.35;--v3:.55}
[data-flav=peach] .prof{--v1:.3;--v2:.75;--v3:.5}
[data-flav=berry] .prof{--v1:.4;--v2:.6;--v3:.9}
.prof .row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:16px;padding:10px 0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.prof .row:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.prof .tr{height:4px;border-radius:9px;background:color-mix(in srgb,currentColor 16%,transparent);overflow:hidden}
.prof .fi{height:100%;border-radius:9px;background:currentColor;transform-origin:left;transform:scaleX(var(--v));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pbuy{grid-area:buy;margin-top:clamp(18px,3.4vh,34px);display:flex;align-items:center;gap:28px}
.price b{display:block;font:clamp(34px,2.6vw,46px)/1 Anton}.price span{display:block;margin-top:6px;opacity:.7}
.add{background:#cdb6ff;color:#241044}
[data-flav=peach] .add{background:#3b1305;color:#ffd9a8}
[data-flav=berry] .add{background:#3d0613;color:#ffd0d8}
.add.done::after{content:" ✓"}

/* formula */
.form{z-index:3;background:var(--ink);transform:translate3d(0,100%,0);will-change:transform}
.form .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 55%,#000,transparent);mask-image:radial-gradient(ellipse 60% 60% at 50% 55%,#000,transparent)}
.fwrap{height:100%;display:flex;flex-direction:column;padding-top:calc(var(--navh) + 3vh);padding-bottom:var(--bottom)}
.fhead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.fhead .eb{color:#7f7890}
.fhead h2{font-size:clamp(48px,min(5.2vw,9vh),100px);margin-top:14px}
.fhead h2 .s{font-size:1.1em;line-height:.8;color:var(--acc);transition:color .6s}
.fdesc{max-width:320px;color:#a59fb2;font-size:15px;line-height:1.6}
.fbody{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
/* The can is drawn exactly into .fslot (aspect 2 : 5.3 = the can's silhouette), so the
   leader lines in .lead end precisely at the can's edge, at the same height as their callout. */
.fgrid{--canh:min(54vh,560px);--canw:calc(var(--canh) * .3774);--lead:clamp(48px,7vw,150px);
  width:100%;max-width:1240px;height:var(--canh);display:grid;grid-template-columns:minmax(0,1fr) var(--lead) var(--canw) var(--lead) minmax(0,1fr)}
.fcol,.lead{position:relative}
.co{position:absolute;top:var(--y);width:100%;max-width:300px;opacity:var(--p,0);--dir:-1;
  transform:translate(calc((1 - var(--p,0)) * 28px * var(--dir)),-50%)}
.fcol.l .co{right:0;text-align:right}
.fcol.r .co{left:0;--dir:1}
.co b{display:block;font:clamp(30px,3vw,58px)/1 Anton;letter-spacing:.01em}
.co .m{color:var(--acc);margin-top:8px;transition:color .6s}
.co p{color:#a59fb2;font-size:14px;line-height:1.55;margin-top:8px}
.ln{position:absolute;left:10px;right:2px;top:var(--y);height:1px;background:var(--acc);transform:scaleX(var(--p,0));transform-origin:left;transition:background-color .6s}
.lead.r .ln{left:2px;right:10px;transform-origin:right}
/* a dot where the line meets the can, a smaller one at the callout */
.ln::before,.ln::after{content:"";position:absolute;top:50%;border-radius:50%;background:#fff}
.ln::after{width:7px;height:7px;margin-top:-3.5px;right:-3.5px}
.ln::before{width:4px;height:4px;margin-top:-2px;left:-2px}
.lead.r .ln::after{right:auto;left:-3.5px}.lead.r .ln::before{left:auto;right:-2px}

/* the flavour switcher */
.switch{position:absolute;z-index:8;left:50%;bottom:calc(var(--safe-b) + 26px);transform:translateX(-50%);width:min(460px,calc(100% - 2 * var(--pad)));height:58px;padding:5px;border-radius:99px;background:rgba(13,11,18,.78);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -18px rgba(0,0,0,.55);display:grid;grid-template-columns:repeat(3,1fr)}
.switch .ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / 3);border-radius:99px;background:#7c3aed;transition:transform .5s cubic-bezier(.6,0,.2,1),background-color .5s}
[data-sel=peach] .switch .ind{transform:translateX(100%);background:#e07a2c}
[data-sel=berry] .switch .ind{transform:translateX(200%);background:#d03e5a}
.switch button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;font:16px Anton;letter-spacing:.05em;text-transform:uppercase;color:#a59fb2;text-align:center;transition:color .3s}
.switch button.on{color:#fff}
.switch button i{width:7px;height:7px;border-radius:50%}

/* ---------- the rest of the page (native scroll, no WebGL) ---------- */
.ticker{background:var(--tick);height:52px;overflow:hidden;display:flex;align-items:center;transition:background-color .6s}
.ticker .tr{display:flex;gap:44px;white-space:nowrap;font:500 13px "JetBrains Mono";letter-spacing:.16em;text-transform:uppercase;animation:tick 40s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

.story{background:var(--paper2);padding:clamp(90px,11vw,190px) 0 clamp(80px,9vw,150px);overflow:hidden;position:relative}
.story .wmk{position:absolute;left:0;right:0;top:3vw;text-align:center;font:clamp(220px,32vw,600px)/1 Anton;color:#e0d9cc;white-space:nowrap;pointer-events:none}
.mhd{text-align:center;position:relative}
.story .bar{width:64px;height:2px;background:var(--deep);margin:0 auto 24px;transition:background-color .6s}
.story h2{font-size:clamp(54px,7.8vw,150px);margin-top:20px}
.story h2 .s{display:block;font-size:1.12em;line-height:.82;color:var(--deep);transition:color .6s}
.stmt{font:clamp(25px,2.7vw,52px)/1.16 "Instrument Serif";letter-spacing:-.01em;max-width:1240px;margin:clamp(28px,3vw,46px) auto 0}
.stmt .w{color:#c3bcb0;transition:color .25s}.stmt .w.on{color:var(--ink)}
.sig{margin-top:clamp(36px,4vw,56px);display:flex;flex-direction:column;align-items:center}
.sig .sl{width:160px;height:1px;background:var(--lineD);margin-bottom:22px}
.sig b{font:600 12px Inter;letter-spacing:.16em;text-transform:uppercase}.sig .m{color:var(--mute);margin-top:6px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(60px,7vw,130px);border-top:1px solid var(--lineD);position:relative}
.nums div{padding:28px 0 0 28px;border-right:1px solid var(--lineD)}
.nums div:first-child{padding-left:0}.nums div:last-child{border-right:0}
.nums b{display:block;font:clamp(52px,6.2vw,120px)/1 Anton}.nums small{font-size:.38em;margin-left:4px}
.nums .m{color:var(--mute);display:block;margin-top:10px}

.bento{padding:clamp(80px,9vw,170px) 0}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,1.1fr);align-items:end;gap:40px}
.sechead h2{font-size:clamp(50px,7.4vw,150px)}.sechead h2 .s{font-size:1.12em;line-height:.8}
.sechead p{color:#5b5566;line-height:1.65;font-size:16px}
.bgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(12px,1.4vw,24px);margin-top:clamp(36px,5vw,72px)}
.tile{border-radius:clamp(18px,1.4vw,24px);min-height:clamp(360px,34vw,580px);padding:clamp(22px,2.2vw,36px);position:relative;overflow:hidden;background:#e7e1d6}
.tile.dk{background:var(--ink);color:#fff}
.tile h4{font-size:clamp(40px,4vw,76px);margin-top:18px}.tile h4 .s{font-size:1.1em;line-height:.8}
.tile p{font-size:15px;line-height:1.6;color:var(--mute);max-width:260px;margin-top:18px;position:relative}
.bars{position:absolute;left:clamp(22px,2.2vw,36px);right:clamp(22px,2.2vw,36px);bottom:clamp(22px,2.2vw,36px)}
.bars .row{display:grid;grid-template-columns:70px 1fr 50px;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--lineD)}
.bars .tr{height:5px;border-radius:9px;background:rgba(13,11,18,.1);overflow:hidden}
.bars .fi{height:100%;width:100%;border-radius:9px;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .25s}
.tile.in .bars .fi{transform:scaleX(var(--w))}
.tile.br{background:var(--acc);transition:background-color .6s,opacity .8s,transform .9s}
.tile.br .mk{position:absolute;left:50%;top:48%;height:min(68%,340px);aspect-ratio:1;transform:translate(-50%,-50%)}
.tile.br .mk img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mkr{position:absolute;inset:0;transform-origin:50.14% 47.55%;animation:spin 16s linear infinite}
.mkr img{opacity:.6}
.mkt{animation:mkbob 5s ease-in-out infinite}
@keyframes mkbob{50%{transform:translateY(-2.2%) scale(1.02)}}
.tile.br p{position:absolute;left:clamp(22px,2.2vw,36px);bottom:clamp(22px,2.2vw,36px);color:var(--ink)}

/* baked cans: snapshots of the real 3D can, animated with compositor-only CSS */
.bake{pointer-events:none;opacity:0;transition:opacity .6s}
.bake.ready{opacity:1}
.bake.bt{position:absolute;right:6%;top:8%;height:86%;transform:rotate(22deg);animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:rotate(18deg) translateY(-12px)}}

.faq{padding:clamp(70px,8vw,150px) 0;border-top:1px solid var(--lineD)}
.faq .g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,2fr);gap:40px}
.faq h2{font-size:clamp(50px,5.8vw,110px)}.faq h2 .s{font-size:1.12em;line-height:.8}
.qs{border-top:1px solid var(--lineD)}
.q{border-bottom:1px solid var(--lineD)}
.q .hd{width:100%;padding:clamp(18px,1.6vw,26px) 0;display:grid;grid-template-columns:44px 1fr 20px;align-items:center}
.q h5{font:500 clamp(15px,1.2vw,21px) Inter;letter-spacing:-.01em}
.q .pm{position:relative;width:14px;height:14px;justify-self:end}
.q .pm::before,.q .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s}
.q .pm::after{transform:rotate(90deg)}
.q.open .pm::after{transform:rotate(0)}
.q .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.q.open .ans{grid-template-rows:1fr}
.q .ans>div{overflow:hidden}
.q .ans p{padding:0 0 22px 44px;font-size:15px;line-height:1.6;color:#5d5868;max-width:600px}

.cta{background:var(--ink);color:#fff;padding:clamp(80px,10vw,170px) 0 calc(20px + env(safe-area-inset-bottom));overflow:hidden}
.crow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:40px}
.cta h2{font-size:clamp(64px,10vw,200px);margin-top:24px}.cta h2 .s{font-size:1.12em;line-height:.76;color:var(--acc);transition:color .6s}
.cta p{margin-top:28px;font-size:16px;line-height:1.6;color:#a59fb2;max-width:420px}
.em{margin-top:28px;max-width:560px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:5px 5px 5px 22px}
.em input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:16px Inter}
.em input::placeholder{color:#7f7890}
.em .pill{height:44px;padding:0 20px;font-size:13px}
.em.ok input{color:var(--acc)}
.ccan{display:flex;justify-content:center}
.bake.cc{height:clamp(300px,36vw,640px);transform:rotate(-14deg);animation:float2 6s ease-in-out infinite}
@keyframes float2{50%{transform:rotate(-10deg) translateY(-14px)}}
.foot{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 10px;margin-top:clamp(60px,8vw,140px);padding-top:36px;border-top:1px solid var(--line)}
.foot div{display:flex;flex-direction:column;gap:10px;font-size:15px;color:#e6e1ee}.foot .m{color:#6f6880;margin-bottom:6px}
.fmk{display:block;width:clamp(104px,11vw,176px);height:auto;margin:clamp(48px,6vw,90px) auto 0}
.fmk+.huge{margin-top:clamp(14px,2vw,30px)}
.huge{font:clamp(84px,17.6vw,340px)/.82 Anton;text-align:center;letter-spacing:-.02em;margin-top:clamp(40px,6vw,90px);white-space:nowrap}
.legal{display:flex;justify-content:space-between;gap:12px;color:#6f6880;padding:26px 0 30px}

/* =================== below 900px: stacked layout =================== */
@media (max-width:899px){
  :root{--bottom:calc(var(--safe-b) + 100px)}
  .links,.shop{display:none}.burger{display:block}
  .navin{grid-template-columns:1fr auto}

  .hgrid{display:flex;flex-direction:column;align-items:stretch;padding-top:calc(var(--navh) + 12px)}
  .hcopy h1{font-size:min(13.5vw,7.4svh,64px);margin-top:12px}
  .hcopy p,.acts,.hspecs,.hfoot{display:none}
  .hslot{flex:1;width:auto;height:auto;min-height:140px;margin-top:10px}

  .pgrid{display:flex;flex-direction:column;padding-top:calc(var(--navh) + 12px)}
  .pbig{width:100%;top:48%}
  .pname h2{font-size:min(14vw,7svh,62px)}
  .pslot{flex:1;height:auto;min-height:140px;margin:8px 0;align-self:stretch}
  .ptag{margin-top:0}.ptag p{font-size:19px}
  .pnotes,.prof{display:none}
  .pbuy{margin-top:14px;justify-content:space-between}
  .price b{font-size:30px}

  .fwrap{padding-top:calc(var(--navh) + 10px)}
  .fhead{flex-direction:column;align-items:flex-start}
  .fhead h2{font-size:min(11vw,6.2svh,48px)}
  .fdesc{display:none}
  .fgrid{--canh:min(46svh,360px,calc((100vw - 2 * var(--pad) - 244px) / .3774));--lead:22px}
  .co p{display:none}
  .co b{font-size:clamp(24px,7vw,34px)}
  .co .m{font-size:9px;letter-spacing:.1em}
  .ln{left:4px}.lead.r .ln{right:4px}

  .switch{height:54px}
  .switch button{font-size:15px}

  .nums{grid-template-columns:1fr 1fr}
  .nums div{padding:22px 0 20px;border-bottom:1px solid var(--lineD)}
  .nums div:nth-child(odd){border-right:1px solid var(--lineD)}
  .nums div:nth-child(even){padding-left:20px;border-right:0}
  .sechead{display:block}.sechead h2{margin-top:16px}.sechead p{margin-top:16px}
  .bgrid{grid-template-columns:1fr}
  .tile{min-height:0}
  .tile.dk{height:360px}.tile:nth-child(2){padding-bottom:200px}.tile.br{height:330px}.tile.br .mk{height:60%;top:44%}
  .tile p{max-width:180px}
  .bake.bt{right:-2%;height:90%}
  .faq .g{display:block}.faq h2{margin:16px 0 28px}
  .crow{display:block;position:relative}
  .ccopy{position:relative;z-index:1}
  .ccan{position:absolute;right:-10px;top:120px;z-index:0}
  .bake.cc{height:min(56vw,230px)}
  .cta p{max-width:58%}
  .foot{grid-template-columns:1fr 1fr}
  .legal{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  .wi,[data-r]{transition:none;transform:none;opacity:1}
  .ticker .tr,.bake.bt,.bake.cc,.dial,.mkr,.mkt{animation:none}
  .lmk{transition:none}.logo:hover .lmk{transform:none}
}