/* Eastern Pink 18 — 1:1 copy of /zahra/zahra.css for /eastern-pink (AR) and /en/eastern-pink (EN).
   Only the campaign colours (official Eastern Pink 18 shades), the photo slots and the
   launch-gate rules at the end differ from Zahra. Never edit /zahra for this page.
   The page markup keeps the design export's inline styles; this file holds the
   foundations, responsive tokens, hover states, and the interactive pieces
   (gift form, sticky bar, final CTA) that both languages share. */

:root {
  --atheal-forest: rgb(4, 76, 64);
  --atheal-forest-deep: rgb(2, 60, 50);
  --color-fg: rgb(25, 25, 16);
  --color-muted: rgb(101, 101, 93);
  --color-cream: rgb(247, 247, 242);
  --color-stroke-accent: rgb(21, 154, 132);
  /* Official Eastern Pink 18 palette (the only pinks on the page). */
  --ep-pink-light: #F7DCE0;
  --ep-pink-medium: #F0B9BE;
  --ep-pink-primary: #E08FA0;
  --ep-pink-pale: #FDF3F5;
  /* Zahra's darkest pink carried small text on white; no official shade is dark
     enough, so that role falls back to ātheal green. */
  --ep-pink-deep: var(--atheal-forest);
  --zh-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --zh-latin: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
html[lang="en"] { --zh-sans: 'IBM Plex Sans', system-ui, sans-serif; }

html, body { margin: 0; padding: 0; background: var(--color-cream); color: var(--color-fg); font: 400 15px/1.4 var(--zh-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 96px; }
h1 { font: 500 36px/1.1 var(--zh-sans); margin: 0; color: var(--color-fg); }
h2 { font: 700 28px/1.2 var(--zh-sans); margin: 0; color: var(--color-fg); }
h3 { font: 700 24px/1.25 var(--zh-sans); margin: 0; color: var(--color-fg); }
p { margin: 0; color: var(--color-muted); }
* { box-sizing: border-box; }
a { color: var(--atheal-forest); text-decoration: none; }
a:hover { color: var(--color-stroke-accent); }
*, *::before, *::after, button, input, textarea, select { font-family: var(--zh-sans) !important; }
[style*="IBM Plex Sans',sans-serif"], [style*='"IBM Plex Sans", sans-serif'] { font-family: var(--zh-latin) !important; }
[hidden] { display: none !important; }

/* Responsive values from the export (mobile layout below 760px, menu button below 1000px). */
:root {
  --zh-hero-img: none;
  --zh-za-img: none; /* url(/images/eastern-pink/movement.webp) once the running photo is supplied */
  --zh-hero-min-h: max(85vh, 640px);
  --zh-hero-align: center;
  --zh-hero-bg-size: cover;
  --zh-hero-bg-pos: center 45%;
  --zh-hero-overlay: linear-gradient(to left, rgba(16,11,8,0.82) 0%, rgba(16,11,8,0.62) 26%, rgba(16,11,8,0.2) 46%, rgba(16,11,8,0) 60%), linear-gradient(to top, rgba(16,11,8,0.3) 0%, rgba(16,11,8,0) 28%);
  --zh-hero-pad: 72px clamp(24px,4vw,48px);
  --zh-za-min-h: clamp(720px, 60vw, 960px);
  --zh-za-bg-size: cover;
  --zh-za-bg-pos: center 8%;
  --zh-za-pad: 0 clamp(24px,4vw,48px) clamp(48px,5vw,72px);
  --zh-za-overlay: linear-gradient(to top, rgba(22,12,9,0.94) 0%, rgba(22,12,9,0.78) 22%, rgba(22,12,9,0.3) 42%, rgba(22,12,9,0) 58%), linear-gradient(to bottom, rgba(22,12,9,0.35) 0%, rgba(22,12,9,0) 18%);
}
@media (min-width: 760px) {
  /* LTR: the copy sits on the left, so the legibility gradient starts there. */
  html[dir="ltr"] {
    --zh-hero-overlay: linear-gradient(to right, rgba(16,11,8,0.82) 0%, rgba(16,11,8,0.62) 26%, rgba(16,11,8,0.2) 46%, rgba(16,11,8,0) 60%), linear-gradient(to top, rgba(16,11,8,0.3) 0%, rgba(16,11,8,0) 28%);
  }
}
@media (max-width: 759.98px) {
  :root {
    --zh-hero-img: none;
    --zh-za-img: none; /* url(/images/eastern-pink/movement-mobile.webp) */
    /* National-day pattern: full-bleed photo with the copy laid over it, so
       the offer and the CTA land in the first screen. */
    --zh-hero-min-h: calc(100svh - 76px);
    --zh-hero-align: flex-start;
    --zh-hero-bg-size: cover;
    --zh-hero-bg-pos: 56% 40%;
    --zh-hero-overlay: linear-gradient(to bottom, rgba(16,11,8,0.5) 0%, rgba(16,11,8,0.28) 30%, rgba(16,11,8,0.45) 52%, rgba(16,11,8,0.86) 78%, rgba(16,11,8,0.94) 100%);
    --zh-hero-pad: 28px 20px 36px;
    --zh-za-min-h: auto;
    --zh-za-bg-size: 150% auto;
    --zh-za-bg-pos: 55% top;
    --zh-za-pad: calc(150vw * 0.9834 * 0.62) 20px 56px;
    --zh-za-overlay: linear-gradient(to bottom, rgba(22,12,9,0.1) 0%, rgba(22,12,9,0) 30%, rgba(22,12,9,0.75) 56%, rgb(22,12,9) 70%);
  }
}
@media (max-width: 999.98px) { .zh-only-wide { display: none !important; } }
@media (min-width: 1000px) { .zh-only-narrow { display: none !important; } }

/* Directional icons point "forward" in both reading directions. */
html[dir="ltr"] .zh-arrow { transform: scaleX(-1); }

/* Hover and focus states from the export. */
.zh-h1:hover { color: var(--atheal-forest) !important; }
.zh-h2:hover { background: var(--atheal-forest-deep) !important; color: var(--color-cream) !important; }
.zh-h3:hover { background: rgb(255,255,255) !important; color: var(--atheal-forest-deep) !important; }
.zh-h4:hover { background: var(--ep-pink-primary) !important; color: rgb(255,255,255) !important; box-shadow: 0 14px 36px color-mix(in srgb, var(--ep-pink-primary) 40%, transparent) !important; }
.zh-h5:hover { opacity: 1 !important; }
.zh-f6:focus { border-bottom-color: var(--color-stroke-accent) !important; }
.zh-h7:hover { background: var(--color-cream) !important; }
.zh-h8:hover { color: var(--color-cream) !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ep-pink-primary); outline-offset: 3px; }

/* Gift card form ---------------------------------------------------------- */
.zh-gift-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-muted); }
.zh-gift-input {
  width: 100%;
  padding: 4px 0 6px;
  border: none;
  border-bottom: 1px dashed rgb(191,191,176);
  border-radius: 0;
  background: transparent;
  color: var(--atheal-forest);
  font-size: 17px;
  font-weight: 600;
  outline: none;
  transition: border-color 160ms ease;
}
.zh-gift-input::placeholder { color: rgb(164,164,150); font-weight: 500; }
.zh-gift-input:focus { border-bottom-color: var(--color-stroke-accent); border-bottom-style: solid; }
.zh-gift-input[aria-invalid="true"] { border-bottom-color: var(--ep-pink-primary); border-bottom-style: solid; }
.zh-gift-note {
  width: 100%;
  min-height: 3.6em;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-fg);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 500;
  line-height: 1.75;
  resize: none;
  outline: none;
  field-sizing: content;
  transition: opacity 200ms ease-out;
}
.zh-gift-note:focus { box-shadow: 0 1px 0 var(--color-stroke-accent); }
.zh-gift-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zh-gift-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--color-muted); }
.zh-gift-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--ep-pink-pale); color: var(--ep-pink-deep); font-size: 14px; font-weight: 600; }
.zh-gift-submit { border: none; cursor: pointer; }
.zh-gift-submit[disabled] { cursor: progress; opacity: .7; }

