/*!
 * FinnFit Quiz — standalone, mobile-first, dub.co-style UI (sans-serif throughout,
 * dark primary actions, tight radii, subtle borders/shadows over heavy chrome).
 * Loaded after assets/css/style.css (reuses --brand-* tokens); adds its own
 * fonts + a self-contained quiz shell so it never depends on the rest of the
 * site's layout CSS. Satoshi (headings) is loaded via Fontshare in finnfit-quiz.html.
 */

@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/aeonik/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ffq-green: #009356;
  --ffq-green-strong: #007a49;
  --ffq-green-soft: #e6f4ee;
  --ffq-ink: #003F48;
  --ffq-ink-soft: #084348;
  --ffq-lime: #D3FB91;
  --ffq-amber: #F59E0B;
  --ffq-red: #DC2626;
  --ffq-border: #e5e7eb;
  --ffq-bg: #F3F5F0;
  --ffq-text: #1a1a1a;
  --ffq-text-muted: #6b7280;
  --ffq-radius: 12px;
  --ffq-radius-sm: 8px;
  --ffq-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --ffq-shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Defensive backstop, not a fix for anything currently active: the wizard is a
   single-viewport, no-horizontal-scroll experience by design, so nothing should ever
   need to scroll sideways. (The PDF report template that once caused exactly this is
   now built and removed on demand — see buildPdfReport() in finnfit-quiz.js.)
   `clip`, not `hidden` — overflow-x:hidden implicitly forces overflow-y to compute
   as `auto` (CSS Overflow spec), which turns body into its own scroll container and
   silently breaks position:sticky on .ffq-topbar. `clip` suppresses the same
   horizontal overflow without that cross-axis side effect. */
/* touch-action:manipulation removes the ~300ms double-tap-to-zoom gesture on
   answer cards/buttons (mobile browsers wait that long to see if a second tap
   is coming before committing to a click) without disabling pinch-zoom
   elsewhere, unlike viewport user-scalable=no — that would block intentional
   zoom too, which is an accessibility regression this avoids. */
html, body { overflow-x: clip; touch-action: manipulation; }

.finnfit-quiz-app, .finnfit-quiz-app * { box-sizing: border-box; }
.finnfit-quiz-app {
  font-family: "Inter", sans-serif;
  color: var(--ffq-text);
  background: var(--ffq-bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.finnfit-quiz-app h1, .finnfit-quiz-app h2, .finnfit-quiz-app h3 {
  font-family: "Satoshi", "Inter", sans-serif;
  font-weight: 700;
  color: var(--ffq-ink);
  margin: 0;
}
.finnfit-quiz-app .num {
  font-family: "Aeonik", "Inter", sans-serif;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.finnfit-quiz-app .ffq-intro h1 {
  font-family: "Aeonik", "Inter", sans-serif;
}

/* ---------- Top bar ---------- */
.ffq-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  background: rgba(251, 252, 251, 0.92);
  backdrop-filter: blur(6px);
  z-index: 20;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.ffq-topbar.is-scrolled { border-bottom-color: var(--ffq-border); }
.ffq-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.ffq-logo img { height: 26px; width: auto; display: block; }

/* Desktop only — lives inside .ffq-wizard (below the hero, above the question
   card) so it shares the card's centered column with no alignment math. On
   mobile this scrolls out of view with the rest of the content, so mobile gets
   its own indicator instead: a thin line on the fixed bottom nav bar (see
   .ffq-wizard-nav-progress below), since that bar is the one thing always on
   screen there regardless of scroll position. */
.ffq-topbar-progress-wrap {
  display: none; align-items: center; gap: 10px;
}
.ffq-topbar-progress-wrap-desktop { width: 100%; margin: 0 0 18px; }
.ffq-wizard.is-active .ffq-topbar-progress-wrap-desktop { display: flex; }
@media (max-width: 640px) {
  .ffq-topbar-progress-wrap-desktop { display: none !important; }
}
.ffq-topbar-progress {
  flex: 1;
  height: 6px;
  background: var(--ffq-border);
  border-radius: 999px;
  overflow: hidden;
}
.ffq-topbar-progress-pct {
  flex: none;
  font-size: 12px; font-weight: 700; color: var(--ffq-green-strong);
  font-family: "Inter", sans-serif; min-width: 28px;
}
.ffq-topbar-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ffq-green), var(--ffq-green-strong));
  border-radius: inherit;
  transition: width 0.35s ease;
}
.ffq-exit {
  margin-left: auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ffq-text-muted);
  text-decoration: none;
  font-size: 18px;
  transition: background 0.2s ease, color 0.2s ease;
}
.ffq-exit:hover { background: var(--ffq-green-soft); color: var(--ffq-ink); }

