/* ============================================================
   Lately — product pages  (web/medications/<slug>/index.html)
   Design source: Figma "Lately" → page "Product pages" (1440px reference)
   + BUILD-BRIEF-v2 (2026-09-07): 1200px channel, 120px rhythm, five-image
   carousel, scrubber slider, in-place pricing tabs, 85% glow collage.
   Loads AFTER /css/main.css. Only product-specific rules live here.

   Shared layout (the .channel / .collage utilities, --rhythm, --fade, the v2
   How-it-works, the Regulated row, the channel footer, the 85% glow) lives in
   main.css; this file only adds the product blocks, carries inline var()
   fallbacks for the shared tokens and one product-scoped .channel stand-in
   (marked FALLBACK) — consolidate at integration, see the build report.
   ============================================================ */

/* ---------- Tokens ----------
   Palette / radius / ink-alpha tokens, .sr-only and .section-title come from main.css. */
:root {
  --size-name: clamp(3.5rem, 5.84vw, 5.25rem);      /* 84px product name, 56px floor on phones */
  --size-lead: clamp(1.125rem, 1.53vw, 1.375rem);   /* 22px subline / question */

  /* spring-ish overshoot for the pricing-tab thumbnails */
  --pd-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Shared layout tokens come from main.css: --rhythm (120px, 72px on phones), --fade (the 300ms
   colour fade), --collage-gap (64px), .channel / .collage. Every use below carries an inline var()
   fallback so the pages still hold together against an older main.css build. */
/* FALLBACK → main.css .channel (same values, product-scoped so it can never fight the shared rule) */
.product-page .channel {
  width: min(var(--channel, 1200px), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Page canvas ---------- */
.product-page { background: var(--milk); }

/* Hero CTAs: 227×58 orange + 119×58 navy, 18.6px label, 14px ring icon
   (spec "CTA · Check if I’m eligible" ×2 — the second one is labelled "Costs").
   Colour + hover come from main.css .btn--orange (#DE4F2B → #FC7C5C) and
   .btn--navy (#333F63 → #202840); both fade, per the Figma hover sheet. */
.btn--cta {
  padding: 15px 23px;
  gap: 8px;
  font-size: 18.6px;
}
/* Two buttons side by side under the subline (spec x0 and x247 → 20px apart) */
.pd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

/* ============================================================
   Top block — carousel 560 | 40 | intro + questions 600 (the 1200 channel)
   ============================================================ */
.pd-top {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 600fr);
  grid-template-areas:
    "carousel intro"
    "carousel questions";
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  row-gap: 78px;                         /* first question text sits 78px under the trial note (Figma: accordion +52, row pad 26) */
  align-items: start;
  margin-top: clamp(24px, 3vw, 44px);    /* header 106 → carousel top 150 */
}

/* Accordion → "How it works": Figma has 69px from the accordion frame to the title block (+30 block pad) = 99 to the title */
.product-page .how { margin-top: 73px; }

/* ---------- Carousel ---------- */
.carousel { grid-area: carousel; }

.carousel-main {
  position: relative;
  aspect-ratio: 1;                       /* 560×560 in the channel */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--linen);
}
.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Foundayo: the design places a 420×420 pill on a plain Linen card */
.carousel-img.is-inset {
  inset: 20%;
  width: 60%;
  height: 60%;
  object-fit: contain;
  border-radius: 12px;
}
/* Crossfade: product.js copies the outgoing frame into the ghost (on top) and fades it out over the new image */
.carousel-ghost {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.carousel-ghost.is-on { opacity: 1; transition: none; }

.carousel-thumbs {
  display: flex;
  gap: 12px;                             /* 5 × 100 + 4 × 12 = 548 ≤ 560 */
  margin-top: 16px;
}
.carousel-thumb {
  position: relative;
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-thumb);
  overflow: hidden;
  background: var(--linen);
}
.carousel-thumb[hidden] { display: none; }   /* missing optional asset (see the HTML TODO) */
.carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.carousel-thumb:hover img { transform: scale(1.04); } /* photo zoom on hover — kept by request */
.carousel-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-thumb);
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
}
.carousel-thumb[aria-selected="true"]::after { border-color: var(--ink); }
.carousel-thumb:focus-visible { outline-offset: 3px; border-radius: var(--radius-thumb); }

