/** Shopify CDN: Minification failed

Line 926:0 Unexpected "}"

**/
/* ============================================================
   BioGlo skin quiz — stylesheet
   Split out of sections/bioglo-quiz2.liquid so the section file
   stays small enough to edit and deploy. Contains no Liquid, so
   it is a plain asset. Loaded by the section via asset_url.
   ============================================================ */
/* ============================================================
   DESIGN TOKENS — BioGlo cream & forest-green system, matched
   to the live skin-quiz landing page: warm ivory backgrounds,
   deep forest serif headlines with a sage italic accent, sage
   buttons, red-orange reserved for verdict/urgency moments.
   ============================================================ */
:root {
  --q-stage:         #EDE8E0;   /* quiz stage: warm ivory       */
  --q-cream:         #FAF7F1;   /* header cream                 */
  --q-sage:          #8FAC89;   /* sage green: buttons, accents */
  --q-sage-deep:     #2C4B3B;   /* deep forest: headlines, band */
  --q-forest:        #2C4B3B;   /* ink text                     */
  --q-mist:          #E3DDD2;   /* card borders on cream        */
  --q-mist-track:    #DDD6CA;   /* progress track               */
  --q-mint-tint:     #EEF2EA;   /* selected tint, chips         */
  --q-white:         #ffffff;
  --q-off:           #F6F3EC;   /* results cream                */

  --q-coral:         #2C4B3B;   /* tier flag → forest           */
  --q-blue:          #2C4B3B;   /* match badge → forest         */
  --q-red:           #C8502F;   /* alert: verdict / strikes     */

  --q-line:          #E3DDD2;
  --q-text:          #2F3B33;
  --q-muted:         #8A857A;

  --q-shadow:        0 6px 22px rgba(44,75,59,.08);
  --q-shadow-lg:     0 16px 44px rgba(44,75,59,.16);

  --q-font:          'Lexend', 'Lexend Fallback', sans-serif;
  --q-serif:         'Playfair Display', Georgia, serif;
  --q-radius:        4px;
  --q-radius-lg:     10px;
  --q-col:           400px;     /* quiz column                  */
  --q-col-wide:      680px;     /* results column               */
}

/* ============================================================
   KLAVIYO POPUP SUPPRESSION — quiz page only.
   The quiz IS the email capture; the 20% now lives in the
   results offer. Also exclude /pages/skin-quiz in Klaviyo
   form targeting so this belt-and-braces CSS becomes moot.
   ============================================================ */
div.kl-private-reset-css-Xuajs1,
div[class*="kl-private-reset-css"] { display: none !important; }

/* ============================================================
   BASE
   ============================================================ */
/* Scoped reset. `:where()` holds this at ZERO specificity, so it only
   cancels the browser's default margins/padding — every component class
   (.q-r-sec, .q-option, .q-title …) still wins its own spacing. Writing
   `#bioglo-quiz *` directly gives it ID specificity, which beats every
   component rule and flattens the whole quiz to the edges. That was the
   root cause of the cramped, edge-to-edge results page.               */
:where(#bioglo-quiz) *, :where(#bioglo-quiz) *::before, :where(#bioglo-quiz) *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
#bioglo-quiz {
  font-family: var(--q-font);
  color: var(--q-text);
  background: var(--q-stage);
  min-height: 100vh;
  width: 100%;
  /* no background transition: it wedges background-color at
     transparent in Chromium when values can't interpolate       */
}
#bioglo-quiz.q-mode-results { background: var(--q-off); }

/* ============================================================
   HEADER + PROGRESS  (white bar, thin full-width progress)
   ============================================================ */
.q-header { position: sticky; top: 0; z-index: 100; background: var(--q-cream); }
.q-header-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 20px;
}
.q-brand {
  font-family: var(--q-font); font-size: 22px; font-weight: 700;
  color: var(--q-forest); text-decoration: none; letter-spacing: 0.01em;
}
.q-brand span { color: var(--q-sage); }
.q-progress-track {
  height: 4px; background: var(--q-mist-track); width: 100%;
}
.q-progress-fill {
  height: 100%; background: var(--q-sage-deep); width: 0%;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.q-progress-meta {
  text-align: center; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--q-muted);
  padding-top: 18px; text-transform: uppercase;
}

/* ============================================================
   STAGE
   ============================================================ */
.q-stage {
  display: flex; justify-content: center; align-items: center;
  padding: 28px 20px 40px; min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
}
/* Short screens (intro, questions, gate, interstitial, analyzing) center
   vertically so whitespace is balanced, not dumped below the content.
   The long results page still scrolls from the top.                     */
#bioglo-quiz.q-mode-results .q-stage { align-items: flex-start; padding-bottom: 90px; }
.q-card { width: 100%; max-width: var(--q-col); animation: q-in 0.35s ease forwards; }
.q-card.wide { max-width: var(--q-col-wide); }
@keyframes q-in  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes q-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-14px); } }
.q-card.leaving { animation: q-out 0.22s ease forwards; }

/* ============================================================
   QUESTION (white on sage, Bioma layout)
   ============================================================ */
.q-title {
  font-family: var(--q-serif);
  font-size: clamp(26px, 4.5vw, 34px); font-weight: 600;
  color: var(--q-forest); text-align: center; line-height: 1.22;
  margin-bottom: 10px;
}
.q-hint {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7D9A77;
  text-align: center; margin-bottom: 26px;
}
/* small divider that groups the heading with the subtext under it */
.q-hint::before {
  content: ''; display: block; width: 34px; height: 2px;
  background: var(--q-sage); border-radius: 2px; margin: 0 auto 14px;
}
.q-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.q-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 14px 14px;
  background: var(--q-white);
  border: 1.5px solid #D6DDCE;
  border-radius: var(--q-radius);
  /* lift the cards off the cream stage so they read as tappable buttons */
  box-shadow: 0 1px 2px rgba(44,75,59,.05), 0 3px 10px rgba(44,75,59,.055);
  cursor: pointer; text-align: left;
  font-family: var(--q-font); font-size: 17px; font-weight: 500;
  color: var(--q-forest); line-height: 1.35;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
  touch-action: manipulation; /* remove the 300ms tap delay + double-tap zoom on mobile */
}
.q-option:hover { border-color: var(--q-sage); box-shadow: 0 5px 18px rgba(44,75,59,.12); }
.q-option:active { transform: scale(0.99); }
.q-option.selected { border: 2px solid var(--q-sage); background: var(--q-mint-tint); padding: 13px 13px; }
.q-option-body { flex: 1; min-width: 0; }
.q-option-sub {
  display: block; font-size: 13px; font-weight: 300;
  color: var(--q-muted); margin-top: 4px; line-height: 1.45;
}
.q-check {
  width: 20px; height: 20px; flex-shrink: 0; margin-left: auto;
  border: 2px solid #AEBBA4; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease; background: var(--q-white);
}
.q-option[data-type="multi"] .q-check { border-radius: 4px; }
.q-option.selected .q-check { background: var(--q-sage); border-color: var(--q-sage); }
.q-option.selected .q-check::after {
  content: ''; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(42deg) translate(-1px, -1px);
}

/* ---- face map ---- */
/* Centered via a flex wrapper div so a theme's global `svg {}`
   reset can't left-align it (margin:auto on the SVG isn't enough). */
.q-face-wrap { display: flex !important; justify-content: center; width: 100%; margin: 0 0 20px; touch-action: pan-y; }
.q-face {
  display: block; width: 168px; max-width: 60%; margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(44,75,59,0.16));
  pointer-events: none; touch-action: pan-y;
}
.q-face .q-outline { fill: var(--q-white); stroke: var(--q-mist); stroke-width: 2; }
.q-face .q-feature { fill: none; stroke: #B9C7B4; stroke-width: 2; stroke-linecap: round; }
.q-face .q-zone { fill: var(--q-sage); opacity: 0; transition: opacity 0.25s ease; }
.q-face .q-zone.on { opacity: 0.5; }

/* ============================================================
   AREA SELECTOR (mirror question) — tappable face map with
   callout labels, in place of a scrolling list of options.
   Everything, Continue button included, fits on one screen at
   360x640 and up, so this question can never need scrolling.

   Two sizing rules make that guarantee hold:
   1. The wrapper's blanket min-height:100vh would push the page
      past the screen once the theme header sits on top of it,
      leaving a phantom scrollbar — so this screen sizes to its
      own content instead.
   2. The stage subtracts 260px, deliberately more than the theme
      header and progress bar actually occupy, so the fill can
      never overshoot the viewport on any header height.
   ============================================================ */
#bioglo-quiz.q-mode-face { min-height: auto; }
#bioglo-quiz.q-mode-face .q-stage {
  align-items: stretch; padding: 14px 14px 26px;
  min-height: calc(100vh - 260px);
  min-height: calc(100svh - 260px);
}
/* This screen's subtitle is a full sentence rather than a three-word
   label, so the all-caps, wide-tracked treatment used elsewhere would
   make it hard to read and cost three extra lines of height.        */
