:root {
    --fcb-color-black: #000;
    --fcb-color-white: #fff;
    --fcb-color-dark: #272727;
    --fcb-color-gray: rgba(67, 67, 67, 1);
    --fcb-color-light-gray: #F6F6F6;
    --fcb-color-green: #A8FF78;
    --fcb-color-teal: #78FFD6;
    --fcb-gutter: 1.25rem; /* 20px — standard mobile side inset */
    --fcb-space-lg: 1.5rem; /* 24px */
    --fcb-space-xl: 2rem; /* 32px */
    --fcb-radius-sm: 0.5rem; /* 8px — buttons/inputs */
    --fcb-radius-md: 1rem; /* 16px — cards/sections */
    --fcb-radius-lg: 1.875rem; /* 30px — popup card / bottom CTA */
    --fcb-btn-padding: 0.875rem 1.5rem; /* 14px 24px — shared CTA button padding */
}

body {
    margin: 0; /* kills the browser's default ~8px body margin, which otherwise
                  shows up as a gap between the sticky header and the hero */
    overflow-x: hidden;
}

/* This page's own CTAs cover the same job as the global mobile bottom nav,
   which otherwise sits fixed over/near them. */
#footer .mobile_footer {
    display: none !important;
}

.fcb-page {
    direction: rtl;
    font-family: 'Assistant', sans-serif;
    font-size: 1rem;
    color: var(--fcb-color-white);
    margin: 0 var(--fcb-gutter);
}

.desktop {
    display: none !important;
}

/* ---------- Hero ---------- */
/* Full-bleed to the actual viewport width (not just breaking out of .fcb-page's own
   gutter) so the bg video always spans edge-to-edge, on any screen size, regardless
   of any ancestor's own width/padding. */
.fcb-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Hero bg image (mobile + desktop variants, toggled via the .mobile/.desktop utility classes):  */
.fcb-hero-bg-image {
    width: auto;
    overflow: hidden;
    /* No top margin — the hero sits flush against the site header, no gap. */
    margin: 0 0 var(--fcb-space-lg);
}

.fcb-hero-bg-image video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fcb-hero-bg-image.mobile {
    position: relative;
    aspect-ratio: 3 / 4;
    margin-bottom: 0;
    /* The marketing paragraph is bottom-anchored inside this box (see
       .fcb-hero-marketing-mobile); when its text is long it must be allowed to
       grow past the box's bottom edge instead of being clipped and losing text.
       Horizontal stays clipped so the video itself never causes side overflow. */
    overflow-x: hidden;
    overflow-y: visible;
}

.fcb-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--fcb-color-black) 10%, rgba(0, 0, 0, 0) 25%);
    pointer-events: none;
    z-index: 1;
}

.fcb-hero-title,
.fcb-hero-subtitle,
.fcb-benefit-card-title,
.fcb-benefit-card-text,
.fcb-faq-question-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.fcb-hero-title {
    font-weight: 700;
    /* Scales down on narrow phones instead of staying a fixed 40px — a full
       52-char title at 2.5rem was wrapping past 2 lines on small screens and
       getting cut off with "…"; desktop overrides this with its own clamp. */
    font-size: clamp(1.625rem, 8vw, 2.5rem);
    line-height: 1.15;
    margin: 0;
    -webkit-line-clamp: 3; /* was 2 — the smaller sizes above still need a 3rd line for the longest titles */
}

.fcb-hero-subtitle {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.25px;
    margin-top: 8px;
    -webkit-line-clamp: 2; /* ~60 chars */
}

.fcb-hero-title.mobile,
.fcb-hero-subtitle.mobile {
    text-align: center;
}

.fcb-hero-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    margin-top: 50px;
    flex-direction: column;
}

.fcb-hero-marketing-mobile {
    margin-top: auto;
    padding: 0 var(--fcb-gutter);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fcb-hero-paragraph-title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0;
    text-align: center;
}

.fcb-hero-paragraph {
    text-align: center;

}

.fcb-hero-paragraph p {
    line-height: 1.4;
    margin-top: 8px;
    font-weight: 600;

}

.fcb-hero-marketing-desktop {
    display: none;
}

