/* =====================================================================
   SOLSTICE HOSTING
   ---------------------------------------------------------------------
   Design language: rack elevation + technical manual.
   Hairline rules instead of cards. Square corners. Mono for anything
   that is data; Plex Sans for anything that is prose. One signal colour
   (brand cyan) used only where something is live, selected or primary.

   01  Tokens
   02  Base & typography
   03  Layout
   04  Buttons & links
   05  Masthead & navigation
   06  Hero & rack elevation
   07  Section furniture
   08  Index rows
   09  Sequence
   10  Spec tables
   11  Game catalogue
   12  Disclosure & FAQ
   13  Support
   14  Prose & notes
   15  Footer
   16  Responsive
   17  Reduced motion
   18  Panel page
   ===================================================================== */


/* =====================================================================
   01  TOKENS
   ===================================================================== */

:root {
  /* Ink — the brand navy (#020230 / #0B1444) extended into a ramp. */
  --ink:        #04061A;
  --ink-alt:    #070B28;
  --ink-panel:  #0B1444;
  --ink-raised: #142055;

  --rule:       #22306B;
  --rule-soft:  #16204A;
  --rule-lit:   #33437F;

  /* Paper — cool off-white, tuned to sit on navy rather than pure white */
  --paper:   #EAEEF9;
  --paper-2: #A9B4D4;
  --paper-3: #828EB6;

  /* Signal — the brand cyan #03a7d3. The one accent. */
  --signal:     #03A7D3;
  --signal-lit: #3CC3EA;
  --signal-ink: #021018;
  --signal-wash: rgba(3, 167, 211, 0.12);
  --signal-edge: rgba(3, 167, 211, 0.38);

  /* Status */
  --ok:   #4BD1A0;
  --idle: #2E3A6B;

  --shell:  1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --bay:    clamp(56px, 7vw, 96px);

  --r: 2px;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --quick: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --ease:  260ms cubic-bezier(0.2, 0, 0.2, 1);
}


/* =====================================================================
   02  BASE & TYPOGRAPHY
   ===================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-2);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--paper);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -0.026em; }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--paper); text-decoration: none; }

strong { color: var(--paper); font-weight: 600; }

/* Mono is the voice of anything measured, labelled or addressed. */
.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.deck {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--paper-2);
  max-width: 58ch;
}

.icon { flex: none; vertical-align: -0.15em; }

::selection { background: var(--signal); color: var(--signal-ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  transition: top var(--quick);
}

.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* =====================================================================
   03  LAYOUT
   ===================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 860px; }

.bay { padding-block: var(--bay); }
.bay--tight { padding-block: calc(var(--bay) * 0.62); }

/* A rule between bays, not a colour change. */
.bay + .bay { border-top: 1px solid var(--rule-soft); }

.bay--fill { background: var(--ink-alt); }


/* =====================================================================
   04  BUTTONS & LINKS
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.78em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--quick), border-color var(--quick),
              color var(--quick);
}

/* Primary: brand cyan with ink text. 6.9:1 — white on this cyan is
   only 2.8:1, so the label has to be dark, not white. */
.btn--primary {
  background: var(--signal);
  color: var(--signal-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible { background: var(--signal-lit); }

.btn--ghost {
  border-color: var(--rule);
  color: var(--paper);
  background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--rule-lit);
  background: var(--ink-panel);
}

.btn--sm { padding: 0.55em 1em; font-size: 0.875rem; }

.btn--block { width: 100%; }

.btn .icon { transition: transform var(--quick); }
.btn:hover .icon { transform: translateX(2px); }

/* Inline text link with a rule that thickens rather than a colour swap */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--paper);
  font-weight: 600;
  border-bottom: 1px solid var(--rule-lit);
  padding-bottom: 1px;
  transition: border-color var(--quick), color var(--quick);
}

.tlink:hover,
.tlink:focus-visible {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* =====================================================================
   05  MASTHEAD & NAVIGATION
   ===================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
}

