/* style-homepage-gwp.css — Homepage GWP.
   Asset paths: /assets/homepagev2/{images|icons|logos|flags}/
   Values in px; layout uses Bootstrap utilities where possible. */

/* DESIGN TOKENS */
:root {
    /* ---------- Colors ---------- */
    --gwp-primary:          #f5b209;
    --gwp-primary-gold:     #ffc83e;
    --gwp-primary-blue:     #0f2c6e;
    --gwp-heading:          #31356e;
    --gwp-accent-teal:      #0073a8;
    --gwp-accent-blue:      #3074d2;
    --gwp-accent-sky:       #09b1f9;
    --gwp-accent-green:     #84b655;
    --gwp-accent-purple:    #6738ae;
    --gwp-accent-red:       #bc1b37;
    --gwp-accent-orange:    #e7823e;
    --gwp-accent-orange-2:  #f97409;
    --gwp-text-body:        #302e2b;
    --gwp-text-muted:       #444444;
    --gwp-text-inverse:     #ffffff;
    --gwp-surface-0:        #ffffff;
    --gwp-surface-50:       #f7f8fc;
    --gwp-border:           #d2d2d2;

    /* ---------- Fonts ---------- */
    --gwp-font-title:       'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --gwp-font-body:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ---------- Font sizes (px) ---------- */
    --gwp-fs-xs:            12px;
    --gwp-fs-sm:            14px;
    --gwp-fs-base:          16px;
    --gwp-fs-md:            18px;
    --gwp-fs-lg:            20px;
    --gwp-fs-xl:            24px;
    --gwp-fs-2xl:           32px;
    --gwp-fs-3xl:           36px;

    /* ---------- Weights ---------- */
    --gwp-fw-light:         300;
    --gwp-fw-regular:       400;
    --gwp-fw-medium:        500;
    --gwp-fw-semibold:      600;
    --gwp-fw-bold:          700;
    --gwp-fw-extrabold:     800;

    /* ---------- Spacing (px) ---------- */
    --gwp-space-2:          8px;
    --gwp-space-3:          12px;
    --gwp-space-4:          16px;
    --gwp-space-5:          20px;
    --gwp-space-6:          24px;
    --gwp-space-7:          32px;
    --gwp-space-8:          40px;
    --gwp-space-9:          48px;
    --gwp-space-10:         64px;

    /* ---------- Radius (px) ---------- */
    --gwp-radius-sm:        8px;
    --gwp-radius-md:        12px;
    --gwp-radius-lg:        16px;
    --gwp-radius-pill:      999px;

    /* ---------- Shadows ---------- */
    --gwp-shadow-card:      0 0 40px 0 rgba(0, 0, 0, 0.12);
    --gwp-shadow-elevated:  0 8px 24px 0 rgba(0, 0, 0, 0.08);
    --gwp-shadow-subtle:    0 2px 8px 0 rgba(0, 0, 0, 0.04);
}

/* BASE */
body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    color: var(--gwp-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   REUSABLE TYPE UTILITIES
   Use these on any page instead of duplicating eyebrow/title/lead
   styles in per-page CSS files. Section-specific concerns
   (max-width, positioning, colors that differ) stay in page CSS
   targeting BEM classes alongside these utilities.
   ============================================================ */

/* Eyebrow pill — sits above a section title.
   Default = light-section (dark text on translucent dark bg).
   .gwp-eyebrow--inverse = dark-section (white text on translucent white bg). */
.gwp-eyebrow {
    display: inline-block;
    padding: 10px 28px;
    background: rgba(49, 53, 110, 0.04);
    border: 1px solid rgba(49, 53, 110, 0.25);
    border-radius: var(--gwp-radius-pill);
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-xs);
    font-weight: var(--gwp-fw-medium);
    color: var(--gwp-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.4;
    text-align: center;
}

.gwp-eyebrow--inverse {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--gwp-text-inverse);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Shrink every eyebrow/badge in the redesign to 10px on phones. */
@media (max-width: 767.98px) {
    .gwp-eyebrow,
    .gwp-value__badge {
        font-size: 10px !important;
    }
}

/* Section title (h2). Responsive step-down: 36 (default) → 32 (<lg) → 24 (<sm).
   .gwp-section-title--inverse for white text on dark sections. */
.gwp-section-title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-3xl) !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.25;
    color: var(--gwp-text-body);
}

@media (max-width: 991.98px) { .gwp-section-title { font-size: var(--gwp-fs-2xl) !important; } }
@media (max-width: 575.98px) { .gwp-section-title { font-size: var(--gwp-fs-xl) !important; } }

.gwp-section-title--inverse { color: var(--gwp-text-inverse); }

/* Section subtitle / lead paragraph (16px, line-height 1.4).
   .gwp-section-lead--inverse for white text on dark sections. */
.gwp-section-lead {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 1.4;
    color: var(--gwp-text-body);
}

.gwp-section-lead--inverse { color: var(--gwp-text-inverse); }

/* Card / row heading (h3). 18px semibold default;
   .gwp-card-title--lg = 20px bold (matches .gwp-different__card-title). */
.gwp-card-title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-md) !important;
    font-weight: var(--gwp-fw-semibold);
    line-height: 1.25;
    color: var(--gwp-heading);
}

.gwp-card-title--lg {
    font-size: var(--gwp-fs-lg) !important;
    font-weight: var(--gwp-fw-bold);
}

/* PAGE-SCOPED CONTAINER */
.gwp-container {
    width: 100%;
    max-width: 1370px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
}

@media (min-width: 576px) { .gwp-container { padding-left: 24px; padding-right: 24px; } }

/* HERO */
.gwp-hero {
    background-color: #31356e;
    color: var(--gwp-text-inverse);
    isolation: isolate;
}

/* Blurred bg blob — SVG in HTML; positioning via utility classes. */

/* ---- Layout ---- */
.gwp-hero__layout {
    grid-template-columns: 1fr;
}

/* Stacked layout (< xl, incl. iPad): explicit vertical gap between copy and
   carousel. Pinned here (not via a utility) so it survives HTML caching. */
@media (max-width: 1199.98px) {
    .gwp-hero__layout {
        row-gap: 48px !important;
    }
}

@media (min-width: 1200px) {
    .gwp-hero__layout {
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    }
}

/* ---- Eyebrow pill (40px high, 20px×8px padding)
   Glass effect matching the .gwp-where__feature-pill / .gwp-where__card surface. */
.gwp-hero__eyebrow {
    padding: 10px 28px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--gwp-radius-pill);
    color: var(--gwp-text-inverse);
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-xs);
    font-weight: var(--gwp-fw-medium);
    letter-spacing: 2px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ---- Title */
.gwp-hero__title {
    font-family: var(--gwp-font-title);
    font-size: 28px;
    font-weight: var(--gwp-fw-bold);
    color: var(--gwp-text-inverse);
    line-height: 1.2;
}

.gwp-hero__title-accent {
    color: var(--gwp-primary);
    font-style: normal;
}

@media (min-width: 768px) { .gwp-hero__title { font-size: 32px; } }
@media (min-width: 992px) { .gwp-hero__title { font-size: var(--gwp-fs-3xl); } }

/* Desktop layout: each phrase claims its own line without <br> tags.
   Below xl, spans stay inline so text wraps naturally to the container. */
@media (min-width: 1200px) {
    .gwp-hero__title-line {
        display: block;
    }
}

/* ---- Body
   Cap at 560px only when the hero is 2-column (xl+). In stacked layout
   the copy should span the full container width alongside the carousel. */
.gwp-hero__body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 30px;
    color: var(--gwp-text-inverse);
}

@media (min-width: 1200px) {
    .gwp-hero__body { max-width: 560px; }
}

.gwp-hero__body strong {
    color: var(--gwp-primary-gold);
    font-weight: var(--gwp-fw-bold);
}

/* ---- Buttons (240×50 ideal; min 180 so two fit side-by-side) ---- */
.gwp-btn {
    box-sizing: border-box;
    flex: 0 1 240px;
    min-width: 180px;
    height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-md);
    font-weight: var(--gwp-fw-bold);
    line-height: 1;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.gwp-btn--primary {
    background-color: var(--gwp-primary);
    color: var(--gwp-heading);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.gwp-btn--outline {
    background-color: transparent;
    border-color: var(--gwp-text-inverse);
    color: var(--gwp-text-inverse);
}

/* CTA/submit variant — cancels .gwp-btn's hero-flex sizing and bumps radius
   to 12px. Use for standalone section CTAs and form submit buttons.
   Width comes from a Bootstrap utility (w-100 / w-*) or a per-section
   BEM class that only sets width/min-width.
   Below lg, every CTA stretches to fill its column so no section-specific
   mobile rule needs to repeat this. */
.gwp-btn--cta {
    flex: none;
    min-width: 0;
    padding: 10px;
    border-radius: 12px !important;
}

@media (max-width: 991.98px) {
    /* Compound selector bumps specificity to 0,2,0 so Bootstrap utilities
       (.col-auto width, .align-self-start, w-* etc.) can't override this
       even when they carry !important.
       Below lg: CTA fills the column edge-to-edge; height is pinned
       explicitly because some mobile layouts leak height without it. */
    .gwp-btn.gwp-btn--cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        line-height: 1 !important;
    }

    /* Homepage section CTAs opt out of the full-width mobile stretch so the
       button hugs its own width (centered in the column) instead of edge-to-edge.
       Higher-specificity compound selector beats the block above.
       `flex: none` cancels the base `.gwp-btn { flex: 0 1 240px }` so the
       width value is respected instead of being shrunk by flex-basis. */
    .gwp-btn.gwp-btn--cta.gwp-where__cta,
    .gwp-btn.gwp-btn--cta.gwp-different__cta,
    .gwp-btn.gwp-btn--cta.gwp-value__cta,
    .gwp-btn.gwp-btn--cta.gwp-refundable__cta,
    .gwp-btn.gwp-btn--cta.gwp-perks__cta,
    .gwp-btn.gwp-btn--cta.gwp-faq__cta {
        flex: none !important;
        width: 260px !important;
        max-width: 100% !important;
        align-self: center !important;
    }
}

/* Hover/focus styling for all yellow + white CTA variants lives in the
   "BUTTON MICRO-INTERACTIONS" block at the bottom of this file so every
   variant gets the same hover treatment. Section-scoped classes below
   (.gwp-*-__cta) only tune width / height / padding / radius — color,
   font, border, and shadow all come from .gwp-btn--primary. */

/* ============================================================
   HERO CAROUSEL — right column
   Vanilla JS (see IndexAnonymous.cshtml), no Bootstrap dep.
   Stacked-card carousel: every slide is a real card. The front slide
   (data-pos="0") sits flush; behind cards peek to the LEFT at smaller
   scale with a gray overlay tint. On rotation the front exits LEFT,
   behind cards each step forward, and the leaving slide silently
   loops to the back of the stack — so you can actually see the
   upcoming slides cycling, not static gray placeholders.
   ============================================================ */
.gwp-carousel {
    isolation: isolate;
}

/* Viewport hosts the stack. Margins match the prior layout so the
   active card width is unchanged. clip-path extends the visible area
   into the 60px left margin (so behind cards can peek past the
   active card's left edge AND the leaving card has room to exit
   cleanly off-screen to the left). */
.gwp-carousel__viewport {
/*    margin: 0 60px;*/
    overflow: visible;
    border-radius: var(--gwp-radius-md);
    z-index: 2;
    height: 420px;            /* lock viewport height for stable layout */
    clip-path: inset(-30px 0 -30px -80px);
}

/* All slides occupy the same absolute box. data-pos drives the stack
   position: 0 = front, 1 = first behind, 2 = second behind. Behind
   cards translate left and scale down so their left edges peek out
   past the front card. A ::after overlay tints them gray. The
   .is-leaving state exits to the LEFT, sliding past the peek stack. */
.gwp-carousel__slide {
    transform-origin: center center;
    transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

/* Gray panel that masks each behind card's content. border-radius
   matches the .rounded-5 Bootstrap utility used on .gwp-hero-card
   so the overlay corners align with the card's rounded corners. */
.gwp-carousel__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #d8d9e0;
    border-radius: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, background-color 0.6s ease;
    z-index: 50;
}

.gwp-carousel__slide[data-pos="0"] {
    transform: translateX(0) scale(1);
    z-index: 3;
}

.gwp-carousel__slide[data-pos="1"] {
    transform: translateX(-34px) scale(0.95);
    z-index: 2;
}

.gwp-carousel__slide[data-pos="1"]::after {
    opacity: 0.94;
}

.gwp-carousel__slide[data-pos="2"] {
    transform: translateX(-66px) scale(0.90);
    z-index: 1;
}

.gwp-carousel__slide[data-pos="2"]::after {
    opacity: 0.96;
    background-color: #b9bcc8;
}

.gwp-carousel__slide.is-leaving {
    transform: translateX(-105%) scale(1);
    z-index: 4;
}

/* ---- Slide card: content (left) + media (right)
   Card height comes from .h-100 utility in HTML (fills viewport box). ---- */
.gwp-hero-card {
    background-color: var(--gwp-surface-0);
    color: var(--gwp-text-body);
    box-shadow: var(--gwp-shadow-card);
}

.gwp-hero-card__content {
    min-width: 0;
}

.gwp-hero-card__title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-xl);
    font-weight: var(--gwp-fw-bold);
    color: #000;
    line-height: 1.2;
}

.gwp-hero-card__subtitle {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-sm);
    color: var(--gwp-text-muted);
    line-height: 1.4;
}

.gwp-hero-card__grid {
    grid-template-columns: repeat(3, 1fr);
}

.gwp-hero-card__grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.gwp-hero-card__tile {
    background-color: #f0f4fe;
    min-height: 70px;
}

/* 6-tile 2-column grid (slide 1): shrink tiles so brand-logos row isn't clipped */
.gwp-hero-card__grid--2col:has(.gwp-hero-card__tile:nth-child(5)) .gwp-hero-card__tile {
    min-height: 56px;
}

.gwp-hero-card__tile-icon {
    width: 24px;
    height: 24px;
    font-size: 22px;
    line-height: 1;
    color: var(--gwp-heading);
}

.gwp-hero-card__tile-label {
    font-family: var(--gwp-font-title);
    font-size: 10px;
    font-weight: var(--gwp-fw-semibold);
    color: var(--gwp-text-body);
}

/* ---- Hero card media image — center-positioned for safe cropping ---- */
.gwp-hero-card__hero-img {
    object-position: top center;
}

.gwp-hero-card__hero-img--right {
    object-position: right center;
}

/* ---- Brand logos row — nowrap kicks in at md+ via .flex-md-nowrap in HTML ---- */
.gwp-hero-card__brands {
    min-height: 28px;
    overflow: hidden;
}

.gwp-hero-card .gwp-hero-card__brand-logo,
.gwp-hero-card__brands img.gwp-hero-card__brand-logo {
    height: 50px;
    max-width: 100%;
    min-width: 0;
    object-fit: contain;
    object-position: left center;
    flex: 1 1 0;
}

/* Wrap variant: brand logos cap at 3-per-row and flow to a second row.
   4 logos → 3+1, 5 logos → 3+2. Targets img + svg logos alike. */
.gwp-hero-card__brands.gwp-hero-card__brands--wrap {
    overflow: visible;
    row-gap: 15px;
    column-gap: 25px;
}

.gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo {
    flex: 0 0 calc((100% - 50px) / 3);
    height: 35px;
    object-position: center;
}

    .gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--dominos,
    .gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--ge,
    .gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--anytime-fitness,
    .gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--marriot,
    .gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--hyatt,
    .gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--hilton,
    .gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--hyatt {
        transform: scale(1.35);
        transform-origin: center;
    }

.gwp-hero-card__brands.gwp-hero-card__brands--wrap .gwp-hero-card__brand-logo--cinepolis {
    transform: scale(2);
    transform-origin: center;
}

/* ---- Carousel dots (6×6 dots, 40×6 active pill) ---- */
.gwp-carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--gwp-radius-pill);
    background-color: rgba(255, 255, 255, 0.41);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.gwp-carousel__dot:hover {
    background-color: rgba(255, 255, 255, 0.65);
}

.gwp-carousel__dot.is-active {
    width: 40px;
    background-color: var(--gwp-text-inverse);
}

