/* Self-hosted display/body fonts (latin + latin-ext). Variable files cover
   the weights we use so we avoid a Google Fonts render-blocking round-trip.
   Declare each weight separately (same src) — Firefox will not synthesize a
   load from a `font-weight: 400 700` range alone for these faces.
   Font urls are relative (../fonts/…) so a versioned stylesheet at
   /assets/v/<digest>/css/minehost.css resolves the same versioned font URLs
   the HTML shell preloads — absolute /assets/fonts/… would miss the preload. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mh-ink: #12141A;
  --mh-paper: #F7F4EF;
  --mh-line: #D9D2C5;
  --mh-mute: #5C635C;
  --mh-accent: #1FA37A;
  --mh-accent-dark: #17815F;
  --mh-accent-soft: #E6F6F0;
  --mh-radius: 2px;
  --mh-shell-max: 80rem;
  --mh-shell-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Surfaces and state tones, previously hard-coded per component. */
  --mh-surface: #fffefb;
  --mh-surface-sunk: #f2eee6;
  --mh-ok: #146b50;
  --mh-warn: #8a5a12;
  --mh-bad: #8b2e2e;

  --mh-space-1: 0.4rem;
  --mh-space-2: 0.75rem;
  --mh-space-3: 1rem;
  --mh-space-4: 1.5rem;
  --mh-space-5: 2rem;

  --mh-shadow-sm: 0 1px 2px rgba(20, 40, 30, 0.05);
  --mh-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* Shared overflow helpers — prefer these over one-off inline styles. */
.mh-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html {
  /* Keep layout width stable when a page gains/loses a vertical scrollbar
     (e.g. /community/guides ↔ /community/guides/mine). Without this, centered
     chrome jumps a few pixels as the gutter appears or disappears. */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  min-height: 100%;
  background-color: var(--mh-paper);
  color: var(--mh-ink);
}

a { color: inherit; text-decoration: none; }

/*
 * Crawlable SSR bootstrap — always clipped for humans (crawlers still see
 * the HTML). Never use this dump as the visible interim UI; that caused a
 * plain-text flash before Preact mounts.
 */
.mh-seo-body {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Human boot shell — matches LoadingShell (plain muted Loading…).
 * Top-left, not a centered content box (leftover from the branded interim).
 * Delayed reveal so a fast mount goes paper → Preact with no flash.
 * Force-visible on error via html.mh-boot-show.
 */
.mh-boot-fallback {
  margin: 0;
  padding: 1rem var(--mh-shell-pad, 1.25rem);
  opacity: 0;
  pointer-events: none;
  animation: mh-boot-reveal 0s linear 200ms forwards;
}

html.mh-boot-show .mh-boot-fallback {
  opacity: 1;
  pointer-events: auto;
  animation: none;
}

html.mh-app-ready .mh-boot-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
  animation: none;
}

@keyframes mh-boot-reveal {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

.mh-boot-fallback .mh-page {
  padding: 0;
}

.mh-boot-fallback .mh-route-loading {
  margin: 0;
}

.mh-route-loading-wrap {
  padding: 1rem var(--mh-shell-pad, 1.25rem);
}

.mh-route-loading-wrap .mh-route-loading {
  margin: 0;
}

.mh-boot-error {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mh-line);
  border-left: 4px solid var(--mh-bad);
  background: var(--mh-surface);
}

.mh-boot-error[hidden] {
  display: none;
}

.mh-boot-error p {
  color: var(--mh-mute);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.mh-boot-error nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mh-boot-error a {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-boot-error a.mh-boot-primary {
  background: var(--mh-accent);
  border-color: var(--mh-accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .mh-boot-fallback {
    animation: none;
    opacity: 1;
    pointer-events: auto;
  }
}

.mh-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Currency picker — custom nav menu + form select
   ============================================================ */

.mh-currency-picker--form {
  display: grid;
  gap: 0.35rem;
}

/* The field sits in forms beside plain inputs, so it takes their width. */
.mh-currency-picker--form .mh-combo {
  width: 100%;
}

.mh-currency-picker--nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  z-index: 2;
}

.mh-currency-picker--nav.is-open {
  z-index: 80;
}

.mh-currency-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  background: transparent;
  color: inherit;
  font-family: "IBM Plex Sans", "Plex Sans", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
  opacity: 0.9;
}

.mh-currency-trigger:hover,
.mh-currency-trigger:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(18, 20, 26, 0.05);
  border-color: rgba(18, 20, 26, 0.08);
}

.mh-currency-picker--nav.is-open .mh-currency-trigger {
  opacity: 1;
  background: rgba(18, 20, 26, 0.06);
  border-color: rgba(18, 20, 26, 0.1);
}

.mh-currency-trigger:disabled {
  opacity: 0.45;
  cursor: wait;
}

.mh-currency-trigger-sym {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  min-width: 1.15rem;
  text-align: center;
  line-height: 1;
}

.mh-currency-trigger-code {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
}

.mh-currency-chevron {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 160ms ease, opacity 160ms ease;
}

.mh-currency-picker--nav.is-open .mh-currency-chevron {
  transform: rotate(225deg) translateY(-1px);
  opacity: 0.85;
}

/* Dropdown panel — always light paper, readable over hero */
.mh-currency-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 15.5rem;
  /* Twenty-five currencies is taller than most screens. */
  max-height: min(26rem, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  margin: 0;
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  background: #fffefb;
  box-shadow:
    0 1px 0 rgba(18, 20, 26, 0.03),
    0 12px 28px rgba(18, 20, 26, 0.12),
    0 4px 10px rgba(18, 20, 26, 0.06);
  color: var(--mh-ink);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 140ms ease, transform 160ms ease;
}

.mh-currency-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mh-currency-menu[hidden] {
  display: none;
}

.mh-currency-menu-head {
  padding: 0.35rem 0.65rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-currency-option {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-family: "IBM Plex Sans", "Plex Sans", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.mh-currency-option:hover,
.mh-currency-option.is-active {
  background: rgba(18, 20, 26, 0.04);
}

.mh-currency-option.is-selected {
  background: var(--mh-accent-soft);
}

.mh-currency-option.is-selected.is-active,
.mh-currency-option.is-selected:hover {
  background: #d8f0e6;
}

.mh-currency-option-sym {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--mh-ink);
  text-align: center;
}

.mh-currency-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mh-currency-option-code {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.mh-currency-option-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--mh-mute);
  line-height: 1.2;
}

.mh-currency-option-check {
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--mh-accent-dark);
  border-bottom: 2px solid var(--mh-accent-dark);
  transform: rotate(-45deg);
  margin-right: 0.15rem;
}

/* ============================================================
   Combo field — searchable, grouped picker (country, currency)
   ============================================================ */

.mh-combo {
  position: relative;
  display: grid;
  gap: 0.35rem;
}

/* Reads as a form field beside the currency select, not as a button. */
.mh-combo-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms var(--mh-ease);
}

.mh-combo-trigger:hover:not(:disabled) {
  border-color: rgba(31, 163, 122, 0.45);
}

.mh-combo-trigger:focus-visible {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

.mh-combo.is-open .mh-combo-trigger {
  border-color: var(--mh-accent);
}

.mh-combo-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mh-combo-trigger[aria-busy='true'] {
  cursor: progress;
}

.mh-combo-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-combo-code {
  flex: 0 0 auto;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.mh-combo-caret {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
  transition: transform 160ms var(--mh-ease);
}

.mh-combo.is-open .mh-combo-caret {
  transform: rotate(-135deg) translateY(-2px);
}

.mh-combo-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  max-height: min(22rem, 60vh);
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  background: var(--mh-surface);
  box-shadow:
    0 1px 0 rgba(18, 20, 26, 0.03),
    0 12px 28px rgba(18, 20, 26, 0.12),
    0 4px 10px rgba(18, 20, 26, 0.06);
  overflow: hidden;
  animation: mhComboIn 140ms var(--mh-ease);
}

/* Near the bottom of a page the menu opens upwards instead of off-screen. */
.mh-combo-menu--up {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

/* On a phone the menu matches the field; with room it grows to fit the names. */
@media (min-width: 640px) {
  .mh-combo-menu {
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: 24rem;
  }
}

@keyframes mhComboIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-combo-menu { animation: none; }
  .mh-combo-caret { transition: none; }
}

/* Search stays put; only the 250 rows under it scroll. */
.mh-combo-search {
  flex: 0 0 auto;
  padding: 0.5rem;
  border-bottom: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

.mh-combo-search .mh-input {
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
}

.mh-combo-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
}

.mh-combo-group + .mh-combo-group {
  margin-top: 0.3rem;
  border-top: 1px solid var(--mh-line);
}

.mh-combo-group-head {
  padding: 0.45rem 0.55rem 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

/* Flex, not grid: the symbol and the tag are per-option, and a grid track
   reserved for cells most rows do not have leaves a ragged left edge. */
.mh-combo-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.mh-combo-option.is-active {
  background: var(--mh-accent-soft);
}

.mh-combo-option.is-selected {
  font-weight: 600;
}

.mh-combo-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-combo-sym,
.mh-combo-option-sym {
  flex: 0 0 auto;
  min-width: 1.4rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
}

.mh-combo-option-meta {
  flex: 0 0 auto;
  color: var(--mh-mute);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.mh-combo-tag {
  flex: 0 0 auto;
}

.mh-combo-check {
  flex: 0 0 auto;
}

.mh-combo-tag {
  padding: 0.05rem 0.3rem;
  border: 1px solid rgba(31, 163, 122, 0.35);
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mh-combo-check {
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--mh-accent-dark);
  border-bottom: 2px solid var(--mh-accent-dark);
  transform: rotate(-45deg);
  opacity: 0;
}

.mh-combo-option.is-selected .mh-combo-check {
  opacity: 1;
}

.mh-combo-empty {
  margin: 0;
  padding: 1rem 0.6rem;
  color: var(--mh-mute);
  font-size: 0.85rem;
  text-align: center;
}

.mh-header-divider {
  display: none;
  width: 1px;
  height: 1.15rem;
  background: var(--mh-line);
  flex: 0 0 auto;
}

@media (min-width: 860px) {
  .mh-header-divider { display: inline-block; }
}

.mh-header-drawer-currency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--mh-line);
  margin-top: 0.35rem;
}

.mh-header-drawer-currency .mh-currency-picker--nav {
  width: auto;
}

.mh-header-drawer-currency .mh-currency-menu {
  right: 0;
  left: auto;
}

/* ============================================================
   Site header (nav) — full redesign
   ============================================================ */

.mh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--mh-line);
  background: rgba(247, 244, 239, 0.96);
  backdrop-filter: blur(10px);
  transition:
    background-color 200ms var(--mh-ease),
    border-color 200ms var(--mh-ease),
    backdrop-filter 200ms var(--mh-ease),
    color 200ms var(--mh-ease);
}

/* Home: pull the header out of flow so the hero sits underneath it.
   Transparent-at-top only works when the landscape is actually behind the bar. */
.mh-shell:has(.mh-page--home) .mh-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
}

/* Products sit next to the brand; the right cluster holds one primary action */
.mh-header-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0.8rem var(--mh-shell-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 860px) {
  .mh-header-inner {
    grid-template-columns: auto auto 1fr auto;
    gap: 1.5rem;
  }
}

.mh-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  color: var(--mh-ink);
}

.mh-logo--footer { font-size: 1.05rem; }
.mh-logo--app { margin-bottom: 1.5rem; display: inline-flex; }

.mh-mark {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.mh-mark-shell,
.mh-mark-pixel {
  transform-box: fill-box;
  transform-origin: center;
}

.mh-mark-shell {
  animation: mh-mark-shell-mold 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mh-mark-pixel--accent {
  animation: mh-mark-pixel-mold-a 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.mh-mark-pixel--paper {
  animation: mh-mark-pixel-mold-b 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.mh-mark.is-settled .mh-mark-shell,
.mh-mark.is-settled .mh-mark-pixel--accent,
.mh-mark.is-settled .mh-mark-pixel--paper {
  animation: none;
}

.mh-logo:hover .mh-mark,
.mh-home-brand:hover .mh-mark {
  animation: mh-mark-hover-nudge 0.55s var(--mh-ease);
}

.mh-logo:hover .mh-mark-pixel--accent,
.mh-home-brand:hover .mh-mark-pixel--accent {
  transform: translate(7px, 7px);
}

.mh-logo:hover .mh-mark-pixel--paper,
.mh-home-brand:hover .mh-mark-pixel--paper {
  transform: translate(-7px, -7px);
}

@keyframes mh-mark-shell-mold {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-12deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes mh-mark-pixel-mold-a {
  0% {
    opacity: 0;
    transform: translate(3.5px, 3.5px) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(-1px, -1px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes mh-mark-pixel-mold-b {
  0% {
    opacity: 0;
    transform: translate(-3.5px, -3.5px) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(1px, 1px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes mh-mark-hover-nudge {
  0% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(-6deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-mark-shell,
  .mh-mark-pixel--accent,
  .mh-mark-pixel--paper,
  .mh-logo:hover .mh-mark,
  .mh-home-brand:hover .mh-mark {
    animation: none !important;
  }

  .mh-mark-pixel--accent,
  .mh-mark-pixel--paper {
    transition: none !important;
  }

  .mh-logo:hover .mh-mark-pixel--accent,
  .mh-home-brand:hover .mh-mark-pixel--accent,
  .mh-logo:hover .mh-mark-pixel--paper,
  .mh-home-brand:hover .mh-mark-pixel--paper {
    transform: none !important;
  }
}

.mh-header-nav {
  display: none;
  justify-content: flex-start;
  align-items: center;
  gap: 0.15rem;
}

@media (min-width: 860px) {
  .mh-header-nav { display: flex; }
}

.mh-mega {
  position: relative;
}

/* Top-level items: ink for legibility, accent rule for the active product */
.mh-nav-link,
.mh-mega-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.mh-nav-link::after,
.mh-mega-trigger::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--mh-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.mh-nav-link:hover,
.mh-mega-trigger:hover,
.mh-mega.is-open .mh-mega-trigger {
  color: var(--mh-accent-dark);
}

.mh-nav-link.is-active::after,
.mh-nav-link:hover::after,
.mh-mega.is-active .mh-mega-trigger::after,
.mh-mega-trigger:hover::after,
.mh-mega.is-open .mh-mega-trigger::after {
  transform: scaleX(1);
}

.mh-nav-link.is-active,
.mh-mega.is-active .mh-mega-trigger {
  color: var(--mh-accent-dark);
}

.mh-mega-chevron {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 160ms ease;
}

.mh-mega.is-open .mh-mega-chevron,
.mh-drawer-group-trigger[aria-expanded="true"] .mh-mega-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.mh-mega-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.98);
  min-width: 34rem;
  max-width: min(44rem, calc(100vw - 2rem));
  padding: 0.85rem;
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  background: #fffefb;
  box-shadow:
    0 1px 0 rgba(18, 20, 26, 0.03),
    0 16px 36px rgba(18, 20, 26, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 160ms ease;
  z-index: 70;
  color: var(--mh-ink);
  text-shadow: none;
}

.mh-mega-panel.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.mh-mega-panel[hidden] { display: none; }

.mh-mega-games {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  gap: 0.85rem;
}

.mh-mega-feature {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: var(--mh-radius);
  background: linear-gradient(160deg, #151916 0%, #1a2e24 100%);
  color: #f7f4ef;
  min-height: 100%;
  transition: transform 140ms ease;
}

.mh-mega-feature:hover { transform: translateY(-1px); }

.mh-mega-feature-kicker,
.mh-mega-card-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.mh-mega-feature-title,
.mh-mega-card-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.mh-mega-feature-copy,
.mh-mega-card-copy {
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.82;
  flex: 1;
}

.mh-mega-feature-cta,
.mh-mega-card-cta {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1fa37a;
}

.mh-mega-feature-cta { color: #8ee0c0; }

.mh-mega-label {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-mega-game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}

.mh-mega-game {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--mh-radius);
  transition: background 120ms ease;
}

.mh-mega-game:hover { background: rgba(18, 20, 26, 0.04); }

.mh-mega-game-title {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--mh-ink);
}

.mh-mega-game-meta {
  font-size: 0.72rem;
  color: var(--mh-mute);
}

.mh-mega-footer-link {
  display: inline-flex;
  margin-top: 0.65rem;
  padding: 0.35rem 0.15rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--mh-accent-dark);
}

.mh-mega-cloud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  min-width: 28rem;
}

.mh-mega-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.mh-mega-card:hover {
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
  transform: translateY(-1px);
}

.mh-mega-card--accent {
  background: linear-gradient(160deg, #f7f4ef, #e6f6f0);
}

.mh-mega-card-kicker { color: var(--mh-mute); opacity: 1; }
.mh-mega-card-copy { opacity: 1; color: var(--mh-mute); }

.mh-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  justify-content: flex-end;
}

.mh-header-textlink {
  display: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--mh-ink);
  padding: 0.45rem 0.65rem;
}

.mh-header-textlink:hover { color: var(--mh-accent-dark); }

/* Show Log in only once the full desktop nav is up — avoids crowding 720–859. */
@media (min-width: 860px) {
  .mh-header-textlink { display: inline-flex; }
}

/* The one primary action in the bar — visible well before the burger goes away */
.mh-header-cta {
  padding: 0.6rem 1.05rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Narrow bars: symbol-only currency and a tighter CTA so nothing wraps */
@media (max-width: 719px) {
  .mh-header-actions { gap: 0.4rem; }
  .mh-header-cta {
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
  }
  .mh-currency-trigger-code { display: none; }
  .mh-currency-trigger { padding: 0.4rem 0.35rem; }
}

/* Smallest phones: the CTA wins the bar. Currency stays in the drawer. */
@media (max-width: 419px) {
  .mh-header-inner > .mh-header-actions > .mh-currency-picker--nav,
  .mh-header-inner .mh-header-divider {
    display: none;
  }
}

.mh-header-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--mh-line);
  background: transparent;
  border-radius: var(--mh-radius);
  cursor: pointer;
  padding: 0.55rem;
}

.mh-header-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

@media (min-width: 860px) {
  .mh-header-burger { display: none; }
}

.mh-header-drawer {
  display: none;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-paper);
  padding: 1rem 1.25rem 1.35rem;
  /* Body scroll is locked while open — drawer itself must scroll. */
  max-height: min(100dvh - 4.25rem, calc(100vh - 4.25rem));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mh-header-drawer.is-open { display: block; }

.mh-header-drawer nav {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 1rem;
}

.mh-header-drawer nav a {
  padding: 0.85rem 0.9rem;
  font-weight: 600;
  border-radius: var(--mh-radius);
  color: var(--mh-ink);
}

.mh-header-drawer nav a.is-active,
.mh-header-drawer nav a:hover {
  background: var(--mh-accent-soft);
}

.mh-header-drawer nav a.mh-drawer-top {
  font-weight: 700;
}

.mh-drawer-group {
  display: grid;
  gap: 0.15rem;
}

.mh-drawer-group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.mh-drawer-group-trigger.is-active,
.mh-drawer-group-trigger:hover {
  background: var(--mh-accent-soft);
}

.mh-drawer-group-body {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0.35rem 0.55rem;
}

.mh-drawer-group-body a {
  padding: 0.65rem 0.85rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.mh-header-drawer-actions {
  display: grid;
  gap: 0.55rem;
}

.mh-footer {
  border-top: 1px solid var(--mh-line);
  padding: 2.75rem 0 0;
  font-size: 0.9rem;
  color: var(--mh-mute);
  background: var(--mh-paper);
}

.mh-footer-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad) 2rem;
  display: grid;
  gap: 2rem;
}

.mh-footer-brand {
  max-width: 22rem;
}

.mh-footer-tag {
  margin: 0.65rem 0 0;
  line-height: 1.5;
}

.mh-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.25rem;
}

.mh-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.mh-footer-heading {
  margin: 0 0 0.15rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-ink);
}

.mh-footer-bar {
  border-top: 1px solid var(--mh-line);
  padding: 1rem 0 1.25rem;
}

.mh-footer-bar-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad);
}

.mh-footer-copy {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mh-mute);
}

@media (min-width: 720px) {
  .mh-footer-inner {
    grid-template-columns: minmax(12rem, 1.1fr) minmax(0, 2.4fr);
    align-items: start;
    gap: 2.5rem;
  }

  .mh-footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 900px) {
  .mh-footer-inner {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr);
    gap: 3rem;
  }
}

.mh-brand {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
}

.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--mh-ink);
  background: var(--mh-ink);
  color: var(--mh-paper);
  padding: 0.7rem 1.15rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--mh-radius);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
  cursor: pointer;
}

.mh-btn:hover { background: #000; }

.mh-btn:disabled,
.mh-btn.is-disabled,
.mh-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.mh-btn-accent {
  background: var(--mh-accent);
  border-color: var(--mh-accent);
  color: #fff;
}

.mh-btn-accent:hover {
  background: var(--mh-accent-dark);
  border-color: var(--mh-accent-dark);
}

.mh-btn-accent:disabled:hover,
.mh-btn-accent.is-disabled:hover {
  background: var(--mh-accent);
  border-color: var(--mh-accent);
}

.mh-btn-ghost {
  background: transparent;
  color: var(--mh-ink);
}

.mh-btn-ghost:hover {
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-btn-ghost:disabled:hover,
.mh-btn-ghost.is-disabled:hover {
  background: transparent;
  color: var(--mh-ink);
}

.mh-link {
  position: relative;
  font-weight: 500;
}

/* A button wearing this class should read as a link, not as a button. */
button.mh-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--mh-accent);
  cursor: pointer;
}

.mh-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.mh-link:hover::after { transform: scaleX(1); }

/* ============================================================
   Public pages — centered page system
   Shared by every .mh-page route: home, minecraft, games,
   cloud, bare metal, legal, auth, and the empty states.
   Home adds a full-bleed hero; product pages stay typographic.
   ============================================================ */

.mh-page-hero {
  border-bottom: 1px solid var(--mh-line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(31, 163, 122, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #fffefb 0%, var(--mh-paper) 100%);
  padding: clamp(4rem, 11vh, 7rem) var(--mh-shell-pad) clamp(3rem, 8vh, 5rem);
}

.mh-page-hero--tight {
  padding-top: clamp(3rem, 8vh, 4.5rem);
  padding-bottom: clamp(2.25rem, 6vh, 3.5rem);
}

.mh-page-hero-inner {
  max-width: 54rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}

/* ---- Product head: compact band so plans sit near the top of the page ---- */

/* Page identity only: breadcrumb, h1, one line. Kept deliberately short so the
   product below it starts inside the first screen. */
.mh-product-head {
  border-bottom: 1px solid var(--mh-line);
  background: linear-gradient(180deg, #fffefb 0%, var(--mh-paper) 100%);
  padding: clamp(1.15rem, 2.6vh, 1.6rem) var(--mh-shell-pad) clamp(1rem, 2.2vh, 1.35rem);
}

.mh-product-head-inner {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.mh-crumbs {
  font-size: 0.8rem;
  color: var(--mh-mute);
}

.mh-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mh-crumbs li + li::before {
  content: "/";
  margin-right: 0.35rem;
  opacity: 0.5;
}

.mh-crumbs a {
  color: var(--mh-mute);
  font-weight: 500;
}

.mh-crumbs a:hover { color: var(--mh-accent-dark); }

.mh-crumbs [aria-current="page"] { color: var(--mh-ink); }

.mh-product-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.1vw, 2.45rem);
  line-height: 1.1;
  max-width: 34ch;
  text-wrap: balance;
}

.mh-product-lede {
  margin: 0;
  color: var(--mh-mute);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 72ch;
  text-wrap: pretty;
}

/* The price rides inside the lede sentence rather than taking its own row */
.mh-product-from b {
  font-weight: 700;
  color: var(--mh-ink);
}

/* Reserve “Plans from …” width/height until catalog price arrives (CLS). */
.mh-product-from--pending {
  visibility: hidden;
}

.mh-pg-kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
}

.mh-pg-kicker::before,
.mh-pg-kicker::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--mh-accent);
  opacity: 0.55;
}

.mh-pg-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  line-height: 1.06;
  max-width: 22ch;
  text-wrap: balance;
}

.mh-pg-title--sm {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  max-width: 26ch;
}

