/* ==========================================================================
   Hercul Hosting — "New" theme
   Navy base (#212535) with the logo orange used strictly as an accent.
   Inter for all text, prices in Inter 700 (tight); Barlow Condensed italic 800 only for big numbers.
   Own components are prefixed .hh-; WHMCS / Bootstrap markup is restyled in the
   scoped blocks further down (body.hh-app, body.hh-cart, body.hh-auth).

   Contents
     Tokens, base, buttons, accessibility
     Header / navigation (site navigation, mega menu, drawer, client-area bar)
     Shared section scaffolding, scroll reveal
     HERO, PRODUCTS (cards, all-products tiles, spotlight), GAME CHOOSER
     LOCATION, WHY, REVIEWS, CTA
     PRODUCT PAGE (banner, plans, FAQ, VPS / colocation panels)
     ABOUT US
     CLIENT AREA, SHOPPING CART, SIGN-IN PAGES
     FOOTER, Responsive, Reduced motion
   ========================================================================== */

:root {
    --hh-bg: #212535;
    /* rgb(33, 37, 53) */
    --hh-bg-alt: #1c2030;
    --hh-bg-deep: #181b27;
    --hh-surface: #282d40;
    --hh-surface-2: #2f354b;
    --hh-line: rgba(255, 255, 255, .07);
    --hh-line-2: rgba(255, 255, 255, .12);
    --hh-text: #f2f4f9;
    --hh-text-2: #d4d8e4;
    /* body copy on cards, list items */
    --hh-muted: #a3a9bd;
    --hh-dim: #767d94;

    --hh-accent: #f28711;
    /* logo orange */
    --hh-accent-hover: #ff9b2f;
    --hh-accent-soft: rgba(242, 135, 17, .12);
    --hh-accent-line: rgba(242, 135, 17, .32);
    --hh-on-accent: #1b1e2b;
    --hh-ok: #3ddc84;
    --hh-star: #ffb547;
    --hh-discord: #5865f2;
    --hh-popover: #262a3c;
    /* mega menu, drawer, pop-ups */
    --hh-popover-2: #2b3045;
    /* drop-downs inside the page */

    --hh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hh-display: 'Barlow Condensed', 'Inter', sans-serif;

    --hh-radius: 14px;
    --hh-radius-lg: 20px;
    --hh-wrap: 1240px;
    --hh-nav-h: 77px;
    --hh-ease: cubic-bezier(.2, .8, .2, 1);
}

/* --------------------------------------------------------------------------
   Base. body.hh-dark = the dark, full-width pages (home page and the product pages of
   the hercul_new order form); the other pages (body.hh-inner) only get the chrome.
   -------------------------------------------------------------------------- */
/* Twenty-One fixes body to height:100%, which would stop the sticky navbar after one screen. */
body.hh-body {
    height: auto;
    min-height: 100%;
}

body.hh-dark {
    background: var(--hh-bg);
    color: var(--hh-text);
    font-family: var(--hh-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.hh-dark ::selection {
    background: var(--hh-accent);
    color: var(--hh-on-accent);
}

body.hh-dark a {
    color: inherit;
}

body.hh-dark a:hover {
    text-decoration: none;
}

body.hh-dark h1,
body.hh-dark h2,
body.hh-dark h3,
body.hh-dark h4 {
    color: var(--hh-text);
    margin: 0;
}

body.hh-dark p {
    margin: 0;
}

/* WHMCS pop-ups stay light: give them their dark text back */
body.hh-dark .modal:not(.modal-localisation) .modal-content,
body.hh-dark .modal:not(.modal-localisation) .modal-content h4,
body.hh-dark .modal:not(.modal-localisation) .modal-content h5 {
    color: #212529;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hh-nav-h) + 20px);
}

.hh-wrap {
    width: 100%;
    max-width: var(--hh-wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* brand colour of an icon, by product key (hh-icon-<key>, see hh-config.tpl) */
.hh-icon-discordbot {
    color: var(--hh-discord);
}

.hh-dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hh-ok);
    animation: hh-pulse 2.4s infinite;
}

@keyframes hh-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(61, 220, 132, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
    }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.hh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .8em 1.6em;
    font: 600 15px/1.2 var(--hh-font);
    border: 0;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--hh-ease);
    text-decoration: none !important;
}

.hh-btn i {
    font-size: .85em;
    transition: transform .25s var(--hh-ease);
}

.hh-btn:hover i.fa-arrow-right {
    transform: translateX(3px);
}

.hh-btn:active {
    transform: translateY(1px);
}

.hh-btn--sm {
    font-size: 14px;
    padding: .62em 1.2em;
    border-radius: 10px;
}

.hh-btn--lg {
    font-size: 16px;
    padding: .95em 1.7em;
    border-radius: 14px;
}

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

.hh-btn--primary {
    background: var(--hh-accent);
    color: var(--hh-on-accent) !important;
    box-shadow: 0 8px 24px -10px rgba(242, 135, 17, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.hh-btn--primary:hover {
    background: var(--hh-accent-hover);
    color: var(--hh-on-accent) !important;
}

.hh-btn--ghost {
    background: rgba(255, 255, 255, .06);
    color: var(--hh-text) !important;
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

.hh-btn--ghost:hover {
    background: rgba(255, 255, 255, .11);
    color: #fff !important;
}

.hh-link {
    color: var(--hh-accent);
    font-weight: 600;
    font-size: 14px;
}

/* keyboard focus: one visible ring for everything the theme draws itself */
:is(.hh-nav, .hh-drawer, .hh-main, .hh-footer, .hh-store) :is(a, button, summary):focus {
    outline: none;
}

:is(.hh-nav, .hh-drawer, .hh-main, .hh-footer, .hh-store) :is(a, button, summary):focus-visible {
    outline: 2px solid var(--hh-accent);
    outline-offset: 2px;
}

/* "skip to content", visible only when reached with the keyboard */
.hh-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--hh-accent);
    color: var(--hh-on-accent) !important;
    font: 600 14px var(--hh-font);
    text-decoration: none !important;
    transform: translateY(-160%);
    transition: transform .2s var(--hh-ease);
}

.hh-skip:focus {
    transform: none;
    outline: none;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
/* Full-width bar in the page flow that sticks to the top while scrolling. */
.hh-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    font-family: var(--hh-font);
}

.hh-nav {
    background: var(--hh-bg-deep);
    border-bottom: 1px solid var(--hh-line);
}

/* same colour as the footer */
.hh-nav__inner {
    height: var(--hh-nav-h);
    display: flex;
    align-items: center;
    gap: 20px;
}

.hh-nav__brand {
    display: flex;
    align-items: center;
    flex: none;
}

.hh-nav__brand img {
    height: 34px;
    width: auto;
    display: block;
}

.hh-nav__links {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 0 0 8px;
    padding: 0;
}

/* pill that slides to whichever link is hovered */
.hh-nav__glider {
    position: absolute;
    top: 50%;
    left: 0;
    height: 36px;
    width: 0;
    margin-top: -18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    opacity: 0;
    transition: transform .35s var(--hh-ease), width .35s var(--hh-ease), opacity .2s;
    pointer-events: none;
}

.hh-nav__links.has-glider .hh-nav__glider {
    opacity: 1;
}

.hh-nav__links.has-glider .hh-nav__link:hover,
.hh-nav__links.has-glider .hh-nav__link[aria-expanded="true"] {
    background: none;
}

.hh-nav__item {
    position: relative;
}

.hh-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hh-text-2) !important;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none !important;
    transition: color .2s, background .2s;
}

.hh-nav__link:hover,
.hh-nav__link[aria-expanded="true"] {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
}

.hh-nav__link[aria-current="page"] {
    color: #fff !important;
}

.hh-nav__link .fa-chevron-down {
    font-size: 10px;
    opacity: .7;
    transition: transform .25s;
}

.hh-nav__link[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.hh-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* NL / EN switch */
.hh-lang {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px var(--hh-line);
}

.hh-lang>i {
    margin: 0 5px 0 7px;
    font-size: 13px;
    color: var(--hh-muted);
}

.hh-drawer__lang {
    display: flex;
    gap: 8px;
    padding: 4px 0 6px;
}

.hh-drawer__section .hh-drawer__lang a {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-muted) !important;
}

.hh-drawer__section .hh-drawer__lang a.is-active {
    background: var(--hh-accent-soft);
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
    color: var(--hh-text) !important;
}

.hh-lang a {
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--hh-dim) !important;
    text-decoration: none !important;
    transition: color .2s, background .2s;
}

.hh-lang a:hover {
    color: var(--hh-text) !important;
}

.hh-lang a.is-active {
    background: var(--hh-surface-2);
    color: var(--hh-text) !important;
}

.hh-nav__icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--hh-text-2) !important;
    transition: background .2s, color .2s;
}

.hh-nav__icon:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff !important;
}

.hh-nav__badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--hh-accent);
    color: var(--hh-on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.hh-nav__badge.is-empty {
    display: none;
}

.hh-nav__login {
    padding: 10px 12px;
}

.hh-nav__burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    position: relative;
    cursor: pointer;
}

.hh-nav__burger span {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    background: var(--hh-text);
    border-radius: 2px;
    transition: transform .3s var(--hh-ease), opacity .2s;
}

.hh-nav__burger span:nth-child(1) {
    top: 14px;
}

.hh-nav__burger span:nth-child(2) {
    top: 20px;
    right: 16px;
}

.hh-nav__burger span:nth-child(3) {
    top: 26px;
}

.hh-header.is-open .hh-nav__burger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.hh-header.is-open .hh-nav__burger span:nth-child(2) {
    opacity: 0;
}

.hh-header.is-open .hh-nav__burger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mega menu */
.hh-mega {
    position: absolute;
    top: calc(100% + 16px);
    left: -20px;
    width: min(860px, calc(100vw - 48px));
    padding: 14px;
    background: var(--hh-popover);
    border: 1px solid var(--hh-line-2);
    border-radius: var(--hh-radius-lg);
    box-shadow: 0 30px 70px -20px rgba(8, 10, 18, .7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s var(--hh-ease), visibility .2s;
}

.hh-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
}

.hh-has-mega.is-open .hh-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.hh-mega__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.hh-mega__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

.hh-mega__label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hh-dim);
    padding: 6px 10px 8px;
}

.hh-mega__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    color: var(--hh-text) !important;
    text-decoration: none !important;
    transition: background .2s;
}

.hh-mega__item:hover {
    background: rgba(255, 255, 255, .05);
}

.hh-mega__item strong {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
}

.hh-mega__item small {
    display: block;
    font-size: 12.5px;
    color: var(--hh-muted);
}

/* product picture on a small tile (same pictures as the all-products tiles) */
.hh-mega__ico {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: radial-gradient(60% 60% at 50% 60%, rgba(242, 135, 17, .12), transparent 70%), var(--hh-bg-alt);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text);
    font-size: 20px;
    transition: background .2s, box-shadow .2s;
}

.hh-mega__ico img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px rgba(8, 10, 18, .5));
    transition: transform .4s var(--hh-ease);
}

.hh-mega__item:hover .hh-mega__ico {
    background: radial-gradient(60% 60% at 50% 60%, rgba(242, 135, 17, .2), transparent 70%), var(--hh-bg-alt);
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
}

.hh-mega__item:hover .hh-mega__ico img {
    transform: translateY(-2px) scale(1.06);
}

.hh-mega__feature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-end;
    padding: 22px;
    min-height: 220px;
    border-radius: 16px;
    color: var(--hh-text) !important;
    text-decoration: none !important;
    background: radial-gradient(120% 90% at 100% 0%, rgba(242, 135, 17, .2), transparent 60%), var(--hh-bg-alt);
    box-shadow: inset 0 0 0 1px var(--hh-line);
}

.hh-mega__feature .hh-mega__label {
    padding: 0;
}

.hh-mega__feature strong {
    font-family: var(--hh-display);
    font-style: italic;
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
}

.hh-mega__feature>span:not(.hh-mega__label):not(.hh-link) {
    font-size: 13.5px;
    color: var(--hh-muted);
}

/* Mobile drawer */
.hh-drawer {
    position: fixed;
    top: calc(var(--hh-nav-h) + 8px);
    left: 12px;
    right: 12px;
    overscroll-behavior: contain;
    max-height: calc(100vh - var(--hh-nav-h) - 20px);
    overflow-y: auto;
    padding: 8px 20px 20px;
    border-radius: 18px;
    background: var(--hh-popover);
    box-shadow: inset 0 0 0 1px var(--hh-line-2), 0 30px 60px -20px rgba(8, 10, 18, .9);
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: hh-drawer-in .25s var(--hh-ease);
}

.hh-drawer[hidden] {
    display: none;
}

@keyframes hh-drawer-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.hh-drawer__section {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid var(--hh-line);
}

.hh-drawer__section .hh-mega__label {
    padding-left: 0;
}

.hh-drawer__section a {
    padding: 10px 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--hh-text) !important;
    text-decoration: none !important;
}

.hh-drawer__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 16px;
}

.hh-drawer__cta .hh-btn:only-child {
    grid-column: 1 / -1;
}

/* Logged-in client area: the WHMCS client menu (Home, Services, Billing, Support, ...) is
   the only navigation there: logo, menu, account (header.tpl, hhClientNav). Same colour as
   the site navigation, links as quiet pills, "Open Ticket" outlined as the one action.
   The links themselves stay one text line (24px) tall and the pill is drawn around them:
   WHMCS moves menu items into a "More" menu as soon as the list is 30px or taller. */
.hh-subnav.main-navbar-wrapper {
    padding: 0;
    background: var(--hh-bg-deep);
    border-bottom: 1px solid var(--hh-line);
    font-family: var(--hh-font);
}

.hh-subnav .navbar-collapse {
    padding: 13px 0;
}

.hh-subnav .navbar-nav {
    align-items: center;
    gap: 2px;
}

.hh-subnav .navbar-nav>li>a {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    margin: 0;
    padding: 0 12px !important;
    color: var(--hh-text-2) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition: color .2s;
}

.hh-subnav .navbar-nav>li>a::before {
    content: "";
    position: absolute;
    inset: -6px 0;
    z-index: -1;
    border-radius: 8px;
    transition: background-color .2s, box-shadow .2s;
}

.hh-subnav .navbar-nav>li>a:hover,
.hh-subnav .navbar-nav>li.show>a,
.hh-subnav .navbar-nav>li.active>a {
    color: #fff !important;
}

.hh-subnav .navbar-nav>li>a:hover::before,
.hh-subnav .navbar-nav>li.show>a::before,
.hh-subnav .navbar-nav>li.active>a::before {
    background: rgba(255, 255, 255, .06);
}

.hh-subnav .navbar-nav>li>a:focus {
    outline: none;
}

.hh-subnav .navbar-nav>li>a:focus-visible::before {
    box-shadow: 0 0 0 2px var(--hh-accent);
}

.hh-subnav .navbar-nav>li[menuItemName="Open Ticket"] {
    margin-left: 6px;
}

