/* =========================================================================
   Bliv x Bikman landing page
   Ported from Figma: file kBIvwbGaICuA886DHPh1fg
   Desktop board 3132:1606 (1920w) - Mobile board 3813:2707 (430w)
   Values are the design's literal px. Breakpoint 1024px switches boards.
   ========================================================================= */

:root {
  /* Figma variables, kept under their design-system names */
  --void-teal: #0d2e28;
  --deep-teal: #1a6a60;
  --chartreuse: #d4e017;
  --warm-cream: #f5eee4;
  --ivory: #faf6ee;
  --pale: #dfe1d7;
  --burnt-sienna: #a82e08;
  --white: #fff;
  --trustpilot: #00b67a;
  --black: #2c2c2a;
  --gray: #f9f1ee;
  --stone: #5c554d; /* step body copy, 3132:1985 */
  /* raw hex in the file, not named Figma variables */
  --faded: #758482; /* competitor column text, 3174:8536 */
  --taupe: #6b6359; /* FAQ answer copy, 3132:2263 */
  --umber: #3b2a20; /* pricing badge 3, 3174:9018 */
  --fineprint: #8a8178; /* pricing disclaimer, 3132:2111 */
  --hairline: rgba(27, 58, 45, 0.06);
  --tint: rgba(27, 58, 45, 0.02);
  /* cycle accents, section 3495:1620. Burn, Build, Balance. */
  --cycle-1: #d4e017;
  --cycle-2: #ed6940;
  --cycle-3: #86beff;

  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-display-italic: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* 1920 board has 358px gutters; 1204 content + 2x24 padding = 1252,
     so content lands at exactly 358 on a 1920 viewport and still keeps a
     24px gutter on narrow screens. */
  --container: 1252px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void-teal);
  color: var(--warm-cream);
  font-family: var(--font-body);
  font-weight: 400;
  /* clip, not hidden: overflow-x:hidden makes this element a scroll
     container, and position:sticky inside a scroll container sticks to that
     container rather than the viewport, which silently kills the nav. clip
     does the same guarding without the scroll container. */
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Shared dot ------------------------------------------------------- */

.dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--chartreuse);
  border-radius: 4px;
}

.dot--sm {
  width: 8.98px;
  height: 8.98px;
  border-radius: 4.49px;
}

.dot--dark {
  width: 8.98px;
  height: 8.98px;
  border-radius: 4.49px;
  background: var(--void-teal);
}

/* ---- Eyebrow label (hero 3158:4011, and every section head) ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 1.69px;
  text-transform: uppercase;
  color: var(--chartreuse);
  white-space: nowrap;
}

/* ---- Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 20px 29px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.btn--primary {
  background: var(--chartreuse);
  color: var(--void-teal);
}

.btn--ghost {
  border: 1px solid var(--warm-cream);
  color: var(--white);
}

.btn--sm {
  min-height: 50px;
  height: 50px;
  padding: 20px 27px;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
}

/* ---- Ticker (3132:1607 / 3813:4710) ---------------------------------- */

.ticker {
  height: 48px;
  background: var(--deep-teal);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 63px;
  padding-left: 63px;
  flex: none;
  animation: ticker-scroll 60s linear infinite;
}

.ticker__item {
  flex: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.412;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* padding-left equals one gap, so -50% is exactly one 7-item cycle */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* ---- Nav (3132:1630 desktop / 3813:4732 mobile) ---------------------- */

.nav {
  background: var(--void-teal);
  border-bottom: 1px solid var(--ivory);
}

.nav--desktop {
  /* the page is 12.7 screens; a nav that scrolls away takes the only CTA
     with it for 9,375px */
  position: sticky;
  top: 0;
  z-index: 50;
  height: 99px;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 48px;
}

.nav__logo img {
  width: 82.416px;
  height: 43.5px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 42px; /* item spacing/42 */
}

.nav__link {
  font-weight: 700;
  font-size: 18px;
  line-height: 44px;
  color: var(--warm-cream);
  white-space: nowrap;
}

.nav__link--current {
  text-decoration: underline;
  text-underline-position: from-font;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__phone {
  font-size: 13.526px;
  line-height: 1.412;
  color: var(--ivory);
  white-space: nowrap;
}

.nav--mobile {
  display: none;
  height: 66px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.nav__call {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 40px tall, comfortably over the 24px target minimum and close to the
     44px iOS asks for */
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--deep-teal);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--ivory);
  white-space: nowrap;
}

.nav__call img {
  flex: none;
  width: 18px;
  height: 18px;
}

.nav--mobile .nav__logo img {
  width: 67.584px;
  height: 35.672px;
}

/* 3813:4753 is a clipped 24x24 frame whose artwork is inset 6.09% top and
   bottom, so the export is 24x21.0767. Keep the slot and the leaf separate
   or the glyph stretches. */
/* ---- Anchor landings -------------------------------------------------- */

/* The sticky nav is 99px of opaque teal at the top of the viewport, so an
   anchor that lands a section at scroll-top puts its first line of text 1px
   below the nav's edge: not covered, but jammed against it. Offset the
   landing by exactly the nav's height and let each section's own top padding
   supply the air, so the rhythm is the one the board drew. Mobile's nav does
   not stick, so it only wants a little. */
section[id] {
  scroll-margin-top: 99px; /* the desktop nav's height */
}

/* ---- Mobile conversion bar ------------------------------------------- */

/* Not in the board. Desktop keeps its CTA in the sticky nav; a phone has no
   room for that, so the CTA goes where the thumb is. */
.cta-bar {
  display: none;
}

/* ---- Hero (3151:3805 desktop / 3813:2758 mobile) --------------------- */
/*
 * The board is defined only at 1920 and 430. Between them the hero is
 * scaled proportionally rather than held at fixed px: the copy column and
 * the media column are grid tracks, and every dimension inside the video
 * card is expressed in cqw (percent of the card's own width) so the card
 * shrinks as one piece. The previous version positioned the card absolutely
 * at 50% +/- Npx with fixed internals, which overlapped the body copy by
 * 42px at 1280/1366/1440/1536 and jumped 240px at the 1600 breakpoint.
 */

.hero {
  position: relative;
  min-height: clamp(720px, 50.677vw, 973px); /* 973/1920 */
  overflow: hidden;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 973' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.16'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-23.532 -19.764 48.96 -52.521 1371.5 486.5)'><stop stop-color='rgba(212,224,23,1)' offset='0.10837'/><stop stop-color='rgba(162,180,27,1)' offset='0.33127'/><stop stop-color='rgba(113,135,32,1)' offset='0.55418'/><stop stop-color='rgba(88,113,34,1)' offset='0.66564'/><stop stop-color='rgba(63,91,36,1)' offset='0.77709'/><stop stop-color='rgba(38,68,38,1)' offset='0.88855'/><stop stop-color='rgba(13,46,40,1)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, var(--void-teal) 0%, var(--void-teal) 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}

/* 358px left gutter and 260px right gutter at 1920, collapsing to 24px */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 592px) minmax(0, 1fr);
  column-gap: clamp(24px, 6.5625vw, 126px);
  align-items: center;
  max-width: 1920px;
  margin: 0 auto;
  padding: 103px max(24px, calc(50% - 700px)) 72px max(24px, calc(50% - 602px));
}

/* Exactly two grid children, so the copy never shares a row with the card.
   Spanning the media across per-item rows instead stretches them and
   destroys the board's 26px copy gaps. */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.hero__media {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 583.708px;
}

/* rings are sized against the card, so they track it as it scales */
.hero__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  pointer-events: none;
}

.hero__ring--large {
  width: 183.3cqw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.hero__ring--arc {
  width: 137.1cqw;
  aspect-ratio: 800.486 / 595.382;
  transform: translate(calc(-50% + 11.8cqw), -50%);
}

.hero__title {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 4.1667vw, 80px); /* 80/1920 */
  line-height: 1.13;
  color: var(--warm-cream);
}

.hero__title-line {
  display: block;
  white-space: nowrap;
}

.hero__title-line:first-child {
  line-height: 1;
}

.hero__title em {
  line-height: 1.13;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--chartreuse);
}

.hero__body {
  width: 100%;
  margin: 26px 0 0;
  font-size: clamp(17px, 1.0417vw, 20px); /* 20/1920 */
  line-height: 2;
  color: var(--warm-cream);
}

.hero__body strong {
  font-weight: 700;
}

.hero__price {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.0417vw, 20px);
  color: var(--warm-cream);
}

.hero__price strong {
  font-weight: 700;
  color: var(--chartreuse);
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.badges {
  display: flex;
  /* the board is one row at 588px; Chromium renders Inter Tight ~7px wider
     across the three, so don't let that trigger a wrap */
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  width: 100%;
  max-width: 588px;
  margin-top: 38px;
}

/* Footnote for the "All 50 States*" badge; sits directly under the row so
   the qualifier is read with the claim. */
.badges__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--chartreuse);
  opacity: 0.85;
}

.badge {
  display: flex;
  flex: none; /* nowrap must not shrink these and clip the label */
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--chartreuse);
  border-radius: 6px;
  font-size: 20px;
  line-height: 2;
  color: var(--chartreuse);
  white-space: nowrap;
  overflow: hidden;
}

