/* ============================================================
   MyWellnessGuru landing page
   Desktop design: 1200px frame (content 1056, side padding 72)
   Mobile design:  375px frame (content 343, side padding 16)
   ============================================================ */

:root {
  --ink: #2d3034;
  --ink-soft: #5e6065;
  --ink-muted: #707070;
  --emerald-deep: #123225;
  --emerald: #12583e;
  --emerald-mid: #458968;
  --cream: #fffaeb;
  --cream-2: #fff9ee;
  --sage: #e1e9d5;
  --off-white: #fbfafa;
  --hero-bg: #f8f7f5;
  --rust: #b85a35;
  --lilac: #f0e8fe;
  --lilac-bg: #f7f2ff;
  --hairline: #d6dbe4;
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul { list-style: none; }
hr { border: 0; }

/* Breakpoint helpers: desktop-only / mobile-only content */
.m-only, .m-only-block { display: none !important; }

/* Sections span full width; inner content is capped at 1200 */
.header__inner, .trust__inner, .report__inner, .about__inner, .footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--emerald-deep);
  color: #fff;
  border-radius: 666px;
  text-align: center;
  letter-spacing: 0.3px;
  white-space: nowrap;
  /* Suppress the browser's default interaction highlights so only the
     button's own designed states show (WMA-203): the mobile tap flash, the
     default focus outline, and text selection turning the label blue. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
/* Keyboard focus gets a visible ring (matching .modal__btn); mouse/tap focus
   does not, avoiding the default outline box. */
.btn:focus { outline: none; }
.btn:focus-visible { outline: 2px solid var(--emerald-mid); outline-offset: 3px; }
/* Designed pressed state in the button's own palette, replacing the blue flash. */
.btn:active { background: var(--emerald); transform: scale(0.98); }
.btn--small {
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  padding: 4px 16px;
}
.btn--large {
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  padding: 12px 40px;
}

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: 6px; width: 192.27px; height: 35px; }
.logo__leaf { width: 35.85px; height: 34.67px; }
.logo__text { display: flex; flex-direction: column; align-items: center; gap: 1.54px; width: 140.23px; }
.logo__name {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18.974px;
  line-height: normal;
  color: var(--ink);
  white-space: nowrap;
}
.logo__by { width: 75.11px; height: 9.7px; align-self: center; margin-left: 65.1px; }
.logo--footer .logo__name { color: #fff; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid #dfe6d1;
  height: 79px;
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 72px;
}
.header__right { display: flex; align-items: center; gap: 16px; }
.header__tagline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 558px;
  overflow: hidden;
  background: #ece7e1;
}
.hero__bg { position: absolute; inset: 0; }
/* The kit photo is scaled to the hero height and anchored right (like the
   Figma crop) so the box never slides under the headline. */
