/* =========================
   MyFitometer – quiz.css (Reusable)
   iOS-like, mobile friendly, theme-consistent
   ========================= */

:root{
  --brand:#053170;
  --brand-light:#3296cd;
  --quiz-ink: var(--ink, #0E0E0F);
  --quiz-muted: var(--muted, #6b7280);
  --quiz-card: var(--card, #ffffff);
  --quiz-shadow: var(--shadow, 0 10px 24px rgba(0,0,0,.08));
  --quiz-radius: var(--radius, 16px);

  --quiz-border: rgba(0,0,0,0.10);
  --quiz-border-soft: rgba(0,0,0,0.06);

  --quiz-lift: translateY(-2px);

  /* Gauge sizing tokens (smaller circle everywhere + shorter pointer) */
  --mfHub: 32px;
  --mfHubInner: 10px;
  --mfPointerW: 10px;
  --mfPointerH: 180px;
}

/* ✅ make sure mobile can scroll anywhere (inside + outside card) */
html, body{
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
body{
  position: static !important;
}
main{
  overflow: visible !important;
}

/* Card */
.quiz-card{
  position: relative;
  overflow: visible;
  transform: none !important;
}

/* Allow inner scrolling on mobile while still allowing page scroll outside */
@media (max-width: 900px){
  .quiz-card{
    max-height: calc(100dvh - 90px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Head */
.quiz-head{
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.quiz-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.quiz-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(5,49,112,0.07);
  border: 1px solid rgba(5,49,112,0.12);
  color: var(--quiz-brand);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

.quiz-pill.muted{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: var(--quiz-muted);
  font-weight: 700;
}

/* Progress */
.quiz-progress{
  margin-top: 6px;
  display:grid;
  gap:8px;
}

.quiz-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.quiz-progress-label{
  font-size: 13px;
  color: var(--quiz-muted);
}

.quiz-bar{
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.06);
}

.quiz-bar > .fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(5,49,112,1), rgba(50,150,205,1));
  transition: width 220ms ease;
}

/* Hero image */
.quiz-hero{ width:100%; }



.quiz-hero__img{
  display:block !important;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;

  opacity: 1;
  transition: opacity 180ms ease;
}
.quiz-hero__img.is-visible{ opacity: 1; }

.quiz-hero__placeholder{
  min-height: 220px;
  display:grid;
  align-content:space-between;
  padding: 14px;
  gap: 10px;
}

.quiz-hero__phTop{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.quiz-hero__badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(5,49,112,0.18);
  background: rgba(255,255,255,0.70);
  color: var(--quiz-brand);
  font-weight: 900;
  font-size: 12px;
}

.quiz-hero__badge.muted{
  border-color: rgba(0,0,0,0.10);
  color: var(--quiz-muted);
}

.quiz-hero__phTitle{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--quiz-ink);
}

.quiz-hero__phSub{
  font-size: 13px;
  color: var(--quiz-muted);
  line-height: 1.4;
}

/* Question text */
.quiz-question{ display:grid; gap: 6px; }

.quiz-qmeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.quiz-qtag{ font-size: 12px; color: var(--quiz-muted); }

.quiz-qtext{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.25px;
  color: var(--quiz-ink);
}

.quiz-help{
  font-size: 13px;
  color: var(--quiz-muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* Options */
.quiz-options{
  display:grid;
  gap: 10px;
  margin-top: 4px;
}

.quiz-opt{
  text-align:left;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 13px 13px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--quiz-border);

  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.quiz-opt:hover{ border-color: rgba(5,49,112,0.22); }
.quiz-opt:active{ transform: scale(0.99); }

.quiz-opt .l{ display:flex; flex-direction:column; gap: 2px; }
.quiz-opt .t{ font-weight: 900; font-size: 14px; color: var(--quiz-ink); }
.quiz-opt .s{ font-size: 12px; color: var(--quiz-muted); }

.quiz-opt .r{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.6);
  flex: 0 0 auto;
  position:relative;
}

.quiz-opt[aria-pressed="true"]{
  border-color: rgba(5,49,112,0.55);
  background: rgba(5,49,112,0.06);
  box-shadow: 0 14px 22px rgba(5,49,112,0.10);
}

.quiz-opt[aria-pressed="true"] .r{ border-color: rgba(5,49,112,0.75); }
.quiz-opt[aria-pressed="true"] .r::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(5,49,112,1), rgba(50,150,205,1));
}

/* NAV — desktop + mobile same-row */
.quiz-nav{
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
}

.quiz-nav .left,
.quiz-nav .right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
}

.quiz-nav .left{ justify-content:flex-start; }
.quiz-nav .right{ justify-content:flex-end; margin-left:auto; }

/* Buttons */
.quiz-btn{
  appearance:none;
  border: 0;
  cursor:pointer;

  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.1px;

  display:inline-flex;
  align-items:center;
  gap: 8px;

  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
  transform: none;
  white-space: nowrap;
}

.quiz-btn:active{ transform: scale(0.99); }

.quiz-btn.primary{
  background: linear-gradient(180deg, rgba(5,49,112,1), rgba(5,49,112,0.92));
  color: #fff;
}

/* Submit hover: move only, no color change */
.quiz-btn.primary:hover{
  transform: var(--quiz-lift);
  box-shadow: 0 16px 26px rgba(0,0,0,0.14);
}

/* Next hover matches your screenshot */
.quiz-btn.ghost{
  background: rgba(255,255,255,0.85);
  color: var(--quiz-brand);
  border: 1px solid rgba(5,49,112,0.18);
}
.quiz-btn.ghost:hover{
  transform: var(--quiz-lift);
  background: #25385f;
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    0 18px 30px rgba(3, 10, 24, 0.22),
    0 2px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(255,255,255,0.06);
}

/* Previous hover darker */
.quiz-btn.subtle{
  background: rgba(0,0,0,0.04);
  color: var(--quiz-ink);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}
.quiz-btn.subtle:hover{
  transform: var(--quiz-lift);
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.10);
}

.quiz-btn[disabled]{
  opacity: .45;
  cursor:not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Alert */
.quiz-alert{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.06);
  color: #991b1b;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
}

/* RESULTS */
.quiz-results{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--quiz-border-soft);
  display:none;
  gap: 12px;
}
.quiz-results.show{ display:grid; }

