:root {
  --teal: #1BA9C7;
  --purple: #6A3E9C;
  --magenta: #D0157E;
  --navy: #17284A;
  --bg-light: #E6F5F8;
  --bg-card: #FFFFFF;
  --gradient: linear-gradient(90deg, var(--teal) 0%, var(--purple) 55%, var(--magenta) 100%);
  --radius: 18px;
  --max-w: 480px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #99a3ad;
  font-family: 'Tajawal', 'Segoe UI', sans-serif;
  color: var(--navy);
}

body {
  display: flex;
  justify-content: center;
}

.slide {
  display: none;
  width: 100%;
  max-width: var(--max-w);
  min-height: 100vh;
  background: var(--bg-light);
  position: relative;
  /* clip, not hidden: overflow-x:hidden paired with overflow-y left at its
     default forces the browser to compute overflow-y as auto too (per spec,
     one axis can't be truly visible while the other clips), which silently
     turns .slide into its own scroll container and breaks position:sticky
     on .page-sticky-header (it then sticks relative to .slide's own, unused
     scroll position instead of the page's real scroll). overflow-x:clip
     doesn't force that — it clips horizontally without creating a scroll
     container on either axis. */
  overflow-x: clip;
}

/* Page-specific override — only the dose page, not the shared --bg-light. */
#slide-dose {
  background: #DDECF4;
}

.slide.is-active {
  /* flex column + .page's flex:1 below pushes .page-footer to the true
     bottom of the screen on short pages, while long pages simply grow past
     one screen and the footer follows the content normally, same as before. */
  display: flex;
  flex-direction: column;
  animation: fadeIn .35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

sup { font-size: .6em; }

/* ================= TOPBAR (content pages) ================= */
/* Keeps the logo/buttons bar, the gradient accent line, and the page title
   pinned to the top of the screen as one unit while the content below
   scrolls underneath. */
.page-sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-light);
}

.topbar__logo { height: 28px; }

.topbar__actions { display: flex; gap: 8px; }

.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
}

.icon-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-btn:active { transform: scale(.94); }

.topbar-band {
  height: 6px;
  background: var(--gradient);
  /* Without this, the band sits flush against .page-header (same gradient
     right below it) and the two just read as one seamless block — losing
     the band as its own visible thin accent line. */
  margin-bottom: 4px;
}

.page-header {
  background: var(--gradient);
  color: #fff;
  text-align: center;
  padding: 18px 16px;
}

.page-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.page-header p {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: .9;
}

/* ================= COVER ================= */
.cover { background: var(--bg-light); }

/* The real hero graphic (assets/cover-hero.png) already bakes in the logos,
   headline, model photos, background, and disclaimer as one image, so it
   just needs to render full-width above the icon slider. */
.cover__hero-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Icon slider: full-bleed, swipe-only coverflow ----
   .icon-slider is a direct child of .cover/.slide, neither of which carry
   horizontal padding, so it already spans the full mobile-frame width with
   no breakout hack needed. (A 100vw-based breakout was tried here and broke
   badly on real desktop browser widths, where 100vw is the whole window, not
   the ~480px mobile frame the site renders in — it shoved the slider miles
   off-screen via a huge negative margin.) */
.icon-slider {
  padding: 22px 0 22px;
}

/* No overflow/scroll here on purpose: the 7 cards (5 visible + 1 buffer each
   side) are fixed slots whose content is swapped by JS (see buildIconSlider
   in js/script.js) — centerIndex just walks the ring, wrapping infinitely.
   position:relative anchors the absolutely-positioned .icon-card children
   below (JS drives each one's translateX per frame so it can track the
   finger continuously during a drag, wheel-style, rather than being laid out
   by flex/flow). Height is set explicitly by sizeCards() in JS, since
   absolutely-positioned children no longer contribute to it on their own.
   touch-action:pan-y leaves vertical page scrolling alone while claiming
   horizontal drags for the JS drag-wheel gesture. */