/* ---------- Screen shell ---------- */
.ffq-main { flex: 1; display: flex; flex-direction: column; }
.ffq-screen {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 56px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.ffq-screen.is-active { display: flex; }
.ffq-screen-narrow { max-width: 560px; }

/* ---------- Intro ---------- */
.ffq-intro { text-align: center; gap: 20px; }
.ffq-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ffq-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ffq-ink-soft);
  background: var(--ffq-green-soft);
  border: 1px solid rgba(0,147,86,0.18);
  padding: 6px 12px; border-radius: 999px;
}
.ffq-badge i { color: var(--ffq-green); }
.ffq-intro h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.ffq-intro h1 em { color: var(--ffq-green); font-style: normal; }
.ffq-intro p.ffq-lead {
  font-size: 1.08rem;
  color: var(--ffq-text-muted);
  max-width: 480px;
  line-height: 1.6;
}
.ffq-trust {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ffq-text-muted);
}
.ffq-trust i { color: var(--ffq-green); }
.ffq-variant-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  margin-top: 8px;
}
@media (max-width: 560px) { .ffq-variant-picker { grid-template-columns: 1fr; } }
.ffq-variant-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--ffq-border);
  border-radius: var(--ffq-radius);
  background: #fff;
  padding: 22px 20px;
  cursor: pointer;
  transition: 0.2s ease;
  box-shadow: var(--ffq-shadow);
}
.ffq-variant-card:hover { box-shadow: var(--ffq-shadow-lift); border-color: #c7c9cd; }
.ffq-variant-card .ffq-variant-time {
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ffq-green-strong);
  max-width: calc(100% - 100px);
}
.ffq-variant-card h3 { font-size: 1.15rem; margin: 6px 0 6px; }
.ffq-variant-card p { font-size: 13.5px; color: var(--ffq-text-muted); margin: 0 0 16px; line-height: 1.5; }
.ffq-variant-card.ffq-variant-recommended { border-color: var(--ffq-green); }
/* Decorative — the card itself (role="button") is the real click target, so this
   is aria-hidden. It's purely a visual affordance matching the "click here"
   expectation a bare card doesn't otherwise communicate. */
.ffq-variant-cta { margin-top: auto; pointer-events: none; }
.ffq-variant-badge {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(245,158,11,0.12); color: #b45309;
  border: 1px solid rgba(245,158,11,0.25);
  white-space: nowrap;
}
.ffq-variant-badge i { font-size: 9px; }
.ffq-variant-card.ffq-variant-disabled {
  cursor: not-allowed;
  pointer-events: none;
  background: #fafafa;
  opacity: 0.65;
}
.ffq-variant-card.ffq-variant-disabled:hover { box-shadow: var(--ffq-shadow); border-color: var(--ffq-border); }
.ffq-variant-badge-soon { background: rgba(107,114,128,0.12); color: #4b5563; border-color: rgba(107,114,128,0.25); }
.ffq-variant-disabled .ffq-variant-cta { background: #9aa0a6; border-color: #9aa0a6; }
.ffq-variant-card:focus-visible, .ffq-age-card:focus-visible { outline: 2px solid var(--ffq-green); outline-offset: 2px; }

/* ---------- Age select ---------- */
.ffq-age-select { text-align: center; gap: 22px; }
.ffq-age-select h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
.ffq-age-subtext { font-size: 14.5px; color: var(--ffq-text-muted); line-height: 1.5; max-width: 360px; margin: 0 auto; }
.ffq-age-form { width: 100%; max-width: 320px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 16px; }
.ffq-age-input-wrap { position: relative; }
.ffq-age-input-wrap input[type="tel"] {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ffq-ink);
  caret-color: var(--ffq-ink);
}
.ffq-age-input-wrap input[type="tel"]::placeholder { color: var(--ffq-text-muted); opacity: 0.5; }

/* ---------- Question wizard ---------- */
.ffq-wizard { width: 100%; gap: 18px; align-items: stretch; justify-content: flex-start; padding-top: 12px; }
.ffq-wizard-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ffq-text-muted); font-weight: 600; margin-bottom: 16px; }
.ffq-wizard-meta-pillar { display: inline-flex; align-items: center; gap: 7px; color: var(--ffq-green-strong); }
.ffq-wizard-pillar-icon { display: inline-flex; width: 14px; height: 14px; flex: none; }
.ffq-wizard-pillar-icon svg { width: 100%; height: 100%; display: block; }
.ffq-wizard-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 4px 12px 0; }
.ffq-wizard-hero-icon { width: 68px; height: 68px; }
.ffq-wizard-hero-icon svg { width: 100%; height: 100%; display: block; }
.ffq-wizard-hero-text { font-size: 13.5px; color: var(--ffq-text-muted); line-height: 1.5; max-width: 380px; margin: 0; }
.ffq-question-card {
  background: #fff;
  border: 1px solid var(--ffq-border);
  border-radius: var(--ffq-radius);
  padding: 30px 26px;
  box-shadow: var(--ffq-shadow);
}