.quiz-estimate{
  border-radius: 18px;
  border: 1px solid rgba(5,49,112,0.12);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
  padding: 14px;
  display:grid;
  gap: 10px;
}

.quiz-estimate__label{
  font-size: 12px;
  font-weight: 900;
  color: var(--quiz-muted);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.quiz-estimate__big{
  font-size: 40px;
  font-weight: 950;
  letter-spacing: -1.2px;
  color: var(--quiz-ink);
  line-height: 1;
}

.quiz-estimate__pillRow{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.quiz-category{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(5,49,112,0.08);
  border: 1px solid rgba(5,49,112,0.16);
  color: var(--quiz-brand);
  font-weight: 950;
  font-size: 12px;
}

.quiz-scoreline{
  color: var(--quiz-muted);
  font-size: 13px;
  line-height: 1.55;
}

.quiz-congrats{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(5,49,112,0.14);
  background: rgba(5,49,112,0.06);
  color: var(--quiz-ink);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 20px;
  margin-bottom: 10px;
}

.quiz-disclaimer{
  margin: 0;
  font-size: 12px;
}

/* Cards + grid */
.quiz-grid2{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.quiz-cardbox{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  padding: 14px;
  display:grid;
  gap: 8px;
}

.quiz-cardbox h3{
  margin: 0;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.quiz-cardbox p, .quiz-cardbox ul{
  margin: 0;
  color: var(--quiz-muted);
  line-height: 1.55;
  font-size: 13px;
}

.quiz-cardbox ul{ padding-left: 18px; }

.quiz-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 2px;
  position: relative;
  z-index: 50;
}
#btnRetake{ pointer-events:auto !important; }

/* Desktop side-by-side cards */
@media (min-width: 880px){
  .quiz-grid2{ grid-template-columns: 1fr 1fr; }
}

/* Small mobile tweaks */
@media (max-width: 420px){
  .quiz-btn{ padding: 10px 12px; font-size: 13px; }
  .quiz-hero__placeholder{ min-height: 180px; }
  .quiz-estimate__big{ font-size: 34px; }
}

/* Tap/click safety */
.quiz-qwrap,
.quiz-options{
  position: relative;
  z-index: 5;
}

.quiz-opt{
  position: relative;
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.quiz-card *{ pointer-events: auto; }

/* ==========================================
   iOS FIX: page scroll (card not scroll container)
   ========================================== */
@supports (-webkit-touch-callout: none) {
  html, body{
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .quiz-card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
    touch-action: pan-y;
  }

  main{ overflow: visible !important; }
}

/* =========================================================
   Longevity Quiz — Mobile navbar + TOP STRIP opaque white
   ========================================================= */

/* Keep page background white so safe-area doesn't show transparency */
body.longevity-quiz-page{
  background: #ffffff;
}



/* On mobile, ensure header is translucent (nav like other pages) */
@media (max-width: 980px){
  body.longevity-quiz-page .site-header{
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
}

/* =========================================================
   Age question styling
   ========================================================= */
.quiz-age{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
  padding: 14px;
  display:grid;
  gap: 8px;
}

.quiz-age__label{
  font-weight: 950;
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--quiz-ink);
}

.quiz-age__why{
  font-size: 12px;
  line-height: 1.45;
}

.quiz-age__input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(5,49,112,0.18);
  background: rgba(255,255,255,0.95);
  padding: 12px 12px;
  font-size: 16px;
  font-weight: 900;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

.quiz-age__input:focus{
  border-color: rgba(5,49,112,0.40);
  box-shadow:
    0 0 0 4px rgba(50,150,205,0.15),
    0 1px 0 rgba(255,255,255,.6) inset;
}

.quiz-age__hint{
  font-size: 12px;
  line-height: 1.4;
}

/* =========================================================
   Longevity Quiz — Gauge (flat ends + needle connected to hub)
   - Smaller hub on desktop + mobile
   - Pointer always inside meter
   - Mobile: shorter pointer + circle moved down slightly
   ========================================================= */

.mf-gauge{
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 10px auto 0;
  padding: 6px 0 0;
}

.mf-gauge__svg{ width: 100%; height: auto; display:block; }

.mf-gauge__labels{
  width: 66.666%;
  margin: -18px auto 0;   /* ✅ more up */
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  color: var(--quiz-muted);
  line-height: 1;
}

/* Keep them under the arc ends + push up more */
.mf-gauge__labels span:first-child{
  transform: translate(-14px, -14px); /* left + MORE up */
}
.mf-gauge__labels span:last-child{
  transform: translate(14px, -14px);  /* right + MORE up */
}


/* overlay */
.mf-gauge__loading{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  letter-spacing: -0.2px;
  color: var(--quiz-ink);
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 30;
}
.mf-gauge.is-loading .mf-gauge__loading{
  opacity: 1;
  pointer-events: auto;
}

/* ✅ Needle pivot point scales with SVG height (keeps pointer inside meter) */
.mf-gauge__needle{
  position:absolute;
  left: 50%;
  top: 70%; /* 260 / 330 */
  width: 0;
  height: 0;
  transform: translateX(-50%) rotate(-85deg);
  transform-origin: 0 0;
  pointer-events:none;
  z-index: 25;
}

/* Pointer blade */
.mf-gauge__needlePointer{
  position:absolute;
  left: 0;
  top: 0;
  width: var(--mfPointerW);
  height: var(--mfPointerH);
  background: #2f2f2f;

  clip-path: polygon(
    50% 0%,
    92% 12%,
    70% 100%,  /* ✅ bottom-right (wider base) */
    30% 100%,  /* ✅ bottom-left  (wider base) */
    8% 12%
  );

  transform: translate(calc(var(--mfPointerW) * -0.5), calc(var(--mfPointerH) * -1));
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.22));
}

/* Hub (smaller) */
.mf-gauge__needleHub{
  position:absolute;
  left: 0;
  top: 0;
  width: var(--mfHub);
  height: var(--mfHub);
  border-radius: 600px;
  background: #2f2f2f;
  transform: translate(calc(var(--mfHub) * -0.5), calc(var(--mfHub) * -0.5));
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.20));
}
.mf-gauge__needleHub::after{
  content:"";
  position:absolute;
  inset: calc((var(--mfHub) - var(--mfHubInner)) / 2);
  border-radius: 600px;
  background:#ffffff;
  opacity: 0.92;
}