/* Sticky bar (national-day pattern: floating pill after the hero) ---------- */
.zh-sticky {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(620px, calc(100% - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .65rem .65rem 1.15rem;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 45px rgba(4,76,64,.18);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  opacity: 0;
  transform: translate(-50%, calc(100% + 40px));
  pointer-events: none;
  transition: opacity 250ms ease, transform 300ms cubic-bezier(.22,1,.36,1);
}
html[dir="rtl"] .zh-sticky { padding: .65rem 1.15rem .65rem .65rem; }
.zh-sticky.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.zh-sticky-price { display: grid; line-height: 1.25; }
.zh-sticky-price-line { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.zh-sticky-price-line strong { color: var(--atheal-forest); font-family: var(--zh-latin) !important; font-size: 1.05rem; font-weight: 600; }
.zh-sticky-was { color: var(--color-muted); font-size: .8rem; font-weight: 500; }
.zh-sticky-was span { font-family: var(--zh-latin) !important; }
.zh-sticky-unit { color: var(--color-muted); font-size: .75rem; }
.zh-sticky-meta { margin-top: .18rem; color: var(--ep-pink-deep); font-size: .72rem; font-weight: 600; }
.zh-sticky-button {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.2rem;
  border-radius: 999px;
  background: var(--atheal-forest);
  color: var(--color-cream);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease;
}
.zh-sticky-button:hover { background: var(--atheal-forest-deep); color: var(--color-cream); }
@media (max-width: 620px) {
  .zh-sticky { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .zh-sticky-meta { display: none; }
  .zh-sticky-button { min-width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .zh-sticky { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--color-fg); }
}

/* Header labels and CTA stay on one line in both languages. */
header nav a, header a.zh-h2 { white-space: nowrap; }
/* English headings run longer than the Arabic the export was sized for. */
html[lang="en"] #top h1 span { font-size: clamp(36px, 4.2vw, 54px) !important; line-height: 1.12 !important; }
html[lang="en"] #top h1 { gap: 10px !important; }
@media (max-width: 1180px) { header nav.zh-only-wide { gap: 24px !important; } }

@media (max-width: 759.98px) {
  /* Mobile hero: compact lock-up and type so offer + CTA fit above the fold. */
  #top > div > div { gap: 18px !important; }
  #top img[src*="eastern-pink-18-logo"] { height: 64px !important; }
  #top h1 span { font-size: clamp(32px, 9.4vw, 42px) !important; line-height: 1.25 !important; }
  #top h1 { gap: 0 !important; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
  #top [data-price-campaign] { font-size: 44px; }
  #top > div > div > div:nth-of-type(2) { padding-top: 14px !important; gap: 8px !important; }
  #top a.zh-h3 { width: 100%; height: 56px !important; }
}
@media (max-width: 420px) {
  html[lang="en"] .zh-sticky-unit { display: none; }
  .zh-sticky { gap: .6rem; }
  .zh-sticky-button { min-width: 0; padding: .6rem .95rem; font-size: 14px; }
}

/* Hero photo (supplied portrait). The WHOLE image is always visible: it is
   painted with background-size: contain in its own panel (#top::before, under
   Zahra's overlay div), so it is never cropped, zoomed or covered by the copy.
   A soft wash of the official pinks sits over the photo; the copy always sits
   on the hero's dark base, keeping white text readable. */
:root { --zh-hero-img: none; --ep-hero-photo: url(/images/eastern-pink/hero-rtl.webp); --ep-hero-photo-pos: left bottom; }
html[dir="ltr"] { --ep-hero-photo: url(/images/eastern-pink/hero-ltr.webp); --ep-hero-photo-pos: right bottom; }
#top::before { content: ""; position: absolute; pointer-events: none; background: var(--ep-hero-photo) var(--ep-hero-photo-pos) / contain no-repeat; }
@media (min-width: 1100px) {
  /* Panel = the photo itself (aspect-ratio from the hero height), never wider
     than the space beside Zahra's 540px copy column. Zahra's dark overlay is
     dropped here: the photo's own soft inner edge fades into the hero's dark
     base, and the pink wash lives on the photo, so there is no black
     gradient over the image and no muddy band beside it. */
  :root { --ep-photo-w: calc(100% - max(0px, (100% - 1280px) / 2) - clamp(24px, 4vw, 48px) - min(540px, 100%) - 48px); --zh-hero-overlay: none; }
  html[dir="ltr"] { --zh-hero-overlay: none; }
  #top::before { top: 0; bottom: 0; inset-inline-end: 0; width: auto; aspect-ratio: 1141 / 1700; max-width: var(--ep-photo-w); }
  /* When the copy makes the hero taller than the photo (e.g. the 4-line EN
     headline), the photo's own sky continues above it instead of an empty
     band. The fill sits under the photo and never covers any of it. */
  #top { container-type: inline-size; }
  :root { --ep-sky-h: max(0px, calc(100% - (100cqw - max(0px, (100cqw - 1280px) / 2) - clamp(24px, 4vw, 48px) - 588px) * 1700 / 1141)); }
  #top::before { background:
      linear-gradient(to left, rgba(224,143,160,0) 0, rgba(224,143,160,0.14) 16%, rgba(240,185,190,0.12) 55%, rgba(247,220,224,0.10) 100%),
      var(--ep-hero-photo) var(--ep-hero-photo-pos) / contain no-repeat,
      linear-gradient(to right, rgba(94,148,196,1.000) 0%, rgba(94,148,197,1.000) 4%, rgba(95,149,197,1.000) 8%, rgba(97,150,198,1.000) 12%, rgba(97,150,198,1.000) 16%, rgba(98,151,199,1.000) 20%, rgba(98,151,199,1.000) 24%, rgba(98,151,198,1.000) 28%, rgba(99,152,200,1.000) 32%, rgba(99,153,201,1.000) 36%, rgba(98,151,199,1.000) 40%, rgba(99,151,199,1.000) 44%, rgba(99,151,199,1.000) 48%, rgba(102,153,202,1.000) 52%, rgba(100,153,201,1.000) 56%, rgba(99,151,199,1.000) 60%, rgba(99,151,199,1.000) 64%, rgba(98,151,199,1.000) 68%, rgba(98,149,198,1.000) 72%, rgba(98,149,198,1.000) 76%, rgba(95,149,197,1.000) 80%, rgba(96,148,197,1.000) 84%, rgba(97,148,197,0.844) 88%, rgba(94,147,196,0.500) 92%, rgba(93,146,194,0.156) 96%, rgba(94,144,193,0.000) 100%) left top / 100% var(--ep-sky-h) no-repeat; }
  html[dir="ltr"] #top::before { background:
      linear-gradient(to right, rgba(224,143,160,0) 0, rgba(224,143,160,0.14) 16%, rgba(240,185,190,0.12) 55%, rgba(247,220,224,0.10) 100%),
      var(--ep-hero-photo) var(--ep-hero-photo-pos) / contain no-repeat,
      linear-gradient(to right, rgba(94,148,196,0.000) 0%, rgba(94,148,197,0.156) 4%, rgba(95,149,197,0.500) 8%, rgba(97,150,198,0.844) 12%, rgba(97,150,198,1.000) 16%, rgba(98,151,199,1.000) 20%, rgba(98,151,199,1.000) 24%, rgba(98,151,198,1.000) 28%, rgba(99,152,200,1.000) 32%, rgba(99,153,201,1.000) 36%, rgba(98,151,199,1.000) 40%, rgba(99,151,199,1.000) 44%, rgba(99,151,199,1.000) 48%, rgba(102,153,202,1.000) 52%, rgba(100,153,201,1.000) 56%, rgba(99,151,199,1.000) 60%, rgba(99,151,199,1.000) 64%, rgba(98,151,199,1.000) 68%, rgba(98,149,198,1.000) 72%, rgba(98,149,198,1.000) 76%, rgba(95,149,197,1.000) 80%, rgba(96,148,197,1.000) 84%, rgba(97,148,197,1.000) 88%, rgba(94,147,196,1.000) 92%, rgba(93,146,194,1.000) 96%, rgba(94,144,193,1.000) 100%) left top / 100% var(--ep-sky-h) no-repeat; }
}
@media (max-width: 1099.98px) {
  /* Phones and tablets: the photo on top as a full-width frame, the copy
     below. Phones show the whole portrait minus some empty sky above her
     head (so the headline reaches the first screen); tablets trim a little
     sky and scarf instead of floating a narrow photo between flat pink
     bands. The frame's bottom fades into the pink background. */
  :root { --ep-hero-h: min(120vw, 76svh); }
  #top::before { top: 0; inset-inline: 0; height: var(--ep-hero-h); background-size: cover !important; background-position: center 30% !important; }
  :root, html[dir="ltr"] {
    --ep-hero-photo: url(/images/eastern-pink/hero-mobile.webp);
    --zh-hero-min-h: auto;
    --zh-hero-align: flex-start;
    --zh-hero-pad: calc(var(--ep-hero-h) + 8px) clamp(20px, 4vw, 48px) 40px;
    --zh-hero-overlay: linear-gradient(to bottom, rgba(247,220,224,0.08) 0, rgba(240,185,190,0.12) calc(var(--ep-hero-h) - 140px), rgba(247,220,224,0.6) calc(var(--ep-hero-h) - 50px), rgb(253,243,245) calc(var(--ep-hero-h) + 8px));
  }
}
@media (max-width: 759.98px) {
  :root { --ep-hero-h: max(118vw, min(132vw, 66svh)); }
  #top::before { background-position: center 85% !important; }
}

/* Breast-health section photo (supplied portrait), shown whole like the hero:
   desktop = photo in the empty half (left in AR, right in EN), its soft inner
   edge fading into the section's pink base, and the unchanged copy stacked in
   the other half; phones = the full photo on top. Pink wash = official palette. */
#breast-health-assessment[data-ep-photo] { --zh-za-overlay: none; --ep-za-photo: url(/images/eastern-pink/assessment-rtl.webp); --ep-za-pos: left bottom; --ep-za-in: to left; }
html[dir="ltr"] #breast-health-assessment[data-ep-photo] { --ep-za-photo: url(/images/eastern-pink/assessment-ltr.webp); --ep-za-pos: right bottom; --ep-za-in: to right; }
#breast-health-assessment[data-ep-photo]::before { content: ""; position: absolute; pointer-events: none; }
@media (min-width: 1100px) {
  #breast-health-assessment[data-ep-photo]::before { top: 0; bottom: 0; inset-inline-end: 0; width: auto; aspect-ratio: 1141 / 1700;
    max-width: calc(100% - max(0px, (100% - 1280px) / 2) - clamp(24px, 4vw, 48px) - 500px - 48px);
    background:
      linear-gradient(var(--ep-za-in), rgba(224,143,160,0) 0, rgba(224,143,160,0.14) 16%, rgba(240,185,190,0.12) 55%, rgba(247,220,224,0.10) 100%),
      var(--ep-za-photo) var(--ep-za-pos) / contain no-repeat; }
  #breast-health-assessment[data-ep-photo] > div:last-child { grid-template-columns: minmax(0, 500px) !important; justify-content: start; align-content: end; }
}
@media (max-width: 1099.98px) {
  #breast-health-assessment[data-ep-photo] { --ep-za-h: min(149vw, 900px); --zh-za-min-h: auto; --zh-za-pad: calc(var(--ep-za-h) + 12px) clamp(20px, 4vw, 48px) 56px; }
  #breast-health-assessment[data-ep-photo]::before { top: 0; inset-inline: 0; height: var(--ep-za-h);
    background:
      linear-gradient(to bottom, rgba(247,220,224,0.08) 0, rgba(240,185,190,0.14) 70%, rgba(247,220,224,0.6) 90%, rgb(253,243,245) 100%),
      url(/images/eastern-pink/assessment-mobile.webp) center 30% / cover no-repeat; }
}

