/*
 * Modus Customer Commerce UI — logged-out storefront brand palette (v1.6.0)
 * Source palette: company-context/ModusSystemsBrandingFile.txt.
 *   Navy  #22315E  trust anchor: header, footer, promise strip, headings
 *   Coral #E73C29  conversion nudge, used ONLY on primary actions. Text and
 *                  button fills use the deeper #C8321F because white on
 *                  #E73C29 is 4.1:1 (fails WCAG AA); #C8321F is 5.3:1.
 *   Blue-greys #C1CAE2 / #B2C1DA  grouping fills and borders (light tint
 *                  #EEF1F8 for card fills so white stays the main canvas)
 *   Near-black #0D0D0D  body text
 *
 * Scope: every rule is under body:not(.mc-portal-body), i.e. logged-out
 * pages only. The logged-in portal keeps its existing palette.
 * Loaded after mc-dark.css so the scoped dark-mode rules here win.
 */

:root {
    --mc-brand-navy: #22315e;
    --mc-brand-navy-deep: #1a2649;
    --mc-brand-coral: #e73c29;
    --mc-brand-coral-text: #c8321f;
    --mc-brand-coral-hover: #a82a1a;
    --mc-brand-coral-on-dark: #f47c6d;
    --mc-brand-blue-grey: #c1cae2;
    --mc-brand-blue-grey-2: #b2c1da;
    --mc-brand-tint: #eef1f8;
    --mc-brand-tint-soft: #f4f6fb;
    --mc-brand-ink: #0d0d0d;
}

/* ---- Light-mode text tokens ---- */
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) {
    --mc-text-primary: var(--mc-brand-ink);
    --mc-text-secondary: #475569;
    --mc-text-muted: #475569;
    --bs-body-color: var(--mc-brand-ink);
    --bs-body-bg: #ffffff;
    background: #ffffff;
}

/* ---- Header: full-width, flat navy bar (light and dark) ----
   Reference: the plain top bars of GoDaddy and domains.co.za. The bar runs
   edge to edge, its content lines up with the page width, links are plain
   text, and only "Get Started" is a filled button. No boxes, pills or
   drop shadow. */
body:not(.mc-portal-body) .mc-header {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--mc-brand-navy);
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
}

body:not(.mc-portal-body) .mc-header .navbar {
    min-height: 72px;
    padding-block: var(--mc-space-2) !important;
    background: transparent;
    box-shadow: none;
    border: 0;
}

body:not(.mc-portal-body) .mc-header .navbar > .container-fluid {
    max-width: var(--mc-storefront-max);
    margin-inline: auto;
    padding-inline: var(--mc-page-gutter);
    background: transparent;
    box-shadow: none;
    border: 0;
}

/* White logo on navy, whatever the colour scheme. */
[data-bs-theme] body:not(.mc-portal-body) .mc-header img.hide-theme-light {
    display: block !important;
}

[data-bs-theme] body:not(.mc-portal-body) .mc-header img.hide-theme-dark {
    display: none !important;
}

/* Plain, readable text links: pure white at rest, underline on hover/focus. */
body:not(.mc-portal-body) .mc-header .nav-link,
body:not(.mc-portal-body) .mc-header .btn.mc-header-login-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--mc-touch);
    padding: 0 var(--mc-space-3) !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    color: #ffffff !important;
    font-size: var(--mc-text-base);
    font-weight: 600;
    text-decoration: none;
}

body:not(.mc-portal-body) .mc-header .nav-link:hover,
body:not(.mc-portal-body) .mc-header .nav-link:focus-visible,
body:not(.mc-portal-body) .mc-header .nav-link.active,
body:not(.mc-portal-body) .mc-header .btn.mc-header-login-button:hover,
body:not(.mc-portal-body) .mc-header .btn.mc-header-login-button:focus-visible,
body:not(.mc-portal-body) .mc-header .btn.mc-header-login-button.active {
    color: #ffffff !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* The only filled control in the bar: a compact coral button, small radius. */
body:not(.mc-portal-body) .mc-header .btn.mc-button--primary {
    min-height: 40px;
    margin-inline-start: var(--mc-space-3) !important;
    padding: 0 var(--mc-space-5);
    border-radius: var(--mc-radius-sm);
    box-shadow: none;
    font-size: var(--mc-text-base);
    font-weight: 700;
}

/* Theme toggle: bare icon, no box. */
body:not(.mc-portal-body) .mc-header .mc-theme-toggle {
    border: 0;
    border-radius: var(--mc-radius-sm);
    background: transparent;
    color: #ffffff !important;
}

body:not(.mc-portal-body) .mc-header .mc-theme-toggle:hover,
body:not(.mc-portal-body) .mc-header .mc-theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
}

