/* HavoNode client area: WHMCS 9's Nexus theme in havonode.com's design system (docs/DESIGN.md).
   Source: HavoNode repo, whmcs-theme/havonode/css/custom.css.

   It replaces Nexus's own custom.css, which holds nothing but Nexus's colour variables, so every variable Nexus
   uses is set in section 2. Nexus's theme.css is Bootstrap 4.5 with WHMCS's styles on top, and about 260 of its
   rules hard-code white or light grey; section 4 turns those dark. Rules start with `body` where they must beat
   theme.css (or the cart's all.css, which loads after this file).

   1. fonts   2. Nexus's variables   3. page basics and type   4. Bootstrap's parts, dark   5. header
   6. footer   7. WHMCS's pages   8. the cart   9. reduced motion and forced colours   10. the Help Centre
   11. cancelling a server   12. a game server's live card, "Your servers" and the billing row   13. changing a plan
   14. the servers page   15. HavoNode's own pages: shared parts   16. invoices   17. support tickets   18. log in, password reset, register and 404   19. the account home page
   20. choosing a set-up: level meters, the reticle and the build (configure and Change plan, js/configure.js) */

/* ---------- 1. fonts: the site's own files, self-hosted (no Google Fonts) ---------- */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-400-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Oxanium Variable';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/oxanium-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-400-normal.woff2') format('woff2');
}

/* Anton's stand-in while it loads, sized like it (as in the site's tokens.css) */
@font-face {
  font-family: 'Anton Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 70%;
  ascent-override: 117%;
  descent-override: 33%;
  line-gap-override: 0%;
}

/* ---------- 2. variables ---------- */

:root {
  /* the site's tokens (src/styles/tokens.css) */
  --hn-bg: #0c0c0d;
  --hn-bg-deep: #0a0a0b;
  --hn-bg-raise: #111112;
  --hn-surface: #151517;
  --hn-surface-2: #1e1e1f;
  --hn-line: rgba(255, 255, 255, 0.08);
  --hn-line-strong: rgba(255, 255, 255, 0.14);
  --hn-field: rgba(255, 255, 255, 0.03);
  --hn-field-line: rgba(255, 255, 255, 0.16);
  --hn-text: #f0f0f2;
  --hn-text-2: rgba(240, 240, 242, 0.72);
  --hn-text-3: rgba(240, 240, 242, 0.6);
  --hn-red: #e11d2e;
  --hn-red-hover: #ff4a57;
  --hn-red-press: #c21927;
  --hn-red-deep: #9e0f18;
  --hn-red-tint: rgba(225, 29, 46, 0.14);
  --hn-ok: #22c55e;
  --hn-ok-text: #4ade80;
  --hn-warn-text: #fbbf24;
  --hn-info-text: #93c5fd;
  --hn-steel: #e3e5e8;
  --hn-steel-muted: #989da2;
  --hn-display: 'Anton', 'Anton Fallback', 'Arial Narrow', sans-serif;
  --hn-label: 'Oxanium Variable', 'Oxanium', sans-serif;
  --hn-body: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hn-ease: 150ms ease;

  /* Nexus's variables (its custom.css), dark. The neutral scale runs the other way round: 50 is the darkest
     surface and 900 the lightest text, so Nexus's own rules that use it come out dark. */
  --white: #fff;

  --neutral-50: #111112;
  --neutral-100: #151517;
  --neutral-200: #1e1e1f;
  --neutral-300: #2b2b2e;
  --neutral-400: #8a8a90;
  --neutral-500: #a3a3a9;
  --neutral-600: #bdbdc2;
  --neutral-700: #d4d4d8;
  --neutral-800: #e4e4e7;
  --neutral-900: #f0f0f2;
  --neutral-950: #fafafa;

  --primary-50: rgba(225, 29, 46, 0.06);
  --primary-100: rgba(225, 29, 46, 0.1);
  --primary-200: rgba(225, 29, 46, 0.16);
  --primary-300: rgba(225, 29, 46, 0.32);
  --primary-400: #ff4a57;
  --primary-500: #e11d2e;
  --primary-600: #e11d2e;
  --primary-700: #c21927;
  --primary-800: #9e0f18;
  --primary-900: #7a0b12;
  --primary-950: #4d070b;

  --primary: #e11d2e;
  --primary-lifted: #c21927;
  --primary-accented: #9e0f18;

  --secondary: #a3a3a9;
  --secondary-lifted: #bdbdc2;
  --secondary-accented: #d4d4d8;

  --success: #22c55e;
  --success-lifted: #16a34a;
  --success-accented: #15803d;

  --info: #60a5fa;
  --info-lifted: #3b82f6;
  --info-accented: #2563eb;

  --notice: #a78bfa;
  --notice-lifted: #8b5cf6;
  --notice-accented: #7c3aed;

  --warning: #f59e0b;
  --warning-lifted: #d97706;
  --warning-accented: #b45309;

  --error: #ff4a57;
  --error-lifted: #e11d2e;
  --error-accented: #9e0f18;

  /* Nexus paints its main action buttons (Order now, Checkout, the sidebar's and the cart's) with --bg-inverted
     and --grayscale: black on its light theme. Here the action colour is the red. */
  --grayscale: #e11d2e;
  --grayscale-lifted: #c21927;
  --grayscale-accented: #9e0f18;

  --neutral: #a3a3a9;
  --neutral-lifted: #bdbdc2;
  --neutral-accented: #d4d4d8;

  --text-inverted: #fff; /* text on --bg-inverted, the red */
  --text-muted: rgba(240, 240, 242, 0.6);
  --text-lifted: rgba(240, 240, 242, 0.72);
  --text-accented: rgba(240, 240, 242, 0.86);
  --text: #f0f0f2;

  --border-muted: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.1);
  --border-lifted: rgba(255, 255, 255, 0.16);
  --border-accented: rgba(255, 255, 255, 0.3);

  --bg: #0c0c0d;
  --bg-muted: #111112;
  --bg-lifted: #151517;
  --bg-accented: #1e1e1f;
  --bg-inverted: #e11d2e; /* see --grayscale */

  --yellow-200: #fde68a;
  --yellow-300: #fcd34d;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --emerald-300: #6ee7b7;
  --pink-400: #f472b6;

  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;

  --outline-sm: 1px;
  --outline-md: 2px;
  --outline-lg: 3px;

  /* almost square everywhere, as on the site */
  --rounding-sm: 2px;
  --rounding-md: 2px;
  --rounding-lg: 2px;

  --letter-spacing: 0em;
  --disabled-opacity: 40%;

  /* Bootstrap's own */
  --font-family-sans-serif: var(--hn-body);

  --hn-gutter: clamp(20px, 4vw, 32px);
}

/* ---------- 3. page basics and type ---------- */

/* Nexus gives html and body --bg-inverted (now the red), so both are pinned to the page colour */
html,
html body {
  background-color: var(--hn-bg);
}

html {
  color-scheme: dark;
}

/* The site's scrollbar, the Havoc Command rail (src/styles/global.css): a slim steel thumb led by a red cap. Being
   12px like the site's, it also keeps the page exactly as wide as the site's, so the two line up. Firefox only takes
   two colours. No scrollbar-color for Chrome: since Chrome 121 it switches these styles off. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: #4a4a51 var(--hn-bg-deep);
  }
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: var(--hn-bg-deep);
}

::-webkit-scrollbar-track {
  background: var(--hn-bg-deep);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
}

::-webkit-scrollbar-thumb {
  min-height: 56px;
  border: solid transparent;
  border-width: 3px 4px;
  background: linear-gradient(180deg, var(--hn-red) 0 14px, transparent 14px 17px, #56565e 17px, #393940 100%);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  border-width: 3px;
  background: linear-gradient(180deg, var(--hn-red-hover) 0 14px, transparent 14px 17px, #7a7a83 17px, #4e4e56 100%);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  border-width: 3px;
  background: linear-gradient(180deg, var(--hn-red-hover) 0 14px, transparent 14px 17px, var(--hn-red) 17px, var(--hn-red-deep) 100%);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: var(--hn-bg-deep);
}

body {
  color: var(--hn-text-2);
  font-family: var(--hn-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
body .btn,
body input,
body select,
body textarea,
body button,
body .tooltip,
body .popover {
  font-family: var(--hn-body);
}

body h1,
body h2,
body .h1,
body .h2 {
  color: var(--hn-text);
  font-family: var(--hn-display);
  font-weight: 400; /* Anton has one weight; never let the browser fake bold */
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

body h3,
body h4,
body h5,
body h6,
body .h3,
body .h4,
body .h5,
body .h6 {
  color: var(--hn-text);
  font-weight: 600;
}

body strong,
body b,
body dt,
body label {
  color: var(--hn-text);
}

body a {
  color: var(--hn-red-hover); /* #e11d2e is only ~4:1 on the dark page; small red text uses the lighter red */
  transition: color var(--hn-ease);
}

body a:hover {
  color: var(--hn-text);
}

body hr {
  border-top-color: var(--hn-line);
}

body .text-muted,
body small,
body .small {
  color: var(--hn-text-3) !important;
}

body .text-primary {
  color: var(--hn-red-hover) !important;
}

body .text-dark,
body .text-body {
  color: var(--hn-text) !important;
}

body .text-success {
  color: var(--hn-ok-text) !important;
}

body .text-warning {
  color: var(--hn-warn-text) !important;
}

body .text-info {
  color: var(--hn-info-text) !important;
}

body .text-danger {
  color: var(--hn-red-hover) !important;
}

body .bg-white,
body .bg-light {
  background-color: var(--hn-surface) !important;
}

::selection {
  background: var(--hn-red);
  color: #fff;
}

/* Focus: a visible 2px red outline with offset, everywhere (Bootstrap's blue glow off) */
body :focus-visible {
  outline: 2px solid var(--hn-red);
  outline-offset: 3px;
}

body .btn:focus,
body .btn.focus,
body .form-control:focus,
body .custom-select:focus,
body .page-link:focus,
body .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}

/* Small uppercase label, as on the site (.label there; WHMCS already uses .label for status badges) */
.hn-label {
  font-family: var(--hn-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 12px 18px;
  background: var(--hn-red);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.hn-skip-link:focus {
  transform: none;
  outline-color: #fff;
}

body section#main-body {
  background-color: transparent; /* Nexus lifts the page body onto a lighter surface; here it's the page */
  padding-top: 32px;
  padding-bottom: 72px;
}

#main-body:focus {
  outline: none;
}

/* The site's width and gutters: 1680px of content plus the gutters, as src/styles/tokens.css --container
   (Bootstrap's rows keep their own -15px margins inside them) */
body .container {
  max-width: 1744px;
  padding-left: var(--hn-gutter);
  padding-right: var(--hn-gutter);
}

/* The site's eyebrow: a red 26×2 rule, then a wide-tracked label */
.hn-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--hn-label);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(240, 240, 242, 0.7);
}

.hn-eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--hn-red);
}

body .hn-red {
  color: var(--hn-red);
}

/* ---------- 4. Bootstrap's parts, dark ---------- */

/* Buttons: the site's square buttons. Red is the action; everything else is the outlined "ghost". */
body .btn {
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color var(--hn-ease), border-color var(--hn-ease), color var(--hn-ease);
}

body .btn:not(.btn-sm):not(.btn-xs):not(.btn-link):not(.nav-link) {
  min-height: 44px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

body .btn-primary,
body .btn-success,
body .btn-primary:disabled,
body .btn-success:disabled {
  background-color: var(--hn-red);
  border-color: var(--hn-red);
  color: #fff;
}

body .btn-primary:hover,
body .btn-success:hover,
body .btn-primary:focus,
body .btn-success:focus,
body .btn-primary:not(:disabled):not(.disabled):active,
body .btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--hn-red-press);
  border-color: var(--hn-red-press);
  color: #fff;
}

/* The sheen: a light band at the brand's 118° crosses the red buttons on hover and focus */
body .btn-primary,
body .btn-success {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body .btn-primary::after,
body .btn-success::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.26) 48%, rgba(255, 255, 255, 0.08) 54%, transparent 66%);
  transform: translateX(-130%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  body .btn-primary:hover::after,
  body .btn-primary:focus-visible::after,
  body .btn-success:hover::after,
  body .btn-success:focus-visible::after {
    transform: translateX(130%);
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

body .btn-default,
body .sidebar .btn-default,
body .btn-secondary,
body .btn-light,
body .btn-info,
body .btn-outline-primary,
body .btn-outline-secondary,
body .btn-outline-light,
body .btn-outline-dark,
body .btn-outline-info,
body .btn-outline-success,
body #main-body .btn-outline-primary {
  background-color: transparent;
  border-color: rgba(240, 240, 242, 0.4);
  color: var(--hn-text);
}

body .btn-default:hover,
body .btn-secondary:hover,
body .btn-light:hover,
body .btn-info:hover,
body .btn-outline-primary:hover,
body .btn-outline-secondary:hover,
body .btn-outline-light:hover,
body .btn-outline-dark:hover,
body .btn-outline-info:hover,
body .btn-outline-success:hover,
body #main-body .btn-outline-primary:hover,
body .btn-default:not(:disabled):not(.disabled):active,
body .btn-default:not(:disabled):not(.disabled).active,
body .btn-outline-secondary:not(:disabled):not(.disabled).active {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--hn-text);
  color: var(--hn-text);
}

body .btn-default.disabled:hover,
body .btn-default[disabled]:hover,
body fieldset[disabled] .btn-default {
  background-color: transparent !important;
}

/* Red is the action colour here, so a destructive button is outlined red rather than filled */
body .btn-danger,
body .btn-outline-danger {
  background-color: transparent;
  border-color: var(--hn-red);
  color: var(--hn-red-hover);
}

body .btn-danger:hover,
body .btn-outline-danger:hover,
body .btn-danger:focus {
  background-color: var(--hn-red-tint);
  border-color: var(--hn-red-hover);
  color: var(--hn-text);
}

body .btn-warning,
body .btn-outline-warning {
  background-color: transparent;
  border-color: var(--hn-warn-text);
  color: var(--hn-warn-text);
}

body .btn-warning:hover,
body .btn-outline-warning:hover {
  background-color: rgba(251, 191, 36, 0.12);
  border-color: var(--hn-warn-text);
  color: var(--hn-text);
}

body .btn-dark {
  background-color: var(--hn-surface-2);
  border-color: var(--hn-line-strong);
  color: var(--hn-text);
}