.fcb-hero-cta,
.fcb-bottom-cta-btn,
.fcb-popup-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--fcb-color-teal) 0%, var(--fcb-color-green) 99.375%);
    font-weight: 600;
    font-size: 1.25rem;
    border-radius: var(--fcb-radius-sm);
    border: none;
    padding: var(--fcb-btn-padding);
    cursor: pointer;
    text-decoration: none;
    margin-top: var(--fcb-space-lg);
}

.fcb-content-bg {
    position: relative;
    margin: 0 calc(-1 * var(--fcb-gutter));
    padding: 0 var(--fcb-gutter);
    background: linear-gradient(to bottom, var(--fcb-color-black), var(--fcb-color-gray));
}

/* ---------- Benefits strip ---------- */
.fcb-benefits {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 10px 16px 0;
}

/* With the hero off, .fcb-benefits becomes the first thing on the page, right
   under the site header — but its cards' icons sit 20px above the card's own box */
.fcb-content-bg--no-hero .fcb-benefits {
    padding-top: 48px;
}

.fcb-benefits-arrow {
    display: block;
    width: 60px;
    height: auto;
    margin-left: -16px;
    margin-right: auto;
}

.fcb-benefit-card {
    position: relative;
    height: 100px; /* fixed so every card is the same size regardless of text length */
    padding: 30px 16px;
    text-align: center;
    overflow: visible; /* lets the SVG's top bump render outside the card's own box */
}

.fcb-benefit-card-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: visible;
}

.fcb-benefit-card img {
    position: absolute;
    top: -20px; /* lifts the icon up so it sits inside the SVG's bump, above the rectangle */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    object-fit: contain;
    z-index: 1;
}

.fcb-benefit-card-title {
    color: var(--fcb-color-green);
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 12px;
    -webkit-line-clamp: 2; /* ~40 chars */
}

.fcb-benefit-card-text {
    color: var(--fcb-color-white);
    font-size: 0.9375rem;
    font-weight: 400;
    margin-top: 14px;
    line-height: 1.5rem;
    -webkit-line-clamp: 3; /* ~80 chars */
}


/* ---------- How it works ---------- */
.fcb-how {
    position: relative;
    padding: var(--fcb-space-xl) var(--fcb-gutter);
    text-align: center;
}

.background-coins,
.background-phone {
    position: absolute;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.background-coins {
    left: -40px;
}

.background-phone {
    right: -20px;
    bottom: 90px;
    width: 50px;
}

.fcb-how-title {
    position: relative;
    z-index: 1;
    color: var(--fcb-color-green);
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0 0 var(--fcb-space-lg);
}

.fcb-how-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fcb-how-arrow {
    display: block;
    margin: -8px auto;
}

.fcb-how-step {
    background: var(--fcb-color-light-gray);
    color: var(--fcb-color-dark);
    border-radius: var(--fcb-radius-md);
    padding: 20px 10px;
    font-size: 1.125rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
    margin: 0 -17px;
}

.fcb-how-step-num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--fcb-color-teal) 0%, var(--fcb-color-green) 99.375%);
    color: var(--fcb-color-black);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fcb-how-closing {
    margin-top: var(--fcb-space-lg);
}

.fcb-how-closing p {
    margin: 0 0 4px;
}

.fcb-how-closing p:last-child {
    margin-bottom: 0;
}

/* ---------- FAQ ---------- */
.fcb-faq {
    background: var(--fcb-color-light-gray);
    color: var(--fcb-color-dark);
    border-radius: var(--fcb-radius-md);
    padding: var(--fcb-space-xl) var(--fcb-gutter);
    margin-top: var(--fcb-space-xl);
    box-sizing: border-box;
}

.fcb-faq-title {
    font-weight: 700;
    font-size: 2.5rem;
    margin: 0 0 16px;
    text-align: center;
}

.fcb-faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px 0;
}

.fcb-faq-item:last-child {
    border-bottom: none;
}

.fcb-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.125rem;
    -webkit-user-select: none;
    user-select: none;
}

.fcb-faq-question-text {
    -webkit-line-clamp: 4;
    min-width: 0;
}

.fcb-faq-question::after {
    content: '+';
    font-size: 1.375rem;
    font-weight: 400;
    margin-inline-start: 12px;
    flex: none;
}