/* Transitions.dev — Card resize */
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
}
/* Cross-fades the question card's content with its resize (see the .is-swapping
   toggle in renderStep(), finnfit-quiz.js) instead of letting text/answers swap
   instantly while the box tweens around them. */
.ffq-question-card .ffq-question-text,
.ffq-question-card .ffq-question-hint,
.ffq-question-card .ffq-answers {
  transition: opacity 180ms ease;
}
.ffq-question-card.is-swapping .ffq-question-text,
.ffq-question-card.is-swapping .ffq-question-hint,
.ffq-question-card.is-swapping .ffq-answers {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ffq-question-card .ffq-question-text,
  .ffq-question-card .ffq-question-hint,
  .ffq-question-card .ffq-answers { transition: none !important; opacity: 1 !important; }
}
@media (max-width: 560px) { .ffq-question-card { padding: 24px 18px; } }
.ffq-question-text {
  font-family: "Satoshi", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  line-height: 1.32;
  color: var(--ffq-ink);
  margin-bottom: 22px;
}
/* When a hint follows, the question's own margin shrinks (JS adds this class) so the
   22px gap moves to sit after the hint instead of doubling up between the two. */
.ffq-question-text.has-hint { margin-bottom: 6px; }
.ffq-question-hint { display: none; font-size: 13.5px; color: var(--ffq-text-muted); line-height: 1.4; margin: 0 0 22px; }
.ffq-answers { display: flex; flex-direction: column; gap: 10px; }
.ffq-answer {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--ffq-border);
  border-radius: var(--ffq-radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  background: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--ffq-text);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
/* hover:hover excludes touch devices: without it, tapping an answer leaves a
   "stuck" hover state (same green as .is-selected) on whatever button ends up
   at that same screen position after the next question's DOM is rebuilt
   underneath the finger during auto-advance. */
@media (hover: hover) and (pointer: fine) {
  .ffq-answer:hover { border-color: rgba(0,147,86,0.4); background: var(--ffq-green-soft); }
}
.ffq-answer:active { transform: scale(0.99); }
.ffq-answer .ffq-answer-dot {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  border: 2px solid var(--ffq-border);
  position: relative;
  transition: border-color 0.15s ease;
}
.ffq-answer.is-selected { border-color: var(--ffq-green); background: var(--ffq-green-soft); }
.ffq-answer.is-selected .ffq-answer-dot { border-color: var(--ffq-green); }
.ffq-answer.is-selected .ffq-answer-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ffq-green);
}
.ffq-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.ffq-wizard-nav-progress { display: none; }
/* On mobile, Back/Next are fixed to the bottom of the viewport at all times (not just
   while scrolled within the question card), so they're always reachable regardless of
   question length or scroll position. .ffq-wizard gets matching bottom padding so the
   fixed bar never covers the last answer option. */
