/*
 * Vertical space for section wrappers the house sheet never styled.
 *
 * THE BUG. `.common-support-bxes` — the four-icon value band — has no rule anywhere in style.css
 * or responsive.css. Only `.common-support-bx` (singular, the card inside it) does. So the band
 * sits at zero padding on the eight pages that use the class bare, and its icons butt straight up
 * against whatever precedes them. On /iptv-billing-software that is the purple gradient banner,
 * whose own 100px of bottom padding is INSIDE the purple, so the icons touch the colour edge.
 *
 * IT IS INHERITED, NOT INTRODUCED. The legacy documents carry the same markup, load the same two
 * stylesheets, and define nothing for the class either — checked, including their inline <style>
 * blocks, which are byte-for-byte intact in the rebuild. Three of the eleven pages using the class
 * write `common-support-bxes section-pad pt-0`, which is the same admission: somebody reached for
 * the spacing utility because the class carries none.
 *
 * TOP ONLY. Every one of these bands is followed by a `.section-pad`, which already brings 100px
 * of its own. Giving them a bottom too would put 200px between two bands that want 100.
 *
 * THE SCALE IS THE HOUSE SCALE, copied from `.section-pad` across the same breakpoints, so these
 * sections breathe exactly like every other one rather than to a number invented here. `pt-0`
 * still wins wherever the design deliberately wants a flush join: Bootstrap ships it !important.
 *
 * A SEPARATE FILE because config/rendering.php calls style.css and responsive.css frozen
 * artifacts — style.css declares .main-nav .ely-dropdown .mega-menu twice and depends on source
 * order, so a rule-merging edit changes rendering. This is additive and cannot do that.
 */

.common-support-bxes,
.comparison-sec {
    padding-top: 100px;
}

@media (max-width: 1340px) {
    .common-support-bxes,
    .comparison-sec {
        padding-top: 60px;
    }
}

@media (max-width: 767px) {
    .common-support-bxes,
    .comparison-sec {
        padding-top: 40px;
    }
}

@media (max-width: 580px) {
    .common-support-bxes,
    .comparison-sec {
        padding-top: 20px;
    }
}

/* ==== THE DOMAIN TICKER IN THE HOME BANNER ================================
 *
 * TWO BUGS, ONE CAUSE EACH, both visible in the same strip of chips.
 *
 * 1. NO SPACE BELOW IT WHEN THE BANNER STACKS.
 *
 * The home banner is two `col-lg-6` columns: the search box, its results slot and this ticker on
 * the left, the Pro Plan card on the right. Below 992px Bootstrap stacks them, the card lands
 * directly under the ticker, and nothing anywhere carries a margin to separate the two - there is
 * no `.domain-carousel` rule in style.css or responsive.css at all, and `.banner-price-box` has
 * padding but no margin. So the white card butts straight against the chips on every phone.
 *
 * Only while stacked. Above 992px the two columns sit side by side and a bottom margin here would
 * push the banner taller for nothing. 30px because that is the card's own padding, so the gap
 * reads as one step of the same rhythm rather than a number invented here.
 *
 * The results slot above it already carries `margin-bottom: 20px` (style.css) and now ships
 * hidden until a search, so it contributes nothing to this gap.
 *
 * 2. `.com$799` WITH NO SPACE, AND A RAISED `/yr`.
 *
 * style.css styles `.domains-list-name h4 .domain` and `.domains-list-name h4 sup` - h4 only. The
 * blade renders an `h3`. The base rule at style.css:660 was migrated to cover both (`h4, h3`) and
 * these two were not, so on every chip the TLD loses its `margin-right: 5px` and runs into the
 * price, and the suffix keeps the browser's default raised `sup` instead of sitting on the
 * baseline. Same declarations as the h4 rules, applied to the element actually rendered.
 */

@media (max-width: 991px) {
    .domain-carousel {
        margin-bottom: 30px;
    }
}

.domains-list-name h3 .domain {
    font-size: 14px;
    color: #6b7280;
    margin-right: 5px;
    font-weight: normal;
}

.domains-list-name h3 sup {
    top: auto;
    bottom: 0;
    color: #5e5e5e;
}

/* ==== FOOTER OVERFLOW ROW ==================================================
 *
 * The four footer columns held 46 links - Hosting 13, Solutions 14, Company 16, Legal 3 - and
 * they sit SIDE BY SIDE, so the footer was as tall as the LONGEST list. Sixteen rows, however
 * much white space the other three left beside it.
 *
 * Capping every column at six is what shortens it, because it shortens the longest one. The 25
 * links past the cap land here instead: one wrapped row per column they came from, running
 * horizontally, at 13px.
 *
 * The label is a fixed column so the rows line up under one another and the whole block reads as
 * a table of contents rather than four ragged sentences. It stops being a column and sits above
 * its row on narrow screens, where 120px of label would leave nothing for the links.
 */
