/* The Health Desk — Funnel
   Built from Figma file Y1QdjDA2pR8FGibclyMp2A
   Frames: Bridge / Mobile (1:2), Quiz / Mobile (8:2), Squeeze / Mobile (8:42), Privacy / Mobile (8:78)
   Values transcribed from the design. Do not adjust without re-checking Figma. */

/* ---------- Tokens ---------- */
:root {
  --navy:            #0c1e3a;
  --navy-text:       #16233c;
  --blue:            #1c55b8;
  --blue-light:      #7fb0f0;
  --orange:          #ffa238;
  --orange-grad-a:   rgb(255, 137, 58);
  --orange-grad-b:   rgb(226, 156, 54);
  --green:           #2e9e5e;
  --green-light:     #7fd8a6;
  --body-on-navy:    #c7d4e6;
  --muted-on-navy:   #9fb2d0;
  --footer-text:     #b3c3da;
  --grey-text:       #5a6b82;
  --placeholder:     #8a99ae;
  --card-text:       #f2f2f7;
  --tint:            #f4f7fc;
  --hairline:        #e4eaf2;
  --field-border:    #d6dfec;
  --ring:            #b8cdee;

  --frame:           430px;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  font-family: var(--font-body);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
p   { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }

/* The Figma artboard is 430px wide. Section backgrounds run full-bleed;
   the content column is held at the artboard width and centred. */
.wrap {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
}

/* ---------- Masthead ---------- */
.masthead { background: var(--navy); }

.masthead .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px 18px;
}

.wordmark {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: #ffffff;
}

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-light);
  letter-spacing: 2.08px;
}

.eyebrow--blue {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 2.38px;
  text-align: center;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.72px;
}

.display .accent { color: var(--orange); }

.lede {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.36px;
  color: var(--body-on-navy);
  text-align: center;
}

/* ---------- CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 70px;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(-89.69deg, var(--orange-grad-a) 2.7964%, var(--orange-grad-b) 106.24%);
  box-shadow: 0 0 20px 0 var(--orange);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.08px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}

.cta--334 { width: 334px; max-width: 100%; }

.cta--sm {
  height: 51px;
  font-size: 16px;
  letter-spacing: 0.96px;
}

.cta--207 { width: 207px; max-width: 100%; }
.cta--full { width: 100%; padding-left: 24px; padding-right: 24px; }

/* ============================================================
   BRIDGE  (1:2)
   ============================================================ */

/* Hero — 1:6 */
.bridge-hero { background: var(--navy); }

.bridge-hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 26px 26px 23px;
}

.guarantee {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-light);
}

/* Trust strip — 2:2 */
.trust-strip { background: var(--navy); }

.trust-strip .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 24px 20px;
}

.trust-strip p {
  font-size: 18px;
  font-weight: 600;
  color: var(--body-on-navy);
}

/* Offer section — 2:6 */
.offer-section { background: var(--navy); }

.offer-section .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 32px 22px 24px;
}

/* Ingredient panel — 2:8 */
/* Now holds the supplied ingredients graphic, which carries its own labels. */
.ingredient-panel {
  width: 370px;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  line-height: 0;
}

.ingredient-panel img {
  width: 100%;
  height: auto;
}

/* Supplied product creative inside the offer card.
   Negative margins cancel the card's 24px side padding so this image
   renders the same width as the ingredient panel above it. */
.product-shot {
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 18px;
  overflow: hidden;
  line-height: 0;
}

.product-shot img {
  width: 100%;
  height: auto;
}

/* Offer card — 2:7 (no fill; drop shadow only) */
.offer-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 24px 28px;
  border-radius: 24px;
  filter: drop-shadow(0 12px 30px rgba(13, 31, 59, 0.18));
}

.offer-card .product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 70px;
  line-height: normal;
  color: #ffffff;
}

.offer-card .eyebrow--blue { letter-spacing: 2.38px; }

.offer-card .card-lede {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.36px;
  color: var(--grey-text);
  text-align: center;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.benefit .tick {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
}

.benefit p {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--card-text);
}

.offer-card .guarantee-line {
  width: 100%;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-light);
  text-align: center;
}

.offer-card .ships-line {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-text);
  text-align: center;
}

/* ============================================================
   QUIZ  (8:2)
   ============================================================ */

.quiz-hero { background: var(--navy); }

.quiz-hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 26px 44px;
}

.quiz-hero .eyebrow { letter-spacing: 2.6px; }

.quiz-hero .lede {
  font-size: 17px;
  letter-spacing: normal;
}

/* Question section — 8:13 */
.question-section { background: var(--tint); }