#bioglo-quiz.q-mode-face .q-hint {
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--q-muted);
  max-width: 336px;
  margin: 2px auto 0;
}
#bioglo-quiz.q-mode-face .q-card { display: flex; flex-direction: column; }
#bioglo-quiz.q-mode-face .q-fs-holder { flex: 1 1 auto; }
#bioglo-quiz.q-mode-face .q-nav { margin-top: auto; padding-top: 16px; }
.q-fs-holder { display: flex; align-items: center; justify-content: center; width: 100%; margin: 12px 0 2px; }
.q-fs {
  position: relative; width: 100%; max-width: 380px; margin: 0 auto;
  aspect-ratio: 360 / 340;
  max-height: 46vh;
  max-height: 46svh;
  touch-action: pan-y;
}
.q-fs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* Plain line-art face. Only two stroke weights exist on purpose:
   p-key carries the features the eye lands on first (brows, lids,
   mouth) and p-soft the supporting one (nose). Giving every stroke
   the same weight, as the first version did, flattens the drawing. */
.q-fs .p-outline { fill: var(--q-white); stroke: #DCD5C9; stroke-width: 2; stroke-linejoin: round; }
.q-fs .p-key     { fill: none; stroke: #9DB199; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.q-fs .p-soft    { fill: none; stroke: #B5C6B1; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.q-fs .q-zone { fill: var(--q-sage); opacity: 0; transition: opacity 0.28s ease; }
.q-fs .q-zone.on { opacity: 0.5; }

.q-fs-line { stroke: #D3CBBD; stroke-width: 1.3; fill: none; transition: stroke 0.18s ease, stroke-width 0.18s ease; }
.q-fs-line.on { stroke: var(--q-sage); stroke-width: 1.8; }

.q-dot-core { fill: var(--q-white); stroke: #B7C6B2; stroke-width: 1.8; transition: stroke 0.18s ease, stroke-width 0.18s ease; }
.q-dot.on .q-dot-core { stroke: var(--q-sage-deep); stroke-width: 3; }
.q-dot-hit { fill: transparent; cursor: pointer; pointer-events: auto; }

.q-fs-chip {
  position: absolute; transform: translateY(-50%); width: 23%;
  background: var(--q-white); border: 1px solid var(--q-mist); border-radius: 6px;
  padding: 11px 4px; font-family: var(--q-font); font-size: 13px; font-weight: 500;
  color: var(--q-forest); line-height: 1.2; cursor: pointer; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
  touch-action: manipulation; /* snappier face-map taps on mobile */
  box-shadow: 0 2px 7px rgba(44,75,59,0.07);
}
.q-fs-chip.mid { left: 50%; transform: translate(-50%, -50%); }
.q-fs-chip:active { transform: translateY(-50%) scale(0.96); }
.q-fs-chip.mid:active { transform: translate(-50%, -50%) scale(0.96); }
.q-fs-chip.on {
  background: var(--q-mint-tint); border: 2px solid var(--q-sage);
  padding: 10px 3px; font-weight: 600; box-shadow: 0 3px 12px rgba(44,75,59,0.14);
}
@media (max-width: 360px) { .q-fs-chip { font-size: 12px; width: 24.5%; } }

/* ---- nav buttons (quiz) ---- */
.q-nav { display: flex; gap: 10px; align-items: center; }
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--q-font); font-size: 15px; font-weight: 600;
  border: none; cursor: pointer; border-radius: var(--q-radius);
  padding: 16px 24px; transition: all 0.18s ease; text-decoration: none;
  touch-action: manipulation; /* snappier taps, no double-tap zoom */
}
.q-btn-next {
  flex: 1; background: var(--q-sage); color: var(--q-white);
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px;
}
.q-btn-next:hover { background: #7A9873; }
.q-btn-next:disabled { background: #D8D2C6; color: #A09A8E; cursor: not-allowed; }
.q-btn-back {
  background: transparent; color: var(--q-muted);
  border: 1px solid #D5CEC2; padding: 15px 18px;
}
.q-btn-back:hover { color: var(--q-forest); border-color: var(--q-forest); }

/* ============================================================
   INTRO (sage)
   ============================================================ */
.q-intro { text-align: center; color: var(--q-forest); }
.q-intro-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #7D9A77; margin-bottom: 22px;
}
.q-intro-badge::before { content: '• '; }
/* social proof row — 5-star motif + optional rating · review count */
.q-intro-rating { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.q-intro-stars { color: #E0A63C; letter-spacing: 2px; font-size: 16px; line-height: 1; }
.q-intro-rating b { font-size: 14px; color: var(--q-forest); font-weight: 700; }
.q-intro-rating span { font-size: 12.5px; color: var(--q-muted); }
.q-intro-social { font-size: 13.5px; font-weight: 500; color: var(--q-forest); margin-bottom: 22px; }
.q-intro-cta-note { margin-top: 10px; font-size: 12.5px; color: var(--q-muted); }
.q-hero {
  height: 180px; border-radius: var(--q-radius-lg);
  background-size: cover; background-position: center;
  box-shadow: var(--q-shadow-lg); margin-bottom: 26px;
}
.q-intro h1 {
  font-family: var(--q-serif);
  font-size: clamp(30px, 5.4vw, 44px); font-weight: 600;
  line-height: 1.15; margin-bottom: 16px;
}
.q-intro h1 em { font-style: italic; font-weight: 500; color: var(--q-sage); }
.q-intro-sub { font-size: 16px; font-weight: 300; line-height: 1.6; color: #5B635B; max-width: 420px; margin: 0 auto 30px; }
.q-intro-meta { display: flex; justify-content: center; gap: 34px; margin-bottom: 34px; }
.q-intro-meta b { display: block; font-family: var(--q-serif); font-size: 24px; font-weight: 700; color: var(--q-forest); }
.q-intro-meta i { font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--q-muted); }
.q-intro-trust { margin-top: 18px; font-size: 12px; color: var(--q-muted); }

/* ============================================================
   INTERSTITIAL (sage, "we got you")
   ============================================================ */
.q-inter { text-align: center; color: var(--q-forest); padding-top: 12px; }
.q-inter-icon {
  width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--q-sage); color: var(--q-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}
.q-inter h2 { font-family: var(--q-serif); font-size: clamp(24px, 4.5vw, 32px); font-weight: 600; margin-bottom: 14px; line-height: 1.22; }
.q-inter p  { font-size: 16px; font-weight: 300; line-height: 1.65; color: #5B635B; margin-bottom: 14px; }
.q-inter p strong { font-weight: 600; color: var(--q-forest); }
/* big relief stat (Interstitial A) */
.q-inter-stat { margin: 0 auto 20px; }
.q-inter-stat b { display: block; font-family: var(--q-serif); font-size: clamp(56px, 16vw, 84px); font-weight: 700; color: var(--q-sage-deep); line-height: 1; }
.q-inter-stat span { display: block; font-size: 13px; letter-spacing: 0.04em; color: var(--q-muted); margin-top: 4px; }

/* ---- Q6b reframe: the two numbers ARE the screen ----------------------
   Vertically centred with real breathing room, because the compressed-top /
   dead-bottom problem was called out on these screens specifically. Body
   copy never drops below 18px — this audience skews 50+. Nothing here is
   clickable except the single Continue button.                          */
#bioglo-quiz .q-reframe {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 62svh; padding: 8px 4px 4px;
}
#bioglo-quiz .q-reframe h2 { margin-bottom: 26px; }
#bioglo-quiz .q-rf-row { margin-bottom: 22px; }
#bioglo-quiz .q-rf-row-high { margin-bottom: 26px; }
#bioglo-quiz .q-rf-lbl {
  font-size: 18px; line-height: 1.6; font-weight: 300;
  color: #5B635B; margin: 0 0 2px;
}
#bioglo-quiz .q-rf-num {
  font-family: var(--q-serif); font-weight: 700; line-height: 1.05;
  color: var(--q-sage-deep); margin: 0;
  /* Measured, not guessed: "20,000" at 16vw renders ~165px of glyphs in a
     327px card on a 375px phone, and ~158px in 312px at 360px wide.    */
  font-size: clamp(44px, 12vw, 60px);
}
#bioglo-quiz .q-rf-num-high { font-size: clamp(56px, 16vw, 82px); }
#bioglo-quiz .q-rf-unit {
  font-size: 18px; line-height: 1.6; font-weight: 300;
  color: #5B635B; margin: 2px 0 0;
}
#bioglo-quiz .q-rf-close {
  font-size: 18px; line-height: 1.6; font-weight: 400;
  color: var(--q-forest); margin: 0 0 24px;
  padding-top: 22px; border-top: 1px solid var(--q-mist);
}
#bioglo-quiz .q-reframe .q-btn-next { width: 100%; margin-top: 0; }
@media (max-height: 700px) {
  #bioglo-quiz .q-reframe { min-height: 0; }
  #bioglo-quiz .q-reframe h2 { margin-bottom: 18px; }
  #bioglo-quiz .q-rf-row { margin-bottom: 16px; }
  #bioglo-quiz .q-rf-close { padding-top: 16px; margin-bottom: 18px; }
}

/* amount reveal — "tiny pinch vs a lot" bars (Interstitial B + results) */
.q-ppm { margin: 22px 0 4px; text-align: left; }
.q-ppm-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.q-ppm-k { font-size: 12.5px; color: var(--q-muted); line-height: 1.25; }
.q-ppm-k b { display: block; color: var(--q-forest); font-size: 13px; font-weight: 600; }
.q-ppm-bar { height: 30px; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; font-family: var(--q-font); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.q-ppm-bar.low { width: 12%; min-width: 46px; background: #D8D2C6; color: var(--q-forest); }
.q-ppm-bar.high { width: 100%; background: linear-gradient(90deg, var(--q-sage), var(--q-sage-deep)); color: #fff; }
.q-ppm-cap { font-size: 12px; color: var(--q-muted); text-align: center; margin-top: 6px; }

/* skepticism slider */
.q-slider { max-width: 380px; margin: 6px auto 0; text-align: center; }
.q-slider-val { font-family: var(--q-serif); font-size: 46px; font-weight: 700; color: var(--q-sage-deep); line-height: 1; }
.q-slider-val span { font-size: 18px; color: var(--q-muted); margin-left: 4px; }
.q-slider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 22px 0 10px;
  border-radius: 40px; outline: none; background: var(--q-mist-track);
  background-image: linear-gradient(var(--q-sage), var(--q-sage)); background-repeat: no-repeat;
  background-size: var(--fill, 70%) 100%;
}
.q-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--q-white); border: 3px solid var(--q-sage-deep); cursor: pointer;
  box-shadow: 0 2px 8px rgba(44,75,59,.22);
}
.q-slider input[type=range]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--q-white);
  border: 3px solid var(--q-sage-deep); cursor: pointer;
}
.q-slider-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--q-muted); }
.q-slider-note { min-height: 40px; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--q-forest); font-weight: 500; }

