/* =====================================================================
   1-1 Hosting — custom theme
   Direction: iOS-style depth and glass, Material-You-style colour.
   Loaded after theme.min.css, so this file wins.
   ===================================================================== */

:root {
    --ink:        #0B1020;
    --body:       #4A5268;
    --muted:      #6B7490;
    --line:       #E7E9F2;

    --violet:     #6D5EF6;
    --violet-dk:  #5647E0;
    --indigo:     #4F46E5;
    --cyan:       #06B6D4;
    --pink:       #EC4899;
    --amber:      #F59E0B;

    --grad:       linear-gradient(120deg, #6D5EF6 0%, #8B5CF6 40%, #06B6D4 100%);
    --grad-warm:  linear-gradient(120deg, #EC4899 0%, #F59E0B 100%);

    --r-sm:   12px;
    --r-md:   18px;
    --r-lg:   28px;
    --r-xl:   36px;
    --r-pill: 999px;

    --sh-sm: 0 2px 8px rgba(11, 16, 32, .05);
    --sh-md: 0 8px 30px rgba(11, 16, 32, .09);
    --sh-lg: 0 24px 60px rgba(11, 16, 32, .14);
}

/* =====================================================================
   DESIGN TOKENS — restoring what the fork dropped
   theme.min.css references 42 custom properties and defines NONE of them;
   they live in the theme's own css/custom.css, which we replaced when we
   forked Nexus. Result: 392 declarations across the theme resolved to an
   invalid var() and silently fell back to their initial values — 0 for
   every border-radius, transparent for every background, black for text.
   That is what made the footer white-on-white and the domain Search button
   square, and what left the cart on Bootstrap blue instead of brand violet.

   These are also read by the order form: WHMCS renders the cart inside a
   Shadow DOM whose stylesheet maps --vl-* from these same names, and custom
   properties inherit through a shadow boundary. Defining them here therefore
   themes the checkout too — verified live, --vl-primary follows --primary.
   ===================================================================== */
:root {
    --white:       #ffffff;
    --neutral-50:  #FAFBFF;
    --neutral-100: #F4F6FC;
    --neutral-200: #E7E9F2;
    --neutral-300: #D7DBE8;
    --neutral-400: #9AA2B8;
    --neutral-500: #6B7490;
    --neutral-600: #4A5268;
    --neutral-700: #333C52;
    --neutral-800: #1E2537;
    --neutral-900: #0B1020;
    --neutral-950: #05070F;

    /* Primary is the brand violet, not Nexus's near-black. */
    --primary:          #6D5EF6;
    --primary-lifted:   #5647E0;
    --primary-accented: #4536C9;

    --secondary:          var(--neutral-500);
    --secondary-lifted:   var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success:  #00A63E;  --success-lifted:  #008A34;  --success-accented:  #016630;
    --info:     #155DFC;  --info-lifted:     #1447D6;  --info-accented:     #193CB8;
    --notice:   #7F22FE;  --notice-lifted:   #7008E7;  --notice-accented:   #5B0BB5;
    --warning:  #F54A00;  --warning-lifted:  #C93C00;  --warning-accented:  #9F2D00;
    --error:    #E7000B;  --error-lifted:    #C10007;  --error-accented:    #9B0006;

    --grayscale:          var(--neutral-900);
    --grayscale-lifted:   var(--neutral-800);
    --grayscale-accented: var(--neutral-700);
    --neutral:            var(--neutral-500);
    --neutral-lifted:     var(--neutral-600);
    --neutral-accented:   var(--neutral-700);

    --text:          var(--ink);
    --text-lifted:   var(--body);
    --text-muted:    var(--muted);
    --text-accented: var(--neutral-600);
    --text-inverted: var(--white);

    --border-muted:    var(--line);
    --border:          var(--line);
    --border-lifted:   var(--neutral-300);
    --border-accented: var(--neutral-500);

    --bg:          var(--white);
    --bg-muted:    var(--neutral-50);
    --bg-lifted:   var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--ink);

    --yellow-200: #fff085;  --yellow-300: #ffdf20;
    --teal-300:   #46edd5;  --teal-400:   #00d5be;
    --emerald-300:#5ee9b5;  --pink-400:   #fb64b6;

    --text-xs: .625rem;  --text-sm: .75rem;
    --text-md: .875rem;  --text-lg: 1rem;
    --outline-sm: 1px;   --outline-md: 2px;  --outline-lg: 3px;

    /* Rounding, on the same scale as this theme's own --r-* values. */
    --rounding-sm: 10px;
    --rounding-md: 14px;
    --rounding-lg: 20px;

    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* theme.min.css does `body,html{background-color:var(--bg-inverted)}`. With
   --bg-inverted undefined that was harmless; now that it resolves to near
   black it would paint the whole canvas dark, so pin both explicitly. The
   html background is the one that propagates to the canvas, so it matters
   even though body already had a colour. */
html, body { background-color: #fff; }

body { color: var(--body); background: #fff; }
h1, h2, h3 { color: var(--ink); font-weight: 750; letter-spacing: -0.028em; }

.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--violet);
}

/* ===================================================== HERO */
.home-domain-search {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.hero-mesh { position: absolute; inset: 0; pointer-events: none; }
.hero-mesh .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
}
.blob-1 { width: 520px; height: 520px; background: #8B5CF6; top: -220px; left: -120px; }
.blob-2 { width: 460px; height: 460px; background: #06B6D4; top: -160px; right: -100px; opacity: .42; }
.blob-3 { width: 420px; height: 420px; background: #EC4899; bottom: -260px; left: 38%; opacity: .3; }

.hero-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 92px 20px 84px;
    text-align: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--sh-sm);
    color: var(--ink);
    font-size: .84rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    margin-bottom: 26px;
}
.hero-badge i { font-size: .5rem; color: #10B981; }

.hero-title { font-size: 3.4rem; line-height: 1.08; margin: 0 0 20px; }
.hero-sub {
    font-size: 1.18rem;
    color: var(--body);
    margin: 0 auto 38px;
    max-width: 32em;
    line-height: 1.6;
}

.hero-search .input-group {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: var(--r-pill);
    padding: 7px;
    box-shadow: var(--sh-lg);
    transition: box-shadow .22s ease, transform .22s ease;
}
.hero-search .input-group:focus-within {
    box-shadow: 0 24px 60px rgba(109, 94, 246, .28);
    transform: translateY(-1px);
}
.hero-search .form-control {
    border: 0; background: transparent; box-shadow: none;
    height: 56px; font-size: 1.06rem; padding-left: 26px; color: var(--ink);
}
.hero-search .form-control:focus { box-shadow: none; background: transparent; }
.hero-search .btn-primary { height: 56px; padding: 0 38px; }

.hero-foot { margin: 26px 0 0; font-size: .9rem; }
.hero-foot .btn-link, .hero-foot a { color: var(--muted); font-weight: 500; }
.hero-foot .btn-link:hover, .hero-foot a:hover { color: var(--violet); }
.hero-dot { color: var(--line); margin: 0 10px; }
.home-domain-search .tld-logos { display: none; }

/* ===================================================== BUTTONS */
.btn { border-radius: var(--r-pill); font-weight: 650; }
.btn-primary {
    background: var(--grad);
    border: 0;
    box-shadow: 0 8px 22px rgba(109, 94, 246, .34);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover, .btn-primary:focus {
    filter: saturate(1.15);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(109, 94, 246, .42);
}
.btn-glass {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 11px 26px;
    box-shadow: var(--sh-sm);
}
.btn-glass:hover { color: var(--violet); border-color: var(--violet); transform: translateY(-2px); }

/* ===================================================== SECTIONS */
.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    margin-bottom: 14px;
}
.eyebrow-violet { background: rgba(109, 94, 246, .12); color: var(--violet); }
.eyebrow-cyan   { background: rgba(6, 182, 212, .14);  color: #0891B2; }

.hp-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.hp-head h2 { font-size: 2.35rem; margin-bottom: 12px; }
.hp-head p { color: var(--muted); font-size: 1.08rem; margin: 0; }

.hp-plan, .hp-why, .hp-split { padding: 86px 0; position: relative; }
.hp-why {
    background: linear-gradient(180deg, #FAFBFF 0%, #fff 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ===================================================== PLAN CARD */
.plan-card {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 48px 42px 38px;
    text-align: center;
    box-shadow: var(--sh-md);
    overflow: hidden;
}
.plan-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--grad);
}
.plan-glow {
    position: absolute;
    width: 320px; height: 320px;
    background: var(--violet);
    filter: blur(110px);
    opacity: .13;
    top: -140px; left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.plan-price { position: relative; margin-bottom: 30px; }
.plan-amount { font-size: 4rem; font-weight: 800; letter-spacing: -0.04em; display: block; line-height: 1; }
.plan-period { color: var(--muted); font-size: 1.05rem; }

.plan-list { list-style: none; padding: 0; margin: 0 0 34px; text-align: left; position: relative; }
.plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    color: var(--body);
    line-height: 1.5;
}
.plan-list li:last-child { border-bottom: 0; }
.tick {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .62rem; color: #fff;
    margin-top: 2px;
}
.tick-violet { background: var(--violet); }
.tick-cyan   { background: var(--cyan); }
.tick-pink   { background: var(--pink); }
.tick-amber  { background: var(--amber); }

.btn-plan { padding: 15px 42px; font-size: 1.06rem; position: relative; }
.plan-note { color: var(--muted); font-size: .85rem; margin: 20px 0 0; position: relative; }

/* ===================================================== WHY GRID */
.why-item { text-align: center; padding: 18px 20px; }
.why-chip {
    width: 58px; height: 58px;
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    box-shadow: var(--sh-sm);
}
.chip-violet { background: rgba(109, 94, 246, .13); color: var(--violet); }
.chip-cyan   { background: rgba(6, 182, 212, .15);  color: #0891B2; }
.chip-pink   { background: rgba(236, 72, 153, .13); color: var(--pink); }
.why-item h3 { font-size: 1.2rem; margin-bottom: 10px; }
.why-item p { color: var(--muted); line-height: 1.68; margin: 0; }

/* ===================================================== SPLIT CARDS */
.split-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 42px 36px;
    text-align: center;
    height: 100%;
    background: #fff;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}
.split-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}
.split-violet::after { background: linear-gradient(160deg, rgba(109,94,246,.09), transparent 70%); }
.split-cyan::after   { background: linear-gradient(160deg, rgba(6,182,212,.10), transparent 70%); }
.split-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.split-card:hover::after { opacity: 1; }
.split-card h3 { font-size: 1.25rem; margin-bottom: 10px; position: relative; }
.split-card p { color: var(--muted); margin-bottom: 26px; position: relative; }
.split-card .btn { position: relative; }

/* ===================================================== HEADER */
header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
}
header .navbar { padding-top: 0; padding-bottom: 0; }
header .navbar .container { margin-top: 0 !important; margin-bottom: 0 !important; }

.navbar-brand { padding: 16px 0; }
.navbar-brand .logo-img { max-height: 40px; width: auto; }

header form[action*="knowledgebase"] { display: none !important; }
.main-navbar-wrapper { padding: 0; border: 0; background: transparent; }
.main-navbar-wrapper .container { padding-top: 0; padding-bottom: 0; }

#nav > li > a {
    color: var(--muted) !important;
    font-weight: 550;
    font-size: .95rem;
    padding: 13px 14px !important;
    border-radius: var(--r-sm);
    transition: color .15s ease, background .15s ease;
}
#nav > li > a:hover, #nav > li > a:focus { color: var(--violet) !important; background: rgba(109, 94, 246, .08); }
#nav > li.active > a { color: var(--ink) !important; font-weight: 650; }

/* Announcements / Knowledgebase / Network Status / Affiliates are removed at
   source by includes/hooks/onetoone_navbar.php, not hidden here. These rules
   remain only as a fallback if that hook is ever disabled. */
#Primary_Navbar-Affiliates,
#Primary_Navbar-Network_Status,
#Primary_Navbar-Announcements,
#Primary_Navbar-Knowledgebase { display: none !important; }

/* Nav items as pill buttons — reads as a website, not a billing portal. */
#nav { align-items: center; gap: 4px; }
#nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}
#nav > li > a i { font-size: .95rem; opacity: .8; }
#nav > li > a:hover i { opacity: 1; }
#nav > li > a:hover,
#nav > li > a:focus {
    background: rgba(109, 94, 246, .09);
    border-color: rgba(109, 94, 246, .18);
}
#nav > li.active > a,
#nav > li > a[href="/index.php"]:hover {
    background: rgba(109, 94, 246, .1);
    border-color: rgba(109, 94, 246, .2);
}
#nav > li.dropdown > a::after { opacity: .6; margin-left: 2px; }

#Secondary_Navbar-Account > a {
    background: var(--grad);
    color: #fff !important;
    border-radius: var(--r-pill);
    padding: 10px 24px !important;
    font-weight: 650;
    font-size: .95rem;
    margin-left: 8px;
    box-shadow: 0 6px 18px rgba(109, 94, 246, .3);
    transition: transform .18s ease, box-shadow .18s ease;
}
#Secondary_Navbar-Account > a:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(109, 94, 246, .4);
}
#Secondary_Navbar-Account > a.dropdown-toggle::after { margin-left: 8px; opacity: .8; }

