/* CAPS 0.1.53 (Andrew, Nov 13): one header on every public page, the homepage's, with the new
   Route Badge logo. It stays at the top while the page scrolls. Self-contained: it doesn't
   depend on the page's own stylesheet. Ask Shadow (ask-shadow.js) stays fixed at the bottom. */
@font-face { font-family: "MN Inter"; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "MN Inter"; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "MN Inter"; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

.mn-header {
    position: sticky; top: 0; z-index: 8000;
    border-bottom: 1px solid #1e3246; background: rgba(3, 9, 18, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-family: "MN Inter", "Segoe UI", Arial, sans-serif; line-height: 1.4;
    margin: 0; padding: 0; width: 100%;
}
/* Pages whose wrapper hides overflow would stop the header sticking (a scroll box); clip doesn't. */
.login-page, .registration-page { overflow-x: clip; }
.mn-header *, .mn-header *::before, .mn-header *::after { box-sizing: border-box; }
.mn-header-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
    max-width: 100%; margin: 0 auto; padding: 12px clamp(24px, 2.6vw, 56px);
}
.mn-header-brand { display: block; flex: none; line-height: 0; }
.mn-header-brand img { height: 32px; width: auto; display: block; }
.mn-header-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; flex: 1 1 420px; font-size: 15px; font-weight: 500; }
.mn-header-nav a { color: #f4f7fb; text-decoration: none; padding: 4px 0; }
.mn-header-nav a:hover, .mn-header-nav a[aria-current="page"] { color: #ffbd19; }
.mn-header-actions { display: flex; gap: 10px; align-items: center; }
.mn-header-btn {
    display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; line-height: 1.2;
    padding: 9px 16px; font-size: 15px; border-radius: 10px; white-space: nowrap;
}
.mn-header-btn.line { color: #f4f7fb; border: 1px solid #2c4560; }
.mn-header-btn.line:hover { color: #f4f7fb; border-color: #ffbd19; }
.mn-header-btn.gold { background: #ffbd19; color: #10141a; font-weight: 700; }
.mn-header-btn.gold:hover { background: #ffd35c; color: #10141a; }
.mn-header a:focus-visible { outline: 3px solid #ffbd19; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 760px) {
    .mn-header-inner { gap: 8px 16px; padding: 10px 16px 8px; }
    .mn-header-brand img { height: 26px; }
    .mn-header-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; font-size: 14px; scrollbar-width: none; }
    .mn-header-nav::-webkit-scrollbar { display: none; }
    .mn-header-nav a { white-space: nowrap; }
    .mn-header-actions { margin-left: auto; gap: 8px; }
    .mn-header-btn { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 380px) { .mn-header-btn.line { display: none; } }