/* ----------------------------------------------------------------------------
   Assistara Remote Income Potential Quiz
   Mobile-first. Reuses the site tokens from /styles.css so the quiz is visibly
   the same brand as the homepage and Academy, never a bolted-on microsite.
   Manrope everywhere, enforced by /manrope-lock.css.
   ---------------------------------------------------------------------------- */

.quiz-body {
  background: var(--cream, #fbfaf6);
  color: var(--ink, #151515);
  font-family: "Manrope", sans-serif;
}

.quiz-body main#top {
  padding-bottom: 40px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Every focusable control in the quiz gets the same visible ring, so keyboard
   users can always see where they are. */
.quiz-body main#top :focus-visible {
  outline: 3px solid var(--yellow, #ffd51f);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------------------------------------------------------------- landing */

/* Breadcrumb: makes Academy ownership visible on every screen, including the
   result, so a shared link still reads as an Academy page. */
.quiz-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a8480;
  flex-wrap: wrap;
}

/* The confirmation view hides the trail (redundant with the header link);
   display:flex would otherwise beat the hidden attribute. */
.quiz-crumbs[hidden] {
  display: none;
}

.quiz-crumbs a {
  color: var(--muted, #66625f);
  text-decoration: none;
  font-weight: 700;
}

.quiz-crumbs a:hover {
  color: var(--ink, #151515);
  text-decoration: underline;
}

.quiz-crumbs span[aria-current] {
  color: var(--ink, #151515);
  font-weight: 700;
}

.quiz-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
}

.quiz-facts div {
  background: var(--white, #fff);
  border: 1px solid var(--line, #dedbd3);
  border-radius: 18px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quiz-facts b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.quiz-facts span {
  font-size: 11.5px;
  color: var(--muted, #66625f);
  font-weight: 600;
  line-height: 1.35;
}

.quiz-honesty {
  font-size: 12px;
  line-height: 1.6;
  color: #8a8480;
  margin: 26px 0 0;
  max-width: 560px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #dedbd3);
}

.qp-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  background: var(--yellow, #ffd51f);
  color: #151515;
  padding: 5px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------- the quiz */

.quiz-play {
  padding-top: 24px;
  padding-bottom: 40px;
  max-width: 820px;
}

.quiz-progress {
  margin-bottom: 20px;
}

.quiz-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}

.quiz-progress-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #66625f);
}

.quiz-progress-pct {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink, #151515);
  font-variant-numeric: tabular-nums;
}

.quiz-progress-track {
  height: 8px;
  background: #ece9e2;
  border-radius: 999px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  width: 10%;
  background: var(--yellow, #ffd51f);
  border-radius: 999px;
  transition: width 260ms ease;
}

.quiz-card {
  background: var(--white, #fff);
  border: 1px solid var(--line, #dedbd3);
  border-radius: var(--radius, 28px);
  box-shadow: 0 25px 70px rgba(18, 18, 18, 0.08);
  padding: 26px 20px 24px;
}

.quiz-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #a09a94;
  margin: 0 0 10px;
}

.quiz-title {
  font-size: clamp(22px, 5.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0;
}

.quiz-title:focus {
  outline: none;
}

.quiz-support {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted, #66625f);
  margin: 10px 0 0;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

/* Each option is a real radio/checkbox inside a styled label, so keyboard
   navigation, screen readers and form semantics all work natively. */
.quiz-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  border: 1.5px solid var(--line, #dedbd3);
  border-radius: 16px;
  background: var(--white, #fff);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink, #151515);
  font-weight: 600;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.quiz-option:hover {
  border-color: #c4bfb8;
  background: #fdfcfa;
}

.quiz-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.quiz-option .qo-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cbc6bf;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: transparent;
  transition: border-color 140ms ease, background-color 140ms ease;
}

/* Multi-select uses a square so the two input types are distinguishable
   without relying on colour alone. */
.quiz-options.is-multi .qo-mark {
  border-radius: 7px;
}

.quiz-option input:checked + .qo-mark {
  border-color: var(--yellow, #ffd51f);
  background: var(--yellow, #ffd51f);
  color: #151515;
  font-weight: 900;
}

.quiz-option:has(input:checked) {
  border-color: var(--yellow, #ffd51f);
  background: #fffdf2;
}

.quiz-option:has(input:focus-visible) {
  outline: 3px solid var(--yellow, #ffd51f);
  outline-offset: 2px;
}

.quiz-option .qo-text {
  flex: 1;
  min-width: 0;
}

.quiz-option .qo-sub {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #66625f);
  font-weight: 500;
  margin-top: 2px;
}

/* ------------------------------------------------------------ income q2 */

.quiz-income {
  margin-top: 24px;
  padding: 22px 18px;
  border: 1.5px solid var(--line, #dedbd3);
  border-radius: 20px;
  background: #fdfcfa;
}

.quiz-income-value {
  font-size: clamp(34px, 10vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.quiz-income-value span {
  font-size: 0.6em;
  color: #a09a94;
  margin-right: 3px;
}

.quiz-income input[type="range"] {
  width: 100%;
  margin: 20px 0 8px;
  accent-color: var(--yellow, #ffd51f);
  height: 28px;
  cursor: pointer;
}

.quiz-income-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted, #66625f);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.quiz-income-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #dedbd3);
}

.quiz-income-alt label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #66625f);
  flex: 0 0 auto;
}

.quiz-income-alt input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1.5px solid var(--line, #dedbd3);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
}

/* ------------------------------------------------------------- error text */

.quiz-inline-error,
.quiz-field-error,
.quiz-submit-error {
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  margin: 16px 0 0;
}

.quiz-field-error,
.quiz-submit-error {
  margin-top: 9px;
}

/* ------------------------------------------------------------- quiz nav */

.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #dedbd3);
}

.quiz-back,
.quiz-skip {
  background: none;
  border: 0;
  padding: 10px 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted, #66625f);
  cursor: pointer;
  text-decoration: none;
  border-radius: 10px;
}

.quiz-back:hover,
.quiz-skip:hover {
  color: var(--ink, #151515);
}

.quiz-back[hidden] {
  visibility: hidden;
  display: inline-block;
}

.quiz-next {
  min-width: 132px;
  justify-content: center;
}

.quiz-next[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.quiz-a11y-hint {
  font-size: 12px;
  color: #8a8480;
  text-align: center;
  margin: 18px 0 0;
  line-height: 1.6;
}

/* --------------------------------------------------------- reveal / lead */

.quiz-reveal {
  padding-top: 24px;
  padding-bottom: 40px;
  max-width: 620px;
}

.quiz-reveal-card {
  background: var(--white, #fff);
  border: 1px solid var(--line, #dedbd3);
  border-radius: var(--radius, 28px);
  box-shadow: 0 25px 70px rgba(18, 18, 18, 0.08);
  padding: 28px 22px;
}

.quiz-reveal-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.quiz-reveal-actions .btn {
  width: 100%;
  justify-content: center;
}

.quiz-field {
  margin-top: 18px;
}

.quiz-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 7px;
}

.quiz-optional {
  font-weight: 600;
  color: #a09a94;
  font-size: 12px;
  margin-left: 4px;
}

.quiz-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line, #dedbd3);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  background: #fff;
}

.quiz-field input:focus {
  border-color: #b5b0a9;
}

.quiz-field-hint {
  font-size: 12px;
  color: var(--muted, #66625f);
  line-height: 1.5;
  margin: 7px 0 0;
}

.quiz-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 20px;
  padding: 14px;
  border: 1.5px solid var(--line, #dedbd3);
  border-radius: 14px;
  background: #fdfcfa;
}

.quiz-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--yellow, #ffd51f);
  cursor: pointer;
}

.quiz-consent label {
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
}

/* What emailing the report actually buys. Benefits, stated plainly, above
   the fold of the reveal step so the default path explains itself. */
.quiz-email-benefits {
  list-style: none;
  margin: 20px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-email-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.quiz-email-benefits li > span {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yellow, #ffd51f);
  color: #171717;
  font-size: 13px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.quiz-email-benefits b {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.quiz-email-benefits small {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #66625f);
}

/* The opt-out sits beside the primary button and is styled as a real
   control, not a faint footnote: declining email must be as easy as
   accepting it. */
.quiz-optout {
  border: 1.5px solid var(--line, #dedbd3);
  border-radius: 999px;
  padding: 11px 20px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #171717);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.quiz-optout:hover,
.quiz-optout:focus-visible {
  border-color: #b5b0a9;
  background: #fdfcfa;
}

/* Email preferences travel with the saved report. */
.quiz-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--line, #dedbd3);
  border-radius: 16px;
  background: #fdfcfa;
}

.quiz-prefs b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 4px;
}

.quiz-prefs p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #66625f);
  max-width: 52ch;
}

.quiz-prefs button {
  flex: 0 0 auto;
}

.quiz-prefs[hidden] {
  display: none;
}

/* Hidden from sight, still present for a bot. Never `display:none`, which
   some bots learn to skip. */
.quiz-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quiz-submit-error[hidden],
.quiz-field-error[hidden],
.quiz-inline-error[hidden] {
  display: none;
}

/* --------------------------------------------------------------- result */

.quiz-result {
  padding-top: 24px;
  padding-bottom: 40px;
  max-width: 860px;
}

.quiz-result-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quiz-result-hero {
  background: #171717;
  color: #fff;
  border-radius: var(--radius, 28px);
  padding: 30px 22px;
}

.quiz-result-hero .section-kicker {
  color: var(--yellow, #ffd51f);
}

.quiz-result-hero h2 {
  font-size: clamp(26px, 6.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 8px 0 0;
}

.quiz-result-hero h2:focus {
  outline: none;
}

.quiz-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.quiz-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.quiz-tag-primary {
  background: var(--yellow, #ffd51f);
  color: #151515;
}

.quiz-tag-soft {
  background: rgba(255, 255, 255, 0.07);
  color: #d9d4cc;
}

/* Report blocks share one card shape so a long report still reads as one page. */
.rblock {
  background: var(--white, #fff);
  border: 1px solid var(--line, #dedbd3);
  border-radius: 22px;
  padding: 24px 20px;
}

.rblock > h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1.25;
}

.rblock > .rblock-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #a09a94;
  margin: 0 0 8px;
}

.rblock p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--muted, #66625f);
  margin: 12px 0 0;
}

.rblock p:first-of-type {
  margin-top: 10px;
}

/* The server emits **bold** markers; this converts them to real markup. */
.rblock strong,
.rblock b {
  color: var(--ink, #151515);
  font-weight: 700;
}

.rblock ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rblock ul li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted, #66625f);
}

.rblock ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #151515;
  font-weight: 900;
}

.rblock ul.rlist-dash li::before {
  content: "→";
}

.rblock .rquote {
  border-left: 3px solid var(--yellow, #ffd51f);
  padding: 4px 0 4px 16px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink, #151515);
  font-weight: 600;
}

.rcard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

.rcard {
  border: 1px solid var(--line, #dedbd3);
  border-radius: 16px;
  padding: 15px 16px;
  background: #fdfcfa;
}

.rcard small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #a09a94;
  text-transform: uppercase;
}

.rcard b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.rcard span {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #66625f);
  margin-top: 3px;
  line-height: 1.5;
}

/* Highlight card: the worked income example. */
.rblock.is-highlight {
  background: var(--yellow, #ffd51f);
  border-color: #e8c11b;
}

.rblock.is-highlight p,
.rblock.is-highlight .rcard span {
  color: #4a4130;
}

.rblock.is-highlight > h3 {
  color: #151515;
}

.rformula {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(21, 21, 21, 0.08);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #151515;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

/* readiness scale */
.rscale {
  display: flex;
  gap: 5px;
  margin-top: 18px;
}

.rscale div {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: #ece9e2;
}

.rscale div.on {
  background: var(--yellow, #ffd51f);
}

.rscale-legend {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #a09a94;
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* the 30-day roadmap */
.rweek {
  border: 1px solid var(--line, #dedbd3);
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
  background: #fdfcfa;
}

.rweek-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.rweek-head small {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #a09a94;
  text-transform: uppercase;
}

.rweek-head b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rweek-focus {
  font-size: 13px;
  color: var(--muted, #66625f);
  margin-top: 4px;
  line-height: 1.5;
}

.rnote {
  font-size: 12.5px;
  color: #8a8480;
  line-height: 1.6;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #dedbd3);
}

/* next step / CTA */
.rblock.is-next {
  background: #171717;
  border-color: #171717;
}

.rblock.is-next > h3,
.rblock.is-next strong {
  color: #fff;
}

.rblock.is-next p {
  color: #c9c4bc;
}

.rbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  background: var(--yellow, #ffd51f);
  color: #151515;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.rbtn:hover {
  filter: brightness(1.04);
}

.rshare {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rshare-line {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.rshare-url {
  font-size: 12.5px;
  color: var(--muted, #66625f);
  word-break: break-all;
  background: #fdfcfa;
  border: 1px solid var(--line, #dedbd3);
  border-radius: 10px;
  padding: 10px 12px;
}

.rshare-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.rshare-actions button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--line, #dedbd3);
  background: #fff;
  color: var(--ink, #151515);
  cursor: pointer;
}

.rshare-actions button:hover {
  border-color: #b5b0a9;
}

.quiz-disclaimers {
  background: #f4f3ef;
  border: 1px solid var(--line, #dedbd3);
  border-radius: 18px;
  padding: 18px 20px;
}

.quiz-disclaimers h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: #8a8480;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.quiz-disclaimers ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quiz-disclaimers li {
  font-size: 12px;
  line-height: 1.6;
  color: #6d6862;
  padding-left: 14px;
  position: relative;
}

.quiz-disclaimers li::before {
  content: "·";
  position: absolute;
  left: 2px;
  font-weight: 900;
}

.quiz-result-again {
  text-align: center;
}

/* ------------------------------------------------------------ loading */

.quiz-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
  text-align: center;
}

.quiz-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 4px solid #ece9e2;
  border-top-color: var(--yellow, #ffd51f);
  animation: quizSpin 900ms linear infinite;
}

@keyframes quizSpin {
  to { transform: rotate(360deg); }
}

.quiz-loading p {
  font-size: 15px;
  color: var(--muted, #66625f);
  margin: 0;
  font-weight: 600;
}

/* ------------------------------------------------- desktop & tablet */

@media (min-width: 720px) {
  .quiz-card {
    padding: 34px 34px 30px;
  }
  .quiz-reveal-card {
    padding: 34px 34px;
  }
  .rblock {
    padding: 28px 30px;
  }
  .rblock > h3 {
    font-size: 21px;
  }
  .rcard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rcard-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quiz-reveal-actions {
    flex-direction: row;
    justify-content: flex-start;
    gap: 18px;
  }
  .quiz-reveal-actions .btn {
    width: auto;
  }
  .quiz-result-hero {
    padding: 38px 36px;
  }
  .quiz-next {
    min-width: 150px;
  }
  .quiz-options.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 1000px) {
  .quiz-play {
    padding-top: 44px;
  }
}

/* Small phones: keep every control comfortably tappable. */
@media (max-width: 380px) {
  .quiz-facts {
    grid-template-columns: 1fr;
  }
  .quiz-card {
    padding: 22px 16px 20px;
  }
  .quiz-nav {
    gap: 8px;
  }
  .quiz-next {
    min-width: 0;
    flex: 1;
  }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .quiz-progress-fill {
    transition: none;
  }
  .quiz-spinner {
    border-top-color: var(--yellow, #ffd51f);
    animation: none;
  }
}

/* High-contrast / forced-colors: never rely on the yellow tint alone. */
@media (forced-colors: active) {
  .quiz-option,
  .quiz-card,
  .rblock {
    border: 1px solid CanvasText;
  }
  .quiz-option:has(input:checked) {
    border-width: 3px;
  }
  .quiz-progress-fill {
    background: Highlight;
  }
}



/* ----------------------------------------------------------------------------
   Premium conversion redesign
   Same brand system (Manrope, yellow, charcoal, cream) with a stronger
   hierarchy on the landing, animated questions/progress, and a result reveal
   that reads as a reward. All animation is neutered by the site-wide
   prefers-reduced-motion block above, so nothing here can trap a visitor
   who asked for less motion.
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   Academy header on the quiz page: simplified, no B2B banners or CTAs.
   The logo and wordmark form a single brand unit on the left.
   --------------------------------------------------------------------------- */

/* Logo mark */
.site-header .mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: contain;
  object-position: left center;
}

/* Brand wordmark beside the logo */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 20px/1 "Manrope", sans-serif;
  color: #fff;
}

/* Simplified nav links for quiz page */
.site-header .nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-header .nav-links a {
  font-size: 14px;
  color: #d4d4d4;
  text-decoration: none;
}
.site-header .nav-links a:hover {
  color: #fff;
}

/* Mobile: hide nav links, show only logo mark */
@media (max-width: 760px) {
  .site-header .nav-links { display: none; }
  .site-header .brand span { display: none; }
  .site-header .mark { width: 36px; height: 36px; flex: 0 0 36px; }
}

/* Tablet: show brand text again */
@media (min-width: 761px) and (max-width: 900px) {
  .site-header .nav-links { display: none; }
  .site-header .brand span { display: inline; }
}

/* Desktop: show nav links */
@media (min-width: 901px) {
  .site-header .nav-links { display: flex; }
  .site-header .brand span { display: inline; }
}

/* The Academy header component on the quiz page: wordmark beside the logo. */
.brand-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: inherit;
}

@media (max-width: 900px) {
  .brand-text { display: none; }
}

@keyframes quizTeaserIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes quizTeaserRow {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ play */

/* Question transitions: out, then in. Driven by quiz.js, skipped entirely for
   reduced motion (the global block above collapses the durations). */
@keyframes quizCardOut {
  to { opacity: 0; transform: translateY(-10px) scale(0.985); }
}

@keyframes quizCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.quiz-card.q-anim-out {
  animation: quizCardOut 0.16s ease-in forwards;
}

.q-anim-in {
  animation: quizCardIn 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Animated progress: brand gradient with a slow travelling sheen. */
.quiz-progress-fill {
  background: linear-gradient(90deg, #ffc91f, #ffd51f 55%, #ffe27a);
  position: relative;
}

.quiz-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: quizSheen 2.6s ease-in-out infinite;
}

@keyframes quizSheen {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* Varied, grown-up microcopy between questions; display-only. */
.quiz-micro {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a8480;
  min-height: 1.3em;
}

/* A chosen option gives a small physical acknowledgement. */
@keyframes quizOptPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

.quiz-option:has(input:checked) {
  animation: quizOptPop 0.22s ease;
}

/* --------------------------------------------------------------- result */

/* The hero becomes an award plate: yellow hairline, top-right glow, and the
   matched career named large before anything else on the report. */
.quiz-result-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 213, 31, 0.25);
  box-shadow: 0 30px 80px rgba(18, 18, 18, 0.18);
  animation: quizHeroIn 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes quizHeroIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.quiz-result-hero::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 213, 31, 0.22), transparent 70%);
  pointer-events: none;
}

.quiz-result-career {
  margin-top: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  animation: quizHeroIn 0.6s 0.12s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.quiz-result-career small {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--yellow, #ffd51f);
  font-weight: 800;
}

.quiz-result-career b {
  display: block;
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-top: 5px;
  line-height: 1.1;
}

.quiz-result-career span {
  display: block;
  font-size: 13px;
  color: #b9b3a8;
  font-weight: 600;
  margin-top: 5px;
}

.quiz-result-tags .quiz-tag {
  animation: quizTagIn 0.5s both;
}

.quiz-result-tags .quiz-tag:nth-child(2) { animation-delay: 0.08s; }
.quiz-result-tags .quiz-tag:nth-child(3) { animation-delay: 0.16s; }

@keyframes quizTagIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Report blocks fade up as the visitor reads down. The class is added by
   quiz-report.js, so with JS off or broken the report simply appears. */
.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: none;
}

/* The 30-day plan reads as a progression, not a list. */
.rweek {
  position: relative;
  padding-left: 19px;
  border-left: 3px solid var(--yellow, #ffd51f);
}

.rweek-head small {
  background: var(--yellow, #ffd51f);
  color: #151515;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   The quiz opens on question 1. The compact header below replaces the landing
   screen: it names the quiz, says what the ten answers lead to, and carries the
   progress bar. The explanation of the quiz lives further down, under the
   questions, so it can be read by scrolling but can never stand between a
   visitor and the first question.
   --------------------------------------------------------------------------- */

.quiz-head {
  margin: 0 0 18px;
  max-width: 760px;
}

.quiz-head-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8480;
}

.quiz-head-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--yellow, #ffd51f);
  flex: 0 0 auto;
}

.quiz-head-title {
  font-size: clamp(21px, 4.6vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 8px 0 0;
}

.quiz-head-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted, #66625f);
  margin: 8px 0 0;
}

@media (max-width: 640px) {
  .quiz-head {
    margin-bottom: 14px;
  }
}

/* ---------------------------------------------------------------------------
   Confirmation screen (quiz-confirm) - premium success/error states
   --------------------------------------------------------------------------- */

.quiz-confirm-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 32px;
  text-align: center;
}

.quiz-confirm-illustration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff6e0 0%, #ffe8b0 100%);
  box-shadow: 0 8px 24px rgba(255, 213, 31, 0.3);
}

.envelope-icon {
  color: #e8b800;
}

.quiz-confirm-success h2 {
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 12px;
  color: #1a1a1a;
}

.quiz-confirm-success .quiz-support {
  font-size: 16px;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 0 28px;
  max-width: 420px;
}

.quiz-confirm-teaser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 32px 0 24px;
  padding: 0 24px;
  text-align: left;
}

.teaser-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #faf9f5;
  border-radius: 12px;
  border: 1px solid #efece5;
}

.teaser-bullet {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8b800;
}

.teaser-item span:last-child {
  font-size: 14.5px;
  line-height: 1.5;
  color: #333;
  font-weight: 500;
}

.quiz-confirm-note {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #777 !important;
  margin-top: 16px !important;
}

/* Error state */
.quiz-confirm-error {
  padding: 40px 32px;
}

.quiz-confirm-error .quiz-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: 28px;
}

.quiz-confirm-error h2 {
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 10px;
  color: #dc2626;
}

.quiz-confirm-error .quiz-support {
  font-size: 16px;
  line-height: 1.6;
  color: #6b6b6b;
  margin: 0 0 28px;
}

.quiz-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

@media (min-width: 480px) {
  .quiz-confirm-actions {
    flex-direction: row;
    justify-content: center;
  }
}

.quiz-confirm-actions .btn {
  width: 100%;
  max-width: 260px;
}

@media (min-width: 480px) {
  .quiz-confirm-actions .btn {
    width: auto;
  }
}

/* Loading state for submit button */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after {
    animation: none;
    border-top-color: #fff;
    border-right-color: #fff;
  }
}

/* Reduced motion: disable entrance animation */
@media (prefers-reduced-motion: reduce) {
  .quiz-confirm-card {
    animation: none;
  }
  .quiz-confirm-illustration {
    animation: none;
  }
}

/* Entrance animation for confirm card */
.quiz-confirm-card {
  animation: confirmIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes confirmIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.quiz-confirm-illustration {
  animation: popIn 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}

.quiz-confirm-teaser .teaser-item {
  animation: slideUp 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.quiz-confirm-teaser .teaser-item:nth-child(1) { animation-delay: 0.25s; }
.quiz-confirm-teaser .teaser-item:nth-child(2) { animation-delay: 0.35s; }
.quiz-confirm-teaser .teaser-item:nth-child(3) { animation-delay: 0.45s; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .quiz-confirm-card,
  .quiz-confirm-illustration,
  .quiz-confirm-teaser .teaser-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Email preferences panel */
.quiz-prefs-panel {
  margin-top: 24px;
  padding: 20px 24px;
  background: #faf9f5;
  border: 1px solid #efece5;
  border-radius: 12px;
  text-align: left;
}

.quiz-prefs-panel p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a4a4a;
}

.quiz-prefs-panel .btn {
  width: 100%;
  max-width: 280px;
}