.hero__photo {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  aspect-ratio: 1916 / 1080;
  object-fit: cover;
  /* The source video has a ~3px black letterbox baked into its top/bottom
     edges; scale it up slightly so those rows fall outside the visible
     box instead of showing as a hairline. */
  transform: scale(1.02);
  /* feather the left edge so it blends into the hero background on wide screens */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.hero__fade {
  position: absolute;
  inset: 0;
  /* Extended further right (and held near-opaque longer) than the text
     column's natural edge (~55% of the hero width) so darker frames of the
     looping background video never show through behind the copy. */
  background: linear-gradient(90deg, rgba(251, 250, 250, 0.95) 0%, rgba(251, 250, 250, 0.92) 40%, rgba(251, 250, 250, 0.6) 58%, rgba(251, 250, 250, 0) 78%);
}
.hero__wave { position: absolute; pointer-events: none; }
.hero__wave--1 {
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
}
.hero__content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.hero__text { display: flex; flex-direction: column; gap: 16px; width: 585px; }
.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  color: var(--ink);
  width: 569px;
}
.hero__title em { font-style: normal; color: var(--emerald); }
.hero__sub {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
}
.hero__price-block { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.pricing { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pricing__now {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  color: var(--ink);
}
.pricing__was {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: normal;
  color: var(--ink-muted);
  text-decoration: line-through;
}
.hero__photo-wrap { display: none; }

/* ---------- Trust strip ---------- */
.trust { background: #fff; }
.trust__inner {
  display: flex;
  align-items: center;
  padding: 40px 72px;
}
.trust__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.trust__item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.trust__icon { position: relative; width: 44.16px; height: 44.16px; flex-shrink: 0; display: block; }
.trust__icon img { width: 44.16px; height: 44.16px; }
.trust__icon-bg { position: absolute; inset: 0; }
.trust__icon-fg {
  position: absolute !important;
  left: 10.09px;
  top: 10.09px;
  width: 24.03px !important;
  height: 24.03px !important;
}
.trust__copy { display: flex; flex-direction: column; gap: 2px; }
.trust__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
}
.trust__sub {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ---------- Shared: indication badge ---------- */
.indication {
  display: inline-flex;
  align-items: center;
  background: var(--rust);
  color: #fff;
  border-radius: 666px;
  padding: 6px 24px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Dots (carousel indicators) ---------- */
.dots { display: flex; align-items: center; gap: 15px; justify-content: center; }
.dot {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--rust);
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.dot--active {
  width: 30px;
  height: 12px;
  border-radius: 6px;
  background: var(--rust);
  border-color: var(--rust);
}

/* DNA carousel navigation (Figma 1159:6337): prev arrow at the far left, the
   pagination dots centered, next arrow at the far right — one full-width row.
   Arrows are desktop-only (mobile keeps native swipe + centered dots). */
.dna__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 970px;
  max-width: 100%;
}
.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid var(--rust);
  background: transparent;
  color: var(--rust);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.carousel-arrow:hover { background: var(--rust); color: #fff; }
.carousel-arrow:active { background: var(--rust); color: #fff; }
.carousel-arrow:focus { outline: none; }
.carousel-arrow:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.carousel-arrow:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--rust); }

/* ---------- What Your DNA Reveals ---------- */
.dna {
  background: var(--cream);
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  overflow: hidden;
}
.dna__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 0 115px;
  max-width: 1200px;
}
.dna__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 50px;
  color: var(--ink);
}
.dna__sub {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  max-width: 848px;
}
.dna__carousel-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
  padding-left: 24px;
}
.dna__carousel {
  display: flex;
  gap: 24px;
  width: 1075px;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.dna__carousel::-webkit-scrollbar { display: none; }
.dna-card {
  position: relative;
  width: 340px;
  height: 381px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
}
.dna-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dna-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25.98%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
.dna-card__plus {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  z-index: 2;
  padding: 0;
}
.dna-card__plus img { width: 32px; height: 32px; }
.dna-card__title {
  position: absolute;
  left: 16px;
  bottom: 24px;
  z-index: 2;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.3px;
  color: #fff;
  width: 275.33px;
}

/* ---------- Sample Report ---------- */
.report { background: #fff; overflow: hidden; }
.report__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 96px 72px;
  position: relative;
}
.report__left {
  width: 441px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.report__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 50px;
  color: var(--ink);
}
.report__title em { font-style: normal; color: var(--emerald); }
.report__sub {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
  padding-bottom: 4px;
}
.report__checks { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.report__checks li { display: flex; gap: 8px; align-items: flex-start; }
.report__checks img { width: 20px; height: 20px; flex-shrink: 0; }
.report__checks span {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
}
.report__right { position: relative; width: 523px; flex-shrink: 0; }
.report__glow {
  position: absolute;
  width: 669px;
  height: 669px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  pointer-events: none;
}
.report__cards { position: relative; width: 100%; height: auto; }

/* ---------- How It Works ---------- */
.how {
  background: var(--sage);
  padding: 80px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.how__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.how__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 50px;
  color: var(--ink);
}
.how__sub { font-size: 18px; line-height: 24px; letter-spacing: 0.3px; }
.how__steps { display: flex; gap: 40px; align-items: flex-start; }
.how-step { display: flex; flex-direction: column; gap: 24px; width: 296.67px; }
.how-step__card {
  position: relative;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 11.53px 3.41px rgba(0,0,0,0.02), 0 5.24px 2.62px rgba(0,0,0,0.03), 0 1.05px 1.31px rgba(0,0,0,0.03);
}
.how-step__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.how-step__img--zoom { object-position: 62% 42%; transform: scale(1.35); }
.how-step__num {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: rgba(45, 48, 52, 0.3);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-step__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.3px;
  color: var(--ink);
  margin-bottom: -16px;
}
.how-step__text {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
}

/* ---------- App overview ---------- */
.app {
  background: linear-gradient(127.77deg, #f4fbff 0%, #ffffff 45%, #f7f1ff 100%);
  padding: 80px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
}
.app__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  width: 100%;
}
.app__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  color: var(--ink);
}
.app__sub {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  max-width: 942px;
}
.app__body { display: flex; gap: 40px; align-items: flex-start; }
.app__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 522px;
  flex-shrink: 0;
}
.app__carousel {
  display: flex;
  gap: 24px;
  width: 522px;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.app__carousel::-webkit-scrollbar { display: none; }
.app__screen {
  width: 522px;
  height: 422px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
}
.app__screen img,
.app__screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.app__features { display: flex; flex-direction: column; width: 494px; }
.app-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}
.app-feature:first-child { border-top: none; padding-top: 0; }
.app-feature:last-child { padding-bottom: 0; }
.app-feature--dragging {
  position: fixed;
  z-index: 50;
  margin: 0;
  cursor: grabbing;
  background: #fff;
  box-shadow: 0 12px 32px rgba(20, 20, 30, 0.16);
  border-radius: 12px;
  border-top-color: transparent;
  pointer-events: none;
}
.app-feature__placeholder {
  border-top: 1px solid var(--hairline);
  box-sizing: border-box;
}
.is-dragging-card,
.is-dragging-card * { cursor: grabbing !important; }
.app-feature__icon { width: 35px; height: 35px; flex-shrink: 0; display: block; }
.app-feature__icon img { width: 35px; height: 35px; }
.app-feature__icon--lilac {
  background: var(--lilac);
  border-radius: 25.45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-feature p {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
  flex: 1;
}
.app-feature b { font-weight: 700; }
.app__note {
  background: var(--lilac-bg);
  border-radius: 16px;
  padding: 16px 32px;
  text-align: center;
}
.app__note p { font-size: 14px; line-height: 22px; letter-spacing: 0.3px; }

/* ---------- Service you can trust ---------- */
.service {
  position: relative;
  height: 747px;
  overflow: hidden;
  background: #c69e77;
}
/* Exact Figma fill transform (node 250:8962): image 138.67% of the 1200px
   frame = 1664px wide, top-aligned, horizontally centered, bottom cropped
   by the section. Fixed pixel size so wide screens never rescale the kit
   into the heading; edges feather into the plaster color beyond 1664px. */
.service__bg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: auto;
  max-width: none;
}
@media (min-width: 1665px) {
  .service__bg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}
.service__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 80px 72px;
}
.service__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.service__powered {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #333;
}
.service__powered img { width: 138px; height: 24px; }
.service__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 50px;
  color: var(--ink);
}
.service__sub {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  max-width: 906px;
}
.service-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #d8d0dd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #38383a;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);
}
.service-card--tl { left: 26px; top: 290px; width: 268px; }
.service-card--bl { left: 26px; top: 587px; width: 268px; }
.service-card--tr { right: 66px; top: 290px; width: 278px; }
.service-card--br { right: 66px; top: 587px; width: 268px; }

/* ---------- Testimonials ---------- */
.testimonials {
  background: #fff;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.testimonials__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  color: var(--ink);
  text-align: center;
  padding: 0 16px;
}
.testimonials__wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.testimonials__row {
  display: flex;
  gap: 32px;
  justify-content: center;
  padding: 0 72px;
  width: 100%;
  box-sizing: border-box;
}
.t-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 302px;
  height: 360px;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}
.t-card__stars { width: 144px; height: 24px; }
.t-card figure, .t-card blockquote { margin: 0; }
.t-card__text {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
  text-align: center;
  flex: 1;
}
.t-card__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
  text-align: center;
  width: 100%;
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--cream-2);
  padding: 80px 72px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.faq__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  color: var(--ink);
  width: 100%;
  max-width: 1056px;
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1056px;
}
.faq-item { display: flex; flex-direction: column; padding-right: 24px; }
.faq-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 0;
}
.faq-item__q {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: var(--ink);
  flex: 1;
}
.faq-item__toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-item__toggle img {
  width: 21.33px;
  height: 21.33px;
  transition: transform 0.25s ease;
}
.faq-item--open .faq-item__toggle img { transform: rotate(45deg); }
.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}
.faq-item__body > p {
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: var(--ink);
  max-width: 896px;
}
.faq-item--open .faq-item__body { grid-template-rows: 1fr; }
.faq-item--open .faq-item__body > p { padding-top: 8px; }
.faq-item__line { border-top: 1px solid var(--hairline); margin-top: 24px; }
.faq-item--open .faq-item__line { margin-top: 24px; }