.fcb-faq-item.open .fcb-faq-question::after {
    content: '\2212';
}

.fcb-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
}

.fcb-faq-answer-inner {
    overflow: hidden;
}

.fcb-faq-answer * {
    color: var(--fcb-color-dark);
}

.fcb-faq-answer a {
    color: #000;
    text-decoration: underline;
}

.fcb-faq-answer ul,
.fcb-faq-answer ol {
    padding-inline-start: 1.25rem;
    margin: 0 0 8px;
}

.fcb-faq-answer ul {
    list-style: disc;
}

.fcb-faq-answer ol {
    list-style: decimal;
}

.fcb-faq-item.open .fcb-faq-answer {
    grid-template-rows: 1fr;
    margin-top: 12px;
}

/* ---------- Legal ---------- */
.fcb-legal {
    padding: var(--fcb-space-lg) var(--fcb-gutter);
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.fcb-legal a {
    color: var(--fcb-color-green);
}

/* ---------- Bottom CTA ---------- */
.fcb-bottom-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 22px var(--fcb-gutter);
    text-align: center;
    z-index: 999;
    background: linear-gradient(to right, var(--fcb-color-black), var(--fcb-color-gray));
    border-radius: var(--fcb-radius-lg) var(--fcb-radius-lg) 0 0;
    box-sizing: border-box;
}

.back-to-top {
    bottom: 116px !important;
}

.fcb-bottom-cta.fcb-bottom-cta--released {
    position: absolute;
}

/* Reserves layout space for the fixed .fcb-bottom-cta (height set by JS to
   match it) and doubles as the IntersectionObserver target that triggers the
   release — far more reliable than comparing scroll offsets by hand. */
#fcb-bottom-cta-spacer {
    height: 0;
}

.fcb-bottom-cta-btn {
    margin-top: 0;
    width: 75%;
    box-sizing: border-box;
}

/* ---------- Card-linking popup (5 states) ---------- */
.fcb-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* Above everything sitewide, including the sticky header (z-index: 10000)
       and its search/menu flyout (z-index: 100000, see top_new.css). */
    z-index: 1000000;
    align-items: flex-end;
    justify-content: center;
}

.fcb-popup-overlay.open {
    display: flex;
}

.fcb-popup-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.fcb-popup-card {
    position: relative;
    width: 100%;
    height: 65vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(to right, var(--fcb-color-black) 0%, var(--fcb-color-gray) 70%);
    border-radius: var(--fcb-radius-lg) var(--fcb-radius-lg) 0 0;
    padding: 40px var(--fcb-gutter);
    text-align: center;
    border: 1px solid rgba(176, 176, 176, 0.45);
    transform: translateY(100%);
    transition: transform 0.32s ease-out;
}

/* Applied a frame after .open so the card animates in instead of
   snapping straight to its open position */
.fcb-popup-overlay.fcb-popup-visible .fcb-popup-card {
    transform: translateY(0);
}

.fcb-popup-close {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2; /* stays above state6's full-bleed iframe (also absolutely positioned) */
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--fcb-color-white);
}