/* ---------- Intro ---------- */
.pd-intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.eyebrow {
  display: inline-block;
  background: var(--linen);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.35;
  color: var(--evergreen);
}

.pd-title {
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: var(--size-name);
  line-height: 1.3;
  letter-spacing: 0;
}

.pd-sub {
  font-weight: 200;
  font-size: var(--size-lead);
  line-height: 1.5;
  color: var(--ink-85);
  max-width: 600px;
}

.trust-chips {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  gap: 10px;
}
/* Per spec the chips are Text Regular (400) on Wegovy / Wegovy pill / Foundayo but
   Text Light (300) on Mounjaro (.trust-chips--light). Implemented as designed —
   NOTE for Shad: probably an unintended discrepancy between the four Figma pages. */
.trust-chips li {
  background: var(--linen);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.35;
}
.trust-chips li:first-child { grid-column: 1 / -1; justify-self: start; }
.trust-chips--light li { font-weight: 300; }
.pd-trial-note {
  max-width: 600px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-65);
}


.pd-reassure {
  font-weight: 200;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-65);
  max-width: var(--w, 560px);
}

/* ---------- Questions accordion (600 wide) ---------- */
.questions { grid-area: questions; }

.acc-item {
  padding-bottom: 26px;        /* row = 26 / header / 26 (+ answer) — same height open or closed */
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 130px;    /* deep links / the pricing dose link land below the floating header */
}

.acc-q { margin: 0; }

.acc-btn {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 0;
  text-align: left;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--size-lead);
  line-height: 1.4;
  color: var(--ink);
}
.acc-text { max-width: 560px; }

.acc-ind {
  flex: none;
  width: 18px;
  transform: translateY(-4px); /* optical nudge only — margin would shrink the 92px row (open 280) */
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  color: var(--orange);
  transition: color 0.3s ease;
}
.acc-ind::before { content: "+"; }
.acc-btn[aria-expanded="true"] .acc-ind::before { content: "–"; }
.acc-btn:hover .acc-ind,
.acc-btn:focus-visible .acc-ind { color: var(--orange-hover); }

/* Panel: driven by main.js's shared accordion — the row gets .is-open / the button
   aria-expanded; nothing uses the [hidden] attribute. Hiding is .js-scoped CSS only:
   grid 0fr→1fr animates height without JS measuring, and collapsed panels are also
   visibility:hidden so AT skips them. Without JS every answer is simply shown. */
.acc-panel {
  display: grid;
  grid-template-rows: 1fr;
}
.acc-body {
  min-height: 0;
  overflow: hidden;
}
.acc-body p {
  padding-top: 14px;          /* 14px between question and answer (spec) */
  font-weight: 200;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-85);
  max-width: 600px;
}
.acc-body p + p { padding-top: 12px; }

.js .acc-item:not(.is-open) .acc-panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s 0.4s;
}
.js .acc-item.is-open .acc-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s 0s;
}

/* How it works: markup and styles are home's (main.css .how*, v2 sizes) — nothing product-specific. */

/* ============================================================
   What to expect — journey 730×430 (channel left) · calculator 430×430 (channel right)
   (.section-title comes from main.css)
   ============================================================ */
.expect { margin-top: var(--rhythm, clamp(72px, 8.333vw, 120px)); }
.expect-grid {
  display: grid;
  grid-template-columns: minmax(0, 730fr) minmax(0, 430fr);
  gap: 40px;
  align-items: start;
  margin-top: 50px;
}

/* ---------- Journey (spec "Journey · 12 months", now 730×430) ----------
   The SVG carries only the area + curve (viewBox 0 0 730 430, stretched to the card);
   dots, labels and the plateau pill are HTML positioned in % so type stays legible
   when the card changes aspect on phones. */
