/* #SaveHalo (savehalo.gg): Halo Labs' look, dark only, its colours the Forerunner palette's
   (packages/design-system/overrides/halo-hud.tokens.css) and its faces Saira and Barlow, self-hosted from the
   @fontsource packages by build.sh. */

@font-face {
  font-family: 'Saira';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/saira-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/saira-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --sunken: oklch(0.14 0.008 225);
  --bg: oklch(0.17 0.01 225);
  --surface: oklch(0.205 0.012 225);
  --raised: oklch(0.24 0.014 225);
  --border: oklch(0.31 0.016 222);
  --border-strong: oklch(0.54 0.02 220);
  --ink-1: oklch(0.96 0.006 220);
  --ink-2: oklch(0.8 0.012 220);
  --ink-3: oklch(0.67 0.014 220);
  --primary: oklch(0.84 0.12 200);
  --primary-hover: oklch(0.89 0.1 198);
  --on-primary: oklch(0.17 0.01 225);
  /* Halo Labs' orange (halo-hud.tokens.css), less faded since 2026-10-17 (it was oklch(0.76 0.15 52)). */
  --accent: oklch(0.73 0.18 50);
  --line: oklch(0.84 0.12 200);
  --heading: 'Saira', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --body: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(110% 60% at 50% -10%, color-mix(in oklab, var(--line) 16%, transparent), transparent 65%);
  color: var(--ink-2);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
}
a:hover {
  color: var(--primary-hover);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink-1);
  font-family: var(--heading);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.accent {
  color: var(--accent);
}
/* The hero's "Halo team" a line of its own under "Build your company's", in a gradient from the HUD's blue to its
   orange (Bart, 2026-10-17); the buttons under it stay orange. */
h1 .accent {
  display: block;
  width: fit-content;
  color: var(--primary);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- The bar ---- */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--gutter);
  background: color-mix(in oklab, var(--sunken) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.wordmark {
  color: var(--ink-1);
  font: 700 1.25rem/1 var(--heading);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.wordmark:hover {
  color: var(--ink-1);
}
.hash {
  color: var(--accent);
}
.presented {
  flex: 1;
  color: var(--ink-3);
  font-size: 0.875rem;
}
/* Sign In with Xbox beside Start a Team (Bart, 2026-10-17): Halo Labs' own Xbox sign-in, then its Teams page. */
.bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Xbox's own green, white type and mark, as Halo Labs' Sign In with Xbox is (Bart, 2026-10-17). */
.btn.btn-xbox,
.btn.btn-xbox:hover {
  gap: 8px;
  background: #107c10;
  color: #fff;
  box-shadow: none;
}
.btn.btn-xbox:hover {
  background: #138a13;
}
/* Signed in (session.js): your gamertag, to your Halo Labs profile. */
.bar-me {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.btn-xbox svg {
  width: 16px;
  height: 16px;
  color: #fff;
}
.presented a {
  color: var(--ink-2);
  text-decoration: none;
}
.presented a:hover {
  color: var(--ink-1);
}

/* ---- Buttons: halolabs.gg's own (its Button: 40px, 6px corners, Barlow, the primary solid cyan, the other a soft
   fill of the strong border's grey), so the two sites' buttons read as one. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  /* The HUD's orange with its glow, as halolabs.gg's primary buttons are (Bart, 2026-10-17: "supposed to be orange"). */
  background: var(--accent);
  color: var(--on-primary);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 16%, transparent),
    0 0 22px -6px color-mix(in oklab, var(--accent) 55%, transparent);
  font: 500 0.9375rem/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
/* Under the pointer, white (Bart, 2026-10-17: not a faded orange), the dark ink on it. */
.btn:hover {
  background: var(--ink-1);
  color: var(--on-primary);
}
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn-ghost {
  background: color-mix(in oklab, var(--border-strong) 30%, transparent);
  color: var(--ink-1);
  box-shadow: none;
}
.btn-ghost:hover {
  background: color-mix(in oklab, var(--border-strong) 45%, transparent);
  color: var(--ink-1);
}
.btn-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---- The hero ---- */
.hero {
  position: relative;
  display: grid;
  min-height: min(88vh, 760px);
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
/* Halo Infinite's own art (a red-team firefight, art/hero.jpg; game content under Microsoft's Game Content Usage Rules),
   its Spartan in the foreground to the right of the words, and the HUD's frame over it. */
.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 35%;
}
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero::after {
  /* Darkens the art under the words: from the left, where they stand, and up from the foot into the page. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, transparent 40%),
    linear-gradient(to right, color-mix(in oklab, var(--bg) 92%, transparent) 0%, color-mix(in oklab, var(--bg) 70%, transparent) 45%, transparent 80%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--gutter) 64px;
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font: 600 0.8125rem/1 var(--heading);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(2.25rem, 5.6vw, 4.25rem);
  font-weight: 700;
}
.lead {
  max-width: 58ch;
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}
.tag {
  margin: 28px 0 0;
  color: var(--ink-1);
  font: 600 0.875rem/1 var(--heading);
  letter-spacing: 0.2em;
}

/* The hero's #SaveHalo, then where to share it (Bart, 2026-10-17). */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}
.share-row .tag {
  margin: 0;
}
.share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share-links a,
.share-links button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font: 600 0.8125rem/1 var(--heading);
  text-decoration: none;
  cursor: pointer;
}
.share-links a:hover,
.share-links button:hover {
  background: color-mix(in oklab, var(--primary) 22%, transparent);
  color: var(--primary-hover);
}
.share-links a:focus-visible,
.share-links button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Sections ---- */
main > section:not(.hero) {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 104px) var(--gutter) 0;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}
/* A section's marker: the HUD's pointer, a small triangle in the orange, as halolabs.gg's docs headings wear it (Bart,
   2026-10-17: it was a tilted square). */