.mh-pg-lede {
  margin: 0;
  color: var(--mh-mute);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Centered explainer between a section head and its content */
.mh-pg-subnote {
  max-width: 52rem;
  margin: -0.75rem auto 1.5rem;
  color: var(--mh-mute);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

/* Supporting line under the lede — keyword copy that must not compete with it */
.mh-pg-fine {
  margin: -0.35rem 0 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 58ch;
  text-wrap: pretty;
}

.mh-pg-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.mh-page .mh-trust-row--center {
  justify-content: center;
  gap: 0.5rem 1.35rem;
  margin-top: 0.9rem;
}

/* Centered section spine: eyebrow, heading, lede, feet */
.mh-pg-head {
  max-width: 46rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.mh-pg-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
}

.mh-pg-head .mh-section-lede {
  margin: 0 auto;
  max-width: 46rem;
}

.mh-page .mh-section-foot {
  text-align: center;
}

.mh-pg-note {
  display: block;
  text-align: center;
  margin-bottom: 0.6rem;
}

/* Narrow centered column for prose and empty states */
.mh-pg-narrow {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.mh-pg-prose {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--mh-mute);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mh-pg-prose strong {
  color: var(--mh-ink);
}

/* Centered single-column form panel (bare metal quote) */
.mh-pg-form-panel {
  max-width: 34rem;
  margin: 0 auto;
  width: 100%;
}

/* Short 3-up cards read as centered cards on every public page */
.mh-page .mh-why-card,
.mh-page .mh-home-step,
.mh-page .mh-quote,
.mh-page .mh-choose-tip {
  text-align: center;
}

/* Self-balancing so a four-item strip does not leave an orphan card */
@media (min-width: 800px) {
  .mh-page .mh-choose-strip {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.mh-page .mh-faq {
  margin-inline: auto;
}

.mh-page .mh-software-list {
  max-width: 52rem;
  margin-inline: auto;
}

.mh-soft-chips--center {
  justify-content: center;
}

/* Product rail — replaces the old image-swapping hero tabs */
.mh-page .mh-pg-rail-section {
  padding-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.mh-pg-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 860px) {
  .mh-pg-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-pg-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.mh-pg-product:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  transform: translateY(-2px);
}

.mh-pg-product-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
}

.mh-pg-product strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
}

.mh-pg-product-blurb {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
  max-width: 30ch;
}

.mh-pg-product-cta {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mh-accent-dark);
}

.mh-pg-product-cta::after { content: " →"; }

/* Panel capabilities — centered head, left-aligned scannable items */
.mh-pg-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2.5rem;
  max-width: 60rem;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .mh-pg-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .mh-pg-features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-pg-feature {
  padding-top: 1.1rem;
  border-top: 1px solid var(--mh-line);
  text-align: left;
}

.mh-pg-feature strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.mh-pg-feature span {
  display: block;
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* Plan toolbars ride the centered spine; the cards stay left-aligned */
.mh-page .mh-featured-plans-toolbar,
.mh-page .mh-ladder-toolbar {
  max-width: 52rem;
  margin: 0 auto;
}

.mh-page .mh-featured-plans-toolbar .mh-cycle-switch {
  justify-self: center;
}

.mh-page .mh-ladder-toolbar-row {
  flex-direction: column;
  align-items: center;
}

.mh-page .mh-ladder-toolbar p {
  text-align: center;
  margin-inline: auto;
}

.mh-page .mh-tier-info {
  text-align: center;
}

/* The cloud slider is a tool, not marketing copy — keep it left-aligned */
.mh-page .mh-cloud-slider .mh-tier-info {
  text-align: left;
}

/* Plan identity on the purchase page stacks above the order form */
.mh-page .mh-purchase-identity {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}

.mh-page .mh-purchase-lede,
.mh-page .mh-purchase-title,
.mh-page .mh-purchase-price {
  justify-content: center;
  margin-inline: auto;
}

/* Recommender — stacked instead of the old two-column split */
.mh-reco.mh-reco--stacked {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.5rem;
}

/* Capped so five scenarios wrap 3 + 2 instead of leaving an orphan */
.mh-reco--stacked .mh-reco-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 52rem;
}

.mh-reco--stacked .mh-reco-option {
  flex: 0 1 16rem;
}

.mh-reco--stacked .mh-reco-result {
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

/* Tailwind preflight makes img a block, so text-align cannot centre it */
.mh-reco--stacked .mh-plan-detail-icon--reco,
.mh-page .mh-purchase-icon {
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mh-pg-product { transition: none; }
  .mh-reveal { animation: none; opacity: 1; transform: none; }
}

.mh-section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  border-bottom: 1px solid var(--mh-line);
  background: var(--mh-paper);
}

/* Auth pages — flat paper, no section/footer divider, no background pattern */
.mh-shell--auth,
.mh-shell--auth .mh-footer,
.mh-auth {
  background: var(--mh-paper);
  background-image: none;
}

.mh-shell--auth .mh-footer {
  border-top: 0;
}

.mh-auth {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 7vw, 5.5rem) var(--mh-shell-pad);
  border: 0;
  border-bottom: 0;
  flex: 1;
}

.mh-auth-card {
  max-width: 26rem;
}

.mh-auth-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.75rem;
  margin: 0 0 0.35rem;
  text-align: center;
}

/* Head and footer are centered like every other public page; fields stay left */
.mh-auth-lede {
  margin: 0 0 1.5rem;
  text-align: center;
}

.mh-auth-foot {
  text-align: center;
}

.mh-oauth {
  margin-top: 1.35rem;
}

.mh-oauth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
}

.mh-oauth-divider::before,
.mh-oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--mh-ink) 12%, transparent);
}

.mh-oauth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.mh-oauth-btn {
  width: 100%;
  justify-content: center;
}

.mh-oauth-icon {
  flex-shrink: 0;
  display: block;
}

.mh-oauth-connections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-oauth-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mh-ink) 10%, transparent);
}

.mh-oauth-connection:last-child {
  border-bottom: 0;
}

.mh-oauth-connection-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.mh-oauth-connection-copy {
  min-width: 0;
}

.mh-section h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 0 0.75rem;
}

.mh-section-lede {
  color: var(--mh-mute);
  max-width: 40rem;
  margin: 0 0 2rem;
  line-height: 1.6;
  font-size: 1.02rem;
}

.mh-section-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad);
}

.mh-home-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3rem;
  counter-reset: mh-step;
}

@media (min-width: 800px) {
  .mh-home-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-home-step {
  counter-increment: mh-step;
}

.mh-home-step::before {
  content: counter(mh-step, decimal-leading-zero);
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--mh-accent);
  margin-bottom: 0.65rem;
}

.mh-home-step h3 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
}

.mh-home-step p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.55;
}

/* Closing conversion band, shared by every public page */
.mh-pg-close {
  background: #1a1f1c;
  color: #f7f4ef;
  border-bottom: 0;
}

.mh-pg-close h2 {
  color: #f7f4ef;
}

.mh-pg-close .mh-section-lede {
  color: #c9c2b4;
}

.mh-pg-close .mh-btn-ghost {
  color: #f7f4ef;
  border-color: #c9c2b4;
}

.mh-pg-close .mh-btn-ghost:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

/* ============================================================
   Home — full-bleed Minecraft-first landing (index only)
   ============================================================ */

.mh-header--over-hero {
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
}

.mh-header--over-hero .mh-logo,
.mh-header--over-hero .mh-nav-link,
.mh-header--over-hero .mh-mega-trigger,
.mh-header--over-hero .mh-header-textlink {
  color: #f7f4ef;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.mh-header--over-hero .mh-nav-link:hover,
.mh-header--over-hero .mh-mega-trigger:hover,
.mh-header--over-hero .mh-mega.is-open .mh-mega-trigger,
.mh-header--over-hero .mh-nav-link.is-active,
.mh-header--over-hero .mh-mega.is-active .mh-mega-trigger,
.mh-header--over-hero .mh-header-textlink:hover {
  color: #fff;
}

.mh-header--over-hero .mh-currency-trigger {
  color: #f7f4ef;
  border-color: rgba(247, 244, 239, 0.55);
  background: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  opacity: 1;
}

.mh-header--over-hero .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-trigger-code,
.mh-header--over-hero .mh-currency-chevron {
  color: #f7f4ef;
}

.mh-header--over-hero .mh-currency-trigger:hover,
.mh-header--over-hero .mh-currency-trigger:focus-visible,
.mh-header--over-hero .mh-currency-picker--nav.is-open .mh-currency-trigger {
  color: #fff;
  border-color: rgba(247, 244, 239, 0.7);
  background: rgba(247, 244, 239, 0.1);
}

.mh-header--over-hero .mh-currency-trigger:hover .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-trigger:hover .mh-currency-trigger-code,
.mh-header--over-hero .mh-currency-trigger:focus-visible .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-trigger:focus-visible .mh-currency-trigger-code,
.mh-header--over-hero .mh-currency-picker--nav.is-open .mh-currency-trigger-sym,
.mh-header--over-hero .mh-currency-picker--nav.is-open .mh-currency-trigger-code {
  color: #fff;
}

.mh-header--over-hero .mh-header-divider {
  background: rgba(247, 244, 239, 0.28);
}

.mh-header--over-hero .mh-header-cta.mh-btn-ghost {
  color: #f7f4ef;
  border-color: rgba(247, 244, 239, 0.5);
  background: transparent;
}

.mh-header--over-hero .mh-header-cta.mh-btn-ghost:hover {
  color: #12141a;
  background: #f7f4ef;
  border-color: #f7f4ef;
}

.mh-header--over-hero .mh-header-burger span {
  background: #f7f4ef;
}

/* Mega panels stay paper while the bar itself sits over the hero. */
.mh-header--over-hero.mh-header--mega-open {
  background: rgba(247, 244, 239, 0.96);
  border-bottom-color: var(--mh-line);
  backdrop-filter: blur(10px);
}

.mh-header--over-hero.mh-header--mega-open .mh-logo,
.mh-header--over-hero.mh-header--mega-open .mh-nav-link,
.mh-header--over-hero.mh-header--mega-open .mh-mega-trigger,
.mh-header--over-hero.mh-header--mega-open .mh-header-textlink {
  color: var(--mh-ink);
  text-shadow: none;
}

.mh-header--over-hero.mh-header--mega-open .mh-nav-link:hover,
.mh-header--over-hero.mh-header--mega-open .mh-mega-trigger:hover,
.mh-header--over-hero.mh-header--mega-open .mh-mega.is-open .mh-mega-trigger,
.mh-header--over-hero.mh-header--mega-open .mh-nav-link.is-active,
.mh-header--over-hero.mh-header--mega-open .mh-mega.is-active .mh-mega-trigger {
  color: var(--mh-accent-dark);
}

.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger {
  color: var(--mh-ink);
  border-color: var(--mh-line);
  background: var(--mh-surface);
  text-shadow: none;
}

.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger-sym,
.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger-code,
.mh-header--over-hero.mh-header--mega-open .mh-currency-chevron {
  color: inherit;
}

.mh-header--over-hero.mh-header--mega-open .mh-currency-trigger-code {
  color: var(--mh-mute);
}

.mh-page--home > .mh-section:first-of-type {
  border-top: 0;
}

.mh-home-hero {
  position: relative;
  min-height: min(96.8dvh, 52.8rem);
  display: flex;
  align-items: flex-end;
  /* Lift the copy off the bottom edge / continuum handoff. */
  padding-bottom: clamp(4.5rem, 12dvh, 8rem);
  overflow: hidden;
  color: #f7f4ef;
  isolation: isolate;
}

.mh-home-hero-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.02);
  animation: mhHomeHeroDrift 18s ease-in-out alternate infinite;
}

.mh-home-hero-stack > picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.mh-home-hero-stack > picture.is-active {
  opacity: 1;
}

.mh-home-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.mh-home-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Keep white nav text readable over the bright sunset sky — not a header fill. */
    linear-gradient(180deg, rgba(10, 14, 12, 0.72) 0%, rgba(10, 14, 12, 0.35) 12%, rgba(10, 14, 12, 0.08) 28%, transparent 42%),
    linear-gradient(105deg, rgba(10, 14, 12, 0.55) 0%, rgba(10, 14, 12, 0.22) 34%, transparent 58%);
}

.mh-home-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  /* Extra top pad: header is fixed on home, so hero starts at the viewport top. */
  padding: clamp(6.5rem, 14vh, 8.5rem) var(--mh-shell-pad) clamp(1.5rem, 3vh, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  animation: mhHomeHeroIn 700ms var(--mh-ease) both;
}

.mh-home-brand {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f7f4ef;
  text-shadow: 0 1px 18px rgba(10, 14, 12, 0.35);
}

.mh-home-mark {
  width: clamp(2rem, 4vw, 2.75rem);
  height: clamp(2rem, 4vw, 2.75rem);
  flex-shrink: 0;
  border-radius: var(--mh-radius);
}

.mh-home-title {
  margin: 0;
  max-width: 20ch;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
  color: #f7f4ef;
  text-shadow: 0 1px 14px rgba(10, 14, 12, 0.3);
}

.mh-home-lede {
  margin: 0;
  max-width: 38ch;
  color: rgba(247, 244, 239, 0.88);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.mh-home-hero-actions {
  justify-content: flex-start;
  margin-top: 0.5rem;
}

.mh-home-hero-ghost {
  color: #f7f4ef;
  border-color: rgba(247, 244, 239, 0.55);
  background: transparent;
}

.mh-home-hero-ghost:hover {
  background: #f7f4ef;
  color: #12141a;
  border-color: #f7f4ef;
}

.mh-home-paths {
  position: relative;
  z-index: 3;
  /* Clear gap after the hero — icons should not sit on the landscape fade. */
  margin-top: 0;
  padding-top: clamp(3.5rem, 8vw, 5.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
  background: var(--mh-paper);
  border-bottom: 1px solid var(--mh-line);
}

.mh-home-paths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 900px) {
  .mh-home-paths-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
    align-items: stretch;
  }
}

.mh-home-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  height: 100%;
  transition: color 160ms var(--mh-ease);
}

.mh-home-path:hover .mh-home-path-cta {
  color: var(--mh-accent-dark);
}

.mh-home-path:hover .mh-home-path-cta::after {
  transform: translateX(3px);
}

.mh-home-path-marks {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  margin-bottom: 0.2rem;
}

.mh-home-path-mark {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  box-sizing: border-box;
  animation: mhHomePathMarkSettle 520ms var(--mh-ease) both;
}

.mh-home-path-mark:nth-child(2) { animation-delay: 60ms; }
.mh-home-path-mark:nth-child(3) { animation-delay: 120ms; }

.mh-home-path-mark--icon {
  object-fit: contain;
  image-rendering: pixelated;
  padding: 0.35rem;
}

.mh-home-path-mark--cover {
  object-fit: cover;
  border-radius: 50%;
}

.mh-home-path-mark--logo {
  object-fit: cover;
  border: 0;
  background: transparent;
}

.mh-home-path strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.3rem;
}

.mh-home-path-blurb {
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 0.95rem;
  flex: 1;
}

.mh-home-path-cta {
  margin-top: 0.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--mh-ink);
  transition: color 160ms var(--mh-ease);
}

.mh-home-path-cta::after {
  content: " →";
  display: inline-block;
  transition: transform 160ms var(--mh-ease);
}

.mh-home-proof {
  background: #1a1f1c;
  color: #f7f4ef;
  border-bottom: 0;
}

.mh-home-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 2.75rem);
}

@media (min-width: 860px) {
  .mh-home-proof-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.mh-home-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
}

.mh-home-proof-icon-wrap {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mh-accent);
}

.mh-home-proof-icon {
  width: 1.85rem;
  height: 1.85rem;
  display: block;
}

.mh-home-proof-item h2 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: #f7f4ef;
  max-width: 16ch;
  text-wrap: balance;
}

.mh-home-proof-item p {
  margin: 0;
  color: #c9c2b4;
  line-height: 1.55;
  font-size: 0.98rem;
  max-width: 30ch;
}

/* Panel capabilities — full-width grid, no decorative art */
.mh-home-panel-head {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 2rem;
}

.mh-home-panel-head h2 {
  margin: 0 0 0.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.mh-home-panel-head p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.6;
  font-size: 1.05rem;
}

.mh-home-panel-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 0;
  border-top: 1px solid var(--mh-line);
}

@media (min-width: 640px) {
  .mh-home-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
  }
}

@media (min-width: 960px) {
  .mh-home-panel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.75rem;
  }
}

.mh-home-panel-grid li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.35rem 0 1.45rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-home-panel-grid strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}

.mh-home-panel-grid span {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Plan sizer — left copy + flat recommended result */
.mh-home-sizer {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 960px) {
  .mh-home-sizer {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
  }
}

.mh-home-sizer-copy {
  text-align: left;
}

.mh-home-sizer-copy h2 {
  margin: 0 0 0.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.mh-home-sizer-lede {
  margin: 0 0 1.35rem;
  color: var(--mh-mute);
  line-height: 1.6;
  font-size: 1.02rem;
  max-width: 42ch;
}

.mh-home-sizer-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mh-home-sizer-option {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
  padding: 0.85rem 1.05rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 150ms var(--mh-ease), background 150ms var(--mh-ease);
}

.mh-home-sizer-option:hover { border-color: var(--mh-accent); }

.mh-home-sizer-option.active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-home-sizer-option strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-home-sizer-option span {
  color: var(--mh-mute);
  font-size: 0.88rem;
}

.mh-home-sizer-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 1.35rem 1.5rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-ink);
}

.mh-home-sizer-icon-slot {
  width: 6.5rem;
  height: 6.5rem;
  margin-bottom: 0.35rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mh-home-sizer-icon {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.mh-home-sizer-icon-placeholder {
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--mh-radius);
  background: linear-gradient(100deg, #f2eee7 30%, #faf8f4 50%, #f2eee7 70%);
  background-size: 200% 100%;
  animation: mhShimmer 1.3s ease-in-out infinite;
}

.mh-home-sizer-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mh-mute);
  font-weight: 700;
}

.mh-home-sizer-name {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.65rem, 2.8vw, 2.15rem);
}

.mh-home-sizer-meta {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  max-width: 28ch;
}

.mh-home-sizer-price {
  margin: 0.35rem 0 0;
  min-height: 1.75rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
}

.mh-home-sizer-price--pending {
  visibility: hidden;
}

.mh-home-sizer-price span {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--mh-mute);
}

.mh-home-sizer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.mh-home-sizer-ghost {
  color: var(--mh-ink);
  border-color: var(--mh-line);
  background: transparent;
}

.mh-home-sizer-ghost:hover {
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
}

/* Closing band — left copy + plan-icon artwork */
.mh-home-close {
  background: #1a1f1c;
  color: #f7f4ef;
  border-bottom: 0;
}

.mh-home-close-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .mh-home-close-layout {
    grid-template-columns: 1.2fr 0.7fr;
    gap: 3rem;
  }
}

.mh-home-close-copy {
  text-align: left;
  max-width: 30rem;
}

.mh-home-close-copy h2 {
  margin: 0 0 0.65rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #f7f4ef;
}

.mh-home-close-copy > p {
  margin: 0 0 1.25rem;
  color: #c9c2b4;
  line-height: 1.55;
  font-size: 1.05rem;
  max-width: 34ch;
}

.mh-home-close-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mh-home-share {
  color: #f7f4ef;
  border-color: #c9c2b4;
  background: transparent;
}

.mh-home-share:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

.mh-home-close-ghost {
  color: #f7f4ef;
  border-color: #c9c2b4;
  background: transparent;
}

.mh-home-close-ghost:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

.mh-home-close-art {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  justify-items: center;
  max-width: 14rem;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .mh-home-close-art {
    margin-inline: auto 0;
  }
}

.mh-home-close-art img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  image-rendering: pixelated;
}

@keyframes mhHomeHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes mhHomeHeroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.05) translate3d(-0.8%, -0.4%, 0); }
}

@keyframes mhHomePathMarkSettle {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-home-hero-stack,
  .mh-home-hero-media,
  .mh-home-hero-inner,
  .mh-home-path-mark {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .mh-home-hero-stack > picture {
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .mh-home-hero {
    min-height: min(92.4dvh, 41.8rem);
    padding-bottom: clamp(3.5rem, 10dvh, 5.5rem);
  }

  .mh-home-hero-inner {
    padding-top: clamp(4.5rem, 14dvh, 6rem);
    padding-bottom: clamp(1.25rem, 3dvh, 2rem);
  }

  .mh-home-brand {
    font-size: clamp(2.1rem, 11vw, 2.8rem);
  }

  .mh-home-paths {
    margin-top: 0;
    padding-top: clamp(3rem, 9vw, 4rem);
  }
}

.mh-section-foot {
  margin-top: 1.75rem;
}

.mh-reveal {
  animation: mhReveal 420ms ease both;
}

.mh-reveal-delay-1 { animation-delay: 60ms; }
.mh-reveal-delay-2 { animation-delay: 120ms; }
.mh-reveal-delay-3 { animation-delay: 180ms; }

@keyframes mhReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.mh-muted { color: var(--mh-mute); }

.mh-table {
  width: 100%;
  border-collapse: collapse;
}

.mh-table th,
.mh-table td {
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.95rem;
}

.mh-table th {
  font-weight: 600;
  color: var(--mh-mute);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mh-panel {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
}

.mh-input,
.mh-select,
.mh-textarea {
  width: 100%;
  border: 1px solid var(--mh-line);
  background: #fff;
  color: var(--mh-ink);
  padding: 0.7rem 0.8rem;
  font: inherit;
  border-radius: var(--mh-radius);
}

.mh-input:focus,
.mh-select:focus,
.mh-textarea:focus {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

/* A field you cannot type in should not look like one you can. */
.mh-input:disabled,
.mh-select:disabled,
.mh-textarea:disabled,
.mh-input[readonly] {
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
  cursor: not-allowed;
}

.mh-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--mh-mute);
}

/* Panel chrome styles live in the unified .mh-app section further below. */

.mh-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 1px solid var(--mh-line);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}

/* Anchors as well as buttons: a tab that is its own route should be a link. */
.mh-tabs button,
.mh-tabs a {
  border: 0;
  background: transparent;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--mh-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.mh-tabs button.active,
.mh-tabs a.active {
  color: var(--mh-ink);
  border-bottom-color: var(--mh-accent);
}

.mh-console {
  background: #12141A;
  color: #d7ebe2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  min-height: 360px;
  padding: 1rem;
  border-radius: var(--mh-radius);
  overflow: auto;
  white-space: pre-wrap;
}

.mh-toast-wrap {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* When a sticky pay bar is on screen, keep toasts above it. */
body:has(.mh-mc-mobile-bar) .mh-toast-wrap {
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}

.mh-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--mh-ink);
  color: #fff;
  padding: 0.75rem 0.85rem 0.75rem 1rem;
  border-radius: var(--mh-radius);
  min-width: 220px;
  max-width: min(26rem, calc(100vw - 2rem));
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(18, 20, 26, 0.18);
}

.mh-toast-text {
  flex: 1;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-toast-close {
  flex: 0 0 auto;
  margin: -0.15rem -0.2rem 0 0;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}

.mh-toast-close:hover,
.mh-toast-close:focus-visible {
  opacity: 1;
}

.mh-toast--success { background: #17603f; }
.mh-toast--warning { background: #8a5a1c; }

/* Errors persist until dismissed, so they need to read as blocking */
.mh-toast--error,
.mh-toast.error {
  background: #8b2e2e;
}

/* A page arriving should settle, not rise into place.
   The old 220ms fade started at opacity 0 and 6px down, so every navigation --
   and every tab that remounts a page -- blinked before it drew. */
.mh-fade-in {
  animation: mhFade 110ms ease-out;
}

@keyframes mhFade {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

/* Hold the previous page for the grace window while the next chunk loads.
   Deliberately not dimmed: a fade that lasts under a tenth of a second reads
   as a flash, and past that window the router shows the destination's
   skeleton instead of this. */
.mh-route-pending {
  pointer-events: none;
}

.mh-route-loading {
  margin: 1rem 0;
  font-size: 0.95rem;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .mh-fade-in {
    animation: none;
  }

  .mh-route-pending {
    transition: none;
  }
}

.mh-plan-option {
  border: 1px solid var(--mh-line);
  padding: 1rem;
  cursor: pointer;
  background: #fff;
  transition: border-color 150ms ease, background 150ms ease;
}

.mh-plan-option:hover,
.mh-plan-option.selected {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-badge {
  display: inline-block;
  border: 1px solid var(--mh-line);
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mh-stock-badge {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  border: 1px solid rgba(139, 46, 46, 0.4);
  background: rgba(139, 46, 46, 0.08);
  color: #8b2e2e;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--mh-radius);
  font-family: inherit;
}

.mh-stock-banner {
  margin: 0 0 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 0;
}

.mh-stock-banner::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: #a35a5a;
  vertical-align: 0.1rem;
}

/* Order form / checkout: quiet inset note, still readable at submit */
.mh-mc-configure .mh-stock-banner {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--mh-radius);
}

/* --- Catalog configurator & marketing --- */

.mh-configurator {
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
}

.mh-tier-switch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 720px) {
  .mh-tier-switch {
    grid-template-columns: 1fr 1fr;
  }
}

.mh-tier-switch button {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1rem 1.1rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 160ms ease, background 160ms ease;
}

.mh-tier-switch button strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.mh-tier-switch button span {
  display: block;
  color: var(--mh-mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mh-tier-switch button.active,
.mh-tier-switch button:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-tier-switch button.is-oos strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mh-tier-oos-mark {
  display: inline-block;
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  padding: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 0;
  font-family: inherit;
}

.mh-plan-summary--oos,
.mh-cloud-summary.mh-plan-summary--oos {
  border-color: rgba(139, 46, 46, 0.35);
}

.mh-tier-toggle {
  display: grid;
  gap: 0.85rem;
}

.mh-tier-info {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mh-tier-info strong {
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-ram-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.65rem;
}

.mh-ram-slider-head label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mh-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mh-ram-slider-head output {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.mh-ram-slider input[type="range"] {
  width: 100%;
  accent-color: var(--mh-accent);
  cursor: pointer;
}

.mh-ram-ticks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.mh-ram-ticks button {
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem;
}

.mh-ram-ticks button.active {
  color: var(--mh-accent-dark);
}

.mh-plan-summary {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1.35rem;
}

.mh-plan-summary-top {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .mh-plan-summary-top {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

.mh-plan-summary-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
}

.mh-plan-summary-price {
  display: grid;
  gap: 0.5rem;
}

.mh-cycle-switch {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  overflow: hidden;
}

.mh-cycle-switch--wide {
  max-width: 100%;
}

.mh-cycle-switch button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  color: var(--mh-mute);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.15;
}

.mh-cycle-switch button .mh-cycle-save,
.mh-cycle-switch button em.mh-cycle-save {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--mh-accent-dark);
  opacity: 0.85;
}

.mh-cycle-switch button.active {
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-cycle-switch button.active .mh-cycle-save,
.mh-cycle-switch button.active em.mh-cycle-save {
  color: #9fe3c8;
}

.mh-feature-bullets {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.mh-feature-bullets li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--mh-ink);
  font-size: 0.95rem;
  line-height: 1.4;
}

.mh-feature-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mh-accent);
}

.mh-plan-popular-pill {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-accent) 18%, transparent);
  color: var(--mh-accent-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.mh-quotes {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .mh-quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-quote {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.25rem 1.35rem;
  background: var(--mh-paper);
}

.mh-quote p {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: var(--mh-ink);
  font-size: 0.95rem;
}

.mh-quote footer {
  font-size: 0.85rem;
  color: var(--mh-mute);
}

.mh-quote footer strong {
  display: block;
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-why-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .mh-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-why-card {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.35rem 1.4rem;
  background: var(--mh-paper);
}

.mh-why-card h3 {
  margin: 0 0 0.5rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.15rem;
}

.mh-why-card p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 0.95rem;
}

.mh-plan-card-bullets {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  flex: 1;
}

.mh-plan-card-bullets li {
  font-size: 0.9rem;
  color: var(--mh-mute);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.35;
}

.mh-plan-card-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mh-accent-dark);
  font-weight: 700;
  font-size: 0.8rem;
}

/* Size selector above the ladder — picks the RAM step the table flags.
   Sits left, on the table's grid, so it reads as one control panel. */
.mh-sizer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1.1rem;
  text-align: left;
}

.mh-sizer-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-sizer-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mh-sizer-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  padding: 0.4rem 0.75rem;
  font: inherit;
  cursor: pointer;
}

.mh-sizer-chip strong {
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
}

.mh-sizer-chip span {
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.2;
}

.mh-sizer-flag {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  margin-left: 0.4rem;
}

.mh-sizer-chip:hover {
  border-color: var(--mh-accent);
}

.mh-sizer-chip.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

/* Product pages lead with a plan table, so their supporting sections drop the
   centered-and-airy treatment: at that density a centred display heading over a
   40rem column made the secondary content louder than the prices. */
.mh-page--product .mh-section {
  padding: clamp(2.25rem, 4.5vw, 3.25rem) 0;
}

.mh-page--product .mh-pg-head {
  max-width: 52rem;
  margin: 0 0 1.5rem;
  text-align: left;
}

.mh-page--product .mh-pg-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.mh-page--product .mh-pg-head .mh-section-lede {
  margin: 0;
  font-size: 0.98rem;
}

.mh-page--product .mh-faq,
.mh-page--product .mh-software-list {
  max-width: none;
  margin-inline: 0;
}

/* The dark closing band is full bleed, so it keeps the centred treatment. */
.mh-page--product .mh-pg-close .mh-pg-head {
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 860px) {
  .mh-page--product .mh-software-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
  }

  .mh-page--product .mh-faq {
    display: block;
    columns: 2;
    column-gap: 2.5rem;
  }

  .mh-page--product .mh-faq > details {
    break-inside: avoid;
    margin-bottom: 1.25rem;
  }
}

/* Plan ladder — a ladder is one product at N sizes, so it reads as a table:
   the four values that differ sit in fixed columns, and everything the sizes
   share is stated once above the list instead of inside every row. */
.mh-ladder {
  display: grid;
  gap: 0;
  text-align: left;
}

.mh-ladder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.mh-tier-seg {
  display: inline-flex;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  overflow: hidden;
}

.mh-tier-seg button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mh-mute);
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mh-tier-seg button:hover {
  color: var(--mh-ink);
}

