#page .site-content {
  --nnav-desktop-height: 0;
}

/*
  --dscale is one Figma pixel (1720-wide frame) scaled to the actual viewport
  width — it still drives the text sizes/lifts.
  Image geometry: the photo ALWAYS covers the whole hero (100% width and
  height) in both states — no gaps, ever:
  - at rest: nudged up by --image-rest-lift, horizontally centered, box at
    the design crop ratio --img-ar with height --img-h-rest — a linear fit of the approved
    ✅[1920] frames of the RWD board (Figma node 35867-30185:
    1080 -> 1134, 946 -> 1020, 800 -> 854 => 116.67vh - 79px), clamped so
    it can never fall short of the viewport in either axis;
  - after scroll (.is-scrolled): ratio-true box of the natural flush size
    plus --image-lift as extra HEIGHT (not an offset — so the always-present
    rising glide can never uncover the bottom), BOTTOM pinned to the hero
    bottom, sides pushed out symmetrically by the ratio; the Figma top gap
    (tall viewports) or top crop (short ones — 1920x710 frame: 174px hidden,
    64 per side) falls out of the same calc at any width/height.
  The text lifts by --hero-lift and the title shrinks in the same motion;
  the hero itself is a plain 100vh section that scrolls away normally.
*/
.zenh_ihero-block {
  --dscale: calc(min(100vw, 1920px) / 1720);
  /*
    upscale-only design pixel: 1px at the design size, grows on bigger
    screens. Scales by BOTH axes — min() of the width factor (vs the 1720
    design width) and the height factor (vs the 950 design height) — so a
    wide-but-short window (1920x800) stays at base scale instead of
    blowing the UI up; never drops below 1px.
  */
  --up: max(1px, min(var(--dscale), calc(100vh / 950)));
  /*
    notification scale: allows scaling beyond 1920px width, for notification
    content sizing (text, padding, icons)
  */
  --noti-scale: max(1px, min(calc(100vw / 1720), calc(100vh / 950)));
  /* text lift: from 40px at rest up to 120px from the bottom after scroll;
     the vh cap keeps the lift gentle on short windows (650 -> 52px) */
  --hero-lift: min(calc((120 - 40) * var(--dscale)), 8vh);
  /*
    design crop ratio of the photo box — 165/71 (2.3239), verified against
    the 1920x945 frame (2366 x 1018); constant across every RWD variant,
    the jpg itself is taller, object-fit crops it inside
  */
  --img-ar: calc(165 / 71);
  /* settled (after-scroll) size: natural, flush with the viewport width */
  --img-h-flush: calc(100vw / var(--img-ar));
  /*
    per the RWD frames the rest photo is TOP-FLUSH — the whole surplus
    hangs below the fold (1920x945: h=1018, ~73px below). This stays a
    knob: raising it hides that much of the photo top instead.
  */
  --image-rest-lift: 0px;
  /* rest size: piecewise-linear through ALL FOUR verified live points —
     1920x800 -> 854 (1978 wide), 1920x945 -> 1018 (2366 wide),
     1920x1080 -> 1134 (2633 wide) and 1720x1112 -> 1278.6 (2973 wide,
     ~630 per side). The height curve is concave, so min() of the two
     segment lines picks the right branch; the third plane
     (202.8vh - 68.74vw) fires only on squarish windows (W/H < ~1.7),
     where the design zooms harder — it passes exactly through the
     1720x1112 point and loses the max() everywhere wide. The first term
     bakes the rest lift in, so a nudge up can never uncover the bottom. */
  /* the vw-twin branches are the SAME lines with the px constants turned
     into vw anchored at 1920 (206px -> 10.73vw, -51px -> -2.656vw): below
     1920 they lose the max() to the px originals, above they scale the
     whole pattern proportionally — 4K (3840x2160) behaves exactly like
     1920x1080 at 2x (rest 2268, settle 2160) */
  --img-h-rest: max(
    100vh + var(--image-rest-lift),
    min(113.1vh - 51px, 85.93vh + 206px),
    min(113.1vh - 2.656vw, 85.93vh + 10.73vw),
    202.8vh - 68.74vw + 206px,
    202.8vh - 58.01vw,
    var(--img-h-flush)
  );
  /* horizontal overhang per side at rest — keeps the box at --img-ar, centered */
  --img-ox-rest: calc((var(--img-h-rest) * var(--img-ar) - 100vw) / 2);
  /*
    extra settled-box height above the natural flush size — a GENTLE decay
    with the viewport height (1080 -> 0, 800 -> 11px, 650 -> ~17px): short
    windows keep the rise minimal-but-smooth instead of jumping; the vw
    twin scales the anchor on 4K, the cap likewise
  */
  --image-lift: clamp(
    0px,
    max(
      calc((1080px - 100vh) * 0.0393),
      calc((56.25vw - 100vh) * 0.0393)
    ),
    max(24px, 1.25vw)
  );
  /*
    settled box: natural flush size + the lift, ratio-true like the rest box
    (the ar multiplication pushes the sides out symmetrically) — verified
    against the 1920x710 frame: 2048 x 884, 64 per side, 174 above the top.
    The 100vh clamp: on tall windows the Figma flush size would expose an
    empty band above the photo (in Figma it exists only on the scrolled-page
    snapshot, hidden past the screen edge) — the settled box never drops
    below the viewport height, so no photo-less field can ever show; the
    hidden-top effect then comes from the page scroll itself.
  */
  --img-h-scroll: max(calc(var(--img-h-flush) + var(--image-lift)), 100vh);
  --img-ox-scroll: calc((var(--img-h-scroll) * var(--img-ar) - 100vw) / 2);

  width: 100%;
  height: 100vh;
}
.zenh_ihero {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* shows through above the photo after scroll on tall viewports */
  background: var(--color-regular-beige, #F0EEE7);
}
.zenh_ihero-image-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/*
  Geometry (top/left/right/height) is transitioned instead of transform
  because the state sizes are viewport calcs and CSS cannot derive a
  unitless scale() from vw/vh lengths. Every edge interpolates monotonically
  between two covering states, so the photo covers the hero mid-flight too;
  object-fit absorbs the box-ratio change during the move.
*/
.zenh_ihero-image-box {
  position: absolute;
  top: calc(-1 * var(--image-rest-lift, 0px));
  left: calc(-1 * var(--img-ox-rest, 0px));
  right: calc(-1 * var(--img-ox-rest, 0px));
  height: var(--img-h-rest, 100%);
  transition:
    top .8s cubic-bezier(0.33, 1, 0.68, 1),
    left .8s cubic-bezier(0.33, 1, 0.68, 1),
    right .8s cubic-bezier(0.33, 1, 0.68, 1),
    height .8s cubic-bezier(0.33, 1, 0.68, 1);
}
.zenh_ihero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.zenh_ihero-content {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  /* the vh cap drops the whole stack (ratings included) lower on short
     windows: 650 -> 26px from the bottom instead of ~45 */
  padding: 0 48px min(calc(40 * var(--dscale, 1px)), 4vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .8s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
/* 64px/72px at rest → 40px/48px right after the page starts scrolling (@1720) */
.zenh_ihero-title {
  color: var(--color-white, #FFF);
  text-align: center;
  text-shadow: 0 1px 27.1px rgba(58, 58, 58, 0.60);
  font-family: Nunito;
  font-size: calc(64 * var(--dscale, 1px));
  font-style: normal;
  font-weight: 700;
  line-height: calc(72 * var(--dscale, 1px));
  margin: 0 0 calc(32 * var(--dscale, 1px));
  transition: font-size .8s cubic-bezier(0.33, 1, 0.68, 1), line-height .8s cubic-bezier(0.33, 1, 0.68, 1);
}
/* gap 48px at rest → 40px after scroll (@1720) */
.zenh_ihero-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: calc(48 * var(--dscale, 1px));
  margin-bottom: calc(40 * var(--dscale, 1px));
  transition: gap .8s cubic-bezier(0.33, 1, 0.68, 1);
}
.zenh_ihero-benefit {
  color: var(--color-regular-beige, #F0EEE7);
  text-shadow: 0 1px 12px rgba(58, 58, 58, 0.60);
  font-family: Nunito;
  font-size: calc(22 * var(--dscale, 1px));
  font-style: normal;
  font-weight: 300;
  line-height: calc(24 * var(--dscale, 1px));
  white-space: nowrap;
}
.zenh_ihero-benefit strong {
  color: var(--color-white, #FFF);
  font-weight: 600;
}
.zenh_ihero-benefit-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -3px;
}
.zenh_ihero-benefit-icon img {
  display: inline-block;
  height: calc(20 * var(--up, 1px));
  width: auto;
  vertical-align: middle;
}
.zenh_ihero-cta-box {
  margin-bottom: calc(40 * var(--dscale, 1px));
}
.zenh_ihero-cta-button {
  color: #000;
  font-family: Nunito;
  font-size: calc(16 * var(--up, 1px));
  font-style: normal;
  font-weight: 800;
  padding: calc(20 * var(--up, 1px)) calc(42 * var(--up, 1px));
  line-height: calc(24 * var(--up, 1px));
  border: none;
  cursor: pointer;
  border-radius: calc(40 * var(--up, 1px));
  position: relative;
  background: #22E243;
  transition: .2s all ease-in-out;
}
.zenh_ihero-cta-button-icon {
  vertical-align: middle;
  margin-right: calc(8 * var(--up, 1px));
  margin-top: calc(-2 * var(--up, 1px));
  height: calc(16 * var(--up, 1px));
  width: auto;
}
.zenh_ihero-cta-button:hover,
.zenh_ihero-cta-button:focus-visible {
  color: #FFF;
  background: #000;
}
.zenh_ihero-ratings {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(32 * var(--up, 1px));
}
.zenh_ihero-ratings-item {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--up, 1px));
  color: var(--color-dark-beige, #B3AA9D);
  font-family: var(--font-family-master, Nunito);
  font-size: max(var(--font-size-store-rating, 12px), calc(12 * var(--up, 1px)));
  font-style: normal;
  font-weight: 400;
  line-height: calc(18 * var(--up, 1px));
  white-space: nowrap;
}
.zenh_ihero-ratings-logo {
  display: block;
  width: auto;
}
/* logo heights = the SVGs' natural sizes (21/15/13) in upscale-only px */
.zenh_ihero-ratings-item:nth-child(1) .zenh_ihero-ratings-logo {
  height: calc(21 * var(--up, 1px));
}
.zenh_ihero-ratings-item:nth-child(2) .zenh_ihero-ratings-logo {
  height: calc(15 * var(--up, 1px));
}
.zenh_ihero-ratings-item:nth-child(3) .zenh_ihero-ratings-logo {
  height: calc(13 * var(--up, 1px));
}
.zenh_ihero-ratings-score {
  display: flex;
  align-items: center;
}
.zenh_ihero-ratings-item--store .zenh_ihero-ratings-score {
  color: var(--color-medium-beige, #C5BFB5);
}
.zenh_ihero-ratings-score-value {
  font-weight: 700;
}
.zenh_ihero-ratings-score-max {
  font-weight: 400;
}
.zenh_ihero-ratings-score-star {
  font-weight: 700;
  margin-left: calc(4 * var(--up, 1px));
}

/*
  glass notifications — geometry/glass/animation 1:1 from the calibrator
  settings (kalibrator-ustawienia-2026-07-17), position centered instead of
  posX 81.1. Cycle: fall 500ms + hold 2500ms + fade 500ms, then a 2000ms
  empty gap before the next one (JS interval 5500ms).
*/
.zenh_ihero-noti-layer {
  --noti-fall: 500ms;
  --noti-hold: 2500ms;
  --noti-fade: 500ms;
  /*
    hand-calibrated (devtools, 2026-07-18) — single source of truth for the
    card's 3D look (transform-origin 0 0): matrix3d correction on top of the
    base 3D chain; the drop-in/fade-out slide below follows its projected
    local-Y direction (~11.2deg from vertical)
  */
  /* --noti-transform: translate(-29%, -64%) matrix3d(0.99, 0.229, 1, 0.0002, -0.09, 1.019, 0, 0.00009, -0.2, 0.89, 1, 0.00099, 0, 0, 0, 1) perspective(1279px) rotateX(8.5deg) rotateY(9.5deg) rotate(-15deg) skewX(-0.9deg); */
  /* --noti-transform: translate(-29%, -64%) matrix3d(0.99, 0.229, 1, 0.0002, -0.09, 1.019, 0, 0.00009, -0.2, 0.89, 1, 0.00099, 0, 0, 0, 1) perspective(1279px) rotateX(8.5deg) rotateY(-2.5deg) rotate(-20deg) skewX(-0.9deg); */
  /* --noti-transform:translate(-29%, -64%) matrix3d(1, 0.23, 1, 0.0002, -0.14, 1.019, 0, 0, 0.1, 1, 1, 0.001, 0, 0, 0, 1) perspective(1279px) rotateX(12.5deg) rotateY(-2.1deg) rotate(-20deg) skewX(-0.9deg); */
  /* --noti-transform:translate(-40%, -93%) matrix3d(1.00009, 0.24, 1, 0.0005, -0.14, 1.019, 0, 0, 0.1, 1, 1, 0.001, 0, 0, 0, 1) perspective(1279px) rotateX(12.5deg) rotateY(-2.1deg) rotate(-20deg) skewX(-0.9deg); */
  /* --noti-transform:translate(-21%, -74%) matrix3d(1.00009, 0.24, 1, 0.0005, -0.14, 1.019, 0, 0, 0.1, 1, 1, 0.001, 0, 0, 0, 1) perspective(1279px) rotateX(12.5deg) rotateY(-2.1deg) rotate(-20deg) skewX(-0.9deg); */
  --noti-transform: translate(-29%, -64%) matrix3d(1, 0.2, 1, 0.0002, -0.01, 0.955, 0, 0.00025, -0.2, 0.9, 1, 0.001, 0, 0, 0, 1) perspective(1279px) rotateX(8.5deg) rotateY(9.5deg) rotate(-15deg) skewX(-0.9deg);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
  /*
    the layer now only ever runs the transform-slide; the opacity fade moved
    onto the card itself (.zenh_ihero-noti). An animating opacity on this
    ANCESTOR renders the whole group offscreen, and on some devices (iOS
    Safari / some Android GPUs) the compositor then defers the child's
    backdrop-filter — the blur only pops in once the animation settles. With
    the fade on the blur element itself the backdrop is sampled every frame.
  */
  will-change: transform;
}
.zenh_ihero-noti-layer.play {
  animation:
    zenh-notify-drop-in var(--noti-fall) cubic-bezier(.22, 1, .36, 1) forwards,
    zenh-notify-fade-out var(--noti-fade) ease calc(var(--noti-fall) + var(--noti-hold)) forwards;
}
/* opacity fade runs on the blur card itself, in lockstep with the layer slide */
.zenh_ihero-noti-layer.play .zenh_ihero-noti {
  animation:
    zenh-notify-op-in var(--noti-fall) ease forwards,
    zenh-notify-op-out var(--noti-fade) ease calc(var(--noti-fall) + var(--noti-hold)) forwards;
}
/*
  screen-space slide (constant card size — no depth coupling) along the
  PROJECTED direction of the card's local Y axis for the current calibration
  (~11.2deg from vertical, a 90px drop): the card
  visually falls parallel to its own sides
*/
@keyframes zenh-notify-drop-in {
  0%   { transform: translate(-17.4px, -88.3px); }
  100% { transform: translate(0, 0); }
}
@keyframes zenh-notify-fade-out {
  from { transform: translate(0, 0); }
  to   { transform: translate(17.4px, 88.3px); }
}
/* opacity fade for the card (carries backdrop-filter) — paired with the slide above */
@keyframes zenh-notify-op-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zenh-notify-op-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* slightly right of center, rest 1:1 with the calibrator */
.zenh_ihero-noti {
  position: absolute;
  left: 55.5%;
  /*
    31.5% on regular screens; the px floor keeps the card clear of the fixed
    menu (~165px tall) on short viewports — 265px = menu + margin + the part
    of the card that sits above its anchor (translate -64%)
  */
  top: max(265px, 34%);
  /*
    the card hugs its content so the text never wraps — fit-content + nowrap
    text means the card grows exactly to the longest line; min-width scales
    with --noti-scale so it stays ~400px @1920 and shrinks proportionally on
    smaller screens
  */
  width: fit-content;
  min-width: calc(358 * var(--noti-scale, 1px));
  min-height: calc(88 * var(--noti-scale, 1px));
  height: auto;
  /*
    transform-origin at the left edge pins the phone-side end — the strong
    perspective grows away from the phone instead of warping both ends.
  */
  transform: var(--noti-transform);
  transform-origin: 0 0;
  /* hidden at rest; the .play animation fades THIS element (the one that
     carries the backdrop-filter) so the blur is painted from the first frame */
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: calc(23 * var(--noti-scale, 1px));
  /* warm-tinted glass so the card sits in the photo's golden light */
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.38) 0%, rgba(240, 228, 212, 0.30) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(115%) brightness(106%);
  backdrop-filter: blur(14px) saturate(115%) brightness(106%);
  border: 1px solid rgba(255, 248, 238, 0.50);
  box-shadow: 0 10px 26px rgba(64, 48, 32, 0.18);
  overflow: hidden;
}
/* highlight from the top-right — the scene's key light comes from the window on the right */
.zenh_ihero-noti-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(205deg, rgba(255, 250, 240, .28) 0%, rgba(255, 250, 240, .04) 34%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: screen;
}
.zenh_ihero-noti-content {
  position: relative;
  display: flex;
  gap: calc(16 * var(--noti-scale, 1px));
  align-items: center;
  padding: calc(16 * var(--noti-scale, 1px)) calc(18 * var(--noti-scale, 1px));
}
.zenh_ihero-noti-icon {
  flex: 0 0 auto;
  width: calc(48 * var(--noti-scale, 1px));
  height: calc(48 * var(--noti-scale, 1px));
}
.zenh_ihero-noti-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.zenh_ihero-noti-text {
  min-width: 0;
  flex: 1;
}
.zenh_ihero-noti-title {
  color: #222;
  font-family: Nunito;
  font-size: calc(21 * var(--noti-scale, 1px));
  font-style: normal;
  font-weight: 800;
  line-height: calc(24 * var(--noti-scale, 1px));
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}
.zenh_ihero-noti-msg {
  color: #3F3F3F;
  font-family: Nunito;
  font-size: calc(20 * var(--noti-scale, 1px));
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.6px;
  overflow-wrap: anywhere;
}
/* mobile card lives in .zenh_ihero-container — desktop uses the stack above instead */
.zenh_ihero-container {
  display: none;
}

@media (min-width: 992px) {
  .zenh_ihero-block.is-scrolled .zenh_ihero-title {
    font-size: calc(40 * var(--dscale, 1px));
    line-height: calc(48 * var(--dscale, 1px));
  }
  .zenh_ihero-block.is-scrolled .zenh_ihero-benefits {
    gap: calc(32 * var(--dscale, 1px));
  }
  .zenh_ihero-block.is-scrolled .zenh_ihero-image-box {
    top: calc(100% - var(--img-h-scroll));
    left: calc(-1 * var(--img-ox-scroll));
    right: calc(-1 * var(--img-ox-scroll));
    height: var(--img-h-scroll);
  }
  .zenh_ihero-block.is-scrolled .zenh_ihero-content {
    transform: translateY(calc(var(--hero-lift, 10vh) * -1));
  }

  /*
    The flow below the hero sits 92px higher via a STATIC margin — the
    document height never changes, so nothing reflows and nothing jumps.
    At rest the cards section is pushed back down visually by a transform;
    once the page starts scrolling, the transform animates to 0 on the
    compositor and the section slides up, landing the nav pill half on the
    hero (55px block padding + half of the ~73px pill). Everything below the
    fold is invisible at rest, so only this first section needs the visual
    compensation. The z-index lifts the section above the hero so the pill
    paints over the photo.
  */
  .page-template-page-homepage .zenh_cards-block {
    position: relative;
    z-index: 3;
    margin-top: -92px;
    transform: translateY(92px);
    transition: transform .8s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .page-template-page-homepage.zenh-ihero-scrolled .zenh_cards-block {
    transform: none;
  }
}

@media screen and (max-width: 991px) {
  .zenh_ihero-block {
    /*
      fluid design pixel for the mobile composition — 1px at the 440-wide
      mobile design frame, scaling down on narrower phones and up to ~1.45px
      on wide phones/tablets (frozen past 640px). Grows the whole mobile UI
      smoothly across 440→991 instead of the old fixed-px tiers (same idea as
      the desktop --dscale/--up design pixel).
    */
    --mscale: calc(min(100vw, 640px) / 440);
    /* like --mscale but never larger than the design size — only shrinks on
       small phones; used for the floating notification so it stays a small
       accent and never balloons on tablets */
    --mscale-sm: calc(min(100vw, 440px) / 440);
    /*
      bottom_offset (110px) + border_radius (50px) + addition_offset (20px) = 180px
    */
    --screen-height: calc(var(--mobile-height, 100svh) - var(--container-height, '0px') + 180px);

    height: var(--mobile-height, 100svh);
  }
  .zenh_ihero {
    position: relative;
    height: 100%;
    overflow: visible;
    /* clip only the horizontal axis: the notification layer is 100%-wide and
       slides ±8px sideways during its animation, which otherwise pokes past
       the viewport and causes a transient horizontal page scroll. `clip` (not
       hidden) leaves overflow-y visible so the glass card can still bleed below. */
    overflow-x: clip;
  }

  .zenh_ihero-block:after {
    content: '';
    position: absolute;
    background: #000;
    left: 0;
    top: -300px;
    height: 300px;
    width: 100%;
    z-index: 1;
  }

  /* stretched past the hero bottom to the badge's bottom edge (-110px) —
     the glass must have the photo behind it all the way down (the old
     partial --screen-height cut relied on the near-black scrim).
     the negative top pulls the photo up so the woman/phone sit higher in
     frame (the +110px bottom bleed would otherwise inflate the box and push
     the composition down) — matches the Figma crop.
     top is the zoom knob (same object-fit:cover principle): a smaller |top|
     shortens the box, so cover scales the portrait down and MORE of its width
     (sides) shows. -70px is the settled zoom — reveals enough of the sides
     (full plush on the left + the phone) without opening a big empty band of
     wall above the subject. */
  .zenh_ihero-image-container {
    top: -70px;
    bottom: -110px;
    height: auto;
  }
  .zenh_ihero-image-box {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  /* dedicated portrait photo (atf.img3.mobile2, 1520x2837). object-fit cover
     scales it to the box (viewport width x viewport height + 110px badge
     bleed); the box is always taller/narrower than the photo AR, so it
     scales by height and crops width. object-position picks WHICH slice of
     that width shows (it can't change HOW MUCH — that's fixed by the box
     height): 10% keeps the plush fully in frame on the left while still
     holding the phone on the right. */
  .zenh_ihero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 10% top;
  }
  /* dark gradient over the photo for text legibility — 1:1 from Figma
     (gradient.default): transparent at the top, darkening toward the
     bottom where the title/benefits sit, multiplied onto the photo */
  /* .zenh-ihero-short .zenh_ihero-image-container {
    bottom: calc(-110px - var(--short-nudge, 55px));
  } */ 

  .zenh_ihero-content {
    bottom: var(--ihero-content-bottom, 40svh);
    left: 20px;
    right: 20px;
    top: auto;
    padding: 0;
    transform: none;
    opacity: 1;
    text-align: center;
    z-index: 16;
  }
  .zenh_ihero-cta-box,
  .zenh_ihero-ratings {
    display: none;
  }

  .zenh_ihero-noti {
    left: 38%;
    top: max(170px, 26%);
    min-width: 0;
    width: max-content;
    max-width: min(86vw, 400px);
    min-height: calc(64 * var(--mscale-sm));
    border-radius: calc(18 * var(--mscale-sm));
    transform: var(--noti-transform);
  }
  .zenh_ihero-noti-content {
    gap: calc(12 * var(--mscale-sm));
    padding: calc(12 * var(--mscale-sm)) calc(14 * var(--mscale-sm));
  }
  .zenh_ihero-noti-icon {
    width: calc(40 * var(--mscale-sm));
    height: calc(40 * var(--mscale-sm));
  }
  .zenh_ihero-noti-title {
    font-size: calc(17 * var(--mscale-sm));
    line-height: 1.18;
  }
  .zenh_ihero-noti-msg {
    font-size: calc(16 * var(--mscale-sm));
  }
  .zenh_ihero-title {
    color: var(--color-regular-beige, #F0EEE7);
    text-shadow: 0 2px 5.8px rgba(0, 0, 0, 0.40);
    font-family: var(--font-family-master, Nunito);
    font-size: min(calc((100vw - 40px) * 0.071), 44px);
    line-height: 1.15;
    margin: 0;
  }

  .zenh_ihero-benefits {
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--mscale));
    margin: 18px 0 0;
  }
  .zenh_ihero-benefit {
    color: var(--color-regular-beige, #F0EEE7);
    font-family: Nunito;
    font-size: calc(18 * var(--mscale));
    font-style: normal;
    font-weight: 300;
    line-height: 1.33;
  }

  .zenh_ihero-benefit-icon img {
    height: calc(24 * var(--mscale));
  }

  .zenh_ihero-container {
    display: block;
    width: 1017px;
    max-width: 100%;
    position: absolute;
    /* -100px; the photo box still bleeds to -110 so the glass keeps a photo
       behind it. The 24px copy gap re-derives from this in JS (updateMetrics). */
    bottom: -110px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9;
  }

  .zenh_ihero-container:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-radius: calc(48 * var(--mscale)) calc(48 * var(--mscale)) 0 0;
    border: 1px solid #F8DCA7;
    background: linear-gradient(178deg, rgba(248, 220, 167, 0.07) 1.89%, rgba(0, 0, 0, 0.01) 97.72%);
    -webkit-backdrop-filter: blur(10.4px);
    backdrop-filter: blur(10.4px);
    z-index: 2;
  }

  .zenh_ihero-box {
    padding: 28px calc(22 * var(--mscale)) 134px;
    /* 110px covers the card's below-fold bleed; --card-clearance is the
       visible gap the content keeps above the fold, set by JS from the
       browser's bar geometry (bottom bar → tight, top bar → roomier,
       no collapsible UI → the original 24px). See applyViewportVars in
       hero-image.php. */
    padding-bottom: calc(110px + var(--card-clearance, 24px));
    position: relative;
    z-index: 3;
  }
  .zenh_ihero-rating-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px calc(25 * var(--mscale));
  }
  .zenh_ihero-rating {
    font-size: 0;
    white-space: nowrap;
    opacity: 0.8;
    color: #B3AA9D;
  }
  .zenh_ihero-rating-bicon {
    margin-right: calc(4 * var(--mscale));
    display: inline-block;
    vertical-align: middle;
  }
  .zenh_ihero-rating-icon {
    vertical-align: middle;
  }
  .zenh_ihero-rating-label {
    color: #B3AA9D;
    font-family: Nunito;
    font-size: calc(12 * var(--mscale));
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }
  .zenh_ihero-rating-bbutton {
    order: -1;
    width: 100%;
    min-width: 100%;
    text-align: center;
    margin-bottom: 14px;
  }

  /* Trustpilot sits inline with the single, device-picked store rating (the OS
     detection hides the other store), so the two share one centered row. */
  .zenh_ihero-rating--wide {
    text-align: center;
  }

  .zenh_ihero-rating-button {
    color: #000;
    font-family: Nunito;
    font-size: calc(18 * var(--mscale));
    font-style: normal;
    font-weight: 800;
    padding: calc(20 * var(--mscale));
    line-height: 1.33;
    border: none;
    cursor: pointer;
    border-radius: calc(40 * var(--mscale));
    position: relative;
    background: #22E243;
    transition: .2s all ease-in-out;
    text-align: center;
    width: 100%;
  }
  .zenh_ihero-rating-button:focus-visible {
    color: #FFF;
    background: #000;
  }
  .zenh_ihero-rating-button > span {
    display: inline-block;
    padding-left: calc(24 * var(--mscale));
    position: relative;
    vertical-align: middle;
    transition: .2s all ease-in-out;
  }
  .zenh_ihero-rating-button > span:before {
    content: '';
    width: calc(16 * var(--mscale));
    height: calc(16 * var(--mscale));
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    position: absolute;
    background: url(../images/icons/phone.svg) no-repeat center / contain;
    transition: .2s all ease-in-out;
  }
  .zenh_ihero-rating-button:focus-visible > span:before {
    background-image: url(../images/icons/phone-white.svg);
  }
}

@media screen and (max-width: 374px) {
  .zenh_ihero-container:after {
    border-radius: 24px 24px 0 0;
  }
  .zenh_ihero-box {
    padding-top: 20px;
  }
}

/*
  short-fold mode: only the CTA shows in the first view, the store ratings drop
  below the fold. Toggled by JS via body.zenh-ihero-short off the REAL usable
  height (svh, i.e. with the browser UI shown) — a CSS `max-height` media query
  can only see the large viewport, so on a phone whose bar-shown height is short
  it would wrongly keep the ratings and clip the CTA. See updateMetrics in
  hero-image.php.
*/
@media screen and (max-width: 991px) {
  .zenh-ihero-short {
    /* how far the card slides down in CTA-only mode. JS overwrites this with
       the MEASURED ratings-block height + the fold clearance (updateMetrics),
       so the rating rows land just under the fold and the CTA keeps its
       margin above it on every device; 55px is only the no-JS fallback. */
    --short-nudge: 55px;
  }
  .zenh-ihero-short .zenh_ihero-container {
    transform: translate(-50%, var(--short-nudge, 90px));
  }
  /* the card slides down by the nudge — stretch the photo bleed down with it
     so the glass keeps the photo behind it all the way: otherwise its
     backdrop-filter samples the beige page background below the photo edge
     and the card bottom turns into a muddy gray band over the tabs pill.
     (Extending the box only re-crops object-fit:cover slightly; the photo is
     top-anchored, so the composition stays put.) */
  .zenh-ihero-short .zenh_ihero-image-container {
    bottom: calc(-110px - var(--short-nudge, 55px));
  }
  .zenh-ihero-short .zenh_ihero-content {
    transform: translateY(var(--short-nudge, 90px));
  }
  .zenh-ihero-short .zenh_cards-block {
    padding-top: calc(var(--card-padding, 55px) + var(--short-nudge, 90px));
  }
}