/* common class */
.font-02 {
    font-weight: 500;
    font-size:1.8rem;
    line-height: normal;
    letter-spacing: 0;
}

.font-03 {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gx-grey);
}

.flip-vertical {
    transform: scaleY(-1);
}
.GX-ai-chip>img {
    max-height: 75px;
}

/* mobile orientation: portrait */
@media (max-width: 991.98px) and (min-height: 501px),
       (max-width: 991.98px) and (orientation: portrait) {
        .hero-mobile-vh-100 {
            min-height: 100vh;
        }
        .mobile-vh-100 {
            /* min-height: 100vh; */
            min-height: calc(100vh - 54px);
        }
        .mobile-vh-30 {
            min-height: 30vh;
        }
        .mob-v-align-center {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

    .GX-ai-chip img {
        height: 3.5rem;
        width: auto;
    }
}


.hero-banner-img-2026 { 
    display: inline-block;
    padding:5.5rem 0 0rem;
    /* height: 45vh; */
    /* background-color: blue; */
    width: 50vw;
}


.chartis-logo-wrapper {
    position: absolute;
    top: 95px;
    right: 3rem;
   display: flex;
   flex-direction: column;
    z-index: 9;
}
.GX-ai-chip {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 9
}

.gx-logo-marquee__img {
    opacity: 0.5;
}

.font-nom-grey {
    color:var(--gx-grey);
    /* font-size: 20px; */
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 400;
}

.hero-bottom-text {
    transform: translateY(-2rem);
    /* font-family:Georgia, "Times New Roman", serif; */
    font-size: 1.6rem;
    font-weight: 400;
}



.slim-btn {
    background-color:#000000;
    padding:0.6rem 0;
    min-width: 250px;
    color:var(--gx-white);
    border:1px solid var(--gx-white);
    font-size: 1rem;
    font-size: clamp(0.875rem, 0.9vw, 1rem);
    font-weight: 400;
    display:inline-block;
    letter-spacing: -0.02em;
}
.slim-btn:hover {
    background-color:var(--gx-black);
    color:var(--gx-white);
}
.dtv-card-font {
    font-weight:500; font-size:3rem; line-height:1;
    display:block; width:100%
}
/* "Discover the value" on phones and tablets: smaller card text, and small buttons that
   keep their own width and sit on the left (side by side when they fit, else stacked). */
@media (max-width: 991.98px) {
    #section_value .dtv-card-font { font-size: 1.3rem; line-height: 1.1; }
    /* All three cards as tall as the tallest: the cards are rows of a grid whose rows are
       equal (1fr), and each card fills its row. The card's content is a column, so the
       buttons (margin-top: auto) sit at the bottom of every card, not under the text. */
    /* One column as wide as the row (minmax(0, 1fr)): without it the row's
       justify-content-center shrank the column to its content, so on tablets the cards
       were about 400px wide in the middle of the screen (tracker bug 5). */
    #section_value .card-ai-row { display: grid; grid-auto-rows: 1fr; grid-template-columns: minmax(0, 1fr); }
    #section_value .card-ai-row > .card-ai > div { height: 100%; display: flex; flex-direction: column; }
    #section_value .card-ai-row > .card-ai > div > .position-relative { flex: 1 1 auto; display: flex; flex-direction: column; }
    #section_value .card-ai-row .card-ai-btns { margin-top: auto; }
    /* min-width makes both buttons in a card the same size (wide enough for the longest label). */
    #section_value .slim-btn { min-width: 10rem; flex: 0 0 auto; padding: 0.4rem 0.9rem; font-size: 0.875rem; text-align: center; }
    /* "Enterprise Ready": one card a row on phones, two on tablets. Half the screen
       height each would make four stacked cards very long. */
    #section_enterprise .card-ai-height-50vh { min-height: 300px; }
    #section_enterprise .font-02 { font-size: 1.5rem; }
}
/* "Discover the value" on tablets (768–991px): the cards are full width there, so the
   text is larger than on phones (desktop: 3rem). */
@media (min-width: 768px) and (max-width: 991.98px) {
    #section_value .dtv-card-font { font-size: 2rem; }
}
/* "Discover the value" on tablets held upright (e.g. iPad portrait): the title and all three
   cards fit one screen under the fixed header (54px). The section is one screen tall with its
   content centred; cards are as tall as their content (no 30vh floor), and the 3rem paddings
   (section, container, above the cards) are smaller. !important: overrides the view's
   py-5 / pt-5 utilities. If the cards' content grows, re-check at 810x950 (iPad 9th gen). */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    #section_value { padding-top: 0 !important; padding-bottom: 0 !important; }
    #section_value > .container-fluid {
        min-height: calc(100vh - 54px);
        min-height: calc(100svh - 54px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    /* width: its mx-auto would otherwise shrink the row to its content in the flex column. */
    #section_value .card-ai-row { padding-top: 1.5rem !important; width: 100%; }
    #section_value .mobile-vh-30 { min-height: 0; }
    #section_value .card-copy { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}
/* "Enterprise Ready" on tablets and desktop (768px and up): text (.gx-er-text) at the bottom of
   each card, the titles in a card row at the same height, each description right under its
   title. Each card row is a grid of a 1fr filler row and an auto text row; cards and their
   inner boxes share those rows (subgrid), so the text row fits the longest text in the row.
   Phones (under 768px) use the slider instead and are not touched.
   !important: overrides the view's d-flex and justify-content-end utilities. */
@media (min-width: 768px) {
    #section_enterprise [data-mobile-slider] {
        display: grid;
    }
    #section_enterprise [data-mobile-slider] > .card-ai {
        width: auto;   /* the col-md-6 / col-lg-3 percentage would be a part of the grid cell */
        grid-row: span 2;
        display: grid;
        grid-template-rows: subgrid;
    }
    #section_enterprise [data-mobile-slider] > .card-ai > div {
        grid-row: span 2;
        display: grid !important;
        grid-template-rows: subgrid;
        /* The view's justify-content-end would shrink the text column and push it right. */
        justify-content: normal !important;
    }
    #section_enterprise .gx-er-text { grid-row: 2; }
}
/* Tablets held upright (768-991px, e.g. iPad portrait): two cards a row, so two card rows. */
@media (min-width: 768px) and (max-width: 991.98px) {
    #section_enterprise [data-mobile-slider] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 1fr auto 1fr auto;
    }
}
/* Desktop (992px and up): four cards in one row. */
@media (min-width: 992px) {
    #section_enterprise [data-mobile-slider] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 1fr auto;
        /* The cards' card-ai-height-50vh no longer applies inside the grid, so the row
           keeps them 50vh tall: 50vh + its py-5 (6rem) + the cards' g-3 top margin. */
        min-height: calc(50vh + 6rem + var(--bs-gutter-y));
    }
}
/* Wide screens held upright (992px and wider, portrait: portrait monitors, tall desktop
   windows): two cards a row, as on the 768-991px tablets. Four in a row at 50vh made each
   card about 205x683 on a 1024x1366 screen. The 10rem floor on the filler rows keeps some of
   each card's background video above its text. Upright iPads get the slider below instead. */
@media (min-width: 992px) and (orientation: portrait) {
    #section_enterprise [data-mobile-slider] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(10rem, 1fr) auto minmax(10rem, 1fr) auto;
        min-height: 0;
    }
}
/* Touch tablets held upright (768px and wider, portrait, touch: every iPad held upright) get
   the phone slider, like the iPad mini: scripts/gxMobileCardSlider.js starts it there too
   (its MOBILE_MQ). Once the slider runs, the row is a block, not the 768px-and-up grid, and
   loses the px-md-5 / mxw-90-desktop room the grid had, as on phones. The cards keep the
   phone height (300px) and heading size, which otherwise stop at 991px. */
#section_enterprise [data-mobile-slider].slick-initialized {
    display: block;
    min-height: 0;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (min-width: 992px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
    #section_enterprise .card-ai-height-50vh { min-height: 300px; }
    #section_enterprise .font-02 { font-size: 1.5rem; }
}

/* ---- Card row as a slider on phones ([data-mobile-slider], today the "Enterprise Ready" row) ----
   Under 768px scripts/gxMobileCardSlider.js turns the row into a slick slider that looks like
   the "Voice of Customer" one on phones: one card at a time, 3rem space each side, dots under
   it. Wider screens keep the Bootstrap grid (the script removes the slider there).
   The rules only apply once slick has started (.slick-initialized). */
[data-mobile-slider].slick-initialized { display: block; }   /* the row is flex; slick needs a block box */
/* Every card as tall as the tallest, with the card box filling its slide. slick.css sets
   slides to display: block, which would stop the card box stretching. */
[data-mobile-slider] .slick-track { display: flex; }
[data-mobile-slider] .slick-slide { display: flex; height: auto; padding: 0 3rem; }
[data-mobile-slider] .slick-slide > * { width: 100%; }
/* 768px and wider (touch tablets held upright): two cards at a time, so a smaller space
   between them (0.5rem each side) instead of the phone's 3rem. The row's own px-md-5 is
   removed above, so the cards line up with the title block's width. */
@media (min-width: 768px) {
    [data-mobile-slider] .slick-slide { padding: 0 0.5rem; }
    /* Two cards side by side: their titles must start at the same height, as in the grid
       above. Without this the card with the shorter description had its title lower (the
       text sits at the bottom of each card). The track is a grid of a 1fr filler row and an
       auto text row; slides and their inner boxes share those rows (subgrid), so the text
       row fits the longest text of all cards and every title lines up, also while sliding.
       !important: overrides the view's d-flex and justify-content-end utilities. */
    #section_enterprise [data-mobile-slider] .slick-track {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: 1fr auto;
        /* The cards' own min-height (300px) is not applied to slides that share the
           track's rows, so the track keeps the card height; the spare goes to the 1fr row. */
        min-height: 300px;
    }
    #section_enterprise [data-mobile-slider] .slick-slide {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
    #section_enterprise [data-mobile-slider] .slick-slide > div {
        display: grid !important;
        grid-row: span 2;
        grid-template-rows: subgrid;
        justify-content: normal !important;
    }
}
/* Dots in the row's own bottom padding (py-5): slick puts them 50px under the row, which the
   section (overflow-hidden) would cut off. */
