/* Designer revisions of 23–24 September — desktop mockup 2326:47. Positions are applied to the inline
   scene-unit styles in index.html; this file holds component sizes and motion.
*/

/* Hero: edited "enjoyable hydration" — three #ef7c35 bands 139.4×40 at −16.75°, band
   offsets 33.6 / 35.3 px, text 20 px; group centre (725.8, 659.2). */
.desktop-layout .scene-hero .sticker-enjoyable {
 left:calc(var(--scene-unit) * 50.402778)!important;
 top:calc(var(--scene-unit) * 45.777778)!important;
 width:6.97em; height:5.447em;
 transform:translate(-50%,-50%) rotate(-16.75deg);
}
.desktop-layout .scene-hero .sticker-enjoyable::before {
 height:2em; border-radius:1em;
 box-shadow:0 1.6815em #ef7c35,0 3.447em #ef7c35;
}
/* Hero: "alternative to soft drinks" moved under the Mini bottle, pill 195.3×80.5 at 9.94°. */
.desktop-layout .scene-hero .sticker-alternative {
 width:9.765em; height:4.025em; padding:0; border-radius:2.0125em;
 transform:translate(-50%,-50%) rotate(9.94deg);
}
/* Burst shapes keep their drawn size while the lettering grows (hero 19→20 px). */
.desktop-layout .scene-hero .sticker-burst { width:6.65em; }

/* The flavour caption sits over its arrow: live 128:4088 is centred at x 1271. */
.desktop-layout [data-flavour-label="water"] { margin-left:calc(var(--scene-unit) * 88.263889)!important; }

/* Water/Zero/Bubbles bursts keep their 168 px plate, lettering 24→30 px. */
.desktop-layout :is([data-figma-node="128:4070"],[data-figma-node="128:4139"],[data-figma-node="128:4186"]).sticker-burst { width:5.6em; }

/* The burst plate turns slowly around its centre, the lettering stays still. */
@keyframes designer-sticker-spin { to { transform:rotate(1turn); } }
@media (prefers-reduced-motion:no-preference) {
 .sticker-burst > img { animation:designer-sticker-spin 28s linear infinite; } /* mobile too */
}

/* The Mini "with vitamin C" shield (plate, copy and letter move as one) sways a little. */
@keyframes designer-shield-sway { from { translate:-4px 0; } to { translate:4px 0; } }
@media (prefers-reduced-motion:no-preference) {
 .desktop-layout :is([data-figma-node="128:4153"],[data-figma-node="128:4154"],[data-figma-node="128:4155"]) {
  animation:designer-shield-sway 2.8s ease-in-out infinite alternate;
 }
}

/* The two edges of the cream strip between Zero and Mini drift in opposite directions
   (the upper band is drawn rotated 180°, so the same background drift runs the other way).
   Both use the full-width repeating band (one tile = 52.811181 scene units); the Figma
   tiles stay as the no-motion baseline. */
@media (min-width:1024px) {
 .desktop-layout .scene-zero .wide-wave[data-wave-drift] {
  display:block; position:absolute; left:50%; width:100vw; pointer-events:none;
  background-repeat:repeat-x; clip-path:inset(3px 0 0);
  background-size:calc(var(--scene-unit) * 52.811181) 100%!important;
 }
 .desktop-layout .scene-zero > .art-layer:is([data-figma-node="128:4036"],[data-figma-node="128:4039"],[data-figma-node="128:4042"],[data-figma-node="128:4091"],[data-figma-node="128:4094"],[data-figma-node="128:4097"]) { visibility:hidden; }
}
@keyframes designer-wave-drift { from { background-position-x:var(--wave-x); } to { background-position-x:calc(var(--wave-x) + var(--scene-unit) * 52.811181); } }
@media (min-width:1024px) and (prefers-reduced-motion:no-preference) {
 .desktop-layout .scene-zero .wide-wave[data-wave-drift="forward"] { animation:designer-wave-drift 30s linear infinite; }
 .desktop-layout .scene-zero[data-wave-offscreen] .wide-wave[data-wave-drift] { animation-play-state:paused; }
}