body .btn-link {
  color: var(--hn-red-hover);
}

body .btn-link:hover {
  color: var(--hn-text);
}

body .btn-lg {
  min-height: 52px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Fields */
body .form-control,
body .custom-select,
body .custom-file-label,
body select.form-control,
body textarea.form-control,
body #registration .field,
body #registration .form-control {
  background-color: var(--hn-field);
  border: 1px solid var(--hn-field-line);
  border-radius: 0;
  color: var(--hn-text);
}

body .form-control:not(textarea),
body .custom-select {
  min-height: 44px;
}

body .form-control::placeholder {
  color: rgba(240, 240, 242, 0.42);
  opacity: 1;
}

body .form-control:focus,
body .custom-select:focus,
body #registration .form-control:focus {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--hn-red);
  color: var(--hn-text);
}

body .form-control:disabled,
body .form-control[readonly],
body .custom-select:disabled,
body #registration .field[disabled],
body #registration .field[readonly],
body #registration .form-control[disabled],
body #registration .form-control[readonly] {
  background-color: var(--hn-bg-raise);
  color: var(--hn-text-3);
}

body select.form-control option,
body .custom-select option {
  background-color: var(--hn-surface);
  color: var(--hn-text);
}

body .custom-select,
body select.form-control:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background: var(--hn-field) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.85rem center / 14px 14px;
}

body .input-group-text {
  background-color: var(--hn-surface-2);
  border-color: var(--hn-field-line);
  border-radius: 0;
  color: var(--hn-text-2);
}

body .custom-file-label::after {
  background-color: var(--hn-surface-2);
  color: var(--hn-text);
  border-radius: 0;
}

body .form-text,
body .help-block {
  color: var(--hn-text-3);
}

body .is-invalid,
body .has-error .form-control,
body form[data-role=json-form] .has-error input.form-control {
  background-color: rgba(225, 29, 46, 0.08) !important;
  border-color: var(--hn-red-hover) !important;
}

body .invalid-feedback {
  color: var(--hn-red-hover);
}

/* Ticks, radios and switches: square, red when on */
body .custom-control-label::before {
  background-color: var(--hn-field);
  border: 1px solid rgba(240, 240, 242, 0.4);
}

body .custom-checkbox .custom-control-label::before {
  border-radius: 0;
}

body .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hn-red);
  border-color: var(--hn-red);
}

body .custom-control-input[disabled] ~ .custom-control-label::before,
body .custom-control-input:disabled ~ .custom-control-label::before {
  background-color: var(--hn-bg-raise);
}

body input[type='checkbox'],
body input[type='radio'] {
  accent-color: var(--hn-red);
}

/* Cards and panels */
body .card,
body .mc-promo-manage,
body .mc-promo-login,
body .panel {
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-radius: 2px;
  color: var(--hn-text-2);
}

body .card-header,
body .card-footer,
body .panel-heading,
body .panel-footer {
  background-color: transparent;
  border-color: var(--hn-line);
}

body .card-title,
body .panel-title {
  color: var(--hn-text);
  font-family: var(--hn-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-transform: uppercase; /* Anton is only ever set in capitals (the site's tokens.css) */
}

body .card-header .card-title,
body .sidebar .card-title {
  font-family: var(--hn-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

/* Lists (the sidebar's menus) */
body .list-group-item,
body .list-group-item.disabled,
body .list-group-item:disabled {
  background-color: transparent;
  border-color: var(--hn-line);
  color: var(--hn-text-2);
}

body .list-group-item-action:hover,
body .list-group-item-action:focus {
  background-color: var(--hn-surface-2);
  color: var(--hn-text);
}

body .list-group-item.active,
body .list-group-item-action.active {
  background-color: var(--hn-red-tint);
  border-color: var(--hn-line);
  box-shadow: inset 2px 0 0 var(--hn-red); /* the site's red left edge */
  color: var(--hn-text);
}

body .list-group-item .badge {
  background-color: var(--hn-surface-2);
  color: var(--hn-text);
}

/* Tables */
body .table {
  color: var(--hn-text-2);
}

body .table th,
body .table td,
body .table thead th,
body .table tbody + tbody,
body .table-bordered,
body .table-bordered th,
body .table-bordered td {
  border-color: var(--hn-line);
}

body .table thead th,
body table.table-list thead th,
body .table .thead-light th {
  background-color: transparent;
  color: var(--hn-text-3);
  font-family: var(--hn-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body .table-list > tbody > tr > td,
body .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--hn-surface);
}

body .table-list > tbody > tr:hover > td,
body .table-hover tbody tr:hover {
  background-color: var(--hn-surface-2);
  color: var(--hn-text);
}

body .dataTables_wrapper table.table-list thead th.sorting_asc,
body .dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: transparent;
  color: var(--hn-text);
}

body .dataTables_wrapper .dataTables_filter label .form-control,
body .dataTables_wrapper .dataTables_length select {
  background-color: var(--hn-field);
  color: var(--hn-text);
}

body .dataTables_wrapper .dataTables_info {
  color: var(--hn-text-3);
}

/* WHMCS's remaining sortable tables (email history, quotes, add-ons): rows on hairlines like HavoNode's own tables
   (section 15), not boxed and filled */
body .table-container .table-list,
body .dataTables_wrapper table.table-list {
  border: 0;
  background: transparent;
}

body .table-list > tbody > tr > td {
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: transparent;
  border-bottom: 1px solid var(--hn-line);
  font-size: 15px;
}

body .table-list > tbody > tr:hover > td {
  background-color: rgba(255, 255, 255, 0.03);
}

body .table-list thead th {
  border-bottom: 1px solid var(--hn-line-strong);
}

body .dataTables_wrapper .dataTables_filter label .form-control,
body .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--hn-field-line);
  border-radius: 0;
}

/* Menus, popovers, tooltips and modals: a dark panel with the site's red top edge */
body .dropdown-menu,
body .popover,
body .modal-content,
body .toast {
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line-strong);
  border-radius: 0;
  box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.6);
  color: var(--hn-text-2);
}

body .dropdown-menu,
body .modal-content {
  border-top: 2px solid var(--hn-red);
}

body .dropdown-item {
  color: var(--hn-text-2);
}

body .dropdown-item:hover,
body .dropdown-item:focus {
  background-color: var(--hn-surface-2);
  color: var(--hn-text);
}

body .dropdown-item.active,
body .dropdown-item:active {
  background-color: var(--hn-red-tint);
  color: var(--hn-text);
}

body .dropdown-divider {
  border-top-color: var(--hn-line);
}

body .popover-header,
body .toast-header {
  background-color: var(--hn-surface-2);
  border-bottom-color: var(--hn-line);
  color: var(--hn-text);
}

body .popover-body {
  color: var(--hn-text-2);
}

body .bs-popover-top > .arrow::after,
body .bs-popover-auto[x-placement^='top'] > .arrow::after {
  border-top-color: var(--hn-surface);
}

body .bs-popover-right > .arrow::after,
body .bs-popover-auto[x-placement^='right'] > .arrow::after {
  border-right-color: var(--hn-surface);
}

body .bs-popover-bottom > .arrow::after,
body .bs-popover-auto[x-placement^='bottom'] > .arrow::after {
  border-bottom-color: var(--hn-surface);
}

body .bs-popover-left > .arrow::after,
body .bs-popover-auto[x-placement^='left'] > .arrow::after {
  border-left-color: var(--hn-surface);
}

body .tooltip-inner {
  background-color: var(--hn-surface-2);
  border: 1px solid var(--hn-line-strong);
  border-radius: 0;
  color: var(--hn-text);
}

body .modal-header,
body .modal-footer {
  border-color: var(--hn-line);
}

body .modal-backdrop.show {
  opacity: 0.7;
  background-color: #050506;
}

body .close {
  color: var(--hn-text);
  text-shadow: none;
  opacity: 0.7;
}

body .close:hover {
  color: var(--hn-text);
  opacity: 1;
}

/* Alerts: dark, with a coloured left edge */
body .alert {
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-steel-muted);
  border-radius: 0;
  color: var(--hn-text);
}

body .alert-success {
  border-left-color: var(--hn-ok);
}

body .alert-info {
  border-left-color: var(--info);
}

body .alert-warning {
  border-left-color: var(--warning);
}

body .alert-danger,
body .alert-error {
  border-left-color: var(--hn-red);
}

body .alert a,
body .alert .alert-link {
  color: var(--hn-text);
  text-decoration: underline;
}

body .alert:has(form) {
  background-color: var(--hn-surface);
}

body .alert hr {
  border-top-color: var(--hn-line);
}

/* Tabs, pills and pagination */
body .nav-tabs {
  border-bottom-color: var(--hn-line);
}

body .nav-tabs .nav-link {
  border: 0;
  border-radius: 0;
  color: var(--hn-text-2);
}

body .nav-tabs .nav-link:hover,
body .nav-tabs .nav-link:focus {
  color: var(--hn-text);
}

body .nav-tabs .nav-link.active,
body .nav-tabs .nav-item.show .nav-link {
  background-color: transparent;
  box-shadow: inset 0 -2px 0 var(--hn-red);
  color: var(--hn-text);
}

body .nav-pills .nav-link {
  border-radius: 0;
  color: var(--hn-text-2);
}

body .nav-pills .nav-link.active,
body .nav-pills .show > .nav-link {
  background-color: var(--hn-red-tint);
  box-shadow: inset 2px 0 0 var(--hn-red);
  color: var(--hn-text);
}

body .responsive-tabs-sm,
body .responsive-tabs-sm-connector .channel,
body div.product-details-tab-container {
  background-color: var(--hn-surface);
}

body .responsive-tabs-sm .nav-item a:hover {
  background-color: var(--hn-surface-2);
}

body .responsive-tabs-sm .nav-item a.active {
  background-color: var(--hn-surface) !important;
}

body .page-link,
body .page-item.disabled .page-link,
body .pagination > li > a,
body .pagination > li > span {
  background-color: var(--hn-surface);
  border-color: var(--hn-line);
  border-radius: 0 !important;
  color: var(--hn-text-2);
}

body .page-link:hover {
  background-color: var(--hn-surface-2);
  border-color: var(--hn-line-strong);
  color: var(--hn-text);
}

body .page-item.active .page-link,
body .pagination > .active > a,
body .pagination > .active > span,
body .pagination > .active > a:hover {
  background-color: var(--hn-red);
  border-color: var(--hn-red);
  color: #fff;
}

body .page-item.disabled .page-link {
  color: var(--hn-text-3);
}

/* Badges and the bits in between */
body .badge {
  border-radius: 0;
  font-weight: 600;
}

body .badge-light {
  background-color: var(--hn-surface-2);
  color: var(--hn-text);
}

body .badge-dark,
body .badge-secondary {
  background-color: var(--hn-surface-2);
  color: var(--hn-text);
}

body .badge-primary {
  background-color: var(--hn-red);
  color: #fff;
}

body .progress {
  background-color: var(--hn-surface-2);
  border-radius: 0;
}

body .progress-bar {
  background-color: var(--hn-red);
}

body .breadcrumb {
  background-color: transparent;
}

body .jumbotron {
  background-color: var(--hn-surface);
}

body .img-thumbnail {
  background-color: var(--hn-surface);
  border-color: var(--hn-line);
}

body mark,
body .mark {
  background-color: rgba(251, 191, 36, 0.24);
  color: var(--hn-text);
}

body code {
  color: var(--hn-red-hover);
}

body pre,
body kbd {
  background-color: var(--hn-bg-deep);
  border: 1px solid var(--hn-line);
  color: var(--hn-text);
}

body .border,
body .border-top,
body .border-right,
body .border-bottom,
body .border-left {
  border-color: var(--hn-line) !important;
}

body .custom-range::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.14);
}

body .custom-range::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.14);
}

body .custom-range::-webkit-slider-thumb {
  background-color: var(--hn-red);
}

body .custom-range::-moz-range-thumb {
  background-color: var(--hn-red);
}

/* The phone number field's country list (intl-tel-input) */
body .iti__country-list {
  background-color: var(--hn-surface);
  border-color: var(--hn-line-strong);
  color: var(--hn-text-2);
}

body .iti__country.iti__highlight {
  background-color: var(--hn-surface-2);
}

body .iti__dial-code {
  color: var(--hn-text-3);
}

/* ---------- 5. header ---------- */

body header.header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--hn-bg);
  border-bottom: 1px solid var(--hn-line);
  box-shadow: none;
}

/* The bar: wordmark, menus, cart */
.hn-bar {
  padding: 0;
  background: transparent;
}

.hn-bar > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 32px;
  min-height: 80px;
}

.hn-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin: 0;
  padding: 6px 0;
}

.hn-brand__logo {
  display: block;
  width: auto;
  height: 30px;
}

/* BILLING, beside the wordmark, as STATUS sits on the status page */
.hn-brand__label {
  padding-left: 16px;
  border-left: 1px solid var(--hn-line-strong);
  font-family: var(--hn-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  order: 2;
}

body .hn-bar .collapse,
body .hn-bar .collapsing {
  order: 3;
  flex-basis: 100%;
}

body .hn-toolbar .btn.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--hn-line-strong);
  border-radius: 0;
  color: var(--hn-text);
}

body .hn-toolbar .btn.nav-link:hover {
  border-color: rgba(240, 240, 242, 0.4);
  color: var(--hn-text);
}

body .hn-toolbar #cartItemCount,
body .hn-toolbar .hn-count {
  min-width: 20px;
  padding: 3px 6px;
  background-color: var(--hn-red);
  border-radius: 0;
  color: #fff;
  font-size: 11px;
}

/* The Game Panel button beside the cart: the site's red header button (Header.astro's .btn--red), with the sheen
   every .btn-primary here has. It sits in the toolbar's .navbar-nav, so it has to outweigh the menu links' rules
   (body .hn-bar .navbar-nav > li > a), which would strip its padding and turn its text red on hover. */