header .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    padding: 8px;
    margin-top: 8px;
}
header .dropdown-menu .dropdown-item { border-radius: var(--r-sm); }
header .dropdown-menu a.dropdown-item { padding: 9px 12px !important; color: var(--body); }
header .dropdown-menu a.dropdown-item:hover { background: rgba(109, 94, 246, .09); color: var(--violet); }

.cart-btn { color: var(--muted) !important; }
.cart-btn:hover { color: var(--violet) !important; }

/* ===================================================== FOOTER */
/* WHMCS branding removed — licence permits (confirmed by owner 2026-08-23).
   Core injects this <p> after </section>, so it has no class or id to target;
   :has() matches it by its whmcs.com link. footer.tpl carries a JS fallback
   for browsers without :has() support. */
p:has(> a[href*="whmcs.com"]) { display: none !important; }

/* ===================================================== RESPONSIVE */
@media (max-width: 1199px) {
    /* header stays sticky on mobile too - see HEADER v5 below */
    .navbar-brand { padding: 13px 0; }
    #Secondary_Navbar-Account > a { display: inline-block; margin: 8px 0; }
}
@media (max-width: 767px) {
    .hero-inner { padding: 60px 16px 56px; }
    .hero-title { font-size: 2.3rem; }
    .hero-sub { font-size: 1.05rem; }
    .hero-search .input-group { border-radius: var(--r-md); }
    .hero-search .form-control { padding-left: 18px; }
    .hp-plan, .hp-why, .hp-split { padding: 58px 0; }
    .hp-head h2 { font-size: 1.85rem; }
    .plan-card { padding: 38px 26px 30px; border-radius: var(--r-lg); }
    .plan-amount { font-size: 3.2rem; }
    .split-card { margin-bottom: 20px; }
    .blob-1, .blob-2, .blob-3 { filter: blur(70px); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary, .split-card, .btn-glass, .hero-search .input-group { transition: none; }
}

/* =====================================================================
   HEADER v2 — single unified bar (see header.tpl)
   ===================================================================== */
.site-navbar { padding: 0; }
.site-navbar .container { display: flex; align-items: center; }

/* Desktop order: brand · nav · account · cart */
@media (min-width: 1200px) {
    .site-navbar .navbar-collapse { order: 2; }
    .site-navbar .toolbar        { order: 3; margin-left: 18px; }
    #nav { margin-right: 10px; }
}

.navbar-account { flex-direction: row; align-items: center; }

/* Anchor links land below the sticky header rather than under it */
#pricing, #about { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Mobile: menu panel as a rounded sheet rather than a bare list */
@media (max-width: 1199px) {
    .site-navbar .navbar-collapse {
        border-top: 1px solid var(--line);
        margin-top: 6px;
        padding: 12px 0 16px;
    }
    #nav { margin: 0 0 10px; }
    #nav > li > a { padding: 12px 14px !important; }
    .navbar-account { padding-left: 0; }
}

/* =====================================================================
   CONTACT PAGE (contact-us.php / contact-us.tpl)
   ===================================================================== */
.contact-wrap { padding: 72px 0 88px; }
.contact-grid { align-items: flex-start; }

.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px 38px;
    box-shadow: var(--sh-md);
}

