/*
 * App design system. Brand-neutral: it only reads tokens from /brand/{theme}/theme.css.
 * Never put a brand colour or font name in this file (a test checks there are no hex colours).
 * Bootstrap is kept for its grid and spacing utilities; components are restyled here.
 *
 *  1 Base            7 Quiz site (public)      13 Pupil dashboard
 *  2 Brand lockup    8 Landing page            14 Quiz and practice
 *  3 Buttons         9 Auth pages              15 Shop
 *  4 Forms          10 Teacher app             16 Motion
 *  5 Surfaces       11 Teacher insights        17 Small screens
 *  6 Page header    12 Pupil layout
 */

/* ---------- 1 Base ---------- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip;
  background: var(--surface-page); color: var(--text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  --bs-body-bg: var(--surface-page); --bs-body-color: var(--text); --bs-border-color: var(--line);
  --bs-body-font-family: var(--font-body);
}
h1, h2, h3, h4, h5, .display { font-family: var(--font-display); color: var(--brand-ink); letter-spacing: -0.025em; font-weight: 600; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { text-wrap: pretty; }
a { color: var(--accent-1); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-ink); }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
kbd { display: inline-grid; place-items: center; min-width: 1.6em; padding: 0.05em 0.4em; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface-raised); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
::selection { background: var(--accent-1-soft); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 0.875rem; }
.eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-1); }
.icon { width: 1.125rem; height: 1.125rem; flex: none; vertical-align: -0.2em; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row-gap { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.spacer { flex: 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 2 Brand lockup ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--brand-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand:hover { color: var(--brand-ink); }
.brand img { width: 30px; height: 30px; transition: transform 300ms cubic-bezier(.2,.8,.2,1.4); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand .join { color: var(--brand-highlight); }
.brand .suffix { font-weight: 400; color: var(--text-muted); }
.on-ink .brand, .on-ink .brand:hover, .on-night .brand, .on-night .brand:hover { color: var(--brand-on-ink); }
.on-ink .brand .join, .on-night .brand .join { color: var(--brand-highlight-soft); }
.on-ink .brand .suffix, .on-night .brand .suffix { color: var(--on-night-muted); }

/* ---------- 3 Buttons ---------- */
.btn {
  --bs-btn-font-family: var(--font-body); --bs-btn-font-weight: 600; --bs-btn-font-size: 0.9375rem;
  --bs-btn-padding-x: 1rem; --bs-btn-padding-y: 0.55rem; --bs-btn-border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; white-space: nowrap;
  transition: background-color 150ms, border-color 150ms, box-shadow 200ms, transform 150ms, color 150ms;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .icon { transition: transform 200ms; }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(2px); }
.btn-primary { --bs-btn-bg: var(--brand-ink); --bs-btn-border-color: var(--brand-ink); --bs-btn-color: var(--brand-on-ink);
  --bs-btn-hover-bg: var(--brand-ink-hover); --bs-btn-hover-border-color: var(--brand-ink-hover); --bs-btn-hover-color: var(--brand-on-ink);
  --bs-btn-active-bg: var(--brand-ink); --bs-btn-active-border-color: var(--brand-ink); --bs-btn-active-color: var(--brand-on-ink);
  --bs-btn-disabled-bg: var(--brand-ink); --bs-btn-disabled-border-color: var(--brand-ink);
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--on-fill) 12%, transparent); }
.btn-primary:hover { box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-ink) 28%, transparent); }
.btn-secondary, .btn-outline-primary { --bs-btn-bg: var(--surface-raised); --bs-btn-border-color: var(--line-strong); --bs-btn-color: var(--brand-ink);
  --bs-btn-hover-bg: var(--surface-raised); --bs-btn-hover-border-color: var(--brand-ink); --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-border-color: var(--brand-ink); --bs-btn-active-color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.btn-ghost { --bs-btn-color: var(--text-muted); --bs-btn-hover-color: var(--brand-ink); --bs-btn-hover-bg: var(--surface-sunken); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; }
.btn-danger { --bs-btn-bg: var(--wrong); --bs-btn-border-color: var(--wrong); --bs-btn-hover-bg: var(--wrong-ink); --bs-btn-hover-border-color: var(--wrong-ink); --bs-btn-color: var(--on-fill); --bs-btn-hover-color: var(--on-fill); }
.btn-link-danger { --bs-btn-color: var(--text-faint); --bs-btn-hover-color: var(--wrong-ink); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-padding-x: 0.5rem; }
.btn-sm { --bs-btn-padding-y: 0.35rem; --bs-btn-padding-x: 0.75rem; --bs-btn-font-size: 0.8125rem; --bs-btn-border-radius: 8px; }
.btn-lg { --bs-btn-padding-y: 0.85rem; --bs-btn-padding-x: 1.4rem; --bs-btn-font-size: 1.0625rem; --bs-btn-border-radius: 14px; }
.btn-xl { --bs-btn-padding-y: 1.05rem; --bs-btn-padding-x: 1.75rem; --bs-btn-font-size: 1.125rem; --bs-btn-border-radius: 16px; }
.btn-highlight { --bs-btn-bg: var(--brand-highlight); --bs-btn-border-color: var(--brand-highlight); --bs-btn-color: var(--on-fill); --bs-btn-hover-bg: var(--brand-ink); --bs-btn-hover-border-color: var(--brand-ink); --bs-btn-hover-color: var(--on-fill); --bs-btn-active-bg: var(--brand-highlight); --bs-btn-active-color: var(--on-fill); }
/* The quiz's own action colour. */
.btn-quiz { --bs-btn-bg: var(--quiz-ink); --bs-btn-border-color: var(--quiz-ink); --bs-btn-color: var(--on-fill);
  --bs-btn-hover-bg: color-mix(in srgb, var(--quiz-ink) 85%, var(--night)); --bs-btn-hover-border-color: color-mix(in srgb, var(--quiz-ink) 85%, var(--night)); --bs-btn-hover-color: var(--on-fill);
  --bs-btn-active-bg: var(--quiz-ink); --bs-btn-active-color: var(--on-fill); --bs-btn-disabled-bg: var(--quiz-ink); --bs-btn-disabled-border-color: var(--quiz-ink); --bs-btn-disabled-color: var(--on-fill);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--on-fill) 18%, transparent) inset, 0 8px 24px color-mix(in srgb, var(--quiz) 30%, transparent); }
.btn-quiz:hover { box-shadow: 0 1px 0 color-mix(in srgb, var(--on-fill) 18%, transparent) inset, 0 12px 32px color-mix(in srgb, var(--quiz) 42%, transparent); transform: translateY(-1px); }
/* Light buttons for dark (night) panels. */
.btn-light { --bs-btn-bg: var(--on-night); --bs-btn-border-color: var(--on-night); --bs-btn-color: var(--night); --bs-btn-hover-bg: var(--on-fill); --bs-btn-hover-border-color: var(--on-fill); --bs-btn-hover-color: var(--night); --bs-btn-active-bg: var(--on-night); --bs-btn-active-color: var(--night); box-shadow: 0 10px 30px color-mix(in srgb, var(--night) 50%, transparent); }
.btn-glass { --bs-btn-bg: color-mix(in srgb, var(--on-night) 8%, transparent); --bs-btn-border-color: color-mix(in srgb, var(--on-night) 18%, transparent); --bs-btn-color: var(--on-night);
  --bs-btn-hover-bg: color-mix(in srgb, var(--on-night) 14%, transparent); --bs-btn-hover-border-color: color-mix(in srgb, var(--on-night) 32%, transparent); --bs-btn-hover-color: var(--on-night);
  --bs-btn-active-bg: color-mix(in srgb, var(--on-night) 18%, transparent); --bs-btn-active-color: var(--on-night); --bs-btn-active-border-color: transparent; backdrop-filter: blur(8px); }

/* ---------- 4 Forms ---------- */
.form-label { font-weight: 600; font-size: 0.875rem; color: var(--brand-ink); margin-bottom: 0.35rem; }
.form-control, .form-select {
  min-height: 46px; border-radius: 10px; border: 1px solid var(--line-strong); background-color: var(--surface-raised);
  color: var(--text); font-size: 0.9375rem; transition: border-color 150ms, box-shadow 150ms;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus, .form-select:focus { border-color: var(--accent-1); box-shadow: var(--focus-ring); background-color: var(--surface-raised); color: var(--text); }
.form-control-sm, .form-select-sm { min-height: 34px; font-size: 0.8125rem; }
.form-control-lg { min-height: 56px; font-size: 1.0625rem; border-radius: 14px; }
.form-text { color: var(--text-muted); font-size: 0.8125rem; }
.form-check-input:checked { background-color: var(--brand-ink); border-color: var(--brand-ink); }
.form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--accent-1); }
.text-danger, .field-validation-error { color: var(--wrong) !important; font-size: 0.8125rem; }
.validation-summary-errors ul { margin: 0 0 1rem; padding: 0.75rem 1rem 0.75rem 2rem; background: var(--wrong-soft); color: var(--wrong-ink); border-radius: var(--radius-sm); }
.validation-summary-valid { display: none; }
.inline-form { display: flex; gap: 0.5rem; align-items: stretch; }
.inline-form .form-control { flex: 1; min-width: 0; }