.ely-footer-more {
    /*
     * Inside .footer-top, not after it. As a sibling the block sat below that element's 80px of
     * bottom padding and added 30px of its own margin on top of it - 110px of empty band between
     * the columns and the first row, which is what the pink box in the report was.
     *
     * Inside, the 80px lands underneath the whole block where it belongs. What is left above the
     * rule is deliberate and small - 30px of margin - rather than the 110px that came of two
     * elements' spacing stacking by accident.
     */
    margin-top: 30px;
    padding: 24px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ely-footer-more__row {
    display: flex;
    align-items: baseline;
    gap: 6px 18px;
    padding: 9px 0;
}

.ely-footer-more__row + .ely-footer-more__row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ely-footer-more__label {
    flex: 0 0 120px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.ely-footer-more ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    min-width: 0;
}

.ely-footer-more li { display: flex; align-items: center; }

/* Drawn by CSS so the markup stays a plain list and a screen reader still hears a list. */
.ely-footer-more li:not(:last-child)::after {
    content: '';
    width: 3px;
    height: 3px;
    margin: 0 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.26);
}

.ely-footer-more a {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    white-space: nowrap;
}

.ely-footer-more a:hover,
.ely-footer-more a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .ely-footer-more { padding-top: 18px; }

    .ely-footer-more__row {
        display: block;
        padding: 11px 0;
    }

    .ely-footer-more__label { display: block; margin-bottom: 7px; }
    .ely-footer-more a { font-size: 12.5px; white-space: normal; }
    .ely-footer-more li:not(:last-child)::after { margin: 0 9px; }
}

/*
 * ON A PHONE IT COLLAPSES, because the columns above it already do.
 *
 * responsive.css hides `.footer-box ul` below 580px and main.js toggles it on a tap, which is why
 * the four-column footer measured 884px on a 390px screen rather than the 1400 its links would
 * need. A row that ignored that left 25 links open underneath four collapsed columns - measured
 * at 1300px. Same breakpoint, same behaviour; ely-interactions.js does the toggling.
 */
@media (max-width: 580px) {
    .ely-footer-more__row {
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ely-footer-more__row:first-child { border-top: 0; }

    .ely-footer-more__label {
        position: relative;
        margin: 0;
        padding: 13px 26px 13px 0;
        font-size: 13px;
        letter-spacing: 0.04em;
        text-transform: none;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
    }

    .ely-footer-more__label::after {
        content: '+';
        position: absolute;
        top: 50%;
        right: 4px;
        transform: translateY(-50%);
        font-size: 17px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.55);
    }

    .ely-footer-more__row.isOpen .ely-footer-more__label::after { content: '\2212'; }

    .ely-footer-more ul { display: none; padding: 2px 0 12px; }
    .ely-footer-more__row.isOpen ul { display: flex; }
}

/* ==== BLOG CARDS ===========================================================
 *
 * The card is one big link, so the anchor must not repaint the heading and the excerpt in link
 * blue with an underline through them.
 *
 * The pasted markup this replaced did it with style="color: inherit; text-decoration: none" on
 * every anchor. BlockRenderTest rejects an inline style in any block partial, and rightly: the
 * CSP is hash-based, and style-src-attr 'unsafe-inline' is only there because the frozen sheet
 * needs it. New markup should not add to that.
 */
.blog-box > a {
    color: inherit;
    text-decoration: none;
}

/* ==== TEXT ON THE GRADIENT BAND ============================================
 *
 * Found by screenshotting every section of all 57 published pages and sampling the pixels around
 * each line of text, rather than by reading the stylesheet - which had been wrong in both
 * directions. A CSS-only check flagged 165 elements, most of them headings that sit on the white
 * curve images laid over the band and read perfectly well; it missed the ones the owner actually
 * reported. Measured against real pixels: 35 elements below 3:1, most below 2:1.
 *
 * Each rule names the reason it exists, because each is a different fault.
 */

/*
 * A section header set to tone "light" never went light. The partial puts `text-white` on the
 * wrapper, and style.css colours `.section-header h2` and `.section-header p` directly, so the
 * heading kept its navy on the purple band. "Powered by cPanel" on /web-hosting, and any light
 * header an editor sets from now on.
 */
