/* ==========================================================================
   Thyroid Power — Quiz Funnel
   Tokens/fonts/buttons duplicated verbatim from the landing page build so
   the two feel like one product. See 01-LANDING-PAGE/build/styles.css.
   ========================================================================== */

/* ---- Brand fonts (hosted on hellofling.com CDN — same origin at final destination) ----
   NOTE: the `t/39` segment is a Shopify THEME VERSION path and will 404 on theme
   republish. Georgia fallback is metric-tuned below so layout does not jump if this happens. */
@font-face {
  font-family: 'bogue';
  src: url('https://hellofling.com/cdn/shop/t/39/assets/bogue-regular-2.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'bogue';
  src: url('https://hellofling.com/cdn/shop/t/39/assets/bogue-bold-2.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://hellofling.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://hellofling.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'bogue-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 96%; ascent-override: 92%; descent-override: 22%;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --peach: #f6e6d8;
  --cream: #fbf5ee;
  --white: #ffffff;
  --ink: #121212;
  --ink-soft: #1c1c1c;
  --plum: #6e5560;
  --plum-deep: #55404a;

  --text: #121212;
  --text-muted: #5e6370;

  --line: #e4d8cb;
  --line-strong: #d6c9bd;

  --star: #ffcf2a;

  --sage: #5e6e52;
  --sage-tint: #eaeee3;
  --sage-line: #b6c2a6;
  --clay: #d19b76;
  --clay-tint: #f8e9dd;

  --btn-bg: var(--plum);
  --btn-fg: #ffffff;
  --btn-bg-hover: var(--plum-deep);

  --serif: 'bogue', 'bogue-fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --e-1: 0 2px 10px rgba(18, 18, 18, .05);
  --e-2: 0 10px 34px rgba(18, 18, 18, .08);
  --e-3: 0 24px 60px rgba(18, 18, 18, .16);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px; --s9: 48px;

  --gutter: 20px;
  --quiz-max: 640px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Every list in this build is list-style:none, but the UA's 40px
   padding-inline-start was never cleared — which left the food summary,
   benefit list, checklist and gift rows all silently indented away from the
   column they belong to. */
ul, ol { padding-inline-start: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -0.018em; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: var(--s3);
}
.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-muted); }
.small { font-size: .84375rem; line-height: 1.5; color: var(--text-muted); }
.prose > * + * { margin-top: var(--s3); }
.prose p { color: var(--text-muted); }
.stars { display: inline-flex; gap: 2px; color: var(--star); letter-spacing: 1px; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: .78125rem;
  font-weight: 700;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 54px;
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--block { display: flex; }

/* ==========================================================================
   4. Quiz shell — logo, back button, progress bar, body
   ========================================================================== */
.quiz-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.quiz-shell__bar {
  padding: var(--s4) var(--gutter) var(--s3);
  max-width: var(--quiz-max);
  width: 100%;
  margin-inline: auto;
}
.quiz-shell__row1 {
  display: flex;
  align-items: center;
  margin-bottom: var(--s3);
}
.quiz-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.quiz-back:disabled { visibility: hidden; }
.quiz-back:hover { background: rgba(18,18,18,.06); }
.quiz-shell__row1-spacer { width: 44px; flex: none; }
.quiz-wordmark {
  flex: 1;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--plum-deep);
}
.quiz-progress {
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.quiz-progress__fill {
  height: 100%;
  background: var(--plum);
  border-radius: var(--r-pill);
  transition: width .25s ease;
}
.quiz-shell__body {
  /* Every screen starts at the same height, directly under the progress bar.
     This used to be `margin-block: auto`, which centred the leftover space --
     so a four-option question sat low, a seven-option question sat high, and
     the question moved down the screen as you answered. The bar is the fixed
     point people track through the quiz; the question should hang off it.

     This padding is the only thing setting that height. Questions,
     interstitials, the email screen and the results screens each used to add
     their own top padding on top of it -- 0, 12, 12 and 8px -- so the first
     line landed somewhere slightly different on each, which is visible as
     soon as you move between them. */
  width: 100%;
  max-width: var(--quiz-max);
  margin-inline: auto;
  padding: var(--s5) var(--gutter) var(--s9);
  animation: quiz-fade-in .25s ease both;
}
/* The one screen with nothing to read: a ring filling and lines ticking off.
   Nothing to align to the top, so it keeps the centred treatment. */
.quiz-shell__body--centre { margin-block: auto; }
/* Opacity only: the 6px translate left every screen 6px taller than the
   viewport, so nothing was ever quite one screenful. */
@keyframes quiz-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   5. Landing — one cohesive plum-to-photo hero, no hard divider.
   ========================================================================== */
.landing { background: var(--plum); }
.landing__grid { display: flex; flex-direction: column; }
.landing__content {
  background: var(--plum);
  color: #fff;
  padding: var(--s6) var(--gutter) var(--s7);
}
.quiz-wordmark--on-plum { display: block; text-align: left; font-size: 1.25rem; color: #fff; margin-bottom: var(--s4); }
.eyebrow--on-plum { color: var(--peach); margin-bottom: var(--s2); }
.landing__headline {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.375rem);
  line-height: 1.15;
  margin-bottom: var(--s3);
}
.landing__lead { color: rgba(255,255,255,.78); margin-bottom: var(--s5); }
.landing__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.landing__bullets li {
  padding-left: 28px;
  position: relative;
}
.landing__bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--peach);
  font-weight: 700;
}
.landing__question { font-weight: 700; margin-bottom: var(--s3); }
.landing__options { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); }
.landing__option { background: #fff; color: var(--text); border: 0; }
.landing__option:hover { background: var(--peach); }
.landing__proof { font-size: .875rem; color: rgba(255,255,255,.72); }
.landing__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.landing__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 22%; }
.landing__media-blend {
  position: absolute;
  inset: 0 0 auto 0;
  height: 30%;
  background: linear-gradient(to bottom, var(--plum), transparent);
  z-index: 1;
}
.landing__credibility { padding: var(--s5) var(--gutter); background: var(--cream); }
/* The strip carries its own generous margins for the results and offer pages,
   where it sits loose on the background. Here it is inside a padded band. */