/* ---------- 5 Surfaces ---------- */
.card-ui { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; }
.stack-cards > .card-ui + .card-ui, .col-lg-6 > .card-ui + .card-ui, .col-lg-5 > .card-ui + .card-ui, .col-lg-7 > .card-ui + .card-ui, main > .card-ui + .card-ui { margin-top: 1rem; }
.card-ui > h2, .card-ui > h3 { margin-bottom: 0.75rem; }
.card-ui.tight { padding: 0; overflow: hidden; }
.card-hover { transition: transform 200ms, box-shadow 200ms, border-color 200ms; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-ink { background: var(--brand-ink); color: var(--brand-on-ink); border-color: var(--brand-ink); }
.card-ink h2, .card-ink h3 { color: var(--brand-on-ink); }
.card-ink .muted { color: var(--brand-on-ink-muted); }
.card-ink .eyebrow { color: var(--brand-highlight-soft); }
.panel-narrow { max-width: 28rem; margin: 0 auto; }
.panel-medium { max-width: 44rem; margin: 0 auto; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }

/* Lists of rows (classes, quizzes, pupils) */
.list-ui { list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.list-ui > li + li, .list-ui > a + a, .list-ui > div + div { border-top: 1px solid var(--line); }
.list-ui .item { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.15rem; color: var(--text); text-decoration: none; transition: background-color 120ms; }
a.item:hover, .list-ui > a:hover { background: var(--surface-raised); }
.list-ui .item-title { font-weight: 600; color: var(--brand-ink); }
.list-ui .item-meta, .item-meta { color: var(--text-muted); font-size: 0.8125rem; }
.list-ui .item .chev { color: var(--text-faint); transition: transform 150ms; }
.list-ui a.item:hover .chev { transform: translateX(3px); color: var(--brand-ink); }
.tile-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-1-soft); color: var(--accent-1); flex: none; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap; }
.pill .icon { width: 0.9rem; height: 0.9rem; }
.pill-success { background: var(--correct-soft); color: var(--correct-ink); }
.pill-ink { background: var(--brand-ink); color: var(--brand-on-ink); }
.pill-highlight { background: var(--accent-3-soft); color: var(--brand-highlight); }
.pill-accent-1 { background: var(--accent-1-soft); color: var(--accent-1); }
.pill-accent-2 { background: var(--accent-2-soft); color: var(--accent-2); }
.pill-quiz { background: var(--quiz-soft); color: var(--quiz-ink); }
.pill-sun { background: var(--sun-soft); color: var(--sun-ink); }
.pill-warn { background: var(--misconception-soft); color: var(--misconception); }
.pill-wrong { background: var(--wrong-soft); color: var(--wrong-ink); }

/* Alerts */
.notice { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: 0.9375rem; border: 1px solid transparent; }
.notice .icon { margin-top: 0.2rem; }
.notice-success { background: var(--correct-soft); color: var(--correct-ink); border-color: color-mix(in srgb, var(--correct) 35%, transparent); }
.notice-warning { background: var(--warning-soft); color: var(--warning-ink); border-color: color-mix(in srgb, var(--warning-ink) 15%, transparent); }
.notice-info { background: var(--accent-1-soft); color: var(--accent-1); }

/* Tables */
.table-ui { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.table-ui th { text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-card); }
.table-ui td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table-ui tr:last-child td { border-bottom: 0; }
.table-ui tbody tr:hover td { background: var(--surface-raised); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat { position: relative; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.stat-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--brand-ink); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-label { color: var(--text-muted); font-size: 0.8125rem; }
.stat .tile-icon { position: absolute; top: 0.9rem; right: 0.9rem; width: 32px; height: 32px; border-radius: 10px; }
.stat .tile-icon .icon { width: 1rem; height: 1rem; }
.meter { height: 6px; background: var(--surface-sunken); border-radius: 999px; overflow: hidden; margin-top: 0.5rem; }
.meter progress { display: block; width: 100%; height: 100%; appearance: none; border: 0; background: transparent; }
.meter progress::-webkit-progress-bar { background: transparent; }
.meter progress::-webkit-progress-value { background: var(--accent-1); border-radius: 999px; }
.meter progress::-moz-progress-bar { background: var(--accent-1); border-radius: 999px; }
.text-correct { color: var(--correct-ink) !important; }

/* Charts drawn by Charts.cs */
.ring { width: 100%; height: 100%; display: block; }
.ring circle { fill: none; stroke-width: 11; }
.ring-track { stroke: var(--surface-sunken); }
.ring-value { stroke: var(--quiz); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; }
.ring-sun .ring-value { stroke: var(--sun); }
.ring-on-night .ring-track { stroke: color-mix(in srgb, var(--on-night) 12%, transparent); }
.ring-on-night .ring-value { stroke: var(--quiz-bright); }
.segbar { display: block; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; }
.segbar-track, .bar-rest, .seg-none { fill: var(--surface-sunken); }
.bar-fill, .seg-secure { fill: var(--quiz); }
.seg-shaky { fill: var(--sun); }
.seg-learning { fill: color-mix(in srgb, var(--wrong) 70%, var(--surface-card)); }
.bar-fill-low { fill: var(--wrong); }
.bar-fill-mid { fill: var(--sun); }
.bar-fill-accent { fill: var(--accent-1); }

/* Empty states */
.empty { text-align: center; padding: 2.5rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-muted); background: var(--surface-card); }
.empty .tile-icon { margin: 0 auto 0.75rem; }
.empty h3 { margin-bottom: 0.25rem; }

/* Disclosure */
details.danger-zone summary { cursor: pointer; color: var(--wrong); font-size: 0.875rem; font-weight: 600; }
details.danger-zone[open] summary { margin-bottom: 0.5rem; }

/* ---------- 6 Page header ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.page-head h1 { margin: 0.15rem 0 0; }
.page-head .sub { color: var(--text-muted); margin: 0.35rem 0 0; }
.crumb { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; }
.crumb:hover { color: var(--brand-ink); }
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin: -0.5rem 0 1.75rem; overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 0.9375rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--brand-ink); }
.tabs a.active { color: var(--brand-ink); border-bottom-color: var(--brand-ink); }

/* ---------- 7 Quiz site (public) ---------- */
.container-wide { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface-page) 80%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); transition: background-color 250ms, border-color 250ms; }
.topbar-inner { display: flex; align-items: center; gap: 1rem; height: 68px; }
.topbar nav { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.site-nav { display: flex; gap: 0.25rem; margin-left: 1.5rem; }
.site-nav a { padding: 0.4rem 0.75rem; border-radius: 8px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: color 150ms, background-color 150ms; }
.site-nav a:hover { color: var(--brand-ink); background: var(--surface-sunken); }
.site-nav a.active { color: var(--brand-ink); }
/* Over the night hero the header is clear, then frosts as the page scrolls. */
.topbar-night { position: fixed; inset: 0 0 auto; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar-night .brand, .topbar-night .brand:hover { color: var(--on-night); }
.topbar-night .brand .join { color: var(--brand-highlight-soft); }
.topbar-night .brand .suffix { color: var(--on-night-muted); }
.topbar-night .site-nav a, .topbar-night .btn-ghost { color: var(--on-night-muted); --bs-btn-color: var(--on-night-muted); --bs-btn-hover-color: var(--on-night); --bs-btn-hover-bg: color-mix(in srgb, var(--on-night) 10%, transparent); }
.topbar-night .site-nav a:hover { color: var(--on-night); background: color-mix(in srgb, var(--on-night) 10%, transparent); }
.topbar-night.is-scrolled { background: color-mix(in srgb, var(--night) 78%, transparent); border-color: color-mix(in srgb, var(--on-night) 10%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); }
.site-main { flex: 1 0 auto; padding: 2.5rem 0 4rem; }
.site-main-flush { flex: 1 0 auto; }
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--text-muted); font-size: 0.875rem; }
.site-footer .container, .site-footer .container-wide { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand-ink); }
.footer-night { background: var(--night); color: var(--on-night-muted); border-top-color: var(--night-line); }
.footer-night a { color: var(--on-night-muted); }
.footer-night a:hover { color: var(--on-night); }

/* ---------- 8 Landing page ---------- */
.on-night { color: var(--on-night); }
.on-night h1, .on-night h2, .on-night h3 { color: var(--on-night); }
.on-night .muted, .on-night .lead, .on-night .section-lead { color: var(--on-night-muted); }
.on-night .eyebrow { color: var(--quiz-bright); }

