/* popsoda inner pages. Generated by tools/build_services.py (shared part copied from index.html) */
/* ───────── Tokens ───────── */
:root{
  /* color: from the Pop Sota brand guide (light mode) + character accents */
  --c-bg:#f5f2ee; --c-surface:#fdfbf9; --c-ink:#221e1b; --c-muted:#7a6c5d; --c-faint:#b8ab9c;
  --c-line:rgba(34,30,27,.1);
  --c-green:#4a9e6b; --c-green-deep:#1a3d2b; --c-green-night:#10261b;
  --c-cherry:#ff3d7f; --c-cherry-deep:#d81c5e; --c-teal:#2fd3c7; --c-teal-deep:#13a99f;
  --c-butter:#f6c945; --c-lilac:#b59cf0; --c-yellow:#f4ff3a;
  --c-glass:rgba(255,255,255,.72);
  /* type */
  --f-display:'Instrument Serif',Georgia,serif;
  --f-body:'DM Sans','Helvetica Neue',sans-serif;
  --f-script:'Pinyon Script','Snell Roundhand',cursive;
  --f-hand:'Caveat','Bradley Hand',cursive;
  --t-xs:clamp(.75rem,.7rem + .25vw,.85rem);
  --t-sm:clamp(.875rem,.82rem + .3vw,1rem);
  --t-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-lg:clamp(1.125rem,1rem + .6vw,1.4rem);
  --t-xl:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);
  --t-2xl:clamp(2.2rem,1.3rem + 3.4vw,4.4rem);
  --t-hero:clamp(2.6rem,1.2rem + 5vw,6rem);
  --t-mega:clamp(5rem,2rem + 17vw,22rem);
  /* space & shape */
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.25rem;--s-6:1.5rem;--s-8:2rem;--s-10:2.5rem;--s-12:3rem;--s-16:4rem;--s-20:5rem;--s-24:6rem;
  --r-sm:.5rem;--r-md:.875rem;--r-lg:1.25rem;--r-xl:1.75rem;--r-full:999px;
  --sh-sm:0 1px 2px rgba(34,30,27,.08),0 2px 8px rgba(34,30,27,.06);
  --sh-md:0 6px 24px rgba(34,30,27,.14);
  --sh-lg:0 24px 60px rgba(20,14,8,.28);
  --sh-note:2px 6px 14px rgba(40,24,8,.28);
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:180ms; --d-med:420ms; --d-slow:800ms;
  --container:1200px;
}

/* ───────── Base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font:400 var(--t-base)/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--c-cherry);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:0;line-height:.8}
.hand{font-family:var(--f-hand);font-weight:500}
.serif{font-family:var(--f-display);font-weight:400}
.container{width:min(100% - 2*var(--s-6),var(--container));margin-inline:auto}

/* Entrance reveal (works without JS: .js class gates hidden state) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out);transition-delay:var(--delay,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .hero [data-reveal]{opacity:1;transform:none;transition:none;animation:revealUp var(--d-slow) var(--ease-out) both;animation-delay:var(--delay,0ms)}
@keyframes revealUp{from{opacity:0;transform:translateY(24px)}}

/* ───────── Top bar ───────── */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:var(--s-4) var(--s-6);pointer-events:none}
.top>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:.45rem;text-decoration:none;font:600 1.15rem/1 var(--f-body);letter-spacing:-.02em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25);transition:color var(--d-med)}
.logo .dots{display:flex;gap:3px}
.logo .dots i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c-cherry) 40%,var(--c-cherry-deep));box-shadow:0 1px 3px rgba(0,0,0,.3)}
.logo .dots i+i{width:9px;height:15px;border-radius:6px;background:radial-gradient(circle at 35% 25%,#fff 0 12%,var(--c-teal) 40%,var(--c-teal-deep))}
.top.scrolled .logo{color:var(--c-ink);text-shadow:none}
.top-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-5);border-radius:var(--r-full);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);font:500 var(--t-sm)/1 var(--f-body);text-decoration:none;box-shadow:var(--sh-sm);transition:transform var(--d-fast) var(--ease-out)}
.top-cta:hover{transform:translateY(-1px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 1.1rem;border-radius:var(--r-full);border:0;font-weight:600;font-size:var(--t-sm);cursor:pointer;text-decoration:none;transition:transform var(--d-fast) var(--ease-spring)}
.btn:hover{transform:translateY(-1px)}
.btn.ink{background:var(--c-ink);color:#fff}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--c-line)}
/* ───────── Footer ───────── */
.foot{position:relative;overflow:hidden;color:#fff;background:var(--c-green-night);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;padding:clamp(5rem,10vw,8rem) 0 9rem;text-align:center}
.foot h2{font:400 var(--t-hero)/.95 var(--f-display);letter-spacing:-.02em;margin:0 0 var(--s-6)}
.foot h2 .script{color:var(--c-teal);font-size:1.25em}
.foot p.lead{color:rgba(255,255,255,.7);max-width:30rem;margin:0 auto var(--s-8)}
.foot form{display:flex;gap:var(--s-2);max-width:30rem;margin:0 auto;background:#fff;border-radius:var(--r-full);padding:var(--s-1)}
.foot input{flex:1;min-width:0;border:0;background:transparent;padding:0 var(--s-5);min-height:48px;color:var(--c-ink);outline:none}
.foot .btn.ink{min-height:48px}
.erupt{position:relative;width:clamp(150px,18vw,230px);margin:0 auto var(--s-6)}
.erupt img{filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))}
.foot .note-l,.foot .note-r{position:absolute;font:500 1.4rem/1.1 var(--f-hand);color:rgba(255,255,255,.6);max-width:11rem}
.foot .note-l{left:8%;top:44%;transform:rotate(-8deg)} .foot .note-r{right:8%;top:52%;transform:rotate(6deg)}
.foot-links{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-20);font-size:var(--t-sm);color:rgba(255,255,255,.6)}
.foot-links a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot-links a:hover{color:#fff}
.foot-links nav{display:flex;gap:var(--s-5)}

/* ───────── Floating pill (Zero-style) ───────── */
.chat-fab{position:fixed;right:max(var(--s-5),env(safe-area-inset-right));bottom:max(var(--s-5),env(safe-area-inset-bottom));z-index:50;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(20,14,8,.25),inset 0 0 0 1px rgba(255,255,255,.7);transition:transform var(--d-med) var(--ease-spring)}
.chat-fab:hover{transform:translateY(-3px) scale(1.04)}
.chat-fab img{position:absolute;bottom:12px;height:34px;width:auto;transition:transform var(--d-med) var(--ease-spring)}
.chat-fab img.p{left:9px;height:27px} .chat-fab img.s{right:11px}
.chat-fab:hover img.p{transform:translateY(-5px)} .chat-fab:hover img.s{transform:rotate(8deg)}
.chat-fab .dot{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 2px #fff}
.chat-fab[aria-expanded="true"]{transform:scale(.92)}


/* ───────── Inner pages ───────── */
.top-cta.ghosty{background:rgba(255,255,255,.75)}
.crumbs{font:600 var(--t-xs)/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.crumbs a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--c-ink)}
.sec{padding:clamp(4rem,9vw,7.5rem) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-10)}
.sec-head h2{font:400 var(--t-xl)/1.02 var(--f-display);letter-spacing:-.02em;margin:0;max-width:22ch}
.sec-head p{margin:0;max-width:30rem;color:var(--c-muted)}
.kicker{font:600 var(--t-xs)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--c-muted))}

