/* ============================================================
   Assurances strip
   ============================================================ */

.assurances {
  padding-block: var(--s-16);
  background: var(--bg-sunken);
  border-block: 1px solid var(--border-subtle);
}

.assurances__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-1);
}

.assurance {
  padding-inline: clamp(var(--s-4), 2.5vw, var(--s-8));
  padding-block: var(--s-2);
}

/* Dividers between columns rather than around them — one line doing the
   work of a border on each card. */
.assurance + .assurance {
  border-left: 1px solid var(--border);
}

.assurance__icon {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--detail);
  box-shadow: var(--sh-xs);
}

.assurance h3 {
  margin-top: var(--s-5);
  font-size: var(--t-h4);
  font-weight: 600;
}

.assurance p {
  margin-top: var(--s-2);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 24rem;
}

@media (max-width: 56rem) {
  .assurances__grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .assurance {
    padding-inline: 0;
  }
  .assurance + .assurance {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--s-8);
  }
}

/* ============================================================
   Category grid
   ============================================================ */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

.cat-grid > li {
  display: flex;
}

.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--s-6);
  overflow: hidden;
}

/* A soft accent wash that fades up from the bottom on hover. Opacity
   only — no layout, no colour shift on the text. */
.cat::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, var(--a-50), transparent);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
  pointer-events: none;
}

.cat:hover::after {
  opacity: 1;
}

.cat > * {
  position: relative;
  z-index: 1;
}

.cat__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  background: var(--detail-soft);
  color: var(--detail);
  transition:
    background-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease);
}

.cat:hover .cat__icon {
  background: var(--detail-hover);
  color: var(--n-0);
}

.cat__name {
  margin-top: var(--s-5);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  /* Two-word names wrap; the balance keeps "Women's Hormonal / Health"
     from breaking as "Women's / Hormonal Health". */
  text-wrap: balance;
}

.cat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  /* Pushes the footer to the bottom so every card's baseline aligns
     even though one name wraps to two lines and the rest don't. */
  margin-top: auto;
  padding-top: var(--s-8);
}

.cat__count {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-subtle);
}

.cat__arrow {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-subtle);
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

.cat:hover .cat__arrow {
  background: var(--detail-hover);
  border-color: var(--detail-hover);
  color: var(--n-0);
  transform: translateX(2px);
}

/* ---------- Featured ---------- */

.cat--featured {
  border-color: var(--a-200);
  background: linear-gradient(180deg, var(--a-50), var(--surface) 58%);
}

.cat__tag {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  padding: 0.1875rem var(--s-2);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--n-0);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 2;
}

/* ---------- Responsive ---------- */

@media (max-width: 72rem) {
  .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 54rem) {
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .cat-grid {
    grid-template-columns: 1fr;
  }
  .cat {
    padding: var(--s-5);
  }
  .cat__foot {
    padding-top: var(--s-5);
  }
}

/* ============================================================
   How it works
   ============================================================ */

.how__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8);
}

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

.step__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.step__num {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--detail);
  font-variant-numeric: tabular-nums;
}

/* Dashed rule running out of each step number toward the next one.
   Suppressed on the last step so the sequence visibly terminates. */
.step__line {
  flex: 1;
  height: 1px;
  background-image: linear-gradient(to right, var(--border-strong) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

.step:last-child .step__line {
  background-image: linear-gradient(to right, var(--border-strong), transparent);
}

.step__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--sh-xs);
}

.step__title {
  margin-top: var(--s-4);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.step__body {
  margin-top: var(--s-2);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.step__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-subtle);
}

.step__meta svg {
  color: var(--n-400);
  flex-shrink: 0;
}

@media (max-width: 68rem) {
  .how__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-10) var(--s-8);
  }
}

@media (max-width: 40rem) {
  .how__grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }
  .step__meta {
    padding-top: var(--s-4);
  }
}

/* ============================================================
   Why RxStore (bento)
   ============================================================ */

/* Bento: one tall lead card holding the left half, with a 2x2 of smaller
   cards to its right. The asymmetry is what stops five benefits from
   reading as a spreadsheet. */
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

.why-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
}

/* ---------- Lead card: photographic ----------
   The photograph is dark, so this card inverts rather than trying to
   hold dark text over it. Two stacked pseudo-elements inside an
   isolated stacking context: the image on -2, a dark scrim on -1, the
   real content above both. isolation keeps the negative z-indexes from
   escaping behind the section. */

.why-card--lead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: span 2;
  grid-row: span 2;
  min-height: 22rem;
  /* Shows through until the image decodes, so the white text is never
     briefly invisible against the default light card. */
  background: var(--n-900);
  border-color: color-mix(in oklab, var(--n-900) 40%, transparent);
}