.night { position: relative; background: var(--night); color: var(--on-night); overflow: hidden; isolation: isolate; }
/* Slow-moving colour fields behind the hero, drawn from the theme's accents. */
.aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -2; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: 0.85; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -6vw; top: 4%; background: color-mix(in srgb, var(--accent-1) 85%, transparent); animation: drift-a 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -4vw; top: -6%; background: color-mix(in srgb, var(--accent-2) 90%, transparent); animation: drift-b 26s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 38%; top: 30%; background: color-mix(in srgb, var(--quiz) 70%, transparent); animation: drift-c 19s ease-in-out infinite alternate; }
.aurora i:nth-child(4) { width: 22vw; height: 22vw; right: 18%; top: 52%; background: color-mix(in srgb, var(--brand-highlight) 55%, transparent); animation: drift-a 24s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(8vw, 6vh) scale(1.12); } }
@keyframes drift-b { to { transform: translate(-10vw, 10vh) scale(0.9); } }
@keyframes drift-c { to { transform: translate(-6vw, -8vh) scale(1.2); } }
/* A faint grid that fades out towards the edges. */
.gridlines { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--on-night) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-night) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 20%, transparent 75%); }
.night-fade { position: absolute; inset: auto 0 0; height: 160px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--night)); }

.hero-x { padding-top: 9rem; padding-bottom: 4rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3.5rem; align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem 0.35rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--on-night) 7%, transparent); border: 1px solid color-mix(in srgb, var(--on-night) 14%, transparent); color: var(--on-night); font-size: 0.8125rem; font-weight: 500; backdrop-filter: blur(6px); }
.hero-kicker b { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--quiz-bright); color: var(--night); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-title { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; margin: 1.5rem 0 1.4rem; max-width: 13ch;
  background: linear-gradient(100deg, var(--on-night) 0%, var(--on-night) 40%, var(--quiz-bright) 55%, var(--brand-highlight-soft) 70%, var(--on-night) 85%);
  background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 9s ease-in-out 1s infinite; }
@keyframes sheen { 0%, 20% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
.hero-lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--on-night-muted); max-width: 34rem; margin: 0 0 2rem; }

/* The pupil's way in, right in the hero. */
.join-box { max-width: 30rem; padding: 0.5rem; border-radius: 20px; background: color-mix(in srgb, var(--on-night) 8%, transparent); border: 1px solid color-mix(in srgb, var(--on-night) 16%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 60px color-mix(in srgb, var(--night) 60%, transparent); }
.join-box form { display: flex; gap: 0.5rem; }
.join-box input { flex: 1; min-width: 0; height: 56px; border: 0; border-radius: 14px; padding: 0 1.1rem; background: var(--on-night); color: var(--night); font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.join-box input::placeholder { color: var(--text-faint); letter-spacing: 0.14em; }
.join-box input:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--quiz-bright) 45%, transparent); }
.join-box .btn { height: 56px; border-radius: 14px; }
.join-box-label { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.6rem 0.6rem; font-size: 0.8125rem; color: var(--on-night-muted); }
.join-box-label .icon { color: var(--quiz-bright); }
.hero-alt { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1.5rem; color: var(--on-night-muted); font-size: 0.9375rem; }
.hero-alt a { color: var(--on-night); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.hero-alt a:hover { color: var(--quiz-bright); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 2.25rem; font-size: 0.8125rem; color: var(--on-night-muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-trust .icon { color: var(--quiz-bright); width: 1rem; height: 1rem; }

/* The animated demo: a question being answered, on a loop. */
.demo { position: relative; padding: 1.5rem 0 2.5rem; perspective: 1400px; }
.demo-card { position: relative; z-index: 2; background: var(--surface-raised); color: var(--text); border-radius: 26px; padding: 1.6rem; box-shadow: 0 40px 100px color-mix(in srgb, var(--night) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--on-night) 10%, transparent); transform: rotateY(-8deg) rotateX(4deg); transform-style: preserve-3d; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: rotateY(-6deg) rotateX(3deg) translateY(-10px); } }
.demo-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.demo-progress { display: flex; gap: 4px; margin-bottom: 1.1rem; }
.demo-progress i { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-sunken); }
.demo-progress i.done { background: var(--quiz); }
.demo-progress i.now { background: color-mix(in srgb, var(--quiz) 40%, var(--surface-sunken)); }
.demo-q { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--brand-ink); line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 1rem; }
.demo-opts { display: grid; gap: 0.5rem; }
.demo-opt { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-raised); font-size: 0.975rem; }
.demo-opt b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-1-soft); color: var(--accent-1); font-family: var(--font-display); font-size: 0.875rem; flex: none; }
.demo-opt .icon { margin-left: auto; opacity: 0; color: var(--correct); width: 1.35rem; height: 1.35rem; }
.demo-opt.pick { animation: demo-pick 9s infinite; }
.demo-opt.pick b { animation: demo-pick-key 9s infinite; }
.demo-opt.pick .icon { animation: demo-tick 9s infinite; }
@keyframes demo-pick {
  0%, 22% { border-color: var(--line); background: var(--surface-raised); box-shadow: none; }
  28% { border-color: var(--line-strong); background: var(--surface-raised); box-shadow: var(--shadow); }
  34%, 44% { border-color: var(--quiz); background: var(--quiz-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--quiz) 18%, transparent); }
  50%, 88% { border-color: var(--correct); background: var(--correct-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--correct) 18%, transparent); }
  96%, 100% { border-color: var(--line); background: var(--surface-raised); box-shadow: none; }
}
@keyframes demo-pick-key { 0%, 32% { background: var(--accent-1-soft); color: var(--accent-1); } 34%, 44% { background: var(--quiz); color: var(--on-fill); } 50%, 88% { background: var(--correct); color: var(--on-fill); } 96%, 100% { background: var(--accent-1-soft); color: var(--accent-1); } }
@keyframes demo-tick { 0%, 48% { opacity: 0; transform: scale(0.4) rotate(-20deg); } 54% { opacity: 1; transform: scale(1.25); } 60%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
.demo-cursor { position: absolute; z-index: 3; width: 22px; height: 22px; left: 72%; top: 82%; pointer-events: none; animation: demo-cursor 9s infinite; }
.demo-cursor svg { width: 100%; height: 100%; fill: var(--night); stroke: var(--on-fill); stroke-width: 1.5; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--night) 40%, transparent)); }
@keyframes demo-cursor { 0%, 8% { left: 78%; top: 92%; opacity: 0; } 14% { opacity: 1; } 28% { left: 46%; top: 55%; } 32% { left: 46%; top: 55%; transform: scale(0.85); } 36%, 86% { left: 46%; top: 55%; transform: scale(1); opacity: 1; } 94%, 100% { left: 78%; top: 92%; opacity: 0; } }
.demo-feedback { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 14px; background: var(--correct-soft); color: var(--correct-ink); font-weight: 600; font-size: 0.9375rem; animation: demo-feedback 9s infinite; }
@keyframes demo-feedback { 0%, 50% { opacity: 0; transform: translateY(8px); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }
.demo-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.95rem; border-radius: 16px; background: color-mix(in srgb, var(--night-raised) 88%, transparent); border: 1px solid color-mix(in srgb, var(--on-night) 14%, transparent); color: var(--on-night); font-size: 0.8125rem; box-shadow: 0 20px 50px color-mix(in srgb, var(--night) 60%, transparent); backdrop-filter: blur(10px); }
.demo-chip strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; }
.demo-chip small { color: var(--on-night-muted); }
.demo-chip .ring { width: 42px; height: 42px; }
.demo-chip-streak { top: -2.25rem; right: 2.5rem; animation: demo-pop 9s infinite; }
.demo-chip-streak .flame { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--sun); color: var(--night); }
@keyframes demo-pop { 0%, 52% { opacity: 0; transform: translateY(10px) scale(0.9); } 58% { opacity: 1; transform: translateY(-4px) scale(1.04); } 62%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(10px) scale(0.9); } }
.demo-chip-mastery { bottom: -1.5rem; left: -1.5rem; animation: float 8s ease-in-out -2s infinite; }
.demo-chip-sure { bottom: -1.25rem; right: -1.25rem; animation: float 9s ease-in-out -4s infinite; }
.sure-dots { display: flex; gap: 4px; }
.sure-dots i { width: 9px; height: 9px; border-radius: 3px; }
.sure-dots .s1 { background: var(--quiz-bright); }
.sure-dots .s2 { background: var(--sun); }
.sure-dots .s3 { background: var(--misconception); }
.sure-dots .s4 { background: color-mix(in srgb, var(--on-night) 30%, transparent); }