/* Wordmark: the mark is a rack unit seen end-on, with one lit LED. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.wordmark__mark {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule-lit);
  border-radius: 1px;
  background:
    repeating-linear-gradient(180deg,
      var(--rule-soft) 0 1px, transparent 1px 4px);
}

.wordmark__mark::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 5px var(--signal-edge);
}

.wordmark__text {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.masthead .wordmark__text {
  font-size: 1.5rem;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--paper-2);
  cursor: pointer;
  transition: color var(--quick), background-color var(--quick);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--paper); background: var(--ink-panel); }

.nav__link[data-current="true"] { color: var(--paper); }

.nav__caret { transition: transform var(--quick); opacity: 0.6; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__ext { opacity: 0.5; width: 12px; height: 12px; }

.nav__item--group { position: relative; }

/* Submenus carry a one-line description so the label isn't the only cue */
.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  padding: 6px;
  background: var(--ink-panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.submenu.is-open { display: block; }

.submenu__item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r);
  border-left: 2px solid transparent;
  transition: background-color var(--quick), border-color var(--quick);
}

.submenu__item:hover,
.submenu__item:focus-visible { background: var(--ink-raised); border-left-color: var(--signal); }

.submenu__item.is-current { border-left-color: var(--signal); }

.submenu__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--paper);
}

.submenu__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper-3);
}

/* Without JS the submenus can't be opened, so show them inline instead
   of hiding links behind a button that does nothing. */
.no-js .submenu { display: block; position: static; box-shadow: none; }
.no-js .nav__link--group { display: none; }
.no-js .nav-toggle { display: none !important; }
.no-js .nav__list { flex-wrap: wrap; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 14px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%);
  transition: opacity var(--quick);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { opacity: 0; }


/* =====================================================================
   06  HERO & RACK ELEVATION
   ===================================================================== */

.hero {
  border-bottom: 1px solid var(--rule-soft);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 84px);
}

.hero__eyebrow { margin-bottom: 22px; }

.hero h1 { margin-bottom: 20px; }

.hero__deck { margin-bottom: 28px; }

.hero .actions { margin-bottom: 34px; }

/* Capability strip — facts, not badges. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
  padding-top: 18px;
}

.facts__item {
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper-3);
  line-height: 2;
}

.facts__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

/* --- Rack ----------------------------------------------------------- */

/* Frame with two mounting posts, punched with U holes like the real thing */
.rack__frame {
  position: relative;
  padding: 10px 18px;
  background: var(--ink-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

.rack__frame::before,
.rack__frame::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 5px;
  background: repeating-linear-gradient(180deg,
    var(--rule-lit) 0 3px, transparent 3px 14px);
}

.rack__frame::before { left: 6px; }
.rack__frame::after  { right: 6px; }

.rack-zone {
  display: block;
  padding: 9px 10px 11px;
  border-left: 2px solid var(--rule);
  transition: background-color var(--quick), border-color var(--quick);
}

.rack-zone + .rack-zone { margin-top: 6px; }

.rack-zone:hover,
.rack-zone:focus-visible {
  background: var(--ink-panel);
  border-left-color: var(--signal);
}

.rack-zone__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
  line-height: 1.3;
}

.rack-zone__id {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--paper-3);
}

.rack-zone__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--paper);
}

.rack-zone__arrow {
  margin-left: auto;
  color: var(--paper-3);
  transition: transform var(--quick), color var(--quick);
}

.rack-zone:hover .rack-zone__arrow,
.rack-zone:focus-visible .rack-zone__arrow {
  color: var(--signal);
  transform: translateX(2px);
}

.rack-zone__meta {
  display: block;
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--paper-3);
}

/* One chassis. Vents on the left, two status LEDs on the right. */
.ru {
  display: block;
  position: relative;
  height: 15px;
  background: var(--ink-panel);
  border: 1px solid var(--rule-soft);
  border-radius: 1px;
}

.ru + .ru { margin-top: 4px; }

/* Ventilation slots down the left two-thirds of the face plate */
.ru::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  right: 30px;
  background: repeating-linear-gradient(90deg,
    var(--rule) 0 1px, transparent 1px 4px);
}

/* Two indicator LEDs, drawn from one element via an offset shadow */
.ru::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--idle);
  box-shadow: 7px 0 0 var(--idle);
  transition: background-color var(--quick), box-shadow var(--quick);
}

/* Only the top unit of each zone reports link state — enough to read as
   a running system without the whole panel blinking at you. */
.rack-zone .ru:first-of-type::after {
  background: var(--ok);
  box-shadow: 7px 0 0 var(--idle);
}

.rack-zone:hover .ru::after,
.rack-zone:focus-visible .ru::after {
  background: var(--signal);
  box-shadow: 7px 0 0 rgba(3, 167, 211, 0.5);
}