.contact-form label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink);
    margin-bottom: 6px;
}
.contact-form .opt {
    font-weight: 400;
    color: var(--muted);
    font-size: .82rem;
    margin-left: 4px;
}
.contact-form .form-control {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 13px 16px;
    height: auto;
    font-size: 1rem;
    color: var(--ink);
    background: #FCFCFE;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.contact-form .form-control:focus {
    background: #fff;
    border-color: var(--violet);
    box-shadow: 0 0 0 4px rgba(109, 94, 246, .13);
}
.contact-form textarea.form-control { resize: vertical; min-height: 150px; }
.contact-form .btn-plan { margin-top: 8px; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-errors {
    display: flex;
    gap: 12px;
    background: rgba(236, 72, 153, .07);
    border: 1px solid rgba(236, 72, 153, .25);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 26px;
    color: #9D174D;
}
.contact-errors i { margin-top: 3px; }
.contact-errors ul { margin: 0; padding-left: 18px; }

.contact-success { text-align: center; padding: 26px 10px; }
.contact-success h3 { margin-bottom: 10px; }
.contact-success p { color: var(--muted); margin-bottom: 26px; }

.contact-aside { padding-left: 14px; }
.aside-item { margin-bottom: 34px; }
.aside-item .why-chip { width: 48px; height: 48px; font-size: 1.15rem; margin-bottom: 14px; }
.aside-item h4 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.aside-item p { color: var(--muted); margin: 0; line-height: 1.65; }
.aside-item a { color: var(--violet); font-weight: 600; }
.muted-note { display: inline-block; margin-top: 8px; font-size: .88rem; }

.aside-clients {
    background: linear-gradient(160deg, rgba(109, 94, 246, .07), rgba(6, 182, 212, .05));
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px 22px;
}
.aside-clients h4 { margin-bottom: 8px; }
.aside-clients p { margin-bottom: 16px; }

@media (max-width: 991px) {
    .contact-aside { padding-left: 0; margin-top: 40px; }
}
@media (max-width: 767px) {
    .contact-wrap { padding: 48px 0 60px; }
    .contact-card { padding: 28px 22px; border-radius: var(--r-md); }
}

/* =====================================================================
   HEADER v3 — mobile corrections
   Measured on a 375px viewport: the cart and hamburger were rendering as
   44x40 boxes with a 1px #E5E5E5 border and square corners, the logo was
   ignoring the 40px cap and sitting at 188x60, and .container had zero
   horizontal padding so everything touched the screen edges.
   ===================================================================== */

/* Icon buttons: circular, borderless, proper 44px tap target */
.site-navbar .toolbar .btn,
.site-navbar .toolbar .nav-link {
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink) !important;
    transition: background .15s ease, color .15s ease;
}
.site-navbar .toolbar .btn:hover,
.site-navbar .toolbar .btn:active,
.site-navbar .toolbar .btn:focus {
    background: rgba(109, 94, 246, .1) !important;
    color: var(--violet) !important;
}
.site-navbar .toolbar .btn i,
.site-navbar .toolbar .btn span.fas { font-size: 1.15rem; }
.site-navbar .toolbar { align-items: center; }
.site-navbar .toolbar .nav-item { display: flex; align-items: center; }

