/* site-dark.css: the signed-out site's dark look, shared by the homepage (base_index.html,
   together with home-ui.css for the homepage's own sections) and every public page on
   base.html (html.hm is set there whenever the page is not a panel page; panel pages have
   panel-ui.css). Design layer only: no markup, heading, link or copy changes. The legacy
   stylesheets (main.css, custom.css, the bundled Bootstrap 4 theme and each page's own style
   block) stay; this file out-specifies them by the html.hm prefix and repeats !important only
   where the legacy rule carries it or the colour sits inline.

   PB, 2026-09-27: "we are going towards dark mode"; 2026-10-02: the pages linked from the
   homepage have to follow it. */

html.hm {
    --hm-ink: #1b1816;
    --hm-ink-2: #211c1a;
    --hm-ink-3: #2b2523;
    --hm-red: #e81c23;
    --hm-red-dark: #b91c1c;
    --hm-red-soft: rgba(232, 28, 35, 0.10);
    --hm-link: #ff6b70;
    --hm-paper: #1b1816;                 /* the page itself */
    --hm-card: rgba(39, 34, 32, 0.94);   /* raised surfaces (slightly translucent, so a scene band shows through) */
    --hm-card-2: rgba(48, 42, 39, 0.96);  /* a surface on a surface */
    --hm-strip: rgba(255, 255, 255, 0.08);  /* a panel's header strip */
    --hm-raise: rgba(255, 255, 255, 0.06);
    --hm-raise-hover: rgba(255, 255, 255, 0.11);
    --hm-field: #141110;
    --hm-line: rgba(255, 255, 255, 0.12);
    --hm-line-strong: rgba(255, 255, 255, 0.22);
    --hm-text: #efeae3;
    --hm-muted: #b8b1a9;
    --hm-faint: #8a8279;
    --hm-on-dark: #d6d3d1;
    --hm-on-dark-strong: #fafaf9;
    --hm-green: #00b67a;
    --hm-gold: #f2c46d;
    --hm-info-bg: rgba(59, 130, 246, 0.12);  --hm-info-border: rgba(59, 130, 246, 0.35);  --hm-info-text: #bfdbfe;
    --hm-ok-bg: rgba(34, 197, 94, 0.12);     --hm-ok-border: rgba(34, 197, 94, 0.35);     --hm-ok-text: #bbf7d0;
    --hm-warn-bg: rgba(245, 158, 11, 0.12);  --hm-warn-border: rgba(245, 158, 11, 0.35);  --hm-warn-text: #fde68a;
    --hm-bad-bg: rgba(239, 68, 68, 0.12);    --hm-bad-border: rgba(239, 68, 68, 0.35);    --hm-bad-text: #fecaca;
    --hm-radius: 8px;
    --hm-radius-sm: 6px;
    --hm-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45);
    --hm-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.55);

    /* The page stylesheets (about.css, contact.css, how_it_works.css, compare_plans.html,
       faq.html) share one token set declared on :root; html.hm outranks :root, so the pages
       pick up the palette through their own names. */
    --bg-background: var(--hm-paper);
    --bg-surface: var(--hm-card);
    --primary-dark: var(--hm-text);
    --secondary-text: var(--hm-muted);
    --border-color: var(--hm-line);
    --card-shadow: var(--hm-shadow);
    --card-shadow-hover: var(--hm-shadow-lift);
    --accent-soft: rgba(232, 28, 35, 0.14);
    --accent-soft-strong: rgba(232, 28, 35, 0.4);
    --primary-color: var(--hm-link);     /* the pages' blue accent becomes the site's red */
    color-scheme: dark;
}

