/* ==========================================================================
   DCS Flex Visa Platinum — BAU landing page (views/dcscc/v2/cards/flex/flex-landing.ejs)
   Figma: #697_Visa Flex BAU LP, node 246:2135 (1920 desktop, 1440 content column).
   Self-contained; prefix `fxl-`. The content column matches .container-xxl (1320px),
   so every design px is scaled ×0.9 (1296/1440) and wrapped in clamp() so the comp
   holds its proportions down to ~1200, then stacks below 992.
   ========================================================================== */

:root {
    --fxl-navy: #022364;
    --fxl-navy-2: #041b47;
    --fxl-blue: #016bfc;
    --fxl-blue-2: #376eff;
    --fxl-blue-3: #0355e7;
    --fxl-blue-line: #0c3aaf;
    --fxl-yellow: #fddb03;
    --fxl-grey: #4e586e;
    --fxl-orange: #f0aa31;
    --fxl-table: #0327a1;
    --fxl-cream: #fefbef;
    --fxl-img: url("/dcscc/v2/images/flex/landing/");
    --fxl-font: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* curved edges of the dark programme block (depth of the ellipses) */
    /* depths of Figma "Path 10024": top concave curve 285/1957 of the width, bottom convex 218/1957 */
    --fxl-bulge: clamp(200px, 14.56vw, 285px);
    --fxl-bulge-b: clamp(70px, 11.14vw, 218px);
}

/* ---- base / resets inside the page ------------------------------------- */
.fxl-body {
    margin: 0;
    background: #fff;
    color: var(--fxl-grey);
    font-family: var(--fxl-font);
    -webkit-font-smoothing: antialiased;
}
.fxl {
    overflow-x: hidden;
    font-family: var(--fxl-font);
    line-height: 1.25;
}
/* :where() keeps these resets at zero extra specificity so component classes below win */
.fxl :where(h1, h2, h3, p, ul, ol) {
    margin: 0;
    padding: 0;
}
.fxl :where(ul, ol) { list-style: none; }
.fxl :where(img) { max-width: 100%; vertical-align: middle; }
.fxl a { text-decoration: none; }
.fxl sup { font-size: .5em; top: -0.9em; }
.fxl-container {
    width: 100%;
    max-width: 1320px;              /* = .container-xxl (1296 content + 2 × 12 gutter) */
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}
.fxl-section { position: relative; }

.fxl-yellow { color: var(--fxl-yellow); }
.fxl-orange { color: var(--fxl-orange); font-size: 1.2em; }

/* headings */
.fxl-h2 {
    font-size: clamp(30px, 2.8vw, 54px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fxl-navy);
    text-align: center;
}
.fxl-h2--blue  { color: var(--fxl-blue); }
.fxl-h2--white { color: var(--fxl-cream); }
.fxl-h2--md    { font-size: clamp(26px, 2.3vw, 45px); color: var(--fxl-navy-2); }
.fxl-h2--left  { text-align: left; }
.fxl-h2--underline::after {
    content: "";
    display: block;
    width: clamp(110px, 10.4vw, 199.8px);
    height: clamp(10px, 1vw, 18px);
    margin: 4px auto 0;
    background: url("/dcscc/v2/images/flex/landing/title-underline.png") no-repeat center / contain;
}
.fxl-h2--left.fxl-h2--underline::after { margin-left: clamp(40px, 4.2vw, 81px); }

.fxl-lead {
    /* max-width: 864px; */
    margin: clamp(10px, 0.9vw, 16.2px) auto 0;
    font-size: clamp(16px, 1.1vw, 21.6px);
    line-height: 1.3;
    color: var(--fxl-grey);
    text-align: center;
}
.fxl-lead--lg { font-size: clamp(18px, 1.4vw, 27px); }

/* buttons (Figma "button_Apply for Flex Visa Platinum Card") */
.fxl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.1vw, 39.6px);
    padding: clamp(12px, 1.1vw, 20.7px) clamp(28px, 3.1vw, 59.4px);
    border: 0;                         /* the apply triggers also carry Bootstrap's .btn (modal_multiple_card.js binds to it) */
    border-radius: 999px;
    background: var(--fxl-yellow);
    color: var(--fxl-navy-2);
    font-size: clamp(18px, 1.6vw, 31.5px);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, transform .15s ease;
}
/* flex.css sets `.btn.btn.btn { font-family: Futura… }`; match its specificity so the page font wins */
.fxl-btn.fxl-btn.fxl-btn {
    font-family: var(--fxl-font);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}