[data-mobile-slider] .slick-dots { bottom: -1rem; }

/* "Proven with FIs": slick's default dots are 16px on desktop; use 10px like the
   "Voice of Customer" slider (.slider-arrow-position in gxhome2025.css). */
.gx-proven-slider .slick-dots li button:before {
    width: 10px;
    height: 10px;
}
/* "Proven with FIs" on phones: the big figures ("30-50%", "75-95%") are 9rem there, about
   268px wide, and with the card's 3rem side padding only ~262-286px is free, so on a
   slightly narrower phone (or a scrollbar) "30-50%" broke onto two lines. Less side padding,
   a font that follows the screen width (the text is about 1.86em wide), and no wrapping.
   Only this slider: .big-block-number-text is shared with other sections. */
@media (max-width: 575.98px) {
    .gx-proven-slider .col-auto { padding-left: 1rem !important; padding-right: 1rem !important; }
    .gx-proven-slider .big-block-number-text {
        font-size: min(9rem, 38vw);
        line-height: 1.11;
        white-space: nowrap;
    }
}

/* section 3 */
.section3-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.25;
}

/* Section 5 */



.card-ai-height-50vh {
    min-height: 50vh
}
.video-glow-bg {
    background: #000 ;
    background-size: cover;
    color: var(--gx-white);
}

/* Header: no animated padding. gxStyle.css gives .navbar "transition: all 0.3s". When a
   popup (e.g. "Book a demo") opens, the page scrollbar goes and Bootstrap pads the fixed
   header by the scrollbar's width so its content stays put; animating that padding made the
   menu button and "Book a demo" slide sideways on every open and close. Colours and shadow
   still fade. (Only the homepage loads this file; other pages keep the old behaviour.) */
#site-header-inner { transition-property: background-color, color, box-shadow, opacity, transform; }

/* ---- Home 26 header "Book a demo" button (Views/gxMasterLayout.cshtml, homepage only) ----
   Figma "Header (existing — keep live header)": blue pill, Indivisible SemiBold, 20px from
   the menu icon (8px margin + the menu button's own 12px padding). Figma's 176x44 / 20px
   text looked too big live, so desktop is 36px tall with 16px text.
   Smaller on tablets and phones so it fits beside the logo. */
.gx-header-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0 1rem;
    margin-right: 0.5rem;
    border-radius: 3rem;
    background-color: #0064FF;
    color: #FFFFFF;
    font-family: indivisible, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.gx-header-demo-btn:hover,
.gx-header-demo-btn:focus {
    background-color: #0052D1;
    color: #FFFFFF;
}
.gx-header-demo-btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}
/* Narrowest phones (320px): keep clear space between the logo and the button. */
@media (max-width: 359.98px) {
    .gx-header-demo-btn { padding: 0 0.75rem; margin-right: 0.25rem; font-size: 0.8125rem; }
}
@media (min-width: 576px) {
    .gx-header-demo-btn { height: 2.5rem; padding: 0 1.25rem; font-size: 1rem; }
}
@media (min-width: 992px) {
    .gx-header-demo-btn { height: 2.25rem; padding: 0 1.125rem; font-size: 1rem; }
}

/* ---- Home 26 hero slider (#section_hero) ----
   Every rule here starts with #section_hero so it cannot reach other sections.
   Playback is in scripts/gxHeroSlider.js. */

/* Desktop or mobile copy of the slider. Same switch as brokerx-website: under
   992px shows the mobile copy, except a phone held sideways (500px tall or less),
   which gets the desktop copy. Keep in sync with MOBILE_MQ in gxHeroSlider.js. */
#section_hero .gx-hero-slider--desktop { display: none; }
#section_hero .gx-hero-slider--mobile { display: block; }

/* Full screen height on desktop only. Under 992px the hero is as tall as its content,
   so a tall phone does not get empty space under the logo marquee.
   --gx-hero-chrome is everything in the hero except the video (nav clearance, title,
   caption, dots, "Live in production" line, logo marquee, paddings). The video gets what
   is left of the screen height, so the whole hero fits one screen on any desktop size
   or browser zoom. Check it when you change a margin or padding in the hero. */
/* --gx-hero-overlap: share of the video's height that sits under the AI chip (see
   ".hero-banner-img-2026 > .ratio" below). The desktop sizing takes it into account. */
#section_hero { --gx-hero-overlap: 0.12; }
/* The Chartis logos in the top-right corner (.chartis-logo-wrapper, position: absolute) are
   placed in the hero, not the browser window. Placed in the window, they moved sideways when
   a popup (e.g. "Book a demo") hid the page scrollbar and the window got wider. The hero is
   the first thing on the page, so they sit where they did before. */
#section_hero { position: relative; }
@media (min-width: 992px) {
    #section_hero {
        /* Includes the 5.3125rem (the chip height) left above the video for the AI chip (see
           .hero-banner-img-2026 in the desktop slider below). Measured: 30.1rem at 1400px wide,
           31rem at 1745px (the title grows with the width), plus a few px spare. */
        --gx-hero-chrome: 31.5rem;
        min-height: 100vh;
        min-height: 100svh;
    }
}
/* Under 1200px the Chartis logos sit in a row under the slider (d-xl-none) instead of
   the top-right corner, so the hero has that much more besides the video. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #section_hero { --gx-hero-chrome: 36.5rem; }   /* measured: 35.9rem */
}
/* Touch tablets held sideways (iPad landscape is 1024–1194px wide, about 700–820px tall
   in the browser). Fitting the whole hero as above left the video 320–480px wide (a quarter
   to 40% of the screen), with the AI chip crowding its top (tracker bugs 9 and 10); leaving
   the Chartis logos and logo marquee below the screen then hid the marquee. So here the
   hero is made shorter, and all of it fits one screen with the video still near half the
   screen width:
   - Chartis logos in the top-right corner, as from 1200px (not in a row under the dots)
   - the AI chip at its tablet size (3.5rem, not 85px), with 3.5rem left above the video
   - less space above the title (1.5rem, not 3rem) and between the lines under the dots
   --gx-hero-chrome: 22.7rem was measured down to the dots, less the video, before these
   changes; less the chip (1.8rem) and the top space (1.5rem) that is 19.4rem, plus about
   5.7rem under the dots and 1rem spare. Estimated, not measured: if the marquee drops below
   the screen on an iPad, raise it. Touch only, so a desktop window of this width keeps the
   layout above. */
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #section_hero {
        --gx-hero-chrome: 26rem;
        padding-bottom: 0.5rem !important;   /* pb-lg-3 */
    }
    #section_hero > .container-fluid { padding-top: 1.5rem !important; }   /* pt-5 */
    #section_hero .chartis-logo-wrapper { display: block !important; }    /* d-none d-xl-block */
    #section_hero .gx-hero-chartis-row { display: none !important; }      /* d-flex ... d-xl-none */
    #section_hero .gx-hero-slider--desktop .GX-ai-chip img { height: 3.5rem; width: auto; }
    /* The 3.5rem space above the video is after the desktop rule below, so it wins. */
    #section_hero .gx-hero-live { margin-top: 0.5rem !important; }        /* mt-4 */
    #section_hero .gx-hero-marquee { padding-top: 0.5rem !important; }    /* pt-3 */
}

/* SLM section */
.slm-img {
    max-height: 80vh;
    margin: 0 auto;
    max-width: 100%;
}
.slm-icon {
    max-height: 3.5rem;
    margin:0 auto
}
.update-divider {
    border-bottom:1px solid #666666
}

@media (min-width: 992px), (max-height: 500px) and (orientation: landscape) {
    #section_hero .gx-hero-slider--desktop { display: block; }
    #section_hero .gx-hero-slider--mobile { display: none; }
}

/* Before the slider starts, show only the first slide instead of all of them stacked. */
#section_hero .gx-hero-slider:not(.slick-initialized) > :not(:first-child) { display: none; }

/* Dots and pause button: they share the section 2 rules ("Controls under the cards" below).
   The 0.75rem gap above plus the 36px pill take the same 48px the old dots' margin did, so
   --gx-hero-chrome did not change. Which copy shows is set after those rules. */

/* AI chip per slide: data-hero-chip="hide" on a slide hides its chip. */
#section_hero [data-hero-chip="hide"] .GX-ai-chip { display: none; }

/* Mobile video. The frame takes the video's own shape (gxHeroSlider.js sets
   --bs-aspect-ratio and --gx-hero-ar when the video loads; 16:9 until then).
   Width: nearly full width on phones, at most 32rem (about half an upright tablet),
   and never taller than 55% of the screen. svh ignores the phone's address bar;
   browsers without svh use the vh line. */
#section_hero .gx-hero-slider--mobile .hero-banner-img-2026 {
    width: min(calc(100vw - 2rem), 32rem, calc(55vh * var(--gx-hero-ar, 1.7778)));
    width: min(calc(100vw - 2rem), 32rem, calc(55svh * var(--gx-hero-ar, 1.7778)));
    /* Room for the AI chip above the video (the chip is 3.5rem tall on mobile, at the top
       of the slide): the chip touches the video but does not cover it. Every slide keeps
       it, also those with data-hero-chip="hide", so the video does not jump between slides
       (the desktop slider does the same below). */
    padding-top: 3.5rem;
}

