:root { --fg: #111; --muted: #666; --line: #e5e5e5; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg); line-height: 1.6; margin: 0 auto; max-width: 44rem; padding: 3rem 1.5rem 5rem;
}
h1 { font-size: 2.25rem; line-height: 1.2; margin: 0 0 1rem; }
h2 { margin-top: 2.5rem; }
p.lead { font-size: 1.15rem; color: var(--muted); }
a { color: var(--fg); }
nav { display: flex; gap: 1rem; margin-bottom: 3rem; font-size: 0.95rem; }
nav a { text-decoration: none; color: var(--muted); }
button, .button {
  background: var(--fg); color: #fff; border: 0; border-radius: 6px; padding: 0.7rem 1.25rem;
  font-size: 1rem; cursor: pointer; text-decoration: none; display: inline-block;
}
button.secondary { background: #fff; color: var(--fg); border: 1px solid var(--line); }
button[disabled] { opacity: 0.5; cursor: default; }
input[type=email] { width: 100%; padding: 0.7rem; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem; margin: 1.5rem 0; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); font-size: 0.9rem; }
footer { margin-top: 4rem; border-top: 1px solid var(--line); padding-top: 1rem; font-size: 0.9rem; color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 1.25rem 1rem; margin: 0 0 1.25rem; }
legend { font-weight: 600; padding: 0 0.25rem; }
fieldset label { display: block; padding: 0.35rem 0; cursor: pointer; }

/* Focus and small screens (most visitors are on phones). */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 40rem) {
  body { padding: 1.25rem 1rem 4rem; }
  nav { margin-bottom: 1.5rem; }
  h1 { font-size: 1.75rem; }
}

