/* ==========================================================================
   Hero — a full-bleed product scene that re-dresses itself per flavour.

   Geometry lives in one place: .hero__stage is a proportional box and every
   scene element is positioned in percentages of it, so the whole composition
   scales as a single picture instead of drifting apart between breakpoints.
   ========================================================================== */

.hero {
  position: relative;
  /* svh is the height with the browser's toolbars expanded, so the moment
     iOS Safari collapses them the hero fell short and the next section
     peeked in. dvh tracks the viewport as it actually is, which keeps the
     hero exactly one screen at every moment; svh stays as the fallback. */
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  /* Let the browser own vertical scrolling; we only interpret horizontal drags. */
  touch-action: pan-y;
  /* A swipe that starts on text would otherwise select it mid-gesture. */
  -webkit-user-select: none;
  user-select: none;
  --stage-shift: 0px;
}

.hero[data-scheme='dark'] {
  color: var(--paper);
}

/* Backdrops ------------------------------------------------------------- */

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0;
  transition: opacity var(--scene-duration) var(--ease-out);
  will-change: opacity;
}

.hero__backdrop.is-active {
  opacity: 1;
}

.hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  transform: scale(1.04) translate3d(0, var(--parallax, 0px), 0);
  transition: transform 1200ms var(--ease-out);
}

.hero__backdrop.is-entering img {
  transform: scale(1.1) translate3d(0, var(--parallax, 0px), 0);
}

/* Legibility veil. Warm light wash on citrus flavours, a deep one on berries. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  transition: background var(--scene-duration) var(--ease-out);
  background:
    linear-gradient(100deg, rgb(255 246 226 / 0.86) 0%, rgb(255 246 226 / 0.5) 26%, rgb(255 246 226 / 0) 56%),
    radial-gradient(120% 80% at 50% 105%, rgb(120 70 20 / 0.28), transparent 62%);
}

.hero[data-scheme='dark'] .hero__veil {
  background:
    linear-gradient(100deg, rgb(28 10 8 / 0.9) 0%, rgb(28 10 8 / 0.62) 28%, rgb(28 10 8 / 0) 58%),
    radial-gradient(120% 80% at 50% 105%, rgb(10 4 2 / 0.55), transparent 60%);
}

/* Layout ---------------------------------------------------------------- */

.hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(5.5rem, 12vh, 8rem) clamp(4rem, 9vh, 6rem);
}

/* Indent past the navigation arrows, which sit against the viewport edges. */
@media (min-width: 901px) {
  .hero__inner {
    padding-inline: clamp(2.75rem, 4.5vw, 4.5rem);
  }
}

/* Copy ------------------------------------------------------------------ */

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.5vh, 2.4rem);
}

.hero__head,
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__head > * + * {
  margin-top: var(--flow, 1.1rem);
}

/* A gap rather than adjacent-sibling margins, because the claims sit above
   the button on desktop and below it on phones, and `* + *` would keep
   spacing the DOM order instead of the visual one. */
.hero__foot {
  gap: 1.7rem;
}

@media (min-width: 901px) {
  .hero__benefits {
    order: -1;
  }

  .hero__note {
    margin-top: -0.85rem;
  }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  color: var(--accent);
  text-shadow: 0 1px 12px rgb(255 250 235 / 0.5);
}