body:not(.mc-portal-body) .mc-header .mc-theme-toggle .icon {
    color: #ffffff !important;
}

/* Language: flag plus a thin chevron, no box. The name stays hidden whether
   or not TomSelect added its "locale" class to the control. */
body:not(.mc-portal-body) .mc-header .mc-display-controls .ts-wrapper,
body:not(.mc-portal-body) .mc-header .mc-display-controls .ts-control {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body:not(.mc-portal-body) .mc-header .mc-display-controls .ts-control {
    position: relative;
    gap: var(--mc-space-2);
    min-width: 0;
    padding: 0 22px 0 var(--mc-space-2) !important;
    border-radius: var(--mc-radius-sm);
    cursor: pointer;
}

body:not(.mc-portal-body) .mc-header .mc-display-controls .ts-control:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

body:not(.mc-portal-body) .mc-header .mc-display-controls .ts-control .item {
    font-size: 0 !important;
    color: transparent;
}

body:not(.mc-portal-body) .mc-header .mc-display-controls .ts-control .item .locale-flag {
    font-size: 18px;
    margin: 0;
    border-radius: 2px;
}

body:not(.mc-portal-body) .mc-header .mc-display-controls .ts-control::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
}

/* Mobile bar icons. */
body:not(.mc-portal-body) .mc-mobile-account-link,
body:not(.mc-portal-body) .mc-mobile-header-actions .navbar-toggler {
    color: #ffffff !important;
}

body:not(.mc-portal-body) .mc-mobile-account-link:hover,
body:not(.mc-portal-body) .mc-mobile-account-link:focus-visible,
body:not(.mc-portal-body) .mc-mobile-header-actions .navbar-toggler:hover,
body:not(.mc-portal-body) .mc-mobile-header-actions .navbar-toggler:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