/* Tablets held upright (768–991px, portrait, e.g. iPad): the video covers the space the rest
   of the hero leaves, so there are no black gaps. The 32rem cap above left it about 60% of the
   screen width, and even full width a 16:9 video left black bands above and below it in the
   one-screen-tall hero.
   - width: the full width less 1rem each side
   - height: the screen height less the rest of the hero (--gx-hero-chrome), plus the part
     under the AI chip (it takes no room: the margin-top above), but never shorter than 16:9.
     The frame is then a bit taller than the video, and the video (object-fit: cover) fills it,
     cropping a little off its left and right edges (about 8% each side on an iPad Air).
   ::before is Bootstrap's .ratio spacer, which would set the height from the width.
   --gx-hero-chrome is an estimate from the CSS (about 35rem at 820px wide, plus spare): if
   the logo marquee drops below the screen on an iPad, raise it; if a gap is left, lower it. */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    #section_hero {
        --gx-hero-chrome: 36rem;
        --gx-hero-tab-w: calc(100vw - 2rem);
    }
    #section_hero .gx-hero-slider--mobile .hero-banner-img-2026 { width: var(--gx-hero-tab-w); }
    #section_hero .gx-hero-slider--mobile .hero-banner-img-2026 > .ratio {
        height: max(calc(var(--gx-hero-tab-w) / var(--gx-hero-ar, 1.7778)),
                    calc(100vh - var(--gx-hero-chrome) + var(--gx-hero-tab-w) * var(--gx-hero-overlap) / var(--gx-hero-ar, 1.7778)));
        height: max(calc(var(--gx-hero-tab-w) / var(--gx-hero-ar, 1.7778)),
                    calc(100svh - var(--gx-hero-chrome) + var(--gx-hero-tab-w) * var(--gx-hero-overlap) / var(--gx-hero-ar, 1.7778)));
    }
    #section_hero .gx-hero-slider--mobile .hero-banner-img-2026 > .ratio::before { padding-top: 0; }
}

/* Touch tablets held upright (768px and wider, portrait, touch: every iPad held upright,
   iPad Pro 13" included) get the mobile slider, from 992px too. Same switch as MOBILE_MQ in
   scripts/gxHeroSlider.js; the dots and pause button switch with it ("Hero: each slider's
   dots" below). Desktop windows of these sizes (no touch) keep the layouts above.
   - video: the full width less 1rem each side, 16:10. The video (object-fit: cover) loses
     5% of its width each side; the devices in the hero videos come within 8.3% of a side
     edge, so they stay whole. This replaces the 768-991px fill above, which cropped about
     16% each side on an iPad Air and cut off the side devices.
   - the hero is one screen tall, but even full width the video leaves about 150-200px free
     on an iPad (everything else in the hero is about 29rem), and filling that would crop
     about 17% each side. Centred, the free space was a black band above and below; with the
     hero as tall as its content, the next section showed on the first screen. So the hero's
     row is a column that fills the hero, and the free space is split in two equal gaps
     (auto margins): between the title and the video, and between the dots and the Chartis
     logos. The dots stay with the video, the logo rows stay together.
   - 1rem under the logo marquee (plus the row's 0.5rem pb-2), not phones' 3rem.
   !important: overrides the view's align-items-center / pb-* utilities. */
@media (min-width: 768px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
    #section_hero {
        min-height: 100vh;
        min-height: 100svh;
        /* align-items: stretch !important; */
        padding-bottom: 0 !important;   /* pb-lg-3 from 992px */
        --gx-hero-tab-w: calc(100vw - 2rem);
    }
    #section_hero > .container-fluid {
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem !important;
    }
    #section_hero > .container-fluid > .row {
        flex: 1 1 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }
    #section_hero .gx-hero-slider--mobile { margin-top: auto; }
    #section_hero .gx-hero-controls--mobile { margin-bottom: auto; }
    #section_hero .gx-hero-slider--desktop { display: none; }
    #section_hero .gx-hero-slider--mobile { display: block; }
    /* The slide's px-lg-3 (from 992px) would make it 2rem wider than the screen, off centre. */
    #section_hero .gx-hero-slider--mobile .col-auto > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #section_hero .gx-hero-slider--mobile .hero-banner-img-2026 { width: var(--gx-hero-tab-w); }
    #section_hero .gx-hero-slider--mobile .hero-banner-img-2026 > .ratio { height: calc(var(--gx-hero-tab-w) / 1.6); }
    #section_hero .gx-hero-slider--mobile .hero-banner-img-2026 > .ratio::before { padding-top: 0; }
    #section_hero .hero-bottom-text { transform: translateY(0); }   /* as under 992px */

    /* Larger text and logos, so the hero's content fills most of the screen and the two gaps
       above stay small. Sized by the screen height (svh), as the free height grows with it
       (about 165px on an iPad Pro 11", 280px on a 13"); the video's height follows the
       width. Browsers without svh use the vh line. The AI chip and the space left for it
       above the video (.hero-banner-img-2026 padding) change together. */
    #section_hero > .container-fluid > .row > .col-md-9 { width: 100%; }   /* title on one line */
    #section_hero > .container-fluid > .row > .col-md-9 > p {
        font-size: 1.8vh;
        font-size: 1.8svh;
        margin-bottom: 1svh !important;
    }
    #section_hero > .container-fluid > .row > .col-md-9 > h2 {
        font-size: 4.2vh;
        font-size: 4.2svh;
        line-height: 1.1;
    }
    #section_hero .GX-ai-chip img { height: 6.5vh; height: 6.5svh; width: auto; }
    #section_hero .gx-hero-slider--mobile .hero-banner-img-2026 { padding-top: 6.5vh; padding-top: 6.5svh; }
    #section_hero .gx-hero-slider--mobile .careers-car-insights-item p {
        font-size: 2.2vh;
        font-size: 2.2svh;
        margin-top: 1svh !important;
    }
    #section_hero .gx-hero-controls--mobile { margin-top: 1.5svh; }
    #section_hero .gx-hero-chartis-row { margin-top: 3.5svh !important; gap: 2svh !important; }
    #section_hero .gx-hero-chartis-row img { width: 9.5vh; width: 9.5svh; height: auto; }
    #section_hero .gx-hero-live {
        font-size: 1.8vh;
        font-size: 1.8svh;
        margin-top: 3svh !important;
    }
    #section_hero .gx-hero-marquee { padding-top: 2svh !important; }
    #section_hero .gx-hero-marquee .gx-logo-marquee__img { height: 3.2vh; height: 3.2svh; }
}

/* Room for the AI chip above the desktop video: the chip image is 85px tall at the top of
   the slide, so the video starts 5.3125rem (85px) down: the chip touches it but does not cover it. Every
   slide keeps it, also data-hero-chip="hide", so the video does not jump between slides.
   It is part of --gx-hero-chrome above; change both together. */
#section_hero .gx-hero-slider--desktop .hero-banner-img-2026 { padding-top: 5.3125rem; }
/* Touch tablets held sideways: the chip is 3.5rem there (see "Touch tablets held sideways"
   above), so is the space above the video. Same query as there. */
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #section_hero .gx-hero-slider--desktop .hero-banner-img-2026 { padding-top: 3.5rem; }
}

/* The hero videos have an empty dark band at the top: at least 17% of their height on the
   slides with a chip, in every frame (14% on the last slide). So the video moves up under the
   chip by 12% of its height, which brings the chip close to the devices without covering
   them. A % margin is a share of the width, hence the division by the width / height ratio.
   Desktop and mobile; every slide, so the video does not jump between slides. If a new video
   has content nearer its top edge, lower --gx-hero-overlap (0 puts the chip on the video's
   top edge). */
#section_hero .hero-banner-img-2026 > .ratio {
    margin-top: calc(-100% * var(--gx-hero-overlap) / var(--gx-hero-ar, 1.7778));
}

/* Desktop video width: the largest of these three that still fits.
   - upper limit: half the screen width, and never wider than 80rem (very large screens)
   - height limit: the screen height minus --gx-hero-chrome is what the video may take; the
     part of it under the chip (--gx-hero-overlap) takes no extra room, so the video can be
     that much taller. Times the video's own width/height (16:9 until it loads), so the hero
     (with the logo marquee) fits one screen
   - floor: 20rem, so a very short window gets a small video and the page scrolls instead of
     the video shrinking to nothing. The hero fits one screen down to about 645px of window
     height (e.g. a 1536x864 laptop at 110% zoom).
   svh ignores the browser's toolbars; browsers without svh use the vh line. */
@media (min-width: 992px) {
    #section_hero .gx-hero-slider--desktop .hero-banner-img-2026 {
        width: clamp(20rem, calc((100vh - var(--gx-hero-chrome)) / (1 - var(--gx-hero-overlap)) * var(--gx-hero-ar, 1.7778)), min(50vw, 80rem));
        width: clamp(20rem, calc((100svh - var(--gx-hero-chrome)) / (1 - var(--gx-hero-overlap)) * var(--gx-hero-ar, 1.7778)), min(50vw, 80rem));
    }
}

