*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--surface-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Full-bleed course illustration under a dark scrim (iOS .screenBackground()).
   Home sets data-bg="vivid"; every other screen is dimmed. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: var(--scrim-dimmed), url("/static/img/home-bg.jpg") center top / cover no-repeat, var(--surface-base);
  pointer-events: none;
}
body[data-bg="vivid"]::before {
  background: var(--scrim-vivid), url("/static/img/home-bg.jpg") center top / cover no-repeat, var(--surface-base);
}
body[data-bg="plain"]::before { background: var(--grad-screen); }

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Typography helpers */
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-secondary);
}
.t-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.t-title2 { font-size: 22px; font-weight: 700; }
.t-title { font-size: 28px; font-weight: 800; }
.t-sub { font-size: 15px; color: var(--text-secondary); }
.t-caption { font-size: 12px; color: var(--text-secondary); }
.t-caption2 { font-size: 11px; color: var(--text-secondary); }
.t-muted { color: var(--text-secondary); }
.faint { color: var(--text-tertiary); }
.c-green { color: var(--green); } .c-red { color: var(--red); }
.c-amber { color: var(--amber); } .c-gold { color: var(--gold); } .c-blue { color: var(--blue); }

/* Layout helpers */
.stack { display: flex; flex-direction: column; gap: var(--space-lg); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack-xl { display: flex; flex-direction: column; gap: var(--space-xl); }
.hstack { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.grow { flex: 1 1 auto; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }