/* BrainBit Teaching · public site
   Brand palette: navy, blue, light blue, orange (primary action), gold.
   No CDN. Fonts are self-hosted. */


* { box-sizing: border-box; margin: 0; padding: 0 }

html { -webkit-text-size-adjust: 100% }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100% }

a { color: var(--blue); text-underline-offset: 0.18em }
a:hover { color: var(--navy) }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}


.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 0.6rem }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 0.55rem }
h3 { font-size: 1.2rem; margin-bottom: 0.25rem }

p { max-width: 62ch }


/* ---- hero ---- */
.hero {
  padding: 3.2rem 0 2.4rem;
  border-bottom: 1px solid var(--line);
}
.lead {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
  max-width: 42rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  max-width: none;
}
.hero-actions [hidden] { display: none }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
  padding: 0;
}
.hero-facts li + li::before {
  content: "·";
  margin-right: 1.4rem;
  color: var(--line);
}

/* Below the first screen the browser skips layout until a section nears the
   viewport, so a slow phone answers taps sooner while the page loads. */
.home > section:not(.hero):not(.tasks) { content-visibility: auto; contain-intrinsic-size: auto 900px }

/* Home hero: navy to blue band, text left, example card right. */
.home > .hero {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
  border-bottom: none;
  padding: 3.4rem 0 3rem;
  overflow: hidden;
}
.hero-grid { display: grid; gap: 2.2rem; align-items: center }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr }
}
.home > .hero h1 { color: #fff }
.hero h1 .gold { color: var(--gold) }
.home > .hero .lead { color: #dbe9fb }
.hero-tag {
  display: inline-block; margin: 0 0 0.9rem; padding: 0.2rem 0.75rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  background: var(--gold); color: var(--navy); border-radius: 999px;
}
.hero-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.2rem;
}
.hero-chips li {
  font-size: 0.9rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;
}
/* ---- free try card (home hero + /trainers/ band) ---- */
.try-card {
  position: relative; display: grid; gap: 0.35rem; width: 100%; max-width: 30rem; justify-self: center;
  background: #fff; color: var(--ink); border-radius: 12px; padding: 1.1rem;
  box-shadow: 0 18px 40px rgba(5, 25, 60, 0.35);
}
.try-tabs { display: flex; gap: 0.3rem; padding: 0.2rem; margin-bottom: 0.4rem; background: var(--surface); border-radius: 999px }
.try-tabs button {
  flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: inherit; font-weight: 600; cursor: pointer;
}
.try-tabs button[aria-selected="true"] { background: var(--navy); color: #fff }
.try-card label { font-size: 0.85rem; font-weight: 600; color: var(--muted) }
.try-card input:not([type="file"]), .try-card textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.5rem 0.7rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.try-card input:focus-visible, .try-card textarea:focus-visible, .try-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.try-card [data-pane] { display: grid; gap: 0.4rem }
.try-fields { display: grid; gap: 0.35rem }
.try-done { margin: 0; font-size: 1rem; text-align: center }
.try-link { border: 0; padding: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer }
.try-card [hidden] { display: none }
.try-copy { min-height: 44px; border: 1px solid var(--blue); border-radius: 8px; background: #fff; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer }
.try-hint, .try-note, .try-msg { margin: 0; font-size: 0.85rem; color: var(--muted) }
.try-note { text-align: center }
.try-msg:empty { display: none }
.try-go { margin-top: 0.4rem; justify-content: center; min-height: 48px }
.try-card a { color: var(--blue) }
.hp { position: absolute; left: -9999px }
@media (max-width: 899px) {
  .hero-grid { gap: 0 }
  .hero-text { display: contents }
  .hero-text > .hero-tag { justify-self: start }
  .hero-text > .hero-actions, .hero-text > .hero-chips, .hero-text > .hero-offer, .plans-band.split .page-band-inner > .hero-actions, .plans-band.split .page-band-inner > .hero-facts { order: 2 }
  .try-card { order: 1; margin: 0.3rem 0 1.4rem }
  .plans-band.split .page-band-inner { gap: 0 }
}
@media (min-width: 900px) {
  .plans-band.split .page-band-inner { gap: 0 2rem; align-items: start }
  .plans-band.split .page-band-inner > * { grid-column: 1 }
  .plans-band.split .page-band-inner > .try-card { grid-column: 2; grid-row: 1 / span 7 }
}

/* ---- sections ---- */
#courses { padding: 2.6rem 0 1rem }
.section-lead { color: var(--ink-soft); margin-bottom: 1.4rem }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.5rem;
  max-width: none;
}
.steps li {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
}
.steps b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin-bottom: 0.35rem;
}
.steps span { color: var(--ink-soft); font-size: 0.95rem }
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr }
}

