/* /pages/oral-semaglutide (Nov 8 2026 redesign) — page-only additions on top of weight-loss.css.
   Rules: every class is wl-os-*, colours/spacing come from the --wl-* tokens, animations are transform/opacity only,
   nothing changes layout on hover, phones get no backdrop-filter and no scroll-time work (see weight-loss.css notes). */

/* ---------- hero: plain stage + gallery (simplified Nov 11 2026: no chips / ring / glow / in-image strip) ---------- */
.wl-os-stage { background: linear-gradient(150deg, #ffe9dc 0%, #fff4ec 55%, #f6eef9 100%); border-radius: 20px; }
/* slides are stacked on the stage and crossfade — opacity/transform only */
.wl-os-slide { position: absolute; inset: 0; z-index: 3; margin: 0; opacity: 0; transform: scale(1.03); pointer-events: none;
  transition: opacity .7s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.wl-os-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* the image is absolutely positioned with EXPLICIT percentage left/top/width/height (a replaced element ignores right/bottom
   when width/height are auto) → a definite box regardless of grid/percentage-height quirks; object-fit: contain draws the
   cutout inside it, centred horizontally. Bottom band stays free for the thumbs/dots. */
.wl-os-stage img.wl-os-slide__img { position: absolute; left: 24%; top: 7%; width: 52%; height: 76%; max-width: none; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 26px 30px rgba(70, 35, 25, .26)); }
.wl-os-slide--bottle img.wl-os-slide__img { animation: wl-os-float 6s ease-in-out infinite; transform-origin: 50% 90%; }
.wl-os-slide:not(.is-on) img { animation-play-state: paused; }
.wl-os-slide--tablets img.wl-os-slide__img { left: 17%; top: 10%; width: 66%; height: 68%; object-position: 50% 50%; filter: drop-shadow(0 30px 34px rgba(70, 35, 25, .30)); }
.wl-os-slide--hand img.wl-os-slide__img { left: 17%; top: 6%; width: 66%; height: 76%; object-position: 50% 55%; filter: drop-shadow(0 24px 30px rgba(70, 35, 25, .24)); }
/* faint floor shadow, bottle slide only (inside the slide so it fades with it) */
.wl-os-stage__shadow { position: absolute; left: 50%; top: 82%; width: 34%; height: 5%; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 35, 25, .26), transparent); filter: blur(2px); }
@keyframes wl-os-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* picker inside the stage: thumbnails on desktop, dots on phones/tablets — same buttons */
.wl-os-thumbs { position: absolute; left: 50%; bottom: 14px; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.wl-os-thumb { position: relative; width: 52px; height: 52px; padding: 0; margin: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: rgba(255, 255, 255, .9); box-shadow: 0 6px 18px -10px rgba(20, 18, 16, .4), inset 0 0 0 1.5px rgba(20, 18, 16, .08);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.wl-os-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.wl-os-thumb.is-on { box-shadow: 0 6px 18px -10px rgba(20, 18, 16, .4), inset 0 0 0 2px var(--wl-ink); }
@media (hover: hover) { .wl-os-thumb:not(.is-on):hover { transform: translateY(-2px); } }
.wl-os-thumb:focus-visible { outline: 3px solid #8a8580; outline-offset: 2px; }
.wl-os-thumb__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wl-accent); transform: scaleX(0); transform-origin: 0 50%; }
.wl-os-thumb.is-on.is-timing .wl-os-thumb__bar { transform: scaleX(1); transition: transform var(--wl-os-dwell, 5s) linear; }
@media (max-width: 1023px) {
  /* dots on a frosted pill (skinnyrx) */
  .wl-os-thumbs { gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .82); bottom: 12px; }
  .wl-os-thumb { width: 8px; height: 8px; border-radius: 999px; background: rgba(11, 11, 12, .22); box-shadow: none; transition: width .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; }
  .wl-os-thumb img, .wl-os-thumb__bar { display: none; }
  .wl-os-thumb.is-on { width: 18px; background: var(--wl-ink); box-shadow: none; }
  .wl-os-thumb::before { content: ""; position: absolute; inset: -10px; }      /* 28px touch target without changing the look */
}
@media (max-width: 749px) {
  .wl-os-stage { aspect-ratio: 1 / 1; }
  .wl-os-stage img.wl-os-slide__img { left: 22%; top: 6%; width: 56%; height: 78%; }
  .wl-os-slide--tablets img.wl-os-slide__img { left: 15%; top: 10%; width: 70%; height: 68%; }
  .wl-os-slide--hand img.wl-os-slide__img { left: 15%; top: 5%; width: 70%; height: 78%; }
  .wl-os-stage__shadow { top: 83%; }
}
/* other products on the same stage (Nov 11 2026, shared template). Slide keys: vial (529×1120 upright cutout, slimmer than
   the bottle), tilt (the WL hub's tilted vial), drops (bottom-cropped by design → anchored to the stage's bottom edge, no floor
   shadow), brand (800×800 brand-* cutouts: pens / pills, centred). Single-slide stages have no picker, so the product may sit lower. */