/* The course app (/quiz/, /es/quiz/). */
:root { --accent: #1d4ed8; --ok: #15803d; --ok-bg: #f0fdf4; --bad: #b91c1c; --bad-bg: #fef2f2; --soft: #f6f6f4; }
.course h1 { margin-bottom: 0.5rem; }
.course h1:focus { outline: none; }
.eyebrow { margin: 0 0 0.25rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.note { margin: 0 0 1.5rem; font-size: 0.85rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 0.6rem; }
.status { color: var(--muted); }
.lead { font-size: 1.05rem; color: var(--muted); }
.free-left { font-weight: 600; }
.bar { display: block; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--fg); width: 0; transition: width 0.3s; }
.button.wide, button.wide { display: block; width: 100%; text-align: center; }
button, .button { min-height: 44px; }

/* Module list */
.modules { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.module-link { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--fg); }
a.module-link:hover { border-color: var(--fg); }
.module-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.module-title { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.module-progress { font-size: 0.85rem; }
.is-locked .module-link { background: var(--soft); }
.is-empty .module-link { color: var(--muted); border-style: dashed; }
.is-done .bar > span { background: var(--ok); }
.final .module-link { border-width: 2px; }
.badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; }
.badge.free { background: var(--ok-bg); color: var(--ok); }
.badge.locked { background: #fff; border: 1px solid var(--line); color: var(--muted); }

/* Lesson */
.video-slot video { width: 100%; border-radius: 8px; background: #000; aspect-ratio: 16 / 9; }
.videos { margin: 0 0 1.5rem; }
.videos h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.player-slot { margin: 0 0 0.75rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.player-slot iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.video-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; width: 100%;
  background: #fff; color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.9rem; text-align: left;
}
.video-item:hover, .video-item[aria-pressed="true"] { border-color: var(--fg); }
.video-num {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--soft); font-size: 0.85rem; font-weight: 600;
}
.video-item[aria-pressed="true"] .video-num { background: var(--fg); color: #fff; }
.video-title { font-weight: 600; line-height: 1.3; }
.video-meta { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.slide { min-height: 12rem; display: flex; flex-direction: column; margin: 0 0 1rem; }
.sign-img { display: block; width: 140px; height: 140px; object-fit: contain; margin: 0.5rem auto; }
.slide-text { font-size: 1.15rem; line-height: 1.5; flex: 1; margin: 0.5rem 0; }
.cite { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 0; }
.slide-nav { justify-content: space-between; }
.slide-nav button { flex: 1; }
.slide-nav button[hidden] { display: none; }
.start-q .button { display: block; text-align: center; margin-top: 1rem; }
.button.secondary-link { background: #fff; color: var(--fg); border: 1px solid var(--line); }

/* Questions */
.q-progress { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.q-progress p { margin: 0; }
.q-text { font-size: 1.25rem; line-height: 1.4; margin: 0 0 1rem; }
.q-text:focus { outline: none; }
.help-es { color: var(--muted); margin: -0.5rem 0 1rem; }
.choices { display: grid; gap: 0.6rem; }
.choice {
  display: flex; gap: 0.75rem; align-items: flex-start; width: 100%; text-align: left;
  background: #fff; color: var(--fg); border: 1px solid #ccc; border-radius: 8px; padding: 0.8rem 0.9rem; font-size: 1rem; line-height: 1.4;
}
.choice:hover { border-color: var(--fg); }
.choice .key { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; }
.choice-text { display: grid; gap: 0.2rem; }
.choice .help-es { margin: 0; font-size: 0.9rem; }
.choice .mark { font-size: 0.8rem; font-weight: 700; }
.choice .mark:empty { display: none; }
.answered .choice { cursor: default; }
.answered .choice:not(.right):not(.wrong) { opacity: 0.6; }
.choice.right { border: 2px solid var(--ok); background: var(--ok-bg); }
.choice.right .mark { color: var(--ok); }
.choice.wrong { border: 2px solid var(--bad); background: var(--bad-bg); }
.choice.wrong .mark { color: var(--bad); }
.feedback { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.feedback h3 { font-size: 1rem; margin: 0.75rem 0 0.25rem; }
.feedback p { margin: 0.25rem 0 0.75rem; }
.result { font-weight: 700; font-size: 1.1rem; }
.result.right { color: var(--ok); }
.result.wrong { color: var(--bad); }
.report { margin: 1rem 0; font-size: 0.9rem; }
.report summary { cursor: pointer; text-decoration: underline; color: var(--muted); display: inline-block; padding: 0.5rem 0; }
.report label { display: grid; gap: 0.25rem; margin: 0.5rem 0; }
.report select, .report textarea { font: inherit; padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px; width: 100%; }
[data-q-next] { width: 100%; }

/* Final test */
.versions label { display: flex; gap: 0.6rem; align-items: center; padding: 0.55rem 0; min-height: 44px; }
.versions input { width: 1.15rem; height: 1.15rem; margin: 0; }
.exam-facts p { margin: 0.3rem 0; }
.exam-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.35rem; }
.exam-top p { margin: 0; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.6rem; }
.timer.low { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
.exam-q { margin-top: 1rem; }
.choice[aria-pressed="true"] { border: 2px solid var(--accent); background: #eff6ff; }
.choice[aria-pressed="true"] .key { background: var(--accent); border-color: var(--accent); color: #fff; }
.exam-nav { justify-content: space-between; margin-top: 1.25rem; }
.exam-nav button { flex: 1; }
.exam-submit { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.exam-submit p { margin: 0.4rem 0; }
.exam-verdict { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.25rem; }
.exam-verdict.pass { color: var(--ok); }
.exam-verdict.fail { color: var(--bad); }
.exam-modules { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.6rem; }
.exam-modules li { border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 1rem; display: grid; gap: 0.3rem; }
.exam-modules li.is-weak { border-color: var(--bad); }
.exam-modules .module-top { font-size: 0.85rem; }
.exam-modules .badge.weak { background: var(--bad-bg); color: var(--bad); }
.exam-modules .bar > span { background: var(--ok); }
.exam-modules .is-weak .bar > span, .exam-modules li.is-weak .bar > span { background: var(--bad); }

/* Paywall */
.includes { padding-left: 1.2rem; }
.includes li { margin: 0.2rem 0; }
.price { border: 2px solid var(--fg); }
.price p { margin: 0.4rem 0; }
.price-line strong { font-size: 2rem; }
.share-slot:empty { display: none; }
.back { margin-top: 2rem; font-size: 0.95rem; }

/* State landing pages (/ca/, /es/ca/). The first screen on a phone holds the start button. */
.landing h1 { margin-bottom: 0.5rem; }
.landing .lead { margin: 0 0 1rem; }
.landing .cta { margin: 0 0 0.5rem; }
.landing .free-line { margin: 0 0 0.25rem; font-weight: 600; }
/* Two lines held for the price line, so the cell text from /api/me does not move the page. */
.landing .price-line { margin: 0 0 0.25rem; min-height: 3.2em; }
.landing .note { margin-top: 1rem; }
.module-list li { margin: 0.25rem 0; }
.module-list .badge { margin-left: 0.4rem; }
.faq-item h3 { font-size: 1.05rem; margin: 1.25rem 0 0.25rem; }
.faq-item p { margin: 0; }
.landing .cta:last-child { margin-top: 2rem; }
footer .row a { color: var(--muted); }