.badge img {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Video card. Internals are cqw = percent of the card's own width, taken
   from the 583.708px board values, so the whole card scales as one piece. */

.card {
  position: relative;
  margin: 0;
  width: 100%;
  padding: 1.9231cqw 1.9231cqw 18.0771cqw;
  background: var(--warm-cream);
  border-radius: 6.3444cqw;
  filter: drop-shadow(0 12.1155cqw 3.7404cqw rgba(0, 0, 0, 0.21));
}

.card__media {
  position: relative;
}

.card__image,
.card__video {
  width: 96.1538cqw;
  aspect-ratio: 1;
  height: auto;
  border-radius: 5.3844cqw;
  object-fit: cover;
  object-position: bottom;
}

/* The poster is already square, so it fits the square card either way. The
   video is not, and the card is 1:1, so cover crops it. That is the intent:
   letterboxing inside a designed card looks worse than losing the edges.

   --card-video-crop is the only knob for where that crop sits. 50% 50% is
   centred. Lower the first number to keep more of the left, raise it to keep
   more of the right; same for the second number vertically. Only one axis
   will do anything, whichever one overflows: a landscape file crops
   horizontally and a vertical one crops vertically. */
.card__video {
  /* The file is portrait, so cover crops it top and bottom and only the
     second number does anything here. 50% centred it and cut his crown, 30%
     still clipped it, 15% clears it with a little ceiling to spare. Lower for
     more headroom, raise toward 50% to recentre. */
  --card-video-crop: 50% 15%;
  display: block;
  background: var(--void-teal);
  object-position: var(--card-video-crop);
}

/* native controls only appear once playback starts, so they never sit over
   the board's still */
.card__video::-webkit-media-controls-panel {
  border-radius: 0 0 5.3844cqw 5.3844cqw;
}

.card__play {
  position: absolute;
  left: 5.5765cqw;
  top: 79.9955cqw;
  width: 13.8462cqw;
  height: 13.8462cqw;
}

.card__play svg {
  display: block;
  width: 100%;
  height: 100%;
  /* the shadow the export bakes in, as a filter that has something to fall on
     instead of an overlay blend with no backdrop */
  filter: drop-shadow(0 3px 8px rgba(13, 46, 40, 0.3));
}

.card__play circle {
  fill: var(--warm-cream);
}

.card__play path {
  fill: var(--void-teal);
}

.card__caption {
  position: absolute;
  left: calc(50% + 0.0959cqw);
  top: 101.6347cqw;
  transform: translateX(-50%);
  width: 90.5768cqw;
}

.card__kicker {
  display: flex;
  align-items: center;
  gap: 2.3077cqw;
  margin: 0;
  font-weight: 600;
  font-size: 2.3985cqw;
  line-height: 3.2693cqw;
  letter-spacing: 0.325cqw;
  text-transform: uppercase;
  color: var(--deep-teal);
  white-space: nowrap;
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90.5768cqw;
}

.card__meta-text {
  display: flex;
  align-items: center;
  gap: 2.3077cqw;
}

.card__title {
  font-weight: 700;
  font-size: 3.4264cqw;
  line-height: 2;
  color: var(--void-teal);
  white-space: nowrap;
}

.card__duration {
  font-size: 3.4264cqw;
  line-height: 2;
  color: var(--void-teal);
  white-space: nowrap;
}

.card__caption .dot--sm,
.card__caption .dot--dark {
  width: 1.5385cqw;
  height: 1.5385cqw;
  border-radius: 0.7692cqw;
}

.card__stars {
  display: flex;
  align-items: center;
  gap: 0.3846cqw;
}

.card__stars img {
  width: 3.8461cqw;
  height: 3.8461cqw;
}

/* ======================= MOBILE BOARD (3813:2707) ======================= */

@media (max-width: 1023px) {
  .ticker {
    height: 44px;
  }

  .ticker__track {
    gap: 29px;
    padding-left: 29px;
  }

  @keyframes ticker-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  .nav--desktop {
    display: none;
  }

  .nav--mobile {
    display: flex;
  }

  section[id] {
    scroll-margin-top: 12px;
  }

  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: block;
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--void-teal);
    border-top: 1px solid var(--deep-teal);
    transition: transform 0.18s ease-out;
  }

  .cta-bar .btn {
    width: 100%;
  }

  /* down and out of the way while the hero or the closing CTA is on screen */
  .cta-bar--tucked {
    transform: translateY(120%);
  }

  /* the bar is fixed, so reserve its height or it covers the last of the
     footer at the bottom of the scroll */
  body {
    padding-bottom: 78px;
  }

  .hero {
    min-height: 0;
    padding: 50px 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 430 883.7' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.16'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(13.2 -23.55 60.274 -36.822 136.5 532)'><stop stop-color='rgba(212,224,23,1)' offset='0.10837'/><stop stop-color='rgba(162,180,27,1)' offset='0.33127'/><stop stop-color='rgba(113,135,32,1)' offset='0.55418'/><stop stop-color='rgba(88,113,34,1)' offset='0.66564'/><stop stop-color='rgba(63,91,36,1)' offset='0.77709'/><stop stop-color='rgba(38,68,38,1)' offset='0.88855'/><stop stop-color='rgba(13,46,40,1)' offset='1'/></radialGradient></defs></svg>"),
      linear-gradient(90deg, var(--void-teal) 0%, var(--void-teal) 100%);
  }

  .hero__ring--large {
    width: 560px;
    height: 560px;
    aspect-ratio: auto;
    left: 50%;
    top: 218px;
    transform: translateX(-50%);
  }

  .hero__ring--arc {
    display: none;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    max-width: 430px;
    padding: 0 15px;
  }

  /* dissolve both wrappers so the nine leaf items order per 3813:2808 */
  .hero__copy,
  .hero__media {
    display: contents;
  }

  .hero .eyebrow { order: 1; }
  .hero__title { order: 2; }
  .hero__body { order: 3; }
  .hero__price { order: 3; width: 100%; margin-top: 8px; font-size: 16px; }
  .hero .card { order: 4; }
  .hero__ctas { order: 5; }
  .hero .badges { order: 6; }
  .hero .badges__note { order: 7; width: 100%; margin-top: 8px; font-size: 11px; }

  .hero__title {
    margin-top: 14px;
    font-size: 50px;
  }

  .hero__title-line:first-child {
    line-height: 1.12;
  }

  .hero__body {
    width: 100%;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.8;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 14px;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .hero__ctas .btn--ghost {
    background: var(--void-teal);
  }

  .badges {
    width: 100%;
    gap: 8.163px;
    margin-top: 18px;
    /* the three badges run ~420px wide; below that they wrap rather than
       clip the last one */
    flex-wrap: wrap;
  }

  .badge {
    height: 23.129px;
    padding: 0 8.844px;
    border-width: 0.68px;
    border-radius: 4.082px;
    font-size: 13.605px;
  }

  .badge img {
    width: 9.524px;
    height: 9.524px;
  }

  /* Card becomes a horizontal tile in flow (3813:4821) */
  .card {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: 191.568px;
    margin-top: 14px;
    padding: 0 6.906px;
    border-radius: 22.789px;
    filter: drop-shadow(0 43.507px 13.432px rgba(0, 0, 0, 0.21));
  }

  /* the mobile card is its own layout (3813:4821), a 191.568 tile with the
     still absolutely placed and not square. Both elements take it: the
     desktop rule sizes in cqw, which inside this card overflows the whole
     hero. Setting width and height also drops the base aspect-ratio, which
     only applies while one of them is auto. */
  .card__image,
  .card__video {
    position: absolute;
    left: 12.8px;
    top: 11.81px;
    width: 159.954px;
    height: 167.336px;
    border-radius: 14.765px;
  }

  .card__play {
    left: 21.51px;
    top: 121.35px;
    width: 49.66px;
    height: 49.784px;
  }

  /* The board centres the caption on 50% + 85.54px, which only clears the
     still and the card edge at the board's 430 width. Anchored to both
     sides instead: it starts 13px past the still (the still's own inset
     from the card) and stops 13px short of the card edge, so on a 393
     iPhone 16, a 375 iPhone SE or a 320 phone the column narrows and the
     text wraps rather than running under the still and off the card. */
  .card__caption {
    left: 185.75px;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 15.38px;
  }

  .card__kicker {
    flex-direction: column;
    align-items: flex-start;
    gap: 8.287px;
    width: auto;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 1.1671px;
    white-space: normal;
  }

  .card__kicker .dot--sm {
    width: 5.518px;
    height: 5.532px;
    border-radius: 2.762px;
    margin-top: 3.076px;
  }

  /* stars above the title, no separator dot */
  .card__meta {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 11.689px;
    width: auto;
  }

  .card__meta-text {
    display: contents;
  }

  .card__stars {
    order: 1;
    gap: 10.098px;
  }

  .card__stars img {
    width: 12.777px;
    height: 12.809px;
  }

  .card__title {
    order: 2;
    font-size: 18px;
    line-height: 1.2;
    white-space: normal;
  }

  .card__meta .dot--dark {
    display: none;
  }

  .card__duration {
    order: 3;
    font-size: 12.304px;
  }

}

/* Below 375 (the narrowest current iPhone) the caption column left beside a
   160px still is under 100px, the title wraps to three lines and the caption
   outgrows the 191.568 tile. Narrow the still instead and tighten the type. */
@media (max-width: 374px) {
  .card__image,
  .card__video {
    width: 128px;
  }

  .card__play {
    width: 42px;
    height: 42px;
  }

  .card__caption {
    left: 153.8px;
    gap: 10px;
  }

  .card__kicker {
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.9px;
  }

  .card__meta {
    gap: 8px;
  }

  .card__title {
    font-size: 16px;
  }
}


/* =========================================================================
   Section "2" - THE PROBLEM
   desktop 3132:1857 (1920x707.6) / mobile 3813:2960 (430x857.8)
   ========================================================================= */

/* One wash across the whole section instead of the board's per-card blobs
   (.blob--d*), which left a halo around each stat and white between them.
   Same three colours as the blobs, placed in percentages so the wash scales
   from the 708px desktop band to the ~1400px stacked mobile one. */
.problem {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 40% at 12% 18%, rgba(221, 212, 253, 0.4), rgba(221, 212, 253, 0) 70%),
    radial-gradient(50% 38% at 88% 30%, rgba(195, 246, 255, 0.4), rgba(195, 246, 255, 0) 70%),
    radial-gradient(60% 42% at 50% 60%, rgba(241, 255, 184, 0.35), rgba(241, 255, 184, 0) 70%),
    radial-gradient(55% 40% at 10% 88%, rgba(195, 246, 255, 0.35), rgba(195, 246, 255, 0) 70%),
    radial-gradient(50% 40% at 90% 92%, rgba(221, 212, 253, 0.35), rgba(221, 212, 253, 0) 70%),
    var(--white);
  padding: 100px 0;
}

/* the section carries the wash now; the per-card blobs would only stack
   darker patches on top of it */
.problem .stat__blobs {
  display: none;
}

.problem__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  width: 100%;
  max-width: 1248px; /* 1200 content + 2x24 padding */
  margin: 0 auto;
  padding: 0 24px;
}

.problem__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.problem .eyebrow {
  color: var(--deep-teal);
  text-align: center;
}

.section-title {
  margin: 0;
  padding-top: 0.6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 52px;
  letter-spacing: -1px;
  text-align: center;
  color: var(--void-teal);
}

.section-title__line {
  display: block;
  white-space: nowrap;
}

.section-title em {
  font-family: var(--font-display-italic);
  font-style: italic;
  color: var(--deep-teal);
  letter-spacing: -1px;
}

.problem__lede {
  margin: 0;
  font-size: 20px;
  line-height: 2;
  text-align: center;
  color: var(--black);
}

.problem__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 24px;
  width: 100%;
}