/* Contact: a flat purple band 502 px tall (no scallops), cream above and below. */
.desktop-layout .scene-contact { background:none; }
.desktop-layout .contact-panel {
 min-height:calc(var(--scene-unit) * 34.861111);
 padding:calc(var(--scene-unit) * 5.763889) 24px calc(var(--scene-unit) * 2.5);
}
.desktop-layout .contact-panel::before { top:0; bottom:0; }
.desktop-layout .contact-wave { display:none; }
.desktop-layout .contact-links { font-weight:400; }
.desktop-layout .contact-links strong { font-weight:600; }
/* Both faces are 134 px plates at 14.5° (Figma 128:4393 / 128:4402). */
.desktop-layout .contact-smile-first {
 width:clamp(70px,calc(var(--scene-unit) * 11.388889),164px);
 left:14.79%; top:calc(var(--scene-unit) * 5.208333);
}
.desktop-layout .contact-smile-second {
 width:clamp(58px,calc(var(--scene-unit) * 9.284722),133.7px);
 right:17.2%; bottom:calc(var(--scene-unit) * 4.767361);
}

/* Gallery: 533×707 cards, 32.6 px gaps, no dots (keyboard, drag and tap-to-pause remain). */
.desktop-layout .photo-card { width:clamp(260px,36.993056vw,532.7px); border-radius:clamp(14px,2.430556vw,35px); }
.desktop-layout .photo-group { gap:clamp(14px,2.263889vw,32.6px); padding-right:clamp(14px,2.263889vw,32.6px); }
.desktop-layout .photo-pagination { display:none; }