/* ============================================================
   ANALYZING (sage, staged checks)
   ============================================================ */
.q-analyzing { text-align: center; color: var(--q-forest); padding-top: 20px; }
.q-analyzing h2 { font-family: var(--q-serif); font-size: 26px; font-weight: 600; margin-bottom: 30px; }
.q-an-items { display: flex; flex-direction: column; gap: 14px; max-width: 340px; margin: 0 auto; text-align: left; }
.q-an-item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 300; color: var(--q-forest); opacity: 0.4; transition: opacity 0.3s ease; }
.q-an-item.on { opacity: 1; }
.q-an-tick {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #C9C1B3; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.q-an-item.on .q-an-tick { background: var(--q-sage); border-color: var(--q-sage); }
.q-an-item.on .q-an-tick::after {
  content: ''; width: 5px; height: 9px;
  border: 2px solid var(--q-white); border-top: none; border-left: none;
  transform: rotate(42deg) translateY(-1px);
}
.q-an-bar { height: 4px; background: var(--q-mist-track); border-radius: 99px; overflow: hidden; max-width: 340px; margin: 30px auto 0; }
.q-an-bar i { display: block; height: 100%; background: var(--q-sage); width: 0%; transition: width 0.4s ease; }

/* ============================================================
   EMAIL GATE (sage)
   ============================================================ */
.q-gate { text-align: center; color: var(--q-forest); }
.q-gate-ready {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--q-white); background: var(--q-sage);
  padding: 6px 16px; border-radius: 40px; margin-bottom: 24px;
}
.q-gate h2 { font-family: var(--q-serif); font-size: clamp(24px, 4.5vw, 32px); font-weight: 600; line-height: 1.22; margin-bottom: 14px; }
.q-gate p  { font-size: 15px; font-weight: 300; line-height: 1.6; color: #5B635B; margin-bottom: 26px; }
.q-gate-form { display: flex; flex-direction: column; gap: 10px; }
.q-gate-form input {
  width: 100%; padding: 15px 16px;
  border: 1px solid #D5CEC2; border-radius: var(--q-radius);
  font-family: var(--q-font); font-size: 16px; color: var(--q-forest);
  background: var(--q-white); outline: none;
}
.q-gate-form input:focus { border-color: var(--q-sage); }
.q-gate-form input.err { border: 2px solid var(--q-red); }
.q-gate-disclaimer { font-size: 11px; color: var(--q-muted); line-height: 1.5; margin-top: 10px; }
/* trust row — fills the space below the form and reassures before opt-in */
.q-gate-trust {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--q-line);
}
.q-gate-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.q-gate-trust-row span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--q-forest); font-weight: 500; }
.q-gate-trust-row span b { color: var(--q-sage-deep); }
.q-gate-stars { color: #E0A63C; letter-spacing: 2px; font-size: 15px; }
.q-gate-social { font-size: 13px; color: var(--q-muted); }

/* ============================================================
   RESULTS (white page, Bioma summary style)
   ============================================================ */
.q-r-band {
  background: var(--q-sage-deep);
  color: var(--q-white);
  border-radius: var(--q-radius-lg); padding: 40px 28px;
  text-align: center; margin-bottom: 22px;
  box-shadow: var(--q-shadow-lg);
}
.q-r-band-label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A9C0A2; margin-bottom: 14px; }
.q-r-band h2 { font-family: var(--q-serif); font-size: clamp(24px, 4vw, 32px); font-weight: 600; line-height: 1.25; margin-bottom: 12px; }
.q-r-band p  { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.82); line-height: 1.6; max-width: 460px; margin: 0 auto; }

