/* ==========================================================================
   buyxid-v2.css - redesigned "Upgrade to xPal Gold" landing page.
   Namespaced under .bxg-* so the legacy gold.css rules (and the per-language
   pixel overrides injected by buyxid-multilingual.js) never apply here.
   gold.css is still loaded for the shared header/footer/modal/FAQ styling.
   ========================================================================== */

:root {
    --bxg-bg: #000;
    --bxg-card: #0E0E0E;
    --bxg-line: #1F1F1F;
    --bxg-cream: #FBF8D8;
    --bxg-gold: #D7C478;
    --bxg-feature: #C8C5A6;
    --bxg-muted: rgba(255, 255, 255, 0.55);
    --bxg-radius: 32px;
    /* The hero + the two cards read as ONE section, and the mockup gives that
       section equal breathing space above it (header -> hero) and below it
       (cards -> divider). Both come from this single token so they can never
       drift apart. */
    --bxg-section-gap: clamp(28px, min(4.5vw, 7.2vh), 78px);
    /* Width of the hero + cards block. It narrows as the viewport gets
       shorter so the two cards keep the mockup's proportions instead of
       stretching flat (see .bxg-layout). The divider and legal copy below
       read off the same token so the whole page keeps one column width. */
    --bxg-section-width: min(1296px, 145vh);
    /* The feature rows are the page's tightest fit: "Unlimited Secure Audio
       Calling outgoing/incoming" has to stay on ONE line inside a column that
       is roughly a third of --bxg-section-width. Deriving type/icon/gap from
       the same vw+vh pair that drives the section width keeps that ratio
       constant, so the row can never wrap - stepping them separately in the
       max-height tiers is what let the two sizes drift apart and wrap. */
    --bxg-feat-font: clamp(12px, min(1.1vw, 1.5vh), 14.5px);
    --bxg-feat-icon: clamp(17px, min(1.9vw, 2.55vh), 26px);
    --bxg-feat-gap: clamp(8px, min(1.05vw, 1.4vh), 15px);
}

/* ------------------------------------------------------- viewport shell --
   The approved design fills exactly one viewport: the two cards share a
   common bottom edge and the payment/legal strip sits at the bottom of the
   screen with no dead black band under it. That is driven from here -
   .buyxid-container is a full-height flex column and <main> is the only item
   allowed to grow, so every pixel left over after the header and the footer
   strip is handed to the cards instead of piling up at the bottom.
   Everything inside the cards then distributes that space (see the
   align-content / justify-content rules further down) rather than the page
   being pinned to a fixed height. <footer> is a sibling AFTER this container,
   so it stays below the fold until the visitor scrolls. */
.buyxid-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

    .buyxid-container > header {
        flex: 0 0 auto;
    }

/* ---------------------------------------------------------------- shell -- */
/* Base sizing here targets the approved mockup's own proportions on a
   generous desktop viewport (roughly 1920x1080 and taller/1050+). The
   max-height tiers near the end of this file compact type/padding on shorter
   desktop and laptop screens; vertical *distribution* is handled by flex, so
   those tiers only ever shrink things, they never re-position anything. */
.bxg-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--bxg-bg);
    padding-top: var(--bxg-section-gap);
    padding-bottom: 0;
}

    .bxg-page > .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

/* ----------------------------------------------------------------- hero --
   Everything here scales continuously with viewport height rather than being
   stepped down by the max-height tiers at the end of the file. The hero is
   the one block whose proportions relative to the cards are most obvious when
   they drift, and hard steps made it collapse to a fraction of its mockup
   size on a viewport only slightly under a breakpoint. The clamp maxima are
   the mockup's own values at ~1080px of viewport height. */
.bxg-hero {
    display: flex;
    align-items: center;
    gap: clamp(16px, min(1.9vw, 3vh), 30px);
    margin-bottom: clamp(18px, min(2.6vw, 4.1vh), 40px);
}

/* No frame of its own: xpal-gold-nbx.webp already IS a rounded dark tile with
   the gold bubble on it, so a wrapper background/border just draws a second
   box around the artwork. The badge is only a sizing box. */