/* Wide screens held upright without touch (992px and wider, portrait: portrait monitors,
   tall desktop windows; upright iPads use the phone hero instead, see "Touch tablets held
   upright" above). They get the desktop slider, whose width rule above is made for wide, short
   screens: half the screen width left a 512x338 video in the middle of a 1366px-tall hero,
   with about 370px of black above the title. Here, like the 768-991px upright tablets
   (mobile slider, above):
   - width: the full width less 1rem each side (the slide's px-5 / px-lg-3 padding removed)
   - height: what the rest of the hero leaves (--gx-hero-chrome), plus the part under the AI
     chip, but never shorter than 16:9 and never taller than --gx-hero-port-ar (16:10). The
     video (object-fit: cover) fills the frame and loses at most 5% of its width each side.
     Measured over every frame of the four hero videos, the devices come within 8.3% of a side
     edge ("Trusted AI" at 0.75s; "Decision-grade insight" 11.9% when its side tablets fan
     out), so 4:3 (12.5% each side) cut them off. Re-measure the whole video, not only its
     first frames, before raising the cap or adding a slide.
   ::before is Bootstrap's .ratio spacer, which would set the height from the width. */
@media (min-width: 992px) and (orientation: portrait) {
    #section_hero {
        --gx-hero-port-w: calc(100vw - 2rem);
        --gx-hero-port-ar: 1.6;
    }
    #section_hero .gx-hero-slider--desktop .col-auto,
    #section_hero .gx-hero-slider--desktop .col-auto > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #section_hero .gx-hero-slider--desktop .hero-banner-img-2026 { width: var(--gx-hero-port-w); }
    #section_hero .gx-hero-slider--desktop .hero-banner-img-2026 > .ratio {
        height: clamp(calc(var(--gx-hero-port-w) / var(--gx-hero-ar, 1.7778)),
                      calc(100vh - var(--gx-hero-chrome) + var(--gx-hero-port-w) * var(--gx-hero-overlap) / var(--gx-hero-ar, 1.7778)),
                      calc(var(--gx-hero-port-w) / var(--gx-hero-port-ar)));
        height: clamp(calc(var(--gx-hero-port-w) / var(--gx-hero-ar, 1.7778)),
                      calc(100svh - var(--gx-hero-chrome) + var(--gx-hero-port-w) * var(--gx-hero-overlap) / var(--gx-hero-ar, 1.7778)),
                      calc(var(--gx-hero-port-w) / var(--gx-hero-port-ar)));
    }
    #section_hero .gx-hero-slider--desktop .hero-banner-img-2026 > .ratio::before { padding-top: 0; }
}

/* Phone held sideways: it gets the desktop slider, so stop the video at 60% of the
   screen height. Same query as the sideways-phone part of the switch above. A desktop
   window zoomed to 200% or more can match it too, and then fits the screen instead. */
@media (max-width: 991.98px) and (max-height: 500px) and (orientation: landscape) {
    #section_hero .gx-hero-slider--desktop .hero-banner-img-2026 {
        width: min(48rem, 90vw, calc(60vh * var(--gx-hero-ar, 1.7778)));
        width: min(48rem, 90vw, calc(60svh * var(--gx-hero-ar, 1.7778)));
    }
}

/* ---- Home 26 section 2 slider (#section_platform, "One platform. On-demand agents.") ----
   Every rule here starts with #section_platform, or with the popup frame ids it owns.
   Playback and the popup are in scripts/gxPlatformSlider.js. The layout copies the
   "Voice of Customer" slider (#centerSliderFor2, css/gxHomeCenterSliderFor2.css),
   with a wider centre card: 18% of the width shows of each neighbour (the script's
   centerPadding), 30px between cards, side cards faded. Under 1024px one card at a
   time; under 992px each card gets 3rem side padding. Card look (border, glow,
   corners, shape) follows the Figma design. */

/* Before the slider starts, show only the first slide instead of all of them stacked. */
#section_platform .gx-platform-slider:not(.slick-initialized) > :not(:first-child) { display: none; }

#section_platform .slick-slide {
    margin: 0 15px;
    opacity: 0.5;   /* side cards (left and right), video and text together: 0 = hidden, 1 = full */
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
}
#section_platform .slick-slide.slick-current { opacity: 1; }
#section_platform .slick-slide:focus-visible { outline: none; }
#section_platform .gx-platform-slide:focus-visible .gx-platform-frame { outline: 2px solid var(--gx-white); outline-offset: 4px; }

/* #section_platform .gx-platform-frame.moved-down {background: #181a1c!important; } */
/* #section_platform .gx-platform-frame.moved-down video { transform: translateY(1.8rem); }   */

/* Card: thin light border with a soft glow, as in the Figma design. Shape is width / height
   (16:9); the video fills it and is trimmed at the edges if its shape differs. Change
   --gx-platform-ar to make the cards taller or shorter. */
#section_platform .gx-platform-slider { --gx-platform-ar: 16 / 8; }
#section_platform .gx-platform-slide { padding: 24px 0; }   /* room for the glow */
#section_platform .gx-platform-frame {
    position: relative;
    aspect-ratio: var(--gx-platform-ar);
    /* border: 1.5px solid rgba(255, 255, 255, 0.18); */
    border-radius: 30px;
    /* box-shadow: 0 0 24px 2px rgba(255, 255, 255, 0.1); */
    overflow: hidden;
    background: #000;
}
#section_platform .gx-platform-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slide text (.gx-platform-text) over the video, never in the popup. data-text-pos on
   the slide sets where: "top" (centred, near the top) or "left" (left side, middle).
   Sizes and gaps are in cqw (1cqw = 1% of the card's width), so the text grows and
   shrinks with the card and stays in the space the video leaves for it (never below
   16px title / 14px subtitle). The title is the agent name and the line under it
   (.gx-platform-sub) the agent's description. Browsers without cqw use the px line
   just above. */
#section_platform .gx-platform-card {
    position: relative;
    container-type: inline-size;
}
#section_platform .gx-platform-text {
    position: absolute;
    z-index: 1;
    pointer-events: none;   /* clicks go to the card and open the popup */
    color: var(--gx-white);
}
#section_platform .gx-platform-title {
    margin: 0;
    font-family: inherit;   /* the site's h3 style is a serif font; the design uses the body font */
    font-size: 24px;
    font-size: max(16px, calc(3cqw + 2px));
    font-weight: 500;
    line-height: 1;
    color: inherit;
}
#section_platform .gx-platform-sub {
    margin: 14px 0 0;
    margin: 0.8cqw 0 0;
    /* font-size: 14px; */
    /* font-size: 1.5rem; */
    font-size: max(14px, calc(1.3cqw + 2px));
    font-style: normal;   /* the slide deck shows it italic; the site does not */
    line-height: 1;
    color: var(--gx-grey);
    font-weight: 400;
}
#section_platform [data-text-pos="top"] .gx-platform-text {
    top: 6%;
    left: 8%;
    right: 8%;
    text-align: center;
}
/* 38% wide from 6%: the text must end before the video's content (~45% in). Longer
   titles and descriptions wrap onto more lines. */
#section_platform [data-text-pos="left"] .gx-platform-text {
    top: 50%;
    left: 6%;
    width: 45%;
    transform: translateY(-50%);
    text-align: left;
}

/* The centre slide's text fades in when it arrives. */
@keyframes gxPlatformTextIn {
    from { opacity: 0; translate: 0 12px; }
    to   { opacity: 1; translate: 0 0; }
}
#section_platform .slick-current .gx-platform-text { animation: gxPlatformTextIn 0.6s ease 0.3s both; }
@media (prefers-reduced-motion: reduce) {
    #section_platform .slick-current .gx-platform-text { animation: none; }
}

/* Phones: the card is too small for text over the video, so the text sits below it. */
@media (max-width: 991.98px) {
    #section_platform [data-text-pos] .gx-platform-text {
        position: static;
        width: auto;
        transform: none;
        margin-top: 16px;
        text-align: center;
    }
    #section_platform .gx-platform-title { font-size: 20px; }
    /* 14px, not larger: the descriptions sit above the screen in the phone videos, and at
       15px some wrap onto a third line and run into it. */
    #section_platform .gx-platform-sub { margin-top: 8px; font-size: 14px; }    
}

/* Controls under the cards, like apple.com "Get the highlights": the dots in a dark pill
   and a round pause / play button beside it. The current card's dot is a long pill whose
   white fill (.gx-platform-dot-fill) grows as its preview plays; the script sets its
   scaleX. Hidden (keeping its space) until the script has started the slider.
   The hero (#section_hero, .gx-hero-* classes, scripts/gxHeroSlider.js) shares these rules,
   so both sections' dots look the same. */
#section_platform .slick-dotted.slick-slider,
#section_hero .slick-dotted.slick-slider { margin-bottom: 0; }
#section_platform .gx-platform-controls,
#section_hero .gx-hero-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 0.5rem;
}
#section_hero .gx-hero-controls { margin-top: 0.75rem; }
#section_platform .gx-platform-controls:not(.is-ready),
#section_hero .gx-hero-controls:not(.is-ready) { visibility: hidden; }

#section_platform .gx-platform-dots,
#section_hero .gx-hero-dots {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.08);
}
#section_platform .gx-platform-dots .slick-dots,
#section_hero .gx-hero-dots .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0;
}
#section_platform .gx-platform-dots .slick-dots li,
#section_hero .gx-hero-dots .slick-dots li {
    display: block;
    width: auto;
    height: auto;
    margin: 0 6px;
}
#section_platform .gx-platform-dots .slick-dots li button,
#section_hero .gx-hero-dots .slick-dots li button {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;   /* trims the fill to the pill's rounded ends */
    background: rgba(255, 255, 255, 0.42);
    transition: width 0.4s ease, background-color 0.3s ease;
}
#section_platform .gx-platform-dots .slick-dots li button:before,
#section_hero .gx-hero-dots .slick-dots li button:before { content: none; }
#section_platform .gx-platform-dots .slick-dots li button:hover { background: rgba(255, 255, 255, 0.65); }
/* Hero: only under a mouse pointer. On touch screens a tapped dot stays "hovered", so once
   the slider moved on it looked selected next to the current one. */