/* Needle sweep animation */
@keyframes mfNeedleSweep {
  0%   { transform: translateX(-50%) rotate(-85deg); }
  55%  { transform: translateX(-50%) rotate(var(--mfTarget, 20deg)); }
  75%  { transform: translateX(-50%) rotate(calc(var(--mfTarget, 20deg) - 6deg)); }
  100% { transform: translateX(-50%) rotate(var(--mfTarget, 20deg)); }
}
.mf-gauge.animate #rNeedle{
  animation: mfNeedleSweep 1400ms cubic-bezier(.16,.84,.35,1) forwards;
}

/* Mobile: shorter pointer, smaller circle, move pivot DOWN slightly */
@media (max-width: 520px){
  :root{
    --mfHub: 28px;
    --mfHubInner: 9px;
    --mfPointerW: 9px;
    --mfPointerH: 100px;
  }

  .mf-gauge__needle{
    top: 65%;
  }
}

/* Reveal timing for the lifespan range text */
.mf-hidden{
  opacity: 0 !important;
  transform: translateY(6px) !important;
}
.mf-reveal{
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 280ms ease, transform 280ms ease;
}

/* ✅ Hide everything except the lifespan meter + range until revealed */
.mf-hide-rest #resultsRest{
  display: none !important;
}

/* =========================
   Metrics row + status cards
   ========================= */

.quiz-metricsRow{
  display:grid;
  gap: 12px;
  margin-top: 6px;
}

.quiz-metric{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.80);
  padding: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.quiz-metric__big{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin-top: 6px;
  color: var(--quiz-ink);
}

.quiz-metric__sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

/* ✅ Bio age card coloring (matches High/Optimal/Low tag vibe) */
#bioAgeCard.bio-good{
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.25);
}
#bioAgeCard.bio-bad{
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.25);
}
#bioAgeCard.bio-neutral{
  /* keep defaults */
}

.quiz-statusGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.quiz-status{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.80);
  padding: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.quiz-status__k{
  font-weight: 950;
  letter-spacing: -0.2px;
  color: var(--quiz-ink);
  font-size: 13px;
}

.quiz-status__v{
  font-weight: 950;
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  color: var(--quiz-muted);
}

.quiz-status__v.is-good{
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.25);
  color: #166534;
}
.quiz-status__v.is-ok{
  background: rgba(250,204,21,0.14);
  border-color: rgba(250,204,21,0.28);
  color: #854d0e;
}
.quiz-status__v.is-bad{
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.25);
  color: #991b1b;
}

@media (min-width: 880px){
  .quiz-metricsRow{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }
}

/* =========================================================
   HERO: ensure image sits underneath overlays correctly
   (fixes cases where image loads but looks "invisible")
   ========================================================= */


.quiz-hero__img{
  position: relative;
  z-index: 1;
}

