/*
 * UTMStack brand layer for Lagom 2 (style "modern"): dark console look.
 * Tokens match demo.utmstack.com / utmstack.com dark theme. Loaded by
 * includes/hooks/utmstack_brand.php after Lagom's CSS; no Lagom file is edited.
 */

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

html:root {
    /* demo.utmstack.com dark tokens */
    --utm-bg: #131720;
    --utm-fg: #eaecf0;
    --utm-card: #1c212c;
    --utm-popover: #232834;
    --utm-secondary: #242a38;
    --utm-muted: #181c25;
    --utm-muted-fg: #89909f;
    --utm-body-fg: #b4bac6;
    --utm-accent: #282f3e;
    --utm-border: #292f3d;
    --utm-input: #292f3d;
    --utm-primary: #007bff;
    --utm-primary-dark: #0062cc;
    --utm-ring: #3896fa;
    --utm-sidebar: #0c1017;
    --utm-sidebar-fg: #dcdfe5;
    --utm-sidebar-border: #1e232f;
    --utm-sidebar-accent: #1f2533;
    --utm-danger: #e14747;
    --utm-gradient: linear-gradient(120deg, #1ecad3 0%, #3a8dde 50%, #655dc6 100%);

    color-scheme: dark;

    /* Typography */
    --font-family-base: "Inter Variable", "Inter", system-ui, -apple-system, sans-serif;
    --site-banner-title-font-weight: 700;
    --font-weight-black: 700;

    /* Brand */
    --brand-primary: var(--utm-primary);
    --brand-primary-lighter: var(--utm-ring);
    --brand-primary-lighter-2: #1d3b63;
    --brand-primary-lighter-3: #1a2f4d;
    --brand-primary-lighter-4: #17263d;
    --brand-primary-darker: var(--utm-primary-dark);
    --brand-primary-gradient-start: var(--utm-primary);
    --brand-primary-gradient-end: var(--utm-ring);
    --brand-secondary: var(--utm-secondary);
    --brand-secondary-darker: var(--utm-sidebar);
    --brand-secondary-gradient-start: var(--utm-sidebar);
    --brand-secondary-gradient-end: var(--utm-secondary);
    --brand-info: var(--utm-primary);
    --brand-info-darker: var(--utm-primary-dark);
    --brand-info-lighter-2: #1d3b63;
    --brand-info-lighter-3: #1a2f4d;
    --brand-danger: var(--utm-danger);
    --brand-danger-lighter-2: #4a2226;
    --brand-danger-lighter-3: #3a1d21;
    --brand-danger-lighter-4: #2e1a1e;
    --brand-success-lighter-2: #17382a;
    --brand-success-lighter-3: #143024;
    --brand-success-lighter-4: #12291f;
    --brand-warning-lighter-2: #3d3115;
    --brand-warning-lighter-3: #332a14;
    --brand-warning-lighter-4: #2a2312;

    /* Neutral scale inverted for dark (Lagom: darker = headings, base = body) */
    --gray-darker: var(--utm-fg);
    --gray-base: var(--utm-body-fg);
    --gray-lighter: var(--utm-muted-fg);
    --gray-lighter-2: #5c6475;
    --gray-lighter-3: var(--utm-border);
    --gray-lighter-4: var(--utm-accent);
    --gray-faded: var(--utm-muted);
    --gray-icons: var(--utm-muted-fg);
    --gray-icons-hover: var(--utm-primary);
    --gray-gradient-start: var(--utm-muted);
    --gray-gradient-end: var(--utm-card);

    /* Surfaces */
    --body-bg: var(--utm-bg);
    --ui-block-bg: var(--utm-card);
    --ui-block-overlay-bg: rgba(19, 23, 32, 0.85);
    --ui-block-overlay-bg-2: var(--utm-card);
    --main-body-sidebar-content-bg: var(--utm-card);
    --main-top-bg: var(--utm-bg);
    --main-footer-bg: var(--utm-bg);
    --app-nav-left-bg: var(--utm-sidebar);
    --app-nav-top-bg: var(--utm-bg);
    --mob-app-nav-bg: var(--utm-sidebar);
    --mob-app-nav-header-bg: var(--utm-sidebar);
    --breadcrumb-bg: transparent;
    --dropdown-bg: var(--utm-popover);
    --popover-bg: var(--utm-popover);
    --popover-body-color: var(--utm-fg);
    --tooltip-bg: var(--utm-popover);
    --select-option-bg: var(--utm-popover);
    --badge-active-bg: var(--utm-accent);
    --loader-light-bg: var(--utm-card);
    --range-slider-handle-bg: var(--utm-fg);
    --icheck-bg: var(--utm-bg);
    --code-bg: var(--utm-muted);
    --code-color: #ff7aa2;
    --kbd-bg: var(--utm-accent);
    --legend-border-color: var(--utm-border);
    --thumbnail-border-colo: var(--utm-border);
    --hr-border-color: var(--utm-border);
    --toast-background-color: var(--utm-popover);
    --toast-header-background-color: var(--utm-popover);
    --toast-border-color: var(--utm-border);
    --toast-header-color: var(--utm-muted-fg);
    --label-savings-bg: #3a1d27;
    --price-savings-background: #3a1d27;

    /* Inputs */
    --input-bg: var(--utm-bg);
    --input-hover-bg: var(--utm-bg);
    --input-focus-bg: var(--utm-bg);
    --primary-block-input-bg: var(--utm-bg);
    --input-btn-focus-color: var(--utm-ring);

    /* Social login button */
    --btn-social-google-bg: var(--utm-card);
    --btn-social-google-hover-bg: var(--utm-accent);
    --btn-social-google-color: var(--utm-fg);
    --btn-social-google-border-color: var(--utm-border);
    --btn-social-google-border-hover-color: #3a4152;

    /* Lagom isometric illustrations: recolour to the dark palette */
    --svg-graphic-bg-body: var(--utm-card);
    --svg-graphic-bg-white: var(--utm-card);
    --svg-graphic-bg-browser-search: var(--utm-muted);
    --svg-illustration-gray-3: #3a4152;
    --svg-illustration-gray-4: #323848;
    --svg-illustration-gray-5: #2d3341;
    --svg-illustration-gray-6: #262c39;
    --svg-illustration-gray-7: #232834;
    --svg-illustration-gray-8: #1f2430;
    --svg-icon-on-primary-color-lighter: #3a4152;

    /* Lagom SVG icons: dark faces, light strokes, blue accent (console style) */
    --svg-icon-color-4: var(--utm-card);
    --svg-icon-color-5: var(--utm-border);
    --svg-icon-color-icon: var(--utm-card);
    --svg-icon-on-dark-color-secondary: var(--utm-fg);

    /* Shape: 8px like the console */
    --border-radius-sm: 6px;
    --border-radius-base: 8px;
    --border-radius-lg: 8px;
    --border-radius-xlg: 12px;
}

/* ---------- Base ---------- */
html,
body,
.lagom {
    background-color: var(--utm-bg);
    color: var(--utm-body-fg);
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.main-header-title,
.banner-title,
.section-title {
    font-family: var(--font-family-base);
    color: var(--utm-fg);
    letter-spacing: -0.02em;
}
h1, .h1, .main-header-title, .banner-title {
    font-weight: 700;
    letter-spacing: -0.025em;
}

a {
    color: var(--utm-ring);
}
a:hover,
a:focus {
    color: #6cb2fb;
}

::selection {
    background: rgba(0, 123, 255, 0.35);
    color: #fff;
}

/* ---------- Logo: white wordmark on dark ---------- */
a.logo {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
a.logo img {
    display: none !important;
}
a.logo::before {
    content: "";
    width: 26px;
    height: 34px;
    background: url("img/utmstack-mark.svg") no-repeat center / contain;
    flex: 0 0 auto;
}
a.logo::after {
    content: "UTMStack";
    font: 700 20px/1 var(--font-family-base);
    letter-spacing: -0.02em;
    color: var(--utm-fg);
}

/* ---------- Sidebar (console style) ---------- */
.app-nav-left,
.app-nav-left-wide,
.app-nav .app-nav-left {
    background: var(--utm-sidebar);
    border-right: 1px solid var(--utm-sidebar-border);
}
.app-nav-left a,
.app-nav-left .nav-link,
.app-nav-left-wide a {
    color: var(--utm-sidebar-fg);
}
.app-nav-left .nav-link:hover,
.app-nav-left .active > .nav-link,
.app-nav-left .nav-link.active,
.app-nav-left li.active > a,
.app-nav-left li > a:hover {
    background: var(--utm-sidebar-accent);
    color: #fff;
    border-radius: var(--border-radius-base);
}
.app-nav-left .active > a,
.app-nav-left li.active > a {
    color: var(--utm-primary);
}

/* ---------- Top bar ---------- */
.app-nav-top,
.app-nav-navbar,
.main-header-top,
.app-main > .app-nav-top {
    background: var(--utm-bg);
    border-bottom: 1px solid var(--utm-border);
}
.app-nav-top a,
.app-nav-top .nav-link {
    color: var(--utm-sidebar-fg);
}

/* ---------- Cards, panels, tables ---------- */
.panel,
.tile,
.package,
.section-body,
.ui-block,
.card,
.table-container,
.dataTables_wrapper,
.list-group-item,
.modal-content,
.dropdown-menu,
.popover {
    background-color: var(--utm-card);
    border-color: var(--utm-border) !important;
    color: var(--utm-body-fg);
    box-shadow: none;
}
.tile:hover,
.package:hover {
    border-color: #3a4152 !important;
}
.table,
.table > thead > tr > th,
.table > tbody > tr > td {
    border-color: var(--utm-border);
    color: var(--utm-body-fg);
}
.table > thead > tr > th {
    color: var(--utm-muted-fg);
    background: var(--utm-muted);
}
.table-hover > tbody > tr:hover > td {
    background: var(--utm-accent);
}
hr {
    border-color: var(--utm-border);
}

/* Store packages */
.package {
    border: 1px solid var(--utm-border) !important;
}
.package-title {
    font-weight: 600;
    color: var(--utm-fg);
}
.package .price,
.package-price {
    color: var(--utm-fg);
}

/* ---------- Forms ---------- */
.form-control,
select.form-control,
.input-group-addon,
.bootstrap-select .btn,
textarea {
    background-color: var(--utm-bg);
    border-color: var(--utm-input);
    color: var(--utm-fg);
}
.form-control::placeholder {
    color: #5c6475;
}
.form-control:focus {
    border-color: var(--utm-ring);
    box-shadow: 0 0 0 3px rgba(56, 150, 250, 0.2);
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 500;
    border-radius: var(--border-radius-base);
}
.btn-primary {
    background: var(--utm-primary);
    border-color: var(--utm-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--utm-primary-dark);
    border-color: var(--utm-primary-dark);
    color: #fff;
}
.btn-default,
.btn-outline,
.btn-secondary {
    background: transparent;
    border-color: var(--utm-border);
    color: var(--utm-fg);
}
.btn-default:hover,
.btn-outline:hover,
.btn-secondary:hover {
    background: var(--utm-accent);
    border-color: #3a4152;
    color: #fff;
}

/* ---------- Homepage hero ---------- */
.main-banner.banner-home {
    background:
        radial-gradient(55% 120% at 15% 0%, rgba(30, 202, 211, 0.14) 0%, transparent 60%),
        radial-gradient(45% 120% at 85% 10%, rgba(101, 93, 198, 0.18) 0%, transparent 60%),
        var(--utm-bg);
    border-bottom: 1px solid var(--utm-border);
}
.main-banner.banner-home .banner-background {
    display: none;
}
.main-banner .banner-title {
    color: var(--utm-fg);
}

/* Homepage action tiles */
.tile .tile-title,
.tile-title {
    color: var(--utm-fg);
}

/* ---------- Footer ---------- */
.main-footer,
.footer-bottom {
    background: var(--utm-bg);
    border-top: 1px solid var(--utm-border);
    color: var(--utm-muted-fg);
}
.main-footer a {
    color: var(--utm-muted-fg);
}
.main-footer a:hover {
    color: var(--utm-fg);
}

/* ---------- Scrollbars ---------- */
* {
    scrollbar-color: #2d3341 transparent;
}

/* ======================================================================
 * Top navigation (body.utm-brand = Lagom "default" top layout via overwrite)
 * One 64px bar like utmstack.com: logo | menu | cart, currency, account
 * ==================================================================== */
body.utm-brand .app-nav {
    background: rgba(19, 23, 32, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--utm-border);
}
body.utm-brand .app-nav-header,
body.utm-brand .app-nav-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Menu items: plain text, no isometric icons */
body.utm-brand .menu-primary > li > a > .svg-icon,
body.utm-brand .menu-primary > li > a > i.ls,
body.utm-brand .menu-primary > li > a > img {
    display: none !important;
}
body.utm-brand .menu-primary > li > a {
    color: var(--utm-body-fg);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--border-radius-base);
}
body.utm-brand .menu-primary > li > a:hover,
body.utm-brand .menu-primary > li.open > a,
body.utm-brand .menu-primary > li.active > a {
    color: var(--utm-fg);
    background: var(--utm-accent);
}
body.utm-brand .menu-primary > li > a::after,
body.utm-brand .menu-primary > li > a::before {
    display: none;
}

/* Right side utilities */
body.utm-brand .top-nav > li > a,
body.utm-brand .top-nav .item-text {
    color: var(--utm-body-fg);
    font-size: 14px;
}
body.utm-brand .top-nav > li > a:hover {
    color: var(--utm-fg);
}
body.utm-brand .top-nav > li.my-account {
    display: flex !important;
}
body.utm-brand .top-nav > li.my-account > a {
    border: 1px solid var(--utm-border);
    border-radius: var(--border-radius-base);
    padding: 7px 14px;
    color: var(--utm-fg);
    font-weight: 500;
}
body.utm-brand .top-nav > li.my-account > a:hover {
    background: var(--utm-accent);
}
body.utm-brand .top-nav > li.my-account > a .ls,
body.utm-brand .top-nav > li.my-account > a .svg-icon {
    display: none;
}


/* ======================================================================
 * Homepage: hero like utmstack.com (fine grid + soft blue light) and
 * separate bordered cards with Lucide line icons (MIT) instead of
 * Lagom's isometric artwork.
 * ==================================================================== */
body.utm-brand .main-banner.banner-home {
    background:
        radial-gradient(60% 90% at 50% 0%, rgba(0, 123, 255, 0.16) 0%, transparent 70%),
        radial-gradient(35% 60% at 85% 20%, rgba(101, 93, 198, 0.10) 0%, transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--utm-bg);
    border-bottom: 1px solid var(--utm-border);
}

body.utm-brand .page-homepage .section-body,
body.utm-brand.page-homepage .section-body {
    background: transparent;
    border: 0 !important;
    box-shadow: none;
    padding: 0;
}
body.utm-brand .tiles.row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
body.utm-brand .tiles.row::before,
body.utm-brand .tiles.row::after {
    display: none;
}
body.utm-brand .tiles.row > [class*="col-"] {
    width: 100%;
    max-width: none;
    float: none;
    padding: 0;
}
@media (max-width: 767px) {
    body.utm-brand .tiles.row {
        grid-template-columns: 1fr;
    }
}

body.utm-brand .tile.tile-home {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
    gap: 16px;
    height: 100%;
    padding: 24px;
    text-align: left;
    background: var(--utm-card);
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: none;
    width: 100%;
    transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
body.utm-brand .tile.tile-home:hover {
    border-color: rgba(0, 123, 255, 0.55) !important;
    background: #1f2531;
    transform: translateY(-2px);
}
body.utm-brand .tile.tile-home .tile-icon {
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: 0 !important;
    border-radius: 10px;
    background: rgba(0, 123, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.utm-brand .tile.tile-home .tile-icon > * {
    display: none !important;
}
body.utm-brand .tile.tile-home .tile-icon::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: var(--utm-ring);
    -webkit-mask: var(--utm-tile-icon) no-repeat center / contain;
    mask: var(--utm-tile-icon) no-repeat center / contain;
}
body.utm-brand .tile.tile-home[href*="cart.php"] { --utm-tile-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z%22/%3E%3Cpath d=%22m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z%22/%3E%3Cpath d=%22M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0%22/%3E%3Cpath d=%22M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5%22/%3E%3C/svg%3E"); }
body.utm-brand .tile.tile-home[href*="clientarea.php"] { --utm-tile-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2214%22 x=%222%22 y=%225%22 rx=%222%22/%3E%3Cline x1=%222%22 x2=%2222%22 y1=%2210%22 y2=%2210%22/%3E%3C/svg%3E"); }
body.utm-brand .tile.tile-home[href*="submitticket.php"] { --utm-tile-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z%22/%3E%3Cpath d=%22M21 16v2a4 4 0 0 1-4 4h-5%22/%3E%3C/svg%3E"); }
body.utm-brand .tile.tile-home .tile-title {
    color: var(--utm-fg);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}
body.utm-brand .tile.tile-home .tile-title::after {
    content: " \2192";
    color: var(--utm-muted-fg);
    transition: color .15s ease;
}
body.utm-brand .tile.tile-home:hover .tile-title::after {
    color: var(--utm-ring);
}
body.utm-brand.page-homepage .section-header .section-title,
body.utm-brand .page-homepage .section-title {
    color: var(--utm-fg);
    font-weight: 600;
    font-size: 20px;
}

/* ======================================================================
 * Store (product group pages) like utmstack.com/pricing
 * ==================================================================== */

/* Nav: active item without the tall block; dropdown items without icons */
body.utm-brand .menu-primary > li.active > a {
    background: transparent;
    color: var(--utm-fg);
}
body.utm-brand .menu-primary .dropdown-menu {
    background: var(--utm-popover);
    border: 1px solid var(--utm-border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    min-width: 280px;
}
body.utm-brand .menu-primary .dropdown-menu .dropdown-title,
body.utm-brand .menu-primary .dropdown-menu .h6 {
    color: var(--utm-muted-fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 8px 10px 4px;
}
body.utm-brand .menu-primary .dropdown-menu a {
    color: var(--utm-body-fg);
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 6px;
    background: transparent;
}
body.utm-brand .menu-primary .dropdown-menu a:hover,
body.utm-brand .menu-primary .dropdown-menu .active > a,
body.utm-brand .menu-primary .dropdown-menu a.active {
    background: var(--utm-accent);
    color: var(--utm-fg);
}
body.utm-brand .menu-primary .dropdown-menu i.ls,
body.utm-brand .menu-primary .dropdown-menu .svg-icon {
    display: none !important;
}

/* Page title: normal size, not a billboard */
body.utm-brand.page-products .main-header-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
}
body.utm-brand.page-products .main-header .main-header-subtitle,
body.utm-brand.page-products .main-header p {
    color: var(--utm-muted-fg);
}

/* Categories: horizontal tabs above the plans (desktop) */
@media (min-width: 1200px) {
    body.utm-brand.page-products .main-grid {
        display: flex;
        flex-direction: column;
    }
    body.utm-brand.page-products .main-sidebar {
        order: -1;
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
        margin: 0 0 24px;
        padding: 0;
    }
    body.utm-brand.page-products .main-sidebar .sidebar-sticky {
        position: static;
    }
    body.utm-brand.page-products .main-content {
        width: 100%;
        max-width: none;
    }
}
body.utm-brand.page-products .main-sidebar .panel-sidebar {
    background: transparent;
    border: 0 !important;
    padding: 0;
    margin: 0;
}
body.utm-brand.page-products .main-sidebar .panel-sidebar + .panel-sidebar {
    display: none;
}
body.utm-brand.page-products .main-sidebar .panel-heading {
    display: none;
}
body.utm-brand.page-products .main-sidebar .list-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: var(--utm-muted);
    border: 1px solid var(--utm-border);
    border-radius: 10px;
    width: fit-content;
    max-width: 100%;
}
body.utm-brand.page-products .main-sidebar .list-group-item {
    background: transparent;
    border: 0 !important;
    border-radius: 7px;
    color: var(--utm-body-fg);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    margin: 0;
    white-space: nowrap;
}
body.utm-brand.page-products .main-sidebar .list-group-item:hover {
    color: var(--utm-fg);
    background: var(--utm-accent);
}
body.utm-brand.page-products .main-sidebar .list-group-item.active {
    background: var(--utm-card);
    color: var(--utm-fg);
    box-shadow: 0 0 0 1px var(--utm-border);
}
body.utm-brand.page-products .main-sidebar .list-group-item i.ls,
body.utm-brand.page-products .main-sidebar .list-group-item .svg-icon,
body.utm-brand.page-products .main-sidebar .list-group-item::before {
    display: none !important;
}

/* Plans grid: all packages in one responsive grid */
body.utm-brand.page-products .section.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}
body.utm-brand.page-products .section.products > .row {
    display: contents;
}
body.utm-brand.page-products .section.products > .row > .col {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    float: none;
}

/* Plan card */
body.utm-brand .package {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 24px;
    text-align: left;
    background: var(--utm-card);
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: none;
}
body.utm-brand .package:hover {
    border-color: #3a4152 !important;
}
body.utm-brand .package.package-featured {
    border-color: rgba(0, 123, 255, 0.6) !important;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(0, 123, 255, 0.10) 0%, transparent 70%),
        var(--utm-card);
}
body.utm-brand .package .package-side,
body.utm-brand .package .package-header,
body.utm-brand .package .package-body,
body.utm-brand .package .package-footer {
    padding: 0;
    margin: 0;
    text-align: left;
    border: 0;
    background: transparent;
    width: 100%;
}
body.utm-brand .package .package-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--utm-fg);
    margin: 0 0 12px;
    padding-right: 80px;
    text-align: left;
}
body.utm-brand .package .price {
    text-align: left;
    margin: 0 0 20px;
}
body.utm-brand .package .price-amount {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--utm-fg);
}
body.utm-brand .package .price-starting-from,
body.utm-brand .package .price-cycle {
    font-size: 13px;
    color: var(--utm-muted-fg);
}
body.utm-brand .package .package-body {
    flex: 1 1 auto;
    border-top: 1px solid var(--utm-border);
    padding-top: 18px;
    margin-bottom: 20px;
}
body.utm-brand .package .package-content {
    text-align: left;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--utm-body-fg);
}
body.utm-brand .package .package-content strong {
    color: var(--utm-fg);
    font-weight: 600;
}
body.utm-brand .utm-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
body.utm-brand .utm-features li {
    position: relative;
    padding-left: 24px;
}
body.utm-brand .utm-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    background-color: var(--utm-ring);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E") no-repeat center / contain;
}
body.utm-brand .package .btn-order-now {
    width: 100%;
    font-size: 15px;
    padding: 11px 16px;
    border-radius: 8px;
}
body.utm-brand .package:not(.package-featured) .btn-order-now {
    background: transparent;
    border: 1px solid var(--utm-border);
    color: var(--utm-fg);
}
body.utm-brand .package:not(.package-featured) .btn-order-now:hover {
    background: var(--utm-accent);
    border-color: #3a4152;
}