.mh-tier-seg button.active {
  background: var(--mh-ink);
  color: var(--mh-paper);
}

.mh-ladder-includes {
  margin: 0 0 1.25rem;
  color: var(--mh-mute);
  font-size: 0.85rem;
  line-height: 1.5;
}

.mh-ladder-includes strong {
  color: var(--mh-ink);
}

/* Sleep state for a free server. The panel is the first thing on the overview
   because starting the server is usually the only reason the page was opened. */
.mh-sleep {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
}

.mh-sleep--asleep,
.mh-sleep--pending {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-sleep-main {
  min-width: 0;
}

.mh-sleep-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-sleep-body {
  margin: 0.35rem 0 0;
  color: var(--mh-mute);
  font-size: 0.88rem;
  line-height: 1.55;
  /* No reading-width cap: every message here is one short sentence or two, and
     capping below the row's own width just wrapped it for no reason. */
}

.mh-sleep-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mh-sleep-spinner {
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.45rem;
  border: 2px solid rgba(31, 163, 122, 0.25);
  border-top-color: var(--mh-accent);
  border-radius: 50%;
  animation: mh-sleep-spin 0.9s linear infinite;
}

@keyframes mh-sleep-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-sleep-spinner { animation: none; }
}

@media (max-width: 720px) {
  .mh-sleep {
    grid-template-columns: 1fr;
  }
}

/* A capability the plan does not include. Locked and explained rather than
   hidden, so the customer knows what an upgrade buys. */
.mh-locked {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
}

.mh-locked-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-locked-detail {
  margin: 0.35rem 0 0;
  color: var(--mh-mute);
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 62ch;
}

@media (max-width: 720px) {
  .mh-locked {
    grid-template-columns: 1fr;
  }
}

/* Ads appear only on a free server's overview and while it is starting, never on
   a surface someone is trying to work on. */
.mh-ad {
  grid-column: 1 / -1;
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--mh-line);
}

.mh-ad-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-ad-frame {
  display: block;
  width: 100%;
  max-width: 728px;
  height: 90px;
  border: 0;
}

/* The free step sits above the paid ladder rather than inside it, because the
   ladder's shared "every plan" line and billing cycles do not describe it.
   Flex, not grid: the icon is only rendered when the product has one, and a
   3-column grid left that column's slot to whichever child came next in the
   DOM, so a product with no icon pushed the price and button into the middle
   of the row instead of the right edge. Flex has no such slots to misassign —
   the CTA is simply the last item, so it stays last regardless of what else
   is or isn't rendered before it. */
.mh-free-plan {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--mh-accent);
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
}

.mh-free-plan.is-oos {
  border-color: var(--mh-line);
  background: #fffefb;
  opacity: 0.7;
}

.mh-free-plan-icon {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.mh-free-plan-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mh-free-plan-head strong {
  color: var(--mh-ink);
  font-size: 1rem;
}

.mh-free-plan-flag {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mh-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 1px;
}

.mh-free-plan-copy {
  /* flex-basis: 0%, not auto: a basis of "auto" measures this item's preferred
     size from its own unwrapped content before anything is laid out, and once
     the ch cap that used to limit that measurement was removed, the preferred
     size became the full paragraph on one line — too wide to share a row with
     the icon, so the icon and the copy fell onto separate lines on narrow
     screens. A 0 basis with grow:1 sizes this from the space actually left
     after the icon instead, which is what the wrapping paragraph should react
     to. min-width: 0 lets it shrink there in the first place — a flex item's
     minimum otherwise defaults to its content's min-content, which for a
     paragraph is its longest unbreakable word. */
  flex: 1 1 0%;
  min-width: 0;
}

.mh-free-plan-detail {
  margin: 0.25rem 0 0;
  color: var(--mh-mute);
  font-size: 0.85rem;
  line-height: 1.5;
}

.mh-free-plan-cta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.85rem;
}

.mh-free-plan-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--mh-ink);
}

@media (max-width: 720px) {
  .mh-free-plan {
    flex-wrap: wrap;
  }

  .mh-free-plan-cta {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

.mh-plan-table {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  overflow: hidden;
}

.mh-plan-table-head,
.mh-plan-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.6fr) 8rem minmax(9rem, 1fr) 9rem 10rem;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.15rem;
}

.mh-plan-table-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mh-mute);
  border-bottom: 1px solid var(--mh-line);
  background: rgba(0, 0, 0, 0.015);
}

.mh-plan-row {
  border-top: 1px solid var(--mh-line);
  padding-block: 0.85rem;
}

.mh-plan-table-head + .mh-plan-row {
  border-top: 0;
}

.mh-plan-row:hover {
  background: rgba(31, 163, 122, 0.04);
}

.mh-plan-row.is-selected {
  background: var(--mh-accent-soft);
  box-shadow: inset 3px 0 0 var(--mh-accent);
}

.mh-plan-row.is-oos {
  opacity: 0.55;
}

.mh-plan-row-id {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.mh-plan-row-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.mh-plan-row-id-copy {
  display: grid;
  min-width: 0;
}

.mh-plan-row-ram {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.mh-plan-row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--mh-mute);
  font-size: 0.85rem;
  line-height: 1.3;
}

.mh-plan-row-flag {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mh-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 1px;
}

.mh-plan-row-flag--oos {
  background: var(--mh-mute);
}

.mh-plan-row-players,
.mh-plan-row-res {
  color: var(--mh-mute);
  font-size: 0.88rem;
  line-height: 1.35;
}

.mh-plan-row-players span {
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-plan-row-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  white-space: nowrap;
}

.mh-plan-row-price b {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}

.mh-plan-row-price span {
  color: var(--mh-mute);
  font-size: 0.8rem;
}

/* The column header carries the cycle on desktop; rows repeat it only once
   the header is hidden. */
.mh-plan-row-cycle {
  display: none;
}

.mh-plan-row-cta .mh-btn {
  width: 100%;
  padding-block: 0.5rem;
  font-size: 0.85rem;
}

@media (max-width: 899px) {
  .mh-plan-table-head {
    display: none;
  }

  .mh-plan-row {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    padding: 1rem 1.1rem;
  }

  .mh-plan-row-id {
    grid-column: 1;
  }

  .mh-plan-row-price {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .mh-plan-row-cycle {
    display: inline;
  }

  .mh-plan-row-players,
  .mh-plan-row-res {
    grid-column: 1 / -1;
    font-size: 0.84rem;
  }

  .mh-plan-row-players {
    margin-top: 0.15rem;
  }

  .mh-plan-row-cta {
    grid-column: 1 / -1;
    margin-top: 0.55rem;
  }
}

.mh-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;
}

.mh-ladder-toolbar {
  display: grid;
  gap: 1.25rem;
}

.mh-ladder-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mh-ladder-toolbar p {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 36rem;
}

.mh-featured-plans-toolbar {
  display: grid;
  gap: 1.25rem;
  justify-items: stretch;
}

.mh-ladder-tier {
  display: grid;
  gap: 1rem;
}

.mh-ladder-tier-head h3 {
  margin: 0 0 0.35rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.mh-ladder-tier-head p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.5;
  max-width: 42rem;
  font-size: 0.95rem;
}

.mh-ladder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 700px) {
  .mh-ladder-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .mh-ladder-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .mh-ladder-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mh-plan-card.is-recommended {
  border-color: var(--mh-accent);
  box-shadow: 0 0 0 1px var(--mh-accent);
}

.mh-plan-card-flag--rec {
  background: var(--mh-ink);
}

.mh-choose-strip {
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .mh-choose-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mh-choose-tip {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.15rem 1.25rem;
  background: #fffefb;
}

.mh-choose-tip strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
}

.mh-choose-tip span {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Cloud slider */
.mh-cloud-slider {
  display: grid;
  gap: 1.5rem;
}

/* Keep #configure from expanding when the slider replaces the loading shell. */
#configure .mh-cloud-slider {
  min-height: 22rem;
}

.mh-cloud-slider-skeleton-main {
  min-height: 12rem;
}

.mh-cloud-slider-skeleton-summary {
  min-height: 14rem;
}

@media (min-width: 960px) {
  .mh-cloud-slider {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }

  #configure .mh-cloud-slider {
    min-height: 18rem;
  }
}

.mh-cloud-slider-main {
  display: grid;
  gap: 1.25rem;
}

.mh-cloud-summary {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  padding: 1.35rem 1.4rem;
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 4.5rem;
}

@media (max-width: 959px) {
  .mh-cloud-summary {
    position: static;
    top: auto;
  }
}

.mh-cloud-summary-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.mh-cloud-summary-ram {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.15rem 0 0;
}

.mh-cloud-spec-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mh-cloud-spec-chips span {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  padding: 0.3rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--mh-radius);
}

.mh-ram-ticks--named button {
  font-size: 0.72rem;
  min-width: 2.4rem;
  line-height: 1.15;
}

.mh-ram-ticks--named button small {
  display: block;
  font-weight: 500;
  color: var(--mh-mute);
  text-transform: capitalize;
}

.mh-ram-ticks--named button.active small {
  color: #9fe3c8;
}

.mh-price-figure {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.mh-price-figure span {
  display: inline-block;
  margin-left: 0.25rem;
  font-family: IBM Plex Sans, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mh-mute);
}

.mh-price-save {
  color: var(--mh-accent-dark);
  font-weight: 600;
  font-size: 0.9rem;
}

.mh-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--mh-line);
}

@media (min-width: 600px) {
  .mh-spec-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mh-spec-grid dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
  margin: 0 0 0.2rem;
}

.mh-spec-grid dd {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-configurator-cta {
  margin-top: 1.25rem;
  width: 100%;
}

.mh-game-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 720px) {
  .mh-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Three across on wide screens so the capsules are not upscaled */
@media (min-width: 1080px) {
  .mh-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mh-game-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  overflow: hidden;
  transition: border-color 160ms ease, background 160ms ease;
}

.mh-game-card:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-game-card img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  background: #1a1f1c;
}

.mh-game-card-body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: grid;
  gap: 0.45rem;
}

.mh-game-card-body strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.mh-game-card-body p {
  margin: 0;
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.95rem;
}

.mh-game-card-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mh-accent-dark);
}

.mh-faq {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
}

.mh-faq details {
  border-top: 1px solid var(--mh-line);
  padding-top: 1rem;
}

.mh-faq summary {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.mh-faq p {
  margin: 0.55rem 0 0;
  color: var(--mh-mute);
  line-height: 1.55;
}

.mh-software-list {
  display: grid;
  border-top: 1px solid var(--mh-line);
}

.mh-software-list > div {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--mh-line);
}

@media (min-width: 720px) {
  .mh-software-list > div {
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    align-items: baseline;
  }
}

.mh-software-list strong {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-software-list span {
  color: var(--mh-mute);
  line-height: 1.55;
}

.mh-order-form {
  padding: 1.35rem;
}

.mh-order-form-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}

.mh-locked-spec {
  border: 1px solid var(--mh-line);
  background: #fff;
  padding: 0.7rem 0.8rem;
  border-radius: var(--mh-radius);
  font-weight: 600;
  text-transform: capitalize;
}

.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;
}

/* ============================================================
   Homepage — product-forward redesign
   ============================================================ */

/* Trust chip row under hero CTAs */
.mh-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  margin-top: 0.75rem;
}

.mh-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--mh-mute);
}

.mh-trust-chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--mh-accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Live featured plan cards */
.mh-featured-plans {
  display: grid;
  gap: 1.25rem;
}

.mh-plan-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 760px) {
  .mh-plan-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .mh-plan-cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .mh-plan-cards--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .mh-plan-cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mh-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1.35rem 1.4rem 1.5rem;
  transition: border-color 160ms ease, transform 160ms ease;
}

.mh-plan-card:hover {
  border-color: var(--mh-accent);
  transform: translateY(-2px);
}

.mh-plan-card.featured {
  border-color: var(--mh-accent);
  box-shadow: 0 0 0 1px var(--mh-accent);
}

.mh-plan-card-flag {
  position: absolute;
  top: -0.7rem;
  left: 1.4rem;
  background: var(--mh-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 1px;
  z-index: 1;
}

.mh-plan-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.1rem 0 0.7rem;
}

.mh-plan-card-icon {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
  background: none;
}

@media (max-width: 699px) {
  .mh-plan-card-icon {
    width: 64px;
    height: 64px;
  }
}

.mh-plan-card-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.4rem;
  margin: 0;
}

.mh-plan-card-use {
  color: var(--mh-mute);
  line-height: 1.5;
  font-size: 0.92rem;
  margin: 0.3rem 0 1rem;
  min-height: 2.7em;
}

.mh-plan-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 0.25rem;
}

.mh-plan-detail-icon {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  object-fit: contain;
  image-rendering: pixelated;
  background: none;
}

.mh-plan-detail-icon--reco {
  width: 96px;
  height: 96px;
  margin: 0 0 0.75rem;
}

@media (max-width: 699px) {
  .mh-plan-detail-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .mh-plan-detail-icon {
    width: 88px;
    height: 88px;
  }
}

.mh-plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.mh-plan-card-price b {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
}

.mh-plan-card-price span {
  color: var(--mh-mute);
  font-size: 0.9rem;
}

.mh-plan-card-specs {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--mh-line);
  display: grid;
  gap: 0.5rem;
}

.mh-plan-card-specs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.mh-plan-card-specs li span:first-child { color: var(--mh-mute); }
.mh-plan-card-specs li span:last-child { font-weight: 600; }

.mh-plan-card .mh-btn { margin-top: auto; }

/* RAM recommender */
.mh-reco {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .mh-reco {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 3rem;
  }
}

.mh-reco-options {
  display: grid;
  gap: 0.6rem;
}

.mh-reco-option {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 150ms ease, background 150ms ease;
}

.mh-reco-option:hover { border-color: var(--mh-accent); }

.mh-reco-option.active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-reco-option strong {
  display: block;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-reco-option span {
  color: var(--mh-mute);
  font-size: 0.88rem;
}

.mh-reco-result {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #1a1f1c;
  color: #f7f4ef;
  padding: 1.75rem;
}

.mh-reco-result-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fe6c6;
  margin: 0 0 0.5rem;
}

.mh-reco-result-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 2rem;
  margin: 0;
}

.mh-reco-result-ram {
  color: #c9c2b4;
  margin: 0.35rem 0 1rem;
}

.mh-reco-result-price {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  margin: 0 0 1.35rem;
}

.mh-reco-result-price span {
  color: #c9c2b4;
  font-size: 0.9rem;
  font-family: IBM Plex Sans, system-ui, sans-serif;
}

.mh-reco-result .mh-btn-ghost {
  color: #f7f4ef;
  border-color: #c9c2b4;
}

.mh-reco-result .mh-btn-ghost:hover {
  background: #f7f4ef;
  color: #1a1f1c;
  border-color: #f7f4ef;
}

/* Software chips strip */
.mh-soft-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.mh-soft-chip {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.5rem 0.85rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Skeleton shimmer for async plan cards */
.mh-skeleton {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: linear-gradient(100deg, #f2eee7 30%, #faf8f4 50%, #f2eee7 70%);
  background-size: 200% 100%;
  animation: mhShimmer 1.3s ease-in-out infinite;
  min-height: 16rem;
}

/* Home featured plans: match loaded card height so #plans does not grow on fetch. */
.mh-featured-plans .mh-plan-cards > .mh-skeleton {
  min-height: 22rem;
}

.mh-featured-plans-toolbar .mh-skeleton,
.mh-skeleton--toolbar {
  min-height: 2.75rem;
}

/* Reserve the loaded FeaturedPlans footprint (toolbar + cards) across breakpoints. */
#plans .mh-featured-plans {
  min-height: 96rem;
}

@media (min-width: 760px) {
  #plans .mh-featured-plans {
    min-height: 52rem;
  }
}

@media (min-width: 1200px) {
  #plans .mh-featured-plans {
    min-height: 30rem;
  }
}

@keyframes mhShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-skeleton,
  .mh-home-sizer-icon-placeholder {
    animation: none;
  }
}

/* ——— Control panel chrome & primitives ——— */

.mh-btn-xs {
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.mh-btn-sm {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

.mh-btn-danger {
  background: #8b2e2e;
  color: #fffefb;
  border: 1px solid #8b2e2e;
}

.mh-btn-danger:hover:not(:disabled) {
  background: #6e2424;
  border-color: #6e2424;
}

/* ── Panel chrome (AppShell): sidebar + utility topbar ───────────────────── */

.mh-app {
  --mh-app-rail: 260px;
  display: grid;
  grid-template-columns: var(--mh-app-rail) 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  position: relative;
  background: var(--mh-paper);
}

.mh-app-topbar {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid var(--mh-line);
  background: #fffefb;
  position: sticky;
  top: 0;
  z-index: 30;
}

.mh-app-topbar-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--mh-ink);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex: 0 0 auto;
}

/* Support session banner. Deliberately across the full width and above the
   topbar: an admin looking at somebody else's account should not be able to
   forget whose it is, and the customer should be able to see the same thing in
   a screenshot. */
.mh-impersonation-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--mh-warn);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
}
.mh-impersonation-bar .mh-link {
  margin-left: auto;
  color: #fff;
  font-weight: 600;
}

.mh-app-attention {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 14rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 160ms var(--mh-ease), border-color 160ms var(--mh-ease);
}

.mh-app-attention:hover {
  background: var(--mh-surface-sunk);
}

.mh-app-attention-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  flex: 0 0 auto;
  background: currentColor;
}

.mh-app-attention--bad {
  color: var(--mh-bad);
  border-color: rgba(139, 46, 46, 0.28);
  background: rgba(139, 46, 46, 0.06);
}

.mh-app-attention--warn {
  color: var(--mh-warn);
  border-color: rgba(138, 90, 18, 0.28);
  background: rgba(138, 90, 18, 0.07);
}

.mh-app-attention-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-app-menu-btn {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--mh-line);
  background: #fff;
  border-radius: var(--mh-radius);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.mh-app-menu-btn span {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--mh-ink);
}

.mh-app-scrim {
  display: none;
}

.mh-app-nav {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  border-right: 1px solid var(--mh-line);
  background: #fffefb;
  padding: 1.15rem 0.85rem 1rem;
  z-index: 25;
}

.mh-app-nav-brand {
  margin: 0.15rem 0.45rem 1.15rem;
}

.mh-app-nav-primary {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-height: 0;
}

.mh-app-nav-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mh-app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.7rem;
  border-radius: var(--mh-radius);
  color: var(--mh-mute);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition:
    background 160ms var(--mh-ease),
    color 160ms var(--mh-ease),
    border-color 160ms var(--mh-ease);
}

.mh-app-nav-link:hover {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

.mh-app-nav-link.active {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-left-color: var(--mh-accent);
}

.mh-app-nav-icon {
  flex: 0 0 auto;
  color: currentColor;
}

.mh-app-nav-link-label {
  flex: 1 1 auto;
  min-width: 0;
}

.mh-app-nav-badge {
  flex: 0 0 auto;
  min-width: 1.25rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--mh-radius);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
}

.mh-app-nav-badge--bad {
  color: var(--mh-bad);
  background: rgba(139, 46, 46, 0.1);
  border-color: rgba(139, 46, 46, 0.22);
}

.mh-app-nav-badge--warn {
  color: var(--mh-warn);
  background: rgba(138, 90, 18, 0.1);
  border-color: rgba(138, 90, 18, 0.22);
}

.mh-app-nav-recents {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.15rem 0 0.35rem 0.35rem;
  margin-left: 0.85rem;
  border-left: 1px solid var(--mh-line);
}

.mh-app-nav-recent {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--mh-radius);
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  min-width: 0;
  transition: background 160ms var(--mh-ease), color 160ms var(--mh-ease);
}

.mh-app-nav-recent:hover,
.mh-app-nav-recent.active {
  background: var(--mh-surface-sunk);
  color: var(--mh-ink);
}

.mh-app-nav-recent-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  flex: 0 0 auto;
  background: var(--mh-mute);
}

.mh-app-nav-recent-dot.mh-status--ok { background: var(--mh-ok); }
.mh-app-nav-recent-dot.mh-status--warn { background: var(--mh-warn); }
.mh-app-nav-recent-dot.mh-status--bad { background: var(--mh-bad); }
.mh-app-nav-recent-dot.mh-status--neutral { background: var(--mh-mute); }

.mh-app-nav-recent-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-app-nav-foot {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mh-app-nav-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
  padding: 0.15rem 0;
}

.mh-app-order {
  position: relative;
}

.mh-app-order-btn {
  width: 100%;
  justify-content: center;
  gap: 0.45rem;
}

.mh-app-order-plus {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  position: relative;
}

.mh-app-order-plus::before,
.mh-app-order-plus::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}

.mh-app-order-plus::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.mh-app-order-plus::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.mh-app-menu {
  position: absolute;
  z-index: 60;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.35rem;
  background: #fffefb;
  border: 1px solid var(--mh-line);
  border-radius: 4px;
  box-shadow:
    0 4px 6px rgba(18, 20, 26, 0.04),
    0 12px 28px rgba(18, 20, 26, 0.1);
  transform-origin: bottom left;
  transition:
    opacity 140ms var(--mh-ease),
    transform 140ms var(--mh-ease),
    visibility 140ms var(--mh-ease);
}

.mh-app-menu:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px) scale(0.98);
}

.mh-app-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mh-app-order-menu {
  left: 0;
  right: 0;
  bottom: calc(100% + 0.45rem);
  width: 100%;
  min-width: 0;
}

.mh-app-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background 140ms var(--mh-ease);
}

.mh-app-menu-item:hover,
.mh-app-menu-item:focus-visible {
  background: var(--mh-accent-soft);
  outline: none;
}

.mh-app-menu-item-label {
  font-weight: 600;
  font-size: 0.88rem;
}

.mh-app-menu-item-hint {
  font-size: 0.75rem;
  color: var(--mh-mute);
  font-weight: 500;
}

.mh-app-menu-item--btn {
  margin-top: 0.15rem;
  border-top: 1px solid var(--mh-line);
  border-radius: 0 0 var(--mh-radius) var(--mh-radius);
  padding-top: 0.7rem;
}

.mh-app-account {
  position: relative;
}

.mh-app-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 11rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms var(--mh-ease), border-color 140ms var(--mh-ease);
}

.mh-app-account-trigger:hover,
.mh-app-account.is-open .mh-app-account-trigger {
  background: var(--mh-surface-sunk);
  border-color: #cfc6b6;
}

.mh-app-account-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-app-account-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.7;
  flex: 0 0 auto;
  transition: transform 140ms var(--mh-ease);
}

.mh-app-account.is-open .mh-app-account-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.mh-app-account-menu {
  top: calc(100% + 0.45rem);
  right: 0;
  left: auto;
  transform-origin: top right;
  min-width: 15rem;
}

.mh-app-account-menu:not(.is-open) {
  transform: translateY(-4px) scale(0.98);
}

.mh-app-account-menu.is-open {
  transform: translateY(0) scale(1);
}

.mh-app-account-email {
  padding: 0.35rem 0.65rem 0.55rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--mh-line);
  margin-bottom: 0.2rem;
}

.mh-app-account-currency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border-bottom: 1px solid var(--mh-line);
  margin-bottom: 0.15rem;
}

.mh-app-account-currency .mh-currency-menu {
  top: calc(100% + 0.35rem);
  bottom: auto;
  right: 0;
  left: auto;
  transform-origin: top right;
}

.mh-app-account-currency .mh-currency-menu.is-open {
  transform: translateY(0) scale(1);
}

.mh-app-account-currency .mh-currency-menu:not(.is-open) {
  transform: translateY(-4px) scale(0.98);
}

.mh-app-main {
  grid-column: 2;
  grid-row: 2;
  padding: 1.35rem clamp(1rem, 3vw, 2rem);
  min-width: 0;
}

@media (max-width: 900px) {
  .mh-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .mh-app-topbar {
    grid-column: 1;
    grid-row: 1;
  }

  .mh-app-menu-btn {
    display: inline-flex;
  }

  .mh-app-nav-brand {
    display: inline-flex;
    margin: 0.15rem 0.45rem 1.35rem;
  }

  .mh-app--nav-open .mh-app-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(18, 20, 26, 0.35);
    z-index: 40;
  }

  .mh-app-nav {
    grid-column: unset;
    grid-row: unset;
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 88vw);
    height: 100dvh;
    z-index: 50;
    transform: translateX(-105%);
    transition: transform 200ms var(--mh-ease);
    box-shadow: none;
    padding-top: 1.35rem;
  }

  .mh-app--nav-open .mh-app-nav {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(18, 20, 26, 0.12);
  }

  .mh-app-main {
    grid-column: 1;
    grid-row: 2;
  }

  .mh-app-attention-label {
    max-width: 6.5rem;
  }

  .mh-app-account-trigger {
    max-width: 8.5rem;
  }
}