.icon-slider__track {
  position: relative;
  padding: 30px 0 10px;
  touch-action: pan-y;
  cursor: grab;
}

.icon-slider__track:active {
  cursor: grabbing;
}

/* left:50% + the negative margin sizeCards() sets is a centering trick —
   from there, translateX(x) only ever needs to express the offset from
   center. */
.icon-card {
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* No transition here: position/scale/opacity are continuously recomputed on
   every pointermove, so a CSS transition would just lag one frame behind the
   value JS already set — it'd fight the 1:1 finger-tracking instead of
   helping it. Smoothness during a live drag comes from the values themselves
   changing smoothly, not from CSS easing. .is-settling below (added only for
   the brief release-to-rest snap) is the one place transitions apply. */
.icon-slider__track.is-settling .icon-card,
.icon-slider__track.is-settling .icon-card__badge,
.icon-slider__track.is-settling .icon-card__img {
  transition: transform .42s ease, opacity .42s ease;
}

.icon-card__label {
  display: block;
  /* Positioned independent of .icon-card's own width (which is intentionally
     narrow — it's sized for the *unscaled* badge, see sizeCards() in
     js/script.js) rather than flowing inside it. At the active 14px font,
     the longer two-line topic names wrapped into 5+ lines inside that narrow
     box and overflowed straight down into the badge below (this is what
     "text under the icon" was) — this gives the text real room instead. */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  font-size: 7.5px;
  font-weight: 700;
  /* matches the gray chevron in the dark/inactive icon art (sampled ~#6e6e6e),
     rather than the site's navy text color — same tone as the icon itself. */
  color: #6e6e6e;
  /* Fixed (not min-height): some topics' labels are one line, others two —
     with only a min-height, whichever topic swipes into the center changes
     the label's real height, which shifted the whole icon row — and
     everything below it, including the footer — up and down as you swiped.
     A fixed height keeps that constant regardless of which topic is active.
     overflow:hidden is a safety net, not the primary fix — with the wider
     width above, real labels are expected to fit within this height. */
  height: 40px;
  overflow: hidden;
  line-height: 1.25;
  transition: color .28s ease, font-size .28s ease;
}

/* Inactive labels stay one flat color — the Wegovy® wrapper only adds color
   when active (below), but isolating direction always applies, same fix and
   reason as .brand above. */
.icon-card__label-brand {
  color: inherit;
  unicode-bidi: isolate;
  direction: ltr;
}

/* The active label is both noticeably bigger and two-tone: the topic name in
   teal, any "Wegovy®" mention picked out in magenta — matching the PDF. */
.icon-card.is-center .icon-card__label {
  color: var(--teal);
  font-size: 11px;
}

.icon-card.is-center .icon-card__label-brand {
  color: var(--magenta);
}

/* The real art (assets/icons/*-light.png / *-dark.png) already draws its own
   card + chevron-ribbon shape and drop shadow, so the badge here is just a
   frame that cross-fades the two states by opacity as .is-center toggles. */
/* The dark (inactive) and light (active) art aren't quite the same shape —
   dark PNGs are ~951x1106 (0.860 ratio), light ones ~950x1043 (0.911) —
   so each needs its own aspect-ratio here or object-fit:contain pillarboxes
   whichever one doesn't match, leaving visible gaps on its left/right edges.
   Only .is-center ever shows the light art (see the opacity rules below),
   everything else only ever shows dark, hence the default vs. override. */
.icon-card__badge {
  display: block;
  width: 100%;
  aspect-ratio: 951 / 1106;
  margin: 0 auto;
  /* .icon-card__label is position:absolute (see its own rule) so it no
     longer reserves space in normal flow above the badge — this margin
     replaces that spacing explicitly: 40px label height + the 8px gap the
     old margin-bottom used to provide. */
  margin-top: 48px;
  position: relative;
  /* Scaling grows down/sideways from a fixed top edge instead of from the
     center, so cards stay top-aligned as they grow (matching the PDF) rather
     than each one's top drifting upward as it's scaled up. */
  transform-origin: top center;
}

.icon-card.is-center .icon-card__badge {
  aspect-ratio: 950 / 1043;
}

.icon-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Which card is colored is a hard on/off switch (js/script.js), not a
     continuous blend — this transition just keeps that switch from popping
     instantly as it flips during a drag; position/scale stay untransitioned
     (see the .icon-card rule) so 1:1 finger-tracking isn't affected. */
  transition: opacity .2s ease;
  /* images are draggable by default in most browsers, which hijacks a
     mouse/touch swipe into a native "drag this image" gesture instead of
     scrolling the track — the draggable="false" attribute (set in
     js/script.js) is the primary fix, this is the CSS-level backup */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.cover__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 26px;
}