.band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.6rem 0;
  margin-top: 2rem;
}
/* --blue on --surface is 4.0:1 (below AA): links on the light-blue band are navy. */
.band a:not(.cta) { color: var(--navy) }

/* ---- course cards ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 2px;
  padding: 1.15rem 1.2rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 11.5rem;
}
.card:hover {
  border-color: var(--blue);
  color: var(--ink);
}
.card-track {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.card p { font-size: 0.95rem; color: var(--ink-soft); max-width: none }
.card-facts {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr }
}

/* ---- landing ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 1.3rem 0 0.4rem;
}
.crumbs a { color: var(--muted); text-decoration: none }
.crumbs a:hover { color: var(--blue) }
.crumbs [aria-current="page"] { color: var(--ink) }

/* ---- navy band on inner pages (base in chrome.css) ---- */
.page-band .crumbs { padding: 0 0 0.9rem }
.page-band h1 { margin-bottom: 0.7rem }
.page-band .lead, .page-band .section-lead { color: #fff; margin: 0 0 1.2rem; max-width: 42rem }
.page-band .hero-actions { margin: 0 }
.page-band .band-tag { text-transform: uppercase }
.page-band .band-card h2 { color: var(--muted) }
.page-band .band-card a { color: var(--blue) }
.page-band .band-card p { color: var(--ink-soft) }
.course-band .course-rail { align-self: start }
.page-band .hero-facts { color: #fff; margin: 0.4rem 0 0; max-width: none }
.page-band .hero-facts li { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 0.2rem 0.8rem; font-weight: 600 }
.page-band .hero-facts li + li::before { content: none }
.page-band .hero-facts { gap: 0.5rem }
.page-band .offer { margin: 0 0 1.2rem; max-width: 46rem }
.nf-band { padding-bottom: 2.8rem }
.contact-ways { padding-top: 2rem }
.course-rail { padding: 1.4rem }
.course-rail h2 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) }
.course-rail p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 1rem }

.facts {
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.facts li {
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--surface);
  padding-top: 0.4rem;
}
.facts li b { color: var(--ink); font-weight: 700 }

.outcomes, .syllabus, .faq, .gets, .period-plan, .board-map, .related, .not-covered { padding: 2rem 0 0 }
.gets ul, .related ul { padding-left: 1.2rem }
.gets li, .related li { margin: 0.35rem 0; max-width: 62ch }
.period-plan p, .not-covered p { max-width: 62ch; color: var(--ink-soft) }
.related ul { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem }
.related a { font-weight: 600 }
.final-test { margin: 2.4rem 0 }
.final-test p { max-width: 62ch }
.outcomes ul { padding-left: 1.2rem }
.outcomes li { margin: 0.35rem 0; max-width: 62ch }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff }
.syllabus table, .board-map table { width: 100%; border-collapse: collapse; font-size: 0.98rem }
.syllabus th, .syllabus td, .board-map th, .board-map td { text-align: left; padding: 0.7rem 0.9rem; vertical-align: top }
.syllabus thead th, .board-map thead th {
  background: var(--surface);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.syllabus tbody th, .board-map tbody th { width: 28%; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700 }
.syllabus tbody tr + tr th, .syllabus tbody tr + tr td,
.board-map tbody tr + tr th, .board-map tbody tr + tr td { border-top: 1px solid var(--line) }

.faq-item {
  border-top: 1px solid var(--line);
  padding: 0;
}
.faq-item:first-of-type { border-top: none }
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  padding: 0.85rem 0;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--muted);
  font-weight: 600;
}
.faq-item[open] summary::after { content: "–" }
.faq-item p { padding: 0 0 1rem; color: var(--ink-soft) }


@media (max-width: 400px) {
  .wrap { padding-left: 16px; padding-right: 16px }
  .cta, .cta-quiet { width: 100% }
}

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