.journey {
  position: relative;
  aspect-ratio: 730 / 430;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--linen);
}
.journey-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.journey-curve {
  fill: none;
  stroke: var(--orange);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--evergreen);
}
.journey-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: rgba(33, 29, 24, 0.8); /* ink 80% — no --ink-80 token exists; component-local alpha */
  white-space: nowrap;
}
.journey-label--end { left: auto; right: var(--r); }
/* plateau pill: 434 wide, centred on dot 3 (55.47%) — spans 188→622 inside the 730 card */
.journey-note {
  position: absolute;
  left: 55.47%;
  top: 26.05%;
  transform: translateX(-50%);
  background: var(--cream);
  border-radius: var(--radius);
  padding: 18px 28px;
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.3;
  color: var(--orange);
  white-space: nowrap;
}

/* draw-in choreography (JS sets dasharray/offset; class .is-drawn arrives on entry).
   Each dot / label / note carries its own delay as an inline --t (like --x/--y). */
.js .journey-curve { transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0.05, 0.35, 1) 0.2s; }
.js .journey-dot,
.js .journey-label,
.js .journey-note {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.js .journey.is-drawn .journey-dot,
.js .journey.is-drawn .journey-label,
.js .journey.is-drawn .journey-note {
  opacity: 1;
  transition-delay: var(--t, 0s);
}

/* ---------- Calculator (spec "Frame 37", 430×430) ----------
   Internals are laid out in "design units": --u = 1/430 of the card width (container
   query units), so the card scales as one piece down to phone widths. */
.calc {
  position: relative;
  width: 100%;
  max-width: 430px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  /* Crisp Figma endpoint beneath the animated radial edge. No extra glow or translation. */
  --dome: 149.2946% 87.2093% at 50% 100%;
  background: url("/assets/img/calc-crisp.webp") center / cover no-repeat var(--linen);
  container-type: inline-size;
  /* Fallback for browsers without container query units: the card is 430px wide until the row
     (channel − 40 gap, split 730:430) gets narrower than that. */
  --u: min(1px, calc((100vw - 40px) / 430));
  --pos: 54;                   /* (94 − 40) kg — product.js animates this; the strip slides by it */
}
@media (min-width: 1101px) {
  .calc { --u: min(1px, calc((100vw - 80px) / 1160)); }
}
@supports (width: 1cqw) {
  .calc { --u: calc(100cqw / 430); }
}
.calc > * { z-index: 1; }      /* content above the glow layer */

/* Interpolate just the softness: the Linen globe stays anchored while its
   edge breathes from Figma “animation” to “animation-breathing-cycle”. */
@property --dome-fade {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 72.0206%;
}
.calc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(var(--dome), #efe4cf 58.1225%,
    rgba(239, 228, 207, 0) var(--dome-fade));
  animation: calc-breathe 9s ease-in-out infinite;
  animation-play-state: paused;
}
.calc.in-view::after { animation-play-state: running; }
@keyframes calc-breathe {
  0%, 100% { --dome-fade: 72.0206%; }
  48%, 55% { --dome-fade: 58.1325%; }
}