.bxg-hero-badge {
    flex: 0 0 auto;
    display: block;
    width: clamp(56px, min(6.6vw, 10.5vh), 103px);
}

    .bxg-hero-badge img {
        width: 100%;
        height: auto;
        display: block;
    }

.bxg-hero-text {
    min-width: 0;
}

.bxg-page h1#buyxid-1 {
    margin: 0;
    font-weight: 400;
    color: var(--bxg-cream);
    letter-spacing: -0.2px;
}

/* buyxid-multilingual.js splits the h1 into .buyxid-line-1 (title) and
   .buyxid-line-2 (tagline). Both are re-declared here because gold.css
   sizes them for the old layout. */
.bxg-page h1#buyxid-1 .buyxid-line-1 {
    display: block;
    font-size: clamp(1.5rem, min(2.6vw, 4.2vh), 2.5rem);
    line-height: 1.15;
    margin-bottom: 0.3rem;
}

.bxg-page h1#buyxid-1 .buyxid-line-2 {
    display: block;
    font-size: clamp(0.9rem, min(1.45vw, 2.3vh), 1.375rem);
    font-weight: 300;
    line-height: 1.3;
    margin-top: 0;
    color: var(--bxg-muted);
}

.bxg-page h1#buyxid-1 .bxg-brand {
    color: var(--bxg-gold);
    font-weight: 500;
}

/* --------------------------------------------------------------- layout -- */
/* The plan card is a sibling grid item to .bxg-col-main (hero + features),
   not to the features card itself, so with align-items:stretch its top lines
   up with the hero - visibly higher than the features card, which sits below
   the hero inside the left column - while both cards stretch to the SAME
   bottom edge. That asymmetric top / shared bottom is the design, not a bug. */
/* The two columns hold a fixed 2.36:1 width ratio at every size, and the
   section as a whole narrows with viewport height (--bxg-section-width).
   Without that, a full-width 1296px section on a 700px-tall screen stretches
   both cards flat: the features card lands near 2.6:1 where the mockup is
   ~1.7:1, and the plan card goes almost square. 145vh is the narrowest the
   section can go while --bxg-feat-font (which scales off the same vw/vh
   pair) still keeps the longest feature row on one line. Lower either one
   and re-measure that row - see the note on --bxg-feat-font. */
.bxg-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 2.36fr) minmax(0, 1fr);
    gap: clamp(24px, 3.4vh, 36px);
    align-items: stretch;
    width: 100%;
    max-width: var(--bxg-section-width);
    margin-inline: auto;
}

.bxg-col-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bxg-card {
    border: 1px solid var(--bxg-line);
    border-radius: var(--bxg-radius);
}

/* Features gets a warm gold wash bleeding in from the RIGHT edge at mid
   height - it lifts the empty right-hand side of the two-column list and
   carries the eye across to the plan card. The plan card stays a flatter,
   more transparent panel so the two read as distinct surfaces rather than
   two copies of the same card. */
.bxg-features {
    background:
        radial-gradient(85% 115% at 100% 50%, rgba(191, 149, 64, 0.17) 0%, rgba(191, 149, 64, 0) 62%),
        var(--bxg-card);
}

.bxg-plans {
    background-color: rgba(13, 13, 13, 0.55);
}

/* ------------------------------------------------------------- features -- */
.bxg-features {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 34px 34px 32px;
}

.bxg-features-intro {
    margin: 0 0 22px;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--bxg-cream);
    opacity: 0.9;
}

/* align-content:space-between is what gives the list the mockup's airy ~48px
   row rhythm: the eight rows spread across whatever height the stretched card
   ended up with, so the spacing grows or tightens with the viewport instead
   of the list clumping at the top of a tall card. row-gap is the floor. */
.bxg-feature-list {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: space-between;
    column-gap: 32px;
    row-gap: 6px;
}

.bxg-feature {
    display: flex;
    align-items: center;
    gap: var(--bxg-feat-gap);
    color: var(--bxg-feature);
    font-size: var(--bxg-feat-font);
    line-height: 1.35;
}

    .bxg-feature img {
        flex: 0 0 auto;
        width: var(--bxg-feat-icon);
        height: var(--bxg-feat-icon);
        object-fit: contain;
    }

    .bxg-feature a,
    .bxg-feature a:hover {
        color: inherit;
        text-decoration: none;
    }