/* ---- slide library ---- */
.lib-search { display: flex; gap: 0.6rem; margin: 0 0 1rem; max-width: 46rem }
.lib-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.05rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 2px;
  background: #fff; color: var(--ink);
}
.lib-search input:focus { outline: 2px solid var(--blue); outline-offset: 1px }
.home-search { margin-top: 0.4rem }
.lib .lib-search {
  position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 0.6rem;
  margin: -1.6rem 0 1rem; border-radius: 10px; box-shadow: 0 10px 28px rgba(5, 25, 60, 0.22);
}
.lib-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.8rem; max-width: none }
.lib-chip {
  font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.8rem; background: #fff;
}
.lib-chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy) }
.lib-status { color: var(--muted); min-height: 1.4em; margin: 0 0 0.6rem }
.lib-subject-note { color: var(--ink-soft); margin: 0 0 0.6rem }
.lib-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.6rem; align-items: start }
.lib-side { position: sticky; top: 4.5rem; font-size: 0.92rem }
.lib-side summary { font-weight: 700; cursor: pointer; margin-bottom: 0.4rem }
.lib-side ul { list-style: none; margin: 0; padding: 0 }
.lib-side ul ul { padding-left: 0.8rem; margin-bottom: 0.5rem }
.lib-side a { text-decoration: none; color: var(--ink-soft); line-height: 1.7 }
.lib-side a:hover { color: var(--blue) }
.lib-main { min-width: 0 }
.lib-cat { margin-bottom: 2rem }
.lib-cat > h2 { border-bottom: 2px solid var(--navy); padding-bottom: 0.2rem }
.lib-subject { margin: 1rem 0 1.4rem }
.lib-deck { border: 1px solid var(--line); background: #fff; margin: 0.4rem 0; border-radius: 2px }
.lib-deck summary { cursor: pointer; padding: 0.55rem 0.8rem; font-weight: 600 }
.lib-deck summary span { color: var(--muted); font-weight: 400; font-size: 0.88rem }
.lib-module { padding: 0 0.8rem 0.6rem 2rem }
.lib-module h4 { margin: 0.6rem 0 0.2rem; font-size: 0.95rem; color: var(--ink-soft) }
.lib-module ol { margin: 0; padding-left: 1.4rem; font-size: 0.93rem; line-height: 1.6 }
.lib-lab { color: var(--muted) }
.lib-group { margin-bottom: 1.6rem }
.lib-hits { list-style: none; margin: 0; padding: 0 }
.lib-hit { border-left: 4px solid var(--blue); background: #fff; padding: 0.7rem 0.9rem; margin: 0.5rem 0 }
.lib-hit-title { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink) }
.lib-hit-title:hover { color: var(--blue) }
.lib-hit-num { margin-left: 0.6rem; font-size: 0.82rem; color: var(--muted) }
.lib-crumb { font-size: 0.82rem; color: var(--muted); margin: 0.15rem 0 0.25rem; max-width: none }
.lib-excerpt { font-size: 0.93rem; color: var(--ink-soft); margin: 0; max-width: none; overflow-wrap: anywhere }
.lib mark, .lib-hit mark { background: #fde68a; color: inherit; padding: 0 0.05em }
@media (max-width: 800px) {
  .lib-layout { grid-template-columns: 1fr }
  .lib-side { position: static; border: 1px solid var(--line); background: #fff; padding: 0.5rem 0.8rem }
  .lib-search { flex-wrap: wrap }
  .lib-search .cta { width: 100% }
  .lib-module { padding-left: 1rem }
}


/* ---- contact page ---- */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; margin-top: 0.4rem }
.contact-card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 0.9rem 1rem;
  color: var(--ink); text-decoration: none;
}
.contact-card .ic { grid-row: span 2; width: 28px; height: 28px; color: var(--blue) }
.contact-card b { font-family: var(--font-display); font-size: 1.1rem }
.contact-card span { color: var(--ink-soft); font-size: 0.95rem; overflow-wrap: anywhere }
.contact-card:hover { border-color: var(--blue) }
.contact-card.wa .ic { color: #1fa855 }
.contact-hours { margin-top: 0.9rem; color: var(--muted); font-size: 0.92rem }
.contact-form-wrap { max-width: 720px }
.fb-form { display: grid; gap: 0.9rem; margin-top: 1rem }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem }
.fb-form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; color: var(--ink) }
.fb-form input, .fb-form select, .fb-form textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: #fff;
  border: 1px solid #9aabbf; border-radius: 4px; padding: 0.6rem 0.7rem; width: 100%;
}
.fb-form textarea { resize: vertical; min-height: 8rem }
.fb-form input:focus, .fb-form select:focus, .fb-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px }
.fb-form .fb-bad { border-color: #b42318 }
.fb-err { color: #b42318; font-weight: 400; font-size: 0.88rem }
.fb-hint { margin: -0.4rem 0 0; color: var(--muted); font-size: 0.88rem }
.fb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.fb-status { min-height: 1.2em; margin: 0; font-size: 0.95rem }
.fb-status.bad { color: #b42318 }
.fb-form .cta { justify-self: start; border: none; cursor: pointer; font: inherit; font-weight: 700 }
.fb-form .cta[disabled] { opacity: 0.6; cursor: wait }
.fb-done { margin-top: 1rem; background: #e3f3ea; border: 1px solid #b7dcc8; border-radius: 6px; padding: 1.1rem 1.2rem; color: #145c3a }
.fb-done h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.4rem }
.fb-done .cta { border: none; cursor: pointer; font: inherit; font-weight: 700 }
.contact-more ul { margin: 0.6rem 0 0 1.2rem; line-height: 1.9 }
.contact-more a { color: var(--blue); font-weight: 600 }
@media (max-width: 640px) {
  .fb-row { grid-template-columns: 1fr }
  .fb-form .cta { justify-self: stretch; text-align: center }
}

/* ---- plans: home summary + /plans/ ---- */
.offer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2rem 1.4rem;
  background: var(--gold-surface); border: 1px solid #ecd48a;
  border-left: 6px solid var(--gold); border-radius: 6px; padding: 1rem 1.2rem; margin: 0 0 1.6rem;
}
.offer p { margin: 0; max-width: none }
.offer .cta { grid-column: 2; grid-row: 1 / span 3 }
.offer-tag { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink) }
.offer-main { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: var(--ink) }
.offer-note { font-size: 0.92rem; color: var(--ink-soft) }
.hero-offer {
  display: inline-block; margin: 0 0 1.2rem; padding: 0.45rem 0.9rem; font-size: 0.95rem; max-width: none;
  background: var(--gold-surface); border: 1px solid #ecd48a; border-left: 4px solid var(--gold); border-radius: 4px;
  color: var(--ink);
}
.hero-offer a { font-weight: 700; color: var(--gold-ink) }
.plan-minis, .plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem }
.plan-mini, .plan-card {
  display: flex; flex-direction: column; gap: 0.4rem; background: #fff;
  border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 4px; padding: 1.1rem 1.2rem;
}
.plan-mini.featured, .plan-card.featured { border-color: #ecd48a; border-top-color: var(--gold); box-shadow: 0 6px 22px rgba(233, 177, 14, 0.18) }
.plan-price { margin: 0 }
.plan-price b { font-family: var(--font-display); font-size: 2rem; color: var(--ink) }
.plan-price span { color: var(--muted); font-size: 0.95rem }
.plan-daily { margin: -0.3rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--gold-ink) }
.plan-tagline { color: var(--ink-soft); font-size: 0.97rem }
.plan-who { font-size: 0.9rem; color: var(--muted) }
.plan-who b { color: var(--ink-soft) }
.plan-badge {
  align-self: flex-start; margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; background: var(--gold); color: var(--navy); border-radius: 999px; padding: 0.15rem 0.7rem;
}
.ticks { list-style: none; padding: 0; margin: 0.3rem 0 0.8rem; display: grid; gap: 0.4rem; font-size: 0.95rem }
.ticks li { position: relative; padding-left: 1.5rem; max-width: none }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700 }
.plan-card .cta { margin-top: auto; text-align: center }
.plan-cards-wrap { padding-top: 2.4rem }
.benefits { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem }
.benefits li { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0.85rem 1rem; max-width: none }
.benefits b { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.2rem }
.benefits span { color: var(--ink-soft); font-size: 0.95rem }
.benefits.every { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.details-title { margin-top: 2.6rem }
.plan-detail { margin: 1.4rem 0 2rem; padding-left: 1rem; border-left: 4px solid var(--blue) }
.plan-detail.featured { border-left-color: var(--gold) }
.plan-detail-head h3 { font-size: 1.5rem }
.plan-detail-head h3 span { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 0.4rem }
.plan-detail-head p { color: var(--ink-soft) }
#compare { padding-top: 1rem }
.compare-wrap { position: relative }
.compare { width: 100%; border-collapse: collapse; font-size: 0.97rem; min-width: 560px }
.compare th, .compare td { padding: 0.65rem 0.9rem; text-align: center; border-top: 1px solid var(--line) }
.compare thead th { background: var(--surface); font-family: var(--font-display); font-size: 1.1rem; border-top: none }
.compare thead th.featured { background: var(--gold-surface) }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink-soft) }
.compare td.yes { color: var(--blue); font-weight: 700 }
.compare td.no { color: var(--muted) }
.compare tbody td:last-child { background: #fffbf0 }
.steps-4 { grid-template-columns: repeat(4, 1fr) }
.value { padding-top: 2.6rem }
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 0.8rem }
.value-grid div { border-top: 3px solid var(--navy); padding-top: 0.7rem }
.value-grid b { display: block; font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.25rem }
.value-grid span { color: var(--ink-soft); font-size: 0.95rem }
.pay-steps { margin: 0.6rem 0 1rem 1.3rem; display: grid; gap: 0.4rem }
.plans .faq { padding-top: 2.6rem }
.closing { padding-top: 2.6rem; text-align: left }
@media (max-width: 900px) {
  .plan-minis, .plan-cards { grid-template-columns: 1fr }
  .benefits.every, .value-grid, .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .offer { grid-template-columns: 1fr }
  .offer .cta { grid-column: 1; grid-row: auto; margin-top: 0.6rem }
  .benefits, .benefits.every, .value-grid, .steps-4 { grid-template-columns: 1fr }
  .compare { min-width: 0; font-size: 0.86rem }
  .compare th, .compare td { padding: 0.55rem 0.4rem }
  .compare thead th { font-size: 0.95rem }
}