.calc-lead {
  position: absolute;
  left: calc(27 * var(--u));
  top: calc(37 * var(--u));
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  color: rgba(254, 250, 239, 0.75);
}
.calc-loss {
  position: absolute;
  left: calc(226 * var(--u));
  top: calc(28 * var(--u));
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: calc(120 * var(--u));
  line-height: 1;
  color: var(--cream);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.calc-loss .unit { font-size: calc(32 * var(--u)); }

.calc-label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(234 * var(--u));
  text-align: center;
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  color: var(--ink-55);
  pointer-events: none;
}
.calc-weight {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(255 * var(--u));
  text-align: center;
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: calc(56 * var(--u));
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.calc-weight .unit {
  font-weight: 200;
  font-size: calc(22 * var(--u));
  color: rgba(33, 29, 24, 0.6); /* ink 60% — no token; component-local alpha */
}

/* ---- Scrubber ----
   A strip of 161 ticks (one per kg, 40–200; majors every 5 kg) slides under a fixed Pulse tick at the
   designed x255.5 marker. Tick pitch 10u, ticks 2u wide, bottom-aligned at 402u.
   product.js translates the strip with --pos and adds a brief 33/27/22px trail
   in the direction of the drag. Resting ticks remain 18px, or 24px at each 5kg mark. */
.calc-scrub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(28 * var(--u));
  height: calc(50 * var(--u));           /* room for the 42u marker and trailing ticks */
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;         /* horizontal drags are ours; vertical still scrolls the page */
  -webkit-user-select: none;
  user-select: none;
}
.calc.is-dragging .calc-scrub { cursor: grabbing; }
.calc-strip {
  position: absolute;
  left: 59.4186%; /* marker at x255.5 in the 430px Figma reference */
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: calc(8 * var(--u));
  transform: translateX(calc((var(--pos) * -10 - 1) * var(--u)));
  will-change: transform;
}
/* Tick alphas: the 28 / 35 / 45 / 55 % steps are a component-local ramp and stay literal on purpose */
.tick {
  flex: none;
  width: calc(2 * var(--u));
  height: calc(var(--h, 18) * var(--u));
  border-radius: 1.5px;
  background: rgba(33, 29, 24, var(--a, 0.28));
  /* Heights are interpolated with the strip in one animation frame. */
}
.tick--major { --h: 24; --a: 0.5; }
.calc-active {
  position: absolute;
  left: 59.4186%;
  bottom: calc(28 * var(--u));
  width: calc(3 * var(--u));
  height: calc(42 * var(--u));
  margin-left: calc(-1.5 * var(--u));
  border-radius: 1.5px;
  background: var(--orange);
  pointer-events: none;
}

/* The accessible control: a native range, visually hidden but focusable and operable (arrows,
   PageUp/Down, Home/End, screen readers — aria-valuetext carries both numbers). Pointer scrubbing
   happens on .calc-scrub and is written back into the input by product.js. */
.js .calc-range {
  position: absolute;
  left: 50%;
  bottom: calc(28 * var(--u));
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.calc-range:focus-visible ~ .calc-scrub {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
  border-radius: 4px;
}
/* No JS: no strip is generated — show the native slider where the ruler would be */
html:not(.js) .calc-range {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  bottom: calc(30 * var(--u));
  width: auto;
  margin: 0;
  accent-color: var(--orange);
}
html:not(.js) .calc-scrub,
html:not(.js) .calc-active { display: none; }

/* ============================================================
   Pricing — tabs (1200 wide, 4 × 300) swap the four embedded dose tables in place
   ============================================================ */
.pricing {
  margin-top: var(--rhythm, clamp(72px, 8.333vw, 120px));
  scroll-margin-top: 120px;    /* #pricing-<slug> deep links land below the floating header */
}
.pricing-sub {
  margin-top: 16px;
  text-align: center;
  font-weight: 200;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.3;
  color: var(--ink-70);
}
.pricing-wrap {
  margin-top: 4px;             /* 44px gap in the design minus the 40px thumbnail headroom below */
}

.ptabs {
  display: flex;
  position: relative;
  padding-top: 40px;           /* headroom at every width: the Mounjaro active thumb rises 37px above the tab */
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.ptabs::-webkit-scrollbar { display: none; }
/* When the strip scrolls (4 × 240px min tabs > the wrap) a soft right-edge fade says "there's more";
   product.js drops it at the end of the strip (.is-at-end) and keeps the active tab centred. */
@media (max-width: 1000px) {
  .js .ptabs:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
  }
}

/* A tab is an <a role="tab"> (the href is the no-JS route to that product page).
   --lx0/--tx0/--ty0/--ts0 = inactive geometry, --lx1/--tx1/--ty1/--ts1 = active geometry, in Figma
   px inside the 275px design tab (+12 centres that design inside the 300px tab). */
.ptab {
  position: relative;
  flex: 1 1 300px;
  min-width: 240px;
  height: 56px;
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink-50);
  scroll-snap-align: center;
  transition: var(--fade, background-color 0.3s ease, color 0.3s ease);
}
.ptab-label {
  position: absolute;
  left: calc((var(--lx0) + 12) * 1px);
  top: 15px;
  white-space: nowrap;
  transition: transform 0.55s var(--pd-spring);
}
.ptab[aria-selected="true"] .ptab-label {
  transform: translateX(calc((var(--lx1) - var(--lx0)) * 1px));
}
/* One image per tab, laid out at its ACTIVE size; inactive = translated + scaled down from the top-left,
   so selecting a tab springs the thumbnail up to full size while the previous one shrinks. */