.stat {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 281px;
  padding: 34px 28px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* decorative gradient washes (Figma layer name "ijeoma_headshot" is an
   import leftover; these are gradients, not photographs) */
.blob {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.blob--d1a {
  left: 117.53px;
  top: 105.44px;
  width: 292.787px;
  height: 250.41px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 292.79 250.41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.6951 16.72 -19.549 1.9819 137.15 124.82)'><stop stop-color='rgba(195,246,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d1b {
  left: -62px;
  top: 33.78px;
  width: 359.049px;
  height: 307.426px;
  border-radius: 125.59px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 359.05 307.43' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-4.4689 17.336 -20.247 -5.2193 224.21 134.07)'><stop stop-color='rgba(221,212,253,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d1c {
  left: 17.36px;
  top: 5.28px;
  width: 292.787px;
  height: 250.41px;
  border-radius: 77.049px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 292.79 250.41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.541 16.026 -18.738 1.8018 130.98 97.852)'><stop stop-color='rgba(241,255,184,1)' offset='0.024194'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d2a {
  left: -11.137px;
  top: -22.064px;
  width: 292.787px;
  height: 250.41px;
  opacity: 0.55;
  transform: rotate(-179deg);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 292.79 250.41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.6951 16.72 -19.549 1.9819 137.15 124.82)'><stop stop-color='rgba(195,246,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d2b {
  left: 71.345px;
  top: -14.88px;
  width: 359.049px;
  height: 307.426px;
  border-radius: 125.59px;
  opacity: 0.55;
  transform: rotate(-179deg);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 359.05 307.43' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-4.4689 17.336 -20.247 -5.2193 224.21 134.07)'><stop stop-color='rgba(221,212,253,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d2c {
  left: 57.066px;
  top: -22.673px;
  width: 354.176px;
  height: 302.913px;
  border-radius: 77.049px;
  opacity: 0.55;
  transform: rotate(-179deg);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 354.18 302.91' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.8641 19.386 -22.667 2.1795 158.45 118.37)'><stop stop-color='rgba(241,255,184,1)' offset='0.024194'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d3a {
  left: -109px;
  top: 30.4px;
  width: 359.049px;
  height: 307.426px;
  border-radius: 125.59px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 359.05 307.43' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-4.4689 17.336 -20.247 -5.2193 224.21 134.07)'><stop stop-color='rgba(221,212,253,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d3b {
  left: 81px;
  top: 0.4px;
  width: 346px;
  height: 296px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 346 296' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(2.0032 19.764 -23.102 2.3428 162.07 147.54)'><stop stop-color='rgba(195,246,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

.blob--d3c {
  left: 17.36px;
  top: 5.28px;
  width: 292.787px;
  height: 250.41px;
  border-radius: 77.049px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 292.79 250.41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.541 16.026 -18.738 1.8018 130.98 97.852)'><stop stop-color='rgba(241,255,184,1)' offset='0.024194'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
}

/* warning glyph: 3173:4827. Artwork bleeds past its 27.58x24.725 leaf box. */
.warn {
  position: relative;
  width: 27.58px;
  height: 24.725px;
  flex: none;
}

.warn img {
  position: absolute;
  left: -12.74px;
  top: -5.62px;
  width: 53.07px;
  height: 50.19px;
  max-width: none;
}

.warn span {
  position: absolute;
  left: 11.02px;
  top: 3.96px;
  font-weight: 600;
  font-size: 15.824px;
  line-height: 19.78px;
  color: var(--gray);
}

.stat__label {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  color: var(--black);
  white-space: nowrap;
}

.stat__figure {
  margin: 0;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: 50px;
  line-height: 0.93;
  color: var(--burnt-sienna);
  white-space: nowrap;
}

.stat__note {
  margin: 0;
  font-size: 16px;
  line-height: 24.8px;
  text-align: center;
  color: var(--black);
}

@media (max-width: 1023px) {
  .problem {
    padding: 50px 0;
  }

  .problem__inner {
    max-width: 430px;
    padding: 0 15px;
  }

  .section-title {
    font-size: 30px;
    line-height: 1.12;
  }

  /* the mobile board breaks the italic onto its own third line */
  .section-title em {
    display: block;
    line-height: 1.13;
  }

  .problem__lede {
    font-size: 16px;
    line-height: 1.8;
  }

  /* cards stack, 61px apart (3813:2969); card 3 aligns right */
  .problem__cards {
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: normal;
    align-items: center;
    gap: 61px;
  }

  /* The board staggers these: 328px centred, then two 284px cards with the
     third right-aligned (3813:4912 items-end). On a real phone that reads as
     misalignment rather than as a stagger, so all three share one width and
     one centre line. Deliberate deviation from the file. A 328px card also
     keeps card 3's note on the single line the board specifies. */
  .stat {
    height: auto;
    padding: 0;
    border-radius: 0;
    flex: none;
    width: 328px;
    max-width: 100%;
    align-self: center;
  }

  .stat__label {
    font-size: 18px;
  }

  .stat__figure {
    font-size: 30px;
    line-height: 1.13;
  }

  .stat__note {
    font-size: 14px;
    line-height: 1.8;
  }

  .blob--d1a {
    left: 125.76px;
    top: 20.28px;
    width: 205.095px;
    height: 175.41px;
    opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 205.09 175.41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.1874 11.712 -13.694 1.3883 96.071 87.435)'><stop stop-color='rgba(195,246,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d1b {
    left: 0px;
    top: -29.91px;
    width: 251.511px;
    height: 215.349px;
    border-radius: 87.975px;
    opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 251.51 215.35' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-3.1304 12.144 -14.183 -3.656 157.06 93.912)'><stop stop-color='rgba(221,212,253,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d1c {
    left: 55.59px;
    top: -49.88px;
    width: 205.095px;
    height: 175.41px;
    border-radius: 53.972px;
    opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 205.09 175.41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.0794 11.226 -13.126 1.2621 91.753 68.545)'><stop stop-color='rgba(241,255,184,1)' offset='0.024194'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d2a {
    left: 2.237px;
    top: -37.256px;
    width: 201.322px;
    height: 172.183px;
    opacity: 1;
    transform: rotate(-179deg);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 201.32 172.18' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.1655 11.497 -13.442 1.3628 94.303 85.827)'><stop stop-color='rgba(195,246,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d2b {
    left: 58.946px;
    top: -32.312px;
    width: 246.884px;
    height: 211.388px;
    border-radius: 86.356px;
    opacity: 1;
    transform: rotate(-179deg);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 246.88 211.39' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-3.0728 11.92 -13.922 -3.5888 154.17 92.184)'><stop stop-color='rgba(221,212,253,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d2c {
    left: 49.129px;
    top: -37.671px;
    width: 243.533px;
    height: 208.285px;
    border-radius: 52.979px;
    opacity: 1;
    transform: rotate(-179deg);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 243.53 208.28' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.2818 13.33 -15.586 1.4987 108.95 81.391)'><stop stop-color='rgba(241,255,184,1)' offset='0.024194'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d3a {
    left: -75.361px;
    top: 26.832px;
    width: 262.828px;
    height: 225.039px;
    border-radius: 91.933px;
    opacity: 1;
    transform: rotate(-14.13deg);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 262.83 225.04' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-3.2712 12.69 -14.821 -3.8206 164.13 98.137)'><stop stop-color='rgba(221,212,253,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d3b {
    left: 53.283px;
    top: -27.117px;
    width: 253.275px;
    height: 216.675px;
    opacity: 1;
    transform: rotate(-14.13deg);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 253.28 216.68' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.4663 14.467 -16.911 1.7149 118.64 108)'><stop stop-color='rgba(195,246,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }

  .blob--d3c {
    left: 5.489px;
    top: -7.036px;
    width: 214.323px;
    height: 183.303px;
    border-radius: 56.401px;
    opacity: 1;
    transform: rotate(-14.13deg);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 214.32 183.3' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.128 11.731 -13.717 1.3189 95.881 71.629)'><stop stop-color='rgba(241,255,184,1)' offset='0.024194'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  }
}

/* the stat note breaks explicitly on desktop and flows on mobile */
.only-desktop {
  display: inline;
}

@media (max-width: 1023px) {
  .only-desktop {
    display: none;
  }
}

.stat__blobs {
  display: contents;
}

/* utility: per-board line breaks */
.only-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .only-mobile {
    display: inline;
  }
}

/* =========================================================================
   Section "5" - MEET THE SCIENTIST
   desktop 3132:2014 (1920x896) / mobile 3813:3017 (430x1228.4)
   ========================================================================= */

.scientist {
  position: relative;
  overflow: hidden;
  background: var(--pale);
  padding: 100px 0;
}

.scientist__ring {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

/* wrapper centres computed out of the Figma rotation wrappers (3132:2016,
   3132:2021), so these are the inner artwork boxes, pre-rotation. */
.scientist__ring--a {
  left: calc(50% - 776px);
  top: -16.797px;
  width: 918.859px;
  height: 918.859px;
  transform: rotate(-30deg);
}

.scientist__ring--b {
  left: calc(50% - 667.111px);
  top: 169.759px;
  width: 696.561px;
  height: 601.038px;
  transform: rotate(-30deg);
}

.scientist__inner {
  position: relative;
  display: grid;
  /* minmax(0,...) or the creds card's nowrap min-content widens the column
     past the board's 565px and unbalances the split */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 70px;
  row-gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 1248px; /* 1200 content + 2x24 padding */
  margin: 0 auto;
  padding: 0 24px;
}

.scientist__media {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scientist__eyebrow {
  grid-column: 2;
  grid-row: 1;
  color: var(--deep-teal); /* 3132:2030 */
}

.scientist__quote {
  grid-column: 2;
  grid-row: 2;
}

.scientist__body {
  grid-column: 2;
  grid-row: 3;
}

.scientist__cta {
  grid-column: 2;
  grid-row: 4;
  justify-self: start;
}

.portrait {
  position: relative;
  width: 100%;
  height: 559px;
  margin-bottom: -75px;
  border-radius: 26px;
  overflow: hidden;
  pointer-events: none;
}

.portrait img {
  position: absolute;
  left: -5.94%;
  top: -13.99%;
  width: 108.34%;
  height: 109.5%;
  max-width: none;
}

.creds {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 25px;
  background: var(--ivory);
  border: 1px solid var(--white);
  border-radius: 22px;
  filter: drop-shadow(0 51px 21.95px rgba(15, 55, 49, 0.19));
}

.creds li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.creds img {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.creds span {
  font-weight: 500;
  font-size: 17px;
  line-height: 23.8px;
  color: var(--void-teal);
  white-space: nowrap;
}

.scientist__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 55px;
  letter-spacing: -0.96px;
  color: var(--void-teal);
}

.scientist__quote em {
  font-family: var(--font-display-italic);
  font-style: italic;
  color: var(--burnt-sienna);
  letter-spacing: -0.96px;
  line-height: 55px;
}

.scientist__body {
  margin: 0;
  padding-top: 1.4px;
  font-size: 20px;
  line-height: 2;
  color: var(--black);
}

.scientist__body strong {
  font-weight: 700;
}

.btn--video {
  gap: 10px;
  background: linear-gradient(to right, #0f3731 1.069%, var(--deep-teal) 100%);
  color: var(--ivory);
  line-height: 18px;
}

.btn--video img {
  flex: none;
  width: 13px;
  height: 15px;
}

.btn--video .dot {
  background: var(--ivory);
}

.btn--video .btn__duration {
  font-weight: 400;
  /* size and leading come from the button. This used to also carry
     .card__duration, whose 3.4264cqw is measured against the hero card's
     container; there is no container ancestor here, so cqw fell back to the
     viewport and printed "31 sec" at 65.8px in a 172px-tall button. */
  font-size: inherit;
  line-height: inherit;
}

/* ---------------------- video lightbox (section 5) ---------------------- */

.lightbox {
  /* fit-content, not auto: a dialog is display:block, so width:auto fills the
     viewport and leaves the video hard against the left edge with the close
     button stranded on the far right */
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(13, 46, 40, 0.82);
}

.lightbox__video {
  display: block;
  /* the file is portrait, so height is the binding constraint */
  max-height: 82vh;
  max-width: min(92vw, 520px);
  border-radius: 18px;
  background: var(--void-teal);
}

.lightbox__close {
  position: absolute;
  right: 0;
  top: -44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--warm-cream);
  color: var(--void-teal);
  cursor: pointer;
}

/* on a short screen there is no room above the video for the close button,
   so it sits inside the top corner instead */
@media (max-height: 720px) {
  .lightbox__close {
    top: 10px;
    right: 10px;
  }
}

@media (max-width: 1023px) {
  .scientist {
    padding: 50px 0;
  }

  .scientist__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 430px;
    padding: 0 15px;
  }

  /* the mobile board stacks eyebrow, heading, portrait, body, button */
  .scientist__eyebrow,
  .scientist__quote,
  .scientist__media,
  .scientist__body,
  .scientist__cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }

  .scientist__eyebrow {
    justify-content: center;
    text-align: center;
  }

  .scientist__quote {
    font-size: 30px;
    line-height: 1.12;
    text-align: center;
  }

  .scientist__quote em {
    line-height: 1.13;
  }

  .scientist__body {
    font-size: 16px;
    line-height: 1.8;
  }

  .portrait {
    height: 375px;
  }

  .portrait img {
    left: 0;
    top: -9.74%;
    width: 93.5%;
    height: 99.73%;
  }

  .creds {
    width: 100%;
    padding: 25px 40px;
    filter: drop-shadow(0 38px 18.7px rgba(15, 55, 49, 0.19));
  }

  .creds span {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    /* the explicit <br> sets the board's breaks; let it wrap rather than
       overflow the 400px card if a glyph runs wide */
    white-space: normal;
  }

  .btn--video {
    width: 100%;
  }

  .scientist__ring--a {
    left: calc(50% - 250.98px);
    top: 224.947px;
    width: 502.84px;
    height: 502.84px;
    transform: rotate(-22.07deg);
  }

  .scientist__ring--b {
    left: calc(50% - 151.915px);
    top: 291.247px;
    width: 356.592px;
    height: 233.028px;
    transform: rotate(-22.07deg);
  }
}

/* =========================================================================
   Section "THE PROTOCOL" - 3495:1620 (desktop) / 3813:3261 (mobile)
   Replaces hidden section "7" (3132:2112), which sits at the same y.
   Mobile turns the four cycle cards into a snap carousel with pagination.
   ========================================================================= */

.program {
  background: var(--void-teal);
  padding: 100px 0;
}

.program__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1248px; /* 1200 content + 2x24 padding */
  margin: 0 auto;
  padding: 0 24px;
}

.program__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 780px;
  max-width: 100%;
}

.program .eyebrow {
  color: var(--cycle-1);
  text-align: center;
}

.program__title {
  color: var(--ivory);
}

.program__title em {
  color: var(--cycle-1);
}

.program__lede {
  margin: 0;
  /* the board's two lines are nowrap and overflow the 780px head block,
     staying centred inside the 1200px container */
  white-space: nowrap;
  font-size: 20px;
  line-height: 2;
  text-align: center;
  color: var(--ivory);
}

/* ---- dose arc ---- */

.arc {
  width: 100%;
  padding-top: 20px;
}

.arc__plot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 283px;
  margin-bottom: -25px;
}

.arc__svg {
  width: 100%;
  height: 211px;
  max-width: none;
}

.arc__svg--mobile {
  display: none;
}

.arc__axis {
  position: absolute;
  transform: translateY(-50%);
  margin: 0;
  font-size: 12px;
  line-height: 1.412;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.arc__axis--dose {
  left: 0.25%;
  top: 147.9px;
}

.arc__axis--min {
  left: 89.083%;
  top: 146.9px;
}

.arc__node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.412;
  letter-spacing: 3.08px;
  text-indent: 3.08px; /* letter-spacing trails a single glyph; re-centre it */
  color: var(--void-teal);
}

.arc__node--1 {
  left: 22.583%;
  top: 39.8px;
  background: var(--cycle-1);
}

.arc__node--2 {
  left: 48.33%;
  top: calc(50% - 59.1px);
  transform: translateY(-50%);
  background: var(--cycle-2);
}

/* Balance is the minimum held, so its marker sits at the end of the plateau
   where the fourth used to, not at the foot of the descent. The descent
   between 2 and 3 is Build's territory. */
.arc__node--3 {
  left: 96.67%;
  top: calc(50% + 41.9px);
  transform: translateY(-50%);
  background: var(--cycle-3);
  box-shadow: 0 4px 12px -4px rgba(13, 46, 40, 0.5);
}

/* ---- cycle cards ---- */

.cycles {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.cycle {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 26.5px 24.5px;
  background: rgba(26, 106, 96, 0.22);
  border: 0.5px solid var(--deep-teal);
  border-radius: 22px;
}

.cycle__meta {
  margin: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  line-height: 1.412;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.cycle__n {
  font-weight: 700;
}

.cycle__weeks {
  font-weight: 400;
  color: var(--ivory);
}

.cycle__name {
  margin: 0;
  padding-top: 8px;
  width: 100%;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}

.cycle__focus {
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.412;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--white);
}

.cycle__body {
  margin: 0;
  width: 100%;
  /* the board pads each card's copy with empty lines so the DOSE rows align;
     a four-line floor does the same thing without the filler */
  min-height: 79.1px;
  font-size: 14px;
  line-height: 1.412;
  color: var(--white);
}

.cycle__dose {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  line-height: 1.412;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.cycle__dose img {
  flex: none;
  width: 13px;
  height: 14px;
}

.cycle__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 5px;
  width: 100%;
}

.chip {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--deep-teal);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.412;
  color: var(--warm-cream);
  white-space: nowrap;
}

.cycle--1 .cycle__n,
.cycle--1 .cycle__name,
.cycle--1 .cycle__dose {
  color: var(--cycle-1);
}

.cycle--2 .cycle__n,
.cycle--2 .cycle__name,
.cycle--2 .cycle__dose {
  color: var(--cycle-2);
}

.cycle--3 .cycle__n,
.cycle--3 .cycle__name,
.cycle--3 .cycle__dose {
  color: var(--cycle-3);
}

.cycles__dots {
  display: none;
}

@media (max-width: 1023px) {
  .program {
    padding: 50px 0;
  }

  .program__inner {
    max-width: 430px;
    padding: 0 15px;
  }

  .program__head {
    width: 100%;
  }

  .program__lede {
    white-space: normal;
    font-size: 16px;
    line-height: 1.8;
  }

  .arc__plot {
    height: 206px;
    margin-bottom: 0;
    justify-content: flex-start;
  }

  .arc__svg {
    height: 206px;
  }

  /* the mobile board has its own chart export (3813:7994) at 400x206;
     stretching the 1200x211 desktop one here distorts every line angle */
  .arc__svg--desktop {
    display: none;
  }

  .arc__svg--mobile {
    display: block;
  }

  /* both axis labels turn 90 degrees on the mobile board */
  /* the right label sits inside the gridlines' span, so the middle one ran
     through "YOUR"; the section colour behind each label breaks the line */
  .arc__axis {
    transform: none;
    letter-spacing: 2.64px;
    background: var(--void-teal);
  }

  /* both labels sat on the plot's bottom edge, 12px under the dashed
     baseline, so the line ran through their last letter ("D", "M");
     16px up starts them just above it */
  .arc__axis--dose {
    left: -2px;
    top: auto;
    bottom: 16px;
    writing-mode: vertical-rl;
    rotate: 180deg;
  }

  .arc__axis--min {
    left: auto;
    right: -2px;
    top: auto;
    bottom: 16px;
    writing-mode: vertical-rl;
  }

  .arc__node--1 {
    left: 19.5%;
    top: -24.15px;
    width: 30px;
    height: 30px;
  }

  .arc__node--2 {
    left: 43.37%;
    top: 35.8px;
    transform: none;
  }

  .arc__node--3 {
    left: 87.35%;
    top: 146.8px;
    transform: none;
  }

  .arc__node--2,
  .arc__node--3 {
    width: 32.1px;
    height: 32.1px;
  }

  /* carousel inside the 430 board (3813:3290). Three cards at 267.75
     with a 10 gap is an 823 track where the board drew 1101 for four. */
  /* The -15px margins are meant to run the scroller to both screen edges,
     but the base rule's width: 100% held it at the 363 column, so it only
     shifted left and clipped the peeking card 30px short of the edge.
     Widen it by the two gutters instead. The 16px top margin keeps the
     cards off the chart's baseline and its axis labels. */
  .cycles {
    justify-content: flex-start;
    gap: 10px;
    width: calc(100% + 30px);
    margin: 16px -15px 0;
    padding: 0 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cycles::-webkit-scrollbar {
    display: none;
  }

  .cycle {
    flex: none;
    width: 267.75px;
    scroll-snap-align: start;
  }

  .cycles__dots {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 32px;
  }

  .cycles__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(245, 238, 228, 0.25);
    transition: background 150ms linear;
  }

  .cycles__dot[aria-current="true"] {
    background: var(--cycle-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cycles {
    scroll-behavior: auto;
  }

  .cycles__dot {
    transition: none;
  }
}

/* =========================================================================
   Section "4" - HOW BLIV DELIVERS IT
   desktop 3132:1971 (1920x3231) / mobile 3813:8019 (430x2949)
   Desktop is a five-step serpentine: the composition is absolutely placed
   inside a 1198x2895 box (3132:1978) using the board's own coordinates,
   expressed as percentages with font sizes in cqw, so the whole thing
   scales as one piece below 1200. Mobile drops the serpentine entirely and
   stacks five image-over-text blocks 76px apart (3813:8025).
   ========================================================================= */

.journey {
  /* step 5's headshot bleeds past the 1198 content box on purpose (the board
     absorbs it in the 360px gutter); clip it below ~1300 rather than let it
     extend the page */
  overflow: hidden;
  background: var(--white);
  padding: 100px 0 52px;
}

.journey__inner {
  width: 100%;
  max-width: 1248px; /* 1200 content + 2x24 padding */
  margin: 0 auto;
  padding: 0 24px;
}

.journey__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.journey .eyebrow {
  color: var(--deep-teal);
  text-align: center;
}

.journey__lede {
  margin: 0;
  font-size: 20px;
  line-height: 2;
  text-align: center;
  color: var(--black);
}

.journey__steps {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1198 / 2895;
  margin-top: 0;
}

.journey__steps > * {
  position: absolute;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 36.23%; /* 434 of 1198 */
}

.step__n {
  margin: 0;
  font-size: 1.669cqw; /* 20 */
  line-height: 2;
  color: var(--deep-teal);
}

.step__title {
  margin: 0;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 2.504cqw; /* 30 */
  line-height: 1.13;
  color: var(--deep-teal);
}

.step__body {
  margin: 0;
  font-size: 1.502cqw; /* 18 */
  line-height: 2.404cqw; /* 28.8 */
  color: var(--stone);
}

.journey__shot,
.journey__curve {
  max-width: none;
  pointer-events: none;
}

/* --- exact board coordinates, as percentages of 1198 x 2895 --- */

.step--1 { left: 8.43%; top: 5.07%; }
.shot--1 { left: 46.74%; top: 0.02%; width: 40.23%; }

.shot--2 { left: 14.02%; top: 22.99%; width: 24.89%; }
.step--2 { left: 53.99%; top: 25.42%; }

.step--3 { left: 8.43%; top: 46%; }
.shot--3 { left: 46.83%; top: 40.89%; width: 40.07%; }

.shot--4 { left: 10.02%; top: 62.44%; width: 39.98%; }
.step--4 { left: 53.99%; top: 69.26%; }

.step--5 { left: 8.43%; top: 89.67%; }
.shot--5 { left: 76.35%; top: 86.55%; width: 27.63%; }

/* Curves 1 and 4 use the board's y; 2 and 3 are derived, because those two
   groups report children outside their own bounding box. Flagged in README. */
.journey__curve { width: 60.1%; /* 720 */ }
.curve--1 { left: 14.86%; top: 11.32%; }
.curve--2 { left: 14.86%; top: 31.09%; }
.curve--3 { left: 14.86%; top: 57.34%; }
.curve--4 { left: 14.86%; top: 88.61%; }

@media (max-width: 1023px) {
  /* the board ends the section on step 5's last line, so the copy sat
     hard against the next section; 56px matches the top */
  .journey {
    padding: 56px 0;
  }

  .journey__inner {
    max-width: 430px;
    padding: 0 15px;
  }

  .journey__head {
    gap: 0;
  }

  .journey .eyebrow {
    margin-bottom: 11px;
  }

  .journey__lede {
    margin-top: 11px;
    font-size: 16px;
    line-height: 1.8;
  }

  /* the serpentine is desktop-only (3813:8025 has no curves) */
  .journey__curve {
    display: none;
  }

  /* five stacked image-over-text blocks, 364 wide at a 33px gutter, 76 apart */
  .journey__steps {
    container-type: normal;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 0; /* the image sits directly on its text; 76px goes after the pair */
    width: 364px;
    max-width: 100%;
    margin: 21px auto 0;
  }

  .journey__steps > * {
    position: static;
  }

  .journey__block {
    display: flex;
    flex-direction: column;
  }

  .journey__shot {
    width: 100%;
    order: 1;
  }

  .step {
    order: 2;
    width: auto;
    padding: 0 10px;
    margin: 0 0 76px;
  }

  .step--5 {
    margin-bottom: 0;
  }

  /* The two headshot groups are not full-width blocks on the mobile board:
     step 2 sits at 15.4% and step 5 at 86.8%, which puts most of step 5
     outside its own 364px column. Both are centred here instead, the same
     call made for section 2's staggered cards. */
  .shot--2,
  .shot--5 {
    width: 70%;
    margin: 0 auto;
  }

  .step__n {
    font-size: 20px;
  }

  .step__title {
    font-size: 30px;
  }

  .step__body {
    font-size: 18px;
    line-height: 28.8px;
  }
}

/* shot wrappers: <picture> for the three shots with a distinct mobile crop.
   Width belongs to the .shot--N rules; only the inner image fills. */
.journey__shot {
  display: block;
}

.journey__shot img {
  display: block;
  width: 100%;
  height: auto;
}

.journey__lede {
  white-space: nowrap; /* the board keeps this on one line at 1200 */
}

@media (max-width: 1023px) {
  .journey__lede {
    white-space: normal;
  }

  /* flat order: shot, step, shot, step ... with the 76px gap after each step */
  .shot--1 { order: 1; }
  .step--1 { order: 2; }
  .shot--2 { order: 3; }
  .step--2 { order: 4; }
  .shot--3 { order: 5; }
  .step--3 { order: 6; }
  .shot--4 { order: 7; }
  .step--4 { order: 8; }
  .shot--5 { order: 9; }
  .step--5 { order: 10; }
}

/* =========================================================================
   Section "1" - THE DIFFERENCE
   desktop 3132:1695 (1920x902) / mobile 3813:3528 (430x817)

   A three-column comparison card. The board builds it column-major, each
   column a flex stack with 1px gaps and its own corner radii, and the middle
   column runs 538 tall inside a 499 card so it lifts clear of the other two
   top and bottom. Grid with fr columns reproduces that: the tracks resolve to
   238/574/388 at 1200 and scale together below it, and align-items:center
   leaves each column at its natural height.
   ========================================================================= */

.diff {
  background: var(--ivory);
  padding: 100px 0;
}

.diff__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1248px; /* 1200 card + 2x24 padding */
  margin: 0 auto;
  padding: 0 24px;
}

.diff__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.diff .eyebrow {
  color: var(--deep-teal);
  text-align: center;
}

/* the board sets this question as one line on desktop, two on mobile */
.diff__q {
  display: inline;
}

.diff__table {
  display: grid;
  grid-template-columns: 238fr 574fr 388fr;
  /* an implicit row would grow to the tallest column and push the card down.
     One explicit 1fr row keeps the row at the card's height so the middle
     column centres on it and lifts clear top and bottom, as the board has it. */
  grid-template-rows: minmax(0, 1fr); /* 1fr floors at the content size */
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 499px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  box-shadow: 0 27px 61.5px rgba(13, 46, 40, 0.06);
}

.diff__col {
  display: flex;
  flex-direction: column;
  gap: 1px; /* the card shows through as a hairline between cells */
  min-width: 0;
}

.diff__cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 106px;
  padding: 16px 20px 16px 40px;
}

/* ---- column 1: row labels (3174:8358) ---- */

.diff__col--labels .diff__cell {
  background: var(--white);
  padding-right: 24px;
  font-size: 18px;
  line-height: 28.8px;
  color: var(--stone);
}

.diff__head-cell {
  height: 72px;
  background: var(--white);
  border-radius: 22px 0 0 0;
}

.diff__col--labels .diff__cell:last-child {
  border-radius: 0 0 0 22px;
}

/* ---- column 2: the Bikman program (3174:8382) ---- */

.diff__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 97px;
  padding: 26px 16px 20px 40px;
  border-radius: 22px 22px 0 0;
  background: var(--void-teal);
  overflow: hidden; /* clips the arc group, which is wider than the banner */
  /* the arc group paints entirely in overlay and soft-light, so it needs the
     banner as its backdrop; isolate scopes the blend to this box */
  isolation: isolate;
}

.diff__banner-title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  /* both boards set these two titles nowrap and break them by hand. Inter
     Tight renders about 4% wider here than in Figma, which is enough to push
     "Typical GLP-1" past the mobile column and split it at the hyphen. */
  white-space: nowrap;
  color: var(--chartreuse);
}