@media (max-width: 480px) {
  .mh-app-attention-label {
    display: none;
  }

  .mh-app-attention {
    padding: 0.4rem;
  }
}

.mh-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  background: #fff;
  color: var(--mh-mute);
}

.mh-status::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: currentColor;
}

.mh-status--ok { color: #146b50; background: rgba(31, 163, 122, 0.12); border-color: rgba(31, 163, 122, 0.35); }
.mh-status--warn { color: #8a5a12; background: rgba(196, 146, 38, 0.14); border-color: rgba(196, 146, 38, 0.4); }
.mh-status--bad { color: #8b2e2e; background: rgba(139, 46, 46, 0.1); border-color: rgba(139, 46, 46, 0.35); }
.mh-status--neutral { color: var(--mh-mute); }

.mh-module-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  color: var(--mh-mute);
  background: #fff;
}

.mh-module-badge--game { color: #146b50; border-color: rgba(31, 163, 122, 0.4); background: rgba(31, 163, 122, 0.08); }
.mh-module-badge--cloud { color: #1f4e79; border-color: rgba(43, 108, 176, 0.4); background: rgba(43, 108, 176, 0.08); }
.mh-module-badge--ip { color: #5b3d14; border-color: rgba(180, 120, 40, 0.45); background: rgba(180, 120, 40, 0.1); }

.mh-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: 0.85rem;
}

.mh-copy-label {
  color: var(--mh-mute);
  font-weight: 600;
  min-width: 3.5rem;
}

.mh-copy-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.mh-copy-value--plain {
  font-family: inherit;
  font-size: inherit;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.mh-usage-card {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.85rem 1rem;
}

.mh-usage-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}

.mh-usage-label { color: var(--mh-mute); font-weight: 600; }
.mh-usage-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.mh-usage-track {
  height: 6px;
  background: #ebe6dc;
  border-radius: 1px;
  overflow: hidden;
}

.mh-usage-fill {
  height: 100%;
  background: var(--mh-accent);
  border-radius: 1px;
  transition: width 240ms ease;
}

.mh-empty {
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 2rem 1.25rem;
  text-align: center;
  background: rgba(255, 254, 251, 0.7);
}

.mh-empty-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.mh-empty-body { margin: 0 auto 1rem; max-width: 28rem; }

/* A failed read must not look like an empty account */
.mh-empty--error {
  border-style: solid;
  border-color: rgba(139, 46, 46, 0.35);
  background: rgba(139, 46, 46, 0.04);
}

.mh-empty--error .mh-empty-title { color: #8b2e2e; }

.mh-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.mh-section-title h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}

.mh-section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ============================================================
   Account settings — identity header, sections, sessions
   ============================================================ */

.mh-acct-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0 0 1.25rem;
}

.mh-acct-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}

.mh-acct-avatar {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mh-accent);
  border-radius: 50%;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.mh-acct-id-main {
  flex: 1 1 12rem;
  min-width: 0;
}

.mh-acct-id-name {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.mh-acct-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  margin: 0;
}

.mh-acct-facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.2rem;
}

.mh-acct-facts dd {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.mh-acct-tabs {
  margin-bottom: 1.25rem;
}

/* One column of sections: settings are read top to bottom, not scanned. */
.mh-acct-sections {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
}

.mh-acct-lede {
  margin: -0.35rem 0 1rem;
  max-width: 40rem;
  line-height: 1.5;
}

.mh-acct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 640px) {
  .mh-acct-grid {
    grid-template-columns: 1fr;
  }
}

.mh-acct-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.15rem;
}

.mh-acct-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mh-acct-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mh-line);
}

.mh-acct-session:last-child {
  border-bottom: 0;
}

.mh-acct-session:first-child {
  padding-top: 0;
}

.mh-acct-session-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 600;
}

.mh-skeleton.mh-acct-skeleton {
  min-height: 6rem;
}

.mh-skeleton.mh-acct-skeleton--tall {
  min-height: 18rem;
}

.mh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 26, 0.45);
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.mh-modal {
  width: min(420px, 100%);
  background: #fffefb;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 1.25rem;
  box-shadow: 0 16px 40px rgba(18, 20, 26, 0.18);
}

.mh-modal h3 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-modal-body {
  color: var(--mh-mute);
  font-size: 0.95rem;
  margin-bottom: 1.15rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mh-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.mh-service-workspace {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3rem);
}

.mh-workspace-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--mh-paper);
  padding-bottom: 0.15rem;
  margin: -0.25rem 0 0.5rem;
}

@media (max-width: 900px) {
  .mh-workspace-sticky { top: 3.4rem; }
}

/* --- Workspace header ----------------------------------------------------
   One dense line: who this is, where to connect, whether it is up, and power.
   Everything occasional (UUID, healthy billing state, the module type) lives
   elsewhere, because this bar is sticky on every tab and every row it grows
   is a row of content pushed off screen.
   ------------------------------------------------------------------------ */

.mh-wh {
  padding: 0.5rem 0 0.6rem;
}

.mh-wh-back {
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mh-mute);
  cursor: pointer;
}

.mh-wh-back:hover { color: var(--mh-ink); }

.mh-wh-bar {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3) var(--mh-space-4);
  flex-wrap: wrap;
}

.mh-wh-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  /* Claim the slack in the row, otherwise the auto-sized name column collapses
     around the title and ellipsises an address that had room to spare. */
  flex: 1 1 auto;
  min-width: 0;
}

.mh-wh-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  image-rendering: pixelated;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

/* Name over address: they are a hierarchy, not two peers on one line. */
.mh-wh-names {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.mh-wh-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mh-wh-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reads as a subtitle, not a form control, until you reach for it. */
.mh-wh-address {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  justify-self: start;
  max-width: 100%;
  margin-left: -0.35rem;
  padding: 0.1rem 0.35rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  transition: border-color 140ms var(--mh-ease), background 140ms var(--mh-ease);
}

.mh-wh-address:hover {
  border-color: var(--mh-line);
  background: var(--mh-surface);
}

.mh-wh-address code {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 0.9rem;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-wh-address:hover code { color: var(--mh-ink); }

/* The copy hint only appears on approach, so the resting state is just text. */
.mh-wh-address .mh-wh-copy {
  opacity: 0;
  transition: opacity 140ms var(--mh-ease);
}

.mh-wh-address:hover .mh-wh-copy,
.mh-wh-address:focus-visible .mh-wh-copy { opacity: 1; }

.mh-wh-copy {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mh-accent);
  white-space: nowrap;
}

.mh-wh-controls {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  margin-left: auto;
}

.mh-wh-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  color: var(--mh-mute);
}

.mh-wh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.mh-wh-state--ok { color: var(--mh-ok); }
.mh-wh-state--warn { color: var(--mh-warn); }
.mh-wh-state--bad { color: var(--mh-bad); }

.mh-wh-state.is-transitional .mh-wh-dot {
  animation: mh-ov-pulse 1.4s var(--mh-ease) infinite;
}

.mh-wh-power {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mh-wh-more { position: relative; }

.mh-wh-more-toggle {
  min-width: 2rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

.mh-wh-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 30;
  min-width: 10rem;
  padding: 0.25rem;
  display: grid;
  gap: 0.15rem;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  box-shadow: 0 8px 24px rgba(20, 40, 30, 0.12);
}

.mh-wh-more-item {
  border: 0;
  background: none;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--mh-bad);
  cursor: pointer;
  border-radius: var(--mh-radius);
}

.mh-wh-more-item:hover { background: rgba(139, 46, 46, 0.08); }
.mh-wh-more-item:disabled { color: var(--mh-mute); cursor: default; background: none; }

/* Thirteen tabs overflow on smaller screens. Fade the trailing edge so it is
   visible that the row continues — but only when it actually does, which the
   component detects, since CSS cannot ask whether an element is scrollable. */
.mh-wh-tabs-wrap { position: relative; }

.mh-wh-tabs-wrap.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
}

.mh-wh-tabs-wrap.is-scrollable.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem);
}

.mh-wh-tabs-wrap.is-scrollable.at-middle {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}

.mh-wh-tabs {
  margin-bottom: 0;
  scrollbar-width: none;
}

.mh-wh-tabs::-webkit-scrollbar { display: none; }

.mh-wh-console {
  flex-shrink: 0;
}

body.mh-vnc-open {
  overflow: hidden;
}

.mh-vnc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: #0b1220;
  color: #e5e7eb;
}

.mh-vnc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.mh-vnc-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mh-vnc-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mh-vnc-status {
  font-size: 0.8rem;
  color: #94a3b8;
}

.mh-vnc-status--connected { color: #34d399; }
.mh-vnc-status--connecting { color: #fbbf24; }
.mh-vnc-status--error,
.mh-vnc-status--disconnected { color: #f87171; }

.mh-vnc-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: #0b1220;
}

.mh-vnc-stage canvas {
  outline: none;
}

@media (max-width: 820px) {
  .mh-wh-bar { gap: 0.6rem; }
  .mh-wh-identity { flex-basis: 100%; }
  .mh-wh-controls { margin-left: 0; }
  /* Touch has no hover, so the copy hint has to be permanently visible. */
  .mh-wh-address .mh-wh-copy { opacity: 1; }
  .mh-wh-address { border-color: var(--mh-line); background: var(--mh-surface); }
}

.mh-workspace-body {
  flex: 1 1 auto;
  width: 100%;
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mh-workspace-overview,
.mh-workspace-lifecycle,
.mh-workspace-billing {
  width: 100%;
}

.mh-workspace-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  background: #fffefb;
  margin-bottom: 0.25rem;
}

.mh-workspace-banner--alert {
  border-color: rgba(139, 46, 46, 0.45);
  background: rgba(139, 46, 46, 0.06);
}

.mh-workspace-banner--warn {
  border-color: rgba(180, 120, 40, 0.45);
  background: rgba(180, 120, 40, 0.08);
}

.mh-workspace-steps {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--mh-mute);
  line-height: 1.55;
}

.mh-workspace-steps li + li {
  margin-top: 0.45rem;
}

.mh-workspace-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.55rem;
}

.mh-service-card--clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mh-service-card--clickable:hover,
.mh-service-card--clickable:focus-visible {
  border-color: rgba(46, 125, 90, 0.45);
  box-shadow: 0 0 0 1px rgba(46, 125, 90, 0.12);
  outline: none;
}

/* Still used by the "service not found" page, which has a heading and nothing
   else. The rest of the old .mh-panel-* header shell went with PanelShell. */
.mh-panel-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin: 0;
}

.mh-ops-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
  .mh-ops-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .mh-ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mh-ops-chip {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 0.85rem 1rem;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.mh-ops-chip--clickable {
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mh-ops-chip--clickable:hover {
  border-color: rgba(31, 163, 122, 0.45);
  box-shadow: 0 1px 0 rgba(20, 40, 30, 0.04);
}

.mh-ops-chip--alert {
  border-color: rgba(139, 46, 46, 0.45);
  background: rgba(139, 46, 46, 0.06);
}

.mh-ops-chip-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.25rem;
}

.mh-ops-chip-value {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Dashboard command center */
.mh-dash-side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .mh-dash-side-grid { grid-template-columns: 1fr; }
}

.mh-dash-row {
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  text-decoration: none;
  color: inherit;
}

a.mh-dash-row:hover {
  background: rgba(31, 163, 122, 0.05);
}

.mh-dash-row:last-child {
  border-bottom: 0;
}

.mh-dash-row--actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}

.mh-dash-row-main {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.mh-billing-activity-amt {
  flex-shrink: 0;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Billing recent lists: equal columns, panels hug content (no stretched whitespace). */
.mh-billing-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  align-items: start;
}

.mh-billing-activity-grid > section {
  min-width: 0;
}

.mh-billing-activity-grid .mh-panel {
  height: auto;
}

@media (max-width: 900px) {
  .mh-billing-activity-grid { grid-template-columns: 1fr; }
}

/* ── Billing area: overview, invoices, transactions, methods ─────────────
   mh-billing-* is page furniture and mh-inv-* is the row vocabulary shared
   by invoices, transactions and credit entries. The mh-bill-* block further
   down belongs to the service workspace billing tab and is a different thing.
   ─────────────────────────────────────────────────────────────────────── */

.mh-billing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mh-billing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.mh-billing-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0;
  color: var(--mh-ink);
}

.mh-billing-lede {
  margin: 0.25rem 0 0;
}

.mh-billing-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-billing-tabs {
  margin-bottom: 0.25rem;
}

.mh-ops-strip.mh-billing-strip {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 0;
}

.mh-billing-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--mh-accent);
}

.mh-billing-alert--late {
  border-left-color: var(--mh-bad);
  background: rgba(139, 46, 46, 0.06);
}

.mh-billing-alert--warn {
  border-left-color: var(--mh-warn);
  background: #fbf1de;
}

.mh-billing-alert-copy {
  min-width: 0;
}

.mh-billing-alert-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-billing-grid {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1024px) {
  .mh-billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mh-billing-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.mh-billing-list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
}

.mh-billing-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

.mh-billing-search {
  flex: 1 1 14rem;
  min-width: 0;
}

.mh-billing-toolbar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* .mh-input is full-width by default, which stacks selects in a toolbar. */
.mh-billing-toolbar-filters .mh-input {
  width: auto;
  min-width: 9rem;
}

.mh-billing-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mh-billing-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-billing-autopay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
}

.mh-billing-autopay-copy {
  min-width: 0;
}

.mh-billing-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-skeleton.mh-billing-skeleton {
  min-height: 5rem;
}

.mh-skeleton.mh-billing-skeleton--tall {
  min-height: 14rem;
}

/* Billing rows -------------------------------------------------------- */

.mh-inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.mh-inv-row:last-child {
  border-bottom: 0;
}

a.mh-inv-row:hover {
  background: rgba(31, 163, 122, 0.06);
}

.mh-inv-row--static {
  cursor: default;
}

.mh-inv-row-main {
  min-width: 0;
  flex: 1;
}

.mh-inv-row-title {
  font-weight: 600;
}

.mh-inv-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--mh-mute);
}

.mh-inv-row-amount {
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.mh-inv-row-amount .mh-muted {
  display: block;
  font-weight: 400;
}

.mh-inv-when.is-soon {
  color: var(--mh-warn);
  font-weight: 600;
}

.mh-inv-status,
.mh-inv-type {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-ink);
  white-space: nowrap;
}

.mh-inv-status--paid {
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
  color: var(--mh-ok);
}

.mh-inv-status--due {
  border-color: rgba(138, 90, 18, 0.45);
  background: #fbf1de;
  color: var(--mh-warn);
}

.mh-inv-status--late {
  border-color: rgba(139, 46, 46, 0.5);
  background: rgba(139, 46, 46, 0.08);
  color: var(--mh-bad);
}

.mh-inv-status--refunded,
.mh-inv-status--closed,
.mh-inv-status--draft {
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
}

.mh-inv-type--in {
  border-color: rgba(31, 163, 122, 0.4);
  color: var(--mh-ok);
}

.mh-inv-type--out {
  border-color: rgba(139, 46, 46, 0.4);
  color: var(--mh-bad);
}

/* Invoice page additions ---------------------------------------------- */

.mh-inv-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mh-inv-retry {
  border-left: 4px solid var(--mh-warn);
}

.mh-inv-payments-head {
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.mh-inv-payments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mh-inv-payments-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--mh-line);
  font-weight: 600;
}

.mh-inv-payments-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mh-inv-payments-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mh-inv-payments-what {
  font-weight: 600;
}

.mh-pm-card--warn {
  border-color: rgba(138, 90, 18, 0.5);
}

.mh-pm-expiry {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mh-warn);
}

.mh-pm-expiry--expired {
  color: var(--mh-bad);
}

.mh-pm-note {
  margin: 0.5rem 0 0;
}

.mh-dash-row-main:hover {
  color: var(--mh-ink);
}

.mh-dash-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 2px;
  background: var(--mh-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.mh-dash-skel-block {
  border-radius: var(--mh-radius);
  border: 1px solid var(--mh-line);
  background: linear-gradient(
    90deg,
    rgba(247, 244, 239, 0.9) 0%,
    rgba(255, 254, 251, 0.95) 45%,
    rgba(247, 244, 239, 0.9) 100%
  );
  background-size: 200% 100%;
  animation: mhDashShimmer 1.1s ease-in-out infinite;
}

@keyframes mhDashShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.mh-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.85rem;
}

.mh-service-card {
  border: 1px solid var(--mh-line);
  background: #fffefb;
  border-radius: var(--mh-radius);
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mh-service-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
  min-width: 0;
}

.mh-service-card-head > div:first-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.mh-service-card h3 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-service-card-product {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-service-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

/* ——— Dashboard services-first home ——— */

.mh-dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.mh-dash-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.55rem, 2.8vw, 1.85rem);
  margin: 0 0 0.35rem;
  color: var(--mh-ink);
}

.mh-dash-lede {
  margin: 0;
  max-width: 40rem;
}

.mh-dash-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.mh-dash-stamp {
  white-space: nowrap;
}

/* Everything wrong at once, worst first, one row each. */
.mh-dash-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mh-dash-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--mh-line);
  border-left-width: 3px;
  border-radius: var(--mh-radius);
  background: #fffefb;
}

.mh-dash-alert-msg {
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  /* The row is tinted by tone; the sentence itself stays readable ink. */
  color: var(--mh-ink);
}

.mh-dash-alert-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.75;
}

.mh-dash-alert--critical {
  border-left-color: #8b2e2e;
  background: rgba(139, 46, 46, 0.06);
  color: #8b2e2e;
}

.mh-dash-alert--warn {
  border-left-color: #a86a1f;
  background: rgba(168, 106, 31, 0.06);
  color: #a86a1f;
}

.mh-dash-alert--info {
  border-left-color: var(--mh-accent);
  color: var(--mh-accent);
}

/* Sections */
.mh-dash-section {
  margin-bottom: 1.75rem;
  min-width: 0;
}

.mh-dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.mh-dash-section-head h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0;
}

/* A service card that says what the server is doing right now. */
.mh-dash-live-card {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.mh-dash-live-card:hover,
.mh-dash-live-card:focus-visible {
  border-color: rgba(31, 163, 122, 0.5);
  transform: translateY(-1px);
}

.mh-dash-live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.mh-dash-players {
  font-weight: 600;
  font-size: 0.85rem;
}

.mh-dash-meters {
  display: grid;
  gap: 0.5rem;
}

.mh-dash-meter {
  min-width: 0;
}

.mh-dash-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.mh-dash-meter-track {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(31, 41, 38, 0.09);
  overflow: hidden;
}

.mh-dash-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mh-accent);
  transition: width 0.4s ease;
}

.mh-dash-meter-fill.is-hot {
  background: #a83f1f;
}

.mh-dash-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--mh-muted);
}

.mh-dash-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.25rem;
}

.mh-dash-power {
  display: flex;
  gap: 0.35rem;
}

/* Panel rows */
.mh-dash-row-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.mh-dash-row-title {
  font-weight: 600;
}

.mh-dash-row-amount {
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.mh-dash-row-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
}

.mh-dash-net {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mh-dash-net-value {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
}

.mh-dash-skel-inline {
  display: inline-block;
  width: 3rem;
  height: 1rem;
  border-radius: 3px;
  background: rgba(31, 41, 38, 0.08);
}

/* First run */
.mh-dash-onboard {
  padding: 1.5rem;
}

.mh-dash-onboard h2 {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 1rem;
}

.mh-dash-onboard-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.mh-dash-onboard-steps li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.mh-dash-onboard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(31, 163, 122, 0.12);
  color: var(--mh-accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.mh-dash-onboard-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.mh-dash-onboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.mh-filter-bar button.active {
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-color: rgba(31, 163, 122, 0.4);
}

.mh-console-host {
  --mh-term-bg: #0e1114;
  --mh-term-panel: #161a1f;
  --mh-term-border: #2a3038;
  --mh-term-fg: #d5e0d9;
  --mh-term-muted: #7a8790;
  --mh-term-info: #7dcea0;
  --mh-term-warn: #e6c07b;
  --mh-term-error: #e88a8a;
  --mh-term-fatal: #ff6b6b;
  --mh-term-success: #5fd4a0;
  --mh-term-command: #8ec8ff;
  --mh-term-debug: #8b9bb4;
  --mh-term-status: #e6c98f;
  --mh-term-system: #8fe6c6;

  border: 1px solid var(--mh-term-border);
  border-radius: var(--mh-radius);
  overflow: hidden;
  background: var(--mh-term-bg);
  color: var(--mh-term-fg);
  display: flex;
  flex-direction: column;
  /* Fit under workspace chrome without scrolling the page */
  height: calc(100dvh - 14.5rem);
  max-height: calc(100dvh - 14.5rem);
  min-height: 18rem;
}

@media (max-width: 900px) {
  .mh-console-host {
    height: calc(100dvh - 17.5rem);
    max-height: calc(100dvh - 17.5rem);
  }
}

.mh-console-host--workspace {
  width: 100%;
}

.mh-console-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  background: var(--mh-term-panel);
  border-bottom: 1px solid var(--mh-term-border);
}

.mh-console-toolbar-left,
.mh-console-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.mh-console-toolbar .mh-btn.active {
  background: rgba(95, 212, 160, 0.14);
  color: var(--mh-term-success);
  border-color: rgba(95, 212, 160, 0.35);
}

.mh-console--live {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0.75rem 1rem;
  background: var(--mh-term-bg);
  color: var(--mh-term-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  overflow: auto;
  border-radius: 0;
  scrollbar-width: thin;
  scrollbar-color: #3a424c transparent;
}

.mh-console--live::-webkit-scrollbar {
  width: 8px;
}

.mh-console--live::-webkit-scrollbar-thumb {
  background: #3a424c;
  border-radius: 4px;
}

.mh-console--live::selection,
.mh-console--live *::selection {
  background: rgba(95, 212, 160, 0.28);
}

.mh-console-empty {
  color: var(--mh-term-muted);
  padding: 1.25rem 0.25rem;
}

.mh-console-line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 0.05rem 0;
}

.mh-console-line--debug { color: var(--mh-term-debug); }
.mh-console-line--info { color: var(--mh-term-fg); }
.mh-console-line--warn { color: var(--mh-term-warn); }
.mh-console-line--error { color: var(--mh-term-error); }
.mh-console-line--fatal {
  color: var(--mh-term-fatal);
  font-weight: 600;
}
.mh-console-line--success { color: var(--mh-term-success); }
.mh-console-line--command { color: var(--mh-term-command); }
.mh-console-line--system { color: var(--mh-term-system); }
.mh-console-line--status { color: var(--mh-term-status); }
.mh-console-line--plain { color: var(--mh-term-fg); }

.mh-console-ts {
  color: var(--mh-term-muted);
}

.mh-console-level {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mh-console-level--debug { color: var(--mh-term-debug); }
.mh-console-level--info { color: var(--mh-term-info); }
.mh-console-level--warn { color: var(--mh-term-warn); }
.mh-console-level--error { color: var(--mh-term-error); }
.mh-console-level--fatal { color: var(--mh-term-fatal); }
.mh-console-level--success { color: var(--mh-term-success); }

.mh-console-body {
  color: inherit;
}

.mh-console-line--info .mh-console-body { color: var(--mh-term-fg); }
.mh-console-line--warn .mh-console-body { color: #f0d9a8; }
.mh-console-line--error .mh-console-body,
.mh-console-line--fatal .mh-console-body { color: #f3b4b4; }

.mh-ansi {
  color: inherit;
}

.mh-ansi--bold { font-weight: 700; }
.mh-ansi--dim { opacity: 0.72; }
.mh-ansi--italic { font-style: italic; }
.mh-ansi--underline { text-decoration: underline; }

.mh-console-jump {
  align-self: center;
  margin: 0.35rem auto;
  border: 1px solid var(--mh-term-border);
  background: var(--mh-term-panel);
  color: var(--mh-term-fg);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.mh-console-jump:hover {
  border-color: rgba(95, 212, 160, 0.45);
  color: var(--mh-term-success);
}

.mh-console-input-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: var(--mh-term-panel);
  border-top: 1px solid var(--mh-term-border);
}

.mh-console-prompt {
  color: var(--mh-term-command);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.9rem;
  padding-left: 0.15rem;
}

.mh-console-input-row input,
.mh-console-input {
  flex: 1;
  background: #0a0c0e;
  border: 1px solid var(--mh-term-border);
  color: var(--mh-term-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--mh-radius);
  outline: none;
}

.mh-console-input-row input:focus,
.mh-console-input:focus {
  border-color: rgba(95, 212, 160, 0.55);
  box-shadow: 0 0 0 2px rgba(95, 212, 160, 0.12);
}

.mh-fm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 960px) {
  .mh-fm-layout--split {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  }
}

.mh-fm-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.mh-chart-empty {
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--mh-mute);
  font-size: 0.9rem;
}

.mh-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.mh-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--mh-mute);
}

.mh-chart-swatch {
  width: 0.85rem;
  height: 2px;
  display: inline-block;
}

.mh-xterm-host {
  min-height: 360px;
  height: min(55vh, 520px);
  background: #0b1220;
  padding: 0.35rem;
}

.mh-reveal-box {
  border: 1px solid rgba(31, 163, 122, 0.45);
  background: rgba(31, 163, 122, 0.08);
  border-radius: var(--mh-radius);
  padding: 0.9rem 1rem;
}