/* "Featured" corner ribbon -> small pill badge */
body.utm-brand .package .label-corner {
    position: absolute;
    top: 22px;
    right: 20px;
    left: auto;
    width: auto;
    height: auto;
    transform: none;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
    text-transform: none;
    color: var(--utm-ring);
    background: rgba(0, 123, 255, 0.14);
    border: 1px solid rgba(56, 150, 250, 0.35);
    border-radius: 999px;
    box-shadow: none;
    overflow: visible;
}
body.utm-brand .package .label-corner::before,
body.utm-brand .package .label-corner::after {
    display: none;
}

/* Store fixes: tabs in one row, left-aligned prices, badge space only on featured */
body.utm-brand.page-products .main-sidebar .list-group-item {
    display: inline-flex;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
}
body.utm-brand.page-products .main-sidebar .list-group-item,
body.utm-brand.page-products .main-sidebar .list-group-item:focus {
    color: var(--utm-body-fg);
}
body.utm-brand.page-products .main-sidebar .list-group-item.active,
body.utm-brand.page-products .main-sidebar .list-group-item:hover {
    color: var(--utm-fg);
}
body.utm-brand .package .package-side,
body.utm-brand .package .package-header,
body.utm-brand .package .package-price,
body.utm-brand .package .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
body.utm-brand .package .price-amount,
body.utm-brand .package .price-starting-from,
body.utm-brand .package .price-cycle {
    text-align: left;
    width: 100%;
}
body.utm-brand .package .package-title {
    padding-right: 0;
}
body.utm-brand .package.package-featured .package-title {
    padding-right: 84px;
}

