/* TamzMaths shared styles */

/* Font hosted on our own site, so visitors' details are never sent to a third party.
   Plus Jakarta Sans, SIL Open Font License (see fonts/OFL-LICENSE.txt). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bg: #F7F5F0;
  --card: #FFFFFF;
  --ink: #1B1F2A;
  --ink-2: #3A4050;
  --muted: #5A6070;
  --line: #D9D5CC;
  --line-soft: #EEEAE2;
  --teal: #6D28D9;
  --teal-dark: #4C1D95;
  --teal-soft: #F1EAFF;
  --orange: #FACC15;
  --focus: #7C3AED;
  --orange-soft: #FEF7CD;
  --orange-ink: #6B4E00;
  --good-bg: #E6F4EC; --good: #17633F;
  --mid-bg: #FDF1DD; --mid: #8A5A0B;
  --bad-bg: #FBE6E2; --bad: #9C2F1E;
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); }
a:hover { color: var(--teal-dark); }
img { max-width: 100%; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 520px; margin: 0 auto; padding: 0 16px; }

/* header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.logo-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 20px; }
.nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a.btn, .nav a.btn:hover { color: #fff; min-height: 46px; padding: 0 20px; font-size: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: none; font: inherit; font-weight: 800; font-size: 17px; text-decoration: none; cursor: pointer; transition: transform .08s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-light { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost { background: transparent; color: var(--muted); font-weight: 700; }
.btn-block { width: 100%; border-radius: 16px; }
.btn[disabled] { background: #9AA19F; cursor: not-allowed; transform: none; }

.card { background: var(--card); border-radius: var(--radius); padding: 20px; }
.chip { display: inline-block; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.chip-teal { background: var(--teal-soft); color: var(--teal-dark); }
.chip-orange { background: var(--orange); color: var(--ink); }

/* home */
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 40px 0 64px; }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero h1 { margin: 0; font-size: clamp(38px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; }
.hero p.lead { margin: 0; font-size: 20px; color: #4A5060; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-side { flex: 1 1 340px; min-width: 0; }
.section { padding: 64px 0; }
.section-white { background: #fff; }
.section h2 { margin: 0 0 28px; font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.03em; font-weight: 800; line-height: 1.15; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.step { background: var(--bg); border-radius: 24px; padding: 26px; }
.step-num { width: 44px; height: 44px; border-radius: 12px; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 12px; }
.step h3 { margin: 0 0 6px; font-size: 21px; }
.step p { margin: 0; color: #4A5060; }

.about { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.photo { flex: 0 0 240px; height: 280px; border-radius: 28px; background: var(--orange-soft); border: 2px dashed #EBCB5A; display: grid; place-items: center; color: var(--orange-ink); font-weight: 700; text-align: center; padding: 20px; }
.about-copy { flex: 1 1 420px; min-width: 0; }

.beta { background: var(--ink); color: #fff; border-radius: 32px; padding: 40px 28px; display: flex; flex-wrap: wrap; gap: 32px; }
.beta h2 { color: #fff; margin-bottom: 10px; }
.beta p { color: #C9CDD6; margin: 0; }
.beta-copy { flex: 1 1 340px; min-width: 0; }
.beta form { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

label, .field-label { font-weight: 700; font-size: 15px; }
#steps { gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
input[type=text], input[type=email], select, .input {
  font: inherit; font-size: 18px; min-height: 52px; padding: 0 14px; border-radius: 14px;
  border: 2px solid var(--line); background: #fff; color: var(--ink); width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.beta label { color: #fff; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; color: #C9CDD6; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; }
.small { font-size: 14px; color: var(--muted); }
.footer { padding: 28px 0 40px; }

/* practice */
.practice { padding: 16px 0 40px; display: flex; flex-direction: column; gap: 14px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.topbar .eyebrow { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.topbar h1 { margin: 0; font-size: 22px; }
.stats { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stats .small { font-size: 12px; font-weight: 600; }

.question { background: var(--ink); color: #fff; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.question-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.question-label { font-size: 12px; font-weight: 700; color: var(--orange); letter-spacing: 0.04em; text-transform: uppercase; }
.question p { margin: 0; font-size: 19px; }

.form { display: flex; flex-direction: column; gap: 10px; }
.ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.op { min-height: 50px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.op[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.money { display: flex; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 0 14px; }
.money span { font-size: 20px; font-weight: 700; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.money input { border: none; min-height: 50px; font-size: 20px; font-weight: 700; padding-left: 8px; }
.money input:focus-visible { outline: none; }
.money:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.money.error { border-color: #C2412D; }
.error-text { color: var(--bad); font-weight: 700; font-size: 14px; margin: 0; }

.panel { border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.panel-mid { background: var(--mid-bg); }
.panel-good { background: var(--good-bg); }
.panel-bad { background: var(--bad-bg); }
.panel-white { background: #fff; }
.panel h2, .panel h3 { margin: 0; font-size: 16px; }
.scheme-line { display: flex; gap: 10px; align-items: flex-start; }
.code { flex: 0 0 34px; text-align: center; font-weight: 800; font-size: 12px; border-radius: 6px; padding: 3px 0; }
.code.got { background: var(--good-bg); color: var(--good); }
.code.lost { background: var(--bad-bg); color: var(--bad); }
.status-got { color: var(--good); font-weight: 700; font-size: 13px; }
.status-lost { color: var(--bad); font-weight: 700; font-size: 13px; }
.hint { display: flex; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 12px; }
.hint strong { display: block; font-size: 12px; color: var(--mid); letter-spacing: 0.04em; }
.score-row { display: flex; justify-content: space-between; align-items: center; }
.score-big { font-size: 28px; font-weight: 800; }
.confirm { background: #fff; border: 2px solid #EBCB5A; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.confirm .ops .btn { min-height: 48px; border-radius: 12px; font-size: 15px; }
.fingerprint { text-align: center; font-size: 12px; color: var(--muted); }
[hidden] { display: none !important; }

/* Tamz: the coach */
.coach { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 14px 16px; }
.coach-inline { background: rgba(255,255,255,0.7); padding: 12px 14px; }
.coach-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-ink); display: grid; place-items: center; font-weight: 800; }
.coach strong { display: block; font-size: 17px; }
.coach p { margin: 2px 0 0; font-size: 16px; color: var(--ink-2); }
.coach-milestone { font-weight: 700; color: var(--teal-dark) !important; }
.coach-sign { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.coach-sign::before { content: '— '; }
.retry-coach { margin: 0; font-weight: 600; }
.name-card { background: #fff; border-radius: 24px; padding: 22px 20px; margin: 8px 0 32px; display: flex; flex-direction: column; gap: 16px; }
.coach-row { display: flex; gap: 14px; align-items: flex-start; }
.name-card .coach-avatar { width: 52px; height: 52px; flex-basis: 52px; font-size: 22px; }
.greeting-card { margin-bottom: 4px; }
.link-button { background: none; border: none; padding: 8px 0 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--teal); cursor: pointer; text-decoration: underline; min-height: 32px; }

/* learn */
.eyebrow { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.lesson-page { padding: 8px 0 32px; display: flex; flex-direction: column; gap: 18px; }
.lesson-page h1 { margin: 4px 0 8px; font-size: 30px; line-height: 1.15; letter-spacing: -0.03em; }
.lesson-nav { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: var(--radius); padding: 14px 16px; }
.lesson-nav a { font-weight: 700; text-decoration: none; padding: 6px 0; }
.lesson { background: #fff; border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.lesson h2 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.lesson-num { font-size: 13px; font-weight: 800; color: var(--teal); letter-spacing: 0.04em; text-transform: uppercase; }
.lesson p, .lesson ol { margin: 0; }
.lesson ol { padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.big-idea, .example, .mistake { border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.big-idea { background: var(--teal-soft); }
.big-idea > strong { color: var(--teal-dark); font-size: 13px; letter-spacing: 0.04em; }
.example { background: var(--bg); }
.example > strong { color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
.mistake { background: var(--bad-bg); }
.mistake > strong { color: var(--bad); font-size: 13px; letter-spacing: 0.04em; }
.tip { font-size: 15px; color: var(--ink-2); }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: var(--bg); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
th { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* topic hub */
.stage { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 20px; padding: 16px; text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.stage:hover { border-color: var(--teal); color: var(--ink); }
.stage-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; }
.stage-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stage-body strong { font-size: 18px; }
.stage-body span { font-size: 14px; color: var(--muted); }
.stage-soon { opacity: 0.6; }

/* timer */
.timer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.timer-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.timer-chip.over { background: var(--mid-bg); color: var(--mid); }
.timer-row .link-button { padding: 4px 0; margin-left: auto; }
.result-time { margin: 0; font-size: 14px; font-weight: 700; color: var(--teal-dark); }
.result-time.over { color: var(--mid); }

/* ladder */
.ladder-banner { display: flex; gap: 12px; align-items: flex-start; border-radius: 18px; padding: 16px; margin-top: 12px; }
.ladder-banner.up { background: var(--good-bg); border: 2px solid #2E9E6A; }
.ladder-banner.down { background: var(--teal-soft); border: 2px solid var(--teal); }
.ladder-banner strong { display: block; font-size: 18px; }
.ladder-banner p { margin: 4px 0 12px; color: var(--ink-2); }
.ladder-banner .btn { min-height: 46px; font-size: 16px; }
.rung { position: relative; }
.rung-tag { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; align-self: flex-start; margin-top: 4px; }
.rung-tag.here { background: var(--ink); color: #fff; }
.rung-tag.done { background: var(--good-bg); color: var(--good); }
.check-card { background: var(--ink); color: #fff; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.check-card p { margin: 0; color: #C9CDD6; }
.check-card strong { font-size: 19px; }
.check-card .btn { align-self: flex-start; min-height: 46px; font-size: 16px; }
.check-scores { display: flex; gap: 18px; flex-wrap: wrap; }
.check-scores div { display: flex; flex-direction: column; }
.check-scores b { font-size: 28px; letter-spacing: -0.02em; color: #fff; }
.check-scores span { font-size: 13px; color: #C9CDD6; }
.section-bars { display: flex; flex-direction: column; gap: 10px; }
.section-bar { display: flex; flex-direction: column; gap: 4px; }
.section-bar div { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; }
.bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--teal); }

/* all-topics checklist */
.summary-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.summary { background: #fff; border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; }
.summary strong { font-size: 28px; letter-spacing: -0.02em; }
.summary span { font-size: 14px; color: var(--muted); }
.strand h2 { font-size: 20px; margin: 8px 0 10px; }
.topic-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 20px; }
.topic-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.topic-item:last-child { border-bottom: none; }
.topic-item input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--teal); cursor: pointer; }
.topic-label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-weight: 400; }
.topic-name { font-weight: 700; font-size: 16px; }
.topic-skills { font-size: 14px; color: var(--muted); line-height: 1.45; }
.topic-right { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.status-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.status-chip.ready { background: var(--good-bg); color: var(--good); }
.status-chip.partly { background: var(--teal-soft); color: var(--teal-dark); }
.status-chip.soon { background: var(--bg); color: var(--muted); }
.topic-go { font-weight: 700; font-size: 14px; }

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

/* symbol keys under algebra answer boxes */
.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.key { min-width: 44px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.key:active { background: var(--line); }
.key:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* letters in maths print in italics, like an exam paper, so x never looks like × */
var { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.08em; padding: 0 0.04em; }

/* longer choices (like the reason in a proof) stack one per row */
.ops.stack { grid-template-columns: 1fr; }
.ops.stack .op { text-align: left; padding: 12px 14px; font-weight: 700; line-height: 1.35; }

/* tables and diagrams inside a question */
.q-extra { display: flex; flex-direction: column; gap: 12px; }
.q-extra[hidden] { display: none; }
.q-table-wrap { overflow-x: auto; background: #fff; border-radius: 14px; padding: 4px; }
.q-table { border-collapse: collapse; width: 100%; color: var(--ink); font-size: 16px; }
.q-table caption { text-align: left; font-weight: 700; padding: 6px 8px; color: var(--ink); }
.q-table th, .q-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; }
.q-table th { background: #F6F2FF; font-weight: 700; }
.q-figure { width: 100%; max-width: 420px; height: auto; background: #fff; border-radius: 14px; align-self: center; }
.fig-line { stroke: #1D2433; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.fig-line.thin { stroke-width: 1.5; }
.fig-line.dash { stroke-dasharray: 6 5; stroke-width: 1.5; }
.fig-shape { stroke: #1D2433; stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.fig-shape.filled { fill: #F1EAFF; }
.fig-arc { stroke: #CA8A04; stroke-width: 2; fill: none; }
.fig-dot { fill: #1D2433; }
.fig-text { font-size: 17px; fill: #1D2433; font-family: inherit; }
.fig-text.bold { font-weight: 700; }
.fig-text.small { font-size: 13px; fill: #5B6475; }
.q-table th { text-transform: none; letter-spacing: normal; font-size: 14px; }
@media (max-width: 480px) {
  .q-table { font-size: 14px; }
  .q-table th, .q-table td { padding: 6px 5px; }
}
.fig-grid { stroke: #DDE3E8; stroke-width: 1; }
.fig-plot { stroke: #6D28D9; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig-ring { stroke: #6D28D9; stroke-width: 2.5; fill: #fff; }
.fig-ring.solid { fill: #6D28D9; }
/* practice papers */
.paper-map { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.map-dot { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; }
.map-dot.done { background: #F1EAFF; border-color: #6D28D9; }
.map-dot.current { outline: 3px solid var(--focus); outline-offset: 1px; }
.review-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; }
.review-item summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 700; }
.review-item summary .full { color: #6D28D9; } .review-item summary .part { color: #B45309; } .review-item summary .none { color: #B42318; }
.scheme-mini { padding-left: 18px; margin: 6px 0; } .scheme-mini li.got { color: #6D28D9; } .scheme-mini li.missed { color: #5B6475; }
.review-item .q-extra .q-figure { max-width: 320px; }
.paper-cta { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--ink); color: #fff; text-decoration: none; }
.paper-cta strong { font-size: 18px; } .paper-cta span { color: #C9D1DB; font-size: 15px; }
.paper-cta:hover { filter: brightness(1.1); }
.logo-img { width: 40px; height: 40px; border-radius: 12px; flex: none; }

/* brand: purple + sunshine */
.logo-maths { color: var(--teal); }
.motto-one { background: linear-gradient(transparent 55%, var(--orange) 55%); padding: 0 0.08em; }
.motto-dot { color: #EAB308; }
.topic-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; margin-top: 2px; }
.topic-tick.done { background: var(--teal); border-color: var(--teal); }
.topic-note { font-size: 13px; color: var(--muted); flex-basis: 100%; }
.skill-list { flex-basis: 100%; font-size: 14px; }
.skill-list summary { cursor: pointer; color: var(--teal); font-weight: 700; }
.skill-list ul { list-style: none; padding: 6px 0 0; margin: 0; display: grid; gap: 6px; }
.skill-list li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
.skill-tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; flex: none; }
.skill-list li.ticked .skill-tick { background: var(--teal); border-color: var(--teal); }

/* tutoring with Tamz */
.tutor-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 22px 0 10px; }
.tutor-card { position: relative; background: #fff; border: 2px solid var(--line-soft); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.tutor-card.featured { border-color: var(--teal); box-shadow: 0 10px 30px rgba(109, 40, 217, 0.12); }
.tutor-card h3 { margin: 0; font-size: 22px; }
.tutor-card .price { margin: 0; color: var(--muted); }
.tutor-card .price strong { font-size: 40px; color: var(--ink); letter-spacing: -0.02em; margin-right: 4px; }
.tutor-card ul { margin: 0 0 8px; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }
.tutor-flag { position: absolute; top: -12px; right: 18px; }
.tutor-form { background: #fff; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; max-width: 560px; border: 2px solid var(--line-soft); }
.tutor-form textarea { resize: vertical; font: inherit; }
.check-light { color: var(--ink-2); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }

/* ---------- homepage (0.28) ---------- */
body.home { background: #fff; --home-ink: #1A1433; --lilac: #F4F0FF; }
.home .site-header { padding: 18px 0; }
.home-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 36px 0 72px; }
.home-hero h1 { margin: 0 0 18px; font-size: clamp(52px, 8.5vw, 104px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 800; color: var(--home-ink); }
.home-lead { margin: 0 0 28px; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: #3D3654; max-width: 30ch; }
.btn-big { padding: 16px 26px; font-size: 18px; }
.home-small { margin: 16px 0 0; font-size: 15px; color: #6B6585; }

/* the marked exam answer */
.paper { position: relative; margin: 0; background: #fff; border: 1.5px solid #E4DFF2; border-radius: 6px; padding: 28px 30px 22px 54px; box-shadow: 0 30px 60px -30px rgba(26, 20, 51, 0.35); transform: rotate(-1.2deg);
  background-image: linear-gradient(90deg, transparent 38px, #F3B0B0 38px, #F3B0B0 40px, transparent 40px); }
.paper-q { padding-right: 34px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; font-size: 17px; line-height: 1.5; color: var(--home-ink); }
.paper-q p { margin: 0; }
.paper-num { font-weight: 800; position: absolute; left: 14px; top: 28px; }
.paper-marks { font-weight: 700; color: #6B6585; }
.paper-work { margin-top: 18px; display: grid; gap: 10px; font-size: 18px; font-weight: 600; color: #2B4BB5; }
.paper-work p { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px dashed #E4DFF2; padding-bottom: 6px; }
.tick { font-family: inherit; color: #C2185B; font-weight: 700; white-space: nowrap; }
.paper-score { position: absolute; right: -18px; top: -26px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: var(--home-ink); background: var(--orange); transform: rotate(8deg); box-shadow: 0 8px 18px rgba(250, 204, 21, 0.45); }
.paper figcaption { margin-top: 22px; font-size: 14px; color: #6B6585; max-width: 34ch; }

.home-band { padding: 72px 0; }
.home-band-lilac { background: var(--lilac); }
.home-h2 { margin: 0 0 26px; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; color: var(--home-ink); }

.covered { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 760px; }
.covered li { display: flex; gap: 14px; align-items: flex-start; font-size: 19px; line-height: 1.45; color: #3D3654; }
.covered strong { color: var(--home-ink); }
.tick-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-top: 1px; }

.how { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.how li { counter-increment: how; border-top: 3px solid var(--home-ink); padding-top: 18px; }
.how li::before { content: counter(how); display: block; font-size: 44px; font-weight: 800; color: var(--teal); line-height: 1; margin-bottom: 10px; }
.how h3 { margin: 0 0 8px; font-size: 22px; color: var(--home-ink); }
.how p { margin: 0; color: #3D3654; font-size: 17px; line-height: 1.5; }

.home .about { align-items: flex-start; }
.home .about-copy { max-width: 640px; }
.home .about-copy p { font-size: 17px; line-height: 1.6; color: #3D3654; }
.about-role { font-weight: 700; color: var(--teal) !important; margin: 0 0 16px; }
.about-sign { font-weight: 800; color: var(--home-ink) !important; margin-top: 18px; }
.about-sign span { font-weight: 600; color: #6B6585; }

@media (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; gap: 44px; padding-top: 12px; }
  .paper { margin: 0 8px; }
  .how { grid-template-columns: 1fr; gap: 26px; }
  .home .nav a:not(.btn) { display: none; }
  .home .site-header { flex-wrap: nowrap; }
  .home .nav .btn { padding: 10px 14px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .paper, .paper-score { transform: none; } }

.nav-short { display: none; }
@media (max-width: 860px) { .home .nav .nav-long { display: none; } .home .nav .nav-short { display: inline; } }
@media (max-width: 860px) { .home .photo { flex-basis: 150px; width: 150px; height: 170px; border-radius: 22px; font-size: 14px; } }
.about-thanks { background: #fff; border-left: 4px solid var(--orange); border-radius: 0 14px 14px 0; padding: 14px 16px; margin-top: 18px; }

/* worked examples */
.worked { display: flex; flex-direction: column; gap: 14px; }
.worked-block { background: #fff; border: 2px solid var(--line-soft); border-radius: 20px; padding: 16px 18px; }
.worked-block h3 { margin: 0 0 8px; font-size: 17px; }
.worked-how, .worked-lines { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.worked-lines { list-style: none; padding-left: 0; }
.worked-lines li { display: flex; gap: 10px; align-items: baseline; }
.worked-code { flex: none; min-width: 34px; text-align: center; font-size: 13px; font-weight: 800; color: var(--teal-dark); background: var(--teal-soft); border-radius: 8px; padding: 2px 6px; }
.worked-answer { margin: 12px 0 0; padding: 10px 12px; background: #FEF9C3; border-radius: 12px; }
.worked-key { margin: 10px 0 0; }
.worked-trap { margin: 0; padding: 14px 16px; border-radius: 16px; background: #FFF1F2; color: #881337; border: 2px solid #FECDD3; }
.ops-wrap { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.example-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.example-list a, .example-list .current { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 2px solid var(--line-soft); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; background: #fff; }
.example-list a:hover { border-color: var(--teal); color: var(--teal-dark); }
.example-list .current { background: var(--teal); border-color: var(--teal); color: #fff; }
.worked-toggle { align-self: flex-start; }
.worked-panel { border-top: 2px dashed var(--line); padding-top: 14px; }
.worked-panel[hidden] { display: none; }
.skill-links { margin-left: auto; display: flex; gap: 10px; font-size: 13px; }
.skill-links a { color: var(--teal-dark); font-weight: 700; }
.ops-wrap .btn { white-space: nowrap; }
@media (max-width: 420px) { .ops-wrap { grid-template-columns: 1fr 1fr; } .ops-wrap .btn { font-size: 15px; padding-left: 10px; padding-right: 10px; } }

/* fun: celebrations, badges, streaks */
.burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 60; }
.burst span { position: absolute; width: 9px; height: 9px; border-radius: 50%; left: -4px; top: -4px; animation: burst 0.95s cubic-bezier(.15,.7,.3,1) forwards; }
.burst .sun { background: var(--orange); }
.burst .violet { background: var(--teal); width: 7px; height: 7px; }
@keyframes burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 61; background: var(--teal-dark); color: #fff; border-radius: 18px; padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 30px rgba(76,29,149,.35); max-width: calc(100vw - 32px); animation: toast-in .35s ease-out; transition: opacity .5s, transform .5s; }
.toast strong { color: var(--orange); }
.toast.out { opacity: 0; transform: translate(-50%, 12px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }
.fun-chip { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--teal-dark); background: #FEF9C3; border-radius: 999px; padding: 4px 10px; }
.fun-chip[hidden] { display: none; }
.tier-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier-btn { font: inherit; font-weight: 700; font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.tier-btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.tier-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.grade-gap { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: #FEF9C3; display: flex; flex-direction: column; gap: 4px; }
.grade-gap strong { font-size: 20px; color: var(--teal-dark); }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }

/* beat the clock */
.quick-q { font-size: clamp(26px, 8vw, 40px); font-weight: 800; text-align: center; padding: 26px 12px; background: #fff; border: 2px solid var(--line-soft); border-radius: 22px; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.quick-answer { position: relative; margin: 12px 0; text-align: center; }
#k-input { display: inline-block; min-width: 60%; font-size: 34px; font-weight: 800; padding: 8px 16px; border-bottom: 4px solid var(--teal); color: var(--teal-dark); min-height: 52px; }
.quick-flash { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 22px; }
.quick-flash.good { color: var(--good); }
.quick-flash.bad { color: var(--bad); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad .key { min-width: 0; min-height: 0; font: inherit; font-size: 24px; font-weight: 800; padding: 14px 0; border-radius: 16px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.keypad .key:active { transform: scale(.96); background: var(--teal-soft); }
.keypad .key-go { grid-column: span 2; background: var(--teal); border-color: var(--teal); color: #fff; }
.keypad .key-del { background: var(--line-soft); }
.key:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.quick-clock.over { background: var(--bad-bg); color: var(--bad); }
.quick-missed { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.daily-ticks { font-size: 28px; letter-spacing: 4px; margin: 4px 0; }
.next-daily { text-align: center; font-weight: 700; color: var(--teal-dark); }
.worked-lines li.got .worked-code { background: var(--good-bg); color: var(--good); }
.worked-lines li.missed .worked-code { background: var(--bad-bg); color: var(--bad); }

/* progress report */
.report-page { display: flex; flex-direction: column; gap: 22px; }
.report { background: #fff; border: 2px solid var(--line-soft); border-radius: 24px; padding: 20px; }
.report h2 { font-size: 19px; margin: 22px 0 10px; }
.report-head { display: flex; gap: 12px; align-items: center; }
.report-head h1 { margin: 0; font-size: 26px; }
.report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.stat { background: var(--teal-soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.stat strong { font-size: 24px; color: var(--teal-dark); }
.stat span { font-size: 13px; color: var(--ink-2); }
.report-topics { display: grid; gap: 7px; }
.report-topic { display: grid; grid-template-columns: minmax(120px, 1.3fr) 2fr 44px; gap: 10px; align-items: center; font-size: 14px; }
.rt-name { color: var(--ink); font-weight: 600; }
a.rt-name { text-decoration: none; }
a.rt-name:hover { color: var(--teal-dark); text-decoration: underline; }
.rt-bar { height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.rt-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #8B5CF6); border-radius: 999px; }
.rt-count { text-align: right; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.report-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.report-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.badge { border: 2px dashed var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.badge strong { font-size: 14px; }
.badge.won { border-style: solid; border-color: var(--orange); background: #FEF9C3; color: var(--ink-2); }
.badge.won strong { color: var(--teal-dark); }
.badge-icon { font-size: 20px; color: var(--line); }
.badge.won .badge-icon { color: #CA8A04; }
.report-foot { margin: 20px 0 0; }
.report-tools h2 { font-size: 19px; margin: 18px 0 8px; }
.code-box { width: 100%; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; border: 2px solid var(--line); border-radius: 14px; padding: 10px; resize: vertical; box-sizing: border-box; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 560px) {
  .report-stats { grid-template-columns: 1fr 1fr; }
  .report-two { grid-template-columns: 1fr; }
  .report-topic { grid-template-columns: 1fr 64px 40px; font-size: 13px; }
}
@media print {
  .site-header, .footer, .no-print, .report-tools, .toast, .burst { display: none !important; }
  body { background: #fff; }
  .report { border: none; padding: 0; }
  .report-topic { break-inside: avoid; }
  .rt-fill, .stat, .badge.won { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.play-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.play-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; text-decoration: none; color: #fff; min-height: 86px; justify-content: flex-end; }
.play-card strong { font-size: 18px; }
.play-card span { font-size: 13px; opacity: .92; }
.play-daily { background: linear-gradient(135deg, var(--teal-dark), var(--teal)); }
.play-quick { background: linear-gradient(135deg, #CA8A04, var(--orange)); color: #1B1F2A; }
.play-card:hover { transform: translateY(-2px); }
.play-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .play-card:hover { transform: none; } }

@media (pointer: coarse) { .keys .key { min-height: 46px; min-width: 52px; font-size: 20px; } .input, .money input { font-size: 20px; } }

.play-row-home .play-card { min-height: 130px; padding: 20px; }
.play-row-home .play-card strong { font-size: 22px; }
.play-row-home .play-card span { font-size: 15px; }
@media (max-width: 560px) { .play-row-home { grid-template-columns: 1fr; } }
.fun-chip .nav-short { display: none; }
@media (max-width: 480px) {
  .fun-chip .nav-long { display: none; }
  .fun-chip .nav-short { display: inline; }
  .site-header { flex-wrap: nowrap; gap: 8px; }
  .site-header .fun-chip { margin-left: auto; }
  .site-header .chip { white-space: nowrap; }
}

.fun-chip { white-space: nowrap; }
@media (max-width: 480px) { .fun-chip .fun-marks { display: none; } .site-header .logo { flex-shrink: 0; } }

/* ---------- the hub ---------- */
.hub { display: flex; flex-direction: column; gap: 18px; }
.hub-hero { position: relative; overflow: hidden; color: #fff; border-radius: 28px; padding: 22px 22px 18px; background: radial-gradient(circle at 92% 8%, rgba(250,204,21,.35) 0 70px, transparent 71px), radial-gradient(circle at 8% 110%, rgba(255,255,255,.08) 0 120px, transparent 121px), linear-gradient(140deg, #4C1D95, #6D28D9 60%, #7C3AED); }
.hub-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.hub-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--orange); letter-spacing: .02em; }
.hub-hero h1 { margin: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.15; }
.rank-badge { flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--orange); color: #3B0764; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-6deg); box-shadow: 0 6px 0 #CA8A04; }
.rank-badge span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.rank-badge strong { font-size: 26px; line-height: 1; }
.rank-line { margin: 16px 0 8px; font-size: 15px; }
.rank-line strong { font-size: 18px; color: var(--orange); }
.rank-line span { opacity: .85; }
.xp-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.xp-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FDE047, #FACC15); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.hub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.hub-stats div { background: rgba(255,255,255,.1); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; }
.hub-stats strong { font-size: 22px; }
.hub-stats span { font-size: 12px; opacity: .85; }

.missions { background: #fff; border: 2px solid var(--line-soft); border-radius: 24px; padding: 16px 16px 10px; }
.missions.complete { border-color: var(--orange); background: #FFFDF0; }
.missions-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.missions-head h2 { margin: 0; font-size: 19px; }
.missions-count { font-weight: 800; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.mission-list { list-style: none; margin: 0; padding: 0; }
.mission-link { display: flex; align-items: center; gap: 12px; padding: 10px 4px; text-decoration: none; color: var(--ink); border-radius: 14px; }
.mission + .mission .mission-link { border-top: 1px solid var(--line-soft); }
.mission-link:hover { background: var(--teal-soft); }
.mission-check { flex: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 900; color: #fff; }
.mission.done .mission-check { background: var(--good); border-color: var(--good); }
.mission.done .mission-text { text-decoration: line-through; color: var(--muted); }
.mission-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mission-text { font-weight: 600; font-size: 15px; }
.mission-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.mission-fill { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.mission.done .mission-fill { background: var(--good); }
.mission-count { flex: none; font-size: 13px; font-weight: 800; color: var(--teal-dark); }

.play-three { grid-template-columns: repeat(3, 1fr); }
.play-icon { font-size: 22px; line-height: 1; margin-bottom: auto; opacity: .9; }
.play-paper { background: linear-gradient(135deg, #1B1F2A, #374151); }
@media (max-width: 560px) { .play-three { grid-template-columns: 1fr 1fr; } .play-three .play-paper { grid-column: span 2; min-height: 0; } }

.map-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.map-head h2 { margin: 0; font-size: 24px; scroll-margin-top: 16px; }
.view-switch { display: inline-flex; background: var(--line-soft); border-radius: 999px; padding: 3px; }
.view-btn { font: inherit; font-weight: 700; font-size: 14px; border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.view-btn[aria-pressed="true"] { background: #fff; color: var(--teal-dark); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.view-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.map-help { margin: 0; }

/* ---------- the exam map ---------- */
.exam-map { display: flex; flex-direction: column; gap: 22px; }
.world { border-radius: 28px; padding: 18px 14px 22px; background: linear-gradient(180deg, var(--w-soft), #fff 70%); border: 2px solid var(--w-soft); }
.world-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.world-head > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.world-head h3 { margin: 0; font-size: 20px; color: var(--w); }
.world-icon { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--w); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 18px; transform: rotate(-4deg); }
.world-sub { font-size: 13px; color: var(--ink-2); }
.world-bar { height: 6px; border-radius: 999px; background: rgba(0,0,0,.07); overflow: hidden; max-width: 260px; }
.world-bar span { display: block; height: 100%; background: var(--w); border-radius: 999px; }
.trail { position: relative; list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
.trail-line { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.trail-line path { fill: none; stroke-width: 4; stroke-linecap: round; }
.trail-line .ahead { stroke: var(--w); opacity: .28; stroke-dasharray: 2 10; }
.trail-line .walked { stroke: #EAB308; }
.stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; grid-column: 2; }
.stop.col-1 { grid-column: 1; }
.stop.col-3 { grid-column: 3; }
.stop-btn { --pct: 0%; width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 6px; cursor: pointer; background: conic-gradient(var(--w) var(--pct), #E9E4F2 0); box-shadow: 0 6px 0 rgba(0,0,0,.08); transition: transform .15s; }
.stop-btn:hover { transform: translateY(-3px); }
.stop-btn:active { transform: translateY(1px); }
.stop-btn:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.stop-face { width: 100%; height: 100%; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: var(--w); }
.stop.done .stop-btn { background: conic-gradient(#EAB308 100%, #EAB308 0); box-shadow: 0 6px 0 #CA8A04; }
.stop.done .stop-face { background: var(--orange); color: #713F12; font-size: 28px; }
.stop-name { font-size: 13px; font-weight: 700; text-align: center; max-width: 118px; line-height: 1.25; color: var(--ink); }
.stop.next .stop-btn { animation: halo 2s ease-out infinite; }
.next-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; animation: bob 1.6s ease-in-out infinite; z-index: 2; }
.next-flag::after { content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
@keyframes halo { 0% { box-shadow: 0 6px 0 rgba(0,0,0,.08), 0 0 0 0 color-mix(in srgb, var(--w) 45%, transparent); } 70% { box-shadow: 0 6px 0 rgba(0,0,0,.08), 0 0 0 16px transparent; } 100% { box-shadow: 0 6px 0 rgba(0,0,0,.08), 0 0 0 0 transparent; } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .stop.next .stop-btn, .next-flag { animation: none; } .xp-bar span { transition: none; } .stop-btn { transition: none; } }

/* ---------- topic sheet ---------- */
.sheet { border: 0; padding: 0; border-radius: 28px; width: min(560px, calc(100vw - 24px)); max-height: 86vh; background: #fff; color: var(--ink); box-shadow: 0 20px 60px rgba(30,10,60,.35); }
.sheet::backdrop { background: rgba(30,16,60,.45); }
.sheet[open] { animation: sheet-in .25s ease-out; }
@keyframes sheet-in { from { transform: translateY(30px); opacity: 0; } }
.sheet-inner { position: relative; padding: 22px 20px 20px; }
.sheet-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--line-soft); font-size: 24px; line-height: 1; cursor: pointer; }
.sheet-top { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.sheet-ring { --pct: 0%; flex: none; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(#fff 58%, transparent 59%), conic-gradient(var(--w) var(--pct), #E9E4F2 0); font-weight: 900; color: var(--w); }
.sheet-kicker { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--w); }
.sheet h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.sheet-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.sheet-go .btn { flex: 1 1 140px; }
.sheet-h3 { font-size: 16px; margin: 16px 0 6px; }
.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sheet-list li { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.sheet-list li.ticked .sheet-skill { color: var(--muted); }
.sheet-skill { flex: 1; }
@media (max-width: 560px) {
  .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 28px 28px 0 0; max-height: 88vh; }
  .stop-btn { width: 68px; height: 68px; }
  .stop-name { font-size: 12px; max-width: 104px; }
  .hub-stats strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet-list li.ticked .skill-tick { background: var(--good); border-color: var(--good); }

.combo-chip { font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #DB2777, #F97316); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.combo-chip.pop { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.combo-banner { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 59; background: linear-gradient(135deg, #DB2777, #F97316); color: #fff; font-weight: 900; font-size: clamp(18px, 5vw, 26px); padding: 14px 22px; border-radius: 20px; box-shadow: 0 14px 40px rgba(219,39,119,.4); text-align: center; max-width: calc(100vw - 32px); }
.combo-banner.show { animation: banner 2.6s ease-in-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .combo-chip.pop, .combo-banner.show { animation: none; } }

/* topic page: the levels as a path */
.ladder-path { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ladder-path::before { content: ''; position: absolute; left: 37px; top: 30px; bottom: 30px; width: 4px; border-radius: 4px; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 14px); z-index: 0; }
.ladder-path .level { position: relative; z-index: 1; }
.level-icon { width: 46px; height: 46px; border-radius: 50%; font-size: 18px; font-weight: 900; background: #fff; color: var(--muted); border: 3px solid var(--line); flex: none; }
.level.here { border-color: var(--teal); box-shadow: 0 6px 0 var(--teal-soft); }
.level.here .level-icon { background: var(--teal); border-color: var(--teal); color: #fff; }
.level.mastered .level-icon { background: var(--orange); border-color: #EAB308; color: #713F12; font-size: 22px; }
.level.boss { background: linear-gradient(135deg, #1E1B4B, #4C1D95); color: #fff; border-color: #4C1D95; }
.level.boss .stage-body span { color: rgba(255,255,255,.82); }
.level.boss .level-icon { background: #1E1B4B; border-color: var(--orange); color: var(--orange); font-size: 22px; }
.level.boss.mastered .level-icon { background: var(--orange); color: #713F12; }
.boss-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800; background: var(--orange); color: #3B0764 !important; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }
.mastery-dots { display: inline-flex !important; gap: 5px; margin-top: 6px; }
.mastery-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-soft); border: 2px solid var(--line); }
.mastery-dots .dot.full { background: var(--good); border-color: var(--good); }
.mastery-dots .dot.miss { background: #fff; border-color: var(--bad); }
.level.boss .mastery-dots .dot { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.level.boss .mastery-dots .dot.full { background: var(--orange); border-color: var(--orange); }
.stop-name { background: rgba(255,255,255,.92); border-radius: 10px; padding: 2px 7px; position: relative; z-index: 1; }

/* ---------- Dot ---------- */
.dot-avatar { background: transparent !important; overflow: visible; }
.dot-avatar svg, [data-dot] svg { width: 100%; height: 100%; overflow: visible; display: block; }
.dot-svg .dot-body { transform-origin: 50% 90%; animation: dot-idle 3.2s ease-in-out infinite; }
.dot-react .dot-body { animation: dot-jump .6s cubic-bezier(.3,1.5,.5,1), dot-idle 3.2s ease-in-out .6s infinite; }
.dot-svg.mood-oops .dot-body { animation: dot-shake .5s ease-in-out; }
.dot-sparkle { animation: twinkle 1.6s ease-in-out infinite; transform-origin: 85px 32px; }
@keyframes dot-idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2px) scale(1.02, .98); } }
@keyframes dot-jump { 0% { transform: translateY(0) scale(1.15, .85); } 45% { transform: translateY(-14px) scale(.92, 1.1); } 100% { transform: translateY(0) scale(1); } }
@keyframes dot-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.coach-inline .coach-avatar, .ladder-banner .coach-avatar { width: 52px; height: 52px; flex-basis: 52px; }
.dot-hero { flex: none; position: relative; width: 92px; height: 92px; border: 0; background: transparent; padding: 0; cursor: pointer; margin-top: -6px; }
.dot-hero:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 20px; }
.dot-big { display: block; width: 92px; height: 92px; }
.dot-level { position: absolute; right: -6px; bottom: -2px; background: var(--orange); color: #3B0764; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; box-shadow: 0 3px 0 #CA8A04; }
.dot-level strong { font-size: 15px; }
.dot-says { position: relative; margin: 14px 0 0; background: rgba(255,255,255,.14); border-radius: 16px; padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.dot-says strong { color: var(--orange); }
.sound-btn { border: 0; background: var(--line-soft); width: 38px; height: 38px; border-radius: 50%; font-size: 17px; cursor: pointer; flex: none; }
.sound-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wardrobe-top { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.dot-preview { flex: none; width: 96px; height: 96px; display: block; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ward-item { position: relative; font: inherit; border: 2px solid var(--line-soft); background: #fff; border-radius: 16px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.ward-item.chosen { border-color: var(--teal); background: var(--teal-soft); }
.ward-item.locked .ward-pic { filter: grayscale(1) brightness(1.15); opacity: .45; }
.ward-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ward-pic { width: 54px; height: 54px; display: block; }
.ward-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; }
.ward-lock { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; }
.ward-item.shake { animation: dot-shake .4s; }
@media (max-width: 400px) { .wardrobe-grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dot-svg .dot-body, .dot-react .dot-body, .dot-sparkle, .ward-item.shake { animation: none !important; } }

.quick-q { position: relative; }
.quick-dot { position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; }

@media (max-width: 480px) { .site-header { gap: 6px; } .sound-btn { width: 34px; height: 34px; font-size: 15px; } }

/* teacher page */
.narrow-wide { max-width: 760px; }
.teach { display: flex; flex-direction: column; gap: 18px; }
.tabs { display: flex; gap: 6px; background: var(--line-soft); padding: 4px; border-radius: 999px; align-self: flex-start; flex-wrap: wrap; }
.tab { font: inherit; font-weight: 700; border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.tab[aria-selected="true"] { background: #fff; color: var(--teal-dark); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.teach-panel { display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: 24px; padding: 18px; border: 2px solid var(--line-soft); }
.teach-panel[hidden] { display: none; }
.skill-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-pick { font: inherit; font-size: 14px; font-weight: 600; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--ink); }
.skill-pick.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-dark); }
.skill-pick.all { border-style: dashed; color: var(--teal-dark); }
.skill-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.picked { background: var(--bg); border-radius: 16px; padding: 12px 14px; }
.picked-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.picked-list li { display: flex; justify-content: space-between; gap: 10px; }
.teach-row { display: flex; gap: 10px; flex-wrap: wrap; }
.teach-row .field { flex: 1 1 140px; }
.made { border-top: 2px dashed var(--line); padding-top: 14px; }
.made h2 { font-size: 19px; margin: 0 0 8px; }
.teach-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teach-focus h3 { margin: 6px 0; font-size: 17px; }
.teach-focus ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.teach-focus li { display: flex; flex-direction: column; gap: 2px; }
.table-wrap { overflow-x: auto; }
.teach-table td, .teach-table th { text-align: center; padding: 6px 8px; white-space: nowrap; }
.teach-table th:first-child { text-align: left; }
.teach-table td.full { background: var(--good-bg); color: var(--good); font-weight: 700; }
.teach-table td.part { background: #FEF9C3; color: #854D0E; font-weight: 700; }
.teach-table td.none { background: var(--bad-bg); color: var(--bad); font-weight: 700; }
.teach-table td.total { font-weight: 800; }
.teach-table .avg-row th, .teach-table .avg-row td { border-top: 2px solid var(--line); }
.class-card { border: 2px solid var(--line-soft); border-radius: 18px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.class-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.class-top h3 { margin: 0; }
.class-code { font: 800 20px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; background: #FEF9C3; padding: 6px 10px; border-radius: 10px; color: var(--teal-dark); }
.link-button.danger { color: var(--bad); }
/* homework */
.assign-skills { margin: 0 0 14px; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.assign-progress { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; margin: 6px 0 12px; }
.assign-progress span { display: block; height: 100%; background: var(--teal); width: 0; transition: width .3s; }
.handin { background: #fff; border: 2px solid var(--teal); border-radius: 20px; padding: 16px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.handin h2 { margin: 0; font-size: 19px; }
.assign-review { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.assign-review li { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.assign-review li.full span::after { content: ' ✓'; color: var(--good); font-weight: 800; }
/* account */
.account { display: flex; flex-direction: column; gap: 16px; }
.account section { display: flex; flex-direction: column; gap: 14px; }
.account section[hidden] { display: none; }
.account-head { display: flex; gap: 14px; align-items: center; }
.account-head h1 { margin: 0; }
.dot-avatar-lg { width: 64px !important; height: 64px !important; flex-basis: 64px !important; }
.acc-card { background: #fff; border: 2px solid var(--line-soft); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.acc-card h2 { margin: 0; font-size: 19px; }
.acc-card h3 { margin: 6px 0 0; font-size: 16px; }
.acc-quiet { background: transparent; }
.acc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.acc-list li { display: flex; justify-content: space-between; gap: 10px; }
.code-input { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.big-code { font: 800 30px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; background: #FEF9C3; color: var(--teal-dark); padding: 12px; border-radius: 14px; text-align: center; margin: 0; }
.role-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.role-pick legend { font-weight: 700; margin-bottom: 6px; }
.role { display: flex; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: 16px; padding: 12px; cursor: pointer; background: #fff; }
.role span { display: flex; flex-direction: column; font-size: 14px; color: var(--ink-2); }
.role strong { color: var(--ink); font-size: 16px; }
.role:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.plus-card { border-color: var(--orange); background: #FFFDF0; }
@media (max-width: 560px) { .teach-summary { grid-template-columns: 1fr 1fr 1fr; } .teach-summary .stat strong { font-size: 18px; } }
.teach .ops-wrap .btn { white-space: normal; }

.legal main h1 { font-size: 34px; letter-spacing: -.03em; margin: 8px 0 12px; }
.legal main h2 { font-size: 20px; margin-top: 26px; }
.legal main li { margin-bottom: 6px; }
.legal-table td, .legal-table th { vertical-align: top; text-align: left; font-size: 14px; padding: 8px; }
.kid-summary { background: var(--teal-soft); border-radius: 20px; padding: 4px 18px 10px; }
.kid-summary h2 { margin-top: 14px !important; }
.lead-in { font-size: 18px; color: var(--ink-2); }

.plus-perks { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; }
.acc-toggle { background: #fff; border: 2px solid var(--line-soft); border-radius: 16px; padding: 12px 14px; color: var(--ink); }
.week-card { background: var(--teal-soft); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.week-card h3 { margin: 0; font-size: 16px; }
.week-card h4 { margin: 6px 0 0; font-size: 14px; }
.week-card p { margin: 0; }
.week-list { margin: 0; padding-left: 18px; font-size: 14px; }
.pay-btn { margin-top: 8px; }
.pay-btn[hidden] { display: none; }

/* Free vs Plus */
.plans .home-lead-sm { max-width: 640px; font-size: 17px; color: var(--ink-2); margin: 0 0 18px; }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.plan-card { position: relative; background: #fff; border: 2px solid var(--line-soft); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.plan-card h3 { margin: 0; font-size: 22px; }
.plan-card p { margin: 0; }
.plan-plus { border-color: var(--teal); box-shadow: 0 8px 0 var(--teal-soft); }
.plan-tag { position: absolute; top: -12px; right: 16px; background: var(--orange); color: #3B0764; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-price strong { font-size: 34px; color: var(--teal-dark); }
.plan-price span { color: var(--ink-2); font-size: 14px; }
.plan-soon { font-size: 14px; background: var(--teal-soft); border-radius: 12px; padding: 10px 12px; }
.plan-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 20px; overflow: hidden; border: 2px solid var(--line-soft); }
.plan-table th, .plan-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); text-align: center; font-size: 15px; }
.plan-table thead th { background: var(--teal-soft); color: var(--teal-dark); font-weight: 800; }
.plan-table thead th:last-child { background: var(--teal); color: #fff; }
.plan-table tbody th { text-align: left; font-weight: 500; }
.plan-table td:last-child { background: #FBF8FF; }
.plan-table .yes { color: var(--good); font-weight: 900; font-size: 18px; }
.plan-table .no { color: var(--muted); }
.plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: 0; }
.plan-example { margin-top: 14px; }
.plan-example summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); padding: 6px 0; }
.email-preview { background: #fff; border: 2px solid var(--line-soft); border-radius: 18px; padding: 16px 18px; margin-top: 8px; max-width: 560px; }
.email-preview p { margin: 0 0 8px; font-size: 15px; }
.email-subject { font-weight: 800; color: var(--teal-dark); }
.email-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.email-stats span { background: var(--teal-soft); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.email-sign { margin-top: 10px !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .plan-cards { grid-template-columns: 1fr; } .plan-table th, .plan-table td { padding: 9px 8px; font-size: 14px; } }
.plan-table th { text-transform: none; letter-spacing: normal; } .plan-table tbody th { color: var(--ink); font-size: 15px; } @media (max-width: 640px) { .plan-table tbody th { font-size: 14px; } }

/* Plus: plan on the hub */
.plan-hub { background: #fff; border: 2px solid var(--teal); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.plan-hub[hidden] { display: none; }
.plan-hub h2 { margin: 0; font-size: 19px; }
.plus-badge { background: var(--orange); color: #3B0764; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.plan-headline { margin: 0; font-weight: 700; color: var(--teal-dark); }
.exam-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.exam-pick .input { flex: 1 1 140px; min-height: 40px; padding: 6px 10px; font-size: 15px; }
.plan-tasks { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.plan-tasks li { display: flex; flex-direction: column; gap: 2px; }
.plan-task { font-weight: 700; color: var(--ink); }
.plan-detail { font-size: 13px; color: var(--ink-2); }
.plan-example-link { font-size: 13px; font-weight: 700; color: var(--teal-dark); }

.live-list .live-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-item .btn { padding: 6px 14px; min-height: 0; }
.ask-preview { max-width: 100%; max-height: 220px; border-radius: 12px; margin-top: 8px; display: block; }
.ask-preview[hidden] { display: none; }
.ask-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.ask-list li { border: 2px solid var(--line-soft); border-radius: 14px; padding: 10px 12px; }
.ask-list li.answered { border-color: var(--good); }
.ask-q { margin: 0 0 6px; font-weight: 700; }
.ask-a { margin: 0; white-space: pre-wrap; }
.ask-a::before { content: 'Tamz: '; font-weight: 800; color: var(--teal-dark); }
@media (max-width: 480px) { .site-header:has([data-account-link]:not([hidden])) .chip-progress { display: none; } }

.reviews[hidden] { display: none; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.review { margin: 0; background: #fff; border: 2px solid var(--line-soft); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.review-stars { margin: 0; color: #EAB308; letter-spacing: 2px; font-size: 18px; }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.5; }
.review figcaption { font-size: 14px; color: var(--ink-2); font-weight: 600; }

/* feedback */
.survey { position: relative; background: #fff; border: 2px solid var(--teal); border-radius: 20px; padding: 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.survey h2 { margin: 0; font-size: 19px; }
.survey p { margin: 0; }
.survey-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--line-soft); font-size: 20px; cursor: pointer; }
.survey-stars { display: flex; gap: 6px; }
.survey-star { font-size: 34px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--line); padding: 2px; transition: transform .1s; }
.survey-star.on { color: #EAB308; }
.survey-star:hover { transform: scale(1.12); }
.survey-star:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.survey-follow { display: flex; flex-direction: column; gap: 8px; }
.survey-follow[hidden] { display: none; }
.survey-follow label { font-weight: 700; font-size: 15px; }
.survey-thanks { font-weight: 700; color: var(--teal-dark); }
.fingerprint a { color: inherit; }
.fb-about { background: var(--teal-soft); border-radius: 12px; padding: 10px 12px; }
@media (prefers-reduced-motion: reduce) { .survey-star { transition: none; } }

/* static revision pages */
.revise main h1 { font-size: clamp(30px, 6vw, 42px); letter-spacing: -.03em; margin: 4px 0 10px; }
.revise main h2 { font-size: 22px; margin: 28px 0 10px; }
.revise-skill { background: #fff; border: 2px solid var(--line-soft); border-radius: 18px; padding: 14px 16px; margin-bottom: 10px; }
.revise-skill h3 { margin: 0 0 6px; font-size: 18px; }
.revise-skill ol { margin: 0 0 8px; padding-left: 20px; }
.revise-trap { margin: 0 0 6px; font-size: 15px; color: #881337; }
.revise-links { margin: 0; font-size: 14px; font-weight: 700; }
.revise-example { background: #fff; border: 2px solid var(--teal); border-radius: 18px; padding: 14px 16px; }
.revise-list { columns: 2 220px; padding-left: 18px; }
.revise-list li { margin-bottom: 6px; }
.revise-cta { background: var(--teal-soft); border-radius: 20px; padding: 16px 18px; margin-top: 20px; }
.revise-cta h2 { margin-top: 0 !important; }

/* stats.html */
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.stat-row .stat { flex: 1 1 100px; background: #fff; border: 2px solid var(--line-soft); border-radius: 18px; padding: 12px; text-align: center; }
.stat-row .stat strong { display: block; font-size: 26px; }
.stat-row .stat span { font-size: 13px; color: var(--muted, #4B5563); }
.stats-bar { display: grid; grid-template-columns: 92px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 4px; }
.stats-track { background: #EDE9FE; border-radius: 6px; height: 12px; overflow: hidden; }
.stats-fill { display: block; height: 100%; background: #6D28D9; border-radius: 6px; }
.stats-num { text-align: right; font-weight: 700; }

/* About photo: your photo, or Dot until there is one */
.about .photo.photo-real { padding: 0; border: 0; overflow: hidden; background: #EDE9FE; }
.about .photo.photo-real img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.about .photo.photo-dot { border: 0; background: #FFFFFF; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.about .photo.photo-dot .dot-svg { width: 160px; height: 160px; flex: none; }
@media (max-width: 860px) { .about .photo.photo-dot .dot-svg { width: 104px; height: 104px; } }
.about .photo-cap { font-size: 14px; color: #4C1D95; font-weight: 700; }
@media (max-width: 860px) { .home .about .photo.photo-real { flex-basis: 210px; width: 210px; height: 245px; } }
.home .about .photo.photo-real { height: 392px; }
@media (max-width: 860px) { .home .about .photo.photo-real { width: 200px; flex-basis: 200px; height: 327px; } }
.home .about .photo.photo-real { flex-basis: 300px; width: 300px; height: 368px; }
@media (max-width: 860px) { .home .about .photo.photo-real { width: 100%; max-width: 340px; flex-basis: auto; height: 417px; } }

/* First-visit tour */
.tour-layer { position: fixed; inset: 0; z-index: 80; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(30, 16, 64, .62); outline: 3px solid #FACC15; outline-offset: 0; transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.tour-card { position: fixed; background: #fff; border-radius: 22px; padding: 16px 16px 14px; box-shadow: 0 18px 50px rgba(30, 16, 64, .35); color: var(--ink); transition: top .25s, left .25s; }
.tour-head { display: flex; align-items: center; gap: 10px; padding-right: 64px; }
.tour-dot { flex: none; width: 44px; height: 44px; display: block; }
.tour-dot .dot-svg { width: 44px; height: 44px; }
.tour-title { margin: 0; font-size: 19px; line-height: 1.2; }
.tour-text { margin: 10px 0 14px; font-size: 15.5px; line-height: 1.45; }
.tour-foot { display: flex; align-items: center; gap: 8px; }
.tour-count { margin-right: auto; font-size: 13px; color: #6B7280; font-weight: 700; }
.tour-foot .btn { padding: 10px 16px; min-height: 0; }
.tour-skip { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: #6D28D9; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.tour-skip:focus-visible, .tour-card .btn:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }
.tour-replay { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: #6D28D9; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; } }

/* Starting out (Years 7–8) */
.start-hero { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #6D28D9, #4C1D95); color: #fff; border-radius: 26px; padding: 18px; margin: 8px 0 14px; }
.start-hero h1 { margin: 2px 0 6px; font-size: clamp(28px, 7vw, 38px); color: #fff; }
.start-hero p { margin: 0; }
.start-hero .hub-kicker { color: #FACC15; }
.start-dot { flex: none; width: 78px; height: 78px; display: block; }
.start-dot .dot-svg { width: 78px; height: 78px; }
.start-progress { margin: 0 0 6px; }
.start-path { list-style: none; padding: 0; margin: 16px 0; position: relative; }
.start-path::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: repeating-linear-gradient(180deg, #DDD6FE 0 6px, transparent 6px 14px); }
.start-stop { position: relative; display: flex; gap: 12px; margin-bottom: 12px; }
.start-num { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #fff; border: 3px solid #DDD6FE; color: #4C1D95; position: relative; z-index: 1; }
.start-stop.done .start-num { background: #FACC15; border-color: #EAB308; color: #422006; }
.start-stop.current .start-num { background: #6D28D9; border-color: #6D28D9; color: #fff; box-shadow: 0 0 0 5px rgba(109,40,217,.18); }
.start-body { flex: 1; background: #fff; border: 2px solid var(--line-soft); border-radius: 18px; padding: 12px 14px; }
.start-stop.current .start-body { border-color: #6D28D9; }
.start-body h3 { margin: 0 0 4px; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.start-body p { margin: 0 0 8px; font-size: 15px; }
.start-body .start-meta { font-size: 13px; color: #6B7280; font-weight: 700; }
.start-body .btn { padding: 9px 16px; min-height: 0; }
.start-next { font-size: 11px; font-weight: 800; background: #FACC15; color: #422006; border-radius: 999px; padding: 2px 8px; }
.start-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 2px dashed #C4B5FD; border-radius: 18px; padding: 12px 14px; margin: 12px 0; color: var(--ink); text-decoration: none; font-weight: 700; }
.start-link span { font-weight: 500; font-size: 14px; color: #4B5563; }
.start-link:hover { border-color: #6D28D9; }
.start-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.start .xp-bar { background: #EDE9FE; }

/* Built for the new GCSE */
.spec-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 14px; border-radius: 999px; background: #FEF9C3; color: #422006; font-weight: 800; font-size: 14px; border: 2px solid #FACC15; }
.spec-badge span { color: #6D28D9; font-size: 11px; }
.why-new { background: #4C1D95; color: #fff; }
.why-new .home-h2 { color: #fff; }
.why-new .home-small { color: #DDD6FE; }
.why-lead { font-size: 18px; line-height: 1.55; max-width: 62ch; margin: 0 0 12px; }
.why-lead strong { color: #FACC15; }
.why-table-wrap { margin: 20px 0 12px; border-radius: 20px; overflow: hidden; background: #fff; color: var(--ink); }
.why-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.why-table th, .why-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #EDE9FE; text-transform: none; letter-spacing: 0; }
.why-table thead th { font-size: 15px; background: #F5F3FF; color: #4B5563; font-weight: 800; }
.why-table thead th.why-us { background: #6D28D9; color: #fff; }
.why-table tbody th { font-weight: 800; color: #4C1D95; width: 28%; }
.why-table td.why-us { background: #FEFCE8; font-weight: 700; }
.why-table td.why-us::before { content: '✓ '; color: #6D28D9; font-weight: 900; }
.why-table tr:last-child th, .why-table tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .why-lead { font-size: 16.5px; }
  .why-table, .why-table tbody, .why-table tr, .why-table th, .why-table td { display: block; width: auto; }
  .why-table thead { display: none; }
  .why-table tbody tr { padding: 12px 14px; border-bottom: 1px solid #EDE9FE; }
  .why-table tbody th { padding: 0 0 6px; border: 0; width: auto; }
  .why-table td { padding: 6px 10px; border: 0; border-radius: 10px; font-size: 14.5px; }
  .why-table td.why-us { margin-bottom: 4px; }
  .why-table td:not(.why-us) { color: #6B7280; }
  .why-table td:not(.why-us)::before { content: 'Others: '; font-weight: 700; }
  .why-table td.why-us::before { content: '✓ TamzMaths: '; }
}