/*
 * REMAKE-only launch adaptations.
 * These rules preserve the approved branch design while keeping responsive
 * waitlist handoffs comfortably tappable inside the isolated iframe.
 */
.figma-rebuild [data-waitlist] {
  min-height: 2.75rem;
}

/* Keep the care prompt secondary to the quiz categories, then give every
   category title the same visual weight regardless of card width. */
.figma-rebuild #care .concept-care__header {
  display: block;
  text-align: center;
}

.figma-rebuild #care .concept-care__header > div {
  width: 100%;
}

.figma-rebuild #care .concept-care__header h2 {
  max-width: 30ch;
  margin-inline: auto;
  font-size: clamp(2.5rem, 3.8vw, 3.5rem);
  text-align: center;
}

.figma-rebuild .hero .sub {
  position: relative;
  top: clamp(.5rem, .8vw, .875rem);
}

/* Shorten the original 1122 × 1402 portrait frame by 25%. Cropping from the
   bottom preserves each provider's headroom and lands the composition around
   mid-chest without modifying the approved source portraits. */
.figma-rebuild #docs .doc .media {
  aspect-ratio: 16 / 15;
  overflow: hidden;
}

.figma-rebuild #docs .doc .media img {
  object-fit: cover;
  object-position: center top;
}

/* Keep the actions visually tied to the horizon without shifting the hero
   headline or mobile composition. */
@media (min-width: 821px) and (min-height: 600px) {
  .figma-rebuild .hero-cta {
    position: relative;
    top: clamp(2rem, 3.5vw, 3.5rem);
  }
}

.figma-rebuild .concept-care .lifestyle-grid--goals .lifestyle-card .lifestyle-card__label strong {
  max-width: 14ch;
  font-size: clamp(2.8rem, 3vw, 3.6rem);
  line-height: .94;
  letter-spacing: -.045em;
  white-space: normal;
  text-wrap: balance;
}

.figma-rebuild .concept-care .lifestyle-grid--goals .lifestyle-card:is(
  .lifestyle-card--hormones,
  .lifestyle-card--skin,
  .lifestyle-card--muscle
) .lifestyle-card__label strong {
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
}

.figma-rebuild .concept-care .lifestyle-grid--goals .lifestyle-card:is(
  .lifestyle-card--hormones,
  .lifestyle-card--skin
) .lifestyle-card__label strong {
  font-size: clamp(1.9rem, 2vw, 2.6rem);
}