.q-r-sec {
  border: 1px solid var(--q-line); border-radius: var(--q-radius-lg);
  padding: 26px; margin-bottom: 18px; background: var(--q-white);
  box-shadow: var(--q-shadow);
}
.q-r-sec h3 {
  font-family: var(--q-serif);
  font-size: 19px; font-weight: 600; color: var(--q-forest);
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.q-r-sec h3::before { content: ''; width: 4px; height: 20px; border-radius: 2px; background: var(--q-sage); }
.q-r-sec p { font-size: 14px; line-height: 1.7; color: #333; margin-bottom: 12px; font-weight: 300; }
.q-r-sec p:last-child { margin-bottom: 0; }
.q-r-sec p strong { font-weight: 600; color: var(--q-forest); }

/* ---- score ---- */
.q-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.q-score-num { font-family: var(--q-serif); font-size: 54px; font-weight: 700; color: var(--q-forest); line-height: 1; }
.q-score-den { font-size: 18px; color: var(--q-muted); }
.q-score-tag {
  margin-left: auto !important; align-self: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; background: var(--q-red); padding: 6px 13px; border-radius: 40px;
  text-transform: uppercase; white-space: nowrap;
}
.q-scale { position: relative; height: 10px; border-radius: 99px; margin: 22px 0 6px;
  background: linear-gradient(90deg, var(--q-red) 0%, #D9A05B 42%, #C7CBA0 72%, var(--q-sage) 100%); }
.q-scale-marker {
  position: absolute; top: 50%; width: 22px; height: 22px;
  background: var(--q-white); border: 4px solid var(--q-sage-deep); border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.q-scale-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--q-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- echo chips ---- */
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; background: var(--q-mint-tint); color: var(--q-forest);
  border-radius: 40px; font-size: 13px; font-weight: 500;
}
.q-chip::before { content: '✓'; font-size: 11px; font-weight: 700; color: var(--q-sage-deep); }

/* ---- product match ---- */
.q-match { display: flex; gap: 18px; align-items: flex-start; }
.q-match img { width: 150px; height: 150px; object-fit: cover; object-position: center; border-radius: var(--q-radius-lg); flex-shrink: 0; background: var(--q-off); }
/* small trust icons sitting directly above the profile-match badge */
.q-match-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.q-mi {
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  font-size: 11px; font-weight: 600; color: var(--q-forest);
  background: var(--q-mint-tint); border-radius: 40px; padding: 6px 11px;
}
.q-mi i { font-style: normal; font-size: 12.5px; }
.q-match-body { flex: 1; min-width: 0; }
.q-match-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; background: var(--q-blue); padding: 5px 13px; border-radius: 40px;
  text-transform: uppercase; margin-bottom: 8px; white-space: nowrap;
}
.q-match h4 { font-family: var(--q-serif); font-size: 20px; font-weight: 600; color: var(--q-forest); margin: 0 0 8px; line-height: 1.2; }
.q-match ul { list-style: none; margin: 0; padding: 0; }
.q-match li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; color: #333; font-weight: 300; line-height: 1.5;
  padding: 3px 0;
}
.q-match li .q-tick { flex-shrink: 0; color: var(--q-sage-deep); font-weight: 700; font-size: 12px; line-height: 1.6; }

/* ---- timeline ---- */
.q-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.q-tl-step { background: var(--q-mint-tint); border-radius: var(--q-radius-lg); padding: 16px 14px; }
.q-tl-step b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--q-sage-deep); margin-bottom: 8px; }
.q-tl-step span { font-size: 12.5px; line-height: 1.55; color: #333; font-weight: 300; }

/* ---- trust strip ---- */
.q-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.q-trust-item { padding: 18px 12px; background: var(--q-mint-tint); border-radius: var(--q-radius-lg); }
.q-trust-item b { display: block; font-size: 13px; font-weight: 600; color: var(--q-forest); margin: 8px 0 4px; }
.q-trust-item span { font-size: 12px; color: var(--q-muted); font-weight: 300; }
.q-trust-item .ico { font-size: 22px; }
.q-trust-item a { color: var(--q-sage-deep); font-weight: 600; text-decoration: underline; }

/* ---- customer reviews (real, config-driven) ---- */
.q-review { padding: 16px 0; border-bottom: 1px solid var(--q-line); }
.q-review:first-of-type { padding-top: 2px; }
.q-review:last-child { border-bottom: none; padding-bottom: 2px; }
.q-review-stars { color: #E0A63C; letter-spacing: 2px; font-size: 14px; line-height: 1; margin-bottom: 8px; }
.q-review-title { font-weight: 600; color: var(--q-forest); font-size: 14.5px; margin-bottom: 6px; }
.q-review-quote { font-size: 13.5px; line-height: 1.65; color: #333; font-weight: 300; margin-bottom: 8px; }
.q-review-by { font-size: 12.5px; color: var(--q-forest); font-weight: 600; }
.q-review-by span { color: var(--q-muted); font-weight: 400; }

/* ---- before/after (config-driven; hidden if no photos) ----
   Senior-proof: a plain vertical stack on phones — every photo is visible
   by just scrolling, no swiping, nothing hidden. 3-up row on desktop.
   Built for 1200x800 (3:2) before|after pairs so the stack stays short.  */
.q-ba-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.q-ba-grid figure { margin: 0; }
/* Normalize all three to a uniform 4:5 head-and-shoulders crop so the set
   looks consistent even though the source photos are framed differently.
   object-position keeps the top (labels + faces) on the tall portraits.   */
.q-ba-grid figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--q-radius-lg); display: block; box-shadow: var(--q-shadow); }
.q-ba-grid figcaption { font-size: 13px; color: var(--q-muted); margin-top: 8px; line-height: 1.45; text-align: center; }
@media (min-width: 641px) {
  .q-ba-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- inline / figure images (mechanism graphic, proof card) ---- */
.q-r-inline-img { display: block; width: 100%; border-radius: var(--q-radius-lg); margin-top: 16px; }
.q-r-figure { padding: 0; overflow: hidden; }
.q-r-figure img { display: block; width: 100%; }

/* ============================================================
   OFFER BLOCK (Bioma checkout style)
   ============================================================ */
.q-offer {
  border: 2px solid var(--q-sage); border-radius: var(--q-radius-lg);
  padding: 28px 24px; margin-bottom: 18px; background: var(--q-white);
  box-shadow: var(--q-shadow-lg);
}
.q-offer-head { text-align: center; margin-bottom: 22px; }
.q-offer-head h3 { font-family: var(--q-serif); font-size: 23px; font-weight: 600; color: var(--q-forest); margin-bottom: 8px; }
.q-offer-head p { font-size: 13.5px; color: #333; font-weight: 300; }
.q-code-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--q-mint-tint); border: 1px dashed var(--q-sage);
  border-radius: var(--q-radius); padding: 12px 16px; margin: 16px auto 6px;
  max-width: 380px;
}
.q-code {
  font-size: 16px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-sage-deep);
}
.q-code-applied { font-size: 11px; font-weight: 600; color: var(--q-sage-deep); text-transform: uppercase; letter-spacing: 0.06em; }
.q-timer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: #333; margin-bottom: 20px;
}
.q-timer b { font-size: 18px; font-weight: 700; color: var(--q-red); font-variant-numeric: tabular-nums; }
/* light urgency line under the code — soft amber, calm, no ticking clock */
.q-offer-urgency { font-size: 12.5px; font-weight: 500; color: #B06A3B; margin: 8px 0 4px; }

.q-tiers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
  /* Cards take their natural height. Without this they stretch to match the
     tallest, and .q-tier-cta's `margin-top:auto` turns that extra height into
     a dead gap above the shorter card's button.                            */
  align-items: start;
}
.q-tier {
  position: relative; border: 1px solid var(--q-mist); border-radius: var(--q-radius-lg);
  padding: 20px 16px 16px; text-align: center; background: var(--q-white);
  display: flex; flex-direction: column;
}
.q-tier.reco { border: 2px solid var(--q-sage); }
.q-tier-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--q-coral); padding: 4px 14px; border-radius: 40px; white-space: nowrap;
}
.q-tier h4 { font-size: 16px; font-weight: 600; color: var(--q-forest); margin-bottom: 2px; }
.q-tier-sub { font-size: 12px; color: var(--q-muted); font-weight: 300; margin-bottom: 8px; }
.q-tier-price { margin-bottom: 2px; }
.q-tier-price s { color: var(--q-red); font-size: 14px; margin-right: 8px; }
.q-tier-price b { font-family: var(--q-serif); font-size: 25px; font-weight: 700; color: var(--q-forest); line-height: 1.15; }
.q-tier-per { font-size: 12px; color: var(--q-muted); margin-bottom: 10px; }
.q-tier-cta {
  display: block; width: 100%; padding: 14px 10px; margin-top: auto;
  background: var(--q-sage); color: #fff; text-decoration: none;
  border-radius: 6px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s ease;
}
.q-tier-cta:hover { background: #7A9873; color: #fff; }
.q-tier.reco .q-tier-cta { background: var(--q-sage-deep); }
.q-tier.reco .q-tier-cta:hover { background: #24402F; }
.q-tier-note { font-size: 11px; line-height: 1.45; color: var(--q-muted); margin-top: 7px; }

/* ---- guarantee statement, welded to the bottom of its own tier card ----
   Negative side margins pull it out to the card's inner edges so it reads as
   part of the card rather than a floating badge. Type stays at results-body
   size on every breakpoint — this audience skews 50+, so it never shrinks. */
#bioglo-quiz .q-tier-guar {
  margin: 14px -16px -16px;
  padding: 16px;
  text-align: left;
  /* Top rule only: the card's own border already closes the other three
     sides, so a full border here would double every line by 1px.        */
  border-top: 2px solid var(--q-forest);
  border-radius: 0 0 8px 8px;
  background: #EEF3EC;
}
#bioglo-quiz .q-tier-guar p {
  font-size: 14px; line-height: 1.5; color: var(--q-forest);
  font-weight: 400; margin: 0 0 9px;
}
#bioglo-quiz .q-tier-guar p:last-child { margin-bottom: 0; }
/* p-qualified so it outranks the rule above, which is more specific */
#bioglo-quiz .q-tier-guar p.q-tier-guar-lead { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* the honest counterweight on the single bottle */
#bioglo-quiz .q-tier-caveat {
  margin: 12px -16px -16px;
  padding: 13px 16px;
  text-align: left;
  border-top: 1px solid var(--q-mist);
  font-size: 12.5px; line-height: 1.5; color: #6E6A61;
}
.q-offer-foot { text-align: center; font-size: 12px; color: var(--q-muted); }
.q-retake { text-align: center; margin-top: 22px; font-size: 13px; }
.q-retake a { color: var(--q-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---- pre-order / batch scarcity widget ---- */
.q-preorder {
  background: var(--q-off); border: 1px solid var(--q-line);
  border-radius: 18px; padding: 26px 24px; margin-bottom: 18px;
}
.q-po-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--q-sage-deep);
}
.q-po-badge .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--q-sage); box-shadow: 0 0 0 4px rgba(143,172,137,0.25); }
.q-po-head { font-family: var(--q-serif); font-size: clamp(21px, 3.8vw, 29px); font-weight: 600; color: var(--q-forest); line-height: 1.22; margin-bottom: 10px; }
.q-po-sub  { font-size: 15px; line-height: 1.6; color: var(--q-muted); font-weight: 300; margin-bottom: 20px; }
.q-po-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.q-po-stat { background: var(--q-white); border: 1px solid var(--q-line); border-radius: 12px; padding: 16px 6px; text-align: center; box-shadow: var(--q-shadow); }
.q-po-stat b { display: block; font-family: var(--q-serif); font-size: 21px; font-weight: 600; color: var(--q-sage-deep); line-height: 1.05; margin-bottom: 6px; }
.q-po-stat b i { font-style: normal; font-size: 13px; color: var(--q-muted); }
.q-po-stat span { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--q-muted); line-height: 1.3; display: block; }
.q-po-terms { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--q-line); padding-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--q-muted); font-weight: 300; }
.q-po-terms .ico { flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; border: 1.5px solid var(--q-sage); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--q-sage-deep); }
.q-po-terms strong { color: var(--q-forest); font-weight: 600; }
.q-po-terms a { display: inline-block; margin-top: 6px; color: var(--q-sage-deep); font-weight: 600; text-decoration: underline; }