/* 647x647 arc group, clipped to a 464x97 window at x=110 (3174:8794) */
.diff__arcs {
  position: absolute;
  top: -0.2px;
  left: 110px;
  width: 464px;
  height: 97px;
  overflow: hidden;
  pointer-events: none;
}

.diff__arcs img {
  /* every circle in the export is a blended paint (fills overlay, strokes
     soft-light). An <img> is its own isolated group, so inside it those
     blends have nothing to composite against and the 11% fills stack up into
     opaque wedges. Blending the element itself puts the banner back under
     them. */
  mix-blend-mode: overlay;
  position: absolute;
  top: -350.1px;
  left: 145.8px;
  width: 647px;
  height: 647px;
}

.diff__col--us .diff__cell {
  background: var(--pale);
}

.diff__col--us .diff__cell:last-child {
  height: 119px;
  border-radius: 0 0 22px 22px;
}

.diff__value {
  margin: 0;
  font-size: 20px;
  line-height: 1.33;
  color: var(--black);
}

/* ---- column 3: typical telehealth (3174:8532) ---- */

.diff__col--them .diff__cell {
  background: var(--tint);
}

.diff__col--them .diff__head-cell {
  height: 71px;
  align-items: flex-end;
  padding: 20px 16px 20px 41px;
  border-left: 1px solid var(--hairline);
  border-radius: 0 22px 0 0;
  background: var(--tint);
}