.footer-live-lighter {
  height: 18px;
  width: auto;
}

.footer-chevron {
  height: 20px;
  width: auto;
}

/* ================= CONTENT PAGES ================= */
.page {
  flex: 1 0 auto;
  padding: 18px 20px 90px;
}

.page__question {
  color: var(--magenta);
  font-size: 19px;
  font-weight: 900;
  margin: 18px 0 10px;
}

.page__question-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page__question-row .page__question {
  margin: 0;
  flex: 1 1 auto;
}

.page__question-icon {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
}

.section-gap { margin-top: 26px; }

.page__note {
  color: var(--magenta);
  font-size: 17px;
  font-weight: 700;
  text-align: right;
  margin: 22px 0 12px;
}

/* unicode-bidi:isolate + direction:ltr (the CSS equivalent of an HTML
   dir="ltr" attribute) — without it, "Wegovy®" embedded in RTL Arabic text
   gets its trailing ® reordered to the front by the bidi algorithm, the same
   bug fixed earlier for "LIVE LIGHTER™". */
.brand {
  color: var(--magenta);
  font-weight: 700;
  unicode-bidi: isolate;
  direction: ltr;
}

.card {
  background: #C1E3EE;
  border: 1px solid #fff;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  font-weight: 700;
}

/* A full card design exported as a real image (assets/1.svg etc.), rather
   than reconstructed in CSS — see the memory on preferring real assets. */
.card-image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.card--muted { background: #C1E3EE; border-color: #fff; }

.card__title {
  color: #55637a;
  font-size: 22px;
  margin: 0 0 8px;
}

.card p { line-height: 1.7; font-size: 14.5px; margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }

.fine-print { font-size: 10.5px; color: #6b7789; font-family: sans-serif; }

.pill-row {
  display: flex;
  gap: 14px;
  margin: 10px 0;
}

.pill-item {
  flex: 1;
  text-align: center;
  font-size: 13px;
}

.pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #f3e6f2;
  color: var(--magenta);
  font-size: 20px;
  font-weight: 700;
}

.pill-icon--warn { background: #f3e6f2; }

.video-frame {
  display: block;
  width: 100%;
  background: #10121a;
  border-radius: 10px;
  aspect-ratio: 16/9;
  margin-top: 6px;
}

/* how-to */
.how-block {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid #cfe3ee;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.how-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eaf5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--teal);
}

.how-block p { margin: 0; font-size: 14.5px; line-height: 1.6; }

.body-diagram {
  position: relative;
  max-width: 260px;
  margin: 18px auto 0;
}

.body-svg { width: 100%; height: auto; }
.body-part { fill: #eef4f8; stroke: #17284a; stroke-width: 2; }
.body-part-outline { fill: none; stroke: #17284a; stroke-width: 2; }
.body-zone { fill: #f2b9d6; stroke: #d0157e; stroke-width: 2; }

.body-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--magenta);
  margin-top: 10px;
}

.body-label .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--magenta);
}

/* dose */
.bullet-list {
  padding-inline-start: 20px;
  margin: 10px 0;
}

.bullet-list li {
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 10px;
}

.text-magenta { color: var(--magenta); font-size: 17px; font-weight: 700; }

.text-grey { color: #55637a; }
.text-grey .brand { color: inherit; }

.bullet-list--dot {
  list-style: none;
  padding-inline-start: 22px;
}

.bullet-list--dot li {
  position: relative;
}

.bullet-list--dot li::before {
  content: "";
  position: absolute;
  inset-inline-start: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #04A1CE;
}

.tip-grid {
  display: flex;
  flex-direction: column;
  gap: 45px;
  margin-top: 32px;
  margin-left: -12px;
  margin-right: -12px;
}

.tip-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 53px;
}

.tip { text-align: center; flex: 0 1 100px; min-width: 64px; }

.tip__icon {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 8px;
}

.tip p { font-size: 13px; font-weight: 700; color: var(--teal); margin: 0; }

/* track */
.download-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: var(--magenta);
  font-weight: 800;
  text-decoration: underline;
  font-size: 15px;
}