/* Subjects scrolling past. */
.marquee { position: relative; overflow: hidden; padding: 1.25rem 0; border-top: 1px solid color-mix(in srgb, var(--on-night) 8%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--on-night-muted); font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; white-space: nowrap; }
.marquee-track .icon { color: var(--quiz-bright); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Sections below the hero */
.section { padding: 6rem 0; }
.section-tight { padding: 4rem 0; }
.section-sunken { background: var(--surface-sunken); }
.section-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.04; letter-spacing: -0.04em; margin: 0.75rem 0 1rem; max-width: 18ch; }
.section-lead { font-size: 1.125rem; color: var(--text-muted); max-width: 40rem; margin: 0; }
.section-center { text-align: center; }
.section-center .section-title, .section-center .section-lead { margin-left: auto; margin-right: auto; }
.gradient-text { background: linear-gradient(100deg, var(--accent-1), var(--quiz) 45%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3rem; counter-reset: step; }
.step { position: relative; padding: 1.75rem; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--quiz-ink); margin-bottom: 1.25rem; }
.step h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.step p { color: var(--text-muted); margin: 0; }
.step-visual { margin-top: 1.5rem; padding: 1rem; border-radius: 16px; background: var(--surface-page); border: 1px solid var(--line); min-height: 7.5rem; display: grid; place-items: center; }
.code-tiles { display: flex; gap: 5px; align-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--brand-ink); }
.code-tiles i { display: grid; place-items: center; width: 30px; height: 38px; border-radius: 8px; background: var(--surface-raised); border: 1.5px solid var(--line-strong); font-style: normal; box-shadow: var(--shadow-sm); }
.code-tiles .dash { width: auto; border: 0; background: none; box-shadow: none; color: var(--text-faint); }
.code-tiles i:nth-child(n+6) { border-color: var(--quiz); color: var(--quiz-ink); }
.mini-feedback { display: grid; gap: 0.4rem; width: 100%; }
.mini-feedback div { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.875rem; font-weight: 600; }
.mini-feedback .ok { background: var(--correct-soft); color: var(--correct-ink); }
.mini-feedback .no { background: var(--wrong-soft); color: var(--wrong-ink); }
.mini-bars { display: grid; gap: 0.55rem; width: 100%; font-size: 0.8125rem; }
.mini-bars div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; align-items: center; color: var(--text-muted); }

/* Bento grid of pupil features */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.bento-cell { position: relative; overflow: hidden; padding: 1.75rem; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.5rem; transition: transform 250ms, box-shadow 250ms; }
.bento-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bento-cell h3 { font-size: 1.3rem; margin: 0; }
.bento-cell p { color: var(--text-muted); margin: 0; font-size: 0.9375rem; }
.bento-cell .tile-icon { margin-bottom: 0.5rem; }
.bento-4 { grid-column: span 4; }
.bento-3 { grid-column: span 3; }
.bento-2 { grid-column: span 2; }
.bento-dark { background: var(--night); border-color: var(--night); color: var(--on-night); }
.bento-dark h3 { color: var(--on-night); }
.bento-dark p { color: var(--on-night-muted); }
.bento-dark .tile-icon { background: color-mix(in srgb, var(--quiz-bright) 16%, transparent); color: var(--quiz-bright); }
.bento-art { margin-top: auto; padding-top: 1.25rem; }
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.matrix div { padding: 0.85rem 0.95rem; border-radius: 14px; font-size: 0.8125rem; line-height: 1.35; }
.matrix strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.matrix .m-secure { background: var(--quiz-soft); color: var(--quiz-ink); }
.matrix .m-shaky { background: var(--sun-soft); color: var(--sun-ink); }
.matrix .m-mis { background: var(--misconception-soft); color: var(--misconception); }
.matrix .m-gap { background: var(--surface-sunken); color: var(--text-muted); }
.bento-dark .matrix .m-secure { background: color-mix(in srgb, var(--quiz-bright) 16%, transparent); color: var(--quiz-bright); }
.bento-dark .matrix .m-shaky { background: color-mix(in srgb, var(--sun) 18%, transparent); color: var(--sun); }
.bento-dark .matrix .m-mis { background: color-mix(in srgb, var(--misconception) 28%, transparent); color: var(--misconception-soft); }
.bento-dark .matrix .m-gap { background: color-mix(in srgb, var(--on-night) 8%, transparent); color: var(--on-night-muted); }
.big-ring { position: relative; width: 9rem; height: 9rem; margin: 0 auto; }
.big-ring > span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--brand-ink); line-height: 1; }
.big-ring > span small { display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.25rem; }
.keycaps { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.keycaps kbd { min-width: 2.4rem; height: 2.4rem; font-size: 0.9375rem; color: var(--brand-ink); border-radius: 10px; }
.heat { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.heat i { aspect-ratio: 1; border-radius: 4px; background: var(--surface-sunken); }
.heat .l1 { background: color-mix(in srgb, var(--quiz) 30%, var(--surface-sunken)); }
.heat .l2 { background: color-mix(in srgb, var(--quiz) 55%, var(--surface-sunken)); }
.heat .l3 { background: color-mix(in srgb, var(--quiz) 80%, var(--surface-sunken)); }
.heat .l4 { background: var(--quiz-ink); }

/* For teachers */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.ticks li { display: flex; gap: 0.85rem; align-items: flex-start; }
.ticks li > .icon { flex: none; width: 1.75rem; height: 1.75rem; padding: 0.35rem; border-radius: 9px; background: var(--quiz-soft); color: var(--quiz-ink); margin-top: 0.1rem; }
.ticks strong { display: block; color: var(--brand-ink); }
.ticks span { color: var(--text-muted); font-size: 0.9375rem; }
.preview-frame { margin: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; text-align: left; }
.preview-bar { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-card); align-items: center; }
.preview-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.preview-bar em { margin-left: 0.75rem; font-style: normal; font-size: 0.75rem; color: var(--text-faint); font-family: var(--font-mono); }
.preview-body { padding: 1.5rem; overflow-x: auto; }

.privacy-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.privacy-band div { padding: 1.4rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--on-night) 5%, transparent); border: 1px solid color-mix(in srgb, var(--on-night) 10%, transparent); }
.privacy-band .icon { width: 1.5rem; height: 1.5rem; color: var(--quiz-bright); }
.privacy-band strong { display: block; margin-top: 0.85rem; color: var(--on-night); font-family: var(--font-display); font-size: 1.1rem; }
.privacy-band span { color: var(--on-night-muted); font-size: 0.9rem; }

.final-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; padding: 4.5rem 2rem; text-align: center; background: var(--night); color: var(--on-night); }
.final-cta .aurora { inset: -40% -10%; height: 180%; opacity: 0.7; }
.final-cta h2 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.75rem); letter-spacing: -0.045em; line-height: 1; color: var(--on-night); margin: 0 auto 1rem; max-width: 16ch; }
.final-cta p { color: var(--on-night-muted); font-size: 1.125rem; margin: 0 auto 2rem; max-width: 34rem; }
.final-cta .hero-actions { justify-content: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Older landing pieces still used by other pages */
.hero { padding: 3.5rem 0 3rem; text-align: center; }
.hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 14ch; margin: 1rem auto 1.25rem; }
.hero .lead { font-size: 1.1875rem; color: var(--text-muted); max-width: 40rem; margin: 0 auto 2rem; }
.subject-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.75rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 4rem; }
.feature h3 { margin: 0.9rem 0 0.35rem; }
.feature p { color: var(--text-muted); margin: 0; font-size: 0.9375rem; }
.audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 4rem; }
.cta-band { margin-top: 4rem; border-radius: var(--radius-xl); padding: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.cta-band h2 { font-size: 1.75rem; margin: 0 0 0.25rem; }

/* ---------- 9 Auth pages ---------- */
.auth { max-width: 27rem; margin: 1.5rem auto 0; }
.auth h1 { font-size: 2rem; text-align: center; letter-spacing: -0.035em; }
.auth .sub { text-align: center; color: var(--text-muted); margin: -0.25rem 0 1.5rem; }
.auth .card-ui { padding: 1.85rem; box-shadow: var(--shadow-lg); }
.auth .alt { text-align: center; color: var(--text-muted); font-size: 0.9375rem; margin-top: 1.25rem; }

/* The pupil join page: one big friendly card on night. */
.join-page { position: relative; flex: 1 0 auto; display: grid; place-items: center; padding: 7rem 1rem 4rem; }
.join-card { width: 100%; max-width: 29rem; background: var(--surface-raised); border-radius: var(--radius-xl); padding: 2.25rem 2rem 2rem; box-shadow: 0 40px 120px color-mix(in srgb, var(--night) 70%, transparent); }
.join-card h1 { font-size: 2.1rem; letter-spacing: -0.04em; margin: 0.5rem 0 0.35rem; }
.join-card .lead-sm { color: var(--text-muted); margin: 0 0 1.75rem; }
.join-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--quiz), var(--accent-1)); color: var(--on-fill); box-shadow: 0 12px 30px color-mix(in srgb, var(--quiz) 40%, transparent); }
.join-badge .icon { width: 1.6rem; height: 1.6rem; }
.code-input { height: 68px; text-align: center; font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-ink); border-radius: 16px; border-width: 2px; }
.code-input.is-complete { border-color: var(--quiz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--quiz) 18%, transparent); }
.join-privacy { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: 14px; background: var(--surface-page); color: var(--text-muted); font-size: 0.8125rem; line-height: 1.45; }
.join-privacy .icon { color: var(--quiz-ink); margin-top: 0.1rem; }