/* ---- guarantee ---- */
.q-guarantee {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--q-white); border: 1px solid var(--q-line);
  border-radius: var(--q-radius-lg);
  padding: 20px; font-size: 13.5px; line-height: 1.6; color: #333;
  margin-bottom: 18px; font-weight: 300;
}
.q-guarantee .ico { font-size: 24px; flex-shrink: 0; }
.q-guarantee strong { font-weight: 600; color: var(--q-forest); }

/* ---- FAQ ---- */
.q-faq details { border-bottom: 1px solid var(--q-line); }
.q-faq summary {
  cursor: pointer; padding: 15px 4px; font-size: 14.5px; font-weight: 500;
  color: var(--q-forest); list-style: none; display: flex; justify-content: space-between; gap: 10px;
}
.q-faq summary::-webkit-details-marker { display: none; }
.q-faq summary::after { content: '+'; font-size: 18px; color: var(--q-sage); }
.q-faq details[open] summary::after { content: '–'; }
.q-faq details p { font-size: 13.5px; line-height: 1.65; color: #333; padding: 0 4px 16px; font-weight: 300; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .q-stage { padding: 22px 14px 70px; }
  /* right-size the question type for phones (was reading oversized) */
  .q-title { font-size: 22px; line-height: 1.26; margin-bottom: 8px; }
  .q-hint { font-size: 12px; margin-bottom: 18px; }
  .q-hint::before { width: 30px; margin-bottom: 12px; }
  .q-options { gap: 10px; margin-bottom: 20px; }
  .q-option { min-height: 56px; padding: 14px; font-size: 16px; gap: 10px; }
  .q-option.selected { padding: 13px; }
  .q-option-sub { font-size: 13px; margin-top: 3px; }
  .q-check { width: 19px; height: 19px; }
  .q-tl { grid-template-columns: 1fr 1fr; }
  .q-trust { grid-template-columns: 1fr; }
  .q-tiers { grid-template-columns: 1fr; }
  .q-match { flex-direction: column; align-items: center; gap: 14px; }
  .q-match img { width: 178px; height: 178px; }
  .q-match-body { width: 100%; }
  .q-match-icons { justify-content: center; }
  .q-match-badge, .q-match h4 { text-align: center; display: block; }
  .q-match-badge { width: fit-content; margin-left: auto; margin-right: auto; }
}
/* ============================================================
   LIVE-THEME HARDENING + BREATHING ROOM
   The Shopify theme's CSS was overriding the quiz (darkening the
   diagnosis-band heading, stripping padding so content hit the
   screen edges). Every rule here is scoped with #bioglo-quiz so it
   outranks both the theme and the quiz's own reset — restoring
   generous, professional spacing and fixing the band contrast.
   ============================================================ */
/* dark diagnosis band — force light text (theme was darkening the h2) */
#bioglo-quiz .q-r-band { background: var(--q-sage-deep); padding: 34px 24px; }
#bioglo-quiz .q-r-band h2 { color: #FBF9F5; }
#bioglo-quiz .q-r-band-label { color: #C6D6BF; letter-spacing: 0.16em; }
#bioglo-quiz .q-r-band p { color: rgba(251,249,245,0.90); }

/* gutters + spacing so nothing sits edge-to-edge and text breathes */
#bioglo-quiz .q-stage { padding-left: 16px; padding-right: 16px; }
#bioglo-quiz .q-card.wide { max-width: 640px; }
#bioglo-quiz .q-r-sec { padding: 22px 20px; margin-bottom: 14px; }
#bioglo-quiz .q-offer { padding: 24px 20px; }
#bioglo-quiz .q-guarantee { padding: 22px 20px; }
#bioglo-quiz .q-r-sec h3 { margin-bottom: 13px; }
#bioglo-quiz .q-r-sec p { line-height: 1.7; margin-bottom: 12px; }
#bioglo-quiz .q-r-sec p:last-child { margin-bottom: 0; }
#bioglo-quiz .q-chips { gap: 9px; }

/* bottle image inside each offer tier */
#bioglo-quiz .q-tier-img {
  display: block; width: 100%; max-width: 150px; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center; border-radius: 10px;
  margin: 0 auto 10px;
}

/* ============================================================
   90-DAY GUARANTEE MICRO-MODAL
   User-initiated only: it opens on a click of "see how it works"
   inside the guarantee trust card, dims the page behind it, and
   closes on the button, the X, a click on the backdrop, or Esc.
   Nothing here auto-fires — there is no timer and no exit intent.
   ============================================================ */
#bioglo-quiz .q-guar-trigger {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: var(--q-sage-deep); font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
#bioglo-quiz #q-guar {
  position: fixed; inset: 0; z-index: 9999; padding: 20px;
  display: none; align-items: center; justify-content: center;
  background: rgba(28, 40, 32, 0.58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.18s ease;
}
#bioglo-quiz #q-guar.q-open { display: flex; opacity: 1; }
#bioglo-quiz .q-guar-panel {
  position: relative; width: 100%; max-width: 520px;
  max-height: 86vh; max-height: 86svh;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--q-white); border-radius: 14px;
  padding: 30px 26px 26px; text-align: left;
  box-shadow: 0 24px 60px rgba(28, 40, 32, 0.30);
  transform: translateY(14px) scale(0.985); transition: transform 0.2s ease;
}
#bioglo-quiz #q-guar.q-open .q-guar-panel { transform: none; }
#bioglo-quiz .q-guar-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: var(--q-off); color: var(--q-forest);
  font-size: 18px; line-height: 1; cursor: pointer;
}
#bioglo-quiz .q-guar-x:hover { background: var(--q-mist); }
#bioglo-quiz .q-guar-panel h3 {
  font-family: var(--q-serif); font-size: 23px; font-weight: 600;
  color: var(--q-forest); margin: 0 0 12px; padding-right: 34px; line-height: 1.25;
}
#bioglo-quiz .q-guar-lede {
  font-size: 14.5px; line-height: 1.65; color: #333; font-weight: 300; margin: 0 0 20px;
}
#bioglo-quiz .q-guar-steps { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: qguar; }
#bioglo-quiz .q-guar-steps li {
  counter-increment: qguar; position: relative; padding: 0 0 0 40px; margin: 0 0 16px;
}
#bioglo-quiz .q-guar-steps li:last-child { margin-bottom: 0; }
#bioglo-quiz .q-guar-steps li::before {
  content: counter(qguar); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--q-sage-deep); color: #fff;
  font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
#bioglo-quiz .q-guar-steps b {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--q-forest); margin-bottom: 4px; line-height: 1.35;
}
#bioglo-quiz .q-guar-steps span {
  display: block; font-size: 14px; line-height: 1.6; color: #333; font-weight: 300;
}
#bioglo-quiz .q-guar-done {
  display: block; width: 100%; padding: 15px; border: 0; cursor: pointer;
  background: var(--q-sage-deep); color: #fff; border-radius: var(--q-radius);
  font-family: var(--q-font); font-size: 15px; font-weight: 600;
}
#bioglo-quiz .q-guar-done:hover { background: #24402F; }
@media (max-width: 600px) {
  #bioglo-quiz #q-guar { padding: 12px; align-items: flex-end; }
  #bioglo-quiz .q-guar-panel { padding: 26px 20px 20px; max-height: 88svh; }
  #bioglo-quiz .q-guar-panel h3 { font-size: 21px; }
}

/* ══════════════ LANDER (quiz entry) ══════════════
   Moerie's opening format — wordmark, a sideways-drifting image mosaic,
   serif headline, tick list — rendered in BioGlo's cream-and-forest
   palette rather than Moerie's white-and-black.                      */
#bioglo-quiz .q-card-lander { max-width: 560px; }
#bioglo-quiz .q-lander {
  background: var(--q-cream); border-radius: var(--q-radius-lg);
  overflow: hidden; box-shadow: var(--q-shadow);
}
#bioglo-quiz .q-lp-top { padding: 15px 20px 12px; border-bottom: 1px solid var(--q-mist); }
#bioglo-quiz .q-lp-brand {
  text-align: center; margin: 0;
  font-size: 18px; font-weight: 700; letter-spacing: 0.26em;
  color: var(--q-forest);
}
#bioglo-quiz .q-lp-brand sup { font-size: 9px; letter-spacing: 0; vertical-align: super; }