.question-section .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 24px 52px;
}

.question-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.question-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}

.progress {
  width: 100%;
  height: 8px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 160px;
  max-width: 100%;
  height: 8px;
  background: var(--blue);
  border-radius: 999px;
}

.question-text {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: normal;
  letter-spacing: -0.44px;
  color: var(--navy);
  text-align: center;
}

.option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.option .ring {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.option p {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}

/* Opt-in — 8:28 */
.optin { background: #ffffff; }

.optin .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 30px 44px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: normal;
  letter-spacing: -0.56px;
  color: var(--navy);
  text-align: center;
}

.section-title .accent { color: var(--orange); }

.optin .sub {
  width: 100%;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: var(--grey-text);
  text-align: center;
}

.optin .fine-print {
  width: 100%;
  font-size: 12.5px;
  color: var(--grey-text);
  text-align: center;
}

.optin-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Email field — 8:31 */
.field {
  width: 100%;
  padding: 15px 16px;
  background: #ffffff;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--navy);
}

.field::placeholder { color: var(--placeholder); }
.field:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ============================================================
   SQUEEZE  (8:42)
   ============================================================ */

.squeeze-hero {
  background: var(--navy);
  box-shadow: 0 4px 25px 0 #4c3b3b;
}

.squeeze-hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 26px 28px 52px;
}

.squeeze-hero .display { line-height: 1.06; }

.squeeze-hero .lede {
  font-size: 17px;
  letter-spacing: normal;
}

/* Field on navy — 8:50 (white, no border) */
.field--onnavy {
  padding: 16px 18px;
  border: 0;
}

.consent {
  width: 100%;
  font-size: 13px;
  color: var(--muted-on-navy);
  text-align: center;
}

/* What is inside — 8:55 */
.inside { background: #ffffff; }

.inside .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 52px 28px;
}

.inside .eyebrow--blue { letter-spacing: 3.4px; }

.inside-list {
  width: 100%;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inside-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.inside-item .tick {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
}

.inside-item p {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
}

/* ============================================================
   PRIVACY  (8:78)
   ============================================================ */

.policy-title .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 28px 20px;
}

.policy-title .eyebrow--blue { letter-spacing: 3.74px; }

.policy-title h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: normal;
  color: var(--navy);
}

.policy-title .updated {
  font-size: 15px;
  color: var(--grey-text);
}

.policy-body .wrap {
  padding: 20px 28px 40px;
}

.policy-body h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
}

.policy-body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy-text);
  margin: 0 0 22px;
}

.policy-body p:last-child { margin-bottom: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer { background: var(--navy); }

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 36px 26px;
}

.site-footer--bridge .wrap { padding: 40px 26px; }

.site-footer p {
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--footer-text);
}

.site-footer .copyright {
  font-weight: 500;
  line-height: normal;
  color: var(--muted-on-navy);
}

/* ============================================================
   ADDITIONS BEYOND THE FIGMA FILE
   The design does not specify these states or elements.
   They reuse existing tokens only, no new colours.
   ============================================================ */

/* Wordmark as a home link */
a.wordmark { text-decoration: none; }
a.wordmark:hover { opacity: 0.85; }

/* Footer legal links */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.footer-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-on-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-links a:hover { color: #ffffff; }

/* Focus visibility, required for keyboard and screen-reader users */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Quiz interaction states ---------- */

/* .option becomes a real button. Reset UA styles, keep the designed look. */
button.option {
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 120ms ease, background-color 120ms ease;
}

button.option:hover { border-color: var(--ring); }

button.option[aria-checked="true"] {
  border-color: var(--blue);
  background: #ffffff;
}

button.option[aria-checked="true"] .ring circle {
  stroke: var(--blue);
  fill: var(--blue);
  stroke-width: 2;
  r: 4;
}

.progress span { transition: width 200ms ease; }

/* Back control under the options */
.quiz-back {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.quiz-back:hover { color: var(--blue); }
.quiz-back[hidden] { display: none; }

/* ---------- Quiz result ---------- */

.result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.result .eyebrow--blue {
  font-size: 12px;
  letter-spacing: 2.38px;
}

.result h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.52px;
  color: var(--navy);
  text-align: center;
}

.result .result-lede {
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey-text);
  text-align: center;
}

.result-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.result-disclaimer {
  width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grey-text);
  text-align: center;
}

.result-restart {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Error / 404 ---------- */

.notfound .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 72px 28px;
  text-align: center;
}

.notfound h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.68px;
  color: var(--navy);
}

.notfound p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--grey-text);
}

/* ---------- Motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Inline links inside policy body copy */
.policy-body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}