/* ---- Carousel prev/next arrow buttons — flank the dots row ---- */
.gwp-carousel__nav {
    width: 32px;
    height: 32px;
    border-radius: var(--gwp-radius-pill);
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.41);
    color: var(--gwp-text-inverse);
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.gwp-carousel__nav:hover {
    background-color: var(--gwp-text-inverse);
    border-color: var(--gwp-text-inverse);
    color: #262b6d;
}

.gwp-carousel__nav:active {
    background-color: rgba(255, 255, 255, 0.85);
}

.gwp-carousel__nav:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

/* STATS BAR */
.gwp-stats {
    min-height: 120px;
    background-color: #262b6d;
    border-radius: var(--gwp-radius-lg);
}

.gwp-stats__item {
    min-width: 0;
    flex: 1 1 0;
}

.gwp-stats__item .gwp-stats__text {
    min-width: 0;
}

.gwp-stats__icon {
    width: 38px;
    height: 38px;
    font-size: 30px;
    line-height: 1;
    color: var(--gwp-primary);
}

.gwp-stats__value {
    color: var(--gwp-primary);
    font-family: var(--gwp-font-title);
    font-size: 22px;
    font-weight: var(--gwp-fw-extrabold);
    line-height: 1.1;
}

.gwp-stats__label {
    color: var(--gwp-text-inverse);
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-medium);
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
}

.gwp-stats__divider {
    width: 1px;
    height: 54px;
    background-color: rgba(255, 255, 255, 0.25);
    list-style: none;
}

/* Below lg: stats render as 2x3 grid — inline dividers replaced with
   borders on the items themselves so lines sit flush between cells */
@media (max-width: 991.98px) {
    .gwp-stats {
        flex-direction: row;
        flex-wrap: wrap;
        /* stretch !important to beat the BS `align-items-center` utility on the
           <ul> — without it, row items keep their content height and the vertical
           border stops short of the horizontal one, leaving broken crosshairs */
        align-items: stretch !important;
        justify-content: flex-start;
        /* Zero the BS utility gaps so borders butt up against each other */
        row-gap: 0 !important;
        column-gap: 0 !important;
    }

    .gwp-stats__item {
        flex: 0 0 50%;
        padding: 14px 12px;
        box-sizing: border-box;
    }

    /* Inline <li> dividers not used in the 2x3 grid — borders handle it */
    .gwp-stats__divider {
        display: none;
    }

    /* Vertical line between the two columns — right border on left-column items
       (item positions in DOM: 1, 5, 9 because dividers sit at even positions) */
    .gwp-stats__item:nth-child(4n+1) {
        border-right: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Horizontal lines between rows 1-2 and 2-3 — bottom border on the first
       four visible items (DOM positions 1, 3, 5, 7); the last two get no line */
    .gwp-stats__item:nth-child(1),
    .gwp-stats__item:nth-child(3),
    .gwp-stats__item:nth-child(5),
    .gwp-stats__item:nth-child(7) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }
}

/* ============================================================
   HERO RESPONSIVE
   Tablet/landscape (≤1199.98): stacked layout — keep the carousel
   side-margins pulled in so the card uses more of the row width.
   Phone/portrait (≤767.98): stack the card vertically — image
   hidden via .d-none d-md-block — and drop the carousel's
   left-peek (no room for behind cards on a narrow screen).
   ============================================================ */
@media (max-width: 1199.98px) {
    .gwp-carousel__viewport { margin: 0 40px; }
    .gwp-carousel__slide[data-pos="1"] { transform: translateX(-22px) scale(0.95); }
    .gwp-carousel__slide[data-pos="2"] { transform: translateX(-44px) scale(0.90); }
}

