:root{--ube-pop:#bf5af2;--zing-lime:#e4ff3a;--bubble-pink:#ff4fa3;--sunny:#ffd93d;--grape:#7b2cbf;--surface-100:#fdf7ff;--surface-200:#fff;--border:#ebd9f7;--text:#7b2cbf;--text-soft:#8e4fc4;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;--font-display:"Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;--font-sans:"Plus Jakarta Sans", system-ui, sans-serif;--flavour-pink-lemonade:var(--bubble-pink);--flavour-cosmic:#2e6bff;--flavour-matcha:#4a9b2e;--flavour-americano:#8a5534}[data-theme=dark]{--surface-100:#1e0b2e;--surface-200:#2c1242;--border:#43205f;--text:#f3e6ff;--text-soft:#cdb0e6}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--surface-100);color:var(--text);font-family:var(--font-sans);margin:0;font-size:16px;line-height:24px;overflow-x:hidden}h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}a{color:inherit}.wrap{width:100%;max-width:1120px;padding:0 var(--space-4);margin:0 auto;position:relative}.display-lg{font-family:var(--font-display);font-size:56px;font-weight:400;line-height:60px}.display-sm{font-family:var(--font-display);font-size:36px;font-weight:400;line-height:42px}.subhead{font-family:var(--font-display);margin-top:var(--space-3);font-size:28px;font-weight:400;line-height:34px}.h3{font-size:18px;font-weight:700;line-height:24px}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:var(--space-2);font-size:13px;font-weight:700;line-height:18px}.on-ube{color:var(--surface-200)}.on-ube-lime{color:var(--zing-lime)}.block{padding:calc(var(--space-8) * 3) 0;position:relative;overflow:hidden}.block--ube{background:var(--ube-pop)}section[id]{scroll-margin-top:76px}.block--milk{background:var(--surface-100)}.nav{z-index:10;background:var(--surface-100);border-bottom:1px solid var(--border);position:sticky;top:0}.nav__inner{justify-content:space-between;align-items:center;gap:var(--space-4);height:76px;display:flex}.logo{--logo-w:112px;box-sizing:content-box;width:var(--logo-w);min-width:96px;height:auto;padding:calc(var(--logo-w) * .075);display:block}.nav__logo{border-radius:var(--radius-sm);display:block}.nav__links{gap:var(--space-6);display:flex}.nav__links a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);font-size:14px;font-weight:700;line-height:20px;text-decoration:none}.nav__links a:hover,.nav__links a:focus-visible{background:var(--zing-lime);color:var(--grape)}.nav__links{align-items:center}.nav__links .nav__cta{align-items:center;gap:var(--space-2);background:var(--grape);color:var(--surface-200);padding:var(--space-2) var(--space-4);white-space:nowrap;display:inline-flex}.icon{flex-shrink:0}.btn .icon{margin-right:var(--space-2)}.btn,.pill{border-radius:var(--radius-pill);font-family:var(--font-sans);white-space:nowrap;justify-content:center;align-items:center;font-weight:700;text-decoration:none;display:inline-flex}.btn{padding:var(--space-4) var(--space-6);font-size:15px;line-height:20px;transition:transform .2s}.btn:hover{transform:translateY(-2px)}.btn:focus-visible,.nav__links a:focus-visible,.nav__logo:focus-visible{outline:3px solid var(--grape);outline-offset:3px}.block--ube .btn:focus-visible{outline-color:var(--surface-200)}.btn--lime{background:var(--zing-lime);color:var(--grape)}.btn--grape{background:var(--grape);color:var(--surface-200)}.pill{padding:var(--space-1) var(--space-3);font-size:13px;line-height:18px}.pill--lime{background:var(--zing-lime);color:var(--grape)}.pill--sunny{background:var(--sunny);color:var(--grape)}.hero{padding:calc(var(--space-8) * 2) 0 calc(var(--space-8) * 3);position:relative;overflow:hidden}.hero__inner{align-items:center;gap:var(--space-8);grid-template-columns:1.1fr 1fr;display:grid}.hero__logo .logo{--logo-w:360px;margin-left:calc(var(--logo-w) * -.075)}.hero__tagline{font-family:var(--font-display);color:var(--zing-lime);margin-top:var(--space-4);font-size:28px;line-height:34px}.hero__headline{font-family:var(--font-display);color:var(--surface-200);margin-top:var(--space-6);font-size:36px;line-height:42px}.hero__actions{gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap;display:flex}.hero__pouches{justify-content:center;align-items:flex-end;gap:var(--space-3);display:flex}.hero__pouches .pouch:first-child,.hero__pouches .pouch:nth-child(3){margin-bottom:-16px}.hero__pouches .pouch:nth-child(2){z-index:1}.pouch--pink-lemonade{--pouch-colour:var(--flavour-pink-lemonade)}.pouch--cosmic{--pouch-colour:var(--flavour-cosmic)}.pouch--matcha{--pouch-colour:var(--flavour-matcha)}.pouch--americano{--pouch-colour:var(--flavour-americano)}.pouch{flex-direction:column;flex-shrink:0;width:200px;padding-top:28px;transition:transform .25s;display:flex;position:relative}.pouch__body{flex-grow:1}.pouch--small{width:150px}.pouch__spout{background:var(--zing-lime);border-radius:var(--radius-sm) var(--radius-sm) var(--radius-md) var(--radius-md);width:56px;height:36px;position:absolute;top:0;left:50%;transform:translate(-50%)}.pouch__band,.pouch__body{border:6px solid var(--surface-200);position:relative}.pouch__band{background:var(--ube-pop);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-2) var(--space-3);text-align:center}.pouch__band .logo{margin:0 auto}.pouch--small .pouch__band .logo{--logo-w:96px}.pouch__icon{width:40px;height:40px;margin:var(--space-1) auto;display:none}.pouch__body{background:var(--pouch-colour);border-radius:0 0 var(--radius-lg) var(--radius-lg);min-height:200px;padding:var(--space-4);align-items:flex-start;gap:var(--space-3);border-top:0;flex-direction:column;display:flex}.pouch--small .pouch__body{min-height:150px}.pouch__name{font-family:var(--font-display);color:var(--surface-200);font-size:28px;line-height:34px}.pouch--small .pouch__name{font-size:22px;line-height:28px}.pouch__line{color:var(--text);background:var(--surface-200);border-radius:var(--radius-md);padding:var(--space-3);flex-grow:1;font-size:14px;line-height:20px}.pouch .pill{margin-top:auto}.pouch .pouch__award{margin-top:0}.pouch__award-note{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border);font-weight:700;display:block}.pouch--small .pill{display:none}.about__text{max-width:640px;margin-top:var(--space-4);gap:var(--space-3);display:grid}.card{background:var(--surface-200);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}.card p{margin-top:var(--space-2)}.steps{gap:var(--space-4);margin-top:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid}.step__num{width:56px;height:56px;margin-bottom:var(--space-4);background:var(--sunny);color:var(--grape);font-family:var(--font-display);border-radius:50%;justify-content:center;align-items:center;font-size:28px;line-height:1;display:inline-flex}.flavours{justify-content:center;gap:var(--space-8) var(--space-4);margin-top:var(--space-8);flex-wrap:wrap;display:flex}.flavours li{display:flex}.flavours .pouch__body{min-height:240px}.flavours .pouch:hover{transform:translateY(-6px)}.values{gap:var(--space-4);margin-top:var(--space-8);grid-template-columns:repeat(2,1fr);display:grid}.squeeze{text-align:center}.soon{text-align:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.soon p{max-width:520px}.soon__actions{justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.soon__number{color:var(--text-soft);font-size:14px;font-weight:700;line-height:20px}.footer__link{color:var(--surface-200);font-size:14px;font-weight:700;line-height:20px}.footer__link:focus-visible{outline:3px solid var(--surface-200);outline-offset:3px}.footer{background:var(--grape);color:var(--surface-200);padding:var(--space-8) 0}.footer__inner{align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;display:flex}.footer .footer__logo{--logo-w:140px}.footer__small{font-size:14px;line-height:20px}.bubbles span{background:var(--sunny);border-radius:50%;position:absolute}.bubbles span:nth-child(2n){background:var(--zing-lime)}.bubbles--hero span:first-child{width:28px;height:28px;top:12%;left:46%}.bubbles--hero span:nth-child(2){width:14px;height:14px;top:22%;left:88%}.bubbles--hero span:nth-child(3){width:48px;height:48px;bottom:8%;left:6%}.bubbles--hero span:nth-child(4){width:20px;height:20px;bottom:16%;left:58%}.bubbles--hero span:nth-child(5){width:12px;height:12px;top:8%;left:12%}.bubbles--flavours span:first-child{width:36px;height:36px;top:6%;right:8%}.bubbles--flavours span:nth-child(2){width:16px;height:16px;top:14%;right:20%}.bubbles--flavours span:nth-child(3){width:24px;height:24px;bottom:4%;left:4%}.bubbles--flavours span:nth-child(4){width:12px;height:12px;bottom:10%;right:30%}.bubbles--flavours span:nth-child(5){width:20px;height:20px;top:40%;left:2%}.bubbles--squeeze span:first-child{width:40px;height:40px;top:18%;left:10%}.bubbles--squeeze span:nth-child(2){width:18px;height:18px;bottom:10%;left:6%}.bubbles--squeeze span:nth-child(3){width:26px;height:26px;top:20%;right:12%}.bubbles--squeeze span:nth-child(4){width:44px;height:44px;bottom:14%;right:18%}.bubbles--squeeze span:nth-child(5){width:12px;height:12px;top:12%;left:50%}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}@media (width<=900px){.hero__inner{text-align:center;grid-template-columns:1fr}.hero__logo .logo{margin:0 auto}.bubbles--hero span:first-child,.bubbles--hero span:nth-child(2){display:none}.hero__actions{justify-content:center}.hero__pouches{margin-top:var(--space-6)}.steps{grid-template-columns:1fr}}@media (width<=640px){.block{padding:calc(var(--space-8) * 2) 0}.nav__links{gap:var(--space-1)}.nav__links a{padding:var(--space-2);font-size:13px}.nav__hide-sm{display:none}.nav__links .nav__cta{padding:var(--space-2) var(--space-3)}.nav__logo .logo{--logo-w:96px}.hero__logo .logo{--logo-w:240px}.hero__tagline{font-size:24px;line-height:30px}.hero__headline{font-size:28px;line-height:34px}.display-lg{font-size:40px;line-height:44px}.display-sm{font-size:30px;line-height:36px}.subhead{font-size:24px;line-height:30px}.hero__pouches .pouch{width:132px}.hero__pouches .pouch--small{width:104px}.hero__pouches .pouch__body{min-height:110px;padding:var(--space-3) var(--space-2)}.hero__pouches .pouch__name{font-size:20px;line-height:24px}.hero__pouches .pouch--small .pouch__name{font-size:19px;line-height:22px}.hero__pouches .pouch__logo{display:none}.hero__pouches .pouch__icon{display:block}.hero__pouches .pill{display:none}.values{grid-template-columns:1fr}}