/* ---------- About ---------- */
.about { background: var(--off-white); }
.about__inner {
  display: flex;
  gap: 80px;
  align-items: center;
  padding: 80px 72px;
}
.about__media { position: relative; width: 474px; height: 434px; flex-shrink: 0; }
.about__img-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 356px;
  height: 387px;
  border-radius: 16px;
  overflow: hidden;
}
.about__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.about__stat {
  position: absolute;
  left: 239px;
  top: 340px;
  background: var(--emerald-mid);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.about__stat-num { font-weight: 700; font-size: 34px; line-height: 40px; }
.about__stat-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
  width: 203px;
  text-align: center;
}
.about__text { display: flex; flex-direction: column; gap: 16px; width: 438px; }
.about__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #333;
}
.about__eyebrow img { width: 108px; height: 18.78px; }
.about__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 49px;
  color: var(--emerald-deep);
  width: 353px;
}
.about__para { font-size: 16px; line-height: 22px; letter-spacing: 0.3px; }

/* ---------- Final CTA ---------- */
.cta {
  position: relative;
  background: var(--off-white);
  padding: 80px 72px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  min-height: 291px;
  justify-content: center;
}
.cta__eyebrow {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--rust);
  max-width: 420px;
}
.cta__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 49px;
  color: var(--emerald-deep);
}
.cta__title em { font-style: normal; }
.cta__btn-wrap { padding: 16px 0; }
.cta__wave {
  position: absolute;
  width: 1319.8px;
  height: 193.13px;
  max-width: none;
  pointer-events: none;
}
.cta__wave--1 {
  left: calc(50% - 685px);
  bottom: -63px;
  transform: scaleY(-1) rotate(180deg);
}
.cta__wave--2 { left: 0; bottom: 0; width: 100%; height: auto; }