@media (max-width: 767.98px) {
    /* Type/pill scale — no utility variants at these exact sizes */
    .gwp-hero__eyebrow {
        padding: 8px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    .gwp-hero__title {
        font-size: 29px;
        margin-bottom: 20px !important;
    }
    .gwp-hero__body { font-size: 16px; line-height: 1.6; }

    /* CTA buttons each fill the row width — stacked vertically via the parent's flex-wrap */
    .gwp-btn {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0 16px;
        font-size: var(--gwp-fs-sm);
    }

    /* Carousel: drop side margin + clip; content-only card (image hidden via .d-none d-md-block).
       Height tuned to fit the tallest mobile slide (6-tile grid + brand-logo row) without a
       visible gap between the tile grid and the mt-auto-anchored brand-logo row. */
    .gwp-carousel__viewport {
        margin: 0;
        height: 330px;
        clip-path: none;
    }
    .gwp-carousel__slide[data-pos="1"],
    .gwp-carousel__slide[data-pos="2"] {
        transform: translateX(0) scale(1);
    }
    .gwp-carousel__slide[data-pos="1"]::after,
    .gwp-carousel__slide[data-pos="2"]::after { opacity: 0; }

    /* Stretch the content column to the full card height so the brand-logo row's mt-auto
       can actually pin it to the bottom (col-12's flex-basis alone leaves it content-sized). */
    .gwp-hero-card__content {
        flex: 1 1 auto;
        min-height: 0;
/*        padding-bottom: 4px !important;*/
    }

    .gwp-hero-card__title { font-size: 18px; }
    .gwp-hero-card__subtitle { font-size: var(--gwp-fs-xs); }
    .gwp-hero-card__tile { min-height: 50px; }
    .gwp-hero-card__tile-icon { width: 20px; height: 20px; font-size: 18px; }
    .gwp-hero-card__tile-label { font-size: 10px; }
}

/* ---- Hero mobile layout: center copy + side-by-side CTAs. Stats layout
   inherits the ≤991.98 flex-wrap rule above (2-per-row, dividers hidden). */
@media (max-width: 767.98px) {
    /* Center eyebrow, title, body */
    .gwp-hero > .gwp-container:not(.gwp-stats-wrap) {
        text-align: center;
    }
    .gwp-hero__body {
        margin-left: auto;
        margin-right: auto;
    }
    .gwp-hero__actions {
        justify-content: center;
        margin-top: 50px;
    }
    /* CTAs side-by-side (overrides the generic .gwp-btn { flex:0 0 100% } above) */
    .gwp-hero__actions .gwp-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* GLOBAL CLIENTS */
/* Heading — !important to beat global h2 { font-size: 2.7rem !important }
   font-weight + capitalize moved to Bootstrap utilities on the markup. */
.gwp-clients__title {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-2xl) !important;
    line-height: 1.3;
    letter-spacing: -0.32px;
    color: var(--gwp-text-body);
    opacity: 0.9;
}

/* Subheading — font-weight + capitalize moved to utilities on the markup. */
.gwp-clients__subtitle {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    color: #181818;
    opacity: 0.9;
}

/* Two-row marquee — full-bleed, opposite directions, hover pauses.
   Motion is normally driven by JS (requestAnimationFrame) in homepage-gwp.js;
   the CSS keyframes below act as a fallback so the tracks still scroll if
   the JS never runs (cache, error, etc.). When JS boots, it sets
   `data-marquee-js="1"` on each track, which disables the CSS animation and
   lets the inline transform take over. */
.gwp-clients .gwp-clients__track {
    width: max-content;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation: gwp-clients-marquee 40s linear infinite;
    -webkit-animation: gwp-clients-marquee 40s linear infinite;
}

.gwp-clients .gwp-clients__track--reverse {
    animation-name: gwp-clients-marquee-reverse;
    -webkit-animation-name: gwp-clients-marquee-reverse;
    /* iOS Safari won't composite the reverse track on first paint without a
       static -50% initial state (the % keyframe pre-fill is unreliable). */
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
}

.gwp-clients .gwp-clients__track[data-marquee-js="1"] {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none;
    -webkit-transform: none;
}

@keyframes gwp-clients-marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@-webkit-keyframes gwp-clients-marquee {
    0%   { -webkit-transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(-50%, 0, 0); }
}

@keyframes gwp-clients-marquee-reverse {
    0%   { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes gwp-clients-marquee-reverse {
    0%   { -webkit-transform: translate3d(-50%, 0, 0); }
    100% { -webkit-transform: translate3d(0, 0, 0); }
}

.gwp-clients .gwp-clients__logo {
    height: 80px;
    width: auto;
    margin: 0 30px;
}

@media (max-width: 767.98px) {
    .gwp-clients__title { font-size: 22px !important; line-height: 1.3; }
    /* 80px logos let only ~1.5 fit in view on a 384px viewport, so the marquee
       looks like logos keep disappearing. Shrink so ~3 logos are visible per row. */
    .gwp-clients .gwp-clients__logo { height: 44px; margin: 0 14px; }
}

/* AWARDS STRIP */
.gwp-awards {
    background-color: #31356e;
}

.gwp-awards__item {
    flex: 0 0 auto;
    width: 200px;
    height: 140px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    gap: 0;
}

.gwp-awards__logo {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.gwp-awards__logo--shrm    { height: 95px; }
.gwp-awards__logo--latimes { height: 60px; }
.gwp-awards__logo--inc     { height: 110px; }
.gwp-awards__logo--power   { height: 120px; }
.gwp-awards__logo--google  { height: 80px; }

.gwp-awards__divider {
    width: 1px;
    height: 82px;
    background-color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

@media (max-width: 767.98px) {

    .gwp-awards__list {
        flex-wrap: wrap !important;
        justify-content: center !important;
        column-gap: 16px !important;
        row-gap: 20px !important;
    }

    /* Shorter divider height on mobile */
    .gwp-awards__divider {
        height: 60px;
    }

    /* Hide only the divider between row 1 and row 2 */
    .gwp-awards__list > .gwp-awards__divider:nth-child(6) {
        display: none;
    }

    /* 3 items per row: (100% − 4 × 16px gap − 2 × 1px divider) ÷ 3 */
    .gwp-awards__item {
        width: calc((100% - 66px) / 3);
        height: 80px;
    }

    .gwp-awards__logo--shrm    { height: 50px; }
    .gwp-awards__logo--latimes { height: 32px; }
    .gwp-awards__logo--inc     { height: 58px; }
    .gwp-awards__logo--power   { height: 65px; }
    .gwp-awards__logo--google  { height: 44px; }
}

/* WHERE ARE WE */
.gwp-where {
    background-color: #31356e;
    background-image:
        linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.20) 100%),
        radial-gradient(ellipse 80% 75% at 55% 55%,
                        rgba(120, 128, 235, 0.55) 0%,
                        rgba(107, 115, 220, 0.30) 30%,
                        rgba(89, 93, 152, 0.14) 55%,
                        rgba(49, 53, 110, 0) 78%);
    color: var(--gwp-text-inverse);
    isolation: isolate;
}

/* Ellipse 33 + Rectangle 43 are now rendered via CSS gradients above. */
.gwp-where__glow {
    display: none;
}

.gwp-where > .gwp-container { z-index: 1; }

/* ---- Title ---- */
/* .gwp-where__title — typography from global .gwp-section-title + --inverse.
   WCU-specific responsive step-down (1200/992/576) preserved below. */

.gwp-where__title-accent {
    color: var(--gwp-primary);
}

.gwp-where__description {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    font-weight: var(--gwp-fw-regular);
    line-height: 1.7;
    color: var(--gwp-text-inverse);
    max-width: 670px;
}

/* CTA (260×50, 12px radius). Override .gwp-btn's
   flex-basis since this button sits alone in a flex column, not the
   hero's two-button row. */
/* Button visuals from global .gwp-btn.gwp-btn--primary.gwp-btn--cta. */
.gwp-where__cta {
    width: 260px;
    max-width: 100%;
    align-self: flex-start;
}

/* ---- Illustration: stylized globe with floating feature pills ---- */
.gwp-where__globe-wrap {
    max-width: 480px;
    aspect-ratio: 599 / 393;
}

.gwp-where__globe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.gwp-where__feature {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-xs);
    font-weight: var(--gwp-fw-semibold);
    color: var(--gwp-text-inverse);
    white-space: nowrap;
}

.gwp-where__feature-icon {
    width: 55px;
    height: 55px;
    border: 4px solid #fff;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

/* Feature icon colors sampled 2021:11036 */
.gwp-where__feature-icon--blue   { background: #1142b8; }
.gwp-where__feature-icon--gold   { background: var(--gwp-primary); }
.gwp-where__feature-icon--green  { background: #30c73f; }
.gwp-where__feature-icon--indigo { background: #4838e1; }

.gwp-where__feature-pill {
    display: flex;
    align-items: center;
    min-height: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0 14px 14px 0;
    padding: 8px 16px 8px 22px;
    margin-left: -14px;
    line-height: 1.2;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.gwp-where__feature--tl { top: 8%;  left: -4%; }
.gwp-where__feature--tr { top: 8%;  right: -4%; }
.gwp-where__feature--bl { bottom: 8%; left: -4%; }
.gwp-where__feature--br { bottom: 8%; right: -4%; }

/* ---- Countries card ---- */
.gwp-where__card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.gwp-where__country {
    gap: 7px;
    min-width: 105px;
}

.gwp-where__flag {
    width: 27px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

.gwp-where__country-name {
    font-family: var(--gwp-font-body);
    font-size: 14px;
    font-weight: var(--gwp-fw-regular);
    line-height: 1.4;
    color: var(--gwp-text-inverse);
}

/* ---- "27+ countries" badge ---- */
.gwp-where__more {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 7px 14px;
    border-radius: 8px;
    gap: 8px;
}

.gwp-where__more-flag {
    width: 28px;
    height: 28px !important;
    object-fit: cover;
    border: 2px solid #fff;
    margin-right: -10px;
    background-color: #fff;
}

.gwp-where__more-flag:last-child { margin-right: 4px; }

.gwp-where__more-text {
    font-family: var(--gwp-font-body);
    font-size: 14px;
    font-weight: var(--gwp-fw-bold);
    color: var(--gwp-text-inverse);
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .gwp-where__title { font-size: var(--gwp-fs-2xl) !important; }
    .gwp-where__globe-wrap { max-width: 420px; }
    .gwp-where__feature-icon { width: 48px; height: 48px; font-size: 18px; border-width: 3px; }
    .gwp-where__feature-pill { min-height: 44px; padding: 6px 14px 6px 20px; }
}

@media (max-width: 991.98px) {
    .gwp-where { padding-top: 40px; padding-bottom: 40px; }
    .gwp-where__title { font-size: var(--gwp-fs-xl) !important; }
    .gwp-where__description { font-size: var(--gwp-fs-base); line-height: 1.6; }
    .gwp-where__illustration { display: none; }
    .gwp-where__cta { width: 100%; align-self: stretch; }
}

@media (max-width: 767.98px) {

    .gwp-where__text { text-align: center; align-items: center; }
    .gwp-where__cta { width: 260px; max-width: 100%; align-self: center; }
    .gwp-where__card { padding: 16px; border-radius: 12px; }
    /* 3-per-row grid. calc basis = 33.333% − (2×15px gap ÷ 3) */
    .gwp-where__country { min-width: 0; flex: 0 0 calc(33.333% - 10px); gap: 4px; }
    .gwp-where__country-name { font-size: 12px; line-height: 1.3; }
    .gwp-where__flag { width: 22px; height: 16px; }
    /* Badge drops to its own full-width row below the flags */
    .gwp-where__more { flex: 1 1 100%; justify-content: center; padding: 6px 12px; margin-top: 4px; }
    .gwp-where__more-flag { width: 24px; height: 24px !important; }
    .gwp-where__more-text { font-size: 13px; }
}

@media (max-width: 575.98px) {
    .gwp-where { padding-top: 32px; padding-bottom: 32px; }
    .gwp-where__title { font-size: var(--gwp-fs-lg) !important; }
    .gwp-where__description { font-size: var(--gwp-fs-sm); }
    /* 4-per-row + badge full-width inherited from ≤767 */
}

/* THE OUTCOME */
.gwp-outcome {
    background-image: linear-gradient(180deg, #ECF1FF 0%, #FFFFFF 14.715%);
    background-color: var(--gwp-surface-0);
    color: var(--gwp-text-body);
}

/* ---- Header ---- */
/* Badge, title: typography from global .gwp-eyebrow / .gwp-section-title. */

.gwp-outcome__subtitle {
    /* Typography from global .gwp-section-lead. */
    max-width: 752px;
}

/* ---- Location / Coverage band ---- */
.gwp-outcome__coverage {
    gap: 30px;
    max-width: 980px;
    min-height: 80px;
    padding: 20px 40px;
    border-radius: var(--gwp-radius-sm);
    background: linear-gradient(90deg, #ffffff 16%, #f0f4fe 52%, #ffffff 100%);
}

.gwp-outcome__coverage-item {
    font-family: var(--gwp-font-title);
    font-size: 20px;
    font-weight: var(--gwp-fw-semibold);
    color: var(--gwp-text-body);
    line-height: 1.5;
}

.gwp-outcome__coverage-item .bi {
    font-size: 28px;
    color: var(--gwp-heading);
}

.gwp-outcome__coverage-divider {
    width: 1px;
    height: 50px;
    background-color: #eee;
}

/* ---- Product grid (3 × 2 cards) ---- */
.gwp-outcome__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 39px 24px;
}

.gwp-outcome__card {
    flex-direction: row !important;
    align-items: stretch;
    background-color: var(--gwp-surface-0);
    border: 1px solid transparent;
    border-radius: var(--gwp-radius-lg);
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.gwp-outcome__card:has(.gwp-outcome__card-link:hover),
.gwp-outcome__card:has(.gwp-outcome__card-link:focus-visible) {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.28);
}

.gwp-outcome__card-image {
    aspect-ratio: 1 / 1;
    width: 40%;
    max-width: 300px;
    min-width: 130px;
    flex-shrink: 0;
}

.gwp-outcome__card-image img {
    transition: transform 0.5s ease;
}

.gwp-outcome__card:has(.gwp-outcome__card-link:hover) .gwp-outcome__card-image img,
.gwp-outcome__card:has(.gwp-outcome__card-link:focus-visible) .gwp-outcome__card-image img {
    transform: scale(1.05);
}

.gwp-outcome__card-body {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon  title"
        "pill  pill"
        "desc  desc"
        "cta   cta";
    column-gap: 12px;
    row-gap: 8px !important;
    padding: 14px !important;
}

.gwp-outcome__card-pill {
    grid-area: pill;
    justify-self: start;
    max-width: 100%;
    min-height: 0;
    padding: 4px 10px;
    border-radius: var(--gwp-radius-sm);
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-xs);
    font-weight: var(--gwp-fw-extrabold);
    color: var(--gwp-text-inverse);
    line-height: 1.25;
    white-space: normal !important;
    text-align: center;
}

.gwp-outcome__card-icon {
    grid-area: icon;
    align-self: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--gwp-text-inverse);
    font-size: 24px;
}

.gwp-outcome__card-title {
    grid-area: title;
    align-self: center;
}

.gwp-outcome__card-description {
    grid-area: desc;
}

.gwp-outcome__card-link {
    grid-area: cta;
    justify-self: end;
    margin: 0 !important;
}

/* Per-category accent color: paints both the top-right pill and the body icon. */
.gwp-outcome__card--travel        .gwp-outcome__card-pill,
.gwp-outcome__card--travel        .gwp-outcome__card-icon { background-color: var(--gwp-accent-teal); }
.gwp-outcome__card--tickets       .gwp-outcome__card-pill,
.gwp-outcome__card--tickets       .gwp-outcome__card-icon { background-color: var(--gwp-accent-purple); }
.gwp-outcome__card--dining        .gwp-outcome__card-pill,
.gwp-outcome__card--dining        .gwp-outcome__card-icon { background-color: var(--gwp-accent-orange); }
.gwp-outcome__card--entertainment .gwp-outcome__card-pill,
.gwp-outcome__card--entertainment .gwp-outcome__card-icon { background-color: var(--gwp-accent-red); }
.gwp-outcome__card--shopping      .gwp-outcome__card-pill,
.gwp-outcome__card--shopping      .gwp-outcome__card-icon { background-color: var(--gwp-accent-blue); }
.gwp-outcome__card--wellness      .gwp-outcome__card-pill,
.gwp-outcome__card--wellness      .gwp-outcome__card-icon { background-color: var(--gwp-accent-green); }

/* WCAG 1.4.3 — pill text is white on the category bg; dining orange and
   wellness green fail 4.5:1. Darken only the pill (icons carry no text). */
.gwp-outcome__card--dining   .gwp-outcome__card-pill { background-color: #be5915; }
.gwp-outcome__card--wellness .gwp-outcome__card-pill { background-color: #4a7a1e; }

/* SVG fallback for bi-fork-knife — the icon-font version loaded by the
   project is missing this glyph, so paint the official SVG via mask using
   an inline data URI (no CDN dependency). `currentColor` tints from parent. */
.gwp-outcome__card-icon .bi-fork-knife::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13 .5c0-.276-.226-.506-.498-.465-1.703.257-2.94 2.012-3 8.462a.5.5 0 0 0 .498.5c.56.01 1 .13 1 1.003v5.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zM4.25 0a.25.25 0 0 1 .25.25v5.122a.128.128 0 0 0 .256.006l.233-5.14A.25.25 0 0 1 5.24 0h.522a.25.25 0 0 1 .25.238l.233 5.14a.128.128 0 0 0 .256-.006V.25A.25.25 0 0 1 6.75 0h.29a.5.5 0 0 1 .498.458l.423 5.07a1.69 1.69 0 0 1-1.059 1.711l-.053.022a.92.92 0 0 0-.58.884L6.47 15a.971.971 0 1 1-1.942 0l.202-6.855a.92.92 0 0 0-.58-.884l-.053-.022a1.69 1.69 0 0 1-1.059-1.712L3.462.458A.5.5 0 0 1 3.96 0z"/></svg>') no-repeat center / contain;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13 .5c0-.276-.226-.506-.498-.465-1.703.257-2.94 2.012-3 8.462a.5.5 0 0 0 .498.5c.56.01 1 .13 1 1.003v5.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zM4.25 0a.25.25 0 0 1 .25.25v5.122a.128.128 0 0 0 .256.006l.233-5.14A.25.25 0 0 1 5.24 0h.522a.25.25 0 0 1 .25.238l.233 5.14a.128.128 0 0 0 .256-.006V.25A.25.25 0 0 1 6.75 0h.29a.5.5 0 0 1 .498.458l.423 5.07a1.69 1.69 0 0 1-1.059 1.711l-.053.022a.92.92 0 0 0-.58.884L6.47 15a.971.971 0 1 1-1.942 0l.202-6.855a.92.92 0 0 0-.58-.884l-.053-.022a1.69 1.69 0 0 1-1.059-1.712L3.462.458A.5.5 0 0 1 3.96 0z"/></svg>') no-repeat center / contain;
}

/* .gwp-outcome__card-title — typography from global .gwp-card-title. */

.gwp-outcome__card-description {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    color: var(--gwp-text-body);
    line-height: 1.331;
}

.gwp-outcome__card-link {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-sm);
    color: var(--gwp-text-muted);
    gap: 9px;
    transition: color 0.3s ease;
}

.gwp-outcome__card-link:hover {
    color: var(--gwp-heading);
}

.gwp-outcome__card-link:hover span {
    text-decoration: underline;
}

.gwp-outcome__card-link .bi {
    font-size: 18px;
}

/* ---- Stats band ---- */
.gwp-outcome__stats {
    background:
        radial-gradient(ellipse 70% 95% at 50% 100%, #5b6091 0%, rgba(91, 96, 145, 0) 75%),
        #31356e;
    border-radius: 32px;
    min-height: 160px;
    padding: 36px 48px;
    color: var(--gwp-surface-50);
}

/* Decorative security shield image bleeding off the right edge */
.gwp-outcome__stats-image {
    right: -20px;
    height: 180px;
    width: auto;
}

/* Primary stat: shield-check icon + headline + text */
.gwp-outcome__stat-primary {
    max-width: 484px;
}

.gwp-outcome__stat-icon-lg {
    width: 90px;
    height: 90px;
    background-color: #224eb7;
    color: var(--gwp-text-inverse);
    font-size: 42px;
}

.gwp-outcome__stat-primary-text {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-medium);
    line-height: 24px;
    color: var(--gwp-surface-50);
}

.gwp-outcome__stat-primary-title {
    font-size: 18px;
    font-weight: var(--gwp-fw-bold);
    color: var(--gwp-primary);
    line-height: 1.4;
    margin-bottom: 2px;
}

.gwp-outcome__stat-divider {
    width: 1px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.25);
}

.gwp-outcome__stat-items {
    gap: 20px;
}

.gwp-outcome__stat-item {
    gap: 14px;
}

.gwp-outcome__stat-icon {
    width: 61px;
    height: 61px;
    color: var(--gwp-text-inverse);
    font-size: 28px;
}

.gwp-outcome__stat-icon--yellow { background-color: var(--gwp-primary); }
.gwp-outcome__stat-icon--orange { background-color: var(--gwp-accent-orange-2); }
.gwp-outcome__stat-icon--blue   { background-color: var(--gwp-accent-sky); }
.gwp-outcome__stat-icon--purple { background-color: var(--gwp-accent-purple); }
.gwp-outcome__stat-icon--green  { background-color: var(--gwp-accent-green); }

.gwp-outcome__stat-value {
    font-family: var(--gwp-font-title);
    font-size: 20px;
    font-weight: var(--gwp-fw-bold);
    line-height: 1;
    color: var(--gwp-surface-50);
}

.gwp-outcome__stat-label {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-medium);
    line-height: 1.2;
    color: var(--gwp-surface-50);
    margin-top: 6px;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-outcome__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gwp-outcome__stats { padding: 32px 36px; }
    .gwp-outcome__stats-image { height: 150px; right: -30px; opacity: 0.85; }
    .gwp-outcome__stat-icon-lg { width: 76px; height: 76px; font-size: 36px; }
}

@media (max-width: 991.98px) {
    /* .gwp-outcome__title responsive step-down inherited from global .gwp-section-title. */

    .gwp-outcome__coverage { gap: 10px; padding: 20px 40px; }
    .gwp-outcome__coverage-item { font-size: 16px; line-height: 20px; gap: 9.6px !important; }
    .gwp-outcome__coverage-item .bi { font-size: 18px; }
    .gwp-outcome__coverage-divider { width: 100%; height: 1px; }
    .gwp-outcome__stats { padding: 28px 32px; }
    .gwp-outcome__stats-inner { gap: 24px; }
    .gwp-outcome__stat-divider { display: none; }
    .gwp-outcome__stat-primary { flex: 1 1 100% !important; max-width: none; }
    .gwp-outcome__stat-items { flex: 1 1 100%; gap: 20px 16px; }
    /* 2-per-row — no BS utility for responsive calc-width */
    .gwp-outcome__stat-item { flex: 0 0 calc(50% - 8px); min-width: 0; }
    /* Pin decorative image to bottom-right when layout stacks */
    .gwp-outcome__stats-image {
        top: auto !important;
        bottom: -20px;
        right: -20px;
        height: 130px;
        opacity: 0.6;
        transform: none !important;
    }
}

@media (max-width: 767.98px) {
    .gwp-outcome__stats { padding: 24px 24px; border-radius: 24px; }
    .gwp-outcome__grid { grid-template-columns: 1fr; }
    .gwp-outcome__stat-icon-lg { width: 64px; height: 64px; font-size: 30px; }
    .gwp-outcome__stat-primary { gap: 14px !important; }
    .gwp-outcome__stat-primary-title { font-size: 16px; }
    .gwp-outcome__stat-primary-text { font-size: 13px; line-height: 22px; }
    .gwp-outcome__stat-icon { width: 52px; height: 52px; font-size: 24px; }
    .gwp-outcome__stat-value { font-size: 18px; }
    .gwp-outcome__stat-items { gap: 16px 12px; }
    .gwp-outcome__stat-item { flex: 0 0 calc(50% - 6px); gap: 10px; }
    .gwp-outcome__stats-image { display: none; }
}

@media (max-width: 575.98px) {
    /* .gwp-outcome__title responsive step-down inherited from global .gwp-section-title. */
    .gwp-outcome__stats { padding: 20px; border-radius: 20px; }
    .gwp-outcome__stats-inner { gap: 18px; }
    .gwp-outcome__stat-icon-lg { width: 56px; height: 56px; font-size: 26px; }
    .gwp-outcome__stat-items { gap: 14px 12px; }
    /* 2-per-row inherited from ≤991.98; just tighten the gap subtractor */
    .gwp-outcome__stat-item { flex: 0 0 calc(50% - 6px); }
    .gwp-outcome__stats-image { height: 90px; bottom: -15px; right: -15px; opacity: 0.35; }
}


/* WHY WE'RE DIFFERENT */
.gwp-different {
    background-color: var(--gwp-surface-0);
    color: var(--gwp-text-body);
}

/* ---- Header (badge + title + subtitle stack) ---- */
.gwp-different__header {
    max-width: 1082px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
}

/* .gwp-different__badge — typography from global .gwp-eyebrow. */

.gwp-different__title {
    /* Typography from global .gwp-section-title. */
    max-width: 763px;
    margin-top: 4px !important;
}

.gwp-different__subtitle {
    /* Typography from global .gwp-section-lead. */
    margin-top: 16px !important;
}

/* ---- 3-card grid ---- */
.gwp-different__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 29px;
    align-items: stretch;
}

/* Minimum breathing room below the copy block so the highlight box on the
   tallest card never touches the body. margin-top:auto on the highlight
   (below) still handles equal bottom-align on the shorter cards. */
.gwp-different__card-info {
    margin-bottom: 20px;
}

.gwp-different__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--gwp-surface-0);
    border: 1px solid #bdbdbd;
    border-radius: var(--gwp-radius-lg);
    min-height: 500px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

/* Soft gold sheen from top-right that fades in on hover. */
.gwp-different__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at top right,
                                rgba(245, 178, 9, 0.10),
                                transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.gwp-different__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px -14px rgba(49, 53, 110, 0.22),
                0 8px 18px -8px rgba(245, 178, 9, 0.20);
    border-color: var(--gwp-primary);
}

.gwp-different__card:hover::before { opacity: 1; }

/* Inner content stack: eyebrow + body (spacing via margins on children) */

/* Card eyebrow row: icon tile + uppercase title */
.gwp-different__card-eyebrow-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--gwp-radius-sm);
    background-color: #f1f6ff;
    color: #595d98;
    flex-shrink: 0;
    transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.gwp-different__card:hover .gwp-different__card-eyebrow-icon {
    background-color: var(--gwp-primary);
    color: var(--gwp-heading);
    transform: scale(1.06);
}

.gwp-different__card-eyebrow-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.gwp-different__card-eyebrow-text {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-sm);
    font-weight: var(--gwp-fw-bold);
    color: #595d98;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
    margin-left: 20px;
    transition: color 0.35s ease;
}

.gwp-different__card:hover .gwp-different__card-eyebrow-text {
    color: var(--gwp-heading);
}

.gwp-different__card-title {
    /* Typography from global .gwp-card-title + --lg. */
    margin-top: 12px !important;
}

.gwp-different__card-body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-regular);
    line-height: 22px;
    color: var(--gwp-text-body);
    margin-top: 16px !important;
}

.gwp-different__card-title + .gwp-different__card-body {
    margin-top: 20px !important;
}

.gwp-different__highlight-text {
    color: #595d98;
}

/* Highlight callout box at the bottom of each card.
   margin-top:auto pins it to the bottom whenever the card has extra
   space (grid stretch equalizes card heights side-by-side), so highlight
   boxes across the row bottom-align regardless of body copy length.
   !important beats the utility .mt-10 in HTML at breakpoints below lg. */
.gwp-different__highlight {
    background-color: var(--gwp-heading);
    color: var(--gwp-text-inverse);
    min-height: 90px;
    padding: 10px 20px;
    border-radius: var(--gwp-radius-md);
    margin-top: auto !important;
    transition: box-shadow 0.35s ease;
}

.gwp-different__card:hover .gwp-different__highlight {
    box-shadow: 0 10px 24px -10px rgba(245, 178, 9, 0.45);
}

.gwp-different__highlight-icon {
    width: 38px;
    height: 38px;
    color: var(--gwp-primary);
}

.gwp-different__highlight-icon svg {
    width: 38px;
    height: 38px;
    display: block;
}

.gwp-different__highlight-text-wrap {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 20px;
}

.gwp-different__highlight-title {
    font-family: var(--gwp-font-title);
    font-size: 22px;
    font-weight: var(--gwp-fw-extrabold);
    line-height: 1.2;
    color: var(--gwp-text-inverse);
}