.kicker::before {
  content: '';
  flex: none;
  width: 9px;
  height: 11px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.big {
  max-width: 34ch;
  margin: 0;
  color: var(--ink-1);
  font: 600 clamp(1.5rem, 3.2vw, 2.25rem)/1.3 var(--body);
}
/* Why #SaveHalo's paragraph: four lines at most on a computer (Bart, 2026-10-17); it was five at 34 characters. */
.why .big {
  max-width: 50ch;
}
.sub {
  margin: -16px 0 24px;
  color: var(--ink-3);
}

/* Panels: glass with the HUD's corner brackets. */
.steps li,
.reasons li,
.get li,
.team > a:first-child,
.msp-card {
  position: relative;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
}
.steps li::before,
.reasons li::before,
.get li::before,
.msp-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line);
  border-left: 2px solid var(--line);
}

.steps ol,
.reasons ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li,
.reasons li {
  padding: 28px 24px;
}
.steps h3,
.reasons h3 {
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 600;
}
.steps p,
.reasons p {
  margin: 0;
}
.num {
  display: block;
  margin-bottom: 18px;
  color: var(--accent);
  font: 700 2rem/1 var(--heading);
}
/* Four reasons: two by two, or one column on a phone, never three and an orphan. */
.reasons ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

/* ---- The game: Halo Infinite, where to get it, and a PC for it ---- */
.game-lead {
  max-width: 68ch;
  margin: 20px 0 0;
}
.get {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 32px 0 16px;
  padding: 0;
  list-style: none;
}
.get li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}
.get .num {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* A button that leaves for another site (a store) says so with an arrow, and opens in a new tab (Bart, 2026-10-17). */
.btn.external::after {
  content: '↗';
  margin-left: 6px;
  font-size: 0.95em;
  line-height: 1;
}
/* Each way in by its platform's logo, not a word (Bart, 2026-10-17): Xbox, Windows for the Xbox app, Steam. */
.get .platform {
  display: inline-flex;
  width: 28px;
  height: 28px;
}
.get .platform svg {
  width: 100%;
  height: 100%;
}
.get h3 {
  font-size: 1.125rem;
  font-weight: 600;
}
.get p {
  margin: 0 0 auto;
}
.get .btn {
  align-self: flex-start;
  margin-top: 8px;
}

.support {
  margin: 16px 0 0;
  color: var(--ink-3);
}

/* ---- The format: the series, then the pool ---- */
.series {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 32px 0 16px;
  padding: 0;
  list-style: none;
}
.series li {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-left: 3px solid var(--line);
}
.series .num {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
}
.series .game {
  color: var(--ink-1);
  font: 700 1.5rem/1.1 var(--heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.series .who {
  color: var(--ink-3);
  font-size: 0.9375rem;
}
/* One line each where five fit across (Bart, 2026-10-17); narrower, the games go three and two a row instead. */
@media (min-width: 1100px) {
  .series .who {
    white-space: nowrap;
  }
}
.pool {
  padding: 24px;
  background: color-mix(in oklab, var(--sunken) 70%, transparent);
  border: 1px solid var(--border);
}
.pool h3 {
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 600;
}
.pool dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.pool dl > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr;
  gap: 4px 16px;
}
/* Each mode a link to the Arena Map Pool in Halo Labs' docs, the maps beside it plain (Bart, 2026-10-17). */
.pool dt {
  color: var(--primary);
  font-weight: 600;
}
.pool dd {
  margin: 0;
  color: var(--ink-1);
}
.pool .fine {
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: 0.9375rem;
}
.rules {
  margin-top: 16px;
  border: 1px solid var(--border);
}
.rules summary {
  padding: 16px 24px;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
.rules summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rules dl {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 24px 24px;
}
.rules dl > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr;
  gap: 4px 16px;
}
.rules dt {
  color: var(--ink-1);
  font-weight: 600;
}
.rules dd {
  margin: 0;
}
@media (max-width: 1099px) {
  .series {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .series {
    grid-template-columns: 1fr;
  }
  .pool dl > div,
  .rules dl > div {
    grid-template-columns: 1fr;
  }
}

/* ---- The MSP challenge ---- */
.msp-card {
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    color-mix(in oklab, var(--surface) 92%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.msp-card::before {
  border-color: var(--accent);
}
/* halolabs.gg's tile hatching (halo-hud.css, the home's tiles): a column of fine diagonal lines near the right edge, and
   a bracket at the bottom right to answer the one at the top left (Bart, 2026-10-17). In the card's own colour. */
.msp-card {
  --card-line: var(--accent);
}
.esports-card {
  --card-line: var(--primary);
}
.msp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, color-mix(in oklab, var(--card-line) 55%, transparent) 0 1.5px, transparent 1.5px 6px)
      right 22px center / 26px min(160px, calc(100% - 44px)) no-repeat,
    linear-gradient(var(--card-line), var(--card-line)) bottom right / 18px 2px no-repeat,
    linear-gradient(var(--card-line), var(--card-line)) bottom right / 2px 18px no-repeat;
}
/* A phone's card has its words the whole width: the hatching would run under them, so only the bracket stays. */
@media (max-width: 640px) {
  .msp-card::after {
    background:
      linear-gradient(var(--card-line), var(--card-line)) bottom right / 18px 2px no-repeat,
      linear-gradient(var(--card-line), var(--card-line)) bottom right / 2px 18px no-repeat;
  }
}
.msp-card h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
}
.msp-card p {
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: 1.125rem;
}
.msp-card .fine {
  color: var(--ink-3);
  font-size: 1rem;
}

/* Esports teams (Bart, 2026-10-17): the IT card's frame in the HUD's blue, and the orgs' logos in white. */
.esports-card {
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 60%),
    color-mix(in oklab, var(--surface) 92%, transparent);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}
.esports-card::before {
  border-color: var(--primary);
}
.esports-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 48px;
  margin: 32px 0 8px;
  padding: 0;
  list-style: none;
}
.esports-logos img {
  display: block;
  width: auto;
  height: 44px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.esports-logos li:nth-child(1) img {
  height: 34px;
}

/* ---- Who's in ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.team > a:first-child {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  height: 100%;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
/* The card lights as one box wherever the pointer is on it, its Challenge included (Bart, 2026-10-17). */
.team:hover > a:first-child {
  background: var(--raised);
  border-color: var(--border-strong);
}
.team-logo,
.join-plus {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: var(--sunken);
  border: 1px solid var(--border);
}
.team-logo-blank,
.join-plus {
  display: grid;
  place-items: center;
  color: var(--primary);
  font: 700 1rem/1 var(--heading);
}
.team-name {
  overflow: hidden;
  color: var(--ink-1);
  font: 600 1.0625rem/1.2 var(--heading);
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.team-meta {
  display: flex;
  flex-direction: column;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.35;
}
/* Challenge, at the card's right, centred top to bottom, beside the name and figures (a link can't hold another). */
.team {
  position: relative;
}
/* The card's right side: Challenge, with the team's average CSR under it, centred top to bottom. The CSR lets a press
   through to the card's link under it. */
.team-side {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.team-csr {
  color: var(--ink-3);
  font-size: 0.8125rem;
  white-space: nowrap;
  pointer-events: none;
}
.team-challenge {
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--border-strong) 30%, transparent);
  color: var(--ink-1);
  font: 500 0.8125rem/1.2 var(--body);
  text-decoration: none;
}
/* No look of its own under the pointer: the card lights instead (Bart, 2026-10-17). */
.team-challenge:hover {
  color: var(--ink-1);
}
.team-challenge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Room beside the name and figures for it. */
.team:not(.team-join) > a:first-child {
  padding-right: 108px;
}

.team.team-join > a:first-child {
  background: transparent;
  border-style: dashed;
}
/* Its plus drawn as two strokes, so it stands in the middle of its box (a font's + sat off it). */
.team-join .join-plus {
  border-style: dashed;
  background:
    linear-gradient(var(--primary), var(--primary)) center / 16px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) center / 2px 16px no-repeat,
    var(--sunken);
}
/* "Your company here" wraps rather than cutting off ("YOUR COMPANY H…" at a 247px card); a real team's name keeps its
   ellipsis. */