.hero[data-scheme='dark'] .hero__eyebrow {
  color: color-mix(in srgb, var(--accent) 45%, #ffe6d8);
  text-shadow: 0 1px 16px rgb(20 6 4 / 0.6);
}

.hero__eyebrow svg {
  width: 0.85em;
  height: 0.85em;
  opacity: 0.75;
}

.hero__title {
  --flow: 0.5rem;
  font-size: clamp(3.1rem, 1.2rem + 8.4vw, 8.2rem);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 20;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* A long single word cannot wrap, so it is the one case where the headline
   has to give way instead of the layout. Sized to stay inside .hero__copy
   (34rem) at every width — at the shipped size MULTIVITAMIN measured 923px
   against a 681px column and printed over the bottle. */
.hero__title[data-long] {
  font-size: clamp(2.3rem, 0.4rem + 4.6vw, 4.4rem);
}

.hero__title span {
  display: block;
}

.hero__title span:last-child:not(:only-child) {
  color: var(--accent);
}

.hero[data-scheme='light'] .hero__title {
  text-shadow: 0 2px 26px rgb(255 244 218 / 0.55);
}

.hero[data-scheme='dark'] .hero__title {
  text-shadow: 0 2px 30px rgb(24 6 4 / 0.5);
}

.hero__rule {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(20rem, 100%);
  color: currentColor;
  opacity: 0.55;
}

.hero__rule::before,
.hero__rule::after {
  content: '';
  height: 1px;
  flex: 1;
  background: currentColor;
}

.hero__rule svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
  opacity: 1;
}

.hero__description {
  font-size: var(--step-1);
  max-width: 24ch;
  line-height: 1.4;
}

/* Benefits -------------------------------------------------------------- */

.hero__benefits {
  --flow: 1.6rem;
  display: flex;
  gap: clamp(1.1rem, 3vw, 2.2rem);
}

.hero__benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  width: 6.5rem;
}

.hero__benefit i {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.85;
}

.hero__benefit svg {
  width: 1.3rem;
  height: 1.3rem;
}

.hero__benefit span {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.35;
  font-weight: 600;
}

.hero__benefit b {
  display: block;
  font-weight: 700;
}

.hero__benefit-short {
  display: none;
}

/* Call to action -------------------------------------------------------- */

/* The price sits on its own line above the button everywhere. Beside it the
   lockup pushed the row to 561px against 544px of column and wrapped anyway,
   and a price that has been asked to carry weight should not be a tail on
   the end of a button. column-reverse keeps the markup order (button first)
   so the button stays the first thing reached by keyboard and screen reader. */
.hero__cta {
  --flow: 1.6rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.9rem;
}

.hero__price {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  letter-spacing: 0.01em;
}

/* The litre count is a stamped chip, not a sentence. */
.hero__price-size {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.34em 0.72em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: 0.7;
}

.hero__price b {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  font-weight: 800;
  line-height: 1;
}

.hero__note {
  --flow: 0.9rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  opacity: 0.8;
  padding-left: 0.4rem;
}

/* Stage ----------------------------------------------------------------- */

.hero__stage {
  position: relative;
  align-self: stretch;
  min-height: 0;
  transform: translate3d(0, var(--stage-shift), 0);
}

.hero__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__scene[hidden] {
  display: none;
}