.hh-subnav .navbar-nav>li[menuItemName="Open Ticket"]>a::before {
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

.hh-subnav .navbar-nav>li[menuItemName="Open Ticket"]>a:hover::before {
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
}

/* a small chevron instead of Bootstrap's triangle; it turns when the menu is open */
.hh-subnav .navbar-nav>li>.dropdown-toggle::after {
    width: 6px;
    height: 6px;
    margin: -3px 1px 0 0;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    vertical-align: 0;
    opacity: .65;
    transform: rotate(45deg);
    transition: transform .25s var(--hh-ease), margin .25s var(--hh-ease);
}

.hh-subnav .navbar-nav>li.show>.dropdown-toggle::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

.hh-subnav .hh-subnav__toggle {
    margin: 7px 0;
    padding: 7px 12px;
    background: rgba(255, 255, 255, .06);
    border: 0;
    border-radius: 8px;
    color: var(--hh-text-2) !important;
    font: 500 14px var(--hh-font);
}

.hh-subnav>.container {
    align-items: center;
}

.hh-header--client .hh-nav__brand {
    margin-right: 22px;
}

.hh-header--client .hh-subnav .navbar-collapse {
    padding: 26.5px 0;
}

.hh-subnav .hh-subnav__lang {
    margin: -4px 8px -4px 0;
}

.hh-subnav .hh-subnav__lang .hh-lang {
    width: max-content;
}

/* 26.5 + 24 + 26.5 = the 77px of the site navigation */
.hh-subnav .navbar-nav>li>a .badge {
    padding: 2px 6px;
    border-radius: 9px;
    background: var(--hh-accent);
    color: var(--hh-on-accent);
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 1199px) {
    .hh-subnav>.container {
        min-height: var(--hh-nav-h);
        padding-left: 15px;
        padding-right: 15px;
    }

    .hh-subnav .hh-subnav__toggle {
        margin-left: auto;
    }

    .hh-subnav .navbar-collapse,
    .hh-header--client .hh-subnav .navbar-collapse {
        padding: 6px 0 12px;
    }

    .hh-subnav .navbar-nav {
        align-items: stretch;
        gap: 0;
    }

    .hh-subnav .navbar-nav>li {
        padding: 7px 0;
    }

    .hh-subnav .navbar-nav>li>a {
        display: flex;
        justify-content: space-between;
    }

    .hh-subnav .navbar-nav>li[menuItemName="Open Ticket"] {
        margin-left: 0;
    }

    .hh-subnav .hh-subnav__lang {
        margin: 0;
    }

    .hh-subnav .dropdown-menu {
        margin: 12px 0 2px !important;
        box-shadow: none;
    }
}

.hh-adminbar {
    background: var(--hh-accent);
    font-size: 13px;
    padding: 6px 0;
}

.hh-adminbar a {
    color: var(--hh-on-accent) !important;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Shared section scaffolding
   -------------------------------------------------------------------------- */
.hh-main {
    position: relative;
}

.hh-section {
    position: relative;
    padding: 150px 0;
}

.hh-section--alt {
    background: var(--hh-bg-alt);
}

.hh-head {
    max-width: 680px;
    margin-bottom: 72px;
}

.hh-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hh-head--center .hh-head__sub {
    margin-left: auto;
    margin-right: auto;
}

.hh-head__sub {
    color: var(--hh-muted);
    font-size: 17.5px;
    margin-top: 16px !important;
    max-width: 560px;
}

.hh-h2 {
    font-family: var(--hh-font);
    font-weight: 700;
    font-size: clamp(34px, 3.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.hh-h2--sm {
    font-size: clamp(30px, 3vw, 42px);
}

.hh-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hh-on-accent);
    background: var(--hh-accent);
    padding: 4px 10px;
    border-radius: 999px;
}

body.hh-dark .hh-stars,
.hh-stars {
    color: var(--hh-star);
    font-size: 13px;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Scroll reveal (subtle). Only when JavaScript runs (html.hh-js, set in includes/head.tpl);
   should js/hh.js not start (html.hh-ready), everything appears after a moment anyway. */
.hh-reveal {
    transition: opacity .7s var(--hh-ease), transform .7s var(--hh-ease);
}

.hh-reveal.is-in {
    transition-delay: var(--d, 0s);
}

.hh-js .hh-reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(16px);
    animation: hh-unhide 0s 2.5s forwards;
}

.hh-js.hh-ready .hh-reveal {
    animation: none;
}

@keyframes hh-unhide {
    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   HERO — one viewport: copy on the left, the whole globe next to it.
   Below 992px the copy is centred and the globe rises from the bottom
   (see the responsive block at the end of this file).
   -------------------------------------------------------------------------- */
.hh-hero {
    position: relative;
    /* navbar + hero together fill exactly one viewport */
    min-height: calc(100vh - var(--hh-nav-h) - 1px);
    min-height: calc(100svh - var(--hh-nav-h) - 1px);
    display: flex;
    align-items: center;
    background:
        radial-gradient(34% 56% at 76% 50%, rgba(84, 98, 150, .26), transparent 70%),
        radial-gradient(18% 30% at 72% 34%, rgba(242, 135, 17, .07), transparent 70%),
        var(--hh-bg);
    overflow: hidden;
}

/* No z-index on the wrapper or the globe: a stacking context between the video and the
   hero background would stop mix-blend-mode from blending the two. */
.hh-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 32px;
}

.hh-hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hh-hero__title {
    margin: 0;
    max-width: 720px;
    font-family: var(--hh-font);
    font-weight: 800;
    font-size: clamp(40px, 4vw, 62px);
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--hh-text);
    text-wrap: balance;
}

.hh-hero__lead {
    margin-top: 24px !important;
    max-width: 560px;
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.65;
    color: var(--hh-muted);
}

/* small dark notice under the copy: icon square + one line */
.hh-hero__note {
    display: inline-flex;
    align-items: stretch;
    margin-top: 28px;
    max-width: 100%;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text) !important;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .2s, box-shadow .2s;
}

.hh-hero__note:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

.hh-hero__note>span:last-child {
    display: flex;
    align-items: center;
    padding: 11px 18px;
}

.hh-hero__note-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    border-radius: 8px 0 0 8px;
    background: rgba(255, 255, 255, .05);
    color: var(--hh-accent);
    font-size: 14px;
}

.hh-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

/* The video frame is square with the globe filling 84% of it, so the frame may be wider
   than its column: only its empty margin overlaps the copy or leaves the page. */
.hh-hero__globe {
    justify-self: center;
    width: min(126%, calc(100vh - var(--hh-nav-h) - 24px));
    width: min(126%, calc(100svh - var(--hh-nav-h) - 24px));
    aspect-ratio: 1;
}

.hh-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    mix-blend-mode: screen;
    /* black video background disappears on the navy page */
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   PRODUCTS — featured pricing cards
   -------------------------------------------------------------------------- */
.hh-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* the two rows (game servers, business), each with a plain heading */
.hh-plans__group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 24px;
}

.hh-plans+.hh-plans__group {
    margin-top: 80px;
}

.hh-plans__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.hh-plans__sub {
    margin: 0 !important;
    color: var(--hh-muted);
    font-size: 15px;
}

.hh-plans__more {
    margin-top: 44px;
    text-align: center;
}

/* "All game servers" link at the end of a group heading */
.hh-plans__link {
    margin-left: auto;
    color: var(--hh-muted) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s;
}

.hh-plans__link i {
    margin-left: 6px;
    font-size: 12px;
    transition: transform .25s var(--hh-ease);
}

.hh-plans__link:hover {
    color: var(--hh-text) !important;
}

.hh-plans__link:hover i {
    color: var(--hh-accent);
    transform: translateX(3px);
}

/* all game servers page: three per row, an unfinished last row centred */
.hh-plans--center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.hh-plans--center>.hh-plan {
    flex: 0 1 calc((100% - 40px) / 3);
}

.hh-plan {
    --mx: 50%;
    --my: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text) !important;
    text-decoration: none !important;
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s var(--hh-ease), box-shadow .3s, opacity .7s var(--hh-ease);
}

.hh-plan:hover {
    transform: translateY(-6px);
}

.hh-plan--hot {
    box-shadow: inset 0 0 0 1px var(--hh-accent-line), 0 30px 60px -30px rgba(242, 135, 17, .35);
}

/* product "stage": dotted floor + glow, echoing the globe */
.hh-plan__stage {
    position: relative;
    height: 230px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(45% 55% at 50% 60%, rgba(242, 135, 17, .16), transparent 70%),
        radial-gradient(rgba(176, 188, 222, .16) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
        var(--hh-bg-alt);
    border-bottom: 1px solid var(--hh-line);
    -webkit-mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, .85));
    mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, .85));
}

.hh-plan__stage .hh-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
}

.hh-plan__stage img {
    height: 150px;
    width: auto;
    max-width: 70%;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(8, 10, 18, .6));
    transition: transform .6s var(--hh-ease);
}

.hh-plan:hover .hh-plan__stage img {
    transform: translateY(-8px) scale(1.05);
}

/* a product without a picture of its own: its icon on a tile */
.hh-plan__glyph {
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    border-radius: 34px;
    background: linear-gradient(160deg, var(--hh-surface-2), var(--hh-surface));
    box-shadow: inset 0 0 0 1px var(--hh-line-2), inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 30px -10px rgba(8, 10, 18, .6);
    color: var(--hh-text);
    font-size: 62px;
    transition: transform .6s var(--hh-ease);
}

.hh-plan:hover .hh-plan__glyph {
    transform: translateY(-8px) scale(1.05);
}

.hh-plan__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 30px 30px;
}

.hh-plan__body h3 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.hh-plan__body>p {
    margin-top: 4px !important;
    color: var(--hh-muted);
    font-size: 15px;
}

.hh-plan__body .hh-ticks {
    margin: 22px 0 28px;
}

.hh-plan__price {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--hh-line);
    font-family: var(--hh-font);
    font-weight: 700;
    letter-spacing: -.03em;
    font-size: 40px;
    line-height: 1;
}

.hh-plan__price small {
    font-family: var(--hh-font);
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--hh-muted);
    margin: 0 5px;
}

.hh-plan__body .hh-btn {
    margin-top: 22px;
}

.hh-plan__body .hh-ticks+.hh-btn {
    margin-top: auto;
}

/* card without a price: button stays at the bottom */
.hh-plan:hover .hh-btn--ghost {
    background: rgba(255, 255, 255, .11);
}

.hh-plan:hover .hh-btn i.fa-arrow-right {
    transform: translateX(3px);
}

.hh-ticks {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 10px;
}

.hh-ticks li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    color: var(--hh-text-2);
}

.hh-ticks li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 6px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--hh-accent);
    border-bottom: 2px solid var(--hh-accent);
    transform: rotate(-45deg);
}

/* "all products" page (includes/hh-products-all.tpl): one compact row per product */
.hh-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
    gap: 16px;
}

.hh-tiles+.hh-plans__group {
    margin-top: 72px;
}

.hh-tile {
    --mx: 50%;
    --my: 50%;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 28px 20px 20px;
    border-radius: 22px;
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text) !important;
    text-decoration: none !important;
    transition: transform .45s var(--hh-ease), opacity .7s var(--hh-ease);
}

.hh-tile::before {
    border-radius: inherit;
}

.hh-tile:hover {
    transform: translateY(-3px);
}

.hh-tile__art {
    flex: 0 0 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background:
        radial-gradient(60% 60% at 50% 60%, rgba(242, 135, 17, .14), transparent 70%),
        radial-gradient(rgba(176, 188, 222, .16) 1.2px, transparent 1.4px) 0 0 / 12px 12px,
        var(--hh-bg-alt);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font-size: 32px;
    color: var(--hh-text);
}

.hh-tile__art img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(8, 10, 18, .55));
    transition: transform .6s var(--hh-ease);
}

.hh-tile:hover .hh-tile__art img {
    transform: translateY(-3px) scale(1.06);
}

.hh-tile__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hh-tile__body strong {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.hh-tile__body small {
    color: var(--hh-muted);
    font-size: 14.5px;
}

.hh-tile__price {
    font-family: var(--hh-font);
    font-weight: 700;
    letter-spacing: -.03em;
    font-size: 25px;
    line-height: 1;
    white-space: nowrap;
    text-align: right;
}

.hh-tile__price small {
    display: block;
    margin-bottom: 3px;
    font-family: var(--hh-font);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--hh-muted);
}

.hh-tile__go {
    color: var(--hh-muted);
    font-size: 14px;
    transition: transform .3s var(--hh-ease), color .3s;
}

.hh-tile:hover .hh-tile__go {
    color: var(--hh-text);
    transform: translateX(3px);
}

@media (max-width: 479px) {

    /* phones: a smaller picture and price so the name keeps its line */
    .hh-tile {
        gap: 14px;
        padding: 14px 18px 14px 14px;
    }

    .hh-tile__art {
        flex-basis: 64px;
        height: 64px;
        border-radius: 14px;
        font-size: 26px;
    }

    .hh-tile__art img {
        width: 48px;
        height: 48px;
    }

    .hh-tile__body strong {
        font-size: 16.5px;
    }

    .hh-tile__body small {
        font-size: 13.5px;
    }

    .hh-tile__price {
        font-size: 21px;
    }

    .hh-tile__go {
        display: none;
    }
}

/* shared cursor spotlight (products stage + feature cards) */
[data-spotlight]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242, 135, 17, .12), transparent 45%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

[data-spotlight]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(300px circle at var(--mx) var(--my), rgba(242, 135, 17, .7), transparent 50%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s;
}

[data-spotlight]:hover::before,
[data-spotlight]:hover::after {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   GAME CHOOSER — two questions with tap-to-pick answers, one advice card.
   Lives on the Minecraft and FiveM product pages (includes/hh-chooser.tpl), which
   do not have the dark home page base, so it sets its own type and colours.
   -------------------------------------------------------------------------- */
.hh-chooser-wrap {
    margin-top: 28px;
    margin-bottom: 4px;
}

.hh-chooser {
    --ch: var(--hh-accent);
    --ch-soft: var(--hh-accent-soft);
    --ch-line: var(--hh-accent-line);
    /* theme colour, per game below */
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 48px;
    align-items: stretch;
    padding: 44px;
    border-radius: 24px;
    background: radial-gradient(60% 120% at 0% 100%, rgba(242, 135, 17, .07), transparent 60%), var(--hh-bg-alt);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    scroll-margin-top: calc(var(--hh-nav-h) + 24px);
    color: var(--hh-text);
    font: 400 16px/1.6 var(--hh-font);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.hh-chooser .hh-h2 {
    margin: 0;
    color: var(--hh-text);
    line-height: 1.15;
    white-space: nowrap;
}

.hh-chooser p {
    margin: 0;
}

.hh-chooser__sub {
    margin-top: 10px !important;
    color: var(--hh-muted);
    font-size: 15.5px;
    max-width: 460px;
}

.hh-q {
    margin-top: 28px;
}

.hh-q__label {
    display: block;
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hh-muted);
}

/* players / slots slider */
.hh-slider__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.hh-slider__head .hh-q__label {
    margin: 0;
    cursor: pointer;
}

.hh-slider__value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--hh-text);
    font-variant-numeric: tabular-nums;
}

.hh-slider input[type=range] {
    --p: 12%;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ch) var(--p), rgba(255, 255, 255, .12) var(--p));
    outline: none;
    cursor: pointer;
}

.hh-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid var(--ch);
    box-shadow: 0 4px 14px rgba(8, 10, 18, .6);
    cursor: grab;
}

.hh-slider input[type=range]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid var(--ch);
    box-shadow: 0 4px 14px rgba(8, 10, 18, .6);
    cursor: grab;
}

.hh-slider input[type=range]:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.hh-slider input[type=range]:focus-visible {
    box-shadow: 0 0 0 3px var(--ch-soft), 0 0 0 4px var(--ch-line);
}

.hh-slider__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 11px;
    font-size: 12.5px;
    color: var(--hh-dim);
    font-variant-numeric: tabular-nums;
}

/* Minecraft look: square track and a blocky thumb (track is 2px taller, so 1px less space above and below) */
.hh-chooser[data-theme="mc"] .hh-slider__head {
    margin-bottom: 14px;
}

.hh-chooser[data-theme="mc"] .hh-slider__scale {
    margin-top: 10px;
}

.hh-chooser[data-theme="mc"] .hh-slider input[type=range] {
    border-radius: 0;
    height: 10px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
}

.hh-chooser[data-theme="mc"] .hh-slider input[type=range]::-webkit-slider-thumb {
    border-radius: 3px;
    width: 22px;
    height: 26px;
    border-width: 5px;
}

.hh-chooser[data-theme="mc"] .hh-slider input[type=range]::-moz-range-thumb {
    border-radius: 3px;
    width: 12px;
    height: 16px;
    border-width: 5px;
}

.hh-chooser[data-theme="mc"] .hh-slider input[type=range]:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 0 5px var(--ch-soft);
}

.hh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hh-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text-2);
    font: 600 14px var(--hh-font);
    cursor: pointer;
    transition: background .2s, box-shadow .2s, color .2s;
}

.hh-chip i {
    font-size: 13px;
    color: var(--hh-dim);
    transition: color .2s;
}

.hh-chip:hover {
    background: rgba(255, 255, 255, .07);
    color: var(--hh-text);
}

.hh-chip:focus {
    outline: none;
}

.hh-chip:focus-visible {
    box-shadow: inset 0 0 0 2px var(--hh-accent);
}

.hh-chip.is-active {
    background: var(--ch-soft);
    box-shadow: inset 0 0 0 1px var(--ch-line);
    color: var(--hh-text);
}

.hh-chip.is-active i {
    color: var(--ch);
}

/* "kind of server" answers: a title with a short explanation */
.hh-chips--cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hh-chip--card {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-align: left;
}

.hh-chip--card>i {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    font-size: 15px;
    transition: background .2s, color .2s;
}

.hh-chip--card.is-active>i {
    background: var(--ch-soft);
}

.hh-chip--card>span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hh-chip--card strong {
    font-size: 15px;
    font-weight: 600;
}

.hh-chip--card small {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--hh-muted);
}

/* Minecraft version: label left, two small buttons right */
.hh-q--row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.hh-q--row .hh-q__label {
    margin: 0;
}

.hh-chips--seg {
    gap: 6px;
}

.hh-chips--seg .hh-chip {
    padding: 8px 14px;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.hh-chooser__result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
    border-radius: 20px;
    background: rgba(33, 37, 53, .74);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 0 0 1px var(--hh-line-2), 0 30px 60px -30px rgba(8, 10, 18, .9);
    text-align: center;
}

.hh-chooser__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hh-muted);
}

.hh-chooser__ram {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.hh-chooser__ram strong {
    font-family: var(--hh-display);
    font-style: italic;
    font-weight: 800;
    font-size: 84px;
    line-height: 1;
    color: var(--ch);
    font-variant-numeric: tabular-nums;
}

.hh-chooser__ram strong.is-bump {
    animation: hh-bump .35s var(--hh-ease);
}

@keyframes hh-bump {
    0% {
        transform: translateY(8px);
        opacity: .3;
    }
}

.hh-chooser__ram span {
    font-size: 16px;
    font-weight: 600;
    color: var(--hh-text);
}

.hh-chooser__meter {
    height: 6px;
    margin: 21px 0 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.hh-chooser__meter i {
    display: block;
    height: 100%;
    width: 20%;
    border-radius: 3px;
    background: var(--ch);
    transition: width .5s var(--hh-ease);
}

.hh-chooser__summary {
    margin: 14px 0 24px !important;
    font-size: 14px;
    color: var(--hh-muted);
    min-height: 1.6em;
}

/* the advised plan: its name and price, read from the plans below */
.hh-chooser__plan {
    display: grid;
    gap: 2px;
    margin: -8px 0 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(242, 135, 17, .08);
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
}

.hh-chooser__plan[hidden],
.hh-chooser__view[hidden] {
    display: none;
}

.hh-chooser__plan span {
    font-size: 12.5px;
    color: var(--hh-muted);
}

.hh-chooser__plan strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--hh-text);
}