.landing__credibility .logo-strip { margin: 0; }
.landing__credibility .logo-strip__label { margin-bottom: var(--s4); }
/* A 111-character sentence set bold, uppercase and tiny is the worst
   combination for a long string — eased on all three counts. */
/* Institution logo strip.

   Two things make supplied logo files sit badly in a strip like this:
   they arrive with hard white backgrounds, and their lockups run from very
   wide (NIH) to stacked and near-square (Mayo, Johns Hopkins).

   Transparency is baked into the files themselves — each one was converted
   white-to-alpha so the ground is genuinely gone, rather than relying on
   mix-blend-mode to hide it. JPEG whites are never quite 255, so a blend
   mode left faint boxes around Stanford, Mayo and Hopkins. They are also
   flattened to one dark neutral, which is what makes five institutional
   blues read as a single set rather than five competing brands.

   Height is set per logo via --logo-h so they balance by optical area
   instead of sharing one cap, which would shrink the wide ones to nothing.

   Flex-wrap rather than a grid: with five items the last row is an orphan
   pair, and wrapping centres it instead of leaving it hanging left. */
.logo-strip { margin: var(--s7) 0 var(--s6); }
.logo-strip__label {
  text-align: center;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s5);
}
.logo-strip__row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s5) var(--s6);
}
.logo-strip__item { display: flex; align-items: center; justify-content: center; }
.logo-strip__item img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--logo-h, 32px);
  object-fit: contain;
  opacity: .78;
}

@media (max-width: 429px) {
  .logo-strip__row { gap: var(--s4) var(--s5); }
  .logo-strip__item img { max-height: calc(var(--logo-h, 32px) * .82); }
}

/* No scale-up above 560px: at 1.2x the five marks total wider than the quiz
   column, which orphaned Johns Hopkins onto a second row. The base heights
   already read well here, so only the gap opens up. */
@media (min-width: 560px) {
  .logo-strip__row { gap: var(--s5) var(--s6); }
}

.trust-strip {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .04em;
  max-width: 44ch;
  margin-inline: auto;
  color: var(--text-muted);
  max-width: 720px;
  margin-inline: auto;
}

/* ==========================================================================
   6. Question patterns
   ========================================================================== */
.question-heading { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); margin-bottom: var(--s2); }
/* Question number and, where there is one, the selection rule -- both are
   facts about the screen rather than part of the question, so they sit
   together in one line under the progress bar instead of the rule being
   stranded between the question and the first option. */
.question-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  margin-bottom: var(--s3);
}
.question-meta .eyebrow { margin-bottom: 0; }
.question-helper {
  margin: 0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.question-meta .question-helper::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin-right: var(--s2);
  opacity: .6;
}

.answer-rows { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.answer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: 58px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--e-1);
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.answer-row:hover { border-color: var(--plum); }
.answer-row.is-selected { border-color: var(--plum); background: var(--peach); box-shadow: var(--e-2); }
.answer-row__radio {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
}
.answer-row.is-selected .answer-row__radio { border-color: var(--plum); background: radial-gradient(circle, var(--plum) 0 40%, transparent 42%); }

.answer-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}
.answer-tile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--e-1);
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.answer-tile:hover { border-color: var(--plum); }
.answer-tile.is-selected { border-color: var(--sage); background: var(--sage-tint); }
.answer-tile__check {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid var(--line-strong);
  position: relative;
}
.answer-tile.is-selected .answer-tile__check { border-color: var(--sage); background: var(--sage); }
.answer-tile.is-selected .answer-tile__check::after {
  content: '';
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.answer-continue { margin-top: var(--s6); }

.goal-cards { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.goal-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--e-1);
  text-align: left;
  font-family: var(--serif);
  font-size: 1.125rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.goal-card:hover { border-color: var(--plum); }
.goal-card.is-selected { border-color: var(--plum); background: var(--peach); box-shadow: var(--e-2); }

/* ==========================================================================
   7. Interstitials
   ========================================================================== */
.interstitial__grid {
  display: grid;
  grid-template-areas: "headline" "visual" "copy";
  grid-template-columns: 1fr;
  gap: var(--s5);
  margin-bottom: var(--s7);
}
.interstitial__headline { grid-area: headline; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); }
.interstitial__visual { grid-area: visual; display: flex; justify-content: center; }
.infobit-svg { width: 100%; max-width: 260px; height: auto; }

/* --------------------------------------------------------------------------
   Infobit visuals — small supporting diagrams, built in HTML for legible
   type at mobile sizes. Two deliberately different forms so the second
   infobit doesn't read as a repeat of the first.
   -------------------------------------------------------------------------- */
.infobit-panel,
.infobit-reserve {
  width: 100%;
  max-width: 300px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  padding: var(--s4);
}

.infobit-panel__title,
.infobit-reserve__title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s3);
}

.infobit-panel__list { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.infobit-panel__row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: var(--s2);
  font-size: .8125rem;
  color: var(--text-muted);
}
.infobit-panel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}
.infobit-panel__state { font-size: .6875rem; letter-spacing: .02em; white-space: nowrap; }