/* --- VPS migrating --- */
.mh-vps-migrating {
  text-align: center;
  padding: 2rem 1.25rem 1.5rem;
  border-radius: var(--mh-radius, 0.85rem);
  background: linear-gradient(165deg, rgba(15, 118, 110, 0.06), transparent 55%);
  border: 1px solid rgba(15, 118, 110, 0.15);
}
.mh-vps-migrating.is-failed {
  background: linear-gradient(165deg, rgba(185, 28, 28, 0.06), transparent 55%);
  border-color: rgba(185, 28, 28, 0.2);
}
.mh-vps-migrating-visual {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  position: relative;
}
.mh-vps-migrating-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2.5px solid rgba(15, 118, 110, 0.2);
  border-top-color: var(--mh-accent, #0f766e);
  animation: mh-mig-spin 1.05s linear infinite;
}
.mh-vps-migrating.is-failed .mh-vps-migrating-ring {
  animation: none;
  border-color: rgba(185, 28, 28, 0.35);
}
@keyframes mh-mig-spin {
  to { transform: rotate(360deg); }
}
.mh-vps-migrating-title {
  font-size: 1.35rem;
  font-weight: 650;
  margin: 0 0 0.5rem;
}
.mh-vps-migrating-copy {
  max-width: 28rem;
  margin: 0 auto 1.35rem;
  line-height: 1.55;
}
.mh-vps-migrating-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
  text-align: left;
  max-width: 26rem;
  margin: 0 auto 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--mh-radius, 0.85rem);
  background: var(--mh-panel, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.mh-vps-migrating-arrow {
  font-weight: 700;
  color: var(--mh-accent, #0f766e);
}
.mh-vps-migrating-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.mh-vps-migrating-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 22rem;
  margin: 0 auto;
}
.mh-vps-migrating-bar {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.mh-vps-migrating-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0d9488, #14b8a6);
  transition: width 0.4s ease;
}
.mh-vps-migrating-pct {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--mh-mute, #64748b);
  min-width: 2.5rem;
  text-align: right;
}
@media (max-width: 520px) {
  .mh-vps-migrating-route {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mh-vps-migrating-arrow {
    transform: rotate(90deg);
  }
}

/* ── Minehost file manager (Pterodactyl-parity) ── */
.mh-fm-shell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: calc(100dvh - 14.5rem);
  min-height: 22rem;
  height: calc(100dvh - 14.5rem);
}

@media (max-width: 900px) {
  .mh-fm-shell {
    height: calc(100dvh - 17.5rem);
    max-height: calc(100dvh - 17.5rem);
    min-height: 16rem;
  }
}

.mh-fm-shell > .mh-fm-toolbar,
.mh-fm-shell > .mh-fm-massbar,
.mh-fm-shell > .mh-fm-xfer-dock,
.mh-fm-shell > .mh-fm-pull-status {
  flex-shrink: 0;
}

.mh-fm-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mh-fm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.75rem;
}

.mh-fm-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.15rem;
}

.mh-fm-filter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.mh-fm-filter-input {
  width: min(14rem, 42vw);
  min-height: 2.5rem;
  padding: 0.45rem 0.55rem;
  /* ≥16px avoids iOS Safari zoom-on-focus */
  font-size: 1rem;
}

.mh-fm-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
}

.mh-fm-crumb-wrap {
  display: inline-flex;
  align-items: center;
}

.mh-fm-crumb {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mh-accent-dark);
  padding: 0.15rem 0.35rem;
  border: 0;
  background: transparent;
  border-radius: var(--mh-radius);
  cursor: pointer;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-fm-crumb:hover {
  background: var(--mh-accent-soft);
}

.mh-fm-crumb.is-active {
  color: var(--mh-ink);
  font-weight: 650;
}

.mh-fm-crumb-sep {
  color: var(--mh-mute);
  opacity: 0.55;
  margin: 0 0.05rem;
}

.mh-fm-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mh-fm-massbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 88%, #fff);
  animation: mh-fm-mass-in 0.14s ease-out;
}

.mh-fm-massbar.is-active {
  opacity: 1;
}

.mh-fm-massbar-left,
.mh-fm-massbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.mh-fm-mass-label {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-right: 0.2rem;
}

.mh-fm-more {
  position: relative;
}

.mh-fm-more-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 30;
  min-width: 10.5rem;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid var(--mh-line);
  box-shadow: 0 10px 24px rgba(18, 20, 26, 0.1);
  animation: mh-fm-scale-in 0.12s ease-out;
}

.mh-fm-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.42rem 0.65rem;
  font-size: 0.8125rem;
  color: var(--mh-ink);
  cursor: pointer;
  border-radius: var(--mh-radius);
}

.mh-fm-more-menu button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mh-paper) 75%, #fff);
}

.mh-fm-more-menu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@keyframes mh-fm-mass-in {
  from { opacity: 0; transform: translateY(-0.2rem); }
  to { opacity: 1; transform: translateY(0); }
}

.mh-fm-upload-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 8rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-fm-upload-track {
  flex: 1;
  height: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-line) 70%, #fff);
  overflow: hidden;
}

.mh-fm-upload-track > span {
  display: block;
  height: 100%;
  background: var(--mh-accent);
  transition: width 0.2s ease;
}

.mh-fm-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-paper) 92%, #fff) 0%, #fff 48%),
    #fff;
  overflow: hidden;
}

.mh-fm-panel.is-dragging {
  border-color: var(--mh-accent);
  outline: 2px solid color-mix(in srgb, var(--mh-accent) 35%, transparent);
  outline-offset: -2px;
}

.mh-fm-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--mh-accent-soft) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: mh-fm-fade-in 0.15s ease-out;
}

.mh-fm-drop-card {
  border: 2px dashed var(--mh-accent);
  padding: 1.1rem 1.4rem;
  background: #fff;
  color: var(--mh-accent-dark);
  font-size: 0.875rem;
  font-weight: 650;
}

.mh-fm-table-head,
.mh-fm-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 5.5rem 9rem 4.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem;
}

@media (max-width: 1024px) {
  .mh-fm-table-head,
  .mh-fm-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) 5.5rem 9rem;
  }
  .mh-fm-hide-lg { display: none !important; }
}

@media (max-width: 768px) {
  .mh-fm-table-head,
  .mh-fm-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  }
  .mh-fm-hide-md { display: none !important; }
  .mh-fm-row {
    min-height: 2.75rem;
    padding: 0.15rem 0.65rem;
  }
}

.mh-fm-table-head {
  flex-shrink: 0;
  height: 2.35rem;
  border-bottom: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 80%, #fff);
  font-size: 0.6875rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
  border-left: 3px solid transparent;
  padding-left: calc(0.85rem - 3px);
}

.mh-fm-sort {
  text-align: left;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.mh-fm-sort:hover { color: var(--mh-ink); }

.mh-fm-table-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.mh-fm-row {
  min-height: 2.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--mh-line) 55%, #fff);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  width: 100%;
  text-align: left;
  background: transparent;
  user-select: none;
  color: inherit;
  border-left: 3px solid transparent;
  border-right: 0;
  border-top: 0;
  padding-left: calc(0.85rem - 3px);
}

.mh-fm-row:hover { background: color-mix(in srgb, var(--mh-paper) 70%, #fff); }
.mh-fm-row.is-selected {
  background: color-mix(in srgb, var(--mh-ink) 4.5%, #fff);
  border-left-color: var(--mh-ink);
}
.mh-fm-row.is-selected:hover {
  background: color-mix(in srgb, var(--mh-ink) 7%, #fff);
}

.mh-fm-row--up { color: var(--mh-mute); }
.mh-fm-row--up:hover { background: color-mix(in srgb, var(--mh-paper) 85%, #fff); }

.mh-fm-col-check {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 2.55rem;
  margin: 0 -0.35rem;
  padding: 0 0.35rem;
  cursor: pointer;
}

.mh-fm-col-check input {
  cursor: pointer;
  accent-color: var(--mh-accent);
  width: 1rem;
  height: 1rem;
}

.mh-fm-col-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mh-fm-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--mh-ink);
}

.mh-fm-name.is-dir { font-weight: 600; }

.mh-fm-col-size,
.mh-fm-col-mod,
.mh-fm-col-mode {
  font-size: 0.75rem;
  color: var(--mh-mute);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-fm-col-mode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

.mh-fm-empty {
  padding: 3.5rem 1rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.mh-fm-empty p:first-child {
  margin: 0;
  font-weight: 600;
  color: var(--mh-ink);
}

.mh-fm-loading {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--mh-mute);
  font-size: 0.875rem;
}

.mh-fm-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 80%, #fff);
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-fm-busy { color: var(--mh-accent-dark); font-weight: 600; }

.mh-fm-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.mh-fm-icon--folder { color: var(--mh-accent-dark); }
.mh-fm-icon--file { color: color-mix(in srgb, var(--mh-mute) 70%, #94a3b8); }
.mh-fm-icon--archive { color: #b45309; }

.mh-fm-pill {
  font-size: 0.625rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  flex-shrink: 0;
}

.mh-fm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  color: var(--mh-mute);
}

.mh-fm-badge.is-ok {
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border-color: color-mix(in srgb, var(--mh-accent) 35%, var(--mh-line));
}

.mh-fm-badge.is-warn {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.mh-fm-badge.is-info {
  color: var(--mh-ink);
  background: color-mix(in srgb, var(--mh-paper) 70%, #fff);
}

.mh-fm-context-menu {
  position: fixed;
  z-index: 80;
  min-width: 12.5rem;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid var(--mh-line);
  border-radius: calc(var(--mh-radius) + 2px);
  box-shadow: 0 10px 28px rgba(18, 20, 26, 0.12);
  animation: mh-fm-scale-in 0.12s ease-out;
}

.mh-fm-context-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: var(--mh-radius);
  font-size: 0.8125rem;
  color: var(--mh-ink);
  background: transparent;
  cursor: pointer;
}

.mh-fm-context-item:hover:not(.is-disabled) {
  background: var(--mh-accent-soft);
}

.mh-fm-context-item.is-danger { color: #b42318; }
.mh-fm-context-item.is-danger:hover:not(.is-disabled) { background: #fef3f2; }
.mh-fm-context-item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.mh-fm-context-sep {
  height: 1px;
  margin: 0.25rem 0.4rem;
  background: var(--mh-line);
}

.mh-fm-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(18, 20, 26, 0.42);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1rem;
  animation: mh-fm-fade-in 0.15s ease-out;
}

.mh-fm-editor-shell {
  width: min(72rem, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--mh-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(18, 20, 26, 0.2);
  animation: mh-fm-scale-in 0.16s ease-out;
}

.mh-fm-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-paper) 85%, #fff);
}

.mh-fm-editor-path {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--mh-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(48rem, 70vw);
}

.mh-fm-editor-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
  font-size: 0.7rem;
}

.mh-fm-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.mh-fm-editor-textarea {
  flex: 1;
  min-height: min(70vh, 40rem);
  width: 100%;
  border: 0;
  resize: none;
  padding: 1rem 1.1rem;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mh-ink);
  background: #fcfcfd;
  outline: none;
}

.mh-fm-editor-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(18, 20, 26, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mh-fm-editor-confirm-card {
  width: min(26rem, 100%);
  background: #fff;
  border: 1px solid var(--mh-line);
  padding: 1.1rem 1.15rem;
}

.mh-fm-editor-confirm-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.mh-fm-editor-confirm-card p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.mh-fm-pull-status {
  margin: 0;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--mh-paper) 80%, #fff);
  border: 1px solid var(--mh-line);
  padding: 0.75rem;
  overflow: auto;
  max-height: 7rem;
}

.mh-fm-pull-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.mh-fm-form-modal .mh-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--mh-ink);
}

.mh-fm-seed-textarea {
  min-height: 8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

@keyframes mh-fm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mh-fm-scale-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ── File manager transfer dock ── */
.mh-fm-xfer-dock {
  flex-shrink: 0;
  border: 1px solid var(--mh-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mh-accent-soft) 55%, #fff), #fff);
  padding: 0.55rem 0.75rem 0.65rem;
  animation: mh-fm-fade-in 0.15s ease-out;
}

.mh-fm-xfer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.mh-fm-xfer-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-ink);
}

.mh-fm-xfer-count {
  font-size: 0.7rem;
  color: var(--mh-mute);
}

.mh-fm-xfer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 9.5rem;
  overflow: auto;
}

.mh-fm-xfer-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  row-gap: 0.3rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--mh-line) 70%, #fff);
  background: #fff;
}

.mh-fm-xfer-meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.mh-fm-xfer-kind {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  flex-shrink: 0;
}

.mh-fm-xfer-label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--mh-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.mh-fm-xfer-status {
  font-size: 0.7rem;
  color: var(--mh-mute);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.mh-fm-xfer-item.is-done .mh-fm-xfer-status { color: var(--mh-accent-dark); }
.mh-fm-xfer-item.is-error .mh-fm-xfer-status { color: #b42318; }
.mh-fm-xfer-item.is-cancelled .mh-fm-xfer-status { color: var(--mh-mute); }

.mh-fm-xfer-track {
  grid-column: 1 / -1;
  height: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-line) 65%, #fff);
  overflow: hidden;
}

.mh-fm-xfer-track > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mh-accent);
  transition: width 0.18s ease;
}

.mh-fm-xfer-track.is-indeterminate > span {
  width: 35%;
  animation: mh-fm-xfer-indeterminate 1.1s ease-in-out infinite;
}

.mh-fm-xfer-item.is-done .mh-fm-xfer-track > span {
  width: 100%;
  background: var(--mh-accent-dark);
}

.mh-fm-xfer-item.is-error .mh-fm-xfer-track > span,
.mh-fm-xfer-item.is-cancelled .mh-fm-xfer-track > span {
  width: 100%;
  background: color-mix(in srgb, var(--mh-mute) 45%, #fff);
}

.mh-fm-xfer-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mh-fm-pull-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

@keyframes mh-fm-xfer-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.mh-fm-details-modal .mh-fm-details-reason {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
}

.mh-fm-details-grid {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.mh-fm-details-grid dt {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin: 0 0 0.15rem;
}

.mh-fm-details-grid dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--mh-ink);
  word-break: break-all;
}

.mh-fm-details-grid code {
  font-size: 0.8125rem;
}


/* —— Networking hub —— */
.mh-networking-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0;
}

.mh-networking-row {
  cursor: pointer;
}

.mh-networking-row:hover td {
  background: color-mix(in srgb, var(--mh-ink) 3%, transparent);
}

.mh-networking-order-form {
  max-width: 48rem;
}

.mh-networking-plan-cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.mh-networking-plan {
  text-align: left;
  width: 100%;
}

.mh-networking-detail-sticky {
  margin-bottom: 0.25rem;
}

.mh-networking-subhead {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 0.75rem;
}

.mh-networking-rules {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.mh-networking-rules li {
  border-bottom: 1px solid var(--mh-line);
}

@media (max-width: 720px) {
  .mh-networking-table thead {
    display: none;
  }

  .mh-networking-table tr {
    display: block;
    border-bottom: 1px solid var(--mh-line);
    padding: 0.75rem 0;
  }

  .mh-networking-table td {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    padding: 0.25rem 0.75rem;
  }

  .mh-networking-table td::before {
    content: attr(data-label);
    color: var(--mh-mute);
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 5.5rem;
  }

  .mh-networking-table td[data-label=""]::before {
    content: none;
  }
}

/* ============================================================
   Minecraft purchase / configure checkout
   ============================================================ */

.mh-purchase {
  /* Keep a short band under the nav — enough air for the back link,
     not a tall empty hero gap before the plan identity. */
  padding: clamp(2rem, 4.5vh, 2.75rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    linear-gradient(180deg, rgba(31, 163, 122, 0.06), transparent 12rem),
    var(--mh-paper);
  border-bottom: 1px solid var(--mh-line);
  min-height: 70vh;
}

.mh-purchase-inner {
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: 0 var(--mh-shell-pad);
}

.mh-purchase-head {
  margin-bottom: 1.75rem;
}

.mh-purchase-back {
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font-size: 0.9rem;
  padding: 0;
  margin: 0 0 1.1rem;
  cursor: pointer;
}

.mh-purchase-back:hover { color: var(--mh-ink); }

.mh-purchase-identity {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
}

.mh-purchase-icon {
  width: 88px;
  height: 88px;
}

.mh-purchase-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-purchase-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.75rem;
}

.mh-purchase-ram {
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border: 1px solid rgba(31, 163, 122, 0.25);
  padding: 0.28rem 0.5rem;
}

.mh-purchase-lede {
  margin: 0.65rem 0 0;
  max-width: 38rem;
  color: var(--mh-mute);
  line-height: 1.55;
  font-size: 1.02rem;
}

.mh-purchase-price {
  margin: 0.85rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.mh-purchase-price strong {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-purchase-price span {
  color: var(--mh-mute);
  font-size: 0.92rem;
}

@media (max-width: 639px) {
  .mh-purchase-identity { flex-direction: column; }
  .mh-purchase-icon { width: 72px; height: 72px; }
}

.mh-mc-configure {
  margin: 0;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 960px) {
  .mh-mc-configure { padding-bottom: 0; }
}

.mh-mc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .mh-mc-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 22rem);
    gap: 1.75rem;
  }
  .mh-mc-aside { position: sticky; top: 5.25rem; }
}

.mh-mc-main {
  border: 1px solid var(--mh-line);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.mh-mc-step {
  padding: 1.4rem 1.45rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-mc-step:last-child { border-bottom: 0; }

.mh-mc-step-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}

.mh-mc-step-num {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--mh-radius);
  background: var(--mh-ink);
  color: #f7f4ef;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mh-mc-step-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: Syne, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.mh-mc-step-hint {
  margin: 0 0 0.9rem;
  color: var(--mh-mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mh-mc-name-meta {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.4rem;
}

.mh-mc-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.mh-mc-chip {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--mh-radius);
  cursor: pointer;
}

.mh-mc-chip:hover { border-color: var(--mh-mute); color: var(--mh-ink); }

.mh-mc-chip.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

.mh-mc-sub-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mh-mc-sub-row .mh-input { flex: 1; }

.mh-mc-sub-suffix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--mh-mute);
  white-space: nowrap;
}

.mh-mc-avail { font-size: 0.8rem; margin: 0.4rem 0 0; }
.mh-mc-avail.is-ok { color: var(--mh-accent-dark); }
.mh-mc-avail.is-bad { color: #b42318; }

.mh-mc-loc-grid,
.mh-mc-soft-grid,
.mh-mc-cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (min-width: 640px) {
  .mh-mc-loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mh-mc-soft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-mc-cycle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mh-mc-loc-card,
.mh-mc-soft-card,
.mh-mc-cycle-card {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  border-radius: var(--mh-radius);
  padding: 0.85rem 0.9rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.mh-mc-loc-card:hover:not(:disabled),
.mh-mc-soft-card:hover,
.mh-mc-cycle-card:hover {
  border-color: var(--mh-mute);
}

.mh-mc-loc-card.is-active,
.mh-mc-soft-card.is-active,
.mh-mc-cycle-card.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-mc-loc-card.is-disabled,
.mh-mc-loc-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mh-mc-loc-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.mh-mc-loc-flag {
  flex: 0 0 auto;
}

/* Shared country flag icons (SVG assets under /assets/images/flags/). */
.mh-flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 0.9rem;
  object-fit: cover;
  border-radius: 0.2rem;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.mh-flag--sm {
  width: 1.35rem;
  height: 0.9rem;
}

.mh-flag--md {
  width: 1.7rem;
  height: 1.13rem;
}

.mh-loc-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.mh-ip-loc-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.35rem;
}

@media (min-width: 640px) {
  .mh-ip-loc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mh-ip-loc-card {
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  border-radius: var(--mh-radius);
  padding: 0.85rem 0.9rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.mh-ip-loc-card:hover {
  border-color: var(--mh-mute);
}

.mh-ip-loc-card.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-ip-loc-meta {
  margin-top: 0.25rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Software cards additionally show an icon; the icon and body come from the
   same visual language as the customer portal's Software tab (.mh-sw-card-*),
   just laid out in a row inside the storefront's existing card shell. */
.mh-mc-soft-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.mh-mc-loc-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--mh-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-mc-loc-meta {
  margin-top: 0.25rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* How full a region's nodes are, scannable at a glance: green with room to
   spare, amber getting busy, red near the same threshold that turns it
   unorderable server-side. */
.mh-mc-loc-usage { font-weight: 600; }
.mh-mc-loc-usage.is-open { color: var(--mh-ok); }
.mh-mc-loc-usage.is-busy { color: var(--mh-warn); }
.mh-mc-loc-usage.is-full { color: var(--mh-bad); }

.mh-mc-cycle-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 5.25rem;
}

.mh-mc-cycle-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-mc-cycle-price {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-mc-cycle-save {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--mh-accent-dark);
  font-weight: 600;
}

.mh-mc-cycle-save--quiet {
  color: var(--mh-mute);
  font-weight: 500;
}

.mh-mc-optional {
  margin-top: 1.1rem;
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
}

.mh-mc-optional summary {
  cursor: pointer;
  color: var(--mh-mute);
  font-size: 0.9rem;
  margin-bottom: 0.65rem;
}

.mh-mc-optional[open] summary { margin-bottom: 0.65rem; }

.mh-mc-aside { display: flex; flex-direction: column; gap: 0.85rem; }

.mh-mc-checkout {
  border: 1px solid var(--mh-line);
  background: #fff;
  padding: 1.25rem 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mh-checkout-due-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mh-checkout-due-hero {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--mh-accent-dark);
}

.mh-checkout-due-cycle {
  color: var(--mh-mute);
  font-size: 0.92rem;
  font-weight: 600;
}

.mh-checkout-renews {
  margin-top: 0.1rem;
}

.mh-checkout-due-currency {
  max-width: 100%;
}

.mh-checkout-due-currency .mh-currency-picker--form {
  gap: 0.25rem;
}

.mh-checkout-due-currency .mh-label,
.mh-checkout-due-currency .mh-currency-picker--form label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-checkout-due-currency select {
  max-width: 100%;
  width: 100%;
}

/* The pay column is narrow and sits at the right edge, so the menu tracks the
   field rather than growing past it. */
.mh-checkout-due-currency .mh-combo-menu {
  right: 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.mh-checkout-due-currency .mh-muted,
.mh-checkout-due-currency .mh-help {
  font-size: 0.72rem;
  line-height: 1.35;
}

.mh-checkout-credit {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--mh-ink);
  cursor: pointer;
  line-height: 1.35;
}

.mh-checkout-credit input {
  margin-top: 0.15rem;
}

.mh-checkout-credit-covers {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--mh-line);
  background: rgba(31, 163, 122, 0.06);
  font-size: 0.88rem;
  line-height: 1.35;
}

.mh-checkout-net-due {
  margin-top: 0.15rem;
}

.mh-checkout-pay-other {
  margin-top: 0.15rem;
}

.mh-mc-checkout .mh-mc-tos {
  margin: 0;
}

.mh-mc-checkout .mh-mc-tos a {
  color: var(--mh-ink);
}

.mh-mc-checkout-plan {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.mh-mc-checkout-icon {
  width: 64px;
  height: 64px;
}

.mh-mc-plan-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-mc-checkout-tier {
  margin: 0.2rem 0 0;
  color: var(--mh-mute);
  font-size: 0.88rem;
}

.mh-mc-aside-label {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-mc-spec-list,
.mh-mc-checkout-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.mh-mc-spec-list li,
.mh-mc-checkout-picks li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.mh-mc-spec-list span,
.mh-mc-checkout-picks span { color: var(--mh-mute); }

.mh-mc-checkout-picks {
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
}

.mh-mc-join-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.mh-mc-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
  font-size: 0.95rem;
}

.mh-mc-sum-total strong {
  color: var(--mh-accent-dark);
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.45rem;
}

.mh-mc-tos {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--mh-mute);
  cursor: pointer;
  line-height: 1.4;
}

.mh-mc-tos a { color: var(--mh-ink); text-decoration: underline; }

.mh-mc-submit { margin-top: 0.15rem; }

.mh-mc-checkout-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mh-mute);
  line-height: 1.4;
}

.mh-mc-checkout-includes {
  border-top: 1px solid var(--mh-line);
  padding-top: 0.85rem;
}

/* ============================================================
   Credit top-up — stepped form, amount presets, order summary
   ============================================================ */

.mh-topup-step {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
  padding: 1.15rem 1.25rem 1.25rem;
}

.mh-topup-step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.mh-topup-step-num {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-radius: var(--mh-radius);
  font-size: 0.8rem;
  font-weight: 700;
}

.mh-topup-step-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.mh-topup-step-hint {
  margin: 0.15rem 0 0;
  color: var(--mh-mute);
  font-size: 0.82rem;
  line-height: 1.4;
}

.mh-topup-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.mh-topup-preset {
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-ink);
  border-radius: var(--mh-radius);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms var(--mh-ease), background 120ms var(--mh-ease), color 120ms var(--mh-ease);
}

.mh-topup-preset:hover {
  border-color: rgba(31, 163, 122, 0.45);
}

.mh-topup-preset[aria-pressed='true'] {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

/* Symbol and figure read as one control, so the border lives on the wrapper. */
.mh-topup-amount-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mh-line);
  background: #fff;
  border-radius: var(--mh-radius);
}

.mh-topup-amount-field:focus-within {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

.mh-topup-amount-sym {
  display: inline-flex;
  align-items: center;
  padding: 0 0.4rem 0 0.85rem;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--mh-mute);
}

.mh-topup-amount-field .mh-input {
  border: 0;
  background: transparent;
  padding: 0.6rem 0.85rem 0.6rem 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-topup-amount-field .mh-input:focus {
  outline: none;
}

.mh-topup-amount-field .mh-input::-webkit-outer-spin-button,
.mh-topup-amount-field .mh-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mh-topup-amount-field .mh-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.mh-topup-convert {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  color: var(--mh-mute);
}

.mh-topup-error {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mh-bad);
}

.mh-topup-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.mh-topup-two select {
  max-width: 100%;
}

/* Field help here is a footnote, not body copy competing with the step title. */
.mh-topup-two .mh-help,
.mh-topup-two .mh-muted {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .mh-topup-two {
    grid-template-columns: 1fr;
  }
}

.mh-topup-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.mh-topup-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms var(--mh-ease), background 120ms var(--mh-ease);
}

.mh-topup-method:hover {
  border-color: rgba(31, 163, 122, 0.45);
}

.mh-topup-method[aria-selected='true'] {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mh-accent);
}

.mh-topup-method-name {
  font-weight: 700;
  font-size: 0.92rem;
}

.mh-topup-method-desc {
  color: var(--mh-mute);
  font-size: 0.75rem;
  line-height: 1.3;
}

.mh-topup-method[aria-selected='true'] .mh-topup-method-desc {
  color: var(--mh-accent-dark);
}

/* The gateway iframe has to stay mounted and measurable, so the loading
   shimmer sits over it rather than replacing it. */
.mh-topup-embed {
  position: relative;
  min-height: 3rem;
}

.mh-topup-embed--busy {
  min-height: 6.75rem;
}

.mh-topup-embed-overlay {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.mh-skeleton.mh-topup-skeleton {
  min-height: 6.75rem;
}

.mh-skeleton.mh-topup-skeleton--tall {
  min-height: 15rem;
}

.mh-topup-sum {
  list-style: none;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--mh-line);
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.mh-topup-sum li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.mh-topup-sum li > span {
  color: var(--mh-mute);
}

.mh-topup-sum li > strong {
  font-weight: 600;
  text-align: right;
}

.mh-topup-sum-total {
  border-top: 1px solid var(--mh-line);
  margin-top: 0.35rem;
  padding-top: 0.55rem;
}

.mh-topup-sum-total > span {
  color: var(--mh-ink);
  font-weight: 600;
}

.mh-topup-sum-total > strong {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.mh-topup-requote {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mh-mute);
}

/* Saved cards read as a gallery, not a stack of full-width bars. */
.mh-pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}