/* page hero */
.phero{position:relative;overflow:hidden;background:var(--tint,#f3ece4);padding:clamp(7.5rem,14vw,10rem) 0 clamp(4rem,8vw,6rem)}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 78% 50%,rgba(255,255,255,.75),transparent 70%);pointer-events:none}
.phero .container{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-10);align-items:center}
.phero h1{font:400 var(--t-hero)/.95 var(--f-display);letter-spacing:-.03em;margin:var(--s-4) 0 var(--s-6)}
.phero h1 .script{color:var(--accent);font-size:1.08em}
.phero .lede{font-size:var(--t-lg);max-width:34rem;margin:0 0 var(--s-8);color:#4a4038}
.ctas{display:flex;gap:var(--s-3);flex-wrap:wrap}
.btn.big{min-height:52px;padding:0 1.5rem;font-size:var(--t-base)}
.btn.light{background:#fff;box-shadow:var(--sh-sm)}
.phero .stage{position:relative;aspect-ratio:1;max-width:440px;justify-self:center;width:100%}
.phero .stage .disc{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,var(--tint) 70%);box-shadow:inset 0 -20px 40px rgba(0,0,0,.05)}
.phero .stage img{position:absolute;filter:drop-shadow(0 24px 22px rgba(40,20,0,.28))}
.phero .stage .lead{width:56%;left:22%;bottom:12%;animation:bob 4.5s ease-in-out infinite}
.phero .stage .lead.solo{width:auto;height:70%;max-width:76%;left:50%;bottom:13%;translate:-50% 0;object-fit:contain}
.phero .stage .side{width:30%;right:2%;bottom:8%;animation:bob 5.2s ease-in-out -1.4s infinite}
.phero .stage .side.left{right:auto;left:0}
.phero .stage .tag{position:absolute;top:10%;right:4%;font:500 1.5rem/1.05 var(--f-hand);transform:rotate(6deg);color:var(--c-ink);max-width:10rem;text-align:center}
@keyframes bob{50%{transform:translateY(-12px) rotate(-2deg)}}

/* included */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s-4)}
.incl li{list-style:none;background:var(--c-surface);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-sm);position:relative;transition:transform var(--d-med) var(--ease-out),box-shadow var(--d-med)}
.incl li:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.incl li b{display:block;font:400 1.55rem/1.1 var(--f-display);margin-bottom:.4rem}
.incl li span{color:var(--c-muted);font-size:var(--t-sm)}
.incl li::before{content:attr(data-n);position:absolute;top:var(--s-4);right:var(--s-5);font:500 1.2rem var(--f-hand);color:var(--accent)}
.incl{padding:0;margin:0}

/* demo panel */
.demo{background:var(--c-surface);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:clamp(1.25rem,3vw,2.5rem);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.demo h3{font:400 var(--t-xl)/1.02 var(--f-display);margin:.6rem 0 .8rem}
.demo p{color:var(--c-muted);margin:0 0 var(--s-5)}
.demo .fine{font-size:var(--t-xs);color:var(--c-faint);margin-top:var(--s-4)}
.seg{display:inline-flex;padding:4px;border-radius:var(--r-full);background:rgba(34,30,27,.06);gap:2px;flex-wrap:wrap}
.seg button{min-height:40px;padding:0 1rem;border:0;border-radius:var(--r-full);background:none;cursor:pointer;font-weight:600;font-size:var(--t-sm)}
.seg button[aria-pressed="true"]{background:#fff;box-shadow:var(--sh-sm)}
.board{background:#fff;border-radius:var(--r-lg);padding:var(--s-5);box-shadow:inset 0 0 0 1px var(--c-line);min-height:300px}

/* odds bars (AEO) */
.odds{display:grid;gap:.7rem}
.odds .r{display:grid;grid-template-columns:6.5rem 1fr 3.2rem;gap:.8rem;align-items:center;font-size:var(--t-sm)}
.odds .track{position:relative;height:12px;border-radius:6px;background:rgba(34,30,27,.07)}
.odds .fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--c-teal));width:calc(var(--v)*1%);transition:width 1s var(--ease-out)}
.odds .err{position:absolute;top:-4px;bottom:-4px;left:calc(var(--lo)*1%);width:calc((var(--hi) - var(--lo))*1%);border-left:2px solid var(--c-ink);border-right:2px solid var(--c-ink);opacity:.35;transition:left 1s var(--ease-out),width 1s var(--ease-out)}
.odds .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.odds-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px dashed var(--c-line)}
.odds-sum b{font:400 2.4rem/1 var(--f-display)}

