body { font-family: var(--body); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #27674a; outline-offset: 4px; }
button:disabled { cursor: not-allowed; opacity: .48; }
h1:focus { outline: none; }
.level-picker > span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.hero-copy .home-instructions { font-family: inherit; font-size: 13px; line-height: 1.6; max-width: 490px; margin: 22px 0 14px; }
.home-chat { color: var(--ink); text-underline-offset: 4px; font-size: 13px; font-weight: 700; line-height: 1.6; }
.home-paper-check { display: block; margin-top: 8px; color: #27674a; }
.home-shell footer .brand { background: transparent; color: var(--ink); padding: 0; }
.hero { padding-top: 50px; }
.hero-copy small { line-height: 1.6; }
.hero-video { max-width: 560px; margin: 22px 0 26px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(24, 34, 67, .14); }
.hero h1 em, .steps h2 em { color: #326548; }
.source-note { font-size: 12px; color: #526067; line-height: 1.8; margin: 28px 0 0; }
.source-note a { color: #27674a; text-underline-offset: 3px; }
.scope-note { max-width: 1184px; margin: 0 auto 64px; padding: 30px; border: 1px solid #b9b5ab; background: var(--paper); }
.scope-note h2 { font-family: var(--display); font-size: 25px; font-weight: 400; }
.scope-note > p { font-size: 14px; line-height: 1.8; max-width: 900px; }
.coverage-toggle { text-decoration: underline; text-underline-offset: 4px; }
.topic-coverage { max-width: 1184px; margin: -40px auto 65px; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; background: var(--paper); border: 1px solid #b9b5ab; }
.topic-coverage article { padding: 16px 0; border-bottom: 1px solid #d7d1c6; }
.topic-coverage h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; }
.topic-coverage p { font-size: 13px; line-height: 1.6; }
.topic-coverage small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.question-labels { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.question-count { font-weight: 700; font-size: 13px; white-space: nowrap; }
.question-card h1 { font-size: clamp(23px, 3.5vw, 36px); line-height: 1.35; }
.options button { transition: background .15s ease, box-shadow .15s ease; }
.options button.selected { background: #e3efdf; border-color: #326548; box-shadow: inset 0 0 0 1px #326548; }
.options button.selected b { background: #326548; color: white; }
.question-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 25px; }
.confidence { border: 0; border-top: 1px solid #d7d1c6; padding: 22px 0 0; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.confidence legend { font-size: 12px; font-weight: 800; padding-right: 12px; }
.confidence label { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid #c5c1b8; border-radius: 4px; font-size: 13px; cursor: pointer; }
.confidence label.checked { border-color: #326548; background: #e3efdf; }
.confidence input { accent-color: #326548; width: 17px; height: 17px; }
.chart-figure { max-width: 420px; margin: 20px auto 28px; padding: 12px; border: 1px solid #d7d1c6; background: #fffdf8; }
.chart-figure svg { width: 100%; display: block; color: var(--ink); }
.chart-figure figcaption { text-align: center; font-size: 12px; line-height: 1.6; color: #526067; }
.data-table { border-collapse: collapse; width: 100%; max-width: 380px; margin: 22px auto; font-size: 14px; }
.data-table caption { text-align: left; margin-bottom: 10px; font-weight: 700; }
.data-table th, .data-table td { border: 1px solid #b9b5ab; padding: 12px; text-align: left; }
.data-table thead { background: #e8e3d7; }
.snapshot-caution { border-left: 4px solid #c9a55c; background: #f6f0e0; padding: 20px; margin-top: 24px; }
.snapshot-caution p { font-size: 13px; line-height: 1.8; margin-bottom: 0; }
.focus-section, .home-plan, .answer-review { margin-top: 45px; }
.focus-section h2, .home-plan h2, .answer-review h2 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.2; }
.focus-list { display: grid; gap: 16px; }
.focus-card { padding: 25px; border: 1px solid #d2c4b2; border-left: 4px solid #c27b50; background: #fff9f0; }
.focus-card.uncertain { border-left-color: #a48a38; background: #faf7e8; }
.focus-header { display: flex; gap: 16px; align-items: flex-start; }
.focus-number { font-family: var(--display); font-size: 30px; color: #99764c; }
.focus-header small { text-transform: uppercase; font-size: 9px; letter-spacing: .08em; font-weight: 800; }
.focus-header h3 { font-family: var(--display); font-size: 22px; font-weight: 400; margin: 7px 0 15px; }
.focus-card dl { margin: 0; display: grid; grid-template-columns: 160px 1fr; column-gap: 20px; row-gap: 12px; }
.focus-card dt { font-size: 12px; font-weight: 800; line-height: 1.8; }
.focus-card dd { margin: 0; font-size: 13px; line-height: 1.8; color: #435259; }
.all-correct { padding: 25px; background: #e6efe3; border: 1px solid #a0b497; font-size: 14px; line-height: 1.8; }
.home-plan { background: #f0ede4; padding: 28px; border-top: 2px solid var(--ink); }
.home-plan ol { padding-left: 22px; margin-bottom: 0; }
.home-plan li { padding: 12px 0; font-size: 14px; line-height: 1.8; }
.home-plan li + li { border-top: 1px solid #d7d1c6; }
.recommendation-card { background: #e3eddf; border: 1px solid #a9b6a3; }
.recommendation-head > div { min-width: 0; }
.recommendation-card .chat-disclosure { margin-top: 14px; font-size: 12px; }
.recommendation-card .programme-note { margin-top: 14px; }
.support-summary { list-style: none; padding: 0; margin: 22px 0; }
.support-summary li { padding: 16px 0; border-bottom: 1px solid #bfcbb9; }
.support-summary li:first-child { border-top: 1px solid #bfcbb9; }
.support-summary li > b { display: block; margin-bottom: 7px; font-size: 14px; }
.support-summary li p + p { margin-top: 7px; }
.recommendation-card .step-actions a { white-space: normal; }
.recommendation-card .step-actions a.whatsapp-cta { background: #27674a; color: white; font-size: 14px; line-height: 1.5; white-space: normal; }
.recommendation-card .step-actions button { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.recommendation-card .step-actions .paper-check { flex-basis: 100%; margin: 0 0 6px; }
.recommendation-card .step-actions .paper-check h4 { font-family: var(--display); font-size: 19px; text-transform: none; letter-spacing: 0; }
.recommendation-card .step-actions .paper-check a.october-offer-cta { background: #27674a; }
.answer-review details { margin: 10px 0; border: 1px solid #d1ccbf; }
.answer-review summary { cursor: pointer; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; }
.answer-review summary:before { content: '+'; font-size: 20px; }
.answer-review details[open] summary:before { content: '−'; }
.answer-review summary > span { flex: 1; font-size: 14px; font-weight: 700; }
.answer-review summary > b { font-size: 11px; color: #326548; white-space: nowrap; }
.answer-review .incorrect summary > b { color: #925734; }
.review-content { padding: 0 22px 20px; font-size: 14px; line-height: 1.8; }
.review-prompt { font-family: var(--display); font-size: 19px; }
.exit-dialog { width: min(440px, calc(100% - 36px)); padding: 28px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.exit-dialog::backdrop { background: #17252d90; }
.exit-dialog h2 { font-family: var(--display); font-weight: 400; }
.exit-dialog p { font-size: 14px; line-height: 1.7; }
@media (max-width: 800px) {
  .test-meta { display: flex; font-size: 11px; gap: 5px; }
  .test-head { flex-wrap: wrap; height: auto; min-height: 85px; gap: 12px; padding: 16px; }
  .test-meta { margin-left: auto; }
  .scope-note { margin: 0 20px 45px; padding: 22px; }
  .topic-coverage { margin: -35px 20px 45px; grid-template-columns: 1fr; }
  .focus-card dl { grid-template-columns: 1fr; gap: 4px; }
  .focus-card dd { margin-bottom: 12px; }
  .focus-card, .home-plan { padding: 20px; }
}
@media (max-width: 480px) {
  .recommendation-head { flex-direction: column; gap: 12px; }
  .test-head .brand { font-size: 12px; }
  .test-head .brand img { width: 30px; height: 30px; }
  .test-meta b { font-size: 10px; }
  .question-actions .primary { padding: 14px 16px; font-size: 12px; }
  .confidence { flex-direction: column; }
  .answer-review summary { flex-wrap: wrap; padding: 14px; gap: 8px; }
  .answer-review summary > b { margin-left: 24px; }
  .report-title > span { display: none; }
  .result-hero .score-ring strong { font-size: 40px; }
}
@media print {
  body { background: white; }
  .simple-nav, .step-actions, .exit-dialog { display: none !important; }
  .report { margin: 0; padding: 0; border: 0; }
  .result-hero { padding: 20px 0; }
  .focus-card, .home-plan, .recommendation-card, .answer-review details { break-inside: avoid; }
  .answer-review details > .review-content { display: block !important; }
  .source-note a { color: inherit; }
}

/* Brand theme · colours, type and sticker style sampled from the GYM Math Hub logo */
:root {
  --sky: #4A90D9; --orange: #FF6A00; --teal: #0A93C2; --sun: #F2D640; --ink: #2E2E2E; --white: #FFFFFF; --cloud: #EEF6FD;
  --sky-tint: #DCEBFB; --orange-tint: #FFE3CF; --teal-tint: #D2EFF9; --sun-tint: #FFF6C7;
  --teal-ink: #06698C; --orange-ink: #B84A00; --sky-ink: #2F6DB3; --sun-ink: #806500;
  --cream: var(--cloud); --paper: var(--white); --lime: var(--sun); --purple: var(--teal-ink);
  --display: 'Baloo 2', 'Nunito', system-ui, sans-serif; --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sticker: 5px 5px 0 rgba(46, 46, 46, .9); --sticker-sm: 3px 3px 0 rgba(46, 46, 46, .9);
  --outline-text: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 2px 2px 0 var(--ink);
  --doodle-white-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.22' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 52 Q42 49 66 53 M42 30 Q45 52 43 76'/%3E%3Cpath d='M118 40 Q121 22 137 23 Q155 26 149 44 Q141 58 116 78 L154 76'/%3E%3Cpath d='M210 30 L246 70 M246 30 L208 70'/%3E%3Cpath d='M40 140 Q64 137 88 141 M40 160 Q64 157 88 161'/%3E%3Cpath d='M150 126 L162 116 L161 176 M146 176 L176 175'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-white-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.22' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 50 Q50 47 76 51'/%3E%3Ccircle cx='50' cy='32' r='3'/%3E%3Ccircle cx='50' cy='68' r='3'/%3E%3Cpath d='M124 30 Q144 16 158 32 Q162 46 142 50 Q166 54 160 72 Q148 90 122 76'/%3E%3Cpath d='M212 52 Q236 48 262 53'/%3E%3Cpath d='M60 130 L60 170 M40 150 Q60 148 80 151'/%3E%3Cpath d='M150 140 L186 176 M186 140 L150 176'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-sky-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'%3E%3Cg fill='none' stroke='%234A90D9' stroke-opacity='0.16' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 52 Q42 49 66 53 M42 30 Q45 52 43 76'/%3E%3Cpath d='M118 40 Q121 22 137 23 Q155 26 149 44 Q141 58 116 78 L154 76'/%3E%3Cpath d='M210 30 L246 70 M246 30 L208 70'/%3E%3Cpath d='M40 140 Q64 137 88 141 M40 160 Q64 157 88 161'/%3E%3Cpath d='M150 126 L162 116 L161 176 M146 176 L176 175'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-sky-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'%3E%3Cg fill='none' stroke='%234A90D9' stroke-opacity='0.16' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 50 Q50 47 76 51'/%3E%3Ccircle cx='50' cy='32' r='3'/%3E%3Ccircle cx='50' cy='68' r='3'/%3E%3Cpath d='M124 30 Q144 16 158 32 Q162 46 142 50 Q166 54 160 72 Q148 90 122 76'/%3E%3Cpath d='M212 52 Q236 48 262 53'/%3E%3Cpath d='M60 130 L60 170 M40 150 Q60 148 80 151'/%3E%3Cpath d='M150 140 L186 176 M186 140 L150 176'/%3E%3C/g%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70' viewBox='0 0 90 70'%3E%3Cg fill='none' stroke='%232E2E2E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10 Q60 2 70 52'/%3E%3Cpath d='M56 42 L70 56 L80 38'/%3E%3C/g%3E%3C/svg%3E");
}
html, body { overflow-x: hidden; }
body { background: var(--cloud); color: var(--ink); font-family: var(--body); }
h1, h2, h3, h4, .eyebrow, .brand { font-family: var(--display); }
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; }
h1, h2, h3, h4 { line-height: 1.15; }
.eyebrow { color: var(--teal-ink); font-weight: 800; font-size: 12px; letter-spacing: .12em; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--teal-ink); }

/* Buttons */
.primary, .nav-links button, .home-shell footer button:not(.brand), .exit-dialog .primary {
  background: var(--orange); color: #fff; border: 3px solid var(--ink); border-radius: 99px; box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: .01em; text-shadow: var(--outline-text);
  transition: transform .12s ease, box-shadow .12s ease;
}
.primary { padding: 14px 26px; }
.nav-links button, .home-shell footer button:not(.brand) { padding: 10px 20px; }
.primary:hover:not(:disabled), .nav-links button:hover, .home-shell footer button:not(.brand):hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.primary:active:not(:disabled), .nav-links button:active, .home-shell footer button:not(.brand):active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.quiet, .recommendation-card .step-actions button, .recommendation-card .step-actions .teacher-link {
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 99px; box-shadow: var(--sticker-sm);
  font-family: var(--display); font-weight: 700; font-size: 15px; padding: 9px 18px; transition: transform .12s ease, box-shadow .12s ease;
}
.quiet:hover:not(:disabled), .recommendation-card .step-actions button:hover, .recommendation-card .step-actions .teacher-link:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.quiet:disabled { box-shadow: none; }
.coverage-toggle { text-decoration: none; }

/* Home · sky hero band */
.home-shell > nav, .hero { background-color: var(--sky); box-shadow: 0 0 0 100vmax var(--sky); clip-path: inset(0 -100vmax); color: #fff; }
.home-shell > nav { height: auto; min-height: 100px; padding-top: 14px; padding-bottom: 6px; }
.home-shell > nav .brand { color: #fff; font-size: 26px; font-weight: 800; line-height: 1.1; text-align: left; }
.home-shell > nav .brand img { width: 84px; height: 84px; border: 4px solid #fff; border-radius: 22px; transform: rotate(-3deg); box-shadow: var(--sticker); }
.nav-links a { color: #fff; font-family: var(--display); font-weight: 700; font-size: 19px; }
.hero { background-image: var(--doodle-white-a), var(--doodle-white-b); background-repeat: no-repeat; background-position: right 2% top 10px, left -40px bottom 10px; padding-bottom: 80px; }
.hero h1 { color: #fff; font-size: 66px; line-height: 1.12; letter-spacing: -.01em; }
.hero h1 em { color: #fff; font-style: normal; text-decoration: underline wavy var(--sun) 4px; text-underline-offset: 8px; }
.hero-copy > p { font-family: var(--body); color: #fff; font-size: 19px; font-weight: 700; }
.tag { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--sticker-sm); font-size: 13px; }
.tag i { background: var(--orange); }
.level-picker > span { color: #fff; font-family: var(--display); font-size: 20px; letter-spacing: .04em; }
.level-picker > div { background: transparent; padding: 0; gap: 10px; }
.level-picker button { width: 58px; height: 58px; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 50%; box-shadow: var(--sticker-sm); font-family: var(--display); font-weight: 800; font-size: 19px; transition: transform .12s ease, box-shadow .12s ease; }
.level-picker button:hover { transform: translateY(-2px); }
.level-picker button.active { background: var(--orange); color: #fff; text-shadow: var(--outline-text); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hero-copy small { display: inline-block; margin-top: 16px; padding: 6px 12px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; font-size: 13px; font-weight: 700; }
.hero-copy .home-instructions { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--sticker-sm); padding: 14px 16px; font-size: 14px; font-weight: 600; }
.home-chat, .home-paper-check, .home-classes { display: table; margin-top: 10px; padding: 8px 16px; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 99px; box-shadow: var(--sticker-sm); font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.45; }
.home-paper-check { background: var(--sun); }
.home-chat:hover, .home-paper-check:hover, .home-classes:hover { text-decoration: underline; text-underline-offset: 3px; }
.orbit { border: 2px dashed rgba(255, 255, 255, .5); }
.orbit:before { background: var(--sun); }
.orbit:after { background: var(--orange); }
.compass-wrap { min-height: 0; padding: 40px 0; }
.sample-phone { position: relative; width: 320px; max-width: calc(100% - 24px); padding: 12px; background: var(--ink); border: 3px solid var(--ink); border-radius: 40px; box-shadow: 8px 8px 0 rgba(46, 46, 46, .55); transform: rotate(-2deg); pointer-events: none; user-select: none; color: var(--ink); }
.sample-phone::before { content: ''; position: absolute; z-index: 1; top: 18px; left: 50%; width: 70px; height: 8px; border-radius: 99px; background: var(--ink); transform: translateX(-50%); }
.sample-sticker { position: absolute; z-index: 2; top: -16px; right: -10px; padding: 6px 14px; background: var(--orange); color: #fff; text-shadow: var(--outline-text); border: 3px solid var(--ink); border-radius: 99px; box-shadow: var(--sticker-sm); font-family: var(--display); font-weight: 800; font-size: 16px; transform: rotate(6deg); }
.sample-screen { overflow: hidden; background: var(--cloud); border-radius: 30px; }
.sample-hero { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 34px 16px 16px; background-color: var(--sky); border-bottom: 3px solid var(--ink); }
.sample-chip { padding: 4px 9px; background: #fff; border: 2px solid var(--ink); border-radius: 99px; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .06em; line-height: 1.3; }
.sample-ring { flex-shrink: 0; width: 92px; height: 92px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--orange) 216deg, var(--sky-tint) 0); border: 3px solid var(--ink); box-shadow: var(--sticker-sm); }
.sample-ring::before { content: ''; position: absolute; inset: 11px; background: #fff; border: 2.5px solid var(--ink); border-radius: 50%; }
.sample-ring div { position: relative; text-align: center; line-height: 1; }
.sample-ring strong { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; }
.sample-ring span { font-size: 8px; font-weight: 700; color: #444; }
.sample-skills { margin: 12px; padding: 4px 12px; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; }
.sample-skill { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; column-gap: 8px; row-gap: 4px; padding: 7px 0; }
.sample-skill + .sample-skill { border-top: 1.5px dashed #d5e3f2; }
.sample-skill .skill-icon { grid-row: span 2; width: 26px; height: 26px; border-width: 2px; font-size: 10px; }
.sample-skill b { font-family: var(--display); font-size: 12px; line-height: 1.1; }
.sample-skill strong { font-family: var(--display); font-size: 12px; }
.sample-bar { grid-column: 2 / 4; height: 8px; background: var(--sky-tint); border: 1.5px solid var(--ink); border-radius: 99px; overflow: hidden; }
.sample-bar i { display: block; height: 100%; }
.sample-bar.purple i { background: var(--orange); }
.sample-bar.orange i { background: var(--teal); }
.sample-bar.blue i { background: var(--sky); }
.sample-bar.green i { background: var(--sun); }
.sample-focus { margin: 0 12px 12px; padding: 10px 12px; background: #fff; border: 2.5px solid var(--ink); border-left: 8px solid var(--orange); border-radius: 14px; box-shadow: var(--sticker-sm); }
.sample-focus small { display: block; color: var(--orange-ink); font-family: var(--display); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.sample-focus b { display: block; font-family: var(--display); font-size: 15px; line-height: 1.2; margin: 2px 0 3px; }
.sample-focus p { margin: 0; font-size: 11px; line-height: 1.45; color: #3f3f3f; }
.sample-paper { position: relative; margin: 0 12px 16px; padding: 10px 50px 10px 12px; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: var(--sticker-sm); }
.sample-paper::after { content: ''; position: absolute; right: 8px; top: 6px; width: 36px; height: 28px; background: var(--arrow) no-repeat center / contain; transform: rotate(6deg); }
.sample-paper b { display: block; font-family: var(--display); font-size: 13px; line-height: 1.2; }
.sample-paper span { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; }

/* Home · sections */
.trust-strip { background: var(--ink); border-top: 3px solid var(--ink); }
.trust-title span { color: var(--sun); font-weight: 800; }
.trust-title small { font-family: var(--body); font-weight: 700; }
.trust-items b { font-family: var(--display); font-size: 17px; }
.steps { background-image: var(--doodle-sky-a); background-repeat: no-repeat; background-position: right 20px top 40px; }
.steps h2, .coverage h2 { font-weight: 800; letter-spacing: -.01em; font-size: 46px; }
.steps h2 em { color: var(--orange-ink); font-style: normal; }
.step-grid { border-top: 0; gap: 22px; }
.step-grid article, .step-grid article:last-child { margin: 0; padding: 26px; min-height: 0; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }
.step-grid span { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 50%; background: var(--sun); color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 800; }
.step-grid b { font-family: var(--display); font-weight: 800; font-size: 23px; margin: 18px 0 8px; }
.step-grid p { color: #4a4a4a; font-size: 15px; }
.coverage { background-color: var(--sky-tint); background-image: var(--doodle-sky-b); background-repeat: no-repeat; background-position: left 20px bottom 20px; }
.coverage > div:first-child > p:last-child { font-family: var(--body); color: #3f3f3f; font-size: 16px; }
.coverage-cards { border-top: 0; gap: 18px; }
.coverage-cards article, .coverage-cards article:nth-child(2n) { min-height: 0; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); transform: rotate(-.6deg); }
.coverage-cards article:nth-child(2n) { transform: rotate(.6deg); }
.coverage-cards span { display: inline-grid; place-items: center; min-width: 50px; height: 50px; padding: 0 8px; border: 3px solid var(--ink); border-radius: 16px; font-size: 22px; }
.coverage-cards article.purple span { background: var(--orange); }
.coverage-cards article.orange span { background: var(--teal); }
.coverage-cards article.blue span { background: var(--sky); }
.coverage-cards article.green span { background: var(--sun); }
.coverage-cards h3 { font-family: var(--display); font-size: 22px; margin: 16px 0 6px; }
.coverage-cards p { color: #4a4a4a; font-size: 14px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.topic-chips li { padding: 4px 11px; background: var(--cloud); border: 2px solid var(--ink); border-radius: 99px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.coverage-cards article.purple .topic-chips li { background: var(--orange-tint); }
.coverage-cards article.orange .topic-chips li { background: var(--teal-tint); }
.coverage-cards article.blue .topic-chips li { background: var(--sky-tint); }
.coverage-cards article.green .topic-chips li { background: var(--sun-tint); }
.scope-note, .topic-coverage { background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }
.scope-note h2 { font-size: 26px; }
.topic-coverage article { border-bottom: 2px dashed #b8cfe8; }
.topic-coverage h3 { font-size: 20px; }
.topic-coverage small { font-weight: 800; color: var(--teal-ink); }
.source-note a { color: var(--teal-ink); }
.home-shell footer .brand { font-size: 20px; }

/* Test */
.test-shell { background: var(--cloud); }
.test-head { background: #fff; border-bottom: 3px solid var(--ink); }
.test-meta b { font-family: var(--display); font-size: 17px; }
.test-meta span { color: #555; font-weight: 700; }
.progress { width: calc(100% - 36px); max-width: 750px; height: 16px; margin: 22px auto 0; background: var(--sky); border: 3px solid var(--ink); border-radius: 99px; overflow: hidden; }
.progress i { background: var(--sun); border-right: 3px solid var(--ink); border-radius: 0 99px 99px 0; }
.question-card { margin-top: 32px; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }
.domain-pill { font-family: var(--display); font-size: 13px; padding: 4px 12px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; }
.domain-pill.purple { color: var(--orange-ink); background: var(--orange-tint); }
.domain-pill.orange { color: var(--teal-ink); background: var(--teal-tint); }
.domain-pill.blue { color: var(--sky-ink); background: var(--sky-tint); }
.domain-pill.green { color: var(--sun-ink); background: var(--sun-tint); }
.question-count { font-family: var(--display); font-size: 16px; }
.question-card .eyebrow { margin-top: 30px; }
.question-card h1 { font-weight: 800; font-size: clamp(23px, 3.4vw, 32px); line-height: 1.3; color: var(--ink); }
.options { gap: 14px; }
.options button { min-height: 62px; padding: 12px 16px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--sticker-sm); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.options button:hover, .options button:focus { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.options button b { flex-shrink: 0; width: 42px; height: 42px; border: 2.5px solid var(--ink); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 19px; }
.options button:nth-child(4n+1) b { background: var(--sky); }
.options button:nth-child(4n+2) b { background: var(--orange); }
.options button:nth-child(4n+3) b { background: var(--teal); }
.options button:nth-child(4n+4) b { background: var(--sun); }
.options button span { font-family: var(--body); font-weight: 700; font-size: 18px; }
.options button.selected { background: var(--sun); border-color: var(--ink); box-shadow: var(--sticker-sm); }
.options button.selected b { color: var(--ink); }
.confidence { border-top: 2px dashed #b8cfe8; gap: 12px; }
.confidence legend { font-family: var(--display); font-size: 16px; }
.confidence label { padding: 11px 18px; background: #fff; border: 3px solid var(--ink); border-radius: 99px; box-shadow: var(--sticker-sm); font-size: 15px; font-weight: 700; }
.confidence label.checked { background: var(--sun); border-color: var(--ink); }
.confidence input { accent-color: var(--ink); }
.tip { color: #555; font-size: 13px; font-weight: 600; }
.chart-figure { background: #fff; border: 3px solid var(--ink); border-radius: 18px; }
.data-table { border-collapse: separate; border-spacing: 0; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; }
.data-table th, .data-table td { border: 0; border-bottom: 1.5px solid #c9d9ea; }
.data-table thead { background: var(--sky-tint); }

/* Report */
.result-shell { background: var(--cloud); }
.result-hero { background-color: var(--sky); background-image: var(--doodle-white-a), var(--doodle-white-b); background-repeat: no-repeat; background-position: right 3% top 14px, left 2% bottom -10px; color: #fff; border-bottom: 3px solid var(--ink); }
.result-hero .eyebrow { display: inline-block; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 99px; padding: 4px 12px; }
.result-hero h1 { font-weight: 800; color: #fff; line-height: 1.1; }
.result-hero > div:last-child > p:last-child { color: #fff; font-size: 19px; font-weight: 700; }
.score-ring { background: conic-gradient(var(--orange) var(--score), var(--sky-tint) 0); border: 3px solid var(--ink); box-shadow: var(--sticker); }
.score-ring:before { inset: 22px; background: #fff; border: 3px solid var(--ink); }
.score-ring strong { font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1; }
.score-ring span { color: #444; font-weight: 700; font-size: 12px; }
.report { background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }
.report-title { border-bottom: 2px dashed #b8cfe8; }
.report-title h2 { font-size: 34px; }
.report-title > span { font-weight: 800; color: #555; }
.skill-list article { grid-template-columns: 48px 200px 1fr 48px; border-bottom: 2px dashed #d5e3f2; }
.skill-icon { width: 46px; height: 46px; border: 3px solid var(--ink); font-family: var(--display); font-size: 19px; font-weight: 800; }
.skill-icon.purple { background: var(--orange); }
.skill-icon.orange { background: var(--teal); }
.skill-icon.blue { background: var(--sky); }
.skill-icon.green { background: var(--sun); }
.skill-list article > div:nth-child(2) b { font-family: var(--display); font-size: 17px; }
.skill-list article > div:nth-child(2) span { color: #555; font-weight: 600; font-size: 13px; }
.skill-list article > strong { font-family: var(--display); font-size: 18px; }
.bar { height: 14px; background: var(--sky-tint); border: 2.5px solid var(--ink); }
.bar i { background: var(--orange); }
.snapshot-caution { background: var(--sun-tint); border: 3px solid var(--ink); border-radius: 18px; }
.snapshot-caution b { font-family: var(--display); font-size: 17px; }
.snapshot-caution p { font-size: 15px; font-weight: 600; }
.focus-section h2, .home-plan h2, .answer-review h2 { font-weight: 800; font-size: 30px; }
.focus-card { background: #fff; border: 3px solid var(--ink); border-left: 12px solid var(--orange); border-radius: 22px; box-shadow: var(--sticker); }
.focus-card.uncertain { background: #fff; border-left-color: var(--sun); }
.focus-number { font-family: var(--display); font-weight: 800; color: var(--orange-ink); }
.focus-card.uncertain .focus-number { color: var(--sun-ink); }
.focus-header small { font-size: 11px; color: #555; }
.focus-header h3 { font-size: 23px; }
.focus-card dt { font-family: var(--display); font-size: 15px; font-weight: 700; }
.focus-card dd { color: #3f3f3f; font-size: 15px; }
.all-correct { background: var(--sun-tint); border: 3px solid var(--ink); border-radius: 18px; }
.recommendation-card, .programme-step { background: var(--cloud); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }
.recommendation-head { border-bottom: 2px dashed #b8cfe8; }
.recommendation-head > span { background: var(--orange); color: #fff; text-shadow: var(--outline-text); border: 3px solid var(--ink); font-family: var(--display); font-size: 16px; }
.recommendation-head small { color: var(--teal-ink); font-size: 11px; }
.recommendation-head h3 { font-size: 26px; }
.diagnostic-summary p { color: #3f3f3f; font-size: 15px; }
.support-summary li, .support-summary li:first-child { border-color: #b8cfe8; border-style: dashed; border-width: 0 0 2px; }
.support-summary li:first-child { border-top-width: 2px; }
.support-summary li > b { font-family: var(--display); font-size: 17px; }
.recommendation-card .step-actions { gap: 12px; }
.recommendation-card .step-actions a.whatsapp-cta { background: #25D366; color: var(--ink); border: 3px solid var(--ink); border-radius: 99px; box-shadow: 4px 4px 0 var(--ink); font-family: var(--display); font-weight: 800; font-size: 17px; transition: transform .12s ease, box-shadow .12s ease; }
.recommendation-card .step-actions a.whatsapp-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.home-plan { background: var(--sky-tint); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }
.home-plan li { font-size: 15px; }
.home-plan li + li { border-top: 2px dashed #a9c6e6; }
.home-plan li b { font-family: var(--display); color: var(--orange-ink); font-size: 16px; }
.answer-review details { background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--sticker-sm); margin: 12px 0; }
.answer-review summary:before { display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--sky-tint); font-family: var(--display); font-weight: 800; font-size: 18px; }
.answer-review summary > span { font-family: var(--display); font-size: 16px; }
.answer-review summary > b { font-size: 12px; color: var(--teal-ink); }
.answer-review .incorrect summary > b { color: var(--orange-ink); }
.review-content { font-size: 15px; }
.review-prompt { font-family: var(--body); font-weight: 700; font-size: 18px; }
.simple-nav .brand { color: var(--ink); }

/* Stacked fractions */
.frac { display: inline-block; vertical-align: middle; margin: .12em .06em; line-height: 1; white-space: nowrap; }
.frac-whole { vertical-align: middle; margin-right: .1em; }
.frac-stack { display: inline-block; vertical-align: middle; text-align: center; font-size: .85em; line-height: 1.12; }
.frac-num, .frac-den { display: block; padding: 0 .18em; }
.frac-num { padding-bottom: .06em; border-bottom: 2px solid var(--ink); }
.frac-den { padding-top: .06em; }

/* Exit dialog */
.exit-dialog { background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }
.exit-dialog::backdrop { background: rgba(46, 46, 46, .55); }
.exit-dialog h2 { font-weight: 800; }

@media (max-width: 800px) {
  .home-shell > nav .brand img { width: 64px; height: 64px; border-radius: 18px; }
  .hero { padding-bottom: 56px; background-position: right -60px top 0, left -80px bottom 0; }
  .hero h1 { font-size: 46px; }
  .steps h2, .coverage h2 { font-size: 36px; }
  .question-card { margin-top: 24px; }
  .result-hero { justify-items: center; }
  .result-hero > div:last-child { justify-self: stretch; }
  .skill-list article { grid-template-columns: 46px 1fr 42px; }
}
@media (max-width: 480px) {
  .home-shell > nav .brand { font-size: 21px; gap: 10px; }
  .home-shell > nav .brand img { width: 58px; height: 58px; }
  .nav-links button { padding: 8px 12px; font-size: 15px; white-space: nowrap; }
  .home-shell > nav { gap: 10px; padding-left: 18px; padding-right: 18px; }
  .hero h1 { font-size: 40px; }
  .level-picker button { width: 54px; height: 54px; }
  .primary { font-size: 18px; padding: 13px 20px; }
  .question-actions .primary { font-size: 16px; padding: 12px 16px; }
  .question-actions button { white-space: nowrap; }
  .question-actions .quiet { padding: 9px 14px; }
  .report { padding: 18px; }
  .recommendation-card { padding: 16px; }
  .options button span { font-size: 17px; }
  .confidence label { width: 100%; }
  .coverage-cards article, .coverage-cards article:nth-child(2n) { padding: 20px; }
}
@media (max-width: 480px) {
  .test-head { flex-wrap: nowrap; min-height: 64px; gap: 10px; padding: 10px 14px; }
  .test-head .brand { flex-shrink: 0; gap: 0; font-size: 0; }
  .test-head .brand img { width: 40px; height: 40px; }
  .test-meta { flex: 1; min-width: 0; flex-direction: column; align-items: center; gap: 2px; margin: 0; text-align: center; }
  .test-meta b { font-size: 15px; line-height: 1.1; margin: 0; }
  .test-meta span { font-size: 12px; line-height: 1.2; margin: 0; }
  .test-head .quiet { flex-shrink: 0; padding: 6px 14px; font-size: 14px; white-space: nowrap; }
}
@media print {
  body, .result-shell { background: #fff; }
  .result-hero { background: #fff; color: var(--ink); border-bottom: 2px solid var(--ink); }
  .result-hero h1, .result-hero > div:last-child > p:last-child { color: var(--ink); }
  .report, .focus-card, .recommendation-card, .home-plan, .answer-review details, .score-ring { box-shadow: none; }
  .report { border: 0; }
}