/* ---- the drifting mosaic ---- */
#bioglo-quiz .q-lp-strip {
  position: relative; overflow: hidden;
  padding: 12px 0; background: var(--q-cream);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}
#bioglo-quiz .q-lp-track {
  display: flex; gap: 10px; width: max-content; padding-left: 10px;
  animation-name: q-lp-scroll; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes q-lp-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
#bioglo-quiz .q-lp-strip:hover .q-lp-track,
#bioglo-quiz .q-lp-strip:active .q-lp-track { animation-play-state: paused; }
#bioglo-quiz .q-lp-col { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
#bioglo-quiz .q-lp-tile {
  border-radius: 12px; overflow: hidden; background: var(--q-off);
  border: 1px solid rgba(44,75,59,0.06);
}
#bioglo-quiz .q-lp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bioglo-quiz .q-lp-tall { width: 148px; height: 206px; }
#bioglo-quiz .q-lp-sm   { width: 98px; height: 98px; }
@media (prefers-reduced-motion: reduce) {
  #bioglo-quiz .q-lp-track { animation: none; }
  #bioglo-quiz .q-lp-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
}

/* ---- headline block ---- */
/* Above the fold: headline, ticks, button — nothing else. */
#bioglo-quiz .q-lp-fold { padding: 18px 22px 20px; background: var(--q-cream); }
/* Supporting proof, deliberately below the button. */
#bioglo-quiz .q-lp-more {
  padding: 18px 22px 24px; background: var(--q-cream);
  border-top: 1px solid var(--q-mist);
}
#bioglo-quiz .q-lander h1 {
  font-family: var(--q-serif); font-size: clamp(23px, 5.8vw, 29px); font-weight: 600;
  line-height: 1.2; color: var(--q-forest); margin: 0 0 14px; text-align: center;
}
#bioglo-quiz .q-lander h1 em { font-style: italic; color: var(--q-sage-deep); }
#bioglo-quiz .q-lp-sub {
  font-size: 15.5px; line-height: 1.6; font-weight: 300;
  color: #4E554E; margin: 0 0 16px; text-align: center;
}
/* Centred as a group, but the ticks share one vertical axis — centring
   each row separately leaves them ragged and harder to scan.        */
#bioglo-quiz .q-lp-ticks {
  list-style: none; margin: 0 auto 18px; padding: 0;
  width: max-content; max-width: 100%;
}
#bioglo-quiz .q-lp-ticks li {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  font-size: 15.5px; line-height: 1.4; color: var(--q-forest);
  padding: 5px 0;
}
#bioglo-quiz .q-lp-tick {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--q-mint-tint); color: var(--q-sage-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}

/* ---- credibility cards ---- */
#bioglo-quiz .q-lp-card {
  background: var(--q-white); border: 1px solid var(--q-mist);
  border-radius: 12px; padding: 16px 17px; margin-bottom: 12px; text-align: left;
}
#bioglo-quiz .q-lp-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--q-sage-deep); margin: 0 0 7px;
}
#bioglo-quiz .q-lp-lead { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--q-forest); margin: 0 0 6px; }
#bioglo-quiz .q-lp-body { font-size: 14px; line-height: 1.55; font-weight: 300; color: #4E554E; margin: 0; }
#bioglo-quiz .q-lp-more .q-intro-rating { margin: 0 0 6px; }

/* Short viewports — iPhone SE, and any phone whose browser chrome eats
   the screen. Shrinks the strip and headline just enough to keep the
   button on the first screen. Body type never drops below 15px; this
   audience skews 50+.                                               */
@media (max-height: 730px) {
  #bioglo-quiz .q-lp-top { padding: 11px 20px 9px; }
  #bioglo-quiz .q-lp-brand { font-size: 17px; }
  #bioglo-quiz .q-lp-strip { padding: 9px 0; }
  #bioglo-quiz .q-lp-tall { width: 122px; height: 168px; }
  #bioglo-quiz .q-lp-sm   { width: 79px;  height: 79px; }
  #bioglo-quiz .q-lp-fold { padding: 12px 22px 14px; }
  #bioglo-quiz .q-lander h1 { font-size: 22px; margin-bottom: 11px; }
  #bioglo-quiz .q-lp-ticks { margin-bottom: 12px; }
  #bioglo-quiz .q-lp-ticks li { padding: 3px 0; font-size: 15px; }
  #bioglo-quiz .q-lp-tick { width: 24px; height: 24px; font-size: 13px; }
}


/* ══════════════ RESULTS (minimal) ══════════════
   Stripped to the reference's shape: hero, one verdict, four evidence
   cards, the same CTA three times, a closing proof block, a footer.
   Nothing transactional — that all lives on the PDP.               */
#bioglo-quiz .q-card-results { max-width: 620px; }
#bioglo-quiz .q-rh {
  background: var(--q-off); border-radius: var(--q-radius-lg);
  padding: 26px 22px 24px; margin-bottom: 30px; text-align: left;
}
#bioglo-quiz .q-rh-top { display: flex; gap: 18px; align-items: flex-start; }
#bioglo-quiz .q-rh-copy { flex: 1; min-width: 0; }
#bioglo-quiz .q-rh-brand {
  font-size: 15px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--q-forest); margin: 0 0 20px;
}
#bioglo-quiz .q-rh-brand sup { font-size: 8px; letter-spacing: 0; vertical-align: super; }
#bioglo-quiz .q-rh h1 {
  font-family: var(--q-serif); font-size: clamp(26px, 6.6vw, 36px); font-weight: 600;
  line-height: 1.18; color: var(--q-forest); margin: 0; text-align: left;
}
#bioglo-quiz .q-rh-img { width: 122px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
#bioglo-quiz .q-rh-img img { display: block; width: 100%; height: 168px; object-fit: cover; }
#bioglo-quiz .q-rh-stat { display: flex; gap: 16px; align-items: flex-start; margin: 24px 0 22px; }
#bioglo-quiz .q-rh-num {
  font-family: var(--q-serif); font-size: 40px; font-weight: 600; font-style: italic;
  line-height: 1; color: var(--q-forest); margin: 0; flex-shrink: 0;
}
#bioglo-quiz .q-rh-note { font-size: 13.5px; line-height: 1.5; color: #4E554E; margin: 0; }

/* the CTA, repeated */
#bioglo-quiz .q-see {
  display: block; width: 100%; border: 0; cursor: pointer;
  background: #1B1B1B; color: #fff; border-radius: 40px;
  padding: 18px 16px; font-family: var(--q-font);
  font-size: 13px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  transition: background 0.15s ease;
}
#bioglo-quiz .q-see:hover { background: #000; }
#bioglo-quiz .q-see-mid { margin-bottom: 34px; }

#bioglo-quiz .q-rband {
  font-family: var(--q-serif); font-size: clamp(21px, 5.2vw, 27px); font-weight: 500;
  color: var(--q-forest); text-align: center; margin: 0 0 18px; line-height: 1.3;
}
#bioglo-quiz .q-rverdict {
  background: var(--q-white); border: 1px solid var(--q-mist);
  border-radius: var(--q-radius-lg); padding: 22px 20px; margin-bottom: 14px;
}
#bioglo-quiz .q-rverdict-p {
  font-family: var(--q-serif); font-size: 18px; line-height: 1.4; font-weight: 500;
  color: var(--q-forest); margin: 18px 0 0; text-align: center;
}
#bioglo-quiz .q-rdisc {
  font-size: 11.5px; line-height: 1.5; color: var(--q-muted);
  text-align: center; margin: 4px 0 16px;
}

/* closing proof block */
#bioglo-quiz .q-rp {
  background: #EFEAE0; border-radius: var(--q-radius-lg);
  padding: 28px 22px 24px; margin-bottom: 26px;
}
#bioglo-quiz .q-rp-head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
#bioglo-quiz .q-rp-head h3 {
  flex: 1; font-family: var(--q-serif); font-size: clamp(20px, 5vw, 26px); font-weight: 600;
  line-height: 1.24; color: var(--q-forest); margin: 0; text-align: left;
}
#bioglo-quiz .q-rp-img { width: 104px; flex-shrink: 0; border-radius: 60px; overflow: hidden; }
#bioglo-quiz .q-rp-img img { display: block; width: 100%; height: 132px; object-fit: cover; }
#bioglo-quiz .q-rp-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid rgba(44,75,59,0.14);
}
#bioglo-quiz .q-rp-ico { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
#bioglo-quiz .q-rp-row h4 {
  font-family: var(--q-serif); font-size: 17.5px; font-weight: 600; line-height: 1.3;
  color: var(--q-forest); margin: 0 0 6px;
}
#bioglo-quiz .q-rp-row p { font-size: 14px; line-height: 1.58; font-weight: 300; color: #444; margin: 0; }
#bioglo-quiz .q-rp .q-see { margin-top: 20px; }