.ptab-thumb {
  position: absolute;
  left: calc((var(--tx1) + 12) * 1px);
  top: calc(var(--ty1) * 1px);
  width: calc(var(--ts1) * 1px);
  height: calc(var(--ts1) * 1px);
  object-fit: contain;
  pointer-events: none;
  transform-origin: 0 0;
  transform: translate(calc((var(--tx0) - var(--tx1)) * 1px), calc((var(--ty0) - var(--ty1)) * 1px))
             scale(calc(var(--ts0) / var(--ts1)));
  transition: transform 0.55s var(--pd-spring);
  will-change: transform;
}
.ptab[aria-selected="true"] .ptab-thumb { transform: none; }
.ptab[aria-selected="true"] {
  background: var(--linen);
  border-radius: var(--radius-thumb) var(--radius-thumb) 0 0;
  color: var(--ink);
}
.ptab:not([aria-selected="true"]):hover,
.ptab:not([aria-selected="true"]):focus-visible { color: var(--ink); }
.ptab[aria-selected="true"]:hover { background: var(--linen-hover); }
.ptab:focus-visible { outline-offset: -2px; border-radius: var(--radius-thumb) var(--radius-thumb) 0 0; }

/* Sliding underline (3px Pulse): product.js sets --x/--w from the active tab; transitions only
   once .is-ready so the first layout doesn't animate in from 0. */
.ptabs-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--w, 300px);
  transform: translateX(var(--x, 0px));
  background: var(--orange);
  pointer-events: none;
}
.ptabs.is-ready .ptabs-underline { transition: transform 0.35s var(--ease-out), width 0.35s var(--ease-out); }
html:not(.js) .ptabs-underline { display: none; }
html:not(.js) .ptab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--orange);
}

/* Panels: the leaving table goes absolute and fades/slides out while the entering one fades in;
   product.js pins the wrapper's height and transitions it between the two table heights (350ms). */
.ptables {
  position: relative;
  transition: height 0.35s var(--ease-out);
}
.ptables.is-swapping { overflow: hidden; }
.ptable-panel { transition: opacity 0.35s ease, transform 0.35s var(--ease-out); }
.ptable-panel:focus-visible { outline-offset: -2px; }
.ptable-panel.is-entering { opacity: 0; transform: translateX(16px); }
.ptable-panel.is-leaving { position: absolute; left: 0; right: 0; top: 0; }
.ptable-panel.is-gone { opacity: 0; transform: translateX(-16px); }

.ptable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
/* column boxes: 0/300/570/850 → text widths 260/260/250/250 (last two right-aligned) */
.ptable .c-dose    { width: 27.27%; }
.ptable .c-journey { width: 24.55%; }
.ptable .c-price   { width: 25.45%; }
.ptable .c-others  { width: 22.73%; }

.ptable th,
.ptable td {
  text-align: left;
  vertical-align: top;
  padding: 0;
  overflow-wrap: anywhere;   /* {{price_…}} / {{comp_…}} tokens are long until replaced — wrap at every width */
}
/* Vertical rhythm (spec): header 32 / 18 / 2, then 57px rows (15 + 26 + 15 + 1px hairline) */
.ptable thead th {
  padding: 12px 0 2px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-50);
}
.ptable tbody th,
.ptable tbody td {
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
}
/* Lately-price cells are Text Regular (400) on Wegovy / Wegovy pill / Foundayo but Text Light
   (300) on Mounjaro (.ptable--price-light). Implemented as designed — NOTE for Shad: likely an
   unintended discrepancy between the four Figma pages (same as the trust chips). */
.ptable--price-light tbody .col-price { font-weight: 300; }
.ptable .col-journey {
  font-weight: 200;
  font-size: 18px;
  color: var(--ink-75);
}
.ptable .col-price {
  text-align: right;
  padding-right: 30px;
}
.ptable .col-others {
  text-align: right;
  font-weight: 200;
  font-size: 18px;
  color: var(--ink-50);
}
/* the .col-* body styles out-rank `.ptable thead th`, so restate the header type for all three */
.ptable thead .col-journey,
.ptable thead .col-price,
.ptable thead .col-others { font-weight: 400; font-size: 14px; color: var(--ink-50); }
.ptable .col-dose,
.ptable .col-journey { padding-right: 20px; }