.hh-chooser__plan em {
    font-style: normal;
    font-size: 14px;
    color: var(--hh-text);
    opacity: .85;
}

.hh-chooser__view {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hh-muted) !important;
}

.hh-chooser__view:hover {
    color: var(--hh-text) !important;
    text-decoration: underline;
}

.hh-chooser__result small {
    display: block;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--hh-dim);
}

.hh-chooser__result small a {
    color: var(--hh-accent);
    font-weight: 600;
}

.hh-chooser__result small a:hover {
    color: var(--hh-accent-hover);
    text-decoration: underline;
}

.hh-chooser .hh-btn i.fa-arrow-down {
    transition: transform .25s var(--hh-ease);
}

.hh-chooser .hh-btn:hover i.fa-arrow-down {
    transform: translateY(2px);
}

/* the plan the advice points to (class set by hh.js on the order form's plan box) */
.hh-pick {
    box-shadow: 0 0 0 2px var(--hh-accent), 0 18px 40px -18px rgba(242, 135, 17, .55) !important;
    border-color: transparent !important;
    transition: box-shadow .3s;
}

/* --- themed backdrop: one picture per game --- */
.hh-chooser__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hh-chooser__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
}

.hh-chooser[data-theme="fivem"] .hh-chooser__bg img {
    object-position: 70% 88%;
}

.hh-chooser__bg::after {
    /* keeps the questions readable; the picture shows through on the right */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28, 32, 48, .97) 0%, rgba(28, 32, 48, .9) 40%, rgba(28, 32, 48, .42) 100%);
}

/* --- Minecraft look: pixel type, blocky buttons, an XP-style bar --- */
.hh-chooser[data-theme="mc"] {
    --ch: #7ed957;
    --ch-soft: rgba(126, 217, 87, .14);
    --ch-line: rgba(126, 217, 87, .5);
}

.hh-chooser[data-theme="mc"] .hh-h2 {
    font-family: 'Pixelify Sans', var(--hh-font);
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}

.hh-chooser[data-theme="mc"] .hh-chip {
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--hh-line-2), inset 0 -3px 0 rgba(0, 0, 0, .28);
}

.hh-chooser[data-theme="mc"] .hh-chip.is-active {
    box-shadow: inset 0 0 0 2px var(--ch-line), inset 0 -3px 0 rgba(0, 0, 0, .28);
}

.hh-chooser[data-theme="mc"] .hh-chooser__result {
    border-radius: 8px;
}

.hh-chooser[data-theme="mc"] .hh-chip--card>i {
    border-radius: 3px;
}

.hh-chooser[data-theme="mc"] .hh-chooser__meter {
    position: relative;
    height: 12px;
    margin: 18px 0 0;
    border-radius: 0;
    background: #15171f;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
}

.hh-chooser[data-theme="mc"] .hh-chooser__meter i {
    border-radius: 0;
    background: linear-gradient(180deg, #a6f27c, #5fbf3a);
}

.hh-chooser[data-theme="mc"] .hh-chooser__meter::after {
    /* XP-bar notches */
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 0, 0, .45) 14px 16px);
}

/* --------------------------------------------------------------------------
   LOCATION — flat world map with the Amsterdam pin
   -------------------------------------------------------------------------- */
.hh-location {
    position: relative;
    overflow: hidden;
    padding: 170px 0;
    background: var(--hh-bg-alt);
    border-top: 1px solid var(--hh-line);
    border-bottom: 1px solid var(--hh-line);
}

.hh-location__map {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(1500px, 118%);
    aspect-ratio: 2000 / 789;
    transform: translate(-36%, -41%);
    opacity: .8;
    pointer-events: none;
}

.hh-location__map img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 52% 45%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 70% at 52% 45%, #000 45%, transparent 100%);
}

.hh-location::before {
    /* keeps the copy readable where it sits over the Americas */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, var(--hh-bg-alt) 0%, rgba(28, 32, 48, .85) 30%, rgba(28, 32, 48, 0) 55%);
}

.hh-location__pin {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 0;
}

.hh-location__pin i {
    position: absolute;
    left: -7px;
    top: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--hh-accent);
    box-shadow: 0 0 0 4px rgba(242, 135, 17, .2), 0 0 24px 6px rgba(242, 135, 17, .45);
}

.hh-location__pin i::before,
.hh-location__pin i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--hh-accent);
    animation: hh-pin 2.8s ease-out infinite;
}

.hh-location__pin i::after {
    animation-delay: 1.4s;
}

@keyframes hh-pin {
    from {
        transform: scale(1);
        opacity: .8;
    }

    to {
        transform: scale(5);
        opacity: 0;
    }
}

.hh-location__pin em {
    position: absolute;
    left: 18px;
    top: -15px;
    padding: 5px 11px;
    border-radius: 8px;
    background: rgba(40, 45, 64, .9);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--hh-text);
    white-space: nowrap;
}

.hh-location__inner {
    position: relative;
    z-index: 2;
}

.hh-location__copy {
    max-width: 460px;
}

.hh-location__copy p {
    margin-top: 18px !important;
    color: var(--hh-muted);
    font-size: 17px;
}

.hh-location__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 40px;
    margin: 48px 0 0;
}

.hh-location__stats div {
    display: flex;
    flex-direction: column;
}

.hh-location__stats dt {
    order: 2;
    font-size: 14px;
    font-weight: 400;
    color: var(--hh-muted);
}

.hh-location__stats dd {
    order: 1;
    margin: 0 0 2px;
    font-family: var(--hh-display);
    font-style: italic;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
}

.hh-location__stats dd small {
    font-size: .45em;
    margin-left: 4px;
    color: var(--hh-accent);
}

/* --------------------------------------------------------------------------
   WHY — one sentence, phrases switch the detail line below
   -------------------------------------------------------------------------- */
.hh-say {
    max-width: 1040px;
    margin: 0 auto;
}

.hh-say__text {
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.32;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--hh-dim);
    margin: 0;
}

.hh-say__key {
    all: unset;
    cursor: pointer;
    color: var(--hh-text);
    border-radius: 6px;
    background: linear-gradient(var(--hh-accent), var(--hh-accent)) 0 100% / 0 3px no-repeat;
    padding-bottom: 2px;
    transition: background-size .35s var(--hh-ease), color .25s;
}

.hh-say__key:hover,
.hh-say__key:focus-visible,
.hh-say__key.is-active {
    background-size: 100% 3px;
}

.hh-say__key:focus-visible {
    outline: 2px solid var(--hh-accent-line);
    outline-offset: 4px;
}

.hh-say__detail {
    position: relative;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--hh-line-2);
    min-height: 96px;
}

.hh-say__item {
    position: absolute;
    inset: 28px 0 auto 0;
    display: flex;
    gap: 18px;
    align-items: center;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .3s var(--hh-ease), transform .3s var(--hh-ease);
}

.hh-say__item.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.hh-say__ico {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--hh-accent);
    background: var(--hh-accent-soft);
    font-size: 18px;
}

.hh-say__item h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 4px !important;
}

.hh-say__item p {
    margin: 0;
    color: var(--hh-muted);
    font-size: 16px;
}

@media (max-width: 575px) {
    .hh-say__detail {
        min-height: 130px;
    }
}

/* --------------------------------------------------------------------------
   REVIEWS — endless marquee (moves left → right, pauses on hover)
   -------------------------------------------------------------------------- */
.hh-trust {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font-size: 14px;
    color: var(--hh-muted) !important;
    text-decoration: none !important;
    transition: box-shadow .2s;
}

.hh-trust:hover {
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
}

.hh-trust strong {
    color: var(--hh-text);
}

.hh-trust .fa-arrow-right {
    font-size: 12px;
    color: var(--hh-accent);
}

.hh-rmarquee {
    overflow: hidden;
    padding: 8px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hh-rmarquee__track {
    display: flex;
    width: max-content;
    animation: hh-marquee 70s linear infinite;
}

.hh-rmarquee:hover .hh-rmarquee__track {
    animation-play-state: paused;
}

.hh-rmarquee__set {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

@keyframes hh-marquee {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.hh-review {
    width: 400px;
    flex: none;
    margin: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: var(--hh-radius-lg);
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    transition: box-shadow .3s, transform .3s var(--hh-ease);
}

.hh-review:hover {
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
    transform: translateY(-3px);
}

.hh-review blockquote {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--hh-text-2);
    flex: 1;
}

.hh-review figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--hh-line);
    font-size: 15px;
}

.hh-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hh-accent-soft);
    color: var(--hh-accent);
    font-weight: 700;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.hh-section--cta {
    padding: 130px 0;
}

.hh-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 64px;
    border-radius: 24px;
    background: radial-gradient(70% 140% at 100% 0%, rgba(242, 135, 17, .16), transparent 60%), var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

.hh-cta p {
    color: var(--hh-muted);
    font-size: 17px;
    margin-top: 10px !important;
}

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

/* CTA over a photo */
.hh-cta--photo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hh-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-cta--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(33, 37, 53, .96) 0%, rgba(33, 37, 53, .86) 55%, rgba(33, 37, 53, .6));
}

/* --------------------------------------------------------------------------
   PRODUCT PAGE — the plans of one product group
   (templates/orderforms/hercul_new/products.tpl)
   -------------------------------------------------------------------------- */
/* The top of the page is a banner: one rounded panel inside the page width, copy on the
   left, the product art on a lit, dotted right half.
   Optional photo ("bg" in includes/hh-config.tpl): products.tpl sets --hh-phero-photo on the
   section and adds .hh-phero--photo. The photo is already small and blurred
   (_source/banner_photo.py) and lies between the colour wash and the glow, so the glow and
   the dots stay on top. Without a photo both layers are "none". */
.hh-phero {
    position: relative;
    padding: 40px 0 72px;
    background: var(--hh-bg);
}

.hh-phero--photo {
    --hh-phero-wash: linear-gradient(100deg, rgba(40, 45, 64, .9) 0%, rgba(38, 43, 62, .74) 45%, rgba(43, 49, 72, .5) 100%);
}

.hh-phero__inner>* {
    position: relative;
}

.hh-phero__inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: center;
    gap: 48px;
    min-height: 320px;
    padding: 56px 64px;
    border-radius: 24px;
    background:
        radial-gradient(42% 90% at 82% 50%, rgba(98, 114, 174, .34), transparent 70%),
        radial-gradient(22% 50% at 82% 64%, rgba(242, 135, 17, .10), transparent 70%),
        var(--hh-phero-wash, none),
        var(--hh-phero-photo, none) center / cover no-repeat,
        linear-gradient(100deg, var(--hh-surface) 0%, #262b3e 55%, #2b3148 100%);
    box-shadow: inset 0 0 0 1px var(--hh-line-2), 0 30px 60px -30px rgba(8, 10, 18, .7);
}

.hh-phero__inner::before {
    /* dotted texture, fading in towards the art */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(rgba(176, 188, 222, .16) 1.2px, transparent 1.4px) 0 0 / 16px 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 85%);
    mask-image: linear-gradient(90deg, transparent 35%, #000 85%);
}

.hh-phero__inner::after {
    /* thin light along the top edge */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18) 50%, transparent);
}

.hh-phero__copy:only-child {
    grid-column: 1 / -1;
}

.hh-phero .hh-h2 {
    font-size: clamp(36px, 4.2vw, 56px);
}

.hh-phero .hh-head__sub {
    font-size: 18px;
    max-width: 600px;
}

.hh-ticks--row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin-top: 30px;
}

.hh-phero__art {
    display: grid;
    place-items: center;
    height: 208px;
}

.hh-phero__art img {
    height: 208px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(8, 10, 18, .6));
}

.hh-phero__art--colocation img {
    filter: brightness(1.45) drop-shadow(0 24px 30px rgba(8, 10, 18, .6));
}

/* the rack is black on a dark page */

/* Full-width variant (hhBannerWide in includes/hh-config.tpl adds body.hh-banner-wide): the band
   runs from edge to edge right under the navbar and the copy lines up with the plans below.
   The glow sits where the art is: 340px right of the centre of the 1240px page width. */
body.hh-banner-wide .hh-phero {
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    margin-bottom: 72px;
    background:
        radial-gradient(560px 300px at calc(50% + 340px) 50%, rgba(98, 114, 174, .34), transparent 70%),
        radial-gradient(280px 160px at calc(50% + 340px) 64%, rgba(242, 135, 17, .10), transparent 70%),
        var(--hh-phero-wash, none),
        var(--hh-phero-photo, none) center / cover no-repeat,
        linear-gradient(100deg, var(--hh-surface) 0%, #262b3e 55%, #2b3148 100%);
    box-shadow: inset 0 -1px 0 var(--hh-line-2);
}

body.hh-banner-wide .hh-phero::before {
    /* dotted texture, fading in towards the art */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(rgba(176, 188, 222, .16) 1.2px, transparent 1.4px) 0 0 / 16px 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 90%);
    mask-image: linear-gradient(90deg, transparent 40%, #000 90%);
}

body.hh-banner-wide .hh-phero__inner {
    isolation: auto;
    overflow: visible;
    padding: 64px 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

body.hh-banner-wide .hh-phero__inner::before,
body.hh-banner-wide .hh-phero__inner::after {
    display: none;
}

@media (max-width: 991px) {
    body.hh-banner-wide .hh-phero {
        margin-bottom: 56px;
    }

    body.hh-banner-wide .hh-phero__inner {
        padding: 48px 0;
    }
}

@media (max-width: 767px) {
    body.hh-banner-wide .hh-phero {
        margin-bottom: 44px;
        background: radial-gradient(80% 60% at 100% 0%, rgba(98, 114, 174, .30), transparent 70%), var(--hh-phero-wash, none), var(--hh-phero-photo, none) center / cover no-repeat, linear-gradient(160deg, var(--hh-surface), #262b3e);
    }

    body.hh-banner-wide .hh-phero::before {
        -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%);
        mask-image: linear-gradient(200deg, #000, transparent 60%);
    }

    body.hh-banner-wide .hh-phero__inner {
        padding: 36px 0 40px;
    }

    .hh-phero--photo {
        --hh-phero-wash: linear-gradient(160deg, rgba(40, 45, 64, .8), rgba(38, 43, 62, .88));
    }
}

.hh-store {
    padding: 0 0 140px;
}

.hh-store .hh-chooser {
    margin-bottom: 80px;
}

.hh-store .hh-store__title {
    margin-bottom: 28px;
}

.hh-note {
    margin-bottom: 28px;
    padding: 16px 20px;
    border-radius: var(--hh-radius);
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
    color: var(--hh-text);
    font-size: 15px;
}

.hh-note--error {
    background: rgba(239, 83, 80, .1);
    box-shadow: inset 0 0 0 1px rgba(239, 83, 80, .4);
}

.hh-offers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.hh-offers--few {
    grid-template-columns: repeat(auto-fit, minmax(0, 400px));
}

/* one or two plans: keep card width */
.hh-offer {
    --mx: 50%;
    --my: 50%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 24px;
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    transition: transform .45s var(--hh-ease), box-shadow .3s, opacity .7s var(--hh-ease);
}

.hh-offer::before {
    border-radius: inherit;
}

/* the card does not clip (the tags stick out), so round the spotlight */
.hh-offer:hover {
    transform: translateY(-4px);
}

.hh-offer--hot {
    box-shadow: inset 0 0 0 1px var(--hh-accent-line), 0 30px 60px -30px rgba(242, 135, 17, .35);
}

.hh-offer__art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 92px;
    margin: 4px 0 22px;
}

.hh-offer__art img {
    width: 100%;
    max-width: 300px;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(8, 10, 18, .55));
    transition: transform .6s var(--hh-ease);
}

.hh-offer:hover .hh-offer__art img {
    transform: translateY(-3px);
}

.hh-offer h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* plan name with the game / service logo in front of it */
.hh-offer__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hh-offer__name {
    flex: 1;
    min-width: 0;
}

.hh-offer__logo {
    order: 2;
    /* logo on the right, the plan name on the left */
    flex: 0 0 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: var(--hh-text);
    font-size: 40px;
}

.hh-offer__logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(8, 10, 18, .55));
    transition: transform .4s var(--hh-ease);
}

.hh-offer:hover .hh-offer__logo img {
    transform: translateY(-2px) scale(1.06);
}

.hh-offer__tags {
    position: absolute;
    top: 0;
    right: 24px;
    z-index: 1;
    display: flex;
    gap: 6px;
    transform: translateY(-50%);
}

.hh-offer__advice {
    display: none;
}

/* shown on the plan the game chooser advises */
.hh-offer.hh-pick .hh-offer__advice {
    display: inline-block;
}

/* product picture on the right of the name + price ("cardart" in hh-config.tpl) */
.hh-offer__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hh-offer__main {
    flex: 1;
    min-width: 0;
}

.hh-offer__pic {
    flex: 0 0 116px;
    margin-right: -6px;
}

.hh-offer__pic img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 14px rgba(8, 10, 18, .5));
    transition: transform .6s var(--hh-ease);
}

.hh-offer:hover .hh-offer__pic img {
    transform: translateY(-3px);
}

@media (max-width: 400px) {
    .hh-offer__pic {
        flex-basis: 84px;
    }
}

.hh-offer__tagline {
    margin-top: 4px !important;
    color: var(--hh-muted);
    font-size: 14.5px;
}

.hh-offer__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-top: 18px;
}

.hh-offer__price strong {
    font-family: var(--hh-font);
    font-weight: 700;
    letter-spacing: -.03em;
    font-size: 34px;
    line-height: 1;
}

