/* DunkEat V10 */
@font-face { font-family:'Fredoka'; font-style:normal; font-weight:300 700; font-stretch:75% 125%; font-display:swap; src:url('assets/fonts/fredoka.woff2') format('woff2'); }
:root {
  --navy:#040e5d; --navy-2:#0d1a78; --pink:#f8718e; --pink-ink:#ad2049; --pink-soft:#fbc5d1; --blush:#fff0f3; --cream:#fff8f0; --white:#fff;
  --line:rgba(4,14,93,.14); --line-light:rgba(255,255,255,.2); --muted:rgba(4,14,93,.7); --muted-light:rgba(255,255,255,.75);
  --f:'Fredoka',ui-rounded,system-ui,sans-serif;
  --gutter:clamp(16px,4vw,64px); --max:1360px; --pad-x:max(var(--gutter),calc((100% - var(--max)) / 2));
  --section-y:clamp(60px,7vw,110px); --r:32px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --tint-double:#efe3ea; --tint-hazelnut:#f7ead7; --tint-lotus:#fae1cc; --tint-red:#fcdbe4;
  color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
html,body { overflow-x:clip; }
body { margin:0; background:var(--cream); color:var(--navy); font:400 1.0625rem/1.55 var(--f); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; }
h1,h2,h3,p,dl,dd { margin:0; }
h1,h2,h3 { font-weight:700; line-height:.9; }
em { font-style:normal; color:var(--pink-ink); }
:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; left:12px; top:-80px; z-index:300; background:var(--navy); color:var(--white); padding:12px 20px; border-radius:12px; }
.skip-link:focus { top:12px; }
.split { display:inline-block; }
.split .ch { display:inline-block; will-change:transform; }
.split .w { display:inline-block; white-space:nowrap; }

/* Display type: Fredoka condensed */
.hero-title,.big,.tear-title,.tear-item h3,.story h2,.closing h2,.box h3,.footer-mark,.stack-row,.loader-count,.sticker,.burst span,.card h3,.marquee { font-stretch:75%; text-transform:uppercase; letter-spacing:-.01em; }
.big { font-size:clamp(2.6rem,1.6rem + 4vw,5.6rem); }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border:0; border-radius:999px; font-weight:600; font-size:1rem; white-space:nowrap; transition:transform .3s var(--ease),background-color .25s,color .25s; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(1px); }
.button .arr { transition:transform .3s var(--ease); }
.button:hover .arr { transform:translateX(4px); }
.button-dark { background:var(--navy); color:var(--cream); }
.button-dark:hover { background:var(--navy-2); }
.button-pink { background:var(--pink); color:var(--navy); }
.button-outline { background:transparent; color:currentColor; box-shadow:inset 0 0 0 2px currentColor; }
.button.big { min-height:60px; padding:0 32px; font-size:1.0625rem; }
.button.full { width:100%; }
.button:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.close { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; font-size:2rem; line-height:1; }
.close:hover { background:var(--pink-soft); }

/* Sticker + burst */
.sticker { position:absolute; display:inline-block; padding:10px 16px 8px; border-radius:14px; font-weight:700; font-size:clamp(1rem,.8rem + .8vw,1.5rem); line-height:.95; text-align:center; box-shadow:0 8px 0 rgba(4,14,93,.12); }
.sticker-pink { background:var(--pink); color:var(--navy); }
.burst { position:absolute; width:clamp(96px,10vw,132px); aspect-ratio:1; display:grid; place-items:center; }
.burst svg { position:absolute; inset:0; width:100%; height:100%; }
.burst span { position:relative; font-weight:700; font-size:clamp(1.25rem,1rem + 1vw,1.8rem); line-height:.88; text-align:center; }
.burst-navy svg { fill:var(--navy); } .burst-navy span { color:var(--pink); }
.burst-pink svg { fill:var(--pink); } .burst-pink span { color:var(--navy); }