.wl-os-stage .wl-os-slide--vial img.wl-os-slide__img { left: 30%; width: 40%; animation: wl-os-float 6s ease-in-out infinite; transform-origin: 50% 90%; }
.wl-os-stage .wl-os-slide--tilt img.wl-os-slide__img { left: 15%; top: 8%; width: 70%; height: 74%; object-position: 50% 50%; filter: drop-shadow(0 28px 32px rgba(70, 35, 25, .28)); }
.wl-os-stage .wl-os-slide--drops img.wl-os-slide__img { left: 26%; top: 7%; width: 48%; height: 93%; object-position: 50% 0; }
.wl-os-slide--drops .wl-os-stage__shadow { display: none; }
.wl-os-stage .wl-os-slide--brand img.wl-os-slide__img { left: 12%; top: 10%; width: 76%; height: 72%; object-position: 50% 50%; filter: drop-shadow(0 24px 30px rgba(70, 35, 25, .22)); }
.wl-os-stage--single .wl-os-slide--brand img.wl-os-slide__img { top: 12%; height: 76%; }
.wl-os-slide--brand .wl-os-stage__shadow { top: 86%; width: 46%; }
@media (max-width: 749px) {
  .wl-os-stage .wl-os-slide--vial img.wl-os-slide__img { left: 28%; width: 44%; }
  .wl-os-stage .wl-os-slide--tilt img.wl-os-slide__img { left: 12%; width: 76%; }
  .wl-os-stage .wl-os-slide--drops img.wl-os-slide__img { left: 24%; width: 52%; top: 6%; height: 94%; }
  .wl-os-stage .wl-os-slide--brand img.wl-os-slide__img { left: 9%; width: 82%; }
}

/* hero copy additions */
.wl-os-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; list-style: none; }
.wl-os-tags li { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--wl-card); font-size: 13px; font-weight: 600; color: var(--wl-ink); }
.wl-os-tags i { width: 7px; height: 7px; border-radius: 50%; background: var(--wl-accent); }
.wl-os-tags .wl-os-tags__rx { background: var(--wl-ink); }
.wl-os-tags .wl-os-tags__ok { background: #1f9d68; }
.wl-os-tags li.wl-os-tags__fsa { gap: 6px; padding: 0 12px 0 9px; background: var(--wl-ink); color: #fff; }   /* FSA/HSA Eligible tag (Nov 12 2026) */
.wl-os-tags__fsa .wl-ico { width: 16px; height: 16px; color: var(--wl-accent); }
@media (max-width: 749px) {   /* phones: the 4 fact tags share ONE row (tighter pills) */
  .wl-os-tags { gap: 4px; }
  .wl-os-tags li { height: 28px; padding: 0 7px; gap: 4px; font-size: 11px; letter-spacing: -0.01em; white-space: nowrap; }
  .wl-os-tags li.wl-os-tags__fsa { padding: 0 8px 0 6px; gap: 4px; }
  .wl-os-tags i { width: 6px; height: 6px; }
  .wl-os-tags__fsa .wl-ico { width: 14px; height: 14px; }
}
.wl-os-price { margin-top: 18px !important; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.wl-os-price strong { font-size: clamp(20px, .5vw + 14px, 24px); font-weight: 800; letter-spacing: -0.03em; color: var(--wl-ink); line-height: 1; }
.wl-os-price span { font-size: 14px; color: var(--wl-muted); }
.wl-os-hero .wl-hero__lead { margin-top: 14px !important; }
.wl-os-hero .wl-hero__list { margin-top: 18px !important; }
.wl-os-hero .wl-hero__ctas { margin-top: 20px; }
/* Trustpilot line as text under the CTAs (same classes as the WL strip, de-boxed) */
.wl-os-hero .wl-hero__tp { position: static; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: none; margin-top: 18px; padding: 0; border: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--wl-ink) !important; font-size: 15px; }
.wl-os-hero .wl-hero__tp-label { font-size: 16px; }
.wl-os-legal { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--wl-line); font-size: 13px; line-height: 1.5; color: #55585f; }
.wl-os-legal a { color: var(--wl-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 749px) {
  /* phone copy rhythm (declared after the base rules above so these win): tighter so stage + copy stay around 1.5 screens */
  .wl-os-tags { margin-top: 10px !important; }
  .wl-os-price { margin-top: 12px !important; }
  .wl-os-price strong { font-size: 20px; }
  .wl-os-hero .wl-hero__lead { margin-top: 10px !important; font-size: 16px; }
  .wl-os-hero .wl-hero__list { margin-top: 14px !important; gap: 10px; }
  .wl-os-hero .wl-hero__ctas { margin-top: 16px; }
  .wl-os-hero .wl-hero__tp { margin-top: 14px; font-size: 14px; }
  .wl-os-legal { margin-top: 12px !important; padding-top: 10px; font-size: 12.5px; }
}

/* ---------- dose ladder ---------- */
.wl .wl-os-doses { background: #fff; }
.wl-os-doses__head { text-align: center; max-width: 760px; margin: 0 auto; }
.wl-os-doses__head .wl-lead { margin-top: 10px !important; color: var(--wl-text); }
.wl-os-ladder { --k: 1; position: relative; margin: 38px auto 0; max-width: 960px; padding: 40px 8px 0; }
/* each strength stands on a riser that grows with the dose; risers draw up (scaleY) in sequence when the ladder enters view.
   Five EQUAL columns (not flex space-around: the buttons differ in width, which pushed 2 mg to the left edge) → tablets and
   risers sit at 10/30/50/70/90 % of the row, symmetric at every width */
.wl-os-ladder__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); align-items: end; justify-items: center; padding-bottom: 1px; }
.wl-os-ladder__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--wl-line); }
.wl-os-dose { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; display: grid; justify-items: center; gap: 12px;
  cursor: pointer; color: var(--wl-ink); font: inherit; border-radius: 12px; }