.hh-offer__price small {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--hh-muted);
}

/* stays inside the price line, so a card without it (custom colocation) lines up */
.hh-offer__price small:first-child {
    flex-basis: 100%;
}

/* "Starting from" / "Bundle deal": its own line above the price */
.hh-offer__setup {
    flex-basis: 100%;
    margin-top: 6px;
    font-size: 13px;
    color: var(--hh-dim);
}

.hh-offer__desc {
    flex: 1;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--hh-line);
}

.hh-offer__desc .hh-ticks {
    margin: 0;
    gap: 12px;
}

.hh-offer__desc .hh-ticks+.hh-ticks {
    margin-top: 10px;
}

.hh-offer__desc .hh-ticks li {
    font-size: 14.5px;
}

.hh-offer__desc .hh-ticks strong {
    color: var(--hh-text);
    font-weight: 600;
}

/* feature icons, added by js/hh.js from the words in each line */
.hh-offer__desc .hh-ticks li.has-icon {
    padding-left: 38px;
    min-height: 26px;
    padding-top: 2px;
}

.hh-offer__desc .hh-ticks li.has-icon::before {
    display: none;
}

.hh-tick__icon {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: var(--hh-accent);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font-size: 12px;
}

.hh-tick__icon i {
    line-height: 1;
}

.hh-offer__qty {
    margin-top: 16px !important;
    font-size: 13px;
    color: var(--hh-dim);
}

.hh-offer .hh-btn {
    margin-top: 26px;
}

.hh-offer:hover .hh-btn--ghost {
    background: rgba(255, 255, 255, .11);
}

.hh-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.hh-included {
    margin-top: 88px;
    padding-top: 64px;
    border-top: 1px solid var(--hh-line);
}

.hh-included .hh-ticks--row {
    margin-top: 26px;
}

/* FAQ (includes/hh-faq.tpl): native <details>, two columns, each question opens on its own */
.hh-faq {
    margin-top: 88px;
    padding-top: 64px;
    border-top: 1px solid var(--hh-line);
}

.hh-faq__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
    margin-top: 32px;
}

.hh-faq__item {
    border-radius: var(--hh-radius);
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    transition: box-shadow .2s var(--hh-ease);
}

.hh-faq__item:hover,
.hh-faq__item[open] {
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

.hh-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--hh-text);
    cursor: pointer;
    list-style: none;
    border-radius: var(--hh-radius);
}

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

.hh-faq__item summary:focus-visible {
    outline: 2px solid var(--hh-accent);
    outline-offset: 2px;
}

.hh-faq__item summary i {
    flex: none;
    font-size: 13px;
    color: var(--hh-muted);
    transition: transform .25s var(--hh-ease), color .2s;
}

.hh-faq__item[open] summary i {
    transform: rotate(180deg);
    color: var(--hh-accent);
}

.hh-faq__item p {
    padding: 0 24px 22px;
    color: var(--hh-muted);
    line-height: 1.65;
}

/* VPS panel (VPS product page only, includes/hh-vpspanel.tpl): copy left, screenshots right */
.hh-vpanel {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 56px;
    margin-top: 88px;
    padding-top: 72px;
    border-top: 1px solid var(--hh-line);
}

.hh-vpanel .hh-head__sub {
    max-width: 480px;
}

.hh-vpanel .hh-vpanel__open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    color: var(--hh-accent);
}

.hh-vpanel__open i {
    font-size: 12px;
    transition: transform .25s var(--hh-ease);
}

.hh-vpanel .hh-vpanel__open:hover {
    color: var(--hh-accent-hover);
}

.hh-vpanel__open:hover i {
    transform: translateX(3px);
}

.hh-vpanel__frame {
    position: relative;
    border-radius: var(--hh-radius-lg);
    overflow: hidden;
    background: #090d11;
    /* the panel's own background */
    box-shadow: inset 0 0 0 1px var(--hh-line), 0 40px 80px -40px rgba(8, 10, 18, .9);
}

.hh-vpanel__slides {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hh-vpanel__slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity .5s var(--hh-ease);
}

.hh-vpanel__slide.is-active {
    opacity: 1;
}

.hh-vpanel__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: left top;
}

.hh-vpanel__frame::after {
    /* hairline on top of the screenshot */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    pointer-events: none;
}

.hh-vpanel__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(24, 27, 39, .82);
    color: var(--hh-text);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s, background .2s;
}

.hh-vpanel__arrow--prev {
    left: 14px;
}

.hh-vpanel__arrow--next {
    right: 14px;
}

.hh-vpanel__frame:hover .hh-vpanel__arrow,
.hh-vpanel__arrow:focus-visible {
    opacity: 1;
}

.hh-vpanel__arrow:hover {
    background: rgba(40, 45, 64, .95);
}

.hh-vpanel__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

/* colocation page (includes/hh-colo.tpl): a photo instead of the slider, two panels in a row */
.hh-vpanel__frame--photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.hh-vpanel+.hh-vpanel {
    margin-top: 72px;
}

.hh-vpanel__tabs button {
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hh-muted);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font: 600 13.5px/1.2 var(--hh-font);
    cursor: pointer;
    transition: color .2s, background .2s, box-shadow .2s;
}

.hh-vpanel__tabs button:hover {
    color: var(--hh-text);
}

.hh-vpanel__tabs button.is-active {
    color: var(--hh-text);
    background: var(--hh-accent-soft);
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
}

@media (hover: none) {
    .hh-vpanel__arrow {
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .hh-vpanel {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        margin-top: 64px;
        padding-top: 56px;
    }
}

@media (max-width: 575px) {
    .hh-vpanel__arrow {
        width: 34px;
        height: 34px;
        margin-top: -17px;
    }

    .hh-vpanel__arrow--prev {
        left: 8px;
    }

    .hh-vpanel__arrow--next {
        right: 8px;
    }
}

/* Product page extras: game panel, cPanel, custom dedicated, custom colocation */
/* game panel (includes/hh-gamepanel.tpl): text, ticks and a link in the copy */
.hh-vpanel__copy .hh-head__sub+.hh-ticks {
    margin-top: 26px;
}

/* cPanel (includes/hh-cpanel.tpl): the tools as small tiles, two columns */
.hh-vpanel--tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

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

.hh-tools__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--hh-radius);
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.hh-tools__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: var(--hh-accent);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font-size: 14px;
}

/* colocation: the "custom" card after the WHMCS plans, a rack instead of a 1U / 2U server */
.hh-offer__art--rack img {
    filter: brightness(1.45) drop-shadow(0 14px 16px rgba(8, 10, 18, .55));
}

/* dedicated: "custom dedicated server", a wide card below the plans */
.hh-custom {
    --mx: 50%;
    --my: 50%;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    align-items: center;
    gap: 48px;
    margin-top: 20px;
    padding: 44px 56px;
    border-radius: 24px;
    background: radial-gradient(38% 90% at 84% 50%, rgba(98, 114, 174, .24), transparent 70%), var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
}

.hh-custom::before {
    border-radius: inherit;
}

.hh-custom .hh-h2 {
    font-size: clamp(26px, 2.4vw, 32px);
}

.hh-custom .hh-head__sub {
    margin-top: 12px !important;
    font-size: 16.5px;
}

.hh-custom .hh-btn {
    margin-top: 28px;
}

.hh-custom__art img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 22px rgba(8, 10, 18, .6));
    transition: transform .6s var(--hh-ease);
}

.hh-custom:hover .hh-custom__art img {
    transform: translateY(-3px);
}

@media (max-width: 991px) {
    .hh-vpanel--tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-custom {
        grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
        gap: 32px;
        padding: 40px;
    }
}

@media (max-width: 767px) {
    .hh-custom {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 28px 24px;
    }

    .hh-custom__art {
        order: -1;
        max-width: 220px;
    }

    .hh-custom .hh-btn {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .hh-tools {
        gap: 10px;
    }

    .hh-tools__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        font-size: 14px;
    }
}

/* Safety net: should WHMCS not tell the theme which order form is active, the page is drawn
   inside the standard layout. Keep it readable there as one dark panel. */
body.hh-inner .hh-phero,
body.hh-inner .hh-store {
    background: var(--hh-bg);
    color: var(--hh-text);
    font-family: var(--hh-font);
}

body.hh-inner .hh-phero {
    padding: 24px 8px 40px;
    border-radius: 24px 24px 0 0;
}

body.hh-inner .hh-store {
    padding: 0 8px 56px;
    border-radius: 0 0 24px 24px;
}

body.hh-inner .hh-phero h1,
body.hh-inner .hh-store h2,
body.hh-inner .hh-store h3 {
    margin: 0;
    color: var(--hh-text);
}

body.hh-inner .hh-phero p,
body.hh-inner .hh-store p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   ALL GAME SERVERS PAGE (includes/hh-games-all.tpl)
   The banner (above), a "popular" row of big cards with a wide picture (includes/hh-plan.tpl
   with hhPhoto), all games as small cards with a category filter (js/hh.js,
   initGameFilter) and a "not listed?" box (the CTA above). Also the "All game servers"
   link at the bottom of the game column in the mega menu and the mobile drawer (header.tpl).
   -------------------------------------------------------------------------- */
/* link in the banner's tick row (game panel) */
.hh-ticks__link {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--hh-line-2);
    transition: color .2s, border-color .2s;
}

.hh-ticks__link:hover {
    color: var(--hh-text) !important;
    border-bottom-color: var(--hh-accent-line);
}

/* popular: three cards with a picture on top and the product picture on it */
.hh-games__pop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.hh-plan--photo .hh-plan__stage {
    height: 220px;
    padding-top: 0;
    overflow: hidden;
    background: var(--hh-bg-deep);
    border: 0;
    -webkit-mask-image: none;
    mask-image: none;
}

.hh-plan--photo .hh-plan__stage::after {
    /* the picture fades into the card */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(24, 27, 39, .12) 0%, rgba(24, 27, 39, .28) 50%, var(--hh-surface) 100%);
}

.hh-plan--photo .hh-plan__stage .hh-plan__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    filter: none;
    transition: transform .9s var(--hh-ease);
}

.hh-plan--photo:hover .hh-plan__stage .hh-plan__photo {
    transform: scale(1.04);
}

.hh-plan--photo .hh-plan__stage img:not(.hh-plan__photo),
.hh-plan--photo .hh-plan__glyph {
    position: relative;
    z-index: 1;
}

.hh-plan--photo .hh-plan__stage img:not(.hh-plan__photo) {
    height: 124px;
}

.hh-plan--photo .hh-plan__stage .hh-tag {
    z-index: 2;
}

.hh-plan--photo .hh-plan__body {
    padding-top: 22px;
}

.hh-plan--photo .hh-plan__body>p {
    margin-bottom: 26px;
}

.hh-plan--photo .hh-plan__body>p+.hh-btn {
    margin-top: auto;
}

/* no price: button stays at the bottom */

/* all games: heading with the filter on the right, then the small cards */
.hh-games__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 32px;
    margin: 112px 0 28px;
}

.hh-games__head .hh-plans__group {
    margin: 0;
}

.hh-games__chips {
    --ch: var(--hh-accent);
    --ch-soft: var(--hh-accent-soft);
    --ch-line: var(--hh-accent-line);
}

.hh-games__chips[hidden] {
    display: none;
}

.hh-games__chips .hh-chip {
    padding: 9px 16px;
}

.hh-games__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.hh-gtile {
    --mx: 50%;
    --my: 50%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 20px;
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text) !important;
    text-decoration: none !important;
    transition: transform .45s var(--hh-ease), opacity .7s var(--hh-ease);
}

.hh-gtile[hidden] {
    display: none;
}

.hh-gtile::before {
    border-radius: inherit;
}

.hh-gtile:hover {
    transform: translateY(-3px);
}

.hh-gtile__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

.hh-gtile__art {
    flex: 0 0 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background:
        radial-gradient(60% 60% at 50% 60%, rgba(242, 135, 17, .14), transparent 70%),
        radial-gradient(rgba(176, 188, 222, .16) 1.2px, transparent 1.4px) 0 0 / 10px 10px,
        var(--hh-bg-alt);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font-size: 26px;
    color: var(--hh-text);
}

.hh-gtile__art img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(8, 10, 18, .55));
    transition: transform .6s var(--hh-ease);
}

.hh-gtile:hover .hh-gtile__art img {
    transform: translateY(-2px) scale(1.06);
}

.hh-gtile__price {
    padding: 6px 10px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font-family: var(--hh-font);
    font-weight: 700;
    letter-spacing: -.03em;
    font-size: 19px;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

.hh-gtile__price small {
    display: block;
    margin-bottom: 2px;
    font-family: var(--hh-font);
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--hh-muted);
}

.hh-gtile__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.hh-gtile__cat {
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--hh-muted);
}

.hh-gtile__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hh-text-2);
    transition: color .2s;
}

.hh-gtile__go i {
    font-size: 11px;
    color: var(--hh-muted);
    transition: transform .3s var(--hh-ease), color .2s;
}

.hh-gtile:hover .hh-gtile__go {
    color: var(--hh-text);
}

.hh-gtile:hover .hh-gtile__go i {
    color: var(--hh-accent);
    transform: translateX(3px);
}

/* not listed? */
.hh-games__ask {
    margin-top: 112px;
}


@media (max-width: 991px) {
    .hh-games__pop {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-games__head {
        margin-top: 88px;
    }

    .hh-games__ask {
        margin-top: 88px;
    }
}

/* tablet: one big card per row, picture on the left */
@media (min-width: 576px) and (max-width: 991px) {
    .hh-games__pop .hh-plan {
        flex-direction: row;
    }

    .hh-plan--photo .hh-plan__stage {
        flex: 0 0 42%;
        height: auto;
        min-height: 260px;
    }

    .hh-plan--photo .hh-plan__stage::after {
        background: linear-gradient(90deg, rgba(24, 27, 39, .12) 0%, rgba(24, 27, 39, .28) 55%, var(--hh-surface) 100%);
    }
}

@media (max-width: 575px) {
    .hh-plan--photo .hh-plan__stage {
        height: 190px;
    }

    .hh-plan--photo .hh-plan__stage img:not(.hh-plan__photo) {
        height: 104px;
    }

    .hh-plan--photo .hh-plan__body {
        padding: 20px 22px 24px;
    }

    .hh-games__head {
        margin-bottom: 22px;
    }

    .hh-games__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .hh-gtile {
        padding: 16px;
        border-radius: 18px;
    }

    .hh-gtile__top {
        margin-bottom: 16px;
    }

    .hh-gtile__art {
        flex-basis: 50px;
        height: 50px;
        border-radius: 12px;
        font-size: 22px;
    }

    .hh-gtile__art img {
        width: 36px;
        height: 36px;
    }

    .hh-gtile__price {
        padding: 5px 8px 6px;
        font-size: 17px;
    }

    .hh-gtile__name {
        font-size: 16px;
    }

    .hh-gtile__go {
        padding-top: 14px;
        font-size: 13.5px;
    }
}

/* --------------------------------------------------------------------------
   ABOUT US (about.tpl)
   The product-page banner with three numbers on the right, then two rows of three cards
   with the photo block of the product pages (.hh-vpanel) in between.
   -------------------------------------------------------------------------- */
.hh-about__stats {
    display: flex;
    justify-content: flex-end;
    gap: 48px;
    margin: 0;
}

.hh-about__stats div {
    display: flex;
    flex-direction: column;
}

.hh-about__stats dt {
    order: 2;
    font-size: 14px;
    font-weight: 400;
    color: var(--hh-muted);
}

.hh-about__stats dd {
    order: 1;
    margin: 0 0 4px;
    font-family: var(--hh-display);
    font-style: italic;
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
}

.hh-about {
    padding: 0 0 140px;
}

.hh-about .hh-head {
    max-width: 780px;
    margin-bottom: 48px;
}

.hh-about .hh-head .hh-h2 {
    text-wrap: balance;
}

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

.hh-about__card {
    padding: 30px;
    border-radius: var(--hh-radius-lg);
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
}

.hh-about__card:nth-child(2) {
    --d: .08s;
}

.hh-about__card:nth-child(3) {
    --d: .16s;
}

.hh-about__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: var(--hh-accent);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    font-size: 17px;
}

.hh-about__card h3 {
    margin: 0 0 8px !important;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.hh-about__card p {
    margin: 0;
    color: var(--hh-muted);
    font-size: 15.5px;
    line-height: 1.65;
}

.hh-about__what {
    margin: 112px 0;
    padding-top: 0;
    border-top: 0;
}

.hh-about__what .hh-btn {
    margin-top: 30px;
}

.hh-about__why {
    margin-top: 0;
}

@media (max-width: 991px) {
    .hh-phero__inner--stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .hh-about__stats {
        justify-content: flex-start;
    }

    .hh-about__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .hh-about__what {
        margin: 80px 0;
        padding-top: 0;
    }

    .hh-about {
        padding-bottom: 100px;
    }
}

@media (max-width: 575px) {
    .hh-about__stats {
        gap: 28px;
    }

    .hh-about__stats dd {
        font-size: 42px;
    }

    .hh-about__card {
        padding: 24px;
    }
}

/* --------------------------------------------------------------------------
   CLIENT AREA — every page that keeps the WHMCS layout (body.hh-app, see hhApp in
   includes/hh-config.tpl): dashboard, services, invoices, tickets, knowledgebase,
   account pages and the sign-in pages. These pages keep their WHMCS / Bootstrap
   markup; this block gives that markup the dark look. It covers the page content
   (#main-body: sidebar + content) and the pop-ups (.modal).
   -------------------------------------------------------------------------- */
body.hh-app {
    background: var(--hh-bg);
    color: var(--hh-text);
    font-family: var(--hh-font);
    -webkit-font-smoothing: antialiased;
}

body.hh-app section#main-body {
    padding: 32px 0 24px;
    min-height: calc(100vh - var(--hh-nav-h) - 180px);
}