.diff__col--them .diff__cell:last-child {
  border-radius: 0 0 22px 0;
}

.diff__col--them .diff__banner-title {
  width: 220px;
  color: var(--faded);
}

.diff__col--them .diff__value {
  font-size: 18px;
  line-height: 28.8px;
  color: var(--faded);
}

/* ---- the yes/no marks ---- */

.diff__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}

.diff__mark--yes {
  background: var(--deep-teal);
}

.diff__mark--no {
  background: var(--burnt-sienna);
}

.diff__mark--yes img {
  width: 12px;
  height: 12px;
}

.diff__mark--no img {
  width: 7px;
  height: 7px;
}

@media (max-width: 1023px) {
  .diff {
    padding: 75px 0;
  }

  .diff__inner {
    gap: 33px;
    max-width: 430px;
    padding: 0 13px;
  }

  .diff__q {
    display: block;
  }

  .diff__table {
    grid-template-columns: 87fr 174fr 142fr;
    max-width: 403px;
  }

  /* mobile stacks the mark above its line instead of beside it */
  .diff__col--us .diff__cell,
  .diff__col--them .diff__cell {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
  }

  .diff__col--us .diff__cell {
    padding: 16px 0 16px 18px;
  }

  .diff__col--them .diff__cell {
    padding: 16px 20px 16px 14px;
  }

  .diff__col--labels .diff__cell {
    padding: 16px 24px 16px 9px;
    font-size: 12px;
    line-height: 1.33;
  }

  .diff__head-cell {
    padding-left: 16px;
  }

  .diff__value,
  .diff__col--them .diff__value {
    font-size: 12px;
    line-height: 1.33;
  }

  .diff__banner {
    padding-left: 13px;
  }

  .diff__banner-title,
  .diff__col--them .diff__banner-title {
    width: auto;
    font-size: 18px;
  }

  .diff__col--them .diff__head-cell {
    padding: 20px 16px 9px 15px;
  }

  /* the arc window is wider than the mobile banner; the banner clips it */
  .diff__arcs {
    top: -0.65px;
    left: 0;
    width: 221px;
  }

  .diff__arcs img {
    top: -350.25px;
    left: 25.8px;
  }
}

/* =========================================================================
   Section "8" - REAL PEOPLE
   desktop 3132:2176 (1920x624.1) / mobile 3813:3621 (430x532.1)

   The board pastes a screenshot of Bliv's live Trustpilot review carousel
   into a 1200x166 slot (3259:2065, an iframe node). Reviews are the client's
   own, with real trustpilot.com permalinks, so they belong to the live widget
   and not in static markup: hardcoding them would freeze "7 hours ago" and
   outlive reviews that get edited or pulled. The slot below reserves the
   board's exact height for Trustpilot's own embed. See README for the two
   values it still needs.
   ========================================================================= */

.people {
  background: var(--white);
  padding: 100px 0;
}

.people__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}

.people__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.people .eyebrow {
  color: var(--deep-teal);
  text-align: center;
}

/* 3259:2065 - the widget's own slot; height is the board's, width is fluid
   because the board leaves the mobile copy at the desktop's 1200 */
.people__widget {
  width: 100%;
  max-width: 1200px;
  /* reserve the chosen template's height so the section does not jump when
     Trustpilot's iframe arrives. Kept in a media query rather than driven
     from the script, so the space is right before any JS runs. */
  min-height: 140px;
  text-align: center;
}

/* Trustpilot's markup carries a plain text link as its fallback, which is
   what a visitor sees if their browser blocks the widget script. Make it read
   as deliberate rather than as a stray unstyled link. */
.people__widget > a {
  font-size: 14px;
  line-height: 140px;
  color: var(--deep-teal);
}

@media (max-width: 1023px) {
  /* Mini Carousel is taller than Carousel */
  .people__widget {
    min-height: 240px;
  }

  .people__widget > a {
    line-height: 240px;
  }
}

/* an unconfigured widget has nothing to draw, so collapse the slot rather
   than leave the board's 166px of empty white in the middle of the section */
.people__widget[data-businessunit-id=""] {
  display: none;
}

.people__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.people__rating-line {
  margin: 0;
  font-size: 13.526px;
  line-height: 1.412;
  text-align: center;
  color: var(--void-teal);
}

.people__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7.358px;
}

.people__brand img:first-child {
  width: 28.092px;
  height: 26.086px;
}

.people__brand img:last-child {
  width: 80.889px;
  height: 21.662px;
}

@media (max-width: 1023px) {
  .people {
    padding: 75px 0;
  }

  .people__inner {
    max-width: 430px;
    padding: 0 15px;
  }
}

/* =========================================================================
   Section "3" - THE SCIENCE
   desktop 3132:1939 (1920x885) / mobile 3813:4028 (430x1360)

   Void teal under a 16% radial wash that runs chartreuse to void teal on a
   skewed ellipse. CSS cannot rotate a radial-gradient, so the wash is the
   file's own SVG inline as a data URI, stretched over the section.

   The decoration (two ring groups and a cutout photo) is sized in cqw
   against the 1200 content column, so it resolves to the board's pixels at
   1200 and scales with the column below that. Desktop puts it beside the
   copy and bleeds it off the right edge; mobile stacks it underneath.
   ========================================================================= */

.science {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background-color: var(--void-teal);
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 1920 885' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)' opacity='0.16'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-17.95 18.381 -49.198 -61.851 1371.5 442.5)'><stop stop-color='rgb(212,224,23)' offset='0.10837'/><stop stop-color='rgb(162,180,27)' offset='0.33127'/><stop stop-color='rgb(113,135,32)' offset='0.55418'/><stop stop-color='rgb(88,113,34)' offset='0.66564'/><stop stop-color='rgb(63,91,36)' offset='0.77709'/><stop stop-color='rgb(38,68,38)' offset='0.88855'/><stop stop-color='rgb(13,46,40)' offset='1'/></radialGradient></defs></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.science__stage {
  position: relative;
  width: 100%;
  max-width: 1248px; /* 1200 content + 2x24 */
  margin: 0 auto;
  padding: 0 24px;
}

.science__inner {
  display: flex;
  align-items: center;
  gap: 70px;
}

.science__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 38px;
  flex: 1 1 0;
  min-width: 0;
}

/* 3132:1954 - transparent, 520x560, carries only a shadow. Invisible against
   the photo behind it, but it is what sets the copy column to 610. */
.science__frame {
  flex: 0 0 520px;
  height: 560px;
  border-radius: 26px;
  box-shadow: 0 40px 80px -44px rgba(13, 46, 40, 0.45);
}

.science__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.science__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -0.96px;
  color: var(--ivory);
}

.science__title span {
  display: block;
}

.science__title em {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: 50px;
  line-height: 52px;
  letter-spacing: -1px;
  color: var(--chartreuse);
}

.science__lede {
  margin: 0;
  font-size: 18px;
  line-height: 29.7px;
  color: var(--white);
}

/* ---- the accordion (3174:8978) ---- */

.science__faq {
  display: flex;
  flex-direction: column;
  gap: 33px;
  width: 100%;
}

.science__item {
  padding-bottom: 27px;
  border-bottom: 1px solid var(--deep-teal);
}

.science__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 600px;
  max-width: 100%;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--chartreuse);
}

.science__q::-webkit-details-marker {
  display: none;
}

.science__toggle {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.science__toggle img {
  display: block;
  width: 24px;
  height: 24px;
}

.science__item .science__toggle .icon--minus {
  display: none;
}

.science__item[open] .science__toggle .icon--minus {
  display: block;
}

.science__item[open] .science__toggle .icon--plus {
  display: none;
}

.science__a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 4px;
}

.science__a p {
  width: 574px;
  max-width: 100%;
  margin: 20px 0;
  font-size: 15px;
  line-height: 25.5px;
  color: var(--white);
}

.science__cite {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  line-height: 25.5px;
  color: var(--chartreuse);
  text-decoration: none;
}

.science__cite img {
  display: block;
  width: 20px;
  height: 20px;
}

/* ---- decoration (3132:1956) ---- */

/* Board pixels, no scaling. The rings paint in overlay and soft-light and
   need the section's own background as their backdrop, so nothing between
   them and the section may create a stacking context: no container-type on
   the stage, no transform on the decor. Anchoring to 50% - 50px reproduces
   the board's x=910 at 1920 and keeps the photo bleeding off the right edge
   at every width; the copy column shrinks with the container, so the two only
   graze each other around 1247 and over empty space. */
.science__decor {
  position: absolute;
  top: -131.29px; /* section-relative -21.29, less the 110 top padding */
  left: calc(50% - 50px);
  width: 1037px;
  height: 907px;
  pointer-events: none;
}

.science__decor img,
.science__photo {
  position: absolute;
  display: block;
}

.science__rings {
  top: 0;
  left: 0;
  width: 918.859px;
  height: 918.859px;
  /* same story as the section 1 banner arcs: every circle is a blended
     paint, so an <img> renders them as stacked opaque wash */
  mix-blend-mode: overlay;
}

.science__arcs {
  top: 101.73px;
  left: 179.91px;
  width: 639.077px;
  height: 760.035px;
}

.science__photo {
  top: 21px;
  left: 24px;
  width: 1013px;
  height: 885px;
  overflow: hidden;
  transform: scaleX(-1); /* the board's rotate(180) + scaleY(-1) */
  /* the cutout ends at the thighs; fade it out rather than show the crop
     as a hard line above the versus panels */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
}

.science__photo img {
  position: absolute;
  top: -19.49%;
  left: -7.18%;
  width: 166.75%;
  height: 124.65%;
  max-width: none;
}

@media (max-width: 1023px) {
  .science {
    padding: 75px 0;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 430 1360' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)' opacity='0.16'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(45.687 39.9 -183.01 -96.302 0.0001464 961.37)'><stop stop-color='rgb(212,224,23)' offset='0.10837'/><stop stop-color='rgb(162,180,27)' offset='0.33127'/><stop stop-color='rgb(113,135,32)' offset='0.55418'/><stop stop-color='rgb(88,113,34)' offset='0.66564'/><stop stop-color='rgb(63,91,36)' offset='0.77709'/><stop stop-color='rgb(38,68,38)' offset='0.88855'/><stop stop-color='rgb(13,46,40)' offset='1'/></radialGradient></defs></svg>");
  }

  /* the board stacks the decoration under the copy, 34px down */
  .science__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    max-width: 430px;
    padding: 0 15px;
  }

  .science__frame {
    display: none;
  }

  .science__head {
    align-items: center;
    text-align: center;
  }

  .science .eyebrow {
    justify-content: center;
  }

  .science__title {
    font-size: 30px;
    line-height: 1.12;
  }

  .science__title em {
    font-size: 30px;
    line-height: 1.13;
  }

  .science__lede {
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
  }

  .science__q {
    width: 100%;
    /* the board's 16px gap leaves 360 for a question that needs 363, so it
       overlaps the icon by 4px. 8px keeps all four on the board's line count
       instead, and the questions wrap rather than collide if they grow. */
    gap: 8px;
    white-space: normal;
  }

  .science__a p {
    width: 100%;
    margin: 20px 0;
  }

  /* 3822:8163 - the decoration becomes a block in the flow, 512.7 wide in a
     400 column, so it bleeds 56 each side and the section clips it */
  .science__decor {
    position: relative;
    top: auto;
    left: auto;
    width: 512.703px;
    height: 559.358px;
    flex: 0 0 auto;
  }

  .science__rings {
    top: 46.66px;
    left: 0;
    width: 512.703px;
    height: 512.703px;
  }

  .science__arcs {
    top: 56.76px;
    left: 100.39px;
    width: 356.59px;
    height: 424.083px;
  }

  /* The cutout ends at the thighs, and here the frame stops ~80px above
     the section's end, so the crop read as a hard line across the page.
     Fade the last stretch into the section instead. */
  .science__photo {
    top: 0;
    left: 52.6px;
    width: 395.049px;
    height: 552.398px;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
  }

  .science__photo img {
    top: -6.86%;
    left: -48.49%;
    width: 238.58%;
    height: 111.43%;
  }
}