.fxl-btn::after { content: ">"; }
.fxl-btn:hover, .fxl-btn:focus { background: #ebc900; color: var(--fxl-navy-2); text-decoration: none; }
.fxl-btn--blue { background: linear-gradient(90deg, #4c9bff 0%, #2a7af2 100%); color: #fff; }
.fxl-btn--blue:hover, .fxl-btn--blue:focus { background: linear-gradient(90deg, #3d8ff9 0%, #1f6de3 100%); color: #fff; }
.fxl-btn--block { display: flex; width: 100%; }
.fxl-btn--hero { font-size: clamp(20px, 1.5vw, 32.4px); padding: clamp(12px, 1.1vw, 10.7px) clamp(36px, 4.1vw, 65.2px); }
.fxl-btn--apply { font-size: clamp(18px, 1.6vw, 30.6px); padding: clamp(12px, 0.9vw, 17.1px) clamp(28px, 3.1vw, 59.4px); }
.fxl-cta { text-align: center; margin-top: clamp(32px, 3.6vw, 70.2px); }

.fxl-link {
    font-size: clamp(16px, 1.1vw, 21.6px);
    font-weight: 700;
    color: var(--fxl-blue-2);
    text-decoration: underline;
}
.fxl-link:hover { color: var(--fxl-blue-3); text-decoration: underline; }

/* check-mark lists */
.fxl-checks li {
    position: relative;
    padding-left: clamp(40px, 2.5vw, 48.6px);
    background: url("/dcscc/v2/images/flex/landing/check-blue.svg") no-repeat 0 .1em / clamp(22px, 1.4vw, 27.4px) auto;
}
.fxl-checks--yellow li { background-image: url("/dcscc/v2/images/flex/landing/check-yellow.svg"); }
.fxl-checks--navy li   { background-image: url("/dcscc/v2/images/flex/landing/check-navy.svg"); }
.fxl-checks--lg li {
    padding-left: clamp(44px, 2.8vw, 54px);
    background-size: clamp(28px, 1.9vw, 37.4px) auto;
    background-position: 0 .15em;
}

/* ---- HERO --------------------------------------------------------------- */
.fxl-hero { position: relative; background: #fff; }
.fxl-hero__kv { display: block; width: 100%; height: auto; }
.fxl-hero__fade,
.fxl-hero__tagline { display: none; }
.fxl-hero__content { padding: 21.6px 21.6px 7.2px; text-align: center; }
.fxl-hero__title {
    font-size: clamp(30px, 3.5vw, 67.5px);
    font-weight: 700;
    line-height: 1.17;
    color: var(--fxl-navy);
    margin-bottom: .55em;
}
.fxl-hero__eyebrow,
.fxl-hero__sub {
    font-size: clamp(15px, 1.2vw, 23.4px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--fxl-grey);
}
.fxl-hero__miles {
    font-size: clamp(30px, 2.5vw, 48.6px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fxl-blue);
}
/* headline roller: items stack in one line box; the active one is in place, the leaving one rolls up */
.fxl-hero__roller {
    position: relative;
    display: block;
    height: 1.2em;
    overflow: hidden;
}
.fxl-hero__roll {
    position: absolute;
    left: 0; right: 0; top: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
    will-change: transform, opacity;
}
.fxl-hero__roll.is-active  { opacity: 1; transform: none; }
.fxl-hero__roll.is-leaving { opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
    .fxl-hero__roll { transition: none; }
}
.fxl-hero__sub { max-width: 17.5em; margin: 0 auto 1.1em; }
.fxl-hero__tnc {
    font-size: clamp(12px, 0.8vw, 16.2px);
    color: var(--fxl-grey);
    margin-top: .5em;
}

@media (min-width: 992px) {
    .fxl-hero { aspect-ratio: 1920 / 1000; overflow: hidden; }
    .fxl-hero__kv {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: center top;
    }
    .fxl-hero__fade {
        display: block;
        position: absolute; left: 0; right: 0; bottom: 0;
        height: 14%;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, #fff 100%);
    }
    .fxl-hero__content {
        position: absolute;
        left: max(12px, calc((100% - 1296px) / 2));
        top: 18.7%;
        width: 31%;
        padding: 0;
        text-align: left;
    }
    .fxl-hero__sub { margin-left: 0; }
    .fxl-hero__tnc { width: clamp(180px, 18.6vw, 377.1px); text-align: center; }
    /* "Flex It. Your Way." — rotated text riding the yellow ribbon */
    .fxl-hero__tagline {
        display: block;
        position: absolute;
        left: 37.2%;
        top: 88%;
        transform: rotate(317deg);
        transform-origin: left center;
        font-size: clamp(22px, 1.9vw, 36px);
        font-weight: 700;
        color: var(--fxl-navy);
        white-space: nowrap;
        pointer-events: none;
    }
    .fxl-hero__tagline em { font-style: normal; color: #046bfd; }
}

/* ---- WELCOME GIFT ------------------------------------------------------- */
.fxl-gift { padding: clamp(24px, 1.8vw, 36px) 0 clamp(40px, 3.6vw, 72px); }
.fxl-gift .fxl-container { text-align: center; }
.fxl-gift__period {
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 1vw, 18px);
    margin-top: clamp(20px, 1.4vw, 27px);
    padding: clamp(8px, 0.6vw, 12.6px) clamp(20px, 2.7vw, 52.2px);
    border: 5px solid #b8b8b8;
    border-radius: 999px;
    font-size: clamp(16px, 1.4vw, 27px);
    font-weight: 700;
    color: var(--fxl-grey);
}
.fxl-gift__cal { width: clamp(24px, 1.7vw, 33.3px); height: auto; }
.fxl-gift__lead {
    max-width: 945px;
    margin: clamp(20px, 2.1vw, 39.6px) auto 0;
    font-size: clamp(16px, 1.1vw, 21.6px);
    line-height: 1.3;
    color: var(--fxl-grey);
}
.fxl-gift__cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 8px;
    max-width: 1191.6px;
    margin: clamp(32px, 2.3vw, 45px) auto 0;
    text-align: left;
}
.fxl-gcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 5px solid #b8b8b8;
    border-radius: 48px;
    padding: clamp(12px, 0.8vw, 14.4px) clamp(12px, 0.8vw, 14.4px) clamp(16px, 1.1vw, 21.6px);
}
.fxl-gcard--miles { border-color: #2f80ed; }
.fxl-gcard__media {
    position: relative;
    aspect-ratio: 580 / 463;
    border-radius: 32px;
    overflow: hidden;
    background: #0a2a6b;
}
/* source renders carry a baked-in frame; scale slightly so the crop hides it (Figma masks it the same way) */
.fxl-gcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.fxl-gcard__tag {
    position: absolute;
    top: 10.8px; left: 5.4px;
    padding: clamp(8px, 0.6vw, 10.8px) clamp(14px, 1.2vw, 23.4px);
    border-radius: 999px;
    font-size: clamp(12px, 0.9vw, 18px);
    font-weight: 700;
    line-height: 1.2;
}
.fxl-gcard__tag--blue   { background: #0b4bd1; color: #fff; }
.fxl-gcard__tag--yellow { background: var(--fxl-yellow); color: var(--fxl-navy); }
.fxl-gcard__overlay { position: absolute; }
.fxl-gcard__overlay--miles { left: 4.5%; top: 29%; color: var(--fxl-navy); }
.fxl-gcard__big { display: block; font-size: clamp(28px, 2.3vw, 45px); font-weight: 700; line-height: 1.1; }
.fxl-gcard__mid { display: block; font-size: clamp(16px, 1.4vw, 27px); font-weight: 700; }
/* .fxl-gcard__mid sup { font-size: .6em; } */
.fxl-gcard__overlay--luggage { left: 6%; top: 31%; color: #f4f7fb; }
.fxl-gcard__lines { display: block; font-size: clamp(16px, 1.4vw, 27px); font-weight: 700; line-height: 1.5; }
.fxl-gcard__worth {
    display: inline-block;
    margin-top: clamp(10px, 0.9vw, 18px);
    padding: clamp(8px, 0.7vw, 12.6px) clamp(16px, 1.4vw, 27px);
    background: url("/dcscc/v2/images/flex/landing/brush-yellow.png") no-repeat center / 100% 100%;
    font-size: clamp(16px, 1.4vw, 27.9px);
    font-weight: 700;
    color: var(--fxl-navy);
    transform: rotate(-6deg);
}
.fxl-gcard .fxl-checks { margin-top: clamp(16px, 1.3vw, 23.4px); padding: 0 clamp(6px, 0.6vw, 12.6px); }
.fxl-gcard .fxl-checks li {
    font-size: clamp(16px, 1.3vw, 25.2px);
    font-weight: 700;
    color: var(--fxl-navy-2);
    margin-bottom: clamp(8px, 0.7vw, 12.6px);
}
.fxl-gcard__note {
    padding: 0 clamp(6px, 0.6vw, 12.6px);
    margin: clamp(6px, 0.5vw, 9px) 0 clamp(20px, 2.2vw, 41.4px);
    font-size: clamp(13px, 0.9vw, 18px);
    line-height: 1.5;
    color: var(--fxl-grey);
}
.fxl-gcard__note a { color: inherit; font-weight: 700; text-decoration: underline; }
.fxl-gcard .fxl-btn--block { margin-top: auto; }
.fxl-gift__or {
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 3vw, 57.6px);
    height: clamp(48px, 3vw, 57.6px);
    margin: 0 clamp(0px, 0.4vw, 7.2px);
    border: 5px solid #b8b8b8;
    border-radius: 50%;
    color: #939393;
    font-size: clamp(20px, 1.6vw, 31.5px);
}
.fxl-gift__foot {
    margin-top: 7.2px;
    font-size: clamp(14px, 1.1vw, 21.6px);
    line-height: 1.3;
    color: var(--fxl-grey);
}
.fxl-gift__cards + .fxl-gift__foot { margin-top: clamp(30px, 2.8vw, 54px); }
.fxl-gift__tnc { color: inherit; font-weight: 600; font-style: italic; text-decoration: underline; }
.fxl-gift__tnc:hover { color: var(--fxl-blue-2); }

/* soft yellow / blue wash behind Style + Tailor */
.fxl-wash {
    background: url("/dcscc/v2/images/flex/landing/bg-blobs.png") no-repeat center / 100% 100%;
}

/* ---- CHOOSE YOUR STYLE -------------------------------------------------- */
.fxl-style { padding: clamp(30px, 2.7vw, 50.4px) 0 clamp(40px, 4.2vw, 81px); }
.fxl-style__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: clamp(24px, 1.8vw, 36px);
    margin-top: clamp(20px, 2.1vw, 39.6px);
    text-align: center;
}
.fxl-style__img { display: block; width: 100%; max-width: 743.4px; height: auto; margin: 0 auto; }
.fxl-pill {
    display: inline-block;
    width: clamp(200px, 15.4vw, 295.5px);   /* both pills share the Figma width (328.375 × 0.9) */
    margin-top: clamp(16px, 1.4vw, 27px);
    padding: clamp(10px, 0.7vw, 12.6px) 12px;
    border: 3px solid;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
    font-size: clamp(16px, 1.2vw, 23.4px);
    font-weight: 700;
    line-height: 1.2;
}
.fxl-pill--blue   { border-color: #6fa6ff; color: var(--fxl-grey); }
.fxl-pill--yellow { border-color: var(--fxl-yellow); color: #7a7c7e; }
.fxl-style__desc {
    max-width: 450px;
    margin: clamp(12px, 0.9vw, 18px) auto 0;
    font-size: clamp(15px, 1.1vw, 21.6px);
    line-height: 1.3;
    color: var(--fxl-grey);
}

/* ---- TAILOR YOUR REWARDS ------------------------------------------------ */
.fxl-tailor { padding: clamp(40px, 4.2vw, 81px) 0 clamp(40px, 4vw, 77.4px); }
.fxl-tailor__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.5vw, 28.8px);
    margin-top: clamp(40px, 4.1vw, 79.2px);
}
.fxl-rcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 2px solid #bfd4ff;
    border-radius: 32px;
    padding: clamp(24px, 1.9vw, 36px) clamp(12px, 0.9vw, 18px) clamp(20px, 1.4vw, 27px);
    text-align: center;
    box-shadow: 0 4px 21.6px rgba(3, 39, 161, .06);
}
.fxl-rcard__icon { height: clamp(90px, 7vw, 135px); width: auto; margin-bottom: clamp(16px, 1.2vw, 23.4px); }
.fxl-rcard__upto  { font-size: clamp(16px, 1.2vw, 23.4px); font-weight: 700; color: var(--fxl-grey); }
.fxl-rcard__value { font-size: clamp(26px, 1.9vw, 36px); font-weight: 700; line-height: 1.2; color: var(--fxl-blue-2); }
.fxl-rcard__label { font-size: clamp(16px, 1.2vw, 23.4px); font-weight: 700; color: var(--fxl-blue-2); }
.fxl-rcard__desc  { margin-top: 7.2px; font-size: clamp(14px, 1.1vw, 21.6px); line-height: 1.3; color: var(--fxl-grey); }

/* ---- HOW YOU EARN & SWITCH ---------------------------------------------- */
/* extra bottom padding = breathing room between the lead text and the reward selector ring */
.fxl-switch { padding: clamp(40px, 4vw, 77.4px) 0 calc(clamp(40px, 4vw, 77.4px) + clamp(20px, 1.6vw, 30px)); }

/* selector geometry shared by the ring and the arrows so the arrows can centre on the ring */
.fxl-selector { --fxl-ring: clamp(120px, 10.2vw, 196px); --fxl-arrow: clamp(48px, 3.9vw, 73.8px); }

/* dark programme block with curved top (white bulge) and curved bottom */
.fxl-dark {
    position: relative;
    display: flow-root;            /* keep the selector's negative margin from collapsing through */
    background: linear-gradient(180deg, #005fd8 0%, #00306c 100%);
    color: #fff;
    padding-bottom: 0;
}
/* the two curved edges are the exact Bézier curves of Figma "Path 10024" (viewBox width 1957),
   stretched to the section width (preserveAspectRatio="none") */
.fxl-dark::before,
.fxl-dark::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
/* white area above the concave top edge */
.fxl-dark::before {
    top: -1px;
    height: var(--fxl-bulge);
    /* symmetric cubic, depth 285 (= 0.75 × control y 380), same depth as Figma's slightly skewed path */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1957 285' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0H1957C1305 380 652 380 0 0Z'/%3E%3C/svg%3E");
}
/* blue area hanging below the flat bottom edge */
.fxl-dark::after {
    bottom: calc(-1 * var(--fxl-bulge-b));
    height: var(--fxl-bulge-b);
    /* symmetric cubic, depth 218 (= 0.75 × 290.7) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1957 218' preserveAspectRatio='none'%3E%3Cpath fill='%2300306c' d='M0 0H1957C1305 290.7 652 290.7 0 0Z'/%3E%3C/svg%3E");
}
.fxl-dark > .fxl-container { position: relative; z-index: 1; }

/* reward selector (one slide in the design: Miles) */
.fxl-selector {
    display: flex;
    align-items: flex-start;       /* slide = ring + label; arrows centre on the ring via margin-top below */
    justify-content: center;
    gap: clamp(24px, 3.6vw, 68.4px);
    margin-top: clamp(-63px, -3.2vw, -40px);
}
.fxl-selector__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fxl-arrow);
    margin-top: calc((var(--fxl-ring) - var(--fxl-arrow)) / 2);   /* vertical centre = ring centre */
    aspect-ratio: 1;
    padding: 0;
    border: 4px solid var(--fxl-blue-line);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.fxl-selector__arrow img { width: 50%; height: auto; }
.fxl-selector__arrow--next img { transform: rotate(180deg); }
.fxl-selector__slide { display: none; text-align: center; }
.fxl-selector__slide.is-active { display: block; }
/* ring + blue disc are drawn by the container; the artwork sits on top unclipped so the
   coin / tail that poke outside the disc (as in Figma) stay visible */
.fxl-selector__ring {
    position: relative;
    display: block;
    width: var(--fxl-ring);
    aspect-ratio: 1;
    margin: 0 auto;
    border: 3px solid var(--fxl-blue-line);
    border-radius: 50%;
    background: #fff;
    overflow: visible;
}
.fxl-selector__ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #0d52d6 0%, #073286 60%, #031a4f 100%);
}
.fxl-selector__img {
    position: absolute;
    left: 50%; top: 50%;
    width: 135%;              /* plane fills ~91% of the PNG, so it spans ≈120% of the ring and overhangs */
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    border-radius: 0;
    object-fit: contain;
}
.fxl-selector__name {
    display: block;
    margin-top: clamp(8px, 0.7vw, 12.6px);
    font-size: clamp(24px, 2.1vw, 40.5px);
    font-weight: 700;
    color: var(--fxl-navy);   /* #022364 */
}

/* one programme panel per reward; the active one fades in */
.fxl-reward-panel { display: none; }
.fxl-reward-panel.is-active { display: block; }
.fxl-reward-panel.is-entering { animation: fxl-fade .35s ease both; }
@keyframes fxl-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fxl-selector, .fxl-reward-panels { touch-action: pan-y; }
.fxl-selector__slide.is-active { animation: fxl-fade .35s ease both; }

/* heading row: the heading text and its decorative image sit in one centred flex row with a fixed
   gap, so the image keeps the same distance from the text at every viewport (absolute % offsets
   drifted: too close on narrow screens, too far on wide ones) */
.fxl-dark__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);   /* text in the auto middle column stays exactly centred; side columns may shrink below the image so it never squeezes the heading */
    align-items: center;
    column-gap: clamp(16px, 2.6vw, 50px);   /* … and the image sits a fixed gap beside it (Figma ≈ 70px × 0.9) */
    margin-top: clamp(60px, 6.7vw, 127.8px);
}
.fxl-dark__head .fxl-h2 { grid-column: 2; grid-row: 1; margin: 0; }
.fxl-dark__head .fxl-h2 br { display: none; }
@media (min-width: 992px) { .fxl-dark__head .fxl-h2 br { display: inline; } }
.fxl-dark__decor {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    width: clamp(90px, 10.4vw, 199px);   /* plane 221 × 0.9 */
    max-width: none;                     /* the side grid column is narrow (1fr beside a wide heading); don't let `img { max-width:100% }` shrink the image to it */
    height: auto;
}
.fxl-dark__decor--wallet { width: clamp(70px, 8.3vw, 159px); }
.fxl-dark__decor--coins  { width: clamp(80px, 9.4vw, 181px); }
/* Carbon Credits leaf (Figma 246:3560): LEFT column, bottom level with the "Greener Future" line,
   rotated; leaf-green.png is cropped to the leaf itself */
.fxl-dark__head--decor-left { column-gap: 0; }   /* the leaf carries its own margin */
.fxl-dark__head--decor-left .fxl-dark__decor {
    grid-column: 1;
    justify-self: end;
    align-self: end;
    margin-bottom: clamp(5px, 0.45vw, 9px);   /* line-box padding below the "Greener" glyphs → bottoms align */
    margin-right: clamp(20px, 2.2vw, 43px);
    transform: rotate(-21deg);
    transform-origin: 50% 50%;
}
/* leaf height ≈ the two heading lines */
.fxl-dark__decor--leaf { width: auto; height: clamp(70px, 4.5vw, 125px); }
.fxl-green { color: #35c04c; }
.fxl-dark__intro {
    margin-top: clamp(30px, 3.5vw, 67.5px);
    font-size: clamp(16px, 1.4vw, 27px);
    line-height: 1.35;
    color: #e9e9e9;
    text-align: center;
}
.fxl-dark__min {
    margin-top: clamp(24px, 2.4vw, 46.8px);
    font-size: clamp(16px, 1.4vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fxl-cream);
    text-align: center;
}

.fxl-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.1vw, 39.6px);
    margin-top: clamp(24px, 1.5vw, 29.7px);
}
.fxl-tile {
    background: #fff;
    border-radius: 32px;
    padding: clamp(24px, 2.1vw, 39.6px) clamp(12px, 1.1vw, 21.6px) clamp(24px, 1.9vw, 36px);
    text-align: center;
    box-shadow: 0 7.2px 21.6px rgba(0, 0, 0, .15);
}
.fxl-tile__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(100px, 7.5vw, 144px);
    height: clamp(100px, 7.5vw, 144px);   /* explicit height: aspect-ratio alone let the oversized globe icon stretch it into an ellipse */
    margin: 0 auto clamp(18px, 1.4vw, 27px);
    border-radius: 50%;
    background: #eaf1ff;
}
.fxl-tile__icon { flex: none; width: 62%; height: auto; }
.fxl-tile__icon--foreign { width: 115%; max-width: none; }
.fxl-tile__icon--online { width: 82%; }
.fxl-tile__icon--others { transform: translateX(7px); }   /* artwork is left-heavy; nudge it to sit centred in the disc */
.fxl-tile__icon--contactless { width: 50%; }
.fxl-tile__text {
    font-size: clamp(16px, 1.2vw, 23.4px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--fxl-table);
}