.hero__bottle,
.hero__scene .el {
  position: absolute;
  transform-origin: 50% 90%;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

/* The bottle is the focal point: it owns the stage's vertical baseline. */
.hero__bottle {
  left: 50%;
  bottom: 6%;
  height: 82%;
  width: auto;
  margin-left: -0.5px;
  translate: -50% 0;
  z-index: 3;
  filter: drop-shadow(0 26px 30px rgb(60 24 8 / 0.42));
}

.hero__scene .el {
  filter: drop-shadow(0 12px 18px rgb(60 24 8 / 0.3));
}

/* Scene roles. Percentages are of the stage box, so the composition scales. */
.el--splash {
  left: 4%;
  top: 26%;
  width: 92%;
  z-index: 1;
  opacity: 0.95;
  filter: drop-shadow(0 10px 22px rgb(60 24 8 / 0.25));
}

.el--back {
  left: 70%;
  top: 12%;
  width: 27%;
  z-index: 1;
}

.el--leaf {
  left: 2%;
  top: 20%;
  width: 17%;
  z-index: 1;
}

.el--left {
  left: 18%;
  top: 58%;
  width: 26%;
  z-index: 2;
}

.el--right {
  left: 64%;
  top: 52%;
  width: 36%;
  z-index: 4;
}

.el--front {
  left: 34%;
  top: 74%;
  width: 22%;
  z-index: 5;
}

.el--bloom {
  left: 62%;
  top: 82%;
  width: 24%;
  z-index: 5;
}

/* Per-flavour corrections where a cutout's mass differs from the others. */
.hero__scene[data-flavour='visnja'] .el--left,
.hero__scene[data-flavour='jagoda'] .el--left {
  top: 62%;
  width: 30%;
}

.hero__scene[data-flavour='visnja'] .el--right {
  top: 58%;
  width: 30%;
}

.hero__scene[data-flavour='narandza'] .el--front {
  left: 30%;
  width: 26%;
}

.hero__scene[data-flavour='jagoda'] .el--right {
  top: 60%;
  width: 32%;
}

/* Multivitamin borrows its cutouts from four different shoots, so unlike the
   single-fruit scenes its elements have no shared scale to inherit. A
   strawberry rendered at the width of an orange half stops reading as a
   strawberry, and this backdrop is already dressed at both edges — so the
   arrangement stays tighter around the bottle than the others. */
.hero__scene[data-flavour='multivitamin'] .el--front {
  left: 30%;
  top: 76%;
  width: 15%;
}

.hero__scene[data-flavour='multivitamin'] .el--right {
  top: 56%;
  width: 24%;
}

.hero__scene[data-flavour='multivitamin'] .el--left {
  top: 60%;
  width: 24%;
}

.hero__scene[data-flavour='multivitamin'] .el--bloom {
  width: 20%;
}

/* Scene choreography -----------------------------------------------------

   The scene assembles rather than slides in. The bottle lands first and is
   the focal point immediately; everything else then arrives from wherever it
   lives in the composition — side fruit from its own side, foreground garnish
   up from below, leaves down from above, and the splash blooming outward from
   the bottle's base because liquid does not slide.

   Each element carries its own vector (--fx/--fy), scale, tilt, delay and
   duration. Uniform vectors are what made an earlier version read as one
   rigid sheet: with every element travelling the same distance in the same
   direction, no amount of stagger separates them. Spread matters relative to
   duration too — these delays run to 300ms against ~550ms moves, so each
   arrival is legible instead of buried under the next.

   Total tail is ~800ms, but the scene is readable at ~450ms; the last leaf
   settling late is exactly what makes it feel unforced.
   ------------------------------------------------------------------------ */

.hero__scene[data-state='enter'] .hero__bottle,
.hero__scene[data-state='enter'] .el,
.hero__scene[data-state='intro'] .hero__bottle,
.hero__scene[data-state='intro'] .el {
  opacity: 0;
  transform: translate3d(var(--fx, 0), var(--fy, 0), 0) rotate(var(--fr, 0deg)) scale(var(--fs, 0.9));
}

/* The opening scene assembles too, but nothing that carries the page's
   largest contentful paint may start invisible — that trades a real load
   metric for a flourish. The splash is exempt outright; the bottle, which
   became the largest painted element once it grew to dominate the phone
   layout, still travels but is painted from the first frame. Fading it in
   measured +740ms of LCP for no visible gain. */
.hero__scene[data-state='intro'] .el--splash {
  opacity: 0.95;
  transform: none;
}

.hero__scene[data-state='intro'] .hero__bottle {
  opacity: 1;
}

.hero__scene.is-active .hero__bottle,
.hero__scene.is-active .el {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur, 560ms) var(--ease-out),
    transform var(--dur, 560ms) var(--ease-scene);
  transition-delay: var(--delay, 0ms);
}

.hero__scene.is-active .el--splash {
  opacity: 0.95;
}

/* The bottle is the only element that settles rather than simply stopping. */
.hero__scene.is-active .hero__bottle {
  transition-timing-function: var(--ease-out), var(--ease-land);
}

/* Entrances, back to front ---------------------------------------------- */

/* Lands first. The only element the swipe direction still tilts, which keeps
   a sense of travel without turning the scene back into one block. */