/* ---------- 10 Teacher app ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 252px; flex: none; background: var(--surface-sunken); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 1rem 0.75rem; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { padding: 0.35rem 0.6rem 1.25rem; }
.sidebar .brand .suffix { display: none; }
@media (min-width: 901px) {
  /* Paint the sidebar column the full page height, however long the content is. */
  .app { background: linear-gradient(to right, var(--surface-sunken) 0 251px, var(--line) 251px 252px, transparent 252px); }
  .sidebar { border-right: 0; background: transparent; }
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); padding: 1rem 0.75rem 0.35rem; }
.side-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.9375rem; transition: background-color 120ms, color 120ms; }
.side-link .icon { color: var(--text-muted); }
.side-link:hover { background: color-mix(in srgb, var(--brand-ink) 5%, transparent); color: var(--brand-ink); }
.side-link.active { background: var(--surface-raised); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.side-link.active .icon { color: var(--accent-1); }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 0.75rem; display: flex; align-items: center; gap: 0.6rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-ink); color: var(--brand-on-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; flex: none; }
.side-foot .who { min-width: 0; line-height: 1.25; }
.side-foot .who strong { display: block; color: var(--brand-ink); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .who span { font-size: 0.75rem; color: var(--text-muted); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { width: 100%; max-width: 72rem; margin: 0 auto; padding: 2.25rem 2.5rem 4rem; flex: 1; }
.app-foot { padding: 1rem 2.5rem; color: var(--text-faint); font-size: 0.8125rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.app-foot a { color: var(--text-faint); text-decoration: none; }

/* Join code */
.join-code-card { text-align: center; min-width: 15rem; }
.join-code { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-ink); }

/* Library */
.subject { border-top: 4px solid var(--accent-1); }
.subject.accent-2 { border-top-color: var(--accent-2); }
.subject.accent-3 { border-top-color: var(--accent-3); }
.subject.accent-2 .tile-icon { background: var(--accent-2-soft); color: var(--accent-2); }
.subject.accent-3 .tile-icon { background: var(--accent-3-soft); color: var(--accent-3); }
.question-card { padding: 1.1rem 1.25rem; }
.answer-list { list-style: none; padding: 0; margin: 0.6rem 0 0 1.85rem; display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.answer-list li { color: var(--text-muted); }
.answer-list li.correct { color: var(--correct-ink); font-weight: 600; }

/* Results grid */
.grid-results { border-collapse: separate; border-spacing: 3px; font-size: 0.875rem; }
.grid-results th { font-weight: 600; color: var(--text-muted); padding: 0.4rem 0.5rem; text-align: center; white-space: nowrap; }
.grid-results td { text-align: center; padding: 0; }
.grid-results .name { text-align: left; padding: 0.4rem 1rem 0.4rem 0.25rem; color: var(--brand-ink); font-weight: 500; white-space: nowrap; position: sticky; left: 0; background: var(--surface-card); }
.preview-body .grid-results .name { background: var(--surface-raised); }
.grid-results .score { color: var(--text-muted); padding: 0 0.75rem; white-space: nowrap; }
.cell { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 8px; font-weight: 700; }
.cell-correct { background: var(--correct); color: var(--on-fill); }
.cell-wrong { background: var(--wrong-soft); color: var(--wrong); }
.cell-none { background: var(--surface-sunken); color: var(--text-faint); }
.pct-low { color: var(--wrong); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.legend .k-secure { background: var(--quiz); }
.legend .k-shaky { background: var(--sun); }
.legend .k-learning { background: color-mix(in srgb, var(--wrong) 70%, var(--surface-card)); }
.legend .k-none { background: var(--surface-sunken); border: 1px solid var(--line); }

/* ---------- 11 Teacher insights ---------- */
.overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.overview .stat { padding: 1.15rem 1.25rem; }
.overview .stat-value { font-size: 2rem; }
.overview-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); padding: 1.75rem; margin-bottom: 1.5rem; background: var(--night); color: var(--on-night); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.overview-hero .aurora { opacity: 0.55; filter: blur(60px); }
.overview-hero h1 { color: var(--on-night); margin: 0.2rem 0 0.25rem; }
.overview-hero p { color: var(--on-night-muted); margin: 0; }
.overview-hero .eyebrow { color: var(--quiz-bright); }
.insight-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 1.25rem; align-items: start; }
.bar-rows { display: grid; gap: 0.85rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; gap: 0.35rem 0.85rem; align-items: center; }
.bar-row-title { font-weight: 600; color: var(--brand-ink); font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row-meta { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-muted); margin-top: -0.25rem; }
.bar-row-value { font-family: var(--font-display); font-weight: 700; color: var(--brand-ink); text-align: right; font-variant-numeric: tabular-nums; grid-row: span 2; align-self: start; }
.bar-row .segbar { grid-column: 1; }
.q-insight { padding: 0.95rem 0; border-top: 1px solid var(--line); }
.q-insight:first-child { border-top: 0; padding-top: 0; }
.q-insight p { margin: 0 0 0.35rem; color: var(--brand-ink); font-weight: 500; line-height: 1.4; }
.q-insight .item-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: center; }
.q-insight .wrong-pick { color: var(--wrong-ink); }
.strength { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 7rem; }
.strength .segbar { width: 5rem; height: 8px; }

/* ---------- 12 Pupil layout ---------- */
.pupil-body { background: var(--surface-page); }
.pupil-bar { position: sticky; top: 0; z-index: 30; background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--night-line); }
.pupil-bar .topbar-inner { height: 64px; }
.pupil-nav { display: flex; gap: 0.25rem; margin-left: 1rem; }
.pupil-nav a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 10px; color: var(--on-night-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 150ms, background-color 150ms; }
.pupil-nav a:hover { color: var(--on-night); background: color-mix(in srgb, var(--on-night) 8%, transparent); }
.pupil-nav a.active { color: var(--on-night); background: color-mix(in srgb, var(--on-night) 12%, transparent); }
.pupil-nav .icon { width: 1rem; height: 1rem; }
.pupil-who { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.pupil-who .avatar { background: linear-gradient(135deg, var(--quiz), var(--accent-1)); color: var(--on-fill); }
.pupil-who .who { line-height: 1.2; font-size: 0.8125rem; color: var(--on-night-muted); }
.pupil-who .who strong { display: block; color: var(--on-night); font-size: 0.875rem; }
.pupil-who .btn-ghost { --bs-btn-color: var(--on-night-muted); --bs-btn-hover-color: var(--on-night); --bs-btn-hover-bg: color-mix(in srgb, var(--on-night) 10%, transparent); }
.pupil-main { flex: 1 0 auto; padding: 1.75rem 0 3.5rem; }
.pupil-wrap { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
.pupil-wide { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- 13 Pupil dashboard ---------- */
.dash-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); padding: 2rem 2.25rem; background: var(--night); color: var(--on-night); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.dash-hero .aurora { opacity: 0.6; filter: blur(60px); inset: -60% -10% auto; height: 220%; }
.dash-hero h1 { color: var(--on-night); font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); letter-spacing: -0.04em; margin: 0.35rem 0 0.5rem; }
.dash-hero p { color: var(--on-night-muted); margin: 0; max-width: 34rem; }
.dash-hero .eyebrow { color: var(--quiz-bright); }
.dash-hero .hero-actions { justify-content: flex-start; margin-top: 1.5rem; }
.dash-ring { position: relative; width: 10.5rem; height: 10.5rem; }
.dash-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--on-night); }
.dash-ring > span small { display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-muted); margin-top: 0.4rem; }
.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 2.5rem; }
.dash-stats .stat .tile-icon.t-quiz { background: var(--quiz-soft); color: var(--quiz-ink); }
.dash-stats .stat .tile-icon.t-sun { background: var(--sun-soft); color: var(--sun-ink); }
.dash-stats .stat .tile-icon.t-wrong { background: var(--wrong-soft); color: var(--wrong-ink); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.dash-section + .dash-section { margin-top: 2.5rem; }
.dash-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dash-section-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.03em; }
.dash-section-head .crumb { white-space: nowrap; }

