/* Longevity Strength Quiz — styles. Uses the page's design tokens. */
.qz-card {
  background: var(--pure-white);
  border: 0.5px solid rgba(21,72,76,0.12);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(13,46,50,0.10), 0 4px 16px rgba(13,46,50,0.05);
  padding: 56px 56px 48px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  outline: none;
}
.qz-eyebrow {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--lagoon); margin-bottom: 16px;
}
.qz-title, .qz-question, .qz-archetype {
  font-family: var(--font-display);
  font-weight: 400; color: var(--night);
}
.qz-title { font-size: 40px; line-height: 1.1; margin-bottom: 16px; }
.qz-sub { font-size: 16px; line-height: 1.6; color: rgba(13,46,50,0.65); margin-bottom: 28px; }
.qz-meta { font-size: 13px; color: rgba(13,46,50,0.64); margin-top: 18px; }

.qz-progress {
  height: 4px; background: rgba(48,184,178,0.15);
  border-radius: 2px; overflow: hidden; margin-bottom: 20px;
}
.qz-progress-bar { height: 100%; background: var(--lagoon); transition: width 300ms ease; }
.qz-count {
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(13,46,50,0.64); margin-bottom: 14px;
}
.qz-question { font-size: 30px; line-height: 1.25; margin-bottom: 28px; }
.qz-options { display: flex; flex-direction: column; gap: 12px; }
.qz-option {
  font-family: var(--font-body); font-size: 16px; line-height: 1.4;
  text-align: left; color: var(--night);
  background: rgba(48,184,178,0.06);
  border: 1px solid rgba(21,72,76,0.15);
  border-radius: 8px; padding: 18px 22px;
  cursor: pointer; transition: border-color 150ms, background 150ms, transform 150ms;
}
@media (hover: hover) {
  .qz-option:hover {
    border-color: var(--lagoon);
    background: rgba(48,184,178,0.12);
    transform: translateY(-1px);
  }
}
.qz-back {
  margin-top: 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: rgba(13,46,50,0.64);
  padding: 12px 16px; /* comfortable tap target */
}
.qz-blueprint-link { margin: 8px 0 14px; }
.qz-back:hover { color: var(--malachite); }

#qz-form { text-align: left; max-width: 420px; margin: 0 auto; }
.qz-field { margin-bottom: 16px; }
.qz-field label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--malachite); margin-bottom: 6px;
}
.qz-optional { color: rgba(13,46,50,0.64); text-transform: none; letter-spacing: 0; font-weight: 400; }
.qz-field input {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  color: var(--night); background: var(--pure-white);
  border: 1px solid rgba(21,72,76,0.25); border-radius: 6px;
  padding: 13px 14px;
}
.qz-field input:focus { outline: none; border-color: var(--lagoon); }
.qz-hp { position: absolute; left: -9999px; top: -9999px; }
.qz-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; color: rgba(13,46,50,0.75);
  margin: 14px 0 16px; cursor: pointer;
  padding: 8px 0; /* comfortable tap target */
}
.qz-consent input { margin-top: 3px; }
.qz-error { color: var(--rust); font-size: 14px; min-height: 20px; margin-bottom: 10px; }
#qz-form .btn-primary { width: 100%; }
.qz-privacy { font-size: 12px; color: rgba(13,46,50,0.64); margin-top: 14px; text-align: center; }

.qz-result .qz-archetype { font-size: 46px; margin-bottom: 10px; }
.qz-secondary {
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(13,46,50,0.64); margin-bottom: 14px;
}
.qz-video { margin: 6px 0 22px; }
.qz-video video {
  width: 100%; max-width: 480px; border-radius: 10px;
  aspect-ratio: 16/9; height: auto; display: block; margin: 0 auto;
  box-shadow: 0 12px 32px rgba(13,46,50,0.15);
}
.qz-consult { margin-top: 16px; }
.qz-tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: 21px; color: var(--rust); margin-bottom: 20px;
}
.qz-desc { font-size: 16px; line-height: 1.65; color: rgba(13,46,50,0.7); margin-bottom: 26px; }
.qz-recs {
  text-align: left; background: rgba(48,184,178,0.07);
  border-radius: 8px; padding: 24px 28px; margin-bottom: 26px;
}
.qz-recs-heading {
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--malachite); margin-bottom: 12px;
}
.qz-recs ul { margin: 0; padding-left: 20px; }
.qz-recs li { font-size: 15.5px; line-height: 1.6; color: rgba(13,46,50,0.8); margin-bottom: 8px; }
.qz-gift-note {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--malachite); margin-top: 4px;
}
.qz-disclaimer {
  font-size: 11.5px; line-height: 1.5; color: rgba(13,46,50,0.64);
  margin-top: 26px; text-align: center;
}

@media (max-width: 600px) {
  .qz-card { padding: 36px 22px 32px; }
  .qz-title { font-size: 30px; }
  .qz-question { font-size: 24px; }
  .qz-result .qz-archetype { font-size: 34px; }
}

/* Audit: authored keyboard focus (AA), retake link, reduced motion */
.qz-option:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible,
.qz-back:focus-visible, #qz-retake:focus-visible,
.qz-field input:focus-visible, .qz-consent input:focus-visible {
  outline: 2px solid var(--malachite); outline-offset: 2px;
}
.qz-field input:focus { border-color: var(--malachite); }
.qz-retake { margin-top: 14px; text-align: center; }
.qz-retake button {
  background: none; border: none; cursor: pointer; padding: 10px 14px;
  font-family: var(--font-body); font-size: 13px; color: rgba(13,46,50,0.64);
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Compact portrait note on result screen (replaces video per Minet 2026-07-29) */
.qz-note { margin: 4px 0 20px; }
.qz-note-photo {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  object-position: 62% 30%; display: block; margin: 0 auto 10px;
  border: 3px solid rgba(48,184,178,0.25);
}
.qz-note-line {
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; color: var(--malachite);
}


/* Result screen shows strategy names only; full text lives on the blueprint */
.qz-rec-label {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--malachite);
  margin-right: 5px;
}