/* =====================================================================
   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:      #5C6480;
    --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: #5C6480;   /* was #6B7490 - fed --secondary/--neutral, 4.49 in the cart */
    --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:          #5647E0;
    --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-dk); }
.eyebrow-cyan   { background: rgba(6, 182, 212, .14);  color: #0B6172; }

.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: #0B6172; }
.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-dk); font-weight: 600; }   /* --violet measured 4.24 */
.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); }


/* =====================================================================
   iOS auto-zoom guard (light DOM: contact form, login, checkout fields)
   Safari zooms the page in on focus when a text field is under 16px and
   never zooms back out. Same threshold and reasoning as the cart rule in
   css/cart-overrides.css - keep the two in step.
   ===================================================================== */
@media (max-width: 1024px) {
    input[type="text"], input[type="search"], input[type="email"],
    input[type="tel"], input[type="url"], input[type="number"],
    input[type="password"], input:not([type]), textarea, select,
    .form-control, .custom-select {
        font-size: 16px !important;
    }
}


/* =====================================================================
   INPUT GROUPS - one control, not three boxes            2026-08-25

   My own regression. Rounding `.form-control` globally to fix the square
   login fields also rounded the input INSIDE `.input-group-merge`, where
   Bootstrap deliberately squares it so the icon and the field read as a
   single control. The result was three mismatched boxes side by side:

     .input-group-text   grey #E9ECEF, 1px #CED4DA border, 14px radius
     .form-control       white, 1px brand border, 14px radius
     .btn-reveal-pw      white, 1px #CCC border, 0 radius

   Correct structure for a merged group: the WRAPPER carries the border,
   background and radius, and everything inside it is transparent and
   square. Focus moves to the wrapper via :focus-within.
   ===================================================================== */
.input-group.input-group-merge {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--rounding-md);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-group.input-group-merge:focus-within {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(109, 94, 246, .16);
}
.input-group.input-group-merge > .form-control,
.input-group.input-group-merge .input-group-text,
.input-group.input-group-merge .btn {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.input-group.input-group-merge .input-group-text,
.input-group.input-group-merge .btn { color: var(--muted); }
.input-group.input-group-merge .btn:hover,
.input-group.input-group-merge .btn:focus { color: var(--violet); }

/* =====================================================================
   BREADCRUMB - the two halves sat 11.2px apart

   `.breadcrumb-item` is a 44px-tall flex box with align-items:normal.
   The first item wraps its label in an <a> that is itself display:flex,
   so that text ends up vertically centred (top 92.2). The current page
   is a bare text node directly inside the li, so it sits at the top of
   the same box (top 81). Centre the items and both agree.
   ===================================================================== */
.breadcrumb,
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item > a { align-items: center; }

/* =====================================================================
   CONTACT - centre the submit button
   `.contact-form` is display:block / text-align:left, so the button sat
   hard against the left edge (0px gap left, 71px right). fit-content
   keeps its natural width while the auto margins centre it.
   ===================================================================== */
.contact-form button[type="submit"],
.contact-form .btn-primary {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* The two merged fields came out 40px and 38px - the password group has a
   reveal button in it that sized differently from the email group. A 2px
   step between two stacked fields reads as sloppy, so pin both. Heights
   left as-is rather than raised: the complaint was shape, not size. */
.input-group.input-group-merge {
    min-height: 40px;
    align-items: stretch;
}
.input-group.input-group-merge > .form-control { height: auto; }


/* =====================================================================
   STORE / CART ACTION BUTTONS - the last non-brand buttons
                                                          2026-08-25
   Found by the alignment sweep. theme.min.css paints these from
   --bg-inverted:

     body #order-standard_cart .products .product footer .btn-order-now
     body #order-standard_cart .text-right .btn-checkout

   While the tokens were undefined those declarations were invalid and
   the buttons fell back to Bootstrap's defaults. Now that --bg-inverted
   resolves, they render near-black (#0B1020) at a 14px radius - measured
   on the store page - making them the only buttons on the site that are
   not the violet pill.

   Matching the theme's own selector specificity so this wins cleanly.
   ===================================================================== */
.btn-order-now,
.btn-checkout,
body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .text-right .btn-checkout,
body #order-standard_cart .cart-body .products .product .btn-order-now {
    background: var(--grad) !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(109, 94, 246, .34);
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-order-now:hover, .btn-order-now:focus,
.btn-checkout:hover, .btn-checkout:focus,
body #order-standard_cart .text-right .btn-checkout:hover,
body #order-standard_cart .text-right .btn-checkout:focus {
    background: var(--grad) !important;
    border: 0 !important;
    filter: saturate(1.15);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(109, 94, 246, .42) !important;
}

/* Any remaining .btn-success keeps its meaning but takes the site's
   shape rather than the theme's 14px corners. */
.btn-success { border-radius: var(--r-pill) !important; }


/* =====================================================================
   EMPTY CART SIDEBAR - reclaim the column          2026-08-27

   includes/hooks/onetoone_cart_sidebar.php removes the Categories and
   Actions panels from the checkout, but the column that held them is
   written by the template, not the sidebar loop, so it survives: measured
   at 1440px it was still a float:left box 285px wide, starting the form
   435px from the left with nothing beside it.

   :empty will not match here - Smarty leaves whitespace text nodes inside
   the div - so this tests for the absence of ELEMENT children instead.
   Written so it only applies when the column really is empty; if the
   hook is ever removed the normal two-column layout returns by itself.
   ===================================================================== */
#order-standard_cart .cart-sidebar:not(:has(*)),
#order-standard_cart .sidebar-collapsed:not(:has(*)) {
    display: none !important;
}
#order-standard_cart .cart-sidebar:not(:has(*)) ~ .cart-body {
    float: none !important;
    width: 100% !important;
}