/* "And much more..." closes the list with no icon; the icon width + gap of a
   normal row is reserved with padding so its text still lines up under the
   other rows' text. */
.bxg-feature--more {
    padding-left: calc(var(--bxg-feat-icon) + var(--bxg-feat-gap));
    opacity: 0.6;
    font-style: italic;
}

/* Left-aligned and rule-less in the approved design - gold.css centres it for
   the old layout, so both have to be overridden here. */
.bxg-features .transferableText {
    margin: 30px 0 0;
    padding-top: 0;
    border-top: 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bxg-feature);
    opacity: 0.75;
}

/* ------------------------------------------------------------ plan card -- */
/* The design drops the plan card ~42px below the top of the hero badge - far
   enough to read as its own element, still clearly above the features card.
   Because the grid stretches both columns to a shared bottom, this margin
   shortens the card from the top only; the bottom edge does not move. */
.bxg-plans {
    display: flex;
    flex-direction: column;
    margin-top: clamp(14px, min(2.6vw, 4.1vh), 42px);
    padding: 30px 26px 32px;
}

.bxg-plans h3#preferred {
    flex: 0 0 auto;
    margin: 0 0 18px;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--bxg-cream);
}

/* The three plans split the card's remaining height evenly and centre their
   own contents, so the hairlines between them land at even intervals however
   tall the card is stretched. */
.bxg-plan {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    text-align: center;
}

    .bxg-plan + .bxg-plan {
        border-top: 1px solid var(--bxg-line);
    }

/* gold.css positions #buyxid-21 / #buyxid-26 with translateY(-47px) for the
   old absolutely-placed labels; neutralise that in the new flow layout. */
.bxg-page #buyxid-21,
.bxg-page #buyxid-26,
.bxg-page #buyxid-22,
.bxg-page #buyxid-27 {
    position: static;
    transform: none;
}

.bxg-plan-label {
    margin: 0 0 14px;
    font-size: 15.5px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.35;
    color: #FBF6CF;
    opacity: 0.9;
}

/* The lifetime label sets on one line here (buyxid-multilingual.js turns the
   <br> its i18n strings hard-code into a space); this only keeps a longer
   locale's wrap tidy. */
.bxg-plan-label--life {
    text-wrap: balance;
}

.bxg-plan a,
.bxg-plan a:hover {
    text-decoration: none;
}

/* the gold price pill -------------------------------------------------- */
.bxg-pill-wrap {
    position: relative;
    display: inline-block;
}

.bxg-pill {
    position: relative;
    /* prices are always "$99.99 USD", left to right, even in RTL locales */
    direction: ltr;
    display: flex;
    /* align-items:baseline sits "USD" on the price's baseline, but on its own
       it also parks the single flex line at the TOP of the pill, so anything
       min-height adds pools underneath and the price rides high. Turning wrap
       on lets align-content:center centre that line (and, on the lifetime
       pill, the pair of lines) in the pill's full height. */
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    justify-content: center;
    gap: 4px;
    min-width: 212px;
    min-height: 55px;
    padding: 10px 30px;
    border-radius: 999px;
    cursor: pointer;
    background-image: url(https://dz5tyoxl8h44g.cloudfront.net/nu-gold-button.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 24px rgba(226, 200, 120, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .bxg-pill:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 26px rgba(226, 200, 120, 0.34);
    }

/* Lifetime pill stacks the struck original price above the current one.
   flex-wrap + a full-width first child keeps "$99.99 USD" on one row. */
.bxg-pill--life {
    flex-wrap: wrap;
    padding-top: 6px;
    padding-bottom: 8px;
}

    .bxg-pill--life .bxg-price-old {
        flex: 0 0 100%;
        text-align: center;
        line-height: 1.1;
    }

.bxg-price {
    font-family: "Google Sans", Arial, sans-serif;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: #1C1902;
}

.bxg-pill--life .bxg-price {
    font-size: 1.65rem;
}

.bxg-cur {
    font-family: "Google Sans", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1C1902;
    opacity: 0.75;
}

/* Struck-through original price shown inside the lifetime pill. The
   .discountSpan wrapper is re-injected by the i18n string, so it is styled
   here as well as in gold.css. */
.bxg-pill .bxg-price-old {
    display: inline-block;
}

.bxg-pill .discountSpan {
    font-family: "Google Sans", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.6) !important;
    text-decoration: line-through;
    text-decoration-color: #D93636;
}

