/* ==========================================================================
   PROTIVA funnel — design system
   Clean, premium, trustworthy health-editorial UX. Mobile-first.
   Brand: emerald "protein + vitality" accent, warm-cream canvas, deep green ink,
   a warm coral used only for urgency, gold for the "most popular" badge.
   "PROTIVA" wordmark, "Protiva Health" editorial. No copied competitor assets/code/text.

   PALETTE (chosen 2026-08-13):
     canvas   #F4F1EA  warm cream        ink      #14302A  deep green-black
     card     #FFFFFF                    muted    #5F6E68
     emerald  #1FA46E / #16855A (dark)   coral    #F2683C  (urgency only)
     gold     #C9A24B  (popular badge)
   ========================================================================== */

:root {
  /* PROTIVA light brand system (2026-08-13): premium health editorial. */
  --bg:        #F4F1EA;
  --bg-bar:    #FFFFFF;
  --card:      #FFFFFF;
  --card-2:    #EDF3EE;
  --line:      rgba(20, 48, 42, 0.10);
  --line-2:    rgba(20, 48, 42, 0.18);
  --text:      #14302A;
  --muted:     #5F6E68;
  --muted-2:   #8A9793;

  /* primary = emerald */
  --accent:    #1FA46E;
  --accent-d:  #16855A;
  --accent-dim:rgba(31, 164, 110, 0.12);
  --grad:      linear-gradient(92deg, #22B277 0%, #16855A 100%);
  --ink-on-accent: #062018;

  /* warm secondary = coral (urgency) + gold (popular) */
  --amber:     #F2683C;
  --amber-d:   #D8511F;
  --amber-dim: rgba(242, 104, 60, 0.13);
  --gold:      #C9A24B;

  --radius:    16px;
  --radius-sm: 11px;
  --wrap:      600px;

  --shadow:    0 14px 40px rgba(20, 48, 42, 0.12);
  --shadow-sm: 0 6px 18px rgba(20, 48, 42, 0.07);
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

body { padding-bottom: env(safe-area-inset-bottom); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--accent); }

/* ---------- layout shell ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px 20px 176px;
  min-height: 100vh;
}
.wrap.center { display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
.topbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 8px 0 2px;
}
.topbar.entry { grid-template-columns: 1fr; justify-items: center; padding-top: 18px; }
.topbar .back {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text);
  transition: background 0.15s ease;
}
.topbar .back:hover { background: var(--card); }
.topbar .back svg { width: 22px; height: 22px; }
.topbar .counter {
  text-align: right; font-weight: 700; font-size: 16px; color: var(--muted);
  letter-spacing: 0.5px; white-space: nowrap;
}
.topbar .counter b { color: var(--accent); }

/* logo mark */
.logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--card-2);
  display: grid; place-items: center;
  border: 1px solid var(--line);
}
.logo svg { width: 26px; height: 26px; }
.wordmark {
  font-weight: 800; letter-spacing: 3px; font-size: 20px;
  display: inline-flex; align-items: center; gap: 8px;
}
.wordmark .logo { width: 34px; height: 34px; border-radius: 9px; }
.wordmark .logo svg { width: 20px; height: 20px; }

/* progress bar */
.progress {
  height: 6px; width: 100%; background: rgba(15,46,43,0.14);
  border-radius: 4px; margin: 14px 0 6px; overflow: hidden;
}
.progress > i {
  display: block; height: 100%; background: var(--grad);
  border-radius: 4px; transition: width 0.35s cubic-bezier(.4,0,.2,1);
}

/* ---------- headings ---------- */
h1.title {
  font-size: 28px; line-height: 1.2; font-weight: 800;
  text-align: center; margin: 22px 0 0; letter-spacing: -0.3px;
}
h2.qtitle {
  font-size: 24px; line-height: 1.25; font-weight: 800;
  text-align: center; margin: 26px 0 22px; letter-spacing: -0.2px;
}
.qstatement {
  position: relative; text-align: center; font-weight: 800; font-style: italic;
  font-size: 25px; line-height: 1.3; letter-spacing: -0.3px; color: var(--text);
  background: var(--card); border: 1px solid var(--line-2);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: 22px 22px; margin: 26px 0 6px; box-shadow: var(--shadow-sm);
}
.eyebrow {
  text-align: center; text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 0 4px;
}
.eyebrow.accent { color: var(--accent); }
.sub { text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; margin: 12px auto 0; max-width: 460px; }

/* ---------- option cards ---------- */
.options { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.opt {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 16px;
  text-align: left; width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.opt:hover { border-color: var(--line-2); background: var(--card-2); }
.opt:active { transform: scale(0.99); }
.opt .iconwell {
  width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto;
  background: var(--accent-dim); color: var(--accent);
  display: grid; place-items: center;
}
.opt .iconwell svg { width: 24px; height: 24px; }
.opt .lbl { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.3; }
.opt .radio {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line-2); position: relative;
}
.opt.checkbox .radio { border-radius: 6px; }
.opt.selected { border-color: var(--accent); background: var(--accent-dim); }
.opt.selected .radio { border-color: var(--accent); background: var(--accent); }
.opt.selected .radio::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg);
}
.opt.checkbox.selected .radio::after {
  width: 6px; height: 10px; border-radius: 0; background: none;
  border: solid var(--bg); border-width: 0 2px 2px 0;
  transform: rotate(45deg); top: -1px;
}

/* scale (1-5) */
.scale { display: flex; gap: 10px; justify-content: center; margin: 8px 0 4px; }
.scale button {
  flex: 1; max-width: 64px; aspect-ratio: 1; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 20px; font-weight: 700; color: var(--text);
  transition: all 0.15s ease;
}
.scale button:hover { border-color: var(--line-2); }
.scale button.selected { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.scale-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 8px; padding: 0 2px; }

/* ---------- age grid (entry) ---------- */
.agegrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px;
}
.agecard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-align: center;
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.agecard:hover { border-color: var(--accent); }
.agecard:active { transform: scale(0.99); }
.agecard .art {
  aspect-ratio: 1 / 1.05; display: grid; place-items: end center;
  background: linear-gradient(165deg, #ffffff, var(--card-2));
  overflow: hidden;
}
.agecard .art svg { width: 78%; height: 92%; display: block; }
.agecard .cap {
  padding: 13px 8px; font-weight: 700; font-size: 17px;
  background: var(--card-2); border-top: 1px solid var(--line);
}

/* ---------- legal footer ---------- */
.legal {
  text-align: center; color: var(--muted-2); font-size: 12.5px; line-height: 1.6;
  margin-top: 26px;
}
.legal a { color: var(--muted); text-decoration: underline; }

/* ---------- primary CTA ---------- */
.cta-dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(205,230,224,0) 0%, var(--bg) 42%);
  z-index: 20;
}
.cta-dock .inner { max-width: var(--wrap); margin: 0 auto; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 18px 20px; border-radius: var(--radius);
  background: var(--grad); color: var(--ink-on-accent); font-weight: 800; font-size: 17px;
  letter-spacing: 0.2px; box-shadow: 0 8px 24px rgba(20, 184, 166, 0.32);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px) scale(0.995); }
.btn svg { width: 20px; height: 20px; }
.btn.ghost { background: none; color: var(--muted); box-shadow: none; font-weight: 600; font-size: 15px; padding: 10px; }

/* inline (non-docked) CTA */
.btn.inline { position: static; margin-top: 22px; }