.why-card--lead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../assets/why-provider.jpg') 52% 42% / cover no-repeat;
  /* The source is warm brown against a cool page. Desaturating and
     cooling it slightly settles it beside the blue accent. */
  filter: saturate(0.62) brightness(0.94) contrast(1.02);
}

/* Near-clear at the top so the photograph reads, opaque at the bottom
   where the heading and body sit. The tint is --n-900 rather than black,
   which keeps the shadow in the same blue family as the rest of the page. */
.why-card--lead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--n-900) 18%, transparent) 0%,
      color-mix(in oklab, var(--n-900) 42%, transparent) 38%,
      color-mix(in oklab, var(--n-900) 88%, transparent) 72%,
      color-mix(in oklab, var(--n-900) 96%, transparent) 100%
    ),
    linear-gradient(105deg, color-mix(in oklab, var(--n-900) 45%, transparent) 0%, transparent 62%);
}

.why-card--lead h3 {
  color: var(--n-0);
}

/* Pure white at 95%. Sits just under the solid-white heading, which
   keeps the two levels distinct without introducing a second colour. */
.why-card--lead p {
  color: color-mix(in oklab, var(--n-0) 95%, transparent);
}

/* The card no longer lifts on hover — it has no shadow to deepen — so the
   image drifts in a little instead. */
.why-card--lead::before {
  transition: transform var(--d-slow) var(--ease), filter var(--d-slow) var(--ease);
}

.why-card--lead:hover::before {
  transform: scale(1.03);
  filter: saturate(0.7) brightness(0.98) contrast(1.02);
}

.why-card__icon {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
}

.why-card__icon--accent {
  background: var(--detail);
  border-color: var(--detail);
  color: var(--n-0);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--e-500) 34%, transparent);
}

.why-card h3 {
  margin-top: var(--s-5);
  font-size: var(--t-h4);
  font-weight: 600;
}

.why-card p {
  margin-top: var(--s-2);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 32rem;
}

/* The lead card is twice as tall as the ones beside it, so its copy is
   pushed to the bottom edge. Top-aligned text in a tall card looks like
   a short card that got stretched; bottom-aligned looks intended. */
.why-card--lead h3 {
  margin-top: auto;
  padding-top: var(--s-10);
}

.why-card--lead h3,
.why-card--lead p {
  max-width: 26rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 72rem) {
  .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Below two columns the lead card can no longer span a 2x2 block. It
     keeps a min-height and its bottom-pinned copy though — that is what
     makes it read as a photo card rather than a text card that happens
     to have an image behind it. */
  .why-card--lead {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 19rem;
  }
}

@media (max-width: 44rem) {
  .why__grid {
    grid-template-columns: 1fr;
  }
  .why-card--lead {
    grid-column: span 1;
  }
  .why-card {
    padding: var(--s-5);
  }
}

/* ============================================================
   Stats band (dark)
   ============================================================ */

/* A dark band between two light sections. Pure rhythm — it gives the eye
   somewhere to rest and stops the page reading as one long scroll of
   white cards. */
.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
  background: var(--surface-invert);
  color: var(--text-invert);
  isolation: isolate;
}

.band__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--n-0) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--n-0) 7%, transparent) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent 75%);
}

.band__glow {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(60rem, 110%);
  height: 22rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, color-mix(in oklab, var(--e-500) 22%, transparent), transparent 68%);
  filter: blur(50px);
  pointer-events: none;
}

.band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8) var(--s-4);
}

.band__item {
  padding-inline: var(--s-4);
}

.band__item + .band__item {
  border-left: 1px solid color-mix(in oklab, var(--n-0) 12%, transparent);
}

.band__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 2vw, 3.1rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--n-0) 30%, color-mix(in oklab, var(--a-200) 70%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.band__label {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--n-0);
}

.band__sub {
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: color-mix(in oklab, var(--n-0) 55%, transparent);
  max-width: 15rem;
}

@media (max-width: 62rem) {
  .band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .band__item:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 34rem) {
  .band__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .band__item {
    padding-inline: 0;
  }
  .band__item + .band__item {
    border-left: 0;
    border-top: 1px solid color-mix(in oklab, var(--n-0) 12%, transparent);
    padding-top: var(--s-6);
  }
  .band__sub {
    max-width: none;
  }
}

/* ============================================================
   Reviews
   ============================================================ */

.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}

.reviews__score {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  flex-shrink: 0;
}

.reviews__score-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.reviews__score p {
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  color: var(--text-subtle);
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--warn-500);
}

/* ---------- Grid ---------- */

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.reviews__grid > li {
  display: flex;
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--s-6);
  overflow: hidden;
}