.team-join .team-name {
  overflow: visible;
  white-space: normal;
}

.more {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
}
.more::after {
  content: ' →';
}

/* ---- Call someone out: words to copy ---- */
.kit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
}
.kit h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}
/* LinkedIn's mark before its card's heading (Bart, 2026-10-17), in the heading's ink as the game's platform logos are. */
.kit h3:has(.kit-logo) {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kit-logo {
  flex: none;
  width: 20px;
  height: 20px;
}
.kit p {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.9375rem;
}
.kit textarea {
  flex: 1;
  width: 100%;
  min-height: 224px;
  padding: 12px;
  resize: vertical;
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--ink-1);
  font: 400 0.9375rem/1.5 var(--body);
}
.kit textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.kit .actions {
  margin-top: 0;
  gap: 8px;
}
.kit button.btn {
  border: 0;
  cursor: pointer;
}

/* ---- Questions ---- */
.faq details {
  max-width: 760px;
  border-bottom: 1px solid var(--border);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: var(--ink-1);
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
}
/* Under the pointer the question turns the HUD's cyan (Bart, 2026-10-17: a light ground ran into the lines between
   the questions). */
.faq summary {
  cursor: pointer;
  transition: color 0.15s;
}
.faq summary:hover {
  color: var(--primary);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  /* The HUD's orange (Bart, 2026-10-17), as the section markers are. */
  color: var(--accent);
  font: 700 1.5rem/1 var(--heading);
}
.faq details[open] summary::after {
  content: '–';
}
.faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.faq details p {
  margin: 0 0 20px;
  max-width: 64ch;
}