/* The one thing the panel actually measures — the only row carrying weight. */
.infobit-panel__row.is-measured { color: var(--text); font-weight: 600; }
.infobit-panel__row.is-measured .infobit-panel__dot { background: var(--sage); border-color: var(--sage); }
.infobit-panel__row.is-measured .infobit-panel__state { color: var(--sage); font-weight: 700; }

/* Cortisol belongs to the stress side of the motif, not the nutrient side. */
.infobit-panel__row--stress .infobit-panel__dot { border-color: var(--clay); }

.infobit-panel__divider {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.infobit-panel__divider::before,
.infobit-panel__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.infobit-reserve__bar {
  display: flex;
  height: 40px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--s3);
}
.infobit-reserve__seg--stress { flex: 62; background: var(--clay); }
.infobit-reserve__seg--thyroid { flex: 38; background: var(--sage-tint); border-left: 2px solid var(--white); }

.infobit-reserve__key { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.infobit-reserve__key-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: .8125rem;
  color: var(--text-muted);
}
.infobit-reserve__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.infobit-reserve__key-item--stress .infobit-reserve__swatch { background: var(--clay); }
.infobit-reserve__key-item--thyroid .infobit-reserve__swatch { background: var(--sage-tint); border: 1px solid var(--sage-line); }
.interstitial__copy { grid-area: copy; }
.interstitial__copy .prose { margin-bottom: var(--s4); }
.interstitial__source { font-size: .75rem; color: var(--text-muted); }
.prose strong { color: var(--plum-deep); font-weight: 700; }

/* ==========================================================================
   8. Email capture
   ========================================================================== */
.email-capture .question-heading { margin-bottom: var(--s2); }
.email-capture .lead { margin-bottom: var(--s6); }
.email-form { display: flex; flex-direction: column; gap: var(--s3); }
.email-input {
  min-height: 54px;
  padding: 15px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-family: var(--sans);
  background: var(--white);
}
.email-input:focus { border-color: var(--plum); }
.email-disclaimer { margin-top: var(--s3); text-align: center; }

/* ==========================================================================
   9. Analysis transition
   ========================================================================== */
.analysis-screen { padding-top: var(--s7); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s6); }
.analysis-ring { width: 132px; height: 132px; }
.analysis-ring__fill { transition: stroke-dashoffset .04s linear; }
.analysis-ring__percent { font-family: var(--sans); }
.analysis-lines { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.analysis-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease, color .4s ease;
}
.analysis-line.is-visible { opacity: 1; transform: translateY(0); color: var(--text); }
.analysis-line__check {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  position: relative;
}
.analysis-line.is-done .analysis-line__check {
  border-color: var(--sage);
  background: var(--sage);
}
.analysis-line.is-done .analysis-line__check::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.analysis-review-carousel {
  width: 100%;
  max-width: 380px;
  transition: opacity .2s ease;
}
.analysis-review-carousel.is-fading { opacity: 0; }
.analysis-review {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: var(--s4);
  text-align: left;
}
.analysis-review__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.analysis-review__quote { font-size: .875rem; margin: 4px 0; }
.analysis-review cite { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--text-muted); }

/* ==========================================================================
   10. Results screens
   ========================================================================== */
.results-headline { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin-bottom: var(--s3); }
.results-headline--sm { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); }
.results-opener { font-size: 1.0625rem; line-height: 1.5; color: var(--text-muted); margin-bottom: var(--s5); }
.results-screen .prose { margin-bottom: var(--s6); }
.results-screen > .btn { margin-top: var(--s7); }

/* Load indicator — restrained 4-segment bar, not a dramatic gauge */
.load-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s7);
}
.load-line__scale { display: inline-flex; gap: 3px; flex: none; }
.load-line__seg { width: 16px; height: 5px; border-radius: var(--r-pill); background: var(--line); }
.load-line__seg.is-filled { background: var(--plum); }
.load-line__text { font-size: .8125rem; color: var(--text-muted); }

/* Personalized pattern ranking */
/* --------------------------------------------------------------------------
   Result 1 verdict — the dial plus the split panel, built to the Bioma
   reference. Fling's clay/sage pair stands in for Bioma's red/green: clay is
   already this project's cortisol/stress side and sage its nutrient side,
   which is exactly the split being drawn. Mobile-first; the panel keeps two
   columns at every width because the left/right opposition IS the idea.
   -------------------------------------------------------------------------- */
.verdict { margin-bottom: var(--s6); }

.verdict__dial { position: relative; max-width: 340px; margin: 0 auto var(--s2); }
.verdict__gauge { width: 100%; height: auto; display: block; }

.verdict__caption {
  text-align: center;
  font-size: .8125rem;
  color: var(--text-muted);
  margin-bottom: var(--s5);
}