/* Oversized quote mark, clipped by the card and set very low in contrast.
   It's texture, not punctuation. */
.review__mark {
  position: absolute;
  top: -1.75rem;
  right: 0.75rem;
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 1;
  color: var(--n-100);
  pointer-events: none;
  user-select: none;
}

.review > *:not(.review__mark) {
  position: relative;
  z-index: 1;
}

.review blockquote {
  margin-top: var(--s-4);
}

.review blockquote p {
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--text);
  letter-spacing: -0.008em;
}

.review__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-6);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--detail-soft);
  color: var(--e-700);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  flex-shrink: 0;
}

.review__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.review__cat {
  margin-left: auto;
  padding: 0.25rem var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 66rem) {
  .reviews__grid {
    grid-template-columns: 1fr;
    max-width: 40rem;
  }
}

@media (max-width: 40rem) {
  .reviews__head {
    align-items: flex-start;
    gap: var(--s-6);
  }
  .reviews__score {
    padding: var(--s-4);
  }
  .review__foot {
    flex-wrap: wrap;
  }
  .review__cat {
    margin-left: 0;
  }
}

/* ============================================================
   FAQ accordion
   ============================================================ */

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: start;
}

.faq__aside-sticky {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-8));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faq__aside-sticky h2 {
  margin-top: var(--s-4);
}

.faq__aside-body {
  margin-top: var(--s-4);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 24rem;
}

/* ---------- List ---------- */

.faq__list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item__heading {
  font: inherit;
  letter-spacing: normal;
}

.faq-item__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-5) var(--s-1);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 550;
  letter-spacing: -0.018em;
  line-height: 1.4;
  color: var(--text);
  transition: color var(--d-base) var(--ease);
  border-radius: var(--r-sm);
}

.faq-item__trigger:hover {
  color: var(--detail);
}

.faq-item--open .faq-item__trigger {
  color: var(--text);
  padding-bottom: var(--s-3);
}

.faq-item__sign {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  flex-shrink: 0;
  transition:
    transform var(--d-slow) var(--ease),
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease);
}

.faq-item__trigger:hover .faq-item__sign {
  border-color: var(--detail);
  color: var(--detail);
}

/* The plus rotates 135° into an ×. Rotating rather than swapping glyphs
   keeps the state change continuous. */
.faq-item--open .faq-item__sign {
  transform: rotate(135deg);
  background: var(--detail);
  border-color: var(--detail);
  color: var(--n-0);
}

/* ---------- Panel ---------- */

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--ease);
}

.faq-item--open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
}

.faq-item__panel-inner p {
  padding: 0 var(--s-12) var(--s-6) var(--s-1);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

.faq-item--open .faq-item__panel-inner p {
  opacity: 1;
  transform: none;
  transition-delay: 90ms;
}

/* ---------- Responsive ---------- */

@media (max-width: 60rem) {
  .faq__inner {
    grid-template-columns: 1fr;
  }
  .faq__aside-sticky {
    position: static;
  }
}

@media (max-width: 40rem) {
  .faq-item__trigger {
    font-size: 1.0625rem;
    gap: var(--s-4);
  }
  .faq-item__panel-inner p {
    padding-right: var(--s-4);
  }
}

/* ============================================================
   Closing CTA
   ============================================================ */

.cta__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--gutter);
  border-radius: var(--r-2xl);
  /* Runs the other way now. The old gradient went n-900 -> a-800 -> a-700,
     which was fine when a-700 was a bright blue; with the navy ramp all
     three land within a few points of black and the gradient disappears.
     This climbs out of near-black into the brand navy, lifted at the far
     end so there is visible travel across the card. */
  background: linear-gradient(
    148deg,
    var(--a-800) 0%,
    var(--a-600) 46%,
    color-mix(in oklab, var(--a-400) 34%, var(--a-500)) 100%
  );
  color: var(--text-invert);
  text-align: center;
  box-shadow: 0 24px 60px color-mix(in oklab, var(--a-800) 34%, transparent);
}

.cta__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--n-0) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--n-0) 8%, transparent) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, #000, transparent 72%);
}

.cta__glow {
  position: absolute;
  z-index: -1;
  top: -40%;
  left: 50%;
  width: 40rem;
  height: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in oklab, var(--a-400) 40%, transparent), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}

.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40rem;
  margin-inline: auto;
}

.cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.375rem var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--n-0) 22%, transparent);
  background: color-mix(in oklab, var(--n-0) 8%, transparent);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--detail-on-dark);
}

.cta__card h2 {
  margin-top: var(--s-6);
  color: var(--n-0);
}

.cta__lead {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: color-mix(in oklab, var(--n-0) 72%, transparent);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.cta__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-8);
}