/* Bubbles copy lightened in the live frame (#93F4BE; labels stay #86DCAB). */
.desktop-layout [data-figma-node="128:4173"] { color:#93f4be!important; }
/* "Learn more" card: Figma balances the shorter copy. */
.desktop-layout [data-figma-node="128:4354"] p { text-wrap:balance; }

/* ---- Tablet / intermediate pass ------------------------
   768–1023 is the desktop composition scaled to the width with 16 px reading copy. */
/* The Products copy keeps the desktop line breaks only on desktop; here it wraps and balances. */
@media (max-width:1023px) {
 .desktop-layout [data-figma-node="128:4048"] br { display:none; }
 .desktop-layout [data-figma-node="128:4048"] { text-wrap:balance; }
 /* 16 px copy takes two lines in Water and Bubbles: the claim pills make room for it. */
 .desktop-layout :is([data-figma-node="128:4074"],[data-figma-node="128:4076"],[data-figma-node="128:4079"],[data-figma-node="128:4176"],[data-figma-node="128:4178"],[data-figma-node="128:4181"]) { translate:0 16px; }
 .desktop-layout .contact-links { gap:0; }
}
/* The Zero copy wraps before the "zero sugars" burst instead of running under it. */
@media (min-width:768px) and (max-width:1049px) {
 .desktop-layout .scene-zero [data-figma-node="128:4103"] { width:36%!important; text-wrap:balance; }
}
/* Tablet Behind (its own markup): production caption above the video and its tint, the
   "learn more" card first and narrower, as on desktop. */
.tablet-production-bottom figcaption { z-index:3; }
.tablet-production-bottom .tablet-learn-more { order:-1; }
/* Tablet apple row: strict zigzag, each apple bobbing. */
@media (min-width:768px) and (max-width:1023px) {
 .tablet-fruit-ribbon { padding:34px 0 22px; }
 .tablet-fruit-ribbon img:nth-child(even) { margin-top:24px; }
}
@keyframes designer-apple-bob { 0%,100% { translate:0 0; } 25% { translate:0 -6px; } 75% { translate:0 6px; } }
@media (min-width:768px) and (max-width:1023px) and (prefers-reduced-motion:no-preference) {
 .tablet-fruit-ribbon img { animation:designer-apple-bob 3.6s ease-in-out infinite; }
 .tablet-fruit-ribbon img:nth-child(5n+2) { animation-delay:-.72s; }
 .tablet-fruit-ribbon img:nth-child(5n+3) { animation-delay:-1.44s; }
 .tablet-fruit-ribbon img:nth-child(5n+4) { animation-delay:-2.16s; }
 .tablet-fruit-ribbon img:nth-child(5n) { animation-delay:-2.88s; }
}
/* About: 16 px copy can run past the fixed lavender band, so the band follows the section and
   the section keeps a bottom margin. Mini: the line wraps before the cloud. */
@media (min-width:768px) and (max-width:1023px) {
 .desktop-layout .scene-about { padding-bottom:28px; }
 .desktop-layout .scene-about [data-figma-node="128:3918"] { height:auto!important; bottom:0; }
 .desktop-layout .scene-mini [data-figma-node="128:4144"] { width:30%!important; text-wrap:balance; }
 .desktop-layout [data-figma-node="128:4149"] { translate:0 14px; }
}

/* ---- Mobile revisions (Figma 128:4460) ----------------------------------- */
/* Pills are 37 px tall as drawn (they had shrunk to 25–29 px);
   section labels are 15/500 with a 2 px outline, volume pills a 2 px outline. */
.mobile-layout .ui-pill:not(a) { min-height:calc(var(--scene-unit) * 9.414758); }
.mobile-layout :is(.scene-about,.scene-benefits,.scene-products,.scene-behind) .ui-pill { font-weight:500; border-width:2px!important; }
.mobile-layout .ui-pill[style*="background:transparent"] { border-width:2px!important; }
/* Products smile on mobile: green plate, cream face (128:3647-3650). */
.mobile-layout .products-smile-art [data-rig="body"] > rect { fill:#64b588; }
.mobile-layout .products-smile-art [data-rig="face"] { fill:#fffef3; }
/* Bigger lettering in the Water/Zero/Bubbles bursts at the mockup text-to-plate ratio;
   the plate keeps its approved size. Hero burst: plate as drawn (88 px), text 14. */
.mobile-layout :is([data-figma-node="128:3564"],[data-figma-node="128:3587"],[data-figma-node="128:3673"]).sticker-burst { font-size:clamp(12px,calc(var(--scene-unit) * 4.071247),16px)!important; width:6.125em; }
.mobile-layout [data-figma-node="132:8499"].sticker-burst { width:6.3em; }
/* "Learn more" copy balanced like the mockup. */
.mobile-layout [data-figma-node="128:3717"] p { text-wrap:balance; }
/* Contact: a flat #9772BB band 279 px tall inside the 342 px section, cream around it;
   faces 84/70 px plates over the band edges, title 36/700. */
.mobile-layout .scene-contact, .mobile-layout .contact-panel { background:none; }
.mobile-layout .contact-panel::before { top:calc(var(--scene-unit) * 10.178117); bottom:calc(var(--scene-unit) * 5.852417); }
.mobile-layout .contact-wave { display:none; }
.mobile-layout .contact-panel h2 { font-weight:700; }
.mobile-layout .contact-links { font-weight:400; margin-top:calc(var(--scene-unit) * 5.852417 - 13px); }
.mobile-layout .contact-links strong { font-weight:600; }
.mobile-layout .contact-smile-first { width:clamp(44px,calc(var(--scene-unit) * 21.374046),84px); left:3.56%; top:calc(var(--scene-unit) * 4.071247); }
.mobile-layout .contact-smile-second { width:clamp(40px,calc(var(--scene-unit) * 17.748092),70px); right:6.77%; bottom:calc(var(--scene-unit) * 3.46056); }
/* No gallery dots on mobile either (swipe, drag and tap-to-pause remain). */
.mobile-layout .photo-pagination { display:none; }

/* The pointing hand next to "Click here." taps towards it (hand and rays move together). */
@keyframes designer-hand-tap { 0%, 52%, 100% { translate:0 0; } 18% { translate:-3px -4px; } 32% { translate:1px 1px; } }
@media (prefers-reduced-motion:no-preference) {
 :is(.mobile-layout :is([data-figma-node="128:3719"],[data-figma-node="128:3722"],[data-figma-node="128:3725"],[data-figma-node="128:3728"],[data-figma-node="128:3731"]),
  .desktop-layout :is([data-figma-node="128:4360"],[data-figma-node="128:4363"],[data-figma-node="128:4366"],[data-figma-node="128:4369"],[data-figma-node="128:4372"]),
  .tablet-learn-more img) { animation:designer-hand-tap 1.8s ease-in-out infinite; }
}
/* Menu (Figma 2331:23/24): a larger, rounder close button (lavender, 2 px ink)
   and a rounder panel that opens a little below it. Links and their 44 px rows are unchanged. */
:is(.mobile-layout .mobile-menu,.desktop-layout .tablet-menu)[open] summary { width:64px; height:64px; margin:-10px -10px 0 -10px; border:2px solid var(--c-ink); border-radius:17px; background:var(--c-lavender); display:grid; place-items:center; }
:is(.mobile-layout .mobile-menu,.desktop-layout .tablet-menu)[open] summary::after { content:'×'; font-size:38px; line-height:1; }
:is(.mobile-layout .mobile-menu,.desktop-layout .tablet-menu) nav { top:calc(100% + 25px); right:-10px; border-radius:24px; padding:14px 12px; }
/* Hero CTA as drawn: 202×34 pill, 14/400 lettering; a transparent band keeps a 44 px touch target. */
.mobile-layout .scene-hero .ui-cta { font-size:max(12px,calc(var(--scene-unit) * 3.562341))!important; min-height:calc(var(--scene-unit) * 8.651399); padding:0 1.4em; }
.mobile-layout .scene-hero .ui-cta::before { content:""; position:absolute; inset:min(0px,calc(50% - 22px)) 0; }

/* ---- Fixes after the independent check (29.09) ------------------------------------------ */
/* Mobile "enjoyable hydration": three #ef7c35 bands 81×23.3 (steps 19.6 / 20.5) at 16°, text 12/14. */
.mobile-layout .scene-hero .sticker-enjoyable { width:6.7525em; height:5.275em; transform:translate(-50%,-50%) rotate(16deg); }
.mobile-layout .scene-hero .sticker-enjoyable::before { content:""; position:absolute; inset:0 0 auto; height:1.94em; border-radius:1em; background:#ef7c35; box-shadow:0 1.63em #ef7c35,0 3.338em #ef7c35; }
.mobile-layout .scene-hero .sticker-enjoyable > div { position:relative; }
.mobile-layout .scene-hero .sticker-enjoyable span { padding:0; margin:0; background:none; line-height:1.1667; }
/* Desktop nav pills: 37 px with a 2 px outline as drawn; a transparent band keeps 44 px to tap. */
.desktop-layout .ui-nav { min-height:calc(var(--scene-unit) * 2.569444); border-width:2px!important; }
.desktop-layout .ui-nav::before { content:""; position:absolute; inset:min(0px,calc(50% - 22px)) 0; }
/* Behind fact cards on mobile: titles 12/900, descriptions 11/400 as in 128:3677/3695/3707/3710. */
/* 3677/3695 are bold blocks with regular description lines; 3707/3710 are regular blocks with bold titles. */
.mobile-layout :is([data-figma-node="128:3677"],[data-figma-node="128:3695"]) [style*="weight-400"],
.mobile-layout :is([data-figma-node="128:3677"],[data-figma-node="128:3695"]) [style*="weight-400"] *,
.mobile-layout :is([data-figma-node="128:3707"],[data-figma-node="128:3710"]) :is(p,span) { font-size:max(10px,calc(var(--scene-unit) * 2.798982))!important; }
.mobile-layout :is([data-figma-node="128:3707"],[data-figma-node="128:3710"]) [style*="weight-900"] { font-size:var(--text-12)!important; }

/* 2026-10-02 call #5: the grapefruit row sits exactly in the middle of the cream band between Bubbles and
   Behind: from the mint edge (45.416667u) to the Behind butter, which starts 2.361111u into Behind (128:4242).
   The wide full-bleed fill and the tablet Behind leave that cream too. Phones are already centred. */
.desktop-layout .scene-bubbles [data-figma-node^="2337:"] { top:calc(var(--scene-unit) * 53.310929)!important; } /* the 15 slices */
@media (min-width:1441px) {
 .desktop-layout .scene-behind { --scene-fill:linear-gradient(var(--c-cream) 0 calc(var(--scene-unit) * 2.361111),var(--c-butter) 0 calc(var(--scene-unit) * 112.361111),var(--c-cream) 0); }
}
@media (min-width:768px) and (max-width:1023px) {
 .desktop-layout .scene-behind { padding-top:calc(var(--scene-unit) * 2.361111); background:linear-gradient(var(--c-cream) 0 calc(var(--scene-unit) * 2.361111),var(--c-butter) 0); }
}

/* 2026-10-02 call #6: the whole "learn more" card is one link (mobile 128:3716, desktop 128:4353, tablet).
   export-share.cjs puts an empty link inside each card. The copy above the card layer lets taps through
   (on tablet the link already lies over it); the hand stays decorative, its overhang is no target.
   "Click here." underlines on hover and keyboard focus only, on every layout. */
.production-plate-link { position:absolute; inset:0; display:block; border-radius:inherit; pointer-events:auto; z-index:1; -webkit-tap-highlight-color:transparent; }
.mobile-layout [data-figma-node="128:3717"], .desktop-layout [data-figma-node="128:4354"] { pointer-events:none; }
.scene-behind:has(.production-plate-link:is(:hover,:focus-visible)) .production-cta-label { text-decoration:underline; }

/* 2026-10-02 call #8: phone hero as in Figma 128:4460: the bottles (z 220–222, no pointer events) paint over
   the CTA pill and every tap still reaches it; keyboard focus brings the pill and its ring forward. */
.mobile-layout .scene-hero .ui-cta { z-index:219; }
.mobile-layout .scene-hero .ui-cta:focus-visible { z-index:2500; }

/* 2026-10-02 call #12: the last photo strip has the same space above and below, one value per layout.
   Phones measure from the lavender band, which ends 5.852417u above the Contact section's bottom. */
.desktop-layout .scene-pics.has-photo-loop { --pics-gap:clamp(35px,9.583333vw,138px); padding:var(--pics-gap) 0; }
.mobile-layout .scene-pics.has-photo-loop { --pics-gap:40px; padding:max(0px, calc(var(--pics-gap) - var(--scene-unit) * 5.852417)) 0 calc(var(--pics-gap) + env(safe-area-inset-bottom,0px));
 margin-top:min(0px, calc(var(--pics-gap) - var(--scene-unit) * 5.852417)); } /* wide phones: the tail outgrows the gap, the strip moves up into it */

/* 2026-10-02 call #11: mobile contact smileys */
/* Both plates 20 % larger about their centres; the layout boxes stay put. Below 393 px the copy crowds the corners,
   so the plates step out (up to 2.4 / 3.5 px at 320) to keep 12 px from the text. */
.mobile-layout .contact-smile { scale:1.2; }
.mobile-layout .contact-smile-first { translate:min(0px, (var(--scene-unit) - 3.93px) * 3.3) 0; }
.mobile-layout .contact-smile-second { translate:max(0px, (3.93px - var(--scene-unit)) * 4.7) max(0px, (3.93px - var(--scene-unit)) * 1.25); }
/* contact-smiles-mobile.js rigs (Figma vectors): the pink tilt moves into its SVG, and its plate keeps the centre
   the inline art had (0.86 px right of, 6.88 px above the box centre) at the same 0.96 × box side.
   Lean turns about the plate centre; hops, squash and breathing about the middle of its lower edge. */
.mobile-layout .contact-smile[data-rig] { transform:none; }
.mobile-layout .contact-smile-second[data-rig] { transform-origin:calc(50% + .86px) calc(50% - 6.88px); }
.mobile-layout .contact-smile[data-rig] :is(.cs-lean,.cs-move,.cs-breath) { position:absolute; inset:0; transform-origin:60.3% 89.7%; }
.mobile-layout .contact-smile[data-rig] .cs-lean { transform-origin:50% 50%; }
.mobile-layout .contact-smile-second[data-rig] .cs-lean { inset:auto; left:calc(-8.517% + .86px); top:calc(-8.517% - 6.88px); width:117.033%; height:117.033%; }
.mobile-layout .contact-smile-second[data-rig] :is(.cs-move,.cs-breath) { transform-origin:39.7% 89.7%; }
.mobile-layout .contact-smile .cs-art { display:block; width:100%; height:100%; overflow:visible; }
/* Pause control for the smileys (WCAG 2.2.2): a tap on either smiley, or this toggle, hidden until keyboard focus like .photo-playback. */
.mobile-layout .contact-smile[data-rig] { pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.mobile-layout .cs-playback { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mobile-layout .cs-playback:focus { left:50%; bottom:calc(var(--scene-unit) * 5.852417 + 8px); transform:translateX(-50%); width:auto; height:auto; min-height:44px; padding:8px 16px; clip-path:none; border-radius:24px; background:var(--c-cream); color:var(--c-ink); outline:2px solid var(--c-ink); outline-offset:-2px; z-index:5; }
/* 2026-10-03 (owner): the same talking smileys on desktop (contact-smiles-mobile.js {desktop:true}); desktop keeps its size.
   Lavender: the rig plate already fills 82 % of the host like the old art; pink: the old plate filled the whole host, so its
   lean wrapper grows by 85/69.7232. Tilts live in the SVG; a tap or click pauses both, the toggle shows on keyboard focus. */
.desktop-layout .contact-smile[data-rig] { transform:none; pointer-events:auto; cursor:pointer; z-index:3; } /* above the wide heading/links boxes (their glyphs stay ≥47 px away) */
.desktop-layout .contact-smile[data-rig] :is(.cs-lean,.cs-move,.cs-breath) { position:absolute; inset:0; transform-origin:60.3% 89.7%; }
.desktop-layout .contact-smile[data-rig] .cs-lean { transform-origin:50% 50%; }
.desktop-layout .contact-smile-second[data-rig] .cs-lean { inset:auto; left:-10.9565%; top:-10.9565%; width:121.913%; height:121.913%; }
.desktop-layout .contact-smile-second[data-rig] :is(.cs-move,.cs-breath) { transform-origin:39.7% 89.7%; }
.desktop-layout .contact-smile .cs-art { display:block; width:100%; height:100%; overflow:visible; }
.desktop-layout .cs-playback { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.desktop-layout .cs-playback:focus { left:50%; bottom:16px; transform:translateX(-50%); width:auto; height:auto; min-height:44px; padding:8px 16px; clip-path:none; border-radius:24px; background:var(--c-cream); color:var(--c-ink); outline:2px solid var(--c-ink); outline-offset:-2px; z-index:5; }

/* Phones (05.10, owner): the two edges of the cream strip between Zero and Mini drift in opposite directions, as on
   desktop (#64). export-share.cjs puts one full-width band per edge in place of the three Figma tiles; the track is two
   tiles wide and moves one tile in 30 s by transform, so the compositor runs it without repainting. The upper band is
   drawn rotated 180°, so the same drift runs the other way. Reduced motion: the bands stand still.
   The tiles are hidden only where the exporter added the bands ([data-wave-bands]; the source pages keep the tiles).
   clip-path hides the 1-px row the repeating tile bleeds into its transparent top at fractional scales (as .wide-wave).
   The lower band ends at the bottom of Zero: below, Mini's opaque background (z 11) covered it anyway, and overlapping
   it made the browser lift that whole background into its own layer behind the animated track. */
.mobile-wave-band { display:none; }
.mobile-layout .scene-zero .mobile-wave-band { display:block; position:absolute; left:0; width:calc(var(--scene-unit) * 100); overflow:hidden; clip-path:inset(1px 0 0); pointer-events:none; }
.mobile-layout .scene-zero .mobile-wave-band[data-wave-edge="upper"] { transform:rotate(180deg); }
.mobile-layout .scene-zero .mobile-wave-track { position:absolute; top:0; bottom:0; left:calc(var(--scene-unit) * -100); width:calc(var(--scene-unit) * 200); background-repeat:repeat-x; background-size:calc(var(--scene-unit) * 100) calc(var(--scene-unit) * 19.592875); }
.mobile-layout .scene-zero[data-wave-bands] :is([data-figma-node="128:4473"],[data-figma-node="128:4476"],[data-figma-node="128:4479"],[data-figma-node="128:3388"],[data-figma-node="128:3391"],[data-figma-node="128:3394"]) { visibility:hidden; }
@keyframes mobile-wave-drift { from { transform:translateX(0); } to { transform:translateX(50%); } } /* half the two-tile track = one tile */
@media (prefers-reduced-motion:no-preference) {
 .mobile-layout .scene-zero .mobile-wave-band[data-wave-drift="forward"] .mobile-wave-track { animation:mobile-wave-drift 30s linear infinite; will-change:transform; }
 .mobile-layout .scene-zero[data-wave-offscreen] .mobile-wave-band[data-wave-drift] .mobile-wave-track { animation-play-state:paused; }
}

/* Olya final, 05.10: lettering follows the pill at narrow desktop-window widths,
   just as the heading and pill box already follow the mobile scene unit. */
.mobile-layout :is(.scene-water,.scene-zero,.scene-mini,.scene-bubbles) .ui-pill { font-size:max(12px,calc(var(--scene-unit) * 3.562341))!important; }
.mobile-layout :is(.scene-about,.scene-benefits,.scene-products,.scene-behind) .ui-pill { font-size:max(12px,calc(var(--scene-unit) * 3.816794))!important; }
/* Fractional CSS/device-pixel boundaries expose cream between adjacent mint fills
   in narrow desktop windows (reproduced at 485px / DPR 1). Overlap the fills. */
.mobile-layout .scene-bubbles [data-figma-node="128:3602"] { top:-4px!important; height:calc(var(--scene-unit) * 149.872774 + 4px)!important; }

/* The Figma cloud wrapper has inline display:flex, so the authored removal needs priority. */
.mobile-layout :is([data-figma-node="128:3593"],[data-figma-node="128:3655"]) { display:none!important; }

/* 05.10 resize QA: join solids at fractional CSS/device coordinates. A small
   independent sky bridge covers the clipped mobile Zero track without extending
   Mini's whole backdrop into the animated layer. Desktop source backdrops use
   the same-color bleed at every width, including scaled windows below 1441px. */
.mobile-layout .scene-mini::before { content:''; position:absolute; left:0; right:0; top:-2px; height:4px; background:var(--c-sky); z-index:11; pointer-events:none; }
.desktop-layout .scene-solid::after { content:''; position:absolute; inset:-2px 0; background:inherit; pointer-events:none; }

/* 06.10 line hunt (independent, Chromium): leftover hairline at zoomed-out scales.
   1. Zoomed-out pages (browser zoom 90-50 % on DPR-1 screens, effective DPR < 1): the repeat-x wave tile bleeds its filled
      edge into the top 1-2 device rows. The tiles are transparent for their top quarter, so a 3 px clip hides nothing drawn
      (desktop drift bands above; the >1440 full-width bands of responsive.css here). At 67 % the Mini sky backdrop also needs
      a slightly deeper same-colour overlap over the Zero band. */
.wide-wave { clip-path:inset(3px 0 0); }
.desktop-layout [data-figma-node="128:4120"]::after { top:-4px; }

/* 06.10 (owner: Safari on a Mac shows thin vertical light lines in the wave rows at in-between window sizes): every desktop
   wave row was three Figma tiles side by side, and Safari leaves a sub-pixel gap at their joins (Chromium and Windows WebKit
   do not). One full-width repeat-x band per row at every desktop width, as above 1440 px: no element joins left. Size and
   phase in scene units, equal to the 1440 inline px values (L - 50 = inline px / 14.4) and to the tile positions below it. */
.desktop-layout .wide-wave { display:block; position:absolute; left:50%; width:100vw; background-repeat:repeat-x; pointer-events:none; clip-path:inset(3px 0 0);
  background-size:calc(var(--scene-unit) * 52.811181) calc(var(--scene-unit) * 10.347222)!important; }
.desktop-layout .art-layer:has(img[data-asset^="imgMaskGroup"]) { display:none!important; } /* the rotated Zero tiles carry an inline display:flex */
.desktop-layout .scene-hero .wide-wave { background-position:calc(50vw + var(--scene-unit) * -31.841667) 0!important; }
.desktop-layout .scene-water .wide-wave { background-position:calc(50vw + var(--scene-unit) * 2.672222) 0!important; }
.desktop-layout .scene-mini .wide-wave { background-position:calc(50vw + var(--scene-unit) * -24.063889) 0!important; }
/* Zero rows drift from 1024 px (their own phase above); below that they stand still and follow the tiles. The upper
   band is rotated 180deg, so its phase is mirrored (100vw - L). */
@media (max-width:1023px) {
 .desktop-layout .scene-zero .wide-wave[style*="ae3f44a9d9fbb0f38e"] { --wave-x:calc(50vw + var(--scene-unit) * 27.466667)!important; }
 .desktop-layout .scene-zero .wide-wave[style*="fed66438b503551331"] { --wave-x:calc(50vw + var(--scene-unit) * -24.063889)!important; }
}

/* 06.10 (owner, Safari on a Mac, after the bands): light vertical lines remained at the repeat boundaries of the wave bands.
   Each wave SVG clips its fill with a mask exactly at the tile edge, and Safari draws every repeat separately, so the
   half-covered edge column lets the page show through. A second background layer of the fill colour under the wave,
   starting just below the scallops (desktop tiles are solid from 39.6 % of their height, phone tiles from 42.3 %),
   closes any such gap in any renderer; the scallop line itself is untouched. The single size/position/repeat values
   apply to both layers, so the drift and the phase rules above move them together. */
.desktop-layout .scene-hero .wide-wave { background-image:url(assets/ae3f44a9d9fbb0f38e.svg), linear-gradient(to bottom, transparent 40%, #D4B6FF 40%)!important; }
.desktop-layout .scene-water .wide-wave { background-image:url(assets/e1de2224bbb04301d2.svg), linear-gradient(to bottom, transparent 40%, #D4B6FF 40%)!important; }
.desktop-layout .scene-zero .wide-wave[style*="ae3f44a9d9fbb0f38e"] { background-image:url(assets/ae3f44a9d9fbb0f38e.svg), linear-gradient(to bottom, transparent 40%, #D4B6FF 40%)!important; }
.desktop-layout .scene-zero .wide-wave[style*="fed66438b503551331"] { background-image:url(assets/fed66438b503551331.svg), linear-gradient(to bottom, transparent 40%, #8DC6E3 40%)!important; }
.desktop-layout .scene-mini .wide-wave { background-image:url(assets/0b78abdcce49f9abf1.svg), linear-gradient(to bottom, transparent 40%, #64B588 40%)!important; }
.mobile-layout .scene-zero .mobile-wave-band[data-wave-edge="upper"] .mobile-wave-track { background-image:url(assets/0ebf7a4f7246f76650.svg), linear-gradient(to bottom, transparent 42.8%, #D4B6FF 42.8%)!important; }
.mobile-layout .scene-zero .mobile-wave-band[data-wave-edge="lower"] .mobile-wave-track { background-image:url(assets/5993fa0e9a0ccec6b6.svg), linear-gradient(to bottom, transparent 42.8%, #8DC6E3 42.8%)!important; }