.gwp-different__highlight-subtitle {
    font-family: var(--gwp-font-title);
    font-size: 15px;
    font-weight: var(--gwp-fw-regular);
    line-height: 1.2;
    color: var(--gwp-text-inverse);
    margin-top: 4px;
}

/* ---- CTA (260×50, 12px radius — same spec as Where CTA) ----
   Color / font / shadow inherit from .gwp-btn--primary. */
/* Button visuals from global .gwp-btn.gwp-btn--primary.gwp-btn--cta. */
.gwp-different__cta {
    width: 260px;
    max-width: 100%;
}

/* ---- Responsive ---- */
/* .gwp-different__title responsive step-down inherited from global .gwp-section-title.
   .gwp-different__badge responsive tweak deleted (covered by global .gwp-eyebrow).
   .gwp-different__card-title responsive step-down kept (WCU-specific behavior). */
@media (max-width: 1199.98px) {
    .gwp-different__grid { gap: 20px; }
    .gwp-different__card { min-height: 0; padding: 20px !important; }
    .gwp-different__card-title { font-size: var(--gwp-fs-md) !important; }
    /* Release the fixed 90px height so the extra padding doesn't clip the
       2-line subtitles on cards 2 & 3 at iPad range. */
    .gwp-different__highlight { height: auto; min-height: 90px; padding: 16px; }
    .gwp-different__highlight-title { font-size: 20px; }
    .gwp-different__highlight-subtitle { font-size: 14px; }
    .gwp-different__highlight-text-wrap { margin-left: 14px; }
}

@media (max-width: 991.98px) {
    .gwp-different { padding-top: 40px; padding-bottom: 40px; }
    .gwp-different__subtitle { font-size: var(--gwp-fs-sm); }
    .gwp-different__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .gwp-different__card-eyebrow-icon { width: 40px; height: 40px; }
    .gwp-different__card-eyebrow-icon svg { width: 20px; height: 20px; }
    .gwp-different__card-eyebrow-text { margin-left: 14px; font-size: var(--gwp-fs-xs); }
}

@media (max-width: 767.98px) {
    .gwp-different__card-body { font-size: var(--gwp-fs-xs); line-height: 1.5; }
    .gwp-different__highlight { height: auto; min-height: 80px; padding: 12px 14px; }
    .gwp-different__highlight-icon,
    .gwp-different__highlight-icon svg { width: 32px; height: 32px; }
    .gwp-different__highlight-title { font-size: 18px; }
    .gwp-different__highlight-subtitle { font-size: 13px; }
}

@media (max-width: 575.98px) {
    .gwp-different__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px !important; }
    .gwp-different__card { padding: 20px !important; }
    .gwp-different__card-info { gap: 6px; }
    .gwp-different__card-title { font-size: var(--gwp-fs-base) !important; margin-top: 8px !important; }
    .gwp-different__card-body { margin-top: 8px !important; }
    .gwp-different__card-title + .gwp-different__card-body { margin-top: 10px !important; }
    .gwp-different__highlight { min-height: 64px; padding: 10px 12px; }
    .gwp-different__highlight-title { font-size: 16px; }
    .gwp-different__highlight-subtitle { font-size: 12px; }
    .gwp-different__highlight-text-wrap { margin-left: 10px; }
    .gwp-different__cta { width: 100%; }
}

/* THE SOLUTION */
.gwp-solution {
    background-color: #31356e;
    color: var(--gwp-text-inverse);
}

/* ---- Top row layout ---- */
.gwp-solution__row {
    gap: 38px;
}

/* ---- Eyebrow pill (translucent on dark) ---- */
/* .gwp-solution__badge — typography from global .gwp-eyebrow + --inverse. */
/* .gwp-solution__title — typography from global .gwp-section-title + --inverse. */

.gwp-solution__title-accent {
    color: var(--gwp-primary);
    font-style: italic;
}

.gwp-solution__body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 26px;
    color: var(--gwp-text-inverse);
}

.gwp-solution__body--bold {
    font-size: var(--gwp-fs-md);
    font-weight: var(--gwp-fw-bold);
}

/* ---- World-map illustration (transparent PNG, no frame) ---- */
.gwp-solution__media-frame {
    aspect-ratio: 680 / 391;
}

/* ---- Bottom feature row (5 features with vertical dividers) ---- */
.gwp-solution__features {
    gap: 36px;
    min-height: 100px;
    padding: 18px 36px;
    background-color: #585fbe;
    border-radius: var(--gwp-radius-lg);
    box-shadow:
        0 0 4px rgba(0, 0, 0, 0.5),
        inset 0 -4px 8px 0 rgba(0, 0, 0, 0.5),
        inset 0 2px 8px 0 rgba(255, 255, 255, 0.25);
}

.gwp-solution__feature {
    gap: 13px;
}

.gwp-solution__feature-icon {
    font-size: 32px;
    color: var(--gwp-primary);
}

.gwp-solution__feature-text {
    font-family: var(--gwp-font-title);
    font-size: 16px;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.331;
    color: var(--gwp-text-inverse);
}

.gwp-solution__feature-divider {
    width: 1px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.4);
}

/* ---- Responsive ---- */
/* .gwp-solution__title responsive step-down inherited from global .gwp-section-title
   (extra 1200px intermediate step dropped for simplification).
   .gwp-solution__badge responsive tweak deleted (covered by global .gwp-eyebrow). */
@media (max-width: 1199.98px) {
    .gwp-solution__row { gap: 28px; }
    .gwp-solution__features { gap: 24px; padding: 16px 24px; }
    .gwp-solution__feature-icon { font-size: 28px; }
    .gwp-solution__feature-text { font-size: 15px; }
    .gwp-solution__feature-divider { height: 56px; }
}

@media (max-width: 991.98px) {
    .gwp-solution { padding-top: 40px; padding-bottom: 40px; }
    .gwp-solution__body { font-size: var(--gwp-fs-xs); line-height: 22px; }
    .gwp-solution__body--bold { font-size: var(--gwp-fs-sm); }
    .gwp-solution__row { gap: 20px; }
    .gwp-solution__features { gap: 20px; padding: 16px 20px; }
    .gwp-solution__feature { flex: 0 0 calc(33.333% - 14px); min-width: 0; justify-content: flex-start; }
}

@media (max-width: 767.98px) {
    .gwp-solution__features {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
        row-gap: 40px;
        padding: 30px 20px;
        min-height: 0;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: var(--gwp-radius-md);
    }
    .gwp-solution__feature { gap: 12px; }
    .gwp-solution__feature:nth-of-type(odd) {
        padding-right: 10px;
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
    .gwp-solution__feature:nth-of-type(even) { padding-left: 20px; }
    .gwp-solution__feature-icon { font-size: 24px; }
    .gwp-solution__feature-text { font-size: 13px; line-height: 1.25; }
}

@media (max-width: 575.98px) {
    .gwp-solution { padding-top: 32px; padding-bottom: 32px; }
    /* Solution-specific: shrink further from global's xl to lg at ≤575.98 */
    .gwp-solution__title { font-size: var(--gwp-fs-lg) !important; }
    .gwp-solution__feature-text { font-size: 13px; }
    .gwp-solution__feature-icon { font-size: 28px; }
}

/* WHY WE ARE DIFFERENT (Value-prop) */
.gwp-value {
    background-color: var(--gwp-surface-0);
    color: var(--gwp-text-body);
}

/* Decorative ellipse on the left edge */
.gwp-value__glow {
    left: -200px;
    top: -80px;
    width: 540px;
    height: 820px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(245, 178, 9, 0.22),
        rgba(245, 178, 9, 0.10) 45%,
        transparent 75%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

.gwp-value__row {
    justify-content: center;
}

/* ---- LEFT column: 3 stacked "Every X" cards ----
   Widths handled by col-lg-6 / col-lg-5 on the HTML (6+5=11/12 leaves
   room for the gap-lg-20 / gap-xl-40 gutter). */
.gwp-value__card {
    min-height: 160px;
    padding: 22px 20px;
    background-color: var(--gwp-surface-0);
    border: 1px solid var(--gwp-heading);
    border-radius: var(--gwp-radius-lg);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

/* Soft gold sheen from top-right that fades in on hover — matches .gwp-different__card. */
.gwp-value__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at top right,
                                rgba(245, 178, 9, 0.10),
                                transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.gwp-value__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -14px rgba(49, 53, 110, 0.22),
                0 8px 18px -8px rgba(245, 178, 9, 0.20);
    border-color: var(--gwp-primary);
    z-index: 2;
}

.gwp-value__card:hover::before { opacity: 1; }

/* Only the first card has the soft drop shadow */
.gwp-value__card--shadow {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}

.gwp-value__card-text {
    width: 372px;
    max-width: 57%;
    gap: 13px;
    position: relative;
    z-index: 1;
}

/* .gwp-value__card-title — typography from global .gwp-card-title + --lg. */

.gwp-value__card-body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-light);
    line-height: 26px;
    color: var(--gwp-text-muted);
}

.gwp-value__card-body strong {
    font-weight: var(--gwp-fw-bold);
    color: var(--gwp-text-body);
}

.gwp-value__card-image {
    position: absolute;
    right: 0;
    bottom: -30px;
    width: 300px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.gwp-value__card-image img {
    object-fit: contain;
    object-position: right center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gwp-value__card:hover .gwp-value__card-image img {
    transform: scale(1.08);
}

/* ---- RIGHT column: badge + headline + CTA + quote ----
   Width handled by col-lg-5 on the HTML. */
.gwp-value__content {
    gap: 0;
}

.gwp-value__title  { margin-top: 12px !important; }
.gwp-value__subheading,
.gwp-value__description,
.gwp-value__detail { margin-top: 16px !important; }
.gwp-value__cta    { margin-top: 25px !important; }
.gwp-value__quote  { margin-top: 25px !important; }

/* Eyebrow/badge */
.gwp-value__badge {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--gwp-heading);
    border-radius: var(--gwp-radius-pill);
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-sm);
    font-weight: var(--gwp-fw-semibold);
    color: var(--gwp-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
}

/* .gwp-value__title — typography from global .gwp-section-title. */

.gwp-value__subheading {
    font-family: var(--gwp-font-title);
    font-size: 26px !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.2;
    color: var(--gwp-heading);
}

/* .gwp-value__description — typography from global .gwp-section-lead. */

.gwp-value__detail {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-semibold);
    line-height: 26px;
    color: var(--gwp-text-body);
}

/* CTA — 50px tall, 12px radius, 40/20 padding.
   Color / font / shadow inherit from .gwp-btn--primary. */
/* Button visuals from global .gwp-btn.gwp-btn--primary.gwp-btn--cta.
   Keeps 40px horizontal padding (wider than the standard 10px). */
.gwp-value__cta {
    width: auto;
    min-width: 219px;
    padding: 0 40px;
}

/* ---- Quote footer ---- */
.gwp-value__quote-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(49, 53, 110, 0.1);
    color: var(--gwp-heading);
    font-size: 22px;
    line-height: 1;
}

.gwp-value__quote-divider {
    width: 1px;
    height: 39.5px;
    background-color: var(--gwp-heading);
    opacity: 0.5;
}

.gwp-value__quote-text {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 1.4;
    color: var(--gwp-text-body);
    width: 228px;
}

/* Arrow indicator: vertical line with a centered badge circle.
   On mobile (< md) the same wrap is flipped into a full-width horizontal rule
   with the badge centered on it — see the max-width: 767.98px block below. */
.gwp-value__arrow-wrap {
    display: inline-block;
    width: 30px;
    height: 84px;
    flex: 0 0 30px;
}

.gwp-value__arrow-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background-color: var(--gwp-heading);
    opacity: 0.5;
    pointer-events: none;
}

.gwp-value__arrow-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fffbf5;
    border: 1px solid rgba(49, 53, 110, 0.5);
    color: var(--gwp-heading);
    font-size: 14px;
    line-height: 1;
    z-index: 1;
}

.gwp-value__quote-summary {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-lg);
    font-weight: var(--gwp-fw-extrabold);
    line-height: 1.2;
    color: var(--gwp-text-body);
    width: 192px;
}

/* ---- Responsive (values not expressible via Bootstrap utilities) ---- */
/* At xl+ (1200+) the quote row uses flex-xl-nowrap so the two blocks sit
   side-by-side, but col-lg-5 is only wide enough to fit both blocks at
   their natural widths (228 + 192) once the container hits ~1370. Below
   that, let the blocks and their text elements shrink so the row still
   fits on one line without overflowing off-screen. */
@media (max-width: 1369.98px) {
    .gwp-value__quote-block,
    .gwp-value__summary-block {
        flex-shrink: 1 !important;
        min-width: 0;
    }
    .gwp-value__quote-text {
        width: auto;
        max-width: 228px;
        min-width: 0;
    }
    .gwp-value__quote-summary {
        width: auto;
        max-width: 192px;
        min-width: 0;
    }
}

@media (max-width: 1199.98px) {
    .gwp-value__title { font-size: var(--gwp-fs-2xl) !important; }
    .gwp-value__subheading { font-size: 22px !important; }
    .gwp-value__card { min-height: 140px; padding: 18px; }
    .gwp-value__card-image { width: 240px; }
    .gwp-value__card-text { max-width: 60%; }
}

@media (max-width: 991.98px) {
    .gwp-value__title { font-size: var(--gwp-fs-xl) !important; }
    .gwp-value__subheading { font-size: 20px !important; }
    .gwp-value__description, .gwp-value__detail { font-size: var(--gwp-fs-sm); line-height: 22px; }
    .gwp-value__card { min-height: 130px; }
    .gwp-value__card-image { width: 200px; bottom: -10px; }
    .gwp-value__card-title { font-size: var(--gwp-fs-md) !important; }
    .gwp-value__card-body { font-size: var(--gwp-fs-xs); line-height: 22px; }

    /* Flatten the content column so cards can slot between the "detail"
       line and the CTA via order-first / order-last on the children.
       !important beats Bootstrap's `d-flex` utility on the same element. */
    .gwp-value__content { display: contents !important; }

    /* Uniform spacing between flex items on mobile — .gwp-value__row's
       gap-15 (24px) handles it, so zero out the desktop mt-* offsets. */
    .gwp-value__title,
    .gwp-value__subheading,
    .gwp-value__description,
    .gwp-value__detail,
    .gwp-value__cta,
    .gwp-value__quote { margin-top: 0 !important; }
}