body.hh-app .hh-footer {
    margin-top: 40px;
}

body.hh-app .master-breadcrumb {
    background: transparent;
    border-bottom: 1px solid var(--hh-line);
}

body.hh-app .master-breadcrumb .breadcrumb {
    padding: 13px 0;
    background: none;
    font-size: 13.5px;
}

body.hh-app .master-breadcrumb .breadcrumb-item,
body.hh-app .master-breadcrumb .breadcrumb-item a {
    color: var(--hh-muted);
}

body.hh-app .master-breadcrumb .breadcrumb-item a:hover,
body.hh-app .master-breadcrumb .breadcrumb-item.active {
    color: var(--hh-text);
}

body.hh-app .master-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--hh-dim);
}

/* drop-downs of the client menu bar */
.hh-subnav .dropdown-menu {
    margin-top: 14px;
    padding: 6px;
    min-width: 210px;
    background: var(--hh-popover);
    border: 1px solid var(--hh-line-2);
    border-radius: 12px;
    box-shadow: 0 24px 50px -20px rgba(8, 10, 18, .8);
}

.hh-subnav .dropdown-menu li.dropdown-item {
    padding: 0;
    border-radius: 8px;
    background: none;
}

.hh-subnav .dropdown-menu a.dropdown-item {
    padding: 8px 12px !important;
    border-radius: 8px;
    background: none;
    color: var(--hh-text-2);
    font-family: var(--hh-font);
    font-size: 14px;
}

.hh-subnav .dropdown-menu a.dropdown-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.hh-subnav .dropdown-menu .dropdown-divider {
    border-top-color: var(--hh-line);
}

/* text */
body.hh-app :is(#main-body, .modal) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--hh-text);
    letter-spacing: -.01em;
}

body.hh-app :is(#main-body, .modal) a {
    color: var(--hh-accent);
}

body.hh-app :is(#main-body, .modal) a:hover {
    color: var(--hh-accent-hover);
}

body.hh-app :is(#main-body, .modal) label {
    color: var(--hh-text-2);
    font-size: 14px;
    font-weight: 500;
}

body.hh-app :is(#main-body, .modal) hr {
    border-top-color: var(--hh-line);
}

body.hh-app :is(#main-body, .modal) :is(.text-muted, .text-black-50, .text-secondary) {
    color: var(--hh-muted) !important;
}

body.hh-app :is(#main-body, .modal) :is(.text-dark, .text-body) {
    color: var(--hh-text) !important;
}

body.hh-app :is(#main-body, .modal) .text-primary {
    color: var(--hh-accent) !important;
}

body.hh-app :is(#main-body, .modal) :is(.bg-light, .bg-white, .bg-default) {
    background-color: var(--hh-surface) !important;
}

body.hh-app :is(#main-body, .modal) :is(.border, .border-top, .border-bottom, .border-left, .border-right) {
    border-color: var(--hh-line) !important;
}

body.hh-app :is(#main-body, .modal) code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    color: #ffc98a;
}

body.hh-app :is(#main-body, .modal) pre {
    padding: 14px 16px;
    background: var(--hh-bg-deep);
    border: 1px solid var(--hh-line);
    border-radius: 12px;
    color: var(--hh-text-2);
}

body.hh-app :is(#main-body, .modal) pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.hh-page-head {
    margin-bottom: 24px;
}

.hh-page-head h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.hh-page-head p {
    margin: 6px 0 0;
    color: var(--hh-muted);
}