.quiz-hero__placeholder{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* =========================================================
   Q1 Start overlay (age on image)
   ========================================================= */
.quiz-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-items: end;
  padding: 14px;
  pointer-events: auto;
}

/* dark overlay so text is readable */
.quiz-hero__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 0;
}

/* the actual card */
.quiz-startCard{
  position: relative;
  z-index: 1;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 18px 34px rgba(0,0,0,0.28);
  padding: 14px;
  display: grid;
  gap: 10px;
  color: #fff;
}

.quiz-startBadgeRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.quiz-startBadge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.18);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}

.quiz-startBadge.muted{
  opacity: .9;
  background: rgba(0,0,0,0.10);
}

.quiz-startTitle{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.35px;
  line-height: 1.15;
}

.quiz-startSub{
  font-size: 13px;
  line-height: 1.45;
  opacity: .92;
}

.quiz-startInputRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.quiz-startInput{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.92);
  padding: 12px 12px;
  font-size: 16px;
  font-weight: 950;
  outline: none;
  color: #0E0E0F;
}

.quiz-startInput:focus{
  border-color: rgba(50,150,205,0.55);
  box-shadow: 0 0 0 4px rgba(50,150,205,0.22);
}

.quiz-startHint{
  font-size: 12px;
  opacity: .88;
}

.quiz-startBtn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* On very small screens stack input + button */
@media (max-width: 420px){
  .quiz-startInputRow{
    grid-template-columns: 1fr;
  }
  .quiz-startBtn{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   Q1 pills on the image (Apple-style)
   ========================================================= */
.quiz-startPills{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.quiz-startPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.18);
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.1px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.quiz-startPill.muted{
  background: rgba(0,0,0,0.12);
  border-color: rgba(255,255,255,0.18);
  opacity: 0.95;
}

/* =========================================
   Start Screen (Age requirement, iOS card)
   ========================================= */

.mf-startHero__media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(5,49,112,0.12);
  background: linear-gradient(135deg, rgba(5,49,112,0.06), rgba(50,150,205,0.10));
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}

.mf-startHero__img{
  display:block !important;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 1;
}

.mf-startHero__placeholder{
  position:absolute;
  inset:0;
  z-index:2;
  min-height: 220px;
  display:grid;
  align-content:space-between;
  padding: 14px;
  gap: 10px;
}

.mf-startHero__overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  align-items:end;
  padding: 14px;
  pointer-events:auto;
}

/* readability overlay */
.mf-startHero__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.58) 100%
  );
  z-index:0;
}

/* ensure pills + card sit above overlay */
.mf-startHero__overlay > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   Mobile accessibility + iOS safe-area fixes
   (Start screen + quiz pages)
   ========================================================= */

/* Respect notches + iOS home indicator */
:root{
  --mf-safe-top: env(safe-area-inset-top, 0px);
  --mf-safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* Start screen should never become a "scroll trap" */
.mf-startScreen{
  max-width: 100%;
}

/* Make Start card readable + tappable on small screens */
@media (max-width: 520px){
  .mf-startHero__media{
    border-radius: 16px;
  }

  /* prevent overlay content from being too low (keyboard zone) */
  .mf-startHero__overlay{
    padding: 12px;
    align-items: end;
  }

  /* Slightly taller image on mobile so overlay has room */
  .mf-startHero__img{
    aspect-ratio: 4 / 5;  /* ✅ more vertical space on mobile */
  }

  /* Make the frosted card more solid for readability */
  .quiz-startCard{
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.28);
    padding: 12px;
    gap: 8px;
  }

  /* Larger, more accessible tap targets */
  .quiz-startInput{
    min-height: 48px; /* ✅ WCAG-friendly tap height */
    font-size: 16px; /* ✅ prevents iOS zoom */
  }

  .quiz-startBtn{
    min-height: 48px; /* ✅ tap size */
  }

  /* Ensure pills wrap cleanly */
  .quiz-startPills{
    margin-bottom: 8px;
  }
}

/* Make focus states clearly visible (keyboard users too) */
.quiz-startInput:focus,
.quiz-opt:focus,
.quiz-btn:focus{
  outline: none;
}

.quiz-startInput:focus-visible,
.quiz-opt:focus-visible,
.quiz-btn:focus-visible{
  box-shadow:
    0 0 0 4px rgba(50,150,205,0.25),
    0 12px 24px rgba(0,0,0,0.18);
}

/* Improve option tap usability on mobile */
@media (hover: none){
  .quiz-opt{
    padding: 14px 14px;
  }
}

/* Prevent the fixed header from covering anchor scroll targets */
#quizTop,
.quiz-hero,
.quiz-question{
  scroll-margin-top: calc(var(--header-h, 64px) + 18px + var(--mf-safe-top));
}

/* If the keyboard pushes layout weirdly, keep it stable */
@supports (height: 100dvh){
  body.longevity-quiz-page{
    min-height: 100dvh;
  }
}

/* =========================================
   Longevity Start Screen — iOS premium gate
   ========================================= */

.mf-startShell{
  display:grid;
  gap: 12px;
}