body .hn-bar .hn-panel-btn,
body .hn-bar .navbar-nav > li > a.hn-panel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 0;
  color: #fff;
  font-family: var(--hn-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

/* Below 1200px the menu's big uppercase links and their dividers (body .hn-bar .navbar-nav > li) are for the
   drawer, not the bar's buttons */
body .hn-bar .hn-toolbar.navbar-nav > li {
  border-bottom: 0;
}

body .hn-bar .navbar-nav > li > a.hn-panel-btn:hover,
body .hn-bar .navbar-nav > li > a.hn-panel-btn:focus {
  color: #fff;
}

/* The site's 10px between header buttons (Nexus's header.header .navbar-nav { gap: 4px } outweighed .hn-toolbar) */
body header.header .hn-toolbar {
  gap: 10px;
}

.hn-drawer-panel,
.hn-drawer-alerts,
.hn-drawer-admin,
.hn-menu-count {
  display: none;
}

/* Return to admin (only staff see it): red, as it was in Nexus's account strip */
body .hn-toolbar .btn.nav-link.hn-admin-btn,
body .hn-toolbar .btn.nav-link.hn-admin-btn:hover {
  color: var(--hn-red-hover);
}

/* Below 1200px the menu is a drawer: Return to admin goes to its foot */
@media (max-width: 1199.98px) {
  .hn-toolbar__admin {
    display: none !important;
  }

  .hn-drawer-admin {
    display: block;
    padding-top: 16px;
  }

  /* Outweighs Nexus's header.header .navbar a (grey) */
  body header.header .hn-bar .hn-drawer-admin a.btn {
    width: 100%;
    color: var(--hn-red-hover);
  }
}

/* Phones: no room on the bar, so the Game Panel button is the menu's last item, full width, as the site's menu
   buttons are. Notifications go in the menu too, and the menu button carries their count. */
@media (max-width: 767.98px) {
  .hn-toolbar__panel,
  .hn-toolbar__alerts {
    display: none !important;
  }

  .hn-menu-count {
    display: inline-block;
  }

  .hn-drawer-alerts {
    display: block;
    padding-top: 28px;
  }

  .hn-drawer-alerts .hn-eyebrow {
    margin-bottom: 8px;
  }

  body .hn-drawer-alerts .client-alerts {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body .hn-drawer-alerts .client-alerts a {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hn-line);
    color: var(--hn-text-2);
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
  }

  body .hn-drawer-alerts .client-alerts i {
    flex: none;
    margin-top: 4px;
    color: var(--hn-red-hover);
  }

  .hn-drawer-panel {
    display: block;
    padding-top: 20px;
  }

  /* Heavy enough to beat Nexus's header.header .navbar a (grey text) and the 44px buttons rule above, whose four
     :not()s each count */
  body header.header .hn-bar .hn-drawer-panel a.btn.hn-panel-btn,
  body header.header .hn-bar .hn-drawer-panel a.btn.hn-panel-btn:hover,
  body header.header .hn-bar .hn-drawer-panel a.btn.hn-panel-btn:focus {
    width: 100%;
    min-height: 52px;
    color: #fff;
    font-size: 15px;
  }
}

/* WHMCS's menus (primary on the left, account on the right). Nexus's navbar.tpl writes plain <li> and <a>
   (no .nav-item or .nav-link), and puts .dropdown-item on both a menu entry's <li> and its <a>. */
/* Nexus sets the header's container to 15px with !important (header.header .navbar .container:has(.navbar-collapse)),
   which put the wordmark 17px left of the page below it */
body header.header .hn-bar > .container:has(.navbar-collapse),
body .hn-bar > .container {
  padding-left: var(--hn-gutter) !important;
  padding-right: var(--hn-gutter) !important;
}

body .hn-bar .navbar-nav > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 12px 0;
  color: rgba(240, 240, 242, 0.86);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

body .hn-bar .navbar-nav > li > a:hover,
body .hn-bar .navbar-nav > li.show > a {
  color: var(--hn-red-hover);
}

body .hn-bar .navbar-nav > li.active > a {
  color: var(--hn-text);
  box-shadow: inset 0 -2px 0 var(--hn-red);
}

body .hn-bar .dropdown-toggle::after {
  margin-left: 2px;
  border-top-color: currentColor;
  opacity: 0.7;
}

body .hn-bar .dropdown-menu {
  min-width: 240px;
  margin-top: 10px;
  padding: 6px;
}

body .hn-bar li.dropdown-item {
  padding: 0;
  background: transparent;
}

body .hn-bar a.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px !important; /* Nexus sets px-2 py-0, which are !important utilities */
  color: var(--hn-text-2);
  font-size: 14.5px;
  white-space: normal;
}

body .hn-bar a.dropdown-item:hover,
body .hn-bar a.dropdown-item:focus {
  background: var(--hn-surface-2);
  color: var(--hn-text);
}

/* Wide screens: one row, menus between the wordmark and the cart */
@media (min-width: 1200px) {
  .hn-bar > .container {
    flex-wrap: nowrap;
  }

  body .hn-bar .collapse {
    order: 2;
    flex-basis: auto;
    flex-grow: 1;
  }

  .hn-toolbar {
    order: 3;
    margin-left: 0;
  }

  body .hn-bar #nav {
    gap: 0 28px;
    margin-left: 8px;
  }

  body .hn-bar .hn-nav-secondary {
    gap: 0 22px;
  }

  /* Nexus's script folds the menu into "More" as soon as #nav is 30px tall (autoCollapse('#nav', 30) in its
     scripts.js), so the links are 20px tall in the layout, with a 44px hit area drawn around them. The menu then
     folds only when the links really wrap onto a second row. The hit area also carries the current page's line. */
  body .hn-bar .navbar-nav > li {
    position: relative;
  }

  body .hn-bar .navbar-nav > li > a {
    min-height: 0;
    padding: 0;
    line-height: 20px;
  }

  body .hn-bar .navbar-nav > li > a::before {
    content: '';
    position: absolute;
    inset: -12px 0;
  }

  body .hn-bar .navbar-nav > li.active > a {
    box-shadow: none;
  }

  body .hn-bar .navbar-nav > li.active > a::before {
    border-bottom: 2px solid var(--hn-red);
  }
}

/* Narrower: the menus drop into a full-width drawer under the bar, like the site's: big Anton links with
   hairlines between them, red stripes in the bottom corner */
@media (max-width: 1199.98px) {
  .hn-bar > .container {
    min-height: 68px;
  }

  body .hn-bar .navbar-collapse {
    position: relative;
    margin: 0 calc(var(--hn-gutter) * -1);
    padding: 8px var(--hn-gutter) 32px;
    border-top: 1px solid var(--hn-line);
    background:
      radial-gradient(420px 260px at 100% 100%, rgba(225, 29, 46, 0.14), transparent 70%),
      var(--hn-bg);
    isolation: isolate;
  }

  body .hn-bar .navbar-collapse::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: min(420px, 100%);
    height: 260px;
    pointer-events: none;
    background:
      linear-gradient(118deg, transparent 62%, rgba(225, 29, 46, 0.5) 62.25%, transparent 62.9%),
      linear-gradient(118deg, transparent 68%, rgba(225, 29, 46, 0.24) 68.3%, transparent 70%);
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 95%);
    mask-image: linear-gradient(to top, #000 35%, transparent 95%);
  }

  body .hn-bar .navbar-nav > li {
    border-bottom: 1px solid var(--hn-line);
  }

  body .hn-bar .navbar-nav > li > a {
    padding: 16px 0 12px;
    color: var(--hn-text);
    font-family: var(--hn-display);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
  }

  body .hn-bar .navbar-nav > li.active > a {
    box-shadow: none;
    color: var(--hn-red);
  }

  body .hn-bar .hn-nav-secondary {
    margin-top: 16px;
  }

  body .hn-bar .dropdown-menu {
    margin: 0 0 12px;
    border-top-width: 1px;
    box-shadow: none;
  }
}

/* Phones: the wordmark, cart and menu button on one row, as on the site. The BILLING label goes (the page's
   title still says it), and the logo steps down like the site's at the same widths. */
@media (max-width: 575.98px) {
  .hn-bar > .container {
    column-gap: 12px;
  }

  .hn-brand__label {
    display: none;
  }

  .hn-brand__logo {
    height: 22px;
  }
}

@media (max-width: 359.98px) {
  .hn-brand__logo {
    height: 18px;
  }
}

/* The breadcrumb, in labels */
body .master-breadcrumb {
  background-color: transparent;
  border-bottom: 1px solid var(--hn-line);
}

body .master-breadcrumb .breadcrumb {
  margin: 0;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--hn-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body .master-breadcrumb .breadcrumb-item,
body .master-breadcrumb .breadcrumb-item a {
  color: var(--hn-text-3);
}

body .master-breadcrumb .breadcrumb-item a:hover {
  color: var(--hn-red-hover);
}

body .master-breadcrumb .breadcrumb-item.active {
  color: var(--hn-text);
}

body .master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--hn-red);
}

/* ---------- 6. footer ---------- */

body footer.footer.hn-footer {
  margin: 0;
  padding: 0;
  background-color: var(--hn-bg-deep);
  border-top: 1px solid var(--hn-line);
  color: var(--hn-text-3);
}

.hn-footer > .container {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: 60px;
  padding-bottom: 36px;
}

.hn-footer__top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 20px;
}

.hn-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hn-footer__brand img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

.hn-footer__brand p {
  max-width: 300px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(240, 240, 242, 0.66);
}

.hn-footer__col .hn-label {
  margin: 0 0 14px;
  font-size: 10.5px;
}

.hn-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

body .hn-footer__col a {
  display: inline-block;
  padding: 4px 0;
  line-height: 1.25;
  color: rgba(240, 240, 242, 0.82);
  text-decoration: none;
}

body .hn-footer__col a:hover {
  color: var(--hn-red-hover);
}

@media (pointer: coarse) {
  .hn-footer__col ul {
    gap: 0;
  }

  body .hn-footer__col a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
}

.hn-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hn-line);
  font-size: 12.5px;
  color: rgba(240, 240, 242, 0.6);
}

.hn-footer__bottom p {
  margin: 0;
}

.hn-footer__bottom .hn-label {
  font-size: 10.5px;
  color: inherit;
}

body .hn-footer__locale {
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--hn-line-strong);
  color: var(--hn-text-2);
  font-size: 12.5px;
}

body .hn-footer__locale:hover {
  border-color: rgba(240, 240, 242, 0.4);
  color: var(--hn-text);
}

@media (min-width: 768px) {
  .hn-footer__top {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    column-gap: 72px;
  }

  .hn-footer__brand {
    grid-column: auto;
  }
}

/* The language and currency picker */
body .modal-localisation .modal-content {
  background-color: var(--hn-surface);
}

body .modal-localisation .h5 {
  color: var(--hn-text);
}

body .modal-localisation .item-selector .item {
  border: 1px solid var(--hn-line);
  border-radius: 0;
  color: var(--hn-text-2);
}

body .modal-localisation .item-selector .item.active,
body .modal-localisation .item-selector .item:hover {
  background-color: var(--hn-red-tint);
  border-color: var(--hn-red);
  color: var(--hn-text);
}

/* ---------- 7. WHMCS's pages ---------- */

/* The portal home (homepage.tpl): an intro in the site's hero style, then six tiles */
.hn-home {
  display: grid;
  gap: 56px;
  padding: 24px 0 8px;
}

.hn-home__intro {
  display: grid;
  gap: 20px;
  max-width: 820px;
}

body body .hn-home .hn-home__title {
  margin: 0;
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: 0.95;
}

.hn-home__lede {
  max-width: 60ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(240, 240, 242, 0.74);
}

.hn-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.hn-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .hn-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  padding: 28px 28px 30px;
  overflow: hidden;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  color: var(--hn-text-2);
  text-decoration: none;
  isolation: isolate;
  transition: background-color var(--hn-ease), border-color var(--hn-ease), box-shadow var(--hn-ease);
}

body .hn-tile svg {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--hn-red);
}

.hn-tile__name {
  color: var(--hn-text);
  font-family: var(--hn-display);
  font-size: 28px;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.hn-tile__note {
  font-size: 14px;
  line-height: 1.5;
}

/* Hover: the site's red left edge */
body .hn-tile:hover,
body .hn-tile:focus-visible {
  background-color: var(--hn-surface-2);
  border-color: var(--hn-line-strong);
  box-shadow: inset 2px 0 0 var(--hn-red);
  color: var(--hn-text-2);
}

body .hn-tile:hover .hn-tile__name {
  color: var(--hn-text);
}

/* The last tile carries the brand's red stripes, like the site's request tile */
.hn-tile--stripes::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 70%;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 62%, rgba(225, 29, 46, 0.45) 62.4%, transparent 63.2%),
    linear-gradient(118deg, transparent 69%, rgba(225, 29, 46, 0.22) 69.4%, transparent 71.5%);
}

@media (max-width: 991.98px) {
  .hn-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .hn-home {
    gap: 40px;
  }

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

  body .hn-tile {
    padding: 22px 22px 24px;
  }

  .hn-home__actions .btn {
    flex: 1 1 100%;
  }
}

/* Page headings */
body .primary-content > h1:first-child,
body .header-lined h1 {
  margin-bottom: 24px;
  font-size: clamp(34px, 4vw, 48px);
}

/* The sidebar: cards of menus */
body .sidebar .card {
  background-color: var(--hn-surface);
}

body .sidebar .card-header {
  padding: 14px 18px;
}

body .sidebar .list-group-item {
  padding: 12px 18px;
  font-size: 14px;
}

/* Client area home: the four tiles and the cards */
body .tiles .tile {
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  color: var(--hn-text-2);
  transition: background-color var(--hn-ease), border-color var(--hn-ease);
}

body .tiles .tile:hover {
  background-color: var(--hn-surface-2);
  border-color: var(--hn-line-strong);
}

body .tiles .tile .stat {
  color: var(--hn-text);
  font-family: var(--hn-display);
  font-weight: 400;
}

body .tiles .tile .title {
  font-family: var(--hn-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

body .tiles .tile .highlight {
  background-color: var(--hn-red) !important;
}

body .client-home-cards .card-header,
body .primary-content .client-home-cards .card .card-footer {
  background-color: transparent;
}

body .primary-content .client-home-cards .card .card-header .btn {
  background: transparent;
  border-color: rgba(240, 240, 242, 0.4);
  color: var(--hn-text);
}

body .primary-content .client-home-cards .card .card-header .btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hn-text);
  color: var(--hn-text);
}

body .action-icon-btns a {
  background-color: var(--hn-surface);
  border-color: var(--hn-line);
  color: var(--hn-text-2);
}

/* Banners WHMCS shows above the page */
body .verification-banner {
  background-color: var(--hn-surface);
  border-bottom: 1px solid var(--hn-line);
  color: var(--hn-text-2);
}