/* Category tabs: neutral text (beat Lagom's link colour) */
body.utm-brand.page-products .main-sidebar .list-group > a.list-group-item {
    color: var(--utm-body-fg) !important;
}
body.utm-brand.page-products .main-sidebar .list-group > a.list-group-item.active,
body.utm-brand.page-products .main-sidebar .list-group > a.list-group-item:hover {
    color: var(--utm-fg) !important;
}

/* Lagom leaves the active section's dropdown open on load and it covers the
   page title: on desktop only show a dropdown while it is hovered/focused. */
@media (min-width: 992px) {
    body.utm-brand .menu-primary > li.open:not(:hover):not(:focus-within) > .dropdown-menu {
        display: none;
    }
}

/* Store: the category tabs duplicate the Products menu in the top bar -> hide
   them (desktop tabs and the mobile "categories" dropdown). */
body.utm-brand.page-products .main-sidebar,
body.utm-brand.page-products .categories-collapsed {
    display: none !important;
}

/* Top-bar dropdowns: hover/focus only on desktop, never left open over the page */
@media (min-width: 992px) {
    body.utm-brand .menu-primary > li > .dropdown-menu {
        display: none !important;
    }
    body.utm-brand .menu-primary > li:hover > .dropdown-menu,
    body.utm-brand .menu-primary > li:focus-within > .dropdown-menu {
        display: block !important;
    }
    /* invisible bridge so the menu doesn't close while moving the mouse down */
    body.utm-brand .menu-primary > li > .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }
}

/* ======================================================================
 * Plan card motion (store): staggered entrance, cursor spotlight,
 * rotating brand-gradient border on the featured plan.
 * ==================================================================== */
@property --utm-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes utm-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes utm-spin {
    to { --utm-angle: 360deg; }
}

body.utm-brand .package {
    isolation: isolate;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .25s ease, box-shadow .25s ease;
    animation: utm-rise .55s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--utm-i, 0) * 70ms);
}
body.utm-brand .package:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 150, 250, 0.45) !important;
    box-shadow: 0 18px 40px -18px rgba(0, 123, 255, 0.45);
}