.fcb-popup-title {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.fcb-popup-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.fcb-popup-image {
    display: block;
    max-width: 100%;
    max-height: 30vh;
    height: auto;
    margin: 0 auto 10px;
}

.fcb-popup-card .fcb-popup-cta-primary {
    margin-top: 10px;
    padding: 1.125rem 1.25rem;
}

.fcb-popup-state--summary .fcb-popup-title {
    font-size: 1.25rem;
}

.fcb-popup-state--summary .fcb-popup-text {
    font-size: 1.5rem;
    font-weight: 700;
}

.fcb-popup-state--summary .fcb-popup-image {
    width: clamp(80px, 28vw, 130px);
    height: clamp(80px, 28vw, 130px);
    max-width: none;
    max-height: none;
    object-fit: contain;
    margin: 0 auto 2px;
}

.fcb-popup-state--summary .fcb-popup-cta-primary {
    margin-top: 2px;
}

.fcb-popup-state[data-state="state1"] {
    margin-top: 0;
    margin-bottom: auto;
}

.fcb-popup-state[data-state="state1"] .fcb-popup-title {
    margin-bottom: 40px;
}

.fcb-popup-state[data-state="state1"] .fcb-popup-image {
    margin: 0 auto -50px;
}

.fcb-popup-state[data-state="state1"] .fcb-popup-cta-primary {
    width: 90%; /* long, matching the secondary button's width below it */
    margin-top: 4px;
}

.fcb-popup-state[data-state="state1"] .fcb-popup-cta-secondary {
    margin-top: 16px;
}

/* State6: full-bleed iframe for any external url returned by card_check
   (action=external_link or action=wizard) — fills the whole card instead of
   sitting inside its centered/padded content flow like the other states. */
.fcb-popup-state[data-state="state6"] {
    position: absolute;
    inset: 0;
    padding: 0;
    overflow: hidden;
    border-radius: inherit;
}

.fcb-popup-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Gives state6's iframe more room on mobile — the card's usual 65vh feels
   cramped for an embedded CAL flow; desktop keeps its own (768px+) height. */
@media (max-width: 767px) {
    .fcb-popup-overlay.fcb-popup-iframe-open .fcb-popup-card {
        height: 80vh;
    }

    /* The embedded CAL page (state6, an external site we don't control) isn't
       fully responsive and can render wider than the popup, clipping content
       off one edge. Render it at a larger explicit size, then scale the whole
       thing down so it fits both dimensions with nothing cropped. Anchored
       with physical top/left (not normal flow) so this isn't thrown off by
       .fcb-page's RTL direction. Tune 0.75 if real content still doesn't fit. */
    .fcb-popup-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 133.34%; /* 100% / 0.75 */
        height: 133.34%;
        transform: scale(0.75);
        transform-origin: top left;
    }
}

.fcb-popup-state[data-state="state3"] {
    margin-top: 0;
    margin-bottom: 120px;
}

.fcb-popup-state[data-state="state3"] .fcb-popup-title {
    margin-bottom: 24px;
}

.fcb-popup-state[data-state="state3"] .fcb-popup-input {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto 20px;
    padding: 1.125rem 1.25rem;
    padding-inline-start: 2rem;
    font-size: 1.125rem;
}

.fcb-popup-state[data-state="state3"] .fcb-popup-cta-primary {
    width: 90%;
    margin-top: 0px;
}

.fcb-popup-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fcb-color-white);
    color: var(--fcb-color-white);
    background: transparent;
    font-weight: 600;
    font-size: 1.125rem;
    border-radius: var(--fcb-radius-sm);
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    width: 90%;
    margin-top: 8px;
}