body .popover-user-notifications ul li a:hover,
body .select-account a:hover {
  background-color: var(--hn-surface-2);
}

body .continue-container,
body .invite-box,
body .view-ticket .posted-by,
body .view-ticket .attachment-list li figure,
body div.credit-card,
body .upgrade .product-to-be-upgraded {
  background-color: var(--hn-bg-raise);
  color: var(--hn-text-2);
}

body #registration .sub-heading span,
body .sub-heading span {
  background-color: var(--hn-bg);
  color: var(--hn-text);
  font-family: var(--hn-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body .sub-heading {
  border-top-color: var(--hn-line);
}

/* The ticket editor */
body .md-editor > .btn-toolbar,
body .md-editor > textarea.markdown-editor,
body .md-editor > .md-preview {
  background-color: var(--hn-bg-raise) !important;
  border-color: var(--hn-field-line) !important;
  color: var(--hn-text) !important;
}

body .md-editor .btn-toolbar .btn {
  background: transparent;
  border-color: var(--hn-line);
  color: var(--hn-text-2);
}

body .md-preview table,
body .markdown-content table {
  background-color: var(--hn-surface);
}

body .md-preview table > thead > tr > th,
body .markdown-content table > thead > tr > th {
  background-color: var(--hn-surface-2);
}

body .md-preview pre,
body .markdown-content pre {
  background-color: var(--hn-bg-deep);
}

/* Upgrades, domain pricing and the promo boxes WHMCS can show */
body .upgrade .products .product,
body .featured-tld,
body .promo-banner,
body .home-domain-search .input-group-wrapper {
  background-color: var(--hn-surface);
  border-color: var(--hn-line);
  color: var(--hn-text-2);
}

body .featured-tld .price,
body .domain-pricing .tld-pricing-header div:nth-child(odd) {
  background-color: var(--hn-surface-2);
}

body .domain-pricing .tld-row {
  border-bottom-color: var(--hn-line);
}

body .domain-pricing .tld-row.highlighted {
  background: var(--hn-red-tint);
}

/* Status labels on services, invoices and tickets: square, in labels */
body .label,
body .status {
  border-radius: 0;
  font-family: var(--hn-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A destructive button that can't be used (an account owner's Remove Access): Bootstrap fills it solid red */
body .btn-danger.disabled,
body .btn-danger:disabled {
  background: transparent;
  border-color: rgba(225, 29, 46, 0.4);
  color: var(--hn-text-3);
}

/* WHMCS's information badges (an account's OWNER, a ticket's requestor): outlined, like HavoNode's status labels */
body .label-info,
body .label-primary,
body .label-default,
body .badge-info {
  background: transparent;
  border: 1px solid var(--hn-line-strong);
  color: var(--hn-text-2);
}

/* These borrow Nexus's --bg-inverted and --grayscale, now the red, which would read as an error: neutral instead */
body .status-fraud,
body .status-expired,
body .status-transferred-away,
body .status-payment-pending,
body .status-delivered,
body .status-lost,
body .status-dead,
body .bg-color-wet-asphalt,
body .bg-color-midnight-blue {
  background-color: #3a3a3e;
  color: var(--hn-text);
}

/* The busy overlay */
body #fullpage-overlay {
  background-color: rgba(5, 5, 6, 0.8);
  color: var(--hn-text);
}

/* Sign in and register: the form in a card with the red top edge, like the site's login menu */
body .login-form .card,
body .card.mw-540 {
  border-top: 2px solid var(--hn-red);
}

/* ---------- 8. the cart (Nexus cart on WHMCS's standard cart; its all.css loads after this file) ---------- */

body #order-standard_cart {
  color: var(--hn-text-2);
}

body #order-standard_cart .products .product,
body #order-standard_cart .cart-body .products .product header,
body #order-standard_cart .cart-body .view-cart-empty,
body #order-standard_cart .domain-selection-options,
body #order-standard_cart .panel .panel-heading,
body #order-standard_cart .panel .panel-footer,
body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
body #order-standard_cart .domain-pricing .tld-pricing-header div,
body #order-standard_cart .domain-promo-box,
body .secondary-cart-body #domainRenewals,
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded='true'] {
  background: var(--hn-surface);
  border-color: var(--hn-line);
  color: var(--hn-text-2);
}

body #order-standard_cart .domain-selection-options .option-selected {
  background: var(--hn-surface-2);
  border-color: var(--hn-red);
}

body #order-standard_cart .sub-heading span {
  background: var(--hn-bg);
}

body #order-standard_cart .domain-pricing .tld-filters .badge {
  background: var(--hn-surface-2);
  color: var(--hn-text);
}

body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success {
  background: var(--hn-red);
  color: #fff;
}

/* The order summary: a dark console with the red top edge */
body #order-standard_cart .order-summary {
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-top: 2px solid var(--hn-red);
  border-radius: 0;
}

body #order-standard_cart .order-summary h2 {
  font-size: 26px;
}

body #order-standard_cart .order-summary .summary-container {
  background-color: transparent;
  color: var(--hn-text-2);
}

body #order-standard_cart .order-summary .total-due-today .amt,
body #order-standard_cart .order-summary .total-due-today span:first-child {
  color: var(--hn-text);
  font-family: var(--hn-display);
  font-weight: 400;
}

body #order-standard_cart .header-lined h1 {
  font-size: clamp(34px, 4vw, 48px);
}

body #order-standard_cart .field-container,
body #order-standard_cart .product-info,
body #order-standard_cart .panel-addon {
  background-color: var(--hn-surface);
  border-color: var(--hn-line);
  color: var(--hn-text-2);
}

body #order-standard_cart .panel-addon-selected {
  border-color: var(--hn-red);
  box-shadow: inset 2px 0 0 var(--hn-red);
}

body #order-standard_cart .product-info .product-title {
  color: var(--hn-text);
  font-family: var(--hn-display);
  font-weight: 400;
}

/* After checkout: the Game Panel button (hooks/havonode.php), above WHMCS's "Go to your account" */
body #order-standard_cart .hn-order-next {
  max-width: 640px;
  margin: 32px auto;
  padding: 28px 24px 32px;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  box-shadow: inset 0 2px 0 var(--hn-red);
  text-align: center;
}

body #order-standard_cart .hn-order-next .hn-eyebrow {
  justify-content: center;
  margin-bottom: 14px;
}

body #order-standard_cart .hn-order-next p:not(.hn-eyebrow) {
  margin: 0 auto 22px;
  max-width: 52ch;
  color: var(--hn-text-2);
}

body #order-standard_cart .hn-order-next p:last-child {
  margin-bottom: 0;
}

/* The cart's fields (configure, checkout): the cart's all.css (#order-standard_cart .form-control, white) and
   Nexus's #frmConfigureProduct .form-control (black text) outweigh section 4's field style, so it's repeated here */
body #order-standard_cart .form-control,
body #order-standard_cart .field,
body #order-standard_cart .custom-select,
body #frmConfigureProduct .form-control {
  background-color: var(--hn-field);
  border: 1px solid var(--hn-field-line);
  border-radius: 0;
  color: var(--hn-text);
}

body #order-standard_cart select.form-control:not([multiple]):not([size]),
body #order-standard_cart .custom-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background: var(--hn-field) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.85rem center / 14px 14px;
}

body #order-standard_cart .form-control:focus,
body #order-standard_cart .field:focus,
body #order-standard_cart .custom-select:focus {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--hn-red);
  color: var(--hn-text);
}

body #order-standard_cart select option {
  background-color: var(--hn-surface);
  color: var(--hn-text);
}

/* Checkout: the account chooser (all.css paints it #f6f6f6 and #fff) */
body #order-standard_cart .account-select-container {
  border-color: var(--hn-line);
}

body #order-standard_cart .account-select-container div.account {
  background-color: var(--hn-surface);
  border-color: var(--hn-line);
  color: var(--hn-text-2);
}

body #order-standard_cart .account-select-container div.account.active {
  background-color: var(--hn-surface-2);
  box-shadow: inset 2px 0 0 var(--hn-red);
}

/* The account's currency tag (Nexus's light-blue .label-info) */
body #order-standard_cart .account-select-container .label {
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line-strong);
  color: var(--hn-text-2);
}

/* iCheck's radios and tick boxes (a light-blue image sprite) drawn in the site's style. Nexus turns the sprite black
   when checked or hovered with filter: grayscale(100%) brightness(70%) contrast(2), which would grey the red too. */
body .iradio_square-blue,
body .icheckbox_square-blue,
body #frmConfigureProduct .icheckbox_square-blue.checked,
body #frmConfigureProduct .icheckbox_square-blue.hover {
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--hn-field);
  border: 1px solid var(--hn-field-line);
  filter: none;
}

body .iradio_square-blue {
  border-radius: 50%;
}

body .iradio_square-blue.hover,
body .icheckbox_square-blue.hover {
  border-color: rgba(240, 240, 242, 0.4);
}

body .iradio_square-blue.checked,
body .icheckbox_square-blue.checked,
body .iradio_square-blue.hover,
body .icheckbox_square-blue.hover {
  filter: none;
}

body .iradio_square-blue.checked,
body .icheckbox_square-blue.checked {
  border-color: var(--hn-red);
}

body .iradio_square-blue.checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--hn-red);
}

body .icheckbox_square-blue.checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--hn-red);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body .iradio_square-blue.disabled,
body .icheckbox_square-blue.disabled {
  opacity: 0.4;
}

/* Every cart page: the cart's left column (its hidden product group, and a "View Cart" link the header's cart already
   gives) goes, and the page takes the width */
body #order-standard_cart .cart-sidebar,
body #order-standard_cart .sidebar-collapsed {
  display: none;
}

body #order-standard_cart .cart-body {
  width: 100%;
  float: none;
}

/* Checkout: the page's full width, headings in the site's sentence case on a hairline (Nexus centres
   them in capitals between two rules), and the fields' names above them (js/fields.js) instead of icons */
body #order-standard_cart .already-registered {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 8px;
}

body #order-standard_cart .already-registered > .float-right {
  float: none !important;
}

body #order-standard_cart .already-registered p {
  flex: 1 1 320px;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 16px;
  color: var(--hn-text-2);
}

body #order-standard_cart #btnAlreadyRegistered,
body #order-standard_cart #btnNewUserSignup {
  background: transparent;
  border: 1px solid var(--hn-line-strong);
  color: var(--hn-text);
}

body #order-standard_cart .sub-heading {
  height: auto;
  margin: 36px 0 18px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--hn-line);
  text-align: left;
}

body #order-standard_cart .sub-heading::before,
body #order-standard_cart .sub-heading::after {
  display: none;
}

body #order-standard_cart .sub-heading span {
  position: static;
  padding: 0;
  background: none;
  font-family: var(--hn-body);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hn-text);
}

/* !important: Nexus's form label rules (register page) and the cart's (checkout) are heavier than this */
body .prepend-icon.hn-labelled .hn-field-label {
  display: block !important;
  position: static !important;
  margin: 0 0 6px;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--hn-text) !important;
}

body .prepend-icon.hn-labelled .field,
body .prepend-icon.hn-labelled .form-control,
body #order-standard_cart .prepend-icon.hn-labelled .field {
  padding-left: 0.85rem;
}

body #order-standard_cart #frmCheckout .form-control,
body #order-standard_cart #frmCheckout .field {
  min-height: 48px;
}

/* What's due: the total as the site's readout, not a green alert */
body #order-standard_cart #totalDueToday {
  padding: 18px 20px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  color: var(--hn-text-2);
  font-size: 16px;
  text-align: left;
}

body #order-standard_cart #totalDueToday strong {
  margin-left: 6px;
  font-family: var(--hn-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--hn-text);
  vertical-align: -3px;
}

/* The mailing list: a heading in the page's style, and its switch red when on, not Bootstrap's green */
body #order-standard_cart .marketing-email-optin {
  margin: 28px 0;
  padding: 20px;
  background: var(--hn-bg-raise);
  border: 1px solid var(--hn-line);
}

body #order-standard_cart .marketing-email-optin h4 {
  font-family: var(--hn-body);
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  color: var(--hn-text);
}

body .bootstrap-switch {
  border-color: var(--hn-field-line);
  border-radius: 0;
  background: var(--hn-field);
}

/* !important: the switch's own stylesheet loads after this file */
body .bootstrap-switch .bootstrap-switch-handle-on {
  background: var(--hn-red) !important;
  color: #fff !important;
}

body .bootstrap-switch .bootstrap-switch-handle-off {
  background: var(--hn-surface-2) !important;
  color: var(--hn-text) !important;
}

body .bootstrap-switch .bootstrap-switch-label {
  background: var(--hn-steel-muted) !important;
}

body #order-standard_cart #btnCompleteOrder {
  min-width: 260px;
  min-height: 56px;
  font-weight: 700;
}

body #order-standard_cart #frmCheckout > .text-center {
  text-align: left !important;
}

/* The fraud notice: a quiet line, not a yellow box with a padlock */
body #order-standard_cart .checkout-security-msg {
  margin-top: 28px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

body #order-standard_cart .checkout-security-msg .fa-lock {
  display: none;
}

/* View cart: the Nexus cart's app (#nexus-root) draws in a shadow DOM, themed by its --vl- variables (mapped to
   section 2's). Its page puts section#main-body on white with !important: back to the site's page colour. Corners
   squared like the rest of the site, set on the app's host so they reach inside. Its headings and its "Estimated
   tax" line (always £0.00: HavoNode isn't VAT-registered) are inside the shadow DOM, out of this file's reach. */
body section#main-body {
  background: var(--hn-bg) !important;
}

body #nexus-root {
  --vl-rounding-sm: 0;
  --vl-rounding-md: 2px;
  --vl-rounding-lg: 2px;
}

/* The configure page as tiles (js/configure.js adds .hn-cfg-on once its tiles are in; without it the page is the
   dropdowns above). The cart's left column held one "View Cart" link, which the header's cart already gives, so it
   goes and the options take the width: tiles on the left, the order summary beside them, held in view. */
body #order-standard_cart.hn-cfg-on .cart-sidebar,
body #order-standard_cart.hn-cfg-on .sidebar-collapsed,
body #order-standard_cart.hn-cfg-on .secondary-cart-body > p:first-child,
body #order-standard_cart.hn-cfg-on .secondary-cart-body > .sub-heading,
body #order-standard_cart.hn-cfg-on .hn-cfg-converted,
body #order-standard_cart.hn-cfg-on #productConfigurableOptions.hn-cfg-all,
body #order-standard_cart.hn-cfg-on .hn-cfg-name .field-help-text {
  display: none;
}