.verdict__panel {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

.verdict__heads,
.verdict__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.verdict__heads {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.verdict__head {
  padding: var(--s3);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.verdict__head:first-child { text-align: right; }
.verdict__head:last-child { grid-column: 2; }

.verdict__rows { list-style: none; }
.verdict__row { min-height: 64px; }
.verdict__row + .verdict__row { border-top: 1px solid var(--white); }

.verdict__now,
.verdict__then {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: var(--s3);
  font-size: .8125rem;
  line-height: 1.35;
}
.verdict__now {
  background: var(--clay-tint);
  color: var(--plum-deep);
  justify-content: flex-end;
  text-align: right;
}
/* Regular weight: five bold sentences in a column is not emphasis, and the
   sage tint already separates this side from the other. */
.verdict__then {
  background: var(--sage-tint);
  color: var(--sage);
}

.verdict__note {
  margin-top: var(--s4);
  font-size: .6875rem;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
}

@media (min-width: 768px) {
  .verdict__dial { max-width: 400px; }
  .verdict__now, .verdict__then { font-size: .9375rem; padding: var(--s4); }
  .verdict__row { min-height: 72px; }
}

/* Result 1 masthead — the single accented surface in the results sequence.
   Reuses the landing's plum so arriving at the result closes the loop that
   the landing opened. */
.results-masthead {
  background: var(--plum);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5) var(--s5);
  margin-bottom: var(--s7);
}
.results-masthead__eyebrow { color: var(--peach); }
.results-masthead__headline {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin-bottom: var(--s3);
}
.results-masthead__opener {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
  margin-bottom: var(--s5);
}
.results-masthead .load-line { margin-bottom: 0; padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .18); }
.results-masthead .load-line__text { color: rgba(255, 255, 255, .72); }
.results-masthead .load-line__seg { background: rgba(255, 255, 255, .22); }
.results-masthead .load-line__seg.is-filled { background: var(--peach); }

.pattern-ranking { margin-bottom: var(--s6); }
.pattern-ranking__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--s4); }

.mirror-block { margin-bottom: var(--s3); }
.mirror-block__label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--s3);
}
.mirror-table { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e-1); overflow: hidden; }
/* Mobile: the pair stacks, so the column headings have nothing to head. */
.mirror-table__head { display: none; }
.mirror-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "now then";
  align-items: baseline;
  gap: 2px var(--s2);
  padding: 14px var(--s4);
  border-bottom: 1px solid var(--line);
}
.mirror-row:last-child { border-bottom: 0; }
.mirror-row__now { grid-area: now; font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }
.mirror-row__arrow { grid-area: arrow; color: var(--sage-line); }
.mirror-row__then { grid-area: then; font-size: .9375rem; font-weight: 600; color: var(--sage); }

/* Nutrient 3-stage meter */
/* --------------------------------------------------------------------------
   Result 2 — the "root cause" scale, built to the Bioma reference: verdict
   as a large coloured word in a callout, the callout's tail pointing down at
   her actual position, all inside one card. Clay = depleted end, sage =
   supported end, matching Result 1's dial so the two read as one system.
   -------------------------------------------------------------------------- */
.verdict-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: var(--s5) var(--s4) var(--s4);
  margin-bottom: var(--s6);
}

.scale { margin-bottom: var(--s5); }

.scale__callout {
  position: relative;
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  margin-bottom: 18px;
}
.scale__callout.is-adequate { background: var(--sage-tint); }
.scale__callout.is-low { background: var(--clay-tint); }

/* The tail sits under her marker, so the label is visibly attached to the
   position rather than just floating above the bar. */
.scale__callout::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--marker, 50%);
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: var(--sage-tint);
  border-bottom: 0;
}
.scale__callout.is-low::after { border-top-color: var(--clay-tint); }

.scale__callout-label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.scale__callout-value {
  display: block;
  font-family: var(--serif);
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.scale__callout.is-adequate .scale__callout-value { color: var(--sage); }
/* Clay on clay-tint measured 2.04:1 — this is the whole verdict of the
   screen, so it takes the readable token and clay stays a fill. */
.scale__callout.is-low .scale__callout-value { color: var(--plum-deep); }

.scale__track {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--clay) 0%,
    var(--clay-tint) 34%,
    var(--sage-tint) 66%,
    var(--sage) 100%);
}
.scale__marker {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--plum-deep);
  box-shadow: var(--e-1);
}
.scale__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--text-muted);
}
.scale__labels span:nth-child(2) { text-align: center; }
.scale__labels span:last-child { text-align: right; }

.verdict-card__body { font-size: .9375rem; line-height: 1.6; color: var(--text-muted); }

.input-status { display: inline-block; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: var(--s4); }
.input-status.is-adequate { background: var(--sage-tint); color: var(--sage); }
.input-status.is-low { background: var(--clay-tint); color: var(--plum-deep); }
.input-summary { margin-top: var(--s5); }
.input-summary__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--s3); }
.input-summary__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.input-summary__list li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s2); font-size: .875rem; }
.input-summary__mark { text-align: center; }
.input-summary__list li.is-checked { color: var(--text); }
.input-summary__list li.is-checked .input-summary__mark { color: var(--sage); font-weight: 700; }
.input-summary__list li.is-unchecked { color: var(--text-muted); }
.input-summary__list li.is-unchecked .input-summary__mark { color: var(--line-strong); }

.expectation-chart-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1); padding: var(--s5) var(--s4) var(--s4); margin-bottom: var(--s6); }
/* Four equal columns whose centres line up with the SVG's stage marks, so
   the period label sits directly above its mark and the phrase directly
   below it at any width — no measurement JS. */
.progression-chart { width: 100%; height: auto; display: block; }
.progression-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s1);
}
.progression-row > * { text-align: center; }
.progression-row--weeks { margin-bottom: var(--s1); }
.progression-week {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--plum-deep);
}
.progression-legend {
  display: flex;
  justify-content: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s3);
}
.progression-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: .75rem;
  color: var(--text-muted);
}
.progression-legend__line { width: 18px; height: 3px; border-radius: var(--r-pill); }
.progression-legend__item.is-main { font-weight: 700; color: var(--plum-deep); }
.progression-legend__item.is-main .progression-legend__line { background: var(--plum); }
.progression-legend__item.is-compare .progression-legend__line { background: var(--clay); }