.hero__bottle {
  --fx: calc(var(--dir, 1) * 1.5rem);
  --fy: 2.2rem;
  --fs: 0.94;
  --delay: 0ms;
  --dur: 600ms;
}

/* Blooms outward from the bottle's base. */
.hero__scene .el--splash {
  --fx: 0rem;
  --fy: 0.5rem;
  --fs: 0.62;
  --delay: 80ms;
  --dur: 660ms;
  transform-origin: 50% 80%;
}

.el--right {
  --fx: 4.5rem;
  --fy: 0.8rem;
  --fs: 0.88;
  --fr: 4deg;
  --delay: 140ms;
  --dur: 580ms;
}

.el--left {
  --fx: -4.2rem;
  --fy: 0.8rem;
  --fs: 0.88;
  --fr: -4deg;
  --delay: 180ms;
  --dur: 580ms;
}

/* Hangs into frame from above. */
.hero__scene .el--back {
  --fx: 1rem;
  --fy: -3rem;
  --fs: 0.9;
  --fr: 3deg;
  --delay: 220ms;
  --dur: 560ms;
  transform-origin: 50% 15%;
}

/* Foreground garnish rises off the floor. */
.el--front {
  --fx: -0.6rem;
  --fy: 3rem;
  --fs: 0.86;
  --delay: 240ms;
  --dur: 540ms;
}

.el--bloom {
  --fx: 1.4rem;
  --fy: 2.6rem;
  --fs: 0.86;
  --fr: 5deg;
  --delay: 280ms;
  --dur: 540ms;
}

/* Falls in last. */
.hero__scene .el--leaf {
  --fx: -1.2rem;
  --fy: -3.2rem;
  --fs: 0.9;
  --fr: -10deg;
  --delay: 300ms;
  --dur: 510ms;
  transform-origin: 50% 15%;
}

/* Idle drift ------------------------------------------------------------
   Once a scene has settled, the loose fruit breathes. Transform only, so it
   stays on the compositor and never touches layout or paint; it starts only
   after the entrance is done (an animation would otherwise override the
   entrance transition), stops the moment the hero scrolls out of view, and
   is off entirely under prefers-reduced-motion. The bottle and the splash
   hold still on purpose — the scene needs an anchor to drift against.
   ------------------------------------------------------------------------ */

@keyframes hero-drift-a {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(4px, -9px, 0) rotate(1.1deg);
  }
}

@keyframes hero-drift-b {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(-5px, -7px, 0) rotate(-1.2deg);
  }
}

@keyframes hero-drift-c {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(3px, 6px, 0) rotate(0.8deg);
  }
}

.hero__scene.is-settled .el--left {
  animation: hero-drift-a 7s ease-in-out infinite alternate;
}
.hero__scene.is-settled .el--right {
  animation: hero-drift-b 8.4s ease-in-out infinite alternate -1.5s;
}
.hero__scene.is-settled .el--front {
  animation: hero-drift-c 6.4s ease-in-out infinite alternate -3s;
}
.hero__scene.is-settled .el--bloom {
  animation: hero-drift-a 7.8s ease-in-out infinite alternate -2.2s;
}
.hero__scene.is-settled .el--back {
  animation: hero-drift-b 9.2s ease-in-out infinite alternate -4s;
}
.hero__scene.is-settled .el--leaf {
  animation: hero-drift-c 8.2s ease-in-out infinite alternate -0.8s;
}

/* Nothing animates while the hero is off screen. */
.hero:not(.is-onscreen) .hero__scene.is-settled .el {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scene.is-settled .el {
    animation: none;
  }
}

/* Exit -------------------------------------------------------------------
   Deliberately the opposite: one direction, fast, barely staggered, so the
   outgoing scene reads as pushed aside by the swipe. The contrast is what
   makes the assembling entrance noticeable. Foreground clears first.
   ------------------------------------------------------------------------ */

.hero__scene.is-leaving .hero__bottle,
.hero__scene.is-leaving .el {
  opacity: 0;
  transform: translate3d(calc(var(--dir, 1) * -3rem), 0.6rem, 0) scale(0.94);
  transition-duration: 340ms;
  transition-delay: var(--exit-delay, 0ms);
  transition-timing-function: var(--ease-out);
}