/* A blanking panel, because every rack has one. */
.ru--blank {
  background: var(--ink-alt);
  border-style: dashed;
  border-color: var(--rule-soft);
}

.ru--blank::before,
.ru--blank::after { display: none; }

/* Game key art in a hero: framed like a plate in a manual, with a caption
   rule rather than a drop shadow. */
.hero__art {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--ink-alt);
  padding: 10px;
}

.hero__art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1px;
}

.hero__eyebrow a { color: inherit; border-bottom: 1px solid var(--rule-lit); }
.hero__eyebrow a:hover { color: var(--signal); border-bottom-color: var(--signal); }

.rack__note {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-3);
  text-align: right;
}


/* =====================================================================
   07  SECTION FURNITURE
   ===================================================================== */

.bay__head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 24px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* Index number sits in the margin like a manual section number */
.bay__index {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--signal);
  padding-top: 0.5em;
}

.bay__title { grid-column: 2; }

.bay__title h2 { margin-bottom: 12px; }

.bay__head--plain { display: block; }

/* The eyebrow / headline / deck block that opens every inner page */
.page-lede .label { margin-bottom: 18px; }
.page-lede h1 { margin-bottom: 18px; }

/* Trailing "where to next" line under a bay */
.bay__more { margin-top: 32px; }

/* A note always follows something it qualifies */
.included + .note,
.kv + .note,
.spec-wrap + .note { margin-top: 28px; }


/* =====================================================================
   08  INDEX ROWS
   ===================================================================== */

/* Products as a contents list, not a grid of matching cards. */
.index { border-top: 1px solid var(--rule); }

.row-link {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 0 24px;
  align-items: center;
  padding: 26px 12px 26px 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--quick), padding-left var(--quick);
}

.row-link:hover,
.row-link:focus-visible {
  background: var(--ink-alt);
  padding-left: 12px;
}

.row-link__id {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper-3);
  transition: color var(--quick);
}

.row-link:hover .row-link__id { color: var(--signal); }

.row-link__name {
  display: block;
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.row-link__desc { display: block; margin: 0; font-size: 0.9375rem; }

.row-link__specs {
  display: block;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper-3);
  line-height: 1.8;
}

.row-link__end {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.row-link__price {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--paper);
  white-space: nowrap;
}

.row-link__price b {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--paper);
}

.row-link__arrow { color: var(--paper-3); transition: transform var(--quick), color var(--quick); }

.row-link:hover .row-link__arrow,
.row-link:focus-visible .row-link__arrow { color: var(--signal); transform: translateX(3px); }


/* =====================================================================
   09  SEQUENCE
   ===================================================================== */

/* Deployment stages, connected by a single rule. */
.seq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: seq;
}

.seq__step { position: relative; padding-top: 30px; }

.seq__step::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(-1 * clamp(20px, 3vw, 40px));
  top: 7px;
  border-top: 1px solid var(--rule);
}

.seq__step:last-child::before { right: 0; }

.seq__step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}

.seq__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--signal);
}

.seq__step h3 { margin: 6px 0 8px; }

.seq__step p { font-size: 0.9375rem; }


/* =====================================================================
   10  SPEC TABLES
   ===================================================================== */

/* Plans compare side by side rather than repeating as identical cards.
   The row-header column stays put while the plans scroll. */
.spec-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--ink-alt);
}

.spec {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.spec th,
.spec td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}

.spec thead th {
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
  background: var(--ink-alt);
}

.spec tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 190px;
  min-width: 190px;
  background: var(--ink-alt);
  border-right: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.spec tbody td { color: var(--paper); font-variant-numeric: tabular-nums; }

.spec tbody tr:hover td { background: var(--ink-panel); }

.spec__plan { min-width: 150px; }

.spec__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.spec__price {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 1.375rem;
  color: var(--paper);
  letter-spacing: -0.02em;
}

.spec__per {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.spec tfoot td { border-bottom: 0; padding-top: 18px; padding-bottom: 20px; }

/* Only worth saying when the table actually overflows */
.spec__scroll-hint { display: none; }

@media (max-width: 760px) {
  .spec__scroll-hint {
    display: block;
    margin: 10px 0 0;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--paper-3);
  }

  /* Give the scrolling plan columns more of a narrow screen, and make the
     frozen edge obvious now that content passes under it. */
  .spec tbody th {
    width: 128px;
    min-width: 128px;
    border-right-color: var(--rule);
  }

  .spec th,
  .spec td { padding: 12px 14px; }
}