.progression-row--copy { margin-top: var(--s2); }
.progression-copy {
  font-size: .6875rem;
  line-height: 1.3;
  color: var(--text-muted);
  padding-inline: 2px;
}

/* Below 400px a four-across copy row is four 58px slivers running to three
   lines each. The week labels stay aligned to their marks; the phrases drop
   to a readable 2x2 where alignment is worth less than legibility. */
@media (max-width: 399px) {
  .progression-row--copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2) var(--s4);
    margin-top: var(--s3);
  }
}

@media (min-width: 480px) {
  .progression-week { font-size: .75rem; }
  .progression-copy { font-size: .75rem; }
}

/* Practical guidance — routine timeline (diagnosed) */
/* Was `display:flex` in row direction, so the dot and the rail sat side by
   side; and `flex:1` on the span overrode its 2px width, rendering the rail
   as a 10px slab beside the dots instead of a line under them. */

/* Unsure checklist */

/* No overlap onto the first benefit card: the reference's bottle is a
   cut-out PNG, this is a full photo with its own background, so any overlap
   hides the card's copy instead of sitting on top of it. */
.product-shot { width: min(460px, 92vw); margin: var(--s4) auto var(--s5); border-radius: var(--r-md); }
/* --------------------------------------------------------------------------
   Product reveal — the approved trust claims pressed into circular stamps,
   alternating sides down the column, per the Bioma reference.

   The stamp sits INSIDE the card rather than overlapping its edge. Overlap
   was the original reading of the reference, but Bioma's badges straddle a
   tall pill's straight side, while these cards are two or three lines and
   change height with the copy — so the rosette kept crossing a rounded
   corner, and where it crossed moved from row to row. Containing it makes
   the join exact at every width and every copy length.
   -------------------------------------------------------------------------- */
.benefit-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.benefit-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--peach);
  border-radius: var(--r-md);
  padding: var(--s4);
}
.benefit-row.is-stamp-end { flex-direction: row-reverse; }

.benefit-row__stamp { flex: none; width: 72px; }
.benefit-row__text { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.45; }

.stamp { width: 100%; height: auto; display: block; color: var(--peach); }
.stamp__text {
  font-family: var(--sans);
  font-size: 7px;
  font-weight: 700;
  /* "REGISTERED FACILITY" is the longest label and touches the rosette
     edge at wider tracking. */
  letter-spacing: .05em;
  fill: var(--peach);
}
.stamp__initials {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  fill: var(--peach);
}
.stamp__glyph { color: var(--peach); }

@media (min-width: 560px) {
  .benefit-row { gap: var(--s5); padding: var(--s5); }
  .benefit-row__stamp { width: 84px; }
  .benefit-row__text { font-size: .9375rem; }
}

.benefit-list__lead { font-weight: 600; }
.benefit-list__detail { color: var(--text-muted); }

.formula-section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: var(--s5) 0 var(--s2); }
/* Facts panel — the real Supplement Facts image under a plum header bar,
   which is the reference's dark-header treatment in Fling's colours. The
   panel itself is never redrawn; only its frame. */
.facts-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  margin-bottom: var(--s5);
}
.facts-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--plum-deep);
}
.facts-panel__title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--peach);
}
.facts-panel__zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(246, 230, 216, .35);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--peach);
  font-size: .6875rem;
  font-weight: 600;
  cursor: zoom-in;
  transition: background-color .18s ease;
}
.facts-panel__zoom:hover { background: rgba(246, 230, 216, .14); }
.facts-panel__zoom svg { width: 14px; height: 14px; flex: none; }
.supplement-facts { width: 100%; display: block; }

/* --------------------------------------------------------------------------
   Result 6 — "what to expect" phases. Four headings by default; the approved
   paragraph for each opens on demand. Keeps the copy, loses the wall.
   -------------------------------------------------------------------------- */
.dose-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  margin-bottom: var(--s6);
  background: var(--peach);
  border-radius: var(--r-md);
}
.dose-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--plum-deep);
}
.dose-card__mark svg { width: 28px; height: 28px; }
.dose-card__amount { display: block; font-family: var(--serif); font-size: 1.375rem; line-height: 1.1; color: var(--plum-deep); }
.dose-card__when { display: block; font-size: .875rem; color: var(--text-muted); margin-top: 2px; }

/* Attribute grid — three across, line marks over the approved wording. */
.formula-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5) var(--s3);
  margin: var(--s6) 0 var(--s3);
}
.formula-attr { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.formula-icon { width: 34px; height: 34px; color: var(--plum); }
.formula-attr__label { font-size: .75rem; font-weight: 600; line-height: 1.25; }

/* Phase rail — the four periods are a sequence, so the rows are joined by a
   rail with a node each, rather than reading as unrelated toggles. */
.phase__node {
  flex: none;
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--plum);
  background: var(--white);
}
.phase-list { position: relative; }
.phase-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--line);
}

/* Supplement Facts — inline it is a thumbnail of fine print, so it opens
   full-size in a dialog. Explicit centering because the global `* { margin:0 }`
   reset strips the <dialog> UA stylesheet's auto-centering (same fix and same
   root cause as the landing page's video lightbox). */

.facts-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--e-3);
}
.facts-dialog::backdrop { background: rgba(18, 18, 18, .55); }
/* Sized by height, not width: on a phone the panel has to overflow and pan
   to be readable at all — capping it to the viewport width just reproduces
   the unreadable thumbnail at a slightly larger size. */