/* Pink hero (campaign owner, 2026-10-08): no black background or gradient.
   The official pinks carry the whole hero; the photo's soft edge fades into
   them, and the copy switches to ink / ātheal green for readability. The
   white-only logo files are shown as single-colour silhouettes (same file,
   masked) because white disappears on pink. */
#top { background: linear-gradient(to left, #FDF3F5 0%, #FDF3F5 42%, #F7DCE0 100%) !important; }
html[dir="ltr"] #top { background: linear-gradient(to right, #FDF3F5 0%, #FDF3F5 42%, #F7DCE0 100%) !important; }
@media (max-width: 1099.98px) { #top, html[dir="ltr"] #top { background: #FDF3F5 !important; } }
#top > div > div { color: #11100f !important; }
#top img[src*="-logo-white"] { object-position: -9999px 0; -webkit-mask: var(--ep-logo) center / contain no-repeat; mask: var(--ep-logo) center / contain no-repeat; }
#top img[src*="eastern-pink-18-logo"] { --ep-logo: url(/images/eastern-pink/eastern-pink-18-logo-white.webp); background: #E08FA0; }
#top img[src*="atheal-logo"] { --ep-logo: url(/images/eastern-pink/atheal-logo-white.webp); background: rgb(4,76,64); }
#top img[src*="scf-logo"] { --ep-logo: url(/images/eastern-pink/scf-logo-white.webp); background: #11100f; }
#top span[style*="width:1px;height:24px"] { background: rgba(17,16,15,0.25) !important; }
#top h1 { color: #11100f !important; text-shadow: none !important; }
#top h1 > div:last-child span { color: rgb(4,76,64) !important; }
#top h1 > div:first-child span { color: #E08FA0 !important; }
#top p, #top [style*="color:rgb(196,190,178)"] { color: rgb(84,74,76) !important; }
#top p[style*="font-size:12px"] { color: rgb(112,100,103) !important; }
#top [style*="color:rgb(255,255,255)"] { color: #11100f !important; }
#top [data-price-campaign], #top [data-ep-contribution], #top [data-zh-bind="copy-label"], #top [style*="color: var(--ep-pink-medium)"] { color: rgb(4,76,64) !important; }
#top [data-ep-gate="offer"][style*="border-top"] { border-top-color: rgba(224,143,160,0.55) !important; }
#top [data-zh-action="copy-code"] { color: rgb(84,74,76) !important; }
#top [data-zh-action="copy-code"] span[style*="letter-spacing: 0.1em"] { color: rgb(4,76,64) !important; border-bottom-color: #E08FA0 !important; }
#top a.zh-h3 { background: rgb(4,76,64) !important; color: #FDF3F5 !important; box-shadow: 0 10px 30px rgba(224,143,160,0.35); }
#top a.zh-h3:hover { background: rgb(3,58,49) !important; color: #ffffff !important; }

/* ---- Page polish (full visual QA, 2026-10-08) ----------------------------
   One pink system across the page: the official pinks for backgrounds,
   display type, dots, bars and borders; ātheal green / ink for every small
   text (the light official pinks are not readable below display sizes). */
/* Breast-health section: pink like the hero instead of Zahra's near-black. */
#breast-health-assessment[data-ep-photo] { background: linear-gradient(to left, #FDF3F5 0%, #FDF3F5 45%, #F7DCE0 100%) !important; }
html[dir="ltr"] #breast-health-assessment[data-ep-photo] { background: linear-gradient(to right, #FDF3F5 0%, #FDF3F5 45%, #F7DCE0 100%) !important; }
@media (max-width: 1099.98px) { #breast-health-assessment[data-ep-photo], html[dir="ltr"] #breast-health-assessment[data-ep-photo] { background: #FDF3F5 !important; } }
#breast-health-assessment[data-ep-photo] h2 { color: #11100f !important; }
#breast-health-assessment[data-ep-photo] p[style*="font-size:18px"] { color: rgb(60,52,54) !important; }
#breast-health-assessment[data-ep-photo] p[style*="font-size:13px"] { color: rgb(112,100,103) !important; }
#breast-health-assessment[data-ep-photo] span[style*="border:1px solid"] { color: rgb(4,76,64) !important; border-color: #E08FA0 !important; }
#breast-health-assessment[data-ep-photo] img[src*="eastern-pink-18-logo-white"] { object-position: -9999px 0; background: #E08FA0; -webkit-mask: url(/images/eastern-pink/eastern-pink-18-logo-white.webp) center / contain no-repeat; mask: url(/images/eastern-pink/eastern-pink-18-logo-white.webp) center / contain no-repeat; }
/* Small pink text -> ātheal green (pink dots, bars and underlines stay). */
header a.zh-h1[style*="--ep-pink-primary"] { color: rgb(4,76,64) !important; font-weight: 600; text-decoration: none; }
span[style*="font-size:14px;font-weight:600;color:var(--ep-pink-primary)"],
span[style*="font-size: 14px; font-weight: 600; color: var(--ep-pink-primary)"],
#contribution strong[style*="--ep-pink-primary"],
#contribution span[style*="color:var(--ep-pink-primary);font-weight:600"],
#gifting span[style*="font-size:17px"][style*="--ep-pink-primary"],
#gifting span[style*="font-size:12px;color:var(--ep-pink-primary)"],
#gifting span[style*="font-size:14px;line-height:1.7;color:var(--ep-pink-primary)"],
#gifting span[style*="grid-row:span 2"][style*="--ep-pink-primary"] { color: rgb(4,76,64) !important; }
/* Gifting panel: the palest pink so the pink headline reads; the strip under
   the gift card keeps the deeper pink as a tab. */
#gifting > div[style*="border-radius: 36px"] { background-color: #FDF3F5 !important; box-shadow: inset 0 0 0 1px rgba(224,143,160,0.22); }
#gifting .zh-gift-submit { background: rgb(4,76,64) !important; color: #FDF3F5 !important; box-shadow: 0 10px 30px rgba(224,143,160,0.35); }
#gifting .zh-gift-submit:hover { background: rgb(3,58,49) !important; color: #ffffff !important; }

/* Launch gates (Eastern Pink only) ---------------------------------------
   Unconfirmed facts sit in [data-ep-gate] elements; eastern-pink.js sets
   data-ep-state: "open" (confirmed), "off" (production, unconfirmed: removed)
   or "preview" (localhost / Firebase preview / staging: outlined for review).
   Outlines never change layout, so previews stay pixel-comparable to Zahra. */
[data-ep-gate][data-ep-state="off"] { display: none !important; }
html.ep-preview [data-ep-state="preview"] { outline: 1.5px dashed rgba(224,143,160,0.9); outline-offset: 4px; }
html.ep-preview .ep-ph { background: rgba(255,231,163,0.45); border-radius: 4px; }
a[data-ep-link][aria-disabled="true"] { cursor: not-allowed; }

/* Footer registration line (CR · VAT) wraps on very narrow phones (320px). */
footer span:has(> img[src*="business-sa"]) { flex-wrap: wrap; row-gap: 2px; }

/* Phones + tablets (Zahra / product-page pattern, 2026-10-08): the photo fills
   the whole hero and the hero copy sits on it in light type, with Zahra's tint
   (same strengths) in a very dark warm rose rather than black. Logos stack like
   Zahra's. The intro paragraph moves below the CTA, so the first screen carries
   only the headline, the offer and the CTA, as on /zahra. */
@media (max-width: 1099.98px) {
  :root {
    --ep-hero-h: 0px;
    --zh-hero-align: flex-start;
    --zh-hero-pad: 28px clamp(20px, 4vw, 48px) 36px;
  }
  html[dir] #top {
    min-height: calc(100svh - 76px) !important;
    background: #22100f url(/images/eastern-pink/hero-mobile.webp) center 22% / cover no-repeat !important;
  }
  html[dir] #top::before { display: none !important; }
  #top > div:first-child {
    background: linear-gradient(to bottom,
      rgba(34,14,20,0.50) 0%,
      rgba(34,14,20,0.28) 30%,
      rgba(34,14,20,0.45) 52%,
      rgba(34,14,20,0.86) 78%,
      rgba(34,14,20,0.94) 100%) !important;
  }
  /* Intro paragraph after the CTA row; the disclaimer stays last. */
  #top > div:last-child > div > h1 + p { order: 5; }
  #top > div:last-child > div > p:last-child { order: 6; }
  html[dir] #top > div > div { color: #fff !important; }
  html[dir] #top img[src*="eastern-pink-18-logo"] { background: #F0B9BE; }
  html[dir] #top img[src*="atheal-logo"] { background: #FDF3F5; }
  html[dir] #top img[src*="scf-logo"] { background: #ffffff; }
  html[dir] #top span[style*="width:1px;height:24px"] { background: rgba(255,255,255,0.4) !important; }
  html[dir] #top h1 { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,0.25) !important; }
  html[dir] #top h1 > div:first-child span { color: #F0B9BE !important; }
  html[dir] #top h1 > div:last-child span { color: #ffffff !important; }
  html[dir] #top p, html[dir] #top [style*="color:rgb(196,190,178)"] { color: rgba(255,247,249,0.88) !important; }
  html[dir] #top p[style*="font-size:12px"] { color: rgba(255,247,249,0.7) !important; }
  html[dir] #top [style*="color:rgb(255,255,255)"] { color: #fff !important; }
  html[dir] #top [data-price-campaign] { color: #F0B9BE !important; }
  html[dir] #top [data-ep-contribution], html[dir] #top [style*="color: var(--ep-pink-medium)"] { color: #F0B9BE !important; }
  html[dir] #top [data-ep-gate="offer"][style*="border-top"] { border-top-color: rgba(247,220,224,0.3) !important; }
  html[dir] #top [data-zh-action="copy-code"] { color: rgba(255,247,249,0.82) !important; }
  html[dir] #top [data-zh-action="copy-code"] span[style*="letter-spacing: 0.1em"] { color: #F0B9BE !important; border-bottom-color: #F0B9BE !important; }
  html[dir] #top [data-zh-bind="copy-label"] { color: #F0B9BE !important; }
  html[dir] #top a.zh-h3 { background: #FDF3F5 !important; color: rgb(4,76,64) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
  html[dir] #top a.zh-h3:hover { background: #ffffff !important; color: rgb(3,58,49) !important; }
}