/* cards */
body.hh-app :is(#main-body, .modal) .card {
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 18px;
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .card> :first-child {
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
}

body.hh-app :is(#main-body, .modal) .card> :last-child {
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

body.hh-app :is(#main-body, .modal) .card-header {
    padding: 16px 20px;
    background: transparent;
    border-bottom: 1px solid var(--hh-line);
}

body.hh-app :is(#main-body, .modal) .card-footer {
    background: rgba(0, 0, 0, .12);
    border-top: 1px solid var(--hh-line);
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) .card-title {
    font-size: 18px;
    font-weight: 600;
}

/* lists and badges */
body.hh-app :is(#main-body, .modal) .list-group-item {
    background: transparent;
    border-color: var(--hh-line);
    color: var(--hh-text-2);
}

body.hh-app :is(#main-body, .modal) a.list-group-item:hover,
body.hh-app :is(#main-body, .modal) .list-group-item-action:hover,
body.hh-app :is(#main-body, .modal) .list-group-item-action:focus {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

body.hh-app :is(#main-body, .modal) .list-group-item.active,
body.hh-app :is(#main-body, .modal) .list-group-item.active:hover,
body.hh-app :is(#main-body, .modal) .list-group-item.active:focus {
    background: var(--hh-accent-soft);
    border-color: var(--hh-line);
    box-shadow: inset 2px 0 0 var(--hh-accent);
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .list-group-item.disabled {
    background: transparent;
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .badge {
    padding: .35em .7em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--hh-muted);
    font-weight: 600;
}

/* sidebar */
body.hh-app :is(#main-body, .modal) .sidebar .card-header {
    padding: 14px 18px;
}

body.hh-app :is(#main-body, .modal) .sidebar .card-title {
    font-size: 15px;
    font-weight: 600;
}

body.hh-app :is(#main-body, .modal) .sidebar .card-title>i:first-child {
    margin-right: 4px;
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .sidebar .card-minimise {
    margin-top: 4px;
    color: var(--hh-dim);
    font-size: 12px;
    cursor: pointer;
}

body.hh-app :is(#main-body, .modal) .sidebar .card-body {
    padding: 16px 18px;
    color: var(--hh-text-2);
    font-size: 14.5px;
}

body.hh-app :is(#main-body, .modal) .sidebar .list-group-item {
    padding: 11px 18px;
    font-size: 14.5px;
}

body.hh-app :is(#main-body, .modal) .sidebar .list-group-item>i.far.fa-circle {
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .sidebar .card-footer {
    padding: 12px 18px;
    background: transparent;
}

/* fields */
body.hh-app :is(#main-body, .modal) .form-control,
body.hh-app :is(#main-body, .modal) .custom-select,
body.hh-app #registration .form-control,
body.hh-app #registration .field {
    height: 46px;
    padding: 10px 14px;
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid var(--hh-line-2);
    border-radius: 12px;
    box-shadow: none;
    color: var(--hh-text);
    font-size: 15px;
    color-scheme: dark;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

body.hh-app :is(#main-body, .modal) textarea.form-control {
    height: auto;
}

body.hh-app :is(#main-body, .modal) select.form-control[multiple],
body.hh-app :is(#main-body, .modal) select.form-control[size] {
    height: auto;
}

body.hh-app :is(#main-body, .modal) .form-control-sm,
body.hh-app :is(#main-body, .modal) .custom-select-sm,
body.hh-app :is(#main-body, .modal) .input-group-sm>.form-control {
    height: 38px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
}

body.hh-app :is(#main-body, .modal) .form-control-lg,
body.hh-app :is(#main-body, .modal) .input-group-lg>.form-control {
    height: 54px;
    font-size: 17px;
}

body.hh-app :is(#main-body, .modal) .form-control::placeholder,
body.hh-app #registration .field::placeholder {
    color: var(--hh-dim);
    opacity: 1;
}

body.hh-app :is(#main-body, .modal) .form-control:focus,
body.hh-app :is(#main-body, .modal) .custom-select:focus,
body.hh-app #registration .form-control:focus,
body.hh-app #registration .field:focus {
    outline: 0;
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--hh-accent-line);
    box-shadow: 0 0 0 3px var(--hh-accent-soft);
}

body.hh-app :is(#main-body, .modal) .form-control:disabled,
body.hh-app :is(#main-body, .modal) .form-control[readonly],
body.hh-app :is(#main-body, .modal) .form-control.disabled {
    background-color: rgba(255, 255, 255, .02);
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) select option {
    background: var(--hh-surface);
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .form-text,
body.hh-app :is(#main-body, .modal) .help-block {
    color: var(--hh-muted);
}

/* the browser's own autofill colours would turn the field light blue */
body.hh-app :is(#main-body, .modal) input:-webkit-autofill,
body.hh-app :is(#main-body, .modal) input:-webkit-autofill:hover,
body.hh-app :is(#main-body, .modal) input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hh-text);
    -webkit-box-shadow: 0 0 0 1000px #2f3449 inset;
    caret-color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) input[type=checkbox],
body.hh-app :is(#main-body, .modal) input[type=radio] {
    accent-color: var(--hh-accent);
}

/* file picker */
body.hh-app :is(#main-body, .modal) .custom-file,
body.hh-app :is(#main-body, .modal) .custom-file-input {
    height: 46px;
}

body.hh-app :is(#main-body, .modal) .custom-file-label {
    height: 46px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--hh-line-2);
    border-radius: 12px;
    color: var(--hh-muted);
    font-size: 15px;
}

body.hh-app :is(#main-body, .modal) .custom-file-label::after {
    height: 44px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, .06);
    border-left: 1px solid var(--hh-line-2);
    border-radius: 0 11px 11px 0;
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .input-group>.custom-file:not(:last-child) .custom-file-label,
body.hh-app :is(#main-body, .modal) .input-group>.custom-file:not(:last-child) .custom-file-label::after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* field with an icon in front and/or a button behind it */
body.hh-app :is(#main-body, .modal) .input-group-text {
    padding: 0 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--hh-line-2);
    border-radius: 12px;
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .input-group-prepend .input-group-text {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.hh-app :is(#main-body, .modal) .input-group-append .input-group-text {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.hh-app :is(#main-body, .modal) .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.hh-app :is(#main-body, .modal) .input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* buttons: orange = the main action, everything else quiet */
body.hh-app :is(#main-body, .modal) .btn {
    padding: .72em 1.4em;
    border: 0;
    border-radius: 12px;
    font: 600 15px/1.2 var(--hh-font);
    transition: background-color .2s, color .2s, box-shadow .2s;
}

body.hh-app :is(#main-body, .modal) .btn-lg {
    padding: .95em 1.7em;
    border-radius: 14px;
    font-size: 16px;
}

body.hh-app :is(#main-body, .modal) .btn-sm {
    padding: .58em 1.05em;
    border-radius: 10px;
    font-size: 13.5px;
}

body.hh-app :is(#main-body, .modal) .btn-xs {
    padding: .45em .8em;
    border-radius: 8px;
    font-size: 12.5px;
}

body.hh-app :is(#main-body, .modal) :is(.btn-primary, .btn-success),
body.hh-app :is(#main-body, .modal) :is(.btn-primary, .btn-success):focus,
body.hh-app :is(#main-body, .modal) :is(.btn-primary, .btn-success):active {
    background: var(--hh-accent);
    color: var(--hh-on-accent);
    box-shadow: 0 8px 24px -10px rgba(242, 135, 17, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.hh-app :is(#main-body, .modal) :is(.btn-primary, .btn-success):hover {
    background: var(--hh-accent-hover);
    color: var(--hh-on-accent);
}

body.hh-app :is(#main-body, .modal) :is(.btn-default, .btn-secondary, .btn-info, .btn-light, .btn-warning, .btn-outline-primary, .btn-outline-secondary),
body.hh-app :is(#main-body, .modal) :is(.btn-default, .btn-secondary, .btn-info, .btn-light, .btn-warning, .btn-outline-primary, .btn-outline-secondary):focus,
body.hh-app :is(#main-body, .modal) :is(.btn-default, .btn-secondary, .btn-info, .btn-light, .btn-warning, .btn-outline-primary, .btn-outline-secondary):active {
    background: rgba(255, 255, 255, .06);
    color: var(--hh-text);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

body.hh-app :is(#main-body, .modal) :is(.btn-default, .btn-secondary, .btn-info, .btn-light, .btn-warning, .btn-outline-primary, .btn-outline-secondary):hover {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

body.hh-app :is(#main-body, .modal) .btn-danger,
body.hh-app :is(#main-body, .modal) .btn-danger:focus,
body.hh-app :is(#main-body, .modal) .btn-danger:active {
    background: rgba(239, 83, 80, .14);
    color: #ffb9b5;
    box-shadow: inset 0 0 0 1px rgba(239, 83, 80, .35);
}

body.hh-app :is(#main-body, .modal) .btn-danger:hover {
    background: rgba(239, 83, 80, .24);
    color: #ffd6d3;
}

body.hh-app :is(#main-body, .modal) .btn-link {
    padding-left: 0;
    padding-right: 0;
    background: none;
    box-shadow: none;
    color: var(--hh-accent);
}

body.hh-app :is(#main-body, .modal) .btn:disabled,
body.hh-app :is(#main-body, .modal) .btn[disabled],
body.hh-app :is(#main-body, .modal) .btn.disabled {
    opacity: .5;
    cursor: not-allowed;
}

body.hh-app :is(#main-body, .modal) .btn-group>.btn:not(:last-child):not(.dropdown-toggle),
body.hh-app :is(#main-body, .modal) .btn-group>.btn-group:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.hh-app :is(#main-body, .modal) .btn-group>.btn:not(:first-child),
body.hh-app :is(#main-body, .modal) .btn-group>.btn-group:not(:first-child)>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.hh-app :is(#main-body, .modal) .input-group-append .btn,
body.hh-app :is(#main-body, .modal) .input-group-append .btn:hover {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.hh-app :is(#main-body, .modal) .input-group-prepend .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.hh-app :is(#main-body, .modal) .input-group-append .btn-default,
body.hh-app :is(#main-body, .modal) .input-group-append .btn-default:hover {
    padding: 0 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--hh-line-2);
    border-left: 0;
    box-shadow: none;
    color: var(--hh-muted);
    font-size: 14px;
}

body.hh-app :is(#main-body, .modal) .input-group-append .btn-default:hover {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .sidebar .card-footer .btn,
body.hh-app :is(#main-body, .modal) .sidebar .card-footer .btn:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--hh-text);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

body.hh-app :is(#main-body, .modal) .sidebar .card-footer .btn:hover {
    background: rgba(255, 255, 255, .11);
}

.hh-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    cursor: pointer;
}

.hh-check input {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* drop-downs, tabs, pages */
body.hh-app :is(#main-body, .modal) .dropdown-menu {
    padding: 6px;
    background: var(--hh-popover-2);
    border: 1px solid var(--hh-line-2);
    border-radius: 12px;
    box-shadow: 0 24px 50px -20px rgba(8, 10, 18, .8);
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .dropdown-item {
    border-radius: 8px;
    color: var(--hh-text-2);
}

body.hh-app :is(#main-body, .modal) .dropdown-item:hover,
body.hh-app :is(#main-body, .modal) .dropdown-item:focus {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

body.hh-app :is(#main-body, .modal) .dropdown-item.disabled {
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .dropdown-divider {
    border-top-color: var(--hh-line);
}

body.hh-app :is(#main-body, .modal) .nav-tabs {
    border-bottom: 1px solid var(--hh-line-2);
}

body.hh-app :is(#main-body, .modal) .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) .nav-tabs .nav-link:hover {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .nav-tabs .nav-link.active {
    border-bottom-color: var(--hh-accent);
    background: none;
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .nav-pills .nav-link {
    border-radius: 10px;
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) .nav-pills .nav-link.active {
    background: var(--hh-accent-soft);
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) div.product-details-tab-container {
    background: transparent;
    border: 1px solid var(--hh-line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
}

body.hh-app :is(#main-body, .modal) .page-link {
    background: transparent;
    border-color: var(--hh-line-2);
    color: var(--hh-text-2);
}

body.hh-app :is(#main-body, .modal) .page-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

body.hh-app :is(#main-body, .modal) .page-item.active .page-link {
    background: var(--hh-accent-soft);
    border-color: var(--hh-accent-line);
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .page-item.disabled .page-link {
    background: transparent;
    border-color: var(--hh-line);
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .page-item:first-child .page-link {
    border-radius: 10px 0 0 10px;
}

body.hh-app :is(#main-body, .modal) .page-item:last-child .page-link {
    border-radius: 0 10px 10px 0;
}

/* messages, progress bars */
body.hh-app :is(#main-body, .modal) .alert {
    border: 0;
    border-radius: 12px;
    font-size: 14.5px;
}

body.hh-app :is(#main-body, .modal) .alert a {
    color: inherit;
    text-decoration: underline;
}

body.hh-app :is(#main-body, .modal) .alert-danger {
    background: rgba(239, 83, 80, .12);
    box-shadow: inset 0 0 0 1px rgba(239, 83, 80, .35);
    color: #ffb9b5;
}

body.hh-app :is(#main-body, .modal) .alert-success {
    background: rgba(61, 220, 132, .1);
    box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .3);
    color: #b9f0cf;
}

body.hh-app :is(#main-body, .modal) .alert-warning {
    background: rgba(255, 181, 71, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .3);
    color: #ffd9a0;
}

body.hh-app :is(#main-body, .modal) .alert-info {
    background: rgba(126, 150, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(126, 150, 255, .3);
    color: #c9d3ff;
}

body.hh-app :is(#main-body, .modal) .alert :is(h2, h3, h4, strong) {
    color: inherit;
}

body.hh-app :is(#main-body, .modal) .progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
}

/* status labels: soft pills instead of solid blocks */
body.hh-app :is(#main-body, .modal) .label {
    display: inline-block;
    padding: .42em .8em;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .08);
    color: var(--hh-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

body.hh-app :is(#main-body, .modal) :is(.status-active, .status-open, .status-completed, .status-paid, .status-accepted, .label-success, .requestor-type-owner) {
    background-color: rgba(61, 220, 132, .14);
    color: #7fe3ad;
}

body.hh-app :is(#main-body, .modal) :is(.status-pending, .status-unpaid, .status-inprogress, .label-danger) {
    background-color: rgba(239, 83, 80, .16);
    color: #ff9f9a;
}

body.hh-app :is(#main-body, .modal) :is(.status-suspended, .status-pending-transfer, .status-refunded, .status-customer-reply, .status-pending-registration, .status-redemption, .status-grace, .label-warning, .requestor-type-registereduser) {
    background-color: rgba(255, 181, 71, .16);
    color: #ffcf8a;
}

body.hh-app :is(#main-body, .modal) :is(.status-onhold, .status-payment-pending, .status-delivered, .status-answered, .label-info, .requestor-type-operator) {
    background-color: rgba(126, 150, 255, .16);
    color: #b9c6ff;
}

body.hh-app :is(#main-body, .modal) .label.status-custom {
    color: #fff;
}

/* tables */
body.hh-app :is(#main-body, .modal) .table {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .table th,
body.hh-app :is(#main-body, .modal) .table td {
    border-color: var(--hh-line);
}

body.hh-app :is(#main-body, .modal) .table thead th {
    border-bottom: 1px solid var(--hh-line-2);
    color: var(--hh-muted);
    font-size: 13px;
    font-weight: 600;
}

body.hh-app :is(#main-body, .modal) .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .025);
}

body.hh-app :is(#main-body, .modal) .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, .04);
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) tr.masspay-total td {
    background-color: rgba(255, 255, 255, .025);
    color: var(--hh-text);
    font-weight: 600;
}

body.hh-app :is(#main-body, .modal) tr.masspay-total:last-child td {
    font-size: 16px;
    font-weight: 700;
}

/* overflow-x: on a phone a list that is wider than the screen scrolls inside its card instead of widening the page */
body.hh-app :is(#main-body, .modal) .table-container {
    padding: 6px 20px 18px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 18px;
    overflow-x: auto;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper table.table-list {
    border: 0;
    border-radius: 0;
}

body.hh-app :is(#main-body, .modal) table.table-list thead th,
body.hh-app :is(#main-body, .modal) .dataTables_wrapper table.table-list thead th {
    padding: 12px 10px;
    background: transparent;
    border-bottom: 1px solid var(--hh-line-2);
    color: var(--hh-muted);
    font-size: 13px;
    font-weight: 600;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper table.table-list thead th:is(.sorting_asc, .sorting_desc) {
    background: transparent;
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .table-list>tbody>tr>td {
    padding: 14px 10px;
    background: transparent;
    border-top: 1px solid var(--hh-line);
    font-size: 14.5px;
}

body.hh-app :is(#main-body, .modal) .table-list>tbody>tr:hover>td {
    background: rgba(255, 255, 255, .04);
}

body.hh-app :is(#main-body, .modal) .table-list>tbody>tr>td a {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .table-list>tbody>tr>td a:hover {
    color: var(--hh-accent);
}

body.hh-app :is(#main-body, .modal) .table-list>tbody>tr>td a.border-left {
    border-left: 0 !important;
    padding-left: 0;
}

body.hh-app :is(#main-body, .modal) .table-list .ticket-number {
    color: var(--hh-dim);
    margin-right: 6px;
}

body.hh-app :is(#main-body, .modal) .table-list .ticket-subject.unread {
    font-weight: 700;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper .dataTables_filter {
    margin-top: 10px;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper .dataTables_filter label .form-control {
    height: 42px;
    padding: 8px 12px 8px 40px !important;
    background: rgba(255, 255, 255, .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23767d94' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 13px 50% / 16px 16px;
    font-size: 14.5px;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper .dataTables_info {
    padding: 10px 10px 6px;
    color: var(--hh-dim);
    font-size: 13px;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper .dataTables_length {
    color: var(--hh-muted);
    font-size: 13.5px;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    height: 38px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 13.5px;
}

body.hh-app :is(#main-body, .modal) .dataTables_wrapper .dataTables_paginate {
    margin-top: 4px;
}

/* pop-ups */
body.hh-app .modal:not(.modal-localisation) .modal-content {
    background: var(--hh-popover);
    border: 1px solid var(--hh-line-2);
    border-radius: 18px;
    box-shadow: 0 40px 80px -30px rgba(8, 10, 18, .9);
    color: var(--hh-text);
}

body.hh-app .modal:not(.modal-localisation) :is(.modal-header, .modal-footer) {
    border-color: var(--hh-line);
}

body.hh-app .modal:not(.modal-localisation) .close {
    color: var(--hh-text);
    text-shadow: none;
    opacity: .7;
}

/* phone field: country picker */
body.hh-app .intl-tel-input {
    display: block;
}

/* the flag + dial code sit inside the field: no box of their own, and the number starts after them
   (the picker sets that space per dial-code length; repeated here so the dark field styles do not undo it) */
body.hh-app .intl-tel-input .selected-flag {
    background-color: transparent !important;
    border-radius: 11px 0 0 11px;
    outline: 0;
}

body.hh-app .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
    background-color: rgba(255, 255, 255, .05) !important;
}

body.hh-app .intl-tel-input .selected-dial-code {
    color: var(--hh-text);
    font-size: 15px;
}

body.hh-app #main-body .intl-tel-input.allow-dropdown input {
    padding-left: 58px;
}

body.hh-app #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
    padding-left: 82px;
}

body.hh-app #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
    padding-left: 90px;
}

body.hh-app #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
    padding-left: 98px;
}

body.hh-app #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
    padding-left: 106px;
}

/* a field icon in front of the phone field would sit on top of the flag */
body.hh-app #main-body .prepend-icon:has(> .intl-tel-input)>.field-icon {
    display: none;
}

body.hh-app .intl-tel-input .selected-flag .iti-arrow {
    border-top-color: var(--hh-muted);
}

body.hh-app .intl-tel-input .selected-flag .iti-arrow.up {
    border-bottom-color: var(--hh-muted);
}

body.hh-app .intl-tel-input .country-list {
    background: var(--hh-popover-2);
    border-color: var(--hh-line-2);
    border-radius: 10px;
    box-shadow: 0 20px 40px -10px rgba(8, 10, 18, .7);
    color: var(--hh-text);
}

body.hh-app .intl-tel-input .country-list .divider {
    border-bottom-color: var(--hh-line-2);
}

body.hh-app .intl-tel-input .country-list .country.highlight {
    background: rgba(255, 255, 255, .07);
}

body.hh-app .intl-tel-input .country-list .country .dial-code {
    color: var(--hh-muted);
}

/* --- dashboard: the four counters --- */
body.hh-app :is(#main-body, .modal) .tiles {
    margin-bottom: 4px !important;
}

body.hh-app :is(#main-body, .modal) .tiles .row {
    margin: 0 -8px;
}

body.hh-app :is(#main-body, .modal) .tiles .row>div {
    padding: 0 8px 16px;
}

body.hh-app :is(#main-body, .modal) .tiles .tile {
    padding: 20px 22px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-line) !important;
    border-radius: 18px;
    color: var(--hh-text);
    transition: background-color .25s, border-color .25s;
}

body.hh-app :is(#main-body, .modal) .tiles .tile:hover {
    background: var(--hh-surface-2);
    border-color: var(--hh-accent-line) !important;
}

body.hh-app :is(#main-body, .modal) .tiles .tile .stat {
    margin-top: 22px;
    font-family: var(--hh-display);
    font-style: italic;
    font-weight: 800;
    font-size: 46px;
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .tiles .tile .title {
    margin-top: 4px;
    color: var(--hh-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
}

body.hh-app :is(#main-body, .modal) .tiles .tile .highlight {
    display: none;
}

body.hh-app :is(#main-body, .modal) .tiles .tile i,
body.hh-app :is(#main-body, .modal) .tiles .tile:hover i {
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--hh-accent-soft);
    color: var(--hh-accent);
    font-size: 17px;
}

/* --- dashboard: the panels --- */
body.hh-app :is(#main-body, .modal) .client-home-cards .card {
    margin-bottom: 20px;
    border-top: 1px solid var(--hh-line);
    font-size: 14.5px;
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-header {
    padding: 16px 20px 12px;
    background: transparent;
    border-bottom: 0;
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-title {
    font-size: 16px;
    font-weight: 600;
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-title>i:first-of-type {
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-header .btn,
body.hh-app :is(#main-body, .modal) .client-home-cards .card-header .btn:hover {
    margin-top: -3px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-header .btn:hover {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-body {
    max-height: 260px;
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-body p {
    padding: 4px 20px 12px;
    margin: 0;
    color: var(--hh-text-2);
}

body.hh-app :is(#main-body, .modal) .client-home-cards .list-group {
    max-height: 260px;
    border-top: 1px solid var(--hh-line) !important;
    border-bottom: 0 !important;
}

body.hh-app :is(#main-body, .modal) .client-home-cards .list-group .list-group-item {
    padding: 11px 20px;
    border-bottom: 1px solid var(--hh-line);
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-footer {
    min-height: 14px;
    padding: 0 20px;
    background: transparent;
    border-top: 0;
    font-size: 13px;
}

body.hh-app :is(#main-body, .modal) .client-home-cards .card-footer:not(:empty) a {
    display: inline-block;
    padding: 10px 0 12px;
}

body.hh-app :is(#main-body, .modal) .client-home-cards small {
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .div-service-item {
    padding: 12px 20px;
    border-top: 1px solid var(--hh-line);
}

body.hh-app :is(#main-body, .modal) .div-service-item:hover {
    background: rgba(255, 255, 255, .04);
}

body.hh-app :is(#main-body, .modal) .div-service-name .text-domain {
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) .div-service-status {
    flex: none;
}

body.hh-app :is(#main-body, .modal) .div-service-status .label:not(.label-placeholder) {
    width: auto !important;
    max-width: none;
    overflow: visible;
}

/* --- tickets --- */
.hh-depts {
    display: grid;
    gap: 12px;
}

.hh-dept {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text) !important;
    text-decoration: none !important;
    transition: background-color .25s, box-shadow .25s;
}

.hh-dept:hover {
    background: var(--hh-surface-2);
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
}

.hh-dept__ico {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--hh-accent-soft);
    color: var(--hh-accent);
    font-size: 17px;
}

.hh-dept__text {
    flex: 1;
    min-width: 0;
}

.hh-dept__text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.hh-dept__text small {
    display: block;
    margin-top: 2px;
    color: var(--hh-muted);
    font-size: 14px;
}

.hh-dept__arrow {
    color: var(--hh-dim);
    font-size: 13px;
    transition: transform .25s var(--hh-ease), color .25s;
}

.hh-dept:hover .hh-dept__arrow {
    transform: translateX(4px);
    color: var(--hh-accent);
}

body.hh-app :is(#main-body, .modal) .view-ticket .card-body {
    border-bottom-color: var(--hh-line);
}

body.hh-app :is(#main-body, .modal) .view-ticket .posted-by {
    padding: 10px 16px;
    background: rgba(255, 255, 255, .04);
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) .view-ticket .posted-by .posted-by-name {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .view-ticket .ticket-reply.staff .posted-by {
    background: var(--hh-accent-soft);
}

body.hh-app :is(#main-body, .modal) .view-ticket .attachments {
    border-top-color: var(--hh-line-2);
}

body.hh-app :is(#main-body, .modal) .view-ticket .attachment-list li span {
    border-color: var(--hh-line);
    border-radius: 10px;
}

body.hh-app :is(#main-body, .modal) .view-ticket .attachment-list li figure {
    background: rgba(255, 255, 255, .04);
    border-radius: 6px;
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .ticket-reply .rating span.star:before,
body.hh-app :is(#main-body, .modal) .ticket-reply .rating-done span.star:before {
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .ticketfeedbackstaffcont {
    background: rgba(255, 255, 255, .04);
}

/* message editor */
body.hh-app :is(#main-body, .modal) .md-editor,
body.hh-app :is(#main-body, .modal) div.md-editor.active {
    border: 1px solid var(--hh-line-2);
    border-radius: 12px;
    overflow: hidden;
}

body.hh-app :is(#main-body, .modal) .md-editor>.btn-toolbar {
    background: rgba(255, 255, 255, .03) !important;
}

body.hh-app :is(#main-body, .modal) .md-editor>.btn-toolbar .btn,
body.hh-app :is(#main-body, .modal) .md-editor>.btn-toolbar .btn:hover {
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
    color: var(--hh-text);
    font-size: 13px;
}

body.hh-app :is(#main-body, .modal) .md-editor>.btn-toolbar .btn:hover {
    background: rgba(255, 255, 255, .12);
}

body.hh-app :is(#main-body, .modal) .md-editor .md-footer {
    background: rgba(255, 255, 255, .03);
}

body.hh-app :is(#main-body, .modal) .md-editor .md-controls .md-control {
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) .md-editor .md-controls .md-control:hover {
    color: var(--hh-text);
}

body.hh-app .md-editor.md-fullscreen-mode {
    background: var(--hh-bg) !important;
}

body.hh-app .md-editor.md-fullscreen-mode :is(.md-input, .md-preview) {
    background: transparent !important;
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .md-editor>textarea.markdown-editor,
body.hh-app :is(#main-body, .modal) .md-editor>.md-preview {
    background: transparent !important;
    border: 0;
    border-top: 1px solid var(--hh-line) !important;
    border-bottom: 1px solid var(--hh-line) !important;
    border-radius: 0;
    box-shadow: none;
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .md-editor .md-footer,
body.hh-app :is(#main-body, .modal) .markdown-editor-status {
    color: var(--hh-dim);
}

body.hh-app :is(#main-body, .modal) :is(.md-preview, .markdown-content) :is(h1, h2, h3, h4) {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) :is(.md-preview, .markdown-content) blockquote {
    border-left-color: var(--hh-line-2);
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) :is(.md-preview, .markdown-content) table {
    background: transparent;
    border-color: var(--hh-line);
}

body.hh-app :is(#main-body, .modal) :is(.md-preview, .markdown-content) table>thead>tr>th {
    background: rgba(255, 255, 255, .04);
    border-color: var(--hh-line);
}

body.hh-app :is(#main-body, .modal) :is(.md-preview, .markdown-content) table>tbody>tr>td {
    border-color: var(--hh-line);
}

/* --- knowledgebase, announcements, service details --- */
body.hh-app :is(#main-body, .modal) .kb-category a {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .kb-category a:hover,
body.hh-app :is(#main-body, .modal) .kb-article-item:hover {
    background: rgba(255, 255, 255, .05);
}

body.hh-app :is(#main-body, .modal) .kb-article-item {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .kb-article-item small {
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) .announcements .announcement h1 {
    font-size: 22px;
}

body.hh-app :is(#main-body, .modal) .announcements .announcement h1 a {
    color: var(--hh-text);
}

body.hh-app :is(#main-body, .modal) .announcements .announcement article {
    background: rgba(255, 255, 255, .04);
    border-left: 3px solid var(--hh-line-2);
    border-radius: 0 12px 12px 0;
    color: var(--hh-text-2);
}

body.hh-app :is(#main-body, .modal) div.product-details div.product-icon {
    background: rgba(255, 255, 255, .05);
    border-radius: 16px;
    color: var(--hh-muted);
}

body.hh-app :is(#main-body, .modal) .product-status {
    border-radius: 16px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   SHOPPING CART — configure product, cart, checkout and the other steps of the
   standard_cart order form (body.hh-cart, see hhCart in includes/hh-config.tpl).
   On top of the CLIENT AREA look above; WHMCS's own markup and scripts are kept,
   this block only restyles them (all scoped to #order-standard_cart).
   -------------------------------------------------------------------------- */
body.hh-cart #order-standard_cart {
    padding-bottom: 24px;
    font-size: 15px;
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart label {
    margin-right: 0;
    color: var(--hh-text-2);
    font-size: 14px;
    font-weight: 500;
}

body.hh-cart #order-standard_cart .text-muted {
    color: var(--hh-muted) !important;
}

/* one column: the product groups are in the menu bar, so the category sidebar is left out */
body.hh-cart #order-standard_cart :is(.cart-sidebar, .sidebar-collapsed) {
    display: none;
}

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

body.hh-cart #order-standard_cart .header-lined {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

body.hh-cart #order-standard_cart .header-lined h1 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -.025em;
}

/* section titles ("Personal Information", ...): a plain heading with a step number */
body.hh-cart #order-standard_cart form {
    counter-reset: hhstep;
}

body.hh-cart #order-standard_cart :is(.sub-heading, .sub-heading-borderless) {
    height: auto;
    margin: 40px 0 18px;
    border: 0;
    text-align: left;
    counter-increment: hhstep;
}

body.hh-cart #order-standard_cart :is(.sub-heading, .sub-heading-borderless) span {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none !important;
    color: var(--hh-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

body.hh-cart #order-standard_cart .sub-heading span::before {
    content: counter(hhstep);
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
    color: var(--hh-muted);
    font-size: 13px;
    font-weight: 700;
}

body.hh-cart #order-standard_cart .sub-heading span small {
    color: var(--hh-muted);
    font-weight: 500;
}

/* fields with an icon in front */
body.hh-cart #order-standard_cart .form-group {
    margin-bottom: 16px;
}

body.hh-cart #order-standard_cart .prepend-icon .field-icon {
    width: 46px;
    height: 46px;
    line-height: 46px;
}

body.hh-cart #order-standard_cart .field-icon i {
    color: var(--hh-dim);
}

body.hh-cart #order-standard_cart .prepend-icon .field {
    padding-left: 44px;
}

body.hh-cart #order-standard_cart .field-help-text {
    color: var(--hh-muted);
    font-size: 12.5px;
}

body.hh-cart #order-standard_cart .field-error-msg {
    color: #ff9f9a;
    font-size: 12.5px;
}

/* tick boxes and round buttons (WHMCS draws them with the iCheck script) */
body.hh-cart :is(.iradio_square-blue, .icheckbox_square-blue) {
    position: relative;
    flex: none;
    display: inline-block;
    vertical-align: -5px;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    background: rgba(255, 255, 255, .04) !important;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
    transition: box-shadow .2s, background-color .2s;
}

body.hh-cart .icheckbox_square-blue {
    border-radius: 6px;
}

body.hh-cart :is(.iradio_square-blue, .icheckbox_square-blue).hover {
    box-shadow: inset 0 0 0 1.5px var(--hh-accent);
}

body.hh-cart .iradio_square-blue.checked {
    background: #fff !important;
    box-shadow: inset 0 0 0 6px var(--hh-accent);
}

body.hh-cart .icheckbox_square-blue.checked {
    background: var(--hh-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b1e2b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat !important;
    box-shadow: none;
}

body.hh-cart :is(.iradio_square-blue, .icheckbox_square-blue).disabled {
    opacity: .45;
}

/* ---- cart: the items ---- */
body.hh-cart #order-standard_cart .secondary-cart-body {
    width: 64%;
    padding-right: 20px;
}

body.hh-cart #order-standard_cart .secondary-cart-sidebar {
    width: 36%;
}

body.hh-cart #order-standard_cart .view-cart-items-header {
    padding: 0 22px 10px;
    background: none;
    border-radius: 0;
    color: var(--hh-dim);
    font-size: 13px;
    font-weight: 600;
}

body.hh-cart #order-standard_cart .view-cart-items {
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
    border: 0;
}

body.hh-cart #order-standard_cart .view-cart-items .item {
    padding: 18px 14px 18px 22px;
    background: var(--hh-surface) !important;
    border: 1px solid var(--hh-line);
    border-radius: 16px;
    font-size: 15px;
    transition: border-color .2s;
}

body.hh-cart #order-standard_cart .view-cart-items .item:hover {
    border-color: var(--hh-line-2);
}

body.hh-cart #order-standard_cart .view-cart-items .item>.row {
    align-items: center;
}

body.hh-cart #order-standard_cart .view-cart-items .item-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .view-cart-items .item-title .btn-link {
    margin-left: 6px;
    padding: 0;
    vertical-align: baseline;
    line-height: inherit;
    color: var(--hh-dim);
    font-size: 12.5px;
    font-weight: 600;
}

body.hh-cart #order-standard_cart .view-cart-items .item-title .btn-link:hover {
    color: var(--hh-accent);
}

body.hh-cart #order-standard_cart .view-cart-items .item-group {
    margin-top: 2px;
    color: var(--hh-muted);
    font-size: 14px;
}

body.hh-cart #order-standard_cart .view-cart-items .item-domain {
    color: var(--hh-accent);
    font-size: 14px;
}

body.hh-cart #order-standard_cart .view-cart-items .item small {
    display: block;
    margin-top: 6px;
    color: var(--hh-muted);
    font-size: 13px;
    line-height: 1.6;
}

body.hh-cart #order-standard_cart .view-cart-items .item-price {
    color: var(--hh-muted);
    font-size: 13px;
}

body.hh-cart #order-standard_cart .view-cart-items .item-price span:first-child {
    color: var(--hh-text);
    font: 700 22px/1.05 var(--hh-font);
    letter-spacing: -.03em;
}

body.hh-cart #order-standard_cart .view-cart-items .item-price .cycle {
    margin-top: 2px;
    color: var(--hh-muted);
    font-size: 13px;
}

body.hh-cart #order-standard_cart .view-cart-items .item-qty input {
    height: 38px;
    margin-bottom: 6px;
}

body.hh-cart #order-standard_cart .btn-remove-from-cart {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    color: var(--hh-dim);
    font-size: 14px;
}

body.hh-cart #order-standard_cart .btn-remove-from-cart:hover {
    background: rgba(239, 83, 80, .14);
    color: #ff9f9a;
}

body.hh-cart #order-standard_cart .view-cart-items .item-title .btn-remove-from-cart {
    width: auto;
    height: auto;
    padding: 0;
    margin-left: 10px;
    font-size: 12.5px;
}

body.hh-cart #order-standard_cart .row-upgrade-credit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hh-line);
}

body.hh-cart #order-standard_cart .upgrade-calc-msg {
    color: var(--hh-muted);
    font-size: 13px;
}

body.hh-cart #order-standard_cart .view-cart-empty {
    padding: 48px 20px;
    border: 1px dashed var(--hh-line-2);
    border-radius: 16px;
    color: var(--hh-muted);
    text-align: center;
}

body.hh-cart #order-standard_cart .empty-cart {
    margin: 0 0 28px;
    text-align: right;
}

body.hh-cart #order-standard_cart .empty-cart .btn {
    padding: 6px 4px;
    background: none;
    border-radius: 8px;
    color: var(--hh-dim);
    font-size: 13px;
    font-weight: 600;
}

body.hh-cart #order-standard_cart .empty-cart .btn:hover {
    color: #ff9f9a;
}

body.hh-cart #order-standard_cart .empty-cart .btn i {
    margin-right: 4px;
}

body.hh-cart #order-standard_cart .view-cart-gateway-checkout {
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 16px;
}

/* promo code (and tax estimate) */
body.hh-cart #order-standard_cart .view-cart-tabs {
    margin: 0 0 24px;
    padding: 4px 22px 22px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 16px;
}

body.hh-cart #order-standard_cart .view-cart-tabs .nav-tabs {
    padding: 0;
    font-size: 14px;
}

body.hh-cart #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    margin-right: 22px;
    padding: 14px 0 12px;
    font-weight: 600;
}

body.hh-cart #order-standard_cart .view-cart-tabs .nav-tabs a:is([aria-selected="true"], [aria-expanded="true"]) {
    background: none;
    border-color: transparent transparent var(--hh-accent);
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .view-cart-tabs .tab-content {
    padding: 18px 0 0;
    background: none;
}

body.hh-cart #order-standard_cart .view-cart-tabs .promo form {
    display: flex;
    gap: 10px;
}

body.hh-cart #order-standard_cart .view-cart-tabs .promo .form-group {
    flex: 1;
    margin: 0;
}

body.hh-cart #order-standard_cart .view-cart-tabs .promo .btn-block {
    width: auto;
    flex: none;
    margin: 0;
}

body.hh-cart #order-standard_cart .view-cart-promotion-code {
    margin: 0 0 12px;
    padding: 12px 16px;
    background: var(--hh-accent-soft);
    border: 1px dashed var(--hh-accent-line);
    border-radius: 12px;
    color: var(--hh-text);
}

/* order summary */
body.hh-cart #order-standard_cart .order-summary {
    margin: 0 0 20px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 20px;
    box-shadow: 0 30px 60px -40px rgba(8, 10, 18, .9);
    overflow: hidden;
}

body.hh-cart #order-standard_cart .order-summary h2 {
    padding: 22px 24px 4px;
    color: var(--hh-text);
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

body.hh-cart #order-standard_cart .order-summary .loader {
    top: 22px;
    padding-right: 24px;
    color: var(--hh-dim);
}

body.hh-cart #order-standard_cart .summary-container {
    min-height: 0;
    padding: 8px 24px 24px;
    background: none;
    color: var(--hh-text-2);
    font-size: 14.5px;
}

body.hh-cart #order-standard_cart .order-summary .subtotal {
    padding: 12px 0;
    border-bottom: 1px solid var(--hh-line);
    font-size: 14.5px;
}

body.hh-cart #order-standard_cart .order-summary .bordered-totals {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--hh-line);
}

body.hh-cart #order-standard_cart .order-summary .bordered-totals>div {
    padding: 2px 0;
}

body.hh-cart #order-standard_cart .order-summary .recurring-totals {
    margin: 0;
    padding: 12px 0;
    color: var(--hh-muted);
}

body.hh-cart #order-standard_cart .order-summary .recurring-charges {
    color: var(--hh-muted);
    font-size: 13.5px;
    font-style: normal;
}

body.hh-cart #order-standard_cart .order-summary .recurring-charges .cost {
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .order-summary .total-due-today {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    margin: 6px 0 22px;
    padding-top: 18px;
    border-top: 1px solid var(--hh-line);
}

body.hh-cart #order-standard_cart .order-summary .total-due-today span {
    text-align: left;
    color: var(--hh-muted);
    font-size: 13px;
}

body.hh-cart #order-standard_cart .order-summary .total-due-today .amt {
    color: var(--hh-text);
    font: 700 38px/1 var(--hh-font);
    letter-spacing: -.03em;
}

body.hh-cart #order-standard_cart .order-summary .text-right {
    text-align: center !important;
}

body.hh-cart #order-standard_cart .order-summary .text-right br {
    display: none;
}

body.hh-cart #order-standard_cart .btn-checkout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 1em 1.4em;
    font-size: 16px;
}

body.hh-cart #order-standard_cart .order-summary .btn-continue-shopping {
    margin-top: 10px;
    padding: 4px 0;
    color: var(--hh-muted);
    font-size: 13.5px;
    font-weight: 600;
}

body.hh-cart #order-standard_cart .order-summary .btn-continue-shopping:hover {
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .express-checkout-buttons .separator {
    color: var(--hh-dim);
}

/* ---- checkout: one form in a card ---- */
body.hh-cart #order-standard_cart .cart-body:has(#frmCheckout) {
    max-width: 920px;
    margin: 0 auto;
}

body.hh-cart #order-standard_cart #frmCheckout {
    padding: 8px 40px 40px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 22px;
}

body.hh-cart #order-standard_cart .already-registered {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -12px 0 24px;
}

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

body.hh-cart #order-standard_cart .already-registered p {
    margin: 0;
    color: var(--hh-muted);
}

body.hh-cart #order-standard_cart .already-registered .btn {
    padding: .6em 1.1em;
    font-size: 14px;
}

/* the stock "Generate Password" button is not used on this site (also removed from the sign-up page) */
body.hh-cart #order-standard_cart .generate-password {
    display: none;
}

body.hh-cart #order-standard_cart .password-strength-meter .progress {
    margin-top: 15px;
}

body.hh-cart #order-standard_cart .password-strength-meter p {
    margin-top: 6px;
    color: var(--hh-dim) !important;
}

/* accounts to choose from (signed-in client with more than one account) */
body.hh-cart #order-standard_cart .account-select-container {
    border: 0;
}

body.hh-cart #order-standard_cart .account-select-container div.account {
    margin: 0 5px 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    border: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
}

body.hh-cart #order-standard_cart .account-select-container div.account.active {
    background: var(--hh-accent-soft);
    box-shadow: inset 0 0 0 1.5px var(--hh-accent);
}

body.hh-cart #order-standard_cart .account-select-container .address {
    color: var(--hh-text);
}

/* payment: the amount and the payment methods as cards */
body.hh-cart #order-standard_cart #totalDueToday.alert {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 22px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
    border-radius: 14px;
    color: var(--hh-muted);
    font-size: 15px;
    text-align: left;
}