.mf-startTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.mf-startBack{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: 13px;
  color: var(--quiz-brand);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(5,49,112,0.14);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.mf-startBack:hover{ transform: var(--quiz-lift); box-shadow: 0 16px 24px rgba(0,0,0,0.10); }
.mf-startBack:active{ transform: scale(.99); }

.mf-startMiniPill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: var(--quiz-muted);
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.75);
}

.mf-startHero{
  width:100%;
}

.mf-startHero__media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(5,49,112,0.12);
  background: linear-gradient(135deg, rgba(5,49,112,0.06), rgba(50,150,205,0.10));
  box-shadow: 0 16px 32px rgba(0,0,0,0.10);
}

/* Make hero feel more “card-like” on desktop */
@media (min-width: 900px){
  .mf-startHero__media{ border-radius: 22px; }
}

.mf-startHero__img{
  display:block !important;
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* placeholder now looks like premium skeleton */
.mf-startHero__placeholder{
  position:absolute;
  inset:0;
  z-index:2;
  padding: 16px;
  display:grid;
  align-content:space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(5,49,112,0.10), rgba(50,150,205,0.16));
}

.mf-startPhTop{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.mf-startBadge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(5,49,112,0.18);
  background: rgba(255,255,255,0.70);
  color: var(--quiz-brand);
}
.mf-startBadge.muted{
  border-color: rgba(0,0,0,0.10);
  color: var(--quiz-muted);
}

.mf-startPhTitle{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.5px;
  color: var(--quiz-ink);
}

.mf-startPhSub{
  font-size: 13px;
  color: rgba(0,0,0,0.60);
}

/* shimmer */
.mf-startPhShimmer{
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.20),
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.20)
  );
  background-size: 200% 100%;
  animation: mfShimmer 1200ms ease-in-out infinite;
}
@keyframes mfShimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

.mf-startHero__overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  align-items:end;
  padding: 14px;
}
.mf-startHero__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.24) 45%,
    rgba(0,0,0,0.66) 100%
  );
  z-index:0;
}

.mf-startOverlayInner{
  position:relative;
  z-index:1;
  display:grid;
  gap: 12px;
}

.mf-startTitle{
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.6px;
  color: #fff;
  line-height: 1.1;
}

.mf-startSubtitle{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  max-width: 60ch;
}

/* pills (consistent with your existing “startPills” vibe) */
.mf-startPills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.mf-startPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.16);
  color:#fff;
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
.mf-startPill.muted{
  background: rgba(0,0,0,0.10);
  border-color: rgba(255,255,255,0.18);
  opacity: 0.95;
}

/* Age card: “iOS frosted panel” */
.mf-ageCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 22px 40px rgba(0,0,0,0.26);
  padding: 14px;
  display:grid;
  gap: 12px;
}

.mf-ageCardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.mf-ageTitle{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.25px;
  color:#fff;
}

.mf-ageWhy{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}

.mf-ageLock{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.16);
}

.mf-ageRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:end;
}

.mf-ageField{ display:grid; gap: 6px; }

.mf-ageLabel{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -0.1px;
  color: rgba(255,255,255,0.92);
}

.mf-ageInputWrap{
  position:relative;
  display:flex;
  align-items:center;
}

.mf-ageInput{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.92);
  padding: 12px 44px 12px 12px;
  font-size: 16px;
  font-weight: 950;
  color:#0E0E0F;
  outline:none;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

/* remove spinners (clean iOS look) */
.mf-ageInput::-webkit-outer-spin-button,
.mf-ageInput::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
.mf-ageInput{ -moz-appearance: textfield; }

.mf-ageSuffix{
  position:absolute;
  right: 12px;
  font-weight: 950;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
}

.mf-ageInput:focus{
  border-color: rgba(50,150,205,0.70);
  box-shadow:
    0 0 0 4px rgba(50,150,205,0.26),
    0 1px 0 rgba(255,255,255,.6) inset;
}

.mf-ageHint{
  font-size: 12px;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
}

.mf-ageError{
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  color: #ffe3e3;
  background: rgba(239,68,68,0.20);
  border: 1px solid rgba(239,68,68,0.30);
  padding: 8px 10px;
  border-radius: 12px;
}

/* CTA aligns with your button system */
.mf-startCta{
  min-height: 46px;
}

/* chips */
.mf-ageChips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.mf-chip{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.14);
  color:#fff;
  font-weight: 950;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.mf-chip:hover{ transform: translateY(-1px); background: rgba(0,0,0,0.20); }
.mf-chip:active{ transform: scale(.99); }

/* foot note */
.mf-startFoot{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  padding-left: 4px;
}
.mf-startFootDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(50,150,205,1), rgba(5,49,112,1));
  box-shadow: 0 8px 14px rgba(0,0,0,0.22);
}

/* Mobile: give more vertical space (iOS) */
@media (max-width: 520px){
  .mf-startHero__img{ aspect-ratio: 4 / 5; }
  .mf-ageRow{ grid-template-columns: 1fr; }
  .mf-startCta{ width:100%; justify-content:center; min-height: 50px; }
}

/* ✅ Home-card style pill (matches screenshot) */
.mf-homePill{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
  background:linear-gradient(90deg,var(--brand),var(--brand-light));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 18px rgba(0,0,0,0.22);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}

.mf-startTagRow{
  margin-bottom: 6px;
}