/* Everything every plan includes — stated once instead of repeated in
   four identical feature lists. */
.included {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.included__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  background: var(--ink);
  font-size: 0.9375rem;
  color: var(--paper);
}

.included__item .icon { color: var(--signal); margin-top: 3px; }


/* =====================================================================
   11  GAME CATALOGUE
   ===================================================================== */

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 20px;
}

.game {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--ink-alt);
  overflow: hidden;
  transition: border-color var(--quick);
}

.game:hover { border-color: var(--rule-lit); }

/* Key art is 2:3, but a full-height portrait card dominates the page.
   Crop to 4:3 from the top, where the game's logo sits. */
.game__art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink-panel);
  overflow: hidden;
}

.game__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(0.85);
  transition: filter var(--quick);
}

.game:hover .game__art img { filter: saturate(1); }

.game__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--rule);
}

.game__name { font-size: 1rem; font-weight: 700; color: var(--paper); }

.game__meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper-3);
}

.game__cta { margin-top: 12px; }

.games__empty {
  padding: 28px 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--paper-3);
}

/* Search that looks like a field, not a pill */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  margin-bottom: 28px;
  padding: 10px 14px;
  background: var(--ink-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

.search:focus-within { border-color: var(--rule-lit); }

.search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.search input:focus { outline: none; }
.search input::placeholder { color: var(--paper-3); }


/* =====================================================================
   12  DISCLOSURE & FAQ
   ===================================================================== */

.qa { border-top: 1px solid var(--rule); }

.qa details { border-bottom: 1px solid var(--rule); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary:hover { color: var(--signal); }

.qa__sign {
  flex: none;
  position: relative;
  width: 11px;
  height: 11px;
  color: var(--paper-3);
}

.qa__sign::before,
.qa__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity var(--quick);
}

.qa__sign::before { width: 11px; height: 1.5px; }
.qa__sign::after  { width: 1.5px; height: 11px; }

.qa details[open] .qa__sign::after { opacity: 0; }
.qa details[open] summary { color: var(--signal); }

.qa__answer { padding: 0 0 20px; max-width: 68ch; }


/* =====================================================================
   13  SUPPORT
   ===================================================================== */

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.channel {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--ink);
  transition: background-color var(--quick);
}

a.channel:hover,
a.channel:focus-visible { background: var(--ink-alt); }

.channel__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--signal);
}

.channel__name { font-size: 1.0625rem; font-weight: 700; color: var(--paper); }

.channel p { font-size: 0.9375rem; margin-bottom: 14px; }

.channel__foot {
  display: block;
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper-3);
}

/* Segmented control for filtering a table by location */
.switch {
  display: flex;
  flex-wrap: wrap;
  gap: -1px;
  margin-bottom: 20px;
}

.switch--sub { margin-top: -8px; }

.switch__opt {
  padding: 9px 16px;
  margin-right: -1px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--paper-3);
  transition: color var(--quick), background-color var(--quick),
              border-color var(--quick);
}

.switch__opt:hover { color: var(--paper); background: var(--ink-panel); }

.switch__opt.is-on {
  position: relative;
  z-index: 1;
  color: var(--signal-ink);
  background: var(--signal);
  border-color: var(--signal);
}

/* Row-oriented table (one machine per row) rather than plan-per-column */
.spec--rows tbody th {
  position: static;
  width: auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper);
  border-right: 0;
}

.spec--rows thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-3);
  white-space: nowrap;
}

.note--alert { border-left-color: var(--ok); }

/* Key/value block for anything with a stated figure */
.kv { border-top: 1px solid var(--rule); }

.kv__row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 12px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.kv__k {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-3);
  padding-top: 2px;
}

.kv__v { color: var(--paper); font-size: 0.9375rem; }


/* =====================================================================
   14  PROSE & NOTES
   ===================================================================== */

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.15rem; }
.prose h3 { margin: 2rem 0 0.6rem; }

/* Keep the marginalia number level with the heading it labels */
.prose > :first-child { margin-top: 0; }

.split {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 24px;
}

.split + .split { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--rule-soft); }

.split__body { grid-column: 2; }

/* A stated caveat, marked as such rather than buried */
.note {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--signal);
  border-radius: var(--r);
  background: var(--ink-alt);
  font-size: 0.9375rem;
}

.note .label { margin-bottom: 6px; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat__n {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--paper);
  letter-spacing: -0.02em;
}