/* ---------- interlude / content blocks ---------- */
.center-block { text-align: center; margin-top: 30px; }
.mascot { width: 132px; height: 132px; margin: 8px auto 4px; display: block; }
.mascot.sm { width: 92px; height: 92px; }
.lead-accent { color: var(--accent); font-weight: 800; font-size: 26px; letter-spacing: -0.2px; }
.big-num { color: var(--accent); font-weight: 800; font-size: 34px; letter-spacing: -0.5px; }
.block-h { font-size: 23px; font-weight: 800; line-height: 1.25; margin-top: 10px; letter-spacing: -0.2px; }
.block-p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 14px auto 0; max-width: 480px; }
.disclaimer { color: var(--muted-2); font-size: 12.5px; line-height: 1.5; margin: 16px auto 0; max-width: 440px; font-style: italic; }

/* science stat card */
.statcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; margin-top: 26px; text-align: center;
}
.statcard .cite { color: var(--muted-2); font-size: 12px; margin-top: 14px; line-height: 1.5; }

/* projected graph */
.graphcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 18px; margin-top: 22px;
}
.graphcard svg { width: 100%; height: auto; display: block; }
.weeklist { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.weekrow { display: flex; gap: 14px; align-items: flex-start; }
.weekrow .wk {
  flex: 0 0 auto; font-weight: 800; font-size: 13px; color: var(--accent);
  background: var(--accent-dim); border-radius: 8px; padding: 6px 9px; min-width: 82px; text-align: center;
}
.weekrow .wt { font-size: 15px; line-height: 1.45; color: var(--text); padding-top: 4px; }

/* comparison table */
.compare {
  margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.compare .row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.compare .row + .row { border-top: 1px solid var(--line); }
.compare .cell { padding: 13px 10px; font-size: 13px; line-height: 1.35; display: flex; align-items: center; }
.compare .head .cell { font-weight: 800; font-size: 12.5px; background: var(--card-2); }
.compare .head .cell.us { color: var(--accent); }
.compare .cell.rowlabel { font-weight: 700; color: var(--muted); background: var(--bg-bar); }
.compare .cell.us { color: var(--text); font-weight: 600; }
.compare .cell.them { color: var(--muted); }
.compare .cell svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* profile summary */
.profilecard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 20px; margin-top: 24px;
}
.profilerow { display: flex; justify-content: space-between; gap: 16px; padding: 19px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.profilerow:last-child { border-bottom: none; }
.profilerow .k { color: var(--muted); }
.profilerow .v { font-weight: 700; text-align: right; }
.profilerow .v.accent { color: var(--accent); }

/* social proof / testimonials */
.proofgrid { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.review {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.review .stars { color: var(--accent); letter-spacing: 2px; font-size: 15px; }
.review .body { font-size: 14.5px; line-height: 1.5; margin: 8px 0; color: var(--text); }
.review .who { font-size: 12.5px; color: var(--muted); }
.placeholder {
  border-style: dashed; border-color: var(--accent); background: rgba(20,184,166,0.06);
  color: var(--accent); font-size: 12.5px; text-align: center; font-weight: 700;
  padding: 14px; border-radius: var(--radius); border-width: 1px;
}

/* ---------- email capture ---------- */
.field { margin-top: 22px; }
.field label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.field input {
  width: 100%; padding: 17px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line-2); color: var(--text);
  font-size: 16px; outline: none; transition: border-color 0.15s ease;
}
.field input:focus { border-color: var(--accent); }
.microcopy { color: var(--muted-2); font-size: 12.5px; line-height: 1.5; margin-top: 12px; text-align: center; }

/* ---------- loader ---------- */
.loaderwrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 62vh; text-align: center; }
.ring { width: 120px; height: 120px; margin-bottom: 26px; }
.ring .pct { font-size: 30px; font-weight: 800; fill: var(--text); }
.loadline { color: var(--muted); font-size: 16px; min-height: 22px; }

/* micro-commit popup */
.overlay {
  position: fixed; inset: 0; background: rgba(6,6,9,0.7); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 60; padding: 24px;
}
.modal {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 18px;
  padding: 28px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow);
}
.modal h3 { font-size: 21px; font-weight: 800; line-height: 1.3; }
.modal .row2 { display: flex; gap: 12px; margin-top: 22px; }
.modal .row2 .btn { padding: 15px; }
.modal .btn.no { background: var(--card-2); color: var(--muted); box-shadow: none; }

/* ---------- paywall ---------- */
.paybar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--bg-bar); border-bottom: 1px solid var(--line);
}
.paybar .mini-cta {
  background: var(--grad); color: var(--ink-on-accent); font-weight: 800; font-size: 13px;
  padding: 11px 18px; border-radius: 10px; letter-spacing: 0.5px;
}
.countdown {
  position: sticky; top: 47px; z-index: 39;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(92deg,#F0413F,#D42A2A); color: #fff; font-weight: 800; font-size: 14px;
  padding: 12px; border-radius: 10px; margin: 12px 0 4px;
  box-shadow: 0 6px 18px rgba(210,42,42,0.30);
}
.countdown svg { width: 16px; height: 16px; }
.countdown b { font-variant-numeric: tabular-nums; color: #fff; }
.scarcity {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
  background: rgba(229,72,77,0.10); border: 1px solid rgba(229,72,77,0.35);
  border-radius: 12px; padding: 13px 15px; color: #C7292E; font-weight: 700; font-size: 13.5px; line-height: 1.4;
}
.scarcity svg { width: 18px; height: 18px; flex: 0 0 auto; }
.scarcity b { color: #C7292E; }

.section-h { font-size: 22px; font-weight: 800; text-align: center; margin: 40px 0 4px; letter-spacing: -0.2px; }
.section-sub { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 8px; }

/* now vs goal */
.nowgoal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.ngcol { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 14px; text-align: center; }
.ngcol.goal { border-color: var(--accent); background: var(--accent-dim); }
.ngcol .tag { text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 800; color: var(--muted); }
.ngcol.goal .tag { color: var(--accent); }
.ngcol .mascot { width: 84px; height: 84px; margin: 12px auto; }
.ngcol .txt { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ngcol.goal .txt { color: var(--text); }

/* science stack list */
.reflist { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.refrow { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.refrow .src { font-weight: 800; font-size: 14px; color: var(--accent); }
.refrow .find { font-size: 14px; color: var(--text); line-height: 1.5; margin-top: 6px; }

/* included stack */
.included { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.incrow { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 15px; }
.incrow .ck { color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.incrow .ck svg { width: 20px; height: 20px; }
.incrow b { font-weight: 700; }
.incrow .d { color: var(--muted); font-size: 13.5px; display: block; margin-top: 3px; line-height: 1.4; }
.bonus-tag { color: var(--accent); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 22px 0 4px; text-align: center; }

/* pricing plans */
.plans { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.plan {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px; text-align: left; width: 100%; transition: border-color 0.15s ease, background 0.15s ease;
}
.plan:hover { border-color: var(--line-2); }
.plan.selected { border-color: var(--accent); background: var(--accent-dim); }
.plan .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex: 0 0 auto; position: relative; }
.plan.selected .radio { border-color: var(--accent); background: var(--accent); }
.plan.selected .radio::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); }
.plan .pname { font-weight: 800; font-size: 16px; }
.plan .pmeta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.plan .pmeta s { color: var(--muted-2); }
.plan .pright { margin-left: auto; text-align: right; }
.plan .pperday { font-weight: 800; font-size: 18px; }
.plan .pperday span { font-size: 12px; color: var(--muted); font-weight: 600; }
.plan .badge {
  position: absolute; top: -10px; right: 14px; background: var(--grad); color: var(--ink-on-accent);
  font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* rebill disclosure (conspicuous, NOT fine print) */
.disclosure {
  margin-top: 16px; background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 16px; font-size: 14px; line-height: 1.55; color: var(--text);
}
.disclosure b { color: var(--accent); }
.secondary-line { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }
.paysafe {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; color: var(--muted); font-size: 13px; font-weight: 600;
}
.paysafe svg { width: 16px; height: 16px; color: var(--accent-d); flex: 0 0 auto; }

/* guarantee */
.guarantee {
  margin-top: 30px; border: 1.5px solid var(--accent); border-radius: var(--radius);
  padding: 24px 20px; text-align: center; background: rgba(20,184,166,0.05);
}
.guarantee .gh { font-weight: 800; font-size: 19px; }
.guarantee .gb { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 12px; }

/* divider dots */
.dots { text-align: center; color: var(--accent); letter-spacing: 6px; font-size: 22px; margin: 30px 0; }

/* faq */
.faq { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.faqitem { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faqitem .q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; font-weight: 700; font-size: 15px; text-align: left; width: 100%; }
.faqitem .q svg { width: 18px; height: 18px; color: var(--muted); transition: transform 0.2s ease; flex: 0 0 auto; }
.faqitem.open .q svg { transform: rotate(180deg); }
.faqitem .a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faqitem.open .a { max-height: 320px; }
.faqitem .a p { padding: 0 18px 18px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* footer disclaimer */
.footer-disc { color: var(--muted-2); font-size: 12.5px; line-height: 1.6; text-align: center; margin: 34px auto 10px; max-width: 500px; }
.footer-disc .brand { color: var(--muted); font-weight: 700; }

/* result page */
.kicker { text-align: center; text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; font-weight: 800; color: var(--accent); margin-top: 10px; }
.result-h { font-size: 26px; font-weight: 800; text-align: center; line-height: 1.3; margin-top: 12px; letter-spacing: -0.3px; }
.phase { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.phase .n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-dim); color: var(--accent); font-weight: 800; display: grid; place-items: center; }
.phase b { display: block; margin-bottom: 3px; }
.phase span { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* utility */
.fade { animation: fade 0.28s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hide { display: none !important; }

/* ==========================================================================
   REBUILD 2026-07-25 additions (Relatio-mirrored quiz + interludes)
   ========================================================================== */

/* 4-node segmented progress bar */
.segbar { display: flex; gap: 6px; margin: 14px 0 6px; }
.segbar .seg { flex: 1; height: 7px; border-radius: 4px; background: rgba(15,46,43,0.14); overflow: hidden; }
.segbar .seg i { display: block; height: 100%; background: var(--grad); border-radius: 4px; transition: width 0.4s cubic-bezier(.4,0,.2,1); }
.topbar .tb-r { width: 40px; }

/* tighter helper spacing */
.sub.tight { margin-top: 6px; margin-bottom: 18px; }
h2.qtitle.tightb { margin-bottom: 16px; }

/* real Dr. Bedrock image mascot.
   The source files are JPEGs (no alpha) with a grey-blue studio background, so
   `object-fit: contain` + a drop-shadow rendered them as a hard grey square
   floating on the mint canvas — it read as a broken cutout. Until we have real
   transparent PNGs, frame it deliberately: rounded card, white ring, soft lift,
   so the box looks like a portrait tile and matches the white answer cards. */
.drb { width: 150px; height: 150px; object-fit: cover; margin: 6px auto 8px; display: block;
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(15,46,43,0.08), 0 12px 28px rgba(15,46,43,0.14),
              0 0 0 4px #FFFFFF, 0 0 0 5px rgba(15,46,43,0.06); }
.drb.sm { width: 104px; height: 104px; border-radius: 18px; }

/* entry age cards with real photos.
   Aspect ratio cut from 1/1.05 to 1/0.72 on 2026-08-11. At the old ratio each
   card row was ~233px, so on a 390px phone the bottom row's labels landed at
   771px — below the ~750px fold. The two clipped buttons were "50 to 59" and
   "60+", and 71% of paid spend was on 55+: the majority of arrivals had to
   scroll to find their own option, with nothing on screen suggesting there was
   more below. Shortening the photos lifts all four buttons and the privacy line
   above the fold. These are head-and-shoulders shots, so the crop takes chest,
   not face. Do not restore the taller ratio without re-checking the fold. */
.agecard .art { aspect-ratio: 1 / 0.72; overflow: hidden; background: linear-gradient(165deg, #ffffff, var(--card-2)); }
.agecard .art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* emoji / body / droop icon wells */
.opt .iconwell.emoji { background: rgba(15,46,43,0.05); font-size: 26px; line-height: 1; }
.opt.selected .iconwell.emoji { background: rgba(4,35,31,0.16); }
.opt .iconwell.body svg { width: 26px; height: 30px; }
.options.asgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.options.asgrid .opt { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px; }
.options.asgrid .opt .radio { position: absolute; top: 14px; right: 14px; }
.options.asgrid .opt { position: relative; }
.options.asgrid .opt .lbl { font-size: 15px; }

/* big green check (reinforce) */
.bigcheck { width: 84px; height: 84px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; margin: 6px auto 0; box-shadow: 0 10px 30px rgba(45,212,191,0.35); }
.bigcheck svg { width: 44px; height: 44px; color: var(--ink-on-accent); }

/* citation badge (replaces fake "Harvard Research") */
.citebadge { display: inline-flex; align-items: center; gap: 8px; margin: 4px auto 0;
  background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(45,212,191,0.3);
  border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; text-align: left; }
.citebadge svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* mechanism DAY 1/7/14/28 progression */
.dayprog { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.dayrow { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; gap: 4px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.dayrow .daytag { grid-row: 1 / 3; align-self: center; font-weight: 800; font-size: 14px; color: var(--accent);
  background: var(--accent-dim); border-radius: 8px; padding: 10px 6px; text-align: center; }
.dayrow .daymeter { position: relative; height: 26px; }
.dayrow .daymeter svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.dayrow .dayfill { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--card-2); border-radius: 3px; }
.dayrow .dayfill i { display: block; height: 100%; background: var(--grad); border-radius: 3px; }
.dayrow .daytxt { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* proof-stat donut + figures + review */
.statwrap { text-align: center; margin-top: 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 20px; }
.donut { width: 130px; height: 130px; }
.donut .donutpct { fill: var(--text); font-size: 26px; font-weight: 800; }
.statlead { font-size: 16px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.statlead b { color: var(--accent); font-size: 20px; }
.figrow { display: flex; justify-content: center; gap: 5px; margin-top: 16px; flex-wrap: wrap; }
.figrow .fig { color: var(--muted-2); }
.figrow .fig svg { width: 20px; height: 20px; }
.figrow .fig.on { color: var(--accent); }
.statwrap .cite { color: var(--muted-2); font-size: 12px; margin-top: 14px; line-height: 1.5; }
.review .stars { color: var(--accent); letter-spacing: 1px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.review .stars svg { width: 15px; height: 15px; }
.review .stars .vf { color: var(--muted); font-size: 11px; letter-spacing: normal; font-weight: 700; }
.review .rtitle { font-weight: 800; font-size: 14.5px; margin: 8px 0 4px; }
.review { margin-top: 16px; }
.miniload { margin-top: 20px; text-align: center; }
.miniload .mlbar { height: 6px; background: var(--card-2); border-radius: 4px; overflow: hidden; }
.miniload .mlbar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 4px; transition: width 0.2s linear; }
.miniload span { display: block; margin-top: 10px; color: var(--muted); font-size: 13.5px; }

/* projected graph extras */
.datechip { text-align: center; background: var(--accent-dim); color: var(--text); border: 1px solid rgba(45,212,191,0.3);
  border-radius: 10px; padding: 10px 14px; font-size: 15px; margin-top: 14px; }
.datechip b { color: var(--accent); }
.glabel { text-align: right; margin-top: 6px; }
.glabel .sustain { font-size: 11.5px; color: var(--accent); font-weight: 700; }
.accent { color: var(--accent); }

/* pills-vs-Bedrock comparison table */
.cmp { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cmp .crow { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; }
.cmp .crow + .crow { border-top: 1px solid var(--line); }
.cmp .clabel { padding: 15px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cmp .ccell { padding: 15px 6px; display: grid; place-items: center; }
.cmp .head { background: var(--card-2); }
.cmp .head .ccell { font-weight: 800; font-size: 13px; }
.cmp .head .ccell.us { color: var(--accent); }
.cmp .head .ccell.them { color: var(--muted); }
.cmp .head .clabel { color: var(--muted); }
.cmp .ccell.us { background: rgba(20,184,166,0.06); }
.cmp .tick { color: var(--accent); } .cmp .tick svg { width: 20px; height: 20px; }
.cmp .ex { color: var(--muted-2); } .cmp .ex svg { width: 18px; height: 18px; }

/* honest authority + reviewer cards */
.authorcard { display: flex; align-items: center; gap: 14px; margin-top: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.authorcard .ava { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; background: var(--grad);
  color: var(--ink-on-accent); font-weight: 800; font-size: 16px; display: grid; place-items: center; }
.authorcard b { display: block; font-size: 15px; }
.authorcard span { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* body/mind/confidence triad + quote */
.triad { display: flex; flex-direction: column; align-items: center; margin-top: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.triad > svg { width: 60px; height: 60px; color: var(--accent); }
.triad .trilabels { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.triad .tri { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(45,212,191,0.3);
  border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 14px; }
.quotecard { margin-top: 16px; background: var(--card); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 18px; font-size: 14.5px; line-height: 1.55;
  color: var(--text); font-style: italic; }

/* profile summary gauge + alert + metric rows */
.gaugecard { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px 18px; }
.gaugebar { position: relative; height: 44px; margin-top: 26px; }
.gaugebar .gtrack { position: absolute; left: 0; right: 0; top: 26px; height: 8px; border-radius: 5px;
  background: linear-gradient(90deg, #e5484d 0%, #f0883e 45%, #14B8A6 100%); }
.gaugebar .gz { position: absolute; top: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.gaugebar .gz.low { left: 4%; color: #e5484d; } .gaugebar .gz.mid { left: 46%; color: #f0883e; } .gaugebar .gz.high { right: 4%; color: #14B8A6; }
.gaugebar .gmark { position: absolute; top: 34px; transform: translateX(-50%); white-space: nowrap;
  background: var(--text); color: #FFFFFF; font-weight: 800; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; }
.gaugebar .gmark::before { content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--text); }
.gaugebar .gmark b { color: #5EEAD4; }
.gscale { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 11px; margin-top: 10px; }
.alertbox { display: flex; gap: 12px; margin-top: 18px; background: rgba(229,72,77,0.08);
  border: 1px solid rgba(229,72,77,0.35); border-radius: var(--radius); padding: 16px; }
.alertbox .warn { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #e5484d; color: #fff;
  font-weight: 800; display: grid; place-items: center; }
.alertbox b { display: block; color: #e5877a; font-size: 14.5px; margin-bottom: 4px; }
.alertbox span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.mrow { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.profilecard .mrow:last-child { border-bottom: none; }
.mrow .mk { color: var(--muted); } .mrow .mv { font-weight: 700; text-align: right; } .mrow .mv.accent { color: var(--accent); }

/* good hands bullets */
.ghlist { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.ghrow { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; font-size: 15px; line-height: 1.45; }
.ghrow .ghc { color: var(--accent); flex: 0 0 auto; transform: rotate(-90deg); }
.ghrow .ghc svg { width: 18px; height: 18px; }

/* worldwide map */
.mapwrap { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; }
.mapdots { position: relative; height: 190px; border-radius: 10px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1.4px, transparent 1.6px);
  background-size: 14px 14px; }
.mapdots .pin { position: absolute; width: 12px; height: 12px; transform: translate(-50%,-50%);
  background: var(--accent); border-radius: 50% 50% 50% 0; rotate: -45deg;
  box-shadow: 0 0 0 4px rgba(45,212,191,0.18); }

/* date picker */
.datefield { display: flex; align-items: center; gap: 10px; margin-top: 20px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 4px 14px; }
.datefield .dfi { color: var(--accent); display: grid; place-items: center; }
.datefield .dfi svg { width: 20px; height: 20px; }
.datefield input { flex: 1; background: none; border: none; color: var(--text); font-size: 16px; padding: 15px 0; outline: none;
  color-scheme: dark; }
.privacy { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--muted-2);
  font-size: 12.5px; margin-top: 14px; line-height: 1.4; }
.privacy svg { width: 15px; height: 15px; flex: 0 0 auto; }
.skiplink { display: block; margin: 12px auto 0; color: var(--muted); font-size: 14px; text-decoration: underline; }

/* email field with icon */
.field { position: relative; margin-top: 22px; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 4px 14px; }
.field .efi { color: var(--accent); font-weight: 800; font-size: 20px; }
.field input { flex: 1; background: none; border: none; color: var(--text); font-size: 16px; padding: 16px 0; outline: none; }

/* star ratings (generic, applies to review + carousel cards) */
.stars { display: flex; align-items: center; gap: 6px; color: var(--accent); letter-spacing: 0; }
.stars svg { width: 15px; height: 15px; flex: 0 0 auto; }
.stars .vf { color: var(--muted); font-size: 11px; font-weight: 700; }

/* main loader + review carousel */
.loadtop { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0 10px; text-align: center; }
.loadproof { margin-top: 8px; }
.loadproof .lpn { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.carousel { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.carousel .rcard { flex: 0 0 78%; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; }
.carousel .rcard .rtitle { font-weight: 800; font-size: 14px; margin: 8px 0 4px; }
.carousel .rcard .body { font-size: 13px; color: var(--muted); line-height: 1.45; }
.carousel .rcard .who { font-size: 12px; color: var(--muted-2); margin-top: 8px; }
.rhead { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ravatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
}
.rmeta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.rmeta b { font-size: 13.5px; color: var(--text); }
.rmeta > span { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.rmeta svg { width: 11px; height: 11px; flex: 0 0 auto; }
.rdate { font-size: 11px; color: var(--muted-2); white-space: nowrap; align-self: flex-start; }
.stars.green { color: #00B67A; }
.stars.green .vf { color: var(--muted); }

/* micro-commit gate heading */
.modal .mchead { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }

@media (max-width: 380px) {
  h1.title { font-size: 24px; }
  h2.qtitle { font-size: 21px; }
  .cmp .clabel { font-size: 12.5px; padding: 13px 9px; }
  .drb { width: 128px; height: 128px; }
}

/* ==========================================================================
   POLISH PASS 2026-07-26 — image density + responsive hardening
   (visuals + mobile only; no copy / structure / pricing changes)
   ========================================================================== */

/* global image safety: an image can never force horizontal scroll */
img { max-width: 100%; height: auto; }

/* dark-background anatomy render -> a bold, framed medical visual on the light page */
.mechfig {
  display: block; margin: 22px auto 10px;
  width: 100%; max-width: 340px; max-height: 320px;
  object-fit: cover;
  background: #0B221F; border-radius: 20px; padding: 10px;
  border: 1px solid rgba(20,184,166,0.30);
  box-shadow: 0 18px 44px rgba(15,46,43,0.20), 0 0 0 7px rgba(20,184,166,0.06);
}
.mechfig.q  { max-width: 300px; max-height: 280px; margin: 16px auto 14px; }
.mechfig.gauge { max-width: 300px; max-height: none; padding: 20px 22px 16px; }
.mechfig.gauge svg { display: block; width: 100%; height: auto; }
.mechfig.lg { max-width: 360px; max-height: 340px; }

/* light-background render inside a rounded card */
.mechcard {
  margin: 18px auto 8px; max-width: 460px;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
}
.mechcard img {
  display: block; width: 100%; height: 200px;
  object-fit: cover; object-position: center;
}

/* now -> trained mechanism pair (result page + paywall band) */
.mechpair, .mechband {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; margin: 22px auto 6px; max-width: 460px;
}
.mechpair figure, .mechband figure { margin: 0; min-width: 0; text-align: center; }
.mechpair .mechfig, .mechband .mechfig {
  margin: 0 auto 8px; max-width: 100%; max-height: 148px; filter: none;
}
.mechpair figcaption { font-size: 12px; color: var(--muted); line-height: 1.35; }
.mechband figcaption { font-size: 12.5px; color: var(--accent); font-weight: 700; }
.mpar, .mbar { color: var(--accent); display: grid; place-items: center; }
.mpar svg, .mbar svg { width: 22px; height: 22px; }

/* keep the score-gauge marker label from clipping the card edges */
.gaugebar .gmark { max-width: 92%; }

/* phone-width hardening (tested 360 / 390 / 414) */
@media (max-width: 414px) {
  .mechfig    { max-height: 200px; max-width: 74%; }
  .mechfig.q  { max-height: 156px; max-width: 66%; }
  .mechfig.lg { max-height: 210px; max-width: 82%; }
  .mechcard img { height: 176px; }
  .mechpair .mechfig, .mechband .mechfig { max-height: 122px; }
  .mechpair figcaption, .mechband figcaption { font-size: 11px; }
  .mechpair, .mechband { gap: 4px; }
}
@media (max-width: 360px) {
  .mechcard img { height: 160px; }
  .mechpair .mechfig, .mechband .mechfig { max-height: 104px; }
}

/* ==========================================================================
   Darker answer buttons for visibility on the mint canvas (2026-07-30)
   ========================================================================== */
.opt {
  background: #FFFFFF;
  border-color: rgba(15,46,43,0.08);
  box-shadow: 0 2px 6px rgba(15,46,43,0.06), 0 8px 20px rgba(15,46,43,0.05);
}
.opt .lbl { color: var(--text); }
.opt:hover { background: #FFFFFF; border-color: rgba(20,184,166,0.45);
  box-shadow: 0 4px 10px rgba(15,46,43,0.09), 0 12px 26px rgba(15,46,43,0.07); }
.opt .iconwell { background: var(--accent-dim); color: var(--accent-d); }
.opt .radio { border-color: rgba(15,46,43,0.22); }

/* scale (1-5) answer tiles -> same dark treatment */
.scale button {
  background: #FFFFFF; color: var(--text);
  border-color: rgba(15,46,43,0.08);
  box-shadow: 0 2px 6px rgba(15,46,43,0.06), 0 8px 20px rgba(15,46,43,0.05);
}
.scale button:hover { border-color: rgba(20,184,166,0.45); }
.scale button.selected { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); }

/* ---------- brand logo lockup + trust line (2026-07-30) ---------- */
.logo { background: none; border: none; width: 40px; height: 40px; }
.logo svg { width: 40px; height: 40px; }
.brandlock { display: inline-flex; align-items: center; gap: 11px; }
.brandlock .logo { width: 42px; height: 42px; }
.brandlock .logo svg { width: 42px; height: 42px; }
.bmwrap { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.bm { font-weight: 900; letter-spacing: 2.5px; font-size: 21px; color: var(--text); }
.bmt { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 5px; }
.trustline { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.trustline svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }

/* cite badge (research-backed) */
.citebadge {
  display: flex; width: fit-content; align-items: center; gap: 8px; margin: 20px auto 0;
  background: var(--amber-dim); color: var(--amber-d); border: 1px solid rgba(224,142,0,0.28);
  border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.citebadge svg { width: 15px; height: 15px; flex: 0 0 auto; }
.center-block .citebadge { display: flex; max-width: 440px; }

/* ==========================================================================
   Relatio-pass: bold full-fill SELECTED state (satisfying tap feedback)
   ========================================================================== */
.opt.selected { background: var(--accent); border-color: var(--accent); box-shadow: 0 10px 24px rgba(20,184,166,0.35); }
.opt.selected .lbl { color: var(--ink-on-accent); }
.opt.selected .iconwell { background: rgba(4,35,31,0.16); color: var(--ink-on-accent); }
.opt.selected .radio { border-color: var(--ink-on-accent); background: var(--ink-on-accent); }
.opt.selected .radio::after { background: var(--accent); }
.opt.checkbox.selected .radio::after { border-color: var(--accent); }
/* plans on the paywall get the same bold selected treatment */
.plan.selected { background: var(--accent); border-color: var(--accent); }
.plan.selected .pname, .plan.selected .pmeta, .plan.selected .pperday { color: var(--ink-on-accent); }
.plan.selected .pmeta s { color: rgba(4,35,31,0.55); }
.plan.selected .radio { border-color: var(--ink-on-accent); background: var(--ink-on-accent); }
.plan.selected .radio::after { background: var(--accent); }

/* ---------- social-proof page (after entry) ---------- */
.spbig { text-align: center; margin-top: 14px; }
.spnum { font-weight: 900; font-size: 40px; color: var(--accent); letter-spacing: -1px; }
.spstars { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 16px; }
.spstarrow { display: flex; gap: 5px; }
.spstarrow svg { width: 23px; height: 23px; color: var(--amber); }
.spstarsn { font-size: 12px; color: var(--muted-2); }
.spgrid { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.sprow { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.spico { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; }
.spico svg { width: 22px; height: 22px; }
.sptxt { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.sptxt b { font-size: 15.5px; font-weight: 700; }
.sptxt span { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ---------- value-stack: anchored bonus prices -> Free (Relatio tactic) ---------- */
.incprice { margin-left: auto; flex: 0 0 auto; align-self: center; font-size: 13px; color: var(--muted); white-space: nowrap; padding-left: 10px; }
.incprice s { color: var(--muted-2); }
.incprice b { color: var(--accent); font-weight: 800; }
.bonustotal { margin-top: 14px; text-align: center; background: var(--amber-dim); border: 1px solid rgba(224,142,0,0.30); border-radius: var(--radius-sm); padding: 13px 14px; font-size: 14.5px; color: var(--text); font-weight: 600; }
.bonustotal s { color: var(--muted); }
.bonustotal b { color: var(--amber-d); font-weight: 800; }

/* order bump — the Bedrock Coach add-on */
.bump { display:flex; align-items:flex-start; gap:12px; margin-top:16px; background:var(--amber-dim);
  border:2px dashed var(--amber-d); border-radius:14px; padding:15px 16px; cursor:pointer; transition:background .15s, border-color .15s; }
.bump.on { background:rgba(20,184,166,0.10); border-style:solid; border-color:var(--accent); }
.bumpchk { width:24px; height:24px; border-radius:7px; border:2px solid var(--amber-d); background:#fff; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; margin-top:1px; }
.bump.on .bumpchk { background:var(--accent); border-color:var(--accent); }
.bumpchk svg { width:16px; height:16px; }
.bumptxt { display:flex; flex-direction:column; gap:3px; }
.bumptxt b { font-size:15px; color:var(--text); }
.bumptxt span { font-size:13px; color:var(--muted); line-height:1.45; }

/* ---- Paywall v2: price-tag per-day treatment + now/goal bars (modeled on the winner) ---- */
.plan .pright { display:flex; align-items:center; gap:9px; }
.plan .pwas { color:var(--muted-2); font-size:13px; }
.plan .ptag {
  position:relative; display:flex; align-items:baseline; gap:1px;
  background:var(--grad); color:#fff; padding:7px 12px 7px 14px; border-radius:10px;
}
.plan .ptag i { font-style:normal; font-size:13px; font-weight:800; align-self:flex-start; margin-top:4px; }
.plan .ptag b { font-size:26px; font-weight:900; line-height:1; letter-spacing:-1px; }
.plan .ptag em { font-style:normal; font-size:9.5px; font-weight:800; line-height:1.05; margin-left:3px; align-self:center; max-width:26px; }
.plan.selected .ptag { background:var(--ink-on-accent); }
.plan .badge { display:inline-flex; align-items:center; gap:4px; }
.plan .badge svg { width:12px; height:12px; }

.goalgrid { margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.goalrow { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-sm); }
.goalrow .gname { font-weight:800; font-size:14px; margin-bottom:10px; }
.goalrow .gcols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.goalrow .gval { display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; }
.goalrow .gval.now { color:var(--muted); } .goalrow .gval.goal { color:var(--accent-d); }
.goalrow .gbar { height:6px; border-radius:4px; background:var(--card-2); overflow:hidden; }
.goalrow .gbar i { display:block; height:100%; border-radius:4px; background:var(--muted-2); }
.goalrow .gbar.goal i { background:var(--grad); }
/* plan card: name and price must stack, not run together */
.plan .pinfo { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; text-align:left; }
.plan .pname { display:block; font-weight:800; font-size:15px; letter-spacing:.3px; }
.plan .pmeta { display:block; font-size:13px; color:var(--muted); }
.plan.selected .pmeta { color:var(--ink-on-accent); opacity:.75; }
.plan .ptag sup { font-size:13px; font-weight:900; line-height:1; margin-left:1px; align-self:flex-start; margin-top:3px; }
.plan .ptag em { font-size:9px; line-height:1.1; }

/* ---- Founding-member testimonials ---- */
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm); text-align: left; }
.tgrid { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.carousel .tcard { flex: 0 0 82%; scroll-snap-align: start; }
.thead { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tav { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; }
.tmeta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.tmeta b { font-size: 14px; color: var(--text); }
.tmeta > span { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.tmeta svg { width: 11px; height: 11px; flex: 0 0 auto; }
.tverified { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800;
  color: #00B67A; white-space: nowrap; align-self: flex-start; }
.tverified svg { width: 11px; height: 11px; }
.tcard .stars { margin-bottom: 7px; }
.ttitle { font-weight: 800; font-size: 14.5px; margin-bottom: 5px; }
.tquote { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* narrative-beat screen (story step) */
.storyby{margin-top:10px;font-size:14px;color:var(--muted,#5C6B69);text-align:center}
.storyby b{color:var(--text,#0F2E2B)}
.storylead{margin-top:18px;font-size:16px;font-weight:600;line-height:1.45;text-align:center;color:var(--text,#0F2E2B)}

/* ==========================================================================
   PROTIVA additions (2026-08-13) — new components on top of the reused quiz shell
   ========================================================================== */

/* entry: gender split */
.gengrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.gencard { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 22px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm); transition: border-color .15s, transform .05s; }
.gencard:active { transform: scale(.98); }
.gencard:hover { border-color: var(--accent); }
.gencard .genglyph { width: 70px; height: 88px; color: var(--accent-d); display: grid; place-items: center; }
.gencard .genglyph svg { width: 100%; height: 100%; }
.gencard .cap { font-weight: 800; font-size: 16px; }

/* body-type silhouettes */
.options.bodygrid { grid-template-columns: 1fr 1fr; }
.options.bodygrid .opt { flex-direction: column; text-align: center; padding: 16px 10px; gap: 8px; }
.iconwell.body { width: 54px; height: 66px; color: var(--accent-d); background: transparent; }
.iconwell.body svg { width: 100%; height: 100%; }

/* body-map trouble areas */
.bodymapwrap { display: flex; gap: 16px; align-items: center; margin-top: 6px; }
.bodymapfig { width: 108px; height: 180px; flex: none; }
.bodymapfig .on { opacity: 1; }
.bodymapfig circle[fill], .bodymapfig rect[fill] { opacity: .25; }
.bodymapfig .on { opacity: 1 !important; fill: var(--accent) !important; }
.areachips { display: flex; flex-wrap: wrap; gap: 9px; flex: 1; }
.areachip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--card); font-weight: 700; font-size: 14px; }
.areachip svg { width: 15px; height: 15px; }
.areachip.selected { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-d); }

/* testimonial / proof slots (draft only) */
.tcard.slot { border: 1.5px dashed var(--amber); background: var(--amber-dim); }
.tcard.slot .ttitle { color: var(--amber-d); font-weight: 800; }
.placeholder { border: 1.5px dashed var(--amber); background: var(--amber-dim); color: var(--amber-d);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; font-weight: 600; margin: 14px 0; line-height: 1.45; }

/* value comparison bars */
.vbars { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.vbar .vname { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.vtrack { height: 16px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.vtrack > i { display: block; height: 100%; border-radius: 999px; }
.vtrack.them > i { background: #C4B7A0; }
.vtrack.us > i { background: var(--grad); }
.vbar .vnote { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* unit toggle + numeric input */
.unittoggle { display: inline-flex; gap: 4px; background: var(--card-2); border-radius: 999px; padding: 4px; margin: 4px auto 16px; }
.unittoggle button { padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--muted); }
.unittoggle button.on { background: #fff; color: var(--accent-d); box-shadow: var(--shadow-sm); }
.numrow { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 6px; }
.numrow input { width: 120px; text-align: center; font-size: 30px; font-weight: 900; padding: 12px 8px;
  border: 2px solid var(--line-2); border-radius: 14px; background: #fff; color: var(--text); }
.numrow input:focus { outline: none; border-color: var(--accent); }
.numrow .unit { font-weight: 800; color: var(--muted); font-size: 18px; }

/* stat + results rows */
.statsub { text-align: center; color: var(--muted); font-weight: 700; margin-top: 4px; }
.ngrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.ngrow svg { width: 17px; height: 17px; flex: none; }
.ngcol.us .ngrow svg { color: var(--accent-d); }
.ngcol.them .ngrow svg { color: #B08968; }

/* paywall extras */
.discountline { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--amber-d);
  font-weight: 800; font-size: 14px; margin: 4px 0 14px; }
.discountline svg { width: 17px; height: 17px; }
.disclosure.rebill { text-align: left; }
.rebilllist { margin: 12px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.rebillkey { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; margin: 8px 0; line-height: 1.45; }
.rebillkey svg { width: 17px; height: 17px; color: var(--accent-d); flex: none; margin-top: 1px; }
.nowgoalcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 8px 0; box-shadow: var(--shadow-sm); }
.nowgoalcard .ngk { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.nowgoalcard .ngv { display: block; font-weight: 800; font-size: 15px; margin-top: 3px; }
.nowgoalcard .ngarrow svg { width: 22px; height: 22px; color: var(--accent); }
.plan .badge { background: var(--gold); }

/* ==========================================================================
   ADVERTORIAL — Protiva Health editorial (our OWN branded editorial)
   ========================================================================== */
body.editorial { background: #fff; }
.masthead { border-bottom: 2px solid var(--text); background: #fff; position: sticky; top: 0; z-index: 20; }
.mast-inner { max-width: 720px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.mast-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.mast-brand .logo { width: 30px; height: 30px; border-radius: 8px; }
.mast-brand .logo svg { width: 20px; height: 20px; }
.mast-word { font-weight: 900; letter-spacing: 1.5px; font-size: 18px; color: var(--text); }
.mast-word em { font-style: normal; font-weight: 700; color: var(--accent-d); letter-spacing: 2px; }
.mast-nav { display: flex; gap: 16px; }
.mast-nav span { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.article { max-width: 680px; margin: 0 auto; padding: 26px 20px 40px; }
.article .eyebrow { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; }
.article h1 { font-size: 32px; line-height: 1.18; font-weight: 900; letter-spacing: -.6px; margin: 10px 0 0; }
.article .deck { font-size: 18px; line-height: 1.5; color: #3B4A45; margin-top: 14px; font-weight: 500; }
.byline { display: flex; align-items: center; gap: 11px; margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.by-av { width: 42px; height: 42px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); flex: none; }
.by-txt { display: flex; flex-direction: column; font-size: 13.5px; }
.by-txt b { font-weight: 800; }
.by-txt span { color: var(--muted); }
.art-hero { height: 200px; border-radius: 16px; margin: 6px 0 22px;
  background: linear-gradient(135deg, #EDF3EE, #DCEBE1 60%, #CFE6D6); border: 1px solid var(--line); }
.art-body h2 { font-size: 23px; font-weight: 900; letter-spacing: -.3px; margin: 30px 0 10px; }
.art-body p { font-size: 17.5px; line-height: 1.62; color: #26332F; margin: 0 0 15px; }
.art-cta { background: var(--card-2); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin: 28px 0; text-align: center; }
.art-cta b { display: block; font-size: 19px; font-weight: 900; }
.art-cta span { display: block; color: var(--muted); font-size: 15px; margin: 8px 0 16px; line-height: 1.5; }
.cta-btn { display: inline-block; background: var(--grad); color: #fff; font-weight: 900; font-size: 17px;
  padding: 15px 34px; border-radius: 14px; text-decoration: none; letter-spacing: .4px; box-shadow: 0 12px 28px rgba(22,133,90,.3); }
.proof-slot { border: 1.5px dashed var(--amber); background: var(--amber-dim); color: var(--amber-d);
  border-radius: 10px; padding: 6px 10px; font-size: 13.5px; font-weight: 600; }
.proof-slot.inline { display: inline; padding: 2px 6px; }
.proof-slot.block { display: block; padding: 14px 16px; margin: 8px 0 15px; line-height: 1.5; }
.art-disc { font-size: 12.5px !important; color: var(--muted-2) !important; font-style: italic; margin-top: 22px !important; }
.art-footer { max-width: 680px; margin: 0 auto; padding: 26px 20px 48px; border-top: 2px solid var(--text); text-align: center; }
.art-footer .mast-word { font-size: 16px; }
.art-footer p { color: var(--muted); font-size: 12.5px; margin-top: 8px; }

@media (max-width: 420px) {
  .article h1 { font-size: 27px; }
  .article .deck { font-size: 16.5px; }
  .art-body p { font-size: 16.5px; }
  .mast-nav { gap: 11px; }
}

/* ---- Advertorial depth additions (2026-08-14 rebuild to Healthtime depth) ---- */
.toc{border:1px solid #E4DECF;background:#FBFAF5;border-radius:14px;padding:16px 18px;margin:22px 0 8px;display:flex;flex-direction:column;gap:7px}
.toc-lead{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#8A8676;font-weight:700;margin-bottom:2px}
.toc a{color:#16855A;text-decoration:none;font-weight:600;font-size:.98rem;line-height:1.35}
.toc a:hover{text-decoration:underline}
.art-body .bullets{list-style:none;margin:6px 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.art-body .bullets li{position:relative;padding-left:32px;line-height:1.5}
.art-body .bullets.neg li::before{content:"\2715";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:#FBE4DA;color:#D8481F;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.art-body .bullets.pos li::before{content:"\2713";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:#DAF3E8;color:#16855A;font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.testi{border-left:4px solid #1FA46E;background:#FBFAF5;border-radius:0 14px 14px 0;padding:18px 20px;margin:16px 0;font-style:italic;color:#3A4A44}
.comments{border:1px dashed #C9C2AE;border-radius:14px;padding:16px 18px;margin:12px 0;color:#5A6560}
.cc{color:#8A8676;font-weight:600}
.art-fine{font-size:.82rem;color:#9A9686;text-align:center;margin:6px 0 4px}

/* ==========================================================================
   PROTIVA depth pass (2026-08-14) — live-personalization + rich interstitials
   ========================================================================== */

/* option chevron (single-select affordance) */
.opt .chevr { margin-left: auto; color: var(--muted-2); display: inline-flex; }
.opt .chevr svg { width: 18px; height: 18px; }
.opt.checkbox .chevr { display: none; }

/* education screen */
.eduhero { width: 64px; height: 64px; margin: 10px auto 0; border-radius: 18px; background: var(--card-2);
  display: grid; place-items: center; color: var(--accent-d); box-shadow: var(--shadow-sm); }
.eduhero svg { width: 34px; height: 34px; }
.ticklist { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tickrow { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; }
.tickrow svg { width: 20px; height: 20px; color: var(--accent-d); flex: none; margin-top: 1px; }

/* big number (combos / education) */
.bignum { font-weight: 900; letter-spacing: -1px; line-height: 1; text-align: center; }

/* "3x" comparison chart */
.barcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px 12px; margin-top: 16px; box-shadow: var(--shadow-sm); }
.barchart { display: flex; align-items: flex-end; justify-content: center; gap: 34px; height: 190px; }
.barcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar { width: 74px; border-radius: 12px 12px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; }
.bar.us { background: var(--grad); }
.bar.them { background: #C4B7A0; }
.barvalue { color: #fff; font-weight: 900; font-size: 22px; }
.barlbl { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center; }

/* LIVE callouts (BMI / target-% / age helper). Echo the number back instantly. */
.livecallout { display: none; }
.livecallout.show { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px;
  border-radius: 14px; padding: 14px 15px; font-size: 14px; line-height: 1.45; }
.livecallout b { display: block; font-weight: 800; }
.livecallout span { display: block; color: inherit; opacity: .9; margin-top: 3px; }
.livecallout .slotline { color: var(--amber-d); font-size: 12px; font-weight: 700; margin-top: 6px; }
.livecallout.warn { background: #FDF3E7; border: 1px solid #F3C98B; color: #8A5A15; }
.livecallout.good { background: #E8F6EE; border: 1px solid #A9DCBE; color: #14663F; }
.livecallout.info { background: var(--card-2); border: 1px solid var(--line); color: var(--text); }

/* dashboard cards + BMI rainbow spectrum */
.dashcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-top: 14px; box-shadow: var(--shadow-sm); }
.dashh { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.dashh svg { width: 16px; height: 16px; }
.bmispectrum { position: relative; margin-top: 30px; }
.bmisegs { display: flex; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.bmiseg { flex: 1; text-align: center; }
.bmiseg.active { color: var(--text); }
.bmibar { height: 12px; border-radius: 999px; margin-top: 5px;
  background: linear-gradient(90deg, #6FB1E5 0%, #4FC08D 33%, #F0B84B 66%, #E5714A 100%); }
.bmimark { position: absolute; bottom: 20px; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 800; background: var(--text); color: #fff; padding: 3px 8px; border-radius: 8px; }
.bmimark::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text); }
.bmimark b { color: #fff; }

/* good-news callout (projected curve) */
.goodnews { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; background: #E8F6EE;
  border: 1px solid #A9DCBE; border-radius: 14px; padding: 14px 15px; color: #14663F; font-size: 14px; line-height: 1.45; }
.goodnews b { display: block; font-weight: 800; }
.goodnews span { display: block; margin-top: 3px; }

/* loader staged checklist */
.loadchecklist { max-width: 320px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 12px; }
.lcheck { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: var(--muted-2); transition: color .3s; }
.lcheck .lcbox { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: all .3s; }
.lcheck .lcbox svg { width: 14px; height: 14px; }
.lcheck.done { color: var(--text); }
.lcheck.done .lcbox { background: var(--grad); border-color: transparent; color: #fff; }

/* results 5-segment bar + comparison */
.resbar { display: flex; gap: 5px; margin: 4px 0 16px; }
.resbar i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-2); }
.resbar i.on { background: var(--grad); }
.cmp2 { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 16px; }
.cmp2head { display: flex; background: var(--card-2); font-weight: 800; font-size: 13px; }
.cmp2head span { flex: 1; padding: 10px 14px; }
.cmp2head span:last-child { color: var(--accent-d); }
.cmp2row { display: flex; border-top: 1px solid var(--line); font-size: 13.5px; }
.cmp2row span { flex: 1; padding: 12px 14px; display: flex; align-items: flex-start; gap: 7px; line-height: 1.35; }
.cmp2row svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cmp2row .them { color: var(--muted); border-right: 1px solid var(--line); }
.cmp2row .them svg { color: #C4796A; }
.cmp2row .us { font-weight: 700; }
.cmp2row .us svg { color: var(--accent-d); }

/* paywall now-vs-goal grid */
.nowgoalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
.ngc { border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); }
.ngc.now { background: #FDF3E7; border: 1px solid #F3C98B; }
.ngc.goal { background: #E8F6EE; border: 1px solid #A9DCBE; }
.ngc .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--muted); }
.ngstat { font-size: 13.5px; margin-top: 8px; }
.ngstat b { font-weight: 800; float: right; }
.subline { color: var(--muted); font-size: 13.5px; }

/* ---- Real proof wired in (expert byline photo, testimonial sig, comments thread) 2026-08-15 ---- */
.by-av{background-size:cover;background-position:center top}
.testi-sig{font-style:normal;font-weight:700;color:#14302A;margin-top:6px}
.comments{border:none;padding:0;display:flex;flex-direction:column;gap:16px}
.cmt{display:flex;gap:12px;align-items:flex-start}
.cmt.reply{margin-left:34px}
.cmt-av{flex:none;width:34px;height:34px;border-radius:50%;background:#1FA46E;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.cmt-body{flex:1}
.cmt-head{font-size:.9rem;margin-bottom:2px}
.cmt-head b{color:#14302A}
.cmt-head span{color:#9A9686;font-size:.8rem;margin-left:6px}
.cmt-body p{margin:0;line-height:1.5;color:#3A4A44}

/* real founding-member testimonial cards (quiz) 2026-08-15 */
.twho { margin-top: 9px; font-weight: 700; font-size: 13px; color: var(--ink, #14302A); }
.tcard .tquote { font-style: italic; }

/* ---- Gap-close vs Healthtime: sticky CTA, breadcrumb, quiz imagery (2026-08-15) ---- */
.sticky-cta{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#14302A;color:#F4F1EA;padding:11px 18px;box-shadow:0 2px 14px rgba(0,0,0,.14)}
.sticky-cta .sc-txt{font-size:.92rem;font-weight:600;line-height:1.3;opacity:.95}
.sticky-cta .sc-btn{flex:none;background:#1FA46E;color:#fff;font-weight:800;letter-spacing:.02em;
  padding:10px 20px;border-radius:10px;text-decoration:none;white-space:nowrap;font-size:.9rem}
.sticky-cta .sc-btn:hover{background:#16855A}
.crumbs{font-size:.8rem;color:#9A9686;margin-bottom:10px}
.crumbs span{color:#6b7570}
@media(max-width:600px){.sticky-cta .sc-txt{font-size:.8rem}.sticky-cta .sc-btn{padding:9px 15px;font-size:.82rem}}

/* quiz hero imagery (entry + education) */
.qhero{width:100%;height:190px;border-radius:18px;background-size:cover;background-position:center;
  box-shadow:0 6px 22px rgba(20,48,42,.12)}
.qhero.round{width:210px;height:210px;border-radius:50%;margin:8px auto 0;box-shadow:0 8px 26px rgba(20,48,42,.16)}

/* colorful answer emoji (make the quiz entertaining, not boring) 2026-08-15 */
.iconwell.emojiwell{background:transparent;border:none}
.iconwell .emoji{font-size:26px;line-height:1;display:inline-block}
.gencard .genemoji{font-size:54px;line-height:1;display:inline-block}

/* real body-type illustration tiles (Josh-provided) 2026-08-15 */
.options.bodygrid .opt { padding: 10px 10px 14px; }
.bodyimgwell { width: 100%; height: 172px; display: block; border-radius: 14px; overflow: hidden; background: #F4F1EA; }
.bodyimg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* body-type tiles: compact 2-col grid, seamless image, no chevron 2026-08-15 */
.options.bodygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.options.bodygrid .opt { padding: 8px 8px 12px; }
.options.bodygrid .chevr, .options.bodygrid .radio { display: none; }
.options.bodygrid .bodyimgwell { height: 150px; background: transparent; }
.options.bodygrid .lbl { text-align: center; width: 100%; font-weight: 700; }

/* age-bracket photo tiles 2026-08-15 */
.agephotowell { width: 100%; height: 150px; display: block; border-radius: 14px; overflow: hidden; background: #EDE8DC; }
.agephoto { width: 100%; height: 100%; object-fit: cover; display: block; }

/* real study citation footnote (launch) 2026-08-15 */
.refcite{font-size:.78rem;color:#9A9686;line-height:1.5;margin:8px 0 4px;font-style:normal}
.art-body .refcite{margin:2px 0 14px}