body.hh-cart #order-standard_cart #totalDueToday strong {
    color: var(--hh-text);
    font: 700 29px/1 var(--hh-font);
    letter-spacing: -.03em;
}

body.hh-cart #order-standard_cart #paymentGatewaysContainer>.text-center {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    text-align: left;
}

body.hh-cart #order-standard_cart #paymentGatewaysContainer .radio-inline {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 15px 16px;
    background: rgba(255, 255, 255, .03);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--hh-line-2);
    color: var(--hh-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .2s, background-color .2s;
}

body.hh-cart #order-standard_cart #paymentGatewaysContainer .radio-inline:hover {
    background: rgba(255, 255, 255, .06);
}

body.hh-cart #order-standard_cart #paymentGatewaysContainer .radio-inline:has(.checked, input:checked) {
    background: var(--hh-accent-soft);
    box-shadow: inset 0 0 0 1.5px var(--hh-accent);
}

body.hh-cart #order-standard_cart :is(.apply-credit-container, .cc-input-container) {
    padding: 18px 20px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--hh-line-2);
    border-radius: 14px;
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .cc-input-container .paymethod-info {
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .marketing-email-optin {
    margin: 28px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--hh-line-2);
    border-radius: 14px;
}

body.hh-cart #order-standard_cart .marketing-email-optin p {
    color: var(--hh-muted);
}

/* agree + complete order */
body.hh-cart #order-standard_cart #frmCheckout>.text-center:last-of-type {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--hh-line);
}

body.hh-cart #order-standard_cart #frmCheckout .checkbox-inline {
    color: var(--hh-text-2);
    font-size: 14.5px;
}

body.hh-cart #order-standard_cart #btnCompleteOrder {
    min-width: min(100%, 320px);
    margin-top: 6px;
}

body.hh-cart #order-standard_cart .checkout-security-msg {
    margin: 18px 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--hh-dim);
    font-size: 12.5px;
    text-align: center;
}

body.hh-cart #order-standard_cart .checkout-security-msg i {
    float: none;
    margin: 0 6px 0 0;
    font-size: 12px;
    color: var(--hh-dim);
}

body.hh-cart #order-standard_cart .checkout-security-msg strong {
    color: var(--hh-muted);
}

/* bootstrap switches (marketing e-mails, store card). The plugin sizes the
   inner row in rounded pixels; at browser zoom / display scaling other than
   100% it comes out 1px short and "No" wraps under "Yes", so never wrap. */
.bootstrap-switch .bootstrap-switch-container {
    white-space: nowrap;
}

body.hh-app .bootstrap-switch {
    border-color: var(--hh-line-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
}

body.hh-app .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background: var(--hh-accent);
    color: var(--hh-on-accent);
}

body.hh-app .bootstrap-switch .bootstrap-switch-handle-off:is(.bootstrap-switch-default, .bootstrap-switch-secondary) {
    background: rgba(255, 255, 255, .08);
    color: var(--hh-muted);
}

body.hh-app .bootstrap-switch .bootstrap-switch-label {
    background: #3a4058;
}

/* ---- configure product, add-ons, order complete ---- */
body.hh-cart #order-standard_cart .product-info {
    margin-bottom: 24px;
    padding: 20px 22px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 16px;
    color: var(--hh-text-2);
}

body.hh-cart #order-standard_cart .product-info .product-title {
    color: var(--hh-text);
    font-size: 20px;
    font-weight: 700;
}

body.hh-cart #order-standard_cart .panel-addon {
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 16px;
    color: var(--hh-text-2);
    overflow: hidden;
}

body.hh-cart #order-standard_cart .panel-addon .panel-price {
    background: rgba(255, 255, 255, .04);
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .panel-addon .panel-add {
    background: rgba(255, 255, 255, .06);
    color: var(--hh-text);
}

body.hh-cart #order-standard_cart .panel-addon-selected {
    border-color: var(--hh-accent);
}

body.hh-cart #order-standard_cart .panel-addon-selected .panel-add {
    background: var(--hh-accent);
    color: var(--hh-on-accent);
}

body.hh-cart #order-standard_cart .domain-selection-options .option {
    background: var(--hh-surface);
    border: 1px solid var(--hh-line);
    border-radius: 14px;
}

body.hh-cart #order-standard_cart .domain-selection-options .option-selected {
    background: var(--hh-accent-soft);
    border-color: var(--hh-accent-line);
}

body.hh-cart #order-standard_cart :is(.addon-promo-container, .mc-promo, .mc-promo .body) {
    background: var(--hh-surface);
    border-color: var(--hh-line);
    color: var(--hh-text-2);
}

body.hh-cart #order-standard_cart .order-confirmation {
    color: var(--hh-text-2);
}

@media (max-width: 991px) {
    body.hh-cart #order-standard_cart .secondary-cart-body {
        width: 100%;
        padding-right: 15px;
    }

    body.hh-cart #order-standard_cart .secondary-cart-sidebar {
        width: 100%;
        max-width: 480px;
    }

    body.hh-cart #order-standard_cart #frmCheckout {
        padding: 4px 22px 28px;
    }
}

@media (max-width: 575px) {
    body.hh-cart #order-standard_cart .view-cart-items .item {
        padding: 16px;
    }

    body.hh-cart #order-standard_cart .view-cart-items .item-price {
        margin-top: 8px;
        text-align: left;
    }

    body.hh-cart #order-standard_cart .already-registered {
        flex-direction: column;
        align-items: flex-start;
    }

    body.hh-cart #order-standard_cart .already-registered>.float-right {
        order: 0;
    }

    body.hh-cart #order-standard_cart .view-cart-tabs .promo form {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   OPEN A TICKET — choose a department, the form, the confirmation (body.hh-ticket, see
   hhTicket in hh-config.tpl). Like the old site: a banner with the page title and the
   breadcrumb (the same band as the product pages), no sidebar, one centred column.
   -------------------------------------------------------------------------- */