/* =========================================================================
   Section "6" / "13" - OUR PRICING
   desktop 3132:2074 (1920x1129.5) / mobile 3822:8277 (430x2175.5)

   The card is identical on both boards, 387.752 x 486.109 with every child
   absolutely placed. Desktop puts the three in a row, mobile stacks them.
   Internals are cqw against the card's own width, so the card holds the
   board's pixels at 387.752 and scales whole on phones narrower than 430.
   ========================================================================= */

.pricing {
  background: var(--ivory);
  padding: 100px 0;
}

.pricing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15.4px;
  width: 100%;
  max-width: 760px;
}

.pricing .eyebrow {
  color: var(--deep-teal);
  text-align: center;
}

.pricing__title {
  margin: 0;
  padding-top: 0.6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 52px;
  letter-spacing: -1px;
  text-align: center;
  color: var(--void-teal);
}

.pricing__title span {
  display: block;
}

.pricing__title em {
  font-family: var(--font-display-italic);
  font-style: italic;
  line-height: 54px;
  color: var(--deep-teal);
}

.pricing__lede {
  margin: 0;
  font-size: 18px;
  line-height: 28.8px;
  text-align: center;
  color: var(--stone);
}

/* 3174:9039 - promo chip. The board's pale dashed chip sat almost flush
   with the cream section and read as fine print; this is the offer, so it
   takes the page's dark ink and the code becomes a chartreuse ticket. */
.pricing__promo {
  margin: 0;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--void-teal);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--ivory);
  box-shadow: 0 8px 24px rgba(13, 46, 40, 0.18);
}

.pricing__promo strong,
.quiz__promo strong {
  display: inline-block;
  margin: 0 3px;
  padding: 1px 10px;
  border: 1px dashed var(--void-teal);
  border-radius: 5px;
  background: var(--chartreuse);
  font-weight: 700;
  letter-spacing: 1.54px;
  line-height: 1.5;
  color: var(--void-teal);
}

/* ---- the three cards (3174:8982) ---- */

.pricing__cards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16.078px;
  width: 100%;
}

.card-plan {
  container-type: inline-size;
  position: relative;
  flex: 1 1 387.752px;
  min-width: 0;
  max-width: 387.752px;
  aspect-ratio: 387.752 / 486.109;
}

.card-plan > * {
  position: absolute;
}

/* The bottles run to the card's outer edge, so their square corners poked
   past the rounded bottom-right corner and covered the teal stroke. Clip
   the card to its rounded outline (radius 18.915 of 387.752, from
   pricing-card-bg.svg) and redraw the stroke over the top.
   The radius is in percent, not cqw: cqw on the container itself resolves
   against the next container up (here the viewport), which on a 1440
   screen made the corners ~63px and cut the cards' corners off. 4.878% of
   the width by 3.891% of the height is the SVG's 18.915px on both axes. */
.card-plan {
  clip-path: inset(0 round 4.878% / 3.891%);
}

.card-plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.4878cqw solid var(--deep-teal);
  border-radius: 4.878% / 3.891%;
  pointer-events: none;
}