/* save badges ---------------------------------------------------------- */
/* Both badges hang off the pill's top-right corner, overlapping the pill and
   spilling outside it - the negative right offsets are measured against the
   plan card's 26px inner padding, so neither can clip the card edge. */
.bxg-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.2px;
    color: #000;
    white-space: nowrap;
}

    .bxg-badge p {
        margin: 0;
        color: #000;
    }

.bxg-badge--year {
    top: -14px;
    right: -26px;
    flex-direction: row;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 13px;
    background-color: #F3C77B;
}

/* assets/Save50.png is the stepped green badge as artwork - SAVE over 50% with
   its own notched silhouette, which CSS was only approximating. The two spans
   inside stay in the DOM and are hidden with font-size:0: buyxid-multilingual
   .js assigns to #buyxid-30 / #buyxid-31 WITHOUT a null guard, so removing
   them would throw and abort the rest of updateContent(). */
.bxg-badge--life {
    top: -5px;
    right: -34px;
    width: clamp(54px, min(4.6vw, 7.6vh), 84px);
    aspect-ratio: 363 / 258;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("../assets/Save50.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
    color: transparent;
}

    .bxg-badge--life .bxg-badge-lbl,
    .bxg-badge--life .bxg-badge-pct {
        font-size: 0;
        color: transparent;
    }

/* sub-notes under a pill ----------------------------------------------- */
.bxg-plan-note {
    margin: 14px 0 0;
    font-family: "Google Sans", Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: #fff6d6;
    opacity: 0.75;
}

/* block-level flex, not inline-flex: an inline-level note would sit beside
   the price pill whenever the card is wide enough to fit both. */
.bxg-plan-note.bxg-limited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 1;
}

    .bxg-plan-note.bxg-limited .fa-diamond {
        font-size: 8px;
        color: var(--bxg-gold);
    }

.bxg-learn-more {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: #7E9BEA;
    text-decoration: none;
}

    .bxg-learn-more:hover {
        color: #9DB3F0;
        text-decoration: underline;
    }

/* ------------------------------------------------ multi-xID upsell row -- */
.bxg-page .business-upgrade {
    margin-top: 26px;
}

/* ------------------------------------------------------- footer strips --
   Everything below the cards is flex:0 - it keeps its natural height and is
   pushed to the bottom of the viewport by <main> growing above it. */
.buyxid-container .midLineSep,
.buyxid-container .paymentIcons,
.buyxid-container .cancelSubs {
    flex: 0 0 auto;
}

/* Full container width in the design, not the 45% gold.css gives it. The top
   margin is the section gap again, so the space below the cards matches the
   space above the hero. */
.buyxid-container .midLineSep {
    width: 100%;
    max-width: var(--bxg-section-width);
    margin: var(--bxg-section-gap) auto 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 1;
}

.buyxid-container .paymentIcons {
    margin-top: 42px !important;
}

.buyxid-container .cancelSubs {
    margin-top: 30px;
    margin-bottom: 46px;
}

    /* gold.css caps this at 650px, which forces the legal copy into four
       cramped lines; the design sets it as two wide lines. */
    .buyxid-container .cancelSubs .sub {
        max-width: min(1250px, calc(var(--bxg-section-width) * 0.87));
        margin-left: auto;
        margin-right: auto;
        font-size: 13px;
        line-height: 1.6;
        /* same warm gold as the feature rows above, not gold.css's plain
           white - held a little further back so it stays subordinate */
        color: var(--bxg-feature);
        opacity: 0.7;
    }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1399px) {
    .bxg-layout {
        gap: 26px;
    }

    .bxg-features {
        padding: 30px 30px 28px;
    }

    .bxg-feature-list {
        column-gap: 30px;
    }
}

@media (max-width: 1199px) {
    .bxg-layout {
        gap: 20px;
    }

    .bxg-features {
        padding: 26px 24px 24px;
    }

    .bxg-feature-list {
        column-gap: 22px;
    }

    .bxg-plans {
        padding: 24px 18px 26px;
    }

    .bxg-pill {
        min-width: 190px;
    }

    .bxg-badge--life {
        right: -30px;
    }
}