.hh-pagehead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 56px 0 52px;
    background:
        radial-gradient(560px 300px at calc(50% + 340px) 50%, rgba(98, 114, 174, .30), transparent 70%),
        linear-gradient(100deg, var(--hh-surface) 0%, #262b3e 55%, #2b3148 100%);
    box-shadow: inset 0 -1px 0 var(--hh-line-2);
}

.hh-pagehead::before {
    /* dotted texture on the right, as on the product banner */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(rgba(176, 188, 222, .16) 1.2px, transparent 1.4px) 0 0 / 16px 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 90%);
    mask-image: linear-gradient(90deg, transparent 40%, #000 90%);
}

body.hh-ticket .hh-pagehead .container {
    max-width: 920px;
}

.hh-pagehead h1 {
    margin: 0;
    color: var(--hh-text);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.hh-pagehead .breadcrumb {
    margin: 14px 0 0;
    padding: 0;
    background: none;
    font-size: 14px;
}

.hh-pagehead .breadcrumb-item,
.hh-pagehead .breadcrumb-item a {
    color: var(--hh-muted);
}

.hh-pagehead .breadcrumb-item a:hover,
.hh-pagehead .breadcrumb-item.active {
    color: var(--hh-text);
}

.hh-pagehead .breadcrumb-item+.breadcrumb-item::before {
    color: var(--hh-dim);
}

body.hh-ticket section#main-body {
    padding-top: 40px;
}

body.hh-ticket #main-body .primary-content {
    max-width: 920px;
    margin: 0 auto;
}

/* step 1: one card, the departments as rows inside it */
.hh-ticketcard {
    padding: 36px 40px 28px;
    border-radius: 20px;
    background: var(--hh-surface);
    box-shadow: inset 0 0 0 1px var(--hh-line);
}

.hh-ticketcard__head {
    margin-bottom: 20px;
}

.hh-ticketcard__head h2 {
    margin: 0;
    color: var(--hh-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.hh-ticketcard__head p {
    margin: 8px 0 0;
    color: var(--hh-muted);
    max-width: 640px;
}

.hh-ticketcard .hh-depts {
    gap: 0;
}

.hh-ticketcard .hh-dept {
    margin: 0 -16px;
    padding: 16px;
    border-radius: 14px;
    background: none;
    box-shadow: none;
}

.hh-ticketcard .hh-dept+.hh-dept {
    position: relative;
}

.hh-ticketcard .hh-dept+.hh-dept::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 1px;
    background: var(--hh-line);
}

.hh-ticketcard .hh-dept:hover {
    background: rgba(255, 255, 255, .04);
}

.hh-ticketcard .hh-dept:hover::before,
.hh-ticketcard .hh-dept:hover+.hh-dept::before {
    opacity: 0;
}

@media (max-width: 767px) {
    .hh-pagehead {
        padding: 36px 0 34px;
        background: radial-gradient(80% 60% at 100% 0%, rgba(98, 114, 174, .30), transparent 70%), linear-gradient(160deg, var(--hh-surface), #262b3e);
    }

    .hh-pagehead::before {
        -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%);
        mask-image: linear-gradient(200deg, #000, transparent 60%);
    }

    body.hh-ticket section#main-body {
        padding-top: 24px;
    }

    .hh-ticketcard {
        padding: 26px 20px 18px;
        border-radius: 18px;
    }

    .hh-ticketcard .hh-dept {
        margin: 0 -8px;
        padding: 14px 8px;
        gap: 14px;
    }

    .hh-ticketcard .hh-dept+.hh-dept::before {
        left: 8px;
        right: 8px;
    }
}

/* --------------------------------------------------------------------------
   SIGN-IN PAGES — login, register, password reset, two-factor, invitation,
   e-mail verification, account switch (body.hh-auth, see hhAuth in hh-config.tpl).
   The client-area look above, plus: one centred card on a soft glow.
   -------------------------------------------------------------------------- */
body.hh-auth section#main-body {
    padding: 56px 0 24px;
    min-height: calc(100vh - var(--hh-nav-h) - 60px);
    background: radial-gradient(46% 460px at 50% 0, rgba(84, 98, 150, .26), transparent 70%);
}

body.hh-auth .hh-footer {
    margin-top: 0;
}

body.hh-auth .primary-content .card {
    border: 0;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px var(--hh-line), 0 40px 80px -40px rgba(8, 10, 18, .8);
    overflow: hidden;
}

body.hh-auth .primary-content .card-footer {
    padding-top: 18px;
    padding-bottom: 18px;
    background: rgba(0, 0, 0, .16);
}

body.hh-auth .primary-content .h3,
body.hh-auth .primary-content .card-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.hh-auth .primary-content .card-title {
    margin-bottom: 22px;
}

body.hh-auth .primary-content h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.hh-auth .primary-content h5 {
    font-size: 16px;
    font-weight: 600;
}

body.hh-auth .primary-content .form-control,
body.hh-auth #registration .form-control,
body.hh-auth #registration .field {
    height: 48px;
}

body.hh-auth .primary-content textarea.form-control {
    height: auto;
}

body.hh-auth .primary-content .form-control-lg {
    height: 54px;
}

body.hh-auth #registration .field {
    display: block;
    width: 100%;
}

body.hh-auth .primary-content .btn {
    padding: .8em 1.5em;
}

body.hh-auth .primary-content .btn-lg {
    padding: .95em 1.7em;
}

body.hh-auth .primary-content .btn-sm {
    padding: .62em 1.1em;
}

body.hh-auth .primary-content .input-group-append .btn {
    padding: 0 16px;
}

/* register */
body.hh-auth #registration {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 16px;
}

.hh-auth__head {
    margin-bottom: 28px;
    text-align: center;
}

.hh-auth__head p {
    margin: 8px 0 0;
    color: var(--hh-muted);
}

body.hh-auth #registration .card {
    margin-bottom: 20px !important;
}

body.hh-auth #registration .card-title {
    font-size: 19px;
    margin-bottom: 20px;
}

body.hh-auth #registration .card-title small {
    font-size: 13px;
    font-weight: 400;
    color: var(--hh-dim);
}

body.hh-auth #registration label {
    color: var(--hh-muted);
    font-size: 14px;
    font-weight: 500;
}

body.hh-auth #registration .prepend-icon .field {
    padding-left: 44px;
}

body.hh-auth #registration .prepend-icon .field-icon {
    width: 46px;
    height: 48px;
    line-height: 48px;
}

body.hh-auth #registration .field-icon i {
    color: var(--hh-dim);
}

body.hh-auth #registration .field-help-text {
    color: var(--hh-dim);
}

body.hh-auth #registration .sub-heading {
    border-top-color: var(--hh-line-2);
}

body.hh-auth #registration .sub-heading span {
    background: var(--hh-bg);
    color: var(--hh-muted);
    font-size: 15px;
}

body.hh-auth #registration .password-strength-meter .progress {
    margin-top: 4px;
}

body.hh-auth #registration .password-strength-meter p {
    margin-bottom: 0;
}

/* invitation and account switch */
body.hh-auth .invite-box {
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--hh-line);
}

body.hh-auth .invite-box h2 {
    margin-bottom: 18px;
    font-size: 20px;
}

body.hh-auth .select-account {
    border-top: 0;
}

body.hh-auth .primary-content .select-account a {
    margin-bottom: 8px;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--hh-line);
    color: var(--hh-text);
    transition: background-color .2s, box-shadow .2s;
}

body.hh-auth .primary-content .select-account a:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px var(--hh-accent-line);
    color: var(--hh-text);
}

@media (max-width: 575px) {
    body.hh-app section#main-body {
        padding-top: 20px;
    }

    body.hh-app #main-body .table-container {
        padding: 4px 12px 14px;
    }

    body.hh-app #main-body .table-list>tbody>tr>td {
        padding: 12px 8px;
    }

    body.hh-auth section#main-body {
        padding-top: 28px;
    }

    body.hh-auth .primary-content .card {
        border-radius: 20px;
    }

    body.hh-auth .primary-content .card-body {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    body.hh-auth .primary-content .card-footer {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* --------------------------------------------------------------------------
   FOOTER (all pages)
   -------------------------------------------------------------------------- */
.hh-footer {
    position: relative;
    padding: 72px 0 0;
    background: var(--hh-bg-deep);
    border-top: 1px solid var(--hh-line);
    color: var(--hh-muted);
    font-family: var(--hh-font);
    overflow: hidden;
}

.hh-inner .hh-footer {
    margin-top: 60px;
}

.hh-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 64px;
    padding-bottom: 56px;
}

.hh-footer__brand img {
    height: 52px;
    width: auto;
    margin-bottom: 20px;
}

.hh-footer .hh-footer__brand p {
    font-size: 15px;
    max-width: 360px;
    margin: 0 0 24px;
}

.hh-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(61, 220, 132, .07);
    box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .2);
    color: #b9f0cf !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
}

/* every column div gets its own column, however many there are (Products, Support, Account, Info),
   as wide as its longest line; the room left over goes between the columns */
.hh-footer__cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    justify-content: space-between;
    gap: 32px;
}

.hh-footer__cols h4 {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hh-text);
    margin: 0 0 18px;
}

.hh-footer__cols a {
    display: block;
    padding: 5px 0;
    font-size: 14.5px;
    color: var(--hh-muted) !important;
    text-decoration: none !important;
    transition: color .2s, transform .2s var(--hh-ease);
}

.hh-footer__cols a:hover {
    color: var(--hh-accent) !important;
    transform: translateX(3px);
}

/* a plain text line in a column (company number, VAT number) lines up with the links and never
   breaks between the label and the number */
.hh-footer__cols>div> :is(p, span) {
    display: block;
    margin: 0;
    padding: 5px 0;
    font-size: 14.5px;
    color: var(--hh-muted);
    white-space: nowrap;
}

.hh-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid var(--hh-line);
    font-size: 13.5px;
}

.hh-footer__bottom p {
    margin: 0;
}

.hh-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.hh-footer__meta>a {
    color: var(--hh-muted) !important;
}

.hh-footer__meta>a:hover {
    color: var(--hh-text) !important;
}

.hh-footer__locale {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: var(--hh-text);
    font: 500 13px var(--hh-font);
    cursor: pointer;
}

.hh-footer__locale:hover {
    background: rgba(255, 255, 255, .1);
}

.hh-footer__social {
    display: flex;
    gap: 6px;
}

.hh-footer__social a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: var(--hh-text) !important;
    transition: background .2s, color .2s;
}

.hh-footer__social a:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--hh-accent) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

    .hh-nav__links,
    .hh-nav__login {
        display: none;
    }

    .hh-footer__top {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hh-nav__inner {
        gap: 12px;
    }

    .hh-nav__burger {
        display: block;
    }
}

@media (min-width: 1200px) {
    .hh-drawer {
        display: none !important;
    }
}

/* tablet: one card per row, picture on the left */
@media (min-width: 576px) and (max-width: 991px) {
    .hh-plans {
        grid-template-columns: 1fr;
    }

    .hh-plans .hh-plan {
        flex-direction: row;
    }

    .hh-plans .hh-plan__stage {
        flex: 0 0 38%;
        height: auto;
        padding-top: 0;
        border-bottom: 0;
        border-right: 1px solid var(--hh-line);
    }

    .hh-plans .hh-plan__stage img {
        height: 130px;
    }

    .hh-plans .hh-plan__glyph {
        width: 104px;
        height: 104px;
        border-radius: 28px;
        font-size: 50px;
    }
}

@media (max-width: 991px) {
    .hh-plans--center>.hh-plan {
        flex-basis: 100%;
    }

    .hh-section {
        padding: 100px 0;
    }

    /* hero: centred copy, the globe rising from the bottom */
    .hh-hero {
        flex-direction: column;
        align-items: stretch;
        padding-top: clamp(48px, 9vh, 110px);
        background:
            radial-gradient(60% 55% at 50% 100%, rgba(84, 98, 150, .28), transparent 70%),
            radial-gradient(35% 30% at 50% 88%, rgba(242, 135, 17, .08), transparent 70%),
            var(--hh-bg);
    }

    .hh-hero::after {
        /* fade the globe into the next section */
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 160px;
        z-index: 1;
        background: linear-gradient(180deg, rgba(33, 37, 53, 0), var(--hh-bg));
        pointer-events: none;
    }

    .hh-hero__inner {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hh-hero__copy {
        align-items: center;
        text-align: center;
    }

    .hh-hero__title {
        max-width: 720px;
        font-size: clamp(36px, 6vw, 56px);
    }

    .hh-hero__lead {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
    }

    .hh-hero__note {
        text-align: left;
    }

    .hh-hero__ctas {
        justify-content: center;
    }

    .hh-hero__globe {
        position: relative;
        flex: 1;
        width: 100%;
        min-height: 300px;
        margin-top: 8px;
        aspect-ratio: auto;
    }

    .hh-hero__video {
        position: absolute;
        top: -40px;
        left: 50%;
        width: min(1300px, 150vw);
        height: auto;
        aspect-ratio: 1400 / 840;
        transform: translateX(-50%);
    }

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

    .hh-phero {
        padding: 32px 0 56px;
    }

    .hh-phero__inner {
        padding: 44px 40px;
        min-height: 0;
        gap: 32px;
    }

    .hh-phero__art,
    .hh-phero__art img {
        height: 160px;
    }

    .hh-store {
        padding-bottom: 100px;
    }

    .hh-store .hh-chooser {
        margin-bottom: 64px;
    }

    .hh-chooser {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 28px;
    }

    .hh-chooser__bg::after {
        background: linear-gradient(180deg, rgba(28, 32, 48, .96) 0%, rgba(28, 32, 48, .88) 55%, rgba(28, 32, 48, .5) 100%);
    }

    .hh-chooser__bg img {
        object-position: 60% 100%;
    }

    .hh-location {
        padding: 110px 0 0;
        display: flex;
        flex-direction: column;
    }

    .hh-location::before {
        display: none;
    }

    .hh-location__map {
        order: 2;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 190%;
        margin: 30px 0 0 -62%;
    }

    .hh-cta {
        padding: 44px 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --hh-nav-h: 70px;
    }

    .hh-wrap {
        padding: 0 16px;
    }

    .hh-nav__brand img {
        height: 30px;
    }

    .hh-nav__actions .hh-btn {
        display: none;
    }

    .hh-hero__title {
        font-size: clamp(32px, 9vw, 42px);
    }

    .hh-hero__lead {
        margin-top: 18px !important;
        font-size: 16.5px;
    }

    .hh-hero__ctas {
        width: 100%;
    }

    .hh-hero__ctas .hh-btn {
        flex: 1 1 100%;
    }

    .hh-hero__globe {
        min-height: 240px;
    }

    .hh-hero__video {
        top: -20px;
        width: 170vw;
    }

    .hh-plans {
        grid-template-columns: 1fr;
    }

    .hh-offers,
    .hh-offers--few {
        grid-template-columns: 1fr;
    }

    .hh-phero {
        padding: 20px 0 44px;
    }

    .hh-phero__inner {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        border-radius: 20px;
        background: radial-gradient(80% 60% at 100% 0%, rgba(98, 114, 174, .30), transparent 70%), var(--hh-phero-wash, none), var(--hh-phero-photo, none) center / cover no-repeat, linear-gradient(160deg, var(--hh-surface), #262b3e);
    }

    .hh-phero__inner::before {
        -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%);
        mask-image: linear-gradient(200deg, #000, transparent 60%);
    }

    .hh-phero__art {
        display: none;
    }

    .hh-ticks--row {
        gap: 10px 24px;
        margin-top: 24px;
    }

    .hh-offer {
        padding: 24px;
    }

    .hh-included {
        margin-top: 64px;
        padding-top: 48px;
    }

    .hh-faq {
        margin-top: 64px;
        padding-top: 48px;
    }

    .hh-faq__list {
        grid-template-columns: 1fr;
    }

    .hh-faq__item summary {
        padding: 18px 20px;
        font-size: 15.5px;
    }

    .hh-faq__item p {
        padding: 0 20px 18px;
    }

    .hh-chooser {
        padding: 26px 20px;
    }

    .hh-chooser .hh-h2 {
        white-space: normal;
        font-size: 30px;
    }

    /* one line does not fit a phone */
    .hh-chips--cards {
        grid-template-columns: 1fr;
    }

    .hh-chooser__result {
        padding: 26px 22px;
    }

    .hh-chooser__ram strong {
        font-size: 68px;
    }

    .hh-lang a {
        padding: 4px 7px;
    }

    .hh-plan__stage {
        height: 200px;
        padding-top: 28px;
    }

    .hh-plan__stage img {
        height: 120px;
    }

    .hh-review {
        width: 300px;
        padding: 22px;
    }

    .hh-location__stats dd {
        font-size: 36px;
    }

    .hh-cta {
        padding: 40px 24px;
    }

    .hh-cta__actions .hh-btn {
        flex: 1 1 100%;
    }

    .hh-footer__cols {
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
        column-gap: 24px;
    }

    .hh-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion: no reveal, no endless marquee (the reviews can be scrolled
   sideways instead), no pulsing dots. The globe keeps turning on purpose.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hh-js .hh-reveal:not(.is-in) {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hh-reveal {
        transition: none;
    }

    .hh-rmarquee {
        overflow-x: auto;
    }

    .hh-rmarquee__track {
        animation: none;
    }

    .hh-rmarquee__set[aria-hidden] {
        display: none;
    }

    .hh-dot,
    .hh-location__pin i::before,
    .hh-location__pin i::after {
        animation: none;
    }
}