.section-header.text-white h2,
.section-header.text-white h3,
.section-header.text-white h5,
.section-header.text-white p {
    color: #fff;
}

/*
 * A zig-zag row placed on the band. style.css only ever styles zig-zag copy for a white section,
 * so on the gradient it stayed navy - "Manage IPTV billing with the WHMCS panel" at 1.67:1.
 */
.bg-gradient-color .zig-zag-content h2,
.bg-gradient-color .zig-zag-content h3,
.bg-gradient-color .zig-zag-content h4,
.bg-gradient-color .zig-zag-content p,
.bg-gradient-color .zig-zag-content li {
    color: #fff;
}

/*
 * Copy written straight into an .elyspace-security container: "Easy Management" on the cloud VPS
 * pages, the migration notes on the web-hosting-in-* pages. The house markup wraps this in
 * `.section-middle-content`; the rebuilt markup does not, so the heading and paragraph float loose
 * in the section.
 *
 * NOT A TEXT COLOUR, because no colour works. How tall the section is decides what lies behind
 * the text: the purple band on the cloud VPS pages, the white bottom curve image on
 * /web-hosting-in-france and /web-hosting-in-uk. White text fixed the first and made the second
 * invisible - measured at 1:1 - and navy did the reverse.
 *
 * So the pair sits on its own white card, which is legible over either, and is what every other
 * piece of copy in this section already sits on.
 */
.elyspace-security > .container > h4 {
    /* Above the section's absolutely positioned curve images, which otherwise paint over the
       card and cut through the heading. */
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 28px 32px 10px;
    color: #2b1f51;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
}

.elyspace-security > .container > h4 + p {
    position: relative;
    z-index: 1;
    margin: 0 0 24px;
    padding: 0 32px 28px;
    color: #524972;
    background-color: #fff;
    border-radius: 0 0 16px 16px;
}

/* A heading with no paragraph after it closes its own card. */
.elyspace-security > .container > h4:not(:has(+ p)) {
    padding-bottom: 28px;
    border-radius: 16px;
}

/*
 * Banners whose rebuilt markup no longer matches the selectors style.css colours them by.
 *   .landing-banner-content styles h2 and p white; the rebuild's hero renders an h1 and li text.
 *   .aff-hero h1 is white; the rebuilt affiliate hero has no .aff-hero wrapper.
 *   .blog-list-header only sets a height; its title took the default navy.
 */
.landing-banner-content h1,
.landing-banner-content ul li,
.affiliate-banner h1,
.affiliate-banner .container > p,
.blog-list-header h1 {
    color: #fff;
}

/* The active crumb took Bootstrap's grey and the links Bootstrap's blue, on a purple band. */
.bg-gradient-color .breadcrumb-item,
.bg-gradient-color .breadcrumb-item.active,
.bg-gradient-color .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.8);
}

.bg-gradient-color .breadcrumb a {
    color: #fff;
}

/*
 * The affiliate page's closing call to action. style.css draws it as a white card -
 * `.aff-final-bx` - pulled up 200px over the band above, and colours its text navy for that card.
 * The rebuilt markup has no .aff-final-bx, so the card is gone and the navy text sits on the
 * purple it overlaps. Drawn on the container instead, only where the card is missing.
 */
.aff-final > .container:not(:has(.aff-final-bx)) {
    max-width: 900px;
    padding: 50px 40px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 0 80px 0 rgb(0 0 0 / 16%);
    text-align: center;
}

/* ==== "POWERED BY CPANEL" ACCORDION ========================================
 *
 * Five pages carry it: /web-hosting, /ai-hosting, /vps-server, /vps-servers, /windows-server.
 * style.css draws each item as a flat white box with a 1px grey border and hides Bootstrap's
 * indicator entirely, so nothing on a closed item says it opens and nothing on the open one says
 * which it is - the only difference between the two is a paragraph of text.
 *
 * House colours only: navy #2b1f51 and #524972 for copy, brand orange #F67A3C for the state that
 * matters. The open item is the one thing marked in orange - its rail and its indicator - so a
 * glance down the list finds it.
 */
.powered-by-cpanel .accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.powered-by-cpanel .accordion-item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px !important;
    background-color: #fff;
    box-shadow: 0 6px 24px rgba(30, 14, 70, 0.12);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* The rail: hidden, and grown in from the top on the open item. */
.powered-by-cpanel .accordion-item::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #F67A3C;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.powered-by-cpanel .accordion-item:has(.accordion-button:not(.collapsed))::before {
    transform: scaleY(1);
}