/* Spotlight that follows the cursor (position set by the hook's script) */
body.utm-brand .package::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--utm-mx, 50%) var(--utm-my, 0%),
                                rgba(0, 123, 255, 0.13), transparent 45%);
    opacity: 0;
    transition: opacity .3s ease;
}
body.utm-brand .package:hover::after {
    opacity: 1;
}

/* Featured plan: rotating gradient border */
body.utm-brand .package.package-featured {
    border-color: transparent !important;
}
body.utm-brand .package.package-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--utm-angle),
                                #1ecad3, #3a8dde, #655dc6, #3a8dde, #1ecad3);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: utm-spin 6s linear infinite;
}
body.utm-brand .package.package-featured:hover {
    box-shadow: 0 22px 50px -18px rgba(58, 141, 222, 0.6);
}

/* Order button: subtle shine on hover */
body.utm-brand .package .btn-order-now {
    position: relative;
    overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
body.utm-brand .package .btn-order-now::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
body.utm-brand .package:hover .btn-order-now::after {
    left: 120%;
}

@media (prefers-reduced-motion: reduce) {
    body.utm-brand .package,
    body.utm-brand .package.package-featured::before {
        animation: none !important;
    }
    body.utm-brand .package,
    body.utm-brand .package .btn-order-now {
        transition: none !important;
    }
    body.utm-brand .package:hover {
        transform: none;
    }
    body.utm-brand .package .btn-order-now::after {
        display: none;
    }
}

/* Plan cards: alignment fixes
   - Lagom renders the price twice (header + footer); keep only the header one.
   - Fixed-height title and price blocks so every feature list starts on the same line.
   - "Featured" badge sits on the top border so it doesn't squeeze the title. */
body.utm-brand .package .package-footer .package-price {
    display: none !important;
}
body.utm-brand .package .package-footer {
    margin-top: auto;
}
body.utm-brand .package .package-title,
body.utm-brand .package.package-featured .package-title {
    padding-right: 0;
    min-height: 2.6em;            /* room for two lines, so 1- and 2-line titles align */
    display: flex;
    align-items: flex-start;
}
body.utm-brand .package .package-header .price {
    min-height: 82px;            /* "Starting from" + amount + cycle */
    justify-content: flex-start;
    gap: 2px;
    margin-bottom: 18px;
}
/* Prices without the "Starting from" label (e.g. FREE!) line up with the others */
body.utm-brand .package .package-header .price:not(:has(.price-starting-from)) .price-amount {
    margin-top: 19px;
}
body.utm-brand .package .price-starting-from,
body.utm-brand .package .price-cycle {
    line-height: 17px;
}
body.utm-brand .package .package-body {
    margin-top: 0;
}

body.utm-brand .package .label-corner {
    top: 14px;
    right: 14px;
}

/* Plan cards: spacing polish */
body.utm-brand .package .package-title,
body.utm-brand .package.package-featured .package-title {
    min-height: 0;
    margin: 16px 0 14px;          /* clears the "Featured" badge row on every card */
}
body.utm-brand .package .package-header .price {
    min-height: 76px;
}
body.utm-brand .package .label-corner {
    top: 12px;
    right: 12px;
}
body.utm-brand .package .package-footer {
    padding-top: 24px;
}
body.utm-brand .package .package-header .package-price,
body.utm-brand .package .package-header .price {
    margin-top: 0;
    padding-top: 0;
}
body.utm-brand .package .package-header {
    gap: 0;
}

/* Plan descriptions: label, prose and checklist variants */
body.utm-brand .utm-features-title {
    color: var(--utm-muted-fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
body.utm-brand .utm-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--utm-body-fg);
}
/* JS equalizes heights; drop the fixed CSS minimums used before */
body.utm-brand .package .package-header .price {
    min-height: 0;
}
body.utm-brand .package .package-header .price:not(:has(.price-starting-from)) .price-amount {
    margin-top: 0;
}

/* Groups with only a few plans: wider cards instead of narrow ones on the left */
body.utm-brand.page-products .section.products {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
body.utm-brand.page-products .section.products:not(:has(> .row + .row)):not(:has(> .row > .col:nth-child(3))) {
    max-width: 820px;
}

/* ======================================================================
 * Plan cards: per-plan icon, top highlight line, narrower few-plan grid
 * ==================================================================== */
body.utm-brand .package {
    background-image: linear-gradient(90deg, transparent 0%, rgba(56, 150, 250, 0.45) 50%, transparent 100%);
    background-size: 100% 1px;
    background-position: top center;
    background-repeat: no-repeat;
}
body.utm-brand .package.package-featured {
    background:
        linear-gradient(90deg, transparent 0%, rgba(56, 150, 250, 0.6) 50%, transparent 100%) top center / 100% 1px no-repeat,
        radial-gradient(120% 60% at 50% 0%, rgba(0, 123, 255, 0.10) 0%, transparent 70%),
        var(--utm-card);
}
body.utm-brand .utm-plan-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 123, 255, 0.12);
    border: 1px solid rgba(56, 150, 250, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
body.utm-brand .utm-plan-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--utm-ring);
    -webkit-mask: var(--utm-plan-icon) no-repeat center / contain;
    mask: var(--utm-plan-icon) no-repeat center / contain;
}
body.utm-brand .package:hover .utm-plan-icon {
    background: rgba(0, 123, 255, 0.2);
    border-color: rgba(56, 150, 250, 0.45);
    transform: scale(1.05);
}
body.utm-brand .package .utm-plan-icon + .package-title {
    margin-top: 14px;
}
body.utm-brand .utm-ic-scan { --utm-plan-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7V5a2 2 0 0 1 2-2h2%22/%3E%3Cpath d=%22M17 3h2a2 2 0 0 1 2 2v2%22/%3E%3Cpath d=%22M21 17v2a2 2 0 0 1-2 2h-2%22/%3E%3Cpath d=%22M7 21H5a2 2 0 0 1-2-2v-2%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22m16 16-1.9-1.9%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-ic-crosshair { --utm-plan-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cline x1=%2222%22 x2=%2218%22 y1=%2212%22 y2=%2212%22/%3E%3Cline x1=%226%22 x2=%222%22 y1=%2212%22 y2=%2212%22/%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%226%22 y2=%222%22/%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%2222%22 y2=%2218%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-ic-sparkles { --utm-plan-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z%22/%3E%3Cpath d=%22M20 3v4%22/%3E%3Cpath d=%22M22 5h-4%22/%3E%3Cpath d=%22M4 17v2%22/%3E%3Cpath d=%22M5 18H3%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-ic-shield { --utm-plan-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-ic-building { --utm-plan-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z%22/%3E%3Cpath d=%22M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2%22/%3E%3Cpath d=%22M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2%22/%3E%3Cpath d=%22M10 6h4%22/%3E%3Cpath d=%22M10 10h4%22/%3E%3Cpath d=%22M10 14h4%22/%3E%3Cpath d=%22M10 18h4%22/%3E%3C/svg%3E"); }

/* Few plans (<= 3): fixed-width columns instead of stretching across the page */
body.utm-brand.page-products .section.products.utm-few {
    grid-template-columns: repeat(var(--utm-count, 2), minmax(0, 380px));
    max-width: none;
}
@media (max-width: 991px) {
    body.utm-brand.page-products .section.products.utm-few {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================
 * Configure product (cart.php?a=confproduct)
 * ==================================================================== */
body.utm-brand.page-configureproduct .main-header-title {
    font-size: 30px;
}

/* Numbered steps on each section title */
body.utm-brand.page-configureproduct .main-content {
    counter-reset: utm-step;
}
body.utm-brand.page-configureproduct .main-content .section-header .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--utm-fg);
    margin: 0;
}
body.utm-brand.page-configureproduct .main-content .section-header .section-title::before {
    counter-increment: utm-step;
    content: counter(utm-step);
    flex: 0 0 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--utm-ring);
    background: rgba(0, 123, 255, 0.12);
    border: 1px solid rgba(56, 150, 250, 0.3);
}
body.utm-brand.page-configureproduct .main-content .section-header {
    margin-bottom: 14px;
}
body.utm-brand.page-configureproduct .main-content > .section + .section,
body.utm-brand.page-configureproduct .main-content .section {
    margin-bottom: 28px;
}

/* Panels */
body.utm-brand.page-configureproduct .panel-form,
body.utm-brand.page-configureproduct .product-config-info {
    background: var(--utm-card);
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: none;
}
body.utm-brand.page-configureproduct .panel-form .panel-body {
    padding: 20px 24px;
}

/* Product card */
body.utm-brand.page-configureproduct .product-config-info {
    background:
        linear-gradient(90deg, transparent 0%, rgba(56, 150, 250, 0.45) 50%, transparent 100%) top center / 100% 1px no-repeat,
        radial-gradient(90% 70% at 0% 0%, rgba(0, 123, 255, 0.08) 0%, transparent 60%),
        var(--utm-card);
}
body.utm-brand.page-configureproduct .product-config-info .panel-body {
    padding: 24px 28px 26px;
}
body.utm-brand .utm-config-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--utm-border);
}
body.utm-brand .utm-config-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--utm-fg);
}
body.utm-brand .utm-features-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 10px;
    font-size: 14px;
    color: var(--utm-body-fg);
}
body.utm-brand .utm-features-2col strong {
    color: var(--utm-fg);
}
@media (max-width: 767px) {
    body.utm-brand .utm-features-2col {
        grid-template-columns: 1fr;
    }
}

