:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#252c37;background:#f5f6f8;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 12% 30%,#fff 0%,transparent 55%),linear-gradient(135deg,#f8f9fb,#eceff3);min-height:100vh}
.home-header{padding:16px 24px;border:1px solid #f6ddd5;border-bottom:3px solid #c6a250;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#ffffff26,transparent 20%,transparent 76%,#23000433),radial-gradient(120% 155% at 52% 35%,#c81225 0%,#980010 52%,#690008 100%);box-shadow:inset 0 0 0 1px #ffffffa6,inset 0 0 0 3px #ffffff24,inset 0 2px 2px #ffffff73,inset 0 -2px 2px #3e00174d,0 5px 14px #52122324}
.brand{max-width:1080px;margin:auto;display:flex;align-items:center;gap:14px;color:white}
.brand img{flex:none;display:block;object-fit:contain;border-radius:50%;background:#fff}
.brand strong{font-size:17px;letter-spacing:.075em;line-height:1.4}
.brand small{display:block;margin-top:5px;color:#fff0c5;font-size:13px;line-height:1.5}
main{max-width:1128px;padding:30px 24px 36px;margin:auto}
.intro{margin-bottom:24px;text-align:center}
h1{font-size:clamp(28px,3.5vw,38px);font-weight:750;letter-spacing:-.035em;line-height:1.2;margin:0 0 10px}
.intro p{font-size:16px;line-height:1.6;color:#626b79;margin:0}
/* Keep DOM and keyboard order 1–8, reading down each desktop column. */
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,1fr);grid-auto-flow:column;gap:16px;margin:0;padding:0;list-style:none}
.courses li{min-width:0;display:flex}
.course{position:relative;isolation:isolate;display:flex;align-items:center;gap:18px;width:100%;min-height:169px;padding:23px 21px;border:1px solid #fff;border-radius:24px;color:inherit;text-decoration:none;background:linear-gradient(125deg,#fffffff5,#ffffffb8 50%,#f6f7fad9);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #cbd1dc66,0 0 0 1px #dce0e77a,0 7px 20px #24304b09;backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);transition:transform .18s,box-shadow .18s,border-color .18s}
.course:hover{transform:translateY(-2px);border-color:#e9bac5;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #bf31592e,0 10px 24px #48233212}
.course:focus-visible,footer a:focus-visible{outline:3px solid #a50d35;outline-offset:4px}
.number{display:grid;place-items:center;flex:none;width:58px;height:64px;border-radius:20px;font-size:29px;font-weight:750;color:#fff;text-shadow:0 1px 2px #52041799;border:1px solid #ffe0e8bd;background:radial-gradient(120% 90% at 14% 0%,#ffffff70,transparent 56%),linear-gradient(150deg,#d83258eb 0%,#b10c35eb 48%,#850b2bf5 100%);box-shadow:inset 0 1px 1px #ffffffe6,inset 1px 0 1px #ffffff75,inset 0 -2px 3px #4e052866,inset 0 0 0 2px #ffffff1f,0 3px 8px #5d0a2c28}
.course-copy{min-width:0;flex:1}
.course small{font-size:12px;line-height:1.4;font-weight:650;color:#737b88}
.course h2{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:5px 0 7px}
.course p{font-size:14px;line-height:1.55;color:#636d7b;margin:0}
.course .units{font-size:17px;font-weight:700;color:#901033;margin-top:12px}
.course-arrow{flex:none;display:grid;place-items:center;width:29px;height:29px;border:1px solid #e0e3e9;border-radius:50%;background:#ffffffa3;color:#901033;font-size:20px}
footer{margin-top:24px;font-size:13px}
footer a{color:#65707e;text-decoration:none;display:inline-block;padding:5px 0}
footer a:hover{color:#901033;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.home-header{padding:13px 18px}.brand img{width:50px;height:50px}.brand strong{font-size:15px}.brand small{font-size:12px}main{padding:26px 18px 30px}.courses{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:14px}.course{min-height:148px;padding:20px;gap:16px}.course h2{font-size:21px}}
@media(max-width:400px){.brand{gap:10px}.brand strong{font-size:13px}.brand small{font-size:11px}.brand img{width:44px;height:44px}main{padding-inline:14px}.course{padding:18px 14px;gap:12px}.number{width:46px;height:56px;border-radius:17px;font-size:26px}.course h2{font-size:19px}.course-arrow{width:25px;height:25px;font-size:18px}.intro p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.course{transition:none}.course:hover{transform:none}}