.todo { display: grid; gap: 0.85rem; }
.todo-card { position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 200ms, box-shadow 200ms, border-color 200ms; }
.todo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--quiz) 40%, var(--line)); }
.todo-card .tile-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--quiz-soft); color: var(--quiz-ink); }
.todo-card.is-due .tile-icon { background: var(--sun-soft); color: var(--sun-ink); }
.todo-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--brand-ink); letter-spacing: -0.015em; line-height: 1.2; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin-top: 0.3rem; font-size: 0.8125rem; color: var(--text-muted); }
.todo-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.todo-meta .icon { width: 0.95rem; height: 0.95rem; }
.todo-card .segbar { margin-top: 0.6rem; height: 6px; max-width: 16rem; }
.todo-card form { margin-left: auto; }

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.mode { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; width: 100%; height: 100%; padding: 1.15rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-card); text-align: left; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 200ms, box-shadow 200ms, border-color 200ms; font: inherit; }
.mode:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--tone, var(--quiz)) 45%, var(--line)); }
.mode:disabled { cursor: not-allowed; opacity: 0.6; }
.mode .tile-icon { background: color-mix(in srgb, var(--tone, var(--quiz)) 14%, var(--surface-card)); color: var(--tone, var(--quiz-ink)); margin-bottom: 0.35rem; }
.mode strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--brand-ink); line-height: 1.2; }
.mode span { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; }
.mode::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--quiz)) 10%, transparent); transition: transform 300ms; }
.mode:hover::after { transform: scale(1.4); }
.mode-smart { --tone: var(--quiz-ink); }
.mode-mistakes { --tone: var(--wrong); }
.mode-topic { --tone: var(--accent-2); }
.mode-count { position: absolute; top: 1rem; right: 1rem; z-index: 1; }

.topics { display: grid; gap: 0.25rem; }
.topic-unit { margin: 1rem 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.topic-unit:first-child { margin-top: 0; }
.topic { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: 0.75rem 0.9rem; border-radius: 14px; text-decoration: none; color: var(--text); transition: background-color 150ms; }
.topic:hover { background: var(--surface-page); }
.topic-main { display: grid; gap: 0.35rem; min-width: 0; }
.topic-title { font-weight: 600; color: var(--brand-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic .segbar { height: 7px; }
.topic-go { color: var(--text-faint); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; transition: background-color 150ms, color 150ms, transform 150ms; }
.topic:hover .topic-go { background: var(--quiz-soft); color: var(--quiz-ink); transform: translateX(2px); }
.band { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.band-Secure { background: var(--quiz-soft); color: var(--quiz-ink); }
.band-GettingThere { background: var(--sun-soft); color: var(--sun-ink); }
.band-NeedsWork { background: var(--wrong-soft); color: var(--wrong-ink); }
.band-NotStarted { background: var(--surface-sunken); color: var(--text-muted); }

.know-card { padding: 1.5rem; }
.know-card .matrix div { padding: 1rem; }
.know-card .matrix strong { font-size: 1.6rem; line-height: 1; margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; }
.activity-card .heat { margin: 1rem 0 0.5rem; }
.heat-days { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--text-faint); }
.done-list .item { padding: 0.8rem 1rem; }
.score-badge { display: grid; place-items: center; min-width: 3.25rem; height: 2.25rem; padding: 0 0.6rem; border-radius: 10px; background: var(--surface-sunken); color: var(--brand-ink); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.score-badge.high { background: var(--quiz-soft); color: var(--quiz-ink); }
.score-badge.low { background: var(--wrong-soft); color: var(--wrong-ink); }
.nudge { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--sun-soft), var(--surface-card) 70%); border: 1px solid color-mix(in srgb, var(--sun) 35%, var(--line)); }
.nudge .tile-icon { background: var(--sun); color: var(--night); }
.nudge strong { color: var(--brand-ink); }
.nudge form { margin-left: auto; }

/* ---------- 14 Quiz and practice ---------- */
.quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.quiz-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); margin: 0; font-family: var(--font-body); letter-spacing: 0; }
.segments { display: flex; gap: 4px; margin: 0.75rem 0 1.75rem; }
.segments i { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-sunken); }
.segments i.done { background: var(--quiz); }
.segments i.now { background: color-mix(in srgb, var(--quiz) 35%, var(--surface-sunken)); animation: pulse-seg 1.6s ease-in-out infinite; }
@keyframes pulse-seg { 50% { background: color-mix(in srgb, var(--quiz) 60%, var(--surface-sunken)); } }
.quiz-progress { height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; margin: 0.75rem 0 1.5rem; }
.quiz-progress progress { display: block; width: 100%; height: 100%; appearance: none; border: 0; background: transparent; }
.quiz-progress progress::-webkit-progress-bar { background: transparent; }
.quiz-progress progress::-webkit-progress-value { background: var(--quiz); border-radius: 999px; }
.quiz-progress progress::-moz-progress-bar { background: var(--quiz); border-radius: 999px; }
.q-number { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiz-ink); margin-bottom: 0.6rem; }
.question { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.22; color: var(--brand-ink); letter-spacing: -0.02em; margin-bottom: 1.5rem; padding: 0; }
.options { display: grid; gap: 0.7rem; counter-reset: option; }
.option { position: relative; display: flex; align-items: center; gap: 0.95rem; padding: 1rem 1.1rem; background: var(--surface-raised); border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color 150ms, box-shadow 150ms, background-color 150ms, transform 150ms; font-size: 1.0625rem; line-height: 1.4; box-shadow: var(--shadow-sm); }
.option::before { counter-increment: option; content: counter(option, upper-alpha); display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--accent-1-soft); color: var(--accent-1); font-family: var(--font-display); font-weight: 700; transition: background-color 150ms, color 150ms, transform 200ms; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.option:has(input:checked) { border-color: var(--quiz); background: var(--quiz-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--quiz) 18%, transparent); }
.option:has(input:checked)::before { background: var(--quiz); color: var(--on-fill); transform: scale(1.06); }
.option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.key-hint { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: center; margin-top: 1rem; font-size: 0.8125rem; color: var(--text-faint); }
.key-hint span { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (hover: none) { .key-hint { display: none; } }

/* Confidence: how sure are you? */
.confidence { margin-top: 1.5rem; padding: 1.1rem; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--line); }
.confidence-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--brand-ink); margin-bottom: 0.85rem; font-size: 0.9375rem; }
.confidence-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.confidence-buttons .btn { flex-direction: column; gap: 0.15rem; padding: 0.85rem 0.75rem; white-space: normal; }
.confidence-buttons .btn small { font-weight: 500; opacity: 0.8; font-size: 0.75rem; }
.btn-unsure { --bs-btn-bg: var(--sun-soft); --bs-btn-border-color: color-mix(in srgb, var(--sun) 50%, var(--line)); --bs-btn-color: var(--sun-ink); --bs-btn-hover-bg: var(--sun-soft); --bs-btn-hover-border-color: var(--sun); --bs-btn-hover-color: var(--sun-ink); --bs-btn-active-bg: var(--sun-soft); --bs-btn-active-color: var(--sun-ink); --bs-btn-active-border-color: var(--sun); }

/* Feedback after each answer */
.feedback-hero { text-align: center; padding: 1rem 0 0.5rem; }
.feedback-mark { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 1rem; border-radius: 50%; }
.feedback-mark .icon { width: 2.75rem; height: 2.75rem; stroke-width: 2.5; }
.feedback-mark.ok { background: var(--correct); color: var(--on-fill); box-shadow: 0 0 0 10px var(--correct-soft), 0 20px 50px color-mix(in srgb, var(--correct) 40%, transparent); }
.feedback-mark.no { background: var(--wrong-soft); color: var(--wrong); box-shadow: 0 0 0 10px color-mix(in srgb, var(--wrong-soft) 60%, transparent); }
.feedback-mark.mis { background: var(--misconception-soft); color: var(--misconception); box-shadow: 0 0 0 10px color-mix(in srgb, var(--misconception-soft) 60%, transparent); }
.feedback-mark.shaky { background: var(--sun); color: var(--night); box-shadow: 0 0 0 10px var(--sun-soft); }
.feedback-hero h1 { font-size: 2.25rem; letter-spacing: -0.04em; margin: 0 0 0.35rem; }
.feedback-hero p { color: var(--text-muted); max-width: 28rem; margin: 0 auto; }
.in-a-row { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--sun-soft); color: var(--sun-ink); font-weight: 700; font-size: 0.875rem; }
.result-card { border-radius: var(--radius-lg); padding: 1.15rem 1.3rem; display: flex; gap: 0.85rem; align-items: flex-start; }
.result-card .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; flex: none; }
.result-correct { background: var(--correct-soft); color: var(--correct-ink); border: 1.5px solid var(--correct); }
.result-wrong { background: var(--wrong-soft); color: var(--wrong-ink); border: 1.5px solid color-mix(in srgb, var(--wrong) 35%, transparent); }
.result-answer { background: var(--surface-raised); border: 1.5px solid var(--correct); color: var(--correct-ink); }
.result-tip { background: var(--surface-card); border: 1px solid var(--line); color: var(--text); }
.result-tip .icon { color: var(--sun-ink); }
.feedback-stem { padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--surface-card); border: 1px solid var(--line); color: var(--brand-ink); font-weight: 500; margin: 1.5rem 0 1rem; }
.feedback-stem .eyebrow { display: block; margin-bottom: 0.25rem; }