body #order-standard_cart.hn-cfg-on .cart-body {
  width: 100%;
  float: none;
}

body #order-standard_cart.hn-cfg-on #frmConfigureProduct > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 48px;
  align-items: start;
  margin: 0;
}

body #order-standard_cart.hn-cfg-on #frmConfigureProduct > .row::before,
body #order-standard_cart.hn-cfg-on #frmConfigureProduct > .row::after {
  display: none;
}

/* The cart's script follows the page with margin-top while the summary floats; floated none, it leaves it at 0 */
body #order-standard_cart.hn-cfg-on .secondary-cart-body,
body #order-standard_cart.hn-cfg-on .secondary-cart-sidebar {
  width: auto;
  float: none;
  margin: 0 !important;
  padding: 0;
}

body #order-standard_cart.hn-cfg-on .secondary-cart-sidebar {
  position: sticky;
  top: 104px; /* the header's 80px bar, then 24px */
}

body #order-standard_cart.hn-cfg-on #orderSummary {
  margin-top: 0 !important;
}

body #order-standard_cart.hn-cfg-on .product-info {
  margin: 0 0 8px;
  padding: 0;
  background: none;
  border: 0;
}

body #order-standard_cart.hn-cfg-on .product-info .product-title {
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  text-transform: uppercase;
}

body #order-standard_cart.hn-cfg-on .product-info p:not(.product-title) {
  max-width: 64ch;
  margin: 0;
  font-size: 16px;
  color: var(--hn-text-2);
}

body #order-standard_cart.hn-cfg-on .secondary-cart-body > .alert {
  font-size: 15px;
}

/* Each option: a sentence-case label, then its tiles (the site's quick-start chips, made taller for a price) */
.hn-cfg__group {
  min-width: 0;
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-top: 1px solid var(--hn-line);
}

.hn-cfg > .hn-cfg__group:first-child {
  border-top: 0;
}

.hn-cfg__legend {
  float: left; /* a legend can't otherwise sit on its own line above a grid in every browser */
  width: 100%;
  margin: 0;
  padding: 0 0 14px;
  font-family: var(--hn-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--hn-text);
}

.hn-cfg__tiles {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.hn-cfg__group--billing .hn-cfg__tiles,
.hn-cfg__group--cpupriority .hn-cfg__tiles,
.hn-cfg__group--location .hn-cfg__tiles {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* RAM tiles carry a player tag, so they're wider */
.hn-cfg__group--ram .hn-cfg__tiles {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}

body .hn-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 76px;
  margin: 0;
  padding: 14px 16px;
  background: var(--hn-field);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  color: var(--hn-text-2);
  font-family: var(--hn-body);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--hn-ease),
    border-color var(--hn-ease),
    color var(--hn-ease);
}

body .hn-opt:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--hn-text);
}

body .hn-opt[aria-pressed='true'],
body .hn-opt:has(> .hn-opt__input:checked) {
  background: var(--hn-red-tint);
  border-color: var(--hn-red);
  color: var(--hn-text);
}

@media (prefers-reduced-motion: no-preference) {
  body .hn-opt:active {
    transform: scale(0.98);
  }
}

.hn-opt__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--hn-text);
}

.hn-opt__price {
  font-size: 15px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* The player tier a RAM size is sold for (the game's own figures), and a billing period's saving */
.hn-opt__fit,
.hn-opt__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-family: var(--hn-label);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--hn-steel);
}

.hn-opt__fit svg {
  flex: none;
  color: var(--hn-red);
}

.hn-opt__tag {
  padding: 2px 6px;
  border: 1px solid var(--hn-line-strong);
}

.hn-opt[aria-pressed='true'] .hn-opt__tag {
  border-color: rgba(225, 29, 46, 0.6);
}

.hn-cfg__note {
  max-width: 72ch;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hn-text-3);
}

/* Server name: WHMCS's own field, set out like the groups, with the address it gives under it */
body #order-standard_cart.hn-cfg-on .field-container:has(.hn-cfg-name) {
  margin: 0 0 24px;
  padding: 24px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hn-line);
}

body #order-standard_cart.hn-cfg-on .hn-cfg-name label {
  display: block;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 600;
  color: var(--hn-text);
}

body #order-standard_cart.hn-cfg-on .hn-cfg-name .form-control {
  max-width: 480px;
  min-height: 52px;
  font-size: 16px;
}

.hn-cfg-address {
  max-width: 72ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hn-text-3);
}

.hn-cfg-address strong {
  font-weight: 600;
  color: var(--hn-text);
}

.hn-cfg-address__name {
  overflow-wrap: anywhere;
}

/* The order summary: the quick-start card (red left edge, clipped corner), WHMCS's lines as a list, then the total */
body #order-standard_cart.hn-cfg-on .order-summary {
  position: relative;
  margin: 0 0 12px;
  padding: 24px 24px 22px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

body #order-standard_cart.hn-cfg-on .order-summary h2 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-family: var(--hn-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

/* WHMCS's "working out the price" spinner, in the corner rather than pushing the card down */
body #order-standard_cart.hn-cfg-on #orderSummaryLoader {
  position: absolute;
  top: 22px;
  right: 40px;
  color: var(--hn-text-3);
}

body #order-standard_cart.hn-cfg-on .order-summary .summary-container {
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
}

body #order-standard_cart.hn-cfg-on #producttotal .product-name {
  display: block;
  margin: 0 0 10px;
  font-family: var(--hn-display);
  font-size: 26px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--hn-text);
}

body #order-standard_cart.hn-cfg-on #producttotal .product-group,
body #order-standard_cart.hn-cfg-on #producttotal .total-due-today,
body #order-standard_cart.hn-cfg-on #producttotal .summary-totals {
  display: none;
}

body #order-standard_cart.hn-cfg-on #producttotal .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--hn-line);
}

body #order-standard_cart.hn-cfg-on #producttotal .clearfix > span {
  float: none;
}

/* Bootstrap's clearfix pseudo-elements would be a third item in the row */
body #order-standard_cart.hn-cfg-on #producttotal .clearfix::before,
body #order-standard_cart.hn-cfg-on #producttotal .clearfix::after {
  display: none;
}

body #order-standard_cart.hn-cfg-on #producttotal .clearfix > :last-child {
  flex: none;
  color: var(--hn-text);
  font-variant-numeric: tabular-nums;
}

.hn-sheet__k {
  color: var(--hn-text-3);
}

.hn-sheet__v {
  color: var(--hn-text);
}

.hn-sheet__total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hn-line-strong);
}

.hn-sheet__due,
.hn-sheet__renew {
  margin: 0;
  font-size: 15px;
  color: var(--hn-text-3);
}

.hn-sheet__amount {
  margin: 2px 0 4px;
  font-family: var(--hn-display);
  font-size: 48px;
  line-height: 1.1;
  color: var(--hn-text);
}

/* Readouts roll inside a clipped window; old and new values share one grid cell (as the site's quick start) */
.hn-reel {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
}

.hn-reel > * {
  grid-area: 1 / 1;
}

body #order-standard_cart.hn-cfg-on #orderSummary .text-center .btn {
  width: 100%;
  min-height: 52px;
}

/* Phones and tablets: the summary drops under the options, so the total and Continue ride at the foot of the screen
   until it's in view */
.hn-cfg-bar {
  display: none;
}

@media (max-width: 991px) {
  body #order-standard_cart.hn-cfg-on #frmConfigureProduct > .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body #order-standard_cart.hn-cfg-on .secondary-cart-sidebar {
    position: static;
  }

  body.hn-cfg-page {
    padding-bottom: 76px;
  }

  body.hn-cfg-page .hn-cfg-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--hn-bg-raise);
    border-top: 1px solid var(--hn-line-strong);
    transition:
      transform 200ms ease,
      visibility 200ms;
  }

  body.hn-cfg-page .hn-cfg-bar[data-away] {
    visibility: hidden;
    transform: translateY(100%);
  }
}

.hn-cfg-bar__total {
  margin: 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-cfg-bar__total .hn-reel {
  font-family: var(--hn-display);
  font-size: 28px;
  line-height: 1.1;
  color: var(--hn-text);
}

body .hn-cfg-bar__go {
  min-height: 48px;
  padding: 0 28px;
}

@media (max-width: 575px) {
  .hn-cfg__tiles,
  .hn-cfg__group--ram .hn-cfg__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .hn-opt {
    min-height: 68px;
    padding: 12px 14px;
  }

  .hn-cfg__group--billing .hn-cfg__tiles,
  .hn-cfg__group--cpupriority .hn-cfg__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hn-cfg__group--location .hn-cfg__tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 9. reduced motion and forced colours ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  body .list-group-item.active,
  body .nav-pills .nav-link.active,
  body .hn-bar .navbar-nav .active > .nav-link {
    forced-color-adjust: none;
    background: SelectedItem;
    color: SelectedItemText;
  }
}

/* ---------- 10. the Help Centre (hooks/havonode-help.php) ---------- */

/* New ticket form: under the subject, a line pointing at the Help Centre, then "These might answer it" as the
   customer types (help-suggest.js), in rows like the site's help search results */
.hn-help-suggest {
  margin-top: 10px;
}

body .hn-help-suggest__lead {
  margin: 0;
  font-size: 14px;
  color: var(--hn-text-3);
}

.hn-help-suggest__found {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

body .hn-help-suggest__note {
  margin: -2px 0 2px;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-help-rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body a.hn-help-row {
  display: grid;
  gap: 4px;
  padding: 12px 16px 13px;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-line-strong);
  color: var(--hn-text-2);
  text-decoration: none;
  transition: background-color var(--hn-ease), border-color var(--hn-ease);
}

body a.hn-help-row:hover,
body a.hn-help-row:focus-visible {
  background-color: var(--hn-surface-2);
  border-color: var(--hn-line-strong);
  border-left-color: var(--hn-red);
  color: var(--hn-text-2);
}

.hn-help-row__meta,
.hn-help-card__meta {
  font-family: var(--hn-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-help-row__title {
  color: var(--hn-text);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* The typed words, in red as on the site's search */
body .hn-help-row__title mark {
  padding: 0;
  background: none;
  color: var(--hn-red-hover);
}

/* Two lines at most, so five rows don't push the rest of the form far down on a phone */
.hn-help-row__summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 14px;
  line-height: 1.5;
}

/* A server's page: "Help for {game}", between the server's details and its tabs, as the site's game pages show
   it (GameHelp.astro and HelpCard.astro) */
.hn-help-block {
  display: grid;
  gap: 20px;
  margin: 8px 0 32px;
}

.hn-help-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

body .hn-help-block__title {
  margin: 12px 0 0;
  font-size: clamp(28px, 3vw, 36px);
}

body .hn-help-block__head .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hn-help-block__head .btn svg,
.hn-help-card__go svg {
  flex: none;
  color: var(--hn-red);
  transition: transform var(--hn-ease);
}

.hn-help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body a.hn-help-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px 20px 18px;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line-strong);
  color: var(--hn-text-2);
  text-decoration: none;
  transition: background-color var(--hn-ease), border-color var(--hn-ease);
}

body a.hn-help-card:hover,
body a.hn-help-card:focus-visible {
  background-color: #18181a;
  border-color: rgba(240, 240, 242, 0.32);
  color: var(--hn-text-2);
}

body .hn-help-card__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  text-wrap: pretty;
}

.hn-help-card__summary {
  font-size: 14.5px;
  line-height: 1.55;
}

.hn-help-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

body a.hn-help-card:hover .hn-help-card__go {
  color: var(--hn-text);
}

body a.hn-help-card:hover .hn-help-card__go svg,
body .hn-help-block__head .btn:hover svg {
  transform: translateX(3px);
}

@media (max-width: 575.98px) {
  .hn-help-block__head .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 11. cancelling a server (clientareacancelrequest.tpl, hooks/havonode-cancel.php) ---------- */

/* One decision with nothing to type: the server, optional reasons, two big buttons that say what happens, and what
   happens to their world beside them (below on phones) */
.hn-cancel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: 1240px;
  padding: 8px 0 0;
}

@media (min-width: 1100px) {
  .hn-cancel {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
    grid-template-areas:
      'head facts'
      'form facts';
    column-gap: 64px;
    row-gap: 36px;
    align-items: start;
  }

  .hn-cancel__head {
    grid-area: head;
  }

  .hn-cancel__facts {
    grid-area: facts;
  }

  .hn-cancel__form {
    grid-area: form;
  }
}

.hn-cancel__head {
  display: grid;
  gap: 18px;
}

body .hn-cancel__title {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
}

.hn-cancel__lede {
  max-width: 62ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(240, 240, 242, 0.74);
}

/* The server being cancelled, with the site's red left edge */
.hn-cancel__server {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  padding: 16px 20px;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
  box-shadow: inset 2px 0 0 var(--hn-red);
}

.hn-cancel__server svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--hn-red);
}

.hn-cancel__server-name {
  display: block;
  color: var(--hn-text);
  font-weight: 600;
  font-size: 16px;
}

.hn-cancel__server-meta {
  display: block;
  font-size: 14px;
  color: var(--hn-text-3);
}

.hn-cancel__form {
  display: grid;
  gap: 32px;
}

.hn-cancel__form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hn-cancel__step {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  color: var(--hn-text);
  font-family: var(--hn-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.hn-cancel__step-hint {
  display: block;
  margin-top: 2px;
  color: var(--hn-text-3);
  font-size: 14px;
  font-weight: 400;
}

/* Reasons: radios drawn as the site's chips (a selected chip has the red tint and a red border) */
.hn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hn-chip {
  position: relative;
  margin: 0;
}

.hn-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hn-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--hn-text-2);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--hn-ease), border-color var(--hn-ease), color var(--hn-ease);
}

.hn-chip input:hover + span {
  border-color: var(--hn-line-strong);
  color: var(--hn-text);
}

.hn-chip input:checked + span {
  background-color: var(--hn-red-tint);
  border-color: var(--hn-red);
  color: var(--hn-text);
}

.hn-chip input:focus-visible + span {
  outline: 2px solid var(--hn-red);
  outline-offset: 3px;
}

/* A fixable reason picked: help first, shown by CSS (:has) so it works without JS. It never hides the cancel
   buttons. */