@media (max-width: 640px) {
  /* Nav is fixed (out of flow) at this width, so .ffq-wizard's only remaining flex
     children are the meta row, hero, and question card — centering them keeps short
     questions (e.g. a 2-option Yes/No) visually balanced instead of top-stacked with
     a dead gap underneath. Has no visible effect on tall questions that already fill
     the available height. */
  .ffq-wizard { padding-bottom: 100px; justify-content: center; }
  /* .ffq-footer sits after <main>, outside .ffq-wizard, so it needs its own
     clearance from the fixed nav bar (the bar covers whatever's beneath it in
     the document regardless of which screen is active). */
  .ffq-footer { padding-bottom: 100px; }
  .ffq-wizard-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--ffq-bg);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.05);
    z-index: 30;
  }
  /* Sits flush on the bar's top edge, doubling as its divider line — the unfilled
     portion (--ffq-border) reads the same as the plain border it replaces. The
     inner .ffq-topbar-progress-fill (shared with the desktop copy) already
     supplies its own height/gradient/transition. */
  .ffq-wizard-nav-progress {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ffq-border);
  }
}
.ffq-btn-back {
  background: none; border: none; color: var(--ffq-text-muted);
  font-weight: 600; font-size: 14px; cursor: pointer; padding: 10px 6px;
  display: flex; align-items: center; gap: 6px;
}
.ffq-btn-back:hover { color: var(--ffq-ink); }
.ffq-btn-back:disabled { opacity: 0; pointer-events: none; }