.mh-pm-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
}

.mh-pm-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Wide money tables collapse into labelled rows rather than sideways scroll. */
@media (max-width: 720px) {
  .mh-table--stack thead {
    display: none;
  }

  .mh-table--stack tr {
    display: grid;
    gap: 0.3rem;
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--mh-line);
  }

  .mh-table--stack tr:last-child {
    border-bottom: 0;
  }

  .mh-table--stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    padding: 0;
  }

  .mh-table--stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--mh-mute);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

.mh-mc-mobile-bar {
  display: none;
}

/* Full-width pay flows (checkout + credit) — room for mobile CTA bar */
.mh-pay-page {
  width: 100%;
  max-width: none;
}

/* Primary Pay lives in sticky aside (desktop) or mobile bar — not duplicated mid-form */
@media (min-width: 960px) {
  .mh-pay-page .mh-pay-inline-cta {
    display: none;
  }
}

@media (max-width: 959px) {
  .mh-pay-page {
    padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
  }

  .mh-pay-page .mh-pay-inline-cta {
    display: none;
  }

  .mh-mc-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem var(--mh-shell-pad) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 244, 239, 0.96);
    border-top: 1px solid var(--mh-line);
    backdrop-filter: blur(8px);
  }

  .mh-mc-mobile-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
  }

  .mh-mc-mobile-price strong {
    font-family: Syne, system-ui, sans-serif;
    font-size: 1.15rem;
  }

  .mh-mc-mobile-price span {
    color: var(--mh-mute);
    font-size: 0.8rem;
  }

  .mh-mc-checkout .mh-mc-submit { display: none; }
}

/* ============================================================
   Bare Metal conversion page
   ============================================================ */

/* Steps and form are one module: read the process, fill the form beside it */
.mh-bm-quote-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 960px) {
  .mh-bm-quote-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1fr);
    gap: 3rem;
  }
}

.mh-bm-steps {
  display: grid;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.mh-bm-step--note {
  padding-top: 1.25rem;
  border-top: 1px solid var(--mh-line);
}

.mh-bm-step--note p {
  margin: 0 0 0.4rem;
  color: var(--mh-mute);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mh-bm-step--note p:last-child { margin-bottom: 0; }

.mh-bm-step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.mh-bm-step-n {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-weight: 700;
  font-size: 0.9rem;
}

.mh-bm-step strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: Syne, system-ui, sans-serif;
}

.mh-bm-step p {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mh-bm-form {
  display: grid;
  gap: 0.85rem;
}

.mh-bm-form-row { display: grid; gap: 0.3rem; }

.mh-bm-form-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 560px) {
  .mh-bm-form-grid { grid-template-columns: 1fr 1fr; }
}

.mh-bm-success h3 {
  font-family: Syne, system-ui, sans-serif;
  margin: 0 0 0.5rem;
}

.mh-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mh-bm-form { position: relative; }

/* ---- Software marketplace ---- */
.mh-mkt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.mh-mkt-search { flex: 1; min-width: 12rem; max-width: 28rem; }
.mh-mkt-sort { width: auto; min-width: 11rem; }
.mh-mkt-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mh-mkt-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .mh-mkt-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1200px) { .mh-mkt-grid { grid-template-columns: repeat(5, 1fr); } }
.mh-mkt-card {
  display: flex;
  gap: 0.75rem;
  text-align: left;
  padding: 0.85rem;
  border: 1px solid var(--mh-border, #e5e2da);
  border-radius: 12px;
  background: var(--mh-panel, #fff);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  height: 100%;
  min-width: 0;
}
.mh-mkt-card:hover {
  border-color: var(--mh-accent, #1a7a4c);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.mh-mkt-card-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(26,122,76,.08);
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
}
.mh-mkt-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.mh-mkt-card-fallback { font-weight: 700; color: var(--mh-accent, #1a7a4c); }
.mh-mkt-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mh-mkt-card-title {
  font-weight: 600;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
}
.mh-mkt-card-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mh-mkt-card-desc {
  color: var(--mh-mute, #6b675e);
  font-size: 0.85rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0.2rem 0 0.45rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex: 1;
}
.mh-mkt-pills { display: flex;
  align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; }
.mh-mkt-pill {
  font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 999px;
  background: rgba(0,0,0,.05); color: var(--mh-mute, #6b675e);
}
.mh-mkt-badge {
  font-size: 0.68rem; padding: 0.08rem 0.4rem; border-radius: 999px;
  background: rgba(0,0,0,.08); font-weight: 600; text-transform: lowercase;
}
.mh-mkt-badge--premium { background: #f6e7b2; color: #7a5b00; }
.mh-mkt-badge--release { background: rgba(26,122,76,.15); color: #145c39; }
.mh-mkt-badge--beta { background: #fde8c8; color: #8a4b00; }
.mh-mkt-badge--alpha { background: #f8d4d4; color: #8a1f1f; }
.mh-mkt-badge--danger { background: #f8d4d4; color: #8a1f1f; }
.mh-mkt-pager {
  display: flex; gap: 0.4rem; align-items: center; justify-content: center; flex-wrap: wrap;
}
.mh-mkt-error, .mh-mkt-warn {
  border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.9rem;
}
.mh-mkt-error { background: #fdecec; color: #8a1f1f; display: grid; gap: 0.5rem; }
.mh-mkt-warn { background: #fff6e5; color: #7a4b00; }
.mh-mkt-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80;
  display: grid; place-items: center; padding: 1rem;
}
.mh-mkt-modal {
  width: min(640px, 100%); max-height: min(88vh, 840px); overflow: auto;
  background: var(--mh-panel, #fff); border-radius: 16px; padding: 1.1rem 1.2rem;
  display: grid; gap: 0.85rem;
}
.mh-mkt-modal-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; min-width: 0; }
.mh-mkt-modal-head h3 {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mh-mkt-versions-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; }
.mh-mkt-version-list { display: grid; gap: 0.4rem; max-height: 16rem; overflow: auto; }
.mh-mkt-version {
  text-align: left; border: 1px solid var(--mh-border, #e5e2da); border-radius: 10px;
  padding: 0.55rem 0.7rem; background: #fff; cursor: pointer;
}
.mh-mkt-version.is-selected { border-color: var(--mh-accent, #1a7a4c); box-shadow: inset 0 0 0 1px var(--mh-accent, #1a7a4c); }
.mh-mkt-version.is-incompatible { opacity: 0.55; }
.mh-mkt-version-title {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.mh-mkt-modes { display: grid; gap: 0.5rem; }
.mh-mkt-mode {
  display: flex; gap: 0.65rem; align-items: flex-start; border: 1px solid var(--mh-border, #e5e2da);
  border-radius: 12px; padding: 0.7rem 0.8rem; cursor: pointer;
}
.mh-mkt-mode.is-selected { border-color: var(--mh-accent, #1a7a4c); }
.mh-mkt-mode--danger.is-selected { border-color: #b33; }
.mh-mkt-check { display: flex; gap: 0.45rem; align-items: center; font-size: 0.9rem; }
.mh-mkt-modal-actions { display: flex;
  align-items: center; justify-content: flex-end; gap: 0.5rem; }
.mh-mkt-progress {
  border-radius: 10px; padding: 0.65rem 0.8rem; background: rgba(26,122,76,.08); font-size: 0.9rem;
}
.mh-mkt-context {
  display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0.85rem; border: 1px solid var(--mh-border, #e5e2da); border-radius: 12px;
  background: var(--mh-panel, #fff); font-size: 0.9rem;
}
.mh-mkt-installed-row {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--mh-border, #e5e2da); border-radius: 12px;
  background: var(--mh-panel, #fff); padding: 0.7rem 0.85rem;
}
.mh-mkt-installed-icon {
  width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
}
.mh-mp-hero .mh-mkt-card-icon {
  width: 3rem; height: 3rem;
}

/* Server software manager: catalog grid, current-software card, change wizard */
.mh-mkt-version.is-blocked { opacity: 0.5; cursor: not-allowed; }
.mh-sw-current {
  display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap;
}
.mh-sw-current > .min-w-0 { flex: 1; min-width: 12rem; }
.mh-sw-grid {
  display: grid; gap: 0.75rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mh-sw-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .mh-sw-grid { grid-template-columns: 1fr 1fr 1fr; } }
.mh-sw-card {
  display: flex; gap: 0.7rem; align-items: flex-start; text-align: left;
  border: 1px solid var(--mh-border, #e5e2da); border-radius: 12px;
  background: var(--mh-panel, #fff); padding: 0.75rem; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.mh-sw-card:hover { border-color: var(--mh-accent, #1a7a4c); transform: translateY(-1px); }
.mh-sw-card.is-selected { border-color: var(--mh-accent, #1a7a4c); box-shadow: inset 0 0 0 1px var(--mh-accent, #1a7a4c); }
.mh-sw-card.is-current { background: rgba(26,122,76,.05); }
.mh-sw-card-icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--mh-paper, #f6f4ef); font-weight: 700;
}
.mh-sw-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.mh-cloud-os-icon {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--mh-ink, #1a1a1a) 10%, transparent);
  padding: 6px;
  box-sizing: border-box;
}
.mh-cloud-os-icon img { width: 100%; height: 100%; object-fit: contain; }
.mh-sw-card-body { min-width: 0; flex: 1; }
.mh-sw-card-title {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
  font-weight: 600;
  min-width: 0;
}
.mh-sw-card-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mh-sw-card-desc {
  font-size: 0.85rem; color: var(--mh-muted, #6b6759); margin: 0.2rem 0 0.35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mh-sw-group-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mh-muted, #6b6759); font-weight: 600;
}
.mh-sw-modal { max-width: 56rem; }
.mh-sw-panel .mh-sw-wizard { max-height: none; }
.mh-sw-wizard { display: grid; gap: 0.75rem; max-height: 70vh; overflow-y: auto; }
.mh-sw-startup {
  display: flex; gap: 0.4rem; align-items: baseline; margin-top: 0.35rem;
  font-size: 0.8rem; min-width: 0;
}
.mh-sw-startup code {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--mh-paper, #f6f4ef); padding: 0.1rem 0.35rem; border-radius: 6px;
}
.mh-sw-mismatch {
  display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}

/* ==========================================================================
   Server overview
   The header owns identity, so this page is state and work. Sharp radii and
   warm paper are the house style; the smoothness comes from motion and
   spacing rhythm rather than rounder corners.
   ========================================================================== */

.mh-ov {
  display: grid;
  gap: var(--mh-space-3);
}

.mh-ov-heading {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}

/* --- Notices ------------------------------------------------------------ */

.mh-ov-notices {
  display: grid;
  gap: var(--mh-space-2);
}

.mh-ov-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-3);
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  border: 1px solid var(--mh-line);
  border-left-width: 3px;
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  animation: mh-ov-rise 240ms var(--mh-ease) both;
}

.mh-ov-notice-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  font-size: 0.9rem;
}

.mh-ov-notice-text span { color: var(--mh-mute); }

.mh-ov-notice--bad { border-left-color: var(--mh-bad); background: rgba(139, 46, 46, 0.05); }
.mh-ov-notice--bad strong { color: var(--mh-bad); }
.mh-ov-notice--warn { border-left-color: #c49226; background: rgba(196, 146, 38, 0.07); }
.mh-ov-notice--warn strong { color: var(--mh-warn); }
.mh-ov-notice--info { border-left-color: var(--mh-accent); background: var(--mh-accent-soft); }
.mh-ov-notice--info strong { color: var(--mh-ok); }

/* --- Stats panel --------------------------------------------------------- */

.mh-ov-stats {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  box-shadow: var(--mh-shadow-sm);
  transition: opacity 240ms var(--mh-ease);
}

.mh-ov-stats.is-offline { opacity: 0.6; }

/* Dividers are 1px grid gaps showing the panel colour through, rather than
   per-cell borders: the row count changes with the breakpoint, and hand-placed
   borders cannot follow a grid that wraps. */
.mh-ov-cells {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--mh-line);
}

.mh-ov-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem 0;
  min-width: 0;
  overflow: hidden;
  background: var(--mh-surface);
}

.mh-ov-cell-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mh-mute);
}

.mh-ov-cell-value {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mh-ov-cell-of {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mh-mute);
}

.mh-ov-cell-secondary {
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-ov-cell.is-high .mh-ov-cell-value { color: var(--mh-bad); }

/* Bleeds to the cell edges so the row of charts reads as one strip. */
.mh-ov-spark {
  display: block;
  width: calc(100% + 2rem);
  height: 40px;
  margin: 0.5rem -1rem 0;
  overflow: visible;
}

.mh-ov-spark--empty {
  height: 40px;
  margin-top: 0.5rem;
}

.mh-ov-spark-area { fill: rgba(31, 163, 122, 0.12); stroke: none; }

.mh-ov-spark-line {
  fill: none;
  stroke: var(--mh-accent);
  stroke-width: 1.25;
  /* The viewBox is stretched by CSS; keep the stroke from stretching too. */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.mh-ov-cell.is-high .mh-ov-spark-line { stroke: var(--mh-bad); }
.mh-ov-cell.is-high .mh-ov-spark-area { fill: rgba(139, 46, 46, 0.12); }

.mh-ov-cell--wide { padding-bottom: 0.9rem; }

.mh-ov-players {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.mh-ov-player {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  font-size: 0.75rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
  white-space: nowrap;
}

.mh-ov-player--more {
  font: inherit;
  font-size: 0.75rem;
  color: var(--mh-accent);
  cursor: pointer;
}

.mh-ov-stats-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
  font-size: 0.8rem;
  color: var(--mh-mute);
}

.mh-ov-stats-fact + .mh-ov-stats-fact::before {
  content: "·";
  margin-right: 1rem;
  color: var(--mh-line);
}

/* --- State gates -------------------------------------------------------- */

.mh-ov-gate {
  display: grid;
  gap: var(--mh-space-2);
  justify-items: center;
  text-align: center;
  padding: clamp(1.75rem, 5vw, 3rem) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  animation: mh-ov-rise 260ms var(--mh-ease) both;
}

.mh-ov-gate--warn { border-color: rgba(196, 146, 38, 0.45); background: rgba(196, 146, 38, 0.05); }
.mh-ov-gate--bad { border-color: rgba(139, 46, 46, 0.4); background: rgba(139, 46, 46, 0.04); }
.mh-ov-gate--idle { background: var(--mh-surface-sunk); }

.mh-ov-gate-title {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.mh-ov-gate-body {
  margin: 0;
  max-width: 46ch;
  color: var(--mh-mute);
  font-size: 0.9rem;
}

.mh-ov-gate-actions {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.mh-ov-gate-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--mh-line);
  border-top-color: var(--mh-accent);
  border-radius: 50%;
  animation: mh-ov-spin 900ms linear infinite;
}

/* --- Work row ------------------------------------------------------------ */

.mh-ov-work {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--mh-space-3);
  align-items: start;
}

.mh-ov-work--single { grid-template-columns: minmax(0, 1fr); }

.mh-ov-settings {
  display: grid;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
}

.mh-ov-settings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-ov-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--mh-space-2);
}

.mh-ov-field { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.mh-ov-field--wide { grid-column: 1 / -1; }

.mh-ov-field-hint {
  font-size: 0.72rem;
  color: var(--mh-mute);
}

.mh-ov-settings-actions {
  display: flex;
  gap: var(--mh-space-2);
  align-items: center;
}

/* --- World optimization -------------------------------------------------- */

.mh-ov-trim {
  display: grid;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
}

.mh-ov-trim-lede {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mh-mute);
}

.mh-ov-trim-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mh-space-2);
}

.mh-ov-trim-stat {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
}

.mh-ov-trim-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-ov-trim-stat-label {
  font-size: 0.72rem;
  color: var(--mh-mute);
}

/* Locked, not hidden: a free customer who can see the switch and why it is held
   knows what upgrading buys. */
.mh-ov-trim-locked {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--mh-space-2);
  padding: 0.9rem 1rem;
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  font-size: 0.86rem;
  line-height: 1.55;
}

.mh-ov-trim-locked strong { display: block; color: var(--mh-ink); }
.mh-ov-trim-locked span { color: var(--mh-mute); }

@media (max-width: 720px) {
  .mh-ov-trim-locked { grid-template-columns: 1fr; }
}

.mh-ov-skeleton {
  height: 5rem;
  border-radius: var(--mh-radius);
  background: linear-gradient(
    90deg,
    var(--mh-surface-sunk) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    var(--mh-surface-sunk) 75%
  );
  background-size: 200% 100%;
  animation: mh-ov-shimmer 1.4s linear infinite;
}

/* --- About sidebar ------------------------------------------------------- */

.mh-ov-about {
  display: grid;
  gap: var(--mh-space-2);
  padding: var(--mh-space-3);
  align-content: start;
}

.mh-ov-about-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-ov-about-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.mh-ov-about-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
  font-size: 0.85rem;
}

.mh-ov-about-row dt { color: var(--mh-mute); white-space: nowrap; }
.mh-ov-about-row dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.mh-ov-about-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mh-mute);
  cursor: pointer;
  background: none;
  border: 0;
  border-top: 1px solid var(--mh-line);
}

.mh-ov-about-toggle:hover { color: var(--mh-ink); }

.mh-ov-about-more {
  display: grid;
  gap: var(--mh-space-2);
  animation: mh-ov-fade 200ms var(--mh-ease) both;
}

/* --- Motion ------------------------------------------------------------- */

@keyframes mh-ov-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes mh-ov-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mh-ov-spin {
  to { transform: rotate(360deg); }
}

@keyframes mh-ov-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes mh-ov-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* --- Responsive --------------------------------------------------------- */

/* Five across only survives while each cell can still hold its value. Below
   that players takes a row of its own so the four meters stay even and the
   panel never has a hole in it. */
@media (max-width: 1040px) {
  .mh-ov-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mh-ov-cell--wide { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .mh-ov-work { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .mh-ov-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-ov-cell-value { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-ov-notice,
  .mh-ov-gate,
  .mh-ov-about-more { animation: none; }
  .mh-wh-state.is-transitional .mh-wh-dot,
  .mh-ov-gate-spinner,
  .mh-ov-skeleton { animation: none; }
  .mh-ov-stats,
  .mh-wh-address { transition: none; }
  .mh-wh-address .mh-wh-copy { transition: none; }
}

/* ==========================================================================
   Plan swap and service billing
   ========================================================================== */

.mh-swap {
  display: grid;
  gap: var(--mh-space-3);
}

.mh-swap-ladder {
  display: grid;
  gap: 0.4rem;
}

.mh-swap-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  background: var(--mh-line);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

.mh-swap-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mh-accent);
  border: 3px solid var(--mh-surface);
  box-shadow: 0 0 0 1px var(--mh-accent);
  cursor: grab;
}

.mh-swap-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mh-accent);
  border: 3px solid var(--mh-surface);
  box-shadow: 0 0 0 1px var(--mh-accent);
  cursor: grab;
}

.mh-swap-range:disabled { opacity: 0.5; cursor: default; }

/* The thumb travels between its own radii, so labels are placed at the same
   fractions rather than spaced evenly, which drifts apart at both ends. */
.mh-swap-ticks {
  position: relative;
  height: 2rem;
  margin: 0 10px;
}

.mh-swap-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0.15rem 0.2rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mh-mute);
  text-align: center;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.mh-swap-tick.is-selected { color: var(--mh-accent); }

/* A dot under the size you are paying for today: the ladder needs a
   "you are here" that survives the slider moving somewhere else. */
.mh-swap-tick.is-current { color: var(--mh-ink); }
.mh-swap-tick.is-current::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 0.2rem auto 0;
  border-radius: 50%;
  background: var(--mh-accent);
}

.mh-swap-detail {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mh-space-3);
  flex-wrap: wrap;
  padding: var(--mh-space-2) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunk);
}

.mh-swap-plan { display: grid; gap: 0.1rem; min-width: 0; }

.mh-swap-label,
.mh-bill-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mh-mute);
}

.mh-swap-name {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-swap-specs { font-size: 0.82rem; color: var(--mh-mute); }

.mh-swap-price { display: grid; gap: 0.05rem; justify-items: end; text-align: right; }

.mh-swap-amount {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.mh-swap-cycle,
.mh-swap-was { font-size: 0.75rem; color: var(--mh-mute); }

.mh-swap-hint { margin: 0; font-size: 0.85rem; color: var(--mh-mute); }

.mh-swap-quote {
  display: grid;
  gap: 0.2rem;
  padding: var(--mh-space-2) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  border-left: 3px solid var(--mh-accent);
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
  font-size: 0.9rem;
}

.mh-swap-quote-line {
  display: flex;
  justify-content: space-between;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
}

.mh-swap-error { color: var(--mh-bad); }

.mh-swap-actions { display: flex;
  align-items: center; gap: var(--mh-space-2); flex-wrap: wrap; }

/* --- Billing tab --------------------------------------------------------- */

.mh-bill { display: grid; gap: var(--mh-space-3); }

.mh-bill-next {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mh-space-3);
  flex-wrap: wrap;
  padding: var(--mh-space-3) var(--mh-space-4);
}

.mh-bill-next-main { display: grid; gap: 0.15rem; }

.mh-bill-amount-value {
  font-family: Syne, system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.mh-bill-next-side {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
  text-align: right;
}

.mh-bill-next-actions { display: flex;
  align-items: center; gap: var(--mh-space-2); }

.mh-bill-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--mh-space-3);
  align-items: start;
}

.mh-bill-invoices {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mh-bill-invoice {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mh-line);
}

.mh-bill-invoice:last-child { border-bottom: 0; }

.mh-bill-invoice-main {
  display: grid;
  gap: 0.05rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.mh-bill-invoice-no { font-weight: 600; font-size: 0.88rem; }
.mh-bill-invoice-main:hover .mh-bill-invoice-no { color: var(--mh-accent); }

.mh-bill-invoice-amount {
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  white-space: nowrap;
}

.mh-bill-facts { display: grid; gap: 0.4rem; margin: 0 0 var(--mh-space-3); }

.mh-bill-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
  font-size: 0.85rem;
}

.mh-bill-facts dt { color: var(--mh-mute); }
.mh-bill-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .mh-bill-columns { grid-template-columns: minmax(0, 1fr); }
  .mh-bill-next-side { justify-items: start; text-align: left; }
  .mh-swap-tick { font-size: 0.66rem; }
}

.mh-bill-credit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mh-ok);
}

/* ==========================================================================
   Data tab — backups and databases
   Two tabs of card stacks became one page of tables. The summary answers
   "is my world safe?" before anything else on the page speaks.
   ========================================================================== */

.mh-data {
  display: grid;
  gap: var(--mh-space-4);
}

/* --- Summary strip --------------------------------------------------------
   Four facts, equal weight, no chrome around them. Tone only appears when
   something is wrong, so a healthy server reads as calm. */

.mh-data-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--mh-line);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  overflow: hidden;
}

.mh-data-summary dd { margin: 0; }

.mh-data-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: var(--mh-surface);
}

.mh-data-chip-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mh-mute);
}

.mh-data-chip-value {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
}

.mh-data-chip-hint {
  font-size: 0.76rem;
  color: var(--mh-mute);
}

.mh-data-chip--warn { background: #fdf6e8; }
.mh-data-chip--warn .mh-data-chip-value { color: var(--mh-warn); }
.mh-data-chip--bad { background: #fbeeee; }
.mh-data-chip--bad .mh-data-chip-value { color: var(--mh-bad); }

/* --- Sections ------------------------------------------------------------ */

.mh-data-section {
  display: grid;
  gap: var(--mh-space-3);
  scroll-margin-top: 6rem;
}

.mh-data-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-data-head-text {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.mh-data-head-text h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  margin: 0;
}

.mh-data-head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mh-data-note {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--mh-warn);
  background: #fdf6e8;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* --- Tables --------------------------------------------------------------- */

.mh-data-tablewrap { overflow-x: auto; }

.mh-data-table td { vertical-align: middle; }
.mh-data-table tr:last-child td { border-bottom: none; }

.mh-data-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}

.mh-data-name-text {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-data-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* A backup being written to is not a row you may act on, and it should not
   look like one. */
.mh-data-row--pending td { opacity: 0.72; }

.mh-data-skeleton {
  display: grid;
  gap: 0.6rem;
  padding: var(--mh-space-3);
}

.mh-data-skeleton-row {
  min-height: 2.4rem;
  border: none;
}

/* --- Database connection details ------------------------------------------ */

.mh-data-detail-row td {
  background: var(--mh-surface-sunk);
  padding: var(--mh-space-3) 0.75rem;
}

.mh-data-detail {
  display: grid;
  gap: 0.6rem;
}

.mh-data-detail-grid {
  display: grid;
  gap: 0.35rem;
}

.mh-data-detail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-data-detail-note { margin: 0; }

/* --- Automatic backups line ----------------------------------------------- */

.mh-data-auto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-2);
  margin: 0;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--mh-line);
  border-radius: var(--mh-radius);
  font-size: 0.86rem;
  color: var(--mh-mute);
}

.mh-data-auto strong { color: var(--mh-ink); }

/* --- Modals ---------------------------------------------------------------
   Wider than a confirm dialog because these carry fields, not a question. */

.mh-data-modal { max-width: 32rem; }

.mh-data-form {
  display: grid;
  gap: 0.5rem;
}

.mh-data-form p { margin: 0; }
.mh-data-form code { overflow-wrap: anywhere; }

.mh-data-problem {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mh-bad);
}

.mh-data-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0;
  cursor: pointer;
}

.mh-data-check > span {
  display: grid;
  gap: 0.1rem;
}

.mh-data-advanced {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

.mh-data-advanced textarea { width: 100%; }

.mh-data-consequence {
  display: grid;
  gap: 0.5rem;
}

.mh-data-consequence p { margin: 0; line-height: 1.5; }

.mh-data-consequence-warn {
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--mh-warn);
  background: #fdf6e8;
}

/* --- One-time credentials -------------------------------------------------
   The only moment a password exists on screen. It gets the whole dialog. */

.mh-data-creds { max-width: 34rem; }

.mh-data-creds-warn {
  margin: 0 0 var(--mh-space-2);
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--mh-warn);
  background: #fdf6e8;
  font-size: 0.86rem;
  line-height: 1.5;
}