.hn-offer {
  display: none;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
  padding: 22px 24px;
  background-color: var(--hn-surface-2);
  border: 1px solid var(--hn-line-strong);
  box-shadow: inset 2px 0 0 var(--hn-red);
  font-size: 15px;
  line-height: 1.6;
}

.hn-cancel__form:has([data-hn-offer="problems"]:checked) .hn-offer--problems,
.hn-cancel__form:has([data-hn-offer="moving"]:checked) .hn-offer--moving,
.hn-cancel__form:has([data-hn-offer="price"]:checked) .hn-offer--price {
  display: grid;
}

.hn-offer > svg {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  color: var(--hn-red);
}

.hn-offer p {
  margin: 0 0 10px;
}

body .hn-offer .hn-offer__title {
  margin-bottom: 4px;
  color: var(--hn-text);
  font-size: 16px;
  font-weight: 600;
}

.hn-offer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding-top: 6px;
}

body .hn-offer__links a:not(.btn) {
  font-weight: 600;
  font-size: 14px;
}

body .hn-offer .hn-offer__note {
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hn-line);
  color: var(--hn-text-3);
  font-size: 14px;
}

@media (max-width: 575.98px) {
  .hn-offer {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 20px 18px;
  }

  .hn-offer__links .btn {
    flex: 1 1 100%;
  }
}

/* "Anything else?": shown by the page's script, which adds it to the reason (without JS the chip alone is sent) */
.hn-cancel__more {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  max-width: 640px;
}

.hn-cancel__more[hidden] {
  display: none;
}

.hn-cancel__more span {
  color: var(--hn-text-2);
  font-size: 14px;
  font-weight: 500;
}

/* The two ways to cancel: big buttons that say what happens */
.hn-cancel__choices {
  display: grid;
  gap: 12px;
  max-width: 680px;
}

body .btn.hn-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 18px 22px 19px;
  text-align: left;
  white-space: normal;
}

.hn-choice__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.hn-choice__note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

body .btn-primary.hn-choice .hn-choice__note {
  color: rgba(255, 255, 255, 0.88);
}

body .btn-danger.hn-choice .hn-choice__note {
  color: var(--hn-text-2);
}

body .hn-cancel__keep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 44px;
  color: var(--hn-text-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

body .hn-cancel__keep:hover {
  color: var(--hn-text);
}

.hn-cancel__keep svg {
  width: 18px;
  height: 18px;
}

/* What happens to their world */
.hn-cancel__facts {
  padding: 30px 30px 10px;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
}

.hn-cancel__facts ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hn-cancel__facts li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--hn-line);
  font-size: 15px;
  line-height: 1.6;
}

.hn-cancel__facts li svg {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  color: var(--hn-red);
}

.hn-cancel__facts strong {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
}

.hn-cancel__facts p {
  margin: 0;
}

/* After cancelling */
.hn-cancel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hn-cancel__thanks {
  margin: 0;
  color: var(--hn-text-3);
  font-size: 15px;
}

@media (max-width: 575.98px) {
  .hn-cancel {
    gap: 28px;
  }

  .hn-cancel__facts {
    padding: 24px 22px 6px;
  }

  body .btn.hn-choice {
    padding: 16px 18px 17px;
  }

  .hn-choice__title {
    font-size: 17px;
  }

  .hn-cancel__actions .btn {
    flex: 1 1 100%;
  }
}

/* The chosen reason, in Windows' high-contrast colours */
@media (forced-colors: active) {
  .hn-chip input:checked + span {
    forced-color-adjust: none;
    background: SelectedItem;
    color: SelectedItemText;
  }
}

/* ---------- 12. a game server's live card (includes/live-card.tpl, hooks/havonode-live.php, js/live.js) ---------- */

/* The Game Panel's own parts, so the two read as one product (panel-theme/game-header.css and game-home.css): its
   status badge and status lines, its power buttons (Start green, Restart amber, Stop and Kill red), its ring dials
   (green, amber from 70%, red from 90%, with words so colour isn't the only clue), and its address boxes. In a card
   with the site's red left edge. Its layout follows its own width (a container query), so it fits beside the
   sidebar as well as on a phone. */
.hn-live {
  container: hn-live / inline-size;
  margin: 0 0 24px;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line-strong);
  border-left: 2px solid var(--hn-red);
}

.hn-live__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 26px 28px 24px;
}

.hn-live__id {
  min-width: 0;
}

/* The panel's status badge: an orb and the state, tinted by it */
.hn-live__state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  margin: 0 0 14px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(12, 12, 13, 0.75);
  font-family: var(--hn-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hn-text);
}

.hn-live__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--hn-text-3);
}

.hn-live--running .hn-live__state {
  border-color: rgba(34, 197, 94, 0.45);
  background-color: rgba(10, 40, 22, 0.8);
  color: var(--hn-ok-text);
}

.hn-live--running .hn-live__dot {
  background-color: var(--hn-ok);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.hn-live--starting .hn-live__state,
.hn-live--stopping .hn-live__state {
  border-color: rgba(245, 158, 11, 0.5);
  background-color: rgba(45, 30, 6, 0.8);
  color: var(--hn-warn-text);
}

.hn-live--starting .hn-live__dot,
.hn-live--stopping .hn-live__dot {
  background-color: var(--hn-warn-text);
}

/* Stopped, suspended and unknown are a hollow ring, so the state never rests on colour alone */
.hn-live--stopped .hn-live__dot,
.hn-live--suspended .hn-live__dot,
.hn-live--unknown .hn-live__dot,
.hn-live--unavailable .hn-live__dot {
  background-color: transparent;
  border: 2px solid var(--hn-text-3);
}

body .hn-live__name {
  margin: 0;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.hn-live__plan {
  margin: 8px 0 0;
  color: var(--hn-text-2);
  font-size: 15px;
}

/* What the state means, in the panel's words */
.hn-live__hint {
  max-width: 62ch;
  margin: 14px 0 0;
  color: rgba(240, 240, 242, 0.88);
  font-size: 15px;
  line-height: 1.5;
}

.hn-live__hint a {
  color: var(--hn-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons: Open the Game Panel in red, then the panel's power buttons */
.hn-live__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body .hn-live__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
}

.hn-live__btn svg {
  flex: none;
}

body .hn-live__btn--open svg {
  transition: transform var(--hn-ease);
}

body .hn-live__btn--open:hover svg {
  transform: translateX(3px);
}

body .hn-power {
  min-width: 132px;
  border: 1px solid #34343a;
  border-radius: 2px;
  background-color: rgba(12, 12, 13, 0.82);
  transition: border-color var(--hn-ease), background-color var(--hn-ease);
}

.hn-power--start {
  --hn-power: var(--hn-ok-text);
}

.hn-power--restart {
  --hn-power: var(--hn-warn-text);
}

.hn-power--stop,
.hn-power--kill {
  --hn-power: var(--hn-red-hover);
}

/* Each keeps its colour on hover and focus, where Bootstrap's .btn would turn the text dark */
body .hn-power,
body .hn-power:hover,
body .hn-power:focus,
body .hn-power:active {
  color: var(--hn-power);
}

body .hn-power:hover,
body .hn-power:focus-visible {
  border-color: var(--hn-power);
  background-color: rgba(30, 30, 33, 0.92);
}

.hn-live__power {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hn-live__power[hidden],
.hn-live [hidden] {
  display: none !important;
}

/* What happened when a button was pressed: only while there's something to say */
.hn-live__msg {
  margin: 0;
  padding: 0 28px 18px;
  color: var(--hn-red-hover);
  font-size: 14px;
}

.hn-live__msg:empty {
  display: none;
}

/* Stop or Restart with players on asks first */
.hn-live__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 28px;
  border-top: 1px solid rgba(245, 158, 11, 0.4);
  background-color: rgba(45, 30, 6, 0.55);
}

.hn-live__confirm p {
  margin: 0;
  color: var(--hn-text);
  font-size: 15px;
}

.hn-live__confirm-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The dials and the address */
.hn-live__body {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  border-top: 1px solid var(--hn-line);
}

.hn-live__body > * + * {
  border-left: 1px solid var(--hn-line);
}

@property --hn-p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* The panel's ring dial: the value in the middle, "of 10 GB" under it, the label, then how full in words */
.hn-dial {
  --hn-ring: var(--hn-ok);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 22px 32px 20px;
}

.hn-dial--warn {
  --hn-ring: var(--warning);
}

.hn-dial--crit {
  --hn-ring: var(--hn-red-hover);
}

.hn-dial__face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  aspect-ratio: 1;
  text-align: center;
}

.hn-dial__ring {
  --hn-ring-w: 9px;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--hn-ring) calc(var(--hn-p, 0) * 1%), rgba(240, 240, 242, 0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--hn-ring-w) - 1px), #000 calc(100% - var(--hn-ring-w)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--hn-ring-w) - 1px), #000 calc(100% - var(--hn-ring-w)));
}

@media (prefers-reduced-motion: no-preference) {
  .hn-dial__ring {
    transition: --hn-p 700ms ease;
  }
}

.hn-dial__value {
  position: relative;
  margin: 0;
  color: var(--hn-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hn-dial__sub {
  position: relative;
  margin: 3px 0 0;
  color: var(--hn-text-3);
  font-size: 12px;
}

.hn-dial__label {
  margin: 0;
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hn-text-2);
}

.hn-dial__state {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 1.2em;
  margin: -6px 0 0;
  color: var(--hn-text-2);
  font-size: 13px;
}

.hn-dial__state:not(:empty)::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--hn-ring);
}

/* Nothing to measure while it isn't running: empty rings, no words */
.hn-live--stopped .hn-dial__state,
.hn-live--suspended .hn-dial__state,
.hn-live--unknown .hn-dial__state,
.hn-live--starting .hn-dial[data-stat='players'] .hn-dial__state,
.hn-live--stopping .hn-dial[data-stat='players'] .hn-dial__state {
  visibility: hidden;
}

/* The address, as the panel shows it: what players type, each in a box with a 44px copy button */
.hn-live__addr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 22px 28px;
}

.hn-live__addr dt {
  margin: 0 0 2px;
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hn-text-2);
}

.hn-live__addr dd {
  margin: 0;
}

.hn-addr {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  padding-left: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(12, 12, 13, 0.75);
  color: var(--hn-text);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 15px;
}

.hn-addr__text {
  min-width: 0;
  padding-right: 6px;
  overflow-wrap: anywhere;
}

.hn-addr--alt {
  color: var(--hn-text-2);
  font-size: 14px;
}

body .hn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--hn-text-2);
}

body .hn-copy:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--hn-text);
}

body .hn-copy.is-copied {
  color: var(--hn-ok-text);
}

.hn-live__foot {
  margin: 0;
  padding: 12px 28px;
  border-top: 1px solid var(--hn-line);
  color: var(--hn-text-3);
  font-size: 13px;
}

/* Live status unavailable: one row, the reason and the way round it */
.hn-live--unavailable {
  border-left-color: var(--hn-line-strong);
}

.hn-live--unavailable .hn-live__name,
.hn-live--unavailable .hn-live__plan,
.hn-live--unavailable .hn-live__body,
.hn-live--unavailable .hn-live__foot,
.hn-live--unavailable .hn-live__power {
  display: none !important;
}

@container hn-live (max-width: 900px) {
  .hn-dial {
    padding: 20px 22px 18px;
  }

  .hn-dial__face {
    width: 112px;
  }
}

/* A narrow card (phones, and beside the sidebar on smaller screens): the buttons in full-width rows, the two dials
   side by side, smaller, and the address under them */
@container hn-live (max-width: 680px) {
  .hn-live__head {
    padding: 22px 20px 20px;
  }

  .hn-live__actions,
  .hn-live__confirm-btns {
    width: 100%;
  }

  body .hn-live__actions .hn-live__btn--open {
    flex: 1 0 100%;
  }

  .hn-live__power {
    flex: 1 0 100%;
  }

  body .hn-live__actions .hn-power,
  body .hn-live__confirm-btns .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .hn-live__confirm {
    padding: 16px 20px;
  }

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

  .hn-dial {
    padding: 18px 10px 16px;
  }

  .hn-dial__face {
    width: 100px;
  }

  .hn-dial__value {
    font-size: 20px;
  }

  .hn-live__addr {
    grid-column: 1 / -1;
    padding: 18px 20px 20px;
    border-top: 1px solid var(--hn-line);
  }

  .hn-live__body > .hn-live__addr {
    border-left: 0;
  }

  .hn-live__foot {
    padding: 12px 20px;
  }

  .hn-live__msg {
    padding: 0 20px 16px;
  }
}

/* Phones and tablets: a server's page leads with its card, and the sidebar's menus follow it */
@media (max-width: 991.98px) {
  body #main-body .row:has(> .primary-content .hn-live) > .col-lg-4 {
    order: 2;
  }
}

/* ---------- 12b. "Your servers" on the client home page ---------- */

.hn-live-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--hn-text-2);
  font-size: 13.5px;
}

.hn-live-line .hn-live__dot {
  width: 8px;
  height: 8px;
}

.hn-live-line--running .hn-live__dot {
  background-color: var(--hn-ok);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.hn-live-line--starting .hn-live__dot {
  background-color: var(--hn-warn-text);
}

.hn-live-line--stopped .hn-live__dot {
  background-color: transparent;
  border: 2px solid var(--hn-text-3);
}

.hn-live-line__state {
  color: var(--hn-text);
  font-weight: 600;
}

.hn-live-line--running .hn-live-line__state {
  color: var(--hn-ok-text);
}

/* Nexus clips the service name's lines to one; the server's name gives way first, with an ellipsis */
body .div-service-name > .hn-live-line {
  display: flex;
  max-width: 100%;
  min-width: 0;
}

.hn-live-line > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 12c. the server page's billing row (replaces Nexus's product box) ---------- */

.hn-bill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 0 0 40px;
  padding: 18px 28px;
  background-color: var(--hn-surface);
  border: 1px solid var(--hn-line);
}

.hn-bill__list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
  margin: 0;
}

