/*
 * Reference-faithful homepage finish.
 * The supplied HTML is the visual source of truth. Existing staging copy,
 * section IDs, interactions, and the wider staging canvas stay intact.
 */

.figma-rebuild {
  --reference-container: 80rem;
  --font-display: "Playfair Display", Georgia, serif;
  --font-brand: "Playfair Display", Georgia, serif;
  --font-ui: "Manrope", system-ui, sans-serif;
  --reference-forest: #123e44;
  --reference-forest-deep: #0b2d32;
  --reference-forest-mid: #24565a;
  --reference-cream: #fcfbf7;
  --reference-sage: #b7e4c7;
  --reference-blue: #38a8c8;
  --reference-blue-ink: #0f3338;
  --reference-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-ui);
}

.figma-rebuild :is(h1, h2, h3, .brand-name) {
  font-family: var(--font-display);
}

.figma-rebuild main > #cost-clarity {
  order: 11;
}

.figma-rebuild main > #docs {
  order: 12;
}

.figma-rebuild main > #faq {
  order: 13;
}

.figma-rebuild main > #start {
  order: 14;
}

.figma-rebuild :is(#cost-clarity, #start) {
  scroll-margin-top: 7rem;
}

/* Reference hero */
.figma-rebuild .hero {
  position: relative;
  min-height: 47.5rem;
  padding: 0;
  display: grid;
  overflow: clip;
  color: var(--reference-blue-ink);
  background: var(--reference-blue) !important;
}

