/* One public header for every page: the homepage, the static guide pages and the React pages (Pricing, Compare,
   Terms, Privacy, the course demos and sign-in, via src/components/public/SiteHeader.tsx). The design is the
   homepage's: a 72px translucent bar whose content sits in the homepage's 1400px column.

   A signed-in visitor sees "Learner portal" where everyone else sees "Sign in"; "Sign up now" stays in both.
   Static pages cannot see the HttpOnly session cookies, so the request proxy keeps a plain as_signed_in=1 cookie
   in step with the verified session, and a line of script at the top of the header marks <html data-signed-in>
   before the buttons are drawn. React pages render the right link on the server instead.

   Every rule starts with .public-header so the pages' own element styles (nav, nav a, summary) cannot leak in.
   The header loads its own copy of the site's Inter under a separate name, so it looks the same on every page
   without changing the font of the page around it. */
@font-face{font-family:"Airspace Header Inter";src:url("/homepage/assets/fonts/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.public-header{position:sticky;top:0;z-index:50;background:#ffffffcc;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #10204414;color:#102044;font-family:"Airspace Header Inter",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:normal;-webkit-font-smoothing:antialiased;font-synthesis:none}
/* The homepage's opening film runs underneath the bar. */
.public-header.public-header-fixed{position:fixed;inset:0 0 auto}
html:has(.public-header:not(.public-header-fixed)){scroll-padding-top:72px}
.public-header .public-header-inner{display:flex;align-items:center;gap:32px;min-height:72px;width:calc(100% - 112px);max-width:1400px;margin:0 auto}
.public-header .public-header-brand{display:flex;margin-right:auto}
.public-header .public-header-brand img{display:block;width:176px;height:auto}
.public-header .public-header-links{display:flex;align-items:center;align-self:center;gap:28px;margin:0;padding:0}
.public-header .public-header-links a{padding:0;border:0;color:#102044;text-decoration:none;font-size:14px;font-weight:550;white-space:nowrap}
.public-header .public-header-links a:hover{color:#1767e8}
.public-header .public-header-actions{display:flex;gap:10px}
.public-header .public-header-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;border:1px solid transparent;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.public-header .public-header-outline{border-color:#b8cbe5;background:#ffffffb3;color:#175bbb}
.public-header .public-header-outline:hover{border-color:#1767e8;background:#f3f8fe;color:#175bbb}
.public-header .public-header-primary{background:#1767e8;color:#fff}
.public-header .public-header-primary:hover{background:#1156c5;color:#fff}
.public-header a:focus-visible,.public-header summary:focus-visible{outline:3px solid #ec9e3b;outline-offset:3px}
.public-header .public-header-menu{display:none;position:relative}
.public-header .public-header-menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #b8cbe5;border-radius:8px;color:#102044;cursor:pointer}
.public-header .public-header-menu summary::-webkit-details-marker{display:none}
.public-header .public-header-menu summary svg{width:20px;height:20px}
.public-header .public-header-menu nav{position:absolute;right:0;top:54px;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:240px;margin:0;padding:8px;background:#fff;border:1px solid #d8e2ef;border-radius:12px;box-shadow:0 18px 50px #10204426}
/* On a short screen (a phone turned sideways) the menu scrolls inside itself, so its last links stay reachable. */
.public-header .public-header-menu nav{max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
.public-header .public-header-menu nav a{display:block;padding:12px 14px;border:0;border-radius:8px;color:#102044;text-decoration:none;font-size:15px;font-weight:550}
.public-header .public-header-menu nav a:hover{background:#f3f8fe}
.public-header .public-header-menu hr{height:0;margin:6px 8px;border:0;border-top:1px solid #d8e2ef}
html:not([data-signed-in]) .public-header .public-header-signed-in,html[data-signed-in] .public-header .public-header-signed-out{display:none}
@media(max-width:1180px){.public-header .public-header-links{gap:20px}.public-header .public-header-inner{gap:22px}}
@media(max-width:1040px){.public-header .public-header-links a:last-child{display:none}}
@media(max-width:900px){
.public-header .public-header-inner{width:calc(100% - 40px);gap:12px}
.public-header .public-header-links,.public-header .public-header-actions .public-header-outline{display:none}
.public-header .public-header-menu{display:block}
.public-header .public-header-brand img{width:150px}
}
/* Phones narrower than 373px (many Android phones are 360px): tighten the bar so the menu button stays on screen. */
@media(max-width:372px){
.public-header .public-header-inner{gap:8px}
.public-header .public-header-actions .public-header-primary{padding:9px 10px}
.public-header .public-header-brand img{width:min(150px,calc(100vw - 208px))}
}