.wl-os-riser { width: 3px; height: calc(22px + var(--step) * 26px * var(--k)); border-radius: 2px 2px 0 0; background: linear-gradient(to top, var(--wl-accent), rgba(255, 118, 50, .25));
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.15s + var(--step) * .12s); }
.wl-os-ladder.is-in .wl-os-riser { transform: none; }
.wl-os-dose[aria-checked="true"] .wl-os-riser { background: var(--wl-accent); }
.wl-os-dose:focus-visible { outline: 3px solid #8a8580; outline-offset: 4px; }
.wl-os-tablet { position: relative; width: calc(var(--s) * var(--k)); height: calc(var(--s) * var(--k)); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #f4f1ed 50%, #ddd8d2 100%);
  box-shadow: inset 0 -3px 6px rgba(20, 18, 16, .08), 0 12px 24px -12px rgba(20, 18, 16, .5);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.wl-os-tablet::before { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: max(2px, calc(var(--s) * var(--k) * .05)); border-radius: 2px; background: rgba(20, 18, 16, .12); transform: translateY(-50%); }
.wl-os-tablet::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--wl-accent); opacity: 0; transform: scale(.82); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.wl-os-dose[aria-checked="true"] .wl-os-tablet { transform: translateY(-8px); box-shadow: inset 0 -3px 6px rgba(20, 18, 16, .08), 0 24px 32px -14px rgba(255, 118, 50, .6); }
.wl-os-dose[aria-checked="true"] .wl-os-tablet::after { opacity: 1; transform: none; }
.wl-os-dose__mg { font-size: 15px; font-weight: 600; color: var(--wl-muted); white-space: nowrap; transition: color .3s; }
.wl-os-dose[aria-checked="true"] .wl-os-dose__mg { color: var(--wl-ink); font-weight: 800; }
@media (hover: hover) { .wl-os-dose:not([aria-checked="true"]):hover .wl-os-tablet { transform: translateY(-5px); } }
/* plan / high-dose brackets under the baseline (Nov 12 2026 mockup): same N-column grid as the row; each bracket = a rounded U turned up */
.wl-os-ladder__groups { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); column-gap: clamp(14px, 3vw, 40px); margin-top: 14px; }
.wl-os-ladder__group { position: relative; padding-top: 22px; text-align: center; font-size: clamp(13px, .5vw + 11px, 18px); font-weight: 500; line-height: 1.3; color: var(--wl-ink); }
.wl-os-ladder__group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border: 1.5px solid var(--wl-ink); border-top: 0; border-radius: 0 0 9px 9px; }
.wl-os-ladder__groups + .wl-os-ladder__cap { margin-top: 22px !important; }
.wl-os-ladder__cap { margin-top: 30px !important; text-align: center; font-size: clamp(16px, .4vw + 13px, 19px); color: var(--wl-text); }
.wl-os-ladder__cap strong { color: var(--wl-ink); font-size: 1.2em; font-weight: 800; letter-spacing: -0.02em; }
.wl-os-doses__notes { margin: 22px auto 0 !important; max-width: 720px; text-align: center; font-size: 14px; line-height: 1.55; color: #55585f; }
.wl-os-doses__cta { display: flex; justify-content: center; margin-top: 22px; }
@media (max-width: 749px) { .wl-os-ladder { --k: .64; padding-top: 24px; } .wl-os-dose { gap: 8px; } .wl-os-dose__mg { font-size: 12.5px; } .wl-os-riser { width: 2px; } }
@media (min-width: 750px) and (max-width: 1023px) { .wl-os-ladder { --k: .88; } }
/* N strengths (Nov 11 2026, shared template): the section sets --n; marks shrink with the column count so 7 doses still fit
   (k × 5/n: 5 → as before, 7 → 0.71 / 0.63 / 0.46 desktop / tablet / phone) */
.wl-os-ladder { --k: calc(5 / var(--n, 5)); }
@media (max-width: 749px) { .wl-os-ladder { --k: calc(3.2 / var(--n, 5)); } .wl-os-doses[style*="--n:7"] .wl-os-dose__mg { font-size: 11px; } }
@media (min-width: 750px) and (max-width: 1023px) { .wl-os-ladder { --k: calc(4.4 / var(--n, 5)); } }
/* injections: the mark is a little vial (dark cap) instead of a tablet; drops: a dropper bottle (accent cap) */
.wl-os-doses--injection .wl-os-tablet, .wl-os-doses--drops .wl-os-tablet { width: calc(var(--s) * var(--k) * .62); border-radius: 18% / 10%;
  background: linear-gradient(90deg, #e9e6e2 0%, #fff 35%, #f4f1ed 70%, #ddd8d2 100%); }
.wl-os-doses--injection .wl-os-tablet::before, .wl-os-doses--drops .wl-os-tablet::before { left: 22%; right: 22%; top: -6%; height: 16%; min-height: 4px; transform: none; border-radius: 3px 3px 1px 1px; background: var(--wl-ink); }
.wl-os-doses--drops .wl-os-tablet::before { background: var(--wl-accent); height: 22%; top: -10%; }
.wl-os-doses--injection .wl-os-tablet::after, .wl-os-doses--drops .wl-os-tablet::after { border-radius: 22% / 14%; inset: -9px -7px -6px; }

/* ---------- how to take it ---------- */
.wl .wl-os-take { background: #fff; }
.wl-os-take__head { text-align: center; max-width: 720px; margin: 0 auto; }
.wl-os-take__head .wl-lead { margin-top: 10px !important; color: var(--wl-text); }
.wl-os-take__track { margin-top: 30px; grid-auto-columns: 84%; }
@media (min-width: 750px) { .wl-os-take__track { grid-auto-columns: calc(50% - 8px); } }
@media (min-width: 1024px) {
  .wl-os-take__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; margin-inline: auto; max-width: none; padding-inline: 0; }
  .wl-os-take .wl-dots { display: none; }
}
.wl-os-beat { background: var(--wl-card); border-radius: 22px; padding: 16px 18px 22px; display: grid; gap: 12px; align-content: start; transition-delay: calc(var(--i) * .14s) !important; }
.wl-os-ill { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: linear-gradient(150deg, #ffe9dc 0%, #fff4ec 55%, #f6eef9 100%); }
.wl-os-ill__svg { width: 78%; height: auto; overflow: visible; }
.wl-os-lip { fill: none; stroke: rgba(11, 11, 12, .18); stroke-width: 3; stroke-linecap: round; }
.wl-os-tongue { fill: #f4a899; }
.wl-os-tongue-line { fill: none; stroke: rgba(170, 60, 50, .35); stroke-width: 2; stroke-linecap: round; }
.wl-os-tab { fill: #fff; stroke: rgba(20, 18, 16, .08); stroke-width: 1.5; filter: drop-shadow(0 6px 8px rgba(20, 18, 16, .22)); transform: translateY(-46px); opacity: 0;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s, opacity .4s ease .35s; }
.wl-os-tab-score { stroke: rgba(20, 18, 16, .16); stroke-width: 2; stroke-linecap: round; transform: translateY(-46px); opacity: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s, opacity .4s ease .35s; }
.wl-os-beat.is-in .wl-os-tab, .wl-os-beat.is-in .wl-os-tab-score { transform: none; opacity: 1; }
.wl-os-core { position: relative; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0%, #f4f1ed 50%, #ddd8d2 100%);
  box-shadow: inset 0 -3px 6px rgba(20, 18, 16, .08), 0 12px 24px -12px rgba(20, 18, 16, .5); animation: wl-os-breathe 2.8s ease-in-out infinite; }
.wl-os-core::before { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 3px; border-radius: 2px; background: rgba(20, 18, 16, .12); transform: translateY(-50%); }
@keyframes wl-os-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
.wl-os-p { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #ffb48a; box-shadow: 0 2px 6px rgba(255, 118, 50, .25);
  opacity: 0; animation: wl-os-dissolve 2.8s ease-out infinite; animation-delay: var(--d); }
@keyframes wl-os-dissolve { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; } }
.wl-os-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; width: 62%; }
.wl-os-cal i { aspect-ratio: 1; border-radius: 50%; background: rgba(11, 11, 12, .1); transform: scale(.72); transition: background-color .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 32ms); }
.wl-os-beat.is-in .wl-os-cal i { background: var(--wl-accent); transform: none; }
/* injection / drops / brand beats (Nov 11 2026, shared template) — same stage, same motion rules (transform/opacity only) */
.wl-os-vial { fill: #fff; stroke: rgba(20, 18, 16, .14); stroke-width: 1.5; filter: drop-shadow(0 8px 10px rgba(20, 18, 16, .16)); }
.wl-os-vial-cap { fill: var(--wl-ink); }
.wl-os-vial-label { fill: #ffe9dc; }
.wl-os-syr-body { fill: #fff; stroke: rgba(20, 18, 16, .18); stroke-width: 1.5; }
.wl-os-syr-fill { fill: #ffb48a; transform: scaleX(.18); transform-origin: 116px 91px; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .4s; }
.wl-os-beat.is-in .wl-os-syr-fill { transform: none; }
.wl-os-syr-marks { fill: none; stroke: rgba(20, 18, 16, .25); stroke-width: 1.5; stroke-linecap: round; }
.wl-os-syr-plunger { fill: var(--wl-ink); }
.wl-os-syr-needle { fill: none; stroke: #8a8580; stroke-width: 2.5; stroke-linecap: round; }
.wl-os-body { fill: #f4d7c8; }
.wl-os-site { fill: var(--wl-accent); opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.wl-os-site--2 { transition-delay: .15s; } .wl-os-site--3 { transition-delay: .3s; } .wl-os-site--4 { transition-delay: .45s; }
.wl-os-beat.is-in .wl-os-site { opacity: 1; transform: none; }
.wl-os-week { display: grid; gap: 7px; width: 66%; }
.wl-os-week__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.wl-os-week i { aspect-ratio: 1; border-radius: 50%; background: rgba(11, 11, 12, .1); transform: scale(.72); transition: background-color .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 26ms); }
.wl-os-beat.is-in .wl-os-week i { transform: none; }
.wl-os-beat.is-in .wl-os-week i.is-dose { background: var(--wl-accent); }
.wl-os-dropper { fill: #fff; stroke: rgba(20, 18, 16, .18); stroke-width: 1.5; }
.wl-os-bulb { fill: var(--wl-accent); }
.wl-os-drop { fill: #d7ecf8; stroke: rgba(60, 120, 160, .35); stroke-width: 1.5; }
.wl-os-ill--hold .wl-os-drop { transform: translateY(-46px); opacity: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s, opacity .4s ease .35s; }
.wl-os-beat.is-in .wl-os-ill--hold .wl-os-drop { transform: none; opacity: 1; }
.wl-os-drop--fall { animation: wl-os-fall 2.4s ease-in infinite; transform-origin: 120px 92px; }
@keyframes wl-os-fall { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { opacity: 1; } 65% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(16px) scale(1); opacity: 0; } }
.wl-os-core--still { animation: none; }
.wl-os-stairs { display: flex; align-items: flex-end; gap: 10px; width: 58%; height: 48%; }
.wl-os-stairs i { flex: 1; height: calc(28% + var(--i) * 24%); border-radius: 8px 8px 0 0; background: var(--wl-accent); opacity: calc(.4 + var(--i) * .2); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.1s + var(--i) * .15s); }
.wl-os-beat.is-in .wl-os-stairs i { transform: none; }
.wl-os-cal__tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; color: var(--wl-ink); }
.wl-os-beat__num { width: 34px; height: 34px; border-radius: 50%; background: var(--wl-ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; margin-top: 4px; }
.wl .wl-os-beat h3 { font-size: clamp(19px, .5vw + 15px, 23px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.wl-os-beat p { font-size: 15px; line-height: 1.5; color: var(--wl-text); }
.wl-os-take__foot { margin-top: 22px !important; text-align: center; font-size: 15px; color: var(--wl-text); }
.wl-os-take__foot a { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; min-height: 44px; color: var(--wl-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.wl-os-take__foot .wl-ico { width: 18px; height: 18px; }

/* ---------- details: DOSSIER (Nov 12 2026 — replaced the tabbed spec sheet; content unchanged) ----------
   ≥1024: sticky dossier card (product image + chip · name · At a glance · hand-off) | white sheet with three chapters.
   <1024: compact dossier row → jump chips → chapter cards. Reveal only; no JS. */
.wl .wl-os-details { background: var(--wl-card); }
.wl-os-details__head { text-align: center; margin-bottom: 26px; }
.wl-os-details__head .wl-lead { margin-top: 10px !important; color: var(--wl-text); }
.wl-os-dossier__grid { display: grid; gap: 14px; }
/* dossier card */
.wl-os-dossier { display: grid; gap: 12px; }
.wl-os-dossier__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: linear-gradient(150deg, #ffe9dc 0%, #fff4ec 55%, #f6eef9 100%); }
.wl-os-dossier__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wl-os-dossier .wl-fcard__type { position: static; margin-top: 10px; }   /* phones: under the name; desktop pins it over the image (below) */
.wl .wl-os-dossier__name { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--wl-ink); }
.wl-os-dossier__form { margin-top: 4px !important; font-size: 14px; color: var(--wl-muted); font-weight: 500; }
.wl-os-dossier__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wl-muted); }
.wl-os-glance { background: #fff; border: 1px solid var(--wl-line); border-radius: 20px; padding: 18px 20px; }
.wl-os-glance ul { margin-top: 12px !important; display: grid; gap: 11px; list-style: none; padding: 0 !important; }
.wl-os-glance li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--wl-ink); font-weight: 500; }
.wl-os-glance li .wl-ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--wl-accent); }
.wl-os-switch { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--wl-line); color: var(--wl-ink); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; transition: border-color .2s, transform .2s; }
.wl-os-switch img { width: 48px; height: 60px; object-fit: contain; flex: none; }
.wl-os-switch small { display: block; font-size: 13px; font-weight: 500; color: var(--wl-muted); margin-top: 2px; }
.wl-os-switch .wl-ico { margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--wl-accent); }
@media (hover: hover) { .wl-os-switch:hover { border-color: var(--wl-ink); transform: translateY(-1px); } }
/* jump chips (phones/tablets) */
/* phones/tablets: ONE-ROW segmented tabs; the three labels share the row (equal flex, 13.5px, tight padding) */
.wl-os-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--wl-line); }
.wl-os-tabs button { appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--wl-text);
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.wl-os-tabs button[aria-selected="true"] { background: var(--wl-ink); color: #fff; }
.wl-os-tabs button:focus-visible { outline: 3px solid #8a8580; outline-offset: 2px; }
@media (max-width: 359px) { .wl-os-tabs button { font-size: 12.5px; padding: 0 4px; } }
.wl-os-sheet.is-tabbed .wl-os-chapter:not(.is-on) { display: none; }   /* JS-enhanced phones: one chapter at a time */
/* the sheet + chapters */
.wl-os-sheet { display: grid; gap: 12px; }
.wl-os-chapter { position: relative; background: #fff; border-radius: 24px; padding: 22px 20px 24px; scroll-margin-top: 92px; box-shadow: 0 1px 2px rgba(20, 18, 16, .04), 0 14px 34px -24px rgba(20, 18, 16, .22); }
/* phones: the numeral joins the eyebrow line ("01 · DESCRIPTION") so the title and the body share one left edge; desktop puts the big ghost numeral in its own column */
.wl-os-sheet { counter-reset: chapter; }
.wl-os-chapter { counter-increment: chapter; }
.wl-os-chapter__head { display: block; }
.wl-os-chapter__num { display: none; font-size: 56px; font-weight: 800; letter-spacing: -0.06em; line-height: .9; color: rgba(11, 11, 12, .12); font-variant-numeric: tabular-nums; }
.wl-os-chapter__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wl-accent); }
.wl-os-chapter__eyebrow::before { content: attr(data-n) "  ·  "; color: rgba(11, 11, 12, .38); letter-spacing: .06em; white-space: pre; }   /* server number: hidden tab panels would not advance a CSS counter */
.wl .wl-os-chapter__title { margin-top: 4px; font-size: clamp(22px, 1.2vw + 14px, 28px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--wl-ink); }
.wl-os-chapter__body { margin-top: 16px; display: grid; gap: 16px; font-size: 16.5px; line-height: 1.62; color: var(--wl-text); }
.wl-os-prose { display: grid; gap: 14px; max-width: 62ch; }
.wl-os-prose__lead { max-width: 62ch; font-size: 1.06em; color: var(--wl-ink); }
/* description → highlight tiles */
.wl-os-hl { list-style: none; padding: 0 !important; margin: 4px 0 0 !important; display: grid; gap: 10px; }
.wl-os-hl li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--wl-card); font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--wl-ink); letter-spacing: -0.01em; }
.wl-os-hl__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff; color: var(--wl-accent); box-shadow: inset 0 0 0 1px rgba(255, 118, 50, .25); }
.wl-os-hl__ico .wl-ico { width: 22px; height: 22px; }
/* active ingredients → spec-sheet rows */
.wl-os-specs { list-style: none; padding: 0 !important; margin: 2px 0 0 !important; border: 1px solid var(--wl-line); border-radius: 18px; overflow: hidden; background: #fff; }
.wl-os-specs__row { display: flex; gap: 14px; align-items: center; padding: 14px 16px; font-size: 15.5px; line-height: 1.45; color: var(--wl-ink); }
.wl-os-specs__row + .wl-os-specs__row { border-top: 1px solid var(--wl-line); }
.wl-os-specs__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--wl-card); color: var(--wl-accent); }
.wl-os-specs__ico .wl-ico { width: 20px; height: 20px; }
/* how it works → vertical timeline */
.wl-os-tl { list-style: none; padding: 0 0 0 28px !important; margin: 2px 0 0 !important; position: relative; display: grid; gap: 22px; }
.wl-os-tl::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--wl-accent), rgba(255, 118, 50, .15)); }
.wl-os-tl__step { position: relative; }
.wl-os-tl__dot { position: absolute; left: -28px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--wl-accent); box-shadow: 0 0 0 4px #fff; }
.wl-os-tl__dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--wl-accent); }
.wl-os-tl__kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wl-accent); }
.wl-os-tl__kicker span { padding: 3px 8px; border-radius: 999px; background: var(--wl-card); color: var(--wl-ink); letter-spacing: .04em; }
.wl-os-tl__text { margin-top: 6px !important; max-width: 62ch; font-size: 16.5px; line-height: 1.62; color: var(--wl-text); }
/* phones: the dossier is a compact row + its own cards; keep the image small */
@media (max-width: 1023px) {
  .wl-os-dossier { grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 14px; background: #fff; border-radius: 22px; border: 1px solid var(--wl-line); }
  .wl-os-dossier__media { width: 96px; aspect-ratio: 4 / 5; border-radius: 14px; }
  .wl-os-glance, .wl-os-switch { grid-column: 1 / -1; }
  .wl-os-glance { order: 3; }
  .wl-os-switch { order: 4; }
}
@media (min-width: 750px) {
  .wl-os-hl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-os-hl li { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .wl-os-chapter { padding: 28px 28px 30px; }
}
@media (min-width: 1024px) {
  .wl-os-dossier__grid { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
  .wl-os-dossier { position: sticky; top: 96px; gap: 0; padding: 14px 14px 16px; background: #fff; border-radius: 28px; box-shadow: 0 1px 2px rgba(20, 18, 16, .04), 0 18px 40px -26px rgba(20, 18, 16, .3); }
  .wl-os-dossier__media { border-radius: 20px; }
  .wl-os-dossier__id { padding: 16px 8px 6px; }
  .wl-os-glance { margin-top: 10px; border: 0; border-top: 1px solid var(--wl-line); border-radius: 0; padding: 18px 8px 6px; }
  .wl-os-switch { margin: 14px -2px 0; }
  .wl-os-tabs { display: none; }
  .wl-os-sheet.is-tabbed .wl-os-chapter:not(.is-on) { display: block; }   /* desktop: every chapter stays open */
  .wl-os-dossier .wl-fcard__type { position: absolute; left: 26px; top: 26px; margin: 0; }   /* over the image (the sticky card is the containing block) */
  .wl-os-sheet { gap: 0; background: #fff; border-radius: 28px; padding: 8px 40px; box-shadow: 0 1px 2px rgba(20, 18, 16, .04), 0 18px 40px -26px rgba(20, 18, 16, .3); }
  .wl-os-chapter { padding: 36px 0 40px; border-radius: 0; box-shadow: none; scroll-margin-top: 100px; }
  .wl-os-chapter + .wl-os-chapter { border-top: 1px solid var(--wl-line); }
  .wl-os-chapter__head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0; align-items: end; }
  .wl-os-chapter__num { display: block; }
  .wl-os-chapter__eyebrow::before { content: none; }
  .wl-os-chapter__body { margin-left: 64px; margin-top: 20px; gap: 20px; font-size: 18px; line-height: 1.65; }
  .wl-os-prose { gap: 16px; }
  .wl-os-specs { columns: 2; column-gap: 0; display: block; }
  .wl-os-specs__row { break-inside: avoid; font-size: 16px; padding: 16px 18px; border-top: 1px solid var(--wl-line); }
  .wl-os-specs__row:first-child { border-top: 0; }
  .wl-os-hl li { font-size: 16px; }
  .wl-os-tl { padding-left: 36px !important; gap: 26px; }
  .wl-os-tl::before { left: 11px; }
  .wl-os-tl__dot { left: -36px; width: 24px; height: 24px; }
  .wl-os-tl__dot::after { inset: 6px; }
  .wl-os-tl__text { font-size: 17.5px; }
}
/* ---------- what to expect (medication steps) ---------- */
.wl .wl-os-expect { background: #fff; }
.wl-os-expect__head { text-align: center; max-width: 760px; margin: 0 auto 4px; }
.wl-os-expect__head .wl-lead { margin-top: 10px !important; color: var(--wl-text); }
.wl-os-expect .wl-step__num { background: var(--wl-ink); }
.wl-os-expect .wl-step__ico { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--wl-accent); }
.wl-os-expect .wl-step__ico .wl-ico { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  /* the WL rule caps .wl-works__track at 1260px with margin auto; "margin-inline: 0" here left-aligned that cap → fill the wrap, centred */
  .wl-os-expect .wl-works__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; margin-inline: auto; max-width: none; padding-inline: 0; }
  .wl-os-expect .wl-dots { display: none; }
}

/* ---------- real results ---------- */
.wl .wl-os-results { background: #fff; }
/* centred head like every other page-own section (rule · eyebrow · h2 · lead · score) */
.wl-os-results__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 760px; margin: 0 auto; }
.wl-os-results__head .wl-eyebrow { margin-bottom: 0 !important; }
.wl-os-results__head .wl-reviews__score { margin-top: 4px; justify-content: center; }
.wl-os-results__track { margin-top: 24px; grid-auto-columns: 84%; }
@media (min-width: 750px) { .wl-os-results__track { grid-auto-columns: calc(50% - 8px); } }
@media (min-width: 1024px) { .wl-os-results__track { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; overflow: visible; margin-inline: auto; max-width: none; padding-inline: 0; } .wl-os-results .wl-dots { display: none; } }
/* five stories (brand pages: Elena's story + the shared four): 5 across on wide screens, 3 + 2 on small desktops — never 4 + 1 */
@media (min-width: 1200px) { .wl-os-results__track:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .wl-os-results__track:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wl-os-quote { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; background: var(--wl-card); border-radius: 22px; padding: 22px 20px 18px; }
.wl-os-quote__mark { font-size: 54px; line-height: .6; font-weight: 800; color: var(--wl-accent); font-family: Georgia, "Times New Roman", serif; }
.wl .wl-os-quote p { font-size: clamp(17px, .4vw + 14px, 20px); line-height: 1.4; letter-spacing: -0.015em; font-weight: 600; color: var(--wl-ink); }
.wl-os-quote__who { font-size: 14px; color: var(--wl-muted); }
.wl-os-quote__who strong { display: block; font-size: 15px; color: var(--wl-ink); }
.wl-os-quote__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-os-quote__tags span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--wl-text); }
.wl-os-quote__product { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; color: var(--wl-ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.wl-os-quote__product img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; }
.wl-os-quote__product .wl-ico { margin-left: auto; width: 18px; height: 18px; flex: none; }
.wl-os-quote__tp { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #00b67a; flex: none; }   /* Trustpilot green (brand) */
.wl-os-quote__product .wl-os-quote__tp .wl-ico { margin: 0; width: 22px; height: 22px; color: #fff; }
.wl-os-results__foot { margin-top: 16px !important; font-size: 13px; color: var(--wl-muted); text-align: center; }

/* ---------- other formats (reuses .wl-fcard) ---------- */
.wl .wl-os-formats { background: #fff; }
.wl-os-formats .wl-wrap { container-type: inline-size; }
.wl-os-formats__head { text-align: center; max-width: 720px; margin: 0 auto; }
.wl-os-formats .wl-format__foot { text-align: center; margin-top: 18px !important; font-size: 14px; color: var(--wl-muted); }
.wl-os-formats__track { margin-top: 26px; grid-auto-columns: 86%; grid-template-rows: repeat(7, auto); row-gap: 0; }
@media (min-width: 750px) { .wl-os-formats__track { grid-auto-columns: calc(50% - 8px); } }
@media (min-width: 1024px) {
  .wl-os-formats__track { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; margin-inline: auto; max-width: none; padding-inline: 0; gap: 0 14px; }
  .wl-os-formats .wl-dots { display: none; }
  .wl .wl-os-formats .wl-fcard__title { min-height: calc(2 * 1.12em); }
  .wl .wl-os-formats .wl-fcard__desc { min-height: 59px; }
}
/* five cards (brand pages list all five compounded products): 5 across on wide screens, 3 + 2 below — never 4 + 1 */
@media (min-width: 1200px) { .wl-os-formats__track:has(> :nth-child(5)):not(:has(> :nth-child(6))) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .wl-os-formats__track:has(> :nth-child(5)):not(:has(> :nth-child(6))) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; } }

/* ---------- /collections/weight-loss (Nov 11 2026): intro copy as an editorial head + two prose cards, then every WL product ---------- */
.wl .wl-os-coll { background: #fff; padding-top: 28px; }
.wl-os-coll__head { text-align: center; max-width: 820px; margin: 0 auto; }
.wl .wl-os-coll__h1 { font-size: clamp(34px, 2.6vw + 18px, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--wl-ink); }
.wl .wl-os-coll__h2 { margin-top: 14px !important; font-size: clamp(20px, .9vw + 14px, 26px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--wl-ink); }
.wl-os-coll__head .wl-lead { margin-top: 12px !important; color: var(--wl-text); }
.wl-os-coll__cards { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 750px) { .wl-os-coll__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.wl-os-coll__card { background: var(--wl-card); border-radius: 22px; padding: 22px 22px 24px; display: grid; gap: 12px; align-content: start; }
.wl .wl-os-coll__card h3 { font-size: clamp(20px, .6vw + 15px, 24px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--wl-ink); }
.wl-os-coll__card p { font-size: 15.5px; line-height: 1.55; color: var(--wl-text); }
.wl-os-coll__card ul { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 10px; }
.wl-os-coll__card li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 15px; line-height: 1.45; color: var(--wl-text); }
.wl-os-coll__card li .wl-ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--wl-accent); }
.wl-os-coll__card li b { color: var(--wl-ink); }
.wl-os-coll__close { margin: 22px auto 0 !important; max-width: 760px; text-align: center; font-size: 16px; line-height: 1.55; color: var(--wl-text); }
.wl-os-coll__close b { color: var(--wl-ink); }
.wl .wl-os-coll-grid { background: #fff; padding-top: 0; }
.wl-os-coll-grid__head { text-align: center; max-width: 720px; margin: 0 auto 4px; }
@media (min-width: 1024px) {
  .wl-os-coll-grid .wl-os-formats__track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
}
@media (min-width: 1200px) {
  .wl-os-coll-grid .wl-os-formats__track:has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 14px; }
}

/* ---------- patients love (avatar strip above reviews) ---------- */
.wl .wl-os-faces { padding-bottom: 0; background: #fff; }
.wl-os-faces__card { display: grid; gap: 14px; align-items: center; background: var(--wl-card); border-radius: 22px; padding: 20px; }
.wl-os-faces__row { display: flex; }
.wl-os-faces__row img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--wl-card); margin-left: -12px; }
.wl-os-faces__row img:first-child { margin-left: 0; }
.wl .wl-os-faces h2 { font-size: clamp(22px, 1.2vw + 14px, 30px); font-weight: 800; letter-spacing: -0.035em; }
.wl-os-faces__score { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px !important; font-size: 14px; color: var(--wl-muted); }
.wl-os-faces__score strong { color: var(--wl-ink); }
.wl-os-faces__score .wl-ico { width: 16px; height: 16px; color: #00b67a; }
@media (min-width: 750px) { .wl-os-faces__card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; padding: 22px 26px; } }

/* ---------- FAQ head with "Ask a question" ---------- */
.wl-os-faq__ask { display: flex; justify-content: center; margin-top: 16px; }

/* ---------- need help ---------- */
.wl .wl-os-help { background: #fff; }
.wl-os-help__head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.wl-os-help__quote { margin-top: 10px !important; font-size: 16px; line-height: 1.5; color: var(--wl-text); font-style: italic; }
.wl-os-help__grid { display: grid; gap: 12px; }
@media (min-width: 750px) { .wl-os-help__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.wl-os-help__tile { display: grid; gap: 8px; align-content: start; background: var(--wl-card); border-radius: 18px; padding: 20px; }
.wl-os-help__ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--wl-ink); }
.wl .wl-os-help__tile h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.wl-os-help__tile p { font-size: 14px; line-height: 1.5; color: var(--wl-text); }
.wl-os-help__tile a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--wl-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.wl-os-help__tile a .wl-ico { width: 16px; height: 16px; }

/* ---------- sticky: phones = WL bar; ≥1024 = compact dock, bottom-right ---------- */
@media (min-width: 1024px) {
  .wl-os .wl-sticky { display: flex; left: auto; right: 24px; bottom: 24px; max-width: 440px; padding: 8px 8px 8px 20px; }
  .wl-os .wl-sticky small { font-size: 12px; }
}

/* ---------- BMI module on the brand pages (the old "Personalized Health Plan" intro/footnote, verbatim) ---------- */
.wl-os .wl-bmi__intro { margin: 6px 0 12px !important; font-size: 14px; line-height: 1.5; color: var(--wl-muted-dark); }

/* ---------- small extras for the lower sections ---------- */
.wl-os-help__call { margin-top: 12px !important; font-size: 16px; color: var(--wl-text); }
.wl-os-help__call a { color: var(--wl-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.wl-os-why__lead { margin-top: 12px !important; font-size: clamp(15px, .4vw + 12px, 18px); line-height: 1.5; color: var(--wl-muted-dark); max-width: 56ch; }
.wl-os-results .wl-eyebrow { display: block; }
.wl .wl-os-results .wl-h2 { line-height: 1.02; }
.wl-os-faq .wl-faq__wrap > div:first-child .wl-btn { font-size: 15px; min-height: 46px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wl-os-slide img, .wl-os-core, .wl-os-p { animation: none !important; }
  .wl-os-slide { transition: none; transform: none; }
  .wl-os-thumb__bar { display: none; }
  .wl-os-p { display: none; }
  .wl-os-riser { transform: none; transition: none; }
  .wl-os-tab, .wl-os-tab-score { transform: none; opacity: 1; transition: none; }
  .wl-os-cal i { background: var(--wl-accent); transform: none; transition: none; }
  .wl-os-syr-fill, .wl-os-site, .wl-os-week i, .wl-os-stairs i, .wl-os-ill--hold .wl-os-drop { transform: none; opacity: 1; transition: none; }
  .wl-os-week i.is-dose { background: var(--wl-accent); }
  .wl-os-drop--fall { animation: none; }
}