/* ==========================================================================
   bluemint host — Blue Mint brand layer for Lagom2 (modern style)
   Loaded after Lagom's own CSS. Keeps Lagom's light blue scale as the
   brand colour; brings in Blue Mint type, ink, spacing and card shapes.
   Backup of previous state: /var/www/vhosts/bluemint.gr/myhost-theme-backup-20261107/
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-headings: 'Manrope', 'Inter', sans-serif;

    --brand-primary:            #1062fe;
    --brand-primary-lighter:    #009aff;
    --brand-primary-darker:     #003cb2;

    --gray-darker:      #141414;
    --gray-base:        #5b6472;
    --gray-lighter:     #8b94a3;
    --gray-lighter-2:   #aeb5c1;
    --gray-lighter-3:   #dfe4ec;
    --gray-lighter-4:   #e9edf3;
    --gray-faded:       #f5f8fc;
    --gray-gradient-start: #f2f6fc;
    --gray-gradient-end:   #fbfcfe;
    --body-bg:          #ffffff;

    --border-radius-sm:    4px;
    --border-radius-base:  6px;
    --border-radius-lg:    6px;
    --btn-xs-border-radius:  4px;
    --btn-sm-border-radius:  6px;
    --btn-base-border-radius: 6px;
    --btn-lg-border-radius:  6px;
    --btn-xlg-border-radius: 6px;
    --ui-block-border-radius:    16px;
    --ui-block-border-radius-lg: 16px;
    --panel-lg-border-radius:    16px;

    --box-shadow-sm:   0 0 1px rgba(16, 40, 90, .06), 0 2px 12px rgba(16, 40, 90, .06);
    --box-shadow-base: 0 0 1px rgba(16, 40, 90, .06), 0 4px 20px rgba(16, 40, 90, .07);
    --box-shadow-lg:   0 0 1px rgba(16, 40, 90, .06), 0 10px 36px rgba(16, 40, 90, .09);
    --box-shadow-xlg:  0 0 1px rgba(16, 40, 90, .06), 0 14px 52px rgba(16, 40, 90, .10);
}

body, .lagom {
    font-family: var(--font-family-base);
    color: var(--gray-darker);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.banner-title, .main-header-title, .section-title, .package-title,
.price-amount, .package-price .price, .modal-title, .login-title {
    font-family: var(--font-family-headings);
    font-weight: 600;
    letter-spacing: -0.015em;
}
.banner-title, .main-header-title, .section-title { font-weight: 700; letter-spacing: -0.025em; }

.btn { font-weight: 600; border-radius: 6px; }
.btn-xs { border-radius: 4px; }
.btn-primary { box-shadow: 0 1px 2px rgba(16, 98, 254, .18); }
.btn-primary:hover, .btn-primary:focus { box-shadow: 0 4px 14px rgba(16, 98, 254, .25); }

.form-control, .input-group-addon,
.select2-container .select2-selection, .bootstrap-select .dropdown-toggle { border-radius: 6px; }
.form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(16, 98, 254, .14); }

.panel, .package, .tile, .feature-boxed, .modal-content, .list-group, .table-container { border-radius: 16px; }
.panel, .package, .tile { border-color: var(--gray-lighter-4); }

.logo img.logo-img, .logo .logo-img { height: 32px; width: auto; max-width: none; max-height: none; }
@media (max-width: 767px) { .logo img.logo-img, .logo .logo-img { height: 28px; } }

a { text-underline-offset: 2px; }

/* Login / register side logo */
.logo-login .logo-login-img { height: 36px; width: auto; max-width: 100%; }

/* ==========================================================================
   Layout fixes & section redesign (v2, 2026-11-07)
   ========================================================================== */
@media (min-width: 1200px) {
    .app-nav-menu .container { flex-wrap: nowrap; }
    .app-nav-menu .menu-primary { flex-wrap: nowrap; }
    .app-nav-menu .menu-primary > li > a { padding-left: 11px; padding-right: 11px; font-size: 15px; font-weight: 500; white-space: nowrap; }
    .app-nav-menu .menu-secondary > li > a, .app-nav-menu .menu-secondary .btn { white-space: nowrap; }
    .app-nav-menu .logo { margin-right: 28px; flex-shrink: 0; }
}
.app-nav-menu .logo img.logo-img, .app-nav-header .logo img.logo-img { height: 28px; }
.app-nav-menu .menu-primary > li > a:hover, .app-nav-menu .menu-primary > li.active > a { color: var(--brand-primary); }
@media (max-width: 991px) { .app-nav-header .logo img.logo-img { height: 24px; } }
@media (max-width: 479px) {
    .app-nav-header .logo img.logo-img { height: 20px; }
    .app-nav-header .top-nav > li > a { padding-left: 6px; padding-right: 6px; }
    .app-nav-header .top-nav .item-text { display: none; }
    .app-nav-header .top-nav .dark-mode-switcher { display: none; }
}
html, body { overflow-x: hidden; }

.site-banner .banner-title { line-height: 1.12; }
.site-banner .banner-title strong, .site-banner .banner-title b { font-weight: 700; }
.section-slider-btn .tile, .section-slider-btn .slider-btn { border-radius: 16px; }

.domain-tlds .domain-tld { display: flex; align-items: baseline; justify-content: center; gap: 8px; white-space: nowrap; }
.domain-tlds .tld-name { font-family: var(--font-family-headings); font-weight: 700; color: var(--gray-darker); }
.domain-tlds .tld-name span { color: var(--brand-primary); }
.domain-tlds .tld-price { color: var(--gray-base); font-size: 14px; }

.site-section .section-title { margin-bottom: 12px; }
.site-section .section-subtitle { color: var(--gray-base); max-width: 640px; margin-left: auto; margin-right: auto; }
.site-section.section-primary { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-lighter) 100%); }
.site-section.section-primary .section-subtitle { color: rgba(255,255,255,.82); }
.site-section.section-primary .btn-primary-faded { background: #fff; border-color: #fff; color: var(--brand-primary); }
.site-section.section-primary .btn-primary-faded:hover { background: #e1efff; border-color: transparent; }

.package { overflow: hidden; }
.package#product117, .package#product124, .package#product125, .package#product126 {
    background: #fff !important; color: var(--gray-darker) !important; border: 1px solid var(--gray-lighter-4); box-shadow: var(--box-shadow-sm);
}
.package[id^="product"] .package-title, .package[id^="product"] .price-amount, .package[id^="product"] .price-cycle { background-color: transparent !important; }
.package#product117 .package-title, .package#product124 .package-title, .package#product125 .package-title { color: var(--gray-darker) !important; }
.package#product117 .price-amount, .package#product124 .price-amount, .package#product125 .price-amount { color: var(--brand-primary) !important; }
.package#product117 .price-cycle, .package#product124 .price-cycle, .package#product125 .price-cycle { color: var(--gray-base) !important; }
.package .package-content a[style] { color: var(--brand-primary) !important; font-weight: 600 !important; }
.package#product126 {
    background: linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-primary-lighter) 100%) !important;
    color: #fff !important; border-color: transparent; box-shadow: var(--box-shadow-lg);
}
.package#product126 .package-title, .package#product126 .price-amount, .package#product126 .price-cycle, .package#product126 .package-content a[style] { color: #fff !important; }
.btn#product117-order-button, .btn#product124-order-button, .btn#product125-order-button { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }
.btn#product126-order-button { background: #fff !important; border-color: #fff !important; color: var(--brand-primary) !important; }
.package .package-content { text-align: left; font-size: 14px; line-height: 1.55; }
.package .package-content hr { border-color: currentColor; opacity: .12; margin: 14px 0; }
.package .package-content ul { list-style: none; padding-left: 0 !important; margin: 8px 0; text-align: left !important; }
.package .package-content ul li { position: relative; padding: 3px 0 3px 24px !important; }
.package .package-content ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 7px; border-left: 2px solid var(--brand-primary); border-bottom: 2px solid var(--brand-primary); transform: rotate(-45deg); }
.package#product126 .package-content ul li::before { border-color: #fff; }