/* End of a round or a quiz */
.finish { text-align: center; padding: 1.5rem 0 0; }
.finish-ring { position: relative; width: 12rem; height: 12rem; margin: 0 auto 1.25rem; }
.finish-ring > span { position: absolute; inset: 0; display: grid; place-content: center; font-family: var(--font-display); font-weight: 700; font-size: 3.25rem; line-height: 1; color: var(--brand-ink); letter-spacing: -0.04em; }
.finish-ring > span small { display: block; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-top: 0.35rem; }
.finish h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); letter-spacing: -0.04em; margin: 0 0 0.4rem; }
.finish > p { color: var(--text-muted); max-width: 28rem; margin: 0 auto 1.75rem; }
.finish-actions { display: grid; gap: 0.6rem; max-width: 22rem; margin: 0 auto; }
.big-score { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--brand-ink); letter-spacing: -0.03em; line-height: 1; margin: 0.5rem 0; }
.quiz-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; }

/* Review of a finished quiz or practice */
.review { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.review-item { padding: 1.15rem 1.25rem; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--line); border-left: 4px solid var(--correct); }
.review-item.is-wrong { border-left-color: var(--wrong); }
.review-item.is-mis { border-left-color: var(--misconception); }
.review-item.is-shaky { border-left-color: var(--sun); }
.review-head { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; }
.review-head p { margin: 0; font-weight: 600; color: var(--brand-ink); line-height: 1.4; }
.review-opts { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.35rem; font-size: 0.9375rem; }
.review-opts li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem; border-radius: 10px; color: var(--text-muted); }
.review-opts li .icon { width: 1rem; height: 1rem; }
.review-opts .is-right { background: var(--correct-soft); color: var(--correct-ink); font-weight: 600; }
.review-opts .is-picked { background: var(--wrong-soft); color: var(--wrong-ink); }
.review-opts .tag { margin-left: auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Confetti pieces made by site.js */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 14px; border-radius: 2px; animation: confetti-fall var(--fall) cubic-bezier(.2,.6,.4,1) var(--delay) forwards; opacity: 0; }
.confetti .c0 { background: var(--quiz); }
.confetti .c1 { background: var(--sun); }
.confetti .c2 { background: var(--brand-highlight); }
.confetti .c3 { background: var(--accent-1); }
.confetti .c4 { background: var(--accent-2); width: 8px; height: 8px; border-radius: 50%; }
@keyframes confetti-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0.9; transform: translate(var(--drift), 105vh) rotate(var(--spin)); } }

/* Legal prose */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.125rem; margin: 1.75rem 0 0.4rem; }
.prose p, .prose li { color: var(--text); }

/* ---------- 15 Shop ---------- */
/* The shop is its own site: warm paper, editorial type, no quiz chrome. */
.shop-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface-page) 86%, transparent); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--line); }
.shop-top .topbar-inner { height: 72px; }
.shop-strip { background: var(--brand-ink); color: var(--brand-on-ink-muted); font-size: 0.8125rem; text-align: center; padding: 0.45rem 1rem; }
.shop-strip strong { color: var(--brand-on-ink); font-weight: 600; }
.shop-nav { display: flex; gap: 0.15rem; margin-left: 1.5rem; }
.shop-nav a { padding: 0.45rem 0.8rem; border-radius: 8px; color: var(--text); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: background-color 150ms, color 150ms; }
.shop-nav a:hover { background: var(--surface-sunken); color: var(--brand-ink); }
.shop-nav a.active { color: var(--brand-ink); background: var(--surface-sunken); }
.shop-foot { margin-top: 5rem; background: var(--brand-ink); color: var(--brand-on-ink-muted); padding: 3.5rem 0 2rem; font-size: 0.9rem; }
.shop-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.shop-foot h4 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-on-ink); margin-bottom: 0.85rem; }
.shop-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.shop-foot a { color: var(--brand-on-ink-muted); text-decoration: none; }
.shop-foot a:hover { color: var(--brand-on-ink); }
.shop-foot p { max-width: 22rem; }
.shop-foot-base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--brand-on-ink) 14%, transparent); display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8125rem; }

.tone { --tone: var(--accent-1); --tone-soft: var(--accent-1-soft); }
.tone.accent-2 { --tone: var(--accent-2); --tone-soft: var(--accent-2-soft); }
.tone.accent-3 { --tone: var(--accent-3); --tone-soft: var(--accent-3-soft); }
.tone .tile-icon { background: var(--tone-soft); color: var(--tone); }
.tone .eyebrow { color: var(--tone); }
.tile-quiz { background: var(--quiz-soft); color: var(--quiz); }

.shop-hero { position: relative; padding: 4.5rem 0 3rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem; align-items: center; }
.shop-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.75rem); line-height: 0.98; letter-spacing: -0.045em; margin: 1.1rem 0 1.25rem; max-width: 12ch; }
.shop-hero .lead { font-size: 1.1875rem; color: var(--text-muted); margin: 0 0 2rem; max-width: 36rem; }
.shop-hero .hero-actions { justify-content: flex-start; }
.cover-stack { position: relative; height: 22rem; }
.cover-stack .cover { position: absolute; width: 72%; box-shadow: var(--shadow-xl); transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.cover-stack .cover:nth-child(1) { left: 0; top: 2.5rem; transform: rotate(-7deg); }
.cover-stack .cover:nth-child(2) { right: 0; top: 0; transform: rotate(5deg); }
.cover-stack .cover:nth-child(3) { left: 14%; bottom: 0; transform: rotate(-1deg); z-index: 2; }
.cover-stack:hover .cover:nth-child(1) { transform: rotate(-10deg) translate(-12px, -6px); }
.cover-stack:hover .cover:nth-child(2) { transform: rotate(8deg) translate(12px, -8px); }
.cover-stack:hover .cover:nth-child(3) { transform: rotate(0) translateY(6px); }

.subject-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.subject-tile { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.75rem; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; overflow: hidden; transition: transform 220ms, box-shadow 220ms, border-color 220ms; }
.subject-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 40%, var(--brand-highlight))); }
.subject-tile::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--tone-soft); transition: transform 400ms; z-index: 0; }
.subject-tile > * { position: relative; z-index: 1; }
.subject-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--tone) 35%, var(--line)); color: var(--text); }
.subject-tile:hover::after { transform: scale(1.35); }
.subject-tile .tile-icon { margin-bottom: 0.65rem; width: 48px; height: 48px; border-radius: 14px; }
.subject-tile-name { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.03em; color: var(--brand-ink); line-height: 1.1; }
.subject-tile-text { color: var(--text-muted); font-size: 0.9375rem; flex: 1; }
.subject-tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; color: var(--tone); }
.subject-tile .go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tone-soft); transition: transform 160ms; }
.subject-tile:hover .go { transform: translateX(3px); }

.shop-section { margin-top: 4rem; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-head h2 { margin: 0.2rem 0 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.035em; }
.section-head .crumb { white-space: nowrap; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.product-card { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; color: var(--text); text-decoration: none; transition: transform 220ms, box-shadow 220ms; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--text); }
.product-card .cover { border-radius: 0; }
.product-card:hover .cover-glyph { transform: rotate(-8deg) scale(1.08); }
.product-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.product-title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--brand-ink); line-height: 1.25; letter-spacing: -0.01em; }
.product-summary { color: var(--text-muted); font-size: 0.875rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.75rem; }
.product-go { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.product-card:hover .product-go { color: var(--brand-ink); }
.price { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--brand-ink); }
.price-free { color: var(--correct-ink); }
.price .save { margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--correct-soft); color: var(--correct-ink); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; vertical-align: 0.15em; }
.bundle-offer { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; text-decoration: none; color: var(--text); border-color: color-mix(in srgb, var(--tone) 30%, var(--line)); background: linear-gradient(135deg, var(--tone-soft), var(--surface-card) 75%); transition: box-shadow 160ms, transform 160ms; }
.bundle-offer:hover { color: var(--text); box-shadow: var(--shadow); transform: translateY(-1px); }
.bundle-offer strong { color: var(--brand-ink); font-family: var(--font-display); font-size: 1.0625rem; }
.list-ui .price { font-size: 1rem; }

/* Generated product covers: the subject colour into navy, with the type's icon as a watermark. */
.cover { position: relative; aspect-ratio: 16 / 10; padding: 1rem 1.1rem; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; color: var(--on-fill);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--on-fill) 16%, transparent) 0 22%, transparent 22.5%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--brand-highlight) 35%, transparent), transparent 55%),
    linear-gradient(140deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 45%, var(--brand-ink)) 55%, var(--brand-ink) 100%); }