/* ✅ Title row: blue title + white side text (not bold) */
.mf-startTitleRow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items: baseline;
  margin-top: 2px;
}

.mf-startTitleBlue{
  font-size: 24px;
  font-weight: 950;
  color: rgba(255,255,255,0.94);
  letter-spacing: -0.6px;
  line-height: 1.1;
  text-shadow: 0 10px 18px rgba(0,0,0,0.28);
}

.mf-startTitleSide{
  font-size: 16px;
  font-weight: 600; /* ✅ not bold */
  color: rgba(255,255,255,0.94);
  text-shadow: 0 10px 18px rgba(0,0,0,0.28);
}

/* ✅ Remove extra vertical space so everything fits inside image */
.mf-startOverlayInner{
  gap: 10px; /* tighter */
}

/* ✅ Age input placeholder-only (no suffix) looks clean */
.mf-ageInput{
  padding-right: 12px !important; /* remove space that was for suffix */
}

/* ✅ Back button works + looks native */
.mf-startBack{
  appearance:none;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  color: var(--quiz-brand);
  font-weight: 900;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.mf-startBack:hover{ transform: var(--quiz-lift); box-shadow: 0 16px 24px rgba(0,0,0,0.10); }
.mf-startBack:active{ transform: scale(.99); }

/* =========================
   Start Screen — requested tweaks
   ========================= */

/* 1) Top pill to TOP-RIGHT */
.mf-startTagRow{
  display:flex;
  justify-content:flex-end;   /* ✅ right */
  align-items:center;
  margin-bottom: 2px;         /* tighter */
}

/* 2) Bring title up + ensure MyFitometer blue (not black) */
.mf-startTitleRow{
  margin-top: -2px;           /* ✅ bring up slightly */
  gap: 8px;
}

.mf-startTitleBlue{
  color: var(--brand) !important; /* ✅ theme blue */
  /* Optional: makes blue pop on dark overlay */
  text-shadow: 0 10px 18px rgba(0,0,0,0.38);
}

/* 3) Tighten overlay spacing so title sits higher */
.mf-startOverlayInner{
  gap: 8px; /* tighter than before */
}

/* 4) Reduce width of age textbox (desktop/tablet) */
@media (min-width: 521px){
  .mf-ageField{
    max-width: 220px; /* ✅ narrower input block */
  }
}

/* 5) Align Start button with age input (same height, same baseline) */
.mf-ageRow{
  align-items: end; /* keep bottom-aligned */
  column-gap: 12px;
}

.mf-ageInput{
  height: 46px; /* ✅ exact */
  padding: 0 12px; /* keep iOS-friendly */
  display:flex;
  align-items:center;
}

.mf-startCta{
  height: 46px;     /* ✅ matches input */
  min-height: 46px; /* ensures same */
  align-self: end;  /* sit aligned with input bottom */
}

/* 6) Make back button unmistakably MyFitometer themed */
.mf-startBack{
  border-color: rgba(5,49,112,0.18) !important;
  color: var(--brand) !important;
}

/* 7) Mobile: keep everything clean + stack nicely */
@media (max-width: 520px){
  .mf-startHero__overlay{
    padding: 12px;
  }

  .mf-startTitleBlue{
    font-size: 22px; /* a touch smaller so it fits */
  }

  /* input + button stack already, but ensure comfy */
  .mf-ageRow{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mf-ageField{
    max-width: 100%;
  }

  .mf-ageInput,
  .mf-startCta{
    width: 100%;
    height: 50px;     /* ✅ bigger tap target on mobile */
    min-height: 50px;
  }

  .mf-startCta{
    justify-content:center;
  }
}

/* =========================================
   START SCREEN — Fix title color + mobile friendliness
   ========================================= */

/* Title must be WHITE */
.mf-startTitleBlue{
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 10px 18px rgba(0,0,0,0.38);
}

/* Keep the side text consistent (also white) */
.mf-startTitleSide{
  color: rgba(255,255,255,0.92) !important;
}

/* Mobile: make the first screen feel less cramped */
@media (max-width: 520px){
  /* slightly taller hero so overlay has room */
  .mf-startHero__img{
    aspect-ratio: 3 / 4; /* more vertical than 16:9, a bit less tall than 4:5 */
  }

  /* reduce vertical crowding */
  .mf-startOverlayInner{
    gap: 8px !important;
  }

  .mf-startTitleBlue{
    font-size: 21px !important;
    line-height: 1.08;
  }

  .mf-startTitleSide{
    font-size: 15px !important;
  }

  /* make the frosted age card more readable on tiny screens */
  .mf-ageCard{
    padding: 12px !important;
    gap: 10px !important;
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.28) !important;
  }

  .mf-ageWhy{
    font-size: 12.5px !important;
  }

  /* ensure big tap targets */
  .mf-ageInput,
  .mf-startCta{
    height: 50px !important;
    min-height: 50px !important;
  }
}

.mf-startTop{
  position: relative;
  z-index: 50;
}

#startBackBtn{
  position: relative;
  z-index: 60;
  pointer-events: auto;
}

/* If any overlay covers the top area, make sure it can't steal clicks */
.mf-startHero__media,
.mf-startHero__overlay,
.mf-startHero__placeholder{
  pointer-events: none;
}