/* Three chips in one row under the table (spec "Frame 43 / 63 / 44" at y511):
   Linen, r20, 60px tall — 471 @ x0, 357 @ x491, 244 @ x868 (20px gaps). They keep their
   design widths and WRAP rather than squeeze when the row runs out of room. */
.pricing-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;          /* Match the gap beneath the table in Figma. */
}
.dose-link,
.unsure-link,
.explore-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 100%;
  min-height: 60px;
  background: var(--linen);
  border-radius: var(--radius);
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  transition: var(--fade, background-color 0.3s ease, color 0.3s ease);
}
/* Hover = colour only (Figma "Header / hover"): Linen → #FAE5BD, "+" → #FC7C5C like the FAQ rows */
.dose-link:hover, .dose-link:focus-visible,
.unsure-link:hover, .unsure-link:focus-visible,
.explore-link:hover, .explore-link:focus-visible { background: var(--linen-hover); }
.dose-link:hover .plus, .dose-link:focus-visible .plus,
.unsure-link:hover .plus, .unsure-link:focus-visible .plus { color: var(--orange-hover); }

/* Figma autolayout on Frame 43 / 63: gap 10, padding 10 / 20 / 11 / 25 — which leaves the
   label exactly its designed measure (398 in the 471 chip, 284 in the 357 one) so it stays
   on one line and the chip stays 60px tall. */
.dose-link,
.unsure-link {
  justify-content: space-between;
  gap: 10px;
  padding: 10px 20px 11px 25px;
  color: var(--ink);
}
.dose-link { width: 471px; }
.unsure-link { width: 357px; }
.dose-link .plus,
.unsure-link .plus {
  flex: none;
  width: 18px;
  text-align: center;
  font-weight: 200;
  font-size: 30px;
  line-height: 1.3;
  color: var(--orange);
  transition: color 0.3s ease;
}
/* Hugs its label the way the Figma frame does — the drug name changes the width per page
   (Mounjaro 244, Wegovy 237, Wegovy pill 266, Foundayo 253), so don't pin it to one number. */
.explore-link {
  /* Left-packed after the other two: Figma puts the chips at x0 (471), x491 (357)
     and x868 (244) inside the 1200 channel — i.e. a plain 20px gap, not flush right. */
  gap: 10px;
  padding: 10px 15px 11px 25px;
  white-space: nowrap;
  color: var(--orange);
}
.explore-link svg {
  flex: none;
  width: 24px;
  height: 24px;
}

/* ============================================================
   Glow collage — the same 946.3px component and 64px gaps as the homepage.
   Product pages use a 160px portrait stagger and add a reassurance line,
   with 20px from heading to copy and 24px from copy to CTA.
   ============================================================ */
.glow-reassure {
  margin-top: 20px;
  max-width: 536px;
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-70);
}
.product-page .glow-body .btn { margin-top: 24px; }
.product-page .glow-portrait { margin-top: 46.136%; } /* 160px stagger */
@media (max-width: 860px) { .product-page .glow-portrait { margin-top: 0; } }

/* "Regulated by" row and footer: home's markup + main.css (.regulated / .site-footer carry the rhythm,
   the channel and the wordmark glyph trim) — nothing product-specific. */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .expect-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .journey { width: 100%; max-width: 730px; }
}

@media (max-width: 900px) {
  /* one centred measure (600 + 2 × 20 gutter) shared by carousel, intro and questions
     (.product-page prefix: out-ranks the .product-page .channel width fallback) */
  .product-page .pd-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "carousel"
      "intro"
      "questions";
    grid-template-rows: auto;
    row-gap: 36px;
    width: min(600px, 100% - 2 * var(--gutter));
  }
  .pd-sub, .acc-text, .acc-body p { max-width: none; }
}

