:root {
  --bg: #090b11;
  --panel: #151a24;
  --panel-hi: #232a38;
  --slot: #0a0d13;
  --text: #ffffff;
  --muted: #c8d0dc;
  --lime: #a3f02a;
  --lime-deep: #5cae1c;
  --red: #e04a4a;
  --font-display: "Pixelify Sans", "Trebuchet MS", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}


img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--lime); }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--lime); color: #0b1204; padding: 10px 14px; z-index: 30; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: min(1040px, 100% - 32px); margin-inline: auto; }

/* navbar: the only pill on the site, pinned to the top */
.site-header { position: sticky; top: 0; z-index: 20; padding: 12px 0; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 6px 14px 6px 18px;
  background: #10141d;
  border: 2px solid #2c3445;
  border-radius: 999px;
  box-shadow: 0 3px 0 #2c3445;
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--text); text-decoration: none; }
.brand img { width: 64px; height: 64px; margin: -14px 0; }

.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--muted); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"] { border-bottom-color: var(--lime); }
.nav a[aria-disabled="true"] { opacity: 0.7; cursor: default; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--lime);
  color: #0b1204;
  border: 0;
  border-radius: 8px;
  font: 700 1rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, filter 0.1s ease, box-shadow 0.08s ease;
}
.btn:not([aria-disabled="true"]):hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn:not([aria-disabled="true"]):active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.btn.dark { background: var(--panel-hi); color: #fff; }
.btn[aria-disabled="true"] { opacity: 0.75; cursor: default; }

/* hero: logo first, centered */
.hero { padding: 24px 0 24px; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: clamp(150px, 26vw, 220px); height: auto; margin-bottom: -10px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.35)); }

h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 8vw, 4.8rem); line-height: 1; }
h1 span { color: var(--lime); }

.lede { max-width: 30rem; margin: 16px 0 26px; font-size: 1.15rem; color: var(--muted); }

/* server status styled as the in-game server list entry */
.server {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(640px, 100%);
  padding: 16px 22px;
  text-align: left;
  background: var(--slot);
  border: 2px solid #2c3445;
  border-radius: 10px;
}
.server-name { font-weight: 700; font-size: 1.2rem; line-height: 1.2; display: flex; align-items: center; gap: 10px; }
.server-note { margin: 2px 0 0; color: var(--muted); }
.server-count { text-align: right; flex: none; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.server-count small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 0.9rem; color: var(--muted); }