/* But allow interactions inside the overlay content (age input + start button) */
.mf-startOverlayInner,
.mf-ageCard,
.mf-ageCard *{
  pointer-events: auto;
}



.quiz-hero__img{
  width: 100%;
  height: 100%;          /* ✅ key fix (matches your console fix) */
  object-fit: cover;
  display: block !important;
}

/* Optional: on wider screens you can allow it to scale */
@media (min-width: 900px){
  .quiz-hero__img{
    height: 260px;
  }
}

/* --- Longevity quiz: hero image MUST be visible --- */
#qImg{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  width:100% !important;
  height:220px !important;
  object-fit:cover !important;
  position:relative !important;
  z-index:5 !important;
}

/* Placeholder must NEVER sit above image */
#qImgPlaceholder{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;      /* behind image */
  pointer-events:none !important;
}

/* =========================================================
   Longevity Quiz — Question hero image MUST fill container
   (does NOT affect the start screen image)
   ========================================================= */




/* make the image itself take up the whole rectangle */
#quizArea #qImg,
#quizArea .quiz-hero__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-radius: 0 !important; /* parent already has rounded corners */
}

/* ensure placeholder never shows */
#quizArea #qImgPlaceholder{
  display: none !important;
}


/* =========================================================
   Longevity Quiz — QUESTION image full-bleed (no grey gutters)
   Only targets the question area (#quizArea)
   ========================================================= */

/* Make the actual image fill the entire hero box */
#quizArea #qImg{
  flex: 1 1 auto !important;     /* key */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;    /* prevents “shrink then center” */
  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Never show placeholder in question area */
#quizArea #qImgPlaceholder{
  display: none !important;
}

/* =========================================================
   FIX: Mobile grey strip ABOVE question images
   Cause: aspect-ratio + height overrides fighting each other
   Only affects QUESTION images (#quizArea), not start screen
   ========================================================= */

@media (max-width: 520px){
  /* kill any visible background behind the question image area */
  #quizArea .quiz-hero,
  #quizArea .quiz-hero__media{
    background: transparent !important;
  }

  /* IMPORTANT: when we use a fixed height, DO NOT also enforce aspect-ratio */
  #quizArea #qImg,
  #quizArea .quiz-hero__img{
    aspect-ratio: auto !important;
    height: 220px !important;   /* keep your current mobile height */
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
  }
}
/* ✅ FIX: remove grey strip above question images (mobile)
   Root cause: image not filling the hero container due to aspect-ratio/height conflicts
   Solution: container defines the box; image absolutely fills it
*/
#quizArea .quiz-hero__media{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 0 !important;
  background: transparent !important;
  line-height: 0;              /* prevents any inline gaps */
  aspect-ratio: 16 / 9;        /* the hero box size */
}

/* Mobile: slightly taller hero like your start screen vibe (optional) */
@media (max-width: 520px){
  #quizArea .quiz-hero__media{
    aspect-ratio: 5 / 4;
  }
}

#quizArea #qImg,
#quizArea .quiz-hero__img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* keep placeholder fully dead */
#quizArea #qImgPlaceholder{ display:none !important; }
/* =========================
   Longevity Quiz — “?” help + modal
   ========================= */

/* Question text row: keep ? aligned to the right */
.mf-qRow{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

/* iOS-like “?” button */
.mf-qHelpBtn{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;

  border: 1px solid rgba(5,49,112,0.22);
  background: rgba(5,49,112,0.08);
  color: var(--brand);

  font-weight: 950;
  font-size: 14px;
  line-height: 1;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  margin-top: 2px; /* slight alignment with bold question text */
}

.mf-qHelpBtn:hover{
  transform: translateY(-1px);
}
.mf-qHelpBtn:active{
  transform: scale(0.98);
}

.mf-qHelpBtn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(50,150,205,0.22),
    0 10px 18px rgba(0,0,0,0.12);
}

/* Modal container (hidden by default) */
.mf-helpModal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display:none;
}

/* When open */
.mf-helpModal.is-open{
  display:block;
}

/* Backdrop */
.mf-helpModal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Panel */
.mf-helpModal__panel{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(560px, calc(100vw - 28px));
  max-height: min(70vh, 640px);

  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.96);

  box-shadow: 0 26px 60px rgba(0,0,0,0.22);
  overflow: hidden;

  display:flex;
  flex-direction: column;
}

/* Top bar */
.mf-helpModal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mf-helpModal__title{
  font-weight: 950;
  letter-spacing: -0.3px;
  font-size: 16px;
  color: var(--quiz-ink);
}

/* Close button */
.mf-helpModal__close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  color: var(--quiz-ink);

  font-size: 20px;
  line-height: 1;
  font-weight: 900;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.mf-helpModal__close:hover{ transform: translateY(-1px); }
.mf-helpModal__close:active{ transform: scale(0.98); }

/* Scrollable body */
.mf-helpModal__body{
  padding: 14px 14px 16px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;

  color: var(--quiz-muted);
  font-size: 13px;
  line-height: 1.55;
}

.mf-helpModal__body b{
  color: var(--quiz-ink);
}