/* Below 992px the single-viewport goal is dropped: the layout stacks and the
   page is expected to scroll, so the flex-fill rules above are unwound. */
@media (max-width: 991px) {
    .buyxid-container {
        display: block;
    }

    .bxg-page {
        display: block;
        padding-bottom: 8px;
    }

        .bxg-page > .container {
            display: block;
        }

    .bxg-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .bxg-features,
    .bxg-feature-list,
    .bxg-plan {
        flex: 0 1 auto;
    }

    .bxg-feature-list {
        align-content: start;
        row-gap: 10px;
    }

    .bxg-plans {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .bxg-hero {
        gap: 14px;
        margin-bottom: 18px;
    }

    .bxg-feature-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }

    /* single column here, so the row can use full-size type again */
    .bxg-feature {
        font-size: 14px;
        min-height: 34px;
    }

    .bxg-features-intro {
        font-size: 0.94rem;
    }

    .buyxid-container .cancelSubs .sub {
        font-size: 12.5px;
    }
}

@media (max-width: 480px) {
    .bxg-features,
    .bxg-plans {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bxg-pill {
        min-width: 180px;
    }

    .bxg-price {
        font-size: 1.6rem;
    }
}

/* --------------------------------------------- short-viewport compaction --
   Only applies on wide-but-short screens. Vertical *placement* is already
   handled by the flex shell (nothing ever leaves a dead band at the bottom),
   so these tiers only shrink type, icons and padding so the design still fits
   one screen at ~950 / 840 / 720 CSS px of viewport height. Never "fix" a
   short-viewport overflow by editing the base rules - adjust a tier. */
@media (min-width: 992px) and (max-height: 950px) {
    .bxg-feature-list {
        column-gap: 28px;
    }

    .bxg-features {
        padding: 28px 30px 26px;
    }

    .bxg-features-intro {
        margin-bottom: 16px;
        font-size: 1rem;
    }

    .bxg-features .transferableText {
        margin-top: 20px;
        font-size: 13px;
    }

    .bxg-plans {
        padding: 24px 22px 26px;
    }

    .bxg-plans h3#preferred {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .bxg-plan {
        padding: 10px 0;
    }

    .bxg-plan-label {
        margin-bottom: 10px;
    }

    .bxg-pill {
        min-height: 50px;
        padding: 8px 28px;
    }

    .bxg-price {
        font-size: 1.7rem;
    }

    .bxg-plan-note {
        margin-top: 10px;
    }

    .buyxid-container .paymentIcons {
        margin-top: 26px !important;
    }

    .buyxid-container .cancelSubs {
        margin-top: 20px;
        margin-bottom: 28px;
    }
}

@media (min-width: 992px) and (max-height: 840px) {
    .bxg-features {
        padding: 22px 24px 22px;
    }

    .bxg-feature-list {
        column-gap: 24px;
    }

    .bxg-features-intro {
        margin-bottom: 12px;
        font-size: 0.95rem;
    }

    .bxg-features .transferableText {
        margin-top: 14px;
        font-size: 12px;
    }

    .bxg-plans {
        padding: 18px 20px 20px;
    }

    .bxg-plans h3#preferred {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .bxg-plan {
        padding: 6px 0;
    }

    .bxg-plan-label {
        margin-bottom: 8px;
        font-size: 13.5px;
    }

    .bxg-pill {
        min-height: 46px;
        min-width: 196px;
        padding: 6px 24px;
    }

    .bxg-price {
        font-size: 1.5rem;
    }

    .bxg-pill--life .bxg-price {
        font-size: 1.35rem;
    }

    .bxg-plan-note {
        margin-top: 8px;
        font-size: 12.5px;
    }

    .bxg-learn-more {
        margin-top: 6px;
        font-size: 13px;
    }

    .buyxid-container .paymentIcons {
        margin-top: 20px !important;
    }

    .buyxid-container .paymentIcons img {
        width: 60px;
    }

    .buyxid-container .cancelSubs {
        margin-top: 16px;
        margin-bottom: 22px;
    }

        .buyxid-container .cancelSubs .sub {
            font-size: 12.5px;
        }
}