/* column chart (SEO) */
.cols{display:flex;align-items:flex-end;gap:6px;height:220px;padding-top:1.5rem}
.cols i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--c-teal),var(--accent));height:calc(var(--v)*1%);transition:height .9s var(--ease-out);position:relative}
.cols i::after{content:attr(data-m);position:absolute;bottom:-1.4rem;left:50%;transform:translateX(-50%);font-size:10px;color:var(--c-faint)}
.cols-legend{display:flex;justify-content:space-between;margin-top:2rem;font-size:var(--t-sm);color:var(--c-muted)}
.cols-legend b{color:var(--c-ink);font:400 1.8rem/1 var(--f-display)}

/* scope builder (Shopify) */
.scope{display:grid;gap:.5rem}
.scope label{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem 1rem;border-radius:var(--r-md);cursor:pointer;box-shadow:inset 0 0 0 1px var(--c-line);transition:background-color var(--d-fast),box-shadow var(--d-fast)}
.scope label:has(input:checked){background:#f4f3f1;box-shadow:inset 0 0 0 2px var(--c-ink)}
.scope input{width:20px;height:20px;margin-top:2px;accent-color:var(--c-ink);flex:none}
.scope b{display:block;font-weight:600}
.scope small{color:var(--c-muted)}
.est{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--c-ink);color:#fff;gap:1rem;flex-wrap:wrap}
.est b{font:400 2rem/1 var(--f-display)}

/* guarantee timeline (Store Care) */
.tl{position:relative;margin:2.5rem 0 1rem}
.tl input[type=range]{width:100%;accent-color:var(--c-ink);height:44px}
.tl .marks{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--c-muted);margin-top:.3rem}
.tl-card{display:flex;gap:1rem;align-items:center;padding:var(--s-5);border-radius:var(--r-lg);background:#f4f3f1;min-height:110px}
.tl-card .ic{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;background:#fff;box-shadow:var(--sh-sm)}
.tl-card b{display:block;font:400 1.5rem/1.1 var(--f-display)}
.tl-card span{color:var(--c-muted);font-size:var(--t-sm)}

/* device preview (UX/UI) */
.device{margin:0 auto;background:#1d1a18;border-radius:28px;padding:10px;transition:width .7s var(--ease-out),border-radius .7s var(--ease-out);width:min(100%,250px)}
.device[data-d="desk"]{width:100%;border-radius:14px}
.screen{background:#fbf8f3;border-radius:20px;overflow:hidden;display:grid;gap:8px;padding:12px;grid-template-columns:1fr;transition:border-radius .7s}
.device[data-d="desk"] .screen{border-radius:8px;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto auto}
.screen .ph{border-radius:10px;background:url(/assets/biz/skincare.webp) center/cover;aspect-ratio:1}
.device[data-d="desk"] .screen .ph{grid-row:1/4}
.screen .ln{height:10px;border-radius:5px;background:rgba(34,30,27,.12)}
.screen .ln.t{height:18px;width:70%;background:rgba(34,30,27,.75)}
.screen .ln.s{width:45%}
.screen .buy{min-height:38px;border-radius:999px;background:var(--accent);color:#fff;font:600 12px/38px var(--f-body);text-align:center}
.screen .chips{display:flex;gap:6px}.screen .chips i{flex:1;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(34,30,27,.2)}
.screen .chips i:first-child{box-shadow:inset 0 0 0 2px var(--c-ink)}
.notes-ux{display:grid;gap:.5rem;margin-top:var(--s-5)}
.notes-ux li{list-style:none;font:500 1.25rem/1.15 var(--f-hand);color:var(--accent)}
.notes-ux{padding:0}

/* experiment board (Social) */
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.kanban .colm{background:#f6f3ef;border-radius:var(--r-md);padding:.6rem;min-height:250px}
.kanban h4{margin:.1rem .2rem .6rem;font:600 var(--t-xs)/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);display:flex;justify-content:space-between}
.card-x{background:#fff;border-radius:10px;padding:.6rem .7rem;margin-bottom:.5rem;box-shadow:var(--sh-sm);font-size:var(--t-xs);line-height:1.35;animation:cardIn .5s var(--ease-spring) both}
.card-x b{display:block;font-size:var(--t-sm)}
.card-x .lift{color:var(--c-green);font-weight:700}.card-x .lift.no{color:var(--c-muted)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.96)}}

/* process */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--s-4);counter-reset:s}
.steps li{list-style:none;padding:var(--s-6) var(--s-5);border-radius:var(--r-lg);background:var(--bg);min-height:220px;display:flex;flex-direction:column;gap:.5rem}
.steps li .num{font:400 2.4rem/1 var(--f-display);color:var(--c);margin-bottom:auto}
.steps li b{font:400 1.45rem/1.1 var(--f-display)}
.steps li span{font-size:var(--t-sm);color:#5a4f45}
.steps{padding:0;margin:0}

/* faq */
.faq{max-width:48rem}
.faq details{border-top:1px solid var(--c-line)}
.faq details:last-child{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;font:400 1.5rem/1.15 var(--f-display);padding:.6rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.8rem/1 var(--f-body);transition:transform var(--d-med) var(--ease-out);color:var(--accent)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 1.2rem;color:var(--c-muted);max-width:40rem}

/* service cards (overview + related) */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:var(--s-5)}
.scard{position:relative;display:flex;flex-direction:column;min-height:380px;padding:var(--s-6);border-radius:var(--r-xl);background:var(--tint);text-decoration:none;overflow:hidden;transition:transform var(--d-med) var(--ease-out),box-shadow var(--d-med),opacity var(--d-med)}
.scard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.scard .who{font:600 var(--t-xs)/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.scard h3{font:400 2.1rem/1 var(--f-display);margin:.7rem 0 .6rem;max-width:12ch}
.scard p{margin:0;color:#5a4f45;font-size:var(--t-sm);max-width:min(24rem,62%);position:relative;z-index:1}
.scard img{position:absolute;right:-1%;bottom:-5%;height:50%;width:auto;max-width:44%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 16px 16px rgba(40,20,0,.25));transition:transform .6s var(--ease-spring)}
.scard:hover img{transform:rotate(-8deg) translateY(-10px) scale(1.05)}
.scard .go{margin-top:auto;font-weight:600;font-size:var(--t-sm);display:inline-flex;gap:.3rem;align-items:center;position:relative;z-index:1}
.scard .go::after{content:"→";transition:transform var(--d-fast) var(--ease-out)}
.scard:hover .go::after{transform:translateX(4px)}
.scard.dim{opacity:.3;transform:scale(.98)}
.needs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s-8);align-items:center}
.needs span{font:500 1.35rem var(--f-hand);margin-right:.3rem}
.needs button{min-height:44px;padding:0 1.1rem;border-radius:var(--r-full);border:0;background:#fff;box-shadow:var(--sh-sm);cursor:pointer;font-weight:600;font-size:var(--t-sm)}
.needs button[aria-pressed="true"]{background:var(--c-ink);color:#fff}

/* overview hero */
.ohero{padding:clamp(8rem,15vw,11rem) 0 clamp(3rem,6vw,5rem);text-align:center;position:relative;overflow:hidden}
.ohero h1{font:400 var(--t-hero)/.92 var(--f-display);letter-spacing:-.03em;margin:var(--s-4) auto var(--s-6);max-width:14ch}
.ohero h1 .script{color:var(--c-cherry-deep)}
.ohero p{max-width:34rem;margin:0 auto;color:var(--c-muted);font-size:var(--t-lg)}
.ohero .row-chars{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.5rem,2vw,1.5rem);margin-top:var(--s-10)}
.ohero .row-chars{flex-wrap:wrap}.ohero .row-chars a{display:block;transition:transform .5s var(--ease-spring)}.ohero .row-chars a:hover{transform:translateY(-8px) rotate(-6deg)}
.ohero .row-chars img{height:clamp(56px,7vw,92px);width:auto;filter:drop-shadow(0 12px 10px rgba(40,20,0,.22));animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.5s)}
.ohero .row-chars .arrow{font:500 1.6rem var(--f-hand);color:var(--c-muted);align-self:center}

.foot.slim{padding-top:clamp(4rem,8vw,6rem)}

/* demos added with the eight-service lineup */
.demo-sec+.demo-sec{margin-top:var(--s-6)}
.tp{width:min(100%,360px);aspect-ratio:16/10;border-radius:14px;background:#1a3d2b;color:#fff;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-md);transition:all .6s var(--ease-out)}
.tp-mark{display:flex;align-items:center;gap:4px;font:600 13px var(--f-body)}
.tp-mark i{width:9px;height:9px;border-radius:50%;background:var(--c-cherry)}.tp-mark i+i{width:7px;height:11px;border-radius:4px;background:var(--c-teal);margin-right:4px}
.tp-h{font:400 1.6rem/1 var(--f-display);margin-top:auto}
.tp-sw{display:flex;gap:6px}.tp-sw i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.tp-btn{align-self:flex-start;padding:7px 14px;border-radius:999px;background:var(--c-yellow);color:#10261b;font:600 11px var(--f-body)}
.tp[data-t="social"]{width:min(100%,280px);aspect-ratio:1;background:var(--c-cherry);border-radius:18px}
.tp[data-t="social"] .tp-h{font-size:2rem}
.tp[data-t="app"]{width:min(100%,220px);aspect-ratio:9/16;background:#fbf8f3;color:var(--c-ink);border-radius:26px;border:8px solid #1d1a18}
.tp[data-t="app"] .tp-h{font-size:1.4rem;margin-top:20px}
.tp[data-t="app"] .tp-btn{align-self:stretch;text-align:center;margin-top:auto;background:var(--c-ink);color:#fff;padding:12px}
.calc{display:grid;gap:.5rem}
.calc label{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);font-weight:600}
.calc label b{font:400 1.4rem/1 var(--f-display)}
.calc input[type=range]{width:100%;accent-color:var(--c-ink);height:40px;margin-bottom:.4rem}
.stack{display:grid;gap:6px}
.layer{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding:0 1.1rem;border:0;border-radius:var(--r-md);cursor:pointer;text-align:left;font:600 var(--t-sm) var(--f-body);background:#f4f3f1;transition:background-color var(--d-fast),transform var(--d-med) var(--ease-spring)}
.layer small{font-weight:400;color:var(--c-muted)}
.layer:nth-child(2){margin-inline:10px}.layer:nth-child(3){margin-inline:20px}.layer:nth-child(4){margin-inline:30px}
.layer[aria-pressed="true"]{background:var(--c-ink);color:#fff;transform:scale(1.02)}
.layer[aria-pressed="true"] small{color:rgba(255,255,255,.7)}
.layer-note{margin:.6rem 0 0;font:500 1.25rem/1.2 var(--f-hand);color:var(--accent);min-height:3rem}
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.week .d{display:flex;flex-direction:column;gap:6px}
.week .d b{font:600 10px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);padding:4px 2px}
.week .post{border-radius:10px;padding:8px;min-height:84px;font-size:11px;line-height:1.3;background:var(--pc);animation:cardIn .5s var(--ease-spring) both}
.week .post small{display:block;font:600 9px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.monthly{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s-8);align-items:start;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-xl);background:var(--c-green-deep);color:#fff}
.monthly h2{font:400 var(--t-xl)/1 var(--f-display);margin:.5rem 0 0}
.monthly .kicker{color:var(--c-teal)}
.monthly ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.monthly li{display:flex;gap:.7rem;align-items:baseline;padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.12)}
.monthly li::before{content:"✓";color:var(--c-yellow);font-weight:700}
@media (max-width:640px){.monthly{grid-template-columns:minmax(0,1fr)}.week{grid-template-columns:repeat(3,minmax(0,1fr))}.layer:nth-child(n){margin-inline:0}}

@media (max-width:900px){
  .phero .container{grid-template-columns:minmax(0,1fr)}
  .phero .stage{max-width:300px;order:-1;margin-bottom:-1rem}
  .demo{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .phero .stage{max-width:210px}
  .phero .stage .tag{top:-4%;right:-36%;font-size:1.15rem;max-width:7.5rem}
}
@media (max-width:640px){
  .chat-fab{width:58px;height:58px;right:var(--s-4);bottom:max(var(--s-4),env(safe-area-inset-bottom))}
  .chat-fab img{bottom:10px;height:30px}.chat-fab img.p{height:24px;left:8px}
  .foot .note-l,.foot .note-r{display:none}
  .foot-links{justify-content:center}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{min-height:0}
  .kanban{grid-template-columns:minmax(0,1fr)}
  .kanban .colm{min-height:0}
  .odds .r{grid-template-columns:5.2rem 1fr 2.8rem}
  .scard{min-height:320px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* SEO & AEO: audit hero, discipline cards, library lists */
.ahero .kicker.ak{display:inline-block;margin-top:var(--s-4);color:var(--accent)}
.ahero h1{margin-top:var(--s-2)}
.ahero .container{align-items:start}
.ahero .stage{margin-top:var(--s-6)}
.audit{max-width:40rem}
.audit-form{display:flex;gap:6px;padding:6px;border-radius:var(--r-full);background:#fff;box-shadow:0 14px 40px rgba(20,14,8,.14),inset 0 0 0 1px var(--c-line)}
.audit-form input{flex:1;min-width:0;border:0;background:none;padding:0 1.1rem;min-height:52px;font-size:var(--t-lg);outline:none}
.audit-form .btn{min-height:52px;padding:0 1.4rem;font-size:var(--t-base)}
.audit-form:focus-within{box-shadow:0 0 0 3px var(--accent),0 14px 40px rgba(20,14,8,.14)}
.audit-form.bad{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.audit-fine{margin:.8rem 0 0 1rem;font-size:var(--t-xs);color:var(--c-muted)}
.audit-fine span{color:var(--c-faint)}
.audit-out{margin-top:var(--s-6);background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:clamp(1rem,2.5vw,1.75rem)}
.ao-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:var(--s-5)}
.ao-head b{font:400 1.5rem/1.1 var(--f-display)}
.ao-head small{display:block;color:var(--c-muted);font-size:var(--t-xs)}
.ao-score{font:400 3rem/1 var(--f-display);color:var(--accent)}
.ao-score small{font:600 var(--t-xs) var(--f-body);color:var(--c-muted);display:block;text-align:right}
.ao-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ao-g{border-radius:var(--r-md);background:#f6f4f0;padding:12px 14px}
.ao-g h4{margin:0 0 8px;display:flex;justify-content:space-between;font:600 var(--t-xs)/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.ao-g h4 em{font-style:normal;color:var(--accent)}
.ao-c{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-xs);line-height:1.35;padding:5px 0;color:var(--c-muted)}
.ao-c i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#cfc8bd;margin-top:1px}
.ao-c.pass i{background:#2e9b63}.ao-c.warn i{background:#e2a400}.ao-c.fail i{background:#d8424c}
.ao-c.wait i{background:transparent;border:2px solid #cfc8bd;border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ao-c b{color:var(--c-ink);font-weight:600}
.ao-fixes{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px dashed var(--c-line)}
.ao-fixes h4{margin:0 0 .5rem;font:400 1.3rem/1 var(--f-display)}
.ao-fixes ol{margin:0;padding-left:1.2rem;font-size:var(--t-sm);display:grid;gap:.3rem}
.ao-cta{margin-top:var(--s-5);display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:12px;border-radius:var(--r-lg);background:var(--c-green-deep);color:#fff}
.ao-cta p{margin:0 auto 0 4px;font-size:var(--t-sm);flex:1 1 14rem}
.ao-cta input{flex:1 1 12rem;min-height:44px;border:0;border-radius:var(--r-full);padding:0 1rem}
.ao-cta .btn{background:var(--c-yellow);color:var(--c-green-night)}
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.dcard{display:flex;flex-direction:column;gap:.35rem;padding:var(--s-5);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-sm);text-decoration:none;color:var(--c-ink);transition:transform var(--d-med) var(--ease-out),box-shadow var(--d-med)}
.dcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.dcard b{font:400 2.4rem/1 var(--f-display);color:var(--accent)}
.dcard span{font-weight:600;font-size:var(--t-sm)}
.dcard small{color:var(--c-muted);font-size:var(--t-xs);line-height:1.4}
.dcard.on{outline:2px solid var(--accent)}
.pillars li::before{display:none}
.lib-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-6)}
.lib-col{position:relative;background:var(--c-surface);border-radius:var(--r-xl);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--sh-sm)}
.lib-col h3{font:400 var(--t-xl)/1.02 var(--f-display);margin:.5rem 0 1rem}
.lib-col .kicker{color:var(--accent)}
.guide-list,.q-list,.ind-list{margin:0;padding:0;list-style:none}
.guide-list li{display:flex;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--c-line);font-size:var(--t-sm)}
.guide-list li span{font:500 1.05rem/1.2 var(--f-hand);color:var(--accent);min-width:1.6rem}
.q-list li{padding:.55rem 0;border-top:1px solid var(--c-line);font:400 1.15rem/1.25 var(--f-display)}
.ind-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:.8rem}
.ind-list li{padding:.4rem .75rem;border-radius:var(--r-full);background:#f4f1ec;font-size:var(--t-xs)}
.soon{position:absolute;top:1.25rem;right:1.25rem;font:500 1.1rem var(--f-hand);color:var(--c-muted);transform:rotate(4deg)}
.lib-col .soon:not(:first-of-type){position:static;display:inline-block;margin-top:.6rem}
@media (max-width:900px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lib-grid{grid-template-columns:minmax(0,1fr)}.ahero .stage{display:none}}
@media (max-width:640px){.ao-groups{grid-template-columns:minmax(0,1fr)}.audit-form{flex-wrap:wrap;border-radius:var(--r-lg)}.audit-form .btn{flex:1 1 100%}}

/* Contact: soda fountain order form */
.ctc{padding:clamp(7.5rem,13vw,9.5rem) 0 var(--sec-y,7rem);background:radial-gradient(90% 60% at 30% 0%,#fdeef3 0%,transparent 60%),radial-gradient(70% 60% at 90% 10%,#e6f7f4 0%,transparent 60%)}
.ctc-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.ctc-head .kicker{color:var(--c-cherry-deep);margin-top:var(--s-4)}
.ctc-head h1{font:400 var(--t-hero)/.95 var(--f-display);letter-spacing:-.035em;margin:.6rem 0 var(--s-5)}
.ctc-head h1 .script{color:var(--c-cherry-deep);font-size:1.05em}
.ctc-head .lede{font-size:var(--t-lg);color:#5b4f44;margin:0;max-width:36rem}
.order{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}

/* the dispenser */
.machine{position:relative;max-width:1040px;width:100%;margin:0 auto}
.m-top{padding:18px 18px 0;border-radius:34px 34px 10px 10px;background:linear-gradient(180deg,#3a3532,#1d1a18 60%,#141210);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.6)}
.m-panel{position:relative;height:clamp(200px,24vw,270px);border-radius:22px 22px 6px 6px;overflow:hidden;display:flex;align-items:center;padding:0 clamp(1.2rem,4vw,3rem);
  background:radial-gradient(120% 140% at 20% 30%,#ff7aa8 0%,#ff3d7f 35%,#c2124f 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -30px 60px rgba(90,0,30,.35)}
.m-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.28) 0 18%,transparent 18% 100%);pointer-events:none}
.mp-glass{position:relative;flex:none;width:clamp(110px,15vw,170px);aspect-ratio:200/240;margin-right:clamp(1rem,3vw,2.5rem);clip-path:polygon(4% 2%,96% 2%,84% 98%,16% 98%);background:linear-gradient(180deg,#ffe2ec 0 12%,#2fd3c7 12% 52%,#f6c945 52% 76%,#b59cf0 76%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.mp-fizz{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.8) 0 2px,transparent 3px) 0 0/18px 22px;opacity:.5;animation:fizzUp 3s linear infinite}
@keyframes fizzUp{to{background-position:0 -66px}}
.mp-copy{position:relative;z-index:1;color:#fff;display:grid;gap:.4rem}
.mp-logo{display:flex;align-items:center;gap:4px;font:600 .95rem/1 var(--f-body);letter-spacing:-.01em;opacity:.95}
.mp-logo i{width:11px;height:11px;border-radius:50%;background:#fff}.mp-logo i+i{width:8px;height:13px;border-radius:5px;background:var(--c-teal);margin-right:4px}
.mp-copy b{font:400 clamp(2rem,1.2rem + 3vw,3.8rem)/.92 var(--f-display);letter-spacing:-.03em;text-shadow:0 4px 20px rgba(90,0,30,.35)}
.mp-copy small{font:500 1.2rem var(--f-hand);opacity:.9}
.mp-pop,.mp-soda{position:absolute;bottom:-6px;filter:drop-shadow(0 12px 12px rgba(80,0,30,.4))}
.mp-pop{right:clamp(4.5rem,11vw,8.5rem);width:clamp(70px,9vw,110px)}.mp-soda{right:clamp(1.2rem,4vw,3rem);width:clamp(46px,6vw,72px)}
.mp-led{position:absolute;top:14px;right:16px;display:flex;align-items:baseline;gap:.5rem;padding:.35rem .7rem;border-radius:8px;background:#120e0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mp-led span{font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;color:#8a7f78}
.mp-led b{font:600 1.1rem/1 ui-monospace,Menlo,monospace;color:var(--c-yellow);text-shadow:0 0 8px rgba(244,255,58,.6)}

.m-valves{border:0;margin:0;padding:16px clamp(10px,2vw,22px) 0;background:repeating-linear-gradient(90deg,#d9dde1 0 2px,#cfd4d9 2px 4px),linear-gradient(180deg,#e9ecef,#b9c0c6);background-blend-mode:multiply;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.15)}
.v-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(54px,.7fr) repeat(4,minmax(0,1fr));gap:clamp(6px,1vw,12px);align-items:start}
.valve{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.valve input{position:absolute;opacity:0;pointer-events:none}
.v-label{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg,#fff,var(--tint));box-shadow:0 0 0 3px #3a3532,0 6px 10px -4px rgba(0,0,0,.4);text-align:center;transition:transform .3s var(--ease-spring),box-shadow .2s}
.v-label img{height:clamp(30px,4vw,48px);width:auto;filter:drop-shadow(0 4px 4px rgba(40,20,0,.2));transition:transform .45s var(--ease-spring)}
.v-label b{font:600 clamp(9px,.85vw,11.5px)/1.15 var(--f-body);color:var(--c-ink);min-height:2.3em;display:flex;align-items:center}
.v-nozzle{width:42%;height:22px;margin-top:6px;border-radius:4px 4px 10px 10px;background:linear-gradient(90deg,#55504c,#2a2624 45%,#55504c);box-shadow:inset 0 -6px 0 #151312}
.v-lever{width:12%;min-width:7px;height:clamp(40px,5vw,62px);margin-top:2px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#4a4542,#2b2725,#4a4542);transform-origin:top;transition:transform .35s var(--ease-spring)}
.valve:hover .v-label img{transform:translateY(-3px) rotate(-6deg)}
.valve:hover .v-lever{transform:rotate(-8deg)}
.valve:has(input:checked) .v-label{box-shadow:0 0 0 3px var(--accent),0 0 22px -2px var(--accent),0 6px 10px -4px rgba(0,0,0,.4)}
.valve:has(input:checked) .v-lever{transform:rotate(-22deg);background:linear-gradient(90deg,var(--accent),#2b2725)}
.valve:has(input:checked) .v-label::after{content:"✓";position:absolute;top:-8px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.valve:has(input:focus-visible) .v-label{outline:2.5px solid var(--c-cherry);outline-offset:5px}
.chute{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;padding:0}
.c-body{width:100%;height:clamp(78px,9vw,104px);border-radius:10px 10px 18px 18px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.15) 40%,rgba(255,255,255,.5));box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),inset 0 -14px 20px rgba(160,200,220,.35)}
.c-lever{width:46%;height:clamp(30px,3.6vw,44px);border-radius:0 0 10px 10px;border:3px solid #9aa3aa;border-top:0;transform-origin:top;transition:transform .35s var(--ease-spring)}
.chute small{font:600 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#59616a}
.chute[aria-pressed="true"] .c-lever{transform:rotate(-14deg)}
.chute:focus-visible{outline:2.5px solid var(--c-cherry);outline-offset:4px;border-radius:12px}

.m-bay{position:relative;height:clamp(250px,28vw,320px);background:linear-gradient(180deg,#c7cdd2,#aeb6bd 70%,#9aa3ab);box-shadow:inset 0 14px 20px -12px rgba(0,0,0,.35)}
.stream{position:absolute;top:0;left:var(--sx,50%);width:10px;margin-left:-5px;height:calc(100% - var(--cup-h,190px) - 40px + 8px);border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,rgba(255,255,255,.55),var(--sc,#f2d7a6) 35%,var(--sc,#f2d7a6) 65%,rgba(255,255,255,.4));transform-origin:top;transform:scaleY(0);z-index:3}
.stream.on{animation:pour .9s ease-out}
.stream.ice{width:30px;margin-left:-15px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 34%,transparent 36%) 0 0/30px 22px repeat-y;animation:pour .8s ease-out}
@keyframes pour{0%{transform:scaleY(0)}25%{transform:scaleY(1)}80%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(30%);opacity:0}}
.ft-cup{position:absolute;bottom:40px;left:var(--cx,50%);width:var(--cup-w,150px);height:var(--cup-h,180px);translate:-50% 0;z-index:2;transition:left .55s var(--ease-out),width .5s var(--ease-spring),height .5s var(--ease-spring)}
.ft-liquid{position:absolute;inset:0;clip-path:polygon(3% 2%,97% 2%,85% 98%,15% 98%)}
.ft-liquid::before{content:"";position:absolute;inset:auto 0 0;height:var(--fill,0%);background:var(--grad,linear-gradient(#f2d7a6,#e8b96a));transition:height .9s var(--ease-out),background .6s}
.ft-bubbles{position:absolute;inset:auto 0 0;height:var(--fill,0%);overflow:hidden;transition:height .9s var(--ease-out)}
.ft-bubbles i{position:absolute;bottom:-10px;left:var(--x);width:var(--w);height:var(--w);border-radius:50%;background:rgba(255,255,255,.75);animation:rise var(--d) linear infinite;animation-delay:var(--delay)}
@keyframes rise{to{transform:translateY(-260px) translateX(6px)}}
.ft-foam{position:absolute;left:0;right:0;bottom:var(--fill,0%);height:14px;margin-bottom:-6px;background:radial-gradient(circle at 10% 60%,#fff 30%,transparent 32%) 0 0/18px 14px repeat-x,#fffaf2;opacity:0;transition:opacity .4s,bottom .9s var(--ease-out)}
.machine.full .ft-foam{opacity:1}
.ft-ice{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s}
.machine.iced .ft-ice{opacity:1}
.ft-ice i{position:absolute;width:26%;aspect-ratio:1;border-radius:22%;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.3));box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);bottom:max(8%,calc(var(--fill,0%) - 14%));transition:bottom .9s var(--ease-out)}
.ft-ice i:nth-child(1){left:20%;rotate:12deg}.ft-ice i:nth-child(2){left:48%;rotate:-18deg;bottom:max(12%,calc(var(--fill,0%) - 9%))}.ft-ice i:nth-child(3){left:34%;rotate:30deg;bottom:max(4%,calc(var(--fill,0%) - 22%))}
.ft-glass{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.2))}
.ft-lid{position:absolute;left:-4%;right:-4%;top:-7%;height:9%;border-radius:10px 10px 4px 4px;background:linear-gradient(#ff6a9a,#d81c5e);box-shadow:0 4px 8px rgba(120,10,50,.25);transform:translateY(-200%);opacity:0;transition:transform .6s var(--ease-spring),opacity .3s}
.ft-straw{position:absolute;left:58%;bottom:88%;width:8%;height:62%;border-radius:6px;background:repeating-linear-gradient(-45deg,#fff 0 8px,#ff3d7f 8px 16px);rotate:12deg;transform-origin:bottom;transform:translateY(-200%);opacity:0;transition:transform .7s var(--ease-spring) .15s,opacity .3s .15s}
.machine.done .ft-lid,.machine.done .ft-straw{transform:none;opacity:1}
.m-tray{position:absolute;left:0;right:0;bottom:0;height:40px;border-radius:0 0 22px 22px;background:repeating-linear-gradient(90deg,#2a2725 0 8px,#141210 8px 12px);box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 24px 40px -20px rgba(0,0,0,.6)}
.m-tray::before{content:"";position:absolute;inset:-6px -10px auto;height:10px;border-radius:6px;background:linear-gradient(#4a4542,#1d1a18)}
.m-hint{margin:.9rem 0 0;text-align:center;font:500 1.2rem/1.2 var(--f-hand);color:var(--c-muted)}

/* rest of the order */
.o-rest{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1rem,2vw,1.5rem);align-items:start}
.o-step{border:0;margin:0;padding:clamp(1.2rem,2.5vw,1.8rem);border-radius:28px;background:var(--c-surface);box-shadow:var(--sh-card,0 6px 24px rgba(34,30,27,.1))}
.o-step legend{float:left;width:100%;display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem;font:400 1.5rem/1.1 var(--f-display);letter-spacing:-.015em}
.o-step legend span{font:500 1.15rem/1 var(--f-hand);color:var(--c-cherry-deep)}
.sizes{clear:both;display:grid;gap:8px}
.sz{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.9rem;align-items:center;padding:.8rem 1rem;border-radius:16px;background:#f6f2ec;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(34,30,27,.06);transition:box-shadow .2s,transform .35s var(--ease-spring)}
.sz input{position:absolute;opacity:0;pointer-events:none}
.sz i{grid-row:1/3;display:block;width:26px;height:34px;clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);background:linear-gradient(#ffd0de,#ff3d7f)}
.sz-sip i{transform:scale(.72);transform-origin:bottom}.sz-big i{transform:scale(1.2);transform-origin:bottom}
.sz b{font:400 1.2rem/1 var(--f-display)}
.sz small{font-size:11px;color:var(--c-muted)}
.sz:has(input:checked){background:#fff;box-shadow:inset 0 0 0 2px var(--c-ink)}
.sz:has(input:focus-visible){outline:2.5px solid var(--c-cherry);outline-offset:2px}
.o-fields{clear:both;display:grid;gap:10px}
.o-f{display:grid;gap:.35rem;font-size:var(--t-xs);font-weight:600;color:var(--c-muted);clear:both}
.o-f em{font-style:normal;font-weight:400;color:var(--c-faint)}
.o-f input,.o-f textarea{width:100%;border:0;border-radius:14px;padding:.9rem 1rem;background:#f6f2ec;font:400 var(--t-base) var(--f-body);color:var(--c-ink);box-shadow:inset 0 0 0 1px rgba(34,30,27,.06);transition:box-shadow .2s,background .2s;resize:vertical}
.o-f input:focus,.o-f textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--c-ink)}
.o-f input.bad{box-shadow:inset 0 0 0 2px #d8424c}
.o-pour{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.lever{position:relative;display:inline-flex;align-items:center;gap:.8rem;min-height:60px;padding:0 1.6rem 0 .6rem;border:0;border-radius:999px;cursor:pointer;color:#fff;font:600 var(--t-base) var(--f-body);
  background:linear-gradient(180deg,#ff5d93,#d81c5e);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 24px -10px rgba(216,28,94,.7);transition:transform .35s var(--ease-spring),filter .2s}
.lever .knob{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffd6e3 40%,#ff9dbd);box-shadow:0 4px 8px rgba(120,10,50,.35);transition:transform .5s var(--ease-spring)}
.lever:hover .knob{transform:translateY(3px) rotate(-20deg)}
.lever.pulled .knob{transform:translateY(8px) rotate(-40deg)}
.lever[aria-disabled="true"]{filter:grayscale(.75) brightness(1.05);cursor:not-allowed}
.o-hint{margin:0;font:500 1.1rem/1.2 var(--f-hand);color:var(--c-muted);flex:1 1 10rem}
.o-fine{margin:.8rem 0 0;font-size:var(--t-xs);color:var(--c-faint)}
.order.served .o-rest{display:none}

/* the receipt */
.ticket{position:relative;justify-self:center;width:min(100%,520px);padding:2rem 1.8rem 2.6rem;background:#fffdf8;font:500 13px/1.6 ui-monospace,Menlo,monospace;color:var(--c-ink);box-shadow:0 30px 60px -20px rgba(40,20,0,.4);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) bottom/12px 10px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) bottom/12px 10px repeat-x;
  animation:print .9s var(--ease-out) both}
@keyframes print{from{clip-path:inset(0 0 100% 0);transform:translateY(-20px)}to{clip-path:inset(0 0 0 0);transform:none}}
.ticket h2{font:400 2.4rem/1 var(--f-display);margin:0 0 .3rem;letter-spacing:-.02em}
.ticket .t-sub{font:500 1.2rem var(--f-hand);color:var(--c-cherry-deep);margin:0 0 1rem}
.ticket hr{border:0;border-top:1px dashed #c9bcad;margin:.8rem 0}
.ticket .row{display:flex;justify-content:space-between;gap:1rem}
.ticket .row span:last-child{text-align:right}
.ticket .t-actions{display:flex;gap:8px;margin-top:1.2rem;font-family:var(--f-body)}

@media (max-width:980px){
  .o-rest{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .o-rest .o-step:last-child{grid-column:1/-1}
}
@media (max-width:700px){
  .m-top{padding:10px 10px 0;border-radius:24px 24px 8px 8px}
  .m-panel{height:170px;padding:0 1rem}
  .mp-glass{display:none}
  .mp-copy small{display:none}
  .mp-copy b{font-size:1.9rem;max-width:9ch}
  .mp-pop{right:3.6rem;width:64px}.mp-soda{right:.9rem;width:42px}
  .v-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
  .chute{display:none}
  .v-lever{height:30px}
  .m-bay{height:250px}
  .o-rest{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.ft-bubbles i,.mp-fizz{animation:none}}