/* Billing cycle option cards */
body.utm-brand .panel-check-group {
    row-gap: 12px;
}
body.utm-brand .panel-check {
    position: relative;
    margin: 0;
    background: var(--utm-card);
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
}
body.utm-brand .panel-check:hover {
    border-color: #3a4152 !important;
}
body.utm-brand .panel-check.checked {
    border-color: var(--utm-primary) !important;
    background: rgba(0, 123, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}
body.utm-brand .panel-check.checked::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background-color: var(--utm-primary);
    -webkit-mask: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(0);
}
body.utm-brand .panel-check .check-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
body.utm-brand .utm-cycle-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--utm-muted-fg);
    text-transform: none;
}
body.utm-brand .utm-cycle-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--utm-fg);
    letter-spacing: -0.01em;
}
body.utm-brand .panel-check.checked .utm-cycle-name {
    color: var(--utm-ring);
}

/* Selects and inputs */
body.utm-brand.page-order select.form-control,
body.utm-brand.page-configureproduct select.form-control {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    padding: 0 40px 0 14px;
    font-size: 14px;
    background-color: var(--utm-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2389909f%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    border: 1px solid var(--utm-input);
    border-radius: 8px;
    color: var(--utm-fg);
}
body.utm-brand.page-order input.form-control {
    height: 44px;
    border-radius: 8px;
}
body.utm-brand.page-order .form-group label,
body.utm-brand.page-order label.control-label {
    color: var(--utm-body-fg);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Order summary */
body.utm-brand .panel-summary {
    background: var(--utm-card);
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.7);
}
body.utm-brand .panel-summary .panel-heading {
    background: transparent;
    border: 0;
    padding-bottom: 0;
}
body.utm-brand .panel-summary .panel-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--utm-fg);
}
body.utm-brand .panel-summary .price,
body.utm-brand .panel-summary .total-due-today .amt,
body.utm-brand .panel-summary [class*="total"] .price-amount {
    color: var(--utm-fg);
}
body.utm-brand .panel-summary .btn-checkout,
body.utm-brand .btn-checkout {
    width: 100%;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    background: var(--utm-primary);
    border-color: var(--utm-primary);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(0, 123, 255, 0.8);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.utm-brand .btn-checkout:hover {
    background: var(--utm-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -12px rgba(0, 123, 255, 0.9);
}
body.utm-brand .utm-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-secure::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Order summary rows: name grows, amount stays on one line */
body.utm-brand .panel-summary .summary-list .list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
body.utm-brand .panel-summary .summary-list .item-name {
    flex: 1 1 auto;
    min-width: 0;
}
body.utm-brand .panel-summary .summary-list .item-value {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}
body.utm-brand .panel-summary .summary-list .item-value-free {
    display: none;
}
body.utm-brand .panel-summary .summary-list .faded .item-value {
    color: var(--utm-muted-fg);
}
body.utm-brand .panel-summary .summary-list .item-optionname {
    color: var(--utm-body-fg);
}
body.utm-brand .panel-summary .panel-footer {
    background: transparent;
    border-top: 1px solid var(--utm-border);
}
body.utm-brand .panel-summary .panel-footer .price {
    padding: 0;
    text-align: left;
}
body.utm-brand .panel-summary .price-total {
    color: var(--utm-muted-fg);
    font-size: 13px;
}
body.utm-brand .panel-summary .price-amount {
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--utm-fg);
}

/* Store: wider page and roomier plan cards */
@media (min-width: 1200px) {
    body.utm-brand.page-products .main-body > .container,
    body.utm-brand.page-products .main-header > .container,
    body.utm-brand.page-products .main-body .container {
        width: auto;
        max-width: 1480px;
        padding-left: 32px;
        padding-right: 32px;
    }
}
body.utm-brand.page-products .section.products {
    gap: 20px;
}
body.utm-brand.page-products .section.products:not(.utm-few) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
body.utm-brand .package {
    padding: 28px;
}
body.utm-brand .package .package-content {
    font-size: 14px;
}
body.utm-brand.page-products .section.products.utm-few {
    grid-template-columns: repeat(var(--utm-count, 2), minmax(0, 420px));
}

/* ======================================================================
 * Homepage marketing (copy and figures from utmstack.com)
 * ==================================================================== */
body.utm-brand .utm-i {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask: var(--utm-i) no-repeat center / contain;
    mask: var(--utm-i) no-repeat center / contain;
}
body.utm-brand .utm-i-arrow-right { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-play { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%226 3 20 12 6 21 6 3%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-badge-check { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-award { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526%22/%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%226%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-shield { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-layers { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z%22/%3E%3Cpath d=%22m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65%22/%3E%3Cpath d=%22m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-zap { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-wallet { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1%22/%3E%3Cpath d=%22M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-cloud { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-logs { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 12h-5%22/%3E%3Cpath d=%22M15 8h-5%22/%3E%3Cpath d=%22M19 17V5a2 2 0 0 0-2-2H4%22/%3E%3Cpath d=%22M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-radar { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19.07 4.93A10 10 0 0 0 6.99 3.34%22/%3E%3Cpath d=%22M4 6h.01%22/%3E%3Cpath d=%22M2.29 9.62A10 10 0 1 0 21.31 8.35%22/%3E%3Cpath d=%22M16.24 7.76A6 6 0 1 0 8.23 16.67%22/%3E%3Cpath d=%22M12 18h.01%22/%3E%3Cpath d=%22M17.99 11.66A6 6 0 0 1 15.77 16.67%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22/%3E%3Cpath d=%22m13.41 10.59 5.66-5.66%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-workflow { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%228%22 height=%228%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3Cpath d=%22M7 11v4a2 2 0 0 0 2 2h4%22/%3E%3Crect width=%228%22 height=%228%22 x=%2213%22 y=%2213%22 rx=%222%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-sparkles { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z%22/%3E%3Cpath d=%22M20 3v4%22/%3E%3Cpath d=%22M22 5h-4%22/%3E%3Cpath d=%22M4 17v2%22/%3E%3Cpath d=%22M5 18H3%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-scan { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7V5a2 2 0 0 1 2-2h2%22/%3E%3Cpath d=%22M17 3h2a2 2 0 0 1 2 2v2%22/%3E%3Cpath d=%22M21 17v2a2 2 0 0 1-2 2h-2%22/%3E%3Cpath d=%22M7 21H5a2 2 0 0 1-2-2v-2%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22m16 16-1.9-1.9%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-calendar { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3C/svg%3E"); }

/* Hero */
body.utm-brand .main-banner.banner-home {
    padding: 88px 0 72px;
}
body.utm-brand .utm-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
}
body.utm-brand .utm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 26px;
    font-size: 13px;
    color: var(--utm-body-fg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--utm-border);
    border-radius: 999px;
}
body.utm-brand .utm-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}
body.utm-brand .utm-hero .banner-title {
    font-size: 54px;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
}
body.utm-brand .utm-grad {
    background: var(--utm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.utm-brand .utm-lead {
    max-width: 720px;
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--utm-body-fg);
}
body.utm-brand .utm-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
body.utm-brand .utm-btn-lg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
}
body.utm-brand .utm-btn-lg.btn-primary {
    box-shadow: 0 10px 28px -12px rgba(0, 123, 255, 0.9);
}
body.utm-brand .utm-btn-lg.btn-primary .utm-i {
    transition: transform .2s ease;
}
body.utm-brand .utm-btn-lg.btn-primary:hover .utm-i {
    transform: translateX(3px);
}
body.utm-brand .utm-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin-top: 36px;
    font-size: 13px;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
body.utm-brand .utm-trust .utm-i {
    color: var(--utm-ring);
    font-size: 16px;
}

/* Quick action tiles: centered, "Start Here!" highlighted */
body.utm-brand.page-homepage .section-header {
    text-align: center;
}
body.utm-brand.page-homepage .section-header .section-title {
    font-size: 22px;
}
body.utm-brand .tile.tile-home {
    position: relative;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 24px 28px;
}
body.utm-brand .tile.tile-home .tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}
body.utm-brand .tile.tile-home .tile-icon::before {
    width: 26px;
    height: 26px;
}
body.utm-brand .tile.tile-home .tile-title {
    font-size: 18px;
}
body.utm-brand .utm-tile-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--utm-muted-fg);
    max-width: 260px;
}
body.utm-brand .tile.tile-home.utm-tile-primary {
    isolation: isolate;
    border-color: transparent !important;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(0, 123, 255, 0.16) 0%, transparent 65%),
        var(--utm-card);
    box-shadow: 0 24px 60px -30px rgba(0, 123, 255, 0.75);
    transform: translateY(-6px);
}
body.utm-brand .tile.tile-home.utm-tile-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--utm-angle), #1ecad3, #3a8dde, #655dc6, #3a8dde, #1ecad3);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: utm-spin 6s linear infinite;
    pointer-events: none;
}
body.utm-brand .tile.tile-home.utm-tile-primary:hover {
    transform: translateY(-9px);
}
body.utm-brand .tile.tile-home.utm-tile-primary .tile-icon {
    background: var(--utm-primary);
    box-shadow: 0 10px 24px -10px rgba(0, 123, 255, 0.9);
}
body.utm-brand .tile.tile-home.utm-tile-primary .tile-icon::before {
    background-color: #fff;
}
body.utm-brand .tile.tile-home.utm-tile-primary .tile-title::after {
    color: var(--utm-ring);
}
body.utm-brand .utm-tile-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--utm-ring);
    background: rgba(0, 123, 255, 0.14);
    border: 1px solid rgba(56, 150, 250, 0.35);
    border-radius: 999px;
}

/* Marketing sections */
body.utm-brand .utm-home-wrap {
    margin-top: 72px;
}
body.utm-brand .utm-home {
    margin: 0 0 80px;
}
body.utm-brand .utm-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--utm-border);
    border-bottom: 1px solid var(--utm-border);
}
body.utm-brand .utm-stat {
    padding: 30px 16px;
    text-align: center;
}
body.utm-brand .utm-stat + .utm-stat {
    border-left: 1px solid var(--utm-border);
}
body.utm-brand .utm-stat-num {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--utm-fg);
}
body.utm-brand .utm-stat-label {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-block-head {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}
body.utm-brand .utm-kicker {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--utm-ring);
}
body.utm-brand .utm-block-head h2,
body.utm-brand .utm-final h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--utm-fg);
}
body.utm-brand .utm-block-head p,
body.utm-brand .utm-final p {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--utm-body-fg);
}
body.utm-brand .utm-grid {
    display: grid;
    gap: 16px;
}
body.utm-brand .utm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.utm-brand .utm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.utm-brand .utm-card {
    padding: 24px;
    background: var(--utm-card);
    border: 1px solid var(--utm-border);
    border-radius: 12px;
    transition: border-color .2s ease, transform .2s ease;
}
body.utm-brand .utm-card:hover {
    border-color: rgba(56, 150, 250, 0.45);
    transform: translateY(-3px);
}
body.utm-brand .utm-card-ic {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 123, 255, 0.12);
    border: 1px solid rgba(56, 150, 250, 0.22);
    color: var(--utm-ring);
    font-size: 20px;
}
body.utm-brand .utm-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--utm-fg);
}
body.utm-brand .utm-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-final {
    padding: 56px 32px;
    text-align: center;
    border: 1px solid var(--utm-border);
    border-radius: 16px;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(0, 123, 255, 0.18) 0%, transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--utm-muted);
}
body.utm-brand .utm-final .utm-cta {
    margin-top: 28px;
}