.facts-dialog img {
  width: auto;
  max-width: none;
  height: 74dvh;
  border-radius: var(--r-sm);
}
@media (min-width: 620px) {
  .facts-dialog img { width: 100%; height: auto; }
}
.facts-dialog__close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--peach);
  color: var(--plum-deep);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

/* Timeline, not an accordion — the client asked for no disclosure controls
   on this screen, so every phase is visible and the rail carries the order. */
.phase-list {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  margin-bottom: var(--s6);
  padding-left: var(--s5);
}
.phase-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.phase { position: relative; }
.phase__node {
  position: absolute;
  left: calc(var(--s5) * -1);
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--plum);
  background: var(--cream);
}
.phase__name { font-weight: 700; font-size: .9375rem; margin-bottom: 2px; }
.phase__copy { font-size: .875rem; line-height: 1.55; color: var(--text-muted); }

.formula-section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: var(--s5) 0 var(--s2); }
/* Facts panel — the real Supplement Facts image under a plum header bar,
   which is the reference's dark-header treatment in Fling's colours. The
   panel itself is never redrawn; only its frame. */
.facts-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  margin-bottom: var(--s5);
}
.facts-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--plum-deep);
}
.facts-panel__title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--peach);
}
.facts-panel__zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(246, 230, 216, .35);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--peach);
  font-size: .6875rem;
  font-weight: 600;
  cursor: zoom-in;
  transition: background-color .18s ease;
}
.facts-panel__zoom:hover { background: rgba(246, 230, 216, .14); }
.facts-panel__zoom svg { width: 14px; height: 14px; flex: none; }
.supplement-facts { width: 100%; display: block; }

/* --------------------------------------------------------------------------
   Result 6 — "what to expect" phases. Four headings by default; the approved
   paragraph for each opens on demand. Keeps the copy, loses the wall.
   -------------------------------------------------------------------------- */
.dose-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  margin-bottom: var(--s6);
  background: var(--peach);
  border-radius: var(--r-md);
}
.dose-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--plum-deep);
}
.dose-card__mark svg { width: 28px; height: 28px; }
.dose-card__amount { display: block; font-family: var(--serif); font-size: 1.375rem; line-height: 1.1; color: var(--plum-deep); }
.dose-card__when { display: block; font-size: .875rem; color: var(--text-muted); margin-top: 2px; }

/* Attribute grid — three across, line marks over the approved wording. */
.formula-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5) var(--s3);
  margin: var(--s6) 0 var(--s3);
}
.formula-attr { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.formula-icon { width: 34px; height: 34px; color: var(--plum); }
.formula-attr__label { font-size: .75rem; font-weight: 600; line-height: 1.25; }

/* Phase rail — the four periods are a sequence, so the rows are joined by a
   rail with a node each, rather than reading as unrelated toggles. */
.phase__node {
  flex: none;
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--plum);
  background: var(--white);
}
.phase-list { position: relative; }
.phase-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--line);
}

/* Supplement Facts — inline it is a thumbnail of fine print, so it opens
   full-size in a dialog. Explicit centering because the global `* { margin:0 }`
   reset strips the <dialog> UA stylesheet's auto-centering (same fix and same
   root cause as the landing page's video lightbox). */

.facts-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--e-3);
}
.facts-dialog::backdrop { background: rgba(18, 18, 18, .55); }
/* Sized by height, not width: on a phone the panel has to overflow and pan
   to be readable at all — capping it to the viewport width just reproduces
   the unreadable thumbnail at a slightly larger size. */
.facts-dialog img {
  width: auto;
  max-width: none;
  height: 74dvh;
  border-radius: var(--r-sm);
}
@media (min-width: 620px) {
  .facts-dialog img { width: 100%; height: auto; }
}
.facts-dialog__close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--peach);
  color: var(--plum-deep);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.phase-list { margin-bottom: var(--s6); border-top: 1px solid var(--line); }
.phase__name { flex: 1; }
.phase__body { padding-left: var(--s5); }
/* Plus that becomes a minus — the bar rotates away rather than swapping icon. */
.phase[open] .phase__body {
  padding-bottom: var(--s4);
  font-size: .9375rem;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  }

.timing-list { list-style: none; counter-reset: timing; display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s6); }
.timing-list li { color: var(--text-muted); font-size: .9375rem; }
.timing-list li strong { color: var(--text); }
.formula-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }

/* The creative is the whole screen — it carries the stars, the quote, the
   name and the count in its own pixels. */
.customer-creative {
  width: 100%;
  border-radius: var(--r-lg);
  margin-bottom: var(--s6);
}

/* Review rows — photo beside the quote, per the client-supplied reference.
   The photo column is fixed so every row aligns down the page regardless of
   quote length, and the images are 3:4 to match how the source stills frame
   the creator and the product. */
.review-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  margin-bottom: var(--s6);
}
.review-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
.review-row__photo {
  width: 72px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}
.review-row__body .stars { font-size: .8125rem; margin-bottom: var(--s2); }
.review-row__quote { font-size: .875rem; line-height: 1.45; margin-bottom: var(--s2); }
.review-row__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.review-row__meta cite { font-style: normal; font-size: .8125rem; font-weight: 700; }
.review-row__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--sage);
}
.review-row__verified::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sage);
  /* tick drawn in the mask so it stays crisp at any zoom */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/120% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/120% no-repeat;
}

@media (min-width: 560px) {
  .review-row { grid-template-columns: 92px minmax(0, 1fr); gap: var(--s5); }
  .review-row__photo { width: 92px; }
  .review-row__quote { font-size: .9375rem; }
}

