/* Designer revisions of 14 September. Original interactions remain in their modules. */
:root { --c-ink:#53337b; }
.designer-heading-wordmark { display:inline-block; width:2.35em; height:.72em; vertical-align:-.015em; object-fit:contain; }
[data-figma-node="128:3541"] { line-height:1.16!important; }
.mobile-layout .designer-heading-wordmark { width:2.75em; height:.82em; }
.designer-added-art { z-index:350; pointer-events:none; }
/* Water flavour names retain one line, including apple & aloe. */
.desktop-layout [data-flavour-label="water"] {
 white-space:nowrap!important; overflow-wrap:normal;
 width:calc(var(--scene-unit) * 15.277778)!important;
 margin-left:calc(var(--scene-unit) * 86.805556)!important;
}
/* The Water/Zero boundary follows the resized carousel, including its fruit. */
.desktop-layout [data-water-viewport-fit] [data-figma-node="128:4056"] {
 height:calc(100% - var(--scene-unit) * 7.361111)!important;
}
.desktop-layout [data-water-viewport-fit] :is([data-figma-node="128:4058"],[data-figma-node="128:4061"],[data-figma-node="128:4064"],.wide-wave) {
 top:calc(100% - var(--scene-unit) * 3.75)!important;
}
.desktop-layout [data-water-viewport-fit] [data-figma-node="128:4140"] {
 top:calc(100% - var(--scene-unit) * 8.611111)!important;
}
/* Live Figma 128:4049: retain the animated rig, apply its yellow/purple palette. */
.desktop-layout .products-smile-art [data-rig="body"] > rect { fill:#fff2a0; }
.desktop-layout .products-smile-art [data-rig="face"] { fill:#9772bb; }
/* Desktop hero: three orange bands remain behind the two-line copy. */
.desktop-layout .scene-hero .sticker-enjoyable {
 width:6.6582em; height:5.205em;
 left:calc(var(--scene-unit) * 50.4028)!important;
 top:calc(var(--scene-unit) * 46.46875)!important;
 transform:translate(-50%,-50%) rotate(-17.29deg);
}
.desktop-layout .scene-hero .sticker-enjoyable::before {
 content:""; position:absolute; inset:0 0 auto; height:1.9133em;
 border-radius:1.3158em; background:#ef7c35;
 box-shadow:0 1.607em #ef7c35,0 3.292em #ef7c35;
}
.desktop-layout .scene-hero .sticker-enjoyable > div { position:relative; transform:translateY(-.27em); }
.desktop-layout .scene-hero .sticker-enjoyable span { padding:0; margin:0; background:none; line-height:1.05263; }
/* 02.10 (owner): desktop About wraps naturally at 56% with the 1.25 body leading of every other
   paragraph (Figma 128:3924 is 24/25 with five set lines; no longer applied). */
[data-figma-node="128:3924"] { width:56%!important; }
/* Desktop About: independently sized sticker. */
.desktop-layout .scene-about .sticker-enjoyable {
 font-size:clamp(12px,calc(var(--scene-unit) * 1.666667),24px)!important;
 width:6.89625em; height:5.3905em;
 left:calc(var(--scene-unit) * 12.4327)!important;
 top:calc(var(--scene-unit) * 24.4792)!important;
 transform:translate(-50%,-50%) rotate(-10.35deg);
}
.desktop-layout .scene-about .sticker-enjoyable::before {
 content:""; position:absolute; inset:0 0 auto; height:1.98167em;
 border-radius:1.04167em; background:#ef7c35;
 box-shadow:0 1.6646em #ef7c35,0 3.4088em #ef7c35;
}
.desktop-layout .scene-about .sticker-enjoyable > div { position:relative; }
.desktop-layout .scene-about .sticker-enjoyable span { padding:0; margin:0; background:none; line-height:1.04167; }
[data-figma-node="128:4268"] { width:69.8611%!important; height:auto!important; line-height:1.25!important; white-space:normal!important; }
[data-figma-node="128:3572"], [data-figma-node="128:3604"] { width:70%; }
[data-figma-node="128:4103"] { width:31%; }
[data-figma-node="128:4173"] { width:44%; }
[data-figma-node="132:8500"] *, [data-figma-node="132:5224"] * { box-shadow:none!important; filter:none!important; }
/* The phone status bar is browser chrome, not a 52px bar inside the document. */
[data-figma-node="128:3407"] { visibility:hidden; }
/* Reposition each group of claims together; the third pill shares its row. */
.mobile-layout .scene-water { min-height:calc(var(--scene-unit) * 173.282443)!important; }
.mobile-layout .scene-zero { min-height:calc(var(--scene-unit) * 183.715013)!important; }
.mobile-layout .scene-bubbles { min-height:calc(var(--scene-unit) * 179.134860)!important; }
.mobile-layout :is([data-figma-node="128:3569"],[data-figma-node="128:3567"],[data-figma-node="128:3578"]) { margin-top:calc(var(--scene-unit) * 56.615776)!important; }
.mobile-layout :is([data-figma-node="128:3663"],[data-figma-node="128:3661"],[data-figma-node="128:3577"]) { margin-top:calc(var(--scene-unit) * 58.905852)!important; }
.mobile-layout :is([data-figma-node="128:3670"],[data-figma-node="128:3668"],[data-figma-node="128:3665"]) { margin-top:calc(var(--scene-unit) * 59.160305)!important; }
.mobile-layout :is([data-figma-node="128:3569"],[data-figma-node="128:3663"],[data-figma-node="128:3670"]) { margin-left:calc(var(--scene-unit) * 5.597964)!important; }
.mobile-layout :is([data-figma-node="128:3567"],[data-figma-node="128:3661"],[data-figma-node="128:3668"]) { margin-left:calc(var(--scene-unit) * 39.440204)!important; }
.mobile-layout :is([data-figma-node="128:3578"],[data-figma-node="128:3577"],[data-figma-node="128:3665"]) { margin-left:calc(var(--scene-unit) * 69.465649)!important; }
.desktop-layout :is([data-figma-node="128:4108"],[data-figma-node="128:4110"],[data-figma-node="128:4113"]) { margin-top:calc(var(--scene-unit) * 26.493056)!important; }
.desktop-layout [data-figma-node="128:3908"] { min-width:calc(var(--scene-unit) * 8.472222)!important; margin-left:calc(var(--scene-unit) * 15.625)!important; }
/* The designer softened the mobile bubbles while preserving their shapes. */
.mobile-layout .bubble-art [data-bubble-part="shape"] > g > path { fill:#86dcab; }
.mobile-layout .bubble-art [data-bubble-part="highlight"] path { fill:#fffef3; }
.mobile-layout .bubble-art [data-bubble-part="ring"] circle { stroke:#86dcab; }
/* A duplicated old sparkle was removed; the new cloud belongs to Mini. */
.mobile-layout [data-figma-node="128:3593"], .mobile-layout [data-figma-node="128:3655"] { display:none; }
@media(min-width:768px) and (max-width:1049px) {
 [data-figma-node="128:4103"] { width:44%!important; }
}

/* Zero captions join the scroll-driven 3D entrance. */
.scene-zero :is([data-figma-node="128:4117"],[data-figma-node="128:4119"],[data-figma-node="128:4136"],[data-figma-node="128:4135"],[data-figma-node="128:3545"],[data-figma-node="128:3546"],[data-figma-node="2181:20"],[data-figma-node="2181:18"]){opacity:0}
@media(prefers-reduced-motion:reduce){.scene-zero :is([data-figma-node="128:4117"],[data-figma-node="128:4119"],[data-figma-node="128:4136"],[data-figma-node="128:4135"],[data-figma-node="128:3545"],[data-figma-node="128:3546"],[data-figma-node="2181:20"],[data-figma-node="2181:18"]){opacity:1}}

/* 2026-09-17 live Figma 132:4561 (changed after the 14 September snapshot): the
   desktop Bubbles copy, flavour labels, callout arrows and bubbles use #86DCAB,
   matching the mobile scene. Arrow artwork: designer-20260917-desktop-bubbles-arrow-*.svg. */
.desktop-layout :is([data-figma-node="128:4173"],[data-figma-node="128:4168"],[data-figma-node="128:4169"]) { color:#86dcab!important; }
.desktop-layout .bubble-art [data-bubble-part="shape"] > g > path { fill:#86dcab; }
.desktop-layout .bubble-art [data-bubble-part="highlight"] path { fill:#fffef3; }
.desktop-layout .bubble-art [data-bubble-part="ring"] circle { stroke:#86dcab; }
/* The grey "end of screen" guide (128:3408) was a Figma aid; the designer removed it
   from the file and asked for it not to be rendered. */
.mobile-layout [data-figma-node="128:3408"] { display:none!important; }
/* Mobile Zero: the rotated lavender wave artwork (128:4473, 77px image inside a 66px
   mask-group box) bleeds ~6px above its box and painted over the lower half of the
   pomegranate caption. Figma shows the captions in front; keep them above the waves. */
.mobile-layout .scene-zero :is([data-figma-node="128:3545"],[data-figma-node="128:3546"]) { z-index:210!important; }
/* On screens wider than the 1440 canvas the photo strip runs edge to edge. */
@media (min-width:1441px) {
 .desktop-layout .scene-pics.has-photo-loop .photo-carousel { width:100vw; margin-left:calc(50% - 50vw); }
}
/* 17.09: the hidden iPhone status bar left a 52 px empty band above the
   logo on real phones, where the browser chrome already sits. Pull the mobile
   page up by exactly that band; every scene follows, art keeps its offsets. */
.mobile-layout .scene-hero { margin-top:calc(var(--scene-unit) * -13.231552); }