@media (max-width: 1199px) {
    body.utm-brand .utm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.utm-brand .utm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.utm-brand .utm-stat:nth-child(4) { border-left: 0; }
}
@media (max-width: 767px) {
    body.utm-brand .utm-hero .banner-title { font-size: 36px; }
    body.utm-brand .utm-grid-4,
    body.utm-brand .utm-grid-3 { grid-template-columns: 1fr; }
    body.utm-brand .utm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.utm-brand .utm-stat + .utm-stat { border-left: 0; }
    body.utm-brand .tile.tile-home.utm-tile-primary { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.utm-brand .tile.tile-home.utm-tile-primary::before { animation: none; }
}

/* Homepage: use more width (Lagom caps it with .m-w-lg) and tighten card headings */
body.utm-brand.page-homepage .main-body .m-w-lg {
    max-width: 1240px;
}
body.utm-brand .utm-card h3 {
    line-height: 1.35;
}
body.utm-brand.page-homepage .tiles.row {
    max-width: 1000px;
    margin: 0 auto;
}

/* Homepage v2: quick actions inside the hero (visible above the fold), roomier text */
body.utm-brand .main-banner.banner-home {
    padding: 64px 0 56px;
}
body.utm-brand .utm-hero {
    max-width: 1080px;
}
body.utm-brand .utm-hero .banner-title {
    font-size: 48px;
    margin-bottom: 18px;
}
body.utm-brand .utm-lead {
    font-size: 17px;
    margin-bottom: 36px;
}
body.utm-brand .utm-hero-actions {
    width: 100%;
}
body.utm-brand .utm-hero-actions .section {
    margin: 0;
}
body.utm-brand .utm-hero-actions .section-header {
    margin-bottom: 18px;
    text-align: center;
}
body.utm-brand .utm-hero-actions .section-header .section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--utm-fg);
}
body.utm-brand .utm-hero-actions .section-body {
    background: transparent;
    border: 0 !important;
    box-shadow: none;
    padding: 0;
}
body.utm-brand .utm-hero-actions .tiles.row {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}
body.utm-brand .utm-hero .utm-trust {
    margin-top: 40px;
}
body.utm-brand .utm-home-wrap {
    margin-top: 64px;
}

/* Less cramped text in the sections below */
body.utm-brand .utm-stat {
    padding: 34px 20px;
}
body.utm-brand .utm-stat-num {
    line-height: 1.1;
}
body.utm-brand .utm-stat-label {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.6;
}
body.utm-brand .utm-card {
    padding: 28px;
}
body.utm-brand .utm-card-ic {
    margin-bottom: 20px;
}
body.utm-brand .utm-card h3 {
    margin-bottom: 12px;
    font-size: 17px;
}
body.utm-brand .utm-card p {
    font-size: 14.5px;
    line-height: 1.7;
}
body.utm-brand .utm-grid {
    gap: 20px;
}
body.utm-brand .utm-block-head {
    margin-bottom: 44px;
}
body.utm-brand .utm-block-head p {
    line-height: 1.7;
}
body.utm-brand .utm-utm-tile-desc,
body.utm-brand .utm-tile-desc {
    line-height: 1.6;
}

/* ---------- Homepage v3: hero stats + logos, "Recognized and open" (as utmstack.com) ---------- */
body.utm-brand .utm-i-landmark { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cline x1=%223%22 x2=%2221%22 y1=%2222%22 y2=%2222%22/%3E%3Cline x1=%226%22 x2=%226%22 y1=%2218%22 y2=%2211%22/%3E%3Cline x1=%2210%22 x2=%2210%22 y1=%2218%22 y2=%2211%22/%3E%3Cline x1=%2214%22 x2=%2214%22 y1=%2218%22 y2=%2211%22/%3E%3Cline x1=%2218%22 x2=%2218%22 y1=%2218%22 y2=%2211%22/%3E%3Cpolygon points=%2212 2 20 7 4 7%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-github { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4%22/%3E%3Cpath d=%22M9 18c-4.51 2-5-2-7-2%22/%3E%3C/svg%3E"); }
body.utm-brand .utm-i-arrow-up-right { --utm-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 7h10v10%22/%3E%3Cpath d=%22M7 17 17 7%22/%3E%3C/svg%3E"); }

body.utm-brand .utm-own {
    margin: 28px 0 0;
    font-size: 14px;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-own a {
    color: var(--utm-ring);
}
body.utm-brand .utm-hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 44px 0 0;
    padding-top: 36px;
    border-top: 1px solid var(--utm-border);
    text-align: center;
}
body.utm-brand .utm-hero-stats dd {
    margin: 0;
}
body.utm-brand .utm-hs-num {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--utm-fg);
}
body.utm-brand .utm-hs-label {
    margin-top: 6px !important;
    font-size: 14px;
    line-height: 1.45;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    margin-top: 36px;
    font-size: 14px;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-logos-2 {
    margin-top: 18px;
}
body.utm-brand .utm-logo-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--utm-muted-fg);
}
body.utm-brand a.utm-logo-item:hover {
    color: var(--utm-fg);
}
body.utm-brand .utm-logo-item .utm-i {
    font-size: 17px;
    color: var(--utm-ring);
}
body.utm-brand .utm-logo-box {
    display: inline-flex;
    align-items: center;
    padding: 6px;
    background: #fff;
    border-radius: 6px;
}
body.utm-brand .utm-logo-box img {
    display: block;
    height: 34px;
    width: auto;
}

/* Recognized and open */
body.utm-brand .utm-recog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
    text-align: left;
}
body.utm-brand .utm-recog-head h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--utm-fg);
}
body.utm-brand .utm-recog-head p {
    max-width: 720px;
    margin: 14px 0 0;
    font-size: 20px;
    line-height: 1.6;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-recog-logos {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}
body.utm-brand .utm-logo-lg img {
    height: 42px;
}
body.utm-brand .utm-recog-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--utm-card);
    border: 1px solid var(--utm-border);
    border-radius: 12px;
    overflow: hidden;
}
body.utm-brand .utm-recog-item {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
}
body.utm-brand .utm-recog-item + .utm-recog-item {
    border-left: 1px solid var(--utm-border);
}
body.utm-brand .utm-recog-ic {
    color: var(--utm-ring);
    font-size: 20px;
    line-height: 1;
    margin-bottom: 18px;
}
body.utm-brand .utm-recog-item h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--utm-fg);
}
body.utm-brand .utm-recog-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--utm-muted-fg);
}
body.utm-brand .utm-recog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 24px;
    font-size: 14px;
    color: var(--utm-ring);
}
body.utm-brand .utm-recog-link .utm-i {
    font-size: 13px;
    transition: transform .2s ease;
}
body.utm-brand .utm-recog-link:hover .utm-i {
    transform: translate(2px, -2px);
}
body.utm-brand .utm-quote {
    max-width: 860px;
    margin: 64px auto 0;
    text-align: center;
}
body.utm-brand .utm-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--utm-fg);
}
body.utm-brand .utm-quote figcaption {
    margin-top: 20px;
    font-size: 14px;
    color: var(--utm-muted-fg);
}