.stat__l { font-size: 0.875rem; color: var(--paper-2); }

.stat__src { font-family: var(--mono); font-size: 0.6875rem; color: var(--paper-3); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 32px;
}


/* =====================================================================
   15  FOOTER
   ===================================================================== */

.footer {
  border-top: 1px solid var(--rule);
  background: var(--ink-alt);
  padding-block: clamp(40px, 5vw, 64px) 24px;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.footer__brand .wordmark { margin-bottom: 14px; }

.footer__line {
  font-size: 0.875rem;
  color: var(--paper-3);
  max-width: 34ch;
}

.footer__col .label { margin-bottom: 12px; }

.footer__links li + li { margin-top: 8px; }

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--paper-2);
  transition: color var(--quick);
}

.footer__links a:hover,
.footer__links a:focus-visible { color: var(--signal); }

.footer__links .icon { width: 11px; height: 11px; opacity: 0.5; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}

.footer__copy,
.footer__sites { margin: 0; font-size: 0.75rem; color: var(--paper-3); }

.footer__site + .footer__site::before {
  content: "·";
  margin: 0 6px;
  color: var(--rule-lit);
}


/* =====================================================================
   16  RESPONSIVE
   ===================================================================== */

@media (max-width: 940px) {

  .hero__grid { grid-template-columns: minmax(0, 1fr); }

  /* The rack turns landscape so it doesn't dominate a phone screen */
  .hero__rack { max-width: 420px; }

  .net { grid-template-columns: minmax(0, 1fr); }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {

  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 8px var(--gutter) 20px;
    background: var(--ink);
    border-bottom: 1px solid var(--rule);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  .nav.is-open { display: block; }

  .masthead__inner { position: relative; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__item--group { position: static; }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 0;
  }

  .nav__link:hover { background: transparent; }

  .submenu {
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
  }

  .nav__item--cta { margin-top: 16px; }
  .nav__item--cta .btn { width: 100%; }

  .seq { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  /* Vertical run of stages keeps the connecting rule meaningful */
  .seq__step { padding-top: 0; padding-left: 24px; }

  .seq__step::before {
    left: 3px;
    right: auto;
    top: 6px;
    bottom: -26px;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .seq__step:last-child::before { bottom: auto; height: 0; }

  .seq__step::after { top: 6px; }
}

@media (max-width: 680px) {

  .bay__head,
  .split { grid-template-columns: minmax(0, 1fr); }

  .bay__title,
  .split__body { grid-column: 1; }

  .bay__index { padding-top: 0; margin-bottom: 10px; }

  .row-link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 22px 0;
  }

  .row-link__id { grid-column: 1 / -1; }

  .row-link__main { grid-column: 1 / -1; }

  .row-link__specs { grid-column: 1 / -1; margin-top: 6px; }

  .row-link__end {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 10px;
  }

  .row-link:hover { padding-left: 0; }

  .kv__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .facts__item {
    border-right: 0;
    margin-right: 0;
    padding-right: 14px;
    line-height: 1.8;
  }

  .facts__item + .facts__item::before {
    content: "· ";
    color: var(--rule-lit);
  }
}


/* =====================================================================
   17  REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The packet becomes a static lit segment rather than disappearing */
  .net__stage[data-active] .net__pulse.is-lit {
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* Deck with a trailing gap, used where actions follow it directly */
.page-lede__deck { margin-bottom: 28px; }


/* =====================================================================
   18  PANEL PAGE
   ===================================================================== */

/* Explanation beside a diagram, rather than stacked cards */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Slot bay — the rack chassis language, reused to show what a slot is */
.slots {
  padding: 14px;
  background: var(--ink-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

.slots__cap,
.slots__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.slots__cap { margin-bottom: 12px; }
.slots__note { margin-top: 12px; }

.slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink-panel);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--rule);
  border-radius: 1px;
}

.slot + .slot { margin-top: 6px; }

.slot__id {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--paper-3);
}

.slot__name { font-size: 0.9375rem; color: var(--paper-2); }

.slot__state {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-3);
}

/* Exactly one slot is active — the constraint the feature is built on */
.slot--active {
  border-left-color: var(--signal);
  background: var(--ink-raised);
}

.slot--active .slot__name { color: var(--paper); font-weight: 600; }

.slot--active .slot__state { color: var(--signal); }

.slot--active .slot__id::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: 1px;
}

@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .slots { max-width: 420px; }
}