/* ---------- Buttons ---------- */
.ffq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--ffq-radius-sm);
  border: none;
  cursor: pointer;
  transition: 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.ffq-btn-primary { background: var(--ffq-green); color: #fff; box-shadow: var(--ffq-shadow); }
.ffq-btn-primary:hover { background: var(--ffq-green-strong); }
.ffq-btn-primary:disabled { background: var(--ffq-disabled, #d4d4d8); box-shadow: none; cursor: not-allowed; }
.ffq-btn-ghost { background: #fff; color: var(--ffq-ink); border: 1px solid var(--ffq-border); }
.ffq-btn-ghost:hover { border-color: #c7c9cd; background: #fafafa; }
.ffq-btn-block { width: 100%; }

/* ---------- Lead capture ---------- */
.ffq-lead { width: 100%; gap: 6px; text-align: center; }
.ffq-lead h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
.ffq-lead-subtext { font-size: 14.5px; color: var(--ffq-text-muted); line-height: 1.5; max-width: 360px; margin: 0 auto 12px; }
.ffq-lead-form { width: 100%; max-width: 420px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.ffq-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ffq-ink-soft); margin-bottom: 6px; }
.ffq-field input, .ffq-field select {
  width: 100%;
  border: 1px solid var(--ffq-border);
  border-radius: var(--ffq-radius-sm);
  padding: 11px 12px;
  /* 16px, not smaller — iOS Safari auto-zooms the whole page on focus for any
     input under 16px, which is what was happening on the email/mobile fields. */
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: var(--ffq-text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ffq-field input:focus, .ffq-field select:focus { outline: none; border-color: var(--ffq-ink); box-shadow: 0 0 0 3px rgba(0,63,72,0.08); }
.ffq-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ffq-field select:invalid { color: var(--ffq-text-muted); }
.ffq-phone-input-wrap { position: relative; }
.ffq-phone-prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14.5px; color: var(--ffq-text-muted); pointer-events: none;
}
.ffq-phone-input-wrap input { padding-left: 40px; }
.ffq-field.has-error .ffq-phone-prefix { color: var(--ffq-red); }
.ffq-field-error { font-size: 12.5px; color: var(--ffq-red); margin-top: 5px; display: none; }
.ffq-field.has-error input { border-color: var(--ffq-red); }
.ffq-field.has-error .ffq-field-error { display: block; }
.ffq-lead-note { font-size: 12px; color: var(--ffq-text-muted); line-height: 1.5; }

/* ---------- Mobile OTP verification ---------- */
.ffq-phone-row { display: flex; gap: 8px; align-items: stretch; }
.ffq-phone-row .ffq-phone-input-wrap { flex: 1; min-width: 0; }
.ffq-otp-send-btn { flex: none; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }
.ffq-otp-send-btn:disabled { color: var(--ffq-text-muted); border-color: var(--ffq-border); cursor: not-allowed; }
.ffq-otp-panel {
  margin-top: 10px; padding: 12px; border: 1px solid var(--ffq-border);
  border-radius: var(--ffq-radius-sm); background: var(--ffq-green-soft);
}
.ffq-otp-panel label { font-size: 12.5px; font-weight: 600; color: var(--ffq-ink-soft); margin-bottom: 8px; }
.ffq-otp-row { display: flex; gap: 8px; }
.ffq-otp-row input {
  flex: 1; min-width: 0; border: 1px solid var(--ffq-border); border-radius: var(--ffq-radius-sm);
  padding: 10px 12px; font-size: 16px; letter-spacing: 0.15em; font-family: "Inter", sans-serif;
}
.ffq-otp-row input:focus { outline: none; border-color: var(--ffq-ink); box-shadow: 0 0 0 3px rgba(0,63,72,0.08); }
.ffq-otp-verify-btn { flex: none; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }
.ffq-otp-status { font-size: 12.5px; margin-top: 8px; min-height: 16px; }
.ffq-otp-status.is-error { color: var(--ffq-red); }
.ffq-otp-status.is-success { color: var(--ffq-green-strong); }
.ffq-otp-panel-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ffq-otp-resend-btn {
  background: none; border: none; padding: 0; font-size: 12.5px;
  color: var(--ffq-green-strong); font-weight: 600; cursor: pointer; text-decoration: underline;
}
.ffq-otp-resend-btn:disabled { color: var(--ffq-text-muted); cursor: not-allowed; text-decoration: none; }
.ffq-otp-panel-actions .ffq-otp-change-btn { margin-left: 0; }
.ffq-otp-verified {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--ffq-green-strong);
}
.ffq-otp-verified[hidden] { display: none; }
.ffq-otp-verified i { color: var(--ffq-green); }
.ffq-otp-change-btn {
  margin-left: auto; background: none; border: none; padding: 0; font-size: 12.5px;
  color: var(--ffq-text-muted); font-weight: 600; cursor: pointer; text-decoration: underline;
}
.ffq-lead-note a { color: var(--ffq-green-strong); }

/* ---------- Results ---------- */
.ffq-results { width: 100%; gap: 26px; text-align: center; }
.ffq-score-ring-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.ffq-score-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ffq-score-ring-track { fill: none; stroke: var(--ffq-border); stroke-width: 10; }
.ffq-score-ring-fill { fill: none; stroke: var(--ffq-green); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.22,1,0.36,1); }
.ffq-score-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ffq-score-value { font-size: 3rem; font-weight: 700; color: var(--ffq-ink); line-height: 1; }
.ffq-score-out-of { font-size: 13px; color: var(--ffq-text-muted); margin-top: 2px; }
.ffq-score-band {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
  margin: 0 auto;
}
.ffq-score-band.band-excellent { background: rgba(0,147,86,0.1); color: #007a45; border: 1px solid rgba(0,147,86,0.2); }
.ffq-score-band.band-good { background: rgba(8,67,72,0.08); color: #003F48; border: 1px solid rgba(8,67,72,0.15); }
.ffq-score-band.band-attention { background: rgba(245,158,11,0.1); color: #b45309; border: 1px solid rgba(245,158,11,0.2); }
.ffq-score-band.band-critical { background: rgba(220,38,38,0.08); color: #b91c1c; border: 1px solid rgba(220,38,38,0.15); }
.ffq-score-desc { max-width: 480px; margin: 0 auto; color: var(--ffq-text-muted); font-size: 14.5px; line-height: 1.6; }
.ffq-score-percentile { max-width: 480px; margin: 8px auto 0; color: var(--ffq-green); font-size: 13.5px; font-weight: 600; }

.ffq-pillars-grid { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ffq-pillar-row { display: grid; grid-template-columns: 30px 1fr 46px; align-items: center; gap: 12px; }
.ffq-pillar-icon { display: inline-flex; width: 30px; height: 30px; }
.ffq-pillar-icon svg { width: 100%; height: 100%; display: block; }
.ffq-pillar-row .ffq-pillar-name { font-size: 13.5px; font-weight: 600; color: var(--ffq-ink); margin-bottom: 5px; }
.ffq-pillar-bar-track { height: 8px; background: var(--ffq-border); border-radius: 999px; overflow: hidden; }
.ffq-pillar-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ffq-green), var(--ffq-green-strong)); border-radius: inherit; transition: width 1s cubic-bezier(0.22,1,0.36,1); }
.ffq-pillar-pct { font-size: 12.5px; font-weight: 700; color: var(--ffq-text-muted); text-align: right; }

/* ---------- Why did I lose marks? (results screen dropdown) ---------- */
.ffq-gaps {
  width: 100%;
  text-align: left;
  border: 1px solid var(--ffq-border);
  border-radius: var(--ffq-radius-sm);
  background: #fff;
  overflow: hidden;
}
.ffq-gaps summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ffq-ink);
}
.ffq-gaps summary::-webkit-details-marker { display: none; }
.ffq-gaps summary i { color: var(--ffq-text-muted); font-size: 13px; transition: transform 0.2s ease; }
.ffq-gaps[open] summary i { transform: rotate(180deg); }
.ffq-gaps-body { padding: 4px 18px 6px; border-top: 1px solid var(--ffq-border); }
.ffq-gaps-pillar { margin-top: 16px; }
.ffq-gaps-pillar h4 {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ffq-green-strong); margin: 0 0 8px;
}
.ffq-gaps-pillar-icon { display: inline-flex; flex: none; width: 14px; height: 14px; }
.ffq-gaps-pillar-icon svg { width: 100%; height: 100%; display: block; }
.ffq-gaps-tip { margin: 0; padding-left: 12px; border-left: 2px solid var(--ffq-amber); font-size: 13.5px; color: var(--ffq-text); line-height: 1.5; }
.ffq-gaps-empty { font-size: 13.5px; color: var(--ffq-text-muted); margin: 16px 0 0; text-align: center; }
.ffq-gaps-expert {
  margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--ffq-border);
  font-size: 12.5px; font-style: italic; color: var(--ffq-text-muted); text-align: center;
}

.ffq-results-ctas { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; }

/* ---------- Loading state ---------- */
.ffq-loading { text-align: center; gap: 14px; }
.ffq-loading-gif { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }

/* ---------- Footer ---------- */
.ffq-footer {
  text-align: center; padding: 18px 20px 28px;
  font-size: 11.5px; color: var(--ffq-text-muted); line-height: 1.6;
}
.ffq-footer-disclaimer { margin-top: 6px; }
.ffq-footer-disclaimer summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ffq-text-muted);
}
.ffq-footer-disclaimer summary::-webkit-details-marker { display: none; }
.ffq-footer-disclaimer summary i { font-size: 10px; transition: transform 0.2s ease; }
.ffq-footer-disclaimer[open] summary i { transform: rotate(180deg); }
.ffq-footer-disclaimer-body { max-width: 640px; margin: 10px auto 0; text-align: left; }
.ffq-footer-disclaimer-body p { font-size: 10.5px; color: var(--ffq-text-muted); line-height: 1.6; margin: 0 0 10px; }
.ffq-footer-disclaimer-body p:last-child { margin-bottom: 0; }
.ffq-footer-disclaimer-body a { color: var(--ffq-text-muted); text-decoration: underline; }

