/* Shared Course home page. Tokens are copied from src/ui/tokens.css. */
:root {
  --surface-100: #fbfaf8;
  --surface-200: #f1eee8;
  --ink: #1f2440;
  --ink-muted: #545a72;
  --line: #d9d5cc;
  --indigo: #2e3a87;
  --on-indigo: #ffffff;
  --indigo-soft: #dce0f5;
  --marigold: #e3a21a;
  --sage: #3f6e5b;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --radius-md: 8px;
  --font-display: Besley, Georgia, "Times New Roman", serif;
  --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-100: #15182b;
    --surface-200: #20243f;
    --ink: #eeedf4;
    --ink-muted: #a9adc4;
    --line: #3a4066;
    --indigo: #a3adf2;
    --on-indigo: #15182b;
    --indigo-soft: #2c3463;
    --marigold: #f0b83c;
    --sage: #7fb59e;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 26px; background: var(--surface-100); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--indigo); }
:where(a, button):focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.top, main, .foot { max-width: 1040px; margin: 0 auto; padding-left: max(16px, 4vw); padding-right: max(16px, 4vw); }
.top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.brand { display: inline-flex; border-radius: var(--radius-md); }
.logo { display: block; max-width: 100%; height: auto; }
.logo-main { fill: var(--indigo); }
.logo-accent { fill: var(--marigold); }
.logo-ink { fill: var(--ink); }

.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-md); font-weight: 700; text-decoration: none; }
.btn-primary { background: var(--indigo); color: var(--on-indigo); }
.btn-primary:hover { filter: brightness(0.92); }
.btn-quiet { color: var(--indigo); }
.btn-quiet:hover { background: var(--indigo-soft); }

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: 56px 0 72px; }
.hero-text { display: grid; gap: 20px; justify-items: start; }
.hero h1 { font-size: 44px; line-height: 50px; letter-spacing: -0.01em; }
.lede { font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 34em; }
.tagline { font-family: var(--font-display); font-weight: 600; font-size: 20px; }

.rows { width: 100%; max-width: 380px; height: auto; justify-self: end; }
.r-indigo { fill: var(--indigo); }
.r-soft { fill: var(--indigo-soft); }
.r-marigold { fill: var(--marigold); }
.r-sage { fill: var(--sage); }
.r-line { stroke: var(--ink-muted); stroke-width: 2; stroke-dasharray: 4 6; }

.phases { padding: var(--space-8) 0 56px; border-top: 1px solid var(--line); display: grid; gap: var(--space-8); }
.phases h2, .privacy h2 { font-size: 28px; line-height: 34px; }
.phase-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); counter-reset: phase; }
.phase-list li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 4px solid var(--indigo); counter-increment: phase; }
.phase-list li:nth-child(3) { border-top-color: var(--marigold); }
.phase-list h3 { font-size: 22px; line-height: 28px; }
.phase-list h3::before { content: counter(phase) ". "; color: var(--ink-muted); font-weight: 600; }
.phase-list p { color: var(--ink-muted); }

.privacy { margin-bottom: 72px; padding: var(--space-8); background: var(--surface-200); border-radius: var(--radius-md); display: grid; gap: 12px; }
.privacy p { max-width: 40em; }

.foot { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-8); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 15px; }

@media (max-width: 860px) {
  .phase-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) 0 48px; }
  .hero h1 { font-size: 34px; line-height: 40px; }
  .rows { justify-self: start; max-width: 280px; }
  .phase-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .privacy { padding: 20px var(--space-4); }
}