.figma-rebuild .hero-inner {
  width: min(calc(100% - 3rem), var(--reference-container));
  min-height: 47.5rem;
  height: auto;
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(30rem, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: visible;
  contain: none;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.figma-rebuild .hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  width: auto;
  max-width: 43rem;
  height: auto;
  align-self: center;
  padding: 5.5rem 4rem 6.625rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  color: inherit;
}

.figma-rebuild .hero .eyebrow {
  order: 0;
  margin: 0 0 1.25rem;
  display: inline-flex;
  color: var(--reference-blue-ink);
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: none;
}

.figma-rebuild .hero .eyebrow::before {
  width: 1.75rem;
  background: currentColor;
  opacity: 1;
}

.figma-rebuild .hero h1 {
  order: 1;
  width: auto;
  max-width: 43rem;
  margin: 0 0 1.75rem;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 5.1vw, 4.9rem);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.figma-rebuild .hero .sub {
  order: 2;
  max-width: 18ch;
  margin: 0 0 1.5rem;
  padding: 0 0 .08em;
  color: var(--reference-blue-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 2.7rem);
  font-style: italic;
  font-synthesis: style;
  font-weight: 450;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.figma-rebuild .hero-qualifier {
  order: 3;
  max-width: 34.375rem;
  margin: 0 0 2rem;
  color: #133e42;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.55;
}

.figma-rebuild .hero-cta {
  order: 4;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.375rem;
}

.figma-rebuild .hero .btn-primary {
  min-height: 3.25rem;
  padding: .8125rem 1.375rem;
  color: #fff;
  background: var(--reference-forest-deep);
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
}

.figma-rebuild .hero .btn-primary:hover {
  background: #061f22;
  transform: translateY(-2px);
}

.figma-rebuild .hero .watch {
  min-height: 3.25rem;
  padding: .625rem .125rem;
  color: var(--reference-blue-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-ui);
  font-weight: 700;
}

.figma-rebuild .hero .watch .pc {
  display: none;
}

.figma-rebuild .hero .stage {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: 2;
  width: 100%;
  min-height: 41.25rem;
  height: auto;
  margin: 3rem 0;
  overflow: hidden;
  background: #d1dee0;
  border-radius: 2.125rem 0 0 2.125rem;
}

.figma-rebuild .hero .stage::after {
  display: none;
}

.figma-rebuild .hero .stage-bg,
.figma-rebuild .hero .stage-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

.figma-rebuild .hero .stage-bg img {
  object-fit: cover;
  object-position: 58% center;
  transform: none;
  transition: transform 1.1s var(--reference-ease);
}

@media (hover: hover) and (pointer: fine) {
  .figma-rebuild .hero:hover .stage-bg img {
    transform: scale(1.015);
  }
}

/* Reference trust band, using the current staging claims */
.figma-rebuild main > .cred:not(.cred--repeated) {
  margin-top: 0;
  color: #fff;
  background: var(--reference-forest-deep);
}

.figma-rebuild main > .cred:not(.cred--repeated) .wrap {
  width: min(calc(100% - 3rem), var(--reference-container));
  min-height: 5.75rem;
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  overflow: visible;
}

.figma-rebuild main > .cred:not(.cred--repeated) span {
  min-height: 2.875rem;
  padding-inline: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .8125rem;
  color: rgba(255, 255, 255, .82);
  border-left: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 650;
  white-space: normal;
}

.figma-rebuild main > .cred:not(.cred--repeated) span:first-child {
  padding-left: 0;
  border-left: 0;
}

.figma-rebuild main > .cred:not(.cred--repeated) svg {
  width: 1.875rem;
  height: 1.875rem;
  padding: .42rem;
  flex: 0 0 1.875rem;
  border: 1px solid rgba(183, 228, 199, .52);
  border-radius: 50%;
}

.figma-rebuild main > .cred svg.cred-number {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  flex: 0 0 1.5rem;
  border: 0;
  border-radius: 0;
}

/* Reference cost section */
.figma-rebuild .reference-cost {
  padding: 9rem 0 9.875rem;
  overflow: visible;
  color: #fff;
  background: var(--reference-forest-deep);
}

.figma-rebuild .reference-cost__inner {
  width: min(calc(100% - 3rem), var(--reference-container));
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(24.375rem, .85fr);
  align-items: start;
  gap: clamp(3.75rem, 10vw, 9.375rem);
}

.figma-rebuild .reference-cost__copy {
  padding: 0;
}

.figma-rebuild .reference-cost .eyebrow {
  margin: 0 0 1.25rem;
  color: var(--reference-sage);
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}

.figma-rebuild .reference-cost .eyebrow::before {
  width: 1.75rem;
  background: currentColor;
}

.figma-rebuild .reference-cost h2 {
  max-width: 50rem;
  margin: 0 0 1.5rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 6.7rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.figma-rebuild .reference-cost__copy > p:not(.eyebrow) {
  max-width: 38.125rem;
  margin: 0 0 2.125rem;
  color: rgba(255, 255, 255, .7);
  font-family: var(--font-ui);
  font-size: 1.08rem;
  line-height: 1.6;
}

.figma-rebuild .reference-cost .btn-soft {
  min-height: 3.25rem;
  padding: .8125rem 1.375rem;
  color: var(--reference-forest-deep);
  background: #fff;
  border-color: transparent;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
}

.figma-rebuild .reference-cost .btn-soft:hover {
  transform: translateY(-2px);
}

.figma-rebuild .reference-cost__panel {
  margin-top: .75rem;
  padding: 2.125rem 2.375rem;
  color: var(--reference-forest-deep);
  background: var(--reference-sage);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.figma-rebuild .reference-cost__label {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--font-ui);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.figma-rebuild .reference-cost__panel h3 {
  max-width: none;
  margin: 0 0 1.5rem;
  color: inherit;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.figma-rebuild .reference-cost__panel ul {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.figma-rebuild .reference-cost__panel li {
  min-height: 0;
  padding: .75rem 0;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: start;
  gap: .625rem;
  border-top: 1px solid rgba(15, 51, 56, .2);
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 650;
}

.figma-rebuild .reference-cost__panel li::before {
  content: "✓";
  font-weight: 800;
}

.figma-rebuild .reference-cost__note {
  max-width: none;
  margin: 0;
  color: rgba(11, 45, 50, .68);
  font-family: var(--font-ui);
  font-size: .72rem;
  line-height: 1.55;
}

/* Reference final CTA */
.figma-rebuild .reference-final-cta {
  padding: 7.875rem 0 8.5rem;
  overflow: visible;
  color: var(--reference-blue-ink);
  background: var(--reference-blue);
  text-align: center;
}

.figma-rebuild .reference-final-cta__inner {
  width: min(calc(100% - 3rem), var(--reference-container));
  margin-inline: auto;
  padding: 0;
}

.figma-rebuild .reference-final-cta .eyebrow {
  margin: 0 0 1.25rem;
  justify-content: center;
  color: inherit;
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}

.figma-rebuild .reference-final-cta .eyebrow::before {
  width: 1.75rem;
}

.figma-rebuild .reference-final-cta h2 {
  max-width: 61.25rem;
  margin: 0 auto 1.5rem;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7vw, 7.7rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.figma-rebuild .reference-final-cta__inner > p:not(.eyebrow) {
  max-width: 35.625rem;
  margin: 0 auto 2.125rem;
  color: #133e42;
  font-family: var(--font-ui);
  font-size: 1.08rem;
  line-height: 1.6;
}

.figma-rebuild .reference-final-cta .btn-primary {
  min-height: 3.25rem;
  padding: .8125rem 1.375rem;
  color: #fff;
  background: var(--reference-forest-deep);
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
}

.figma-rebuild .reference-final-cta .btn-primary:hover {
  background: #061f22;
  transform: translateY(-2px);
}

@media (max-width: 1040px) {
  .figma-rebuild .hero-inner {
    grid-template-columns: minmax(0, .9fr) minmax(25rem, 1.1fr);
  }

  .figma-rebuild .hero h1 {
    font-size: clamp(3.8rem, 7vw, 5.5rem);
  }

  .figma-rebuild .hero .sub {
    padding-left: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.45rem);
  }

  .figma-rebuild .reference-cost__inner {
    gap: 3.4375rem;
  }
}

@media (max-width: 820px) {
  .figma-rebuild .hero,
  .figma-rebuild .hero-inner {
    min-height: 0;
  }

  .figma-rebuild .hero-inner {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .figma-rebuild .hero-copy {
    grid-column: 1;
    width: 100%;
    max-width: none;
    padding: 4.375rem 1.25rem 3rem;
  }

  .figma-rebuild .hero h1 {
    max-width: 45rem;
    font-size: clamp(3.7rem, 15vw, 6rem);
    line-height: .88;
  }

  .figma-rebuild .hero .sub {
    max-width: 15ch;
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .figma-rebuild .hero-qualifier {
    max-width: 34rem;
  }

  .figma-rebuild .hero .stage {
    grid-column: 1;
    width: 100%;
    min-height: 33.75rem;
    margin: 0;
    border-radius: 1.5rem 1.5rem 0 0;
  }

  .figma-rebuild main > .cred:not(.cred--repeated) .wrap {
    width: min(calc(100% - 2.125rem), var(--reference-container));
    min-height: 0;
    padding-block: 1.125rem;
    grid-template-columns: 1fr 1fr;
  }

  .figma-rebuild main > .cred:not(.cred--repeated) span {
    min-height: 3rem;
    padding: .5rem 0;
    border-left: 0;
  }

  .figma-rebuild .reference-cost {
    padding: 6.25rem 0 7rem;
  }

  .figma-rebuild .reference-cost__inner {
    width: min(calc(100% - 2.125rem), var(--reference-container));
    grid-template-columns: 1fr;
    gap: 3.4375rem;
  }

  .figma-rebuild .reference-cost__panel {
    margin-top: 0;
  }

  .figma-rebuild .reference-final-cta__inner {
    width: min(calc(100% - 2.125rem), var(--reference-container));
  }
}

@media (max-width: 560px) {
  .figma-rebuild .hero-copy {
    padding-top: 3.625rem;
  }

  .figma-rebuild .hero h1 {
    font-size: clamp(3.2rem, 16.5vw, 4.8rem);
  }

  .figma-rebuild .hero .sub {
    font-size: clamp(1.85rem, 8.5vw, 2.65rem);
  }

  .figma-rebuild .hero-qualifier {
    font-size: 1rem;
  }

  .figma-rebuild .hero-cta {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .figma-rebuild .hero-cta .btn,
  .figma-rebuild .hero-cta .watch {
    width: 100%;
    justify-content: center;
  }

  .figma-rebuild .hero .stage {
    min-height: 28.75rem;
  }

  .figma-rebuild main > .cred:not(.cred--repeated) .wrap {
    grid-template-columns: 1fr;
  }

  .figma-rebuild main > .cred:not(.cred--repeated) span {
    min-height: 2.625rem;
  }

  .figma-rebuild .reference-cost h2 {
    font-size: clamp(3rem, 14vw, 4.6rem);
  }

  .figma-rebuild .reference-cost__panel {
    padding: 1.75rem 1.5rem;
  }

  .figma-rebuild .reference-final-cta {
    padding: 5.875rem 0 6.5rem;
  }

  .figma-rebuild .reference-final-cta h2 {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .figma-rebuild .reference-final-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .figma-rebuild .hero .stage-bg img,
  .figma-rebuild .hero:hover .stage-bg img {
    transform: none;
    transition: none;
  }
}

/*
 * Editorial type hierarchy
 * Hero display  >  major section title  >  supporting title  >  navigation title.
 * The lab-informed H2 remains an intentional compact exception so its supplied
 * two-line composition holds at every viewport.
 */
.figma-rebuild {
  --heading-family: var(--font-display);
  --heading-weight: 500;
  --type-display-hero: clamp(4.75rem, 6.4vw, 6rem);
  --type-display-section: clamp(3.25rem, 4.45vw, 5rem);
  --type-display-supporting: clamp(2.75rem, 3.5vw, 4rem);
  --type-title: clamp(1.4rem, 1.35vw, 1.85rem);
  --type-title-compact: clamp(1.125rem, 1.05vw, 1.3rem);
  --type-subtitle: clamp(1.05rem, .95vw, 1.2rem);
}

.figma-rebuild :is(h1, h2, h3, h4) {
  font-family: var(--heading-family) !important;
  font-weight: var(--heading-weight) !important;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.figma-rebuild .hero h1 {
  font-size: var(--type-display-hero);
  line-height: .84;
  letter-spacing: -.055em;
}

@media (min-width: 1280px) {
  .figma-rebuild .hero-copy {
    translate: min(0px, max(-5rem, calc(664px - 50vw))) 0;
  }

  .figma-rebuild .hero h1 {
    white-space: nowrap;
  }
}

.figma-rebuild :is(
  .concept-care__header h2,
  .concept-journey h2,
  .supplement-quality-copy h2,
  .care-compare__head h2,
  #pricing .head h2,
  .reference-cost h2,
  .reference-final-cta h2
) {
  font-size: var(--type-display-section);
  line-height: .92;
  letter-spacing: -.05em;
}

@media (min-width: 821px) {
  .figma-rebuild .concept-care__header {
    display: block;
  }

  /* Sized by the shared --type-display-section scale, like every other section
     heading. Fitting this to one line previously shrank it to ~31px, roughly
     half the scale, and left the desktop headings without a common size. */
  .figma-rebuild #care .concept-care__header h2 {
    max-width: none;
    margin: 0;
    line-height: .96;
    letter-spacing: -.05em;
  }
}

.figma-rebuild :is(#docs, #faq) .head h2 {
  font-size: var(--type-display-supporting);
  line-height: .96;
  letter-spacing: -.04em;
}

.figma-rebuild #pricing .head {
  width: min(100%, 70rem);
}

.figma-rebuild #membership-title {
  max-width: none;
}

.figma-rebuild #membership-title > span {
  display: block;
}

.figma-rebuild #docs .head {
  width: min(100%, 72rem);
  max-width: none;
}

@media (min-width: 821px) {
  /* Keeps the #docs/#faq supporting tier, but wraps rather than fitting to one
     line so long titles cannot overrun the column. */
  .figma-rebuild #clinical-team-title {
    max-width: none;
  }
}

.figma-rebuild :is(
  .doc h3,
  #pricing .tier h3,
  .reference-cost__panel h3,
  .supplement-ingredients-head h3,
  .biomarker-system h3
) {
  font-size: var(--type-title);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.figma-rebuild .concept-journey__timeline h3 {
  font-size: clamp(1.25rem, 1.3vw, 1.5rem);
  line-height: 1.25;
}

.figma-rebuild #how #how-title {
  font-size: var(--type-display-section);
  line-height: .98;
}

.figma-rebuild footer .fcol h3,
.figma-rebuild .fcol h4,
.figma-rebuild h4 {
  font-size: var(--type-subtitle);
  line-height: 1.15;
  letter-spacing: -.012em;
}

@media (max-width: 820px) {
  .figma-rebuild {
    --type-display-hero: clamp(4.25rem, 15vw, 5.4rem);
    --type-display-section: clamp(3rem, 11.5vw, 4.7rem);
    --type-display-supporting: clamp(2.75rem, 10vw, 3.75rem);
    --type-title: clamp(1.35rem, 5vw, 1.7rem);
    --type-title-compact: clamp(1.1rem, 4.4vw, 1.25rem);
    --type-subtitle: clamp(1rem, 4vw, 1.125rem);
  }

  .figma-rebuild #membership-title {
    font-size: clamp(2rem, 8.5vw, 4rem);
  }

  .figma-rebuild #how #how-title {
    font-size: clamp(2.75rem, 11vw, 3.4rem);
  }

  .figma-rebuild .concept-journey__timeline h3 {
    font-size: clamp(1.25rem, 4.8vw, 1.4rem);
  }
}

@media (max-width: 560px) {
  .figma-rebuild {
    --type-display-hero: clamp(4.1rem, 18vw, 5rem);
    --type-display-section: clamp(2.9rem, 12vw, 4rem);
    --type-display-supporting: clamp(2.65rem, 10.5vw, 3.4rem);
  }
}

/*
 * Readability floor
 * Primary reading copy never falls below 16px. Supporting copy stays at
 * 14.4px or larger, while labels and required legal metadata stay at 13px+.
 */
.figma-rebuild {
  --copy-reading: clamp(1rem, .92vw, 1.075rem);
  --copy-supporting: clamp(.9375rem, .87vw, 1rem);
  --copy-metadata: clamp(.8125rem, .76vw, .875rem);
}

.figma-rebuild :is(
  .concept-care__intro p,
  .concept-journey__lead,
  .concept-baseline__intro,
  .supplement-quality-answer,
  #pricing .head > p,
  #docs .head > p,
  .provider-bio,
  .reference-cost__copy > p:not(.eyebrow),
  .reference-final-cta__inner > p:not(.eyebrow)
) {
  font-size: var(--copy-reading);
  line-height: 1.65;
}

.figma-rebuild :is(
  .nav-links a,
  .btn,
  .watch,
  .promo,
  .concept-journey__timeline p,
  .concept-baseline__systems li,
  #pricing .tier .desc,
  #pricing .tier ul,
  #pricing .tier-best,
  #pricing .tier-cadence,
  .reference-cost__panel li,
  .care-compare__table,
  .trust-links a,
  footer a,
  footer p,
  footer .addr,
  footer .f-disc
) {
  font-size: var(--copy-supporting);
}

.figma-rebuild .concept-journey__timeline p {
  color: rgba(255, 255, 255, .74);
  line-height: 1.6;
}

.figma-rebuild :is(
  .hero .eyebrow,
  .concept-care .eyebrow,
  .concept-journey .eyebrow,
  .concept-baseline .eyebrow,
  .supplement-quality .eyebrow,
  .care-compare__eyebrow,
  #pricing .tier-kicker,
  #docs .eyebrow,
  #faq .eyebrow,
  .reference-cost .eyebrow,
  .reference-final-cta .eyebrow,
  .concept-care__note,
  .care-compare__note,
  .care-compare__swipe,
  .supplement-quality-scope,
  .reference-cost__note,
  .reference-cost__label,
  .doc .cred-t,
  #pricing .pricing-note,
  #pricing .tier-detail
) {
  font-size: var(--copy-metadata);
  line-height: 1.55;
}

.figma-rebuild :is(.concept-care__note, .care-compare__note) {
  color: rgba(31, 48, 45, .7);
}

.figma-rebuild :is(
  .concept-care__note,
  .care-compare__note,
  .supplement-quality-scope,
  .reference-cost__note,
  .doc .cred-t,
  #pricing .pricing-note
) {
  font-size: var(--copy-supporting);
}

.figma-rebuild #main .care-compare__note {
  font-size: .75rem;
}

.figma-rebuild #pricing .tier-best span {
  font-size: .8125rem;
  line-height: 1.3;
}

.figma-rebuild #pricing .tier--club .tier-price span,
.figma-rebuild .concept-journey__number {
  font-size: .8125rem;
}

.figma-rebuild .ingredient-carousel-thumbnail {
  font-size: var(--copy-metadata);
  line-height: 1.25;
}

.figma-rebuild .ingredient-carousel-caption span {
  font-size: .8125rem;
  line-height: 1.3;
}

.figma-rebuild .ingredient-carousel-caption strong {
  font-size: 1rem;
}

.figma-rebuild .supplement-pdf-open {
  font-size: .875rem;
  line-height: 1.25;
}

.figma-rebuild main > .cred:not(.cred--repeated) span,
.figma-rebuild main > .cred:not(.cred--repeated) a,
.figma-rebuild main > .cred.cred--repeated span,
.figma-rebuild main > .cred.cred--repeated a {
  font-size: var(--copy-supporting);
  line-height: 1.45;
}

.figma-rebuild .care-compare__table :is(th, td) {
  font-size: var(--copy-supporting);
  line-height: 1.5;
}

/*
 * Full-bleed photographic hero
 * The supplied runner image owns the complete banner. Its dominant cyan is
 * also the fallback and closing-CTA color, preventing a visible color seam.
 */
.figma-rebuild .hero {
  min-height: 47.5rem;
  background: var(--reference-blue) !important;
}

.figma-rebuild .hero-inner {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 47.5rem;
  display: block;
  overflow: hidden;
}

.figma-rebuild .hero-copy {
  width: min(calc(50vw - 1.5rem), 43rem);
  max-width: 43rem;
  margin-left: max(1.5rem, calc((100vw - 90rem) / 2));
  translate: none;
}

.figma-rebuild .hero h1 {
  color: #fff;
  text-shadow: 0 .125rem 1.75rem rgba(11, 45, 50, .18);
}

.figma-rebuild .hero .stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  grid-column: auto;
  width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  background: var(--reference-blue);
  border-radius: 0;
}