/* ---- The close ---- */
.final {
  text-align: center;
}
.final h2 {
  margin: 0 auto 28px;
  max-width: 22ch;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
}

footer {
  max-width: var(--max);
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font-size: 0.875rem;
  text-align: center;
}
footer p {
  display: flex;
  flex-wrap: wrap;
  /* Centred on one line beside the Contact Us button, which stands taller than the words (Bart, 2026-10-17). */
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 0;
}
footer a {
  color: var(--ink-2);
  text-decoration: none;
}
footer a:hover {
  color: var(--ink-1);
}
footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-1);
  font: 600 0.875rem/1.6 var(--heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Halo Labs' helmet, its pixels kept sharp. */
footer .brand img {
  image-rendering: pixelated;
}
/* NetFire's brand purple, as halolabs.gg's footer heart (halo-hud.css, .netfire-heart). */
footer .heart {
  color: #7041ba;
}
footer .legal {
  margin-top: 10px;
  font-size: 0.75rem;
  opacity: 0.8;
}

/* The footer's Contact Us, a small button among its links (Bart, 2026-10-17). */
footer .btn {
  min-height: 30px;
  padding: 0 12px;
  font-size: 0.8125rem;
}

/* ---- Contact Us (/contact): who we want to hear from, a card each with its email ---- */
.contact h1 {
  margin-bottom: 24px;
  font-size: clamp(2.25rem, 6vw, 4rem);
}
.contact .big {
  max-width: 44ch;
}
.contact-ways {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}
.contact-ways legend {
  margin-bottom: 14px;
  padding: 0;
  color: var(--ink-1);
  font-weight: 600;
}
/* Each card a choice: the one picked lit in the orange, its radio hidden but still the keyboard's. */
.contact-ways label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.contact-ways label:hover {
  border-color: var(--border-strong);
}
.contact-ways label:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}
.contact-ways label:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.contact-ways input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-ways h3 {
  font-size: 1.125rem;
  font-weight: 600;
}
.contact-ways p {
  margin: 0;
}
.contact-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.contact-ways legend {
  grid-column: 1 / -1;
  float: left;
  width: 100%;
}
.contact-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 760px;
}
@media (min-width: 640px) {
  .contact-fields {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
}
.field-wide {
  grid-column: 1 / -1;
}
.field input,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-1);
  font: 400 1rem/1.5 var(--body);
}
.field textarea {
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.field-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.contact-send .btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.contact-status {
  margin: 0;
  color: var(--ink-2);
}
.contact-status[data-tone='ok'] {
  color: var(--primary);
}
.contact-status[data-tone='error'] {
  color: oklch(0.72 0.17 25);
}
.contact-direct {
  margin: 24px 0 0;
  color: var(--ink-3);
}

/* ---- The HUD's motion ---- */
.sweep {
  transform-origin: 0 0;
  animation: sweep 4s linear infinite;
}
.blip {
  animation: blip 2.4s ease-in-out infinite;
}
.blip.late {
  animation-delay: 0.8s;
}
.blip.later {
  animation-delay: 1.6s;
}
.breathe {
  animation: breathe 5s ease-in-out infinite;
}
@keyframes sweep {
  to {
    transform: rotate(360deg);
  }
}
@keyframes blip {
  50% {
    opacity: 0.25;
  }
}
@keyframes breathe {
  50% {
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .sweep,
  .blip,
  .breathe {
    animation: none;
  }
}

@media (max-width: 640px) {
  .presented {
    display: none;
  }
  /* The Xbox mark alone on a phone, its words for a screen reader. */
  .btn-xbox__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .bar {
    justify-content: space-between;
  }
  .tracker {
    display: none;
  }
  /* A phone: the picture its own band at the top, fading into the page at its foot, and the words wholly under it
     (over it, the headline sat on the brightest part). The HUD's frame is left out at this size. */
  .hero {
    display: block;
    min-height: 0;
  }
  /* The picture itself fades out at its foot (Bart, 2026-10-17: it ended in a hard line), into whatever the page
     draws under it, rather than a band of one colour over it, which showed a seam on the page's gradient. */
  .art {
    position: relative;
    display: block;
    height: 260px;
    object-position: 72% 40%;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }
  .scene {
    display: none;
  }
  .hero::after {
    display: none;
  }
  .hero-copy {
    padding-top: 8px;
  }
}