/* ---------- Footer ---------- */
.footer {
  background: var(--emerald-deep);
  padding: 8px 0;
  color: #fff;
}
.footer__inner {
  padding: 23px 72px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__top { display: flex; align-items: center; justify-content: space-between; }
.footer__nav { display: flex; gap: 32px; justify-content: center; width: 675px; }
.footer__nav a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: #fff;
  padding: 4px 8px;
  white-space: nowrap;
}
.footer__copyright {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.footer__line { border-top: 1px solid rgba(255, 255, 255, 0.8); }
.footer__disclaimer {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   CHECKOUT PAGE (Figma "Checkout 1 — Contact_Desktop" 253:18958)
   ============================================================ */
.checkout-page {
  background: var(--off-white);
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}
.co-topbar {
  background: #fff;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}
.co-topbar__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.co-topbar__secure {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.4px;
  color: rgba(10, 10, 10, 0.55);
  white-space: nowrap;
}
.co-stepper {
  background: #fff;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}
.co-stepper__list {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
}
.co-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.co-step__num {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  line-height: 19.5px;
  color: rgba(10, 10, 10, 0.38);
  box-sizing: border-box;
}
.co-step__label {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: rgba(10, 10, 10, 0.38);
  white-space: nowrap;
}
.co-step--active .co-step__num {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.12);
}
.co-step--active .co-step__label { color: #0a0a0a; font-weight: 500; }
.co-step__line { flex: 1 0 0; min-width: 28px; height: 1px; background: #e5e5e5; }
.co-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 64px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.co-heading { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.co-heading__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0.2px;
  color: #333;
}
.co-heading__sub {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #595959;
  max-width: 830px;
}
.co-plans {
  display: flex;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 971px;
}
/* Two equal-width cards (Figma 654:2033 — 971px row, 24px gap). Selection is
   state-driven (Figma 253:13599 unselected vs 253:13573 selected): borders,
   radius, padding and the select circle all change on .plan-card--selected.
   Nothing that affects the OUTER box size animates — border is an inset shadow
   and padding lives inside a fixed flex-basis (box-sizing: border-box) — so a
   card stays the same width whether or not it's selected, and both bottoms
   align (the shorter kit card stretches to match the trial card). */
.plan-card {
  transition: box-shadow 0.35s ease, border-radius 0.35s ease, padding 0.35s ease;
}
.plan-card {
  position: relative;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 auto;
  /* Both cards are 471px wide × 491.5px tall (Figma 253:13599 / 253:13573 —
     "W Hug 471px, H Hug 491.5px"): equal size, bottoms aligned. min-height
     (not a hard height) is the Figma floor but lets the taller trial card
     absorb a few px of sub-pixel wrap without clipping the disclaimer; the
     co-plans `align-items: stretch` then grows the kit card to match. */
  width: 471px;
  min-height: 491.5px;
  display: flex;
  flex-direction: column;
  /* Unselected state (Figma 253:13599): 0.75px grey border, 12px radius,
     18px padding. Border is an inset shadow so it never shrinks the content. */
  box-shadow: inset 0 0 0 0.75px #e5e5e5;
  border-radius: 12px;
  padding: 18px;
  gap: 18px;
}
/* Selected state (Figma 253:13573): 1.5px emerald border, 16px radius, 24px padding. */
.plan-card--selected {
  box-shadow: inset 0 0 0 1.5px var(--emerald-mid);
  border-radius: 16px;
  padding: 24px;
}
/* Select circle: unselected = 22.5px empty ring (Figma 253:13641);
   selected = 30px green filled check (Figma 253:13598). */
.plan-card__select { position: absolute; top: 12px; right: 12px; width: 22.5px; height: 22.5px; transition: width 0.35s ease, height 0.35s ease, top 0.35s ease, right 0.35s ease; }
.plan-card--selected .plan-card__select { top: 16px; right: 16px; width: 30px; height: 30px; }
.plan-card__select img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-card__check-vi { padding: 20%; box-sizing: border-box; }
.plan-card .plan-card__check-on, .plan-card .plan-card__check-vi { display: none; }
.plan-card--selected .plan-card__check-on, .plan-card--selected .plan-card__check-vi { display: block; }
.plan-card--selected .plan-card__check-off { display: none; }
/* Figma 253:13600 (trial head): badge → title-block gap 12px; inside the
   block title → price gap 6px. */
.plan-card__head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; }
.plan-card__head .plan-badge { margin-bottom: 6px; }
/* Figma 584-1573: the two cards' dividers (and therefore their feature lists)
   align at the same height. The trial head is taller (it has the badge), so
   the kit head is given the same fixed height with its title+price top-aligned
   — its 8px title → price gap matches Figma 253:13574. This keeps both
   .plan-card__line dividers level across the cards. */
.plan-card__head { min-height: 81px; }
.plan-card[data-plan="kit"] .plan-card__head { gap: 8px; }
.plan-badge {
  background: var(--rust);
  color: #fff;
  border-radius: 75px;
  padding: 3px 6px;
  font-weight: 600;
  font-size: 6.75px;
  letter-spacing: 0.4725px;
  text-transform: uppercase;
  line-height: normal;
}
.plan-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #333;
  /* Figma 253:14492 keeps the trial title on one line even when the card is
     selected (24px padding narrows the content box). It fits at 18px, so pin
     it to a single line; mobile re-enables wrapping below. */
  white-space: nowrap;
}
.plan-card__price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-card__price-now {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.plan-card__asterisk { font-family: var(--font-sans); font-weight: 400; font-size: 18px; vertical-align: baseline; top: 0; }
.plan-card__price-was {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: #0a0a0a;
  text-decoration: line-through;
}
.plan-card__price-note { font-size: 14px; line-height: 22px; letter-spacing: 0.3px; color: #595959; }
.plan-card__line { border-top: 1px solid #e5e5e5; width: 100%; margin: 0; }
/* Feature list: trial card gap 4.5px / icon-gap 6px (Figma 253:13610);
   kit card gap 6px / icon-gap 8px (Figma 253:13584). */
.plan-card__features { display: flex; flex-direction: column; gap: 4.5px; width: 100%; }
.plan-card[data-plan="kit"] .plan-card__features { gap: 6px; }
.plan-card__features li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: #57595d;
  /* Figma keeps every feature on a single line (253:13625/13629/13639 are
     whitespace-nowrap); they all fit within the 471px card at 14px. */
  white-space: nowrap;
}
.plan-card[data-plan="kit"] .plan-card__features li { gap: 8px; }
.plan-card__features li img { width: 15px; height: 15px; flex-shrink: 0; }
.plan-card__disclaimer {
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.2px;
  color: #595959;
}
.co-continue { padding: 24px 0; }
.co-continue__btn { width: 320px; }
/* Disabled until a plan is selected (WMA-216 removed the default selection).
   Figma 1323:5089 disabled state: solid pale Emerald10 (#cde1d5) fill with
   full-opacity white text — not a dimmed version of the deep-green button. */
.co-continue__btn:disabled {
  background: #cde1d5;
  opacity: 1;
  cursor: not-allowed;
}
.co-waves-wrap {
  margin-top: auto;
  width: 100%;
  position: absolute;
  bottom: -80px;
  pointer-events: none;

  @media (max-width: 767px) { bottom: 0 }
}
/* Contact step sits the waves lower than the other checkout pages. */
.checkout-page--contact .co-waves-wrap { bottom: -140px; @media (max-width: 767px) { bottom: 0 } }
.co-waves {
  width: 100%;
  height: auto;
  max-width: none;
  flex-shrink: 0;
  margin-bottom: 0;
}

/* ---------- Checkout steps 2 & 3 (Figma 253:18959, 253:19207) ---------- */
.co-step--done .co-step__num,
.co-step--active .co-step__num { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.co-step__line--done { background: var(--emerald-deep); }
.co-content--form { padding-top: 44px; align-items: stretch; }
.co-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 32px;
  width: 100%;
  max-width: 1106px;
  margin: 0 auto;
  align-items: start;
}
.co-panel {
  background: transparent;
  border: 1px solid var(--emerald-mid);
  border-radius: 16px;
  padding: 45px 49px 49px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.co-panel__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0.2px;
  color: #333;
}
.co-panel__sub {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #595959;
}
.co-form { display: flex; flex-direction: column; gap: 32px; padding-top: 24px; align-items: flex-start; }
.co-form__row { width: 100%; }
.co-input {
  height: 56.5px;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
}
.co-input::placeholder { color: #595959; }
.co-input:focus { border-color: var(--emerald-mid); }
.co-input--email { max-width: 424px; }
.co-form__btn {
  background: var(--emerald-deep);
  color: #fff;
  border-radius: 999px;
  height: 54.5px;
  width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.co-form__btn--full { width: 100%; height: 58px; }
/* Disabled state: the contact "Next" button stays disabled until a valid
   email is entered. Muted and non-interactive so it reads as unavailable. */
.co-form__btn:disabled {
  background: var(--emerald-deep);
  opacity: 0.4;
  cursor: not-allowed;
}
.co-form--shipping { gap: 24px; }
.co-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}
.co-input--full, .co-form__grid .co-input--full { grid-column: 1 / -1; }
.co-select-wrap { position: relative; height: 56.5px; }
.co-select-label {
  position: absolute;
  left: 18px;
  top: 10px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--ink);
  pointer-events: none;
}
.co-select {
  appearance: none;
  -webkit-appearance: none;
  height: 100%;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 16px 40px 0 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
}
.co-select:focus { border-color: var(--emerald-mid); }
.co-select-chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---------- Checkout form validation ---------- */
.co-field { display: flex; flex-direction: column; }
.co-field--full { grid-column: 1 / -1; }
.co-input--error,
.co-select--error { border-color: #d64545; }
.co-input--error:focus,
.co-select--error:focus { border-color: #d64545; }
.co-field-error {
  margin: 6px 2px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  color: #d64545;
}

/* Order summary aside */
.co-summary {
  border: 1px solid var(--emerald-mid);
  border-radius: 16px;
  padding: 45px 25px 49px;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.co-summary__head {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-bottom: 25px;
  border-bottom: 1px solid #e5e5e5;
}
.co-summary__thumb { width: 110px; height: 77.45px; object-fit: cover; border-radius: 8px; }
.co-summary__head-text { display: flex; flex-direction: column; gap: 4px; }
.co-summary__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #0a0a0a;
}
.co-summary__price { display: flex; align-items: center; gap: 8px; }
.co-summary__price-now {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.co-summary__price-was {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: #0a0a0a;
  text-decoration: line-through;
}
.co-summary__includes { padding: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.co-summary__includes h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #0a0a0a;
}
.co-summary__includes ul { display: flex; flex-direction: column; gap: 6px; }
.co-summary__includes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: #57595d;
}
.co-summary__includes li img { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3.5px; }
.co-summary--kit li[data-trial-only] { display: none; }
.co-summary__totals { padding: 22px 0; }
.co-summary__row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.co-summary__row--shipping { padding-bottom: 16px; }
.co-summary__row--total {
  border-top: 1px solid #e5e5e5;
  padding-top: 17px;
  padding-bottom: 16px;
}
.co-summary__label { font-size: 14px; line-height: 22px; letter-spacing: 0.3px; color: rgba(10, 10, 10, 0.55); }
.co-summary__amount {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.co-summary__free { font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: 0.3px; color: var(--emerald-mid); }
.co-summary__total-label { font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: 0.3px; color: #333; }
.co-summary__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 8px;
  align-items: center;
  justify-content: center;
}
.co-summary__trust { display: flex; gap: 12px; align-items: center; justify-content: center; width: 328px; }

/* ---------- Fake-door modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.6);
  width: 520px;
  max-width: 100%;
  min-height: 555.5px;
  margin-top: 4px;
  padding: 44px 48px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.modal__illustration { width: 140px; height: 140px; }
.modal__text {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 424px;
}
.modal__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0.2px;
  color: #333;
  padding-top: 10px;
}
.modal__sub {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #595959;
  max-width: 338px;
}
.modal__btn:focus { outline: none; }
.modal__btn:focus-visible { outline: 2px solid var(--emerald-mid); outline-offset: 3px; }
.modal__btn {
  margin-top: 57px;
  width: 100%;
  max-width: 424px;
  height: 58px;
  border-radius: 999px;
  background: var(--emerald-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

/* ---------- Category detail: in-place card expansion (Figma C_/M_ variants) ---------- */
.dna-card { transition: width 0.35s ease, height 0.35s ease; }
.dna-card--open { width: 700px; }
.dna-card--open .dna-card__plus,
.dna-card--open > .dna-card__title { display: none; }
.dna-card--open::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.dna-detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  animation: dna-detail-in 0.3s ease 0.15s forwards;
}
@keyframes dna-detail-in { to { opacity: 1; } }
.dna-detail__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  z-index: 2;
  padding: 0;
}
.dna-detail__close img { width: 32px; height: 32px; }
.dna-detail__text {
  position: absolute;
  left: 16px;
  bottom: 24px;
  width: 362px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.dna-detail__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.3px;
  font-feature-settings: 'ss01' 1;
}
.dna-detail__desc { font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: 0.3px; }
.dna-detail__includes { font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0.3px; }
.dna-detail__panel {
  position: absolute;
  background: rgba(45, 48, 52, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  box-sizing: border-box;
}
/* slider rows (Nutrition, Skin, Energy, Sleep) */
.cs-rows { display: flex; flex-direction: column; gap: 12px; }
.cs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-labels { display: flex; flex-direction: column; gap: 6px; }
.cs-name { font-weight: 500; font-size: 12px; line-height: 1; white-space: nowrap; }
.cs-sub { font-weight: 500; font-size: 10px; line-height: 1; white-space: nowrap; }
.cs-slider { display: flex; flex-direction: column; gap: 6px; position: relative; }
.cs-track {
  position: relative;
  height: 4.5px;
  border-radius: 3px;
  background: #eeeff1;
  display: flex;
  gap: 1.2px;
  overflow: visible;
}
.cs-track--segments { background: none; }
.cs-track--segments .cs-seg { flex: 1; height: 100%; border-radius: 1px; }
.cs-track--segments .cs-seg:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.cs-track--segments .cs-seg:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.cs-fill { position: absolute; top: 0; height: 100%; }
.cs-dot {
  position: absolute;
  width: 9.3px;
  height: 9.3px;
  top: -2.4px;
  transform: translateX(-50%);
  z-index: 1;
}
.cs-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.cs-status { font-weight: 500; font-size: 8px; line-height: 1; white-space: nowrap; }
.cs-status--green { color: #7fd67f; }
.cs-status--orange { color: #f29100; }
.cs-desc { font-weight: 500; font-size: 7px; line-height: 1.35; width: 110px; }
/* badge rows (Fitness) */
.cs-badge {
  background: #b0d6b0;
  color: #2d3034;
  border-radius: 434px;
  padding: 4px 8px;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
/* biomarker range cards (Longevity) */
.cs-card {
  border: 0.75px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-card__head { display: flex; align-items: flex-start; justify-content: space-between; width: 199.5px; }
.cs-card__value { display: flex; align-items: center; gap: 4.5px; }
.cs-card__num { font-weight: 700; font-size: 12px; line-height: 1; }
.cs-card__unit, .cs-card__range { color: #d9dadd; font-weight: 500; font-size: 10px; line-height: 1; }
.cs-card .cs-scale { color: #d9dadd; }

/* ---------- Category detail: mobile full-screen modal ---------- */
body.no-scroll { overflow: hidden; }
.dna-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  overflow-y: auto;
}
.dna-modal {
  position: relative;
  background: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 375px;
  max-height: calc(100vh - 32px);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.6);
  animation: dna-detail-in 0.2s ease forwards;
}
.dna-modal__close { position: absolute; top: 16px; right: 16px; z-index: 3; }
/* The photo fills the whole card; the text + stats panel float over its
   lower portion on top of the gradient, matching the Figma composition
   (not a separate section stacked below the image). Height grows with
   content (more stat rows = taller card) with a floor so the photo always
   shows a meaningful amount above the text. */
.dna-modal__media {
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  padding: 16px;
}
.dna-modal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dna-modal__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20.5%, rgba(0, 0, 0, 0.8) 73.26%);
}
.dna-modal__text {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dna-modal__text .dna-detail__title { font-weight: 500; font-size: 18px; line-height: 24px; }
.dna-modal__text .dna-detail__desc { font-size: 14px; line-height: 20px; }
.dna-modal__text .dna-detail__includes { font-size: 13px; line-height: 20px; }
.dna-modal__panel {
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  background: rgba(45, 48, 52, 0.3) !important;
}

/* ---------- Draggable carousels ---------- */
.dna__carousel, .testimonials__row, .trust__inner, .app__carousel {
  -webkit-overflow-scrolling: touch;
}

.dna__carousel.is-dragging, .testimonials__row.is-dragging, .trust__inner.is-dragging, .app__carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.dna__carousel.is-dragging .dna-card,
.testimonials__row.is-dragging .t-card,
.app__carousel.is-dragging .app__screen { pointer-events: none; }

/* ============================================================
   MOBILE (≤ 767px) — matches the 375px Figma frame
   ============================================================ */
@media (max-width: 767px) {
  .d-only, .d-only-block { display: none !important; }
  .m-only { display: inline !important; }
  img.m-only, div.m-only, .dots.m-only { display: flex !important; }
  img.m-only { display: block !important; }
  button.m-only { display: inline-flex !important; }
  .m-only-block { display: block !important; }

  /* Header */
  .header__inner { padding: 0; }
  .header__inner { width: 100%; }
  .header .header__inner { max-width: none; }
  .header__inner { display: flex; }
  .header { padding: 0 30px; }
  .header__inner { gap: 12px; width: 100%; max-width: 314.25px; margin: 0 auto; }

  /* Hero */
  .hero {
    height: auto;
    background: var(--hero-bg);
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
  }
  .hero__photo-wrap { display: block; width: 100%; position: relative; }
  .hero__photo-m {
    display: block;
    width: 100%;
    height: 316px;
    object-fit: cover;
    object-position: right;
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 99%);
  }
  /* Tap-to-play affordance over the non-autoplaying mobile hero video.
     Centered on the visible (unfaded) part of the video; hidden once the
     video is playing and shown again if it's paused. */
  .hero__play {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 0;
    background: rgba(18, 50, 37, 0.85);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
  }
  .hero__play:active { transform: translate(-50%, -50%) scale(0.94); }
  .hero__play:focus { outline: none; }
  .hero__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  /* Playing: fade the button out and let taps reach the video underneath. */
  .hero__photo-wrap.is-playing .hero__play { opacity: 0; pointer-events: none; }
  .hero__content {
    padding: 0 16px;
    /* Sit the text on the hero background just below the photo's faded tail,
       not overlapping the video imagery (design 276:21426). */
    margin-top: -24px;
    gap: 24px;
    align-items: center;
    text-align: center;
    height: auto;
  }
  .hero__text { width: 100%; }
  .hero__title { width: 100%; font-size: 38px; line-height: normal; }
  .hero__price-block { gap: 24px; align-items: center; }
  .pricing__now { font-size: 40px; }
  .btn--large { font-size: 18px; line-height: 24px; padding: 8px 32px; }
  .cta .btn--large, .hero .btn--large { }

  /* Trust strip — auto-scrolling marquee, cloned+animated by script.js.
     Still touch/mouse draggable: the animation pauses on interaction. */
  .trust__inner {
    padding: 24px 0;
    overflow-x: hidden;
  }
  .trust__title { font-weight: 600; }
  .trust__track {
    justify-content: flex-start;
    gap: 24px;
    width: max-content;
    animation: trust-marquee var(--trust-marquee-duration, 22s) linear infinite;
  }
  .trust__inner.is-dragging .trust__track,
  .trust__inner.is-marquee-paused .trust__track {
    animation-play-state: paused;
  }
  @keyframes trust-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(var(--trust-marquee-distance, -50%)); }
  }

  /* DNA */
  .dna { gap: 80px; padding: 80px 0; }
  .dna__header { align-items: flex-start; text-align: left; padding: 0 16px; }
  .dna__title { font-size: 40px; line-height: 49px; }
  .dna__sub { font-size: 18px; line-height: 24px; }
  .dna__carousel-wrap { gap: 32px; }
  .dna__carousel { width: 100%; padding-left: 16px; padding-right: 16px; }
  /* Arrows are desktop-only; on mobile the row just centers the dots. */
  .dna__nav { width: 100%; justify-content: center; }
  .dna-card { width: 300px; }
  .dna-card__title { font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 24px; }

  /* Report */
  .report__inner { flex-direction: column; padding: 40px 16px; gap: 40px; align-items: stretch; }
  .report__left { width: 100%; gap: 16px; }
  .report__title { font-size: 40px; line-height: 49px; }
  .report__sub { font-size: 14px; line-height: 20px; padding-bottom: 0; }
  .report__checks { margin-top: 8px; }
  .report__checks span { font-size: 13px; line-height: 20px; }
  .report__right { width: 100%; display: flex; justify-content: center; }
  .report__cards { width: 343px; max-width: 100%; }
  .report__glow { width: 420px; height: 420px; }

  /* How */
  .how { padding: 40px 16px; }
  .how__title { font-size: 40px; line-height: 49px; }
  .how__sub { font-size: 16px; line-height: 22px; }
  .how__steps { flex-direction: column; gap: 40px; }
  .how-step__title { font-size: 18px; line-height: 24px; margin-bottom: -20px; }
  .how-step__text { font-size: 13px; line-height: 20px; }

  /* App */
  .app { padding: 40px 16px; gap: 40px; background: linear-gradient(99.71deg, #f4fbff 0%, #ffffff 45%, #f7f1ff 100%); }
  .app__header { align-items: flex-start; text-align: left; }
  .app__title { font-size: 40px; line-height: 49px; }
  .app__sub { font-size: 16px; line-height: 22px; }
  .app__body { flex-direction: column; gap: 40px; width: 100%; }
  .app__media { width: 100%; }
  .app__carousel { width: 100%; padding: 0 16px; margin: 0 -16px; box-sizing: border-box; }
  .app__screen { width: 343px; height: auto; aspect-ratio: 343 / 277.29; }
  .app__features { width: 100%; }
  .app-feature p { font-size: 14px; line-height: 20px; }
  .app-feature b { font-size: 14px; line-height: 20px; }
  .app__note { width: 100%; }
  .app__note p { font-size: 13px; line-height: 20px; }
  .app__note b { font-size: 14px; line-height: 22px; }

  /* Service */
  /* Auto height on mobile; clip the oversized kit photo horizontally so it
     doesn't cause a horizontal scrollbar. */
  .service { height: auto; overflow: hidden; }
  /* On mobile a dedicated portrait background image (Figma 287:6604) carries
     the tan plaster + the centered kit as one composition, covering the whole
     section. Its tan matches the section's own background color, so the
     cover-crop edges blend seamlessly — no mask needed. The kit is baked into
     the image, positioned to land in the band between the header and cards. */
  .service__bg--desktop { display: none; }
  .service__bg--mobile {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 42%;
  }
  .service__inner {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 260px;
  }
  .service__header { align-items: flex-start; text-align: left; }
  .service__powered { font-size: 16px; line-height: 22px; }
  .service__title { font-size: 40px; line-height: 49px; }
  .service__sub { font-size: 16px; line-height: 22px; }
  .service__cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  /* Plain stacked cards in normal flow (no sticky/scroll effect). Matches the
     Figma card fill: translucent white over the tan plaster. */
  .service-card {
    position: static;
    width: 100% !important;
    padding: 16px 8px;
    font-size: 16px;
    line-height: 22px;
    background: rgba(255, 255, 255, 0.75);
    border-color: #d8d0dd;
    backdrop-filter: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }

  /* Testimonials */
  .testimonials { gap: 40px; }
  .testimonials__title { font-size: 40px; line-height: 49px; }
  .testimonials__row {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 35px 59px;
    scrollbar-width: none;
  }
  .testimonials__row::-webkit-scrollbar { display: none; }
  .t-card { width: 256.67px; scroll-snap-align: center; }
  .t-card__text { font-size: 16px; line-height: 22px; }
  .t-card__name { font-size: 14px; line-height: 22px; }

  /* FAQ */
  .faq { padding: 80px 16px; }
  .faq__title { font-size: 40px; line-height: 49px; }
  .faq__list { gap: 0; }
  .faq-item { padding-right: 0; }
  .faq-item__head { padding: 24px 0 0; }
  .faq-item__q { font-size: 16px; line-height: 22px; }
  .faq-item__toggle { width: 25px; height: 25px; }
  .faq-item__toggle img { width: 16.67px; height: 16.67px; }
  .faq-item__body > p { font-size: 14px; line-height: 22px; }
  .faq-item__line--top { border-top: 1px solid var(--hairline); }
  .faq-item:first-child .faq-item__head { padding-top: 0; }
  .faq-item--open:first-child .faq-item__line--top { margin-bottom: 24px; }

  /* About */
  .about__inner { flex-direction: column-reverse; gap: 40px; padding: 80px 16px 40px; align-items: stretch; }
  .about__text { width: 100%; }
  .about__eyebrow { font-size: 16px; line-height: 22px; }
  .about__title { width: 100%; }
  .about__para { font-size: 14px; line-height: 20px; }
  .about__media { width: 100%; height: 434px; }
  .about__img-wrap { width: 100%; max-width: 343px; height: 372px; top: 7px; }
  .about__stat { left: 54px; top: 340px; }
  .about__stat-num { font-size: 24px; line-height: 30px; }
  .about__stat-label { font-size: 14px; line-height: 20px; }

  /* CTA */
  .cta { padding: 40px 16px; }
  .cta__content { min-height: 0; }
  .cta__eyebrow { max-width: none; }
  .cta__wave { width: 859.53px; height: 125.78px; }
  .cta__wave--1 { left: calc(50% - 404.5px); bottom: -36px; }
  .cta__wave--2 { left: calc(50% - 366.7px); bottom: -9px; }

  /* Category detail — mobile full-screen modal (replaces in-place expansion,
     which is too cramped in a 343px-wide carousel card) */
  .cs-card__head { width: 100%; }

  /* Checkout steps 2/3 mobile adaptation */
  .co-stepper__list { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .co-stepper__list::-webkit-scrollbar { display: none; }
  .co-two-col { grid-template-columns: 1fr; gap: 24px; }
  /* Order summary comes first on mobile, collapsed behind a toggle so the
     contact/shipping form isn't pushed below the fold by its full detail. */
  .co-summary { order: -1; padding: 20px; }
  .co-panel { padding: 28px 20px 32px; }
  .co-form__btn { width: 100%; }
  .co-input--email { max-width: none; }
  .co-form__grid { grid-template-columns: 1fr; }
  .co-summary__trust { width: 100%; flex-wrap: wrap; }

  .co-summary__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }
  .co-summary__toggle span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    color: #0a0a0a;
  }
  /* Chevron points down when collapsed, flips up when expanded (design 603:3298). */
  .co-summary__chevron { width: 12px; height: 12px; transition: transform 0.2s ease; }
  .co-summary__toggle[aria-expanded="true"] .co-summary__chevron { transform: rotate(180deg); }
  .co-summary__toggle-amount {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0.3px;
    color: var(--ink);
  }
  .co-summary__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .co-summary__toggle[aria-expanded="true"] + .co-summary__body {
    max-height: 2000px;
  }

  /* Checkout (no dedicated mobile frame in Figma — desktop layout adapted) */
  .co-topbar__inner { padding: 16px; }
  .co-stepper__list { padding: 14px 16px; gap: 8px; }
  .co-step { gap: 6px; }
  .co-step__line { min-width: 10px; }
  .co-step__label { font-size: 12px; }
  .co-content { padding: 32px 16px 48px; gap: 24px; }
  /* Mobile uses a shorter heading + subtext (see .m-only-block copy) sized
     per the Figma mobile spec (287:8708). */
  .co-heading__title { font-size: 20px; line-height: 26px; letter-spacing: 0.2px; }
  .co-heading__sub { font-size: 16px; line-height: 22px; max-width: 233px; }
  .co-plans { flex-direction: column; gap: 24px; }
  /* Mobile: both cards render at the same compact, collapsed size regardless
     of selection — the featured/compact size difference is a desktop-only
     treatment (there's no room for it once cards stack full width). */
  /* Both cards render at the same compact, collapsed size regardless of
     selection — the featured/compact size difference is a desktop-only
     treatment. The [data-plan] height rules above are desktop-specific and
     must be reset here or the kit card keeps its 331.5px desktop min-height. */
  .plan-card, .plan-card--selected,
  .plan-card[data-plan="kit"], .plan-card[data-plan="kit"].plan-card--selected {
    /* Reset the desktop flex-grow (flex:1 1 0), which in this column layout
       would make each card share the column height and collapse. */
    flex: none;
    width: 100%;
    min-height: 0;
    height: auto;
    border: 1.5px solid #e5e5e5;
    box-shadow: none;
    border-radius: 16px;
    padding: 20px;
    gap: 16px;
  }
  .plan-card--selected { border-color: var(--emerald-mid); box-shadow: none; }
  /* Reset the desktop head-height alignment (min-height:81px, used to keep the
     two cards' dividers level) — on stacked mobile cards each head should be
     its natural content height. */
  .plan-card__head { min-height: 0; }
  .plan-card[data-plan="kit"] .plan-card__head { gap: 6px; }
  /* Mobile select circle stays 30px in both states (no mobile Figma frame;
     the desktop 22.5px→30px state change is a desktop-only treatment). */
  .plan-card__select, .plan-card--selected .plan-card__select { top: 20px; right: 20px; width: 30px; height: 30px; }
  /* Re-enable title wrapping on mobile — the narrow stacked card can't fit the
     long trial title on one line (unlike the wide desktop card). */
  .plan-card__title { white-space: normal; }
  /* Type sizes per Figma mobile card (575:3026 trial / 575:3345 kit). The
     recommended (trial) card uses the larger H3 (22px); the kit-only card
     uses the smaller H3 (18px). */
  .plan-card[data-plan="trial"] .plan-card__title { font-size: 22px; line-height: 28px; letter-spacing: 0.3px; }
  .plan-card[data-plan="trial"] .plan-card__price-now { font-size: 22px; line-height: 28px; }
  .plan-card[data-plan="trial"] .plan-card__asterisk { font-size: 22px; }
  .plan-card[data-plan="trial"] .plan-card__price-was { font-size: 14px; line-height: 22px; }
  .plan-card[data-plan="kit"] .plan-card__title { font-size: 18px; line-height: 24px; letter-spacing: 0.3px; }
  .plan-card[data-plan="kit"] .plan-card__price-now { font-size: 18px; line-height: 24px; }
  .plan-card[data-plan="kit"] .plan-card__price-was { font-size: 13px; line-height: 20px; }
  /* Feature rows: P3 = 14px / 22px, 0.3px tracking (design uses 22px line
     height, not the desktop-collapsed 16.5px). Mobile cards are narrow, so
     long features must wrap (unlike the desktop nowrap) — restore wrapping
     and top-align the check icon for multi-line rows. */
  .plan-card__features li { font-size: 14px; line-height: 22px; letter-spacing: 0.3px; white-space: normal; align-items: flex-start; }
  .plan-card__features li img { margin-top: 3.5px; }
  /* Disclaimer: 10px / 14px, 0.2px tracking. */
  .plan-card__disclaimer { font-size: 10px; line-height: 14px; letter-spacing: 0.2px; }
  /* RECOMMENDED badge: 9px / 0.63px tracking (selector must out-specify the
     desktop `.plan-card:not(.plan-card--selected) .plan-badge` shrink). */
  .plan-card:not(.plan-card--selected) .plan-badge,
  .plan-card .plan-badge { font-size: 9px; letter-spacing: 0.63px; padding: 4px 8px; }
  /* Collapsed state: only the first two features show, then "Read more"
     expands the card in place (adds .plan-card--expanded). */
  .plan-card__features li:nth-child(n+3) { display: none; }
  .plan-card--expanded .plan-card__features li:nth-child(n+3) { display: flex; }
  .plan-card__more {
    align-self: flex-start;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.3px;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  /* Disclaimer + divider hidden while collapsed; the trial card reveals them
     when expanded (kit card has no disclaimer). */
  .plan-card__disclaimer, .plan-card__line { display: none; }
  .plan-card--expanded .plan-card__disclaimer { display: block; }
  .plan-card--expanded .plan-card__line { display: block; }

  /* Mobile plan-details drawer (bottom sheet) — appears on plan select */
  .plan-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .plan-drawer-overlay[hidden] { display: none; }
  .plan-drawer {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px 12px 0 0;
    padding: 12px 16px 40px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    animation: plan-drawer-in 0.25s ease forwards;
  }
  @keyframes plan-drawer-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .plan-drawer__handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 5.5px;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 auto 24px;
  }
  .plan-drawer__body { display: flex; flex-direction: column; gap: 16px; }
  .plan-drawer__row { display: flex; align-items: center; gap: 16px; }
  .plan-drawer__info { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .plan-drawer__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.3px;
    color: #333;
  }
  .plan-drawer__price { display: flex; align-items: center; gap: 8px; }
  .plan-drawer__price-now {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.3px;
    color: var(--ink);
  }
  .plan-drawer__price-was {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: #0a0a0a;
    text-decoration: line-through;
  }
  .plan-drawer__img { width: 134px; height: 100px; object-fit: contain; flex-shrink: 0; }
  .plan-drawer__cta { width: 100%; }
  /* Mobile carries the CTA inside the drawer, so hide the page-level one. */
  .co-continue { display: none; }
  .co-waves { width: 100%; height: auto; margin-bottom: 0; }
  .modal { min-height: 0; padding: 36px 24px 40px; }
  .modal__btn { margin-top: 40px; }

  /* Footer */
  .footer { padding: 8px 16px; }
  .footer__inner { padding: 23px 0; }
  .footer__top { flex-direction: column; gap: 24px; align-items: center; }
  .footer .logo { width: auto; gap: 7px; }
  .footer__nav { width: 100%; flex-wrap: wrap; gap: 4px; }
  .footer__disclaimer { text-align: center; }
}

/* Between the two design widths, keep desktop layout but allow shrink */
@media (min-width: 768px) and (max-width: 1199px) {
  .how__steps { flex-wrap: wrap; justify-content: center; }
  .app__body { flex-wrap: wrap; justify-content: center; }
  .report__inner { flex-wrap: wrap; gap: 40px; justify-content: center; }
  .testimonials__row { flex-wrap: wrap; }
  .hero__content { padding: 80px 40px; }
  .header__inner { padding: 0 40px; }
  .trust__inner { flex-wrap: wrap; gap: 24px; padding: 40px; justify-content: center; }
}

/* ============ COOKIE BANNER ============ */
.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(45, 48, 52, 0.16);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
  margin: 0;
}
.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-banner__btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 24px;
  border-radius: 666px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--emerald-deep);
}
.cookie-banner__btn--ghost {
  background: transparent;
  color: var(--emerald-deep);
}
.cookie-banner__btn--solid {
  background: var(--emerald-deep);
  color: #fff;
}
.cookie-banner__btn:focus { outline: none; }
.cookie-banner__btn:focus-visible { outline: 2px solid var(--emerald-mid); outline-offset: 3px; }

@media (max-width: 767px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__btn { flex: 1; }
}