.el--front,
.el--bloom {
  --exit-delay: 0ms;
}
.el--left,
.el--right {
  --exit-delay: 30ms;
}
.hero__bottle {
  --exit-delay: 55ms;
}
.el--splash {
  --exit-delay: 70ms;
}
.el--back,
.el--leaf {
  --exit-delay: 85ms;
}

/* Copy choreography ----------------------------------------------------- */

.hero__copy [data-anim] {
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.hero.is-swapping .hero__copy [data-anim] {
  opacity: 0;
  transform: translateY(0.9rem);
  transition-duration: 260ms;
  transition-delay: 0ms;
}

.hero__eyebrow {
  --delay: 60ms;
}
.hero__title {
  --delay: 110ms;
}
.hero__rule {
  --delay: 170ms;
}
.hero__description {
  --delay: 210ms;
}

/* Controls -------------------------------------------------------------- */

.hero__controls {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hero__controls > * {
  pointer-events: auto;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 4vw, 3.6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 250 240 / 0.82);
  color: var(--ink);
  box-shadow: 0 12px 30px -18px rgb(40 18 6 / 0.9);
  backdrop-filter: blur(2px);
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.hero__arrow:hover {
  background: #fff;
  transform:scale(1.06);
}

.hero__arrow svg {
  width: 1.1rem;
  height: 1.1rem;
}

.hero__arrow--prev {
  left: clamp(0.6rem, 2.5vw, 2.4rem);
}

.hero__arrow--next {
  right: clamp(0.6rem, 2.5vw, 2.4rem);
}

.hero__counter {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  top: 24%;
  font-family: var(--serif);
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1.1;
}

.hero__counter b {
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  font-weight: 800;
}

.hero__counter span {
  opacity: 0.65;
  font-size: 0.95rem;
}

.hero__counter i {
  display: block;
  width: 2.6rem;
  height: 1px;
  margin-top: 0.4rem;
  margin-left: auto;
  background: currentColor;
  opacity: 0.4;
}

.hero__dots {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: clamp(1.1rem, 3vh, 2.2rem);
  display: flex;
  gap: 0.55rem;
}

.hero__dot {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
}

.hero__dot::after {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.hero__dot[aria-current='true']::after {
  opacity: 1;
  transform: scale(1.5);
}

.hero__dot:hover::after {
  opacity: 0.8;
}

/* Scroll cue ------------------------------------------------------------ */

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.1rem, 3vh, 2.2rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

.hero__scroll i {
  width: 1px;
  height: 2rem;
  background: currentColor;
  transform-origin: top;
  animation: scroll-cue 2.4s var(--ease-out) infinite;
}

@keyframes scroll-cue {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  40% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1) translateY(2rem);
    opacity: 0;
  }
}

/* ------------------------------------------------------------------------
   Mobile — recomposed, not shrunk. The bottle moves to the middle of the
   frame, the copy splits above and below it, and the order button sits in
   the thumb zone.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding-block: clamp(3.9rem, 9.5svh, 4.75rem) clamp(3rem, 7.5svh, 3.75rem);
    text-align: center;
  }

  .hero__veil {
    background:
      linear-gradient(180deg, rgb(255 246 226 / 0.72) 0%, rgb(255 246 226 / 0.18) 30%, rgb(255 246 226 / 0) 48%),
      linear-gradient(0deg, rgb(255 246 226 / 0.8) 2%, rgb(255 246 226 / 0) 34%),
      radial-gradient(120% 60% at 50% 104%, rgb(120 70 20 / 0.25), transparent 60%);
  }

  .hero[data-scheme='dark'] .hero__veil {
    background:
      linear-gradient(180deg, rgb(28 10 8 / 0.8) 0%, rgb(28 10 8 / 0.3) 30%, rgb(28 10 8 / 0) 50%),
      linear-gradient(0deg, rgb(24 8 6 / 0.88) 2%, rgb(24 8 6 / 0) 36%);
  }

  .hero__copy {
    display: contents;
  }

  .hero__head {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }

  /* The scene stops being a row squeezed between the copy and the button and
     becomes the full frame, with the copy floating over it. On a real phone
     the browser's own chrome eats ~200px of viewport, and as a 1fr row the
     stage absorbed the entire loss — the bottle fell to 30% of the screen
     while DevTools, which has no browser UI, showed 43%. Anchored to the
     whole frame, the bottle is sized against the screen instead of against
     whatever is left over. */
  .hero__inner {
    position: relative;
  }

  .hero__stage {
    position: absolute;
    inset: 0 calc(var(--gutter) * -1);
    z-index: 0;
    margin-inline: 0;
  }

  .hero__head,
  .hero__foot {
    position: relative;
    z-index: 2;
  }

  .hero__foot {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
  }

  .hero__title {
    /* The reserve is tied to the base size, not to `em`, so enlarging a
       single-line name below does not also grow the box it sits in. */
    --title-fs: clamp(2.9rem, 13.5vw, 4.4rem);
    font-size: var(--title-fs);

    /* Always two base lines tall. "Limun & Grejp" wraps and the other three
       do not, and because the stage is the 1fr row, that one extra line was
       shrinking the whole scene mid-swipe — the flicker on an iPhone.
       Holding the box constant keeps the bottle identical on every flavour. */
    min-height: calc(2 * 0.86 * var(--title-fs));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* A one-word name is set larger and centred in that box, so the space the
     reserve creates is filled rather than left hanging under the headline.
     The ceiling is set by the longest of them — NARANDŽA — which must not
     overflow, since a single word has nowhere to wrap. */
  .hero__title[data-lines='1'] {
    font-size: clamp(3rem, 15vw, 4.8rem);
  }

  /* VIŠNJA and JAGODA have room to go further; NARANDŽA does not. */
  .hero__title[data-lines='1'][data-short] {
    font-size: clamp(3.4rem, 17.5vw, 5.6rem);
  }

  /* And MULTIVITAMIN, at twice the letters of JAGODA, has to come back down:
     this is the largest that still clears the gutters on a 360px screen. It
     still centres in the two-line reserve, so the box below never moves. */
  /* 12.2vw left MULTIVITAMIN 5px from the edge on a 320px screen, and the
     fallback serif shown while Fraunces loads is wider still — measured
     287px into 280px, i.e. clipped mid-swap. 11vw restores ~21px of margin
     even on the fallback face. */
  .hero__title[data-lines='1'][data-long] {
    font-size: clamp(2rem, 11vw, 3.6rem);
  }

  .hero__eyebrow {
    font-size: clamp(1.2rem, 5.5vw, 1.7rem);
  }

  .hero__rule,
  .hero__scroll,
  .hero__arrow,
  .el--back,
  .el--leaf {
    display: none;
  }

  .hero__description {
    font-size: var(--step-0);
    max-width: 28ch;
    margin-inline: auto;
  }

  /* The three claims collapse to one quiet line above the bottle. As circled
     icons they landed squarely on the label of a bottle this size. */
  .hero__benefits {
    --flow: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.2rem 0.55rem;
  }

  .hero__benefit {
    flex-direction: row;
    align-items: baseline;
    width: auto;
    max-width: none;
    gap: 0.35rem;
  }

  .hero__benefit i,
  .hero__benefit-full {
    display: none;
  }

  .hero__benefit-short {
    display: inline;
  }

  .hero__benefit span {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    opacity: 0.85;
  }

  /* Sized on the item, not the label, or the separator inherits the body size
     and rides above the small-caps line it is meant to sit on. */
  .hero__benefit {
    font-size: 0.58rem;
  }

  .hero__benefit + .hero__benefit::before {
    content: '·';
    font-size: inherit;
    opacity: 0.55;
  }

  /* The copy now sits over the bottle, so it carries its own legibility. */
  .hero__description,
  .hero__benefits {
    text-shadow: 0 1px 10px rgb(255 246 226 / 0.85), 0 1px 3px rgb(255 246 226 / 0.9);
  }

  .hero[data-scheme='dark'] .hero__description,
  .hero[data-scheme='dark'] .hero__benefits {
    text-shadow: 0 1px 12px rgb(24 8 5 / 0.9), 0 1px 3px rgb(24 8 5 / 0.95);
  }

  .hero__cta {
    align-items: center;
    gap: 0.85rem;
  }

  .hero__foot {
    gap: 0.75rem;
    align-items: center;
  }

  .hero__price b {
    font-size: clamp(1.75rem, 7.5vw, 2.4rem);
  }

  .hero__price {
    text-shadow: 0 1px 10px rgb(255 246 226 / 0.8);
  }

  .hero[data-scheme='dark'] .hero__price {
    text-shadow: 0 1px 12px rgb(24 8 5 / 0.9);
  }

  /* The flavour line moves to the product grid on phones; here it only
     crowded the bottle it was printed over. */
  .hero__description {
    display: none;
  }

  .hero__cta .order-btn {
    padding-inline: 1.9em;
  }

  .hero__note {
    display: none;
  }

  /* On phones the stage is limited by height, not width, so the cutouts are
     sized in cqh — a share of the stage's height, the same dimension that
     drives the bottle. Sizing them off the width instead lets the fruit swamp
     the order button on short screens (360x640 and landscape). Positions stay
     in per-cent because horizontal placement should still track the width. */
  .hero__stage {
    container-type: size;
  }

  /* Now measured against the whole frame: ~62% of the screen's height, more
     than double what the old leftover row allowed on a real handset. */
  .hero__bottle {
    height: 62%;
    height: 62cqh;
    bottom: 13%;
    bottom: 13cqh;
  }

  /* Per-cent first, cqh second: browsers without container queries (Safari 15
     and older) keep the width-based values rather than dropping the rule. */
  .el--splash {
    left: 50%;
    translate: -50% 0;
    top: 47%;
    width: 78%;
    width: 43cqh;
  }

  .el--left {
    left: 6%;
    top: 65%;
    width: 20%;
    width: 14cqh;
  }

  .el--right {
    left: 66%;
    top: 61%;
    width: 23%;
    width: 16cqh;
  }

  .el--front {
    left: 28%;
    top: 76%;
    width: 15%;
    width: 10.5cqh;
  }

  .el--bloom {
    left: 63%;
    top: 79%;
    width: 17%;
    width: 12cqh;
  }

  .hero__counter {
    top: auto;
    bottom: clamp(1.1rem, 3vh, 2.2rem);
    right: var(--gutter);
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
  }

  .hero__counter b {
    font-size: 1.15rem;
  }

  .hero__counter span {
    font-size: 0.8rem;
  }

  .hero__counter i {
    display: none;
  }

  .hero__dots {
    left: var(--gutter);
    translate: 0 0;
    bottom: clamp(0.9rem, 2.6vh, 2rem);
  }

  .hero__dot {
    width: 2.1rem;
    height: 2.1rem;
  }
}

/* Very short phones: give the bottle room by dropping the benefit strip. */
@media (max-width: 900px) and (max-height: 700px) {
  .hero__title {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }

  .hero__description {
    font-size: var(--step--1);
  }
}

/* Narrow phones: keep the order button on one line. */
@media (max-width: 380px) {
  .hero__cta .order-btn {
    font-size: 0.88rem;
    padding-inline: 1.35em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__backdrop img,
  .hero__backdrop.is-entering img {
    transform: none;
  }

  .hero__scene[data-state='enter'] .hero__bottle,
  .hero__scene[data-state='enter'] .el,
  .hero__scene.is-leaving .hero__bottle,
  .hero__scene.is-leaving .el {
    transform: none;
  }

  .hero__scroll i {
    animation: none;
  }
}