.card-plan__bg {
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* badge 3174:8988. The board's 8.7969cqw left the badge 1.6px over the
   kind line below ("MOST CHOSEN" touching "GLP-1"); 2cqw higher opens
   about a 6px gap without moving anything under it. */
.card-plan__badge {
  top: 6.7969cqw;
  left: 7.3887cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32.7529cqw;
  height: 5.9316cqw;
  border-radius: 1.0316cqw;
  font-family: "DM Sans", var(--font-body);
  font-weight: 700;
  font-size: 3.0948cqw;
  line-height: 1;
  letter-spacing: 0.3524cqw;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-plan__badge--sienna {
  background: var(--burnt-sienna);
  color: var(--white);
}

.card-plan__badge--chartreuse {
  background: var(--chartreuse);
  color: var(--void-teal);
}

.card-plan__badge--umber {
  top: 6.7685cqw;
  left: 7.4764cqw;
  width: 38.9424cqw;
  background: var(--umber);
  color: var(--white);
}

/* 3174:8991 */
.card-plan__kind {
  top: 17.359cqw;
  left: 8.049cqw;
  width: 74.878cqw;
  margin: 0;
  font-size: 3.6106cqw;
  line-height: 1.412;
  color: var(--black);
}

/* 3174:8987 */
.card-plan__name {
  top: 23.5486cqw;
  left: 7.3165cqw;
  width: 58.2847cqw;
  margin: 0;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: 12.8948cqw;
  line-height: 1.13;
  color: var(--deep-teal);
}

/* 3174:8992 */
.card-plan__price {
  top: 41.7406cqw;
  left: 7.3165cqw;
  width: 24.0564cqw;
  color: var(--burnt-sienna);
}

.card-plan__price p {
  margin: 0;
  font-size: 3.6106cqw;
  line-height: 1.412;
}

/* scoped past ".card-plan__price p", which would otherwise win on
   specificity and render the amount at the 14px of the lines around it */
.card-plan__price .card-plan__amount {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: 12.8948cqw;
  line-height: 1.13;
  white-space: nowrap;
}

.card-plan__price .card-plan__per {
  font-weight: 700;
}

/* 3174:8996 */
/* The board's ul is 200.496 wide, which leaves 156.5 of content after the
   marker offset. Two bullets need more than that here, "CareCredit - 24
   months 0%" at 166 being the widest, so they wrapped onto a second line and
   collided with the footnote below. Figma lets its own text node overflow the
   ul, running to about 229; 214 fits every bullet on one line and still stops
   short of where the board puts them. */
.card-plan__list {
  top: 67.3523cqw;
  left: 0;
  width: 55.1899cqw;
  margin: 0;
  padding: 0;
  list-style: disc;
  font-size: 3.6106cqw;
  line-height: 1.73;
  color: var(--black);
}

/* the board's export says 21, but Figma renders its own list indent on top
   of that: measured off the card render, the marker sits at 32 and the text
   at 44, which is what an outside marker before a 44px content edge gives */
.card-plan__list li {
  margin-inline-start: 11.3475cqw;
}

/* 3174:8990 */
.card-plan__note {
  top: 93.6913cqw;
  left: 9.2688cqw;
  width: 40.4877cqw;
  margin: 0;
  opacity: 0.44;
  font-size: 3.0948cqw;
  line-height: 1.412;
  color: var(--deep-teal);
}

/* 3174:8986 */
.card-plan__cta {
  top: 105.25cqw;
  left: 7.3887cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49.0004cqw;
  height: 12.379cqw;
  border-radius: 1.5474cqw;
  background: linear-gradient(90deg, #0f3731 1.0691%, #1a6a60 100%);
  font-weight: 700;
  font-size: 4.6421cqw;
  line-height: 1;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

/* the bottle renders over the button's right edge, as the board has it */
.card-plan__bottle {
  overflow: hidden;
  pointer-events: none;
}

.card-plan__bottle img {
  position: absolute;
  display: block;
  max-width: none;
}

.card-plan__bottle--a {
  top: 38.9708cqw;
  left: 55.0997cqw;
  width: 43.8425cqw;
  height: 85.8796cqw;
}

.card-plan__bottle--a img {
  top: -7.93%;
  left: -179.34%;
  width: 469.55%;
  height: 160.18%;
}

/* card 3 shows both bottles: 3174:9027 and 3174:9028 */
.card-plan__bottle--pair-1 {
  top: 38.9424cqw;
  left: 55.1873cqw;
  width: 44.874cqw;
  height: 85.8796cqw;
}

.card-plan__bottle--pair-1 img {
  top: 18.97%;
  left: -136.26%;
  width: 352.35%;
  height: 123.03%;
}

.card-plan__bottle--pair-2 {
  top: 0.0799cqw;
  left: 55.7031cqw;
  width: 43.8425cqw;
  height: 124.822cqw;
}

.card-plan__bottle--pair-2 img {
  top: 42.08%;
  left: -117.01%;
  width: 389.19%;
  height: 91.34%;
}

/* ---- payment marks (3174:9046) ---- */

.pricing__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.pricing__pay img {
  display: block;
  height: 34px;
}

.pricing__pay .mark--carecredit {
  width: 157px;
  border: 0.5px solid var(--deep-teal);
  border-radius: 6px;
}

.pricing__pay .mark--klarna {
  width: 99px;
}

.pricing__pay .mark--applepay {
  width: 87px;
}

/* 3132:2111 */
.pricing__fineprint {
  width: 100%;
  max-width: 861px;
  margin: 0;
  font-size: 14px;
  line-height: 22.4px;
  text-align: center;
  color: var(--fineprint);
}

@media (max-width: 1023px) {
  .pricing {
    padding: 75px 0;
  }

  .pricing__inner {
    gap: 22px;
    max-width: 430px;
    padding: 0 20px;
  }

  .pricing__head {
    gap: 11px;
  }

  .pricing__title {
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.64px;
  }

  .pricing__title em {
    line-height: 1.13;
  }

  .pricing__lede {
    max-width: 338px;
    font-size: 16px;
    line-height: 1.8;
  }

  /* the board stacks the cards */
  .pricing__cards {
    flex-direction: column;
    align-items: center;
  }

  .card-plan {
    width: 100%;
    flex: 0 0 auto;
  }

  .pricing__fineprint {
    max-width: 347px;
  }
}


/* =========================================================================
   Frame 2147258571 - CUSTOMER WALL
   desktop 3132:2346 (1920x830.1) / mobile 3822:8414 (430x642)

   Six 300x400 cards on an 1850 track that bleeds past the 1200 column and is
   clipped by the section. The board repeats the same six another fourteen
   times off-screen, which is padding for a marquee animation the file does
   not specify, so only the visible six are built.

   The content is a launch blocker. See the comment in index.html.
   ========================================================================= */

.wall {
  overflow: hidden;
  background: var(--void-teal);
  padding: 100px 0;
}

.wall__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}

.wall__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.12;
  text-align: center;
  color: var(--warm-cream);
}

.wall__title span {
  display: block;
}

.wall__title em {
  font-family: var(--font-display-italic);
  font-style: italic;
  line-height: 1.13;
  color: var(--chartreuse);
}

/* 3132:2351 - 1850 wide in a 1200 column, so it bleeds 325 each side */
.wall__track {
  display: flex;
  gap: 10px;
  /* no max-width: the board's track is wider than the content column and
     bleeds 325 each side, which the section clips */
  width: 1850px;
  flex: 0 0 auto;
  height: 401px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.wall__card {
  position: relative;
  flex: 0 0 300px;
  height: 400px;
  border-radius: 10px;
  background: #cfcfcf;
  overflow: hidden;
}

.wall__photo {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* 3132:2355 */
.wall__scrim {
  position: absolute;
  top: 248px;
  left: 0;
  width: 300px;
  height: 152px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}

/* the board sets the stars at 319 above a name (336) and city (359); the
   name and city are placeholders and are left out, so the stars drop to
   the city's baseline instead of floating over an empty band */
.wall__stars {
  position: absolute;
  top: 359px;
  left: 25px;
  display: block;
  width: 85px;
  height: 17px;
}

/* 3259:2037 */
.wall__score {
  display: flex;
  align-items: center;
  gap: 11.594px;
}

.wall__brand,
.wall__rating {
  display: flex;
  align-items: center;
}

.wall__brand {
  justify-content: center;
  gap: 7.358px;
  width: 119.81px;
}

.wall__brand img:first-child {
  width: 28.092px;
  height: 26.086px;
}

.wall__brand img:last-child {
  width: 80.889px;
  height: 21.662px;
}

.wall__rating {
  gap: 10.628px;
  font-size: 13.526px;
  line-height: 1.412;
  white-space: nowrap;
  color: var(--ivory);
}

.wall__rating img {
  display: block;
  width: 114.005px;
  height: 21.376px;
}

@media (max-width: 1023px) {
  .wall {
    padding: 75px 0;
  }

  .wall__inner {
    gap: 33px;
    max-width: 430px;
    padding: 0 15px;
  }

  .wall__title {
    font-size: 30px;
  }

  /* the track scrolls at the board's card size rather than shrinking the
     faces; the board's own mobile version keeps the desktop track width */
  .wall__track {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wall__track::-webkit-scrollbar {
    display: none;
  }

  .wall__score {
    flex-direction: column;
    gap: 8px;
  }
}

/* =========================================================================
   Section "9" - PRESS BAR
   desktop 3132:2219 (1920x99) / mobile 3822:8661 (430x99)

   Five outlet marks on deep teal, spaced across the 1200 column. The mobile
   board keeps the same 1200 row inside a 430 frame, 770px of overflow, so
   mobile scrolls the row horizontally at the board's sizes rather than
   shrinking Forbes to 30px. See README: this one needs a design decision.
   ========================================================================= */

.press {
  background: var(--deep-teal);
}

.press__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  height: 99px;
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding: 11px 24px;
}

.press__row img {
  display: block;
  flex: 0 0 auto;
}

.press__mark--forbes {
  width: 91.711px;
  height: 28px;
}

.press__mark--bloomberg {
  width: 128px;
  height: 24px;
}

.press__mark--nyt {
  width: 232px;
  height: 33px;
}

.press__mark--abc {
  width: 121px;
  height: 42px;
}

.press__mark--cnn {
  width: 50px;
  height: 24px;
}

@media (max-width: 1023px) {
  .press__row {
    justify-content: flex-start;
    max-width: none;
    padding: 11px 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .press__row::-webkit-scrollbar {
    display: none;
  }
}

/* =========================================================================
   Section "10" - FAQ
   desktop 3132:2248 (1920x1389) / mobile 3813:4380 (430x1568)

   Both boards draw all eight answers open and ship no closed-state icon for
   this section, but eight open answers is 1389px of page, so they start
   closed. The plus is the file's own minus export with one extra stroke,
   M12 8V16, so the pair cannot drift. See README.
   ========================================================================= */

.faq {
  background: var(--white);
  padding: 100px 0;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 52px;
  width: 100%;
  max-width: 968px; /* 920 content + 2x24 */
  margin: 0 auto;
  padding: 0 24px;
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.faq .eyebrow {
  color: var(--deep-teal);
  text-align: center;
}

.faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.12;
  text-align: center;
  color: var(--black);
}

.faq__title em {
  font-family: var(--font-display-italic);
  font-style: italic;
  line-height: 1.13;
  color: var(--deep-teal);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
}

.faq__item {
  border-bottom: 1px solid var(--deep-teal);
}

.faq__item + .faq__item {
  padding-top: 20px;
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--void-teal);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__toggle {
  flex: 0 0 auto;
  margin-top: -0.11px;
  width: 24px;
  height: 24px;
}

.faq__toggle img,
.faq__toggle svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* closed shows the plus, open the minus, same as section 3 */
.faq__item .faq__toggle .icon--minus {
  display: none;
}

.faq__item[open] .faq__toggle .icon--minus {
  display: block;
}

.faq__item[open] .faq__toggle .icon--plus {
  display: none;
}

.faq__a {
  width: 859px;
  max-width: 100%;
  margin: 0;
  padding: 20px 0;
  font-size: 15px;
  line-height: 25.5px;
  color: var(--taupe);
}

@media (max-width: 1023px) {
  .faq {
    padding: 75px 0;
  }

  .faq__toggle {
    margin-top: -0.71px;
  }

  .faq__inner {
    max-width: 430px;
    padding: 0 15px;
  }

  .faq__head {
    gap: 11px;
  }

  .faq__title {
    font-size: 30px;
  }

  .faq__a {
    width: 100%;
  }
}

/* =========================================================================
   Section "12" - FIND YOUR CYCLE
   desktop 3132:2476 (1920x672) / mobile 3813:4468 (430x966)

   Mirror of section 3: copy on the right, Dr Bikman cut out over the rings on
   the left, on void teal under a 15% radial wash. Mobile centres the copy and
   drops the figure underneath. Classed .quiz, not .cycle: the program section
   already owns .cycle for its three cards. Same constraint as section 3
   applies: the ring
   group is an all-blend export, so nothing above it may create a stacking
   context and the decoration stays in board pixels.
   ========================================================================= */

.quiz {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-height: 672px;
  padding-right: max(24px, calc(50% - 602px)); /* 358 at 1920 */
  background-color: var(--void-teal);
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 1920 672' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)' opacity='0.15'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-18.2 -14.2 43.611 -55.896 624 322.21)'><stop stop-color='rgb(212,224,23)' offset='0.10837'/><stop stop-color='rgb(162,180,27)' offset='0.33127'/><stop stop-color='rgb(113,135,32)' offset='0.55418'/><stop stop-color='rgb(88,113,34)' offset='0.66564'/><stop stop-color='rgb(63,91,36)' offset='0.77709'/><stop stop-color='rgb(38,68,38)' offset='0.88855'/><stop stop-color='rgb(13,46,40)' offset='1'/></radialGradient></defs></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.quiz__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 600px;
  max-width: 100%;
}

.quiz__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.quiz__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -0.96px;
  color: var(--ivory);
}

.quiz__title span {
  display: block;
}

.quiz__title em {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: 50px;
  line-height: 52px;
  letter-spacing: -1px;
  color: var(--chartreuse);
}

.quiz__lede {
  width: 506px;
  max-width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 29.7px;
  color: var(--white);
}

/* 3174:9094 */
.quiz__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 311px;
  max-width: 100%;
  height: 64px;
  padding: 20px 29px;
  border-radius: 6px;
  background: var(--chartreuse);
  font-weight: 700;
  font-size: 19px;
  line-height: 19px;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
  color: var(--void-teal);
}

/* 3175:9578 - two vials tucked against the left of the promo chip */
.quiz__promo-row {
  width: 100%;
}

/* The chip was absolutely placed and nowrap, so it had no width of its own
   to centre or shrink: on a 393 phone it ran ~145px off the right edge.
   Now it is in flow, 51px in so the vials still tuck against its left, and
   wraps inside the screen. Its bottom sits 10px above the vials' base, as
   on the board. */
.quiz__promo-group {
  position: relative;
  display: flex;
  align-items: flex-end;
  max-width: 100%;
  min-height: 87.41px;
  padding: 0 0 10px 51px;
}

.quiz__promo {
  position: relative;
  margin: 0;
  padding: 10px 15px 10px 25px;
  border: 0.5px dashed var(--chartreuse);
  border-radius: 6px;
  background: var(--void-teal);
  font-size: 14px;
  line-height: 1.6;
  color: var(--chartreuse);
}

.quiz__vial {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.quiz__vial img {
  position: absolute;
  display: block;
  max-width: none;
}

.quiz__vial--a {
  top: 3.79px;
  left: 0;
  width: 35.831px;
  height: 79.834px;
}

.quiz__vial--a img {
  top: -14.16%;
  left: -156.11%;
  width: 420.92%;
  height: 126.03%;
}

.quiz__vial--b {
  top: 0;
  left: 30.05px;
  width: 41.694px;
  height: 87.41px;
}

.quiz__vial--b img {
  top: -13.12%;
  left: -140.2%;
  width: 387.2%;
  height: 123.14%;
}

/* ---- decoration (3132:2487) ---- */

.quiz__decor {
  position: absolute;
  top: -113.79px;
  left: calc(50% - 817.37px); /* 142.63 at 1920 */
  width: 919px;
  height: 919px;
  pointer-events: none;
}

.quiz__decor img,
.quiz__decor picture,
.quiz__portrait {
  position: absolute;
  display: block;
}

/* the arcs come through a <picture>, so the box is the picture element and
   the img fills it: the two boards use arc groups of different aspect ratio */
.quiz__decor picture > img {
  position: static;
  width: 100%;
  height: 100%;
}

.quiz__rings {
  top: 0;
  left: 0.09px;
  width: 918.859px;
  height: 918.859px;
  mix-blend-mode: overlay; /* all-blend export, same as section 3 */
}

.quiz__decor picture {
  top: 181.73px;
  left: 0;
  width: 734.077px;
  height: 491.035px;
}

.quiz__portrait {
  top: 61px;
  left: 141.38px;
  width: 768px;
  height: 768px;
  transform: scaleX(-1); /* the board's rotate(180) + scaleY(-1) */
}

.quiz__portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .quiz {
    align-items: center;
    justify-content: flex-start;
    min-height: 966px;
    padding: 75px 15px 0;
  }

  .quiz__copy {
    width: 400px;
  }

  .quiz__head {
    align-items: center;
    text-align: center;
  }

  .quiz .eyebrow {
    justify-content: center;
  }

  .quiz__title {
    font-size: 30px;
    line-height: 1.12;
  }

  .quiz__title em {
    font-size: 30px;
    line-height: 1.13;
  }

  .quiz__lede {
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
  }

  .quiz__cta {
    width: 100%;
  }

  /* the chip and its vials centre as one group */
  .quiz__promo-row {
    display: flex;
    justify-content: center;
  }

  /* 3813:4469 - the figure drops below the copy */
  .quiz__decor {
    top: 459.28px;
    left: calc(50% - 299.16px); /* -84.16 at 430 */
    width: 614px;
    height: 549px;
  }

  .quiz__rings {
    top: 34px;
    left: 0;
    width: 614px;
    height: 614px;
  }

  .quiz__decor picture {
    top: 155.43px;
    left: 104.14px;
    width: 376.504px;
    height: 328.451px;
  }

  .quiz__portrait {
    top: 0;
    left: 70.16px;
    width: 515px;
    height: 515px;
  }
}

/* =========================================================================
   footer#contact - 3132:2502 (1920x790) / 3825:8693 (430x1581)
   ========================================================================= */

.footer {
  background: linear-gradient(to bottom, var(--deep-teal) 0%, #0f3731 100%);
  color: var(--white);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 1248px; /* 1200 content + 2x24 padding */
  margin: 0 auto;
  padding: 0 24px 56px;
}

.footer__rule {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--deep-teal);
}

.footer__logo {
  width: 137px;
  height: 72.3px;
}

.footer__marks {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer__marks .mark--trustpilot {
  width: 187.5px;
  height: 150px;
}

.footer__marks .mark--legitscript {
  width: 79.19px;
  height: 99px;
}

.footer__wordmark {
  margin: 0;
  padding-top: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.1667vw, 80px);
  line-height: 1;
  color: var(--white);
}

.footer__wordmark em {
  font-family: var(--font-display-italic);
  font-style: italic;
  line-height: 1.13;
  color: var(--chartreuse);
}

.footer__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  padding: 25px 0;
  border-bottom: 1px solid var(--deep-teal);
}

.footer__col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* a <p>, not a heading: three link-column labels and the wordmark were four
   of twelve h2s, which muddies the outline an answer engine reads */
.footer__col-title {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.412;
  text-transform: uppercase;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.footer__col li {
  padding: 4px 0 2px;
}

.footer__col a {
  font-size: 14px;
  line-height: 1.412;
}

.privacy-choices {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer__legal {
  /* 25 of its own plus most of the space the social row used to hold below
     the links; the full 64 reads as a hole with nothing in it */
  padding-top: 64px;
  font-size: 14px;
  line-height: 1.412;
  color: rgba(255, 255, 255, 0.5);
}

.footer__legal p {
  margin: 0 0 1.412em;
}

.footer__legal p:last-child {
  margin-bottom: 0;
}

.footer__legal strong {
  font-weight: 700;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 36px;
  font-size: 14px;
  line-height: 1.412;
  color: rgba(255, 255, 255, 0.5);
}

.footer__bottom-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer__payments {
  width: 353.26px;
  max-width: 100%;
}

@media (max-width: 1023px) {
  .footer__inner {
    max-width: 430px;
    padding: 0 35px 0;
  }

  .footer__brand {
    flex-direction: column;
    gap: 24px;
    padding: 46px 0 0;
    border-bottom: 0;
  }

  .footer__marks {
    align-items: flex-start;
    gap: 32.81px; /* 219.5 - 187.5 + 0.81 */
  }

  .footer__wordmark {
    padding-top: 13px;
    font-size: 30px;
    line-height: 1.13;
    text-align: center;
  }

  .footer__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    padding: 36px 0 0;
    border-bottom: 0;
  }

  .footer__col {
    flex: none;
  }

  .footer__legal {
    /* the board bleeds this 14px past the 360 column on each side */
    margin: 0 -14px;
    padding-top: 25px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 44px 0 56px;
  }

  /* the board wraps the payment marks onto two larger rows; one row scaled
     to the column fits 360px and keeps them legible. Noted in README. */
  .footer__payments {
    width: 100%;
  }
}

/* =========================================================================
   INCLUDED WITH EVERY PLAN - the complimentary Insulin IQ membership.
   Between the phases (dark) and the delivery steps (white), on the same pale
   surface as the scientist section, so it reads as part of the program
   rather than as an advertisement. Built from existing tokens only.
   ========================================================================= */

.included {
  background: var(--pale);
  padding: 72px 0;
}

.included__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1248px; /* 1200 content + 2x24 padding, as every other section */
  margin: 0 auto;
  padding: 0 24px;
}

/* the eyebrow is chartreuse on the dark sections; on pale it needs the teal */
.included .eyebrow,
.included .eyebrow .dot {
  color: var(--deep-teal);
}

.included .eyebrow .dot {
  background: var(--deep-teal);
  /* A slow pulse, so the band catches the eye on a scroll past without
     anything moving. Opacity only: nothing reflows and nothing around it
     repaints. Same reduced-motion exit the ticker takes. */
  animation: included-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes included-dot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .included .eyebrow .dot {
    animation: none;
  }
}

.included__lede {
  max-width: 720px;
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  color: var(--black);
}

/* Two by two rather than a four-across row: the fourth item carries a longer
   sentence than the others and four cards on one line squeeze it to five
   lines while the rest sit at two. */
.included__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 880px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.included__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  background: var(--ivory);
  border: 1px solid var(--white);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--void-teal);
}