.main-body-sidebar-secondary .sidebar-swiper { overflow: hidden; }
.main-body-sidebar-secondary .sidebar-title { font-size: 30px; line-height: 1.2; }
.main-body-sidebar-secondary .sidebar-news-title { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.main-body-sidebar-secondary .sidebar-news-desc { font-size: 15px; opacity: .85; }
.main-body-sidebar-secondary { background: linear-gradient(160deg, var(--brand-primary) 0%, #0a4fd6 100%); }

.bm-trust { padding-top: 64px; padding-bottom: 64px; }
.bm-trust-card { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; background: var(--gray-faded); border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 40px 48px; }
.bm-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-primary); background: #e8f0ff; border-radius: 6px; padding: 4px 10px; margin-bottom: 14px; }
.bm-trust-title { font-size: 32px; margin: 0 0 12px; color: var(--gray-darker); }
.bm-trust-lead { font-size: 18px; line-height: 1.5; color: var(--gray-darker); margin: 0 0 8px; }
.bm-trust-note { color: var(--gray-base); margin: 0; }
.bm-trust-pay { text-align: center; }
.bm-trust-pay .bm-paypal { height: 56px; width: auto; margin-bottom: 16px; }
.bm-pay-icons { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 22px; }
.bm-pay-icons img { height: 44px; width: auto; }
.bm-pay-icons svg { fill: var(--gray-darker); }
.bm-badges { list-style: none; padding: 0; margin: 32px 0 0; display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; }
.bm-badges img { height: 52px; width: auto; opacity: .9; }
@media (max-width: 767px) {
    .bm-trust { padding-top: 40px; padding-bottom: 40px; }
    .bm-trust-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
    .bm-trust-title { font-size: 26px; }
    .bm-badges { gap: 24px; }
    .bm-badges img { height: 40px; }
}

/* ==========================================================================
   Header & footer redesign (v3, 2026-11-07)
   Headings use Manrope: geometric like Sora, but with Greek glyphs.
   ========================================================================== */

/* ---------- Top utility bar ---------- */
.app-nav-header { background: var(--gray-faded); border-bottom: 1px solid var(--gray-lighter-4); }
.app-nav-header .top-nav > li > a,
.app-nav-header .top-nav > li > .dropdown-toggle { font-size: 13px; color: var(--gray-base); }
.app-nav-header .top-nav > li > a:hover { color: var(--brand-primary); }
.app-nav-header .top-nav .nav-badge { background: var(--brand-primary); color: #fff; }

/* ---------- Main menu ---------- */
.app-nav-menu { background: #fff; border-bottom: 1px solid var(--gray-lighter-4); box-shadow: none; }
.app-nav.is-sticky .app-nav-menu,
.sticky-navigation.is-sticky .app-nav-menu { box-shadow: 0 6px 24px rgba(16, 40, 90, .08); }
@media (min-width: 1200px) {
    .app-nav-menu .menu-primary > li > a { color: var(--gray-darker); position: relative; }
    .app-nav-menu .menu-primary > li > a::after {
        content: ""; position: absolute; left: 11px; right: 11px; bottom: 10px; height: 2px; border-radius: 2px;
        background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
    }
    .app-nav-menu .menu-primary > li:not(#Primary_Navbar-Register):not(#Primary_Navbar-Login):not([id^="Primary_Navbar-Language"]) > a:hover::after,
    .app-nav-menu .menu-primary > li.open:not(#Primary_Navbar-Register):not(#Primary_Navbar-Login) > a::after { transform: scaleX(1); }

    /* Account actions grouped on the right */
    .app-nav-menu .menu-primary { flex: 1 1 auto; align-items: center; }
    .app-nav-menu #Primary_Navbar-Register { margin-left: auto; }
    .app-nav-menu #Primary_Navbar-Register > a,
    .app-nav-menu #Primary_Navbar-Register > .btn {
        border: 0; background: transparent; color: var(--gray-darker); font-weight: 600; box-shadow: none;
    }
    .app-nav-menu #Primary_Navbar-Register > a:hover,
    .app-nav-menu #Primary_Navbar-Register > .btn:hover { color: var(--brand-primary); background: #eef4ff; }
    .app-nav-menu #Primary_Navbar-Login > a,
    .app-nav-menu #Primary_Navbar-Login > .btn { padding-left: 20px; padding-right: 20px; font-weight: 600; }
}

/* Dropdowns */
.app-nav-menu .dropdown-menu {
    border: 1px solid var(--gray-lighter-4);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 40, 90, .12);
    padding: 8px;
}
.app-nav-menu .dropdown-menu > li > a,
.app-nav-menu .dropdown-menu .dropdown-item {
    border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--gray-darker);
}
.app-nav-menu .dropdown-menu > li > a:hover,
.app-nav-menu .dropdown-menu .dropdown-item:hover { background: #eef4ff; color: var(--brand-primary); }

/* ---------- Footer ---------- */
.main-footer { background: #f5f8fc; border-top: 1px solid var(--gray-lighter-4); }
.main-footer .footer-top { padding-top: 56px; padding-bottom: 40px; }
.main-footer .footer-company-logo img.logo-img { height: 28px; }
.main-footer .footer-company-desc { font-size: 14px; line-height: 1.6; color: var(--gray-base); max-width: 260px; margin-top: 14px; }
.main-footer .footer-company-desc:empty { display: none; }
.main-footer .footer-company-socials { margin-top: 18px; gap: 8px; }
.main-footer .footer-company-socials > li > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid var(--gray-lighter-4);
    color: var(--gray-darker); transition: all .15s ease;
}
.main-footer .footer-company-socials > li > a:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.main-footer .footer-title {
    font-family: var(--font-family-headings); font-size: 15px; font-weight: 700; color: var(--gray-darker);
    letter-spacing: 0; margin-bottom: 14px;
}
.main-footer .footer-nav:not(.footer-nav-h) > li > a { padding: 5px 0; font-size: 14px; line-height: 1.45; color: var(--gray-base); }
.main-footer .footer-nav:not(.footer-nav-h) > li > a:hover { color: var(--brand-primary); }
.main-footer .footer-nav > li > a i.ls { display: none; }
.main-footer .footer-bottom { background: #fff; border-top: 1px solid var(--gray-lighter-4); padding-top: 18px; padding-bottom: 18px; }
.main-footer .footer-copyright { font-size: 13px; color: var(--gray-base); }
.main-footer .footer-bottom a, .main-footer .footer-bottom .dropdown-toggle { font-size: 13px; color: var(--gray-darker); }

/* Registry number now lives in the copyright line — hide the old floating copy */
body > div[style="min-width:100%;"] { display: none; }

/* v3.1 — weights & login sidebar */
.banner-title, .main-header-title, .section-title, .bm-trust-title { font-weight: 800; letter-spacing: -0.02em; }
.package-title, .login-title, .modal-title { font-weight: 700; }
.main-body-sidebar-secondary .sidebar-news .sidebar-news-title,
.main-body-sidebar-secondary .sidebar-news .sidebar-news-title.h3 {
    font-size: 22px !important; line-height: 1.3 !important; font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.main-body-sidebar-secondary .sidebar-news-desc {
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Knowledge base (v4) ---------- */
/* the tag cloud grew into a wall of words — search + categories are clearer */
.panel-support-tags { display: none; }
.article-content { font-size: 16px; line-height: 1.7; color: var(--gray-darker); }
.article-content h2 { font-size: 24px; line-height: 1.3; margin: 28px 0 10px; font-weight: 800; }
.article-content h3 { font-size: 19px; line-height: 1.35; margin: 22px 0 8px; font-weight: 700; }
.article-content > p:first-child { font-size: 17px; color: var(--gray-base); }
.article-content ol, .article-content ul { padding-left: 22px; margin-bottom: 14px; }
.article-content li { margin-bottom: 6px; }
.article-content table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 14px; }
.article-content th { background: var(--gray-faded); font-weight: 600; text-align: left; }
.article-content th, .article-content td { padding: 10px 12px; border-bottom: 1px solid var(--gray-lighter-4); }
.article-content blockquote { border-left: 3px solid var(--brand-primary); background: #f0f5ff; margin: 16px 0; padding: 12px 16px; border-radius: 0 8px 8px 0; color: var(--gray-darker); }
.article-content code { background: var(--gray-faded); border: 1px solid var(--gray-lighter-4); border-radius: 4px; padding: 1px 5px; font-size: 14px; }
.article-content img { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 767px) { .article-content table { display: block; overflow-x: auto; } }

/* ==========================================================================
   Professional Email (OX App Suite) landing page — .bmx (2026-11-07)
   ========================================================================== */
.bmx { --bmx-blue: var(--brand-primary); --bmx-sky: var(--brand-primary-lighter); --bmx-tint: #eef4ff; --bmx-ink: var(--gray-darker); --bmx-muted: var(--gray-base); --bmx-line: var(--gray-lighter-4); }
.bmx .site-section { padding-top: 80px; padding-bottom: 80px; }
.bmx-h1 { font-family: var(--font-family-headings); font-weight: 800; font-size: 48px; line-height: 1.1; letter-spacing: -0.025em; color: var(--bmx-ink); margin: 14px 0 18px; }
.bmx-h2 { font-family: var(--font-family-headings); font-weight: 800; font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; color: var(--bmx-ink); margin: 0 0 14px; }
.bmx-h3 { font-family: var(--font-family-headings); font-weight: 700; font-size: 22px; color: var(--bmx-ink); margin: 0 0 16px; }
.bmx-lead { font-size: 18px; line-height: 1.6; color: var(--bmx-muted); margin: 0; }
.bmx-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.bmx-eyebrow, .bmx-kicker { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bmx-blue); background: var(--bmx-tint); border-radius: 6px; padding: 5px 10px; }
.bmx-ico { width: 24px; height: 24px; }
.bmx-tick { width: 16px; height: 16px; flex: 0 0 16px; color: var(--bmx-blue); margin-top: 3px; }
.bmx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.bmx-actions-center { justify-content: center; }
.bmx-btn-ghost { background: #fff; border: 1px solid var(--bmx-line); color: var(--bmx-ink); }
.bmx-btn-ghost:hover { border-color: var(--bmx-blue); color: var(--bmx-blue); }
.bmx-btn-white { background: #fff !important; color: var(--bmx-blue) !important; border: 1px solid #fff !important; }
.bmx-btn-white:hover { background: #e8f0ff !important; }
.bmx-btn-outline-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.bmx-btn-outline-white:hover { background: rgba(255,255,255,.12); color: #fff; }

/* hero */
.bmx-hero { background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 100%); padding: 72px 0 40px; border-bottom: 1px solid var(--bmx-line); }
.bmx-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.bmx-hero-sub { font-size: 19px; line-height: 1.6; color: var(--bmx-muted); margin: 0 0 26px; max-width: 560px; }
.bmx-from { margin: 18px 0 0; color: var(--bmx-muted); font-size: 15px; }
.bmx-from strong { color: var(--bmx-ink); font-size: 18px; }
.bmx-trust { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bmx-trust li { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--bmx-line); border-radius: 12px; padding: 14px 16px; font-size: 14px; font-weight: 500; color: var(--bmx-ink); }
.bmx-trust svg { color: var(--bmx-blue); flex: 0 0 24px; width: 24px; height: 24px; }

/* window mockups */
.bmx-win { background: #fff; border: 1px solid var(--bmx-line); border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 40, 90, .12); overflow: hidden; }
.bmx-win-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--bmx-line); background: #fafcff; }
.bmx-win-bar span { width: 10px; height: 10px; border-radius: 50%; background: #dfe4ec; }
.bmx-win-body { padding: 18px; }
.bmx-suite { display: grid; grid-template-columns: 52px 1fr 150px; gap: 16px; padding: 0; min-height: 300px; }
.bmx-suite-nav { background: var(--bmx-blue); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; }
.bmx-suite-nav span { color: rgba(255,255,255,.7); display: flex; padding: 6px; border-radius: 8px; }
.bmx-suite-nav span.on { background: rgba(255,255,255,.18); color: #fff; }
.bmx-suite-nav svg { width: 20px; height: 20px; }
.bmx-suite-main { padding: 18px 0; }
.bmx-suite-side { padding: 18px 16px 18px 0; }
.bmx-suite-title { font-weight: 700; font-size: 14px; color: var(--bmx-ink); margin-bottom: 12px; font-family: var(--font-family-headings); }
.bmx-mail-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px; border: 1px solid var(--bmx-line); font-size: 12px; color: var(--bmx-muted); }
.bmx-mail-row b { color: var(--bmx-ink); font-weight: 600; font-size: 12px; }
.bmx-mail-row.bmx-unread { background: var(--bmx-tint); border-color: #d6e4ff; }
.bmx-mail-row.bmx-unread b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bmx-blue); margin-right: 6px; vertical-align: 1px; }
.bmx-ev { font-size: 12px; font-weight: 600; color: var(--bmx-blue); background: var(--bmx-tint); border-left: 3px solid var(--bmx-blue); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.bmx-ev2 { color: #0a7f9e; background: #e6f7fc; border-color: var(--bmx-sky); }
.bmx-ev3 { color: #5a4fd6; background: #efedff; border-color: #8b80ff; }
.bmx-chips { display: flex; gap: 8px; margin-top: 12px; }
.bmx-chips span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bmx-tint); color: var(--bmx-blue); }
.bmx-calui { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-height: 230px; }
.bmx-cal-col { display: grid; grid-template-rows: repeat(4, 1fr); gap: 8px; }
.bmx-cal-col i { border-radius: 8px; background: #f5f8fc; border: 1px dashed var(--bmx-line); }
.bmx-cal-col i.ev { background: var(--bmx-tint); border: 0; border-left: 3px solid var(--bmx-blue); }
.bmx-cal-col i.ev2 { background: #e6f7fc; border: 0; border-left: 3px solid var(--bmx-sky); }
.bmx-cal-col i.ev3 { background: #efedff; border: 0; border-left: 3px solid #8b80ff; }
.bmx-docsui { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bmx-doc { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px; border: 1px solid var(--bmx-line); border-radius: 12px; color: var(--bmx-blue); font-weight: 700; font-size: 13px; }
.bmx-doc svg { width: 34px; height: 34px; }
.bmx-doc-wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; background: var(--bmx-tint); border-color: #d6e4ff; }

/* apps grid */
.bmx-apps-section { background: #fff; }
.bmx-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bmx-app { background: #fff; border: 1px solid var(--bmx-line); border-radius: 16px; padding: 26px; transition: box-shadow .2s, border-color .2s, transform .2s; }
.bmx-app:hover { border-color: #cfdcf5; box-shadow: 0 12px 32px rgba(16, 40, 90, .08); transform: translateY(-2px); }
.bmx-app-prod { background: linear-gradient(180deg, #f6f9ff 0%, #fff 60%); }
.bmx-app-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.bmx-app-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--bmx-tint); color: var(--bmx-blue); display: inline-flex; align-items: center; justify-content: center; }
.bmx-app-icon svg { width: 26px; height: 26px; }
.bmx-badge { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: #f1f4f8; color: var(--bmx-muted); }
.bmx-badge-prod { background: var(--bmx-blue); color: #fff; }
.bmx-app-title { font-family: var(--font-family-headings); font-weight: 800; font-size: 21px; margin: 0 0 6px; color: var(--bmx-ink); }
.bmx-app-desc { color: var(--bmx-muted); font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.bmx-list { list-style: none; padding: 0; margin: 0; }
.bmx-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--bmx-ink); padding: 4px 0; }

/* spotlights */
.bmx-spot:nth-of-type(odd) { background: #f7faff; }
.bmx-spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bmx-spot-rev .bmx-spot-copy { order: 2; }
.bmx-spot-copy .bmx-h2 { margin-top: 14px; }
.bmx-spot-visual .bmx-win { max-width: 520px; margin: 0 auto; }

/* security */
.bmx-sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bmx-sec-card { border: 1px solid var(--bmx-line); border-radius: 16px; padding: 28px; background: #fff; }
.bmx-sec-card svg { width: 32px; height: 32px; color: var(--bmx-blue); }
.bmx-sec-card h3 { font-family: var(--font-family-headings); font-weight: 700; font-size: 19px; margin: 14px 0 8px; color: var(--bmx-ink); }
.bmx-sec-card p { color: var(--bmx-muted); font-size: 15px; line-height: 1.6; margin: 0; }

/* devices */
.bmx-devices { background: #f7faff; }
.bmx-dev { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bmx-dev li { background: #fff; border: 1px solid var(--bmx-line); border-radius: 16px; padding: 24px 20px; text-align: center; font-size: 15px; font-weight: 500; color: var(--bmx-ink); }
.bmx-dev svg { width: 34px; height: 34px; color: var(--bmx-blue); display: block; margin: 0 auto 12px; }

/* pricing */
.bmx-plans { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.bmx-plan { position: relative; flex: 0 1 400px; background: #fff; border: 1px solid var(--bmx-line); border-radius: 16px; padding: 32px; box-shadow: var(--box-shadow-sm); display: flex; flex-direction: column; }
.bmx-plan form { margin-top: auto; padding-top: 20px; }
.bmx-plan-featured { background: linear-gradient(160deg, var(--bmx-blue) 0%, var(--bmx-sky) 100%); border-color: transparent; color: #fff; box-shadow: 0 20px 50px rgba(16, 98, 254, .28); }
.bmx-plan-flag { position: absolute; top: -12px; left: 32px; background: #fff; color: var(--bmx-blue); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(16,40,90,.15); }
.bmx-plan-name { font-family: var(--font-family-headings); font-weight: 800; font-size: 22px; margin: 0 0 10px; color: inherit; }
.bmx-plan-price { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--bmx-line); }
.bmx-plan-featured .bmx-plan-price { border-color: rgba(255,255,255,.25); }
.bmx-plan-price strong { display: block; font-family: var(--font-family-headings); font-size: 38px; font-weight: 800; color: var(--bmx-blue); line-height: 1.1; }
.bmx-plan-price span { font-size: 14px; color: var(--bmx-muted); }
.bmx-plan-featured .bmx-plan-price strong, .bmx-plan-featured .bmx-plan-price span, .bmx-plan-featured .bmx-list li { color: #fff; }
.bmx-plan-featured .bmx-tick { color: #fff; }
.bmx-cmp { max-width: 860px; margin: 64px auto 0; }
.bmx-cmp .bmx-h3 { text-align: center; }
.bmx-cmp-wrap { overflow-x: auto; border: 1px solid var(--bmx-line); border-radius: 16px; background: #fff; }
.bmx-cmp table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bmx-cmp th { background: #f7faff; font-weight: 700; color: var(--bmx-ink); text-align: center; padding: 14px 16px; border-bottom: 1px solid var(--bmx-line); }
.bmx-cmp th:first-child, .bmx-cmp td:first-child { text-align: left; }
.bmx-cmp td { padding: 13px 16px; border-bottom: 1px solid var(--bmx-line); text-align: center; color: var(--bmx-ink); }
.bmx-cmp tr:last-child td { border-bottom: 0; }
.bmx-cmp td:nth-child(3) { background: #f6f9ff; font-weight: 600; color: var(--bmx-blue); }

/* steps */
.bmx-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.bmx-steps li { border: 1px solid var(--bmx-line); border-radius: 16px; padding: 28px; background: #fff; }
.bmx-num { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: var(--bmx-blue); color: #fff; font-weight: 800; align-items: center; justify-content: center; font-family: var(--font-family-headings); }
.bmx-steps h3 { font-family: var(--font-family-headings); font-weight: 700; font-size: 19px; margin: 14px 0 8px; color: var(--bmx-ink); }
.bmx-steps p { color: var(--bmx-muted); font-size: 15px; line-height: 1.6; margin: 0; }

/* faq */
.bmx-faq { background: #f7faff; }
.bmx-faq-list { max-width: 820px; margin: 0 auto; }
.bmx-qa { background: #fff; border: 1px solid var(--bmx-line); border-radius: 12px; margin-bottom: 10px; padding: 0 20px; }
.bmx-qa summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; font-weight: 600; font-size: 16px; color: var(--bmx-ink); position: relative; }
.bmx-qa summary::-webkit-details-marker { display: none; }
.bmx-qa summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--bmx-blue); font-weight: 400; }
.bmx-qa[open] summary::after { content: "–"; }
.bmx-qa p { color: var(--bmx-muted); font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.bmx-kb { text-align: center; margin-top: 20px; font-weight: 600; }

/* final */
.bmx-final-card { background: linear-gradient(135deg, var(--bmx-blue) 0%, var(--bmx-sky) 100%); border-radius: 24px; padding: 56px 32px; text-align: center; color: #fff; }
.bmx-final-card h2 { font-family: var(--font-family-headings); font-weight: 800; font-size: 34px; color: #fff; margin: 0 0 12px; letter-spacing: -0.02em; }
.bmx-final-card p { color: rgba(255,255,255,.85); font-size: 17px; margin: 0 0 24px; }

/* responsive */
@media (max-width: 1199px) {
    .bmx-apps { grid-template-columns: repeat(2, 1fr); }
    .bmx-trust, .bmx-dev { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .bmx-hero-grid, .bmx-spot-grid { grid-template-columns: 1fr; gap: 36px; }
    .bmx-spot-rev .bmx-spot-copy { order: 0; }
    .bmx-sec-grid, .bmx-steps { grid-template-columns: 1fr; }
    .bmx-h1 { font-size: 38px; }
}
@media (max-width: 767px) {
    .bmx .site-section { padding-top: 56px; padding-bottom: 56px; }
    .bmx-hero { padding-top: 40px; }
    .bmx-h1 { font-size: 31px; }
    .bmx-h2 { font-size: 27px; }
    .bmx-apps, .bmx-trust, .bmx-dev { grid-template-columns: 1fr; }
    .bmx-suite { grid-template-columns: 44px 1fr; }
    .bmx-suite-side { display: none; }
    .bmx-final-card h2 { font-size: 26px; }
}

/* OX — all features section */
.bmx-all { background: #fff; }
.bmx-all-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.bmx-all-card { border: 1px solid var(--bmx-line); border-radius: 16px; padding: 24px 26px; background: #fff; }
.bmx-all-prod { background: linear-gradient(180deg, #f6f9ff 0%, #fff 70%); border-color: #d6e4ff; }
.bmx-all-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bmx-line); }
.bmx-all-head h3 { font-family: var(--font-family-headings); font-weight: 800; font-size: 19px; margin: 0; color: var(--bmx-ink); }
@media (max-width: 1199px) { .bmx-all-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .bmx-all-grid { grid-template-columns: 1fr; } }
.bmx-all-grid { display: block; column-count: 3; column-gap: 20px; }
.bmx-all-card { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 20px; display: inline-block; width: 100%; }
@media (max-width: 1199px) { .bmx-all-grid { column-count: 2; } }
@media (max-width: 767px) { .bmx-all-grid { column-count: 1; } }

/* ==========================================================================
   XOVI NOW landing page — .bmxv (reuses .bmx components) 2026-11-07
   ========================================================================== */
.xv-dash { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.xv-vis { grid-column: 1 / -1; border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 14px 16px 6px; }
.xv-vis svg { width: 100%; height: 80px; display: block; }
.xv-vis-num { font-family: var(--font-family-headings); font-weight: 800; font-size: 28px; color: var(--gray-darker); }
.xv-vis-num em { font-style: normal; font-size: 13px; color: #0a9e6e; background: #e3f7ef; border-radius: 6px; padding: 2px 6px; vertical-align: 6px; }
.xv-tasks, .xv-rank { border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 14px; font-size: 12px; }
.xv-task { display: flex; gap: 8px; padding: 6px 0; color: var(--gray-darker); }
.xv-rank > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--gray-lighter-4); color: var(--gray-darker); }
.xv-rank > div:last-child { border-bottom: 0; }
.xv-rank-h { color: var(--gray-base) !important; font-weight: 600; }
.xv-rank b { font-weight: 700; } .xv-rank em { font-style: normal; color: #0a9e6e; font-size: 11px; margin-left: 4px; }
.xv-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.xv-col-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-base); margin-bottom: 8px; }
.xv-card { font-size: 12px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 8px; padding: 10px; margin-bottom: 8px; color: var(--gray-darker); min-height: 44px; }
.xv-card-on { border-left: 3px solid var(--brand-primary); background: #eef4ff; }
.xv-card-done { background: #f5f8fc; display: flex; align-items: center; justify-content: center; }
.xv-text { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; }
.xv-score { width: 110px; height: 110px; border-radius: 50%; border: 8px solid var(--brand-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-family-headings); }
.xv-score b { font-size: 30px; color: var(--gray-darker); } .xv-score span { font-size: 12px; color: var(--gray-base); margin-top: 8px; }
.xv-bars i { display: block; height: 10px; border-radius: 5px; background: var(--brand-primary); margin: 10px 0; opacity: .85; }
.xv-bars i.xv-low { background: #f0a73a; }
.xv-chips { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.xv-chips span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.xv-add { background: #e3f7ef; color: #0a7f58; } .xv-less { background: #fff1e0; color: #a5620a; }
.xv-chart svg { width: 100%; height: 170px; display: block; }
.xv-legend { display: flex; gap: 18px; font-size: 12px; margin-top: 8px; color: var(--gray-base); }
.xv-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: 3px; background: var(--brand-primary); }
.xv-legend .xv-them::before { background: #aeb5c1; }
.xv-steps4 { grid-template-columns: repeat(4, 1fr) !important; }
.xv-aud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1199px) { .xv-steps4, .xv-aud { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) { .xv-steps4, .xv-aud { grid-template-columns: 1fr !important; } .xv-dash { grid-template-columns: 1fr; } }
.bmx h3 { line-height: 1.35; }
.bmx-plan-featured b, .bmx-plan-featured strong { color: #fff; }
.bmx-plan-featured .bmx-list b { font-weight: 700; }

/* ==========================================================================
   NordVPN landing page — .bmnv (reuses .bmx components) 2026-11-07
   ========================================================================== */
.bmnv .bmx-sec-grid { grid-template-columns: repeat(3, 1fr); }
.nv-gi { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: #eef4ff; color: var(--brand-primary); align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; }
.nv-gi svg { width: 18px; height: 18px; }
.nv-app { position: relative; max-width: 480px; margin: 0 auto; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #0b2a6b 0%, #1062fe 100%); box-shadow: 0 24px 60px rgba(16, 40, 90, .25); padding: 28px; min-height: 360px; }
.nv-app-map { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.2px); background-size: 14px 14px; }
.nv-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); }
.nv-dot1 { top: 22%; left: 18%; } .nv-dot2 { top: 35%; left: 70%; } .nv-dot3 { top: 18%; left: 48%; }
.nv-on { top: 30%; left: 40%; width: 16px; height: 16px; background: #41e0a0; box-shadow: 0 0 0 8px rgba(65,224,160,.25), 0 0 0 18px rgba(65,224,160,.12); }
.nv-app-card { position: absolute; left: 24px; right: 24px; bottom: 24px; background: #fff; border-radius: 16px; padding: 18px; }
.nv-status { display: flex; gap: 12px; align-items: center; }
.nv-status svg { width: 36px; height: 36px; color: #0a9e6e; }
.nv-status b { display: block; font-family: var(--font-family-headings); font-size: 18px; color: var(--gray-darker); }
.nv-status span { font-size: 13px; color: var(--gray-base); }
.nv-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.nv-meta span { font-size: 12px; font-weight: 600; background: #eef4ff; color: var(--brand-primary); border-radius: 999px; padding: 4px 10px; }
.nv-btn { text-align: center; border: 1px solid var(--gray-lighter-3); border-radius: 8px; padding: 10px; font-weight: 600; color: var(--gray-darker); font-size: 14px; }
.nv-tp-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--gray-lighter-4); border-radius: 10px; margin-bottom: 8px; font-size: 13px; color: var(--gray-darker); }
.nv-tp-row b svg { width: 20px; height: 20px; }
.nv-bad { background: #fff5f5; border-color: #f6d5d5; } .nv-bad span { text-decoration: line-through; color: #b54848; } .nv-bad b { color: #b54848; }
.nv-okb { color: #0a9e6e; }
.nv-ks-line { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.nv-dev, .nv-srv { width: 48px; height: 48px; border-radius: 12px; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; }
.nv-tun { flex: 1; height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--brand-primary) 0 14px, #9cc0ff 14px 22px); }
.nv-ks-switch { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--gray-lighter-4); border-radius: 10px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--gray-darker); }
.nv-ks-switch i { width: 40px; height: 22px; border-radius: 11px; background: var(--brand-primary); position: relative; }
.nv-ks-switch i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.nv-sp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nv-sp-row { border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.nv-sp-row b { font-family: var(--font-family-headings); color: var(--gray-darker); }
.nv-sp-row span { font-size: 26px; font-weight: 800; color: var(--brand-primary); }
.bmnv .bmx-plan { flex-basis: 340px; }
@media (max-width: 991px) { .bmnv .bmx-sec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .bmnv .bmx-sec-grid { grid-template-columns: 1fr; } .nv-app { min-height: 320px; } }

/* Shared — "what the numbers mean" size cards (2026-11-07) */
.bmx-sizes-section { background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%); }
.bmx-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.bmx-size { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 24px; }
.bmx-size-num { display: flex; align-items: baseline; gap: 8px; }
.bmx-size-num strong { font-family: var(--font-family-headings); font-weight: 800; font-size: 40px; line-height: 1; color: var(--brand-primary); letter-spacing: -0.02em; }
.bmx-size-num span { font-weight: 700; font-size: 15px; color: var(--gray-darker); }
.bmx-size-label { margin-top: 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-base); }
.bmx-meter { height: 8px; border-radius: 4px; background: #eef2f7; margin: 16px 0 14px; overflow: hidden; }
.bmx-meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-lighter)); }
.bmx-size-eq { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gray-darker); }
@media (min-width: 992px) {
  .bmx-sizes { grid-template-columns: repeat(4, 1fr); }
  .bmx-sizes:has(> :nth-child(6)), .bmx-sizes:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   SiteLock landing page — .bmsl (reuses .bmx components) 2026-11-07
   ========================================================================== */
.bmsl .bmx-sec-grid { grid-template-columns: repeat(3, 1fr); }
.sl-gi { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: #eef4ff; color: var(--brand-primary); align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; }
.sl-gi svg { width: 18px; height: 18px; }
.sl-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.sl-pill svg { width: 14px; height: 14px; }
.sl-pill-ok { background: #e3f7ef; color: #0a7f58; }
.sl-pill-blue { background: #eef4ff; color: var(--brand-primary); }
.sl-dash { display: flex; flex-direction: column; gap: 14px; }
.sl-dash-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sl-dash-site { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gray-darker); background: #f5f8fc; border-radius: 8px; padding: 6px 10px; }
.sl-dash-site svg, .sl-dash-seal svg { width: 16px; height: 16px; }
.sl-dash-site svg { color: #0a9e6e; }
.sl-dash-seal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--brand-primary); }
.sl-risk { border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 14px 16px; }
.sl-risk > div:first-child { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; color: var(--gray-base); }
.sl-risk b { font-family: var(--font-family-headings); font-size: 22px; font-weight: 800; color: #0a9e6e; }
.sl-risk-bar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sl-risk-bar i { height: 8px; border-radius: 4px; background: #41c995; }
.sl-risk-bar i:nth-child(2) { background: #f3c14b; } .sl-risk-bar i:nth-child(3) { background: #ec7a6a; }
.sl-risk-bar em { position: absolute; left: 14%; top: -5px; width: 4px; height: 18px; border-radius: 2px; background: var(--gray-darker); }
.sl-dash-rows > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-lighter-4); font-size: 14px; color: var(--gray-darker); }
.sl-dash-rows > div:last-child { border-bottom: 0; }
.sl-dash-rows span { display: inline-flex; align-items: center; gap: 10px; }
.sl-dash-rows span svg { width: 18px; height: 18px; color: var(--brand-primary); }
.sl-scan-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-base); }
.sl-scan-foot svg { width: 14px; height: 14px; }
.sl-scans { display: flex; flex-direction: column; gap: 10px; }
.sl-scan { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 12px 14px; }
.sl-scan-ic { width: 40px; height: 40px; border-radius: 10px; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; }
.sl-scan-ic svg { width: 22px; height: 22px; }
.sl-scan b { display: block; font-size: 14px; color: var(--gray-darker); }
.sl-scan em { font-style: normal; font-size: 12px; color: var(--gray-base); }
.sl-scan-hit { background: #fffaf2; border-color: #f6e2bf; }
.sl-scan-hit .sl-scan-ic { background: #fff1e0; color: #a5620a; }
.sl-scan-hit em { color: #a5620a; font-weight: 600; }
.sl-waf { display: grid; grid-template-columns: 1fr 96px 1fr; gap: 14px; align-items: center; }
.sl-waf-col { display: flex; flex-direction: column; gap: 8px; }
.sl-node { display: flex; align-items: center; gap: 8px; border: 1px solid var(--gray-lighter-4); border-radius: 10px; padding: 9px 10px; font-size: 12px; color: var(--gray-darker); }
.sl-node svg { width: 18px; height: 18px; color: var(--brand-primary); flex: none; }
.sl-node i { font-style: normal; font-weight: 600; }
.sl-node-bad { background: #fff5f5; border-color: #f6d5d5; } .sl-node-bad svg, .sl-node-bad i { color: #b54848; } .sl-node-bad i { text-decoration: line-through; }
.sl-node-ok { background: #f3fbf7; border-color: #cdeedd; } .sl-node-ok svg { color: #0a9e6e; }
.sl-waf-wall { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: linear-gradient(180deg, var(--brand-primary), #009aff); color: #fff; text-align: center; padding: 10px 6px; }
.sl-waf-wall svg { width: 30px; height: 30px; }
.sl-waf-wall b { font-family: var(--font-family-headings); font-size: 16px; } .sl-waf-wall span { font-size: 11px; opacity: .9; }
.sl-rep-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--gray-lighter-4); border-radius: 10px; margin-bottom: 8px; font-size: 14px; color: var(--gray-darker); }
.sl-foot { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #141414; color: rgba(255,255,255,.7); border-radius: 10px; padding: 14px 16px; font-size: 12px; }
.sl-seal { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; background: #fff; border-radius: 8px; padding: 6px 10px; color: var(--gray-darker); }
.sl-seal svg { grid-row: 1 / 3; width: 26px; height: 26px; color: #0a9e6e; }
.sl-seal b { font-size: 13px; font-weight: 800; line-height: 1.1; } .sl-seal i { font-style: normal; font-size: 11px; color: #0a7f58; line-height: 1.1; }
.sl-steps4 { grid-template-columns: repeat(4, 1fr) !important; }
.bmsl .sl-tip { max-width: 860px; margin: 28px auto 0; display: flex; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #eef4ff; font-size: 14px; line-height: 1.55; color: var(--gray-darker); }
.bmsl .sl-tip svg { width: 18px; height: 18px; flex: none; color: var(--brand-primary); margin-top: 2px; }
.sl-vat { margin: -6px 0 14px; font-size: 12px; color: var(--gray-base); }
.bmx-plan-featured .sl-vat { color: rgba(255,255,255,.8); }
.sl-eq { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--gray-base); font-weight: 400; }
.bmx-plan-featured .sl-eq, .bmx-plan-featured .sl-plan-desc, .bmx-plan-featured .sl-cycle-label { color: rgba(255,255,255,.85); }
.bmsl .bmx-plan { flex-basis: 360px; }
.sl-plan-desc { font-size: 14px; color: var(--gray-base); margin: -4px 0 14px; }
.sl-cycle-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-base); margin-bottom: 6px; }
.sl-cycle { margin-bottom: 12px; border-radius: 6px; height: 44px; }
.sl-lite { max-width: 860px; margin: 36px auto 0; display: flex; gap: 16px; align-items: flex-start; border: 1px dashed #b9cff7; border-radius: 16px; padding: 20px 24px; background: #f7faff; }
.sl-lite > svg { width: 32px; height: 32px; flex: none; color: var(--brand-primary); }
.sl-lite h3 { font-family: var(--font-family-headings); font-weight: 800; font-size: 18px; margin: 0 0 6px; color: var(--gray-darker); }
.sl-lite p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gray-base); }
.sl-cmp td .bmx-tick { width: 18px; height: 18px; color: #0a9e6e; }
.sl-no { color: #aeb5c1; }
.sl-cmp td:first-child { max-width: 360px; }
.sl-em { background: #f7faff; }
.sl-em .bmx-head .bmx-kicker { display: inline-block; margin-bottom: 10px; }
.sl-em-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sl-em-grid li { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 26px; }
.sl-em-grid h3 { font-family: var(--font-family-headings); font-weight: 700; font-size: 19px; margin: 14px 0 8px; color: var(--gray-darker); }
.sl-em-grid p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gray-base); }
.sl-em-grid .sl-eq { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-lighter-4); }
.sl-em-banner { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-radius: 16px; padding: 24px 28px; background: linear-gradient(135deg, var(--brand-primary) 0%, #009aff 100%); color: #fff; }
.sl-em-banner p { margin: 0; font-size: 17px; color: #fff; }
.sl-em-banner strong { font-family: var(--font-family-headings); font-size: 24px; font-weight: 800; }
@media (max-width: 1199px) { .sl-steps4 { grid-template-columns: repeat(2, 1fr) !important; } .sl-em-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) { .bmsl .bmx-sec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .bmsl .bmx-sec-grid, .sl-steps4, .sl-em-grid { grid-template-columns: 1fr !important; } .sl-waf { grid-template-columns: 1fr 70px 1fr; gap: 8px; } .sl-em-banner { flex-direction: column; align-items: flex-start; } }

/* ---- UX addendum: sticky nav, plain lines, scan demo, plan helper, reassurance ---- */
.bmsl .sl-plain { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed #d6e2f5; font-size: 14px; line-height: 1.55; color: #2d3440; }
.bmsl .sl-plain b { color: #0b4fd0; font-weight: 700; }
.site.bmsl { overflow: visible; overflow-x: clip; }
body:has(.bmsl) { overflow-x: clip; overflow-y: visible; }
.sl-nav { position: -webkit-sticky; position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); border-bottom: 1px solid #e3e9f2; box-shadow: 0 6px 18px -14px rgba(20,20,20,.35); }
.sl-nav ul { list-style: none; margin: 0; padding: 8px 0; display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sl-nav ul::-webkit-scrollbar { display: none; }
.sl-nav li { flex: none; }
.sl-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #2d3440; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.sl-nav a:hover { background: #eef4ff; color: #0b4fd0; text-decoration: none; }
.sl-nav a.is-active { background: #1062fe; color: #fff; }
.sl-nav a:focus-visible, .sl-chip:focus-visible, .sl-rescan:focus-visible { outline: 3px solid #009aff; outline-offset: 2px; }
.bmsl [id] { scroll-margin-top: 80px; }
.sl-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #c9d8f2; background: #fff; color: #1a2230; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.sl-chip:hover { border-color: #1062fe; color: #0b4fd0; }
.sl-chip[aria-pressed="true"] { background: #1062fe; border-color: #1062fe; color: #fff; }
/* scan demo */
.sl-demo-sec { background: #f7faff; }
.sl-demo-sec .bmx-head .bmx-kicker { display: inline-block; margin-bottom: 10px; }
.sl-demo { max-width: 980px; margin: 0 auto; }
.sl-demo-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-bottom: 18px; }
.sl-demo-pick-l { font-size: 14px; font-weight: 600; color: #4a5361; margin-right: 4px; }
.sl-demo-body { display: flex; flex-direction: column; gap: 12px; }
.sl-demo-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sl-demo-status { margin-left: auto; font-size: 13px; font-weight: 700; }
.sl-demo-status > span { display: inline-flex; align-items: center; gap: 6px; }
.sl-demo-status svg { width: 16px; height: 16px; }
.sl-demo-done { color: #0a7f58; }
.sl-demo-run { color: #0b4fd0; display: none !important; }
.sl-demo.is-scanning .sl-demo-done { display: none !important; }
.sl-demo.is-scanning .sl-demo-run { display: inline-flex !important; }
.sl-rescan { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid #c9d8f2; background: #fff; color: #0b4fd0; font-size: 14px; font-weight: 600; cursor: pointer; }
.sl-rescan svg { width: 16px; height: 16px; }
.sl-prog { height: 4px; border-radius: 2px; background: #e3e9f2; overflow: hidden; }
.sl-prog i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #1062fe, #009aff); }
.sl-demo.is-scanning .sl-prog i { animation: slProg 1.2s ease-out; }
@keyframes slProg { from { width: 0; } to { width: 100%; } }
.sl-drows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sl-drow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px minmax(0, 240px); gap: 12px; align-items: center; border: 1px solid #e3e9f2; border-radius: 12px; padding: 10px 12px; background: #fff; }
.sl-dtxt b { display: block; font-size: 14px; color: #141414; }
.sl-dtxt em { display: block; font-style: normal; font-size: 13px; line-height: 1.45; color: #4a5361; }
.sl-sev { justify-self: start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.sl-sev-hi { background: #fde8e8; color: #a61b1b; }
.sl-sev-med { background: #fff1d6; color: #8a4b00; }
.sl-sev-info { background: #eef4ff; color: #0b4fd0; }
.sl-res { display: none; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.sl-res svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sl-st-ok { color: #0a7f58; } .sl-st-warn { color: #8a4b00; } .sl-st-off { color: #5b6472; font-weight: 500; }
.sl-dsum span { display: none; }
.sl-demo[data-plan="find"] .sl-res-find, .sl-demo[data-plan="fix"] .sl-res-fix, .sl-demo[data-plan="defend"] .sl-res-defend { display: flex; }
.sl-demo[data-plan="find"] .sl-dsum .sl-res-find, .sl-demo[data-plan="fix"] .sl-dsum .sl-res-fix, .sl-demo[data-plan="defend"] .sl-dsum .sl-res-defend { display: block; }
.sl-dsum { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: #eef4ff; font-size: 14px; font-weight: 600; color: #1a2230; }
.sl-demo.is-scanning .sl-drow { animation: slFade .5s ease-out both; }
.sl-demo.is-scanning .sl-drow:nth-child(2) { animation-delay: .1s; } .sl-demo.is-scanning .sl-drow:nth-child(3) { animation-delay: .2s; }
.sl-demo.is-scanning .sl-drow:nth-child(4) { animation-delay: .3s; } .sl-demo.is-scanning .sl-drow:nth-child(5) { animation-delay: .4s; }
.sl-demo.is-scanning .sl-drow:nth-child(6) { animation-delay: .5s; } .sl-demo.is-scanning .sl-drow:nth-child(7) { animation-delay: .6s; }
@keyframes slFade { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sl-demo-foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sl-demo-foot p { margin: 0; font-size: 13px; color: #4a5361; max-width: 620px; }
.sl-demo-foot .btn, .sl-help .btn { min-height: 44px; border-radius: 6px; display: inline-flex; align-items: center; }
/* plan helper */
.sl-help { max-width: 980px; margin: 0 auto 36px; border: 1px solid #d6e2f5; border-radius: 16px; background: #f7faff; padding: 24px 26px; }
.sl-help[hidden] { display: none; }
.sl-help-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.sl-help-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #1062fe; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sl-help-ic svg { width: 24px; height: 24px; }
.sl-help h3 { font-family: var(--font-family-headings); font-weight: 800; font-size: 20px; margin: 0 0 4px; color: #141414; }
.sl-help-head p { margin: 0; font-size: 15px; color: #4a5361; }
.sl-help-qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sl-q-t { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 700; color: #141414; margin: 0 0 10px; }
.sl-q-t span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #dbe7ff; color: #0b4fd0; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.sl-q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-q-opts .sl-chip { font-size: 14px; padding: 0 14px; text-align: left; }
.sl-help.is-hacked .sl-q:not([data-q="hacked"]) { opacity: .5; }
.sl-help-res { margin-top: 18px; padding-top: 16px; border-top: 1px solid #d6e2f5; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sl-help-msg { margin: 0; font-size: 15px; font-weight: 600; color: #1a2230; max-width: 640px; }
.sl-help-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sl-help-acts [hidden] { display: none !important; }
.sl-rec { position: absolute; top: -14px; right: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #0a7f58; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 6px 14px -6px rgba(10,127,88,.6); z-index: 2; }
.sl-rec[hidden] { display: none; }
.sl-rec svg { width: 14px; height: 14px; }
.bmsl .bmx-plan { position: relative; transition: box-shadow .3s, transform .3s; }
.bmsl .bmx-plan.is-rec { box-shadow: 0 0 0 3px #0a7f58, 0 18px 40px -18px rgba(10,127,88,.55); }
.sl-em .sl-em-banner { position: relative; }
.sl-em.is-rec .sl-em-banner { box-shadow: 0 0 0 3px #0a7f58, 0 18px 40px -18px rgba(10,127,88,.55); }
/* reassurance */
.sl-pm { margin: -4px 0 8px; font-size: 13px; line-height: 1.5; color: #4a5361; }
.sl-pm b { color: #141414; }
.bmx-plan-featured .sl-pm, .bmx-plan-featured .sl-pm b { color: #fff; }
.sl-assure { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #4a5361; }
.sl-assure li { display: flex; align-items: center; gap: 8px; }
.sl-assure svg { width: 16px; height: 16px; flex: none; color: #0a7f58; }
.sl-assure a { color: #0b4fd0; font-weight: 700; text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
.bmx-plan-featured .sl-assure, .bmx-plan-featured .sl-assure a, .bmx-plan-featured .sl-assure svg { color: #fff; }
.sl-assure-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 16px; font-size: 14px; }
.sl-final-note { margin: 16px 0 0; font-size: 14px; color: rgba(255,255,255,.9); }
@media (max-width: 991px) {
  .sl-help-qs { grid-template-columns: 1fr; }
  .sl-drow { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .sl-drow .sl-res { grid-column: 2 / -1; }
}
@media (max-width: 767px) {
  .sl-nav ul { justify-content: flex-start; padding-left: 4px; padding-right: 4px; }
  .sl-nav a { font-size: 14px; padding: 0 14px; }
  .sl-help { padding: 20px 16px; }
  .sl-demo-status { margin-left: 0; }
  .sl-demo-pick-l { flex-basis: 100%; text-align: center; margin: 0; }
  .sl-drow { grid-template-columns: 36px minmax(0, 1fr); }
  .sl-drow .sl-sev { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .bmsl *, .bmsl *::before, .bmsl *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   CodeGuard landing page — .bmcg (reuses .bmx components) 2026-11-07
   ========================================================================== */
.bmcg .cg-why { grid-template-columns: repeat(4, 1fr); }
.cg-gi { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: #eef4ff; color: var(--brand-primary); align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; }
.cg-gi svg { width: 18px; height: 18px; }
.cg-from strong { color: var(--gray-darker); font-size: 18px; }
.cg-from span { color: var(--gray-base); }
/* hero dashboard */
.cg-dash { padding: 20px; }
.cg-dash-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-lighter-4); }
.cg-dash-top b { display: block; font-family: var(--font-family-headings); font-size: 16px; color: var(--gray-darker); }
.cg-dash-top span { font-size: 13px; color: var(--gray-base); }
.cg-ok { width: 42px; height: 42px; border-radius: 12px; background: #e3f7ef; color: #0a9e6e; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; }
.cg-ok svg { width: 24px; height: 24px; }
.cg-pill { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; background: #eef4ff; color: var(--brand-primary); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cg-vers { position: relative; padding: 14px 0 6px 22px; }
.cg-vers::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: 18px; width: 2px; background: var(--gray-lighter-4); }
.cg-ver { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--gray-lighter-4); border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
.cg-ver i { position: absolute; left: -21px; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #9cc0ff; }
.cg-ver b { color: var(--gray-darker); font-weight: 600; }
.cg-ver span { color: var(--gray-base); }
.cg-ver-on { background: #eef4ff; border-color: #d6e4ff; }
.cg-ver-on i { background: var(--brand-primary); border-color: var(--brand-primary); }
.cg-dash-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cg-chip { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; color: var(--gray-darker); border: 1px solid var(--gray-lighter-4); border-radius: 999px; padding: 5px 10px; }
.cg-chip svg, .cg-btn svg { width: 16px; height: 16px; }
.cg-btn { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; justify-content: center; background: var(--brand-primary); color: #fff; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 8px 14px; }
.cg-btn-full { display: flex; margin: 14px 0 0; }
/* spotlight 1: timeline of versions */
.cg-tl { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 190px; padding-bottom: 4px; border-bottom: 1px solid var(--gray-lighter-4); }
.cg-tl-day { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 6px; }
.cg-tl-day i { display: block; width: 100%; min-height: 8px; border-radius: 6px 6px 2px 2px; background: #9cc0ff; }
.cg-tl-day:first-child i { background: var(--brand-primary); }
.cg-tl-day span { font-size: 11px; color: var(--gray-base); }
.cg-tl-legend { display: flex; gap: 18px; font-size: 12px; margin-top: 12px; color: var(--gray-base); }
.cg-tl-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; background: var(--brand-primary); }
.cg-tl-legend .cg-tl-diff::before { background: #9cc0ff; }
/* spotlight 2: ChangeAlert email */
.cg-mail-h { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--gray-lighter-4); color: var(--brand-primary); }
.cg-mail-h b { font-family: var(--font-family-headings); color: var(--gray-darker); font-size: 15px; }
.cg-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; font-size: 13px; color: var(--gray-darker); border: 1px solid var(--gray-lighter-4); }
.cg-row em { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; flex: 0 0 auto; }
.cg-row span { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-add em { background: #e3f7ef; color: #08724f; }
.cg-mod em { background: #fff1e0; color: #8f5408; }
.cg-del em { background: #fdecec; color: #b54848; }
/* spotlight 3: restore */
.cg-rs-ver { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; color: var(--gray-darker); margin-bottom: 14px; }
.cg-rs-ver svg { color: var(--brand-primary); }
.cg-opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--gray-lighter-4); border-radius: 10px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--gray-darker); }
.cg-opt i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c3cbd8; flex: 0 0 18px; }
.cg-opt-on { background: #eef4ff; border-color: #d6e4ff; }
.cg-opt-on i { border: 5px solid var(--brand-primary); }
.cg-rs-note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #08724f; margin: 12px 0 0; }
.cg-rs-note svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* steps */
.cg-steps4 { grid-template-columns: repeat(4, 1fr) !important; }
/* plans */
.bmcg .cg-plans { gap: 20px; }
.bmcg .cg-plan { flex: 0 1 262px; padding: 26px 22px; }
.bmcg .cg-plan .bmx-plan-name { font-size: 18px; margin-bottom: 14px; }
.cg-size b { display: block; font-family: var(--font-family-headings); font-size: 34px; font-weight: 800; line-height: 1; color: var(--gray-darker); }
.cg-size span { font-size: 13px; color: var(--gray-base); }
.bmcg .cg-plan .bmx-plan-price { margin-top: 14px; margin-bottom: 14px; padding-bottom: 14px; }
.bmcg .cg-plan .bmx-plan-price strong { font-size: 28px; display: inline; }
.cg-for { font-size: 14px; line-height: 1.5; color: var(--gray-base); margin: 0 0 14px; min-height: 42px; }
.bmx-plan-featured .cg-size b, .bmx-plan-featured .cg-size span, .bmx-plan-featured .cg-for { color: #fff; }
/* comparison */
.bmcg .cg-cmp { max-width: 1140px; }
.bmcg .cg-cmp table { font-size: 14px; }
.bmcg .cg-cmp th, .bmcg .cg-cmp td { padding: 12px 10px; white-space: nowrap; }
.bmcg .cg-cmp td:first-child { white-space: normal; min-width: 220px; }
.bmcg .cg-cmp td:nth-child(3) { background: transparent; font-weight: 400; color: var(--bmx-ink); }
.bmcg .cg-cmp .cg-col-feat { background: #f6f9ff !important; color: var(--bmx-blue) !important; font-weight: 600; }
.bmcg .cg-cmp-key td { font-weight: 700; }
.bmcg .cg-cmp-price strong { font-weight: 700; }
.bmcg .cg-cmp-price span { font-size: 12px; color: var(--bmx-muted); font-weight: 400; }
.bmcg .cg-cmp .bmx-tick { display: inline-block; margin: 0; }
.cg-meter { display: block; height: 6px; border-radius: 3px; background: #e6edf8; margin-top: 10px; overflow: hidden; }
.cg-meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-lighter)); }
.bmx-plan-featured .cg-meter { background: rgba(255,255,255,.3); }
.bmx-plan-featured .cg-meter i { background: #fff; }
.cg-photos { display: flex; gap: 6px; align-items: center; line-height: 1.4; font-style: normal; font-size: 13px; color: var(--gray-base); margin-top: 8px; }
.cg-photos svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--brand-primary); }
.bmx-plan-featured .cg-photos, .bmx-plan-featured .cg-photos svg { color: #fff; }
.cg-note { font-size: 13px; line-height: 1.55; color: var(--gray-base); margin: 14px 0 0; }
.cg-center { text-align: center; }
.cg-eqs { list-style: none; padding: 0; margin: 22px 0 0; }
.cg-eqs li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 15px; color: var(--gray-darker); }
.cg-eqs svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--brand-primary); }
.cg-guide { background: #f7faff; }
.cg-g-steps { list-style: none; padding: 0; margin: 24px 0 0; }
.cg-g-steps li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.cg-g-steps .bmx-num { flex: 0 0 32px; width: 32px; height: 32px; font-size: 14px; }
.cg-g-steps p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--gray-darker); }
.cg-g-card { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(16, 40, 90, .08); }
.cg-g-list { list-style: none; padding: 0; margin: 0; }
.cg-g-list li { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-lighter-4); }
.cg-g-list li:last-child { border-bottom: 0; }
.cg-g-size { flex: 0 0 64px; font-family: var(--font-family-headings); font-weight: 800; font-size: 16px; color: var(--brand-primary); }
.cg-g-txt { flex: 1; min-width: 0; }
.cg-g-txt b { font-size: 14px; font-weight: 600; color: var(--gray-darker); }
.cg-g-txt .cg-meter { margin-top: 6px; }
.bmcg .cg-cmp-eq td { white-space: normal; font-size: 12px; color: var(--bmx-muted); min-width: 110px; }
@media (max-width: 1199px) { .bmcg .cg-why, .cg-steps4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) { .bmcg .cg-why, .cg-steps4 { grid-template-columns: 1fr !important; } .bmcg .cg-plan { flex-basis: 100%; } .cg-tl { height: 150px; } }

/* ---------- UX addendum: nav, plain words, restore demo, plan helper, reassurance ---------- */
.bmcg [hidden] { display: none !important; }
.cg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bmcg .cg-pill-btn:focus-visible, .bmcg .cg-day:focus-visible, .bmcg .cg-nav-a:focus-visible, .bmcg .cg-ask a:focus-visible, .bmcg .cg-hero-rs a:focus-visible { outline: 3px solid #009aff; outline-offset: 2px; }
/* hero reassurance */
.cg-hero-rs { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; margin: 10px 0 0; font-size: 14px; color: var(--gray-darker); }
.cg-hero-rs span, .bmcg .cg-hero-rs a { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.cg-hero-rs a { font-weight: 600; color: #0b4fd6; }
.cg-hero-rs svg { width: 18px; height: 18px; color: var(--brand-primary); flex: 0 0 18px; }
/* in-page nav */
.cg-nav-ph { position: relative; z-index: 1020; }
.cg-nav { background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--gray-lighter-4); }
.cg-nav-fixed { position: fixed; left: 0; right: 0; top: 0; box-shadow: 0 8px 24px rgba(16, 40, 90, .08); }
.cg-nav-in { display: flex; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.cg-nav-list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cg-nav-list::-webkit-scrollbar { display: none; }
.bmcg .cg-nav-a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gray-darker); text-decoration: none; border: 1px solid transparent; }
.bmcg .cg-nav-a:hover, .bmcg .cg-nav-a:focus { color: #0b4fd6; text-decoration: none; background: #f3f7ff; }
.bmcg .cg-nav-a.is-active { background: #eef4ff; color: #0b4fd6; border-color: #d6e4ff; }
.cg-nav-cta { margin-left: auto; flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }
/* plain words */
.cg-plain { background: #f7faff; }
.cg-plain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cg-term { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 18px; }
.cg-term-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; }
.cg-term-ico svg { width: 22px; height: 22px; }
.cg-term h3 { font-family: var(--font-family-headings); font-size: 15px; font-weight: 700; color: var(--gray-darker); margin: 0 0 4px; line-height: 1.35; }
.cg-term p { font-size: 14px; line-height: 1.55; color: var(--gray-base); margin: 0; }
/* restore demo */
.cg-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; max-width: 1100px; margin: 0 auto; }
.cg-demo > * { min-width: 0; }
.cg-demo-lbl { font-family: var(--font-family-headings); font-size: 15px; font-weight: 700; color: var(--gray-darker); margin: 0 0 10px; }
.cg-demo-lbl + .cg-pills { margin-bottom: 4px; }
.cg-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cg-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 66px; padding: 8px 2px; background: #fff; border: 1px solid #c9d3e3; border-radius: 12px; font-size: 13px; color: var(--gray-darker); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.cg-day b { font-weight: 600; }
.cg-day-dot { width: 14px; height: 14px; border-radius: 50%; background: #0a9e6e; box-shadow: 0 0 0 3px #e3f7ef; }
.cg-day-warn .cg-day-dot { background: #d98a00; box-shadow: 0 0 0 3px #fff1e0; }
.cg-day-bad .cg-day-dot { background: #d64545; box-shadow: 0 0 0 3px #fdecec; }
.cg-day:hover { border-color: var(--brand-primary); }
.cg-day[aria-pressed="true"] { border-color: var(--brand-primary); background: #eef4ff; box-shadow: 0 0 0 2px var(--brand-primary) inset; }
.cg-day.is-restored { background: #e3f7ef; border-color: #0a9e6e; box-shadow: 0 0 0 2px #0a9e6e inset; }
.cg-legend { display: flex; gap: 16px; list-style: none; padding: 0; margin: 10px 0 0; font-size: 12px; color: var(--gray-base); }
.cg-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: #0a9e6e; }
.cg-legend .cg-lg-warn::before { background: #d98a00; }
.cg-legend .cg-lg-bad::before { background: #d64545; }
.cg-day-info { min-height: 76px; margin: 14px 0 22px; padding: 12px 16px; border-radius: 12px; background: #f7faff; border-left: 4px solid #c9d3e3; font-size: 14px; color: var(--gray-darker); }
.cg-day-info b { display: block; font-weight: 700; margin-bottom: 2px; }
.cg-day-info p { margin: 0; line-height: 1.5; }
.cg-info-ok { border-left-color: #0a9e6e; }
.cg-info-warn { border-left-color: #d98a00; background: #fffaf2; }
.cg-info-bad { border-left-color: #d64545; background: #fff7f7; }
.cg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-pill-btn { min-height: 44px; padding: 0 16px; border: 1px solid #c9d3e3; border-radius: 999px; background: #fff; color: var(--gray-darker); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cg-pill-btn:hover { border-color: var(--brand-primary); }
.cg-pill-btn[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.bmcg .cg-go { margin-top: 20px; display: inline-flex; gap: 8px; align-items: center; min-height: 48px; }
.cg-go svg, .cg-reset svg { width: 18px; height: 18px; }
.cg-url { display: inline-flex; gap: 5px; align-items: center; margin-left: 10px; padding: 1px 10px; border: 1px solid var(--gray-lighter-4); border-radius: 999px; background: #fff; font-style: normal; font-size: 12px; color: var(--gray-base); line-height: 1.5; }
.cg-site .bmx-win-bar { align-items: center; }
.cg-url svg { width: 12px; height: 12px; }
.cg-site-state { display: none; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.cg-site-state svg { width: 20px; height: 20px; flex: 0 0 20px; }
.cg-site-bad { background: #fdecec; color: #a33a3a; }
.cg-site-ok { background: #e3f7ef; color: #08724f; }
.cg-site.is-bad .cg-site-bad, .cg-site.is-ok .cg-site-ok { display: flex; }
.cg-site-page i { display: block; border-radius: 6px; background: #e6edf8; transition: background .5s, transform .5s; }
.cg-sk-hero { height: 96px; background: linear-gradient(120deg, #d6e4ff, #eef4ff) !important; margin-bottom: 14px; }
.cg-sk-line { height: 10px; margin-bottom: 8px; }
.cg-sk-short { width: 60%; }
.cg-sk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.cg-sk-cards i { height: 54px; }
.cg-site.is-bad .cg-sk-hero { background: repeating-linear-gradient(135deg, #f6d4d4 0 12px, #fdecec 12px 24px) !important; transform: skewX(-4deg); }
.cg-site.is-bad .cg-sk-cards i:nth-child(2) { transform: translate(6px, 4px) rotate(3deg); background: #f6d4d4; }
.cg-prog { height: 6px; border-radius: 3px; background: #e6edf8; overflow: hidden; margin: 18px 0 12px; }
.cg-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-lighter)); }
.cg-prog.is-run i { width: 100%; transition: width 1.3s ease-in-out; }
.cg-prog.is-done i { width: 100%; background: #0a9e6e; }
.cg-result { min-height: 44px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--gray-darker); }
.cg-result-ok { color: #08724f; }
.cg-result-hint { color: #8a5300; }
.bmcg .cg-reset { margin-top: 12px; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
/* plan helper */
.cg-quiz { max-width: 980px; margin: 0 auto 40px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(16, 40, 90, .08); }
.cg-quiz-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.cg-quiz-head .bmx-h3 { margin: 0 0 4px; }
.cg-quiz-head p { margin: 0; font-size: 14px; color: var(--gray-base); }
.cg-quiz-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; }
.cg-quiz-ico svg { width: 24px; height: 24px; }
.cg-quiz-q { margin-top: 18px; }
.cg-quiz-label { font-size: 15px; font-weight: 600; color: var(--gray-darker); margin: 0 0 8px; }
.cg-quiz-out { margin-top: 22px; padding: 14px 18px; border-radius: 12px; background: #f7faff; }
.cg-quiz-msg { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gray-darker); }
.cg-quiz-acts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 10px; }
.cg-quiz-acts .btn { min-height: 44px; display: inline-flex; align-items: center; }
.bmcg .cg-quiz-measure { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: #0b4fd6; }
.bmcg .cg-plan { transition: transform .3s, box-shadow .3s; }
.bmcg .cg-plan-pick { outline: 3px solid #009aff; outline-offset: 3px; transform: translateY(-4px); }
.cg-pick { display: inline-flex; gap: 6px; align-items: center; align-self: flex-start; margin: 0 0 12px; padding: 4px 10px; border-radius: 999px; background: #e3f7ef; color: #08724f; font-size: 12px; font-weight: 700; }
.cg-pick svg { width: 15px; height: 15px; }
.bmx-plan-featured .cg-pick { background: #fff; }
.cg-vatline { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--gray-base); }
.bmx-plan-featured .cg-vatline { color: #fff; }
.cg-rs { list-style: none; padding: 0; margin: 14px 0 0; }
.cg-rs li { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 1.4; color: var(--gray-base); padding: 3px 0; }
.cg-rs svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--brand-primary); }
.bmx-plan-featured .cg-rs li, .bmx-plan-featured .cg-rs svg { color: #fff; }
.cg-ask { text-align: center; margin: 28px 0 0; }
.bmcg .cg-ask a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 600; color: #0b4fd6; }
.cg-ask svg { width: 18px; height: 18px; }
@media (max-width: 1199px) { .cg-plain-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .cg-plain-grid { grid-template-columns: repeat(2, 1fr); } .cg-demo { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 767px) { .cg-nav-cta { display: none; } .cg-quiz { padding: 20px; } }
@media (max-width: 575px) {
    .cg-plain-grid { grid-template-columns: 1fr; }
    .cg-days { grid-template-columns: repeat(7, 68px); overflow-x: auto; padding: 2px 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .bmcg *, .bmcg *::before, .bmcg *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .bmcg .cg-plan-pick { transform: none; }
    .cg-site.is-bad .cg-sk-hero, .cg-site.is-bad .cg-sk-cards i:nth-child(2) { transform: none; }
}
/* keep white text on the featured card at >= 4.5:1 (the shared gradient ends at a light sky blue) */
.bmcg .bmx-plan-featured { background: linear-gradient(160deg, #1062fe 0%, #0b5ce8 100%); }

/* ==========================================================================
   360 Monitoring landing page — .bm360 / .m3-* (reuses .bmx components) 2026-11-07
   ========================================================================== */
.bm360 { --m3-top: 0px; --m3-ok: #0a7f58; --m3-ok-bg: #e3f7ef; --m3-bad: #b42318; --m3-bad-bg: #fdecec; --m3-amb: #8a5300; --m3-amb-bg: #fff1e0; }
.bm360 [id] { scroll-margin-top: calc(var(--m3-top) + 76px); }
.bm360 .m3-hero .bmx-hero-grid { align-items: start; }
.m3-cap { font-size: 12px; color: var(--gray-base); text-align: center; margin: 10px 0 0; }
.m3-note { font-size: 13px; line-height: 1.55; color: var(--gray-base); margin: 14px 0 0; }
.m3-center { text-align: center; max-width: 860px; margin-left: auto; margin-right: auto; }

/* site check form */
.m3-check { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 20px; margin: 0 0 24px; box-shadow: 0 12px 32px rgba(16, 40, 90, .06); max-width: 620px; }
.m3-check-t { display: flex; align-items: center; gap: 8px; font-family: var(--font-family-headings); font-weight: 700; font-size: 16px; color: var(--gray-darker); margin: 0 0 12px; }
.m3-check-t svg { width: 20px; height: 20px; color: var(--brand-primary); }
.m3-check-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 10px; align-items: end; }
.m3-check .form-group { margin: 0; }
.m3-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--gray-darker); margin: 0 0 6px; }
.m3-check .form-control { min-height: 46px; border-radius: 6px; }
.m3-check-btn { min-height: 46px; border-radius: 6px; white-space: nowrap; position: relative; }
.m3-check-btn .loader.hidden { display: none; }
.m3-check-n { font-size: 13px; line-height: 1.5; color: var(--gray-base); margin: 12px 0 0; }

/* hero dashboard */
.m3-dash { padding: 18px 20px 20px; position: relative; }
.m3-row { display: flex; align-items: center; gap: 12px; }
.m3-row-t b { display: block; font-family: var(--font-family-headings); font-size: 15px; color: var(--gray-darker); }
.m3-row-t span { font-size: 12px; color: var(--gray-base); }
.m3-ok { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--m3-ok); background: var(--m3-ok-bg); border-radius: 999px; padding: 4px 10px; }
.m3-dotlive { width: 12px; height: 12px; border-radius: 50%; background: #12b886; flex: 0 0 12px; box-shadow: 0 0 0 0 rgba(18, 184, 134, .5); animation: m3-live 2s infinite; }
.m3-ubars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 34px; margin: 14px 0; }
.m3-ubars i { border-radius: 3px; background: #34c38f; animation: m3-grow .5s both; transform-origin: bottom; }
.m3-ubars i.m3-b-down { background: #e5484d; }
.m3-spark { border: 1px solid var(--gray-lighter-4); border-radius: 10px; padding: 10px 12px 6px; margin-bottom: 10px; }
.m3-spark span { font-size: 12px; font-weight: 600; color: var(--gray-base); }
.m3-spark svg { display: block; width: 100%; height: 56px; }
.m3-line { fill: none; stroke: var(--brand-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 0; animation: m3-draw 2.2s ease-out both; }
.m3-row-s { font-size: 13px; color: var(--gray-darker); padding: 8px 0; border-top: 1px solid var(--gray-lighter-4); flex-wrap: wrap; }
.m3-row-s svg { width: 18px; height: 18px; color: var(--brand-primary); flex: 0 0 18px; }
.m3-mini { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: var(--gray-base); }
.m3-mini + .m3-mini { margin-left: 10px; }
.m3-mini em { font-style: normal; }
.m3-mini i { display: block; width: 54px; height: 6px; border-radius: 3px; background: #e6edf8; overflow: hidden; }
.m3-mini b { display: block; height: 100%; background: var(--brand-primary); border-radius: 3px; }
.m3-toast { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: var(--gray-darker, #141414); color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; animation: m3-in .5s 2.4s both; }
.m3-toast svg { width: 18px; height: 18px; color: #7ee2b8; flex: 0 0 18px; }

/* sticky in-page nav */
.m3-nav { position: sticky; top: var(--m3-top); z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--gray-lighter-4); backdrop-filter: saturate(1.4) blur(6px); }
.m3-nav-in { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m3-nav-in::-webkit-scrollbar { display: none; }
.m3-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--gray-lighter-4); background: #fff; color: var(--gray-darker); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.m3-chip:hover, .m3-chip:focus { color: var(--brand-primary); border-color: var(--brand-primary); text-decoration: none; }
.m3-chip.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* what */
.m3-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* features with plain-language lines */
.m3-fgroup + .m3-fgroup { margin-top: 44px; }
.m3-fgroup > .bmx-h3 { font-size: 20px; }
.m3-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m3-feat { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 20px; }
.m3-fc { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; }
.m3-fc svg { width: 38px; height: 38px; }
.m3-feat h4 { font-family: var(--font-family-headings); font-weight: 700; font-size: 17px; color: var(--gray-darker); margin: 6px 0 6px; }
.m3-feat p { font-size: 14px; line-height: 1.55; color: var(--gray-base); margin: 0; }
.m3-feat .m3-means { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #f2f7ff; color: var(--gray-darker); }
.m3-means b { color: var(--brand-primary); }
.m3-features { background: #f7faff; }

/* interval demo */
.m3-demo-card { max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 20px; padding: 28px; box-shadow: 0 24px 60px rgba(16, 40, 90, .08); }
.m3-demo-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.m3-demo-q { font-weight: 700; color: var(--gray-darker); }
.m3-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.m3-pill { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-height: 44px; min-width: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid #c9d6ec; background: #fff; color: var(--gray-darker); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.m3-pill small { font-size: 11px; font-weight: 500; color: var(--gray-base); }
.m3-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.m3-pill:focus-visible, .m3-replay:focus-visible, .m3-help-reset:focus-visible, .m3-chip:focus-visible { outline: 3px solid rgba(16, 98, 254, .45); outline-offset: 2px; }
.m3-pill[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.m3-pill[aria-pressed="true"] small { color: #fff; }
.m3-replay { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--brand-primary); font-weight: 600; font-size: 14px; cursor: pointer; border-radius: 6px; }
.m3-replay svg { width: 18px; height: 18px; }
.m3-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 0; font-size: 12px; color: var(--gray-base); }
.m3-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: #34c38f; }
.m3-legend .m3-lg-fail::before { background: #e5484d; }
.m3-legend .m3-lg-out::before { border-radius: 3px; background: var(--m3-bad-bg); border: 1px dashed #e5484d; }
.m3-pane { padding: 8px 0 4px; }
.m3-pane + .m3-pane { border-top: 1px solid var(--gray-lighter-4); margin-top: 12px; }
.m3-pane-h { font-weight: 700; font-size: 14px; color: var(--gray-darker); margin: 8px 0 0; }
.m3-js .m3-pane { display: none; }
.m3-js .m3-pane.is-on { display: block; }
.m3-js .m3-pane + .m3-pane { border-top: 0; margin-top: 0; }
.m3-js .m3-pane-h { display: none; }
.bm360:not(.m3-js) .m3-demo-top, .bm360:not(.m3-js) .m3-replay { display: none; }
.m3-track { position: relative; height: 150px; margin: 8px 12px 0; }
.m3-line0 { position: absolute; left: 0; right: 0; top: 75px; height: 4px; margin-top: -2px; border-radius: 2px; background: #e6edf8; }
.m3-outage { position: absolute; top: 56px; height: 38px; border-radius: 8px; background: var(--m3-bad-bg); border: 1px dashed #e5484d; }
.m3-outage span { position: absolute; left: 6px; bottom: -22px; font-size: 11px; font-weight: 700; color: var(--m3-bad); white-space: nowrap; }
.m3-dot { position: absolute; top: 75px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #34c38f; box-shadow: 0 0 0 3px #fff; }
.m3-dot-down { background: #e5484d; }
.m3-bub { position: absolute; display: flex; gap: 8px; align-items: flex-start; transform: translateX(-50%); width: max-content; max-width: 250px; padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.35; color: var(--gray-darker); background: #fff; border: 1px solid var(--gray-lighter-4); box-shadow: 0 10px 24px rgba(16, 40, 90, .12); }
.m3-bub b { display: block; font-size: 13px; }
.m3-bub svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.m3-bub-down { top: 0; border-color: #f5b5b5; }
.m3-bub-down svg { color: var(--m3-bad); }
.m3-bub-up { top: 104px; border-color: #a6e3c9; }
.m3-bub-up svg { color: var(--m3-ok); }
.m3-bub-r { transform: translateX(-100%) translateX(14px); }
.m3-bub-l { transform: translateX(-14px); }
.m3-axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; color: var(--gray-base); }
.m3-res { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--gray-darker); }
.m3-res span { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--brand-primary); background: #eef4ff; border-radius: 999px; padding: 2px 10px; }
.m3-play .m3-dot { animation: m3-pop .35s both; }
.m3-play .m3-outage { animation: m3-fade .4s 1s both; }
.m3-play .m3-bub { animation: m3-in .45s both; }

/* alert channels */
.m3-ch { list-style: none; padding: 0; margin: 0 auto; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.m3-ch li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--gray-darker); }
.m3-ch img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex: 0 0 32px; }
.m3-ch .m3-ch-all { border-color: #b9cff7; background: #f2f7ff; }

/* spotlight mocks */
.m3-geo-t { font-size: 13px; font-weight: 700; color: var(--gray-darker); margin: 0 0 12px; }
.m3-geo-row { display: grid; grid-template-columns: 120px 1fr 60px; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; color: var(--gray-darker); }
.m3-geo-row i { display: block; height: 10px; border-radius: 5px; background: #e6edf8; overflow: hidden; }
.m3-geo-row b { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-lighter)); }
.m3-geo-row em { font-style: normal; text-align: right; font-weight: 600; color: var(--gray-base); }
.m3-scan-h { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--gray-lighter-4); }
.m3-scan-h svg { color: var(--brand-primary); }
.m3-scan-h b { font-family: var(--font-family-headings); color: var(--gray-darker); font-size: 15px; }
.m3-sev { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--gray-lighter-4); border-radius: 10px; margin-bottom: 8px; font-size: 13px; color: var(--gray-darker); }
.m3-sev em { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; flex: 0 0 104px; text-align: center; }
.m3-sev b { margin-left: auto; font-family: var(--font-family-headings); font-size: 16px; }
.m3-sev-err em { background: var(--m3-bad-bg); color: var(--m3-bad); }
.m3-sev-warn em { background: var(--m3-amb-bg); color: var(--m3-amb); }
.m3-sev-info em { background: #eef4ff; color: #0b4fcf; }
.m3-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.m3-g { border: 1px solid var(--gray-lighter-4); border-radius: 10px; padding: 10px 12px; }
.m3-g span { display: block; font-size: 12px; color: var(--gray-base); }
.m3-g b { font-family: var(--font-family-headings); font-size: 22px; color: var(--gray-darker); }
.m3-g i { display: block; height: 6px; border-radius: 3px; background: #e6edf8; margin-top: 6px; overflow: hidden; }
.m3-g s { display: block; height: 100%; border-radius: 3px; background: var(--brand-primary); text-decoration: none; }
.m3-status-h { display: flex; gap: 10px; align-items: center; background: var(--m3-ok-bg); color: var(--m3-ok); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.m3-status-h svg { width: 20px; height: 20px; }
.m3-status-h b { font-family: var(--font-family-headings); font-size: 15px; }
.m3-comp { padding: 10px 0; border-bottom: 1px solid var(--gray-lighter-4); }
.m3-comp div { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray-darker); margin-bottom: 8px; }
.m3-comp em { font-style: normal; font-weight: 700; color: var(--m3-ok); }
.m3-comp p { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 22px; margin: 0; }
.m3-comp i { border-radius: 2px; background: #34c38f; }
.m3-comp i.m3-amb { background: #f0a020; }
.m3-status-f { font-size: 12px; color: var(--gray-base); margin: 10px 0 0; }

/* uptime maths */
.m3-up { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.m3-up-card { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 22px; }
.m3-up-card strong { font-family: var(--font-family-headings); font-weight: 800; font-size: 34px; color: var(--brand-primary); }
.m3-up-card p { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--gray-darker); }
.m3-up-card p span { display: block; font-weight: 400; font-size: 13px; color: var(--gray-base); }
.m3-up-card .bmx-meter i { background: linear-gradient(90deg, #f0a020, #e5484d); }
.m3-up-card .m3-up-lost { font-weight: 400; font-size: 13px; color: var(--gray-base); }
.m3-up-card .m3-up-lost b { font-size: 16px; color: var(--gray-darker); }
.m3-gi { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: #eef4ff; color: var(--brand-primary); align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; }
.m3-gi svg { width: 18px; height: 18px; }

/* plan helper */
.m3-helper { max-width: 980px; margin: 0 auto 44px; background: linear-gradient(160deg, #f2f7ff 0%, #ffffff 100%); border: 1px solid #d6e4ff; border-radius: 20px; padding: 26px 28px; }
.m3-helper-head { display: flex; gap: 14px; align-items: flex-start; }
.m3-helper-ico { width: 40px; height: 40px; flex: 0 0 40px; color: var(--brand-primary); }
.m3-helper-head .bmx-h3 { margin: 0 0 4px; }
.m3-helper-head p { margin: 0; color: var(--gray-base); font-size: 15px; }
.m3-help-static { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--gray-darker); }
.m3-js .m3-help-static { display: none; }
.bm360:not(.m3-js) .m3-help-ui { display: none; }
.m3-hq { margin-top: 18px; }
.m3-hq[hidden] { display: none; }
.m3-hq-t { font-weight: 700; font-size: 15px; color: var(--gray-darker); margin: 0 0 8px; }
.m3-help-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; min-height: 24px; }
.m3-help-out { margin: 0; font-weight: 700; color: var(--brand-primary); }
.m3-help-out:empty { display: none; }
.m3-help-reset { min-height: 44px; border: 1px solid var(--gray-lighter-4); background: #fff; color: var(--gray-darker); border-radius: 6px; padding: 0 14px; font-weight: 600; cursor: pointer; }
.m3-help-reset[hidden] { display: none; }

/* plans */
.m3-group + .m3-group { margin-top: 56px; }
.m3-group-h { text-align: center; margin-bottom: 28px; }
.m3-group-h .bmx-h3 { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.m3-group-h .bmx-h3 svg { width: 26px; height: 26px; color: var(--brand-primary); }
.m3-group-h p { margin: 0; color: var(--gray-base); font-size: 15px; }
.m3-group-h a { font-weight: 600; white-space: nowrap; }
.bm360 .m3-plans { gap: 18px; align-items: stretch; }
.bm360 .m3-plan { flex: 0 1 262px; padding: 26px 22px 22px; transition: box-shadow .25s, border-color .25s, transform .25s; }
.bm360 .m3-plan .bmx-plan-name { margin-bottom: 4px; }
.m3-tag { font-size: 14px; color: var(--gray-base); margin: 0 0 14px; min-height: 21px; }
.bm360 .m3-price { margin-bottom: 14px; padding-bottom: 14px; }
.bm360 .m3-price .price-amount { font-family: var(--font-family-headings); font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--brand-primary); }
.bm360 .m3-price .price-cycle { font-size: 13px; color: var(--gray-base); }
.m3-feats { list-style: none; padding: 0; margin: 0; }
.m3-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--gray-darker); padding: 5px 0; }
.m3-feats strong { font-weight: 700; }
.m3-feats li.m3-off { color: #6b7380; text-decoration: line-through; }
.m3-x { color: #8a93a3 !important; }
.m3-eq { display: block; font-style: normal; font-size: 12px; color: var(--gray-base); margin-top: 1px; }
.m3-eq::before { content: "\2248\00a0"; }
.bm360 .m3-plan form { padding-top: 18px; }
.bm360 .m3-plan .btn { min-height: 46px; border-radius: 6px; }
.m3-recflag { display: none; }
.m3-plan.m3-rec { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(16, 98, 254, .25), 0 20px 50px rgba(16, 98, 254, .18); transform: translateY(-4px); }
.m3-plan.m3-rec .m3-recflag { display: block; background: var(--brand-primary); color: #fff; }
/* reassurance */
.m3-re { list-style: none; padding: 0; margin: 36px auto 0; max-width: 1100px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.m3-re li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: var(--gray-darker); }
.m3-re svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--brand-primary); }
.m3-re .m3-re-ask { background: #f2f7ff; border-color: #d6e4ff; }
.m3-re a { font-weight: 700; }
/* comparison */
.bm360 .m3-cmp { max-width: 1140px; }
.bm360 .m3-cmp table { font-size: 14px; }
.bm360 .m3-cmp th, .bm360 .m3-cmp td { padding: 11px 10px; }
.bm360 .m3-cmp tbody th { text-align: left; font-weight: 600; min-width: 200px; border-bottom: 1px solid var(--gray-lighter-4); background: #fff; }
.bm360 .m3-cmp td:nth-child(3) { background: transparent; font-weight: 400; color: var(--gray-darker); }
.bm360 .m3-cmp td { white-space: nowrap; }
.m3-cmp-grp th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-primary); }
.m3-cmp-grp .m3-cmp-srv { background: #eef4ff; }
.m3-cmp-key th, .m3-cmp-key td { background: #fafcff; }
.m3-cmp-price .price-amount { font-weight: 700; color: var(--gray-darker); }
.m3-cmp-price .price-cycle { font-size: 11px; color: var(--gray-base); }
.m3-no { color: #8a93a3; }
.bmx-cmp-wrap:focus { outline: 3px solid rgba(16, 98, 254, .35); }
.m3-gl { max-width: 1140px; margin: 48px auto 0; }
.m3-gl .bmx-h3 { text-align: center; }
.m3-gl dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.m3-gl dl div { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 14px 16px; }
.m3-gl dt { font-weight: 700; color: var(--gray-darker); margin-bottom: 4px; }
.m3-gl dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gray-base); }

@keyframes m3-live { 0% { box-shadow: 0 0 0 0 rgba(18, 184, 134, .5); } 70% { box-shadow: 0 0 0 8px rgba(18, 184, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 184, 134, 0); } }
@keyframes m3-grow { from { transform: scaleY(.15); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
@keyframes m3-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes m3-in { from { opacity: 0; margin-top: 8px; } to { opacity: 1; margin-top: 0; } }
@keyframes m3-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes m3-fade { from { opacity: 0; } to { opacity: 1; } }
.m3-fgrid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.bm360 .m3-cmp .price-amount { font-family: inherit; font-size: 15px !important; font-weight: 700; line-height: 1.3; color: var(--gray-darker) !important; }
.bm360 .m3-cmp .price-amount .price-prefix { font-size: inherit !important; vertical-align: baseline; }
.bm360 .m3-cmp .price-cycle { font-size: 11px !important; margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .bm360 *, .bm360 *::before, .bm360 *::after { animation: none !important; transition: none !important; }
    .m3-plan.m3-rec { transform: none; }
}
@media (max-width: 1199px) {
    .m3-fgrid, .m3-gl dl { grid-template-columns: repeat(2, 1fr); }
    .m3-up { grid-template-columns: repeat(2, 1fr); }
    .m3-re { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) { .m3-apps { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
    .m3-check-row { grid-template-columns: 1fr; }
    .m3-fgrid, .m3-gl dl, .m3-up, .m3-re { grid-template-columns: 1fr; }
    .bm360 .m3-plan { flex-basis: 100%; }
    .m3-demo-card, .m3-helper { padding: 20px 16px; }
    .m3-track { height: 170px; margin: 8px 4px 0; }
    .m3-bub { left: 0 !important; right: 0; width: auto; max-width: none; transform: none !important; font-size: 12px; }
    .m3-bub-up { top: 112px; }
    .m3-fgrid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
    .m3-replay { margin-left: 0; }
    .m3-geo-row { grid-template-columns: 96px 1fr 54px; }
    .m3-ubars { gap: 2px; }
}

/* ==========================================================================
   SSL certificates landing page — .bmssl (reuses .bmx components) 2026-11-07
   ========================================================================== */
.ssl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bmssl { --ssl-top: 0px; --ssl-ok: #0a7f58; --ssl-okbg: #e3f7ef; --ssl-bad: #b42f2f; --ssl-badbg: #fff1f1; }
.bmssl .ssl-mt { margin-top: 14px; }
.bmssl .ssl-small { font-size: 13px; color: var(--gray-base); margin: 18px 0 0; }
.bmssl .ssl-center { text-align: center; }
.bmssl .ssl-sec { scroll-margin-top: calc(var(--ssl-top) + 72px); }
.bmssl .ssl-card { scroll-margin-top: calc(var(--ssl-top) + 84px); }
.bmssl .ssl-ic { display: inline-flex; width: 44px; height: 44px; flex: none; border-radius: 12px; background: #eef4ff; color: var(--brand-primary); align-items: center; justify-content: center; }
.bmssl .ssl-ic svg { width: 24px; height: 24px; }
.ssl-gi { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: #eef4ff; color: var(--brand-primary); align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; }
.ssl-gi svg { width: 18px; height: 18px; }
.bmssl a:focus-visible, .bmssl button:focus-visible, .bmssl summary:focus-visible, .bmssl .ssl-card:focus-visible { outline: 3px solid #1062fe; outline-offset: 2px; }

/* hero browser */
.ssl-hero-win { max-width: 520px; margin: 0 auto; }
.bmssl .bmx-win-bar { align-items: center; }
.ssl-url { position: relative; flex: 1; margin-left: 10px; height: 30px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-lighter-4); font-size: 13px; overflow: hidden; }
.bmssl .bmx-win-bar .ssl-url > span { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: transparent; display: flex; align-items: center; gap: 6px; padding: 0 12px; white-space: nowrap; }
.ssl-url svg { width: 15px; height: 15px; flex: none; }
.ssl-url b { font-weight: 700; }
.ssl-url i { font-style: normal; color: var(--gray-darker); overflow: hidden; text-overflow: ellipsis; }
.ssl-url-a, .ssl-u-no { color: var(--ssl-bad); }
.ssl-url-b, .ssl-u-yes { color: var(--ssl-ok); }
.ssl-url-a b, .ssl-u-no b { padding-right: 6px; border-right: 1px solid #f0c9c9; }
.ssl-hero-body { padding: 22px; }
.ssl-form label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-base); margin: 0 0 6px; }
.ssl-field { position: relative; height: 42px; border: 1px solid var(--gray-lighter-4); border-radius: 8px; margin-bottom: 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; overflow: hidden; }
.ssl-field > span, .ssl-flow > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; white-space: nowrap; }
.ssl-f-a { color: var(--gray-darker); background: #fff7f7; }
.ssl-f-b { color: var(--ssl-ok); background: #f3fbf7; letter-spacing: .02em; }
.ssl-flow { position: relative; height: 34px; font-size: 13px; font-weight: 600; }
.ssl-flow svg { width: 16px; height: 16px; }
.ssl-flow-a { color: var(--ssl-bad); } .ssl-flow-b { color: var(--ssl-ok); }
.ssl-hero-cert { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--ssl-okbg); color: var(--ssl-ok); }
.ssl-hero-cert svg { width: 30px; height: 30px; flex: none; }
.ssl-hero-cert b { display: block; font-family: var(--font-family-headings); font-size: 16px; color: #075c40; }
.ssl-hero-cert span { font-size: 13px; color: #0b5e43; }
/* animation: insecure state, then secure state */
.ssl-url-a, .ssl-f-a, .ssl-flow-a { animation: sslA 7s ease-in-out infinite; }
.ssl-url-b, .ssl-f-b, .ssl-flow-b { animation: sslB 7s ease-in-out infinite; }
.ssl-hero-cert { animation: sslC 7s ease-in-out infinite; }
@keyframes sslA { 0%, 34% { opacity: 1; transform: none; } 42%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes sslB { 0%, 34% { opacity: 0; transform: translateY(6px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes sslC { 0%, 38% { opacity: .25; filter: grayscale(1); } 46%, 92% { opacity: 1; filter: none; } 100% { opacity: .25; filter: grayscale(1); } }

/* sticky in-page nav */
.ssl-nav-wrap { position: relative; z-index: 20; }
.ssl-nav { position: relative; z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--gray-lighter-4); -webkit-backdrop-filter: saturate(1.4) blur(6px); backdrop-filter: saturate(1.4) blur(6px); }
.ssl-nav.is-fixed { position: fixed; top: var(--ssl-top); left: 0; right: 0; box-shadow: 0 6px 20px rgba(16, 40, 90, .08); }
.ssl-nav-in { display: flex; align-items: center; gap: 8px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ssl-nav-in::-webkit-scrollbar { display: none; }
.ssl-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gray-lighter-4); background: #fff; color: var(--gray-darker); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.ssl-chip:hover, .ssl-chip:focus { color: #0a4fd1; border-color: #b9cff7; text-decoration: none; }
.ssl-chip.is-active { background: #1062fe; border-color: #1062fe; color: #fff; }
.ssl-chip-page { min-height: 44px; padding: 0 12px; font-weight: 700; color: #0a4fd1; background: #f3f7ff; border-color: #dce7fb; }
.ssl-nav-sep { flex: none; width: 1px; height: 24px; background: var(--gray-lighter-4); margin: 0 4px; }
.ssl-nav-pages { flex: none; font-size: 13px; color: var(--gray-base); white-space: nowrap; }
.ssl-cu { padding: 18px 0; background: #fffaf0; border-bottom: 1px solid #f6e2bf; }

/* what SSL does */
.ssl-what { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ssl-what-card { border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 26px; background: #fff; display: flex; flex-direction: column; }
.ssl-what-card h3 { font-family: var(--font-family-headings); font-weight: 700; font-size: 19px; margin: 16px 0 8px; color: var(--gray-darker); }
.ssl-what-card p { color: var(--gray-base); font-size: 15px; line-height: 1.6; margin: 0; }
.bmssl .ssl-foryou { margin-top: auto; padding-top: 14px; border-top: 1px dashed #d6e2f5; margin-top: 14px; color: var(--gray-darker); font-size: 14px; }
.ssl-foryou b { color: #0a4fd1; }

/* types + demo */
.ssl-types { background: #f7faff; }
.ssl-demo { max-width: 760px; margin: 0 auto 44px; }
.ssl-demo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ssl-demo-label { font-weight: 700; font-size: 15px; color: var(--gray-darker); }
.ssl-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--gray-lighter-4); }
.ssl-segb { min-height: 44px; min-width: 64px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--gray-darker); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.ssl-segb:hover { background: #eef4ff; }
.ssl-segb[aria-pressed="true"] { background: #1062fe; color: #fff; }
.ssl-demo-win .bmx-win-body { padding: 20px; }
.ssl-url-demo > span { transition: opacity .25s, transform .25s; }
.ssl-demo .ssl-u-no { opacity: 0; transform: translateY(6px); }
.ssl-demo[data-s="none"] .ssl-u-no { opacity: 1; transform: none; }
.ssl-demo[data-s="none"] .ssl-u-yes { opacity: 0; transform: translateY(-6px); }
.ssl-dpanel { border: 1px solid var(--gray-lighter-4); border-radius: 12px; overflow: hidden; }
.ssl-dpanel-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #fafcff; border-bottom: 1px solid var(--gray-lighter-4); font-size: 14px; color: var(--gray-darker); }
.ssl-dpanel-h svg { width: 18px; height: 18px; color: var(--brand-primary); }
.ssl-drow { display: grid; grid-template-columns: minmax(150px, 40%) 1fr; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--gray-lighter-4); font-size: 14px; transition: background .25s; }
.ssl-drow:last-child { border-bottom: 0; }
.ssl-dl { color: var(--gray-base); }
.ssl-dy, .ssl-dn { display: inline-flex; align-items: center; gap: 6px; }
.ssl-dy { color: #075c40; font-weight: 600; }
.ssl-dy .bmx-tick { color: var(--ssl-ok); margin-top: 0; }
.ssl-dn { color: #6b7280; font-style: italic; }
.ssl-dn-bad { color: var(--ssl-bad); font-style: normal; font-weight: 600; }
.ssl-dn-bad svg { width: 16px; height: 16px; }
.ssl-demo[data-s="none"] .ssl-row-conn { background: var(--ssl-badbg) !important; }
.ssl-cap { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--gray-darker); min-height: 48px; }
.ssl-cap > span { display: none; }
.ssl-demo-note { display: flex; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #eef4ff; font-size: 14px; line-height: 1.55; color: var(--gray-darker); }
.ssl-demo-note svg { width: 18px; height: 18px; flex: none; color: var(--brand-primary); margin-top: 2px; }
.ssl-demo[data-s="none"] .ssl-drow.ssl-on-none .ssl-dn, .ssl-demo[data-s="none"] .ssl-drow:not(.ssl-on-none) .ssl-dy { display: none; }
.ssl-demo[data-s="none"] .ssl-cap-none { display: inline; }
.ssl-demo[data-s="none"] .ssl-drow.ssl-on-none { background: #f3fbf7; }
.ssl-demo[data-s="dv"] .ssl-drow.ssl-on-dv .ssl-dn, .ssl-demo[data-s="dv"] .ssl-drow:not(.ssl-on-dv) .ssl-dy { display: none; }
.ssl-demo[data-s="dv"] .ssl-cap-dv { display: inline; }
.ssl-demo[data-s="dv"] .ssl-drow.ssl-on-dv { background: #f3fbf7; }
.ssl-demo[data-s="ov"] .ssl-drow.ssl-on-ov .ssl-dn, .ssl-demo[data-s="ov"] .ssl-drow:not(.ssl-on-ov) .ssl-dy { display: none; }
.ssl-demo[data-s="ov"] .ssl-cap-ov { display: inline; }
.ssl-demo[data-s="ov"] .ssl-drow.ssl-on-ov { background: #f3fbf7; }
.ssl-demo[data-s="ev"] .ssl-drow.ssl-on-ev .ssl-dn, .ssl-demo[data-s="ev"] .ssl-drow:not(.ssl-on-ev) .ssl-dy { display: none; }
.ssl-demo[data-s="ev"] .ssl-cap-ev { display: inline; }
.ssl-demo[data-s="ev"] .ssl-drow.ssl-on-ev { background: #f3fbf7; }
.ssl-tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ssl-tcard { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.ssl-tcard-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ssl-tcard-h h3 { font-family: var(--font-family-headings); font-weight: 800; font-size: 18px; line-height: 1.25; margin: 0 0 4px; color: var(--gray-darker); }
.ssl-like { font-size: 13px; color: #0a4fd1; font-weight: 600; }
.ssl-tcard dl { margin: 0 0 16px; }
.ssl-tcard dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-base); margin-top: 12px; }
.ssl-tcard dd { margin: 3px 0 0; font-size: 14px; line-height: 1.55; color: var(--gray-darker); }
.ssl-tcard-f { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gray-lighter-4); display: flex; flex-direction: column; gap: 8px; }
.ssl-tprice { font-size: 14px; color: var(--gray-base); }
.ssl-tprice strong { font-family: var(--font-family-headings); font-size: 20px; color: var(--gray-darker); }
.ssl-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: #0a4fd1; }
.ssl-more svg { width: 16px; height: 16px; }
.ssl-t-ev .ssl-ic { background: var(--ssl-okbg); color: var(--ssl-ok); }

/* wildcard */
.ssl-wc-root { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #1062fe, #009aff); color: #fff; font-family: var(--font-family-headings); font-size: 20px; }
.ssl-wc-root svg { width: 26px; height: 26px; }
.ssl-wc-subs { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
.ssl-wc-subs li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; border: 1px solid #cdeedd; background: #f3fbf7; border-radius: 10px; padding: 9px 10px; font-size: 13px; color: var(--gray-darker); }
.ssl-wc-subs svg { width: 16px; height: 16px; color: var(--ssl-ok); grid-row: 1 / 3; }
.ssl-wc-subs b { color: #075c40; }
.ssl-wc-subs em { font-style: normal; font-size: 12px; color: #4b5563; }
.ssl-wc-note { display: flex; gap: 8px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--gray-darker); }
.ssl-wc-note svg { width: 16px; height: 16px; flex: none; color: var(--brand-primary); margin-top: 2px; }

/* helper */
.ssl-helper { max-width: 980px; margin: 0 auto 56px; border-radius: 20px; padding: 28px; background: linear-gradient(160deg, #f2f7ff 0%, #ffffff 70%); border: 1px solid #d6e4ff; box-shadow: 0 16px 40px rgba(16, 40, 90, .07); }
.ssl-helper[hidden] { display: none; }
.ssl-helper-h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.ssl-helper-h > svg { width: 34px; height: 34px; flex: none; color: var(--brand-primary); }
.ssl-helper-h h2 { font-family: var(--font-family-headings); font-weight: 800; font-size: 26px; margin: 0 0 4px; color: var(--gray-darker); }
.ssl-helper-h p { margin: 0; font-size: 15px; color: var(--gray-base); }
.ssl-qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ssl-q > p { display: flex; gap: 8px; align-items: baseline; font-weight: 700; font-size: 15px; color: var(--gray-darker); margin: 0 0 10px; }
.ssl-q > p span { display: inline-flex; flex: none; width: 24px; height: 24px; border-radius: 7px; background: #1062fe; color: #fff; font-size: 13px; align-items: center; justify-content: center; }
.ssl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ssl-pill { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid #c9d8f2; background: #fff; color: var(--gray-darker); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.ssl-pill:hover { border-color: #1062fe; color: #0a4fd1; }
.ssl-pill[aria-pressed="true"] { background: #1062fe; border-color: #1062fe; color: #fff; }
.ssl-result { margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #b9cff7; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.ssl-result[hidden] { display: none; }
.ssl-result-t { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 420px; }
.ssl-result-t > svg { width: 24px; height: 24px; flex: none; color: #f2a516; margin-top: 2px; }
.ssl-result-t p { margin: 0; font-size: 15px; color: var(--gray-darker); }
.ssl-result-t p b { color: #0a4fd1; }
.ssl-result-t [data-ssl-recname] { font-weight: 800; font-family: var(--font-family-headings); }
.ssl-why { margin-top: 4px !important; font-size: 14px !important; color: var(--gray-base) !important; }
.ssl-result-a { display: flex; gap: 8px; flex-wrap: wrap; }
.ssl-result-a .btn { min-height: 44px; border-radius: 6px; }

/* filter + product groups */
.ssl-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -16px 0 32px; }
.ssl-filter[hidden] { display: none; }
.ssl-fb { min-height: 44px; min-width: 64px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--gray-lighter-4); background: #fff; color: var(--gray-darker); font-weight: 700; font-size: 14px; cursor: pointer; }
.ssl-fb:hover { border-color: #1062fe; color: #0a4fd1; }
.ssl-fb[aria-pressed="true"] { background: #141414; border-color: #141414; color: #fff; }
.ssl-grp { margin-bottom: 44px; }
.ssl-grp[hidden] { display: none; }
.ssl-grp-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #e6eefc; }
.ssl-grp-h h3 { font-family: var(--font-family-headings); font-weight: 800; font-size: 22px; margin: 0; color: var(--gray-darker); }
.ssl-grp-h a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: #0a4fd1; font-size: 14px; }
.ssl-grp-h a svg { width: 16px; height: 16px; }
.ssl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.ssl-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 26px; box-shadow: var(--box-shadow-sm); transition: box-shadow .25s, border-color .25s, transform .25s; }
.ssl-card:hover { border-color: #cfdcf5; box-shadow: 0 12px 32px rgba(16, 40, 90, .08); }
.ssl-card-featured { border-color: #b9cff7; }
.ssl-card.is-rec { border: 2px solid #1062fe; box-shadow: 0 0 0 6px rgba(16, 98, 254, .12), 0 18px 40px rgba(16, 98, 254, .18); }
.ssl-recb { position: absolute; top: -13px; right: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; background: #1062fe; color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 6px 16px rgba(16, 98, 254, .3); }
.ssl-recb[hidden] { display: none; }
.ssl-recb svg { width: 14px; height: 14px; }
.ssl-feat { position: absolute; top: -12px; left: 24px; background: #fff; color: #0a4fd1; border: 1px solid #b9cff7; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.ssl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ssl-brand { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-base); }
.ssl-lvl { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 6px; background: #eef4ff; color: #0a4fd1; }
.ssl-lvl-ev { background: var(--ssl-okbg); color: var(--ssl-ok); }
.ssl-lvl-wildcard { background: #f1edff; color: #4f3fc7; }
.ssl-card-name { font-family: var(--font-family-headings); font-weight: 800; font-size: 20px; line-height: 1.25; margin: 0 0 8px; color: var(--gray-darker); }
.ssl-card-desc { font-size: 14px; line-height: 1.55; color: var(--gray-base); margin: 0 0 14px; }
.ssl-facts { list-style: none; padding: 0; margin: 0 0 16px; }
.ssl-facts li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14px; line-height: 1.45; color: var(--gray-darker); border-bottom: 1px dashed #e5ebf5; }
.ssl-facts li:last-child { border-bottom: 0; }
.ssl-facts svg { width: 18px; height: 18px; flex: none; color: var(--brand-primary); margin-top: 1px; }
.ssl-facts small { display: block; font-size: 12px; color: var(--gray-base); }
.ssl-price { margin-top: auto; padding: 16px 0 4px; border-top: 1px solid var(--gray-lighter-4); }
.ssl-price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--gray-base); }
.ssl-price-main strong { font-family: var(--font-family-headings); font-size: 30px; font-weight: 800; line-height: 1.1; color: #0a4fd1; }
.ssl-price-month { font-size: 13px; color: var(--gray-darker); margin-top: 2px; }
.ssl-price-terms { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--gray-base); }
.ssl-price-terms b { color: var(--gray-darker); }
.ssl-card-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 14px; }
.ssl-card-actions .btn { min-height: 44px; border-radius: 6px; }
.ssl-reassure { list-style: none; padding: 0; margin: 8px auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ssl-reassure li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #f7faff; border: 1px solid #e3ecfb; font-size: 14px; line-height: 1.5; color: var(--gray-darker); }
.ssl-reassure svg { width: 20px; height: 20px; flex: none; color: var(--brand-primary); }
.ssl-reassure a { font-weight: 700; color: #0a4fd1; display: inline-flex; gap: 6px; align-items: center; }
.ssl-reassure a svg { width: 16px; height: 16px; }
.ssl-cmp { max-width: 980px; }
.ssl-cmp table { min-width: 640px; }
.ssl-cmp th[scope="row"] { text-align: left; font-weight: 600; background: #fff; padding: 13px 16px; border-bottom: 1px solid var(--gray-lighter-4); color: var(--gray-darker); }
.ssl-cmp td .bmx-tick { width: 18px; height: 18px; color: var(--ssl-ok); margin: 0; }
.bmssl .bmx-cmp td:nth-child(3) { background: transparent; font-weight: 400; color: var(--gray-darker); }
.ssl-no { color: #8a93a3; }
.ssl-cmp-price td { font-family: var(--font-family-headings); font-weight: 800 !important; color: #0a4fd1 !important; white-space: nowrap; }

/* how + multi-year + install */
.ssl-steps4 { grid-template-columns: repeat(4, 1fr) !important; }
.ssl-my { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 56px; }
.ssl-my-copy p { font-size: 16px; line-height: 1.65; color: var(--gray-base); margin: 0 0 14px; }
.ssl-tl-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 14px; }
.ssl-tl-seg { position: relative; display: flex; align-items: flex-end; height: 64px; border-radius: 10px; padding: 8px; background: linear-gradient(180deg, #eef4ff, #dce8ff); font-style: normal; overflow: hidden; }
.ssl-tl-seg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #1062fe, #009aff); animation: sslFill 8s linear infinite; }
.ssl-tl-s2::before { animation-delay: 2s; } .ssl-tl-s3::before { animation-delay: 4s; } .ssl-tl-s4::before { animation-delay: 6s; }
.ssl-tl-seg b { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: #0b2a6b; background: rgba(255,255,255,.88); border-radius: 5px; padding: 2px 6px; }
@keyframes sslFill { 0% { width: 0; } 25% { width: 100%; } 100% { width: 100%; } }
.ssl-tl-marks { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--gray-darker); }
.ssl-tl-marks span { display: inline-flex; align-items: center; gap: 6px; }
.ssl-tl-marks svg { width: 16px; height: 16px; color: var(--brand-primary); }
.ssl-tl-marks em { font-style: normal; font-weight: 400; color: var(--gray-base); margin-left: 4px; }
.ssl-tl-note { margin: 12px 0 0; font-size: 13px; color: var(--gray-base); }
.ssl-inst { display: flex; gap: 18px; align-items: flex-start; max-width: 980px; margin: 56px auto 0; padding: 26px; border-radius: 16px; border: 1px dashed #b9cff7; background: #f7faff; }
.ssl-inst h3 { font-family: var(--font-family-headings); font-weight: 800; font-size: 20px; margin: 0 0 6px; color: var(--gray-darker); }
.ssl-inst p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gray-base); }
.bmssl .ssl-inst-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.ssl-inst-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: #0a4fd1; }
.ssl-inst-links svg { width: 16px; height: 16px; }

/* brands */
.bmssl .ssl-brands-sec { padding-top: 40px; padding-bottom: 8px; }
.ssl-brands-t { text-align: center; font-size: 15px; color: var(--gray-base); margin: 0 0 16px; }
.ssl-brands { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; }
.ssl-brands li { font-family: var(--font-family-headings); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: #4b5563; }

@media (prefers-reduced-motion: reduce) {
  .bmssl *, .bmssl *::before { animation: none !important; transition: none !important; }
  .ssl-url-a, .ssl-f-a, .ssl-flow-a { opacity: 0; }
  .ssl-url-b, .ssl-f-b, .ssl-flow-b, .ssl-hero-cert { opacity: 1; transform: none; filter: none; }
  .ssl-tl-seg::before { width: 100%; }
}
@media (max-width: 1199px) {
  .ssl-tgrid { grid-template-columns: repeat(2, 1fr); }
  .ssl-cards { grid-template-columns: repeat(2, 1fr); }
  .ssl-steps4, .ssl-reassure { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 991px) {
  .ssl-what { grid-template-columns: 1fr 1fr; }
  .ssl-qs { grid-template-columns: 1fr; }
  .ssl-my { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
  .ssl-what, .ssl-tgrid, .ssl-cards, .ssl-steps4, .ssl-reassure { grid-template-columns: 1fr !important; }
  .ssl-helper { padding: 20px; }
  .ssl-helper-h h2 { font-size: 22px; }
  .ssl-drow { grid-template-columns: 1fr; gap: 2px; }
  .ssl-demo-top { flex-direction: column; align-items: stretch; }
  .ssl-seg { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .ssl-tl-track { grid-template-columns: 1fr 1fr; }
  .ssl-tl-seg { height: 48px; }
  .ssl-segb { min-width: 0; padding: 0 6px; }
  .ssl-card-actions { grid-template-columns: 1fr; }
  .ssl-inst { flex-direction: column; }
  .ssl-wc-subs { grid-template-columns: 1fr; }
  .ssl-nav-in { padding: 8px 0; }
  .ssl-url { font-size: 12px; }
}

/* ==========================================================================
   Homepage — .bmhp (reuses .bmx components) 2026-11-07
   ========================================================================== */
.bmhp .hp-hero { padding-top: 64px; }
.hp-search { margin-top: 6px; max-width: 600px; }
.hp-search-box { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--gray-lighter-3); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(16,40,90,.08); }
.hp-search-box:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(16,98,254,.12); }
.hp-search-ico { width: 20px; height: 20px; color: var(--gray-base); margin-left: 10px; flex: 0 0 20px; }
.hp-search-box .form-control { border: 0 !important; box-shadow: none !important; height: 48px; font-size: 16px; background: transparent; padding-left: 6px; min-width: 0; }
.hp-search-box .btn { height: 48px; padding: 0 22px; white-space: nowrap; }
.hp-transfer { background: #f1f5fb; border: 0; color: var(--gray-darker); }
.hp-tlds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hp-tld { font-size: 13px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 999px; padding: 5px 12px; color: var(--gray-base); }
.hp-tld b { color: var(--brand-primary); font-weight: 700; margin-right: 2px; }
.hp-tld-note { font-size: 12px; color: var(--gray-lighter); margin: 8px 0 0; }
.hp-mock { padding: 20px; }
.hp-mock-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--gray-lighter-4); border-radius: 12px; margin-bottom: 8px; animation: hpIn .5s ease both; animation-delay: calc(var(--d) * .15s + .2s); }
.hp-mock-ico { width: 38px; height: 38px; border-radius: 10px; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.hp-mock-ico svg { width: 20px; height: 20px; }
.hp-mock-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hp-mock-t b { font-size: 14px; color: var(--gray-darker); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-mock-t em { font-style: normal; font-size: 12px; color: #0a7f58; }
.hp-ok { width: 26px; height: 26px; border-radius: 50%; background: #e3f7ef; color: #0a7f58; display: inline-flex; align-items: center; justify-content: center; }
.hp-ok .bmx-tick { color: #0a7f58; margin: 0; }
@keyframes hpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hp-mock-row { animation: none; } }

/* sticky chips */
.hp-nav { position: relative; z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--gray-lighter-4); backdrop-filter: blur(6px); }
.hp-nav.is-pinned { position: fixed; left: 0; right: 0; box-shadow: 0 6px 20px rgba(16,40,90,.06); }
.hp-nav-in { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.hp-nav-in::-webkit-scrollbar { display: none; }
.hp-chip { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gray-lighter-4); font-size: 14px; font-weight: 600; color: var(--gray-darker); background: #fff; text-decoration: none !important; }
.hp-chip:hover, .hp-chip.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* goals */
.hp-goals { background: #f7faff; }
.hp-goal-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.hp-goal-btn { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid #d6e4ff; background: #fff; font-weight: 600; font-size: 15px; color: var(--gray-darker); cursor: pointer; transition: all .15s; }
.hp-goal-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.hp-goal-btn.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; box-shadow: 0 8px 20px rgba(16,98,254,.25); }
.hp-goal-btn:focus-visible { outline: 3px solid rgba(16,98,254,.35); outline-offset: 2px; }
.hp-goal-panel { margin-bottom: 26px; }
.hp-js .hp-goal-panel { display: none; }
.hp-js .hp-goal-panel.is-on { display: block; animation: hpIn .35s ease both; }
.hp-goal-intro { text-align: center; max-width: 720px; margin: 0 auto 20px; font-size: 17px; color: var(--gray-darker); }
.hp-sugg { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #e8f0ff; color: var(--brand-primary); border-radius: 6px; padding: 3px 8px; margin-right: 8px; vertical-align: 2px; }
.hp-more { text-align: center; margin: 0; font-weight: 600; }

/* service cards */
.hp-group { font-family: var(--font-family-headings); font-weight: 800; font-size: 20px; color: var(--gray-darker); margin: 34px 0 14px; }
.hp-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hp-svc-grid-sm { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }
.hp-svc { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 20px; color: var(--gray-darker); text-decoration: none !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
.hp-svc:hover { border-color: #b9cff8; box-shadow: 0 14px 32px rgba(16,40,90,.10); transform: translateY(-2px); color: var(--gray-darker); }
.hp-svc-ico { width: 44px; height: 44px; border-radius: 12px; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; }
.hp-svc-ico svg { width: 24px; height: 24px; }
.hp-svc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hp-svc-body b { font-family: var(--font-family-headings); font-size: 17px; font-weight: 800; }
.hp-svc-body span { font-size: 14px; line-height: 1.5; color: var(--gray-base); }
.hp-svc-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--gray-lighter-4); }
.hp-svc-foot em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--brand-primary); }
.hp-svc-foot i { width: 30px; height: 30px; border-radius: 50%; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
.hp-svc-foot i svg { width: 16px; height: 16px; }
.hp-svc:hover .hp-svc-foot i { transform: translateX(3px); background: var(--brand-primary); color: #fff; }
.hp-why { background: #f7faff; }
.bmhp .bmx-sec-grid { grid-template-columns: repeat(3, 1fr); }

/* news */
.hp-news-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.hp-news-head a { font-weight: 600; }
.hp-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hp-news-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 22px; background: #fff; color: var(--gray-darker); text-decoration: none !important; transition: box-shadow .2s, border-color .2s; }
.hp-news-card:hover { border-color: #b9cff8; box-shadow: 0 12px 28px rgba(16,40,90,.08); color: var(--gray-darker); }
.hp-news-date { font-size: 12px; font-weight: 600; color: var(--brand-primary); text-transform: uppercase; letter-spacing: .04em; }
.hp-news-card b { font-family: var(--font-family-headings); font-size: 17px; line-height: 1.35; flex: 1; }
.hp-news-more { font-size: 14px; font-weight: 600; color: var(--brand-primary); }

/* kb */
.hp-kb { padding-top: 0 !important; }
.hp-kb-card { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: center; border: 1px solid #d6e4ff; background: linear-gradient(135deg, #f2f7ff 0%, #fff 100%); border-radius: 16px; padding: 28px 32px; }
.hp-kb-card .bmx-kicker svg { width: 20px; height: 20px; vertical-align: -4px; }
.hp-kb-card .bmx-h3 { margin: 12px 0 0; }
.hp-kb-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp-kb-links a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--gray-lighter-4); font-weight: 600; font-size: 14px; color: var(--gray-darker); text-decoration: none !important; }
.hp-kb-links a:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

@media (max-width: 1199px) { .hp-svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .hp-svc-grid, .hp-news-grid, .bmhp .bmx-sec-grid { grid-template-columns: repeat(2, 1fr); } .hp-kb-card { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .hp-svc-grid, .hp-news-grid, .bmhp .bmx-sec-grid, .hp-kb-links { grid-template-columns: 1fr; }
  .hp-search-box { flex-wrap: wrap; }
  .hp-search-box .form-control { flex: 1 1 calc(100% - 40px); }
  .hp-search-box .btn { flex: 1 1 auto; }
  .hp-goal-btn { flex: 1 1 100%; }
}
.bmhp h1, .bmhp h2, .bmhp h3, .bmhp .bmx-h2, .bmhp .section-title { text-transform: none !important; }
.hp-tld { white-space: nowrap; }
.hp-search { max-width: 640px; }

/* Homepage payments & trust block v2 (2026-11-07) */
.bm-trust2 { padding-top: 72px; padding-bottom: 72px; }
.tr-card { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; background: linear-gradient(135deg, #f2f7ff 0%, #ffffff 70%); border: 1px solid #dbe7fb; border-radius: 20px; padding: 44px 48px; }
.tr-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-primary); background: #e8f0ff; border-radius: 6px; padding: 5px 10px; }
.tr-ico-s { width: 16px; height: 16px; }
.tr-title { font-family: var(--font-family-headings); font-weight: 800; font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; color: var(--gray-darker); margin: 16px 0 12px; text-transform: none !important; }
.tr-text { font-size: 17px; line-height: 1.6; color: var(--gray-base); margin: 0 0 18px; max-width: 560px; }
.tr-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tr-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--gray-darker); }
.tr-tick { width: 20px; height: 20px; flex: 0 0 20px; color: #0a7f58; background: #e3f7ef; border-radius: 50%; padding: 3px; }
.tr-pay { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 24px; box-shadow: 0 12px 32px rgba(16,40,90,.06); }
.tr-pay-label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-base); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.tr-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tr-chip { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 1px solid var(--gray-lighter-4); border-radius: 12px; background: #fff; padding: 8px 10px; }
.tr-mark { height: 22px; width: auto; max-width: 100%; }
.tr-chip-txt { grid-column: span 3; justify-content: flex-start; padding: 0 16px; }
.tr-chip-txt b { font-size: 14px; font-weight: 600; color: var(--gray-darker); }
.tr-chip .tr-ico { width: 22px; height: 22px; color: var(--brand-primary); }
.tr-bank-link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; }
.tr-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.tr-badge { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--gray-lighter-4); border-radius: 16px; padding: 18px; background: #fff; }
.tr-badge-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #eef4ff; color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; }
.tr-badge-ico .tr-ico { width: 24px; height: 24px; }
.tr-badge b { display: block; font-family: var(--font-family-headings); font-weight: 800; font-size: 15px; color: var(--gray-darker); margin-bottom: 4px; line-height: 1.3; }
.tr-badge span { font-size: 13px; line-height: 1.5; color: var(--gray-base); }
@media (max-width: 1199px) { .tr-badges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) { .tr-card { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; } }
@media (max-width: 575px) { .tr-badges { grid-template-columns: 1fr; } .tr-title { font-size: 26px; } .tr-card { padding: 26px 20px; } .tr-pay-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Blue Mint footer (bmft) ===== */
.bm-ft{background:#f4f8ff;border-top:1px solid #e3ecfb;padding:56px 0 24px;color:#3d4a5f;font-family:Inter,system-ui,sans-serif;font-size:15px}
.bm-ft a{color:inherit;text-decoration:none}
.bm-ft svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bm-ft .ft-help{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;background:linear-gradient(135deg,#1062fe 0%,#009aff 100%);border-radius:10px;padding:36px 40px;color:#fff;box-shadow:0 18px 40px -22px rgba(16,98,254,.55)}
.bm-ft .ft-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:5px 10px;border-radius:4px}
.bm-ft .ft-help-t{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:26px;line-height:1.25;margin:12px 0 18px;color:#fff;text-transform:none}
.bm-ft .ft-search{position:relative;display:flex;background:#fff;border-radius:6px;padding:5px;box-shadow:0 6px 18px -8px rgba(0,0,0,.25)}
.bm-ft .ft-search-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#7b8aa3;display:flex}
.bm-ft .ft-search input{flex:1;min-width:0;border:0;outline:0;padding:11px 12px 11px 42px;font-size:15px;color:#141414;background:transparent}
.bm-ft .ft-search button{border:0;background:#141414;color:#fff;font-weight:600;padding:0 20px;border-radius:4px;cursor:pointer}
.bm-ft .ft-search button:hover{background:#0b46c0}
.bm-ft .ft-search:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.bm-ft .ft-acts{display:flex;flex-direction:column;gap:10px}
.bm-ft .ft-act{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:13px 16px;color:#fff !important;transition:background .15s,transform .15s}
.bm-ft .ft-act:hover{background:rgba(255,255,255,.22);transform:translateX(3px)}
.bm-ft .ft-act-ico{flex:none;width:38px;height:38px;border-radius:6px;background:#fff;color:#1062fe;display:flex;align-items:center;justify-content:center}
.bm-ft .ft-act strong{display:block;font-weight:700;font-size:15px}
.bm-ft .ft-act small{display:block;font-size:13px;opacity:.85}
.bm-ft .ft-act-go{margin-left:auto;display:flex;opacity:.8}
.bm-ft .ft-main{display:grid;grid-template-columns:1fr 2.6fr;gap:48px;padding:48px 0 36px}
.bm-ft .ft-logo img{height:36px;width:auto}
.bm-ft .ft-brand p{margin:14px 0 0;line-height:1.6;max-width:300px}
.bm-ft .ft-tag{font-family:Manrope,Inter,sans-serif;font-weight:700;color:#1062fe;margin-top:8px !important}
.bm-ft .ft-social{display:flex;gap:8px;list-style:none;padding:0;margin:18px 0 0}
.bm-ft .ft-social a{width:38px;height:38px;border-radius:6px;background:#fff;border:1px solid #dfe8f7;display:flex;align-items:center;justify-content:center;color:#1062fe;transition:all .15s}
.bm-ft .ft-social a:hover{background:#1062fe;color:#fff;border-color:#1062fe}
.bm-ft .ft-site{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;color:#1062fe !important}
.bm-ft .ft-site svg{width:16px;height:16px}
.bm-ft .ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bm-ft .ft-col summary{list-style:none;display:flex;align-items:center;gap:10px;font-family:Manrope,Inter,sans-serif;font-weight:800;color:#141414;font-size:15px;cursor:default;margin-bottom:14px}
.bm-ft .ft-col summary::-webkit-details-marker{display:none}
.bm-ft .ft-ico{width:32px;height:32px;border-radius:6px;background:#e6efff;color:#1062fe;display:flex;align-items:center;justify-content:center;flex:none}
.bm-ft .ft-ico svg{width:17px;height:17px}
.bm-ft .ft-car{display:none;margin-left:auto;transition:transform .2s}
.bm-ft .ft-col ul{list-style:none;padding:0;margin:0}
.bm-ft .ft-col li{margin:0 0 9px}
.bm-ft .ft-col li a{display:inline-block;padding:2px 0;color:#3d4a5f;transition:color .15s,transform .15s}
.bm-ft .ft-col li a:hover{color:#1062fe;transform:translateX(2px)}
.bm-ft .ft-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;border-top:1px solid #e3ecfb;padding-top:22px;font-size:13px;color:#66748b}
.bm-ft .ft-copy{margin:0;flex:1 1 320px}
.bm-ft .ft-legal{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0}
.bm-ft .ft-legal a:hover{color:#1062fe}
.bm-ft .ft-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.bm-ft .ft-lang{display:flex;background:#fff;border:1px solid #dfe8f7;border-radius:6px;padding:3px}
.bm-ft .ft-lang a{padding:5px 11px;border-radius:4px;font-weight:700;font-size:12px;color:#66748b}
.bm-ft .ft-lang a[aria-current]{background:#1062fe;color:#fff}
.bm-ft .ft-top{width:36px;height:36px;border-radius:6px;background:#141414;color:#fff !important;display:flex;align-items:center;justify-content:center}
.bm-ft .ft-top:hover{background:#1062fe}
.bm-ft a:focus-visible,.bm-ft summary:focus-visible,.bm-ft button:focus-visible{outline:2px solid #1062fe;outline-offset:2px}
.bm-ft .ft-help a:focus-visible,.bm-ft .ft-help button:focus-visible{outline-color:#fff}
@media (max-width:991px){.bm-ft .ft-help{grid-template-columns:1fr;padding:28px}.bm-ft .ft-main{grid-template-columns:1fr;gap:32px}.bm-ft .ft-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
 .bm-ft{padding-top:32px}
 .bm-ft .ft-help{padding:22px 18px}.bm-ft .ft-help-t{font-size:21px}
 .bm-ft .ft-search button{padding:0 14px}
 .bm-ft .ft-cols{grid-template-columns:1fr;gap:0;border-top:1px solid #e3ecfb}
 .bm-ft .ft-col{border-bottom:1px solid #e3ecfb}
 .bm-ft .ft-col summary{margin:0;padding:14px 0;cursor:pointer}
 .bm-ft .ft-car{display:block}.bm-ft .ft-col[open] .ft-car{transform:rotate(180deg)}
 .bm-ft .ft-col ul{padding:0 0 12px 42px}
 .bm-ft .ft-bottom{flex-direction:column;align-items:flex-start}.bm-ft .ft-tools{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.bm-ft *{transition:none !important}}
.bm-ft .ft-help>*,.bm-ft .ft-main>*,.bm-ft .ft-act>span:nth-child(2){min-width:0}
.bm-ft .ft-search input{width:100%}
@media (max-width:991px){.bm-ft .ft-help{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.bm-ft .ft-copy{flex:none}}

/* ===== Blue Mint header nav (bmhd) ===== */
.bm-nav{position:sticky;top:0;z-index:1030;font-family:Inter,system-ui,sans-serif}
.bm-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bm-nav a{text-decoration:none !important}
.bmn-admin{background:#141414;font-size:13px}.bmn-admin a{color:#fff !important;display:inline-flex;gap:6px;align-items:center;padding:6px 0}.bmn-admin svg{width:16px;height:16px}
.bmn-bar{background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid #e6edf8;transition:box-shadow .2s}
.bmn-bar.is-scrolled{box-shadow:0 8px 24px -14px rgba(16,40,90,.25)}
.bmn-in{display:flex;align-items:center;gap:20px;height:72px}
.bmn-logo{flex:none;display:flex;align-items:center}.bmn-logo img{height:32px;width:auto}
.bmn-main{flex:1;display:flex;justify-content:center}
.bmn-top{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.bmn-top>li{position:relative}
.bmn-trg{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;background:none;border-radius:6px;font:600 15px/1 Inter,system-ui,sans-serif;color:#141414 !important;cursor:pointer;transition:background .15s,color .15s}
.bmn-trg:hover,.bmn-dd.is-open>.bmn-trg{background:#eef4ff;color:#1062fe !important}
.bmn-car{width:16px !important;height:16px !important;transition:transform .2s}
.bmn-dd.is-open .bmn-car{transform:rotate(180deg)}
/* panels */
.bmn-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px);background:#fff;border:1px solid #e3ebf8;border-radius:10px;box-shadow:0 24px 60px -20px rgba(16,40,90,.28);padding:22px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility 0s .16s;z-index:5}
.bmn-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.bmn-dd.is-open>.bmn-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .16s,transform .16s}
.bmn-top>li.bmn-mega{position:static}.bmn-in{position:relative}
.bmn-panel-wide{width:min(1100px,calc(100vw - 48px));top:calc(100% - 4px)}
.bmn-panel-mid{width:460px}.bmn-panel-sm{width:340px}
.bmn-panel ul{list-style:none;margin:0;padding:0}
.bmn-panel-grid{display:grid;grid-template-columns:1fr 1fr 1fr 230px;gap:18px}
.bmn-grp-t{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7b8aa3;margin:0 0 8px 10px}
.bmn-it{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:8px;color:#141414 !important;transition:background .12s}
.bmn-it:hover,.bmn-it:focus-visible,.bmn-it.is-current{background:#f2f7ff}
.bmn-it-ico{width:36px;height:36px;border-radius:7px;background:#eaf1ff;color:#1062fe;display:flex;align-items:center;justify-content:center;flex:none;transition:background .12s,color .12s}
.bmn-it:hover .bmn-it-ico{background:#1062fe;color:#fff}
.bmn-it-ico svg{width:18px;height:18px}
.bmn-it-tx strong{display:block;font-weight:700;font-size:14.5px;line-height:1.3}
.bmn-it-tx small{display:block;font-size:13px;line-height:1.4;color:#66748b;margin-top:2px}
.bmn-help{background:linear-gradient(160deg,#1062fe,#009aff);border-radius:9px;padding:20px;color:#fff;display:flex;flex-direction:column}
.bmn-help-ico{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.bmn-help-t{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:17px;line-height:1.3;margin:14px 0 6px}
.bmn-help p{font-size:13.5px;line-height:1.5;margin:0;opacity:.92}
.bmn-help-go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:6px;color:#fff !important;font-weight:700}
.bmn-help-go:hover{gap:10px}.bmn-help-go svg{width:16px;height:16px}
.bmn-panel-t{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:16px;color:#141414;margin:0 0 10px}
.bmn-dsearch{position:relative;display:flex;border:1px solid #d6e2f6;border-radius:7px;padding:4px;background:#fff;margin-bottom:12px}
.bmn-dsearch:focus-within{border-color:#1062fe;box-shadow:0 0 0 3px rgba(16,98,254,.15)}
.bmn-dsearch-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#7b8aa3;display:flex}.bmn-dsearch-ico svg{width:18px;height:18px}
.bmn-dsearch input{flex:1;min-width:0;width:100%;border:0;outline:0;padding:9px 10px 9px 36px;font-size:15px;background:transparent;color:#141414}
.bmn-dsearch button{border:0;border-radius:5px;background:#1062fe;color:#fff;font-weight:600;padding:0 16px;cursor:pointer}
.bmn-dsearch button:hover{background:#0b4fd4}
.bmn-list2{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.bmn-foot-link{display:flex;align-items:center;gap:6px;margin-top:10px;padding:12px 10px 2px;border-top:1px solid #eef2f8;font-weight:600;color:#1062fe !important;font-size:14px}
.bmn-foot-link svg{width:16px;height:16px}
.bmn-link:hover{background:#eef4ff}
/* actions */
.bmn-actions{display:flex;align-items:center;gap:10px;flex:none}
.bmn-lang{display:flex;border:1px solid #e0e8f5;border-radius:6px;padding:2px;background:#fff}
.bmn-lang a{padding:5px 9px;border-radius:4px;font-weight:700;font-size:12px;color:#66748b !important}
.bmn-lang a[aria-current]{background:#eaf1ff;color:#1062fe !important}
.bmn-cart{position:relative;width:42px;height:42px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#141414 !important}
.bmn-cart:hover{background:#eef4ff;color:#1062fe !important}
.bmn-badge{position:absolute;top:3px;right:2px;min-width:18px;height:18px;border-radius:9px;background:#1062fe;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
.bmn-login{font-weight:600;font-size:15px;color:#141414 !important;padding:10px 12px;border-radius:6px}
.bmn-login:hover{background:#eef4ff;color:#1062fe !important}
.bmn-cta{font-weight:700;font-size:15px;color:#fff !important;background:#1062fe;padding:11px 18px;border-radius:6px;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(16,98,254,.7);transition:background .15s}
.bmn-cta:hover{background:#0b4fd4}
.bmn-acct{position:relative}
.bmn-acct-btn{display:flex;align-items:center;gap:10px;border:1px solid #e0e8f5;background:#fff;border-radius:7px;padding:5px 10px 5px 5px;cursor:pointer;color:#141414}
.bmn-acct-btn:hover,.bmn-acct.is-open .bmn-acct-btn{border-color:#1062fe}
.bmn-av{width:32px;height:32px;border-radius:6px;background:#1062fe;color:#fff;display:flex;align-items:center;justify-content:center}.bmn-av svg{width:18px;height:18px}
.bmn-acct-tx{display:flex;flex-direction:column;text-align:left;font-weight:700;font-size:14px;line-height:1.15;max-width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bmn-acct-tx small{font-weight:500;font-size:11.5px;color:#66748b}
.bmn-panel-acct{width:250px;left:auto;right:0;transform:translateY(6px);padding:8px}
.bmn-acct.is-open>.bmn-panel-acct{transform:none}
.bmn-acct-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;color:#141414 !important;font-weight:500;font-size:14.5px}
.bmn-acct-list a svg{width:18px;height:18px;color:#1062fe}
.bmn-acct-list a:hover{background:#f2f7ff}
.bmn-acct-list .bmn-sep{border-top:1px solid #eef2f8;margin-top:6px;padding-top:6px}
.bmn-burger{display:none;width:44px;height:44px;border:1px solid #e0e8f5;border-radius:6px;background:#fff;align-items:center;justify-content:center;color:#141414;cursor:pointer}
/* drawer */
.bmn-scrim{position:fixed;inset:0;background:rgba(10,24,52,.42);opacity:0;transition:opacity .2s;z-index:1040}
.bmn-scrim.is-in{opacity:1}
.bmn-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;z-index:1050;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;box-shadow:-20px 0 50px -20px rgba(16,40,90,.3)}
.bmn-drawer.is-in{transform:none}
.bmn-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #eef2f8}
.bmn-drawer-head img{height:28px;width:auto}
.bmn-close{width:42px;height:42px;border:0;border-radius:6px;background:#f2f6fc;display:flex;align-items:center;justify-content:center;color:#141414;cursor:pointer}
.bmn-drawer-body{flex:1;overflow-y:auto;padding:16px 18px;-webkit-overflow-scrolling:touch}
.bmn-drawer-body ul{list-style:none;margin:0;padding:0}
.bmn-acc{border-bottom:1px solid #eef2f8}
.bmn-acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 2px;font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:17px;color:#141414;cursor:pointer}
.bmn-acc summary::-webkit-details-marker{display:none}
.bmn-acc[open] .bmn-car{transform:rotate(180deg)}
.bmn-acc>ul,.bmn-acc>.bmn-grp{padding-bottom:10px}
.bmn-acc .bmn-grp-t{margin:6px 0 2px 10px}
.bmn-acc-link{display:block;padding:16px 2px;font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:17px;color:#141414 !important;border-bottom:1px solid #eef2f8}
.bmn-drawer-foot{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid #eef2f8;flex-wrap:wrap}
.bmn-drawer-foot .bmn-cta{flex:1;text-align:center}
html.bmn-lock,html.bmn-lock body{overflow:hidden}
.bm-nav a:focus-visible,.bm-nav button:focus-visible,.bm-nav summary:focus-visible{outline:2px solid #1062fe;outline-offset:2px}
@media (max-width:1399px){.bmn-trg{padding:0 11px}.bmn-panel-grid{grid-template-columns:1fr 1fr 1fr 200px}}
@media (max-width:1199px){
 .bmn-main,.bmn-actions>.bmn-lang,.bmn-actions>.bmn-login,.bmn-actions>.bmn-acct{display:none}
 .bmn-in{justify-content:space-between}.bmn-actions{margin-left:auto}
 .bmn-burger{display:flex}
}
@media (max-width:575px){.bmn-in{height:64px;gap:10px}.bmn-logo img{height:28px}.bmn-actions>.bmn-cta{display:none}}
@media (prefers-reduced-motion:reduce){.bm-nav *{transition:none !important}}
/* bmhd fixes: pinned bar, search padding, help title */
.app-nav.bm-nav{position:relative !important;height:72px;z-index:1030;background:transparent}
.bm-nav .bmn-bar{position:fixed;top:0;left:0;right:0;z-index:1030}
.bm-nav .bmn-admin{position:fixed;top:0;left:0;right:0;height:32px;z-index:1031}
.app-nav.bm-nav:has(.bmn-admin){height:104px}.bm-nav:has(.bmn-admin) .bmn-bar{top:32px}
.bm-nav .bmn-dsearch input{padding:9px 10px 9px 38px !important;height:auto !important;border:0 !important;box-shadow:none !important;background:transparent !important;font-size:15px !important}
.bm-nav .bmn-help .bmn-help-t{font-size:18px;line-height:1.3;opacity:1;margin:14px 0 6px}
@media (max-width:575px){.app-nav.bm-nav{height:64px}.app-nav.bm-nav:has(.bmn-admin){height:96px}}
/* floating back-to-top */
.bm-totop{position:fixed;right:24px;bottom:24px;z-index:1020;width:48px;height:48px;border:0;border-radius:8px;background:#1062fe;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px -10px rgba(16,98,254,.75);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility 0s .2s,background .15s}
.bm-totop.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s,background .15s}
.bm-totop:hover{background:#0b4fd4;transform:translateY(-2px)}
.bm-totop:focus-visible{outline:2px solid #141414;outline-offset:3px}
.bm-totop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:767px){.bm-totop{right:16px;bottom:16px;width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.bm-totop{transition:none}}
.bm-totop{right:auto;left:24px}
@media (max-width:767px){.bm-totop{right:auto;left:16px}}
/* logo full-icon sizing */
.bm-nav .bmn-logo img{height:38px;width:auto}.bm-nav .bmn-drawer-head img{height:34px;width:auto}.bm-ft .ft-logo img{height:42px;width:auto}
@media (max-width:575px){.bm-nav .bmn-logo img{height:34px}}
/* logo back to compact size */
.bm-nav .bmn-logo img{height:32px}.bm-nav .bmn-drawer-head img{height:28px}.bm-ft .ft-logo img{height:36px}
@media (max-width:575px){.bm-nav .bmn-logo img{height:28px}}
.hp-tld-per{font-size:12px;color:#66748b;margin-left:3px;font-weight:500}

/* ===== Blue Mint contact page (bmct) ===== */
.bmct{--ct-b:#1062fe;--ct-b2:#009aff;--ct-ink:#141414;--ct-mut:#5b6472;--ct-ln:#e4e9f2;--ct-bg:#f5f8fd;max-width:1160px;margin:0 auto;padding:40px 20px 72px;color:var(--ct-ink);font-family:Inter,system-ui,sans-serif}
.bmct svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bmct .ct-hero{text-align:center;max-width:680px;margin:0 auto 40px}
.bmct .ct-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ct-b);background:#eaf2ff;border-radius:999px;padding:6px 12px;margin-bottom:16px}
.bmct .ct-h1{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,46px);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;color:var(--ct-ink)}
.bmct .ct-lead{font-size:17px;line-height:1.6;color:var(--ct-mut);margin:0}
.bmct .ct-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px;align-items:start}
.bmct .ct-side-t{font-family:Manrope,Inter,sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ct-mut);margin:0 0 12px}
.bmct .ct-paths{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px}
.bmct .ct-path{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--ct-ln);border-radius:12px;background:#fff;color:var(--ct-ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.bmct .ct-path:hover,.bmct .ct-path:focus-visible{border-color:#b9d1ff;box-shadow:0 6px 20px rgba(16,98,254,.08);transform:translateY(-1px);color:var(--ct-ink);text-decoration:none}
.bmct .ct-path-ico,.bmct .ct-line-ico{width:40px;height:40px;border-radius:10px;background:#eaf2ff;color:var(--ct-b);display:flex;align-items:center;justify-content:center;flex:none}
.bmct .ct-path-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bmct .ct-path-tx strong{font-family:Manrope,Inter,sans-serif;font-weight:700;font-size:15px}
.bmct .ct-path-tx small{font-size:13px;line-height:1.45;color:var(--ct-mut)}
.bmct .ct-path-go{color:#9aa6b8;transition:color .15s,transform .15s}
.bmct .ct-path:hover .ct-path-go{color:var(--ct-b);transform:translateX(3px)}
.bmct .ct-direct{background:var(--ct-bg);border:1px solid var(--ct-ln);border-radius:12px;padding:18px}
.bmct .ct-line{display:flex;align-items:center;gap:12px;padding:8px 0;color:var(--ct-ink);text-decoration:none}
.bmct a.ct-line:hover{color:var(--ct-b);text-decoration:none}
.bmct .ct-line+.ct-line{border-top:1px solid var(--ct-ln)}
.bmct .ct-line-ico{background:#fff;border:1px solid var(--ct-ln)}
.bmct .ct-line small{display:block;font-size:12px;color:var(--ct-mut)}
.bmct .ct-line strong{font-weight:600;font-size:15px;word-break:break-word}
.bmct .ct-card{background:#fff;border:1px solid var(--ct-ln);border-radius:16px;padding:32px;box-shadow:0 10px 40px rgba(20,20,20,.05);scroll-margin-top:96px}
.bmct .ct-h2{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.01em;margin:0 0 6px;color:var(--ct-ink)}
.bmct .ct-form-lead{color:var(--ct-mut);margin:0 0 22px;font-size:15px}
.bmct .ct-form{display:grid;gap:18px}
.bmct .ct-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.bmct .ct-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.bmct .ct-label{font-size:14px;font-weight:600;color:var(--ct-ink);margin:0}
.bmct .ct-form .form-control{height:auto;min-height:46px;padding:11px 14px;border:1px solid #d5dce8;border-radius:10px;font-size:15px;background:#fff;color:var(--ct-ink);box-shadow:none;transition:border-color .15s,box-shadow .15s}
.bmct .ct-form textarea.form-control{min-height:150px;resize:vertical;line-height:1.55}
.bmct .ct-form .form-control::placeholder{color:#9aa6b8}
.bmct .ct-form .form-control:focus{border-color:var(--ct-b);box-shadow:0 0 0 3px rgba(16,98,254,.15);outline:0}
.bmct .ct-hint{font-size:13px;color:var(--ct-mut)}
.bmct .ct-topics{display:flex;flex-direction:column;gap:8px}
.bmct .ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.bmct .ct-chip{border:1px solid #d5dce8;background:#fff;color:var(--ct-ink);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit}
.bmct .ct-chip:hover{border-color:var(--ct-b);color:var(--ct-b)}
.bmct .ct-chip.is-on{background:var(--ct-b);border-color:var(--ct-b);color:#fff}
.bmct .ct-chip:focus-visible,.bmct .ct-btn:focus-visible,.bmct .ct-path:focus-visible{outline:2px solid var(--ct-b);outline-offset:2px}
.bmct .ct-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.bmct .ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ct-ln);background:#fff;color:var(--ct-ink);border-radius:10px;padding:11px 18px;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;transition:all .15s;font-family:inherit}
.bmct .ct-btn:hover{border-color:var(--ct-b);color:var(--ct-b);text-decoration:none}
.bmct .ct-btn-pri{background:linear-gradient(135deg,var(--ct-b),var(--ct-b2));border-color:transparent;color:#fff}
.bmct .ct-btn-pri:hover{color:#fff;box-shadow:0 8px 22px rgba(16,98,254,.28);transform:translateY(-1px)}
.bmct .ct-btn-lg{padding:14px 24px;font-size:16px}
.bmct .ct-privacy{font-size:13px;color:var(--ct-mut);margin:0;flex:1;min-width:200px}
.bmct .ct-privacy a{color:var(--ct-b)}
.bmct .ct-sent{text-align:center;padding:12px 0}
.bmct .ct-sent-ico{width:60px;height:60px;border-radius:50%;background:#eaf2ff;color:var(--ct-b);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.bmct .ct-sent-ico svg{width:28px;height:28px;stroke-width:2.4}
.bmct .ct-sent p{color:var(--ct-mut);margin:0 0 14px}
.bmct .ct-sent-list{list-style:none;padding:0;margin:0 auto 22px;max-width:420px;text-align:left;display:grid;gap:8px;font-size:14px;color:var(--ct-mut)}
.bmct .ct-sent-list li{padding-left:22px;position:relative}
.bmct .ct-sent-list li:before{content:"";position:absolute;left:4px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--ct-b2)}
.bmct .ct-sent-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bmct .alert{border-radius:10px}
@media (max-width:900px){.bmct .ct-grid{grid-template-columns:minmax(0,1fr)}.bmct .ct-card{order:-1}}
@media (max-width:600px){.bmct{padding:28px 16px 56px}.bmct .ct-row{grid-template-columns:minmax(0,1fr)}.bmct .ct-card{padding:22px 18px;border-radius:14px}.bmct .ct-lead{font-size:16px}.bmct .ct-btn-lg{width:100%}}
@media (prefers-reduced-motion:reduce){.bmct *{transition:none!important}}

/* Blue Mint: Lagom's mobile top padding duplicated our header placeholder */
@media (max-width:1199px){body.lagom.lagom-layout-top{padding-top:0!important}}
@media (max-width:991px){body.bmco-has-bar .grecaptcha-badge{bottom:92px!important}}

/* ===== Blue Mint hosting store page (bmsh) ===== */
body:has(#bmsh) .main-header{display:none}
body:has(#bmsh) .main-body{padding-top:0}
.bmsh{--b:#1062fe;--b2:#009aff;--ink:#141414;--mut:#5b6472;--ln:#e4e9f2;--bg:#f5f8fd;color:var(--ink);font-family:Inter,system-ui,sans-serif;padding:40px 0 72px}
.bmsh svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bmsh [hidden]{display:none!important}
.sh-hero{text-align:center;max-width:820px;margin:0 auto 32px}
.sh-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--b);background:#eaf2ff;border-radius:999px;padding:6px 12px;margin-bottom:16px}
.sh-h1{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
.sh-lead{font-size:17px;line-height:1.6;color:var(--mut);margin:0 auto 22px;max-width:700px}
.sh-promise{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sh-promise a,.sh-promise span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--ln);border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.sh-promise a:hover{border-color:#b9d1ff;color:var(--b);text-decoration:none}
.sh-promise svg{width:18px;height:18px;color:var(--b)}
.sh-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 32px;margin:0 0 28px}
.sh-ctl{display:flex;flex-direction:column;align-items:center;gap:8px}
.sh-ctl-l{font-size:13px;font-weight:600;color:var(--mut)}
.sh-seg{display:inline-flex;padding:4px;background:#eef2f8;border-radius:12px;gap:2px}
.sh-seg button{border:0;background:transparent;border-radius:9px;padding:9px 16px;font:600 14px/1.2 Inter,system-ui,sans-serif;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sh-seg button small{font-size:11px;font-weight:700;color:#0a8a4a;background:#e3f7ec;border-radius:999px;padding:2px 6px}
.sh-seg button:hover{background:#fff}
.sh-seg button[aria-checked="true"],.sh-seg button[aria-pressed="true"]{background:#fff;color:var(--b);box-shadow:0 1px 4px rgba(16,40,90,.12)}
.sh-seg button:focus-visible,.sh-more:focus-visible,.sh-cta:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.sh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.sh-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:26px 22px 22px;transition:border-color .2s,box-shadow .2s,transform .2s}
.sh-card:hover{border-color:#c9dbff;box-shadow:0 14px 40px -18px rgba(16,40,90,.25)}
.sh-card.is-featured{border:2px solid var(--b);box-shadow:0 18px 48px -20px rgba(16,98,254,.4)}
.sh-card.is-picked{border:2px solid #0a8a4a;box-shadow:0 18px 48px -20px rgba(10,138,74,.35)}
.sh-flag,.sh-picked{position:absolute;top:-12px;left:22px;font-size:12px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:4px 10px;color:#fff;background:linear-gradient(135deg,var(--b),var(--b2))}
.sh-picked{display:none;background:#0a8a4a;left:auto;right:22px}
.sh-card.is-picked .sh-picked{display:block}
.sh-name{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:19px;line-height:1.25;margin:6px 0 6px;color:var(--ink)}
.sh-for{font-size:14px;color:var(--mut);line-height:1.45;margin:0 0 18px;min-height:41px}
.sh-price-wrap{min-height:112px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--ln)}
.sh-amt{display:flex;align-items:flex-end;gap:6px}
.sh-amt strong{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:38px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.sh-amt span{font-size:12px;line-height:1.25;color:var(--mut);padding-bottom:3px}
.sh-vat{font-size:13px;color:var(--mut);margin:8px 0 2px}
.sh-billed{font-size:13px;color:var(--ink);margin:0;font-weight:500}
.sh-save{display:inline-block;font-size:11.5px;font-weight:700;color:#0a8a4a;background:#e3f7ec;border-radius:999px;padding:2px 7px;margin-left:2px;white-space:nowrap}
.sh-key{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.sh-key li{font-size:15px;color:var(--ink)}
.sh-key strong{font-family:Manrope,Inter,sans-serif;font-weight:800;color:var(--b);margin-right:3px}
.sh-extra{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:7px;flex:1;align-content:start}
.sh-extra li{position:relative;padding-left:22px;font-size:13.5px;color:var(--mut)}
.sh-extra li:before{content:"";position:absolute;left:3px;top:4px;width:10px;height:6px;border-left:2px solid var(--b);border-bottom:2px solid var(--b);transform:rotate(-45deg)}
.sh-actions{display:grid;gap:8px;margin-top:auto}
.sh-cta{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:10px;font-weight:700;font-size:15px;background:linear-gradient(135deg,var(--b),var(--b2));color:#fff!important;text-decoration:none!important;transition:box-shadow .15s,transform .15s}
.sh-cta:hover{box-shadow:0 8px 22px rgba(16,98,254,.3);transform:translateY(-1px)}
.sh-card:not(.is-featured) .sh-cta{background:#fff;color:var(--b)!important;border:1.5px solid var(--b)}
.sh-card:not(.is-featured) .sh-cta:hover{background:var(--b);color:#fff!important}
.sh-more{border:0;background:transparent;color:var(--b);font:600 14px/1.2 Inter,system-ui,sans-serif;padding:8px;cursor:pointer;border-radius:8px}
.sh-more:hover{background:#eef4ff}
.sh-vatnote{text-align:center;font-size:13px;color:var(--mut);margin:16px 0 0}
.sh-sec{margin-top:64px}
.sh-h2{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.01em;margin:0 0 8px;text-align:center;color:var(--ink)}
.sh-sec-d{text-align:center;color:var(--mut);margin:0 auto 24px;max-width:640px}
.sh-all{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.sh-all-i{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--ln);border-radius:14px;background:#fff}
.sh-all-ico{width:42px;height:42px;border-radius:11px;background:#eaf2ff;color:var(--b);display:flex;align-items:center;justify-content:center;flex:none}
.sh-all-ico svg{width:22px;height:22px}
.sh-all-i strong{display:block;font-family:Manrope,Inter,sans-serif;font-size:15px;margin-bottom:2px}
.sh-all-i small{display:block;font-size:13.5px;color:var(--mut);line-height:1.45}
.sh-table-wrap{overflow-x:auto;border:1px solid var(--ln);border-radius:14px;background:#fff}
.sh-table{width:100%;border-collapse:collapse;min-width:720px;font-size:14px}
.sh-table th,.sh-table td{padding:13px 16px;border-bottom:1px solid #eef2f8;text-align:center}
.sh-table thead th{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:15px;background:var(--bg);position:sticky;top:0}
.sh-table thead th.is-featured{color:var(--b)}
.sh-table tbody th{text-align:left;font-weight:600;color:var(--ink);white-space:nowrap}
.sh-table tbody tr:hover td,.sh-table tbody tr:hover th{background:#fafcff}
.sh-table td:first-child,.sh-table th:first-child{position:sticky;left:0;background:#fff;z-index:1}
.sh-table thead th:first-child{background:var(--bg)}
.sh-yes{color:#0a8a4a;font-weight:800}.sh-no{color:#b6bfcc}
.sh-tr-price td{border-bottom:0}
.sh-tp strong{font-family:Manrope,Inter,sans-serif;font-size:18px;display:block}
.sh-cta-sm{min-height:38px;font-size:13.5px;margin-top:8px;padding:0 12px}
.sh-faq{max-width:820px;margin:22px auto 0;display:grid;gap:10px}
.sh-faq details{border:1px solid var(--ln);border-radius:12px;background:#fff}
.sh-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-weight:700;font-size:15.5px}
.sh-faq summary::-webkit-details-marker{display:none}
.sh-faq summary svg{width:20px;height:20px;color:var(--b);flex:none;transition:transform .2s}
.sh-faq details[open] summary svg{transform:rotate(180deg)}
.sh-faq p{margin:0;padding:0 18px 16px;color:var(--mut);line-height:1.6}
.sh-help{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px 32px;border-radius:16px;background:linear-gradient(135deg,var(--b),var(--b2));color:#fff}
.sh-help h2{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:22px;margin:0 0 4px;color:#fff}
.sh-help p{margin:0;opacity:.9}
.sh-help-b{background:#fff;color:var(--b)!important;font-weight:700;border-radius:10px;padding:12px 22px;text-decoration:none!important}
html.sh-lock{overflow:hidden}
.sh-modal{border:0;padding:0;border-radius:18px;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:0 40px 100px -30px rgba(16,40,90,.5);color:var(--ink)}
.sh-modal::backdrop{background:rgba(12,22,42,.55);backdrop-filter:blur(2px)}
.sh-modal[open]{animation:shin .18s ease-out}
@keyframes shin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sh-m-in{position:relative;padding:30px 32px 24px;font-family:Inter,system-ui,sans-serif}
.sh-m-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border:0;border-radius:10px;background:#f1f4f9;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sh-m-x:hover{background:#e6ecf5}.sh-m-x svg{width:18px;height:18px}
.sh-m-eyebrow{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--b)}
.sh-m-t{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:28px;margin:0 0 6px;color:var(--ink)}
.sh-m-for{margin:0 0 20px;color:var(--mut)}
.sh-m-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sh-m-cols h3{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:15px;margin:0 0 10px;color:var(--ink)}
.sh-m-list{list-style:none;margin:0 0 14px;padding:0}
.sh-m-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eef2f8;font-size:14px}
.sh-m-list span{color:var(--mut)}.sh-m-list strong{text-align:right}
.sh-m-ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sh-m-ticks li{font-size:12.5px;font-weight:600;background:#eef4ff;color:var(--b);border-radius:999px;padding:4px 10px}
.sh-m-price{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:14px}
.sh-m-price th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);text-align:left;padding:0 0 8px;font-weight:700}
.sh-m-price td{padding:10px 0;border-top:1px solid #eef2f8;vertical-align:top}
.sh-m-price td small{display:block;font-size:12px;color:var(--mut)}
.sh-m-box{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;background:var(--bg);border:1px solid var(--ln);margin-bottom:8px;font-size:13.5px;color:var(--mut)}
.sh-m-box strong{color:var(--ink);font-size:14px}
.sh-m-links{font-size:13px;margin:10px 0 0;color:var(--mut)}
.sh-m-links a{color:var(--b);font-weight:600}
.sh-m-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid #eef2f8}
.sh-m-foot .sh-cta{padding:0 22px}
@media (max-width:1199px){.sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sh-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
 .bmsh{padding:28px 0 56px}
 .sh-lead{font-size:16px}
 .sh-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .sh-all{grid-template-columns:minmax(0,1fr)}
 .sh-for,.sh-price-wrap{min-height:0}
 .sh-seg{flex-wrap:wrap;justify-content:center}
 .sh-seg button{padding:9px 12px}
 .sh-m-in{padding:24px 18px 18px}
 .sh-m-cols{grid-template-columns:minmax(0,1fr);gap:18px}
 .sh-m-t{font-size:24px;padding-right:40px}
 .sh-m-foot{flex-direction:column-reverse;align-items:stretch}
 .sh-help{padding:22px}
}
@media (prefers-reduced-motion:reduce){.bmsh *,.sh-modal{animation:none!important;transition:none!important}}
.sh-m-foot{position:sticky;bottom:-24px;background:#fff;margin-bottom:-24px;padding-bottom:24px;z-index:2}
@media (max-width:767px){.sh-m-foot{bottom:-18px;margin-bottom:-18px;padding-bottom:18px}}
EOF 2>&1

/* ===== Homepage VPS hero (hp-vps) ===== */
.hp-vps{padding-top:56px;padding-bottom:16px}
.vps-band{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding:52px 52px;border-radius:24px;background:radial-gradient(120% 140% at 100% 0%,#1d7bff 0%,#0d4fd6 42%,#0a2f8a 100%);color:#fff;box-shadow:0 30px 80px -40px rgba(10,47,138,.7)}
.vps-band:before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,154,255,.45),transparent);pointer-events:none}
.vps-band svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vps-copy{position:relative}
.vps-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;margin-bottom:18px}
.vps-eyebrow svg{width:16px;height:16px}
.vps-h2{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;color:#fff}
.vps-h2 span{display:block;color:#bfe3ff}
.vps-lead{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 20px;max-width:560px}
.vps-specs{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vps-specs li{font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.vps-promise{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px}
.vps-promise li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.vps-promise svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#fff;color:#0d4fd6;flex:none;stroke-width:2.6}
.vps-ctas{display:flex;flex-wrap:wrap;gap:12px}
.vps-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none!important;transition:transform .15s,box-shadow .15s,background .15s}
.vps-btn svg{width:18px;height:18px}
.vps-btn-pri{background:#fff;color:#0d4fd6!important;box-shadow:0 10px 28px -10px rgba(0,0,0,.4)}
.vps-btn-pri:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(0,0,0,.5)}
.vps-btn-sec{color:#fff!important;border:1.5px solid rgba(255,255,255,.5)}
.vps-btn-sec:hover{background:rgba(255,255,255,.1)}
.vps-plans{position:relative;background:#fff;color:#141414;border-radius:18px;padding:20px;box-shadow:0 24px 60px -30px rgba(0,0,0,.55)}
.vps-plans-t{margin:0 4px 10px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5b6472}
.vps-plans ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vps-plan{display:flex;align-items:center;gap:12px;padding:14px 14px;border:1px solid #e4e9f2;border-radius:12px;color:#141414!important;text-decoration:none!important;transition:border-color .15s,box-shadow .15s,transform .15s}
.vps-plan:hover{border-color:#1062fe;box-shadow:0 8px 22px -12px rgba(16,98,254,.45);transform:translateY(-1px)}
.vps-plan.is-featured{border:2px solid #1062fe;background:#f5f9ff}
.vps-plan-tx{flex:1;min-width:0}
.vps-plan-tx strong{display:block;font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:15px}
.vps-plan-tx strong em{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:#1062fe;border-radius:999px;padding:2px 7px;margin-left:4px;vertical-align:2px}
.vps-plan-tx small{display:block;font-size:13px;color:#5b6472;margin-top:2px}
.vps-plan-pr{text-align:right;line-height:1.1;white-space:nowrap}
.vps-plan-pr small{display:block;font-size:11px;color:#5b6472}
.vps-plan-pr b{display:block;font-family:Manrope,Inter,sans-serif;font-size:19px;color:#1062fe}
.vps-plan-go{width:18px;height:18px;color:#9aa6b8;flex:none}
.vps-plan:hover .vps-plan-go{color:#1062fe}
.vps-vat{margin:10px 4px 0;font-size:12px;color:#8792a4}
.sh-card{scroll-margin-top:110px}
@media (max-width:991px){.vps-band{grid-template-columns:minmax(0,1fr);padding:36px 28px;gap:28px}}
@media (max-width:575px){.hp-vps{padding-top:36px}.vps-band{padding:28px 18px;border-radius:18px}.vps-btn{width:100%}.vps-plans{padding:14px}}
@media (prefers-reduced-motion:reduce){.vps-btn,.vps-plan{transition:none}}