.fcb-popup-input {
    width: 100%;
    height: 46px;
    border-radius: var(--fcb-radius-sm);
    border: 1px solid var(--fcb-color-teal);
    background: var(--fcb-color-white);
    color: var(--fcb-color-black);
    text-align: right;
    padding: 0 12px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.fcb-popup-input.fcb-input-invalid {
    border-color: #ff3d5f;
}

.fcb-popup-field-error {
    display: none;
    width: 90%;
    margin: -14px auto 12px;
    color: #ff3d5f;
    font-size: 0.8rem;
    text-align: right;
}

.fcb-popup-field-error.visible {
    display: block;
}

.fcb-popup-state {
    display: none;
}

.fcb-popup-state.active {
    display: block;
}

/* ---------- Desktop breakpoint (Figma desktop frame: 1920px) ---------- */
@media (min-width: 768px) {

    .desktop {
        display: flex !important;
    }

    .mobile {
        display: none !important;
    }

    .fcb-page {
        margin: 0;
    }

    .fcb-content-bg {
        margin: 0;
        padding: 0;
        background: transparent;

    }

    .fcb-hero {
        padding: clamp(2.5rem, 1.67rem + 1.74vw, 5rem) clamp(1.5rem, -40px + 8.33vw, 7.5rem);
        height: clamp(420px, 33.91vw, 651px);
        box-sizing: border-box;
        /* width/margin stay the 100vw breakout from the base rule above — don't
           reset to margin:0 here, or the bg video stops reaching the screen edges. */
    }

    .fcb-hero-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: -200px;
        width: 100%;
        z-index: 0;
        overflow: hidden;
        margin: 0;
        aspect-ratio: auto;
    }

    .fcb-hero-bg-image.desktop video {
        object-position: center top;
    }

    .fcb-hero-image {
        position: relative;
        z-index: 2;
        width: clamp(240px, calc(50% - 40px), 660px);
        margin-left: auto;
        gap: 6px;
        margin-top: 20px;
    }

    .fcb-hero-title {
        font-size: clamp(1.75rem, 0.58rem + 2.43vw, 3.5rem);
        text-align: right;
    }

    .fcb-hero-subtitle {
        font-size: clamp(1.25rem, 1.08rem + 0.35vw, 1.5rem);
        text-align: right;
    }

    .fcb-hero-paragraph-title {
        font-size: clamp(1.125rem, 0.96rem + 0.35vw, 1.375rem);
        text-align: right;
    }

    .fcb-hero-paragraph {
        font-size: clamp(1rem, 0.8rem + 0.42vw, 1.3rem);
        text-align: right;
        max-width: 22rem; /* narrower column so lines wrap sooner, per Figma */
        margin-top: clamp(4px, 1vw, 8px);
    }

    /* No title entered (or removed because it's empty) — the paragraph is the
       marketing block's first child, so it shouldn't carry the title's gap too. */
    .fcb-hero-marketing > .fcb-hero-paragraph:first-child {
        margin-top: 0;
    }

    .fcb-hero-paragraph p {
        text-align: right;
        font-weight: normal;
        line-height: unset;
    }

    .fcb-hero-marketing {
        /* Was flex: 1 1 280px — flex-grow:1 made it swallow all of .fcb-hero's
           leftover fixed height, shoving the CTA far below the text. Size it to
           its own content instead so spacing above/below stays predictable. */
        flex: none;
    }

    .fcb-hero-marketing-mobile {
        display: none;
    }

    .fcb-hero-marketing-desktop {
        display: block;
    }

    .fcb-benefits {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        row-gap: 32px;
        padding: 0px var(--fcb-space-lg);
        position: relative;
        z-index: 1;
    }

    .fcb-benefit-card {
        flex: 1 1 200px;
        width: auto;
        height: auto;
        min-height: 140px;
        min-width: 200px;
        max-width: 230px;
    }

    .fcb-hero-cta {
        position: relative;
        z-index: 1;
        align-self: flex-start;
        /* Was a fixed `margin-top: -100px` tuned for one specific content length —
           it overlapped the marketing paragraph whenever the title/paragraph were
           shorter (or the title was left empty). Follow content naturally instead. */
        margin-top: clamp(12px, 1.5vw, 20px);
        font-size: 1.1rem;
        width: 180px;
    }

    .fcb-how {
        margin-top: 100px;
    }

    .fcb-how-title {
        font-size: 2.5rem;

    }

    .fcb-how-closing p {
        font-size: 1.1rem;
    }

    .fcb-how-arrow.desktop {
        transform: rotate(-90deg);
        margin: -4px auto;
    }

    .fcb-how-step {
        margin: 0;
        padding: 20px 20px;
    }

    .background-coins.desktop,
    .background-phone.desktop {
        display: none !important;
    }

    /* Desktop illustrations don't have room to sit beside the step-card row
       until 1440px (see the (min-width: 1440px) block below) — keep the
       mobile corner illustrations up through that point instead of leaving
       the section bare. */
    .background-coins.mobile,
    .background-phone.mobile {
        display: block !important;
    }

    @media (min-width: 1100px) {
        .fcb-how-steps {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

        .fcb-how-step {
            flex: 0 0 calc((100% - 2 * var(--fcb-space-lg)) / 3);
            max-width: 250px;
        }

        .fcb-how-arrow.desktop {
            transform: none;
            margin: 0;
            flex: 0 0 auto;
        }
    }

    /* The step-card row settles at a fixed ~762px once its cards hit their
       max-width (from 1100px up), while these vw-based illustration offsets
       keep shrinking with the viewport — below ~1354px that row physically
       overlaps and covers them. 1440px keeps a safety margin above that
       crossover so they're never covered. */
    @media (min-width: 1440px) {
        .background-coins.mobile,
        .background-phone.mobile {
            display: none !important;
        }

        .background-coins.desktop,
        .background-phone.desktop {
            display: block !important;
        }

        .background-coins,
        .background-phone {
            z-index: -1;
        }

        .background-coins {
            left: auto;
            right: clamp(60px, 9.375vw, 180px);
            bottom: clamp(50px, 5.208vw, 100px);
            width: clamp(70px, 11vw, 210px);
        }

        .background-phone {
            left: clamp(70px, 11.979vw, 230px);
            right: auto;
            width: clamp(45px, 6.25vw, 120px);
            top: clamp(15px, 1.5625vw, 30px);
        }
    }

    .fcb-faq-title {
        text-align: right;
        margin: 9px 39px 44px;
    }

    .fcb-faq {
        max-width: 1117px;
        width: calc(100% - 2 * var(--fcb-gutter));
        margin: 80px auto 20px auto;
    }

    .fcb-faq-item {
        padding: 16px 4%;
    }

    .fcb-legal {
        max-width: 1083px;
        margin: 0 auto;
        font-size: 0.9rem;
        padding: 20px 16% 23px;
    }

    .fcb-popup-overlay {
        align-items: center;
        padding-top: 12vh;
    }

    .fcb-popup-card {
        border-radius: var(--fcb-radius-lg);
        max-width: 600px;
        padding: 1.25rem 80px 2rem;
        height: 55vh;
        min-height: 350px;
        border: 1px solid transparent;
        background-image: linear-gradient(to right, var(--fcb-color-black) 0%, var(--fcb-color-gray) 70%),
        linear-gradient(90deg, var(--fcb-color-teal) 0%, var(--fcb-color-green) 99.375%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    /* State6 (external CAL site in an iframe) needs its own sizing on desktop —
       the 600px/55vh card above is sized for the other, text-only states. This
       was previously blown up to 880px/85vh to avoid scrolling, but that made
       the popup itself look oversized for what's really a compact login form —
       sized down to something modal-sized instead, and the embedded content is
       shrunk further (below) to still fit inside it. */
    .fcb-popup-overlay.fcb-popup-iframe-open {
        padding-top: 10vh;
    }

    .fcb-popup-overlay.fcb-popup-iframe-open .fcb-popup-card {
        max-width: 640px;
        width: 70vw;
        height: 70vh;
        min-height: 480px;
    }

    /* Same shrink-to-fit as mobile, tuned stronger now that the card itself is
       smaller. Positioned with explicit physical top/left so .fcb-page's RTL
       direction can't throw off the anchor (see the mobile rule for why that
       matters). */
    .fcb-popup-overlay.fcb-popup-iframe-open .fcb-popup-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 125%; /* 100% / 0.8 */
        height: 125%;
        transform: scale(0.8);
        transform-origin: top left;
    }

    .fcb-popup-card .fcb-popup-cta-primary,
    .fcb-popup-cta-secondary {
        padding: 0.75rem 1rem;
    }

    .fcb-popup-control {
        width: 320px !important;
        max-width: 100%;
        height: 50px !important;
        box-sizing: border-box;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .fcb-popup-state[data-state="state1"] .fcb-popup-cta-secondary {
        font-weight: 400;
    }

    .fcb-popup-state[data-state="state1"] .fcb-popup-cta-secondary {
        margin-top: 12px;
    }

    .fcb-popup-state[data-state="state1"] .fcb-popup-title {
        margin-bottom: 24px;
    }

    .fcb-popup-state[data-state="state3"] {
        padding-top: 64px;
    }

    .fcb-popup-state[data-state="state3"] .fcb-popup-input {
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }

    .fcb-popup-state[data-state="state3"] .fcb-popup-title {
        margin-bottom: 34px;
    }

    .fcb-bottom-cta {
        background: linear-gradient(to right, var(--fcb-color-black) 0%, var(--fcb-color-gray) 15%, var(--fcb-color-gray) 100%);
    }

    .fcb-bottom-cta-btn {
        width: auto;
    }

    #footer {
        margin-top: 0 !important; /* the site-wide footer_new.css adds 80px here on desktop; this page needs the sticky bar to sit flush against it */
    }
}