.mh-data-creds-fields {
  display: grid;
  gap: 0.35rem;
  max-height: 22rem;
  overflow-y: auto;
}

@media (max-width: 780px) {
  .mh-data-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-data-actions { justify-content: flex-start; }
}

/* --- Schedules ------------------------------------------------------------
   A schedule card leads with when, in words, then the steps. The pipeline is
   an ordered list because the order is the point: warn, wait, restart. */

.mh-sched { scroll-margin-top: 6rem; }

.mh-sched-skeleton { padding: var(--mh-space-3); display: grid; gap: 0.5rem; }
.mh-sched-skeleton-row { min-height: 4.5rem; }

.mh-sched-card {
  padding: var(--mh-space-3);
  display: grid;
  gap: var(--mh-space-2);
}

/* Paused schedules stay legible but stop competing with the live ones. */
.mh-sched-card.is-paused { background: #f4f1ec; }

.mh-sched-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mh-space-2);
}

.mh-sched-card-title { display: grid; gap: 0.3rem; min-width: 0; }
.mh-sched-card-title > .flex > span:first-child,
.mh-sched-card-title > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mh-sched-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.mh-sched-runs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-4);
  margin: 0;
  padding-top: 0.15rem;
  border-top: 1px solid var(--mh-line);
}

.mh-sched-runs div { display: grid; gap: 0.1rem; }
.mh-sched-runs dt { margin: 0; }
.mh-sched-runs dd { margin: 0; font-variant-numeric: tabular-nums; }

.mh-sched-failure {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--mh-bad);
  background: #fbf0ef;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* --- Steps ---------------------------------------------------------------- */

.mh-sched-tasks { display: grid; gap: var(--mh-space-2); justify-items: start; }

.mh-sched-tasks-empty {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: var(--mh-space-2);
  border: 1px dashed var(--mh-line);
}

.mh-sched-tasks-empty p { margin: 0; }

.mh-sched-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  width: 100%;
}

.mh-sched-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-space-2);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
}

.mh-sched-step-num {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mh-line);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mh-sched-step-body { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 14rem; }
.mh-sched-step-what { overflow-wrap: anywhere; }

.mh-sched-step-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

/* --- Forms ---------------------------------------------------------------- */

.mh-sched-modal { max-width: 34rem; }

.mh-sched-form { display: grid; gap: 0.5rem; }
.mh-sched-form p { margin: 0; }

.mh-sched-field { display: grid; gap: 0.35rem; }

.mh-sched-presets { display: flex;
  align-items: center; flex-wrap: wrap; gap: 0.3rem; }

.mh-sched-chip {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--mh-line);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.mh-sched-chip.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
}

.mh-sched-cron {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
}

.mh-sched-cron-field { display: grid; gap: 0.2rem; min-width: 0; }

.mh-sched-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.4rem 0;
  cursor: pointer;
}

.mh-sched-toggle > span { display: grid; gap: 0.1rem; }

.mh-sched-problem {
  margin: 0;
  color: var(--mh-bad);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 780px) {
  .mh-sched-cron { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-sched-card-actions { justify-content: flex-start; }
  .mh-sched-step-actions { margin-left: 0; }
}

/* ============================================================
   Sitewide mobile compatibility (phone + narrow tablet)
   ============================================================ */

.mh-wh-tab-select {
  display: none;
  width: 100%;
  margin: 0 0 0.35rem;
}

.mh-wh-tab-select label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.35rem;
}

.mh-wh-tab-select select {
  width: 100%;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fffefb;
  color: var(--mh-ink);
}

/* ── Support: hub, inbox, composer, thread ───────────────────────────────
   Four routes sharing one vocabulary: mh-sup-* is page furniture, mh-trow /
   mh-tstatus / mh-tprio are the ticket primitives reused in every list.
   ─────────────────────────────────────────────────────────────────────── */

.mh-sup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mh-sup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.mh-sup-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.85rem;
  margin: 0;
  color: var(--mh-ink);
}

.mh-sup-lede {
  margin: 0.25rem 0 0;
}

.mh-sup-lede-tight {
  margin: -0.25rem 0 1rem;
}

.mh-sup-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-sup-tabs {
  margin-bottom: 0.25rem;
}

/* Three chips, not the dashboard's five. */
.mh-ops-strip.mh-sup-strip {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 0;
}

a.mh-ops-chip {
  display: block;
  text-decoration: none;
}

.mh-sup-attention {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
}

.mh-sup-attention-copy {
  min-width: 0;
}

.mh-sup-hub-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .mh-sup-hub-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
}

.mh-sup-hub-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mh-sup-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.mh-sup-list-foot {
  margin: 0.6rem 0 0;
}

.mh-sup-more {
  display: flex;
  justify-content: center;
}

/* Ticket rows ------------------------------------------------------------ */

.mh-trow {
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.mh-trow:last-child {
  border-bottom: 0;
}

.mh-trow:hover {
  background: rgba(31, 163, 122, 0.06);
}

.mh-trow.is-active {
  background: var(--mh-accent-soft);
}

.mh-trow.has-unread .mh-trow-subject {
  font-weight: 700;
}

.mh-trow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mh-trow-subject {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.mh-trow-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-trow-num {
  font-variant-numeric: tabular-nums;
}

.mh-trow-time {
  margin-left: auto;
}

.mh-trow-preview {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--mh-mute);
  max-width: 100%;
}

.mh-trow-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-skeleton.mh-sup-skeleton {
  min-height: 4.5rem;
}

.mh-skeleton.mh-sup-skeleton--head {
  min-height: 7rem;
}

.mh-skeleton.mh-sup-skeleton--thread {
  min-height: 24rem;
}

.mh-sup-unread {
  flex-shrink: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--mh-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ticket badges ---------------------------------------------------------- */

.mh-tstatus,
.mh-tprio,
.mh-tchannel,
.mh-tdept {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-ink);
  white-space: nowrap;
}

.mh-tstatus--open {
  border-color: rgba(31, 163, 122, 0.45);
  background: var(--mh-accent-soft);
  color: var(--mh-ok);
}

/* "Awaiting you" is the one status that is a to-do, so it looks like one. */
.mh-tstatus--you {
  border-color: rgba(138, 90, 18, 0.45);
  background: #fbf1de;
  color: var(--mh-warn);
}

.mh-tstatus--staff {
  border-color: var(--mh-line);
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
}

.mh-tstatus--hold {
  border-color: var(--mh-line);
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
}

.mh-tstatus--closed {
  border-color: var(--mh-line);
  background: transparent;
  color: var(--mh-mute);
}

.mh-tprio--critical {
  border-color: rgba(139, 46, 46, 0.5);
  background: rgba(139, 46, 46, 0.08);
  color: var(--mh-bad);
}

.mh-tprio--high {
  border-color: rgba(138, 90, 18, 0.45);
  background: #fbf1de;
  color: var(--mh-warn);
}

.mh-tprio--normal,
.mh-tprio--low {
  color: var(--mh-mute);
}

.mh-tchannel {
  border-color: #c9b896;
  background: #f7f0e2;
}

.mh-tdept {
  text-transform: none;
  font-weight: 600;
  color: var(--mh-mute);
}

/* Hub side panels -------------------------------------------------------- */

.mh-sup-dept-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mh-sup-dept-name {
  display: block;
  font-weight: 600;
}

.mh-sup-dept-sla {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mh-accent);
}

.mh-sup-note {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--mh-line);
}

.mh-sup-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mh-sup-link {
  display: block;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: inherit;
  text-decoration: none;
}

.mh-sup-link:hover {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-sup-link-title {
  display: block;
  font-weight: 600;
}

/* Support without a ticket ----------------------------------------------
   What a free account sees instead of a composer it cannot use: why, then
   the community, then the guides. Sized to read as the route rather than as
   a refusal notice.
   ─────────────────────────────────────────────────────────────────────── */

/* Plain surface with an accent edge: the attention banner above it is the
   green one, and two washes stacked read as one shouting block. */
.mh-sup-public {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.35rem 1.5rem;
  border-left: 4px solid var(--mh-accent);
}

.mh-sup-public-copy {
  min-width: 0;
  max-width: 46rem;
}

.mh-sup-public-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

.mh-sup-notice {
  padding: 0.85rem 1.15rem;
  border-left: 4px solid var(--mh-warn);
  background: #fbf1de;
}

.mh-sup-notice--compact {
  font-size: 0.9rem;
}

.mh-sup-channels {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .mh-sup-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mh-sup-channel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  color: inherit;
  text-decoration: none;
}

.mh-sup-channel:hover {
  border-color: var(--mh-accent);
}

.mh-sup-channel--discord:hover {
  border-color: #5865f2;
}

.mh-sup-channel-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--mh-surface-sunk);
  color: var(--mh-ink);
}

.mh-sup-channel--discord .mh-sup-channel-icon {
  background: rgba(88, 101, 242, 0.12);
}

.mh-sup-channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.mh-sup-channel-title {
  font-weight: 700;
}

/* A span styled as a button: the whole card is already the link. */
.mh-sup-channel-cta {
  flex-shrink: 0;
  pointer-events: none;
}

.mh-sup-guides {
  margin-top: 0.25rem;
}

.mh-sup-guides-skeleton {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

@media (max-width: 720px) {
  .mh-sup-channel {
    flex-wrap: wrap;
  }

  .mh-sup-channel-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Inbox toolbar ---------------------------------------------------------- */

.mh-sup-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

.mh-sup-search {
  flex: 1 1 14rem;
  min-width: 0;
}

/* The two selects keep their own line rather than being squeezed by the
   search field, which is the wider control anyway. */
.mh-sup-toolbar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* .mh-input is full-width by default, which stacks two selects. */
.mh-sup-toolbar-filters .mh-input {
  width: auto;
  min-width: 9rem;
}

/* Composer page ---------------------------------------------------------- */

.mh-sup-compose {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mh-sup-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.mh-sup-form-full {
  grid-column: 1 / -1;
}

.mh-sup-hint {
  margin: 0.35rem 0 0;
}

.mh-sup-body {
  min-height: 10rem;
}

.mh-sup-dept-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.mh-sup-dept-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.mh-sup-dept-card:hover {
  border-color: var(--mh-accent);
}

.mh-sup-dept-card.is-selected {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mh-accent);
}

.mh-sup-dept-card-name {
  font-weight: 700;
}

.mh-sup-drop {
  border: 1px dashed color-mix(in srgb, var(--mh-ink) 25%, transparent);
  border-radius: var(--mh-radius);
  padding: 1.25rem;
  text-align: center;
  background: var(--mh-surface-sunk);
}

.mh-sup-drop.is-dragging {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-sup-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mh-sup-file-list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mh-sup-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

.mh-sup-file > span:first-child {
  flex: 1;
  min-width: 0;
}

.mh-sup-compose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Thread ----------------------------------------------------------------- */

.mh-sup-back {
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mh-mute);
  text-decoration: none;
}

.mh-sup-back:hover {
  color: var(--mh-ink);
}

.mh-sup-thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1.15rem 1.25rem;
}

.mh-sup-thread-head-main {
  min-width: 0;
  flex: 1;
}

.mh-sup-thread-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.mh-sup-thread-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
}

.mh-sup-thread-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mh-sup-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1rem 1.25rem;
}

.mh-sup-facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mh-mute);
  margin-bottom: 0.2rem;
}

.mh-sup-facts dd {
  margin: 0;
  font-weight: 600;
}

.mh-sup-email-note {
  margin: 0;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  color: #5c5346;
  background: #f7f0e2;
  border: 1px solid #e6dcc8;
  border-radius: var(--mh-radius);
}

.mh-sup-thread {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 24rem;
}

.mh-sup-thread.is-dragging {
  outline: 2px dashed var(--mh-accent);
  outline-offset: -6px;
}

.mh-sup-thread-body {
  flex: 1;
  overflow: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(247, 244, 239, 0.45);
  max-height: min(60vh, 40rem);
}

.mh-sup-earlier {
  display: flex;
  justify-content: center;
}

.mh-sup-day,
.mh-sup-newline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mh-mute);
}

.mh-sup-day::before,
.mh-sup-day::after,
.mh-sup-newline::before,
.mh-sup-newline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mh-line);
}

.mh-sup-newline {
  color: var(--mh-accent);
}

.mh-sup-newline::before,
.mh-sup-newline::after {
  background: rgba(31, 163, 122, 0.45);
}

.mh-sup-system {
  align-self: center;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--mh-mute);
}

.mh-sup-msg {
  align-self: flex-start;
  max-width: min(85%, 40rem);
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--mh-line);
  border-radius: 0.85rem;
  background: #fff;
}

.mh-sup-msg.is-mine {
  align-self: flex-end;
  background: var(--mh-accent-soft);
  border-color: rgba(31, 163, 122, 0.35);
}

.mh-sup-msg.is-pending {
  opacity: 0.6;
}

.mh-sup-msg-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--mh-mute);
  margin-bottom: 0.35rem;
}

.mh-sup-msg-who {
  font-weight: 700;
  color: var(--mh-ink);
}

.mh-sup-msg-body {
  white-space: pre-wrap;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.94rem;
}

.mh-sup-msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mh-sup-thumb {
  padding: 0;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: #fff;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}

.mh-sup-thumb:hover {
  border-color: var(--mh-accent);
}

.mh-sup-thumb img {
  display: block;
  max-width: 12rem;
  max-height: 9rem;
  object-fit: cover;
}

.mh-sup-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 16rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.mh-sup-attach:hover {
  border-color: var(--mh-accent);
}

.mh-sup-typing {
  align-self: flex-start;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--mh-accent);
  animation: mh-support-pulse 1.4s ease-in-out infinite;
}

.mh-sup-composer {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

.mh-sup-composer--closed {
  text-align: center;
}

.mh-sup-composer-input {
  resize: vertical;
  min-height: 4.5rem;
}

.mh-sup-composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.mh-sup-composer-hint {
  flex: 1 1 10rem;
  margin: 0;
}

.mh-sup-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mh-sup-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 14rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
}

.mh-sup-chip button {
  border: 0;
  background: transparent;
  color: var(--mh-mute);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.mh-sup-lightbox {
  padding: clamp(1rem, 4vw, 3rem);
}

.mh-sup-lightbox-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(60rem, 100%);
  max-height: 100%;
}

.mh-sup-lightbox-inner img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--mh-line);
}

.mh-sup-lightbox-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

.mh-sup-lightbox-bar > span {
  flex: 1;
  min-width: 0;
}

.mh-sup-csat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mh-sup-stars {
  display: flex;
  gap: 0.35rem;
}

.mh-sup-star {
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: color-mix(in srgb, var(--mh-ink) 25%, transparent);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}

.mh-sup-star.is-on {
  color: #d99b1c;
  border-color: #d99b1c;
  background: #fbf1de;
}

.mh-sup-csat-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .mh-sup-form-grid {
    grid-template-columns: 1fr;
  }

  .mh-sup-thread-body {
    max-height: min(55dvh, 28rem);
    padding: 1rem;
  }

  .mh-sup-msg {
    max-width: 100%;
  }
}

@keyframes mh-support-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  .mh-wh-tabs-wrap { display: none; }
  .mh-wh-tab-select { display: block; }

  .mh-cycle-switch button {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
  }

  .mh-ram-ticks button {
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0.45rem 0.35rem;
  }

  .mh-sizer-chip {
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
  }

  .mh-btn-xs,
  .mh-btn-sm {
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0.5rem 0.85rem;
  }

  .mh-header-burger,
  .mh-app-menu-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .mh-swap-ticks {
    height: auto;
    min-height: 2.5rem;
    display: flex;
  align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mh-swap-tick {
    position: static;
    transform: none;
    flex: 0 0 auto;
    padding: 0.4rem 0.55rem;
    font-size: 0.8rem;
    border: 1px solid var(--mh-line);
    border-radius: var(--mh-radius);
    background: #fffefb;
  }

  .mh-swap-tick.is-selected {
    border-color: var(--mh-accent);
    background: var(--mh-accent-soft);
  }

  .mh-auth {
    padding: clamp(2rem, 6vw, 3.5rem) var(--mh-shell-pad);
  }

  .mh-table tbody td,
  .mh-table tbody th {
    min-height: 2.75rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* Dense panel tables stay horizontally scrollable but easier to tap. */
  .mh-data-tablewrap,
  .mh-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Files hub (File Manager | SFTP) ── */
.mh-files-hub {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.mh-files-subtabs {
  flex-shrink: 0;
  margin-bottom: 0.85rem;
}

.mh-files-hub .mh-fm-shell {
  height: calc(100dvh - 17.5rem);
  max-height: calc(100dvh - 17.5rem);
}

@media (max-width: 900px) {
  .mh-files-hub .mh-fm-shell {
    height: calc(100dvh - 20.5rem);
    max-height: calc(100dvh - 20.5rem);
  }
}

/* ── Files → SFTP panel ── */
.mh-sftp {
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
  padding-bottom: 1.5rem;
}

.mh-sftp-hero {
  display: grid;
  gap: 0.35rem;
}

.mh-sftp-title {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--mh-ink);
}

.mh-sftp-lede {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.95rem;
  line-height: 1.45;
}

.mh-sftp-section {
  display: grid;
  gap: 0.65rem;
}

.mh-sftp-section.mh-panel {
  padding: 1.15rem 1.25rem;
}

.mh-sftp-heading {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mh-ink);
}

.mh-sftp-body {
  margin: 0;
  color: var(--mh-ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.mh-sftp-clients {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.mh-sftp-client {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  align-content: start;
}

.mh-sftp-client-name {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.mh-sftp-client-platforms {
  margin: 0;
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-weight: 600;
}

.mh-sftp-client-link {
  justify-self: start;
  margin-top: 0.35rem;
  text-decoration: none;
}

.mh-sftp-creds {
  display: grid;
  gap: 0.55rem;
}

.mh-sftp-creds .mh-copy-label {
  min-width: 7.5rem;
}

.mh-sftp-user-hint {
  margin: 0.15rem 0 0;
}

.mh-sftp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.mh-sftp-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.mh-sftp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: var(--mh-accent, #2f6f4e);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.mh-sftp-step-text {
  font-size: 0.92rem;
  line-height: 1.5;
  padding-top: 0.15rem;
}

.mh-sftp-tip {
  border: 1px solid var(--mh-line);
  border-left: 3px solid var(--mh-accent, #2f6f4e);
  border-radius: var(--mh-radius);
  background: color-mix(in srgb, var(--mh-accent, #2f6f4e) 6%, #fff);
  padding: 0.95rem 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.mh-sftp-tip-label {
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mh-ink);
}


/* ── Community forum index ─────────────────────────────────────────────
   A node list: category blocks of dense rows, each carrying a title, two
   numbers and a last-activity cell, with a sidebar beside them. Built from
   the same tokens as the rest of the site, and following .mh-trow
   for the stacked-row shape it falls back to on a phone.
   ─────────────────────────────────────────────────────────────────────── */

.mh-forum-layout {
  display: grid;
  gap: var(--mh-space-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .mh-forum-layout {
    /* Sidebar wide enough for the chatbox to stay usable beside the list. */
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--mh-space-5);
  }
}

.mh-forum-main {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
  min-width: 0;
}

.mh-forum-side {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
  min-width: 0;
}
@media (min-width: 1024px) {
  .mh-forum-side {
    position: sticky;
    top: var(--mh-space-4);
  }
}

/* Sub-navigation ------------------------------------------------------- */

.mh-forum-subnav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  justify-content: space-between;
  /* Locked so tabs-only pages (Guides / My articles) match hub+search height. */
  min-height: 3.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  margin-bottom: var(--mh-space-4);
}
.mh-forum-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 2.25rem;
}
.mh-forum-tab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mh-mute);
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  text-decoration: none;
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.mh-forum-tab:hover {
  color: var(--mh-ink);
  border-color: var(--mh-line);
}
.mh-forum-tab.is-active {
  color: var(--mh-ink);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
}
.mh-forum-tab:focus {
  outline: none;
}
.mh-forum-tab:focus-visible {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}
.mh-forum-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 20rem;
  min-height: 2.25rem;
}
.mh-forum-search .mh-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 2.25rem;
  padding-block: 0;
}
.mh-forum-search .mh-btn {
  box-sizing: border-box;
  min-height: 2.25rem;
}

/* Category block ------------------------------------------------------- */

.mh-forum-block {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}
.mh-forum-block-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  justify-content: space-between;
  padding: 0.6rem var(--mh-space-3);
  background: var(--mh-surface-sunk);
  border-bottom: 1px solid var(--mh-line);
}
/* Specificity here is load-bearing: `.mh-section h2` sets a 2.5rem display size
   for marketing headings, and every one of these sits inside a section. */
.mh-forum-block .mh-forum-block-head h2 {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mh-forum-block-head p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mh-mute);
}

/* Node row ------------------------------------------------------------- */

.mh-forum-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--mh-space-3);
  padding: 0.85rem var(--mh-space-3);
  border-bottom: 1px solid var(--mh-line);
  color: inherit;
  text-decoration: none;
  transition: background 140ms var(--mh-ease);
}
.mh-forum-row:last-child {
  border-bottom: 0;
}
.mh-forum-row:hover {
  background: var(--mh-surface-sunk);
}
@media (min-width: 900px) {
  .mh-forum-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) 8rem 15rem;
  }
}

.mh-forum-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  border-radius: var(--mh-radius);
  font-size: 1rem;
  overflow: hidden;
}
.mh-forum-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.mh-forum-main-cell {
  min-width: 0;
}
.mh-forum-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.98rem;
}
.mh-forum-desc {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-forum-new {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border: 1px solid var(--mh-accent);
  border-radius: var(--mh-radius);
  padding: 0.05rem 0.3rem;
}

/* Stat columns. Below 900px these fold under the title as a meta line — they
   have to start in the second column, or the grid drops them under the icon
   and a two-word stat wraps into a 2.5rem gutter. */
.mh-forum-stats {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--mh-mute);
}
.mh-forum-stat strong {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  color: var(--mh-ink);
}
@media (min-width: 900px) {
  .mh-forum-stats {
    grid-column: auto;
    display: block;
    margin-top: 0;
    text-align: right;
  }
  .mh-forum-stat {
    display: block;
    line-height: 1.35;
  }
}

/* Last activity -------------------------------------------------------- */