.included__list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 4px;
  background: var(--deep-teal);
}

.included__note {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--fineprint);
}

@media (max-width: 1023px) {
  .included {
    padding: 50px 0;
  }

  .included__inner {
    max-width: 430px;
    padding: 0 15px;
  }

  .included__lede {
    font-size: 16px;
  }

  /* one per row rather than two 190px cards squeezed into 400 */
  .included__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   THE CONTRAST - two panels under the science copy. Open-ended prescribing
   on the left, the program's arc on the right. Lives on the section's dark
   surface, so both panels are tints over it rather than cards.
   ========================================================================= */

.versus {
  /* the section's portrait is absolutely placed and runs past the row above,
     so this has to sit over it rather than under */
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}

.versus__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px 28px 24px;
  border-radius: 22px;
}

/* grey and flat, against the arc's phase accents opposite */
.versus__panel--quo {
  /* tint over a solid base, or the portrait behind shows through */
  background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    var(--void-teal);
  border: 1px solid rgba(223, 225, 215, 0.18);
  /* --faded (#758482) is 3.3:1 on this panel, under the 4.5:1 that 12-13px
     text needs, and read as green on green. This grey is 6.1:1 and still
     sits below "forever" in --pale (9.9:1), so the panel stays the flat,
     dimmer one of the pair. Local, because --faded is right elsewhere. */
  --quo-ink: #a9b4b1;
}

/* the same tint and hairline the phase cards use */
.versus__panel--program {
  background: linear-gradient(rgba(26, 106, 96, 0.22), rgba(26, 106, 96, 0.22)),
    var(--void-teal);
  border: 1px solid var(--deep-teal);
}

.versus__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 12px;
  line-height: 1.412;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.versus__label {
  font-weight: 700;
  white-space: nowrap;
}

.versus__flow {
  font-weight: 400;
  text-align: right;
}

.versus__panel--quo .versus__label,
.versus__panel--quo .versus__flow {
  color: var(--quo-ink);
}

.versus__panel--program .versus__label {
  color: var(--chartreuse);
}

/* 0.55 measured 4.6:1, at the floor; 0.7 is 6.5:1, level with the status
   quo panel's line opposite */
.versus__panel--program .versus__flow {
  color: var(--ivory);
  opacity: 0.7;
}

/* ---- left: months, then no end ---- */

.versus__months {
  display: flex;
  /* the grid stretches both panels to the taller one, so this takes the
     leftover height and centres the row in it rather than leaving the panel
     top-heavy beside the arc */
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--quo-ink);
}

.versus__months li {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.412;
}

/* the arrow sits in the gap after each item, so the last one has none and
   the row ends on "forever" rather than pointing past it */
.versus__months li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  left: 100%;
  top: 9px;
  transform: translateX(-50%);
  font-size: 15px;
  line-height: 1;
  color: var(--quo-ink);
  opacity: 0.8;
}

.versus__pill {
  width: 34px;
  height: 34px;
}

.versus__months li.versus__forever {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--pale);
  white-space: nowrap;
}

.versus__forever em {
  font-style: italic;
}

/* ---- right: the arc, and what each stretch is called ---- */

.versus__arc {
  display: block;
  width: 100%;
  height: 118px;
  max-width: none;
}

.versus__phases {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.412;
  color: var(--white);
}

.versus__phases li:first-child {
  color: var(--cycle-1);
}

.versus__phases li:nth-child(2) {
  color: var(--cycle-2);
}

.versus__phases li:last-child {
  color: var(--cycle-3);
}

@media (max-width: 1023px) {
  .versus {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 40px;
  }

  .versus__panel {
    gap: 18px;
    padding: 22px 20px 20px;
  }

  /* the two halves of the header stack rather than crowd a 400px row */
  .versus__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .versus__flow {
    text-align: left;
  }

  .versus__months li.versus__forever {
    font-size: 22px;
  }

  .versus__arc {
    height: 96px;
  }
}

/* ---- Cream hero (Scott, 2026-10-11) -----------------------------------
   The board's hero is dark green with a chartreuse glow; Scott wanted less
   green up top. Same layout, palette colours only: warm cream ground, dark
   teal type, burnt-sienna accents, rings redrawn for a light ground
   (ring-*-cream.svg). Kept last so it wins over the mobile hero rules. */
.hero {
  background-image: radial-gradient(ellipse 55% 70% at 72% 50%, rgba(237, 105, 64, 0.12), rgba(245, 238, 228, 0) 70%),
    linear-gradient(var(--warm-cream), var(--warm-cream));
}
.hero__title { color: var(--void-teal); }
.hero__title em { color: var(--burnt-sienna); }
.hero__body, .hero__price { color: var(--stone); }
.hero__body strong { color: var(--void-teal); }
.hero__price strong { color: var(--burnt-sienna); }
.hero .eyebrow { color: var(--deep-teal); }
.hero .eyebrow .dot { background: var(--burnt-sienna); }
.hero .btn--primary { background: var(--void-teal); color: var(--warm-cream); }
.hero .btn--ghost { border-color: var(--void-teal); color: var(--void-teal); }
.hero .badge { border-color: rgba(13, 46, 40, 0.35); color: var(--void-teal); }
.hero .badges__note { color: var(--stone); }
.hero .card { filter: none; box-shadow: none; background: var(--ivory); border: 1px solid rgba(13, 46, 40, 0.12); }
@media (max-width: 1023px) {
  .hero {
    background-image: radial-gradient(ellipse 90% 45% at 50% 62%, rgba(237, 105, 64, 0.12), rgba(245, 238, 228, 0) 75%),
      linear-gradient(var(--warm-cream), var(--warm-cream));
  }
  .hero__ctas .btn--ghost { background: transparent; }
}

/* Buttons and sticky bar in the cream-hero palette (Scott, 2026-10-11):
   dark green buttons, the as-low-as price in burnt sienna, no chartreuse
   fills. */
.nav .btn--primary { background: var(--deep-teal); color: var(--warm-cream); }
.cta-bar__price { display: none; }
@media (max-width: 1023px) {
  .cta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--warm-cream);
    border-top: 1px solid rgba(13, 46, 40, 0.12);
    box-shadow: 0 -8px 20px -12px rgba(13, 46, 40, 0.3);
  }
  .cta-bar__price {
    display: block;
    flex: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    color: var(--stone);
  }
  .cta-bar__price strong { display: block; font-size: 18px; color: var(--burnt-sienna); }
  .cta-bar .btn { flex: 1; width: auto; min-width: 0; padding: 16px 14px; font-size: 16px; background: var(--void-teal); color: var(--warm-cream); }
}
.quiz__cta { background: var(--deep-teal); color: var(--warm-cream); }
/* Always on, like the sticky bars on /sg/ and /vials/ */
@media (max-width: 1023px) {
  .cta-bar--tucked { transform: none; }
}

/* Hero, simplified (Scott, 2026-10-11): rings stay out of the copy, and on
   phones the button follows the price, above the video. */
.hero__ring--large { opacity: 0.6; }
@media (max-width: 1023px) {
  .hero__ring { display: none; }
  .hero__ctas { order: 3; }
  .hero__ctas .btn--ghost { display: none; }
  .hero .card { order: 5; margin-top: 22px; }
  .hero .badges { order: 6; }
  .hero .badges__note { order: 7; }
}

/* Phones: the hero through the bottom of the video card fits above the
   sticky bar with room to spare (Scott, 2026-10-11). The sticky bar
   carries the button, so the hero's own buttons step aside. */
@media (max-width: 1023px) {
  .hero { padding-top: 30px; padding-bottom: 28px; }
  .hero__title { margin-top: 6px; font-size: 34px; }
  .hero__title-line:first-child { line-height: 1.1; }
  .hero__body { margin-top: 8px; font-size: 15px; line-height: 1.45; }
  .hero__price { margin-top: 6px; font-size: 15px; }
  .hero__ctas { display: none; }
  .hero .card { order: 4; margin-top: 12px; width: 100%; }
}
@media (max-width: 379px) { .hero__title { font-size: 31px; } }

/* Hero badges on one line on phones (Scott, 2026-10-11) */
@media (max-width: 1023px) {
  .hero .badges { flex-wrap: nowrap; gap: 6px; margin-top: 16px; }
  .hero .badge { padding: 0 7px; font-size: 12px; gap: 4px; }
}
@media (max-width: 379px) {
  .hero .badge { font-size: 11px; padding: 0 5px; }
}
/* Phones: the cream hero runs down to the sticky bar, so no strip of the
   next section shows between them (Scott, 2026-10-11). 110px is the
   announcement strip plus the mobile nav above the hero. */
@media (max-width: 1023px) {
  .hero { min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); }
}

/* Phones: centre the hero's content in the space between the nav and the
   sticky bar, so tall screens don't leave a gap under the badges; flat
   video card, no drop shadow (Scott, 2026-10-11). */
@media (max-width: 1023px) {
  .hero { display: flex; flex-direction: column; justify-content: center; padding-top: 24px; padding-bottom: 98px; }
  .hero__inner { width: 100%; }
  .hero .card { filter: none; box-shadow: none; }
}

/* Phones: the video card's caption, simplified (Scott, 2026-10-11).
   Name, title, length. The long programme kicker and the stars stay on
   desktop only. */
@media (max-width: 1023px) {
  .card__kicker-long { display: none; }
  .card__caption { gap: 8px; }
  .card__kicker {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.9px;
    white-space: nowrap;
  }
  .card__kicker .dot--sm { margin-top: 0; }
  .card__stars { display: none; }
  .card__meta { gap: 6px; }
  .card__title { font-size: 19px; line-height: 1.2; }
  .card__duration { font-size: 13px; color: var(--stone); }
}

/* Video card caption, cleaned up (Scott approved 2026-10-11): name, title,
   length. No stars, no dots, no "GLP-1 Cycling Program with" kicker. */
.card__kicker-long { display: none; }
.card__caption .dot { display: none; }
.card__stars { display: none; }
.card__kicker { letter-spacing: 0.12em; }
.card__meta { justify-content: space-between; }
.card__meta-text { width: 100%; justify-content: space-between; }
.card__duration { display: inline-flex; align-items: center; gap: 0.5em; color: var(--stone); font-weight: 500; }
.card__duration::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.32em 0 0.32em 0.55em; border-color: transparent transparent transparent var(--burnt-sienna); }
@media (max-width: 1023px) {
  .card__caption { gap: 6px; }
  .card__kicker { font-size: 11px; letter-spacing: 0.12em; }
  .card__meta { gap: 10px; }
  .card__title { font-size: 18px; line-height: 1.25; font-weight: 700; }
  .card__duration { font-size: 13px; }
}

/* Wider left margin for the caption (Scott approved 2026-10-11) */
.card__caption { left: 50%; width: 84cqw; }
.card__meta { width: 100%; }
@media (max-width: 1023px) {
  .card__caption { left: 198px; right: 18px; width: auto; transform: translateY(-50%); }
}
@media (max-width: 374px) {
  .card__caption { left: 164px; right: 14px; }
}

/* Small phones (320 to 400 wide): no sideways scroll. Section titles may
   wrap, and the payment marks drop to a second row. */
@media (max-width: 400px) {
  .section-title__line { white-space: normal; text-wrap: balance; }
  .pricing__pay { flex-wrap: wrap; gap: 8px; }
  .footer__marks { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .hero .card__kicker { letter-spacing: 0.04em; }
}
/* 320-wide phones only: the three badges take two rows rather than scroll */
@media (max-width: 340px) {
  .hero .badges { flex-wrap: wrap; row-gap: 8px; }
  .diff__banner-title, .diff__col--them .diff__banner-title { font-size: 16px; }
  .card__image, .card__video { width: 116px; }
  .card__caption { left: 148px; right: 12px; }
}