/* Plateau note: on narrower cards it stops being centred on dot 3 and hugs the top-right
   corner — the empty triangle above the curve — shrink-wrapped (width: max-content) so it
   wraps instead of spanning the card. Its max-width is anchored to the right edge of the
   "Starting low, settling in" label (left 4.53% + 162px at 16px / 132px at 13px, + a
   margin) so the two can never overlap, whatever the card width. */
@media (max-width: 730px) {
  .journey-note {
    width: max-content;
    max-width: calc(100% - 4.53% - 184px);
    left: auto;
    right: 12px;
    top: 6%;
    transform: none;
    white-space: normal;
    text-align: center;
    padding: 12px 18px;
    font-size: 13px;
    border-radius: 14px;
  }
}

@media (max-width: 640px) {
  .carousel-thumbs { gap: 8px; }
  /* Three square thumbs share the row on any phone width */
  .carousel-thumb { flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1; min-width: 0; max-width: 120px; }
  .pd-intro { gap: 18px; }
  /* Keep the pair side by side on a 390px phone (227 + 119 + 20 would overflow the 350px
     measure, so trim the gap and the button padding rather than let them wrap). */
  .pd-actions { gap: 10px; }
  .pd-actions .btn--cta { padding: 15px 18px; }
  .acc-item { padding-bottom: 20px; }
  .acc-btn { padding-top: 20px; }
  .acc-body p { font-size: 16px; }

  .journey { aspect-ratio: 1 / 1; }
  .journey-label { font-size: 13px; }
  .journey-note { max-width: calc(100% - 4.53% - 152px); } /* label is 132px wide at 13px */

  /* tab strip scrolls; the active tab is centred by product.js */
  .ptab { flex: 0 0 240px; min-width: 240px; font-size: 18px; }

  /* Mobile-friendly table: stacked cards per dose — dose + month on the first line,
     Lately price prominent, "Others" muted underneath. Type stays ≥ 14px; tokens literal. */
  .ptable colgroup, .ptable thead { display: none; }
  .ptable, .ptable tbody { display: block; }
  .ptable tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "dose month"
      "price price"
      "others others";
    column-gap: 16px;
    padding: 16px 0 18px;
    border-bottom: 1px solid var(--rule);
  }
  .ptable tbody th,
  .ptable tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .ptable .col-dose { grid-area: dose; font-size: 18px; }
  .ptable .col-journey { grid-area: month; align-self: center; font-size: 15px; text-align: right; }
  .ptable .col-price { grid-area: price; padding-top: 8px; font-size: 24px; text-align: left; }
  .ptable .col-others { grid-area: others; padding-top: 4px; font-size: 14px; text-align: left; }
  .ptable .col-others::before { content: attr(data-label) " "; }

  /* Chips stack full-width once each one owns its row */
  .pricing-links { margin-top: 40px; gap: 12px; }
  .dose-link,
  .unsure-link,
  .explore-link { width: 100%; font-size: 18px; }
  .dose-link,
  .unsure-link { gap: 16px; }
  .explore-link { justify-content: space-between; }

  .glow-reassure { font-size: 18px; margin-top: 12px; }
  .product-page .glow-body .btn { margin-top: 24px; }
}

/* On the very narrowest phones the anchored note is only ~115px wide: a size down keeps it
   to 4 lines and clear of the third dot beneath it */
@media (max-width: 360px) {
  .journey-note { font-size: 12px; padding: 10px 14px; }
}

/* ============================================================
   Reduced motion / print — show everything, animate nothing
   (main.css already zeroes transition/animation durations; the looping glow must be
   PAUSED, not shortened, or it would flicker at 0.01ms per cycle)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .journey-curve { stroke-dashoffset: 0 !important; }
  .js .journey-dot,
  .js .journey-label,
  .js .journey-note { opacity: 1 !important; }
  .calc::after { animation: none !important; }   /* rests at the 0% frame = the design */
  .calc-strip, .tick, .ptab-thumb, .ptab-label, .ptabs-underline, .ptable-panel, .ptables, .carousel-ghost {
    transition: none !important;
  }
}
@media print {
  .js .journey-curve { stroke-dashoffset: 0 !important; }
  .js .journey-dot,
  .js .journey-label,
  .js .journey-note { opacity: 1 !important; }
  .calc::after { animation: none !important; }
  .js .acc-item:not(.is-open) .acc-panel { grid-template-rows: 1fr; visibility: visible; }
}

