/* Article template v3: /answers, /conditions, /medications, /guides, /compare.
   Loaded after handoff-article.css and article-polish.css on converted pages
   (scripts/apply-article-v3.mjs). Palette and type follow design.html. */

body.hf { background: #faf9f6; }

/* No site header on article pages (desktop bar, mobile bar and its menu) */
body.hf .hf-head, body.hf .hf-mhead, body.hf .hf-menu { display: none !important; }

/* Footer sits on the page colour, not white (the white is an inline style) */
body.hf footer.ft-wrap { background: #faf9f6 !important; }

/* ---------- Hero: answer left, image right ---------- */
.v3-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 56px 0 0;
}
.v3-hero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.v3-hero .hf-crumbs { font-size: 15px; color: #4a4a4a; }
.v3-hero .hf-crumbs a { color: #4a4a4a; }
/* the current page repeats the title right below, so the trail stops at the section */
.v3-hero .hf-crumbs .hf-here, .v3-hero .hf-crumbs span:has(+ .hf-here) { display: none; }
body.hf .v3-hero h1,
body.hf .v3-hero .hf-h1 {
  margin: 0;
  max-width: none;
  font-family: Newsreader, Georgia, serif;
  font-weight: 300;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #1d1d1f;
}
.v3-byline { font-size: 15px; color: #4a4a4a; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.v3-sign { font-family: Caveat, cursive; font-weight: 500; font-size: 24px; line-height: 1; color: #1d1d1f; }
.v3-answer { border-top: 1px solid #e5e3dd; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 96px; }
.v3-lead {
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.4;
  color: #1d1d1f;
}
.v3-sub { margin: 0; font-size: 16px; line-height: 1.6; color: #4a4a4a; }
.v3-hero-img { margin: 0; }
.v3-hero-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #efede7; }

/* ---------- Body: one readable column ---------- */
body.hf .hf-main { grid-template-columns: minmax(0, 768px); justify-content: center; gap: 0; padding-top: 56px; }
body.hf .hf-aside { display: none; }
body.hf .hf-article { gap: 56px; }
body.hf .hf-h2,
body.hf .hf-faq .hf-h2 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
body.hf .hf-p, body.hf .hf-sec > p { font-size: 18px; line-height: 1.65; color: #4a4a4a; }

/* CTAs and callouts use the design-system radii */
body.hf .gd2-top, body.hf .gd2-ask { border-radius: 10px; }
body.hf .gd2-top { margin: 0; }
body.hf .hf-banner { border-radius: 10px; }
body.hf .hf-banner .hf-glass { border-radius: 10px; }
body.hf .hf-banner .hf-glass .hf-t {
  font-family: Newsreader, Georgia, serif;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
body.hf .hf-emg { border-radius: 10px; }
body.hf .hf-consult { border-radius: 10px; }

/* FAQ: stone cards with serif questions */
body.hf .hf-faq details { background: #efede7; border: 0; border-radius: 8px; margin-bottom: 8px; padding: 0 20px; }
body.hf .hf-faq details:first-child { border-top: 0; }
body.hf .hf-faq summary { min-height: 64px; font-family: Newsreader, Georgia, serif; font-size: 20px; }
body.hf .hf-faq details p { color: #4a4a4a; padding: 0 0 18px; max-width: none; font-size: 16px; }

/* Related questions: two-column card grid */
body.hf .hf-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
body.hf .hf-related a { background: #efede7; border-radius: 8px; min-height: 64px; font-weight: 500; font-size: 16px; }

/* ---------- Components, matched to the canvas templates ---------- */

/* Top CTA (answers, guides, compare): forest bar, serif prompt, mint button */
body.hf .gd2-ask {
  background: #22543a;
  color: #d6ecce;
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
body.hf .gd2-q { flex: 1 1 260px; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: 26px; line-height: 1.2; color: #d6ecce; }
body.hf .gd2-bar { flex: none; background: none; padding: 0; border-radius: 0; flex-direction: row; }
body.hf .gd2-text { display: none !important; }
body.hf .gd2-btn {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 6px;
  background: #d6ecce;
  color: #22543a;
  font-size: 15px;
  font-weight: 500;
  justify-content: center;
}
body.hf .gd2-btn svg, body.hf .gd2-btn svg * { stroke: #22543a; }

/* Top CTA (conditions, medications): same forest bar, shown at every width */
body.hf .hf-consult-mobile {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 24px;
  background: #22543a;
  color: #d6ecce;
  border-radius: 10px;
  padding: 24px 28px;
}
body.hf .hf-consult-mobile .hf-t { grid-column: 1; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: #d6ecce; }
body.hf .hf-consult-mobile .hf-d { grid-column: 1; font-size: 15px; line-height: 1.5; color: #e6f2e1; }
body.hf .hf-consult-mobile .hf-btnw { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-height: 52px; padding: 0 24px; border-radius: 6px; background: #d6ecce; color: #22543a; font-size: 15px; font-weight: 500; white-space: nowrap; }
body.hf .hf-consult-mobile .hf-btnw:hover { background: #c6dfbd; }
body.hf .hf-consult-mobile .hf-f { grid-column: 1 / -1; font-size: 13px; color: #c6dfbd; text-align: left; }

/* Photo CTA card */
body.hf .hf-banner .hf-btn { border-radius: 6px; background: #d6ecce; color: #22543a; -webkit-text-fill-color: #22543a; font-weight: 500; }

/* Tick cards */
body.hf .hf-check { background: #efede7; border-radius: 8px; box-shadow: none; padding: 18px 20px; }
body.hf .hf-check .hf-c { width: 28px; height: 28px; background: #22543a; color: #d6ecce; }
body.hf .hf-check .hf-c svg, body.hf .hf-check .hf-c svg * { stroke: #d6ecce; }
body.hf .hf-check p { font-size: 17px; color: #4a4a4a; }

/* Numbered option cards */
body.hf .hf-grid2 { gap: 10px; }
body.hf .hf-numcard { background: #efede7; border-radius: 8px; box-shadow: none; padding: 22px; min-height: 0; }
body.hf .hf-numcard .hf-n { width: auto; height: auto; border-radius: 0; background: none; color: #2e6a4b; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: 40px; line-height: 1; justify-content: flex-start; }
body.hf .hf-numcard .hf-t { font-size: 17px; font-weight: 600; letter-spacing: 0; }
body.hf .hf-numcard .hf-d { font-size: 15px; color: #4a4a4a; }

/* Example consult: sage card, member in blue on the right, AI in white on the left */
body.hf .hf-conv { background: #c6dfbd; border-radius: 10px; padding: 28px; gap: 8px; }
body.hf .hf-bub-ai { align-self: flex-start; background: #ffffff; color: #1d1d1f; border-radius: 20px 20px 20px 6px; padding: 10px 15px; font-size: 15px; line-height: 1.4; }
body.hf .hf-bub-me { align-self: flex-end; background: #0a84ff; color: #ffffff; border-radius: 20px 20px 6px 20px; padding: 10px 15px; font-size: 15px; line-height: 1.4; }
body.hf .hf-note { background: #faf9f6; border-radius: 8px; box-shadow: none; padding: 18px 20px; margin-top: 8px; }
body.hf .hf-note .hf-note-tag { background: #22543a; color: #d6ecce; border-radius: 4px; padding: 3px 8px; font-size: 12px; }
body.hf .hf-note .hf-note-t { font-family: Newsreader, Georgia, serif; font-size: 20px; font-weight: 400; }
body.hf .hf-note .hf-note-d { color: #4a4a4a; }
body.hf .hf-note a { color: #22543a; }
body.hf .hf-illus { font-size: 13px; color: #4a4a4a; }
body.hf .hf-conv .hf-illus { color: #1f4a33; }

/* When to get care */
body.hf .hf-emg { background: #fbe4e1; border-radius: 10px; padding: 28px; }
body.hf .hf-emg h2 { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; }
body.hf .hf-emg .hf-911 { border-radius: 4px; padding: 5px 10px; }
body.hf .hf-emg .hf-emg-note { font-size: 17px; line-height: 1.6; color: #1d1d1f; }
body.hf .hf-emg a.hf-safety { color: #1d1d1f; }

/* Our pick */
body.hf .pm-pick { border-radius: 10px; }
body.hf .pm-pick-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #c6dfbd;
  color: #1f4a33;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
body.hf .pm-pick-link:first-child { background: #22543a; border-color: #22543a; color: #d6ecce; }
body.hf .pm-pick-note { font-size: 14px; color: #4a4a4a; }

/* Mobile "On this page" */
body.hf .hf-toc-mobile { border: 0; background: #efede7; border-radius: 8px; }

/* More guides */
body.hf .hf-more { padding-top: 72px; max-width: 768px; margin: 0 auto; }
body.hf .hf-more h2 { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -0.02em; }
body.hf .hf-more-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
body.hf .hf-more-grid a { background: #efede7; border-radius: 8px; box-shadow: none; padding: 18px; min-height: 0; }
body.hf .hf-more-grid .hf-t { font-size: 16px; font-weight: 500; letter-spacing: 0; }

/* Related links and lists */
body.hf .hf-related a { box-shadow: none; color: #1d1d1f; }
body.hf .hf-related a:hover, body.hf .hf-more-grid a:hover { background: #e7e4dc; }
body.hf .hf-ul { font-size: 18px; color: #4a4a4a; }
body.hf .hf-h3 { font-size: 20px; font-weight: 600; }
body.hf .hf-sources .hf-k { color: #1d1d1f; }
body.hf .hf-sources a { color: #4a4a4a; }
body.hf .hf-close { color: #4a4a4a; }

/* ---------- Preferred source on Google ---------- */
.v3-prefer {
  background: #ffffff;
  border: 1px solid #e5e3dd;
  border-radius: 10px;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}
.v3-prefer-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.v3-prefer-text b { font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 400; color: #1d1d1f; }
.v3-prefer-text span { font-size: 15px; line-height: 1.5; color: #4a4a4a; }
.v3-prefer-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #d4d0c6;
  border-radius: 999px;
  background: #ffffff;
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.v3-prefer-btn:hover { background: #efede7; }

/* ---------- Condition hub pages (body.v3-hub: uti, anxiety, headache, ...) ---------- */
body.v3-hub {
  background: #faf9f6;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  padding-top: 0 !important;
}
body.v3-hub .c3-nav { display: none !important; }
body.v3-hub footer.ft-wrap { background: #faf9f6 !important; }
.v3-hub-top { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.v3-hub-top .v3-hero { padding-top: 56px; }
.v3-hero .hf-crumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-hero .hf-crumbs a { text-decoration: none; }
body.v3-hub .v3-hero h1 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(34px, 3.8vw, 54px); line-height: 1.04; letter-spacing: -0.025em; color: #1d1d1f; }
.v3-syn { margin: -6px 0 0; font-size: 16px; color: #4a4a4a; }

body.v3-hub .cnd-wrap { max-width: 768px; padding: 56px 24px 40px; }
body.v3-hub .cnd-wrap section { margin-bottom: 56px; }
body.v3-hub .cnd-wrap h2 { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: #1d1d1f; margin: 0 0 16px; }
body.v3-hub .cnd-wrap h3 { font-size: 20px; color: #1d1d1f; }
body.v3-hub .cnd-wrap p, body.v3-hub .cnd-wrap li { font-size: 18px; line-height: 1.65; color: #4a4a4a; }
body.v3-hub .cnd-wrap li strong { color: #1d1d1f; }
body.v3-hub .cnd-wrap a { color: #1d1d1f; text-underline-offset: 3px; }

/* Get help now */
body.v3-hub .cnd-redflag { background: #fbe4e1; border: 0; border-radius: 10px; padding: 28px; margin: 0 0 56px; }
body.v3-hub .cnd-redflag h2 { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 30px; color: #1d1d1f; margin: 0 0 10px; }
body.v3-hub .cnd-redflag p, body.v3-hub .cnd-redflag li { font-size: 17px; color: #1d1d1f; }

/* On this page */
body.v3-hub .cnd-toc { background: #efede7; border: 0; border-radius: 8px; padding: 18px 20px; margin: 0 0 56px; }
body.v3-hub .cnd-toc strong { font-size: 13px; color: #1d1d1f; }
body.v3-hub .cnd-toc a { color: #4a4a4a; text-decoration: none; font-size: 15px; }
body.v3-hub .cnd-toc a:hover { color: #1d1d1f; }

/* Mid-page and closing CTAs: forest bar, serif prompt, mint button */
body.v3-hub .hf-consult {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 24px;
  background: #22543a;
  color: #d6ecce;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 0 0 56px;
}
body.v3-hub .hf-consult .hf-t { grid-column: 1; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: 26px; line-height: 1.2; color: #d6ecce; }
body.v3-hub .hf-consult .hf-d { grid-column: 1; font-size: 15px; line-height: 1.5; color: #e6f2e1; }
body.v3-hub .hf-consult .hf-btnw { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 6px; background: #d6ecce; color: #22543a; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body.v3-hub .hf-consult .hf-f { grid-column: 1 / -1; font-size: 13px; color: #c6dfbd; text-align: left; }
body.v3-hub .cnd-cta { background: #22543a; border-radius: 10px; padding: 28px; margin: 0 0 56px; text-align: left; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
body.v3-hub .cnd-cta p { flex: 1 1 260px; margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: 26px; line-height: 1.2; color: #d6ecce; }
body.v3-hub .cnd-cta a { flex: none; background: #d6ecce; color: #22543a; border-radius: 6px; font-weight: 500; padding: 15px 24px; text-decoration: none; }
body.v3-hub .cnd-cta .cnd-cta-note { flex: 1 1 100%; margin: 0; font-size: 13px; color: #c6dfbd; }

/* Common questions */
body.v3-hub .cnd-faq details { background: #efede7; border: 0; border-radius: 8px; margin-bottom: 8px; }
body.v3-hub .cnd-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; font-family: Newsreader, Georgia, serif; font-size: 20px; font-weight: 400; color: #1d1d1f; }
body.v3-hub .cnd-faq summary:before { content: none; }
body.v3-hub .cnd-faq summary:after { content: "+"; color: #4a4a4a; transition: transform .2s; }
body.v3-hub .cnd-faq details[open] summary:after { transform: rotate(45deg); }
body.v3-hub .cnd-faq .cnd-faq-body { padding: 0 20px 18px; font-size: 16px; line-height: 1.6; color: #4a4a4a; }

/* Related questions and guides */
body.v3-hub .hf-sec { margin-bottom: 40px; }
body.v3-hub .hf-related, body.v3-hub .cnd-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
body.v3-hub .hf-related a, body.v3-hub .cnd-rel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 14px 18px; background: #efede7; border: 0; border-radius: 8px; color: #1d1d1f; font-size: 16px; font-weight: 500; text-decoration: none; }
body.v3-hub .hf-related a:hover, body.v3-hub .cnd-rel a:hover { background: #e7e4dc; }

/* Sources */
body.v3-hub #sources h2 { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
body.v3-hub .cnd-sources { padding-left: 0; list-style: none; }
body.v3-hub .cnd-sources li { font-size: 15px; margin-bottom: 6px; }
body.v3-hub .cnd-sources a { color: #4a4a4a; text-decoration: underline; }
body.v3-hub .v3-prefer { margin: 0 0 40px; }

@media (max-width: 600px) {
  .v3-hub-top { padding: 0 18px; }
  body.v3-hub .hf-consult { grid-template-columns: 1fr; padding: 22px; }
  body.v3-hub .hf-consult .hf-btnw { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

/* ---------- Narrow screens: answer first, image after ---------- */
@media (max-width: 600px) {
  body.hf .hf-consult-mobile { grid-template-columns: 1fr; padding: 22px; }
  body.hf .hf-consult-mobile .hf-btnw { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 8px; }
  body.hf .gd2-ask { padding: 22px; }
  body.hf .gd2-bar, body.hf .gd2-btn { width: 100%; }
  body.hf .hf-conv { padding: 18px; }
}
@media (max-width: 900px) {
  .v3-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .v3-hero-img img { aspect-ratio: 16 / 9; }
  body.hf .hf-main { padding-top: 40px; }
  body.hf .hf-article { gap: 44px; }
}

/* ---------- Scannable article parts (design.html: alert, list row, badge, table) ---------- */
/* Hero: text left, larger image right; stacks only when the two can't fit side by side */
.v3-hero.v3-hero--stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 56px; }
.v3-hero--stack .v3-hero-text { gap: 20px; }
.v3-hero--stack .v3-answer { border-top: 0; padding-top: 0; }
.v3-hero--stack + .hf-main { padding-top: 40px; }
@media (max-width: 900px) {
  .v3-hero.v3-hero--stack { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .v3-hero--stack .v3-hero-img img { aspect-ratio: 4 / 3; }
}

/* Highlighter marks */
body.hf .v3-lead mark, body.hf .hf-sec mark {
  background: linear-gradient(transparent 58%, #d6ecce 58%);
  color: inherit; padding: 0 2px; border-radius: 2px;
}
body.hf .hf-sec b { color: #1d1d1f; font-weight: 600; }

/* Key points with a forest tick */
body.hf .v3-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 18px; line-height: 1.55; color: #4a4a4a; }
body.hf .v3-keys li { position: relative; padding-left: 34px; text-wrap: pretty; }
body.hf .v3-keys li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #22543a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6ecce' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Alerts */
body.hf .v3-alert { display: flex; gap: 12px; align-items: flex-start; border-radius: 8px; padding: 16px 18px; background: #fbebc8; color: #1d1d1f; }
body.hf .v3-alert svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
body.hf .v3-alert > div > b { display: block; font-size: 16px; font-weight: 600; }
body.hf .v3-alert span b { color: #1d1d1f; font-weight: 600; }
body.hf .v3-alert span { display: block; font-size: 15px; line-height: 1.5; color: #4a4a4a; margin-top: 2px; }
body.hf .v3-alert.err { background: #fbe4e1; }
body.hf .v3-alert.err > svg, body.hf .v3-alert.err > div > b { color: #b42318; }
body.hf .v3-alert a { color: inherit; white-space: nowrap; }

/* List rows with badges */
body.hf .v3-rows { display: grid; gap: 8px; }
body.hf .v3-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #efede7; border-radius: 8px; padding: 14px 18px; }
body.hf .v3-row b { display: block; font-size: 16px; font-weight: 600; color: #1d1d1f; }
body.hf .v3-row small { display: block; font-size: 14px; color: #4a4a4a; }
body.hf .v3-badge { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; font-size: 13px; font-weight: 500; white-space: nowrap; background: #c6dfbd; color: #1f4a33; }
body.hf .v3-badge.peach { background: #efc8b6; color: #2b161a; }
body.hf .v3-badge.sky { background: #e3e9f7; color: #26305a; }

/* Table */
body.hf .v3-tblw { overflow-x: auto; }
body.hf .v3-tbl { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 16px; min-width: 480px; }
body.hf .v3-tbl th { text-align: left; font-weight: 500; color: #4a4a4a; font-size: 13px; padding: 0 16px; }
body.hf .v3-tbl td { background: #efede7; padding: 14px 16px; color: #4a4a4a; line-height: 1.5; vertical-align: top; }
body.hf .v3-tbl td:first-child { border-radius: 8px 0 0 8px; font-weight: 600; color: #1d1d1f; white-space: nowrap; }
body.hf .v3-tbl td:last-child { border-radius: 0 8px 8px 0; }

/* Stone card */
body.hf .v3-card { background: #efede7; border-radius: 10px; padding: 22px 24px; display: grid; gap: 14px; }
body.hf .v3-card-t { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 22px; color: #1d1d1f; }

/* "Unsure?" grass CTA under the hero image */
body.hf .hf-banner.v3-unsure { min-height: 240px; }
body.hf .hf-banner.v3-unsure .hf-glass .hf-t { font-size: clamp(30px, 3.4vw, 40px); line-height: 1; }
body.hf .hf-banner.v3-unsure .hf-d { font-size: 15px; line-height: 1.5; color: #1d1d1f; }
@media (max-width: 900px) { body.hf .hf-banner.v3-unsure { display: flex !important; } }
body.hf .v3-tbl td .v3-badge { margin: 0 8px 4px 0; vertical-align: 1px; }

/* ---------- Round 3: parts lifted from design.html (.li + .ic.trust, .badge, .hc.c-consult, tints) ---------- */
/* "Unsure?" button: forest, like .b-green */
body.hf .hf-banner.v3-unsure .hf-btn { background: #22543a; color: #d6ecce; -webkit-text-fill-color: #d6ecce; min-height: 52px; padding: 0 24px; border-radius: 6px; font-size: 15px; font-weight: 500; box-shadow: none; }
body.hf .hf-banner.v3-unsure .hf-btn:hover { background: #2e6a4b; }

/* Step rows (design .li with .ic.trust tile and serif title) */
body.hf .v3-list { display: grid; gap: 8px; }
body.hf .v3-li { display: flex; gap: 16px; align-items: flex-start; background: #efede7; border-radius: 8px; padding: 18px 20px; }
body.hf .v3-ic { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #22543a; color: #d6ecce; display: grid; place-items: center; font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1; }
body.hf .v3-ic svg { width: 20px; height: 20px; }
body.hf .v3-li-t { display: block; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; color: #1d1d1f; }
body.hf .v3-li small { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; color: #4a4a4a; }
body.hf .v3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.hf .v3-fine { margin: 0; font-size: 13px; line-height: 1.5; color: #8a8a8c; }

/* Big direct answer line */
body.hf .v3-big { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.25; color: #1d1d1f; }

/* "Got questions?" consult card (design .hc.c-consult) */
body.hf .v3-hc { background: #c6dfbd; color: #1f4a33; border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 24px; }
body.hf .v3-bub { display: flex; flex-direction: column; gap: 8px; }
body.hf .v3-m { max-width: 82%; padding: 10px 15px; border-radius: 20px; font-size: 15px; line-height: 1.35; }
body.hf .v3-m.out { align-self: flex-end; background: #0a84ff; color: #fff; border-bottom-right-radius: 6px; }
body.hf .v3-m.in { align-self: flex-start; background: #fff; color: #1d1d1f; border-bottom-left-radius: 6px; }
body.hf .v3-hc-ft { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
body.hf .v3-hc-t { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.02em; color: #1f4a33; }
body.hf .v3-hc p { margin: 6px 0 0; font-size: 17px; color: #1f4a33; }
body.hf .v3-arrow { flex: none; width: 68px; height: 68px; border-radius: 999px; display: grid; place-items: center; background: #22543a; color: #d6ecce; text-decoration: none; }
body.hf .v3-arrow:hover { background: #2e6a4b; }

/* Product groups: sage = fine, ice = ask, peach = don't */
body.hf .v3-group { border-radius: 10px; padding: 20px; display: grid; gap: 8px; }
body.hf .v3-group-h { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
body.hf .v3-group-h h3 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; }
body.hf .v3-group.ok { background: #c6dfbd; color: #1f4a33; }
body.hf .v3-group.ask { background: #e3e9f7; color: #26305a; }
body.hf .v3-group.ask .v3-ic { background: #4a5a96; color: #e3e9f7; }
body.hf .v3-group.no { background: #efc8b6; color: #2b161a; }
body.hf .v3-group.no .v3-ic { background: #2b161a; color: #efc8b6; }
body.hf .v3-prod { background: rgba(250, 249, 246, .7); border-radius: 8px; padding: 14px 16px; }
body.hf .v3-prod b { display: block; font-size: 16px; font-weight: 600; color: #1d1d1f; }
body.hf .v3-prod small { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: #4a4a4a; }
@media (max-width: 600px) { body.hf .v3-hc-ft { flex-direction: column; align-items: flex-start; } body.hf .v3-li { padding: 16px; } }

/* ---------- Round 4 ---------- */
/* Label disclaimer: smaller, serif italic */
body.hf .v3-fine { font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 14px; line-height: 1.4; color: #8a8a8c; }

/* TL;DR card */
body.hf .v3-tldr { background: #22543a; color: #d6ecce; border-radius: 10px; padding: 28px 28px 30px; display: grid; gap: 10px; }
body.hf .v3-tag { justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: #d6ecce; color: #22543a; }
body.hf .v3-tldr-t { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.025em; color: #d6ecce; }
body.hf .v3-tldr-d { margin: 0; font-size: 19px; line-height: 1.45; color: #e6f2e1; }

/* Products: note, verdict tags, product names as the main read */
body.hf .v3-note { margin: -4px 0 0; font-size: 15px; color: #4a4a4a; }
body.hf .v3-group { padding: 16px; gap: 8px; }
body.hf .v3-group-h { margin: 0 0 2px; }
body.hf .v3-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px 6px 8px; border-radius: 4px; background: #22543a; color: #d6ecce; }
body.hf .v3-verdict svg { width: 15px; height: 15px; }
body.hf .v3-group.ask .v3-verdict { background: #4a5a96; color: #e3e9f7; }
body.hf .v3-group.no .v3-verdict { background: #2b161a; color: #efc8b6; }
body.hf .v3-prod { padding: 16px 18px; background: rgba(250, 249, 246, .78); }
body.hf .v3-prod b { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; }
body.hf .v3-prod small { margin-top: 4px; font-size: 15px; }

/* Got questions: photo card, glass panel, labelled button */
body.hf .v3-hc { position: relative; overflow: hidden; isolation: isolate; background: #5f7a4e; padding: 28px; gap: 20px; min-height: 360px; justify-content: space-between; }
body.hf .v3-hc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -1; }
body.hf .v3-hc .v3-bub { max-width: 440px; width: 100%; margin-left: auto; }
body.hf .v3-hc-glass { background: rgba(250, 249, 246, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 10px; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
body.hf .v3-hc .v3-hc-t { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; color: #1d1d1f; }
body.hf .v3-hc p { color: #4a4a4a; font-size: 16px; }
body.hf .v3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 6px; background: #22543a; color: #d6ecce; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body.hf .v3-btn:hover { background: #2e6a4b; }
@media (max-width: 600px) { body.hf .v3-btn { width: 100%; } body.hf .v3-tldr { padding: 22px; } }
body.hf .hf-sec > p.v3-fine { font-size: 14px; line-height: 1.4; color: #8a8a8c; }
body.hf .hf-sec > p.v3-note { font-size: 15px; line-height: 1.5; color: #4a4a4a; }

/* ---------- Round 5 ---------- */
/* Wait answer: highlighted lead-in inside one paragraph */
body.hf .v3-answer-p mark { font-weight: 600; color: #1d1d1f; }

/* Got questions: plain sage card again, labelled button kept */
body.hf .v3-hc { background: #c6dfbd; min-height: 0; }
body.hf .v3-hc .v3-hc-ft { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
body.hf .v3-hc .v3-hc-t { color: #1f4a33; }
body.hf .v3-hc p { color: #1f4a33; }

/* Bottom CTA: plum card with caplets (design .hc.c-price + .tabs3) */
body.hf .v3-price { background: #2b161a; color: #efc8b6; border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 28px; }
body.hf .v3-caps { display: flex; gap: 10px; padding: 6px 4px 0; }
body.hf .v3-caps i { display: block; width: 72px; height: 30px; border-radius: 999px; background: radial-gradient(ellipse at 35% 30%, #fff, #cfc6ec 60%, #a99bd6); transform: rotate(-18deg); }
body.hf .v3-caps i:nth-child(2) { background: radial-gradient(ellipse at 35% 30%, #fff, #ece08f 60%, #cdbd5a); transform: rotate(12deg); }
body.hf .v3-caps i:nth-child(3) { background: radial-gradient(ellipse at 35% 30%, #fff, #a9dcc6 60%, #7cbfa3); transform: rotate(-6deg); }
body.hf .v3-price-ft { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
body.hf .v3-price-t { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: #efc8b6; }
body.hf .v3-price p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: #efc8b6; opacity: .9; }
body.hf .v3-btn.v3-btn-blush { background: #efc8b6; color: #2b161a; }
body.hf .v3-btn.v3-btn-blush:hover { background: #f4d6c8; }
/* Second highlight for the "check your box" warning in a lead */
body.hf .v3-lead mark.warn { background: linear-gradient(transparent 58%, #efc8b6 58%); }
/* Small source / descriptor line inside table cells */
body.hf .v3-tbl .v3-src { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: #8a8a8c; white-space: normal; }
body.hf .v3-tbl td:first-child .v3-src { color: #4a4a4a; }

/* Plain body lists styled like the key-point lists, with a small dot instead of a tick */
body.hf .v3-keys.v3-dots li { padding-left: 26px; }
body.hf .v3-keys.v3-dots li::before { width: 8px; height: 8px; top: 11px; left: 6px; background: #22543a; background-image: none; }
/* Lead highlights: shorter spans read lighter, so keep the highlight slim */
body.hf .v3-lead mark { padding: 0 1px; }