@media (max-width: 1199px) {
    body.utm-brand .utm-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.utm-brand .utm-recog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.utm-brand .utm-recog-item + .utm-recog-item { border-left: 0; }
    body.utm-brand .utm-recog-item { border-top: 1px solid var(--utm-border); }
}
@media (max-width: 767px) {
    body.utm-brand .utm-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
    body.utm-brand .utm-recog-head { flex-direction: column; align-items: flex-start; }
    body.utm-brand .utm-recog-grid { grid-template-columns: 1fr; }
    body.utm-brand .utm-quote blockquote { font-size: 20px; }
}
body.utm-brand .utm-quote blockquote {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-style: normal;
}
body.utm-brand .utm-quote blockquote::before,
body.utm-brand .utm-quote blockquote::after {
    display: none !important;
}
body.utm-brand .utm-own {
    margin-top: 32px;
}


/* ======================================================================
 * Header v2: the primary menu is moved (JS) into the logo row on desktop,
 * so logo | menu | utilities share one flex row and can never overlap.
 * ==================================================================== */
@media (min-width: 992px) {
    body.utm-brand .app-nav {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    body.utm-brand .app-nav-header .container {
        height: 64px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    body.utm-brand .app-nav-header .container::before,
    body.utm-brand .app-nav-header .container::after {
        display: none;
    }
    body.utm-brand .app-nav-header .logo {
        flex: 0 0 auto;
        margin-right: 24px;
    }
    body.utm-brand .menu-primary.utm-inline-menu {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body.utm-brand .menu-primary.utm-inline-menu > li {
        position: relative;
        float: none;
    }
    body.utm-brand .menu-primary.utm-inline-menu > li > a {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        height: auto;
    }
    body.utm-brand .menu-primary.utm-inline-menu > li > .dropdown-menu {
        top: calc(100% + 10px);
        left: 0;
    }
    body.utm-brand.utm-menu-inline .app-nav-menu {
        display: none !important;
    }
    body.utm-brand .app-nav-header .top-nav {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0 0 0 auto;
    }
    body.utm-brand .app-nav-header .top-nav > li > a {
        white-space: nowrap;
    }
}

/* Logged-in clients: cart / notifications / language as icons (more room for the menu) */
@media (min-width: 992px) {
    body.utm-brand.page-user-logged .top-nav > li.nav-item-cart .item-text,
    body.utm-brand.page-user-logged .top-nav > li[id*="Notifications"] > a > .item-text,
    body.utm-brand.page-user-logged .top-nav > li[data-language-select] > a > .item-text {
        display: none;
    }
    body.utm-brand.page-user-logged .top-nav > li.nav-item-cart > a,
    body.utm-brand.page-user-logged .top-nav > li[id*="Notifications"] > a,
    body.utm-brand.page-user-logged .top-nav > li[data-language-select] > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Account button: avatar + name/company stacked, truncated, never wider than 240px */
body.utm-brand .top-nav > li.my-account > a {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 240px;
    padding: 5px 12px 5px 6px;
}
body.utm-brand .top-nav > li.my-account > a img,
body.utm-brand .top-nav > li.my-account > a .client-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    flex: 0 0 auto;
}
body.utm-brand .top-nav > li.my-account > a .item-text,
body.utm-brand .top-nav > li.my-account > a > span:not(.badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

/* ======================================================================
 * Client area
 * ==================================================================== */
/* Account card: dark like every other card (Lagom paints it solid primary) */
body.utm-brand .panel-client-details,
body.utm-brand .panel-sidebar-primary {
    background:
        linear-gradient(90deg, transparent 0%, rgba(56, 150, 250, 0.55) 50%, transparent 100%) top center / 100% 1px no-repeat,
        radial-gradient(120% 70% at 0% 0%, rgba(0, 123, 255, 0.12) 0%, transparent 60%),
        var(--utm-card) !important;
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: none;
    color: var(--utm-body-fg) !important;
}
body.utm-brand .panel-client-details .panel-heading {
    display: none;
}
body.utm-brand .panel-client-details .panel-body {
    padding: 24px 24px 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--utm-muted-fg) !important;
}
body.utm-brand .panel-client-details .panel-body strong {
    display: inline-block;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--utm-fg) !important;
}
body.utm-brand .panel-client-details .panel-body em {
    font-style: normal;
    color: var(--utm-body-fg);
}
body.utm-brand .panel-client-details .client-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 2px solid var(--utm-border);
    margin-bottom: 10px;
}
body.utm-brand .panel-client-details .panel-footer {
    display: flex;
    gap: 8px;
    padding: 16px 24px 24px;
    background: transparent;
    border: 0;
}
body.utm-brand .panel-client-details .panel-footer .btn {
    flex: 1 1 0;
    margin: 0;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    border-radius: 8px;
}
body.utm-brand .panel-client-details .panel-footer .btn-success {
    background: var(--utm-primary);
    border-color: var(--utm-primary);
    color: #fff;
}
body.utm-brand .panel-client-details .panel-footer .btn-outline {
    background: transparent;
    border: 1px solid var(--utm-border);
    color: var(--utm-fg);
}

/* Stat tiles (Services / Quotes / Unpaid invoices / Tickets) */
body.utm-brand .main-content .tiles .tile:not(.tile-home) {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 22px 24px;
    text-align: left;
    background: var(--utm-card);
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .2s ease, transform .2s ease;
}
body.utm-brand .main-content .tiles .tile:not(.tile-home):hover {
    border-color: rgba(56, 150, 250, 0.45) !important;
    transform: translateY(-2px);
}
body.utm-brand .main-content .tiles .tile .tile-stat {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--utm-fg);
    font-variant-numeric: tabular-nums;
}
body.utm-brand .main-content .tiles .tile .tile-title {
    font-size: 14px;
    color: var(--utm-muted-fg);
}
body.utm-brand .main-content .tiles .tile .tile-icon-absolute {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(0, 123, 255, 0.12);
    color: var(--utm-ring);
    font-size: 16px;
}

/* Dashboard panels */
body.utm-brand .client-home-panels .panel,
body.utm-brand .main-content .panel-default {
    background: var(--utm-card);
    border: 1px solid var(--utm-border) !important;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}
body.utm-brand .main-content .panel-default > .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--utm-border);
    padding: 16px 22px;
}
body.utm-brand .main-content .panel-default .panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--utm-fg);
}
body.utm-brand .main-content .list-group-item {
    background: transparent;
    border-color: var(--utm-border);
}
body.utm-brand .no-data .no-data-icon svg,
body.utm-brand .no-data .no-data-icon img {
    width: 52px;
    height: 52px;
    opacity: .75;
}
body.utm-brand .no-data .text-light {
    color: var(--utm-muted-fg) !important;
}

/* Sidebar panels (Contacts, Shortcuts, Billing menu…) */
body.utm-brand .panel-sidebar:not(.panel-client-details) .list-group-item {
    color: var(--utm-body-fg);
    border-radius: 8px;
}
body.utm-brand .panel-sidebar:not(.panel-client-details) .list-group-item.active,
body.utm-brand .panel-sidebar:not(.panel-client-details) a.list-group-item:hover {
    background: var(--utm-accent);
    color: var(--utm-fg);
}

/* Tables (invoices, services, quotes…) */
body.utm-brand .dataTables_wrapper,
body.utm-brand .table-container {
    border-radius: 12px;
    overflow: hidden;
}
body.utm-brand .dataTables_wrapper .table > tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.02);
}
body.utm-brand .dataTables_wrapper .pagination > li > a,
body.utm-brand .dataTables_wrapper .pagination > li > span {
    background: transparent;
    border-color: var(--utm-border);
    color: var(--utm-body-fg);
    border-radius: 6px;
    margin: 0 2px;
}
body.utm-brand .dataTables_wrapper .pagination > .active > a,
body.utm-brand .dataTables_wrapper .pagination > .active > span {
    background: var(--utm-primary);
    border-color: var(--utm-primary);
    color: #fff;
}