.powered-by-cpanel .accordion-item:hover {
    border-color: rgba(246, 122, 60, 0.45);
    box-shadow: 0 10px 32px rgba(30, 14, 70, 0.18);
}

.powered-by-cpanel .accordion-button {
    gap: 16px;
    padding: 20px 22px 20px 26px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #2b1f51;
    background: transparent;
    box-shadow: none;
}

.powered-by-cpanel .accordion-button:not(.collapsed) {
    color: #2b1f51;
    background: transparent;
    box-shadow: none;
}

.powered-by-cpanel .accordion-button:focus {
    box-shadow: none;
}

.powered-by-cpanel .accordion-button:focus-visible {
    outline: 2px solid #F67A3C;
    outline-offset: -2px;
}

/*
 * The indicator style.css switched off, back as a round chevron. The SVG is a data URI because
 * the CSP's img-src admits data: and a request per item for a 12px arrow would be absurd.
 */
.powered-by-cpanel .accordion-button::after {
    /*
     * style.css:1240 draws EVERY accordion's indicator as a Font Awesome "+" glyph, absolutely
     * positioned and centred with translateY(-50%). All four are undone here - the glyph, the
     * font, the absolute position and that transform - or the "+" paints on top of this chevron
     * and a rotate() replaces the centring translate, dropping the open item's indicator by half
     * its height below the title.
     */
    content: '';
    position: static;
    font: inherit;
    transform: none;
    display: block;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 50%;
    background-color: #f3effc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232b1f51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.powered-by-cpanel .accordion-button:not(.collapsed)::after {
    content: '';
    transform: rotate(180deg);
    background-color: #F67A3C;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.powered-by-cpanel .accordion-body {
    padding: 0 26px 22px;
    font-size: 15px;
    line-height: 1.65;
    color: #524972;
}

