:root{
  --ground:#F3F5F7; --surface:#FFFFFF; --surface-2:#E9ECEF;
  --line:#D3D9DF; --line-soft:#E3E7EB;
  --text:#172632; --text-2:#405466; --text-3:#5A6B7C;
  --accent:#2E6E4F; --accent-2:#20543A; --accent-soft:#E1F0E6; --link:#20543A;
  --brand:#176A62; --brand-text:#FFFFFF;
  --focus:#2563A8;
  --shadow:0 1px 2px rgba(20,30,40,.06), 0 8px 24px -12px rgba(20,30,40,.18);
  --shadow-lift:0 2px 4px rgba(20,30,40,.08), 0 18px 40px -18px rgba(20,30,40,.30);
  --r:10px; --content-max:1240px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --disp:ui-sans-serif,"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E141A; --surface:#161E26; --surface-2:#1D2731;
    --line:#2C3844; --line-soft:#212C36;
    --text:#EDF2F4; --text-2:#BCC7CD; --text-3:#93A2AA;
    --accent:#79C99B; --accent-2:#A7E3BD; --accent-soft:#173C2A; --link:#79C99B;
    --brand:#77D5C4; --brand-text:#0A211D;
    --focus:#8CC5FF;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#0E141A; --surface:#161E26; --surface-2:#1D2731;
  --line:#2C3844; --line-soft:#212C36;
  --text:#EDF2F4; --text-2:#BCC7CD; --text-3:#93A2AA;
  --accent:#79C99B; --accent-2:#A7E3BD; --accent-soft:#173C2A; --link:#79C99B;
  --brand:#77D5C4; --brand-text:#0A211D;
  --focus:#8CC5FF;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.65;
}
a{color:var(--link); text-decoration-thickness:1px; text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
img{max-width:100%}

.wrap{max-width:var(--content-max); margin:0 auto; padding:0 24px}
.prose{max-width:760px}

/* ---------- masthead ---------- */
.topbar{background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-in{
  max-width:var(--content-max); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand-mark{
  display:inline-flex; align-items:baseline; gap:0; padding:9px 11px 8px; border-radius:6px;
  background:var(--brand); color:var(--brand-text); font-family:var(--disp); font-size:23px; font-weight:800;
  letter-spacing:-.045em; line-height:1; white-space:nowrap; text-decoration:none;
}
.brand-mark span{display:inline-block}
.brand-mark .brand-mock{font-weight:800}
.brand-mark .brand-room{font-weight:300}
.brand-mark .brand-tld{font-size:.6em; font-weight:600; letter-spacing:0; opacity:.72}
.brand-sub{font-family:var(--mono); font-size:12px; color:var(--text-3)}
.topnav{margin-left:auto; display:flex; gap:18px; font-family:var(--disp); font-size:14px}
.topnav a{color:var(--text-2); text-decoration:none}
.topnav a:hover{color:var(--text); text-decoration:underline}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px}
.eyebrow{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:14px;
}
h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(34px,5.2vw,54px); margin:0 0 18px;
}
.lede{font-size:20px; color:var(--text-2); max-width:60ch; margin:0}

/* ---------- exam picker ---------- */
.section{padding:16px 0 56px}
h2{font-family:var(--disp); font-weight:700; font-size:24px; letter-spacing:-.015em; margin:0 0 6px}
.section-note{color:var(--text-3); font-size:15px; margin:0 0 22px}
.exam-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); list-style:none; padding:0; margin:0}
.exam-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
}
.exam-card h3{font-family:var(--disp); font-size:19px; font-weight:700; margin:0}
.exam-card h3 a{text-decoration:none; color:var(--text)}
.exam-card h3 a:hover{text-decoration:underline; color:var(--accent-2)}
.exam-code{font-family:var(--mono); font-size:13px; color:var(--text-3); letter-spacing:.04em}
.exam-card p{margin:0; font-size:16px; color:var(--text-2)}
.exam-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-family:var(--mono); font-size:12px; color:var(--text-3); margin-top:2px}
.badge{
  align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 8px; border-radius:999px;
}
.badge-live{background:var(--accent-soft); color:var(--accent-2)}
.badge-soon{background:var(--surface-2); color:var(--text-3)}
.go{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 20px; border-radius:8px; font-family:var(--disp);
  font-weight:600; font-size:15px; text-decoration:none;
  background:var(--accent); color:var(--brand-text);
}
.go:hover{background:var(--accent-2)}
.exam-card--soon .go{background:var(--surface-2); color:var(--text-3); pointer-events:none}

/* ---------- feature rows ---------- */
.feature-grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:0; padding:0}
.feature h3{font-family:var(--disp); font-size:17px; font-weight:700; margin:0 0 6px}
.feature p{margin:0; color:var(--text-2); font-size:16px}

/* ---------- legal pages ---------- */
.legal{padding:52px 0 72px}
.legal h1{font-size:clamp(28px,4vw,40px)}
.legal h2{margin:34px 0 8px; font-size:21px}
.legal h3{font-family:var(--disp); font-size:17px; margin:22px 0 6px}
.legal p,.legal li{color:var(--text-2)}
.legal ul{padding-left:22px}
.legal li{margin:6px 0}
.legal code{font-family:var(--mono); font-size:.88em; background:var(--surface-2); padding:1px 5px; border-radius:4px; color:var(--text)}
.updated{font-family:var(--mono); font-size:13px; color:var(--text-3); margin:0 0 8px}
.callout{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:16px 18px; margin:22px 0;
}
.callout p{margin:0; font-size:16px}
.legal table{border-collapse:collapse; width:100%; margin:14px 0; font-size:15px; display:block; overflow-x:auto}
.legal th,.legal td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
.legal th{background:var(--surface-2); font-family:var(--disp); font-size:14px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--surface); padding:30px 0; margin-top:40px}
.foot-in{max-width:var(--content-max); margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center}
.foot a{color:var(--text-2); font-family:var(--disp); font-size:14px; text-decoration:none}
.foot a:hover{color:var(--text); text-decoration:underline}
.foot-note{color:var(--text-3); font-size:13px; margin:10px 0 0; width:100%; max-width:70ch}

@media (max-width:640px){
  .hero{padding:44px 0 30px}
  body{font-size:16px}
  .topnav{width:100%; margin-left:0}
}