.hn-bill__list dt {
  margin: 0 0 6px;
  font-family: var(--hn-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-bill__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hn-bill__list dd {
  margin: 0;
  color: var(--hn-text);
  font-size: 15px;
}

@media (max-width: 767.98px) {
  .hn-bill {
    padding: 18px 20px;
  }

  .hn-bill__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: 16px 20px;
  }

  .hn-bill__actions,
  .hn-bill__actions .btn {
    width: 100%;
  }
}

/* ---------- 13. changing a plan (upgrade.tpl, upgradesummary.tpl, hooks/havonode-configure.php) ---------- */

/* The configure page's tiles, as radio buttons: the input sits invisibly over its tile, so a click, the arrow keys
   and the focus ring all work as a radio group's do */
.hn-opt__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body .hn-opt:has(> .hn-opt__input:focus-visible) {
  outline: 2px solid var(--hn-red);
  outline-offset: 2px;
}

.hn-cfg__tiles--wide {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.hn-upgrade__head {
  margin-bottom: 8px;
}

.hn-upgrade__title {
  margin: 0 0 6px;
  font-family: var(--hn-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--hn-text);
}

.hn-upgrade__lead {
  max-width: 64ch;
  margin: 0;
  font-size: 16px;
  color: var(--hn-text-2);
}

.hn-upgrade .hn-cfg__group:first-of-type {
  border-top: 1px solid var(--hn-line);
}

.hn-upgrade__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--hn-line);
}

.hn-upgrade__actions .btn {
  min-height: 52px;
}

/* The cost: the quick-start card, as on the configure page */
.hn-upgrade__sheet {
  max-width: 560px;
  margin: 0 0 8px;
  padding: 24px 24px 22px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.hn-upgrade__label {
  margin: 0 0 14px;
  font-family: var(--hn-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-upgrade__name {
  margin: 0 0 10px;
  font-family: var(--hn-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--hn-text);
}

.hn-upgrade__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.hn-upgrade__lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hn-line);
}

.hn-upgrade__k {
  color: var(--hn-text-3);
}

.hn-upgrade__v {
  grid-column: 1;
  color: var(--hn-text);
}

.hn-upgrade__to {
  color: var(--hn-red);
}

.hn-upgrade__p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--hn-text);
  font-variant-numeric: tabular-nums;
}

.hn-upgrade__total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--hn-line-strong);
}

.hn-upgrade__due,
.hn-upgrade__small {
  margin: 0;
  font-size: 15px;
  color: var(--hn-text-3);
}

.hn-upgrade__small {
  margin-top: 12px;
}

.hn-upgrade__amount {
  margin: 2px 0 0;
  font-family: var(--hn-display);
  font-size: 48px;
  line-height: 1.1;
  color: var(--hn-text);
}

.hn-upgrade__confirm .hn-cfg__group {
  padding-bottom: 0;
}

/* Promo codes: folded away under a link, as most changes won't have one */
.hn-upgrade__promo {
  margin-top: 24px;
}

.hn-upgrade__promo summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--hn-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hn-upgrade__promo summary:hover {
  color: var(--hn-text);
}

.hn-upgrade__promo form {
  max-width: 480px;
  margin-top: 8px;
}

.hn-upgrade__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--hn-text);
}

@media (max-width: 575px) {
  .hn-upgrade__actions .btn {
    width: 100%;
  }

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

/* ---------- 14. the servers page (clientareaproducts.tpl, hooks/havonode-pages.php) ---------- */

/* Each server a card in the quick-start style (red left edge, clipped corner) under a band of its game's art */
.hn-servers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-server {
  display: flex;
  flex-direction: column;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.hn-server--suspended {
  border-left-color: var(--hn-text-3);
}

.hn-server__art {
  position: relative;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: var(--hn-bg-raise);
}

.hn-server__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.72);
}

.hn-server__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, var(--hn-surface));
}

.hn-server__game {
  position: absolute;
  bottom: 10px;
  left: 20px;
  z-index: 1;
  font-family: var(--hn-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hn-text);
}

.hn-server__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 6px 20px 20px;
}

.hn-server__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 24px;
  margin: 0;
}

.hn-server__state .hn-live-line {
  margin: 0;
  font-size: 15px;
}

.hn-server__name {
  margin: -6px 0 0;
  font-family: var(--hn-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--hn-text);
  overflow-wrap: anywhere;
}

/* The plan, as three readouts */
.hn-server__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--hn-line);
  border: 1px solid var(--hn-line);
}

.hn-server__specs > div {
  padding: 10px 12px;
  background: var(--hn-surface);
}

.hn-server__specs dt {
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-server__specs dd {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hn-text);
}

.hn-server__specs dd small {
  font-size: 12px;
  font-weight: 400;
  color: var(--hn-text-3);
}

.hn-server__extra {
  margin: -4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--hn-steel);
}

.hn-server__addr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 15px;
}

.hn-server__addr-name {
  font-weight: 600;
  color: var(--hn-text);
  overflow-wrap: anywhere;
}

.hn-server__addr-ip {
  color: var(--hn-text-2);
  font-variant-numeric: tabular-nums;
}

.hn-server__bill {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hn-line);
  font-size: 15px;
  color: var(--hn-text-2);
}

.hn-server__bill span:first-child {
  font-weight: 600;
  color: var(--hn-text);
}

.hn-server__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body .hn-server__actions .btn {
  flex: 1 1 auto;
  min-height: 48px;
}

.hn-server__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--hn-line-strong);
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hn-text-2);
}

.hn-server__badge--bad {
  border-color: rgba(225, 29, 46, 0.6);
  color: var(--hn-red-hover);
}

.hn-servers__past {
  margin-top: 36px;
}

.hn-servers__past summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--hn-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hn-servers__past ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.hn-servers__past li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hn-line);
  font-size: 15px;
  color: var(--hn-text-2);
}

.hn-servers__past li a {
  font-weight: 600;
  color: var(--hn-text);
}

.hn-servers__credit {
  margin: 36px 0 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

/* ---------- 15. HavoNode's own pages: shared parts (the servers, invoices and later pages) ---------- */

.hn-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 28px;
}

.hn-page-title {
  margin: 0 0 8px;
  font-family: var(--hn-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--hn-text);
}

.hn-page-lead {
  max-width: 64ch;
  margin: 0;
  font-size: 16px;
  color: var(--hn-text-2);
}

.hn-page-lead:empty {
  display: none;
}

.hn-page-empty {
  max-width: 640px;
  padding: 36px 28px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  font-size: 16px;
  color: var(--hn-text-2);
}

.hn-page-empty p:last-of-type {
  margin-bottom: 0;
}

.hn-page-empty .btn {
  margin-top: 18px;
}

.hn-page-empty__title {
  margin: 0 0 6px;
  font-family: var(--hn-display);
  font-size: 28px;
  text-transform: uppercase;
  color: var(--hn-text);
}

/* A plain table: rows on hairlines, no stripes or boxes; on phones each row becomes a small labelled block */
.hn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.hn-table th {
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--hn-line-strong);
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-table td {
  padding: 14px;
  border-bottom: 1px solid var(--hn-line);
  color: var(--hn-text-2);
  vertical-align: middle;
}

.hn-table th:first-child,
.hn-table td:first-child {
  padding-left: 0;
}

.hn-table th:last-child,
.hn-table td:last-child {
  padding-right: 0;
}

.hn-table td a:not(.btn) {
  font-weight: 600;
  color: var(--hn-text);
}

.hn-table .hn-table__num {
  text-align: right;
  color: var(--hn-text);
}

.hn-table__act {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

body .hn-table__act .btn {
  min-width: 88px;
  min-height: 40px;
}

@media (max-width: 767px) {
  .hn-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .hn-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hn-line);
  }

  .hn-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    grid-column: 1;
    padding: 0;
    border: 0;
  }

  .hn-table td[data-label]::before {
    content: attr(data-label);
    color: var(--hn-text-3);
  }

  .hn-table .hn-table__num {
    text-align: left;
  }

  .hn-table td.hn-table__act {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    width: auto;
  }
}

/* A status word: an outlined label, coloured only where it needs acting on or is good news */
.hn-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--hn-line-strong);
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hn-text-2);
  white-space: nowrap;
}

.hn-status--unpaid,
.hn-status--collections,
.hn-status--overdue {
  border-color: rgba(225, 29, 46, 0.6);
  color: var(--hn-red-hover);
}

.hn-status--paid,
.hn-status--active,
.hn-status--answered {
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--hn-ok-text);
}

/* ---------- 16. invoices (clientareainvoices.tpl, viewinvoice.tpl) ---------- */

/* An invoice: its own page (no client area header or footer). Dark on screen like the rest; plain black on white in
   print, with the light-paper logo WHMCS's PDFs use. */
body.hn-invoice-page {
  background: var(--hn-bg);
  color: var(--hn-text-2);
  font-family: var(--hn-body);
}

.hn-invoice {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.hn-invoice__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hn-line);
}

.hn-invoice__logo-screen {
  display: block;
  width: auto;
  height: 30px;
}

.hn-invoice__logo-print {
  display: none;
}

body .hn-invoice__back {
  font-size: 15px;
  color: var(--hn-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hn-invoice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.hn-invoice__title {
  margin: 0 0 10px;
  font-family: var(--hn-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--hn-text);
}

.hn-invoice__dates {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.hn-invoice__dates strong {
  color: var(--hn-text);
}

.hn-invoice__label {
  margin: 0 0 8px;
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

/* What's left to pay and the gateway's button: the quick-start card */
.hn-invoice__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin: 0 0 36px;
  padding: 24px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.hn-invoice__amount {
  margin: 0;
  font-family: var(--hn-display);
  font-size: 52px;
  line-height: 1;
  color: var(--hn-text);
}

.hn-invoice__pay-how {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.hn-invoice__gateway label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--hn-text-2);
}

.hn-invoice__button form {
  margin: 0;
}

body .hn-invoice__button .btn,
body .hn-invoice__button button,
body .hn-invoice__button input[type='submit'] {
  min-height: 52px;
  padding: 0 28px;
  font-weight: 700;
}

.hn-invoice__credit {
  max-width: 560px;
  margin: 0 0 36px;
  font-size: 15px;
}

.hn-invoice__parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 0 0 36px;
  padding: 24px 0;
  border-top: 1px solid var(--hn-line);
  border-bottom: 1px solid var(--hn-line);
}

.hn-invoice__parties address,
.hn-invoice__parties p:not(.hn-invoice__label),
.hn-invoice__notes p:not(.hn-invoice__label) {
  margin: 0;
  font-size: 15px;
  font-style: normal;
  line-height: 1.6;
  color: var(--hn-text-2);
}

.hn-invoice__notes,
.hn-invoice__lines,
.hn-invoice__payments {
  margin: 0 0 36px;
}

.hn-invoice .hn-table tfoot th,
.hn-invoice .hn-table tfoot td {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 0;
  font-family: var(--hn-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
  color: var(--hn-text-2);
}

.hn-invoice .hn-table .hn-invoice__total th,
.hn-invoice .hn-table .hn-invoice__total td {
  border-top: 1px solid var(--hn-line-strong);
  font-size: 18px;
  font-weight: 600;
  color: var(--hn-text);
}

.hn-invoice__none {
  color: var(--hn-text-3);
}

.hn-invoice__small {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-invoice__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

body .hn-invoice__actions .btn {
  min-height: 44px;
}

@media (max-width: 767px) {
  .hn-invoice .hn-table tfoot tr {
    display: flex;
    justify-content: space-between;
  }

  .hn-invoice .hn-table tfoot th,
  .hn-invoice .hn-table tfoot td {
    padding: 8px 0;
    text-align: left;
  }
}

@media print {
  body.hn-invoice-page,
  html {
    background: #fff !important;
  }

  .hn-invoice {
    max-width: none;
    padding: 0;
  }

  .hn-invoice,
  .hn-invoice * {
    color: #000 !important;
    background: transparent !important;
    border-color: #bbb !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  .hn-invoice__logo-screen,
  .hn-invoice__back {
    display: none;
  }

  .hn-invoice__logo-print {
    display: block;
    width: auto;
    height: 40px;
  }
}

/* ---------- 17. support tickets (supportticketslist.tpl, viewticket.tpl, supportticketsubmit-confirm.tpl) ---------- */

.hn-page-lead a,
.hn-ticket a:not(.btn) {
  color: var(--hn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hn-tickets__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-table__unread td:first-child a {
  color: var(--hn-text);
}

.hn-table__unread td:first-child a::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 2px;
  background: var(--hn-red);
}

.hn-status--open,
.hn-status--customer-reply,
.hn-status--in-progress,
.hn-status--on-hold {
  border-color: rgba(240, 240, 242, 0.35);
  color: var(--hn-text);
}

/* A ticket: the subject, then the conversation, oldest first */
.hn-ticket__id {
  margin: 0 0 6px;
  font-family: var(--hn-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-ticket__subject {
  margin: 0 0 16px;
  text-transform: none;
  font-family: var(--hn-body);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--hn-text);
  overflow-wrap: anywhere;
}

.hn-ticket__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hn-line);
}

.hn-ticket__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body .hn-ticket__actions .btn {
  min-height: 44px;
}

.hn-ticket__closed {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--hn-text-2);
}

.hn-ticket__thread {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hn-msg {
  margin: 0 0 16px;
  padding: 20px 22px;
  background: var(--hn-bg-raise);
  border: 1px solid var(--hn-line);
}

.hn-msg--staff {
  background: var(--hn-surface);
  border-left: 2px solid var(--hn-red);
}

.hn-msg__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.hn-msg__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--hn-text);
}

.hn-msg__role {
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-msg--staff .hn-msg__role {
  color: var(--hn-red-hover);
}

.hn-msg__date {
  margin-left: auto;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-msg__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--hn-text-2);
  overflow-wrap: anywhere;
}

.hn-msg__body > :last-child {
  margin-bottom: 0;
}

.hn-msg__body strong {
  color: var(--hn-text);
}

.hn-msg__body pre,
.hn-msg__body code {
  background: var(--hn-bg);
  color: var(--hn-text);
}

.hn-msg__ip {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-msg__files {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hn-line);
  font-size: 14px;
}

.hn-msg__files-title {
  margin: 0 0 6px;
  color: var(--hn-text-3);
}

.hn-msg__files ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-msg__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hn-line);
}

/* WHMCS's stars (Font Awesome, styled under .ticket-reply): beside the question, not floated, red when picked */
body .hn-msg__rate.ticket-reply .rating,
body .hn-msg__rate.ticket-reply .rating-done {
  float: none;
  padding: 0;
  font-size: 22px;
}

body .hn-msg__rate.ticket-reply .rating span.star::before,
body .hn-msg__rate.ticket-reply .rating-done span.star::before {
  color: var(--hn-text-3);
}

body .hn-msg__rate.ticket-reply .rating span.star:hover::before,
body .hn-msg__rate.ticket-reply .rating span.star:hover ~ span.star::before,
body .hn-msg__rate.ticket-reply .rating-done span.star.active::before {
  font-weight: 900;
  color: var(--hn-red);
}

body .hn-msg__rate.ticket-reply .rating-done .rated {
  margin-left: 8px;
  color: var(--hn-text-3);
}

/* The reply box's word count bar (bootstrap-markdown paints it #f5f5f5) */
body .md-editor > .md-footer {
  background: var(--hn-bg-raise);
  border-top: 1px solid var(--hn-line);
  color: var(--hn-text-3);
}

.hn-msg__rate-label {
  font-size: 14px;
  color: var(--hn-text-3);
}

.hn-ticket__reply {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hn-line);
}