.review-summary { font-weight: 700; margin-bottom: var(--s4); }
.testimonial-single { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1); padding: var(--s6); }
.testimonial-single p { font-family: var(--serif); font-size: 1.0625rem; margin-bottom: var(--s4); }
.testimonial-single cite { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--text-muted); }

.mirror-block { margin-bottom: var(--s3); }
.mirror-block__label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--s3);
}
.mirror-table { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--e-1); overflow: hidden; }
/* Mobile: the pair stacks, so the column headings have nothing to head. */
.mirror-table__head { display: none; }
.mirror-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "now then";
  align-items: baseline;
  gap: 2px var(--s2);
  padding: 14px var(--s4);
  border-bottom: 1px solid var(--line);
}
.mirror-row:last-child { border-bottom: 0; }
.mirror-row__now { grid-area: now; font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }
.mirror-row__arrow { grid-area: arrow; color: var(--sage-line); }
.mirror-row__then { grid-area: then; font-size: .9375rem; font-weight: 600; color: var(--sage); }

/* NOTE: a stale duplicate of the results-screen block used to sit here.
   It was a second, older copy of ~25 selectors that — being later in the
   file at equal specificity — silently won over the current rules. It was
   overriding the .input-status pill, .supplement-facts spacing, .dosing-row
   and .testimonial-card--wide. Removed; the live definitions are above. */

/* ==========================================================================
   11. Offer page — deliberately separate from the quiz shell: no progress
   bar, no back-arrow chrome, wider ecommerce-styled container.
   ========================================================================== */
.offer-page { background: var(--cream); min-height: 100vh; }
.offer-wrap { max-width: 1150px; margin-inline: auto; padding-inline: var(--gutter); }

.offer-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--s5) var(--gutter);
  max-width: 1150px;
  margin-inline: auto;
}
.offer-back {
  position: absolute;
  left: var(--gutter);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 4px;
}
.offer-back:hover { color: var(--text); }
.offer-header-spacer { display: none; }

.offer-hero { padding-block: var(--s7) var(--s6); text-align: center; }
.offer-hero__inner { display: flex; flex-direction: column; align-items: center; }
.offer-headline { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: var(--s3); max-width: 760px; margin-inline: auto; text-wrap: balance; }
.offer-subline { text-align: center; max-width: 54ch; margin-inline: auto; margin-bottom: 0; text-wrap: pretty; }

.offer-cards-section { padding-block: var(--s6) var(--s8); }
.offer-cards { display: flex; flex-direction: column; gap: var(--s5); margin-bottom: var(--s5); }

.offer-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.offer-card.is-recommended { border-color: var(--plum); }
.offer-card.is-selected { box-shadow: var(--e-2); }
.offer-card__top-badge {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  z-index: 1;
  background: var(--plum);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.offer-card__image { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 40%; background: var(--peach); }
.offer-card__body { padding: var(--s5); }
.offer-card__label { font-weight: 700; font-size: 1.0625rem; }
.offer-card__supply { font-weight: 400; color: var(--text-muted); }
.offer-card__badge { font-size: .8125rem; color: var(--plum); font-weight: 600; margin-bottom: var(--s3); }
.offer-card__price-row { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.offer-card__price-now { font-size: 1.5rem; font-weight: 700; }
.offer-card__price-was { font-size: .875rem; text-decoration: line-through; color: var(--text-muted); }
.offer-card__save { font-size: .75rem; font-weight: 700; color: var(--sage); background: var(--sage-tint); padding: 3px 8px; border-radius: var(--r-pill); }
.offer-card__per-day { margin-bottom: var(--s4); }
.offer-card__cta { margin-bottom: var(--s2); }
.offer-card__reassurance { text-align: center; }

/* --------------------------------------------------------------------------
   Bonuses. Every gift is itemised on every card with its own artwork, so the
   panel is a recessed sage well inside the white card — sage already carries
   "free / saved" on this page (the save pill, the FREE tags), so it needed no
   new colour. Tiles sit on white to lift the product cut-outs off the well.
   -------------------------------------------------------------------------- */
.bonus-panel {
  background: var(--sage-tint);
  border-radius: var(--r-md);
  padding: var(--s3);
  margin-bottom: var(--s4);
}
.bonus-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding-inline: var(--s1);
}
.bonus-panel__title { font-size: .8125rem; font-weight: 700; color: var(--sage); }
.bonus-panel__pill {
  flex: none;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sage);
  padding: 4px 9px;
  border-radius: var(--r-pill);
}
/* One column, not the reference's 2x2: these cards are ~280px of content in
   the 3-up desktop grid, and two columns of that put "Thyroid Health Guide"
   on three lines beside its thumbnail. */