/* Hero hierarchy per design.md §16 (2026-10-08): logo → headline → one line
   (the Foundation contribution) → price → CTA → one small line. The intro
   paragraph and the "exclusive discount" line move out of the hero (the
   partnership and free-screening sections carry them). On phones and tablets
   the copy sits at the bottom of the photo, with the CTA near the bottom of
   the first screen. */
@media (max-width: 1099.98px) {
  :root { --zh-hero-align: flex-end; --zh-hero-pad: 24px clamp(20px,4vw,48px) 28px; }
  #top > div:first-child {
    background: linear-gradient(to bottom, rgba(34,14,20,0.30) 0%, rgba(34,14,20,0.05) 26%, rgba(34,14,20,0.35) 46%, rgba(34,14,20,0.86) 66%, rgba(34,14,20,0.95) 100%) !important;
  }
  #top > div:last-child > div { gap: 14px !important; }
  /* moves below the fold: covered again in the partnership + screening sections */
  #top h1 + p,
  #top [data-ep-gate="offer"] > span:not(:first-child) { display: none !important; }
  /* contribution becomes the one-line lede, right under the headline */
  #top [data-ep-gate="offer"] { border-top: 0 !important; padding-top: 0 !important; gap: 10px !important; }
  #top [data-ep-gate="offer"] p { order: -1; font-size: 15px !important; line-height: 1.55 !important; }
  #top [data-ep-gate="offer"] p br { display: none; }
  #top [data-price-campaign] { font-size: 40px; }
  #top > div:last-child > div > p:last-child { font-size: 11px !important; margin-top: -4px !important; }
}
@media (max-width: 759.98px) {
  #top img[src*="eastern-pink-18-logo"] { height: 56px !important; }
}
@media (min-width: 1100px) {
  #top h1 + p,
  #top [data-ep-gate="offer"] > span:not(:first-child) { display: none !important; }
  #top [data-ep-gate="offer"] { border-top: 0 !important; padding-top: 0 !important; gap: 14px !important; }
  #top [data-ep-gate="offer"] p { order: -1; font-size: 18px !important; max-width: 46ch; }
  #top [data-ep-gate="offer"] p br { display: none; }
}
/* Each headline line is its own block, so the line height follows the span's
   own size (the h1's larger base size was adding ~25px per wrapped EN line). */
#top h1 > div > span { display: block; }
/* Bottom-align the hero copy on phones/tablets in both languages (an earlier
   LTR rule resets --zh-hero-align). */
@media (max-width: 1099.98px) { html[dir] #top { align-items: flex-end !important; } }

/* Language picker (header link on wide screens, last item in the mobile menu). */
.zh-lang { font-size: 15px; font-weight: 600; color: rgb(78,80,79); white-space: nowrap; transition: color 200ms; }
.zh-lang:hover { color: rgb(4,76,64); }