/* ----- reset ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ----- tokens ----- */
:root{
  --bg:#0b0f12;          /* dark default for tasteful contrast */
  --ink:#eef3f6;
  --muted:#a6b2bb;
  --card:#131a20;
  --line:#21313a;
  --accent:#7bd2f0;      /* brand cyan */
  --accent-ink:#0b3a4a;
  --radius:.9rem; --gap:1.25rem; --mw:72rem; --font:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f8fafb; --ink:#101418; --muted:#5b6670; --card:#ffffff; --line:#d6e3ea; --accent:#0b3a4a; --accent-ink:#ffffff; }
}

/* ----- base ----- */
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--font)}
:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:var(--card);padding:.5rem .75rem;border-radius:.5rem}

.wrap{max-width:var(--mw);margin-inline:auto;padding:clamp(1rem,2vw,1.5rem)}

/* ----- header ----- */
.site-header{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(6px);background:color-mix(in oklab, var(--bg) 88%, transparent);border-bottom:1px solid var(--line);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.brand{font-size:1.25rem;font-weight:700}
.nav{list-style:none;display:flex;flex-wrap:wrap;gap:.75rem}
.nav a{display:inline-block;padding:.5rem .75rem;border-radius:.6rem;text-decoration:none;color:var(--ink)}
.nav a:hover,.nav a:focus-visible{background:color-mix(in oklab, var(--accent) 18%, transparent)}

/* ----- hero ----- */
.hero{padding:clamp(2rem,6vw,4rem) 0;display:grid;gap:1rem}
.hero h2{font-size:clamp(1.75rem,4vw,2.25rem)}
.hero p{max-width:60ch;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.cta{--x:var(--accent);display:inline-block;background:var(--x);color:var(--accent-ink);padding:.75rem 1rem;border-radius:.7rem;text-decoration:none;font-weight:700}
.cta.secondary{--x:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.cta:active{transform:scale(.98)}

/* ----- sections ----- */
main{display:grid;gap:2rem}
section>h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
section p{max-width:70ch}
.note{margin-top:.5rem;color:var(--muted)}

/* ----- lists ----- */
ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; }
ul ul { list-style: circle; }
li { margin-bottom: 0.5rem; }

/* ----- table ----- */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--line); }
th { background: color-mix(in oklab, var(--card) 100%, var(--accent) 5%); font-weight: 600; }
tr:last-child th, tr:last-child td { border-bottom: none; }
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  tr { border: 1px solid var(--line); margin-bottom: 1rem; }
  td { border: none; border-bottom: 1px solid var(--line); position: relative; padding-left: 50%; }
  td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-label); font-weight: 600; }
}

/* ----- courses grid ----- */
.grid{display:grid;gap:var(--gap)}
.g-3{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.course-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:grid;gap:.5rem}
.course-card h3{font-size:1.05rem}
.course-card p{color:var(--muted)}
.course-card .more{justify-self:start;text-decoration:none;color:var(--accent);font-weight:600}
.course-card .more:hover,.course-card .more:focus-visible{text-decoration:underline}

/* ----- footer ----- */
.site-footer{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--muted)}
.site-footer h3{color:var(--ink)}
.site-footer .social{display:flex;gap:.75rem;flex-wrap:wrap}
.tiny{font-size:.9rem}

/* ----- motion respect ----- */
@media (prefers-reduced-motion: reduce){
  .cta{transition:none}
}