/* Shared styles for the course reader and library (the homepage keeps its own inline styles). */
:root{
  /* dark navy work surface: people stare at lessons for 10 minutes, so no glaring white */
  --bg:oklch(0.21 0.06 262);
  --bg-deep:oklch(0.16 0.05 262);
  --surface:oklch(0.26 0.065 262);
  --surface-2:oklch(0.31 0.07 262);
  --ink:oklch(0.96 0.012 250);
  --on-light:oklch(0.20 0.05 262);
  --muted:oklch(0.80 0.035 255);
  --line:oklch(0.37 0.06 262);
  --blue:oklch(0.76 0.13 240);
  --blue-fill:oklch(0.52 0.17 255);
  --blue-deep:oklch(0.92 0.05 240);
  --blue-soft:oklch(0.30 0.09 258);
  --on-blue-muted:oklch(0.90 0.04 240);
  --sun:oklch(0.88 0.17 92);
  --sun-soft:oklch(0.88 0.17 92);
  --sun-deep:oklch(0.88 0.17 92);
  --coral:oklch(0.74 0.15 35);
  --mint-deep:oklch(0.80 0.13 160);
  --right-bg:oklch(0.33 0.08 165);
  --wrong-bg:oklch(0.32 0.08 30);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Young Serif",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Figtree,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--sun-deep);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}

.topbar{background:var(--bg-deep);color:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:22px;text-decoration:none;color:#fff}
.logo svg{width:36px;height:36px}
.topbar nav{display:flex;gap:22px;font-weight:600;font-size:16px}
.topbar nav a{text-decoration:none;opacity:.88}
.topbar nav a:hover{opacity:1}
.topbar nav a{white-space:nowrap}
@media(max-width:560px){.topbar nav{gap:14px;font-size:15px}.topbar nav .long{display:none}.logo{font-size:19px}.logo svg{width:30px;height:30px}}
@media(max-width:400px){.topbar .logo .word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(max-width:400px){.topbar nav a[href="/#programs"]{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;padding:14px 22px;border-radius:99px;text-decoration:none;transition:transform .35s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn-sun{background:var(--sun);color:var(--on-light)}
.btn-ink{background:var(--ink);color:var(--on-light)}
.btn-blue{background:var(--blue-fill);color:#fff}
.btn-line{border:2px solid var(--line)}
.btn svg{width:18px;height:18px}

.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,24px);opacity:0;pointer-events:none;background:var(--ink);color:var(--on-light);font-weight:700;padding:14px 22px;border-radius:99px;z-index:30;transition:transform .45s var(--ease),opacity .3s;max-width:calc(100% - 32px);text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* Legal pages (privacy, terms, refunds) */
.legal{max-width:760px;padding-top:48px;padding-bottom:120px}
.legal h1{font-size:clamp(36px,6vw,52px);margin-bottom:8px}
.legal .eff{color:var(--muted);font-weight:600;font-size:15px;margin-bottom:28px}
.legal .short{background:var(--surface);border-radius:18px;padding:20px 24px;margin-bottom:36px}
.legal .short b{display:block;font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:8px}
.legal .short ul{padding-left:20px;display:grid;gap:6px}
.legal h2{font-size:26px;margin:40px 0 12px}
.legal p,.legal li{color:oklch(0.90 0.02 255);max-width:68ch;text-wrap:pretty}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin:10px 0;display:grid;gap:8px}
.legal a{color:var(--blue);font-weight:600}
.legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:16px}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{color:var(--muted);font-size:13px;font-weight:800;text-transform:none}
@media(max-width:560px){.legal table,.legal tbody,.legal tr,.legal td{display:block}.legal thead{display:none}.legal tr{padding:10px 0;border-bottom:1px solid var(--line)}.legal td{border:0;padding:2px 0}.legal td:first-child{font-weight:800}}
mark.fill{background:var(--sun);color:var(--on-light);font-weight:700;padding:0 4px;border-radius:4px}
.legal-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:15px}
.site-foot{border-top:1px solid var(--line);padding:24px 0 96px;font-size:14px;color:var(--muted)}
.site-foot .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.site-foot a{color:var(--muted);text-decoration:none;font-weight:600}
.site-foot a:hover{color:var(--ink)}
.site-foot small{flex-basis:100%;font-size:13px}