.mf-helpModal__body ul{
  margin: 10px 0 0;
  padding-left: 18px;
}

/* Mobile: bottom-sheet vibe */
@media (max-width: 520px){
  .mf-helpModal__panel{
    left: 50%;
    top: 50%;
    bottom: auto;

    transform: translate(-50%, -50%);
    max-height: 70vh;
  }
}

/* =========================
   Fitness-for-age quiz — tiny additions
   (keeps reuse of quiz.css)
   ========================= */

/* Start screen: make 2 inputs + button flow nicely */
.mf-start2col{
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
}
@media (max-width: 720px){
  .mf-start2col{ grid-template-columns: 1fr; }
}

/* Input card inside quiz options */
.mf-inputCard{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  padding: 14px;
  display:grid;
  gap: 10px;
}

.mf-inputTitle{
  font-weight: 950;
  letter-spacing: -0.25px;
  color: var(--quiz-ink);
}

.mf-inputRow{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mf-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(5,49,112,0.18);
  background: rgba(255,255,255,0.95);
  padding: 12px 12px;
  font-size: 16px;
  font-weight: 950;
  outline: none;
}
.mf-input:focus{
  border-color: rgba(5,49,112,0.40);
  box-shadow: 0 0 0 4px rgba(50,150,205,0.15);
}

.mf-inputUnit{
  font-weight: 950;
  font-size: 12px;
  color: var(--quiz-muted);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.04);
  flex: 0 0 auto;
}

.mf-inputSub{
  font-size: 12px;
  line-height: 1.45;
}

/* Time row (HH:MM:SS:MS) */
.mf-timeRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 8px;
  flex-wrap:wrap;
}

.mf-time{
  width: 78px;
  border-radius: 14px;
  border: 1px solid rgba(5,49,112,0.18);
  background: rgba(255,255,255,0.95);
  padding: 12px 10px;
  font-size: 16px;
  font-weight: 950;
  outline:none;
  text-align:center;
}
.mf-time:focus{
  border-color: rgba(5,49,112,0.40);
  box-shadow: 0 0 0 4px rgba(50,150,205,0.15);
}
.mf-timeSep{
  font-weight: 950;
  color: var(--quiz-muted);
}

@media (max-width: 420px){
  .mf-time{ width: 68px; }
}

/* =========================
   Readiness modal (same vibe as help modal)
   ========================= */
.mf-readyModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:none;
}
.mf-readyModal.is-open{ display:block; }

.mf-readyModal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mf-readyModal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 28px));
  max-height: min(75vh, 680px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 26px 60px rgba(0,0,0,0.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.mf-readyModal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mf-readyModal__title{
  font-weight: 950;
  letter-spacing: -0.3px;
  font-size: 16px;
  color: var(--quiz-ink);
}

.mf-readyModal__close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  color: var(--quiz-ink);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.mf-readyModal__body{
  padding: 14px 14px 16px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  color: var(--quiz-muted);
  font-size: 13px;
  line-height: 1.55;
}

.mf-readyLead{
  color: var(--quiz-ink);
  font-weight: 900;
  margin-bottom: 8px;
}
.mf-readyList{
  margin: 0;
  padding-left: 18px;
}
.mf-readyQ{
  margin-top: 14px;
  font-weight: 950;
  color: var(--quiz-ink);
}
.mf-readyBtns{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* =========================================================
   Fitness-for-age START screen (mobile)
   Age (left) + Sex (right), Start button below
   ========================================================= */
@media (max-width: 520px){
  /* 2 columns on mobile for the two inputs */
  #startScreen .mf-ageRow.mf-start2col{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 12px !important;
    align-items: end !important;
  }

  /* Make sure the two mf-ageField blocks sit left/right */
  #startScreen .mf-ageRow.mf-start2col > .mf-ageField:nth-child(1){
    grid-column: 1 / 2 !important;
  }
  #startScreen .mf-ageRow.mf-start2col > .mf-ageField:nth-child(2){
    grid-column: 2 / 3 !important;
  }

  /* Start button goes underneath spanning both columns */
  #startScreen #startQuizBtn{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
    height: 50px !important;
    min-height: 50px !important;
    margin-top: 2px !important;
  }

  /* Inputs/selects fill their columns */
  #startScreen #startAgeInput,
  #startScreen #startSexInput{
    width: 100% !important;
  }
}

/* =========================================================
   ANDROID SCROLL FIX — quizzes
   Works on Android, iOS, tablets, PWA
   ========================================================= */

/* Always allow page scrolling */
html,
body {
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Quiz card must NOT trap scroll */
.quiz-card,
.quiz-qwrap,
.quiz-results {
  position: relative !important;
  overflow: visible !important;
}

/* Prevent fixed heroes from killing scroll */
.quiz-hero,
.mf-startHero {
  position: relative !important;
}

/* Android Chrome fix for inner containers */
.quiz-options,
.quiz-question,
.mf-results-rest {
  overflow: visible !important;
}

/* Allow scrolling even when focus is inside inputs */
input,
select,
textarea {
  touch-action: manipulation;
}

/* Lock scroll ONLY when a modal is open (Android-safe) */
body.mf-scroll-lock{
  overflow: hidden !important;
  height: 100vh !important;
}