/* Mobile drawer: same navy, a plain list of white links, full-width actions. */
@media (max-width: 767.98px) {
    body:not(.mc-portal-body) .mc-header .navbar > .container-fluid {
        padding-inline: var(--mc-space-4);
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse {
        background: var(--mc-brand-navy);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: none;
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .navbar-nav,
    body:not(.mc-portal-body) .mc-header .navbar-collapse .navbar-nav > li {
        align-items: stretch !important;
        width: 100%;
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .nav-link {
        justify-content: flex-start;
        width: 100%;
        padding: 0 var(--mc-space-2) !important;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .mc-theme-toggle {
        width: var(--mc-touch) !important;
        border-bottom: 0;
        justify-content: center;
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .row {
        width: 100%;
        margin-inline: 0;
        padding-top: var(--mc-space-3);
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .row > .col {
        padding-inline: 0;
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .row > .col + .col {
        padding-inline-start: var(--mc-space-3);
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .row .btn {
        width: 100%;
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .nav-link .icon {
        color: var(--mc-brand-blue-grey);
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .nav-link.active,
    body:not(.mc-portal-body) .mc-header .navbar-collapse .nav-link:active {
        background: transparent;
        box-shadow: none;
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .mc-display-controls {
        justify-content: flex-start;
        padding-block: var(--mc-space-2);
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-outline-primary,
    body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-primary {
        min-height: var(--mc-touch);
        white-space: nowrap;
        padding-inline: var(--mc-space-3);
        border-radius: var(--mc-radius-sm);
        box-shadow: none;
        font-weight: 700;
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-outline-primary {
        color: #ffffff;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
    }

    body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-outline-primary:hover,
    body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-outline-primary:focus-visible {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
        border-color: #ffffff;
    }
}

/* ---- Coral: primary conversion actions only ---- */
body:not(.mc-portal-body) .btn.mc-button--primary,
body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-primary {
    color: #ffffff;
    background: var(--mc-brand-coral-text);
    border-color: var(--mc-brand-coral-text);
    box-shadow: none;
}

body:not(.mc-portal-body) .btn.mc-button--primary:hover,
body:not(.mc-portal-body) .btn.mc-button--primary:focus-visible,
body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-primary:hover,
body:not(.mc-portal-body) .mc-header .navbar-collapse .btn-primary:focus-visible {
    color: #ffffff;
    background: var(--mc-brand-coral-hover);
    border-color: var(--mc-brand-coral-hover);
}

body:not(.mc-portal-body) .btn.mc-button--primary:focus-visible,
body:not(.mc-portal-body) .mc-search--hero .mc-search-submit:focus-visible,
body:not(.mc-portal-body) .mc-domain-suggestion-action:focus-visible {
    outline: 3px solid var(--mc-brand-coral);
    outline-offset: 2px;
}

body:not(.mc-portal-body) .mc-search--hero .mc-search-submit {
    background: var(--mc-brand-coral-text);
    color: #ffffff;
}

body:not(.mc-portal-body) .mc-search--hero .mc-search-submit:hover,
body:not(.mc-portal-body) .mc-search--hero .mc-search-submit:focus-visible {
    background: var(--mc-brand-coral-hover);
    color: #ffffff;
}

/* "I Want It" on domain suggestion rows. */
body:not(.mc-portal-body) .mc-domain-suggestion-action {
    color: #ffffff;
    background: var(--mc-brand-coral-text);
    border-color: var(--mc-brand-coral-text);
}

body:not(.mc-portal-body) .mc-domain-suggestion-row:hover .mc-domain-suggestion-action,
body:not(.mc-portal-body) .mc-domain-suggestion-row:focus-visible .mc-domain-suggestion-action {
    color: #ffffff;
    background: var(--mc-brand-coral-hover);
    border-color: var(--mc-brand-coral-hover);
}

/* "Explore services" on category cards. */
body:not(.mc-portal-body) .mc-product-card .mc-product-card-action {
    color: var(--mc-brand-coral-text);
}

[data-bs-theme="dark"] body:not(.mc-portal-body) .mc-product-card .mc-product-card-action {
    color: var(--mc-brand-coral-on-dark);
}

/* ---- Navy: headings and supporting accents (light mode) ---- */
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) :is(
    .mc-display-hero,
    .mc-display-section,
    .mc-hero-heading,
    .mc-closing-panel h2,
    .mc-eyebrow,
    .mc-eyebrow--inverse,
    .mc-text-link-emphasis,
    .mc-text-link .icon,
    .mc-text-link--small,
    .mc-journey-number,
    .mc-stage-action,
    .mc-product-card .mc-product-card-outcome,
    .mc-journey-icon,
    .mc-trust-item .mc-trust-icon,
    .mc-search-tld-chip
) {
    color: var(--mc-brand-navy);
}

[data-bs-theme="dark"] body:not(.mc-portal-body) :is(
    .mc-eyebrow,
    .mc-eyebrow--inverse,
    .mc-text-link-emphasis,
    .mc-text-link .icon,
    .mc-text-link--small,
    .mc-journey-number,
    .mc-stage-action,
    .mc-product-card .mc-product-card-outcome,
    .mc-journey-icon,
    .mc-trust-item .mc-trust-icon,
    .mc-search-chips--featured .mc-search-tld-chip
) {
    color: var(--mc-brand-blue-grey);
}

/* ---- Blue-grey: grouping fills (light mode), white stays the canvas ---- */
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) :is(
    .mc-hero--dark,
    .mc-storefront-band--stages,
    .mc-storefront-band--essentials,
    .mc-storefront-band--utility,
    .mc-storefront-band--closing
) {
    background: #ffffff;
    border-color: var(--mc-brand-tint);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) :is(
    .mc-storefront-band--journey,
    .mc-storefront-band--trust
) {
    background: var(--mc-brand-tint-soft);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) :is(
    .mc-product-card,
    .mc-stage-card,
    .mc-domain-suggestion-heading
) {
    background: var(--mc-brand-tint);
    border-color: var(--mc-brand-blue-grey);
    box-shadow: none;
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) :is(.mc-product-card, .mc-stage-card):hover {
    border-color: var(--mc-brand-blue-grey-2);
    box-shadow: 0 10px 24px rgba(34, 49, 94, 0.10);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-journey-step {
    border-color: var(--mc-brand-blue-grey);
    box-shadow: none;
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) :is(.mc-journey-icon, .mc-trust-item .mc-trust-icon) {
    background: var(--mc-brand-tint);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-journey-step + .mc-journey-step::before {
    background: var(--mc-brand-blue-grey);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-search--hero,
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-domain-results-panel,
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-search-tld-chip {
    border-color: var(--mc-brand-blue-grey);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-hero-domain {
    border-top-color: var(--mc-brand-tint);
}

/* Stage cards: navy top rule replaces the sky accent. */
body:not(.mc-portal-body) .mc-stage-card {
    border-top-color: var(--mc-brand-navy);
}

[data-bs-theme="dark"] body:not(.mc-portal-body) .mc-stage-card {
    border-top-color: var(--mc-brand-blue-grey-2);
}

body:not(.mc-portal-body) .mc-stage-card--direct {
    border-top-color: var(--mc-brand-blue-grey-2);
}

/* ---- Promise strip and footer: navy (light and dark) ---- */
body:not(.mc-portal-body) .mc-promise-band,
[data-bs-theme="dark"] body:not(.mc-portal-body) .mc-promise-band {
    background: var(--mc-brand-navy);
    color: #ffffff;
}

body:not(.mc-portal-body) .mc-promise-list,
[data-bs-theme="dark"] body:not(.mc-portal-body) .mc-promise-list {
    color: var(--mc-brand-blue-grey);
}

body:not(.mc-portal-body) .mc-footer,
[data-bs-theme="dark"] body:not(.mc-portal-body) .mc-footer {
    background: var(--mc-brand-navy);
    border-top: 0;
    color: var(--mc-brand-blue-grey);
}

body:not(.mc-portal-body) .mc-footer a {
    color: #ffffff;
}

body:not(.mc-portal-body) .mc-footer a:hover,
body:not(.mc-portal-body) .mc-footer a:focus-visible {
    color: var(--mc-brand-blue-grey);
}

/* Back-to-top is navigation, not conversion: keep it navy so coral stays reserved. */
body:not(.mc-portal-body) a.btn.mc-to-top {
    background: var(--mc-brand-navy);
    border-color: var(--mc-brand-navy);
    box-shadow: none;
}

body:not(.mc-portal-body) a.btn.mc-to-top:hover,
body:not(.mc-portal-body) a.btn.mc-to-top:focus-visible {
    background: var(--mc-brand-navy-deep);
    border-color: var(--mc-brand-navy-deep);
}

[data-bs-theme="dark"] body:not(.mc-portal-body) a.btn.mc-to-top {
    border-color: rgba(193, 202, 226, 0.45);
}

/* TLD price hint: plain text link, not a pill chip. */
body:not(.mc-portal-body) .mc-search-chips--featured .mc-search-tld-chip {
    min-height: var(--mc-touch);
    padding: 0 var(--mc-space-2);
    border: 0;
    border-radius: var(--mc-radius-sm);
    background: transparent;
    box-shadow: none;
    font-size: var(--mc-text-sm);
    font-weight: 700;
    transform: none;
}

body:not(.mc-portal-body) .mc-search-chips--featured .mc-search-tld-chip:hover,
body:not(.mc-portal-body) .mc-search-chips--featured .mc-search-tld-chip:focus-visible {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: none;
}

/* Hero sits directly under the full-width bar (no gap strip in dark mode). */
body:not(.mc-portal-body) .mc-hero {
    margin-top: 0;
}

/* ======================================================================
   Hero polish (v1.7.0): depth, hierarchy, a search "card", floating chat.
   Flat and clean: soft gradient + one diffused shadow, no pills or outlines.
   ====================================================================== */

/* Soft anchor behind the hero copy: pale blue-grey fading to white. */
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-hero--dark {
    background: linear-gradient(180deg, var(--mc-brand-tint) 0%, #ffffff 78%);
    border-bottom: 0;
    padding-block: var(--mc-space-12) var(--mc-space-16);
}

/* Overline as a tag: heavier, wider tracking, brand navy. */
body:not(.mc-portal-body) .mc-hero .mc-eyebrow {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

/* Headline: tighter leading and tracking so it reads as one punchy block. */
body:not(.mc-portal-body) .mc-hero-heading {
    line-height: 1.02;
    letter-spacing: -0.012em;
    max-width: 20ch;
    margin-inline: auto;
    text-wrap: balance;
}

/* Sub-headline: larger, softer grey so the headline clearly leads. */
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-hero-supporting {
    color: #4b5563;
}

body:not(.mc-portal-body) .mc-hero-supporting {
    font-size: 1.25rem;
    line-height: 1.5;
    max-width: 52ch;
}

/* CTAs: chunky primary, secondary link beside it on desktop. */
body:not(.mc-portal-body) .mc-hero-actions--lead {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mc-space-4) var(--mc-space-6);
    margin-top: var(--mc-space-4);
}

body:not(.mc-portal-body) .btn.mc-hero-cta {
    min-height: 3.75rem;
    padding-inline: var(--mc-space-10);
    font-size: 1.125rem;
    transition: background-color var(--mc-duration-fast) var(--mc-ease-standard),
        box-shadow var(--mc-duration-normal) var(--mc-ease-standard),
        transform var(--mc-duration-fast) var(--mc-ease-standard);
}

body:not(.mc-portal-body) .btn.mc-hero-cta:hover,
body:not(.mc-portal-body) .btn.mc-hero-cta:focus-visible {
    box-shadow: 0 10px 24px rgba(200, 50, 31, 0.28);
    transform: translateY(-1px);
}

/* Domain search becomes a floating card (white, 16px radius, soft shadow). */
body:not(.mc-portal-body) .mc-hero-domain {
    width: min(100%, 880px);
    margin-top: var(--mc-space-8);
    padding: var(--mc-space-8) var(--mc-space-8) var(--mc-space-6);
    border: 0;
    border-radius: 16px;
    background: var(--mc-surface-raised);
    box-shadow: 0 10px 30px rgba(34, 49, 94, 0.10), 0 2px 6px rgba(34, 49, 94, 0.05);
}

[data-bs-theme="dark"] body:not(.mc-portal-body) .mc-hero-domain {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--mc-border-subtle);
}

body:not(.mc-portal-body) .mc-hero-domain-lead {
    font-size: 1.125rem;
}

/* Inside the card the search field needs a visible edge rather than a shadow. */
body:not(.mc-portal-body) .mc-hero-domain .mc-search--hero {
    box-shadow: none;
    border: 1px solid var(--mc-border-strong);
}

/* Assurance row: real credentials the site already states, as quiet checks. */
.mc-hero-assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mc-space-2) var(--mc-space-6);
    margin: var(--mc-space-4) 0 0;
    padding: var(--mc-space-4) 0 0;
    border-top: 1px solid var(--mc-border-subtle);
    list-style: none;
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
    font-weight: 600;
}

.mc-hero-assurance li {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
}

.mc-hero-assurance .icon {
    width: 18px;
    height: 18px;
    color: #128c4a;
}

[data-bs-theme="dark"] .mc-hero-assurance .icon {
    color: #25d366;
}

/* Floating chat shortcut, bottom-right; "Top" button stacks above it. */
.mc-float-chat {
    position: fixed;
    right: var(--mc-space-4);
    bottom: var(--mc-space-4);
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border-radius: 50%;
    background: #128c4a;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
    transition: background-color var(--mc-duration-fast) var(--mc-ease-standard),
        transform var(--mc-duration-fast) var(--mc-ease-standard);
}

.mc-float-chat:hover,
.mc-float-chat:focus-visible {
    background: #0e7a3f;
    color: #ffffff;
    transform: translateY(-2px);
}

.mc-float-chat:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #128c4a;
}

.mc-float-chat .icon {
    width: 26px;
    height: 26px;
}


/* Icon-only: the label is for assistive tech and tooltips. */
.mc-float-chat-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    body:not(.mc-portal-body) .mc-hero--dark {
        padding-block: var(--mc-space-8) var(--mc-space-10);
    }

    body:not(.mc-portal-body) .btn.mc-hero-cta {
        width: 100%;
        padding-inline: var(--mc-space-4);
    }

    body:not(.mc-portal-body) .mc-hero-domain {
        padding: var(--mc-space-5) var(--mc-space-2) var(--mc-space-4);
        border-radius: 12px;
    }

    .mc-hero-assurance {
        flex-direction: column;
        align-items: center;
        gap: var(--mc-space-2);
    }
}

/* Back-to-top placement and reveal (v1.7.1). Bottom-right like the chat button; when the chat button is
   present it sits to its LEFT on the same baseline so the two never overlap. */
.mc-to-top {
    right: var(--mc-space-4) !important;
    bottom: var(--mc-space-4) !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 1039;
    transition: opacity var(--mc-duration-normal) var(--mc-ease-standard),
        transform var(--mc-duration-normal) var(--mc-ease-standard),
        visibility 0s linear 0s;
}

body:has(.mc-float-chat) .mc-to-top {
    right: calc(var(--mc-space-4) + 3.5rem + var(--mc-space-3)) !important;
}

.mc-to-top.mc-to-top--ready:not(.mc-to-top--show) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--mc-duration-normal) var(--mc-ease-standard),
        transform var(--mc-duration-normal) var(--mc-ease-standard),
        visibility 0s linear var(--mc-duration-normal);
}

@media (prefers-reduced-motion: reduce) {
    .mc-to-top,
    .mc-to-top.mc-to-top--ready:not(.mc-to-top--show) {
        transition: none;
        transform: none;
    }
}

/* Hero actions (v1.7.2): two simple, same-size pill buttons - filled primary, outlined secondary. */
body:not(.mc-portal-body) .mc-hero-actions--lead .btn.mc-hero-cta {
    min-height: 3.5rem;
    padding: 0 var(--mc-space-10);
    border-radius: 999px;
    font-size: var(--mc-text-lg);
    font-weight: 600;
    box-shadow: none;
    transform: none;
}

body:not(.mc-portal-body) .mc-hero-actions--lead .btn.mc-hero-cta:hover,
body:not(.mc-portal-body) .mc-hero-actions--lead .btn.mc-hero-cta:focus-visible {
    box-shadow: none;
    transform: none;
}

body:not(.mc-portal-body) .btn.mc-hero-cta--secondary {
    color: var(--mc-brand-navy);
    background: transparent;
    border: 1.5px solid var(--mc-brand-navy);
}

body:not(.mc-portal-body) .btn.mc-hero-cta--secondary:hover,
body:not(.mc-portal-body) .btn.mc-hero-cta--secondary:focus-visible {
    color: var(--mc-brand-navy);
    background: rgba(34, 49, 94, 0.06);
    border-color: var(--mc-brand-navy);
}

body:not(.mc-portal-body) .btn.mc-hero-cta--secondary:focus-visible {
    outline: 3px solid var(--mc-brand-coral);
    outline-offset: 2px;
}

[data-bs-theme="dark"] body:not(.mc-portal-body) .btn.mc-hero-cta--secondary {
    color: #ffffff;
    border-color: var(--mc-brand-blue-grey);
}

[data-bs-theme="dark"] body:not(.mc-portal-body) .btn.mc-hero-cta--secondary:hover,
[data-bs-theme="dark"] body:not(.mc-portal-body) .btn.mc-hero-cta--secondary:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

@media (max-width: 767.98px) {
    body:not(.mc-portal-body) .mc-hero-actions--lead {
        width: 100%;
        max-width: 480px;
    }

    body:not(.mc-portal-body) .mc-hero-actions--lead .btn.mc-hero-cta {
        width: 100%;
        padding-inline: var(--mc-space-4);
    }
}

/* Back-to-top matches the chat button's 56px height (a shorter .btn rule was winning), so the two
   share one vertical centre line. */
a.btn.mc-to-top {
    height: 3.5rem;
    min-height: 3.5rem;
    padding-block: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-2);
}

/* Domain search on phones (v1.7.6): the one-row capsule squeezed the TLD to ~90px (".accountants" was
   cut off) and left dead space before the search button. Stack it instead: the domain name gets a
   full-width field, and the TLD picker and search button share the second row, so every TLD is
   readable and the button sits right beside it. Same form, fields and button; layout only. */
@media (max-width: 767.98px) {
    body:not(.mc-portal-body) .mc-hero-domain .mc-search--hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--mc-space-3);
        max-width: none;
        margin-top: var(--mc-space-2);
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body:not(.mc-portal-body) .mc-search--hero .mc-search-field {
        grid-column: 1 / -1;
        min-height: 3.5rem;
        border: 1px solid var(--mc-border-strong);
        border-radius: 12px;
        padding-inline: var(--mc-space-4);
        font-size: 16px;
        background-color: var(--bs-body-bg);
    }

    body:not(.mc-portal-body) .mc-search--hero .mc-search-field:focus {
        border-color: var(--mc-brand-navy);
        box-shadow: 0 0 0 3px rgba(34, 49, 94, 0.18);
    }

    body:not(.mc-portal-body) .mc-search--hero .mc-search-tld {
        grid-column: 1;
        width: 100%;
        max-width: none;
        min-height: 3.5rem;
        border: 1px solid var(--mc-border-strong);
        border-radius: 12px;
        padding-inline: var(--mc-space-4) 2.5rem;
        font-size: 16px;
        font-weight: 600;
        background-color: var(--bs-body-bg);
        text-overflow: ellipsis;
    }

    body:not(.mc-portal-body) .mc-search--hero .mc-search-submit {
        grid-column: 2;
        width: 3.5rem;
        min-width: 3.5rem;
        height: 3.5rem;
        min-height: 3.5rem;
        margin: 0;
        border-radius: 12px;
    }
}

/* TLD picker chevron (the native arrow was being dropped), so the control reads as a dropdown. */
body:not(.mc-portal-body) .mc-search--hero .mc-search-tld {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.25rem;
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2322315e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] body:not(.mc-portal-body) .mc-search--hero .mc-search-tld {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c1cae2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px) {
    body:not(.mc-portal-body) .mc-search--hero .mc-search-tld {
        padding-inline-end: 2.75rem;
        background-position: right 1rem center;
    }
}

/* Back-to-top (v1.7.9): text-only control with no background. #22315E on light pages, white in dark
   mode. Size, placement and reveal behaviour are unchanged. */
a.btn.mc-to-top,
a.btn.mc-to-top:hover,
a.btn.mc-to-top:focus-visible,
a.btn.mc-to-top:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #22315e !important;
    font-weight: 700;
    text-decoration: none;
}

a.btn.mc-to-top:focus-visible {
    outline: 3px solid #22315e;
    outline-offset: 2px;
}

/* Over a navy section (footer, promise strip) the label is white so it stays visible. */
a.btn.mc-to-top.mc-to-top--on-navy,
a.btn.mc-to-top.mc-to-top--on-navy:hover,
a.btn.mc-to-top.mc-to-top--on-navy:focus-visible,
a.btn.mc-to-top.mc-to-top--on-navy:active {
    color: #ffffff !important;
}

a.btn.mc-to-top.mc-to-top--on-navy:focus-visible {
    outline-color: #ffffff;
}

[data-bs-theme="dark"] a.btn.mc-to-top,
[data-bs-theme="dark"] a.btn.mc-to-top:hover,
[data-bs-theme="dark"] a.btn.mc-to-top:focus-visible,
[data-bs-theme="dark"] a.btn.mc-to-top:active {
    color: #ffffff !important;
}

[data-bs-theme="dark"] a.btn.mc-to-top:focus-visible {
    outline-color: #ffffff;
}

/* Domain search card: a little wider on tablet, laptop and desktop (phones are unchanged). */
@media (min-width: 768px) {
    body:not(.mc-portal-body) .mc-hero .mc-hero-inner {
        max-width: 1040px;
    }

    body:not(.mc-portal-body) .mc-hero-domain {
        width: min(100%, 960px);
    }
}

/* Cloud catalogue palette (v1.8.0). */
:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-storefront-band--catalogue {
    background: #ffffff;
    border-top-color: var(--mc-brand-tint);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) :is(.mc-catalogue-title, .mc-catalogue-name) {
    color: var(--mc-brand-navy);
}

:root:not([data-bs-theme="dark"]) body:not(.mc-portal-body) .mc-catalogue-group-title {
    border-bottom-color: var(--mc-brand-blue-grey);
}