/* Selected-treatment callout follows the pricing tab and reserves room above the table. */
.pricing-loss {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: max-content;
  margin: 10px 0 3px;
  margin-left: clamp(0px, calc((var(--tab-index) + .5) * 25% - 143px), calc(100% - 286px));
  padding: 10px 20px 10px 25px;
  min-height: 45px;
  border-radius: 20px;
  background: var(--linen);
  font: 400 15px/1.35 var(--font-text);
}
.pricing-loss::before { content: ''; position: absolute; top: -7px; left: calc(50% - 5px); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--linen); }
.pricing-loss svg { color: var(--orange, #de4f2b); flex: none; }
@media (max-width: 767px) {
  .trust-chips { grid-template-columns: max-content max-content; gap: 10px 8px; }
  .trust-chips li { font-size: 12px; padding: 10px 12px; }
  .pricing-loss { margin-left: 0; margin-bottom: 16px; }
  .pricing-loss::before { left: min(var(--badge-tip, 120px), calc(100% - 15px)); }
}

@media (max-width: 360px) {
  .trust-chips { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); width: 100%; }
  .trust-chips li { padding: 10px; }
}

/* ============================================================
   /medications/ — "Product · Medicated Weight Loss" (Figma 559:2680)
   Same 560 | 40 | 600 grid as the drug pages. Card-relative sizes use cqw (card = 560 → 1cqw = 5.6px).
   ============================================================ */
.carousel-main--mwl { container-type: inline-size; }
.mwl-headline {
  position: absolute;
  top: 8.57cqw;                                 /* y48 */
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: 6.79cqw;                           /* 38px */
  line-height: 1.29;                            /* 49px */
  color: var(--ink);
  pointer-events: none;
}
.mwl-pct {
  display: inline-block;
  padding: 0 1.25cqw;                           /* 89 wide vs 75 text */
  border-radius: 1.79cqw;                       /* 10px */
  background: #f4c69c;                          /* peach highlight */
}
.mwl-milestone {
  position: absolute;
  left: 59.64cqw; top: 59.82cqw;                /* 334, 335 */
  width: 34.64cqw; height: 18.21cqw;            /* 194 × 102 */
  border-radius: 3.21cqw;                       /* 18px */
  background: rgba(254, 250, 239, 0.7);
  border: 1px solid #fff;
  box-shadow: 0 8px 24px rgba(33, 29, 24, 0.08);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  font-family: var(--font-text);
  pointer-events: none;
}
.mwl-milestone-month {
  position: absolute; left: 3.21cqw; top: 3.04cqw;
  font-size: 2.32cqw;                           /* 13px */
  font-weight: 400;
  color: #726a60;
}
.mwl-milestone-text {
  position: absolute; left: 3.21cqw; top: 10.18cqw;
  font-size: 3.57cqw;                           /* 20px */
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
.mwl-milestone-check {
  position: absolute; left: 28.75cqw; top: 3.93cqw;
  width: 1.96cqw; height: 1.43cqw;              /* 11 × 8 */
  color: var(--orange);
}
/* The headline and chip belong to slide 1 only: they fade with the crossfade when another thumb is selected */
.mwl-headline, .mwl-milestone { opacity: 0; transition: opacity 0.45s ease; }
.carousel:has([data-thumb]:first-child[aria-selected="true"]) :is(.mwl-headline, .mwl-milestone) { opacity: 1; }
html:not(.js) :is(.mwl-headline, .mwl-milestone) { opacity: 1; }

.pd-title--mwl {
  font-size: clamp(2.5rem, 3.47vw, 3.125rem);   /* 50px */
  line-height: 1.12;
}
.pd-sub--mwl { line-height: 1.4; color: var(--ink); }
.pd-assess {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
}
.pd-intro--mwl > .btn--cta { margin-top: -12px; }   /* heading → CTA is 12px, not the column's 24 */
.pd-note {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: #726a60;
}
.pd-note--trial { font-weight: 200; max-width: 410px; margin-top: -12px; }