@media (hover: hover) {
    #section_hero .gx-hero-dots .slick-dots li button:hover { background: rgba(255, 255, 255, 0.65); }
}
#section_platform .gx-platform-dots .slick-dots li.slick-active button,
#section_hero .gx-hero-dots .slick-dots li.slick-active button {
    width: 48px;
    background: rgba(255, 255, 255, 0.42);
}
#section_platform .gx-platform-dots .slick-dots li button:focus-visible,
#section_hero .gx-hero-dots .slick-dots li button:focus-visible {
    outline: 2px solid var(--gx-white);
    outline-offset: 3px;
}
#section_platform .gx-platform-dot-fill,
#section_hero .gx-hero-dot-fill {
    position: absolute;
    inset: 0;
    background: var(--gx-white);
    transform: scaleX(0);
    transform-origin: left center;
}

#section_platform .gx-platform-toggle,
#section_hero .gx-hero-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gx-white);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#section_platform .gx-platform-toggle:hover,
#section_hero .gx-hero-toggle:hover { background: rgba(255, 255, 255, 0.14); }
#section_platform .gx-platform-toggle:focus-visible,
#section_hero .gx-hero-toggle:focus-visible {
    outline: 2px solid var(--gx-white);
    outline-offset: 3px;
}
#section_platform .gx-platform-toggle svg,
#section_hero .gx-hero-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
/* Pause icon while playing, play icon while paused. */
#section_platform .gx-platform-icon-play,
#section_platform .is-paused .gx-platform-icon-pause,
#section_hero .gx-hero-icon-play,
#section_hero .is-paused .gx-hero-icon-pause { display: none; }
#section_platform .is-paused .gx-platform-icon-play,
#section_hero .is-paused .gx-hero-icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
    #section_platform .gx-platform-dots .slick-dots li button,
    #section_hero .gx-hero-dots .slick-dots li button { transition: none; }
}
@media (max-width: 600px) {
    #section_platform .gx-platform-dots,
    #section_hero .gx-hero-dots { height: 25px; padding: 0 10px; }
    #section_platform .gx-platform-toggle,
    #section_hero .gx-hero-toggle { width: 25px; height: 25px; }
    #section_platform .gx-platform-toggle svg,
    #section_hero .gx-hero-toggle svg { width: 18px; height: 18px; }
}

/* Hero: each slider's dots and pause button show and hide with it (same switch as
   .gx-hero-slider--desktop / --mobile above). After the shared rules so they win. */
#section_hero .gx-hero-controls--desktop { display: none; }
@media (min-width: 992px), (max-height: 500px) and (orientation: landscape) {
    #section_hero .gx-hero-controls--desktop { display: flex; }
    #section_hero .gx-hero-controls--mobile { display: none; }
}
/* Touch tablets held upright use the mobile slider (see "Touch tablets held upright"). */
@media (min-width: 768px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
    #section_hero .gx-hero-controls--desktop { display: none; }
    #section_hero .gx-hero-controls--mobile { display: flex; }
}

@media (max-width: 991.98px) {
    #section_platform .gx-platform-slide { padding: 24px 3rem; }
    #section_platform .gx-platform-frame { border-radius: 16px; }
}

@media (max-width: 600px) {
    #section_platform .slick-slide { margin: 0; }
}

/* Phones: the phone previews are portrait (about 9:14), so the card is portrait too. It is
   4:5, a little wider than the video, so the video is trimmed a little top and bottom and
   the card stays short. Capped at 60% of the screen height (the width follows), so on a
   tablet it does not grow taller than the screen. Same screen rule as MOBILE_MQ in
   scripts/gxPlatformSlider.js: a phone held sideways plays the landscape preview, so it
   keeps the landscape card. */
@media (max-width: 991.98px) and (min-height: 501px),
       (max-width: 991.98px) and (orientation: portrait) {
    #section_platform .gx-platform-slider { --gx-platform-ar: 4 / 5; }
    /* The width cap is on the card (not the frame) so the title, placed against the card,
       stays over the video. */
    #section_platform .gx-platform-card {
        width: min(100%, calc(70vh * 4 / 5));
        width: min(100%, calc(70svh * 4 / 5));
        margin: 0 auto;
    }
    /* The title sits over the empty space at the top of the video, like the "top" cards on
       desktop, instead of below the card. 12% (desktop uses 6%) puts it in the middle of
       that space, still clear of the screen in the video. */
    #section_platform [data-text-pos] .gx-platform-text {
        position: absolute;
        top: 7%;
        left: 5%;    /* wide, so the descriptions take two lines and stay above the screen */
        right: 5%;
        margin-top: 0;
        text-align: center;
    }
    /* Sized to the card (cqw), at most 20px / 14px (the sizes on a 375px phone, 280px card),
       so a smaller phone wraps the text the same way and it still ends above the screen. */
    #section_platform .gx-platform-title { font-size: clamp(16px, 7.15cqw, 20px); }
    #section_platform .gx-platform-sub { font-size: clamp(11px, 5cqw, 14px); }
}
/* Popup frame for section 2 videos: hidden unless the script opened the popup for one,
   then it replaces the CreditX/ClaimsX/BrokerX frames. 16:9, the shape of the long
   videos, on every screen. Tall 9:16 (like the CreditX phone popup) only while a slide's
   portrait phone video plays (data-popup-src-mobile; the script adds .is-platform-tall),
   no wider than fits the screen's height. Before, it was tall on every screen under
   992px, so the landscape video sat small in a tall black box (tracker bug 8). */
#gx-video-popup-ratio-platform { display: none; }
#gx-video-popup-overlay.is-platform-tall #gx-video-popup-ratio-platform { --bs-aspect-ratio: calc(16 / 9 * 100%); }
#gx-video-popup-overlay.is-platform-tall .gx-video-popup-panel {
    width: min(92vw, calc((100vh - 48px) * 9 / 16));
    width: min(92vw, calc((100svh - 48px) * 9 / 16));
}
/* Under 992px the shared popup sits at the top of the screen (for the tall ones); the
   16:9 one is short, so centre it. */
@media (max-width: 991.98px) {
    #gx-video-popup-overlay.is-platform:not(.is-platform-tall) { align-items: center; }
}
#gx-video-popup-overlay.is-platform #gx-video-popup-ratio-platform { display: block; }
#gx-video-popup-overlay.is-platform #gx-video-popup-ratio-desktop,
#gx-video-popup-overlay.is-platform #gx-video-popup-ratio-mobile { display: none !important; }

/* ---- Home 26 comparison (#section_comparison, "Generic AI vs Risk-specialised AI") ----
   Show more and the popup are in scripts/gxComparison.js; see docs/home26.md, "Comparison".
   Sizes follow the Figma design at 1920px wide and shrink with the window (the vw values
   are the Figma pixels / 19.2). Table rules use the .gx-comp-* classes rather than the
   section id because the popup shows a copy of the table outside the section.
   The phone layout (under 992px) is temporary until the mobile design arrives. */
#section_comparison,
.gx-comp-popup {
    --gx-comp-blue: #0064FF;
    --gx-comp-ink: #1D1D1F;
    --gx-comp-grey: #6E6E73;
    --gx-comp-rule: #D2D2D7;
    --gx-comp-text-generic: #86868B;   /* feature text, Generic AI side (lighter) */
    --gx-comp-text-gx: #424245;        /* feature text, GX AI side (darker) */
}

.yesTick {
    color: #0064ff;
    /* font-weight: 600; */
    font-size: 18px;
}
.txt-color-light {
    color: #333;
    font-size: 18px;
}
.noCross {
    color: #ff0000;
    font-size: 18px;
    /* font-weight: 600; */
}

.gx-comp {
    max-width: 920px;
    margin: clamp(32px, 3vw, 59px) auto 0;
}

.gx-comp-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--gx-comp-ink);
}
.gx-comp-gutter { width: clamp(16px, 5.2vw, 100px); }
.gx-comp-table th,
.gx-comp-table td {
    padding: 0;
    text-align: center;
    vertical-align: top;
    font-weight: 400;
}
.gx-comp-table p { margin: 0; }

/* Screens: same height (500px in the design), lined up along the bottom. The GX image
   is wider than its column at some sizes, so it is centred and allowed past the edge. */
.gx-comp-row--images td { vertical-align: bottom; }
.gx-comp-row--images img {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: none;
    height: clamp(220px, 26vw, 500px);
    max-height:300px
}

.gx-comp-row--titles th { padding-top: clamp(16px, 1.56vw, 30px); }
.gx-comp-col-title {
    font-size: clamp(26px, 2.08vw, 40px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--gx-comp-ink);
}

.gx-comp-row--summary td {
    padding-top: clamp(28px, 2.86vw, 55px);
    padding-bottom: clamp(26px, 6vw, 50px);   
}
.gx-comp-type {
    font-size: clamp(15px, 0.885vw, 17px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--gx-comp-grey);
}
.gx-comp-type--gx { color: var(--gx-comp-blue); }
.gx-comp-table .gx-comp-tagline {
    /* max-width: 440px;
    margin: 14px auto 0;
    font-size: clamp(17px, 1.09vw, 21px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--gx-comp-ink); */
    font-family: indivisible;
    font-style: normal;
    font-weight: 500;
    /* font-size: 20px; */
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: normal;
}
/* Feature rows: the first two always show; the rest (--extra) are hidden until Show more
   (always shown in the popup). The line under the summary sits on the first feature. */
.gx-comp-row--extra { display: none; }
.gx-comp-table.is-expanded .gx-comp-row--extra { display: table-row; }
/* Closed: room between the last feature shown and the line above Show more. */
.gx-comp:not(.is-expanded) .gx-comp-scroll { padding-bottom: 2rem }