/* =====================================================================
   CHECKOUT - gutter and the account toggle          2026-08-27

   1. THE GUTTER (the real reason it "felt off")
   `#order-standard_cart` is correctly inset - 15px each side - but the
   `.row` inside it carries Bootstrap's `margin: 0 -15px` negative gutter,
   which is only ever meant to be cancelled by a `.col-*` child's own 15px
   padding. `.cart-body` is not a Bootstrap column and has padding: 0, so
   nothing cancels it: measured at 375px the heading, every input and the
   toggle button all sat at x=0 and ran to x=375, hard against both screen
   edges. Give the body the gutter its parent already assumed.

   2. THE TOGGLE BUTTON
   Stock uses Bootstrap's `btn-info` (#17A2B8 teal) and `btn-warning`
   (#FFC107 amber) - two saturated colours that appear nowhere else on the
   site, on a control that is only a mode switch. The real action here is
   "Complete Order", so this should sit back, not compete. Same treatment
   for both so the login state and the signup state feel identical.

   3. THE LAYOUT
   The button floats right beside the paragraph, which squeezed the copy
   into a 186px column wrapping over three lines. Stack them on mobile.
   ===================================================================== */

#order-standard_cart .cart-body {
    padding-left: 15px;
    padding-right: 15px;
}

.already-registered {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.already-registered > p {
    order: 1;
    flex: 1 1 240px;
    margin: 0;
}
.already-registered > .pull-right,
.already-registered > .float-right {
    order: 2;
    float: none !important;
    flex: 0 0 auto;
}

#btnAlreadyRegistered,
#btnNewUserSignup {
    background: rgba(109, 94, 246, .10) !important;
    border: 1px solid rgba(109, 94, 246, .30) !important;
    color: var(--violet-dk) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    padding: .5rem 1.15rem !important;
    transition: background .15s ease, border-color .15s ease;
}
#btnAlreadyRegistered:hover, #btnAlreadyRegistered:focus,
#btnNewUserSignup:hover, #btnNewUserSignup:focus {
    background: rgba(109, 94, 246, .18) !important;
    border-color: rgba(109, 94, 246, .45) !important;
    color: var(--violet-dk) !important;
}