/* ---------- Hidden PDF report template ---------- */
/* html2canvas (used for PDF export) unreliably captures elements positioned far
   outside the viewport (e.g. left:-9999px), clipped by a zero-size overflow:hidden
   ancestor, or (on a tall, scrollable page) position:fixed — all three produced a
   blank or cropped PDF in testing. position:absolute anchored to the document origin,
   hidden behind everything else via z-index, was the one technique that captured
   the report in full regardless of page height or scroll position. */
.ffq-pdf-report-wrap { position: absolute; top: 0; left: 0; z-index: -1; }
.ffq-pdf-report {
  width: 700px;
  background: #fff;
  padding: 40px;
  font-family: "Inter", sans-serif;
  color: var(--ffq-text);
}
.ffq-pdf-report .ffq-pdf-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--ffq-ink); padding-bottom: 18px; margin-bottom: 28px; }
.ffq-pdf-report .ffq-pdf-header img { height: 30px; }
.ffq-pdf-report .ffq-pdf-header .ffq-pdf-date { font-size: 12px; color: var(--ffq-text-muted); }
.ffq-pdf-report h2 { font-family: "Satoshi", "Inter", sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--ffq-ink); margin-bottom: 4px; }
.ffq-pdf-report .ffq-pdf-sub { color: var(--ffq-text-muted); font-size: 13px; margin-bottom: 24px; }
.ffq-pdf-report .ffq-pdf-score-block { display: flex; align-items: center; gap: 28px; background: var(--ffq-green-soft); border-radius: 16px; padding: 24px; margin-bottom: 28px; }
.ffq-pdf-report .ffq-pdf-score-num { font-family: "Aeonik", "Inter", sans-serif; font-size: 3.2rem; font-weight: 700; color: var(--ffq-ink); }
.ffq-pdf-report .ffq-pdf-pillars { margin-bottom: 24px; }
/* Absolute positioning, not CSS Grid: html2canvas (PDF export) doesn't reliably
   compute `fr` track widths, silently collapsing/misplacing this row's columns. */