#bioglo-quiz .q-rfoot { text-align: center; padding-top: 4px; }
#bioglo-quiz .q-rfoot-brand {
  font-size: 14px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--q-forest); margin: 0 0 12px;
}
#bioglo-quiz .q-rfoot-brand sup { font-size: 8px; letter-spacing: 0; vertical-align: super; }
#bioglo-quiz .q-rfoot-note {
  font-size: 11.5px; line-height: 1.6; color: var(--q-muted);
  max-width: 460px; margin: 0 auto 14px;
}
@media (max-width: 600px) {
  #bioglo-quiz .q-rh-img { width: 96px; }
  #bioglo-quiz .q-rh-img img { height: 134px; }
  #bioglo-quiz .q-rp-img { width: 84px; }
  #bioglo-quiz .q-rp-img img { height: 106px; }
}

/* ══════════════ CUSTOM PDP ══════════════
   Direct-response product page reached from "SEE THE PRODUCT".
   Black buttons and a tinted hero card carry the offer; everything
   below the fold is proof. No countdown and no subscription toggle —
   see the note in the pdp config block for why.                    */
#bioglo-quiz .q-card-pdp { max-width: 620px; }
#bioglo-quiz .q-pdp { text-align: left; }
#bioglo-quiz .q-pdp-promo {
  display: flex; align-items: baseline; justify-content: center; gap: 9px; flex-wrap: wrap;
  background: var(--q-sage-deep); color: #fff;
  padding: 12px 16px; border-radius: var(--q-radius-lg) var(--q-radius-lg) 0 0;
}
#bioglo-quiz .q-pdp-promo-l { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: .85; }
#bioglo-quiz .q-pdp-promo-v { font-family: var(--q-serif); font-size: 24px; font-weight: 700; line-height: 1; }
#bioglo-quiz .q-pdp-promo-n { font-size: 12px; opacity: .85; }
#bioglo-quiz .q-pdp-bar {
  background: #1B1B1B; color: #fff; text-align: center;
  font-size: 11.5px; letter-spacing: 0.04em; padding: 9px 14px;
}
#bioglo-quiz .q-pdp-brand {
  text-align: center; margin: 22px 0 18px;
  font-size: 19px; font-weight: 700; letter-spacing: 0.26em; color: var(--q-forest);
}
#bioglo-quiz .q-pdp-brand sup { font-size: 9px; letter-spacing: 0; vertical-align: super; }

/* the written recommendation */
#bioglo-quiz .q-pdp-letter {
  background: var(--q-off); border-radius: var(--q-radius-lg);
  padding: 24px 22px; margin-bottom: 16px;
}
#bioglo-quiz .q-pdp-letter h2 {
  font-family: var(--q-serif); font-size: 26px; font-weight: 600;
  color: var(--q-forest); margin: 0 0 14px; letter-spacing: 0.01em;
}
#bioglo-quiz .q-pdp-letter p {
  font-size: 15.5px; line-height: 1.68; font-weight: 300; color: #333; margin: 0 0 14px;
}
#bioglo-quiz .q-pdp-letter p:last-child { margin-bottom: 0; }
#bioglo-quiz .q-pdp-letter strong { font-weight: 600; color: var(--q-forest); }

/* options header — she must know there are three before she scrolls */
#bioglo-quiz .q-pdp-options { text-align: center; margin: 2px 0 16px; }
#bioglo-quiz .q-pdp-options h3 {
  font-family: var(--q-serif); font-size: 22px; font-weight: 600;
  color: var(--q-forest); margin: 0 0 7px;
}
#bioglo-quiz .q-pdp-options p {
  font-size: 14px; line-height: 1.55; font-weight: 300; color: #4E554E;
  margin: 0 auto 13px; max-width: 420px;
}
#bioglo-quiz .q-pdp-count { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
#bioglo-quiz .q-pdp-dot {
  font-size: 11.5px; font-weight: 600; color: var(--q-muted);
  border: 1px solid var(--q-mist); border-radius: 40px; padding: 6px 12px; background: var(--q-white);
}
#bioglo-quiz .q-pdp-dot.on { color: #fff; background: var(--q-sage-deep); border-color: var(--q-sage-deep); }

/* offer cards */
#bioglo-quiz .q-pdp-card {
  position: relative; border: 1px solid var(--q-mist); border-radius: var(--q-radius-lg);
  background: var(--q-white); margin-bottom: 16px; overflow: hidden;
}
#bioglo-quiz .q-pdp-card.reco { border: 0; background: var(--q-mint-tint); }
#bioglo-quiz .q-pdp-ribbon {
  background: var(--q-sage-deep); color: #fff; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; padding: 8px 12px;
}
#bioglo-quiz .q-pdp-card-in { padding: 18px 18px 18px; }
#bioglo-quiz .q-pdp-card h3 {
  font-family: var(--q-serif); font-size: 22px; font-weight: 600;
  color: var(--q-forest); margin: 0 0 3px; text-align: center;
}
#bioglo-quiz .q-pdp-card-sub { font-size: 13px; color: var(--q-muted); text-align: center; margin: 0 0 14px; }
/* Image beside the price, bullets full width beneath — keeps the card
   short enough that the NEXT tier's ribbon shows on a phone screen. */
#bioglo-quiz .q-pdp-row { display: flex; gap: 15px; align-items: center; margin-bottom: 12px; }
#bioglo-quiz .q-pdp-img {
  width: 104px; height: 104px; flex-shrink: 0; object-fit: cover;
  border-radius: 10px; background: var(--q-white);
}
#bioglo-quiz .q-pdp-price-col { flex: 1; min-width: 0; }
#bioglo-quiz .q-pdp-price { margin: 0 0 2px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
#bioglo-quiz .q-pdp-price b { font-family: var(--q-serif); font-size: 27px; font-weight: 700; color: var(--q-forest); line-height: 1.1; }
#bioglo-quiz .q-pdp-price s { font-size: 15px; color: var(--q-red); }
#bioglo-quiz .q-pdp-per { font-size: 12.5px; color: var(--q-muted); margin: 0; }
#bioglo-quiz .q-pdp-bullets { list-style: none; margin: 0; padding: 0; }
#bioglo-quiz .q-pdp-bullets li {
  position: relative; padding-left: 15px; margin-bottom: 5px;
  font-size: 13.5px; line-height: 1.42; color: #333; font-weight: 300;
}
#bioglo-quiz .q-pdp-bullets li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--q-sage);
}
#bioglo-quiz .q-pdp-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 12px; }
#bioglo-quiz .q-pdp-pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--q-forest); background: var(--q-white);
  border: 1px solid var(--q-mist); border-radius: 40px; padding: 7px 13px;
}
#bioglo-quiz .q-pdp-card.reco .q-pdp-pill { border-color: rgba(44,75,59,.16); }
#bioglo-quiz .q-pdp-pill-btn {
  font-family: var(--q-font); cursor: pointer; line-height: 1;
  text-decoration: underline; text-underline-offset: 2px;
}
#bioglo-quiz .q-pdp-buy {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: #1B1B1B; color: #fff; border-radius: 40px;
  padding: 16px 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  transition: background 0.15s ease;
}
#bioglo-quiz .q-pdp-buy:hover { background: #000; color: #fff; }
#bioglo-quiz .q-pdp-buy em { font-style: normal; color: #9BC493; }
#bioglo-quiz .q-pdp-guar {
  margin: 14px -18px -18px; padding: 14px 18px; text-align: left;
  border-top: 2px solid var(--q-forest); background: rgba(255,255,255,0.55);
}
#bioglo-quiz .q-pdp-guar p { font-size: 13.5px; line-height: 1.5; color: var(--q-forest); font-weight: 400; margin: 0; }
#bioglo-quiz .q-pdp-guar p.q-pdp-guar-lead { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
#bioglo-quiz .q-pdp-guar-more {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--q-font); font-size: 13.5px; font-weight: 600;
  color: var(--q-sage-deep); text-decoration: underline; text-underline-offset: 2px;
}
#bioglo-quiz .q-pdp-caveat {
  margin: 14px -18px -18px; padding: 12px 18px; text-align: left;
  border-top: 1px solid var(--q-mist); font-size: 12.5px; line-height: 1.5; color: #6E6A61;
}

/* safe checkout */
#bioglo-quiz .q-pdp-safe { text-align: center; margin: 4px 0 26px; }
#bioglo-quiz .q-pdp-safe p {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--q-muted); margin: 0 0 10px;
}
#bioglo-quiz .q-pdp-pays { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
#bioglo-quiz .q-pdp-pay {
  font-size: 11px; font-weight: 600; color: #55605A;
  border: 1px solid var(--q-mist); border-radius: 5px; padding: 6px 10px; background: var(--q-white);
}