.figma-rebuild .hero .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(56, 168, 200, .2) 0%,
    rgba(56, 168, 200, .06) 38%,
    transparent 62%
  );
}

.figma-rebuild .hero .stage-bg img {
  object-fit: cover;
  object-position: center center;
}

.figma-rebuild .hero .stage-bg {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 820px) {
  .figma-rebuild .hero,
  .figma-rebuild .hero-inner {
    min-height: 43rem;
  }

  .figma-rebuild .hero-copy {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .figma-rebuild .hero .stage {
    min-height: 100%;
    border-radius: 0;
  }

  .figma-rebuild .hero .stage::after {
    background: linear-gradient(
      90deg,
      rgba(56, 168, 200, .92) 0%,
      rgba(56, 168, 200, .78) 47%,
      rgba(56, 168, 200, .15) 100%
    );
  }

  .figma-rebuild .hero .stage-bg img {
    object-fit: cover;
    object-position: 72% center;
  }
}

/*
 * iPhone composition
 * Keep the editorial scale and cinematic photography while reducing vertical
 * drag, preserving tap targets, and preventing fixed controls from obscuring
 * the reading flow.
 */
@media (max-width: 640px) {
  .figma-rebuild {
    --type-display-section: clamp(2.35rem, 10vw, 2.65rem);
    --type-display-supporting: clamp(2.2rem, 9.4vw, 2.5rem);
  }

  html {
    scroll-padding-top: calc(4.5rem + env(safe-area-inset-top));
  }

  .figma-rebuild main section[id] {
    scroll-margin-top: calc(4.5rem + env(safe-area-inset-top));
  }

  .figma-rebuild .hero,
  .figma-rebuild .hero-inner {
    min-height: 42rem;
  }

  .figma-rebuild .hero-copy {
    padding: 3.25rem max(1.25rem, env(safe-area-inset-right)) 2.75rem max(1.25rem, env(safe-area-inset-left));
  }

  .figma-rebuild .hero h1 {
    max-width: none;
    font-size: clamp(2.3rem, 11vw, 2.8rem);
    line-height: .9;
    letter-spacing: -.052em;
  }

  .figma-rebuild .hero .sub {
    max-width: 14ch;
    margin-top: 1.5rem;
    font-size: clamp(1.72rem, 7.2vw, 2rem);
    line-height: 1.02;
  }

  .figma-rebuild .hero-qualifier {
    max-width: 31rem;
    margin-top: 1.75rem;
  }

  .figma-rebuild .hero-cta {
    margin-top: 1.75rem;
  }

  .figma-rebuild .hero .stage-bg img {
    object-position: 70% center;
  }

  .figma-rebuild main > .cred:not(.cred--repeated) .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    padding-block: .75rem;
  }

  .figma-rebuild main > .cred:not(.cred--repeated) span {
    min-height: 3.25rem;
    align-items: center;
  }

  .figma-rebuild .concept-care {
    padding-block: 4.5rem;
    overflow: hidden;
  }

  .figma-rebuild .concept-care__header {
    gap: 1.25rem;
  }

  .figma-rebuild .concept-care__header h2 {
    font-size: var(--type-display-section);
  }

  .figma-rebuild .concept-care .lifestyle-grid {
    width: auto;
    margin: 2.25rem calc(0px - max(1rem, env(safe-area-inset-right))) 0 calc(0px - max(1rem, env(safe-area-inset-left)));
    padding: 0 max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 19rem);
    gap: .875rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: max(1rem, env(safe-area-inset-left));
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .figma-rebuild .concept-care .lifestyle-grid::-webkit-scrollbar {
    display: none;
  }

  .figma-rebuild .concept-care .lifestyle-card,
  .figma-rebuild .concept-care .lifestyle-card--sexual,
  .figma-rebuild .concept-care .lifestyle-card--hormones,
  .figma-rebuild .concept-care .lifestyle-card--metabolic,
  .figma-rebuild .concept-care .lifestyle-card--recovery,
  .figma-rebuild .concept-care .lifestyle-card--longevity,
  .figma-rebuild .concept-care .lifestyle-card--skin {
    grid-column: auto;
    width: auto;
    height: auto;
    min-height: 25rem;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .figma-rebuild .concept-care .lifestyle-card__label strong {
    font-size: clamp(2.35rem, 10vw, 3rem);
  }

  .figma-rebuild #pricing .head {
    width: 100%;
  }

  .figma-rebuild #pricing .head #membership-title {
    width: 100%;
    max-width: none;
    font-size: clamp(1.85rem, 7.8vw, 2.1rem);
    line-height: .98;
    letter-spacing: -.045em;
  }

  .figma-rebuild #membership-title > span {
    white-space: nowrap;
  }

  .figma-rebuild .sticky {
    bottom: calc(.625rem + env(safe-area-inset-bottom));
    width: calc(100% - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)));
    min-height: 3.5rem;
    padding: .35rem;
    border-radius: 999px;
  }

  .figma-rebuild .sticky-note {
    display: none;
  }

  .figma-rebuild #sticky .btn {
    width: 100%;
    max-width: none;
    min-height: 2.8rem;
    justify-content: center;
    font-size: 16px;
    white-space: nowrap;
  }
}