.cover-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; position: relative; z-index: 1; }
.cover-kind, .cover-count { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, var(--on-fill) 16%, transparent); backdrop-filter: blur(4px); }
.cover-kind .icon { width: 0.85rem; height: 0.85rem; }
.cover-count { background: transparent; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.cover-title { margin-top: auto; position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.cover-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.75rem; font-weight: 600; opacity: 0.85; }
.cover-foot img { width: 16px; height: 16px; }
.cover-glyph { position: absolute; right: -0.75rem; bottom: -1rem; width: 7.5rem; height: 7.5rem; opacity: 0.12; stroke-width: 1.25; transition: transform 400ms; }
.cover-lg { aspect-ratio: 16 / 8; padding: 1.5rem 1.75rem; }
.cover-lg .cover-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); max-width: 22ch; }
.cover-lg .cover-glyph { width: 13rem; height: 13rem; right: -1rem; bottom: -2rem; }

.subject-banner { display: flex; gap: 1.25rem; align-items: flex-start; margin: 1rem 0 1.75rem; padding: 2.25rem; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--tone-soft), var(--surface-card) 70%); border: 1px solid var(--line); }
.subject-banner .tile-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.subject-banner .tile-icon .icon { width: 1.5rem; height: 1.5rem; }
.subject-banner h1 { margin: 0.2rem 0 0.5rem; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); letter-spacing: -0.04em; }
.subject-banner .lead { color: var(--text-muted); margin: 0; max-width: 42rem; font-size: 1.0625rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--text); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 120ms, border-color 120ms; }
.chip .icon { width: 1rem; height: 1rem; color: var(--text-muted); }
.chip:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.chip.active { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--brand-on-ink); }
.chip.active .icon { color: var(--brand-on-ink); }

.crumbs { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "head buy" "main buy"; gap: 0 2.5rem; align-items: start; }
.product-head { grid-area: head; }
.product-main { grid-area: main; }
.buy-box { grid-area: buy; }
.product-h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); letter-spacing: -0.03em; margin: 0.35rem 0 0.75rem; }
.product-head .lead { font-size: 1.1875rem; color: var(--text-muted); }
.product-main > p { max-width: 44rem; }
.check-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.6rem; }
.check-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.check-list .icon { color: var(--correct); margin-top: 0.15rem; }
.check-list-no .icon { color: var(--wrong); }
.quiz-pair { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; flex-wrap: wrap; }
.buy-box { position: sticky; top: 96px; padding: 1.5rem; box-shadow: var(--shadow-lg); }
.buy-price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--brand-ink); line-height: 1; }
.buy-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.75rem 0 1.25rem; color: var(--text-muted); font-size: 0.875rem; }
.buy-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.buy-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--text-muted); text-align: center; }
.buy-offer + .buy-offer { margin-top: 1rem; }
.buy-offer .buy-note { margin: 0 0 0.5rem; }

/* Label/value pairs, e.g. an order's details. */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.buy-licence { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.875rem; }
.buy-licence strong { display: block; color: var(--brand-ink); }
.buy-licence span { color: var(--text-muted); }
.board-notice { margin-top: 3rem; font-size: 0.8125rem; color: var(--text-faint); }
.unit-resources { margin-top: 2rem; }
.unit-resources .product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; grid-template-areas: "head" "buy" "main"; gap: 1.25rem; }
  .buy-box { position: static; }
}

/* ---------- 16 Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fade-in 260ms ease-out both; }
  @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .pop-in { animation: pop-in 520ms cubic-bezier(.2,.9,.3,1.4) both; }
  @keyframes pop-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
  .shake { animation: shake 420ms cubic-bezier(.36,.07,.19,.97) both; }
  @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
  .ring-value { animation: ring-in 1.2s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes ring-in { from { stroke-dasharray: 0 100; } }
  .segbar rect:not(.segbar-track) { animation: stack-in 900ms cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: left; }
  @keyframes stack-in { from { transform: scaleX(0); } }
  /* Scroll reveals, only when site.js is running. */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-d1 { transition-delay: 80ms; }
  .js .reveal-d2 { transition-delay: 160ms; }
  .js .reveal-d3 { transition-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .marquee-track, .demo-card, .demo-chip, .hero-title, .segments i.now { animation: none !important; }
  .demo-opt.pick { border-color: var(--correct); background: var(--correct-soft); }
  .demo-opt.pick b { background: var(--correct); color: var(--on-fill); }
  .demo-opt.pick .icon, .demo-feedback, .demo-chip-streak { animation: none; opacity: 1; }
  .demo-cursor { display: none; }
  .hero-title { color: var(--on-night); background: none; }
}

/* ---------- 17 Small screens ---------- */
@media (max-width: 1100px) {
  .bento-4, .bento-3, .bento-2 { grid-column: span 3; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hero-grid, .split, .shop-hero, .insight-grid { grid-template-columns: 1fr; }
  .hero-x { padding-top: 7rem; }
  .demo { max-width: 30rem; margin: 0 auto; }
  .steps { grid-template-columns: 1fr; }
  .privacy-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview, .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar .site-nav, .shop-top .shop-nav { display: none; }
  .cover-stack { height: 18rem; max-width: 30rem; }
  .shop-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: sticky; z-index: 10; flex-direction: row; align-items: center; padding: 0.5rem 0.75rem; overflow-x: auto; gap: 0.5rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { padding: 0 0.5rem 0 0; }
  .sidebar .brand .suffix, .side-label, .side-foot .who { display: none; }
  .side-nav { flex-direction: row; }
  .side-link { white-space: nowrap; padding: 0.45rem 0.6rem; }
  .side-foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  .app-content { padding: 1.5rem 1rem 3rem; }
  .app-foot { padding: 1rem; }
  .modes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-4, .bento-3, .bento-2 { grid-column: auto; }
  .dash-hero { grid-template-columns: 1fr; padding: 1.5rem; }
  .dash-ring { width: 8rem; height: 8rem; margin: 0 auto; }
  .dash-ring > span { font-size: 2rem; }
  .pupil-nav a span { display: none; }
  .pupil-who .who { display: none; }
  .section { padding: 4rem 0; }
  .final-cta { border-radius: 24px; padding: 3rem 1.25rem; }
  .demo-chip-mastery { left: -0.5rem; }
  .demo-chip-sure { right: -0.5rem; }
  .demo-chip-streak { right: -0.25rem; }
  .todo-card { flex-wrap: wrap; }
  .todo-card form { margin-left: 0; width: 100%; }
  .todo-card form .btn { width: 100%; }
  .nudge { flex-wrap: wrap; }
  .nudge form { margin-left: 0; width: 100%; }
  .nudge form .btn { width: 100%; }
  .topic-go { display: none; }
}
@media (max-width: 560px) {
  .topbar .brand .suffix, .pupil-bar .brand .suffix, .shop-top .brand .suffix { display: none; }
  .topbar nav .btn-hide-sm { display: none; }
  .topbar nav { gap: 0.25rem; }
  .hero { padding-top: 1.5rem; }
  .page-head { align-items: flex-start; }
  .subject-banner { flex-direction: column; padding: 1.5rem; }
  .cover-lg { aspect-ratio: 16 / 10; }
  .join-box form { flex-direction: column; }
  .join-box input { flex: none; width: 100%; }
  .join-box .btn { width: 100%; }
  .privacy-band, .overview, .dash-stats { grid-template-columns: 1fr 1fr; }
  .join-card { padding: 1.75rem 1.25rem 1.5rem; }
  .confidence-buttons { grid-template-columns: 1fr; }
  .shop-foot-grid { grid-template-columns: 1fr; }
}

/* Topic rows are buttons that start a practice on that topic. */
button.topic { width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.topic-meta { font-size: 0.75rem; color: var(--text-muted); }
.on-night .join-card h1 { color: var(--brand-ink); }
.shop-top .topbar-inner > nav:last-child { margin-left: auto; }
.insight-grid .table-ui td { white-space: nowrap; }
@media (max-width: 640px) {
  .pupil-bar .brand > span { display: none; }
  .pupil-bar .topbar-inner { gap: 0.5rem; }
  .pupil-nav { margin-left: 0.25rem; }
  .pupil-wide { padding: 0 1rem; }
}
@media (max-width: 480px) {
  .code-tiles { gap: 3px; font-size: 0.95rem; }
  .code-tiles i { width: 24px; height: 32px; border-radius: 6px; }
}

/* The private-preview landing page (PreviewGateMiddleware). */
.preview-page { flex: 1 0 auto; min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; text-align: center; }
.preview-card { max-width: 34rem; }
.preview-mark { width: 64px; height: 64px; margin-bottom: 1.75rem; filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--night) 60%, transparent)); }
.preview-card h1 { font-size: clamp(2.6rem, 1.8rem + 3.5vw, 4.5rem); letter-spacing: -0.045em; line-height: 1; margin: 0 0 1rem; color: var(--on-night); }
.preview-card p { color: var(--on-night-muted); font-size: 1.125rem; margin: 0; }