.mh-forum-last {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-width: 0;
  font-size: 0.8rem;
}
@media (min-width: 900px) {
  .mh-forum-last {
    grid-column: auto;
    margin-top: 0;
    padding-left: var(--mh-space-3);
    border-left: 1px solid var(--mh-line);
  }
}
.mh-forum-last-empty {
  grid-column: 2 / -1;
}
@media (min-width: 900px) {
  .mh-forum-last-empty {
    grid-column: auto;
  }
}
.mh-forum-last-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
}
.mh-forum-last-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mh-forum-last-body {
  min-width: 0;
}
.mh-forum-last-title {
  display: block;
  font-weight: 500;
  color: var(--mh-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-last-meta {
  display: block;
  color: var(--mh-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-last-empty {
  color: var(--mh-mute);
  font-size: 0.8rem;
}

/* Sidebar widgets ------------------------------------------------------ */

.mh-forum-widget {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}
.mh-forum-widget .mh-forum-widget-head {
  margin: 0;
  padding: 0.55rem var(--mh-space-3);
  background: var(--mh-surface-sunk);
  border-bottom: 1px solid var(--mh-line);
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mh-forum-widget-body {
  padding: var(--mh-space-2) var(--mh-space-3);
}
.mh-forum-widget-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-forum-widget-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.87rem;
}
.mh-forum-widget-list li:last-child {
  border-bottom: 0;
}
.mh-forum-widget-list a {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-widget-meta {
  display: block;
  color: var(--mh-mute);
  font-size: 0.78rem;
  margin-top: 0.1rem;
}
/* The chat sits in the node list rather than beside it — a live conversation is
   not a board to click into, so it is the real thing in place, and the block
   around it already supplies the frame. */
.mh-forum-chat .mh-cchat {
  border: 0;
}
.mh-forum-chat .mh-cchat-body {
  height: 20rem;
}

.mh-forum-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-2);
}
.mh-forum-figure strong {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem;
  line-height: 1.15;
}
.mh-forum-figure span {
  color: var(--mh-mute);
  font-size: 0.78rem;
}

.mh-forum-empty {
  padding: var(--mh-space-4) var(--mh-space-3);
  color: var(--mh-mute);
  font-size: 0.9rem;
  text-align: center;
}

/* Prose inside a block — the About panel on a listing. */
.mh-forum-prose {
  padding: var(--mh-space-3);
}
.mh-forum-prose p {
  margin: 0 0 0.75rem;
}
.mh-forum-prose p:last-child {
  margin-bottom: 0;
}

/* A sort control living in a block header, sized to sit beside the title. */
.mh-forum-sort .mh-input {
  padding-block: 0.3rem;
  font-size: 0.85rem;
}

/* Category list: icon, name, count. The count is the point — a directory that
   does not say how many are in a category makes you click to find out. */
.mh-forum-cats {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-forum-cats a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
  font-size: 0.88rem;
}
.mh-forum-cats a:hover .mh-forum-cat-name {
  text-decoration: underline;
}
.mh-forum-cats a.is-active .mh-forum-cat-name {
  font-weight: 600;
  color: var(--mh-accent-dark);
}
.mh-forum-cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-forum-cat-count {
  color: var(--mh-mute);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Fact list in a sidebar widget: label above value, no table. */
.mh-forum-facts {
  margin: 0;
}
.mh-forum-facts > div {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--mh-line);
}
.mh-forum-facts > div:last-child {
  border-bottom: 0;
}
.mh-forum-facts dt {
  color: var(--mh-mute);
  font-size: 0.78rem;
}
.mh-forum-facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
}


/* ── Community public server directory ─────────────────────────────── */


/* Community chat ----------------------------------------------------------- */

.mh-cchat {
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  display: flex;
  flex-direction: column;
}

.mh-cchat-channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: var(--mh-space-2);
  border-bottom: 1px solid var(--mh-line);
}
.mh-cchat-channel {
  border: 1px solid transparent;
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  border-radius: var(--mh-radius);
}
.mh-cchat-channel:hover {
  color: var(--mh-ink);
  border-color: var(--mh-line);
}
.mh-cchat-channel.is-active {
  color: var(--mh-ink);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
}

.mh-cchat-body {
  /* Tall enough to read a conversation, short enough not to own the page. */
  height: 22rem;
  overflow-y: auto;
  padding: var(--mh-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
}
.mh-cchat-empty {
  margin: auto;
  text-align: center;
}

.mh-cchat-msg {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.mh-cchat-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
}
.mh-cchat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mh-cchat-msg-body {
  min-width: 0;
}
.mh-cchat-msg-meta {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--mh-mute);
}
.mh-cchat-msg-meta strong {
  color: var(--mh-ink);
  font-size: 0.85rem;
}
.mh-cchat-msg-body p {
  margin: 0.1rem 0 0;
  overflow-wrap: anywhere;
}
/* Sent from the website rather than Discord. */
.mh-cchat-msg.is-web .mh-cchat-avatar {
  background: var(--mh-ink);
  color: var(--mh-paper);
}
/* Shown the moment you press send, before the relay into Discord comes back. */
.mh-cchat-msg.is-pending {
  opacity: 0.55;
}
/* The name your messages carry. Not your real one, which people should know. */
.mh-cchat-as {
  margin: 0;
  padding: var(--mh-space-2) var(--mh-space-3) 0;
  font-size: 0.8rem;
}

.mh-cchat-composer {
  display: flex;
  gap: var(--mh-space-2);
  align-items: center;
  padding: var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
}
.mh-cchat-composer .mh-input {
  flex: 1 1 auto;
}
.mh-cchat-signin {
  flex-wrap: wrap;
  justify-content: space-between;
}
.mh-cchat-signin p {
  margin: 0;
}
.mh-cchat-note {
  margin: 0;
  padding: 0 var(--mh-space-3) var(--mh-space-3);
  font-size: 0.85rem;
}

.mh-community-filters {
  display: grid;
  gap: var(--mh-space-2);
  grid-template-columns: 1fr;
  margin-bottom: var(--mh-space-4);
}
@media (min-width: 720px) {
  .mh-community-filters {
    grid-template-columns: 2fr 1fr 1fr;
  }

  /* Guides filter on one control more than the server list does. */
  .mh-community-filters--four {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.mh-community-count {
  margin: 0 0 var(--mh-space-3);
}

/* ── Server list ────────────────────────────────────────────────────────
   Built for a directory that will hold thousands: the page is full width
   with no sidebar, the filters are a sticky bar of chips rather than a
   column, and the cards are sized so a screen holds a couple of dozen of
   them instead of eight. Everything a card shows is something you would
   use to choose between servers — icon, rank, live count, what the server
   is saying, how it is filed, and the address to paste into the game.
   ─────────────────────────────────────────────────────────────────────── */

.mh-slist-figures {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-4) var(--mh-space-5);
  padding: 0 0 var(--mh-space-3);
}
.mh-slist-figure strong {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 1.6rem;
  line-height: 1.1;
}
.mh-slist-figure span {
  color: var(--mh-mute);
  font-size: 0.8rem;
}

/* Filters follow you down a long list rather than making you scroll back. */
.mh-slist-bar {
  position: sticky;
  top: 4.5rem;
  z-index: 4;
  display: grid;
  gap: var(--mh-space-2);
  padding: var(--mh-space-3) 0;
  margin-bottom: var(--mh-space-3);
  background: var(--mh-paper);
  border-bottom: 1px solid var(--mh-line);
}
.mh-slist-controls {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
}
.mh-slist-search {
  flex: 1 1 auto;
  min-width: 0;
}
.mh-slist-search .mh-input {
  width: 100%;
}
.mh-slist-sort {
  flex: 0 0 auto;
}
.mh-slist-sort .mh-input {
  font-size: 0.85rem;
}

/* Categories as a wrapping chip row. A column of these would cost the grid
   a whole card's width for something read once. */
.mh-slist-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.mh-slist-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-mute);
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.mh-slist-cat:hover {
  color: var(--mh-ink);
  border-color: var(--mh-accent);
}
.mh-slist-cat.is-active {
  color: var(--mh-ink);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
  font-weight: 600;
}
.mh-slist-cat-count {
  color: var(--mh-mute);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.mh-slist-count {
  margin: 0 0 var(--mh-space-3);
  color: var(--mh-mute);
  font-size: 0.85rem;
}
.mh-slist-empty {
  padding: var(--mh-space-5) var(--mh-space-3);
  text-align: center;
  color: var(--mh-mute);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}

/* Two up on a tablet, four on a wide screen — 24 cards to a page either way. */
.mh-slist-grid {
  display: grid;
  gap: var(--mh-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mh-slist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mh-slist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1360px) {
  .mh-slist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The results you were reading stay put while the next set loads, rather than
   collapsing to a skeleton. Enough of a dim to read as pending, not so much
   that the list becomes unreadable mid-refresh. */
.mh-slist-grid.is-loading,
.mh-guides-grid.is-loading {
  opacity: 0.7;
  transition: opacity 120ms ease;
}

/* Same idea for a whole section being refreshed in place, such as a guide
   switching between its live and proposed versions. */
.mh-community-top.is-loading {
  opacity: 0.7;
  transition: opacity 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .mh-slist-grid.is-loading,
  .mh-guides-grid.is-loading,
  .mh-community-top.is-loading {
    transition: none;
  }
}

.mh-slist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--mh-space-3);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  transition: border-color 160ms var(--mh-ease);
}
.mh-slist-card:hover {
  border-color: var(--mh-accent);
}

.mh-slist-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mh-slist-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--mh-radius);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-dark);
  font-size: 1.05rem;
}
.mh-slist-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.mh-slist-ident {
  min-width: 0;
  flex: 1 1 auto;
}
.mh-slist-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}
/* Above the name rather than beside it: at four columns a rank sharing the
   line costs the name three or four characters it cannot spare. */
.mh-slist-rank {
  display: block;
  color: var(--mh-mute);
  font-size: 0.7rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* The card holds a real button, so it cannot itself be a link; the name
   carries the destination and stretches its hit area over the whole card. */
.mh-slist-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.mh-slist-name::after {
  content: '';
  position: absolute;
  inset: 0;
}
.mh-slist-card:hover .mh-slist-name {
  color: var(--mh-accent-dark);
}
.mh-slist-players {
  flex: 0 0 auto;
  color: var(--mh-mute);
  font-size: 0.78rem;
  white-space: nowrap;
}
.mh-slist-players b {
  font-family: 'Syne', sans-serif;
  color: var(--mh-ink);
  font-size: 0.9rem;
}

/* What the server is saying right now, in the font it says it in. */
.mh-slist-motd {
  margin: 0;
  padding: 0.4rem 0.55rem;
  min-height: 2.6rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
  color: var(--mh-mute);
  font-size: 0.8rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mh-slist-motd.is-live {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--mh-ink);
}

.mh-slist-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.mh-slist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font-size: 0.72rem;
  white-space: nowrap;
}
.mh-slist-chip.is-category {
  color: var(--mh-ink);
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}
.mh-slist-more {
  color: var(--mh-mute);
  font-size: 0.72rem;
}

.mh-slist-copy {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-paper);
  color: var(--mh-mute);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms var(--mh-ease), color 140ms var(--mh-ease);
}
.mh-slist-copy code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}
.mh-slist-copy-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mh-slist-copy:hover {
  border-color: var(--mh-accent);
  color: var(--mh-accent-dark);
}

.mh-slist-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--mh-space-4);
}
.mh-slist-page {
  min-width: 2.15rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.mh-slist-page:hover:not(:disabled) {
  color: var(--mh-ink);
  border-color: var(--mh-accent);
}
.mh-slist-page.is-active {
  color: var(--mh-ink);
  background: var(--mh-accent-soft);
  border-color: var(--mh-accent);
  font-weight: 600;
}
.mh-slist-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mh-slist-gap {
  color: var(--mh-mute);
  padding: 0 0.15rem;
}

.mh-community-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.mh-community-tags span {
  border: 1px solid var(--mh-line);
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  color: var(--mh-mute);
  background: var(--mh-paper);
}

/* Sits inside the section, under the sub-nav, and still runs the full width. */
.mh-community-detail-hero {
  position: relative;
  margin: 0 0 var(--mh-space-4);
}
.mh-community-detail-banner {
  width: 100%;
  height: min(42vh, 320px);
  object-fit: cover;
  display: block;
  background:
    linear-gradient(120deg, #1a2a24 0%, #2d4a3c 40%, rgba(31, 163, 122, 0.35) 100%);
}
.mh-community-detail-banner--empty {
  height: min(28vh, 180px);
}
/* The icon laps onto the banner; the text does not. Pulling the whole row up
   put the breadcrumb on the dark image, where it could not be read. */
.mh-community-detail-hero-inner {
  display: flex;
  gap: var(--mh-space-3);
  align-items: flex-start;
  max-width: var(--mh-shell-max);
  margin: 0 auto;
  padding: var(--mh-space-3) var(--mh-shell-pad, 1.25rem) 0;
  position: relative;
}
.mh-community-detail-icon {
  border: 3px solid var(--mh-paper);
  background: var(--mh-surface);
  image-rendering: pixelated;
  flex-shrink: 0;
  margin-top: -2.75rem;
}
.mh-community-detail-hero-inner .mh-crumbs {
  margin-bottom: 0.35rem;
}
/* Every community page opens on the sub-nav, so it sits the same distance from
   the header as the page's content sits from it — one gap, used twice, rather
   than a marketing band above a bar that already says where you are. */
.mh-community-top {
  padding-top: var(--mh-space-4);
}

/* A listing or a guide that is not there still keeps the tabs above it. */
.mh-community-missing-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.mh-community-detail-hero-inner h1 {
  margin: 0.25rem 0 0.35rem;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;
}
.mh-community-motd {
  margin: var(--mh-space-3);
  border-left: 3px solid var(--mh-accent);
  padding: 0.5rem 0.75rem;
  background: var(--mh-accent-soft);
  color: var(--mh-ink);
  font-size: 0.92rem;
}
.mh-community-motd span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-mute);
  margin-bottom: 0.2rem;
}
.mh-community-gallery {
  display: grid;
  gap: var(--mh-space-2);
  grid-template-columns: 1fr 1fr;
  padding: var(--mh-space-3);
}
.mh-community-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid var(--mh-line);
  background: var(--mh-surface-2, rgba(255, 255, 255, 0.04));
}
.mh-community-join-address {
  margin: 0 0 0.6rem;
}
.mh-community-join-address code {
  display: block;
  word-break: break-all;
  font-size: 0.9rem;
}
.mh-community-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mh-community-stars {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.mh-community-star {
  border: 0;
  background: transparent;
  color: var(--mh-line);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem;
}
.mh-community-star.is-on {
  color: var(--mh-accent);
}
.mh-community-star:disabled {
  cursor: default;
}

.mh-guides-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--mh-space-4);
}
.mh-guides-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.mh-guides-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mh-guides-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .mh-guides-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mh-guide-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--mh-line);
  padding-bottom: 1rem;
}
.mh-guide-card:hover strong {
  color: var(--mh-accent);
}
.mh-guide-card-cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  margin-bottom: 0.75rem;
  /* Hold the box before the image lands, so a grid of cards does not jolt
     downward one cover at a time. */
  background: var(--mh-surface-2, rgba(255, 255, 255, 0.04));
}
.mh-guide-card-body strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.mh-guide-card-body p {
  margin: 0 0 0.5rem;
  color: var(--mh-muted);
  font-size: 0.95rem;
}
.mh-guide-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: var(--mh-muted);
}
.mh-guide-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--mh-accent) 12%, transparent);
  border-left: 3px solid var(--mh-accent);
}
.mh-guide-banner--warn {
  background: color-mix(in srgb, #b45309 12%, transparent);
  border-left-color: #b45309;
}
/* Sits under the sub-nav, inside the section, like the server hero does. */
.mh-guide-hero {
  margin-bottom: var(--mh-space-4);
}
/* Crumbs centre themselves for the product head; here they lead a left-hand
   column and have to start where the title starts. */
.mh-guide-hero .mh-crumbs ol,
.mh-community-detail-hero-inner .mh-crumbs ol {
  justify-content: flex-start;
}
.mh-guide-hero h1 {
  margin: 0.25rem 0 0.5rem;
}
.mh-guide-lede {
  max-width: 42rem;
  color: var(--mh-muted);
}
.mh-guide-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.mh-guide-layout {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .mh-guide-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}
.mh-guide-prose {
  line-height: 1.65;
  max-width: 46rem;
}
.mh-guide-prose h2,
.mh-guide-prose h3,
.mh-guide-prose h4 {
  margin-top: 1.5rem;
}
.mh-guide-prose pre {
  overflow-x: auto;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--mh-fg) 4%, transparent);
}
.mh-guide-prose code {
  font-size: 0.9em;
}
.mh-guide-prose img {
  max-width: 100%;
  height: auto;
}
.mh-guide-aside h2 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}
.mh-guide-toc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.mh-guide-toc li {
  margin: 0.35rem 0;
  font-size: 0.9rem;
}
.mh-guide-toc-l3 {
  padding-left: 0.75rem;
}
.mh-guide-toc-l4 {
  padding-left: 1.5rem;
}
.mh-guide-toc a {
  color: var(--mh-mute);
  text-decoration: none;
}
.mh-guide-toc a:hover {
  color: var(--mh-ink);
}
/* Where the reader is, not only where they could go. */
.mh-guide-toc a.is-current {
  color: var(--mh-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--mh-accent);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}
.mh-guide-comments {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.mh-guide-comments li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--mh-line);
}
.mh-guide-comments li.is-pending {
  border-left: 3px solid var(--mh-warn);
  padding-left: 0.75rem;
}

/* Directory, article and moderation furniture ------------------------- */

.mh-guides-dir .mh-guides-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mh-space-3);
}

.mh-guides-dir .mh-community-filters {
  flex: 1 1 28rem;
}

.mh-skeleton.mh-guide-skeleton {
  min-height: 11rem;
}

.mh-guides-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mh-space-2);
  padding: var(--mh-space-4) 0;
}

.mh-guides-active-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--mh-space-3);
}

.mh-guides-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-3);
  margin-top: var(--mh-space-4);
}

.mh-guide-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mh-guide-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.mh-guide-tag {
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: var(--mh-surface);
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
}

.mh-guide-tag:hover {
  border-color: var(--mh-accent);
  color: var(--mh-ink);
}

.mh-guide-detail .mh-guide-layout {
  align-items: start;
}

.mh-guide-aside {
  min-width: 0;
}

.mh-guide-helpful {
  padding-top: var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
}

.mh-guide-report {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 32rem;
  margin: 0 0 var(--mh-space-3);
}

.mh-guide-notices .mh-guide-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mh-guide-notice-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-3);
  padding: 0.6rem var(--mh-space-3);
  border-bottom: 1px solid var(--mh-line);
}

.mh-guide-notice-list li:last-child {
  border-bottom: 0;
}

.mh-guide-mine-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 var(--mh-space-3) var(--mh-space-3);
}

.mh-guide-mine-filter {
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mh-mute);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

.mh-guide-mine-filter.is-active {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-ink);
}

.mh-guide-mine-list li.is-selected {
  box-shadow: inset 2px 0 0 var(--mh-accent);
  padding-left: 0.5rem;
}

.mh-guide-mod-quote {
  margin: 0 0 0.25rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mh-guide-mod-reject {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mh-guide-mod-reject .mh-input {
  flex: 1;
  min-width: 0;
}
/* ── Guide composer ────────────────────────────────────────────────────
   Two panes: the prose on the left, everything about it on the right. Reuses
   .mh-forum-block and .mh-forum-widget for the frames so the editor reads as
   part of the community rather than a form that wandered in.
   ─────────────────────────────────────────────────────────────────────── */

.mh-editor-pane {
  padding: var(--mh-space-3);
}

.mh-editor-field {
  display: block;
  margin-bottom: var(--mh-space-3);
}
.mh-editor-field:last-child {
  margin-bottom: 0;
}
.mh-editor-field.is-invalid .mh-input,
.mh-form .is-invalid .mh-input {
  border-color: var(--mh-bad);
}
.mh-editor-error {
  display: block;
  margin-top: 0.25rem;
  color: var(--mh-bad);
  font-size: 0.8rem;
}

.mh-editor-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.6rem 0.7rem;
}

.mh-editor-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 22rem;
}

/* Formatting buttons over the body: markdown is only obvious to people who
   already know markdown. */
.mh-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.35rem;
  border: 1px solid var(--mh-line);
  border-bottom: 0;
  background: var(--mh-surface-sunk);
}

.mh-editor-tool {
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  background: transparent;
  color: var(--mh-ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.mh-editor-tool:hover {
  border-color: var(--mh-line);
  background: var(--mh-surface);
}

.mh-editor-tool-hint {
  margin-left: auto;
  font-size: 0.75rem;
}

.mh-editor-toc {
  margin: 0 0 var(--mh-space-3);
  padding: var(--mh-space-2) var(--mh-space-3);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
}

.mh-editor-toc ol {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.mh-editor-count {
  font-size: 0.78rem;
  color: var(--mh-mute);
  font-variant-numeric: tabular-nums;
}
.mh-editor-count.is-over {
  color: var(--mh-bad);
  font-weight: 600;
}

.mh-editor-preview-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  margin: 0 0 0.4rem;
}

/* Actions stay with the block they act on, and stick while you scroll a long
   guide so Submit is never a page-length away. */
.mh-editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  padding: var(--mh-space-2) var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
  background: var(--mh-surface-sunk);
  position: sticky;
  bottom: 0;
}
.mh-editor-spacer {
  flex: 1 1 auto;
}
.mh-editor-state {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mh-mute);
}

.mh-editor-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-mute);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  padding: 0.05rem 0.3rem;
}

.mh-editor-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.mh-editor-tag {
  font-size: 0.78rem;
  color: var(--mh-accent-dark);
  background: var(--mh-accent-soft);
  border: 1px solid var(--mh-accent);
  border-radius: var(--mh-radius);
  padding: 0.05rem 0.4rem;
}

.mh-editor-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mh-line);
  margin-bottom: var(--mh-space-2);
}

.mh-editor-url {
  margin: 0 0 var(--mh-space-2);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.mh-editor-url code {
  display: block;
  margin-top: 0.15rem;
}
.mh-editor-seo {
  margin-top: var(--mh-space-3);
  padding-top: var(--mh-space-3);
  border-top: 1px solid var(--mh-line);
}

.mh-editor-note {
  margin: 0 0 var(--mh-space-2);
  font-size: 0.82rem;
  line-height: 1.5;
}
.mh-editor-note strong {
  color: var(--mh-ink);
}
.mh-guide-mine-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.mh-guide-mine-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--mh-line);
}
.mh-guide-mod-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .mh-guide-mod-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mh-guide-diff {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.mh-guide-diff li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--mh-line);
  font-size: 0.9rem;
}

.mh-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
}
.mh-field-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--mh-mute);
  font-size: 0.8rem;
}
.mh-warn-text {
  color: var(--mh-warn);
  margin: 0;
}
/* ── Listing composer (panel Community tab) ─────────────────────────────
   The same frame and the same field primitives as the guide composer, so
   authoring a listing and authoring a guide are the same act. The preview
   renders the directory's own card, so it needs no styling of its own —
   only a frame saying "this is what a visitor sees".
   ─────────────────────────────────────────────────────────────────────── */

.mh-listing-lede {
  max-width: 44rem;
  margin: 0 0 var(--mh-space-4);
}

.mh-listing-preview-head {
  margin: 0 0 0.15rem;
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
}
.mh-listing-preview-head:not(:first-child) {
  margin-top: var(--mh-space-4);
}
/* The card is the real component; here it is a specimen, not a link. */
.mh-listing-preview-card {
  max-width: 22rem;
  margin-top: var(--mh-space-2);
}
.mh-listing-preview-card .mh-slist-name {
  pointer-events: none;
}
.mh-listing-preview-card .mh-slist-name::after {
  content: none;
}

.mh-listing-preview-page {
  margin-top: var(--mh-space-2);
  border: 1px solid var(--mh-line);
  background: var(--mh-surface);
}
.mh-listing-preview-banner {
  display: block;
  width: 100%;
  max-height: 8rem;
  object-fit: cover;
}
.mh-listing-preview-banner.is-empty {
  height: 4rem;
  background:
    linear-gradient(120deg, #1a2a24 0%, #2d4a3c 40%, rgba(31, 163, 122, 0.35) 100%);
}
.mh-listing-preview-hero {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--mh-space-3);
}
.mh-listing-preview-hero img {
  image-rendering: pixelated;
  border: 2px solid var(--mh-paper);
  background: var(--mh-surface);
}
.mh-listing-preview-hero strong {
  font-size: 1.05rem;
}
.mh-listing-preview-hero p {
  margin: 0.1rem 0 0;
  color: var(--mh-mute);
  font-size: 0.88rem;
}
.mh-listing-preview-prose {
  padding: 0 var(--mh-space-3) var(--mh-space-3);
}
.mh-listing-preview-prose p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}
.mh-listing-preview-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-2);
  padding: 0 var(--mh-space-3) var(--mh-space-3);
}
.mh-listing-preview-gallery img {
  width: 100%;
  display: block;
  border: 1px solid var(--mh-line);
}

/* The publish checklist: the server's own refusal, before it refuses. */
.mh-listing-checks {
  margin: 0 0 var(--mh-space-3);
  padding: 0;
  list-style: none;
}
.mh-listing-checks li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0 0.4rem;
  padding: 0.2rem 0;
  font-size: 0.87rem;
}
.mh-listing-checks li > span:first-child {
  text-align: center;
}
.mh-listing-checks li .mh-field-hint {
  grid-column: 2;
  margin-top: 0.1rem;
}
.mh-listing-checks .is-done {
  color: var(--mh-ink);
}
.mh-listing-checks .is-done > span:first-child {
  color: var(--mh-accent-dark);
}
.mh-listing-checks .is-todo {
  color: var(--mh-mute);
}

.mh-toggle-row.is-disabled {
  color: var(--mh-mute);
  cursor: not-allowed;
}
.mh-listing-live-link {
  margin: var(--mh-space-2) 0 0;
}
.mh-editor-state.is-live {
  color: var(--mh-accent-dark);
}

.mh-listing-motd {
  margin: var(--mh-space-2) 0;
  padding: 0.4rem 0.55rem;
  border-left: 3px solid var(--mh-accent);
  background: var(--mh-accent-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}
.mh-listing-motd span {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-mute);
  margin-bottom: 0.15rem;
}

/* A tag that will fit on the card, versus one that will be counted as "+2". */
.mh-editor-tag.is-shown {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
  color: var(--mh-ink);
}

.mh-listing-thumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--mh-space-3);
}
.mh-listing-thumb {
  display: block;
  max-width: 100%;
  max-height: 5rem;
  object-fit: cover;
  border: 1px solid var(--mh-line);
}
.mh-listing-thumb.is-icon {
  image-rendering: pixelated;
}
.mh-listing-thumb-drop {
  border: 1px solid var(--mh-line);
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.mh-listing-thumb-drop:hover {
  border-color: var(--mh-bad);
}
.mh-listing-thumb-drop img {
  display: block;
  width: 72px;
  height: 48px;
  object-fit: cover;
}
.mh-kicker {
  margin: 0;
  font-size: 0.8rem;
  color: var(--mh-mute);
}
.mh-kicker a {
  color: inherit;
}
.mh-lede {
  margin: 0.35rem 0 0.6rem;
  color: var(--mh-mute);
  max-width: 36rem;
}

/* ——— Skeletons ———
   One shimmer, in the shapes pages need. The older per-surface skeleton
   classes keep their own heights (the layout-shift tests pin them); anything
   new is built from these. */

.mh-sk {
  border-radius: 4px;
  background: linear-gradient(100deg, #f2eee7 30%, #faf8f4 50%, #f2eee7 70%);
  background-size: 200% 100%;
  animation: mhShimmer 1.3s ease-in-out infinite;
}

.mh-sk-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mh-sk-text {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* A single figure we have not been told yet, inline with the text around it. */
.mh-sk-inline {
  display: inline-block;
  width: 3.5rem;
  height: 1em;
  vertical-align: middle;
  border-radius: 3px;
}

.mh-sk-rows .mh-sk-row {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-sk-rows .mh-sk-row:last-child {
  border-bottom: 0;
}

.mh-sk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.mh-sk-head-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 16rem;
}

.mh-sk-head-actions {
  display: flex;
  gap: 0.5rem;
}

.mh-sk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--mh-line);
}

.mh-sk-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.mh-sk-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mh-sk-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

@media (max-width: 900px) {
  .mh-sk-split { grid-template-columns: 1fr; }
}

.mh-sk-auth {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .mh-sk,
  .mh-dash-skel-block {
    animation: none;
  }
}

/* ——— Services list ——— */

.mh-svc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.mh-svc-search {
  flex: 1 1 18rem;
  min-width: 0;
}

.mh-svc-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* .mh-input is full-width by default, which would push the view toggle away. */
.mh-svc-select {
  width: auto;
  min-width: 11rem;
}

.mh-svc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* A count beside a filter answers "is it worth clicking" before you click it. */
.mh-svc-count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: rgba(31, 41, 38, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.mh-filter-bar button.active .mh-svc-count {
  background: rgba(255, 255, 255, 0.55);
}

.mh-svc-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mh-svc-group {
  min-width: 0;
}

.mh-svc-group-head {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

/* The dense view: one service per line. */
.mh-svc-rows {
  overflow: hidden;
}

.mh-svc-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 0.8fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--mh-line);
  text-decoration: none;
  color: inherit;
}

.mh-svc-row:last-child {
  border-bottom: 0;
}

.mh-svc-row:hover,
.mh-svc-row:focus-visible {
  background: rgba(31, 163, 122, 0.05);
}

.mh-svc-row-main {
  min-width: 0;
}

.mh-svc-row-title {
  font-weight: 600;
}

.mh-svc-row-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}

.mh-svc-row-money {
  text-align: right;
  white-space: nowrap;
}

.mh-svc-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 860px) {
  .mh-svc-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mh-svc-row-money {
    text-align: left;
  }

  .mh-svc-row-state,
  .mh-svc-row-money {
    grid-column: 1 / -1;
  }
}

/* Why a row wants looking at, said on the row rather than in a tooltip. */
.mh-svc-flag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mh-svc-flag--critical {
  color: #8b2e2e;
  background: rgba(139, 46, 46, 0.07);
}

.mh-svc-flag--warn {
  color: #a86a1f;
  background: rgba(168, 106, 31, 0.07);
}

.mh-svc-flag--info {
  color: var(--mh-mute);
  background: rgba(31, 41, 38, 0.04);
}