/* ---------- PRELOADER ---------- */
.loader { display:none; }
.js .loader { display:grid; position:fixed; inset:0; z-index:500; place-items:center; background:var(--cream); }
.loader-inner { display:grid; justify-items:center; gap:16px; }
.loader-cookie { width:clamp(120px,22vw,180px); height:auto; overflow:visible; }
.loader-count { font-size:clamp(4rem,10vw,7rem); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.loader-count::after { content:'%'; color:var(--pink); }
.loader-wave { position:absolute; left:0; top:100%; width:100%; height:80px; fill:var(--cream); }
.loading body { overflow:hidden; }
.loaded .loader { display:none; }

/* ---------- HEADER ---------- */
.header { position:fixed; z-index:40; inset:calc(14px + env(safe-area-inset-top,0px)) 0 auto; display:flex; justify-content:center; padding-inline:max(16px,calc(var(--pad-x) - 0px)); pointer-events:none; transition:transform .45s var(--ease); }
.header.hide { transform:translateY(-120%); }
.header-pill { pointer-events:auto; width:min(100%,1100px); height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 10px 0 22px; border-radius:999px; background:var(--cream); transition:background .35s,box-shadow .35s,width .5s var(--ease); }
.header.scrolled .header-pill { width:min(100%,900px); background:rgba(255,248,240,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(4,14,93,.1); }
.brand { position:relative; display:flex; align-items:center; width:148px; height:44px; flex:none; }
.brand img { transition:opacity .3s var(--ease),transform .4s var(--ease); }
.brand-wordmark { width:148px; }
.brand-symbol { position:absolute; width:44px; opacity:0; transform:scale(.6) rotate(-30deg); }
.header.scrolled .brand-wordmark { opacity:0; transform:translateY(-6px); }
.header.scrolled .brand-symbol { opacity:1; transform:none; }
.nav { display:flex; gap:2px; }
.nav a { padding:9px 15px; border-radius:999px; font-weight:500; transition:background .2s,color .2s; }
.nav a:hover { background:var(--pink); color:var(--navy); }
.header-actions { display:flex; align-items:center; gap:8px; }
.bag-button { display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 8px 0 16px; border:0; border-radius:999px; background:var(--navy); color:var(--cream); font-weight:600; }
.bag-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.bag-count { min-width:32px; height:32px; padding:0 8px; display:grid; place-items:center; border-radius:999px; background:var(--pink); color:var(--navy); font-size:.875rem; }
.menu-button { display:none; position:relative; width:48px; height:48px; border:0; border-radius:50%; background:var(--pink-soft); }
.menu-button span:not(.sr-only) { position:absolute; left:15px; right:15px; height:2px; background:var(--navy); transition:transform .3s var(--ease); }
.menu-button span:nth-child(1) { top:20px; } .menu-button span:nth-child(2) { top:27px; }
.menu-button[aria-expanded=true] span:nth-child(1) { transform:translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded=true] span:nth-child(2) { transform:translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position:fixed; inset:0; z-index:39; display:flex; flex-direction:column; gap:32px; padding:120px var(--gutter) 40px; background:var(--navy); color:var(--cream); overflow:auto; }
.mobile-menu[hidden] { display:none; }
.mobile-menu nav { display:flex; flex-direction:column; gap:4px; }
.mobile-menu nav a { font-size:clamp(2.2rem,10vw,3.2rem); font-weight:700; font-stretch:75%; text-transform:uppercase; line-height:1.05; }
.mobile-menu .button { align-self:flex-start; }
.menu-open .header .brand-wordmark { opacity:1; transform:none; }


/* ---------- HERO ---------- */
.hero { padding:12px; }
.hero-frame { position:relative; display:flex; flex-direction:column; height:calc(100svh - 24px); min-height:620px; border-radius:clamp(24px,3vw,44px); padding:96px clamp(10px,1.4vw,20px) clamp(10px,1.4vw,20px); background:var(--navy) repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 36px,transparent 36px 72px); overflow:hidden; }
.hero-panel { --s:22px; position:relative; display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"title title title" "cookie cookie cookie" "lead switch cta"; align-items:end; grid-template-rows:auto minmax(0,1fr) auto; gap:0 24px; flex:1; min-height:0; padding:calc(var(--s) + 28px) clamp(20px,3vw,48px) calc(var(--s) + 36px); background:var(--cream); border-radius:20px;
  -webkit-mask:radial-gradient(circle var(--s) at 50% 100%,#000 98%,#0000) top/calc(var(--s)*2) var(--s) repeat-x, linear-gradient(#000 0 0) center/100% calc(100% - var(--s)*2 + 2px) no-repeat, radial-gradient(circle var(--s) at 50% 0,#000 98%,#0000) bottom/calc(var(--s)*2) var(--s) repeat-x;
          mask:radial-gradient(circle var(--s) at 50% 100%,#000 98%,#0000) top/calc(var(--s)*2) var(--s) repeat-x, linear-gradient(#000 0 0) center/100% calc(100% - var(--s)*2 + 2px) no-repeat, radial-gradient(circle var(--s) at 50% 0,#000 98%,#0000) bottom/calc(var(--s)*2) var(--s) repeat-x; }
.hero-title { grid-area:title; position:relative; z-index:1; text-align:center; font-size:clamp(2.8rem,1rem + 5vw,6.6rem); line-height:.86; }
.hero-title .line { display:block; overflow:hidden; padding-block:.03em; }
.hero-title em { color:var(--pink); }
.hero-sticker { z-index:3; left:4%; bottom:20%; transform:rotate(-9deg); }
.hero-cookie { grid-area:cookie; position:relative; z-index:2; justify-self:center; align-self:stretch; width:min(80vw,900px); min-height:0; margin:12px 0 18px; }
.hero-tilt { position:absolute; inset:0; }
.hero-cookie { container-type:size; }
.hero-spin { position:absolute; inset:0; margin:auto; width:min(100cqw,100cqh); height:min(100cqw,100cqh); border-radius:50%; will-change:transform; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.hero-spin:active { cursor:grabbing; }
.hero-photo { width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 34px 28px rgba(4,14,93,.28)); }
.hero-bubble { position:absolute; right:2%; top:44%; display:grid; gap:8px; justify-items:start; padding:16px 18px; border-radius:22px; background:var(--pink-soft); box-shadow:0 10px 0 rgba(4,14,93,.08); }
.hero-bubble::before { content:''; position:absolute; left:-12px; top:28px; border:12px solid transparent; border-right-color:var(--pink-soft); border-left:0; }
.hero-bubble strong { font-size:clamp(1.15rem,.9rem + .7vw,1.6rem); font-stretch:80%; line-height:1; text-transform:uppercase; max-width:9ch; }
.bubble-add { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border:0; border-radius:999px; background:var(--navy); color:var(--cream); font-weight:600; font-size:.9375rem; }
.bubble-add span { font-size:1.2rem; line-height:1; }
.hero-lead { grid-area:lead; max-width:32ch; font-size:clamp(1rem,.95rem + .25vw,1.15rem); display:grid; gap:10px; }
.hours { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9375rem; }
.hours::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; }
.hours.is-open::before { background:#1e9e5a; box-shadow:0 0 0 4px rgba(30,158,90,.18); }
.hours.is-closed::before { background:var(--pink-ink); }
.hero-cta { grid-area:cta; justify-self:end; }
.hero-switch { grid-area:switch; display:flex; align-items:center; gap:14px; }
.arrow { width:52px; height:52px; display:grid; place-items:center; border:2px solid var(--navy); border-radius:50%; background:var(--cream); transition:background .2s,color .2s,transform .2s; }
.arrow svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.arrow:hover { background:var(--navy); color:var(--cream); }
.dots { display:flex; gap:8px; }
.dots button { width:12px; height:12px; padding:0; border:2px solid var(--navy); border-radius:999px; background:transparent; transition:width .35s var(--ease),background .2s; }
.dots button[aria-pressed=true] { width:32px; background:var(--pink); border-color:var(--pink); }

/* ---------- MARQUEE ---------- */
.marquee { position:relative; height:clamp(150px,16vw,220px); overflow:clip; }
.strip { position:absolute; left:-4%; right:-4%; top:50%; padding:16px 0; font-weight:700; font-size:clamp(1.4rem,1rem + 1.6vw,2.4rem); line-height:1; white-space:nowrap; }
.strip-pink { background:var(--pink); color:var(--navy); transform:translateY(-50%) rotate(-3.5deg); }
.strip-navy { background:var(--navy); color:var(--cream); transform:translateY(-50%) rotate(3deg); }
.strip-track { display:flex; width:max-content; will-change:transform; }
.strip-track span { display:inline-flex; align-items:center; gap:28px; padding-right:28px; }
.strip-track img { width:1.5em; height:1.5em; object-fit:contain; }

/* ---------- STATEMENT ---------- */
.statement { padding:clamp(60px,8vw,120px) var(--pad-x) clamp(40px,6vw,80px); }
.statement-text { max-width:21ch; margin-inline:auto; text-align:center; font-weight:600; font-size:clamp(1.7rem,1rem + 2.6vw,3.4rem); line-height:1.12; letter-spacing:-.01em; }
.statement-text .w { display:inline-block; }
.js .statement-text .w { opacity:.14; }
.inline-cookie { display:inline-block; width:1.15em; height:1.15em; object-fit:contain; vertical-align:-.2em; margin:0 .05em; }

/* ---------- SECTIONS ---------- */
.section { padding:var(--section-y) var(--pad-x); }
.section-head { margin-bottom:clamp(48px,6vw,88px); }
.section-head.center { text-align:center; }
.section-head h2 em { color:var(--pink-ink); }
.section-head p { margin-top:20px; font-size:clamp(1.05rem,1rem + .3vw,1.3rem); color:var(--muted); }
.price { font-weight:700; font-size:1.5rem; }
.price:empty { display:none; }

/* ---------- FLAVOUR CARDS ---------- */
.card-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); padding-top:70px; }
.card { position:relative; display:flex; flex-direction:column; padding:0 clamp(18px,1.8vw,26px) 24px; border-radius:var(--r); background:var(--tint); text-align:center; }
.card-visual { position:relative; width:min(86%,250px); margin:-70px auto 0; display:grid; place-items:center; }
.card-visual .blob { position:absolute; width:96%; aspect-ratio:1; top:2%; left:2%; fill:var(--white); opacity:.75; }
.card-visual img { position:relative; width:84%; aspect-ratio:1; object-fit:contain; margin:6% auto 4%; transition:transform .6s var(--ease); filter:drop-shadow(0 18px 18px rgba(4,14,93,.18)); }
.card:hover .card-visual img { transform:translateY(-10px) rotate(-12deg) scale(1.04); }
.card h3 { margin-top:8px; font-size:clamp(1.6rem,1.1rem + 1.1vw,2.1rem); }
.card .desc { margin-top:8px; color:var(--muted); font-size:.9375rem; line-height:1.4; min-height:2.8em; }
.card .rule { margin:18px 0; border-top:2px dashed var(--line); }
.card { position:relative; }
.save-tag { position:absolute; top:14px; right:14px; z-index:2; padding:6px 10px 5px; border-radius:999px; background:var(--pink); color:var(--navy); font-weight:700; font-size:.8125rem; line-height:1; transform:rotate(6deg); }
.buy { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.buy .button { min-height:46px; padding:0 20px; }
.price { display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:1.375rem; line-height:1; white-space:nowrap; }
.price s { font-weight:500; font-size:.9375rem; color:var(--muted); text-decoration-thickness:2px; text-decoration-color:var(--pink-ink); }
.tear-buy { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.tear-buy .price s { color:inherit; opacity:.65; }
.bubble-price { font-weight:700; font-size:1.0625rem; }
.bubble-price s { font-weight:500; opacity:.6; font-size:.875rem; margin-right:4px; }
.box-price { margin-bottom:20px; font-weight:500; font-size:1rem; color:var(--muted); }
.box-price strong { color:var(--navy); font-size:1.5rem; }
.row-price { color:var(--navy) !important; font-weight:600; }
.pack-choice small { display:block; font-size:.8125rem; color:var(--muted); }
.story-intro p { margin-top:18px; max-width:34ch; font-size:clamp(1.05rem,1rem + .4vw,1.3rem); color:var(--muted); }


/* ---------- INSIDE: break one open ---------- */
.inside { --bg:var(--navy); --fg:var(--cream); --hi:var(--pink); position:relative; background:var(--bg); color:var(--fg); }
.tear { position:relative; padding:var(--section-y) var(--pad-x); --cy:61%; --head-top:clamp(84px,11svh,124px); }
.tear-title { font-size:clamp(2.8rem,1.4rem + 6vw,7.5rem); line-height:.84; text-align:center; margin-bottom:clamp(40px,6vw,72px); }
.tear-title em { color:var(--hi); }
.tear-cookie,.tear-crumbs,.tear-dots { display:none; }
/* resting layout: a plain list of the four centres */
.tear-copy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 40px; }
.tear-item,.tear-head,.tear-mid { display:grid; justify-items:center; text-align:center; gap:10px; }
.tear-item .rest-img { width:min(100%,380px); }
.tear-item h3 { font-size:clamp(2rem,1.4rem + 2vw,3.4rem); font-stretch:75%; text-transform:uppercase; }
.tear-item p { max-width:34ch; font-size:clamp(1.05rem,1rem + .3vw,1.3rem); opacity:.85; }
.tear-item .button { margin-top:10px; }
/* live, scroll-driven version */
.tear-on .tear { height:100svh; min-height:560px; padding:0; overflow:hidden; }
.tear-on .tear-title { position:absolute; left:0; right:0; top:var(--head-top); z-index:1; margin:0; padding-inline:var(--pad-x); }
.tear-on .tear-cookie { display:block; position:absolute; z-index:3; left:50%; top:var(--cy); width:var(--cw,320px); aspect-ratio:1; translate:-50% -50%; }
.tear-cookie .tc { position:absolute; inset:0; }
.tear-cookie .half { position:absolute; inset:0; filter:drop-shadow(0 24px 24px rgba(4,14,93,.3)); will-change:transform; }
.tear-cookie .crack { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.tear-cookie .crack path { fill:none; stroke:var(--crk,#2a120a); stroke-width:3px; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.9; }
.tear-cookie::before { content:''; position:absolute; inset:-12%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--hi) 30%,transparent),transparent 62%); }
.tear-cookie img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; }
.tear-on .tear-crumbs { display:block; position:absolute; z-index:1; left:50%; top:var(--cy); width:0; height:0; }
.tear-crumbs i { position:absolute; left:0; top:0; width:var(--sz); height:calc(var(--sz) * .8); margin:calc(var(--sz) / -2); border-radius:38% 62% 45% 55% / 52% 40% 60% 48%; background:var(--c); opacity:0; will-change:transform; }
.tear-on .tear-copy { display:block; position:absolute; z-index:2; inset:0; pointer-events:none; }
.tear-on .tear-item { position:absolute; inset:0; visibility:hidden; pointer-events:none; display:block; }
.tear-on .tear-head { position:absolute; left:var(--pad-x); right:var(--pad-x); top:var(--head-top); display:grid; justify-items:center; gap:6px; }
.tear-on .tear-mid { position:absolute; left:var(--pad-x); right:var(--pad-x); top:var(--cy); display:grid; justify-items:center; gap:14px; pointer-events:auto; }
.tear-mid p { max-width:38ch; }
.tear-on .tear-item .rest-img { display:none; }
.tear-on .tear-item h3 { font-size:clamp(2.2rem,1rem + 3.6vw,4.8rem); line-height:.9; }
.tear-num { font-weight:600; color:var(--hi); font-variant-numeric:tabular-nums; }
.tear-on .tear-dots { display:flex; flex-direction:column; gap:10px; position:absolute; z-index:4; right:max(16px,var(--pad-x)); top:50%; translate:0 -50%; }
.tear-dots button { width:52px; height:52px; padding:4px; border:2px solid transparent; border-radius:50%; background:rgba(255,255,255,.14); transition:transform .3s var(--ease),border-color .3s,background .3s; }
.tear-dots button img { width:100%; height:100%; object-fit:contain; }
.tear-dots button[aria-pressed=true] { border-color:var(--hi); background:rgba(255,255,255,.3); transform:scale(1.12); }
.tear-dots button:hover { transform:scale(1.12); }

/* ---------- BOXES: printed DunkEat packaging in 3D ---------- */
.box-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.box { position:relative; display:grid; grid-template-rows:auto 1fr; gap:8px; padding:clamp(24px,3vw,40px); border-radius:var(--r); overflow:hidden; --k:1; }
.box-two { background:var(--blush); }
.box-four { background:var(--pink-soft); }
.box h3 { font-size:clamp(2.4rem,1.6rem + 2vw,3.6rem); margin-bottom:14px; color:var(--navy); }
.box-copy { position:relative; z-index:1; }
.box-copy p:not(.price) { max-width:40ch; margin-bottom:24px; font-size:1.0625rem; color:var(--muted); }
.pkg-scene { position:relative; height:calc(360px * var(--k)); display:grid; place-items:center; perspective:1500px; perspective-origin:50% 20%; }
.pkg { position:relative; width:var(--w); height:var(--h); transform-style:preserve-3d; transform:rotateX(-30deg) rotateY(-24deg); margin-top:calc(70px * var(--k)); }
.pkg-pink { --w:calc(310px * var(--k)); --h:calc(84px * var(--k)); --d:calc(176px * var(--k)); --c:#f8718e; --c2:#ec6283; --c3:#d9506f; --in:#fbc5d1; --ink:#040e5d; --hi:#fff8f0; }
.pkg-navy { --w:calc(300px * var(--k)); --h:calc(92px * var(--k)); --d:calc(300px * var(--k)); --c:#040e5d; --c2:#0b1870; --c3:#122288; --in:#fff0f3; --ink:#fff8f0; --hi:#f8718e; }
.face,.lid,.pkg-cookies { position:absolute; left:0; top:0; }
.face { background:var(--c); }
.f-front,.f-back { width:var(--w); height:var(--h); }
.f-front { transform:translateZ(calc(var(--d) / 2)); display:flex; align-items:center; justify-content:space-between; padding:0 calc(18px * var(--k)); color:var(--ink); }
.f-back { transform:rotateY(180deg) translateZ(calc(var(--d) / 2)); background:var(--c3); }
.f-left,.f-right { width:var(--d); height:var(--h); left:calc((var(--w) - var(--d)) / 2); }
.f-right { transform:rotateY(90deg) translateZ(calc(var(--w) / 2)); background:var(--c2); display:grid; place-items:center; color:var(--ink); }
.f-left { transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); background:var(--c3); }
.f-bottom { width:var(--w); height:var(--d); top:calc((var(--h) - var(--d)) / 2); transform:rotateX(-90deg) translateZ(calc(var(--h) / 2)); background:var(--in); }
.pf-mark { font-weight:700; font-stretch:75%; font-size:calc(38px * var(--k)); line-height:1; letter-spacing:-.01em; }
.pf-mark b,.lid-word b { color:var(--hi); font-weight:700; }
.pf-size { padding:calc(5px * var(--k)) calc(12px * var(--k)); border-radius:999px; border:calc(2px * var(--k)) solid currentColor; font-weight:600; font-size:calc(13px * var(--k)); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.f-right span { font-size:calc(11px * var(--k)); font-weight:600; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; opacity:.85; }
.lid { width:var(--w); height:var(--d); top:calc((var(--h) - var(--d)) / 2); transform-style:preserve-3d; --open:0deg;
  transform:rotateX(90deg) translateZ(calc(var(--h) / 2 + 1px)) translateY(calc(var(--d) / -2)) rotateX(var(--open)) translateY(calc(var(--d) / 2)); }
.lid-out,.lid-in { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.lid-out { display:grid; place-items:center; align-content:center; gap:calc(6px * var(--k)); background-color:var(--c); color:var(--ink);
  background-image:radial-gradient(circle,transparent 0 calc(5px * var(--k)),color-mix(in srgb,var(--ink) 16%,transparent) calc(5px * var(--k)) calc(6.5px * var(--k)),transparent calc(7px * var(--k)));
  background-size:calc(46px * var(--k)) calc(46px * var(--k)); box-shadow:inset 0 0 0 calc(3px * var(--k)) color-mix(in srgb,var(--ink) 14%,transparent); }
.lid-out img { width:calc(64px * var(--k)); height:auto; }
.lid-word { font-weight:700; font-stretch:75%; font-size:calc(46px * var(--k)); line-height:.9; letter-spacing:-.01em; }
.lid-tag { font-size:calc(11px * var(--k)); font-weight:600; text-transform:uppercase; letter-spacing:.14em; opacity:.8; }
.lid-in { transform:rotateY(180deg); background:var(--in); }
.pkg-cookies { width:var(--w); height:var(--d); top:calc((var(--h) - var(--d)) / 2); --lift:0px; transform-style:preserve-3d;
  transform:rotateX(90deg) translateZ(calc(var(--h) / -2 + 6px + var(--lift))); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; justify-items:center; gap:4%; padding:5%; }
.pkg-cookies img { width:92%; transform-origin:50% 100%; filter:drop-shadow(0 8px 6px rgba(4,14,93,.25)); }
.box-four .pkg-scene { height:calc(410px * var(--k)); }
.box-four .pkg { margin-top:calc(110px * var(--k)); }
.pkg-shadow { position:absolute; left:50%; bottom:calc(30px * var(--k)); width:calc(380px * var(--k)); height:calc(60px * var(--k)); translate:-50% 0; border-radius:50%; background:radial-gradient(closest-side,rgba(4,14,93,.22),transparent); z-index:-1; }
.terms { margin-top:20px; text-align:center; font-size:.9375rem; color:var(--muted); }
.terms strong { color:var(--navy); }
.referral { display:flex; align-items:center; gap:24px 36px; margin-top:clamp(48px,6vw,80px); padding:24px clamp(24px,3vw,44px) 24px 24px; border:2px solid var(--navy); border-radius:999px; }
.referral-cookie { width:96px; flex:none; }
.referral > div { flex:1; }
.referral h3 { font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem); line-height:1.05; margin-bottom:6px; }
.referral p { color:var(--muted); }

/* ---------- STORY (stacked wordmark) ---------- */
.story { position:relative; background:var(--pink-soft); overflow:hidden; padding:var(--section-y) 0; }
.story-stack { position:relative; display:grid; gap:4px; padding-block:12px; }
.stack-row { display:flex; justify-content:center; gap:0; font-size:clamp(2.6rem,1rem + 5.4vw,6.4rem); font-weight:700; line-height:.92; color:var(--navy); white-space:nowrap; will-change:transform; }
.stack-row:nth-child(2) { color:var(--pink-ink); }
.stack-cookies { position:absolute; left:50%; top:50%; width:clamp(96px,10vw,160px); transform:translate(-50%,-50%); display:grid; gap:0; }
.stack-cookies img { width:100%; margin-block:-12%; filter:drop-shadow(0 20px 16px rgba(4,14,93,.3)); }
.story-body { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px 64px; padding:clamp(32px,4vw,60px) var(--pad-x) 0; align-items:start; }
.story h2 { font-size:clamp(2.6rem,1.6rem + 3vw,5rem); }
.story-table div { display:grid; grid-template-columns:96px 1fr; gap:16px; padding:15px 0; border-top:1.5px solid rgba(4,14,93,.22); }
.story-table div:last-child { border-bottom:1.5px solid rgba(4,14,93,.22); }
.story-table dt { font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.9375rem; padding-top:4px; }
.story-table dd { font-size:clamp(1.02rem,1rem + .3vw,1.25rem); line-height:1.35; }

/* ---------- FAQ ---------- */
.faq { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px 72px; align-items:start; }
.faq-head { position:sticky; top:120px; }
.faq-head h2 { margin-bottom:24px; }
.faq-head p { margin-bottom:28px; font-size:1.15rem; color:var(--muted); }
.faq-list { display:grid; gap:12px; }
.faq-list details { border-radius:28px; background:var(--white); box-shadow:inset 0 0 0 1.5px var(--line); overflow:hidden; transition:background .3s; }
.faq-list details[open] { background:var(--blush); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 20px 20px 28px; list-style:none; cursor:pointer; font-weight:600; font-size:clamp(1.05rem,1rem + .3vw,1.25rem); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:var(--cream); font-size:1.4rem; transition:transform .35s var(--ease),background .3s; }
.faq-list details[open] summary::after { transform:rotate(45deg); background:var(--pink); color:var(--navy); }
.faq-a { padding:0 28px 24px; }
.faq-a p { max-width:58ch; color:var(--muted); }

/* ---------- CLOSING ---------- */
.closing { padding:0 12px var(--section-y); }
.closing-panel { --s:22px; position:relative; display:grid; justify-items:center; text-align:center; gap:40px; padding:clamp(96px,12vw,170px) var(--gutter); border-radius:clamp(24px,3vw,44px); background:var(--pink); overflow:hidden; }
.closing h2 { position:relative; z-index:1; font-size:clamp(2.8rem,1.4rem + 5.6vw,7.4rem); line-height:.86; max-width:12ch; }
.closing h2 em { color:var(--cream); }
.closing-cta { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.closing .button-outline { color:var(--navy); }
.roll { position:absolute; z-index:0; width:clamp(160px,22vw,340px); top:50%; filter:drop-shadow(0 22px 20px rgba(4,14,93,.25)); }
.roll-l { left:-6%; } .roll-r { right:-6%; }

/* ---------- FOOTER ---------- */
.footer { --s:20px; position:relative; margin-top:calc(var(--s) * -1); padding:calc(80px + var(--s)) var(--pad-x) 28px; background:var(--navy); color:var(--cream);
  -webkit-mask:radial-gradient(circle var(--s) at 50% 100%,#000 98%,#0000) top/calc(var(--s)*2) var(--s) repeat-x, linear-gradient(#000 0 0) bottom/100% calc(100% - var(--s)) no-repeat;
          mask:radial-gradient(circle var(--s) at 50% 100%,#000 98%,#0000) top/calc(var(--s)*2) var(--s) repeat-x, linear-gradient(#000 0 0) bottom/100% calc(100% - var(--s)) no-repeat; }
.footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:64px; }
.footer-line { font-size:clamp(1.7rem,1.2rem + 1.8vw,2.8rem); font-weight:700; font-stretch:75%; text-transform:uppercase; line-height:.92; max-width:12ch; }
.footer-cols { display:flex; gap:clamp(48px,8vw,120px); }
.footer-cols div { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.footer-cols h2 { font-size:.875rem; font-weight:500; color:var(--pink); margin-bottom:10px; text-transform:uppercase; letter-spacing:.08em; line-height:1.4; }
.footer-cols a { min-height:40px; display:flex; align-items:center; transition:color .2s; }
.footer-cols a:hover { color:var(--pink); }
.footer-cols p { color:var(--muted-light); padding-top:8px; }
.footer-mark { display:flex; align-items:center; justify-content:center; font-size:clamp(4.6rem,1rem + 17.5vw,22rem); font-weight:700; font-stretch:100%; line-height:.8; letter-spacing:-.02em; overflow:hidden; padding-block:.06em; }
.footer-mark span { display:inline-block; }
.footer-mark img { width:.78em; height:auto; margin:0 .02em; }
.footer-mark .pink { color:var(--pink); margin-left:.12em; }
.footer-end { margin-top:28px; padding-top:20px; border-top:1px solid var(--line-light); font-size:.875rem; color:var(--muted-light); }

/* ---------- LAYERS ---------- */
.toast { position:fixed; z-index:60; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:14px; max-width:calc(100% - 32px); width:max-content; padding:10px 10px 10px 22px; border-radius:999px; background:var(--navy); color:var(--cream); box-shadow:0 16px 40px rgba(4,14,93,.25); opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:opacity .25s,transform .35s var(--ease); }
.toast.show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast button { min-height:40px; padding:0 18px; border:0; border-radius:999px; background:var(--pink); color:var(--navy); font-weight:600; white-space:nowrap; }
.overlay { position:fixed; inset:0; z-index:50; background:rgba(4,14,93,.45); backdrop-filter:blur(4px); }
.overlay[hidden] { display:none; }
body.modal-open { overflow:hidden; }
.modal-open .toast { bottom:calc(120px + env(safe-area-inset-bottom,0px)); z-index:70; }
.drawer { position:fixed; z-index:51; inset:0 0 0 auto; width:min(460px,100%); display:flex; flex-direction:column; background:var(--cream); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); transform:translateX(102%); visibility:hidden; transition:transform .45s var(--ease),visibility 0s linear .45s; }
.drawer.open { transform:none; visibility:visible; transition:transform .45s var(--ease),visibility 0s; }
.drawer-head,.pack-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.drawer-head { padding:20px 24px; border-bottom:1px solid var(--line); }
.drawer h2,.pack-modal h2 { font-size:2rem; font-stretch:80%; text-transform:uppercase; line-height:1; }
.drawer-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 24px 16px; }
.cart-row { display:flex; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-thumb { width:60px; height:60px; object-fit:contain; flex:none; }
.cart-row-body { flex:1; min-width:0; }
.cart-row strong { display:block; font-weight:600; line-height:1.25; }
.cart-row small { display:block; font-size:.875rem; color:var(--muted); line-height:1.4; margin-top:2px; }
.qty { display:flex; align-items:center; gap:4px; flex:none; }
.qty button { width:40px; height:40px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:50%; background:var(--white); font-size:1.15rem; line-height:1; }
.qty button:hover:not(:disabled) { border-color:var(--navy); }
.qty button:disabled { opacity:.35; cursor:not-allowed; }
.qty span { min-width:26px; text-align:center; font-weight:600; }
.cart-empty { padding:56px 0 24px; text-align:center; }
.cart-empty img { width:120px; margin:0 auto 16px; }
.cart-empty p { margin-bottom:18px; color:var(--muted); }
.order-form { display:grid; gap:12px; padding-top:20px; }
.order-form[hidden] { display:none; }
.order-form label { display:grid; gap:6px; font-size:.9375rem; font-weight:500; }
.order-form .opt { color:var(--muted); font-weight:400; }
.order-form input { min-height:48px; padding:0 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--white); font-size:1rem; }
.order-form input:focus { outline:none; border-color:var(--navy); }
.order-form input.invalid { border-color:var(--pink-ink); background:var(--blush); }
.drawer-foot { padding:16px 24px 24px; border-top:1px solid var(--line); }
.cart-total { font-size:.9375rem; color:var(--muted); margin-bottom:12px; }
.pack-modal { position:fixed; z-index:52; left:50%; top:50%; width:min(540px,calc(100vw - 24px)); max-height:calc(100svh - 24px); overflow-y:auto; overscroll-behavior:contain; padding:28px; border-radius:var(--r); background:var(--cream); box-shadow:0 30px 70px rgba(4,14,93,.3); opacity:0; visibility:hidden; transform:translate(-50%,-46%) scale(.96); transition:transform .35s var(--ease),opacity .25s,visibility 0s linear .35s; }
.pack-modal.open { opacity:1; visibility:visible; transform:translate(-50%,-50%); transition:transform .35s var(--ease),opacity .25s,visibility 0s; }
.pack-slots { display:grid; grid-template-columns:repeat(var(--n,2),minmax(0,1fr)); gap:10px; max-width:calc(var(--n,2) * 84px); margin:20px auto 0; }
.pack-slots span { aspect-ratio:1; border-radius:50%; border:2px dashed var(--line); display:grid; place-items:center; position:relative; }
.pack-slots span.free::after { content:'free'; position:absolute; bottom:-18px; font-size:.75rem; color:var(--pink-ink); font-weight:600; }
.pack-slots img { width:100%; object-fit:contain; animation:pop .4s var(--ease); }
@keyframes pop { from { transform:scale(.3) rotate(-60deg); opacity:0; } }
.pack-choices { display:grid; gap:8px; margin:28px 0 20px; }
.pack-choice { display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px; border-radius:20px; background:var(--white); box-shadow:inset 0 0 0 1.5px var(--line); }
.pack-choice img { width:44px; height:44px; object-fit:contain; flex:none; }
.pack-choice > span { flex:1; min-width:0; font-weight:500; line-height:1.2; }
.pack-error { min-height:1.4em; margin:-6px 0 10px; text-align:center; color:var(--pink-ink); font-weight:600; font-size:.9375rem; }
#add-pack.is-waiting { opacity:.55; }
.cart-note { font-size:.875rem; color:var(--muted); margin-bottom:8px; }
.cart-note.warn { color:var(--pink-ink); font-weight:600; font-size:.9375rem; }
.pack-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid var(--line); }
.pack-footer strong { font-weight:600; font-size:1.1rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px) {
  .card-row { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:100px; }
  .box-grid { grid-template-columns:minmax(0,1fr); }
  .hero-bubble { right:-6%; }
}
@media (max-width:900px) {
  .nav { display:none; } .menu-button { display:block; }
  .bag-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .hero-panel { --s:16px; grid-template-columns:1fr; grid-template-areas:"title" "cookie" "switch" "lead" "cta"; grid-template-rows:auto minmax(0,1fr) auto auto auto; justify-items:center; text-align:center; gap:0; padding:calc(var(--s) + 32px) 18px calc(var(--s) + 32px); }
  .hero-cookie { width:min(100%,520px); margin:10px 0 6px; }
  .hero-bubble { right:0; top:auto; bottom:2%; padding:12px 14px; }
  .hero-bubble::before { display:none; }
  .hero-sticker { left:0; bottom:8%; }
  .hero-switch { margin:4px 0 24px; }
  .hero-lead { margin-bottom:20px; }
  .hero-cta { justify-self:center; }
  .tear-copy { grid-template-columns:minmax(0,1fr); }
  .tear-on .tear-dots { flex-direction:row; top:auto; bottom:calc(20px + env(safe-area-inset-bottom,0px)); right:50%; translate:50% 0; }
  .tear-dots button { width:46px; height:46px; }
  .story-body,.faq { grid-template-columns:minmax(0,1fr); }
  .faq-head { position:static; }
}
@media (max-width:600px) {
  .header { inset-block-start:calc(10px + env(safe-area-inset-top,0px)); padding-inline:10px; }
  .header-pill { height:60px; padding:0 6px 0 16px; }
  .brand { width:116px; } .brand-wordmark { width:116px; } .brand-symbol { width:40px; }
  .bag-button { height:46px; padding:0 6px 0 12px; }
  .hero { padding:8px; }
  .hero-frame { padding-top:76px; height:calc(100svh - 16px); min-height:600px; }
  .hero-title { font-size:clamp(2rem,10vw,3.4rem); }
  .hero-sticker { font-size:.95rem; padding:8px 12px 6px; }
  .hero-bubble strong { font-size:1.05rem; }
  .marquee { height:140px; }
  .statement-text { font-size:clamp(1.6rem,7vw,2.2rem); }
  /* cards become a swipe row */
  .card-row { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--pad-x) * -1); padding:80px var(--pad-x) 8px; scrollbar-width:none; }
  .card-row::-webkit-scrollbar { display:none; }
  .card { flex:0 0 78%; scroll-snap-align:center; }
  .card .desc { min-height:0; }
  .box { --k:.74; padding:22px 20px 26px; }
  .referral { flex-direction:column; align-items:flex-start; border-radius:var(--r); padding:24px; }
  .referral-cookie { width:72px; }
  .stack-row { font-size:10.5vw; }
  .stack-cookies { width:22vw; }
  .story-table div { padding:11px 0; }
  .box-grid { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--pad-x) * -1); padding:4px var(--pad-x) 8px; scrollbar-width:none; }
  .box-grid::-webkit-scrollbar { display:none; }
  .box { flex:0 0 86%; scroll-snap-align:center; }
  .story-table div { grid-template-columns:1fr; gap:4px; }
  .closing { padding-inline:8px; }
  .closing-panel { padding-block:100px 120px; }
  .roll { width:120px; top:56px; }
  .roll-l { left:-34px; } .roll-r { right:-34px; }
  .closing-cta { flex-direction:column; width:100%; max-width:320px; }
  .footer-cols { gap:48px; }
  .pack-modal { padding:20px 16px; }
  .pack-footer { flex-direction:column; align-items:stretch; text-align:center; }
  .drawer-head,.drawer-foot { padding-inline:18px; } .drawer-body { padding-inline:18px; }
  .toast { padding-left:16px; font-size:.9375rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; }
  .js .statement-text .w { opacity:1; }
}

html.lenis,html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

.sticker-navy { background:var(--navy); color:var(--cream); }
.hero-sticker2 { z-index:3; right:25%; top:24%; transform:rotate(8deg); }
@media (max-width:600px) { .hero-sticker2 { right:auto; left:2%; top:2%; font-size:.95rem; padding:8px 12px 6px; } }

.stack-row span { display:inline-flex; align-items:center; gap:.4em; padding-right:.4em; }
.stack-row i { font-style:normal; color:var(--pink); font-size:.6em; }

/* one-screen fit */
.stack-row img { flex:none; width:.8em; height:.8em; object-fit:contain; filter:drop-shadow(0 6px 6px rgba(4,14,93,.25)); }
.faq-a a { color:var(--pink-ink); text-decoration:underline; text-underline-offset:3px; }
.boxes .section-head { margin-bottom:clamp(28px,3vw,44px); }
@media (min-width:1101px) {
  .box { --k:.74; padding:24px 36px 32px; text-align:center; justify-items:center; }
  .box .pkg-scene { height:290px; width:100%; }
  .box-four .pkg-scene { height:290px; }
  .box-four .pkg { margin-top:calc(80px * var(--k)); }
  .box-copy { display:grid; justify-items:center; }
  .box-copy p:not(.price) { margin-inline:auto; }
  .box h3 { font-size:clamp(2.2rem,1.4rem + 1.4vw,3rem); }
  .box-copy p:not(.price) { font-size:1rem; }
}
@media (max-width:600px) {
  :root { --section-y:52px; }
  .box { --k:.64; }
  .box h3 { font-size:2.2rem; margin-bottom:8px; }
  .box-copy p:not(.price) { margin-bottom:16px; font-size:.9875rem; }
  .boxes .section-head { margin-bottom:20px; }
  .faq-list { gap:8px; } .faq-list summary { padding:14px 14px 14px 20px; font-size:1rem; }
  .faq-list summary::after { width:34px; height:34px; }
  .faq-head h2 { margin-bottom:12px; } .faq-head p { margin-bottom:16px; }
  .story-body { gap:20px; padding-top:24px; }
  .story-table dd { font-size:.98rem; }
}
@media (min-width:601px) { .faq-list { gap:10px; } .faq-list summary { padding-block:16px; } }
@media (max-width:600px) { .box-copy p:not(.price) { margin-bottom:12px; } .box { padding:18px 18px 22px; } }
@media (max-width:360px) { .hero-sticker,.hero-sticker2 { display:none; } }

@media (max-width:1100px) { .box { text-align:left; } }
@media (min-width:1101px) { .boxes.section { padding-block:clamp(48px,5vw,80px); } .box .pkg-scene, .box-four .pkg-scene { height:262px; } }

.tear-on .tear-mid { gap:12px; }
.tear-on .tear-mid p { max-width:none; font-size:clamp(1rem,.95rem + .35vw,1.25rem); line-height:1.3; }
.tear-on .tear-buy { flex-wrap:nowrap; gap:14px; }
.tear-on .tear-buy .button { min-height:44px; }

@media (max-width:600px) {
  .hero-sticker,.hero-sticker2 { display:none; }
  .hero-spin { bottom:auto; margin:0 auto; width:min(100cqw,100cqh - 64px); height:min(100cqw,100cqh - 64px); }
  .hero-bubble { top:auto; right:0; left:0; bottom:0; margin-inline:auto; width:max-content; max-width:100%; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 16px; border-radius:999px; }
  .hero-bubble strong { max-width:none; font-size:1rem; white-space:nowrap; }
  .bubble-price { white-space:nowrap; font-size:.9375rem; }
  .bubble-add { min-height:38px; }
}
.tear-on .tear-dots.below { top:var(--dots-top); bottom:auto; translate:50% 0; }
@media (max-width:600px) {
  .hero-spin { width:min(100cqw,100cqh - 84px); height:min(100cqw,100cqh - 84px); }
  .hero-bubble { display:grid; grid-template-columns:auto auto; align-items:center; gap:4px 12px; padding:8px 8px 8px 16px; border-radius:20px; }
  .hero-bubble strong { grid-column:1 / -1; font-size:.95rem; }
  .bubble-add { grid-row:1 / span 2; grid-column:2; min-height:40px; }
  .hero-bubble strong { grid-column:1; }
}
@media (max-width:600px) and (max-height:720px) {
  .hero-title { font-size:clamp(1.8rem,8.4vw,2.6rem); }
  .hero-lead { font-size:.875rem; }
  .hero-switch { margin:2px 0 10px; } .hero-switch .arrow { width:42px; height:42px; }
  .hero-lead { margin-bottom:10px; }
}
@media (max-width:600px) {
  .hero-switch { grid-area:cookie; align-self:center; justify-self:stretch; display:flex; justify-content:space-between; margin:0 0 84px !important; pointer-events:none; z-index:4; position:relative; }
  .hero-switch .arrow { pointer-events:auto; width:42px; height:42px; background:var(--cream); }
  .hero-switch .dots { position:absolute; left:0; right:0; bottom:-98px; justify-content:center; pointer-events:auto; display:none; }
  .hero-spin { width:min(100cqw - 100px,100cqh - 84px); height:min(100cqw - 100px,100cqh - 84px); }
  .hero-panel { grid-template-areas:"title" "cookie" "lead" "cta"; grid-template-rows:auto minmax(0,1fr) auto auto; }
  .hero-cookie { margin:8px 0 12px; }
}
@media (max-width:600px) { .hero-switch .arrow:hover, .hero-switch .arrow:active { background:var(--navy); color:var(--cream); } }
/* tablet: same tidy hero as phones, nothing on top of the cookie */
@media (max-width:1100px) and (min-width:901px) { .hero-bubble { right:0; } }
@media (max-width:900px) {
  .hero-sticker,.hero-sticker2 { display:none; }
  .hero-panel { grid-template-areas:"title" "cookie" "lead" "cta"; grid-template-rows:auto minmax(0,1fr) auto auto; }
  .hero-spin { inset:0 0 auto; margin:0 auto; width:min(100cqw - 110px,100cqh - 84px); height:min(100cqw - 110px,100cqh - 84px); }
  .hero-bubble { top:auto; right:0; left:0; bottom:0; margin-inline:auto; width:max-content; max-width:100%; display:grid; grid-template-columns:auto auto; align-items:center; gap:4px 12px; padding:8px 8px 8px 16px; border-radius:20px; }
  .hero-bubble::before { display:none; }
  .hero-bubble strong { grid-column:1; max-width:none; font-size:.95rem; white-space:nowrap; }
  .bubble-price { white-space:nowrap; font-size:.9375rem; }
  .bubble-add { grid-row:1 / span 2; grid-column:2; min-height:40px; }
  .hero-switch { grid-area:cookie; align-self:center; justify-self:stretch; display:flex; justify-content:space-between; margin:0 0 84px !important; pointer-events:none; z-index:4; position:relative; }
  .hero-switch .dots { display:none; }
  .hero-switch .arrow { pointer-events:auto; width:44px; height:44px; background:var(--cream); }
  .hero-switch .arrow:hover,.hero-switch .arrow:active { background:var(--navy); color:var(--cream); }
  .hero-lead { margin-top:4px; }
}
/* hero (tablet + phone): cookie and bubble sit together as one centred group */
@media (max-width:900px) {
  .hero-cookie { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
  .hero-tilt { position:relative; inset:auto; flex:none; width:min(100cqw - 110px,100cqh - 76px); height:min(100cqw - 110px,100cqh - 76px); }
  .hero-spin { position:absolute; inset:0; margin:0; width:100%; height:100%; }
  .hero-bubble { position:relative; inset:auto; margin:0; }
  .hero-switch { margin:0 0 66px !important; }
}
/* boxes: identical scene heights so both headings line up */
@media (max-width:1100px) {
  .box .pkg-scene, .box-four .pkg-scene { height:calc(390px * var(--k)); }
  .box .pkg { margin-top:calc(70px * var(--k)); }
  .box-four .pkg { margin-top:calc(110px * var(--k)); }
}
/* footer wordmark fits narrow screens */
@media (max-width:600px) {
  .footer-mark { font-size:clamp(3rem,17vw,6.4rem); justify-content:center; }
}
.box { padding-top:clamp(36px,4vw,52px); }
.order-form label { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 4px; }
.order-form input { flex:1 0 100%; }
.tear-cookie,.tear-cookie *,.tear-crumbs { pointer-events:none; }
/* FAQ toggle: true circle, plus drawn with two bars so it is optically centred */
.faq-list summary::after {
  content:''; display:block; box-sizing:border-box; flex:0 0 auto; width:40px; height:40px; min-width:40px; aspect-ratio:1; padding:0; border-radius:50%; line-height:0; font-size:0;
  --pc:var(--cream);
  background:
    linear-gradient(var(--pc),var(--pc)) center / 14px 2.5px no-repeat,
    linear-gradient(var(--pc),var(--pc)) center / 2.5px 14px no-repeat,
    var(--navy);
}
.faq-list details[open] summary::after {
  --pc:var(--navy);
  background:
    linear-gradient(var(--pc),var(--pc)) center / 14px 2.5px no-repeat,
    linear-gradient(var(--pc),var(--pc)) center / 2.5px 14px no-repeat,
    var(--pink);
}
@media (max-width:600px) { .faq-list summary::after { width:36px; height:36px; min-width:36px; } }

/* FAQ toggle v3: one SVG holds circle + plus, so they always share a centre */
.faq-list summary::after { content:none !important; display:none !important; }
.faq-q { flex:1 1 auto; min-width:0; }
.faq-icon { display:block; flex:0 0 40px; width:40px; height:40px; overflow:visible; shape-rendering:geometricPrecision; transform-origin:50% 50%; transform-box:fill-box; transition:transform .35s var(--ease); }
.faq-icon circle { fill:var(--navy); transition:fill .3s; }
.faq-icon path { fill:none; stroke:var(--cream); stroke-width:3; stroke-linecap:round; transition:stroke .3s; }
.faq-list details[open] .faq-icon { transform:rotate(45deg); }
.faq-list details[open] .faq-icon circle { fill:var(--pink); }
.faq-list details[open] .faq-icon path { stroke:var(--navy); }
@media (max-width:600px) { .faq-icon { flex-basis:36px; width:36px; height:36px; } }

.hp { position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.order-form .form-note { margin:0; font-size:.78rem; line-height:1.35; color:var(--muted); }


/* Responsive viewport containment — keep decorative motion without page-wide sideways overflow.
   Git/hosting configuration and interactive business logic are unchanged. */
:where(.hero,.hero-frame,.hero-panel,.inside,.tear,.boxes,.story,.closing,.closing-panel,.footer) { max-width:100%; }
:where(.hero-panel,.story-body,.faq,.box-grid,.card-row) > * { min-width:0; }
:where(.hero-title,.tear-title,.tear-item h3,.closing h2,.footer-line) { overflow-wrap:break-word; }
.header-pill { min-width:0; }
.header-actions { flex-shrink:0; }
.hero-cookie { max-width:100%; }
/* At tall browser zoom levels, avoid forcing an oversized hero outside the viewport. */
@media (max-height:700px) and (min-width:901px) {
  .hero-frame { height:auto; min-height:max(480px,100svh - 24px); }
  .hero-panel { min-height:430px; }
  .hero-title { font-size:clamp(2.5rem,5vw,5.4rem); }
}
@media (max-width:900px) {
  .hero-frame { height:auto; min-height:max(600px,100svh - 24px); }
  .hero-panel { min-height:510px; }
  .hero-sticker { max-width:42%; }
  .hero-bubble { max-width:min(42%,190px); }
  .hero-switch { flex-wrap:wrap; justify-content:center; }
  .tear-on .tear { min-height:0; }
  .tear-on .tear-head,.tear-on .tear-mid { min-width:0; }
}
@media (max-width:600px) {
  .header-pill { gap:6px; }
  .brand { flex:0 1 116px; min-width:0; }
  .hero-panel { padding-inline:clamp(10px,3vw,18px); }
  .hero-title { font-size:clamp(1.85rem,9.3vw,3.4rem); }
  .hero-bubble { right:0; max-width:43%; }
  .hero-bubble strong { overflow-wrap:anywhere; }
  .button { max-width:100%; white-space:normal; text-align:center; }
  .card { flex-basis:min(78%,340px); min-width:0; }
  .box { flex-basis:min(86%,390px); min-width:0; }
  .footer-cols { flex-wrap:wrap; gap:24px 48px; }
  .pack-modal { width:calc(100% - 24px); }
}
@media (max-width:360px) {
  .bag-button { padding-inline:8px 5px; }
  .bag-count { min-width:28px; height:28px; }
  .header-pill { padding-left:10px; }
  .hero-sticker,.hero-sticker2 { font-size:.8rem; }
}

/* Prevent off-screen content and maintain order phone prefix */
.phone-wrap { display:flex; align-items:center; border:1.5px solid var(--line); border-radius:14px; background:var(--white); overflow:hidden; }
.phone-prefix { padding-left:16px; font-weight:700; white-space:nowrap; }
.phone-wrap input { flex:1; min-width:0; border:none!important; outline-offset:-3px; padding-left:8px!important; background:transparent!important; }
.phone-wrap:focus-within { outline:2px solid var(--navy); }
.phone-wrap:has(input.invalid) { outline:2px solid #b52444; }
.hero-sticker[hidden] { display:none!important; }
.zoom-normalized body { min-width:0; }


/* Mobile hero layout correction: badges visible; controls beside cookie. */
@media (max-width: 600px) {
  .hero-panel { --mobile-cookie-size: clamp(150px, min(51vw, 27svh), 240px); grid-template-areas: "title" "cookie" "lead" "cta"; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .hero-cookie {
    --mobile-cookie-size: clamp(150px, min(51vw, 27svh), 240px);
    width: 100%; max-width: 420px;
    min-height: calc(var(--mobile-cookie-size) + 110px);
    margin: 8px auto 12px;
    padding-top: 42px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: 12px;
    position: relative;
  }
  .hero-cookie .hero-tilt { width: var(--mobile-cookie-size); height: var(--mobile-cookie-size); flex: 0 0 auto; }
  .hero-cookie .hero-spin { inset: 0; width: 100%; height: 100%; }
  .hero-cookie .hero-sticker,
  .hero-cookie .hero-sticker2 {
    display: block;
    position: absolute;
    top: 0; bottom: auto;
    z-index: 5;
    font-size: clamp(.64rem, 2.8vw, .82rem);
    line-height: 1.05;
    padding: 7px 9px 6px;
    max-width: 90px;
  }
  .hero-cookie .hero-sticker { left: 3%; right: auto; }
  .hero-cookie .hero-sticker2 { right: 3%; left: auto; transform: rotate(8deg); }
  .hero-cookie .hero-sticker[hidden] { display: none !important; }
  .hero-switch {
    grid-area: cookie;
    width: 100%; max-width: 420px;
    justify-self: center;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: calc(50px + var(--mobile-cookie-size) / 2 - 21px) 0 0 !important;
    padding: 0 2px;
    pointer-events: none;
    z-index: 6;
    position: relative;
  }
  .hero-switch .arrow {
    flex: 0 0 38px; width: 38px; height: 38px;
    pointer-events: auto;
  }
  .hero-switch .dots { display: none; }
  .hero-bubble {
    position: relative;
    inset: auto;
    width: fit-content;
    max-width: min(100%, 310px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    padding: 9px 10px 9px 12px;
    border-radius: 18px;
    text-align: left;
  }
  .hero-bubble strong {
    grid-row: 1; grid-column: 1;
    font-size: clamp(.75rem, 3vw, .9rem);
    max-width: none;
    white-space: normal;
    overflow-wrap: normal;
  }
  .hero-bubble .bubble-price {
    grid-row: 2; grid-column: 1;
    font-size: clamp(.68rem, 2.8vw, .82rem);
    white-space: nowrap;
  }
  .hero-bubble .bubble-add {
    grid-row: 1 / span 2; grid-column: 2;
    min-height: 36px; padding: 0 11px;
    white-space: nowrap;
  }
}

/* Isolated checkout telephone prefix layout correction. */
.phone-wrap { display:grid; grid-template-columns:max-content minmax(0,1fr); width:100%; }
.phone-wrap .phone-prefix { display:block; padding:0 0 0 14px; margin:0; position:static; transform:none; }
.phone-wrap input#order-phone { width:100%; min-width:0; max-width:100%; margin:0; padding:12px 12px 12px 9px !important; box-sizing:border-box; }
.phone-error { color:#aa2146; font-size:.82rem; margin:4px 0 10px; }
.phone-error[hidden] { display:none !important; }