/* tips */
.tip-section { margin-bottom: 20px; }

.tip-section__label {
  display: inline-block;
  width: auto;
  background: linear-gradient(270deg, var(--teal) 0%, var(--purple) 55%, var(--magenta) 100%);
  color: #fff;
  text-align: center;
  font-weight: 800;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 22px;
}

.tip-star {
  color: var(--teal) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tip-star__icon {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
}

/* references */
.ref-list {
  padding-inline-start: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #55637a;
}

.ref-list li { margin-bottom: 10px; }
.ref-list a { color: #55637a; }

.reference-note-row {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 12px;
  margin-top: 16px;
  align-items: start;
}

.reference-note-row__col--main {
  display: flex;
  gap: 10px;
}

.reference-note-row__icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
}

.reference-note-row__col--main p {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
  color: #55637a;
  overflow-wrap: break-word;
}

.reference-note-row__col--main a { color: #55637a; }

.reference-note-row__col--side img {
  display: block;
  width: 100%;
  height: auto;
}

.reference-footer-image {
  margin-top: 45px;
}

.doc-code {
  text-align: center;
  font-size: 10px;
  color: #8493a6;
  margin-top: 18px;
}

/* footer bar (content pages) */
.page-footer {
  position: relative;
  padding: 16px 20px;
  background: var(--bg-light);
}

.page-footer__notes {
  font-size: 8.5px;
  color: #55637a;
  line-height: 1.6;
  margin-bottom: 12px;
  font-weight: 700;
}

.page-footer__notes p { margin: 0 0 6px; }

/* A thin rule separates the legal disclaimer paragraph from the notes above it. */
.page-footer__notes .page-footer__legal {
  border-top: 1px solid #c7d7e0;
  padding-top: 10px;
  margin-top: 4px;
}

.page-footer__notes .doc-code {
  text-align: left;
  margin-top: 6px;
  font-weight: 700;
}

.page-footer__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 44px; /* clears the wave below so it never overlaps the logos */
}

.page-footer__brand img { height: 30px; width: auto; }

.page-footer__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* ================= SIDE MENU ================= */
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,.5);
  z-index: 40;
}

.menu-overlay.is-open { display: block; }

.side-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  max-width: 82vw;
  height: 100%;
  background: #fff;
  z-index: 50;
  transition: right .3s ease;
  padding: 20px;
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0,0,0,.2);
}

.side-menu.is-open { right: 0; }

.side-menu__close {
  background: none;
  border: none;
  font-size: 26px;
  color: var(--magenta);
  cursor: pointer;
  margin-bottom: 12px;
  display: block;
  margin-inline-start: auto;
}

.side-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-menu__list li {
  border-bottom: 1px solid #eef2f6;
}

.side-menu__list button,
.side-menu__list a {
  width: 100%;
  background: none;
  border: none;
  text-align: right;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  padding: 13px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}

.side-menu__list button:hover,
.side-menu__list a:hover { color: var(--magenta); }
.side-menu__list .menu-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--teal);
}

.side-menu__list .menu-label { flex: 1 1 auto; }

.side-menu__list .menu-icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 481px) {
  body { background: #55606b; }
  .slide { box-shadow: 0 0 40px rgba(0,0,0,.3); }
}