.gx-comp-row--heading td {
    padding-top: 2rem;
    font-size: clamp(18px, 1.25vw, 20px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--gx-comp-ink);
    letter-spacing: 0;
}
.gx-comp-row--summary + .gx-comp-row--heading td {
    padding-top: 0;
    /* border-top: 1px solid var(--gx-comp-rule); */
}

/* Each side: icon, then a line of text under it. */
.gx-comp-row--sides td { padding: 1rem 1rem 0; }
.gx-comp-icon {
    display: block;
    width: auto;
    height: clamp(48px, 3.5vw, 67px);
    margin: 0 auto;
}
.gx-comp-table .gx-comp-text {
    max-width: 400px;
    margin-top:0.5rem; 
    font-size: clamp(0.875rem, 0.94vw, 1rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--gx-comp-text-generic);
}
.gx-comp-table .gx-comp-text--gx { color: var(--gx-comp-text-gx); }

/* Show more, with the line above it while the features are closed. */
.gx-comp-toggle-wrap {
    padding: 1rem 0;
    border-top: 1px solid var(--gx-comp-rule);
    text-align: center;
}
/* .gx-comp.is-expanded .gx-comp-toggle-wrap { border-top: 0; } */
.gx-comp-more {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 0;
    border: 0;
    background: none;
    color: var(--gx-comp-blue);
    font-size: clamp(17px, 1.04vw, 20px);
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}
.gx-comp-more:hover .gx-comp-more__label { text-decoration: underline; }
.gx-comp-more__icon { transition: transform 0.2s ease-in-out; }
.gx-comp-more[aria-expanded="true"] .gx-comp-more__icon { transform: rotate(180deg); }

/* Phones and tablets (temporary): both columns stay side by side, smaller. */
@media (max-width: 991.98px) {
    .gx-comp-row--images img {
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .gx-comp-col-title { font-size: 20px; }
    .gx-comp-type { font-size: 13px; }
    .gx-comp-table .gx-comp-tagline { font-size: 15px; }
    .gx-comp-row--heading td { font-size: 17px; }
    .gx-comp {
        margin-top:0
    }
    .gx-comp-row--sides td {
        padding-bottom:1.5rem
    }
    .gx-comp-row--summary + .gx-comp-row--heading td {
        padding-top: 1.5rem;
    }
    .gx-comp-row--heading td { 
        padding-top: 1.5rem;
        border-top: 1px solid var(--gx-comp-rule)
    }
    .gx-comp-row--summary td {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .gx-comp-icon { height: 40px; }
    .gx-comp-table .gx-comp-text { font-size: 14px; }
    .gx-comp-table .gx-comp-text {
        line-height: normal;
    }
}

/* Popup with the whole table: desktop only (1200px and up), where Show more opens it. */
.gx-comp-popup { display: none; }

@media (min-width: 1200px) {
    .gx-comp-more__icon { display: none; }   /* Show more opens the popup here */

    .gx-comp-popup.is-open {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 100000;
        align-items: center;
        justify-content: center;
    }
    .gx-comp-popup__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .gx-comp-popup__panel {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 1100px;
        max-height: 92vh;
        overflow: hidden;   /* keeps the scrollbar inside the rounded corners */
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
        animation: gxCompPopupIn 0.3s ease-out;
    }
    .gx-comp-popup__close {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: #F0F0F2;
        color: var(--gx-comp-ink);
        cursor: pointer;
        transition: background 0.15s;
    }
    .gx-comp-popup__close:hover { background: var(--gx-comp-rule); }
    .gx-comp-popup__body {
        overflow-y: auto;
        overflow-x: hidden;
        padding: 48px 48px 40px;
        color: var(--gx-comp-ink);
        text-align: center;
        scrollbar-gutter: stable;
    }
    .gx-comp-popup__body::-webkit-scrollbar { width: 8px; }
    .gx-comp-popup__body::-webkit-scrollbar-button { display: none; }
    .gx-comp-popup__body::-webkit-scrollbar-track { background: transparent; }
    .gx-comp-popup__body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

    .gx-comp-popup__body .gx-comp-popup__eyebrow {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 600;
        color: var(--gx-comp-blue);
    }
    .gx-comp-popup__body .gx-comp-popup__title {
        margin: 0 0 32px;
        padding: 0 40px;   /* clear of the close button */
        font-size: 40px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--gx-comp-ink);
    }
    /* Smaller screens and spacing so the first features show without scrolling. */
    .gx-comp-popup__body .gx-comp-row--images img { height: clamp(120px, 28vh, 320px); }
    /* .gx-comp-popup__body .gx-comp-row--summary td { padding-top: 24px; padding-bottom: 40px; } */
    .gx-comp-popup__body .gx-comp-row--summary + .gx-comp-row--heading td { padding-top: 40px; }
}

@keyframes gxCompPopupIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .gx-comp-popup__panel { animation: none; }
}



/* mobile orientation: portrait */
@media (max-width: 991.98px) and (min-height: 501px),
       (max-width: 991.98px) and (orientation: portrait) {
        .hero-bottom-text {
            transform: translateY(0rem);
        }
        .hero-banner-img-2026 {
            padding: 0;
        }
       }


 @media (max-width: 743.98px) {
    #section_value .card-ai-btns a:first-child {
        min-width: auto;
    }
}

/* ---- Home 26 popups: Case study (#gx-cs-popup) and SLM (#gx-slm-popup) ----
   Script: scripts/gxHomePopups.js. See docs/home26.md, "Case study popup" and "SLM popup".
   Sizes are the Figma pixels (the popup is 1440px wide there) times --u, so the whole popup
   shrinks as one piece on smaller windows; max(...) keeps text readable when it does. */
.gx-pop {
    --u: min(1px, calc(94vw / 1440));
    --gx-pop-blue: #0064FF;
    --gx-pop-blue-text: #2997FF;   /* blue text on black (easier to read than #0064FF) */
    --gx-pop-grey: #C8C8C8;
    --gx-pop-line: rgba(255, 255, 255, 0.1);
    display: none;
}
.gx-pop.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}
/* "Book a demo" clicked: sit between Bootstrap's modal backdrop (1050) and the demo
   modal (1055), and fade out while the demo popup fades in on top (gxHomePopups.js).
   Bootstrap fades its backdrop in for 0.15s, then the popup for 0.15s: waiting 0.15s
   before fading keeps this panel up until the demo popup starts to show over it. */
.gx-pop.is-open.is-leaving {
    z-index: 1052;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.15s;
}
@media (prefers-reduced-motion: reduce) {
    .gx-pop.is-open.is-leaving { transition: none; }
}
.gx-pop__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.gx-pop__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(1440 * var(--u));
    max-height: 92vh;
    overflow: hidden;   /* keeps the scrollbar inside the rounded corners */
    border-radius: max(16px, calc(32 * var(--u)));
    background: #161617;
    color: #fff;
    text-align: left;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    animation: gxPopIn 0.3s ease-out;
}
.gx-pop p,
.gx-pop h3 { margin: 0; }