@media (max-width: 820px) {
  .figma-rebuild #care .concept-care__header h2 {
    font-size: clamp(2rem, 8.5vw, 2.75rem);
  }

  .figma-rebuild .concept-care .lifestyle-grid--goals .lifestyle-card .lifestyle-card__label strong {
    max-width: 14ch;
    font-size: clamp(1.9rem, 8vw, 2.35rem);
    line-height: .94;
    letter-spacing: -.045em;
    white-space: normal;
  }

  .figma-rebuild .mobile-actions [data-waitlist],
  .figma-rebuild .sticky [data-waitlist] {
    justify-content: center;
  }

  .figma-rebuild .lifestyle-grid--goals .lifestyle-card:is(
    .lifestyle-card--hormones,
    .lifestyle-card--skin
  ) .lifestyle-card__label strong {
    max-width: none;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
    white-space: nowrap;
    text-wrap: nowrap;
  }

  /* Match the vendored muscle selector's higher specificity and size the long
     label to remain on one line inside the mobile card. */
  .figma-rebuild .lifestyle-grid--goals .lifestyle-card.lifestyle-card--muscle .lifestyle-card__label strong {
    max-width: none;
    font-size: clamp(1.05rem, 4.8vw, 1.4rem);
    letter-spacing: -.045em;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/*
 * iPhone / mobile Safari finish.
 *
 * The public experience is displayed inside a viewport-sized iframe, so the
 * inner document must own its safe areas and compact browser chrome without
 * relying on the parent page. Keep these rules in the REMAKE adaptation layer:
 * the vendored source remains immutable and the staging handoffs stay intact.
 */
@media (max-width: 640px) {
  .figma-rebuild .ingredient-browser__catalog-link {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .figma-rebuild .ingredient-browser__intro h2 {
    white-space: normal;
  }

  .figma-rebuild .concept-journey__media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
  }

  /* Every trust bar wraps inside the two-column mobile grid. The repeated bar
     keeps `white-space: nowrap` from the unmediated `.figma-rebuild .cred span`
     rule, so without this it overruns its cell and collides with its neighbour. */
  .figma-rebuild main > .cred :is(span, a) {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .figma-rebuild .f-top > * {
    min-width: 0;
  }

  .figma-rebuild .f-brand .footer-logo {
    max-width: 100%;
  }

  .figma-rebuild main,
  .figma-rebuild footer {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .figma-rebuild {
    --mobile-nav-height: 4.25rem;
    --type-display-hero: clamp(3rem, 13vw, 3.65rem);
  }

  .figma-rebuild::before,
  .figma-rebuild::after {
    display: none;
  }

  .figma-rebuild header {
    padding-top: var(--safe-top);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(.75rem) saturate(120%);
    backdrop-filter: blur(.75rem) saturate(120%);
  }

  .figma-rebuild .nav {
    width: 100%;
    min-height: var(--mobile-nav-height);
    padding: .5rem max(1rem, var(--safe-right)) .5rem max(1rem, var(--safe-left));
    gap: 1rem;
  }

  .figma-rebuild .logo img,
  .figma-rebuild .logo svg,
  .figma-rebuild header.scrolled .logo img,
  .figma-rebuild header.scrolled .logo svg {
    width: auto;
    height: 2.75rem;
  }

  .figma-rebuild .menu-btn {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .625rem;
  }

  .figma-rebuild .hero,
  .figma-rebuild .hero-inner,
  .figma-rebuild .hero-copy {
    min-height: calc(100vh - var(--mobile-nav-height) - var(--safe-top));
    min-height: calc(100svh - var(--mobile-nav-height) - var(--safe-top));
  }

  .figma-rebuild .hero {
    display: block;
  }

  .figma-rebuild .hero-inner {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .figma-rebuild .hero-copy {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem max(1.25rem, var(--safe-right))
      max(1.5rem, calc(var(--safe-bottom) + 1rem))
      max(1.25rem, var(--safe-left));
    justify-content: center;
  }

  .figma-rebuild .hero .eyebrow {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    line-height: 1.4;
  }

  .figma-rebuild .hero h1 {
    max-width: 8ch;
    margin: 0 0 .875rem;
    font-size: var(--type-display-hero);
    line-height: .88;
    letter-spacing: -.05em;
  }

  .figma-rebuild .hero .sub {
    max-width: 12ch;
    margin: 0 0 .875rem;
    padding: 0;
    font-size: clamp(1.625rem, 7.2vw, 2rem);
    line-height: .98;
    letter-spacing: -.035em;
  }

  .figma-rebuild .hero-qualifier {
    max-width: 23rem;
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.45;
  }

  .figma-rebuild .hero-cta {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }

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

  .figma-rebuild .hero-cta .watch {
    min-height: 2.75rem;
    padding: .5rem;
    border-bottom: 0;
    color: #fff;
  }

  .figma-rebuild .hero .stage {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  .figma-rebuild .hero .stage::after {
    display: block;
    background:
      linear-gradient(
        90deg,
        rgba(56, 168, 200, .9) 0%,
        rgba(56, 168, 200, .78) 62%,
        rgba(56, 168, 200, .46) 100%
      );
  }

  .figma-rebuild .hero h1,
  .figma-rebuild .hero-qualifier {
    color: #fff;
  }

  .figma-rebuild .hero :is(.eyebrow, .sub) {
    color: var(--reference-blue-ink);
  }

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

  .figma-rebuild :is(
    .mobile-panel nav a,
    .mobile-actions .btn,
    .ingredient-browser__category,
    .ingredient-browser__arrow
  ) {
    min-height: 2.75rem;
  }

  /* The vendored 50% 48% crop leaves the subject pushed to the card's right
     edge on narrow viewports; shift right across the source photo so both
     her and the mirror reflection are visible. */
  .figma-rebuild .lifestyle-card__image--glp1 {
    object-position: 75% 48%;
  }
}

/* Give the portrait-phone actions more breathing room beneath the hero copy
   while keeping short phones and every landscape composition unchanged. */
@media (max-width: 640px) and (orientation: portrait) and (min-height: 600px) {
  .figma-rebuild .hero :is(.eyebrow, h1) {
    position: relative;
    top: clamp(-3.75rem, -7svh, -2.75rem);
  }

  .figma-rebuild .hero .sub {
    top: clamp(-2.75rem, -5svh, -1.75rem);
  }

  .figma-rebuild .hero-cta {
    position: relative;
    top: clamp(3.5rem, 8svh, 4.25rem);
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  .figma-rebuild {
    --mobile-nav-height: 4rem;
    --type-display-hero: clamp(2.75rem, 12vw, 3.25rem);
  }

  .figma-rebuild .nav {
    min-height: var(--mobile-nav-height);
    padding-block: .375rem;
  }

  .figma-rebuild .logo img,
  .figma-rebuild .logo svg,
  .figma-rebuild header.scrolled .logo img,
  .figma-rebuild header.scrolled .logo svg {
    height: 2.5rem;
  }

  .figma-rebuild .hero-copy {
    padding-top: 1rem;
    padding-bottom: max(1rem, var(--safe-bottom));
  }

  .figma-rebuild .hero .eyebrow {
    margin-bottom: .5rem;
  }

  .figma-rebuild .hero h1,
  .figma-rebuild .hero .sub {
    margin-bottom: .625rem;
  }

  .figma-rebuild .hero .sub {
    font-size: clamp(1.5rem, 6.8vw, 1.75rem);
  }

  .figma-rebuild .hero-qualifier {
    margin-bottom: .75rem;
    line-height: 1.4;
  }

  .figma-rebuild .hero-cta .btn {
    min-height: 3rem;
  }
}

@media (max-width: 340px) and (orientation: portrait) {
  .figma-rebuild .hero .watch {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 496px) {
  .figma-rebuild {
    --mobile-nav-height: 3.5rem;
  }

  .figma-rebuild::before,
  .figma-rebuild::after {
    display: none;
  }

  .figma-rebuild main,
  .figma-rebuild footer {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .figma-rebuild header {
    padding-top: var(--safe-top);
  }

  .figma-rebuild .nav {
    min-height: var(--mobile-nav-height);
    padding: .375rem max(1rem, var(--safe-right)) .375rem max(1rem, var(--safe-left));
  }

  .figma-rebuild .logo img,
  .figma-rebuild .logo svg,
  .figma-rebuild header.scrolled .logo img,
  .figma-rebuild header.scrolled .logo svg {
    width: auto;
    height: 2.25rem;
  }

  .figma-rebuild .hero,
  .figma-rebuild .hero-inner,
  .figma-rebuild .hero-copy {
    min-height: calc(100vh - var(--mobile-nav-height) - var(--safe-top));
    min-height: calc(100svh - var(--mobile-nav-height) - var(--safe-top));
  }

  .figma-rebuild .hero-copy {
    width: min(52%, 28rem);
    padding: 1rem max(1.25rem, var(--safe-right))
      max(1rem, var(--safe-bottom))
      max(1.25rem, var(--safe-left));
    justify-content: center;
  }

  .figma-rebuild .hero .eyebrow {
    margin-bottom: .5rem;
  }

  .figma-rebuild .hero h1 {
    max-width: 9ch;
    margin: 0 0 .75rem;
    font-size: clamp(2.25rem, 5.4vw, 2.75rem);
    line-height: .9;
  }

  .figma-rebuild .hero .sub,
  .figma-rebuild .hero-qualifier,
  .figma-rebuild .hero .watch {
    display: none;
  }

  .figma-rebuild .hero-cta {
    width: min(100%, 13rem);
    display: block;
  }

  .figma-rebuild .hero-cta .btn {
    min-height: 2.75rem;
  }

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

  .figma-rebuild .hero .stage::after {
    background:
      linear-gradient(
        90deg,
        rgba(56, 168, 200, .92) 0%,
        rgba(56, 168, 200, .8) 45%,
        rgba(56, 168, 200, .18) 74%
      );
  }

  .figma-rebuild .hero h1,
  .figma-rebuild .hero-qualifier {
    color: #fff;
  }

  .figma-rebuild .hero :is(.eyebrow, .sub) {
    color: var(--reference-blue-ink);
  }
}

.figma-rebuild .hero-title__line {
  display: block;
  white-space: nowrap;
}

.figma-rebuild .hero h1.hero-title .accent {
  font-style: italic;
  font-synthesis: style;
}

@media (min-width: 641px) and (max-width: 820px) {
  .figma-rebuild .hero h1.hero-title {
    max-width: none;
    font-size: clamp(3rem, 8.3vw, 3.5rem);
  }
}

@media (max-width: 640px) {
  .figma-rebuild .hero h1.hero-title {
    max-width: none;
    font-size: clamp(1.9rem, 9vw, 2.25rem);
  }
}