:root {
  --ink: #14213a;
  --muted: #53637a;
  --line: #d7e0eb;
  --surface: #ffffff;
  --soft: #f3f7fb;
  --navy: #0a3158;
  --navy-dark: #06213c;
  --teal: #087267;
  --teal-soft: #e9f7f4;
  --violet: #5a3ca0;
  --violet-soft: #f1edfb;
  --amber: #9a5b05;
  --amber-soft: #fff5df;
  --danger: #a02b2b;
  --focus: #0a3158;
  --shadow: 0 20px 48px rgba(10, 49, 88, .09);
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #f8fafc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body[data-iq-guest="true"] {
  --navy: #4f36b9;
  --navy-dark: #23134f;
  --teal: #087e83;
  --teal-soft: #e6f8f6;
  --shadow: 0 20px 48px rgba(62, 36, 123, .11);
  background: radial-gradient(ellipse at 10% 7%, #eee5ff 0, transparent 36%), radial-gradient(ellipse at 98% 15%, #daf8f7 0, transparent 32%), #f8f9ff;
}
body[data-iq-guest="true"] .topbar { background: linear-gradient(110deg, #25124f, #4832a0 65%, #11656d); }
body[data-iq-guest="true"] .hero { padding-top: clamp(2.5rem, 6vw, 5rem); }
body[data-iq-guest="true"] h1 { color: #4c2796; }
body[data-iq-guest="true"] .hero .lede { color: #563984; font-weight: 750; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
body[data-iq-guest="true"] .trust-list li:nth-child(3n + 1) { background: #eee7ff; border-color: #d4c2fa; color: #4c2796; }
body[data-iq-guest="true"] .trust-list li:nth-child(3n + 2) { background: #dff7f6; border-color: #a8dedb; color: #126264; }
body[data-iq-guest="true"] .trust-list li:nth-child(3n) { background: #fff0df; border-color: #f0c99d; color: #845013; }
body[data-iq-guest="true"] .price-card { border-top-color: #9867ec; border-radius: 24px; background: linear-gradient(150deg, #fff 25%, #f0eaff); }
body[data-iq-guest="true"] .price-card .price-value { color: #5835ad; }
body[data-iq-guest="true"] .button.primary:not(:disabled) { background: linear-gradient(105deg, #6240c8, #3c409c); border-color: #5431b7; }
body[data-iq-guest="true"] .level-stepper li[data-state="current"] { background: #eee7ff; border-color: #9a7cda; }
body[data-iq-guest="true"] .free-summary-grid article:nth-child(2n) { background: #f3ecff; border-color: #cbb3f1; }
body[data-iq-guest="true"] .free-summary-grid article:nth-child(2n) strong { color: #6740ae; }
body[data-iq-guest="true"] .method-grid article:nth-child(2n) { border-top: 4px solid #8c61d6; }
body[data-iq-guest="true"] .method-grid article:nth-child(2n + 1) { border-top: 4px solid #22a7b2; }

[hidden] { display: none !important; }
body[data-iq-guest="true"] [data-iq-legacy-only],
body[data-iq-guest="false"] [data-iq-guest-only] { display: none !important; }
body[data-iq-guest="true"] .payment-confirmation { grid-template-columns: 1fr; }
.iq-session-confirmation { margin: .75rem 0; align-items: start; }
.iq-session-confirmation input { margin-top: .35rem; flex: 0 0 auto; }
body[data-iq-guest="true"] .report-panel { width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; }
body[data-iq-guest="true"] .report-panel > .step,
body[data-iq-guest="true"] .report-panel > h3 { padding-inline: 1rem; }
#iq-premium-report { min-width: 0; }
a { color: var(--navy); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex="-1"]:focus {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus);
}
.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;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: -5rem;
  left: 1rem;
  padding: .7rem 1rem;
  color: #fff;
  background: var(--navy-dark);
  border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 4rem);
  color: #fff;
  background: var(--navy-dark);
}
.topbar a { color: #fff; text-decoration: none; }
.topbar > * { min-width: 0; }
.topbar nav { display: flex; min-width: 0; flex-wrap: wrap; gap: 1rem; }
.brand { max-width: 100%; font-weight: 850; letter-spacing: -.01em; overflow-wrap: anywhere; }
main { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(3.5rem, 8vw, 7rem) 0 3rem;
}
.hero-copy { min-width: 0; }
.eyebrow,
.step,
.row-label,
.price-label {
  margin: 0 0 .5rem;
  color: var(--teal);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 1.01;
  letter-spacing: -.05em;
}
h2 { font-size: clamp(1.65rem, 4vw, 2.65rem); line-height: 1.12; letter-spacing: -.025em; }
h3 { line-height: 1.25; }
.lede { max-width: 790px; color: var(--muted); font-size: clamp(1.06rem, 2vw, 1.28rem); }
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.trust-list li {
  padding: .45rem .78rem;
  border: 1px solid #a8d4cd;
  border-radius: 999px;
  background: var(--teal-soft);
  font-size: .86rem;
  font-weight: 750;
}
.price-card {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid #bdc9d6;
  border-top: 5px solid var(--teal);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.price-card p { margin: .3rem 0; }
.price-card hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--line); }
.price-card .price-value { color: var(--navy-dark); font-size: 1.45rem; font-weight: 850; }
.price-card > p:last-child { color: var(--muted); font-size: .92rem; }

.boundary-notice {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid #b7c5d5;
  border-left: 5px solid var(--navy);
  border-radius: 14px;
  background: #eef4fa;
}
.boundary-notice h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.boundary-notice p { margin: 0; }

.challenge-wrap { padding: clamp(3rem, 7vw, 6rem) 0; }
.section-heading { max-width: 790px; margin-bottom: 1.5rem; }
.section-heading h2 { margin: 0 0 .5rem; }
.section-heading p:last-child { color: var(--muted); }
.level-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  width: min(940px, 100%);
  margin: 0 auto 1rem;
  padding: 0;
  list-style: none;
}
.level-stepper li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0 .65rem;
  min-width: 0;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #edf1f6;
  color: #617084;
}
.level-stepper li > span {
  display: inline-flex;
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #78879a;
  font-weight: 900;
}
.level-stepper strong,
.level-stepper small { min-width: 0; overflow-wrap: anywhere; }
.level-stepper small { line-height: 1.3; }
.level-stepper li[data-state="current"] { border-color: var(--navy); color: var(--ink); background: #eef4fa; }
.level-stepper li[data-state="current"] > span { background: var(--navy); }
.level-stepper li[data-state="complete"] { border-color: #82bfb5; color: var(--ink); background: var(--teal-soft); }
.level-stepper li[data-state="complete"] > span { background: var(--teal); }
.panel {
  width: min(820px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: clamp(1.15rem, 4vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel h3 { margin-top: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.challenge-panel { width: min(940px, 100%); }
.no-account-callout {
  margin: 0 0 1.1rem;
  padding: 1rem;
  border: 1px solid #8dbfb7;
  border-left: 5px solid var(--teal);
  border-radius: 12px;
  background: var(--teal-soft);
  overflow-wrap: anywhere;
}
.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.auth-row > div { min-width: 0; flex: 1 1 220px; }
.auth-row p { margin: 0; }
.status-copy { overflow-wrap: anywhere; font-weight: 750; }
.timer-choice-group,
.theme-choice-group {
  min-width: 0;
  margin: 1.2rem 0;
  padding: clamp(1rem, 3vw, 1.25rem);
  border: 1px solid #b7c5d5;
  border-radius: 14px;
  background: var(--soft);
}
.timer-choice-group legend,
.theme-choice-group legend {
  padding: 0 .35rem;
  color: var(--navy-dark);
  font-size: 1.08rem;
  font-weight: 850;
}
.timer-choice-help,
.theme-choice-help {
  margin: 0 0 .85rem;
  color: var(--muted);
  font-size: .94rem;
}
.timer-choice-grid,
.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.timer-choice,
.theme-choice {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  min-width: 0;
  min-height: 76px;
  padding: .85rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.timer-choice:hover,
.theme-choice:hover { border-color: #8ea4ba; }
.timer-choice:has(input:checked),
.theme-choice:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.timer-choice input,
.theme-choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin: .2rem 0 0;
  accent-color: var(--teal);
}
.timer-choice span,
.theme-choice span { min-width: 0; overflow-wrap: anywhere; }
.timer-choice strong,
.timer-choice small,
.theme-choice strong,
.theme-choice small { display: block; }
.timer-choice small,
.theme-choice small { margin-top: .2rem; color: var(--muted); line-height: 1.35; }
.sports-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 36%);
  align-items: center;
  gap: .8rem;
  margin-top: .8rem;
  padding: .85rem;
  border: 1px solid #8dbfb7;
  border-radius: 12px;
  background: var(--teal-soft);
}
.sports-focus span,
.sports-focus strong,
.sports-focus small { display: block; min-width: 0; }
.sports-focus small { color: var(--muted); }
.sports-focus select {
  width: 100%;
  min-height: 46px;
  padding: .65rem .75rem;
  border: 2px solid var(--navy);
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}
.language-readiness {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-left: 4px solid var(--violet);
  background: var(--violet-soft);
  color: var(--muted);
}
.confirmation {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: start;
  gap: .7rem;
  margin: 1.2rem 0;
  padding: 1rem;
  border: 1px solid #a8d4cd;
  border-radius: 12px;
  background: var(--teal-soft);
  cursor: pointer;
}
.confirmation input {
  width: 1.2rem;
  height: 1.2rem;
  margin: .2rem 0 0;
  accent-color: var(--teal);
}
.setup-note { color: var(--muted); }
.free-paid-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin: 1rem 0;
}
.free-paid-note p {
  min-width: 0;
  margin: 0;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  overflow-wrap: anywhere;
}
.setup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.25rem;
}
.setup-actions .button { width: 100%; }
.button {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: .72rem 1.05rem;
  border: 2px solid var(--navy);
  border-radius: 9px;
  font: inherit;
  font-weight: 820;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.button.primary { color: #fff; background: var(--navy); }
.button.secondary { color: var(--navy); background: #fff; }
.button:hover:not(:disabled) { box-shadow: 0 4px 0 rgba(10, 49, 88, .16); transform: translateY(-1px); }
.button:disabled { color: #6f7b89; border-color: #b9c1ca; background: #e8edf2; cursor: not-allowed; }
.inline-status { min-height: 1.5em; margin: .75rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.inline-status[data-state="error"] { color: var(--danger); font-weight: 750; }
.inline-status[data-state="success"] { color: var(--teal); font-weight: 750; }

.question-timer {
  position: sticky;
  z-index: 8;
  top: max(.5rem, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(820px, 100%);
  min-width: 0;
  margin: 0 auto 1rem;
  padding: .8rem 1rem;
  border: 2px solid #8dbfb7;
  border-radius: 14px;
  color: var(--navy-dark);
  background: rgba(233, 247, 244, .97);
  box-shadow: 0 10px 28px rgba(10, 49, 88, .12);
  backdrop-filter: blur(8px);
}
.question-timer > div { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.timer-label {
  color: var(--teal);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#timer-value {
  color: var(--navy-dark);
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
#timer-mode-status { min-width: 0; margin: 0; color: var(--muted); font-size: .88rem; text-align: right; overflow-wrap: anywhere; }
.question-timer[data-timer-state="warning"] { border-color: #d59b3f; background: rgba(255, 245, 223, .98); }
.question-timer[data-timer-state="warning"] .timer-label,
.question-timer[data-timer-state="warning"] #timer-value { color: var(--amber); }
.question-timer[data-timer-state="complete"] { border-color: #9bb0c4; background: rgba(238, 244, 250, .98); }

.progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 42%);
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.progress-row p { margin: 0; font-weight: 800; }
.progress-row .overall-progress { color: var(--muted); font-size: .9rem; font-weight: 650; }
progress { width: 100%; height: .8rem; accent-color: var(--teal); }
.section-badge {
  display: inline-block;
  margin: 0 0 .55rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  color: var(--violet);
  background: var(--violet-soft);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .03em;
}
.section-explainer { margin: 0 0 1.2rem; color: var(--muted); }
#question-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#question-legend {
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 0;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 820;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.question-visual {
  display: grid;
  width: 100%;
  min-height: clamp(190px, 36vw, 330px);
  place-items: center;
  margin: 0 0 .6rem;
  padding: clamp(.7rem, 3vw, 1.35rem);
  overflow: hidden;
  border: 2px solid #bdc9d6;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 16%, rgba(8, 114, 103, .08), transparent 25%),
    linear-gradient(145deg, #fff 0%, #f3f7fb 100%);
}
.question-visual > svg,
.question-visual svg {
  display: block;
  width: min(100%, 620px);
  max-width: 100%;
  height: auto;
  max-height: 310px;
}
.question-visual-description {
  min-height: 1.35em;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .9rem;
}
.question-visual-description:empty { display: none; }
.option-list { display: grid; gap: .7rem; }
.option-list[data-layout="visual"],
.option-list.visual-options,
#question-fieldset:has(.question-visual:not([hidden])) .option-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.option {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  min-width: 0;
  padding: .9rem 1rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.option:hover { border-color: #8ea4ba; background: var(--soft); }
.option:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.option input { width: 1.1rem; height: 1.1rem; margin: .23rem 0 0; accent-color: var(--teal); }
.option span { min-width: 0; overflow-wrap: anywhere; }
.option-list[data-layout="visual"] .option,
.option-list.visual-options .option,
#question-fieldset:has(.question-visual:not([hidden])) .option {
  grid-template-areas:
    "control visual"
    "label label";
  grid-template-columns: 1.3rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 108px;
  align-items: center;
}
.option-list[data-layout="visual"] .option input,
.option-list.visual-options .option input,
#question-fieldset:has(.question-visual:not([hidden])) .option input {
  grid-area: control;
  align-self: start;
}
.option-list[data-layout="visual"] .option-visual,
.option-list.visual-options .option-visual,
#question-fieldset:has(.question-visual:not([hidden])) .option-visual { grid-area: visual; }
.option-list[data-layout="visual"] .option-label-text,
.option-list.visual-options .option-label-text,
#question-fieldset:has(.question-visual:not([hidden])) .option-label-text {
  grid-area: label;
  display: block;
  width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.35;
  text-align: center;
}
.option svg,
.option-visual {
  display: block;
  width: min(100%, 150px);
  max-width: 100%;
  height: auto;
  max-height: 92px;
  margin-inline: auto;
}
.question-error { margin: 1rem 0 0; color: var(--danger); font-weight: 750; }
.question-actions,
.payment-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .8rem;
  margin-top: 1.5rem;
}
.question-actions .button[hidden] + .button { grid-column: auto; }

.level-complete-panel { border-top: 6px solid var(--violet); }
.free-summary {
  margin: 1.25rem 0;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 2px solid #82bfb5;
  border-radius: 14px;
  background: var(--teal-soft);
}
.free-summary h4 { margin: 0; font-size: 1.25rem; }
.free-summary-score { margin: .55rem 0 1rem; color: var(--navy-dark); font-size: clamp(2rem, 6vw, 3.3rem); font-weight: 900; line-height: 1; }
.free-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
}
.free-summary-grid article { min-width: 0; padding: .75rem; border: 1px solid #8dbfb7; border-radius: 10px; background: #fff; }
.free-summary-grid p { margin: .15rem 0; overflow-wrap: anywhere; }
.free-summary-grid strong { color: var(--teal); font-size: 1.2rem; }
.free-summary-limitation { margin-bottom: 0; color: var(--muted); }
.zero-charge-note { padding: .75rem .9rem; border-left: 4px solid var(--teal); background: var(--soft); font-weight: 720; }
.level-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }

.payment-panel { border-top: 6px solid var(--teal); }
.payment-lede { font-size: 1.12rem; font-weight: 720; }
.result-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 1.2rem 0;
}
.result-comparison section { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.result-comparison section:first-child { border-color: #8dbfb7; background: var(--teal-soft); }
.result-comparison h4 { margin: 0 0 .45rem; }
.result-comparison ul { margin: 0; padding-left: 1.2rem; }
.report-includes {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  background: var(--soft);
}
.report-includes h4 { margin: 0 0 .5rem; }
.report-includes ul { margin: .25rem 0 0; padding-left: 1.25rem; }
.payment-disclosure { padding: 1rem; border-left: 4px solid var(--teal); background: var(--teal-soft); }
.payment-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payment-actions .button { width: 100%; }
.checkout-account {
  min-width: 0;
  margin-top: 1.25rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 2px solid #9bb0c4;
  border-radius: 14px;
  background: #eef4fa;
}
.checkout-account h4 { margin: 0 0 .35rem; font-size: 1.15rem; }
.checkout-account p { overflow-wrap: anywhere; }
.checkout-account > .button { margin-top: .6rem; }
.checkout-account [data-state="success"] { color: var(--teal); font-weight: 750; }
.checkout-account [data-state="error"] { color: var(--danger); font-weight: 750; }
.payment-confirmation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #9bb0c4;
}
.payment-confirmation > div { min-width: 0; }
.payment-confirmation h4,
.payment-confirmation p { margin: .2rem 0; }
.payment-confirmation .button { width: 100%; }
.text-button {
  min-height: 44px;
  margin-top: .75rem;
  padding-inline: 0;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

.report-panel { width: min(940px, 100%); }
.score-card {
  padding: 1.25rem;
  border-radius: 14px;
  color: #fff;
  background: var(--navy);
}
.score-card .row-label { color: #bfe3da; }
.score-card p { margin: .25rem 0; }
.report-score { font-size: clamp(2.1rem, 6vw, 3.8rem); font-weight: 900; line-height: 1; }
.report-expiry { padding: .8rem 1rem; border: 1px solid #a8d4cd; border-radius: 10px; background: var(--teal-soft); font-weight: 720; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.category-card { min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.category-card p { margin: .2rem 0; overflow-wrap: anywhere; }
.category-score { color: var(--teal); font-size: 1.35rem; font-weight: 850; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.3rem; }
.report-grid section,
.preferences-report { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.report-grid h4,
.preferences-report h4 { margin-top: 0; }
.report-grid li,
.preferences-report li { margin: .35rem 0; overflow-wrap: anywhere; }
.preferences-report { margin-top: 1rem; background: var(--violet-soft); }
.report-limitation { margin-top: 1.2rem; padding: 1rem; border-left: 4px solid var(--navy); background: #eef4fa; }

.method,
.privacy,
.faq { padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--line); }
.method h2,
.privacy h2,
.faq h2 { margin-top: 0; }
.method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.method-grid article { min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.method-grid h3 { margin: .35rem 0; }
.method-number { color: var(--teal); font-weight: 900; }
.privacy { max-width: 860px; }
details { padding: 1rem 0; border-bottom: 1px solid var(--line); }
summary { font-weight: 820; cursor: pointer; }
footer { padding: 2rem 1rem; color: #dce7f2; background: var(--navy-dark); text-align: center; }
footer a { color: #fff; }

@media (max-width: 980px) {
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .price-card { width: min(100%, 460px); }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-grid { grid-template-columns: 1fr; }
  .timer-choice-grid,
  .theme-choice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 660px) {
  .level-stepper { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  main { width: min(100% - 1rem, 1160px); }
  .topbar { align-items: flex-start; }
  .topbar nav { flex-direction: column; gap: .25rem; }
  .panel { border-radius: 12px; }
  .auth-row { align-items: stretch; flex-direction: column; }
  .auth-row .button,
  .auth-row a.button { width: 100%; min-width: 0; white-space: normal; }
  .progress-row { grid-template-columns: 1fr; gap: .35rem; }
  .question-timer {
    top: max(.25rem, env(safe-area-inset-top));
    align-items: flex-start;
    width: calc(100% - .7rem);
    padding: .65rem .75rem;
  }
  .question-timer > div { flex-direction: column; gap: .15rem; }
  #timer-mode-status { max-width: 58%; font-size: .78rem; line-height: 1.3; }
  .sports-focus { grid-template-columns: 1fr; }
  .free-paid-note,
  .free-summary-grid,
  .result-comparison { grid-template-columns: 1fr; }
  .question-actions,
  .payment-actions,
  .setup-actions,
  .payment-confirmation,
  .report-grid,
  .category-grid { grid-template-columns: 1fr; }
  .question-actions .button,
  .payment-actions .button,
  .setup-actions .button,
  .checkout-account > .button,
  .payment-confirmation .button,
  .level-actions .button { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .question-actions {
    position: sticky;
    z-index: 5;
    bottom: 0;
    margin-inline: -.35rem;
    padding: .65rem .35rem max(.65rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -10px 24px rgba(10, 49, 88, .08);
  }
}

@media (max-width: 400px) {
  main { width: min(100% - .75rem, 1160px); }
  .topbar { gap: .65rem; padding-inline: .75rem; }
  .topbar nav { font-size: .92rem; }
  .hero { padding-top: 2.75rem; }
  .panel { padding: 1rem .85rem; }
  .level-stepper li { padding: .75rem; }
  .option { padding: .8rem .75rem; }
  .button { min-height: 48px; padding-inline: .8rem; }
  .checkout-account { padding: .9rem .8rem; }
  .question-visual { min-height: 180px; padding: .55rem; }
  .option-list[data-layout="visual"] .option,
  .option-list.visual-options .option,
  #question-fieldset:has(.question-visual:not([hidden])) .option { min-height: 96px; padding: .7rem .55rem; }
}

@media (max-width: 320px) {
  .option-list[data-layout="visual"],
  .option-list.visual-options,
  #question-fieldset:has(.question-visual:not([hidden])) .option-list { grid-template-columns: 1fr; }
  .question-timer { flex-direction: column; }
  #timer-mode-status { max-width: none; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  summary:focus-visible,
  [tabindex="-1"]:focus { outline: 3px solid Highlight; box-shadow: none; }
  .price-card,
  .panel,
  .option,
  .boundary-notice { border: 2px solid CanvasText; }
  .button { border: 2px solid ButtonText; }
}
:root:lang(hi), :root:lang(te), :root:lang(ml), :root:lang(ta), :root:lang(kn) {
  font-synthesis: none;
}
.iq-language-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0; padding: 1rem 1.25rem; border: 1px solid #cbd5e1; border-radius: 1rem; background: #f8fafc; color: #16324f; }
.iq-language-bar label { display: block; font-weight: 750; font-size: 1rem; }
.iq-language-bar p { margin: .35rem 0 0; font-size: .85rem; line-height: 1.6; max-width: 52rem; }
.iq-language-bar select { min-height: 48px; min-width: 11rem; max-width: 100%; padding: .6rem 2rem .6rem .8rem; border: 1px solid #64748b; border-radius: .7rem; background: #fff; color: #16324f; font: inherit; }
.iq-language-bar select:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.iq-language-bar select:disabled { opacity: .7; cursor: default; }
html:not([lang="en"]) body { font-family: "Nirmala UI", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Telugu", "Noto Sans Malayalam", "Noto Sans Tamil", "Noto Sans Kannada", system-ui, sans-serif; }
html:not([lang="en"]) :is(p, label, button, small, li, legend, summary) { line-height: 1.65; }
html:not([lang="en"]) :is(h1, h2, h3, h4) { line-height: 1.45; letter-spacing: normal; }
/* Indic words can exceed a narrow card even with the correct script fonts.
   Wrap the text itself rather than clipping the page or its focus rings. */
html:not([lang="en"]) :is(h1, h2, h3, h4, p, label, small, li, legend, summary, a) { overflow-wrap: anywhere; }
.topbar nav a { min-width: 0; max-width: 100%; }
html:not([lang="en"]) :is(button, .button, .section-badge, .option-label) { white-space: normal; overflow-wrap: anywhere; }
html:not([lang="en"]) .option-copy { min-width: 0; }
@media (max-width: 480px) { .iq-language-bar select { width: 100%; } .iq-language-bar { padding: .9rem; } }

/* The start card stays task-first; optional reading follows the free action. */
main { width: min(1160px, calc(100% - 3rem)); }
body[data-iq-guest="true"] {
  --ink: #18201d; --muted: #56615c; --navy: #2747af; --navy-dark: #172b62;
  --teal: #246454; --teal-soft: #edf5ef; --line: #dbe2da;
  --focus: #2747af; --soft: #f5f7f2;
  --shadow: 0 18px 54px rgba(29, 48, 35, .07);
  background: #f5f6f0;
}
body[data-iq-guest="true"] .topbar { background: #121915; }
.topbar { min-height: 72px; padding-block: .9rem; }
.topbar .brand { display: inline-flex; align-items: center; gap: .65rem; line-height: 1.25; }
.topbar .brand img { display: block; flex: 0 0 auto; }
.topbar nav a { display: inline-flex; align-items: center; min-height: 44px; }
.iq-play-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding: 3rem 0 3.5rem; }
.iq-play-layout > * { min-width: 0; }
.hero, body[data-iq-guest="true"] .hero { display: block; max-width: none; margin: 0; padding: 2rem 0 0; }
.hero .eyebrow { font-size: .72rem; letter-spacing: .1em; }
.hero h1 { font-size: clamp(3rem, 5.3vw, 4.6rem); line-height: 1.06; }
body[data-iq-guest="true"] h1 { color: #18201d; }
.hero .lede, body[data-iq-guest="true"] .hero .lede { max-width: 25rem; margin: 1rem 0 0; color: var(--muted); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 500; line-height: 1.5; }
.iq-preview-art { position: relative; min-height: 235px; margin: 2.3rem 0 0; padding: 3.7rem 1.5rem 2rem; overflow: hidden; border-radius: 26px; background: radial-gradient(ellipse at 80% 10%, #34483b, transparent 60%), #18271e; box-shadow: 0 20px 45px #162d1e14; }
.iq-preview-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px); background-size: 30px 30px; }
.iq-preview-orbit { position: absolute; width: 220px; height: 220px; right: -80px; bottom: -140px; border: 32px solid #d5ef6d; border-radius: 50%; }
.iq-preview-sequence { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.iq-preview-sequence span { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid #ffffff32; border-radius: 15px; background: #f5f7f0; color: #1e2b24; font-size: clamp(1.8rem, 3.5vw, 2.7rem); font-weight: 760; line-height: 1; box-shadow: 0 8px 0 #00000020; }
.iq-preview-sequence span:last-child { border-color: #d5ef6d; background: #d5ef6d; transform: translateY(-.6rem) rotate(5deg); }
.iq-preview-mark { position: relative; display: flex; gap: 1.25rem; margin-top: 1.5rem; color: #b8cbbe; font-size: 1.3rem; font-weight: 600; }
.iq-entry-heading, #setup-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.challenge-wrap { margin-top: 0; padding: 0; }
.setup-panel { width: 100%; max-width: none; border-top: 0; padding: 0 clamp(1.25rem, 2.3vw, 2rem) clamp(1.25rem, 2.3vw, 2rem); border-radius: 0 0 24px 24px; }
.setup-panel .no-account-callout { margin: 1.35rem 0 .9rem; padding: 0; border: 0; background: transparent; font-size: 1.2rem; }
.challenge-wrap > .iq-language-bar { max-width: none; margin: 0; padding: 1.1rem clamp(1.25rem, 2.3vw, 2rem); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: #fff; gap: .6rem; }
.iq-language-bar > div { flex: 1; min-width: 0; }
#iq-language-help { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.iq-language-bar select { width: auto; min-width: 9rem; max-width: 57%; font-size: .95rem; }
.iq-language-bar label { color: var(--muted); font-size: .88rem; }
.setup-panel .free-paid-note { display: block; margin: .85rem 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: .83rem; line-height: 1.5; }
.setup-panel .free-paid-note p { margin: .2rem 0; padding: 0; border: 0; background: transparent; }
.setup-panel .confirmation { margin: .9rem 0; padding: .85rem; border-color: var(--line); background: #fff; font-size: .87rem; line-height: 1.5; }
.setup-panel .confirmation:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.setup-panel .setup-actions { grid-template-columns: 1fr; gap: .35rem; margin-top: .85rem; }
.setup-panel #start-challenge { min-height: 56px; border-radius: 12px; }
body[data-iq-guest="true"] #start-challenge:not(:disabled) { border-color: #d2eb69; background: #d5ef6d; color: #16221b; box-shadow: 0 4px 0 #bbd352; }
.setup-panel .setup-actions .text-button { min-height: 44px; padding: .5rem; border-color: transparent; border-radius: 8px; font-size: .78rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.setup-panel #start-status:empty { min-height: 0; margin: 0; }
.iq-optional-settings, .iq-before-details { margin-top: .5rem; border-top: 1px solid var(--line); }
.iq-optional-settings > summary, .iq-before-details > summary { padding: .8rem 0; cursor: pointer; font-size: .88rem; font-weight: 650; min-height: 44px; }
.iq-optional-settings[open] { padding-bottom: .75rem; }
.challenge-wrap:has(#setup-panel:not([hidden])) > .level-stepper { display: none; }
/* Once play begins, give the question the full reading width. */
.iq-play-layout:has(#setup-panel[hidden]) { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 1.5rem; }
.iq-play-layout:has(#setup-panel[hidden]) > .hero { display: none; }
.challenge-panel { padding: clamp(1.2rem, 4vw, 2.75rem); border-radius: 22px; }
.question-timer { width: min(940px, 100%); border-width: 1px; box-shadow: none; }
body[data-iq-guest="true"] .button.primary:not(:disabled) { background: #2747af; border-color: #2747af; }
body[data-iq-guest="true"] .level-stepper li[data-state="current"] { background: #edf2ff; border-color: #8294cd; }
#question-legend { font-size: clamp(1.3rem, 2.7vw, 1.85rem); line-height: 1.45; }
.option-list[data-layout="text"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.option { min-height: 64px; align-items: center; padding: 1rem 1.1rem; border-radius: 14px; transition: border-color .12s, background-color .12s; }
.option input { width: 1.2rem; height: 1.2rem; accent-color: #2747af; }
.option:hover { border-color: #9baab1; background: #f8faf7; }
.option:has(input:checked) { border-color: #2747af; background: #edf2ff; box-shadow: inset 0 0 0 1px #2747af; }
.option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.question-actions { margin-top: 1.6rem; }
.question-actions .button { min-height: 52px; border-radius: 12px; }
.report-price-details { margin: 1.5rem 0; }
.report-price-details .price-card { max-width: none; box-shadow: none; }
.boundary-notice, .privacy, .method, .faq, .report-price-details { max-width: 940px; margin-inline: auto; }
@media (max-width: 900px) {
  .iq-play-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem; }
  .hero h1 { font-size: 3rem; }
  .iq-preview-art { min-height: 200px; padding: 3rem 1rem 1.5rem; }
  .iq-preview-sequence { gap: .4rem; }
  .iq-preview-sequence span { border-radius: 10px; font-size: 1.6rem; }
}
@media (max-width: 720px) {
  main { width: min(100% - 2rem, 600px); }
  .iq-play-layout { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; padding: 1.65rem 0 2rem; }
  .hero, body[data-iq-guest="true"] .hero { padding: 0; }
  .hero h1 { font-size: 2.75rem; }
  .hero .eyebrow { margin-bottom: .5rem; font-size: .65rem; letter-spacing: .065em; }
  body[data-iq-guest="true"] .hero .lede { max-width: none; margin-top: .65rem; font-size: 1.1rem; }
  .iq-preview-art { display: none; }
  .setup-panel { padding: 0 1.2rem 1.2rem; border-radius: 0 0 20px 20px; }
  .setup-panel .no-account-callout { margin-top: 1rem; font-size: 1.1rem; }
  .setup-panel .free-paid-note { font-size: .82rem; }
  .option-list[data-layout="text"] { grid-template-columns: 1fr; }
  .topbar { gap: .8rem; padding: .65rem 1rem; font-size: .85rem; }
  .topbar .brand { max-width: 59%; font-size: .86rem; }
  .topbar .brand img { width: 30px; height: 30px; }
  .topbar nav { gap: .7rem; }
}
@media (max-width: 400px) {
  main { width: calc(100% - 1.4rem); }
  .topbar { gap: .65rem; padding-inline: .7rem; }
  .topbar nav { gap: .5rem; font-size: .75rem; }
  .topbar .brand { font-size: .8rem; gap: .45rem; }
  .hero h1 { font-size: 2.4rem; }
  .setup-panel { padding: 0 1rem 1rem; }
  .iq-language-bar select { min-width: 8.3rem; font-size: .85rem; }
  .iq-language-bar label { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .option { transition: none; } }
@media (forced-colors: active) {
  .option:has(input:checked) { border-color: Highlight; }
  .iq-preview-art { display: none; }
  .setup-panel .confirmation, .setup-panel .free-paid-note { border-color: CanvasText; }
}

.challenge-wrap:has(#setup-panel[hidden]) > .iq-language-bar { width: min(940px, 100%); margin: 0 auto 1rem; border: 1px solid var(--line); border-radius: 14px; }