/* ---- course explorer (home #courses and /courses/): search, track pills, compact cards ---- */
.course-search { display: grid; gap: 6px; max-width: 30rem; margin: 8px 0 12px }
.course-search label { font-weight: 600; color: var(--ink) }
.course-search input {
  min-height: 48px; padding: 0 14px; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--muted); border-radius: 10px;
}
.course-search input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px }
.track-filter { display: none }
.track-filter.js-filter {
  display: flex; gap: 0.45rem; margin: 0.4rem 0 1rem;
  overflow-x: auto; scrollbar-width: none; padding: 2px;
}
.track-filter.js-filter::-webkit-scrollbar { display: none }
.track-filter button {
  flex: none; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
  min-height: 44px; padding: 0 0.9rem; border-radius: 999px;
  background: #fff; color: var(--ink-soft); border: 1px solid var(--line);
}
.track-filter button:hover { border-color: var(--navy); color: var(--navy) }
.track-filter button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy) }
.track-filter button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px }
.course-status { margin: 0 0 8px; font-size: 0.95rem; color: var(--ink-soft) }
.course-status:empty { margin: 0 }
.course-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem }
.course-grid .card { min-height: 0; padding: 0.85rem 0.95rem 0.9rem; gap: 0.2rem; border-radius: 8px; border-left-width: 4px }
.course-grid .card[hidden] { display: none }
.course-grid .card:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px }
.course-grid .card h3 { font-size: 1.08rem; margin: 0 }
.course-grid .card p {
  font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-grid .card-facts { padding-top: 0.4rem; font-size: 0.875rem }
/* Navy, not blue: --blue on the light-blue pill is only 4.0:1. */
.course-grid .card-track {
  align-self: flex-start; background: var(--sky-surface); color: var(--navy);
  border-radius: 6px; padding: 0.05rem 0.55rem; letter-spacing: 0.04em; font-size: 0.875rem;
}
.card-go { padding-top: 0.3rem; font-size: 0.92rem; font-weight: 700; color: var(--blue) }
@media (min-width: 640px) {
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 1100px) {
  .course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
.course-empty { margin: 16px 0 0; color: var(--ink) }
.course-empty[hidden], .course-more[hidden] { display: none }
.course-more-wrap { margin: 16px 0 0; text-align: center; max-width: none }
.course-more {
  min-height: 48px; padding: 0 20px; cursor: pointer; font: inherit; font-weight: 700;
  background: #fff; color: var(--navy); border: 1px solid var(--navy); border-radius: 10px;
}
.course-more:hover { background: var(--sky-surface) }
.course-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 24px 0 0 }
.course-links a:not(.cta) { display: inline-block; padding: 10px 0; font-weight: 600 }
.courses-all { padding: 32px 0 64px }

/* The home page ends on its navy call to action; the footer follows directly. */
.home ~ .site-foot { margin-top: 0 }

/* ---- policy pages: privacy (its own inline copy) and the legal pages built by legal.py ---- */
.policy { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; line-height: 1.6 }
.policy h2 { margin-top: 1.6em }
.policy .legal-sec:first-of-type h2 { margin-top: 0.6em }
.policy li { margin: 0.35em 0 }
.policy p { max-width: none }
.legal-updated { color: var(--muted); font-size: 0.95rem }