/* Cart count sits on the icon, not floating above the header */
.site-navbar #cartItemCount {
    position: absolute;
    top: 2px;
    right: 0;
    background: var(--violet);
    color: #fff;
    font-size: .65rem;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
}
.site-navbar .cart-btn { position: relative; }

/* Logo: the theme caps at 60px with greater specificity than a plain
   .logo-img rule, so this has to be explicit. */
.site-navbar .navbar-brand .logo-img { max-height: 40px !important; height: auto; width: auto; }

/* Breathing room at the screen edges */
.site-navbar .container { padding-left: 16px; padding-right: 16px; }

@media (max-width: 767px) {
    .site-navbar .navbar-brand .logo-img { max-height: 34px !important; }
    .site-navbar .navbar-brand { padding: 12px 0; }
    .site-navbar .toolbar .btn { width: 42px; height: 42px; }
}

/* The theme sets justify-content:center on .navbar .container, which on mobile
   bunches the logo and hamburger together in the middle of the bar instead of
   pushing them to opposite edges. */
.site-navbar .container {
    justify-content: space-between !important;
    flex-wrap: wrap;
    align-items: center;
}
/* Full-width only while collapsed. Unscoped, this beats Bootstrap's
   .navbar-expand-xl rule (equal specificity, loaded later) and pushes the
   desktop nav onto a second row. */