/* Top bar: logo, (case study buttons), close. Outside the scrolling part, so it stays put. */
.gx-pop__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(12px, calc(24 * var(--u))) max(16px, calc(40 * var(--u)));
    background: rgba(22, 22, 23, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.gx-pop__logo {
    display: block;
    width: max(32px, calc(39 * var(--u)));
    height: auto;
}
.gx-pop__close {
    flex: none;
    width: max(36px, calc(44 * var(--u)));
    height: max(36px, calc(44 * var(--u)));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.gx-pop__close img { display: block; width: 100%; height: 100%; }
.gx-pop__close:hover { opacity: 0.8; }
.gx-pop button:focus-visible,
.gx-pop a:focus-visible {
    outline: 2px solid var(--gx-pop-blue-text);
    outline-offset: 2px;
}

@keyframes gxPopIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .gx-pop__panel { animation: none; }
}

/* ---- Case study ---- */
.gx-cs-tabs {
    display: flex;
    gap: calc(12 * var(--u));
    padding: calc(5 * var(--u));
}
.gx-cs-tabs[hidden],
.gx-cs-case[hidden] { display: none; }
.gx-cs-tab {
    padding: calc(11 * var(--u)) calc(26 * var(--u));
    border: 0;
    border-radius: 999px;
    background: #666;
    color: #fff;
    font-size: max(14px, calc(17 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}
.gx-cs-tab:hover { background: #777; }
.gx-cs-tab.is-active { background: var(--gx-pop-blue); cursor: default; }

.gx-cs-popup__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(48 * var(--u)) calc(72 * var(--u)) calc(126 * var(--u));
    scrollbar-gutter: stable;
}
.gx-cs-popup__body::-webkit-scrollbar { width: 8px; }
.gx-cs-popup__body::-webkit-scrollbar-button { display: none; }
.gx-cs-popup__body::-webkit-scrollbar-track { background: transparent; }
.gx-cs-popup__body::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }

.gx-pop .gx-cs-lead {
    padding-bottom: calc(24 * var(--u));
    margin-bottom: calc(16 * var(--u));
    color: #86868B;
    font-size: max(18px, calc(26 * var(--u)));
    font-weight: 500;
    line-height: 1.22;
}
.gx-cs-lead strong { color: #fff; font-weight: 600; }

/* Tiles, three a row. Top row: icon and a big figure. Bottom row (--feature, optional; the
   two CreditX cases have none): title, picture, text. */
.gx-cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(16 * var(--u));
}
.gx-cs-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    min-height: calc(300 * var(--u));
    padding: calc(40 * var(--u)) calc(36 * var(--u));
    overflow: hidden;
    border-radius: max(16px, calc(28 * var(--u)));
    background: #000;
    text-align: center;
}
.gx-cs-tile__icon {
    width: calc(74.4 * var(--u));
    height: calc(74.4 * var(--u));
    margin-bottom: calc(10 * var(--u));
}
.gx-cs-grid--roomy .gx-cs-tile { min-height: calc(344 * var(--u)); }
.gx-cs-grid--roomy .gx-cs-tile__icon { margin-bottom: calc(20 * var(--u)); }
.gx-cs-grid--roomy .gx-cs-tile--feature { min-height: calc(310 * var(--u)); }
.gx-cs-tile__pre {
    color: var(--gx-pop-grey);
    font-size: max(14px, calc(18 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
}
.gx-cs-tile__big {
    color: #fff;
    font-size: max(28px, calc(48 * var(--u)));
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.gx-cs-tile__text {
    max-width: calc(340 * var(--u));
    color: var(--gx-pop-grey);
    font-size: max(14px, calc(18 * var(--u)));
    font-weight: 500;
    line-height: 1.3;
}
.gx-cs-tile--feature { justify-content: space-between; }
.gx-cs-tile__title {
    max-width: calc(340 * var(--u));
    color: #fff;
    font-size: max(16px, calc(22 * var(--u)));
    font-weight: 600;
    line-height: 1.22;
}
.gx-cs-tile__art {
    width: calc(114 * var(--u));
    height: auto;
}
/* The chip images carry their glow around them: let it spill past the box. */
.gx-cs-tile__art.gx-cs-chip {
    width: calc(190 * var(--u));
    margin: calc(-38 * var(--u));
}
.gx-cs-tile__icon.gx-cs-chip-sm {
    width: calc(124 * var(--u));
    height: calc(124 * var(--u));
    margin: calc(-24.8 * var(--u)) calc(-24.8 * var(--u)) calc(-14.8 * var(--u));
}
/* Line tiles up across a row: the three tiles share the same rows (subgrid), so an extra
   "pre" line, a longer caption or a bigger image in one tile no longer shifts its neighbours.
   Top tiles: icon / pre / big / text. Feature tiles: title / art / text. Desktop only;
   below 992px the tiles stack one per row. */
@media (min-width: 992px) {
    .gx-cs-tile {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: calc(10 * var(--u));
        justify-items: center;
    }
    .gx-cs-tile--feature { grid-row: span 3; }
    .gx-cs-tile__icon { grid-row: 1; align-self: end; }
    .gx-cs-tile__pre { grid-row: 2; align-self: end; }
    .gx-cs-tile__big { grid-row: 3; }
    .gx-cs-tile__text { grid-row: 4; align-self: start; }
    .gx-cs-tile--feature .gx-cs-tile__title { grid-row: 1; align-self: start; }
    .gx-cs-tile--feature .gx-cs-tile__art { grid-row: 2; align-self: center; }
    .gx-cs-tile--feature .gx-cs-tile__text { grid-row: 3; }
}

.gx-cs-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
    margin-top: calc(46 * var(--u));
    padding: calc(70 * var(--u)) 0;
    border-top: 1px solid var(--gx-pop-line);
    text-align: center;
}
.gx-cs-eyebrow {
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    border-radius: 999px;
    background: rgba(0, 100, 255, 0.14);
    color: var(--gx-pop-blue-text);
    font-size: max(12px, calc(15 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
}
.gx-pop .gx-cs-intro__title {
    max-width: calc(1080 * var(--u));
    color: #fff;
    font-family: inherit;   /* the site's h3 style is a serif font; the design uses the body font */
    font-size: max(30px, calc(56 * var(--u)));
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.gx-pop .gx-cs-intro__title--narrow { max-width: calc(990 * var(--u)); }
.gx-cs-intro__text {
    max-width: calc(900 * var(--u));
    color: var(--gx-pop-grey);
    font-size: max(16px, calc(22 * var(--u)));
    font-weight: 400;
    line-height: 1.45;
}

/* Small blue capitals: ONE CONNECTED ECOSYSTEM, HOW IT WORKS, IMPACT ... */
.gx-cs-label {
    color: var(--gx-pop-blue);
    font-size: max(12px, calc(15 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.gx-cs-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(48 * var(--u));
    min-height: calc(340 * var(--u));
    padding: calc(48 * var(--u)) calc(72 * var(--u));
    overflow: hidden;
    border-radius: max(16px, calc(28 * var(--u)));
    background: #000;
}
.gx-cs-banner__text {
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--u));
    max-width: calc(780 * var(--u));
}
.gx-cs-banner__statement {
    color: #fff;
    font-size: max(20px, calc(34 * var(--u)));
    font-weight: 600;
    line-height: 1.25;
}
.gx-cs-banner__statement--big {
    max-width: calc(640 * var(--u));
    font-size: max(24px, calc(40 * var(--u)));
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.gx-pop .gx-cs-banner__sub {
    margin-top: calc(10 * var(--u));
    color: rgba(255, 255, 255, 0.72);
    font-size: max(15px, calc(20 * var(--u)));
    font-weight: 400;
    line-height: 1.5;
}
.gx-cs-banner__art {
    flex: none;
    width: calc(216 * var(--u));
    height: auto;
}
.gx-cs-banner__art--glow {   /* these two carry their glow around them */
    width: calc(236 * var(--u));
    margin: calc(-10 * var(--u));
}

/* Global Bank: 30 hours vs 30 minutes */
.gx-cs-compare {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: calc(18 * var(--u));
}
.gx-cs-compare__row {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
}
.gx-cs-compare__value {
    color: var(--gx-pop-grey);
    font-size: max(18px, calc(24 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
}
.gx-cs-compare__value--gx {
    color: var(--gx-pop-blue-text);
    font-size: max(20px, calc(28 * var(--u)));
    font-weight: 600;
}
.gx-cs-compare__bar {
    display: block;
    width: calc(460 * var(--u));
    height: calc(26 * var(--u));
    border-radius: calc(13 * var(--u));
    background: rgba(255, 255, 255, 0.22);
}
.gx-cs-compare__bar--gx {
    width: calc(10 * var(--u));
    background: linear-gradient(to right, #0064FF, #003C99);
    box-shadow: 0 0 14px #2997FF;
}

.gx-cs-how {
    display: flex;
    flex-direction: column;
    gap: calc(28 * var(--u));
    padding-top: calc(80 * var(--u));
}
.gx-cs-how__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(48 * var(--u));
}
.gx-cs-how__col {
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--u));
    padding-top: calc(24 * var(--u));
    border-top: 2px solid var(--gx-pop-blue);
}
.gx-cs-how__num {
    color: rgba(255, 255, 255, 0.45);
    font-size: max(12px, calc(15 * var(--u)));
    font-weight: 600;
    line-height: 1.22;
}
.gx-cs-how__title {
    color: #fff;
    font-size: max(19px, calc(26 * var(--u)));
    font-weight: 600;
    line-height: 1.22;
}
.gx-cs-how__text {
    color: var(--gx-pop-grey);
    font-size: max(14px, calc(18 * var(--u)));
    font-weight: 400;
    line-height: 1.5;
}

/* Impact card: bars (CreditX), a before/after table (BrokerX) or three figures (ClaimsX). */
.gx-cs-impact {
    margin-top: calc(96 * var(--u));
    padding: calc(56 * var(--u)) calc(64 * var(--u)) calc(48 * var(--u));
    border-radius: max(16px, calc(28 * var(--u)));
    background: #000;
}
.gx-cs-impact__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(10 * var(--u)) 24px;
    padding-bottom: calc(40 * var(--u));
}
.gx-pop .gx-cs-impact__head .gx-cs-label { margin-bottom: calc(10 * var(--u)); }
.gx-cs-impact__title {
    color: #fff;
    font-size: max(24px, calc(40 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.gx-cs-legend {
    display: flex;
    gap: calc(24 * var(--u));
}
.gx-cs-legend__key {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--u));
    color: var(--gx-pop-grey);
    font-size: max(13px, calc(17 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
}
.gx-cs-legend__swatch {
    display: inline-block;
    width: calc(28 * var(--u));
    height: calc(10 * var(--u));
    border-radius: calc(5 * var(--u));
    background: rgba(255, 255, 255, 0.22);
}
.gx-cs-legend__swatch--gx { background: linear-gradient(to right, #0064FF, #003C99); }

.gx-cs-bars-row {
    display: flex;
    align-items: center;
    gap: calc(40 * var(--u));
    padding: calc(28 * var(--u)) 0;
    border-top: 1px solid var(--gx-pop-line);
}
.gx-cs-bars-row__label {
    flex: none;
    width: calc(300 * var(--u));
    color: rgba(255, 255, 255, 0.9);
    font-size: max(15px, calc(21 * var(--u)));
    font-weight: 500;
    line-height: 1.3;
}
.gx-cs-bars {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--u));
}
.gx-cs-bars__line {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
}
/* Full length (--w: 1) leaves room for the value beside it; never shorter than a dot. */
.gx-cs-bar {
    flex: none;
    width: max(calc(10 * var(--u)), calc((100% - 128 * var(--u)) * var(--w, 1)));
    height: calc(22 * var(--u));
    border-radius: calc(11 * var(--u));
    background: rgba(255, 255, 255, 0.22);
}
.gx-cs-bar--gx { background: linear-gradient(to right, #0064FF, #003C99); }
.gx-cs-bars__value {
    color: var(--gx-pop-grey);
    font-size: max(14px, calc(18 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.gx-cs-bars__value--gx {
    color: var(--gx-pop-blue-text);
    font-size: max(15px, calc(20 * var(--u)));
    font-weight: 600;
}
.gx-pop .gx-cs-impact__note {
    margin-top: calc(24 * var(--u));
    color: var(--gx-pop-grey);
    font-size: max(13px, calc(16 * var(--u)));
    font-weight: 400;
    line-height: 1.2;
}

/* BrokerX: label | current | arrow | with BrokerX */
.gx-cs-table { padding-bottom: calc(24 * var(--u)); }
.gx-cs-table__row {
    display: grid;
    grid-template-columns: calc(360 * var(--u)) calc(173 * var(--u)) calc(55 * var(--u)) 1fr;
    column-gap: calc(60 * var(--u));
    align-items: center;
    padding: calc(28 * var(--u)) 0;
    border-top: 1px solid var(--gx-pop-line);
}
.gx-cs-table__row--head {
    padding: 0 0 calc(12 * var(--u));
    border-top: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: max(13px, calc(17 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
}
.gx-cs-table__gx { color: var(--gx-pop-blue-text); }
.gx-cs-table__label {
    color: rgba(255, 255, 255, 0.9);
    font-size: max(15px, calc(21 * var(--u)));
    font-weight: 500;
    line-height: 1.3;
}
.gx-cs-table__current {
    color: rgba(255, 255, 255, 0.42);
    font-size: max(22px, calc(34 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.gx-cs-table__arrow {
    width: 100%;
    height: auto;
}
.gx-cs-table__with {
    color: var(--gx-pop-blue-text);
    font-size: max(24px, calc(39 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ClaimsX: three figures */
.gx-cs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(16 * var(--u));
    padding-bottom: calc(32 * var(--u));
}
.gx-cs-stat {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    padding: calc(32 * var(--u));
    border-radius: max(12px, calc(20 * var(--u)));
    background: #161618;
}
.gx-cs-stat__icon {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    margin-bottom: calc(16 * var(--u));
}
.gx-cs-stat__label {
    color: rgba(255, 255, 255, 0.7);
    font-size: max(15px, calc(21 * var(--u)));
    font-weight: 500;
    line-height: 1.3;
}
.gx-cs-stat__value {
    color: #fff;
    font-size: max(24px, calc(40 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.gx-cs-closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: calc(72 * var(--u));
}
.gx-cs-closing__text {
    max-width: calc(780 * var(--u));
    color: #fff;
    font-size: max(20px, calc(30 * var(--u)));
    font-weight: 600;
    line-height: 1.3;
}
.gx-pop .gx-cs-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--u));
    padding: max(12px, calc(16 * var(--u))) max(18px, calc(24 * var(--u)));
    border: 1.5px solid var(--gx-pop-blue);
    border-radius: 999px;
    background: var(--gx-pop-blue);
    color: #fff;
    font-size: max(15px, calc(18 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gx-pop .gx-cs-cta:hover { background: #0052D1; border-color: #0052D1; color: #fff; }

/* Phones and tablets (under 992px; temporary until a mobile design arrives): the popup
   fills the screen less a 16px margin and everything is in one column. --u is fixed at
   0.6px, so icons, gaps and text come out at 60% of the Figma sizes (text no smaller than
   its minimum). The top bar puts the case buttons on their own line under the logo. */
@media (max-width: 991.98px) {
    .gx-cs-popup { --u: 0.6px; }
    .gx-pop__panel {
        width: calc(100% - 32px);
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }
    .gx-cs-popup .gx-pop__bar { flex-wrap: wrap; row-gap: 10px; }
    .gx-cs-tabs {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 8px;
        padding: 0;
    }
    .gx-cs-tab { padding: 8px 16px; }
    .gx-cs-popup__body { padding: 24px 16px 48px; }

    .gx-cs-grid,
    .gx-cs-how__cols,
    .gx-cs-stats { grid-template-columns: 1fr 1fr 1fr; }
    .gx-cs-grid { gap: 12px; }
    .gx-cs-tile,
    .gx-cs-grid--roomy .gx-cs-tile,
    .gx-cs-grid--roomy .gx-cs-tile--feature {
        min-height: 0;
        padding: 32px 20px;
        border-radius: 20px;
    }
    .gx-cs-tile--feature { gap: 16px; }
    .gx-cs-tile__text,
    .gx-cs-tile__title { max-width: 340px; }

    .gx-cs-intro { padding: 40px 0; }

    .gx-cs-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 32px 20px;
        border-radius: 20px;
    }
    .gx-cs-banner__text { max-width: none; }
    .gx-cs-banner__art { align-self: center; }
    .gx-cs-compare { align-self: stretch; }
    .gx-cs-compare__bar { width: 100%; max-width: 460px; }
    .gx-cs-compare__bar--gx { width: 10px; }

    .gx-cs-how { padding-top: 48px; }

    .gx-cs-impact { margin-top: 48px; padding: 32px 20px; border-radius: 20px; }
    .gx-cs-impact__head { padding-bottom: 24px; }
    .gx-cs-legend { gap: 16px; }
    .gx-cs-bars-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 0; }
    .gx-cs-bars-row__label { width: auto; }
    .gx-cs-bar { width: max(6px, calc((100% - 100px) * var(--w, 1))); height: 14px; border-radius: 7px; }

    /* BrokerX table: the label on its own line, then current → with BrokerX. */
    .gx-cs-table__row {
        grid-template-columns: 84px 24px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 8px;
        padding: 20px 0;
    }
    .gx-cs-table__row--head { padding: 0 0 8px; }
    .gx-cs-table__row--head span:first-child { display: none; }
    .gx-cs-table__label { grid-column: 1 / -1; }
    .gx-cs-table__current { font-size: 20px; }
    .gx-cs-table__with { font-size: 22px; }

    .gx-cs-stat { padding: 24px 20px; }

    .gx-cs-closing {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-top: 48px;
    }
}

    @media (max-width: 767.98px) {
        .gx-cs-grid,
        .gx-cs-how__cols,
        .gx-cs-stats { grid-template-columns: auto }
    }

/* ---- SLM popup ----
   Same --u idea as the case study popup (it follows the window's width only). The
   diagrams are stacked, each under its title, and only the body scrolls up and down;
   the top bar stays. */
.gx-slm-popup { --u: min(1px, calc(94vw / 1440)); }
.gx-slm-popup__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(24 * var(--u)) calc(26 * var(--u)) max(24px, calc(36 * var(--u)));
    scrollbar-gutter: stable;
}
.gx-slm-popup__body::-webkit-scrollbar { width: 8px; }
.gx-slm-popup__body::-webkit-scrollbar-button { display: none; }
.gx-slm-popup__body::-webkit-scrollbar-track { background: transparent; }
.gx-slm-popup__body::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
.gx-slm-item { text-align: center; }
.gx-slm-item + .gx-slm-item { margin-top: max(40px, calc(96 * var(--u))); }
.gx-pop .gx-slm-title {
    margin-bottom: max(16px, calc(20 * var(--u)));
    color: #fff;
    font-family: inherit;   /* the site's h3 style is a serif font; the design uses the body font */
    font-size: max(17px, calc(30 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
}
/* Each diagram fills the body's width; the width and height attributes on the <img>
   keep its shape while it loads. */
.gx-slm-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    .gx-slm-popup__body { padding: 16px 12px 24px; }
}
/* A portrait phone is too narrow to read a diagram shrunk to its width: show it
   --gx-slm-phone-h tall (about 900px wide) and let it pan sideways inside .gx-slm-scroll,
   while the popup still scrolls up and down. */
@media (max-width: 575.98px) {
    .gx-slm-popup { --gx-slm-phone-h: 450px; }
    .gx-slm-popup__body { padding: 16px 0 20px; }
    .gx-slm-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }
    .gx-slm-img {
        width: auto;
        height: var(--gx-slm-phone-h);
        max-width: none;
        margin: 0;
    }
    .gx-pop .gx-slm-title { padding: 0 12px; }
}

.gx-platform-headtitle {
    color:#6e6e73;
    /* font-size: 1.3rem; */
    font-size: clamp(1rem, 1.1vw, 1.3rem);
    font-weight:600;
    line-height:1;
    margin:0 0 0.8cqw
}
@media (max-width: 991.98px) {
    .gx-platform-headtitle {
        margin-bottom: 6px;
    }
}

/* ---- Home 26 FAQ (the shared gx/GxAccordion partial, #accordion-faq-...) ----
   992–1199px (iPad landscape and small laptops) had the full desktop sizes from
   css/gxStyle.css: 96px "FAQs", 36px questions that wrapped onto two lines, 24px answers
   (tracker bug 11). In-between sizes here; under 992px gxStyle.css has its own smaller
   ones, and 1200px up keeps the desktop ones. Home 26 only (this file). */
/* @media (min-width: 992px) and (max-width: 1199.98px) {
    [id^="accordion-faq"] .bg-gx-primary.accordion-button { font-size: 64px; }
    [id^="accordion-faq"] .bg-gx-primary.accordion-button::after { width: 44px; height: 44px; }
    [id^="accordion-faq"] .accordion-button:not(.bg-gx-primary) { font-size: 28px; }
    [id^="accordion-faq"] .accordion-body { font-size: 20px; }
} */

.enterprise-ready-card-heading {
    font-size: clamp(1.2rem, 1.5vw, 1.8rem);
}

@media only screen and (max-width: 767.98px) and (orientation: portrait) {
    #section_hero {
        height: 100vh;
        /* min-height: 100svh;
        align-items: stretch !important; */
        padding-bottom: 0 !important;   /* pb-lg-3 from 992px */
        /* --gx-hero-tab-w: calc(100vw - 2rem); */
    }
    .mobile-v-100 {
        height: 97%;
    }
}