/* proof blocks */
#bioglo-quiz .q-pdp-benefits { margin-bottom: 26px; }
#bioglo-quiz .q-pdp-benefits h3,
#bioglo-quiz .q-pdp-frees h3 {
  font-family: var(--q-serif); font-size: 21px; font-weight: 600; line-height: 1.3;
  color: var(--q-forest); text-align: center; margin: 0 0 16px;
}
#bioglo-quiz .q-pdp-benbox {
  list-style: none; margin: 0 0 12px; padding: 18px 20px;
  border: 1px solid var(--q-mist); border-radius: var(--q-radius-lg); background: var(--q-white);
}
#bioglo-quiz .q-pdp-benbox li {
  position: relative; padding-left: 16px; margin-bottom: 9px;
  font-size: 15px; line-height: 1.5; color: #333; font-weight: 300;
}
#bioglo-quiz .q-pdp-benbox li:last-child { margin-bottom: 0; }
#bioglo-quiz .q-pdp-benbox li::before { content: '•'; position: absolute; left: 0; color: var(--q-sage-deep); }
#bioglo-quiz .q-pdp-frees { margin-bottom: 22px; }
#bioglo-quiz .q-pdp-free {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--q-mist); border-radius: var(--q-radius-lg);
  background: var(--q-white); padding: 14px 16px; margin-bottom: 10px;
}
#bioglo-quiz .q-pdp-free-ico { font-size: 22px; flex-shrink: 0; }
#bioglo-quiz .q-pdp-free-title { font-size: 14.5px; font-weight: 600; color: var(--q-forest); margin: 0 0 2px; }
#bioglo-quiz .q-pdp-free-note { font-size: 12.5px; line-height: 1.4; color: var(--q-muted); margin: 0; }
#bioglo-quiz .q-pdp-free-tag {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--q-sage-deep); background: var(--q-mint-tint); border-radius: 40px; padding: 5px 10px;
}
#bioglo-quiz .q-pdp-back { text-align: center; margin: 0 0 6px; font-size: 13px; }
#bioglo-quiz .q-pdp-back a { color: var(--q-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  #bioglo-quiz .q-pdp-img { width: 92px; height: 92px; }
  #bioglo-quiz .q-pdp-price b { font-size: 25px; }
  #bioglo-quiz .q-pdp-card h3 { font-size: 21px; }
}

/* ══════════════ RESULTS EVIDENCE STACK ══════════════ */
#bioglo-quiz .q-ev { margin-bottom: 14px; }
#bioglo-quiz .q-ev-head { text-align: center; padding: 26px 20px 22px; }
#bioglo-quiz .q-ev-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--q-sage-deep); margin: 0 0 8px;
}
#bioglo-quiz .q-ev-head h3 { font-family: var(--q-serif); font-size: 24px; font-weight: 600; color: var(--q-forest); margin: 0 0 16px; }
#bioglo-quiz .q-ev-bignum {
  font-family: var(--q-serif); font-size: clamp(48px, 15vw, 68px); font-weight: 700;
  line-height: 1; color: var(--q-sage-deep); margin: 0;
}
#bioglo-quiz .q-ev-bigunit { font-size: 14px; line-height: 1.5; color: var(--q-muted); margin: 8px auto 0; max-width: 320px; }
#bioglo-quiz .q-ev-cta {
  display: block; width: 100%; margin: 0 0 14px; padding: 17px 14px; border: 0; cursor: pointer;
  background: #1B1B1B; color: #fff; border-radius: 40px;
  font-family: var(--q-font); font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
}
#bioglo-quiz .q-ev-cta:hover { background: #000; }
#bioglo-quiz .q-ev-card {
  background: var(--q-white); border: 1px solid var(--q-mist);
  border-radius: var(--q-radius-lg); padding: 22px 20px; margin-bottom: 14px; text-align: left;
}
#bioglo-quiz .q-ev-card h4 {
  font-family: var(--q-serif); font-size: 19px; font-weight: 600;
  color: var(--q-forest); margin: 0 0 16px; text-align: center;
}
#bioglo-quiz .q-ev-foot { font-size: 11.5px; line-height: 1.5; color: var(--q-muted); margin: 14px 0 0; }
#bioglo-quiz .q-ev-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--q-muted); margin-bottom: 6px; }
#bioglo-quiz .q-ev-chart { width: 100%; height: 118px; display: block; padding: 6px 0; box-sizing: content-box; }
#bioglo-quiz .q-ev-grid { stroke: var(--q-mist); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
#bioglo-quiz .q-ev-line { fill: none; stroke: var(--q-sage-deep); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
#bioglo-quiz .q-ev-dot { fill: var(--q-sage-deep); vector-effect: non-scaling-stroke; }
#bioglo-quiz .q-ev-pts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
#bioglo-quiz .q-ev-pt { text-align: center; }
#bioglo-quiz .q-ev-pt b { display: block; font-size: 12px; font-weight: 700; color: var(--q-forest); }
#bioglo-quiz .q-ev-pt span { display: block; font-size: 11px; line-height: 1.35; color: var(--q-muted); margin-top: 2px; }
#bioglo-quiz .q-ev-bar-row { margin-bottom: 16px; }
#bioglo-quiz .q-ev-bar-key { font-size: 13.5px; font-weight: 500; color: var(--q-forest); margin: 0 0 6px; }
#bioglo-quiz .q-ev-track { height: 34px; background: var(--q-off); border-radius: 6px; overflow: hidden; }
#bioglo-quiz .q-ev-fill {
  display: flex; align-items: center; justify-content: flex-end;
  height: 100%; border-radius: 6px; padding-right: 12px;
  font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap;
}
#bioglo-quiz .q-ev-fill.low  { background: #C7CFC5; min-width: 6px; }
#bioglo-quiz .q-ev-fill.high { background: var(--q-sage-deep); }
#bioglo-quiz .q-ev-bar-val { font-size: 12.5px; color: var(--q-muted); margin: 5px 0 0; }
#bioglo-quiz .q-ev-cond-row { margin-bottom: 14px; }
#bioglo-quiz .q-ev-cond-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; }
#bioglo-quiz .q-ev-cond-tag.now   { color: var(--q-muted); }
#bioglo-quiz .q-ev-cond-tag.later { color: var(--q-sage-deep); }
#bioglo-quiz .q-ev-cond-track {
  position: relative; height: 12px; border-radius: 8px;
  background: linear-gradient(90deg, #E4E9E2 0%, #B8CBB3 55%, var(--q-sage) 100%);
}
#bioglo-quiz .q-ev-cond-mark {
  position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--q-sage-deep);
  transform: translate(-50%, -50%);
}
#bioglo-quiz .q-ev-cond-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--q-muted); margin-top: 4px; }
#bioglo-quiz .q-ev-window { text-align: center; }
#bioglo-quiz .q-ev-gauge { width: 100%; max-width: 240px; margin: 0 auto; display: block; }
#bioglo-quiz .q-ev-gauge-bg { fill: none; stroke: var(--q-off); stroke-width: 16; stroke-linecap: round; }
#bioglo-quiz .q-ev-gauge-fg {
  fill: none; stroke: var(--q-sage-deep); stroke-width: 16; stroke-linecap: round;
}
#bioglo-quiz .q-ev-gauge-num {
  font-family: var(--q-serif); font-size: 46px; font-weight: 700; line-height: 1;
  color: var(--q-sage-deep); margin: -34px 0 0;
}
#bioglo-quiz .q-ev-gauge-num span { display: block; font-family: var(--q-font); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--q-muted); margin-top: 6px; }
#bioglo-quiz .q-ev-gauge-body { font-size: 14px; line-height: 1.6; color: #4E554E; margin: 16px 0 0; }

/* ══════════════ FUNNEL LOCK ══════════════
   The quiz page is a closed funnel: no nav, no footer, no cart, no
   logo — nothing to click that leaves the page. The browser Back
   button still works, which is the only exit we intend to leave.
   Scoped to pages that actually contain the quiz.                */
html.q-funnel-lock .shopify-section-group-header-group,
html.q-funnel-lock .shopify-section-group-footer-group,
html.q-funnel-lock #shopify-section-header,
html.q-funnel-lock #shopify-section-footer,
html.q-funnel-lock .announcement-bar,
html.q-funnel-lock .utility-bar { display: none !important; }
/* CSS-only fallback for the same thing, in case JS never runs. */
body:has(#bioglo-quiz) .shopify-section-group-header-group,
body:has(#bioglo-quiz) .shopify-section-group-footer-group { display: none !important; }

.q-hidden { display: none !important; }