@media (max-width: 1199px) {
    .site-navbar .navbar-collapse { flex-basis: 100%; }
}

/* =====================================================================
   HEADER v4 — no hamburger, ever
   Two links never justified a collapse menu. Contact and Account sit in
   the bar at every width; the mobile-only rules below just tighten the
   spacing so all three items fit a 320px screen.
   ===================================================================== */
.site-nav-inline {
    display: flex !important;
    flex-basis: auto !important;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 4px;
}
.site-nav-inline #nav {
    flex-direction: row;
    margin: 0 6px 0 0;
    align-items: center;
}
.site-nav-inline .navbar-account { flex-direction: row; align-items: center; margin: 0; }

@media (max-width: 1199px) {
    /* Override the earlier collapsed-panel styling — there is no panel now. */
    .site-navbar .site-nav-inline {
        border-top: 0;
        margin-top: 0;
        padding: 0;
        flex-basis: auto !important;
    }
    .site-nav-inline #nav > li > a { padding: 9px 10px !important; }
}

@media (max-width: 575px) {
    .site-navbar .container { padding-left: 12px; padding-right: 12px; }
    .site-navbar .navbar-brand .logo-img { max-height: 28px !important; }
    .site-nav-inline #nav > li > a {
        padding: 8px 8px !important;
        font-size: .9rem;
    }
    .site-nav-inline #nav > li > a i { margin-right: 2px; }
    #Secondary_Navbar-Account > a {
        padding: 9px 16px !important;
        font-size: .9rem;
        margin-left: 4px;
    }
}

/* Very narrow: drop the Contact icon before dropping the words */
@media (max-width: 359px) {
    .site-nav-inline #nav > li > a i { display: none; }
    .site-navbar .navbar-brand .logo-img { max-height: 24px !important; }
}

/* Both nav lists are separate <ul>s; without explicit centring they sit at
   different vertical offsets (measured 14px apart at 375px). */
.site-nav-inline > ul {
    display: flex;
    align-items: center;
    align-self: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav-inline > ul > li { display: flex; align-items: center; }
.site-nav-inline #nav > li > a,
.site-nav-inline .navbar-account > li > a {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

@media (max-width: 1199px) {
    /* Keep the bar compact now that nothing collapses into it. */
    .site-navbar .navbar-brand { padding: 10px 0; }
    .site-navbar .container { min-height: 62px; }
}

/* Stretch both lists to full bar height so their contents centre against the
   same box, rather than each list centring within its own differing height. */
.site-nav-inline { align-items: stretch; }
.site-nav-inline > ul { align-self: stretch; height: auto; }
.site-nav-inline > ul > li { align-items: center; }

/* Measured cause of the 6px offset: the account <ul> inherited margin-top:8px /
   margin-bottom:20px and its <a> margin:8px 0 from the old collapsed-menu
   rules. Asymmetric margins on a stretched flex item shift its contents off
   centre. Zero them for the inline bar. */
.site-nav-inline .navbar-account,
.site-nav-inline #nav { margin-top: 0 !important; margin-bottom: 0 !important; }
.site-nav-inline #Secondary_Navbar-Account > a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
}


/* =====================================================================
   HEADER v5 — always visible, constant height
   Sticky at every width (the earlier mobile `position: static` meant the
   bar scrolled away on phones). A small scroll listener adds .is-scrolled,
   which only changes the shadow. Contact and Account are never hidden.
   ===================================================================== */
header {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    transition: box-shadow .22s ease, background .22s ease;
}

header.is-scrolled {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 4px 20px rgba(11, 16, 32, .09);
}

/* Anchor targets clear the sticky bar */
#pricing, #about { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: reduce) {
    header, header * { transition: none !important; }
}