@media (max-width: 374px) {
  .figma-rebuild {
    --type-display-section: 2.15rem;
    --type-display-supporting: 2.05rem;
  }

  .figma-rebuild .hero h1 {
    font-size: clamp(2.25rem, 11vw, 2.55rem);
  }

  .figma-rebuild .care-compare__head h2#care-comparison-title {
    font-size: 1.8rem;
  }

  .figma-rebuild #pricing .head #membership-title {
    font-size: 1.58rem;
  }
}

/* Preserve the requested journey scale after the shared readability floor. */
.figma-rebuild #how.concept-journey .concept-journey__timeline p {
  font-size: clamp(1.1rem, 1.1vw, 1.25rem);
}

.figma-rebuild .concept-journey__number {
  font-size: .875rem;
}

/* Owner-approved care goal ordering and tile scale. */
@media (min-width: 821px) {
  .figma-rebuild .lifestyle-grid--goals {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card {
    height: clamp(29rem, 38vw, 38rem);
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--wide {
    grid-column: span 12;
    height: clamp(34.8rem, 45.6vw, 45.6rem);
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--brain,
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--recovery,
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--longevity {
    grid-column: span 7;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--hormones,
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--sexual,
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--skin {
    grid-column: span 5;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card__label strong {
    max-width: none;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--hormones strong,
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--sexual strong,
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--skin strong {
    font-size: clamp(1.45rem, 2.65vw, 3rem);
    white-space: nowrap;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--wide strong {
    font-size: clamp(2.6rem, 4.3vw, 4.75rem);
  }

  .figma-rebuild .concept-care .lifestyle-grid--goals .lifestyle-card.lifestyle-card--muscle strong {
    max-width: none;
    font-size: clamp(1.15rem, 2.2vw, 2.35rem);
    letter-spacing: -.05em;
    white-space: nowrap;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card__image--brain {
    object-position: 50% 30%;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card__image--muscle {
    object-position: 72% 50%;
  }
}

@media (max-width: 820px) {
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card.lifestyle-card--muscle .lifestyle-card__label strong {
    max-width: none;
    font-size: clamp(.68rem, 2.8vw, .8rem);
    letter-spacing: -.05em;
    white-space: nowrap;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--hormones strong,
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--skin strong {
    max-width: none;
    font-size: clamp(1.35rem, 6vw, 1.65rem);
    white-space: nowrap;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card--sexual strong {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.5rem);
    white-space: nowrap;
  }
}

/* Care gallery: lead with GLP-1 weight loss, then preserve the editorial 7/5 rhythm. */
.lifestyle-card--glp1 {
  grid-column: 1 / -1;
}

.lifestyle-card--muscle {
  grid-column: 1 / -1;
}

.lifestyle-card__image--glp1 {
  object-position: 50% 48%;
}

@media (min-width: 821px) {
  .figma-rebuild #docs .docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .figma-rebuild .concept-care .lifestyle-grid {
    grid-template-rows:
      clamp(368px, 38vw, 560px)
      clamp(368px, 34vw, 490px)
      clamp(448px, 42vw, 605px)
      clamp(368px, 34vw, 490px);
  }

  .figma-rebuild .concept-care .lifestyle-card--glp1 {
    grid-column: 1 / -1;
  }

  .figma-rebuild .concept-care .lifestyle-card--muscle {
    grid-column: 1 / -1;
  }

  .figma-rebuild .concept-care .lifestyle-card--sexual {
    grid-column: span 5;
  }

  .figma-rebuild .concept-care .lifestyle-grid--goals {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
}