@media (max-width: 767.98px) {
    .gwp-value__badge { padding: 8px 18px; font-size: 11px; letter-spacing: 1.5px; }

    /* Below md: stack the card so the image sits below the text instead of
       being absolutely-positioned on the right. Bottom padding is dropped so
       the image flushes to the card's rounded bottom edge. */
    .gwp-value__card { padding: 16px 16px 0; min-height: 0; }
    .gwp-value__card-text { max-width: 100%; width: 100%; gap: 8px; }
    .gwp-value__card-image {
        position: static;
        width: 100%;
        height: 160px;
        margin-top: 12px;
        opacity: 1;
    }
    .gwp-value__card-image img { object-position: center; }


    .gwp-value__quote-text { width: auto; flex: 1 1 auto; min-width: 0; }
    .gwp-value__summary-block { flex-direction: column; gap: 12px !important; }
    .gwp-value__arrow-wrap {
        width: 100%;
        height: 30px;
        flex: 0 0 30px;
    }
    .gwp-value__arrow-line {
        left: 0;
        right: 0;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 1px;
        margin-left: 0;
        margin-top: -0.5px;
    }
    .gwp-value__quote-summary {
        width: auto;
        font-size: var(--gwp-fs-md);
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .gwp-value__title { font-size: var(--gwp-fs-lg) !important; }
    .gwp-value__subheading { font-size: 18px !important; }
    .gwp-value__card { padding: 14px 14px 0; }
    .gwp-value__card-image { height: 140px; }
    .gwp-value__cta { padding: 0 16px; min-width: 0; }
    .gwp-value__quote-divider { display: none; }
}

@media (max-width: 379.98px) {
    .gwp-value__card-image { height: 120px; }
    .gwp-value__quote-icon { width: 36px; height: 36px; font-size: 18px; }
}

/* REFUNDABLE TICKETS / LOWEST PRICE */
.gwp-refundable {
    background-color: var(--gwp-surface-0);
}

/* Inner card — gradient background, 32px radius */
.gwp-refundable__card {
    border-radius: 32px;
    background: linear-gradient(-69.94deg, #585fbe 3.54%, #31356e 59.26%);
    color: var(--gwp-text-inverse);
    padding: 70px 60px;
}

/* Decorative ring outlines */
.gwp-refundable__ring {
    border-radius: 50%;
    pointer-events: none;
    border: 60px solid rgba(255, 255, 255, 0.10);
}

.gwp-refundable__ring--tl { top: -156px; left: -233px; width: 405px; height: 405px; }
.gwp-refundable__ring--br { bottom: -120px; right: -110px; width: 399px; height: 399px; }

/* "Fully Refundable Tickets" decorative stamp — HTML/CSS.
   Positioned relative to .gwp-refundable__inner on desktop (attractions is
   position:static on desktop, inner is position:relative from its HTML class),
   so top:-40px matches the original 30px-from-card-top (inner sits 70px below
   the card's border-top due to card padding). Left stays ~55% because inner
   width is only ~10% narrower than the card, producing a nearly identical
   horizontal position. Mobile overrides re-anchor to attractions. */
.gwp-refundable__stamp {
    top: -120px;
    left: -10%;
    width: 136px;
    height: 150px;
    transform: rotate(-10deg);
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.gwp-refundable__stamp-card {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: #f5b209;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}

.gwp-refundable__stamp-card--back {
    background: #0f2c6e;
    transform: rotate(8deg) translate(8px, 10px);
    opacity: 1;
    z-index: 0;
}

.gwp-refundable__stamp-card--front {
    padding: 14px 10px 14px;
    gap: 2px;
    z-index: 1;
}

.gwp-refundable__stamp-shield {
    width: 26px;
    height: 26px;
    color: #0f2c6e;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 6px;
}

.gwp-refundable__stamp-fully {
    font-family: var(--gwp-font-title);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    color: #0f2c6e;
}

.gwp-refundable__stamp-refundable {
    font-family: var(--gwp-font-title);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    color: #0f2c6e;
}

.gwp-refundable__stamp-tickets {
    width: 100%;
    margin-top: 6px;
    gap: 5px;
    font-family: var(--gwp-font-title);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #0f2c6e;
}

.gwp-refundable__stamp-rule {
    flex: 1;
    height: 1px;
    background: rgba(15, 44, 110, 0.55);
}

.gwp-refundable__stamp-tickets-text {
    line-height: 1;
}

.gwp-refundable__inner {
    gap: 60px;
}

/* ---- LEFT column ---- */
/* Badge visuals from global .gwp-eyebrow.gwp-eyebrow--inverse
   (global handles wrapping — no local override needed). */

.gwp-refundable__title {
    font-family: var(--gwp-font-title);
    font-size: 34px !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 45px;
    color: var(--gwp-text-inverse);
}

.gwp-refundable__title-accent {
    color: var(--gwp-primary);
}

.gwp-refundable__body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 22px;
    color: var(--gwp-text-inverse);
}

.gwp-refundable__footnote {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 22px;
    color: var(--gwp-text-inverse);
}

.gwp-refundable__footnote a {
    color: var(--gwp-text-inverse);
    text-decoration: underline;
}

/* Highlights — 2×2 grid */
.gwp-refundable__highlights {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 73px;
    row-gap: 14px;
}

.gwp-refundable__highlights li {
    gap: 6px;
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 1.331;
    color: var(--gwp-text-inverse);
}

.gwp-refundable__highlights .bi {
    color: var(--gwp-primary);
    font-size: 20px;
}

/* CTA — color / font / shadow inherit from .gwp-btn--primary. */
/* Button visuals from global .gwp-btn.gwp-btn--primary.gwp-btn--cta.
   Keeps 40px horizontal padding (wider than the standard 10px). */
.gwp-refundable__cta {
    width: auto;
    min-width: 199px;
    padding: 0 40px;
}

/* ---- RIGHT column: 2×2 attraction cards ---- */
.gwp-refundable__attractions {
    max-width: 496px;
}

.gwp-refundable__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.gwp-refundable__attraction {
    background-color: var(--gwp-surface-0);
    border: 3.4px solid var(--gwp-surface-0);
    border-radius: 20px;
    box-shadow: 0 3.4px 13.6px rgba(0, 0, 0, 0.15);
    padding: 38px 33px;
    aspect-ratio: 238 / 183;
    gap: 8px;
}

.gwp-refundable__attraction-logo {
    width: 100%;
    max-width: 150px;
    max-height: 56px;
    height: auto;
    object-fit: contain;
}

.gwp-refundable__attraction-label {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-lg);
    font-weight: var(--gwp-fw-bold);
    color: var(--gwp-heading);
    text-transform: capitalize;
    line-height: 1.331;
    text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-refundable__card { padding: 56px 40px; }
    .gwp-refundable__title { font-size: 30px !important; line-height: 1.3; }
    .gwp-refundable__inner { gap: 40px; }
    .gwp-refundable__highlights { column-gap: 40px; }
    .gwp-refundable__stamp-fully,
    .gwp-refundable__stamp-refundable { font-size: 16px; }
    .gwp-refundable__attraction { padding: 28px 24px; }
}

/* Hide the decorative stamp in the iPad range (992-1199): the base
   left:-20% position pushes it into the title column at these widths.
   Mobile (<992) has its own re-anchored version above the grid. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .gwp-refundable__stamp { display: none; }
}

@media (max-width: 991.98px) {
    .gwp-refundable { padding-top: 40px; padding-bottom: 40px; }
    .gwp-refundable__card { padding: 56px 24px 40px; border-radius: 20px; }
    .gwp-refundable__title { font-size: 26px !important; line-height: 1.3; }
    .gwp-refundable__inner { gap: 32px; }

    .gwp-refundable__attractions {
        position: relative;
        margin-top: 130px !important;
    }
    .gwp-refundable__stamp {
        top: -110px;
        left: auto;
        right: 30px;
        bottom: auto;
        width: 100px;
        height: 110px;
        transform: rotate(-10deg);
    }
    .gwp-refundable__stamp-shield { font-size: 16px; margin-bottom: 4px; }
    .gwp-refundable__stamp-fully,
    .gwp-refundable__stamp-refundable { font-size: 14px; }
    .gwp-refundable__highlights { column-gap: 24px; }
    .gwp-refundable__ring--tl { width: 320px; height: 320px; top: -120px; left: -180px; border-width: 50px; }
    .gwp-refundable__ring--br { width: 320px; height: 320px; bottom: -90px; right: -80px; border-width: 50px; }
}

@media (max-width: 767.98px) {
    .gwp-refundable__card { padding: 40px 20px 36px; }
    .gwp-refundable__title { font-size: 22px !important; }
    .gwp-refundable__body, .gwp-refundable__footnote { font-size: var(--gwp-fs-xs); line-height: 20px; }
    .gwp-refundable__highlights li { font-size: var(--gwp-fs-sm); }
    .gwp-refundable__highlights .bi { font-size: 18px; }
    .gwp-refundable__grid { gap: 12px; }
    .gwp-refundable__attraction { padding: 16px 12px; aspect-ratio: 3 / 2; min-height: 0; }
    .gwp-refundable__attraction-logo { max-height: 40px; }
    .gwp-refundable__attraction-label { font-size: var(--gwp-fs-md); }
}

@media (max-width: 575.98px) {
    .gwp-refundable { padding-top: 32px; padding-bottom: 32px; }
    .gwp-refundable__card { padding: 36px 16px; }
    .gwp-refundable__highlights { grid-template-columns: 1fr; gap: 10px; }
    .gwp-refundable__grid { gap: 10px; }
    .gwp-refundable__attraction { padding: 12px 10px; aspect-ratio: 3 / 2; }
    .gwp-refundable__attraction-logo { max-height: 36px; }
    .gwp-refundable__ring--tl,
    .gwp-refundable__ring--br { border-width: 30px; }
}

/* THE FOUNDATION */
.gwp-foundation {
    background: linear-gradient(180deg, #ffffff 0%, #ecf1ff 100%);
    color: var(--gwp-text-body);
}

/* ---- Top header ---- */
.gwp-foundation__header {
    max-width: 1218px;
    margin-left: auto;
    margin-right: auto;
}

/* .gwp-foundation__badge — typography from global .gwp-eyebrow;
   d-inline-flex on the element handles inline-flex + align-items. */

.gwp-foundation__title {
    /* Typography from global .gwp-section-title. */
    line-height: 45px;
    opacity: 0.9;
    max-width: 847px;
}

.gwp-foundation__subtitle {
    font-family: 'Be Vietnam Pro', var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 1.331;
    color: var(--gwp-text-body);
    max-width: 771px;
}

/* ---- Security & Integrations cards ---- */
.gwp-foundation__cards {
    gap: 32px;
    max-width: 1218px;
    margin-left: auto;
    margin-right: auto;
}

.gwp-foundation__card {
    flex: 1 1 0;
    padding: 32px;
    border: 1px solid;
    border-radius: var(--gwp-radius-lg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    min-height: 288px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.gwp-foundation__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gwp-shadow-card);
}

.gwp-foundation__card--security {
    background-color: rgba(49, 53, 110, 0.05);
    border-color: var(--gwp-heading);
}

.gwp-foundation__card--security:hover {
    background-color: rgba(49, 53, 110, 0.10);
}

.gwp-foundation__card--integrations {
    background-color: rgba(77, 157, 1, 0.05);
    border-color: #4d9d01;
}

.gwp-foundation__card--integrations:hover {
    background-color: rgba(77, 157, 1, 0.10);
}

.gwp-foundation__card:hover .gwp-foundation__card-icon {
    transform: scale(1.08);
}

.gwp-foundation__card-head {
    gap: 16px;
}

.gwp-foundation__card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--gwp-radius-sm);
    background: linear-gradient(146.12deg, #31356e 19.858%, #595d98 70.491%);
    color: var(--gwp-primary);
    font-size: 28px;
    transition: transform 0.3s ease;
}

.gwp-foundation__card-title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-xl) !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 34px;
    color: var(--gwp-heading);
}

.gwp-foundation__list li {
    gap: 8px;
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-medium);
    line-height: 23px;
    color: var(--gwp-heading);
}

.gwp-foundation__list .bi {
    color: var(--gwp-heading);
    font-size: 20px;
    margin-top: 2px;
}

/*.gwp-foundation__card--integrations .gwp-foundation__list .bi {
    color: #4d9d01;
}*/

/* PRICING BAND (cream bg, edge-to-edge) */
.gwp-foundation__pricing {
    background-color: #fefbf2;
    padding-top: 60px;
    padding-bottom: 60px;
}

.gwp-foundation__pricing-header {
    max-width: 959px;
    margin-left: auto;
    margin-right: auto;
}

.gwp-foundation__pricing-title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-3xl) !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.25;
    color: var(--gwp-text-body);
    max-width: 860px;
/*    text-transform: capitalize;*/
}

.gwp-foundation__pricing-title strong {
    font-weight: var(--gwp-fw-extrabold);
}

.gwp-foundation__pricing-subtitle {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-lg);
    font-weight: var(--gwp-fw-semibold);
    color: var(--gwp-text-body);
    text-transform: capitalize;
}

.gwp-foundation__pricing-description {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 26px;
    color: var(--gwp-text-body);
    max-width: 959px;
}

/* ---- Plans ---- */
.gwp-foundation__plans {
    gap: 75px;
    max-width: 1050px;
    width: 100%;
}

.gwp-plan {
    flex: 1 1 0;
    padding: 35px;
    border-radius: 17px;
    color: var(--gwp-text-inverse);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gwp-plan:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(49, 53, 110, 0.28);
}

.gwp-plan--standard {
    background-color: var(--gwp-heading);
    border: 2.145px solid rgba(255, 255, 255, 0.5);
}

.gwp-plan--standard:hover {
    border-color: rgba(255, 255, 255, 0.85);
}

.gwp-plan--custom {
    background: linear-gradient(96.28deg, #31356e 29.096%, #585fbe 80.956%);
    border: 2.2px solid #ffb340;
}

.gwp-plan--custom:hover {
    border-color: var(--gwp-primary);
    box-shadow: 0 20px 44px rgba(245, 178, 9, 0.32);
}

.gwp-plan__name-row {
    gap: 10px;
}

.gwp-plan__name {
    font-family: var(--gwp-font-title);
    font-size: 27px !important;
    font-weight: var(--gwp-fw-bold);
    letter-spacing: 0.54px;
    line-height: 1.16;
    color: var(--gwp-primary);
}

.gwp-plan__pill {
    height: 31px;
    padding: 6px 14px;
    background-color: #585fbe;
    border-radius: 60px;
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.25);
    font-family: var(--gwp-font-body);
    font-size: 14px;
    font-weight: var(--gwp-fw-bold);
    color: var(--gwp-text-inverse);
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
}

.gwp-plan__price {
    font-family: var(--gwp-font-title);
    font-size: 46px;
    font-weight: var(--gwp-fw-bold);
    line-height: 60px;
    color: var(--gwp-text-inverse);
}

.gwp-plan__tagline {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

.gwp-plan__divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0;
}

.gwp-plan__features-title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-lg) !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 25.74px;
    color: var(--gwp-text-inverse);
}

.gwp-plan__features-accent {
    color: var(--gwp-primary);
}

.gwp-plan__features {
    gap: 17px;
}

.gwp-plan__features li {
    gap: 9px;
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 23px;
    color: var(--gwp-text-inverse);
}

.gwp-plan__features .bi {
    color: var(--gwp-primary);
    font-size: 18px;
    margin-top: 3px;
}

.gwp-plan--custom .gwp-plan__features .bi {
    color: var(--gwp-primary);
}