/* Baseline (unscrolled) sizes, same specificity so the pair is symmetrical. */
header .site-navbar .navbar-brand .logo-img { max-height: 34px; }
@media (min-width: 1200px) {
    header .site-navbar .navbar-brand .logo-img { max-height: 40px; }
}

/* =====================================================================
   iOS STICKY FIX
   Reported: the sticky header vanished on iPhone exactly when the pricing
   section came into view. Not a stacking problem — nothing paints above
   z-index 1030 and no ancestor breaks sticky.

   Cause: iOS Safari drops backdrop-filter elements out of the compositor
   when a heavy `filter` element enters the viewport and forces a layer
   change. The pricing block had filter: blur(110px) on .plan-glow, and the
   hero blobs used blur(90px).

   Fix: no filters anywhere near the scroll path, and no backdrop-filter on
   the header. Radial gradients give the same soft look far more cheaply.
   ===================================================================== */

header {
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Own compositing layer, so the bar is never re-rasterised mid-scroll. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
header.is-scrolled { background: rgba(255, 255, 255, .99) !important; }

/* Hero blobs: gradients instead of blurred solids. */
.hero-mesh .blob { filter: none !important; opacity: 1 !important; }
.blob-1 { background: radial-gradient(circle closest-side, rgba(139, 92, 246, .42), rgba(139, 92, 246, 0) 100%) !important; }
.blob-2 { background: radial-gradient(circle closest-side, rgba(6, 182, 212, .38), rgba(6, 182, 212, 0) 100%) !important; }
.blob-3 { background: radial-gradient(circle closest-side, rgba(236, 72, 153, .30), rgba(236, 72, 153, 0) 100%) !important; }

/* Pricing glow: the specific trigger. */
.plan-glow {
    filter: none !important;
    opacity: 1 !important;
    background: radial-gradient(circle closest-side, rgba(109, 94, 246, .18), rgba(109, 94, 246, 0) 100%) !important;
}

/* The hero search bar keeps its frosted look but is above the fold and not
   sticky, so it is not part of this problem. */

/* =====================================================================
   THE ACTUAL STICKY BUG
   theme.min.css sets `html { height: 100% }`. That pins the root box to
   exactly the viewport height, and a position:sticky child then stops
   sticking about one viewport down — on this site, right after the hero's
   "Already own one? Transfer it in" line, on every page.

   height:auto lets the root grow with the content; min-height:100% keeps
   the background covering short pages, which is what the 100% was for.
   ===================================================================== */
html {
    height: auto !important;
    min-height: 100%;
}
body { min-height: 100%; }


/* =====================================================================
   NO SHRINK ON SCROLL
   Reported twice. The bar looked lopsided because only the logo and some
   paddings resized while the Account pill and nav links stayed put.

   The previous block *claimed* the shrink was removed but still declared
   logo max-height and container min-height under .is-scrolled, so it never
   actually went away. Measured: at 768-1199px the logo dropped 40 -> 34px,
   and below 360px it GREW, 24 -> 28px.

   Every size rule keyed to .is-scrolled is now gone. The header holds one
   constant height at every width; scrolling only lifts a soft shadow.
   Do not reintroduce sizes here without matching all four breakpoints in
   HEADER v3/v4, or the bar goes lopsided again.
   ===================================================================== */
header.is-scrolled {
    background: rgba(255, 255, 255, .99) !important;
    box-shadow: 0 2px 14px rgba(11, 16, 32, .10) !important;
}

/* =====================================================================
   reCAPTCHA badge — scaled to 50%
   Google's terms allow hiding the badge only if you show the text
   attribution instead. Scaling is not hiding: it stays visible, clickable
   and links to Google, so the requirement is still met.
   Measured at 256x60; this renders it at 128x30.
   ===================================================================== */
.grecaptcha-badge {
    transform: scale(.5) !important;
    transform-origin: bottom right !important;
    opacity: .85;
    transition: opacity .18s ease;
}
.grecaptcha-badge:hover { opacity: 1; }

/* =====================================================================
   CONTACT ASIDE — align with the card below it
   The three plain items sat flush at x=15 while "Already a client?" is a
   card with 22px padding, putting its text at x=38. A 23px step made the
   column look misaligned. Matching the inner padding lines all four up on
   one edge, and tightening the rhythm stops the icons floating.
   ===================================================================== */
.aside-item {
    /* 23px, not 22: the card below adds a 1px border inside its 22px
       padding, so its text sits 23px from the card's outer edge. */
    padding-left: 23px;
    padding-right: 23px;
    margin-bottom: 28px;
}
.aside-item .why-chip {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
    margin-bottom: 12px;
    border-radius: var(--r-sm);
}
.aside-item h4 { margin-bottom: 4px; }
.aside-item p { line-height: 1.6; }
.muted-note { margin-top: 10px; }

/* Separator before the client card so the group reads as one column. */
.aside-clients { margin-top: 4px; }

/* =====================================================================
   CONTACT ASIDE — centred, to match the rest of the site
   The page heading, the homepage .why-item blocks and the .split-card
   blocks are all centred; this column was the only left-aligned content,
   which is what made it read as misaligned. The form itself stays
   left-aligned, as forms should be.
   ===================================================================== */
.aside-item,
.aside-item h4,
.aside-item p,
.aside-clients,
.aside-clients h4,
.aside-clients p { text-align: center; }

/* Chip is inline-flex, so centring the text centres the icon too. */
.aside-item .why-chip { display: inline-flex; }

.aside-clients .btn { margin: 0 auto; }

/* =====================================================================
   QA PASS — tap targets
   Measured at 375px: the logo link was 30px tall, the "Transfer it in"
   link 31px and the footer links 22px. WCAG asks for ~44px; anything
   under ~32px is genuinely fiddly on a phone.
   ===================================================================== */
.site-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.hero-foot .btn-link,
.hero-search .btn-link {
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: inline-flex;
    align-items: center;
}
#footer .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* =====================================================================
   QA PASS 2
   - The contact page had no <h1> at all (only an h2), which is both an SEO
     and a screen-reader problem. Its heading is now an h1 and needs the
     same styling the h2 had.
   - Breadcrumb and mailto links measured 22px tall on mobile.
   ===================================================================== */
.hp-head h1 {
    font-size: 2.35rem;
    margin-bottom: 12px;
    color: var(--ink);
    font-weight: 750;
    letter-spacing: -0.028em;
}
@media (max-width: 767px) {
    .hp-head h1 { font-size: 1.85rem; }
}

.master-breadcrumb .breadcrumb-item a,
.aside-item a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* =====================================================================
   STORE PAGE — restore the mobile gutter
   .products has no padding, but Bootstrap's .row inside carries -15px
   margins. The product card therefore sat flush at left:0 with 15px of
   space on the right. Padding the wrapper cancels the negative margins
   and centres the card properly.
   ===================================================================== */
@media (max-width: 767px) {
    .products { padding-left: 15px; padding-right: 15px; }
}

/* =====================================================================
   WIDE TABLES — scroll inside their own container
   The domain pricing table renders 601px wide; at 375px its wrapper had
   overflow-x: visible, so the renewal and transfer columns were cut off
   and unreachable. Wide tables must scroll themselves, never the page.
   ===================================================================== */
.listtable,
.table-container,
#tableLoading {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.listtable table { min-width: 480px; }

/* Subtle affordance so it's obvious the table scrolls */
@media (max-width: 767px) {
    .listtable {
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(11,16,32,.14), transparent),
            radial-gradient(farthest-side at 100% 50%, rgba(11,16,32,.14), transparent) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* Login page: "Forgot Password?" and "Create account" measured 18px tall. */
@media (max-width: 767px) {
    .card-body a.small,
    a[href*="password/reset"],
    a[href*="register.php"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* =====================================================================
   FOOTER — was invisible
   theme.min.css styles the footer as white text for a dark page
   background (html { background-color: var(--bg-inverted) }), but that
   background never applies here, so the footer rendered white-on-white:
   contrast ratio 1.0. It read as a blank area at the end of every page.
   ===================================================================== */
#footer.footer {
    background: #FAFBFF;
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding-top: 28px;
    padding-bottom: 28px;
    margin-top: 0;
}
#footer.footer .copyright { color: var(--muted); font-size: .88rem; }
#footer.footer .nav-link { color: var(--muted); font-weight: 500; }
#footer.footer .nav-link:hover,
#footer.footer .nav-link:focus { color: var(--violet); }
#footer.footer a { color: var(--muted); }
#footer.footer a:hover { color: var(--violet); }
#footer.footer .btn-outline-light {
    border-color: var(--line);
    color: var(--ink);
}
#footer.footer .btn-outline-light:hover { background: var(--ink); color: #fff; }

/* =====================================================================
   PLAN LIST — the li is a flex container, so each text node and <strong>
   became its own flex item and picked up the 13px gap. Wrapping the copy
   in a <span> makes it a single item again. This rule keeps it correct
   even if the markup changes back.
   ===================================================================== */
.plan-list li > span:not(.tick) { flex: 1 1 auto; min-width: 0; }
.plan-list li { column-gap: 13px; row-gap: 0; }

/* Footer text at --muted measured 4.49:1 against #FAFBFF — just under the
   4.5:1 WCAG AA threshold. --body clears it comfortably. */
#footer.footer,
#footer.footer .copyright,
#footer.footer .nav-link,
#footer.footer a { color: var(--body); }
#footer.footer .nav-link:hover,
#footer.footer a:hover { color: var(--violet); }


/* =====================================================================
   DOMAIN SEARCH BUTTON — square while every other button is a pill
   theme.min.css declares:
       body #frmDomainHomepage .btn {
           border-radius: var(--rounding-md) !important;
       }
   ...but --rounding-md is never defined anywhere in the theme. An invalid
   var() is not ignored in favour of the next rule in the cascade: the whole
   declaration is thrown out at computed-value time and the property falls
   back to its INITIAL value, which for border-radius is 0. The !important
   still wins the cascade, so it beat our .btn pill rule and rendered square.
   Measured: 128x56 with 0px corners, sitting inside a 999px pill wrapper.

   Note: 150 theme rules reference --rounding-sm / --rounding-md /
   --rounding-lg and NONE of them are ever defined, so all 150 compute to 0.
   Defining those three variables on :root would restore rounding
   theme-wide - deliberately not done here to keep this change scoped.
   ===================================================================== */
body #frmDomainHomepage .btn,
body #frmDomainHomepage .input-group > .input-group-append > .btn,
body #frmDomainHomepage #btnDomainSearch,
body #frmDomainHomepage #btnDomainSearch2 {
    border-radius: var(--r-pill) !important;
}


/* =====================================================================
   FORM FIELDS — square boxes beside 14px cards and pill buttons
   theme.min.css already says `.form-control { border-radius:
   var(--rounding-md) }`, but Bootstrap's input-group joining rule zeroes the
   corners of any .form-control inside a group so the GROUP can draw the
   shape instead. On `.input-group-merge` (login email/password, where the
   addon sits inside the field) the wrapper is transparent with no border and
   no radius, so nothing ever draws that shape and the field renders square —
   measured 0px, on a card that is itself 14px, next to a pill Login button.

   Border colour was Bootstrap's default #CED4DA rather than the brand line
   colour, for the same reason: the theme never restyled it.
   ===================================================================== */
.form-control,
.input-group-merge > .form-control,
.input-group-merge > .form-control:not(:first-child),
.input-group-merge > .form-control:not(:last-child),
.custom-select {
    border-radius: var(--rounding-md);
}
.form-control,
.custom-select { border-color: var(--line); }
.form-control:focus,
.custom-select:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(109, 94, 246, .16);
}