@media (max-width: 767px) {
    .already-registered {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .already-registered > .pull-right,
    .already-registered > .float-right { width: 100%; }
    #btnAlreadyRegistered,
    #btnNewUserSignup { width: 100%; }
}

/* Two corrections to the block above, both measured:

   1. theme.min.css declares
        body #order-standard_cart .cart-body { padding: 0 !important }
      which outranks a plain #order-standard_cart selector - so the gutter
      rule above was being beaten by theme.min.css and never applied. Match
      its specificity and priority.

   2. Bootstrap gives the button margin-left: 10px for spacing beside its
      sibling. At width:100% that pushed it 10px past the container - it
      measured left:10 right:385 on a 375px viewport. No sibling beside it
      once stacked, so drop the margin. */
body #order-standard_cart .cart-body {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (max-width: 767px) {
    .already-registered #btnAlreadyRegistered,
    .already-registered #btnNewUserSignup {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* The wrapper carries Bootstrap's .clearfix, whose ::after pseudo-element
   becomes a real FLEX ITEM once the wrapper is display:flex - with the
   default order:0 it sorts ahead of the paragraph (order:1) and takes the
   first slot, so the copy started one 16px gap in from the heading:
   measured paragraph left 181 against heading left 165. The float it was
   clearing is gone anyway, so switch it off. */
.already-registered::before,
.already-registered::after {
    display: none !important;
}

/* 15px stopped the fields touching the screen edge, but it left the
   checkout at half the breathing room of every comparable form.
   Measured at 375px:  login fields 48px in, contact fields 38px,
   hero search 31px, checkout 15px.

   32px matches the inner padding of the login card (48px 32px), which is
   this site's established inset for a form. Mobile only - on desktop the
   15px Bootstrap gutter is correct, and keeps the checkout aligned with
   the containers on every other page. Applied to .cart-body so the
   heading, the copy, the toggle and the fields all move together. */
@media (max-width: 767px) {
    body #order-standard_cart .cart-body {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* `flex: 1 1 240px` on the paragraph is right in the desktop ROW layout -
   240px is a sensible minimum width before the button wraps. But the
   mobile rule flips the container to `flex-direction: column`, and
   flex-basis applies to the MAIN axis: in a column that is HEIGHT. So the
   paragraph was being given a 240px tall box for two lines of text,
   leaving a ~200px hole between the intro copy and the button.
   Measured: paragraph height 240px, content needs ~42px.
   Reset it to intrinsic height whenever the container is a column. */
@media (max-width: 767px) {
    .already-registered > p { flex: 0 0 auto !important; }
}


/* =====================================================================
   TOTAL DUE TODAY - the last off-brand block        2026-08-27

   Stock renders the checkout total as `.alert.alert-success`, which is
   Bootstrap's pale green #D4EDDA - the same off-brand family as the teal
   and amber toggle buttons, and the only green anywhere on the site.

   Scoped to `.large-text` on purpose: that class is unique to the totals
   box. A real success alert in the cart - "promo code applied" - keeps
   its green, because there the colour is carrying meaning rather than
   just decorating a number.
   ===================================================================== */
#order-standard_cart .alert-success.large-text {
    background: rgba(109, 94, 246, .10) !important;
    border: 1px solid rgba(109, 94, 246, .28) !important;
    color: var(--ink) !important;
    border-radius: var(--r-md) !important;
}


/* =====================================================================
   AA CONTRAST SWEEP                                  2026-08-27

   A full-site pass found every text colour that fell under WCAG AA (4.5:1
   for normal text). All were marginal, and all traced back to four
   values rather than to individual pages:

     #6B7490  --muted            4.29-4.49   secondary text everywhere
     #6D5EF6  --violet           4.24-4.43   links and tab labels
     #0891B2  eyebrow cyan       3.02-3.66   the CONTACT / PRICING pills
     #6C757D  Bootstrap muted    4.34        checkout help text

   The first three are fixed at the token/definition above. Bootstrap's
   own .text-muted is overridden here - it ships #6C757D and is used
   throughout the stock checkout markup we do not control.

   Note these were measured against the real composited background, not
   against white, which is why they read lower than the swatch suggests:
   most of this text sits on the #F4F6FC page tint rather than on white.
   ===================================================================== */
.text-muted,
#order-standard_cart .text-muted,
body .text-muted {
    color: var(--muted) !important;
}