.bonus-grid { list-style: none; display: grid; gap: var(--s2); }
.bonus-tile {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--white);
  border-radius: var(--r-sm);
  padding: var(--s2);
  min-width: 0;
}
.bonus-tile__thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--peach);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bonus-tile__thumb img { width: 100%; height: 100%; object-fit: contain; }
.bonus-tile__thumb--mark { color: var(--plum); }
.bonus-tile__thumb--mark svg { width: 21px; height: 21px; }
.bonus-tile__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bonus-tile__name {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.25;
  /* Names run to three words; wrapping beats truncating them. */
  overflow-wrap: anywhere;
}
.bonus-tile__price { display: flex; align-items: baseline; gap: 5px; font-size: .6875rem; }
.bonus-tile__free { font-weight: 700; color: var(--sage); text-transform: uppercase; letter-spacing: .04em; }
.bonus-tile__was { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bonus-tile__note { font-size: .625rem; color: var(--text-muted); line-height: 1.3; }

.bonus-none {
  padding: var(--s3) 0;
  margin-bottom: var(--s3);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Quantity stepper — the one-time card's counterpart to the bonus panel.
   A one-time order has no gifts to list, so the only thing left to choose is
   how many bags.
   -------------------------------------------------------------------------- */
.qty-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  background: var(--peach);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  margin-bottom: var(--s3);
}
.qty-panel__label { font-size: .8125rem; font-weight: 700; }
.qty-stepper { display: flex; align-items: center; gap: var(--s1); }
.qty-stepper__btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--plum);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.qty-stepper__btn svg { width: 16px; height: 16px; }
.qty-stepper__btn:hover:not(:disabled) { border-color: var(--plum); }
.qty-stepper__btn:active:not(:disabled) { transform: scale(.92); }
.qty-stepper__btn:disabled { opacity: .38; cursor: not-allowed; }
.qty-stepper__value {
  min-width: 2ch;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.offer-card__onetime-note { margin-bottom: var(--s4); }

/* --------------------------------------------------------------------------
   Purchase-mode segmented control (subscribe / one-time).
   Track sits on the page background; the active segment is a raised plum
   surface. Pressed state fires on pointer-down, not on release.
   -------------------------------------------------------------------------- */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--s1);
  padding: var(--s1);
  margin-bottom: var(--s5);
  background: var(--peach);
  border-radius: var(--r-pill);
}
.mode-toggle__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: var(--r-pill);
  padding: var(--s3) var(--s4);
  text-align: center;
  color: var(--text-muted);
  transition: background-color .18s ease, color .18s ease, transform .1s ease;
}
.mode-toggle__btn:active { transform: scale(.985); }
.mode-toggle__btn.is-active {
  background: var(--white);
  box-shadow: var(--e-1);
  color: var(--ink);
}
.mode-toggle__label { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.mode-toggle__btn.is-active .mode-toggle__label { font-weight: 700; }
.mode-toggle__sublabel { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 2px; opacity: .75; }
.mode-toggle__btn.is-active .mode-toggle__sublabel { color: var(--sage); opacity: 1; }

.offer-cards--single { max-width: 420px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .mode-toggle__btn { transition: none; }
  .mode-toggle__btn:active { transform: none; }
  .qty-stepper__btn { transition: none; }
  .qty-stepper__btn:active { transform: none; }
}

.prose-note { background: var(--sage-tint); border-radius: var(--r-md); padding: var(--s4); font-size: .875rem; margin-bottom: var(--s5); }
.checkout-guarantee { text-align: center; margin-top: var(--s4); }
.checkout-onetime { text-align: center; margin-top: var(--s2); }

.full-trust-bar { padding-block: var(--s6); background: var(--peach); max-width: none; }

.recommendation-section { background: var(--sage-tint); padding-block: var(--s8); }
.recommendation-grid { display: flex; flex-direction: column; gap: var(--s6); align-items: center; }
.recommendation-visual { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1); padding: var(--s5); width: 100%; }
.recommendation-copy { width: 100%; }
.recommendation-plan { font-family: var(--serif); font-size: 1.375rem; margin-bottom: var(--s3); }


.offer-footer { padding-block: var(--s7); border-top: 1px solid var(--line); }
.legal { font-size: .75rem; color: var(--text-muted); text-align: center; max-width: 640px; margin-inline: auto; }
.legal + .legal { margin-top: var(--s3); }

/* ==========================================================================
   12. Responsive ≥768px / ≥1024px — quiz stays a focused column, results/
   product widen slightly, never simply stretched full-bleed.
   ========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .mirror-block__label { display: none; }
  .mirror-table__head {
    display: grid; grid-template-columns: 1fr auto 1fr;
    padding: 12px var(--s4);
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--cream);
    border-bottom: 1px solid var(--line);
  }
  .mirror-table__head span:last-child { grid-column: 3; }
  .mirror-row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "now arrow then";
    align-items: center;
    gap: var(--s2);
  }
  .mirror-row__now { font-size: .9375rem; }
  .quiz-shell__body { padding-top: var(--s6); padding-bottom: 96px; }
  .product-shot { width: 500px; }
  .offer-headline { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem); }
}

@media (min-width: 1024px) {
  .offer-cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--s5); }
  .offer-cards--single { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .mode-toggle { max-width: 460px; margin-inline: auto; }
  .offer-card.is-recommended { transform: translateY(-8px); }
  .recommendation-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .recommendation-grid { display: grid; }
}

@media (min-width: 1024px) {
  :root { --quiz-max: 720px; }
  .landing__grid { flex-direction: row; min-height: 640px; }
  .landing__content { flex: 0 0 53%; display: flex; flex-direction: column; justify-content: center; padding: var(--s9) clamp(32px, 5vw, 80px); }
  .landing__headline { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 2.75rem); }
  .landing__media { flex: 1; aspect-ratio: auto; }
  .landing__media-blend {
    inset: 0 auto 0 0;
    width: 12%;
    height: auto;
    background: linear-gradient(to right, var(--plum), transparent);
  }
  .landing__options { flex-direction: row; }
  .landing__options .landing__option { flex: 1; }
  .interstitial__grid {
    grid-template-areas: "headline visual" "copy visual";
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
  .interstitial__visual { justify-content: flex-end; padding-top: var(--s2); }
      }

/* ==========================================================================
   13. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .quiz-shell__body { animation: none; }
  .analysis-line { transition: none; }
  * { scroll-behavior: auto !important; }
}