.dot { width: 12px; height: 12px; background: #8a928b; flex: none; }
.server[data-state="online"] .dot { background: var(--lime); animation: pulse 2s ease-in-out infinite; }
.server[data-state="loading"] .dot { animation: pulse 0.9s ease-in-out infinite; }
.server[data-state="offline"] .dot, .server[data-state="error"] .dot { background: #ff6b6b; }

.cta-row { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.facts { margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.facts div { display: flex; gap: 8px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-family: var(--font-mono); }

/* sections */
section.block { padding: 40px 0; }
.block h2 { margin: 0 0 6px; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.2; }
.block .sub { margin: 0 0 24px; color: var(--muted); }

/* cards: each has its own color, like the reference store pages */
.card {
  --tint: #1a2030;
  --edge: #3a4660;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px;
  background: var(--tint);
  border: 2px solid var(--edge);
  border-radius: 10px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.card:hover { transform: translateY(-3px); }
.card h3 { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.card p { margin: 6px 0 0; color: #fff; }
.icon { flex: none; width: 88px; height: 88px; display: grid; place-items: center; }
.icon svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }

.m-crimson { --tint: #4a0f26; --edge: #b62a56; }
.m-amber { --tint: #4a3410; --edge: #d49a2a; }
.m-teal { --tint: #0d3a34; --edge: #22a58d; }
.m-violet { --tint: #2d1a52; --edge: #8a5cd6; }
.c-green { --tint: #17370f; --edge: var(--lime-deep); }
.c-red { --tint: #4a1616; --edge: var(--red); }
.c-slate { --tint: #1c2332; --edge: #5b6679; }

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.modes .mode { flex-direction: column; align-items: flex-start; gap: 16px; }
.modes .mode .icon { width: 72px; height: 72px; }
.modes .mode h3 { font-size: 1.5rem; }
.mode h3 { font-family: var(--font-display); font-weight: 700; }
.mode-empty { margin: 0; color: var(--muted); }

.links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.links .card { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }
.links .card .btn { margin-top: auto; }
.links .card .icon { width: 64px; height: 64px; }
.links .card { --tint: var(--panel); --edge: var(--panel-hi); }
.links .card .btn { background: var(--panel-hi); color: #fff; }
.links .card.c-green .btn { background: var(--lime); color: #0b1204; }

/* rules page */
.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
.draft-note { margin: 20px 0 0; max-width: 44rem; padding: 14px 18px; background: var(--panel); border: 2px solid #3a4660; border-radius: 10px; }
.rules { counter-reset: rule; list-style: none; margin: 32px 0 72px; padding: 0; max-width: 46rem; display: grid; gap: 12px; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 4rem 1fr; background: var(--panel); border: 2px solid #2c3445; border-radius: 10px; overflow: hidden; }
.rules li::before { content: counter(rule); display: grid; place-items: center; background: var(--slot); font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--lime); }
.rules li > div { padding: 16px 20px; }
.rules h2 { margin: 0 0 4px; font-size: 1.25rem; }
.rules p { margin: 0; color: var(--muted); }

/* footer */
.site-footer { padding: 40px 0; color: var(--muted); font-size: 0.95rem; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.foot nav { display: flex; gap: 4px 20px; }
.foot a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: #fff; }
.foot p { margin: 0; align-self: center; }

/* motion */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.site-header .bar { animation: drop-in 0.3s ease-out both; }


@media (max-width: 800px) {
  .modes { grid-template-columns: 1fr; }
  .links { grid-template-columns: 1fr; }
  .links .card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .links .card .btn { flex: 1 0 100%; }
}

@media (max-width: 600px) {
  .brand span { display: none; }
  .bar { padding-left: 12px; padding-right: 8px; }
  .nav a { padding: 0 8px; font-size: 0.95rem; }
  .server { flex-direction: column; align-items: flex-start; gap: 10px; }
  .server-count { text-align: left; }
  .card, .modes .mode:first-child { padding: 22px; gap: 18px; }
  .icon, .modes .mode:first-child .icon { width: 64px; height: 64px; }
  .modes .mode:first-child h3 { font-size: 1.8rem; }
  .rules li { grid-template-columns: 3rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* footer */
.site-footer { margin-top: 32px; padding: 0; background: #0c0f16; color: var(--muted); font-size: 1rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1.1fr 1.2fr; gap: 40px; padding: 48px 0 40px; }
.foot-col h2 { margin: 0 0 14px; font-size: 1.15rem; color: #fff; }
.foot-col p { margin: 0 0 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.foot-col li a:hover { color: #fff; text-decoration: underline; }
.foot-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.foot-brand img { width: 56px; height: 56px; }
.ip { display: block; width: fit-content; max-width: 100%; margin-bottom: 12px; padding: 10px 14px; background: var(--slot); border: 2px solid #2c3445; border-radius: 8px; font-family: var(--font-mono); color: #fff; overflow-wrap: anywhere; }
.foot-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.foot-bottom { padding: 18px 0 28px; font-size: 0.92rem; }
.foot-bottom p { margin: 0 0 4px; }
.foot-bottom .credit a { color: var(--lime); }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; padding-top: 36px; }
}

/* rules page sections */
.page-head .intro { max-width: 40rem; margin: 16px 0 0; font-size: 1.15rem; color: var(--muted); }
.rule-grid { display: grid; gap: 16px; max-width: 52rem; margin: 28px 0 72px; }
.rcard { padding: 28px; background: var(--tint, #1a2030); border: 2px solid var(--edge, #3a4660); border-radius: 10px; }
.rcard h2 { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.2; }
.rcard p { margin: 0 0 12px; }
.rcard p:last-child { margin-bottom: 0; }
.rcard ul { margin: 0 0 12px; padding-left: 1.25rem; }
.rcard ul:last-child { margin-bottom: 0; }
.rcard li { margin-bottom: 8px; padding-left: 4px; }
.rcard li::marker { color: var(--lime); }
.rcard code { padding: 2px 7px; background: var(--slot); border-radius: 5px; font-family: var(--font-mono); }
.rcard a { color: #fff; font-weight: 600; }

/* mod list */
.mods { max-width: 1040px; margin: 0 0 72px; scroll-margin-top: 96px; }
.mods h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.2; }
.mods-sub { margin: 0 0 20px; max-width: 46rem; color: var(--muted); }
.mod-tools { margin-bottom: 16px; max-width: 28rem; }
.mod-tools label { display: block; margin-bottom: 6px; font-weight: 600; }
.mod-tools input { width: 100%; min-height: 48px; padding: 0 14px; background: var(--slot); color: #fff; border: 2px solid #3a4660; border-radius: 8px; font: 1rem var(--font-body); }
.mod-tools input::placeholder { color: #9aa6b8; }
.mod-tools input:focus { border-color: var(--lime); outline: none; box-shadow: 0 0 0 3px rgba(163, 240, 42, 0.3); }
.modpanel { padding: 24px; border: 2px solid var(--edge); border-radius: 10px; background: var(--tint); }
.modpanel h3 { margin: 0 0 14px; font-size: 1.35rem; }
.modpanel .count { margin-left: 8px; padding: 2px 10px; font-size: 0.95rem; font-weight: 600; background: rgba(0, 0, 0, 0.35); border-radius: 6px; }
.p-allowed { --tint: #0f3a30; --edge: #22a58d; margin-bottom: 16px; }
.p-disallowed { --tint: #4a0f26; --edge: #b62a56; }
.p-risk { --tint: #4a3410; --edge: #d49a2a; }
.mod-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; font-size: 0.95rem; line-height: 1.4; }
.mod-empty { margin: 16px 0 0; padding: 16px 20px; background: var(--panel); border-radius: 10px; }
.mod-notes { margin-top: 16px; padding: 24px; background: var(--panel); border: 2px solid #3a4660; border-radius: 10px; }
.mod-notes h3 { margin: 0 0 12px; font-size: 1.35rem; }
.mod-notes ul { margin: 0; padding-left: 1.25rem; }
.mod-notes li { margin-bottom: 8px; }
.mod-notes li::marker { color: var(--lime); }
@media (max-width: 800px) { .mod-split { grid-template-columns: 1fr; } }

/* phone fixes */
.brand { min-height: 44px; }
.foot-bottom .credit a { display: inline-block; padding: 12px 0; }
.word { display: inline-block; white-space: nowrap; }
@media (max-width: 480px) {
  .nav a[href$="#gamemodes"] { display: none; }
  .nav a { padding: 0 10px; font-size: 0.95rem; }
  h1 { font-size: clamp(2.2rem, 11vw, 2.8rem); }
}

/* keep logos from being squeezed by flex layout on narrow screens */
.brand { flex: none; }
.brand img, .foot-brand img { flex: none; object-fit: contain; aspect-ratio: 1 / 1; }
@media (max-width: 480px) {
  .brand img { width: 56px; height: 56px; margin: -12px 0; }
  .bar { gap: 4px; padding-left: 10px; padding-right: 6px; }
  .nav { min-width: 0; }
}

/* applications page */
.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; }
.apply-form { display: grid; gap: 16px; max-width: 52rem; margin: 28px 0 24px; }
.apply-form .rcard h2, .apply-result h2 { margin: 0 0 18px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field-grid + .field { margin-top: 0; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea, .apply-result textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--slot);
  color: #fff;
  border: 2px solid #3a4660;
  border-radius: 8px;
  font: 1rem/1.5 var(--font-body);
}
.field textarea, .apply-result textarea { resize: none; min-height: 96px; }
.apply-result textarea { font-family: var(--font-mono); font-size: 0.95rem; }
.field input:disabled, .field textarea:disabled { opacity: 0.6; }
.field select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: #10141d; color: #fff; }
.field input:focus, .field select:focus, .field textarea:focus, .apply-result textarea:focus { border-color: var(--lime); outline: none; box-shadow: 0 0 0 3px rgba(163, 240, 42, 0.3); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ff8f8f; }
.help { margin: 6px 0 0; font-size: 0.95rem; color: var(--muted); }
.err { margin: 6px 0 0; font-size: 0.95rem; font-weight: 600; color: #ffb4b4; }
.err:empty { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.apply-result { max-width: 52rem; margin: 0 0 72px; }
.apply-result p { margin: 0 0 12px; }
.apply-result .count { margin: 10px 0 16px; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 700px) { .field-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .nav a[href="/"] { display: none; } .nav a { padding: 0 6px; font-size: 0.88rem; } .bar { padding-left: 10px; padding-right: 4px; } }

/* six nav links: drop the wordmark, then Gamemodes, then Home as the screen narrows */
@media (max-width: 1100px) { .brand span { display: none; } }
@media (max-width: 600px) { .nav a[href$="#gamemodes"] { display: none; } }

.questions-grid { display: grid; gap: 16px; }
.section-note { margin: -8px 0 18px; color: var(--muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#result[data-mode="sent"] .only-fallback, #result[data-mode="banned"] .only-fallback, #result[data-mode="banned"] .only-sent, #result[data-mode="banned"] #download-app, #result[data-mode="fallback"] .only-sent { display: none; }

/* custom dropdown (js/select.js). The native select stays underneath for forms and no-JS use. */
.dd { position: relative; }
.dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 50px; padding: 11px 14px;
  background: var(--slot); color: #fff;
  border: 2px solid #3a4660; border-radius: 8px;
  font: 1rem/1.5 var(--font-body); text-align: left; cursor: pointer;
  transition: border-color 0.15s ease;
}
.dd-btn:hover { border-color: #55627f; }
.dd-btn:focus-visible, .dd-open .dd-btn { border-color: var(--lime); outline: none; box-shadow: 0 0 0 3px rgba(163, 240, 42, 0.3); }
.dd-btn.dd-empty .dd-text { color: #a9b3c4; }
.dd-arrow { flex: none; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-3px) rotate(45deg); transition: transform 0.15s ease; }
.dd-open .dd-arrow { transform: translateY(2px) rotate(-135deg); }
.field.has-error .dd-btn { border-color: #ff8f8f; }
.dd-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto;
  background: #10141d; border: 2px solid #3a4660; border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  animation: dd-in 0.12s ease-out;
}
.dd-list:focus { outline: none; }
.dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.dd-opt.dd-placeholder { color: #a9b3c4; }
.dd-opt.dd-active { background: #232c3d; }
.dd-opt[aria-selected="true"] { font-weight: 700; color: var(--lime); }
.dd-opt[aria-selected="true"]::after { content: ""; flex: none; width: 6px; height: 11px; border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(45deg) translate(-2px, -2px); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd-list { animation: none; } }
.rcard:has(.dd-open) { position: relative; z-index: 8; }

/* application status lookup */
.status-check { max-width: 52rem; margin: 0 0 72px; }
.status-check h2 { margin: 0 0 14px; font-size: 1.5rem; }
.status-check .section-note { margin-bottom: 16px; }
.inline-row { display: flex; gap: 12px; }
.inline-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.status-out:empty { display: none; }
.status-out { margin-top: 18px; }
.status-card { padding: 18px 20px; background: var(--slot); border: 2px solid #3a4660; border-radius: 10px; }
.status-card h3 { margin: 8px 0 6px; font-size: 1.3rem; }
.status-card p { margin: 0 0 10px; }
.status-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; color: var(--muted); }
.status-card dd { margin: 0; color: #fff; }
.sbadge { display: inline-block; padding: 1px 10px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; }
.sbadge.pending { background: rgba(240, 176, 74, 0.18); color: #f0b04a; border: 1px solid #8a6420; }
.sbadge.accepted { background: rgba(163, 240, 42, 0.14); color: var(--lime); border: 1px solid #4f7f14; }
.sbadge.denied { background: rgba(224, 74, 74, 0.16); color: #ff9a9a; border: 1px solid #8f3030; }
.status-msg { padding: 12px 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); font-weight: 600; }
.status-msg.bad { background: rgba(224, 74, 74, 0.14); border: 1px solid #b83a3a; color: #ffd0d0; }
@media (max-width: 600px) { .inline-row { flex-direction: column; } .inline-row .btn { width: 100%; } }

/* Cloudflare Turnstile widget sits just above the submit button */
.turnstile-box { margin: 0 0 16px; min-height: 0; }
.turnstile-box iframe { max-width: 100%; }

/* Blocked visitors see one red card and nothing else */
#result[data-mode="banned"] { --tint: #3f1010; --edge: #e04a4a; }
#result[data-mode="banned"] h2 { color: #ff8a8a; }

/* phone menu (js/nav.js adds the button and the nav-ready class) */
.nav-toggle { display: none; }
@media (max-width: 820px) {
  .site-header.nav-ready .bar { position: relative; }
  .site-header.nav-ready .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 44px; margin-left: auto; padding: 0 12px;
    background: transparent; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 4px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); transition: transform 0.2s, opacity 0.2s; }
  .nav-toggle:hover span { background: var(--lime); }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .site-header.nav-ready .nav {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; gap: 4px; padding: 10px;
    background: #10141d; border: 2px solid #2c3445; border-radius: 18px; box-shadow: 0 3px 0 #2c3445;
  }
  .site-header.nav-ready.nav-open .nav { display: flex; }
  .site-header.nav-ready .nav a { display: flex; min-height: 52px; padding: 0 16px; font-size: 1.05rem; border-bottom: 0; border-radius: 10px; }
  .site-header.nav-ready .nav a:hover { background: #1a2030; }
  .site-header.nav-ready .nav a[aria-current="page"] { background: #17370f; color: var(--lime); }
}

/* home hero: on wide screens the text sits on the left and the logo on the right, instead of one centred stack */
@media (min-width: 900px) {
  main .hero { padding: 48px 0 32px; text-align: left; }
  .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; align-items: center; }
  .hero-copy > * { grid-column: 1; }
  .hero-copy .hero-logo { grid-column: 2; grid-row: 1 / span 5; width: 280px; margin: 0; }
  .hero h1 { font-size: 4.4rem; }
  .hero .lede { margin: 14px 0 24px; }
  .hero .server { width: 100%; max-width: 580px; }
  .hero .cta-row, .hero .facts { justify-content: flex-start; }
}
@media (max-width: 800px) {
  .modes .mode { flex-direction: row; align-items: center; }
}