.hn-ticket__reply-title {
  margin: 0 0 14px;
  text-transform: none;
  font-family: var(--hn-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--hn-text);
}

.hn-ticket__files-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-ticket__send {
  margin-top: 8px;
}

.hn-ticket-sent {
  margin: 8px 0 24px;
}

.hn-ticket-sent .hn-eyebrow {
  margin-bottom: 10px;
}

/* ---------- 18. log in, password reset, register and 404 (login.tpl, password-reset-*.tpl, error/) ---------- */

/* One card, centred: the quick-start card, with plain labelled fields */
.hn-auth {
  display: flex;
  justify-content: center;
  padding: 24px 0 56px;
}

.hn-auth__card {
  width: 100%;
  max-width: 480px;
  padding: 36px 32px 32px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.hn-auth__card .hn-eyebrow {
  margin-bottom: 14px;
}

.hn-auth__title {
  margin: 0 0 8px;
  font-family: var(--hn-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--hn-text);
}

.hn-auth__lead {
  margin: 0 0 24px;
  font-size: 16px;
  color: var(--hn-text-2);
}

body .hn-auth label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hn-text);
}

body .hn-auth .form-control {
  min-height: 48px;
}

body .hn-auth .btn-reveal-pw {
  min-width: 48px;
}

.hn-auth__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hn-auth__row a,
.hn-auth__foot a {
  color: var(--hn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hn-auth__row a {
  font-size: 14px;
  color: var(--hn-text-2);
}

body .hn-auth .hn-auth__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 22px;
  font-weight: 400;
  color: var(--hn-text-2);
}

body .hn-auth .btn-block {
  min-height: 52px;
  font-weight: 700;
}

.hn-auth__foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hn-text-3);
}

/* Contact us: the same card, wider for the message */
.hn-contact .hn-auth__card {
  max-width: 720px;
}

.hn-auth__lead a {
  color: var(--hn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .hn-contact textarea.form-control {
  min-height: 180px;
}

.hn-notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 19. the account home page (clientareahome.tpl, hooks/havonode-pages.php) ---------- */

.hn-home .hn-page-head .hn-eyebrow {
  margin-bottom: 12px;
}

/* What needs the customer: a bill to pay, a reply from us. One line each, with its button. */
.hn-home__attention ul {
  display: grid;
  gap: 10px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.hn-attn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 20px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-steel-muted);
}

.hn-attn--overdue {
  border-left-color: var(--hn-red);
}

.hn-attn__what {
  margin: 0;
  font-size: 16px;
  color: var(--hn-text-2);
}

.hn-attn__what strong {
  color: var(--hn-text);
}

.hn-attn__kind {
  margin-right: 10px;
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-attn--overdue .hn-attn__kind {
  color: var(--hn-red-hover);
}

body .hn-attn .btn {
  min-width: 110px;
  min-height: 44px;
}

.hn-home__section {
  margin-bottom: 40px;
}

.hn-home__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 18px;
}

.hn-home__title {
  margin: 0;
  font-family: var(--hn-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--hn-text);
}

body .hn-home__more {
  font-size: 15px;
  color: var(--hn-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Billing, support and the account: three panels on hairlines */
.hn-home__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

.hn-home__box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
}

body .hn-home .hn-home__box .hn-home__title {
  margin-bottom: 4px;
  font-size: 24px;
}

.hn-home__extra {
  margin-top: 20px;
}

.hn-home__label {
  margin: 0;
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-home__big {
  margin: -6px 0 0;
  font-family: var(--hn-display);
  font-size: 44px;
  line-height: 1.1;
  color: var(--hn-text);
}

.hn-home__note {
  margin: 0;
  font-size: 15px;
  color: var(--hn-text-2);
}

.hn-home__note a {
  color: var(--hn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hn-home__tickets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-home__tickets li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hn-line);
}

.hn-home__tickets li:first-child {
  padding-top: 0;
}

.hn-home__tickets a {
  font-size: 15px;
  font-weight: 600;
  color: var(--hn-text);
}

.hn-home__ticket-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--hn-text-3);
}

.hn-home__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: auto 0 0;
  padding: 12px 0 0;
  list-style: none;
}

.hn-home__links--list {
  flex-direction: column;
  margin-top: 0;
  padding-top: 0;
}

.hn-home__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--hn-text);
  text-decoration: underline;
  text-decoration-color: var(--hn-red);
  text-underline-offset: 4px;
}

/* ---------- 20. choosing a set-up: level meters, the reticle and the build (js/configure.js) ---------- */

/* The game's own art behind its name on the configure page: the quick-start card's edge and corner. Content, so it
   never moves. */
body #order-standard_cart.hn-cfg-on .product-info.hn-cfg-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(180px, 20vw, 260px);
  margin: 0 0 8px;
  padding: 28px 28px 24px;
  overflow: hidden;
  background: var(--hn-bg-raise);
  border: 1px solid var(--hn-line);
  border-left: 2px solid var(--hn-red);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.hn-cfg-hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 35%;
  filter: saturate(0.85) brightness(0.62);
}

.hn-cfg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 12, 13, 0.94) 0%, rgba(12, 12, 13, 0.6) 50%, rgba(12, 12, 13, 0.1) 100%),
    linear-gradient(0deg, rgba(12, 12, 13, 0.7), transparent 65%);
}

body #order-standard_cart.hn-cfg-on .hn-cfg-hero .product-title {
  margin: 0 0 8px;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1;
}

body #order-standard_cart.hn-cfg-on .hn-cfg-hero p:not(.product-title) {
  max-width: 52ch;
  color: rgba(240, 240, 242, 0.85);
}

.hn-cfg__credit {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--hn-text-3);
}

/* The reticle: one set of red brackets that glides to the picked tile and locks on (the site's target lock) */
.hn-cfg__tiles {
  position: relative;
}

.hn-reticle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: var(--w, 0px);
  height: var(--h, 0px);
  transform: translate(var(--x, 0px), var(--y, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.hn-reticle.is-on {
  opacity: 1;
}

.hn-reticle i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--hn-red);
  filter: drop-shadow(0 0 6px rgba(225, 29, 46, 0.55));
}

.hn-reticle i:nth-child(1) {
  top: -5px;
  left: -5px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.hn-reticle i:nth-child(2) {
  top: -5px;
  right: -5px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.hn-reticle i:nth-child(3) {
  bottom: -5px;
  left: -5px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.hn-reticle i:nth-child(4) {
  right: -5px;
  bottom: -5px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .hn-reticle {
    transition:
      opacity 120ms ease,
      transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
      width 340ms cubic-bezier(0.16, 1, 0.3, 1),
      height 340ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hn-reticle.is-placing {
    transition: none;
  }

  /* Each lock: the brackets close in from wide and settle on the tile */
  .hn-reticle.is-locking i {
    animation: hn-lock 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hn-reticle.is-locking i:nth-child(1) {
    --from: -9px, -9px;
  }

  .hn-reticle.is-locking i:nth-child(2) {
    --from: 9px, -9px;
  }

  .hn-reticle.is-locking i:nth-child(3) {
    --from: -9px, 9px;
  }

  .hn-reticle.is-locking i:nth-child(4) {
    --from: 9px, 9px;
  }

  @keyframes hn-lock {
    from {
      transform: translate(var(--from));
      opacity: 0.4;
    }
  }
}

/* A level meter (slots, RAM, disk): the size and its price as readouts, then bars stepping up, lit red to the pick.
   The range input underneath is what keyboards and screen readers use; the bars take taps and drags. */
.hn-meter__head {
  clear: both; /* under the floated legend (section 8), not beside it */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
}

.hn-meter__read {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--hn-display);
  font-size: clamp(44px, 5vw, 60px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--hn-text);
}

.hn-meter__read .hn-reel {
  min-width: 1ch;
}

.hn-meter__unit {
  font-family: var(--hn-label);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hn-text-3);
}

.hn-meter__price {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hn-text-2);
}

.hn-meter__fit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 26px;
  margin: 8px 0 6px;
  font-size: 15px;
  color: var(--hn-text-2);
}

/* Slots and disk never have a line here. RAM's keeps the same room whatever it says (the tier, where we'd start with
   its Use button, or nothing), so picking a size never moves the bars below (owner, 2026-10-27). */
.hn-meter:not(.has-fit) .hn-meter__fit:empty {
  display: none;
}

.hn-meter.has-fit .hn-meter__fit {
  min-height: 36px; /* the Use button's height */
}

@media (max-width: 575px) {
  /* On a phone where-we'd-start and its button wrap to two lines: the room for both */
  .hn-meter.has-fit .hn-meter__fit {
    align-content: flex-start;
    min-height: 64px;
  }
}

body .hn-meter__use {
  min-height: 36px;
  padding: 4px 14px;
  background: var(--hn-red-tint);
  border: 1px solid var(--hn-red);
  border-radius: 0;
  color: var(--hn-text);
  font-family: var(--hn-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--hn-ease);
}

body .hn-meter__use:hover {
  background: rgba(225, 29, 46, 0.26);
}

/* The bars: each step a little taller than the last, sharing the whole width of the options (owner, 2026-10-27:
   everything spans the page) */
.hn-meter__body {
  width: 100%;
}

.hn-meter__track {
  position: relative;
  height: 130px;
  padding-top: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* a finger scrolls the page up and down; a sideways drag scrubs */
}

/* Room for the flags over the tallest bars (RAM) */
.hn-meter__track.has-flags {
  height: 156px;
  padding-top: 40px;
}

.hn-meter__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
}

.hn-meter__bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--h);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transform-origin: bottom;
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.hn-meter__bar.is-hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.hn-meter__bar.is-on {
  background-color: var(--hn-red);
  box-shadow: inset 0 -60px 40px -30px var(--hn-red-deep);
}

.hn-meter__bar.is-on.is-hover {
  background-color: var(--hn-red-hover);
}

/* The pick: a light cap over its bar, like a level meter's peak */
.hn-meter__bar.is-pick::before {
  content: '';
  position: absolute;
  top: -7px;
  right: -2px;
  left: -2px;
  height: 3px;
  background: var(--hn-text);
}

/* A player-tier flag over the size it's sold at (the game's own figures); red where we'd start for the slots */
.hn-meter__flag {
  position: absolute;
  bottom: calc(100% + 13px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--hn-bg);
  border: 1px solid var(--hn-line-strong);
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--hn-steel);
  transform: translateX(-50%);
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.hn-meter__flag svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--hn-red);
}

.hn-meter__bar.is-suggested .hn-meter__flag {
  background: #2a1115;
  border-color: var(--hn-red);
  color: var(--hn-text);
}

.hn-meter__scale {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.hn-meter__mark {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--hn-label);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--hn-text-3);
  transition: color 140ms ease;
}

.hn-meter__mark.is-pick {
  color: var(--hn-text);
}

/* Change plan: where the server is now */
.hn-meter__mark.is-now::after {
  content: 'now';
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hn-steel-muted);
}

/* Keyboards: the range input is out of sight, so the whole track shows the focus */
.hn-meter__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.hn-meter__track:has(.hn-meter__input:focus-visible) {
  outline: 2px solid var(--hn-red);
  outline-offset: 8px;
}

/* Going up, each bar lights with a flash as it comes on, left to right (js/configure.js staggers them); going down,
   they go dark from the top. The calm path: they simply change. */
@media (prefers-reduced-motion: no-preference) {
  .hn-meter__bar.is-lit {
    animation: hn-bar-lit 460ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes hn-bar-lit {
    0% {
      filter: brightness(2.1);
      transform: scaleY(0.88);
    }

    100% {
      filter: none;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hn-meter__bar {
    transition-delay: 0s !important;
  }
}

/* Phones: a long meter labels its pick, "now", its ends and every third step, never two side by side (js) */
@media (max-width: 575px) {
  .hn-meter__track {
    height: 112px;
  }

  .hn-meter__track.has-flags {
    height: 136px;
  }

  .hn-meter__bars,
  .hn-meter__scale {
    gap: 4px;
  }

  .hn-meter__body.is-dense .hn-meter__mark.is-quiet {
    visibility: hidden;
  }

  .hn-meter__flag {
    padding: 2px 4px;
    font-size: 11px;
  }
}

/* The order summary's status: the build, decoded as it changes (the site's console status line) */
.hn-sheet__status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 18px;
  margin: -6px 0 16px;
  font-family: var(--hn-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--hn-text-2);
}

.hn-sheet__dot {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--hn-red);
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.2);
}

/* A new total: Continue catches the light once (the site's sheen when the cart link changes) */
@media (prefers-reduced-motion: no-preference) {
  body .btn-primary.hn-sheen::after {
    animation: hn-sheen 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes hn-sheen {
    from {
      transform: translateX(-130%);
    }

    to {
      transform: translateX(130%);
    }
  }
}

/* Change plan: the tiles a meter replaced stay in the form, out of sight, and the change is summed up */
.hn-upgrade .hn-cfg-converted {
  display: none;
}

.hn-upgrade__changes {
  margin: 8px 0 0;
  padding: 20px 22px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-line);
}

.hn-upgrade__changes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-upgrade__changes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 9px 0;
  border-top: 1px solid var(--hn-line);
  font-size: 15px;
}

.hn-upgrade__changes li:first-child {
  border-top: 0;
}

.hn-upgrade__changes .hn-upgrade__p {
  margin-left: auto;
  font-weight: 600;
}

.hn-upgrade__sum,
.hn-upgrade__none {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--hn-text-2);
}

.hn-upgrade__none {
  margin: 0;
  color: var(--hn-text-3);
}

.hn-upgrade__sum strong {
  color: var(--hn-text);
}