/* =========================================================================
   why-popups.css - the three benefit cards of #why (always exactly one shown)
   Figma card 02 (1:114): white, r359, 656x330 at x181 y2422 (section y356).
   Title 1:115 Futurism Bold 36 (x297 y2470), number 1:116 Light 24 on its
   left (x689), body 1:117 Light 24/120% centred, 468 wide at y2549.
   Cards 01 and 03 have no Figma frame: they reuse the same pill language and
   sit next to their own circle (01 top-right, 03 under circle 03).
   ========================================================================= */

#why .why-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  background: #fff;
  color: var(--fg-brown);
  text-align: center;
  font-family: var(--font-heb);
  animation: why-card-enter 220ms var(--ease-out) both;
}

#why .why-popup[hidden] { display: none; }

#why .why-popup__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

#why .why-popup h3 {
  margin: 0;
  color: var(--fg-brown);
  font-family: var(--font-heb);
  font-weight: var(--fw-bold);
  line-height: 1;
}

#why .why-popup__number {
  flex: 0 0 auto;
  font-weight: var(--fw-light);
  line-height: 1;
}

#why .why-popup p {
  margin: 0;
  color: var(--fg-brown);
  font-weight: var(--fw-light);
  line-height: 1.2;
}

@keyframes why-card-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #why .why-popup { animation: none; } }

/* ----- Desktop: Figma geometry ---------------------------------------- */
@media (min-width: 1280px) {
  #why .why-popup {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    inline-size: calc(656 * var(--u));
    min-block-size: calc(330 * var(--u));
    padding: calc(48 * var(--u)) calc(94 * var(--u)) calc(52 * var(--u));
    border-radius: calc(359 * var(--u));
  }

  #why .why-popup__head { gap: calc(28 * var(--u)); margin-block-end: calc(43 * var(--u)); }
  #why .why-popup h3 { font-size: calc(36 * var(--u)); white-space: nowrap; }
  #why .why-popup__number { font-size: calc(24 * var(--u)); }
  #why .why-popup p { inline-size: calc(468 * var(--u)); font-size: calc(24 * var(--u)); }

  /* 02 - Figma */
  #why .why-popup--2 { left: calc(181 * var(--u)); top: calc(356 * var(--u)); }

  /* 01 - right of circle 01 (x1248..1348), above the "Why" line */
  #why .why-popup--1 {
    left: calc(1384 * var(--u));
    top: calc(40 * var(--u));
    inline-size: calc(500 * var(--u));
    padding-inline: calc(56 * var(--u));
  }
  #why .why-popup--1 p { inline-size: calc(390 * var(--u)); }

  /* 03 - centred under circle 03 (centre x611, bottom y201) */
  #why .why-popup--3 {
    left: calc(283 * var(--u));
    top: calc(250 * var(--u));
    min-block-size: calc(250 * var(--u));
  }
  #why .why-popup--3 p { inline-size: calc(430 * var(--u)); }
}

/* ----- Tablet + mobile: one card under the circles row ---------------- */
@media (max-width: 1279.98px) {
  #why .why-popup {
    position: relative;
    box-sizing: border-box;
    inline-size: min(calc(100% - 2 * var(--container-pad)), 620px);
    margin: clamp(1.75rem, 5vw, 2.5rem) auto 0;
    padding: clamp(2rem, 6vw, 2.75rem) clamp(1.5rem, 7vw, 3.25rem) clamp(2.25rem, 6.5vw, 3rem);
    border-radius: clamp(3rem, 14vw, 7rem);
  }
  #why .why-popup__head { gap: .75rem; margin-block-end: clamp(1rem, 3.5vw, 1.5rem); }
  #why .why-popup h3 { font-size: clamp(1.35rem, 4.4vw, 1.9rem); }
  #why .why-popup__number { font-size: clamp(1rem, 2.6vw, 1.25rem); }
  #why .why-popup p { max-inline-size: 30rem; font-size: clamp(1rem, 2.7vw, 1.2rem); line-height: 1.45; }
}