@media (max-width: 575px) {
    .powered-by-cpanel .accordion-button { padding: 16px 16px 16px 20px; font-size: 15px; }
    .powered-by-cpanel .accordion-body { padding: 0 20px 18px; font-size: 14px; }
    .powered-by-cpanel .accordion-button::after { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .powered-by-cpanel .accordion-item,
    .powered-by-cpanel .accordion-item::before,
    .powered-by-cpanel .accordion-button::after { transition: none; }
}

/* A review from a platform with no logo in the corpus: its name, set like a quiet badge. */
.google-logo.ely-review-platform a,
.google-logo.ely-review-platform span {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 32px;
    color: #5b5f73;
    text-decoration: none;
}
.google-logo.ely-review-platform a:hover { color: #4b2bd8; }

/* Ready-made websites gallery (readymade_gallery block). The pasted heading carried
   style="margin-top:14px"; inline styles are not allowed in block partials. */
.ely-rm-heading { margin-top: 14px; }
.ely-rm-summary { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; color: #5b5f73; }
.ely-rm-demo { display: inline-block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #4b2bd8; }
/* The page's own CSS hid the filter row and forced hidden cards visible, because the buttons had
   no script. They work now (ely-interactions.js), so both are undone - only where the block
   rendered the row with its data-ely-rm-filter hook. */
.rm-shell .rm-filters[data-ely-rm-filter] { display: flex; }
.rm-shell .rm-gallery .rm-item[hidden] { display: none !important; }

/* ==== Portfolio project page (/portfolio/{slug}) ==== */
.ely-pf-page .ely-pf-crumbs { margin-bottom: 24px; font-size: 14px; color: #5b5f73; }
.ely-pf-page .ely-pf-crumbs a { color: #4b2bd8; }
.ely-pf-stage { border-radius: 16px; overflow: hidden; border: 1px solid #e6e3f3; background: #f6f5fb; max-height: 720px; overflow-y: auto; }
.ely-pf-stage img { display: block; width: 100%; height: auto; }
.ely-pf-thumbs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.ely-pf-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid #e6e3f3; }
.ely-pf-head-public { text-align: left; margin-bottom: 18px; }
.ely-pf-head-public h1 { font-size: 36px; line-height: 1.2; margin: 6px 0 12px; }
.ely-pf-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F67A3C; }
.ely-pf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.ely-pf-facts div { padding: 12px 14px; border: 1px solid #e6e3f3; border-radius: 12px; }
.ely-pf-facts dt { font-size: 12px; font-weight: 600; color: #5b5f73; text-transform: uppercase; letter-spacing: .06em; }
.ely-pf-facts dd { margin: 2px 0 0; font-weight: 600; color: #1d1b3a; }
.ely-pf-taglist { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ely-pf-taglist li { padding: 4px 12px; border-radius: 999px; background: #f1eefc; color: #4b2bd8; font-size: 13px; font-weight: 600; }
.ely-pf-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ely-pf-cta .ely-pf-ghost { background: transparent; color: #4b2bd8; border: 1px solid #4b2bd8; }
.ely-pf-story { margin-top: 48px; }
.ely-pf-story h2, .ely-pf-more h2 { font-size: 26px; margin-bottom: 14px; }
.ely-pf-story p { color: #3d3b55; line-height: 1.75; }
.ely-pf-more { margin-top: 56px; }
.ely-pf-more-card { display: block; margin-bottom: 20px; border: 1px solid #e6e3f3; border-radius: 14px; overflow: hidden; color: #1d1b3a; font-weight: 600; text-decoration: none; }
.ely-pf-more-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.ely-pf-more-card span { display: block; padding: 12px 14px; }
@media (max-width: 991px) { .ely-pf-head-public { margin-top: 28px; } .ely-pf-head-public h1 { font-size: 28px; } }

.ely-pf-page { padding-top: 140px; }
.ely-pf-page .ely-pf-head-public, .ely-pf-page .ely-pf-head-public * { text-align: left; }
@media (max-width: 991px) { .ely-pf-page { padding-top: 110px; } }

.wd-gal-grid .wd-work[hidden] { display: none !important; }
.ely-pf-page .ely-pf-head-public p { margin-left: 0; margin-right: 0; max-width: none; }

/* Partners page: a lettermark in place of a logo until official partner artwork is supplied. */
.partner-box .ely-partner-mark {
    display: inline-grid;
    place-items: center;
    width: 90px;
    height: 90px;
    margin-bottom: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, #4b2bd8, #7c51fb);
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}
.partner-box .ely-partner-mark--magiz { background: linear-gradient(135deg, #F67A3C, #f5a623); }

/*
 * Domain search: the availability badge in its three answers, and the "checking" state before one.
 *
 * `.domain-save` is style.css's green pill, which is right for "Available" as it stands. The buy
 * link is hidden with visibility, not the hidden attribute: `.domain-buy-btn` sets display, which
 * beats [hidden], and visibility keeps the price from jumping sideways when the answer lands.
 */
.search-domain-box.is-checking .domain-buy-btn { visibility: hidden; }
.domain-price-info .domain-save[data-state="checking"],
.domain-price-info .domain-save[data-state="unknown"] { background: #7c51fb1a; color: #5a3bc4; }
.domain-price-info .domain-save[data-state="taken"] { background: rgb(220 38 38 / 12%); color: #b91c1c; }
.search-domain-box.is-taken h2 { color: #6b6880; text-decoration: line-through; text-decoration-color: rgb(220 38 38 / 45%); }
@media (prefers-reduced-motion: no-preference) {
    .domain-price-info .domain-save[data-state="checking"] { animation: ely-domain-pulse 1.2s ease-in-out infinite; }
}
@keyframes ely-domain-pulse { 50% { opacity: .55; } }

/* The /domain hero's Search buttons: domain.html's own inline style="", as a rule the CSP allows. */
.domain-tabs .search-box .submit-btn { background: linear-gradient(60deg, rgb(238 120 73) 0%, rgba(246, 122, 60, 1) 100%); }

/* Header switchers: the current choice, marked as the dropdown's own hover marks a row. It carried
   class="is-active" with no rule behind it, so the list never showed what was selected. */
.top-header-menu ul li.is-active a { color: #457bff; background-color: #edf2ff; }
.top-header-menu ul li.is-active a span { color: #457bff; }
.dropdown-toggle .ely-current-code { margin-left: 6px; font-weight: 700; letter-spacing: .02em; }

/* "Billed $100 every 2 years" under a per-month price: the same eyebrow as "from only", quieter. */
.price-box .ely-billed { display: block; margin-top: -4px; margin-bottom: 14px; font-size: 14px; opacity: .85; }

/* The project wizard's honeypot: off-screen, as forms/show places its own, without a style="". */
.ely-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Domain results inside the header's mega-menu.
   The panel is position:absolute with no height of its own, so a long answer would run off the
   bottom of the screen with no way to reach it. Cap it and let the list scroll inside the menu;
   the banner search on /domain is unaffected, it has the page to grow into. */
.mega-menu .ely-menu-results { max-height: 46vh; overflow-y: auto; margin-top: 14px; }