/* ===================================================================================
 * The LMS design system: tokens, typography, navigation, buttons and footer.
 * Shared by the contact page and the three legal pages, so they cannot drift apart.
 * The home page does not load this file: it carries its own in the home stylesheet.
 * =================================================================================== */
:root{
  --navy-950:#0A1332; --navy-900:#101F4C; --navy-850:#141E42; --navy-800:#1B2748; --line-dark:#26315A; --line-dark-strong:#3A4571;
  --brand-50:#EEF3FD; --brand-100:#D8E4FA; --brand-200:#B4CBF5; --brand-300:#85A9EE; --brand-400:#5586E2; --brand-500:#3064D4; --brand-600:#2650B4; --brand-700:#1F4194;
  --page:#F7F8FB; --card:#FFFFFF; --muted-surface:#EFF1F6; --text:#16192B; --heading:#101F4C; --muted:#64697A; --placeholder:#9095A6; --line:#E2E5EE; --line-strong:#C7CEE0;
  --on-dark:#E8EBF4; --on-dark-muted:#9AA1BA;
  --success-bg:#E8F6EC; --success-fg:#167C3A; --warning-bg:#FFF6E8; --warning-fg:#B36B10; --danger-bg:#FDECEC; --danger-fg:#C62F2F; --info-bg:#EEF3FD; --info-fg:#2650B4;
  --success-fg-dark:#6ECF92; --warning-fg-dark:#E8B45E; --info-fg-dark:#9BBAF0;
  --sev-critical-bg:#FDECEC; --sev-critical-fg:#A32020; --sev-high-bg:#FDEEE4; --sev-high-fg:#B3550F; --sev-medium-bg:#FFF6E8; --sev-medium-fg:#B36B10; --sev-low-bg:#F2F7EC; --sev-low-fg:#5C7A1F; --sev-ok-bg:#E8F6EC; --sev-ok-fg:#167C3A; --sev-over-bg:#EEF3FD; --sev-over-fg:#2650B4;
  --shadow-card:0 1px 3px rgba(16,31,76,.08),0 1px 2px rgba(16,31,76,.06);
  --shadow-raised:0 4px 12px rgba(16,31,76,.12);
  --shadow-float:0 30px 60px -20px rgba(10,19,50,.45),0 12px 24px -12px rgba(10,19,50,.3);
  --font-display:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  --font-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gutter:clamp(16px,4vw,40px);
  --radius-card:12px; --radius-button:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);margin:0;text-wrap:balance}
p{margin:0}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:4px}
.dark :focus-visible{outline-color:var(--brand-300)}


/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-bottom-color:var(--line-strong);box-shadow:0 10px 24px -14px rgba(16,31,76,.35)}
.nav-inner{display:flex;align-items:center;gap:28px;height:68px}
.nav-logo img,.nav-logo svg{display:block;height:34px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:12px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.9375rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--heading)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-login{color:var(--heading);text-decoration:none;font-size:.9375rem;font-weight:500}
.nav-login:hover{text-decoration:underline;text-underline-offset:4px}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);color:var(--heading);border-radius:var(--radius-button);height:40px;padding:0 14px;font:500 .9375rem var(--font-body)}
.mobile-menu{display:none}
/* The header's five links, "Sign in" and the button need 1040px to sit on one line, so it folds
   into the Menu button at 1060px, the width at which the home page's header folds too. */
@media (max-width:1060px){
  .nav-links,.nav-actions{display:none}
  .menu-toggle{display:inline-flex;align-items:center}
  .mobile-menu.open{display:grid;gap:4px;padding:12px var(--gutter) 20px;background:var(--card);border-bottom:1px solid var(--line)}
  .mobile-menu a{color:var(--heading);text-decoration:none;padding:10px 0;font-weight:500}
  .mobile-menu .btn{margin-top:8px;justify-content:center}
  /* The rule for menu links above outranks .btn-primary, so without this the button in the open
     menu had the links' dark text on its blue ground. */
  .mobile-menu a.btn-primary{color:#fff}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--radius-button);font:600 .9375rem var(--font-display);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn-primary{background:var(--brand-500);color:#fff}
.btn-primary:hover{background:var(--brand-600)}
.btn-primary .arrow{transition:transform .2s}
.btn-primary:hover .arrow{transform:translateX(3px)}
.btn-quiet-dark{color:var(--on-dark);border-color:var(--line-dark-strong);background:transparent}
.btn-quiet-dark:hover{border-color:var(--brand-300);color:#fff}
.btn-quiet{color:var(--text);border-color:var(--line-strong);background:transparent}
.btn-quiet:hover{background:var(--muted-surface)}
.btn-sm{height:38px;padding:0 14px;font-size:.875rem}


/* footer */
footer{background:var(--navy-950);color:var(--on-dark-muted);border-top:1px solid var(--line-dark);padding-block:56px 36px;font-size:.9375rem}
.foot{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.foot img{height:40px;width:auto}
.foot h4{font:600 .875rem var(--font-display);color:var(--on-dark);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.8125rem}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

/* The contact honeypot: present for the API to check, never seen or focusable. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}