@media (min-width: 992px) and (max-height: 720px) {
    .bxg-features {
        padding: 16px;
    }

    .bxg-feature-list {
        column-gap: 20px;
        row-gap: 2px;
    }

    .bxg-features .transferableText {
        margin-top: 10px;
        font-size: 12px;
    }

    .bxg-plans {
        padding: 14px 16px 16px;
    }

    .bxg-plans h3#preferred {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .bxg-plan-label {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .bxg-pill {
        min-height: 40px;
        min-width: 178px;
        padding: 4px 20px;
    }

    .bxg-price {
        font-size: 1.3rem;
    }

    .bxg-pill--life .bxg-price {
        font-size: 1.15rem;
    }

    .bxg-cur {
        font-size: 0.62rem;
    }

    /* the lifetime badge is artwork now, so only the year chip is text */
    .bxg-badge--year {
        font-size: 11px;
        padding: 4px 9px;
    }

    .bxg-plan-note {
        margin-top: 6px;
        font-size: 11.5px;
    }

    .bxg-learn-more {
        margin-top: 4px;
        font-size: 12px;
    }

    .buyxid-container .paymentIcons {
        margin-top: 16px !important;
    }

    .buyxid-container .paymentIcons img {
        width: 50px;
    }

    .buyxid-container .cancelSubs {
        margin-top: 12px;
        margin-bottom: 16px;
    }

        .buyxid-container .cancelSubs .sub {
            font-size: 11.5px;
            line-height: 1.45;
        }
}

/* ------------------------------------------------- "Learn More" modal -- */
/* gold.css sets .modal { top: 13% }. Bootstrap's .modal is a fixed, full-
   height box, so shifting it down leaves its bottom 13% hanging below the
   viewport - the dialog centres inside that shifted box and its lower half
   gets cut off, which is worse the shorter the screen. Reset the offset and
   let the dialog (now .modal-dialog-centered.modal-dialog-scrollable) size
   itself to the viewport and scroll its own body when the content is taller.
   Only buyxid loads this file, and #learnMoreModal only exists here, so this
   cannot reach the other gold pages' modals. */
#learnMoreModal {
    top: 0;
}

    /* horizontal padding so the copy never touches the rounded edge once the
       dialog is narrower than .modal-body's 550px cap */
    #learnMoreModal .modal-body {
        padding: 40px 20px;
    }

    /* .close-icon is absolute against .modal-content, which is the part that
       does NOT scroll, so it stays pinned while the body scrolls. Pull it
       inside the content box so it can't sit under the scrollbar. */
    #learnMoreModal .close-icon {
        right: 14px;
        transform: none;
        z-index: 2;
    }

/* Short viewports: trim the modal's own vertical rhythm so it fits without
   scrolling for as long as possible. */
@media (max-height: 820px) {
    #learnMoreModal .modal-body {
        padding: 30px 20px;
    }

    #learnMoreModal .modal-content .lifetime-main-text {
        font-size: 1.5rem;
    }

    #learnMoreModal .modal-content .lifetime-bottom-text {
        margin-bottom: 16px;
    }

    #learnMoreModal .modal-content .normal-text {
        padding: 0 30px;
    }

        #learnMoreModal .modal-content .normal-text.p2.pay-again {
            margin-bottom: 16px;
        }

        #learnMoreModal .modal-content .normal-text.p3 {
            font-size: 17px;
            margin-bottom: 14px;
        }

    #learnMoreModal .modal-content img {
        width: 42px;
    }

    #learnMoreModal .modal-content .btnDesignMonthGold {
        height: 54px;
        margin-bottom: 14px;
    }
}

/* ------------------------------------------------------------------ RTL -- */
/* dir="rtl" already reverses flex rows, so .bxg-hero / .bxg-feature need no
   override - only the absolutely placed badges have to be mirrored. */
html[dir="rtl"] .bxg-badge--year,
body.rtl .bxg-badge--year {
    right: auto;
    left: -26px;
}

html[dir="rtl"] .bxg-badge--life,
body.rtl .bxg-badge--life {
    right: auto;
    left: -34px;
}

html[dir="rtl"] .bxg-features .transferableText,
body.rtl .bxg-features .transferableText {
    text-align: right;
}