/* Plan CTAs */
.gwp-plan__cta {
    height: 55px;
    padding: 0 32px;
    border-radius: 8.58px;
    font-family: var(--gwp-font-title);
    font-size: 19px;
    font-weight: var(--gwp-fw-semibold);
    letter-spacing: 0.4px;
    text-decoration: none;
    text-transform: capitalize;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.gwp-plan__cta--solid {
    background-color: var(--gwp-primary);
/*    border: 1.072px solid var(--gwp-surface-0);*/
    color: var(--gwp-heading);
}

.gwp-plan__cta--outline {
    background-color: transparent;
    border: 1px solid var(--gwp-surface-0);
    color: var(--gwp-text-inverse);
    font-size: 16px;
    gap: 10px;
}

/* :hover styling for .gwp-plan__cta--solid / --outline is unified with the
   sitewide CTA hover in the "BUTTON MICRO-INTERACTIONS" block at EOF. */

/* ---- Trust footer (compliance badges) ---- */
.gwp-foundation__trust {
    gap: 30px;
    max-width: 1050px;
}

.gwp-foundation__trust li {
    gap: 8px;
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 26px;
    color: var(--gwp-text-body);
    white-space: nowrap;
}

.gwp-foundation__trust .bi {
    color: var(--gwp-heading);
    font-size: 22px;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-foundation__title,
    .gwp-foundation__pricing-title { font-size: var(--gwp-fs-2xl) !important; line-height: 1.3; }
    .gwp-foundation__cards { gap: 24px; }
    .gwp-foundation__card { padding: 28px; min-height: 0; }
    .gwp-foundation__card-icon { width: 56px; height: 56px; font-size: 24px; }
    .gwp-foundation__card-title { font-size: var(--gwp-fs-lg) !important; line-height: 1.3; }
    .gwp-foundation__plans { gap: 32px; }
    .gwp-plan { padding: 30px; }
    .gwp-plan__price { font-size: 38px; line-height: 1.2; }
    .gwp-plan__name { font-size: 28px !important; }
}

@media (max-width: 991.98px) {
    .gwp-foundation .py-50 { padding-top: 40px !important; padding-bottom: 40px !important; }
    .gwp-foundation__pricing { padding-top: 40px; padding-bottom: 40px; }
    .gwp-foundation__title,
    .gwp-foundation__pricing-title { font-size: var(--gwp-fs-xl) !important; line-height: 1.3; }
    .gwp-foundation__pricing-subtitle { font-size: var(--gwp-fs-md); }
    .gwp-foundation__pricing-description { font-size: var(--gwp-fs-sm); line-height: 22px; }
    .gwp-foundation__cards { gap: 20px; }
    /* In flex-column stacking, flex: 1 1 0 collapses cards to 0 height
       because there's no parent height to grow into. Size to content instead. */
    .gwp-foundation__card { flex: 0 0 auto; }
    .gwp-foundation__card-icon svg { width: 28px; height: 28px; }
    .gwp-foundation__list li { font-size: var(--gwp-fs-sm); line-height: 20px; }
    .gwp-foundation__plans { gap: 20px; }
    .gwp-plan { padding: 28px; flex: 0 0 auto; }
    .gwp-plan__price { font-size: 34px; }
    .gwp-foundation__trust { gap: 20px; }
}

@media (max-width: 767.98px) {
    /* .gwp-foundation__badge responsive tweak deleted (covered by global .gwp-eyebrow). */
    .gwp-foundation__card { padding: 24px; }
    .gwp-foundation__card-icon { width: 48px; height: 48px; }
    .gwp-foundation__card-icon svg { width: 24px; height: 24px; }
    .gwp-foundation__card-title { font-size: var(--gwp-fs-md) !important; }
    .gwp-plan { padding: 24px; }
    .gwp-plan__name { font-size: 24px !important; }
    .gwp-plan__price { font-size: 30px; line-height: 1.2; }
    .gwp-plan__tagline { font-size: var(--gwp-fs-sm); }
    .gwp-plan__features-title { font-size: var(--gwp-fs-md) !important; }
    .gwp-plan__features li { font-size: var(--gwp-fs-sm); line-height: 20px; }
    .gwp-plan__cta { height: 48px; font-size: 16px; padding: 0 24px; }
    .gwp-foundation__trust { gap: 12px 18px; }
    .gwp-foundation__trust li { font-size: var(--gwp-fs-sm); }
    .gwp-foundation__trust .bi { font-size: 18px; }
}

@media (max-width: 575.98px) {
    .gwp-foundation__title,
    .gwp-foundation__pricing-title { font-size: var(--gwp-fs-lg) !important; }
    .gwp-foundation__card { padding: 20px; }
    .gwp-foundation__card-head { gap: 12px; }
    .gwp-plan { padding: 20px; }
    .gwp-plan__divider { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
    .gwp-plan__name-row { flex-wrap: wrap; gap: 8px; }
    .gwp-plan__price { font-size: 26px; }
    .gwp-plan__features { gap: 12px; }
    .gwp-plan__cta { width: 100%; padding: 0 16px; }
    .gwp-foundation__trust { gap: 10px 16px; }
    .gwp-foundation__trust li { font-size: 13px; }
}

/* EMPLOYEE PERKS */
.gwp-perks {
    background-color: var(--gwp-surface-0);
    color: var(--gwp-text-body);
}

/* ---- Header ---- */
.gwp-perks__header { gap: 9px; }

.gwp-perks__title {
    font-family: var(--gwp-font-title);
    font-size: 33px !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.25;
    color: var(--gwp-text-body);
    max-width: 633px;
}

.gwp-perks__subtitle {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 25px;
    color: var(--gwp-text-body);
    max-width: 806px;
}

/* ---- LEFT: two stacked / offset decorative cards ---- */
.gwp-perks__cards {
    width: 408px;
    height: 435px;
    flex-shrink: 0;
}

.gwp-perks__card {
    border-radius: 20.8px;
    border: 1.3px solid;
    padding: 0;
}

.gwp-perks__card-art {
    display: block;
    position: absolute;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.gwp-perks__card-text {
    position: absolute;
    font-family: var(--gwp-font-body);
    font-size: 20.8px;
    font-weight: var(--gwp-fw-semibold);
    line-height: 1.2;
    white-space: nowrap;
}

.gwp-perks__card--blue {
    left: 0;
    top: 121px;
    width: 223px;
    height: 314px;
    background-color: var(--gwp-heading);
    border-color: #000;
    color: #ffffff;
    z-index: 1;
}

.gwp-perks__card--blue .gwp-perks__card-art {
    left: 19px;
    top: 88px;
    width: 102px;
    height: 113px;
    -webkit-mask-image: url('//res.cloudinary.com/funex/image/upload/f_auto,q_40/c_scale,w_auto,dpr_auto/v1782106454/gwp-perks-globe_avs8ru.png');
            mask-image: url('//res.cloudinary.com/funex/image/upload/f_auto,q_40/c_scale,w_auto,dpr_auto/v1782106454/gwp-perks-globe_avs8ru.png');
}

.gwp-perks__card--blue .gwp-perks__card-text {
    left: 23.7px;
    top: 226.7px;
    color: #ffffff;
}

.gwp-perks__card--gold {
    left: 168px;
    top: 0;
    width: 240px;
    height: 335px;
    background-color: #ffbf01;
    border-color: #0a273b;
    color: var(--gwp-heading);
    z-index: 2;
}

.gwp-perks__card--gold .gwp-perks__card-art {
    left: 33px;
    top: 29px;
    width: 103px;
    height: 116px;
    -webkit-mask-image: url('//res.cloudinary.com/funex/image/upload/f_auto,q_40/c_scale,w_auto,dpr_auto/v1782106434/gwp-perks-carousel_kpk1le.png');
            mask-image: url('//res.cloudinary.com/funex/image/upload/f_auto,q_40/c_scale,w_auto,dpr_auto/v1782106434/gwp-perks-carousel_kpk1le.png');
}

.gwp-perks__card--gold .gwp-perks__card-text {
    left: 26.7px;
    top: 246.7px;
    color: var(--gwp-heading);
}

/* ---- RIGHT: 3 info items + CTA ---- */
.gwp-perks__info {
    width: 580px;
    flex-shrink: 0;
    gap: 40px;
}

.gwp-perks__items { gap: 24px; }

.gwp-perks__item {
    gap: 22px;
}

.gwp-perks__item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--gwp-heading);
    color: var(--gwp-primary);
    font-size: 24px;
}

.gwp-perks__item-text {
    min-width: 0;
    gap: 12px;
}

.gwp-perks__item-title {
    font-family: var(--gwp-font-title);
    font-size: 22px !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.331;
    color: var(--gwp-text-body);
}

.gwp-perks__item-description {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 1.331;
    color: var(--gwp-text-body);
}

/* CTA — same 260×50/12px-radius spec as other section CTAs */
/* Button visuals from global .gwp-btn.gwp-btn--primary.gwp-btn--cta. */
.gwp-perks__cta {
    width: 260px;
    max-width: 100%;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-perks__title { font-size: 28px !important; }
    .gwp-perks__info { width: auto; flex: 1 1 auto; }
    .gwp-perks__cards { width: 360px; height: 390px; }
    .gwp-perks__card--blue { width: 200px; height: 280px; top: 110px; }
    .gwp-perks__card--gold { width: 215px; height: 300px; left: 145px; }
    .gwp-perks__item-title { font-size: 20px !important; }
}

@media (max-width: 991.98px) {
    .gwp-perks { padding-top: 40px; padding-bottom: 40px; }
    .gwp-perks__title { font-size: var(--gwp-fs-xl) !important; }
    .gwp-perks__subtitle { font-size: var(--gwp-fs-sm); line-height: 22px; }
    .gwp-perks__info { width: 100%; gap: 28px; }
    .gwp-perks__items { gap: 20px; }
    .gwp-perks__item { gap: 18px; }
    .gwp-perks__item-description { font-size: var(--gwp-fs-xs); line-height: 1.4; }
}

@media (max-width: 767.98px) {
    .gwp-perks__cards { width: 320px; height: 360px; }
    .gwp-perks__card--blue { width: 180px; height: 250px; top: 100px; }
    .gwp-perks__card--gold { width: 195px; height: 270px; left: 125px; }
    .gwp-perks__card--blue .gwp-perks__card-art { left: 16px; top: 70px; width: 90px; height: 100px; }
    .gwp-perks__card--gold .gwp-perks__card-art { left: 28px; top: 24px; width: 90px; height: 100px; }
    .gwp-perks__card--blue .gwp-perks__card-text { left: 20px; top: 190px; }
    .gwp-perks__card--gold .gwp-perks__card-text { left: 22px; top: 205px; }
    .gwp-perks__card-text { font-size: 18px; }
    .gwp-perks__item-icon { width: 40px; height: 40px; font-size: 18px; }
    .gwp-perks__item-title { font-size: 18px !important; }
}

@media (max-width: 575.98px) {
    .gwp-perks { padding-top: 32px; padding-bottom: 32px; }
    .gwp-perks__title { font-size: var(--gwp-fs-lg) !important; }
    .gwp-perks__cards {
        width: 100%;
        max-width: 360px;
        height: 400px;
    }
    .gwp-perks__card--blue { width: 55%; height: 290px; top: 110px; left: 0; }
    .gwp-perks__card--gold { width: 60%; height: 310px; left: auto; right: 0; top: 0; }
    .gwp-perks__card--blue .gwp-perks__card-art,
    .gwp-perks__card--gold .gwp-perks__card-art {
        left: 50%;
        top: 60px;
        transform: translateX(-50%);
        width: 90px;
        height: 100px;
    }
    .gwp-perks__card-text { font-size: 16px; left: 20px !important; top: 200px !important; }
    .gwp-perks__item { gap: 16px; }
    .gwp-perks__item-title { font-size: var(--gwp-fs-md) !important; }
}

/* THE PLATFORM */
.gwp-platform {
    background-color: #31356e;
    color: var(--gwp-text-inverse);
    padding-bottom: 130px;
}

/* ---- Top: text + image row ---- */

/* .gwp-platform__badge — typography from global .gwp-eyebrow + --inverse. */

.gwp-platform__title {
    /* Typography from global .gwp-section-title + --inverse. */
    text-transform: capitalize;
}

.gwp-platform__title-accent {
    color: #fac109;
}

.gwp-platform__description {
    /* Typography from global .gwp-section-lead + --inverse. */
    max-width: 607px;
}

/* ---- Right column: laptop + phone composite ---- */
.gwp-platform__media {
    min-height: 432px;
}

.gwp-platform__image {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---- Bottom feature card band (white gradient) */
.gwp-platform__features {
    background: linear-gradient(180deg, #ffffff 0%, #dfdfdf 100%);
    border-radius: var(--gwp-radius-lg);
    padding: 32px 32px 32px 19px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    gap: 23px;
    z-index: 1;
}

.gwp-platform__feature {
    flex: 1 1 0;
    min-width: 180px;
    gap: 22px;
}

.gwp-platform__feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 17px;
    background: linear-gradient(98.86deg, #31356e 29.1%, #585FBE 80.96%);
    color: #fac109;
    font-size: 35px;
}

.gwp-platform__feature-title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-md) !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.331;
    color: var(--gwp-heading);
    text-transform: capitalize;
}

.gwp-platform__feature-description {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 1.331;
    color: var(--gwp-heading);
    margin-top: 10px;
}

.gwp-platform__feature-divider {
    align-self: stretch;
    width: 1px;
    background-color: rgba(49, 53, 110, 0.2);
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-platform { padding-bottom: 100px; }
    .gwp-platform__title { font-size: var(--gwp-fs-2xl) !important; }
    .gwp-platform__media { min-height: 360px; }
    .gwp-platform__features { padding: 28px 24px; }
    .gwp-platform__feature { gap: 14px; padding: 0 12px; }
    .gwp-platform__feature-icon { width: 56px; height: 56px; font-size: 26px; }
}

/* iPad range: with the default flex: 1 1 0 / min-width: 180px, only 4 of
   the 5 features fit per row and "Custom Branding" gets orphaned. Force
   3-per-row so the second row has 2 items — centered via the
   justify-content-lg-center utility on the wrapper. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .gwp-platform__feature { flex: 0 0 calc(33.333% - 20px); min-width: 0; }
    .gwp-platform__feature-divider { display: none; }
}

@media (max-width: 991.98px) {
    .gwp-platform { padding-top: 40px; padding-bottom: 80px; }
    .gwp-platform__title { font-size: var(--gwp-fs-xl) !important; }
    .gwp-platform__description { font-size: var(--gwp-fs-sm); line-height: 22px; }
    .gwp-platform__media { min-height: 0; }
    .gwp-platform__image { max-width: 480px; }
    .gwp-platform__features { padding: 24px; }
    .gwp-platform__feature { flex: 1 1 calc(50% - 32px); padding: 16px; min-width: 0; }
    .gwp-platform__feature-divider { display: none; }
}

@media (max-width: 767.98px) {
    /* .gwp-platform__badge responsive tweak deleted (covered by global .gwp-eyebrow). */
    .gwp-platform__features { padding: 20px; gap: 12px; }
    .gwp-platform__feature { padding: 12px; gap: 12px; }
    .gwp-platform__feature-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
    .gwp-platform__feature-title { font-size: var(--gwp-fs-base) !important; }
    .gwp-platform__feature-description { font-size: var(--gwp-fs-xs); margin-top: 8px; }
}

@media (max-width: 575.98px) {
    .gwp-platform { padding-top: 32px; padding-bottom: 60px; }
    .gwp-platform__title { font-size: var(--gwp-fs-lg) !important; }
    .gwp-platform__features { padding: 16px; }
    .gwp-platform__feature { flex: 0 0 calc(50% - 6px); padding: 12px 8px; min-width: 0; }
}