/* Account card text: company / name / address on their own lines */
body.utm-brand .panel-client-details .panel-body strong,
body.utm-brand .panel-client-details .panel-body em {
    display: block;
}
body.utm-brand .panel-client-details .panel-body em {
    margin-top: 2px;
}
body.utm-brand .panel-client-details .panel-body br {
    display: none;
}
body.utm-brand .panel-client-details .panel-body em + br + br + * ,
body.utm-brand .panel-client-details .panel-body {
    white-space: normal;
}

/* ======================================================================
 * Product details (module output, e.g. licensing / Proxmox)
 * ==================================================================== */
body.utm-brand.page-clientareaproductdetails .tab-pane > .card {
    background: var(--utm-card);
    border: 1px solid var(--utm-border);
    border-radius: 12px;
    box-shadow: none;
}
body.utm-brand.page-clientareaproductdetails .tab-pane > .card > .card-body {
    padding: 28px;
    font-size: 14px;
    color: var(--utm-fg);
}
/* Field labels */
body.utm-brand.page-clientareaproductdetails .card-body h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--utm-muted-fg);
}
body.utm-brand.page-clientareaproductdetails .card-body .mb-2 {
    margin-bottom: 20px !important;
}
body.utm-brand.page-clientareaproductdetails .card-body p {
    margin: 0;
    color: var(--utm-fg);
}
body.utm-brand.page-clientareaproductdetails .card-body .form-control[readonly] {
    background: var(--utm-bg);
    border: 1px solid var(--utm-border);
    border-radius: 8px;
    color: var(--utm-fg);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    resize: vertical;
}
body.utm-brand.page-clientareaproductdetails .card-body input.form-control[readonly] {
    height: 42px;
}
/* Dates / amounts rows -> grid of small stat cards */
body.utm-brand.page-clientareaproductdetails .card-body > .row.mb-2:not(.d-block) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 12px !important;
}
body.utm-brand.page-clientareaproductdetails .card-body > .row.mb-2:not(.d-block)::before,
body.utm-brand.page-clientareaproductdetails .card-body > .row.mb-2:not(.d-block)::after {
    display: none;
}
body.utm-brand.page-clientareaproductdetails .card-body > .row.mb-2:not(.d-block) > [class*="col-"] {
    width: auto;
    float: none;
    padding: 16px 18px;
    text-align: left !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--utm-fg);
    background: var(--utm-muted);
    border: 1px solid var(--utm-border);
    border-radius: 10px;
}
body.utm-brand.page-clientareaproductdetails .card-body > .row.mb-2:not(.d-block) h4 {
    margin-bottom: 6px;
}
@media (max-width: 767px) {
    body.utm-brand.page-clientareaproductdetails .card-body > .row.mb-2:not(.d-block) {
        grid-template-columns: 1fr;
    }
}
/* Reissue / Cancel buttons: inline icon, normal height */
body.utm-brand.page-clientareaproductdetails .card-body .btn-lg.btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
}
body.utm-brand.page-clientareaproductdetails .card-body .btn-lg.btn-block br {
    display: none;
}
body.utm-brand.page-clientareaproductdetails .card-body .btn-lg.btn-block .fa-2x {
    font-size: 14px;
}
body.utm-brand.page-clientareaproductdetails .card-body .btn-success {
    background: var(--utm-primary);
    border-color: var(--utm-primary);
    color: #fff;
}
body.utm-brand.page-clientareaproductdetails .card-body .btn-success:hover {
    background: var(--utm-primary-dark);
    border-color: var(--utm-primary-dark);
}
body.utm-brand.page-clientareaproductdetails .card-body .btn-danger {
    background: transparent;
    border: 1px solid rgba(225, 71, 71, 0.5);
    color: #f07171;
}
body.utm-brand.page-clientareaproductdetails .card-body .btn-danger:hover {
    background: rgba(225, 71, 71, 0.12);
    color: #ff8a8a;
}
body.utm-brand.page-clientareaproductdetails .card-body .margin-bottom-5 {
    margin-bottom: 10px;
}
body.utm-brand.page-clientareaproductdetails .card-body > .row.mb-2:not(.d-block) > [class*="col-"] {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0;
}

/* Product details (Proxmox / hosting style): product card */
body.utm-brand .product-details .product-icon {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(0, 123, 255, 0.20) 0%, transparent 65%),
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--utm-card) !important;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 24px 60px -34px rgba(0, 123, 255, 0.7);
    color: var(--utm-fg) !important;
    overflow: hidden;
}
body.utm-brand .product-details .product-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, #1ecad3, #3a8dde 45%, #655dc6);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
body.utm-brand .product-details .product-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 28px;
}
body.utm-brand .product-details .product-image {
    color: var(--utm-ring);
    margin-bottom: 18px;
}
body.utm-brand .product-details .product-name {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--utm-fg) !important;
    text-align: center;
}
body.utm-brand .product-details .product-footer {
    display: block;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--utm-ring) !important;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid var(--utm-border);
}
body.utm-brand .product-details .product-footer:hover {
    color: #6cb2fb !important;
}
body.utm-brand .cpanel-usage-stats {
    height: 100%;
}
body.utm-brand .cpanel-usage-stats .panel-footer {
    background: transparent;
    border-top: 1px solid var(--utm-border);
    color: var(--utm-muted-fg);
    font-size: 12.5px;
}

/* Billing overview: one mini card per value */
body.utm-brand .billingOverview > .row {
    row-gap: 12px;
}
body.utm-brand .billingOverview > .row > [class*="col-"] {
    margin-bottom: 0;
}
body.utm-brand .billingOverview > .row > [class*="col-"] > .row {
    height: 100%;
    margin: 0;
    padding: 14px 16px;
    background: var(--utm-muted);
    border: 1px solid var(--utm-border);
    border-radius: 10px;
}
body.utm-brand .billingOverview > .row > [class*="col-"] > .row > .col-12 {
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--utm-fg);
}
body.utm-brand .billingOverview .gray-base {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--utm-muted-fg) !important;
}

/* Label / value lists (Server Information, Configurable Options, Additional Information) */
body.utm-brand .list-info .list-info-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--utm-muted-fg);
}
body.utm-brand .list-info .list-info-text {
    color: var(--utm-fg);
    font-size: 14px;
}
body.utm-brand .list-info-bordered > li {
    border-color: var(--utm-border) !important;
}

/* Panel tabs */
body.utm-brand .panel-nav .nav-tabs > li > a {
    color: var(--utm-body-fg);
    font-size: 14px;
}
body.utm-brand .panel-nav .nav-tabs > li > a.active,
body.utm-brand .panel-nav .nav-tabs > li.active > a {
    color: var(--utm-fg);
}
body.utm-brand .product-details .product-image svg,
body.utm-brand .product-details .product-image .svg-icon {
    --svg-icon-color-1: var(--utm-ring);
    --svg-icon-color-2: var(--utm-primary);
    --svg-icon-color-3: #dcdfe5;
    --svg-icon-color-4: rgba(0, 123, 255, 0.12);
    width: 64px;
    height: 64px;
}

/* ======================================================================
 * Client Limitation popup (.messageBox, e.g. "Maximum number of trial
 * products allowed"): dark card instead of the module's solid red box.
 * ==================================================================== */
@keyframes utm-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
body.utm-brand .messageBox-modal {
    background-color: rgba(5, 8, 14, 0.62) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
body.utm-brand .messageBox {
    min-width: 360px;
    max-width: 440px;
    min-height: 0;
    padding: 24px 24px 20px;
    color: var(--utm-fg) !important;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(225, 71, 71, 0.10) 0%, transparent 55%),
        var(--utm-popover) !important;
    border: 1px solid var(--utm-border) !important;
    border-top: 3px solid #e14747 !important;
    border-radius: 14px;
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.75);
    font-family: var(--font-family-base);
    animation: utm-pop .18s ease-out both;
}
body.utm-brand .messageBox > .icon {
    float: left;
    width: 44px;
    height: 44px;
    margin: 0 16px 6px 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f07171 !important;
    background: rgba(225, 71, 71, 0.14);
    border: 1px solid rgba(225, 71, 71, 0.35);
    border-radius: 12px;
}
body.utm-brand .messageBox > .title {
    overflow: hidden;
    margin: 0 0 4px;
    padding-top: 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--utm-fg) !important;
}
body.utm-brand .messageBox > .text {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.55;
    color: var(--utm-muted-fg) !important;
}
body.utm-brand .messageBox > .toolbar {
    clear: both;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--utm-border) !important;
}
body.utm-brand .messageBox > .toolbar > button,
body.utm-brand .messageBox > .toolbar > .btn {
    height: 36px;
    min-width: 88px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    background: var(--utm-primary) !important;
    border: 1px solid var(--utm-primary) !important;
    border-radius: 8px;
    box-shadow: 0 8px 20px -10px rgba(0, 123, 255, 0.9);
}
body.utm-brand .messageBox > .toolbar > button:hover {
    background: var(--utm-primary-dark) !important;
    border-color: var(--utm-primary-dark) !important;
}
@media (prefers-reduced-motion: reduce) {
    body.utm-brand .messageBox { animation: none; }
}