/* The hero domain field is deliberately borderless inside its own pill
   wrapper — keep it that way. */
.home-domain-search .input-group > .form-control {
    border-radius: 0;
    border-color: transparent;
}


/* =====================================================================
   NO HORIZONTAL SCROLL - ANY DEVICE                        2026-08-25

   Two layers: kill the known offender, then a safety net for anything
   third-party that appears later.

   The offender was Stripe's hidden metrics iframe - a direct child of
   <body>, position:fixed, visibility:hidden, and 405px wide. Invisible,
   but it still pushed the document to 404px on a 375px viewport, giving
   29px of sideways scroll on every page that loads Stripe. It is a
   message-passing channel; its rendered size is irrelevant, so clamping
   it costs nothing.

   The safety net uses `overflow-x: clip`, NOT `hidden`. `hidden` turns
   the element into a scroll container, which would break the sticky
   header we already fixed once and the fixed checkout bar in the cart.
   `clip` does neither - it just clips. Verified supported here; where it
   is not, it degrades to today's behaviour rather than breaking layout.
   ===================================================================== */

body > iframe[src*="js.stripe.com"] {
    max-width: 100vw !important;
    left: 0 !important;
}

/* Belt and braces: no element can force the page sideways. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* Media and embeds are the usual culprits - never let them exceed
   their column, whatever intrinsic width they declare. */
img, video, svg, canvas, iframe, embed, object, table {
    max-width: 100%;
}


/* Google's required reCAPTCHA notice - present because the badge itself is
   parked off-screen at right:-186px on phones. Deliberately quiet. */
#footer .recaptcha-attribution {
    font-size: .75rem;
    line-height: 1.5;
    /* --muted measured 4.49:1 here - just under the 4.5 AA floor for text
       this small, so use the body colour. Still reads as secondary. */
    color: var(--body);
}
#footer .recaptcha-attribution a { color: var(--body); text-decoration: underline; }
#footer .recaptcha-attribution a:hover { color: var(--violet); }