.cta__points li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: color-mix(in oklab, var(--n-0) 66%, transparent);
}

.cta__points svg {
  color: var(--e-300);
  flex-shrink: 0;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* The extra bottom padding is where the wordmark lives. */
  padding-block: clamp(4rem, 3rem + 4vw, 6.5rem) clamp(4.5rem, 10vw, 8.5rem);
  background: var(--bg-sunken);
  border-top: 1px solid var(--border);
}

/* A soft accent bloom low and centred, sitting behind the wordmark. It is
   the only thing giving the footer depth — without it a flat grey panel
   under a dark CTA card reads as an afterthought. */
.footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -12rem;
  width: min(66rem, 120%);
  height: 22rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, color-mix(in oklab, var(--a-200) 42%, transparent), transparent 70%);
  filter: blur(45px);
  pointer-events: none;
}

/* Two link columns instead of three, so the brand side takes the larger
   share. Left at 1fr/1.6fr the two remaining columns would each be ~320px
   wide holding ~130px of text, which reads as unfinished rather than airy. */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
}

/* ---------- Brand ---------- */

/* Sized off height so the lockup's own aspect drives the width. 15rem is the
   floor at which its smallest line ("PEPTIDES / GLP-1 / WELLNESS") still
   renders around 8px and stays legible. */
.footer__logo {
  height: clamp(11rem, 17vw, 15rem);
  width: auto;
}

.footer__tagline {
  margin-top: var(--s-5);
  max-width: 26rem;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Pills rather than a stacked list. They read as credentials instead of
   bullet points, and wrapping onto two rows instead of three brings the
   brand column closer in height to the link columns beside it. */
.footer__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
  max-width: 26rem;
}

.footer__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4375rem 0.8125rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-xs);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.003em;
  color: var(--text-muted);
  white-space: nowrap;
}

.footer__trust svg {
  color: var(--detail);
  flex-shrink: 0;
}

/* .btn is inline-flex, so this hugs its label rather than filling the
   brand column. The extra top margin separates it from the trust list
   above without needing a rule. */
.footer__cta {
  margin-top: var(--s-8);
}

/* ---------- Link columns ---------- */

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8) var(--s-4);
}

/* A hairline over each column, aligned with the top of the logo opposite.
   Editorial footers use this instead of boxing anything — it organises the
   columns with one rule each and no borders. */
.footer__col {
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-strong);
}

.footer__col h3 {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* inline-block so the underline below measures the label, not the column. */
.footer__col a {
  position: relative;
  display: inline-block;
  font-size: var(--t-base);
  color: var(--text-muted);
  transition: color var(--d-base) var(--ease);
}

/* Underline wipes in from the left rather than appearing all at once. */
.footer__col a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease);
}

.footer__col a:hover {
  color: var(--detail);
}

.footer__col a:hover::after {
  transform: scaleX(1);
}

/* ---------- Bottom ---------- */

.footer__rule {
  margin-block: var(--s-12) var(--s-8);
}

/* The rule already provides the gap above; a margin here as well would
   double it now that the disclaimer no longer sits between them. */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-subtle);
}

/* Gives the bottom row a right-hand anchor. Left alone it was a single
   line of copyright floating against a lot of empty space. */
.footer__totop {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--text-muted);
  transition: color var(--d-base) var(--ease);
}

.footer__totop-icon {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease);
}

.footer__totop:hover {
  color: var(--detail);
}

.footer__totop:hover .footer__totop-icon {
  background: var(--detail);
  border-color: var(--detail);
  color: var(--n-0);
}

/* The arrow lifts out of the circle on hover — same 3px nudge the button
   arrows use, rotated 90 degrees. */
.footer__totop-icon svg {
  transition: transform var(--d-base) var(--ease);
}

.footer__totop:hover .footer__totop-icon svg {
  transform: translateY(-2px);
}

/* ---------- Wordmark ---------- */

/* Clipped by the footer's bottom edge and faded with a gradient text fill,
   so it registers as a watermark rather than a word someone forgot to
   delete. Sized in vw so it always spans roughly the same share of the
   page regardless of viewport. */
.footer__watermark {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vw, 11rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.8;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--n-300) 62%, transparent) 0%,
    transparent 82%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Responsive ---------- */

@media (max-width: 70rem) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 44rem) {
  /* The bottom row stacks, so the back-to-top control would otherwise sit
     tight under the copyright line. */
  .footer__bottom {
    gap: var(--s-6);
  }
  /* Below this width the wordmark is wider than the viewport and would be
     clipped on both sides into an unreadable fragment. */
  .footer__watermark {
    bottom: -1.25rem;
    font-size: 22vw;
  }
}