/* spend example table */
.fxl-table-wrap {
    margin-top: clamp(32px, 2.8vw, 54px);
    border: 3px solid #5ba1ff;
    border-radius: 32px;
    background: #fff;
    overflow: hidden;
    overflow-x: auto;
}
.fxl-table {
    width: 100%;
    min-width: 576px;
    border-collapse: collapse;
    color: var(--fxl-table);
    font-weight: 700;
    text-align: center;
}
.fxl-table th, .fxl-table td { padding: clamp(10px, 0.7vw, 13.5px) 7.2px; }
.fxl-table .fxl-table__spend { width: 40%; text-align: left; padding-left: 5.3%; }
.fxl-table th:nth-child(2), .fxl-table td:nth-child(2) { width: 20.6%; }
.fxl-table th:nth-child(3), .fxl-table td:nth-child(3) { width: 16.7%; }
.fxl-table thead th {
    background: var(--fxl-yellow);
    font-size: clamp(16px, 1.4vw, 27px);
    padding-top: clamp(18px, 1.6vw, 30.6px);
    padding-bottom: clamp(18px, 1.6vw, 30.6px);
}
.fxl-table tbody td { font-size: clamp(14px, 1.1vw, 21.6px); }
.fxl-table tbody td:nth-child(4) { font-size: clamp(15px, 1.2vw, 23.4px); }
.fxl-table tbody tr:first-child td { padding-top: clamp(18px, 1.4vw, 27px); }
.fxl-table tbody tr:last-child td { padding-bottom: clamp(18px, 1.4vw, 27px); }
.fxl-table tbody td:not(:first-child) { border-left: 1px solid #d3d3d3; }
.fxl-table tfoot td {
    background: #e9f1ff;
    font-size: clamp(18px, 1.6vw, 31.5px);
    padding-top: clamp(14px, 1.1vw, 21.6px);
    padding-bottom: clamp(14px, 1.1vw, 21.6px);
}

/* programme notes */
.fxl-notes {
    position: relative;
    display: grid;
    grid-template-columns: clamp(160px, 17.1vw, 328.5px) 1fr;
    column-gap: clamp(24px, 3.5vw, 66.6px);
    align-items: center;
    margin-top: clamp(32px, 2.9vw, 55.8px);
    padding: clamp(24px, 2.2vw, 43.2px) clamp(20px, 1.8vw, 32.4px) clamp(20px, 1.8vw, 32.4px) 0;
    border-radius: 32px;
    background: rgba(255, 255, 255, .14);
}
.fxl-notes__art { width: 100%; height: auto; }
.fxl-notes__art--piggy { width: 66%; margin: 0 auto; }
.fxl-notes__art--globe-leaf { width: 62%; margin: 0 auto; }
.fxl-notes__art--chart { width: 70%; margin: 0 auto; }
.fxl-notes__list li {
    margin-bottom: clamp(16px, 1.9vw, 36px);
    padding-left: clamp(52px, 3.9vw, 74.7px);
    background: url("/dcscc/v2/images/flex/landing/tick-round.png") no-repeat 0 0 / clamp(40px, 3.5vw, 66.6px) auto;
    font-size: clamp(15px, 1.1vw, 21.6px);
    line-height: 1.67;
    color: #dedede;
    min-height: clamp(40px, 3.5vw, 66.6px);
}
.fxl-notes__bar {
    grid-column: 1 / -1;
    position: relative;
    margin: clamp(8px, 0.9vw, 18px) 0 0 clamp(0px, 1.4vw, 27px);
    padding: clamp(14px, 1.1vw, 21.6px) clamp(80px, 5.4vw, 99px) clamp(14px, 1.1vw, 21.6px) 3%;   /* 3% left so the longer Carbon / Investment sentence stays on one line */
    border-radius: 999px;
    background: var(--fxl-cream);
    text-align: center;
}
.fxl-notes__bar p {
    font-size: clamp(14px, 1.05vw, 20.5px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--fxl-table);
}
.fxl-notes__bar .fxl-orange { font-size: 1.25em; }
.fxl-notes__bar-icon {
    position: absolute;
    right: 1.7%;
    bottom: 4px;
    width: clamp(44px, 3.9vw, 75.6px);   /* luggage 84 × 0.9 */
    height: auto;
}
.fxl-notes__bar-icon--shield { width: clamp(60px, 5.6vw, 107px); right: 0.3%; bottom: 2px; }
.fxl-notes__bar-icon--leaf   { width: clamp(64px, 6.1vw, 118px); right: 0.2%; bottom: 6px; }
.fxl-notes__bar-icon--wallet { width: clamp(76px, 7.6vw, 146px); right: -2.5%; bottom: 14px; }

/* tile icon leaf badge (Carbon Credits) */
.fxl-tile__circle { position: relative; }
.fxl-tile__badge {
    position: absolute;
    right: 18px;
    bottom: 23px;
    width: 28%;
    height: auto;
    border-radius: 50%;
}

/* carbon offset projects (Carbon Credits panel only) */
.fxl-projects { margin-top: clamp(48px, 5.5vw, 105px); text-align: center; }
.fxl-projects__intro {
    max-width: 1010px;
    margin: clamp(16px, 1.6vw, 30px) auto 0;
    font-size: clamp(15px, 1.1vw, 21.6px);
    line-height: 1.67;
    color: #dedede;
}
.fxl-projects__intro a { color: #fff; font-weight: 700; text-decoration: underline; }
.fxl-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 0.7vw, 13.5px);
    margin-top: clamp(28px, 3vw, 58px);
}
/* flex column so the "Learn More" links line up along the bottom of the row */
.fxl-project { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fxl-project__media { width: 100%; }
.fxl-project__media {
    aspect-ratio: 470 / 429;
    border-radius: 32px;
    overflow: hidden;
    background: #0a2a6b;
}
.fxl-project__media--logo { background: #fff; }
.fxl-project__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fxl-project__media--logo .fxl-project__img { object-fit: contain; padding: 10%; }
.fxl-project__title {
    margin: clamp(16px, 1.5vw, 28px) auto 0;
    max-width: 90%;
    font-size: clamp(18px, 1.4vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.fxl-project__location {
    margin-top: clamp(10px, 1.1vw, 21px);
    font-size: clamp(15px, 1.2vw, 23.4px);
    color: #fff;
}
.fxl-project__text {
    max-width: 88%;
    margin: clamp(12px, 1.3vw, 25px) auto 0;
    font-size: clamp(14px, 1.1vw, 21.6px);
    line-height: 1.2;
    color: #dedede;
}
.fxl-project__note {
    max-width: 88%;
    margin: 0 auto;
    font-size: clamp(12px, 0.95vw, 18px);
    line-height: 1.2;
    color: #dedede;
}
.fxl-project__more {
    display: inline-block;
    margin-top: auto;
    padding-top: clamp(16px, 1.6vw, 30px);
    font-size: clamp(15px, 1.2vw, 23.4px);
    font-weight: 700;
    color: var(--fxl-yellow);
    text-decoration: underline;
}
.fxl-project__more:hover { color: #fff; }
/* Figma: the flat bottom edge runs through the middle of the CTA, the button hangs into the bulge */
.fxl-dark .fxl-cta { margin-top: clamp(48px, 5.8vw, 111.6px); margin-bottom: clamp(-40px, -2.1vw, -24px); }

/* ---- FINANCIAL CONTROL -------------------------------------------------- */
.fxl-fin {
    padding-top: calc(var(--fxl-bulge-b) + clamp(40px, 5vw, 95.4px));
    padding-bottom: clamp(32px, 3.1vw, 59.4px);
}
.fxl-fin__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 1.9vw, 36px);
    margin-top: clamp(32px, 3.2vw, 63px);
}
.fxl-fcard {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.2vw, 21.6px);
    background: #fff;
    border: 2px solid #7db4ff;
    border-radius: 32px;
    padding: clamp(20px, 1.4vw, 27px) clamp(18px, 1.4vw, 25.2px) clamp(20px, 1.4vw, 27px) clamp(20px, 1.7vw, 32.4px);
    box-shadow: 0 5.4px 18px rgba(0, 0, 0, .06);
}
.fxl-fcard__icon {
    position: relative;
    flex: 0 0 clamp(70px, 4.9vw, 93.6px);
    width: clamp(70px, 4.9vw, 93.6px);
    height: clamp(70px, 4.9vw, 93.6px);
}
.fxl-fcard__icon::before {
    content: "";
    position: absolute;
    right: -4px; bottom: -4px;
    width: 66%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--fxl-yellow);
}
.fxl-fcard__icon img { position: relative; display: block; width: 86%; height: auto; }
.fxl-fcard__title {
    margin-bottom: .6em;
    font-size: clamp(18px, 1.4vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fxl-navy-2);
}
.fxl-fcard__text { font-size: clamp(14px, 1.1vw, 21.6px); line-height: 1.25; color: var(--fxl-grey); }

/* ---- ELIGIBILITY & FEES ------------------------------------------------- */
.fxl-elig { padding: clamp(32px, 3.1vw, 59.4px) 0 clamp(28px, 2.7vw, 50.4px); }
.fxl-elig__box {
    display: grid;
    grid-template-columns: minmax(0, 47.5fr) minmax(0, 52.5fr);   /* same 47.5 / 52.5 split, but the gap is carved out of it */
    column-gap: clamp(32px, 4vw, 72px);                            /* keep the two columns clearly apart at every width */
    margin-top: clamp(24px, 2.7vw, 50.4px);
    padding: clamp(32px, 4vw, 76.5px) clamp(24px, 3.8vw, 59.4px) clamp(32px, 3.3vw, 64.8px);
    border-radius: 48px;
    background: linear-gradient(180deg, #effaff 0%, var(--fxl-cream) 100%);
}
.fxl-elig__col { display: flex; flex-direction: column; }
.fxl-elig__title {
    margin-bottom: clamp(20px, 1.9vw, 36px);
    padding-left: clamp(44px, 2.8vw, 54px);
    font-size: clamp(22px, 1.6vw, 31.5px);
    font-weight: 700;
    color: var(--fxl-navy);
}
.fxl-elig .fxl-checks li {
    margin-bottom: clamp(16px, 1.8vw, 36px);
    font-size: clamp(15px, 1.1vw, 21.6px);
    font-weight: 700;
    line-height: 1.85;
    color: var(--fxl-grey);
}
.fxl-elig .fxl-checks del { text-decoration-thickness: 2px; }
.fxl-elig__gst {
    padding-left: clamp(44px, 2.8vw, 54px);
    font-size: clamp(13px, 0.9vw, 18px);
    color: var(--fxl-grey);
}
.fxl-elig__link-row {
    margin-top: auto;
    padding: clamp(24px, 2.3vw, 45px) 0 0 clamp(44px, 2.8vw, 54px);
}

/* ---- DOWNLOAD / APPLY --------------------------------------------------- */
.fxl-app { padding: clamp(28px, 2.7vw, 50.4px) 0 clamp(48px, 6vw, 116.1px); background: #dedede; }
.fxl-app__wrap { max-width: 1089.9px; }       /* Figma content column 1153 × 0.9 (+ gutters) */
.fxl-app__inner {
    display: grid;
    grid-template-columns: auto auto;          /* copy + phone hug each other … */
    justify-content: start;                    /* … at a fixed gap (Figma 138 × 0.9), no stretch */
    align-items: center;
    column-gap: clamp(32px, 6.5vw, 124px);
}
/* "Apply Now. / Use Instantly." — brush stroke sits under the second line, flush left */
.fxl-app__title { margin-top: clamp(8px, 0.8vw, 16px); }
.fxl-app .fxl-h2--left.fxl-h2--underline::after { margin-left: 0; }
.fxl-app__sub {
    margin-top: 0;
    font-size: clamp(22px, 1.9vw, 36px);
    font-weight: 700;
    color: var(--fxl-blue-3);
}
.fxl-app__text {
    max-width: 22em;
    margin-top: clamp(14px, 1.2vw, 24px);
    font-size: clamp(16px, 1.4vw, 27px);
    line-height: 1.67;
    color: var(--fxl-grey);
}
.fxl-app { --fxl-badge-h: clamp(48px, 4.9vw, 93.6px); --fxl-badge-gap: clamp(14px, 1.1vw, 19.8px); }
.fxl-app__badges { display: flex; flex-wrap: wrap; gap: var(--fxl-badge-gap); margin-top: clamp(24px, 3.1vw, 59.4px); }
.fxl-app__badge { height: var(--fxl-badge-h); width: auto; }   /* badge PNGs are 664 × 209 → 3.177 : 1 */
/* Apply button = exactly the width of the two badges + their gap; smaller type so it stays one line */
.fxl-app .fxl-btn--apply {
    display: flex;
    width: calc(2 * 3.177 * var(--fxl-badge-h) + var(--fxl-badge-gap));
    margin-top: clamp(24px, 1.9vw, 36.9px);
    padding: clamp(12px, 0.9vw, 17.1px) 24px;
    gap: clamp(14px, 1.3vw, 24px);
    font-size: clamp(16px, 1.35vw, 26px);
}
.fxl-app__phone { text-align: center; }
.fxl-app__phone-img { width: clamp(180px, 13.1vw, 252px); height: auto; }

/* ---- FAQs --------------------------------------------------------------- */
.fxl-faq {
    background: #dedede;
    border-radius: 48px 48px 0 0;                      /* grey block now sits between two white sections */
    padding: clamp(40px, 3.8vw, 73.8px) 0 clamp(40px, 4.4vw, 84.6px);
}
.fxl-faq__list {
    counter-reset: fxl-faq;
    display: grid;
    gap: clamp(14px, 1vw, 19.8px);
    max-width: 1242px;
    margin: clamp(30px, 2.8vw, 54px) auto 0;
}
.fxl-faq__item {
    counter-increment: fxl-faq;
    position: relative;
    background: #fff;
    border-radius: 32px;
    padding: clamp(24px, 2.2vw, 43.2px) clamp(20px, 2.7vw, 54px) clamp(24px, 2.2vw, 43.2px) clamp(56px, 4.3vw, 82.8px);
}
.fxl-faq__item::before {
    content: counter(fxl-faq);
    position: absolute;
    left: clamp(20px, 1.8vw, 34.2px);
    top: clamp(24px, 2.2vw, 41.4px);
    font-size: clamp(22px, 1.6vw, 31.5px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fxl-navy);
}
.fxl-faq__q {
    margin: 0;
    font-size: clamp(18px, 1.3vw, 25.2px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fxl-navy);
}
/* the question is the accordion toggle: a full-width button with a chevron on the right */
.fxl-faq__toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.fxl-faq__toggle:focus-visible { outline: 2px solid var(--fxl-blue); outline-offset: 6px; border-radius: 4px; }
.fxl-faq__chev {
    flex: 0 0 auto;
    width: .55em;
    height: .55em;
    margin-top: .3em;                                  /* optically centre on the first line of the question */
    margin-right: .15em;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);                          /* points down while collapsed */
    transition: transform .3s ease;
}
.fxl-faq__item.is-open .fxl-faq__chev { transform: translateY(.25em) rotate(-135deg); }   /* points up; the shift keeps its visual centre where the down chevron sat */
/* answer: collapsed by default, slides open via grid-row animation (no fixed max-height needed) */
.fxl-faq__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.fxl-faq__body-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .3s;
}
.fxl-faq__item.is-open .fxl-faq__body { grid-template-rows: 1fr; }
.fxl-faq__item.is-open .fxl-faq__body-inner { visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .fxl-faq__chev, .fxl-faq__body, .fxl-faq__body-inner { transition: none; }
}
.fxl-faq__a {
    padding-top: .9em;                                 /* the gap the question's bottom margin used to give */
    max-width: 1098px;
    font-size: clamp(14px, 0.9vw, 18px);
    line-height: 1.4;
    color: var(--fxl-grey);
}
.fxl-faq__bullets { list-style: disc; margin-top: 9px; padding-left: 1.4em; max-width: 900px; }
.fxl-faq__bullets li {
    margin-top: clamp(8px, 0.7vw, 12.6px);
    font-size: clamp(14px, 0.9vw, 18px);
    line-height: 1.4;
    color: var(--fxl-grey);
}
.fxl-faq__more { margin-top: clamp(24px, 1.9vw, 36px); text-align: center; }

/* ---- FOOTER ------------------------------------------------------------- */
.fxl-footer { background: #dedede; color: #fff; }   /* shows through the panel's rounded top corners; the download section above is white */
.fxl-footer__panel {
    background: #0b3ed6 url("/dcscc/v2/images/flex/landing/footer-bg.jpg") no-repeat center / cover;
    border-radius: 48px 48px 0 0;
    padding: clamp(32px, 2.7vw, 52.2px) 0 clamp(20px, 1.4vw, 27px);
}
/* footer content column = FAQ card width (1242px list + 2 × 12px gutter) */
.fxl-footer .fxl-container { max-width: 1266px; }
.fxl-footer__logo { display: block; width: clamp(80px, 5.2vw, 99px); height: auto; }
.fxl-footer__tnc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(16px, 1.8vw, 36px);
    margin-top: clamp(28px, 2.2vw, 43.2px);
}
.fxl-footer__pill {
    flex: 1 1 40%;
    padding: clamp(10px, 0.7vw, 13.5px) clamp(20px, 1.4vw, 25.2px);
    border: 3px solid var(--fxl-yellow);
    border-radius: 999px;
    color: #fff;
    font-size: clamp(16px, 1.4vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
.fxl-footer__pill:hover { background: rgba(253, 219, 3, .15); color: #fff; }
.fxl-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: clamp(28px, 2.7vw, 52.2px);
}
.fxl-footer__nav li { padding: 4px clamp(10px, 1.3vw, 25.2px); border-left: 3px solid var(--fxl-yellow); }
.fxl-footer__nav li:first-child { border-left: 0; padding-left: 0; }
.fxl-footer__nav li:last-child { padding-right: 0; }
.fxl-footer__nav a { color: #fff; font-size: clamp(14px, 1.1vw, 21.6px); }
.fxl-footer__nav a:hover { color: var(--fxl-yellow); }
.fxl-footer__social {
    display: flex;
    justify-content: center;
    gap: clamp(30px, 2.3vw, 45px);
    margin-top: clamp(30px, 4vw, 77.4px);
}
.fxl-footer__social img { width: clamp(32px, 1.9vw, 36.9px); height: auto; }
.fxl-footer__copy {
    margin-top: clamp(18px, 1.3vw, 23.4px);
    font-size: clamp(12px, 0.8vw, 16.2px);
    color: #b8b8b8;
    text-align: center;
}

/* the shared "required documents" partial ships its own yellow trigger button; hide it */
.fxl-hidden-trigger > p { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    /* hero: copy overlays the KV instead of stacking under it; the KV covers a taller portrait box
       and a soft white gradient behind the copy keeps it legible */
    .fxl-hero {
        display: flex;
        align-items: flex-end;
        width: 100%;                           /* height comes from the copy; the KV just covers whatever that is */
        overflow: hidden;
    }
    .fxl-hero__kv {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: 62% top;
    }
    .fxl-hero__content {
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 72px 20px 18px;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.62) 22%, rgba(255,255,255,.64) 100%);
    }

    .fxl-gift__cards { grid-template-columns: 1fr; max-width: 576px; gap: 10.8px; }
    .fxl-gift__or { margin: 4px 0; }

    /* card designs: side-by-side slider (one design per screen) that auto-advances / can be swiped */
    .fxl-style__grid {
        display: flex;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }
    .fxl-style__grid::-webkit-scrollbar { display: none; }
    .fxl-style__item { flex: 0 0 100%; scroll-snap-align: start; }
    .fxl-tailor__grid { grid-template-columns: repeat(2, 1fr); }

    .fxl-dark__decor { display: none; }
    /* narrow screens: a stretched full-depth curve looks like a deep U, so the white top becomes a
       flat 160px band (room for the selector) ending in a shallow 70px arc, and the bottom bulge
       is only 44px deep */
    :root { --fxl-bulge: 230px; --fxl-bulge-b: 44px; }
    /* selector (≈157px tall, starts 40px above the dark block) ends ~117px in; the white area is
       230px deep at the centre, so push the first heading clear of it */
    .fxl-dark__head { margin-top: 140px; }
    /* narrow screens: the CTA sits fully inside the blue block instead of straddling its edge */
    .fxl-dark .fxl-cta { margin-bottom: 0; }
    .fxl-dark { padding-bottom: 40px; }
    .fxl-dark::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 230' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0H390V160C260 253 130 253 0 160Z'/%3E%3C/svg%3E");
    }
    .fxl-tiles { grid-template-columns: repeat(2, 1fr); }
    .fxl-notes { grid-template-columns: 1fr; padding-left: clamp(20px, 1.8vw, 32.4px); row-gap: 14.4px; }
    .fxl-notes__art { width: 180px; margin: 0 auto; }
    .fxl-notes__art--piggy, .fxl-notes__art--globe-leaf, .fxl-notes__art--chart { width: 140px; }
    /* projects become a horizontal, swipeable carousel (native scroll-snap; next card peeks in) */
    .fxl-projects__grid {
        display: flex;
        gap: 16px;
        margin-left: -12px;
        margin-right: -12px;
        padding: 4px 12px 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x pan-y;   /* its own scroll container: horizontal swipe scrolls the cards, not the reward panel */
    }
    .fxl-projects__grid::-webkit-scrollbar { display: none; }
    .fxl-project {
        flex: 0 0 82%;
        max-width: 360px;
        scroll-snap-align: center;
    }
    .fxl-notes__bar { margin-left: 0; }

    .fxl-fin__grid { grid-template-columns: repeat(2, 1fr); }

    .fxl-elig__box { grid-template-columns: 1fr; row-gap: 28.8px; }
    .fxl-br-lg { display: none; }   /* "(First year FREE)" follows the fee on the same line when stacked */
    .fxl-elig__link-row { margin-top: 0; padding-top: 10.8px; }

    .fxl-app__inner { grid-template-columns: 1fr; text-align: center; }
    .fxl-app .fxl-h2--left { text-align: center; }
    .fxl-app .fxl-h2--left.fxl-h2--underline::after { margin-left: auto; }
    .fxl-app__text { margin-left: auto; margin-right: auto; }
    .fxl-app__badges { justify-content: center; }
    .fxl-app .fxl-btn--apply { margin-left: auto; margin-right: auto; }

    .fxl-footer__logo { margin: 0 auto; }
    .fxl-footer__pill { flex-basis: 100%; white-space: normal; }
    .fxl-footer__nav { justify-content: center; row-gap: 7.2px; }
    .fxl-footer__nav li:first-child { padding-left: clamp(10px, 1.3vw, 25.2px); }
    .fxl-footer__nav li:last-child { padding-right: clamp(10px, 1.3vw, 25.2px); }
}

@media (max-width: 767.98px) {
    .fxl-fin__grid { grid-template-columns: 1fr; }
    .fxl-notes__bar { border-radius: 28.8px; padding-right: 20%; }
    .fxl-btn { white-space: normal; text-align: center; }
    .fxl-footer__nav li { border-left: 0; }
}

@media (max-width: 575.98px) {
    .fxl-gcard { border-radius: 28.8px; }
    .fxl-gcard__media { border-radius: 21.6px; }
    .fxl-gcard__overlay--miles { top: 26%; }
    .fxl-gift__period { border-width: 3px; }
    .fxl-tailor__grid, .fxl-tiles { grid-template-columns: 1fr; max-width: 324px; margin-left: auto; margin-right: auto; }
    .fxl-tile__badge { right: 15px; bottom: 20px; }   /* single-column tiles: pull the leaf badge in toward the icon */
    /* badges are 48px tall here → button ≈ 319px wide; tighten type/padding so the label stays on one line */
    .fxl-app .fxl-btn--apply { font-size: 15px; padding-left: 14px; padding-right: 14px; gap: 10px; }
    .fxl-selector { gap: 14.4px; }
    .fxl-faq__item { border-radius: 21.6px; }
    .fxl-footer__panel, .fxl-elig__box { border-radius: 28.8px 28.8px 0 0; }
    .fxl-faq { border-radius: 28.8px 28.8px 0 0; }
    .fxl-elig__box { border-radius: 28.8px; }
}