.ffq-pdf-report .ffq-pdf-pillar-row { position: relative; height: 22px; margin-bottom: 14px; font-size: 13px; }
.ffq-pdf-report .ffq-pdf-pillar-row .ffq-pdf-pillar-label { position: absolute; left: 0; top: 4px; width: 150px; }
.ffq-pdf-report .ffq-pdf-bar-track { position: absolute; left: 162px; top: 6px; width: 466px; height: 10px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.ffq-pdf-report .ffq-pdf-bar-fill { height: 100%; background: var(--ffq-green); }
.ffq-pdf-report .ffq-pdf-pillar-row .ffq-pdf-pillar-pct { position: absolute; left: 640px; top: 4px; width: 60px; text-align: right; color: #1a1a1a; font-weight: 700; }
.ffq-pdf-report .ffq-pdf-footer { border-top: 1px solid var(--ffq-border); padding-top: 16px; margin-top: 12px; font-size: 10.5px; color: var(--ffq-text-muted); line-height: 1.6; }

/* ---------- Exit-confirmation modal ---------- */
.ffq-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 67, 72, 0.5);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ffq-modal-overlay.is-active { display: flex; opacity: 1; }
.ffq-modal-overlay, .ffq-modal-overlay * { box-sizing: border-box; }
.ffq-modal {
  /* Outside .finnfit-quiz-app in the DOM (see finnfit-quiz.html), so it can't rely
     on that scoped selector for its base type — set explicitly or it falls back to
     the browser's own (serif) default heading style. */
  font-family: "Inter", sans-serif;
  color: var(--ffq-text);
  background: #fff;
  border-radius: var(--ffq-radius);
  padding: 30px 26px 26px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--ffq-shadow-lift);
  text-align: center;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.ffq-modal-overlay.is-active .ffq-modal { transform: translateY(0) scale(1); opacity: 1; }
.ffq-modal-icon {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border-radius: 50%; background: rgba(245, 158, 11, 0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--ffq-amber); font-size: 1.1rem;
}
.ffq-modal h3 { font-family: "Satoshi", "Inter", sans-serif; font-weight: 700; color: var(--ffq-ink); font-size: 1.15rem; margin: 0 0 8px; }
.ffq-modal p { font-size: 14px; color: var(--ffq-text-muted); line-height: 1.55; margin: 0 0 22px; }
.ffq-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.ffq-btn-text {
  background: none; border: none; color: var(--ffq-text-muted);
  font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600;
  cursor: pointer; padding: 8px; text-decoration: underline;
  text-underline-offset: 2px;
}
.ffq-btn-text:hover { color: var(--ffq-red); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ffq-score-ring-fill, .ffq-pillar-bar-fill, .ffq-topbar-progress-fill { transition: none !important; }
}