/* ---- base type ---- */
html.hm body {
    background: var(--hm-paper);
    color: var(--hm-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
html.hm main.page, html.hm .page, html.hm .page-main, html.hm .page-container-color { background: var(--hm-paper); }
html.hm h1, html.hm h2, html.hm h3, html.hm h4, html.hm h5, html.hm h6 { color: var(--hm-text); letter-spacing: -0.01em; }
html.hm a { color: var(--hm-link); }
html.hm a:hover { color: #fff; }
html.hm hr { border-top-color: var(--hm-line); }
html.hm p, html.hm li, html.hm dd, html.hm td, html.hm th, html.hm label, html.hm legend, html.hm figcaption { color: inherit; }
html.hm .lead { color: var(--hm-muted); }
html.hm small, html.hm .small { color: inherit; }
html.hm .text-muted, html.hm .text-secondary { color: var(--hm-muted) !important; }
html.hm .text-dark, html.hm .text-body, html.hm .text-black-50 { color: var(--hm-text) !important; }
html.hm .text-primary { color: #7eb0ff !important; }
html.hm .text-success { color: #4ade80 !important; }
html.hm .text-danger { color: #f87171 !important; }
html.hm .text-info { color: #38bdf8 !important; }
html.hm .bg-light, html.hm .bg-white, html.hm .bg-transparent.bg-light { background-color: var(--hm-card) !important; }
html.hm .border, html.hm .border-top, html.hm .border-bottom, html.hm .border-left, html.hm .border-right,
html.hm .border-light { border-color: var(--hm-line) !important; }
html.hm pre { background: #141110; color: #d6d3d1; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); padding: 14px 16px; }
html.hm code { color: #f9a8d4; background: rgba(255, 255, 255, 0.06); border-radius: 4px; padding: 1px 5px; }
html.hm pre code { background: transparent; color: inherit; padding: 0; }
html.hm blockquote { color: var(--hm-text); border-left-color: var(--hm-line-strong); }
html.hm ::selection { background: rgba(232, 28, 35, 0.35); color: #fff; }

/* ---- nav (both bases) ---- */
html.hm .navbar.navbar-wrapper {
    background: var(--hm-ink);
    padding: 10px 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.hm .navbar-header .brand-text img { height: 52px; width: auto; }
html.hm .navbar.navbar-wrapper .nav-item { padding-left: 6px; padding-right: 6px; }
html.hm .navbar.navbar-wrapper .nav-item a {
    font-size: 15px;
    font-weight: 500;
    color: var(--hm-on-dark);
    padding: 8px 12px;
    border-radius: var(--hm-radius-sm);
}
html.hm .navbar.navbar-wrapper .nav-item a:hover { color: var(--hm-on-dark-strong); background: rgba(255, 255, 255, 0.06); }
html.hm .navbar.navbar-wrapper .nav-item a[href="/signup"] {
    background: var(--hm-red);
    color: #fff;
    font-weight: 600;
    padding: 9px 18px;
    margin-left: 6px;
}
html.hm .navbar.navbar-wrapper .nav-item a[href="/signup"]:hover { background: var(--hm-red-dark); color: #fff; }
html.hm #second-line .nav-menu { justify-content: flex-start !important; padding: 8px 0 4px; gap: 4px; }
html.hm #second-line .nav-item a { color: var(--hm-on-dark); font-size: 15px; }

/* ---- the inner pages' ground and title box (base.html: .page-content, the theme's white
   header.page-header) ---- */
html.hm .page-content { color: var(--hm-text); }
html.hm header.page-header, html.hm .page-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}
html.hm header.page-header h1, html.hm header.page-header h2, html.hm .page-header h1 { color: var(--hm-text) !important; }
html.hm .has-shadow { box-shadow: var(--hm-shadow) !important; }

/* ---- Bootstrap components on the palette ---- */
html.hm .card { background: var(--hm-card); border: 1px solid var(--hm-line); color: var(--hm-text); }
html.hm .card.shadow-sm, html.hm .card.shadow { box-shadow: var(--hm-shadow) !important; }
html.hm .card-header { background: var(--hm-raise); border-bottom: 1px solid var(--hm-line); color: var(--hm-text); }
html.hm .card-footer { background: var(--hm-raise); border-top: 1px solid var(--hm-line); }
html.hm .card-header.bg-primary, html.hm .card-header.bg-secondary, html.hm .card-header.bg-info,
html.hm .card-header.bg-success, html.hm .card-header.bg-danger { color: #fff; }
html.hm .card-header.bg-warning.text-dark { color: #111827 !important; }
html.hm .card-title, html.hm .card-text { color: inherit; }
html.hm .list-group-item { background: transparent; border-color: var(--hm-line); color: var(--hm-text); }
html.hm .list-group-item-action:hover { background: var(--hm-raise); color: var(--hm-text); }
html.hm .table { color: var(--hm-text); }
html.hm .table th, html.hm .table td, html.hm .table thead th { border-color: var(--hm-line); }
html.hm .table thead th { background: var(--hm-raise); color: var(--hm-muted); }
html.hm .table-striped tbody tr:nth-of-type(odd) { background: var(--hm-raise); }
html.hm .table-hover tbody tr:hover { background: var(--hm-raise-hover); color: var(--hm-text); }
html.hm .table-bordered, html.hm .table-bordered th, html.hm .table-bordered td { border-color: var(--hm-line); }
html.hm .table-light, html.hm .table-light > th, html.hm .table-light > td, html.hm .thead-light th { background: var(--hm-raise); color: var(--hm-text); }
html.hm .alert { border-color: transparent; }
html.hm .alert-success { background: var(--hm-ok-bg); border-color: var(--hm-ok-border); color: var(--hm-ok-text); }
html.hm .alert-info, html.hm .alert-primary { background: var(--hm-info-bg); border-color: var(--hm-info-border); color: var(--hm-info-text); }
html.hm .alert-warning { background: var(--hm-warn-bg); border-color: var(--hm-warn-border); color: var(--hm-warn-text); }
html.hm .alert-danger { background: var(--hm-bad-bg); border-color: var(--hm-bad-border); color: var(--hm-bad-text); }
html.hm .alert-secondary, html.hm .alert-light { background: var(--hm-raise); border-color: var(--hm-line); color: var(--hm-text); }
html.hm .alert a, html.hm .alert strong { color: inherit; }
html.hm .badge-light, html.hm .badge-secondary { background: #44403c; color: #fafaf9; }
html.hm .badge-pill.badge-light { background: rgba(255, 255, 255, 0.1); color: var(--hm-text); }
html.hm .form-control, html.hm .custom-select {
    background-color: var(--hm-field);
    border: 1px solid var(--hm-line-strong);
    color: var(--hm-text);
}
html.hm .form-control::placeholder { color: var(--hm-faint); }
html.hm .form-control:focus, html.hm .custom-select:focus { background-color: var(--hm-field); border-color: var(--hm-link); color: var(--hm-text); box-shadow: 0 0 0 0.2rem rgba(232, 28, 35, 0.2); }
html.hm .form-control:disabled, html.hm .form-control[readonly] { background-color: var(--hm-card); }
html.hm select.form-control option { background: var(--hm-card); color: var(--hm-text); }
html.hm .input-group-text { background: var(--hm-card); border-color: var(--hm-line-strong); color: var(--hm-muted); }
html.hm .custom-control-label::before { background: var(--hm-field); border-color: var(--hm-line-strong); }
html.hm .btn-light, html.hm .btn-outline-light, html.hm .btn-outline-dark, html.hm .btn-outline-secondary, html.hm .btn-secondary {
    background: var(--hm-raise);
    border-color: var(--hm-line-strong);
    color: var(--hm-text);
}
html.hm .btn-light:hover, html.hm .btn-outline-light:hover, html.hm .btn-outline-dark:hover, html.hm .btn-outline-secondary:hover, html.hm .btn-secondary:hover {
    background: var(--hm-raise-hover);
    border-color: var(--hm-line-strong);
    color: #fff;
}
html.hm .btn-outline-primary { color: #93c5fd; border-color: #3b82f6; }
html.hm .btn-outline-primary:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
html.hm .btn-link { color: var(--hm-link); }
html.hm .close { color: var(--hm-text); text-shadow: none; opacity: 0.7; }
html.hm .modal-content { background: var(--hm-card); border: 1px solid var(--hm-line-strong); color: var(--hm-text); }
html.hm .modal-header, html.hm .modal-footer { border-color: var(--hm-line); }
html.hm .breadcrumb { background: var(--hm-raise); }
html.hm .breadcrumb-item.active, html.hm .breadcrumb-item + .breadcrumb-item::before { color: var(--hm-muted); }
html.hm .jumbotron { background: var(--hm-card); }
html.hm .dropdown-menu { background: var(--hm-card); border-color: var(--hm-line-strong); }
html.hm .dropdown-item { color: var(--hm-text); }
html.hm .dropdown-item:hover { background: var(--hm-raise); color: #fff; }
html.hm .page-link { background: var(--hm-card); border-color: var(--hm-line-strong); color: var(--hm-link); }
html.hm .page-item.active .page-link { background: var(--hm-red); border-color: var(--hm-red); color: #fff; }
html.hm details { color: var(--hm-text); }
html.hm details summary { color: var(--hm-text); }

/* ---- the marketing footer (both bases) ---- */
html.hm footer.main-footer { background: #141110; border-top: 1px solid rgba(255, 255, 255, 0.08); }
html.hm footer .first-row h5 { font-size: 20px; font-weight: 700; color: var(--hm-on-dark-strong); padding-top: 40px; }
html.hm footer .first-row h6 { font-size: 15px; font-weight: 400; color: var(--hm-on-dark); margin: 12px 0 24px; }
html.hm footer .first-row h6 a { font-size: 15px; font-weight: 600; color: #ff5b60 !important; }
html.hm footer .first-row h6 a:hover { color: #fff !important; }
html.hm footer .first-row i { font-size: 20px; color: var(--hm-on-dark); margin: 0 12px; }
html.hm footer .first-row i:hover { color: #ff5b60; }
html.hm .copyrights { margin-top: 28px; padding: 18px 0 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
html.hm .copyrights *, html.hm .copyrights p { color: var(--hm-on-dark); font-size: 13px !important; font-weight: 400; }
html.hm .copyrights a:hover { color: #ff5b60; }
html.hm .copyrights .col-12 p { color: var(--hm-muted); }

/* ---- the guide pages: ten templates with one vocabulary under different prefixes (ds-, bh-,
   hs-, lx-, sr-, sc-, mp-): a hero with a hairline, a TOC box, TL;DR and callout boxes,
   white cards, steps, plans, review cards, tables with light heads, FAQ lists. The red
   gradient CTAs stay as they are. ---- */
html.hm .page-content [class*="-hero"] { border-bottom-color: var(--hm-line); }
html.hm .page-content [class*="-hero"] .lead, html.hm .page-content [class*="-meta"],
html.hm .page-content [class*="-faq"] dd, html.hm .page-content [class*="-rev"] cite,
html.hm .page-content [class*="-plan"] small, html.hm .page-content [class*="-pack"] .req { color: var(--hm-muted); }
html.hm .page-content [class*="-toc"], html.hm .page-content [class*="-tldr"],
html.hm .page-content [class*="-callout"], html.hm .page-content [class*="-disclosure"],
html.hm .page-content [class*="-regions"] { background: var(--hm-card); color: var(--hm-text); border-color: var(--hm-line); }
html.hm .page-content [class*="-tldr"], html.hm .page-content [class*="-callout"], html.hm .page-content [class*="-disclosure"] { background: rgba(232, 28, 35, 0.09); }
html.hm .page-content [class*="-card"]:not([class*="-card-"]),
html.hm .page-content [class*="-step"]:not([class*="-step-"]),
html.hm .page-content [class*="-rev"]:not([class*="-rev-"]),
html.hm .page-content [class*="-feature"]:not([class*="-feature-"]),
html.hm .page-content [class*="-plan"]:not([class*="-plan-"]):not([class*="-plans"]),
html.hm .page-content [class*="-pack"]:not([class*="-pack-"]),
html.hm .page-content [class*="-decision"] .card { background: var(--hm-card); border-color: var(--hm-line); color: var(--hm-text); box-shadow: var(--hm-shadow); }
html.hm .page-content .bh-card.bh-recommended { background: linear-gradient(180deg, var(--hm-card), rgba(232, 28, 35, 0.10)); }
html.hm .page-content [class*="-rev"] blockquote, html.hm .page-content [class*="-card"] .bh-price,
html.hm .page-content [class*="-regions"] strong, html.hm .page-content [class*="-feature"] strong,
html.hm .page-content [class*="-feature"] span { color: var(--hm-text); }
html.hm .page-content [class*="-table"] th, html.hm .page-content [class*="-table"] td { border-color: var(--hm-line); }
html.hm .page-content [class*="-table"] th { background: var(--hm-raise); color: var(--hm-text); }
html.hm .page-content [class*="-table"] td.cross { color: var(--hm-faint); }
html.hm .page-content [class*="-table"] td.tick { color: #4ade80; }
html.hm .page-content .bh-table td.tick, html.hm .page-content .ds-table td.tick { color: #4ade80; }
html.hm .page-content [class*="-section"] h2, html.hm .page-content [class*="-section"] h3 { color: var(--hm-text); }
html.hm .page-content .geo-section > p { color: var(--hm-muted); }
html.hm .page-content .hs-step h3, html.hm .page-content .mp-pack h3, html.hm .page-content .sr-feature h3 { color: var(--hm-link); }
html.hm .page-content .mp-pack .badge, html.hm .page-content .mp-pack .badge.l { background: var(--hm-red-soft); color: var(--hm-link); border-color: rgba(232, 28, 35, 0.4); }
html.hm .page-content .mp-pack .badge.m { background: var(--hm-warn-bg); color: var(--hm-warn-text); border-color: var(--hm-warn-border); }
html.hm .page-content [class*="-faq"] dt { color: var(--hm-text); }
/* inline colours from the same family (best_hosting): slate greys that vanish on the dark page */
html.hm .page-content [style*="color:#4a5568"], html.hm .page-content [style*="color: #4a5568"],
html.hm .page-content [style*="color:#718096"], html.hm .page-content [style*="color: #718096"] { color: var(--hm-muted) !important; }
html.hm .page-content [style*="color:#2d3748"], html.hm .page-content [style*="color: #2d3748"] { color: var(--hm-text) !important; }
html.hm .page-content a[style*="background:#f7fafc"], html.hm .page-content a[style*="background:#fff"] { background: var(--hm-raise) !important; color: var(--hm-text) !important; border-color: var(--hm-line-strong) !important; }
html.hm .page-content [style*="border-top:1px solid #e2e8f0"] { border-top-color: var(--hm-line) !important; }

/* ---- User guide (users_guide.html): one white section style, dark boxes otherwise ---- */
html.hm .guide-section { background: var(--hm-card); box-shadow: var(--hm-shadow); border: 1px solid var(--hm-line); }
html.hm .guide-section p, html.hm .guide-section li { color: var(--hm-text); }
html.hm .guide-meta span { background: var(--hm-raise); border-color: var(--hm-line-strong); color: var(--hm-text); }
html.hm .quick-task-card .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }

/* ---- Compare plans and FAQ: the shared token set is remapped above; the literal
   light surfaces that bypass it ---- */
html.hm .compare-plans-page-wrapper, html.hm .faq-page-wrapper { color: var(--hm-text); }
html.hm .plan-cards-grid li { background-color: var(--hm-card); color: var(--hm-muted); }
html.hm .plan-card-badge { background: var(--hm-raise); color: var(--hm-text); border-color: var(--hm-line-strong); }
html.hm .plan-cards-grid li b { color: #7eb0ff; }
html.hm .key-factors-list li, html.hm .faq-content ul li { background: var(--hm-info-bg); border-color: var(--hm-info-border); color: var(--hm-text); }
html.hm .key-factors-list li strong, html.hm .faq-content ul li strong { color: var(--hm-text); }
html.hm .modern-table { background: var(--hm-card); border-color: var(--hm-line); }
html.hm .modern-table th[scope="row"] { background-color: var(--hm-card); color: var(--hm-text); border-right-color: var(--hm-line); }
html.hm .modern-table td { background-color: var(--hm-card); border-top-color: var(--hm-line); color: var(--hm-text); }
html.hm .modern-table tr:hover td { background-color: var(--hm-card-2); }
html.hm .modern-table thead th { background-color: #141110; }
html.hm .cross-mark { color: var(--hm-faint); }
html.hm .final-cta { background: var(--hm-ok-bg); border-color: var(--hm-ok-border); color: var(--hm-ok-text); }
html.hm .final-cta a { color: #dcfce7; border-bottom-color: rgba(134, 239, 172, 0.6); }
html.hm .ftip { background: rgba(255, 255, 255, 0.14); color: #bfdbfe; }
html.hm .faq-content { background-color: var(--hm-card); border-color: var(--hm-line); }
html.hm .faq-content p, html.hm .faq-content ol li p { color: var(--hm-muted); }
html.hm .faq-content ol li { color: var(--hm-text); }
html.hm .faq-content a { color: #7eb0ff; }
html.hm .faq-page-wrapper details { background-color: var(--hm-card); border-color: var(--hm-line); }
html.hm .faq-page-wrapper details summary { color: var(--hm-text); }
html.hm .compare-plans-page-wrapper [style*="background:#ffffff"] { background: var(--hm-card) !important; }

/* ---- the order page (buy.html) for a signed-out visitor: the panel covers it when signed in ---- */
html.hm .buy-card { background: var(--hm-card); border: 1px solid var(--hm-line); box-shadow: var(--hm-shadow); color: var(--hm-text); }
html.hm .buy-card label, html.hm .buy-card p, html.hm .buy-card strong { color: var(--hm-text); }
html.hm .buy-card .small, html.hm .buy-card small, html.hm .buy-card .form-text, html.hm .buy-card .text-muted { color: var(--hm-muted) !important; }
html.hm .buy-card input.form-control, html.hm .buy-card select.form-control, html.hm .buy-card textarea.form-control { background: var(--hm-field); color: var(--hm-text); border-color: var(--hm-line-strong); box-shadow: none; }
html.hm .compare-bar { background: var(--hm-info-bg); border-color: var(--hm-info-border); color: var(--hm-text); box-shadow: none; }
html.hm .sticky-cta { background: var(--hm-card); border-color: var(--hm-line-strong); color: var(--hm-text); }
html.hm .trustpilot-quote { background: var(--hm-card); border-color: var(--hm-line); color: var(--hm-text); }
html.hm .trustpilot-quote blockquote, html.hm .trustpilot-badge { color: var(--hm-text); }
html.hm .trustpilot-badge { background: var(--hm-raise); }
html.hm .trustpilot-source { color: var(--hm-muted); }
html.hm #pay-options img { background: #fff; border-radius: 8px; padding: 6px 10px; }
html.hm #discounts.alert-success b, html.hm #buy-content-wrapper .alert-success b { color: #dcfce7; }
html.hm #buy-content-wrapper::before { opacity: 0.08; }

/* ---- "What's in" (fragments/whatsin.html, whatsin-v2.css) on the region and plan pages ---- */
html.hm .whatsin-container { background-color: var(--hm-card); box-shadow: var(--hm-shadow); color: var(--hm-text); }
html.hm .whatsin-container h3, html.hm .whatsin-container .whatsin-list li strong { color: var(--hm-text); }
html.hm .whatsin-container .plans-label, html.hm .whatsin-container .plans-navigation .plan-separator,
html.hm .whatsin-container .intro-text, html.hm .whatsin-container .whatsin-item-body, html.hm .whatsin-container .whatsin-item-body p { color: var(--hm-muted); }
html.hm .whatsin-container .plans-navigation a { background-color: var(--hm-raise); border-color: var(--hm-line-strong); color: var(--hm-text); }
html.hm .whatsin-container .plans-navigation a:hover, html.hm .whatsin-container .plans-navigation a.active { background-color: var(--hm-red); border-color: var(--hm-red); color: #fff; }
html.hm .whatsin-container .whatsin-item { background-color: var(--hm-card-2); border-color: var(--hm-line); }
html.hm .whatsin-container .whatsin-item[open] { border-color: var(--hm-line-strong); }
html.hm .whatsin-container .whatsin-item-body { border-top-color: var(--hm-line); }
html.hm .whatsin-container .whatsin-item summary::after { color: var(--hm-muted); }
html.hm .whatsin-container hr { border-top-color: var(--hm-line); }
html.hm .whatsin-container .undecided-text, html.hm .whatsin-container .cta-text { color: #7eb0ff; }
html.hm .whatsin-container .self-serve-bot { background: linear-gradient(135deg, var(--hm-card-2), rgba(59, 130, 246, 0.12)); border-color: var(--hm-info-border); box-shadow: none; }
html.hm .whatsin-container .self-serve-bot h4 { color: #bfdbfe; }
html.hm .whatsin-container .self-serve-bot p, html.hm .whatsin-container .self-serve-bot-points li { color: var(--hm-text); }
html.hm .whatsin-container .self-serve-bot-image img { background: var(--hm-card); border-color: var(--hm-line-strong); }
html.hm .whatsin-container .alert.alert-warning { background-color: var(--hm-warn-bg); border-color: var(--hm-warn-border); color: var(--hm-warn-text); }
html.hm .whatsin-container .alert.alert-warning strong { color: #fef3c7; }
html.hm .whatsin-container .alert.alert-warning .bg-white { background: var(--hm-field) !important; border-color: var(--hm-line-strong) !important; color: #fca5a5 !important; }

/* ---- About and Contact (about.css, contact.css: tokens remapped above; the literals) ---- */
html.hm .about-page-wrapper, html.hm .contact-page-wrapper, html.hm .how-it-works-page-wrapper { color: var(--hm-text); }
html.hm .about-page-wrapper::before, html.hm .contact-page-wrapper::before, html.hm .how-it-works-page-wrapper::before,
html.hm #signin-content-wrapper::before, html.hm #signup-content-wrapper::before, html.hm #cms-content-wrapper::before,
html.hm #affiliate-content-wrapper::before, html.hm .guide-page-wrapper::before, html.hm .bh-page::before,
html.hm .compare-plans-page-wrapper::before, html.hm .faq-page-wrapper::before { opacity: 0.07; }
html.hm .mission-statement, html.hm .promo-offers { background: var(--hm-card); }
html.hm .about-content .btn-red.btn-red-outline { background-color: transparent; color: var(--hm-link); border-color: var(--hm-link); }
html.hm .about-content .btn-red.btn-red-outline:hover { background-color: var(--hm-red-soft); color: #fff; }
html.hm .other-games-list a, html.hm .other-games-new a { border-bottom-color: rgba(255, 255, 255, 0.3); }
html.hm .plans-meta-note, html.hm .plans-meta-note a { color: var(--hm-muted); }
html.hm .contact-hero { background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), var(--hm-card)); color: var(--hm-text); border-color: var(--hm-line); }
html.hm .contact-hero h1 { color: var(--hm-text); }
html.hm .metric-chip, html.hm .support-chip, html.hm .channel-list li, html.hm .tip-list li, html.hm .video-thumb-link { background: var(--hm-raise); color: var(--hm-text); border-color: var(--hm-line-strong); }
html.hm .support-chip:hover { background: var(--hm-raise-hover); color: #fff; }
html.hm .metric-chip strong, html.hm .channel-label, html.hm .video-thumb-title { color: var(--hm-text); }
html.hm .contact-content-section, html.hm .contact-details-section, html.hm .additional-contact-info { background: var(--hm-card); border-color: var(--hm-line); }
html.hm .contact-form-wrapper label { color: var(--hm-text); }
html.hm .contact-quick-tips { background: var(--hm-info-bg); border-color: var(--hm-info-border); color: var(--hm-text); }
html.hm .tip-list a { color: var(--hm-link); }
html.hm .channel-icon { background: var(--hm-red-soft); }
html.hm .channel-icon.discord { background: rgba(88, 101, 242, 0.2); color: #a5b4fc; }
html.hm .social-icons-contact a { color: var(--hm-muted); }
html.hm .flow-container .flow-step { background-color: var(--hm-card); border-color: var(--hm-line); }
html.hm .how-it-works-page-wrapper p { color: var(--hm-muted); }

/* ---- Help (help.html, the same tiles the panel darkens) ---- */
html.hm .help-card { border-color: var(--hm-line); box-shadow: var(--hm-shadow); }
html.hm .help-title, html.hm .help-tile-text, html.hm .help-faq-symptoms, html.hm .help-empty { color: var(--hm-muted); }
html.hm .help-tile { background: var(--hm-raise); border-color: var(--hm-line); color: var(--hm-text); }
html.hm a.help-tile:hover { background: var(--hm-raise-hover); color: #fff; }
html.hm .help-tile i { color: var(--hm-muted); }
html.hm .help-faq { border-top-color: var(--hm-line); }
html.hm .help-faq-q, html.hm .help-faq-a { color: var(--hm-text); }
html.hm .help-faq-q i { color: var(--hm-faint); }

/* ---- the hosting article (hosting_article.css paints the title box and text grey) ---- */
html.hm .content-block h2 { color: #7eb0ff; border-bottom-color: rgba(126, 176, 255, 0.4); }
html.hm .content-block h3 { color: #38bdf8; }
html.hm .content-block p, html.hm .content-block li { color: var(--hm-text); }
html.hm .content-block .testimonials { background-color: var(--hm-card); }

/* ---- Terms and Privacy: Bootstrap cards with filled headers, which keep their meaning ---- */

/* ---- the modpack compatibility matrix and the mod launcher page bring their own dark ---- */
html.hm .mm-page { background-color: transparent; }

/* ---- phones ---- */
@media (max-width: 767px) {
    html.hm .navbar.navbar-wrapper .nav-item a { font-size: 14px; padding: 8px 10px; }
}

/* ---- plans (fragments/plans_old.html: the homepage and the region pages): the same panel as every
   card on the site, the zombie band on top, red button on the popular plan ---- */
html.hm .card-deck { margin: 150px -12px 0 !important; align-items: stretch; }
html.hm .plan-box { padding: 0 12px !important; margin-bottom: 24px; }
html.hm .plan-box .card {
    border: 1px solid var(--hm-line-strong) !important;
    border-radius: var(--hm-radius) !important;
    box-shadow: var(--hm-shadow-lift) !important;
    background: var(--hm-card);
    color: var(--hm-text);
    overflow: visible;
    height: 100%;
}
html.hm .plan-box .card-header {
    position: relative;
    background: linear-gradient(180deg, #2b2523 0%, #1b1816 100%) !important;
    height: 156px;
    padding: 18px 20px 0 !important;
    border-radius: var(--hm-radius) var(--hm-radius) 0 0 !important;
    border-bottom: 1px solid var(--hm-line-strong);
    text-align: left;
}
/* The plan's zombie stands on the right of the band at full height and rises above the card,
   anchored to its own card (the legacy rules floated it at -91/-70 px behind the card,
   z-index -1). Phones stack the cards, so there it stays inside the band. */
html.hm .plan-box .card-header img {
    display: block;
    position: absolute;
    left: auto !important;
    top: auto !important;
    right: 2px;
    bottom: 0;
    max-height: 290px !important;
    width: auto;
    z-index: 1;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}
html.hm .plan-box.plan-XL .card-header img { right: -18px; max-height: 300px !important; }
html.hm .plan-title-wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
html.hm .plan-box .card-header h4 { font-size: 30px; font-weight: 800 !important; color: #fff; letter-spacing: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
html.hm .plan-badge { background: var(--hm-red); font-size: 11px; padding: 4px 9px; }
html.hm .plan-box .card-body { padding: 18px 22px 26px; }
html.hm .plan-box .card-title { font-size: 34px !important; font-weight: 800 !important; color: #fff !important; margin: 4px 0 8px; }
html.hm .plan-box .card-title span { font-size: 15px !important; font-weight: 500 !important; color: var(--hm-muted) !important; }
html.hm .plan-box hr { border-color: var(--hm-line) !important; margin: 12px 0 14px; }
html.hm .plan-box .list-unstyled li, html.hm .plan-box .card .list-unstyled li span { font-size: 15px; line-height: 1.9; font-weight: 400; color: var(--hm-muted) !important; }
html.hm .plan-box .list-unstyled li strong { font-size: 15px; line-height: 1.9; font-weight: 700; color: #fff !important; }
html.hm .plan-box .btn {
    display: inline-block;
    width: 100% !important;
    border-radius: var(--hm-radius-sm) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 11px 18px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
html.hm .plan-box .btn:hover { background: #fff !important; border-color: #fff !important; color: var(--hm-ink) !important; }
html.hm .plan-box.plan-M .card { border-color: rgba(232, 28, 35, 0.6) !important; }
html.hm .plan-box.plan-M .btn { background: var(--hm-red) !important; border-color: var(--hm-red) !important; color: #fff !important; }
html.hm .plan-box.plan-M .btn:hover { background: var(--hm-red-dark) !important; border-color: var(--hm-red-dark) !important; }
/* the two notes and the compare button under the cards */
html.hm .plans-limit-note, html.hm .plans-meta-note { font-size: 13px; color: var(--hm-muted) !important; font-weight: 400; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
html.hm .plans-cta { margin-top: 6px; }

/* ---- testimonials: the rainy city scene, dark glass cards on it ---- */
html.hm .testimonials-container { background: linear-gradient(180deg, rgba(27, 24, 22, 0.34), rgba(27, 24, 22, 0.50)), url("/static/img/cdn/art-rain-2560.webp") center / cover no-repeat !important; padding: 40px 0 34px; margin-bottom: 0; }
html.hm .testimonials-container::before { display: none; }
html.hm .header-opinion { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); font-size: 26px; font-weight: 700; margin-bottom: 26px; }
html.hm .testimonial { background: rgba(27, 24, 22, 0.80) !important; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); padding: 28px 26px 22px 30px; }
html.hm .testimonial-icon { background: var(--hm-red); border-radius: 6px; width: 40px; height: 36px; line-height: 34px; font-size: 16px; top: 22px; left: -14px; }
html.hm .testimonial-icon:before { border-bottom-color: var(--hm-red-dark); border-left-width: 14px; top: -12px; }
html.hm .description { color: var(--hm-text) !important; font-style: normal; font-size: 15px; line-height: 1.7; }
html.hm .testimonial .title { color: var(--hm-muted) !important; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
html.hm .glide__arrow { background: var(--hm-card); color: #fff; border: 1px solid var(--hm-line-strong); box-shadow: var(--hm-shadow); }
html.hm .glide__arrow:hover { background: #fff; color: var(--hm-ink); }

/* ---- phones: the shared fragments ---- */
@media (max-width: 1024px) {
    html.hm .testimonials-container { background-image: linear-gradient(180deg, rgba(27, 24, 22, 0.34), rgba(27, 24, 22, 0.50)), url("/static/img/cdn/art-rain-1080.webp") !important; }
}
@media (max-width: 767px) {
    html.hm .card-deck { margin-top: 28px !important; }
    html.hm .plan-box .card-header { overflow: hidden; height: 180px; }
    html.hm .plan-box .card-header img { max-height: 176px !important; bottom: 0; right: 14px; }
    html.hm .plan-box.plan-XL .card-header img { max-height: 180px !important; right: 4px; }
}

/* ---- second pass from the contrast audit (2026-10-02) ---- */
/* The generic link colour reached into filled buttons and badges. On the public pages the primary
   button is the brand red (the bundled theme painted it purple); outline buttons are light. */
html.hm .page-content .btn-primary, html.hm .page-content a.btn-primary { background: var(--hm-red) !important; border-color: var(--hm-red) !important; color: #fff !important; }
html.hm .page-content .btn-primary:hover, html.hm .page-content a.btn-primary:hover { background: var(--hm-red-dark) !important; border-color: var(--hm-red-dark) !important; color: #fff !important; }
html.hm a.btn-success, html.hm a.btn-danger, html.hm a.btn-info, html.hm a.btn-dark, html.hm a.btn-red, html.hm a.compare-plans-btn,
html.hm a.badge, html.hm a.badge-primary, html.hm a.cta-primary, html.hm a.btn-primary { color: #fff; }
html.hm a.btn-success:hover, html.hm a.btn-danger:hover, html.hm a.btn-info:hover, html.hm a.btn-red:hover, html.hm a.badge:hover { color: #fff; }
html.hm a.btn-warning, html.hm a.btn-light { color: #111827; }
html.hm .page-content .btn-outline-primary { color: var(--hm-text); border-color: var(--hm-line-strong); }
html.hm .page-content .btn-outline-primary:hover { background: var(--hm-red); border-color: var(--hm-red); color: #fff; }
html.hm .page-content .btn-outline-primary.disabled, html.hm .page-content .btn-outline-primary.disabled-link { opacity: 0.5; }
/* code inside tinted boxes: the pink reads badly on red, blue and amber */
html.hm .alert code, html.hm [class*="-callout"] code, html.hm [class*="-tldr"] code, html.hm .faq-content ul li code,
html.hm .key-factors-list code, html.hm .help-tile code, html.hm .alert-warning code { color: #fff; background: rgba(0, 0, 0, 0.35); }
/* about and how-it-works: the step captions were black */
html.hm .img-caption, html.hm .img-caption strong, html.hm .flow-step .img-caption { color: var(--hm-text) !important; }
/* best-hosting verdict lines */
html.hm .bh-good, html.hm .page-content .bh-card .bh-good { color: #4ade80; }
html.hm .bh-bad, html.hm .page-content .bh-card .bh-bad { color: #f87171; }
/* Terms and Privacy card headers: the yellow one keeps dark text, the teal and grey ones darken a step */
html.hm .card-header.bg-warning, html.hm .card-header.bg-warning h2, html.hm .card-header.bg-warning h3 { color: #111827 !important; }
html.hm .card-header.bg-info { background: #0e7490 !important; }
html.hm .card-header.bg-secondary { background: #4b5563 !important; }
html.hm .card-header.bg-primary { background: #1d4ed8 !important; }
/* The mod launcher page (website/cms/GameFeatures/ModLauncher.md brings its own light tool) */
html.hm .mlt-tab { background: var(--hm-raise); border-color: var(--hm-line-strong); color: var(--hm-text); }
html.hm .mlt-tab:hover { background: var(--hm-raise-hover); border-color: var(--hm-line-strong); }
html.hm .mlt-tab--active, html.hm .mlt-tab--active:hover { background: var(--hm-red); border-color: var(--hm-red); color: #fff; }
html.hm .mlt-card { background: var(--hm-card); border-color: var(--hm-line); }
html.hm .mlt-headline h3, html.hm .mlt-value, html.hm .mlt-section h4, html.hm .mlt-section ol { color: var(--hm-text); }
html.hm .mlt-author, html.hm .mlt-label { color: var(--hm-muted); }
html.hm .mlt-badge-l { background: var(--hm-info-bg); color: var(--hm-info-text); border-color: var(--hm-info-border); }
html.hm .mlt-badge-p { background: var(--hm-red-soft); color: var(--hm-link); border-color: rgba(232, 28, 35, 0.4); }
html.hm .mlt-item { background: var(--hm-card-2); border-color: var(--hm-line); }
html.hm .mlt-notes { background: var(--hm-warn-bg); border-left-color: #f59e0b; color: var(--hm-warn-text); }
html.hm #cms-content-wrapper [style*="background:#edf6ff"], html.hm #cms-content-wrapper [style*="background:#f2f6fa"],
html.hm #cms-content-wrapper [style*="background:#f5f7fb"], html.hm #cms-content-wrapper [style*="background:#fff;"],
html.hm #cms-content-wrapper [style*="background: #fff;"] { background: var(--hm-card) !important; color: var(--hm-text) !important; border-color: var(--hm-line) !important; }
html.hm #cms-content-wrapper [style*="background:#fff5e8"] { background: var(--hm-warn-bg) !important; color: var(--hm-warn-text) !important; }
html.hm #cms-content-wrapper [style*="color:#0b2a43"], html.hm #cms-content-wrapper [style*="color:#405264"],
html.hm #cms-content-wrapper [style*="color:#11324d"], html.hm #cms-content-wrapper [style*="color:#2d3748"],
html.hm #cms-content-wrapper [style*="color:#1a202c"] { color: var(--hm-text) !important; }
html.hm #cms-content-wrapper [style*="color:#1565c0"] { color: #7eb0ff !important; }
html.hm #cms-content-wrapper [style*="border-bottom:2px solid #e4ebf2"] { border-bottom-color: var(--hm-line) !important; }
html.hm #cms-content-wrapper p, html.hm #cms-content-wrapper li { color: var(--hm-text); }
html.hm #cms-content-wrapper strong { color: var(--hm-text); }
/* the mod matrix page: its own dark table; the wrapper around it had a light ground */
html.hm .mm-page { background-color: transparent; color: var(--hm-text); }

/* docs and reviews: their hero is a Bootstrap section; it sits on the page's scene band like every
   other title (the band picks the storm city for these pages) */
html.hm .page-content > section.bg-light.border-bottom:first-child,
html.hm .page-content section.py-5.bg-light.border-bottom {
    background: transparent !important;
    border-bottom-color: var(--hm-line) !important;
}
/* the titles sit on the bands */
html.hm .page-content h1, html.hm header.page-header h1 { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 2px 18px rgba(0, 0, 0, 0.55); }
html.hm .page-content [class*="-hero"] .lead, html.hm .guide-hero .lead, html.hm .contact-hero .lead, html.hm .page-content .display-4 + .lead,
html.hm .page-content [class*="-hero"] [class*="-meta"], html.hm .guide-meta, html.hm .page-content section.bg-light .lead { color: #efeae3 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
html.hm .page-content [class*="-hero"] { border-bottom-color: rgba(255, 255, 255, 0.14); }
html.hm .contact-hero { background: rgba(27, 24, 22, 0.62); border-color: rgba(255, 255, 255, 0.14); backdrop-filter: blur(2px); }
html.hm .contact-hero::after { display: none; }
html.hm .guide-hero { padding-top: 48px; }
html.hm .page-content section.bg-light .breadcrumb-item a, html.hm .page-content section.bg-light .breadcrumb-item.active { color: #efeae3; }

/* ---- Compare plans: the game's inventory panels (PB, 2026-10-02: "for compare plans, we might use
   tiles/icons from this"): near-black panels with a thin light frame, a header strip with an icon,
   the badges as inventory slots, the stats table as the item-stats panel ---- */
html.hm .plan-cards-grid li {
    background: rgba(20, 17, 16, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--hm-text);
}
html.hm .plan-cards-grid li::before { display: none; }
html.hm .plan-cards-grid li:hover { border-color: var(--hm-gold); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 196, 109, 0.35); }
html.hm .plan-cards-grid li b {
    display: flex; align-items: center; gap: 10px;
    margin: -24px -24px 14px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.08em;
}
html.hm .plan-cards-grid li b i { color: var(--hm-gold); }   /* the plan icon the template already carries */
html.hm .plan-fit { color: #fff; }
html.hm .plan-card-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
html.hm .plan-card-badge {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    color: #efeae3;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 8px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html.hm .key-factors-list li { background: rgba(20, 17, 16, 0.88); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; color: var(--hm-text); }
/* the supercraft.host games per plan (fragments/sc_games_compare.html): its inline style paints a
   white card and a mint row with literal colours, so on the dark site the plan name and the new
   games came out near-white on white. Same panels as the plan cards; the tier colour on the left
   edge stays. The wrapper in the selector outranks the fragment's own prefers-color-scheme rule. */
html.hm .compare-plans-page-wrapper .sc-tier { background: rgba(20, 17, 16, 0.88); border-radius: 6px; color: var(--hm-text); }
html.hm .compare-plans-page-wrapper .sc-tier-head { background: rgba(255, 255, 255, 0.08); }
html.hm .compare-plans-page-wrapper .sc-tier-name { color: #fff; }
html.hm .compare-plans-page-wrapper .sc-tier-count, html.hm .compare-plans-page-wrapper .sc-games-label { color: var(--hm-muted); }
html.hm .compare-plans-page-wrapper .sc-games-new { background: var(--hm-ok-bg); }
html.hm .compare-plans-page-wrapper .sc-games-new .sc-games-label { color: var(--hm-ok-text); }
html.hm .compare-plans-page-wrapper .sc-games-new .sc-game { color: #fff; }
html.hm .compare-plans-page-wrapper .sc-games-inherited .sc-game { color: var(--hm-on-dark); }
html.hm .modern-table { border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
html.hm .modern-table thead th { background-color: rgba(255, 255, 255, 0.08); color: #fff; letter-spacing: 0.08em; }
html.hm .modern-table th[scope="row"], html.hm .modern-table td { background-color: rgba(20, 17, 16, 0.88); }
html.hm .modern-table tbody tr:nth-child(even) th[scope="row"], html.hm .modern-table tbody tr:nth-child(even) td { background-color: rgba(30, 26, 24, 0.9); }
html.hm .modern-table tr:hover td, html.hm .modern-table tr:hover th[scope="row"] { background-color: rgba(242, 196, 109, 0.08); }
html.hm .modern-table th[scope="row"] { color: #fff; }
html.hm .tick-mark { color: #4ade80; }
html.hm .configure-btn { background-color: var(--hm-red) !important; }
html.hm .configure-btn:hover { background-color: var(--hm-red-dark) !important; }
html.hm .plan-comparison-container h2 { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.14); }

/* ---- the language homes in the footer (fragments/language_links.html) ---- */
html.hm .lang-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0 0 10px; font-size: 14px; }
html.hm .lang-links a { color: var(--hm-muted); text-decoration: none; }
html.hm .lang-links a:hover, html.hm .lang-links a[aria-current="page"] { color: #fff; }
html.hm .lang-links a[aria-current="page"] { font-weight: 700; }

/* ---- the one-form order (fragments/order_form.html on /order and /compare-hosting-plans#order): the
   compare cards' inventory panel holding the plans and terms as tiles, a gold frame on the chosen one;
   the pay buttons are the red action buttons below ---- */
html.hm .order-page { max-width: 1020px; margin: 0 auto; padding: 34px 16px 60px; }
html.hm .order-page__head { text-align: center; margin-bottom: 22px; }
html.hm .order-page__head h1 { color: #fff; font-weight: 800; }
html.hm .order-page__head p, html.hm .order-page__trust { color: var(--hm-muted); }
html.hm .order-page__trust { text-align: center; margin-top: 18px; font-size: 14px; }
html.hm .order-section > p { color: var(--hm-muted); }
html.hm .order-form {
    background: rgba(20, 17, 16, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--hm-text);
    padding: 22px;
    scroll-margin-top: 80px;
}
html.hm .order-part { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
html.hm .order-part__title {
    display: flex; align-items: center; gap: 10px; width: auto; margin-bottom: 10px;
    color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
html.hm .order-part__num {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--hm-red); color: #fff; font-size: 12px; letter-spacing: 0;
}
html.hm .order-tiers, html.hm .order-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
html.hm .order-tier, html.hm .order-term { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400; }
html.hm .order-tier input, html.hm .order-term input { position: absolute; opacity: 0; width: 1px; height: 1px; }
html.hm .order-tier__body, html.hm .order-term span {
    display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px;
    background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html.hm .order-term span { align-items: center; justify-content: center; text-align: center; padding: 10px 8px; gap: 2px; color: #fff; font-weight: 600; }
html.hm .order-tier:hover .order-tier__body, html.hm .order-term:hover span { border-color: rgba(242, 196, 109, 0.6); }
html.hm .order-tier input:checked + .order-tier__body, html.hm .order-term input:checked + span {
    border-color: var(--hm-gold); background: rgba(242, 196, 109, 0.08); box-shadow: 0 0 0 1px rgba(242, 196, 109, 0.5);
}
html.hm .order-tier input:focus-visible + .order-tier__body, html.hm .order-term input:focus-visible + span { outline: 2px solid var(--hm-gold); outline-offset: 2px; }
html.hm .order-tier__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
html.hm .order-tier__name { color: #fff; font-weight: 700; white-space: nowrap; }
html.hm .order-tier__price { color: var(--hm-gold); font-weight: 700; white-space: nowrap; }
html.hm .order-tier__facts { color: var(--hm-text); font-size: 13px; }
html.hm .order-tier__base { color: var(--hm-faint); font-size: 12px; }
html.hm .order-tier__chips { display: flex; flex-wrap: wrap; gap: 4px; }
html.hm .order-chip { padding: 3px 6px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px; color: var(--hm-muted); font-size: 11px; font-weight: 600; }
html.hm .order-term small { color: var(--hm-ok-text); font-size: 12px; font-weight: 600; }
html.hm .order-form select.form-control, html.hm .order-form input.form-control { background: var(--hm-field); color: var(--hm-text); border-color: var(--hm-line-strong); }
html.hm .order-form label { color: var(--hm-text); }
html.hm .order-hint { display: block; margin-top: 6px; color: var(--hm-muted); font-size: 13px; }
html.hm .order-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 6px; padding: 14px 0; border-top: 1px solid var(--hm-line); }
html.hm .order-total__label { color: var(--hm-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
html.hm .order-total__value { color: #fff; font-size: 18px; font-weight: 700; }
html.hm .order-total__note { width: 100%; color: var(--hm-muted); font-size: 13px; }
html.hm .order-pay { display: flex; flex-wrap: wrap; gap: 10px; }
html.hm .order-pay .btn { padding: 10px 18px; font-weight: 700; }
html.hm .order-noscript { width: 100%; margin: 6px 0 14px; color: var(--hm-text); font-size: 14px; }
html.hm .order-noscript caption { caption-side: top; color: var(--hm-muted); }
html.hm .order-noscript th, html.hm .order-noscript td { padding: 6px 8px; border-top: 1px solid var(--hm-line); text-align: left; }
html.hm .order-error { margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--hm-bad-border); border-radius: 4px; background: var(--hm-bad-bg); color: var(--hm-bad-text); }
@media (max-width: 900px) { html.hm .order-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    html.hm .order-tiers { grid-template-columns: 1fr; }
    html.hm .order-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.hm .order-form { padding: 16px; }
    html.hm .order-pay .btn { width: 100%; }
}

/* ---- modpack art tiles (fragments/hosting_features.html, modpacks_plan_guide.html) ---- */
html.hm .mods-art { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 22px 0 6px; padding: 0; list-style: none; }
html.hm .mods-art-tile {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
html.hm .mods-art-tile figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 7px 12px;
    background: linear-gradient(180deg, rgba(20, 17, 16, 0), rgba(20, 17, 16, 0.92) 55%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
html.hm .mods-art-tile figcaption small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--hm-muted); }

/* mod launcher page: two inline light boxes and the white CTA button */
html.hm #cms-content-wrapper [style*="background:#f6fbff"] { background: var(--hm-card) !important; border-color: var(--hm-line) !important; }
html.hm #cms-content-wrapper [style*="background:#f6fbff"] h3, html.hm #cms-content-wrapper [style*="background:#f6fbff"] p { color: var(--hm-text) !important; }
html.hm .mlt-cta-btn, html.hm .mlt-cta-btn:hover { color: #a93620; }

@media (max-width: 767px) {
    html.hm .about-page-wrapper::before, html.hm .contact-page-wrapper::before, html.hm .how-it-works-page-wrapper::before,
    html.hm #signin-content-wrapper::before, html.hm #signup-content-wrapper::before, html.hm .guide-page-wrapper::before,
    html.hm .compare-plans-page-wrapper::before,
    html.hm main.ds-page::before, html.hm main.hs-page::before, html.hm main.lx-page::before, html.hm main.sr-page::before,
    html.hm main.sc-page::before, html.hm main.mp-page::before, html.hm .content-block::before { height: 380px; background-position: center top; }
    html.hm .plan-card-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- one button system (PB, 2026-10-02: "it must not be different, we need it consistent"):
   red fill = the action; light outline = everything else; on a red block the button is white.
   Written after every page rule so it wins on order. ---- */
html.hm .btn-primary, html.hm a.btn-primary, html.hm .btn-success, html.hm a.btn-success, html.hm .btn-red, html.hm a.btn-red,
html.hm .about-content .btn-red, html.hm .cta-primary, html.hm a.cta-primary, html.hm .configure-btn, html.hm .mlt-tab--active,
html.hm .page-content .btn-primary, html.hm .page-content a.btn-primary, html.hm .plan-hero .btn-primary, html.hm .buy-card .btn-primary {
    background: var(--hm-red) !important;
    border-color: var(--hm-red) !important;
    color: #fff !important;
    box-shadow: none;
}
html.hm .btn-primary:hover, html.hm a.btn-primary:hover, html.hm .btn-success:hover, html.hm .btn-red:hover, html.hm a.btn-red:hover,
html.hm .about-content .btn-red:hover, html.hm .cta-primary:hover, html.hm .configure-btn:hover, html.hm .mlt-tab--active:hover,
html.hm .page-content .btn-primary:hover, html.hm .plan-hero .btn-primary:hover, html.hm .buy-card .btn-primary:hover {
    background: var(--hm-red-dark) !important;
    border-color: var(--hm-red-dark) !important;
    color: #fff !important;
    filter: none;
}
html.hm .btn-outline-primary, html.hm .btn-outline-secondary, html.hm .btn-outline-light, html.hm .btn-outline-dark, html.hm .btn-outline-info,
html.hm .btn-light, html.hm .btn-secondary, html.hm .btn-info, html.hm .cta-ghost, html.hm .btn-outline, html.hm a.btn-red.compare-plans-btn,
html.hm .page-content .btn-outline-primary, html.hm .page-content .btn-outline-secondary, html.hm .plan-hero .btn-outline-secondary,
html.hm .about-content .btn-red.btn-red-outline, html.hm .quick-task-card .btn-outline-light, html.hm .mlt-tab {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    box-shadow: none;
}
html.hm .btn-outline-primary:hover, html.hm .btn-outline-secondary:hover, html.hm .btn-outline-light:hover, html.hm .btn-outline-dark:hover, html.hm .btn-outline-info:hover,
html.hm .btn-light:hover, html.hm .btn-secondary:hover, html.hm .btn-info:hover, html.hm .cta-ghost:hover, html.hm .btn-outline:hover, html.hm a.btn-red.compare-plans-btn:hover,
html.hm .page-content .btn-outline-primary:hover, html.hm .page-content .btn-outline-secondary:hover, html.hm .plan-hero .btn-outline-secondary:hover,
html.hm .about-content .btn-red.btn-red-outline:hover, html.hm .quick-task-card .btn-outline-light:hover, html.hm .mlt-tab:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--hm-ink) !important;
}
/* the red blocks (the guides' CTAs) carry the brand red, not the old orange gradient; their button is white */
html.hm .page-content [class*="-cta-top"], html.hm .page-content [class*="-cta-bottom"], html.hm .bh-cta, html.hm .mlt-cta,
html.hm #cms-content-wrapper [style*="#e25c40 100%)"] {   /* the inline orange gradient (no comma in the match: the scope test splits on commas) */
    background: linear-gradient(135deg, #b91c1c 0%, #e81c23 100%) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
html.hm .page-content [class*="-cta-top"] .btn, html.hm .page-content [class*="-cta-bottom"] .btn, html.hm .bh-cta .btn, html.hm .mlt-cta-btn,
html.hm #cms-content-wrapper a[style*="background:#fff; color:#c44426"] { background: #fff !important; color: var(--hm-red-dark) !important; border: 0; }
html.hm .page-content [class*="-cta-top"] .btn:hover, html.hm .page-content [class*="-cta-bottom"] .btn:hover, html.hm .bh-cta .btn:hover, html.hm .mlt-cta-btn:hover { background: #fde8e8 !important; color: var(--hm-red-dark) !important; }
/* ---- one accent: the site's red where pages used their own blue or orange ---- */
html.hm .text-primary, html.hm .page-content .eyebrow, html.hm .geo-hero .eyebrow, html.hm .bh-hero .eyebrow, html.hm .contact-hero .eyebrow,
html.hm .section-heading .eyebrow, html.hm .faq-content a, html.hm .whatsin-container .undecided-text, html.hm .whatsin-container .cta-text,
html.hm .flow-step-number, html.hm .other-games i, html.hm .metric-chip i, html.hm .support-chip i, html.hm .hero-contact-list i, html.hm .tip-list i,
html.hm .video-thumb-open, html.hm .channel-list a, html.hm .hero-contact-list a, html.hm #cms-content-wrapper [style*="color:#1565c0"] { color: var(--hm-link) !important; }
html.hm .plan-cards-grid li b, html.hm .content-block h2, html.hm .content-block h3, html.hm .plan-comparison-container h2 { color: #fff !important; border-bottom-color: rgba(255, 255, 255, 0.14); }
html.hm .modern-table thead th { background-color: var(--hm-strip); }
html.hm .plan-cards-grid li, html.hm .key-factors-list li, html.hm .faq-content ul li, html.hm .contact-quick-tips, html.hm .compare-bar,
html.hm .modern-table th[scope="row"], html.hm .modern-table td { background: var(--hm-card); border-color: var(--hm-line); }
html.hm .modern-table tbody tr:nth-child(even) th[scope="row"], html.hm .modern-table tbody tr:nth-child(even) td { background-color: var(--hm-card-2); }
html.hm .plan-cards-grid li, html.hm .key-factors-list li { border: 1px solid var(--hm-line-strong); border-radius: var(--hm-radius); }
html.hm .plan-cards-grid li b { background: var(--hm-strip); }
html.hm .plan-cards-grid li:nth-child(1), html.hm .plan-cards-grid li:nth-child(2), html.hm .plan-cards-grid li:nth-child(3), html.hm .plan-cards-grid li:nth-child(4) { border-top: 1px solid var(--hm-line-strong); }
html.hm .plan-cards-grid li:nth-child(2) { border-color: rgba(232, 28, 35, 0.6); }
html.hm .final-cta { background: var(--hm-card); border-color: var(--hm-line-strong); color: var(--hm-text); }
html.hm .final-cta a { color: var(--hm-link); border-bottom-color: rgba(255, 107, 112, 0.5); }
html.hm .ftip { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* the order page's blue hero becomes the site's dark panel with the red action */
html.hm .plan-hero { background: linear-gradient(135deg, #2b2523 0%, #1b1816 100%); border: 1px solid var(--hm-line-strong); box-shadow: var(--hm-shadow-lift); }
html.hm .plan-hero::after { display: none; }
html.hm .plan-hero__pills .pill, html.hm .plan-hero .badge-primary { background: var(--hm-strip); color: var(--hm-text); border-color: var(--hm-line-strong); }
html.hm .plan-hero .text-muted { color: var(--hm-muted) !important; }
html.hm .plan-hero .trust-chip a { color: var(--hm-link); }
html.hm .plan-hero__nav a.active { background: var(--hm-red); border-color: var(--hm-red); color: #fff; }
html.hm .badge-primary, html.hm .badge-info { background: var(--hm-strip); color: var(--hm-text); border: 1px solid var(--hm-line-strong); }
html.hm .badge-success { background: rgba(34, 197, 94, 0.2); color: #bbf7d0; }
html.hm .badge-danger { background: var(--hm-red); color: #fff; }

/* ---- feature icons on the plan cards and the Compare plans badges: Font Awesome glyphs (the
   site loads FA 5.15 on both bases), one weight, crisp at 13 px. The inventory art PB pasted
   was tried here on 2026-10-02 and read as smudges at this size ("the icons look shitty"); the
   pack art stays on the modpack badges, where a picture is the point. ---- */
html.hm .plan-card-badge, html.hm .plan-box li[data-quotum] > span { display: inline-flex; align-items: center; gap: 8px; }
html.hm .plan-card-badge { justify-content: flex-start; text-align: left; }
html.hm .plan-card-badge::before, html.hm .plan-box li[data-quotum] > span::before {
    content: "";
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.09) center / 78% auto no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    color: var(--hm-gold);
}
html.hm .plan-box li[data-quotum] > span::before { width: 20px; height: 20px; background: none; border: 0; color: var(--hm-muted); font-size: 13px; }
html.hm .plan-box li[data-quotum="MAX_PLAYERS"] > span::before { content: "\f0c0"; }
html.hm .plan-box li[data-quotum="PRIORITY"] > span::before { content: "\f590"; }
html.hm .plan-box li[data-quotum="CPU_PRIORITY"] > span::before { content: "\f2db"; }
html.hm .plan-box li[data-quotum="MAX_SIZE"] > span::before { content: "\f279"; }
html.hm .plan-card-badge[data-badge*="rwg"]::before, html.hm .plan-card-badge[data-badge*="world"]::before, html.hm .plan-card-badge[data-badge*="map"]::before { content: "\f279"; }
html.hm .plan-card-badge[data-badge*="vanilla"]::before { content: "\f06c"; }
html.hm .plan-card-badge[data-badge*="backup"]::before { content: "\f1c0"; }
html.hm .plan-card-badge[data-badge*="instant"]::before, html.hm .plan-card-badge[data-badge*="setup"]::before { content: "\f0e7"; }
html.hm .plan-card-badge[data-badge*="ftp"]::before { content: "\f07c"; }
html.hm .plan-card-badge[data-badge*="upload"]::before, html.hm .plan-card-badge[data-badge*="save"]::before { content: "\f382"; }
html.hm .plan-card-badge[data-badge*="crossplay"]::before { content: "\f11b"; }
html.hm .plan-card-badge[data-badge*="player"]::before, html.hm .plan-card-badge[data-badge*="slot"]::before { content: "\f0c0"; }
html.hm .plan-card-badge[data-badge*="allocs"]::before, html.hm .plan-card-badge[data-badge*="csmm"]::before, html.hm .plan-card-badge[data-badge*="telnet"]::before, html.hm .plan-card-badge[data-badge*="rcon"]::before { content: "\f120"; }
html.hm .plan-card-badge[data-badge*="support"]::before { content: "\f590"; }
html.hm .plan-card-badge[data-badge*="cpu"]::before, html.hm .plan-card-badge[data-badge*="priority"]::before { content: "\f2db"; }
html.hm .plan-card-badge[data-badge*="mod"]::before { content: "\f0ad"; }
html.hm .plan-card-badge[data-badge*="darkness-falls"]::before { content: ""; background-image: url("/static/img/darkness-falls2.webp"); background-size: cover; }
html.hm .plan-card-badge[data-badge*="war3zuk"]::before { content: ""; background-image: url("/static/img/cdn/warzuk-2.webp"); background-size: cover; }
/* "Everything in M, plus": the progression line spans the badge grid, no slot */
html.hm .plan-card-badge--base { grid-column: 1 / -1; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.22); color: var(--hm-muted); font-weight: 600; justify-content: center; }
html.hm .plan-card-badge--base::before { display: none; }
html.hm .plan-cards-grid li:hover { border-color: rgba(255, 255, 255, 0.38); box-shadow: var(--hm-shadow-lift); }

/* ---- the public server list (server_list.html): inline navy and white boxes onto the palette ---- */
html.hm .page-content [style*="background:#0f172a"] { background: var(--hm-card) !important; color: var(--hm-text) !important; border: 1px solid var(--hm-line-strong); box-shadow: var(--hm-shadow) !important; }
html.hm .page-content [style*="border-left:4px solid #3b82f6"] { background: var(--hm-card) !important; border-left-color: var(--hm-red) !important; color: var(--hm-text) !important; }   /* the server list's light gradient box (no comma in the match) */
html.hm .page-content [style*="background:#fff;border-radius:6px"] { background: var(--hm-card-2) !important; border-color: var(--hm-line) !important; }
html.hm .page-content [style*="color:#1e293b"] { color: var(--hm-text) !important; }
html.hm .page-content [style*="color:#475569"], html.hm .page-content [style*="color:#94a3b8"] { color: var(--hm-muted) !important; }
html.hm .page-content [style*="background:#3b82f6"] { background: var(--hm-red) !important; }
html.hm #cms-content-wrapper [style*="background:#f7f7fb"] { background: var(--hm-card) !important; border-color: var(--hm-line) !important; }
html.hm #cms-content-wrapper [style*="background:#f7f7fb"] h3, html.hm #cms-content-wrapper [style*="background:#f7f7fb"] p { color: var(--hm-text) !important; }

/* ---- the second review round (PB, 2026-10-02) ---- */
/* The Compare Hosting Plans button: main.css sizes .btn-red as a 40 px pill with 140 px side
   padding and 26 px type on wide screens (and a 400 px top margin past 3000 px). One size for
   every .btn-red on the site. */
html.hm .btn-red, html.hm a.btn-red, html.hm .compare-plans-btn, html.hm .about-content .btn-red {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 10px 22px !important;
    border-radius: var(--hm-radius-sm) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-top: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}
html.hm .plans-cta p { margin-bottom: 6px; }
/* The order page's payment choice: the two logo pills and their buttons as one tidy pair. */
html.hm #pay-options { max-width: 760px; margin: 8px auto 0; }
html.hm #pay-options .row + .row { margin-top: 10px; }
html.hm #pay-options img { display: inline-block; height: auto; max-height: 56px; width: auto; max-width: 100%; background: #fff; border-radius: 8px; padding: 8px 14px; box-shadow: var(--hm-shadow); }
html.hm #pay-options .btn { min-width: 236px; }
html.hm .cf-turnstile { border-radius: 8px; overflow: hidden; }
/* Pages whose title and intro sit straight on the scene band (no hero box): a heavier, even
   tint under the text, white intro copy with a shadow, so the scene is a texture behind the
   words rather than a photo competing with them. */
html.hm .how-it-works-page-wrapper header.page-header { padding-top: 8px; }

/* ---- the page scene (PB, 2026-10-02, "with such an approach we can work on it endlessly") ----
   One construction for every public page, independent of the page's own wrappers: .page-content
   starts at the nav's bottom edge on every base.html page, so its ::before paints the scene flush
   under the nav at one fixed height, tinted, fading into the page colour. Whatever the page puts
   up there (a title, a hero box, the sign-in card) sits on it. The scene is picked by what the
   page contains (:has), with a default; the homepage hero has its own artwork and is excluded. */
html.hm .page-content {
    position: relative; z-index: 0; background: transparent !important;
    --hm-scene: url("/static/img/cdn/scene-burnt-forest.webp");
    --hm-scene-pos: center 70%;   /* which strip of the scene the band shows */
    --hm-tint-1: 0.58; --hm-tint-2: 0.56;   /* the tint over its top; a dark scene takes less */
}
html.hm .page-content::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; left: 0; right: 0;
    height: 340px;
    background-image: linear-gradient(180deg, rgba(27, 24, 22, var(--hm-tint-1)) 0px, rgba(27, 24, 22, var(--hm-tint-2)) 120px, rgba(27, 24, 22, 0.86) 260px, var(--hm-paper) 340px), var(--hm-scene);
    background-position: center top, var(--hm-scene-pos);
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
html.hm .page-main.home-page .page-content::before { display: none; }
/* the scene per page: only the hi-res set (PB, 2026-10-03: the old screenshots "look terribly low
   fi"): burnt forest by default, the moonlit city on the articles, the storm city on the docs and
   server lists, the cabin camp on the company pages, the horde on the selling pages, the fight on
   the guides. Each file is the 2560x600 strip the band shows (the horde and fight lost the carousel
   arrows baked into the screenshots). */
html.hm .page-content:has(.about-page-wrapper), html.hm .page-content:has(.contact-page-wrapper),
html.hm .page-content:has(#affiliate-content-wrapper), html.hm .page-content:has(.partners-page-wrapper) { --hm-scene: url("/static/img/cdn/scene-cabin-camp.webp"); --hm-scene-pos: center 50%; }
html.hm .page-content:has(.how-it-works-page-wrapper), html.hm .page-content:has(main.mp-page), html.hm .page-content:has(#buy-content-wrapper) { --hm-scene: url("/static/img/cdn/scene-horde.webp"); --hm-scene-pos: center 50%; }
html.hm .page-content:has(.guide-page-wrapper), html.hm .page-content:has(main.ds-page), html.hm .page-content:has(main.hs-page), html.hm .page-content:has(main.lx-page),
html.hm .page-content:has(main.sr-page), html.hm .page-content:has(main.sc-page), html.hm .page-content:has(.rent-page), html.hm .page-content:has(main.vs-page),
html.hm .page-content:has(.bh-page), html.hm .page-content:has(main.ch-page), html.hm .page-content:has(main.mh-page) { --hm-scene: url("/static/img/cdn/scene-fight.webp"); --hm-scene-pos: center 50%; --hm-tint-1: 0.66; --hm-tint-2: 0.64; }
html.hm .page-content:has(#cms-content-wrapper), html.hm .page-content:has(.content-block) { --hm-scene: url("/static/img/cdn/scene-moon-city.webp"); --hm-scene-pos: center top; }
html.hm .page-content:has(#add-server), html.hm .page-content:has(> section.py-5.bg-light) { --hm-scene: url("/static/img/cdn/scene-storm-city.webp"); --hm-scene-pos: center 85%; --hm-tint-1: 0.20; --hm-tint-2: 0.30; }
/* the pages' own textures and hero backgrounds step aside */
html.hm .about-page-wrapper::before, html.hm .contact-page-wrapper::before, html.hm .how-it-works-page-wrapper::before,
html.hm #signin-content-wrapper::before, html.hm #signup-content-wrapper::before, html.hm .guide-page-wrapper::before,
html.hm .compare-plans-page-wrapper::before, html.hm .faq-page-wrapper::before, html.hm #cms-content-wrapper::before,
html.hm #affiliate-content-wrapper::before, html.hm #buy-content-wrapper::before, html.hm .bh-page::before, html.hm .geo-bg::before,
html.hm .contact-hero::after { display: none; }
html.hm .page-content > section.py-5.bg-light.border-bottom { background: transparent !important; border-bottom-color: var(--hm-line) !important; }
/* the gaps between the nav and the first element stay closed, so the title sits at the same
   height on every page */
html.hm .page-content > br, html.hm .page-content > .container > br:first-child, html.hm #buy-content-wrapper > br:first-child { display: none; }
html.hm .about-page-wrapper, html.hm .how-it-works-page-wrapper, html.hm .compare-plans-page-wrapper, html.hm .faq-page-wrapper,
html.hm .guide-page-wrapper, html.hm .contact-page-wrapper, html.hm #buy-content-wrapper, html.hm .page-content > .container.mt-4, html.hm .geo-bg.mt-4 { margin-top: 0 !important; padding-top: 0 !important; }
html.hm main.ds-page, html.hm main.hs-page, html.hm main.lx-page, html.hm main.sr-page, html.hm main.sc-page, html.hm main.mp-page,
html.hm .bh-page, html.hm .content-block { padding-top: 0 !important; }
/* the title blocks: the same padding on the scene everywhere */
html.hm .page-content header.page-header, html.hm header.about-header-main,
html.hm header.ds-hero, html.hm header.hs-hero, html.hm header.lx-hero, html.hm header.sr-hero, html.hm header.sc-hero, html.hm header.mp-hero,
html.hm .guide-hero, html.hm .plan-comparison-container .card-header.bg-transparent {
    padding: 44px 0 30px !important;
    margin: 0 0 24px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html.hm section > header.page-header { padding: 0 0 12px !important; margin: 0 0 16px !important; }
html.hm section > header.page-header h2 { font-size: 26px !important; font-weight: 700 !important; color: var(--hm-text) !important; }
/* the three boxed heroes sit on the scene as translucent panels */
html.hm .geo-hero, html.hm .bh-hero, html.hm .contact-hero {
    background: rgba(27, 24, 22, 0.56) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--hm-radius) !important;
    box-shadow: var(--hm-shadow-lift) !important;
    padding: 40px !important;
    margin: 28px 0 28px !important;
    backdrop-filter: blur(2px);
}
html.hm .geo-hero::before, html.hm .bh-hero::before, html.hm .contact-hero::before { display: none; }
/* the title typography on the scene */
html.hm .page-content header.page-header h1, html.hm header.about-header-main h1, html.hm .plan-comparison-container .card-header.bg-transparent h1,
html.hm .guide-hero h1, html.hm .geo-hero h1, html.hm .bh-hero h1, html.hm .contact-hero h1,
html.hm header.ds-hero h1, html.hm header.hs-hero h1, html.hm header.lx-hero h1, html.hm header.sr-hero h1, html.hm header.sc-hero h1, html.hm header.mp-hero h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 2px 18px rgba(0, 0, 0, 0.55);
}
html.hm .page-content header.page-header h1, html.hm header.about-header-main { text-align: center; }
html.hm .guide-hero .lead, html.hm .geo-hero .lead, html.hm .bh-hero .lead, html.hm .contact-hero .lead,
html.hm header.ds-hero .lead, html.hm header.hs-hero .lead, html.hm header.lx-hero .lead, html.hm header.sr-hero .lead, html.hm header.sc-hero .lead, html.hm header.mp-hero .lead,
html.hm .guide-hero p, html.hm .geo-hero p, html.hm .bh-hero p, html.hm .how-it-works-page-wrapper > .container > p { color: #efeae3 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); margin-top: 12px; }
html.hm .guide-meta, html.hm .guide-meta span, html.hm .bh-meta, html.hm [class*="-hero"] [class*="-meta"] { color: #efeae3 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
html.hm .guide-meta { margin-top: 16px; }
/* the homepage hero keeps its own layout (home-ui.css); its header matched the title rules above */
html.hm .page-main.home-page header.page-header { padding: 56px 0 24px !important; margin: 0 auto !important; max-width: 860px; }
html.hm .page-main.home-page header.page-header h1 { font-size: 46px !important; line-height: 1.12 !important; font-weight: 800 !important; margin-bottom: 14px !important; }
@media (max-width: 767px) {
    html.hm .page-content::before { height: 250px; background-image: linear-gradient(180deg, rgba(27, 24, 22, var(--hm-tint-1)) 0px, rgba(27, 24, 22, var(--hm-tint-2)) 90px, rgba(27, 24, 22, 0.86) 190px, var(--hm-paper) 250px), var(--hm-scene); }
    html.hm .page-main.home-page header.page-header { padding-top: 28px !important; }
    html.hm .page-main.home-page header.page-header h1 { font-size: 32px !important; }
    html.hm .geo-hero, html.hm .bh-hero, html.hm .contact-hero { padding: 24px 18px !important; margin: 16px 0 24px !important; }
}

/* ---- the sidebar on public pages for a signed-in visitor (base.html shows it on every page when
   signed in; panel pages style it through panel-ui.css, public pages had the theme's white one
   with light-red links, 2026-10-03) ---- */
html.hm nav.side-navbar { background: #141110; color: var(--hm-muted); border-right: 1px solid var(--hm-line); box-shadow: none; }
html.hm nav.side-navbar .sidebar-header { padding: 26px 16px 18px; }
html.hm nav.side-navbar .avatar { width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: 8px; background: var(--hm-card); }
html.hm nav.side-navbar .avatar img { width: 48px; height: 48px; object-fit: cover; font-size: 0; color: transparent; }
html.hm nav.side-navbar .title { margin-left: 12px; min-width: 0; }
html.hm nav.side-navbar .title h1 { font-size: 15px !important; font-weight: 600 !important; color: var(--hm-text) !important; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: none; }
html.hm nav.side-navbar .title p { font-size: 12.5px; font-weight: 400; color: var(--hm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.hm nav.side-navbar span.heading { color: var(--hm-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
html.hm nav.side-navbar ul li a { color: var(--hm-muted); font-size: 14px; font-weight: 400; border-left: 3px solid transparent; }
html.hm nav.side-navbar ul li a i { color: var(--hm-faint); }
html.hm nav.side-navbar ul li a:hover, html.hm nav.side-navbar a[aria-expanded="true"] { background: var(--hm-raise); border-left-color: transparent; color: #fff; }
html.hm nav.side-navbar ul li a:hover i { color: var(--hm-link); }
html.hm nav.side-navbar ul li li a { background: transparent; }
html.hm nav.side-navbar ul li.active > a { background: var(--hm-red-soft); border-left-color: var(--hm-red); color: #fff; }
html.hm nav.side-navbar .text-primary { color: var(--hm-link) !important; }

/* ---- one typeface (2026-10-03 scan): about, contact, how-it-works, compare plans and the FAQ set
   Inter on their wrappers (loaded from a CDN, link removed), two CMS pages set Segoe UI / Arial
   inline. Albert Sans everywhere; code keeps its monospace. ---- */
html.hm .compare-plans-page-wrapper, html.hm .faq-page-wrapper, html.hm .about-page-wrapper, html.hm .contact-page-wrapper, html.hm .how-it-works-page-wrapper,
html.hm .compare-plans-page-wrapper *, html.hm .faq-page-wrapper *, html.hm .about-page-wrapper *, html.hm .contact-page-wrapper *, html.hm .how-it-works-page-wrapper *,
html.hm .page-content [style*="font-family"] { font-family: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
html.hm .page-content code, html.hm .page-content pre, html.hm .page-content pre *, html.hm .page-content kbd, html.hm .page-content samp { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important; }
html.hm .page-content i.fa, html.hm .page-content i.fas, html.hm .page-content i.far, html.hm .page-content .fa, html.hm .page-content .fas, html.hm .page-content .far { font-family: "Font Awesome 5 Free" !important; }
html.hm .page-content i.fab, html.hm .page-content .fab { font-family: "Font Awesome 5 Brands" !important; }

/* ---- the full-site scan (2026-10-03): classes of problems, fixed once ---- */
/* 1. inline light surfaces (CMS pages and a few templates write them in style attributes): the card */
html.hm .page-content [style*="background:#f"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#ee"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#ef"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#ed"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#ec"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#eb"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#ea"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#e9"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#e6"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#df"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#de"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#dd"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:#dc"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:white"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:rgb(255"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:rgb(24"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background:rgb(25"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #f"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #ee"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #ef"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #ed"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #ec"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #eb"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #ea"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #e9"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #e6"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #df"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #de"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #dd"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: #dc"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: white"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: rgb(255"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: rgb(24"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background: rgb(25"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#f"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#ee"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#ef"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#ed"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#ec"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#eb"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#ea"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#e9"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#e6"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#df"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#de"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#dd"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:#dc"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:white"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:rgb(255"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:rgb(24"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color:rgb(25"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #f"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #ee"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #ef"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #ed"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #ec"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #eb"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #ea"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #e9"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #e6"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #df"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #de"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #dd"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: #dc"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: white"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: rgb(255"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: rgb(24"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="background-color: rgb(25"]:not(a):not(img):not(.btn),
html.hm .page-content [style*="linear-gradient(145deg,#f"],
html.hm .page-content [style*="linear-gradient(135deg,#f"],
html.hm .page-content [style*="linear-gradient(180deg,#f"],
html.hm .page-content [style*="linear-gradient(90deg,#f"],
html.hm .page-content [style*="linear-gradient(145deg, #f"],
html.hm .page-content [style*="linear-gradient(135deg, #f"],
html.hm .page-content [style*="linear-gradient(180deg, #f"] {
    background: var(--hm-card) !important;
    border-color: var(--hm-line) !important;
    color: var(--hm-text) !important;
}
/* 2. inline dark text on the dark page */
html.hm .page-content [style*="color:#0"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color:#1"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color:#2"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color:#3"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color:#4"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color:#5"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color:#6"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color: #0"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color: #1"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color: #2"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color: #3"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color: #4"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color: #5"]:not(a[style*="background:#fff"]):not(.btn),
html.hm .page-content [style*="color: #6"]:not(a[style*="background:#fff"]):not(.btn) { color: var(--hm-text) !important; }
/* 3. inline navy and blue gradient panels: the warm dark panel */
html.hm .page-content [style*="linear-gradient(135deg,#0"],
html.hm .page-content [style*="linear-gradient(135deg,#1"],
html.hm .page-content [style*="linear-gradient(135deg, #0"],
html.hm .page-content [style*="linear-gradient(135deg, #1"],
html.hm .page-content [style*="linear-gradient(145deg,#0"],
html.hm .page-content [style*="linear-gradient(145deg,#1"],
html.hm .page-content [style*="linear-gradient(120deg,#0"],
html.hm .page-content [style*="linear-gradient(120deg,#1"],
html.hm .page-content [style*="background:#0f"]:not(a),
html.hm .page-content [style*="background:#0b"]:not(a),
html.hm .page-content [style*="background:#0d"]:not(a),
html.hm .page-content [style*="background:#10"]:not(a),
html.hm .page-content [style*="background:#11"]:not(a),
html.hm .page-content [style*="background:#12"]:not(a),
html.hm .page-content [style*="background:#13"]:not(a),
html.hm .page-content [style*="background:#14"]:not(a),
html.hm .page-content [style*="background:#15"]:not(a),
html.hm .page-content [style*="background:#16"]:not(a),
html.hm .page-content [style*="background:#17"]:not(a),
html.hm .page-content [style*="background:#18"]:not(a),
html.hm .page-content [style*="background:#19"]:not(a),
html.hm .page-content [style*="background:#1a"]:not(a) {
    background: linear-gradient(135deg, #2b2523 0%, #1b1816 100%) !important;
    border: 1px solid var(--hm-line-strong) !important;
    color: var(--hm-text) !important;
}
/* 4. inline accent borders and colours: blue becomes the site red, amber notes keep amber */
html.hm .page-content [style*="solid #1976d2"], html.hm .page-content [style*="solid #1565c0"], html.hm .page-content [style*="solid #2563eb"], html.hm .page-content [style*="solid #3b82f6"] { border-left-color: var(--hm-red) !important; }
html.hm .page-content [style*="background:#fff3de"], html.hm .page-content [style*="background:#fff8e7"], html.hm .page-content [style*="background:#fff5e8"], html.hm .page-content [style*="background:#fff0d8"], html.hm .page-content [style*="background:#fff8ef"] { background: var(--hm-warn-bg) !important; color: var(--hm-warn-text) !important; }
html.hm .page-content [style*="background:#f2fbf4"] { background: var(--hm-ok-bg) !important; color: var(--hm-ok-text) !important; }
html.hm .page-content [style*="color:#1565c0"], html.hm .page-content [style*="color:#1976d2"], html.hm .page-content [style*="color:#2563eb"], html.hm .page-content [style*="color:#0b5ed7"], html.hm .page-content [style*="color: #1565c0"] { color: var(--hm-link) !important; }
html.hm .page-content [style*="color:#7b4900"], html.hm .page-content [style*="color:#6f4500"], html.hm .page-content [style*="color:#5b3a12"] { color: var(--hm-warn-text) !important; }
/* 5. CMS pages: the content's own h1 is the page title; the template's small slug title goes */
html.hm #cms-content-wrapper .inner:has(h1) > header.page-header { display: none !important; }
html.hm #cms-content-wrapper .inner > br { display: none; }
html.hm #cms-content-wrapper header.page-header h2 { font-size: clamp(1.7rem, 3vw, 2.2rem) !important; font-weight: 700 !important; color: #fff !important; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 2px 18px rgba(0, 0, 0, 0.55); }
html.hm .modlauncher-affiliate-wrap, html.hm p.modlauncher-affiliate-wrap { background: var(--hm-card) !important; border: 1px solid var(--hm-line) !important; box-shadow: var(--hm-shadow) !important; }
/* 6. one page-title size: every page's h1 (the homepage hero keeps its own) */
html.hm .page-main:not(.home-page) .page-content h1, html.hm .page-main:not(.home-page) .page-content h1.display-4, html.hm .page-main:not(.home-page) .page-content .display-4 {
    font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 2px 18px rgba(0, 0, 0, 0.55);
}
html.hm .page-content h1 span, html.hm .page-content .wlx-title span, html.hm .page-content .as-title span { color: var(--hm-link) !important; }
/* 7. the support hero was a purple fill (bg-primary): the title sits on the scene like everywhere */
html.hm .pn-support-hero, html.hm .page-content > .container-fluid.bg-primary { background: transparent !important; color: var(--hm-text) !important; padding-top: 44px !important; padding-bottom: 30px !important; }
html.hm .pn-support-hero .lead { color: #efeae3 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
/* 8. the Wasteland and Asylum landings: their own variables onto the palette */
html.hm .wlx-shell, html.hm .as-shell {
    --wlx-accent: var(--hm-red); --wlx-accent-soft: var(--hm-link); --wlx-paper: var(--hm-card); --wlx-ink: var(--hm-text); --wlx-card: var(--hm-card); --wlx-line: var(--hm-line);
    --as-accent: var(--hm-red); --as-accent-soft: var(--hm-link); --as-paper: var(--hm-card); --as-ink: var(--hm-text); --as-line: var(--hm-line);
}
html.hm .wlx-panel p, html.hm .wlx-panel li, html.hm .wlx-plan-card p, html.hm .wlx-plan-card li, html.hm .as-panel p, html.hm .as-panel li, html.hm .as-plan-card p, html.hm .as-plan-card li { color: var(--hm-muted) !important; }
html.hm .wlx-panel, html.hm .wlx-plan-card, html.hm .as-panel, html.hm .as-plan-card { border-color: var(--hm-line) !important; }
html.hm .wlx-highlight, html.hm .as-tip { background: var(--hm-red-soft) !important; border-color: rgba(232, 28, 35, 0.35) !important; color: var(--hm-text) !important; }
html.hm .wlx-plan-card strong, html.hm .as-plan-card strong { color: var(--hm-link) !important; }
html.hm .wlx-cta, html.hm .as-cta { background: linear-gradient(135deg, #2b2523 0%, #1b1816 100%) !important; border-color: var(--hm-line-strong) !important; }
html.hm .wlx-faq details, html.hm .as-faq details { border-top-color: var(--hm-line) !important; }
html.hm .wlx-btn-primary, html.hm .as-btn-primary { background: var(--hm-red) !important; border-color: var(--hm-red) !important; color: #fff !important; }
html.hm .wlx-btn-primary:hover, html.hm .as-btn-primary:hover { background: var(--hm-red-dark) !important; border-color: var(--hm-red-dark) !important; }
/* 9. the tool pages with a navy "app" look (control panel, CSMM, maps, mod matrix, self-host
   calculator): the site's warm dark instead */
html.hm .panel-page-wrapper, html.hm .csmm-page, html.hm .mm-page, html.hm .shc-page { background: transparent !important; color: var(--hm-text) !important; }
html.hm .panel-hero, html.hm .maps-hero { background: linear-gradient(135deg, #2b2523 0%, #1b1816 100%) !important; border: 1px solid var(--hm-line-strong); }
html.hm .panel-section, html.hm .maps-section, html.hm .maps-card, html.hm .csmm-card, html.hm .maps-table table { background: var(--hm-card) !important; border-color: var(--hm-line) !important; color: var(--hm-text) !important; }
html.hm .shc-col.winner { background: var(--hm-red-soft) !important; border-color: rgba(232, 28, 35, 0.4) !important; }
html.hm .shc-verdict { background: var(--hm-raise) !important; }
html.hm .shc-cta { background: linear-gradient(135deg, #b91c1c 0%, #e81c23 100%) !important; }
html.hm .mm-chip.active { background: var(--hm-red) !important; border-color: var(--hm-red) !important; }
html.hm .mm-hero .eyebrow, html.hm .mm-source, html.hm .mm-corrections a, html.hm .csmm-page a:not(.btn), html.hm .shc-page a:not(.btn), html.hm .maps-page a:not(.btn) { color: var(--hm-link) !important; }
html.hm .mm-hero p.lead, html.hm .mm-meta, html.hm .mm-corrections { color: var(--hm-muted) !important; }
/* 10. accents: one red. Bootstrap's primary/info text and the blue info and primary alerts */
html.hm .text-primary, html.hm .text-info, html.hm a.text-info, html.hm .card-title.text-primary { color: var(--hm-link) !important; }
html.hm .alert-info, html.hm .alert-primary { background: var(--hm-raise) !important; border-color: var(--hm-line-strong) !important; color: var(--hm-text) !important; }
html.hm .alert-info a, html.hm .alert-primary a { color: var(--hm-link) !important; }
html.hm .card-header.bg-primary, html.hm .card-header.bg-info, html.hm .card-header.bg-secondary { background: var(--hm-strip) !important; color: #fff !important; border-bottom: 1px solid var(--hm-line) !important; }
html.hm .card-header.bg-warning { background: var(--hm-warn-bg) !important; color: var(--hm-warn-text) !important; border-bottom: 1px solid var(--hm-warn-border) !important; }
html.hm .card-header.bg-warning h2, html.hm .card-header.bg-warning h3, html.hm .card-header.bg-warning .text-dark { color: var(--hm-warn-text) !important; }
html.hm .card-header.bg-danger { background: var(--hm-bad-bg) !important; color: var(--hm-bad-text) !important; }
html.hm .whatsin-container .self-serve-bot { background: var(--hm-card-2) !important; border-color: var(--hm-line-strong) !important; }
html.hm .whatsin-container .self-serve-bot h4 { color: #fff !important; }
html.hm .whatsin-container .self-serve-bot-points li::before, html.hm .whatsin-container .self-serve-bot-cta { color: var(--hm-link) !important; }
html.hm .bh-rank { color: var(--hm-link) !important; }
/* 11. the services page buttons (services.css: an orange-red fill) */
html.hm .cta-button, html.hm a.cta-button { background: var(--hm-red) !important; border-color: var(--hm-red) !important; color: #fff !important; box-shadow: none !important; }
html.hm .cta-button:hover { background: var(--hm-red-dark) !important; }
/* 12. one typeface everywhere in the content (whatsin.css set Arial on the order and region pages) */
html.hm .page-content :not(i):not(code):not(pre):not(kbd):not(samp):not([class*="fa-"]):not([class*="icon-"]):not(.glyphicon) { font-family: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }

/* ---- the rest of the public templates (2026-10-03 scan) ----
   Pages that set their own light or navy surfaces in a style block: the seed viewer, partners,
   maps, the cheapest/rent/vs guide family, and generic details/summary blocks. */
/* generic: collapsible FAQ blocks, prices and pills in the guide family */
html.hm .page-content details { background: var(--hm-card); border-color: var(--hm-line) !important; color: var(--hm-text); }
html.hm .page-content details summary { color: var(--hm-text); }
html.hm .page-content details p, html.hm .page-content details li { color: var(--hm-muted); }
html.hm .page-content [class*="-price"] { color: var(--hm-text); }
html.hm .page-content [class*="-disclosure"] { color: var(--hm-muted); }
/* seed viewer (seed_viewer_index.html, seed_viewer_detail.html): dark text on the page */
html.hm .sd-copy code { background: var(--hm-field) !important; color: var(--hm-gold) !important; }
html.hm .sv-page, html.hm .sd-page, html.hm .sd-hero h1, html.hm .sd-tagline, html.hm .sd-section p, html.hm .sv-card a, html.hm .sd-others-grid a, html.hm .sv-card-tag { color: var(--hm-text) !important; }
html.hm .sv-hero .lead, html.hm .sv-meta, html.hm .sv-card-num, html.hm .sd-others-grid small { color: var(--hm-muted) !important; }
html.hm .sv-card, html.hm .sd-section, html.hm .sd-others-grid a { background: var(--hm-card) !important; border-color: var(--hm-line) !important; }
html.hm .sv-card-best, html.hm .sd-howto { background: var(--hm-red-soft) !important; }
html.hm .sd-num { background: var(--hm-raise) !important; color: var(--hm-text) !important; }
/* partners.html */
html.hm .partners-card, html.hm .partners-tool-card { background: var(--hm-card) !important; border-color: var(--hm-line) !important; color: var(--hm-text); }
html.hm .partners-card h3, html.hm .partners-card h4, html.hm .partners-tool-card h3, html.hm .partners-tool-card h4 { color: #fff; }
html.hm .partners-card p, html.hm .partners-tool-card p { color: var(--hm-muted); }
html.hm .partners-page-wrapper .pill { background: var(--hm-raise); color: var(--hm-text); border: 1px solid var(--hm-line); }
html.hm .partners-cta { background: var(--hm-card) !important; border: 1px solid var(--hm-line-strong); }
/* maps.html: the navy card */
html.hm .maps-card { background: var(--hm-card) !important; border-color: var(--hm-line) !important; color: var(--hm-text) !important; }

/* ---- the scan's second pass (2026-10-03) ---- */
/* the theme writes table text #666 (style.default.css: table, .table { color: #666 }) */
html.hm .page-content table { color: var(--hm-text); }
/* CMS links with an inline colour are plain links; inline chips and the green CMS buttons */
html.hm #cms-content-wrapper a[style*="color"]:not([style*="background"]) { color: var(--hm-link) !important; }
html.hm #cms-content-wrapper a[style*="background:#e"], html.hm #cms-content-wrapper a[style*="background:#d"],
html.hm #cms-content-wrapper a[style*="background:#f"]:not([style*="color:#c44426"]) { background: var(--hm-card-2) !important; color: var(--hm-text) !important; border: 1px solid var(--hm-line-strong) !important; }
html.hm #cms-content-wrapper a[style*="background:#2"], html.hm #cms-content-wrapper a[style*="background: #2"] { background: var(--hm-red) !important; color: #fff !important; border: 0 !important; }
/* seed viewer: the other-seed links */
html.hm .sd-others-grid a strong { color: var(--hm-link) !important; }
/* the game settings reference (panel_game_settings.html): a white table on a blue page */
html.hm .settings-page { background: transparent !important; color: var(--hm-text) !important; }
html.hm .settings-table-wrap { background: var(--hm-card) !important; border: 1px solid var(--hm-line) !important; color: var(--hm-text) !important; }
html.hm .settings-table-wrap table, html.hm .settings-table-wrap td, html.hm .settings-table-wrap th { color: var(--hm-text) !important; border-color: var(--hm-line) !important; background: transparent !important; }
html.hm .settings-table-wrap thead th { background: var(--hm-strip) !important; }
/* services (services.css): the light hero box and its benefit tiles */
html.hm .services-container .hero-section, html.hm .services-container .benefit-item { background: var(--hm-card) !important; border: 1px solid var(--hm-line) !important; color: var(--hm-text) !important; box-shadow: var(--hm-shadow) !important; }
html.hm .services-container .hero-section h1, html.hm .services-container .hero-section h2, html.hm .services-container .benefit-item h3, html.hm .services-container .benefit-item h4 { color: #fff !important; }
html.hm .services-container .hero-section p, html.hm .services-container .benefit-item p { color: var(--hm-muted) !important; }
/* the affiliate hero: a blue glow */
html.hm .affiliate-hero { background: linear-gradient(135deg, #2b2523 0%, #1b1816 100%) !important; border: 1px solid var(--hm-line-strong); }

/* ==== the full-site scan, consolidated (2026-10-03: five reviews of 177 pages, fixed by class) ==== */
/* A. CMS articles (cms/view.html): the article's title leads, centred on the scene band, and the
   promo banner follows it (views_cms.title_first); a hero box or article card around the title
   steps aside so the title sits on the scene like every other page's */
html.hm #cms-content-wrapper .inner > h1:first-of-type { text-align: center; margin: 44px auto 22px !important; max-width: 980px; }
html.hm #cms-content-wrapper .inner > :is(div, section):has(h1) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html.hm #cms-content-wrapper .inner > :is(div, section):has(h1) h1 { text-align: center; margin: 44px auto 16px !important; }
html.hm #cms-content-wrapper .inner > div:has(> h1) > div[style*="display:flex"]:has(> span) { justify-content: center; }
/* the two-column heroes (Teragon, xegen) stack: text centred, then the picture */
html.hm #cms-content-wrapper .inner > div:has(h1) > div[style*="display:flex"]:has(h1) { flex-direction: column !important; align-items: center !important; text-align: center; }
html.hm #cms-content-wrapper .inner > div:has(h1) > div[style*="display:flex"]:has(h1) > div { flex: 0 0 auto !important; width: 100%; max-width: 980px; min-width: 0 !important; }
html.hm #cms-content-wrapper .inner > div:has(h1) > div[style*="display:flex"]:has(h1) div[style*="display:flex"] { justify-content: center; }
/* the banner under the title: the dark "grab your server" banner or the affiliate one, one size */
html.hm #cms-content-wrapper .cms-banner { padding: 0 !important; margin: 0 0 30px; }
html.hm #cms-content-wrapper .cms-banner p { margin: 0 auto; }
html.hm #cms-content-wrapper .cms-banner img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: var(--hm-radius); border: 1px solid var(--hm-line); }
html.hm #cms-content-wrapper .cms-banner .modlauncher-affiliate-wrap { width: 100% !important; max-width: 900px !important; padding: 12px 18px !important; border-radius: var(--hm-radius) !important; box-shadow: none !important; }
html.hm #cms-content-wrapper .cms-banner .modlauncher-affiliate-wrap img { border: 0; border-radius: 0; width: auto; max-width: 100%; max-height: 120px !important; }
/* figures: centred in the column (several mod pages have one narrow picture) */
html.hm #cms-content-wrapper .inner img.img_resp, html.hm #cms-content-wrapper .inner p > img:only-child { display: block; margin-left: auto; margin-right: auto; }
/* tile grids: one surface per tile (the pages mix navy, light-blue and cream tiles) */
html.hm #cms-content-wrapper [style*="display:grid"] > div[style*="background"] { background: var(--hm-card) !important; border: 1px solid var(--hm-line) !important; color: var(--hm-text) !important; }
/* chips: one pill */
html.hm #cms-content-wrapper span[style*="border-radius:999px"] { background: var(--hm-raise) !important; border: 1px solid var(--hm-line-strong) !important; color: var(--hm-text) !important; }
/* light-blue labels, navy buttons, the orange tool heading, light rules */
html.hm #cms-content-wrapper [style*="color:#9fc4ff"], html.hm #cms-content-wrapper [style*="color:#9fd2ff"] { color: var(--hm-muted) !important; }
html.hm #cms-content-wrapper a[style*="background:#0"], html.hm #cms-content-wrapper a[style*="background:#1"] { background: var(--hm-red) !important; color: #fff !important; border: 0 !important; }
html.hm #cms-content-wrapper [style*="color:#c44426"]:not(a) { color: #fff !important; }
html.hm .page-content [style*="solid #d"], html.hm .page-content [style*="solid #e2"], html.hm .page-content [style*="solid #e4"], html.hm .page-content [style*="solid #e6"],
html.hm .page-content [style*="solid #e8"], html.hm .page-content [style*="solid #ec"], html.hm .page-content [style*="solid #edf"], html.hm .page-content [style*="solid #f0d"],
html.hm .page-content [style*="solid #fed"] { border-color: var(--hm-line) !important; }
html.hm .page-content [style*="solid #ef6"], html.hm .page-content [style*="solid #ed8"], html.hm .page-content [style*="solid #c44"] { border-color: var(--hm-red) !important; }
/* the green promo and note callouts: a neutral note with the red rule (green stays for success) */
html.hm .page-content div[style*="solid #4caf50"] { background: var(--hm-card) !important; border-left-color: var(--hm-red) !important; color: var(--hm-text) !important; }
/* markdown tables and FAQ blocks: the site's table and a bordered row per question */
html.hm #cms-content-wrapper table:not([class]) { width: 100%; border-collapse: collapse; margin: 0 0 22px; background: var(--hm-card); border: 1px solid var(--hm-line); }
html.hm #cms-content-wrapper table:not([class]) th, html.hm #cms-content-wrapper table:not([class]) td { padding: 9px 12px !important; border: 0 !important; border-bottom: 1px solid var(--hm-line) !important; text-align: left; vertical-align: top; }
html.hm #cms-content-wrapper table:not([class]) thead th { background: var(--hm-strip); color: #fff; }
html.hm #cms-content-wrapper details { border: 1px solid var(--hm-line) !important; border-radius: var(--hm-radius-sm); padding: 12px 16px !important; margin: 0 0 10px; background: var(--hm-card) !important; }
html.hm #cms-content-wrapper details summary { cursor: pointer; font-weight: 600; color: #fff; }
html.hm #cms-content-wrapper details[open] summary { margin-bottom: 8px; }
html.hm #cms-content-wrapper details > p:last-child { margin-bottom: 0; }
html.hm #cms-content-wrapper h2 + br, html.hm #cms-content-wrapper h2 > br { display: none; }
/* the launcher tool's badges and the light-blue info */
html.hm .mlt-badge, html.hm .mlt-badge-l, html.hm .mlt-badge-p { background: var(--hm-raise) !important; color: var(--hm-text) !important; border: 1px solid var(--hm-line-strong) !important; }

/* B. one button size inside the pages (15 px type, about 44 px tall), large or not */
html.hm .page-main:not(.home-page) .page-content .btn-lg, html.hm .page-main:not(.home-page) .page-content .btn-group-lg > .btn {
    font-size: 15px !important; line-height: 1.4 !important; padding: 10px 22px !important; border-radius: var(--hm-radius-sm) !important;
}
/* a white button on a red block keeps a dark-red label (links inside these blocks read light red) */
html.hm .shc-cta a, html.hm .sd-cta .btn, html.hm .vs-cta .btn, html.hm .page-content [class*="-cta-top"] a.btn, html.hm .page-content [class*="-cta-bottom"] a.btn {
    background: #fff !important; color: var(--hm-red-dark) !important; border: 0 !important;
}

/* C. headings are white; a red word is for links and accents only */
html.hm .page-content :is(h1, h2, h3, h4, h5, h6).text-primary, html.hm .page-content :is(h1, h2, h3, h4, h5, h6) .text-primary,
html.hm .whatsin-container .undecided-text, html.hm .whatsin-container .undecided-text strong,
html.hm .hs-step h3, html.hm .mp-pack h3, html.hm .rent-step h3, html.hm .sd-section h2, html.hm .sr-feature h3, html.hm .sv-card-title,
html.hm .why-choose-us-content h3, html.hm .shc-verdict strong { color: #fff !important; }
html.hm .page-content h1 a { color: inherit !important; text-decoration: none; }

/* D. the page palettes (each template's own style block): orange-red, blue and slate accents onto
   the site red, light surfaces onto the card. Curated from a scan of every public template's
   style block; buttons, heroes and page wrappers are handled by their own rules. */
html.hm .bh-card .bh-price, html.hm .ch-price, html.hm .vs-price, html.hm .ds-plan .price, html.hm .rent-plan .price, html.hm .sc-plan .price { color: #fff !important; }
html.hm .bh-disclosure, html.hm .ch-disclosure, html.hm .vs-disclosure, html.hm .bh-reviews .bh-rev-meta, html.hm .ds-reviews .ds-rev-meta { color: var(--hm-muted) !important; }
html.hm .bh-faq dd, html.hm .ch-faq dd, html.hm .ds-faq dd, html.hm .hs-faq dd, html.hm .lx-faq dd, html.hm .mp-faq dd, html.hm .sc-faq dd, html.hm .sr-faq dd, html.hm .vs-faq dd, html.hm .rent-faq p,
html.hm .bh-rev blockquote, html.hm .ch-rev blockquote, html.hm .ds-rev blockquote, html.hm .hs-rev blockquote, html.hm .lx-rev blockquote, html.hm .sc-rev blockquote, html.hm .sr-rev blockquote,
html.hm .ds-hero .lead, html.hm .hs-hero .lead, html.hm .lx-hero .lead, html.hm .mp-hero .lead, html.hm .rent-hero .lead, html.hm .sc-hero .lead, html.hm .sr-hero .lead, html.hm .sv-hero .lead, html.hm .vs-hero .lead,
html.hm .geo-feature span, html.hm .geo-feature strong, html.hm .geo-regions strong, html.hm .geo-section > p, html.hm .geo-section h2, html.hm .geo-section h3,
html.hm .guide-section li, html.hm .guide-section p, html.hm .help-faq-a, html.hm .help-faq-q, html.hm .help-tile,
html.hm .control-panel-section h2, html.hm .control-panel-section p, html.hm .hosting-locations-section h2, html.hm .location-item span, html.hm .location-item strong,
html.hm .mlt-headline h3, html.hm .mlt-notes, html.hm .mlt-section h4, html.hm .mlt-section ol, html.hm .mlt-value, html.hm .mod-pack-title,
html.hm .partners-checklist li, html.hm .section-title p, html.hm .service-intro h2, html.hm .service-intro p,
html.hm .services-container + .container.my-5 .lead, html.hm .services-container + .container.my-5 h2, html.hm .services-container + .container.my-5 p,
html.hm .why-choose-us .text-center p[style], html.hm .why-choose-us .text-center.lead, html.hm .why-choose-us h2, html.hm .why-choose-us-content p,
html.hm .whatsin-container .intro-text, html.hm .whatsin-container .plans-label, html.hm .whatsin-container .whatsin-item-body, html.hm .whatsin-container h3,
html.hm .whatsin-container .self-serve-bot p, html.hm .whatsin-container .self-serve-bot-points li, html.hm .contact-form-wrapper label { color: var(--hm-text) !important; }
html.hm .bh-rank, html.hm .ch-rank, html.hm .vs-rank, html.hm .bh-card .bh-bad, html.hm .ch-bad, html.hm .vs-bad, html.hm .ds-table td.cross, html.hm .mp-table td.cross,
html.hm .ds-plan a, html.hm .rent-plan a, html.hm .sc-plan a, html.hm .mp-pack a.cta, html.hm .geo-regions a, html.hm .tip-list a, html.hm .shc-method a, html.hm .sd-back,
html.hm .ds-reviews .ds-rev-meta a, html.hm .bh-reviews .bh-rev-meta a, html.hm .plan-hero .trust-chip a, html.hm .panel-feature-card small, html.hm .accent-pill,
html.hm .feature-icon, html.hm .benefit-item i, html.hm .location-item i, html.hm .maps-bullets i, html.hm .panel-hero .hero-bullets i,
html.hm .bh-rev .stars, html.hm .ch-rev .stars, html.hm .ds-rev .stars, html.hm .hs-rev .stars, html.hm .lx-rev .stars, html.hm .sc-rev .stars, html.hm .sr-rev .stars, html.hm .trustpilot-stars,
html.hm .sv-card-best, html.hm .channel-icon.discord, html.hm .mp-pack .badge, html.hm .whatsin-container .whatsin-list li .seven-days-highlight, html.hm .whatsin-container .whatsin-list li strong { color: var(--hm-link) !important; }
html.hm .bh-card, html.hm .ch-card, html.hm .vs-card, html.hm .bh-rev, html.hm .ch-rev, html.hm .ds-rev, html.hm .hs-rev, html.hm .lx-rev, html.hm .sc-rev, html.hm .sr-rev,
html.hm .bh-toc, html.hm .hs-toc, html.hm .ds-tldr, html.hm .lx-tldr, html.hm .rent-tldr, html.hm .sc-tldr, html.hm .sr-tldr, html.hm .vs-tldr,
html.hm .hs-callout, html.hm .lx-callout, html.hm .rent-callout, html.hm .sc-callout, html.hm .bh-disclosure, html.hm .ch-disclosure, html.hm .vs-disclosure,
html.hm .ds-decision .card, html.hm .hs-step, html.hm .rent-step, html.hm .rent-faq details, html.hm .mp-pack, html.hm .sr-feature, html.hm .sd-section, html.hm .sv-card,
html.hm .bh-table th, html.hm .ch-table th, html.hm .ds-table th, html.hm .hs-table th, html.hm .lx-table th, html.hm .mp-table th, html.hm .rent-table th, html.hm .sc-table th, html.hm .sr-table th, html.hm .vs-table th,
html.hm .geo-feature, html.hm .geo-regions, html.hm .guide-section, html.hm .help-tile, html.hm .control-panel-section, html.hm .hosting-locations-section, html.hm .location-item,
html.hm .why-choose-us, html.hm .services-container + .container.my-5, html.hm .features-section, html.hm .final-cta, html.hm .mission-statement, html.hm .promo-offers,
html.hm .contact-content-section, html.hm .contact-details-section, html.hm .additional-contact-info, html.hm .channel-list li, html.hm .metric-chip, html.hm .support-chip,
html.hm .mlt-card, html.hm .mlt-item, html.hm .mlt-notes, html.hm .trustpilot-badge, html.hm .trustpilot-quote, html.hm .video-thumb-link, html.hm .tip-list li,
html.hm .pricing-table tr:nth-child(even), html.hm .whatsin-container .whatsin-item, html.hm .whatsin-container .self-serve-bot, html.hm .whatsin-container .plans-navigation a,
html.hm .channel-icon.discord, html.hm .mp-pack .badge { background: var(--hm-card) !important; color: var(--hm-text); }
html.hm .about-logo-stripe, html.hm .best-practices, html.hm .doc-cta, html.hm .doc-video-card, html.hm .ftip .ftip__b, html.hm .guide-toc, html.hm .hs-step .time, html.hm .hs-step pre,
html.hm .maps-section, html.hm .maps-table table, html.hm .modern-table thead th, html.hm .pricing-table th, html.hm .quick-tasks-shell, html.hm .settings-card,
html.hm .settings-table thead th, html.hm .video-container, html.hm .video-play-icon, html.hm .as-stat, html.hm .wlx-stat { background: var(--hm-card-2) !important; }
html.hm .hs-step .time { color: var(--hm-text) !important; border: 1px solid var(--hm-line-strong); }
html.hm .bh-tag, html.hm .ch-tag, html.hm .vs-tag, html.hm .rent-step .step-num, html.hm .sd-copy button, html.hm .whatsin-container .plans-navigation a.active { background: var(--hm-red) !important; color: #fff !important; border-color: var(--hm-red) !important; }
html.hm .sd-copy button { padding: 9px 16px !important; font-size: 14px !important; border-radius: var(--hm-radius-sm) !important; }
html.hm .sd-copy code { background: var(--hm-field) !important; color: var(--hm-text) !important; border: 1px solid var(--hm-line); }
html.hm .bh-card.bh-recommended, html.hm .ch-card.recommended, html.hm .vs-card.recommended, html.hm .ds-plan.recommended, html.hm .rent-plan.recommended, html.hm .sc-plan.recommended,
html.hm .shc-col.winner, html.hm .whatsin-container .plans-navigation a.active { border-color: var(--hm-red) !important; }
html.hm .bh-toc, html.hm .hs-toc, html.hm .ds-tldr, html.hm .lx-tldr, html.hm .rent-tldr, html.hm .sc-tldr, html.hm .sr-tldr, html.hm .vs-tldr,
html.hm .hs-callout, html.hm .lx-callout, html.hm .rent-callout, html.hm .sc-callout, html.hm .bh-disclosure, html.hm .ch-disclosure, html.hm .geo-feature, html.hm .mlt-notes,
html.hm .bh-card, html.hm .ch-card, html.hm .vs-card, html.hm .bh-rev, html.hm .ch-rev, html.hm .ds-rev, html.hm .hs-rev, html.hm .lx-rev, html.hm .sc-rev, html.hm .sr-rev, html.hm .sr-feature,
html.hm .ds-plan, html.hm .rent-plan, html.hm .sc-plan, html.hm .mp-pack, html.hm .rent-step, html.hm .hs-step, html.hm .sd-section, html.hm .sv-card, html.hm .help-card, html.hm .help-faq, html.hm .help-tile,
html.hm .bh-table td, html.hm .ch-table td, html.hm .ds-table td, html.hm .hs-table td, html.hm .lx-table td, html.hm .mp-table td, html.hm .rent-table td, html.hm .sc-table td, html.hm .sr-table td, html.hm .vs-table td,
html.hm .bh-table th, html.hm .ch-table th, html.hm .ds-table th, html.hm .hs-table th, html.hm .lx-table th, html.hm .mp-table th, html.hm .rent-table th, html.hm .sc-table th, html.hm .sr-table th, html.hm .vs-table th,
html.hm .pricing-table td, html.hm .settings-filter, html.hm .sticky-cta, html.hm .trustpilot-quote, html.hm .mlt-card, html.hm .mlt-item, html.hm .mlt-headline { border-color: var(--hm-line) !important; }
html.hm .bh-card.bh-recommended, html.hm .ch-card.recommended, html.hm .vs-card.recommended, html.hm .ds-plan.recommended, html.hm .rent-plan.recommended, html.hm .sc-plan.recommended { border-color: var(--hm-red) !important; }
html.hm .mm-pill.client { background: var(--hm-raise) !important; color: var(--hm-text) !important; border-color: var(--hm-line-strong) !important; }
html.hm .mp-pack .badge { border: 1px solid var(--hm-line-strong); }
/* the sticky plan bar on the order pages (phone): opaque, so the page under it does not show through */
html.hm .sticky-cta { background: #211c1a !important; }

/* E. links inside running text flow as text: the theme bundle (pig-*.css) makes every a, i and span
   an inline-block, so on a phone a long link inside a sentence broke out as a block of its own and
   left half-empty lines and stray full stops */
html.hm .page-content :is(p, li, td, dd, blockquote, figcaption, b, strong, em) > a:not(.btn):not([class*="btn"]):not([style*="padding"]),
html.hm .page-content div[style*="border-left"] > a:not(.btn):not([style*="padding"]) { display: inline; }
/* the TL;DR boxes make their label a block (strong); a bold phrase inside a sentence stays inline */
html.hm :is(.vs-tldr, .ds-tldr, .sc-tldr, .sr-tldr, .lx-tldr, .rent-tldr, .bh-toc) li strong { display: inline; margin: 0; }

/* F. page-wide textures: the old photo texture several templates paint behind their whole wrapper
   steps aside (the scene band under the nav is the page's one photo); the landing shells drop
   their own full-height shade, which left darker strips down both screen edges */
html.hm .mh-page::before, html.hm .ch-page::before, html.hm .wa-bg::before, html.hm .page-wrapper::before,
html.hm .product-page-wrapper::before, html.hm .passwd-reset-page-wrapper::before, html.hm .partners-page-wrapper::before { display: none !important; }
html.hm .wlx-shell, html.hm .as-shell { background: transparent !important; }

/* G. one content column: nothing on a page runs wider than 1200 px (several templates put their
   content straight into the full-width page: the order forms, promotions, help, links, manual) */
html.hm .page-main:not(.home-page) .page-content > :not(.container):not(script):not(style):not(link):not(.sticky-cta):not(.shot-zoom) {
    max-width: 1200px; margin-left: auto !important; margin-right: auto !important;
}

/* H. hero boxes: every title sits straight on the scene band; one-column heroes are centred
   (eyebrow, title, lead and buttons), two-column heroes keep their text beside the side card */
html.hm .geo-hero, html.hm .bh-hero, html.hm .contact-hero, html.hm .ch-hero, html.hm .affiliate-hero, html.hm .maps-hero, html.hm .panel-hero,
html.hm .wa-hero, html.hm .partners-hero, html.hm .mh-hero, html.hm .page-content .card-header.d-flex.align-items-center:has(> h1), html.hm .page-content > section.py-5.bg-light {
    background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
html.hm .geo-hero, html.hm .bh-hero, html.hm .contact-hero, html.hm .ch-hero, html.hm .mh-hero { padding: 44px 0 30px !important; margin: 0 0 24px !important; }
html.hm .page-content .card-header.d-flex.align-items-center:has(> h1) { justify-content: center; padding: 44px 0 30px !important; }
html.hm header.bh-hero, html.hm header.ch-hero, html.hm header.ds-hero, html.hm header.hs-hero, html.hm header.lx-hero, html.hm header.mp-hero, html.hm header.rent-hero,
html.hm header.sc-hero, html.hm header.sr-hero, html.hm header.sd-hero, html.hm header.sv-hero, html.hm header.vs-hero, html.hm .mh-hero,
html.hm .mm-hero, html.hm .shc-hero, html.hm .guide-hero, html.hm .page-content .col-lg-10.mx-auto > h1:first-child, html.hm .page-content .col-lg-10.mx-auto > h1:first-child + p, html.hm .settings-hero:not(:has(.col-lg-4)), html.hm .csmm-hero:not(:has(.col-lg-4)) {
    text-align: center !important;
}
html.hm :is(header.bh-hero, header.ch-hero, header.ds-hero, header.hs-hero, header.lx-hero, header.mp-hero, header.rent-hero, header.sc-hero, header.sr-hero, header.sd-hero, header.sv-hero, header.vs-hero, .mh-hero, .mm-hero, .shc-hero, .guide-hero) :is(p, .lead) {
    margin-left: auto !important; margin-right: auto !important; max-width: 820px;
}
html.hm :is(header.bh-hero, header.ch-hero, header.ds-hero, header.hs-hero, header.lx-hero, header.mp-hero, header.rent-hero, header.sc-hero, header.sr-hero, header.sd-hero, header.sv-hero, header.vs-hero, .mh-hero, .mm-hero, .shc-hero, .guide-hero) :is([class*="meta"], [class*="actions"], [class*="buttons"], [class*="cta"], .d-flex) {
    justify-content: center !important;
}
/* the title that sat low under an empty band (CSMM, the settings reference) moves up */
html.hm .csmm-hero, html.hm .settings-hero, html.hm .mm-hero, html.hm .shc-hero { padding-top: 44px !important; }
/* help: the title and its subtitle were one inline row at the left edge */
html.hm .page-content header.page-header > .container-fluid.d-flex { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
/* the reviews page: title, eyebrow and its button centred on the band */
html.hm .page-content > section.py-5.bg-light .d-flex.flex-wrap { flex-direction: column; align-items: center; text-align: center; gap: 12px; }

/* I. lists whose rows were flex (an icon, then text with a link): the text runs as one line of
   text again and the icon hangs to its left */
html.hm :is(.hero-contact-list, .hero-bullets, .maps-bullets) > li { display: block !important; position: relative; padding-left: 30px !important; }
html.hm :is(.hero-contact-list, .hero-bullets, .maps-bullets) > li > i:first-child { position: absolute; left: 2px; top: 0.3em; width: 18px; margin: 0 !important; text-align: center; }
html.hm .tip-list > li { display: block !important; position: relative; padding-left: 40px !important; }
html.hm .tip-list > li > i:first-child { position: absolute; left: 13px; top: 13px; width: 18px; margin: 0 !important; text-align: center; }

@media (max-width: 767px) {
    /* J. phone: one 16 px gutter on every page (several heroes and page headers ran edge to edge) */
    html.hm .page-main:not(.home-page) .page-content { padding-left: 16px !important; padding-right: 16px !important; }
    html.hm .page-main:not(.home-page) .page-content > .container, html.hm .page-main:not(.home-page) .page-content > * > .container,
    html.hm .page-main:not(.home-page) .page-content > .container-fluid, html.hm .page-main:not(.home-page) .page-content header.page-header > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
    /* a table wider than the phone scrolls inside its own box (the ones without a scroll wrapper were cut off) */
    html.hm .page-content table:not(.table-responsive table):not([class*="table-responsive"]) { display: block; max-width: 100%; overflow-x: auto; }
    /* the order page's two pay buttons stack, full width */
    html.hm #pay-options .row:has(.btn) > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    html.hm #pay-options .row:has(.btn) > [class*="col-"] + [class*="col-"] { margin-top: 10px; }
    html.hm #pay-options .btn { width: 100%; min-width: 0; white-space: normal; }
    /* the plan stepper keeps S M L XL on one line */
    html.hm .whatsin-container .plans-navigation { flex-wrap: nowrap !important; justify-content: center; }
    html.hm .whatsin-container .plans-navigation .plan-separator { margin: 0 4px !important; }
    html.hm .whatsin-container .plans-label { margin-right: 6px !important; }
    html.hm .whatsin-container .plans-navigation a { padding-left: 11px !important; padding-right: 11px !important; }
}

/* K. the affiliate page (PB, 2026-10-03: the banner "low quality and stretched", "too much vertical
   spacing"): the theme bundle pads every section by 50 px on top of each section's own 48 px
   margin (148 px between blocks); the hero stacks a boxed tagline, a blue line and a squashed
   612x408 logo forced into 420x120. One rhythm, the logo at its own aspect from our origin. */
html.hm .affiliate-hero { padding-top: 44px !important; padding-bottom: 0 !important; }
html.hm .affiliate-hero .lead { margin-bottom: 22px !important; }
html.hm .affiliate-hero .glass-card { display: block !important; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; margin: 22px 0 0 !important; }
html.hm .affiliate-hero .glass-card small { color: var(--hm-muted) !important; letter-spacing: 0.08em; }
html.hm .affiliate-hero p[style*="color: #cbd5f5"] { color: var(--hm-muted) !important; margin-top: 6px !important; }
html.hm .affiliate-hero p[style*="color: #cbd5f5"] a { color: var(--hm-link) !important; }
html.hm .affiliate-hero .affiliate-banner { width: auto !important; height: auto !important; max-width: min(100%, 300px) !important; max-height: none !important; margin: 28px auto 0 !important; filter: none !important; }
html.hm #affiliate-content-wrapper { margin-top: 56px !important; }
html.hm #affiliate-content-wrapper > section { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 64px !important; }
html.hm #affiliate-content-wrapper > section.how-it-works { padding: 32px 24px !important; }
html.hm #affiliate-content-wrapper > section h2.mb-5 { margin-bottom: 24px !important; }
html.hm #affiliate-content-wrapper > .text-center.mt-5 { margin-top: 0 !important; }

/* L. the about page's game cards: every card a 4:5 picture from our origin (four showed the 7D2D
   logo as a placeholder); the arrows sit beside the dots under the cards, not on the first and last
   card; card text left-aligned (justified text opened wide gaps); two cards a row on a phone */
html.hm .promo-carousel { margin-bottom: 30px; }
html.hm .promo-carousel .promo-card img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--hm-radius-sm) !important; }
html.hm .promo-carousel .promo-card p, html.hm .promo-carousel .promo-card h4 { text-align: left !important; }
html.hm .promo-carousel .carousel-control-prev, html.hm .promo-carousel .carousel-control-next { top: auto !important; bottom: -8px; width: 40px !important; height: 40px; }
html.hm .promo-carousel .carousel-control-prev { left: calc(50% - 130px); }
html.hm .promo-carousel .carousel-control-next { right: calc(50% - 130px); }
html.hm .promo-carousel .carousel-control-prev-icon::before, html.hm .promo-carousel .carousel-control-next-icon::before { font-size: 1.7em; color: var(--hm-link); }
@media (max-width: 576px) {
    html.hm .promo-carousel .carousel-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    html.hm .about-content p { text-align: left !important; }
}

/* M. the footer's bottom line: the Supercraft logo carries width="315" with a 1.5em height, so the
   SVG sat letterboxed in a 315 px box and left a wide gap before the copyright (PB, 2026-10-03) */
html.hm footer.main-footer img[src*="supercraft-logo"] { width: auto !important; height: 1.5em !important; }

/* N. the rest of the review findings, by page family */
/* the managers comparison: pros and cons were dark green and dark red on the dark card (2.1 to 2.4:1) */
html.hm .mh-card .mh-good { color: #4ade80 !important; }
html.hm .mh-card .mh-bad { color: #f87171 !important; }
/* the War3zuk landing: its own coral button pair onto the button system */
html.hm .wa-cta-primary { background: var(--hm-red) !important; color: #fff !important; border: 0 !important; filter: none !important; }
html.hm .wa-cta-primary:hover { background: var(--hm-red-dark) !important; }
html.hm .wa-cta-ghost { background: transparent !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; color: #fff !important; }
html.hm .wa-cta-ghost:hover { background: #fff !important; color: var(--hm-ink) !important; }
/* the docs hub hero: one solid main action; the second button is the outline */
html.hm .page-content > section.py-5.bg-light a.btn-success { background: transparent !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; color: #fff !important; }
html.hm .page-content > section.py-5.bg-light a.btn-success:hover { background: #fff !important; color: var(--hm-ink) !important; }
/* the plan cards' modpack badges: one glyph style (Asylum and Undead Legacy had no icon, the two
   pictures vanished on the dark card), icons in the accent instead of gold */
html.hm .plan-card-badge::before { color: var(--hm-link) !important; }
html.hm .plan-card-badge[data-badge*="darkness-falls"]::before { content: "\f186"; background-image: none !important; }
html.hm .plan-card-badge[data-badge*="war3zuk"]::before { content: "\f05b"; background-image: none !important; }
html.hm .plan-card-badge[data-badge*="asylum"]::before { content: "\f0f8"; }
html.hm .plan-card-badge[data-badge*="undead"]::before { content: "\f54c"; }
/* PROJECT Z and Rebirth: no glyph reads as the pack, so their initial sits in the box, in the site
   font at the glyphs' size and colour; the box was empty (PB, 2026-10-05: "looks shitty") */
html.hm .plan-card-badge[data-badge*="project-z"]::before { content: "Z"; font-family: inherit; font-weight: 800; font-size: 13px; }
html.hm .plan-card-badge[data-badge*="rebirth"]::before { content: "R"; font-family: inherit; font-weight: 800; font-size: 13px; }
/* Plan S says it runs no mods (PB, 2026-10-05: "not clear looking at it S doesnt contain any mods"); after
   the "mod" wrench rule, which "no-mods" would otherwise match */
html.hm .plan-card-badge[data-badge*="no-mods"]::before { content: "\f05e"; }
/* headings in the success colour (support) are white like every heading */
html.hm .page-content :is(h1, h2, h3, h4, h5, h6).text-success, html.hm .page-content :is(h2, h3, h4, h5) .text-success { color: #fff !important; }
@media (max-width: 991px) {
    /* the docs articles: the article first on a phone, its sidebar (contents, related docs) after */
    html.hm .page-content .row > aside[class*="col-lg-"] { order: 2; }
}
@media (max-width: 767px) {
    /* form controls never run past their card (the self-host calculator's selects did) */
    html.hm .page-content :is(select, input, textarea) { max-width: 100% !important; }
    html.hm .page-content :is(.shc-page, .shc-grid, .shc-form, .row) > * { min-width: 0; }
}
/* the stacked CMS heroes (Teragon, xegen): the picture under the title stays a preview, not a
   page-wide light block */
html.hm #cms-content-wrapper .inner > div:has(h1) > div[style*="display:flex"]:has(h1) img { max-width: min(100%, 460px) !important; height: auto; filter: brightness(0.86); }

/* O. the order pages' plan card (PB, 2026-10-03, "wtf is this"): the partners page's .pill rule had
   leaked onto the card's feature and overhaul chips, boxing them with no padding; they get the
   card's own pill shape. Browser autofill painted the email and password fields light blue. */
html.hm .plan-hero__mods { gap: 8px !important; }
html.hm .plan-hero__mods .pill, html.hm .plan-hero__pills .pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px !important; margin: 0 !important; border-radius: 999px !important;
    background: var(--hm-raise) !important; border: 1px solid var(--hm-line-strong) !important; color: var(--hm-text) !important; font-size: 0.85rem !important; line-height: 1.3;
}
html.hm .plan-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; }
html.hm .plan-hero__mods .pill--off { opacity: 0.45; }
html.hm .plan-hero__mods > .small { color: var(--hm-muted) !important; }
html.hm input:-webkit-autofill, html.hm input:-webkit-autofill:hover, html.hm input:-webkit-autofill:focus,
html.hm textarea:-webkit-autofill, html.hm select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--hm-field) inset !important; box-shadow: 0 0 0 1000px var(--hm-field) inset !important;
    -webkit-text-fill-color: var(--hm-text) !important; caret-color: var(--hm-text); transition: background-color 9999s ease 0s;
}
/* the discount note under the plan select is a promotion, not a success message */
html.hm #discounts.alert-success { background: var(--hm-card-2) !important; border: 1px solid var(--hm-line-strong) !important; border-left: 3px solid var(--hm-red) !important; color: var(--hm-text) !important; }
html.hm #discounts.alert-success i { color: var(--hm-link); }

/* P. the order page (PB, 2026-10-03: "I wanted them a bit wider", then "make it wider say 20%"),
   not reorganised: the same one column of plan card, form and what is included, 1200 px wide
   instead of the original 800 */
@media (min-width: 1260px) {
    html.hm #buy-content-wrapper > .content > .col-lg-8 { flex: 0 0 1200px; max-width: 1200px; }
}
@media (min-width: 1200px) and (max-width: 1259px) {
    html.hm #buy-content-wrapper > .content > .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
}
/* the audit's last findings (2026-10-03 re-run): ranks and tags still in the old rust, the CMS
   main action that turned grey, borders on the affiliate FAQ's text buttons, the calculator's
   white button whose label took the page's link colour */
html.hm .mh-rank, html.hm .ds-plan.recommended h4 span, html.hm .sc-plan.recommended h4 span, html.hm .rent-plan.recommended h4 span { color: var(--hm-link) !important; }
html.hm #cms-content-wrapper a.btn.btn-primary { background: var(--hm-red) !important; border-color: var(--hm-red) !important; color: #fff !important; }
html.hm .page-content .btn-link { border-color: transparent !important; }
html.hm .shc-page .shc-cta a, html.hm .shc-page .shc-cta a:not(.btn) { background: #fff !important; color: var(--hm-red-dark) !important; }

/* Q. the about page 20 % wider on large screens (PB, 2026-10-03: "make 20% wider"): 1200 to 1440 */
@media (min-width: 1500px) {
    html.hm .page-content > .about-page-wrapper, html.hm .about-page-wrapper > .container { max-width: 1440px !important; }
}
@media (max-width: 767px) {
    /* the self-host calculator: its long select options set the grid track wider than the phone */
    html.hm .shc-page .shc-row { grid-template-columns: minmax(0, 1fr) !important; }
    html.hm .shc-page .shc-row > *, html.hm .shc-page .shc-input > * { min-width: 0 !important; }
    html.hm .shc-page select { width: 100%; min-width: 0; text-overflow: ellipsis; }
}

/* R. the included supercraft.host game (2026-10-03): the order card's pill and a line on each plan card */
html.hm .plan-hero__pills .pill.pill--sc { border-color: rgba(232, 28, 35, 0.6) !important; color: #fff !important; text-decoration: none; }
html.hm .plan-hero__pills .pill.pill--sc:hover { background: var(--hm-red) !important; border-color: var(--hm-red) !important; }
html.hm .plan-box .plan-sc-line { margin: 2px 0 12px; font-size: 13px; line-height: 1.4; color: var(--hm-muted); text-align: center; }
html.hm .plan-box .plan-sc-line i { color: var(--hm-link); margin-right: 6px; }

/* S. the community, resources and Gamepedia lists (2026-10-03): dark link cards instead of bare
   bullets running across the page */
html.hm .list-page .list-section { max-width: 1100px; margin: 0 auto 36px; padding: 0 !important; }
html.hm .list-page .list-section > h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 14px; }
html.hm .list-page .link-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
html.hm .list-page .link-cards > li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); color: var(--hm-text); }
html.hm .list-page .link-cards > li > i { color: var(--hm-link); width: 20px; flex: 0 0 20px; text-align: center; margin-top: 3px; }
html.hm .list-page .link-cards > li > img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; border-radius: var(--hm-radius-sm); }
html.hm .list-page .link-cards > li > div { min-width: 0; }
html.hm .list-page .link-cards > li > div > a:first-child { font-weight: 600; }
html.hm .list-page .link-cards > li span { display: block; margin-top: 2px; font-size: 14px; color: var(--hm-muted); }
html.hm .list-page .link-cards > li p { margin: 6px 0; font-size: 14px; color: var(--hm-muted); }
html.hm .list-page .link-cards > li.link-card--wide { grid-column: 1 / -1; }
html.hm .list-page .link-cards > li.link-card--wide > img { width: 160px; height: auto; flex: 0 0 160px; }
html.hm .list-page .link-cards--compact > li { padding: 10px 14px; }
html.hm .list-page .list-note { text-align: center; margin-top: 14px; color: var(--hm-muted); }
html.hm .list-page .list-videos { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
html.hm .list-page .list-videos iframe { width: min(100%, 560px); height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hm-radius); }
@media (max-width: 576px) {
    html.hm .list-page .link-cards > li.link-card--wide { flex-direction: column; }
    html.hm .list-page .link-cards > li.link-card--wide > img { width: 100%; flex-basis: auto; }
}
/* img_resp is used as "responsive" across the templates but nothing styled it: a wide screenshot
   ran past its column (the reviews page's Discord capture) */
html.hm .page-content img.img_resp { max-width: 100%; height: auto; }

/* T. the manual (2026-10-03): today's dark panel screenshots as framed pictures, and the panel's buttons
   named in the text as small chips instead of the 2021 purple button images */
html.hm .page-content img.manual-shot { display: block; max-width: 100%; height: auto; margin: 10px 0 18px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); }
html.hm .page-content .ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; margin: 0 2px; border-radius: var(--hm-radius-sm); background: var(--hm-raise); border: 1px solid var(--hm-line-strong); color: #fff; font-size: 0.92em; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: baseline; }
html.hm .page-content .ui-chip i { color: var(--hm-muted); font-size: 0.9em; }
html.hm .page-content .ui-chip--red { background: var(--hm-red); border-color: var(--hm-red); }
html.hm .page-content .ui-chip--red i { color: #fff; }
html.hm .page-content .ui-chip--danger { border-color: rgba(232, 28, 35, 0.6); color: var(--hm-link); }
html.hm .page-content .ui-chip--brand i { color: var(--hm-text); }
/* the manual's lead, its "On this page" list in two columns, the install warning, and air above each section */
html.hm .manual-body .manual-lead { font-size: 1.08em; color: var(--hm-text); }
html.hm .manual-body .manual-toc { margin: 18px 0 8px; padding: 14px 18px; background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); }
html.hm .manual-body .manual-toc__title { margin: 0 0 6px; font-weight: 600; color: var(--hm-text); }
html.hm .manual-body .manual-toc ol { columns: 2 300px; column-gap: 32px; margin: 0; padding-left: 22px; }
html.hm .manual-body .manual-toc li { break-inside: avoid; padding: 2px 0; }
html.hm .manual-body .manual-note { padding: 10px 14px; background: var(--hm-raise); border-left: 3px solid var(--hm-red); border-radius: var(--hm-radius-sm); }
html.hm .manual-body h2 { margin-top: 2em; }
html.hm .manual-body h3 { margin-top: 1.4em; }