/* TESTIMONIALS */
.gwp-testimonials {
    background: linear-gradient(180deg, #ffffff 0%, #ecf1ff 100%);
    color: var(--gwp-text-body);
}

/* ---- Header ---- */
/* .gwp-testimonials__badge — typography from global .gwp-eyebrow. */

.gwp-testimonials__title {
    /* Typography from global .gwp-section-title. */
    line-height: 45px;
    opacity: 0.9;
    text-transform: capitalize;
}

/* ---- Slick track (horizontal carousel) ---- */
.gwp-testimonials__track {
    position: relative;
    padding: 16px 0;
    visibility: hidden;
}

.gwp-testimonials__track.slick-initialized {
    visibility: visible;
}

.gwp-testimonials__track .slick-list {
    margin: 0 -10px;
    /* Vertical breathing room so the hover lift + shadow don't get clipped. */
    padding: 20px 0;
    overflow-x: clip;
    overflow-y: visible;
}

.gwp-testimonials__track .slick-track {
    display: flex;
    align-items: stretch;
}

.gwp-testimonials__track .slick-slide {
    height: auto;
}

.gwp-testimonials__track .slick-slide > div {
    height: 100%;
}

.gwp-testimonial__slide {
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* ---- Testimonial card ---- */
.gwp-testimonial {
    height: 100%;
    min-height: 270px;
    padding: 22px 20px 20px 20px;
    background-color: #fefaec;
    border: 1px solid #dfdfdf;
    border-radius: 20px;
    box-sizing: border-box;
    cursor: default;
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.34, 1.32, 0.64, 1);
}

/* Soft gold glow behind the card on hover — fades in from 0 */
.gwp-testimonial::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(120% 80% at 50% 0%, rgba(245, 178, 9, 0.18) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.gwp-testimonial:hover::before {
    opacity: 1;
}

.gwp-testimonial--highlight {
    background-color: var(--gwp-heading);
    border-color: var(--gwp-heading);
}

/* Hover — every card turns navy with white type (matches the highlight variant)
   + a clear lift. Pauses autoplay (see slider JS in IndexAnonymous.cshtml). */
.gwp-testimonials__track .gwp-testimonial:hover {
    background-color: var(--gwp-heading);
    border-color: var(--gwp-heading);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(49, 53, 110, 0.40);
}

/* Highlight card already starts navy, so the bg-color swap above isn't
   visible. Give it a gold ring + gold-tinted shadow so the hover read is
   unmistakable on the navy variant too. */
.gwp-testimonials__track .gwp-testimonial--highlight:hover {
    border-color: var(--gwp-primary);
    box-shadow: 0 20px 40px -10px rgba(245, 178, 9, 0.45),
                0 4px 12px rgba(49, 53, 110, 0.20);
}

.gwp-testimonial__mark {
    display: inline-block;
    font-size: 56px;
    line-height: 0.9;
    color: var(--gwp-heading);
    opacity: 0.9;
    margin-bottom: -4px;
    transform-origin: top left;
    transition: color 0.8s ease,
                transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.8s ease;
}

.gwp-testimonial:hover .gwp-testimonial__mark {
    transform: scale(1.18) rotate(-6deg);
    opacity: 1;
}

.gwp-testimonial__mark::before {
    vertical-align: top;
}

.gwp-testimonial--highlight .gwp-testimonial__mark,
.gwp-testimonial:hover .gwp-testimonial__mark {
    color: var(--gwp-primary);
}

.gwp-testimonial__quote {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    line-height: 26px;
    color: #302e2b;
    flex: 1 1 auto;
    transition: color 0.8s ease;
}

.gwp-testimonial--highlight .gwp-testimonial__quote,
.gwp-testimonial:hover .gwp-testimonial__quote {
    color: var(--gwp-text-inverse);
}

.gwp-testimonial__author {
    align-items: center;
    gap: 14px;
}

.gwp-testimonial__avatar {
    width: 110px;
    height: 50px;
    min-width: 110px;
    min-height: 50px;
    max-width: 110px;
    max-height: 50px;
    flex: 0 0 110px;
    border-radius: 12px;
    object-fit: contain;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
    display: inline-block;
    transition: none;
}

.gwp-testimonial:hover .gwp-testimonial__avatar {
    transform: none;
    box-shadow: none;
}

.gwp-testimonial__byline {
    font-family: var(--gwp-font-body);
    font-size: 12.5px;
    font-style: normal;
    font-weight: var(--gwp-fw-semibold, 600);
    color: #302e2b;
    line-height: 1.45;
    letter-spacing: 0.1px;
    transition: color 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
    .gwp-testimonial,
    .gwp-testimonial::before,
    .gwp-testimonial__mark,
    .gwp-testimonial__quote,
    .gwp-testimonial__avatar,
    .gwp-testimonial__byline,
    .gwp-testimonials__track .gwp-testimonial:hover,
    .gwp-testimonial:hover .gwp-testimonial__mark,
    .gwp-testimonial:hover .gwp-testimonial__avatar {
        transition: none;
        transform: none;
    }
}

.gwp-testimonial--highlight .gwp-testimonial__byline,
.gwp-testimonial:hover .gwp-testimonial__byline {
    color: var(--gwp-text-inverse);
}

/* ---- Pagination dots (Slick) ---- */
.gwp-testimonials__pagination.slick-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

.gwp-testimonials__pagination.slick-dots li {
    width: 6px;
    height: 6px;
    margin: 0;
    line-height: 0;
    transition: width 0.3s ease;
}

.gwp-testimonials__pagination.slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 60px;
    background-color: rgba(49, 53, 110, 0.3);
    font-size: 0;
    color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gwp-testimonials__pagination.slick-dots li button::before {
    content: none;
}

.gwp-testimonials__pagination.slick-dots li.slick-active {
    width: 40px;
}

.gwp-testimonials__pagination.slick-dots li.slick-active button {
    background-color: var(--gwp-heading);
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-testimonials__title { font-size: var(--gwp-fs-2xl) !important; line-height: 1.3; }
    .gwp-testimonial { min-height: 260px; padding: 22px 20px; }
    .gwp-testimonial__quote { font-size: var(--gwp-fs-sm); line-height: 24px; }
    .gwp-testimonial__mark { font-size: 48px; }
}

@media (max-width: 991.98px) {
    .gwp-testimonials__title { font-size: var(--gwp-fs-xl) !important; line-height: 1.3; }
    .gwp-testimonial { min-height: 250px; }
    .gwp-testimonial__avatar {
        width: 96px;
        height: 44px;
        min-width: 96px;
        min-height: 44px;
        max-width: 96px;
        max-height: 44px;
        flex: 0 0 96px;
    }
}

@media (max-width: 767.98px) {
    /* .gwp-testimonials__badge responsive tweak deleted (covered by global .gwp-eyebrow). */
    .gwp-testimonial { padding: 22px 18px; min-height: 240px; }
    .gwp-testimonial__quote { font-size: var(--gwp-fs-xs); line-height: 22px; }
    .gwp-testimonial__mark { font-size: 42px; }
    .gwp-testimonial__byline { font-size: 11px; }
}

@media (max-width: 575.98px) {
    .gwp-testimonials__title { font-size: var(--gwp-fs-lg) !important; }
    .gwp-testimonial { padding: 20px; min-height: 220px; }
}

/* FAQ */
.gwp-faq {
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    color: var(--gwp-text-body);
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* ---- Header ---- */
.gwp-faq__header {
    gap: 12px;
}

/* .gwp-faq__badge — typography from global .gwp-eyebrow;
   d-inline-block on the element overrides display anyway. */

.gwp-faq__title {
    font-family: var(--gwp-font-title);
    font-size: 46px !important;
    font-weight: var(--gwp-fw-extrabold);
    line-height: 1.1;
    color: var(--gwp-heading);
    text-transform: capitalize;
    margin: 0 !important;
}

/* ---- FAQ list ---- */
.gwp-faq__list {
    gap: 10px !important;
    margin-top: 50px !important;
}

/* Each FAQ uses native <details>/<summary> for collapse.
   Padding lives on the <summary> (and <answer>) so the entire visible
   card area is the click target instead of just the inner content row. */
.gwp-faq__item {
    background-color: var(--gwp-surface-0);
    border: 0.6px solid var(--gwp-border);
    border-radius: var(--gwp-radius-md);
    transition: border-color 0.3s ease,
                background-color 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gwp-faq__item:hover {
    border-color: var(--gwp-heading);
    background-color: #fbfcff;
    box-shadow: 0 10px 26px -12px rgba(49, 53, 110, 0.28);
    transform: translateY(-3px);
}

.gwp-faq__item[open] {
    background: linear-gradient(180deg, #fafbff 0%, #f2f4fb 100%);
    border-color: var(--gwp-heading);
    box-shadow: 0 8px 22px -10px rgba(49, 53, 110, 0.22);
}

.gwp-faq__summary {
    list-style: none;
    cursor: pointer;
    align-items: flex-end;
    padding: 25px 40px;
    transition: padding 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.gwp-faq__item[open] .gwp-faq__summary {
    padding-bottom: 0;
}

/* Hide the default disclosure marker across browsers */
.gwp-faq__summary::-webkit-details-marker { display: none; }
.gwp-faq__summary::marker { content: ""; }

.gwp-faq__question {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-bold);
    line-height: 23px;
    color: var(--gwp-heading);
    margin: 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.gwp-faq__item:hover .gwp-faq__question {
    color: var(--gwp-primary-blue);
    transform: translateX(4px);
}

.gwp-faq__chevron {
    width: 28px;
    height: 28px;
    color: var(--gwp-heading);
    font-size: 18px;
    border-radius: 6px;
    background-color: transparent;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease,
                color 0.3s ease;
}

.gwp-faq__item:hover .gwp-faq__chevron {
    background-color: rgba(245, 178, 9, 0.15);
    color: var(--gwp-primary-blue);
    transform: scale(1.1);
}

.gwp-faq__item[open] .gwp-faq__chevron {
    transform: rotate(180deg);
    background-color: rgba(245, 178, 9, 0.2);
    color: var(--gwp-primary-blue);
}

.gwp-faq__item[open]:hover .gwp-faq__chevron {
    transform: rotate(180deg) scale(1.1);
}

.gwp-faq__answer {
    padding: 11px 40px 22px 40px;
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-base);
    font-weight: 300;
    line-height: 30px;
    color: #000;
}

.gwp-faq__item[open] .gwp-faq__answer {
    animation: gwp-faq-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gwp-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gwp-faq__item,
    .gwp-faq__item:hover,
    .gwp-faq__question,
    .gwp-faq__item:hover .gwp-faq__question,
    .gwp-faq__chevron,
    .gwp-faq__item:hover .gwp-faq__chevron,
    .gwp-faq__item[open] .gwp-faq__answer {
        transition: none;
        animation: none;
        transform: none;
    }
}

.gwp-faq__answer p { margin: 0 !important; }
.gwp-faq__answer p + p { margin-top: 0 !important; }

.gwp-faq__answer strong {
    color: var(--gwp-heading);
    font-weight: var(--gwp-fw-bold);
}

/* CTA wrapper — 41px gap from list */
.gwp-faq__cta-wrap {
    margin-top: 41px !important;
}

/* CTA — 260×50, 12px radius. Color / font / shadow inherit from .gwp-btn--primary. */
/* Button visuals from global .gwp-btn.gwp-btn--primary.gwp-btn--cta. */
.gwp-faq__cta {
    width: 260px;
    max-width: 100%;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-faq { padding-top: 70px !important; padding-bottom: 70px !important; }
    .gwp-faq__title { font-size: 40px !important; }
    .gwp-faq__summary { padding: 22px 32px; }
    .gwp-faq__answer { padding: 11px 32px 16px 32px; }
    .gwp-faq__list { margin-top: 40px !important; }
}

@media (max-width: 991.98px) {
    .gwp-faq { padding-top: 50px !important; padding-bottom: 50px !important; }
    .gwp-faq__title { font-size: var(--gwp-fs-3xl) !important; }
    .gwp-faq__summary { padding: 20px 24px; }
    .gwp-faq__answer { font-size: var(--gwp-fs-sm); line-height: 22px; padding: 11px 24px 16px 24px; }
    .gwp-faq__list { margin-top: 36px !important; }
    .gwp-faq__cta-wrap { margin-top: 32px !important; }
}

@media (max-width: 767.98px) {
    /* .gwp-faq__badge responsive tweak deleted (covered by global .gwp-eyebrow). */
    .gwp-faq__title { font-size: 32px !important; }
    .gwp-faq__question { font-size: var(--gwp-fs-sm); line-height: 20px; }
    .gwp-faq__chevron { width: 22px; height: 22px; font-size: 16px; }
    .gwp-faq__answer { font-size: var(--gwp-fs-xs); line-height: 20px; padding-top: 8px; }
}

@media (max-width: 575.98px) {
    .gwp-faq { padding-top: 40px !important; padding-bottom: 40px !important; }
    .gwp-faq__title { font-size: 26px !important; }
    .gwp-faq__summary { padding: 16px 20px; }
    .gwp-faq__answer { padding: 8px 20px 14px 20px; }
    .gwp-faq__question { font-size: var(--gwp-fs-sm); }
    .gwp-faq__list { gap: 12px !important; margin-top: 28px !important; }
    .gwp-faq__cta-wrap { margin-top: 24px !important; }
}

/* ============================================================
   FAQ — REDESIGN VARIANT
   Add `.gwp-faq--redesign` alongside `.gwp-faq` on the <section>
   for the new FAQ style used across GWP-Redesigning pages
   (gradient bg, tighter padding, Plus Jakarta answer copy,
   41px CTA gap, and a scaled responsive ladder).
   Base structure/behavior still comes from `.gwp-faq`; this
   variant only re-tunes padding, spacing, and answer typography.
   ============================================================ */

.gwp-faq.gwp-faq--redesign {
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}

/* Header gap (12px badge → title) already comes from the base
   `.gwp-faq__header`. This variant only zeros the title's top
   margin so `mt-*` utilities on the h2 don't fight the header gap. */
.gwp-faq--redesign .gwp-faq__title {
    margin-top: 0 !important;
}

/* Summary padding. Closed items visually
   even out with 25px top/bottom padding. */
.gwp-faq--redesign .gwp-faq__summary {
    padding: 22px 40px 17px 39px;
}
.gwp-faq--redesign .gwp-faq__item:not([open]) .gwp-faq__summary {
    padding-top: 25px;
    padding-bottom: 25px;
}

/* Answer copy — Plus Jakarta Sans 16/23, dark neutral. Padding
   matches the summary's left/right so the copy stays aligned. */
.gwp-faq--redesign .gwp-faq__answer {
    padding: 11px 40px 22px 39px;
    font-family: var(--gwp-font-title);
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #302e2b;
}
.gwp-faq--redesign .gwp-faq__answer p {
    font-family: var(--gwp-font-title);
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #302e2b;
}

/* CTA gap. Beats the base variant's `!important`
   via 2-class specificity + `!important`. */
.gwp-faq--redesign .gwp-faq__cta-wrap {
    margin-top: 41px !important;
}

/* ---- Responsive ladder ---- */
@media (max-width: 991.98px) {
    .gwp-faq--redesign .gwp-faq__summary { padding: 20px 24px; }
    .gwp-faq--redesign .gwp-faq__item:not([open]) .gwp-faq__summary {
        padding-top: 22px;
        padding-bottom: 22px;
    }
    .gwp-faq--redesign .gwp-faq__answer { padding: 11px 24px 22px 24px; }
    .gwp-faq--redesign .gwp-faq__cta-wrap { margin-top: 32px !important; }
}

@media (max-width: 767.98px) {
    .gwp-faq--redesign .gwp-faq__header { gap: 10px; }
    .gwp-faq--redesign .gwp-faq__summary { padding: 18px 22px; }
    .gwp-faq--redesign .gwp-faq__item:not([open]) .gwp-faq__summary {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .gwp-faq--redesign .gwp-faq__answer {
        padding: 10px 22px 18px 22px;
        font-size: 15px;
        line-height: 22px;
    }
    .gwp-faq--redesign .gwp-faq__answer p {
        font-size: 15px;
        line-height: 22px;
    }
    .gwp-faq--redesign .gwp-faq__cta-wrap { margin-top: 28px !important; }
}

@media (max-width: 575.98px) {
    .gwp-faq--redesign .gwp-faq__title { font-size: 28px !important; }
    .gwp-faq--redesign .gwp-faq__summary { padding: 16px 20px; }
    .gwp-faq--redesign .gwp-faq__item:not([open]) .gwp-faq__summary {
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .gwp-faq--redesign .gwp-faq__answer {
        padding: 8px 20px 14px 20px;
    }
    .gwp-faq--redesign .gwp-faq__question,
    .gwp-faq--redesign .gwp-faq__answer,
    .gwp-faq--redesign .gwp-faq__answer p {
        font-size: 14px;
        line-height: 21px;
    }
    .gwp-faq--redesign .gwp-faq__cta-wrap { margin-top: 20px !important; }
}

/* Footer styles moved to /static/css/gwp-footer.css (loaded globally by _Footer.cshtml). */

/* FORM — 5 simple steps + request more information */
.gwp-form__card {
    background-color: #31356e;
    border-radius: 32px;
    padding: 80px 81px 32px;
    isolation: isolate;
    color: var(--gwp-text-inverse);
}

/* ---- Decorative ellipses ---- */
.gwp-form__blob {
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.gwp-form__blob--bl {
    width: 980px;
    height: 980px;
    left: -340px;
    top: 320px;
    background: radial-gradient(circle at 50% 50%, rgba(88, 95, 190, 0.55) 0%, rgba(88, 95, 190, 0) 60%);
}

.gwp-form__blob--tl {
    width: 495px;
    height: 495px;
    left: -195px;
    top: -178px;
    background: radial-gradient(circle at 50% 50%, rgba(88, 95, 190, 0.45) 0%, rgba(88, 95, 190, 0) 65%);
}

.gwp-form__blob--mr {
    width: 440px;
    height: 440px;
    right: -150px;
    top: 448px;
    background: radial-gradient(circle at 50% 50%, rgba(88, 95, 190, 0.45) 0%, rgba(88, 95, 190, 0) 65%);
}

/* Decorative ring outlines */
.gwp-form__ring {
    border-radius: 50%;
    pointer-events: none;
    border: 60px solid rgba(255, 255, 255, 0.05);
    z-index: 0;
}

.gwp-form__ring--tl { top: -200px; left: -260px; width: 460px; height: 460px; }
.gwp-form__ring--br {
    bottom: 28%;
    right: -150px;
    width: 460px;
    height: 460px;
}

.gwp-form__card > * { position: relative; z-index: 1; }

/* ---- Top row: steps + heading ---- */
.gwp-form__top {
    gap: 60px;
}

/* Reserve the wide 161px gap for xl+ desktop where the card is wide enough
   to absorb it. iPad range (992-1199) keeps the 60px default so the two
   columns don't drift apart with a big empty band between them. */
@media (min-width: 1200px) {
    .gwp-form__top { gap: 161px; }
}

/* ---- Steps list ---- */
.gwp-form__steps {
    width: 100%;
    max-width: 582px;
    gap: 12px;
}

.gwp-form__step {
    gap: 23px;
}

.gwp-form__step-num {
    width: 59px;
    height: 56px;
    border-radius: var(--gwp-radius-pill);
    background-color: var(--gwp-text-inverse);
    color: var(--gwp-heading);
    font-family: var(--gwp-font-title);
    font-size: 25px;
    font-weight: var(--gwp-fw-bold);
    letter-spacing: 0.25px;
    box-shadow: 0 4px 7.05px rgba(36, 91, 227, 0.33);
    transition: background-color 0.35s ease,
                color 0.35s ease,
                transform 0.35s ease,
                box-shadow 0.35s ease;
}

.gwp-form__step-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--gwp-text-inverse);
    color: var(--gwp-heading);
    border: 1px solid transparent;
    border-radius: var(--gwp-radius-sm);
    padding: 10px 22px;
    box-shadow: 0 29px 26.35px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

/* Soft gold sheen from top-right — same pattern as .gwp-different__card. */
.gwp-form__step-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at top right,
                                rgba(245, 178, 9, 0.10),
                                transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

/* Hover — card lifts with gold-tinted shadow + gold border + gold sheen;
   number pill swaps to gold (mirrors the eyebrow icon on .gwp-different__card). */
.gwp-form__step:hover .gwp-form__step-card {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -14px rgba(49, 53, 110, 0.22),
                0 8px 18px -8px rgba(245, 178, 9, 0.20);
    border-color: var(--gwp-primary);
}

.gwp-form__step:hover .gwp-form__step-card::before {
    opacity: 1;
}

.gwp-form__step:hover .gwp-form__step-num {
    background-color: var(--gwp-primary);
    color: var(--gwp-heading);
    transform: scale(1.06);
    box-shadow: 0 8px 18px -4px rgba(245, 178, 9, 0.45);
}

.gwp-form__step-title {
    font-family: var(--gwp-font-title);
    font-size: var(--gwp-fs-md);
    font-weight: var(--gwp-fw-bold);
    line-height: 1.31;
}

.gwp-form__step-body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-base);
    font-weight: var(--gwp-fw-regular);
    line-height: 1.331;
    margin-top: 6px;
}

/* All 5 step cards render uniformly white — no active-state variant. */

/* ---- Heading column ---- */
.gwp-form__heading {
    width: 100%;
    color: var(--gwp-text-inverse);
}

@media (min-width: 992px) {
    .gwp-form__heading { max-width: 384px; }
}

.gwp-form__title {
    font-family: var(--gwp-font-title);
    font-size: 46px !important;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.15;
    color: var(--gwp-text-inverse);
    opacity: 0.95;
}

.gwp-form__title-accent {
    color: #fac109;
}

.gwp-form__description {
    font-family: 'Be Vietnam Pro', var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 26px;
}

/* ---- Bottom: CTA panel with gradient + form ---- */
.gwp-form__cta {
    margin-top: 56px;
    border: 2px solid #f2f6ff;
    border-radius: 32px;
    background: linear-gradient(104.56deg, #31356e 22.43%, #585fbe 95.025%);
    padding: 32px 35px;
    gap: 40px;
}

@media (min-width: 992px) {
    .gwp-form__cta { gap: 80px; padding: 40px 35px 32px; }
}

.gwp-form__intro {
    color: var(--gwp-text-inverse);
    max-width: 470px;
}

.gwp-form__intro-title {
    font-family: var(--gwp-font-title);
    font-size: 28px;
    font-weight: var(--gwp-fw-bold);
    line-height: 1.5;
    color: var(--gwp-text-inverse);
    text-transform: capitalize;
}

@media (min-width: 992px) {
    .gwp-form__intro-title { font-size: 36px; }
}

.gwp-form__intro-accent {
    color: var(--gwp-primary);
    padding-right: 0.12em;
}

.gwp-form__intro-body {
    font-family: var(--gwp-font-body);
    font-size: var(--gwp-fs-md);
    line-height: 28px;
}

/* ---- White form panel */
.gwp-form__panel {
    width: 100%;
    max-width: 442px;
    background-color: var(--gwp-surface-0);
    border: 2px solid #4a7ae5;
    border-radius: var(--gwp-radius-lg);
    padding: 20px;
    margin-left: auto;
}

.gwp-form__panel-title {
    font-family: var(--gwp-font-title);
    font-size: 22px;
    font-weight: var(--gwp-fw-bold);
    color: var(--gwp-heading);
    opacity: 0.9;
}

.gwp-form__fields {
    margin-top: 42px;
}

.gwp-form__row {
    gap: 16px;
}

.gwp-form__row .gwp-form__field { flex: 1 1 0; min-width: 0; }

.gwp-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gwp-form__label {
    font-family: var(--gwp-font-title);
    font-size: 12px;
    font-weight: var(--gwp-fw-semibold);
    color: #0f2c6e;
    margin: 0;
}

.gwp-form__input {
    width: 100%;
    height: 38px;
    padding: 10px 12px;
    border: none;
    border-bottom: 0.6px solid #595959;
    background-color: transparent;
    font-family: 'Be Vietnam Pro', var(--gwp-font-body);
    font-size: 14px;
    font-weight: 300;
    color: var(--gwp-text-body);
    outline: none;
    border-radius: 0;
}

.gwp-form__input::placeholder {
    color: #595959;
    font-weight: 300;
}

.gwp-form__input:focus {
    border-bottom-color: var(--gwp-heading);
    border-bottom-width: 1.2px;
}

.gwp-form__input:focus-visible {
    outline: 2px solid var(--gwp-heading);
    outline-offset: 2px;
}

/* ---- Submit ---- */
.gwp-form__submit {
    margin-top: 15px;
    gap: 10px;
}

/* Full-width submit — color / font / shadow inherit from .gwp-btn--primary.
   `border: none` neutralizes the browser's default <button> border. */
.gwp-form__cta-btn {
    flex: 0 0 auto;
    width: 100%;
    height: 50px;
    border-radius: 12px;
    border: none;
}

.gwp-form__footnote {
    font-family: 'Be Vietnam Pro', var(--gwp-font-body);
    font-size: 12px;
    line-height: 1.331;
    color: var(--gwp-heading);
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .gwp-form__card { padding: 60px 48px 28px; }
    .gwp-form__title { font-size: 38px !important; }
    .gwp-form__description { font-size: var(--gwp-fs-base); line-height: 24px; }
    .gwp-form__ring--tl { width: 420px; height: 420px; top: -180px; left: -230px; border-width: 54px; }
    .gwp-form__ring--br { width: 420px; height: 420px; bottom: 24%; right: -140px; border-width: 54px; }
}

@media (max-width: 991.98px) {
    .gwp-form__card { padding: 40px 24px 24px; }
    .gwp-form__top { gap: 40px; }
    .gwp-form__title { font-size: 32px !important; }
    .gwp-form__cta { flex-direction: column; padding: 32px 24px; margin-top: 36px; }
    .gwp-form__intro { max-width: 100%; text-align: center; }
    .gwp-form__panel { margin-left: 0; margin-right: 0; max-width: 100%; }
    .gwp-form__ring--tl { width: 340px; height: 340px; top: -140px; left: -180px; border-width: 44px; }
    .gwp-form__ring--br { width: 340px; height: 340px; bottom: 14%; right: -110px; border-width: 44px; }
    .gwp-form__blob--bl, .gwp-form__blob--mr { width: 600px; height: 600px; }
}

@media (max-width: 767.98px) {
    .gwp-form__card { padding: 36px 20px 22px; border-radius: 24px; }
    .gwp-form__top { gap: 32px; }
    .gwp-form__steps { gap: 10px; }
    .gwp-form__step { gap: 16px; }
    .gwp-form__step-num { width: 52px; height: 50px; font-size: 22px; }
    .gwp-form__step-card { padding: 10px 18px; }
    .gwp-form__step-title { font-size: var(--gwp-fs-base); }
    .gwp-form__step-body { font-size: var(--gwp-fs-sm); }
    .gwp-form__title { font-size: 28px !important; }
    .gwp-form__description { font-size: var(--gwp-fs-sm); line-height: 22px; }
    .gwp-form__intro-title { font-size: 26px; }
    .gwp-form__intro-body { font-size: var(--gwp-fs-sm); line-height: 22px; }
    .gwp-form__panel-title { font-size: 18px; }
    .gwp-form__fields { margin-top: 28px; }
    .gwp-form__ring--tl { width: 280px; height: 280px; top: -110px; left: -140px; border-width: 36px; }
    .gwp-form__ring--br { width: 280px; height: 280px; bottom: 10%; right: -90px; border-width: 36px; }
}

@media (max-width: 575.98px) {
    .gwp-form__card { padding: 32px 16px 20px; border-radius: 20px; }
    .gwp-form__step { gap: 14px; }
    .gwp-form__step-num { width: 50px; height: 48px; font-size: 20px; }
    .gwp-form__step-card { padding: 12px 16px; }
    .gwp-form__title { font-size: 26px !important; }
    .gwp-form__intro-title { font-size: 22px; line-height: 1.3; }
    .gwp-form__cta { padding: 24px 16px; border-radius: 20px; gap: 24px; }
    .gwp-form__row { flex-direction: column; gap: 18px; }
    .gwp-form__panel { padding: 16px; }
    .gwp-form__fields { margin-top: 22px; gap: 16px !important; }
    .gwp-form__cta-btn { height: 46px; font-size: 16px; }
    .gwp-form__ring--tl { width: 220px; height: 220px; top: -90px; left: -110px; border-width: 30px; }
    .gwp-form__ring--br { width: 220px; height: 220px; bottom: 6%; right: -70px; border-width: 30px; }
}

/* ============================================================
   BUTTON MICRO-INTERACTIONS
   Adds sheen sweep, lift + colored shadow, press feedback,
   accessible focus ring. Targets every CTA on the homepage:
   .gwp-btn (and all section-scoped variants that compose it),
   .gwp-plan__cta, .gwp-form__cta-btn, .gwp-outcome__card-link.
   ============================================================ */

.gwp-btn,
.gwp-plan__cta,
.gwp-form__cta-btn {
    position: relative;
    overflow: hidden;
    /* Clean Material-standard ease — no overshoot. Snappy transform,
       gentler shadow fade so the lift doesn't feel hard. */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.18s ease,
                color 0.18s ease,
                border-color 0.18s ease;
}

/* Sheen — narrow skewed light strip that sweeps across on hover/focus. */
.gwp-btn::before,
.gwp-plan__cta::before,
.gwp-form__cta-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -85%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    transform: skewX(-22deg);
    transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.gwp-btn:hover::before,
.gwp-btn:focus-visible::before,
.gwp-plan__cta:hover::before,
.gwp-plan__cta:focus-visible::before,
.gwp-form__cta-btn:hover::before,
.gwp-form__cta-btn:focus-visible::before {
    left: 130%;
}

/* Glass overlay — fades in on hover/focus. Layers a top-edge specular
   highlight + soft inner glass rim. White gradient is concentrated in
   the top 35% of the button (above the centered label) so type stays
   crisp underneath; the inset edge highlights give the "wet glass" feel. */
.gwp-btn::after,
.gwp-plan__cta::after,
.gwp-form__cta-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.18) 18%,
        rgba(255, 255, 255, 0.04) 35%,
        transparent 55%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        inset 0 12px 24px -10px rgba(255, 255, 255, 0.30);
}

.gwp-btn:hover::after,
.gwp-btn:focus-visible::after,
.gwp-plan__cta:hover::after,
.gwp-plan__cta:focus-visible::after,
.gwp-form__cta-btn:hover::after,
.gwp-form__cta-btn:focus-visible::after {
    opacity: 1;
}

/* Yellow CTAs — ONE shared hover for every gold/primary button on the page:
   .gwp-btn--primary (hero, value, faq, perks, where, different, refundable),
   .gwp-plan__cta--solid, and .gwp-form__cta-btn. Lifts, brightens to a softer
   yellow, drops a gold-tinted halo. */
.gwp-btn--primary:hover,
.gwp-btn--primary:focus-visible,
.gwp-plan__cta--solid:hover,
.gwp-plan__cta--solid:focus-visible,
.gwp-form__cta-btn:hover,
.gwp-form__cta-btn:focus-visible {
    background-color: #ffe066;
    color: var(--gwp-heading);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(245, 178, 9, 0.45),
                0 4px 10px rgba(49, 53, 110, 0.18);
}

/* White / outline CTAs — ONE shared hover for every transparent-on-dark
   button: .gwp-btn--outline (hero) and .gwp-plan__cta--outline. Fills with
   white, flips text to navy, drops a cool white halo. */
.gwp-btn--outline:hover,
.gwp-btn--outline:focus-visible,
.gwp-plan__cta--outline:hover,
.gwp-plan__cta--outline:focus-visible {
    background-color: var(--gwp-surface-0);
    border-color: var(--gwp-surface-0);
    color: var(--gwp-heading);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -10px rgba(255, 255, 255, 0.35);
}

/* Press feedback — quick crunch */
.gwp-btn:active,
.gwp-plan__cta:active,
.gwp-form__cta-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.08s;
}

/* Accessible keyboard focus ring */
.gwp-btn:focus-visible,
.gwp-plan__cta:focus-visible,
.gwp-form__cta-btn:focus-visible {
    outline: 2px solid var(--gwp-primary);
    outline-offset: 3px;
}

/* Outcome card "View Details" — arrow slides on hover */
.gwp-outcome__card-link .bi {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gwp-outcome__card-link:hover .bi,
.gwp-outcome__card-link:focus-visible .bi {
    transform: translateX(5px);
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .gwp-btn,
    .gwp-plan__cta,
    .gwp-form__cta-btn,
    .gwp-outcome__card-link .bi {
        transition: none;
    }
    .gwp-btn::before,
    .gwp-plan__cta::before,
    .gwp-form__cta-btn::before,
    .gwp-btn::after,
    .gwp-plan__cta::after,
    .gwp-form__cta-btn::after {
        display: none;
    }
    .gwp-btn--primary:hover,
    .gwp-btn--outline:hover,
    .gwp-plan__cta--solid:hover,
    .gwp-plan__cta--outline:hover,
    .gwp-form__cta-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Book A Demo — CTA button override.
   Neutralizes `.gwp-btn` flex-basis=240px, which stretches the
   button in a column-flex parent, and centers the label. */
.book-demo-form__cta.gwp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 24px;
    border-radius: 12px;
    background-color: #f5b209;
    color: #0f2c6e;
    font-family: var(--gwp-font-title);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.book-demo-form__cta.gwp-btn:hover,
.book-demo-form__cta.gwp-btn:focus {
    background-color: #d99a08;
    color: #0f2c6e;
}

/* ===== ADA / WCAG 2.1 AA — global keyboard-focus indicators ===== */

/* 2.4.7 Focus Visible: universal outline for interactive elements on redesign pages */
.gwp-btn:focus-visible,
[class*="gwp-"] button:focus-visible,
[class*="gwp-"] a:focus-visible,
[class*="gwp-"] summary:focus-visible,
[class*="gwp-"] input:focus-visible,
[class*="gwp-"] select:focus-visible,
[class*="gwp-"] textarea:focus-visible,
[class*="gwp-"] [role="button"]:focus-visible,
[class*="gwp-"] [tabindex="0"]:focus-visible {
    outline: 2px solid #31356e;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(49, 53, 110, 0.2);
    border-radius: 4px;
}

/* Dark-background variant — invert outline so it stays visible on navy/purple hero */
.gwp-hero :focus-visible,
.gwp-hero--dark :focus-visible,
[class*="--dark"] :focus-visible,
.lpg-hero :focus-visible,
.lyp-hero :focus-visible {
    outline-color: #f5b209;
    box-shadow: 0 0 0 4px rgba(245, 178, 9, 0.35);
}

/* 2.4.7 — form inputs previously set outline:none; restore visible focus */
.book-demo-form__input:focus-visible,
.contact-form__input:focus-visible,
.lyp-form__input:focus-visible,
.lpg-form__input:focus-visible {
    outline: 2px solid #31356e;
    outline-offset: 2px;
}

/* 1.4.1 / 2.4.7 — restore link underline on keyboard focus (customTheme.css strips it globally) */
[class*="gwp-"] a:focus-visible,
.about-us-page a:focus-visible,
.tou-page a:focus-visible,
.pr-page a:focus-visible {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}